/* ============================================================
   TBC · tbc.css — ÚNICA fuente de verdad estética
   Ecosistema The BIM Co-Work · Fase 1
   Sistema replicado 1:1 del diseño canónico "METODO TBC"
   (Home.html · claude.ai/design 71e2ca96) por orden de Rafael.
   Oscuro · Helvetica · bordes duros sin radius · magenta.
   ============================================================ */

:root{
  --bg:#0a0a0b;
  --card:#141416;
  --card-2:#1a1a1d;
  --line:#262629;
  --line-soft:#1e1e21;
  --fg:#f4f2ee;
  --fg-mid:#b6b4b0;
  --fg-soft:#7d7b78;
  --pink:#ED1B69;
  --pink-soft:rgba(237,27,105,.12);
  --green:#25D366;
  --font-sans:'Helvetica Neue','Helvetica','Arial',sans-serif;
  --font-mono:'Helvetica Neue','Helvetica','Arial',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.005em;
  line-height:1.4;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
/* Los button NO heredan tipografía ni color por defecto (bug letras negras) */
button{font-family:inherit;color:inherit;letter-spacing:inherit;}

/* ---------- Columna de app ---------- */
.app{
  max-width:430px;margin:0 auto;
  background:var(--bg);
  padding:0 24px;
  border-left:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
}
.block{padding:46px 0;border-top:1px solid var(--line-soft);scroll-margin-top:84px;}
.block:first-child{border-top:none;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,11,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .row{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  height:62px;max-width:1080px;margin:0 auto;padding:0 24px;
}
.brand{display:flex;align-items:center;gap:12px;margin-left:auto;}
.topbar .cw-mark{font-size:8px;padding:5px 7px;letter-spacing:.02em;}
.brand .nm{font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);}
.topnav{display:flex;align-items:center;gap:4px;}
.topnav .lnk{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mid);
  padding:10px 12px;transition:color .15s;
}
.topnav .lnk:hover,.topnav .lnk[aria-current="page"]{color:var(--fg);}
.navbtn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--pink);color:#fff;
  font-family:var(--font-sans);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:11px 16px;transition:background .15s;
}
.navbtn:hover{background:#ff2b78;}
/* Inscribirse = CTA magenta primario; Campus virtual = secundario (ghost). */
.navbtn:not(.navbtn--insc){background:transparent;color:var(--fg);border:1.5px solid var(--line);}
.navbtn:not(.navbtn--insc):hover{background:transparent;border-color:var(--pink);color:var(--pink);}
@media(max-width:600px){
  .topbar .row{height:56px;padding:0 18px;}
  .brand .nm{display:none;}
  .topnav{gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;}
  .topnav::-webkit-scrollbar{display:none;}
  .topnav .lnk{font-size:10.5px;padding:8px 9px;white-space:nowrap;}
  .topnav .lnk[data-wa-link]{display:none;}
  .navbtn{flex:none;font-size:10px;padding:10px 12px;}
}

/* ---------- Sello de marca (cw-mark) ---------- */
.cw-mark{
  display:inline-flex;flex-direction:column;justify-content:center;
  border:1.5px solid var(--fg);background:transparent;
  padding:7px 10px;line-height:1.04;
  font-family:var(--font-sans);font-weight:800;font-size:10px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg);
}
.cw-mark span{display:block;}
/* Versión grande de cabecera: borde y sombra dura blanca (como el logo) */
.cw-mark--cab{
  font-size:22px;padding:14px 18px;
  border:2px solid #fff;
  box-shadow:11px 11px 0 0 #fff;
}

/* ---------- Cabecera centrada ---------- */
.cab{padding:38px 0 30px;text-align:center;}
.cab .tag{
  display:block;margin-top:16px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft);
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero > *{position:relative;z-index:2;}
.hero h1{font-weight:700;font-size:clamp(54px,17vw,76px);line-height:.86;letter-spacing:-.045em;}
.hero h1 .pk{color:var(--pink);display:block;}
.hero .sub{font-size:18px;color:var(--fg-mid);margin-top:18px;max-width:30ch;}

/* ---------- Texto ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pink);
  display:block;margin-bottom:18px;
}
.dur{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pink);
  margin-bottom:16px;line-height:1.5;
}
/* Acento "clases en vivo" — destaca el telepresencial con elegancia.
   Mismo idioma: magenta, mono, borde duro (sin radius). */
.badge-live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pink);
  border:1px solid var(--pink);background:var(--pink-soft);
  padding:6px 11px;margin-bottom:14px;line-height:1;
}
.tile .badge-live{margin:0 0 12px;}
.about{font-size:18px;color:var(--fg-mid);line-height:1.62;max-width:60ch;margin-bottom:26px;}
.about b{color:var(--fg);font-weight:600;}
.meta{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--fg-soft);line-height:1.7;
}
.h2{font-weight:700;font-size:26px;letter-spacing:-.025em;margin-bottom:22px;}

/* ---------- Ficha (filas clave·valor) ---------- */
.ficha{margin-top:26px;border:1px solid var(--line);background:var(--card);}
.frow{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 16px;border-top:1px solid var(--line-soft);
}
.frow:first-child{border-top:none;}
.frow .k{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);
}
.frow .v{font-size:14px;font-weight:600;text-align:right;color:var(--fg);}
.frow .v.pk{color:var(--pink);}

/* ---------- Banda de cifras ---------- */
.statband{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.stat{background:var(--card);padding:20px 16px;}
.statband .stat:nth-child(5){grid-column:1 / -1;}
.stat .num{font-weight:700;font-size:28px;letter-spacing:-.03em;line-height:1;}
.stat .lab{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-top:9px;
}

/* ---------- Cards de persona / proyecto ---------- */
.pcard{
  border:1px solid var(--line);background:var(--card);padding:22px;
  display:flex;gap:16px;align-items:flex-start;margin-bottom:14px;
}
.pcard:last-child{margin-bottom:0;}
.avatar{
  flex:0 0 50px;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--line);background:var(--card-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--pink);
}
.pcard .nm{font-weight:700;font-size:18px;letter-spacing:-.02em;}
.pcard .ro{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin:6px 0 10px;
}
.pcard .mt{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  letter-spacing:.02em;color:var(--fg-soft);line-height:1.65;
}
/* Foto de profesor (reemplaza las iniciales cuando hay imagen) */
.avatar--foto{overflow:hidden;padding:0;}
.avatar--foto img{width:100%;height:100%;object-fit:cover;display:block;}
.pcard__body{min-width:0;}
.pcard .pbio{font-size:14px;color:var(--fg-mid);line-height:1.6;margin:10px 0 0;}
.plinks{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.plinks .know{margin:0;}
.plink{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-mid);text-decoration:none;transition:color .15s;
}
.plink:hover{color:var(--pink);}
/* Cabecera del modal de bio */
.bio-head{display:flex;gap:14px;align-items:center;margin-bottom:6px;}
.bio-head .avatar{flex:0 0 56px;width:56px;height:56px;}
.bio-p{font-size:14.5px;color:var(--fg-mid);line-height:1.62;margin:0;}
.bio-p b{color:var(--fg);font-weight:600;}

/* ---------- Opciones (cards de oferta) ---------- */
.opt{border:1px solid var(--line);background:var(--card);padding:22px;margin-bottom:14px;}
.opt.feat{border-color:var(--pink);background:linear-gradient(180deg,var(--pink-soft),transparent 55%),var(--card);}
.opt .ot{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);
}
.opt.feat .ot{color:var(--pink);}
.opt .ov{font-weight:700;font-size:34px;letter-spacing:-.03em;margin:8px 0 4px;}
.opt .ov small{font-size:15px;font-weight:500;color:var(--fg-soft);letter-spacing:0;}
.opt .od,.modal__panel .od{font-size:13.5px;color:var(--fg-mid);line-height:1.55;margin-top:8px;}
.opt .od b,.modal__panel .od b{color:var(--fg);font-weight:600;}
.opt--soon{opacity:.66;}
.opt--soon .ot{color:var(--fg-soft);}
.ov--soon{font-size:22px;color:var(--fg-soft);font-weight:600;letter-spacing:-.01em;}
.foot-note{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:var(--fg-soft);margin-top:6px;text-align:center;
}
.foot-note b{color:var(--pink);}

/* ---------- Bloque "cuándo" ---------- */
.when{text-align:left;}
.when .big{font-weight:700;font-size:clamp(30px,9vw,40px);letter-spacing:-.03em;line-height:1.0;}
.when .big .pk{color:var(--pink);}
.when .start{
  margin-top:18px;border:1px solid var(--line);background:var(--card);
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.when .start .l{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);
}
.when .start .d{font-weight:700;font-size:16px;letter-spacing:-.01em;}

/* ---------- Botones ---------- */
.actions{display:flex;flex-direction:column;gap:12px;}
.btn{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-sans);font-weight:700;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:19px 22px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .14s ease,background .14s ease,opacity .14s ease;
  width:100%;
}
.btn:active{transform:scale(.99);}
.btn .arw{font-size:1.15em;line-height:1;}
.btn--pink{background:var(--pink);color:#fff;}
.btn--green{background:var(--green);color:#fff;}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--fg);}
.btn--ghost:hover{background:var(--fg);color:#000;}

/* ---------- Enlace "know" ---------- */
.know{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:18px;padding:16px;border:1px solid var(--line);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mid);
  transition:border-color .15s,color .15s;
}
.know:hover{border-color:var(--pink);color:var(--fg);}

/* ---------- Video ---------- */
.video-shell{
  position:relative;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);background:#000;overflow:hidden;
}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.embed-note{
  margin-top:14px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.04em;color:var(--fg-soft);
}
.embed-note a{color:var(--pink);}

/* ---------- Footer ---------- */
.foot{
  padding:30px 0 46px;text-align:center;
  border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft);
}
.foot .cw-mark{font-size:8px;padding:5px 7px;margin-bottom:14px;}
.foot .cw-mark{display:inline-flex;}

/* ---------- Modal (Oficina) — mismo lenguaje: cuadrado, borde, card ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;}
.modal.abierto{display:flex;}
.modal__fondo{position:absolute;inset:0;background:rgba(10,10,11,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.modal__panel{
  position:relative;width:min(430px,100%);
  border:1px solid var(--line);background:var(--card);
  padding:26px 22px;display:flex;flex-direction:column;gap:12px;
}
.modal__cerrar{
  position:absolute;top:10px;right:10px;width:34px;height:34px;
  border:1px solid var(--line);background:transparent;color:var(--fg-mid);
  font-size:14px;cursor:pointer;transition:color .15s,border-color .15s;
}
.modal__cerrar:hover{color:var(--fg);border-color:var(--pink);}
/* Emergente de postulación — pasos numerados, mismo idioma (magenta, mono, borde duro) */
.modal__panel--ancho{width:min(520px,100%);}
.insc-titulo{font-size:26px;letter-spacing:-.02em;line-height:1.12;}
.insc-intro{font-size:14.5px;color:var(--fg-mid);line-height:1.55;}
.insc-pasos{list-style:none;display:flex;flex-direction:column;gap:14px;margin:6px 0 4px;padding:0;}
.insc-pasos li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--fg-mid);line-height:1.5;}
.insc-pasos li b{color:var(--fg);font-weight:600;}
.insc-n{
  flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--pink);color:var(--pink);
  font-family:var(--font-mono);font-size:12px;font-weight:700;
}

/* ---------- Hall ---------- */
.hall{
  min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px 56px;text-align:center;
}
.hall .tag{
  display:block;margin-top:16px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft);
}
.hall__puertas{
  display:grid;grid-template-columns:1fr;gap:14px;
  width:min(640px,100%);margin-top:44px;
}
@media(min-width:640px){.hall__puertas{grid-template-columns:1fr 1fr;}}
.puerta{
  border:1px solid var(--line);background:var(--card);
  padding:26px 22px;text-align:left;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s,background .15s;
}
.puerta:hover{border-color:var(--pink);background:var(--card-2);}
.puerta h2{font-weight:700;font-size:24px;letter-spacing:-.025em;}
.puerta p{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);
}
.puerta .arw-line{
  margin-top:8px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pink);
}
.hall__pie{
  margin-top:44px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft);
}

/* ---------- Hero banner (imagen fundida con el fondo) ---------- */
.hero-banner{position:relative;overflow:hidden;background:var(--bg);}
.hero-banner__img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  display:block;
}
.hero-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.30) 0%,rgba(10,10,11,.42) 45%,rgba(10,10,11,.72) 75%,var(--bg) 98%);
}
.hero-banner__content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}
.hero-banner--home{height:min(78vh,680px);}
.hero-banner--sub{height:min(46vh,420px);}
/* Sello sobre foto: fondo blanco sólido como el banner original */
.cw-mark--banner{
  background:#fff;color:#000;border:2px solid #000;
  box-shadow:8px 8px 0 0 rgba(17,17,17,.85);
  font-size:clamp(16px,3.4vw,24px);padding:14px 18px;
}
/* Franja magenta inline (banner Academia) */
.strip{
  display:inline;background:var(--pink);color:#fff;
  font-weight:400;font-size:clamp(15px,2.6vw,22px);letter-spacing:.02em;
  padding:6px 12px;line-height:1.9;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.strip b{font-weight:700;}

/* ---------- Acordeón (desplegables tipo app) ---------- */
.acc{border:1px solid var(--line);background:var(--card);margin-bottom:10px;}
.acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 18px;background:none;border:none;cursor:pointer;text-align:left;
}
.acc__head .t{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
}
.acc__head .pre{color:var(--pink);margin-right:8px;}
.acc__ico{
  flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--pink);font-size:17px;font-weight:400;line-height:1;
  transition:transform .25s ease;
}
.acc.abierto .acc__ico{transform:rotate(45deg);}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;}
.acc.abierto .acc__body{grid-template-rows:1fr;}
.acc__inner{overflow:hidden;}
.acc__contenido{padding:2px 18px 18px;}
.acc__contenido p{font-size:13.5px;color:var(--fg-mid);line-height:1.6;margin-bottom:10px;}
.acc__contenido .meta{margin-top:6px;}

/* ---------- Carrusel de cursos (hero pestaña Cursos) ---------- */
.carrusel{position:relative;border:1px solid var(--line);background:#000;overflow:hidden;}
.carrusel__track{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.slide{position:relative;flex:0 0 100%;min-height:clamp(360px,62vh,560px);display:flex;}
.slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.03);}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.25) 0%,rgba(10,10,11,.35) 40%,rgba(10,10,11,.9) 100%);}
.slide__body{position:relative;z-index:2;margin-top:auto;padding:clamp(1.6rem,4vw,2.6rem);max-width:640px;display:flex;flex-direction:column;gap:14px;}
.slide__cat{
  display:inline-block;align-self:flex-start;
  background:var(--pink);color:#fff;
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;
}
.slide__titulo{font-weight:700;font-size:clamp(1.5rem,3.6vw,2.4rem);letter-spacing:-.025em;line-height:1.08;color:#fff;}
.slide__pipe{color:var(--fg-mid);font-weight:400;}
.slide__body .btn{align-self:flex-start;}
.btn--sutil{
  background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--sutil:hover{background:rgba(255,255,255,.16);}

.carrusel__nav{
  position:absolute;bottom:clamp(1.6rem,4vw,2.6rem);right:clamp(1.2rem,3vw,2rem);z-index:3;
  display:flex;gap:8px;
}
.carrusel__flecha{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.4);
  background:rgba(10,10,11,.4);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  transition:background .2s;
}
.carrusel__flecha:hover{background:rgba(237,27,105,.85);border-color:transparent;}
.carrusel__dots{position:absolute;bottom:1rem;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:8px;}
.carrusel__dot{width:26px;height:3px;background:rgba(255,255,255,.3);border:none;cursor:pointer;padding:0;transition:background .2s;}
.carrusel__dot.activo{background:var(--pink);}
@media(max-width:600px){ .carrusel__nav{display:none;} }

/* ---------- Tiles de curso (miniaturas → landing desplegable) ---------- */
.tile-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px;}
@media(min-width:700px){.tile-grid{grid-template-columns:1fr 1fr;}}
.tile{
  border:1px solid var(--line);background:var(--card);
  padding:22px;text-align:left;cursor:pointer;width:100%;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s,background .15s;
}
.tile:hover{border-color:var(--pink);}
.tile.activo{border-color:var(--pink);background:linear-gradient(180deg,var(--pink-soft),transparent 55%),var(--card);}
.tile .ot{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink);
}
.tile .nm{font-weight:700;font-size:22px;letter-spacing:-.02em;}
.tile .pr{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.06em;color:var(--fg-mid);
}
.tile .ver{
  margin-top:8px;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pink);
}
.desplegable{display:none;}
.desplegable.abierto{display:block;animation:desp-entra .3s ease;}
@keyframes desp-entra{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ---------- Galería de proyectos (miniaturas cuadradas) ---------- */
.pgal{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:640px){.pgal{grid-template-columns:1fr 1fr;}}
.pgal figure{margin:0;border:1px solid var(--line);background:var(--card);}
.pgal .cuadro{
  aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--card-2);
}
.pgal .cuadro img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);transition:filter .3s ease;
}
.pgal figure:hover .cuadro img{filter:grayscale(0);}
.pgal .cuadro .vacio{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);
  text-align:center;padding:12px;
}
.pgal figcaption{
  padding:12px 14px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:var(--fg-mid);line-height:1.6;
}
.pgal figcaption b{color:var(--fg);font-weight:700;}
/* Galería de proyectos (Oficina): CUADRADA, ordenada y discreta.
   Velo gris sobrio (grayscale + atenuación); el color se revela al hover. */
.pgal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:16px;}
.pgal-grid img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--card-2);
  filter:grayscale(1) brightness(.82);
  transition:filter .3s ease;
}
.pgal-grid img:hover{filter:grayscale(0) brightness(1);}
@media(max-width:600px){.pgal-grid{grid-template-columns:repeat(2,1fr);}}
/* Lightbox — imagen ampliada en emergente */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,11,.93);}
.lightbox.abierto{display:flex;}
.lightbox__img{max-width:min(1100px,95vw);max-height:90vh;object-fit:contain;border:1px solid var(--line);cursor:zoom-out;}
.lightbox__cerrar{position:absolute;top:18px;right:18px;width:42px;height:42px;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:16px;cursor:pointer;transition:color .15s,border-color .15s;}
.lightbox__cerrar:hover{color:var(--fg);border-color:var(--pink);}

/* ---------- Galería ---------- */
.galeria-mosaico{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.galeria-slot{
  aspect-ratio:4/3;background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);
  text-align:center;padding:10px;
}

/* ---------- Pendiente (placeholder marcado) ---------- */
.pendiente{
  display:inline-block;padding:8px 12px;
  border:1px dashed var(--line);color:var(--fg-soft);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
}

/* ---------- Desktop ≥820px ---------- */
@media(min-width:820px){
  .app{max-width:1080px;padding:0 64px;border-left:none;border-right:none;}
  .block{padding:70px 0;}
  .cab{padding:60px 0 26px;}
  .topbar .row{padding:0 64px;}
  .hero{min-height:480px;display:flex;flex-direction:column;justify-content:center;}
  .hero h1{font-size:clamp(88px,8.5vw,124px);}
  .hero .sub{font-size:23px;max-width:36ch;}
  .statband{grid-template-columns:repeat(5,1fr);}
  .statband .stat:nth-child(5){grid-column:auto;}
  .stat{padding:26px 18px;}
  .stat .num{font-size:34px;}
  .h2{font-size:34px;margin-bottom:30px;}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .pgrid .pcard{margin-bottom:0;}
  .ogrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
  .ogrid .opt{margin-bottom:0;display:flex;flex-direction:column;}
  .opt .ov{font-size:40px;margin-top:12px;}
  .foot-note{margin-top:20px;text-align:left;}
  .when{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;}
  .when .eyebrow{grid-column:1 / -1;}
  .when .big{font-size:clamp(52px,6vw,76px);}
  .when .start{margin-top:0;min-width:300px;}
  .actions{flex-direction:row;}
  .btn{flex:1;font-size:13px;padding:20px 22px;}
  .btn:hover{transform:translateY(-2px);}
  .know{margin-top:24px;}
  .foot{padding:40px 0 60px;}
  .galeria-mosaico{grid-template-columns:repeat(4,1fr);}
}

/* ============================================================
   V2 · ACADEMIA (13-jul-2026) — bloque ADITIVO.
   Equipo (fotos B/N mismo tamaño → emergente) · Blog · @usuario en nav.
   Solo clases nuevas: no modifica nada de lo anterior.
   ============================================================ */

/* --- Nav: chip de usuario logueado (@nombre) --- */
.navbtn--user{border-color:var(--pink);color:var(--pink);font-weight:700;letter-spacing:.04em;}
.navbtn--user:hover{background:var(--pink);color:#fff;}

/* --- Equipo: grilla de fotos B/N, todas del mismo tamaño --- */
.eq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:720px){.eq-grid{grid-template-columns:repeat(4,1fr);}}
.eq-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);cursor:pointer;padding:0;text-align:left;}
.eq-card__foto{position:relative;flex:0 0 auto;aspect-ratio:1/1;overflow:hidden;background:#1a1a1d;display:flex;align-items:center;justify-content:center;}
.eq-card__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.86) contrast(1.02);transition:filter .35s ease,transform .45s ease;}
.eq-card:hover .eq-card__foto img{filter:grayscale(0) brightness(1);transform:scale(1.04);}
.eq-card__ini{font-weight:700;font-size:44px;letter-spacing:.02em;color:var(--fg-soft);}
.eq-card__body{display:block;flex:1;padding:14px 14px 16px;border-top:1px solid var(--line);}
.eq-card__nm{display:block;font-weight:700;font-size:16px;letter-spacing:-.01em;}
.eq-card__ro{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--fg-mid);overflow-wrap:break-word;}
.eq-card__ver{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);}
.eq-foto-modal{width:min(300px,64vw);aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);margin-bottom:16px;background:#1a1a1d;display:flex;align-items:center;justify-content:center;}
.eq-foto-modal img{width:100%;height:100%;object-fit:cover;}
.eq-foto-modal .eq-card__ini{font-size:64px;}

/* --- Blog: grilla de artículos + artículo individual --- */
.blog-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--fg);padding:0 0 16px;transition:border-color .25s ease;}
.blog-card:hover{border-color:var(--pink);}
.blog-card__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1a1a1d;display:flex;align-items:center;justify-content:center;}
.blog-card__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.88);transition:filter .35s ease,transform .45s ease;}
.blog-card:hover .blog-card__img img{filter:grayscale(0) brightness(1);transform:scale(1.03);}
.blog-card__sin{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.cw-mark--mini{transform:scale(.7);opacity:.5;}
.blog-card__fecha{margin:14px 16px 0;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);}
.blog-card__titulo{margin:7px 16px 0;font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.01em;}
.blog-card__extracto{margin:8px 16px 0;font-size:13.5px;line-height:1.55;color:var(--fg-mid);}
.blog-card .know{margin:12px 16px 0;}
.art-img{border:1px solid var(--line);overflow:hidden;margin-bottom:22px;}
.art-img img{width:100%;display:block;}
.art-titulo{font-weight:700;font-size:clamp(28px,4.5vw,40px);letter-spacing:-.02em;line-height:1.12;margin:6px 0 18px;}
.art-cuerpo{font-size:15.5px;line-height:1.75;color:var(--fg-mid);}
.art-cuerpo p{margin:0 0 16px;}
.art-cuerpo b,.art-cuerpo strong{color:var(--fg);}

/* --- Ficha de curso: bloques de la landing individual --- */
.fc-sec{border-top:1px solid var(--line-soft);padding-top:26px;margin-top:26px;}
.fc-valor{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin:14px 0 4px;border:1px solid var(--line);background:var(--card);padding:18px 20px;}
.fc-valor .monto{font-weight:700;font-size:clamp(40px,6vw,54px);letter-spacing:-.03em;color:var(--fg);}
.fc-valor .detalle{font-size:14px;color:var(--fg-mid);}
.pagos-nota{margin-top:10px;font-size:12.5px;color:var(--fg-soft);line-height:1.55;}

/* --- Ficha de curso: estructura de programa + galería expediente
       (promovidos desde el <style> inline de cursos.html — idénticos) --- */
.prog-sec{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);}
.prog-h3{font-weight:700;font-size:19px;letter-spacing:-.02em;margin:6px 0 8px;}
.mod-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);}
.mod-item{display:flex;gap:14px;padding:14px 16px;background:var(--card);}
.mod-code{flex:0 0 auto;font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--pink);padding-top:2px;}
.mod-item b{font-size:15px;}
.mod-tags{display:inline-block;margin-left:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);}
.mod-item p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--fg-mid);}
.prog-bul{display:flex;flex-direction:column;gap:7px;margin:10px 0 20px;}
.prog-bul span{display:flex;gap:.55em;font-size:14px;color:var(--fg-mid);}
.prog-bul span::before{content:"→";color:var(--pink);flex:none;}
.exp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:10px;}
.mono-lab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);}
.exp-behance{font-size:12.5px;font-weight:600;color:var(--pink);letter-spacing:.02em;}
.exp-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media(min-width:560px){.exp-gal{grid-template-columns:repeat(3,1fr);}}
@media(min-width:820px){.exp-gal{grid-template-columns:repeat(4,1fr);}}
.exp-lam{position:relative;display:block;border:1px solid var(--line);overflow:hidden;aspect-ratio:1.4/1;background:#1a1a1d;}
.exp-lam img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.8) contrast(1.02);transition:filter .35s ease,transform .45s ease;}
.exp-lam::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(17,17,17,.05),rgba(17,17,17,.5));transition:opacity .35s ease;}
.exp-lam:hover img{filter:grayscale(0) brightness(1) contrast(1);transform:scale(1.04);}
.exp-lam:hover::after{opacity:.2;}
.exp-cod{position:absolute;left:8px;bottom:7px;z-index:2;font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;background:rgba(17,17,17,.62);padding:2px 7px;}

/* --- V2 · Revelado suave de entrada (Academia). Sobrio y una sola vez.
       Si el usuario pide movimiento reducido, todo queda visible y quieto. --- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
  .rvl{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;}
  .rvl--in{opacity:1;transform:translateY(0);}
}

/* --- V2.1 · Ajustes de Rafael (14-jul) --- */
/* Emergentes del equipo: apaisadas en escritorio, con scroll interno (sin desborde) */
.modal__panel--eq{display:flex;flex-direction:column;gap:18px;max-height:86vh;overflow:auto;width:min(920px,94vw);}
@media(min-width:720px){
  .modal__panel--eq{flex-direction:row;align-items:flex-start;gap:26px;}
  .modal__panel--eq .eq-foto-modal{flex:0 0 240px;width:240px;margin-bottom:0;}
}
.modal__panel--eq .eq-bio{flex:1;min-width:0;}
/* Encuadre de las fotos del equipo (evita caras cortadas) */
.eq-foto--alta img{object-position:50% 0;}
.eq-foto--izq img{object-position:30% 26%;}
/* Iframe embebido (Behance) responsivo dentro de emergentes */
.embed-behance{width:100%;max-width:404px;height:316px;border:0;display:block;margin:14px auto 0;}

/* --- V2.2 · Botones de pago con marca: SOLO el botón, sin encabezados (14-jul) --- */
.pagos-pila{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-width:360px;}
.btn-pago{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 22px;border:1px solid transparent;font-weight:700;font-size:14px;letter-spacing:.02em;text-decoration:none;transition:transform .2s ease;}
.btn-pago:hover{transform:translateY(-2px);}
.btn-pago img{height:22px;width:auto;display:block;}
.btn-pago--paypal{background:#FFC439;color:#111;}
.btn-pago--flow{background:#fff;color:#111;border-color:#e3e3e3;}

/* --- V2.3 · Comunidad: grilla de videos del canal (14-jul) --- */
.videos-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:720px){.videos-grid{grid-template-columns:repeat(2,1fr);}}
.video-card{border:1px solid var(--line);background:var(--card);padding:0 0 16px;}
.video-card__marco{position:relative;aspect-ratio:16/9;background:#1a1a1d;}
.video-card__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-card__t{display:block;margin:12px 16px 0;font-weight:700;font-size:16px;line-height:1.35;}
.video-card__d{display:block;margin:7px 16px 0;font-size:13px;line-height:1.55;color:var(--fg-mid);}

/* --- V2.4 · Logo oficial en el topbar de Academia (14-jul) --- */
.brand-logo{height:46px;width:auto;display:block;}
@media(max-width:640px){.brand-logo{height:38px;}}

/* --- V2.5 · Suscripción mensual: formulario del emergente (14-jul) --- */
.susc-campo{display:block;width:100%;margin:0 0 10px;padding:13px 14px;background:#101012;border:1px solid var(--line);color:var(--fg);font-size:14.5px;font-family:inherit;}
.susc-campo:focus{outline:none;border-color:var(--pink);}
.susc-campo::placeholder{color:var(--fg-soft);}
.susc-msg{margin-top:10px;font-size:13px;color:var(--fg-mid);line-height:1.55;}

/* ============================================================
   V3 · FICHA DE CURSO EN DOS VELOCIDADES (01-ago-2026)
   Izquierda = para detenerse (acordeones). Derecha = para decidir
   (panel fijo). Arquitectura pedida por Rafael sobre la referencia
   UC Educación Continua, adaptada a la piel TBC.
   El hero/banner queda a ancho completo: es el sello de la casa.
   ============================================================ */

/* La ficha de curso es la ÚNICA vista que rompe la columna de 430px */
.app--curso{max-width:430px;}
.curso-wrap{display:block;}
.curso-main{min-width:0;}

/* ---------- Panel de decisión ---------- */
.panel{
  border:1px solid var(--line);
  background:var(--card);
  padding:22px 20px;
  margin:0 0 8px;
}
.panel__blq{padding:14px 0;border-top:1px solid var(--line-soft);}
.panel__blq:first-child{padding-top:0;border-top:none;}
.panel__lab{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--pink);
  display:block;margin-bottom:6px;
}
.panel__inicio{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.panel__inicio small{display:block;font-size:12.5px;font-weight:400;color:var(--fg-soft);letter-spacing:0;margin-top:3px;}

/* Precio con ancla tachada */
.panel__precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.panel__ancla{font-size:15px;color:var(--fg-soft);text-decoration:line-through;}
.panel__monto{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1;}
.panel__nota{font-size:11.5px;color:var(--fg-soft);margin-top:6px;line-height:1.5;}

/* Caja de descuento con fecha límite */
.panel__promo{
  border:1px solid var(--pink);background:var(--pink-soft);
  padding:11px 13px;margin-top:12px;
  font-size:12.5px;line-height:1.5;color:var(--fg);
}
.panel__promo b{color:var(--pink);}

/* CTA: el único elemento de este color en la página */
.panel__cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin-top:14px;padding:16px 18px;
  background:var(--pink);color:#fff;border:1px solid var(--pink);
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:background .15s,color .15s;
}
.panel__cta:hover{background:transparent;color:var(--pink);}
.panel__cta--espera{background:transparent;color:var(--fg);border-color:var(--fg);}
.panel__cta--espera:hover{background:var(--fg);color:#000;}
.panel__sub{
  display:block;text-align:center;margin-top:9px;
  font-size:12px;color:var(--fg-mid);text-decoration:none;
}
.panel__sub:hover{color:var(--pink);}

/* Medios de pago */
.panel__pagos{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:13px;opacity:.75;}
.panel__pagos img{height:17px;width:auto;display:block;}
.panel__pagos span{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-soft);border:1px solid var(--line);padding:3px 6px;
}

/* Datos duros: escaneables sin leer */
.pdato{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
.pdato:last-child{border-bottom:none;}
.pdato__ico{flex:none;width:15px;color:var(--pink);font-size:12px;line-height:1.5;text-align:center;}
.pdato__txt{min-width:0;}
.pdato__k{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-soft);display:block;
}
.pdato__v{font-size:13.5px;line-height:1.45;color:var(--fg);display:block;margin-top:2px;}
.pdato__v b{color:var(--pink);font-weight:700;}

/* Sello de certificación */
.panel__sello{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);padding:13px;margin-top:14px;background:var(--card-2);
}
.panel__sello .ico{flex:none;font-size:19px;line-height:1.1;}
.panel__sello p{font-size:12px;line-height:1.55;color:var(--fg-mid);}
.panel__sello b{color:var(--fg);}

/* Aviso de cupo mínimo: transparencia que genera confianza */
.panel__aviso{
  font-size:11.5px;line-height:1.55;color:var(--fg-soft);
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft);
}
.panel__aviso b{color:var(--fg-mid);}

/* ---------- Barra fija de compra (solo móvil/tablet) ---------- */
.barra-compra{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;background:rgba(10,10,11,.96);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .25s ease;
}
.barra-compra.visible{transform:translateY(0);}
.barra-compra__precio{flex:1;min-width:0;line-height:1.15;}
.barra-compra__precio .m{font-size:19px;font-weight:700;letter-spacing:-.02em;display:block;}
.barra-compra__precio .d{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-soft);}
.barra-compra__btn{
  flex:none;background:var(--pink);color:#fff;text-decoration:none;
  padding:13px 20px;border:1px solid var(--pink);
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Escritorio: dos columnas y panel fijo ---------- */
@media(min-width:1080px){
  .app--curso{max-width:1060px;}
  .curso-wrap{
    display:grid;grid-template-columns:minmax(0,1fr) 336px;
    gap:44px;align-items:start;
  }
  .curso-main{border-right:1px solid var(--line-soft);padding-right:44px;}
  .panel{position:sticky;top:84px;margin-top:46px;}
  .barra-compra{display:none;}
  /* el hero conserva el ancho de lectura de la casa */
  .app--curso > .hero{max-width:640px;}
}

/* --- V3.1 · Panel: cuotas, nota al pie, botón de programa, dirigido a --- */
.panel__cuotas{font-size:12.5px;line-height:1.5;color:var(--fg-mid);margin-top:12px;}
.panel__cuotas b{color:var(--fg);}
.panel__pie{font-size:11px;line-height:1.55;color:var(--fg-soft);margin-top:12px;}
.hero-acciones{margin-top:18px;}
.btn-programa{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line);background:var(--card);color:var(--fg);
  padding:11px 16px;text-decoration:none;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.btn-programa:hover{border-color:var(--pink);color:var(--pink);}
.dirigido{border-left:2px solid var(--pink);padding:2px 0 2px 16px;}
.dirigido p{font-size:15px;line-height:1.65;color:var(--fg-mid);}

/* --- V3.2 · Información de pago dentro del panel (desplegables) --- */
.panel__info{padding-top:16px;margin-top:4px;border-top:1px dashed var(--line);}
.panel__info .panel__lab{margin-bottom:10px;}
.acc--panel{background:transparent;border-color:var(--line);margin-bottom:8px;}
.acc--panel .acc__head{padding:12px 13px;}
.acc--panel .acc__head .t{font-size:11px;letter-spacing:.1em;}
.acc--panel .acc__contenido{padding:2px 13px 14px;}
.acc--panel .acc__contenido p{font-size:12.5px;line-height:1.55;margin-bottom:9px;}
.acc--panel .acc__contenido p b{color:var(--fg);}
.acc--panel .meta{font-size:11.5px;}
.dcto{display:flex;gap:11px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line-soft);}
.dcto:last-of-type{border-bottom:none;}
.dcto__pct{font-weight:700;font-size:14px;color:var(--pink);flex:none;min-width:42px;}
.dcto__q{font-size:12.5px;color:var(--fg-mid);line-height:1.45;}
.dcto__nota{font-size:11.5px;color:var(--fg-soft);line-height:1.55;margin-top:11px;padding-top:10px;border-top:1px solid var(--line-soft);}

/* --- V3.3 · Precio en dos monedas + PayPal incrustado --- */
.panel__precio--clp{margin-top:4px;}
.panel__monto--clp{font-size:20px;color:var(--fg-mid);}
.panel__opt{font-size:11.5px;color:var(--fg-soft);margin-top:12px;text-align:center;}
.paypal-caja{margin-top:8px;min-height:46px;}

/* --- V3.4 · Cortes: dos fechas de inicio para un mismo curso --- */
.panel__corte{padding:9px 0;border-bottom:1px solid var(--line);}
.panel__corte:last-of-type{border-bottom:0;padding-bottom:2px;}
.panel__corte b{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pink);margin-bottom:3px;}
.panel__corte span{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;}
.panel__corte em{display:block;font-style:normal;font-size:12px;font-weight:400;
  color:var(--fg-soft);margin-top:2px;}
.cal-corte{margin-top:14px;}
.cal-corte:first-child{margin-top:0;}
.cal-corte b{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--pink);margin-bottom:5px;}

/* --- V3.5 · Equipo docente en la ficha de curso (mismos datos que equipo.html) --- */
.doc-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px;}
@media (min-width:760px){.doc-grid{grid-template-columns:repeat(2,1fr);}}
.doc-card{border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;}
.doc-card__foto{aspect-ratio:1/1;overflow:hidden;background:#1a1a1d;}
.doc-card__foto img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.86) contrast(1.02);transition:filter .35s ease,transform .45s ease;}
.doc-card:hover .doc-card__foto img{filter:grayscale(0) brightness(1);transform:scale(1.03);}
.doc-card__body{padding:18px 18px 20px;border-top:1px solid var(--line);}
.doc-card__nm{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;}
.doc-card__ro{margin:5px 0 14px;font-size:12.5px;line-height:1.45;color:var(--fg-mid);}
.doc-card .bio-p{font-size:13.5px;line-height:1.62;margin-bottom:10px;}
.doc-card__links{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;}
.doc-card__links .know{margin:0;}

/* ============================================================
   V3.6 · Ficha de curso corta (brief Rafael, 01-ago-2026)
   Menos texto, listas en vez de párrafos, galería de lecciones,
   y los accesos de contacto fijos abajo a la IZQUIERDA.
   ============================================================ */

/* --- Listas simples: reemplazan los párrafos largos --- */
.lista{list-style:none;margin:0;padding:0;}
.lista li{position:relative;padding:0 0 0 26px;margin-bottom:11px;font-size:15.5px;line-height:1.58;color:var(--fg-mid);}
.lista li:last-child{margin-bottom:0;}
.lista li::before{content:'→';position:absolute;left:0;top:0;color:var(--pink);font-weight:700;}
.lista--check li::before{content:'✓';}
.lista--num{counter-reset:ln;}
.lista--num li{padding-left:34px;}
.lista--num li::before{counter-increment:ln;content:counter(ln,decimal-leading-zero);
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;top:3px;}
.nota-pie{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--fg-soft);
  border-left:2px solid var(--line);padding-left:12px;}
.btn-mas{margin-top:18px;}

/* --- Desglose: una línea por lección --- */
.lecc{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line-soft);}
.lecc li{display:flex;gap:14px;align-items:baseline;padding:11px 2px;
  border-bottom:1px solid var(--line-soft);font-size:15px;line-height:1.4;}
.lecc__n{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--pink);min-width:28px;}

/* --- Galería de lecciones --- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:700px){.gal{grid-template-columns:repeat(3,1fr);}}
.gal__it{display:block;border:1px solid var(--line);background:var(--card);
  padding:0;text-align:left;cursor:pointer;overflow:hidden;}
.gal__it img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;
  filter:grayscale(.35) brightness(.9);transition:filter .3s ease,transform .4s ease;}
.gal__it:hover img{filter:none;transform:scale(1.03);}
.gal__sub{display:block;padding:10px 12px 12px;font-size:12.5px;line-height:1.45;
  color:var(--fg-mid);border-top:1px solid var(--line);}

/* --- Visor de la galería --- */
.modal--gal .gal-visor{position:relative;width:min(1100px,96vw);}
.gal-visor img{width:100%;max-height:78vh;object-fit:contain;background:#0a0a0b;border:1px solid var(--line);}
.gal-visor__sub{margin-top:12px;text-align:center;font-size:13.5px;color:var(--fg-mid);}
.gal-visor__sub span:first-child{font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.12em;color:var(--pink);}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:60px;background:rgba(10,10,11,.8);border:1px solid var(--line);
  color:var(--fg);font-size:26px;line-height:1;cursor:pointer;}
.gal-nav:hover{border-color:var(--pink);color:var(--pink);}
.gal-nav--prev{left:-8px;}
.gal-nav--next{right:-8px;}
@media(max-width:640px){.gal-nav--prev{left:0;}.gal-nav--next{right:0;}}

/* --- Descuentos compactos en el panel --- */
.panel__dctos .dcto{display:flex;gap:10px;align-items:baseline;margin-bottom:6px;}
.panel__dctos .dcto:last-child{margin-bottom:0;}

/* --- Accesos fijos abajo a la IZQUIERDA (WhatsApp + BIMco) ---
   BIMco se inyecta desde bimco-web.js con `right`; se voltea con !important
   porque ese <style> entra después que esta hoja. */
.fija{position:fixed;left:18px;bottom:18px;z-index:901;
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 15px;background:var(--green);color:#0a0a0b;
  font-family:var(--font-sans);font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(0,0,0,.15);transition:transform .2s ease;}
.fija:hover{transform:translateY(-2px);}
.fija svg{display:block;}

#bimcow{right:auto !important;left:18px !important;bottom:74px !important;}
#bimcow-saludo{right:auto !important;left:70px !important;}
#bimcow-p{right:auto !important;left:0 !important;}

@media(max-width:1079px){
  /* La barra de compra mide ~82px y vive pegada abajo: los accesos suben por
     encima de ella. Medido en 375px con la barra visible. */
  .fija{bottom:96px;}
  #bimcow{bottom:152px !important;}
}
@media(max-width:420px){
  .fija span{display:none;}
  .fija{padding:12px;}
}

/* --- V3.7 · El H1 del hero no se recorta ---
   La columna del curso es angosta y el título va enorme: el generador calcula
   el tope según la palabra más larga y lo pasa en --h1s / --h1l. El clamp
   conserva la fluidez; el min() impide que se pase del ancho disponible. */
.hero h1{font-size:min(var(--h1s, 76px), clamp(38px, 17vw, 76px));}
@media(min-width:1080px){
  .hero h1{font-size:min(var(--h1l, 124px), clamp(88px, 8.5vw, 124px));}
}

/* --- V3.8 · Banner de capturas y ajustes de la galería ---
   El slide del carrusel del sitio está pensado para fotos (cover + velo).
   Una captura de pantalla se recorta y se oscurece, así que lleva su variante:
   la imagen entera, sobre fondo oscuro, con el pie debajo. */
.block--banner{padding-top:0;border-top:none;}
.carrusel--cap{background:#0a0a0b;}
.slide--cap{position:relative;flex:0 0 100%;min-height:0;display:block;}
/* Mismo lenguaje que los banners del sitio: blanco y negro + velo degradado,
   con el pie encima. El velo es más suave que en las fotos porque debajo hay
   texto de pantalla y tiene que seguir leyéndose. */
.slide--cap::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,11,.18) 0%, rgba(10,10,11,.10) 42%, rgba(10,10,11,.92) 100%);
}
.slide__img{width:100%;aspect-ratio:16/9;object-fit:contain;object-position:center;
  background:#0a0a0b;display:block;
  filter:grayscale(1) contrast(1.05) brightness(.94);
  transition:filter .5s ease;}
.carrusel--cap:hover .slide__img{filter:grayscale(0) contrast(1) brightness(1);}
.slide__pie{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 22px 42px;font-size:13.5px;line-height:1.5;
  color:#f4f2ee;text-align:center;}
.carrusel--cap .carrusel__dots{bottom:14px;}
@media(max-width:600px){
  .slide__pie{font-size:12px;padding:14px 14px 38px;}
}
/* Este título va deliberadamente MÁS grande que un h2 normal (28px): es el
   que abre la galería y tiene que pesar. Verificado que la palabra más larga
   («lecciones.») entra en la columna de 299px del móvil más angosto. */
.h2--gal{font-size:clamp(26px,4vw,34px);line-height:1.06;margin-bottom:22px;}

/* ============================================================
   V3.9 · Panel ultra simple y tarjetas de docente alineadas
   Estructura del panel dictada por Rafael: fecha, valor, un botón
   para Chile y otro para el extranjero, ficha de datos, WhatsApp.
   ============================================================ */

/* Los dos botones «Ver bio» quedan a la misma altura aunque el cargo
   de uno ocupe dos líneas y el del otro una. */
/* flex:1 —no height:100%— para que el cuerpo llene la tarjeta y el
   margin-top:auto empuje el botón al fondo aunque el cargo ocupe
   dos líneas en una tarjeta y tres en la otra. */
.doc-card__body{display:flex;flex-direction:column;flex:1 1 auto;}
/* .btn trae justify-content:space-between, pensado para «texto + flecha».
   Con un solo hijo el alto salía distinto en cada tarjeta (36px vs 54px),
   así que aquí se fija: centrado, sin quiebre de línea y line-height exacto.
   En escritorio hay además un .btn{flex:1} —pensado para las filas de
   acciones— que estiraba el botón para llenar el hueco sobrante de la tarjeta:
   de ahí que uno midiera 40px y el otro 58. Por eso el flex:0 0 auto. */
.doc-card__mas{flex:0 0 auto;margin-top:auto;align-self:center;width:auto;
  justify-content:center;white-space:nowrap;line-height:1;height:auto;
  padding:13px 24px;font-size:11.5px;letter-spacing:.12em;}

/* Panel */
.panel__inicio small{margin-top:5px;color:var(--fg-mid);font-size:13px;}
.panel__promo{margin-top:12px;}
.panel__cta--alt{background:transparent;border:1.5px solid var(--line);color:var(--fg);}
.panel__cta--alt:hover{border-color:var(--pink);color:var(--pink);}
.panel__pagos{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);}
.panel__pagos img{height:17px;width:auto;opacity:.85;}
.panel__pagos span{font-family:var(--font-mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-soft);}
.panel__wa{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding:15px 18px;border:1.5px solid var(--green);color:var(--green);
  font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .15s ease,color .15s ease;}
.panel__wa:hover{background:var(--green);color:#0a0a0b;}

/* --- V4.0 · El botón de PayPal, solo el botón ---
   El componente de PayPal inyecta en NUESTRA página un <h3 class="item-header">
   con el nombre del producto y el precio. Ese nombre lo escribe Rafael en su
   panel de PayPal y hoy dice «Telepresencial Asincrónico», que es falso: el
   curso es en vivo. El precio, además, ya está arriba en el panel. Se oculta
   la cabecera y queda solo el botón. El monto real lo sigue viendo el comprador
   en la pantalla de PayPal antes de confirmar. */
.paypal-caja .item-header{display:none !important;}
.paypal-caja [id^="paypal-form-fields-container-"]{margin-top:0 !important;}

/* --- V4.1 · La lámina del caso de estudio en el banner ---
   Es un dibujo de líneas sobre blanco y casi cuadrado (0,97), mientras el
   banner es 16:9. Con el fondo oscuro de los demás slides quedaba un rectángulo
   blanco flotando entre franjas negras. Se le da fondo claro: así la franja
   lateral se lee como el papel de la lámina, que además es el lenguaje de los
   brochures del Método TBC. */
.slide--plano{background:#f4f2ee;}
.slide--plano .slide__img{background:#f4f2ee;filter:none;}
.carrusel--cap:hover .slide--plano .slide__img{filter:none;}
.slide--plano::after{
  background:linear-gradient(180deg,
    rgba(244,242,238,0) 0%, rgba(244,242,238,0) 58%, rgba(20,20,22,.78) 100%);
}
.slide--plano .slide__pie{color:#f4f2ee;}

/* --- V4.2 · Foto de fondo del banner, difuminada y bajo velo ---
   El texto del hero es lo que manda: la foto solo pone atmósfera. Por eso va
   desenfocada, desaturada y bajo un degradado oscuro que garantiza el contraste
   del título en cualquier zona de la imagen.
   `.hero > *` fuerza position:relative y z-index:2 a todos los hijos, así que
   estas dos capas necesitan más especificidad para quedar por debajo. */
.hero--foto{background:#0a0a0b;}
.hero > .hero__bg{
  position:absolute;inset:-30px;z-index:0;
  background-size:cover;background-position:center 42%;
  filter:blur(7px) grayscale(.4) brightness(.62) contrast(1.05);
  transform:scale(1.05);
}
.hero > .hero__velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(10,10,11,.62) 0%, rgba(10,10,11,.74) 45%, rgba(10,10,11,.94) 100%);
}
@media(max-width:600px){
  .hero > .hero__bg{filter:blur(5px) grayscale(.45) brightness(.55);}
  .hero > .hero__velo{background:linear-gradient(180deg,
    rgba(10,10,11,.7) 0%, rgba(10,10,11,.8) 45%, rgba(10,10,11,.96) 100%);}
}

/* ============================================================================
   V4.3 · ESTÉTICA DEL BROCHURE, APLICADA A LAS FICHAS DE CURSO
   Traducción del diseño «Brochure Workshop BIM + Claude» (Claude Design).

   TODO vive bajo .curso-ds, que solo llevan las seis fichas generadas. El Hall,
   la Academia, la Oficina y el resto del sitio comparten esta hoja pero no esa
   clase, así que no se ven afectados. Si algo no convence, se quita la clase
   del body y vuelve todo atrás sin tocar nada más.
   ============================================================================ */
.curso-ds{
  --ds-tinta:#111111;
  --ds-hueso:#F5F2EC;
  --ds-magenta:#ED1B69;
  --ds-gris:#8A8682;          /* gris cálido: rótulos y segundo tono del título */
  --ds-texto2:#4A4A4A;        /* cuerpo sobre hueso */
  --ds-claro2:#C9C6C0;        /* cuerpo sobre tinta */
  --ds-linea:#D9D5CD;         /* filete sobre hueso */
  --ds-linea-osc:#2A2A2A;     /* filete sobre tinta */
  --ds-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:#111111;
}

/* ---------- Rótulo: regla magenta + micro-texto en mono ---------- */
.curso-ds .rotulo{display:flex;align-items:center;gap:16px;margin-bottom:22px;}
.curso-ds .rotulo__regla{display:block;width:28px;height:2px;background:var(--ds-magenta);flex:0 0 auto;}
.curso-ds .rotulo__txt{
  font-family:var(--ds-mono);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ds-gris);line-height:1.4;
}
.curso-ds .eyebrow{
  font-family:var(--ds-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;color:var(--ds-gris);margin-bottom:20px;
  display:flex;align-items:center;gap:14px;
}
.curso-ds .eyebrow::before{content:"";width:28px;height:2px;background:var(--ds-magenta);flex:0 0 auto;}

/* ---------- Títulos en light 300: el gesto que define este diseño ---------- */
.curso-ds .hero h1{
  font-weight:300;letter-spacing:-.025em;line-height:1.02;color:var(--ds-hueso);
}
.curso-ds .hero .sub{
  font-weight:300;letter-spacing:-.02em;line-height:1.06;color:var(--ds-gris);
  font-size:min(var(--h1s,52px), clamp(24px,9.4vw,48px));
  max-width:24ch;margin-top:8px;
}
@media(min-width:1080px){
  .curso-ds .hero .sub{font-size:min(calc(var(--h1l,100px) * .8), clamp(32px,6.2vw,84px));}
}
.curso-ds .h2{
  font-weight:300;font-size:clamp(26px,4vw,34px);line-height:1.12;
  letter-spacing:-.02em;margin-bottom:20px;
}
.curso-ds .h2--gal{font-size:clamp(26px,4vw,34px);}

/* ---------- Fila de cifras del hero, con cuadraditos magenta ---------- */
.curso-ds .hero-cifras{
  display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin:30px 0 26px;
  font-family:var(--ds-mono);font-size:10px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ds-hueso);
}
.curso-ds .hero-cifras i{width:5px;height:5px;background:var(--ds-magenta);display:block;flex:0 0 auto;}

/* ---------- Banda magenta al pie del hero: inicio y valor ---------- */
.curso-ds .hero-banda{
  position:relative;z-index:2;margin:34px -24px 0;background:var(--ds-magenta);
  padding:22px 24px;display:flex;justify-content:space-between;
  align-items:center;gap:20px;flex-wrap:wrap;
}
.curso-ds .hero-banda span{
  display:block;font-family:var(--font-sans);font-size:9.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.82);
}
.curso-ds .hero-banda b{
  display:block;margin-top:8px;font-weight:400;font-size:17px;
  line-height:1.15;color:#fff;letter-spacing:-.01em;
}
.curso-ds .hero-banda .der{text-align:right;}

/* ---------- Fondos que alternan, como las páginas del impreso ---------- */
.curso-ds .curso-main > .block{
  margin:0 -24px;padding:52px 24px;border-top:none;background:var(--ds-hueso);
  color:var(--ds-texto2);
}
.curso-ds .curso-main > .block--oscuro{
  background:var(--ds-tinta);color:var(--ds-claro2);
}
.curso-ds .curso-main > .block:last-child{background:var(--ds-magenta);color:#fff;}

.curso-ds .curso-main > .block .h2{color:var(--ds-tinta);}
.curso-ds .curso-main > .block--oscuro .h2{color:var(--ds-hueso);}
.curso-ds .curso-main > .block:last-child .h2{color:#fff;}
.curso-ds .curso-main > .block:last-child .eyebrow{color:rgba(255,255,255,.8);}
.curso-ds .curso-main > .block:last-child .eyebrow::before{background:#fff;}
.curso-ds .about{color:var(--ds-texto2);font-size:16.5px;line-height:1.6;font-weight:400;}
.curso-ds .curso-main > .block--oscuro .about{color:var(--ds-claro2);}

/* ---------- Listas: viñeta cuadrada magenta ---------- */
.curso-ds .lista li{color:var(--ds-texto2);font-size:15px;padding-left:22px;}
.curso-ds .lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--ds-magenta);
}
.curso-ds .curso-main > .block--oscuro .lista li{color:var(--ds-claro2);}
.curso-ds .lista--num{counter-reset:ln;}
.curso-ds .lista--num li{padding-left:34px;}
.curso-ds .lista--num li::before{
  counter-increment:ln;content:counter(ln,decimal-leading-zero);
  background:transparent;width:auto;height:auto;top:.05em;
  font-family:var(--ds-mono);font-size:12px;font-weight:600;color:var(--ds-magenta);
}
.curso-ds .nota-pie{color:var(--ds-gris);border-left-color:var(--ds-linea);}

/* ---------- Desplegables: filetes de un píxel, nunca cajas ---------- */
.curso-ds .acc{border:none;border-top:1px solid var(--ds-linea);background:transparent;}
.curso-ds .acc:last-child{border-bottom:1px solid var(--ds-linea);}
.curso-ds .acc__head{padding:17px 0;color:var(--ds-tinta);}
.curso-ds .acc__head .t{font-weight:500;font-size:15px;letter-spacing:0;}
.curso-ds .acc__head .pre{font-family:var(--ds-mono);font-size:12px;font-weight:600;color:var(--ds-magenta);}
.curso-ds .acc__ico{color:var(--ds-magenta);}
.curso-ds .acc__contenido{color:var(--ds-texto2);font-size:14px;line-height:1.55;padding-bottom:18px;}
.curso-ds .acc__contenido .meta{color:var(--ds-texto2);font-family:var(--font-sans);letter-spacing:0;font-size:14px;}

/* ---------- Desglose y galería ---------- */
.curso-ds .lecc{border-top-color:var(--ds-linea);}
.curso-ds .lecc li{border-bottom-color:var(--ds-linea);color:var(--ds-tinta);}
.curso-ds .lecc__n{font-family:var(--ds-mono);color:var(--ds-magenta);}
.curso-ds .gal__it{border-color:var(--ds-linea-osc);background:#171717;}
.curso-ds .gal__sub{border-top-color:var(--ds-linea-osc);color:var(--ds-claro2);}

/* ---------- Equipo docente, sobre tinta ---------- */
.curso-ds .doc-card{border-color:var(--ds-linea-osc);background:#171717;}
.curso-ds .doc-card__body{border-top-color:var(--ds-linea-osc);}
.curso-ds .doc-card__nm{color:var(--ds-hueso);font-weight:500;}
.curso-ds .doc-card__ro{color:var(--ds-gris);}
.curso-ds .doc-card__mas{border-color:rgba(245,242,236,.4);color:var(--ds-hueso);}
.curso-ds .doc-card__mas:hover{background:var(--ds-hueso);color:var(--ds-tinta);}

/* ---------- Panel: tarjeta clara con sombra dura, como la del brochure ---------- */
.curso-ds .panel{background:var(--ds-hueso);border:none;box-shadow:5px 5px 0 0 var(--ds-tinta);}
.curso-ds .panel__blq{border-color:var(--ds-linea);}
.curso-ds .panel__lab{font-family:var(--ds-mono);font-size:9.5px;letter-spacing:.22em;color:var(--ds-gris);}
.curso-ds .panel__inicio{color:var(--ds-tinta);font-weight:300;letter-spacing:-.02em;}
.curso-ds .panel__inicio small{color:var(--ds-texto2);}
.curso-ds .panel__monto{color:var(--ds-tinta);font-weight:300;letter-spacing:-.025em;font-size:42px;}
.curso-ds .panel__monto--clp{color:var(--ds-texto2);font-weight:300;font-size:24px;}
.curso-ds .panel__ancla{color:var(--ds-gris);}
.curso-ds .panel__nota,.curso-ds .panel__cuotas,.curso-ds .panel__pie{color:var(--ds-texto2);}
.curso-ds .panel__promo{background:transparent;border:1px solid var(--ds-magenta);color:var(--ds-magenta);}
.curso-ds .panel__cta{background:var(--ds-magenta);color:#fff;border-color:var(--ds-magenta);}
.curso-ds .panel__opt{color:var(--ds-gris);}
.curso-ds .panel__pagos{border-top-color:var(--ds-linea);}
.curso-ds .panel__pagos span{color:var(--ds-gris);}
.curso-ds .pdato__k{font-family:var(--ds-mono);font-size:9.5px;letter-spacing:.18em;color:var(--ds-gris);}
.curso-ds .pdato__v{color:var(--ds-tinta);}
.curso-ds .pdato__ico{color:var(--ds-magenta);}
.curso-ds .panel__wa{border-color:var(--ds-tinta);color:var(--ds-tinta);}
.curso-ds .panel__wa:hover{background:var(--ds-tinta);color:var(--ds-hueso);}

/* ---------- Botones ---------- */
.curso-ds .btn-programa{border-color:rgba(245,242,236,.35);color:var(--ds-hueso);background:transparent;}
.curso-ds .btn-programa:hover{background:var(--ds-hueso);color:var(--ds-tinta);}
.curso-ds .curso-main .btn--ghost{border-color:var(--ds-tinta);color:var(--ds-tinta);}
.curso-ds .curso-main .btn--ghost:hover{background:var(--ds-tinta);color:var(--ds-hueso);}
.curso-ds .curso-main > .block:last-child .btn{border-color:#fff;color:#fff;background:transparent;}
.curso-ds .curso-main > .block:last-child .btn:hover{background:#fff;color:var(--ds-magenta);}
.curso-ds .curso-main > .block:last-child .know{color:#fff;}
.curso-ds .foot{border-top-color:var(--ds-linea-osc);}

/* --- V4.4 · Contraste sobre los fondos claros ---
   La hoja base pinta directamente varios elementos con --fg (hueso), pensado
   para el sitio oscuro. Sobre los bloques hueso de la ficha eso dejaba el texto
   del MISMO color que el fondo: los títulos de los desplegables quedaban
   invisibles. Aquí se fuerza el color correcto según el fondo de cada bloque. */

/* Sobre hueso: tinta y gris cálido */
.curso-ds .curso-main > .block .acc__head,
.curso-ds .curso-main > .block .acc__head .t{color:var(--ds-tinta);}
.curso-ds .curso-main > .block .acc__contenido,
.curso-ds .curso-main > .block .acc__contenido p,
.curso-ds .curso-main > .block .acc__contenido .meta,
.curso-ds .curso-main > .block .acc__contenido li{color:var(--ds-texto2);}
.curso-ds .curso-main > .block .muted,
.curso-ds .curso-main > .block .soft,
.curso-ds .curso-main > .block .small{color:var(--ds-gris);}
.curso-ds .curso-main > .block .know{color:var(--ds-magenta);}
.curso-ds .curso-main > .block p{color:var(--ds-texto2);}
.curso-ds .curso-main > .block .lecc li{color:var(--ds-tinta);}

/* Sobre tinta: hueso y gris claro */
.curso-ds .curso-main > .block--oscuro .acc__head,
.curso-ds .curso-main > .block--oscuro .acc__head .t{color:var(--ds-hueso);}
.curso-ds .curso-main > .block--oscuro p,
.curso-ds .curso-main > .block--oscuro .acc__contenido{color:var(--ds-claro2);}
.curso-ds .curso-main > .block--oscuro .muted,
.curso-ds .curso-main > .block--oscuro .soft{color:var(--ds-gris);}
.curso-ds .curso-main > .block--oscuro .acc{border-top-color:var(--ds-linea-osc);}
.curso-ds .curso-main > .block--oscuro .acc{border-top-color:var(--ds-linea-osc);}

/* Sobre magenta: todo blanco */
.curso-ds .curso-main > .block:last-child p,
.curso-ds .curso-main > .block:last-child .muted,
.curso-ds .curso-main > .block:last-child .small,
.curso-ds .curso-main > .block:last-child .soft,
.curso-ds .curso-main > .block:last-child .know{color:#fff;}

/* El pie de la galería vive sobre su propia miniatura oscura, no sobre el bloque */
.curso-ds .gal__sub{color:var(--ds-claro2);}

/* --- V4.5 · Contraste, segunda pasada ---
   Auditoría sobre los 149 textos de la ficha. Tres invisibilidades reales y
   dos casos al límite. La hoja base pinta con --fg (hueso) pensando en el
   sitio oscuro; sobre los bloques claros eso desaparece. */

/* 1 · Negritas dentro del cuerpo: eran hueso sobre hueso. */
.curso-ds .curso-main > .block b,
.curso-ds .curso-main > .block strong,
.curso-ds .curso-main > .block .about b{color:var(--ds-tinta);font-weight:600;}
.curso-ds .curso-main > .block--oscuro b,
.curso-ds .curso-main > .block--oscuro strong{color:var(--ds-hueso);}
.curso-ds .curso-main > .block:last-child b,
.curso-ds .curso-main > .block:last-child strong{color:#fff;}

/* 2 · «Ver bio» quedaba tinta sobre la tarjeta oscura del docente: invisible.
       La regla genérica de .btn--ghost le ganaba por especificidad. */
.curso-ds .curso-main .doc-card__mas{
  border-color:rgba(245,242,236,.45);color:var(--ds-hueso);background:transparent;
}
.curso-ds .curso-main .doc-card__mas:hover{background:var(--ds-hueso);color:var(--ds-tinta);}

/* 3 · Los rótulos en mono son el gesto del diseño, pero a 9,5 px el gris
       cálido original daba 3,2 de contraste. Se oscurece solo sobre hueso;
       sobre tinta el original ya cumple. */
.curso-ds .curso-main > .block .eyebrow{color:#6B6862;}
.curso-ds .curso-main > .block .rotulo__txt{color:#6B6862;}
.curso-ds .curso-main > .block--oscuro .eyebrow{color:var(--ds-gris);}
.curso-ds .panel__lab,
.curso-ds .pdato__k{color:#6B6862;}
.curso-ds .nota-pie{color:#6B6862;}
.curso-ds .curso-main > .block .muted,
.curso-ds .curso-main > .block .soft,
.curso-ds .curso-main > .block .small{color:#5F5C57;}

/* 4 · La banda magenta: el blanco al 82 % no llegaba. Va a blanco pleno y el
       rótulo sube de tamaño para no depender del color. */
.curso-ds .hero-banda span{color:#fff;font-size:10px;}

/* 5 · Sobre magenta, el texto secundario también a blanco pleno. */
.curso-ds .curso-main > .block:last-child .eyebrow{color:#fff;}

/* --- V4.6 · Los dos últimos ---
   El botón del brochure usa la misma clase en el hero (oscuro) y dentro del
   Desglose (claro): sobre hueso quedaba hueso sobre hueso, invisible. Y el
   magenta de marca sobre hueso da 3,79 a 12 px, insuficiente para los números
   de lección, así que ahí se usa una variante oscurecida que se sigue leyendo
   como magenta pero cumple. */
.curso-ds .curso-main .btn-programa{
  border-color:var(--ds-tinta);color:var(--ds-tinta);background:transparent;
}
.curso-ds .curso-main .btn-programa:hover{background:var(--ds-tinta);color:var(--ds-hueso);}

.curso-ds{--ds-magenta-osc:#C4144F;}
.curso-ds .curso-main > .block .lecc__n,
.curso-ds .curso-main > .block .acc__head .pre,
.curso-ds .curso-main > .block .acc__ico,
.curso-ds .curso-main > .block .know,
.curso-ds .curso-main > .block .lista--num li::before,
.curso-ds .pdato__ico{color:var(--ds-magenta-osc);}
.curso-ds .curso-main > .block--oscuro .acc__head .pre,
.curso-ds .curso-main > .block--oscuro .acc__ico{color:var(--ds-magenta);}

/* --- V4.7 · Contraste dentro del panel ---
   El panel pasó a fondo hueso pero es hermano de los bloques, no descendiente,
   así que no lo alcanzaban las correcciones anteriores. */
.curso-ds .panel__opt,
.curso-ds .panel__nota,
.curso-ds .panel__cuotas,
.curso-ds .panel__pie,
.curso-ds .panel .small,
.curso-ds .panel .soft{color:#5F5C57;}
.curso-ds .panel b,
.curso-ds .panel strong{color:var(--ds-tinta);}
.curso-ds .panel__promo{color:var(--ds-magenta-osc);border-color:var(--ds-magenta-osc);}
.curso-ds .panel__promo b{color:var(--ds-magenta-osc);}

/* --- V4.8 · Proporción del título del hero ---
   Venía de una fórmula que MAXIMIZABA el tamaño hasta llenar la columna: 107 px
   en escritorio. El brochure usa 55 px en una página de 816, o sea un 6,7 % del
   ancho; trasladado a la columna de 640 son unos 44 px. Las dos líneas van del
   mismo tamaño y peso, y se distinguen solo por el color, como en el diseño.
   Se anula aquí el --h1l/--h1s por curso: dentro de .curso-ds la proporción
   manda sobre el aprovechamiento del ancho. */
.curso-ds .hero h1,
.curso-ds .hero .sub{
  font-size:clamp(27px, 5vw, 46px) !important;
  line-height:1.06;
  letter-spacing:-.022em;
  max-width:26ch;
}
.curso-ds .hero .sub{margin-top:2px;}
.curso-ds .hero{padding-top:52px;}
@media(min-width:1080px){
  .curso-ds .hero h1,
  .curso-ds .hero .sub{font-size:clamp(32px, 4.1vw, 44px) !important;}
}

/* --- V4.9 · Tira de cuatro cuadrados y tamaños de texto ---
   La galería deja de ser una rejilla y pasa a ser una tira horizontal: cuatro
   cuadrados a la vista que avanzan con las flechas; al hacer clic se amplían
   en el visor de siempre. El subtítulo se lee ahí, no debajo de cada cuadro.
   Y se sube el cuerpo general: los rótulos a 9,5 px costaban leerse. */

.curso-ds .tira{position:relative;display:flex;align-items:center;gap:10px;}
.curso-ds .gal{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 30px) / 4);
  gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;flex:1 1 auto;padding-bottom:2px;
}
.curso-ds .gal::-webkit-scrollbar{display:none;}
.curso-ds .gal__it{
  scroll-snap-align:start;border:1px solid var(--ds-linea-osc);background:#171717;
  padding:0;cursor:pointer;overflow:hidden;
}
.curso-ds .gal__it img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top left;
  filter:grayscale(.35) brightness(.92);transition:filter .3s ease,transform .4s ease;
}
.curso-ds .gal__it:hover img{filter:none;transform:scale(1.05);}
.curso-ds .tira__flecha{
  flex:0 0 auto;width:34px;height:34px;background:transparent;
  border:1px solid var(--ds-linea);color:var(--ds-tinta);
  font-size:19px;line-height:1;cursor:pointer;transition:all .15s ease;
}
.curso-ds .tira__flecha:hover:not(:disabled){background:var(--ds-tinta);color:var(--ds-hueso);border-color:var(--ds-tinta);}
.curso-ds .tira__flecha:disabled{opacity:.25;cursor:default;}
.curso-ds .curso-main > .block--oscuro .tira__flecha,
.curso-ds .curso-main > .block:nth-of-type(4) .tira__flecha{
  border-color:rgba(245,242,236,.4);color:var(--ds-hueso);
}
@media(max-width:640px){
  .curso-ds .gal{grid-auto-columns:calc((100% - 10px) / 2);}
  .curso-ds .tira__flecha{width:30px;height:30px;font-size:17px;}
}

/* --- Tamaños: todo un punto arriba, que se leía apretado --- */
.curso-ds .eyebrow{font-size:11px;letter-spacing:.2em;}
.curso-ds .rotulo__txt{font-size:11px;letter-spacing:.2em;}
.curso-ds .hero-cifras{font-size:11px;letter-spacing:.14em;}
.curso-ds .acc__head .t{font-size:16.5px;}
.curso-ds .acc__head .pre{font-size:13px;}
.curso-ds .acc__contenido{font-size:15.5px;line-height:1.6;}
.curso-ds .acc__contenido .meta{font-size:15.5px;line-height:1.7;}
.curso-ds .lista li{font-size:16px;line-height:1.6;}
.curso-ds .lecc li{font-size:16.5px;}
.curso-ds .lecc__n{font-size:12.5px;}
.curso-ds .about{font-size:17.5px;line-height:1.62;}
.curso-ds .panel__lab{font-size:10.5px;letter-spacing:.2em;}
.curso-ds .pdato__k{font-size:10.5px;letter-spacing:.16em;}
.curso-ds .pdato__v{font-size:14.5px;}
.curso-ds .panel__opt,
.curso-ds .panel__nota,
.curso-ds .panel__cuotas{font-size:13px;line-height:1.55;}
.curso-ds .doc-card__ro{font-size:13.5px;}
.curso-ds .nota-pie{font-size:13.5px;}
.curso-ds .hero-banda span{font-size:10.5px;}
.curso-ds .hero-banda b{font-size:18px;}

/* --- V5.0 · La tira, con flex en vez de grid ---
   Con `grid-auto-flow:column` + `overflow-x:auto` dentro de un contenedor flex,
   el ancho porcentual de las columnas colapsaba y los cuadrados salían de 2 px.
   Con flex el porcentaje se resuelve contra el ancho real del carril. */
.curso-ds .gal{
  display:flex;grid-auto-flow:unset;grid-auto-columns:unset;
  gap:10px;overflow-x:auto;flex:1 1 0;min-width:0;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.curso-ds .gal__it{flex:0 0 calc((100% - 30px) / 4);scroll-snap-align:start;}
@media(max-width:640px){
  .curso-ds .gal__it{flex:0 0 calc((100% - 10px) / 2);}
}

/* --- V5.1 · Sin scroll-snap en la tira ---
   `scroll-snap-type: x mandatory` y el desplazamiento suave se anulaban entre
   sí: las flechas llamaban a scrollBy y el snap devolvía la tira a su sitio,
   así que no se movía. Medido en la página real. El snap era un lujo; que las
   flechas funcionen no lo es. */
.curso-ds .gal{scroll-snap-type:none;}
.curso-ds .gal__it{scroll-snap-align:none;}

/* --- V5.2 · Rótulos de sección y aire entre bloques (brief Rafael, 02-ago-2026)
   Dos cosas medidas en la ficha real:

   1 · En estas fichas cortas los bloques NO llevan <h2>: el rótulo en mono ES
       el título de la sección ("Acerca del programa", "Dirigido a"). A 11 px
       estaba haciendo un trabajo para el que no tenía tamaño. Sube a 13 px;
       el tracking baja un punto porque a mayor cuerpo el .2em abría de más.

   2 · El párrafo de cierre de cada bloque arrastraba su margen inferior contra
       el padding del bloque: 26 + 46 + 46 = 118 px de vacío entre el final de
       un texto y el rótulo siguiente. Ese margen no separa de nada, porque el
       elemento ya es el último. Se anula y el padding del bloque se ajusta,
       que es quien debe marcar el ritmo. */

/* El rótulo de sección se alinea con el resto del sitio: 12 px. El .rotulo__txt
   del hero es una microetiqueta y se queda en su cuerpo original. */
.curso-ds .eyebrow{font-size:12px;letter-spacing:.18em;}

/* OJO: el padding lleva sus 24px horizontales. Es la sangría del texto dentro
   del bloque, que compensa el sangrado de -24px del margen. Escribir aquí
   `padding:34px 0` deja el texto pegado al borde. */
.curso-ds .curso-main > .block{padding:34px 24px;}
.curso-ds .curso-main > .block > *:last-child{margin-bottom:0;}
/* display:flex y NO block: el rótulo lleva una regla magenta en ::before que
   solo toma ancho y alto dentro de un contenedor flex. Ponerlo en block la
   hace desaparecer. */
.curso-ds .curso-main > .block .eyebrow{display:flex;margin-bottom:14px;}

@media(max-width:640px){
  .curso-ds .eyebrow{font-size:11px;}
  .curso-ds .curso-main > .block{padding:28px 24px;}
}

/* --- V5.3 · Portada con foto en el hero de la ficha (brief Rafael, 02-ago-2026)
   Distinto de .hero--foto (V4.2), que difumina la imagen bajo un velo para que
   sirva de atmósfera. Aquí la foto SE VE: es la misma portada del brochure y
   tiene que leerse como tal.

   Tres reglas que vienen del encargo:
   1 · Proporción original, siempre. El alto sale de aspect-ratio con las
       medidas reales del archivo (1128x617), así que la caja tiene exactamente
       la forma de la imagen y `cover` no llega a recortar nada. Cambiar de
       imagen = cambiar esa proporción, nunca estirar.
   2 · Se funde con el fondo. Una máscara en degradado disuelve el borde
       inferior en el tinta de la página, sin corte duro.
   3 · Dos plomos, uno para cada cosa, igual que en el resto del sitio:
       · Los elementos GRÁFICOS a sangre (la foto, la banda magenta y los
         bloques de contenido) sangran -24px y comparten borde.
       · Todo el TEXTO —rótulo, título, subtítulo, cifras, botón— se queda
         dentro, con su sangría de 24px.
       Es la misma lógica de la banda magenta, que va a sangre pero lleva su
       texto con padding. Alinear también el texto al borde lo dejaba pegado
       al canto y sin respiración. */

.curso-ds .hero--portada{padding-top:22px;}
.curso-ds .hero--portada > .hero__foto{
  position:relative;z-index:1;
  margin:0 -24px -18px;
  aspect-ratio:1128 / 617;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.38) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.38) 82%,transparent 100%);
}
@media(max-width:600px){
  .curso-ds .hero--portada{padding-top:16px;}
  .curso-ds .hero--portada > .hero__foto{margin-bottom:-10px;}
}

/* ============================================================================
   V5.2 · «Qué vas a ganar» · tres bloques después de «Dirigido a».

   Apilados, no en tres columnas: la columna de contenido de la ficha mide unos
   550 px, así que en tres columnas cada párrafo caía a 17 caracteres por línea
   y 14 líneas de alto. Apilados quedan cerca de 60 caracteres, que es la medida
   cómoda de lectura.

   El número va a la izquierda del título, en su propia columna. Filete de dos
   píxeles arriba y nada más: la ficha no usa cajas, solo líneas.
   ============================================================================ */
.curso-ds .gana-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px;}
.curso-ds .gana{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;
  border-top:2px solid var(--ds-magenta);padding-top:15px;
}
.curso-ds .gana__n{
  grid-column:1;grid-row:1;
  font-family:var(--ds-mono);font-size:13px;font-weight:600;line-height:1.5;
  letter-spacing:1px;color:var(--ds-magenta);
}
.curso-ds .gana__t{
  grid-column:2;grid-row:1;margin:0;
  font-size:19.5px;line-height:1.25;font-weight:700;
  letter-spacing:-.3px;color:var(--ds-tinta);
}
.curso-ds .gana__p{
  grid-column:2;grid-row:2;margin:8px 0 0;
  font-size:15.5px;line-height:1.6;color:var(--ds-texto2);
}
.curso-ds .curso-main > .block--oscuro .gana__t{color:var(--ds-hueso);}
.curso-ds .curso-main > .block--oscuro .gana__p{color:var(--ds-claro2);}
/* En móvil el número pasa arriba: 14 px de sangría se comen el ancho útil. */
@media(max-width:560px){
  .curso-ds .gana{grid-template-columns:1fr;column-gap:0;}
  .curso-ds .gana__n{grid-column:1;grid-row:1;margin-bottom:6px;}
  .curso-ds .gana__t{grid-column:1;grid-row:2;}
  .curso-ds .gana__p{grid-column:1;grid-row:3;}
}