/* ==========================================================================
   Maqueta de identidad visual — Clara & Diego
   Reconstruida a partir de Invitación.html (export pdf2htmlEX) del usuario.
   Colores y tamaños tomados del main.css original; los tamaños del PDF van
   multiplicados por 1,75 (el PDF estaba a escala 0,25 sobre 808 px de ancho).
   ========================================================================== */

@font-face {
  font-family: "Manuscrita";
  src: url("../fuentes/segoe-script.dcc3e1b0e1fc.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manuscrita";
  src: url("../fuentes/segoe-script.dcc3e1b0e1fc.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Decisión del 2026-08-03: fuera Cambria. Todo lo que no sea manuscrito va en
   Montserrat, incluidas las cursivas (Montserrat Itálica). */
@font-face {
  font-family: "Geometrica";
  src: url("../fuentes/montserrat-300.2e43f755238b.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geometrica";
  src: url("../fuentes/montserrat-300i.087813ac8c21.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geometrica";
  src: url("../fuentes/montserrat-400.ed59dbf0c40d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geometrica";
  src: url("../fuentes/montserrat-400i.a70747d2e41b.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geometrica";
  src: url("../fuentes/montserrat-500.5ebf46085bf5.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --crema: #f3ece3;
  --azul-banda: #57668d;
  --azul-titular: #2e4b7c;
  --azul-nombres: #1b1a46;
  --azul-contador: #45599a;
  --dorado: #b29a6b;
  --dorado-cal: #c0a576;
  --dorado-cab: #9a8c6e;
  --topo: #9b8e84;
  --topo-osc: #8a7e72;
  --tinta: #33383f;
  --sobre-label: #d6dbe6;
  --sobre-ph: #a9b4cc;
  --banco-label: #3e5488;
  --banco-valor: #33465f;
  --regalo-texto: #2e3a5a;
  --claro: #eaecf3;

  --columna: 620px;
  --ancho: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  font-family: "Geometrica", Montserrat, system-ui, sans-serif;
  font-weight: 300;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* --- papel rugoso -------------------------------------------------------
   `grano.jpg` es la textura del papel de ejemplo pasada a gris y centrada en
   128, en mosaico de espejo (los bordes casan, no hay costuras). Al mezclarla
   en `soft-light` el gris medio no altera el color de debajo y solo modula las
   fibras, así que la MISMA textura vale sobre la crema y sobre el azul.
   Se muestra a 256 px (la mitad del fichero) para que en pantallas retina
   quede un píxel de imagen por píxel de pantalla y el grano no se emborrone. */
/* --- papel rugoso: una sola capa, una sola perilla ----------------------
   La textura va SIEMPRE en una capa `::before` con `mix-blend-mode`, nunca
   mezclada en el fondo, para poder graduarla con `opacity` superficie por
   superficie. Hace falta porque `soft-light` modula en proporción a b*(1-b):
   sobre el crema (b=0,95) eso vale 0,045, pero sobre el azul (b=0,40) vale
   0,24 — cinco veces más. Con una sola intensidad, o el crema no se ve o el
   azul parece cuero repujado.
   El mosaico se muestra a 190 px (el fichero mide 512) para que el grano
   quede fino y no cante como un gotelé. */
.banda,
.portada,
.bienvenida {
  position: relative;
}
.banda::before,
.portada::before,
.bienvenida::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/grano.7187eb34d88b.jpg");
  background-repeat: repeat;
  background-size: 190px 190px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.banda--crema::before,
.portada::before { opacity: 0.4; }
.banda--azul::before { opacity: 0.1; }
.bienvenida::before { opacity: 0.18; }

/* el contenido tiene que posicionarse o la capa de textura lo taparía */
.banda > *,
.bienvenida > * { position: relative; }

.banda { width: 100%; }
.banda--crema { background-color: var(--crema); }
.banda--azul { background-color: var(--azul-banda); }

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.columna {
  max-width: var(--columna);
  margin: 0 auto;
  text-align: center;
}

/* --- tipos ------------------------------------------------------------- */

.manuscrita { font-family: "Manuscrita", "Segoe Script", cursive; font-weight: 400; }
.geometrica { font-family: "Geometrica", Montserrat, sans-serif; }

.titular-seccion {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(34px, 7vw, 49px);
  line-height: 1.25;
  color: var(--azul-titular);
  margin: 0;
  font-weight: 400;
}
.titular-seccion--claro { color: #fff; }

.subtitulo-italico {
  font-style: italic;
  font-size: clamp(18px, 3.6vw, 25px);
  line-height: 1.4;
  margin: 14px 0 0;
}

/* --- hero -------------------------------------------------------------- */

/* Portada: ocupa exactamente una pantalla y no deja asomar nada de lo que
   viene después. svh (no vh) para que la barra del navegador móvil no empuje
   la tarjeta hacia dentro. Las posiciones salen del diseño `newhero`, que
   mide 540 x 960 (9:16), y van en % para que respiren en pantallas más altas. */
/* Flex y no grid a propósito: en WebKit una caja absoluta hija de un grid se
   posiciona contra el área de la rejilla (aquí, el lienzo), no contra la
   sección. Por eso en el iPhone la flecha aparecía pegada a la fecha en vez de
   abajo del todo. Con flex el bloque contenedor es siempre la caja de relleno. */
/* La franja de abajo está reservada para la flecha. Sin ella el collage 9:16
   casi llena la pantalla del móvil, la fecha cae al 87% de la altura y la
   flecha no tiene dónde ponerse: quedaba pegada a la fecha hiciera lo que
   hiciera. Ahora el lienzo se encoge a lo que sobra y el hueco está garantizado.
   Flex y no grid: en WebKit una caja absoluta hija de un grid se posiciona
   contra el área de la rejilla, no contra la sección. */
/* La flecha ya NO vive aquí abajo, sino dentro del collage (ver
   .portada__seguir). Eso quita la pelea de raíz: antes había que reservarle
   una franja, y para que cupiera el collage se encogía o se empujaba hacia
   arriba — y lo que se comía era justo la foto de arriba a la izquierda. */
/* `container-type` también aquí, no sólo en el lienzo: la fecha salió del
   lienzo y su `font-size` va en `cqw`. Como el lienzo mide el 100% del ancho
   de la portada, el contenedor de consulta pasa a ser la portada y el cuerpo
   de letra sale idéntico (21 px medidos antes y después). Sin esto, los `cqw`
   se resolverían contra el viewport y la fecha cambiaría de tamaño. */
.portada {
  position: relative;
  container-type: inline-size;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--crema);
}
/* El lienzo mantiene el 9:16 del diseño y se centra en el espacio libre: si
   estirara para llenar la pantalla, los elementos se separarían y el collage
   perdería el encaje. */
/* Ancho SIEMPRE completo. Antes se calculaba desde la altura disponible y en
   cuanto `svh` apretaba (la barra de Safari cuenta) mandaba la altura: el
   collage se encogía y quedaba metido hacia dentro por los dos lados, que es
   lo que se veía como «pequeño, alejado y descentrado». Ahora, si no cabe de
   alto, lo que sobra se recorta arriba y abajo — que es margen vacío — en vez
   de estrujar la composición.
   `scale` amplía el conjunto sin tocar ninguna proporción interna: todo va en
   % del lienzo, así que un solo número lo acerca entero. */
.portada__lienzo {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 9 / 16;
  width: 100%;
  flex: 0 0 auto;
  margin: 0;
  /* origen arriba: el aumento crece hacia abajo, nunca hacia arriba, así el
     5% extra no se come la foto superior izquierda */
  transform-origin: top center;
  transform: scale(1.05);
}

.portada__sol {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.portada__sol--1 { left: 72.1%; top: 19.1%; width: 26.5%; }
.portada__sol--2 { left: 25.3%; top: 75%;   width: 21.8%; }

/* Una tira de fotos de verdad: un solo marco blanco, con las dos fotos
   separadas por un hueco del mismo grosor. Antes eran dos fotos sueltas
   solapadas y el empalme cantaba. */
/* Ojo con los porcentajes: el padding de la tira se resuelve contra el ancho
   del lienzo y el margen de las fotos contra el ancho de la tira. Para que el
   marco y la separación salgan del MISMO grosor (~3,3% del ancho de la tira,
   como en el diseño) hay que usar dos cifras distintas:
     padding  = 3,33% x 30,5% (ancho de la tira) = 1,01% del lienzo
     margen   = 3,33% / (1 - 2 x 3,33%)          = 3,57% de la tira          */
.tira {
  position: absolute;
  background: #fff;
  padding: 1.01%;
  box-shadow: 0 3px 12px rgba(46, 58, 90, 0.18);
}
/* Las dos fotos comparten proporción por contrato: da igual lo que midan los
   originales, la tira sale siempre simétrica y el recorte lo hace el navegador. */
.tira img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  /* las cuatro del diseño están en blanco y negro; así los originales en
     color que vayan llegando entran sin retocar el fichero */
  filter: grayscale(1);
}
.tira img + img { margin-top: 3.57%; }

.tira--izq {
  left: 23.8%; top: 20.2%; width: 30.6%;
  transform: translate(-50%, -50%) rotate(-12.6deg);
}
.tira--der {
  left: 78.5%; top: 65.6%; width: 29.8%;
  transform: translate(-50%, -50%) rotate(12.9deg);
}

.portada__nombres {
  position: absolute;
  left: 36%;
  top: 44.3%;
  text-align: center;
}
.portada__nombre {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(34px, 8.15cqw, 58px);
  line-height: 0.84;
  color: var(--azul-nombres);
  margin: 0;
  font-weight: 400;
}
/* Anclada al PIE de la portada, no al lienzo. Con `top: 91.2%` dentro del
   lienzo su sitio dependía del alto del lienzo, que sólo depende del ancho de
   pantalla (9:16 x 1,05): la fecha únicamente cabía si alto >= 1,81 x ancho.
   En un iPhone de 393 pt eso son 713 px, y Safari con la barra desplegada da
   menos — la fecha se iba por debajo del borde visible. Desde abajo se ve
   siempre; lo que cede es la distancia al collage, que ya no es fija. */
.portada__fecha {
  position: absolute;
  left: 23.6%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(21px, 5.19cqw, 37px);
  color: var(--azul-nombres);
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
}

/* La flecha va DENTRO del lienzo y en %, como el resto de la composición: se
   coloca siempre a la misma distancia de la fecha, escala con el collage y no
   le disputa el sitio. Antes vivía pegada al borde de la pantalla y había que
   robarle alto al hero para hacerle hueco.
   `rotate` es propiedad aparte de `transform`, así que el giro se mantiene
   mientras la animación mueve la posición. */
/* Anclada al pie de la pantalla. Y sólo aparece si de verdad cabe: el collage
   es 9:16 y ampliado ocupa ~1,87 veces el ancho de alto, así que en pantallas
   proporcionalmente bajas no queda sitio libre bajo la fecha. Antes que
   encoger el hero o comerle la foto de arriba, la flecha se retira. */
.portada__seguir {
  display: none;
  position: absolute;
  left: 50%;
  /* la forma girada sobresale ~12 px por debajo del centro de su caja */
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-left: 2px solid var(--azul-nombres);
  border-bottom: 2px solid var(--azul-nombres);
  opacity: 0.5;
  rotate: -45deg;
  animation: latir 2.2s ease-in-out infinite;
}
/* 0,53 es el punto en que la pantalla deja hueco bajo la fecha */
@media (max-aspect-ratio: 53/100) {
  .portada__seguir { display: block; }
}
/* Pantallas proporcionalmente bajas: el 5% de aumento haría que la fecha se
   saliera por abajo, así que ahí se amplía un 2%. */
@media (min-aspect-ratio: 53/100) {
  .portada__lienzo { transform: scale(1.02); }
}
@keyframes latir {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.45; }
  50%      { transform: translateX(-50%) translateY(6px); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .portada__seguir { animation: none; }
}

/* --- la puerta: tarjeta de bienvenida + caja del nombre ---------------- */

.puerta {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}

/* --- bienvenida -------------------------------------------------------- */

.bienvenida {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 34px 40px 30px;
  background-color: #d4d6db;
  text-align: center;
}
.bienvenida__texto {
  font-family: "Geometrica", Montserrat, sans-serif;
  font-size: clamp(15px, 2.9vw, 18px);
  line-height: 1.7;
  color: var(--azul-titular);
  margin: 0;
}
.bienvenida__firma {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(24px, 5vw, 31px);
  color: var(--azul-titular);
  margin: 18px auto 0;
  padding-top: 12px;
  border-top: 1px solid var(--azul-nombres);
  max-width: 330px;
}
.bienvenida__peineta {
  position: absolute;
  right: -46px;
  bottom: -22px;
  width: 74px;
}

/* --- contador ---------------------------------------------------------- */

.contador { padding: 74px 0 0; text-align: center; }
.contador__titulo {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 49px);
  color: var(--azul-titular);
  margin: 0 0 22px;
}
.contador__rejilla {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 42px);
}
.contador__valor {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(28px, 6vw, 35px);
  color: var(--azul-contador);
  line-height: 1.1;
}
.contador__etiqueta {
  font-size: clamp(12px, 2.4vw, 16px);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--dorado);
  margin-top: 6px;
}
.guirnalda { display: block; margin: 34px auto 0; width: clamp(150px, 30vw, 200px); }

/* --- calendario -------------------------------------------------------- */

.calendario { padding: 26px 0 0; text-align: center; }
.calendario__mes {
  font-size: clamp(22px, 4.5vw, 28px);
  color: var(--azul-titular);
  margin: 0 0 18px;
}
.calendario__rejilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 4px;
  max-width: 380px;
  margin: 0 auto;
  font-size: clamp(14px, 2.8vw, 19px);
}
.calendario__cabecera { color: var(--dorado-cab); }
.calendario__dia {
  color: var(--dorado-cal);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendario__dia--boda {
  background: var(--azul-titular);
  color: #fff;
  border-radius: 50%;
}

/* --- dónde nos casamos ------------------------------------------------- */

.lugares { padding: 96px 0 90px; text-align: center; }
.basilica { display: block; margin: 22px auto 34px; width: clamp(230px, 52vw, 400px); }

.lugar + .lugar { margin-top: 52px; }
.lugar__rotulo {
  font-size: clamp(13px, 2.6vw, 18px);
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: var(--azul-banda);
  margin: 0 0 12px;
}
.lugar__nombre {
  font-size: clamp(24px, 5vw, 35px);
  color: var(--tinta);
  margin: 0;
  font-weight: 400;
}
.lugar__direccion {
  font-size: clamp(14px, 2.8vw, 18px);
  color: var(--topo);
  margin: 10px 0 20px;
}
.boton-mapa {
  display: inline-block;
  border: 1px solid var(--azul-banda);
  color: var(--azul-banda);
  text-decoration: none;
  font-size: clamp(13px, 2.6vw, 19px);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  padding: 13px 30px;
  transition: background 0.2s, color 0.2s;
}
.boton-mapa:hover { background: var(--azul-banda); color: var(--crema); }

/* La misma caja del nombre, pero sobre crema: es la puerta, no una sección
   más. Hereda los tamaños de .campo/.boton-enviar cambiando solo el color. */
.puerta__form { margin: 40px auto 0; max-width: 430px; text-align: left; }
.puerta__form .campo__etiqueta { color: var(--azul-banda); }
.puerta__form .campo__entrada {
  color: var(--azul-nombres);
  border-bottom-color: var(--azul-banda);
}
.puerta__form .campo__entrada::placeholder { color: var(--topo); }
.puerta__form .campo__entrada:focus { border-bottom-color: var(--azul-titular); }
.puerta__form .boton-enviar {
  border-color: var(--azul-banda);
  background: var(--azul-banda);
  color: #fff;
}
.puerta__form .boton-enviar:hover { background: var(--azul-titular); border-color: var(--azul-titular); }
.puerta__form .error { color: #8c2f2f; }

/* --- ¿Asistirás? (banda azul) ------------------------------------------ */

.asistencia { padding: 74px 0 78px; text-align: center; color: #fff; }
.asistencia .subtitulo-italico { color: var(--claro); }

.formulario { max-width: 430px; margin: 40px auto 0; text-align: left; }

.campo + .campo { margin-top: 28px; }
/* Sin text-indent: estas etiquetas van alineadas a la izquierda sobre su campo,
   y el sangrado que compensa el espaciado en los rótulos centrados aquí las
   desplazaba unos píxeles respecto al texto del campo. */
.campo__etiqueta {
  display: block;
  font-size: clamp(12px, 2.4vw, 18px);
  letter-spacing: 0.42em;
  color: var(--sobre-label);
  margin-bottom: 10px;
}
/* Una pregunta entera no aguanta el espaciado de una etiqueta de dos palabras:
   se aprieta y se le da interlínea para que no parezca desmontada. */
.campo__etiqueta--larga {
  letter-spacing: 0.14em;
  line-height: 1.7;
}
/* aclaración pequeña bajo una pregunta */
.campo__nota {
  font-style: italic;
  font-size: clamp(12px, 2.5vw, 15px);
  line-height: 1.5;
  color: var(--sobre-ph);
  margin: -2px 0 12px;
}
.campo__entrada {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sobre-ph);
  color: #fff;
  font-family: inherit;
  /* nunca por debajo de 16px: iOS hace zoom automático al enfocar un campo
     con letra más pequeña y descuadra toda la página */
  font-size: clamp(16px, 3vw, 19px);
  padding: 10px 0 12px;
  outline: none;
}
.campo__entrada::placeholder { color: var(--sobre-ph); }
.campo__entrada:focus { border-bottom-color: #fff; }

.opciones { display: flex; gap: 14px; }
.opcion {
  flex: 1;
  border: 1px solid var(--sobre-ph);
  padding: 13px 8px;
  text-align: center;
  font-size: clamp(14px, 2.8vw, 21px);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion:hover { background: rgba(255, 255, 255, 0.09); }
.opcion:has(input:checked) { background: rgba(255, 255, 255, 0.2); border-color: #fff; }

.boton-enviar {
  display: block;
  width: 100%;
  margin-top: 34px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-family: inherit;
  font-size: clamp(14px, 2.8vw, 21px);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  padding: 16px 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.boton-enviar:hover { background: #fff; color: var(--azul-banda); }

.error {
  color: #ffd9d9;
  font-size: clamp(14px, 2.8vw, 18px);
  margin: 10px 0 0;
}

/* tarjeta por persona (flujo real: confirmación del grupo) */
.persona {
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 22px 22px 24px;
  margin-top: 22px;
}
/* dentro de la tarjeta hay menos ancho: la etiqueta se aprieta un poco para
   no partirse en dos líneas */
.persona .campo__etiqueta {
  font-size: clamp(11px, 2.2vw, 15px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}
.persona__nombre {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(22px, 4.6vw, 31px);
  color: #fff;
  margin: 0 0 16px;
  text-align: center;
}
.aviso-guardado {
  border: 1px solid var(--claro);
  color: var(--claro);
  padding: 14px 18px;
  margin: 0 auto 26px;
  max-width: 430px;
  font-size: clamp(14px, 2.8vw, 19px);
}

/* buscador de canción */
.resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding: 12px 0;
  font-size: clamp(14px, 2.6vw, 18px);
  color: #fff;
}
/* El título ocupa lo que sobra y parte de línea si hace falta; el botón se
   queda siempre a la derecha. Sin el min-width:0 el flex no deja encoger el
   texto y unas filas se parten y otras no. */
.resultado__titulo { flex: 1 1 auto; min-width: 0; }
.resultado__artista { color: var(--sobre-ph); font-style: italic; }
.resultado__boton {
  border: 1px solid var(--sobre-ph);
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.resultado__boton:hover { background: rgba(255, 255, 255, 0.16); }

/* --- El gran día ------------------------------------------------------- */

.programa { padding: 92px 0 96px; text-align: center; }
.programa__linea { max-width: 500px; margin: 40px auto 0; }

/* Todo en una columna centrada, en el orden del diseño:
   hora · icono · título · descripción, y un tramo de línea entre hitos. */
.hito { text-align: center; }
.hito__hora {
  font-size: clamp(14px, 3vw, 19px);
  color: var(--dorado);
  margin: 0;
}
/* Los cuatro iconos no miden lo mismo en el diseño (el plato es ancho, la copa
   alta). Forzarlos al mismo ancho los descompensaba, así que se escalan todos
   por el MISMO factor sobre su tamaño original: cada uno lleva el suyo en
   `--ancho` y aquí solo se decide la escala. */
.programa__linea { --escala-icono: 0.46; }
.hito__icono {
  display: block;
  width: calc(var(--ancho) * var(--escala-icono));
  margin: 12px auto 10px;
}
.hito__titulo {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(28px, 6.6vw, 40px);
  line-height: 1.1;
  color: var(--azul-titular);
  margin: 0 0 8px;
  font-weight: 400;
}
.hito__detalle {
  font-style: italic;
  font-size: clamp(14px, 3vw, 19px);
  color: var(--topo-osc);
  margin: 0;
}
.union {
  width: 1px;
  height: clamp(30px, 7vw, 46px);
  margin: 22px auto;
  background: var(--topo);
  opacity: 0.55;
}

/* --- servicio de autobuses (banda azul) --------------------------------- */

.buses { padding: 74px 0 78px; text-align: center; color: #fff; }
.buses .subtitulo-italico { color: var(--claro); max-width: 420px; margin-inline: auto; }
.rutas { margin-top: 40px; }

.parada__sitio {
  font-size: clamp(13px, 2.8vw, 18px);
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: #fff;
  margin: 0 0 6px;
}
.parada__detalle {
  font-size: clamp(13px, 2.7vw, 16px);
  letter-spacing: 0.08em;
  color: #bfbfbf;
  margin: 0;
}
.ruta__flecha {
  display: block;
  width: 11px;
  height: 34px;
  margin: 16px auto;
  opacity: 0.85;
}
.ruta__hora {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(22px, 5vw, 30px);
  color: #fff;
  margin: 22px 0 0;
}
/* la guirnalda es azul: se pasa a blanco sin duplicar el fichero */
.rutas__separador {
  display: block;
  width: clamp(140px, 30vw, 190px);
  margin: 42px auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* --- hoteles (ahora sobre crema) ---------------------------------------- */

.hoteles { padding: 74px 0 70px; text-align: center; }
.hoteles__carrusel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-top: 30px;
  scrollbar-width: none;
}
.hoteles__carrusel::-webkit-scrollbar { display: none; }

/* una tarjeta por pantalla: el carrusel se intuye por los puntitos */
.hotel {
  scroll-snap-align: center;
  flex: 0 0 100%;
  aspect-ratio: 322 / 258;
  max-width: 340px;
  margin: 0 auto;
  /* el marco tiene el interior transparente, así que se ve el papel de la
     sección a través: no parece un parche pegado encima */
  background: url("../img/marco-hotel.83abdbe63e3e.png") center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 17% 18%;
  text-align: center;
}
.hotel__nombre {
  font-size: clamp(14px, 3.4vw, 17px);
  letter-spacing: 0.13em;
  color: var(--tinta);
  margin: 0 0 8px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.35;
}
.hotel__cerca {
  font-size: clamp(11px, 2.7vw, 13px);
  color: var(--topo);
  margin: 0 0 12px;
}
.hotel__enlace { font-size: clamp(11px, 2.7vw, 13px); color: var(--azul-banda); text-decoration: none; }
.hotel__enlace:hover { text-decoration: underline; }

/* Al verse una sola tarjeta, los puntitos son la única pista de que hay más:
   además de indicar, se pueden tocar. Zona de toque de 24 px con el punto
   dibujado dentro, para que sea cómoda sin engordar el diseño. */
.puntos { display: flex; gap: 4px; justify-content: center; margin-top: 14px; }
.punto {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.punto::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(87, 102, 141, 0.32);
  transition: background 0.2s;
}
.punto--activo::before { background: var(--azul-titular); }

/* --- El mejor regalo --------------------------------------------------- */

/* El regalo pasa a banda azul en el diseño final: titular, texto y datos en
   blanco, y las gaviotas se invierten a blanco por filtro. */
.regalo { padding: 86px 0 84px; text-align: center; }
.regalo__titulo {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(34px, 7vw, 49px);
  color: #fff;
  margin: 0;
  font-weight: 400;
  display: inline-block;
  position: relative;
}
.regalo__gaviotas {
  position: absolute;
  right: -74px;
  top: 8px;
  width: 56px;
  filter: brightness(0) invert(1);
}
.regalo__texto {
  font-style: italic;
  font-size: clamp(17px, 3.4vw, 28px);
  line-height: 1.45;
  color: #fff;
  max-width: 520px;
  margin: 30px auto 40px;
}
.dato + .dato { margin-top: 26px; }
.dato__etiqueta {
  font-family: "Geometrica", Montserrat, sans-serif;
  font-size: clamp(12px, 2.4vw, 19px);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: #bfbfbf;
  margin: 0 0 8px;
}
.dato__valor {
  font-family: "Geometrica", Montserrat, sans-serif;
  font-size: clamp(17px, 3.4vw, 26px);
  color: #fff;
  margin: 0;
}

/* En el móvil nadie selecciona un IBAN de 24 dígitos con el dedo: se toca y
   se copia. El botón hereda el aspecto del texto, no parece un botón. */
.copiar {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 6px 10px;
  margin: 0;
  cursor: pointer;
  position: relative;
  border-radius: 4px;
  transition: background 0.2s;
}
.copiar:hover { background: rgba(255, 255, 255, 0.12); }
.copiar::after {
  content: "copiar";
  display: block;
  font-family: "Geometrica", Montserrat, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #bfbfbf;
  margin-top: 4px;
}
.copiar[data-copiado]::after { content: "¡copiado!"; color: #fff; }

/* --- respiro entre el regalo y la despedida -----------------------------
   Sin esto, las dos bandas azules se leen como una sola sección. La franja
   deja ver el papel y marca la pausa. El diseño exportado ya traía un hilo de
   crema aquí (6 px), demasiado fino para notarse; esto es lo mismo, con aire.
   Variantes: --guirnalda (por defecto), --sol, o sola (solo papel). */
.respiro {
  padding: clamp(18px, 4.5vw, 28px) 0;
  text-align: center;
}
.respiro__adorno {
  display: block;
  margin: 0 auto;
}
.respiro--guirnalda .respiro__adorno { width: clamp(96px, 22vw, 140px); }
.respiro--sol .respiro__adorno { width: clamp(44px, 10vw, 62px); opacity: 0.9; }

/* --- despedida --------------------------------------------------------- */

.despedida { padding: 60px 0 62px; text-align: center; }
.despedida__texto {
  font-family: "Manuscrita", "Segoe Script", cursive;
  font-size: clamp(38px, 8vw, 56px);
  color: var(--claro);
  margin: 0;
  font-weight: 400;
}

.cierre { height: 90px; }

/* La portada ya es responsive por sí sola (todo en % del lienzo), así que
   aquí solo se ajusta lo que viene después. */
@media (max-width: 860px) {
  /* --- ritmo vertical: en móvil los aires del PDF se comen la pantalla --- */
  .envoltura { padding: 0 20px; }
  .contador   { padding: 56px 0 0; }
  .calendario { padding: 22px 0 0; }
  .lugares    { padding: 64px 0 60px; }
  .asistencia { padding: 54px 0 58px; }
  .programa   { padding: 62px 0 64px; }
  .hoteles    { padding: 54px 0 50px; }
  .regalo     { padding: 58px 0 56px; }
  .despedida  { padding: 44px 0 46px; }
  .cierre     { height: 50px; }

  .bienvenida { padding: 26px 24px; }
  .puerta { padding: 32px 0; }
  .bienvenida__peineta { right: -8px; bottom: -28px; width: 54px; }

  /* --- contador y calendario --- */
  .contador__rejilla { gap: 16px; }
  .contador__etiqueta { letter-spacing: 0.26em; text-indent: 0.26em; }
  .calendario__rejilla { max-width: 330px; gap: 4px 2px; }

  /* --- lugares --- */
  .basilica { margin-bottom: 26px; }
  .lugar + .lugar { margin-top: 42px; }
  .lugar__rotulo { letter-spacing: 0.4em; text-indent: 0.4em; }
  .boton-mapa { letter-spacing: 0.34em; text-indent: 0.34em; padding: 15px 24px; }

  /* --- formulario: ancho completo y zonas de toque cómodas --- */
  .formulario { max-width: 100%; margin-top: 32px; }
  .campo__etiqueta { letter-spacing: 0.3em; }
  /* esta regla va después de la general a propósito: si no, la de móvil
     le devolvería el espaciado ancho a la etiqueta larga */
  .campo__etiqueta--larga { letter-spacing: 0.12em; }
  .opciones { gap: 10px; }
  .opcion { padding: 16px 6px; }
  .boton-enviar { letter-spacing: 0.3em; text-indent: 0.3em; padding: 18px 10px; }
  .persona { padding: 20px 16px 22px; }
  .persona .campo__etiqueta { letter-spacing: 0.24em; text-indent: 0.24em; }
  .resultado__boton { padding: 11px 16px; }

  /* --- programa --- */
  .union { margin: 18px auto; }
  .programa__linea { --escala-icono: 0.42; }

  /* --- hoteles: la tarjeta se adapta al ancho del móvil --- */
  /* la tarjeta se queda algo corta a propósito: así asoma la siguiente y se
     ve de un vistazo que el carrusel se desliza con el dedo */
  .hoteles__carrusel { padding: 18px 16px; gap: 14px; margin-top: 28px; }
  .hotel {
    width: min(322px, calc(100vw - 108px));
    height: auto;
    aspect-ratio: 322 / 258;
    padding: 13% 15%;
  }
  .hotel__nombre { font-size: 14px; }

  /* --- regalo --- */
  .regalo__gaviotas { right: -44px; top: 4px; width: 38px; }
  .regalo__texto { margin: 24px auto 32px; }
  .dato__etiqueta { letter-spacing: 0.4em; text-indent: 0.4em; }
  .dato__valor { word-break: break-word; }
}