/* ═══════════ Estephany y Jorge · boda · su identidad ═══════════
   Va DESPUÉS de estilos.css (el motor, que no se edita). Las animaciones de
   fondo viven aparte, en css/animaciones.css, para cambiarlas sin tocar esto.

   LO QUE PIDIÓ (llamada del 7 oct): romántico y elegante. Mesas y sillas nude,
   sillas rosas, centros de mesa con rosas blanco y rosa tenue. Nada fuera de
   su paleta, aunque se vale proponer un tono.

   CÓMO SE TRADUJO:
     · papel marfil muy claro de fondo, mucho aire entre secciones;
     · satén rosa en el sobre y en los marcadores de foto;
     · rosas dibujadas en su paleta (assets/ramo.svg, corona.svg, divisor.svg);
     · un ORO CHAMPAÑA de acento (#C2A06A) — el tono que propone Pedro — sólo
       en filetes, rombos, el hilo y el aro del calendario;
     · un MOKA PROFUNDO (#5E4A40, su moka oscurecido) para el texto fuerte, los
       botones y dos bloques: la cápsula y el pie. Es el único tono "nuevo"
       además del oro, y sale de su moka: sin él, ningún texto se leería (el
       moka de la paleta da 2.6 de contraste sobre el marfil; hace falta 4.5).

   CONTRASTES MEDIDOS (mínimo legible 4.5):
     tinta #4A3830 sobre papel 10.4 · sobre marfil 9.0 · sobre rosa 7.2
     tinta suave #6E564B sobre papel 6.4 · sobre marfil 5.5 · sobre rosa claro 5.7
     oro de texto #7A5A2A sobre papel 5.9 · sobre marfil 5.1
     marfil #EEE6DF sobre moka profundo 6.7 · champaña #F1DDB3 sobre moka 6.2

   ⚠️ ESTAS VARIABLES ESTÁN COPIADAS EN LA BASE (eventos.config.estilo, migración
   032). El motor las escribe en la raíz al cargar el evento, así que si se
   cambia un color aquí hay que cambiarlo allá, o la base le ganará al CSS. */

:root {
  /* ── Su paleta ── */
  --moka: #A68A7B;
  --nude: #CBAE9B;
  --arena: #DDC6B8;
  --marfil: #EEE6DF;
  --champana: #F1DDB3;
  --rosa: #E8C9C4;
  /* ── Derivados (tintes de la suya) ── */
  --papel: #FBF7F3;
  --rosa-claro: #F6E9E5;
  --moka-profundo: #5E4A40;

  /* ── Los nombres que pide el motor ── */
  --crema: #FBF7F3;
  --beige: #EEE6DF;
  --beige-osc: #DDC6B8;
  --laurel: #CBAE9B;
  --laurel-osc: #5E4A40;
  --laurel-claro: #E8C9C4;
  --tinta: #4A3830;
  --tinta-suave: #6E564B;
  --oro: #C2A06A;
  --oro-claro: #E3CD9F;
  --oro-texto: #7A5A2A;
  --oliva: #CBAE9B;
  --oliva-osc: #A68A7B;
  --cordon: #C2A06A;
  --cuenta: #E8C9C4;

  /* ── Tipografía ── */
  --script: 'Pinyon Script', 'Cormorant Garamond', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;

  /* Sin textura de papel arrugado: eso es lo campestre del motor. */
  --textura: none;
  --textura-sobre: none;
}

/* Lo escondido se queda escondido, aunque una regla le ponga `display`
   (trampa ya pagada en Katia: `.historia__video` le ganaba a `hidden`). */
[hidden] { display: none !important; }

body {
  background-image: none;
  background-color: var(--papel);
  color: var(--tinta);
  letter-spacing: .01em;
}

/* ═══════════ Secciones ═══════════ */
.seccion { padding: 5.5rem 1.5rem; }
/* El motor les pone fondo crema a las que no traen el suyo; las de aquí sí lo
   traen, y como esta hoja va después, el suyo gana. */
.seccion--marfil { background: var(--marfil); }
/* Satén: tres tonos de su rosa, con un brillo en diagonal, como tela. */
.seccion--rosa {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(160deg, #F8EEEA 0%, #F2E0DB 55%, #F6E9E5 100%);
}
.seccion--moka {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(241, 221, 179, .10), transparent 60%),
    var(--moka-profundo);
  color: var(--marfil);
}
.seccion--moka .titulo { color: var(--champana); }
.seccion--moka .texto { color: var(--marfil); }
.seccion--moka .titulo::after { background-image: url('../assets/divisor-claro.svg'); }

/* Las olas y las hojitas del motor: fuera (lo campestre). Las secciones se
   encuentran a filo y el oro de las franjas marca la costura. */
.seccion--ola { -webkit-mask-image: none; mask-image: none; margin-bottom: 0; }
.costura__hoja { display: none; }
.costura__baya { display: none; }

/* ═══════════ Títulos ═══════════
   Cormorant en cursiva, grande y fina: romántico sin ser caligrafía (la
   caligrafía se reserva para los nombres, que así destacan). Debajo, el
   divisor de rosas con dos líneas de oro. */
.titulo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--tinta);
  margin-bottom: 2rem;
}
.titulo::after {
  content: '';
  display: block;
  width: min(64vw, 240px);
  height: 37px;
  margin: .9rem auto 0;
  background: url('../assets/divisor.svg') center / contain no-repeat;
}

.texto {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--tinta-suave);
  max-width: 32rem;
}
.texto b { font-weight: 600; color: var(--tinta); }
.texto--suave { font-size: 1.05rem; opacity: 1; }
.seccion--moka .texto b { color: var(--champana); }

/* Rótulos chicos en caja alta: Montserrat 500, nunca 300 (se deshace a 10 px). */
.hero__mini, .portada__mini, .padres__rol, .lugar__rotulo, .evento h3,
.countdown__caja small, .calendario__mes, .itinerario__hora,
.confirmar legend, .mensaje-form__etiqueta, .confirmar__campo label {
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .24em;
}

/* ═══════════ Botones ═══════════
   La receta de profundidad de Katia (tres capas: luz de arriba, canto
   iluminado, sombra baja), con esquinas apenas suavizadas: romántico, no
   recto como el salón de Katia ni píldora como el motor. */
.btn {
  border-radius: 3px;
  padding: .95rem 1.9rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, background-color .25s ease, opacity .2s ease;
}
.btn:hover { transform: none; }
.btn--principal {
  color: var(--papel);
  border: 1px solid #4A3830;
  background: linear-gradient(180deg, #6E584C 0%, #5E4A40 55%, #503E35 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 245, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .2),
    0 4px 10px rgba(74, 56, 48, .22),
    0 1px 2px rgba(74, 56, 48, .3);
}
.btn--principal:hover { background: linear-gradient(180deg, #78614F 0%, #66503F 55%, #574337 100%); box-shadow: inset 0 1px 0 rgba(255, 250, 245, .18), 0 6px 14px rgba(74, 56, 48, .26); }
.btn--secundario {
  color: var(--tinta);
  border: 1px solid var(--oro);
  background: linear-gradient(180deg, #FFFDFB 0%, #F6EEE8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(194, 160, 106, .18),
    0 3px 8px rgba(94, 74, 64, .12);
}
.btn--champana {
  color: var(--tinta);
  border: 1px solid #D7BC85;
  background: linear-gradient(180deg, #F8EACB 0%, #F1DDB3 55%, #E6CC98 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(0, 0, 0, .25);
}
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25), 0 1px 2px rgba(74, 56, 48, .16);
}
.btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn--esperando { opacity: .75; pointer-events: none; }

/* El latido de "Agendar" (de Katia): dos golpes, lub-dub, y descansa dos
   tercios del ciclo. El trabajo lo hace el halo de oro, no el tamaño. */
@keyframes latido-boton {
  0% { transform: scale(1); } 6% { transform: scale(1.022); } 13% { transform: scale(1.004); }
  19% { transform: scale(1.014); } 34%, 100% { transform: scale(1); }
}
@keyframes halo-boton {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(94, 74, 64, .12), 0 0 0 0 rgba(194, 160, 106, .55); }
  34%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(94, 74, 64, .12), 0 0 0 14px rgba(194, 160, 106, 0); }
}
.btn--palpita { animation: latido-boton 2.2s ease-out infinite, halo-boton 2.2s ease-out infinite; }
.btn--palpita:hover, .btn--palpita:active { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn--palpita { animation: none; } }

/* ═══════════ Portada y sobre ═══════════ */
.portada {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(232, 201, 196, .55), transparent 46%),
    radial-gradient(circle at 85% 82%, rgba(241, 221, 179, .55), transparent 50%),
    var(--papel);
}
.portada__ramo {
  position: absolute;
  width: min(52vw, 280px);
  height: auto;
  pointer-events: none;
}
.portada__ramo--arriba { top: -1.2rem; left: -1.4rem; }
.portada__ramo--abajo { bottom: -1.2rem; right: -1.4rem; transform: rotate(180deg); }

.portada__mini, .hero__mini {
  font-size: .68rem;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--oro-texto);
}
.portada__nombres, .hero__nombres, .footer__nombres {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta);
}
.portada__nombres { font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1.25; }
.portada__nombres .amp, .hero__nombres .amp, .footer__nombres .amp {
  font-family: var(--serif);
  font-style: italic;
  font-size: .62em;
  color: var(--oro);
  margin: 0 .08em;
}
.portada__fecha {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .74rem;
  letter-spacing: .38em;
  text-indent: .38em;
  color: var(--tinta-suave);
}
.portada__instruccion {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--tinta-suave);
  text-align: center;
  position: relative;
}

/* El sobre de SATÉN. OJO (trampa de Katia): el bolsillo y la cara de la
   solapa NO tienen background-color en el motor; su color vive dentro del
   background-image. Por eso se sustituye la imagen por un degradado, nunca se
   borra a secas: sin él, la carta se ve a través del sobre. */
.sobre { filter: drop-shadow(0 16px 30px rgba(94, 74, 64, .22)); }
.sobre__atras { background-image: none; background-color: #CBAE9B; border-radius: 4px; }
.sobre__bolsillo {
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(165deg, #F2DFDA 0%, #E8C9C4 45%, #DDBBB3 100%);
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: normal;
  border-radius: 4px;
}
.sobre__bolsillo::after { border-radius: 4px; box-shadow: inset 0 -2px 6px rgba(94, 74, 64, .18), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sobre__tapa { background-color: #F6E7E3; border-radius: 4px 4px 0 0; }
.sobre__tapa::before {
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #DDBBB3, #E9CDC8 60%, #F1DCD7);
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  background-blend-mode: normal;
  border-radius: 4px 4px 0 0;
}
.sobre__carta {
  background-image: none;
  background-color: #FFFCF9;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(194, 160, 106, .35), inset 0 0 0 6px #FFFCF9, inset 0 0 0 7px rgba(194, 160, 106, .2);
}
.sobre__para {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  padding: 0 1rem;
}

/* El sello: la corona de rosas con las iniciales encima, sobre un disco de
   papel para que se lea contra el satén. Las letras son texto de verdad. */
.sello { width: 96px; aspect-ratio: 1; }
.sello img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sello::before {
  content: '';
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #FBF5F1 60%, #F1E4DE);
  box-shadow: 0 2px 6px rgba(94, 74, 64, .2);
}
.sello__letras {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--script);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--tinta);
  padding-top: .15em;
}
.sello__letras i { font-family: var(--serif); font-size: .55em; color: var(--oro); margin: 0 .12em; }
.sobre__sello.sello { width: 104px; height: auto; top: calc(54% - 56px); filter: drop-shadow(0 3px 6px rgba(94, 74, 64, .25)); }

/* El trazo dorado del sobre y la onda del dedo (js/sobre-dorado.js). */
.sobre--apretado { transform: scale(.985); }
.sobre-trazo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 6; overflow: visible; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.sobre-trazo--vivo { opacity: 1; }
.sobre-trazo__linea {
  fill: none; stroke: #C2A06A; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(227, 205, 159, .9));
}
.sobre-onda {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 205, 159, .8), rgba(227, 205, 159, 0) 70%);
  pointer-events: none; z-index: 7;
  animation: sobre-onda .65s ease-out forwards;
}
@keyframes sobre-onda {
  from { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  to   { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}

/* ═══════════ Portada de la invitación (hero) ═══════════ */
.hero { position: relative; overflow: hidden; padding-top: 5.5rem; }
.esquina {
  position: absolute;
  width: min(44vw, 230px);
  height: auto;
  pointer-events: none;
  opacity: .95;
}
.esquina--arriba { top: -1rem; left: -1.6rem; }
.esquina--abajo { bottom: -1rem; right: -1.6rem; transform: rotate(180deg); }
.hero__mini { position: relative; margin-bottom: 1.2rem; }
.hero__nombres { position: relative; font-size: clamp(3.3rem, 15vw, 5.8rem); line-height: 1.15; }
.hero__fecha {
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 1rem;
  line-height: 2;
  white-space: pre-line;   /* el salto antes de "Colima" va escrito en el texto */
}
/* La foto principal en un ARCO, con un filete de oro separado: ventana de
   capilla, que es donde empieza su día. */
.hero__foto {
  position: relative;
  width: min(62vw, 17rem);
  margin: 2.4rem auto 0;
}
.hero__foto::before {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1px solid var(--oro);
  border-radius: 999px 999px 4px 4px;
  pointer-events: none;
}
.hero__foto img {
  display: block;
  width: 100%;
  height: auto;            /* sin esto, el height="800" del HTML le gana al aspect-ratio */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px 3px 3px;
  box-shadow: 0 12px 30px rgba(94, 74, 64, .16);
}
.hero__invitado {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--tinta);
  margin-top: 2rem;
}
.hero__invitado small { font-family: var(--sans); font-style: normal; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.hero__personas { color: var(--tinta-suave); }

/* El aviso de "foto por llegar": discreto, para que la v1 se vea como
   borrador cuidado y no como hueco. */
.foto-pendiente { position: relative; margin-left: auto; margin-right: auto; }
.foto-pendiente__aviso {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .35rem .8rem;
  background: rgba(251, 247, 243, .82);
  border: 1px solid rgba(194, 160, 106, .45);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  pointer-events: none;
}

/* ═══════════ Calendario y cuenta regresiva ═══════════ */
.calendario { width: min(80vw, 280px); margin: 0 auto 2.4rem; }
.calendario__mes {
  font-size: .72rem;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--tinta-suave);
  text-align: center;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--oro);
  margin-bottom: .7rem;
}
.calendario__semana, .calendario__dias { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.calendario__semana { font-family: var(--sans); font-weight: 500; font-size: .6rem; letter-spacing: .1em; color: var(--oro-texto); margin-bottom: .5rem; }
.calendario__dias { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; row-gap: .35rem; color: var(--tinta-suave); }
.calendario__dias span { line-height: 1.8; }
/* La cascada sólo esconde los días si el JS ya corrió (calendario--armado):
   un efecto no puede ser la condición para que se vea la fecha (Katia). */
.calendario--armado .calendario__semana span,
.calendario--armado .calendario__dias span { opacity: 0; transform: translateY(-6px); }
.calendario--cae .calendario__semana span,
.calendario--cae .calendario__dias span { animation: caer-dia .5s ease-out both; }
.calendario--cae .calendario__semana span { animation-delay: calc(var(--i, 0) * 22ms); }
.calendario--cae .calendario__dias span { animation-delay: calc(160ms + var(--i, 0) * 22ms); }
@keyframes caer-dia { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.calendario__hoy { position: relative; color: var(--tinta); font-weight: 600; }
.calendario__aro {
  position: absolute; left: 50%; top: 50%;
  width: 2.3rem; height: 2.3rem;
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: visible;
}
.calendario__aro circle {
  fill: rgba(232, 201, 196, .35);
  stroke: var(--oro);
  stroke-width: 1.6;
  stroke-dasharray: 107;
  stroke-dashoffset: 107;
}
.calendario--cae .calendario__aro circle { animation: trazar-aro 1.1s ease-out 1.05s forwards; }
@keyframes trazar-aro { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .calendario--armado .calendario__semana span,
  .calendario--armado .calendario__dias span { opacity: 1; transform: none; }
  .calendario--cae .calendario__semana span,
  .calendario--cae .calendario__dias span { animation: none; }
  .calendario__aro circle { animation: none !important; stroke-dashoffset: 0; }
}

#countdown { gap: 0; align-items: stretch; margin-bottom: 1.2rem; }
.countdown__caja {
  background: none; border: 0; border-radius: 0;
  border-right: 1px solid rgba(194, 160, 106, .5);
  padding: .2rem 1rem; min-width: 0;
}
.countdown__caja:last-child { border-right: 0; }
.countdown__caja span { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 9vw, 2.8rem); line-height: 1.1; color: var(--tinta); }
.countdown__caja small { font-size: .58rem; letter-spacing: .2em; color: var(--tinta-suave); opacity: 1; }

/* ═══════════ Nuestra historia: sólo imágenes ═══════════ */
.seccion--historia { position: relative; overflow: hidden; }
.historia-fondo { position: absolute; inset: 0; z-index: 0; }
.historia-fondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.historia-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251, 247, 243, .55) 0%, rgba(251, 247, 243, .15) 40%, rgba(251, 247, 243, .35) 100%);
}
.historia-lienzo { position: relative; z-index: 1; }
/* Tres fotos como impresas, con su orilla blanca, un poco giradas y
   encimadas: se lee como una mesa con recuerdos, sin una sola palabra. */
.historia-fotos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 40rem;
  margin: 0 auto;
}
.historia-foto {
  width: min(44vw, 12.5rem);
  margin: -.3rem -.5rem;
  padding: .45rem .45rem 1.6rem;
  background: #FFFDFB;
  box-shadow: 0 10px 24px rgba(94, 74, 64, .22);
}
.historia-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.historia-foto:nth-child(1) { transform: rotate(-4deg); z-index: 1; }
.historia-foto:nth-child(2) { transform: rotate(3.5deg) translateY(1.6rem); z-index: 2; }
.historia-foto:nth-child(3) { transform: rotate(-1.5deg); z-index: 3; margin-top: 1.4rem; }
.historia-foto .foto-pendiente__aviso { bottom: 2.1rem; font-size: .5rem; }
@media (min-width: 46rem) { .historia-foto:nth-child(3) { margin-top: -.3rem; } }

/* ═══════════ Papás (y padrinos, cuando lleguen) ═══════════ */
.familias { display: grid; gap: 2.6rem; max-width: 46rem; margin: 0 auto; }
@media (min-width: 46rem) { .familias { grid-template-columns: 1fr 1fr; } }
.familia__de {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--tinta);
  margin-bottom: 1.1rem;
}
.familia__de::after { content: ''; display: block; width: 40px; height: 1px; background: var(--oro); margin: .7rem auto 0; }
.padres__rol { font-size: .64rem; color: var(--oro-texto); margin-bottom: .6rem; }
.padres__nombre { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.6; color: var(--tinta); }
.padres + .padres { margin-top: 1.6rem; }

/* ═══════════ El gran día ═══════════ */
.evento {
  position: relative;
  max-width: 28rem;
  background: rgba(255, 253, 251, .62);
  border: 1px solid var(--arena);
  border-radius: 0;
  box-shadow: none;
  padding: 2.6rem 1.5rem;
}
.evento h3 { font-size: .68rem; color: var(--oro-texto); }
.evento__hora { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; line-height: 1.2; color: var(--tinta); margin: .2rem 0 .2rem; }
.evento__acto { margin-top: 1.9rem; }
.evento .texto { font-size: 1.15rem; }
/* El marco de oro que se dibuja (js/recuadro-dorado.js). */
.marco-oro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.marco-oro__trazo { fill: none; stroke: #C2A06A; stroke-width: 1.4; stroke-linecap: round; transition: filter .6s ease; }
.marco-oro--vivo .marco-oro__trazo { filter: drop-shadow(0 0 4px rgba(194, 160, 106, .7)); }

/* ═══════════ Cómo llegar ═══════════ */
.lugar { max-width: 30rem; }
.lugar__tarjeta {
  width: 100%;
  margin: 0;
  padding: 1.4rem 1.2rem 1.5rem;
  background: #FFFDFB;
  border: 1px solid var(--arena);
  border-radius: 0;
  box-shadow: 0 8px 22px rgba(94, 74, 64, .07);
  color: var(--tinta);
}
.lugar__tarjeta + .lugar__tarjeta { margin-top: 1.4rem; }
.lugar__dibujo { margin: -.4rem -.4rem 1.2rem; }
.lugar__dibujo img { display: block; width: 100%; height: auto; }
.lugar__dibujo .foto-pendiente__aviso { bottom: .6rem; }
.lugar__rotulo { font-size: .64rem; line-height: 1.6; color: var(--oro-texto); margin-bottom: .3rem; }
.lugar__nombre { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.75rem; line-height: 1.2; color: var(--tinta); }
.lugar__direccion { font-family: var(--serif); font-size: 1.1rem; color: var(--tinta-suave); margin-bottom: 1rem; }

.mapa { margin-top: .4rem; }
.mapa__lienzo { position: relative; border: 1px solid var(--arena); background: var(--marfil); line-height: 0; }
.mapa__marco { display: block; width: 100%; aspect-ratio: 16 / 11; border: 0; }
.mapa__botones { display: flex; gap: .6rem; margin-top: .8rem; }
.mapa__botones .btn { flex: 1 1 0; padding: .8rem .4rem; font-size: .64rem; letter-spacing: .14em; text-indent: .14em; }
.mapa__boton {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .8rem 1.6rem;
  border: 1px solid var(--oro); border-radius: 3px;
  background: linear-gradient(180deg, #FFFDFB 0%, #F6EEE8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(94, 74, 64, .12);
  color: var(--tinta);
  font-family: var(--sans); font-weight: 500;
  font-size: .68rem; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.mapa__boton::-webkit-details-marker { display: none; }
.mapa__boton::after { content: '＋'; color: var(--oro); font-size: .9rem; letter-spacing: 0; transition: transform .35s ease; }
.mapa[open] .mapa__boton::after { transform: rotate(45deg); }
.mapa__caja { padding-top: .9rem; }

/* ═══════════ Itinerario ═══════════
   La tarjeta de Katia. OJO CON EL Z-INDEX (ya se hizo mal una vez): la SECCIÓN
   se queda en `auto` —con !important, porque el motor le pone uno en línea—
   para no crear contexto de apilado; así la TARJETA (61) le gana al hilo (60)
   y el hilo pasa por detrás de ella, no de toda la sección. */
#seccion-itinerario { position: relative; z-index: auto !important; }
.itinerario-tarjeta {
  position: relative;
  z-index: 61;
  max-width: 28rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem .9rem 1.1rem;
  background: #FFFDFB;
  border: 1px solid var(--arena);
}
@media (min-width: 26rem) { .itinerario-tarjeta { padding: 1.7rem 1.6rem 1.3rem; } }
.itinerario { list-style: none; margin: 0; padding: 0; text-align: left; position: relative; }
.itinerario__momento {
  display: grid;
  grid-template-columns: 5.1rem 1fr 1.4rem;   /* "11:00 PM" cabe sin encimarse */
  gap: .2rem .7rem;
  align-items: start;
  padding: .85rem 0 .85rem 1.1rem;
  border-left: 1px solid var(--arena);
  position: relative;
}
.itinerario__momento::before {
  content: '';
  position: absolute; left: -3px; top: 1.35rem;
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--arena);
  transition: background-color .45s ease, box-shadow .45s ease;
}
.itinerario__momento--vivo::before { background: var(--oro); box-shadow: 0 0 5px rgba(194, 160, 106, .6); }
.itinerario__riel {
  position: absolute; left: -1px; width: 1px;
  background: linear-gradient(180deg, #EBD7A8, #C2A06A);
  box-shadow: 0 0 4px rgba(194, 160, 106, .5);
  transition: height .18s linear;
  pointer-events: none;
}
.itinerario__hora {
  font-size: .64rem; letter-spacing: .1em; white-space: nowrap;
  color: var(--tinta-suave); padding-top: .35rem;
  transition: color .45s ease;
}
/* Sin hora todavía (PENDIENTE del organizador): una rayita, no una hora inventada. */
.itinerario__hora--sin::before { content: '·  ·  ·'; letter-spacing: .1em; color: var(--oro); }
.itinerario__momento--vivo .itinerario__hora { color: var(--oro-texto); }
.itinerario__que { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--tinta); }
.itinerario__detalle { display: block; margin-top: .1rem; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--tinta-suave); }
.itinerario__momento::after {
  content: attr(data-emoji);
  font-size: 1.1rem; line-height: 1.4;
  opacity: 0; transform: translateY(4px);
  transition: opacity .6s ease, transform .6s ease;
  justify-self: end;
}
.itinerario__momento--vivo::after { opacity: .4; transform: none; }

/* ═══════════ Código de vestimenta ═══════════ */
.dresscode__sub { font-family: var(--script); font-size: 3rem; line-height: 1.1; color: var(--tinta); margin-bottom: .6rem; }
.dresscode__laminas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  max-width: 24rem;
  margin: 1.6rem auto 1.4rem;
}
.dresscode__lamina { display: block; width: 100%; height: auto; transition-delay: var(--retraso, 0s) !important; }
.evitar {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.3rem 1.2rem;
  background: var(--rosa-claro);
  border: 1px solid var(--arena);
}
.evitar__colores { display: flex; justify-content: center; gap: .9rem; margin-bottom: .7rem; }
.evitar__punto {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(94, 74, 64, .3);
}
.evitar__punto--blanco { background: #FFFFFF; }
.evitar__punto--cafe { background: #7B5A45; }
/* La raya de "evitar": fina, en diagonal, no una X de prohibido. */
.evitar__punto::after {
  content: '';
  position: absolute; left: -4px; right: -4px; top: 50%;
  height: 1.5px; background: var(--tinta);
  transform: rotate(-45deg);
}
.evitar .texto { font-size: 1.12rem; }

/* ═══════════ Para los niños ═══════════ */
.ninos__dibujo { display: block; width: min(62vw, 230px); height: auto; margin: 0 auto 1.4rem; }

/* ═══════════ La cinta de "Nosotros" (js/cinta.js) ═══════════
   Alto fijo y ancho automático: cada foto conserva su proporción. Sin
   object-fit ni aspect-ratio, que la recortarían. */
.cinta {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  margin: .4rem -1.5rem 0;
}
.cinta::-webkit-scrollbar { display: none; }
.cinta__tira { display: flex; gap: 6px; width: max-content; }
.cinta__tira img { display: block; height: min(86vw, 22rem); width: auto; flex: none; background: var(--marfil); }
.cinta__aviso { margin-top: 1.2rem; font-style: italic; }

/* ═══════════ Lluvia de sobres ═══════════ */
.sobres { max-width: 30rem; margin: 0 auto; }
.sobres__dibujo { display: block; width: min(62vw, 230px); height: auto; margin: 0 auto 1.2rem; }

/* ═══════════ Álbum compartido ═══════════ */
.galeria-acciones .btn { padding: .85rem .3rem; font-size: clamp(.6rem, 2.8vw, .7rem); letter-spacing: .12em; text-indent: .12em; }
.galeria-grid img, .galeria-video__miniatura { border-radius: 0; }
.galeria-pestana--activa { background: var(--moka-profundo) !important; color: var(--papel) !important; }
.galeria-muestra { display: grid; margin-top: .6rem; }
.galeria-muestra img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.muestra-letrero {
  display: inline-block;
  margin: 1.4rem auto .4rem;
  padding: .3rem .8rem;
  border: 1px dashed var(--oro);
  font-family: var(--sans); font-weight: 500;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-texto);
  background: rgba(255, 253, 251, .8);
}
.seccion--moka .muestra-letrero { color: var(--champana); background: transparent; border-color: var(--oro-claro); }

/* ═══════════ Confirmación ═══════════ */
.confirmar { max-width: 28rem; margin: 1.8rem auto 0; text-align: left; }
.confirmar__tarjeta {
  background: #FFFDFB;
  border: 1px solid var(--arena);
  padding: 1.7rem 1.3rem 1.5rem;
  box-shadow: 0 10px 26px rgba(94, 74, 64, .08);
}
.confirmar__familia {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.75rem; line-height: 1.2; color: var(--tinta); text-align: center;
}
.confirmar__lugares, .confirmar__previo {
  font-family: var(--serif); font-size: 1.08rem; color: var(--tinta-suave);
  text-align: center; margin-top: .3rem;
}
.confirmar__previo { font-style: italic; font-size: 1rem; }
.confirmar fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; min-width: 0; }
.confirmar legend { font-size: .62rem; color: var(--oro-texto); margin-bottom: .7rem; padding: 0; }
.confirmar__vienen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.confirmar__vienen legend { grid-column: 1 / -1; }
.confirmar__eleccion, .confirmar__opcion { position: relative; cursor: pointer; }
.confirmar__eleccion input, .confirmar__opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.confirmar__eleccion span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: .6rem .5rem;
  border: 1px solid var(--arena);
  background: var(--papel);
  font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1.2; color: var(--tinta);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.confirmar__eleccion input:checked + span {
  background: var(--rosa-claro);
  border-color: var(--oro);
  box-shadow: inset 0 0 0 1px var(--oro);
}
.confirmar__eleccion input:focus-visible + span,
.confirmar__opcion input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.confirmar__opciones { display: flex; flex-wrap: wrap; gap: .45rem; }
.confirmar__opcion span {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .9rem;
  border: 1px solid var(--arena); background: var(--papel);
  font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--tinta);
  transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
}
/* La casilla se dibuja aquí (el input real va escondido pero accesible). */
.confirmar__opcion span::before {
  content: '';
  width: 16px; height: 16px; flex: none;
  border: 1px solid var(--oro); background: #fff;
}
.confirmar__opcion input[type="radio"] + span::before { border-radius: 50%; }
.confirmar__opcion input:checked + span { background: var(--rosa-claro); border-color: var(--oro); }
.confirmar__opcion input:checked + span::before { background: radial-gradient(circle, var(--moka-profundo) 0 4px, #fff 5px); }
.confirmar__opcion input[type="checkbox"]:not(:checked) + span { opacity: .6; }
/* Con nombres capturados, uno por renglón: se lee como una lista de la familia. */
#confirmar-personas:has(input[type="checkbox"]) { flex-direction: column; }

.confirmar__campo { margin-top: 1.4rem; }
.confirmar__campo label, .mensaje-form__etiqueta { display: block; font-size: .62rem; color: var(--oro-texto); margin-bottom: .45rem; }
.confirmar input[type="text"], .confirmar textarea,
.mensaje-form input, .mensaje-form textarea {
  width: 100%;
  border: 1px solid var(--arena);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.15rem;
  padding: .75rem .9rem;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.confirmar textarea, .mensaje-form textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.confirmar input:focus, .confirmar textarea:focus,
.mensaje-form input:focus, .mensaje-form textarea:focus { border-color: var(--oro); box-shadow: 0 0 0 3px rgba(194, 160, 106, .18); }
.confirmar textarea::placeholder, .mensaje-form textarea::placeholder { color: #9C8378; font-style: italic; }
.confirmar__nota { font-family: var(--serif); font-style: italic; font-size: .98rem; color: var(--tinta-suave); margin-top: .4rem; }
/* "Déjales un mensajito": cuando no pueden ir, el cuadro toma el protagonismo. */
.confirmar--no-vienen .confirmar__campo--mensaje { padding: 1rem; margin-left: -.2rem; margin-right: -.2rem; background: var(--rosa-claro); border: 1px solid var(--rosa); }
.confirmar__boton { display: block; width: 100%; margin-top: 1.5rem; text-align: center; }
.confirmar__nombre--falta input { border-color: #A0574C; animation: temblor .4s ease; }
@keyframes temblor { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.confirmar__estado, .mensaje-form__estado {
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.45;
  text-align: center; margin-top: .9rem; color: var(--tinta-suave);
}
.confirmar__estado:empty, .mensaje-form__estado:empty { display: none; }
.confirmar__estado--ok, .mensaje-form__estado--ok { color: var(--tinta); padding: .7rem; border: 1px solid var(--oro); background: rgba(241, 221, 179, .28); }
.confirmar__estado--aviso { color: var(--tinta); padding: .7rem; border: 1px solid var(--arena); background: var(--papel); }
/* El error, en el tono más oscuro de su rosa: se nota sin gritar en rojo. */
.confirmar__estado--error, .mensaje-form__estado--error { color: #7C3B32; padding: .7rem; border: 1px solid #C99A92; background: #FBEFEC; }
.confirmar__cerrado {
  max-width: 28rem; margin: 1.6rem auto 0; padding: 1.8rem 1.3rem;
  background: #FFFDFB; border: 1px solid var(--arena);
}

/* Las tarjetas de escribir pasan POR ENCIMA del hilo dorado (60), con el mismo
   truco del itinerario: la sección en z-index auto (con !important, porque el
   motor le pone uno en línea) para no crear contexto de apilado, y la tarjeta
   en 61. Si no, la línea cruza los botones de "¿Nos acompañan?". */
#seccion-confirmar, #seccion-deseos, #seccion-capsula, #seccion-album { position: relative; z-index: auto !important; }
.confirmar, .confirmar__cerrado, .mensaje-form, .capsula__cartas { position: relative; z-index: 61; }

/* ═══════════ Libro de deseos y cápsula ═══════════ */
.mensaje-form {
  max-width: 28rem;
  margin: 1.8rem auto 0;
  padding: 1.6rem 1.3rem 1.4rem;
  text-align: left;
  background: rgba(255, 253, 251, .78);
  border: 1px solid var(--arena);
}
.mensaje-form input { margin-bottom: 1.1rem; }
.mensaje-form__contador { font-family: var(--sans); font-size: .6rem; letter-spacing: .1em; color: var(--tinta-suave); text-align: right; margin: .3rem 0 0; }
.mensaje-form .btn { display: block; width: 100%; margin-top: 1rem; }
/* El sello que "cae" al guardar: un guiño, no información. */
.mensaje-form--sellado .mensaje-form__estado--ok { animation: sellar .55s cubic-bezier(.2, .8, .25, 1.3); }
@keyframes sellar { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sobre el moka profundo de la cápsula. */
.mensaje-form--oscuro { background: rgba(255, 253, 251, .06); border-color: rgba(227, 205, 159, .4); }
.mensaje-form--oscuro .mensaje-form__etiqueta { color: var(--champana); }
.mensaje-form--oscuro input, .mensaje-form--oscuro textarea {
  background: rgba(251, 247, 243, .1);
  border-color: rgba(227, 205, 159, .45);
  color: var(--papel);
}
.mensaje-form--oscuro textarea::placeholder { color: rgba(238, 230, 223, .6); }
.mensaje-form--oscuro .mensaje-form__contador { color: rgba(238, 230, 223, .75); }
.mensaje-form--oscuro .mensaje-form__estado { color: var(--marfil); }
.mensaje-form--oscuro .mensaje-form__estado--ok { color: var(--papel); background: rgba(241, 221, 179, .12); border-color: var(--oro-claro); }
.mensaje-form--oscuro .mensaje-form__estado--error { color: #FBEFEC; background: rgba(160, 87, 76, .3); border-color: #C99A92; }

.capsula__carta { display: block; width: min(52vw, 190px); height: auto; margin: 0 auto 1.6rem; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); }
.capsula__faltan {
  font-family: var(--sans); font-weight: 500;
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--champana); margin-top: 1.2rem;
}

/* ── La cápsula ABIERTA (aniversario): cartas que se abren al llegar ── */
.capsula__cartas { max-width: 46rem; margin: 2rem auto 0; }
.cartas { display: grid; gap: 1.3rem; }
@media (min-width: 46rem) { .cartas { grid-template-columns: 1fr 1fr; } }
.carta {
  position: relative;
  padding: 2.2rem 1.4rem 1.4rem;
  background: #FFFCF9;
  color: var(--tinta);
  text-align: left;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
  transform: translateY(18px) rotate(var(--giro, -.6deg));
  opacity: 0;
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .25, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
  overflow: hidden;
}
.carta:nth-child(even) { --giro: .7deg; }
.carta--abierta { opacity: 1; transform: rotate(var(--giro, -.6deg)); }
/* La solapa de satén se levanta y deja ver la carta. */
.carta__solapa {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(165deg, #F2DFDA 0%, #E8C9C4 50%, #DDBBB3 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform-origin: top center;
  transition: clip-path 1s cubic-bezier(.6, 0, .2, 1), opacity .4s ease 1s;
  transition-delay: calc(var(--i, 0) * 90ms + .35s);
  z-index: 2;
}
.carta--abierta .carta__solapa { clip-path: polygon(0 0, 100% 0, 50% 0, 50% 0); opacity: 0; }
.carta__sello {
  position: absolute; left: 50%; top: 2.2rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, 0);
  background: radial-gradient(circle at 35% 30%, #E9D2A4, #C2A06A 60%, #9D7E48);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: opacity .5s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 90ms + .2s);
}
.carta--abierta .carta__sello { opacity: 0; transform: translate(-50%, -12px) scale(.6); }
.carta__mensaje { font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; color: var(--tinta); }
.carta__firma { margin-top: .8rem; font-family: var(--script); font-size: 1.6rem; color: var(--oro-texto); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .carta, .carta__solapa, .carta__sello { transition: none; }
}

/* ═══════════ ¿Alguna duda? ═══════════ */
.contacto {
  max-width: 26rem; margin: 1.4rem auto 0; text-align: left;
  background: #FFFDFB; border: 1px solid var(--arena);
}
.contacto__boton {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  min-height: 44px; padding: 1rem 1.2rem; cursor: pointer;
  font-family: var(--sans); font-weight: 500;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta); list-style: none;
}
.contacto__boton::-webkit-details-marker { display: none; }
.contacto__boton::after { content: '＋'; color: var(--oro); font-size: .9rem; transition: transform .35s ease; }
.contacto[open] .contacto__boton::after { transform: rotate(45deg); }
.contacto__caja { padding: 0 1.2rem 1.2rem; }
.contacto__persona {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .8rem; padding: .9rem 0; border-top: 1px solid var(--marfil);
}
.contacto__quien { font-family: var(--serif); font-size: 1rem; color: var(--tinta-suave); }
.contacto__quien b { display: block; font-size: 1.2rem; font-weight: 600; color: var(--tinta); }
.contacto__persona a { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .06em; color: var(--tinta); }

/* Lo que todavía no nos dan: subrayado de puntos, nunca un dato inventado. */
.pendiente {
  display: inline-block;
  border-bottom: 1px dotted var(--oro);
  padding: 0 .2em .1em;
  font-family: var(--serif);
  font-style: italic;
  color: var(--tinta-suave);
}

/* Desplegar con elegancia (de Katia): la caja entra y los renglones después. */
@keyframes desplegar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.contacto[open] .contacto__caja,
.mapa[open] .mapa__caja { animation: desplegar .45s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .contacto[open] .contacto__caja, .mapa[open] .mapa__caja { animation: none; }
}

/* ═══════════ Despedida ═══════════ */
.footer {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(241, 221, 179, .1), transparent 60%),
    var(--moka-profundo);
  color: var(--marfil);
  padding: 4.5rem 1.5rem calc(52px + 3rem);
}
.sello--pie { position: relative; width: 132px; margin: 0 auto 1.6rem; }
.sello--pie::before { background: radial-gradient(circle at 35% 30%, #6E584C, #5E4A40 70%); box-shadow: none; }
.sello--pie .sello__letras { color: var(--champana); font-size: 1.9rem; }
.footer__gracias {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.25rem; line-height: 1.6; opacity: 1;
  max-width: 26rem; margin: 0 auto 1.4rem; color: var(--marfil);
}
.footer__nombres { font-size: clamp(2.6rem, 11vw, 3.4rem); color: var(--champana); line-height: 1.2; }
.footer__nombres .amp { color: var(--oro-claro); }
.footer__fecha { font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .4em; text-indent: .4em; color: var(--arena); }

/* ═══════════ Música ═══════════ */
.btn-musica {
  background: linear-gradient(180deg, #6E584C, #5E4A40);
  color: var(--champana);
  box-shadow: 0 6px 18px rgba(74, 56, 48, .3);
}

/* ═══════════ La línea dorada y la ruta ═══════════
   El hilo va del lado DERECHO (lección de Katia: del izquierdo se peleaba con
   las bolitas de la ruta). Oro champaña de punta a punta; los dos tonos los
   lee crearHilo en js/main.js. */
:root { --hilo-oro: #C9A464; --hilo-oro-claro: #EBD7A8; }
.hilo { left: auto; right: 4px; }
.hilo path { stroke-width: 1.6; }
@media (max-width: 430px) { .hilo { right: -6px; } }
.pista-scroll { right: 3.2rem; }

.ruta { opacity: .45; transition: opacity .4s ease; }
.ruta:hover, .ruta:focus-within { opacity: 1; }
.ruta__punto { background: var(--moka-profundo); opacity: .14; filter: none; box-shadow: none; }
.ruta__parada--vista .ruta__punto { opacity: .26; }
.ruta__parada--actual .ruta__punto { background: var(--oro); opacity: .9; }
@media (max-width: 430px) { .ruta__nombre { display: none; } }
.ruta__nombre {
  color: var(--tinta);
  font-family: var(--sans); font-weight: 500;
  font-size: .56rem; letter-spacing: .18em;
  text-shadow: 0 0 4px rgba(251, 247, 243, .95), 0 0 8px rgba(251, 247, 243, .8);
}

/* ═══════════ Las franjas entre secciones (js/oro-al-bajar.js) ═══════════
   En su propia capa, encima de todo, para que nada recorte el rombo. Del
   rombo salen dos líneas, una hacia cada orilla. */
#contenido { position: relative; }
.costuras { position: absolute; inset: 0; z-index: 62; pointer-events: none; }
.franja { position: absolute; left: 50%; transform: translate(-50%, -50%); width: min(86%, 30rem); height: 1px; }
.franja__linea { position: absolute; top: 0; width: 50%; height: 100%; opacity: .9; transform: scaleX(var(--linea, 0)); transition: box-shadow .5s ease, opacity .5s ease; }
.franja__linea--izq { right: 50%; transform-origin: right center; background: linear-gradient(270deg, var(--oro), transparent); }
.franja__linea--der { left: 50%; transform-origin: left center; background: linear-gradient(90deg, var(--oro), transparent); }
.franja--viva .franja__linea { opacity: 1; box-shadow: 0 0 8px rgba(194, 160, 106, .5); }
.franja__rombo {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 9px; height: 9px;
  background: linear-gradient(135deg, #F6E7C4 0%, #C9A464 45%, #A2804A 100%);
  box-shadow: 0 0 7px rgba(194, 160, 106, .6);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform .55s cubic-bezier(.2, .8, .25, 1.5);
}
.franja--completa .franja__rombo { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .franja__rombo { transition: none; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

/* ═══════════ "Tocar para buscar" de Chrome ═══════════
   Lección de Katia: al dejar el dedo sobre una palabra, Chrome de Android abre
   su barra de búsqueda. No se puede apagar desde la página, pero sí evitar que
   el texto se seleccione. Sólo donde se LEE; lo que se copia o se escribe
   (direcciones, horas, formularios) sigue seleccionable. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable],
.lugar__tarjeta, .evento, .itinerario, .contacto__caja,
.confirmar, .mensaje-form, .carta {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* ═══════════ Después de la boda (js/modo.js) ═══════════ */
/* Sin sobre: la página está a la vista desde el primer cuadro. */
html[data-sin-sobre="1"] .portada { display: none; }
html[data-sin-sobre="1"] .contenido { opacity: 1; transition: none; }

/* El álbum, protagonista: más aire y una tarjeta que lo destaca. */
.seccion--album-principal {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 48%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(160deg, #F8EEEA 0%, #F2E0DB 55%, #F6E9E5 100%);
}
.seccion--album-principal .galeria-acciones { max-width: 26rem; margin-left: auto; margin-right: auto; }
.seccion--album-principal .galeria-grid { max-width: 46rem; margin-left: auto; margin-right: auto; }
.album__caduca {
  max-width: 26rem; margin: 0 auto 1rem; padding: .8rem 1rem;
  font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--tinta);
  border: 1px solid var(--oro); background: rgba(255, 253, 251, .7);
}
.seccion--capsula-abierta .capsula__carta { display: none; }

/* El letrero de vista previa: para Pedro y la clienta, nunca para invitados
   (sólo sale con ?vista=…). */
.vista-previa {
  position: fixed; left: 50%; top: .6rem; z-index: 200;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: .4rem .9rem;
  background: rgba(94, 74, 64, .92); color: var(--champana);
  font-family: var(--sans); font-weight: 500;
  font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; text-align: center;
  border-radius: 99px;
  pointer-events: none;
}