/* ============================================================
   enterprise.css — capa de refinamiento visual (nivel premium)
   Carga DESPUÉS de styles.css + v2.css. Solo transform/opacity.
   Mantiene la identidad azul-morado de Syncra; añade profundidad,
   "lit edges", micro-interacciones y momentos premium.
   ============================================================ */

/* ---- 1 · HERO: más profundidad y vida sutil ---- */
.hero.hero-c{ position:relative; }
/* glows con deriva lentísima (premium, no distrae) */
.hero-bg .g1{ animation:floatA 22s ease-in-out infinite; }
.hero-bg .g2{ animation:floatB 26s ease-in-out infinite; }
@keyframes floatA{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes floatB{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,24px)} }
/* spotlight superior: foco de luz que da volumen al fondo oscuro */
.hero.hero-c::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 50% at 50% -8%, rgba(120,150,255,.18), transparent 70%);
}
/* viñeta inferior para fundir con la sección siguiente */
.hero.hero-c::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:160px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
}
/* headline con acento de gradiente animado (vivo pero sobrio) */
.hero-c h1 .grad-text, .grad-text{
  background-size:200% auto; animation:shimmer 8s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

/* mockup del hero: marco premium con reflejo */
.hero.hero-c .hero-shot{ position:relative; }
.hero.hero-c .hero-shot img, .hero.hero-c .hero-shot .win{
  border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(8,11,30,.65), 0 8px 24px rgba(8,11,30,.35),
             inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- 2 · CARDS: borde "lit" de marca al hover ---- */
.qi-card, .card, .studio, .solve-card{ position:relative; isolation:isolate; }
.qi-card::after, .card::after, .studio::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1;
  background:linear-gradient(135deg, rgba(45,99,246,.55), rgba(106,48,214,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--ease);
}
.qi-card:hover::after, .card:hover::after, .studio:hover::after{ opacity:1; }
.qi-card, .card, .studio{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.qi-card:hover, .card:hover{ transform:translateY(-6px); }

/* ---- 3 · BOTONES: barrido de luz al hover ---- */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); transition:left .6s var(--ease);
}
.btn-primary:hover::after{ left:140%; }

/* ---- 4 · SEPARADORES de sección sutiles (estructura premium) ---- */
.section + .section:not(.dark-sec)::before,
.section.dark-sec::before{
  content:""; display:block; height:1px; max-width:var(--container);
  margin:0 auto; background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ---- 5 · REVEAL al scroll: blur-in elegante ---- */
.reveal{ will-change:transform,opacity; }
@media (prefers-reduced-motion:no-preference){
  .reveal:not(.in){ filter:blur(6px); }
  .reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
  .reveal.in{ filter:blur(0); }
}

/* ---- 6 · TRUST BAR: separación premium con punto ---- */
.trust-sec .trust-bar li + li{ position:relative; }
/* logos con micro-lift ya en v2; reforzamos transición */
.trust-sec .trust-bar img{ transition:transform .3s var(--ease), opacity .3s; }

/* ---- 7 · TIPOGRAFÍA display: tracking y balance ---- */
h1, h2, .grad-text{ text-wrap:balance; }
.hero-c h1{ letter-spacing:-.025em; }
.lead{ text-wrap:pretty; }

/* ---- 8 · LINKS de texto: subrayado que crece ---- */
.footer-col a, .crumb a{
  background-image:linear-gradient(var(--brand-blue),var(--brand-blue));
  background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s var(--ease);
}
.footer-col a:hover, .crumb a:hover{ background-size:100% 1.5px; }

/* ---- 9 · SCROLLBAR fina de marca (detalle pro en desktop) ---- */
@media (pointer:fine){
  *{ scrollbar-width:thin; scrollbar-color:rgba(45,99,246,.4) transparent; }
}

/* ---- accesibilidad: sin animación si el usuario lo pide ---- */
@media (prefers-reduced-motion:reduce){
  .hero-bg .g1, .hero-bg .g2, .grad-text{ animation:none !important; }
  .btn-primary::after{ display:none; }
}

/* ============================================================
   VB · HERO espectacular — mesh + flotación del producto
   ============================================================ */
.hero.hero-c{ background:
  radial-gradient(40% 50% at 12% 18%, rgba(45,99,246,.20), transparent 60%),
  radial-gradient(45% 55% at 88% 12%, rgba(106,48,214,.20), transparent 62%),
  radial-gradient(60% 70% at 50% 120%, rgba(45,99,246,.10), transparent 60%),
  var(--ink); }
/* el mockup flota suave y se inclina un pelín (premium, no mareante) */
@media (prefers-reduced-motion:no-preference){
  .hero.hero-c .hero-shot .win{ animation:floatShot 7s ease-in-out infinite; transform-origin:center; }
}
@keyframes floatShot{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
/* halo bajo el mockup para anclarlo */
.hero.hero-c .hero-shot{ position:relative; }
.hero.hero-c .hero-shot::before{
  content:""; position:absolute; left:8%; right:8%; bottom:-30px; height:60px; z-index:-1;
  background:radial-gradient(50% 100% at 50% 0, rgba(45,99,246,.35), transparent 70%); filter:blur(14px);
}

/* ============================================================
   VD · TIPOGRAFÍA y espaciado — escala fluida y ritmo
   ============================================================ */
:root{
  --step--1:clamp(13px,.8vw + 11px,15px);
  --step-0:clamp(15.5px,.4vw + 14px,17px);
  --step-1:clamp(19px,1vw + 16px,22px);
  --step-2:clamp(24px,2vw + 18px,32px);
  --step-3:clamp(30px,3.2vw + 18px,46px);
  --step-4:clamp(38px,5vw + 16px,68px);
}
.lead{ font-size:var(--step-1); line-height:1.55; color:var(--text-2); max-width:60ch; }
.hero-c h1{ font-size:var(--step-4); line-height:1.03; letter-spacing:-.03em; }
.section .sec-head h2, h2.h-xl{ font-size:var(--step-3); line-height:1.08; letter-spacing:-.025em; }
.eyebrow{ font-size:var(--step--1); letter-spacing:.18em; }
/* ritmo: aire generoso entre intro de sección y contenido */
.sec-head{ margin-bottom:clamp(34px,4vw,56px); }
p{ text-wrap:pretty; }
/* números/datos display con tabular para alinear */
.kpi .n, .stat-n, .num{ font-variant-numeric:tabular-nums; }