/* ═══════════════════════════════════════════════════════
   VIVIAN & ISAAC — 03.10.2026
   Paleta extraída de la referencia (imagrefer.jpeg)
   ═══════════════════════════════════════════════════════ */

:root{
  /* Colores */
  --papel:        #F8F3E8;
  --crema:        #EDE6D8;
  /* Los verdes llevan algo más de saturación que la muestra original:
     aquellos tonos quedaban casi grises. Se subió el verde manteniendo la
     misma luminosidad, así que todos los contrastes siguen cumpliendo. */
  --salvia-claro: #D3D9BE;
  --salvia:       #8D9A76;
  /* Versión oscurecida del salvia, solo para TEXTO.
     El salvia normal da 2.6:1 sobre el papel: se pierde en el fondo.
     Este llega a 5.77:1 sobre papel y 5.14:1 sobre crema (WCAG AA).
     El salvia claro se sigue usando en líneas, iconos y adornos. */
  --salvia-txt:   #586347;
  --oliva:        #8A9478;
  --verde-osc:    #3C4529;
  --tinta:        #2D331C;
  --marron:       #8A7358;
  --blanco:       #FFFDF9;

  /* Tipografía */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --script: 'Great Vibes', cursive;
  --sans:   'Lato', system-ui, sans-serif;

  /* ── Escala de etiquetas en mayúscula ──
     Tres niveles y nada más. Antes había 15 tamaños y 12 espaciados
     distintos: al ser todos de la misma fuente, el ojo los leía como
     tipografías diferentes. Estos son los únicos valores permitidos. */
  /* Los mínimos están puestos para que en un teléfono de 375px nada baje
     de ~12px: por debajo de eso una etiqueta en mayúscula deja de leerse
     cómodamente, por mucho tracking que tenga. */
  --txt-titulo: clamp(.92rem, 3.9vw, 1.05rem); /* títulos de sección  */
  --txt-label:  clamp(.82rem, 3.3vw, .9rem);   /* etiquetas y botones */
  --txt-mini:   clamp(.76rem, 3vw, .82rem);    /* micro-etiquetas     */

  /* Espaciado entre letras: uno para títulos, uno para todo lo demás */
  --ls-titulo: .28em;
  --ls-label:  .2em;
  --ls-suave:  .06em;   /* textos que no van en mayúscula */

  /* Medidas */
  --ancho-lienzo: 480px;
  --pad: clamp(24px, 7vw, 46px);
}

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

html{ scroll-behavior:smooth; }

body{
  /* Crema del proyecto: el papel de la invitación se apoya encima con un
     contraste apenas perceptible, que es lo que la hace ver limpia. */
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* El "papel" central — en desktop queda enmarcado por el fondo oliva */
.lienzo{
  max-width: var(--ancho-lienzo);
  margin-inline: auto;
  background: var(--papel);
  overflow: hidden;
  position: relative;
}

/* Textura sutil de papel */
.lienzo::before{
  content:'';
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
  opacity:.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(141,154,118,.07) 0%, transparent 42%),
    radial-gradient(circle at 82% 68%, rgba(138,115,88,.06) 0%, transparent 45%);
}

/* ───────────────────────────────────────────────
   BLOQUE 1 — HERO
   ─────────────────────────────────────────────── */

.hero{
  position: relative;
  padding: clamp(88px, 24vw, 130px) var(--pad) clamp(34px, 9vw, 50px);
  text-align: center;
  isolation: isolate;
}

/* ── Frase de apertura ── */
.frase{
  position: relative; z-index: 2;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-weight: 400;
  color: var(--verde-osc);
  line-height: 1.85;
  max-width: 28ch;
  margin-inline: auto;
}
/* La invitación en cursiva: separa el "quiénes somos" del "ven con nosotros" */
.frase em{
  display: inline-block;
  margin-top: .7em;
  font-style: italic;
  color: var(--tinta);
}

/* ── Fecha bajo la frase ── */
.fecha-hero{
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 15px);
  margin-top: clamp(20px, 6vw, 28px);
}
.fecha-hero time{
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--salvia-txt);
}
.fecha-hero .linea{
  flex: 1;
  max-width: clamp(22px, 8vw, 42px);
  height: 1px;
  background: var(--salvia-claro);
}

/* ── Monograma I | V ── */
.monograma{
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 22px);
  margin-top: clamp(38px, 10vw, 60px);
}
/* Cada par de iniciales: la inicial del nombre + la del segundo nombre */
.mono{
  display: inline-flex;
  align-items: baseline;
}

/* Primera letra: la voz principal */
.mono__a{
  font-family: var(--serif);
  font-size: clamp(4rem, 20vw, 6.4rem);
  font-weight: 500;
  line-height: .9;
  color: var(--tinta);
}

/* Segunda letra: la mitad de alta, fina y en cursiva.
   El margen negativo la acerca hasta rozar la primera, para que el par se
   lea como un solo monograma y no como dos letras sueltas. */
.mono__b{
  font-family: var(--serif);
  font-size: clamp(1.75rem, 8.6vw, 2.75rem);
  font-weight: 300;
  font-style: italic;
  line-height: .9;
  color: var(--salvia-txt);
  margin-left: -.07em;
  /* Baja un poco respecto a la línea base para que se apoye en la letra grande */
  transform: translateY(.06em);
}

.monograma .barra{
  width: 1px;
  height: clamp(58px, 17vw, 88px);
  background: var(--salvia);
}

/* ── "Nuestra Boda" ── */
.kicker{
  position: relative; z-index: 2;
  margin-top: clamp(14px, 4vw, 20px);
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);   /* compensa el tracking del último caracter */
  text-transform: uppercase;
  color: var(--verde-osc);
}

/* ── Separador con corazón ── */
.corazon{
  position: relative; z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 4vw, 22px);
}
.corazon .linea{
  width: clamp(38px, 11vw, 56px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--salvia));
}
.corazon .linea:last-child{
  background: linear-gradient(to left, transparent, var(--salvia));
}
.corazon svg{
  width: 13px; height: 13px;
  fill: var(--salvia);
}

/* ── Foto de la pareja con borde acuarela ── */
.foto-hero{
  position: relative; z-index: 2;
  margin-top: clamp(34px, 9vw, 52px);
  margin-inline: calc(var(--pad) * -1);
}
.foto-hero img{
  display: block;
  width: 100%;
  height: clamp(340px, 90vw, 460px);
  object-fit: cover;
  /* Encuadre a la altura de los rostros */
  object-position: center 46%;
  filter: saturate(.9) contrast(1.02);
  /* Bordes irregulares tipo pincelada de acuarela */
  -webkit-mask-image: var(--mask-acuarela);
          mask-image: var(--mask-acuarela);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Máscara SVG inline: borde superior e inferior deshilachado, tipo acuarela */
:root{
  --mask-acuarela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,7 C8,3.5 16,6.5 24,4.5 C33,2.2 41,6 50,4 C59,2 67,6.5 76,4.5 C85,2.6 92,6 100,3.5 L100,95 C92,98 84,94.5 75,96.5 C66,98.4 58,95 49,97 C40,99 32,95.5 23,97 C15,98.3 7,96 0,97.5 Z'/%3E%3C/svg%3E");
}

/* ── Cuenta regresiva ── */
.cuenta{
  position: relative; z-index: 2;
  margin-top: clamp(30px, 8vw, 44px);
}
.cuenta__titulo,
.cuenta__pie{
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--salvia-txt);
}
.cuenta__pie{
  margin-top: clamp(12px, 3.5vw, 16px);
}

.cuenta__reloj{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.4vw, 14px);
  margin-top: clamp(14px, 4vw, 20px);
}

.cuenta__u{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: clamp(52px, 16vw, 68px);
}
.cuenta__n{
  font-family: var(--serif);
  font-size: clamp(2.05rem, 9.5vw, 2.85rem);
  font-weight: 400;
  line-height: 1;
  color: var(--tinta);
  /* Dígitos de ancho fijo: el número no "baila" al cambiar */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.cuenta__l{
  font-family: var(--serif);
  font-size: var(--txt-mini);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--salvia-txt);
}

.cuenta__sep{
  width: 1px;
  height: clamp(30px, 8vw, 40px);
  background: var(--salvia-claro);
  align-self: start;
  margin-top: 4px;
}

/* Latido suave del segundero */
.cuenta__n[data-u="segundos"]{
  transition: opacity .35s ease;
}
.cuenta__n[data-u="segundos"].tic{
  opacity: .45;
}

/* Mensaje del día de la boda */
.cuenta--hoy .cuenta__reloj,
.cuenta--hoy .cuenta__pie{ display: none; }
.cuenta--hoy .cuenta__titulo{
  font-family: var(--script);
  font-size: clamp(1.7rem, 8vw, 2.2rem);
  letter-spacing: normal;
  text-indent: 0;
  text-transform: none;
  color: var(--verde-osc);
}

/* ── Calendario de octubre ── */
.cal{
  position: relative; z-index: 2;
  margin-top: clamp(34px, 9vw, 46px);
  padding-top: clamp(26px, 7vw, 34px);
  border-top: 1px solid var(--salvia-claro);
}

.cal__mes{
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-osc);
}

.cal__grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(2px, 1vw, 5px);
  max-width: 330px;
  margin: clamp(16px, 4vw, 22px) auto 0;
}

.cal__dow{
  font-family: var(--serif);
  font-size: var(--txt-mini);
  font-weight: 600;
  /* Sin tracking: son letras sueltas y el espaciado solo las descentra */
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--salvia-txt);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--salvia-claro);
  margin-bottom: 6px;
}

.cal__d{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: clamp(.82rem, 3.3vw, .9rem);
  font-variant-numeric: tabular-nums;
  color: var(--verde-osc);
  opacity: .92;
}
.cal__d--vacio{ visibility: hidden; }

/* ── El 26: el día de la boda ── */
.cal__d--boda{
  background: var(--verde-osc);
  color: var(--blanco);
  border-radius: 50%;
  font-weight: 400;
  opacity: 1;
  /* Un pelo más grande que el resto, sin descuadrar la rejilla */
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(45,51,28,.3);
}

.cal__estrella{
  position: absolute;
  top: -7px; right: -7px;
  width: 14px; height: 14px;
  fill: var(--marron);
  filter: drop-shadow(0 1px 2px rgba(248,243,232,.9));
  animation: brillo 2.8s ease-in-out infinite;
}
@keyframes brillo{
  0%,100% { opacity: .85; transform: scale(1)    rotate(0deg); }
  50%     { opacity: 1;   transform: scale(1.16) rotate(9deg); }
}

/* ── Botón secundario (contorno) ── */
.btn--fantasma{
  background: transparent;
  color: var(--verde-osc);
  border: 1px solid var(--salvia);
  cursor: pointer;
  font-family: var(--serif);
}
.btn--fantasma:hover,
.btn--fantasma:focus-visible{
  background: var(--verde-osc);
  color: var(--blanco);
  border-color: var(--verde-osc);
}

/* ── Indicador de scroll ── */
/* ───────────────────────────────────────────────
   BLOQUE 2 — LUGAR DE LA BODA
   ─────────────────────────────────────────────── */

.lugar{
  position: relative;
  z-index: 2;
  padding: clamp(34px, 9vw, 50px) var(--pad) clamp(56px, 14vw, 78px);
  text-align: center;
}

/* ── Par de fotos superpuestas ── */
.duo{
  position: relative;
  margin-bottom: clamp(54px, 14vw, 76px);
  /* Espacio para la foto B, que sobresale por abajo */
  padding-bottom: clamp(58px, 16vw, 84px);
}

.duo__foto{
  overflow: hidden;
  background: var(--crema);
}
.duo__foto img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Trata ambas fotos igual para que convivan con la paleta */
  filter: saturate(.82) contrast(1.03) brightness(1.01);
}

/* Foto A — grande, anclada a la izquierda */
.duo__foto--a{
  width: 76%;
  aspect-ratio: 4 / 5;
  margin-right: auto;
  box-shadow: 0 12px 34px rgba(45,51,28,.14);
}

/* Foto B — encima, desplazada a la derecha y hacia abajo */
.duo__foto--b{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  aspect-ratio: 3 / 4;
  /* El marco crema la despega visualmente de la foto A */
  border: clamp(5px, 1.6vw, 8px) solid var(--papel);
  box-shadow: 0 14px 38px rgba(45,51,28,.22);
}

/* Entrada: A desde la izquierda, B desde la derecha, escalonadas */
.duo__foto--a[data-anim]{
  transform: translateX(-24px) scale(.98);
}
.duo__foto--b[data-anim]{
  transform: translate(26px, 26px) scale(.94);
}
.duo__foto[data-anim]{
  transition: opacity 1.25s cubic-bezier(.22,.61,.36,1),
              transform 1.25s cubic-bezier(.22,.61,.36,1);
}
.duo__foto[data-anim].visible{
  transform: none;
}

/* ── Sede ── */
.kicker--sec{ margin-top: 0; }

.lugar__nombre{
  font-family: var(--serif);
  font-size: clamp(2rem, 9.5vw, 2.7rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--tinta);
  margin-top: clamp(16px, 4vw, 22px);
}

.lugar__dir{
  font-style: normal;
  font-size: clamp(.86rem, 3.6vw, .95rem);
  line-height: 1.85;
  color: var(--verde-osc);
  margin-top: clamp(10px, 3vw, 14px);
}

.lugar__nota{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.88rem, 3.6vw, .98rem);
  line-height: 1.75;
  color: var(--salvia-txt);
  margin-top: clamp(14px, 4vw, 18px);
}

/* ── Botón ── */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(24px, 6vw, 32px);
  /* El padding derecho es mayor a propósito: el letter-spacing añade un hueco
     después de la última letra y sin compensarlo el texto se ve descentrado.
     (Aquí no sirve `text-indent`: dentro de un flex desplaza también el icono.) */
  padding: 14px clamp(26px, 7vw, 36px) 14px clamp(24px, 6.6vw, 34px);
  background: var(--verde-osc);
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn:hover,
.btn:focus-visible{
  background: var(--tinta);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45,51,28,.24);
}
.btn svg{
  width: 15px; height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Hora de llegada ── */
.llegada{
  margin-top: clamp(40px, 10vw, 56px);
  padding: clamp(26px, 7vw, 36px) clamp(20px, 6vw, 30px);
  background: var(--salvia-claro);
  border-radius: 3px;
}
.llegada__reloj{
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--verde-osc);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: .9;
}
.llegada__hora{
  font-family: var(--serif);
  font-size: clamp(1.85rem, 8.5vw, 2.35rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--tinta);
  margin-top: 8px;
}
.llegada__label{
  font-family: var(--serif);
  font-size: var(--txt-mini);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-osc);
  opacity: .92;
  margin-top: 4px;
}
.llegada__texto{
  font-size: clamp(.85rem, 3.5vw, .93rem);
  line-height: 1.85;
  color: var(--verde-osc);
  max-width: 34ch;
  margin: clamp(14px, 4vw, 18px) auto 0;
}
.llegada__texto strong{
  font-weight: 400;
  color: var(--tinta);
  border-bottom: 1px solid var(--salvia);
}

/* ───────────────────────────────────────────────
   BLOQUE 3 — ITINERARIO DE ACTIVIDADES
   ─────────────────────────────────────────────── */

.itin{
  position: relative;
  z-index: 2;
  padding-bottom: clamp(20px, 6vw, 30px);
  text-align: center;
}

.itin__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
  padding: 0 var(--pad) clamp(26px, 7vw, 34px);
}

/* Franja de papel salvia con los bordes rasgados, como en la referencia */
.itin__papel{
  background: var(--salvia-claro);
  padding: clamp(42px, 11vw, 58px) var(--pad);
  -webkit-mask-image: var(--mask-rasgado);
          mask-image: var(--mask-rasgado);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

:root{
  --mask-rasgado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0,4 C6,1 11,4.2 17,2.6 C24,0.7 30,3.6 37,2.2 C44,0.8 49,3.8 56,2.6 C63,1.4 68,4.4 75,3 C82,1.6 88,4.2 94,2.4 C96.5,1.7 98,2.6 100,1.8 L100,97 C94,99.2 88,96.4 81,98 C74,99.6 68,96.8 61,98.2 C54,99.6 49,96.6 42,97.8 C35,99 29,96.2 22,97.6 C15,99 9,96.6 3,98.2 C1.8,98.5 0.8,98.8 0,99 Z'/%3E%3C/svg%3E");
}

.itin__lista{
  position: relative;
  list-style: none;
  max-width: 340px;
  margin-inline: auto;
  text-align: left;

  --col-icono: 46px;
  --col-linea: 28px;
}

/* Línea vertical continua que atraviesa todos los puntos */
.itin__lista::before{
  content: '';
  position: absolute;
  left: calc(var(--col-icono) + var(--col-linea) / 2);
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--salvia);
  opacity: .7;
}

.itin__item{
  display: grid;
  grid-template-columns: var(--col-icono) var(--col-linea) 1fr;
  align-items: center;
  padding: clamp(11px, 3vw, 15px) 0;
}

.itin__icono{
  display: grid;
  place-items: center;
}
.itin__icono svg{
  width: clamp(27px, 7.5vw, 32px);
  height: clamp(27px, 7.5vw, 32px);
  fill: none;
  stroke: var(--verde-osc);
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

/* Punto sobre la línea */
.itin__punto{
  justify-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-osc);
  /* Anillo del color del papel: "corta" la línea limpiamente */
  box-shadow: 0 0 0 4px var(--salvia-claro);
  position: relative;
}

.itin__texto{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: clamp(8px, 3vw, 14px);
}
.itin__hora{
  font-family: var(--serif);
  font-size: clamp(.86rem, 3.6vw, .96rem);
  font-weight: 600;
  letter-spacing: var(--ls-suave);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.itin__act{
  font-size: clamp(.82rem, 3.4vw, .9rem);
  line-height: 1.5;
  color: var(--verde-osc);
}

/* Entrada escalonada: cada fila aparece un poco después de la anterior */
.itin__item[data-anim]{ transform: translateX(-18px); }
.itin__item[data-anim].visible{ transform: none; }
.itin__item:nth-child(1){ transition-delay: .00s; }
.itin__item:nth-child(2){ transition-delay: .10s; }
.itin__item:nth-child(3){ transition-delay: .20s; }
.itin__item:nth-child(4){ transition-delay: .30s; }
.itin__item:nth-child(5){ transition-delay: .40s; }
.itin__item:nth-child(6){ transition-delay: .50s; }

/* ───────────────────────────────────────────────
   BLOQUE 4 — CÓDIGO DE VESTIMENTA
   ─────────────────────────────────────────────── */

.dress{
  position: relative;
  z-index: 2;
  padding: clamp(50px, 13vw, 70px) var(--pad) clamp(56px, 14vw, 76px);
  text-align: center;
}

.dress__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
}

/* ── Vestido y traje ── */
.dress__figuras{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 20px);
  margin-top: clamp(26px, 7vw, 34px);
}
.dress__figuras svg{
  width: clamp(50px, 15vw, 64px);
  height: clamp(50px, 15vw, 64px);
  fill: none;
  stroke: var(--verde-osc);
  stroke-width: .95;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.dress__amp{
  font-family: var(--serif);
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  font-style: italic;
  color: var(--salvia-txt);
}

.dress__estilo{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 7vw, 1.95rem);
  font-weight: 400;
  color: var(--tinta);
  margin-top: clamp(18px, 5vw, 24px);
}
.dress__estilo span{
  color: var(--salvia-txt);
  font-style: italic;
  padding: 0 4px;
}

.dress__texto{
  font-size: clamp(.86rem, 3.5vw, .94rem);
  line-height: 1.85;
  color: var(--verde-osc);
  max-width: 32ch;
  margin: clamp(14px, 4vw, 18px) auto 0;
}

/* ── Colores reservados para la novia ── */
.veto{
  margin-top: clamp(36px, 9vw, 48px);
  padding: clamp(26px, 7vw, 34px) clamp(20px, 6vw, 28px);
  background: var(--crema);
  border: 1px solid var(--salvia-claro);
  border-radius: 3px;
}

.veto__titulo{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-osc);
}
.veto__titulo svg{
  width: 17px; height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--verde-osc);
  stroke-width: 1.3;
  stroke-linecap: round;
  margin-right: -.2em;
}

/* Muestras de los tonos vetados, tachadas */
.veto__muestras{
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 14px);
  margin-top: clamp(18px, 5vw, 22px);
}
.veto__color{
  position: relative;
  width: clamp(34px, 10vw, 42px);
  height: clamp(34px, 10vw, 42px);
  border-radius: 50%;
  background: var(--c);
  border: 1px solid var(--salvia-claro);
}
/* Diagonal de tachado */
.veto__color::after{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - .9px),
    var(--salvia) calc(50% - .9px),
    var(--salvia) calc(50% + .9px),
    transparent calc(50% + .9px)
  );
}

.veto__texto{
  font-size: clamp(.83rem, 3.4vw, .9rem);
  line-height: 1.85;
  color: var(--verde-osc);
  max-width: 33ch;
  margin: clamp(18px, 5vw, 22px) auto 0;
}

/* ───────────────────────────────────────────────
   BLOQUE 5 — NUESTRA HISTORIA (carrusel con flip)
   ─────────────────────────────────────────────── */

.historia{
  position: relative;
  z-index: 2;
  padding: clamp(50px, 13vw, 70px) var(--pad) clamp(56px, 14vw, 76px);
  background: var(--crema);
  text-align: center;
}

.historia__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
}

/* ── Los nombres, en grande ── */
.nombres{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(22px, 6vw, 30px);
}

.nombres__n{
  font-family: var(--script);
  font-size: clamp(3rem, 15vw, 4.8rem);
  font-weight: 400;
  /* La caligrafía tiene ascendentes y descendentes largas (la J baja mucho):
     el interlineado holgado evita que se corten entre sí. */
  line-height: 1.16;
  color: var(--tinta);
}

.nombres__amp{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 5.4vw, 1.62rem);
  color: var(--salvia-txt);
  /* Márgenes negativos: la caligrafía deja mucho aire propio arriba y abajo,
     así el "&" queda abrazado por los nombres y no flotando lejos. */
  margin: clamp(-14px, -3.5vw, -8px) 0;
}

.historia__intro{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.86rem, 3.5vw, .95rem);
  color: var(--salvia-txt);
  margin-top: clamp(14px, 4vw, 18px);
}

/* ── Carrusel ── */
.carrusel{
  margin-top: clamp(24px, 6vw, 32px);
}

.carrusel__ventana{
  overflow: hidden;
}

.carrusel__pista{
  display: flex;
  transition: transform .62s cubic-bezier(.4,.02,.2,1);
  touch-action: pan-y;
}

.slide{
  flex: 0 0 100%;
  min-width: 0;
  /* Deja respirar el borde de la tarjeta dentro de la ventana */
  padding: 6px;
  /* La perspectiva va en el padre directo de la tarjeta, o el volteo se ve plano */
  perspective: 1400px;
}

/* ── Tarjeta con volteo ── */
.tarjeta{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.36,.06,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.tarjeta.volteada{
  transform: rotateY(180deg);
}

.tarjeta__cara{
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  /* Oculta la cara que queda de espaldas */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 10px 30px rgba(45,51,28,.18);
}

/* Frente: la foto */
.tarjeta__frente img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.03);
}
.tarjeta__toca{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 16px 16px;
  font-family: var(--serif);
  font-size: var(--txt-mini);
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--blanco);
  background: linear-gradient(to top, rgba(45,51,28,.72), transparent);
}

/* Dorso: el texto */
.tarjeta__dorso{
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(26px, 8vw, 38px) clamp(22px, 7vw, 32px);
  background: var(--papel);
  border: 1px solid var(--salvia-claro);
}
.tarjeta__num{
  font-family: var(--serif);
  font-size: var(--txt-mini);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  color: var(--salvia-txt);
}
.tarjeta__h{
  font-family: var(--serif);
  font-size: clamp(1.28rem, 6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--tinta);
}
.tarjeta__h::after{
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--salvia);
  margin: 14px auto 0;
}
.tarjeta__p{
  font-size: clamp(.85rem, 3.5vw, .93rem);
  /* Los textos reales son más largos que los de ejemplo: con 1.85 y 30ch
     se desbordaban de la tarjeta en pantallas de 320px, y la cara recorta. */
  line-height: 1.72;
  color: var(--verde-osc);
  max-width: 34ch;
}
/* Palabras clave: resalte discreto. Sin negrita de más ni otro color chillón,
   solo un tono más oscuro y algo más de cuerpo, para que el ojo salte
   de una a otra sin romper la lectura. */
.tarjeta__p b{
  font-weight: 600;
  color: var(--tinta);
}

/* ── Flechas y puntos ── */
.carrusel__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 20px);
  margin-top: clamp(22px, 6vw, 28px);
}

.flecha{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--salvia);
  border-radius: 50%;
  background: transparent;
  color: var(--verde-osc);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.flecha:hover,
.flecha:focus-visible{
  background: var(--verde-osc);
  color: var(--blanco);
  border-color: var(--verde-osc);
}
.flecha svg{
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.puntos{
  display: flex;
  align-items: center;
  gap: 7px;
}
.punto{
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--salvia);
  opacity: .4;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.punto.activo{
  background: var(--verde-osc);
  opacity: 1;
  transform: scale(1.45);
}

/* ───────────────────────────────────────────────
   BLOQUE 6 — REGALOS
   ─────────────────────────────────────────────── */

.regalos{
  position: relative;
  z-index: 2;
  padding: clamp(52px, 13vw, 72px) var(--pad) clamp(56px, 14vw, 76px);
  text-align: center;
}

.regalos__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
}

/* ── Sobre ── */
.sobre{
  margin-top: clamp(28px, 7vw, 36px);
}
.sobre svg{
  width: clamp(88px, 26vw, 112px);
  height: auto;
  fill: none;
  stroke: var(--verde-osc);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.sobre__cuerpo{ fill: var(--crema); }
.sobre__pliegue{ opacity: .45; }
.sobre__lacre{
  fill: var(--verde-osc);
  stroke: none;
}

.regalos__destacado{
  font-family: var(--serif);
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 400;
  color: var(--tinta);
  margin-top: clamp(22px, 6vw, 28px);
}
/* Subrayado fino y corto, como trazo de pluma */
.regalos__destacado::after{
  content: '';
  display: block;
  width: 52px;
  height: 1px;
  background: var(--salvia);
  margin: clamp(12px, 3vw, 15px) auto 0;
}

/* ── Mensaje con humor ── */
.broma{
  margin-top: clamp(28px, 7vw, 36px);
  padding: clamp(26px, 7vw, 34px) clamp(20px, 6vw, 28px);
  background: var(--salvia-claro);
  border-radius: 3px;
}
.broma p{
  font-size: clamp(.85rem, 3.5vw, .93rem);
  line-height: 1.9;
  color: var(--verde-osc);
  max-width: 34ch;
  margin-inline: auto;
}

/* ───────────────────────────────────────────────
   BLOQUE 7 — INFORMACIÓN PRÁCTICA
   ─────────────────────────────────────────────── */

.info{
  position: relative;
  z-index: 2;
  padding: clamp(52px, 13vw, 72px) var(--pad) clamp(56px, 14vw, 76px);
  text-align: center;
}

.info__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
}

.notas{
  display: grid;
  gap: clamp(14px, 4vw, 18px);
  margin-top: clamp(28px, 7vw, 36px);
}

.nota{
  padding: clamp(24px, 6vw, 30px) clamp(20px, 5vw, 26px);
  background: var(--crema);
  border: 1px solid var(--salvia-claro);
  border-radius: 3px;
  text-align: left;
}
.nota__icono{
  width: 27px; height: 27px;
  fill: none;
  stroke: var(--verde-osc);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
}
.nota__h{
  font-family: var(--serif);
  font-size: clamp(1.06rem, 4.4vw, 1.2rem);
  font-weight: 500;
  color: var(--tinta);
  margin-top: 10px;
}
.nota__p{
  font-size: clamp(.85rem, 3.5vw, .92rem);
  line-height: 1.85;
  color: var(--verde-osc);
  margin-top: 8px;
}
.nota__p strong{
  font-weight: 400;
  color: var(--tinta);
  border-bottom: 1px solid var(--salvia);
}

/* ───────────────────────────────────────────────
   BLOQUE 9 — CIERRE (postal a pantalla completa)
   ─────────────────────────────────────────────── */

.postal{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: clamp(560px, 94svh, 780px);
  padding: clamp(48px, 12vw, 72px) var(--pad);
  overflow: hidden;
  text-align: center;
  background: var(--verde-osc);
}

.postal__foto{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(.8) contrast(1.02);
}

/* Velo verde: más denso arriba y abajo, más limpio en el centro,
   para que la foto se siga viendo pero el texto nunca pelee con ella. */
.postal::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(45,51,28,.72) 0%,
      rgba(45,51,28,.46) 38%,
      rgba(45,51,28,.52) 68%,
      rgba(45,51,28,.80) 100%),
    rgba(60,69,41,.22);
}

.postal__texto{
  position: relative;
  z-index: 1;
  color: var(--blanco);
}

/* Separador y líneas en claro, sobre la foto */
.corazon--claro .linea{
  background: linear-gradient(to right, transparent, rgba(255,253,249,.65));
}
.corazon--claro .linea:last-child{
  background: linear-gradient(to left, transparent, rgba(255,253,249,.65));
}
.corazon--claro svg{ fill: rgba(255,253,249,.8); }

.postal__frase{
  font-family: var(--script);
  font-size: clamp(2.8rem, 14vw, 4.4rem);
  line-height: 1.2;
  margin-top: clamp(18px, 4vw, 24px);
  /* La sombra difusa despega el texto de la foto sin oscurecerla más */
  text-shadow: 0 2px 24px rgba(28,33,18,.5);
}

.postal__mono{
  margin-top: clamp(28px, 7vw, 38px);
}
.postal__mono .mono__a{
  font-size: clamp(2.7rem, 13vw, 3.9rem);
  color: var(--blanco);
}
.postal__mono .mono__b{
  font-size: clamp(1.2rem, 5.7vw, 1.7rem);
  color: rgba(255,253,249,.75);
}
.postal__mono .barra{
  height: clamp(40px, 11vw, 56px);
  background: rgba(255,253,249,.5);
}

.postal__fecha{
  display: inline-block;
  margin-top: clamp(26px, 6vw, 34px);
  padding-top: clamp(20px, 5vw, 26px);
  border-top: 1px solid rgba(255,253,249,.38);
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
}
.postal__lugar{
  margin-top: 9px;
  font-size: clamp(.8rem, 3.2vw, .87rem);
  color: rgba(255,253,249,.82);
}

/* ───────────────────────────────────────────────
   MÚSICA DE FONDO
   ─────────────────────────────────────────────── */

.musica{
  position: fixed;
  top: clamp(14px, 4vw, 22px);
  right: clamp(14px, 4vw, 22px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--salvia-claro);
  border-radius: 50%;
  background: rgba(248,243,232,.9);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--verde-osc);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(45,51,28,.13);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.musica:hover{
  background: var(--verde-osc);
  color: var(--blanco);
  border-color: var(--verde-osc);
}
.musica svg{
  grid-area: 1 / 1;
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Alterna los dos iconos según el estado */
.musica .musica__on{ display: none; }
.musica[aria-pressed="true"] .musica__on{ display: block; }
.musica[aria-pressed="true"] .musica__off{ display: none; }

/* Anillo que late solo cuando la música suena */
.musica__onda{
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--salvia);
  opacity: 0;
  pointer-events: none;
}
.musica[aria-pressed="true"] .musica__onda{
  animation: onda 2.4s ease-out infinite;
}
@keyframes onda{
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* ───────────────────────────────────────────────
   BOTÓN FLOTANTE DE CONFIRMACIÓN
   ─────────────────────────────────────────────── */

.flotante{
  position: fixed;
  z-index: 39;
  left: 50%;
  bottom: clamp(16px, 4vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px 14px 24px;
  border: 0;
  border-radius: 100px;
  background: var(--verde-osc);
  color: var(--blanco);
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(45,51,28,.3);

  /* Oculto hasta que el JS decide mostrarlo */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s, background .3s ease;
}
.flotante.visible{
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.flotante:hover{ background: var(--tinta); }
.flotante svg{
  width: 15px; height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce){
  .musica[aria-pressed="true"] .musica__onda{ animation: none; }
}

/* ───────────────────────────────────────────────
   BLOQUE 8 — CONFIRMACIÓN
   ─────────────────────────────────────────────── */

.rsvp{
  position: relative;
  z-index: 2;
  padding: clamp(52px, 13vw, 72px) var(--pad) clamp(58px, 14vw, 78px);
  background: var(--crema);
  text-align: center;
}

.rsvp__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
}

.rsvp__texto{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.95rem, 4vw, 1.08rem);
  line-height: 1.75;
  color: var(--verde-osc);
  max-width: 27ch;
  margin: clamp(20px, 5vw, 26px) auto 0;
}

.rsvp__limite{
  font-size: clamp(.78rem, 3.2vw, .85rem);
  color: var(--salvia-txt);
  margin-top: clamp(20px, 5vw, 26px);
}
.rsvp__limite strong{
  font-weight: 400;
  color: var(--verde-osc);
  border-bottom: 1px solid var(--salvia);
}

/* ── CTA principal ── */
.cta{
  display: inline-block;
  margin-top: clamp(26px, 7vw, 34px);
  /* Padding derecho compensado, igual que en .btn */
  padding: 17px clamp(36px, 10vw, 50px) 17px clamp(34px, 9.6vw, 48px);
  border: 0;
  border-radius: 2px;
  background: var(--verde-osc);
  color: var(--blanco);
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(45,51,28,.2);
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cta:hover,
.cta:focus-visible{
  background: var(--tinta);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(45,51,28,.3);
}
.cta:active{ transform: translateY(0); }

/* ───────────────────────────────────────────────
   MODAL DE CONFIRMACIÓN
   ─────────────────────────────────────────────── */

.modal{
  /* Sin position propia a propósito: el navegador le da `position: fixed`
     a un <dialog> abierto con showModal(), y eso es justo lo que lo centra.
     Declarar `position: relative` aquí lo rompía y lo mandaba a la izquierda.
     El botón de cerrar se ancla igual, porque `fixed` ya sirve de referencia. */

  /* Y esto es lo que faltaba para centrarlo de verdad. El navegador centra
     el diálogo combinando `inset: 0` con `margin: auto`, pero el reset de
     arriba (`*{margin:0}`) le quitaba esa segunda mitad y lo dejaba pegado
     al borde izquierdo. Hay que devolvérselo a mano. */
  margin: auto;

  width: min(92vw, 430px);
  max-height: 88svh;
  padding: clamp(30px, 8vw, 42px) clamp(22px, 6vw, 32px);
  border: 0;
  border-radius: 4px;
  background: var(--papel);
  color: var(--tinta);
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(45,51,28,.4);
}

/* Fondo difuminado */
.modal::backdrop{
  background: rgba(45,51,28,.5);
  -webkit-backdrop-filter: blur(7px);
          backdrop-filter: blur(7px);
}

.modal[open]{ animation: modalEntra .42s cubic-bezier(.22,.61,.36,1); }
.modal[open]::backdrop{ animation: fondoEntra .42s ease; }

@keyframes modalEntra{
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes fondoEntra{
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal__cerrar{
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--salvia-txt);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.modal__cerrar:hover{ background: var(--crema); color: var(--verde-osc); }
.modal__cerrar svg{
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round;
}

.modal__kicker{
  font-family: var(--script);
  font-size: clamp(1.3rem, 6vw, 1.55rem);
  color: var(--salvia-txt);
  text-align: center;
}
.modal__h{
  font-family: var(--serif);
  font-size: clamp(1.3rem, 6vw, 1.55rem);
  font-weight: 400;
  color: var(--tinta);
  text-align: center;
  margin-top: 2px;
}
.modal__h::after{
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--salvia);
  margin: clamp(14px, 4vw, 18px) auto 0;
}

/* ── Campos ── */
.campo{
  display: block;
  position: relative;
  margin-top: clamp(20px, 5vw, 26px);
  border: 0;
  padding: 0;
}
.campo__label{
  display: block;
  font-family: var(--serif);
  font-size: var(--txt-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-osc);
  margin-bottom: 9px;
  padding: 0;
}

.campo__input{
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--salvia-claro);
  border-radius: 2px;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;   /* 16px evita que iOS haga zoom al enfocar */
  line-height: 1.6;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.campo__input::placeholder{ color: var(--salvia-txt); opacity: .68; }
.campo__input:focus{
  outline: none;
  border-color: var(--salvia);
  box-shadow: 0 0 0 3px rgba(141,154,118,.18);
}
.campo__area{
  resize: vertical;
  min-height: 92px;
}

.campo__opcional{
  display: block;
  font-size: .78rem;
  color: var(--salvia-txt);
  margin-top: 6px;
  text-align: right;
}

.campo__error{
  display: none;
  font-size: .8rem;
  color: #8C4A3C;
  margin-top: 6px;
}
.campo--error .campo__error{ display: block; }
.campo--error .campo__input{ border-color: #B87A6C; }

/* ── Asistiré / No podré ir ── */
.campo--opciones{ margin-top: clamp(20px, 5vw, 26px); }

.opciones{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.opcion input{
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.opcion__caja{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(15px, 4vw, 19px) 8px;
  border: 1px solid var(--salvia-claro);
  border-radius: 3px;
  background: var(--blanco);
  font-family: var(--serif);
  font-size: clamp(.8rem, 3.3vw, .88rem);
  letter-spacing: var(--ls-suave);
  color: var(--verde-osc);
  cursor: pointer;
  transition: all .28s ease;
}
.opcion__caja svg{
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .72;
  transition: opacity .28s ease;
}
.opcion__caja:hover{ border-color: var(--salvia); }

/* Estado seleccionado */
.opcion input:checked + .opcion__caja{
  background: var(--verde-osc);
  border-color: var(--verde-osc);
  color: var(--blanco);
  box-shadow: 0 6px 16px rgba(45,51,28,.22);
}
.opcion input:checked + .opcion__caja svg{ opacity: 1; }
.opcion input:focus-visible + .opcion__caja{
  box-shadow: 0 0 0 3px rgba(141,154,118,.35);
}

/* ═══════════════════════════════════════════════════════
   BLOQUE 8B — LA CANCIÓN
   Va pegado al de confirmación, así que lleva el papel claro
   para que no parezcan un solo bloque larguísimo de crema.
   ═══════════════════════════════════════════════════════ */
.cancion{
  position: relative;
  z-index: 2;
  padding: clamp(52px, 13vw, 72px) var(--pad) clamp(58px, 14vw, 78px);
  background: var(--papel);
  text-align: center;
}
.cancion__titulo{
  font-family: var(--serif);
  font-size: var(--txt-titulo);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
  text-wrap: balance;
}
.cancion__texto{
  max-width: 34ch;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: var(--txt-cuerpo);
  line-height: 1.75;
  color: var(--verde-osc);
  text-wrap: pretty;
}
/* El formulario se estrecha respecto al texto: una caja de escritura a
   todo lo ancho de la pantalla invita a escribir un ensayo, y aquí lo
   que se espera es un título de canción. */
.cancion__form{
  max-width: 380px;
  margin: clamp(24px, 6vw, 34px) auto 0;
  text-align: left;
}
.cancion__form .cta{
  width: 100%;
  margin-top: clamp(22px, 5vw, 28px);
}
.cancion__gracias{
  max-width: 380px;
  margin: clamp(28px, 7vw, 38px) auto 0;
}
.cancion__gracias[hidden]{ display: none; }
.cancion__gracias-p{
  margin-bottom: clamp(16px, 4vw, 22px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--salvia-txt);
  text-wrap: pretty;
}

/* Aviso de envío fallido. Tono cálido y no alarmista: el invitado no ha
   hecho nada mal, y lo último que queremos es que se sienta regañado
   justo cuando estaba diciendo que sí. */
.modal__fallo{
  margin-top: .9rem;
  padding: .75rem .9rem;
  border-radius: 4px;
  background: rgba(158,85,64,.08);
  border-left: 2px solid #9E5540;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.55;
  color: var(--verde-osc);
}
.modal__fallo[hidden]{ display: none; }

.cta--modal{
  display: block;
  width: 100%;
  margin-top: clamp(26px, 6vw, 32px);
}

/* ── Agradecimiento ── */
.gracias{
  text-align: center;
  padding: clamp(12px, 4vw, 20px) 0;
  animation: modalEntra .5s cubic-bezier(.22,.61,.36,1);
}
.gracias__sello{
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--salvia-claro);
}
.gracias__sello svg{
  width: 27px; height: 27px;
  fill: var(--verde-osc);
}
.gracias__h{
  font-family: var(--script);
  font-size: clamp(1.9rem, 9vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--tinta);
  margin-top: clamp(16px, 4vw, 20px);
}
.gracias__p{
  font-size: clamp(.88rem, 3.6vw, .96rem);
  line-height: 1.9;
  color: var(--verde-osc);
  max-width: 30ch;
  margin: clamp(12px, 3vw, 16px) auto 0;
}
.gracias .btn{ margin-top: clamp(22px, 6vw, 28px); }

/* ───────────────────────────────────────────────
   ANIMACIÓN DE ENTRADA AL HACER SCROLL
   ─────────────────────────────────────────────── */
[data-anim]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
              transform 1.1s cubic-bezier(.22,.61,.36,1);
}
[data-anim].visible{
  opacity: 1;
  transform: none;
}
[data-delay="1"]{ transition-delay: .16s; }
[data-delay="2"]{ transition-delay: .32s; }
[data-delay="3"]{ transition-delay: .48s; }
[data-delay="4"]{ transition-delay: .64s; }
[data-delay="5"]{ transition-delay: .80s; }
[data-delay="6"]{ transition-delay: .96s; }
[data-delay="7"]{ transition-delay: 1.12s; }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  [data-anim]{ opacity:1; transform:none; transition:none; }
  .cal__estrella{ animation: none; }
}

/* ═══════════════════════════════════════════════════════
   RITMO DE FONDOS
   Papel, crema, papel, crema… en orden fijo. Antes los
   fondos alternaban sin patrón y el scroll se sentía
   improvisado; con una cadencia regular se lee compuesto.
   ═══════════════════════════════════════════════════════ */

.hero,
.itin,
.historia,
.info    { background: var(--papel); }

.lugar,
.dress,
.regalos,
.rsvp    { background: var(--crema); }

/* Las cajas interiores tienen que seguir despegándose del fondo:
   sobre crema, una caja crema desaparecería. */
.veto,
.nota{
  background: var(--papel);
  border-color: var(--salvia-claro);
}

/* ═══════════════════════════════════════════════════════
   BORDES RASGADOS
   El mismo recurso de la franja del itinerario, aplicado a
   dos secciones más para que el corte entre bloques no sea
   siempre una línea recta.
   ═══════════════════════════════════════════════════════ */

.dress,
.rsvp{
  -webkit-mask-image: var(--mask-rasgado);
          mask-image: var(--mask-rasgado);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* El recorte se come unos píxeles arriba y abajo: se compensan
     para que el contenido conserve su respiración. */
  padding-top: calc(clamp(52px, 13vw, 72px) + 14px);
  padding-bottom: calc(clamp(56px, 14vw, 76px) + 14px);
}

/* ═══════════════════════════════════════════════════════
   ADORNOS DE EUCALIPTO
   Una foto real recortada (img/eucalipto.webp), colocada
   con pseudo-elementos: no toca el HTML ni ninguna regla
   existente. Van siempre en zonas de fondo vacías y con
   z-index 0, por debajo de todo el contenido.
   ═══════════════════════════════════════════════════════ */

.hero::before,
.rsvp::before,
.regalos::before,
.itin::before,
.itin::after,
.dress::before,
.historia::before{
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  /* ── La clave para que no parezcan calcomanías ──
     La foto recortada tiene bordes rectos por los cuatro lados. Sin tratar,
     la rama se corta en seco y se nota el rectángulo.
     Este degradado la deja sólida junto a su punto de origen (el borde de la
     pantalla, que queda fuera del encuadre) y la difumina hacia el interior,
     así parece que nace del canto y se desvanece.
     En las que van espejadas el degradado se espeja con ellas, por eso el
     origen es siempre 0% del propio elemento. */
  --nacer: radial-gradient(ellipse 145% 125% at 0% 35%,
             #000 38%, rgba(0,0,0,.85) 55%, rgba(0,0,0,.35) 76%, transparent 92%);
  -webkit-mask-image: var(--nacer);
          mask-image: var(--nacer);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Las tres fotos recortadas, cada una con su proporción */
.hero::before,
.itin::before,
.itin::after{
  background-image: url('../img/eucalipto.webp');
  aspect-ratio: 390 / 560;
}
.rsvp::before,
.dress::before,
.historia::before{
  background-image: url('../img/vert.webp');
  aspect-ratio: 210 / 360;
}
.regalos::before{
  background-image: url('../img/flores.webp');
  aspect-ratio: 500 / 302;
  /* Las flores son rosadas y la paleta es verde: bajarles la saturación
     las integra en lugar de dejarlas como una mancha de otro color. */
  filter: saturate(.72);
}

/* ═══ Colocación en móvil ═══
   Aquí no hay márgenes laterales libres, así que cada rama asoma desde el
   borde y se sitúa a la altura de una zona de fondo comprobada: el espacio
   por encima del primer texto de cada sección. */

/* Hero: esquina superior izquierda */
.hero::before{
  top: clamp(-126px, -33vw, -104px);
  left: -38px;
  width: clamp(118px, 33vw, 146px);
  opacity: .5;
}

/* Regalos: flores entrando por el borde derecho.
   Va espejada para que su punto de origen —el 0% del elemento, de donde
   arranca el degradado— caiga sobre el borde de la pantalla. */
.regalos::before{
  top: 10px;
  right: -52px;
  width: clamp(130px, 38vw, 175px);
  opacity: .45;
  transform: scaleX(-1);
}

/* Confirmación: rama vertical entrando por el borde izquierdo */
.rsvp::before{
  top: 18%;
  left: -62px;
  width: clamp(78px, 23vw, 106px);
  opacity: .42;
}

/* Estas dos necesitan márgenes laterales que en móvil no existen */
.itin::before,
.itin::after,
.dress::before,
.historia::before{ display: none; }

/* ═══════════════════════════════════════════════════════
   PANTALLAS GRANDES
   En móvil no cambia NADA: todo lo de abajo vive dentro de
   media queries.

   La idea: en escritorio el papel deja de ser una hoja
   flotando sobre un fondo. Las secciones pasan a ocupar el
   ancho completo y el contenido se organiza en columnas,
   que es lo que hace que algo se lea como sitio y no como
   un PDF centrado.
   ═══════════════════════════════════════════════════════ */

/* ── Tablet: solo un poco más de ancho ── */
@media (min-width: 700px) and (max-width: 999px){
  :root{
    --ancho-lienzo: 620px;
    --pad: 58px;
  }
  .lienzo{
    margin-block: 46px;
    box-shadow: 0 2px 5px rgba(45,51,28,.05), 0 20px 55px rgba(45,51,28,.11);
  }
}

/* ── Laptop y escritorio ── */
@media (min-width: 1000px){

  :root{
    /* Truco central: --pad deja de ser un margen fijo y pasa a ser el espacio
       que centra el contenido en 720px. Como TODAS las secciones ya usan
       `var(--pad)` como padding lateral, con esta sola línea el sitio entero
       queda centrado sin tocar ni una etiqueta del HTML — y sin alterar el
       orden vertical de nada. */
    --pad: max(40px, calc((100% - 720px) / 2));
  }

  /* El papel ocupa toda la ventana: se acabó la hoja flotando sobre un fondo.
     El ritmo lo dan los cambios de color entre secciones. */
  .lienzo{
    max-width: none;
    margin: 0;
    box-shadow: none;
  }

  /* ── Elementos que se salen a todo el ancho de la ventana ──
     Son los que rompen la lectura de "documento": la foto del hero, la franja
     del itinerario y la cinta final llegan de borde a borde. */
  .foto-hero img{ height: 520px; }

  .itin__papel{ padding-block: clamp(52px, 5vw, 68px); }
  .itin__lista{ max-width: 400px; }

  /* ── Tamaños con tope: sin esto se estiran con la ventana ── */
  .carrusel{
    max-width: 360px;
    margin-inline: auto;
  }
  .duo{ max-width: 520px; margin-inline: auto; }
  .cal__grid{ max-width: 360px; }

  /* ── Bloques de texto: ancho de lectura cómodo ── */
  .veto,
  .broma,
  .llegada{
    max-width: 560px;
    margin-inline: auto;
  }

  /* ── Adornos en los márgenes laterales ──
     El contenido está centrado en 720px, así que a los lados queda una franja
     vacía de (100vw - 720px) / 2. La rama nunca pasa de ese ancho, por eso no
     puede tocar el texto por estrecha que sea la ventana. */
  /* ── Adornos en escritorio ──
     Regla del bloque: TODAS nacen fuera de la ventana y entran cortadas por
     el borde. Una rama que empieza y acaba en mitad del margen se lee como
     una calcomanía pegada; cortada por el canto, parece que continúa fuera.
     Y van alternando lado —izquierda, derecha, izquierda…— para que el
     recorrido tenga ritmo en lugar de acumularse. */
  .hero::before,
  .itin::before,
  .regalos::before,
  .rsvp::before,
  .dress::before,
  .historia::before{
    display: block;
    top: auto; bottom: auto; left: auto; right: auto;
    /* Nunca más ancha que el margen libre a los lados del contenido */
    --rama: min(250px, calc((100vw - 770px) / 2));
    width: var(--rama);
  }

  /* Casi la mitad de la rama queda fuera del encuadre: lo que se ve es la
     continuación de algo que viene de más allá del borde. */
  .hero::before,
  .itin::before,
  .dress::before{ left: calc(var(--rama) * -.42); }

  .regalos::before,
  .rsvp::before,
  .historia::before{ right: calc(var(--rama) * -.42); }

  /* Las del lado derecho van espejadas, y con ellas su degradado:
     así el origen sólido queda pegado al canto de la pantalla. */
  .regalos::before,
  .rsvp::before,
  .historia::before{ transform: scaleX(-1); }

  .hero::before    { top: 26px;  opacity: .58; }
  .dress::before   { top: 84px;  opacity: .5; }
  .historia::before{ top: 70px;  opacity: .48; }
  .regalos::before { top: 86px;  opacity: .46; }
  .rsvp::before    { top: 64px;  opacity: .5; }

  /* Itinerario: una sola, entrando por la izquierda */
  .itin::before    { top: 150px; opacity: .48; }
  .itin::after     { display: none; }

  /* Las verticales son más estrechas: si no, comen demasiado margen */
  .dress::before,
  .historia::before,
  .rsvp::before{ --rama: min(190px, calc((100vw - 790px) / 2)); }

  /* ── Un respiro más entre secciones, sin exagerar ── */
  .hero{ padding-block: clamp(80px, 7vw, 104px) 64px; }
  .lugar,
  .dress,
  .historia,
  .regalos,
  .rsvp{ padding-block: 88px; }
  /* Las dos con borde rasgado necesitan algo más, porque el recorte
     se come unos píxeles arriba y abajo */
  .dress,
  .rsvp{ padding-block: 102px; }
  .itin__titulo{ padding-block: 88px 48px; }
  .itin{ padding-bottom: 88px; }
}

/* ── Monitores grandes: el contenido se ensancha un poco, no se dispersa ── */
@media (min-width: 1500px){
  :root{ --pad: max(40px, calc((100% - 780px) / 2)); }
  .foto-hero img{ height: 560px; }
}


/* ═══════════════════════════════════════════════════════════════
   BLOQUE 0 — LA PORTADA
   Sobre de dos hojas que se abren hacia los lados al desatar el lazo.

   Ojo con el nombre: la clase .sobre ya está tomada por el icono del
   bloque de Regalos. Todo lo de aquí lleva el prefijo "portada".
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Lacre en el verde oliva de la casa. Contra el lazo blanco es el
     único punto oscuro de la portada, así que se lleva la mirada solo
     — que es justo lo que tiene que hacer un botón. */
  --cera:     #64704A;
  --cera-osc: #3F4A2E;
  /* El lazo es de encaje blanco. Blanco puro sobre papel crema se vería
     como un agujero, así que el tono medio tira apenas a marfil y toda la
     profundidad la ponen las sombras cálidas, no un gris. */
  --cinta:    #FBF8F2;   /* marfil: el cuerpo de la cinta */
  --cinta-cl: #FFFFFF;   /* la luz que le da de lleno */
  --cinta-os: #DCD3C4;   /* el pliegue en sombra */
  --cinta-h: clamp(17px, 4.6vw, 23px);

  --sello: clamp(74px, 21vw, 94px);
}

/* Con la portada cerrada el sitio no se desplaza. position:fixed es más
   fiable que overflow:hidden a secas: en iOS el scroll se escapa igual. */
body.cerrado{
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

.portada{
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
}

/* ── Velo: difumina el sitio que está detrás ──
   Es lo que hace que al abrirse las hojas no aparezca el landing de
   golpe y nítido, sino que se vaya enfocando. */
/* El velo es un blanco opaco, no un cristal esmerilado.
   Antes difuminaba el sitio que había detrás, y al abrirse las hojas
   aparecía la invitación ya montada, borrosa: el ojo la reconocía antes
   de tiempo y la entrada perdía la sorpresa. Con el blanco liso las
   hojas se abren sobre la nada, y el sitio nace de ahí.
   De paso se ahorra un `backdrop-filter` a pantalla completa, que es de
   las cosas más caras que se le pueden pedir a un teléfono. */
.portada__velo{
  position: absolute;
  inset: 0;
  background: var(--blanco);
  transition: opacity 2.1s cubic-bezier(.33,0,.3,1);
}

/* La perspectiva va en el padre DIRECTO de las hojas, o el giro se ve
   plano. Es el mismo detalle que hay en las tarjetas de la historia. */
.portada__escena{
  position: absolute;
  inset: 0;
  perspective: 1700px;
  perspective-origin: 50% 45%;
}

/* ── Las dos hojas ── */
.portada__hoja{
  position: absolute;
  top: 0; bottom: 0;
  width: 50.2%;   /* un pelo más de la mitad: evita una rendija por redondeo */
  /* Sin overflow:hidden a propósito: el ramo tiene que poder asomar por
     la costura. Con el recorte activo quedaba cortado en seco justo ahí. */
  backface-visibility: hidden;
  /* El papel: fibra real (mosaico generado) fundida sobre la crema del
     sitio. En soft-light el gris de la textura no altera el color, solo
     levanta y hunde el grano. */
  background-image:
    url('../img/papel.webp'),
    linear-gradient(180deg, #FBF7EF 0%, var(--papel) 42%, #EFE7D8 100%);
  background-size: 300px auto, 100% 100%;
  background-blend-mode: soft-light, normal;
  /* Curva lenta y larga. Arranca con desgana —el papel pesa— y frena muy
     despacio al final, que es como se abre una hoja de verdad. */
  transition: transform 2.6s cubic-bezier(.5,.01,.22,1),
              box-shadow 2.6s ease-out;
  will-change: transform;
}

/* La bisagra de cada hoja va en su borde exterior: se abren como
   dos puertas hacia fuera. */
.portada__hoja--izq{
  left: 0;
  transform-origin: left center;
  /* La luz entra por arriba a la izquierda, así que esta hoja recibe algo
     más de claridad y la sombra del doblez cae a su derecha. Dos sombras:
     una estrecha y densa pegada a la costura, y otra ancha y suave que se
     desvanece hacia dentro. El papel doblado se comporta así. */
  box-shadow:
    inset -10px 0 12px -8px rgba(58,50,34,.60),
    inset -52px 0 60px -40px rgba(58,50,34,.34);
}
.portada__hoja--der{
  right: 0;
  transform-origin: right center;
  box-shadow:
    inset 10px 0 12px -8px rgba(58,50,34,.44),
    inset 52px 0 60px -40px rgba(58,50,34,.24);
}

/* Canto de la costura.
   Una raya oscura no es profundidad: es una raya. Lo que hace creer que
   hay dos hojas separadas por una ranura son cuatro cosas seguidas, de
   fuera hacia dentro — el papel se va apagando, el filo recoge la luz,
   cae en sombra y al fondo queda la oscuridad de la ranura. Y la luz
   viene de arriba a la izquierda, así que la hoja derecha recibe menos
   brillo y más sombra: si las dos fueran iguales, se vería plano. */
.portada__canto{
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(7px, 2vw, 11px);
  pointer-events: none;
}
.portada__hoja--izq .portada__canto{
  right: 0;
  background:
    /* La ranura no es igual de honda de arriba abajo: se abre por el
       centro, que es donde el sobre cede. */
    linear-gradient(to bottom,
      rgba(38,32,22,.20) 0%, rgba(38,32,22,0) 22%,
      rgba(38,32,22,0) 78%, rgba(38,32,22,.22) 100%),
    linear-gradient(to right,
      rgba(120,105,80,0)    0%,
      rgba(120,105,80,.09) 40%,
      rgba(255,255,255,.85) 66%,
      rgba(255,255,255,.62) 72%,
      rgba(112,96,70,.42)  84%,
      rgba(46,38,26,.78)  100%);
}
.portada__hoja--der .portada__canto{
  left: 0;
  background:
    linear-gradient(to bottom,
      rgba(38,32,22,.24) 0%, rgba(38,32,22,0) 22%,
      rgba(38,32,22,0) 78%, rgba(38,32,22,.26) 100%),
    linear-gradient(to left,
      rgba(120,105,80,0)    0%,
      rgba(120,105,80,.16) 40%,
      rgba(255,255,255,.44) 68%,
      rgba(255,255,255,.30) 74%,
      rgba(102,86,62,.50)  86%,
      rgba(38,32,22,.72)  100%);
}

/* Viñeta y luz sobre el papel, coherentes en las dos hojas */
.portada__hoja::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 60% at 30% 4%,
      rgba(255,255,255,.5), transparent 60%),
    radial-gradient(ellipse 140% 105% at 50% 55%,
      transparent 52%, rgba(92,80,56,.20) 100%);
}

/* ── Textos ──
   Van encima de la costura, no sobre el papel: partir una palabra por el
   doblez se ve mal. Por eso se desvanecen al abrir las hojas. */
.portada__texto,
.portada__pie{
  position: absolute;
  left: 0; right: 0;
  padding: clamp(26px, 8vw, 44px) var(--pad);
  text-align: center;
  /* Una placa de luz debajo del texto. Sin ella la costura parte las
     palabras por la mitad y la viñeta de las esquinas se las come: es
     lo que las levanta del papel sin dibujarles una caja encima.
     La elipse tiene que apagarse ANTES de llegar al borde de la caja;
     si se sale, el corte deja una franja rectangular visible. De ahí el
     relleno generoso de arriba. */
  background: radial-gradient(ellipse 52% 58% at 50% 50%,
    rgba(255,253,249,.94) 0%,
    rgba(255,253,249,.78) 40%,
    rgba(255,253,249,.30) 70%,
    rgba(255,253,249,0)  100%);
  /* El retardo los deja un instante en pantalla después del toque: irse
     en el mismo fotograma que se pulsa se siente brusco. */
  transition: opacity .75s ease-out .4s, transform .9s ease-out .4s;
}
/* Y un halo pegado a cada letra, para el trozo de costura que sí queda
   por detrás del texto. La placa lo aleja; esto lo remata. */
.portada__texto *,
.portada__pie *{
  text-shadow:
    0 0 2px rgba(255,253,249,.95),
    0 0 9px rgba(255,253,249,.85);
}
/* Anclado al lazo, no a la pantalla: así la distancia entre el nombre y
   la cinta es la misma en cualquier alto de pantalla. */
/* El margen descuenta el relleno de la placa de luz: lo que tiene que
   quedar constante es la distancia del texto a la cinta, no la del
   borde invisible de su caja. */
.portada__texto{
  bottom: 50%;
  margin-bottom: clamp(46px, 10vw, 72px);
}
.portada__pie{
  top: 50%;
  margin-top: clamp(46px, 10vw, 72px);
}

/* Los tres textos de la portada suben un escalón de tamaño y otro de
   contraste respecto al resto del sitio. Aquí compiten con la costura,
   con la viñeta y con el lazo: el tono salvia que funciona dentro de la
   invitación aquí simplemente no se lee. */
.portada__invita{
  font-family: var(--serif);
  font-size: clamp(.84rem, 3.5vw, .96rem);
  font-weight: 500;
  letter-spacing: var(--ls-titulo);
  text-indent: var(--ls-titulo);
  text-transform: uppercase;
  color: var(--verde-osc);
}
.portada__para{
  margin-top: clamp(16px, 4.4vw, 24px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.95rem, 4vw, 1.1rem);
  letter-spacing: var(--ls-suave);
  color: var(--salvia-txt);
}
/* El nombre del invitado: es lo que tiene que leerse de un vistazo, así
   que va en el tono más oscuro y al mayor tamaño de la portada. */
.portada__nombre{
  margin-top: clamp(4px, 1.4vw, 8px);
  font-family: var(--serif);
  font-size: clamp(1.95rem, 9.4vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}
.portada__fecha{
  font-family: var(--serif);
  font-size: clamp(.86rem, 3.6vw, .98rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--verde-osc);
}
/* ── Las cintas que cruzan el sobre ──
   Cada mitad es un SVG estirado a lo ancho. Va cuatro veces más alto que
   la cinta porque la tela no ocupa toda la caja: necesita sitio por
   debajo para caer. El extremo del nudo se queda clavado en el centro de
   la caja, que es donde lo espera el lazo. El trazo grueso es la tela y los finos son la luz y
   la sombra, cada uno sobre la misma curva desplazada — así el brillo
   baja con la cinta en vez de quedarse en una franja horizontal. */
.portada__cinta{
  position: absolute;
  top: 50%;
  display: block;
  /* El ancho va explícito y no con left+right. Un SVG es un elemento
     reemplazado: con `width:auto` el navegador ignora esa pareja y usa
     su proporción interna, y la cinta se quedaba 16px corta del borde. */
  width: 50%;
  height: calc(var(--cinta-h) * 4);
  margin-top: calc(var(--cinta-h) * -2);
  pointer-events: none;
  overflow: visible;
  /* Sombra propia sobre el papel: una pegada al canto y otra difusa.
     Es lo que despega la cinta de la hoja en vez de dejarla pintada. */
  filter:
    drop-shadow(0 2px 1.5px rgba(120,105,80,.30))
    drop-shadow(0 7px 12px rgba(120,105,80,.20));
  will-change: transform;
  /* Cae DESPUÉS de que el lazo se afloje, y a la vez que él: primero se
     desata, luego se descuelga todo junto. Ese retardo es lo que hace
     que parezca desatarse en vez de desmontarse. */
  transition: transform .85s cubic-bezier(.4,0,.6,.92) 1.5s,
              opacity .6s ease-in 1.8s;
}
.portada__cinta--izq{ left: 0;  transform-origin: left center; }
.portada__cinta--der{ right: 0; transform-origin: right center; }

/* La tela. El extremo va a escuadra (`butt`) para que muera limpia en el
   borde de la pantalla y no asome una punta redondeada. */
.cinta__tela{
  fill: none;
  stroke: #E7DFD0;
  stroke-width: 20;
  stroke-linecap: butt;
}
/* Los dos brillos del raso: uno fuerte arriba del centro y otro tenue
   abajo. Con uno solo la cinta parece plástico; con dos, tela. */
.cinta__brillo{
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 6;
  stroke-linecap: butt;
  opacity: .95;
}
.cinta__brillo--tenue{ stroke-width: 3.4; opacity: .45; }
/* Sombra del canto superior y del inferior. La de abajo va más marcada:
   la luz cae desde arriba. */
.cinta__sombra{
  fill: none;
  stroke: #BFB39D;
  stroke-width: 4;
  stroke-linecap: butt;
  opacity: .5;
}
.cinta__sombra--baja{ stroke: #A9997F; stroke-width: 5; opacity: .55; }
/* Filo iluminado del borde de arriba: la línea que recoge la luz */
.cinta__filo{
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: butt;
  opacity: .55;
}
/* Frunce: donde la cinta entra en el nudo la tela se apretuja, y ese
   apelotonamiento es lo que hace creer que el nudo está atado de verdad
   y no dibujado encima. */
.cinta__frunce path{
  fill: none;
  stroke: #A9997F;
  stroke-width: 1.6;
  opacity: .3;
}

.portada__nudo{
  position: absolute;
  top: 50%;
  left: 50%;
  /* El lazo manda en la composición: cuanto más grande, más se lee el
     lacre como un medallón prendido al nudo y menos como un tapón. */
  width: clamp(300px, 94vw, 440px);
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  /* Cae con las cintas y en su mismo tiempo. El retardo es lo importante:
     la caída no arranca hasta que el lazo ha terminado de desatarse
     (1,26 s) y se le ha visto así un cuarto de segundo. Si se solapan, el
     lazo se apaga a mitad del desenredo y no llega a verse desatado.
     La curva acelera en vez de frenar: esto es una caída, y lo que cae
     va cada vez más rápido. */
  transition: transform .85s cubic-bezier(.4,0,.6,.92) 1.5s,
              opacity .6s ease-in 1.8s;
  /* Un lazo blanco sobre papel crema se despegaría solo con su sombra:
     sin esto, las lazadas se funden con la hoja. */
  filter:
    drop-shadow(0 2px 2px rgba(120,105,80,.30))
    drop-shadow(0 9px 16px rgba(120,105,80,.22));
}
/* Cada lazada y cada cola son un grupo de tres capas sobre el mismo
   contorno: la tela con su brillo, el calado del encaje encima y el
   borde de picos al final. Apiladas dan tejido; por separado, ninguna
   de las tres pasa por tela. */
.lazo__bucle--izq .lazo__tela{ fill: url(#raso-izq); }
.lazo__bucle--der .lazo__tela{ fill: url(#raso-der); }
.lazo__tela--rev{  fill: url(#raso-rev); }
.lazo__tela--nudo{ fill: url(#raso-nudo); }

/* El filo. En tela blanca el borde no se dibuja, se oscurece: una línea
   de color se vería como un contorno de dibujo animado. */
.lazo__filo{
  fill: none;
  stroke: #A9997F;
  stroke-opacity: .45;
  stroke-width: 1;
}

/* El brillo del raso: una franja de luz recorriendo la fibra. Ancha y
   desenfocada, porque en tela real el reflejo no tiene borde. */
.lazo__brillo{
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 9;
  stroke-linecap: round;
  opacity: .8;
  filter: url(#muy-difuso);
}
.lazo__brillo--corto{ stroke-width: 6; opacity: .6; }

/* Arrugas. Salen todas del nudo en abanico, que es hacia donde tira la
   tela: es el detalle que más delata a un lazo de verdad. */
.lazo__arruga{
  fill: none;
  stroke: #A08E73;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: .3;
  filter: url(#difuso);
}
.lazo__arruga--fina{ stroke-width: 1.8; opacity: .2; }

/* La penumbra del interior de la lazada: el hueco por donde se ve la
   cara de dentro de la cinta. Sin esto, la lazada se lee como un
   recorte plano en vez de como un aro de tela. */
.lazo__hueco{
  fill: none;
  stroke: #8F7C60;
  stroke-width: 11;
  stroke-linecap: round;
  opacity: .26;
  filter: url(#muy-difuso);
}

/* ── Cómo se desata ──
   Ninguna pieza se desvanece por su cuenta ni se va por su lado: el lazo
   se afloja entero y sigue siendo un lazo. Cada pieza pivota sobre su
   punto de amarre al nudo —ahí es donde está cosida— así que pierde
   tensión y se descuelga, pero nunca se separa. Lo que desaparece es el
   conjunto, ya flojo, cayendo de una pieza. */
.lazo__bucle{
  transform-box: fill-box;
  /* El giro parte del nudo, no del centro de la lazada: es el punto por
     el que está sujeta. */
  transform-origin: 100% 62%;
  /* Medio segundo de espera: el lazo no se mueve hasta que el sello ha
     terminado de caer. Es lo que convierte dos animaciones sueltas en
     una causa y su efecto. */
  transition: transform .66s cubic-bezier(.34,0,.24,1) .52s;
}
.lazo__bucle--der{ transform-origin: 0% 62%; }

.lazo__cola{
  transform-box: fill-box;
  transform-origin: 100% 0%;
  /* Las colas se descuelgan hacia la vertical con un pelo de retardo
     sobre las lazadas, para que se lea el orden. */
  transition: transform .68s cubic-bezier(.3,0,.25,1) .58s;
}
.lazo__cola--der{ transform-origin: 0% 0%; }

/* El nudo se afloja el primero: es el que suelta a los demás. Va justo
   detrás del lacre, así que se descubre al caer éste. */
.lazo__nudo{
  transform-box: fill-box;
  transform-origin: 50% 45%;
  transition: transform .6s cubic-bezier(.36,0,.28,1) .46s;
}

/* ── Sello de cera: hace de nudo ── */
.portada__sello{
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sello);
  aspect-ratio: 1;
  --giro: -6deg;
  transform: translate(-50%, -50%) rotate(var(--giro));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.34) 0%, transparent 26%),
    radial-gradient(circle at 34% 30%,
      #909C74 0%, #78855C 34%, var(--cera) 58%, var(--cera-osc) 100%);
  /* La cera nunca cae perfectamente redonda */
  clip-path: polygon(
    50% 0%, 66% 4%, 79% 12%, 91% 24%, 96% 38%, 100% 52%,
    95% 66%, 87% 79%, 74% 90%, 60% 97%, 45% 100%, 31% 94%,
    18% 86%, 8% 74%, 2% 60%, 0% 45%, 5% 31%, 13% 18%, 25% 8%, 38% 2%);
  /* En filter y no en box-shadow: el clip-path recortaría un box-shadow
     y no se vería nada. Así la sombra sigue el borde irregular. */
  filter:
    drop-shadow(0 3px 4px rgba(30,38,18,.44))
    drop-shadow(0 10px 18px rgba(30,38,18,.32));
  animation: latido-sello 2.4s ease-in-out 1.2s infinite;
  transition: opacity .5s ease-out, transform .7s cubic-bezier(.4,0,.2,1);
}
/* Disco del cuño */
.portada__sello::before{
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%,
    rgba(0,0,0,.10), rgba(0,0,0,.20) 72%, rgba(255,255,255,.12) 100%);
  box-shadow:
    inset 0 2px 4px rgba(26,34,14,.55),
    inset 0 -1px 2px rgba(214,226,180,.26);
}
/* Reborde de cera rebosada */
.portada__sello::after{
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1px rgba(220,232,188,.32),
    inset 0 -2px 3px rgba(26,34,14,.34);
  pointer-events: none;
}
.portada__mono{
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: clamp(1.24rem, 5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-indent: .09em;
  color: #DCE5C4;
  text-shadow:
    -1px -1px 1px rgba(226,236,198,.42),
     1px  1px 2px rgba(24,32,14,.72);
}
.portada__mono i{ font-style: normal; opacity: .5; margin: 0 .1em; }

/* Latido de verdad: dos golpes, no uno. El corazón hace pum-PUM y luego
   calla — el primer golpe más corto, el segundo más fuerte, y después
   una pausa larga que ocupa dos tercios del ciclo. Un solo pulso suave
   parece que la página respira; dos con pausa parece un latido. */
@keyframes latido-sello{
  0%   { transform: translate(-50%,-50%) rotate(var(--giro)) scale(1); }
  6%   { transform: translate(-50%,-50%) rotate(var(--giro)) scale(1.075); }
  13%  { transform: translate(-50%,-50%) rotate(var(--giro)) scale(1.005); }
  21%  { transform: translate(-50%,-50%) rotate(var(--giro)) scale(1.105); }
  34%  { transform: translate(-50%,-50%) rotate(var(--giro)) scale(1); }
  100% { transform: translate(-50%,-50%) rotate(var(--giro)) scale(1); }
}

/* Y responde a quien lo toca: al apuntarlo deja de latir y se queda
   crecido; al apretarlo se hunde. Eso es lo que lo convierte de adorno
   animado en botón. */
@media (hover: hover){
  .portada__sello:hover{
    animation: none;
    transform: translate(-50%,-50%) rotate(var(--giro)) scale(1.07);
  }
}
.portada__sello:active{
  animation: none;
  transform: translate(-50%,-50%) rotate(var(--giro)) scale(.94);
  transition: transform .12s ease-out;
}
.portada__sello:focus-visible{ outline: 2px solid var(--verde-osc); outline-offset: 6px; }

/* ── Pista ── */
.portada__pista{
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(30px, 8vh, 54px);
  text-align: center;
  font-family: var(--serif);
  font-size: var(--txt-mini);
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);
  text-transform: uppercase;
  color: var(--verde-osc);
  text-shadow: 0 0 8px rgba(255,253,249,.9);
  transition: opacity .45s ease;
}

/* ═══ La apertura ═══
   Tres tiempos encadenados: se desata el lazo, se abren las hojas y se
   enfoca el fondo. Cada uno arranca antes de que acabe el anterior, para
   que se lea como un solo gesto y no como tres pasos. */

/* 1 · Primero se va el sello. Nada más se mueve hasta que termina: el
   lacre es lo que sujetaba el lazo, así que soltarlo es lo que da pie a
   todo lo demás. Encadenados así se leen como un gesto; a la vez, como
   un efecto. */
.portada.desatando .portada__sello{
  animation: none;
  opacity: 0;
  /* Se despega, se ladea y cae: no se desvanece en el sitio. */
  transform: translate(-50%, 6%) rotate(-24deg) scale(.82);
  transition: opacity .38s ease-out .08s,
              transform .52s cubic-bezier(.4,0,.34,1);
}

/* 2 · Y entonces sí, el lazo se afloja — sin soltarse por ningún lado */

/* Un lazo que se desata pierde las lazadas: tiras de un extremo, la
   cinta pasa por el nudo y sale por las colas. Eso es lo que hay que
   contar, y son dos movimientos simultáneos que se explican el uno al
   otro — las lazadas se comen hacia el nudo y las colas crecen justo lo
   que ellas pierden. Sin la pareja, encoger las lazadas parece que se
   rompen; con ella, parece que la cinta corre.

   Lo que lo mantiene unido es el punto de giro: todo pivota y escala
   sobre su amarre al nudo, así que nada se despega ni se va por su
   lado, y ninguna pieza se desvanece por su cuenta. */

/* El nudo se afloja y se aplana: sin lazadas que sujetar, se deshace
   sobre la propia cinta. */
.portada.desatando .lazo__nudo{
  transform: scale(1.3, .58) translateY(2px);
}

/* Las lazadas se meten dentro del nudo. Ojo con el signo del giro: el
   amarre está en el lado del nudo, así que la izquierda cuelga girando
   en NEGATIVO y la derecha al revés. Cambiados, las dos suben y el lazo
   parece que se aprieta en vez de soltarse. */
.portada.desatando .lazo__bucle--izq{
  transform: rotate(-14deg) scale(.16, .5);
}
.portada.desatando .lazo__bucle--der{
  transform: rotate(14deg) scale(.16, .5);
}

/* Y las colas se alargan la mitad de su largo y se enderezan hacia la
   vertical: es la cinta que acaba de salir de las lazadas. */
.portada.desatando .lazo__cola--izq{
  transform: rotate(-13deg) scaleY(1.5);
}
.portada.desatando .lazo__cola--der{
  transform: rotate(13deg) scaleY(1.5);
}

/* Ya desatado, el lazo se suelta del sobre y cada extremo se va por su
   lado. El nudo, en el centro, no tiene a dónde ir: simplemente cae.
   Eso es lo que hace una cinta cuando la sueltas — no se desintegra
   donde estaba, se escurre. */
.portada.desatando .portada__nudo{
  transform: translate(-50%, -19%) rotate(2.5deg);
  opacity: 0;
}
/* Cada mitad se desliza hacia SU borde mientras cae, girando sobre el
   extremo de la pantalla, que es de donde tira el peso. El ángulo está
   calculado para que el extremo del nudo baje casi lo mismo que el lazo
   —65 px contra 57— y los dos sigan tocándose durante la caída, en
   cualquier ancho de pantalla. */
.portada.desatando .portada__cinta--izq{
  transform: translate(-12%, 34px) rotate(9deg);
  opacity: 0;
}
.portada.desatando .portada__cinta--der{
  transform: translate(12%, 34px) rotate(-9deg);
  opacity: 0;
}

.portada.desatando .portada__pista{ opacity: 0; }

/* Los textos se retiran DURANTE el desenredo, no al abrirse las hojas.
   Dos razones: ya han hecho su trabajo —el invitado acaba de tocar— y,
   sobre todo, las colas del lazo se alargan justo por encima de la
   fecha. Si el texto siguiera ahí, la cinta le pasaría por encima. Se
   van antes de que eso ocurra y el desenredo se queda con el escenario
   para él solo. */
.portada.desatando .portada__texto,
.portada.desatando .portada__pie{
  opacity: 0;
  transform: translateY(-10px);
}

/* 3 · Las hojas se abren */
/* Las dos no arrancan a la vez: 90 ms de diferencia. Simétrico exacto se
   ve mecánico; con ese desfase mínimo parece que las abren unas manos. */
.portada.abriendo .portada__hoja--izq{
  transform: rotateY(-112deg);
  box-shadow:
    inset -14px 0 16px -8px rgba(58,50,34,.72),
    inset -80px 0 90px -40px rgba(58,50,34,.55);
}
.portada.abriendo .portada__hoja--der{
  transform: rotateY(112deg);
  transition-delay: .09s;
  box-shadow:
    inset 14px 0 16px -8px rgba(58,50,34,.62),
    inset 80px 0 90px -40px rgba(58,50,34,.48);
}

/* 4 · El fondo se enfoca y la capa se retira */
.portada.saliendo .portada__velo{ opacity: 0; }
/* Deja de estorbar en cuanto empieza a disolverse: el sitio ya es suyo,
   aunque el blanco tarde dos segundos más en irse del todo. */
.portada.saliendo{ pointer-events: none; }

/* El sitio aparece por debajo del blanco, no detrás de él. Sube su
   opacidad a la vez que el velo baja la suya, así que en el medio no
   hay ni un fotograma en que algo salte: el degradado de uno tapa el
   del otro. Es lo que separa una aparición de un cambio de pantalla. */
.lienzo{
  opacity: 1;
  transition: opacity 1.6s ease-out;
}
body.cerrado .lienzo{ opacity: 0; }

/* ── Escritorio ──
   El sobre no debe ocupar una pantalla ancha entera: se convierte en un
   objeto centrado, apoyado sobre el fondo oscuro. */
@media (min-width: 760px){
  /* En pantalla ancha el blanco del velo lleva un punto de crema, para
     que la tarjeta —que también es clara— no se funda con el fondo. Las
     tres sombras de abajo hacen el resto. */
  .portada__velo{ background: #F1EBDF; }

  .portada__escena{
    width: min(74vw, 620px);
    height: min(86vh, 780px);
    inset: auto;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Tres sombras a distinta distancia: una sola grande se ve dibujada;
       escalonadas dan el contacto duro y la difusa de ambiente. */
    filter:
      drop-shadow(0 3px 5px rgba(16,22,8,.30))
      drop-shadow(0 18px 34px rgba(16,22,8,.32))
      drop-shadow(0 48px 90px rgba(16,22,8,.40));
  }
  /* La pista se ancla al borde de la tarjeta, no al de la ventana: con
     el borde de la ventana caía justo encima del canto inferior y en
     pantallas bajas se salía del sobre. Misma cuenta que la tarjeta —la
     mitad de su alto desde el centro— y unos milímetros hacia dentro. */
  .portada__pista{
    bottom: calc(50% - min(86vh, 780px) / 2 + clamp(18px, 3.4vh, 34px));
  }
}

/* ── Pantallas bajas ── */
@media (max-height: 620px){
  :root{ --sello: clamp(66px, 17vh, 88px); }
  .portada__texto{ top: clamp(26px, 7vh, 54px); }
  .portada__invita{ font-size: clamp(1.05rem, 4.2vh, 1.45rem); }
}
@media (max-height: 420px){
  :root{ --sello: clamp(54px, 16vh, 70px); }
  .portada__pista{ display: none; }
  .portada__invita{ font-size: clamp(.95rem, 4.4vh, 1.2rem); }
}

/* ── Quien pidió menos movimiento recibe solo el fundido ── */
@media (prefers-reduced-motion: reduce){
  .portada__sello{ animation: none; }
  .portada__hoja{ transition: opacity .5s ease; }
  .portada.abriendo .portada__hoja{ transform: none; opacity: 0; }
  .lienzo{ transition: opacity .4s linear; }
  .portada__velo{ transition: opacity .5s linear; }
  .portada__nudo,
  .portada__cinta{ transition: opacity .4s ease; }
  /* Sin `transform: none`: le quitaría al lazo el centrado y daría un
     salto justo antes de apagarse. Aquí sólo se funde. */
  .portada.desatando .portada__nudo{ opacity: 0; }
  .portada.desatando .portada__cinta{ opacity: 0; transform: none; }
}