/* ============================================
                     GENERAL
   ============================================ */
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #FFFFFF;
    color: #FFFFFF !important;
}

h1, h2, h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: 35px;
	color: #555555;
}
/* Hero con Video de Fondo */

.hero {
    position: relative;
    height: 100dvh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-video {
	width: 100%;
    height: 100%;
    object-fit: cover; /* Cambia a 'contain' solo para probar, pero 'cover' es el correcto si ajustamos el contenedor */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* VIDEO Escritorio */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

/* VIDEO Móvil */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { 
        display: block !important;
        object-fit: cover;
	}	
	.hero {
        height: 100dvh; /* Altura dinámica para evitar que la barra de Safari lo tape */
    }

    .hero-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
        /* Si quieres ver las líneas de colores para calibrar, cambia temporalmente 
           'cover' por 'contain' y verás el video completo con barras negras laterales. */
    }
}

.hero-overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.4); /* Capa oscura para legibilidad */
    width: 100%;
    height: 100%;
}

.hero-content {
	text-align: center;
	z-index: 1;
	transition: opacity 0.1s linear; 
    will-change: opacity;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Aquí está la magia: distribuye espacio igual arriba, en medio y abajo */
    align-items: center;
    height: 50vh; /* O el alto que tenga tu video, por ejemplo 100vh */
    padding: 0; /* Quitamos paddings que puedan estirar el video */
    box-sizing: border-box;
}

.hero-content h1 {
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	color: #FFFFFF;
	margin-bottom: 0px;
}

/* Contenedor del premio */

.award-hero {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0.8; /* Transparencia sutil para que se integre al video */
    transition: all 0.8s ease; /* Transición suave para el scroll */
}

/* El icono SVG */
.award-icon {
    width: 150px; /* Ajusta según el diseño del laurel */
    height: auto;
    filter: brightness(0) invert(1); /* Lo fuerza a blanco puro si el SVG es negro */
	margin-bottom: 0px;
}

/* Lógica para que desaparezca al hacer scroll */
/* Si tu header ya activa la clase .scrolled, usamos esa señal */
.main-header.scrolled ~ .hero .award-hero {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}


/* ============================================
                      HEADER
   ============================================ */

.main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 9999;
    padding: 30px 0 20px 0; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.4s ease !important;
}
.brand {
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
}

@font-face {
    font-family: 'TheSeasonsCustom';
    src: url('assets/fonts/FSPDEMOTheSeasons.ttf') format('truetype');
}
.brand a {
    font-family: 'TheSeasonsCustom', serif !important;
    font-size: 25px;
    text-transform: uppercase;
    text-decoration: none;
   	letter-spacing: 0em; 
    text-indent: 0.15em; 
    display: inline-block;
    transition: color 0.3s ease;
}

.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px;
    width: 100%;
}

.nav-link, .lang, .divider {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 10px;
    text-transform: uppercase;
    text-decoration: none;
}

/* --- COLORES PARA INDEX (Header Transparente) --- */
.header-transparent .brand a,
.header-transparent .nav-link,
.header-transparent .lang,
.header-transparent .divider {
    color: #ffffff !important;
}

/* --- COLORES PARA PÁGINAS INTERNAS (Header Blanco) --- */
.header-solid {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f2f2f2;
}

.header-solid .brand a,
.header-solid .nav-link,
.header-solid .lang,
.header-solid .divider {
    color: #000000 !important; /* Letras negras sobre fondo blanco */
}

/* --- ESTADO AL HACER SCROLL (En el Index) --- */
.main-header.scrolled {
    background-color: #ffffff !important; /* Se vuelve blanco al bajar */
    padding: 20px 0 15px 0;
}


.main-header.scrolled .brand a,
.main-header.scrolled .nav-link,
.main-header.scrolled .lang,
.main-header.scrolled .divider {
    color: #000000 !important; /* Letras negras sobre fondo blanco */
}




/* MENU HAMBURGUESA (MOBILE) */



@media (max-width: 768px) {
    /* El Contenedor del Botón */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px; /* Altura fija para que el espacio sea constante */
        position: absolute;
        right: 25px;
        top: 35px;
        cursor: pointer;
        z-index: 10001; /* Por encima de la nav-menu */
		
		
    }

    /* Las 3 rayitas (el relleno) */
    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: #ffffff; /* Color inicial (sobre el video) */
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
    }

    /* Color negro cuando el header es blanco (scrolled) */
    .main-header.scrolled .hamburger span,
    .header-solid .hamburger span {
        background-color: #000000;
    }

    /* --- ANIMACIÓN A "X" --- */
    /* Cuando el menú está abierto, las rayas deben ser negras para verse sobre el fondo blanco del menú */
    .hamburger.active span {
        background-color: #000000 !important; 
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }

    /* Ajuste del menú desplegable */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 35px !important;
        transition: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        z-index: 10000;
    }

    .nav-menu.active {
        right: 0;
    }

/* Forzar que los textos sean negros cuando el menú móvil está abierto */
    .nav-menu.active .nav-link, 
    .nav-menu.active .lang, 
    .nav-menu.active .divider {
        color: #000000 !important;
        opacity: 1; /* Para que se vean nítidos */
    }

    /* Opcional: Un pequeño borde o sombra suave para separar el selector de idioma */
    .nav-menu.active .lang-selector {
        border-top: 1px solid #eeeeee;
        padding-top: 20px;
        width: 50%;
        justify-content: center;
    }
/* 1. La Hamburguesa: Si el menú está abierto, SIEMPRE negra */
    .hamburger.active span {
        background-color: #000000 !important;
    }

    /* 2. El Brand (PANORÁMICA): Si el menú está abierto o el header es sólido, negro */
    .main-header.scrolled .brand a,
    .header-solid .brand a,
    .hamburger.active + .brand a, /* Esto es por si el menú se abre */
    .nav-menu.active ~ .brand a { 
        color: #000000 !important;
    }

    /* 3. Los Enlaces: Si el menú está activo, SIEMPRE negros */
    .nav-menu.active .nav-link,
    .nav-menu.active .lang,
    .nav-menu.active .divider {
        color: #000000 !important;
        opacity: 1 !important;
    }

    /* 4. IMPORTANTE: Si estás en una página interna (header-solid) 
       y el menú NO está abierto, la hamburguesa debe ser negra desde el inicio */
    .header-solid .hamburger span {
        background-color: #000000 !important;
    }
}

/* ============================================
              CONTROL DEL LOGO HERO
   ============================================ */

.hero-logo {
    width: 100%;           /* Que intente ocupar su espacio */
    max-width: 400px;      /* Pero que nunca supere los 500px en PC */
    height: auto;          /* Mantiene la proporción */
    display: block;        /* Lo trata como un bloque sólido */
    margin: 0 auto 20px;   /* Centrado horizontal y aire abajo */
    z-index: 10;           /* Asegura que esté por encima de la capa oscura */
	
}

@media (max-width: 768px) {
    .hero-logo {
        max-width: 80%;    /* En móvil, que use máximo el 80% del ancho del cel */
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-direction: column; /* Alinea logo y menú uno sobre otro */
        padding: 15px 10px;
        gap: 10px; /* Da espacio entre el logo y los links */
    }

    .nav-menu {
        width: 100%;
        justify-content: center; /* Centra los enlaces */
        gap: 15px; /* Espacio cómodo entre NOSOTROS, CONTACTO y ES|EN */
        flex-wrap: wrap; /* Si no caben, bajan a la siguiente línea sin romperse */
    }

    .nav-link {
        font-size: 0.8rem; /* Links más pequeños y delicados */
        letter-spacing: 2px;
    }
}



/* ============================================
                      WORKBLOCK
   ============================================ */

.featured-stories {
    background-color: #ffffff;
    padding: 30px 0; /* Más aire arriba y abajo */
    display: flex;
    flex-direction: column;
    gap: 150px; 
}

.work-block {
    max-width: 1200px;
    margin: 0 auto;
    width: 90%;
    /* ESTO ES LO QUE HACE LA MAGIA EN LAPTOP */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Texto más angosto, fotos más anchas */
    gap: 30px;
    align-items: center; /* Centra el texto verticalmente respecto a las fotos */
}
.block-text {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrado vertical respecto a la fila */
    align-items: center;     /* Centra título y párrafo en el eje azul */
    text-align: center;      /* Alinea el h2 al centro */
    width: 100%;
}

.block-text h2 {
    font-family: 'Cormorant Garamond', serif; !important
    font-size: 30px;
    letter-spacing: 2px;
    margin-bottom: 30px;
    color: #0a0a0a;
    text-align: center;      /* Asegura el centro para el título */
}

.block-text p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    max-width: 880px;        /* Mantiene el ancho elegante de lectura */
    text-align: justify;     /* El bloque es recto a los lados, pero centrado en la columna */
    margin: 0 auto;          /* Centra el bloque del párrafo horizontalmente */
	padding-top: 0px;
}


/* Galería de 3 fotos inferiores*/


.block-gallery {
    display: flex;
    flex-direction: column; /* Una debajo de otra como en tu referencia */
    gap: 15px;
    width: 100%;
}

.panoramic-img {
    width: 100%;
    aspect-ratio: 21 / 9; 
    overflow: hidden;
}

.panoramic-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: 0.5s ease;
	
}	

/* Video*/

.video-square {
    width: 100%;
    aspect-ratio: 1 / 1; /* Esto fuerza la forma cuadrada */
    position: relative;
    overflow: hidden;
    background: #000;
	margin-bottom: 50px; /* Espacio con lo que sigue */
}

.video-square iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Usamos min-width/height para asegurar que siempre cubra el área 1:1 */
    min-width: 300%; /* 178% es el ratio aproximado para cubrir 16:9 en 1:1 */
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Evita que el usuario pause el video por error */
}
.square-2 {
    background-image: url('assets/img/vidstill02.jpg');
    background-size: cover;     
    background-position: center;
    background-repeat: no-repeat;
}
.square-3 {
    background-image: url('assets/img/vidstill03.jpg');
    background-size: cover;     
    background-position: center;
    background-repeat: no-repeat;
}
.square-4 {
    background-image: url('assets/img/vidstill04.jpg');
    background-size: cover;     
    background-position: center;
    background-repeat: no-repeat;
}
/* Para que el video nativo en mobile llene el cuadro */
.video-preview-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* El truco del PosterFrame para Desktop (Vimeo) */
/* Aplicamos una imagen de fondo al contenedor de la versión desktop */
.desktop-only {
    background-image: url('assets/img/poster-video-desktop.jpg');
    background-size: cover;
    background-position: center;
    background-color: #000;
}

/* RESPONSIVE (MÓVIL) */

@media (max-width: 768px) {
    .work-block {
        grid-template-columns: 1fr; /* Vuelve a una sola columna */
        gap: 10px;
		text-align: center;
    }

    .block-text p {
        margin: 0 auto; /* Centra el bloque de texto */
        text-align: justify; /* Opcional: texto centrado en móvil se ve más orgánico */
		max-width: 99%;        /* Evita que el texto toque los bordes del celular */
        font-size: 16px;
		margin-bottom: 50px;
    }

    .block-gallery {
        flex-direction: column; /* Mantener fotos una abajo de otra */
		margin-bottom: 50px;
		
    }
	
	.video-square {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        aspect-ratio: 1 / 1;
	
    }
    
    .video-square iframe {
        min-width: 300%; /* Un pelín más de margen en móvil */
    }
}


/* ============================================
                GRID DE PORTAFOLIO
   ============================================ */

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
	opacity: 1;
}
/* --- Ajustes exclusivos para Pantallas Grandes (PC) --- */
@media (min-width: 1024px) {
    .portfolio-grid {
        gap: 80px;          /* Más espacio entre videos para que respire el diseño */
        padding: 50px 0;    /* Más aire arriba y abajo */
    }

    .video-container {
        width: 100%;         /* Aumentamos del 90% al 70% del ancho total (pero de una pantalla mucho más grande) */
        max-width: 1400px;  /* Le damos un techo más alto para que brillen los detalles */
        /*box-shadow: 0 20px 50px rgba(0,0,0,0.8); /* Una sombra más profunda para dar profundidad */
    }
}
/* GRID DE PORTAFOLIO */
.portfolio-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 80px 0; /* Más aire entre el hero y el inicio */
    gap: 5px;      /* Espacio generoso entre cada bloque de video */
    background-color: #FFFFFF; 
    margin: 0;
}

.video-item {
    width: 90%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background: #000;
}

/* Estilos de los nombres debajo del video */
.video-details {
    margin-top: 20px; /* Espacio entre video y texto */
    text-align: center;
	margin-bottom: 20px;
}

.couple-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px !important; /* Un poco más grande para destacar */
    color: #1a1a1a !important; /* Gris casi negro */
    margin: 0 0 8px 0;
    font-weight: 400;
    letter-spacing: 1px;
}

.location {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    color: #888888; /* Gris suave */
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 4;
	margin-bottom: 20px;
}

/* Ajuste para PC */
@media (min-width: 1024px) {
    .video-item {
        max-width: 1200px; /* En pantallas grandes, el video se luce más */
    }
    .couple-name {
        font-size: 28px !important;
    }
}
/* --- CONFIGURACIÓN COMPARTIDA --- */
.profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px; /* Aquí controlas la cercanía general */
    align-items: center;
    margin-bottom: 120px;
}

/* --- BLOQUE ALEJO (Texto a la izquierda, mira a la derecha) --- */
.profile.alejo .profile-info {
    text-align: left;
    padding-right: 20px; /* Se acerca a su foto */
}

/* --- BLOQUE CAMILA (Texto a la derecha, mira a la izquierda) --- */
.profile.camila .profile-info {
    text-align: right;
    padding-left: 20px; /* Se acerca a su foto */
}
.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Empiezan invisibles */
    transition: opacity 1s ease; /* Aparecen con fundido elegante */
}

/* Cuando el script les pone el 'src', se vuelven visibles */
.video-container iframe[src] {
    opacity: 1;
}

/* ============================================
           SOCIAL PROOF / TESTIMONIOS
   ============================================ */

.testimonials {
    background-color: #FFFFFF;
    padding: 80px 20px;
    text-align: center;
}

.testimonials-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.couple-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(100%);
    transition: all 0.6s ease;
    margin-bottom: 25px;
}

/* EFECTO HOVER */
.testimonial-card:hover .couple-img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

/* 1. EL NOMBRE (AHORA ARRIBA) */
.couple-names {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1a1a1a;
    font-weight: 400;
    margin-bottom: 15px; /* Espacio con la cita */
}

/* 2. LA CITA (AHORA ABAJO) */
.quote {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: #666666;
    font-style: italic;
    margin: 0;
    max-width: 280px;
}

/* Ajuste móvil para que las fotos no se vean gigantes */
@media (max-width: 768px) {
    .couple-img {
        width: 160px;
        height: 160px;
    }
    .testimonials-container {
        gap: 40px;
    }
}

.testimonials h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin-bottom: 40px;
    color: #000;
}

/* ============================================
                     FOOTER
   ============================================ */

.main-footer {
    background-color: #000000; /* Fondo negro profundo */
    padding: 60px 20px;
    text-align: center;
}

.social-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre los dos iconos */
    margin-bottom: 30px;
}

.social-icon img {
    width: 30px; /* Tamaño ideal para que no se vean gigantes */
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Si tus SVG son negros, esta línea los vuelve blancos mágicamente: */
    filter: invert(1); 
}

.social-icon:hover img {
    transform: scale(1.1); /* Se agrandan un poquito al pasar el mouse */
    opacity: 0.7;
}

.copyright {
    color: #666;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
/* BOTON WAPP */
/* Estilo del botón de WhatsApp */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000; /* Siempre por encima de todo */
    transition: transform 0.3s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}

.whatsapp-btn img {
    width: 35px;
    height: 35px;
}
.main-footer {
    background-color: #000;
    padding: 60px 20px;
    position: relative; /* Asegura que se comporte como un bloque sólido */
    z-index: 10;
	margin-top: -1px; /* Elimina cualquier línea blanca de error entre secciones */
    clear: both;      /* Asegura que no haya elementos flotando a los lados */
}

/* En móviles lo hacemos un poquito más pequeño para que no tape los videos */
@media (max-width: 480px) {
    .whatsapp-btn {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
}
/* ============================================
               PÁGINA DE CONTACTO
   ============================================ */


.contact-page {
	background-color: #FFFFFF; /*COLOR DE FONDO */
	color: #000000;
	min-height: 100dvh;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
.contact-header h1 { /* BOOK THE DATE */
    color: #000000;   
    font-family: 'Cormorant Garamond', serif;
    font-size: 35px;  
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 10px;
} 
/* Alineación de los grupos (Nombre/Teléfono, etc.) */
.form-group {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
}

/* El Wrapper: acomoda el label arriba del input */
.input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.input-wrapper label, .form-group-full label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #000000; /* Gris elegante */
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Diseño de los inputs (solo la línea inferior) */
.contact-page input:not([type="checkbox"]):not([type="radio"]), 
.contact-page textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #555555 !important;
    color: #555555 #000000;
    padding: 10px 0 !important;
    font-size: 14px;
    outline: none;
    border-radius: 0;
}

/* Esto busca el p que tenga la clase contact-subtitle */
.contact-subtitle {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.2rem;
    font-style: italic; /* La cursiva en esta fuente es clave */
    letter-spacing: 2px;
    color: #888888; /* Un gris sutil */
    text-align: center;
    margin-bottom: 40px;
}

/* El contenedor que centra todo */
.contact-header {
    text-align: center;
    padding: 60px 0;
}



/* El botón ENVIAR */
.submit-btn {
    width: 100%;
    background-color: #000000;
	font-size: 11px !important;
    color: #FFFFFF;
    border: none;
    padding: 20px;
    font-weight: bold;
    letter-spacing: 4px;
    cursor: pointer;
    margin-top: 40px;
    transition: 0.3s;
	display: inline-block;
    line-height: 1; /* Esto iguala el comportamiento de texto interno */
    vertical-align: middle;
    text-decoration: none;
	box-sizing: border-box; /* El tamaño total incluirá el padding y el borde */
    height: auto;
}

.submit-btn:hover {
    background-color: #555555;
}

/* Responsive para celular: pone un campo debajo del otro */
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
        gap: 20px;
    }
}
/* Ajuste de márgenes y ancho para que respire */
.contact-container {
    padding: 160px 40px 80px 40px; /* Más espacio arriba y a los lados */
    max-width: 700px;    /* Lo estrechamos un poco para que sea más fácil de leer */
    margin: 0 auto;      /* Lo centra perfectamente en la pantalla */
}

/* Espaciado extra entre la cabecera y el inicio del formulario */
.contact-header {
    margin-bottom: 80px; 
    text-align: center;
}

/* Separación entre los bloques de preguntas */
.form-group, .form-group-full, .checkbox-group {
    margin-bottom: 45px; 
}

/* Ajuste para que las líneas de texto no se peguen al borde en móviles */
@media (max-width: 480px) {
    .contact-container {
        padding: 60px 25px; /* Un poco menos en móvil para no perder espacio real */
    }
}

.nav-link {
    font-family: 'Montserrat', sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.7;
    transition: 0.3s ease;
}

.nav-link:hover {
    opacity: 1;
}

/* Selector de Idiomas */
.lang-selector {
    display: flex;
    align-items: center;
    gap: 12px; /* Un poco más de aire */
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

.lang {
    opacity: 0.5;
    cursor: pointer;
    transition: 0.3s;
}

.lang.active {
    opacity: 1;
    font-weight: bold;
}

.divider {
    opacity: 0.3;
}
/*  PULIDO ESTÉTICO DE SELECTORES (Checkboxes y Radios) */

/* Cambia el color azul por defecto a Negro */
.contact-page input[type="checkbox"],
.contact-page input[type="radio"] {
    accent-color: #000000; /* Aquí ocurre la magia del color negro */
    cursor: pointer;
    transform: scale(1.1); /* Los hace un pelín más grandes para que sean fáciles de tocar */
    margin-right: 10px;
}

/* Estilo de la lista de opciones para que se vea más limpia */
.checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
}

.checkbox-list label {
    font-size: 12px;
    letter-spacing: 1px;
    color: #000000;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s ease;
}

.checkbox-list label:hover {
    color: #666666;
}

/* Unificación de textos decorativos en el formulario */
.checkbox-group p {
    font-size: 11px;
    letter-spacing: 2px;
    color: #000000; /* Títulos de sección en negro para contraste */
    font-weight: bold;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .contact-container {
        /* Aumentamos el padding superior para compensar la altura del header blanco */
        padding-top: 220px !important; 
        padding-left: 25px;
        padding-right: 25px;
        max-width: 100%;
    }

    .contact-header {
        /* Añadimos un poco más de aire al título "Book the date" */
        margin-bottom: 50px; 
    }
}
/* ============================================
                     NOSOTROS
   ============================================ */

:root {
    --bg-color: #ffffff;
    --text-main: #1a1a1a;    /* Negro editorial */
    --text-muted: #666666;   /* Gris para párrafos */
    --text-light: #999999;   /* Gris para detalles */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
    --line-height: 1.8;
}

.about-section {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-sans);
    padding: 160px 5% 100px 5%; /* Más aire arriba por el header */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* --- INTRODUCCIÓN --- */

.about-intro {
    margin-bottom: 40px;
}

.section-title {
    margin-bottom: 50px;
    text-align: center;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: 35px;
	color: #1a1a1a;
	
}

.intro-text {
	font-family: 'Cormorant Garamond', serif;
    max-width: 850px;
    margin: 0 auto;
	text-align: left;
    font-size: 18px;
    color: var(--text-main);
}

/* Letra Capital Editorial */

.intro-text p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 5.2rem;    /* Tamaño grande e impactante */
    float: left;          /* Hace que el texto rodee la letra */
    margin-right: 12px;   /* Espacio entre la E y las palabras */
    margin-top: 6px;      /* Ajuste fino para alinear el tope de la E con el texto */
    line-height: 0.85;    /* Crucial para que no deje un hueco gigante debajo */
    color: var(--text-main);
    font-weight: 400;
}

/* --- CONTROLES SOMOS ALEJO y CAMI --- */

.intro-text p {
    margin-bottom: 25px;
    text-align: left;
}

.highlight {
    font-style: italic;
	font-size: 4rem;
    color: var(--text-light);
    display: block;
    margin-top: 40px;
    text-align: center;
    letter-spacing: 1px;
}
.intro-content-wrapper {
    max-width: 650px; /* Controla qué tan ancho es el bloque de texto */
    margin: 0 auto 60px auto; /* Centra el bloque y le da espacio con la foto de abajo */
    padding: 0 20px; /* Margen de seguridad para móviles muy pequeños */
}

.intro-text p {
    text-align: left; /* Para que coincida con la estética de la imagen que mostraste */
    line-height: 1.8;
    margin-bottom: 25px;
}

/* Ajuste para que la letra capital no rompa el centrado si decides usarla */
.intro-text p:first-of-type::first-letter {
    float: left; 
    display: block;
    font-size: 5rem;
    margin-bottom: 10px;
}

/* --- MÁSCARAS DE IMAGEN --- */
.image-mask {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
}

/* LA VENTANA (FOTO PRINCIPAL) */
.parallax-photo {
    padding-top: 100% !important; /* Controla el alto de la "ventana" */
    margin-top: 10px;
}

.parallax-photo img {
    height: 100% !important; /* La foto es más alta que el hueco */
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: none !important; /* Vital para que el JS no pelee con el CSS */
    will-change: transform;
}

/* FOTOS DE PERFIL (ALEJO & CAMILA) */

.profile .image-mask {
    padding-top: 100% !important; /* Formato vertical */
}

.profile .image-mask img {
    height: 100% !important; /* Estas no se mueven, llenan el 100% */
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: transform 0.8s ease; /* Zoom suave al pasar el mouse */
}

.profile .image-mask:hover img {
    transform: scale(1.05);
}

/* Fotos de Perfil: Verticales */

.profile .image-mask {
    padding-top: 100%; /* Reemplazo de aspect-ratio 2:3 o 3:4 */
}

.image-mask img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.image-mask:hover img {
    transform: scale(1.05);
}

/* --- GRID DE ROSTROS --- */

.faces-grid {
    margin-top: 50px;
}

.grid-title {
    font-family: var(--font-serif);
    font-size: 20px;
    text-align: center;
    margin-bottom: 80px;
    letter-spacing: 2px;
    font-style: normal;
	font-weight: 400;
	text-transform: uppercase;
	color: #1a1a1a;
}

.profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-bottom: 120px;
	
}

.profile h4 {
    font-family: var(--font-serif);
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--text-main);
}
.about-footer {
    text-align: center;    /* Centra el texto (h3) y el párrafo (p) */
    margin-top: 50px;     /* Espacio con la sección de arriba */
    border-top: 1px solid #eee; /* La línea divisoria sutil */
    padding-top: 40px;     /* Espacio entre la línea y el título */
    width: 100%;           /* Asegura que ocupe todo el ancho para poder centrar */
}

.profile-info p {
	font-family: 'Cormorant Garamond', serif;
	font-size: 18px;
    max-width: 450px; /* Evita que las líneas de texto sean demasiado largas */
    line-height: 1.8;  /* Dale aire entre líneas para que sea legible y elegante */
	color: #1a1a1a;
}

.about-footer h3 {
    font-family: var(--font-serif);
    font-size: 38px;       /* El tamaño que ajustamos antes */
    margin-bottom: 15px;
    display: block;        /* Asegura que se comporte como bloque para centrarse */
	text-transform: uppercase;
	font-weight: 400;
	color: #1a1a1a;
}

.about-footer p {
    font-size: 20px;
	font-family: var(--font-serif);
	font-style: italic;
    color: #1a1a1a;
    max-width: 600px;      /* Limitamos el ancho para que no sea una línea eterna */
    margin: 0 auto;        /* ¡CLAVE! Centra el bloque del párrafo si tiene max-width */
}
/* Esto cambia el color SOLO de los nombres en los perfiles */
.profile-info h4 {
    color: #1a1a1a !important; /* O usa var(--text-main) si prefieres la variable */
    font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
    font-size: 35px !important;
    margin-bottom: 20px;
	
}
/* Esto ajusta el contenedor de texto de Camila */
.profile.camila .profile-info {
    text-align: right; /* Alinea el h4 (título) */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* ¡ESTA ES LA CLAVE! Empuja todo hacia la derecha */
    padding-right: 40px; /* Aquí controlas qué tan cerca queda de la foto */
	
}

/* Esto ajusta el párrafo de Camila */
.profile.camila .profile-info p {
    text-align: right;
    max-width: 450px; /* Evita que las líneas sean muy largas */
    margin-right: 0;  /* Asegura que no tenga margen a la derecha */
    margin-left: auto; /* Empuja el bloque de texto contra el borde derecho */
}
.profile-info h4 {
    text-transform: uppercase; /* ¡Con la 's'! */
    letter-spacing: 2px;       /* Un toque extra de elegancia */
	font-size: 80px;
	text-transform: uppercase;  /* Mayúsculas corregidas */
    letter-spacing: 4px;        /* Espaciado entre letras pro */
    margin-bottom: 20px;
    font-weight: 400;
}
/* SEPARADOR DE SECCIONES */
.spacer-lg {
    height: 40px; /* Ajusta este valor según qué tan grande quieras el espacio */
    width: 100%;
    display: block;
    clear: both;
	border-top: 1px solid #eee; /* La línea divisoria sutil */
    padding-top: 0px;     /* Espacio entre la línea y el título */
}

/* Ajuste para que en móvil el espacio no sea tan exagerado */
@media (max-width: 768px) {
    .spacer-lg {
        height: 60px;
    }
}
/* --- RESPONSIVE PARA MÓVIL --- */

@media (max-width: 768px) {
    
    /* 1. Hacemos que la rejilla sea de 1 sola columna */
    .profile {
        grid-template-columns: 1fr !important; /* Una sola columna */
        gap: 30px; /* Menos espacio entre foto y texto */
        margin-bottom: 80px;
    }

    /* 2. Ajustamos el orden para que siempre vaya Foto -> Texto */
    .profile.camila {
        display: flex;
        flex-direction: column;
    }
    
    .profile.camila .image-mask {
        order: -1; /* Sube la foto de Camila arriba del texto */
    }

    /* 3. Limpiamos paddings de texto que pusimos para laptop */
    .profile-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center; /* Centramos el texto para un look más móvil */
		color: var(--text-muted);
    }

    /* 4. Ajustamos tamaños de letra para que no sean gigantes */
    .section-title {
        font-size: 32px;
    }
    
    .grid-title {
        font-size: 20px;
        margin-bottom: 40px;
    }

    /* 5. La foto parallax: que no sea tan alta en móvil */
    .parallax-photo {
        padding-top: 100% !important; /* Más cuadrada para que no ocupe toda la pantalla */
    }
	/* 1. Ajustamos el tamaño del nombre para que no se desborde */
    .profile-info h4 {
        font-size: 35px !important; /* Un tamaño más seguro para celulares */
        letter-spacing: 2px;        /* Reducimos un poco el tracking */
        text-align: center;         /* Centrado se ve mejor en vertical */
        margin-bottom: 15px;
        width: 100%;                /* Ocupa todo el ancho disponible */
    }

    /* 2. Ajustamos el cuerpo de texto para que no se desplace */
    .profile.camila .profile-info,
    .profile.alejo .profile-info {
        align-items: center;        /* Centramos el bloque en móvil */
        text-align: center;         /* Texto centrado para lectura vertical */
        padding: 0 20px;            /* Margen de seguridad a los lados */
    }

    .profile.camila .profile-info p,
    .profile.alejo .profile-info p {
        text-align: center;         /* El párrafo también centrado */
        max-width: 100%;            /* Que use todo el ancho del cel */
        margin: 0 auto !important;  /* Centrado perfecto */
        font-size: 18px;            /* Un pelín más pequeño para legibilidad */
    }

    /* 3. Evitamos que Alejandro se salga */
    .profile {
        grid-template-columns: 1fr !important; /* Una sola columna */
        overflow: hidden;                      /* Evita scroll horizontal */
    }
}
.contact-page, .about-section {
    display: block; /* Fuerza el flujo normal */
    overflow: hidden; /* Corta cualquier elemento invisible que flote abajo */
}
/* FUERA DE CUALQUIER MEDIA QUERY (Al final de todo) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    height: auto;
    min-height: 100%;