/* The @font-face rules live in AssetManager::font_face_css(), printed inline
   with an absolute URL and served from the shared assets/fonts/ folder. Here
   they duplicated the same seven files through relative paths. */
/* ============================================================
   Application pages · stylesheet ported from the approved HTML mockup.
   Everything is scoped to .srap: inside WordPress these rules live next
   to the theme's, and without the wrapper the global selectors
   (body, *, :root) would bleed over the rest of the site.
   DO NOT edit by hand: regenerated by application-pages-build/portar-al-plugin.py
   ============================================================ */
/* ============================================================
   ScaleReady · Application Page Template — shared stylesheet.
   Tokens and patterns ported 1:1 from the G-Rex microsite system
   (the plugin's tokens.css): ONE stylesheet for every application
   page; each page only changes its content.
   ============================================================ */






.srap{
  --ink-deep:#0E1D41;--ink:#244378;--text:#33405a;--text-soft:#68738a;
  --border:#e5eaf1;--line:#eef1f6;
  --glow:#22d3ee;--glow-soft:#ecfeff;
  --accent:#f97316;--accent-hov:#ea580c;--accent-soft:#fff5ec;
  --r-sm:6px;--r-md:12px;--r-btn:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;
  --sh-soft:0 4px 15px rgba(20,29,55,.05);--sh-card:0 10px 30px rgba(20,29,55,.06);
  --sh-card-hov:0 18px 44px rgba(20,29,55,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-display:"SREW Barlow","Barlow",sans-serif;
  --font:"SREW Mulish","Mulish",sans-serif}
.srap *{box-sizing:border-box}
.srap{scroll-behavior:smooth}
.srap{margin:0;font-family:var(--font);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
.srap img{display:block;max-width:100%}
.srap .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.srap sup.reg{font-family:var(--font-display);font-weight:inherit;font-size:.9em;line-height:0;vertical-align:baseline;position:relative;top:-.04em}
.srap :is(h1, .srap h2, .srap h3) sup.reg{font-size:.7em;top:-.26em}
/* in uppercase with tracking, the ® sits tight to the word (letter-spacing pulls it away) */
.srap .eyebrow sup.reg{margin-left:-.18em}
.srap .wg-cap sup.reg{margin-left:-.14em}
.srap .app-hero .proof sup.reg{margin-left:-.12em}

/* review bar (mockup only; dropped when porting) */









/* system pieces */
.srap .eyebrow{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin:0 0 .9rem;display:flex;align-items:center;gap:.8em}
.srap .eyebrow::before{content:"";width:2.2em;height:2px;background:var(--accent);flex:none}
.srap .h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);margin:0}
.srap .lead{font-size:1.12rem;line-height:1.6;color:var(--text);max-width:66ch;margin:1.1rem 0 0}
.srap .btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:#fff;padding:.85em 1.6em;border-radius:var(--r-btn);border:1px solid transparent;text-decoration:none;cursor:pointer;
  background:var(--accent);box-shadow:0 8px 22px rgba(249,115,22,.32);
  transition:background .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
/* The colour is restated in every state on purpose: the theme paints a:hover and,
   if the button doesn't declare it, the label turns blue on hover. */
.srap .btn:hover,.srap .btn:focus,.srap .btn:active,
.srap a.btn:hover,.srap a.btn:focus,.srap a.btn:active{color:#fff}
.srap .btn:hover .btn-lbl,.srap .btn:hover .arr,
.srap a.btn:hover .btn-lbl,.srap a.btn:hover .arr{color:inherit}
.srap .btn:hover{background:var(--accent-hov);transform:translateY(-2px);box-shadow:0 12px 28px rgba(249,115,22,.4)}
.srap .btn .arr{transition:transform .28s var(--ease)}
.srap .btn:hover .arr{transform:translateX(3px)}
.srap .btn-lbl{display:inline;white-space:nowrap}
@media(max-width:480px){.srap .btn{max-width:100%;box-sizing:border-box}.srap .btn-lbl{white-space:normal}}
.srap .btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);box-shadow:none;color:#fff}
.srap .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}
.srap .btn.sm{font-size:.86rem;padding:.6em 1.2em}
.srap .btn.ink{background:var(--ink-deep);box-shadow:0 8px 22px rgba(14,29,65,.26)}
.srap .btn.ink:hover{background:var(--ink);box-shadow:0 12px 28px rgba(14,29,65,.32)}
.srap .cta-dot{position:relative;width:8px;height:8px;border-radius:50%;background:#fff;flex:none;margin-right:.1em}
.srap .cta-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.85);animation:appPing 2.2s var(--ease) infinite}
@keyframes appPing{0%{transform:scale(1);opacity:.9}70%{transform:scale(3.2);opacity:0}100%{opacity:0}}

/* system image placeholder */
.srap .ph{width:100%;height:100%;border:1.5px dashed var(--border);border-radius:10px;display:grid;place-items:center;
  align-content:center;gap:.35rem;color:#8296b4;background:#fbfdff}
.srap .ph svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.srap .ph span{font-family:var(--font-display);font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ── M1 · Hero ── */
.srap .app-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(130% 130% at 12% 8%,#16305e 0%,#0E1D41 46%,#091531 100%)}
.srap .app-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(38% 52% at 84% 14%,rgba(34,211,238,.26),transparent 62%),
             radial-gradient(44% 58% at 10% 96%,rgba(249,115,22,.18),transparent 60%)}
.srap .app-hero .wrap{position:relative;padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:clamp(4rem,8vw,6rem);
  text-align:center;max-width:1200px}
.srap .app-hero .eyebrow{justify-content:center;color:#82d9ec}
.srap .app-hero .eyebrow::before{background:var(--glow)}
.srap .app-hero h1{font-family:var(--font-display);font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:700;line-height:1.1;
  letter-spacing:-.015em;color:#fff;margin:.2em 0 .3em;text-wrap:balance}
.srap .app-hero .sub{font-size:1.12rem;color:rgba(223,234,248,.85);max-width:62ch;margin:1rem auto 0;line-height:1.6}
.srap .app-hero .sub a{color:#a7f0ff;text-decoration:underline;text-underline-offset:3px}
.srap .app-hero .ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.9rem}
.srap .app-hero .proof{font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(223,234,248,.55);margin:1.4rem 0 0}

/* ── light sections ── */
.srap .sec{padding:clamp(3.5rem,7vw,5.5rem) 0}
.srap .sec.tint{background:linear-gradient(180deg,#fff 0%,#eaf3fb 18%,#f2f8fd 60%,#fff 100%)}
.srap .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1.8rem clamp(2rem,5vw,3.5rem);align-items:start}
.srap .split .text p{margin:0 0 1rem;font-size:1.03rem;line-height:1.7;color:var(--text)}
.srap .split .text p:last-child{margin-bottom:0}
@media(max-width:900px){.srap .split{grid-template-columns:1fr}}

/* argument cards (M2 CAR-T) */
.srap .args{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;margin-top:2.4rem}
.srap .arg{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.4rem 1.5rem;box-shadow:var(--sh-soft)}
.srap .arg b{font-family:var(--font-display);display:block;font-weight:700;font-size:1.05rem;color:var(--ink-deep);margin:0 0 .5rem}
.srap .arg p{margin:0;font-size:.92rem;line-height:1.65;color:var(--text-soft)}

/* referenceable base (M3) */
.srap .base{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.srap .chip{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.05em;color:var(--ink);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:.5em 1em;box-shadow:var(--sh-soft)}
.srap .sec .btn-row{margin-top:2rem}

/* ── M4 · linear process (assembly line) ── */
.srap .line-label{font-family:var(--font-display);font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);margin:2.4rem 0 1.2rem}
.srap .assembly{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem}
.srap .assembly::before{content:"";position:absolute;top:21px;left:4%;right:4%;height:2px;
  background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 14px)}
.srap .a-step{position:relative;text-align:center;padding-top:0}
.srap .a-step i{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:#fff;border:1.5px solid var(--border);color:var(--ink);font-family:var(--font-display);
  font-style:normal;font-weight:800;font-size:.85rem;box-shadow:var(--sh-soft)}
.srap .a-step b{display:block;font-family:var(--font-display);font-weight:700;font-size:.8rem;line-height:1.25;color:var(--ink-deep);margin-top:.6rem}
.srap .a-step:last-child i{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .proof-note{font-size:.95rem;line-height:1.65;color:var(--text-soft);max-width:70ch;margin:2rem 0 0}
.srap .support-line{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);margin:1rem 0 0}
@media(max-width:900px){
  .srap .assembly{grid-template-columns:1fr;gap:.9rem;justify-items:start}
  .srap .assembly::before{left:21px;right:auto;top:4%;bottom:4%;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,var(--border) 0 8px,transparent 8px 14px)}
  .srap .a-step{display:flex;align-items:center;gap:.9rem;text-align:left}
  .srap .a-step b{margin-top:0}
}

/* ── M4 · circular process (TIL) ── */
.srap .circle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);align-items:center;margin-top:2.4rem}
.srap .ring{position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto;width:100%}
.srap .ring::before{content:"";position:absolute;inset:9%;border:2px dashed var(--border);border-radius:50%}
/* closing arrow: the circle ENDS at the patient */
.srap .ring svg.arrow{position:absolute;inset:9%;width:82%;height:82%;overflow:visible}
.srap .c-node{position:absolute;transform:translate(-50%,-50%);text-align:center;width:104px}
.srap .c-node i{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1.5px solid var(--border);color:var(--ink);font-family:var(--font-display);font-style:normal;
  font-weight:800;font-size:.85rem;box-shadow:var(--sh-soft);transition:all .25s var(--ease)}
.srap .c-node b{display:block;font-family:var(--font-display);font-weight:700;font-size:.76rem;line-height:1.2;color:var(--ink-deep);margin-top:.4rem}
.srap .c-node.fin i{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .c-node.on i{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.srap .stages{display:flex;flex-direction:column;gap:.65rem}
.srap .stage{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:.95rem 1.15rem;box-shadow:var(--sh-soft);cursor:default;transition:border-color .2s,box-shadow .2s}
.srap .stage.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.srap .stage b{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink-deep)}
.srap .stage p{margin:.3rem 0 0;font-size:.88rem;line-height:1.55;color:var(--text-soft)}
@media(max-width:900px){.srap .circle-grid{grid-template-columns:1fr}}

/* ── M5 · productos ── */
.srap .prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:2.4rem}
/* Three cards: fixed columns, otherwise auto-fit leaves the gap of a fourth one. */
.srap .prods--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.srap .prods--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.srap .prod{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-soft);
  display:flex;flex-direction:column;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.srap .prod:hover{transform:translateY(-3px);box-shadow:var(--sh-card-hov)}
.srap .prod .shot{height:170px;flex:none;display:grid;place-items:center;padding:1rem;background:#fbfdff;border-bottom:1px solid var(--line)}
.srap .prod .shot img{max-height:145px;max-width:92%;object-fit:contain}
.srap .prod .body{padding:.95rem 1.05rem 1.15rem;text-align:center}
.srap .prod .body b{font-family:var(--font-display);display:block;font-weight:700;font-size:.98rem;color:var(--ink-deep)}
.srap .prod .body p{margin:.45rem 0 0;font-size:.85rem;line-height:1.55;color:var(--text-soft)}
.srap .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;margin-top:2.4rem}
.srap .cat{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.4rem 1.5rem;box-shadow:var(--sh-soft);
  border-top:3px solid var(--glow)}
.srap .cat b{font-family:var(--font-display);display:block;font-weight:700;font-size:1.02rem;color:var(--ink-deep);margin:0 0 .5rem}
.srap .cat p{margin:0;font-size:.9rem;line-height:1.65;color:var(--text-soft)}

/* ── M3 Rd2 · one square per institution (Grant Program pattern) ──
   Flex and not grid: the eleven cards don't split into even rows and with grid
   the last one would hang off to the left; in flex it centres itself. */
.srap .m3-cards{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem;margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.srap .m3c{flex:0 1 calc(25% - .75rem);min-width:200px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  background:#fff;border-radius:16px;padding:clamp(1.1rem,1.8vw,1.35rem);
  box-shadow:0 18px 44px rgba(6,16,40,.18)}
.srap .m3c-logo{display:flex;align-items:center;justify-content:center;width:100%;height:56px}
.srap .m3c-logo img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain}
.srap .m3c-logo .ph{width:100%;max-width:150px;aspect-ratio:16/7}
.srap .m3c-t{font-family:var(--font-display);font-weight:700;font-size:.93rem;line-height:1.3;
  color:var(--ink-deep);margin:0}
.srap .m3c-x{margin:0;font-size:.82rem;line-height:1.55;color:var(--text-soft)}
/* Rd3 · the Gold Standard cards link to the source of each quote. The theme
   and Elementor's kit both paint a:hover, so the colour is restated in every
   state — otherwise the title turns cyan on hover. */
.srap a.m3c{text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease}
.srap a.m3c:hover,.srap a.m3c:focus-visible{text-decoration:none;color:inherit;
  transform:translateY(-3px);box-shadow:0 24px 54px rgba(6,16,40,.26)}
.srap a.m3c:hover .m3c-t,.srap a.m3c:focus-visible .m3c-t{color:var(--ink-deep)}
.srap a.m3c:hover .m3c-x,.srap a.m3c:focus-visible .m3c-x{color:var(--text-soft)}
.srap a.m3c:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.srap a.m3c,.srap a.m3c:hover{transition:none;transform:none}}
.srap .btn.sm{font-size:.86rem;padding:.62em 1.4em}
@media(max-width:1020px){.srap .m3c{flex-basis:calc(33.333% - .7rem)}}
@media(max-width:720px){.srap .m3c{flex-basis:calc(50% - .5rem)}}
@media(max-width:460px){.srap .m3c{flex-basis:100%}}

/* --- Logo wall: how many per row -----------------------------------------
   Additive: a wall with no m3-cols-* class keeps the four per row it has
   always had. Inside a min-width so the responsive rules below 1020px still
   take over - declared in the base scope this would outweigh them and the
   wall would stay at three columns on a phone. */
@media(min-width:1021px){
  .srap .m3-cards--logos.m3-cols-2 .m3c{flex-basis:calc(50% - .5rem)}
  .srap .m3-cards--logos.m3-cols-3 .m3c{flex-basis:calc(33.333% - .7rem)}
  .srap .m3-cards--logos.m3-cols-4 .m3c{flex-basis:calc(25% - .75rem)}
  .srap .m3-cards--logos.m3-cols-5 .m3c{flex-basis:calc(20% - .8rem)}
  .srap .m3-cards--logos.m3-cols-6 .m3c{flex-basis:calc(16.666% - .84rem)}
}

/* Rd2 · TIL's M2 with the treatment of CAR-T's M2 (icon + label + body).
   Only two cards and wider ones, so the body copy asks for one more point of
   size. Colour tells the two sides apart: neutral for "before", cyan for
   "after" — that is the design/colour shift the slide calls for. */
.srap .sp-fcard.til-cmp{gap:.7rem}
.srap .sp-fcard.til-cmp p{margin:0;font-size:.93rem;line-height:1.62;color:var(--text)}
.srap .sp-fcard.til-cmp.antes i{background:var(--line);border-color:var(--border);color:var(--text-soft)}
.srap .sp-fcard.til-cmp.antes:hover{border-color:var(--border-fuerte,var(--border))}

/* Rd2 · the -TF family (TIL) cards are links too */
.srap a.prod{text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.srap a.prod:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,29,65,.12)}
.srap a.prod:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* Rd2 · the product cards are links */
.srap a.cat{text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.srap a.cat:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(14,29,65,.12)}
.srap a.cat:focus-visible{outline:2px solid var(--glow);outline-offset:3px}

/* ── M4 Rd2 · circle on the left + copy boxes on the right ── */
.srap .pr-split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.6rem,3.4vw,3rem);align-items:start;margin-top:1.6rem}
.srap .pr-cards{display:flex;flex-direction:column;gap:.6rem}
.srap .pr-card{display:flex;gap:.9rem;align-items:flex-start;text-align:left;width:100%;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:.95rem 1.1rem;cursor:pointer;font:inherit;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.srap .pr-card:hover{border-color:var(--glow);transform:translateX(2px)}
.srap .pr-card:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.srap .pr-card>i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--line);color:var(--ink);font-style:normal;
  font-family:var(--font-display);font-weight:800;font-size:.76rem}
.srap .pr-card b{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:var(--ink-deep);margin-bottom:.2rem}
.srap .pr-card p{margin:0;font-size:.9rem;line-height:1.55;color:var(--text-soft)}
/* The selected phase: the card stays WHITE and the visual weight goes to the
   badge, which takes on the cyan with the number in white. */
.srap .pr-card.on{background:#fff;border-color:var(--glow);
  box-shadow:0 10px 28px rgba(34,211,238,.18)}
.srap .pr-card.on>i{background:var(--glow);color:#fff}
.srap .pr-node{background:none;border:0;padding:0;cursor:pointer;font:inherit}
/* The circle's node does the same: cyan fill and white icon, instead of
   staying a ring that was barely visible.
   High specificity on purpose: secciones.css (which loads AFTER this
   stylesheet) paints the G-Rex zone nodes with `.pr-node.g i` and, on legend
   focus, with `.pr.foco-g .pr-node.g i` (0,4,1). The selected state has to
   beat both or the node stays in the light zone cyan. */
.srap .pr .pr-ring .pr-node.on.g i, .srap .pr .pr-ring .pr-node.on.h i{background:var(--glow);border-color:var(--glow);
  color:#fff;box-shadow:0 6px 18px rgba(34,211,238,.4)}
.srap .pr .pr-ring .pr-node.on span{color:var(--ink-deep)}
@media(max-width:900px){.srap .pr-split{grid-template-columns:1fr}}

/* ── M6 · pathway cards ── */
.srap .paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-top:2.4rem}
.srap .path{display:block;text-decoration:none;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.4rem 1.5rem;box-shadow:var(--sh-soft);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s}
.srap .path:hover{transform:translateY(-3px);box-shadow:var(--sh-card-hov);border-color:var(--accent)}
.srap .path b{font-family:var(--font-display);display:flex;align-items:center;gap:.5em;font-weight:700;font-size:1.05rem;color:var(--ink-deep)}
.srap .path b::after{content:"→";color:var(--accent);transition:transform .25s var(--ease)}
.srap .path:hover b::after{transform:translateX(3px)}
.srap .path p{margin:.55rem 0 0;font-size:.9rem;line-height:1.6;color:var(--text-soft)}

/* ── M7 · FAQ (microsite pattern) ── */
.srap .faq-list{margin-top:2rem;display:flex;flex-direction:column;gap:.55rem}
.srap details.faq{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.srap details.faq:hover{border-color:var(--glow)}
.srap details.faq[open]{border-color:var(--accent);box-shadow:var(--sh-card)}
.srap details.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.35rem 2rem;
  cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--ink-deep)}
.srap details.faq summary::-webkit-details-marker{display:none}
.srap details.faq summary:hover{color:var(--accent)}
.srap .faq-qt{flex:1 1 auto;min-width:0}
.srap .faq .toggle{position:relative;width:32px;height:32px;border-radius:50%;background:var(--line);color:var(--ink);
  display:inline-flex;flex:none;transition:background .3s var(--ease),color .3s var(--ease)}
.srap .faq .toggle::before, .srap .faq .toggle::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px}
.srap .faq .toggle::before{width:12px;height:2px;transform:translate(-50%,-50%)}
.srap .faq .toggle::after{width:2px;height:12px;transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.srap .faq[open] .toggle{background:var(--accent);color:#fff}
.srap .faq[open] .toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.srap .faq-a{padding:0 2rem 1.4rem}
.srap .faq-a p{font-size:.97rem;line-height:1.65;color:var(--text);max-width:60em;margin:0}
.srap .faq-cta{margin-top:1.6rem;font-size:.95rem;color:var(--text-soft);text-align:left}
.srap .faq-cta a{color:var(--ink);font-weight:700;border-bottom:1.5px solid var(--glow);text-decoration:none}
.srap .faq-cta a:hover{color:var(--accent);border-color:var(--accent)}

/* ── M8 · evidence ── */
.srap .refs{margin:2rem 0 0;padding:0;counter-reset:ref;columns:2;column-gap:2.5rem}
.srap .refs li{list-style:none;counter-increment:ref;position:relative;padding-left:2rem;margin:0 0 1rem;
  font-size:.82rem;line-height:1.55;color:var(--text-soft);break-inside:avoid}
.srap .refs li::before{content:counter(ref);position:absolute;left:0;top:.1em;font-family:var(--font-display);
  font-weight:800;font-size:.7rem;color:var(--ink);background:var(--line);border-radius:var(--r-pill);
  min-width:1.5rem;text-align:center;padding:.15em .3em}
@media(max-width:900px){.srap .refs{columns:1}}

/* mini process path in the hero (TIL, R3 design) */
.srap .hero-ruta{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.srap .hr-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.34em .62em;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);
  font-family:var(--font-display);font-weight:700;font-size:.73rem;color:var(--ink);transition:all .3s var(--ease)}
.srap .hr-chip .ic{width:14px;height:14px;color:#0e7490}
.srap .hr-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .hr-chip.on .ic{color:#fff}
.srap .hr-sep{width:9px;height:0;border-top:2px dashed rgba(36,67,120,.35)}

/* mockup footer */
.srap .mock-note{border-top:1px solid var(--line);padding:1.4rem clamp(1.25rem,4vw,2.5rem);font-size:.78rem;color:var(--text-soft)}
@media (prefers-reduced-motion:reduce){.srap *{animation:none!important;transition:none!important}.srap{scroll-behavior:auto}}
/* Hero options mockup — extends app.css. LIGHT treatment of the Gen2 hero. */
.srap .opt{border-bottom:6px solid var(--line)}
.srap .optbar{display:flex;align-items:center;gap:.6rem;padding:.55rem clamp(1rem,3vw,1.4rem);
  background:#f4f6f8;color:var(--text-soft);font-size:.78rem;border-bottom:1px solid var(--border)}
.srap .optbar b{font-family:var(--font-display);font-weight:800;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.srap .optbar .hint{margin-left:auto;font-size:.72rem;color:var(--text-soft)}

/* light Gen2-style base */
.srap .app-hero.hv{color:var(--text);background:linear-gradient(160deg,#f2f8ff 0%,#eef5ff 45%,#fff4ea 100%)}
.srap .app-hero.hv::before{background:radial-gradient(60% 70% at 82% 26%,rgba(34,211,238,.12),transparent 60%),
  radial-gradient(50% 60% at 96% 82%,rgba(249,115,22,.08),transparent 60%)}
.srap .app-hero.hv::after{content:"";position:absolute;inset:-25%;pointer-events:none;
  background:radial-gradient(26% 28% at 18% 22%,rgba(34,211,238,.20),transparent 62%),
             radial-gradient(22% 24% at 66% 12%,rgba(125,211,252,.16),transparent 62%),
             radial-gradient(30% 32% at 88% 66%,rgba(249,115,22,.10),transparent 62%),
             radial-gradient(24% 26% at 34% 82%,rgba(34,211,238,.12),transparent 62%);
  filter:blur(34px);animation:hvMesh 20s ease-in-out infinite alternate}
@keyframes hvMesh{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2.5%,-2.5%,0) scale(1.1)}}
.srap .app-hero.hv-dots{background:
  radial-gradient(rgba(36,67,120,.07) 1px,transparent 1.5px) 0 0/24px 24px,
  linear-gradient(160deg,#f6f9ff 0%,#eef5ff 55%,#fff4ea 100%)}
.srap .app-hero.hv-cool{background:linear-gradient(175deg,#fff 0%,#f2f8ff 40%,#e9f2fa 78%,#fff4ea 100%)}
.srap .hv .wrap{z-index:1}
.srap .app-hero.hv .eyebrow{color:var(--ink)}
.srap .app-hero.hv .eyebrow::before{background:var(--accent)}
.srap .app-hero.hv h1{background:linear-gradient(168deg,#16264f 0%,#244378 55%,#2f5aa0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.srap .app-hero.hv .sub{color:var(--text)}
.srap .app-hero.hv .sub a{color:var(--ink)}
.srap .app-hero.hv .proof{color:var(--text-soft)}
.srap .hv .btn.ghost{background:#fff;border:1px solid var(--border);color:var(--ink-deep);box-shadow:var(--sh-soft)}
.srap .hv .btn.ghost:hover{border-color:var(--glow);background:var(--glow-soft)}
.srap .hv .btn.ghost.sm{font-size:.86rem;padding:.6em 1.2em}

/* two-column layout: text + widget */
.srap .hv-two .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,4vw,3.6rem);
  align-items:center;text-align:left;max-width:1200px}
.srap .hv-two .eyebrow{justify-content:flex-start}
.srap .hv-two .sub{margin-left:0}
.srap .hv-two .ctas{justify-content:flex-start}
.srap .hv-two .proof{text-align:left}
.srap .hv-one .wrap{max-width:1200px}

.srap .wg-cap{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#0e7490;margin:0 0 1rem;display:flex;align-items:center;gap:.5em}
.srap .wg-foot{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink);margin:1.2rem 0 0}
.srap .ic{width:16px;height:16px;flex:none}
.srap .cap-ic{width:15px;height:15px}
.srap .pend{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);background:rgba(255,255,255,.92);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.35em .8em}

/* ── CAR-T A · assembly rail ── */
.srap .asm{position:relative}
.srap .asm-rail{position:relative;padding-left:1.4rem}
.srap .asbar{position:absolute;left:calc(1.4rem + 15px);top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--glow),var(--accent));transform-origin:top;transform:scaleY(0)}
.srap .asm-rail::before{content:"";position:absolute;left:calc(1.4rem + 15px);top:14px;bottom:14px;width:0;
  border-left:2px dashed rgba(36,67,120,.22)}
.srap .asm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
.srap .as{display:flex;align-items:center;gap:.85rem;color:var(--text-soft);transition:color .25s var(--ease)}
.srap .as-dot{position:relative;z-index:1;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);color:var(--ink);transition:all .25s var(--ease)}
.srap .as-dot .ic{width:17px;height:17px}
.srap .as-lbl{font-family:var(--font-display);font-weight:700;font-size:.92rem}
.srap .as.on{color:var(--ink-deep)}
.srap .as.on .as-dot{background:var(--glow-soft);border-color:var(--glow);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.srap .as:last-child.on .as-dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(249,115,22,.2)}
.srap .as:hover{color:var(--ink-deep);cursor:default}

/* ── CAR-T B · expandable modules ── */
.srap .mod-stack{display:flex;flex-direction:column;gap:.7rem;max-width:460px}
.srap .mod{appearance:none;border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem;
  background:#fff;color:var(--ink-deep);text-align:left;cursor:pointer;box-shadow:var(--sh-soft);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.srap .mod:hover{background:var(--glow-soft);border-color:var(--glow)}
.srap .mod-head{display:flex;align-items:center;gap:.7rem}
.srap .mod-ic{width:19px;height:19px;color:#0e7490;flex:none}
.srap .mod-t{flex:1}
.srap .mod-chev{width:16px;height:16px;color:var(--text-soft);flex:none;transition:transform .3s var(--ease)}
.srap .mod[aria-expanded="true"]{border-color:var(--glow);background:#fff}
.srap .mod[aria-expanded="true"] .mod-chev{transform:rotate(180deg)}
.srap .mod-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.srap .mod-body>span{overflow:hidden;font-family:var(--font-body,inherit);font-weight:400;font-size:.9rem;
  line-height:1.6;color:var(--text-soft)}
.srap .mod[aria-expanded="true"] .mod-body>span{margin-top:.65rem}
.srap .mod-base{margin-top:.35rem;border-radius:14px;padding:.75rem 1.3rem;
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  background:var(--accent);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  letter-spacing:.04em;box-shadow:0 14px 30px rgba(249,115,22,.3)}
.srap .mod-base img{height:46px;width:auto;background:#fff;border-radius:10px;padding:4px 8px}

/* ── CAR-T C · phase selector ── */
.srap .phsel{margin-top:2.4rem;text-align:center}
.srap .phsel .wg-cap{justify-content:center}
.srap .seg-ic{width:15px;height:15px;margin-right:.45em;vertical-align:-2px}
.srap .seg{display:inline-flex;align-items:center}
.srap .phsel-row{display:flex;align-items:center;gap:1.1rem;text-align:left;margin-bottom:1.1rem}
.srap .phsel-ic{width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--glow-soft);border:1px solid rgba(34,211,238,.45);color:#0e7490}
.srap .phsel-ic .ic{width:26px;height:26px}
.srap .segs{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.45rem;padding:.4rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft)}
.srap .seg{appearance:none;border:1px solid transparent;border-radius:var(--r-pill);padding:.5em 1.15em;cursor:pointer;
  background:transparent;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.88rem;
  transition:all .2s var(--ease)}
.srap .seg:hover{background:var(--glow-soft);color:var(--ink-deep)}
.srap .seg.on{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .phsel-card{max-width:640px;margin:1.4rem auto 0;padding:1.5rem 1.7rem;border-radius:16px;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-card)}
.srap .phsel-body{color:var(--text);font-size:1.02rem;line-height:1.62;margin:0;min-height:3.3em}

/* ── TIL A · gold standard ── */
.srap .tr-photo{margin:0 0 1.2rem;border-radius:16px;overflow:hidden;box-shadow:var(--sh-card);
  border:1px solid var(--border)}
.srap .tr-photo img{display:block;width:100%;height:308px;object-fit:cover;object-position:center 82%}
.srap .tr-row{display:flex;align-items:center;gap:1.1rem}
.srap .tr-num{font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,7vw,5.6rem);line-height:1;
  background:linear-gradient(168deg,#16264f 0%,#244378 55%,#2f5aa0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;flex:none}
.srap .tr-line{font-family:var(--font-display);font-weight:700;font-size:1.08rem;line-height:1.45;color:var(--ink-deep);margin:0}
.srap .tr-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.srap .ti{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);
  padding:.45em .9em;box-shadow:var(--sh-soft);transition:transform .22s var(--ease),border-color .22s var(--ease)}
.srap .ti:hover{transform:translateY(-3px);border-color:var(--glow)}
.srap .ti-ic{width:14px;height:14px;color:#0e7490}

/* ── TIL B · before→after (visual comparison) ── */
.srap .cmp{margin-top:2.4rem}
.srap .cmp .wg-cap{justify-content:center}
.srap .cmp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:stretch}
.srap .cmp-col{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-card);
  padding:1.3rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.srap .cmp-col.antes{border-style:dashed}
.srap .cmp-col.despues{border-color:rgba(249,115,22,.45)}
.srap .cmp-tag{align-self:flex-start;font-family:var(--font-display);font-weight:800;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ink-deep);
  border-radius:var(--r-pill);padding:.45em 1em}
.srap .cmp-tag.naranja{background:var(--accent)}
.srap .cmp-scene{display:block;width:100%;max-width:460px;margin:0 auto;color:#8b96ab;height:260px}
.srap .cnode{fill:#fff;stroke:currentColor;stroke-width:1.4}
.srap .cline{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:4 4;opacity:.55}
.srap .wdot{fill:var(--accent);transform-box:fill-box;transform-origin:center;opacity:0}
.srap .cmp-photo{margin:0;display:flex;align-items:center;justify-content:center;height:260px}
.srap .cmp-photo img{max-height:250px;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(20,29,55,.18))}
.srap .cmp-arrow{align-self:center;font-size:1.6rem;color:var(--accent);font-weight:700}
.srap .cmp-body{color:var(--text);font-size:.93rem;line-height:1.6;margin:0}

/* ── TIL C · journey (1 column) ── */
.srap .jour{margin-top:2.6rem}
.srap .jr-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;align-items:start}
.srap .jr-bar{position:absolute;left:34px;right:34px;top:17px;height:2px;background:var(--border)}
.srap .jt{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:.5rem;color:var(--text-soft);font-family:var(--font-display);font-weight:700;font-size:.8rem;
  transition:color .22s var(--ease);position:relative;z-index:1}
.srap .jt i{font-style:normal;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);color:var(--ink);
  transition:all .22s var(--ease)}
.srap .jt i .ic{width:17px;height:17px}
.srap .jt.on{color:var(--ink-deep)}
.srap .jt.on i{background:var(--glow-soft);border-color:var(--glow);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.srap .jt.fin.on i{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(249,115,22,.2)}
.srap .jr-card{max-width:640px;margin:1.3rem auto 0;background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:1.2rem 1.5rem}
.srap .jr-body{color:var(--text);font-size:.98rem;line-height:1.6;margin:0;min-height:3.2em;text-align:center}

/* ── TIL D · scales ── */
.srap .sc-stage{display:flex;align-items:flex-end;justify-content:center;height:250px;margin-bottom:1.1rem}
.srap .sc-vessel{position:relative;display:flex;align-items:center;justify-content:center;
  width:120px;height:110px;border-radius:14px;border:1px solid var(--border);background:#fff;
  box-shadow:var(--sh-soft);overflow:hidden;padding:10px}
.srap .sc-vessel img{max-width:100%;max-height:calc(100% - 26px);object-fit:contain}
.srap .sc-range{width:100%;accent-color:var(--accent);cursor:pointer}
.srap .sc-stops{display:flex;justify-content:space-between;margin-top:.5rem}
.srap .sc-stop{font-family:var(--font-display);font-weight:700;font-size:.72rem;color:var(--text-soft);
  transition:color .2s var(--ease)}
.srap .sc-stop.on{color:var(--accent)}

/* ── TIL E · evidence ── */
.srap .ev-row{display:flex;align-items:center;gap:1.1rem}
.srap .ev-num{font-family:var(--font-display);font-weight:900;font-size:clamp(4rem,7vw,5.6rem);line-height:1;
  background:linear-gradient(168deg,#16264f 0%,#244378 55%,#2f5aa0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;flex:none}
.srap .ev-line{font-size:.96rem;line-height:1.55;color:var(--text);margin:0}
.srap .ev-deck{position:relative;margin-top:1.2rem;background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--sh-card);padding:1.2rem 1.4rem;min-height:8.4em}
.srap .ev-cite{position:absolute;inset:1.2rem 1.4rem;margin:0;color:var(--text-soft);font-size:.88rem;line-height:1.55;
  opacity:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.srap .ev-cite.on{opacity:1}

/* ── TIL F · product first ── */
.srap .show{text-align:center}
.srap .sh-stage{margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.srap .sh-ph{position:relative;display:flex;align-items:center;justify-content:center;
  width:min(300px,80%);aspect-ratio:4/3;border-radius:16px;border:1.5px dashed var(--border);
  background:#fff;box-shadow:var(--sh-soft);overflow:hidden;padding:14px}
.srap .sh-ph img.ghost{max-width:100%;max-height:calc(100% - 30px);object-fit:contain;opacity:.55;filter:saturate(.6)}
.srap .sh-name{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ink-deep)}
.srap .sh-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:1rem}
.srap .fp{appearance:none;border:1px solid var(--border);border-radius:var(--r-pill);padding:.5em 1em;cursor:pointer;
  background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:.8rem;
  box-shadow:var(--sh-soft);transition:all .2s var(--ease)}
.srap .fp:hover{border-color:var(--glow);background:var(--glow-soft)}
.srap .fp.on{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .sh-line{color:var(--text-soft);font-size:.9rem;line-height:1.55;max-width:40ch;margin:1rem auto 0}

@media(max-width:900px){
  .srap .hv-two .wrap{grid-template-columns:1fr;text-align:center}
  .srap .hv-two .eyebrow, .srap .hv-two .ctas{justify-content:center}
  .srap .hv-two .sub{margin-left:auto;margin-right:auto}
  .srap .hv-two .proof{text-align:center}
  .srap .asm-list{align-items:flex-start;text-align:left}
  .srap .asm{max-width:420px;margin:0 auto}
  .srap .mod-stack{margin:0 auto}
  .srap .phsel-body, .srap .cmp-body, .srap .jr-body{min-height:0}
  .srap .cmp-grid{grid-template-columns:1fr}
  .srap .cmp-arrow{transform:rotate(90deg)}

  .srap .tr-photo img{height:230px}
  .srap .tr-row, .srap .ev-row{justify-content:center}
  .srap .tr-chips{justify-content:center}
  .srap .jr-track{grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem}
  .srap .jt span{font-size:.62rem}
}
/* TIL section lab — extends app.css + heroes.css. */
.srap .whybar{padding:.5rem clamp(1rem,3vw,1.4rem);background:#fffdf7;border-bottom:1px solid var(--border);
  color:var(--text-soft);font-size:.8rem;line-height:1.5}
.srap .whybar b{font-family:var(--font-display);font-weight:800;font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-right:.5em}
.srap .sp .wrap{max-width:1200px}
.srap .sp-two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,3.5vw,3rem);
  align-items:center;margin-top:1.8rem}

/* problem scene (shared with heroes) */
.srap .sp-scene{display:block;width:100%;max-width:460px;height:230px;margin:0 auto;color:#8b96ab}

/* M2a comparison */
.srap .sp-cmp{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;margin-top:1.8rem;align-items:stretch}
.srap .sp-col{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-card);
  padding:1.3rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.srap .sp-col.antes{border-style:dashed}
.srap .sp-col.despues{border-color:rgba(249,115,22,.45)}
.srap .sp-col figure{margin:0;display:flex;justify-content:center;align-items:center;height:230px}
.srap .sp-col figure img{max-height:230px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(20,29,55,.18))}
.srap .sp-col p{margin:0;color:var(--text);font-size:.95rem;line-height:1.62}
.srap .sp-tag{align-self:flex-start;font-family:var(--font-display);font-weight:800;font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--ink-deep);
  border-radius:var(--r-pill);padding:.45em 1em}
.srap .sp-tag.naranja{background:var(--accent)}
.srap .sp-arrow{align-self:center;font-size:1.6rem;color:var(--accent);font-weight:700}

/* M2b narrative */
.srap .sp-tl{position:relative;padding-left:2.2rem;display:flex;flex-direction:column;gap:1.6rem}
.srap .sp-tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  border-left:2px dashed rgba(36,67,120,.25)}
.srap .sp-tlbar{position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--glow),var(--accent));transform-origin:top;transform:scaleY(0)}
.srap .sp-hito{position:relative}
.srap .sp-hito i{position:absolute;left:-2.2rem;top:.3em;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--glow);box-shadow:0 0 0 4px rgba(34,211,238,.12)}
.srap .sp-hito.fin i{border-color:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,.16)}
.srap .sp-hito p{margin:0;color:var(--text);font-size:.98rem;line-height:1.62}
.srap .sp-hito .fuerte{font-family:var(--font-display);font-weight:700;color:var(--ink-deep)}
.srap .sp-photo{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-card)}
.srap .sp-photo img{display:block;width:100%;height:340px;object-fit:cover;object-position:center 82%}

/* M2c quote */
.srap .sp-quote{position:relative;margin:1.2rem 0 1.6rem;padding-left:2.6rem;font-family:var(--font-display);
  font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.2;color:var(--ink-deep);
  letter-spacing:-.01em;text-wrap:balance;max-width:22em}
.srap .sp-qmark{position:absolute;left:0;top:-.18em;font-size:2.2em;color:var(--accent);line-height:1}
.srap .sp-cols{columns:2;column-gap:3rem;margin-top:1.2rem}
.srap .sp-cols p{margin:0 0 1em;color:var(--text);font-size:.97rem;line-height:1.65;break-inside:avoid}

/* M3a timeline */
.srap .sp-htl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.srap .sp-htl::before{content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;
  border-top:2px dashed rgba(36,67,120,.25)}
.srap .sp-htlbar{position:absolute;left:24px;right:24px;top:23px;height:2px;
  background:linear-gradient(90deg,var(--glow),var(--accent));transform-origin:left;transform:scaleX(0)}
.srap .sp-mile{position:relative;padding-top:3.4rem}
.srap .sp-mile i{position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);color:#0e7490;
  font-family:var(--font-display);font-weight:800;font-style:normal;font-size:.82rem}
.srap .sp-mile i .ic{width:20px;height:20px}
.srap .sp-mile.fin i{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .sp-mile p{margin:0;color:var(--text);font-size:.93rem;line-height:1.6}

/* ── M3 TIL · STATIC "line on top" timeline (2nd version for the client) ── */
.srap .tl-lead{margin:1.1rem 0 0;max-width:52ch;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.35;color:#fff;letter-spacing:-.01em}
.srap .tl-intro{margin-top:1rem;max-width:96ch}
.srap .tl-intro p{margin:0;color:rgba(223,234,248,.86);font-size:1rem;line-height:1.65}
.srap .sp-ink .ph{border-color:rgba(255,255,255,.24);background:transparent;color:#9fb6d6;border-radius:8px}
.srap .sp-ink .ph span{font-size:.56rem;letter-spacing:.1em}
.srap .tl-cite{margin:.75rem 0 0;color:rgba(223,234,248,.55);font-size:.72rem;line-height:1.45}
.srap .tl-ref{color:var(--glow);text-decoration:none;font-weight:700;margin-left:.3em}
.srap .tl-sw{margin-top:.55rem;display:inline-flex;align-items:center;gap:.35em;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--glow)}
.srap .tl-sw svg{width:12px;height:12px}
.srap .tl-sw:hover{color:#fff}
.srap .tl-badge{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:#0b1733;
  background:linear-gradient(120deg,var(--glow),#7ce7f7);padding:.42em .9em;border-radius:var(--r-pill)}
.srap .tlx{margin-top:2.4rem}
.srap .tlx .tl-badge{margin-bottom:1.7rem}
/* the axis takes its own grid row: that way it is always continuous */
.srap .tl-linea{grid-column:1 / -1;align-self:center;justify-self:stretch;width:100%;height:3px;
  border-radius:3px;background:linear-gradient(90deg,var(--glow) 0%,var(--glow) 78%,var(--accent) 100%);
  opacity:.6}
.srap .tlx ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:0 1.1rem}
.srap .tlx li{display:grid;grid-template-rows:subgrid;justify-items:center;text-align:center}
.srap .tlx li:nth-of-type(1){grid-column:1}.srap .tlx li:nth-of-type(2){grid-column:2}
.srap .tlx li:nth-of-type(3){grid-column:3}.srap .tlx li:nth-of-type(4){grid-column:4}
.srap .tlx li:nth-of-type(5){grid-column:5}.srap .tlx li:nth-of-type(6){grid-column:6}
.srap .tlx .ph{width:100%;height:100%}

/* ══ V1 · line on top ══ */
.srap .v1-lista{grid-template-rows:auto 26px auto auto}
.srap .v1-lista .tl-linea{grid-row:2}
.srap .v1-hito{grid-row:1 / 5}
.srap .v1-year{grid-row:1;font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.4rem,2.6vw,2rem);color:#fff;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:.6rem}
.srap .v1-punto{grid-row:2;align-self:center;width:16px;height:16px;border-radius:50%;background:#0e1d41;
  border:3px solid var(--glow);z-index:1}
.srap .v1-hito.fin .v1-punto{border-color:var(--accent);background:var(--accent)}
.srap .v1-hito.fin .v1-year{color:#ffd9bd}
.srap .v1-foto{grid-row:3;margin:1.4rem 0 .9rem;width:100%;height:112px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.srap .v1-card{grid-row:4;width:100%;text-align:left}
.srap .v1-card p{margin:0;color:rgba(223,234,248,.9);font-size:.84rem;line-height:1.55}

@media(max-width:1000px){
  .srap .tlx ol{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;row-gap:2.2rem}
  .srap .tl-linea{display:none}
  .srap .tlx li{display:flex;flex-direction:column;grid-row:auto}
  .srap .tlx li:nth-of-type(n){grid-column:auto}
}
@media(max-width:620px){.srap .tlx ol{grid-template-columns:1fr}}

/* ── M1 CAR-T · cell field with depth (hero chosen in Rd 1) ──── */
.srap .app-hero .hx-lienzo{position:absolute;inset:0;pointer-events:none;z-index:0}
/* Hero with no illustration (CAR-T, Rd 1): the height fits the content instead of
   filling the whole screen, which left an empty band under the button. */
.srap .app-hero.hv-corto, .srap .sr-stage~.app-hero.hv-corto{min-height:0;padding-top:0;padding-bottom:0}
.srap .hv-corto .wrap, .srap .sr-stage~.app-hero.hv-corto .wrap{padding-bottom:clamp(3.5rem,6vh,4.5rem)}
.srap .app-hero .hx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.srap .app-hero .hx-halo{position:absolute;left:50%;top:46%;width:min(760px,86vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,.13),transparent 62%);filter:blur(18px)}
.srap .app-hero .wrap{position:relative;z-index:1}

/* ── M4 CAR-T · loop with G-Rex sector (option P1 approved, Rd1) ────── */
.srap .pr-core-ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid rgba(249,115,22,.35);color:var(--accent)}
.srap .pr-core-ic .ic{width:30px;height:30px}
/* ══ P1 · shaded sector ══ */
.srap .pr{margin-top:2.2rem}
.srap .pr-ring{position:relative;width:min(640px,100%);aspect-ratio:1;margin:0 auto}
.srap .pr-svg{position:absolute;inset:0;width:100%;height:100%}
/* the client asked for the circle to read as CONNECTED: continuous stroke, in a
   lighter G-Rex blue (it used to be dotted and the cycle did not read as closed). */
.srap .pr-base{fill:none;stroke:rgba(34,211,238,.55);stroke-width:2;vector-effect:non-scaling-stroke}
.srap .pr-sector{fill:rgba(34,211,238,.13);stroke:rgba(34,211,238,.45);stroke-width:.4;vector-effect:non-scaling-stroke}
.srap .pr-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem}
.srap .pr-core b{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--ink-deep)}
.srap .pr-core small{font-size:.8rem;line-height:1.4;color:var(--text-soft)}
.srap .pr-node{position:absolute;transform:translate(-50%,-50%);width:132px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* who runs each step: same vocabulary as the original diagram */
.srap .pr-quien{display:inline-flex;align-items:center;gap:.3em;font-style:normal;
  font-family:var(--font-display);font-weight:800;
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;padding:.25em .6em;
  border-radius:999px;background:#f4f7fb;border:1px solid var(--border);color:var(--text-soft);
  margin-bottom:.1rem;transition:all .3s var(--ease)}
.srap .pr-quien .ic{width:13px;height:13px;flex:none}
.srap .pr-lg .ic{width:15px;height:15px;flex:none}
.srap .pr-node.g .pr-quien{background:var(--glow-soft);border-color:rgba(34,211,238,.5);color:#0e7490}
.srap .pr.foco-g .pr-node.g .pr-quien{border-color:var(--glow);background:#dffaff}
.srap .pr.foco-h .pr-node.h .pr-quien{border-color:var(--ink);color:var(--ink-deep)}
.srap .pr-node i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);color:var(--text-soft);
  transition:all .3s var(--ease)}
.srap .pr-node i .ic{width:26px;height:26px}
.srap .pr-node span{font-family:var(--font-display);font-weight:700;font-size:.88rem;line-height:1.3;
  color:var(--text-soft);transition:color .3s var(--ease)}
.srap .pr-node.g i{border-color:var(--glow);color:#0e7490;background:var(--glow-soft)}
.srap .pr-node.g span{color:var(--ink-deep)}
.srap .pr-badge{position:absolute;transform:translate(-50%,-50%);text-align:center;pointer-events:none;
  padding:.45em .85em;border-radius:14px;background:var(--ink-deep);color:#fff;white-space:nowrap;
  border:1px solid rgba(34,211,238,.35);box-shadow:0 10px 26px rgba(20,29,55,.3)}
.srap .pr-badge b{display:block;font-family:var(--font-display);font-weight:800;font-size:1rem}
.srap .pr-badge span{display:block;font-size:.72rem;color:#8fd8ea;margin-top:.12rem}
/* the legend is interactive: hovering it isolates that zone of the ring */
.srap .pr-leyenda{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem 1rem;margin:1.6rem 0 0}
.srap .pr-lg{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;
  padding:.55em 1.1em;border-radius:999px;background:#fff;border:1px solid var(--border);
  font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--text-soft);
  box-shadow:var(--sh-soft);transition:all .25s var(--ease)}
.srap .pr-lg .lg{width:13px;height:13px;border-radius:50%;flex:none}
.srap .pr-lg.g .lg{background:var(--glow-soft);border:2px solid var(--glow)}
.srap .pr-lg.h .lg{background:#fff;border:2px solid var(--border)}
.srap .pr-lg:hover{color:var(--ink-deep);transform:translateY(-2px)}
.srap .pr-lg.g:hover, .srap .pr-lg.g.on{border-color:var(--glow);background:var(--glow-soft);color:var(--ink-deep)}
.srap .pr-lg.h:hover, .srap .pr-lg.h.on{border-color:var(--ink);color:var(--ink-deep)}

/* when one zone is highlighted, the other dims */
.srap .pr.foco-g .pr-node.h, .srap .pr.foco-h .pr-node.g{opacity:.28}
.srap .pr.foco-g .pr-node.g i{border-color:var(--glow);box-shadow:0 8px 22px rgba(34,211,238,.28);
  transform:scale(1.06)}
.srap .pr.foco-g .pr-node.g span{color:var(--ink-deep)}
.srap .pr.foco-h .pr-node.h i{border-color:var(--ink);color:var(--ink-deep);
  box-shadow:0 8px 22px rgba(20,29,55,.16);transform:scale(1.06)}
.srap .pr.foco-h .pr-node.h span{color:var(--ink-deep)}
.srap .pr .pr-sector{transition:fill .3s var(--ease),stroke .3s var(--ease)}
.srap .pr.foco-g .pr-sector{fill:rgba(34,211,238,.24);stroke:rgba(34,211,238,.7)}
.srap .pr.foco-h .pr-sector{fill:rgba(34,211,238,.05);stroke:rgba(34,211,238,.18)}
.srap .pr .pr-badge{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.srap .pr.foco-h .pr-badge{opacity:.35}
.srap .pr.foco-g .pr-badge{transform:translate(-50%,-50%) scale(1.06)}

/* the loop on small screens: ring and nodes scaled proportionally so the
   cards neither overflow the width nor overlap each other */
@media(max-width:900px){
  .srap .pr-ring{width:min(460px,100%)}
  .srap .pr-node{width:104px;gap:.3rem}
  .srap .pr-node i{width:46px;height:46px}
  .srap .pr-node i .ic{width:21px;height:21px}
  .srap .pr-node span{font-size:.74rem}
  .srap .pr-quien{font-size:.56rem;padding:.2em .45em}
  .srap .pr-core{width:40%}
  .srap .pr-core-ic{width:50px;height:50px}
  .srap .pr-core b{font-size:1.05rem}
  .srap .pr-badge b{font-size:.86rem}
  .srap .pr-badge span{font-size:.62rem}
}
@media(max-width:560px){
  .srap .pr-ring{width:min(330px,94%)}
  .srap .pr-node{width:78px}
  .srap .pr-node i{width:38px;height:38px}
  .srap .pr-node i .ic{width:18px;height:18px}
  .srap .pr-node span{font-size:.64rem;line-height:1.2}
  .srap .pr-quien{font-size:.5rem;letter-spacing:.05em;padding:.16em .38em}
  .srap .pr-core small{display:none}
  .srap .pr-core b{font-size:.95rem}
  .srap .pr-badge{padding:.35em .6em}
  .srap .pr-badge b{font-size:.76rem}
  .srap .pr-badge span{display:none}
  .srap .pr-lg{font-size:.78rem;padding:.45em .85em}
}

/* ── M3 CAR-T · institution logo carousel (Rd1) ─────────────── */
/* GOTCHA: a grid item comes with min-width:auto, so the column grew to the
   track's width (3000+ px) instead of clipping it -> horizontal scroll. */
.srap .m3f-grid > *{min-width:0}
.srap .lgc{position:relative;display:flex;align-items:center;gap:.7rem;margin-top:1.7rem;
  max-width:100%;min-width:0}
.srap .lgc-nav{appearance:none;flex:none;width:36px;height:36px;border-radius:50%;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;
  display:grid;place-items:center;transition:all .2s var(--ease)}
.srap .lgc-nav svg{width:16px;height:16px}
.srap .lgc-nav:hover{background:var(--glow);border-color:var(--glow);color:#04222c;transform:scale(1.06)}
.srap .lgc-view{position:relative;flex:1 1 0;min-width:0;max-width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.srap .lgc-track{display:flex;align-items:stretch;gap:.7rem;width:max-content;will-change:transform}
.srap .lgc-item{flex:0 0 auto;width:150px;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:.85rem .7rem;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);transition:all .3s var(--ease)}
.srap .lgc-item:hover{background:rgba(255,255,255,.1);border-color:var(--glow);transform:translateY(-3px)}
.srap .lgc-shot{margin:0;width:100%;height:48px;border-radius:8px;background:#fff;overflow:hidden}
.srap .lgc .lgc-shot img{width:100%;height:100%;object-fit:contain;display:block}
.srap .lgc-shot .ph{border-color:rgba(255,255,255,.24);background:transparent;color:#9fb6d6;border-radius:8px}
.srap .lgc-shot .ph span{display:none}
.srap .lgc-shot .ph svg{width:20px;height:20px}
.srap .lgc-name{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(223,234,248,.72);text-align:center;line-height:1.25}
.srap .lgc-item:hover .lgc-name{color:#fff}
@media(max-width:760px){.srap .lgc-item{width:126px}.srap .lgc-nav{width:32px;height:32px}}

/* ── M3 TIL · evolution console (proposal A approved) ── */
.srap .ga-lead{margin:1.1rem 0 0;max-width:52ch;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.15rem,2vw,1.42rem);line-height:1.35;color:#fff;letter-spacing:-.01em}
.srap .ga-intro{margin-top:1rem;max-width:96ch}
.srap .ga-intro p{margin:0;color:rgba(223,234,248,.86);font-size:1rem;line-height:1.65}
.srap .sp-ink .ph{border-color:rgba(255,255,255,.26);background:transparent;color:#9fb6d6}
.srap .ga-ref{color:var(--glow);text-decoration:none;font-weight:700;margin-left:.35em}
.srap .ga-ref:hover{text-decoration:underline}
.srap .ga-sw{margin-top:.7rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.35em;
  text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--glow)}
.srap .ga-sw svg{width:13px;height:13px}
.srap .ga-sw:hover{color:#fff}

/* timeline (top): range + draggable year rail with arrows */
.srap .ga-tl{margin-top:2.4rem}
/* the range lines up with the rail below: 'today' falls on the last year */
.srap .ga-span{display:flex;align-items:center;margin-bottom:1rem;
  padding-left:calc(38px + .9rem)}
.srap .ga-span b{font-family:var(--font-display);font-weight:800;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:#0b1733;background:linear-gradient(120deg,var(--glow),#7ce7f7);
  padding:.42em .9em;border-radius:var(--r-pill);flex:none}

.srap .ga-map{display:flex;align-items:center;gap:.9rem}
.srap .ga-nav{appearance:none;flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:grid;place-items:center;transition:all .2s var(--ease)}
.srap .ga-nav svg{width:17px;height:17px}
.srap .ga-nav:hover:not(:disabled){background:var(--glow);border-color:var(--glow);color:#04222c}
.srap .ga-nav:disabled{opacity:.3;cursor:default}

.srap .ga-track{position:relative;flex:1;min-width:0;height:2px;border-radius:2px;
  background:rgba(255,255,255,.16);cursor:pointer;touch-action:none;margin-top:6px}
.srap .ga-track::before{content:"";position:absolute;left:0;right:0;top:-16px;bottom:-30px}
.srap .ga-track.dragging{cursor:grabbing}
.srap .ga-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--glow),var(--accent))}
.srap .ga-knob{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(34,211,238,.3);cursor:grab;z-index:2;
  transition:box-shadow .2s var(--ease)}
.srap .ga-knob:hover, .srap .ga-knob:focus-visible{box-shadow:0 0 0 7px rgba(34,211,238,.35);outline:none}
.srap .ga-track.dragging .ga-knob{cursor:grabbing;box-shadow:0 0 0 9px rgba(34,211,238,.4)}
/* the years hang off the track itself: that way the dot stays centred on the line
   (before it was positioned against the button and sat a few px below) */
.srap .ga-years{position:absolute;left:0;right:0;top:0;height:0}
.srap .ga-y{appearance:none;background:transparent;border:0;cursor:pointer;padding:18px .4em 0;
  position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;line-height:1;
  font-family:var(--font-display);font-weight:700;font-size:.84rem;color:rgba(223,234,248,.5);
  font-variant-numeric:tabular-nums;transition:color .2s}
.srap .ga-y::before{content:"";position:absolute;top:1px;left:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:#16305e;border:2px solid rgba(255,255,255,.3);
  box-sizing:content-box;transition:all .25s var(--ease)}
.srap .ga-y:hover{color:#fff}
.srap .ga-y.on{color:var(--glow)}
/* the knob marks the active year: its node is hidden so the dot is not duplicated */
.srap .ga-y.on::before{opacity:0}

/* console (bottom) */
.srap .ga{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,3vw,2.8rem);
  align-items:center;margin-top:3.2rem}
.srap .ga-stage{position:relative;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);padding:1.6rem;min-height:340px;display:grid;place-items:center}
.srap .ga-shots{position:relative;width:100%;height:250px}
.srap .ga-shot{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.96);pointer-events:none}
.srap .ga-shot.on{opacity:1;transform:none}
.srap .ga-big{position:absolute;left:1.6rem;bottom:1.2rem;display:flex;flex-direction:column;line-height:1}
.srap .ga-bignum{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,6vw,4.4rem);
  color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.srap .ga-biglbl{margin-top:.3rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.srap .ga-panels{position:relative;min-height:210px}
.srap .ga-panel{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;
  display:flex;flex-direction:column}
.srap .ga-panel.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.srap .ga-txt{margin:0;color:#fff;font-size:1.02rem;line-height:1.62}
.srap .ga-cite{margin:.9rem 0 0;color:rgba(223,234,248,.6);font-size:.78rem}
@media(max-width:900px){
  .srap .ga{grid-template-columns:1fr}
  .srap .ga-panel{position:relative;opacity:1;transform:none;display:none}
  .srap .ga-panel.on{display:flex}
  .srap .ga-y{font-size:.74rem}
}

/* timeline inside the ink band (combination chosen for g-rex-for-til-cell-therapy.html) */
.srap .sp-ink .sp-mile p{color:rgba(223,234,248,.88)}
.srap .sp-ink .sp-mile i{background:#12264e;border-color:rgba(255,255,255,.3);color:#8fd8ea;box-shadow:none}
.srap .sp-ink .sp-mile.fin i{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .sp-ink .sp-htl::before{border-top-color:rgba(255,255,255,.22)}

/* M3b ink band */
.srap .sp-ink{position:relative;overflow:clip;
  background:radial-gradient(130% 130% at 12% 8%,#16305e 0%,#0E1D41 46%,#091531 100%);color:#dfeaf8}
/* Lighting mesh: two layers of diffuse light breathing very slowly.
   They do not change the background colour, they only light it up in patches. */
.srap .sp-ink::before, .srap .sp-ink::after{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none}
.srap .sp-ink::before{background:
  radial-gradient(38% 42% at 24% 26%,rgba(56,189,248,.17),transparent 68%),
  radial-gradient(32% 38% at 79% 14%,rgba(96,132,255,.13),transparent 66%);
  animation:mesh-a 38s ease-in-out infinite alternate}
.srap .sp-ink::after{background:
  radial-gradient(46% 52% at 4% 64%,rgba(247,176,88,.19),transparent 66%),
  radial-gradient(26% 30% at 17% 95%,rgba(255,201,130,.10),transparent 62%),
  radial-gradient(38% 42% at 80% 82%,rgba(34,211,238,.10),transparent 68%);
  animation:mesh-b 44s ease-in-out infinite alternate}
@keyframes mesh-a{from{transform:translate3d(-2%,-1.5%,0) scale(1)}
                  to{transform:translate3d(2.5%,2%,0) scale(1.07)}}
@keyframes mesh-b{from{transform:translate3d(-8%,4%,0) scale(1)}
                  to{transform:translate3d(5%,-3.5%,0) scale(1.14)}}
.srap .sp-ink>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.srap .sp-ink::before, .srap .sp-ink::after{animation:none}}
.srap .sp-ink .eyebrow{color:#82d9ec}
.srap .sp-ink .eyebrow::before{background:var(--glow)}
.srap .sp-ink .h2{color:#fff}
.srap .sp-inkbody{max-width:70ch;font-size:1.05rem;line-height:1.7;color:rgba(223,234,248,.9);margin:1.2rem 0 0}
.srap .sp-sub{font-style:normal;color:#fff;font-weight:600;background-image:linear-gradient(90deg,var(--glow),var(--glow));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .8s var(--ease)}
.srap .sp-ink.vivo .sp-sub{background-size:100% 2px}
.srap .sp-sellos{display:flex;align-items:center;gap:2rem;margin-top:1.8rem;flex-wrap:wrap}
.srap .sp-sellos img{height:44px;width:auto;background:#fff;border-radius:10px;padding:.5rem .9rem}
.srap .sp-sellos.chica{margin-top:1rem;gap:1rem}
.srap .sp-sellos.chica img{height:34px}

/* M3c milestone */
.srap .sp-m3txt p{margin:0;color:var(--text);font-size:1rem;line-height:1.68}
.srap .sp-m3txt-p{margin:0;color:var(--text);font-size:1rem;line-height:1.68}
.srap .sp-hitocard{background:#fff;border:1px solid rgba(249,115,22,.45);border-radius:16px;box-shadow:var(--sh-card);
  padding:1.5rem 1.7rem;text-align:center}
.srap .sp-anno{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(3rem,5vw,4.2rem);line-height:1;
  background:linear-gradient(168deg,#16264f 0%,#244378 55%,#2f5aa0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums}
.srap .sp-hitocard p{color:var(--text);font-size:.92rem;line-height:1.6;margin:.8rem 0 0}
.srap .sp-hitocard .sp-sellos{justify-content:center}

/* M4a expander */
.srap .sp-expander{display:flex;gap:.7rem;margin-top:2rem;min-height:300px}
.srap .sp-ex{appearance:none;border:1px solid var(--border);border-radius:16px;background:#fff;cursor:pointer;
  box-shadow:var(--sh-soft);flex:1;min-width:0;padding:1.2rem 1rem;display:flex;flex-direction:column;
  align-items:center;gap:.7rem;text-align:center;overflow:hidden;transition:border-color .3s var(--ease)}
.srap .sp-ex i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--glow-soft);border:1px solid rgba(34,211,238,.4);color:#0e7490;font-style:normal}
.srap .sp-ex i .ic{width:20px;height:20px}
.srap .sp-exn{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink-deep);white-space:nowrap}
.srap .sp-exd{display:block;max-width:34em;opacity:0}
.srap .sp-exd span{display:block;color:var(--text);font-size:.93rem;line-height:1.6;text-align:center}
.srap .sp-ex.on{flex:3.2;border-color:var(--glow)}
.srap .sp-ex.on .sp-exd{opacity:1}
.srap .sp-ex:last-child.on{border-color:var(--accent)}
.srap .sp-ex:last-child.on i{background:var(--accent);border-color:var(--accent);color:#fff}

/* M4b orbit (full styles: they no longer exist in heroes.css) */
.srap .orb{position:relative;width:min(430px,86%);aspect-ratio:1/1;margin:0 auto}
.srap .orb svg{position:absolute;inset:0;width:100%;height:100%}
.srap .oc{position:absolute;white-space:nowrap;left:calc(50% + 41.5%*cos(var(--a)));top:calc(50% + 41.5%*sin(var(--a)));
  transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--text-soft);font-family:var(--font-display);font-weight:700;font-size:.78rem;transition:color .25s var(--ease)}
.srap .oc i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);color:var(--ink);
  font-size:.62rem;font-weight:800;transition:all .25s var(--ease)}
.srap .oc.hot{color:var(--ink-deep)}
.srap .oc.hot i{background:var(--glow-soft);border-color:var(--glow);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.srap .oc.fin.hot i{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(249,115,22,.2)}
.srap .comet{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px 3px rgba(249,115,22,.55);transform:translate(-50%,-50%);left:50%;top:8.5%}
.srap .sp-orb{max-width:430px}
.srap .sp-orbpanel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-card);
  padding:1.6rem 1.8rem;min-height:9em}
.srap .sp-orbt{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink-deep);margin:0 0 .5rem}
.srap .sp-orbd{margin:0;color:var(--text);font-size:.98rem;line-height:1.62}

/* M4c journey */
.srap .sp-viaje{position:relative;margin-top:2.2rem}
.srap .sp-ruta{display:block;width:100%;height:120px}
.srap .sp-camino{fill:none;stroke:rgba(36,67,120,.3);stroke-width:2;stroke-dasharray:6 6}
.srap .sp-part{position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px 3px rgba(249,115,22,.55);transform:translate(-50%,-50%)}
.srap .sp-ests{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:1rem}
.srap .sp-est{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-soft);
  padding:1rem;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.srap .sp-est.on{border-color:var(--glow);transform:translateY(-4px)}
.srap .sp-est:last-child.on{border-color:var(--accent)}
.srap .sp-esti{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;
  background:var(--glow-soft);border:1px solid rgba(34,211,238,.4);color:#0e7490;margin-bottom:.6rem}
.srap .sp-esti .ic{width:18px;height:18px}
.srap .sp-est b{display:block;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--ink-deep);margin-bottom:.35rem}
.srap .sp-est p{margin:0;color:var(--text-soft);font-size:.82rem;line-height:1.55}

/* M4b orbit v2: nodes on the ring + cards always visible */
.srap .sp-orb2{position:relative;width:min(430px,88%);aspect-ratio:1/1;margin:0 auto}
.srap .sp-orb2 svg{position:absolute;inset:0;width:100%;height:100%}
.srap .on2{position:absolute;left:calc(50% + 41.5%*cos(var(--a)));top:calc(50% + 41.5%*sin(var(--a)));width:0;height:0;cursor:pointer}
.srap .on2 i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);
  font-family:var(--font-display);font-weight:800;font-style:normal;font-size:.62rem;color:var(--ink);
  transition:all .25s var(--ease)}
.srap .on2 b{position:absolute;white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:.78rem;
  color:var(--text-soft);transition:color .25s var(--ease)}
.srap .on2.p0 b{left:0;transform:translateX(-50%);bottom:26px}
.srap .on2.p1 b{left:26px;top:-8px}
.srap .on2.p2 b{left:0;transform:translateX(-50%);top:26px}
.srap .on2.p3 b{left:0;transform:translateX(-50%);top:26px}
.srap .on2.p4 b{right:26px;top:-8px}
.srap .on2.hot i{background:var(--glow-soft);border-color:var(--glow);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.srap .on2.hot b{color:var(--ink-deep)}
.srap .on2.fin.hot i{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(249,115,22,.2)}
.srap .sp-ocards{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.srap .sp-ocard{appearance:none;text-align:left;display:flex;gap:.8rem;align-items:flex-start;background:#fff;
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-soft);padding:.95rem 1.1rem;cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
.srap .sp-ocard i{font-family:var(--font-display);font-weight:800;font-style:normal;font-size:.62rem;width:30px;height:30px;
  border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink);flex:none;
  transition:all .3s var(--ease)}
.srap .sp-ocard b{display:block;font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink-deep)}
.srap .sp-ocard p{margin:.25rem 0 0;color:var(--text-soft);font-size:.82rem;line-height:1.5}
.srap .sp-ocard.on{border-color:var(--glow);background:var(--glow-soft);transform:translateX(4px)}
.srap .sp-ocard.on i{background:var(--glow);color:#fff}
.srap .sp-ocard.fin.on{border-color:var(--accent);background:var(--accent-soft)}
.srap .sp-ocard.fin.on i{background:var(--accent);color:#fff}

/* M4d zigzag with return arc */
.srap .sp-zigzag{position:relative;max-width:860px;margin:2.2rem auto 0;display:flex;flex-direction:column;gap:1rem}
.srap .sp-zigzag::before{content:"";position:absolute;left:calc(50% - 1px);top:8px;bottom:8px;width:2px;
  border-left:2px dashed rgba(36,67,120,.22)}
.srap .sp-zzbar{position:absolute;left:calc(50% - 1px);top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--glow),var(--accent));transform-origin:top;transform:scaleY(0)}
.srap .sp-zz{width:calc(50% - 44px)}
.srap .sp-zz.der{margin-left:auto}
.srap .sp-zzc{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-soft);
  padding:1rem 1.15rem;display:flex;gap:.85rem;align-items:flex-start}
.srap .sp-zzc i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;font-style:normal;
  background:var(--glow-soft);border:1px solid rgba(34,211,238,.4);color:#0e7490}
.srap .sp-zzc i .ic{width:18px;height:18px}
.srap .sp-zzc b{display:block;font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--ink-deep)}
.srap .sp-zzc p{margin:.3rem 0 0;color:var(--text-soft);font-size:.85rem;line-height:1.55}
.srap .sp-zz.fin .sp-zzc{border-color:rgba(249,115,22,.5)}
.srap .sp-zz.fin .sp-zzc i{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .sp-retorno{position:absolute;right:-26px;top:0;width:90px;height:100%;pointer-events:none;overflow:visible}
.srap .sp-retpath{fill:none;stroke:rgba(249,115,22,.5);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100}
.srap .sp-retflecha{fill:none;stroke:rgba(249,115,22,.7);stroke-width:2;opacity:0}

/* M4e ring that completes itself */
.srap .sp-donut{position:relative;width:min(400px,90%);margin:0 auto;aspect-ratio:1/1}
.srap .sp-donut svg{position:absolute;inset:0;width:100%;height:100%}
.srap .sp-dbase{fill:none;stroke:var(--line);stroke-width:9}
.srap .sp-seg{fill:none;stroke:var(--glow);stroke-width:9;stroke-linecap:round;stroke-dasharray:100 102;stroke-dashoffset:101;cursor:pointer;pointer-events:stroke}
.srap .sp-seg[data-i="4"]{stroke:var(--accent)}
.srap .sp-dcentro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;text-align:center;padding:0 20%}
.srap .sp-dnum{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;
  background:linear-gradient(168deg,#16264f 0%,#244378 55%,#2f5aa0 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums}
.srap .sp-dnom{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink-deep)}

/* M4f accordion with rail */
.srap .sp-acordeon{position:relative;max-width:780px;margin:2.2rem auto 0;display:flex;gap:1.1rem}
.srap .sp-riel{width:4px;border-radius:99px;background:var(--line);position:relative;overflow:hidden;flex:none}
.srap .sp-rielfill{position:absolute;left:0;top:0;width:100%;height:20%;
  background:linear-gradient(180deg,var(--glow),var(--accent))}
.srap .sp-acs{flex:1;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.srap .sp-ac{appearance:none;text-align:left;border:1px solid var(--border);border-radius:14px;background:#fff;
  box-shadow:var(--sh-soft);padding:1rem 1.2rem;cursor:pointer;transition:border-color .3s var(--ease)}
.srap .sp-ach{display:flex;align-items:center;gap:.8rem}
.srap .sp-ach .ic{width:18px;height:18px;color:#0e7490;flex:none}
.srap .sp-ach b{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink-deep);flex:1}
.srap .sp-acn{font-family:var(--font-display);font-weight:800;font-size:.72rem;color:var(--text-soft)}
.srap .sp-acb{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.srap .sp-acb>span{overflow:hidden;color:var(--text);font-size:.93rem;line-height:1.6}
.srap .sp-ac.on{border-color:var(--glow)}
.srap .sp-ac.on .sp-acb{grid-template-rows:1fr}
.srap .sp-ac.on .sp-acb>span{margin-top:.6rem}
.srap .sp-ac.fin.on{border-color:var(--accent)}
.srap .sp-ac.fin.on .sp-ach .ic{color:var(--accent)}

/* CAR-T · horizontal assembly line */
.srap .sp-hline{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin-top:2rem;position:relative}
.srap .sp-hstep{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;position:relative;
  color:var(--text-soft);font-family:var(--font-display);font-weight:700;font-size:.78rem;transition:color .25s var(--ease)}
.srap .sp-hstep::before{content:"";position:absolute;top:17px;left:calc(-50% + 24px);right:calc(50% + 24px);height:2px;
  border-top:2px dashed rgba(36,67,120,.25)}
.srap .sp-hstep:first-child::before{display:none}
.srap .sp-hstep i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;flex:none;
  background:#fff;border:1px solid var(--border);box-shadow:var(--sh-soft);color:var(--ink);transition:all .25s var(--ease)}
.srap .sp-hstep i .ic{width:17px;height:17px}
.srap .sp-hstep.on{color:var(--ink-deep)}
.srap .sp-hstep.on i{background:var(--glow-soft);border-color:var(--glow);box-shadow:0 0 0 4px rgba(34,211,238,.14)}
.srap .sp-hstep:last-child.on i{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(249,115,22,.2)}
.srap .sp-ink .sp-hstep{color:rgba(223,234,248,.6)}
.srap .sp-ink .sp-hstep::before{border-top-color:rgba(255,255,255,.22)}
.srap .sp-ink .sp-hstep i{background:#12264e;border-color:rgba(255,255,255,.3);color:#8fd8ea;box-shadow:none}
.srap .sp-ink .sp-hstep.on{color:#fff}
.srap .sp-ink .sp-hstep.on i{background:rgba(34,211,238,.2);border-color:var(--glow)}
.srap .sp-ink .sp-hstep:last-child.on i{background:var(--accent);border-color:var(--accent);color:#fff}
.srap .sp-tagline{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink);margin:1.6rem 0 0}
.srap .sp-ink .sp-tagline{color:#fff}
.srap .sp-proof{font-size:.95rem;line-height:1.65;color:var(--text-soft);max-width:70ch;margin:1.4rem 0 0}
.srap .sp-instwall{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;max-width:860px}
.srap .sp-ink .ti{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#dfeaf8;box-shadow:none}
.srap .sp-ink .ti .ti-ic{color:#8fd8ea}
.srap .sp-ink .btn.ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.srap .sp-ink .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* M3 CAR-T final: ink band with a lab photo on the right */
.srap .m3f-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,3.5vw,3.4rem);align-items:center}
.srap .m3f-photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 48px rgba(0,0,0,.35),0 0 40px rgba(34,211,238,.12)}
.srap .m3f-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .srap .m3f-grid{grid-template-columns:1fr}
  .srap .m3f-photo{max-width:480px;margin:1.6rem auto 0}
}

/* CAR-T hero final: selector card with a product column */
.srap .phsel-card.hq-col{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:center;
  max-width:780px;text-align:left}
.srap .hq-lado{margin:0;display:flex;align-items:center;justify-content:center}
.srap .hq-lado img{max-height:235px;width:auto;object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(20,29,55,.18))}
.srap .phsel-card.hq-col .phsel-row{align-items:flex-start;margin-bottom:0}
.srap .phsel-txt{min-width:0}
.srap .phsel-txt .phsel-body{margin:0;min-height:0}
.srap .phsel-txt .btn{margin-top:.9rem}
@media(max-width:700px){
  .srap .phsel-card.hq-col{grid-template-columns:1fr;text-align:center}
  .srap .phsel-card.hq-col .phsel-row{flex-direction:column;align-items:center;text-align:center}
  .srap .hq-lado img{max-height:175px}
}

/* real CAR-T hero: photo with floating chips + full-width selector */
.srap .hx-stage{position:relative;display:flex;justify-content:center;align-items:center;padding:1rem 0}
.srap .hx-foto{max-height:400px;width:auto;max-width:88%;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(20,29,55,.22))}
.srap .hx-chip{position:absolute;display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  font-weight:700;font-size:.74rem;letter-spacing:.03em;color:var(--ink);background:#fff;
  border:1px solid var(--border);border-radius:var(--r-pill);padding:.5em 1em;box-shadow:var(--sh-card)}
.srap .hx-chip .ti-ic{width:14px;height:14px;color:#0e7490}
.srap .hx-chip.f0{top:10%;left:-2%}
.srap .hx-chip.f1{top:46%;right:-4%}
.srap .hx-chip.f2{bottom:6%;left:4%}
.srap .hx-ancho{grid-column:1/-1;margin-top:1rem;text-align:center}
.srap .hx-ancho .wg-cap{justify-content:center}

/* M5 with a photo per card */
.srap .cat-shot{margin:0 0 .9rem;height:150px;display:flex;align-items:center;justify-content:center;
  border-radius:12px;background:#fff;border:1px solid var(--line);overflow:hidden}

/* Elementor pone `margin:0` a todo <figure> con
   `.elementor .elementor-widget:not(...):not(...) figure`, que pesa (0,4,1) y
   le gana a la regla de arriba. Eso dejaba el nombre del producto pegado a la
   foto en TODAS las paginas de aplicacion. Repetir la clase sale (0,5,0) y
   recupera el margen que el diseno siempre pidio; la casa no usa !important.
   Solo el margen: ni el alto del marco ni nada mas. */
.srap .cat-shot.cat-shot.cat-shot.cat-shot{margin:0 0 .9rem}
.srap .cat-shot img{max-height:132px;max-width:88%;object-fit:contain}
.srap .cat-shot.pend2{flex-direction:column;gap:.4rem;color:var(--text-soft);border-style:dashed}
.srap .cat-shot.pend2 svg{width:24px;height:24px}
.srap .cat-shot.pend2 span{font-family:var(--font-display);font-weight:700;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase}

/* M6a selector (reuses .segs/.seg/.phsel-* from heroes.css) */
.srap .sp-segs{margin-top:1.6rem}
.srap .sp-panel{margin:1.4rem 0 0;max-width:680px}

/* M6b cards */
.srap .sp-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.8rem}
.srap .sp-fcard{display:flex;flex-direction:column;gap:.55rem;background:#fff;border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--sh-soft);padding:1.3rem 1.4rem;text-decoration:none;
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.srap .sp-fcard:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:var(--sh-card)}
.srap .sp-fcard i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-style:normal;
  background:var(--glow-soft);border:1px solid rgba(34,211,238,.4);color:#0e7490}
.srap .sp-fcard i .ic{width:20px;height:20px}
.srap .sp-fcard b{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink-deep)}
.srap .sp-fcard .arr{color:var(--accent);display:inline-block;transition:transform .28s var(--ease)}
.srap .sp-fcard:hover .arr{transform:translateX(4px)}
.srap .sp-fcard p{margin:0;color:var(--text-soft);font-size:.88rem;line-height:1.55}

/* M6c ladder */
.srap .sp-escalera{position:relative;margin-top:2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  align-items:end;padding-bottom:1rem}
.srap .sp-esc-linea{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.srap .sp-esc-path{fill:none;stroke:rgba(36,67,120,.25);stroke-width:2;stroke-dasharray:6 6}
.srap .sp-paso{position:relative;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--sh-soft);padding:1.1rem 1.2rem;margin-bottom:calc(var(--o)*46px);
  display:flex;gap:.8rem;align-items:flex-start;text-decoration:none;color:inherit;
  transition:border-color .28s var(--ease),transform .28s var(--ease)}
.srap a.sp-paso:hover{border-color:var(--accent);transform:translateY(-3px)}
.srap .sp-paso i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;font-style:normal;
  background:var(--glow-soft);border:1px solid rgba(34,211,238,.4);color:#0e7490}
.srap .sp-paso i .ic{width:18px;height:18px}
.srap .sp-paso b{display:block;font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--ink-deep)}
.srap .sp-paso p{margin:.3rem 0 0;color:var(--text-soft);font-size:.83rem;line-height:1.5}
.srap .sp-esc-cta{position:absolute;right:0;top:-3.4rem}
.srap .sp-esc-cta.bajo{position:static;margin:1.4rem 0 0;justify-content:flex-start}

@media(max-width:900px){
  .srap .sp-two, .srap .sp-cmp{grid-template-columns:1fr}
  .srap .sp-arrow{transform:rotate(90deg);justify-self:center}
  .srap .sp-cols{columns:1}
  .srap .sp-htl{grid-template-columns:1fr;gap:1.6rem}
  .srap .sp-htl::before, .srap .sp-htlbar{display:none}
  .srap .sp-expander{flex-direction:column;min-height:0}
  .srap .sp-ex{flex:none}
  .srap .sp-ex .sp-exd{opacity:1}
  .srap .sp-ests{grid-template-columns:1fr 1fr}
  .srap .on2 b{display:none}
  .srap .hx-chip{position:static;margin:.25rem}
  .srap .hx-stage{flex-wrap:wrap}
  .srap .sp-hline{grid-template-columns:repeat(4,1fr);row-gap:1.2rem}
  .srap .sp-hstep::before{display:none}
  .srap .sp-zigzag::before, .srap .sp-zzbar, .srap .sp-retorno{display:none}
  .srap .sp-zz, .srap .sp-zz.der{width:100%;margin-left:0}
  .srap .sp-escalera{grid-template-columns:1fr;align-items:stretch}
  .srap .sp-paso{margin-bottom:0}
  .srap .sp-esc-linea{display:none}
  .srap .sp-esc-cta{position:static;margin-top:1rem}
  .srap .sp-photo img{height:240px}
}
/* ============================================================
   Adjustments that only exist inside WordPress.
   The mockup is a standalone page; on the site the theme's header is
   fixed above the content, anchor jumps have to land below it and the
   header is what dictates the width.
   None of this belongs to the mockup, so it lives here and not in the
   ported stylesheets.
   Appended at the end of ap.css — do not scope it again, it already
   comes written with the wrapper.
   ============================================================ */

/* ---------- the content width is the nav's width ----------
   The mockup uses 1200px because it is a standalone page. On the site
   the theme's header is wider and the content looked pushed inwards.
   These are the same values the rest of the plugin uses to match the
   theme: a 91.5rem cap and the same side margin as the header
   (1.25rem, and 3.0625rem from 1400px up, which is where the theme
   opens up its grid). */
.srap { --srap-wrap-max: 91.5rem; --srap-wrap-pad: 1.25rem; }

@media (min-width: 87.5em) {
	.srap { --srap-wrap-pad: 3.0625rem; }
}

.srap .wrap,
.srap .app-hero .wrap,
.srap .hv-one .wrap,
.srap .sp .wrap {
	max-width: var(--srap-wrap-max);
	padding-inline: var(--srap-wrap-pad);
}

/* The hero headline is centred: across the whole nav width it would read as a
   single line over 1300px long. It keeps the same measure it had in the
   approved mockup (70rem = the container's 1200px minus its margin), which is
   where it breaks into two lines. The section box stays aligned with the nav. */
.srap .app-hero h1 { max-width: 70rem; margin-inline: auto; }

/* ---------- the theme's fixed header ----------
   The hero starts at the top of the page and the header used to cover it.
   --srew-nav-h is set by the pack itself according to the theme (221px with
   sloth, 110px on mobile); the 96px is the fallback if it is missing. */
.srap .app-hero .wrap { padding-top: calc(var(--srew-nav-h, 96px) + 2.5rem); }

/* The modules link to each other; without this the target sits under the
   fixed header and it looks like the link did not work. */
.srap .app-hero,
.srap .sec { scroll-margin-top: calc(var(--srew-nav-h, 96px) + 24px); }

/* Elementor wraps every widget in two containers with their own flow.
   The wrapper has to take the full width so the full-bleed sections
   (the ink one, the tinted ones) reach the edges. */
.srap { width: 100%; }

/* ============================================================
   Module 4 · the phases as an accordion.
   With the real copy each phase brings several paragraphs and some a link to a
   talk: they do not fit open. They become <details> and start closed. Closed,
   they look exactly like before — the design does not change.
   ============================================================ */
.srap details.pr-card{ display:block; padding:0 }
.srap details.pr-card > summary{
  display:flex; gap:.9rem; align-items:center;
  padding:.95rem 1.1rem; cursor:pointer; list-style:none;
}
.srap details.pr-card > summary::-webkit-details-marker{ display:none }
.srap details.pr-card > summary::marker{ content:'' }
.srap details.pr-card b{ margin-bottom:0 }
/* The number stopped being a direct child of .pr-card once it moved into the
   summary, so it lost its badge. It gets the same one back. */
.srap details.pr-card > summary > i{
  flex:none; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  background:var(--line); color:var(--ink); font-style:normal;
  font-family:var(--font-display); font-weight:800; font-size:.76rem;
}
.srap details.pr-card.on > summary > i{ background:var(--glow); color:#fff }
.srap .pr-chev{
  margin-left:auto; flex:none; display:grid; place-items:center;
  width:20px; height:20px; color:var(--text-soft);
  transition:transform .28s var(--ease), color .2s var(--ease);
}
.srap .pr-chev svg{ width:16px; height:16px }
.srap details.pr-card[open] .pr-chev{ transform:rotate(90deg); color:var(--glow) }
.srap details.pr-card:hover .pr-chev{ color:var(--ink) }

/* The body hangs off the same column as the headline, not off the number. */
.srap .pr-body{ padding:0 1.1rem 1.05rem calc(1.1rem + 30px + .9rem) }
.srap .pr-body p{ margin:0 0 .7rem; font-size:.9rem; line-height:1.6; color:var(--text-soft) }
.srap .pr-body p:last-child{ margin-bottom:0 }

/* Links inside the copy: the brief wants them embedded in the text, not as
   separate calls to action. Marked with a faint underline, not a loud colour. */
.srap .pr-in{
  color:var(--ink-deep); text-decoration:none;
  border-bottom:1px solid rgba(34,211,238,.55);
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.srap .pr-in:hover{ color:#0e7490; border-bottom-color:#0e7490 }
/* The ones with no destination yet look EXACTLY like the rest: a missing URL
   is a state of the work, not of the design. The tracking goes in the data-url
   attribute, not in the colour. ("pend" on its own already exists in
   heroes.css with another meaning, hence the prefix.) */

/* The Grant Tour talks: text link below the copy. */
.srap .pr-talk{ margin:.85rem 0 0 }
.srap .pr-talk a{
  font-family:var(--font-display); font-weight:700; font-size:.86rem;
  line-height:1.45; color:#0e7490; text-decoration:none;
  border-bottom:1px solid rgba(14,116,144,.4);
  transition:border-color .18s var(--ease);
}
.srap .pr-talk a:hover{ border-bottom-color:#0e7490 }


@media(max-width:560px){ .srap .pr-body{ padding-left:1.1rem } }
@media(prefers-reduced-motion:reduce){ .srap .pr-chev{ transition:none } }

/* ============================================================
   The button colour, restated in every state.
   The theme paints `a:hover` and Elementor's kit `.elementor-kit-N a:hover`
   with its cyan; a button that only declares the colour at rest loses the
   label as soon as you hover it. It is restated state by state instead of
   trusting inheritance — the same failure that showed up in the hero, in the
   comparison table and in the competition CTA.
   ============================================================ */
.srap .btn:active,
.srap .btn:focus,
.srap .btn:hover,
.srap a.btn:active,
.srap a.btn:focus,
.srap a.btn:hover { color: #fff; }
.srap .btn.ghost:active,
.srap .btn.ghost:focus,
.srap .btn.ghost:hover,
.srap .hv .btn.ghost:active,
.srap .hv .btn.ghost:focus,
.srap .hv .btn.ghost:hover,
.srap .sp-ink .btn.ghost:active,
.srap .sp-ink .btn.ghost:focus,
.srap .sp-ink .btn.ghost:hover,
.srap a.btn.ghost:active,
.srap a.btn.ghost:focus,
.srap a.btn.ghost:hover { color: #fff; }
.srap .btn.ink:active,
.srap .btn.ink:focus,
.srap .btn.ink:hover,
.srap a.btn.ink:active,
.srap a.btn.ink:focus,
.srap a.btn.ink:hover { color: #fff; }


/* The ring with numbers instead of icons (VST). Inert until the widget asks
   for the class, so CAR-T keeps its iconography. The type copies the one on the
   list card, scaled up because the circle is twice the size. */
.srap .pr-ring--num .pr-node i{
  font-family:var(--font-display);font-weight:800;
  font-size:1.22rem;letter-spacing:.01em;line-height:1;
  font-variant-numeric:tabular-nums}
@media(max-width:900px){ .srap .pr-ring--num .pr-node i{ font-size:1.05rem } }


/* The gold-standard button sits centred under the wall of institutions. The
   rule lived in the mockup and had never travelled to the pack, so the button
   came out flush left. Inert wherever the button is not asked for, which is
   every page except VST. */
.srap .m3-cta{display:flex;justify-content:center;margin-top:clamp(2.2rem,4vw,3rem)}
.srap .m3f-grid .m3-cta{grid-column:1/-1}