/* ==========================================================================
   TEMA · BODA — HORA DORADA v3, todo pintado a mano (4 nov 2026)
   Papel de algodón marfil, cera turquesa de mar al anochecer y hoja de oro.
   El cálido lo pone la pintura (gouache de Flow): la bahía en 4 horas, el sobre, las flores. El código
   solo acomoda el papel, funde las láminas y escribe con letras de verdad (nítidas, encima).
     --tinta #1D2A33  13.0:1 · --tinta-suave #4A5560 6.9:1 (sobre --papel-hondo 6.2:1)
     --marca #0F5560   7.6:1 · --acento #0D4F59 8.3:1 (letra marfil sobre acento 8.3:1)
     oro de letra #7A5418 6.0:1 · marfil sobre noche #0B1622 15.9:1
   ========================================================================== */
:root{
  --papel:#FEF9ED;
  --papel-hondo:#EDE2CF;
  --tinta:#1D2A33;
  --tinta-suave:#4A5560;
  --marca:#0F5560;
  --marca-claro:#2E7F86;
  --acento:#0D4F59;
  --acento-hondo:#07333A;
  --oro:#C9963F;
  --oro-claro:#E9CC8A;
  --oro-letra:#7A5418;
  --noche-color:#0B1622;

  --f-display:"Cormorant", Georgia, serif;
  --f-letra:"Pinyon Script", cursive;
  --f-texto:"Jost", system-ui, sans-serif;

  --radio:6px;
  --sombra:0 10px 30px -14px rgba(20,24,32,.45);
  --sombra-alta:0 30px 60px -24px rgba(8,14,22,.6);

  /* micro: el grano del papel de algodón (ruido fijo, se pinta una vez) */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  /* fibras largas del papel hecho a mano */
  --fibras:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .18' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23f)'/%3E%3C/svg%3E");
  /* orilla de papel deshilachado (deckle) */
  --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4.2l3-.9 4 1.2 5-1.8 3 1 6-1.4 4 1.6 5-.6 3-1.7 5 1.4 4-.8 6 1.3 3-1.5 5 .7 4-1.2 3 1.6 6-.9 4 .9 5-1.6 3 1.1 5-.6 4 1.3 3-1.4 6 .8 4-1.1 5 1.5 3-.8 4 .5V8z' fill='%23F6EFE3'/%3E%3C/svg%3E");
  --noche:0; --luz:1;
}

/* ── Los dos idiomas: el botón solo cambia cuál se ve ─────────────────────── */
.en{ display:none; }
html[data-idioma="en"] .es{ display:none; }
html[data-idioma="en"] .en{ display:revert; }

body.hd{ background:var(--noche-color); color:var(--tinta); font-family:var(--f-texto); }
body.hd.cerrado{ background:#E7D6BA; }

/* ── La barra de idioma y sonido ──────────────────────────────────────────── */
.hd-barra{ position:fixed; top:max(.8rem, env(safe-area-inset-top)); right:.8rem; z-index:70; display:flex; gap:.5rem; }
.hd-boton{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(122,84,24,.35);
  background:rgba(246,239,227,.94); color:var(--acento); cursor:pointer;
  font:600 .82rem/1 var(--f-texto); letter-spacing:.12em;
  display:grid; place-items:center; box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
  -webkit-tap-highlight-color:transparent;
}
.hd-boton svg{ width:22px; height:22px; }
.hd-boton .tache{ display:none; }
.hd-boton.apagado .tache{ display:inline; }
.hd-boton.apagado .ola-a, .hd-boton.apagado .ola-b{ display:none; }
.hd-boton:focus-visible, .gancho:focus-visible, .boton:focus-visible, .mini-tarjeta:focus-visible{ outline:3px solid var(--oro); outline-offset:3px; }


/* ══════════════════════════════════════════════════════════════════════════
   LA CARTA — escenas de papel sobre el cielo
   ══════════════════════════════════════════════════════════════════════════ */
.carta{ position:relative; z-index:1; }
.seccion{ max-width:none; padding:14vh 1rem; }
.hoja{
  position:relative; max-width:560px; margin:0 auto; padding:2.6rem 1.5rem 2.4rem;
  background:radial-gradient(120% 60% at 12% 0%, rgba(255,222,170,.32), rgba(255,222,170,0) 62%), var(--grano), var(--fibras), var(--papel);
  border-radius:2px; box-shadow:var(--sombra-alta); text-align:center;
}
/* orilla deshilachada arriba y abajo: papel hecho a mano, no un rectángulo de pantalla */
.hoja::before, .hoja::after{ content:""; position:absolute; left:0; right:0; height:7px; background:var(--deckle) center / 100% 100%; pointer-events:none; }
.hoja::before{ top:-6px; }
.hoja::after{ bottom:-6px; transform:scaleY(-1); }
/* el marco fino de oro de la papelería fina (sombra por dentro: no se mueve ni se repinta) */
.hoja{ box-shadow:var(--sombra-alta), inset 0 0 0 10px rgba(246,239,227,.0), inset 0 0 0 11px rgba(201,150,63,0); }
.hoja{ outline:1px solid rgba(201,150,63,.42); outline-offset:-11px; }

.etiqueta{ font-family:var(--f-texto); font-weight:500; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--marca); margin:0 0 .6rem; }
.titulo{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.9rem, 8.4vw, 2.6rem); line-height:1.08; color:var(--tinta); margin:0 0 1.2rem; text-wrap:balance; }
.parrafo{ color:var(--tinta); font-size:1.02rem; line-height:1.65; }
.parrafo b{ color:var(--acento); }
.parrafo--chico{ color:var(--tinta-suave); }
h3{ font-family:var(--f-display); font-weight:600; font-size:1.35rem; color:var(--tinta); margin:2rem 0 .8rem; }

/* ── ESCENA 1 · la invitación ──────────────────────────────────────────────── */
.portada{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:5.5rem 1rem 6rem; position:relative; }
.hoja--portada{ width:100%; max-width:400px; padding:2.2rem 1.4rem 2.4rem; }
.mono{ display:block; width:min(62vw, 230px); height:auto; margin:0 auto .8rem; overflow:visible; }
.portada__arriba{ font-family:var(--f-texto); font-size:.74rem; letter-spacing:.36em; text-transform:uppercase; color:var(--marca); margin:0 0 .3rem; }
.portada__nombre{ font-family:var(--f-display); font-weight:500; font-size:clamp(2.6rem, 13vw, 3.6rem); line-height:1; margin:.1rem 0 .9rem; color:var(--oro-letra); }
.oro{
  color:var(--oro-letra);
  background:linear-gradient(100deg, #7A5418 0%, #B88633 22%, #F1D898 34%, #B88633 46%, #7A5418 62%, #A8792C 80%, #7A5418 100%);
  background-size:260% 100%; background-position:calc(var(--luz) * 100%) 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.amp{ display:block; font-family:var(--f-letra); font-size:.95em; line-height:.9; margin:.05em 0 .12em; color:var(--marca); -webkit-text-fill-color:var(--marca); }
.portada__fecha{ display:flex; justify-content:center; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin:0 0 .7rem; padding:.7rem .4rem; border-top:1px solid rgba(201,150,63,.6); border-bottom:1px solid rgba(201,150,63,.6); font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--tinta-suave); }
.portada__fecha b{ font-family:var(--f-display); font-weight:600; font-size:1.35rem; letter-spacing:.12em; color:var(--tinta); }
.portada__lugar{ margin:0; font-family:var(--f-display); font-style:italic; font-size:1.12rem; color:var(--tinta); }
.portada__pista{
  position:absolute; bottom:calc(max(1.2rem, env(safe-area-inset-bottom)) + 3.6rem); left:50%; transform:translateX(-50%);
  margin:0; padding:.5rem 1rem; border-radius:999px; white-space:nowrap;
  background:rgba(11,22,34,.62); color:#F6EFE3; font-size:.78rem; letter-spacing:.06em;
  display:flex; align-items:center; gap:.6rem;
}
.portada__pista i{ width:1px; height:18px; background:linear-gradient(#F6EFE3, rgba(246,239,227,0)); }

/* ── ESCENA 2 · saludo y cuenta ────────────────────────────────────────────── */
.saludo__nombre{ font-family:var(--f-display); font-style:italic; font-weight:500; font-size:clamp(1.8rem, 8vw, 2.3rem); color:var(--tinta); margin:.2rem 0 .6rem; }
.saludo__pases{ display:inline-block; padding:.35rem 1rem; border:1px solid rgba(13,79,89,.35); border-radius:999px; color:var(--acento); font-weight:500; background:rgba(255,255,255,.4); }
.saludo__mesa{ margin-top:.6rem; color:var(--tinta-suave); }
.cuenta{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(201,150,63,.4); }
.cuenta__caja{ background:transparent; box-shadow:none; border:1px solid rgba(29,42,51,.14); border-radius:2px; padding:.7rem 0; }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:500; font-size:1.9rem; color:var(--tinta); }
.cuenta__caja .l{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-suave); }

/* ── ESCENA 3 · historia: la línea de la marea ─────────────────────────────── */
.foto-flow{ position:relative; margin:0 0 1.8rem; border-radius:2px; overflow:hidden; box-shadow:0 14px 30px -18px rgba(0,0,0,.6); background:#EBB98A; }
.foto-flow__dibujo{ display:block; width:100%; height:auto; }
.foto-flow > img{ display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; }
.foto-flow.con-foto .foto-flow__dibujo{ display:none; }
.foto-flow figcaption{ position:absolute; left:0; right:0; bottom:0; padding:.5rem .8rem; font-size:.74rem; color:#F6EFE3; background:linear-gradient(transparent, rgba(11,22,34,.72)); }
.foto-flow.con-foto figcaption{ display:none; }
.nota-ia{ display:none; margin:-1.2rem 0 1.6rem; font-size:.72rem; letter-spacing:.04em; color:var(--tinta-suave); }
.foto-flow.con-foto + .nota-ia{ display:block; }
.foto-rsvp{ margin:0 0 1.4rem; border-radius:2px; overflow:hidden; box-shadow:0 14px 30px -18px rgba(0,0,0,.6); }
.foto-rsvp img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; object-position:50% 46%; }
.marea{ list-style:none; margin:0; padding:0 0 0 1.4rem; text-align:left; position:relative; display:grid; gap:1.4rem; }
.marea::before{ content:""; position:absolute; left:.32rem; top:.4rem; bottom:.4rem; width:1px; background:linear-gradient(var(--oro), rgba(201,150,63,.15)); }
.marea__paso{ position:relative; display:grid; gap:.15rem; }
.marea__paso::before{ content:""; position:absolute; left:-1.36rem; top:.45rem; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FBEFC8, var(--oro) 60%, #8E6421); box-shadow:0 0 0 4px rgba(201,150,63,.16); }
.marea__ano{ font-family:var(--f-texto); font-size:.72rem; letter-spacing:.3em; color:var(--marca); }
.marea__paso b{ font-family:var(--f-display); font-weight:600; font-size:1.3rem; color:var(--tinta); }
.marea__paso small{ font-size:.94rem; line-height:1.55; color:var(--tinta-suave); }

/* el confeti del núcleo aquí es polvo de hoja de oro: fino, y cae DETRÁS de las hojas (nunca tapa los nombres) */
.hd .confeti{ z-index:0; }
.hd .papelito{ width:3px !important; height:4px !important; border-radius:1px; opacity:.9; }
.hd .papelito--redondo{ width:3px !important; height:3px !important; border-radius:50%; }

/* ── ESCENA 4 · ceremonia ─────────────────────────────────────────────────── */
/* una ventana de cielo antes de la hoja: aquí se VE al sol tocar el agua */
.seccion.ceremonia{ padding-top:100vh; position:relative; }
.ventana{
  position:absolute; left:50%; top:22vh; transform:translateX(-50%); margin:0; white-space:nowrap;
  padding:.5rem 1.1rem; border-radius:999px; background:rgba(11,22,34,.55); color:#F6EFE3;
  font-family:var(--f-display); font-style:italic; font-size:1.15rem;
}
.ventana b{ font-family:var(--f-texto); font-style:normal; font-weight:500; font-size:.8rem; letter-spacing:.2em; margin-right:.4rem; color:var(--oro-claro); }
.hora-grande{ margin:.2rem 0 .4rem; font-family:var(--f-display); color:var(--oro-letra); line-height:1; }
.hora-grande b{ font-weight:500; font-size:clamp(4rem, 20vw, 5.6rem); letter-spacing:-.01em; }
.hora-grande span{ font-family:var(--f-texto); font-size:.9rem; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-suave); }
.ceremonia .titulo{ font-style:italic; }
.detalles{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:.8rem; }
.detalles li{ display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; column-gap:.9rem; text-align:left; padding:.9rem 1rem; border:1px solid rgba(29,42,51,.12); border-radius:2px; background:rgba(255,255,255,.35); }
.detalles svg{ grid-row:span 2; width:42px; height:42px; fill:none; stroke:var(--marca); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.detalles b{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:var(--tinta); }
.detalles small{ color:var(--tinta-suave); font-size:.88rem; }

/* ── ESCENA 5 · recepción ─────────────────────────────────────────────────── */
.linea::before{ background:linear-gradient(var(--oro), rgba(201,150,63,.2)); }
.linea__paso::before{ border-color:var(--oro); background:var(--papel); }
.linea__paso.destaca::before{ border-color:var(--oro); background:var(--oro); }
.linea__hora{ color:var(--oro-letra); font-size:1.1rem; font-weight:600; }
.linea__que b{ color:var(--tinta); font-size:1.15rem; }
.linea__que small{ color:var(--tinta-suave); font-size:.9rem; }

/* ── ESCENA 6 · llegar ─────────────────────────────────────────────────────── */
.lugares__dir{ color:var(--tinta-suave); margin:0; }
.lugares__hora{ color:var(--tinta); font-weight:500; margin:.3rem 0 1.4rem; }
.mapas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1rem; }
.mapas .boton{ min-height:48px; padding:.75rem 1.1rem; }
.boton{ font-family:var(--f-texto); font-weight:500; letter-spacing:.04em; background:var(--acento); color:#F6EFE3; box-shadow:0 4px 0 var(--acento-hondo), 0 12px 24px -14px rgba(0,0,0,.6); }
.boton--linea{ background:transparent; color:var(--acento); box-shadow:none; border:1px solid rgba(13,79,89,.5); }
.calendario{ margin-top:.4rem; }
.ruta, .hospedaje{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid rgba(201,150,63,.4); }
.ruta__lista{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.5rem; }
.ruta__lista li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px dashed rgba(29,42,51,.18); text-align:left; }
.ruta__lista b{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; color:var(--tinta); }
.ruta__lista span{ color:var(--tinta-suave); }
.notas__lista li{ background:rgba(255,255,255,.4); box-shadow:none; border:1px solid rgba(29,42,51,.1); color:var(--tinta); }
.codigo{ font-family:var(--f-texto); letter-spacing:.14em; padding:.05rem .4rem; border:1px dashed var(--acento); }

/* ── pase, confirmar, regalos, muro ───────────────────────────────────────── */
.pase__tarjeta{ background:#FFFFFF; border-radius:4px; }
.rsvp .formulario{ background:rgba(255,255,255,.45); border:1px solid rgba(29,42,51,.1); box-shadow:none; border-radius:2px; }
.campo select, .campo textarea, .campo input, .buscar__entrada{ background:#FFFDF8; border-color:rgba(29,42,51,.28); color:var(--tinta); border-radius:2px; font-family:var(--f-texto); }
.boton--grande{ width:100%; min-height:54px; }
.hoja--muro{ margin-top:12vh; }

/* ── la muestra en papel ───────────────────────────────────────────────────── */
.mini-tarjeta{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  width:min(56vw, 210px); aspect-ratio:5 / 7; margin:0 auto 1.4rem; text-decoration:none;
  background:var(--grano), var(--fibras), #FBF6EC; box-shadow:0 18px 34px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(201,150,63,.4) inset;
  transform:rotate(-3deg);
}
.mini-tarjeta__mono{ font-family:var(--f-display); font-style:italic; font-size:2rem; color:var(--oro-letra); }
.mini-tarjeta__mono i{ font-family:var(--f-letra); font-style:normal; color:var(--marca); }
.mini-tarjeta__fecha{ font-size:.7rem; letter-spacing:.26em; color:var(--tinta-suave); }
.mini-tarjeta__qr{ width:38px; height:38px; margin-top:.6rem; opacity:.7;
  background:conic-gradient(var(--tinta) 25%, transparent 0 50%, var(--tinta) 0 75%, transparent 0) 0 0 / 9.5px 9.5px; }

/* ── EL CIERRE, bajo las estrellas ─────────────────────────────────────────── */
.pie{
  position:relative; padding:18vh 1.5rem 7rem; text-align:center;
  background-color:rgba(6,12,20,.35); color:#F6EFE3;
}
.constelacion{ display:block; width:min(70vw, 280px); height:auto; margin:0 auto 1.4rem; overflow:visible; }
.constelacion__lineas path{ stroke-dasharray:1; stroke-dashoffset:0; }
.pie__frase{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.7rem, 7.6vw, 2.3rem); line-height:1.2; color:#F6EFE3; margin:0 0 1rem; }
.pie__nombre{ font-family:var(--f-letra); font-size:2.2rem; color:var(--oro-claro); margin:0; }
.pie__fecha{ font-size:.74rem; letter-spacing:.28em; color:#D9CFBE; margin:.4rem 0 0; }
.pie__folio{ color:#B9B0A2; }
.pie .seqlogic-watermark-title{ color:#D9CFBE; }
.pie .seqlogic-social-icon{ color:#F6EFE3; }

.volver{ background:rgba(246,239,227,.94); color:var(--tinta); }


/* ══════════════════════════════════════════════════════════════════════════
   v3 — TODO PINTADO A MANO (gouache). El código solo acomoda, funde y escribe.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LA ENTRADA: el sobre pintado, en 3 láminas que se funden ─────────────── */
.entrada{ background:#EFE3CB; overflow:hidden; padding:0; transition:opacity .9s ease, visibility .9s; }
.sobre-pintado{ position:absolute; inset:0; transform-origin:50% 33%; }
.sobre-pintado__lamina{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.sobre-pintado__lamina--2, .sobre-pintado__lamina--3{ opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1); }
.sobre-pintado.desatado .sobre-pintado__lamina--2{ opacity:1; transition-duration:.42s; }
.sobre-pintado.abierto .sobre-pintado__lamina--3{ opacity:1; transition-duration:.55s; }
/* el golpecito al romper el lacre (prepara: se hunde 1.5 % y regresa) */
.hd-anima .sobre-pintado.desatado{ animation:hd-golpe-sobre .34s cubic-bezier(.3,1.5,.6,1) both; }
@keyframes hd-golpe-sobre{ 0%{ transform:scale(1); } 40%{ transform:scale(.985); } 100%{ transform:scale(1); } }
/* la tarjeta que asoma crece hasta volverse la invitación (frena al llegar) */
.hd-anima .sobre-pintado.crece{ animation:hd-crece .9s cubic-bezier(.55,0,.2,1) both; }
@keyframes hd-crece{ 0%{ transform:scale(1); } 100%{ transform:scale(2.6) translateY(4%); } }

/* "Para…": una etiqueta de papel colgada, no un letrero de pantalla */
.entrada__etiqueta{
  position:absolute; z-index:3; left:50%; top:max(4.2rem, 7vh); transform:translateX(-50%) rotate(-1.5deg);
  padding:.55rem 1.4rem .7rem; text-align:center; background:#FEF9ED;
  box-shadow:0 10px 22px -12px rgba(70,46,20,.55), 0 0 0 1px rgba(201,150,63,.35) inset;
  transition:opacity .3s ease;
}
.entrada__para{ margin:0; color:#5E4A2E; font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; }
.entrada__nombre{ margin:.1rem 0 0; color:var(--tinta); font-family:var(--f-display); font-weight:500; font-style:italic; font-size:clamp(1.35rem, 6.4vw, 1.9rem); white-space:nowrap; }
/* el lacre se toca donde está pintado: un botón transparente sobre él */
.gancho.lacre{
  position:absolute; z-index:4; left:50%; top:52.5%; width:min(30vw, 150px); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%, -50%); background:transparent;
}
.lacre__aro{ position:absolute; inset:-6%; border-radius:50%; border:1.5px solid rgba(254,249,237,.9); opacity:0; pointer-events:none; }
.hd-anima .lacre__aro{ animation:hd-aro 1.6s 1s cubic-bezier(.22,1,.36,1) 2 both; }   /* 2 veces y se queda quieto */
@keyframes hd-aro{ 0%{ opacity:0; transform:scale(.8); } 30%{ opacity:.9; } 100%{ opacity:0; transform:scale(1.35); } }
.entrada__pista{
  position:absolute; left:50%; bottom:max(1.6rem, 6vh); transform:translateX(-50%); z-index:3; margin:0;
  padding:.45rem 1.2rem; border-radius:999px; background:rgba(254,249,237,.92); white-space:nowrap;
  font-family:var(--f-display); font-style:italic; font-size:1.2rem; color:var(--acento);
  box-shadow:0 8px 18px -10px rgba(70,46,20,.5); transition:opacity .25s ease;
}
.entrada__marcador{ position:absolute; bottom:.4rem; left:0; right:0; z-index:3; }
.revelado .entrada__etiqueta, .revelado .entrada__pista, .revelado .gancho.lacre{ opacity:0; pointer-events:none; }

/* ── LA BAHÍA: 4 láminas fijas detrás de todo, que se funden con el scroll ── */
.cielo{ position:fixed; inset:0; z-index:0; pointer-events:none; background:#16233A; }
.cielo__lamina{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:0; will-change:opacity; }
.cielo__lamina[data-lamina="0"]{ opacity:1; }

/* ── EL PAPEL: secciones de lado a lado, con guirnaldas pintadas arriba y abajo ── */
.carta{ position:relative; z-index:1; }
.seccion{ max-width:none; padding:0; }
.seccion + .seccion, .portada + .seccion{ margin-top:46vh; }          /* entre hoja y hoja: una ventana a la bahía */
.hoja{
  position:relative; max-width:none; margin:0; padding:5.6rem 1.4rem 5.4rem; text-align:center;
  background:var(--papel);
  box-shadow:0 -1px 0 rgba(0,0,0,.02);
}
.hoja > *:not(.guirnalda){ position:relative; z-index:2; max-width:520px; margin-left:auto; margin-right:auto; }
/* el grano del papel encima de todo (también sobre las flores): así flor y papel son la misma hoja */
.hoja::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--grano); opacity:.7; }
.guirnalda{ position:absolute; left:0; z-index:1; width:100%; height:auto; pointer-events:none; }
.guirnalda--arriba{ top:0; transform:translateY(-38%); }
.guirnalda--abajo{ bottom:0; transform:translateY(38%) scale(-1, -1); }
.seccion:nth-of-type(even) .guirnalda--arriba{ transform:translateY(-38%) scaleX(-1); }   /* que no se repita igual */
.seccion:nth-of-type(even) .guirnalda--abajo{ transform:translateY(38%) scaleY(-1); }
.hoja--muro{ margin-top:46vh; }

/* ── la portada: la tarjeta de filo dorado que salió del sobre, con la corona pintada ── */
.portada{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:4.6rem 1.1rem 6.2rem; position:relative; }
.hoja--portada{
  width:100%; max-width:390px; padding:1.6rem 1.2rem 2rem; background:#FFFDF6;
  box-shadow:0 30px 60px -26px rgba(20,24,38,.65), inset 0 0 0 7px #FFFDF6, inset 0 0 0 8.5px rgba(201,150,63,.75);
}
.hoja--portada .guirnalda{ display:none; }
.corona{ position:relative; width:min(66vw, 250px); margin:0 auto .4rem; }
.corona__pintura{ display:block; width:100%; height:auto; }
.corona__mono{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.12em; margin:0; font-family:var(--f-display); font-style:italic; font-weight:500; font-size:clamp(2.3rem, 11vw, 3rem); color:var(--oro-letra); letter-spacing:.04em; }
.corona__mono i{ font-family:var(--f-letra); font-style:normal; color:var(--marca); font-size:.8em; margin:0 .1em; }
.corona--chica{ width:min(74vw, 300px); margin:0 auto 1rem; }
.corona__titulo{ position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:0 22%; font-size:clamp(1.5rem, 6.8vw, 2rem); }

/* ── fotos de la pareja: láminas impresas puestas sobre el papel ── */
.foto-flow, .foto-rsvp{ position:relative; background:#fff; padding:9px 9px 9px; border-radius:1px; transform:rotate(-1.6deg); box-shadow:0 18px 30px -16px rgba(40,30,20,.55); overflow:visible; }
.foto-rsvp{ transform:rotate(1.4deg); }
.foto-flow > img, .foto-rsvp img{ display:block; width:100%; height:auto; }
.foto-flow > img{ aspect-ratio:4 / 5; object-fit:cover; }
.nota-ia{ margin:.6rem 0 1.6rem; }
/* los invitados pintados del formal de playa */
.vestimenta{ margin:1.4rem auto .6rem; }
.vestimenta img{ display:block; width:min(100%, 420px); height:auto; margin:0 auto; }
.vestimenta figcaption{ margin-top:-.4rem; font-family:var(--f-display); font-style:italic; font-size:1.05rem; color:var(--tinta-suave); }
/* la ceremonia y la fiesta abren con una ventana alta: la pintura cuenta la hora antes que el texto */
.seccion.ceremonia{ padding-top:0; margin-top:100vh !important; position:relative; }
.seccion.recepcion{ margin-top:80vh !important; }
.ventana{ top:calc(-100vh + 5.2rem); }
.detalles li, .notas__lista li, .rsvp .formulario{ background:rgba(255,255,255,.5); }

/* ── EL CIERRE: el anochecer pintado en movimiento ── */
.pie{ position:relative; min-height:100dvh; margin-top:30vh; padding:16vh 1.5rem 7rem; text-align:center; background-color:#0E1A2C; color:#F6EFE3; overflow:hidden; }
.pie__video{ position:absolute; inset:0; z-index:0;
  -webkit-mask-image:linear-gradient(transparent, #000 22%); mask-image:linear-gradient(transparent, #000 22%); }
.pie__video video{ width:100%; height:100%; object-fit:cover; display:block; }
.pie__video::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(10,18,32,.15) 0%, rgba(10,18,32,.55) 55%, rgba(10,18,32,.85) 100%); }
.pie > *:not(.pie__video){ position:relative; z-index:1; }
.pie__pausa{ position:absolute !important; right:.9rem; bottom:4.6rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(246,239,227,.5); background:rgba(14,26,44,.6); color:#F6EFE3; display:grid; place-items:center; cursor:pointer; }
.pie__pausa svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pie__pausa .i-play{ display:none; fill:currentColor; }
.pie__pausa.en-pausa .i-play{ display:inline; }
.pie__pausa.en-pausa .i-pausa{ display:none; }
.constelacion{ display:block; width:min(64vw, 250px); height:auto; margin:0 auto 1.2rem; overflow:visible; }
.constelacion__lineas path{ stroke-dasharray:1; stroke-dashoffset:0; }
.pie__frase{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.7rem, 7.6vw, 2.3rem); line-height:1.2; color:#F6EFE3; margin:0 0 1rem; text-shadow:0 2px 14px rgba(5,10,20,.6); }
.pie__nombre{ font-family:var(--f-letra); font-size:2.2rem; color:var(--oro-claro); margin:0; text-shadow:0 2px 12px rgba(5,10,20,.6); }
.pie__fecha{ font-size:.74rem; letter-spacing:.28em; color:#E6DDCB; margin:.4rem 0 0; }
.pie__folio{ color:#CFC6B6; }
.pie .seqlogic-watermark-title{ color:#E6DDCB; }
.pie .seqlogic-social-icon{ color:#F6EFE3; }

.hoja::before{ content:none; }
.hoja{ outline:none; }
.hoja--portada::after{ display:none; }


/* ══════════════════════════════════════════════════════════════════════════
   EL MOVIMIENTO — solo si la persona NO pidió menos movimiento (escena.js pone .hd-anima)
   Llegar = frenar; lo secundario llega después; nada se repite solo.
   ══════════════════════════════════════════════════════════════════════════ */
.hd-anima .escena .hoja{ opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.hd-anima .escena.vista .hoja{ opacity:1; transform:none; }
.hd-anima .escena .hoja--muro{ transition-delay:.15s; }
.hd-anima .escena .titulo, .hd-anima .escena .etiqueta{ opacity:0; transform:translateY(.5em); transition:opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.hd-anima .escena .titulo{ transition-delay:.06s; }
.hd-anima .escena.vista .titulo, .hd-anima .escena.vista .etiqueta{ opacity:1; transform:none; }
.hd-anima .escena .dato{ opacity:0; transform:translateY(14px) scale(.98); transition:opacity .5s ease calc(380ms + var(--i, 0) * 110ms), transform .62s cubic-bezier(.34,1.4,.64,1) calc(380ms + var(--i, 0) * 110ms); }
.hd-anima .escena.vista .dato{ opacity:1; transform:none; }
/* la portada: la tarjeta que salió del sobre "aterriza" (UN resorte en toda la pieza: el protagonista) */
.hd-anima .portada .hoja--portada{ opacity:1; transform:none; }
.hd-anima .carta.visible .hoja--portada{ animation:hd-aterriza 1.1s .1s cubic-bezier(.22,1,.36,1) both; }
.hd-anima .carta.visible .corona{ animation:hd-mono 1.4s .35s cubic-bezier(.34,1.56,.64,1) both; }
.hd-anima .carta.visible .portada__nombre{ animation:hd-sube .9s .6s cubic-bezier(.22,1,.36,1) both; }
.hd-anima .carta.visible .portada__fecha, .hd-anima .carta.visible .portada__lugar, .hd-anima .carta.visible .portada__arriba{ animation:hd-sube .8s .8s cubic-bezier(.22,1,.36,1) both; }
.hd-anima .carta.visible .portada__pista{ animation:hd-aparece .8s 1.6s ease both; }
@keyframes hd-aterriza{ 0%{ opacity:0; transform:scale(1.1); } 100%{ opacity:1; transform:none; } }   /* la tarjeta del sobre se asienta */
@keyframes hd-mono{ 0%{ opacity:0; transform:scale(.6); } 60%{ opacity:1; } 100%{ opacity:1; transform:scale(1); } }
@keyframes hd-sube{ 0%{ opacity:0; transform:translateY(16px); } 100%{ opacity:1; transform:none; } }
@keyframes hd-aparece{ from{ opacity:0; } to{ opacity:1; } }
/* el cierre: la constelación se dibuja una sola vez y las estrellas prenden una por una */
.hd-anima .pie .constelacion__lineas path{ stroke-dashoffset:1; transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1) .3s; }
.hd-anima .pie.vista .constelacion__lineas path{ stroke-dashoffset:0; }
.hd-anima .pie .constelacion__estrellas circle{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.2); transition:opacity .4s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.hd-anima .pie.vista .constelacion__estrellas circle{ opacity:1; transform:none; }
.hd-anima .pie.vista .constelacion__estrellas circle:nth-child(2){ transition-delay:.5s; } .hd-anima .pie.vista .constelacion__estrellas circle:nth-child(3){ transition-delay:.8s; }
.hd-anima .pie.vista .constelacion__estrellas circle:nth-child(4){ transition-delay:1.1s; } .hd-anima .pie.vista .constelacion__estrellas circle:nth-child(5){ transition-delay:1.4s; }
.hd-anima .pie.vista .constelacion__estrellas circle:nth-child(6){ transition-delay:1.7s; } .hd-anima .pie.vista .constelacion__estrellas circle:nth-child(7){ transition-delay:1.9s; }
.hd-anima .pie.vista .constelacion__estrellas circle:nth-child(8){ transition-delay:2.2s; } .hd-anima .pie.vista .constelacion__estrellas circle:nth-child(9){ transition-delay:2.5s; }
.hd-anima .pie.vista .constelacion__estrellas circle:nth-child(10){ transition-delay:2.7s; } .hd-anima .pie.vista .constelacion__estrellas circle:nth-child(11){ transition-delay:3s; }
.hd-anima .pie .pie__frase, .hd-anima .pie .pie__nombre{ opacity:0; transform:translateY(14px); transition:opacity .9s ease 1.2s, transform 1s cubic-bezier(.22,1,.36,1) 1.2s; }
.hd-anima .pie.vista .pie__frase, .hd-anima .pie.vista .pie__nombre{ opacity:1; transform:none; }
/* la firma de SeqLogic en vector: la Q bota UNA vez al entrar a la vista (logo-bota.js, el de seqlogicmx.com) */
.lb{ display:inline-block; line-height:0; padding:.4rem; border-radius:6px; }
.lb svg{ display:block; width:150px; height:auto; overflow:visible; }
.lb:focus-visible{ outline:2px solid var(--oro); outline-offset:4px; }


@media (prefers-reduced-motion: reduce){
  .entrada{ transition:opacity .3s ease, visibility .3s; }
  .sobre-pintado__lamina--2, .sobre-pintado__lamina--3{ transition-duration:.2s !important; }
  .lacre__aro{ display:none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LA TARJETA PARA IMPRIMIR (/impresa/): el mismo papel y el mismo oro
   ══════════════════════════════════════════════════════════════════════════ */
body.imprenta{ background:var(--grano), var(--papel-hondo); }
.imprenta .cara--frente, .imprenta .cara--reverso{ background:var(--grano), var(--fibras), var(--papel); }
.imprenta .cara::after{ border-color:var(--oro); }
.imprenta .imp__sol{ width:calc(var(--mm) * 26); color:var(--oro); margin-bottom:calc(var(--mm) * 4); }
.imprenta .imp__nombre{ font-family:var(--f-display); font-weight:500; color:var(--oro-letra); }
.imprenta .imp__nombre .amp{ font-family:var(--f-letra); font-style:normal; font-size:.95em; line-height:.9; color:var(--marca); -webkit-text-fill-color:var(--marca); }
.imprenta .imp__fecha b{ color:var(--oro-letra); font-weight:500; }
.imprenta .imp__mono{ font-family:var(--f-display); font-style:italic; color:var(--oro-letra); }

/* ══════════════════════════════════════════════════════════════════════════
   v3.1 — UN solo sol, marcos que se alternan, íconos pintados y la interfaz hecha papel
   ══════════════════════════════════════════════════════════════════════════ */
/* el marco tiene la proporción exacta de la pintura y la cubre como object-fit:cover: así el sol (en % de la
   pintura) cae siempre en el mismo lugar del cielo pintado, en cualquier celular */
.cielo{ container-type:size; }
.cielo__marco{ position:absolute; left:50%; top:50%; width:max(100vw, 55.814vh); width:max(100cqw, 55.814cqh); aspect-ratio:1536 / 2752; transform:translate(-50%, -50%); }
.cielo__lamina{ object-fit:fill; }
/* la caja del sol termina EXACTO en la línea del mar (1415 de 2752 px): lo que baja de ahí, se esconde */
.sol-cielo{ position:absolute; left:0; top:0; width:100%; height:51.42%; overflow:hidden; }
.sol{ position:absolute; left:0; top:0; width:16.927%; aspect-ratio:1; will-change:transform; }
.sol img{ position:absolute; inset:0; width:100%; height:100%; }
.sol__coral{ opacity:0; }
/* el halo: luz suave alrededor (se queda dentro del cielo; abajo del horizonte no hay) */
.sol::before{ content:""; position:absolute; inset:-70%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,214,160,.42), rgba(255,190,140,.16) 55%, rgba(255,190,140,0)); }

/* los marcos: la costa va solo arriba y toda sobre el papel (sus paredes blancas no deben dejar ver la bahía) */
.guirnalda.marco--tira-costa{ top:.4rem; transform:none !important; }
.hoja:has(.marco--tira-costa){ padding-top:7.4rem; }
.guirnalda.marco--tira-conchas.guirnalda--arriba{ transform:translateY(-30%) !important; }
.guirnalda.marco--tira-conchas.guirnalda--abajo{ transform:translateY(30%) scaleY(-1) !important; }

/* íconos pintados */
.icono-pintado{ display:block; width:76px; height:76px; margin:0 auto .4rem; }
.detalles .icono-pintado{ grid-row:span 2; width:58px; height:58px; margin:0; align-self:center; }
.detalles li.sin-icono{ grid-template-columns:1fr; padding-left:1.1rem; }
.ruta .icono-pintado{ margin-top:-.4rem; }

/* ── la interfaz hecha papel: nada de cajas grises ───────────────────────── */
/* la cuenta regresiva: números en la letra de la invitación, sin cajas, separados por puntitos de oro */
.cuenta__grid{ gap:0; }
.cuenta__caja{ border:0 !important; background:none !important; box-shadow:none !important; padding:.2rem 0; position:relative; }
.cuenta__caja + .cuenta__caja::before{ content:"·"; position:absolute; left:-.15em; top:.05em; font-family:var(--f-display); font-size:2.2rem; color:var(--oro); }
.cuenta__caja .n{ font-size:2.4rem; font-weight:500; line-height:1; color:var(--oro-letra); }
.cuenta__caja .l{ font-size:.64rem; }
/* los lugares apartados: subrayado de tinta, no una pastilla */
.saludo__pases{ border:0; border-radius:0; background:none; padding:.1rem .2rem; font-family:var(--f-display); font-style:italic; font-size:1.2rem; box-shadow:inset 0 -1px 0 rgba(201,150,63,.7); }
/* el raspa: una hoja de oro con la orilla rasgada */
.raspa__capa{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 4l9 2 8-3 11 2 9-2 12 3 10-2 9 2 11-3 10 3 9-2 12 2 8-2 11 3 10-2 9 2 11-1 8-1 2 6-1 9 2 10-1 11 1 9-3 5-9-1-11 2-8-3-12 2-9-2-10 3-11-2-9 2-10-3-12 2-8-1-11 2-9-3-10 2-9-1-7 1-2-7 1-10-2-11 1-9-1-8z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3 4l9 2 8-3 11 2 9-2 12 3 10-2 9 2 11-3 10 3 9-2 12 2 8-2 11 3 10-2 9 2 11-1 8-1 2 6-1 9 2 10-1 11 1 9-3 5-9-1-11 2-8-3-12 2-9-2-10 3-11-2-9 2-10-3-12 2-8-1-11 2-9-3-10 2-9-1-7 1-2-7 1-10-2-11 1-9-1-8z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%; border-radius:0 !important;
}
/* campos del formulario: renglón de tinta sobre el papel */
.campo select, .campo textarea, .campo input, .buscar__entrada{
  background:transparent !important; border:0 !important; border-bottom:1px solid rgba(29,42,51,.4) !important;
  border-radius:0 !important; box-shadow:none !important; padding:.55rem .1rem; font-family:var(--f-display); font-size:1.12rem; color:var(--tinta);
}
.campo select:focus, .campo textarea:focus, .campo input:focus, .buscar__entrada:focus{ outline:2px solid rgba(201,150,63,.8); outline-offset:3px; }
.campo textarea{ background-image:repeating-linear-gradient(transparent 0 1.9rem, rgba(29,42,51,.14) 1.9rem calc(1.9rem + 1px)) !important; line-height:1.9rem; }
.rsvp .formulario, .detalles li, .notas__lista li{ background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }
.detalles li, .notas__lista li{ border-bottom:1px solid rgba(201,150,63,.35) !important; }
.faq__item{ background:none !important; box-shadow:none !important; border-radius:0 !important; border-bottom:1px solid rgba(201,150,63,.4); }
.faq__item summary{ font-family:var(--f-display); font-size:1.15rem; }
/* los botones: como una cinta impresa, no una pastilla con sombra de botón */
.boton{ border-radius:2px; box-shadow:0 8px 16px -12px rgba(7,51,58,.7); background:var(--acento); }
.boton--linea{ background:transparent; box-shadow:none; }

/* ── la entrada: la tarjeta ya no se agranda de más (nunca borrosa): crece poco y se funde a papel ── */
.hd-anima .sobre-pintado.crece{ animation:hd-crece .85s cubic-bezier(.55,0,.2,1) both; }
@keyframes hd-crece{ 0%{ transform:scale(1); } 100%{ transform:scale(1.3) translateY(3%); } }
.sobre-pintado::after{ content:""; position:absolute; inset:0; background:#FFFDF6; opacity:0; transition:opacity .6s ease; pointer-events:none; }
.sobre-pintado.crece::after{ opacity:1; transition-delay:.3s; }

/* la pareja ya es pintura sobre papel: va directo en la hoja, sin marco de foto */
.foto-flow, .foto-rsvp{ background:none !important; padding:0 !important; box-shadow:none !important; transform:none !important; }
.foto-rsvp{ overflow:hidden; }
.foto-rsvp img{ aspect-ratio:1 / 1; object-position:50% 58%; transform:scale(1.16); }

/* ══════════════════════════════════════════════════════════════════════════
   v3.1 (después de que Abdiel vio la v3): ninguna orilla dura y la entrada sin corte
   ══════════════════════════════════════════════════════════════════════════ */
/* cada hoja se lava hacia la bahía con un degradado largo (como acuarela), arriba y abajo: la pintura de
   la ventana nunca aparece como un rectángulo pegado */
.seccion{ position:relative; }
.seccion::before, .seccion::after{ content:""; position:absolute; left:0; right:0; height:24vh; pointer-events:none; }
.seccion::before{ bottom:100%; background:linear-gradient(to top, rgba(254,249,237,.96), rgba(254,249,237,.55) 35%, rgba(254,249,237,0)); }
.seccion::after{ top:100%; background:linear-gradient(rgba(254,249,237,.96), rgba(254,249,237,.55) 35%, rgba(254,249,237,0)); }
/* la ventana del sol (ceremonia) y la del medio sol (fiesta) se quedan limpias arriba: ahí manda la pintura */
.seccion.ceremonia::before, .seccion.recepcion::before{ height:14vh; }
/* la hoja de la muestra en papel ya no deja ventana: su papel se lava directo en la noche del cierre */
.seccion.papel::after{ height:34vh; background:linear-gradient(rgba(254,249,237,.96), rgba(254,249,237,.5) 30%, rgba(14,26,44,0)); }

/* EL CIERRE: la noche es UNA sola, sin caja. La pintura fija del anochecer sigue detrás; el video del faro
   sale de ella poco a poco y el azul baja solo hasta la constelación. */
.pie{ margin-top:34vh; background:linear-gradient(rgba(14,26,44,0) 0%, rgba(14,26,44,0) 18%, rgba(14,26,44,.55) 62%, #0E1A2C 100%); }
.pie__video{ -webkit-mask-image:linear-gradient(transparent 0%, rgba(0,0,0,.35) 18%, #000 52%); mask-image:linear-gradient(transparent 0%, rgba(0,0,0,.35) 18%, #000 52%); }
.pie__video::after{ background:linear-gradient(rgba(10,18,32,0) 0%, rgba(10,18,32,.35) 45%, rgba(10,18,32,.8) 100%); }

/* LA TARJETA QUE VUELA: la tarjeta en blanco que salió del sobre se vuelve la hoja de la portada.
   Es papel de verdad hecho con código (nunca una imagen agrandada: no se puede ver borrosa). */
.tarjeta-vuela{
  position:fixed; z-index:65; pointer-events:none; opacity:0; border-radius:2px;
  background:var(--grano), #FFFDF6;
  box-shadow:0 30px 60px -26px rgba(20,24,38,.55), inset 0 0 0 7px #FFFDF6, inset 0 0 0 8.5px rgba(201,150,63,.75);
  transition:left 1s cubic-bezier(.65,0,.25,1), top 1s cubic-bezier(.65,0,.25,1), width 1s cubic-bezier(.65,0,.25,1), height 1s cubic-bezier(.65,0,.25,1), opacity .25s ease;
}
.tarjeta-vuela.vuela{ opacity:1; }
.tarjeta-vuela.llega{ opacity:0; transition:opacity .35s ease; }
/* mientras la tarjeta vuela, el sobre se acerca tantito (la cámara entra) y se apaga */
.hd-anima .sobre-pintado.entra{ transform:scale(1.07); transition:transform 1.6s cubic-bezier(.33,0,.2,1); }   /* sin apagarse: el núcleo funde la entrada a la portada */
/* la portada ya no "aterriza": la tarjeta YA es la hoja; solo aparecen la corona y los nombres */
.hd-anima .carta.visible .hoja--portada{ animation:none !important; }
.hd-anima .carta.visible .corona{ animation-delay:.85s !important; }
.hd-anima .carta.visible .portada__nombre{ animation-delay:1.1s !important; }
.hd-anima .carta.visible .portada__fecha, .hd-anima .carta.visible .portada__lugar, .hd-anima .carta.visible .portada__arriba{ animation-delay:1.25s !important; }
.hd-anima .carta.visible .portada__pista{ animation-delay:2.2s !important; }
.hd-anima .carta.visible .portada .guirnalda{ display:none; }
/* el video del sobre (si ya llegó): encima de las láminas, se ve cuando corre */
.sobre-pintado__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.sobre-pintado.con-video .sobre-pintado__video{ opacity:1; }

/* v3.1 · la noche sin fantasma: el video del faro vive en el cielo fijo, alineado con la pintura del anochecer
   (su primer cuadro ES esa pintura) y solo se prende cuando el cierre está a la vista */
.cielo__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.cielo__video.ve{ opacity:1; }
.pie{ background:linear-gradient(rgba(14,26,44,0) 0%, rgba(14,26,44,0) 26%, rgba(14,26,44,.5) 66%, rgba(14,26,44,.92) 100%); }
/* los lavados de papel: más cortos, para que la ventana siga siendo pintura y no neblina */
.seccion::before, .seccion::after{ height:15vh; }
.seccion::before{ background:linear-gradient(to top, rgba(254,249,237,.92), rgba(254,249,237,.35) 40%, rgba(254,249,237,0)); }
.seccion::after{ background:linear-gradient(rgba(254,249,237,.92), rgba(254,249,237,.35) 40%, rgba(254,249,237,0)); }
.seccion.papel::after{ height:26vh; background:linear-gradient(rgba(254,249,237,.92), rgba(254,249,237,.35) 35%, rgba(254,249,237,0)); }

/* ══════════════════════════════════════════════════════════════════════════
   LA TARJETA IMPRESA v3.1 — la misma familia que la digital (mismas pinturas en alta, mismas letras, mismo papel)
   Las pinturas de pintado/imprenta/ están a 300 dpi o más a tamaño real (la bahía: 1536 px nativos = 293 dpi,
   llevada a 1571 px = 300 dpi con 133 mm de ancho con sobrante).
   ══════════════════════════════════════════════════════════════════════════ */
.imprenta .cara--frente{ background:var(--grano), #FEF9ED; }
.imprenta .cara::after{ z-index:1; border-color:rgba(201,150,63,.7); }
.imprenta .imp__guirnalda, .imprenta .imp__conchas{ position:absolute; z-index:2; left:0; width:100%; height:auto; pointer-events:none; }
.imprenta .imp__guirnalda{ top:0; transform:translateY(-16%); }
.imprenta .imp__conchas{ bottom:0; transform:translateY(22%) scaleY(-1); }
.imprenta .cara__dentro{ z-index:3; }
.imprenta .cara--frente .cara__dentro{ margin-top:calc(var(--mm) * 9); }
.imprenta .imp__corona{ position:relative; width:calc(var(--mm) * 30); margin:0 auto calc(var(--mm) * 2.6); }
.imprenta .imp__corona img{ display:block; width:100%; height:auto; }
.imprenta .imp__corona span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:.12em; font-family:var(--f-display); font-style:italic; font-weight:500; font-size:calc(var(--mm) * 6.4); color:var(--oro-letra); }
.imprenta .imp__corona i{ font-family:var(--f-letra); font-style:normal; font-size:.82em; color:var(--marca); }
.imprenta .imp__arriba{ font-size:calc(var(--mm) * 2.3); letter-spacing:.3em; color:var(--marca); }
.imprenta .imp__nombre{ margin:calc(var(--mm) * 2.6) 0 calc(var(--mm) * 3); font-family:var(--f-display); font-weight:500; font-size:calc(var(--mm) * 11.5); line-height:1; color:var(--oro-letra); white-space:nowrap; }
.imprenta .imp__nombre .amp{ display:inline; font-size:.8em; margin:0 .06em; }
.imprenta .imp__frase{ margin-bottom:calc(var(--mm) * 4); font-size:calc(var(--mm) * 3.6); }
.imprenta .imp__fecha span{ min-width:calc(var(--mm) * 24); height:calc(var(--mm) * 10); border-color:rgba(201,150,63,.8); font-size:calc(var(--mm) * 2.5); }
.imprenta .imp__fecha b{ font-size:calc(var(--mm) * 13); color:var(--oro-letra); font-weight:500; }
.imprenta .imp__hora{ margin-top:calc(var(--mm) * 3); font-size:calc(var(--mm) * 2.6); }
.imprenta .imp__lugar{ margin-top:calc(var(--mm) * 3.6); }
.imprenta .imp__lugar b{ font-weight:500; font-size:calc(var(--mm) * 5); color:var(--tinta); }
.imprenta .imp__lugar span{ font-size:calc(var(--mm) * 2.6); }
.imprenta .imp__nota{ margin-top:calc(var(--mm) * 2.6); font-size:calc(var(--mm) * 3.3); }
/* reverso: la bahía pintada a sangre, y el código en una etiqueta de papel con filo dorado (abajo, para que se vea el sol) */
.imprenta .cara--reverso{ background:#16233A; place-items:end center; color:var(--tinta); }
.imprenta .imp__bahia{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.imprenta .cara--reverso::after{ border-color:rgba(254,249,237,.7); }
.imprenta .cara--reverso .cara__dentro{
  width:calc(var(--mm) * 74); margin-bottom:calc(var(--mm) * 17); padding:calc(var(--mm) * 5) calc(var(--mm) * 6) calc(var(--mm) * 4.5);
  background:var(--grano), #FEF9ED; border-radius:calc(var(--mm) * .6);
  box-shadow:0 calc(var(--mm) * 2.4) calc(var(--mm) * 5) rgba(10,16,28,.45), inset 0 0 0 calc(var(--mm) * 1.6) #FEF9ED, inset 0 0 0 calc(var(--mm) * 1.9) rgba(201,150,63,.8);
}
.imprenta .cara--reverso .imp__mono{ margin-bottom:calc(var(--mm) * 2); font-size:calc(var(--mm) * 8); color:var(--oro-letra); }
.imprenta .cara--reverso .imp__arriba{ color:var(--marca); font-size:calc(var(--mm) * 2.1); letter-spacing:.2em; }
.imprenta .imp__qr{ margin:calc(var(--mm) * 3.4) 0 calc(var(--mm) * 3); padding:calc(var(--mm) * 2.2); background:#FFFFFF; border-radius:calc(var(--mm) * .8); box-shadow:inset 0 0 0 calc(var(--mm) * .3) rgba(201,150,63,.6); }
.imprenta .imp__qr canvas{ width:calc(var(--mm) * 34); height:calc(var(--mm) * 34); }
.imprenta .imp__pasos{ font-size:calc(var(--mm) * 2.7); line-height:1.5; color:var(--tinta); }
.imprenta .imp__liga{ margin-top:calc(var(--mm) * 2.4); color:var(--tinta-suave); font-size:calc(var(--mm) * 2.1); }
.imprenta .imp__nombre br{ display:none; }
.imprenta .cara--reverso .cara__dentro{ margin-bottom:calc(var(--mm) * 14); padding:calc(var(--mm) * 4) calc(var(--mm) * 5.5) calc(var(--mm) * 3.8); }
.imprenta .cara--reverso .imp__mono{ font-size:calc(var(--mm) * 7); margin-bottom:calc(var(--mm) * 1.4); }
.imprenta .imp__qr{ margin:calc(var(--mm) * 2.6) 0 calc(var(--mm) * 2.4); }
.imprenta .imp__qr canvas{ width:calc(var(--mm) * 31); height:calc(var(--mm) * 31); }

/* la muestra en papel: foto de la tarjeta de verdad sobre el sobre pintado (pintado/muestra-impresa.webp) */
.muestra-papel{ display:block; margin:0 auto 1.4rem; max-width:420px; }
.muestra-papel img{ display:block; width:100%; height:auto; border-radius:2px; box-shadow:0 18px 36px -22px rgba(40,30,20,.6); }
/* al imprimir: sin el grano de pantalla (Chrome lo pasa a 72 dpi); la opalina o el algodón ya traen su textura */
@media print{
  .imprenta .cara--frente, .imprenta .cara--reverso .cara__dentro{ background:#FEF9ED !important; }
}

/* ══ El faro (4 nov, 7:41: "tira la luz para otro lado… no parece una luz") ══════════════════════════════
   Ya no hay video en el cierre. Una sola luz, pre-dibujada, alineada con el haz pintado de la lámina del anochecer.
   La linterna está en (280, 1162) de la pintura de 1536 × 2752; la imagen de la luz mide 1240 × 420 y su linterna
   está en (140, 210): por eso el corrimiento. Nada se dibuja por cuadro: solo cambian opacidad y escala. */
.faro-luz{
  position:absolute; left:9.115%; top:34.593%; width:80.729%; height:auto; aspect-ratio:1240 / 420;
  transform-origin:11.29% 50%; transform:rotate(-3deg) scaleX(.62); opacity:0; mix-blend-mode:screen; pointer-events:none;
  transition:transform 2.4s cubic-bezier(.22,1,.36,1);
}
.faro-luz.prendido{ transform:rotate(-3deg) scaleX(1); }
@media (prefers-reduced-motion: reduce){ .faro-luz{ transition:none; transform:rotate(-3deg) scaleX(1); } }

/* El cierre se acomoda alrededor de la luz: la constelación arriba (cielo), la franja del faro LIBRE
   (36–50 % de la pantalla: la linterna cae en el 42 %), el texto sobre el mar oscuro y la firma abajo. */
.pie{ padding:6vh 1.5rem 5.6rem; }
.pie .constelacion{ width:min(50vw, 200px); margin:0 auto; }
.pie__frase{ margin:31vh 0 .5rem; font-size:clamp(1.5rem, 6.6vw, 2rem); }
.pie__nombre{ font-size:2rem; }
.pie .seqlogic-watermark-container{ margin-top:2.2rem; }
/* celulares bajitos: el cierre cabe en una pantalla, así la franja del faro queda libre también ahí */
@media (max-height:780px){
  .pie{ padding-top:4vh; padding-bottom:4.4rem; }
  .pie .constelacion{ width:min(40vw, 150px); }
  .pie__frase{ margin-top:30vh; font-size:1.35rem; }
  .pie__nombre{ font-size:1.7rem; }
  .pie .seqlogic-watermark-container{ margin-top:1.1rem; }
}
@media (max-height:780px){ .pie__frase{ margin-top:34vh; } .pie .seqlogic-watermark-title{ margin-bottom:.2rem; } }
@media (max-height:700px){
  .pie{ padding-top:3vh; padding-bottom:4rem; }
  .pie .constelacion{ width:min(34vw, 130px); }
  .pie__frase{ margin-top:37vh; font-size:1.25rem; margin-bottom:.3rem; }
  .pie__nombre{ font-size:1.55rem; }
  .pie__folio{ display:none; }
  .pie .seqlogic-watermark-container{ margin-top:.8rem; }
}

/* el video limpio del cierre ya viene en la geometría exacta de la pintura (720 × 1290): llena el marco igual que la lámina */
.cielo__video{ object-fit:fill; }
.pie__pausa{ bottom:5.2rem; }