/* ============================================================
   Sistema visual de Libresoftsolutions
   Lo que comparten las páginas de producto y de documento:
   tokens, base tipográfica, cabecera, botones y la portada azul
   con sus órbitas.

   Se carga ANTES del <style> de cada página, para que cada una
   pueda ajustar lo suyo encima — el ancho con --shell, por
   ejemplo. Aquí solo entra lo que es idéntico en varias páginas:
   si algo es de una sola, se queda en su página.
   ============================================================ */

:root{
  color-scheme:light;

  /* la marca */
  --brand:#012D7B;
  --brand-600:#0A3E96;
  --brand-800:#011E52;
  --brand-tint:#E4EAF6;

  /* superficies y texto */
  --ground:#F2F4F8;
  --surface:#FFFFFF;
  --surface-2:#EAEEF5;
  --ink:#0E1729;
  --ink-2:#4C5A73;
  --ink-3:#5E6B80;
  --rule:#DCE2EC;
  --rule-2:#BFC9D9;

  /* estados */
  --ok:#1E7F5C;      --ok-bg:#E4F4EC;
  --warn:#9A6100;    --warn-bg:#FCF0DA;
  --crit:#B3261E;    --crit-bg:#FBE6E4;

  /* sobre fondo navy */
  --on-navy-2:#C2D3EE;
  --on-navy-3:#9FB8E2;
  --navy-rule:#1E4C9C;
  --navy-arc:#0C4093;
  --navy-flow:#7FB0F2;

  /* tipografías */
  --ff-display:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  /* medidas: cada página puede estrechar el ancho con --shell */
  --shell:1180px;
  --pad:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);font-weight:700;line-height:1.08;letter-spacing:-0.022em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
svg{display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);position:relative}
.eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:var(--brand);
}
.eyebrow::before{
  content:"";width:13px;height:13px;flex:none;border-radius:50%;border:2.5px solid currentColor;
  clip-path:polygon(0 0,100% 0,100% 34%,42% 34%,42% 100%,0 100%);
}
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--rule);
}
.masthead .shell{display:flex;align-items:center;gap:clamp(12px,3vw,32px);min-height:78px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo .mark{width:40px;height:40px;flex:none;background:url("logo-lss-384.png") center/contain no-repeat}
.logo .txt{font-family:var(--ff-display);font-weight:700;font-size:16.5px;letter-spacing:-0.022em;line-height:1.1}
.logo .txt small{display:block;font-family:var(--ff-body);font-weight:500;font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.crumb{margin-left:auto;font-size:14.5px;color:var(--ink-2);text-decoration:none;display:none}
.crumb:hover{color:var(--brand)}
@media (min-width:760px){.crumb{display:block}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-body);font-size:16px;font-weight:600;
  padding:13px 26px;text-decoration:none;border:1.5px solid transparent;border-radius:999px;
  transition:background-color .18s,color .18s,border-color .18s;
}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn-ghost{background:transparent;color:var(--brand);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-white{background:#fff;color:var(--brand);border-color:#fff}
.btn-white:hover{background:var(--brand-tint);border-color:var(--brand-tint)}
.masthead .btn{margin-left:auto;padding:10px 20px;font-size:15px}
@media (min-width:760px){.masthead .btn{margin-left:22px}}
.hero .glyph circle{fill:none;stroke:var(--navy-arc);stroke-linecap:round}
.hero .glyph g{transform-origin:300px 300px;transform-box:view-box}
.hero .a1{animation:arcspin 120s linear infinite}
.hero .a2{animation:arcspin 78s linear infinite reverse}
@keyframes arcspin{to{transform:rotate(360deg)}}
.hero .eyebrow{color:var(--navy-flow)}
.arc-edge path{fill:var(--ground)}
section{scroll-margin-top:90px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary::-webkit-details-marker{display:none}

/* ============================================================
   Modo oscuro
   No es invertir los colores: es otra paleta, elegida para que el
   azul de la marca siga siendo el azul de la marca sobre un fondo
   que no queme la pantalla de noche.

   Tres estados, como manda el navegador:
   · el visitante no eligió nada  → manda su sistema operativo
   · eligió claro                 → gana su elección
   · eligió oscuro                → gana su elección
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    color-scheme:dark;

    /* el azul sube de tono: sobre fondo oscuro, el 012D7B se apaga */
    --brand:#4E8DF5;
    --brand-600:#6BA2FF;
    --brand-800:#0A1A36;
    --brand-tint:#15264A;

    --ground:#0A101D;
    --surface:#121B2D;
    --surface-2:#18233A;
    --ink:#E8EEF8;
    --ink-2:#AFBFD6;
    --ink-3:#8496B1;
    --rule:#243149;
    --rule-2:#324364;

    --ok:#5FD3A3;      --ok-bg:#0F2A20;
    --warn:#E6B45A;    --warn-bg:#2A2010;
    --crit:#F08C84;    --crit-bg:#2E1512;

    /* sobre las bandas azules, que siguen siendo azules */
    --on-navy-2:#C2D3EE;
    --on-navy-3:#9FB8E2;
    --navy-rule:#24427C;
    --navy-arc:#13325F;
    --navy-flow:#7FB0F2;
  }
}
:root[data-tema="oscuro"]{
  color-scheme:dark;
  --brand:#4E8DF5;
  --brand-600:#6BA2FF;
  --brand-800:#0A1A36;
  --brand-tint:#15264A;
  --ground:#0A101D;
  --surface:#121B2D;
  --surface-2:#18233A;
  --ink:#E8EEF8;
  --ink-2:#AFBFD6;
  --ink-3:#8496B1;
  --rule:#243149;
  --rule-2:#324364;
  --ok:#5FD3A3;      --ok-bg:#0F2A20;
  --warn:#E6B45A;    --warn-bg:#2A2010;
  --crit:#F08C84;    --crit-bg:#2E1512;
  --navy-rule:#24427C;
  --navy-arc:#13325F;
}

/* los botones: en oscuro el primario lleva texto oscuro sobre azul claro,
   que es lo que de verdad contrasta */
@media (prefers-color-scheme: dark){
  :where(:root:not([data-tema="claro"])) .btn-primary,
  :where(:root:not([data-tema="claro"])) .btn-primary:hover{color:#07152C}
}
:where(:root[data-tema="oscuro"]) .btn-primary,
:where(:root[data-tema="oscuro"]) .btn-primary:hover{color:#07152C}

/* ------------------------------------------------------------
   Los diagramas están dibujados en SVG con colores fijos en los
   atributos. En oscuro se reasignan por token, para que la caja
   blanca no quede flotando en medio de la página.
   Se escriben una sola vez aquí: los usan varias páginas.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) svg :is(rect,circle,path,ellipse)[fill="#fff"],
  :root:not([data-tema="claro"]) svg :is(rect,circle,path,ellipse)[fill="#FFFFFF"]{fill:var(--surface)}
  :root:not([data-tema="claro"]) svg [fill="#F7F9FD"]{fill:var(--surface-2)}
  :root:not([data-tema="claro"]) svg [fill="#0E1729"]{fill:var(--ink)}
  :root:not([data-tema="claro"]) svg [fill="#5E6B80"]{fill:var(--ink-3)}
  :root:not([data-tema="claro"]) svg [stroke="#DCE2EC"]{stroke:var(--rule)}
  :root:not([data-tema="claro"]) svg :is(rect,circle,path,ellipse)[fill="#012D7B"]{fill:var(--brand-800)}
  :root:not([data-tema="claro"]) svg :is(text,tspan)[fill="#012D7B"]{fill:var(--brand)}
  :root:not([data-tema="claro"]) svg [stroke="#012D7B"]{stroke:var(--brand)}
  :root:not([data-tema="claro"]) svg [fill="#0A3E96"]{fill:var(--brand)}
  :root:not([data-tema="claro"]) svg [stroke="#0A3E96"]{stroke:var(--brand)}
}
:root[data-tema="oscuro"] svg :is(rect,circle,path,ellipse)[fill="#fff"],
:root[data-tema="oscuro"] svg :is(rect,circle,path,ellipse)[fill="#FFFFFF"]{fill:var(--surface)}
:root[data-tema="oscuro"] svg [fill="#F7F9FD"]{fill:var(--surface-2)}
:root[data-tema="oscuro"] svg [fill="#0E1729"]{fill:var(--ink)}
:root[data-tema="oscuro"] svg [fill="#5E6B80"]{fill:var(--ink-3)}
:root[data-tema="oscuro"] svg [stroke="#DCE2EC"]{stroke:var(--rule)}
:root[data-tema="oscuro"] svg :is(rect,circle,path,ellipse)[fill="#012D7B"]{fill:var(--brand-800)}
:root[data-tema="oscuro"] svg :is(text,tspan)[fill="#012D7B"]{fill:var(--brand)}
:root[data-tema="oscuro"] svg [stroke="#012D7B"]{stroke:var(--brand)}
:root[data-tema="oscuro"] svg [fill="#0A3E96"]{fill:var(--brand)}
:root[data-tema="oscuro"] svg [stroke="#0A3E96"]{stroke:var(--brand)}

/* ------------------------------------------------------------
   Contraste en oscuro: la banda azul vuelve a ser azul profundo
   (el azul claro es para texto, no para fondos grandes) y lo que
   usa el azul como fondo lleva texto oscuro.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark){

:root:not([data-tema="claro"]) .navy{background:#0E1A33}
:root:not([data-tema="claro"]) .btn-white{color:#0A1A36}
:root:not([data-tema="claro"]) .btn-white:hover{color:#0A1A36}

}

:root[data-tema="oscuro"] .navy{background:#0E1A33}
:root[data-tema="oscuro"] .btn-white{color:#0A1A36}
:root[data-tema="oscuro"] .btn-white:hover{color:#0A1A36}