/* ============================================================
   TOKENS
   Paleta derivada del material real que maneja un banco de
   sangre: concentrado eritrocitario (oxblood/carmín) y plasma
   (ámbar pajizo). Papel clínico neutro como base.
   ============================================================ */
:root{
  --ink:#180D10;
  --ink-70:rgba(24,13,16,.70);
  --ink-52:rgba(24,13,16,.52);
  --oxblood:#5E0D18;
  --oxblood-d:#40060F;
  --carmin:#B81D2A;
  --carmin-l:#E0505C;
  --plasma:#D9A233;
  --plasma-l:#F2D9A0;
  --paper:#F7F5F4;
  --paper-2:#FFFFFF;
  --gauze:#E3DBD7;
  --ok:#1E7A52;

  --fs-display:clamp(2.4rem,5.4vw,4.05rem);
  --fs-h2:clamp(1.75rem,3.6vw,2.7rem);
  --fs-h3:clamp(1.12rem,1.8vw,1.35rem);
  --fs-body:clamp(1rem,1.05vw,1.075rem);
  --fs-sm:.9rem;
  --fs-xs:.795rem;

  --wrap:1200px;
  --gut:clamp(1.15rem,4vw,2.75rem);
  --pad-sec:clamp(3.75rem,8vw,7rem);
  --r-s:6px;
  --r-m:14px;
  --r-l:26px;
  --ease:cubic-bezier(.22,.75,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,serif;font-weight:500;line-height:1.08;margin:0;letter-spacing:-.012em}
p{margin:0}
:focus-visible{outline:3px solid var(--plasma);outline-offset:3px;border-radius:3px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.topbar{background:var(--oxblood-d);color:#F3E6E4;font-size:var(--fs-xs)}
.topbar .wrap{display:flex;gap:.5rem 1.6rem;align-items:center;justify-content:space-between;
  min-height:40px;flex-wrap:wrap;padding-block:.4rem}
.topbar a{text-decoration:none;opacity:.86}
.topbar a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.tb-group{display:flex;gap:1.15rem;align-items:center;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:.48rem;font-weight:600;letter-spacing:.01em}
.status .dot{width:7px;height:7px;border-radius:50%;background:#6ED39B;box-shadow:0 0 0 0 rgba(110,211,155,.6)}
.status.is-open .dot{animation:pulse 2.6s infinite}
.status.is-closed .dot{background:var(--plasma)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(110,211,155,.55)}70%{box-shadow:0 0 0 9px rgba(110,211,155,0)}100%{box-shadow:0 0 0 0 rgba(110,211,155,0)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,245,244,.90);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.stuck{border-bottom-color:var(--gauze);box-shadow:0 10px 30px -26px rgba(24,13,16,.5)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:70px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex-shrink:0}
.brand img{height:46px;width:auto;display:block}
.nav-home-sep{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.nav-home-sep::after{content:"";width:1px;height:20px;background:var(--gauze)}
.nav-home{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--ink-70);text-decoration:none;flex-shrink:0;
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav-home:hover{background:rgba(184,29,42,.07);color:var(--oxblood)}
.nav-home svg{width:19px;height:19px}
.lang{display:inline-flex;align-items:center;border:1px solid var(--gauze);border-radius:100px;
  background:var(--paper-2);padding:2px;flex-shrink:0;line-height:1}
.lang a{display:block;padding:.34rem .62rem;border-radius:100px;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-decoration:none;color:var(--ink-52);
  transition:background .2s var(--ease),color .2s var(--ease)}
.lang a:hover{color:var(--oxblood);background:transparent}
.lang a[aria-current="true"]{background:var(--ink);color:#fff}
.d-lang{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem .2rem;border-bottom:1px solid var(--gauze)}
.d-lang span{font-size:.78rem;color:var(--ink-52);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:.925rem;font-weight:500;padding:.55rem .72rem;border-radius:var(--r-s);
  color:var(--ink-70);white-space:nowrap;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--oxblood);background:rgba(184,29,42,.07)}
.nav-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--carmin);color:#fff;text-decoration:none;
  font-weight:600;font-size:.9rem;padding:.66rem 1.15rem;border-radius:100px;transition:background .22s,transform .22s}
.nav-cta:hover{background:var(--oxblood);transform:translateY(-1px)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--gauze);background:var(--paper-2);
  border-radius:var(--r-s);padding:0;place-items:center}
.burger i{display:block;width:19px;height:1.7px;background:var(--ink);position:relative;transition:transform .3s var(--ease),background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:1.7px;background:var(--ink);transition:transform .3s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

.drawer{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--paper-2);z-index:70;
  transform:translateX(102%);transition:transform .38s var(--ease);padding:1.15rem var(--gut) 2rem;
  display:flex;flex-direction:column;gap:.2rem;box-shadow:-24px 0 60px -30px rgba(24,13,16,.5);overflow-y:auto}
.drawer.open{transform:none}
.drawer a{text-decoration:none;padding:.92rem .2rem;border-bottom:1px solid var(--gauze);font-weight:500}
.drawer .nav-cta{margin-top:1.2rem;justify-content:center;border-bottom:0}
.scrim{position:fixed;inset:0;background:rgba(24,13,16,.42);z-index:65;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--oxblood);color:#FBF2F0;overflow:hidden;
  padding-block:clamp(3rem,7vw,5.4rem) clamp(3rem,6vw,4.6rem)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 88% 8%,rgba(217,162,51,.20),transparent 58%),
             radial-gradient(90% 80% at 4% 100%,rgba(184,29,42,.5),transparent 60%);
  pointer-events:none}
.hero .wrap{position:relative;display:grid;gap:clamp(2.2rem,5vw,4rem);align-items:center;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hero-kicker{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--plasma-l);
  margin-bottom:1.05rem;font-weight:600}
.hero h1{font-size:var(--fs-display);color:#fff;margin-bottom:1.1rem;text-wrap:balance;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--plasma-l)}
.hero-lead{font-size:clamp(1.02rem,1.35vw,1.15rem);color:rgba(251,242,240,.84);max-width:52ch;margin-bottom:1.9rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:2.1rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.88rem 1.5rem;border-radius:100px;border:1.5px solid transparent;transition:all .24s var(--ease)}
.btn-solid{background:var(--plasma);color:#2A1705;border-color:var(--plasma)}
.btn-solid:hover{background:#F0BC4C;border-color:#F0BC4C;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(251,242,240,.34);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

.jump-wrap{position:relative;min-width:0;border-top:1px solid rgba(251,242,240,.17);padding-top:1.5rem}
.jump{display:flex;gap:.45rem;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.jump.fits{-webkit-mask-image:none;mask-image:none}
.jump::-webkit-scrollbar{display:none}
.jump a{display:inline-flex;align-items:center;gap:.42rem;text-decoration:none;font-size:.855rem;
  white-space:nowrap;flex:0 0 auto;
  padding:.5rem .82rem;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);
  color:rgba(251,242,240,.9);transition:background .2s,border-color .2s}
.jump a:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.32)}
.jump svg{width:14px;height:14px;flex-shrink:0;opacity:.75}

/* --- Diagrama: 1 donación -> 3 componentes -> 3 pacientes --- */
.split{background:rgba(11,4,6,.30);border:1px solid rgba(251,242,240,.15);border-radius:var(--r-l);
  padding:clamp(1.35rem,2.6vw,2rem)}
.split-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.15rem}
.split-head h2{font-size:1.22rem;color:#fff}
.split-head span{font-size:var(--fs-xs);color:var(--plasma-l);letter-spacing:.06em}
.split-rows{display:grid;gap:.6rem}
.srow{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:.9rem;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-m);padding:.72rem .85rem;
  opacity:0;transform:translateY(9px)}
.reveal-on .srow{animation:rowIn .62s var(--ease) forwards}
.reveal-on .srow:nth-child(1){animation-delay:.15s}
.reveal-on .srow:nth-child(2){animation-delay:.34s}
.reveal-on .srow:nth-child(3){animation-delay:.53s}
@keyframes rowIn{to{opacity:1;transform:none}}
.srow .vial{width:46px;height:46px}
.srow b{display:block;font-size:.94rem;font-weight:600;color:#fff;line-height:1.3}
.srow small{display:block;font-size:var(--fs-xs);color:rgba(251,242,240,.62);line-height:1.42}
.srow .days{font-family:"Newsreader",serif;font-size:1.02rem;color:var(--plasma-l);white-space:nowrap;text-align:right}
.srow .days small{display:block;font-family:"Archivo",sans-serif;font-size:.68rem;color:rgba(251,242,240,.68);letter-spacing:.05em}
.split-foot{margin-top:1.15rem;padding-top:1.05rem;border-top:1px dashed rgba(251,242,240,.22);
  display:flex;align-items:center;gap:.85rem}
.split-foot .n{font-family:"Newsreader",serif;font-size:2.7rem;line-height:1;color:var(--plasma)}
.split-foot p{font-size:var(--fs-sm);color:rgba(251,242,240,.8);max-width:30ch}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.sec{padding-block:var(--pad-sec)}
.sec-paper{background:var(--paper-2)}
.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{font-size:var(--fs-h2);margin-bottom:.75rem}
.sec-head p{color:var(--ink-70);font-size:1.04rem}
.rule{width:46px;height:3px;background:var(--carmin);border-radius:3px;margin-bottom:1.25rem}

/* reveal al hacer scroll (una sola vez, discreto) */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   AUTOEVALUACIÓN
   ============================================================ */
.check{background:var(--paper-2);border-top:1px solid var(--gauze);border-bottom:1px solid var(--gauze)}
.check-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
.quiz-col{display:grid;gap:1.2rem;align-content:start}
.quiz{background:var(--paper);border:1px solid var(--gauze);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 36px 70px -58px rgba(94,13,24,.65)}
.quiz-bar{height:5px;background:var(--gauze)}
.quiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--carmin),var(--plasma));
  transition:width .45s var(--ease)}
.quiz-body{padding:clamp(1.5rem,3vw,2.3rem)}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);
  color:var(--ink-52);margin-bottom:1.05rem;letter-spacing:.05em}
.quiz-meta button{background:none;border:0;padding:0;color:var(--carmin);font-size:var(--fs-xs);
  font-weight:600;text-decoration:underline;text-underline-offset:3px}
.quiz-q{font-family:"Newsreader",serif;font-size:clamp(1.35rem,2.4vw,1.72rem);line-height:1.22;margin-bottom:.55rem}
.quiz-hint{font-size:var(--fs-sm);color:var(--ink-52);margin-bottom:1.6rem;min-height:2.6em}
.quiz-opts{display:flex;gap:.7rem}
.opt{flex:1;padding:.95rem 1rem;border-radius:var(--r-m);border:1.5px solid var(--gauze);background:var(--paper-2);
  font-weight:600;font-size:.98rem;transition:all .2s var(--ease)}
.opt:hover{border-color:var(--carmin);color:var(--carmin);transform:translateY(-2px)}
.opt.no:hover{border-color:var(--ink);color:var(--ink)}

.result{display:none}
.result.show{display:block;animation:rowIn .5s var(--ease) forwards}
.result-badge{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:.42rem .85rem;border-radius:100px;margin-bottom:1.05rem}
.r-ok{background:rgba(30,122,82,.12);color:var(--ok)}
.r-wait{background:rgba(217,162,51,.18);color:#8A6413}
.r-no{background:rgba(184,29,42,.11);color:var(--carmin)}
.result h3{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-bottom:.7rem}
.result>p{color:var(--ink-70);font-size:.99rem;margin-bottom:1.2rem}
.result ul{margin:0 0 1.5rem;padding:0;list-style:none;display:grid;gap:.55rem}
.result li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-70);
  background:var(--paper-2);border:1px solid var(--gauze);border-left:3px solid var(--plasma);
  border-radius:var(--r-s);padding:.65rem .8rem}
.result li svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--plasma)}
.result-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.btn-carmin{background:var(--carmin);color:#fff;border-color:var(--carmin)}
.btn-carmin:hover{background:var(--oxblood);border-color:var(--oxblood);transform:translateY(-2px)}
.btn-line{border-color:var(--gauze);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}
.disclaimer{margin-top:1.3rem;font-size:var(--fs-xs);color:var(--ink-52);line-height:1.55;
  border-top:1px solid var(--gauze);padding-top:.95rem}

/* Columna derecha: requisitos — acordeón */
.reqs-col > .rule{margin-bottom:1.05rem}
.reqs-col h3{font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:var(--fs-h3);color:var(--ink);margin-bottom:1.15rem;letter-spacing:-.012em}
.req-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.req-list li{border-bottom:1px solid var(--gauze)}
.req-list li:last-child{border-bottom:0}
.req-btn{display:grid;grid-template-columns:24px 1fr;align-items:center;gap:.7rem;
  width:100%;padding:1rem 2.1rem 1rem 0;background:none;border:0;text-align:left;
  font-size:.98rem;line-height:1.4;color:var(--ink);position:relative;
  transition:color .2s var(--ease)}
.req-btn:hover{color:var(--carmin)}
.req-btn b{font-weight:600}
.req-btn::after{content:"";position:absolute;right:.3rem;top:50%;width:14px;height:14px;
  transform:translateY(-50%);opacity:.55;
  background:
    linear-gradient(currentColor,currentColor) no-repeat center/100% 2px,
    linear-gradient(currentColor,currentColor) no-repeat center/2px 100%;
  transition:transform .32s var(--ease),opacity .2s var(--ease)}
.req-btn:hover::after{opacity:1}
.req-btn[aria-expanded="true"]{color:var(--carmin)}
.req-btn[aria-expanded="true"]::after{transform:translateY(-50%) rotate(45deg);opacity:1}
.req-panel{overflow:hidden;max-height:0;transition:max-height .38s var(--ease)}
.req-panel p{margin:0;padding:0 2.1rem 1rem 35px;color:var(--ink-52);
  font-size:.9rem;line-height:1.55}
.tick{width:24px;height:24px;border-radius:50%;background:rgba(184,29,42,.09);color:var(--carmin);
  display:grid;place-items:center}
.tick svg{width:14px;height:14px}
.bring{background:linear-gradient(135deg,var(--oxblood),var(--oxblood-d));color:#FBF2F0;
  border-radius:var(--r-l);padding:clamp(1.35rem,2.6vw,1.9rem)}
.bring h4{font-size:1.08rem;color:#fff;margin-bottom:.8rem}
.bring ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.bring li{display:flex;gap:.6rem;font-size:var(--fs-sm);color:rgba(251,242,240,.86);align-items:flex-start}
.bring li svg{width:17px;height:17px;color:var(--plasma);flex-shrink:0;margin-top:3px}

/* ============================================================
   COMPATIBILIDAD
   ============================================================ */
.compat-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.8rem,4vw,3.2rem);align-items:stretch}
.compat-layout > .rv:not(.matrix){display:flex;flex-direction:column;height:100%}
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.type{aspect-ratio:1/1;border:1.5px solid var(--gauze);background:var(--paper-2);border-radius:var(--r-m);
  display:grid;place-items:center;font-family:"Newsreader",serif;font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:600;transition:all .22s var(--ease);position:relative}
.type:hover{border-color:var(--carmin-l);transform:translateY(-3px)}
.type[aria-pressed="true"]{background:var(--carmin);border-color:var(--carmin);color:#fff;
  box-shadow:0 16px 30px -18px rgba(184,29,42,.8)}
.type-note{margin-top:1.15rem;font-size:var(--fs-sm);color:var(--ink-52);min-height:4.4em;
  border-left:3px solid var(--plasma);padding-left:.9rem}
.unknown{margin-top:auto;border:1px solid var(--gauze);border-left:3px solid var(--carmin);
  border-radius:var(--r-m);background:var(--paper-2);padding:1.35rem}
.unknown h3{font-size:1.1rem;margin-bottom:.5rem}
.unknown p{font-size:var(--fs-sm);color:var(--ink-70);margin-bottom:1.1rem;max-width:46ch}
.matrix{display:grid;gap:1.35rem;align-content:stretch;height:100%}
.mbox{background:var(--paper-2);border:1px solid var(--gauze);border-radius:var(--r-l);padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column}
.mbox-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.mbox-head h3{font-size:1.08rem}
.mbox-head .pill{font-size:var(--fs-xs);font-weight:600;padding:.22rem .6rem;border-radius:100px;letter-spacing:.04em}
.p-give{background:rgba(184,29,42,.1);color:var(--carmin)}
.p-get{background:rgba(30,122,82,.11);color:var(--ok)}
.bubbles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:auto}
.bub{border:1.5px solid var(--gauze);border-radius:var(--r-s);padding:.6rem .3rem;text-align:center;
  font-family:"Newsreader",serif;font-size:1.02rem;font-weight:600;color:var(--ink-52);
  background:var(--paper);transition:all .3s var(--ease)}
.bub.on{color:#fff;border-color:transparent}
.mbox.give .bub.on{background:var(--carmin)}
.mbox.get .bub.on{background:var(--ok)}

/* ============================================================
   PROCESO — línea de tiempo proporcional al tiempo real
   ============================================================ */
.timeline{margin-bottom:1.6rem}
.tl-bar{display:flex;gap:4px;height:clamp(58px,9vw,104px)}
.tl-seg{position:relative;border:0;padding:0;flex:0 0 auto;background:var(--gauze);
  border-radius:8px;overflow:hidden;transition:all .35s var(--ease);min-width:26px}
.tl-seg::after{content:"";position:absolute;inset:0;background:var(--carmin);opacity:0;transition:opacity .35s var(--ease)}
.tl-seg:hover{transform:translateY(-3px)}
.tl-seg[aria-selected="true"]{transform:translateY(-3px)}
.tl-seg[aria-selected="true"]::after{opacity:1}
.tl-seg .lab{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;padding:.7rem .75rem;text-align:left;gap:.15rem}
.tl-seg .lab b{font-size:.86rem;font-weight:600;line-height:1.2;color:var(--ink);transition:color .3s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-seg .lab i{font-style:normal;font-size:var(--fs-xs);color:var(--ink-52);transition:color .3s;white-space:nowrap}
.tl-seg[aria-selected="true"] .lab b,.tl-seg[aria-selected="true"] .lab i{color:#fff}
.tl-seg .num{position:absolute;top:.6rem;left:.75rem;z-index:2;font-family:"Newsreader",serif;
  font-size:1.1rem;color:var(--ink-52);transition:color .3s}
.tl-seg[aria-selected="true"] .num{color:rgba(255,255,255,.72)}
.tl-scale{display:flex;justify-content:space-between;margin-top:.7rem;font-size:var(--fs-xs);color:var(--ink-52)}
.tl-scale b{font-weight:600;color:var(--ink-70)}

.tl-detail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.1rem,2.4vw,2rem);
  align-items:center;background:var(--paper);border:1px solid var(--gauze);border-left:4px solid var(--carmin);
  border-radius:var(--r-m);padding:clamp(1.2rem,2.4vw,1.7rem)}
.tl-ic{width:54px;height:54px;border-radius:50%;background:rgba(184,29,42,.09);color:var(--carmin);
  display:grid;place-items:center;flex-shrink:0}
.tl-ic svg{width:25px;height:25px}
.tl-detail h3{font-size:clamp(1.12rem,1.9vw,1.35rem);margin-bottom:.35rem}
.tl-detail p{font-size:.97rem;color:var(--ink-70);max-width:62ch}
.tl-time{text-align:right;flex-shrink:0}
.tl-time b{display:block;font-family:"Newsreader",serif;font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1;color:var(--carmin)}
.tl-time small{display:block;font-size:var(--fs-xs);color:var(--ink-52);margin-top:.2rem}
.tl-nav{display:flex;gap:.5rem;margin-top:1.1rem}
.tl-nav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gauze);background:var(--paper-2);
  display:grid;place-items:center;transition:all .2s var(--ease)}
.tl-nav button:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}
.tl-nav button:disabled{opacity:.35;cursor:default}
.tl-nav svg{width:16px;height:16px}
.total{margin-top:1.3rem;font-size:var(--fs-sm);color:var(--ink-52);max-width:72ch}

/* ============================================================
   MITOS — galería deslizable
   ============================================================ */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  margin-bottom:clamp(1.5rem,3vw,2.2rem);flex-wrap:wrap}
.gal-head .sec-head{margin-bottom:0}
.gal-nav{display:flex;gap:.5rem;flex-shrink:0}
.gal-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--gauze);background:var(--paper-2);
  display:grid;place-items:center;transition:all .2s var(--ease)}
.gal-nav button:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}
.gal-nav svg{width:17px;height:17px}
.gal{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.4rem;margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
.gal::-webkit-scrollbar{display:none}
.myth{flex:0 0 clamp(268px,30%,360px);scroll-snap-align:start;
  background:var(--paper-2);border:1px solid var(--gauze);border-radius:var(--r-m);padding:1.5rem;
  display:flex;flex-direction:column;gap:.75rem}
.myth .m{font-size:var(--fs-sm);color:var(--ink-52);font-style:italic;margin:0;
  padding-left:.85rem;border-left:2px solid var(--gauze)}
.myth .r{font-size:.97rem;margin:0}
.myth .r b{color:var(--carmin);font-weight:600}
.gal-dots{display:flex;gap:.4rem;justify-content:center;margin-top:1.3rem}
.gal-dots i{width:7px;height:7px;border-radius:50%;background:var(--gauze);transition:all .3s var(--ease)}
.gal-dots i.on{background:var(--carmin);width:22px;border-radius:100px}
@media (min-width:621px){
  .myth{flex-basis:calc((100% - 3rem) / 3.15)}
  .gal{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent 100%);
       mask-image:linear-gradient(90deg,#000 92%,transparent 100%)}
  .gal.fits{-webkit-mask-image:none;mask-image:none}
}

/* ============================================================
   HEMOCOMPONENTES — explorador maestro/detalle
   ============================================================ */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filt{border:1.5px solid var(--gauze);background:var(--paper-2);border-radius:100px;
  padding:.5rem 1rem;font-size:var(--fs-sm);font-weight:500;color:var(--ink-70);
  display:inline-flex;align-items:center;gap:.5rem;transition:all .22s var(--ease)}
.filt:hover{border-color:var(--carmin-l);color:var(--ink)}
.filt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filt .sw{width:9px;height:9px;border-radius:50%;flex-shrink:0}

.explorer{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.4rem,3vw,2.4rem);align-items:start}

.hc-list{display:grid;gap:.4rem;list-style:none;margin:0;padding:0}
.hc-item{transition:opacity .3s var(--ease),max-height .35s var(--ease),transform .3s var(--ease)}
.hc-item.hide{display:none}
.hc-btn{width:100%;display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:.85rem;
  text-align:left;background:var(--paper-2);border:1.5px solid var(--gauze);border-radius:var(--r-m);
  padding:.85rem .95rem;transition:all .22s var(--ease)}
.hc-btn:hover{border-color:var(--carmin-l);transform:translateX(3px)}
.hc-btn[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateX(3px)}
.hc-btn b{display:block;font-weight:500;font-size:.985rem;font-family:"Newsreader",serif;line-height:1.25}
.hc-btn small{display:block;font-size:var(--fs-xs);color:var(--ink-52);letter-spacing:.03em}
.hc-btn[aria-selected="true"] small{color:rgba(255,255,255,.55)}
.hc-btn .arw{width:16px;height:16px;opacity:.3;transition:opacity .2s,transform .2s}
.hc-btn[aria-selected="true"] .arw{opacity:1;transform:translateX(2px)}
.hc-vial{width:34px;height:40px;flex-shrink:0}

.hc-detail{position:sticky;top:92px;background:var(--paper-2);border:1px solid var(--gauze);
  border-radius:var(--r-l);overflow:hidden;box-shadow:0 40px 80px -64px rgba(94,13,24,.7)}
.hc-top{padding:clamp(1.3rem,2.6vw,1.9rem);border-bottom:1px solid var(--gauze);position:relative;overflow:hidden}
.hc-top::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;
  opacity:.09;background:var(--accent,var(--carmin));pointer-events:none}
.hc-origin{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;color:var(--ink-52);border:1px solid var(--gauze);border-radius:100px;
  padding:.26rem .7rem;margin-bottom:.9rem;background:var(--paper)}
.hc-origin .sw{width:9px;height:9px;border-radius:50%}
.hc-detail h3{font-size:clamp(1.3rem,2.3vw,1.68rem);margin-bottom:.7rem;position:relative}
.hc-detail .desc{color:var(--ink-70);font-size:.975rem;max-width:60ch;position:relative}
.hc-body{padding:clamp(1.3rem,2.6vw,1.9rem)}
.hc-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;color:var(--ink-52);margin-bottom:.7rem}
.hc-uses{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.hc-uses span{font-size:var(--fs-sm);background:var(--paper);border:1px solid var(--gauze);
  border-radius:var(--r-s);padding:.4rem .75rem;color:var(--ink-70)}
.hc-facts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fact{border:1px solid var(--gauze);border-radius:var(--r-m);padding:.9rem 1rem;background:var(--paper)}
.fact b{display:block;font-family:"Newsreader",serif;font-size:1.22rem;line-height:1.15;margin-bottom:.2rem}
.fact small{display:block;font-size:var(--fs-xs);color:var(--ink-52);line-height:1.45}
.hc-foot{border-top:1px solid var(--gauze);padding:1rem clamp(1.3rem,2.6vw,1.9rem);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--paper)}
.hc-foot p{font-size:var(--fs-xs);color:var(--ink-52)}
.hc-foot a{font-size:var(--fs-sm);font-weight:600;color:var(--carmin);text-decoration:none}
.hc-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.fade{animation:fadeSwap .38s var(--ease)}
@keyframes fadeSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   DATO / CONTEXTO
   ============================================================ */
.impact{background:var(--ink);color:#F2EAE8;padding-block:clamp(2.4rem,4.6vw,3.6rem)}
.impact-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.bignum{font-family:"Newsreader",serif;font-size:clamp(3.2rem,7.5vw,5.4rem);line-height:.88;color:var(--plasma);
  letter-spacing:-.03em}
.bignum sup{font-size:.36em;vertical-align:super;margin-left:.06em}
.impact h2{font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;margin-bottom:.85rem}
.impact p{color:rgba(242,234,232,.76);max-width:62ch;margin-bottom:.75rem;font-size:.975rem}
.impact .src{font-size:var(--fs-xs);color:rgba(242,234,232,.62)}
.bar-track{height:11px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;margin:1.1rem 0 .6rem}
.bar-track i{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--carmin),var(--plasma));transition:width 1.6s var(--ease)}
.bar-legend{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:rgba(242,234,232,.55)}

/* ============================================================
   NOSOTROS — recorrido de la donación
   ============================================================ */
.nosotros{background:linear-gradient(150deg,var(--oxblood) 0%,var(--oxblood-d) 100%);color:#FBF2F0;position:relative;overflow:hidden}
.nosotros::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 88% 8%,rgba(217,162,51,.18),transparent 58%);
  pointer-events:none}
.nosotros .wrap{position:relative}
.nos-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem);align-items:start}
.nos-media{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.nos-photo{aspect-ratio:16/10;background:rgba(11,4,6,.4);border:1px solid rgba(251,242,240,.14);
  border-radius:var(--r-l);overflow:hidden}
.nos-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nos-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.nos-thumb{aspect-ratio:1/1;padding:0;background:rgba(11,4,6,.4);
  border:1.5px solid rgba(251,242,240,.18);border-radius:var(--r-m);overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--ease)}
.nos-thumb:hover{border-color:rgba(251,242,240,.45);transform:translateY(-2px)}
.nos-thumb[aria-selected="true"]{border-color:var(--plasma);box-shadow:0 0 0 2px rgba(217,162,51,.35)}
.nos-thumb img{width:100%;height:100%;object-fit:cover;display:block;overflow:hidden;font-size:0}
.nos-text h2{font-size:var(--fs-h2);color:#fff;margin-bottom:.85rem}
.nos-text > p{color:rgba(251,242,240,.82);max-width:52ch;margin-bottom:1.5rem;font-size:1.02rem}
.nos-detail{border-left:3px solid var(--plasma);padding:.1rem 0 .1rem 1rem;margin-bottom:1.7rem}
.nos-detail h3{font-family:"Newsreader",serif;font-weight:500;font-size:var(--fs-h3);color:#fff;margin-bottom:.4rem}
.nos-detail p{color:rgba(251,242,240,.82);font-size:var(--fs-sm);line-height:1.55}
.nos-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
  padding-top:1.4rem;border-top:1px solid rgba(251,242,240,.18)}
.nos-stats > div{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.nos-stats b{font-family:"Newsreader",serif;font-weight:500;font-size:clamp(1.6rem,3vw,2.1rem);
  color:var(--plasma);line-height:1}
.nos-stats small{font-size:var(--fs-xs);color:rgba(251,242,240,.72);line-height:1.4}

/* ============================================================
   MITOS
   ============================================================ */
.myth{background:var(--paper-2);border:1px solid var(--gauze);border-radius:var(--r-m);padding:1.4rem}
.myth .m{font-size:var(--fs-sm);color:var(--ink-52);font-style:italic;margin-bottom:.7rem;
  padding-left:.85rem;border-left:2px solid var(--gauze)}
.myth .r{font-size:.97rem}
.myth .r b{color:var(--carmin);font-weight:600}

/* ============================================================
   JORNADAS
   ============================================================ */
.drives{background:linear-gradient(150deg,var(--oxblood) 0%,var(--oxblood-d) 100%);color:#FBF2F0;
  border-radius:var(--r-l);padding:clamp(1.9rem,4.5vw,3.4rem);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:center}
.drives h2{font-size:clamp(1.55rem,3vw,2.25rem);color:#fff;margin-bottom:.9rem}
.drives p{color:rgba(251,242,240,.8);margin-bottom:1.5rem}
.drives-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.drives-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-sm);color:rgba(251,242,240,.88)}
.drives-list svg{width:18px;height:18px;color:var(--plasma);flex-shrink:0;margin-top:2px}

/* Overrides de padding-block: la sección ya trae su propio bloque con padding, o cerraría con hueco visible */
#jornadas{padding-block:clamp(2rem,4vw,3.2rem)}
#mitos{padding-bottom:clamp(2rem,4vw,3.2rem)}

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
.cf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.05rem 1.15rem;margin-bottom:1.6rem}
.cf-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.cf-field-wide{grid-column:1/-1}
.cf-field label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.cf-field input,.cf-field select,.cf-field textarea{
  font:inherit;color:var(--ink);width:100%;
  background:var(--paper-2);border:1.5px solid var(--gauze);border-radius:var(--r-m);
  padding:.72rem .95rem;transition:border-color .2s var(--ease)}
.cf-field textarea{resize:vertical;min-height:6rem;font-family:inherit;line-height:1.55}
.cf-field select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23180D10' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:16px}
.cf-field input:hover,.cf-field select:hover,.cf-field textarea:hover{border-color:var(--carmin-l)}
.cf-field.err input,.cf-field.err select,.cf-field.err textarea{border-color:var(--carmin)}
.cf-err{font-size:var(--fs-xs);color:var(--carmin);margin:0;line-height:1.4}
.cf-submit{display:flex;align-items:flex-start}
.cf-privacy{padding-top:1.1rem;margin-top:.2rem;border-top:1px solid var(--gauze);
  font-size:var(--fs-xs);color:var(--ink-52);line-height:1.55}
.cf-status{font-size:var(--fs-sm);color:var(--ink-70);margin:1.2rem 0 0;min-height:1.5em}
.cf-status.err{color:var(--carmin)}
/* Honeypot: fuera de pantalla, no display:none, para que un bot lo rellene. */
.cf-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.cf button[type=submit]:disabled{opacity:.55;cursor:default;transform:none}
.cf-success{background:var(--paper-2);border:1px solid var(--gauze);border-left:3px solid var(--ok);
  border-radius:var(--r-m);padding:clamp(1.4rem,3vw,2rem)}
.cf-success h3{font-size:var(--fs-h3);margin-bottom:.55rem}
.cf-success p{color:var(--ink-70);max-width:56ch}
/* --- Tarjetas de motivo --- */
.ob-reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.ob-reason{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;text-align:left;
  background:var(--paper-2);border:1.5px solid var(--gauze);border-radius:var(--r-m);
  padding:1.15rem 1.2rem;transition:all .22s var(--ease)}
.ob-reason:hover{border-color:var(--carmin-l);transform:translateY(-2px)}
.ob-reason[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ob-ic{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-m);
  background:rgba(184,29,42,.09);color:var(--carmin);
  transition:background .22s var(--ease),color .22s var(--ease)}
.ob-ic svg{width:18px;height:18px}
.ob-reason[aria-pressed="true"] .ob-ic{background:rgba(217,162,51,.16);color:var(--plasma)}
.ob-reason b{font-family:"Newsreader",serif;font-weight:500;font-size:1.02rem;line-height:1.2}
.ob-reason small{font-size:var(--fs-xs);color:var(--ink-52);line-height:1.4}
.ob-reason[aria-pressed="true"] small{color:rgba(255,255,255,.7)}

/* --- Panel del formulario + aside --- */
.ob-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
.ob-hint{font-size:var(--fs-sm);color:var(--ink-70);margin-bottom:1.4rem;
  padding:.75rem 1rem;background:rgba(217,162,51,.09);
  border-left:3px solid var(--plasma);border-radius:0 var(--r-s) var(--r-s) 0}

.ob-aside{background:var(--paper-2);border:1px solid var(--gauze);
  border-radius:var(--r-l);padding:1.6rem;align-self:start}
.ob-aside h3{font-size:1.15rem;margin-bottom:.9rem}
.ob-aside ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.6rem}
.ob-aside li{display:grid;grid-template-columns:22px 1fr;gap:.7rem;align-items:start;
  font-size:.94rem;color:var(--ink-70)}
.ob-aside li svg{width:20px;height:20px;color:var(--carmin)}
.ob-aside .ic-wa{color:#25D366}
.ob-aside li a{color:var(--ink);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--gauze);transition:border-color .2s var(--ease)}
.ob-aside li a:hover{border-color:var(--carmin)}
.ob-hours{padding-top:1.1rem;margin-top:.2rem;border-top:1px solid var(--gauze)}
.ob-hours b{display:block;font-family:"Newsreader",serif;font-weight:500;font-size:1rem;margin-bottom:.55rem}
.ob-hours .hours{background:transparent;border:0;border-radius:0}
.ob-hours .hours-row{padding:.55rem 0}
.ob-hours .hours-row.today{padding-inline:.6rem;border-radius:var(--r-s)}

/* ============================================================
   HORARIOS Y MAPA
   ============================================================ */
.hours{background:var(--paper-2);border:1px solid var(--gauze);border-radius:var(--r-m);overflow:hidden}
.hours-row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--gauze);font-size:var(--fs-sm)}
.hours-row:last-child{border-bottom:0}
.hours-row.today{background:rgba(217,162,51,.1);font-weight:600}
.hours-row .tag{font-size:var(--fs-xs);color:var(--plasma);font-weight:700;letter-spacing:.07em}
.map-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:.75rem}
.map-head p{font-size:var(--fs-sm);color:var(--ink-70);margin:0}
.map-head a{color:var(--carmin);font-weight:600;text-decoration:none;font-size:var(--fs-sm)}
.map-head a:hover{text-decoration:underline;text-underline-offset:3px}
.map{border:1px solid var(--gauze);border-radius:var(--r-l);overflow:hidden;
  width:100%;height:340px;background:var(--gauze)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ============================================================
   FOOTER + FLOTANTE
   ============================================================ */
.foot{background:var(--ink);color:rgba(242,234,232,.72);padding-block:clamp(2.6rem,5vw,4rem) 1.6rem;font-size:var(--fs-sm)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem;padding-bottom:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.1)}
.foot h4{font-family:"Archivo",sans-serif;font-weight:600;font-size:.82rem;letter-spacing:.1em;
  color:#fff;margin-bottom:1rem;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--plasma)}
.foot-brand p{max-width:40ch;margin-top:.9rem;color:rgba(242,234,232,.6)}
.foot-brand img{height:52px;width:auto;display:block;margin-bottom:.9rem}
.foot-bot{padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--fs-xs);color:rgba(242,234,232,.62)}
.foot-acc summary{list-style:none;cursor:default}
.foot-acc summary::-webkit-details-marker{display:none}
.foot-acc summary h4{margin-bottom:1rem}

.float{position:fixed;right:clamp(.9rem,2.5vw,1.6rem);bottom:clamp(.9rem,2.5vw,1.6rem);z-index:55;
  display:grid;place-items:center;width:56px;height:56px;background:#1E9E54;color:#fff;text-decoration:none;
  border-radius:50%;box-shadow:0 18px 38px -16px rgba(30,158,84,.75);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 22px 44px -16px rgba(30,158,84,.85)}
.float svg{width:30px;height:30px}
.float-tel{background:var(--carmin);box-shadow:0 18px 38px -16px rgba(184,29,42,.75);
  bottom:calc(clamp(.9rem,2.5vw,1.6rem) + 68px)}
.float-tel:hover{box-shadow:0 22px 44px -16px rgba(184,29,42,.85)}
.float-tel svg{width:26px;height:26px}

.progress{position:fixed;top:0;left:0;height:3px;background:var(--carmin);z-index:80;width:0;transition:width .1s linear}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero .wrap,.check-grid,.compat-layout,.impact-grid,.drives,.ob-panel,.nos-grid{grid-template-columns:minmax(0,1fr)}
  .ob-reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz-col{display:contents}
  .quiz{order:1}
  .reqs-col{order:2}
  .bring{order:3}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  /* al apilar, la columna izquierda deja de necesitar altura completa ni empuje del bloque final */
  .compat-layout > .rv:not(.matrix){height:auto}
  .matrix{height:auto;align-content:normal}
  .unknown{margin-top:2rem}
}
@media (max-width:900px){
  .nav-links,.nav>.wrap>.nav-cta,.nav-home-sep{display:none}
  .burger{display:grid}
  .explorer{grid-template-columns:1fr}
  .hc-detail{position:static}
}
@media (max-width:760px){
  /* la proporción del tiempo deja de leerse: segmentos iguales y solo el número */
  .tl-seg .lab{display:none}
  .tl-seg .num{top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:1.05rem}
  .tl-bar{height:44px;gap:3px}
  .tl-seg{flex-basis:auto!important;flex:1 1 0;border-radius:6px}
  .tl-scale{justify-content:center}
  .tl-scale span:first-child,.tl-scale span:last-child{display:none}
  .tl-detail{grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
  .tl-time{grid-column:2/-1;text-align:left;display:flex;align-items:baseline;gap:.45rem;margin-top:.9rem}
  .tl-time b{font-size:1.5rem}
  .tl-time small{margin-top:0}
}
@media (max-width:620px){
  :root{--pad-sec:2.5rem;--fs-display:2.05rem}
  .topbar .tb-group:first-child{display:none}
  .topbar .wrap{justify-content:center}
  .nav .wrap{min-height:58px}
  .brand img{height:38px}
  .hero{padding-block:2rem 2.4rem}
  .hero-kicker{margin-bottom:.8rem;font-size:.7rem}
  .hero h1{margin-bottom:.85rem}
  .hero-lead{margin-bottom:1.4rem;font-size:.97rem}
  .hero-actions{flex-direction:column;gap:.5rem}
  .hero-actions .btn-solid{width:100%;justify-content:center}
  .hero-actions .btn-ghost{border:0;padding:.4rem 0;width:auto;
    text-decoration:underline;text-underline-offset:4px;
    color:rgba(251,242,240,.82);font-weight:500;font-size:.92rem}
  .hero-actions .btn-ghost:hover{background:none;transform:none}
  .jump-wrap{padding-top:1.1rem}
  .jump{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;overflow-x:visible;
    -webkit-mask-image:none;mask-image:none}
  .jump a{justify-content:center}
  .split{padding:1.1rem}
  .split-head{margin-bottom:.8rem}
  .split-foot{margin-top:.9rem;padding-top:.85rem}
  .split-foot .n{font-size:2.2rem}
  .srow{grid-template-columns:34px 1fr auto;gap:.7rem;padding:.6rem .75rem}
  .srow .vial{width:34px;height:34px}
  .srow b{font-size:.9rem}
  .srow small{font-size:.74rem}
  .srow .days{font-size:.95rem}
  .srow .days small{font-size:.62rem}
  .filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.45rem;overflow:visible;margin-inline:0;padding-inline:0}
  .filt{justify-content:center;font-size:.8rem;padding:.45rem .5rem;white-space:nowrap}
  .filt span:not(.sw){display:none}
  .types{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .cf-grid{grid-template-columns:minmax(0,1fr)}
  .ob-reasons{grid-template-columns:minmax(0,1fr)}
  .map{height:260px}
  .nos-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
  .nos-thumb{aspect-ratio:4/3;border-width:1px}
  .foot{padding-bottom:90px}
  .float{width:48px;height:48px}
  .float svg{width:26px;height:26px}
  .float-tel svg{width:22px;height:22px}
  .float-tel{bottom:calc(clamp(.9rem,2.5vw,1.6rem) + 58px)}
  .ob-aside li a.mail{font-size:.76rem;white-space:nowrap}
  .foot-acc{border-bottom:1px solid rgba(255,255,255,.1)}
  .foot-acc summary{cursor:pointer;display:flex;justify-content:space-between;
    align-items:center;padding:.9rem 0}
  .foot-acc summary h4{margin-bottom:0}
  .foot-acc summary::after{content:"+";font-size:1.1rem;color:var(--plasma);
    line-height:1}
  .foot-acc[open] summary::after{content:"−"}
  .foot-acc ul{padding-bottom:1rem}
  .myth{flex-basis:calc(100% - 3.5rem);padding:1.2rem}
  .myth .r{font-size:.92rem}
  .myth .m{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .srow{opacity:1;transform:none}
}