/* DISERC · Titanium (2026-11)
   Capa común de estilo y animación para todo diserc.com, basada en la web
   de R-LabScan: grafito titanio + azul acero, cian médico y un acento rojo
   (~10 %). Se carga la ÚLTIMA en cada página y solo redefine tokens,
   fondos, botones y tarjetas: la maquetación de cada página no cambia.
   Las capas animadas (moléculas, rayas y halos) las crea ambient.js. */

:root{
  --bg:#11161c;
  --surface:#171d24;
  --surface-raised:#1d252e;
  --surface-elevated:#222c36;
  --surface-glass:rgba(23,29,36,.72);
  --surface-glass-strong:rgba(26,34,42,.88);

  --text:#e8eef4;
  --text-strong:#f4f8fb;
  --muted:#9eabb7;
  --subtle:#6f7f8c;

  --blue:#35d4e8;
  --cyan:#64e4ed;
  --blue-hover:#64e4ed;
  --blue-soft:rgba(53,212,232,.14);
  --cyan-soft:rgba(100,228,237,.10);

  --line:rgba(160,182,198,.16);
  --line-strong:rgba(160,182,198,.28);
  --line-brand:rgba(53,212,232,.42);

  --accent-red:#e3222d;
  --accent-red-soft:rgba(227,34,45,.16);

  --display:"Inter",ui-sans-serif,system-ui,sans-serif;
  --shadow-lg:0 24px 64px rgba(0,0,0,.38);
  --focus-ring:0 0 0 3px rgba(53,212,232,.22);

  /* Páginas de producto (labs) */
  --lb-blue:#35d4e8;
  --lb-cyan:#64e4ed;
  --lb-red:#ff6c74;
  --lb-card:linear-gradient(145deg,rgba(32,42,52,.9),rgba(23,31,39,.9));
}

html{background:#11161c}
body{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 16% 0%,#2b3945 0,transparent 34%),
    radial-gradient(ellipse at 92% 20%,#183846 0,transparent 32%),
    linear-gradient(180deg,#171d24,#11161c 75%,#0c1116) !important;
  background-attachment:fixed !important;
}

/* Titulares con el trazo de la web nueva */
h1,h2{letter-spacing:-.045em}
h1{font-weight:800}

/* ── Capas animadas (las inserta ambient.js) ───────────────────────── */
.ti-ambient,.ti-lines,.ti-orb{position:fixed;pointer-events:none}
.ti-ambient{inset:0;width:100%;height:100%;z-index:1;opacity:.55;mix-blend-mode:screen}
.ti-lines{inset:0;z-index:1;overflow:hidden;opacity:.45;mix-blend-mode:screen}
.ti-line{
  position:absolute;height:1px;width:42vw;min-width:260px;
  background:linear-gradient(90deg,transparent,#42d8e7,#8cf3f5,transparent);
  filter:drop-shadow(0 0 5px #42d8e7);
  transform:rotate(-24deg);animation:tiSweep 12s linear infinite;
}
.ti-line.a{top:18%;left:-45%;animation-delay:-2s}
.ti-line.b{top:48%;left:-55%;animation-delay:-6s;animation-duration:16s}
.ti-line.c{top:78%;left:-40%;animation-delay:-9s;animation-duration:13s}
.ti-line.d{top:32%;left:-60%;height:2px;background:linear-gradient(90deg,transparent,#f0525e,transparent);filter:drop-shadow(0 0 6px #f0525e);animation-delay:-4s;animation-duration:19s;opacity:.65}
@keyframes tiSweep{0%{transform:translateX(-20vw) rotate(-24deg);opacity:0}12%{opacity:.7}85%{opacity:.45}100%{transform:translateX(160vw) rotate(-24deg);opacity:0}}
.ti-orb{
  z-index:0;width:38vw;height:38vw;max-width:620px;max-height:620px;border-radius:50%;
  filter:blur(90px);opacity:.16;animation:tiDrift 24s ease-in-out infinite alternate;
}
.ti-orb.red{right:-18%;top:12%;background:radial-gradient(circle,#e3222d,transparent 70%);animation-duration:28s}
.ti-orb.cyan{left:-20%;bottom:5%;background:radial-gradient(circle,#42d8e7,transparent 70%);animation-delay:-8s}
@keyframes tiDrift{from{transform:translate3d(-3vw,-2vh,0) scale(.9)}to{transform:translate3d(5vw,6vh,0) scale(1.15)}}

/* Las capas usan z-index 1: la navegación, los diálogos y las barras fijas
   de cada página ya tienen z-index mayor y quedan por encima. */

/* ── Botones: degradado cian y destello periódico ──────────────────── */
.boton.primario,.btn-primary,.lb-btn.primary,.el-btn.primary,.ns-btn.primary,.eb-btn.primary,
a.btn.primary,button.btn.primary{
  background:linear-gradient(135deg,#53e3ed,#18b9d0) !important;color:#08151b !important;
  border-color:transparent !important;box-shadow:0 10px 28px rgba(27,197,211,.22);
  position:relative;overflow:hidden;
}
.boton.primario::after,.btn-primary::after,.lb-btn.primary::after,.el-btn.primary::after,.ns-btn.primary::after,.eb-btn.primary::after{
  content:"";position:absolute;top:-120%;left:-40%;width:24%;height:340%;transform:rotate(25deg);
  background:rgba(255,255,255,.4);animation:tiGlint 6s ease-in-out infinite;pointer-events:none;
}
@keyframes tiGlint{0%,65%,100%{left:-40%;opacity:0}75%{opacity:.8}95%{left:140%;opacity:0}}
.boton.secundario,.lb-btn.ghost,.el-btn.ghost{border-color:#3bd5e6 !important;color:#56dce9 !important;background:rgba(27,41,50,.7) !important}

/* ── Tarjetas: titanio ─────────────────────────────────────────────── */
.lb-feature,.lb-step,.lb-dl-card,.lb-plan,.lb-pain,.lb-persona,.lb-stat,
.el-feature,.el-step,.el-dl-card,.el-plan,
.tech-card,.service-card,.product-card,.card,.panel-card,.lab-card{
  background:linear-gradient(145deg,#202a34,#171f27) !important;
  border-color:#3a4a56 !important;
}

/* Kicker / eyebrow con el acento rojo de la gota */
.lb-kicker,.el-kicker,.eyebrow,.kicker,.section-kicker{color:#55dbe8}

@media (max-width:700px){.ti-line{opacity:.25}.ti-orb{opacity:.1}.ti-ambient{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .ti-ambient,.ti-lines,.ti-orb{display:none}
  .boton.primario::after,.btn-primary::after,.lb-btn.primary::after,.el-btn.primary::after{animation:none;display:none}
}
@media print{.ti-ambient,.ti-lines,.ti-orb{display:none}}