/* Hoja de las fichas tecnicas interactivas.
   Extraida de la ficha de un toque, que las tres traian embebida. La usa
   la ficha del terminal de cabeza, escrita aparte. Las otras tres siguen
   con su copia adentro porque cada una trae reglas propias suyas. */

/* ============ TOKENS — paleta clara por defecto ============ */
:root{
  --ground:#e9edf2; --panel:#ffffff; --panel-2:#f2f5f8;
  --ink:#131c2a; --ink-2:#4a586d; --steel:#6b7a90;
  --rule:rgba(19,28,42,.14); --rule-soft:rgba(19,28,42,.07);
  --accent:#e08c00; --accent-ink:#3a2400; --accent-soft:rgba(224,140,0,.13);
  --signal:#0d7f8e; --ok:#1a7f4f; --ok-soft:rgba(26,127,79,.12);
  --no:#b23b2e; --no-soft:rgba(178,59,46,.12);
  --shadow:0 1px 2px rgba(15,26,42,.06),0 12px 32px -18px rgba(15,26,42,.35);
  --hero-tint:linear-gradient(180deg,rgba(9,14,22,.55) 0%,rgba(9,14,22,.72) 55%,rgba(9,14,22,.94) 100%);
  --grid-line:rgba(19,28,42,.05);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0c121c; --panel:#141d2b; --panel-2:#1a2434;
    --ink:#e7edf5; --ink-2:#a3b0c4; --steel:#8492a8;
    --rule:rgba(255,255,255,.11); --rule-soft:rgba(255,255,255,.055);
    --accent:#f8b526; --accent-ink:#241800; --accent-soft:rgba(248,181,38,.14);
    --signal:#3fbdd0; --ok:#4ec98a; --ok-soft:rgba(78,201,138,.14);
    --no:#f0806f; --no-soft:rgba(240,128,111,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -22px rgba(0,0,0,.9);
    --hero-tint:linear-gradient(180deg,rgba(6,10,17,.5) 0%,rgba(6,10,17,.7) 55%,rgba(12,18,28,.97) 100%);
    --grid-line:rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"]{
  --ground:#0c121c; --panel:#141d2b; --panel-2:#1a2434;
  --ink:#e7edf5; --ink-2:#a3b0c4; --steel:#8492a8;
  --rule:rgba(255,255,255,.11); --rule-soft:rgba(255,255,255,.055);
  --accent:#f8b526; --accent-ink:#241800; --accent-soft:rgba(248,181,38,.14);
  --signal:#3fbdd0; --ok:#4ec98a; --ok-soft:rgba(78,201,138,.14);
  --no:#f0806f; --no-soft:rgba(240,128,111,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -22px rgba(0,0,0,.9);
  --hero-tint:linear-gradient(180deg,rgba(6,10,17,.5) 0%,rgba(6,10,17,.7) 55%,rgba(12,18,28,.97) 100%);
  --grid-line:rgba(255,255,255,.04);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;margin:0;line-height:.98}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ============ HERO ============ */
.hero{position:relative;min-height:min(94svh,780px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2;background:#0a0f18}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  transform:scale(1.06);animation:heroDrift 26s ease-in-out infinite alternate}
.hero-img::after{content:"";position:absolute;inset:0;background:var(--hero-tint)}
@keyframes heroDrift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.14) translateY(-2%)}}
.hero-inner{padding:0 0 46px;color:#f2f6fb}
.hero h1{font-size:clamp(46px,9.2vw,116px);color:#fff;margin:14px 0 0;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero-sub{max-width:56ch;color:#c9d4e2;font-size:clamp(15px,1.6vw,18px);margin-top:18px}
.hero-strip{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border-top:1px solid rgba(255,255,255,.18)}
.hero-strip div{flex:1 1 170px;padding:16px 20px 4px 0;border-right:1px solid rgba(255,255,255,.12)}
.hero-strip div:last-child{border-right:0}
.hero-strip b{display:block;font-family:'Barlow Condensed',sans-serif;font-size:34px;color:#fff;line-height:1}
.hero-strip>div>span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#93a3b8}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{transition-delay:calc(var(--i,0) * 110ms)}

/* ============ SECCIONES ============ */
section{padding:clamp(56px,8vw,104px) 0;position:relative}
.sec-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:34px}
.sec-head h2{font-size:clamp(30px,4.6vw,50px)}
.sec-head p{margin:0;color:var(--ink-2);max-width:52ch;flex:1 1 320px;font-size:15px}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ============ CONFIGURADOR ============ */
.config{background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  box-shadow:var(--shadow);overflow:hidden}
.picker{display:flex;gap:0;border-bottom:1px solid var(--rule);background:var(--panel-2);
  overflow-x:auto;scrollbar-width:thin}
.picker button{flex:1 0 auto;min-width:104px;background:none;border:0;border-right:1px solid var(--rule-soft);
  padding:16px 10px 14px;cursor:pointer;color:var(--ink-2);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:27px;text-transform:uppercase;line-height:1;position:relative;
  transition:color .25s,background .25s}
.picker button small{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.11em;margin-top:5px;color:var(--steel)}
.picker button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);
  transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.picker button:hover{color:var(--ink);background:var(--accent-soft)}
.picker button[aria-selected="true"]{color:var(--ink);background:var(--panel)}
.picker button[aria-selected="true"]::after{transform:scaleX(1)}
.picker button[aria-selected="true"] small{color:var(--accent)}

.stage{display:grid;grid-template-columns:1.55fr 1fr;gap:0}
@media(max-width:860px){.stage{grid-template-columns:1fr}}
.draw{padding:26px 26px 12px;border-right:1px solid var(--rule);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:26px 26px}
@media(max-width:860px){.draw{border-right:0;border-bottom:1px solid var(--rule)}}
.draw svg{width:100%;height:auto;display:block}
#dwg{color:var(--ink-2)}
#dwg .pat{stroke:var(--ink-2)}
#barL,#barR{fill:var(--panel-2);stroke:var(--ink-2);stroke-width:2}
#barLp,#barRp{stroke:none}
#sleeve{fill:var(--accent-soft);stroke:var(--accent);stroke-width:3}
.bolt{fill:var(--accent);stroke:none}
.stem{fill:var(--ink-2);opacity:.55;stroke:none}
#gDim path{stroke:var(--ink-2);fill:none;stroke-width:1.6}
#gDim text{fill:var(--ink-2)}
#dimP{stroke:var(--signal)!important}
#txtP{fill:var(--signal)}
.geo{transition:x .5s cubic-bezier(.2,.8,.3,1),y .5s cubic-bezier(.2,.8,.3,1),
     width .5s cubic-bezier(.2,.8,.3,1),height .5s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.geo{transition:none}}

/* ---- gráficos del paso a paso ---- */
.step-fig{border:1px solid var(--rule-soft);border-radius:3px;padding:6px;margin-bottom:14px;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:14px 14px}
.step-fig svg{width:100%;height:auto;display:block}
.s-bar{fill:var(--panel-2);stroke:var(--ink-2);stroke-width:1.6}
.s-cup{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2}
.s-arr{stroke:var(--signal);stroke-width:1.8;fill:none;stroke-linecap:round}
.s-head{fill:var(--signal)}
.s-cut{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:3 3;fill:none}
.s-ok{stroke:var(--accent);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-lbl{fill:var(--steel);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em}
.draw-cap{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel);padding:6px 2px 8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft)}
.spec{background:var(--panel);padding:20px 20px 17px}
.spec>span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel)}
.spec b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:39px;line-height:1.05;margin-top:5px}
.spec b i{font-style:normal;font-size:16px;color:var(--ink-2);margin-left:3px;font-family:'IBM Plex Sans',sans-serif;font-weight:400}
.spec.wide{grid-column:1/-1}
.spec.wide b{font-size:22px;line-height:1.25}
.flash{animation:flash .55s ease-out}
@keyframes flash{0%{color:var(--accent)}100%{color:inherit}}

/* ---- comprobador de pelo de barra ---- */
.check{grid-column:1/-1;background:var(--panel-2);padding:20px;display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule)}
.check label{flex:1 1 210px}
.check span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel);margin-bottom:6px}
.check input{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;padding:10px 12px;font-family:'IBM Plex Mono',monospace;font-size:17px;font-variant-numeric:tabular-nums}
.check input:focus{border-color:var(--accent);outline:none}
.verdict{flex:1 1 210px;border-radius:3px;padding:11px 14px;font-size:13.5px;line-height:1.4}
.verdict.ok{background:var(--ok-soft);color:var(--ok)}
.verdict.no{background:var(--no-soft);color:var(--no)}
.verdict b{font-family:'IBM Plex Mono',monospace;font-weight:500}

/* ============ CALCULADORA ============ */
.calc{display:grid;grid-template-columns:1fr 1.15fr;gap:26px;align-items:start}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:26px;box-shadow:var(--shadow)}
.field{display:block;margin-bottom:19px}
.field>span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.field input{width:100%;background:var(--panel-2);color:var(--ink);border:1px solid var(--rule);
  border-radius:3px;padding:12px 14px;font-family:'IBM Plex Mono',monospace;font-size:18px;
  font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s}
.field input:focus{border-color:var(--accent);background:var(--panel);outline:none}
.field em{display:block;font-style:normal;font-size:12px;color:var(--steel);margin-top:6px}
.out{background:var(--panel);border:1px solid var(--rule);border-radius:4px;overflow:hidden;box-shadow:var(--shadow)}
.out-head{background:var(--accent);color:var(--accent-ink);padding:20px 26px}
.out-head>span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.75}
.out-head b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(38px,6vw,62px);line-height:1}
.out-rows{padding:6px 26px 22px}
.out-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.out-row:last-child{border-bottom:0}
.out-row span{font-size:14px;color:var(--ink-2)}
.out-row b{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.note{font-size:12.5px;color:var(--steel);line-height:1.55;padding:0 26px 22px}
.note code{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-2)}
.band{display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--ink);
  border-radius:2px;padding:8px 13px;font-size:13px;margin-top:2px}
.band b{font-family:'IBM Plex Mono',monospace;font-weight:500;white-space:nowrap}

/* ============ PASOS ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule);border-radius:4px;overflow:hidden}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);padding:24px 22px 26px;cursor:pointer;position:relative;
  transition:background .3s;text-align:left;border:0;color:inherit;font:inherit;width:100%;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.step:hover{background:var(--panel-2)}
.step-n{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--steel)}
.step h3{font-size:23px;margin:9px 0 8px;transition:color .3s}
.step p{margin:0;font-size:13.5px;color:var(--ink-2);opacity:.55;max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.8,.3,1),opacity .35s}
.step[aria-current="true"]{background:var(--panel-2)}
.step[aria-current="true"] h3{color:var(--accent)}
.step[aria-current="true"] p{opacity:1;max-height:260px}
.step-bar{position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent)}
.step[aria-current="true"] .step-bar{width:100%;transition:width 6s linear}

/* ============ VENTAJAS ============ */
.vent{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:26px;
  background:var(--rule-soft);border:1px solid var(--rule);border-radius:4px;overflow:hidden}
@media(max-width:860px){.vent{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vent{grid-template-columns:1fr}}
.vent>.eyebrow{background:var(--panel);padding:18px 22px 4px;margin:0}
.v-item{background:var(--panel);padding:20px 22px 22px}
.v-item b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:27px;
  line-height:1.05;color:var(--accent);text-transform:uppercase}
.v-item p{margin:7px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* ============ NORMATIVA ============ */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:baseline;gap:18px}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{font-size:clamp(21px,2.6vw,29px);flex:1;transition:color .25s}
.acc summary:hover h3{color:var(--accent)}
.acc summary .tag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  color:var(--accent);border:1px solid var(--accent);padding:4px 9px;border-radius:2px;white-space:nowrap}
.acc summary .plus{font-family:'Barlow Condensed',sans-serif;font-size:30px;color:var(--steel);
  transition:transform .3s,color .3s;line-height:.8}
.acc details[open] summary .plus{transform:rotate(45deg);color:var(--accent)}
.acc .body{padding:0 0 26px;max-width:74ch;color:var(--ink-2);font-size:15px}
.acc .body strong{color:var(--ink)}

/* ============ USOS ============ */
.usos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.usos{grid-template-columns:1fr}}
.uso{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--rule)}
.uso img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1);filter:saturate(.85)}
.uso:hover img{transform:scale(1.07)}
.uso figcaption{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(6,10,17,.9));font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:25px;text-transform:uppercase;line-height:1}
.uso figcaption em{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  font-weight:500;letter-spacing:.14em;color:var(--accent);margin-bottom:5px}
.uso-hit{position:absolute;inset:0;z-index:2;border:0;padding:0;background:none;cursor:zoom-in}
.uso-zoom{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;z-index:1;
  background:rgba(6,10,17,.62);border:1px solid rgba(255,255,255,.34);color:#fff;
  display:grid;place-items:center;opacity:0;transform:scale(.85);
  transition:opacity .25s,transform .25s}
.uso:hover .uso-zoom,.uso-hit:focus-visible ~ .uso-zoom{opacity:1;transform:none}

/* ---- visor ampliado ---- */
.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,52px);background:rgba(7,11,18,.94);animation:lbIn .22s ease-out}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;gap:15px;align-items:center;max-width:100%}
.lb-fig img{max-width:min(1180px,92vw);max-height:76vh;width:auto;height:auto;
  border-radius:4px;box-shadow:0 34px 90px -34px rgba(0,0,0,.95)}
.lb-fig figcaption{color:#d7e0ea;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;text-align:center;max-width:60ch}
.lb-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.09);color:#fff;
  font-size:24px;line-height:1;cursor:pointer;transition:background .2s}
.lb-close:hover{background:rgba(255,255,255,.22)}
.lb-hint{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#7d8b9e;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

/* ============ CTA ============ */
.cta{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:clamp(30px,5vw,54px);
  text-align:center;box-shadow:var(--shadow)}
.cta h2{font-size:clamp(30px,5.4vw,58px);margin-bottom:12px}
.cta .eyebrow{margin:0 0 14px}
.cta p:not(.eyebrow){color:var(--ink-2);max-width:50ch;margin:0 auto 28px}
#contacto{padding-top:clamp(20px,3vw,36px)}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 27px;border-radius:3px;
  text-decoration:none;font-weight:600;font-size:15px;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border:1px solid var(--rule);color:var(--ink)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.contact{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-2)}
.contact a{text-decoration:none;border-bottom:1px solid var(--rule)}
.contact a:hover{color:var(--accent);border-color:var(--accent)}
footer{border-top:1px solid var(--rule);padding:30px 0 46px;color:var(--steel);font-size:12.5px}
footer b{color:var(--ink-2);font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* Comparativo gancho / cabeza: dos columnas de datos enfrentadas. */
.duelo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
@media(max-width:720px){.duelo{grid-template-columns:1fr}}
.duelo>div{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:22px}
.duelo .eyebrow{margin:0 0 14px}
.duelo dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px 14px;align-items:baseline}
.duelo dt{font-size:14px;color:var(--ink-2)}
.duelo dd{margin:0;font-family:'IBM Plex Mono',monospace;font-size:17px;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums}
.duelo dd em{font-style:normal;font-size:13px;color:var(--steel);margin-left:3px}
.duelo--cabeza{border-color:var(--accent)}
.duelo--cabeza dd{color:var(--accent)}