/* =========================================================
FoodBot — Mobile-first (rebuild v2)
========================================================= */
/* =========================================================
PP Model Mono — tipografía real del diseño (Figma)
Light (100-400), Medium (500-600), Super (700-900).
El diseñador confirmó (jun-10) que estas son TODAS las
fuentes del Figma — "PP Model Plastic" no existe (era Mono)
y Gotham no vino (STARKI usa Montserrat como sustituto).
========================================================= */
@font-face{
font-family:'PP Model Mono';
src:url('../assets/fonts/PPModelMono-Light.woff2') format('woff2');
font-weight:100 400;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:'PP Model Mono';
src:url('../assets/fonts/PPModelMono-Medium.woff2') format('woff2');
font-weight:500 600;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:'PP Model Mono';
src:url('../assets/fonts/PPModelMono-Super.woff2') format('woff2');
font-weight:700 900;
font-style:normal;
font-display:swap;
}
:root{
--bg:#000;
--bg-card:#0a0a0a;
--bg-elevated:#141414;
/* Figma usa #55CA00 como verde único (títulos, barras, pills, glows) */
--green:#55ca00;
--green-soft:#55ca00;
--green-dark:#3d9600;
--green-glow:rgba(85,202,0,.55);
--red:#ff3030;
--white:#fff;
--text-dim:#9a9a9a;
--text-mid:#cfcfcf;
--border-dim:rgba(255,255,255,.08);
--border-mid:rgba(255,255,255,.16);
/* Figma usa "PP Model Mono" en TODO el diseño. Ya tenemos la fuente real
(assets/fonts/, Light + Medium). Spline Sans Mono / Space Mono / Montserrat
quedan solo como fallback mientras carga el woff2. */
--font-display:'PP Model Mono','Spline Sans Mono','Montserrat',system-ui,-apple-system,sans-serif;
--font-mono:'PP Model Mono','Spline Sans Mono','Space Mono',ui-monospace,Menlo,monospace;
--header-h:64px;
--max-w:1280px;
--pad-x:20px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{position:relative}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--white);
font-family:var(--font-mono);
font-size:13px;
line-height:1.5;
letter-spacing:.02em;
/* clip (no hidden): hidden fuerza overflow-y:auto y vuelve al body un
scroller anidado que recortaba el scroll → el footer quedaba inalcanzable.
clip recorta horizontal SIN crear contenedor de scroll. */
overflow-x:clip;
min-height:100vh;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
/* ===== Continuous loop animations ===== */
/* Green glow pulse for highlighted text */
.ht-glow{animation:glow-pulse 2.4s ease-in-out infinite}
/* Figma: glow = copia blureada 4.75px @.85 — apretado e intenso, no halo ancho */
@keyframes glow-pulse{
0%,100%{text-shadow:0 0 5px rgba(85,202,0,.85),0 0 14px rgba(85,202,0,.3)}
50%{text-shadow:0 0 7px rgba(85,202,0,.95),0 0 18px rgba(85,202,0,.4)}
}
/* Starki figure pulses outer aura */
.starki-figure{animation:starki-aura 3s ease-in-out infinite}
@keyframes starki-aura{
0%,100%{filter:drop-shadow(0 0 40px rgba(85,202,0,.18))}
50%{filter:drop-shadow(0 0 60px rgba(85,202,0,.35))}
}
/* Product green dot pulse */
.p-dot{animation:dot-pulse 1.6s ease-in-out infinite}
@keyframes dot-pulse{
0%,100%{box-shadow:0 0 8px rgba(85,202,0,.7);transform:translate(-50%,-50%) scale(1)}
50%{box-shadow:0 0 16px rgba(85,202,0,.95),0 0 28px rgba(85,202,0,.4);transform:translate(-50%,-50%) scale(1.1)}
}
.p-card:nth-of-type(1) .p-dot{animation-delay:0s}
.p-card:nth-of-type(2) .p-dot{animation-delay:.15s}
.p-card:nth-of-type(3) .p-dot{animation-delay:.3s}
.p-card:nth-of-type(4) .p-dot{animation-delay:.45s}
.p-card:nth-of-type(5) .p-dot{animation-delay:.6s}
/* Barrido sutil que gira sobre el radar (los gráficos ya son imágenes de Figma) */
.dash-radar{position:relative;overflow:hidden;border-radius:50%}
.dash-radar::after{
content:"";position:absolute;inset:8%;border-radius:50%;
background:conic-gradient(from 0deg, rgba(85,202,0,.30) 0deg, transparent 55deg);
animation:radar-sweep 3.4s linear infinite;
pointer-events:none;
mix-blend-mode:screen;
}
@keyframes radar-sweep{
to{transform:rotate(360deg)}
}
/* CRT flicker on eyebrows */
.eyebrow{animation:flicker 5s steps(20) infinite}
@keyframes flicker{
0%,42%,46%,68%,72%,100%{opacity:1}
43%,45%{opacity:.6}
69%,71%{opacity:.75}
}
/* Cursor blink for AGENTE MKT */
.dt-sub::after{
content:"_";
margin-left:2px;
animation:cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink{
0%,50%{opacity:1}
50.01%,100%{opacity:0}
}
/* Figma "Cliente Quote" activa: verde + overlay negro .3, TEXTO BLANCO,
sombra 0 0 46px #55ca00, radius 41.5 */
.client-card.active,
.client-card:hover{
background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),#55ca00 !important;
border-color:rgba(255,255,255,.08) !important;
box-shadow:0 0 46px rgba(85,202,0,.65);
}
.client-card.active .c-quote, .client-card:hover .c-quote,
.client-card.active .c-author, .client-card:hover .c-author{color:#fff !important}
.client-card.active .c-logo, .client-card:hover .c-logo{filter:brightness(0) invert(1)}
.client-card{transition:background .5s ease, border-color .5s ease, box-shadow .5s ease}
/* Starki pill smooth transitions for cycling */
.sk-pill{transition:opacity .8s ease}
/* Reduced motion override */
@media (prefers-reduced-motion: reduce){
.ht-glow,.hero-planet,.starki-figure,.p-dot,.dash-pie::after,.eyebrow,
.dt-sub::after,.client-card,.sk-pill{animation:none !important;transition:none !important}
}
/* Loader — fades from white to black with % count */
.loader{
position:fixed;inset:0;z-index:300;
background:radial-gradient(circle at 50% 50%, #ccc 0%, #888 30%, #222 70%, #000 100%);
display:flex;align-items:center;justify-content:center;
transition:opacity .8s ease;
}
.loader.done{opacity:0;pointer-events:none}
.loader-pct{
font-family:var(--font-mono);font-weight:700;
font-size:64px;color:#fff;letter-spacing:.02em;
text-shadow:0 0 30px rgba(255,255,255,.5);
}
/* Planet drop animation */
.hero-planet{
animation:planet-drop 2.2s cubic-bezier(.22,.7,.2,1) .3s both;
}
@keyframes planet-drop{
0%{transform:translate(-50%, -100%) scale(1.5); opacity:0}
60%{opacity:.85}
100%{transform:translate(-50%, 0) scale(1); opacity:.9}
}
/* Flow glow moves between active steps */
.fs-glow{
transition:opacity .5s ease;
}
/* Arcos orbitales "Dashboard Circle Lines" (node Figma 1655:5446) — FIXED:
se quedan fijos al viewport mientras el contenido scrollea (como el diseño
original que aprobó Edmond). UN solo círculo, NO se repite. El `overflow:hidden`
del contenedor (=viewport) recorta los costados del círculo a los bordes ⇒
sin scroll horizontal. IMPRESCINDIBLE: el grid-bg también es `position:fixed`
(abajo), así arcos y grid NO se deslizan uno sobre otro = nada de "dos mallas".
El error de jun-11 fue pasarlos a absolute+repeat-y → repetición. NO usar repeat. */
.page-arcs{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.page-arc-img{
display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(98vw,1280px);height:auto;max-width:none; /* anular reset img{max-width:100%} */
filter:brightness(1.6);
}
@media (min-width:1024px){
.page-arcs{display:block}
}
/* Grid background — FIXED (como el diseño original), igual que los arcos:
así grid y arcos quedan ambos fijos al viewport y NO se deslizan uno sobre
otro al scrollear (evita el efecto "dos mallas superpuestas"). */
.grid-bg{
position:fixed;inset:0;z-index:-1;pointer-events:none;
/* Figma: líneas de malla con amplitud ~15-22 sobre negro (medido sobre el
frame). Antes .025 (=6.4) → casi imperceptible. .065 ≈ 16.6 = como Figma. */
background:
linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px) 0 0/30px 30px,
linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px) 0 0/30px 30px,
radial-gradient(circle at 50% 0,rgba(85,202,0,.05),transparent 60%),
#000;
}
/* Shared utilities */
.green{color:var(--green)}
.eyebrow{
font-family:var(--font-display);font-weight:300;
font-size:12.98px;letter-spacing:.194em;
color:var(--green-soft);text-transform:uppercase;
text-align:center;margin:0 0 18px;
white-space:nowrap;
}
/* Figma: eyebrow font-size exacto por sección (tracking ≈.194em en todas) */
.metric .eyebrow{font-size:9.75px}
.starki .eyebrow{font-size:10.08px}
.products .eyebrow{font-size:12.98px}
.section-title{
font-family:var(--font-display);font-weight:300;
/* Figma: PP Model Plastic 46.87px (sin tracking). Usamos Mono como fallback. */
font-size:46.87px;letter-spacing:.04em;
text-align:center;margin:0 0 14px;text-transform:uppercase;color:#fff;
text-shadow:0 0 12px rgba(255,255,255,.28),0 0 30px rgba(255,255,255,.1);
}
.lbl{
font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
color:var(--text-dim);margin:0;text-transform:uppercase;
}
.lbl-mt{margin-top:24px}
.lbl.center{text-align:center}
.lbl-sep{font-family:var(--font-mono);color:var(--text-dim);text-align:left;margin:8px 0}
.mt30{margin-top:30px}
.mb16{margin-bottom:18px}
.nowrap{white-space:nowrap}
/* =========================================================
HEADER (desktop sticky; hidden on mobile)
========================================================= */
.header{
display:none; /* hidden on mobile */
}
/* =========================================================
HERO
========================================================= */
.hero{
position:relative;
padding:32px var(--pad-x) 36px;
text-align:center;
overflow:hidden;
}
/* Mobile-only centered logo at top of hero */
.hero-logo-mobile{
display:flex;align-items:center;justify-content:center;
margin-bottom:48px;
}
.hero-logo-mobile .logo-full{width:200px;height:auto;display:block}
/* Hero orbital arcs — SVG, desktop only */
.hero-arcs{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.arc-svg{
position:absolute;top:50%;
width:1600px;height:1600px;
transform:translateY(-50%);
}
.arc-svg.arc-l{left:0;right:auto}
.arc-svg.arc-r{right:0;left:auto}
/* Hero planet — desktop only */
.hero-planet{display:none;position:absolute;left:50%;top:-180px;
width:300px;transform:translateX(-50%);opacity:.5;pointer-events:none}
/* Floating notification cards — desktop only */
/* Figma "Msj": glass — blur 11, gradiente translúcido, borde blanco .08, sombra 0 0 15 #212121 */
.notif{
display:none;position:absolute;z-index:2;
/* GLASS: fill oscuro semi-opaco + backdrop-blur (distorsiona/difumina lo de
atrás → profundidad que pide Carlos). No es transparente (no se lee el
fondo) pero tampoco plano. */
background:rgba(10,10,13,.8); /* un poco menos transparente (Edmond) */
-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
border:1px solid rgba(255,255,255,.12);border-radius:20px;
padding:17px 21px;text-align:center;
font-family:var(--font-display);
box-shadow:0 0 15px 0 #212121;
}
/* Figma: 10px PP Model Mono Medium, tracking 2px (.2em); eyebrow #55ca00, body blanco */
.notif-eye{
font-size:10px;letter-spacing:.2em;color:var(--green-soft);
margin:0 0 3px;text-transform:uppercase;font-weight:500;line-height:1.3;
}
.notif-body{
font-size:10px;letter-spacing:.2em;color:#fff;
margin:0;text-transform:uppercase;font-weight:500;line-height:1.3;
}
/* Posiciones ANCLADAS AL CENTRO (px), no % de viewport → estables a cualquier
ancho de ventana y en el mismo sitio que Figma (antes left:18%/right:14% las
movía al redimensionar). Offsets medidos sobre el frame 1280. */
.notif-tl{top:112px;left:calc(50% - 350px)}
.notif-tr{top:150px;left:calc(50% + 200px)}
.notif-bl{top:330px;left:calc(50% - 372px)}
.notif-br{top:300px;left:calc(50% + 232px)}
/* Notification fade-in animations */
.notif-init{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.notif-in{opacity:1;transform:translateY(0)}
/* ====== Secuencia de "encendido" del hero tras el loader (Carlos) ======
Mientras body.booting, los elementos del hero arrancan APAGADOS (el loader
los tapa). El JS añade .boot-on/.boot-pop en secuencia (stagger por
setTimeout). El !important hace que el encendido GANE a la animación propia
(glow del botón, pulse del anillo 26); al final el JS quita .booting y las
clases → se restaura su animación. */
body.booting .hero-title .ht-line,
body.booting .hero-dashboards .dash,
body.booting .hero-dashboards .dash-text,
body.booting .hero-dashboards .dash-ticks,
body.booting .deco-dots,
body.booting .header .logo-link,
body.booting .header .btn-demo,
body.booting .notif{ opacity:0; }
@keyframes power-on{
0%{opacity:0} 8%{opacity:.55} 13%{opacity:.04} 24%{opacity:.9}
30%{opacity:.18} 42%{opacity:1} 50%{opacity:.55} 64%{opacity:1} 100%{opacity:1}
}
@keyframes notif-pop{
0%{opacity:0;transform:scale(.55)} 60%{opacity:1;transform:scale(1.07)} 100%{opacity:1;transform:scale(1)}
}
.boot-on{animation:power-on .8s ease both !important}
.notif.boot-pop{animation:notif-pop .6s cubic-bezier(.2,.7,.3,1.25) both !important}
@media (prefers-reduced-motion:reduce){ .boot-on,.notif.boot-pop{animation:none !important} }
/* Hero deco lines — vertical ticks like a ruler */
.deco-dots{
height:14px;margin:0 auto;max-width:280px;
background-image:linear-gradient(90deg, #fff 2px, transparent 2px);
background-size:18px 14px;background-repeat:repeat-x;
background-position:center top;
/* clip to top half so ticks look short */
-webkit-mask-image:linear-gradient(180deg,#000 60%, transparent 60%);
mask-image:linear-gradient(180deg,#000 60%, transparent 60%);
opacity:.7;
}
.deco-top{margin-bottom:24px}
.deco-bottom{margin-top:24px}
/* Hero title — wrap container has fixed min-height so rotation doesn't shift layout */
.hero-title{
font-family:var(--font-display);font-weight:300;
/* clamp: escala con el ancho para que la frase rotada más larga
("TRABAJEN PARA TI", "TU RESTAURANTE") no se salga en pantallas chicas */
/* Figma móvil: 41.82px @414 → 10.1vw; lh .95 */
font-size:clamp(34px, 10.1vw, 46px);line-height:.95;
letter-spacing:.02em;text-align:center;
margin:0 auto;text-transform:uppercase;
opacity:1;transition:opacity .6s ease, transform .6s ease;
min-height:240px;
max-width:96vw;
display:flex;flex-direction:column;justify-content:center;align-items:center;
}
.hero-title.ht-fade{opacity:0;transform:translateY(-12px)}
.hero-title.ht-fade-in{opacity:1;transform:translateY(0)}
/* Figma: líneas blancas del hero SIN glow, solo opacity .85 (el glow es de la verde) */
.ht-line{display:block;color:#fff;white-space:nowrap;opacity:.85}
.ht-line.ht-glow,.ht-line.ht-mobile-soft{opacity:1}
.ht-line:first-child .nowrap{white-space:normal}
/* Mobile-only second SOFTWARE line in green */
/* Figma: glow verde = copia blureada 4.75px @.85 → tight, no halo ancho */
.ht-mobile-soft{
color:var(--green);
text-shadow:0 0 5px rgba(85,202,0,.8),0 0 12px rgba(85,202,0,.3);
}
.ht-glow{
color:var(--green);
text-shadow:0 0 5px rgba(85,202,0,.85),0 0 14px rgba(85,202,0,.3);
}
/* =========================================================
PROFUNDIDAD (Figma) — glows EXACTOS leídos de los nodos "Glow":
- metric-title: copia blureada 6.5px @.85
- cta-title: blur 9 @.4 + 1.8/3.6 @.25 ×2
- eyebrows verdes: 2 copias blur 2px
========================================================= */
.metric-title{
text-shadow:0 0 7px rgba(255,255,255,.5),0 0 14px rgba(255,255,255,.12);
}
.cta-title{
text-shadow:
0 0 2px rgba(255,255,255,.5),
0 0 4px rgba(255,255,255,.5),
0 0 9px rgba(255,255,255,.4);
}
.eyebrow{
text-shadow:0 0 2px rgba(85,202,0,.9),0 0 2px rgba(85,202,0,.9);
}
/* Hero dashboards row */
.hero-dashboards{
display:flex;justify-content:center;align-items:center;gap:20px;
margin:40px auto 0;max-width:300px;
flex-wrap:nowrap;
}
.dash{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dash-img{width:100%;height:auto;display:block}
/* Vida en los círculos del hero (móvil + desktop): el orbital gira y el anillo pulsa */
.dash-orbital .dash-img{animation:orbit-spin 26s linear infinite}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.dash-ring{animation:ring-pulse 2.8s ease-in-out infinite}
@keyframes ring-pulse{
0%,100%{filter:drop-shadow(0 0 3px rgba(85,202,0,.25))}
50%{filter:drop-shadow(0 0 12px rgba(85,202,0,.6))}
}
/* Tamaños por widget (mobile) — proporciones de Figma */
.dash-orbital{width:62px}
.dash-ring{width:70px}
.dash-bars{width:80px;display:flex;align-items:center}
.dash-text,.dash-radar,.dash-ticks{display:none}
/* Gráfica de barras del dashboard (reemplaza el radar entre 26% y Estado Actual):
barras "en vivo" que oscilan; última verde; capa difusa detrás = glow (Carlos). */
.dash-bars .bars-svg{width:100%;height:auto;display:block;overflow:visible}
.dash-bars .bars-glow{filter:blur(3px);opacity:.55}
.dash-bars .bar{transform-box:fill-box;transform-origin:50% 100%;animation:bar-live 1.5s ease-in-out infinite}
.dash-bars .bar.b12{filter:drop-shadow(0 0 4px rgba(85,202,0,.7))}
@keyframes bar-live{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1.08)}}
.dash-bars .b1 {animation-duration:1.6s;animation-delay:-.2s}
.dash-bars .b2 {animation-duration:1.2s;animation-delay:-.7s}
.dash-bars .b3 {animation-duration:1.8s;animation-delay:-.4s}
.dash-bars .b4 {animation-duration:1.3s;animation-delay:-.9s}
.dash-bars .b5 {animation-duration:1.5s;animation-delay:-.1s}
.dash-bars .b6 {animation-duration:1.1s;animation-delay:-.5s}
.dash-bars .b7 {animation-duration:1.7s;animation-delay:-.3s}
.dash-bars .b8 {animation-duration:1.25s;animation-delay:-.8s}
.dash-bars .b9 {animation-duration:1.55s;animation-delay:-.6s}
.dash-bars .b10{animation-duration:1.35s;animation-delay:-.15s}
.dash-bars .b11{animation-duration:1.65s;animation-delay:-.45s}
.dash-bars .b12{animation-duration:1.4s;animation-delay:-.7s}
@media (prefers-reduced-motion:reduce){.dash-bars .bar{animation:none}}
/* Hero mobile-only Agendar Demo button — Figma style: green fill, WHITE text, subtle glow */
.hero-btn-mobile{
display:inline-flex;align-items:center;gap:9px;
background:var(--green-soft);color:#fff;
border:0;border-radius:999px;
padding:7px 26px 7px 7px;
font-family:var(--font-mono);font-weight:500;
font-size:15px;letter-spacing:.02em;text-transform:none;
margin:36px auto 0;
transition:box-shadow .2s,transform .15s;
box-shadow:0 0 28px rgba(85,202,0,.35);
}
.hero-btn-mobile:hover{box-shadow:0 0 36px rgba(85,202,0,.45)}
.hero-btn-mobile:active{transform:scale(.97)}
.hero-btn-mobile .btn-ico{width:30px;height:30px}
/* icono = forma blanca exportada de Figma (círculo + hoja recortada) */
.btn-ico{width:28px;height:28px;display:block}
/* =========================================================
HERO DESCRIPTION
========================================================= */
.hero-desc{
padding:50px var(--pad-x) 30px;
max-width:540px;margin:0 auto;
text-align:center;
font-family:var(--font-mono);font-weight:300; /* Figma: PP Model Mono LIGHT */
/* Figma móvil: 17.06px / lh 1.5 / tracking .175em */
font-size:17px;line-height:1.5;letter-spacing:.175em;
color:#fff;
text-transform:uppercase;
}
.hero-desc p{margin:0 0 22px}
.hero-desc p:last-child{margin:0}
/* =========================================================
FLOW (4 steps with arrows)
========================================================= */
.flow{
padding:30px var(--pad-x);
border-top:1px solid var(--border-dim);
border-bottom:1px solid var(--border-dim);
position:relative;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:40px 40px,40px 40px;
background-position:center center;
}
.flow-steps{
display:flex;align-items:center;justify-content:center;
gap:12px;max-width:980px;margin:0 auto;
flex-wrap:nowrap;
}
.fs-step{
position:relative;
display:inline-flex;align-items:center;justify-content:center;
/* Figma: "Vende → Genera data" ~20px Light */
font-family:var(--font-mono);font-size:20px;letter-spacing:.06em;font-weight:300;
color:#fff;text-transform:uppercase;
text-align:center;
padding:6px 4px;
white-space:nowrap;
}
.fs-glow{display:none}
/* glow only on desktop, on active step */
.fs-lbl{position:relative;z-index:1;line-height:1.3}
.fs-arrow{color:var(--text-dim);display:inline-flex;align-items:center}
.fs-arrow svg{width:20px;height:12px}
.fs-desktop{display:none}
/* =========================================================
MÉTRICA
========================================================= */
.metric{padding:60px var(--pad-x);text-align:center;max-width:640px;margin:0 auto}
.metric-title{
font-family:var(--font-display);font-weight:300;
/* Figma móvil: 29.8px / lh 36.84px (1.236) */
font-size:29.8px;letter-spacing:.02em;line-height:1.236;
margin:0 0 24px;text-transform:uppercase;color:#fff;
/* glow suave (Edmond: textos muy opacos, les falta brillo). Antes opacity:.85
los apagaba aún más. */
text-shadow:0 0 10px rgba(255,255,255,.3),0 0 26px rgba(255,255,255,.12);
}
.metric-body{
/* Figma móvil: 11.47px / lh 1.83 / tracking .165em / blanco */
font-family:var(--font-mono);font-size:11.47px;line-height:1.83;letter-spacing:.165em;
color:#fff;text-transform:uppercase;
margin:0 auto 36px;max-width:440px;
text-shadow:0 0 8px rgba(255,255,255,.22);
}
.metric-cards{display:flex;flex-direction:column;gap:35px;margin-top:28px;align-items:center}
/* Figma: card GLASS 300x204 r41.5 — gradiente translúcido + blur + borde blanco .08
(medido al píxel: título +47 del borde, foot termina +148, padding inferior 52) */
.m-card{
/* Figma: glass GRIS visible (antes casi negro/transparente → invisible).
Gradiente blanco translúcido sobre el fondo. */
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.1);
border-radius:41px;
width:300px;max-width:100%;
padding:43px 30px 52px 58px;text-align:left;
}
.m-card-title{
/* Figma móvil: 14px Light / tracking .25em / lh 1.14 / blanco */
font-family:var(--font-mono);font-weight:300;
font-size:14px;letter-spacing:.25em;line-height:1.14;
text-transform:uppercase;margin:0 0 16px;color:#fff;
}
/* Figma: track 10px rgba(255,255,255,.1); fill con duplicado blureado 2.6px (glow) */
.m-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.1);margin-bottom:22px;width:179px;max-width:100%}
.m-bar-fill{height:100%;width:var(--pct,0%);border-radius:999px;transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.m-bar-red{background:red;box-shadow:0 0 5px rgba(255,0,0,.8)}
.m-bar-green{background:linear-gradient(90deg,rgba(85,202,0,.2),#55ca00);box-shadow:0 0 5px rgba(85,202,0,.8)}
.m-card-foot{
/* Figma móvil: 12px / tracking .167em / lh 1.17 / blanco */
font-family:var(--font-mono);font-size:12px;letter-spacing:.167em;
color:#fff;text-transform:uppercase;margin:0;line-height:1.17;
}
/* =========================================================
STARKI
========================================================= */
.starki{padding:70px var(--pad-x) 50px;text-align:center;position:relative}
/* STARKI: Figma usa PP Model Mono Light 36.4px (no Montserrat). Revertido jun-2026
por petición de Edmond para igualar el Figma exacto. */
.starki-title{
/* Figma (render real): STARKI = Gotham Medium 36.4px tracking 8.4px (.23em);
sub web = Montserrat 500 */
font-family:'Montserrat',var(--font-display),sans-serif;font-weight:500;
font-size:36.4px;letter-spacing:.23em;line-height:1.21;
margin:0 0 2px;text-transform:uppercase;color:#fff;
padding-left:.23em;
}
.starki-pill{
display:inline-block;position:relative;z-index:3;
/* Figma: PRÓXIMAMENTE es un pill más GRANDE, pegado/solapando la parte baja
de STARKI (margin-top negativo). PP Model Mono Medium, texto BLANCO. */
font-family:var(--font-mono);font-weight:500;font-size:16px;letter-spacing:2.18px;
color:#fff;background:var(--green-soft);
padding:8px 26px;border-radius:6px;text-transform:uppercase;
margin-top:-10px;margin-bottom:24px;box-shadow:0 0 26px rgba(85,202,0,.6);
}
.starki-figure{
position:relative;margin:0 auto;max-width:380px;
filter:drop-shadow(0 0 40px rgba(85,202,0,.18));
}
.starki-img{width:100%;height:auto}
@keyframes starki-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Starki floating pills (desktop only) — Carlos 27/may: rectángulos redondeados (no píldoras) y se asoman/desvanecen con el scroll */
.sk-pill{display:none;position:absolute;z-index:2;
/* Figma desktop: Mono Medium 11px, tracking .2em, texto BLANCO, 2 líneas */
background:var(--green-soft);color:#fff;
font-family:var(--font-mono);font-weight:500;
font-size:11px;letter-spacing:.2em;line-height:1.3;
padding:10px 16px;border-radius:10px;text-transform:uppercase;
text-align:center;white-space:nowrap;
box-shadow:0 0 30px rgba(85,202,0,.55);
/* estado inicial — el JS controla la opacidad/translateY conforme se hace scroll */
opacity:0;transform:translateY(20px);
transition:opacity .55s ease,transform .55s ease;
}
.sk-pill.sk-in{opacity:1;transform:translateY(0)}
/* =========================================================
PRODUCTOS
========================================================= */
.products{padding:70px var(--pad-x) 50px;text-align:center;position:relative}
.products-sub{
/* Figma móvil: 10.1px / lh 1.43 / blanco */
font-family:var(--font-mono);font-size:10.1px;line-height:1.43;
color:#fff;margin:0 auto 36px;max-width:340px;
}
.products-layout{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px}
.products-text{display:none}
/* Cohete: container con aspect-ratio del bounding box de módulos de Figma
(262×1144) y cada módulo posicionado en % EXACTOS de Figma */
.products-grid{
position:relative;width:248px;aspect-ratio:262 / 1144;
margin:0 auto;max-width:88vw;
}
.products-grid .p-card{position:absolute}
.p-btn{
position:relative;display:block;background:transparent;padding:0;width:100%;
transition:transform .25s ease,filter .25s ease;
}
/* Más claridad al wireframe del cohete (Edmond: se ve opaco): brillo + glow
blanco suave en las líneas */
.p-btn img{width:100%;height:auto;display:block;filter:brightness(1.25) drop-shadow(0 0 3px rgba(255,255,255,.25))}
.p-btn:hover{transform:translateY(-2px) scale(1.04)}
.p-btn:hover img{filter:drop-shadow(0 4px 14px rgba(85,202,0,.4))}
/* Posiciones exactas del cohete (% del bounding box 262×1144) */
.p-card[data-m="1"]{left:32.8%;top:0;width:36.6%}
.p-card[data-m="2"]{left:30.5%;top:13.5%;width:40.8%}
.p-card[data-m="3"]{left:34.4%;top:22.4%;width:33.2%}
.p-card[data-m="4"]{left:32.4%;top:29.8%;width:36.6%}
.p-card[data-m="5"]{left:34.4%;top:35.8%;width:33.6%}
.p-card[data-m="6"]{left:34.4%;top:49.8%;width:33.6%}
.p-card[data-m="7"]{left:34.0%;top:58.0%;width:34.4%}
.p-card[data-m="8"]{left:34.0%;top:66.8%;width:34.4%}
.p-card[data-m="9"]{left:32.1%;top:75.3%;width:37.8%}
.p-card[data-m="10"]{left:0;top:75.5%;width:20.2%}
.p-card[data-m="11"]{left:79.8%;top:75.5%;width:20.2%}
.p-card[data-m="12"]{left:35.1%;top:84.9%;width:32.4%}
.p-card[data-m="13"]{left:42.4%;top:91.7%;width:17.6%}
.p-card[data-m="14"]{left:40.1%;top:96.2%;width:21.8%}
.p-dot{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:14px;height:14px;border-radius:50%;
background:var(--green);
box-shadow:0 0 8px rgba(85,202,0,.7);
cursor:pointer;
transition:transform .15s,box-shadow .15s;
}
.p-btn:hover .p-dot{
transform:translate(-50%,-50%) scale(1.2);
box-shadow:0 0 16px rgba(85,202,0,.95),0 0 30px rgba(85,202,0,.5);
}
/* Mobile-only descriptions tail */
.products-tail{
text-align:left;max-width:340px;margin:40px auto 0;
}
.products-desc{
/* Figma: 10px / lh 16px / blanco */
font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;line-height:1.6;
color:#fff;margin:6px 0;
}
/* =========================================================
CLIENTES
========================================================= */
.clients{padding:60px var(--pad-x);text-align:center}
.clients-heading{
/* Figma móvil: 12.6px / tracking .214em / blanco, con glow suave (Edmond:
"le falta el glow al texto") */
font-family:var(--font-mono);font-size:12.6px;letter-spacing:.214em;
text-transform:uppercase;margin:0;line-height:1.9;color:#fff;
text-shadow:0 0 9px rgba(255,255,255,.6),0 0 20px rgba(255,255,255,.3),0 0 36px rgba(255,255,255,.12);
}
.clients-heading-desktop{display:none}
.slider{
display:flex;gap:14px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
padding:30px 4px 10px;scrollbar-width:none;
}
.slider::-webkit-scrollbar{display:none}
.client-card{
flex:0 0 auto;scroll-snap-align:center;
background:transparent;
border:0;
border-radius:0;padding:8px 16px;
text-align:center;
display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.c-logo{height:48px;width:auto;margin:0;object-fit:contain}
.c-quote,.c-author{display:none} /* mobile: hide quote text */
.dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.dots span{
width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);
transition:background .2s,box-shadow .2s;
}
.dots span.on{
background:#fff;
box-shadow:0 0 8px rgba(255,255,255,.6);
}
/* =========================================================
PRICING
========================================================= */
.pricing{padding:60px 14px 40px;position:relative}
.pricing-layout{
display:flex;flex-direction:row;align-items:flex-start;justify-content:center;
gap:14px;max-width:400px;margin:0 auto;
}
/* Cohete de pricing — 3 cohetes distintos por tier (datos exactos de Figma):
- Starlight: Rocket .65 frame 129×313 — 10 módulos (oculta 2,5,7,8)
- Nova: Rocket-01 .5 frame 130×364 — 11 módulos (oculta 2,5,7)
- Supernova: Rocket .65 frame 129×406 — 12 módulos (oculta 5,7)
Cada uno agrega un módulo y crece en altura. */
.pricing-rocket{
position:relative;flex:0 0 auto;width:150px;
transition:opacity .28s ease;
}
.pricing-rocket img{position:absolute;height:auto;margin:0}
.pricing-rocket.is-swapping{opacity:0}
/* Aspect-ratio del frame por tier (controla la altura visible del cohete) */
.pricing-rocket[data-tier="starlight"]{aspect-ratio:129 / 313}
.pricing-rocket[data-tier="nova"] {aspect-ratio:130 / 364}
.pricing-rocket[data-tier="supernova"]{aspect-ratio:129 / 406}
/* Módulos ocultos por tier */
.pricing-rocket[data-tier="starlight"] img[data-m="2"],
.pricing-rocket[data-tier="starlight"] img[data-m="5"],
.pricing-rocket[data-tier="starlight"] img[data-m="7"],
.pricing-rocket[data-tier="starlight"] img[data-m="8"]{display:none}
.pricing-rocket[data-tier="nova"] img[data-m="2"],
.pricing-rocket[data-tier="nova"] img[data-m="5"],
.pricing-rocket[data-tier="nova"] img[data-m="7"]{display:none}
.pricing-rocket[data-tier="supernova"] img[data-m="5"],
.pricing-rocket[data-tier="supernova"] img[data-m="7"]{display:none}
/* === STARLIGHT — Rocket .65 frame 129×313 (Figma 1655:2684) === */
.pricing-rocket[data-tier="starlight"] img[data-m="1"] {left:24.7%; top:0; width:50.6%}
.pricing-rocket[data-tier="starlight"] img[data-m="3"] {left:26.9%; top:27.4%; width:46.2%}
.pricing-rocket[data-tier="starlight"] img[data-m="4"] {left:24.6%; top:39.4%; width:50.8%}
.pricing-rocket[data-tier="starlight"] img[data-m="6"] {left:26.7%; top:47.9%; width:46.6%}
.pricing-rocket[data-tier="starlight"] img[data-m="9"] {left:23.8%; top:61.8%; width:52.4%}
.pricing-rocket[data-tier="starlight"] img[data-m="10"]{left:0; top:62.0%; width:27.9%}
.pricing-rocket[data-tier="starlight"] img[data-m="11"]{left:72.1%; top:62.0%; width:27.9%}
.pricing-rocket[data-tier="starlight"] img[data-m="12"]{left:28.2%; top:75.5%; width:44.9%}
.pricing-rocket[data-tier="starlight"] img[data-m="13"]{left:37.9%; top:86.0%; width:24.2%}
.pricing-rocket[data-tier="starlight"] img[data-m="14"]{left:34.8%; top:90.5%; width:30.4%}
/* === NOVA — Rocket-01 .5 frame 130×364 (Figma 1655:1273) === */
.pricing-rocket[data-tier="nova"] img[data-m="1"] {left:24.7%; top:0; width:50.6%}
.pricing-rocket[data-tier="nova"] img[data-m="3"] {left:26.9%; top:23.4%; width:46.2%}
.pricing-rocket[data-tier="nova"] img[data-m="4"] {left:24.6%; top:34.0%; width:50.8%}
.pricing-rocket[data-tier="nova"] img[data-m="6"] {left:26.7%; top:41.6%; width:46.6%}
.pricing-rocket[data-tier="nova"] img[data-m="8"] {left:26.3%; top:54.0%; width:47.5%}
.pricing-rocket[data-tier="nova"] img[data-m="9"] {left:23.8%; top:66.7%; width:52.4%}
.pricing-rocket[data-tier="nova"] img[data-m="10"]{left:0; top:67.1%; width:27.9%}
.pricing-rocket[data-tier="nova"] img[data-m="11"]{left:72.1%; top:67.1%; width:27.9%}
.pricing-rocket[data-tier="nova"] img[data-m="12"]{left:28.2%; top:78.7%; width:44.9%}
.pricing-rocket[data-tier="nova"] img[data-m="13"]{left:37.9%; top:87.7%; width:24.2%}
.pricing-rocket[data-tier="nova"] img[data-m="14"]{left:34.8%; top:91.8%; width:30.4%}
/* === SUPERNOVA — Rocket .65 frame 129×406 (Figma 1655:626) === */
.pricing-rocket[data-tier="supernova"] img[data-m="1"] {left:25.1%; top:0; width:50.6%}
.pricing-rocket[data-tier="supernova"] img[data-m="2"] {left:22.0%; top:21.1%; width:56.8%}
.pricing-rocket[data-tier="supernova"] img[data-m="3"] {left:26.7%; top:32.2%; width:46.2%}
.pricing-rocket[data-tier="supernova"] img[data-m="4"] {left:24.4%; top:41.5%; width:50.8%}
.pricing-rocket[data-tier="supernova"] img[data-m="8"] {left:27.5%; top:48.3%; width:45.3%}
.pricing-rocket[data-tier="supernova"] img[data-m="6"] {left:26.7%; top:59.8%; width:46.6%}
.pricing-rocket[data-tier="supernova"] img[data-m="9"] {left:23.5%; top:70.4%; width:52.4%}
.pricing-rocket[data-tier="supernova"] img[data-m="10"]{left:0; top:70.7%; width:27.9%}
.pricing-rocket[data-tier="supernova"] img[data-m="11"]{left:72.1%; top:70.7%; width:27.9%}
.pricing-rocket[data-tier="supernova"] img[data-m="12"]{left:27.5%; top:81.0%; width:44.9%}
.pricing-rocket[data-tier="supernova"] img[data-m="13"]{left:38.3%; top:89.1%; width:24.2%}
.pricing-rocket[data-tier="supernova"] img[data-m="14"]{left:35.2%; top:92.7%; width:30.4%}
.pricing-card{
background:transparent;
border:0;border-radius:0;padding:0;
flex:1;min-width:0;text-align:left;position:relative;
}
.plan-name{
/* NUEVO (notas 19-jun): título sobre plasta verde (también en móvil) */
display:inline-block;font-family:var(--font-mono);font-weight:500;
font-size:12.6px;letter-spacing:.04em;
color:#fff;background:var(--green-soft);padding:7px 20px;border-radius:999px;
box-shadow:0 0 16px rgba(85,202,0,.4);margin:0 0 14px;
}
.plan-price{
font-family:var(--font-display);font-weight:300;
/* móvil: card estrecha (~220px) → precio más chico para que quepa con el período */
font-size:26px;letter-spacing:.01em;
margin:0 0 14px;color:#fff;
display:flex;align-items:flex-start;gap:4px;flex-wrap:wrap;
}
.plan-period{
/* Figma móvil: PP Model Mono Medium 8.82px / blanco */
font-family:var(--font-mono);font-size:8.82px;letter-spacing:.04em;line-height:1.4;
color:#fff;align-self:flex-end;
text-transform:none;font-weight:500;white-space:pre-line;
margin-bottom:3px;
}
.plan-features{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.plan-features li{
font-family:var(--font-mono);font-size:11px;letter-spacing:.01em;
color:#fff;display:flex;align-items:center;gap:8px;line-height:1.3;
}
/* Figma: círculo verde OUTLINE + checkmark (no dot relleno) */
.plan-features li::before{
content:"";width:15px;height:15px;flex-shrink:0;
background:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.btn-agendar{
display:inline-flex;align-items:center;justify-content:center;
background:transparent;color:#fff;
border:1px solid var(--green);
/* Figma móvil "Comprar": PP Model Mono Medium 11.76px */
font-family:var(--font-mono);font-weight:500;font-size:11.76px;letter-spacing:.04em;
padding:10px 22px;border-radius:999px;
transition:background .2s,box-shadow .2s,transform .15s;
box-shadow:0 0 14px rgba(85,202,0,.14);
}
.btn-agendar:hover{background:rgba(85,202,0,.1);box-shadow:0 0 28px rgba(85,202,0,.4)}
.btn-agendar:active{transform:scale(.98)}
.plan-note{
font-family:var(--font-mono);font-size:9px;letter-spacing:.02em;
/* blanco brillante + glow (Edmond) — antes text-dim apagado */
color:#fff;margin:10px 0 0;text-shadow:0 0 8px rgba(255,255,255,.3);
}
/* Timeline */
.timeline{margin:50px auto 14px;max-width:320px;display:flex;align-items:center;justify-content:space-between}
/* Círculos en BLANCO BRILLANTE; junto con la línea forman UN solo elemento
(mismo blanco, la línea casi toca los círculos) */
.tl-node{
width:18px;height:18px;border-radius:50%;
background:transparent;border:1.5px solid rgba(255,255,255,.92);position:relative;
box-shadow:0 0 6px rgba(255,255,255,.25);
}
/* El nodo activo (Starlight) = punto verde brillante con glow GRANDE */
.tl-node.active{
background:var(--green);border-color:var(--green);
box-shadow:0 0 26px 4px rgba(85,202,0,.95),0 0 54px 8px rgba(85,202,0,.5);
}
/* Línea Starlight–Nova–Supernova en BLANCO BRILLANTE, mismo peso visual que
los círculos (un solo elemento) */
.tl-line{flex:1;height:1.5px;background:rgba(255,255,255,.92);margin:0 2px;box-shadow:0 0 6px rgba(255,255,255,.4)}
.tl-lbl{
position:absolute;top:24px;left:50%;transform:translateX(-50%);
font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;
color:var(--text-dim);text-transform:uppercase;white-space:nowrap;
}
.tl-node.active .tl-lbl{color:#fff}
/* Transición al cambiar de paquete: fade rápido de la tarjeta (keyframe para
ganarle a la opacidad inline del scroll-reveal). */
.pricing-card.is-switching{animation:plan-swap .38s ease}
@keyframes plan-swap{0%{opacity:1}38%{opacity:.12}100%{opacity:1}}
/* Transición al cambiar de paquete: las features entran en cascada (slide+fade) */
@keyframes feat-in{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.plan-features li.feat-anim{animation:feat-in .45s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.plan-features li.feat-anim{animation:none}}
/* =========================================================
CTA
========================================================= */
.cta{
position:relative;min-height:78vh;
padding:120px var(--pad-x);
/* flex-start: el título queda EXACTO en su Y de Figma (padding-top),
sin depender de la altura del viewport (antes align-center lo movía) */
display:flex;align-items:flex-start;justify-content:center;
overflow:hidden;text-align:center;
}
.cta-galaxy{
/* Figma: la galaxia se CENTRA en el título (su centro coincide con el
centro del texto), no por encima. Móvil: título (~3 líneas) a 388px,
centro ≈433px. Desktop se sobreescribe a 567px más abajo. */
position:absolute;top:433px;left:50%;transform:translate(-50%,-50%);
/* Figma: galaxia 1896px en frame 1280 (~148vw, se extiende fuera del viewport) */
width:148vw;max-width:1900px;height:auto;
pointer-events:none;opacity:.95;
}
/* Planetas que orbitan sobre las elipses de la galaxia (Edmond: maqueta con los
planetas moviéndose). Aditivo; offset-path = trayectoria elíptica; el
contenedor va inclinado como la galaxia. Centro = centro de la galaxia. */
.cta-orbits{
position:absolute;left:50%;top:433px;width:820px;height:440px;
transform:translate(-50%,-50%) rotate(-18deg);
z-index:1;pointer-events:none;
}
.cta-orbits .planet{
/* top/left:0 fija el origen del offset-path en la esquina (0,0) del contenedor
→ la elipse queda centrada en el box (antes el origen era la posición
estática del span y todos los planetas se iban a la derecha). */
position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;
background:#fff;box-shadow:0 0 7px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.4);
offset-anchor:50% 50%;offset-rotate:0deg;
animation:orbit-travel linear infinite;
}
.cta-orbits .planet.green{background:#7dff3a;box-shadow:0 0 9px rgba(85,202,0,.95),0 0 22px rgba(85,202,0,.55)}
@keyframes orbit-travel{to{offset-distance:100%}}
.cta-orbits .o1{offset-path:path('M 30 220 a 380 130 0 1 0 760 0 a 380 130 0 1 0 -760 0');animation-duration:46s}
.cta-orbits .o2{offset-path:path('M 130 220 a 280 95 0 1 0 560 0 a 280 95 0 1 0 -560 0');animation-duration:34s}
.cta-orbits .o3{offset-path:path('M 230 220 a 180 62 0 1 0 360 0 a 180 62 0 1 0 -360 0');animation-duration:26s}
/* 2 planetas OPUESTOS por órbita (uno a cada lado siempre) → galaxia balanceada,
no se agrupan a la derecha. Diferencia = media duración de cada órbita. */
.cta-orbits .d0{animation-delay:-2s} .cta-orbits .d1{animation-delay:-25s} /* o1 46s: 0/50% */
.cta-orbits .d2{animation-delay:-10s} .cta-orbits .d3{animation-delay:-27s} /* o2 34s: ~12/62% */
.cta-orbits .d4{animation-delay:-4s} .cta-orbits .d5{animation-delay:-17s} /* o3 26s: ~8/58% */
@media (prefers-reduced-motion:reduce){.cta-orbits .planet{animation:none}}
.cta-title{
position:relative;z-index:1;
font-family:var(--font-display);font-weight:300;
/* Figma móvil: 19.2px / tracking .25em / lh 1.56 */
font-size:19.2px;letter-spacing:.25em;line-height:1.56;
margin:0;text-transform:uppercase;color:#fff;
text-align:center;
}
.cta-w{display:block} /* mobile: each word on own line */
/* =========================================================
FOOTER
========================================================= */
.footer{
position:relative;z-index:1;
/* espacio inferior generoso como Figma (~145px bajo el footer); antes 22px
dejaba el footer pegado al borde y se cortaba (Edmond: "ni se ve") */
padding:26px var(--pad-x) 72px;
display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;
/* Figma (node 1655:446): Montserrat SemiBold 11px, SIN letter-spacing, blanco
(antes mono + letter-spacing .04em → se veía raro/poco claro) */
font-family:'Montserrat',system-ui,-apple-system,sans-serif;font-size:11px;letter-spacing:0;line-height:1.6;
color:#fff;font-weight:600;
border-top:0;
}
.footer-left{font-weight:600;color:#fff;flex-shrink:0}
.footer-right{text-align:right;color:#fff;max-width:50%}
.footer-sep{display:none}
.footer-rights{display:block;margin-top:2px}
.footer a{text-decoration:underline}
.footer a:hover{color:var(--green)}
/* =========================================================
MODALS — base
========================================================= */
.modal{
position:fixed;inset:0;z-index:200;display:none;
align-items:flex-start;justify-content:center;padding:20px;
overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal.open{display:flex}
/* El modal de producto es corto → centrado vertical (también en móvil) */
#productModal{align-items:center}
@media (min-width:1024px){
.modal{align-items:center}
/* Demo modal: centrado vertical (Carlos 27/may "tratar de centrar a lo alto y a lo ancho").
Si el contenido supera el viewport, el .modal scrollea internamente. */
#demoModal{align-items:center;padding:32px 20px}
}
/* Modal background — Carlos 27/may: menos opaco para que el gradiente del fondo se note un poco */
.modal-bg{
position:fixed;inset:0;background:rgba(0,0,0,.62);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* Productos (notas 19-jun): la tarjeta del producto aparece SIN overlay negro
(el fondo queda visible); solo la propia card hace glass-blur de lo que tiene
detrás. El .modal-bg transparente sigue capturando el click-fuera para cerrar. */
#productModal .modal-bg{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
#productModal .modal-box{
/* mismo vidrio que la tarjeta reveal: luz arriba + gradiente a oscuro */
background:
radial-gradient(90% 45% at 50% -8%, rgba(150,152,160,.18), transparent 56%),
linear-gradient(180deg, rgba(40,40,46,.9) 0%, rgba(16,16,20,.93) 42%, rgba(8,8,11,.96) 100%);
-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 24px 70px rgba(0,0,0,.5);
}
.modal-box{
position:relative;
/* Figma overlay: glass oscuro r41 borde blanco .08 */
background:linear-gradient(180deg,rgba(20,20,20,.78),rgba(8,8,8,.84));
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:41px;max-height:90vh;overflow-y:auto;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}
/* Transición de entrada del modal: animation se dispara al pasar display:none→flex (transition no) */
.modal.open .modal-box{animation:modal-pop .35s cubic-bezier(.2,.7,.2,1)}
.modal.open .demo-step.active .demo-card{animation:modal-pop .42s cubic-bezier(.2,.7,.2,1) both}
.modal.open .demo-step.active .demo-card-side{animation-delay:.12s}
@keyframes modal-pop{
from{opacity:0;transform:scale(.94) translateY(10px)}
to {opacity:1;transform:scale(1) translateY(0)}
}
@media (prefers-reduced-motion: reduce){
.modal.open .modal-box,
.modal.open .demo-step.active .demo-card{animation:none}
}
.modal-close{
position:absolute;top:20px;right:20px;z-index:3;
width:48px;height:48px;border-radius:50%;
background:rgba(255,255,255,.12);color:#fff;
display:flex;align-items:center;justify-content:center;
transition:background .2s;
}
.modal-close svg{width:22px;height:22px}
.modal-close:hover{background:rgba(255,255,255,.2)}
/* Product modal */
/* Tarjeta de producto revelada al scrollear (aparece junto al cohete según el
módulo centrado; sin trabar el scroll). Solo desktop. JS controla la opacidad. */
.product-reveal{
display:none;position:fixed;top:50%;left:calc(50% + 120px);transform:translateY(-50%);
width:340px;max-width:34vw;z-index:40;pointer-events:none;
padding:30px 28px;border-radius:30px;text-align:left;
/* Como la referencia 01: NO un gris plano, sino un gradiente con LUZ ARRIBA
(reflejo de cristal) que se oscurece hacia abajo + rim-light en el borde.
Eso es lo que lo hace leer como vidrio pulido sobre el negro. */
background:
radial-gradient(100% 55% at 50% -10%, rgba(150,152,160,.2), transparent 58%),
linear-gradient(180deg, rgba(42,42,48,.9) 0%, rgba(18,18,22,.93) 42%, rgba(9,9,12,.96) 100%);
-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.3), 0 30px 80px rgba(0,0,0,.6);
opacity:0;transition:opacity .3s ease;
}
/* aparece del lado IZQUIERDO (p.ej. WhatsApp en adelante) para no tapar el
texto del lado derecho */
.product-reveal.left{left:auto;right:calc(50% + 120px)}
@media (min-width:1024px){ .product-reveal{display:block} }
.pr-title{font-family:var(--font-display);font-weight:300;font-size:30px;letter-spacing:.02em;line-height:1.05;margin:0;text-transform:uppercase;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.25)}
.pr-title em{color:var(--green);font-style:normal;display:block;text-shadow:0 0 12px rgba(85,202,0,.5)}
.pr-tagline{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--green);margin:6px 0 0;text-transform:uppercase}
.pr-tagline:empty{display:none}
.pr-desc{font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:.02em;color:#fff;margin:14px 0 0}
.pr-img{width:100%;height:auto;display:block;margin:16px 0 0;border-radius:14px;transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){.product-reveal{transition:none}}
.product-modal{width:100%;max-width:360px;padding:36px 32px 32px;text-align:center}
.pm-info{text-align:left;margin-bottom:16px}
.pm-title{
font-family:var(--font-display);font-weight:300;
font-size:38px;letter-spacing:.02em;line-height:.98;
margin:0;color:rgba(255,255,255,.92);text-transform:uppercase;
}
.pm-title em{color:var(--green);font-style:normal;display:block}
.pm-tagline{
font-family:var(--font-display);font-weight:400;font-size:13px;letter-spacing:.2em;
color:var(--green);margin:10px 0 16px;text-transform:uppercase;
}
.pm-tagline:empty{display:none}
.pm-desc{
font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.7;
color:var(--text-mid);margin:0;
}
.pm-img{margin-top:24px}
.pm-img img{width:88%;max-width:340px;margin:0 auto;height:auto;transition:opacity .18s ease}
/* Demo modal — new structure: 2 separate cards + outside close */
#demoModal .modal-box{display:none} /* old single box hidden */
.demo-wrap{
position:relative;z-index:2;
display:flex;flex-direction:column;gap:16px;
width:100%;max-width:980px;
padding:20px;
}
.demo-close{
position:fixed;top:30px;right:30px;z-index:3;
width:50px;height:50px;border-radius:50%;
background:rgba(40,40,40,.9);color:#fff;
display:flex;align-items:center;justify-content:center;
transition:background .2s;
border:1px solid rgba(255,255,255,.18);
}
.demo-close:hover{background:rgba(80,80,80,.9)}
.demo-step{display:none}
.demo-step.active{display:flex;flex-direction:column;gap:16px;width:100%}
.demo-card{
/* Translúcido — Carlos 27/may: que se note un poco el gradiente del fondo */
background:linear-gradient(180deg,rgba(26,26,26,.82),rgba(10,10,10,.86));
border:1px solid var(--border-mid);
border-radius:28px;padding:30px 26px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.demo-card-main{flex:1}
.demo-card-side{flex:0 0 auto}
.demo-h{font-family:var(--font-mono);font-weight:700;font-size:20px;letter-spacing:.02em;margin:0 0 14px;color:var(--green)}
.demo-section-h{font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:.02em;color:#fff;margin:16px 0 8px}
.demo-cols{display:grid;grid-template-columns:1fr;gap:24px}
.demo-col-l,.demo-col-r{min-width:0}
.demo-lbl{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.02em;color:#fff;text-transform:none;margin:0 0 12px}
.mt16{margin-top:18px}
.demo-tz{font-family:var(--font-mono);font-weight:400;font-size:13px;letter-spacing:.02em;color:#fff;margin:0;display:inline-flex;align-items:center}
.demo-desc{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;line-height:1.6;color:var(--text-dim);margin:0}
/* Calendar */
.cal-nav{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:none;margin-bottom:14px;color:#fff}
.cal-nav span{flex:0 0 auto;min-width:110px}
.cal-nav button{width:auto;height:auto;border-radius:0;background:transparent;color:#fff;font-size:14px;padding:0 4px}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-week span{font-family:var(--font-mono);font-weight:700;font-size:12px;color:#fff;padding:6px 0;text-transform:none;letter-spacing:.01em}
.cal-grid button{
aspect-ratio:1;border-radius:0;
font-family:var(--font-mono);font-size:13px;color:#fff;background:transparent;
transition:color .15s;
padding:0;
}
.cal-grid button:hover{color:var(--green)}
.cal-grid button.sel{color:var(--green);font-weight:700;text-decoration:underline}
.cal-grid button.dim{color:rgba(255,255,255,.25);pointer-events:none;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.15)}
/* Slots */
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:none;overflow-y:visible;padding:0}
.slot{
background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:12px;
color:#fff;padding:12px;
font-family:var(--font-mono);font-weight:400;font-size:13px;letter-spacing:.01em;
transition:border-color .15s,background .15s,color .15s;
}
.slot:hover{border-color:rgba(85,202,0,.6);background:rgba(85,202,0,.05)}
.slot.sel{background:var(--green);color:#000;border-color:var(--green);font-weight:700}
.side-nav{font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:.02em;color:#fff;margin:0 0 16px;text-transform:none}
.side-nav-dim{color:var(--text-dim)}
.side-h{font-family:var(--font-mono);font-weight:700;font-size:18px;letter-spacing:.02em;margin:0 0 4px;color:var(--green)}
.side-sub{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.02em;color:#fff;text-transform:none;margin:18px 0 10px}
.side-row{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;color:#fff;margin:7px 0;letter-spacing:.01em}
.side-row img{width:14px;height:14px;opacity:.8}
.side-row-indent{margin-left:24px}
.side-hr{border:0;border-top:1px solid var(--border-dim);margin:18px 0}
.btn-next{display:inline-flex;background:var(--green-soft);color:#fff;font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:.02em;text-transform:none;padding:11px 32px;border-radius:999px;margin-top:22px;transition:box-shadow .2s,transform .15s;box-shadow:0 0 22px rgba(85,202,0,.35)}
.btn-next:hover{box-shadow:0 0 32px rgba(85,202,0,.65);transform:translateY(-1px)}
.btn-confirm{display:inline-flex;margin:24px 0 0;background:transparent;color:#fff;border:1px solid var(--green);font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:none;padding:11px 28px;border-radius:999px;transition:background .2s,box-shadow .2s;cursor:pointer}
.btn-confirm:hover{background:rgba(85,202,0,.08);box-shadow:0 0 22px rgba(85,202,0,.4)}
.btn-confirm:disabled{opacity:.5;cursor:not-allowed}
.form-error{margin:14px 0 0;padding:10px 14px;background:rgba(255,80,80,.08);border:1px solid rgba(255,120,120,.3);border-radius:10px;color:#ff8a8a;font-family:var(--font-mono);font-size:12px;line-height:1.5;letter-spacing:.02em}
/* Form fields — minimal style with underlines (no boxes) */
.fields{display:flex;flex-direction:column;gap:4px}
.field{display:flex;flex-direction:column;gap:0;position:relative;border-bottom:1px solid rgba(255,255,255,.18);padding:9px 0 7px}
.field label{font-family:var(--font-mono);font-weight:400;font-size:13px;letter-spacing:.01em;color:#fff;text-transform:none;margin:0}
.field input,.field select{background:transparent;border:0;color:#fff;border-radius:0;padding:6px 0 0;font-family:var(--font-mono);font-size:13px;width:100%}
.field input:focus,.field select:focus{outline:none}
.field:focus-within{border-bottom-color:var(--green-soft)}
.field input::placeholder{color:var(--text-dim)}
.field small{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:.01em;margin-top:8px;display:block}
.field-select{position:relative}
.field-select::after{
content:"";position:absolute;right:6px;top:50%;transform:translateY(-25%);
width:10px;height:6px;
background:url("data:image/svg+xml;utf8,") no-repeat center;
pointer-events:none;
}
.field-select select{appearance:none;-webkit-appearance:none}
/* Step 3 — success */
.demo-step-success{
display:none;flex-direction:column !important;align-items:center;justify-content:center;
padding:120px 30px 100px;text-align:center;width:100%;
}
.demo-step-success.active{display:flex !important}
.success-eyebrow{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.28em;color:#fff;text-transform:uppercase;margin:0 0 36px}
.success-body{font-family:var(--font-mono);font-size:14px;letter-spacing:.02em;line-height:1.7;color:#fff;margin:0 0 24px;text-align:center}
.success-logo{display:inline-flex;align-items:center;gap:12px;margin-top:36px}
.success-iso{width:36px;height:auto}
.success-text{width:120px;height:auto}
/* =========================================================
ANIMATIONS / REVEAL
========================================================= */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
/* ---------- Fine-grained scroll-triggered animations ---------- */
/* Easing token shared by all enter transitions */
:root{ --ease-out: cubic-bezier(.22,.7,.2,1); }
/* Métrica cards: fade + slide up, then progress bar fills */
.m-card{
opacity:0;
transform:translateY(24px);
transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.metric.anim-in .m-card{ opacity:1; transform:translateY(0); }
.metric.anim-in .m-card:nth-child(2){ transition-delay:.12s; }
/* Progress bar fills from 0 to --pct only when section animates in */
.m-bar-fill{ width:0; }
.metric.anim-in .m-card .m-bar-fill{ width:var(--pct,0%); transition:width 1.4s var(--ease-out) .35s; }
/* Starki figure: fade + subtle scale (preserves float animation post-reveal) */
.starki-img{
opacity:0;
transform:scale(.92);
transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.starki.anim-in .starki-img{ opacity:1; transform:scale(1); }
/* After reveal, hand off to the existing float keyframe */
.starki.anim-in .starki-img{ animation:starki-float 6s ease-in-out 1s infinite; }
/* Starki pills: stagger fade in from off-positions */
.sk-pill{
opacity:0;
transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.sk-pill-1{ transform:translate(-18px,-14px) scale(.9); }
.sk-pill-2{ transform:translate(18px,-14px) scale(.9); }
.sk-pill-3{ transform:translate(-18px,14px) scale(.9); }
.sk-pill-4{ transform:translate(18px,14px) scale(.9); }
.starki.anim-in .sk-pill{ opacity:1; transform:translate(0,0) scale(1); }
.starki.anim-in .sk-pill-1{ transition-delay:.45s; }
.starki.anim-in .sk-pill-2{ transition-delay:.6s; }
.starki.anim-in .sk-pill-3{ transition-delay:.75s; }
.starki.anim-in .sk-pill-4{ transition-delay:.9s; }
/* Section titles + eyebrows: fade + slight slide up */
.section-title, .eyebrow, .metric-title, .starki-title, .starki-pill, .clients-heading{
opacity:0;
transform:translateY(14px);
transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
section.anim-in .section-title,
section.anim-in .eyebrow,
section.anim-in .metric-title,
section.anim-in .starki-title,
section.anim-in .starki-pill,
section.anim-in .clients-heading{
opacity:1; transform:translateY(0);
}
section.anim-in .eyebrow{ transition-delay:.05s; }
section.anim-in .section-title,
section.anim-in .metric-title,
section.anim-in .starki-title{ transition-delay:.15s; }
section.anim-in .starki-pill{ transition-delay:.25s; }
/* Product modules (.p-card): stagger fade + slide up */
.p-card{
opacity:0;
transform:translateY(18px) scale(.96);
transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.products.anim-in .p-card{ opacity:1; transform:translateY(0) scale(1); }
/* Stagger via nth — covers both ol-direct .p-card and the .p-row3 ones */
.products.anim-in .products-grid > .p-card:nth-child(1),
.products.anim-in .p-row3 .p-card:nth-child(1){ transition-delay:.05s; }
.products.anim-in .products-grid > .p-card:nth-child(2),
.products.anim-in .p-row3 .p-card:nth-child(2){ transition-delay:.10s; }
.products.anim-in .products-grid > .p-card:nth-child(3),
.products.anim-in .p-row3 .p-card:nth-child(3){ transition-delay:.15s; }
.products.anim-in .products-grid > .p-card:nth-child(4){ transition-delay:.20s; }
.products.anim-in .products-grid > .p-row3{ transition-delay:0s; } /* row container itself doesn't move */
.products.anim-in .products-grid > li:nth-child(6){ transition-delay:.30s; }
.products.anim-in .products-grid > li:nth-child(7){ transition-delay:.35s; }
.products.anim-in .products-grid > li:nth-child(8){ transition-delay:.40s; }
.products.anim-in .products-grid > li:nth-child(9){ transition-delay:.45s; }
.products.anim-in .products-grid > li:nth-child(10){ transition-delay:.50s; }
.products.anim-in .products-grid > li:nth-child(11){ transition-delay:.55s; }
.products.anim-in .products-grid > li:nth-child(12){ transition-delay:.60s; }
.products-text{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.products.anim-in .products-text{ opacity:1; transform:translateY(0); transition-delay:.25s; }
/* Client cards: stagger fade in */
.client-card{
opacity:0;
transform:translateY(16px);
transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.clients.anim-in .client-card{ opacity:1; transform:translateY(0); }
.clients.anim-in .client-card:nth-child(1){ transition-delay:.10s; }
.clients.anim-in .client-card:nth-child(2){ transition-delay:.20s; }
.clients.anim-in .client-card:nth-child(3){ transition-delay:.30s; }
.clients.anim-in .client-card:nth-child(4){ transition-delay:.40s; }
/* Pricing card: fade + slide up */
.pricing-card{
opacity:0;
transform:translateY(24px);
transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.pricing.anim-in .pricing-card{ opacity:1; transform:translateY(0); transition-delay:.2s; }
/* Pricing rocket: each module pops in stacked, building the rocket */
.pricing-rocket img{
opacity:0;
transform:translateY(14px) scale(.85);
transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.pricing.anim-in .pricing-rocket img{ opacity:1; transform:translateY(0) scale(1); }
.pricing.anim-in .pricing-rocket img:nth-of-type(1){ transition-delay:.05s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(2){ transition-delay:.15s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(3){ transition-delay:.25s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(4){ transition-delay:.35s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(5){ transition-delay:.45s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(6){ transition-delay:.55s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(7){ transition-delay:.65s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(8){ transition-delay:.75s; }
.pricing.anim-in .pricing-rocket img:nth-of-type(9){ transition-delay:.85s; }
/* Timeline: nodes fade in, the lines "draw" via scaleX */
.timeline .tl-node{
opacity:0;
transform:translateY(8px) scale(.8);
transition:opacity .5s var(--ease-out), transform .5s var(--ease-out),
background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.timeline .tl-line{
transform-origin:left center;
transform:scaleX(0);
transition:transform .7s var(--ease-out);
}
.pricing.anim-in .timeline .tl-node{ opacity:1; transform:translateY(0) scale(1); }
/* :nth-of-type is per-tag — buttons and spans count separately */
.pricing.anim-in .timeline .tl-node:nth-of-type(1){ transition-delay:1.00s, 1.00s, 0s, 0s, 0s; }
.pricing.anim-in .timeline .tl-node:nth-of-type(2){ transition-delay:1.35s, 1.35s, 0s, 0s, 0s; }
.pricing.anim-in .timeline .tl-node:nth-of-type(3){ transition-delay:1.70s, 1.70s, 0s, 0s, 0s; }
.pricing.anim-in .timeline .tl-line:nth-of-type(1){ transform:scaleX(1); transition-delay:1.15s; }
.pricing.anim-in .timeline .tl-line:nth-of-type(2){ transform:scaleX(1); transition-delay:1.50s; }
/* CTA: stars twinkle is preserved (existing). Headline words fade in word-by-word. */
.cta-w{
opacity:0;
transform:translateY(10px);
transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.cta.anim-in .cta-w{ opacity:1; transform:translateY(0); }
.cta.anim-in .cta-w:nth-child(1){ transition-delay:.10s; }
.cta.anim-in .cta-w:nth-child(2){ transition-delay:.30s; }
.cta.anim-in .cta-w:nth-child(3){ transition-delay:.50s; }
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
.m-bar-fill{ width:var(--pct,0%) !important; }
.m-card,.starki-img,.sk-pill,.section-title,.eyebrow,.metric-title,.starki-title,
.starki-pill,.clients-heading,.p-card,.products-text,.client-card,.pricing-card,
.pricing-rocket img,.timeline .tl-node,.cta-w{
opacity:1 !important; transform:none !important;
}
.timeline .tl-line{ transform:scaleX(1) !important; }
}
/* =========================================================
SCROLL-DRIVEN REVEAL (JS) — replica el scroll del video:
cada bloque entra desde abajo y se va hacia arriba (fade+translate).
Cuando body.sfx-on, JS controla opacity/transform por bloque, así que
desactivamos las transiciones de entrada CSS y forzamos visibles a los
sub-hijos que dependían de .anim-in (barras, pills, nodos del timeline).
========================================================= */
.sfx-on .sfx{transition:none !important;will-change:opacity,transform}
.sfx-on .starki-img{opacity:1}
.sfx-on .sk-pill{opacity:1;transform:translate(0,0) scale(1)}
.sfx-on .p-row3 .p-card{opacity:1;transform:none}
.sfx-on .timeline .tl-node{opacity:1;transform:translateY(0) scale(1)}
.sfx-on .timeline .tl-line{transform:scaleX(1)}
.sfx-on .hero{will-change:opacity,transform}
/* Barras de la métrica: crecen 0 → --pct cuando la tarjeta entra (clase JS) */
.sfx-on .m-card.m-go .m-bar-fill{width:var(--pct,0%)}
/* =========================================================
TABLET ≥ 640px
========================================================= */
@media (min-width:640px){
:root{--pad-x:32px}
.metric-cards{flex-direction:row;gap:29px;justify-content:center}
/* Figma desktop: cards fijas 300x204 (no estirar) */
.m-card{flex:0 0 300px}
.starki-figure{max-width:400px}
}
/* =========================================================
DESKTOP ≥ 1024px
========================================================= */
@media (min-width:1024px){
:root{--pad-x:48px;--header-h:72px}
body{font-size:14px}
/* Header sticky en desktop — top:14 da un pequeño respiro para que el logo
no se vea pegado al borde superior */
.header{
display:flex;align-items:center;justify-content:space-between;
position:fixed;top:14px;left:0;right:0;z-index:100;
height:80px;
/* contenido dentro de una banda centrada de ~1280 (como Figma): el botón
Agendar Demo se alinea con el contenido y no se va al borde derecho del
viewport en pantallas anchas (Edmond: "mucho espacio a la derecha") */
padding:14px max(32px, calc((100% - 1264px) / 2));
background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
border-bottom:0;
}
.header .logo-link{
display:flex;align-items:center;
height:100%;
}
.header .logo-full{width:215px;height:auto;display:block}
.btn-demo{
display:inline-flex;align-items:center;gap:9px;
background:var(--green-soft) !important;color:#fff !important;
border:0;border-radius:999px;
padding:5px 22px 5px 5px;
font-family:var(--font-mono);font-weight:500;font-size:15px;letter-spacing:.02em;text-transform:none;
transition:box-shadow .2s,transform .15s;
box-shadow:0 0 24px rgba(85,202,0,.35);
/* Carlos: glow verde pulsante constante para llamar la atención.
Vía filter (no box-shadow) para no pelearse con el hover. */
animation:btn-demo-glow 2.4s ease-in-out infinite;
}
@keyframes btn-demo-glow{
0%,100%{filter:drop-shadow(0 0 5px rgba(85,202,0,.45))}
50% {filter:drop-shadow(0 0 17px rgba(85,202,0,.9))}
}
@media (prefers-reduced-motion:reduce){ .btn-demo{animation:none} }
.btn-demo span{color:#fff}
.btn-demo:hover{box-shadow:0 0 34px rgba(85,202,0,.5);transform:translateY(-1px)}
.btn-demo .btn-ico{width:34px;height:34px;flex:0 0 auto}
.hero-logo-mobile,.hero-btn-mobile{display:none}
/* Hero — desktop decorations */
.hero{padding:calc(var(--header-h) + 105px) var(--pad-x) 40px;min-height:100vh;overflow:hidden;position:relative}
.hero-arcs{display:block}
.hero-planet{display:block;width:606px;top:-541px;opacity:.9}
/* letter-spacing .1em ensancha la mono sustituta (más estrecha que PP Model
Mono) para igualar el ancho de bloque de 759px de Figma */
.hero-title{font-size:62px;letter-spacing:.025em;line-height:.97;max-width:880px;margin:0 auto;min-height:auto}
/* Hide mobile-only second SOFTWARE on desktop */
.ht-mobile-soft{display:none}
.deco-top{margin-bottom:30px;max-width:520px}
.deco-bottom{margin-top:30px;max-width:520px}
/* Posiciones EXACTAS de Figma (frame 1280, cada card 61px alto, radio 20) */
/* ancho ajustado al contenido (antes sobraba aire a la derecha) */
.notif{display:inline-block;text-align:left;width:-moz-fit-content;width:fit-content}
.notif-eye,.notif-body{white-space:nowrap}
/* Ancladas al CENTRO del layout (frame 1280, center=640) → estables a
cualquier ancho de ventana. Antes left:Npx/right:Npx las movía al
redimensionar (sobre todo las right). */
.notif-tl{top:132px;left:calc(50% - 375px)}
.notif-tr{top:173px;right:calc(50% - 501px)}
.notif-bl{top:329px;left:calc(50% - 503px)}
.notif-br{top:345px;right:calc(50% - 447px)}
/* Dashboards extended row on desktop — bajado para reducir el espacio vacío bajo el hero (Carlos 27/may) */
.hero-dashboards{
max-width:1120px;justify-content:space-around;gap:24px;margin-top:158px;
padding:0 60px;
}
/* Tamaños por widget (desktop) — proporciones de Figma: 86/97/100/108 */
.dash-orbital{width:86px}
.dash-ring{width:96px}
.dash-bars{width:112px}
.dash-text{display:flex;flex-direction:column;gap:2px;text-align:left}
.dash-text-status{align-items:flex-start}
/* +18% / +3%: CENTRADOS sobre su etiqueta, ALINEADOS entre sí (mismo top) y
con espacio entre el número y el texto (Figma). */
.dash-text-metric{text-align:center;align-items:center;align-self:flex-start;gap:0}
.dash-text-metric .dt-lbl{margin-top:11px;text-align:center}
.dash-radar{display:block;width:108px}
/* Marcas de tick verticales (HUD) entre métricas, como Figma */
.dash-ticks{display:block;width:8px;height:96px;flex:0 0 auto;
background:repeating-linear-gradient(to bottom, var(--text-dim) 0 2px, transparent 2px 14px);
opacity:.7}
.dt-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--text-dim);margin:0;text-transform:uppercase;line-height:1.4}
.dt-val{font-family:var(--font-mono);font-weight:700;font-size:11px;color:var(--green);margin:2px 0;display:flex;align-items:center;gap:6px;text-transform:uppercase}
.dt-val .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.dt-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);margin:0;letter-spacing:.08em}
/* Figma (node 1655:5370/5367): 44px PP Model Mono Light + degradado VERTICAL
blanco→negro recortado al texto (se aclara arriba y se funde abajo) */
.dt-num{font-family:var(--font-display);font-weight:300;font-size:44px;letter-spacing:.02em;margin:0;line-height:1;
background:linear-gradient(180deg,#fff 0%,#000 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;}
/* Hero description */
/* Figma desktop "Texto 01": 679px de ancho, 26.4px → 3 líneas */
/* Figma: ancho ~713px de contenido → párr1 3 líneas, párr2 4 líneas. Subo
max-width para alcanzar ese ancho (antes 760 daba sólo 664 de contenido). */
.hero-desc{padding:140px var(--pad-x) 80px;font-size:26.4px;max-width:820px;letter-spacing:.175em;line-height:1.5}
.hero-desc p{margin-bottom:42px}
/* Flow steps — show all 4 on desktop */
.flow{padding:60px var(--pad-x);border:0}
/* Figma: flow COMPACTO — texto ~14px, ancho total ~845px, glow VENDE ~150px
(antes 21px/1180/200 = demasiado grande y separado) */
.flow-steps{gap:34px;max-width:900px}
.fs-desktop{display:inline-flex;align-items:center}
.fs-step{font-size:14px;letter-spacing:.08em}
.fs-glow{
display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,rgba(85,202,0,.95) 0%,rgba(85,202,0,.5) 20%,rgba(85,202,0,.18) 50%,transparent 75%);
filter:blur(6px);
z-index:0;pointer-events:none;
opacity:0;transition:opacity .4s ease;
}
.fs-active .fs-glow{opacity:1}
.fs-arrow svg{width:28px;height:14px}
/* Metric */
.metric{padding:100px var(--pad-x);max-width:1080px}
.metric-title{font-size:52px;letter-spacing:.05em;line-height:1.22}
/* Figma (node 1659:11551): 14px, line-height 34px (espaciado AMPLIO), ancho
612px → 5 líneas (antes lh 1.8 + 720 daba 4 líneas apretadas) */
.metric-body{font-size:14px;max-width:612px;line-height:34px;letter-spacing:.25em}
/* Figma: las 2 cards van LADO A LADO en desktop (no apiladas) */
.metric-cards{flex-direction:row;justify-content:center;align-items:stretch;gap:28px;margin-top:40px}
/* Eyebrows más grandes en desktop (Figma ~16-18px PP Model Mono Light) */
.eyebrow{font-size:15px;letter-spacing:.2em}
/* Starki */
.starki{padding:80px var(--pad-x) 60px}
/* Edmond: un poco más bold y más grande */
.starki-title{font-size:58px;letter-spacing:.115em;font-weight:600}
/* "Conoce a tu agente" más pegado al título */
.starki .eyebrow{margin-bottom:6px}
/* PRÓXIMAMENTE (node 1746:6): 19.8px Mono Medium, solapa la parte baja de STARKI */
.starki-pill{font-size:19.8px;letter-spacing:2.18px;padding:8px 28px;margin-top:-14px}
.starki-figure{max-width:600px}
/* Pills ancladas al CENTRO (≈±300px = borde del robot de 600px), así
ABRAZAN al robot a cualquier ancho de viewport (antes left:2%/right:-6%
las mandaba a los bordes de la pantalla). Más grandes (Figma). */
/* Pills MÁS GRANDES, con más span y más glow (Figma) */
.sk-pill{display:block;font-size:13px;padding:14px 24px;letter-spacing:.18em;box-shadow:0 0 40px rgba(85,202,0,.7),0 0 12px rgba(85,202,0,.5)}
.sk-pill-1{top:17%;left:calc(50% - 312px)}
.sk-pill-2{top:29%;right:calc(50% - 300px)}
.sk-pill-3{top:47%;left:calc(50% - 332px)}
.sk-pill-4{top:56%;right:calc(50% - 308px)}
/* Productos — 3-column desktop layout */
.products{padding:100px var(--pad-x) 60px;max-width:1280px;margin:0 auto}
.section-title{font-size:54px;margin-bottom:18px;letter-spacing:.04em}
/* Figma (node 1752:11): 14px / lh 20px / blanco, ANCHO que fuerza 2 líneas
("Da click a los botones para conocer" / "más de nuestros productos.") */
.products-sub{font-size:14px;line-height:20px;max-width:365px;margin-bottom:60px}
/* Textos PEGADOS al cohete, con offset vertical como Figma */
.products-layout{flex-direction:row;align-items:flex-start;justify-content:center;gap:12px}
.products-text{
display:block;flex:0 0 195px;
font-family:var(--font-mono);font-size:11px;line-height:1.7;
color:var(--text-mid);text-align:left;
}
.products-text-l{margin-top:190px;text-align:right}
.products-text-r{margin-top:600px}
.products-text p{margin:0 0 16px}
/* Figma: "Foodbot: tecnología real…" va en peso NORMAL (Light), no negrita */
.products-text .pt-tag{color:#fff;font-weight:300;letter-spacing:.04em}
.products-grid{width:255px;max-width:255px;margin:0}
.products-tail{display:none}
/* Clients — desktop: 4 cards with logos + quotes */
.clients{padding:90px var(--pad-x)}
.clients-heading-mobile{display:none}
.clients-heading-desktop{display:block}
.clients-heading{font-size:13px}
/* Slider — desktop: muestra siempre 3 cards centrados, con drag + dots clickeables.
max-width = 3×270 + 2×24 = 858px. Las 6 marcas se navegan en 2 páginas. */
.slider{
justify-content:flex-start;flex-wrap:nowrap;
max-width:858px;margin:0 auto;gap:24px;padding:64px 0 10px; /* un poco más de aire heading→logos */
overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
cursor:grab;user-select:none;
}
.slider:active{cursor:grabbing}
.slider::-webkit-scrollbar{display:none}
/* Figma desktop: card 246x325 GLASS r41.5, quote Mono Medium 14/17 blanca */
/* Marcas (nuevo): SOLO logos, cards RECTANGULARES, translúcido + outerglow
más intenso. Hover verde (se mantiene). Sin textos. */
.client-card{
flex:0 0 250px;min-height:120px;padding:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.1);
border-radius:22px;text-align:center;
box-shadow:0 0 28px rgba(255,255,255,.08),0 0 1px rgba(255,255,255,.2);
scroll-snap-align:start;
}
.dots span{cursor:pointer}
.c-logo{height:38px;width:auto;margin:0}
.c-quote,.c-author{display:none} /* solo logos */
/* Pricing */
.pricing{padding:60px var(--pad-x) 40px;max-width:1080px;margin:0 auto}
/* Figma plan card (frame 1655:2254): total ~532px (rocket 129 + texto ~324).
Antes ~640px → "demasiado espacio". Compacto y centrado, tamaños EXACTOS. */
.pricing-layout{flex-direction:row;justify-content:center;align-items:flex-start;gap:44px;max-width:540px}
.pricing-rocket{width:132px;align-self:flex-start;margin-top:-6px}
.pricing-card{
flex:0 0 auto;
background:transparent;border:0;
border-radius:0;padding:6px 0 0;max-width:330px;
}
/* NUEVO (notas 19-jun): título de paquete sobre PLASTA VERDE */
.plan-name{display:inline-block;font-size:18px;letter-spacing:.01em;text-transform:none;margin:0 0 22px;font-weight:500;
color:#fff;background:var(--green-soft);padding:8px 28px;border-radius:999px;box-shadow:0 0 24px rgba(85,202,0,.5)}
/* Features: check (izq) + label + símbolo "+" (der, rota en hover, abre la tarjeta del producto) */
/* líneas más JUNTAS (gap chico) como el SS */
.plan-features{gap:6px;margin:0 0 22px}
.plan-features li{font-size:12px;letter-spacing:.01em;font-weight:500;display:flex;align-items:flex-start;gap:8px;line-height:1.25}
.plan-features li::before{width:14px;height:14px;margin-top:1px;filter:drop-shadow(0 0 5px rgba(85,202,0,.5))}
.feat-label{flex:1} /* el texto ocupa la fila; el "+" va inline DENTRO, tras la última palabra */
/* "+" BLANCO, inline justo después del texto (incluso si se parte en 2 líneas); rota en hover */
.feat-plus{display:inline;font-family:var(--font-mono);font-size:15px;line-height:1;color:#fff;
background:none;border:0;padding:0;margin:0;cursor:pointer;vertical-align:baseline;
transition:transform .25s ease,color .2s,filter .2s;filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
.feat-plus:hover{transform:rotate(135deg);color:var(--green-soft);filter:drop-shadow(0 0 9px rgba(85,202,0,.85))}
/* Precio AHORA debajo del listado (Figma nuevo) */
.plan-price{font-size:38.25px;letter-spacing:-2px;gap:7px;margin:0 0 12px;text-shadow:0 0 12px rgba(255,255,255,.35)}
.plan-period{font-size:9px;letter-spacing:.03em;align-self:flex-start;text-transform:none;margin-top:5px;line-height:1.35}
/* Nota nueva (reemplaza "*Instalación del sistema") */
.plan-note{font-size:11px;letter-spacing:.02em;line-height:1.55;max-width:240px;margin-top:2px;color:#fff}
/* Figma: timeline ≈335px (antes 520 = demasiado ancha) */
.timeline{max-width:340px;margin-top:60px}
/* Figma: "//CONSTRUYE TU COHETE//" 15px tracking 5px con glow suave, MISMO
ancho que la línea (~335px) */
.pricing .lbl.center{font-size:15px;letter-spacing:5px;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.55);margin-top:64px}
/* CTA */
.cta{min-height:760px;padding:160px var(--pad-x)}
.cta-title{font-size:24px;letter-spacing:.25em;line-height:1.5}
.cta-w{display:inline} /* desktop: all words inline */
/* Footer */
.footer{padding:40px 48px 110px;font-size:11px;letter-spacing:0}
.footer-right{max-width:none}
.footer-sep{display:inline}
.footer-rights{display:inline;margin:0}
/* Demo modal */
.demo-wrap{max-width:1200px;padding:0}
/* Side card centrado verticalmente respecto al main (Carlos 27/may) */
.demo-step.active:not(.demo-step-success){flex-direction:row;align-items:center;gap:24px}
.demo-step-success.active{display:flex !important;flex-direction:column !important;align-items:center;justify-content:center;width:100%}
.demo-card-main{flex:1 1 auto;max-width:780px;padding:30px 36px}
.demo-card-side{flex:0 0 320px;padding:28px 26px}
.demo-cols{grid-template-columns:1fr 1fr;gap:36px}
.demo-close{top:30px;right:30px;width:56px;height:56px}
.slots{max-height:none}
.product-modal{max-width:480px;padding:48px 44px 40px}
.pm-title{font-size:50px}
.pm-tagline{font-size:14px}
}
/* =========================================================
LARGE DESKTOP ≥ 1280px
========================================================= */
@media (min-width:1024px){
/* === Figma Desktop HD (frame 1280) — tamaños EXACTOS desde 1024 === */
.hero-title{font-size:68px;line-height:.95}
.metric-title{font-size:55px;line-height:1.236}
/* Figma desktop: STARKI = Gotham Medium 65px tracking 15px (.23em); sub web = Montserrat 500 */
/* Edmond: un poco más bold (600) y más grande (70px) */
.starki-title{font-family:'Montserrat',var(--font-display),sans-serif;font-weight:600;font-size:70px;letter-spacing:.23em;padding-left:.23em}
.section-title{font-size:65px;letter-spacing:.04em} /* PRODUCTOS */
.hero-desc{font-size:26.4px;letter-spacing:.175em;line-height:1.5}
.clients-heading{font-size:16.8px;letter-spacing:.214em}
.metric .eyebrow{font-size:18px;letter-spacing:.194em}
.starki .eyebrow{font-size:18px;letter-spacing:.194em}
.products .eyebrow{font-size:18px;letter-spacing:.194em}
.cta-title{font-size:24px}
}
/* =========================================================
CAMBIOS NOTAS CARLOS 27/may — bloque consolidado
========================================================= */
/* --- Botones del cohete de productos: pulso de opacidad para llamar la atención (Carlos pidió pulsado) --- */
.p-dot{animation:p-dot-pulse 2.2s ease-in-out infinite}
.p-card:nth-of-type(2) .p-dot{animation-delay:.18s}
.p-card:nth-of-type(3) .p-dot{animation-delay:.36s}
.p-card:nth-of-type(4) .p-dot{animation-delay:.54s}
.p-card:nth-of-type(5) .p-dot{animation-delay:.72s}
.p-card:nth-of-type(6) .p-dot{animation-delay:.9s}
.p-card:nth-of-type(7) .p-dot{animation-delay:1.08s}
.p-card:nth-of-type(8) .p-dot{animation-delay:1.26s}
.p-card:nth-of-type(9) .p-dot{animation-delay:1.44s}
.p-card:nth-of-type(10) .p-dot{animation-delay:1.62s}
.p-card:nth-of-type(11) .p-dot{animation-delay:1.8s}
.p-card:nth-of-type(12) .p-dot{animation-delay:1.98s}
.p-card:nth-of-type(13) .p-dot{animation-delay:2.16s}
@keyframes p-dot-pulse{
0%,100%{opacity:.55;box-shadow:0 0 6px rgba(85,202,0,.5)}
50% {opacity:1; box-shadow:0 0 14px rgba(85,202,0,.95),0 0 26px rgba(85,202,0,.4)}
}
@media (prefers-reduced-motion: reduce){
.p-dot{animation:none}
}
/* --- Mini-header flotante en móvil (sigue al usuario por toda la página). Aparece tras pasar el hero. --- */
.mobile-sticky{
position:fixed;top:0;left:0;right:0;z-index:90;
display:flex;align-items:center;justify-content:space-between;
padding:10px 16px;
background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.65) 70%,transparent);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
transform:translateY(-110%);opacity:0;
transition:transform .35s ease, opacity .35s ease;
pointer-events:none;
}
.mobile-sticky.is-on{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-sticky-logo{display:flex;align-items:center}
.mobile-sticky-logo img{width:130px;height:auto;display:block}
.mobile-sticky-btn{
display:inline-flex;align-items:center;gap:7px;
background:var(--green-soft);color:#fff;
border:0;border-radius:999px;
padding:5px 18px 5px 5px;
font-family:var(--font-mono);font-weight:500;font-size:13px;
box-shadow:0 0 18px rgba(85,202,0,.35);
}
.mobile-sticky-btn .btn-ico{width:26px;height:26px}
.mobile-sticky-btn span{color:#fff;letter-spacing:.02em}
@media (min-width:1024px){
/* En desktop el header normal ya es sticky — esta barra solo existe para móvil */
.mobile-sticky{display:none}
}
/* --- Spotlight verde que sigue al cursor en la sección VENDE → GENERA DATA → ... (Carlos 27/may) --- */
.flow{position:relative}
.flow-cursor-glow{
display:none;position:absolute;top:50%;left:75%;
width:280px;height:280px;border-radius:50%;
pointer-events:none;z-index:0;
background:radial-gradient(circle,rgba(85,202,0,.95) 0%,rgba(85,202,0,.5) 22%,rgba(85,202,0,.18) 50%,transparent 75%);
filter:blur(8px);
transform:translate(-50%,-50%);
/* Idle = invisible (en Figma solo hay UN glow, el del step activo).
Antes el spotlight se aparcaba sobre el step activo ENCIMA del fs-glow
→ doble radial ("dos mallas"). Solo aparece con el cursor dentro. */
opacity:0;
transition:left .15s linear, top .15s linear, opacity .35s ease, width .2s ease, height .2s ease;
}
@media (min-width:1024px){
.flow-cursor-glow{display:block}
.flow.is-cursor-active .flow-cursor-glow{opacity:1}
/* Cuando el cursor está en el spotlight, ocultamos los glow por-step (los reemplaza el spotlight global) */
.flow.is-cursor-active .fs-active .fs-glow{opacity:0}
}
@media (prefers-reduced-motion: reduce){
.flow-cursor-glow{transition:none}
}
/* --- Mobile: la fila VENDE → GENERA DATA → AGENTE USA ESA DATA → TU RESTAURANTE VENDE MÁS se vuelve scrollable horizontal (Carlos pidió swipe) --- */
@media (max-width:1023px){
.flow{overflow:hidden;padding:30px 0}
.flow-steps{
overflow-x:auto;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
padding:0 32%;gap:18px;max-width:none;
}
.flow-steps::-webkit-scrollbar{display:none}
.fs-step,.fs-arrow{flex:0 0 auto;scroll-snap-align:center}
/* Mostrar los 4 pasos en móvil también (Carlos quería ver el resto al hacer swipe) */
.fs-desktop{display:inline-flex}
.fs-arrow.fs-desktop{display:inline-flex;align-items:center}
}
/* --- Galaxia "HAGAMOS EL VIAJE JUNTOS": gira lento en órbita (90s), como
estaba en el diseño aprobado. El keyframe arranca/termina en el mismo
translate(-50%,-50%) que mantiene el centro sobre el título. --- */
.cta-galaxy{animation:cta-galaxy-rotate 90s linear infinite}
@keyframes cta-galaxy-rotate{
from{transform:translate(-50%,-50%) rotate(0)}
to {transform:translate(-50%,-50%) rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){
.cta-galaxy{animation:none}
}
/* --- Móvil pricing: el cohete NO se desvanece con el scroll (Carlos 27/may
"apenas voy viendo la info y el cohete ya se está desapareciendo"). En
móvil el cohete queda siempre visible mientras se lee la card de pricing. --- */
@media (max-width:1023px){
.pricing-rocket img{opacity:1 !important;transform:none !important}
}
/* --- Demo modal en móvil: que la card lateral (Demo · Detalles de la reunión) NO se haga gigante, mantener compacta --- */
@media (max-width:1023px){
/* La transición del demo-card aplica también en móvil (igual aplica el rule de modal.open) */
.demo-card-side{padding:22px 20px}
}
/* =========================================================
RITMO VERTICAL FIGMA (jun-2026) — paddings resueltos por
solver Playwright contra las Y exactas de los frames
1306:1223 (móvil 414) y 1655:2 (desktop 1280).
Resultado: móvil 6884px vs Figma 6858px (99.6%).
========================================================= */
.hero-desc{padding-top:143px}
.flow-steps{margin-top:92px}
.metric{padding-top:97px}
.starki{padding-top:89px}
.starki-figure{max-width:337px} /* Figma móvil: robot 337x440 */
.products{padding-top:113px}
.clients{padding-top:292px;padding-bottom:24px}
.slider{padding-top:16px}
.pricing{padding-top:302px}
.cta{padding-top:388px}
@media (min-width:1024px){
.hero-desc{padding-top:69px}
.flow-steps{margin-top:0px}
.metric{padding-top:199px}
.starki{padding-top:140px}
.starki-figure{max-width:668px} /* Figma desktop: robot 668x873 */
.products{padding-top:166px}
/* Marcas (Edmond): heading→logos POCO, logos→dots MÁS (ver .dots), y
dots→paquetes poco (antes 230 = demasiado). */
.clients{padding-top:88px;padding-bottom:40px}
.slider{padding-top:42px} /* heading→logos (8px era demasiado pegado) */
.dots{margin-top:72px} /* logos→dots */
.pricing{padding-top:272px}
/* CTA: título a 549px del top; galaxia CENTRADA en el título como Figma
(centro galaxia y≈7256 ≈ centro título y≈7240). Centro título =
549 + (24px*1.5)/2 ≈ 567px. min-height ajustada a la EXTENSIÓN real de la
galaxia (centro 567 + radio visible ≈613 ≈ 1180px) + ~30px de margen, para
que NO sobre espacio negro debajo (Edmond: "mucho espacio al final").
Figma: el footer queda ~523px bajo el centro del título → cta bottom =
549+18+523 ≈ 1090px (así el footer sube y las anillas tenues de la galaxia
casi lo tocan, como el diseño). */
.cta{padding-top:549px;min-height:1090px}
.cta-galaxy{top:567px}
.cta-orbits{top:567px}
}