/* Tarjeta Convida · tanda 20–24 · lo que comparten las cinco bodas (archivo nuevo).
   1) El fondo en movimiento de la portada: capas de degradado grandes y difusas que solo se trasladan, giran
      y escalan (transform), así corre en la tarjeta gráfica y pesa 0 KB. Cada diseño pinta sus capas.
   2) La escena fijada de la portada y de la fecha, los objetos con profundidad y la foto de portada.
   3) Avance del morphing: --m1 (primera forma a la segunda) y --m2 (segunda a la tercera) salen de --sc-p.
   4) Tipografía en negrita: el script solo vive en el «&» y en una palabra de acento. */

.t20 { --margen: clamp(1.25rem, 5vw, 3rem); }
.t20 .jd-titulo-sec { line-height: .98; letter-spacing: -0.015em; }
.t20 .jd-titulo-sec i, .t20 .jd-y, .t20 .porton-nombres i, .t20 .jd-cierre-nombres i { font-weight: 400; }

/* ---------- 1 · Fondo en movimiento ---------- */
.cielo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--cielo-base, var(--claro)); }
.cielo i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.cielo .c1 { width: 90vmax; height: 90vmax; left: -30vmax; top: -40vmax; animation: t20-deriva-a 22s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.cielo .c2 { width: 80vmax; height: 80vmax; right: -34vmax; top: -10vmax; animation: t20-deriva-b 26s cubic-bezier(.45, 0, .55, 1) -6s infinite alternate; }
.cielo .c3 { width: 70vmax; height: 70vmax; left: 10vmax; bottom: -42vmax; animation: t20-deriva-c 19s cubic-bezier(.45, 0, .55, 1) -3s infinite alternate; }
.cielo .c4 { width: 160vmax; height: 160vmax; left: calc(50% - 80vmax); top: calc(50% - 80vmax); border-radius: 0; animation: t20-gira 40s linear infinite; }
.cielo .c5 { width: 46vmax; height: 46vmax; right: 6vmax; bottom: -10vmax; animation: t20-deriva-a 17s cubic-bezier(.45, 0, .55, 1) -9s infinite alternate-reverse; }
@keyframes t20-deriva-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(14vmax, 8vmax, 0) scale(1.12); } 100% { transform: translate3d(6vmax, 18vmax, 0) scale(.94); } }
@keyframes t20-deriva-b { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(-16vmax, 10vmax, 0) scale(.9) rotate(20deg); } 100% { transform: translate3d(-6vmax, -6vmax, 0) scale(1.1) rotate(-10deg); } }
@keyframes t20-deriva-c { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18vmax, -10vmax, 0) scale(1.15); } 100% { transform: translate3d(-10vmax, -4vmax, 0) scale(.95); } }
@keyframes t20-gira { to { transform: rotate(360deg); } }

/* ---------- 2 · Escenas y objetos ---------- */
.t20 .jd-portada { --a: clamp(0, calc((var(--sc-p, 0) - 0.1) / 0.8), 1); --e: calc(var(--a) * var(--a) * (3 - 2 * var(--a))); }
.t20-escena, .lp-escena, .ge-escena, .ca-escena, .tm-escena, .lt-escena { height: 100svh; overflow: hidden; isolation: isolate; }
/* Sin fijado (movimiento reducido o sin JavaScript) la escena no es sticky y necesita su propio posicionamiento. */
.quieto .lp-escena, .quieto .ge-escena, .quieto .ca-escena, .quieto .tm-escena, .quieto .lt-escena, .sin-js .lp-escena, .sin-js .ge-escena, .sin-js .ca-escena, .sin-js .tm-escena, .sin-js .lt-escena { position: relative; }
.lp-obj, .ge-obj, .ca-obj, .tm-obj, .lt-obj { position: absolute; z-index: 2; height: auto; pointer-events: none; will-change: transform; user-select: none; }
.t20 .jd-baja { position: absolute; z-index: 4; left: 50%; bottom: max(1.4rem, env(safe-area-inset-bottom)); translate: -50% 0; }
/* Los objetos quedan quietos hasta que el sobre se abre: así no se mueven detrás del sobre. */
.cerrado .cielo i { animation-play-state: paused; }

/* La foto de portada cubre toda la primera pantalla (con ?fotos=1); el texto se aclara sobre ella. */
.lp-portada-foto, .ge-portada-foto, .ca-portada-foto, .tm-portada-foto, .lt-portada-foto { position: absolute; inset: 0; z-index: 1; }
.lp-portada-foto .jd-marcador, .ge-portada-foto .jd-marcador, .ca-portada-foto .jd-marcador, .tm-portada-foto .jd-marcador, .lt-portada-foto .jd-marcador { height: 100%; }
.con-fotos .t20 .jd-portada [class$="-portada-foto"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 10 12 / .45), rgb(12 10 12 / .15) 30%, rgb(12 10 12 / .25) 55%, rgb(12 10 12 / .7)); }
.con-fotos .t20 .jd-portada { --txt: #FCF8F0; --txt-suave: rgb(252 248 240 / .9); }
.con-fotos .t20 .jd-portada .jd-nombres { text-shadow: 0 2px 30px rgb(12 10 12 / .45); }

/* ---------- 3 · Avance del morphing ---------- */
.t20 [data-morph] { --m1: clamp(0, calc((var(--sc-p, 0) - .14) / .3), 1); --m2: clamp(0, calc((var(--sc-p, 0) - .48) / .28), 1); }
.quieto .t20 [data-morph], .sin-js .t20 [data-morph] { --m1: 1; --m2: 1; --mg: 1; --sc-p: 1; }
.quieto .cielo i { animation: none; }
.quieto .t20 .jd-portada { --e: 0; }

/* ---------- 4 · Píldora y avisos con el color de cada diseño ---------- */
.t20 .pildora { font-weight: 600; letter-spacing: .06em; }
.t20 .jd-faltan strong { font-weight: inherit; }

/* Movimiento reducido: los objetos quedan en su sitio; el texto, visible. */
.quieto .lp-obj, .quieto .ge-obj, .quieto .ca-obj, .quieto .tm-obj, .quieto .lt-obj { transform: none !important; translate: none !important; }
.quieto .lp-escena, .quieto .ge-escena, .quieto .ca-escena, .quieto .tm-escena, .quieto .lt-escena { height: auto; min-height: 100svh; }
.quieto .lp-fecha-escena, .quieto .ge-fecha-escena, .quieto .ca-fecha-escena, .quieto .tm-fecha-escena, .quieto .lt-fecha-escena,
.sin-js .lp-fecha-escena, .sin-js .ge-fecha-escena, .sin-js .ca-fecha-escena, .sin-js .tm-fecha-escena, .sin-js .lt-fecha-escena { position: relative; height: auto; min-height: 100svh; padding-block: 12svh; }