/* ══════════════════════════════════════════════════════════════════
   quantum.devel.group — sistema de diseño compartido
   Hereda del deck "Entendiendo Quantum": naranja Devel #FD2F00,
   tinta #1A1C1C, tipografía JUST Sans.
   Paleta de series validada por separado para claro y oscuro.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --na:#FD2F00; --na2:#FF6A3D; --durazno:#FFE9E2;
  --sup:#FFFDFB; --sup2:#F4F2EE; --sup3:#EAE7E1;
  --tinta:#1A1C1C; --tinta2:#5F5F5F; --tinta3:#8A8A87;
  --linea:#E4E1DB; --linea2:#D2CFC8;
  --s1:#FD2F00;  /* hardware real   */
  --s2:#1F6FEB;  /* teoría / ideal  */
  --s3:#0E9F6E;  /* éxito           */
  --s4:#8B5CF6;  /* acento          */
  --amb:#9A6200;
  --radio:14px;
  --sombra:0 1px 2px rgba(0,0,0,.05), 0 10px 30px -14px rgba(0,0,0,.16);
  --nav:72px;
}
:root[data-tema="oscuro"]{
  --sup:#1A1A19; --sup2:#232322; --sup3:#2E2E2B;
  --tinta:#F2F2EF; --tinta2:#A8A8A3; --tinta3:#7A7A76;
  --linea:#33332F; --linea2:#45453F;
  --s1:#F2551F; --s2:#3B82F6; --s3:#059669; --s4:#8B5CF6;
  --durazno:#3A2118; --amb:#E8A21F;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.55);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 12px)}
body{
  background:var(--sup); color:var(--tinta);
  font-family:"JUST Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.1; letter-spacing:-.018em; font-weight:700}
a{color:inherit}
.na{color:var(--na)}
.mono{font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;
      font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ── Barra superior ───────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:60; height:var(--nav);
  display:flex; align-items:center; gap:26px; padding:0 clamp(18px,4vw,52px);
  background:color-mix(in srgb, var(--sup) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.logo{display:flex; flex-direction:column; text-decoration:none; flex-shrink:0}
.logo .k{font-size:9.5px; letter-spacing:.19em; font-weight:700; color:var(--na)}
.logo .n{font-size:16.5px; font-weight:700; letter-spacing:-.02em}
.menu{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.menu a{
  font-size:14px; font-weight:600; text-decoration:none; color:var(--tinta2);
  padding:8px 13px; border-radius:9px; transition:.15s; white-space:nowrap;
}
.menu a:hover{background:var(--sup2); color:var(--tinta)}
.menu a.on{color:var(--tinta); background:var(--sup2)}
.utiles{display:flex; gap:8px; align-items:center; flex-shrink:0}
.lang{display:flex; border:1px solid var(--linea2); border-radius:9px;
      overflow:hidden}
.lang button{
  font-family:inherit; font-size:12.5px; font-weight:700; padding:7px 11px;
  border:none; background:transparent; color:var(--tinta3); cursor:pointer;
  transition:.15s;
}
.lang button.on{background:var(--na); color:#fff}
.tema{
  width:36px; height:36px; border-radius:9px; border:1px solid var(--linea2);
  background:transparent; color:var(--tinta); cursor:pointer; font-size:15px;
}
@media(max-width:820px){
  .menu{order:3; margin-left:0; width:100%; overflow-x:auto}
  .top{height:auto; flex-wrap:wrap; padding-top:12px; padding-bottom:10px}
  html{scroll-padding-top:130px}
}

/* ── Sub-navegación de secciones ──────────────────────────────────── */
.subnav{
  position:sticky; top:var(--nav); z-index:55; display:flex; gap:2px;
  padding:0 clamp(18px,4vw,52px); overflow-x:auto;
  background:color-mix(in srgb, var(--sup2) 94%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav a{
  font-size:13px; font-weight:600; text-decoration:none; color:var(--tinta3);
  padding:12px 13px; white-space:nowrap; border-bottom:2px solid transparent;
  transition:.15s;
}
.subnav a:hover{color:var(--tinta)}
.subnav a.on{color:var(--na); border-bottom-color:var(--na)}
@media(max-width:820px){.subnav{top:0}}

/* ── Estructura ───────────────────────────────────────────────────── */
main{display:block}
section{padding:clamp(46px,6vw,76px) clamp(18px,4vw,52px);
        border-bottom:1px solid var(--linea)}
section:last-of-type{border-bottom:none}
.wrap{max-width:1200px; margin:0 auto}
.kick{font-size:11px; letter-spacing:.16em; font-weight:700;
      text-transform:uppercase; color:var(--tinta3); margin-bottom:13px}
h2.tit{font-size:clamp(28px,4vw,44px); margin-bottom:15px}
.lead{font-size:clamp(16px,1.7vw,19px); color:var(--tinta2); max-width:840px;
      line-height:1.55}
.lead b{color:var(--tinta)}

/* ── Rejillas ─────────────────────────────────────────────────────── */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){.g4,.g5{grid-template-columns:repeat(2,1fr)}
                          .g3{grid-template-columns:1fr}}
@media(max-width:760px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

/* ── Piezas ───────────────────────────────────────────────────────── */
.card{background:var(--sup2); border:1px solid var(--linea);
      border-radius:var(--radio); padding:26px}
.card.viva{background:var(--durazno); border-color:var(--na)}
.card h3{font-size:20px; margin-bottom:8px}
.card p{font-size:15px; color:var(--tinta2); line-height:1.5}
.dato{font-size:34px; font-weight:700; line-height:1.05; letter-spacing:-.02em}
.dato-pie{font-size:13px; color:var(--tinta2); margin-top:5px}
.etq{font-size:10.5px; letter-spacing:.13em; font-weight:700;
     text-transform:uppercase; color:var(--tinta3)}

.nota{border-left:3px solid var(--na); background:var(--durazno);
      padding:17px 22px; border-radius:0 11px 11px 0; font-size:15px;
      line-height:1.55; margin-top:22px}
.globo{background:var(--tinta); color:var(--sup); border-radius:16px;
       padding:26px 32px; font-size:16.5px; line-height:1.5; margin-top:26px}
.globo b{color:var(--na2)}
:root[data-tema="oscuro"] .globo{background:#0E0E0D; color:#EDEDEA}

.btn{
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  padding:12px 22px; border-radius:10px; border:1px solid var(--na);
  background:var(--na); color:#fff; transition:.15s; text-decoration:none;
  display:inline-block;
}
.btn:hover{background:var(--na2); border-color:var(--na2)}
.btn.gh{background:transparent; color:var(--tinta); border-color:var(--linea2)}
.btn.gh:hover{background:var(--sup3); border-color:var(--tinta3)}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btns{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.pin{display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px;
     font-weight:700}
.pin.ok{background:color-mix(in srgb,var(--s3) 16%,transparent); color:var(--s3)}
.pin.no{background:color-mix(in srgb,var(--s1) 15%,transparent); color:var(--s1)}
.pin.med{background:color-mix(in srgb,var(--amb) 18%,transparent); color:var(--amb)}
.pin.gris{background:var(--sup3); color:var(--tinta2)}
.cinta{display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
       border-radius:20px; background:var(--sup3); font-size:12px;
       font-weight:700; color:var(--tinta2)}
.cinta i{width:7px; height:7px; border-radius:50%; background:var(--s3)}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:4px; background:var(--sup3); outline:none; margin:16px 0 6px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--na); cursor:pointer; border:4px solid var(--sup);
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--na);
  cursor:pointer; border:4px solid var(--sup);
}
select{
  font-family:inherit; font-size:14.5px; padding:9px 13px; border-radius:9px;
  border:1px solid var(--linea2); background:var(--sup); color:var(--tinta);
}

/* ── Tablas ───────────────────────────────────────────────────────── */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:10.5px; letter-spacing:.11em; font-weight:700;
   text-transform:uppercase; color:var(--tinta3);
   padding:0 14px 10px 0; border-bottom:1.5px solid var(--tinta)}
td{padding:13px 14px 13px 0; border-bottom:1px solid var(--linea);
   vertical-align:top}
tr:last-child td{border-bottom:none}
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabla-scroll table{min-width:820px}

/* ── Gráficos ─────────────────────────────────────────────────────── */
.leyenda{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px;
         font-size:12.5px; color:var(--tinta2); font-weight:600}
.leyenda i{display:inline-block; width:11px; height:11px; border-radius:3px;
           margin-right:7px; vertical-align:-1px}
.barras{display:flex; align-items:flex-end; gap:2px; height:180px;
        border-bottom:1px solid var(--linea2)}
.col{flex:1; display:flex; flex-direction:column; justify-content:flex-end;
     height:100%}
.par{display:flex; gap:2px; align-items:flex-end; justify-content:center;
     height:100%}
.bar{border-radius:4px 4px 0 0; min-height:2px; transition:height .35s ease;
     cursor:pointer}
.bar:hover{filter:brightness(1.16)}
.ejex{display:flex; gap:2px; margin-top:8px}
.ejex span{flex:1; text-align:center; font-size:10.5px; color:var(--tinta3);
           font-family:"Cascadia Mono",Consolas,monospace}
.tip{position:fixed; pointer-events:none; z-index:99; opacity:0;
     background:var(--tinta); color:var(--sup); padding:8px 12px;
     border-radius:8px; font-size:12.5px; line-height:1.45;
     transition:opacity .12s; box-shadow:0 6px 20px rgba(0,0,0,.28);
     max-width:250px}
.tip.ver{opacity:1}
.tip b{color:var(--na2)}

/* ══════════════════════════════════════════════════════════════════
   Display LED de 7 segmentos — la cuenta regresiva al Q-Day.
   Cada dígito son siete segmentos reales; los apagados quedan tenues,
   como en un panel de verdad. El panel es oscuro en los dos temas.
   ══════════════════════════════════════════════════════════════════ */
.led-panel{
  position:relative; background:#0A0908; border-radius:16px;
  padding:clamp(26px,4vw,48px) clamp(18px,3vw,44px);
  overflow:hidden; border:1px solid #1E1C1A;
}
.led-panel::before{           /* textura de matriz de puntos */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:radial-gradient(circle, rgba(0,0,0,.55) 1px, transparent 1.4px);
  background-size:4px 4px; opacity:.85;
}
.led-panel::after{            /* viñeta */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.65));
}
.led-fila{
  display:flex; align-items:flex-end; justify-content:center; gap:.16em;
  font-size:clamp(38px,11vw,132px); line-height:1; position:relative; z-index:1;
}
.led-grupo{display:flex; flex-direction:column; align-items:center; gap:.5em}
.led-digitos{display:flex; gap:.09em}
.led-etq{
  font-size:.13em; letter-spacing:.22em; font-weight:700; color:#7A2A17;
  text-transform:uppercase; font-family:"JUST Sans",system-ui,sans-serif;
}
.led-sep{
  display:flex; flex-direction:column; justify-content:center; gap:.22em;
  height:1em; padding-bottom:.62em;
}
.led-sep i{width:.1em; height:.1em; border-radius:50%; background:#FF3B14;
           box-shadow:0 0 .12em #FF3B14, 0 0 .3em rgba(255,59,20,.6)}
.led-sep.tenue i{background:rgba(255,59,20,.13); box-shadow:none}

.dig{position:relative; width:.62em; height:1em}
.dig i{position:absolute; display:block; background:rgba(255,59,20,.085)}
.dig i.on{
  background:#FF3B14;
  box-shadow:0 0 .1em rgba(255,59,20,.95), 0 0 .3em rgba(255,59,20,.55),
             0 0 .7em rgba(255,59,20,.28);
}
/* geometría de los siete segmentos */
.dig .a{left:.06em; top:0; width:calc(100% - .12em); height:.13em;
        clip-path:polygon(0 50%,14% 0,86% 0,100% 50%,86% 100%,14% 100%)}
.dig .g{left:.06em; top:calc(50% - .065em); width:calc(100% - .12em); height:.13em;
        clip-path:polygon(0 50%,14% 0,86% 0,100% 50%,86% 100%,14% 100%)}
.dig .d{left:.06em; bottom:0; width:calc(100% - .12em); height:.13em;
        clip-path:polygon(0 50%,14% 0,86% 0,100% 50%,86% 100%,14% 100%)}
.dig .f{left:0; top:.06em; width:.13em; height:calc(50% - .12em);
        clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%)}
.dig .b{right:0; top:.06em; width:.13em; height:calc(50% - .12em);
        clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%)}
.dig .e{left:0; top:calc(50% + .06em); width:.13em; height:calc(50% - .12em);
        clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%)}
.dig .c{right:0; top:calc(50% + .06em); width:.13em; height:calc(50% - .12em);
        clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%)}
@media(prefers-reduced-motion:reduce){.dig i{transition:none}}

/* ── Pie ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--linea); background:var(--sup2)}
.pie-cols{
  max-width:1200px; margin:0 auto; padding:52px clamp(18px,4vw,52px) 38px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:38px;
}
@media(max-width:920px){.pie-cols{grid-template-columns:1fr 1fr; gap:30px}}
@media(max-width:560px){.pie-cols{grid-template-columns:1fr}}
.pie-cols h4{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
             color:var(--tinta3); margin-bottom:15px}
.pie-cols a{display:block; color:var(--tinta2); text-decoration:none;
            font-size:14px; padding:5px 0; transition:.15s}
.pie-cols a:hover{color:var(--na)}
.pie-marca .k{font-size:10px; letter-spacing:.19em; font-weight:700;
              color:var(--na)}
.pie-marca .n{font-size:21px; font-weight:700; letter-spacing:-.02em;
              margin-top:4px}
.pie-marca p{font-size:13.5px; color:var(--tinta2); line-height:1.55;
             margin-top:12px; max-width:330px}
.pie-nota{font-size:12.5px; color:var(--tinta3); line-height:1.55}
.pie-barra{
  border-top:1px solid var(--linea); padding:20px clamp(18px,4vw,52px);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.05em; color:var(--tinta3);
  max-width:1200px; margin:0 auto;
}

/* ── Utilidades ───────────────────────────────────────────────────── */
.formula{font-family:"Cascadia Mono",Consolas,monospace; font-size:16px;
         background:var(--sup3); padding:14px 18px; border-radius:10px;
         margin:14px 0; overflow-x:auto; white-space:nowrap}
.sep{height:1px; background:var(--linea); margin:24px 0}
.amp{display:flex; align-items:center; gap:12px; margin-bottom:7px}
.amp .bs{font-family:"Cascadia Mono",Consolas,monospace; font-size:13px;
         font-weight:700; min-width:52px}
.amp .pista{flex:1; height:22px; background:var(--sup3); border-radius:5px;
            overflow:hidden}
.amp .relleno{height:100%; border-radius:5px; transition:width .3s ease}
.amp .pct{font-size:12.5px; color:var(--tinta2); min-width:54px;
          text-align:right; font-variant-numeric:tabular-nums}