/* Animaciones y detalles visuales de la landing.
   Se carga después de styles.css. Todo está pensado como mejora progresiva:
   sin JS o con "reducir movimiento" la página se ve completa y quieta. */

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6) translateX(-12px); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sweep { from { background-size: 0 100%; } }
@keyframes draw { from { stroke-dasharray: 120; stroke-dashoffset: 120; } to { stroke-dasharray: 120; stroke-dashoffset: 0; } }
@keyframes dotpop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(1.5deg) translateY(-14px); } }
@keyframes phoneIn { from { opacity: 0; transform: rotate(8deg) translateY(60px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18px, -22px) scale(1.08); } }
@keyframes beat { 0%, 55%, 100% { transform: scale(1); color: var(--negro); } 65% { transform: scale(1.35); color: var(--rosa); } 78% { transform: scale(1); color: var(--rosa); } 92% { color: var(--rosa); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(235, 0, 107, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(235, 0, 107, 0); } }
@keyframes ringWhite { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }
@keyframes shine { from { left: -60%; } to { left: 130%; } }
@keyframes sheen { 0% { left: -40%; } 35%, 100% { left: 130%; } }
@keyframes badgePop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ---------- Barra de progreso y nav ---------- */
.progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--rosa); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.nav { transition: box-shadow .25s ease; }
.nav.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.nav-links a { position: relative; transition: color .2s ease; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--rosa); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--rosa); }
.brand img { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); pointer-events: none; }
.btn:hover::after { animation: shine .8s ease; }
.btn:active { transform: scale(.97); }
.hero .btn:not(.btn-ghost):not(.btn-small) { animation: ring 2.6s 2.4s infinite; }
.final .btn-white { animation: ringWhite 2.6s 1s infinite; }
.hero .btn:hover, .final .btn:hover { animation: none; }

/* ---------- Hero ---------- */
.hero-copy > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .15s; }
.hero-copy > :nth-child(3) { animation-delay: .28s; }
.hero-copy > :nth-child(4) { animation-delay: .4s; }
.hero-copy > :nth-child(5) { animation-delay: .55s; }

.hl { background: linear-gradient(transparent 64%, rgba(235, 0, 107, .16) 64%) no-repeat left / 100% 100%; }
h1 .hl { animation: sweep 1s .7s cubic-bezier(.2, .7, .2, 1) backwards; }
html.js h2 .hl { background-size: 0 100%; transition: background-size .9s .35s cubic-bezier(.2, .7, .2, 1); }
html.js h2.in .hl { background-size: 100% 100%; }

.hero-visual { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; }
.hero-visual .phone { animation: phoneIn 1s .2s cubic-bezier(.2, .8, .2, 1) backwards, float 7s 1.2s ease-in-out infinite; }
.blob-a { animation: drift 11s ease-in-out infinite; }
.blob-b { animation: drift 9s -3s ease-in-out infinite reverse; }

/* Maqueta del feed: aparece en orden (chips, líneas, puntos, botones, precio) */
.screen-feed .chip { transform-origin: left center; animation: pop .6s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.screen-feed .chip:nth-of-type(2) { animation-delay: 1s; }
.screen-feed .chip:nth-of-type(3) { animation-delay: 1.35s; }
.screen-feed .chip:nth-of-type(4) { animation-delay: 1.7s; }
.feed-art g[stroke] path { animation: draw .6s ease-out backwards; }
.feed-art g[stroke] path:nth-child(1) { animation-delay: .9s; }
.feed-art g[stroke] path:nth-child(2) { animation-delay: 1.25s; }
.feed-art g[stroke] path:nth-child(3) { animation-delay: 1.6s; }
.feed-art g[fill="#fff"] circle { transform-box: fill-box; transform-origin: center; animation: dotpop .35s backwards; }
.feed-art g[fill="#fff"] circle:nth-child(1) { animation-delay: 1.4s; }
.feed-art g[fill="#fff"] circle:nth-child(2) { animation-delay: 1.75s; }
.feed-art g[fill="#fff"] circle:nth-child(3) { animation-delay: 2.1s; }
.feed-actions .act { animation: slideIn .5s backwards; }
.feed-actions .act:nth-child(1) { animation-delay: 1.9s; }
.feed-actions .act:nth-child(2) { animation-delay: 2s; }
.feed-actions .act:nth-child(3) { animation-delay: 2.1s; }
.feed-actions .act:nth-child(1) { animation: slideIn .5s 1.9s backwards, beat 4s 3s infinite; }
.feed-creator { animation: fadeIn .6s 1.8s backwards; }
.feed-price { animation: rise .7s 1.2s cubic-bezier(.2, .7, .2, 1) backwards; }

/* ---------- Cinta de palabras ---------- */
.marquee { background: var(--rosa); color: #fff; overflow: hidden; padding: 14px 0; white-space: nowrap; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; font-family: var(--font-title); font-size: 20px; padding-left: 44px; }
.marquee-track span::after { content: ''; width: 8px; height: 8px; margin-left: 44px; border-radius: 50%; background: rgba(255, 255, 255, .65); }

/* ---------- Aparición al scrollear ---------- */
html.js .reveal { opacity: 0; }
html.js .reveal.in { opacity: 1; animation: rise .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards; }

/* ---------- Tarjetas, pasos y maquetas ---------- */
.ico { display: inline-block; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.card:hover .ico { transform: scale(1.18) rotate(-6deg); }
.card-b { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-b:hover { border-top-color: var(--rosa-oscuro); }

.steps li { transition: transform .2s ease, box-shadow .2s ease; }
.steps li:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(235, 0, 107, .1); }
.steps li.in .n { animation: badgePop .55s .25s cubic-bezier(.3, 1.6, .5, 1) backwards; }

.show .phone { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.show:hover .phone { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 42px 70px rgba(60, 0, 30, .28), 0 8px 16px rgba(0, 0, 0, .12); }
.show.in .tile { animation: rise .5s .3s backwards; }
.show.in .tile:nth-child(2) { animation-delay: .4s; }
.show.in .tile:nth-child(3) { animation-delay: .5s; }
.show.in .q { animation: slideIn .5s .6s backwards; }
.show.in .q + .q { animation-delay: .75s; }
.show.in .th { animation: grow .5s .6s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.show.in .th2 { animation-delay: .72s; }
.show.in .th3 { animation-delay: .84s; }
.show.in .cc { animation: rise .45s .3s backwards; }
.show.in .cc:nth-child(2) { animation-delay: .38s; }
.show.in .cc:nth-child(3) { animation-delay: .46s; }
.show.in .cc:nth-child(4) { animation-delay: .54s; }
.show.in .cc:nth-child(5) { animation-delay: .62s; }
.show.in .cc:nth-child(6) { animation-delay: .7s; }
.show.in .sizes .on, .show.in .cdots .on { animation: badgePop .5s .6s backwards; }

.free { position: relative; overflow: hidden; }
.free::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); transform: skewX(-20deg); pointer-events: none; animation: sheen 5s 1s infinite; }

/* ---------- Preguntas ---------- */
summary { transition: color .2s ease; }
summary:hover { color: var(--rosa); }
details[open] p { animation: fadeIn .35s ease; }

/* ---------- Cierre ---------- */
.final { position: relative; overflow: hidden; }
.final::before, .final::after { content: ''; position: absolute; border-radius: 50%; background: #fff; opacity: .08; pointer-events: none; animation: drift 12s ease-in-out infinite; }
.final::before { width: 360px; height: 360px; left: -120px; top: -140px; }
.final::after { width: 280px; height: 280px; right: -80px; bottom: -120px; animation-delay: -5s; }
.final-in { position: relative; z-index: 1; }

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; }
  html.js h2 .hl { background-size: 100% 100%; }
}