/* Portada estilo página de producto: escenas a pantalla completa guiadas por el scroll */
body.portada {
  background:
    radial-gradient(80vw 60vh at 85% -10%, rgba(255, 90, 60, .10), transparent 60%),
    var(--negro2);
}
.progreso { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none; }
.progreso i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--coral), var(--neon)); box-shadow: 0 0 12px rgba(57, 255, 20, .6); }

.escenario { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.titulo-xl { font-weight: 900; font-size: clamp(44px, 8.4vw, 132px); line-height: .9; letter-spacing: -.055em; margin: 10px 0 0; }
.titulo-xl em, .hero-frase em, .unete-tit em { font-style: normal; color: var(--coral); text-shadow: 0 0 40px rgba(255, 90, 60, .45); }
.titulo-xl em.v, .hero-frase em.v { color: var(--neon); text-shadow: 0 0 40px rgba(57, 255, 20, .5); }
.grande { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; }

/* letras que entran una por una */
[data-letras] .l { display: inline-block; opacity: 0; transform: translate3d(0, .5em, 0) rotateX(-70deg) scale(.9); filter: blur(10px);
  transform-origin: 50% 100%; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms); }
[data-letras].visible .l { opacity: 1; transform: none; filter: none; }
[data-letras] .esp { display: inline-block; width: .26em; }
[data-letras] .pal { display: inline-block; white-space: nowrap; }

/* aparición genérica */
.revela { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.revela.visible { opacity: 1; transform: none; }

/* ============ 1 · HERO ============ */
.hero { position: relative; height: 420vh; }
.hero .escenario {
  background:
    radial-gradient(60vmax 50vmax at 50% 55%, rgba(255, 90, 60, .16), transparent 60%),
    radial-gradient(40vmax 30vmax at 50% 100%, rgba(57, 255, 20, .08), transparent 70%);
}
.hero .escenario::before { /* rejilla en perspectiva */
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%;
  background-image: linear-gradient(rgba(57, 255, 20, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 255, 20, .14) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  opacity: var(--rejilla, .7);
}
#cubo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-texto { position: absolute; inset: auto 0 0 0; padding: 0 var(--gutter) max(9vh, 70px); text-align: center; z-index: 2;
  transform: translate3d(0, var(--ty, 0), 0) scale(var(--sc, 1)); opacity: var(--op, 1); will-change: transform, opacity; }
.hero-kicker { margin: 0 0 10px; }
.hero-tit { margin: 0; font-weight: 900; font-size: min(14.6vw, 196px); line-height: .82; letter-spacing: -.06em; perspective: 600px;
  color: var(--blanco); text-shadow: 0 0 80px rgba(244, 239, 230, .18), 0 20px 60px rgba(0, 0, 0, .6); white-space: nowrap; }
.hero-tit em { font-style: normal; color: var(--coral); text-shadow: 0 0 60px rgba(255, 90, 60, .6), 0 0 18px rgba(255, 90, 60, .35); }
.hero-sub { margin: 18px 0 26px; font-size: clamp(18px, 2.3vw, 28px); font-weight: 700; letter-spacing: -.02em; }
.hero-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-frase { position: absolute; left: 0; right: 0; top: 50%; margin: 0; padding: 0 var(--gutter); text-align: center; z-index: 2; pointer-events: none;
  font-weight: 900; font-size: clamp(42px, 9vw, 150px); line-height: .9; letter-spacing: -.055em;
  opacity: 0; transform: translate3d(0, -50%, 0); will-change: transform, opacity, filter; text-shadow: 0 10px 60px rgba(0, 0, 0, .8); }
.desliza { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 700 10px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gris-2); z-index: 3; opacity: var(--op, 1); }
.desliza i { width: 1px; height: 34px; background: linear-gradient(var(--neon), transparent); animation: gota 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes gota { 0% { transform: scaleY(0); opacity: 1 } 60% { transform: scaleY(1); opacity: 1 } 100% { transform: scaleY(1); opacity: 0 } }
@media (max-width: 640px) {
  .muro-item { width: 56vw; max-height: 62svh; }
  .hero-texto { padding-bottom: max(12vh, 80px); }
  .hero-botones .btn-xl { min-height: 54px; padding: 0 22px; font-size: 16px; }
  .hero-sub { margin: 14px 0 20px; }
}

/* ============ 2 · MANIFIESTO ============ */
.manifiesto { height: 300vh; position: relative; }
.manifiesto .escenario { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto; }
.manif-texto { margin: 18px 0 0; font-weight: 900; font-size: clamp(36px, 6.4vw, 104px); line-height: .98; letter-spacing: -.05em; }
.manif-texto .w { color: rgba(244, 239, 230, .13); transition: color .25s linear, text-shadow .4s; }
.manif-texto .w.on { color: var(--blanco); }
.manif-texto b .w.on { color: var(--coral); text-shadow: 0 0 40px rgba(255, 90, 60, .4); }
.manif-texto b.v .w.on { color: var(--neon); text-shadow: 0 0 40px rgba(57, 255, 20, .45); }
.manif-texto b { font-weight: 900; }

/* ============ 3 · NÚMEROS ============ */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.num { background: var(--negro2); padding: clamp(36px, 7vw, 90px) var(--gutter); display: flex; flex-direction: column; gap: 10px; }
.num:nth-child(2) { --d: 100ms } .num:nth-child(3) { --d: 200ms } .num:nth-child(4) { --d: 300ms }
.num-n { font-weight: 900; font-size: clamp(64px, 10vw, 160px); line-height: .85; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--blanco), rgba(244, 239, 230, .35)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num:nth-child(odd) .num-n { background-image: linear-gradient(180deg, #ff8a6a, var(--coral)); filter: drop-shadow(0 0 24px rgba(255, 90, 60, .35)); }
.num:nth-child(even) .num-n { background-image: linear-gradient(180deg, #b6ff9c, var(--neon)); filter: drop-shadow(0 0 24px rgba(57, 255, 20, .3)); }
.num-t { font: 700 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 760px) { .numeros { grid-template-columns: 1fr 1fr; } }

/* ============ 4 · SEGMENTOS ============ */
.segmentos { height: 260vh; position: relative; }
.segmentos .escenario { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 4vh, 44px); padding: 76px var(--gutter) 24px; max-width: 1400px; margin: 0 auto; perspective: 1200px; }
.seg-cab .titulo-xl { font-size: clamp(40px, 7vw, 110px); }
.seg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.seg { --c: var(--coral); position: relative; border-radius: var(--radio); padding: clamp(14px, 1.8vw, 26px); min-height: clamp(120px, 22vh, 230px);
  display: flex; flex-direction: column; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(244, 239, 230, .02) 60%), #0b0a08;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent) inset, 0 30px 60px -30px color-mix(in srgb, var(--c) 60%, transparent);
  opacity: var(--q, 0); transform: translate3d(0, calc((1 - var(--q, 0)) * 140px), calc((1 - var(--q, 0)) * -300px)) rotateX(calc((1 - var(--q, 0)) * 40deg));
  will-change: transform, opacity; overflow: hidden; }
.seg::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -20%; top: -30%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); opacity: .55; pointer-events: none; }
.seg-n { font: 700 12px var(--mono); color: var(--c); letter-spacing: .18em; }
.seg h3 { margin: auto 0 6px; font-weight: 900; font-size: clamp(19px, 2.1vw, 32px); line-height: .95; letter-spacing: -.04em; }
.seg p { margin: 0 0 10px; color: var(--gris); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.35; }
.seg-dia { font: 700 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.s1 { --c: #ff5a3c } .s2 { --c: #2ec5ff } .s3 { --c: #ff3d9a } .s4 { --c: #b26bff }
.s5 { --c: #5b6cff } .s6 { --c: #ffb020 } .s7 { --c: #00f5b4 } .s8 { --c: #d4ff3a }
.s1 { background: linear-gradient(160deg, rgba(255, 90, 60, .22), rgba(57, 255, 20, .06) 70%), #0b0a08; }
@media (max-width: 900px) {
  .seg-grid { grid-template-columns: 1fr 1fr; }
  .seg p { display: none; }
  .seg { min-height: 0; padding: 14px 14px 12px; aspect-ratio: auto; }
  .seg h3 { margin-top: 18px; font-size: clamp(18px, 5vw, 26px); }
  .segmentos .escenario { padding-top: 70px; gap: 16px; }
}

/* ============ 5 · MURO ============ */
.muro { position: relative; /* alto lo pone el JS según el largo de la pista */ height: 400vh; }
.muro .escenario { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 34px); padding-top: 64px; perspective: 1400px; }
.muro-cab { padding: 0 var(--gutter); max-width: 1400px; width: 100%; margin: 0 auto; }
.muro-cab .titulo-xl { font-size: clamp(38px, 6.4vw, 100px); }
.muro-cab p { margin: 12px 0 0; }
.muro-pista { display: flex; gap: clamp(12px, 1.6vw, 22px); padding: 0 var(--gutter); width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; transform-style: preserve-3d; }
.muro-item { --c: var(--coral); position: relative; flex: none; width: clamp(200px, 19vw, 270px); aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; text-decoration: none;
  background: #111; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 30px 80px -30px rgba(0, 0, 0, .9);
  transform: rotateY(var(--ry, 0deg)) scale(var(--s, 1)); transition: box-shadow .4s; max-height: 58vh; max-height: 58svh; }
.muro-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.muro-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 9, 6, .92)); }
.muro-item:hover { box-shadow: 0 0 0 2px var(--c) inset, 0 30px 80px -20px color-mix(in srgb, var(--c) 70%, transparent); }
.muro-item:hover img { transform: scale(1.05); }
.muro-seg { position: absolute; z-index: 2; left: 12px; top: 12px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 9px; border-radius: 999px; font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #0b0a08; background: var(--c); }
.muro-tit { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; font-weight: 800; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.15; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.muro-fin { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: 24px;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255, 90, 60, .35), transparent 60%), radial-gradient(100% 70% at 100% 100%, rgba(57, 255, 20, .25), transparent 60%), #0e0c09; }
.muro-fin::after { display: none; }
.muro-fin-t { font-weight: 900; font-size: clamp(26px, 2.8vw, 40px); line-height: .92; letter-spacing: -.05em; }
.muro-fin-t em { font-style: normal; color: var(--neon); }
.muro-fin .btn { min-height: 44px; font-size: 14px; }

/* ============ 6 · REGALOS ============ */
.regalos { padding: clamp(80px, 14vh, 160px) var(--gutter); max-width: 1400px; margin: 0 auto; }
.regalos-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.regalos-txt .titulo-xl { font-size: clamp(42px, 7vw, 112px); }
.regalos-txt p.gris { max-width: 560px; margin: 22px 0 0; }
.chat { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 28px; background: #0b0a08; box-shadow: 0 0 0 1px var(--linea) inset, 0 40px 80px -40px rgba(255, 90, 60, .5); }
.burbuja { max-width: 86%; padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: rgba(244, 239, 230, .08); font-size: 16px; line-height: 1.35;
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.burbuja.yo { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--coral); color: #120805; font: 800 18px var(--mono); letter-spacing: .08em; }
.burbuja b { color: var(--neon); }
.burbuja.yo b { color: inherit; }
.chat.visible .burbuja { opacity: 1; transform: none; }
.chat.visible .b2 { transition-delay: .7s; } .chat.visible .b3 { transition-delay: 1.4s; }
.regalos-grid { margin-top: clamp(40px, 7vh, 80px); display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.regalo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 300px; padding: 18px; border-radius: var(--radio); overflow: hidden; text-decoration: none;
  background: #0b0a08; box-shadow: 0 0 0 1px var(--linea) inset; transition: transform .5s var(--ease), box-shadow .4s;
  opacity: 0; transform: translateY(50px); }
.regalo.visible { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease), box-shadow .4s; transition-delay: var(--d, 0ms); }
.regalo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(1.1) blur(1px); transition: opacity .4s, transform .8s var(--ease), filter .4s; }
.regalo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 9, 6, .1), rgba(7, 9, 6, .95) 75%); }
.regalo > span { position: relative; z-index: 2; }
.regalo:hover { box-shadow: 0 0 0 2px var(--neon) inset, 0 30px 60px -30px rgba(57, 255, 20, .6); }
.regalo:hover img { opacity: .8; transform: scale(1.06); filter: none; }
.regalo-pal { align-self: flex-start; font: 700 11px var(--mono); letter-spacing: .16em; padding: 5px 9px; border-radius: 999px; background: var(--neon); color: #061200; }
.regalo-tit { font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.035em; }
.regalo-lock { font: 600 11px var(--mono); color: var(--gris); letter-spacing: .06em; }
.regalo-lock::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 2px; background: var(--coral); box-shadow: 0 0 10px var(--coral); }
@media (max-width: 1000px) { .regalos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .regalos-in { grid-template-columns: 1fr; }
  .chat { order: 2; }
  .regalos-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 10px; scrollbar-width: none; }
  .regalos-grid::-webkit-scrollbar { display: none; }
  .regalo { scroll-snap-align: start; min-height: 340px; }
}

/* ============ 7 · CTA ============ */
.unete { position: relative; overflow: hidden; text-align: center; padding: clamp(110px, 20vh, 220px) var(--gutter) clamp(90px, 16vh, 180px); }
.unete-luz { position: absolute; left: 50%; top: 55%; width: min(1100px, 160vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 90, 60, .32), rgba(255, 90, 60, .08) 45%, transparent 70%); animation: latido 5s ease-in-out infinite; }
.unete-luz::after { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: radial-gradient(closest-side, rgba(57, 255, 20, .14), transparent); }
@keyframes latido { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .8; } }
.unete > *:not(.unete-luz) { position: relative; }
.unete-tit { margin: 16px auto 0; max-width: 14ch; font-weight: 900; font-size: clamp(52px, 10.5vw, 176px); line-height: .86; letter-spacing: -.06em; }
.unete-sub { margin: 26px auto 34px; max-width: 560px; color: var(--gris); font-size: clamp(17px, 1.7vw, 21px); }
.unete-botones { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.unete-botones .btn:first-child { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 0 60px rgba(255, 90, 60, .55), 0 20px 70px -10px rgba(255, 90, 60, .9); }
.unete-redes { justify-content: center; margin-top: 46px; }

/* ============ sin movimiento ============ */
.sin-mov .hero, .sin-mov .manifiesto, .sin-mov .segmentos, .sin-mov .muro { height: auto; }
.sin-mov .escenario { position: relative; height: auto; min-height: 100svh; }
.sin-mov .hero-frase, .sin-mov .desliza { display: none; }
.sin-mov .seg { --q: 1; }
.sin-mov .muro-pista { width: auto; overflow-x: auto; padding-bottom: 20px; }
.sin-mov .muro .escenario { min-height: 0; padding: 90px 0 60px; }
.sin-mov .manif-texto .w { color: var(--blanco); }
.sin-mov [data-letras] .l, .sin-mov .revela, .sin-mov .regalo, .sin-mov .burbuja { opacity: 1; transform: none; filter: none; }