/* ===== Orbitaz · v2.css · rediseño (nov-2026) · va DESPUÉS de styles.css y solo en index.html =====
   No reescribe la identidad: ordena el sistema (espaciado, tipografía, ritmo de secciones), baja la densidad
   del héroe, deja un solo CTA principal por pantalla, suma la sección Kits y arregla defectos medidos en la auditoría
   (docs/auditoria-rediseno.md). */

/* ---------- 1) Sistema: espaciado y tipografía ---------- */
:root{
  /* escala de espaciado (múltiplos de 4); las secciones usan solo estos pasos */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  /* ritmo vertical de sección: antes clamp(88px,12vw,160px) = 320 px entre secciones a 1440 */
  --sec-y:clamp(72px,8.5vw,120px); --sec-y-tight:clamp(56px,6vw,88px);
  /* escala tipográfica (Urbanist, una sola familia) */
  --fs-small:14px; --fs-body:16px; --fs-lead:clamp(17px,1.35vw,20px);
  --fs-h2:clamp(32px,4.2vw,56px); --fs-h3:clamp(20px,1.7vw,24px);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
h2{font-size:var(--fs-h2)}
.sec{padding:var(--sec-y) 0}.sec--tight{padding:var(--sec-y-tight) 0}
.caption,small{font-size:var(--fs-small)}
.eyebrow{font-size:12px}

/* cabecera de sección: una sola receta (eyebrow, título, bajada) para todas */
.sec-head{display:grid;gap:var(--s-4);justify-items:start;margin-bottom:var(--s-7)}
.sec-head h2{max-width:20ch}
.sec-head .lead{max-width:60ch;margin-top:var(--s-1)}
#demos .sec-head .eyebrow{color:var(--text-on-dark-3)}

/* ---------- 2) Accesibilidad base ---------- */
.skip{position:fixed;left:12px;top:-60px;z-index:calc(var(--z-preloader) + 5);background:var(--accent-sky);color:var(--night-900);padding:12px 18px;border-radius:12px;font:600 14px/1 var(--font-body);transition:top .2s}
.skip:focus{top:12px;box-shadow:var(--focus-ring)}
.theme-light :focus-visible{box-shadow:0 0 0 3px rgba(64,85,255,.55)}   /* el aro celeste no se ve sobre blanco */
.nav__links a:focus-visible,.btn:focus-visible,.btn-text:focus-visible{outline:2px solid var(--accent-sky);outline-offset:3px;box-shadow:none}
.theme-light .btn:focus-visible,.theme-light .btn-text:focus-visible{outline-color:var(--brand)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3) Botones ---------- */
/* DEFECTO medido: el parche del 10-sep estiraba [data-magnetic-inner] al alto del botón y el texto quedaba pegado arriba */
.btn [data-magnetic-inner]{align-self:stretch;display:flex;align-items:center;justify-content:center}
.btn-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy);transition:background .26s,color .26s}
.btn-line:hover{background:var(--navy);color:#fff}
.btn-text--flecha::after{content:"→";font-weight:500;transition:transform .26s var(--ease-out)}
.btn-text--flecha:hover::after{transform:translateX(4px)}
.btn-text{min-height:24px}

/* ---------- 4) Héroe: menos piezas, una sola jerarquía ---------- */
/* Antes: titular a todo el ancho que chocaba con la rueda, bajada arriba a la derecha lejos del titular, tarjeta de chat
   (repetía el ejemplo de la sección Agente), precio "7 días", 4 pruebas y el botón en una sola fila. */
.hero.hero--v2{--orb-cx:79%}
.hero--v2 .hero__orb{--orb-d:min(60vh,36vw)}
.hero--v2 .hero__tex{opacity:.6}
@media (min-width:768px){
  .hero--v2 .hero__in{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding-top:calc(var(--nav-h) + var(--s-5));padding-bottom:calc(56px + var(--s-7))}
  .hero--v2 .hero__eyebrow{margin:0}
  .hero--v2 .hero__h1{width:min(62%,800px);margin:var(--s-5) 0 0;font-size:clamp(40px,6.6vw,96px)}   /* respaldo sin JS; fitH1 lo ajusta al ancho */
  .hero--v2 .hero__in .hero__lead{margin:var(--s-6) 0 0;max-width:42ch;font-size:var(--fs-lead);justify-self:auto}
  .hero--v2 .hero__row{grid-area:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:none;margin-top:var(--s-6);display:grid;gap:var(--s-6);justify-items:start;padding:0}
  .hero--v2 .hero__cta,.hero--v2 .hero__proof{grid-area:auto}
  .hero--v2 .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);justify-self:start}
  .hero--v2 .hero__proof{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);font-size:var(--fs-small);color:var(--text-on-dark-2)}
}
.hero__proof .n{color:var(--accent-sky)}
@media (max-width:767px){
  .hero.hero--v2{min-height:100svh;grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"eye eye" "h1 h1" "lead orb" "row row";row-gap:0;
    padding-bottom:calc(56px + var(--s-5))}
  .hero--v2 .hero__in .hero__lead{margin:var(--s-4) 0 0;font-size:16px;align-self:start}
  .hero--v2 .hero__orb{--orb-d:min(40vw,24svh);align-self:start;margin:var(--s-5) 0 0}
  .hero--v2 .hero__row{grid-area:row;grid-template-columns:minmax(0,1fr);grid-template-areas:none;align-self:end;display:grid;gap:var(--s-5);margin-top:var(--s-6);padding:0}
  .hero--v2 .hero__proof,.hero--v2 .hero__cta{grid-area:auto;justify-self:stretch}
  .hero--v2 .hero__cta{display:grid;gap:var(--s-4);justify-items:stretch;grid-template-columns:1fr}
  .hero--v2 .hero__cta .btn{grid-area:auto;width:100%;height:56px}
  .hero--v2 .hero__cta .btn-text{grid-area:auto;justify-self:center}
  .hero--v2 .hero__proof{display:grid;grid-template-columns:1fr;gap:var(--s-2);font-size:var(--fs-small);color:var(--text-on-dark-2);padding:0}
  .hero--v2 .hero__proof li{white-space:normal}
}

/* ---------- 5) Servicios ---------- */
.servs{margin-top:0;gap:var(--s-8)}
.serv{padding:var(--s-6) 0}
.serv__benef{font-size:var(--fs-lead)}
.serv__list{font-size:var(--fs-body);gap:var(--s-2)}
.serv__foot{margin-top:var(--s-5)}
#servicios .lead{max-width:56ch}

/* ---------- 6) Agente: subtítulo legible ---------- */
.agente__cap{font-size:13.5px}

/* ---------- 7) Demos: una acción por tarjeta; en móvil, carrusel con snap (antes: 8 tarjetas apiladas = 6.000 px) ---------- */
.demo-card__actions{justify-content:flex-start;margin-top:var(--s-4)}
.demo-card__actions .btn-text{font-size:var(--fs-body)}
.demos__grid{margin-top:0}
.demos__foot{align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.demos__foot .btn-text{color:var(--text-on-dark-2)}
@media (max-width:699px){
  .demos__grid{display:flex;max-width:none;margin-inline:calc(var(--pad-x) * -1);padding:0 var(--pad-x) var(--s-4);gap:var(--s-4);overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);overscroll-behavior-x:contain;scrollbar-width:none;perspective:none}
  .demos__grid::-webkit-scrollbar{display:none}
  .demos__grid .demo-card{flex:0 0 min(292px,80vw);scroll-snap-align:start;padding:var(--s-4)}
  .demo-card__device{width:240px;margin:var(--s-4) auto}
  .demo-card__frame{transform:scale(.615)}
  .demos__foot{flex-direction:column;align-items:stretch;text-align:center}
  .demos__foot .btn{width:100%}
}

/* ---------- 8) Proyectos ---------- */
.proy__d{font-size:var(--fs-body)}
.proy__acts{gap:var(--s-5)}

/* ---------- 9) Kits y guías ---------- */
#proyectos{background:var(--paper)}
.kits{background:var(--paper-2)}
.kits__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--s-8);align-items:center}
.kits .sec-head{margin-bottom:var(--s-6)}
.kits__feat{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6)}
.kfeat{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start}
.kfeat__i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--paper);border:1px solid var(--line-light);color:var(--brand)}
.kfeat__i svg{width:20px;height:20px}
.kfeat h3{font-size:17px;line-height:1.25;color:var(--navy);letter-spacing:-.01em}
.kfeat p{font-size:15px;line-height:1.5;color:var(--text-on-light-2);margin-top:var(--s-1)}
.kits__stats{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line-light-strong)}
.kits__stats dt{font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-light-3);order:2}
.kits__stats div{display:flex;flex-direction:column;gap:var(--s-2)}
.kits__stats dd{font-size:clamp(34px,3.6vw,48px);line-height:1;color:var(--navy);order:1}
.kits__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6);margin-top:var(--s-7)}
.kits__covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);align-content:center}
.kcover{display:block;border-radius:var(--s-5);overflow:hidden;box-shadow:0 18px 40px rgba(11,16,51,.16);transition:transform .4s var(--ease-out),box-shadow .4s;aspect-ratio:4/5;background:var(--navy)}
.kcover img{width:100%;height:100%;object-fit:cover}
.kcover:nth-child(even){transform:translateY(var(--s-6))}
.kcover:hover{box-shadow:0 26px 60px rgba(11,16,51,.26)}
.kcover:nth-child(odd):hover{transform:translateY(-4px)}.kcover:nth-child(even):hover{transform:translateY(calc(var(--s-6) - 4px))}
@media (max-width:1024px){
  .kits__grid{grid-template-columns:1fr;gap:var(--s-7)}
  .kits__covers{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kcover:nth-child(even){transform:none}.kcover:nth-child(even):hover{transform:translateY(-4px)}
}
@media (max-width:640px){
  .kits__feat{grid-template-columns:1fr}
  .kits__covers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kits__cta{flex-direction:column;align-items:stretch;text-align:center}
  .kits__cta .btn{width:100%}
  .kits__stats{gap:var(--s-5) var(--s-6)}
}

/* ---------- 10) Proceso ---------- */
#proceso{background:var(--paper)}
.proceso{margin-top:0}
.paso__d{font-size:15px;line-height:1.5}
.paso__t{font-size:18px}

/* ---------- 11) Planes: contenido propio + "en todos los trabajos" ---------- */
.precios{background:var(--paper-2)}
.precios__grid{margin-top:0;align-items:stretch}
.plan{padding:var(--s-6) var(--s-5);align-content:start}
.plan__n{font-size:13px}
.plan__f{font-size:var(--fs-body);color:var(--navy);font-weight:600;line-height:1.35}
.plan--destacada .plan__f{color:#fff}
.plan__list{font-size:15px}
.plan .btn-text{margin-top:auto;padding-top:var(--s-2)}
.plan{grid-template-rows:auto auto 1fr auto}
.plan .tag{top:-14px}
.incluido{margin-top:var(--s-7);padding:var(--s-6);border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line-light);display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:var(--s-5) var(--s-7);align-items:start}
.incluido__t{font:600 13px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.incluido ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-6);font-size:15px;color:var(--text-on-light-2)}
@media (max-width:900px){.incluido{grid-template-columns:1fr}.incluido ul{grid-template-columns:1fr}}

/* ---------- 12) Dudas ---------- */
#dudas{background:var(--paper)}
#dudas .faq{margin-top:0}
.faq summary{font-size:17px;padding:var(--s-5) 0}
.faq__body{font-size:var(--fs-body)}

/* ---------- 13) Cierre y pie ---------- */
.cierre h2{font-size:clamp(34px,4.6vw,64px)}
.footer__cols--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.footer__cols--4{grid-template-columns:repeat(2,1fr);gap:var(--s-6) var(--s-5)}}
@media (max-width:480px){.footer__cols--4{grid-template-columns:1fr}}
.footer__cols{font-size:15px}

/* ---------- 14) Barra de WhatsApp móvil + Orbi: el lanzador va encima de la barra (lo posiciona orbi.css) ---------- */
@media (max-width:767px){
  .wa-bar{font-size:16px}
}