/* ============================================================
   ANIMACIONES — todo con transform/opacity (fluido en el celular).
   Con "reducir movimiento" activado en el teléfono, todo queda quieto y ya armado (ver el final).
   ============================================================ */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.js .rv.split { opacity: 1; transform: none; }

/* ---- barra de avance arriba ---- */
.progress { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--coral), var(--gold), var(--teal)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ---- menú: se esconde al bajar y vuelve al subir ---- */
.nav { transition: transform .45s var(--ease), background .3s; }
.nav.is-hidden { transform: translateY(-101%); }
.nav__links a { position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-on::after { transform: scaleX(1); }
.logo svg { transition: transform .6s var(--ease); }
.logo:hover svg { transform: rotate(360deg) scale(1.08); }

/* ---- palabras que aparecen una por una (títulos) ---- */
.js .w { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(3deg); filter: blur(6px); transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2,.9,.25,1.2), filter .7s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0s)); }
.js .rv.in .w, .js .in > .w, .js h1.in .w { opacity: 1; transform: none; filter: none; }
/* el subrayado de la portada se dibuja solo */
.hero h1 em { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 94% / 0% .1em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s .9s var(--ease); }
.hero h1.in em { background-size: 100% .1em; }

/* ---- palabra que cambia: "Invitaciones digitales para [bodas]" ---- */
.rot { display: inline-grid; vertical-align: bottom; height: 1.35em; overflow: hidden; text-align: left; }
.rot { transition: width .5s var(--ease); }
.rot b { grid-area: 1 / 1; justify-self: start; padding: 0 .1em; font-weight: 700; color: var(--coral); white-space: nowrap; transform: translateY(110%); opacity: 0; transition: transform .6s cubic-bezier(.2,.9,.25,1.1), opacity .4s; }
.rot b.on { transform: none; opacity: 1; }
.rot b.out { transform: translateY(-110%); opacity: 0; }

/* ---- botón principal: brillo que pasa + confeti al tocarlo ---- */
.btn--main { position: relative; overflow: hidden; isolation: isolate; }
.btn--main::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); animation: brillo 4.5s ease-in-out 1.5s infinite; }
@keyframes brillo { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.btn { will-change: transform; }

/* ---- HÉROE: sobre que se abre y de él salen las invitaciones ---- */
.hero { overflow: clip; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(242,181,68,.16), transparent 60%); }
.cluster { overflow: hidden; isolation: isolate; height: clamp(370px, 96vw, 580px); border-radius: 32px; }
.cluster::before { content: none; }
.blob { position: absolute; z-index: 0; inset: 4% 2% 4%; border-radius: 42% 58% 48% 52% / 48% 42% 58% 52%; background: linear-gradient(140deg, var(--rose), var(--lav)); animation: blob 14s ease-in-out infinite alternate; translate: 0 var(--py, 0px); }
.cluster .phone { position: absolute; z-index: 2; bottom: 15%; --r: 0deg; --del: 0s; transform: rotate(var(--r)); }
.js .cluster:not(.in) .phone { transform: translateY(80%) rotate(var(--r)) scale(.92); }
.cluster .p1 { left: 4%; width: 31%; --r: -8deg; --del: 1.05s; }
.cluster .p2 { left: 32%; width: 36%; z-index: 3; bottom: 17%; --del: 1.2s; }
.cluster .p3 { right: 4%; width: 31%; --r: 8deg; --del: 1.35s; }
.cluster.in .phone { animation: sube 1.15s cubic-bezier(.2,.9,.25,1.12) var(--del) both, flota 7s ease-in-out calc(var(--del) + 1.4s) infinite; }
@keyframes sube { from { transform: translateY(80%) rotate(var(--r)) scale(.92); } to { transform: translateY(0) rotate(var(--r)) scale(1); } }
.env { position: absolute; left: 2%; right: 2%; bottom: 0; aspect-ratio: 2.35 / 1; }
.env__back { position: absolute; inset: 0; z-index: 1; border-radius: 14px 14px 0 0; background: linear-gradient(#b9432c, #94301d); }
.env__pocket { position: absolute; inset: 0; z-index: 4; background: linear-gradient(165deg, #f37d63, #e4573f 50%, #cf472f); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); }
.env__pocket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%); }
.env__flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 5; transform-origin: 50% 0; transform-style: preserve-3d; }
.env__flap i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.env__flap .f { background: linear-gradient(#f37d63, #e4573f); }
.env__flap .b { background: linear-gradient(#f4ecfb, #d9cdf0); transform: rotateY(180deg); }
.cluster.in .env__flap { animation: tapa 0.85s cubic-bezier(.45,.05,.3,1) .75s forwards; }
@keyframes tapa {
  0% { transform: perspective(700px) rotateX(0deg); z-index: 5; }
  49% { z-index: 5; }
  50% { z-index: 1; }
  100% { transform: perspective(700px) rotateX(180deg); z-index: 1; }
}
.env__seal { position: absolute; z-index: 6; left: 50%; top: 56%; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffe08c, #f2b544 55%, #b97a13); box-shadow: 0 6px 14px rgba(70,30,0,.45), inset 0 -3px 5px rgba(120,70,0,.35); }
.env__seal svg { width: 62%; height: 62%; }
.cluster.in .env__seal { animation: sello 0.75s ease-in .35s forwards; }
@keyframes sello { 0% { transform: scale(1) rotate(0); opacity: 1; } 25% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(.2) rotate(40deg) translateY(30%); opacity: 0; } }
.spark { position: absolute; z-index: 4; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: brilla 2.6s ease-in-out infinite; opacity: 0; }
.spark.s1 { left: 12%; top: 16%; } .spark.s2 { right: 14%; top: 26%; animation-delay: .9s; width: 10px; height: 10px; } .spark.s3 { left: 46%; top: 6%; animation-delay: 1.7s; width: 18px; height: 18px; }
@keyframes brilla { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.cluster .conf { z-index: 4; }

/* ---- cinta que corre ---- */
.cintas { position: relative; padding-block: 2.2rem; overflow: hidden; }
.cinta { display: flex; width: max-content; padding: .7rem 0; background: var(--coral); color: #fff; transform: rotate(-1.4deg); animation: corre 34s linear infinite; }
.cinta--2 { position: absolute; left: 0; top: 50%; margin-top: -1.3rem; background: var(--ink); transform: rotate(1.4deg); animation-direction: reverse; animation-duration: 40s; z-index: 0; opacity: .96; }
.cintas .cinta:first-child { position: relative; z-index: 1; }
.cinta span { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; font-weight: 700; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cinta span::after { content: "✦"; color: var(--gold); }
@keyframes corre { to { transform: translateX(-50%) rotate(var(--rot, -1.4deg)); } }
.cinta { --rot: -1.4deg; } .cinta--2 { --rot: 1.4deg; }
@keyframes corre { from { transform: translateX(0) rotate(var(--rot)); } to { transform: translateX(-50%) rotate(var(--rot)); } }

/* ---- pasos: la línea se dibuja entre las tarjetas ---- */
.steps { position: relative; }
.step { z-index: 1; }
@media (min-width: 800px) {
  .steps::before { content: ""; position: absolute; z-index: 0; left: 16%; right: 16%; top: 2.9rem; height: 0; border-top: 3px dashed var(--coral); opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform 1.6s .3s var(--ease); }
  .steps.in::before { transform: scaleX(1); }
}
.step::before { transform: scale(0) rotate(-90deg); transition: transform .8s cubic-bezier(.2,.9,.25,1.5) .3s; }
.step.in::before { transform: none; }

/* ---- "La tuya": borde que marcha ---- */
.phone--tuya { border: 0; overflow: visible; }
.phone--tuya .dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.phone--tuya .dash rect { fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-dasharray: 9 7; vector-effect: non-scaling-stroke; animation: marcha 1.2s linear infinite; }
@keyframes marcha { to { stroke-dashoffset: -32; } }
.phone--tuya b { animation: pulso 2s ease-in-out infinite; }

/* ---- "Única": los teléfonos se abren como abanico ---- */
.js .estilos figure { opacity: 0; transform: translateX(var(--sx, 0)) scale(.78) rotate(var(--sr, 0deg)); transition: opacity .6s, transform 1.1s cubic-bezier(.2,.9,.25,1.2); transition-delay: calc(var(--k, 0) * .13s + .2s); }
.js .estilos.in figure { opacity: 1; transform: none; }
.estilos figure:nth-child(1) { --sx: 130%; --sr: 10deg; --k: 0; } .estilos figure:nth-child(2) { --sx: 45%; --sr: 4deg; --k: 1; } .estilos figure:nth-child(3) { --sx: -45%; --sr: -4deg; --k: 2; } .estilos figure:nth-child(4) { --sx: -130%; --sr: -10deg; --k: 3; }
.uniq__list li { transition: transform .3s var(--ease), background .3s, color .3s; }
.uniq__list li:hover { transform: translateY(-3px) rotate(-2deg); background: var(--coral); color: #fff; border-style: solid; }

/* ---- carrusel: el del centro crece ---- */
.rail { position: relative; }
.rail figure { transform: scale(calc(1 - var(--k, 0) * .11)); opacity: calc(1 - var(--k, 0) * .4); transform-origin: 50% 60%; will-change: transform; }
.rail-bar { height: 3px; margin: .2rem max(1.25rem, calc((100vw - 1120px) / 2)) 0; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--rp, .1)); transition: transform .15s linear; }

/* ---- tarjetas: se inclinan hacia el dedo o el mouse ---- */
@media (hover: hover) {
  .pks, .feats { perspective: 1100px; }
  .pk, .feat { rotate: var(--ax, 0) var(--ay, 0) 0 var(--ang, 0deg); transition: rotate .25s var(--ease), transform .3s var(--ease), box-shadow .3s; }
  .pk.tilt, .feat.tilt { transition: rotate .08s linear, box-shadow .3s; }
}
.pk--top .pk__ribbon { overflow: hidden; }
.pk--top .pk__ribbon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg); animation: brillo 3.6s ease-in-out infinite; }
.pk li { opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--n, 0) * 60ms + .35s); }
.pk.in li, .no-js .pk li { opacity: 1; transform: none; }
.pk li::before { transform: scale(0); transition: transform .5s cubic-bezier(.2,.9,.25,1.6); transition-delay: calc(var(--n, 0) * 60ms + .5s); }
.pk.in li::before { transform: none; }

/* ---- funciones: el ícono salta ---- */
.feat svg { transform: scale(.4) rotate(-25deg); transition: transform .8s cubic-bezier(.2,.9,.25,1.7) .2s; }
.feat.in svg { transform: none; }
.feat:hover svg { animation: brinca .6s var(--ease); }
@keyframes brinca { 30% { transform: translateY(-8px) rotate(-8deg) scale(1.1); } 60% { transform: translateY(0) rotate(6deg); } }

/* ---- teléfono de demo: al tocar se abre ---- */
.poster.is-abriendo img { transition: transform .7s var(--ease), opacity .7s; transform: scale(1.12); opacity: .1; }
.poster.is-abriendo button { opacity: 0; transition: opacity .3s; }

/* ---- eventos: aparecen en cascada y el de hoy late ---- */
.js .evs .ev { opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.25,1.5), border-color .25s; transition-delay: calc(var(--n, 0) * 70ms + .2s); }
.js .evs.in .ev { opacity: 1; transform: none; }
.js .evs.in .ev:hover { transform: translateY(-3px) rotate(-1.5deg); transition-delay: 0s; }
.ev--on { animation: late 2.4s ease-in-out 1.5s infinite; }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,87,63,.5); } 50% { box-shadow: 0 0 0 12px rgba(228,87,63,0); } }

/* ---- preguntas ---- */
.faq details { transition: border-color .3s, box-shadow .3s; }
.faq details[open] { border-color: var(--coral); box-shadow: 0 14px 28px -22px rgba(228,87,63,.9); }
.faq details { overflow: hidden; }

/* ---- cierre: confeti flotando ---- */
.cierre .conf { animation-duration: 6s; }
.cierre h2 { text-shadow: 0 0 40px rgba(242,181,68,.25); }

/* ---- reduce movimiento: todo queda quieto y ya armado ---- */
@media (prefers-reduced-motion: reduce) {
  .js .w, .js .estilos figure, .js .evs .ev, .pk li, .pk li::before, .feat svg, .step::before { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cluster .phone { transform: rotate(var(--r)) !important; animation: none !important; }
  .cluster .env__flap { transform: perspective(700px) rotateX(180deg) !important; z-index: 1 !important; }
  .cluster .env__seal { opacity: 0 !important; }
  .rot { height: auto; overflow: visible; } .rot b:not(:first-child) { display: none; } .rot b:first-child { opacity: 1; transform: none; }
  .hero h1 em { background-size: 100% .1em; }
  .rail figure { transform: none; opacity: 1; }
  .steps::before { transform: scaleX(1); }
  .cinta { animation: none; }
}