/* ============================================================
   Qontrolab · Capa de elevación (craft layer)
   Aditiva y no destructiva. Respeta contenido, copy y estructura.
   - Eje tipográfico de contraste (display grotesque + Inter UI)
   - Tracking corregido, profundidad, materiales y motion con física
   - Accesibilidad: :focus-visible + prefers-reduced-motion
   ============================================================ */

:root{
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --ease-quint:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ring:0 0 0 3px rgba(20,184,166,.45);
  /* profundidad en capas — sombras más creíbles que una sola difusa */
  --lift-1:0 1px 2px rgba(15,16,35,.06),0 4px 10px rgba(15,16,35,.05);
  --lift-2:0 2px 6px rgba(15,16,35,.08),0 18px 44px rgba(15,16,35,.12);
  --lift-3:0 10px 30px rgba(15,16,35,.16),0 40px 90px rgba(15,16,35,.20);
}
:root[data-theme="dark"]{
  --lift-1:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35);
  --lift-2:0 4px 14px rgba(0,0,0,.45),0 24px 60px rgba(0,0,0,.5);
  --lift-3:0 16px 44px rgba(0,0,0,.55),0 48px 120px rgba(0,0,0,.62);
}

/* Enriquecer un poco la profundidad del fondo sin cambiar la identidad */
:root[data-theme="dark"] .site-background{
  background:
    radial-gradient(circle at 12% -4%,rgba(20,184,166,.22),transparent 30%),
    radial-gradient(circle at 88% 4%,rgba(74,77,124,.40),transparent 34%),
    radial-gradient(circle at 50% 120%,rgba(0,122,255,.14),transparent 45%),
    linear-gradient(160deg,#0d0e20 0%,#141530 52%,#0d0e20 100%);
}
:root[data-theme="light"] .site-background{
  background:
    radial-gradient(circle at 12% -4%,rgba(20,184,166,.14),transparent 30%),
    radial-gradient(circle at 88% 4%,rgba(74,77,124,.13),transparent 34%),
    radial-gradient(circle at 50% 120%,rgba(0,122,255,.06),transparent 42%),
    linear-gradient(160deg,#fbfcff 0%,#f2f5ff 52%,#fbfcff 100%);
}

/* ---------- Tipografía: eje de contraste ----------
   El display grotesque va SOLO en titulares de marketing.
   El mockup de la app queda en Inter para leerse como software real. */
.hero h1,
.section-head h2,
.experience-copy h2,
.cta h2,
.module-modal__content h3,
.bento-card h3{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:750;
}

/* Tracking corregido: de -.082em (apretado) a un rango que respira */
.hero h1{letter-spacing:-.028em;line-height:1;text-wrap:balance}
.section-head h2,.cta h2{letter-spacing:-.022em;line-height:1.02;text-wrap:balance}
.experience-copy h2{letter-spacing:-.024em;line-height:1.03;text-wrap:balance}
.bento-card h3,.module-modal__content h3{letter-spacing:-.028em;text-wrap:balance}
.workflow-card h3,.module-card h3,.faq-card h3{letter-spacing:-.015em}

/* Prosa: menos huérfanas, medida cómoda */
.hero p,.section-head p,.experience-copy p,.cta p,.faq-card p,.bento-card p{text-wrap:pretty}

/* Números del producto con cifras tabulares (no bailan al cambiar de módulo) */
.kpi b,.kpi span,.row,.operation-node,.impact-strip b,.mini-system-card__body strong{
  font-variant-numeric:tabular-nums;
}

/* Wordmark un pelín más presente */
.brand{letter-spacing:-.04em}

/* ---------- Accesibilidad: foco visible por teclado ---------- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-cta:focus-visible,
.theme-toggle:focus-visible,.module-card:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:14px;
}
.nav__links a:focus-visible{border-radius:8px}
/* El foco no debe quedar tapado por navbars fijas */
:where(section[id]){scroll-margin-top:96px}

/* ---------- Navegación: subrayado que se dibuja ---------- */
.nav__links a{position:relative;transition:color .2s var(--ease-quint)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--q-teal),var(--q-blue));
  transition:right .34s var(--ease-quint);
}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}

/* ---------- Botones: profundidad + brillo al pasar ---------- */
.btn{transition:transform .22s var(--ease-quint),box-shadow .28s var(--ease-quint),background-color .2s ease}
.btn--primary{position:relative;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 34px rgba(20,184,166,.30)}
.btn--primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.45) 50%,transparent 68%);
  transform:translateX(-130%);
}
.btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 22px 46px rgba(20,184,166,.42)}
.btn--primary:hover::after{animation:sheen .85s var(--ease-expo)}
.btn:active{transform:translateY(0) scale(.985)}
@keyframes sheen{to{transform:translateX(130%)}}

.nav-cta{transition:transform .2s var(--ease-quint),box-shadow .28s var(--ease-quint)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 20px 40px rgba(20,184,166,.34)}

/* ---------- Tarjetas: sombras en capas + borde vivo ---------- */
.bento-card,.workflow-card,.module-card,.faq-card{
  transition:transform .3s var(--ease-quint),box-shadow .3s var(--ease-quint),border-color .3s var(--ease-quint),background-color .25s ease;
  box-shadow:var(--lift-1);
}
.bento-card:hover,.workflow-card:hover,.module-card:hover,.faq-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--lift-2);
  border-color:rgba(20,184,166,.42);
}
/* El número del bento como sello, con un brillo sutil */
.bento-number,.icon{box-shadow:0 10px 24px rgba(20,184,166,.22),0 1px 0 rgba(255,255,255,.25) inset;transition:transform .3s var(--ease-quint)}
.bento-card:hover .bento-number{transform:translateY(-2px) rotate(-3deg)}

/* KPI del mockup: micro-lift más nítido */
.kpi{transition:transform .2s var(--ease-quint),box-shadow .2s var(--ease-quint),border-color .2s ease}

/* Proof-row: se vuelve interactiva */
.proof-row span{transition:transform .2s var(--ease-quint),border-color .2s ease,color .2s ease}
.proof-row span:hover{transform:translateY(-2px);border-color:rgba(20,184,166,.5);color:var(--text)}

/* Ventana del producto: sombra creíble + transición suave */
.system-window{box-shadow:var(--lift-3)}

/* ---------- Hero: aura detrás del producto ----------
   Blur ESTÁTICO (no se re-rasteriza por frame); sólo respira la opacidad,
   que va por el compositor y se mantiene fluida. */
.product-stage::before{
  content:"";position:absolute;z-index:-1;inset:-6% -4% -8% -4%;
  background:radial-gradient(45% 45% at 62% 38%,rgba(20,184,166,.30),transparent 70%),
             radial-gradient(42% 42% at 30% 66%,rgba(74,77,124,.30),transparent 72%),
             radial-gradient(38% 38% at 78% 74%,rgba(0,122,255,.16),transparent 70%);
  filter:blur(34px);border-radius:50%;opacity:.7;
  animation:auraBreathe 9s ease-in-out infinite;
}
:root[data-theme="light"] .product-stage::before{opacity:.5}
.product-orbit--one{animation:orbitFloat 12s ease-in-out infinite}
.product-orbit--two{animation:orbitFloat 15s ease-in-out infinite reverse}
@keyframes auraBreathe{0%,100%{opacity:.6}50%{opacity:.85}}
@keyframes orbitFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}

/* Punto "en vivo" del mockup con latido */
.live{position:relative;padding-left:22px}
.live::before{
  content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:livePulse 2.2s ease-out infinite;
}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ---------- Reveal: entrada con más carácter ---------- */
.reveal{opacity:0;transform:translateY(22px);filter:blur(6px)}
.reveal.is-visible{opacity:1;transform:none;filter:none;transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo),filter .7s var(--ease-expo)}

/* Título cinético: curva y delay más refinados */
.kinetic-word{transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo);transition-delay:calc(var(--w,0) * 42ms)}

/* Barra de progreso un poco más presente */
.scroll-progress{height:3px;box-shadow:0 0 14px rgba(20,184,166,.5)}

/* Parallax del hero (activado por JS, con tope suave) */
.product-stage{will-change:transform}
.floating-card{transition:transform .5s var(--ease-quint)}

/* ---------- Reduced motion: alternativa obligatoria ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-visible{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .kinetic-word{opacity:1!important;transform:none!important;transition:none!important}
  .motion-float,.motion-float-slow,.motion-enter,
  .product-orbit,.product-stage::before,.module-orb,
  .operation-node,.operation-pulse,.live::before,
  .btn--primary::after{animation:none!important}
  .btn:hover,.bento-card:hover,.workflow-card:hover,.module-card:hover,
  .faq-card:hover,.system-window:hover,.nav-cta:hover,.proof-row span:hover{transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ============================================================
   Momentos vivos (bespoke, específicos del producto)
   ============================================================ */

/* --- 1. Tour automático del mockup: barra de tiempo bajo el módulo activo --- */
.app-sidebar.touring button.active{position:relative;overflow:hidden}
.app-sidebar.touring button.active::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--q-teal),var(--q-blue));
  animation:tourFill var(--tour-dur,3400ms) linear forwards;
}
@keyframes tourFill{to{transform:scaleX(1)}}
/* El cambio de módulo entra con un respiro, no un corte seco */
.app-content .preview,.app-top h3,.kpi b{transition:opacity .3s var(--ease-quint)}

/* --- 2. Circuito vivo: pasos y nodos que se encienden en secuencia --- */
.operation-steps span{transition:background .45s var(--ease-quint),color .45s var(--ease-quint),box-shadow .45s var(--ease-quint)}
.operation-steps .active{box-shadow:0 10px 26px rgba(15,16,35,.30)}
.operation-node{transition:box-shadow .55s var(--ease-quint),border-color .55s var(--ease-quint)}
.operation-node.is-live{
  border-color:rgba(20,184,166,.65);
  box-shadow:0 0 0 4px rgba(20,184,166,.16),0 20px 50px rgba(0,0,0,.28);
}
:root[data-theme="light"] .operation-node.is-live{box-shadow:0 0 0 4px rgba(20,184,166,.18),0 20px 46px rgba(15,16,35,.14)}
/* Partícula que viaja por el borde de la orden mientras fluye */
.operation-card{position:absolute}
.operation-card .flow-spark{
  position:absolute;width:9px;height:9px;border-radius:50%;top:-4px;left:0;
  background:var(--q-teal);box-shadow:0 0 14px 3px rgba(20,184,166,.7);
  offset-path:inset(0 round 30px);offset-distance:0%;
  animation:sparkTravel 5.2s linear infinite;
}
@keyframes sparkTravel{to{offset-distance:100%}}

/* --- 3. Foco que envuelve: sigue el cursor en el hero --- */
.hero__spotlight{
  position:absolute;z-index:0;left:0;top:0;width:620px;height:620px;
  margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .5s ease;will-change:transform;
  background:radial-gradient(circle at center,rgba(20,184,166,.20),rgba(20,184,166,.06) 42%,transparent 68%);
}
:root[data-theme="light"] .hero__spotlight{
  background:radial-gradient(circle at center,rgba(20,184,166,.16),rgba(0,122,255,.05) 42%,transparent 66%);
}
.hero.spotlight-on .hero__spotlight{opacity:1}
.hero__grid{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .app-sidebar.touring button.active::after,
  .operation-card .flow-spark{animation:none!important;display:none}
  .hero__spotlight{display:none!important}
}

/* ---------- Toque de refinamiento en móvil ---------- */
@media (max-width:760px){
  .hero h1{letter-spacing:-.03em!important}
  .section-head h2,.experience-copy h2,.cta h2{letter-spacing:-.028em!important}
  .product-stage::before{display:none}
  .hero__spotlight{display:none!important}
}