/* Imcardecsa · cadena-frio.css — requiere base.css */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── page hero ────────────────────────────── */
.ph{background:var(--navy-900);color:#fff;padding:clamp(64px,8vw,100px) 0 0}
.ph__h{font-size:clamp(34px,5.2vw,72px);max-width:15ch;margin-bottom:24px}
.ph__h em{font-style:normal;color:var(--red)}
.ph__sub{max-width:52ch;color:#C4CCE0;font-size:clamp(15.5px,1.5vw,18px)}
.ph__meta{margin-top:clamp(44px,6vw,68px);border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(4,1fr)}
.ph__c{padding:20px 24px;border-left:1px solid rgba(255,255,255,.16)}
.ph__c:first-child{border-left:0;padding-left:0}
.ph__c b{color:var(--red);display:block;margin-bottom:8px;font-weight:500}
.ph__c span{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#DDE3F0}

/* ── el registro (gráfico) ────────────────── */
.reg{background:var(--navy);color:#fff}
.reg__head{display:flex;justify-content:space-between;align-items:end;gap:28px;
  flex-wrap:wrap;margin-bottom:34px}
.reg__lead{color:#B9C3DC;max-width:46ch;font-size:15.5px;margin-top:16px}
.reg__tgl{display:flex;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);flex:none}
.reg__tgl button{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 16px;border:0;background:transparent;
  color:#8FA0C8;cursor:pointer;transition:all .18s;white-space:nowrap}
.reg__tgl button:hover{color:#fff}
.reg__tgl button[aria-pressed="true"]{background:var(--red);color:#fff}

.reg__box{border:1px solid rgba(255,255,255,.18);background:var(--navy-900)}
.reg__scroll{overflow-x:auto}
.reg__svg{display:block;width:100%;min-width:680px;height:auto}
.reg__foot{border-top:1px solid rgba(255,255,255,.18);display:grid;
  grid-template-columns:repeat(4,1fr)}
.reg__f{padding:16px 20px;border-left:1px solid rgba(255,255,255,.18)}
.reg__f:first-child{border-left:0}
.reg__f b{display:block;color:#8FA0C8;margin-bottom:8px;font-weight:500}
.reg__f span{font-family:'IBM Plex Mono',monospace;font-size:14px;color:#fff;
  font-variant-numeric:tabular-nums}
.reg__f span.ok{color:#8FD5A0}
.reg__f span.bad{color:var(--red)}
.reg__note{margin-top:22px;color:#8FA0C8;font-size:14px;max-width:74ch;line-height:1.6}
.reg__note b{color:#fff;font-weight:600}

/* svg */
.ax{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:#6F7CA3}
.axv{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:#8FA0C8}
.trace{fill:none;stroke:#8FD5A0;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.trace--bad{stroke:var(--red)}
.anim{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.5s cubic-bezier(.4,0,.15,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pop{opacity:0;animation:pop .4s ease forwards 1.35s}
@keyframes pop{to{opacity:1}}

/* ── tramos ───────────────────────────────── */
.tr{border-top:1px solid var(--line);margin-top:clamp(36px,4vw,52px)}
.tr__r{display:grid;grid-template-columns:250px repeat(3,1fr);gap:clamp(16px,2.4vw,32px);
  padding:22px 0;border-bottom:1px solid var(--line);transition:background .2s}
.tr__r:hover{background:var(--bone)}
.tr__hd{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.tr__n{font-family:'Archivo',sans-serif;font-weight:800;
  font-variation-settings:'wdth' 112,'wght' 800;font-size:20px;color:var(--red);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tr__t{font-family:'Archivo',sans-serif;font-weight:700;
  font-variation-settings:'wdth' 110,'wght' 700;text-transform:uppercase;
  font-size:16px;color:var(--navy);letter-spacing:-.005em}
.tr__k{color:var(--red);display:none;margin-bottom:7px}
.tr__v{font-size:13.5px;color:var(--ink-60);line-height:1.5}
.tr__r--fail .tr__v{color:var(--ink)}
.tr__hdr{display:grid;grid-template-columns:250px repeat(3,1fr);gap:clamp(16px,2.4vw,32px);
  padding-bottom:12px}
.tr__hdr span{color:var(--ink-60)}

/* ── instrumentos ─────────────────────────── */
.ins{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18);
  margin-top:34px}
.ins__c{background:var(--navy);padding:24px 22px 28px;
  border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.ins__k{color:var(--red);display:block;margin-bottom:14px}
.ins__t{font-family:'Archivo',sans-serif;font-weight:700;
  font-variation-settings:'wdth' 110,'wght' 700;text-transform:uppercase;
  font-size:15px;color:#fff;margin-bottom:8px}
.ins__d{font-size:13.5px;color:#96A2C2;line-height:1.55}
.ins__f{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#8FD5A0;margin-top:14px;display:block}

/* ── cuando se rompe ──────────────────────── */
.br{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,70px);align-items:center}
.br__fig img{width:100%;height:clamp(300px,38vw,450px);object-fit:cover}
.br__list{margin-top:28px;border-top:1px solid var(--line)}
.br__i{padding:18px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.br__i i{width:7px;height:7px;background:var(--red);margin-top:9px;flex:none;font-style:normal}
.br__i b{display:block;font-weight:600;font-size:15.5px;color:var(--navy);margin-bottom:3px}
.br__i span{font-size:14.5px;color:var(--ink-60);line-height:1.55}

@media(max-width:1000px){
  .ph__meta{grid-template-columns:1fr 1fr}
  .ph__c{border-left:1px solid rgba(255,255,255,.16);padding-left:24px}
  .ph__c:nth-child(odd){border-left:0;padding-left:0}
  .ph__c:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
  .reg__foot{grid-template-columns:1fr 1fr}
  .reg__f:nth-child(odd){border-left:0}
  .reg__f:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.18)}
  .tr__hdr{display:none}
  .tr__k{display:block}
  .tr__r{grid-template-columns:1fr 1fr;gap:18px}
  .tr__hd{grid-column:1/-1}
  .ins{grid-template-columns:1fr 1fr}
  .br{grid-template-columns:1fr}
}
@media(max-width:680px){
  .ins{grid-template-columns:1fr}
  .tr__r{grid-template-columns:1fr;gap:14px}
  .reg__tgl{width:100%}
  .reg__tgl button{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .anim{stroke-dashoffset:0;animation:none}
  .pop{opacity:1;animation:none}
}