/* ============================================================
   home.css · la portada de Brajoa IA con el sistema /web-premium
   ------------------------------------------------------------
   La home ya NO carga estilos.css: tiene su propio sistema, armado
   sobre el de la skill web-premium (el de la tienda Moove) pero vestido
   con la marca de Brajoa IA. Lo que se mantuvo del kit, sin negociar:

   - Los colores, las tipografías y los espaciados salen de tokens.css.
     Acá se suman SOLO las escalas de display (los títulos grandes de la
     portada) y unos tintes nombrados: ni un hex suelto en las reglas.
   - Todo oscuro, porque el logo lo exige (MARCA §4.3).
   - Un solo botón primario, y es WhatsApp. Todo lo demás es link de
     texto con la flechita dorada.
   - Nada arranca invisible: `.reveal` solo MUEVE, no desvanece. Si el JS
     no corre, el bloque queda 24px más abajo y se lee igual (GOTCHAS §11).
   - Ningún texto encima de una captura: en el hero el texto va en su
     panel diagonal y la captura a la derecha; en las tarjetas, la
     captura arriba y el texto abajo.

   La cabecera, el menú y el pie NO están acá: son de shell.css, que lo
   cargan las once páginas. Como la home no carga estilos.css, los nombres
   de clase de acá no chocan con los del resto del sitio. Si alguna vez
   otra página carga este archivo, ojo con GOTCHAS §4.
   ============================================================ */

:root{
  /* escalas de display: solo para la portada, siempre por variable */
  --fs-hero: clamp(40px, min(5.2vw, 8.4vh), 72px);
  --fs-hero-md: clamp(36px, min(4.8vw, 8vh), 58px);

}

*, *::before, *::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + var(--sp-4)) }
body{ margin:0; overflow-x:hidden }
body.lock{ overflow:hidden }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0 }
h1,h2,h3,h4,p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px }


/* ---------- el único botón: WhatsApp ---------- */
.cta{ min-height:52px; padding:0 var(--sp-5); gap:var(--sp-3); white-space:nowrap }

.eyebrow{ display:block; margin-bottom:var(--sp-3); font-size:var(--fs-sm) }
em{ font-style:normal; color:var(--gold) }

/* ============================================================
   Hero: panel diagonal detrás del texto, la captura a la derecha
   ============================================================ */
/* Entra en UNA pantalla: alto de la ventana, con techo, y el contenido centrado
   en el espacio que deja la cabecera. Antes iba anclado abajo y en una pantalla
   ancha y baja quedaba un vacío arriba y el link cortado abajo. */
.hero{ position:relative; height:clamp(560px, 100svh, 820px); overflow:hidden;
  background:
    radial-gradient(900px 520px at 78% 30%, var(--oro-tinte), transparent 64%),
    radial-gradient(760px 520px at 96% 90%, var(--cian-tinte), transparent 60%),
    var(--navy);
  --bl: calc(max((100% - var(--wrap)) / 2, 0px) + clamp(360px, 44%, 640px));
  /* la captura llega hasta el margen de la PANTALLA, no del contenedor: en una
     pantalla ancha el contenedor de 1280 la dejaba chiquita. Nunca se corta. */
  --br: calc(var(--gut) + var(--sp-4)) }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s, visibility .9s }
.hero-slide.on{ opacity:1; visibility:visible }
/* el panel: cubre siempre la columna del título */
.hero-slide::before{ content:''; position:absolute; inset:0; background:var(--panel);
  clip-path:polygon(0 0, calc(var(--bl) + 40px) 0, calc(var(--bl) - 90px) 100%, 0 100%) }
/* el filo dorado del panel */
.hero-slide::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0, transparent calc(var(--ann-h) + var(--hdr-h)), var(--gold-1) calc(var(--ann-h) + var(--hdr-h) + 120px), var(--gold-2));
  clip-path:polygon(calc(var(--bl) + 40px) 0, calc(var(--bl) + 43px) 0, calc(var(--bl) - 87px) 100%, calc(var(--bl) - 90px) 100%) }

.hero-copy{ position:absolute; left:0; right:0; top:calc(var(--ann-h) + var(--hdr-h)); bottom:var(--sp-8);
  display:flex; flex-direction:column; justify-content:safe center; pointer-events:none; z-index:2 }
.hero-copy > .wrap{ width:100% }
.hero-copy .wrap > *{ pointer-events:auto; width:fit-content }
.hero h1, .hero h2{ font-size:var(--fs-hero); line-height:1.02; letter-spacing:-.03em; max-width:11ch; margin-top:var(--sp-4) }
.hero-sub{ font-size:clamp(16px, 1.4vw, 20px); color:var(--muted); max-width:36ch; margin:var(--sp-5) 0 var(--sp-6); line-height:1.55 }
.hero-ctas{ display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start }
@media (min-width:901px) and (max-width:1240px){
  .hero{ --bl: clamp(470px, 48%, 600px) }
  .hero h1, .hero h2{ font-size:var(--fs-hero-md) }
  .hero-sub{ max-width:32ch }
}

/* la captura: en su marco, a la derecha del panel. Es un link al sistema. */
.spot{ position:absolute; z-index:1; left:calc(var(--bl) + 64px); right:var(--br);
  top:calc(var(--ann-h) + var(--hdr-h) + var(--sp-5)); bottom:var(--sp-8);
  display:flex; align-items:center; justify-content:center; container-type:size;
  transform:translateX(40px); opacity:0; transition:transform 1.1s var(--curva) .15s, opacity 1s .15s }
.hero-slide.on .spot{ transform:none; opacity:1 }
.pantalla{ position:relative; flex:none; width:min(100cqw, calc(100cqh * var(--ar, 1.6))); border-radius:var(--r-md); overflow:hidden;
  background:var(--panel); border:1px solid var(--line-2); box-shadow:var(--sombra), 0 0 0 6px var(--oro-tinte);
  transition:transform .4s var(--curva), box-shadow .4s }
.pantalla::before{ content:''; display:block; height:32px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 16px 16px, var(--bad) 4px, transparent 5px),
    radial-gradient(circle at 32px 16px, var(--warn) 4px, transparent 5px),
    radial-gradient(circle at 48px 16px, var(--ok) 4px, transparent 5px),
    var(--panel-2) }
.pantalla img{ width:100%; height:auto }
.spot:hover .pantalla{ transform:translateY(-4px); box-shadow:var(--sombra), 0 0 0 6px var(--oro-brillo) }
.pantalla.ar-planta{ --ar: 2.6 }
.pantalla.ar-deposito{ --ar: 2.7 }
.pantalla.ar-crm{ --ar: 3.8 }
.pantalla.ar-tms{ --ar: 1.82 }
/* el chip va EN la barra de la ventana, no sobre la captura: no tapa nada */
.spot-tag{ position:absolute; right:var(--sp-3); top:3px; z-index:2 }
.chip.spot-tag, .chip.stage-tag{ background:var(--navy) }

/* dos celulares lado a lado (el sistema de talleres) */
.celus{ display:flex; gap:clamp(12px, 3cqw, 32px); align-items:center; height:100cqh }
.celu{ height:92cqh; aspect-ratio:780/1688; border-radius:28px; padding:8px; background:var(--panel-2);
  border:1px solid var(--line-2); box-shadow:var(--sombra); overflow:hidden }
.celu img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:21px }
.celu + .celu{ height:80cqh }

/* el CRM de WhatsApp: la captura es una tira de 4:1 y en el hero se veía como
   una franja finita. Va en un celular, con la conversación real de la demo de
   repuestos de demos-operaciones, armada en HTML. */
.chat-celu{ height:min(100cqh, 560px); aspect-ratio:9/16; border-radius:28px; padding:8px; background:var(--panel-2);
  border:1px solid var(--line-2); box-shadow:var(--sombra), 0 0 0 6px var(--oro-tinte); display:flex }
.chat-pant{ flex:1; border-radius:21px; overflow:hidden; background:var(--navy); display:flex; flex-direction:column }
.chat-cab{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--panel); border-bottom:1px solid var(--line) }
.chat-cab i{ width:34px; height:34px; border-radius:50%; background:var(--oro-tinte); border:1px solid var(--oro-borde); display:grid; place-items:center; color:var(--gold); font-style:normal; font-weight:800; font-family:var(--tit) }
.chat-cab b{ display:block; font-family:var(--tit); font-size:var(--fs-md); line-height:1.2 }
.chat-cab span span{ display:block; font-size:var(--fs-xs); color:var(--ok) }
.chat-msgs{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:var(--sp-2); padding:var(--sp-4) var(--sp-3) }
.chat-msgs .burbuja{ max-width:86% }
.chat-pie{ margin:0 var(--sp-3) var(--sp-3); padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill); background:var(--panel); border:1px solid var(--line); font-size:var(--fs-sm); color:var(--subtle) }

.hero-dots{ position:absolute; left:50%; bottom:var(--sp-5); transform:translateX(-50%); display:flex; gap:var(--sp-2); z-index:3 }
.hero-dots button{ width:44px; height:24px; display:grid; place-items:center }
.hero-dots button i{ width:34px; height:4px; border-radius:2px; background:var(--line-2); overflow:hidden; position:relative; display:block }
.hero-dots button i::after{ content:''; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left }
.hero-dots button.on i::after{ animation:llenar var(--slide-ms, 7000ms) linear forwards }
.hero-dots.paused button.on i::after{ animation-play-state:paused }
@keyframes llenar{ to{ transform:scaleX(1) } }

/* ============================================================
   Beneficios
   ============================================================ */
.perks{ background:var(--panel); border-block:1px solid var(--line) }
.perks-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) }
.perk{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5) var(--sp-4) }
.perk + .perk{ border-left:1px solid var(--line) }
.perk .icon{ width:30px; height:30px; color:var(--gold) }
.perk b{ display:block; font-family:var(--tit); font-size:var(--fs-md); line-height:1.25 }
.perk span{ font-size:var(--fs-sm); color:var(--muted) }

/* ============================================================
   Secciones
   ============================================================ */
.section{ padding:clamp(56px, 8vw, 104px) 0 }
.section.tight{ padding:clamp(40px, 5vw, 64px) 0 }
.section.panel{ background:var(--panel); border-block:1px solid var(--line) }
.sec-head{ display:flex; align-items:end; justify-content:space-between; gap:var(--sp-5); margin-bottom:var(--sp-6); flex-wrap:wrap }
.sec-head h2{ font-size:var(--fs-sec); line-height:1.08; letter-spacing:-.03em; max-width:20ch }
.sec-head p{ color:var(--muted); max-width:52ch; margin-top:var(--sp-3) }
.sec-head.centro{ flex-direction:column; align-items:center; text-align:center }
.sec-head.centro h2, .sec-head.centro p{ margin-inline:auto }

/* ---------- clientes ---------- */
.clientes{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-6); align-items:center }
.clientes h2{ font-size:var(--fs-xl); max-width:14ch; line-height:1.25 }
.clientes h2 span{ display:block; font-family:var(--cuerpo); font-weight:500; font-size:var(--fs-md); color:var(--muted); letter-spacing:0; margin-top:var(--sp-2) }
.logos{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--sp-4) }
.logo-cli{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); text-align:center }
.logo-cli .tile{ width:100%; max-width:132px; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-2);
  display:grid; place-items:center; background:var(--navy) }
.logo-cli .tile img{ width:100%; height:100%; object-fit:cover }
.logo-cli .tile.ancho{ padding:var(--sp-4) }
.logo-cli .tile.ancho img{ height:auto; object-fit:contain }
.logo-cli b{ font-size:var(--fs-sm); font-weight:600 }
.logo-cli span{ font-size:var(--fs-xs); color:var(--subtle); font-family:var(--baj); font-weight:700; letter-spacing:.12em; text-transform:uppercase }

/* ---------- las dos líneas: foto arriba, texto abajo ---------- */
.dos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-5) }
.linea{ --pad:var(--sp-6); position:relative; overflow:hidden; border-radius:var(--r-md); background:var(--panel);
  border:1px solid var(--line); display:flex; flex-direction:column; padding:0 var(--pad) var(--pad); isolation:isolate;
  transition:border-color var(--ease) }
.linea:hover{ border-color:var(--oro-borde) }
.linea::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg, var(--gold-1), var(--gold-2));
  transform:scaleX(.18); transform-origin:left; transition:transform .45s var(--curva) }
.linea:hover::after{ transform:scaleX(1) }
.linea-media{ margin:0 calc(-1 * var(--pad)) var(--sp-5); aspect-ratio:16/8; overflow:hidden; background:var(--navy); border-bottom:1px solid var(--line) }
.linea-media img{ width:100%; height:100%; object-fit:cover; object-position:top left; transition:transform .7s var(--curva) }
.linea:hover .linea-media img{ transform:scale(1.03) }
.linea h3{ font-size:var(--fs-3xl); letter-spacing:-.02em }
.linea .frase{ font-size:var(--fs-xl); color:var(--ink); margin:var(--sp-2) 0 var(--sp-4); font-family:var(--tit); font-weight:600; line-height:1.3 }
.linea .txt{ color:var(--muted); max-width:52ch }
.linea .formas{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-5) 0 var(--sp-4) }
.linea .ir{ margin-top:auto; align-self:flex-start }

/* ---------- automatizaciones: tres tarjetas con su mini demo arriba ---------- */
.tres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-5) }
.forma{ display:flex; flex-direction:column; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line);
  overflow:hidden; transition:border-color var(--ease), transform .3s var(--curva) }
.forma:hover{ border-color:var(--oro-borde); transform:translateY(-4px) }
.forma-demo{ aspect-ratio:16/10; background:var(--navy); border-bottom:1px solid var(--line); padding:var(--sp-5); display:flex;
  flex-direction:column; justify-content:center; gap:var(--sp-2); overflow:hidden }
.forma-body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); flex:1 }
.forma-body h3{ font-size:var(--fs-2xl) }
.forma-body p{ color:var(--muted) }
.forma-body .ir{ margin-top:auto; padding-top:var(--sp-3) }

/* mini demo 1: los remitos que pasan solos a la planilla */
.fila-remito{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); font-size:var(--fs-sm) }
.fila-remito .icon{ color:var(--ok); width:18px; height:18px }
.fila-remito.frena{ border-color:rgba(248,113,113,.45) }
.fila-remito.frena .icon{ color:var(--bad) }
.fila-remito .num{ color:var(--muted) }
/* mini demo 2: la conversación */
.burbuja{ max-width:82%; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); font-size:var(--fs-sm); line-height:1.45 }
.burbuja.cli{ align-self:flex-end; background:var(--panel-2); border:1px solid var(--line-2); border-bottom-right-radius:4px }
.burbuja.bot{ align-self:flex-start; background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.32); border-bottom-left-radius:4px }
.burbuja small{ display:block; color:var(--subtle); font-size:var(--fs-xs); margin-top:2px }
/* mini demo 3: el panel */
.mini-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-2) }
.mini-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3) }
.mini-kpi span{ display:block; font-size:var(--fs-xs); color:var(--subtle); font-family:var(--baj); font-weight:700; letter-spacing:.1em; text-transform:uppercase }
.mini-kpi b{ font-family:var(--tit); font-size:var(--fs-xl) }
.mini-barras{ display:flex; align-items:flex-end; gap:6px; height:64px; margin-top:var(--sp-2) }
.mini-barras i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg, var(--gold-1), var(--gold-2)); opacity:.85 }
.mini-barras i:nth-child(1){ height:38% } .mini-barras i:nth-child(2){ height:52% } .mini-barras i:nth-child(3){ height:44% }
.mini-barras i:nth-child(4){ height:68% } .mini-barras i:nth-child(5){ height:60% } .mini-barras i:nth-child(6){ height:82% }
.mini-barras i:nth-child(7){ height:74% } .mini-barras i:nth-child(8){ height:100%; opacity:1 }

/* ---------- software: el showcase (elegís un sistema y cambia la pantalla) ---------- */
.studio{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px, 4vw, 56px); align-items:center }
.studio h2{ font-size:var(--fs-sec); line-height:1.08; letter-spacing:-.03em }
.studio .lead{ color:var(--muted); margin:var(--sp-4) 0 var(--sp-5); max-width:44ch }
.studio-stage{ position:relative; aspect-ratio:16/10; border-radius:var(--r-md); background:var(--navy); overflow:hidden;
  border:1px solid var(--line-2); box-shadow:var(--sombra) }
.studio-stage::before{ content:''; display:block; height:32px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 16px 16px, var(--bad) 4px, transparent 5px),
    radial-gradient(circle at 32px 16px, var(--warn) 4px, transparent 5px),
    radial-gradient(circle at 48px 16px, var(--ok) 4px, transparent 5px),
    var(--panel-2) }
.photo-stage{ position:absolute; left:0; right:0; top:32px; bottom:0 }
/* absoluta y con contain: una captura ancha llena el ancho y un celular alto queda
   centrado, sin depender de un height en % adentro de una grilla (que no resuelve) */
.ps-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .3s }
.ps-img.alto{ inset:3% 0 }
.stage-tag{ position:absolute; top:3px; right:var(--sp-3); z-index:2 }
.picker{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5) }
.picker-row{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-sm); border:1px solid var(--line);
  text-align:left; width:100%; min-height:56px; transition:border-color var(--ease), background var(--ease) }
.picker-row:hover{ border-color:var(--line-2) }
.picker-row.on{ border-color:var(--gold); background:var(--oro-tinte) }
.picker-row .sigla{ flex:none; width:52px; height:36px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line-2); font-family:var(--baj); font-weight:700; font-size:var(--fs-sm); letter-spacing:.06em; color:var(--cyan) }
.picker-row.on .sigla{ color:var(--gold); border-color:var(--oro-borde) }
.picker-row b{ display:block; font-family:var(--tit); font-size:var(--fs-lg); line-height:1.2 }
.picker-row span{ font-size:var(--fs-sm); color:var(--muted) }
.picker-row .flecha{ margin-left:auto; color:var(--subtle) }
.picker-row.on .flecha{ color:var(--gold) }
.studio-mas{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line) }
.studio-mas .ir{ font-size:var(--fs-md); color:var(--muted) }

/* ---------- la banda dorada de las demos ---------- */
.banda{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 4vw, 56px); align-items:center;
  background:linear-gradient(135deg, var(--gold-1), var(--gold) 45%, var(--gold-2)); color:var(--tinta-oro);
  border-radius:var(--r-md); padding:clamp(28px, 5vw, 64px); position:relative; overflow:hidden }
.banda .kicker{ color:var(--tinta-oro) }
.banda .kicker::before{ background:var(--tinta-oro) }
.banda h2{ font-size:var(--fs-big); line-height:1.02; letter-spacing:-.03em; margin-top:var(--sp-4); max-width:12ch }
.banda > div > p{ margin-top:var(--sp-4); font-size:var(--fs-lg); max-width:44ch; font-weight:500 }
.banda-ticks{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-5); font-weight:700; font-size:var(--fs-md) }
.banda-ticks li{ display:flex; align-items:center; gap:var(--sp-2) }
.banda-tool{ background:var(--navy); color:var(--ink); border-radius:var(--r-md); padding:var(--sp-5); box-shadow:var(--sombra) }
.banda-tool h3{ font-size:var(--fs-lg); font-family:var(--baj); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:var(--sp-3) }
.demo-lista li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-3); align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--line) }
.demo-lista .icon{ color:var(--gold) }
.demo-lista b{ display:block; font-family:var(--tit); font-size:var(--fs-md) }
.demo-lista span{ font-size:var(--fs-sm); color:var(--muted) }
.banda-tool .acciones{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-4) }
.banda-tool .entrar{ font-size:var(--fs-lg) }
.banda-tool .ya{ margin-top:calc(var(--sp-3) * -1); font-size:var(--fs-md); color:var(--muted) }
.gusto{ border-top:1px solid var(--line); padding-top:var(--sp-4) }
.gusto p{ font-family:var(--tit); font-weight:700; font-size:var(--fs-md); margin-bottom:var(--sp-3) }
.wa-dos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3) }
/* el WhatsApp de cada uno: verde pero en contorno, para no competir con el CTA */
.wa-persona{ display:flex; align-items:center; gap:var(--sp-3); min-height:56px; padding:var(--sp-2) var(--sp-4);
  border:1px solid rgba(37,211,102,.45); border-radius:var(--r-pill); background:rgba(37,211,102,.08); color:var(--ink);
  transition:background var(--ease), border-color var(--ease) }
.wa-persona:hover{ background:rgba(37,211,102,.16); border-color:var(--wa) }
.wa-persona:active{ transform:scale(.98) }
.wa-persona .icon{ width:24px; height:24px; fill:var(--wa); stroke:none }
.wa-persona b{ display:block; font-family:var(--tit); font-size:var(--fs-md); line-height:1.2 }
.wa-persona small{ display:block; font-size:var(--fs-sm); color:var(--muted) }

/* ---------- partido: Moove ---------- */
.split{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px, 5vw, 72px); align-items:center }
.split h2{ font-size:var(--fs-sec); line-height:1.08; letter-spacing:-.03em; margin-top:var(--sp-4) }
.split .lead{ color:var(--muted); margin:var(--sp-4) 0 var(--sp-5); max-width:46ch }
.split-logo{ height:30px; width:auto }
.keys{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-5) var(--sp-5); margin-bottom:var(--sp-5) }
.key{ border-top:2px solid var(--gold); padding-top:var(--sp-3) }
.key b{ font-family:var(--tit); font-size:var(--fs-xl); display:block; line-height:1.2 }
.key span{ font-size:var(--fs-sm); color:var(--muted) }
.split-media{ display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line-2); box-shadow:var(--sombra); background:var(--panel) }
.split-media img{ width:100%; height:auto }
.split-media figcaption{ padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); color:var(--subtle); border-top:1px solid var(--line) }

/* ---------- casos ---------- */
.casos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-5) }
.caso-c{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); border-radius:var(--r-md); background:var(--panel);
  border:1px solid var(--line); transition:border-color var(--ease), transform .3s var(--curva) }
.caso-c:hover{ border-color:var(--oro-borde); transform:translateY(-4px) }
.caso-c .rubro{ font-family:var(--baj); font-weight:700; font-size:var(--fs-sm); letter-spacing:.14em; text-transform:uppercase; color:var(--cyan) }
.caso-c h3{ font-size:var(--fs-xl); line-height:1.25 }
.caso-c p{ color:var(--muted); font-size:var(--fs-md) }
.caso-nros{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3); padding:var(--sp-3) 0; border-block:1px solid var(--line); margin-top:var(--sp-2) }
.caso-nros b{ display:block; font-family:var(--tit); font-size:var(--fs-2xl); color:var(--gold); line-height:1.1 }
.caso-nros span{ font-size:var(--fs-sm); color:var(--muted) }
.caso-c .ir{ margin-top:auto }

/* ---------- cómo trabajamos ---------- */
.pasos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-5); counter-reset:paso }
.paso{ border-top:2px solid var(--line-2); padding-top:var(--sp-4); position:relative }
.paso::before{ counter-increment:paso; content:counter(paso); display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--oro-tinte); border:1px solid var(--oro-borde); color:var(--gold); font-family:var(--tit); font-weight:800;
  font-variant-numeric:tabular-nums; margin-bottom:var(--sp-4) }
.paso::after{ content:''; position:absolute; left:0; top:-2px; width:48px; height:2px; background:var(--gold) }
.paso h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-2) }
.paso p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- nosotros ---------- */
.about{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 5vw, 72px); align-items:center }
.about h2{ font-size:var(--fs-big); line-height:1.02; letter-spacing:-.03em; margin-top:var(--sp-4) }
.about p{ color:var(--muted); font-size:var(--fs-lg); margin-top:var(--sp-4) }
.personas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-5) }
.persona{ background:var(--navy); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-5); text-align:center }
.persona img{ width:112px; height:112px; border-radius:50%; margin:0 auto var(--sp-4); border:2px solid var(--oro-borde); object-fit:cover }
.persona b{ font-family:var(--tit); font-size:var(--fs-lg) }
.persona span{ display:block; font-size:var(--fs-sm); color:var(--subtle); margin-top:var(--sp-1) }

/* ---------- preguntas ---------- */
.faq{ max-width:860px; margin:0 auto }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  min-height:64px; font-family:var(--tit); font-weight:700; font-size:var(--fs-lg) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:'+'; font-size:var(--fs-2xl); line-height:1; color:var(--gold); transition:transform .2s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ color:var(--muted); padding-bottom:var(--sp-5) }
.faq-mas{ text-align:center; margin-top:var(--sp-5) }

/* ---------- cierre ---------- */
.cierre{ text-align:center; padding:clamp(64px, 9vw, 120px) 0;
  background:
    radial-gradient(700px 360px at 50% 0%, var(--oro-tinte), transparent 70%),
    var(--panel);
  border-top:1px solid var(--line) }
.cierre h2{ font-size:var(--fs-big); line-height:1.04; letter-spacing:-.03em; max-width:18ch; margin:var(--sp-4) auto 0 }
.cierre .lead{ color:var(--muted); font-size:var(--fs-lg); max-width:52ch; margin:var(--sp-5) auto var(--sp-6) }
.cierre .nota{ color:var(--subtle); font-size:var(--fs-sm); max-width:52ch; margin:var(--sp-4) auto 0 }

.caja-form{ max-width:560px; margin:var(--sp-6) auto 0; text-align:left; border:1px solid var(--line); border-radius:var(--r-md); background:var(--navy) }
.caja-form summary{ cursor:pointer; min-height:52px; display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-weight:600; color:var(--muted); list-style:none; padding:0 var(--sp-4) }
.caja-form summary::-webkit-details-marker{ display:none }
.caja-form summary::after{ content:'+'; color:var(--gold); font-size:var(--fs-xl) }
.caja-form[open] summary::after{ content:'−' }
.form{ display:grid; gap:var(--sp-4); padding:0 var(--sp-5) var(--sp-5) }
.campo label{ display:block; font-weight:600; font-size:var(--fs-md); margin-bottom:var(--sp-2) }
.campo input, .campo textarea{ width:100%; font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:var(--sp-3); min-height:48px }
.campo textarea{ resize:vertical }
.campo input:focus, .campo textarea:focus{ outline:2px solid var(--cyan); outline-offset:1px }
.campo [aria-invalid="true"]{ border-color:var(--bad) }
.campo-ayuda{ font-size:var(--fs-sm); color:var(--subtle); margin-top:var(--sp-2) }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.btn-enviar{ min-height:48px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line-2); color:var(--ink);
  font-weight:700; font-size:var(--fs-md); transition:border-color var(--ease) }
.btn-enviar:hover{ border-color:var(--muted) }
.btn-enviar:active{ transform:scale(.98) }
.btn-enviar[disabled]{ opacity:.6 }
.form-estado{ font-size:var(--fs-md); min-height:1.5em }
.form-estado.bien{ color:var(--ok) }
.form-estado.mal{ color:var(--bad) }
.form-estado a{ color:var(--cyan); text-decoration:underline }

/* ============================================================
   Aparición al scrollear: SOLO movimiento, nunca opacidad
   ============================================================ */
.reveal{ transform:translateY(24px); transition:transform .8s var(--curva) }
.reveal.in{ transform:none }
.reveal.d1{ transition-delay:80ms } .reveal.d2{ transition-delay:160ms } .reveal.d3{ transition-delay:240ms }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .perks-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .perk:nth-child(3){ border-left:0 }
  .perk:nth-child(n+3){ border-top:1px solid var(--line) }
  .logos{ grid-template-columns:repeat(5, minmax(0,1fr)) }
  .clientes{ grid-template-columns:minmax(0,1fr) }
  .tres, .casos{ grid-template-columns:minmax(0,1fr) }
  .pasos{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (min-width:700px) and (max-width:1100px){
  .tres, .casos{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:900px){
  .hero{ height:auto; min-height:0 }
  .hero-slide{ position:relative; display:none; flex-direction:column }
  .hero-slide.on{ display:flex }
  .hero-slide::before{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); top:auto; height:100% }
  .hero-slide::after{ display:none }
  .spot{ position:relative; left:auto; right:auto; top:auto; bottom:auto; order:-1; height:clamp(200px, 52vw, 380px);
    margin:calc(var(--ann-h) + var(--hdr-h) + var(--sp-4)) var(--gut) 0; transform:none; opacity:1; justify-content:center }
  .spot{ height:auto; container-type:normal }
  .pantalla{ width:100% }
  .celus{ height:clamp(300px, 80vw, 420px); justify-content:center; width:100% }
  .celu{ height:100% }
  .celu + .celu{ height:86% }
  .chat-celu{ height:min(440px, 110vw) }
  .hero-slide.on .spot{ opacity:1 }
  .hero-copy{ position:relative; top:auto; bottom:auto; padding:var(--sp-5) 0 var(--sp-8) }
  .hero h1, .hero h2{ font-size:clamp(34px, 9vw, 52px); max-width:14ch }
  .hero-sub{ margin:var(--sp-4) 0 var(--sp-5) }
  .hero-dots{ bottom:var(--sp-4) }
  .dos, .studio, .split, .banda, .about{ grid-template-columns:minmax(0,1fr) }
  .studio-stage{ order:-1 }
}
@media (max-width:600px){
  .hero-ctas{ flex-direction:column; align-items:stretch }
  .hero-ctas .cta{ justify-content:center; white-space:normal; text-align:center; padding-block:var(--sp-3) }
  .hero-copy .wrap > *{ width:auto }
  .perk{ padding:var(--sp-4) var(--sp-3); gap:var(--sp-3) }
  .perk .icon{ width:24px; height:24px }
  .logos{ grid-template-columns:repeat(3, minmax(0,1fr)) }
  .linea{ --pad:var(--sp-5) }
  .linea h3{ font-size:var(--fs-2xl) }
  .keys{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .pasos, .personas{ grid-template-columns:minmax(0,1fr) }
  .cierre .cta{ white-space:normal; text-align:center; justify-content:center; padding-block:var(--sp-3) }
  .wa-dos{ grid-template-columns:minmax(0,1fr) }
  .celu{ border-radius:20px; padding:5px }
  .celu img{ border-radius:16px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ transform:none }
  .hero-slide, .spot{ transition:none }
  .hero-dots button.on i::after{ animation:none; transform:scaleX(1) }
}
@media print{
  .reveal{ transform:none }
  .hero-dots{ display:none }
}