/* Sitio de eClinic. Paleta K2B Health (índigo #404397, cian #23a4dc, verde agua #53bcb4).
   Tipografía «Medical Clean» (Figtree + Noto Sans). Escala de espacio de 8 px. */
:root{
  --bg:#ffffff; --bg-alt:#f5f6fb; --surface:#ffffff; --surface-2:#eef0f9;
  --fg:#16183a; --muted:#4f5373; --line:#e2e4f0; --line-2:#cfd3e6;
  --brand:#404397; --brand-600:#363a86; --brand-ink:#ffffff; --brand-soft:#ecedfa;
  --accent:#1784b8; --teal:#227d76; --ok:#1f7a45;
  /* Termina en #1a77a8 y no en el cian de marca: el texto blanco encima necesita 4.5:1. */
  --grad:linear-gradient(135deg,#404397 0%,#2f63a8 55%,#1a77a8 100%);
  --sombra-1:0 1px 2px rgba(22,24,58,.06),0 1px 3px rgba(22,24,58,.08);
  --sombra-2:0 12px 32px -12px rgba(40,44,120,.28),0 2px 6px rgba(22,24,58,.06);
  --sombra-3:0 30px 60px -24px rgba(40,44,120,.45);
  --r-1:8px; --r-2:12px; --r-3:20px;
  --f-display:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-body:"Noto Sans","Segoe UI",system-ui,sans-serif;
  --t-rapido:160ms; --t-medio:280ms; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1027; --bg-alt:#14163a; --surface:#1a1c42; --surface-2:#22255a;
    --fg:#eceefe; --muted:#b0b4d6; --line:#2c3064; --line-2:#3a3f7a;
    --brand:#a4a8f5; --brand-600:#b7baf8; --brand-ink:#0f1027; --brand-soft:#262a63;
    --accent:#6fcdf3; --teal:#72d6cc; --ok:#7ad8a0;
    --sombra-1:none; --sombra-2:0 12px 32px -12px rgba(0,0,0,.6); --sombra-3:0 30px 60px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1027; --bg-alt:#14163a; --surface:#1a1c42; --surface-2:#22255a;
  --fg:#eceefe; --muted:#b0b4d6; --line:#2c3064; --line-2:#3a3f7a;
  --brand:#a4a8f5; --brand-600:#b7baf8; --brand-ink:#0f1027; --brand-soft:#262a63;
  --accent:#6fcdf3; --teal:#72d6cc; --ok:#7ad8a0;
  --sombra-1:none; --sombra-2:0 12px 32px -12px rgba(0,0,0,.6); --sombra-3:0 30px 60px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:17px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display); line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
a{color:var(--brand); text-underline-offset:3px}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0; padding:0}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
.ico{width:20px; height:20px; flex:none}
.ancho{max-width:1200px; margin-inline:auto; padding-inline:16px}
@media (min-width:768px){ .ancho{padding-inline:32px} }
.saltar{position:absolute; left:16px; top:-48px; z-index:100; background:var(--brand); color:var(--brand-ink); padding:10px 16px; border-radius:var(--r-1); font-weight:700}
.saltar:focus{top:12px}
.eyebrow{font-family:var(--f-display); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:12px}

/* Botones: mínimo 44 px de alto */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; border-radius:var(--r-2); background:var(--brand); color:var(--brand-ink); font-family:var(--f-display); font-weight:700; font-size:16px; text-decoration:none; border:2px solid var(--brand); cursor:pointer; transition:background var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease); box-shadow:var(--sombra-1)}
.btn:hover{background:var(--brand-600); border-color:var(--brand-600); box-shadow:var(--sombra-2)}
.btn:active{transform:scale(.98)}
.btn .ico{width:18px; height:18px}
.btn-sec{background:var(--surface); color:var(--brand); border-color:var(--line-2); box-shadow:none}
.btn-sec:hover{background:var(--brand-soft); border-color:var(--brand); color:var(--brand)}
.btn-chico{min-height:44px; padding:8px 16px; font-size:15px}
.btn-inv{background:#fff; color:#2c2f7a; border-color:#fff}
.btn-inv:hover{background:#eef0ff; border-color:#eef0ff; color:#2c2f7a}

/* Barra */
.barra{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.barra-in{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px}
.marca{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--fg); min-height:44px}
.logo{height:40px; width:auto; display:block}
.logo-cta{height:52px; width:auto; margin:0 auto 28px}
.marca-prod{font-family:var(--f-display); font-weight:800; font-size:21px; padding-left:14px; border-left:1px solid var(--line-2); letter-spacing:-.02em}
.nav{display:flex; align-items:center; gap:4px}
.nav a:not(.btn){display:inline-flex; align-items:center; min-height:44px; padding:0 14px; color:var(--muted); text-decoration:none; font-weight:500; font-size:15px; border-radius:var(--r-1); transition:color var(--t-rapido), background var(--t-rapido)}
.nav a:not(.btn):hover{color:var(--fg); background:var(--surface-2)}
.nav a[aria-current]{color:var(--brand); font-weight:700}
.nav .btn{margin-left:8px}
@media (max-width:820px){ .nav a:not(.btn){display:none} .logo{height:34px} }

/* Hero */
.hero{position:relative; padding:56px 0 40px; overflow:hidden; background:
  radial-gradient(60% 60% at 85% 10%, color-mix(in srgb, #23a4dc 16%, transparent), transparent 70%),
  radial-gradient(50% 50% at 0% 0%, color-mix(in srgb, #404397 14%, transparent), transparent 70%), var(--bg)}
.hero-in{display:grid; gap:40px; align-items:center}
@media (min-width:1024px){ .hero{padding:80px 0 56px} .hero-in{grid-template-columns:1fr 1.15fr; gap:56px} }
.hero h1{font-size:clamp(34px, 5.2vw, 56px); font-weight:800; letter-spacing:-.025em}
.lead{font-size:clamp(18px, 2vw, 21px); color:var(--muted); margin-top:20px; max-width:56ch}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-nota{margin-top:16px; color:var(--muted); font-size:15px}
.hero-img .marco{box-shadow:var(--sombra-3)}
@media (min-width:1024px){ .hero-img{margin-right:-48px} .hero-img .marco{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg)} }
.confianza{list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--line)}
.confianza li{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:500; font-size:15px}
.confianza .ico{color:var(--teal); width:18px; height:18px}

/* Marco de navegador para las capturas */
.marco{margin:0; border-radius:var(--r-2); overflow:hidden; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--sombra-2)}
.marco-barra{display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; background:var(--surface-2); border-bottom:1px solid var(--line)}
.marco-barra span{width:10px; height:10px; border-radius:50%; background:var(--line-2)}
.marco-barra i{margin-left:12px; font-style:normal; font-size:12px; color:var(--muted); background:var(--surface); border-radius:6px; padding:2px 12px; flex:1; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.marco img{aspect-ratio:16/10; width:100%; object-fit:cover; object-position:top left}

/* Secciones */
.seccion{padding:72px 0}
@media (min-width:1024px){ .seccion{padding:104px 0} }
.seccion.alt{background:var(--bg-alt)}
.seccion h2{font-size:clamp(28px, 3.6vw, 42px); font-weight:800}
.cab{max-width:760px; margin-bottom:48px}
.sub{color:var(--muted); font-size:18px; margin-top:16px}

.problema{display:grid; gap:32px}
@media (min-width:900px){ .problema{grid-template-columns:1fr 1fr; gap:72px; align-items:start} }
.problema-txt{display:grid; gap:20px; color:var(--muted); font-size:18px}
.problema-txt strong{color:var(--fg)}

/* Pasos del recorrido */
.pasos{list-style:none; display:grid; gap:16px; counter-reset:paso}
@media (min-width:640px){ .pasos{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .pasos{grid-template-columns:repeat(5,1fr)} }
.pasos li{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); padding:24px}
/* Conector entre pasos en escritorio: refuerza que es una secuencia. */
@media (min-width:1024px){ .pasos li:not(:last-child)::after{content:""; position:absolute; top:46px; right:-17px; width:18px; height:2px; background:var(--line-2)} }
.paso-ico{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-2); background:var(--brand-soft); color:var(--brand); margin-bottom:16px}
.paso-ico .ico{width:22px; height:22px}
.paso-n{display:block; font-size:13px; font-weight:700; color:var(--teal); letter-spacing:.04em; margin-bottom:6px}
.pasos h3{font-size:20px; margin-bottom:8px}
.pasos p{color:var(--muted); font-size:16px}
.nota{display:flex; gap:10px; align-items:center; margin-top:24px; color:var(--muted)}
.nota .ico{color:var(--teal)}

/* Video */
.video{display:grid; gap:0; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-3); overflow:hidden; box-shadow:var(--sombra-3)}
@media (min-width:1024px){ .video{grid-template-columns:1fr 300px} }
.video-pantalla{background:#0b0c1e}
.video video{display:block; width:100%; aspect-ratio:16/9; background:#0b0c1e}
.capitulos{border-top:1px solid var(--line); max-height:280px; overflow:auto}
@media (min-width:1024px){ .capitulos{border-top:0; border-left:1px solid var(--line); max-height:none; position:relative} .capitulos ol{position:absolute; inset:44px 0 0 0; overflow:auto} }
.capitulos-tit{font-family:var(--f-display); font-weight:700; font-size:14px; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface)}
.capitulos ol{list-style:none; padding:6px}
.capitulos button{width:100%; min-height:44px; text-align:left; display:flex; gap:12px; align-items:center; background:none; border:0; padding:8px 10px; border-radius:var(--r-1); font:inherit; font-size:15px; line-height:1.35; color:var(--fg); cursor:pointer; transition:background var(--t-rapido)}
.capitulos button:hover{background:var(--surface-2)}
.capitulos button[aria-current]{background:var(--brand-soft); color:var(--brand); font-weight:700}
.capitulos .t{font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; min-width:34px}
.transcripcion{margin-top:20px}
.transcripcion summary{display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:var(--brand); font-weight:700}
.transcripcion div{display:grid; gap:12px; margin-top:12px; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); color:var(--muted); font-size:16px; max-width:820px}

/* Módulos: bloques alternados */
.features{display:grid; gap:72px}
@media (min-width:1024px){ .features{gap:112px} }
.feature{display:grid; gap:32px; align-items:center}
@media (min-width:1024px){ .feature{grid-template-columns:5fr 7fr; gap:64px} .feature.invertido{grid-template-columns:7fr 5fr} .feature.invertido .feature-txt{order:2} }
.feature-etq{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-family:var(--f-display); font-weight:700; font-size:14px; margin-bottom:16px}
.feature h3{font-size:clamp(24px, 2.8vw, 32px); font-weight:800; margin-bottom:12px}
.feature-txt > p{color:var(--muted)}
.checks{list-style:none; display:grid; gap:10px; margin-top:20px}
.checks li{display:flex; gap:10px; align-items:flex-start}
.checks .ico{color:var(--ok); width:20px; height:20px; margin-top:3px}
.mas{display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:16px; font-weight:700; text-decoration:none}
.mas .ico{transition:transform var(--t-rapido) var(--ease)}
.mas:hover .ico{transform:translateX(3px)}
.opcion{display:flex; gap:20px; align-items:flex-start; margin-top:72px; padding:28px; border:1px dashed var(--line-2); border-radius:var(--r-3); background:var(--bg-alt)}
.opcion-ico{display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-2); background:var(--surface); color:var(--teal); flex:none; border:1px solid var(--line)}
.opcion h3{font-size:20px; margin-bottom:8px}
.opcion p:last-child{color:var(--muted)}

/* Bento de beneficios */
.bento{display:grid; gap:16px}
@media (min-width:640px){ .bento{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .bento{grid-template-columns:repeat(4,1fr)} .bento .ancho2{grid-column:span 2} }
.celda{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); padding:28px; transition:border-color var(--t-medio) var(--ease), box-shadow var(--t-medio) var(--ease)}
.celda:hover{border-color:var(--line-2); box-shadow:var(--sombra-2)}
.celda-ico{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-2); background:var(--brand-soft); color:var(--brand); margin-bottom:16px}
.celda h3{font-size:19px; margin-bottom:8px}
.celda p{color:var(--muted); font-size:16px}
.celda.ancho2:first-child{background:var(--grad); border-color:transparent; color:#fff}
.celda.ancho2:first-child p{color:rgba(255,255,255,.88)}
.celda.ancho2:first-child .celda-ico{background:rgba(255,255,255,.16); color:#fff}

/* Casos */
.casos-in{display:grid; gap:24px}
@media (min-width:1024px){ .casos-in{grid-template-columns:4fr 8fr; gap:64px; align-items:start} .casos-in .cab{margin-bottom:0} }
.casos{list-style:none; display:grid; gap:16px}
@media (min-width:640px){ .casos{grid-template-columns:repeat(2,1fr)} }
.casos li{padding:24px; border-radius:var(--r-3); background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent)}
.casos li:nth-child(even){border-left-color:var(--teal)}
.casos h3{font-size:18px; margin-bottom:6px}
.casos p{color:var(--muted); font-size:16px}

/* Modelo */
.dos{display:grid; gap:20px}
@media (min-width:900px){ .dos{grid-template-columns:1fr 1fr} }
.tarjeta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-3); padding:32px}
.tarjeta h2{font-size:clamp(24px, 2.6vw, 30px); margin-bottom:12px}
.tarjeta > p{color:var(--muted)}
.tarjeta-sutil{background:transparent; border-style:dashed}

/* CTA */
.cta{background:var(--grad); color:#fff; padding:80px 0; text-align:center}
.cta h2{font-size:clamp(30px, 4vw, 46px); font-weight:800; margin-bottom:12px}
.cta p{color:rgba(255,255,255,.9); font-size:19px; margin:0 auto 32px; max-width:52ch}
:root .cta :focus-visible{outline-color:#fff}

/* Pie */
.pie{padding:48px 0 32px; border-top:1px solid var(--line)}
.pie-in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px}
.pie-marca{max-width:360px; color:var(--muted); font-size:15px}
.pie-marca .logo{height:36px; margin-bottom:12px}
.pie-nav{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center}
.pie-nav a{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 10px; color:var(--muted); text-decoration:none; font-size:15px}
.pie-nav a:hover{color:var(--brand)}
.pie-legal{margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:14px}

/* Aparición al hacer scroll (sólo si el JS lo habilita y no hay movimiento reducido) */
.anima .revela{opacity:0; transform:translateY(16px); transition:opacity 500ms var(--ease), transform 500ms var(--ease)}
.anima .revela.visto{opacity:1; transform:none}

/* ── Catálogo ── */
.cat-cab{padding:56px 0 40px; background:var(--bg-alt); border-bottom:1px solid var(--line)}
.cat-cab h1{font-size:clamp(32px, 4.5vw, 48px); font-weight:800}
.cat-cab .lead{margin-top:12px}
.buscador{margin-top:28px; max-width:640px}
.buscador label{display:block; font-weight:700; font-size:15px; margin-bottom:8px}
.buscador-campo{position:relative}
.buscador-campo .ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted)}
.buscador input{width:100%; min-height:52px; padding:12px 16px 12px 44px; border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surface); color:var(--fg); font:inherit; font-size:17px; transition:border-color var(--t-rapido), box-shadow var(--t-rapido)}
.buscador input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent)}
.q-estado{margin-top:8px; color:var(--muted); font-size:15px; min-height:1.5em}
.cat-cuerpo{display:grid; gap:32px; padding-top:40px; padding-bottom:80px}
@media (min-width:1024px){ .cat-cuerpo{grid-template-columns:260px 1fr; gap:48px} }
.indice{align-self:start}
@media (min-width:1024px){ .indice{position:sticky; top:96px} }
.indice-tit{font-family:var(--f-display); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.indice ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px}
@media (min-width:1024px){ .indice ul{flex-direction:column; gap:2px} }
.indice ul a{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border-radius:var(--r-1); text-decoration:none; color:var(--fg); font-weight:500; font-size:15px; border:1px solid var(--line); background:var(--surface)}
@media (min-width:1024px){ .indice ul a{border-color:transparent; background:none} }
.indice ul a:hover{background:var(--surface-2)}
.indice ul a[aria-current]{background:var(--brand-soft); color:var(--brand); font-weight:700}
.indice ul a .ico{color:var(--brand); width:18px; height:18px}
.indice ul a b{margin-left:auto; font-weight:500; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.indice-cta{margin-top:20px; width:100%; display:none}
@media (min-width:1024px){ .indice-cta{display:inline-flex} }
.cat-mod{scroll-margin-top:96px}
.cat-mod + .cat-mod{margin-top:72px}
.cat-mod-cab{display:flex; gap:16px; align-items:flex-start; padding-bottom:20px; border-bottom:2px solid var(--brand); margin-bottom:8px}
.cat-mod-ico{display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-2); background:var(--brand-soft); color:var(--brand); flex:none}
.cat-mod-ico .ico{width:24px; height:24px}
.cat-mod h2{font-size:clamp(24px, 3vw, 32px); font-weight:800}
.cat-mod-cab p{color:var(--muted); margin-top:6px; max-width:72ch}
.grupo h3{font-family:var(--f-display); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin:36px 0 12px}
.item{display:grid; gap:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-2); padding:24px; scroll-margin-top:96px; transition:border-color var(--t-rapido), box-shadow var(--t-rapido)}
.item + .item{margin-top:12px}
.item:hover{border-color:var(--line-2); box-shadow:var(--sombra-1)}
@media (min-width:768px){ .item:has(.item-caps){grid-template-columns:1fr 300px; align-items:start} }
.item h4{font-size:19px; font-weight:700; margin-bottom:6px}
.item .resumen{color:var(--muted)}
.item details{margin-top:8px}
.item summary{display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:var(--brand); font-weight:700; font-size:15px}
.detalle{display:grid; gap:10px; font-size:16px; color:var(--muted); padding:4px 0 4px 16px; border-left:2px solid var(--line-2)}
.detalle ul{padding-left:20px; display:grid; gap:4px}
.envideo{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; font-size:15px; text-decoration:none}
.envideo .ico{width:16px; height:16px}
.item-caps{display:grid; gap:10px}
.miniatura{display:block; width:100%; padding:0; border:1px solid var(--line-2); border-radius:var(--r-1); overflow:hidden; cursor:zoom-in; background:var(--surface-2); transition:box-shadow var(--t-rapido), transform var(--t-rapido) var(--ease)}
.miniatura:hover{box-shadow:var(--sombra-2); transform:translateY(-1px)}
.miniatura img{aspect-ratio:16/10; width:100%; object-fit:cover; object-position:top left}
.sin-resultados{padding:32px; text-align:center; color:var(--muted); border:1px dashed var(--line-2); border-radius:var(--r-2)}
[hidden]{display:none!important}

/* Lupa */
dialog#lupa{width:min(1400px, 96vw); max-height:94vh; padding:0; border:0; border-radius:var(--r-3); background:var(--surface); color:var(--fg); box-shadow:var(--sombra-3); overflow:hidden}
dialog#lupa::backdrop{background:rgba(8,9,24,.78); backdrop-filter:blur(2px)}
.lupa-cab{display:flex; align-items:center; gap:12px; padding:10px 10px 10px 20px; border-bottom:1px solid var(--line)}
.lupa-cab p{flex:1; font-size:15px; color:var(--muted)}
.lupa-n{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
dialog#lupa img{max-height:calc(94vh - 130px); width:auto; max-width:100%; margin:0 auto}
.lupa-nav{display:flex; justify-content:center; gap:12px; padding:10px; border-top:1px solid var(--line)}
.lupa-btn{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); color:var(--fg); cursor:pointer}
.lupa-btn:hover{background:var(--surface-2)}