/* Tus reglas de html */
html {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Tus reglas de body */
body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  overflow-y: scroll !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: y mandatory !important; /* ¡SE MANTIENE AQUÍ PARA ESCRITORIO! */
  scroll-padding-top: 122px !important; /* Valor inicial, ajustado por JS */
  background-color: #fdfbf8 !important;
  color: #2a2a2a !important;
  font-family: 'Roboto Slab', serif;
}

h1, h2, h3, h4, .titulo-principal {
  font-family: 'Bodoni Moda', serif;
}

/* ... el resto de tu CSS ... */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: #fdfbf8; /* Este es el color del fondo que cubre toda la pantalla */
  z-index: 9999;
  display: flex; /* Habilita el modelo de caja flexible para centrar el contenido */
  align-items: center; /* Centra el contenido secundario (el wrapper) verticalmente */
  justify-content: center; /* Centra el contenido secundario (el wrapper) horizontalmente */
  overflow-y: auto; /* Permite scroll vertical si el contenido del formulario es más grande que la ventana */
}


.age-gate-form {
    background: rgba(0, 0, 0, 0.5)  !important;
    border: 1px dotted #ccc;
    padding: 2.5rem 3rem;
    max-width: 650px;
    width: 100%;
    font-family: 'Georgia', serif;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    margin: auto !important;
    
    /* AÑADIDO/MODIFICADO para flexbox */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo, h1, y botón */
}


.age-gate-form h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #fff; /* Asegurado que sea blanco, como en el diseño */
}

/* Reglas generales para select e input dentro del formulario */
.age-gate-form select,
.age-gate-form input {
    padding: 0.5rem; /* Aumenta el padding vertical y horizontal para hacerlos más grandes */
    font-size: 1.1rem; /* Aumenta el tamaño de la fuente */
    width: 100%; /* Mantiene el ancho al 100% */
    margin-bottom: 1.2rem; /* Puede que necesites ajustar el margen inferior */
    border: 1px solid #fff; /* Borde blanco */
    background: none; /* Fondo negro */
    color: #fff; /* Texto blanco */

    /* AÑADIDO para flexbox */
    align-self: flex-start; /* Alinea estos campos a la izquierda */
}

/* Sobrescribir los estilos para input del dob-group si se aplica por defecto */
.dob-group input {
    /* flex: 1 aquí afecta la altura cuando flex-direction es column */
    flex: 1; 
    /* Ajusta estos valores para que coincidan con los de arriba o sean proporcionales */
    padding: 0.8rem; /* Asegúrate de que el padding sea similar o igual */
    font-size: 1.1rem; /* Asegúrate de que la fuente sea similar o igual */
    background: none; /* Color de fondo específico para dob-group input */
    color: #fff; /* Color de texto específico para dob-group input */
    border: 1px solid #fff;
}


.dob-group {
  display: flex !important;
  flex-direction: row !important; /* Horizontal para escritorio */
  gap: 0.6rem !important;
  margin-bottom: 1rem;

  /* AÑADIDO para flexbox */
  align-self: flex-start; /* Alinea el grupo de campos de fecha a la izquierda */
}


.age-gate-form label {
    display: flex;
    align-items: center !important; /* Mantiene el checkbox y el texto centrados verticalmente */
    gap: 0.5rem; /* AÑADE un pequeño espacio entre el checkbox y el texto */
    align-self: flex-start; /* Alinea la etiqueta completa a la izquierda dentro del formulario */
    font-size: 0.9rem;
    margin: 0.5rem 0;
    color: #444;
    white-space: nowrap;
}


.age-gate-form button {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;

    /* Asegura que el botón se centre con flexbox */
    align-self: center;
}

.age-gate-form button:hover {
    background: #c8ab63;
    color: #fff;
}

.age-gate-form .error {
    color: darkred;
    margin-top: 1rem;
}

.age-gate-overlay::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('../img/video2.png') no-repeat center center;
    background-size: cover;
    z-index: -1;
    filter: brightness(0.45); 
}

.age-gate-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.selecciona_pais {
  font-size: 1rem !important;
  color: #cccccc !important;
  margin-bottom: 0.5rem;
}

.age-gate-form label input[type="checkbox"] {
    -webkit-appearance: none;   /* Oculta la apariencia nativa en navegadores WebKit */
    -moz-appearance: none;      /* Oculta la apariencia nativa en Firefox */
    appearance: none;           /* Oculta la apariencia nativa (estándar) */
    border: 1px solid #ccc;     /* Borde gris claro para la casilla sin marcar */
    width: 1.2em;               /* Ancho de la casilla (ajusta si es necesario) */
    height: 1.2em;              /* Altura de la casilla (ajusta si es necesario) */
    cursor: pointer;            /* Muestra que es cliqueable */
    position: relative;         /* Necesario para posicionar el checkmark personalizado */
    background-color: transparent !important; /* ¡IMPORTANTE! Fondo transparente por defecto */
    vertical-align: middle;     /* Ayuda a la alineación vertical con el texto */
    flex-shrink: 0;             /* Evita que el checkbox se encoja en un contenedor flex */
    margin-bottom: 0 !important; /* Elimina el margen inferior que causaba desalineación */
}

.age-gate-form label input[type="checkbox"]:checked {
    background-color: #c8ab63 !important; /* ¡IMPORTANTE! Color de fondo cuando está marcado */
    border-color: #c8ab63;     /* Opcional: Color del borde cuando está marcado */
}

.age-gate-form label input[type="checkbox"]:checked::before {
    content: '\2713'; /* Símbolo de palomita (✓) usando código Unicode */
    display: block;
    color: #000;      /* Color de la palomita (negro para buen contraste) */
    font-size: 1em;   /* Tamaño de la palomita */
    text-align: center;
    line-height: 1.1em; /* Centra verticalmente la palomita dentro de la casilla */
    position: absolute; /* Posiciona la palomita absolutamente dentro del checkbox */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.acepta_terminos{
    color: #cccccc;
    margin-top: 1rem;
}

  .age-gate-logo img {
  max-width: 200px;
  height: auto;
}

/* MEDIA QUERIES PARA RESPONSIVIDAD */

/* Móviles grandes (entre 768px y 991.98px) */
@media (max-width: 991.98px) and (min-width: 768px) {
  .age-gate-logo img {
  max-width: 250px;
  height: auto;
}
}

@media (max-width: 991.98px) {

.age-gate-form {
      width: 80% !important; /* Mantenemos este ancho */ 
      min-height: 612px !important;     
      color: #fff !important;
      border: 1px solid #fff !important;
      display: flex !important;
      flex-direction: column !important;      
      font-family: Arial, sans-serif !important;
      box-shadow: none !important;
      /* Asegura que el formulario esté centrado y sus elementos internos se puedan alinear */
      align-items: center !important; /* Mantiene el logo, h1 y botón centrados en móvil */
    }

.age-gate-wrapper {
  width: 90%;
  padding: 1.5rem;
    margin: auto !important; 
}

.age-gate-logo {
  margin-top: 4rem;
  text-align: center;
  margin-bottom: 1rem;
  align-self: center !important; /* Centra el logo en móvil */
}

.age-gate-logo img {
  max-width: 250px;
  height: auto;
}

.age-gate-form h1 { /* Asegura que este h1 específico del formulario se alinee correctamente */
  text-align: center;
  font-size: 2.5rem !important; /* Tamaño consistente con h1 general en móvil */
  font-weight: bold;
  margin-bottom: 4rem !important; /* Margen consistente */
  letter-spacing: 1px;
  color: #eeeeee !important; /* Color consistente */
  align-self: center !important; /* Centra el h1 del formulario en móvil */
}

.age-gate-form input { /* NOTA: Ahora solo dice 'input' */
    padding: 2rem;
    font-size: 2.5rem;
    margin-bottom: 1.5rem !important;
    background: none !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

.age-gate-form select {
    padding: 2rem;
    font-size: 2rem !important; /* Nuevo tamaño de fuente más pequeño para el select */
    margin-bottom: 2rem !important;
    background: none !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

.dob-group input {
    flex: 1; 
    /* AJUSTE CLAVE: Asegura que el input dentro del dob-group ocupe todo el ancho disponible en su columna. */
    width: 100% !important; 
    max-width: none !important; /* Elimina cualquier restricción de ancho máximo si la hubiera */
    padding: 1rem; 
    font-size: 2.5rem; 
    margin-bottom: 2rem;
}

.dob-group {
  display: flex;
  flex-direction: column !important; /* Vertical para móvil */
  gap: 0.7rem;
  margin-bottom: 2rem;
  align-self: flex-start !important; /* Alinea el grupo de campos de fecha a la izquierda en móvil */
  
  /* AÑADIDO: Fuerza al contenedor del grupo de fecha a ocupar el 100% del ancho disponible */
  width: 100% !important; 
}

.age-gate-form label {
  font-size: 0.75rem;
  color: #ccc;
  margin-bottom: 0.2rem;
  align-self: flex-start !important; /* Alinea la etiqueta del checkbox a la izquierda en móvil */
}

.age-gate-form button {
  width: 100%;
  font-size: 2rem;
  padding: 1.5rem !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: none;
  align-self: center !important; /* Centra el botón en móvil */
}

.age-gate-form button:hover {
  background: #fff;
  color: #000;
}

.age-gate-form .legal-text {
  font-size: 0.7rem;
  color: #ccc;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.3;
}

.selecciona_pais {
  font-size: 2rem !important;
  color: #cccccc;
  margin-bottom: 0.5rem;
}
.acepta_terminos{
    color: #cccccc;
    font-size: 2rem !important;
    margin-bottom: 3rem;
    margin-top: 1rem;
    width: 70%;
    text-align: center;
}
.age-gate-form label input[type="checkbox"] {
    width: 1.8rem !important;            /* Tamaño fijo para el ancho del checkbox */
    height: 1.8rem !important;           /* Tamaño fijo para la altura del checkbox */
    font-size: 2rem !important;        /* Ajusta el tamaño de la fuente para la palomita */
    padding: 0.5rem !important;             /* ¡IMPORTANTE! Elimina el padding que lo hacía grande */
    box-sizing: border-box !important; /* Asegura que width/height incluyan padding y border */
  }

  /* Asegúrate de que la palomita se ajuste al nuevo tamaño */
  .age-gate-form label input[type="checkbox"]:checked::before {
      font-size: 1.5rem !important;     /* Coincide con el font-size del input para la palomita */
      line-height: 1.5rem !important;   /* Coincide con la altura del input para centrar la palomita */
  }

}