/* ============================================================
   IA EXPRESS TARIJA — VERSIÓN B "RED NEURONAL"
   Capa visual que se carga encima de styles.css.
   Firma: el logo se arma con partículas en el hero y se
   deshace en polvo de datos al bajar.
   ============================================================ */

:root{
  --display:'Unbounded',system-ui,sans-serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --plasma:#7C5CFF;
  --vidrio:rgba(10,18,36,.55);
  --borde-grad:linear-gradient(135deg, rgba(53,214,255,.55), rgba(124,92,255,.28) 40%, rgba(46,123,255,.08) 75%);
}
:root:not([data-tema="claro"]){
  --fondo:#030512;
  --panel:#0A1122;
  --panel-2:#0E1730;
  --linea:#16244A;
}
[data-tema="claro"]{
  --plasma:#5B3FD9;
  --vidrio:rgba(255,255,255,.72);
  --borde-grad:linear-gradient(135deg, rgba(11,91,211,.45), rgba(91,63,217,.22) 45%, rgba(11,91,211,.06) 80%);
}

body.version-b{font-family:var(--sans);background:var(--fondo)}

/* ---------- Barra de progreso de lectura ---------- */
.progreso-b{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--azul),var(--neon),var(--plasma));
  box-shadow:0 0 12px rgba(53,214,255,.6);pointer-events:none;
}

/* ---------- Cursor de luz (solo con mouse) ---------- */
.cursor-b{
  position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:9998;
  border:1.5px solid rgba(53,214,255,.7);border-radius:50%;pointer-events:none;
  transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) scale(var(--cs,1));
  transition:width .2s,height .2s,margin .2s,background .2s,border-color .2s;
  mix-blend-mode:screen;opacity:0;
}
.cursor-b.activo{opacity:1}
.cursor-b.sobre{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(53,214,255,.1);border-color:var(--neon)}
[data-tema="claro"] .cursor-b{mix-blend-mode:normal;border-color:rgba(11,91,211,.6)}
@media (pointer:coarse){.cursor-b{display:none}}

/* ---------- Fondo: aurora lenta ---------- */
.version-b .fp-1{background:radial-gradient(circle, rgba(46,123,255,.32), transparent 66%)}
.version-b .fp-2{background:radial-gradient(circle, rgba(124,92,255,.22), transparent 66%)}

/* ---------- Tipografía ---------- */
.version-b h1,.version-b h2,.version-b h3{font-family:var(--display);letter-spacing:-.025em}
.version-b .cabecera-seccion h2,.version-b .nosotros-texto h2,.version-b .cta-final h2{
  font-weight:700;font-size:clamp(1.7rem,4vw,3rem);line-height:1.08;
}
.version-b .btn{font-family:var(--sans);font-weight:800;letter-spacing:.01em;border-radius:14px}

/* Etiquetas tipo código: indican la sección como si fuera una consola */
.version-b .eyebrow{font-family:var(--mono);letter-spacing:.16em}
.version-b .eyebrow::before{content:"// ";color:var(--plasma)}
.version-b .eyebrow.cifrando{color:var(--neon-suave)}

/* ---------- HERO ---------- */
.version-b .hero{padding:150px 22px 70px;isolation:isolate}
#neural{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.version-b .hero-velo{
  z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 60% at 72% 45%, transparent 0 40%, var(--fondo) 100%),
    linear-gradient(180deg, transparent 70%, var(--fondo) 100%);
}
.version-b .hero-contenido{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:30px;
  pointer-events:none;
}
.version-b .hero-texto{pointer-events:auto}
.version-b .hero h1{font-weight:800;font-size:clamp(2.1rem,5.2vw,4.3rem);line-height:1.04;letter-spacing:-.035em}
.version-b .hero h1 .neon{
  background:linear-gradient(100deg,var(--neon) 10%,#9FEFFF 45%,var(--plasma) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 18px rgba(53,214,255,.35));
}
.hero-escenario{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:center}
.escenario-anillo{
  position:absolute;inset:6%;border-radius:50%;
  border:1px dashed rgba(53,214,255,.22);
  animation:girarB 60s linear infinite;
}
.escenario-anillo::after{
  content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;border-radius:50%;
  background:var(--neon);box-shadow:0 0 14px var(--neon);
}
@keyframes girarB{to{transform:rotate(360deg)}}
.version-b .hero-hechos{border-top:0;padding-top:0;gap:10px;display:grid;grid-template-columns:repeat(4,auto);justify-content:start}
@media(max-width:560px){.version-b .hero-hechos{grid-template-columns:repeat(2,1fr)}}
.version-b .hero-hechos li{
  padding:10px 14px;border-radius:14px;
  background:var(--vidrio);border:1px solid var(--linea);backdrop-filter:blur(10px);
}
.version-b .hero-hechos b{font-size:1.25rem;text-shadow:none}

@media(max-width:860px){
  .version-b .hero{padding-top:118px}
  .version-b .hero-contenido{grid-template-columns:1fr;gap:6px}
  .hero-escenario{order:-1;max-width:300px;width:78%}
}

/* ---------- Tarjetas de vidrio con borde degradado ---------- */
.version-b .serv,
.version-b .tst,
.version-b .vacantes article,
.version-b .cobertura article,
.version-b .chat,
.version-b .stack-card,
.version-b .formulario-contacto{
  background:linear-gradient(var(--vidrio),var(--vidrio)) padding-box, var(--borde-grad) border-box;
  border:1px solid transparent;
  backdrop-filter:blur(14px);
}

/* Carrusel: borde que gira al pasar el mouse */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.version-b .cd-card{
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             conic-gradient(from var(--ang), transparent 0 60%, var(--neon) 75%, var(--plasma) 85%, transparent 95%) border-box;
  border:1.5px solid transparent;border-radius:20px;
}
.version-b .cd-card:hover{animation:bordeGira 2.2s linear infinite}
@keyframes bordeGira{to{--ang:360deg}}

/* ---------- Franja de texto bajo el hero ---------- */
.version-b .marquee{padding:16px 0;background:transparent}
.version-b .marquee-pista{font-family:var(--display);font-size:.95rem;letter-spacing:.02em;gap:40px;color:var(--tinta)}
.version-b .marquee-pista span:nth-child(even){color:var(--neon)}
.version-b .marquee-pista span::before{color:var(--plasma)}

/* ---------- Chat de mensajes ---------- */
.version-b .msj.ian{background:linear-gradient(135deg, rgba(46,123,255,.3), rgba(124,92,255,.22));border-color:rgba(124,92,255,.5)}

/* ---------- Video de IAN: marco holográfico ---------- */
.version-b .telefono{
  border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(160deg,var(--neon),var(--plasma) 50%,var(--azul)) border-box;
  box-shadow:0 0 60px rgba(53,214,255,.22),0 0 120px rgba(124,92,255,.18);
}

/* ---------- CTA final ---------- */
.version-b .cta-final{position:relative;overflow:hidden}
.version-b .cta-final::before{
  content:"";position:absolute;inset:-40%;z-index:-1;
  background:conic-gradient(from 0deg, transparent, rgba(53,214,255,.18), transparent 30%, rgba(124,92,255,.16), transparent 60%);
  animation:girarB 24s linear infinite;
}

/* ---------- Foco visible ---------- */
.version-b :focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion: reduce){
  .escenario-anillo,.version-b .cta-final::before,.version-b .cd-card:hover{animation:none}
}

/* ---------- Tema claro: en esta versión el hero es claro (no hay video) ---------- */
[data-tema="claro"] .version-b .hero h1{color:var(--titulo)}
[data-tema="claro"] .version-b .hero-sub,
[data-tema="claro"] .version-b .hero-hechos span{color:var(--tinta-suave)}
[data-tema="claro"] .version-b .hero .eyebrow{color:var(--neon);text-shadow:none}
[data-tema="claro"] .version-b .hero-hechos b{color:var(--azul);text-shadow:none}
[data-tema="claro"] .version-b .hero .btn-fantasma{color:var(--titulo);border-color:var(--linea);background:var(--fantasma-fondo)}
[data-tema="claro"] .version-b .hero h1 .neon{filter:none}
[data-tema="claro"] .escenario-anillo{border-color:rgba(11,91,211,.22)}
[data-tema="claro"] .escenario-anillo::after{background:var(--azul);box-shadow:0 0 12px var(--azul)}
[data-tema="claro"] .version-b .hero h1 .neon{background-image:linear-gradient(100deg,var(--azul) 10%,var(--neon) 50%,var(--plasma) 95%)}