/* ═══════════ Componentes compartidos por las dos versiones nuevas ═══════════
   Rediseño de fondo (8 oct 2026). Las DOS versiones (historias.html y
   clasica.html) cargan esta hoja y encima la suya propia (historias.css /
   clasica.css), que viste cada componente a su modo.

   Aquí vive la MECÁNICA de las piezas que arman los js/fx-*.js (el sobre de
   cera, la cuenta de aeropuerto, el calendario con scroll, el contador de
   tiempo juntos, el frasco de la cápsula, el en vivo, la página de gracias,
   las flores que caen y las que brotan), con un vestido neutro en su paleta.
   Salió de css/rediseno.css (la versión que Pedro rechazó por parecerse a
   Katia): de ahí se quedan sólo las piezas, no el esqueleto.

   NO se cargan ya estilos.css, estephany.css, animaciones.css ni rediseno.css. */

:root {
  /* Su paleta (nada fuera de aquí) */
  --moka: #A68A7B; --nude: #CBAE9B; --arena: #DDC6B8; --marfil: #EEE6DF;
  --champana: #F1DDB3; --rosa: #E8C9C4;
  /* Derivados aprobados */
  --papel: #FBF7F3; --rosa-claro: #F6E9E5; --moka-profundo: #5E4A40;
  --tinta: #4A3830; --tinta-suave: #6E564B;
  --oro: #C2A06A; --oro-claro: #E3CD9F; --oro-texto: #7A5A2A;
  /* Letras */
  --script: 'Pinyon Script', 'Cormorant Garamond', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
}
[hidden] { display: none !important; }

/* Esconder a la vista, pero no a los lectores de pantalla ni a Google. */
.hero__nombres--firma,
.hero--gracias .hero__nombres {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* El letrero de vista previa ya no persigue al lector: se queda arriba. */
.vista-previa { position: absolute; }

/* ═══════════ Flores que caen (js/fx-flores.js) ═══════════
   Encima de todo, también del sobre, pero sin robarle nunca un toque. */
.flores-lienzo {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 101;
}

/* ═══════════ Nombres a mano (js/fx-firma.js) ═══════════ */
.firma {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
  margin: -.2rem auto 0;
  overflow: visible;
}
.firma__n { font-family: 'Pinyon Script', cursive; }
/* el & de Pinyon es un hilito: va el de Cormorant en cursiva, como en el sobre */
.firma__amp { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; }

/* ═══════════ El calendario que se arma ═══════════
   Una hoja de papel con filete de oro. Los días caen uno por uno con un rebote,
   se dibuja a mano un aro dorado en el 26 y salta un corazón que late. La
   cascada la dispara js/oro-al-bajar.js (clases calendario--armado / --cae). */
.calendario {
  position: relative;
  width: min(86vw, 320px);
  padding: 1.7rem 1.2rem 1.5rem;
  background: #FFFDFB;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(94, 74, 64, .12), 0 1px 3px rgba(94, 74, 64, .08);
}
.calendario::before {
  content: '';
  position: absolute; inset: 7px;
  border: 1px solid rgba(194, 160, 106, .45);
  border-radius: 2px;
  pointer-events: none;
}
.calendario.calendario--armado .calendario__dias span { opacity: 0; transform: translateY(-110%) rotate(-10deg); }
.calendario.calendario--cae .calendario__dias span {
  animation: fx-cae-dia .55s cubic-bezier(.3, 1.45, .55, 1) both;
  animation-delay: calc(250ms + var(--i, 0) * 45ms);
}
@keyframes fx-cae-dia {
  from { opacity: 0; transform: translateY(-110%) rotate(-10deg); }
  to { opacity: 1; transform: none; }
}
.calendario__hoy { position: relative; color: var(--tinta); font-weight: 700; }
.calendario__trazo {
  position: absolute; left: 50%; top: 50%;
  width: 2.7rem; height: 2.7rem;
  transform: translate(-50%, -52%);
  overflow: visible; pointer-events: none;
}
.calendario__trazo path {
  fill: none; stroke: var(--oro); stroke-width: 3.6; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
.calendario--armado .calendario__trazo path { stroke-dashoffset: 1; }
.calendario--cae .calendario__trazo path { animation: fx-traza 1s 2.2s ease-in-out both; }
@keyframes fx-traza { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.calendario__cora {
  position: absolute; right: -.45rem; top: -.4rem;
  width: .95rem; height: .9rem;
  fill: #C9928A;
  overflow: visible;
}
.calendario--armado .calendario__cora { transform: scale(0); }
.calendario--cae .calendario__cora {
  animation: fx-cora-pop .6s 3.15s cubic-bezier(.3, 1.7, .5, 1) both, fx-cora-late 1.6s 3.9s ease-in-out infinite;
}
@keyframes fx-cora-pop { from { transform: scale(0) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
@keyframes fx-cora-late { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } }
.calendario__pie {
  margin-top: 1.1rem;
  font-family: var(--serif); font-weight: 500; font-size: 1.15rem;
  color: var(--tinta); text-align: center;
}
.calendario__pie small {
  display: block; margin-top: .35rem;
  font-family: var(--sans); font-weight: 500; font-size: .56rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave);
}
.calendario--armado .calendario__pie { opacity: 0; }
.calendario--cae .calendario__pie { animation: fx-sube .8s 3.3s ease-out both; }
@keyframes fx-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════ Cuenta regresiva de aeropuerto (js/fx-aeropuerto.js) ═══════════
   Paletas de moka profundo, números champaña, bisagra de oro. Dos por dos en
   el celular, las cuatro en fila en pantalla grande. */
.flip {
  --dw: clamp(2.3rem, 12.5vw, 3.5rem);
  --dh: calc(var(--dw) * 1.42);
  --r: calc(var(--dw) * .09);
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 1.3rem 1.6rem;
  margin: 0 auto 1.6rem;
}
@media (min-width: 720px) { .flip { grid-template-columns: repeat(4, auto); } }
.flip__grupo { display: flex; flex-direction: column; align-items: center; }
.flip__digs {
  display: flex;
  gap: calc(var(--dw) * .08);
  padding: calc(var(--dw) * .08);
  border-radius: calc(var(--r) * 1.6);
  background: #3B2C25;
  box-shadow: 0 8px 18px rgba(74, 56, 48, .25), inset 0 0 0 1px var(--oro);
}
.flip__u {
  position: relative;
  display: block;
  width: var(--dw); height: var(--dh);
  perspective: calc(var(--dh) * 4);
  font-family: var(--serif); font-weight: 600;
  font-size: calc(var(--dh) * .68); line-height: 1;
  color: #F1DDB3;
  font-variant-numeric: lining-nums tabular-nums;
}
.flip__m {
  position: absolute; left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  background: #4A3830;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip__m span { position: absolute; left: 0; right: 0; height: 200%; line-height: var(--dh); text-align: center; }
.flip__arr, .flip__fa { top: 0; border-radius: var(--r) var(--r) 0 0; transform-origin: 50% 100%; background: #56433A; }
.flip__aba, .flip__fb { bottom: 0; border-radius: 0 0 var(--r) var(--r); transform-origin: 50% 0; }
.flip__arr span, .flip__fa span { top: 0; }
.flip__aba span, .flip__fb span { bottom: 0; }
.flip__fa { z-index: 3; }
.flip__fb { z-index: 2; transform: rotateX(90deg); }
.flip__u--gira .flip__fa { animation: fx-flip-a .28s ease-in both; }
.flip__u--gira .flip__fb { animation: fx-flip-b .28s .28s ease-out both; }
@keyframes fx-flip-a { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.55); } }
@keyframes fx-flip-b { from { transform: rotateX(90deg); filter: brightness(1.4); } to { transform: rotateX(0); filter: brightness(1); } }
.flip__u::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -.5px; background: rgba(0, 0, 0, .55); z-index: 4;
}
.flip__u::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: 50%;
  height: 4px; margin-top: -2px; z-index: 5;
  background: linear-gradient(90deg, #8C6E3F 0 3px, transparent 3px calc(100% - 3px), #8C6E3F calc(100% - 3px));
}
.flip__lab {
  margin-top: .7rem;
  font-family: var(--sans); font-weight: 500; font-size: .58rem;
  letter-spacing: .26em; text-indent: .26em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.flip__llego { font-family: var(--script); font-size: clamp(2.6rem, 11vw, 3.4rem); color: var(--tinta); margin-bottom: 1rem; }

/* ═══════════ Flores que brotan (js/fx-brotes.js) ═══════════ */
.seccion--brotes { position: relative; }
.brote {
  position: absolute;
  width: clamp(4.4rem, 21vw, 6rem); height: clamp(4.4rem, 21vw, 6rem);
  overflow: visible; pointer-events: none;
  z-index: 1;
}
.brote--tl { top: .45rem; left: .45rem; }
.brote--tr { top: .45rem; right: .45rem; transform: scaleX(-1); }
.brote--bl { bottom: .45rem; left: .45rem; transform: scaleY(-1); }
.brote--br { bottom: .45rem; right: .45rem; transform: rotate(180deg); }
.brote__tallo {
  fill: none; stroke-width: 1.25; stroke-linecap: round;
  stroke-dasharray: 1 1.01; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.4, .1, .4, 1);
}
.brote__hoja {
  transform-box: fill-box; transform-origin: 0% 50%;
  transform: scale(0) rotate(-40deg);
  transition: transform .75s cubic-bezier(.3, 1.45, .5, 1);
}
.brote__flor {
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(0) rotate(-110deg);
  transition: transform .95s cubic-bezier(.3, 1.35, .5, 1);
}
.seccion--brotada .brote__tallo { stroke-dashoffset: 0; }
.seccion--brotada .brote__hoja, .seccion--brotada .brote__flor { transform: none; }

/* ═══════════ Nuestra historia: texto y tiempo juntos (js/fx-historia.js) ═══════════ */
.seccion--historia-texto {
  background:
    radial-gradient(circle at 100% 0, rgba(232, 201, 196, .45), transparent 55%),
    radial-gradient(circle at 0 100%, rgba(241, 221, 179, .35), transparent 50%),
    var(--papel);
}
.historia__texto {
  max-width: 30rem;
  margin: 0 auto 2.8rem;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.32rem; line-height: 1.7;
  color: var(--tinta);
  text-wrap: pretty;
}
.juntos { max-width: 25rem; margin: 0 auto; }
.juntos__cab { font-family: var(--script); font-size: clamp(2.3rem, 10vw, 2.8rem); line-height: 1; color: var(--oro-texto); margin-bottom: 1.3rem; }
.juntos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.juntos__tarjeta {
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem .3rem .9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(203, 174, 155, .5);
  box-shadow: 0 6px 16px rgba(94, 74, 64, .06);
}
.juntos__tarjeta--ancha { grid-column: 1 / -1; }
.juntos__ico {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: #F6E3DF;
  color: var(--oro-texto);
}
.juntos__tarjeta:nth-child(2) .juntos__ico { background: #F3E8DE; }
.juntos__tarjeta:nth-child(3) .juntos__ico { background: #F8EDD6; }
.juntos__ico svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.juntos__ico svg .lleno { fill: currentColor; stroke: none; }
.juntos__latido { color: #C9928A; }
.juntos__latido--late svg { animation: fx-latido .55s ease-out; }
@keyframes fx-latido { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
.juntos__n {
  margin-top: .45rem;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.45rem, 6.6vw, 2.2rem); line-height: 1.1;
  color: var(--tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.juntos__tarjeta--ancha .juntos__n { font-size: clamp(2.1rem, 10vw, 2.9rem); }
.juntos__l {
  margin-top: .2rem;
  font-family: var(--sans); font-weight: 500; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.juntos__tarjeta--pop .juntos__n { animation: fx-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.juntos__pie { margin-top: 1.1rem; font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--tinta-suave); }
.juntos__muestra {
  display: inline-block;
  margin-top: .7rem; padding: .3rem .8rem;
  border: 1px dashed var(--oro);
  background: rgba(255, 253, 251, .8);
  font-family: var(--sans); font-weight: 500; font-size: .56rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-texto);
}

/* ═══════════ Cápsula del tiempo: el frasco (js/fx-capsula.js) ═══════════
   Se dibuja a 300 × 330 px y se escala (--k) al ancho del teléfono. */
.capsula__cuenta {
  margin: -.8rem 0 .6rem;
  font-family: var(--sans); font-weight: 500; font-size: .6rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.capsula__cuenta b {
  display: inline-block;
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: 0;
  color: var(--oro-texto); vertical-align: -.12em;
  transition: transform .3s cubic-bezier(.3, 1.8, .5, 1);
}
.capsula__cuenta b.capsula__pop { transform: scale(1.45); }
.capsula__cuenta small { font-size: .58rem; letter-spacing: .1em; text-transform: none; }
.capsula__faltan { color: var(--oro-texto); }
.capsula-escena {
  --k: 1;
  position: relative;
  width: calc(300px * var(--k));
  max-width: 100%;
  height: calc(330px * var(--k));
  margin: 0 auto 1.2rem;
}
.capsula-escena--quieta { height: calc(172px * var(--k)); }
.capsula-escena--quieta .cap { top: calc(-158px * var(--k)); }
.cap { position: absolute; left: 0; top: 0; width: 300px; height: 330px; transform: scale(var(--k)); transform-origin: 0 0; text-align: left; }
.cap--sin, .cap--sin * { transition: none !important; }
/* el sobre que flota esperando el tuyo */
.cap__flota {
  position: absolute; left: 102px; top: 66px; width: 96px; height: 62px;
  filter: drop-shadow(0 8px 10px rgba(74, 56, 48, .18));
  animation: fx-flota 3.2s ease-in-out infinite;
  transition: opacity .4s;
}
.cap__flota svg { display: block; width: 100%; height: 100%; }
@keyframes fx-flota { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.cap--escribe .cap__flota, .cap--nota .cap__flota, .cap--quieta .cap__flota { opacity: 0; }
/* la tarjeta donde se escribe SU mensaje */
.cap__tarjeta {
  position: absolute; left: 40px; top: 10px; width: 220px; height: 140px;
  padding: 13px 16px 10px; box-sizing: border-box;
  border-radius: 6px;
  background: #FFFDFB;
  box-shadow: 0 10px 24px -12px rgba(74, 56, 48, .45), inset 0 0 0 1px rgba(194, 160, 106, .5);
  opacity: 0; transform-origin: 50% 50%;
  transition: opacity .5s;
}
.cap--escribe .cap__tarjeta { opacity: 1; }
.cap--dobla .cap__tarjeta { transform: translateY(-14px) scale(.47); opacity: 0; transition: transform .6s cubic-bezier(.5, 0, .4, 1), opacity .35s .3s; }
.cap__para { margin-bottom: 5px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 13px; color: var(--oro-texto); }
.cap__tarjeta p { margin: 0; max-height: 72px; overflow: hidden; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14.5px; line-height: 1.24; color: var(--tinta); }
.cap__cursor { display: inline-block; width: 1.2px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--oro-texto); animation: fx-cursor 1s steps(1) infinite; }
@keyframes fx-cursor { 50% { opacity: 0; } }
.cap--firmada .cap__cursor { display: none; }
.cap__firma { position: absolute; right: 16px; bottom: 8px; font-family: var(--script); font-size: 18px; color: var(--oro-texto); opacity: 0; transition: opacity .6s; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap--firmada .cap__firma { opacity: 1; }
/* el sobre grande que se cierra y cae */
.cap__sobre { position: absolute; left: 90px; top: 41px; width: 120px; height: 78px; opacity: 0; perspective: 500px; transform-origin: 50% 50%; }
.cap__sobre > * { position: absolute; }
.cap--sobre .cap__sobre { opacity: 1; transition: opacity .35s; }
.cap--cae .cap__sobre { transform: translate(0, 78px) scale(.42) rotate(-6deg); transition: transform .75s cubic-bezier(.5, 0, .3, 1), opacity .35s; }
.cap--dentro .cap__sobre { opacity: 0; transition: none; }
.cap__s-atras { inset: 0; border-radius: 4px; background: #DCC2B8; z-index: 1; }
.cap__s-carta { left: 8px; top: 5px; width: 104px; height: 68px; padding: 10px 12px; box-sizing: border-box; border-radius: 2px; background: #FFFDFB; box-shadow: 0 0 0 .6px rgba(194, 160, 106, .5); z-index: 3; transform: translateY(-38px); }
.cap__s-carta i { display: block; height: 2.4px; margin: 0 0 7px; border-radius: 2px; background: rgba(74, 56, 48, .16); }
.cap--guarda .cap__s-carta { transform: translateY(0); transition: transform .5s cubic-bezier(.5, 0, .3, 1); }
.cap__s-frente { left: 0; top: 0; width: 120px; height: 78px; z-index: 4; }
.cap__s-solapa { left: 0; top: 0; width: 120px; height: 46px; z-index: 2; transform-origin: 50% 0; transform: rotateX(180deg); }
.cap--cierra .cap__s-solapa { transform: rotateX(0deg); z-index: 5; transition: transform .55s cubic-bezier(.45, 0, .3, 1), z-index 0s .25s; }
.cap__s-sello {
  left: 49px; top: 33px; width: 22px; height: 22px; border-radius: 50%; z-index: 6;
  background: radial-gradient(circle at 35% 30%, #8A7266, #5E4A40 60%, #3E302A);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  opacity: 0; transform: scale(1.9);
}
.cap--sella .cap__s-sello { opacity: 1; transform: scale(1); transition: transform .35s cubic-bezier(.4, 1.6, .5, 1), opacity .2s; }
/* el frasco */
.cap__frasco { position: absolute; left: 85px; top: 172px; width: 130px; height: 156px; transform-origin: 50% 100%; }
.cap__frasco svg { position: absolute; left: 0; top: 0; overflow: visible; }
.cap__frasco--tiembla { animation: fx-tiembla .7s ease-out; }
@keyframes fx-tiembla { 0% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 55% { transform: rotate(2deg); } 80% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
.cap__pila { position: absolute; inset: 0; }
.cap__mini { position: absolute; width: 50px; height: 33px; margin: -16.5px 0 0 -25px; }
.cap__mini svg { display: block; width: 50px; height: 33px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .12)); }
.cap__tapa { transform-origin: 20% 100%; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); top: -3px !important; }
.cap--destapa .cap__tapa, .cap--abierta .cap__tapa { transform: translate(10px, -24px) rotate(16deg); }
/* el aviso de guardado */
.cap__nota { position: absolute; left: 30px; top: 34px; width: 240px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; pointer-events: none; }
.cap--nota .cap__nota { opacity: 1; transform: none; }
.cap__nota b { display: block; font-family: var(--script); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--tinta); }
.cap__nota small { display: block; margin-top: 6px; font-family: var(--sans); font-weight: 500; font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-suave); }

/* ═══════════ Hoy es el día: en vivo (js/fx-envivo.js) ═══════════ */
.seccion--envivo { background: linear-gradient(180deg, #FFFDFB 0%, #F6E9E5 100%); }
.vivo__sub {
  margin: -1rem 0 1.4rem;
  font-family: var(--sans); font-weight: 500; font-size: .6rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-suave);
}
.vivo { display: flex; flex-direction: column; align-items: center; max-width: 21rem; margin: 0 auto; }
.vivo__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .85rem .38rem .7rem;
  border-radius: 99px;
  background: #F6E3DF; color: #7A3F37;
  font-family: var(--sans); font-weight: 600; font-size: .58rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.vivo__pill i { position: relative; width: .45rem; height: .45rem; border-radius: 50%; background: #B8756B; }
.vivo__pill i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #B8756B; animation: fx-pulso 1.6s ease-out infinite; }
@keyframes fx-pulso { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
.vivo__reloj { margin: .8rem 0 1.1rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--tinta-suave); }
.vivo__reloj b { font-style: normal; font-weight: 600; color: var(--tinta); }
.vivo__lista { position: relative; width: 100%; --fila: 2.9rem; }
.vivo__luz {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--fila);
  border-radius: 12px;
  background: rgba(232, 201, 196, .38);
  box-shadow: inset 0 0 0 1px rgba(194, 160, 106, .35);
  opacity: 0;
  transition: transform .8s cubic-bezier(.5, 0, .25, 1), opacity .4s;
}
.vivo__luz span {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  padding: .32rem .55rem;
  border-radius: 99px;
  background: var(--moka-profundo); color: var(--champana);
  font-family: var(--sans); font-weight: 600; font-size: .5rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.vivo__riel { position: absolute; left: 5.6rem; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(74, 56, 48, .1); }
.vivo__riel i { display: block; width: 100%; height: 0; border-radius: 2px; background: var(--oro); transition: height .8s cubic-bezier(.5, 0, .25, 1); }
.vivo__fila { position: relative; display: flex; align-items: center; height: var(--fila); text-align: left; }
.vivo__h { flex: none; width: 4.4rem; text-align: right; font-family: var(--sans); font-weight: 500; font-size: .7rem; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vivo__pt {
  position: relative; flex: none;
  width: .8rem; height: .8rem; margin: 0 .8rem;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 0 0 1.5px rgba(74, 56, 48, .28);
  transition: background .4s, box-shadow .4s;
}
.vivo__n { padding-right: 3.8rem; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.1; color: var(--tinta); opacity: .85; transition: opacity .4s; }
.vivo__fila--hecho .vivo__pt { background: var(--oro); box-shadow: none; }
.vivo__fila--hecho .vivo__pt::after {
  content: ''; position: absolute; left: .27rem; top: .14rem;
  width: .2rem; height: .38rem;
  border: solid #fff; border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg);
}
.vivo__fila--hecho .vivo__n { opacity: .5; }
.vivo__fila--ya .vivo__pt { background: var(--moka-profundo); box-shadow: 0 0 0 3px var(--papel); }
.vivo__fila--ya .vivo__pt::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--moka-profundo); animation: fx-pulso2 1.8s ease-out infinite; }
@keyframes fx-pulso2 { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(2); opacity: 0; } }
.vivo__fila--ya .vivo__n { opacity: 1; font-weight: 600; }
.vivo__fila--ya .vivo__h { color: var(--tinta); }
.vivo__sigue {
  width: 100%;
  margin-top: 1.1rem;
  padding: .95rem 1.15rem 1rem;
  box-sizing: border-box;
  border-radius: 14px;
  background: #FFFDFB;
  box-shadow: 0 8px 20px -12px rgba(74, 56, 48, .4), inset 0 0 0 1px rgba(194, 160, 106, .4);
  text-align: left;
}
.vivo__sigue small { display: block; margin-bottom: .45rem; font-family: var(--sans); font-weight: 600; font-size: .55rem; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-texto); }
.vivo__q { font-family: var(--sans); font-weight: 500; font-size: .9rem; line-height: 1.35; color: var(--tinta-suave); }
.vivo__q b { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--tinta); }
.vivo__q em { font-style: normal; font-weight: 600; color: var(--oro-texto); font-variant-numeric: tabular-nums; }
.vivo__barra { height: 3px; margin-top: .65rem; border-radius: 3px; background: rgba(74, 56, 48, .1); overflow: hidden; }
.vivo__barra i { display: block; height: 100%; width: 0; background: var(--oro); transition: width .35s linear; }

/* ═══════════ Un día después: gracias (js/fx-gracias.js) ═══════════ */
.hero--gracias .hero__mini,
.hero--gracias .hero__fecha,
.hero--gracias .hero__foto,
.hero--gracias .hero__invitado { display: none; }
.gracias { position: relative; display: flex; flex-direction: column; align-items: center; }
.gracias__cab { position: relative; width: 100%; height: 10rem; }
.gracias__inv, .gracias__gr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gracias__inv small {
  font-family: var(--sans); font-weight: 500; font-size: .66rem;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--oro-texto);
}
.gracias__nom { margin: .3rem 0; font-family: var(--script); font-size: clamp(2.9rem, 13vw, 4.4rem); line-height: 1.15; color: var(--tinta); white-space: nowrap; }
.gracias__nom i { font-family: var(--serif); font-style: italic; font-size: .6em; color: var(--oro); }
.gracias__fe { font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .32em; text-indent: .32em; color: var(--tinta-suave); }
.gracias__gr { opacity: 0; transform: translateY(10px); }
.gracias__g { margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(2.8rem, 12.5vw, 4.3rem); line-height: 1.05; color: var(--tinta); }
.gracias__g::after { display: none; }
.gracias__gr small { margin-top: .8rem; font-family: var(--sans); font-weight: 500; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tinta-suave); }
.gracias--despues .gracias__inv { opacity: 0; transform: translateY(-10px); transition: opacity .45s, transform .5s; }
.gracias--despues .gracias__gr { opacity: 1; transform: none; transition: opacity .9s .45s, transform 1s .45s; }
.gracias__cont { margin-top: 1.2rem; font-family: var(--sans); font-weight: 500; font-size: .74rem; color: var(--tinta-suave); }
.gracias__cont b { margin-right: .2rem; font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.gracias__mos { position: relative; margin: 1.1rem auto 0; }
.gracias__mos:empty { display: none; }
.gracias__tile {
  position: absolute;
  border-radius: 8px; overflow: hidden;
  background: #EBD9D2;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px -10px rgba(74, 56, 48, .55);
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.45);
}
.gracias__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gracias--puesto .gracias__tile { opacity: 1; transform: none; transition: transform .85s cubic-bezier(.25, 1.25, .4, 1) var(--del), opacity .4s var(--del); }
.gracias__muestra {
  display: inline-block; margin-top: 1.1rem; padding: .3rem .8rem;
  border: 1px dashed var(--oro); background: rgba(255, 253, 251, .8);
  font-family: var(--sans); font-weight: 500; font-size: .56rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oro-texto);
}

/* ═══════════ Menos movimiento ═══════════
   Cada pieza ya salta sola a su final desde el JS; aquí se apagan los bucles. */
@media (prefers-reduced-motion: reduce) {
  .calendario.calendario--armado .calendario__dias span,
  .calendario--armado .calendario__pie { opacity: 1; transform: none; animation: none; }
  .calendario--armado .calendario__trazo path { stroke-dashoffset: 0; animation: none; }
  .calendario--armado .calendario__cora { transform: none; animation: none; }
  .brote__tallo, .brote__hoja, .brote__flor { transition: none; }
  .cap__flota, .vivo__pill i::after, .vivo__fila--ya .vivo__pt::before { animation: none; }
  .gracias__tile, .gracias__inv, .gracias__gr { transition: none !important; }
}

/* ═══════════ El sobre con sello de cera (js/fx-sobre.js) ═══════════
   La propuesta 1 de propuestas/sobres.html, elegida por Pedro (8 oct). Todo se
   mide en cqw (1 % del ancho del sobre), así escala solo en cualquier teléfono.
   El motor pone `sobre--abierto` en #sobre al tocarlo; aquí cuelga todo de eso. */
.cera {
  position: relative;
  width: min(94vw, 410px);
  aspect-ratio: 100 / 118;
  container-type: inline-size;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  animation: fx-cera-llega 1.1s ease both;
}
.cera:focus-visible { box-shadow: 0 0 0 2px var(--oro); border-radius: 6px; }
.cera.sobre--abierto { cursor: default; }
@keyframes fx-cera-llega { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cera__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* el latido del sobre cerrado: invita a tocar */
.cera__cuerpo { position: absolute; inset: 0; transform-origin: 50% 62%; animation: fx-cera-late 3.2s ease-in-out infinite; }
.sobre--abierto .cera__cuerpo { animation-play-state: paused; }
@keyframes fx-cera-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } }
.cera__sombra {
  position: absolute; left: 5cqw; width: 90cqw; height: 15cqw; top: 101cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 56, 48, .27), rgba(74, 56, 48, 0));
}
.cera__sobre { position: absolute; left: 7cqw; width: 86cqw; height: 63.2cqw; top: 46cqw; perspective: 1100px; }
.cera__atras {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(to bottom, rgba(74, 56, 48, .2), rgba(74, 56, 48, 0) 38%), #D8BEB0;
  box-shadow: 0 1px 1.5px rgba(74, 56, 48, .14), 0 18px 30px -14px rgba(74, 56, 48, .42);
}
.cera__forro {
  position: absolute; left: 2.5%; right: 2.5%; top: 0; height: 46%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: radial-gradient(circle, rgba(194, 160, 106, .62) 0 1.1px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(#F8EDEA, #F2E2DD);
}
.cera__frente { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; display: block; }
/* para quién es: el nombre de la familia */
.cera__para {
  position: absolute; left: 12%; right: 12%; top: 71%; bottom: 5.5%; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0; text-align: center; pointer-events: none;
}
.cera__rot {
  font-family: var(--sans); font-weight: 500; font-size: max(9px, 2.45cqw); line-height: 1;
  letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--tinta);
}
.cera__fam {
  display: block; max-width: 100%; margin-top: .28em;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 5.5cqw; line-height: 1.1;
  color: var(--tinta); text-wrap: balance;
}
/* la solapa, con dos caras: papel por fuera y forro por dentro */
.cera__sombra-solapa {
  position: absolute; left: 0; top: 0; width: 100%; height: 50%; z-index: 6;
  pointer-events: none; overflow: visible; transition: opacity .35s .5s;
}
.sobre--abierto .cera__sombra-solapa { opacity: 0; }
.cera__solapa {
  position: absolute; left: 0; top: 0; width: 100%; height: 48%; z-index: 7;
  transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.5, 0, .3, 1) .5s, z-index 0s .97s;
}
.sobre--abierto .cera__solapa { transform: rotateX(180deg); z-index: 1; }
.cera__cara { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cera__cara svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.cera__dentro {
  transform: rotateX(180deg);
  clip-path: polygon(0 100%, 100% 100%, 54.5% 5%, 50% 0, 45.5% 5%);
  background: radial-gradient(circle, rgba(194, 160, 106, .62) 0 1.1px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(#F8EDEA, #F2E2DD);
}
.cera__dentro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(74, 56, 48, .16), rgba(74, 56, 48, 0) 45%); }
/* la tarjeta que sube */
.cera__carta {
  position: absolute; left: 6%; width: 88%; top: 4%; height: 92%; z-index: 3; opacity: 0;
  transition: transform 1.25s cubic-bezier(.22, .7, .25, 1) 1.2s, opacity 0s .5s;
}
.sobre--abierto .cera__carta { opacity: 1; transform: translateY(-76%); }
.cera__papel {
  position: absolute; inset: 0; border-radius: 2px; overflow: hidden;
  background: linear-gradient(172deg, #FFFDFB 0%, var(--papel) 55%, #F6EEE8 100%);
  box-shadow: 0 2px 4px rgba(74, 56, 48, .10), 0 12px 26px -12px rgba(74, 56, 48, .4);
}
.cera__papel::before {
  content: ''; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(194, 160, 106, .8);
  box-shadow: inset 0 0 0 2px #FBF7F3, inset 0 0 0 3px rgba(194, 160, 106, .35);
}
.cera__papel::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; pointer-events: none;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(90deg, rgba(255, 250, 240, 0), rgba(255, 250, 236, .9) 50%, rgba(255, 250, 240, 0));
}
.sobre--abierto .cera__papel::after { animation: fx-barrido 1.35s ease-out 2.2s both; }
@keyframes fx-barrido { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(340%) skewX(-18deg); } }
.cera__carta-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 9.5% 7% 0; text-align: center; }
.cera__pre {
  font-family: var(--sans); font-weight: 500; font-size: max(9.5px, 2.7cqw); line-height: 1;
  letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: var(--tinta-suave);
}
.cera__nom { display: block; width: 100%; margin-top: .22em; font-family: var(--script); font-size: 9.4cqw; line-height: 1.3; color: var(--moka-profundo); white-space: nowrap; }
.cera__nom i { font-style: normal; color: var(--oro-texto); font-size: .8em; padding: 0 .06em; }
.cera__orn { display: block; width: 44%; height: 2.6cqw; margin: .15em 0 .55em; overflow: visible; }
.cera__fec { font-family: var(--serif); font-weight: 500; font-size: 5.9cqw; line-height: 1; letter-spacing: .09em; color: var(--tinta); }
/* el sello que se parte */
.cera__sello { position: absolute; z-index: 8; left: calc(50% - 13.5cqw); top: calc(46% - 13.5cqw); width: 27cqw; height: 27cqw; pointer-events: none; }
.cera__mitad { position: absolute; inset: 0; transition: transform 1.05s cubic-bezier(.45, 0, .8, .6) .22s, opacity .45s .72s; }
.cera__sello svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cera__mitad--i { clip-path: polygon(0 0, 52.7% 0, 46.4% 23.2%, 55.4% 41.1%, 47.3% 57.1%, 54.5% 75%, 49.1% 100%, 0 100%); }
.cera__mitad--d { clip-path: polygon(52.7% 0, 100% 0, 100% 100%, 49.1% 100%, 54.5% 75%, 47.3% 57.1%, 55.4% 41.1%, 46.4% 23.2%); }
.sobre--abierto .cera__mitad--i { transform: translate(-46%, 125%) rotate(-38deg); opacity: 0; }
.sobre--abierto .cera__mitad--d { transform: translate(44%, 130%) rotate(31deg); opacity: 0; }
.cera__grieta { opacity: 0; }
.sobre--abierto .cera__grieta { animation: fx-grieta .75s both; }
@keyframes fx-grieta { 0% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.cera__miga {
  position: absolute; left: 50%; top: 50%;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 42% 58% 55% 45%;
  background: radial-gradient(circle at 35% 30%, #8A7662, #5E4A40 60%, #382C26);
  animation: fx-miga .95s cubic-bezier(.3, .6, .6, 1) var(--del) both;
}
@keyframes fx-miga { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--g)) scale(1); opacity: 0; } }
/* las ondas doradas y el destello que salen del dedo */
.cera__onda {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 30;
  border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--oro);
  box-shadow: 0 0 12px rgba(227, 205, 159, .95), inset 0 0 8px rgba(227, 205, 159, .85);
  animation: fx-onda 1.25s cubic-bezier(.2, .6, .3, 1) var(--del, 0s) both;
}
@keyframes fx-onda { from { transform: scale(.2); opacity: 1; } to { transform: scale(9); opacity: 0; } }
.cera__destello { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 31; pointer-events: none; animation: fx-destello .8s ease-out both; }
.cera__destello svg { width: 100%; height: 100%; display: block; }
@keyframes fx-destello { 0% { transform: scale(.1) rotate(0); opacity: 0; } 25% { transform: scale(1.1) rotate(25deg); opacity: 1; } 100% { transform: scale(.3) rotate(70deg); opacity: 0; } }
/* la portada: menos aire entre sobre e instrucción (el sobre ya trae su espacio arriba) */
.portada { gap: 0; }
.portada__instruccion { margin-top: -1.2rem; }
/* al abrir, la frase se va (su latido le ganaba al desvanecido del motor) */
.sobre--abierto ~ .portada__instruccion { animation: none; opacity: 0; transition: opacity .5s; }
@media (prefers-reduced-motion: reduce) {
  .cera, .cera__cuerpo { animation: none; }
  .cera__solapa, .cera__carta, .cera__mitad { transition-duration: .01s; transition-delay: 0s; }
}

/* ═══════════ El calendario con el scroll (js/fx-calendario.js) ═══════════
   Manda el dedo, no el reloj: cada día cae cuando le toca (clase cal-puesto) y
   se recoge si el invitado regresa. Apaga las caídas por tiempo de arriba. */
.calendario.calendario--scroll .calendario__dias span,
.calendario.calendario--scroll .calendario__semana span {
  animation: none !important;
  opacity: 0;
  transform: translateY(-110%) rotate(-10deg);
  transition: opacity .35s ease, transform .55s cubic-bezier(.3, 1.45, .55, 1);
}
.calendario.calendario--scroll .cal-puesto { opacity: 1 !important; transform: none !important; }
.calendario--scroll .calendario__trazo path { animation: none !important; transition: stroke-dashoffset .15s linear; }
.calendario--scroll .calendario__cora { animation: none !important; transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.7, .5, 1); }
.calendario--scroll.cal-completo .calendario__cora { transform: scale(1); animation: fx-cora-late 1.6s .6s ease-in-out infinite !important; }
.calendario--scroll .calendario__pie { animation: none !important; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.calendario--scroll.cal-completo .calendario__pie { opacity: 1; transform: none; }

/* ═══════════ Letreros de vista previa y de muestra (js/modo.js, despues.js) ═══════════
   Arriba de la página y SE QUEDA AHÍ al bajar (fijo se encimaba a los títulos). */
.vista-previa {
  position: absolute; 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;
}
.muestra-letrero {
  display: inline-block;
  margin: 1.2rem auto .4rem; padding: .3rem .8rem;
  border: 1px dashed var(--oro); background: rgba(255, 253, 251, .8);
  font-family: var(--sans); font-weight: 500; font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oro-texto);
}