/* =========================================================
   BIOTRACK · sitio corporativo — hoja de estilos única
   Sistema visual heredado de la plataforma (styles.css)
   ========================================================= */

/* =========================================================
   BioTrack — Landing / embudo de captación
   Sistema visual heredado de styles.css (tokens, degradados,
   sombras, curva de animación y radios de la plataforma)
   ========================================================= */
:root{
  --orange:#FF7400;  --orange-d:#D96200;  --orange-t:#FFF1E3;
  --teal:#18B1A7;    --navy:#134073;
  --green:#39B54A;   --amber:#FBB03B;     --red:#D91A32;
  --yellow:#F0A500;  --yellow-d:#D18C00;
  --purple:#784AA9;  --magenta:#DD3C8D;   --pink:#F04270;  --blue:#2569C6;

  --bg:#F9F9F9;      --card:#FFFFFF;      --rowhl:#FAFAFA;
  --chip:#F2F2F2;    --mint:#E7F5F4;
  --line:#E6E6E6;    --rule:#C9C9C9;      --input:#DEDEDE;
  --ink:#181817;     --text:#404042;      --text2:#6B6B6B;
  --muted:#A6A6A6;   --faint:#C9C9C9;

  --g-naranja:linear-gradient(135deg,#FF7400 0%,#D91A32 100%);
  --g-verde:linear-gradient(135deg,#99BE43 0%,#389F48 100%);
  --g-azul:linear-gradient(135deg,#1A71B5 0%,#1A9DA8 100%);
  --g-morado:linear-gradient(135deg,#784AA9 0%,#DD3C8D 100%);
  --g-calido:linear-gradient(135deg,#F2BE38 0%,#D6523F 100%);
  --g-rosa:linear-gradient(135deg,#DA6674 0%,#905B94 100%);
  --g-kpi:linear-gradient(180deg,#134073 0%,#18B1A7 100%);
  --g-geo:linear-gradient(90deg,#134073 0%,#18B1A7 100%);
  --g-rank:linear-gradient(90deg,#FF7400 0%,#D91A32 100%);

  --sh-card:0 2px 18px rgba(17,17,17,.06);
  --sh-top:0 2px 16px rgba(17,17,17,.065);
  --sh-lift:0 18px 44px rgba(17,17,17,.13);
  --sh-menu:0 18px 44px rgba(17,17,17,.18);

  --ease:cubic-bezier(.22,.9,.26,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:'Nunito Sans','Avenir Next','Avenir',system-ui,-apple-system,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--card); color:var(--text); font-family:var(--font);
  font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; color:var(--ink); line-height:1.1; letter-spacing:-.02em; font-weight:800}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
a{color:var(--orange); text-decoration:none}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px; border-radius:.5rem}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.sec{padding:5.5rem 0}
.sec--tight{padding:4rem 0}
.sec--gray{background:var(--bg)}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.eyebrow::before{content:''; width:1.6rem; height:2px; border-radius:2px; background:var(--orange)}
.h-xl{font-size:clamp(2.2rem,5.2vw,3.9rem)}
.h-lg{font-size:clamp(1.9rem,4vw,3rem)}
.h-md{font-size:clamp(1.35rem,2.4vw,1.85rem)}
.o{color:var(--orange)}
.lead{font-size:clamp(1.02rem,1.25vw,1.18rem); color:var(--text2); line-height:1.65; max-width:62ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; height:3.1rem;
  padding:0 1.7rem; border-radius:1.55rem; font-size:1rem; font-weight:800; white-space:nowrap;
  transition:transform .18s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--orange{background:var(--orange); color:#fff}
.btn--orange:hover{background:var(--orange-d)}
.btn--teal{background:var(--teal); color:#fff}
.btn--teal:hover{background:#149C93}
.btn--navy{background:var(--navy); color:#fff}
.btn--ghost{background:#fff; color:var(--ink); border:1.5px solid var(--input)}
.btn--ghost:hover{border-color:var(--orange); color:var(--orange)}
.btn--white{background:#fff; color:var(--orange)}
.btn--lg{height:3.5rem; padding:0 2.1rem; font-size:1.08rem; border-radius:1.75rem}
.btn--sm{height:2.5rem; padding:0 1.2rem; font-size:.92rem; border-radius:1.25rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}
.ico{width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:60; padding:.85rem 0;
  transition:background .3s, box-shadow .3s, padding .3s}
.hdr.is-stuck{padding:.55rem 0}
.hdr__in{position:relative; background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(190%); backdrop-filter:blur(20px) saturate(190%);
  border:1px solid rgba(255,255,255,.7); border-radius:2.2rem;
  box-shadow:0 .4rem 1.6rem rgba(17,17,17,.08), inset 0 1px 0 rgba(255,255,255,.75);
  height:4.4rem; display:flex; align-items:center; gap:1.5rem; padding:0 .6rem 0 1.6rem;
  transition:background .3s, box-shadow .3s, border-color .3s}
.hdr.is-stuck .hdr__in{background:rgba(255,255,255,.82);
  box-shadow:0 .6rem 2rem rgba(17,17,17,.13), inset 0 1px 0 rgba(255,255,255,.85)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr__in{background:rgba(255,255,255,.96)}
  .hdr.is-stuck .hdr__in{background:#fff}
}
.hdr__logo{height:3rem; width:auto}
.hdr__nav{display:flex; align-items:center; gap:2rem; margin-left:auto}
.hdr__nav a{color:var(--text); font-size:1rem; font-weight:600; position:relative; padding:.3rem 0}
.hdr__nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); border-radius:2px; transition:right .25s var(--ease)}
.hdr__nav a:hover{color:var(--orange)}
.hdr__nav a:hover::after{right:0}
.hdr__cta{margin-left:1.2rem}
.burger{display:none; margin-left:auto; width:2.8rem; height:2.8rem; border-radius:.9rem;
  border:1px solid var(--line); align-items:center; justify-content:center; color:var(--ink)}
.mnav{display:none; margin-top:.6rem; background:#fff; border:1px solid var(--line); border-radius:1.4rem;
  box-shadow:var(--sh-menu); padding:.6rem; flex-direction:column; animation:rise .3s var(--ease) both}
.mnav a{padding:.85rem 1rem; border-radius:.9rem; color:var(--text); font-weight:600}
.mnav a:hover{background:var(--rowhl); color:var(--orange)}
.mnav .btn{margin-top:.4rem}

/* ---------- hero ---------- */
/* el degradado arranca detrás de la pastilla del menú: sin franja blanca arriba */
.hero{position:relative; overflow:hidden; margin-top:-6.1rem; padding:8.6rem 0 3rem}
.hero::before{content:''; position:absolute; top:-12rem; right:-14rem; width:46rem; height:46rem;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,116,0,.13), rgba(255,116,0,0) 68%);
  pointer-events:none}
.hero::after{content:''; position:absolute; bottom:-22rem; left:-16rem; width:40rem; height:40rem;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(24,177,167,.14), rgba(24,177,167,0) 68%);
  pointer-events:none}
.hero__in{position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.1fr);
  gap:2.5rem; align-items:center}
.hero h1{font-size:clamp(2.05rem,3.8vw,2.85rem); font-weight:800; line-height:1.08;
  letter-spacing:-.018em; text-wrap:balance}
.hero .lead{margin-top:1.4rem; font-size:clamp(1.05rem,1.4vw,1.25rem)}
.hero__acts{display:flex; gap:.9rem; margin-top:2rem; flex-wrap:wrap}
.hero__trust{display:flex; gap:1.6rem; margin-top:2.2rem; flex-wrap:wrap; color:var(--text2); font-size:.95rem}
.hero__trust span{display:inline-flex; align-items:center; gap:.5rem}
.hero__trust .ico{color:var(--teal)}
.hero__art{position:relative}
.hero__stage{position:relative; container-type:inline-size; animation:float 9s ease-in-out infinite}
.hero__stage picture{display:block}
.hero__stage img{width:100%}
.hero__chips{display:contents}
.hchip{position:absolute; left:var(--x); top:var(--y); z-index:2;
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  background:#fff; color:var(--navy); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(8.5px, 2.05cqw, 16px); line-height:1;
  padding:.6em 1.05em; border-radius:1.7em; box-shadow:0 .45em 1.5em rgba(17,17,17,.17);
  transform:translate(-50%,-50%); animation:floatchip 5.5s ease-in-out infinite;
  will-change:transform; cursor:default}
.hchip svg{width:1.25em; height:1.25em; flex:none; stroke:currentColor; fill:none; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round}
.hchip--2{animation-duration:6.4s; animation-delay:.5s}
.hchip--3{animation-duration:5.9s; animation-delay:1.1s}
.hchip--4{animation-duration:6.8s; animation-delay:1.7s}
.badge,.badge.badge{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.1rem; padding:0 .95rem; border-radius:999px; background:var(--orange-t);
  color:var(--orange-d); font-size:.85rem; font-weight:800; line-height:1; white-space:nowrap;
  letter-spacing:.005em; border:1px solid rgba(255,116,0,.18); flex:none}
.badge i,.badge.badge i{display:block; width:.45rem; height:.45rem; border-radius:50%;
  background:var(--orange); flex:none; margin:0;
  box-shadow:0 0 0 0 rgba(255,116,0,.55); animation:pulse 2.2s infinite}
.hero__float{position:absolute; background:#fff; border-radius:1.1rem; box-shadow:var(--sh-lift);
  padding:.75rem .95rem; display:flex; align-items:center; gap:.7rem; font-size:.88rem; font-weight:700;
  color:var(--ink); animation:float 6s ease-in-out infinite}
.hero__float span.d{width:2.1rem; height:2.1rem; border-radius:.65rem; display:grid; place-items:center;
  color:#fff; flex:none}
.hero__float--a{left:-.4rem; bottom:6%; animation-delay:.4s; z-index:3}
.hero__float--b{display:none}
.hero__float em{font-style:normal; display:block; font-size:.76rem; color:var(--text2); font-weight:600}

/* ---------- franja de métricas ---------- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem}
.stat{background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.6rem 1.4rem;
  text-align:center; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.stat:hover{transform:translateY(-4px); box-shadow:var(--sh-card); border-color:transparent}
.stat__ic{width:3rem; height:3rem; margin:0 auto .8rem; border-radius:1rem; display:grid; place-items:center;
  color:#fff}
.stat b{display:block; font-size:2.4rem; font-weight:900; color:var(--ink); line-height:1; letter-spacing:-.03em}
.stat .plus{display:inline-block; font-size:2.9rem; line-height:.82; color:var(--orange)}
.stat>span{display:block; font-size:1.02rem; font-weight:800; color:var(--ink); margin-top:.5rem}
.stat em{font-style:normal; display:block; font-size:.9rem; color:var(--text2)}

/* ---------- beneficios ---------- */
.shot{border-radius:1.75rem; overflow:hidden; box-shadow:var(--sh-card); margin-top:2.5rem; position:relative}
.shot img{width:100%}
.bgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:1.75rem}
.bcard{background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.75rem;
  display:flex; flex-direction:column; gap:.8rem; position:relative; overflow:hidden;
  transition:transform .26s var(--ease), box-shadow .26s, border-color .26s}
.bcard::after{content:''; position:absolute; left:0; top:0; bottom:0; width:.28rem; background:var(--g-naranja);
  transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease)}
.bcard:hover{transform:translateY(-5px); box-shadow:var(--sh-lift); border-color:transparent}
.bcard:hover::after{transform:scaleY(1)}
.bcard__ic{width:3.1rem; height:3.1rem; border-radius:1rem; background:var(--orange-t); color:var(--orange);
  display:grid; place-items:center; transition:background .28s, color .28s, transform .28s var(--ease)}
.bcard:hover .bcard__ic{background:var(--orange); color:#fff; transform:rotate(-6deg) scale(1.06)}
.bcard b{font-size:1.2rem; color:var(--ink); font-weight:800}
.bcard p{font-size:.98rem; color:var(--text2); line-height:1.6}
.bcard i.rule{display:block; width:2.4rem; height:.2rem; border-radius:2px; background:var(--g-rank); margin-top:auto}

/* ---------- dolor / costo ---------- */
.pain{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin-top:2.8rem}
.pcard{border-radius:1.8rem; padding:2.4rem 1.9rem 2.1rem; color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:19rem;
  transition:transform .4s var(--ease), box-shadow .4s}
.pcard:hover{transform:translateY(-7px); box-shadow:var(--sh-lift)}
.pcard b{display:block; font-size:clamp(3.6rem,6.6vw,5.4rem); font-weight:900; line-height:.88;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums; text-shadow:0 .2rem 1.6rem rgba(0,0,0,.14)}
.pcard b u{text-decoration:none; font-size:.42em; font-weight:800; letter-spacing:-.01em;
  margin-left:.18em; opacity:.85; vertical-align:.32em}
.pcard>span{display:block; font-size:1.3rem; font-weight:800; margin-top:1rem; line-height:1.2;
  letter-spacing:-.01em}
.pcard p{font-size:1rem; opacity:.9; margin-top:.55rem; line-height:1.55; max-width:30ch}
.pcard hr{border:0; height:2px; background:rgba(255,255,255,.35); border-radius:2px;
  width:3rem; margin:1.2rem 0 0; margin-top:auto}
.pcard .ghost{position:absolute; right:-2.2rem; bottom:-2.6rem; opacity:.13; width:11rem; height:11rem;
  transition:transform .5s var(--ease)}
.pcard:hover .ghost{transform:scale(1.08) rotate(-6deg)}
.vstable{margin-top:2.5rem; background:#fff; border:1px solid var(--line); border-radius:1.6rem; overflow:hidden}
.vsrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);
  gap:1rem; padding:1.05rem 1.6rem; border-top:1px solid var(--line); font-size:.98rem; align-items:center}
.vsrow:first-child{border-top:0; background:var(--rowhl); font-weight:800; color:var(--ink); font-size:.86rem;
  letter-spacing:.1em; text-transform:uppercase}
.vsrow>div:last-child{color:var(--ink); font-weight:700; display:flex; align-items:flex-start; gap:.6rem}
.vsrow>div:last-child .ico{color:var(--teal); margin-top:.18rem; flex:none}
.vsrow:not(:first-child):hover{background:var(--rowhl)}

/* ---------- cómo funciona + gráfica ---------- */
.flow{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:2rem; margin-top:2.5rem;
  align-items:start}
.steps{display:flex; flex-direction:column; gap:1rem}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:1.4rem;
  padding:1.3rem 2.4rem 1.3rem 1.5rem;
  display:flex; gap:1.1rem; align-items:flex-start; cursor:pointer; text-align:left; width:100%;
  transition:border-color .25s, transform .25s var(--ease), box-shadow .25s}
.step:hover{transform:translateX(4px); box-shadow:var(--sh-card)}
.step.is-on{border-color:var(--orange); background:#FFFCF8}
.step__n{font-size:2.1rem; font-weight:900; color:var(--faint); line-height:1; flex:none; width:2.2rem;
  transition:color .25s}
.step.is-on .step__n{color:var(--orange)}
.step::after{content:''; position:absolute; right:1.15rem; top:50%; width:.55rem; height:.55rem;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); border-radius:1px;
  transform:translateY(-50%) rotate(-45deg); transition:border-color .25s, transform .25s var(--ease)}
.step:hover::after{border-color:var(--orange); transform:translateY(-50%) translateX(3px) rotate(-45deg)}
.step.is-on::after{border-color:var(--orange)}
.step b{display:block; font-size:1.08rem; color:var(--ink); font-weight:800}
.step p{font-size:.94rem; color:var(--text2); margin-top:.25rem; line-height:1.55}

.panel{background:#fff; border:1px solid var(--line); border-radius:1.6rem; box-shadow:var(--sh-card);
  padding:1.6rem 1.8rem}
.panel__head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.panel__head b{font-size:1.25rem; color:var(--ink); font-weight:800}
.panel__head span{display:block; font-size:.9rem; color:var(--muted); font-weight:600}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-top:1.3rem}
.kpi{border-radius:1rem; background:var(--rowhl); border:1px solid var(--line); padding:.85rem 1rem}
.kpi span{display:block; font-size:.82rem; color:var(--text2); font-weight:700}
.kpi b{display:block; font-size:1.7rem; font-weight:900; color:var(--ink); line-height:1.1; letter-spacing:-.02em}

/* barras agrupadas — animación igual a la plataforma */
.gbars{margin-top:1.6rem}
.gbars__wrap{position:relative; padding-left:2.9rem}
.gbars__yax{position:absolute; left:0; top:0; bottom:0; width:2.9rem}
.gbars__yax span{position:absolute; right:.7rem; transform:translateY(-50%); font-size:.78rem;
  color:var(--muted); font-variant-numeric:tabular-nums; line-height:1}
.gbars__plot{height:15rem; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  align-items:end; position:relative}
.gbars__grid{position:absolute; left:0; right:0; height:1px; background:#EFEFF1}
.gbars__grid--base{background:var(--rule)}
.gbars__g{height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  cursor:pointer; position:relative; border-radius:.9rem .9rem 0 0; transition:background .25s}
.gbars__g:hover{background:rgba(24,177,167,.05)}
.gbars__set{display:flex; align-items:flex-end; justify-content:center; gap:.55rem; height:100%; width:100%}
.gcol{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%}
.gcol em{font-style:normal; font-size:.78rem; font-weight:800; color:var(--ink); margin-bottom:.35rem;
  opacity:0; transform:translateY(6px); transition:opacity .45s .55s var(--ease), transform .45s .55s var(--ease);
  font-variant-numeric:tabular-nums}
.gbars.on .gcol em{opacity:1; transform:none}
.gbar{width:2.1rem; max-width:100%; height:0; border-radius:.3rem .3rem 0 0;
  transition:height 1.05s var(--ease), filter .2s}
.gbars__g:hover .gbar{filter:brightness(1.08) saturate(1.05)}
.gbars__labels{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:.9rem 0 0 2.9rem}
.gbars__labels>span{text-align:center; font-size:.95rem; color:var(--text); font-weight:700}
.gbars__labels>span i{display:block; font-style:normal; font-size:.82rem; color:var(--muted);
  font-weight:600; margin-top:.1rem}
.gbars__foot{margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); text-align:center;
  font-size:.85rem; color:var(--muted)}
.gbars__foot b{color:var(--text2); font-weight:800}
.leg{display:flex; gap:1.5rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; font-size:.9rem;
  color:var(--text2)}
.leg span{display:inline-flex; align-items:center; gap:.5rem; font-weight:600}
.leg i{width:.7rem; height:.7rem; border-radius:50%; flex:none}

/* ---------- vistas conmutables del panel ---------- */
.pviews{overflow:hidden; transition:height .55s var(--ease)}
.pview{display:none}
.pview.is-on{display:block; animation:rise .5s var(--ease) both}
.blk{margin-top:1.5rem}
.blk:first-child{margin-top:.6rem}
.blk__h{margin-bottom:.9rem}
.blk__h b{display:block; font-size:1.05rem; color:var(--ink); font-weight:800; letter-spacing:-.01em}
.blk__h span{display:block; font-size:.85rem; color:var(--muted)}

/* tabla de horarios */
.htbl{display:flex; flex-direction:column}
.htbl__hd,.htbl__r{display:grid;
  grid-template-columns:minmax(0,1.45fr) 9.2rem repeat(3,minmax(0,.78fr)); gap:.7rem; align-items:center}
.htbl__hd{font-size:.78rem; color:var(--text2); font-weight:800; letter-spacing:.04em;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule); text-transform:uppercase}
.htbl__r{padding:.6rem .5rem; margin:0 -.5rem; border-radius:.7rem; font-size:.9rem; color:var(--text);
  transition:background .18s}
.htbl__r+.htbl__r{box-shadow:inset 0 1px 0 var(--line)}
.htbl__r:hover{background:var(--rowhl)}
.htbl .r{text-align:right; justify-self:end; font-variant-numeric:tabular-nums}
.htbl__n b{display:block; font-size:.94rem; color:var(--ink); font-weight:800; line-height:1.25}
.htbl__n span{display:block; font-size:.79rem; color:var(--muted)}
.htbl__j{font-weight:800; color:var(--ink)}
.days{display:flex; gap:.25rem}
.day{width:1.42rem; height:1.42rem; border-radius:.36rem; display:grid; place-items:center;
  font-size:.7rem; font-weight:800; background:var(--chip); color:var(--muted)}
.day.on{background:var(--orange); color:#fff}
.pview.is-on .htbl__r{animation:rise .5s var(--ease) both}
.pview.is-on .day{animation:pop .4s var(--ease) both}

/* dispositivos */
.dgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem}
.dcard{position:relative; border:1px solid var(--line); border-radius:1.15rem; padding:1.05rem .9rem;
  text-align:center; background:#fff;
  transition:border-color .22s, transform .22s var(--ease), box-shadow .22s}
.dcard:hover{border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--sh-card)}
.dcard__i{width:2.6rem; height:2.6rem; margin:0 auto .6rem; border-radius:.8rem; background:var(--mint);
  color:var(--teal); display:grid; place-items:center}
.dcard__i .ico{width:1.3rem; height:1.3rem}
.dcard b{display:block; font-size:.92rem; color:var(--ink); font-weight:800; line-height:1.25}
.dcard>span{display:block; font-size:.82rem; color:var(--text2)}
.dcard em{font-style:normal; display:block; font-size:.68rem; color:var(--faint); letter-spacing:.1em;
  text-transform:uppercase; margin-top:.25rem; font-weight:800}
.dcard i.dot{position:absolute; top:.75rem; right:.75rem; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--green); animation:pulseg 2.6s infinite}
.pview.is-on .dcard{animation:rise .55s var(--ease) both}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(57,181,74,.45)}
  70%{box-shadow:0 0 0 .5rem rgba(57,181,74,0)} 100%{box-shadow:0 0 0 0 rgba(57,181,74,0)}}

/* cobertura global */
.cov{display:flex; align-items:center; gap:1.9rem; flex-wrap:wrap; padding:.8rem 0 .4rem}
.cov__ring{flex:none}
#covArc{transition:stroke-dashoffset 1.3s var(--ease)}
.cov__t{min-width:0}
.cov__t>b{display:block; font-size:3.3rem; font-weight:900; line-height:1; letter-spacing:-.045em;
  background:var(--g-morado); -webkit-background-clip:text; background-clip:text; color:transparent}
.cov__t>span{display:block; font-size:.95rem; color:var(--text2); margin-top:.5rem}
.cov__b{display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap}
.cov__b em{font-style:normal; font-size:.85rem; font-weight:800; padding:.42rem .95rem; border-radius:999px}
.b-bad{background:#FCEAEC; color:#C4162B}
.b-warn{background:#FEF4E4; color:#B77B12}

/* cobertura por departamento */
.dept{display:flex; flex-direction:column; gap:.9rem}
.deptr{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto; gap:1rem;
  align-items:center; font-size:.92rem; color:var(--text); cursor:pointer}
.deptr__tr{height:.62rem; border-radius:999px; background:#EFEFF1; overflow:hidden}
.deptr__f{display:block; height:100%; width:0; border-radius:999px; background:var(--g-geo);
  transition:width 1.1s var(--ease)}
.deptr:hover .deptr__f{filter:brightness(1.1)}
.deptr__v{font-size:.85rem; color:var(--muted); white-space:nowrap}
.deptr__v b{font-size:1rem; color:var(--ink); font-weight:800; margin-right:.3rem;
  font-variant-numeric:tabular-nums}

/* tooltip de gráficos */
.tip{position:fixed; z-index:120; pointer-events:none; opacity:0; background:rgba(24,24,23,.95); color:#fff;
  border-radius:.75rem; padding:.55rem .75rem; font-size:.88rem; line-height:1.45;
  box-shadow:0 .8rem 2rem rgba(0,0,0,.28); transform:translate(-50%,-115%) scale(.94);
  transition:opacity .15s, transform .18s var(--ease); max-width:16rem}
.tip.is-on{opacity:1; transform:translate(-50%,-115%) scale(1)}
.tip b{display:block; margin-bottom:.2rem}
.tip em{font-style:normal; display:flex; align-items:center; gap:.45rem; color:#D6D6D8}
.tip em i{width:.55rem; height:.55rem; border-radius:.18rem; flex:none}
.tip em u{text-decoration:none; margin-left:auto; font-weight:800; color:#fff}

/* ---------- planes ---------- */
.plans__switch{display:flex; justify-content:center; margin-top:2.2rem}
.plans__switch .segm{width:auto; min-width:21rem}

.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin-top:2rem;
  align-items:stretch}
.plan{--pc:var(--orange); --pt:var(--orange-t); --pg:var(--g-naranja);
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:1.75rem;
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  transition:transform .38s var(--ease), box-shadow .38s, border-color .38s}
.plan::before{content:''; position:absolute; left:0; right:0; top:0; height:.34rem; background:var(--pg)}
.plan::after{content:''; position:absolute; left:0; right:0; bottom:0; height:0; z-index:-1;
  background:var(--pg); opacity:.07; transition:height .45s var(--ease)}
.plan:hover{transform:translateY(-9px); border-color:transparent;
  box-shadow:0 1.5rem 3.2rem rgba(17,17,17,.14)}
.plan:hover::after{height:100%}
.plan__bd{padding:2.1rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1; text-align:center}
.plan__badge{align-self:center; font-size:.72rem; font-weight:900; letter-spacing:.07em;
  text-transform:uppercase; color:var(--pc); background:var(--pt); padding:.38rem .85rem;
  border-radius:.6rem; white-space:nowrap}
.plan__name{font-size:1.5rem; font-weight:900; color:var(--ink); margin-top:1rem; letter-spacing:-.025em}
.plan__price{display:flex; align-items:flex-start; justify-content:center; gap:.1rem; margin-top:1rem;
  color:var(--ink); line-height:1}
.plan__price sup{font-size:1.3rem; font-weight:800; margin-top:.42rem}
.plan__price b{font-size:3.1rem; font-weight:900; letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.plan__u{font-size:.85rem; color:var(--text2); margin-top:.5rem; font-weight:600}
.plan__cap{margin:1.2rem 0 1.3rem; padding:.7rem .6rem; border-radius:.9rem; background:var(--rowhl);
  border:1px solid var(--line); font-size:.85rem; color:var(--text2)}
.plan__cap b{color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums}
.plan__f{display:flex; flex-direction:column; gap:.7rem; text-align:left; margin-bottom:1.5rem}
.plan__f li{display:flex; gap:.6rem; font-size:.9rem; color:var(--text2); align-items:flex-start;
  line-height:1.45}
.plan__f .ico{color:var(--pc); flex:none; margin-top:.14rem; width:1rem; height:1rem; stroke-width:2.8}
.plan .btn{margin-top:auto; height:2.9rem; border-radius:1.45rem}
.plan--feat{border-color:var(--pc); box-shadow:0 1.1rem 2.6rem rgba(57,181,74,.16)}
.plan--feat .plan__bd{padding-top:3.5rem}
.plan__tag{position:absolute; top:1.15rem; left:50%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:.35rem; background:var(--pg); color:#fff;
  font-size:.66rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  padding:.36rem .85rem; border-radius:.6rem; box-shadow:0 .35rem .9rem rgba(17,17,17,.2)}
.plans__note{text-align:center; margin-top:1.8rem; font-size:.9rem; color:var(--text2);
  max-width:70ch; margin-inline:auto; line-height:1.6}

/* ---------- configurador custom ---------- */
.cfg{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:1.6rem; margin-top:2.5rem;
  align-items:start}
.cfg__form{background:#fff; border:1px solid var(--line); border-radius:1.75rem; box-shadow:var(--sh-card);
  padding:1.9rem}
.cfg__grp{padding:1.4rem 0; border-top:1px solid var(--line)}
.cfg__grp:first-of-type{border-top:0; padding-top:.4rem}
.cfg__lbl{display:flex; align-items:center; gap:.7rem; font-size:1.02rem; font-weight:800; color:var(--ink);
  margin-bottom:.9rem}
.cfg__lbl i{width:1.7rem; height:1.7rem; border-radius:.55rem; background:var(--mint); color:#0F7A73;
  display:grid; place-items:center; font-size:.78rem; font-weight:900; font-style:normal; flex:none}
.cfg__hint{font-size:.88rem; color:var(--text2); margin:-.5rem 0 .9rem}
.fgrid{display:grid; gap:1.1rem}
.fgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fld{position:relative; display:block; min-width:0}
.fld>span{position:absolute; top:-.55rem; left:.9rem; padding:0 .4rem; background:#fff; font-size:.78rem;
  color:var(--text2); font-weight:700; z-index:1}
.fld input,.fld select,.fld textarea{width:100%; height:3.2rem; padding:0 1rem; border:1px solid var(--input);
  border-radius:.9rem; background:#fff; font-size:1rem; color:var(--text);
  transition:border-color .2s, box-shadow .2s}
.fld textarea{height:auto; min-height:5.5rem; padding:.9rem 1rem; resize:vertical; line-height:1.5}
.fld select{appearance:none; cursor:pointer; padding-right:2.4rem;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right .9rem center/1rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--teal);
  box-shadow:0 0 0 3px var(--mint)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted)}
.fld.is-bad input,.fld.is-bad select{border-color:var(--red); box-shadow:0 0 0 3px #FCEAEC}
.fld.is-ok input,.fld.is-ok select{border-color:var(--teal)}
.err{display:block; font-size:.8rem; color:var(--red); margin-top:.3rem; font-weight:700}

.opts{display:flex; flex-wrap:wrap; gap:.6rem}
.opt{position:relative}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{display:inline-flex; align-items:center; gap:.5rem; height:2.7rem; padding:0 1.05rem;
  border-radius:.85rem; border:1.5px solid var(--line); background:#fff; font-size:.94rem; font-weight:600;
  color:var(--text2); cursor:pointer; transition:.2s var(--ease); user-select:none}
.opt span:hover{border-color:var(--teal); color:var(--teal)}
.opt input:checked+span{border-color:var(--teal); background:var(--mint); color:#0F7A73;
  font-weight:800}
.opt input:focus-visible+span{outline:2px solid var(--teal); outline-offset:2px}
.opt--card span{height:auto; padding:.85rem 1rem; flex-direction:column; align-items:flex-start; gap:.15rem;
  text-align:left; min-width:9.5rem}
.opt--card em{font-style:normal; font-size:.8rem; color:var(--muted); font-weight:600}

.cfg__mini{display:block; font-size:.9rem; color:var(--ink); font-weight:800; margin-bottom:.55rem}
.segm{display:inline-flex; padding:.3rem; background:var(--chip); border-radius:1rem; gap:.25rem; width:100%}
.segm label{flex:1; position:relative}
.segm input{position:absolute; opacity:0; width:0; height:0}
.segm span{display:flex; align-items:center; justify-content:center; gap:.4rem; height:2.6rem;
  border-radius:.75rem; font-size:.95rem; font-weight:700; color:var(--text2); cursor:pointer;
  transition:background .22s var(--ease), color .22s, box-shadow .22s; white-space:nowrap}
.segm span i{font-style:normal; font-size:.75rem; font-weight:800; padding:.1rem .4rem; border-radius:.4rem;
  background:var(--mint); color:#0F7A73}
.segm input:checked+span{background:#fff; color:var(--navy); box-shadow:0 1px 5px rgba(17,17,17,.12)}
.segm input:checked+span i{background:var(--teal); color:#fff}
.segm input:focus-visible+span{outline:2px solid var(--teal); outline-offset:2px}
.slider{margin-top:.4rem}
.slider input[type=range]{width:100%; accent-color:var(--teal); height:1.5rem}
.slider__v{display:flex; align-items:baseline; gap:.5rem}
.slider__v b{font-size:2.2rem; font-weight:900; color:var(--navy); line-height:1;
  font-variant-numeric:tabular-nums}
.slider__v span{font-size:.95rem; color:var(--text2); font-weight:700}
.slider__sc{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:-.3rem}

/* panel de resumen pegajoso */
.cfg__out{position:sticky; top:6.5rem; background:var(--ink); color:#fff; border-radius:1.75rem;
  padding:1.8rem; box-shadow:var(--sh-lift); overflow:hidden; position:sticky}
.cfg__out::before{content:''; position:absolute; top:-8rem; right:-8rem; width:20rem; height:20rem;
  border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(24,177,167,.42),rgba(24,177,167,0) 70%)}
.cfg__out>*{position:relative}
.cfg__out h3{color:#fff; font-size:1.3rem}
.meter{margin-top:1rem}
.meter__t{display:flex; justify-content:space-between; font-size:.82rem; color:#B9B9BB; font-weight:700}
.meter__tr{height:.45rem; border-radius:999px; background:rgba(255,255,255,.16); margin-top:.4rem; overflow:hidden}
.meter__f{display:block; height:100%; width:0; border-radius:999px; background:var(--g-geo);
  transition:width .7s var(--ease)}
.outplan{margin-top:1.4rem; border-radius:1.2rem; padding:1.2rem 1.3rem; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); transition:background .4s}
.outplan__n{display:flex; align-items:center; gap:.6rem; font-size:1.25rem; font-weight:900; color:#fff}
.outplan__n i{width:.7rem; height:.7rem; border-radius:50%; background:var(--teal); flex:none}
.outplan__p{font-size:2.9rem; font-weight:900; line-height:1.05; letter-spacing:-.03em; margin-top:.5rem;
  font-variant-numeric:tabular-nums}
.outplan__p small{font-size:1rem; font-weight:700; color:#B9B9BB; letter-spacing:0}
.outplan__d{font-size:.9rem; color:#B9B9BB; margin-top:.2rem}
.outrows{margin-top:1.1rem; display:flex; flex-direction:column}
.outrow{display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; font-size:.93rem;
  border-top:1px solid rgba(255,255,255,.1); color:#D6D6D8}
.outrow:first-child{border-top:0}
.outrow b{color:#fff; font-weight:800; text-align:right}
.outrow--hl b{color:#63DAD1}
.outtags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.outtag{font-size:.78rem; font-weight:700; padding:.3rem .65rem; border-radius:.6rem;
  background:rgba(24,177,167,.22); color:#BFF0EC; border:1px solid rgba(24,177,167,.3)}
.cfg__out .btn{margin-top:1.3rem}
.outnote{font-size:.8rem; color:#9A9A9C; margin-top:.8rem; line-height:1.5; text-align:center}

/* ---------- gráficas del home: interacción ---------- */
.gbars__g{outline:none}
.gbars__g:focus-visible{background:rgba(24,177,167,.10)}
.gbars__g.sel{background:rgba(24,177,167,.09); box-shadow:inset 0 0 0 1.5px rgba(24,177,167,.38)}
.gbars__g.dim{opacity:.38}
.gbars__g.dim .gbar{filter:grayscale(.45)}
.gbars__labels>span{cursor:pointer; padding:.25rem .3rem; border-radius:.6rem; transition:color .2s, background .2s}
.gbars__labels>span:hover{background:var(--rowhl)}
.gbars__labels>span.sel{color:var(--teal)}
.gbars__labels>span.sel i{color:var(--teal)}
.gdet{display:none; margin-top:1.2rem; padding:1.05rem 1.2rem; border-radius:1.1rem;
  background:var(--mint); border:1px solid rgba(24,177,167,.28)}
.gdet.is-on{display:block; animation:rise .4s var(--ease) both}
.gdet__h{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; margin-bottom:.75rem}
.gdet__h b{font-size:1.02rem; color:var(--navy); font-weight:900}
.gdet__h span{font-size:.84rem; color:var(--text2)}
.gdet__x{margin-left:auto; font-size:.8rem; font-weight:800; color:var(--teal);
  border:1px solid rgba(24,177,167,.45); border-radius:999px; padding:.3rem .8rem; background:#fff;
  transition:background .2s, color .2s}
.gdet__x:hover{background:var(--teal); color:#fff}
.gdet__d{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem}
.gdet__r{display:flex; align-items:center; gap:.55rem; background:#fff; border-radius:.75rem;
  padding:.55rem .75rem; font-size:.88rem; color:var(--text); animation:rise .38s var(--ease) both}
.gdet__r i{width:.45rem; height:.45rem; border-radius:50%; background:var(--teal); flex:none}
.gdet__r em{font-style:normal; margin-left:auto; font-weight:900; color:var(--ink);
  font-variant-numeric:tabular-nums}

.htbl__r{cursor:pointer; outline:none}
.htbl__r:focus-visible{background:var(--rowhl)}
.htbl__r.on{background:var(--mint)}
.htbl__c{display:inline-block; width:.5rem; height:.5rem; margin-left:.55rem; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease)}
.htbl__r.on .htbl__c{transform:translateY(1px) rotate(-135deg); border-color:var(--teal)}
.htbl__p{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease)}
.htbl__p.on{grid-template-rows:1fr}
.htbl__p>div{overflow:hidden}
.htbl__d{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; padding:.7rem 0 .9rem}
.htbl__dr{display:flex; align-items:center; gap:.55rem; background:var(--rowhl); border:1px solid var(--line);
  border-radius:.75rem; padding:.5rem .75rem; font-size:.86rem; color:var(--text2);
  animation:rise .38s var(--ease) both}
.htbl__dr i{width:.45rem; height:.45rem; border-radius:50%; background:var(--teal); flex:none}
.htbl__dr em{font-style:normal; margin-left:auto; font-weight:800; color:var(--ink)}

.deptr{cursor:pointer; outline:none; border-radius:.7rem; padding:.3rem .45rem; margin:0 -.45rem;
  transition:background .2s, opacity .2s}
.deptr:hover,.deptr:focus-visible{background:var(--rowhl)}
.deptr.sel{background:var(--mint)}
.deptr.dim{opacity:.42}

/* ---------- señal de "pulsación" de las maquetas que se animan solas ---------- */
@keyframes tapnow{0%{transform:scale(1)} 34%{transform:scale(.972)} 100%{transform:scale(1)}}
.is-tap{animation:tapnow .44s var(--ease)}
.htbl__r.is-tap,.deptr.is-tap{animation:tapnow .44s var(--ease)}
@media (prefers-reduced-motion:reduce){ .is-tap{animation:none} }

/* ---------- banda naranja ---------- */
.band{background:var(--g-naranja); color:#fff; padding:5rem 0; position:relative; overflow:hidden}
.band::before{content:''; position:absolute; inset:0; opacity:.13; background-repeat:repeat;
  background-size:230px 230px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='36' cy='38' r='17'/><rect x='92' y='20' width='46' height='36' rx='7'/><path d='M100 30h30M100 40h20'/><circle cx='190' cy='40' r='16'/><path d='M190 31v9l6 5'/><rect x='24' y='96' width='40' height='40' rx='9'/><path d='M34 116h20M44 106v20'/><path d='M112 100l14 28h-28z'/><circle cx='192' cy='118' r='18'/><path d='M174 118h36'/><rect x='28' y='172' width='44' height='30' rx='6'/><path d='M40 172v-8h20v8'/><circle cx='120' cy='188' r='15'/><path d='M113 188l5 5 9-10'/><path d='M176 200v-26l16-8 16 8v26z'/></svg>")}
.band>*{position:relative}
.band h2{color:#fff}
.band .lead{color:rgba(255,255,255,.93); max-width:70ch}
.brands{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; margin-top:2.5rem}
.brand{background:#fff; border-radius:1.3rem; height:6.5rem; display:grid; place-items:center;
  padding:1.1rem 1.4rem; transition:transform .25s var(--ease), box-shadow .25s}
.brand:hover{transform:translateY(-4px); box-shadow:0 1rem 2rem rgba(0,0,0,.18)}
.brand img{max-height:2.2rem; max-width:76%; width:auto; height:auto; object-fit:contain}
.brand--bt img{max-height:3.9rem; max-width:60%}
.brands__note{text-align:center; margin-top:1.5rem; font-size:.92rem; color:rgba(255,255,255,.88)}

/* ---------- testimonios ---------- */
.tgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:2.5rem}
.tcard{background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.7rem;
  display:flex; flex-direction:column; gap:1rem; transition:transform .26s var(--ease), box-shadow .26s}
.tcard:hover{transform:translateY(-4px); box-shadow:var(--sh-card)}
.tcard p{font-size:1rem; color:var(--text); line-height:1.65}
.tcard__q{font-size:2.6rem; line-height:.6; color:var(--orange); font-weight:900}
.tcard__w{display:flex; align-items:center; gap:.8rem; margin-top:auto}
.tcard__av{width:2.7rem; height:2.7rem; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-weight:900; font-size:1rem; flex:none}
.tcard__w b{display:block; font-size:.95rem; color:var(--ink); font-weight:800}
.tcard__w span{display:block; font-size:.85rem; color:var(--text2)}

/* ---------- FAQ ---------- */
.faq{max-width:52rem; margin:2.5rem auto 0; display:flex; flex-direction:column; gap:.8rem}
.fq{background:#fff; border:1px solid var(--line); border-radius:1.2rem; overflow:hidden;
  transition:border-color .25s, box-shadow .25s}
.fq.is-open{border-color:var(--orange); box-shadow:var(--sh-card)}
.fq__q{width:100%; display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; text-align:left;
  font-size:1.05rem; font-weight:800; color:var(--ink)}
.fq__q .ico{margin-left:auto; color:var(--orange); transition:transform .3s var(--ease); flex:none}
.fq.is-open .fq__q .ico{transform:rotate(45deg)}
.fq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--ease)}
.fq.is-open .fq__a{grid-template-rows:1fr}
.fq__a>div{overflow:hidden}
.fq__a p{padding:0 1.4rem 1.3rem; font-size:.98rem; color:var(--text2); line-height:1.65}

/* ---------- CTA final ---------- */
.cta{background:var(--g-kpi); color:#fff; border-radius:2rem; padding:3.5rem 2.5rem; text-align:center;
  position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; top:-10rem; left:50%; transform:translateX(-50%);
  pointer-events:none; width:40rem; height:26rem; background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.cta>*{position:relative}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.92); margin:1rem auto 0; max-width:54ch; font-size:1.08rem}
.cta__acts{display:flex; gap:.9rem; justify-content:center; margin-top:2rem; flex-wrap:wrap}

/* ---------- footer ---------- */
.ft{background:#0E0E0E; color:#9A9A9C; padding:4rem 0 2rem; font-size:.95rem}
.ft__top{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:2rem}
.ft__logo{height:4.2rem; width:auto}
.ft p{margin-top:1.1rem; line-height:1.7; max-width:34ch}
.ft h4{color:#fff; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem;
  font-weight:800}
.ft li{margin-bottom:.6rem}
.ft a{color:#9A9A9C; transition:color .2s}
.ft a:hover{color:var(--orange)}
.ft__bot{margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem}
.ft__bot button{color:#6B6B6D; font-size:.85rem}
.ft__bot button:hover{color:var(--orange)}

/* ---------- modal ---------- */
.mask{position:fixed; inset:0; background:rgba(17,17,17,.5); backdrop-filter:blur(3px); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:2rem 1.2rem; overflow-y:auto;
  animation:fade .2s ease both}
.modal{background:#fff; border-radius:1.75rem; box-shadow:0 2rem 5rem rgba(17,17,17,.3);
  width:100%; max-width:48rem; margin:auto; animation:rise2 .28s var(--ease) both; overflow:hidden}
.modal__hd{display:flex; align-items:center; gap:1rem; padding:1.6rem 1.8rem 1rem}
.modal__ic{width:3rem; height:3rem; border-radius:.9rem; background:var(--orange-t); color:var(--orange);
  display:grid; place-items:center; flex:none}
.modal__t{flex:1; min-width:0}
.modal__t h3{font-size:1.55rem; font-weight:800; color:var(--ink)}
.modal__t p{font-size:.92rem; color:var(--text2); margin-top:.15rem}
.modal__x{width:2.6rem; height:2.6rem; border-radius:.8rem; border:1px solid var(--line); color:var(--text2);
  display:grid; place-items:center; flex:none; transition:.2s}
.modal__x:hover{border-color:var(--ink); color:var(--ink); background:var(--rowhl)}
.prog{display:flex; gap:.4rem; padding:0 1.8rem 1.1rem}
.prog__s{flex:1; height:.32rem; border-radius:999px; background:var(--line); overflow:hidden}
.prog__s i{display:block; height:100%; width:0; background:var(--g-rank); border-radius:999px;
  transition:width .45s var(--ease)}
.modal__bd{padding:.2rem 1.8rem 1.4rem; max-height:min(62vh,38rem); overflow-y:auto}
.modal__bd::-webkit-scrollbar{width:7px}
.modal__bd::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}
.mstep{animation:rise .32s var(--ease) both}
.mstep h4{font-size:1.1rem; color:var(--ink); margin-bottom:.3rem}
.mstep>.cfg__hint{margin:0 0 1.1rem}
.mrow{margin-bottom:1.3rem}
.mrow>b{display:block; font-size:.95rem; color:var(--ink); font-weight:800; margin-bottom:.6rem}
.modal__ft{display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.8rem 1.6rem; border-top:1px solid var(--line);
  background:var(--rowhl); flex-wrap:wrap}
.modal__ft .btn{flex:none}
.modal__ft .spacer{margin-left:auto}
.mini{font-size:.82rem; color:var(--text2); display:flex; align-items:center; gap:.4rem}
.mini .ico{color:var(--teal); width:1rem; height:1rem}
.chkline{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--text2);
  line-height:1.5; cursor:pointer}
.chkline input{width:1.1rem; height:1.1rem; accent-color:var(--orange); margin-top:.15rem; flex:none}
.reco{border-radius:1.2rem; padding:1.1rem 1.3rem; background:var(--mint); border:1px solid #BFE6E3;
  display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem}
.reco .ico{color:var(--teal); flex:none; margin-top:.15rem}
.reco b{display:block; color:var(--navy); font-size:1rem}
.reco p{font-size:.9rem; color:#0F6F68; margin-top:.2rem; line-height:1.5}

/* pantalla de éxito */
.done{text-align:center; padding:1.5rem 0 .5rem}
.done__ic{width:5rem; height:5rem; margin:0 auto 1.2rem; border-radius:50%; background:var(--mint);
  color:var(--teal); display:grid; place-items:center; animation:pop .45s var(--ease) both}
.done__ic .ico{width:2.4rem; height:2.4rem; stroke-width:2.6}
.done h4{font-size:1.5rem; margin-bottom:.6rem}
.done p{color:var(--text2); max-width:40ch; margin-inline:auto; line-height:1.6}
.summary{text-align:left; margin-top:1.6rem; border:1px solid var(--line); border-radius:1.2rem; overflow:hidden}
.summary__r{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 1.1rem; font-size:.92rem;
  border-top:1px solid var(--line); color:var(--text2)}
.summary__r:first-child{border-top:0; background:var(--rowhl)}
.summary__r b{color:var(--ink); text-align:right; font-weight:800}

/* panel de leads */
.leads{max-height:20rem; overflow:auto; border:1px solid var(--line); border-radius:1rem; margin-top:1rem}
.leads table{width:100%; border-collapse:collapse; font-size:.85rem}
.leads th,.leads td{padding:.55rem .8rem; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
.leads th{background:var(--rowhl); position:sticky; top:0; color:var(--ink); font-weight:800}
.leads td b{color:var(--ink)}
.sbadge{display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.75rem; font-weight:800}
.b-hot{background:#FCEAEC; color:#C4162B}
.b-warm{background:#FEF4E4; color:#B77B12}
.b-cold{background:#E8EEF6; color:var(--navy)}

/* ---------- animaciones ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes rise2{from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.8)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
@keyframes floatchip{0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,calc(-50% - .6em))}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,116,0,.5)} 70%{box-shadow:0 0 0 .6rem rgba(255,116,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,116,0,0)}}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.sec--teal .eyebrow{color:var(--teal)}
.sec--teal .eyebrow::before{background:var(--teal)}
.sec--teal .o{color:var(--teal)}
.rv{opacity:0; transform:translate3d(0,42px,0) scale(.975); filter:blur(9px);
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter .9s var(--ease-out);
  will-change:opacity,transform,filter}
.rv.on{opacity:1; transform:none; filter:blur(0)}
.rv--soft{transform:translate3d(0,26px,0) scale(.99); filter:blur(6px)}
.rv--zoom{transform:translate3d(0,34px,0) scale(.94); filter:blur(10px)}
.rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s} .rv-d3{transition-delay:.27s}
.rv-d4{transition-delay:.36s} .rv-d5{transition-delay:.45s} .rv-d6{transition-delay:.54s}
.par{will-change:transform}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero__in{grid-template-columns:minmax(0,1fr); gap:2rem}
  .hero__art{width:100%; max-width:34rem; margin-inline:auto}
  .hero__float{display:none}
  .flow,.cfg{grid-template-columns:minmax(0,1fr)}
  .cfg__out{position:static}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bgrid,.tgrid,.pain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hdr__nav{display:none}
  .burger{display:flex}
  .hdr__cta{display:none}
}
@media (max-width:820px){
  .htbl__hd{display:none}
  .htbl__r{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:.55rem; column-gap:.5rem;
    padding:.95rem .6rem; margin:0; border-radius:0}
  .htbl__r>.htbl__n,.htbl__r>.days{grid-column:1/-1}
  .htbl .r{justify-self:start; text-align:left; white-space:nowrap; font-size:.86rem}
  .htbl .r::before{content:attr(data-l); display:block; color:var(--muted); font-weight:700;
    font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.05rem}
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .deptr{grid-template-columns:minmax(0,1fr); gap:.35rem}
  .deptr__v{justify-self:start}
  .cov__t>b{font-size:2.7rem}
  .hero__stage{animation:none}
  .hero__chips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin-top:1.1rem}
  .hchip{position:static!important; transform:none!important; animation:none!important;
    font-size:.76rem; line-height:1.25; padding:.6rem .75rem; border-radius:.9rem;
    white-space:normal; justify-content:flex-start;
    box-shadow:0 .25rem .9rem rgba(17,17,17,.1); border:1px solid var(--line)}
  .sec{padding:4rem 0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .panel2{grid-template-columns:minmax(0,1fr)}
  .vsrow{grid-template-columns:minmax(0,1fr); gap:.3rem; padding:1rem 1.2rem}
  .vsrow:first-child{display:none}
  .vsrow>div:nth-child(1)::before{content:'Hoy: '; font-weight:800; color:var(--ink)}
  .vsrow>div:nth-child(2)::before{content:'Consecuencia: '; font-weight:800; color:var(--ink)}
}
@media (max-width:620px){
  /* la píldora del hero es larga: en pantallas estrechas puede partirse */
  .badge,.badge.badge{white-space:normal; height:auto; min-height:2.1rem; padding:.42rem .85rem;
    text-align:center; line-height:1.3}
  .fv__row{flex-wrap:wrap; row-gap:.5rem}
  .segmini{flex-wrap:wrap; max-width:100%}
  .segmini i{font-size:.72rem; padding:.28rem .5rem}
  .gdet__d,.htbl__d{grid-template-columns:minmax(0,1fr)}
  .gdet__h{gap:.35rem}
  .gdet__x{margin-left:0}
  .plans,.bgrid,.tgrid,.pain{grid-template-columns:minmax(0,1fr)}
  .dgrid{grid-template-columns:minmax(0,1fr)}
  .fgrid--2,.fgrid--3{grid-template-columns:minmax(0,1fr)}
  .cfg__form,.cfg__out{padding:1.4rem}
  .modal__hd,.prog,.modal__bd,.modal__ft{padding-inline:1.2rem}
  .hero__acts .btn{width:100%}
  .cta{padding:2.5rem 1.4rem}
  .gbar{width:1.25rem}
  .gbars__set{gap:.3rem}
  .gbars__wrap{padding-left:2.2rem}
  .gbars__yax{width:2.2rem}
  .gbars__labels{margin-left:2.2rem}
  .gbars__labels>span{font-size:.82rem}
  .gcol em{font-size:.7rem}
  .pcard{min-height:0; padding:2rem 1.5rem 1.8rem}
  .ring{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important; transform:none!important; filter:none!important}
  .par{transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
}

/* =========================================================
   SITIO · componentes de las páginas internas
   ========================================================= */

/* ---------- header ---------- */
.hdr__brand{display:flex; align-items:center; flex:none}
.hdr__acts{display:flex; align-items:center; gap:.9rem; margin-left:1.2rem}
.hdr__login{display:inline-flex; align-items:center; gap:.5rem; height:2.7rem; padding:0 1rem;
  border-radius:1.35rem; border:1px solid var(--line); color:var(--text); font-size:.95rem; font-weight:700;
  transition:border-color .2s, color .2s, background .2s}
.hdr__login:hover{border-color:var(--teal); color:var(--teal); background:var(--mint)}
.hdr__login .ico{width:1.15rem; height:1.15rem}
.hdr__lang{display:inline-flex; align-items:center; gap:.42rem; height:2.7rem; padding:0 .85rem;
  border-radius:1.35rem; border:1px solid var(--line); color:var(--muted); font-size:.88rem; font-weight:800;
  letter-spacing:.03em; transition:border-color .2s, color .2s, background .2s}
.hdr__lang:hover{border-color:var(--orange); color:var(--orange); background:#FFF4EA}
.hdr__lang .ico{width:1.05rem; height:1.05rem}
.hdr__nav a[aria-current]{color:var(--orange)}
.hdr__nav a[aria-current]::after{right:0}

/* ---------- hero de página interna ---------- */
.phero{position:relative; overflow:hidden; margin-top:-6.1rem; padding:9.3rem 0 2.6rem;
  background:var(--bg)}
.phero::before{content:''; position:absolute; top:-14rem; right:-12rem; width:42rem; height:42rem;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,116,0,.11),rgba(255,116,0,0) 68%)}
.phero::after{content:''; position:absolute; bottom:-24rem; left:-14rem; width:38rem; height:38rem;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(24,177,167,.13),rgba(24,177,167,0) 68%)}
.phero>*{position:relative}
.phero .lead{max-width:60ch}
.crumbs{display:flex; align-items:center; gap:.55rem; font-size:.88rem; color:var(--muted); font-weight:600}
.crumbs a{color:var(--text2)} .crumbs a:hover{color:var(--orange)}
.crumbs b{color:var(--ink); font-weight:800}
.h-md2{font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.1}

/* ---------- layout en dos columnas ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:3rem; align-items:center}
.split--mid{align-items:center}
.split__art{min-width:0}
.tick{display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem}
.tick span{display:flex; gap:.6rem; align-items:flex-start; font-size:1rem; color:var(--text2); line-height:1.5}
.tick .ico{color:var(--teal); flex:none; margin-top:.2rem; width:1.1rem; height:1.1rem; stroke-width:2.8}
.tick--light span{color:rgba(255,255,255,.82)}
.tick--light .ico{color:#5FD6CD}
.mininote{font-size:.9rem; color:var(--muted); margin-top:1.2rem; line-height:1.55; max-width:52ch}
.cbtns{display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; margin-top:2rem}

/* ---------- sección oscura ---------- */
.sec--dark{background:var(--ink); color:#D6D6D8; position:relative; overflow:hidden}
.sec--dark::before{content:''; position:absolute; top:-14rem; left:-10rem; width:36rem; height:36rem;
  border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(255,116,0,.16),rgba(255,116,0,0) 70%)}
.sec--dark::after{content:''; position:absolute; bottom:-16rem; right:-10rem; width:34rem; height:34rem;
  border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(24,177,167,.16),rgba(24,177,167,0) 70%)}
.sec--dark>*{position:relative}
.eyebrow--light{color:#FFB36B}
.eyebrow--light::before{background:#FFB36B}
.lead--light{color:rgba(255,255,255,.78)}

/* ---------- video ---------- */
.vbox{position:relative; border-radius:1.9rem; overflow:hidden; background:var(--ink);
  aspect-ratio:16/9; display:grid; place-items:center; box-shadow:0 1.6rem 3.6rem rgba(17,17,17,.2)}
.vbox__poster{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.vbox__poster img{width:100%; height:100%; object-fit:cover; object-position:center center;
  opacity:1; filter:none; transform:none}
/* el cartel ahora es un fotograma real: solo se oscurece lo justo para que
   el botón de reproducción y el pie se lean encima */
.vbox__glow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 46%, rgba(17,17,17,.30) 0%, rgba(17,17,17,.14) 38%,
    rgba(17,17,17,.46) 100%)}
.vbox__meta::before{content:''; position:absolute; left:-1.8rem; right:-100vw; bottom:-1.6rem;
  height:9rem; pointer-events:none; z-index:-1;
  background:linear-gradient(0deg, rgba(17,17,17,.62) 0%, rgba(17,17,17,0) 100%)}
.vbox__play{position:relative; width:5.6rem; height:5.6rem; border-radius:50%; background:#fff;
  color:var(--orange); display:grid; place-items:center; z-index:2;
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.35); transition:transform .3s var(--ease)}
.vbox__play svg{width:2.2rem; height:2.2rem; margin-left:.2rem}
.vbox__play:hover{transform:scale(1.07)}
.vbox__ring{position:absolute; inset:-.6rem; border-radius:50%; border:2px solid rgba(255,255,255,.5);
  animation:vring 2.6s ease-out infinite}
@keyframes vring{0%{transform:scale(.92); opacity:.8} 100%{transform:scale(1.35); opacity:0}}
.vbox__meta{position:absolute; left:1.8rem; bottom:1.6rem; z-index:2; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.45); isolation:isolate}
.vbox__meta b{display:block; font-size:1.1rem; font-weight:800}
.vbox__meta span{display:block; font-size:.9rem; color:rgba(255,255,255,.7)}
.vbox__soon{position:absolute; right:1.5rem; top:1.4rem; z-index:2; font-size:.75rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); padding:.35rem .8rem; border-radius:.6rem; backdrop-filter:blur(6px)}
.vbox iframe,.vbox__v{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4;
  background:#000; display:block}
.vbox__v{object-fit:contain}
.vbox.is-on .vbox__poster,.vbox.is-on .vbox__play,
.vbox.is-on .vbox__meta,.vbox.is-on .vbox__soon{opacity:0; pointer-events:none; transition:opacity .3s}

/* ---------- qué es (tarjetas escalonadas) ---------- */
.qcard{display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:1.4rem; padding:1.15rem 1.3rem; box-shadow:var(--sh-card); margin-bottom:.9rem;
  transition:transform .3s var(--ease), box-shadow .3s}
.qcard:hover{transform:translateX(6px); box-shadow:var(--sh-lift)}
.qcard--2{margin-left:1.6rem} .qcard--3{margin-left:3.2rem} .qcard--4{margin-left:4.8rem}
.qcard__i{width:2.7rem; height:2.7rem; border-radius:.85rem; display:grid; place-items:center; color:#fff; flex:none}
.qcard b{display:block; font-size:1.05rem; color:var(--ink); font-weight:800}
.qcard>span:not(.qcard__i){display:block; font-size:.9rem; color:var(--text2); line-height:1.45; margin-top:.1rem}

/* ---------- BioConnect (tubería) ---------- */
.pipe{display:flex; flex-direction:column; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:1.6rem; padding:1.6rem}
.pipe__n{display:flex; align-items:center; gap:1rem}
.pipe__i{width:2.9rem; height:2.9rem; border-radius:.9rem; display:grid; place-items:center; color:#fff; flex:none}
.pipe__n>div{min-width:0}
.pipe__n>div>b{display:block; font-size:1.05rem; color:#fff; font-weight:800}
.pipe__n>div>span{display:block; font-size:.88rem; color:rgba(255,255,255,.62)}
.pipe__i .ico{width:1.35rem; height:1.35rem}
.pipe__l{display:block; width:2px; height:1.6rem; margin-left:1.45rem; border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.08))}

/* ---------- marcas sobre fondo claro ---------- */
.brands--light{margin-top:2.4rem}
.brands--light .brand{border:1px solid var(--line); box-shadow:var(--sh-card)}
.brands--light .brand:hover{box-shadow:var(--sh-lift)}
.brands--big .brand{height:8rem}
.brands--big .brand img{max-height:2.4rem; max-width:74%}
.brands--big .brand--bt img{max-height:4.2rem; max-width:58%}

/* ---------- funciones ---------- */
.fgroup{padding:4.2rem 0}
.fgroup:nth-child(even){background:var(--bg)}
.fgroup--rev .split>div:first-child{order:2}
.fnum{display:inline-grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:.95rem;
  background:var(--mint); color:#0F7A73; font-size:1rem; font-weight:900; letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(24,177,167,.22)}
.flist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem 1.4rem; margin-top:1.6rem}
.flist li{display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color:var(--text2); line-height:1.5}
.flist .ico{color:var(--teal); flex:none; margin-top:.2rem; width:1.05rem; height:1.05rem; stroke-width:2.8}
.findex{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.2rem}
.findex a{font-size:.88rem; font-weight:700; color:var(--text2); background:#fff; border:1px solid var(--line);
  padding:.5rem 1rem; border-radius:.8rem; transition:.2s}
.findex a:hover{border-color:var(--orange); color:var(--orange)}

/* visual reutilizable de funciones */
.fv{background:#fff; border:1px solid var(--line); border-radius:1.6rem; box-shadow:var(--sh-card);
  padding:1.5rem 1.6rem; display:flex; flex-direction:column; gap:.75rem}
.fv__row{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.2rem}
.fv__row b{font-size:1.05rem; color:var(--ink); font-weight:800}
.fv__row span{font-size:.85rem; color:var(--muted); font-weight:600}
.kpis--3{grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0}
.fv__last{display:flex; align-items:center; gap:.85rem; padding:.75rem .9rem; border:1px solid var(--line);
  border-radius:1rem}
.fv__av,.fv__av.fv__av{width:2.4rem; height:2.4rem; border-radius:50%; display:inline-grid;
  place-items:center; place-content:center; flex:none; color:#fff; overflow:hidden; line-height:0; padding:0}
.fv__av .ico{width:1.3rem; height:1.3rem; display:block; margin:0; stroke-width:2.1; color:#fff}
.fv__av img{width:100%; height:100%; object-fit:cover; display:block}
.fv__last>div{flex:1; min-width:0}
.fv__last>div>b{display:block; font-size:.93rem; color:var(--ink); font-weight:800}
.fv__last>div>span{display:block; font-size:.82rem; color:var(--text2)}
.fv__last em{font-style:normal; font-size:.75rem; font-weight:800; padding:.28rem .6rem; border-radius:999px; flex:none}
.b-ok{background:#E9F7EC; color:#2F9A3E}
.fv__dev{display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text2);
  padding-top:.7rem; border-top:1px solid var(--line)}
.dot--on{width:.55rem; height:.55rem; border-radius:50%; background:var(--green); display:inline-block;
  animation:pulseg 2.6s infinite}

.sched{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.9rem; align-items:center;
  padding:.65rem 0; border-top:1px solid var(--line)}
.sched b{display:block; font-size:.92rem; color:var(--ink); font-weight:800}
.sched span{display:block; font-size:.78rem; color:var(--muted)}
.sched em{font-style:normal; font-size:.85rem; color:var(--text2); font-weight:700; white-space:nowrap}
.sched .day{width:1.3rem; height:1.3rem; font-size:.66rem}

.tree2{display:flex; flex-direction:column}
.tree2__r{display:flex; align-items:center; gap:.6rem; padding:.55rem 0; font-size:.92rem; color:var(--text2);
  border-top:1px solid var(--line)}
.tree2__r:first-child{border-top:0}
.tree2__r .ico{width:1.05rem; height:1.05rem; color:var(--orange); flex:none}
.tree2__r em{font-style:normal; margin-left:auto; font-weight:800; color:var(--ink); font-size:.85rem}
.tree2__r.lv0 b{font-size:1rem; color:var(--ink); font-weight:800}
.tree2__r.lv1{padding-left:1.1rem; color:var(--text); font-weight:700}
.tree2__r.lv2{padding-left:2.6rem; font-size:.88rem}

/* ---- visuales interactivos ---- */
.kpi--b{text-align:left; cursor:pointer; border:1px solid var(--line); background:var(--rowhl);
  transition:border-color .2s, background .2s, transform .2s var(--ease)}
.kpi--b:hover{transform:translateY(-2px)}
.kpi--b.is-on{border-color:var(--teal); background:var(--mint)}
.fv__list{display:flex; flex-direction:column; gap:.55rem}
.fv__list .fv__last{animation:rise .38s var(--ease) both}
.fv__hint{font-size:.85rem; color:var(--muted); text-align:center; margin-top:1rem; line-height:1.5}
.fv__hint b{color:var(--text2)}
.fv__hint--box{display:flex; align-items:center; justify-content:center; gap:.6rem;
  max-width:19.5rem; margin:1.1rem auto 0; padding:.8rem 1rem; border-radius:1rem;
  background:var(--mint); border:1px solid rgba(24,177,167,.32); color:var(--navy);
  font-size:.86rem; font-weight:600; line-height:1.45}
.fv__hint--box b{color:var(--teal); font-weight:900}
.fv__hint--box .ico{width:1.05rem; height:1.05rem; color:var(--teal); flex:none}
.fv__det{margin-top:.2rem; padding:.9rem 1rem; border-radius:1rem; background:var(--mint);
  border:1px solid #BFE6E3; font-size:.88rem; color:#0F6F68; line-height:1.55;
  display:none; animation:rise .35s var(--ease) both}
.fv__det.is-on{display:block}
.fv__det b{display:block; color:var(--navy); font-size:.95rem; margin-bottom:.15rem}
.segmini{display:inline-flex; gap:.2rem; padding:.2rem; background:var(--chip); border-radius:.7rem}
.segmini i{font-style:normal; font-size:.76rem; font-weight:700; color:var(--text2); padding:.28rem .6rem;
  border-radius:.5rem; cursor:pointer; transition:.2s}
.segmini i.on{background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(17,17,17,.12)}

/* acordeón (horarios y estructura) */
.acc{display:flex; flex-direction:column}
.acc__i{border-top:1px solid var(--line)}
.acc__i:first-child{border-top:0}
.acc__b{width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:.8rem;
  align-items:center; padding:.72rem .5rem; margin:0 -.5rem; border-radius:.7rem; text-align:left;
  transition:background .18s}
.acc__b:hover{background:var(--rowhl)}
.acc__i.on>.acc__b{background:var(--mint)}
.acc__ic{width:2.1rem; height:2.1rem; border-radius:.6rem; background:var(--chip); color:var(--text2);
  display:grid; place-items:center; flex:none; transition:background .2s,color .2s}
.acc__i.on .acc__ic{background:var(--teal); color:#fff}
.acc__ic .ico{width:1.05rem; height:1.05rem}
.acc__t b{display:block; font-size:.93rem; color:var(--ink); font-weight:800; line-height:1.25}
.acc__t span{display:block; font-size:.79rem; color:var(--muted)}
.acc__v{font-size:.85rem; color:var(--text2); font-weight:700; white-space:nowrap}
.acc__c{width:.5rem; height:.5rem; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease), border-color .2s}
.acc__i.on .acc__c{transform:rotate(-135deg) translateY(-2px); border-color:var(--teal)}
.acc__p{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease)}
.acc__i.on .acc__p{grid-template-rows:1fr}
.acc__p>div{overflow:hidden}
.acc__d{padding:.3rem .5rem .8rem 3.1rem; display:flex; flex-direction:column; gap:.4rem}
.acc__r{display:flex; align-items:center; gap:.6rem; font-size:.86rem; color:var(--text2);
  padding:.4rem .7rem; border-radius:.6rem; background:var(--rowhl); border:1px solid var(--line);
  animation:rise .35s var(--ease) both}
.acc__r em{font-style:normal; margin-left:auto; font-weight:800; color:var(--ink)}
.acc__r i{width:.42rem; height:.42rem; border-radius:50%; background:var(--teal); flex:none}
.acc--tree .acc__b{grid-template-columns:auto minmax(0,1fr) auto auto}

/* ---- teléfono ---- */
.fv--phone{background:transparent; border:0; box-shadow:none; padding:0; align-items:center; gap:0}
.phone{position:relative; width:min(100%,19.5rem); height:38rem; margin-inline:auto; background:#EEF4F7;
  border:.55rem solid #15171A; border-radius:2.6rem; box-shadow:0 .7rem 1.6rem rgba(17,17,17,.10);
  overflow:hidden; display:flex; flex-direction:column}
.phone__notch{position:absolute; top:.5rem; left:50%; transform:translateX(-50%); width:6.2rem; height:1.35rem;
  background:#15171A; border-radius:1rem; z-index:6}
.phone__scr{position:absolute; inset:0 0 4.6rem; padding:2.6rem 1rem .6rem; overflow:hidden;
  display:none; flex-direction:column; gap:.6rem}
.phone__scr.on{display:flex; animation:pslide .42s var(--ease) both}
@keyframes pslide{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
.phone__av{width:5.2rem; height:5.2rem; border-radius:50%; margin:.3rem auto 0; display:grid;
  place-items:center; color:#fff; font-size:1.7rem; font-weight:900; background:var(--g-naranja);
  overflow:hidden; flex:none; box-shadow:none}
.phone__av img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.phone__av .ico{width:2.6rem; height:2.6rem; stroke-width:1.9}
.phone__hi{display:block; text-align:center; font-size:1.35rem; font-weight:900; color:var(--ink)}
.phone__id{display:block; text-align:center; font-size:.85rem; color:var(--orange); margin-top:-.35rem}
.phone__sel{display:flex; align-items:center; gap:.4rem; background:#fff; border-radius:.9rem;
  padding:.55rem .8rem; font-size:.85rem; color:var(--text2); box-shadow:0 1px 4px rgba(17,17,17,.08)}
.phone__sel b{color:var(--ink); font-weight:800}
.phone__sel .ico{margin-left:auto; width:.9rem; height:.9rem; transform:rotate(90deg); color:var(--muted)}
.phone__grid{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:.5rem}
.ptile{border-radius:1rem; padding:.6rem .7rem; color:#fff; overflow:hidden; position:relative}
.ptile__h{display:flex; align-items:center; gap:.35rem; font-size:.72rem; opacity:.95}
.ptile__h i{width:1.25rem; height:1.25rem; border-radius:.4rem; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-style:normal}
.ptile__h .ico{width:.75rem; height:.75rem}
.ptile b{display:block; font-size:1.5rem; font-weight:900; line-height:1.1; margin-top:.2rem}
.ptile em{font-style:normal; display:block; font-size:.66rem; opacity:.85}
.ptile--big{grid-row:span 3; display:flex; flex-direction:column}
.ptile--big b{font-size:2.6rem; margin-top:auto}
.pact{width:100%; display:flex; align-items:center; gap:.7rem; background:#fff; border-radius:1rem;
  padding:.65rem .75rem; text-align:left; box-shadow:0 1px 5px rgba(17,17,17,.08);
  transition:transform .2s var(--ease), box-shadow .2s}
.pact:hover{transform:translateY(-2px); box-shadow:0 .4rem 1rem rgba(17,17,17,.14)}
.pact__i,.pact__i.pact__i{width:2.4rem; height:2.4rem; border-radius:.7rem; display:inline-grid;
  place-items:center; place-content:center; flex:none; line-height:0; padding:0}
.pact__i .ico,.pact__i.pact__i .ico{display:block; margin:0}
.pact__i .ico{width:1.1rem; height:1.1rem}
.pact>div{min-width:0}
.pact>div>b{display:block; font-size:.9rem; font-weight:800; line-height:1.25}
.pact>div>span{display:block; font-size:.72rem; color:var(--text2); line-height:1.3}
.phone__h2{display:block; font-size:1rem; font-weight:900; color:var(--navy); margin-top:.3rem}
.ptbl{background:#fff; border-radius:1rem; padding:.5rem .6rem; box-shadow:0 1px 5px rgba(17,17,17,.08)}
.ptbl__h,.ptbl__r{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.5rem; align-items:center;
  font-size:.74rem; padding:.4rem .2rem}
.ptbl__h{font-weight:800; color:var(--ink); border-bottom:1px solid var(--line)}
.ptbl__r{color:var(--text2); border-bottom:1px solid var(--line)}
.ptbl__r:last-child{border-bottom:0}
.ptbl em{font-style:normal; font-size:.68rem; font-weight:800; padding:.18rem .45rem; border-radius:999px}
.psheet{position:absolute; left:0; right:0; bottom:0; z-index:7; background:#fff;
  border-radius:1.5rem 1.5rem 0 0; padding:1rem 1rem 1.1rem; box-shadow:0 -1rem 2.4rem rgba(0,0,0,.22);
  transform:translateY(102%); transition:transform .42s var(--ease); display:flex; flex-direction:column; gap:.3rem}
.phone.sheet .psheet{transform:none}
.phone.sheet .phone__scr::after{content:''; position:absolute; inset:0; background:rgba(17,17,17,.34)}
.psheet__hd{display:flex; align-items:center; gap:.6rem; font-size:1rem; color:var(--ink); font-weight:700;
  margin-bottom:.3rem}
.psheet__x{margin-left:auto; color:var(--muted)}
.psheet__x .ico{width:1rem; height:1rem}
.psheet__l{font-size:.72rem; color:var(--text2); margin-top:.35rem}
.psheet__seg{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
.psheet__seg i{font-style:normal; text-align:center; font-size:.8rem; font-weight:800; color:var(--text2);
  border:1px solid var(--line); border-radius:.7rem; padding:.5rem}
.psheet__seg i.on{border-color:var(--orange); background:var(--orange-t); color:var(--orange-d)}
.psheet__2{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
.psheet u,.psheet__u{text-decoration:none; display:block; font-size:.82rem; color:var(--text);
  border:1px solid var(--line); border-radius:.7rem; padding:.5rem .6rem}
.psheet__u--ta{color:var(--muted); min-height:3rem}
.psheet__ft{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.6rem}
.psheet__ft i,.psheet__ft b{font-style:normal; text-align:center; font-size:.9rem; font-weight:800;
  padding:.62rem; border-radius:1.2rem}
.psheet__ft i{border:1.5px solid var(--ink); color:var(--ink)}
.psheet__ft b{background:var(--teal); color:#fff}
.phone__tabs{position:absolute; left:.7rem; right:.7rem; bottom:.7rem; height:3.5rem; z-index:5;
  background:var(--orange); border-radius:1.4rem; display:grid;
  grid-template-columns:1fr 1fr 1.2fr 1fr 1fr; align-items:center; box-shadow:0 .6rem 1.4rem rgba(255,116,0,.35)}
.phone__tabs button{display:flex; flex-direction:column; align-items:center; gap:.15rem; color:#fff;
  font-size:.6rem; font-weight:700; opacity:.85; transition:opacity .2s, transform .2s var(--ease)}
.phone__tabs button:hover{opacity:1; transform:translateY(-2px)}
.phone__tabs button.on{opacity:1}
.phone__tabs .ico{width:1.1rem; height:1.1rem}
.phone__qr{width:3rem; height:3rem; border-radius:50%; background:var(--orange); border:.22rem solid #fff;
  display:grid; place-items:center; color:#fff; justify-self:center; margin-top:-1.2rem;
  box-shadow:0 .4rem 1rem rgba(217,26,50,.3)}
.phone__qr .ico{width:1.3rem; height:1.3rem}

.mtiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem}
.mtile{display:flex; flex-direction:column; align-items:center; gap:.45rem; padding:.85rem .4rem;
  border:1px solid var(--line); border-radius:1rem; font-size:.8rem; font-weight:700; color:var(--text2);
  text-align:center; transition:border-color .2s, transform .2s var(--ease)}
.mtile:hover{border-color:var(--teal); transform:translateY(-3px)}
.mtile span{width:2.3rem; height:2.3rem; border-radius:.7rem; display:grid; place-items:center; color:#fff}
.mtile .ico{width:1.15rem; height:1.15rem}
.dept--mini .deptr{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; font-size:.86rem}
.expchips{display:flex; gap:.5rem; padding-top:.8rem; border-top:1px solid var(--line)}
.expchips span{display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700;
  color:var(--text2); background:var(--rowhl); border:1px solid var(--line); padding:.35rem .7rem; border-radius:.6rem}
.expchips .ico{width:.95rem; height:.95rem; color:var(--teal)}
.setrow{display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-top:1px solid var(--line)}
.setrow>.ico{width:1.3rem; height:1.3rem; color:var(--teal); flex:none}
.setrow div{flex:1; min-width:0}
.setrow b{display:block; font-size:.92rem; color:var(--ink); font-weight:800}
.setrow span{display:block; font-size:.8rem; color:var(--text2)}
.sw{width:2.2rem; height:1.25rem; border-radius:999px; background:var(--line); position:relative; flex:none}
.sw::after{content:''; position:absolute; top:.15rem; left:.15rem; width:.95rem; height:.95rem; border-radius:50%;
  background:#fff; transition:left .25s var(--ease)}
.sw.on{background:var(--teal)}
.sw.on::after{left:1.1rem}

/* ---------- tres pasos ---------- */
.steps3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem; margin-top:2.4rem}
.s3{background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.8rem 1.6rem;
  transition:transform .28s var(--ease), box-shadow .28s}
.s3:hover{transform:translateY(-5px); box-shadow:var(--sh-lift)}
.s3__n{display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:.85rem;
  background:var(--g-naranja); color:#fff; font-weight:900; font-size:1.1rem; margin-bottom:1rem}
.s3 b{display:block; font-size:1.1rem; color:var(--ink); font-weight:800; margin-bottom:.4rem}
.s3 p{font-size:.95rem; color:var(--text2); line-height:1.6}
.bgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- línea de tiempo ---------- */
.tline{position:relative; max-width:62rem; margin:3rem auto 0}
.tline__rail{position:absolute; left:50%; top:0; bottom:0; width:11rem; margin-left:-5.5rem;
  pointer-events:none}
.tline__rail svg{width:100%; height:100%; display:block; overflow:visible}
.tline__rail .rail-bg{fill:none; stroke:#ECECEE; stroke-width:17; stroke-linecap:round;
  stroke-linejoin:round}
.tline__rail .rail-fg{fill:none; stroke:url(#gRail); stroke-width:17; stroke-linecap:round;
  stroke-linejoin:round; transition:stroke-dashoffset .25s linear}
.tl{position:relative; width:calc(50% - 4.2rem); margin-bottom:2.8rem}
.tl:nth-child(odd){margin-left:0; text-align:right}
.tl:nth-child(even){margin-left:calc(50% + 4.2rem)}
.tl:last-child{margin-bottom:0}
.tl__d{position:absolute; top:1.8rem; width:1.5rem; height:1.5rem; border-radius:50%;
  background:#fff; border:4px solid var(--faint); z-index:2; box-shadow:0 0 0 4px #fff;
  transition:border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s}
.tl:nth-child(odd) .tl__d{right:-4.95rem}
.tl:nth-child(even) .tl__d{left:-4.95rem}
.tl.on .tl__d{border-color:var(--orange); transform:scale(1.14);
  box-shadow:0 0 0 4px #fff, 0 0 0 .85rem var(--orange-t)}
.tl__c{background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.6rem 1.7rem;
  box-shadow:var(--sh-card); position:relative;
  transition:transform .32s var(--ease), box-shadow .32s, border-color .32s}
.tl__c:hover{transform:translateY(-5px); box-shadow:var(--sh-lift); border-color:transparent}
.tl__c::after{content:''; position:absolute; top:2.1rem; width:.85rem; height:.85rem; background:#fff;
  border:1px solid var(--line); transform:rotate(45deg)}
.tl:nth-child(odd) .tl__c::after{right:-.48rem; border-left:0; border-bottom:0}
.tl:nth-child(even) .tl__c::after{left:-.48rem; border-right:0; border-top:0}
.tl__y{display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:900;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; padding:.34rem .8rem; border-radius:.6rem;
  background:var(--g-naranja)}
.tl:nth-child(2) .tl__y{background:var(--g-calido)}
.tl:nth-child(3) .tl__y{background:var(--g-azul)}
.tl:nth-child(4) .tl__y{background:var(--g-verde)}
.tl:nth-child(5) .tl__y{background:var(--g-morado)}
.tl:nth-child(6) .tl__y{background:linear-gradient(135deg,#18B1A7 0%,#134073 100%)}
.tl__i{position:absolute; top:1.4rem; width:2.6rem; height:2.6rem; border-radius:.85rem;
  display:grid; place-items:center; color:#fff; background:var(--g-naranja); box-shadow:var(--sh-card)}
.tl:nth-child(odd) .tl__i{left:-1.3rem}
.tl:nth-child(even) .tl__i{right:-1.3rem}
.tl:nth-child(2) .tl__i{background:var(--g-calido)}
.tl:nth-child(3) .tl__i{background:var(--g-azul)}
.tl:nth-child(4) .tl__i{background:var(--g-verde)}
.tl:nth-child(5) .tl__i{background:var(--g-morado)}
.tl:nth-child(6) .tl__i{background:linear-gradient(135deg,#18B1A7 0%,#134073 100%)}
.tl b{display:block; font-size:1.25rem; color:var(--ink); font-weight:800; margin:.8rem 0 .5rem;
  letter-spacing:-.02em}
.tl p{font-size:.98rem; color:var(--text2); line-height:1.65}
.tl__t{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem}
.tl:nth-child(odd) .tl__t{justify-content:flex-end}
.tl__t span{font-size:.75rem; font-weight:700; color:var(--text2); background:var(--rowhl);
  border:1px solid var(--line); padding:.28rem .65rem; border-radius:.5rem}

/* ---------- mapa ---------- */
.mapwrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:2rem; align-items:center;
  margin-top:2.6rem; background:#fff; border:1px solid var(--line); border-radius:1.9rem;
  box-shadow:var(--sh-card); padding:1.8rem}
.mapwrap__map{display:grid; place-items:center}
.mapwrap__map{position:relative}
.mapwrap__map svg{width:100%; max-width:30rem; height:auto; overflow:hidden}
.mapinset{position:absolute; right:.2rem; top:.4rem; width:9.2rem; background:#fff;
  border:1px solid var(--line); border-radius:1rem; padding:.55rem .6rem .45rem; box-shadow:var(--sh-card)}
.mapinset svg{max-width:100%}
.mapinset em{font-style:normal; display:block; text-align:center; font-size:.7rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:.2rem}
.mapwrap__map path{fill:#E6E6EA; stroke:#fff; stroke-width:1.4; transition:fill .28s var(--ease), transform .28s var(--ease)}
.mapwrap__map path.on{fill:url(#gMap); cursor:pointer}
.mapwrap__map path.on:hover{fill:#0F8F87}
.mapwrap__map path.on.sel{fill:url(#gSel)}
.mcard{background:var(--rowhl); border:1px solid var(--line); border-radius:1.3rem; padding:1.3rem 1.4rem;
  min-height:9.5rem}
.mcard__k{display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal)}
.mcard b{display:block; font-size:1.35rem; color:var(--ink); font-weight:800; margin-top:.25rem}
.mcard p{font-size:.93rem; color:var(--text2); line-height:1.6; margin-top:.5rem}
.mlist{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; max-height:none}
.mlist li{list-style:none}
.mlist button{display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700;
  color:var(--text2); background:#fff; border:1px solid var(--line); padding:.38rem .75rem; border-radius:.7rem;
  transition:.2s}
.mlist button::before{content:''; width:.45rem; height:.45rem; border-radius:50%; background:var(--teal); flex:none}
.mlist button:hover{border-color:var(--teal); color:#0F7A73; background:var(--mint)}
.mlist button.on{border-color:var(--orange); color:var(--orange-d); background:var(--orange-t)}
.mlist button.on::before{background:var(--orange)}

/* ---------- contacto ---------- */
.cont{display:flex; flex-direction:column; gap:.8rem; margin-top:1.8rem}
.cont__i{display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line);
  border-radius:1.2rem; padding:1rem 1.2rem; transition:border-color .2s, transform .22s var(--ease)}
.cont__i:not(.cont__i--static):hover{border-color:var(--teal); transform:translateX(4px)}
.cont__i>span{width:2.6rem; height:2.6rem; border-radius:.8rem; background:var(--mint); color:var(--teal);
  display:grid; place-items:center; flex:none}
.cont__i b{display:block; font-size:.95rem; color:var(--ink); font-weight:800}
.cont__i em{font-style:normal; display:block; font-size:.95rem; color:var(--text2); overflow-wrap:anywhere}
.ccta{background:var(--ink); color:#D6D6D8; border-radius:1.8rem; padding:2rem; position:relative; overflow:hidden}
.ccta::before{content:''; position:absolute; top:-8rem; right:-8rem; width:20rem; height:20rem; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,116,0,.35),rgba(255,116,0,0) 70%)}
.ccta>*{position:relative}
.ccta h3{color:#fff; font-size:1.4rem}
.ccta p{font-size:.98rem; line-height:1.65; margin:.8rem 0 1.5rem; color:rgba(255,255,255,.76)}
.ccta__n{display:flex; align-items:center; gap:.5rem; justify-content:center; font-size:.82rem;
  color:#9A9A9C; margin-top:.9rem}
.ccta__n .ico{width:1rem; height:1rem; color:var(--teal)}

/* ---------- modal de bienvenida ---------- */
.wel{max-width:34rem; text-align:center}
.wel__top{padding:2.2rem 2rem .4rem}
.wel__logo{height:3.6rem; width:auto; margin:0 auto 1.3rem}
.wel h3{font-size:1.75rem; font-weight:800; color:var(--ink)}
.wel p{font-size:1rem; color:var(--text2); line-height:1.65; margin-top:.8rem}
.wel__box{margin:1.5rem 0 0; padding:1.1rem 1.2rem; border-radius:1.1rem; background:var(--mint);
  border:1px solid #BFE6E3; text-align:left; display:flex; gap:.85rem}
.wel__box .ico{color:var(--teal); flex:none; margin-top:.15rem}
.wel__ba{width:4.6rem; height:auto; flex:none; border-radius:.55rem; background:#fff;
  border:1px solid rgba(24,177,167,.22); padding:.25rem}
.wel__box b{display:block; color:var(--navy); font-size:.98rem}
.wel__box span{display:block; font-size:.9rem; color:#0F6F68; line-height:1.5; margin-top:.15rem}
.wel__acts{display:flex; gap:.8rem; padding:1.6rem 2rem 1.9rem; flex-wrap:wrap}
.wel__acts .btn{flex:1; min-width:12rem}

/* ---------- responsive de las páginas ---------- */
@media (max-width:1080px){
  .split{grid-template-columns:minmax(0,1fr); gap:2.2rem}
  .fgroup--rev .split>div:first-child{order:0}
  .hdr__acts{display:none}
  .steps3,.bgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mapwrap{grid-template-columns:minmax(0,1fr); gap:1.4rem}
  .mapwrap__map svg{max-width:22rem}
  .qcard--2,.qcard--3,.qcard--4{margin-left:0}
}
@media (max-width:820px){
  .phero{padding:8.5rem 0 2rem}
  .fgroup{padding:3.2rem 0}
  .flist{grid-template-columns:minmax(0,1fr)}
  .steps3,.bgrid--3{grid-template-columns:minmax(0,1fr)}
  .brands--big .brand{height:6.5rem}
  .vbox__meta{left:1.1rem; bottom:1.1rem}
  .vbox__meta b{font-size:.95rem}
  .vbox__play{width:4.4rem; height:4.4rem}
  .vbox__play svg{width:1.7rem; height:1.7rem}
  .mtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sched{grid-template-columns:minmax(0,1fr) auto; row-gap:.35rem}
  .sched em{grid-column:1/-1; text-align:left}
  .tline{max-width:none; padding-left:2.6rem}
  .tline__rail{left:0; margin-left:0; width:2rem}
  .tline__rail .rail-bg,.tline__rail .rail-fg{stroke-width:13}
  .tl{width:auto; margin-bottom:1.6rem}
  .tl:nth-child(odd),.tl:nth-child(even){margin-left:0; text-align:left}
  .tl:nth-child(odd) .tl__d,.tl:nth-child(even) .tl__d{left:-2.35rem; right:auto}
  .tl:nth-child(odd) .tl__c::after,.tl:nth-child(even) .tl__c::after{left:-.48rem; right:auto;
    border-right:0; border-top:0; border-left:1px solid var(--line); border-bottom:1px solid var(--line)}
  .tl:nth-child(odd) .tl__i,.tl:nth-child(even) .tl__i{left:auto; right:1rem; top:-1rem;
    width:2.2rem; height:2.2rem}
  .tl:nth-child(odd) .tl__t{justify-content:flex-start}
  .mapinset{position:static; width:auto; max-width:14rem; margin:.8rem auto 0}
  .wel__acts .btn{min-width:100%}
}
@media (max-width:620px){
  .cont__i{padding:.85rem 1rem}
  .ccta{padding:1.5rem}
  .fv{padding:1.2rem}
}

@media (max-width:620px){
  .btn{white-space:normal; height:auto; min-height:3.1rem; padding:.7rem 1.25rem; line-height:1.3;
    text-align:center}
  .btn--lg{min-height:3.5rem}
  .btn--sm{min-height:2.5rem; padding:.4rem 1rem}
  .ft li,.ft li a{overflow-wrap:anywhere}
  .cont__i em{overflow-wrap:anywhere}
}

.ptoast{position:absolute; left:50%; bottom:5.4rem; transform:translateX(-50%); z-index:9;
  background:rgba(24,24,23,.93); color:#fff; font-size:.8rem; font-weight:700; padding:.5rem .95rem;
  border-radius:.8rem; animation:rise .3s var(--ease) both; white-space:nowrap}
.setrow{width:100%; text-align:left; cursor:pointer}
.setrow:hover b{color:var(--teal)}

/* ---------- página de descargas ---------- */
.dlgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:1rem}
.dlcard{position:relative; background:#fff; border:1px solid var(--line); border-radius:1.75rem;
  padding:1.9rem 1.7rem 1.7rem; display:flex; flex-direction:column; gap:.55rem;
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s}
.dlcard:hover{transform:translateY(-7px); box-shadow:var(--sh-lift); border-color:transparent}
.dlcard__i{width:3.2rem; height:3.2rem; border-radius:1.05rem; display:grid; place-items:center; color:#fff;
  margin-bottom:.5rem}
.dlcard__tag{font-size:.7rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted)}
.dlcard b{font-size:1.3rem; color:var(--ink); font-weight:800; letter-spacing:-.02em}
.dlcard p{font-size:.95rem; color:var(--text2); line-height:1.6}
.dlcard__l{display:flex; flex-direction:column; gap:.5rem; margin:.7rem 0 1.4rem}
.dlcard__l li{display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--text2)}
.dlcard__l .ico{color:var(--teal); width:1rem; height:1rem; flex:none; margin-top:.18rem; stroke-width:2.8}
.dlcard .btn{margin-top:auto}
.dlnote{display:flex; gap:.9rem; align-items:flex-start; margin-top:2rem; padding:1.1rem 1.3rem;
  border-radius:1.2rem; background:var(--mint); border:1px solid #BFE6E3}
.dlnote .ico{color:var(--teal); flex:none; margin-top:.15rem}
.dlnote p{font-size:.92rem; color:#0F6F68; line-height:1.6}
@media (max-width:1080px){ .dlgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:820px){ .dlgrid{grid-template-columns:minmax(0,1fr)} }

/* ================= historias · problema vs. solución ================= */
.hist{background:var(--bg)}
.hist__hd{max-width:46rem}
.hist__eye{display:inline-flex; align-items:center; height:2rem; padding:0 .95rem; border-radius:999px;
  background:var(--mint); color:#0F6F68; font-size:.82rem; font-weight:800; letter-spacing:.01em;
  border:1px solid rgba(24,177,167,.25); margin-bottom:1rem}
.hist__hd .lead{margin-top:1rem}
.hist__body{display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:2.2rem;
  align-items:center; margin-top:2.6rem}

.hist__card{background:#fff; border:1px solid var(--line); border-radius:1.6rem; padding:1.8rem 1.7rem;
  box-shadow:var(--sh-card)}
.hist__k{display:inline-block; font-size:.78rem; font-weight:900; letter-spacing:.12em; color:#fff;
  background:var(--g-naranja); border-radius:.5rem; padding:.22rem .52rem}
.hist__t{display:block; font-size:1.3rem; font-weight:800; color:var(--ink); line-height:1.22;
  margin:.9rem 0 .7rem}
.hist__p{font-size:.95rem; color:var(--text2); line-height:1.6}
.hist__card .btn{margin-top:1.3rem; width:100%; justify-content:center}
.hist__card .btn .ico{width:1rem; height:1rem}
.hist__nav{display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; padding-top:1.1rem;
  border-top:1px solid var(--line); font-size:.86rem; font-weight:800; color:var(--text2)}
.hist__nav span{margin-left:auto; font-variant-numeric:tabular-nums}
.hist__ar{width:2.3rem; height:2.3rem; border-radius:50%; border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; color:var(--ink); flex:none;
  transition:border-color .2s, background .2s, transform .2s var(--ease)}
.hist__ar:hover{border-color:var(--orange); color:var(--orange); transform:translateY(-1px)}
.hist__ar .ico{width:1rem; height:1rem}
.hist__ar:first-child .ico{transform:rotate(180deg)}

.hist__railwrap{position:relative; min-width:0}
/* la tira se desvanece en los bordes: así se entiende que sigue, no que se corta */
.hist__rail{display:flex; gap:1rem; overflow-x:auto; padding:.4rem .2rem 1rem;
  scrollbar-width:none; cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3.2rem,#000 calc(100% - 3.2rem),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 3.2rem,#000 calc(100% - 3.2rem),transparent 100%)}
.hist__rail::-webkit-scrollbar{display:none}
.hist__rail.is-drag{cursor:grabbing; scroll-behavior:auto}
.hist__rail.is-drag .hcard{pointer-events:none}
.hist__sc{position:absolute; top:50%; width:2.9rem; height:2.9rem; border-radius:50%; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-lift); display:grid; place-items:center; z-index:3;
  color:var(--ink); transform:translateY(-50%); transition:transform .2s var(--ease), color .2s}
.hist__sc:hover{color:var(--orange); transform:translateY(-50%) scale(1.07)}
.hist__sc .ico{width:1.1rem; height:1.1rem}
.hist__sc--r{right:-.9rem}
.hist__sc--l{left:-.9rem}
.hist__sc--l .ico{transform:rotate(180deg)}


.hcard{position:relative; flex:0 0 auto; width:15.5rem; aspect-ratio:9/16; border-radius:1.3rem;
  overflow:hidden; background:#DDD; text-align:left; display:block; user-select:none;
  -webkit-user-drag:none;
  box-shadow:0 .5rem 1.4rem rgba(17,17,17,.12);
  transition:transform .3s var(--ease), box-shadow .3s}
.hcard:hover{transform:translateY(-6px); box-shadow:var(--sh-lift)}
.hcard.on{box-shadow:0 0 0 3px var(--orange), 0 .7rem 1.8rem rgba(17,17,17,.18)}
.hcard__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none}
.hcard__sh{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(17,17,17,.42) 0%,rgba(17,17,17,0) 32%,
    rgba(17,17,17,.12) 56%,rgba(17,17,17,.78) 100%)}
.hcard__k{position:absolute; top:.8rem; left:.8rem; font-size:.68rem; font-weight:900; color:#fff;
  letter-spacing:.06em; text-transform:uppercase; background:rgba(217,26,50,.9); border-radius:999px;
  padding:.28rem .6rem}
.hcard__t{position:absolute; left:.95rem; right:.95rem; bottom:.95rem; color:#fff; font-size:1rem;
  font-weight:800; line-height:1.25; text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hcard__pl{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:3.4rem; height:3.4rem;
  border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--orange);
  box-shadow:0 .4rem 1.2rem rgba(0,0,0,.26); transition:transform .3s var(--ease), background .25s}
.hcard__pl .ico{width:1.2rem; height:1.2rem; margin-left:.12rem}
.hcard:hover .hcard__pl{transform:translate(-50%,-50%) scale(1.12); background:#fff}

/* ---------- modal de la historia ---------- */
.mask--v{align-items:center}
.hmod{position:relative; max-width:60rem; display:grid; grid-template-columns:auto minmax(0,1fr);
  overflow:visible; border-radius:1.6rem}
.hmod__v{position:relative; background:#111; border-radius:1.6rem 0 0 1.6rem; overflow:hidden;
  height:min(76vh,38rem); aspect-ratio:9/16; flex:none}
.hmod__v video{width:100%; height:100%; object-fit:cover; display:block; background:#111}
.hmod__tag{position:absolute; top:1rem; left:1rem; z-index:2; font-size:.76rem; font-weight:900; color:#fff;
  letter-spacing:.05em; text-transform:uppercase; background:rgba(217,26,50,.92); border-radius:999px;
  padding:.38rem .85rem; backdrop-filter:blur(6px); pointer-events:none}
.hmod__tag--ok{background:rgba(24,177,167,.95)}
.hmod__i{position:relative; padding:2.2rem 2rem 1.8rem; display:flex; flex-direction:column;
  background:#fff; border-radius:0 1.6rem 1.6rem 0}
.hmod__i .modal__x{position:absolute; right:1.1rem; top:1.1rem}
.hseg{display:inline-flex; gap:.25rem; padding:.25rem; background:var(--chip); border-radius:999px;
  align-self:flex-start; margin:0 3rem .9rem 0}
.hseg button{font-size:.84rem; font-weight:800; color:var(--text2); padding:.48rem 1rem; border-radius:999px;
  transition:background .25s, color .25s, box-shadow .25s}
.hseg button.on{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(17,17,17,.14)}
.hseg button:first-child.on{color:var(--red)}
.hseg button:last-child.on{color:var(--teal)}
.hmod__k{font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted)}
.hmod__i h3{font-size:clamp(1.35rem,2.2vw,1.8rem); font-weight:800; color:var(--ink); line-height:1.18;
  margin:.5rem 0 .8rem}
.hmod__i p{font-size:1rem; color:var(--text2); line-height:1.68}
.hmod__ft{margin-top:auto; padding-top:1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.hmod__nav{display:flex; align-items:center; gap:.6rem; margin-left:auto; font-size:.85rem;
  font-weight:800; color:var(--text2); font-variant-numeric:tabular-nums}
.hmod.is-sol .hmod__i{background:linear-gradient(180deg,#F4FBFA 0%,#fff 46%)}

@media (max-width:1080px){
  .hist__body{grid-template-columns:minmax(0,1fr); gap:1.6rem}
  .hist__card{order:2}
  .hist__railwrap{order:1}
  .hist__sc--r{right:.2rem} .hist__sc--l{left:.2rem}
}
@media (max-width:820px){
  .hmod{grid-template-columns:minmax(0,1fr); max-width:26rem}
  .hmod__v{border-radius:1.6rem 1.6rem 0 0; aspect-ratio:9/13; height:auto; width:100%}
  .hmod__i{border-radius:0 0 1.6rem 1.6rem; padding:1.2rem 1.3rem 1.4rem}
  .hmod__i{position:static}
  .hmod__i .modal__x{position:absolute; top:.9rem; right:.9rem; z-index:4;
    background:rgba(255,255,255,.92); border-color:transparent;
    box-shadow:0 .3rem .9rem rgba(0,0,0,.25)}
  .hseg{display:grid; grid-template-columns:1fr 1fr; width:100%; margin:0 0 .9rem}
  .hseg button{padding:.52rem .5rem; white-space:nowrap}
  .hmod__i h3{margin:.4rem 0 .6rem}
  .hmod__ft{padding-top:1.1rem}
  .hmod__ft .btn{width:100%; justify-content:center}
  .hmod__nav{margin:0 auto}
  .mask--v{align-items:flex-start}
}
@media (max-width:620px){
  .hist__rail{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 1.4rem,#000 calc(100% - 1.4rem),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 1.4rem,#000 calc(100% - 1.4rem),transparent 100%)}
  .hist__sc{width:2.4rem; height:2.4rem}
  .hist__sc .ico{width:.95rem; height:.95rem}
  .hcard{width:13rem}
  .hist__card{padding:1.4rem 1.3rem}
  .hist__hd .h-lg br{display:none}
}

/* ---------- control de accesos: listado de puertas ---------- */
.doors{display:flex; flex-direction:column; gap:.5rem}
.door{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:'i t m s b' 'e e e e e';
  align-items:center; gap:.55rem .8rem; padding:.7rem .8rem; cursor:pointer;
  border:1px solid var(--line); border-radius:1rem; background:#fff;
  transition:border-color .25s, background .25s, box-shadow .25s}
.door:hover{border-color:var(--faint)}
.door__i{grid-area:i; width:2.3rem; height:2.3rem; border-radius:.7rem; flex:none;
  display:inline-grid; place-items:center; place-content:center; line-height:0;
  background:var(--chip); color:var(--text2); transition:background .3s, color .3s}
.door__i .ico{width:1.15rem; height:1.15rem; display:block}
.door__t{grid-area:t; min-width:0}
.door__t em{display:block; font-style:normal; font-size:.64rem; font-weight:900; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); line-height:1}
.door__t b{display:block; font-size:.93rem; color:var(--ink); font-weight:800; line-height:1.3}
.door__t span{display:block; font-size:.76rem; color:var(--text2); line-height:1.35}
.door__t u{display:block; text-decoration:none; font-size:.72rem; color:var(--muted);
  line-height:1.35}
.door__m{grid-area:m; font-size:.7rem; font-weight:800; color:var(--text2); background:var(--chip);
  border-radius:999px; padding:.26rem .6rem; white-space:nowrap}
.door__m--r{background:#F3EDF8; color:var(--purple)}
.door__st{grid-area:s; font-size:.74rem; font-weight:800; color:var(--text2); white-space:nowrap;
  min-width:5.4rem; text-align:right}
.door__b{grid-area:b; font-size:.74rem; font-weight:800; color:var(--teal); white-space:nowrap;
  border:1px solid rgba(24,177,167,.45); border-radius:999px; padding:.3rem .7rem; background:#fff;
  transition:background .25s, color .25s, border-color .25s}
.door:hover .door__b{background:var(--teal); color:#fff; border-color:transparent}
.door__ev{grid-area:e; display:none; align-items:center; gap:.5rem; margin-top:.15rem;
  padding:.45rem .6rem; border-radius:.7rem; font-size:.78rem; font-weight:600}
.door__ev i{width:.45rem; height:.45rem; border-radius:50%; flex:none}

/* abierta */
.door.on{border-color:rgba(24,177,167,.5); background:var(--mint)}
.door.on .door__i{background:var(--teal); color:#fff}
.door.on .door__st{color:var(--teal)}
.door.on .door__b{background:var(--teal); color:#fff; border-color:transparent}
.door.on .door__ev{display:flex; background:#fff; color:#0F6F68; animation:rise .34s var(--ease) both}
.door.on .door__ev i{background:var(--teal)}

/* denegada */
.door.no{border-color:rgba(217,26,50,.42); background:#FDF1F2}
.door.no .door__i{background:var(--red); color:#fff}
.door.no .door__st{color:#C4162B}
.door.no .door__b{background:#fff; color:#C4162B; border-color:rgba(217,26,50,.4)}
.door.no .door__ev{display:flex; background:#fff; color:#C4162B; animation:rise .34s var(--ease) both}
.door.no .door__ev i{background:var(--red)}

/* el picaporte se mueve al abrir */
.door.on .door__i .ico{animation:dswing .5s var(--ease)}
.door.no .door__i .ico{animation:dshake .42s ease}
@keyframes dswing{0%{transform:rotate(0) scale(1)} 45%{transform:rotate(-13deg) scale(1.1)}
  100%{transform:rotate(0) scale(1)}}
@keyframes dshake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)}
  60%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){
  .door.on .door__i .ico,.door.no .door__i .ico{animation:none}
}
@media (max-width:620px){
  .door{grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:'i t t' 'm s b' 'e e e'; row-gap:.55rem; align-items:center}
  .door__i{align-self:start}
  .door__m{justify-self:start}
  .door__st{justify-self:end; min-width:0; white-space:normal; text-align:right}
  .door__b{justify-self:end}
}

/* ---------- portada del brochure en la tarjeta de descargas ---------- */
.dlcard--pdf{padding-top:1.3rem}
.dlcover{display:block; width:8.4rem; margin-bottom:1.1rem; border-radius:.7rem; overflow:hidden;
  box-shadow:0 .5rem 1.4rem rgba(17,17,17,.16); border:1px solid var(--line);
  transition:transform .28s var(--ease), box-shadow .28s}
.dlcover:hover{transform:translateY(-4px) rotate(-1.2deg); box-shadow:var(--sh-lift)}
.dlcover img{display:block; width:100%; height:auto}

/* ---------- «menos tareas manuales»: las tareas se van tachando solas ---------- */
.less{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1.6rem;
  margin:2.4rem 0 0; padding:1.8rem; border-radius:1.6rem; background:#fff;
  border:1px solid var(--line); box-shadow:var(--sh-card)}
.less__hd{margin-bottom:1rem}
.less__hd b{display:block; font-size:1.1rem; font-weight:800; color:var(--ink)}
.less__hd span{display:block; font-size:.86rem; color:var(--muted); margin-top:.1rem}
.less__ul{display:flex; flex-direction:column; gap:.5rem}
.lessi{display:flex; align-items:center; gap:.7rem; padding:.7rem .85rem; border-radius:.9rem;
  background:var(--rowhl); border:1px solid var(--line); font-size:.92rem; color:var(--text);
  transition:background .35s, border-color .35s, color .35s}
.lessi__c{width:1.35rem; height:1.35rem; border-radius:50%; border:2px solid var(--faint); flex:none;
  display:grid; place-items:center; transition:background .35s, border-color .35s}
.lessi__c .ico{width:.8rem; height:.8rem; color:#fff; opacity:0; transition:opacity .3s}
.lessi__t{flex:1; min-width:0; position:relative}
.lessi__t::after{content:''; position:absolute; left:0; top:52%; height:2px; width:0;
  background:var(--teal); transition:width .45s var(--ease)}
.lessi__h{font-weight:800; color:var(--text2); font-variant-numeric:tabular-nums; flex:none}
.lessi.off{background:var(--mint); border-color:rgba(24,177,167,.3); color:var(--muted)}
.lessi.off .lessi__c{background:var(--teal); border-color:var(--teal)}
.lessi.off .lessi__c .ico{opacity:1}
.lessi.off .lessi__t::after{width:100%}
.lessi.off .lessi__h{color:var(--teal)}
.less__r{display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:1.4rem 1.2rem; border-radius:1.3rem; background:var(--g-kpi); color:#fff}
.less__k{font-size:.78rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.less__n{display:flex; align-items:baseline; gap:.25rem; margin:.3rem 0 .2rem}
.less__n i{font-style:normal; font-size:clamp(3rem,6vw,4.4rem); font-weight:900; line-height:1;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.less__n u{text-decoration:none; font-size:1.4rem; font-weight:800; opacity:.8}
.less__f{font-size:.86rem; color:rgba(255,255,255,.78); line-height:1.45; max-width:15rem}
.less__bar{width:100%; height:.4rem; border-radius:999px; background:rgba(255,255,255,.22);
  margin-top:1.1rem; overflow:hidden}
.less__bar i{display:block; height:100%; width:0; border-radius:999px; background:#fff;
  transition:width .5s var(--ease)}
@media (max-width:820px){
  .less{grid-template-columns:minmax(0,1fr); padding:1.3rem}
  .less__r{padding:1.2rem}
}

/* ---------- título de la tarjeta de BioConnect ---------- */
.pipe__hd{margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.12)}
.pipe__hd b{display:block; font-size:1.05rem; font-weight:800; color:#fff}
.pipe__hd span{display:block; font-size:.85rem; color:rgba(255,255,255,.6); margin-top:.15rem}