* {
    box-sizing: border-box; /* evita que padding sume altura extra a las secciones */
}

/* =========================================================
   INTRO DE ENTRADA
   El vídeo ocupa toda la ventana durante la entrada y permanece por
   encima de la portada y de la navegación. Al terminar, se desvanece.
   ========================================================= */
.intro-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* redundante con top/right/bottom/left arriba, por compatibilidad */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d44767;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.7s ease, visibility 0.7s ease;
    overflow: hidden;
}

.intro-video {
    display: block;
    width: 100%;
    height: 100%;
    /* Dentro de un contenedor flex, un elemento "reemplazado" (video,
       img) tiene por defecto un min-width/min-height implícito igual a
       su tamaño intrínseco (aquí 1920x1080). Si la ventana es más
       pequeña que eso —el caso casi siempre—, algunos navegadores
       (sobre todo Safari) se niegan a encogerlo por debajo de ese
       tamaño pese al width/height:100%, y el vídeo no se ajusta al
       marco de la ventana. Esto lo anula explícitamente. */
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

html.intro-active,
body.intro-active {
    overflow: hidden;
    height: 100%;
}

body.intro-active > nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-overlay.intro-fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (orientation: portrait) {
    /* El vídeo es 16:9. En móvil vertical lo mostramos completo para no
       cortar a los personajes; el fondo rosa evita barras negras. */
    .intro-video {
        object-fit: contain;
    }
}

/* Botón para saltar la intro. Se coloca sobre el vídeo, discreto pero
   siempre alcanzable, con área táctil amplia. */
.intro-skip {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 2;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: var(--font-texto);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.2s ease;
}

.intro-skip:hover,
.intro-skip:active {
    background: rgba(0, 0, 0, 0.7);
}

/* Texto disponible para lectores de pantalla y buscadores, pero no
   visible: la portada muestra el título dentro de la propia ilustración. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .intro-overlay {
        transition-duration: 0.2s;
    }

    /* Quien haya pedido en su sistema reducir el movimiento no debería
       sufrir el desplazamiento animado entre secciones. */
    html {
        scroll-behavior: auto;
    }

    .nav-links,
    .nav-toggle span,
    .nav-links a {
        transition-duration: 0.01ms;
    }
}

body {
    margin: 0;
    font-family: var(--font-texto);
    font-weight: 400; /* Comic Neue Regular */
}

:root {
    --nav-size: 200px;      /* ancho del panel lateral en PC/horizontal */
    --topbar-height: 62px;  /* alto de la barra superior en vertical */
    --font-titulo: 'Baloo 2', cursive, sans-serif;   /* títulos grandes */
    --font-texto: 'Comic Neue', Arial, sans-serif;   /* subtítulos, texto normal y botones */
    --vh100: 100vh; /* alto real de pantalla, ver override justo abajo */

    /* ---------------------------------------------------------------
       PALETA
       Colores de marca, usados en varios puntos de la hoja.
       --------------------------------------------------------------- */
    --c-acento: #ff6f61;          /* rosa/coral: enlaces activos, cifras del contador */
    --c-panel: #333;              /* gris del panel de navegación y la barra superior */
    --c-boton-subir: #079b25;     /* verde "Subir mis fotos" */
    --c-boton-galeria: #f3d2c1;   /* crema "Ver galería" */

    /* ---------------------------------------------------------------
       COLOR DE FONDO DE CADA SECCIÓN
       Es el tono dominante de su ilustración. Cada uno se usa en
       DOS O TRES sitios distintos (modo "fit-contain" en horizontal,
       modo vertical y, en algún caso, la regla base), así que se
       define aquí una sola vez: si algún día se cambia una
       ilustración, basta con actualizar su variable y los tres usos
       quedan sincronizados automáticamente.
       --------------------------------------------------------------- */
    --bg-gran: #fae6cf;
    --bg-lugar: #a7784e;
    --bg-preguntas: #985823;
    --bg-fotos: #965647;
    --bg-regalo: #eec495;
    --bg-gracias: #eab0a0;
}

/* ALTO DE PANTALLA EN MÓVIL
   · 100vh  = ignora la barra del navegador y cuenta el alto TOTAL, así
     que las secciones ajustadas a "100vh - topbar" salían más altas que
     lo realmente visible y dejaban un margen de color (efecto "marco").
   · 100dvh = el alto visible en CADA momento, que es el que se usa aquí:
     las secciones encajan siempre con lo que se ve, sin marco ni hueco.
     Como contrapartida, en Safari el valor cambia mientras la barra del
     navegador se retrae y reaparece al hacer scroll, lo que puede
     provocar algún tirón puntual en las imágenes.
   (Se probó 100svh, que es fijo y evita esos tirones, pero deja asomar
   la sección siguiente cuando la barra se retrae y el resultado gustaba
   menos, así que se mantiene dvh a propósito.)
   Se mantiene 100vh como respaldo para navegadores antiguos. */
@supports (height: 100dvh) {
    :root {
        --vh100: 100dvh;
    }
}

nav {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--nav-size);
    height: 100%;
    background: var(--c-panel); /* Gris sólido */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 100;
    /* En algunos móviles, un elemento "position: fixed" puede dejar de
       responder al tacto tras un rato haciendo scroll (más aún con
       scroll-snap activo). Forzarlo a su propia capa de composición
       evita ese problema. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Panel de navegación lateral en horizontal */
.nav-links {
    display: flex;
    flex-direction: column; /* Alinea los botones verticalmente */
    justify-content: space-between; /* Distribuye los botones uniformemente */
    height: 100%; /* Ocupa todo el alto de la pantalla */
    padding: 0; /* Elimina cualquier padding interno */
}

/* Botones del panel de navegación */
.nav-links a {
    flex: 1 1 0; /* base en 0 para que los 10 botones se repartan el alto disponible a partes iguales y lo cubran por completo, sin dejar hueco al final */
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 15px; /* Espaciado interno */
    font-size: 1rem; /* Ajusta el tamaño del texto */
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    touch-action: manipulation; /* evita el retardo de ~300ms y posibles toques fantasma en móvil */
}

/* Efecto hover/selección para los botones: mismo color tanto al pasar el
   ratón por encima (:hover, horizontal/PC) como al tocar/seleccionar
   (:active, también válido en vertical, donde no hay ratón) */
.nav-links a:hover,
.nav-links a:active {
    background-color: var(--c-acento);
    color: #fff;
}

/* Botón hamburguesa: oculto en PC y en móvil/tablet horizontal */
.nav-toggle {
    display: none;
}

/* Título dinámico de la barra superior: solo se usa en vertical */
.topbar-title {
    display: none; /* Ocultar por defecto */
}

/* Imagen real de cada sección: solo se muestra en vertical (en horizontal se sigue usando el fondo recortado) */
.section-img {
    display: none;
}

/* =========================================================
   ACCESOS RÁPIDOS DE LA PORTADA EN VERTICAL
   Mismo patrón que "Preguntas frecuentes"/"Comparte tus fotos": una
   única imagen (con los 9 botones ya dibujados en cuadrícula) cuyo
   wrapper mantiene siempre su proporción exacta (863x1823), así que
   las 9 zonas pulsables se colocan con simples porcentajes, sin JS.
   El resaltado al pasar el ratón/activar reutiliza exactamente el
   mismo tratamiento que los botones de "Preguntas" (.faq-topic-btn),
   para que sea coherente en todo el sitio. Solo se muestra en
   vertical (ver media query más abajo).
   ========================================================= */
.home-content-wrapper {
    display: none;
    position: relative;
}

.home-content-image {
    display: block;
    width: 100%;
    height: auto;
}

.home-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-hotspot-btn {
    position: absolute;
    background: transparent;
    border: clamp(2px, 0.3vw, 3px) solid transparent;
    border-radius: clamp(8px, 1.1vw, 16px);
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.home-hotspot-btn:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.12);
}

.home-hotspot-btn:active {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.22);
}

.home-hotspot-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

/* Coordenadas de cada botón, medidas directamente sobre la
   ilustración final (img/Boda_0_NosCasamos_Mv.png). */
.home-hotspot-confirmar {
    left: 3.13%;
    top: 44.21%;
    width: 45.54%;
    height: 9.49%;
}

.home-hotspot-gran {
    left: 51.22%;
    top: 44.21%;
    width: 45.65%;
    height: 9.49%;
}

.home-hotspot-lugar {
    left: 3.13%;
    top: 54.69%;
    width: 45.54%;
    height: 9.43%;
}

.home-hotspot-preguntas {
    left: 51.22%;
    top: 54.69%;
    width: 45.65%;
    height: 9.43%;
}

.home-hotspot-contador {
    left: 3.13%;
    top: 65.11%;
    width: 45.54%;
    height: 9.43%;
}

.home-hotspot-historia {
    left: 51.22%;
    top: 65.11%;
    width: 45.65%;
    height: 9.43%;
}

.home-hotspot-fotos {
    left: 3.13%;
    top: 75.59%;
    width: 45.54%;
    height: 9.43%;
}

.home-hotspot-regalo {
    left: 51.22%;
    top: 75.59%;
    width: 45.65%;
    height: 9.43%;
}

.home-hotspot-gracias {
    left: 3.13%;
    top: 86.07%;
    width: 93.74%;
    height: 9.43%;
}

.hero h1 {
    color: white;
    font-family: var(--font-titulo);
    font-weight: 700;
    font-size: clamp(1.6rem, 5vw, 3rem);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 0 20px;
}

.hero {
    height: 100vh;
    margin-left: calc(var(--nav-size) - 2px); /* pequeño solape para evitar líneas de redondeo de subpíxel */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../img/Boda_0_NosCasamos.png');
    background-size: cover;
    background-position: center;
}

section {
    margin-left: calc(var(--nav-size) - 2px); /* pequeño solape para evitar líneas de redondeo de subpíxel */
    height: 100vh;
    position: relative;
    background-size: cover;
    background-position: center;
}

#historia {
    background-image: url('../img/Boda_1_NuestraHistoria.png');
}

#contador {
    background-image: url('../img/Boda_2_CuentaAtras.png');
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 20px;
}

#gran {
    background-image: url('../img/Boda_3_ElGranDia.png');
}

#lugar {
    background-image: url('../img/Boda_4_ElLugar.png');
}

#lugar iframe {
    position: absolute;
    bottom: 40px;
    left: 20px;
    width: 39%;
    height: 45vh;
    border: 0;
    border-radius: 10px;
}

#confirmar {
    background-image: url('../img/Boda_5_ConfirmaTuAsistencia.png');
}

#confirmar iframe {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    height: 92%;
    border: 0;
    border-radius: 10px;
}

#regalo {
    background-image: url('../img/Boda_6_NuestroMejorRegalo.png');
}

#regalo p {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: rgba(255, 255, 255, 0.7);
    padding: clamp(10px, 2.5vh, 20px) clamp(14px, 2vw, 20px);
    border-radius: 10px;
    color: black;
    font-size: clamp(0.72rem, 2.3vh, 1.2rem);
    line-height: 1.35;
    max-width: 40%;
    /* Centrado vertical real (top:50% + translateY(-50%)) para que no
       se superponga con el título, que suele estar arriba de la
       ilustración. Es seguro combinarlo con max-height:85%: como el
       bloque nunca puede medir más del 85% de la sección, su mitad
       nunca supera el 42.5%, así que centrado seguirá dejando como
       mínimo un 7.5% de margen arriba y abajo — nunca se sale de la
       sección, sea cual sea la altura de pantalla o la longitud del
       texto. Si aun así no cupiese, hace scroll interno. */
    max-height: 85%;
    overflow-y: auto;
}

/* Respaldo por si algún navegador ignora la etiqueta
   "format-detection" del <head> e inserta igualmente un enlace de
   llamada sobre el número de cuenta: se le quita el aspecto de enlace
   (azul y subrayado) y se desactiva la pulsación. */
#regalo p a[href^="tel:"] {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* Botón para copiar el número de cuenta de un toque. Se dimensiona en
   "em" para que acompañe al tamaño de letra del párrafo, que es
   variable según la altura de pantalla. */
.copy-iban {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0.25em 0.8em;
    border: none;
    border-radius: 999px;
    background: var(--c-acento);
    color: #fff;
    font-family: var(--font-texto);
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.copy-iban:hover,
.copy-iban:active {
    background: #e2554a;
}

.copy-iban.copied {
    background: var(--c-boton-subir);
}

/* =========================================================
   PREGUNTAS FRECUENTES
   Acordeón nativo (details/summary): cada pregunta se abre solo si
   el usuario la toca, así ocupa poco espacio por defecto. La tarjeta
   comparte el mismo patrón "ancla arriba + max-height + scroll
   interno" que #regalo p, para que nunca desborde sea cual sea el
   número de preguntas o su longitud.
   ========================================================= */
/* =========================================================
   PREGUNTAS FRECUENTES
   Mismo patrón que "Comparte tus fotos": el contenedor mantiene
   siempre la proporción real de la ilustración (1536x1024, 3:2), así
   que los botones y el panel de respuesta se pueden colocar con
   simples porcentajes CSS (relativos al wrapper) y quedan alineados
   sea cual sea la resolución, sin necesidad de JS para el cálculo.
   Los botones son zonas invisibles: el icono, la etiqueta y la
   flechita ya están dibujados en la imagen; el <button> solo aporta
   la zona pulsable en el sitio exacto y el resaltado al activarse.
   ========================================================= */
#preguntas {
    background-image: none;
    /* Color real del borde inferior de la ilustración: se ve en el
       margen que pueda quedar alrededor del wrapper si la pantalla no
       tiene exactamente proporción 3:2. */
    background-color: var(--bg-preguntas);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.preguntas-wrapper {
    position: relative;
    width: min(100%, calc(100vh * 1.5));
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
}

.preguntas-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================================
   PREGUNTAS FRECUENTES EN VERTICAL
   Mismo patrón que "El gran día"/"Comparte tus fotos": una imagen
   propia (con los 4 botones ya dibujados en columna) cuyo wrapper
   mantiene siempre su proporción exacta (853x1844), así que los
   botones se colocan con simples porcentajes, sin JS. A diferencia
   de "Comparte tus fotos", aquí no hay hueco en blanco bajo los
   botones (la ilustración de la familia ocupa esa zona), así que la
   viñeta de respuesta se superpone como una tarjeta traslúcida sobre
   la parte inferior de la imagen -mismo recurso que ya se usa en
   Regalo/Gracias-, con scroll interno si el contenido no cupiese.
   Solo se muestra en vertical (ver media query más abajo).
   ========================================================= */
.preguntas-content-wrapper {
    display: none;
    position: relative;
}

.preguntas-content-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Coordenadas medidas directamente sobre Boda_8_PreguntasFrecuentes_Mv.png */
.faq-topic-aparcamiento-mv {
    left: 13.25%;
    top: 28.25%;
    width: 73.51%;
    height: 7.16%;
}

.faq-topic-comida-mv {
    left: 13.25%;
    top: 36.82%;
    width: 73.51%;
    height: 7.27%;
}

.faq-topic-hoteles-mv {
    left: 13.25%;
    top: 45.44%;
    width: 73.51%;
    height: 7.21%;
}

.faq-topic-ceremonia-mv {
    left: 13.25%;
    top: 54.01%;
    width: 73.51%;
    height: 7.27%;
}

.faq-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.faq-topic-btn {
    position: absolute;
    background: transparent;
    border: clamp(2px, 0.3vw, 3px) solid transparent;
    border-radius: clamp(8px, 1.1vw, 16px);
    cursor: pointer;
    pointer-events: auto;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.faq-topic-btn:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.12);
}

.faq-topic-btn.active {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.22);
}

.faq-topic-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

/* Coordenadas de cada botón, medidas directamente sobre la
   ilustración final (img/Boda_8_PreguntasFrecuentes.png). */
.faq-topic-aparcamiento {
    left: 8.0%;
    top: 16.6%;
    width: 22.5%;
    height: 8.4%;
}

.faq-topic-comida {
    left: 69.5%;
    top: 16.6%;
    width: 22.1%;
    height: 8.4%;
}

.faq-topic-hoteles {
    left: 8.0%;
    top: 27.9%;
    width: 22.5%;
    height: 8.6%;
}

.faq-topic-ceremonia {
    left: 69.5%;
    top: 27.9%;
    width: 22.1%;
    height: 8.6%;
}

/* El panel de respuesta aprovecha el espacio de la propia imagen: se
   coloca justo debajo de las dos filas de botones y ocupa casi todo
   el ancho y alto restante de la ilustración (con un margen pequeño),
   en vez de una tarjeta flotante más pequeña. */
.faq-answer {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 39%;
    bottom: 4%;
    background: rgba(255, 255, 255, 0.88);
    border-radius: clamp(10px, 1.4vw, 20px);
    padding: clamp(12px, 2.2vh, 24px) clamp(14px, 2vw, 24px);
    font-family: var(--font-texto);
    font-size: clamp(0.72rem, 2vh, 1.15rem);
    line-height: 1.45;
    color: #333;
    overflow-y: auto;
}

/* Posición propia para la viñeta de la versión vertical: debajo de
   los 4 botones apilados, sobre la ilustración de la familia (que
   aquí no deja hueco en blanco como en Fotos). Va después de
   .faq-answer a propósito, para ganarle la cascada (misma
   especificidad, gana la que aparece más abajo en el archivo). */
.faq-answer-mv {
    left: 8%;
    right: 8%;
    top: 65%;
    bottom: 3%;
}

.faq-answer-title {
    display: block;
    font-size: 1.15em;
    margin-bottom: 0.4em;
}

.faq-answer p {
    margin: 0 0 0.6em;
}

/* Mapa/foto dentro de una respuesta (de momento solo en Aparcamiento):
   flota a la derecha y el texto lo envuelve por la izquierda, "en el
   margen derecho del bocadillo" tal cual se pidió. */
.faq-answer .faq-media {
    float: right;
    width: 42%;
    max-width: 260px;
    margin: 0 0 12px 16px;
    border-radius: 12px;
    display: block;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer em {
    font-style: italic;
}

.faq-answer ul {
    margin: 0 0 0.7em;
    padding-left: 1.2em;
}

.faq-answer li {
    margin-bottom: 0.6em;
}

.faq-answer li:last-child {
    margin-bottom: 0;
}

/* Colores distintivos para los nombres de los parkings en la pregunta
   de "Aparcamiento" */
.faq-answer .parking-azul {
    color: #1a3d7c;
}

.faq-answer .parking-morado {
    color: #7c3aed;
}

/* La tabla de hoteles puede ser más ancha que el panel en pantallas
   estrechas: este envoltorio le da scroll horizontal propio en vez
   de desbordar el panel o forzar un texto ilegiblemente pequeño. */
.faq-table-wrap {
    overflow-x: auto;
    margin: 0.4em 0 0.6em;
    -webkit-overflow-scrolling: touch;
}

.faq-table-wrap table td a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.faq-table-wrap table td a:hover {
    text-decoration: underline;
    opacity: 0.7;
    cursor: pointer;
}

.faq-answer table {
    border-collapse: collapse;
    width: 100%;
    min-width: 480px;
    font-size: 0.92em;
}

.faq-answer th,
.faq-answer td {
    text-align: left;
    padding: 0.4em 0.6em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.faq-answer th {
    font-family: var(--font-texto);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
}

.faq-answer tbody tr:last-child td {
    border-bottom: none;
}


/* =========================================================
   COMPARTE TUS FOTOS (antes "Fotos")
   Ver bloque dedicado más abajo: la ilustración queda limpia y los
   botones/QR son HTML real. El contenedor mantiene siempre la
   proporción de la imagen activa (vertical 3:2 o panorámica según
   el hueco disponible en horizontal).
   ========================================================= */
#gracias {
    background-image: url('../img/Boda_9_Gracias.png');
    /* Color de respaldo mientras no exista la imagen (ver nota en
       #preguntas). */
    background-color: var(--bg-gracias);
}

#gracias p {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: rgba(255, 255, 255, 0.7);
    padding: clamp(10px, 2.5vh, 20px) clamp(14px, 2vw, 20px);
    border-radius: 10px;
    color: black;
    font-size: clamp(0.72rem, 2.3vh, 1.2rem);
    line-height: 1.35;
    text-align: center;
    max-width: 40%;
    /* Centrado vertical real (top:50% + translateY(-50%)), igual que en
       #regalo p: combinado con max-height:85% es matemáticamente
       imposible que se salga de la sección por arriba o por abajo, sea
       cual sea la altura de pantalla o la longitud del texto. */
    max-height: 85%;
    overflow-y: auto;
}

/* =========================================================
   GUESTPIX / VUESTRAS FOTOS
   La ilustración queda limpia y los botones/QR son HTML reales.
   El contenedor mantiene siempre la proporción 3:2 de la imagen.
   ========================================================= */
#fotos {
    background-image: none;
    background-color: var(--bg-fotos);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.fotos-wrapper {
    position: relative;
    width: min(100%, calc(100vh * 1.5));
    aspect-ratio: 3 / 2;
    flex: 0 0 auto;
}

.fotos-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estas dos reglas son el valor por defecto: la imagen vertical 3:2
   (misma proporción que el resto de secciones). Cuando el hueco
   disponible en horizontal es lo bastante ancho para la ilustración
   panorámica (1672x941) sin generar bandas grandes, el script
   (updateFotosLayout, más abajo) carga esa imagen y ajusta esta
   proporción por JS directamente sobre el elemento; si el hueco no
   es suficiente (p. ej. portátiles de 13"-14" con el menú lateral
   restando ancho), se queda con esta vertical, igual que las demás
   secciones. Así nunca aparecen las bandas grandes de forzar una
   imagen muy panorámica en un hueco que no lo es. */

.fotos-actions {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fotos-button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 0.9vw, 14px);
    text-decoration: none;
    font-family: var(--font-texto);
    font-weight: 700;
    line-height: 1;
    border: clamp(1.5px, 0.18vw, 2.5px) solid #171717;
    border-radius: clamp(8px, 1.1vw, 17px);
    box-sizing: border-box;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.fotos-button::before {
    content: "";
    position: absolute;
    inset: clamp(-10px, -0.8vw, -6px);
}

.fotos-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.fotos-button:active {
    transform: translateY(1px) scale(0.97);
    filter: brightness(0.95);
}

.fotos-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.fotos-button svg {
    width: clamp(20px, 2.7vw, 42px);
    height: clamp(20px, 2.7vw, 42px);
    flex: 0 0 auto;
}

.fotos-button span {
    font-size: clamp(0.58rem, 1.4vw, 1.4rem);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   ⚠️ COORDENADAS DUPLICADAS A PROPÓSITO — MANTENER SINCRONIZADAS
   Los porcentajes de .fotos-button-upload / -gallery / .fotos-qr
   que hay debajo están repetidos en el array "fotosHotspots" del
   <script> de index.html (como fracciones: 5.6% -> 0.056).

   No es un descuido: son DOS sistemas de coordenadas distintos.
     · Estos % son relativos al contenedor .fotos-wrapper y sirven
       de posición inicial y de respaldo si el JS no llega a
       ejecutarse.
     · El JS recalcula la posición respecto al RECUADRO REAL de la
       imagen ya renderizada, descontando las bandas que deja
       "object-fit: contain" cuando la pantalla no tiene la misma
       proporción que la ilustración. Es el valor definitivo: al
       ejecutarse sobrescribe estos mediante estilos en línea.

   POR TANTO: si se mueve o redimensiona un botón, hay que cambiarlo
   EN LOS DOS SITIOS o el botón "saltará" al cargar la página.
   El array de index.html es la referencia canónica.
   --------------------------------------------------------------- */
.fotos-button-upload {
    left: 5.6%;
    top: 57.8%;
    width: 24.6%;
    height: 7.5%;
    background: var(--c-boton-subir);
    color: #fff;
}

.fotos-button-gallery {
    left: 5.6%;
    top: 66.9%;
    width: 24.6%;
    height: 7.2%;
    background: var(--c-boton-galeria);
    color: #111;
}

.fotos-qr {
    position: absolute;
    left: 5.2%;
    top: 76.8%;
    width: 5.2%;
    /* Antes solo tenía aspect-ratio:1, pero en un elemento con
       position:absolute y altura automática, algunos navegadores no
       calculan bien la altura a partir del aspect-ratio y el ancho
       (queda achatado). Con la altura fija ya no depende de eso: es
       el valor exacto para que salga cuadrado en píxeles dentro del
       marco 3:2 (5.2% de ancho × 1.5 = 7.8% de alto). */
    height: 7.8%;
    aspect-ratio: 1;
    display: block;
    background: #fff;
    line-height: 0;
    border-radius: 2px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fotos-qr:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
}

.fotos-qr:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
}

.fotos-qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================================
   COMPARTE TUS FOTOS EN VERTICAL
   Mismo patrón que "El gran día": una imagen decorativa a ancho
   completo (Mv, vía .section-img, sin nada interactivo) seguida de
   una segunda imagen de contenido (Content_Mv) sobre la que se
   posicionan los botones reales y el QR con simples porcentajes.
   El wrapper mantiene siempre la proporción exacta de esa imagen
   (1038x1516), igual que en Preguntas frecuentes, así que no hace
   falta JS para alinearlos: solo se muestra en vertical (ver media
   query más abajo).
   ========================================================= */
.fotos-content-wrapper {
    display: none;
    position: relative;
}

.fotos-content-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Misma proporción "píldora" compacta que los botones de la versión
   horizontal (.fotos-button-upload/.fotos-button-gallery, ~25% de
   ancho), en vez de estirarlos a todo el ancho del hueco disponible;
   aquí van centrados porque el diseño vertical no tiene un lado fijo
   al que anclarlos como en horizontal. */
.fotos-button-upload-mv {
    left: 21%;
    top: 54%;
    width: 58%;
    height: 7.3%;
    background: var(--c-boton-subir);
    color: #fff;
}

.fotos-button-gallery-mv {
    left: 21%;
    top: 63.6%;
    width: 58%;
    height: 7.3%;
    background: var(--c-boton-galeria);
    color: #111;
}

.fotos-qr-mv {
    /* Coordenadas medidas directamente sobre el recuadro de guía
       dibujado en Boda_7_VuestrasFotos_Content_Mv.png. La altura no
       puede ser igual al ancho en % (heredaría el 7.8% pensado para
       el wrapper 3:2 de horizontal): este wrapper vertical tiene su
       propia proporción (1038x1516), así que el % de alto necesario
       para que salga cuadrado es distinto: 14.6% × (1038/1516) ≈ 10%. */
    left: 15.6%;
    top: 79.3%;
    width: 14.6%;
    height: 10%;
}

/* =========================================================
   HORIZONTAL EN PANTALLAS "CUADRADAS" (p.ej. iPad Pro apaisado)
   Cuando JS detecta que el hueco disponible (ancho - panel
   lateral, entre alto) es más estrecho que la proporción real
   de las imágenes, "cover" recortaría contenido por los lados.
   En ese caso se muestra la imagen completa sin recortar, con
   el color propio de cada imagen rellenando el margen sobrante.
   No afecta a portátiles anchos, donde cover sigue igual.
   ========================================================= */
body.fit-contain .hero,
body.fit-contain section {
    background-size: contain;
    background-repeat: no-repeat;
}

body.fit-contain .hero {
    background-color: #4f4154;
}
body.fit-contain #historia {
    background-color: #f3c78d;
}
body.fit-contain #contador {
    background-color: #5b2403;
}
body.fit-contain #gran {
    background-color: #ad8561;
}
body.fit-contain #lugar {
    background-color: var(--bg-lugar);
}
body.fit-contain #confirmar {
    background-color: #746758;
}
body.fit-contain #regalo {
    background-color: #edc495;
}
body.fit-contain #fotos {
    background-color: var(--bg-fotos);
}
/* Placeholder hasta que se añada img/Boda_9_Gracias.png */
body.fit-contain #gracias {
    background-color: var(--bg-gracias);
}


#countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

#countdown div {
    text-align: center;
    background: #ffcc99;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#countdown span {
    font-family: var(--font-texto);
    font-size: 2rem;
    font-weight: 700; /* Comic Neue Bold */
    color: var(--c-acento);
}

#countdown p {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

/* =========================================================
   MÓVIL / TABLET EN VERTICAL
   Formato tipo app: barra superior fija (bocadillo + título de
   la sección visible) y, debajo, cada sección fluye como un
   bloque normal: imagen a ancho completo + su contenido.
   En horizontal (incluido PC) no se aplica nada de este bloque.
   ========================================================= */
@media (orientation: portrait) {

    nav {
        width: 100%;
        height: var(--topbar-height);
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 16px;
    }

    /* Botón hamburguesa visible solo aquí. El área táctil se amplía a
       44x44px (mínimo recomendado por WCAG 2.5.5 / Apple HIG / Material
       Design para que el toque con el dedo sea fiable), pero el icono
       visual se mantiene con un ancho fijo similar al de antes (26px)
       para que no se vea desproporcionado; el margen negativo compensa
       el crecimiento de la caja para que el icono no se desplace del
       sitio donde estaba. */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin-left: -8px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .nav-toggle span {
        display: block;
        height: 3px;
        width: 24px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* Icono se transforma en "X" al abrir */
    .nav-toggle.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

@media (orientation: portrait) {   
    /* Título de la sección actual, centrado en el espacio junto al bocadillo */
    .topbar-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex: 1;
        min-width: 0; /* permite que el span de texto pueda encogerse y truncar */
        color: #fff;
        font-family: var(--font-titulo);
        font-weight: 700; /* Baloo 2 Bold */
        /* Tamaño variable según el ancho real del dispositivo: el
           título más largo ("✅ Confirma tu asistencia") no cabía a
           tamaño fijo en pantallas estrechas y se cortaba con
           puntos suspensivos. */
        font-size: clamp(0.95rem, 4.8vw, 1.4rem);
        padding-right: 36px; /* compensa el ancho del botón (44px con margin-left -8px) para centrar de verdad */
    }

    .topbar-title-icon {
        flex: 0 0 auto;
    }

    .topbar-title-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
    /* Menú desplegable, oculto hasta que se abre */
    .nav-links {
        position: absolute;
        top: var(--topbar-height);
        left: 0;
        height: 66.6667vh;
        width: 66.6667vw; /* 2/3 del ancho de la pantalla */
        max-height: 0;
        overflow: hidden;
        background: var(--c-panel);
        transition: max-height 0.3s ease, width 0.3s ease; /* Transición suave */
    }

    .nav-links.open {
        /* El menú desplegado ocupa siempre 2/3 de la altura de la
           pantalla (los 10 enlaces se reparten a partes iguales para
           llenar ese espacio, igual que ya se hace en el nav lateral
           de móvil apaisado). Si en algún caso extremo no cupiesen ni
           siquiera a 44px cada uno, hace scroll interno en vez de
           encogerlos por debajo del mínimo táctil. */
        width: 66.6667vw;
        height: 66.6667vh;
        max-height: 66.6667vh;
        overflow-y: auto;
    }

    .nav-links a {
        margin: 0;
        border-radius: 0;
        padding: 16px 24px;
        flex: 1 1 0;
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: clamp(1rem, 3.5vw, 2rem); /* Tamaño ajustado para ser equivalente al menú de portada */
        text-align: center;
    }

    body {
        padding-top: var(--topbar-height);
    }

    html {
        scroll-snap-type: y proximity; /* el scroll manual tiende a encajar en cada sección */
    }

    /* Cada sección pasa a ser un bloque normal: ya no cubre toda la
       pantalla ni recorta la imagen de fondo con "cover" */
    .hero,
    section {
        margin-left: 0;
        height: auto;
        min-height: calc(var(--vh100) - var(--topbar-height)); /* cada sección ocupa mínimo la pantalla completa */
        display: block;
        padding-bottom: 32px;
        scroll-margin-top: var(--topbar-height); /* al saltar a la sección, deja hueco para la barra fija */
        scroll-snap-align: start;
    }

    /* Anula el fondo recortado de cada sección (más específico que "section"
       porque las reglas originales usan selectores de id) y usa el color
       exacto del borde inferior de la imagen de esa sección (la que se ve
       justo encima, ya que en vertical las imágenes fluyen normales en vez
       de recortarse), para que el salto hacia el color de fondo sea el
       mínimo posible. En "El gran día" se toma el borde de la segunda
       imagen (el horario), que es la que queda más abajo. */
    .hero {
        background-image: none;
        background-color: #514456;
    }
    #historia {
        background-image: none;
        background-color: #f3c890;
    }
    #contador {
        background-image: none;
        background-color: #5d2503;
    }
    #gran {
        background-image: none;
        background-color: var(--bg-gran);
        height: calc(var(--vh100) - var(--topbar-height)); /* ocupa todo el hueco disponible bajo la barra superior */
        min-height: calc(var(--vh100) - var(--topbar-height));
        padding-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    #lugar {
        background-image: none;
        background-color: var(--bg-lugar);
    }
    #confirmar {
        background-image: none;
        background-color: #83c0e2;
    }
    #preguntas {
        background-image: none;
        background-color: var(--bg-preguntas);
        height: calc(var(--vh100) - var(--topbar-height)); /* ocupa todo el hueco disponible bajo la barra superior */
        min-height: calc(var(--vh100) - var(--topbar-height));
        padding-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    #regalo {
        background-image: none;
        background-color: var(--bg-regalo);
    }
    #fotos {
        background-image: none;
        background-color: var(--bg-fotos);
        height: calc(var(--vh100) - var(--topbar-height)); /* ocupa todo el hueco disponible bajo la barra superior */
        min-height: calc(var(--vh100) - var(--topbar-height));
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    /* Placeholder hasta que se añada img/Boda_9_Gracias.png */
    #gracias {
        background-image: none;
        background-color: var(--bg-gracias);
    }

    .preguntas-wrapper {
        display: none; /* en vertical se usa .preguntas-content-wrapper en su lugar */
    }

    .preguntas-content-wrapper {
        display: block;
        width: min(100%, calc((var(--vh100) - var(--topbar-height)) * 853 / 1844)); /* nunca más ancho de lo que permite el alto disponible, para que la sección quepa en una sola pantalla */
        aspect-ratio: 853 / 1844;
    }

    .fotos-wrapper {
        display: none; /* en vertical se usa .fotos-content-wrapper en su lugar */
    }

    .fotos-content-wrapper {
        display: block;
        width: min(100%, calc((var(--vh100) - var(--topbar-height)) * 173 / 368)); /* ancho compartido con la imagen decorativa de arriba, calculado para que ambas juntas quepan justo en el alto disponible sin recortarse */
        aspect-ratio: 1038 / 1516;
    }

    /* En vertical los botones de "Comparte tus fotos" comparten el mismo
       tamaño de letra que en horizontal (clamp con vw), pero al ser el
       viewport mucho más estrecho el texto queda minúsculo. Se amplía
       aquí solo para las versiones -mv, sin tocar las de horizontal. */
    .fotos-button-upload-mv span,
    .fotos-button-gallery-mv span {
        font-size: clamp(0.95rem, 4.2vw, 1.5rem);
    }

    /* Imagen de cada sección a ancho completo, sin recortar */
    .section-img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* En "El gran día", en vertical se usan las dos imágenes específicas
       para móvil en vez de la imagen única combinada (esa se queda solo
       para el fondo recortado de horizontal) */
    #gran .gran-original {
        display: none;
    }

    /* La imagen de "El gran día" cubre siempre el 100% del alto
       disponible de la sección (sin dejar ningún hueco/marco arriba
       ni abajo). Como su proporción no siempre coincide exactamente
       con la de la pantalla, se permite un recorte lateral mínimo
       (object-fit: cover) en vez de dejar espacio en blanco. */
    #gran .section-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* Imagen decorativa superior de "Comparte tus fotos" (1344x896):
       mismo ancho que .fotos-content-wrapper justo debajo, para que
       ambas queden alineadas y, sumadas, ocupen exactamente el alto
       disponible sin recortarse ni dejar hueco. */
    #fotos .section-img {
        width: min(100%, calc((var(--vh100) - var(--topbar-height)) * 173 / 368));
        height: auto;
    }

    .hero h1:empty {
        display: none;
    }

    /* Accesos rápidos de la portada: la misma imagen mantiene su
       proporción real (863x1823) para que los 9 botones queden
       alineados con simples porcentajes. */
    .home-content-wrapper {
        display: block;
        width: 100%;
        aspect-ratio: 863 / 1823;
    }

    /* Contenido bajo la imagen: ya no va superpuesto en posición absoluta,
       fluye normalmente debajo, y el contador reparte el alto sobrante
       de la sección (calculado descontando la imagen) entre los 4
       recuadros, para que ocupen justo lo que queda de pantalla */
    #contador {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: calc(var(--vh100) - var(--topbar-height));
        min-height: calc(var(--vh100) - var(--topbar-height));
        padding-bottom: 0;
        overflow: hidden;
    }

    /* space-evenly reparte el hueco sobrante en tramos idénticos, y el
       "gap" garantiza una separación mínima entre recuadros aunque en
       pantallas cortas no quede holgura que repartir (que es cuando
       antes llegaban a tocarse). */
    #countdown {
        width: 100%;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        padding: 10px 0;
        margin-top: 0;
        gap: 12px;
    }

    #countdown div {
        flex: 0 0 auto;
        width: min(30vw, 125px);
        aspect-ratio: 1 / 1;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #countdown span {
        font-size: clamp(1.4rem, 6.5vw, 2rem); /* tipografía a juego con el nuevo tamaño de recuadro */
    }

    #countdown p {
        font-size: clamp(0.7rem, 2.7vw, 0.9rem);
    }

    #lugar iframe {
        position: static;
        transform: none;
        display: block;
        width: 90%;
        height: 45vh;
        margin: 20px auto 0;
    }

    /* "Confirma tu asistencia" pasa a columna flex para que el
       formulario aproveche todo el hueco que quede libre bajo la
       imagen (antes se quedaba fijo a 45vh y sobraba mucho espacio
       vacío del color de fondo de la sección). */
    #confirmar {
        display: flex;
        flex-direction: column;
    }

    #confirmar iframe {
        position: static;
        transform: none;
        display: block;
        width: 90%;
        flex: 1 1 auto;
        min-height: 420px;
        margin: 20px auto 0;
    }

    #regalo p {
        position: static;
        transform: none;
        max-width: none;
        margin: 20px;
        width: auto;
    }

    #gracias p {
        position: static;
        transform: none;
        text-align: left;
        max-width: none;
        max-height: none;
        overflow: visible;
        margin: 20px;
        width: auto;
    }


}

/* =========================================================
   MÓVIL EN HORIZONTAL CON POCA ALTURA
   El panel lateral sigue siendo el mismo (no es el bloque de
   vertical), pero cuando la pantalla es muy baja de alto, los
   8 enlaces con su padding habitual no caben todos. Aquí se
   reparten a partes iguales dentro del alto disponible, así
   siempre caben todos sea cual sea el número de secciones o
   el alto exacto del dispositivo. No afecta a PC ni a tablet,
   que tienen alto de sobra.
   ========================================================= */
@media (orientation: landscape) and (max-height: 600px) {

    nav {
        padding-top: 0;
    }

    .nav-links {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .nav-links a {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0;
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 0;
    }
}

/* =========================================================
   CUENTA ATRÁS EN HORIZONTAL CON POCO ANCHO
   Las 4 cajas (con gap y padding fijos) se salían de la pantalla
   en móviles apaisados estrechos. Aquí se permite que envuelvan
   en dos filas y se reduce su tamaño para que quepan sin generar
   scroll horizontal. No afecta a tablet/PC (ancho de sobra).
   ========================================================= */
@media (orientation: landscape) and (max-width: 700px) {
    #countdown {
        gap: 10px;
        row-gap: 10px;
        flex-wrap: wrap;
        max-width: 94%;
    }

    #countdown div {
        padding: 8px 12px;
    }

    #countdown span {
        font-size: 1.3rem;
    }

    #countdown p {
        font-size: 0.75rem;
    }
}
/* =========================================================
   MAPA DE APARCAMIENTO EN PANTALLAS ESTRECHAS
   En pantallas anchas la imagen flota a la derecha y el texto la
   envuelve. Cuando el hueco es estrecho (móviles, tablets en
   vertical) esa columna de texto se queda demasiado apretada, así
   que aquí se apila a ancho completo encima del texto.
   ========================================================= */
@media (max-width: 820px) {
    .faq-answer .faq-media {
        float: none;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 12px;
    }
}