/* ============================================================
   CeluLab — Dirección B · "Clínica / Estructurada"
   Blanco clínico · grilla · teal confiable · terracota acento
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  --paper:#FFFFFF;
  --paper-2:#F4F8FD;
  --paper-3:#E4ECF8;
  --surface:#FFFFFF;

  --ink:#0E1430;
  --ink-2:#4B5677;
  --ink-3:#828DAC;

  --teal:#2E6FD6;
  --teal-dk:#163A86;
  --teal-br:#4F92E6;
  --teal-lt:#E3F1EE;
  --teal-tint:#EAF2FD;

  --clay:#1FA6D6;
  --clay-br:#36B7E6;
  --clay-lt:#DAF1FB;

  --line:#DEE4EF;
  --line-2:#CAD2E1;

  --shadow-sm:0 1px 0 rgba(14,20,48,.03);
  --shadow-md:0 10px 34px rgba(14,20,48,.07);

  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --maxw:1220px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--teal);color:#fff}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
p{text-wrap:pretty}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:clamp(60px,8vw,116px) 0}
.eyebrow{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:10px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--clay);display:inline-block}
.lead{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--ink-2);max-width:60ch}

/* buttons — squarer, structured */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:1rem;padding:14px 26px;border-radius:var(--r-sm);border:1.5px solid transparent;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dk)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-lg{padding:17px 32px;font-size:1.05rem}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:block;width:186px;height:42px;background:url(logo-navy.png) left center/contain no-repeat;font-size:0;flex:0 0 auto}
.brand .mark,.brand>span{display:none}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{font-weight:600;font-size:.96rem;color:var(--ink-2);padding:8px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink);border-color:var(--teal)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line-2);border-radius:8px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.mobile-menu{display:none}

/* hero — structured split with framed panel */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr}
.hero-left{padding:clamp(48px,7vw,104px) clamp(28px,4vw,64px) clamp(48px,7vw,104px) max(28px,calc((100vw - var(--maxw))/2 + 28px));border-right:1px solid var(--line)}
.hero-right{position:relative;background:var(--paper-2);padding:40px}
.hero h1{margin-bottom:24px}
.hero h1 .accent{color:var(--teal)}
.hero .lead{margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:48px}
.kpi{padding:22px 18px 0}
.kpi .num{font-family:var(--display);font-size:2.2rem;font-weight:700;color:var(--teal);line-height:1;letter-spacing:-.03em}
.kpi .lbl{font-size:.82rem;color:var(--ink-2);margin-top:8px}

/* microscopy grid visual */
.scope{position:absolute;inset:40px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.scope .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:36px 36px}
.scope .vignette{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 9999px rgba(255,255,255,0);background:radial-gradient(circle at 50% 46%, transparent 44%, rgba(255,255,255,.9) 70%)}
.scope-cell{position:absolute;border-radius:50%}
.float-a{animation:floaty 9s var(--ease) infinite}
.float-b{animation:floaty 12s var(--ease) infinite reverse}
.float-c{animation:floaty 7s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float-a,.float-b,.float-c{animation:none}}
.scope .crosshair{position:absolute;top:14px;left:14px;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.scope .scale-bar{position:absolute;bottom:14px;right:14px;display:flex;align-items:center;gap:8px;font-size:.7rem;color:var(--ink-3)}
.scope .scale-bar i{width:40px;height:3px;background:var(--ink-3);display:block}

/* trust bar */
.trust{background:linear-gradient(100deg,var(--teal-dk),var(--teal));border:0;box-shadow:var(--shadow-md)}
.trust .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;padding:clamp(24px,3.2vw,36px) 28px}
.trust .t-lead{font-weight:700;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-right:6px}
.badge{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:600;color:#fff;padding:12px 20px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.badge svg{width:19px;height:19px;color:#fff}

/* section head */
.section-head{max-width:64ch}
.section-head h2{margin:16px 0 14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,68px);align-items:center}

/* steps — bordered table-like */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.step{padding:30px 26px;border-right:1px solid var(--line);transition:background .25s}
.step:last-child{border-right:none}
.step:hover{background:var(--paper-2)}
.step .n{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--clay);letter-spacing:.05em}
.step .ic{width:46px;height:46px;border-radius:var(--r-sm);background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;margin:16px 0 14px}
.step .ic svg{width:24px;height:24px}
.step h3{font-size:1.14rem;margin-bottom:8px}
.step p{font-size:.95rem;color:var(--ink-2)}

/* therapies — structured cards */
.therapies{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.t-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;padding:0;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.t-card:hover{background:var(--paper-2);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.t-card .art{aspect-ratio:16/10;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:var(--teal-tint)}
.t-card .art .media-fill{object-position:center}
.t-card .art .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.7}
.t-card .blob{position:absolute;border-radius:50%}
.t-card .body{padding:26px}
.t-card .idx{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--ink-3);letter-spacing:.1em}
.t-card h3{margin:6px 0 10px}
.t-card p{font-size:.96rem;color:var(--ink-2);margin-bottom:16px}
.t-card .more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--teal);font-size:.92rem}
.t-card .more svg{width:15px;height:15px;transition:transform .2s}
.t-card:hover .more svg{transform:translateX(4px)}

/* testimonials — bordered grid */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.testi{padding:34px 30px;border-right:1px solid var(--line);background:#fff}
.testi:last-child{border-right:none}
.testi .stars{color:var(--clay);font-size:1rem;letter-spacing:2px;margin-bottom:14px}
.testi blockquote{font-size:1.08rem;line-height:1.5;color:var(--ink);margin-bottom:22px}
.testi .who{display:flex;align-items:center;gap:13px}
.testi .avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex:0 0 auto}
.testi .nm{font-weight:700;font-size:.94rem}
.testi .meta{font-size:.82rem;color:var(--ink-2)}

/* CTA — structured dark panel */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(44px,6vw,72px);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
.cta-band h2{color:#fff}
.cta-band p{color:#97A2C4;margin-top:12px;text-align:justify}
.cta-band .btn-primary{background:var(--teal-br)}
.cta-band .btn-primary:hover{background:#fff;color:var(--teal-dk)}

/* footer */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line);color:var(--ink-2);padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.site-footer .brand{margin-bottom:14px;background-image:url(logo-navy.png)}
.foot-about{font-size:.95rem;color:var(--ink-2);max-width:34ch}
.foot-col h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;font-weight:700}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col a{color:var(--ink-2);font-size:.95rem;transition:color .2s}
.foot-col a:hover{color:var(--teal)}
.foot-bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.84rem;color:var(--ink-3)}

/* page hero internal */
.page-hero{border-bottom:1px solid var(--line);padding:clamp(52px,7vw,92px) 0 clamp(36px,4vw,56px);background:var(--paper-2)}

/* info cards */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.info-card{background:#fff;padding:34px;border-right:1px solid var(--line)}
.info-card:last-child{border-right:none}
.info-card .ic{width:50px;height:50px;border-radius:var(--r-sm);background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.info-card .ic svg{width:25px;height:25px}
.info-card h3{margin-bottom:10px}
.info-card p{font-size:.96rem;color:var(--ink-2)}

/* timeline */
.timeline{margin-top:8px;border-top:1px solid var(--line)}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.tl-item .yr{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--teal)}
.tl-item h3{font-size:1.12rem;margin-bottom:5px}
.tl-item p{font-size:.95rem;color:var(--ink-2);max-width:56ch}

/* therapy rows */
.therapy-row{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(34px,5vw,60px) 0;border-bottom:1px solid var(--line)}
.therapy-row:nth-child(even) .therapy-art{order:-1}
.therapy-art{aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-lg);position:relative;overflow:hidden;background:var(--paper-2)}
.therapy-art .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px}
.tag-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.tag{background:var(--teal-tint);color:var(--teal-dk);border-radius:var(--r-sm);padding:7px 13px;font-size:.84rem;font-weight:600;border:1px solid var(--teal-lt)}

/* faq */
.faq{max-width:840px;margin:44px auto 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--display);font-weight:600;font-size:1.14rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-sm);border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--teal);transition:.25s}
.faq details[open] summary .pm{background:var(--teal);color:#fff;border-color:var(--teal);transform:rotate(45deg)}
.faq .answer{padding:0 4px 24px;color:var(--ink-2);max-width:72ch}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,60px);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ci-item{display:flex;gap:15px;align-items:flex-start;padding:22px 24px;border-bottom:1px solid var(--line)}
.ci-item:last-child{border-bottom:none}
.ci-item .ic{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center}
.ci-item .ic svg{width:21px;height:21px}
.ci-item h4{font-family:var(--sans);font-weight:700;font-size:.98rem;margin-bottom:3px}
.ci-item p{font-size:.93rem;color:var(--ink-2)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-md)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--clay)}
.err{color:var(--clay);font-size:.82rem;margin-top:6px;display:none}
.field.invalid .err{display:block}
.form-note{font-size:.83rem;color:var(--ink-3);margin-top:6px}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .check{width:60px;height:60px;border-radius:50%;background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success .check svg{width:30px;height:30px}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-left{border-right:none;border-bottom:1px solid var(--line);padding:48px 28px}
  .hero-right{min-height:380px}
  .split,.contact-grid{grid-template-columns:1fr}
  .steps,.therapies,.testi-grid,.cards-3{grid-template-columns:1fr 1fr}
  .step,.testi,.info-card{border-right:none;border-bottom:1px solid var(--line)}
  .therapy-row{grid-template-columns:1fr;gap:24px}
  .therapy-row:nth-child(even) .therapy-art{order:0}
  .cta-band{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:680px){
  body{font-size:17px}
  .nav-links,.nav-cta .btn{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:block;position:fixed;inset:76px 0 0;background:#fff;z-index:55;transform:translateX(100%);transition:transform .35s var(--ease);padding:28px}
  .mobile-menu.open{transform:none}
  .mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:4px}
  .mobile-menu a{display:block;font-family:var(--display);font-weight:600;font-size:1.4rem;padding:15px 0;border-bottom:1px solid var(--line)}
  .mobile-menu .btn{margin-top:22px;width:100%;justify-content:center}
  body.menu-open{overflow:hidden}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .steps,.therapies,.testi-grid,.cards-3,.foot-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
  .kpi{border-bottom:1px solid var(--line);padding-bottom:18px}
  .tl-item{grid-template-columns:1fr;gap:6px}
  .field.row2{grid-template-columns:1fr}
  .wrap{padding:0 20px}
}

/* ============================================================
   PREMIUM + GLASS + VIDEO LAYER (Dirección B · clínica)
   ============================================================ */

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--teal),var(--clay));z-index:200;transition:width .1s linear}

/* accent marker (cuadrado, clínico) */
.accent-bar{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.accent-bar i{display:block}
.accent-bar i:nth-child(1){width:8px;height:8px;background:var(--clay)}
.accent-bar i:nth-child(2){width:8px;height:8px;background:var(--teal)}
.accent-bar i:nth-child(3){width:34px;height:2px;background:var(--teal);opacity:.45;align-self:center}

/* glass */
.glass{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 30px rgba(14,20,48,.10)}
.glass-dark{background:rgba(12,22,52,.5);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.2);box-shadow:0 16px 40px rgba(8,16,44,.34);color:#fff}
.chip-glass{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:var(--r-sm);font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.chip-glass .dot{width:7px;height:7px;border-radius:50%;background:var(--clay-br)}

.site-header.scrolled{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 4px 20px rgba(14,20,48,.06)}

/* animated "video" background (clínico: con grilla) */
.video-bg{position:relative;overflow:hidden;background:linear-gradient(140deg,#0B1740 0%,#163A86 50%,#2E6FD6 100%);isolation:isolate}
.video-bg .vlayer{position:absolute;border-radius:50%;filter:blur(32px);mix-blend-mode:screen;opacity:.7;will-change:transform}
.video-bg .vl1{width:60%;aspect-ratio:1;left:-8%;top:-6%;background:radial-gradient(circle at 40% 40%,#4F92E6,transparent 68%);animation:drift1 19s ease-in-out infinite}
.video-bg .vl2{width:48%;aspect-ratio:1;right:-6%;top:18%;background:radial-gradient(circle at 50% 50%,#4F92E6,transparent 66%);animation:drift2 23s ease-in-out infinite}
.video-bg .vl3{width:42%;aspect-ratio:1;left:18%;bottom:-12%;background:radial-gradient(circle at 50% 50%,#36B7E6,transparent 64%);opacity:.45;animation:drift3 27s ease-in-out infinite}
.video-bg .vl4{width:28%;aspect-ratio:1;right:22%;bottom:6%;background:radial-gradient(circle at 50% 50%,#9DC3F2,transparent 62%);animation:drift1 21s ease-in-out infinite reverse}
.video-bg .vgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 78%);opacity:.5}
.video-bg .vscan{position:absolute;left:0;right:0;height:34%;top:-34%;background:linear-gradient(180deg,transparent,rgba(157,195,242,.18),transparent);animation:vscan 6.5s linear infinite}
.video-bg .vvignette{position:absolute;inset:0;box-shadow:inset 0 0 110px rgba(6,14,40,.6);pointer-events:none}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8%,6%,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7%,9%,0) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,-8%,0) scale(1.15)}}
@keyframes vscan{0%{top:-34%}100%{top:104%}}
@media (prefers-reduced-motion:reduce){.video-bg .vlayer,.video-bg .vscan{animation:none}}

.video-tag{position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border-radius:var(--r-sm);font-size:.74rem;font-weight:700;letter-spacing:.04em;color:#fff}
.video-tag .play{width:20px;height:20px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.video-tag .play svg{width:9px;height:9px;color:var(--teal-dk);margin-left:1px}

/* duotone photo */
.photo{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 75% 15%, rgba(79,146,230,.5), transparent 60%),
  radial-gradient(90% 80% at 15% 90%, rgba(54,183,230,.34), transparent 55%),
  linear-gradient(150deg,#163A86,#2E6FD6 55%,#163A86)}
.photo.warm{background:
  radial-gradient(120% 90% at 75% 15%, rgba(120,200,240,.52), transparent 60%),
  radial-gradient(90% 80% at 15% 90%, rgba(46,111,214,.42), transparent 55%),
  linear-gradient(150deg,#0A3A66,#1FA6D6 55%,#0A3A66)}
.photo .grid-bg{opacity:.18}
.photo .pc{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 65%)}
.photo .cap{position:absolute;left:14px;bottom:13px;display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;color:#fff;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:7px 12px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.2)}
.photo .cap svg{width:14px;height:14px}

.img-reveal{clip-path:inset(0 0 100% 0);transform:scale(1.05);transition:clip-path 1s var(--ease), transform 1.1s var(--ease)}
.img-reveal.in{clip-path:inset(0 0 0 0);transform:scale(1)}
.parallax{will-change:transform}

/* hero scope → video */
.scope .video-bg{position:absolute;inset:0}
.scope .glass-metric{position:absolute;right:14px;bottom:14px;z-index:3;padding:13px 16px;border-radius:var(--r-sm);color:#fff;display:flex;flex-direction:column;gap:2px}
.scope .glass-metric .gm-num{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1}
.scope .glass-metric .gm-lbl{font-size:.72rem;color:rgba(255,255,255,.82)}

/* dark metrics band */
.metrics{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.metrics .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px}
.metrics .wrap{position:relative}
.metrics .m-head{margin-bottom:40px}
.metrics .m-head h2{color:#fff}
.metrics .m-head .eyebrow{color:#9DC3F2}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden}
.metric{padding:30px 26px;border-right:1px solid rgba(255,255,255,.14);transition:background .3s}
.metric:last-child{border-right:none}
.metric:hover{background:rgba(255,255,255,.04)}
.metric .num{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;color:#fff;letter-spacing:-.03em}
.metric .num .u{color:var(--teal-br)}
.metric .lbl{font-size:.9rem;color:#8E9AC0;margin-top:10px;max-width:22ch}

/* video band */
.video-band{position:relative;min-height:min(80vh,600px);display:flex;align-items:center;color:#fff;overflow:hidden}
.video-band > .video-bg{position:absolute;inset:0}
.video-band .vb-content{position:relative;z-index:3;max-width:600px}
.video-band .glass-panel{padding:clamp(28px,4vw,46px);border-radius:var(--r-lg)}
.video-band h2{color:#fff;margin:12px 0 14px}
.video-band p{color:rgba(255,255,255,.9)}
.video-band .vb-stats{display:flex;gap:28px;margin-top:24px;flex-wrap:wrap}
.video-band .vb-stats .s .n{font-family:var(--display);font-weight:700;font-size:1.7rem;color:#fff;line-height:1}
.video-band .vb-stats .s .l{font-size:.8rem;color:rgba(255,255,255,.8);margin-top:5px}

/* portfolio media inside t-card art / therapy art */
.media-fill{position:absolute;inset:0}

/* cta video */
.cta-band{position:relative;overflow:hidden}
.cta-band .video-bg{position:absolute;inset:0;z-index:0}
.cta-band > *{position:relative;z-index:2}

@media (max-width:980px){
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric{border-bottom:1px solid rgba(255,255,255,.14)}
}
@media (max-width:680px){
  .metric-grid{grid-template-columns:1fr 1fr}
  .video-band{min-height:auto;padding:60px 0}
}

/* ============================================================
   VIDEO REAL (reemplaza el fondo CSS simulado en .video-bg.has-video)
   Mantiene el tratamiento clínico —rejilla, scan, viñeta y tinte de
   marca— por encima del clip para conservar la estética de B.
   ============================================================ */
.video-bg .vmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0}
.video-bg.has-video{background:#0B1740}
.video-bg.has-video .vlayer{display:none}
.video-bg.has-video .vgrid{opacity:.22;z-index:2}
.video-bg.has-video .vscan{z-index:2}
.video-bg.has-video .vvignette{z-index:2}
.video-bg.has-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(140deg,rgba(11,23,64,.66) 0%,rgba(22,58,134,.4) 52%,rgba(46,111,214,.32) 100%)}
@media (prefers-reduced-motion:reduce){.video-bg .vmedia{display:none}.video-bg.has-video .vlayer{display:block}}

/* page-hero con video de fondo inmersivo (texto en blanco) */
.page-hero.has-video-hero{position:relative;overflow:hidden;border-bottom:none;background:#0B1740;color:#fff;
  padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px)}
.page-hero.has-video-hero > .video-bg{position:absolute;inset:0;z-index:0}
.page-hero.has-video-hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,16,40,.72) 0%,rgba(8,16,40,.34) 62%,rgba(8,16,40,.12) 100%)}
.page-hero.has-video-hero > .wrap{position:relative;z-index:3}
.page-hero.has-video-hero h1{color:#fff}
.page-hero.has-video-hero .lead{color:rgba(255,255,255,.92)}
.page-hero.has-video-hero .eyebrow{color:#9DC3F2}

/* HERO de inicio: video horizontal a pantalla completa */
.hero.hero-immersive{position:relative;overflow:hidden;border-bottom:none;color:#fff;
  display:flex;align-items:center;min-height:min(100vh,880px);
  padding:clamp(110px,16vh,180px) 0 clamp(70px,10vh,120px)}
.hero.hero-immersive > .video-bg{position:absolute;inset:0;z-index:0}
.hero.hero-immersive::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(95deg,rgba(8,16,40,.82) 0%,rgba(8,16,40,.5) 50%,rgba(8,16,40,.24) 100%)}
.hero-immersive-inner{position:relative;z-index:3}
.hero.hero-immersive h1{color:#fff;margin-bottom:24px;max-width:16ch}
.hero.hero-immersive h1 .accent{color:var(--teal-br)}
.hero.hero-immersive .lead{color:rgba(255,255,255,.92);margin-bottom:32px;max-width:58ch}
.hero.hero-immersive .eyebrow{color:#9DC3F2}
.hero.hero-immersive .kpi-row{border-top-color:rgba(255,255,255,.24);max-width:680px}
.hero.hero-immersive .kpi .num{color:#fff}
.hero.hero-immersive .kpi .lbl{color:rgba(255,255,255,.82)}
.hero.hero-immersive .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero.hero-immersive .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
@media (max-width:680px){
  .hero.hero-immersive{min-height:auto;padding:clamp(96px,20vh,140px) 0 64px}
  .hero.hero-immersive .kpi-row{grid-template-columns:repeat(3,1fr)}
  .hero.hero-immersive .kpi{padding:18px 10px 0}
}

/* ============================================================
   TERAPIAS — detalle clínico + soportes (adaptado al diseño del sitio)
   ============================================================ */

/* hero dotfield + texturas de video faltantes */
.dotfield{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(46,111,214,.10) 1.2px, transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(circle at center,#000 30%,transparent 72%);mask-image:radial-gradient(circle at center,#000 30%,transparent 72%);pointer-events:none}
.video-bg .vgrain{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:22px 22px;mix-blend-mode:overlay;opacity:.5;animation:grainshift 8s steps(6) infinite}
.video-bg .vsheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);transform:translateX(-30%);animation:sheen 11s ease-in-out infinite}
@keyframes grainshift{0%{transform:translate(0,0)}100%{transform:translate(-22px,18px)}}
@keyframes sheen{0%,100%{transform:translateX(-35%)}50%{transform:translateX(35%)}}
@media (prefers-reduced-motion:reduce){.video-bg .vgrain,.video-bg .vsheen{animation:none}}

/* CTA pro */
.cta-pro{position:relative;border-radius:var(--r-lg);overflow:hidden;color:#fff;padding:clamp(48px,7vw,96px) clamp(30px,5vw,72px)}
.cta-pro .video-bg{position:absolute;inset:0;border-radius:0;z-index:0}
.cta-pro::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,18,48,.8),rgba(30,80,172,.5));z-index:1}
.cta-pro .cta-inner{position:relative;z-index:2;max-width:none}
.cta-pro h2{color:#fff;margin-bottom:16px}
.cta-pro p{color:rgba(255,255,255,.88);margin-bottom:30px;text-align:justify}
.cta-pro .btn-primary{background:#fff;color:var(--teal-dk)}
.cta-pro .btn-primary:hover{background:var(--paper-2)}

/* detalle clínico */
.therapy-detail{padding:8px 0 clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.detail-sub{margin-top:clamp(34px,4vw,52px)}
.detail-sub:first-child{margin-top:0}
.detail-sub .dh{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.08;margin-bottom:8px}
.detail-sub .dh-lead{color:var(--ink-2);margin-bottom:6px}

/* mecanismo de acción */
.mech-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.mech-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 26px 26px 30px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.mech-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--teal),var(--clay))}
.mech-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.mech-card .mh{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.mech-card .mi{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--teal-tint);color:var(--teal);display:flex;align-items:center;justify-content:center}
.mech-card .mi svg{width:23px;height:23px}
.mech-card h4{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.2;color:var(--ink)}
.mech-card p{font-size:.95rem;color:var(--ink-2)}

/* lista de mecanismos */
.mech-list{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:18px}
.mech-list li{position:relative;padding-left:26px;font-size:.98rem;color:var(--ink-2);line-height:1.55}
.mech-list li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;background:var(--teal);transform:rotate(45deg)}
.mech-list li b{color:var(--ink);font-weight:600}

/* beneficios */
.benefit-block{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;align-items:start}
.benefit-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,32px)}
.benefit-panel .bp-head{display:flex;align-items:center;gap:13px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.benefit-panel .bp-head .bi{width:46px;height:46px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--teal);display:flex;align-items:center;justify-content:center}
.benefit-panel .bp-head .bi svg{width:24px;height:24px}
.benefit-panel .bp-head h4{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.12;color:var(--ink)}
.benefit-list{list-style:none;display:flex;flex-direction:column;gap:16px}
.benefit-list li{position:relative;padding-left:24px;font-size:.95rem;color:var(--ink-2);line-height:1.55}
.benefit-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--clay)}
.benefit-list li b{color:var(--ink);font-weight:600}
.benefit-list li .stat,.stat{color:var(--teal-dk);font-weight:700}

/* citas bibliográficas */
.cites{font-size:.68rem;font-weight:700;margin-left:3px;white-space:nowrap;vertical-align:.5em}
.cites a{color:var(--teal);padding:0 1px}
.cites a:hover{text-decoration:underline}

/* nota de conclusión */
.detail-note{margin-top:26px;background:linear-gradient(120deg,var(--teal-tint),var(--clay-lt));border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(22px,3vw,30px);display:flex;gap:18px;align-items:flex-start}
.detail-note .ni{width:46px;height:46px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--surface);color:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.detail-note .ni svg{width:24px;height:24px}
.detail-note p{color:var(--ink);font-size:1rem;line-height:1.55}
.detail-note p b{font-weight:700}

/* estadísticas */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm)}
.stat-card .big{font-family:var(--display);font-weight:700;font-size:2rem;color:var(--teal);line-height:1;letter-spacing:-.03em}
.stat-card .lbl{font-size:.92rem;color:var(--ink);font-weight:600;margin-top:10px;line-height:1.32}
.stat-card .src{font-size:.76rem;color:var(--ink-3);margin-top:8px;font-style:italic}
.stat-card.fill{background:linear-gradient(135deg,var(--teal-dk),var(--teal));border-color:transparent}
.stat-card.fill .big,.stat-card.fill .lbl{color:#fff}
.stat-card.fill .src{color:rgba(255,255,255,.82)}

/* figura / esquema */
.fig-frame{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-sm)}
.fig-frame .fig-ph{border:1.5px dashed var(--line-2);border-radius:var(--r-sm);background:var(--paper-2);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;color:var(--ink-3)}
.fig-frame .fig-ph svg{width:42px;height:42px;color:var(--teal);opacity:.5}
.fig-frame .fig-ph .ph-t{font-weight:600;color:var(--ink-2);font-size:.95rem}
.fig-frame img{width:100%;border-radius:var(--r-sm);display:block}
.fig-frame figcaption{font-size:.8rem;color:var(--ink-2);margin-top:13px;line-height:1.5;text-align:center}
.fig-frame figcaption b{color:var(--ink-2);font-weight:600}

/* referencias */
.refs{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3vw,32px)}
.refs > .rh{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.refs > .rh .eyebrow{margin:0}
.refs ol{margin:0;padding-left:24px;display:grid;grid-template-columns:1fr 1fr;gap:12px 34px}
.refs li{font-size:.82rem;color:var(--ink-3);line-height:1.5;scroll-margin-top:96px}
.refs li b{color:var(--ink-2);font-weight:600}
.refs li a{color:var(--teal);word-break:break-word}
.refs li:target{color:var(--ink-2)}
.refs li:target::marker{color:var(--teal);font-weight:700}

@media (max-width:860px){
  .mech-grid,.benefit-block,.stat-grid,.refs ol{grid-template-columns:1fr !important}
}

/* Calidad — panel de oncogenes / cáncer hereditario */
.onco-panel{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:var(--r-md);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm)}
.onco-panel .bp-head{display:flex;align-items:center;gap:13px}
.gene-grid{margin-top:18px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.8rem;line-height:1.85;letter-spacing:.02em;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;text-align:justify;-webkit-hyphens:none;hyphens:none}

/* Calidad — tabla de resultados */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.qtable{width:100%;border-collapse:collapse;font-size:.92rem}
.qtable th{text-align:left;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dk);background:var(--teal-tint);padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.qtable td{padding:14px 18px;color:var(--ink-2);border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.qtable tbody tr:nth-child(even){background:var(--paper-2)}
.qtable tbody tr:last-child td{border-bottom:none}
.qtable td:first-child{font-weight:600;color:var(--ink)}
.qtable td b{color:var(--ink);font-weight:700}

/* Calidad — diferenciación celular in vitro + cariotipo */
.dif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);margin-top:38px}
.dif-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:0}
.dif-circle{width:100%;aspect-ratio:1;border-radius:50%;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);overflow:hidden}
.dif-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dif-item figcaption{font-size:.84rem;color:var(--ink-2);line-height:1.45;max-width:30ch}
.dif-note{text-align:center;color:var(--ink-3);font-size:.85rem;margin-top:18px;font-style:italic}
.karyo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:38px}
.karyo-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:0}
.karyo-ph{width:100%;aspect-ratio:16/10;border-radius:var(--r-md);background:var(--paper-2);border:1.5px dashed var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);overflow:hidden}
.karyo-ph img{width:100%;height:100%;object-fit:contain}
.karyo-item figcaption{font-size:.88rem;color:var(--ink-2)}
@media (max-width:760px){.dif-grid{grid-template-columns:1fr 1fr}.karyo-grid{grid-template-columns:1fr}}

/* ============================================================
   TERAPIAS — índice plegable (nivel 1: una terapia a la vez)
   ============================================================ */
.therapy-index{list-style:none;margin-top:clamp(26px,4vw,46px);border-top:1px solid var(--line)}
.ti-item{border-bottom:1px solid var(--line)}
.ti-row{list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2.4vw,30px);
  padding:clamp(21px,2.6vw,30px) 4px clamp(21px,2.6vw,30px) 22px;
  scroll-margin-top:96px;transition:background .25s var(--ease)}
.ti-row::-webkit-details-marker{display:none}
.ti-row::marker{content:""}
/* barra de acento: scaleY, sin reflujo de los hermanos */
.ti-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);
  transform:scaleY(0);transition:transform .3s var(--ease)}
.ti-num{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .25s}
.ti-title{font-family:var(--display);font-weight:600;font-size:clamp(1.32rem,2.6vw,2rem);line-height:1.1;
  letter-spacing:-.025em;color:var(--ink);transition:color .25s}
.ti-chevron{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s}
.ti-chevron svg{width:18px;height:18px}
.ti-row:hover{background:var(--paper-2)}
.ti-row:hover::before{transform:scaleY(.45)}
.ti-row:hover .ti-title,.ti-row:hover .ti-num{color:var(--teal)}
.ti-row:hover .ti-chevron{border-color:var(--teal);background:var(--teal-tint)}
.ti-row:focus-visible{outline:2px solid var(--teal);outline-offset:-3px}
.ti-item[open] > .ti-row{background:var(--paper-2)}
.ti-item[open] > .ti-row::before{transform:scaleY(.72)}
.ti-item[open] > .ti-row .ti-title{color:var(--teal-dk)}
.ti-item[open] > .ti-row .ti-num{color:var(--teal)}
.ti-item[open] > .ti-row .ti-chevron{transform:rotate(180deg);background:var(--teal);border-color:var(--teal);color:#fff}
.ti-body{background:var(--paper-2);padding:0 clamp(4px,1.6vw,22px) clamp(28px,4vw,52px)}
/* garantía: el contenido revelado siempre visible al abrir (independiente del JS) */
.ti-item[open] .reveal{opacity:1;transform:none}
@media (max-width:640px){
  .ti-row{gap:13px;padding:19px 2px 19px 16px}
  .ti-chevron{width:34px;height:34px}
  .ti-chevron svg{width:15px;height:15px}
}

/* ============================================================
   TERAPIAS — detalle científico plegable (nivel 2)
   ============================================================ */
.therapy-detail-acc{margin-top:24px}
.detail-toggle{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;
  scroll-margin-top:100px;
  width:-moz-fit-content;width:fit-content;margin:0 auto;
  font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:.01em;
  color:#fff;padding:15px 32px;border:0;border-radius:999px;
  background:var(--teal);box-shadow:0 10px 24px rgba(46,111,214,.30);
  transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.detail-toggle::-webkit-details-marker{display:none}
.detail-toggle::marker{content:""}
.detail-toggle:hover{background:var(--teal-dk);transform:translateY(-2px);box-shadow:0 16px 34px rgba(46,111,214,.40)}
.detail-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.detail-toggle .lbl::after{content:"Ver detalle científico"}
.therapy-detail-acc[open] > .detail-toggle .lbl::after{content:"Ocultar detalle científico"}
.detail-toggle .ts-chevron{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:rgba(255,255,255,.2);color:#fff;transition:transform .3s var(--ease)}
.detail-toggle .ts-chevron svg{width:15px;height:15px}
.therapy-detail-acc[open] > .detail-toggle .ts-chevron{transform:rotate(180deg)}
/* garantía: el contenido revelado siempre visible al abrir (independiente del JS) */
.therapy-detail-acc[open] .reveal{opacity:1;transform:none}

/* Salud femenina — desplegable lateral (botón a la izquierda, contenido a la derecha) */
.fem-toggle{margin:26px auto 0 0}
.fem-toggle .lbl::after{content:"Ver áreas de aplicación"}
.fem-toggle[aria-expanded="true"] .lbl::after{content:"Ocultar áreas"}
.fem-toggle[aria-expanded="true"] .ts-chevron{transform:rotate(90deg)}
.fem-detail{display:none}
.fem-detail.open{display:flex;flex-direction:column;gap:16px;opacity:1;transform:none}

/* ============================================================
   TEXTO JUSTIFICADO (tarjetas y secciones)
   ============================================================ */
.lead,
.section-head p,
.therapy-row p,
.t-card .body p,
.info-card p,
.mech-card p,
.mech-list li,
.benefit-list li,
.benefit-panel p,
.dh-lead,
.detail-note p,
.onco-panel > p{text-align:justify;text-justify:inter-word}

/* ============================================================
   RESPONSIVE — colapso de grillas en tablet/móvil
   (incluye override de los grid-template-columns puestos inline)
   ============================================================ */
@media (max-width:1024px){
  .cards-3,.metric-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:860px){
  .mech-grid,.benefit-block,.stat-grid,.refs ol,.dif-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:640px){
  .cards-3,.metric-grid,.mech-grid,.benefit-block,.stat-grid,.refs ol,
  .dif-grid,.karyo-grid,.therapies,.steps,.testi-grid,.kpi-row{grid-template-columns:1fr !important}
  .vb-stats{flex-direction:column;gap:14px}
  .gene-grid{font-size:.74rem}
  .therapy-summary,.detail-toggle{width:auto}
}