/* Variables de Color (tonos personalizados actualizados) */
:root {
    --color-primary-light-pink: #f5d0d0; /* HEX f5d0d0 (se mantiene) */
    --color-primary-dark-blue: #9fc6ab; /* Verde suave */
    --color-secondary-blue-grey: #77ca92; /* Verde más vivo */
    --color-light-blue: #d4e8fc;        /* HEX d4e8fc (azul muy claro) */
    --color-accent-pink: #fca1cb;       /* HEX fca1cb (se mantiene) */
    --color-primary-pink: #c69fad;      /* HEX c69fad (nuevo rosa principal) */
    --color-dark-blue: #3043cf;         /* Nuevo azul fuerte para la sección Membresías */

    --color-neutral-light: #FBFBFB; /* Blanco muy suave, se mantiene */
    --color-text-dark: #333;        /* Gris oscuro, se mantiene */
    --color-text-light: #fff;       /* Blanco, se mantiene */
    --color-overlay: rgba(0, 0, 0, 0.25); /* Overlay, se mantiene */
}

/* Base y Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-neutral-light);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Background General (1.jpg) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* RUTA DE IMAGEN DE FONDO: Asume public_html/assets/images/1.jpg */
    background: url('../assets/images/1.jpg') no-repeat center center / cover;
    z-index: -2;
    opacity: 0.8;
}

/* Contenedor general para centrar contenido */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo casi blanco semi-transparente */
    backdrop-filter: blur(5px);
    z-index: 1000;
    color: var(--color-text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left .main-logo-left {
    height: 50px; /* Tamaño del logo a la izquierda */
    display: block;
}

.header-center {
    /* Este div está vacío */
}

.header-right ul {
    display: flex;
    gap: 30px;
}

.header-right ul li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
    color: var(--color-text-dark);
}

.header-right ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-primary-dark-blue); /* Usa el nuevo verde suave */
    transition: width 0.3s ease;
}

.header-right ul li a:hover {
    color: var(--color-primary-dark-blue); /* Usa el nuevo verde suave */
}

.header-right ul li a:hover::after {
    width: 100%;
}

/* Estilos del menú hamburguesa */
.menu-toggle {
    display: none; /* Oculto por defecto en escritorio */
    font-size: 1.8em; /* Tamaño del icono */
    color: var(--color-primary-dark-blue); /* Color del icono de hamburguesa */
    cursor: pointer;
    z-index: 1001; /* Asegura que esté por encima de otros elementos */
    margin-left: 20px; /* Espacio para separar el icono */
}


/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 80px; /* Espacio para el header fijo */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay); /* Overlay ligeramente más oscuro */
    z-index: -1;
}

.hero-content {
    display: flex;
    justify-content: space-between; /* Empuja el contenido a los extremos */
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    color: var(--color-text-light); /* Texto blanco sobre el fondo oscuro/video */
    z-index: 1;
}

/* Nuevo contenedor para el texto y botón del Hero */
.hero-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Alinea el texto y el botón a la derecha */
    align-items: flex-end;
    text-align: right; /* Alinea el texto dentro de sus líneas a la derecha */
    max-width: 50%; /* Mantener el ancho para el texto */
    padding-left: 20px; /* Espacio entre el texto y el video */
    margin-right: -5%; /* Ajusta este valor para mover más a la derecha */
}

.hero-text-line {
    font-size: 1.5rem; /* Tamaño de fuente para cada línea, puedes ajustar */
    line-height: 1.2; /* Espacio entre líneas para compactar el texto */
    margin-bottom: 5px; /* Pequeño margen entre las líneas del texto */
    font-weight: 300; /* Puedes ajustar el grosor de la fuente si es necesario */
}

.btn-asociarme {
    display: inline-block;
    padding: 15px 35px;
    background-color: var(--color-accent-pink); /* Botón con el rosa de acento */
    color: var(--color-text-light);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-top: 20px; /* Espacio entre el último párrafo y el botón */
    border: none; /* Asegura que no tenga borde predeterminado */
    cursor: pointer; /* Indica que es clickeable */
}

.btn-asociarme:hover {
    background-color: var(--color-primary-light-pink); /* Hover a rosa más claro */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    color: var(--color-primary-dark-blue); /* Texto oscuro en hover para contraste, usa el nuevo verde suave */
}

/* INICIO DE LOS ESTILOS DEL CONTENEDOR DE VIDEO Y BOTÓN DE CONTROL */
.hero-video-container {
    flex: 1;
    max-width: 450px; /* Tamaño del video más grande */
    position: relative;
    display: flex;
    justify-content: flex-start; /* Alinea el video a la izquierda dentro de su espacio flexible */
    align-items: center; /* Centra verticalmente el video si hay espacio */
    /* Añadido para el evento de hover en el JS: */
    overflow: hidden; /* Asegura que el botón no se salga del contenedor */
}

.hero-video-container video {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: block;
    object-fit: cover; /* Asegura que el video cubra el área sin distorsión */
}

/* Estilos para el botón de control de video/sonido */
.video-control-btn {
    position: absolute;
    /* Ubicación: abajo a la izquierda */
    bottom: 20px; /* Ajusta la distancia desde abajo */
    left: 20px; /* Ajusta la distancia desde la izquierda */
    background-color: var(--color-primary-dark-blue); /* Color de la paleta: Verde suave */
    color: var(--color-text-light); /* Icono blanco */
    border: none;
    border-radius: 50%;
    width: 60px; /* Tamaño pequeño, ajusta a tu gusto */
    height: 60px; /* Mismo tamaño para que sea circular */
    font-size: 1.8rem; /* Tamaño del icono */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.5s ease;
    z-index: 60;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 1; /* Visible por defecto */
    pointer-events: auto; /* Es clickable */
}

.video-control-btn:hover {
    background-color: var(--color-secondary-blue-grey); /* Verde más vivo en hover */
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
    opacity: 1;
}

/* Clase para ocultar el botón cuando el video se reproduce */
.video-control-btn.hidden {
    opacity: 0;
    pointer-events: none; /* Inhabilita clics cuando está oculto */
}

/* Cuadrante inferior izquierdo para el hover */
/* Esta clase se añadirá dinámicamente por JS */
.video-quadrant-hover-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%; /* Define el cuadrante inferior izquierdo */
    height: 50%;
    z-index: 50; /* Debe estar por debajo del botón pero por encima del video */
    /* background-color: rgba(255, 0, 0, 0.1); /* Para depuración, puedes quitarlo */
}

/* FIN DE LOS ESTILOS DEL CONTENEDOR DE VIDEO Y BOTÓN DE CONTROL */

/* Secciones Generales */
.section {
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden; /* Para animaciones */
    background-color: var(--color-neutral-light); /* Fondo general neutro */
    color: var(--color-text-dark);
}

.section h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    color: var(--color-primary-dark-blue); /* Usa el nuevo verde suave */
}

.section h2::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 4px;
    background-color: var(--color-primary-pink); /* Nuevo rosa principal */
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Sección CANNAMAXIA */
.cannamaxia-section {
    background-color: var(--color-primary-dark-blue); /* Usa el nuevo verde suave */
    color: var(--color-text-light); /* Texto claro para contraste */
}

.cannamaxia-section p {
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 20px auto; /* Reducido para que el rotating-logo esté más cerca */
    color: var(--color-text-light); /* Texto claro para contraste */
    text-align: left; /* Alineado a la izquierda */
}

/* Sección específica para cannamaxia.html */
.cannamaxia-main-content {
    padding-top: 100px; /* Espacio para el header fijo */
    min-height: calc(100vh - 120px); /* Ajusta la altura para que el footer no se superponga */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent; /* Fondo transparente para que se vea el body::before */
    color: var(--color-text-dark); /* Color de texto predeterminado, aunque las secciones lo sobreescribirán */
}

.cannamaxia-about-section {
    background-color: rgba(255, 255, 255, 0.95); /* Fondo casi blanco semi-transparente */
    padding: 40px;
    margin: 40px auto; /* Margen superior e inferior para separarla del header/footer */
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    color: var(--color-text-dark); /* Color de texto oscuro para esta sección */
    text-align: center; /* Centra los párrafos y el logo dentro de esta sección */
}

.cannamaxia-about-section h2 {
    color: var(--color-primary-dark-blue); /* Verde suave para el título */
    margin-bottom: 25px;
}

.cannamaxia-about-section p {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto 15px auto; /* Espacio entre párrafos */
    color: #555; /* Un gris un poco más oscuro para el texto de contenido */
    text-align: center; /* Asegura que el texto esté centrado aquí */
}

/* Animación de logo rodando de izquierda a derecha */
.cannamaxia-rolling-logo-container {
    overflow: hidden; /* Asegura que el logo solo sea visible dentro del contenedor */
    position: relative; /* Para posicionar el logo dentro */
    width: 100%; /* El contenedor ocupa todo el ancho de su padre */
    height: 200px; /* Puedes ajustar esta altura para el contenedor del logo */
    display: flex; /* Para centrar el logo verticalmente si el contenedor es más alto */
    align-items: center; /* Centrado vertical */
    margin-top: 20px; /* Espacio superior, ajusta si es necesario */
    margin-bottom: 20px; /* Espacio inferior, ajusta si es necesario */
}

.cannamaxia-rolling-logo {
    position: absolute;
    /* Ajusta el width del logo. Un buen punto de partida podría ser 100px o 150px. */
    /* Este valor es CRUCIAL para el efecto de rodadura. */
    width: 200px; /* Por ejemplo, si tu logo tiene 200px de diámetro */
    height: 200px; /* Mismo valor que el width para que sea circular si el logo lo es */
    top: 50%; /* Centrar verticalmente */
    transform: translateY(-50%); /* Ajuste fino para centrado vertical */
    
    /* La duración de la animación de movimiento */
    /* Cuanto más grande el logo, más rápido debe ser para parecer que rueda */
    animation: rollAcross 20s linear infinite; /* Tiempo de 20s para cruzar la pantalla */
    
    /* La rotación se ajusta en base al movimiento */
    /* Cada 200px de movimiento (el ancho del logo) es una vuelta (360deg) */
    /* Si la animación rollAcross dura 20s y el logo es 200px, y la pantalla es 1000px, */
    /* se moverá 200px/s, entonces hará 10 vueltas en 20s. Ajusta esto con @keyframes rollAcross */
}

/* Animación de movimiento horizontal y rotación combinada */
@keyframes rollAcross {
    0% {
        left: -150px; /* Empieza 150px fuera del borde izquierdo */
        transform: translateY(-50%) rotate(0deg); /* Inicia sin rotación */
    }
    100% {
        left: calc(100% + 150px); /* Termina 150px fuera del borde derecho */
        /* Calcula la rotación: si el ancho es 100px y la pantalla es ~1000px, el logo recorre ~1150px.
           1150px / 100px por vuelta = 11.5 vueltas. */
        transform: translateY(-50%) rotate(4140deg); /* (11.5 * 360 = 4140) Ajusta este valor para una rotación más fluida */
    }
}
.genetics-section {
    background-color: rgba(168, 230, 207, 0.95); /* Un tono de verde claro para esta sección */
    padding: 40px;
    margin: 40px auto;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    text-align: center;
    color: var(--color-text-dark); /* Texto oscuro para esta sección */
}

.genetics-section h2 {
    color: var(--color-dark-blue); /* Un azul oscuro para el título */
    margin-bottom: 15px;
}

.genetics-section h2::after {
    background-color: var(--color-primary-pink); /* Línea rosa */
}

.genetics-section p {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 25px;
    text-align: center;
}

/* Las reglas CSS para .icon-grid e .icon-item fueron eliminadas o comentadas. */

/* Sección "¿Por qué asociarte?" */
.single-benefit-block {
    /* ... otras propiedades existentes ... */
    background-color: rgba(255, 255, 255, 0.25); /* Fondo semitransparente blanco */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    margin: 40px auto;
    max-width: 1200px;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Ajustado para que el borde sea también semitransparente */
    color: var(--color-text-light); /* El texto seguirá siendo blanco para un buen contraste */
}
.why-associate-section {
 background-color: var(--color-secondary-blue-grey); /* Usa el nuevo verde más vivo */
 color: var(--color-text-light); /* Texto blanco para mejor contraste con este tono */
 padding: 60px 0;
}

.why-associate-section h2 {
 color: var(--color-text-light); /* Título blanco para contraste */
 text-align: center; /* Asegura que el título esté centrado */
}

.why-associate-section h2::after {
 background-color: var(--color-accent-pink); /* Rosa acento */
 left: 50%;
 transform: translateX(-50%);
}

.benefit-grid-container {
 display: flex; /* Usamos Flexbox para alinear los contenedores izquierda y derecha */
 justify-content: space-between; /* Espacio entre los contenedores */
 max-width: 1200px;
 margin: 40px auto;
 padding: 0 20px;
}

.benefit-grid-left,
.benefit-grid-right {
 width: 48%; /* Ocupan casi la mitad del ancho, dejando espacio para el gap */
 display: grid; /* Usamos Grid dentro de cada contenedor */
 grid-template-columns: 1fr; /* Una sola columna por defecto, se ajustará en media queries */
 gap: 20px; /* Espacio entre los bloques dentro de cada contenedor */
}

.benefit-item {
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* --- CAMBIOS AQUÍ: Elimina estilos de fondo, sombra y borde individuales --- */
    background-color: transparent; /* No tiene fondo propio, usa el del padre */
    padding: 30px; /* Mantén el padding interno para la separación del contenido */
    border-radius: 15px; /* Mantenemos el border-radius por si en el futuro quieres añadir un borde transparente, etc. */
    box-shadow: none; /* Sin sombra individual */
    color: var(--color-text-light); /* Mantener el texto blanco para contraste con el fondo verde */
    text-align: center;
    border: none; /* Sin borde individual */
    height: auto;
}

.benefit-item i {
 margin-bottom: 20px;
 font-size: 2.5rem;
 color: var(--color-primary-light-pink);
}

.benefit-item p {
 margin-bottom: 0; /* Elimina el margen inferior del párrafo */
}

/* Media query para pantallas más pequeñas (ej. tablets) */
@media (max-width: 992px) {
 .benefit-grid-container {
  flex-direction: column; /* Apila los contenedores en pantallas más pequeñas */
  align-items: center; /* Centra los contenedores */
 }

 .benefit-grid-left,
 .benefit-grid-right {
  width: 90%; /* Ocupan más ancho */
 }
}

/* Media query para móviles */
@media (max-width: 600px) {
 .benefit-grid-left,
 .benefit-grid-right {
  grid-template-columns: 1fr; /* Una sola columna en móviles */
 }

 .benefit-item {
  font-size: 1.1rem;
  padding: 20px;
  flex-direction: row; /* Vuelve a la disposición horizontal */
  text-align: left;
 }

 .benefit-item i {
  margin-right: 15px;
  margin-bottom: 0;
  font-size: 2rem;
 }
}

/* Sección "Membresías" */
.memberships-section {
    background-color: var(--color-dark-blue); /* Fondo azul fuerte #3043cf */
    color: var(--color-text-light); /* Texto blanco */
    padding: 60px 0; /* Añadimos padding para darle espacio */
}

.memberships-section h2 {
    color: var(--color-text-light);
}

.memberships-section h2::after {
    background-color: var(--color-primary-light-pink); /* Rosa claro para la línea */
}

.membership-cards {
    display: flex;
    justify-content: center;
    /* Eliminamos flex-wrap para forzar una sola fila en escritorio */
    gap: 20px; /* Reducimos el espacio entre tarjetas si es necesario */
    margin-top: 50px;
}

.membership-cards .card {
    background-color: rgba(255, 255, 255, 0.1); /* Bloques translúcidos */
    border-radius: 15px;
    padding: 25px 20px; /* Reducimos el padding para hacerlas más finas */
    width: 280px; /* Ancho fijo para hacerlas más finas */
    height: 180px; /* Altura fija para hacerlas más alargadas horizontalmente */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centramos el contenido verticalmente */
    align-items: center; /* Centramos el contenido horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
    min-height: unset; /* Eliminamos la altura mínima anterior */
}

.membership-cards .card:hover {
    transform: translateY(-10px);
    background-color: rgba(255, 255, 255, 0.15);
}

.card-icon {
    font-size: 3rem; /* Ajusta el tamaño del ícono */
    color: var(--color-primary-light-pink);
    margin-bottom: 10px; /* Reducimos el margen inferior del ícono */
}

.card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; /* Ajusta el tamaño del título */
    margin-bottom: 15px; /* Reducimos el margen inferior del título */
    color: var(--color-text-light);
    flex-grow: 0; /* Para que no empuje el botón */
}

/* Ocultamos este contenedor que ya no es necesario con el nuevo diseño de tarjeta */
.membership-icons-container {
    display: none;
}

.btn-asociarme-card {
    display: inline-block;
    padding: 10px 20px; /* Ajustamos el padding del botón */
    background-color: var(--color-primary-light-pink);
    color: var(--color-dark-blue);
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem; /* Ajustamos el tamaño de fuente del botón */
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: auto; /* Empuja el botón hacia abajo si el contenido varía */
}

/* Footer */
.footer {
    background-color: rgba(255, 255, 255, 0.8); /* Mismo estilo que el header */
    backdrop-filter: blur(5px);
    color: var(--color-dark-blue); /* Texto azul oscuro (el nuevo azul) en el footer */
    padding: 40px 0;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.footer-contact p {
    margin-bottom: 5px;
    font-size: 0.95rem;
}

.footer-contact a {
    color: var(--color-primary-dark-blue); /* Usa el nuevo verde suave */
    transition: color 0.3s ease;
}

.footer-contact a:hover {
    color: var(--color-primary-pink); /* Nuevo rosa principal */
}

.footer-social {
    margin-top: 15px;
}

.footer-social a {
    font-size: 1.8rem;
    margin: 0 10px;
    color: var(--color-dark-blue); /* Íconos sociales oscuros (el nuevo azul) */
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    color: var(--color-primary-dark-blue); /* Usa el nuevo verde suave */
    transform: translateY(-3px);
}

.footer-phrase {
    margin-top: 20px;
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.8;
}

/* Animaciones de Scroll (Fade-in) */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-50 { transition-delay: 0.05s; }
.delay-100 { transition-delay: 0.1s; }
.delay-150 { transition-delay: 0.15s; }
.delay-200 { transition-delay: 0.2s; }
.delay-400 { transition-delay: 0.4s; }
.delay-600 { transition-delay: 0.6s; }


/* Modal de Login */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Permanece en su lugar incluso si se desplaza la página */
    z-index: 1001; /* Z-index alto para que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Alto completo */
    overflow: auto; /* Habilitar desplazamiento si el contenido es demasiado grande */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente oscuro */
    display: flex; /* Usamos flexbox para centrar el contenido */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Para la animación de aparición */
    transition: opacity 0.3s ease-in-out;
}

.modal.active {
    opacity: 1;
}

.modal-content {
    background-color: var(--color-neutral-light); /* Fondo claro del modal */
    margin: auto; /* Centra el modal */
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 450px; /* Ancho máximo para el modal */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
    transform: translateY(-50px); /* Para la animación de aparición */
    transition: transform 0.3s ease-in-out;
    color: var(--color-text-dark); /* Texto oscuro dentro del modal */
}

.modal.active .modal-content {
    transform: translateY(0);
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--color-text-dark);
    text-decoration: none;
    cursor: pointer;
}

.modal-content h2 {
    color: var(--color-primary-dark-blue); /* Título del modal con verde suave */
    margin-bottom: 25px;
    font-size: 2.2em;
}

.modal-content .form-group {
    text-align: left; /* Alinea los labels a la izquierda dentro del modal */
    margin-bottom: 20px;
}

.modal-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #444;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.modal-content .form-group input[type="text"],
.modal-content .form-group input[type="password"] {
    width: calc(100% - 22px); /* Ajuste para padding y borde */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    color: var(--color-text-dark);
    background-color: var(--color-neutral-light);
}

.modal-content .btn-asociarme {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    margin-top: 10px;
}

/* ========================================= */
/* ESTILOS DE LA PÁGINA "ASOCIARSE" */
/* ========================================= */
.asociarse-main-content {
    padding-top: 100px; /* Espacio para el header fijo */
    min-height: calc(100vh - 120px); /* Asegura que el contenido ocupe la altura adecuada */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea el contenido hacia arriba */
    align-items: center;
    background-color: transparent; /* Permite que el body::before de fondo.png sea visible */
    color: var(--color-text-dark);
}

.association-form-section {
    background-color: rgba(255, 255, 255, 0.95); /* Fondo casi blanco semi-transparente para el bloque del formulario */
    padding: 40px; /* Espacio interno del "cuaderno" */
    margin: 40px auto; /* Margen superior e inferior para centrar verticalmente y separar del header/footer */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Sombra para dar volumen */
    max-width: 1000px; /* Ancho máximo para el formulario */
    text-align: center; /* Centra el título */
    width: 90%; /* Ancho responsivo */
}

.association-form-section h2 {
    color: var(--color-primary-dark-blue);
    margin-bottom: 30px;
    font-size: 2.5em;
}

.association-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
    gap: 40px; /* Espacio entre las columnas */
    justify-content: center; /* Centra el contenido */
    width: 100%;
}

.association-form-container,
.association-info-container {
    flex: 1; /* Ambas columnas intentan ocupar el mismo espacio */
    min-width: 300px; /* Ancho mínimo para cada columna antes de apilarse */
}

.association-form-container {
    text-align: left; /* Alinea el texto del formulario a la izquierda */
}

.association-info-container {
    text-align: center; /* Centra el texto y el logo en la columna de la derecha */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
    align-items: center;
    padding-left: 20px; /* Espacio a la izquierda para separar visualmente */
    border-left: 1px solid #eee; /* Línea divisoria suave */
}

.association-info-container p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
    color: #444;
    margin-bottom: 30px;
    max-width: 450px; /* Limita el ancho del párrafo para mejor lectura */
}

.association-form .form-group {
    margin-bottom: 20px;
}

.association-form label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #555;
}

.association-form input[type="text"],
.association-form input[type="tel"],
.association-form input[type="email"], /* Añadido estilo para input de email */
.association-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    color: var(--color-text-dark);
    background-color: var(--color-neutral-light);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.association-form input:focus,
.association-form textarea:focus {
    border-color: var(--color-primary-dark-blue);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 8px rgba(159,198,171,0.6);
    outline: none;
}

.association-form textarea {
    resize: vertical;
    min-height: 120px;
}

.association-form .btn-asociarme {
    width: 220px; /* Ajuste de ancho para el texto "Enviar Solicitud" */
    display: block; /* Para que margin: auto funcione */
    margin: 30px auto 0 auto; /* Centra el botón horizontalmente y añade margen superior */
}

/* Animación del logo en página asociarse */
.rotating-logo-form {
    width: 200px; /* Tamaño del logo */
    height: 200px;
    animation: spin 8s linear infinite; /* 8 segundos por giro completo */
}

.rotating-logo-form img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

                                                                                                                                                            /* ========================================= */
/* MOBILE RESPONSIVENESS (Media Queries) */
/* ========================================= */
@media (max-width: 992px) {
    /* Header (Menú Hamburguesa) */
    .header {
        padding: 15px 20px; /* Ajusta el padding del header */
        justify-content: space-between; /* Distribuye logo a la izquierda y toggle a la derecha */
    }

    .header-right {
        display: none; /* Oculta el menú de navegación en pantallas pequeñas */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Ajusta según la altura de tu header */
        right: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95); /* Fondo semitransparente para el menú desplegable */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 20px 0;
        text-align: center;
        z-index: 1000;
        transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Suaviza la aparición/desaparición */
        transform: translateY(-100%); /* Oculto inicialmente arriba */
        opacity: 0;
        pointer-events: none; /* Para que no bloquee clics cuando está oculto */
    }

    .header-right.active {
        display: flex; /* Muestra el menú cuando está activo */
        transform: translateY(0); /* Desliza el menú hacia abajo */
        opacity: 1;
        pointer-events: auto; /* Permite clics cuando está visible */
    }

    .header-right ul {
        flex-direction: column;
        width: 100%;
        padding: 0; /* Elimina padding por defecto de la lista */
        margin: 0; /* Elimina margen por defecto de la lista */
    }

    .header-right ul li {
        margin: 10px 0;
    }

    .header-right ul li a {
        padding: 10px 20px;
        display: block;
        color: var(--color-primary-dark-blue); /* Color de los enlaces en el menú hamburguesa */
        font-size: 1.1em;
        text-decoration: none;
    }

    .header-right ul li a:hover {
        background-color: var(--color-neutral-light);
    }

    .menu-toggle {
        display: block; /* Muestra el icono de hamburguesa */
    }

    .header-left .main-logo-left {
        height: 50px; /* Ajusta el tamaño del logo */
    }


    /* AJUSTES PARA LA SECCIÓN HERO EN MÓVILES (992px y menos) */
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding-top: 70px; /* Ajusta el espacio para el header más pequeño */
        padding-bottom: 40px;
    }

    .hero-content {
        flex-direction: column; /* Apila el texto y el video */
        padding: 0 20px;
    }

    .hero-text-container {
        max-width: 100%; /* El texto ocupa todo el ancho */
        align-items: center; /* Centra el texto */
        text-align: center; /* Centra el texto */
        margin-right: 0; /* Elimina el margen negativo */
        padding-left: 0;
        order: 2; /* Cambia el orden para que el texto aparezca después del video */
        margin-top: 30px; /* Espacio entre el video y el texto */
    }

    .hero-text-line {
        font-size: 1.2rem; /* Reduce el tamaño de fuente en móviles */
        margin-bottom: 10px;
    }

    .btn-asociarme {
        font-size: 1rem;
        padding: 12px 30px;
        margin-top: 25px;
    }

    .hero-video-container {
        max-width: 90%; /* Ajusta el ancho del video */
        order: 1; /* El video aparece primero */
    }

    .video-control-btn {
        top: 5px;
        left: 5px;
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }

    /* Secciones Generales para móvil */
    .section {
        padding: 60px 0;
    }

    .section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .section h2::after {
        width: 60px;
        height: 3px;
    }

    /* Sección CANNAMAXIA y Genética para móvil */
    .cannamaxia-section p,
    .genetics-section p {
        font-size: 1em;
        padding: 0 15px;
        text-align: center; /* Centra el texto para móviles */
    }

    .cannamaxia-about-section,
    .genetics-section {
        margin: 20px auto;
        padding: 30px;
        border-radius: 10px;
        max-width: 95%;
    }

    /* Sección "¿Por qué asociarte?" para móvil */
    .why-associate-section {
        padding: 40px 0;
    }

    .benefit-list {
        gap: 15px;
        margin-top: 30px;
    }

    .benefit-list li {
        font-size: 1em;
        padding: 12px 20px;
        width: 90%; /* Ocupa más ancho en móvil */
        text-align: left;
    }

    .benefit-list li i {
        font-size: 1.3rem;
        margin-right: 10px;
    }

    /* Sección Membresías para móvil */
    .membership-cards {
        flex-direction: column; /* Apila las tarjetas */
        align-items: center; /* Centra las tarjetas */
        gap: 20px;
        margin-top: 30px;
    }

    .membership-cards .card {
        width: 90%; /* Ocupa más ancho en móvil */
        padding: 30px 20px;
        min-height: auto; /* Permite que la altura se ajuste al contenido */
    }

    .card-icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .card h3 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .btn-asociarme-card {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    /* Footer para móvil */
    .footer-content {
        padding: 20px;
    }

    .footer-contact p,
    .footer-phrase p {
        font-size: 0.85rem;
    }

    .footer-social a {
        font-size: 1.5rem;
        margin: 0 8px;
    }

    /* Ajustes para la página de asociarse en móvil */
    .association-form-section {
        padding: 30px;
        margin: 20px auto;
        max-width: 95%;
    }

    .association-form-section h2 {
        font-size: 2rem;
        margin-bottom: 25px;
    }

    .association-content-wrapper {
        flex-direction: column; /* Apila las columnas del formulario y la info */
        gap: 30px;
    }

    .association-info-container {
        padding-left: 0; /* Elimina el padding-left */
        border-left: none; /* Elimina la línea divisoria vertical */
        border-top: 1px solid #eee; /* Añade una línea divisoria horizontal */
        padding-top: 30px; /* Espacio superior para la línea divisoria */
    }

    .association-info-container p {
        font-size: 1em;
        margin-bottom: 20px;
    }

    .rotating-logo-form {
        width: 150px; /* Reduce el tamaño del logo giratorio en móvil */
        height: 150px;
    }

    .association-form .btn-asociarme {
        width: 100%; /* El botón ocupa todo el ancho disponible */
        font-size: 1em;
        padding: 12px;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas (ej. iPhone 5/SE) */
@media (max-width: 480px) {
    .header {
        padding: 10px 15px;
    }

    .header-left .main-logo-left {
        height: 40px;
    }

    .menu-toggle {
        font-size: 1.5em;
    }

    .header-right ul li a {
        font-size: 1em;
    }

    .hero-text-line {
        font-size: 1.1rem;
    }

    .btn-asociarme {
        font-size: 0.9rem;
        padding: 10px 25px;
    }

    .section h2 {
        font-size: 1.8rem;
    }

    .benefit-list li {
        font-size: 0.95em;
        padding: 10px 15px;
    }

    .benefit-list li i {
        font-size: 1.2rem;
    }

    .membership-cards .card {
        padding: 25px 15px;
    }

    .card h3 {
        font-size: 1.3rem;
    }

    .btn-asociarme-card {
        font-size: 0.85em;
        padding: 8px 18px;
    }

    .association-form-section {
        padding: 20px;
    }

    .association-form-section h2 {
        font-size: 1.8rem;
    }

    .association-info-container p {
        font-size: 0.95em;
    }
}                                                                                                                                                                                /* ========================================= */
/* ESTILOS DE LA PÁGINA "CONTACTO" */
/* ========================================= */
.contact-main-content {
    padding-top: 100px; /* Espacio para el header fijo */
    min-height: calc(100vh - 120px); /* Asegura que el contenido ocupe la altura adecuada */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent; /* Permite que el body::before de fondo.png sea visible */
    color: var(--color-text-dark);
}

.contact-section {
    background-color: rgba(255, 255, 255, 0.95); /* Fondo casi blanco semi-transparente para el bloque del formulario */
    padding: 40px; /* Espacio interno del "cuaderno" */
    margin: 40px auto; /* Margen superior e inferior para centrar verticalmente y separar del header/footer */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Sombra para dar volumen */
    max-width: 1000px; /* Ancho máximo para el contenedor de contacto */
    text-align: center; /* Centra el título */
    width: 90%; /* Ancho responsivo */
}

.contact-section h2 {
    color: var(--color-primary-dark-blue);
    margin-bottom: 30px;
    font-size: 2.5em;
}

.contact-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
    gap: 40px; /* Espacio entre las columnas */
    justify-content: center; /* Centra el contenido */
    width: 100%;
}

.contact-form-container,
.contact-info-container {
    flex: 1; /* Ambas columnas intentan ocupar el mismo espacio */
    min-width: 300px; /* Ancho mínimo para cada columna antes de apilarse */
}

.contact-form-container {
    text-align: left; /* Alinea el texto del formulario a la izquierda */
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #555;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    color: var(--color-text-dark);
    background-color: var(--color-neutral-light);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-primary-dark-blue);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 8px rgba(159,198,171,0.6);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn-asociarme { /* Reutilizamos el estilo del botón asociarme */
    width: 220px; /* Ajuste de ancho para el texto "Enviar Mensaje" */
    display: block;
    margin: 30px auto 0 auto;
}

.contact-info-container {
    text-align: center; /* Centra el texto y los íconos en la columna de la derecha */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 20px; /* Espacio a la izquierda para separar visualmente */
    border-left: 1px solid #eee; /* Línea divisoria suave */
}

.contact-info-container h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.8em;
    color: var(--color-primary-dark-blue);
    margin-bottom: 25px;
}

.contact-info-container p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px; /* Espacio entre párrafos de info */
    max-width: 450px;
}

.contact-info-container a {
    color: var(--color-primary-dark-blue); /* Color para los enlaces de texto */
    transition: color 0.3s ease;
}

.contact-info-container a:hover {
    color: var(--color-primary-pink);
}


.contact-social {
    margin-top: 30px;
}

.contact-social a {
    font-size: 2.2rem; /* Íconos sociales más grandes en esta sección */
    margin: 0 15px;
    color: var(--color-secondary-blue-grey); /* Usamos el verde más vivo para los íconos aquí */
    transition: color 0.3s ease, transform 0.3s ease;
}

.contact-social a:hover {
    color: var(--color-accent-pink); /* Rosa acento en hover */
    transform: translateY(-5px);
}

/* RESPONSIVENESS PARA LA PÁGINA DE CONTACTO */
@media (max-width: 992px) {
    .contact-main-content {
        padding-top: 80px; /* Ajuste para el header móvil */
    }

    .contact-section {
        padding: 30px 20px;
        margin: 20px auto;
    }

    .contact-section h2 {
        font-size: 2em;
    }

    .contact-content-wrapper {
        flex-direction: column; /* Apila las columnas del formulario y la info */
        gap: 30px;
    }

    .contact-info-container {
        border-left: none; /* Elimina la línea divisoria vertical */
        padding-left: 0;
        border-top: 1px solid #eee; /* Añade una línea divisoria horizontal */
        padding-top: 30px;
        margin-top: 30px;
    }

    .contact-info-container h3 {
        font-size: 1.6em;
    }

    .contact-info-container p {
        font-size: 1em;
        padding: 0 10px;
    }

    .contact-social a {
        font-size: 1.8rem; /* Ajusta el tamaño de los íconos sociales en móvil */
        margin: 0 10px;
    }

    .contact-form .btn-asociarme {
        width: 100%; /* Botón al 100% de ancho en móvil */
        max-width: 280px; /* Un máximo para que no sea demasiado grande en tabletas */
    }
}

/* ========================================= */
/* ESTILOS DE LA PÁGINA "MEMBRESIAS" */
/* ========================================= */
.memberships-main-content {
    padding-top: 100px;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    color: var(--color-text-dark);
}

.memberships-page-section {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 40px;
    margin: 40px auto;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    max-width: 1000px; /* Reducimos el ancho máximo del contenedor de la sección */
    text-align: center;
    width: 90%;
}

.memberships-page-section h2 {
    color: var(--color-primary-dark-blue);
    margin-bottom: 20px; /* Reducimos el margen inferior del título */
}

.memberships-page-section h2::after {
    background-color: var(--color-primary-pink);
}

.memberships-grid {
    display: grid; /* Cambiamos a Grid */
    grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual ancho */
    gap: 10px; /* Espacio entre las tarjetas */
    justify-items: center; /* Centra las tarjetas dentro de sus celdas de grid */
    align-items: start; /* Alinea las tarjetas desde arriba */
}

.membership-card {
    background-color: var(--color-primary-dark-blue);
    color: var(--color-text-light);
    padding: 25px; /* Ajustamos el padding */
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    width: 100%; /* Ocupa el 100% del espacio de su columna */
    max-width: 300px; /* Ancho máximo para cada tarjeta, ajusta si es necesario */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinea el contenido hacia arriba */
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 350px; /* Altura mínima para que sean alargadas, ajusta este valor */
}

.membership-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.membership-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em; /* Ajustamos el tamaño del título */
    margin-bottom: 15px;
    color: var(--color-primary-light-pink);
}

.membership-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    margin-bottom: 25px; /* Espacio debajo del párrafo */
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
    display: center; 
    align-items: center; /* Centra verticalmente el texto dentro del párrafo si hay espacio extra */
    justify-content: center; /* Centra horizontalmente el texto */
    text-align: center; /* Asegura que el texto en sí esté centrado */
}

.btn-choose {
    display: inline-block;
    padding: 12px 30px; /* Ajustamos el padding del botón */
    background-color: var(--color-accent-pink);
    color: var(--color-text-light);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1rem; /* Ajustamos el tamaño de fuente del botón */
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    margin-top: auto; /* Empuja el botón hacia abajo */
}

.btn-choose:hover {
    background-color: var(--color-primary-light-pink);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    color: var(--color-dark-blue);
}

/* Responsive para la página de Membresías */
@media (max-width: 992px) {
    .memberships-grid {
        grid-template-columns: 1fr; /* Apila las tarjetas en pantallas más pequeñas */
    }

    .membership-card {
        max-width: 350px; /* Ancho máximo para que no sean demasiado anchas al apilarse */
        min-height: 320px; /* Ajustamos la altura mínima para móviles */
    }
}  
                                                                                                                                                  /* Animación para logos giratorios */
.rotating-logo {
    animation: rotateRight 10s linear infinite; /
}

@keyframes rotateRight {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}   
                                                                                                                                                   /* --- Estilos para mensajes de formulario --- */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-message.show {
    opacity: 1;
    transform: translateY(0);
}

.form-message.success {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde oscuro */
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24; /* Rojo oscuro */
    border: 1px solid #f5c6cb;
}

/* Estilos para el Modal de Verificación de Edad (Adaptado al estilo de Login) */
.age-modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000; /* Asegura que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); /* Fondo oscuro semitransparente, similar al modal de login */
    justify-content: center; /* Centrado horizontal con flexbox */
    align-items: center; /* Centrado vertical con flexbox */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.age-modal.active {
    display: flex; /* Mostrar cuando esté activo */
    opacity: 1;
}

.age-modal-content {
    background-color: var(--color-dark-blue); /* Fondo azul oscuro, igual al modal de login */
    margin: 15% auto; /* Ajusta la posición vertical inicial */
    padding: 20px;
    border: 1px solid var(--color-primary-light-green); /* Borde verde claro */
    width: 80%;
    max-width: 400px; /* Ancho máximo similar al modal de login */
    text-align: center;
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    color: white;
    transform: translateY(-50px); /* Empieza un poco arriba */
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.age-modal.active .age-modal-content {
    transform: translateY(0);
    opacity: 1;
}

.age-modal-content h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary-light-green); /* Título en verde claro */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
    font-weight: 500; /* Similar al estilo del título del login */
}

.age-modal-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    color: #f0f0f0; /* Color de texto similar */
    margin-bottom: 20px;
    line-height: 1.5;
}

.age-modal-buttons {
    display: flex;
    justify-content: space-around; /* Espacio entre botones */
    gap: 10px;
    margin-top: 20px;
}

.age-btn {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 400;
    text-align: center;
    min-width: 100px; /* Asegura un tamaño mínimo para los botones */
}

.confirm-btn {
    background-color: var(--color-primary-light-green); /* Verde claro */
    color: var(--color-dark-blue); /* Texto azul oscuro */
}

.confirm-btn:hover {
    background-color: #6edc9b; /* Verde ligeramente más claro al pasar el ratón */
    color: var(--color-dark-blue);
}

.exit-btn {
    background-color: transparent;
    color: #77ca92; /* Verde más vivo  */
    border: 1px solid #77ca92;
}

.exit-btn:hover {
    background-color: #77ca92;
    color: white;
}

/* Media Queries para responsividad (ajustados) */
@media (max-width: 600px) {
    .age-modal-content {
        margin: 30% auto;
        padding: 15px;
        max-width: 90%;
    }
    .age-modal-content h2 {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
    .age-modal-content p {
        font-size: 0.9em;
        margin-bottom: 15px;
    }
    .age-modal-buttons {
        flex-direction: column; /* Apila los botones en pantallas más pequeñas */
        gap: 10px;
        margin-top: 15px;
    }
    .age-btn {
        width: 100%;
        font-size: 0.9em;
        padding: 8px 15px;
    }
}                                                                                                                                     /* Estilos para pantallas más pequeñas (teléfonos móviles) */
@media screen and (max-width: 768px) {
  /* Reajuste de márgenes y tamaños de fuente para que los formularios se vean bien */
  .form-container {
    padding: 10px;
    margin: 0;
  }
  .form-input {
    width: 90% !important; /* Asegura que el ancho se ajuste al 90% del contenedor */
  box-sizing: border-box; /* Incluye el padding y el border en el cálculo del ancho */
}

  /* Ajusta el video para que no se reproduzca más rápido de lo normal y se adapte al ancho del dispositivo */
  .video-background {
    width: 100%;
    height: auto;
  }

  /* Asegúrate de que el menú hamburguesa se muestre correctamente */
  .hamburger-menu {
    display: block; /* Muestra el menú hamburguesa */
  }

  /* Oculta los enlaces del menú regular en pantallas pequeñas */
  .nav-links {
    display: none;
  }
}
.form-container-mobile {
  display: block;
  width: 100%;
}

.form-container-mobile .form-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}