/* ============================================================
   Boda Alberto y Marta — boda.css
   Web pública: gate, one-page, formulario, gracias, 404.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* figure trae margin lateral de 40px por defecto del navegador */
figure { margin: 0; }

/* Visible para lectores de pantalla, oculto a la vista */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: 1.35;
  color: var(--negro);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.contenido {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Tipos base ---------- */

.titulo-display {
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.05;
  margin: 0;
}

.titulo-seccion {
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: var(--t-titulo);
  line-height: 1.1;
  text-align: center;
  margin: 0;
}

.label-seccion {
  font-family: var(--font-cuerpo);
  font-size: var(--t-label);
  text-align: center;
  margin: 0 0 var(--sp-2);
}

/* ---------- Botones (sistema Figma) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-alto);
  padding-inline: 22px;
  font-family: var(--font-cuerpo);
  font-size: var(--t-boton);
  line-height: 1;
  border: 1px solid var(--granate);
  background: transparent;
  color: var(--granate);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn img { height: 20px; width: auto; }

.btn:hover { background: var(--granate); color: var(--blanco); }
.btn:hover img { filter: brightness(0) invert(1); }

.btn--solid {
  background: var(--granate);
  color: var(--blanco);
}
.btn--solid img { filter: brightness(0) invert(1); }
.btn--solid:hover { background: #7c0f1d; }

.btn--blanco {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--granate);
}
.btn--blanco:hover { background: transparent; color: var(--blanco); }
.btn--blanco:hover img { filter: brightness(0) invert(1); }

/* ============================================================
   Parallax de portada
   La portada avanza al 70% de la velocidad del scroll (el JS le aplica
   un translate del 30%), mientras el contenido sube al 100% y la va
   cubriendo. Mismo comportamiento que la referencia.
   ============================================================ */

.portada {
  position: relative;
  z-index: 0;
  will-change: transform;
}

.contenido-scroll {
  position: relative;
  z-index: 1;
  background: var(--blanco);
}

/* Sin parallax para quien prefiere movimiento reducido: el contenido
   sigue superponiéndose, pero todo avanza a la misma velocidad. */
@media (prefers-reduced-motion: reduce) {
  .portada { will-change: auto; transform: none !important; }
}

/* ============================================================
   Header
   ============================================================ */

/* Desktop: composición proporcional exacta al frame de Figma (1440 × 171).
   El logo desborda 25px por abajo y cae sobre la foto — rasgo de la 'y'. */
.cabecera {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1440 / 171;
}

.cabecera .logo-pareja {
  position: absolute;
  left: 1.944%;    /* 28 / 1440 */
  top: 25.146%;    /* 43 / 171 */
  width: 60.169%;  /* 866.435 / 1440 */
}

.cabecera .fecha-boda {
  position: absolute;
  left: 64.834%;   /* 933.611 / 1440 */
  top: 46.199%;    /* 79 / 171 */
  margin: 0;
}

.logo-pareja {
  position: relative;
  aspect-ratio: 866.435 / 153.061;
  flex-shrink: 0;
}

.logo-pareja img { position: absolute; width: auto; height: auto; }
.logo-pareja .l-alberto { inset: 0 47.73% 32.23% 0; width: 52.27%; height: 67.77%; }
.logo-pareja .l-marta   { inset: 0.86% 0 33% 60.85%; width: 39.15%; height: 66.14%; }
.logo-pareja .l-y       { inset: 23.79% 39.29% 0.01% 45.51%; width: 15.2%; height: 76.2%; }
.logo-pareja .l-adorno  { inset: 9.22% 34.75% 44.93% 56.45%; width: 8.8%; height: 45.85%; }

.fecha-boda {
  font-family: var(--font-fecha);
  font-size: var(--t-fecha);
  letter-spacing: 0.4em;
  white-space: nowrap;
}

/* Header móvil */
.cabecera-movil { display: none; }

@media (max-width: 767px) {
  .cabecera { display: none; }

  /* Móvil: frame de Figma 390 × 267 */
  .cabecera-movil {
    display: block;
    position: relative;
    z-index: 1;
    aspect-ratio: 390 / 267;
  }

  .cabecera-movil .fila-superior {
    position: absolute;
    left: 4.872%;   /* 19 / 390 */
    top: 10.112%;   /* 27 / 267 */
    display: flex;
    align-items: center;
    gap: clamp(9px, 3.08vw, 16px);   /* 12px @390 */
  }

  .cabecera-movil .monograma {
    width: clamp(27px, 8.46vw, 44px);   /* 33px @390 */
    height: auto;
  }

  .cabecera-movil .la-boda {
    font-family: var(--font-fecha);
    font-size: clamp(13px, 3.85vw, 20px);   /* 15px @390 */
    letter-spacing: 0.4em;
    line-height: 1;
    white-space: nowrap;
  }

  .cabecera-movil .logo-pareja {
    position: absolute;
    left: 4.872%;    /* 19 / 390 */
    top: 64.419%;    /* 172 / 267 */
    width: 88.718%;  /* 346 / 390 */
  }

  .cabecera-movil .fecha-boda {
    position: absolute;
    left: 4.872%;
    top: 87.266%;    /* 233 / 267 */
    font-size: clamp(13px, 3.85vw, 20px);
    line-height: 1;
    margin: 0;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  /* La portada ocupa la ventana entera: alto disponible menos la cabecera
     (171/1440 = 11.875vw). En un 1440×778 da los 607px exactos del Figma. */
  height: calc(100svh - 11.875vw);
  min-height: 320px;
  overflow: hidden;
}

/* Desktop: recorte Figma → ancho completo, vertical 25,6%–81,5% de la foto */
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

@media (max-width: 767px) {
  /* Figma móvil (390 × 577). Mantener la proporción deja el encuadre exacto
     en cualquier móvil real; el tope solo actúa de 487px en adelante. */
  /* El Figma da 267 + 577 = 844 px, que es la pantalla de un iPhone 13
     *sin* navegador. Con las barras de Safari o Chrome la zona visible es
     menor y la parte de abajo de la foto quedaba cortada. Con 100svh el
     hero ocupa lo que de verdad queda libre, así que la portada siempre
     cabe entera sin cortar a nadie. */
  .hero {
    height: min(147.949vw, calc(100svh - 68.462vw));
    aspect-ratio: auto;
    max-height: 720px;
  }

  /* Encuadre de la referencia: alto completo de la foto, recorte lateral
     centrado en la pareja (Marta al 36%, Alberto al 62% del ancho). */
  .hero img {
    object-position: 62% center;
  }
}

/* ============================================================
   Nos casamos + intro
   ============================================================ */

.nos-casamos {
  padding: var(--sp-9) var(--gutter) var(--sp-8);
  text-align: center;
}

.nos-casamos h1 {
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: var(--t-titulo);
  margin: 0 0 var(--sp-6);
}

.nos-casamos .intro {
  max-width: 498px;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-4);
}

.nos-casamos .intro p { margin: 0; }
.nos-casamos .intro .destacado { font-weight: 700; }

/* ============================================================
   Cuenta atrás
   ============================================================ */

.cuenta-atras {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 68px);
  padding: var(--sp-6) var(--gutter) var(--sp-10);
}

.cuenta-atras .unidad { text-align: center; }

.cuenta-atras .valor {
  font-family: var(--font-titulos);
  font-size: var(--t-countdown);
  line-height: 1;
  color: var(--granate);
  font-variant-numeric: tabular-nums;
}

.cuenta-atras .etiqueta {
  font-size: var(--t-label);
  margin-top: var(--sp-2);
}

/* ============================================================
   Secciones de evento (ceremonia / celebración / bus)
   ============================================================ */

.evento {
  padding-bottom: var(--sp-10);
}

.evento .titulo-seccion { margin-bottom: var(--sp-6); }

.evento .foto {
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--sp-5);
}

.evento .foto img {
  width: 100%;
  object-fit: cover;
}

.evento .foto--panoramica img { height: clamp(180px, 30vw, 292px); }
.evento .foto--alta img { height: clamp(280px, 52vw, 501px); }

.evento .pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.evento .pie p { margin: 0; max-width: 498px; }
.evento .pie--ancho p { max-width: 842px; }

/* ============================================================
   Carrusel (Finca La Carreña)
   ============================================================ */

.carrusel {
  position: relative;
  margin-bottom: var(--sp-5);
}

.carrusel__ventana {
  position: relative;   /* las flechas se centran sobre la foto, no sobre el bloque */
  overflow: hidden;
}

.carrusel__pista {
  display: flex;
  transition: transform var(--dur-lenta) var(--ease);
}

.carrusel__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
}

/* Variante finca: mismo alto que tenía la foto fija */
.carrusel--finca .carrusel__slide img {
  width: 100%;
  height: clamp(280px, 52vw, 501px);
  object-fit: cover;
}

/* Flechas */
.carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--btn-alto);
  height: var(--btn-alto);
  padding: 0;
  background: var(--blanco);
  border: 1px solid var(--granate);
  color: var(--granate);
  opacity: 0.85;
  transition: background var(--dur) var(--ease),
              color      var(--dur) var(--ease),
              opacity    var(--dur) var(--ease);
}

.carrusel__flecha--ant { left: var(--sp-4); }
.carrusel__flecha--sig { right: var(--sp-4); }

.carrusel__flecha svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carrusel__flecha:hover {
  background: var(--granate);
  color: var(--blanco);
  opacity: 1;
}

.carrusel__flecha:focus-visible {
  outline: 2px solid var(--granate);
  outline-offset: 3px;
  opacity: 1;
}

/* Puntos indicadores */
.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.carrusel__punto {
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  background: var(--linea);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.carrusel__punto[aria-current="true"] { background: var(--granate); }

.carrusel__punto:focus-visible {
  outline: 2px solid var(--granate);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .carrusel__flecha { width: 36px; height: 36px; }
  .carrusel__flecha--ant { left: var(--sp-2); }
  .carrusel__flecha--sig { right: var(--sp-2); }
  .carrusel__flecha svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { transition: none; }
}

/* ============================================================
   Banda ¿Nos acompañas?
   ============================================================ */

.acompanas {
  background: var(--granate);
  color: var(--blanco);
  padding: var(--sp-8) var(--gutter);
}

.acompanas .interior {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.acompanas .titulo-display { color: var(--blanco); }

.acompanas .aviso {
  font-style: italic;
  font-size: var(--t-label);
  max-width: 354px;
  margin: var(--sp-3) 0 0;
}

/* ============================================================
   Dónde alojarse
   ============================================================ */

/* padding-block, no la forma abreviada: así no se pisa el
   padding-inline (el gutter lateral) que aporta .contenido */
.alojarse { padding-block: var(--sp-10); }

.alojarse .cabecera-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: var(--sp-7);
}

.alojarse .titulo-display { color: var(--negro); }

.alojarse .nota {
  max-width: 425px;
  margin: 0;
}

.alojarse .columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 448px);
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 900px) {
  .alojarse .columnas { grid-template-columns: 1fr; }
}

.alojamiento {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--linea);
}

.alojamiento:first-child { padding-top: 0; }

.alojamiento h3 {
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: var(--t-alojamiento);
  margin: 0 0 var(--sp-4);
}

.alojamiento .acciones {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.alojamiento .btn { min-width: 116px; }

.foto-hotel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 448 / 689;
  margin: 0;
}

.foto-hotel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fila del listado resaltada cuando su foto está en pantalla */
.alojamiento {
  transition: opacity var(--dur) var(--ease);
}

.alojamiento[aria-current="true"] h3 { color: var(--granate); }

.alojamiento h3 { transition: color var(--dur) var(--ease); }

.foto-hotel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--scrim));
  mix-blend-mode: multiply;
}

.foto-hotel figcaption {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  color: var(--blanco);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  z-index: 1;
}

@media (max-width: 900px) {
  .foto-hotel { aspect-ratio: 390 / 440; }
}

/* ============================================================
   Acuarela de cierre (a sangre, tras Contacto)
   ============================================================ */

/* Escritorio: franja apaisada, 430/1440 del Figma */
.acuarela {
  position: relative;
  width: 100%;
  height: 29.861vw;
  min-height: 150px;
  max-height: 430px;
  overflow: hidden;
}

.acuarela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 61%;   /* banda central del dibujo */
}

/* Móvil: el Figma usa un encuadre completamente distinto — vertical y
   cerrado sobre la buganvilla (ventana 390×723, recorte X 37,6–63,6%
   e Y 8,5–76,9% del dibujo). Se coloca a mano porque está bastante más
   ampliado de lo que daría un cover. */
@media (max-width: 767px) {
  .acuarela {
    height: auto;
    aspect-ratio: 390 / 723;
    min-height: 0;
    max-height: 820px;
  }

  .acuarela img {
    position: absolute;
    left: -144.1%;
    top: -12.47%;
    width: 383.57%;
    height: auto;
    max-width: none;
    object-fit: unset;
  }
}

/* ============================================================
   Contacto
   ============================================================ */

.contacto {
  border-top: 1px solid var(--linea);
  padding-block: var(--sp-8) var(--sp-10);
}

.contacto .titulo-display { margin-bottom: var(--sp-7); }

.contacto .columnas {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-7);
  flex-wrap: wrap;
}

.contacto .telefonos {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.contacto .tel {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.contacto .tel img { height: 25px; }
.contacto .tel a:hover { color: var(--granate); }

/* Retrato de infancia, en círculo, delante de cada contacto */
.contacto .tel .tel__retrato {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  margin-right: var(--sp-2);
}

/* El icono se ve a 25px pero el área que responde al dedo mide 45px.
   El margen negativo evita que la fila crezca de alto. */
.contacto .tel .tel__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-block: -10px;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .contacto .tel .tel__retrato {
    width: 48px;
    height: 48px;
  }

  /* Los 10px de relleno de cada icono ya hacen de separación visual,
     así que se reduce el hueco entre elementos para que quepa la fila. */
  .contacto .tel { gap: 2px; }

  /* El nombre y el número se adaptan al ancho del móvil: en un iPhone SE
     no caben a 20px y partirían en dos líneas, dejando las filas desiguales. */
  .contacto .tel > a:not(.tel__icono) {
    font-size: clamp(15px, 4.4vw, 19px);
    line-height: 1.25;
  }
}

.contacto .regalo {
  max-width: 565px;
  display: grid;
  gap: var(--sp-4);
}

.contacto .regalo p { margin: 0; }
.contacto .regalo .iban { font-weight: 700; }

/* En móvil el Figma centra este bloque y saca el IBAN a su propia línea.
   En escritorio sigue alineado a la izquierda y con el IBAN seguido. */
@media (max-width: 767px) {
  .contacto .regalo { text-align: center; }

  .contacto .regalo .iban {
    display: block;
    margin-top: var(--sp-4);
  }
}

/* ============================================================
   Puerta de acceso (Figma "Desktop - 3" 1440×778 / "iPhone 2" 390×844)
   Composición proporcional: los porcentajes se resuelven contra el
   ancho del lienzo, que se capa a 1440 para no crecer sin control.
   ============================================================ */

.acceso {
  display: flex;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  background: var(--blanco);
}

.acceso-lienzo {
  position: relative;
  width: 100%;
  max-width: 1440px;
}

/* Acuarela de fondo — se recorta por abajo con el alto de la ventana */
.acceso-fondo {
  position: absolute;
  z-index: 0;
  left: 6.25%;                    /* 90 / 1440 */
  top: min(10.556vw, 152px);      /* 152 / 1440 */
  width: 87.222%;                 /* 1256 / 1440 */
}

.acceso-fondo img {
  width: 100%;
  height: auto;
}

.acceso-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4.653%;            /* 67 / 1440 */
}

.acceso-fecha {
  font-family: var(--font-fecha);
  font-size: 15px;
  letter-spacing: 0.4em;
  white-space: nowrap;
  line-height: 1.2;
}

.acceso-contenido .logo-pareja {
  width: 60.169%;                 /* 866,4 / 1440 */
  margin-top: 1.458%;             /* 21 / 1440 */
}

/* Tarjeta blanca con sombra */
/* Alto fijo, no proporcional: el contenido (campo 48px, botón 40px) tampoco
   escala, así que un alto en px mantiene mejor la proporción del Figma. */
.acceso-tarjeta {
  width: 39.028%;                 /* 562 / 1440 */
  min-height: 170px;
  margin-top: 2.218%;             /* 32 / 1440 */
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: var(--blanco);
  box-shadow: 0 4px 44px rgba(0, 0, 0, 0.25);
}

.acceso-form {
  width: 100%;
  max-width: 320px;
  display: grid;
  gap: var(--sp-3);
}

.acceso-saludo {
  margin: 0;
  font-family: var(--font-titulos);
  font-size: 1.625rem;
  line-height: 1.1;
  text-align: center;
  color: var(--negro);
}

.acceso-campo {
  position: relative;
  width: 100%;
}

.acceso-input {
  height: 48px;
  width: 100%;
  border: 1px solid var(--negro);
  /* El relleno derecho deja sitio al ojo; el izquierdo lo iguala
     para que el texto siga centrado de verdad. */
  padding-inline: 48px;
  font-family: var(--font-cuerpo);
  font-size: var(--t-cuerpo);
  text-align: center;
  background: var(--blanco);
}

.acceso-input:focus {
  outline: none;
  border-color: var(--granate);
}

/* Botón del ojo: 44px de área táctil dentro del propio campo */
.acceso-ojo {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #8a8a8a;
  transition: color var(--dur) var(--ease);
}

.acceso-ojo:hover,
.acceso-ojo--visible { color: var(--granate); }

.acceso-ojo:focus-visible {
  outline: 2px solid var(--granate);
  outline-offset: -2px;
}

.acceso-ojo svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La raya cruzada solo aparece cuando la clave está oculta.
   El opacity:1 explícito es necesario: sin un valor de partida declarado,
   al quitar la clase la transición no sabe a dónde volver y se queda en 0. */
.acceso-ojo .ojo-tachado {
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
}

.acceso-ojo--visible .ojo-tachado { opacity: 0; }

.acceso-boton { width: 100%; }

.acceso-error {
  margin: 0;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  color: var(--granate);
}

@media (max-width: 767px) {
  .acceso-fondo {
    left: -55.897%;               /* -218 / 390 */
    top: 94.872vw;                /*  370 / 390 */
    width: 215.897%;              /*  842 / 390 */
  }

  .acceso-contenido { padding-top: 18.718%; }        /* 73 / 390 */

  .acceso-contenido .logo-pareja {
    width: 88.718%;               /* 346 / 390 */
    margin-top: 7.179%;           /*  28 / 390 */
  }

  .acceso-tarjeta {
    width: 69.744%;               /* 272 / 390 */
    min-height: 354px;
    margin-top: 7.179%;           /*  28 / 390 */
  }
}

/* ============================================================
   Gate (login de los novios)
   ============================================================ */

.gate-cuerpo {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
}

.gate-centro {
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--gutter);
}

.gate-caja {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

.gate-caja .logo-pareja {
  width: min(80vw, 480px);
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}

.gate-caja .fecha-boda {
  display: block;
  margin: 0 0 var(--sp-8);
}

.gate-caja .invitacion {
  font-style: italic;
  margin: 0 0 var(--sp-5);
}

.gate-form {
  display: grid;
  gap: var(--sp-4);
  max-width: 360px;
  margin-inline: auto;
}

.gate-form input {
  height: 48px;
  border: 1px solid var(--negro);
  padding-inline: var(--sp-4);
  font-family: var(--font-cuerpo);
  font-size: var(--t-cuerpo);
  text-align: center;
  background: var(--blanco);
}

.gate-form input:focus {
  outline: none;
  border-color: var(--granate);
}

.gate-form .btn { width: 100%; }

.gate-error {
  color: var(--granate);
  font-style: italic;
  font-size: 1rem;
  min-height: 1.3em;
  margin: 0;
}

.gate-franja {
  background: var(--granate);
  height: 14px;
}

/* ============================================================
   Formulario RSVP
   ============================================================ */

.form-pagina {
  max-width: 640px;
  margin-inline: auto;
  padding: var(--sp-6) var(--gutter) var(--sp-10);
}

.form-pagina .volver {
  font-size: 1rem;
  color: var(--granate);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-7);
}

.form-pagina .volver:hover { text-decoration: underline; }

.form-pagina .label-seccion,
.form-pagina .titulo-seccion { text-align: left; }

.form-pagina .titulo-seccion { margin-bottom: var(--sp-3); }

.form-pagina .plazo {
  font-style: italic;
  margin: 0 0 var(--sp-7);
}

.form-rsvp { display: grid; gap: var(--sp-6); }

.campo { display: grid; gap: var(--sp-3); }

.campo > label,
.campo > .pregunta {
  font-family: var(--font-titulos);
  font-size: 1.375rem;
  line-height: 1.2;
}

.campo input[type="text"] {
  height: 48px;
  border: 1px solid var(--negro);
  padding-inline: var(--sp-4);
  font-family: var(--font-cuerpo);
  font-size: var(--t-cuerpo);
  background: var(--blanco);
}

.campo input[type="text"]:focus {
  outline: none;
  border-color: var(--granate);
}

.campo .ayuda {
  font-size: 1rem;
  font-style: italic;
  color: #555;
  margin: 0;
}

/* Opciones tipo botón (radio/checkbox) */
.opciones {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.opcion input { position: absolute; opacity: 0; pointer-events: none; }

.opcion span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-alto);
  padding-inline: 22px;
  border: 1px solid var(--granate);
  color: var(--granate);
  font-size: var(--t-boton);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.opcion:hover span { background: #f6e9eb; }

.opcion input:checked + span {
  background: var(--granate);
  color: var(--blanco);
}

.opcion input:focus-visible + span {
  outline: 2px solid var(--negro);
  outline-offset: 2px;
}

.subcampo {
  border-left: none;
  padding: var(--sp-4);
  background: #faf6f3;
  display: grid;
  gap: var(--sp-3);
}

.oculto { display: none !important; }

/* Nota de datos: discreta, al pie del formulario */
.privacidad__nota {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #777;
  max-width: 42ch;
}

.form-rsvp .enviar { justify-self: start; min-width: 208px; }

.flash {
  background: #f6e9eb;
  color: var(--granate);
  padding: var(--sp-4);
  font-style: italic;
  margin: 0 0 var(--sp-5);
}

/* ============================================================
   Gracias / 404
   ============================================================ */

.pagina-simple {
  min-height: 70svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-8) var(--gutter);
}

.pagina-simple .titulo-display { margin-bottom: var(--sp-4); }
.pagina-simple p { max-width: 460px; margin: 0 0 var(--sp-6); }

/* ============================================================
   Reveals
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-lenta) var(--ease), transform var(--dur-lenta) var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}