/* ==========================================================================
   MORATEC — mundo visual "La pantalla encendida" (registro fijado por Diego:
   oscuro, cinematografico, luz morada; nivel Apple / Linear / Vercel)
   La luz sale de las seis pantallas reales y del morado, el sello de la marca.
   Fondo violeta-negro (nunca #000), tipografia Geist en caja normal, capas con
   profundidad, un scroll que cuenta la historia. Contrato JS→CSS: se conservan
   los ids/clases que engancha js/site.js; breakpoints compartidos: 768 y 1024.
   ========================================================================== */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/Geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Fallback";src:local("Helvetica Neue"),local("Arial");
  ascent-override:100.5%;descent-override:29.5%;line-gap-override:0%;size-adjust:104%}

:root{
  --bg:#07050E;--bg-2:#0D0918;--bg-3:#150F26;
  --surface:rgba(255,255,255,.035);--surface-2:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09);--border-2:rgba(255,255,255,.16);
  --text:#F5F2FB;--muted:#A79FB8;--dim:#8E86A3;
  --morado:#9333EA;--morado-luz:#C084FC;--morado-pastel:#E9D5FF;--morado-hondo:#4C1D95;
  --wa:#25D366;--wa-ink:#052E16;
  --font:"Geist","Geist Fallback",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ancho:1200px;--gutter:clamp(16px,4vw,40px);
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:88px;--s7:160px;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:14px;--r-lg:22px;
  --glow:0 0 0 1px rgba(192,132,252,.18),0 30px 90px -30px rgba(147,51,234,.55);
  --nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:1.0625rem;line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}img{height:auto}
a{color:var(--morado-luz);text-decoration-thickness:1px;text-underline-offset:.2em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
strong,b{font-weight:600;color:var(--text)}
p{margin:0}
::selection{background:rgba(147,51,234,.45);color:#fff}
:focus-visible{outline:2px solid var(--morado-luz);outline-offset:4px;border-radius:6px}
section[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.container{width:min(var(--ancho),100% - 2*var(--gutter));margin-inline:auto}
html{scrollbar-color:var(--morado-hondo) var(--bg)}

/* Tipografia: Geist como en Vercel, caja normal, tracking apretado a tamaño grande. */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;color:var(--text)}
h1{font-size:clamp(2.5rem,4.6vw,4rem);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(1.95rem,3.4vw,2.85rem)}
/* .titulo-ficha: un titulo con aspecto de h3 cuyo nivel real depende de la
   pagina (en las interiores cuelga del h1, asi que es h2). */
h3,.titulo-ficha{font-size:clamp(1.25rem,1.7vw,1.5rem);letter-spacing:-.02em;line-height:1.2}
.section-sub{color:var(--muted);font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.55;max-width:58ch;margin-top:var(--s3)}
.section-head{margin-bottom:48px}
.section-head h1{font-size:clamp(1.95rem,3.4vw,2.85rem);letter-spacing:-.03em;line-height:1.04}
.section-head.center{text-align:center}.section-head.center .section-sub{margin-inline:auto}
.kicker{display:none}
/* Texto largo en escritorio y corto en celular (el chip del hero cabe en una linea). */
.solo-movil{display:none}
@media (max-width:768px){.solo-ancho{display:none}.solo-movil{display:inline}}
/* Una frase encendida por titulo (color solido con luz, nunca degradado). */
.lit{color:var(--morado-luz);font-weight:inherit;text-shadow:0 0 40px rgba(192,132,252,.35)}
.num,.stat b,time,.dia-n{font-variant-numeric:tabular-nums}
main>section{padding-block:var(--s6);position:relative}
/* Fondo solido en las secciones: el abanico del hero nunca se transparenta
   detras de ellas al bajar. */
main>section:not(.hero){background:var(--bg);z-index:1}
/* Bandas: una seccion si y otra no va un tono mas clara, con filete arriba y abajo y
   un poco de luz morada al entrar. Asi cada seccion se lee como un bloque aparte. */
main>section:not(.banda):not(.hero)+#oferta{border-top:1px solid var(--border)}
main>section.banda{background:linear-gradient(180deg,rgba(147,51,234,.07),transparent 360px),var(--bg-2);border-block:1px solid var(--border)}
.hero{z-index:0}
@media (max-width:768px){main>section{padding-block:56px}}

.skip-link{position:absolute;left:12px;top:-60px;background:var(--morado);color:#fff;padding:10px 16px;font-weight:600;z-index:100;transition:top .2s}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Hooks del JS */
.gsap-ready .reveal,.gsap-ready .reveal-stagger>*{opacity:0}
/* El primer pintado ya es el estado "antes de entrar". Hasta que GSAP toma el
   control (.gsap-ready), lo que va a entrar se pinta escondido. Antes se pintaba
   en su sitio, GSAP lo escondia ~medio segundo despues y lo volvia a hacer
   entrar: la animacion "doble" en visitas con la cache vacia (abanico, su luz,
   boton de WhatsApp, encabezados). GSAP pone su estado inicial en la misma
   tarea en que añade .gsap-ready, asi que entre una cosa y otra no hay fotograma.
   Con reduced-motion no aplica; sin JS lo devuelve css/sin-js.css; y si el JS no
   llegara a arrancar, el rescate lo muestra a los 6 s (no antes: en un 3G lento
   GSAP puede tardar, y un rescate temprano provocaria justo la entrada doble). */
@media (prefers-reduced-motion:no-preference){
  html:not(.gsap-ready):not(.sin-gsap) :is(main .reveal:not(.hero .reveal),main .reveal-stagger>*,main h2:not(.titulo-ficha),.hechos,.giros-chips,.hero .toast,.wa-float,#sobre-mi .about-bento>*,main .faq-item,.compare-col li){opacity:0;animation:rescate-visible 0s 6s forwards}
}
@keyframes rescate-visible{to{opacity:1}}
/* Con GSAP ya al mando, lo que espera su entrada lleva .por-entrar (la pone
   site.js y cada elemento la suelta al arrancar su animacion). El CSS lo
   mantiene escondido aunque un refresh de ScrollTrigger deshaga el estado
   inicial de GSAP: en Vercel pasaba con las cartas del abanico. */
.gsap-ready .por-entrar{opacity:0}
/* Los pasos de la escena fija conservan en CSS su estado de partida. */
@media (min-width:1025px){
  .gsap-ready .por-encender{transform:translateY(16px) scale(.97)}
  .gsap-ready .por-encender .step-num{transform:scale(.86);background:#150F26;color:#A79FB8;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
}
/* En celular y tablet los pasos entran con el scroll (en escritorio los enciende la
   escena fija y se ven desde el inicio). */
@media (max-width:1024px) and (prefers-reduced-motion:no-preference){
  html:not(.gsap-ready):not(.sin-gsap) #proceso .step{opacity:0;animation:rescate-visible 0s 6s forwards}
}
/* Los pasos de /como-trabajo/ (escena fija, ≥1025) se pintan ya un poco abajo y
   con el numero apagado: es el estado desde el que GSAP los enciende. */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  html:not(.gsap-ready):not(.sin-gsap) #proceso .step{transform:translateY(16px) scale(.97)}
  html:not(.gsap-ready):not(.sin-gsap) #proceso .step-num{transform:scale(.86);background:#150F26;color:#A79FB8;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
}
.hero .reveal{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important}
  .spotlight,.ambient i{display:none}   /* elementos de escena: sin movimiento no aportan */
}
/* Transiciones nativas entre paginas (Chrome/Edge 126+, Safari 18.2+; el resto
   navega normal). La barra se queda quieta y la pantalla de cada sistema viaja
   de la ficha de la portada al hero de su pagina por giro. Cada nombre va UNA
   vez por pagina, o el navegador salta la transicion entera. Solo con movimiento. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
  .nav{view-transition-name:barra}
  .vt-imprenta{view-transition-name:pantalla-imprenta}.vt-taller{view-transition-name:pantalla-taller}
  .vt-comida{view-transition-name:pantalla-comida}.vt-fisio{view-transition-name:pantalla-fisio}
  .vt-rehab{view-transition-name:pantalla-rehab}.vt-coach{view-transition-name:pantalla-coach}
}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--morado),var(--morado-luz));
  transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}

/* Luz ambiental: dos focos morados que derivan muy despacio. Es luz, no decoracion:
   sin ella el negro es plano; con ella la pagina tiene profundidad. */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:
  radial-gradient(60% 50% at 50% 0%,rgba(147,51,234,.22),transparent 70%)}
/* Los focos son degradados, no circulos desenfocados. `filter:blur(90px)` sobre
   una capa de 60vw obliga a recomponerla en cada fotograma del scroll: medido,
   era la causa del tiron (18% de fotogramas perdidos con el, 2% sin el). Un
   radial-gradient da la misma luz difusa y la GPU solo lo mueve. */
.ambient i{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.ambient .l1{width:96vw;height:96vw;left:-30vw;top:-34vw;
  background:radial-gradient(closest-side,rgba(147,51,234,.55),rgba(147,51,234,.16) 45%,transparent 72%);
  animation:deriva1 34s ease-in-out infinite alternate}
.ambient .l2{width:74vw;height:74vw;right:-24vw;top:26vh;
  background:radial-gradient(closest-side,rgba(59,29,143,.6),rgba(59,29,143,.18) 45%,transparent 72%);
  animation:deriva2 41s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate3d(10vw,14vh,0) scale(1.08)}}
@keyframes deriva2{to{transform:translate3d(-8vw,-10vh,0) scale(.94)}}
.spotlight{position:fixed;left:0;top:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(192,132,252,.16),transparent 62%);mix-blend-mode:screen}

/* ---------- NAV: transparente, cristal al bajar ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(7,5,14,.66);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--border)}
.nav-inner{width:min(var(--ancho),100% - 2*var(--gutter));margin-inline:auto;height:100%;display:flex;align-items:center;gap:var(--s4)}
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);text-decoration:none;font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.logo-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff;
  background:linear-gradient(135deg,var(--morado-luz),var(--morado) 60%,#6D28D9);box-shadow:0 0 0 1px rgba(192,132,252,.35),0 8px 20px -8px rgba(147,51,234,.8)}
.logo-mark svg{width:20px;height:20px}
.nav nav{margin-left:auto}
.nav-links{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.nav-links a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--muted);text-decoration:none;
  font-weight:500;font-size:.95rem;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn).active{color:var(--text);background:var(--surface-2)}
/* Las dos acciones de la barra: fantasma «Ver los sistemas» y el verde de WhatsApp. */
.nav-acciones{display:flex;align-items:center;gap:8px;margin-left:8px}
.menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;color:var(--text);margin-left:auto;border-radius:999px;
  border:1px solid var(--border-2);background:var(--surface);font-weight:600;font-size:.95rem}
@media (max-width:1024px){
  .nav-inner{gap:var(--s2)}
  .nav nav{position:absolute;left:0;right:0;top:var(--nav-h);margin:0}
  .nav-links{display:none;flex-direction:column;align-items:stretch;gap:2px;padding:var(--s2) var(--gutter) var(--s3);
    background:rgba(13,9,24,.985);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
  .nav-links.open{display:flex}
  .nav-links a:not(.btn){min-height:52px;font-size:1.15rem;padding:0 12px}
  .nav-acciones{flex-direction:column;align-items:stretch;gap:8px;margin:var(--s2) 0 0}
  .nav-links .nav-acciones .btn{width:100%;min-height:52px;font-size:1rem}
  .nav-links .nav-cta{justify-content:center}
  .menu-btn{display:inline-flex}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap;border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s,background .2s,color .2s,border-color .2s}
.btn-wa{background:var(--wa);color:var(--wa-ink);box-shadow:0 0 0 1px rgba(37,211,102,.3),0 14px 40px -10px rgba(37,211,102,.45)}
.btn-wa:hover{background:#34E57F;color:var(--wa-ink);transform:translateY(-2px);box-shadow:0 0 0 1px rgba(37,211,102,.4),0 20px 48px -12px rgba(37,211,102,.6)}
.btn-ghost{border-color:var(--border-2);color:var(--text);background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 18px;font-size:.92rem}
.btn:active{transform:translateY(0)}
/* barrido de luz al pasar */
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease);pointer-events:none}
.btn:hover::after{transform:translateX(120%)}

/* ==========================================================================
   HERO — split: el texto a la izquierda y pantallas reales flotando a la derecha
   (la estructura de un SaaS; las pantallas son capturas de sistemas en uso).
   ========================================================================== */
.hero{min-height:auto;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(28px,5vh,56px)!important;padding-bottom:var(--s4)!important;overflow-x:clip}
main{overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:var(--s5);align-items:center}
.hero-inner{position:relative;z-index:2;max-width:600px}
.hero-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface);border:1px solid var(--border);border-top-color:rgba(255,255,255,.17)}
.hero-chip svg{color:var(--morado-luz);flex-shrink:0}
.hero h1{margin-top:0}
/* La frase que rota va en su propia linea (opcion B: sin rotador, el h1 lleva la clase .h1-fija). */
.hero h1 .rotator{display:grid;justify-items:start;color:var(--morado-luz);text-shadow:0 0 40px rgba(192,132,252,.35)}
.hero h1.h1-fija .rotator>span{display:none}.hero h1.h1-fija .rotator::before{content:"tu negocio";grid-area:1/1}
.rotator>span{grid-area:1/1;display:block;padding-bottom:.12em;margin-bottom:-.12em}
.rotator .sombra{visibility:hidden}
.rotator .in{animation:rotIn .6s var(--ease) both}.rotator .out{animation:rotOut .35s ease-in both}
@keyframes rotIn{from{opacity:0;transform:translateY(.35em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes rotOut{to{opacity:0;transform:translateY(-.35em);filter:blur(6px)}}
.hero-sub{margin:var(--s3) 0 0;font-size:clamp(1.1rem,1.4vw,1.25rem);line-height:1.55;color:var(--muted);max-width:44ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.cta-note{margin-top:var(--s2);font-size:.9rem;color:var(--dim);text-wrap:balance}
.cta-note svg{display:inline-block;vertical-align:-3px;margin-right:6px;color:var(--morado-luz)}
/* Entrada del texto en CSS: desplazamiento y desenfoque, SIN opacidad. Chrome no
   cuenta como LCP un texto que entra con una animacion de opacidad (la
   compone la GPU y nunca lo 'pinta' visible), asi que con el fundido el LCP
   pasaba a ser la primera imagen. Con solo blur y translate el titulo se pinta
   en el primer fotograma y cuenta. Al terminar, .entro la congela: un refresh
   del pin de /como-trabajo/ reiniciaba la animacion y el titulo entraba dos veces. */
.hero-inner>*{animation:heroIn 1s var(--ease) both}
.hero-inner>*:nth-child(2){animation-delay:.08s}.hero-inner>*:nth-child(3){animation-delay:.16s}
.hero-inner>*:nth-child(4){animation-delay:.24s}.hero-inner>*:nth-child(5){animation-delay:.32s}
@keyframes heroIn{from{transform:translateY(22px);filter:blur(8px)}to{transform:none;filter:blur(0)}}
.hero-inner>*.entro,.primera-pantalla>*.entro,.flotante>*.entro{animation:none}
/* Primera pantalla de las paginas interiores: entra por CSS como el hero de la
   portada, asi que el LCP (el titulo, o la captura del hero por giro) se pinta
   en el primer fotograma y nunca espera al JS. Medido en 4G con CPU lenta: el
   titulo pre-ocultado + cortina daba 2.7 s en /trabajo/ y 5.4 s en imprentas. */
.primera-pantalla>*{animation:heroIn 1s var(--ease) both}
.primera-pantalla>*:nth-child(2){animation-delay:.08s}.primera-pantalla>*:nth-child(3){animation-delay:.16s}
.giro-accion.primera-pantalla>*{animation-delay:.16s}.giro-accion.primera-pantalla>*:nth-child(2){animation-delay:.24s}

/* Las pantallas flotantes: una captura grande como tarjeta y recortes reales
   encimados. Cada capa tiene su caja antes de cargar (aspect-ratio, width/height):
   nada brinca. La grande es el LCP en escritorio: no se anima ni se esconde, solo
   destella al encenderse (CSS). */
.flotante{position:relative;z-index:1;--tinte:var(--morado)}
.hero .flotante{aspect-ratio:2/1;margin:7% 0 15% 4%}
.hero .flotante .grande{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;border-radius:16px}
.hero .flotante .grande img{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;object-fit:cover;object-position:0 0}
/* La captura como ventana de app: barra de cristal con tres puntos y el nombre del sistema. */
.ventana-barra{flex:0 0 30px;display:flex;align-items:center;gap:7px;padding:0 12px;position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04)),#1A1330;border-bottom:1px solid rgba(255,255,255,.08)}
.ventana-barra i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.ventana-barra span{flex:1;margin-left:10px;font-size:.78rem;font-weight:500;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flotante .tarjeta{position:absolute;z-index:2;margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.14),0 40px 90px -24px rgba(0,0,0,.95),0 24px 70px -18px color-mix(in srgb,var(--tinte) 60%,transparent)}
.flotante .tarjeta img{width:100%;height:auto;display:block}
.hero .flotante .tarjeta{left:-9%;bottom:-17%;width:min(54%,360px);padding:10px;border-radius:16px;animation:heroIn 1s .3s var(--ease) both;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 40%),rgba(15,11,28,.94);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.2);
  box-shadow:0 40px 90px -24px rgba(0,0,0,.95),0 0 0 1px rgba(147,51,234,.1),0 24px 70px -22px rgba(147,51,234,.55)}
.tarjeta-cab{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:.8rem;font-weight:500;color:var(--muted)}
.tarjeta-i{width:22px;height:22px;flex-shrink:0;border-radius:7px;display:grid;place-items:center;background:rgba(147,51,234,.22);color:var(--morado-luz)}
.hero .flotante .tarjeta img{border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
/* El aviso como notificacion del celular: cae una vez sobre la esquina de la ventana. */
.toast{position:absolute;right:-6%;top:-12%;z-index:3;display:flex;align-items:flex-start;gap:12px;width:min(64%,350px);margin:0;padding:12px 14px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 45%),rgba(22,16,40,.9);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.24);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(147,51,234,.14),0 20px 56px -22px rgba(147,51,234,.6)}
.toast-i{flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--morado-luz),var(--morado) 60%,#6D28D9);box-shadow:0 0 0 1px rgba(192,132,252,.35),0 8px 20px -8px rgba(147,51,234,.9)}
.toast-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.toast-txt b{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.92rem;font-weight:600;color:var(--text);line-height:1.25}
.toast-txt b em{font-style:normal;font-weight:400;font-size:.8rem;color:var(--dim)}
.toast-txt>span{font-size:.86rem;line-height:1.4;color:var(--muted)}
.hero .flotante .grande::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;animation:encendido .9s .25s ease-out both;
  background:linear-gradient(180deg,rgba(255,255,255,.55),color-mix(in srgb,var(--tinte) 35%,#fff) 50%,rgba(255,255,255,.55))}
/* Debajo del hero: los hechos que si podemos decir y los giros que atendemos. */
.hero-base{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--border)}
.hechos{display:flex;flex-wrap:wrap;gap:10px 0;margin:0;padding:0;list-style:none;color:var(--muted);font-size:.95rem}
.hechos li{display:flex;align-items:center;padding:0 22px;border-left:1px solid var(--border-2);line-height:1.3}
.hechos li:first-child{border-left:0;padding-left:0}
.hechos b{font-size:1.2rem;margin-right:6px;color:var(--text)}
.giros-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s3);color:var(--dim);font-size:.95rem}
.giros-chips .chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:.875rem;text-decoration:none;transition:border-color .2s,background .2s}
.giros-chips a.chip:hover{border-color:rgba(192,132,252,.6);background:var(--surface-2)}
/* Cada pantalla ilumina su propio pedazo de fondo con su color: la luz sale de
   las pantallas, no de un foco generico. */
.project{--tinte:var(--morado)}
.projects-grid .project:nth-child(2){--tinte:#4F46E5}
.projects-grid .project:nth-child(4){--tinte:#14B8A6}
.projects-grid .project:nth-child(3){--tinte:#F59E0B}
.projects-grid .project:nth-child(1){--tinte:#6366F1}
.projects-grid .project:nth-child(6){--tinte:#3B82F6}
.projects-grid .project:nth-child(5){--tinte:#A78BFA}
.shot{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.08),0 30px 70px -30px rgba(0,0,0,.85),
  0 26px 80px -14px color-mix(in srgb,var(--tinte) 75%,transparent)}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .hero-inner{max-width:none}
  .hero .flotante{margin:var(--s4) 4% var(--s6) 7%}
}
@media (max-width:768px){
  .hero{padding-top:var(--s3)!important}
  .hero .flotante{aspect-ratio:auto;margin:var(--s3) 0 var(--s4)}
  .hero .flotante .grande{position:relative;inset:auto;aspect-ratio:2/1}
  .hero .flotante .tarjeta{display:none}
  .ventana-barra{flex-basis:24px}.ventana-barra span{display:none}
  .toast{position:relative;right:auto;top:auto;width:100%;margin-top:12px}
  .toast-txt b{font-size:.95rem}.toast-txt b em,.toast-txt>span{font-size:.875rem}
  .hero-ctas .btn{flex:1 1 100%}
  .hechos{flex-direction:column;gap:6px}.hechos li{border-left:0;padding:0}
  .hero-base{margin-top:var(--s4)}
}

/* ==========================================================================
   PROYECTOS — las pantallas grandes
   ========================================================================== */
.proj-bar{margin-top:var(--s4)}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter{min-height:44px;padding:0 16px;border-radius:999px;font-weight:500;color:var(--muted);border:1px solid var(--border);background:var(--surface);
  display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s,border-color .2s}
.filter .n{font-size:.85rem;color:var(--dim)}
.filter:hover{color:var(--text);border-color:var(--border-2)}
.filter[aria-pressed="true"]{color:#fff;background:var(--morado);border-color:var(--morado);box-shadow:0 10px 26px -12px rgba(147,51,234,.8)}
.filter[aria-pressed="true"] .n{color:rgba(255,255,255,.75)}
/* Aviso de datos: una linea de 44px que se abre (<details>). Antes era una caja
   grande y en celular dejaba la primera captura fuera de la primera pantalla. */
.aviso-datos{margin:var(--s4) 0 var(--s3);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface);border:1px solid var(--border);border-top-color:rgba(255,255,255,.17)}
.aviso-datos summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;cursor:pointer;list-style:none;
  color:var(--muted);font-size:.95rem;line-height:1.4}
.aviso-datos summary::-webkit-details-marker{display:none}
.aviso-datos summary svg{flex-shrink:0;color:var(--morado-luz)}
.aviso-mas{margin-left:auto;padding-left:8px;color:var(--morado-luz);font-weight:600;white-space:nowrap}
.aviso-datos[open] .aviso-mas{display:none}
.aviso-datos summary:hover{color:var(--text)}
.aviso-datos p{padding:0 14px 14px 42px;color:var(--muted);font-size:.95rem;max-width:72ch}
/* En celular los filtros van en una sola fila desplazable (como la tira del abanico):
   44px de alto en vez de dos renglones, y la primera captura entra en la primera pantalla. */
@media (max-width:768px){
  #proyectos .section-head{margin-bottom:var(--s4)}
  .proj-bar{margin:var(--s3) calc(-1*var(--gutter)) 0;padding:6px var(--gutter)}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter)}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;scroll-snap-align:start}
}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.project{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 14px 22px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);transform-style:preserve-3d;transition:border-color .35s,background .35s}
.project{box-shadow:0 34px 100px -28px color-mix(in srgb,var(--tinte) 45%,transparent)}
.project:hover{border-color:rgba(192,132,252,.4);background:var(--surface-2);box-shadow:0 40px 110px -24px color-mix(in srgb,var(--tinte) 65%,transparent)}
.project.hide{display:none}
.project.ultima{grid-column:1/-1;max-width:calc(50% - var(--s4)/2)}
.shot-wrap{order:-1;position:relative;--flash:0;--pulso:0}
.shot{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-3)}
.shot-img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.project:hover .shot-img{transform:scale(1.03)}
.shot-cap{padding:8px 12px;font-size:.82rem;color:var(--dim);border-top:1px solid var(--border)}
.shot-cap::first-letter{text-transform:uppercase}
.project h3,.project .titulo-ficha{padding:0 8px}
.project p{color:var(--muted);font-size:1rem;line-height:1.5;padding:0 8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;padding:0 8px}
.chip{font-size:.8rem;font-weight:500;padding:5px 10px;border-radius:999px;border:1px solid var(--border-2);color:var(--text)}
.chip.neutral{color:var(--muted);border-color:var(--border)}
.ver-mas{display:inline-flex;align-items:center;gap:8px;min-height:52px;margin-top:var(--s5);padding:0 24px;border-radius:999px;border:1px solid var(--border-2);
  background:var(--surface);font-weight:600;color:var(--text);text-decoration:none;transition:background .2s,border-color .2s,transform .3s var(--ease)}
.ver-mas:hover{background:var(--surface-2);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
@media (max-width:768px){.projects-grid{grid-template-columns:1fr}.project.ultima{max-width:none}}
/* Portada: los seis en tres columnas; en celular, una tira desplazable con snap. */
.projects-grid.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.projects-grid.tres .project p{font-size:.95rem}
@media (max-width:1024px){.projects-grid.tres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .projects-grid.tres{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:var(--s1) var(--gutter) var(--s3);margin-inline:calc(-1*var(--gutter))}
  .projects-grid.tres::-webkit-scrollbar{display:none}
  .projects-grid.tres .project{flex:0 0 78%;scroll-snap-align:center}
}

/* ==========================================================================
   OFERTA — la escena de los siete dias
   ========================================================================== */
#oferta{padding-block:var(--s6)}
.offer-box{position:relative;text-align:left;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:center;padding:clamp(32px,5vw,64px) clamp(20px,5vw,64px);
  border-radius:32px;border:1px solid rgba(192,132,252,.22);overflow:hidden;
  background:linear-gradient(180deg,rgba(147,51,234,.18),rgba(13,9,24,.6) 60%,rgba(13,9,24,.9))}
.offer-box::before{content:"";position:absolute;left:50%;top:-30%;width:80%;height:70%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(147,51,234,.5),transparent 70%);filter:blur(40px);pointer-events:none}
.offer-box>*{position:relative}
.offer-box .big{color:var(--morado-luz);text-shadow:0 0 50px rgba(192,132,252,.4)}
.offer-box .section-sub{margin-inline:0}
.offer-txt>*{position:relative}
/* siete dias que se encienden con el scroll */
/* 7 columnas iguales: los circulos quedan a la misma distancia sin importar el largo de su etiqueta;
   la linea va del centro del primer circulo (100%/14) al centro del ultimo */
.dias-luz{display:flex;align-items:flex-start;max-width:720px;margin:var(--s5) auto 0;position:relative}
.dias-luz::before{content:"";position:absolute;left:calc(100%/14);right:calc(100%/14);top:22px;height:2px;background:var(--border-2);z-index:0}
.dias-luz .rastro{position:absolute;left:calc(100%/14);top:22px;height:2px;width:calc(100% - 100%/7);background:linear-gradient(90deg,var(--morado),var(--morado-luz));
  transform:scaleX(var(--p,0));transform-origin:left;box-shadow:0 0 18px var(--morado-luz);z-index:0}   /* --p: avance con el scroll (site.js) */
.dia-luz{position:relative;z-index:1;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.dia-luz i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:.95rem;
  background:var(--bg-2);border:1px solid var(--border-2);color:var(--muted);transition:background .4s,color .4s,box-shadow .4s,border-color .4s,transform .4s var(--ease)}
.dia-luz span{font-size:.78rem;color:var(--dim);white-space:nowrap}
.dia-luz.on i{background:var(--morado);border-color:var(--morado-luz);color:#fff;box-shadow:0 0 0 4px rgba(147,51,234,.25),0 0 30px rgba(192,132,252,.7);transform:scale(1.08)}
.dia-luz.on span{color:var(--text)}
.dia-luz.fin.on i{background:var(--wa);border-color:var(--wa);color:var(--wa-ink);box-shadow:0 0 0 4px rgba(37,211,102,.22),0 0 30px rgba(37,211,102,.7)}
/* Columna centrada con las palomitas alineadas: las tres miden 846px y la caja deja
   ~820, asi que en fila quedaban 2 + 1 huerfana. */
.offer-points{display:grid;justify-items:start;gap:12px;margin-top:var(--s4);font-weight:500;color:var(--text);text-align:left}
.offer-point{display:inline-flex;align-items:center;gap:8px}.offer-point svg{color:var(--morado-luz);flex-shrink:0}
.offer-box .btn-wa{margin-top:var(--s4);font-size:1.08rem;min-height:58px;padding:0 34px}
.offer-precio{margin:var(--s4) 0 0;color:var(--muted);max-width:60ch}
.offer-mas{margin-top:var(--s2)}.offer-mas a{color:var(--morado-luz);font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:10px 0;white-space:nowrap}
.offer-proof{margin-top:var(--s3);font-size:.95rem;color:var(--dim);font-variant-numeric:tabular-nums}
.offer-proof b{font-size:1.2rem;margin-right:6px;color:var(--text)}
/* Los siete dias en columna: en la portada van a la derecha de la oferta, sobre la misma linea de luz. */
.offer-dias{padding:var(--s3);border-radius:var(--r);background:rgba(7,5,14,.35);border:1px solid var(--border)}
.offer-dias-t{margin:0 0 var(--s2);font-size:.9rem;font-weight:500;color:var(--morado-luz)}
.dias-luz.vertical{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;width:max-content;max-width:100%;margin:0}
.dias-luz.vertical::before{left:20px;right:auto;top:21px;bottom:21px;width:2px;height:auto}
.dias-luz.vertical .rastro{left:20px;top:21px;width:2px;height:calc(100% - 42px);transform:scaleY(var(--p,0));transform-origin:top}
.dias-luz.vertical .dia-luz{flex:none;flex-direction:row;gap:14px}
.dias-luz.vertical .dia-luz span{font-size:.95rem;white-space:normal}
.dias-luz.vertical .dia-luz i{width:42px;height:42px;font-size:.9rem;flex-shrink:0}
@media (max-width:1024px){.offer-box{grid-template-columns:minmax(0,1fr)}}
@media (max-width:768px){
  .offer-box .btn-wa{width:100%}
  /* En celular los siete dias van en columna, alineados sobre la misma linea de luz, ahora vertical. */
  .dias-luz{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;width:max-content;max-width:100%;margin-inline:auto}
  .dias-luz::before{left:20px;right:auto;top:21px;bottom:21px;width:2px;height:auto}
  .dias-luz .rastro{left:20px;top:21px;width:2px;height:calc(100% - 42px);transform:scaleY(var(--p,0));transform-origin:top}
  .dia-luz{flex:none;flex-direction:row;gap:14px}
  .dia-luz span{font-size:.95rem}
  .dia-luz i{width:42px;height:42px;font-size:.9rem;flex-shrink:0}}

/* ==========================================================================
   QUIENES SOMOS
   ========================================================================== */
.about-bento{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.trust-card{position:relative;padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:var(--s3);overflow:hidden}
.trust-card.about-id{background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface);border-color:var(--border);border-top-color:rgba(255,255,255,.17)}
.trust-card .section-sub{margin-top:0}
.about-txt{display:flex;flex-direction:column;gap:var(--s3)}
/* nombres con guion que no deben partirse al final de la linea (7-Eleven) */
.sin-corte{white-space:nowrap}
.about-txt .section-sub{max-width:62ch}
.trust-card .about-nota{margin:0;padding-top:var(--s3);border-top:1px solid var(--border);font-size:.95rem;max-width:62ch}
@media (min-width:1025px){.trust-card.about-id{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:center;padding:var(--s4) var(--s5)}}
.trust-card p{color:var(--muted)}
@media (max-width:768px){.about-bento{grid-template-columns:1fr}.trust-card{padding:var(--s3)}}

/* ==========================================================================
   DIVIDIDO — titulo fijo a la izquierda (5) y contenido a la derecha (7).
   Mismo esquema que las preguntas de /como-trabajo/; en tablet y celular se apila.
   ========================================================================== */
.dividido{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start}
.dividido .section-head{margin-bottom:0;position:sticky;top:110px}
@media (max-width:1024px){.dividido{grid-template-columns:minmax(0,1fr);gap:var(--s4)}.dividido .section-head{position:static}}

/* ==========================================================================
   DIFERENCIAS — lo que un sistema generico no da. Filas editoriales separadas
   por un filete, no tarjetas iguales: se leen como una lista de promesas.
   ========================================================================== */
.promesas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-bottom:1px solid var(--border)}
.promesa{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s3);align-items:start;padding:var(--s4) 0;border-top:1px solid var(--border)}
.promesa-i{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;color:var(--morado-luz);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface);border:1px solid var(--border);border-top-color:rgba(255,255,255,.17)}
.promesa h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.25}
.promesa p{margin:8px 0 0;color:var(--muted);max-width:56ch}

/* Enlace a todas las preguntas, bajo el titulo de la seccion. */
.preguntas-mas{margin:var(--s3) 0 0}
.preguntas-mas a{color:var(--morado-luz);font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
.preguntas-mas a:hover{text-decoration:underline;text-underline-offset:4px}

/* ==========================================================================
   ARMADOR DEL PRIMER MENSAJE — en el cierre de la portada. Opciones como
   pastillas (mismo lenguaje que los filtros de proyectos: morado al elegir),
   inputs nativos escondidos pero enfocables, y el mensaje armado a la vista.
   ========================================================================== */
.armador{max-width:760px;margin:var(--s5) auto 0;text-align:left;padding:var(--s4);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface);border:1px solid var(--border);border-top-color:rgba(255,255,255,.17);
  display:flex;flex-direction:column;gap:var(--s3)}
.armador-cab h3{font-size:1.35rem;letter-spacing:-.02em;line-height:1.2}
.armador-cab p{margin:6px 0 0;color:var(--muted);font-size:.98rem}
.armador-grupo{margin:0;padding:0;border:0;min-width:0}
.armador-grupo legend{padding:0;margin-bottom:10px;font-size:.95rem;font-weight:500;color:var(--text)}
.armador-pista{font-weight:400;color:var(--dim)}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{position:relative;display:inline-flex}
.opcion input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opcion span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:var(--r-lg);text-wrap:balance;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);font-weight:500;font-size:.95rem;line-height:1.2;pointer-events:none;
  transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.opcion:hover span{color:var(--text);border-color:var(--border-2)}
.opcion input:checked + span{color:#fff;background:var(--morado);border-color:var(--morado);box-shadow:0 10px 26px -12px rgba(147,51,234,.8)}
.opcion input:focus-visible + span{outline:2px solid var(--morado-luz);outline-offset:3px}
/* las de eleccion multiple llevan palomita cuando se eligen */
.opcion-check{display:none;flex-shrink:0}
.opcion input:checked + span .opcion-check{display:block}
.armador-msg{padding:var(--s3);border-radius:var(--r);background:var(--bg-2);border:1px solid var(--border)}
.armador-msg-t{margin:0 0 6px;font-size:.85rem;font-weight:500;color:var(--dim)}
.armador-msg-txt{margin:0;color:var(--text);line-height:1.55;text-wrap:pretty}
.armador-enviar{align-self:center}
@media (max-width:560px){.armador{padding:var(--s3)}.armador-enviar{align-self:stretch}}
/* En la portada el armador va al lado de las preguntas, como tarjeta de contacto. */
.armador-lado .armador{max-width:none;margin:0}.armador-lado .armador-enviar{align-self:stretch}

/* ==========================================================================
   CTA FINAL / FOOTER / MOVIL
   ========================================================================== */
.btn-grande{font-size:1.1rem;min-height:58px;padding:0 34px}
/* Pie: la marca con el WhatsApp y tres columnas de enlaces (paginas, giros,
   donde trabajamos). Cada enlace mide 44px de alto para el dedo; en celular
   el pie guarda 76px abajo para que la barra fija de WhatsApp no lo tape. */
.pie{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--border);padding:var(--s5) 0 calc(var(--s3) + 76px)}
@media (min-width:769px){.pie{padding-bottom:var(--s3)}}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
.pie-marca p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:36ch;margin-top:var(--s2)}
.pie-marca .btn{margin-top:var(--s3)}
.pie-marca .pie-nota{color:var(--dim);font-size:.875rem;margin-top:12px}
.pie-t{font-size:.875rem;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--text);margin-bottom:6px}
.pie-col ul{list-style:none;margin:0;padding:0}
.pie-col a,.pie-col li>span{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:.95rem;line-height:1.35}
.pie-col a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.pie-col a:hover,.pie-col a[aria-current]{color:var(--text)}
.pie-col li>span{color:var(--dim)}
.pie-base{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--border);color:var(--dim);font-size:.875rem}
/* Los titulos de columna a la altura del nombre del logo (44px de alto) */
@media (min-width:1025px){.pie-col{padding-top:13px}}
@media (max-width:1024px){.pie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pie-marca{grid-column:1/-1}}
@media (max-width:560px){.pie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2)}.pie-marca{margin-bottom:var(--s1)}}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));
  background:rgba(7,5,14,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--border);
  transform:translateY(110%);transition:transform .35s var(--ease)}
.mobile-bar.show{transform:none}.mobile-bar .btn{width:100%}
@media (min-width:769px){.mobile-bar{display:none}}
/* Volver arriba: aparece al bajar, encima del boton de WhatsApp. En celular
   se sube por encima de la barra de contacto para no taparla. */
.to-top{position:fixed;right:22px;bottom:94px;z-index:44;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:var(--text);background:rgba(13,9,24,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-2);box-shadow:0 12px 30px -12px rgba(0,0,0,.8);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .25s,background .25s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:rgba(192,132,252,.5);background:rgba(21,15,38,.92)}
@media (max-width:768px){.to-top{display:none}}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:44;width:60px;height:60px;border-radius:50%;background:var(--wa);color:var(--wa-ink);
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(37,211,102,.3),0 14px 34px -10px rgba(37,211,102,.7);transition:transform .3s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
@media (max-width:768px){.wa-float{display:none}}

/* ==========================================================================
   INTERIORES
   ========================================================================== */
.demos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.demo-card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--text);padding:12px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);transition:border-color .3s,transform .4s var(--ease)}
.demo-card:hover{border-color:rgba(192,132,252,.4);transform:translateY(-4px)}
.demo-card img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:var(--r);box-shadow:0 20px 50px -24px rgba(0,0,0,.8)}
.demo-card-body{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 6px 6px}
.demo-tag{font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.demo-go{display:inline-flex;align-items:center;gap:6px;color:var(--morado-luz);font-weight:600;font-size:.95rem}
@media (max-width:768px){.demos-grid{grid-template-columns:1fr}}
/* Cierre de la seccion de demos: quien acaba de recorrerlas ya sabe si quiere una. */
.demos-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s3);margin-top:var(--s5);
  padding:var(--s4) var(--s3);border-radius:var(--r-lg);border:1px solid rgba(192,132,252,.22);
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),linear-gradient(135deg,rgba(147,51,234,.16),rgba(147,51,234,.03));
  border-top-color:rgba(255,255,255,.17)}
.demos-cta p{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
@media (max-width:560px){.demos-cta{flex-direction:column;text-align:center}.demos-cta .btn{width:100%}}
/* proceso: cuatro pasos sobre una linea de luz */
.process-stage{position:relative}
/* Recorrido de la escena fija de los pasos (≥1025 y con movimiento): 85% de la
   ventana, igual que end:"+=85%" en js/site.js (seccion 8). Se reserva aqui y no
   con el pinSpacing de ScrollTrigger, que lo añadia despues del primer pintado y
   empujaba la seccion siguiente (CLS 0.103). Sin JS, css/sin-js.css lo devuelve. */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  html:not(.sin-gsap) #proceso.escena{padding-bottom:calc(var(--s6) + 85vh)}
  /* Lo mismo para la comparativa: 95%, igual que su end:"+=95%". */
  html:not(.sin-gsap) #diferencia.escena{padding-bottom:calc(var(--s6) + 95vh)}
  /* Sin GSAP (.sin-gsap) no hay escenas fijas y no se reserva nada; si el JS no
     llega a arrancar, el rescate quita el recorrido junto con lo demas. */
  html:not(.gsap-ready):not(.sin-gsap) :is(#proceso.escena,#diferencia.escena){animation:rescate-relleno 0s 6s forwards}}
@keyframes rescate-relleno{to{padding-bottom:var(--s6)}}
.process-grid{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);position:relative}
.process-line{position:absolute;left:8%;right:8%;top:50px;height:2px;background:linear-gradient(90deg,var(--morado),var(--morado-luz));box-shadow:0 0 16px var(--morado-luz);transform:scaleX(0);transform-origin:left;z-index:0;padding:0}
.step{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;padding:var(--s3);border-radius:var(--r-lg);background:var(--surface);background-color:#100C1C;border:1px solid var(--border)}
.step-num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:1.2rem;background:var(--morado);color:#fff;box-shadow:0 0 0 4px rgba(147,51,234,.2),0 0 28px rgba(192,132,252,.6)}
.step.free{border-color:rgba(147,51,234,.45)}
.free-tag{position:absolute;right:16px;top:16px;font-size:.8rem;font-weight:600;color:var(--morado-pastel);background:rgba(147,51,234,.22);border:1px solid rgba(192,132,252,.4);border-radius:999px;padding:4px 10px}
.step h3,.step .titulo-ficha{font-size:1.2rem}.step p{color:var(--muted);font-size:.98rem}
@media (max-width:1024px){.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process-line{display:none}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}
/* comparativa: balanza */
.compare-stage{position:relative}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5);position:relative}
.compare-col{position:relative;padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden}
.compare-col.after{border-color:rgba(192,132,252,.3);background:linear-gradient(180deg,rgba(147,51,234,.14),var(--surface) 60%)}
.compare-head{font-weight:600;font-size:1.25rem;letter-spacing:-.02em;margin-bottom:var(--s3);display:flex;align-items:center;gap:10px}
.compare-col.after .compare-head{color:var(--morado-pastel)}
.compare-list{list-style:none;margin:0;padding:0}
.compare-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);color:var(--muted);line-height:1.4}
.compare-list li svg{flex-shrink:0;margin-top:3px}
.compare-col.before li svg{color:#F87171}.compare-col.after li svg{color:var(--morado-luz)}.compare-col.after li{color:var(--text)}
.col-glow{position:absolute;inset:auto -20% -40% -20%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(147,51,234,.5),transparent 70%);filter:blur(30px);opacity:0;pointer-events:none}
.compare-beam{position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%) scaleY(0);transform-origin:top;background:linear-gradient(180deg,var(--morado-luz),transparent);box-shadow:0 0 18px var(--morado-luz);pointer-events:none}
@media (max-width:768px){.compare{grid-template-columns:1fr}.compare-beam{display:none}}
/* FAQ */
#faq .bento{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5)}
#faq .section-head{margin-bottom:0}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);transition:border-color .3s,background .3s}
.faq-item.open,.faq-item:hover{border-color:rgba(192,132,252,.35)}
.faq-item.open{background:var(--surface-2)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);text-align:left;padding:18px 22px;font-weight:600;font-size:1.08rem;letter-spacing:-.01em;min-height:56px;color:var(--text)}
.faq-q .icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-2);color:var(--morado-luz);flex-shrink:0;transition:transform .35s var(--ease),background .3s}
.faq-item.open .faq-q .icon{transform:rotate(45deg);background:var(--morado);color:#fff;border-color:var(--morado)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{color:var(--muted);padding:0 22px 18px;max-width:70ch}
@media (max-width:1024px){#faq .bento{grid-template-columns:1fr;gap:var(--s4)}#faq .section-head{position:static!important}}

/* ---------- Pagina 404 ---------- */
/* Enlaza la misma hoja que el resto del sitio en vez de llevar sus colores en
   atributos style=. Antes los llevaba, y al rediseñar el sitio esta pagina se
   quedo con la paleta vieja: quien caia aqui por un enlace roto veia otra
   marca. Con la hoja compartida no puede volver a desincronizarse. */
.e404{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:var(--s5) var(--gutter)}
.e404-caja{max-width:36rem;display:grid;justify-items:center;gap:var(--s3)}
.e404 .logo{font-size:1.3rem;margin-bottom:var(--s2)}
.e404 .logo-mark{width:44px;height:44px;border-radius:13px}
.e404 .logo-mark svg{width:27px;height:27px}
.e404-num{margin:0;font-size:.82rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--morado-luz)}
.e404 h1{font-size:clamp(2.1rem,5.4vw,3.4rem)}
.e404-txt{margin:0;color:var(--muted);max-width:46ch}
.e404-acciones{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s1)}
.e404-mas{margin:0;font-size:.95rem;color:var(--dim);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px}
/* 44px de alto aunque el texto mida 20: son enlaces para el pulgar. */
.e404-mas a{display:inline-flex;align-items:center;min-height:44px;padding-inline:10px;
  color:var(--morado-luz);text-decoration:none;font-weight:600}
.e404-mas a:hover{text-decoration:underline}
@media (max-width:460px){.e404-acciones{width:100%}.e404-acciones .btn{width:100%}}

/* ==========================================================================
   PAGINAS POR GIRO Y POR CIUDAD (las genera tools/giros.py)
   Mismas piezas que el resto del sitio: el titulo con su luz, las pantallas
   reales con su propio --tinte, recortes de detalle, la jornada del mostrador,
   las promesas, las preguntas y el armador con el giro ya marcado.
   ========================================================================== */
/* El color de la luz de cada sistema (el mismo que en el abanico). */
.s-taller{--tinte:#4F46E5}.s-fisio{--tinte:#14B8A6}.s-comida{--tinte:#F59E0B}
.s-imprenta{--tinte:#6366F1}.s-rehab{--tinte:#3B82F6}.s-coach{--tinte:#A78BFA}

/* Hero: texto a la izquierda, la pantalla real a la derecha; apilado ≤1024. */
.giro-hero{padding-top:clamp(40px,7vh,88px)!important}
.giro-hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:var(--s4);align-items:center}
.giro-hero .section-head{margin-bottom:0}
.giro-hero .section-head h1{font-size:clamp(2.2rem,3.3vw,3.1rem);letter-spacing:-.035em;line-height:1.04}
.giro-hero .section-sub{max-width:52ch}
.h1-accent{color:var(--morado-luz);text-shadow:0 0 40px rgba(192,132,252,.35)}
.giro-accion{margin-top:var(--s4)}
.giro-ctas{display:flex;flex-wrap:wrap;gap:12px}
.giro-accion .cta-note{text-align:left;margin-top:var(--s2)}
/* A 14px la nota cabe en los mismos renglones con Geist y con la fuente de respaldo:
   a .9rem y 320px de ancho la de respaldo ocupaba 3 y Geist 2, y al llegar la
   fuente todo lo de abajo subia 22px (CLS 0.003). */
@media (max-width:768px){.giro-accion .cta-note{font-size:.875rem}}
@media (max-width:1024px){.giro-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
@media (max-width:560px){.giro-ctas .btn{flex:1 1 100%}}

/* Las pantallas. Con dos sistemas, la segunda asoma detras (arriba a la
   derecha, mas oscura): la misma idea que la escalera del abanico. */
/* Sin entrada de opacidad: la captura es el LCP y debe pintarse ya; la pantalla
   solo destella al encenderse (keyframes CSS, sin JS). */
.giro-vista{position:relative}
.pantalla{position:relative;isolation:isolate;margin:0;border-radius:var(--r);overflow:hidden;background:var(--bg-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08),
  0 50px 120px -40px rgba(0,0,0,.9),0 30px 90px -10px color-mix(in srgb,var(--tinte) 55%,transparent)}
.pantalla img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top}
.pantalla figcaption{position:absolute;left:12px;bottom:10px;z-index:3;font-size:.78rem;font-weight:500;color:var(--text);
  background:rgba(7,5,14,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:999px;padding:5px 11px}
.giro-vista.duo{aspect-ratio:100/58}
.giro-vista.duo .pantalla{position:absolute;width:86%}
.giro-vista.duo .atras{right:0;top:0}
.giro-vista.duo .atras::before{content:"";position:absolute;inset:0;z-index:2;background:var(--bg);opacity:.42;pointer-events:none}
.giro-vista.duo .atras figcaption{left:auto;right:12px;bottom:auto;top:10px}
.giro-vista.duo .frente{left:0;bottom:0;z-index:1}
.giro-nota{margin-top:var(--s3);font-size:.85rem;line-height:1.5;color:var(--dim);max-width:60ch}

/* Cada sistema: su ficha aprobada a un lado y recortes de pantalla del otro.
   Los recortes se ven a su tamaño natural (un pixel de captura = un pixel CSS)
   para que se lean; en celular se encogen al ancho. El ancho sale del atributo
   width del HTML (sin width:auto): asi el hueco existe antes de que la imagen
   perezosa cargue y nada brinca al bajar (medido: CLS 0.003 a 320px). */
.giro-sistema{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:center;
  padding-top:var(--s5);margin-top:var(--s5);border-top:1px solid var(--border)}
.giro-sistema:first-of-type{padding-top:0;margin-top:0;border-top:0}
.giro-sistema.alterno{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.giro-sistema.alterno .giro-sistema-txt{order:2}
.giro-sistema h3{font-size:clamp(1.4rem,2vw,1.75rem);letter-spacing:-.025em;line-height:1.15}
.giro-sistema-txt>p{margin-top:var(--s2);color:var(--muted);max-width:52ch}
.giro-sistema .chips{padding:0;margin-top:var(--s3)}
.giro-sistema-txt>.giro-uso{display:flex;align-items:center;gap:8px;margin-top:var(--s3);font-size:.9rem;color:var(--dim)}
.giro-uso svg{flex-shrink:0;color:var(--morado-luz)}
.detalles{display:flex;flex-direction:column;gap:var(--s4)}
.detalle{margin:0;max-width:100%}
.detalle:nth-child(even){align-self:flex-end}
/* En la ficha alterna los recortes van en espejo: el primero, pegado al texto. */
.alterno .detalle:nth-child(odd){align-self:flex-end}.alterno .detalle:nth-child(even){align-self:flex-start}
.detalle img{max-width:100%;height:auto;border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.08),0 30px 70px -30px rgba(0,0,0,.85),
  0 26px 80px -14px color-mix(in srgb,var(--tinte) 60%,transparent)}
.detalle figcaption{margin-top:12px;font-size:.92rem;line-height:1.45;color:var(--muted);max-width:44ch}
@media (max-width:1024px){
  .giro-sistema,.giro-sistema.alterno{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .giro-sistema.alterno .giro-sistema-txt{order:0}
}
@media (max-width:1024px){.alterno .detalle:nth-child(odd){align-self:flex-start}.alterno .detalle:nth-child(even){align-self:flex-end}}
@media (max-width:560px){.detalle:nth-child(n){align-self:stretch}}

/* La jornada: el dia en el mostrador, de arriba abajo. Cada momento se
   enciende (anillo y luz morados) cuando llega a la mitad de la pantalla;
   sin JS o con reduced-motion, todos encendidos. El momento es el inicio de la
   frase del titulo, no una etiqueta encima de el. */
.jornada{list-style:none;margin:0;padding:0}
.momento{position:relative;padding:0 0 var(--s4) 40px}
.momento:last-child{padding-bottom:0}
.momento::before{content:"";position:absolute;left:6px;top:22px;bottom:-2px;width:2px;border-radius:2px;background:var(--border-2);
  transition:background .6s var(--ease)}
.momento:last-child::before{display:none}
.momento::after{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--border-2);transition:background .4s,border-color .4s,box-shadow .5s var(--ease)}
.momento h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.3}
.momento-t{color:var(--dim);transition:color .5s var(--ease)}
.momento p{margin:8px 0 0;color:var(--muted);max-width:56ch}
:is(html:not(.gsap-ready) .momento,.momento.on)::after{background:var(--morado);border-color:var(--morado-luz);
  box-shadow:0 0 0 4px rgba(147,51,234,.25),0 0 30px rgba(192,132,252,.7)}
:is(html:not(.gsap-ready) .momento,.momento.on) .momento-t{color:var(--morado-luz)}
:is(html:not(.gsap-ready) .momento,.momento.on:has(+ .momento.on))::before{background:linear-gradient(180deg,var(--morado-luz),var(--morado))}

/* Las promesas en fila (tres columnas con filete arriba) para no repetir la
   lista con titulo fijo que ya usan la jornada y las preguntas. */
.promesas.en-fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s4);border-bottom:0}
.promesas.en-fila .promesa{grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--s2);padding:var(--s4) 0 0}
/* Titulos de una y de dos lineas sobre la misma linea base: los parrafos
   de las tres columnas arrancan a la misma altura. */
@media (min-width:1025px){.promesas.en-fila .promesa h3{min-height:2.5em;display:flex;align-items:flex-start}}
@media (max-width:1024px){
  .promesas.en-fila{grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--border)}
  .promesas.en-fila .promesa{grid-template-columns:44px minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0}
}

/* Otros giros: la tarjeta de demo con la pantalla del sistema (2:1). */
.giro-card img{aspect-ratio:2/1;object-position:top}
.giro-card .demo-card-body{flex-direction:column;align-items:flex-start;gap:4px}
.giro-card .demo-go{white-space:nowrap}
.otros-mas{margin-top:var(--s4);color:var(--muted);max-width:60ch}
/* Enlace dentro de una frase (la otra ciudad): 44px de alto para el pulgar con
   relleno vertical, que no agranda el renglon. */
.otros-mas a{padding-block:12px;font-weight:600;text-decoration:none}
.otros-mas a:hover{text-decoration:underline;text-underline-offset:4px}
/* En cada ficha de sistema, el paso a la pagina de su giro. */
.ficha-giro{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;margin:-4px 0 -8px;padding:0 8px;
  color:var(--morado-luz);font-weight:600;font-size:.95rem;text-decoration:none}
.ficha-giro:hover{text-decoration:underline;text-underline-offset:4px}
/* Al fondo de la ficha: en la rejilla de dos, los enlaces quedan a la misma altura. */
.project .ficha-giro{margin-top:auto}
.ficha-giro svg{transition:transform .3s var(--ease)}
.ficha-giro:hover svg{transform:translateX(3px)}
@media (max-width:768px){.ficha-giro{display:block;padding:10px 8px;line-height:1.4}.ficha-giro svg{display:inline-block;vertical-align:-3px;margin-left:4px}}
/* Lupa: un recorte legible de la misma pantalla, delante y abajo (coaches:
   la ficha de la clienta, que en la captura completa no se alcanza a leer). */
.giro-vista.con-lupa{margin-bottom:56px}
.con-lupa .frente figcaption{left:auto;right:12px;bottom:auto;top:10px}
.lupa{position:absolute;z-index:2;left:-20px;bottom:-32px;width:min(522px,80%);margin:0}
.lupa img{width:100%;height:auto;border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.14),0 40px 90px -24px rgba(0,0,0,.95),
  0 24px 70px -18px color-mix(in srgb,var(--tinte) 70%,transparent)}
@media (max-width:1024px){.lupa{left:0;bottom:-24px}.giro-vista.con-lupa{margin-bottom:44px}}

/* En celular nada baja de 14px: chips, rotulos y contadores se leen en un Android
   de gama media. Va al final de la hoja porque cada regla de arriba fija su propio
   tamaño con la misma especificidad y ganaria por orden. */
@media (max-width:768px){.chip,.shot-cap,.filter .n,.pantalla figcaption,.giro-nota,.armador-msg-t,.free-tag,.e404-num{font-size:.875rem}}

/* ==========================================================================
   LA PANTALLA QUE SE ENCIENDE — entrada unica de cada captura real. Obturador
   desde una linea central (clip-path), destello (una capa en opacidad: nunca
   filter sobre la imagen, que repinta en Android) y un pulso de luz tintada
   alrededor. Solo lo que esta bajo el pliegue al cargar; el hero por giro y las
   cartas del abanico no. Sin JS o con reduced-motion no pasa nada: se ven.
   ========================================================================== */
.gsap-ready .apagada{clip-path:inset(50% -30% 50% -30% round var(--r))}
.marco{position:relative;display:block;width:fit-content;max-width:100%;--flash:0;--pulso:0}
.giro-card .marco{width:100%}
.shot::after,.marco::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--r);opacity:var(--flash);
  background:linear-gradient(180deg,rgba(255,255,255,.55),color-mix(in srgb,var(--tinte) 35%,#fff) 50%,rgba(255,255,255,.55))}
.shot-wrap::before,.marco::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:var(--r);opacity:var(--pulso);
  box-shadow:0 0 0 2px rgba(192,132,252,.35),0 20px 90px -10px color-mix(in srgb,var(--tinte) 90%,transparent)}
.shot-wrap>.shot,.marco>img{position:relative;z-index:1;display:block}
/* Hero por giro: solo el destello, por CSS y sin ocultar nada (es el LCP). */
.pantalla::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;animation:encendido .9s .25s ease-out both;
  background:linear-gradient(180deg,rgba(255,255,255,.55),color-mix(in srgb,var(--tinte) 35%,#fff) 50%,rgba(255,255,255,.55))}
@keyframes encendido{0%{opacity:0}18%{opacity:.6}100%{opacity:0}}

/* ==========================================================================
   DEMOSTRACION «cobra aunque se vaya el internet» — un mini punto de venta con
   el que se juega (portada y restaurantes). Receta de cristal del armador; lo
   activo es morado, el verde solo en el boton de WhatsApp.
   ========================================================================== */
.dividido-cuerpo{display:flex;flex-direction:column;gap:var(--s4)}
.demo-offline{padding:var(--s4);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:var(--s3);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface);border:1px solid var(--border);border-top-color:rgba(255,255,255,.17)}
.demo-cab-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.demo-cab h3{font-size:1.35rem;letter-spacing:-.02em;line-height:1.2}
.demo-cab p{margin:6px 0 0;color:var(--muted);font-size:.98rem;max-width:52ch}
.demo-etiqueta{color:var(--muted);border-color:var(--border)}
.demo-pos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);padding:var(--s3);border-radius:var(--r);background:var(--bg-2);border:1px solid var(--border)}
.demo-red{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--border);color:var(--text);font-weight:500}
/* El boton mide 60x44 (para el dedo); la pastilla de 52x30 va dentro. */
.demo-switch{flex-shrink:0;display:grid;place-items:center;width:62px;height:46px;padding:0;border-radius:999px}   /* 46: sigue midiendo 44 a mitad de su entrada (escala .97) */
.demo-switch-pista{position:relative;width:52px;height:30px;border-radius:999px;background:var(--morado);border:1px solid var(--morado-luz);
  box-shadow:0 0 0 4px rgba(147,51,234,.18),0 0 24px rgba(192,132,252,.45);transition:background .3s,border-color .3s,box-shadow .3s}
.demo-switch-bola{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}
.demo-switch[aria-checked="true"] .demo-switch-bola{transform:translateX(22px)}
.demo-switch[aria-checked="false"] .demo-switch-pista{background:var(--bg-3);border-color:var(--border-2);box-shadow:none}
.demo-switch:focus-visible{outline:none}
.demo-switch:focus-visible .demo-switch-pista{outline:2px solid var(--morado-luz);outline-offset:4px}
.demo-menu{display:grid;gap:8px;align-content:start}
.demo-prod{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border-radius:var(--r);text-align:left;
  background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:500;font-size:.95rem;line-height:1.25;
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.demo-prod b{color:var(--morado-luz);font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-prod:hover{background:var(--surface-2);border-color:var(--border-2)}
.demo-prod:active{transform:scale(.98)}
.demo-ticket{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--r);background:var(--bg);border:1px solid var(--border);min-height:100%}
.demo-lineas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1;font-size:.95rem;color:var(--muted)}
.demo-lineas li{display:flex;justify-content:space-between;gap:12px}
.demo-lineas b{color:var(--text);font-variant-numeric:tabular-nums}
.demo-vacia{color:var(--dim);font-style:normal}
.demo-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}
.demo-total b{font-size:1.4rem;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.demo-cobrar{min-height:48px;padding:0 20px;border-radius:999px;background:var(--morado);color:#fff;font-weight:600;font-size:1rem;
  box-shadow:0 10px 26px -12px rgba(147,51,234,.8);transition:transform .3s var(--ease),opacity .2s,box-shadow .3s}
.demo-cobrar:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(147,51,234,.9)}
.demo-cobrar:active{transform:none}
.demo-cobrar:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.demo-estado{grid-column:1/-1;position:relative;margin:0;padding:12px 0 0 22px;color:var(--muted);font-size:.95rem;line-height:1.45;overflow:hidden}
.demo-estado::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;border-radius:50%;background:var(--morado);border:1px solid var(--morado-luz);
  box-shadow:0 0 0 3px rgba(147,51,234,.25),0 0 18px rgba(192,132,252,.7);transition:background .3s,box-shadow .3s}
.sin-red .demo-estado::before{background:var(--bg-3);border-color:var(--border-2);box-shadow:none}
.demo-estado::after{content:"";position:absolute;left:22px;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--morado),var(--morado-luz));transform:scaleX(0);transform-origin:left}
.sincronizando .demo-estado::after{animation:demo-sync 1.4s var(--ease) forwards}
@keyframes demo-sync{to{transform:scaleX(1)}}
.demo-sin-js{display:none}
.demo-nota{margin:0;color:var(--dim);font-size:.875rem}
.demo-offline .btn-wa{align-self:flex-start}
@media (max-width:560px){
  .demo-offline{padding:var(--s3)}
  .demo-pos{grid-template-columns:minmax(0,1fr);padding:var(--s2)}
  .demo-offline .btn-wa{align-self:stretch}
}

/* ==========================================================================
   LO QUE CONSTRUIMOS — tarjetas de modulo (titulo con frase encendida, una linea,
   funciones con punto morado) en grupos con su rotulo; la ancha lleva un recorte
   real; la de «a la medida» toma el gradiente de la tarjeta de identidad.
   ========================================================================== */
.grupo-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:var(--s5) 0 var(--s3);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--text)}
.section-head+.grupo-t{margin-top:0}
.grupo-t svg{color:var(--morado-luz);flex-shrink:0}
.grupo-t span{font-weight:400;font-size:.95rem;letter-spacing:0;color:var(--dim)}
.modulos{display:grid;gap:var(--s2)}
.modulos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.modulos.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.modulo{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-lg);border:1px solid rgba(192,132,252,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 38%),linear-gradient(135deg,color-mix(in srgb,var(--morado) 10%,transparent),transparent 60%),var(--surface);
  box-shadow:0 18px 45px -30px rgba(0,0,0,.6);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s}
.modulo:hover{border-color:rgba(192,132,252,.42);transform:translateY(-2px);box-shadow:0 26px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(192,132,252,.1)}
.modulo-i{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:var(--morado-luz);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 38%),var(--surface-2);border:1px solid var(--border);border-top-color:rgba(255,255,255,.17)}
.modulo h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.modulo>p,.modulo-txt>p{color:var(--muted);font-size:.98rem;line-height:1.5}
.funciones{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.funciones li{position:relative;padding-left:16px;color:var(--muted);font-size:.95rem;line-height:1.4}
.funciones li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--morado-luz);box-shadow:0 0 10px rgba(192,132,252,.7)}
.modulo.ancha .modulo-txt{display:flex;flex-direction:column;gap:12px;min-width:0}
.modulo-img.marco{width:100%;margin:auto 0 0;padding-top:8px}
.modulo-img img{width:100%;height:auto;border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.1),0 24px 50px -20px rgba(0,0,0,.8),0 20px 60px -16px color-mix(in srgb,var(--tinte) 60%,transparent)}
.s-web{--tinte:var(--morado)}
/* Indice: los modulos que tienen seccion a fondo abajo son una fila que lleva a ella. */
.modulo.indice{flex-direction:row;align-items:center;gap:14px;padding:18px 20px;text-decoration:none;color:var(--text)}
.modulo.indice h3{flex:1;font-size:1.15rem}
.modulo-ir{display:inline-flex;align-items:center;gap:6px;color:var(--morado-luz);font-weight:600;font-size:.95rem;white-space:nowrap}
.modulo.indice:hover .modulo-ir svg{transform:translateY(2px)}.modulo-ir svg{transition:transform .3s var(--ease)}
.modulo.medida{margin-top:var(--s2);flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4);
  background:linear-gradient(160deg,rgba(147,51,234,.22),rgba(13,9,24,.5) 70%);border-color:rgba(192,132,252,.3)}
.modulo.medida h3{font-size:clamp(1.4rem,2vw,1.75rem);letter-spacing:-.025em;line-height:1.15}
.modulo.medida .modulo-txt{display:flex;flex-direction:column;gap:10px;max-width:64ch}
.modulo.medida .btn{flex-shrink:0}
@media (max-width:1024px){
  .modulos.tres{grid-template-columns:repeat(2,minmax(0,1fr))}.modulos.dos{grid-template-columns:minmax(0,1fr)}
  .modulo.medida{flex-direction:column;align-items:flex-start}
}
@media (max-width:768px){
  .modulos.tres{grid-template-columns:minmax(0,1fr)}.modulo{padding:22px}
  .modulo.medida .btn{width:100%}
}

/* ==========================================================================
   INMERSIONES — texto + rejilla de funciones (tiles) de un lado, la pantalla real
   flotando del otro (o la demo, en el punto de venta). Alternan de lado.
   ========================================================================== */
.tiles{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r);color:var(--muted);font-size:.92rem;line-height:1.45;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),var(--surface);border:1px solid var(--border);border-top-color:rgba(255,255,255,.14);
  transition:border-color .3s,background .3s}
.tile svg{color:var(--morado-luz);flex-shrink:0;margin-bottom:8px}
.tile b{color:var(--text);font-weight:600;font-size:.98rem;letter-spacing:-.01em;line-height:1.3}
.tile:hover{border-color:rgba(192,132,252,.35);background:var(--surface-2)}
.inmersion-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s5);align-items:start}
.inmersion-grid.alterna{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.inmersion-grid.alterna .inmersion-txt{order:2}
.inmersion-txt .section-sub{max-width:52ch}
.inmersion .flotante{margin:var(--s2) 0 12%}
.inmersion .flotante .shot{margin:0}
.inmersion .flotante .tarjeta{left:-5%;bottom:-12%;width:min(62%,480px)}
@media (max-width:1024px){
  .inmersion-grid,.inmersion-grid.alterna{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .inmersion-grid.alterna .inmersion-txt{order:0}
  .inmersion .flotante{margin:0 4% 16%}
}
@media (max-width:768px){
  .tiles{gap:8px}.tile{padding:12px;font-size:.875rem}.tile b{font-size:.92rem}
  .inmersion .flotante{margin:0 0 18%}.inmersion .flotante .tarjeta{left:0;bottom:-16%;width:min(82%,480px)}
}

/* ==========================================================================
   ANTES / CON TU SISTEMA — dos listas (la receta de la balanza de /como-trabajo/)
   con una fila de resultado al pie: roja antes, morada despues.
   ========================================================================== */
.compare.listas{margin-top:0}
.compare.listas .compare-col{display:flex;flex-direction:column}
.compare-head .punto{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:#F87171;box-shadow:0 0 12px rgba(248,113,113,.6)}
.compare-col.after .compare-head .punto{background:var(--morado);border:1px solid var(--morado-luz);box-shadow:0 0 12px rgba(192,132,252,.7)}
.compare.listas .compare-list li{padding:14px 0;align-items:flex-start}
.compare.listas .compare-list li svg{margin-top:2px}
.fila-resultado{display:flex;align-items:center;gap:10px;margin:var(--s3) 0 0;padding:12px 14px;border-radius:var(--r);font-weight:500;font-size:.95rem;line-height:1.35}
.fila-resultado svg{flex-shrink:0}
.fila-resultado.mal{color:#FCA5A5;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.28)}
.fila-resultado.bien{color:var(--morado-pastel);background:rgba(147,51,234,.14);border:1px solid rgba(192,132,252,.35)}

/* ==========================================================================
   CÓMO FUNCIONA — cuatro pasos en circulos unidos por una linea que se dibuja con
   el scroll (en tablet y celular no hay linea; los pasos se encienden igual).
   ========================================================================== */
.pasos{position:relative}
.pasos::before{content:"";position:absolute;left:12.5%;right:12.5%;top:26px;height:2px;background:var(--border-2)}
.pasos-linea{position:absolute;left:12.5%;right:12.5%;top:26px;height:2px;background:linear-gradient(90deg,var(--morado),var(--morado-luz));box-shadow:0 0 16px var(--morado-luz);
  transform:scaleX(var(--p,0));transform-origin:left}
html:not(.gsap-ready) .pasos-linea{--p:1}
.pasos-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);position:relative;z-index:1}
.paso{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0 var(--s2)}
.paso .step-num{transition:background .4s,color .4s,box-shadow .4s,transform .4s var(--ease)}
.gsap-ready .paso:not(.on) .step-num{background:var(--bg-2);color:var(--muted);box-shadow:0 0 0 1px var(--border-2);transform:scale(.92)}

.paso-txt{display:flex;flex-direction:column;align-items:center;gap:8px}
.paso h3{font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
.paso p{color:var(--muted);font-size:.95rem;line-height:1.5;max-width:30ch}
.paso .free-tag{position:static;margin:0 0 2px}
.recibes-t{margin-top:var(--s6)}
.mas-enlace{margin-top:var(--s4);text-align:center}
.mas-enlace a{color:var(--morado-luz);font-weight:600;display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none}
.mas-enlace a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1024px){
  .pasos-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .pasos::before,.pasos-linea{display:none}
  .recibes-t{margin-top:var(--s5)}
}
@media (max-width:560px){
  .pasos-lista{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .paso{flex-direction:row;text-align:left;align-items:flex-start;padding:0}
  .paso .step-num{flex-shrink:0}.paso-txt{align-items:flex-start}.paso p{max-width:none}
}

/* ==========================================================================
   PREGUNTAS + ARMADOR — la FAQ a la izquierda y el armador como tarjeta al lado;
   en tablet y celular el armador va primero.
   ========================================================================== */
.preguntas-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
@media (min-width:1025px){.preguntas-col{position:sticky;top:calc(var(--nav-h) + 24px)}}
.preguntas-col .section-head{margin-bottom:var(--s4)}
@media (max-width:1024px){.preguntas-grid{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}