/* Línea visual ICBA · maqueta base */
:root{
  --navy:#183044;
  --navy-deep:#183044;
  --teal:#6FC4C1;
  --teal-soft:#E2F3F3;
  --coral:#FDC62B;
  --berry:#183044;
  --blush:#FFF4D5;
  --surface:#ffffff;
  --surface-soft:#f5f9f9;
  --text:#183044;
  --muted:#64777d;
  --line:#dfe8e9;
  --shadow:0 24px 70px rgba(24,48,68,.15);
}
body{background:linear-gradient(145deg,#e9f1f2 0%,#f7f9f9 48%,#e5eeee 100%)}
.course-shell{width:min(1360px,calc(100% - 2rem));min-height:min(900px,calc(100vh - 2rem));border-radius:28px;box-shadow:var(--shadow)}
.topbar{min-height:96px;padding:1rem 1.65rem;background:linear-gradient(105deg,var(--navy-deep),var(--navy));border-bottom:0;color:#fff}
.brand{gap:1.3rem;color:#fff;min-width:0}
.brand-logo{width:228px;height:auto;display:block;flex:0 0 auto}
.course-identity{display:grid;gap:.08rem;padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.22);min-width:0}
.course-identity .course-label{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:800;color:#bcd2d6}
.course-identity strong{font-size:1.05rem;line-height:1.15;color:#fff}
.course-identity small{font-size:.78rem;color:#d5e1e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:440px}
.top-actions .icon-button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff}
.top-actions .icon-button:hover{background:rgba(255,255,255,.14)}

.stage{min-height:590px;padding:clamp(2rem,4vw,4.5rem);grid-template-columns:minmax(0,1.25fr) minmax(290px,380px);gap:clamp(2.5rem,5vw,6rem);align-items:center;background:radial-gradient(circle at 86% 18%,#FFF4D5 0,transparent 28%),linear-gradient(135deg,#fff 0 70%,#f5f9f9 70%)}
.lesson{max-width:820px}
.eyebrow{color:var(--brand);font-size:.78rem;letter-spacing:.1em;margin-bottom:.9rem}
.lesson h1{font-size:clamp(2.5rem,5vw,5rem);color:var(--navy-deep)}
.lesson h2{font-size:clamp(2rem,3.7vw,3.5rem);color:var(--navy-deep)}
.lead{color:#183044}
.card{border-color:#e3ebec;box-shadow:0 8px 25px rgba(24,48,68,0.06);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover,.card:focus-visible{box-shadow:0 12px 30px rgba(24,48,68,0.1)}
.icon{background:var(--teal-soft);color:var(--navy)}
.definition-panel{background:linear-gradient(120deg,var(--navy-deep),#183044)}
.presenter{max-width:380px;position:relative}
.presenter:before{content:"";position:absolute;inset:-24px -28px 72px;background:radial-gradient(circle at 40% 25%,rgba(255,255,255,.82),rgba(234,244,244,.78) 34%,rgba(253,198,43,0.18) 75%,transparent);filter:blur(1px);border-radius:40px;z-index:0}
.video-frame,.narration-controls,.captions,.transcript{position:relative;z-index:1}
.video-frame{border-radius:30px;background:linear-gradient(150deg,#dce8e9,#FFF4D5);box-shadow:0 20px 45px rgba(24,48,68,0.18);border:7px solid rgba(255,255,255,.86)}
.video-frame:after{content:"";position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(to top,rgba(24,48,68,0.18),transparent);pointer-events:none}
.ai-label{background:rgba(24,48,68,0.84);backdrop-filter:blur(8px);bottom:.9rem;left:.9rem;font-size:.7rem;letter-spacing:.03em}
.audio-button{background:var(--navy)}
.course-footer{display:grid;grid-template-columns:minmax(220px,320px) minmax(240px,1fr) auto;gap:1.5rem;align-items:end;padding:1rem 1.35rem 1rem 1.1rem;background:#f8fbfb;border-top:1px solid var(--line)}
.lsa-window{display:flex;align-items:flex-end;min-width:0}
.lsa-media{width:min(100%,210px);min-width:180px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#d9e1e2;box-shadow:0 10px 22px rgba(24,48,68,0.14);border:1px solid #cad7d9;display:block;object-fit:cover}
.progress-wrap{display:grid;grid-template-columns:auto minmax(130px,1fr);gap:.75rem 1rem;align-items:center;min-width:0}
.progress-track{max-width:none;height:7px;background:#dfe8e9}
.progress-track span{background:linear-gradient(90deg,var(--brand-2),var(--brand-2))}
.pager{justify-self:end}
.primary-button,.secondary-button{min-height:48px;border-radius:14px;padding:.72rem 1.15rem}
.primary-button{background:var(--navy);border-color:var(--navy)}
.secondary-button{color:var(--navy);border-color:#bfd0d3;background:#fff}
.presenter.is-hidden{display:none}
.stage:has(.presenter.is-hidden){grid-template-columns:1fr;background:radial-gradient(circle at 88% 20%,#FFF4D5 0,transparent 30%),#fff}
.stage:has(.presenter.is-hidden) .lesson{max-width:980px}
@media(max-width:980px){
  .brand-logo{width:190px}.course-identity small{display:none}
  .stage{grid-template-columns:1fr;gap:2rem;padding:2.2rem}
  .presenter{max-width:320px;margin:0 auto}.presenter.is-hidden{display:none}
  .course-footer{grid-template-columns:minmax(200px,250px) 1fr;gap:1rem;align-items:end}.pager{grid-column:2;justify-self:end}.progress-wrap{grid-column:2}.lsa-window{grid-row:1/3;align-self:end}.lsa-media{min-width:0;width:100%;max-width:220px}
}
@media(max-width:700px){
  .course-shell{width:100%;min-height:100vh;margin:0;border-radius:0}.topbar{padding:.9rem 1rem;align-items:flex-start}.brand-logo{width:150px}.course-identity{padding-left:.8rem}.course-identity strong{font-size:.9rem}
  .stage{padding:1.6rem 1rem}.course-footer{grid-template-columns:1fr;padding:.9rem 1rem}.lsa-window,.progress-wrap,.pager{grid-column:1;grid-row:auto}.lsa-window{order:1}.progress-wrap{order:2}.pager{order:3;justify-self:stretch}.pager button{flex:1}
}


/* Ajuste v3 · LSA integrada y audio persistente */
.narration-controls{display:none}
.course-footer{display:grid;grid-template-columns:minmax(200px,250px) minmax(220px,280px) minmax(220px,1fr) auto;grid-template-areas:"lsa audio progress pager";gap:1rem 1.25rem;align-items:end;padding:1rem 1.35rem 1.1rem 1.1rem;background:linear-gradient(180deg,rgba(248,251,251,.35),#f8fbfb 28%);border-top:0}
.lsa-window{grid-area:lsa;display:flex;align-items:flex-end;gap:.6rem;min-width:0;position:relative}
.lsa-media{width:min(100%,190px);min-width:170px;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#d9e1e2;box-shadow:0 10px 22px rgba(24,48,68,0.14);border:1px solid rgba(24,48,68,0.15);display:block;object-fit:cover;transition:width .2s ease,transform .2s ease,box-shadow .2s ease}
.lsa-expand-button{width:40px;height:40px;border-radius:12px;border:1px solid #c7d5d8;background:#fff;color:var(--navy);font-size:1.05rem;font-weight:800;display:grid;place-items:center;box-shadow:0 6px 15px rgba(24,48,68,0.08)}
.lsa-expand-button:hover{background:#f2f7f7}
.lsa-window.is-expanded .lsa-media{width:min(100%,290px);box-shadow:0 16px 32px rgba(24,48,68,0.2);transform:translateY(-4px)}
.lsa-window.is-expanded .lsa-expand-button{background:var(--navy);color:#fff;border-color:var(--navy)}
.audio-dock{grid-area:audio;display:grid;gap:.35rem;align-self:center}
.audio-dock-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.audio-dock-controls{display:flex;gap:.5rem;flex-wrap:wrap}
.audio-dock .audio-button{min-width:128px}
.audio-dock .quiet-button{min-height:46px;border-radius:12px;padding:.72rem .95rem;background:#fff}
.progress-wrap{grid-area:progress;display:grid;grid-template-columns:auto minmax(140px,1fr);gap:.75rem 1rem;align-items:center;align-self:center;min-width:0}
.pager{grid-area:pager;justify-self:end;align-self:center}
@media(max-width:1160px){
  .course-footer{grid-template-columns:minmax(190px,220px) 1fr auto;grid-template-areas:"lsa audio pager" "lsa progress pager";align-items:end}
}
@media(max-width:860px){
  .course-footer{grid-template-columns:1fr 1fr;grid-template-areas:"lsa audio" "progress progress" "pager pager";align-items:start}
  .progress-wrap{grid-template-columns:1fr}
  .pager{justify-self:stretch}.pager button{flex:1}
}
@media(max-width:700px){
  .course-footer{grid-template-columns:1fr;grid-template-areas:"lsa" "audio" "progress" "pager";padding:.9rem 1rem}
  .lsa-window,.audio-dock,.progress-wrap,.pager{grid-column:1;justify-self:stretch}
  .lsa-media{width:min(100%,220px)}
  .audio-dock-controls{justify-content:flex-start}
}


/* Ajuste v4 · referencia LSA final + footer más compacto */
.course-shell{min-height:min(840px,calc(100vh - 1rem));margin:.5rem auto}
.stage{min-height:540px;padding:clamp(1.6rem,3.2vw,3.4rem) clamp(2rem,3.5vw,3.6rem) clamp(1.35rem,2.6vw,2.4rem)}
.presenter:before{inset:-18px -24px 44px}
.course-footer{padding:.55rem 1.15rem .75rem 1rem;gap:.7rem 1rem;margin-top:-2px}
.lsa-media{width:min(100%,178px);min-width:160px;border-radius:20px}
.lsa-window.is-expanded .lsa-media{width:min(100%,270px)}
.lsa-expand-button{width:36px;height:36px;border-radius:11px}
.audio-dock{gap:.22rem}
.audio-dock-label{font-size:.66rem}
.audio-dock .audio-button,.audio-dock .quiet-button,.primary-button,.secondary-button{min-height:42px;padding:.58rem .9rem}
.progress-wrap{gap:.45rem .8rem}
.progress-track{height:6px}
@media(max-width:1160px){
  .course-shell{min-height:min(820px,calc(100vh - .5rem))}
  .stage{min-height:500px;padding:1.5rem 2rem 1.15rem}
  .course-footer{padding:.5rem 1rem .7rem}
}
@media(max-width:860px){
  .course-shell{min-height:100vh;margin:0}
  .stage{min-height:auto;padding:1.35rem 1.4rem 1rem}
  .course-footer{padding:.7rem 1rem .9rem}
}
@media(max-width:700px){
  .stage{padding:1.2rem .95rem .9rem}
  .course-footer{padding:.75rem .95rem .95rem}
}


/* Ajuste v5 · usar la pieza de LSA tal cual, respetando su outline */
.lsa-media{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;object-fit:contain !important;padding:0}
.lsa-window.is-expanded .lsa-media{box-shadow:none !important;transform:none}


/* Ajuste v6 · LSA pasa al extremo derecho del footer */
.course-footer{grid-template-columns:minmax(220px,280px) minmax(220px,1fr) auto minmax(180px,220px);grid-template-areas:"audio progress pager lsa";align-items:end}
.lsa-window{grid-area:lsa;justify-self:end}
.audio-dock{grid-area:audio}
.progress-wrap{grid-area:progress}
.pager{grid-area:pager}
@media(max-width:1160px){
  .course-footer{grid-template-columns:1fr auto minmax(180px,210px);grid-template-areas:"audio pager lsa" "progress progress lsa";align-items:end}
}
@media(max-width:860px){
  .course-footer{grid-template-columns:1fr 1fr;grid-template-areas:"audio lsa" "progress progress" "pager pager"}
  .lsa-window{justify-self:end}
}
@media(max-width:700px){
  .course-footer{grid-template-columns:1fr;grid-template-areas:"audio" "progress" "pager" "lsa"}
  .lsa-window{justify-self:start}
}


/* Ajuste final v7 · footer en tres zonas: audio / navegación y avance / LSA */
.course-footer{display:grid;grid-template-columns:minmax(210px,260px) minmax(360px,1fr) minmax(185px,220px);grid-template-areas:"audio center lsa";align-items:end;column-gap:1.5rem;row-gap:.5rem;padding:.55rem 1.2rem .72rem 1.1rem}
.audio-dock{grid-area:audio;align-self:center;justify-self:start;padding-right:.5rem}
.audio-dock-controls{flex-wrap:nowrap}
.audio-dock .audio-button{min-width:116px}
.audio-dock .quiet-button{min-width:82px}
.footer-center{grid-area:center;display:grid;grid-template-columns:minmax(180px,290px) auto;align-items:center;justify-content:center;gap:1.25rem;min-width:0}
.progress-wrap{display:grid;grid-template-columns:auto minmax(110px,190px);gap:.4rem .7rem;align-items:center;justify-content:center;min-width:0;width:auto}
.progress-wrap #progress-label{font-size:.82rem;white-space:nowrap}
.progress-track{width:170px;max-width:170px;height:6px}
.pager{display:flex;gap:.55rem;justify-self:center;align-self:center}
.pager .primary-button,.pager .secondary-button{min-width:118px}
.lsa-window{grid-area:lsa;justify-self:end;align-self:end}
.lsa-media{width:172px;min-width:150px}
.lsa-expand-button{align-self:center}
@media(max-width:1160px){
  .course-footer{grid-template-columns:minmax(190px,235px) 1fr minmax(170px,205px);grid-template-areas:"audio center lsa";column-gap:1rem}
  .footer-center{grid-template-columns:1fr;gap:.45rem;justify-items:center}
  .progress-wrap{grid-template-columns:auto minmax(110px,170px)}
  .progress-track{width:155px;max-width:155px}
}
@media(max-width:860px){
  .course-footer{grid-template-columns:1fr auto;grid-template-areas:"audio lsa" "center center";align-items:start}
  .footer-center{width:100%;grid-template-columns:1fr auto;justify-content:space-between;gap:1rem}
  .progress-wrap{justify-content:start}
}
@media(max-width:700px){
  .course-footer{grid-template-columns:1fr;grid-template-areas:"audio" "center" "lsa";gap:.75rem;padding:.75rem .95rem .95rem}
  .audio-dock{justify-self:stretch}
  .footer-center{grid-template-columns:1fr;justify-items:stretch}
  .progress-wrap{grid-template-columns:auto 1fr;justify-content:stretch}
  .progress-track{width:100%;max-width:none}
  .pager{justify-self:stretch}.pager button{flex:1}
  .lsa-window{justify-self:end}
}


/* Ajuste final v8 · footer corregido para evitar superposición y recentrar audio */
.course-footer{display:grid;grid-template-columns:minmax(230px,270px) minmax(320px,1fr) minmax(180px,210px);grid-template-areas:"audio center lsa";align-items:center;column-gap:1.1rem;row-gap:.45rem;padding:.55rem 1rem .72rem 1rem}
.audio-dock{grid-area:audio;justify-self:center;align-self:center;width:max-content;max-width:100%;padding:0}
.audio-dock-label{text-align:center}
.audio-dock-controls{display:flex;justify-content:center;gap:.45rem;flex-wrap:nowrap}
.audio-dock .audio-button{min-width:112px}
.audio-dock .quiet-button{min-width:84px}
.footer-center{grid-area:center;display:grid;grid-template-columns:1fr;justify-items:center;align-items:center;gap:.5rem;min-width:0}
.progress-wrap{display:grid;grid-template-columns:1fr;justify-items:center;gap:.22rem;min-width:0;width:100%}
.progress-wrap #progress-label{font-size:.8rem;white-space:nowrap;text-align:center}
.progress-track{width:min(220px,100%);max-width:220px;height:6px}
.pager{display:flex;gap:.5rem;justify-content:center;align-items:center;justify-self:center;flex-wrap:nowrap}
.pager .primary-button,.pager .secondary-button{min-width:118px}
.lsa-window{grid-area:lsa;justify-self:end;align-self:center}
.lsa-media{width:170px;min-width:150px}
@media(max-width:1180px){
  .course-footer{grid-template-columns:minmax(215px,245px) minmax(280px,1fr) minmax(170px,195px);column-gap:.9rem}
  .progress-track{width:min(190px,100%);max-width:190px}
  .pager .primary-button,.pager .secondary-button{min-width:110px}
}
@media(max-width:920px){
  .course-footer{grid-template-columns:1fr auto;grid-template-areas:"audio lsa" "center center";align-items:start}
  .audio-dock{justify-self:start}
  .audio-dock-label{text-align:left}
  .audio-dock-controls{justify-content:flex-start}
  .footer-center{width:100%;justify-items:center}
  .progress-track{width:min(240px,100%);max-width:240px}
}
@media(max-width:700px){
  .course-footer{grid-template-columns:1fr;grid-template-areas:"audio" "center" "lsa";gap:.7rem;padding:.75rem .95rem .95rem}
  .audio-dock{justify-self:stretch;width:100%}
  .audio-dock-label{text-align:left}
  .audio-dock-controls{justify-content:flex-start;flex-wrap:wrap}
  .footer-center{justify-items:stretch}
  .progress-wrap{justify-items:start}
  .progress-track{width:100%;max-width:none}
  .pager{justify-self:stretch}.pager button{flex:1}
  .lsa-window{justify-self:end}
}


/* Ajuste v9 · progreso visible a la izquierda de navegación */
.footer-center{grid-area:center;display:grid;grid-template-columns:minmax(170px,220px) auto;align-items:center;justify-content:center;gap:.9rem;min-width:0}
.progress-wrap{display:grid;grid-template-columns:1fr;justify-items:start;align-items:center;gap:.2rem;width:100%;min-width:0}
.progress-wrap #progress-label{font-size:.78rem;white-space:nowrap;text-align:left}
.progress-track{width:100%;max-width:210px;height:6px;position:relative;z-index:1}
.pager{display:flex;gap:.5rem;justify-self:start;align-items:center;position:relative;z-index:2}
.pager .primary-button,.pager .secondary-button{min-width:118px;position:relative;z-index:2}
@media(max-width:1180px){
  .footer-center{grid-template-columns:minmax(150px,190px) auto;gap:.7rem}
  .progress-track{max-width:180px}
  .pager .primary-button,.pager .secondary-button{min-width:108px}
}
@media(max-width:920px){
  .footer-center{grid-template-columns:minmax(160px,210px) auto;justify-content:center;gap:.8rem}
  .progress-wrap{justify-items:start}
  .progress-track{max-width:200px}
}
@media(max-width:700px){
  .footer-center{grid-template-columns:1fr;gap:.45rem;justify-items:stretch}
  .progress-wrap{justify-items:start}
  .progress-track{width:100%;max-width:none}
  .pager{justify-self:stretch}.pager button{flex:1}
}

/* Ajuste v10 · separación física entre progreso y navegación */
.course-footer{
  display:grid !important;
  grid-template-columns:minmax(220px,250px) minmax(500px,1fr) minmax(175px,205px) !important;
  grid-template-areas:"audio center lsa" !important;
  align-items:center !important;
  column-gap:1rem !important;
  padding:.55rem 1rem .72rem 1rem !important;
}
.audio-dock{
  grid-area:audio !important;
  justify-self:center !important;
  padding:0 !important;
  margin:0 !important;
}
.footer-center{
  grid-area:center !important;
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1.15rem !important;
  min-width:0 !important;
  width:100% !important;
}
.progress-wrap{
  display:grid !important;
  grid-template-columns:1fr !important;
  flex:0 0 190px !important;
  width:190px !important;
  min-width:190px !important;
  max-width:190px !important;
  gap:.22rem !important;
  justify-items:start !important;
  align-items:center !important;
  margin:0 !important;
  position:relative !important;
  z-index:1 !important;
}
.progress-wrap #progress-label{
  font-size:.78rem !important;
  white-space:nowrap !important;
  text-align:left !important;
}
.progress-track{
  display:block !important;
  width:190px !important;
  min-width:190px !important;
  max-width:190px !important;
  height:6px !important;
  margin:0 !important;
  position:relative !important;
  z-index:1 !important;
  overflow:hidden !important;
}
.pager{
  display:flex !important;
  flex:0 0 auto !important;
  gap:.5rem !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:0 !important;
  position:relative !important;
  z-index:2 !important;
}
.pager .primary-button,.pager .secondary-button{
  min-width:116px !important;
  white-space:nowrap !important;
}
.lsa-window{grid-area:lsa !important;justify-self:end !important;align-self:center !important}

@media(max-width:1120px){
  .course-footer{
    grid-template-columns:minmax(205px,230px) minmax(430px,1fr) minmax(165px,190px) !important;
    column-gap:.75rem !important;
  }
  .footer-center{gap:.8rem !important}
  .progress-wrap,.progress-track{flex-basis:155px !important;width:155px !important;min-width:155px !important;max-width:155px !important}
  .pager .primary-button,.pager .secondary-button{min-width:104px !important;padding-left:.72rem !important;padding-right:.72rem !important}
}
@media(max-width:930px){
  .course-footer{
    grid-template-columns:1fr auto !important;
    grid-template-areas:"audio lsa" "center center" !important;
    row-gap:.7rem !important;
  }
  .audio-dock{justify-self:start !important}
  .footer-center{justify-content:center !important}
  .progress-wrap,.progress-track{flex-basis:180px !important;width:180px !important;min-width:180px !important;max-width:180px !important}
}
@media(max-width:700px){
  .course-footer{
    grid-template-columns:1fr !important;
    grid-template-areas:"audio" "center" "lsa" !important;
    gap:.7rem !important;
  }
  .footer-center{flex-direction:column !important;align-items:stretch !important;gap:.45rem !important}
  .progress-wrap{width:100% !important;min-width:0 !important;max-width:none !important;flex-basis:auto !important}
  .progress-track{width:100% !important;min-width:0 !important;max-width:none !important}
  .pager{width:100% !important}
  .pager button{flex:1 !important}
}


/* Ajuste v11 · altura estable durante todo el recorrido */
@media(min-width:861px){
  .course-shell{
    height:calc(100vh - 1rem);
    min-height:0;
    max-height:900px;
    grid-template-rows:auto auto minmax(0,1fr) auto;
  }
  .stage{
    min-height:0 !important;
    height:auto;
    overflow:hidden;
    align-items:center;
  }
  .lesson,.presenter{min-height:0}
  .presenter{max-height:100%;justify-content:center}
  .video-frame{max-height:430px}
  .cards{margin-top:1rem}
  .card{min-height:112px;padding:1rem}
  .objective-list{margin:1rem 0;gap:.55rem}
  .objective-list li{padding:.68rem .9rem}
  .module-map{margin-top:1rem;gap:.6rem}
  .module-row{padding:.8rem .9rem}
  .check{margin-top:.9rem;padding:.85rem}
  .definition-panel{min-height:92px;padding:1rem}
  .transcript:not([open]){margin-bottom:0}

  /* Sólo al abrir la transcripción el curso puede crecer y bajar el footer */
  .course-shell:has(.transcript[open]){
    height:auto;
    max-height:none;
    min-height:calc(100vh - 1rem);
  }
  .course-shell:has(.transcript[open]) .stage{
    overflow:visible;
    min-height:540px !important;
  }
}
@media(min-width:861px) and (max-height:780px){
  .course-shell{height:calc(100vh - .5rem);margin:.25rem auto}
  .topbar{min-height:82px;padding:.75rem 1.35rem}
  .stage{padding:1.15rem 2rem .9rem}
  .video-frame{max-height:360px}
  .lesson h1{font-size:clamp(2.1rem,4.2vw,4rem)}
  .lesson h2{font-size:clamp(1.7rem,3.1vw,2.8rem)}
  .lead{font-size:1rem}
  .course-footer{padding:.45rem 1rem .58rem}
}


/* Ajuste v12 · footer siempre visible con aire; scroll sólo en el área de contenido */
@media(min-width:861px){
  .course-shell{
    height:min(900px, calc(100vh - 1rem)) !important;
    min-height:0 !important;
    max-height:none !important;
    margin:.5rem auto !important;
    overflow:hidden !important;
  }
  .stage{
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-items:center !important;
    align-content:center !important;
    padding:1.35rem 2rem 1.15rem !important;
    scrollbar-gutter:stable;
  }
  .stage::-webkit-scrollbar{width:10px}
  .stage::-webkit-scrollbar-thumb{background:#d5dfe2;border-radius:999px;border:2px solid transparent;background-clip:padding-box}
  .stage::-webkit-scrollbar-track{background:transparent}
  .lesson,.presenter{min-height:0}
  .presenter{align-self:center !important}
  .course-footer{
    margin-top:0 !important;
    padding:.62rem 1rem .78rem 1rem !important;
    border-top:0 !important;
    box-shadow:0 -1px 0 rgba(24,48,68,0.06) inset;
  }
  /* Si se abre la transcripción, recién ahí el curso puede crecer y bajar el footer */
  .course-shell:has(.transcript[open]){
    height:auto !important;
    min-height:min(900px, calc(100vh - 1rem)) !important;
    overflow:visible !important;
  }
  .course-shell:has(.transcript[open]) .stage{
    height:auto !important;
    min-height:540px !important;
    overflow:visible !important;
  }
}
@media(min-width:861px) and (max-height:780px){
  .course-shell{
    height:calc(100vh - .5rem) !important;
    margin:.25rem auto !important;
  }
  .stage{
    padding:1.1rem 1.8rem .95rem !important;
  }
  .course-footer{
    padding:.52rem .95rem .66rem .95rem !important;
  }
}


/* Ajuste v13 · contenido con scroll real + toast fuera del footer + footer centrado + video responsive ancho */
@media(min-width:861px){
  .course-shell{
    height:min(900px, calc(100vh - 1rem)) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .stage{
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-items:start !important;
    align-content:start !important;
    padding:1.5rem 2rem 2rem !important;
    scroll-padding-bottom:2rem;
  }
  .lesson{align-self:start !important;padding-bottom:.35rem}
  .presenter{align-self:start !important;margin-top:.25rem}
  .check{margin-bottom:.45rem !important}
  .definition-panel{margin-bottom:.25rem}

  /* Mantiene el footer visible; sólo la transcripción abierta puede hacerlo bajar. */
  .course-shell:has(.transcript[open]){
    height:auto !important;
    min-height:min(900px, calc(100vh - 1rem)) !important;
    overflow:visible !important;
  }
  .course-shell:has(.transcript[open]) .stage{
    height:auto !important;
    overflow:visible !important;
    min-height:540px !important;
  }
}

/* Mensajes emergentes: arriba a la derecha, nunca sobre la navegación. */
.toast{
  left:auto !important;
  right:clamp(1rem,3vw,2.25rem) !important;
  top:clamp(7.5rem,14vh,9rem) !important;
  bottom:auto !important;
  transform:translateY(-8px) !important;
  max-width:min(360px,calc(100vw - 2rem));
  z-index:100 !important;
  box-shadow:0 12px 30px rgba(24,48,68,0.2);
}
.toast.show{transform:translateY(0) !important}

/* Footer agrupado más hacia el centro. */
@media(min-width:931px){
  .course-footer{
    grid-template-columns:220px 500px 190px !important;
    grid-template-areas:"audio center lsa" !important;
    justify-content:center !important;
    column-gap:.9rem !important;
    padding:.62rem 1rem .78rem !important;
  }
  .audio-dock{justify-self:center !important}
  .footer-center{justify-content:center !important}
  .lsa-window{justify-self:center !important}
}
@media(min-width:931px) and (max-width:1120px){
  .course-footer{
    grid-template-columns:205px 450px 175px !important;
    column-gap:.7rem !important;
  }
  .progress-wrap,.progress-track{
    flex-basis:145px !important;
    width:145px !important;
    min-width:145px !important;
    max-width:145px !important;
  }
}

/* Responsive: cuando hay avatar/video IA, ocupa el ancho disponible. */
@media(max-width:860px){
  .stage{grid-template-columns:1fr !important;gap:1.2rem !important;align-items:start !important}
  .presenter:not(.is-hidden){
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  .presenter:not(.is-hidden):before{display:none !important}
  .presenter:not(.is-hidden) .video-frame{
    width:100% !important;
    max-width:none !important;
    max-height:none !important;
    aspect-ratio:16/9 !important;
    border-radius:20px !important;
  }
  .presenter:not(.is-hidden) .video-frame video{width:100% !important;height:100% !important;object-fit:cover !important}
  .presenter:not(.is-hidden) .captions,
  .presenter:not(.is-hidden) .transcript{width:100% !important}
  .toast{top:6.5rem !important;right:1rem !important}
}


/* Ajuste v14 · sin máscara inferior, scroll natural de página + avatar responsive cuadrado */
@media(min-width:861px){
  .course-shell{
    height:auto !important;
    min-height:calc(100vh - 1rem) !important;
    max-height:none !important;
    overflow:visible !important;
    margin:.5rem auto 1rem !important;
  }
  .stage{
    height:auto !important;
    min-height:540px !important;
    overflow:visible !important;
    padding:1.5rem 2rem 1.5rem !important;
    align-items:start !important;
    align-content:start !important;
  }
  .course-footer{
    position:relative !important;
    overflow:visible !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding:.72rem 1rem 1rem !important;
  }
  .course-shell:has(.transcript[open]){
    height:auto !important;
    min-height:calc(100vh - 1rem) !important;
    overflow:visible !important;
  }
  .course-shell:has(.transcript[open]) .stage{
    height:auto !important;
    min-height:540px !important;
    overflow:visible !important;
  }
}

@media(max-width:860px){
  .course-shell{
    height:auto !important;
    min-height:100vh !important;
    overflow:visible !important;
  }
  .stage{
    overflow:visible !important;
    height:auto !important;
  }
  .presenter:not(.is-hidden) .video-frame{
    width:100% !important;
    aspect-ratio:1/1 !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:20px !important;
    background:#eef3f3 !important;
  }
  .presenter:not(.is-hidden) .video-frame video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
  }
}


/* Ajuste v15 · header redondeado + audio automático al cambiar de pantalla */
.topbar{
  border-radius:28px 28px 0 0 !important;
  overflow:hidden !important;
}
@media(max-width:700px){
  .topbar{border-radius:0 !important}
}

/* =========================================================
   OPCIÓN B · Línea visual editorial / tarjetas interactivas
   Mantiene estructura funcional del prototipo ICBA
   ========================================================= */
:root{
  --b-ink:#183044;
  --b-muted:#5b6b78;
  --b-coral:#FDC62B;
  --b-coral-soft:#FFF4D5;
  --b-teal:#6FC4C1;
  --b-teal-soft:#E2F3F3;
  --b-paper:#ffffff;
  --b-card:#ffffff;
  --b-line:#dfe5e8;
  --b-soft:#f3f7f8;
}

body{
  background:#eef3f3 !important;
  color:var(--b-ink) !important;
}
.course-shell{
  width:min(1440px,calc(100% - 2rem)) !important;
  margin:1rem auto !important;
  min-height:calc(100vh - 2rem) !important;
  border-radius:28px !important;
  background:var(--b-paper) !important;
  box-shadow:0 22px 64px rgba(24,48,68,0.12) !important;
  overflow:visible !important;
}

/* Header claro y editorial */
.topbar{
  background:rgba(255,255,255,.96) !important;
  color:var(--b-ink) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  border-bottom:1px solid #e4e7e9 !important;
  border-radius:28px 28px 0 0 !important;
  min-height:104px !important;
  padding:1rem 1.9rem !important;
  box-shadow:0 8px 24px rgba(24,48,68,0.05) !important;
}
.brand{color:var(--b-ink) !important;gap:1.45rem !important}
.brand-logo{
  width:220px !important;
  filter:brightness(0) saturate(100%) !important;
  opacity:.88 !important;
}
.course-identity{
  border-left:1px solid #d8dfe0 !important;
  padding-left:1.35rem !important;
  gap:.15rem !important;
}
.course-identity .course-label{color:var(--brand) !important;font-size:.7rem !important}
.course-identity strong{color:var(--b-ink) !important;font-size:1.15rem !important}
.course-identity small{color:#75808f !important}
.top-actions .icon-button{
  color:var(--b-ink) !important;
  background:#f7f8fa !important;
  border:1px solid #dfe4e8 !important;
  border-radius:999px !important;
  padding:.72rem 1rem !important;
}
.top-actions .icon-button:hover{background:#eef2f3 !important}


/* Área central */
.stage{
  background:
    radial-gradient(circle at 100% 0%,rgba(111,196,193,0.09) 0,transparent 18%),
    radial-gradient(circle at 0% 100%,rgba(253,198,43,0.08) 0,transparent 20%),
    var(--b-paper) !important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,420px) !important;
  gap:2.2rem !important;
  align-items:start !important;
  min-height:560px !important;
  padding:2.2rem 2.4rem 2rem !important;
  overflow:visible !important;
}
.stage:has(.presenter.is-hidden){grid-template-columns:minmax(0,1fr) !important}
.stage:has(.presenter.is-hidden) .lesson{max-width:1050px !important;margin:0 auto !important;width:100% !important}
.lesson{max-width:none !important;padding:.15rem 0 .8rem !important}
.eyebrow{
  color:var(--brand) !important;
  font-size:.78rem !important;
  letter-spacing:.075em !important;
  font-weight:800 !important;
  margin:0 0 .8rem !important;
}
.lesson h1,.lesson h2{
  color:var(--b-ink) !important;
  letter-spacing:-.035em !important;
  margin:.05rem 0 .8rem !important;
}
.lesson h1{font-size:clamp(2.5rem,4.5vw,4.55rem) !important}
.lesson h2{font-size:clamp(2rem,3.25vw,3.25rem) !important}
.lead{color:var(--b-muted) !important;font-size:1.08rem !important;max-width:68ch !important}
.pill{
  background:var(--b-coral-soft) !important;
  color:var(--brand) !important;
  border:1px solid #F6D780 !important;
}

/* Avatar */
.presenter{max-width:420px !important;justify-self:end !important}
.presenter:before{display:none !important}
.video-frame{
  border-radius:22px !important;
  border:1px solid #ccd2d7 !important;
  box-shadow:0 10px 28px rgba(24,48,68,0.08) !important;
  background:#ecebea !important;
  aspect-ratio:1/1 !important;
}
.video-frame video{object-fit:cover !important}
.video-frame:after{display:none !important}
.ai-label{
  background:rgba(24,48,68,0.86) !important;
  border-radius:999px !important;
  font-size:.68rem !important;
}
.captions{border-radius:14px !important;border-color:#d9dee1 !important;background:#fff !important}
.transcript summary{color:var(--b-ink) !important}

/* Tarjetas / recursos */
.cards{gap:1rem !important;margin-top:1.2rem !important}
.card{
  border:1px solid var(--b-line) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:none !important;
  min-height:150px !important;
  padding:1.2rem 1.25rem !important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease !important;
}
.card:hover,.card:focus-visible{transform:translateY(-2px) !important;border-color:#cfd5d6 !important}
.card.active,.card.visited{
  border:1.5px solid #fdc62b !important;
  background:var(--b-coral-soft) !important;
}
.card:nth-child(even).active,.card:nth-child(even).visited{border-color:#8fd3d0 !important;background:var(--b-teal-soft) !important}
.card h3{color:var(--b-ink) !important;font-size:1.15rem !important;margin:.1rem 0 .45rem !important}
.card p{color:var(--b-muted) !important}
.icon{
  width:42px !important;height:42px !important;border-radius:50% !important;
  background:var(--b-coral-soft) !important;color:var(--brand) !important;
  border:1px solid #F6D780 !important;
}
.card:nth-child(even) .icon{background:var(--b-teal-soft) !important;color:var(--brand) !important;border-color:#ccebea !important}

/* Objetivos como tarjetas visuales */
.objective-list{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:1rem !important;
  margin:1.4rem 0 0 !important;
}
.objective-list li{
  display:block !important;
  min-height:150px !important;
  border:1px solid var(--b-line) !important;
  border-left:1px solid var(--b-line) !important;
  border-radius:18px !important;
  background:#fff !important;
  padding:1.15rem !important;
}
.objective-list li:nth-child(1),.objective-list li:nth-child(4){background:var(--b-teal-soft) !important;border-color:#b9e0de !important}
.objective-list li b{
  display:grid !important;place-items:center !important;
  width:34px !important;height:34px !important;border-radius:50% !important;
  background:var(--b-coral-soft) !important;color:var(--brand) !important;
  margin-bottom:.75rem !important;font-size:.78rem !important;
}
.objective-list li span{color:var(--b-ink) !important;line-height:1.42 !important}

/* Recorrido como timeline */
.module-map{position:relative !important;margin:1.3rem 0 0 !important;gap:.45rem !important;max-width:760px !important}
.module-map:before{content:"";position:absolute;left:22px;top:24px;bottom:24px;width:2px;background:#d8dde1;z-index:0}
.module-row{
  position:relative !important;z-index:1 !important;
  grid-template-columns:44px 1fr auto !important;
  border:0 !important;background:transparent !important;
  border-radius:0 !important;padding:.7rem 0 !important;
}
.module-row.active{border:0 !important;background:transparent !important}
.module-number{background:#f1f3f5 !important;color:#9ba7b6 !important;border:1px solid #e4e7eb !important}
.module-row.active .module-number{background:var(--brand-2) !important;color:#fff !important;border-color:var(--brand-2) !important;box-shadow:0 0 0 4px #FFE7A0 !important}
.module-row strong{color:var(--b-ink) !important}
.module-row.disabled strong,.module-row.disabled .status{color:#9ba7b6 !important}
.module-row.active .status{color:var(--brand) !important}

/* Paneles explicativos */
.definition-panel{
  background:#fff !important;
  color:var(--b-ink) !important;
  border:1px solid #d9dee1 !important;
  border-radius:18px !important;
  min-height:96px !important;
  padding:1rem 1.15rem !important;
  box-shadow:none !important;
}
.definition-panel h3{color:var(--b-ink) !important}
.definition-panel p{color:var(--b-muted) !important}

/* Preguntas de comprobación con opciones tipo encuesta */
.check{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:1rem 0 0 !important;
  margin:1rem 0 0 !important;
}
.check legend{
  color:var(--brand) !important;
  text-transform:uppercase !important;
  font-size:.74rem !important;
  letter-spacing:.07em !important;
  margin-bottom:.45rem !important;
}
.check>p:first-of-type{font-size:1.08rem !important;color:var(--b-ink) !important;margin:.3rem 0 .8rem !important}
.answer-row{display:grid !important;grid-template-columns:1fr !important;gap:.55rem !important}
.answer-row button{
  width:100% !important;
  min-height:52px !important;
  text-align:left !important;
  padding:.8rem 1rem .8rem 2.8rem !important;
  border:1px solid var(--b-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  color:var(--b-ink) !important;
  position:relative !important;
  font-weight:600 !important;
}
.answer-row button:before{
  content:"";position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;border:2px solid #d1d7db;background:#fff;
}
.answer-row button:hover,.answer-row button:focus-visible{border-color:#a9cfce !important;background:#f8fcfc !important}
.feedback{
  background:var(--b-teal-soft) !important;
  color:var(--b-ink) !important;
  border:1px solid #bfe2df !important;
  border-radius:14px !important;
  padding:.8rem 1rem !important;
  min-height:0 !important;
}
.feedback:empty{display:none !important}
.explore-status{color:#94a1b3 !important;font-size:.85rem !important}

/* Footer fijo visualmente igual en todas las pantallas */
.course-footer{
  display:grid !important;
  grid-template-columns:245px minmax(440px,620px) 210px !important;
  grid-template-areas:"audio center lsa" !important;
  justify-content:center !important;
  align-items:center !important;
  gap:1rem !important;
  background:rgba(255,255,255,.97) !important;
  border-top:1px solid #dee2e5 !important;
  border-radius:0 0 28px 28px !important;
  padding:.8rem 1.1rem !important;
  margin:0 !important;
  box-shadow:0 -8px 22px rgba(31,51,60,.03) !important;
  overflow:visible !important;
}
.audio-dock{grid-area:audio !important;justify-self:center !important;display:grid !important;gap:.25rem !important;padding:0 !important}
.audio-dock-label{font-size:.64rem !important;color:#718096 !important;text-align:left !important;letter-spacing:.09em !important}
.audio-dock-controls{display:flex !important;gap:.45rem !important;flex-wrap:nowrap !important}
.audio-dock .audio-button,.audio-dock .quiet-button{
  min-height:42px !important;border-radius:999px !important;padding:.55rem .9rem !important;
  border:1px solid #dfe4e8 !important;
}
.audio-dock .audio-button{background:#f7f9fa !important;color:var(--b-ink) !important;min-width:110px !important}
.audio-dock .quiet-button{background:#fff !important;color:#6f7a88 !important;min-width:84px !important}
.footer-center{
  grid-area:center !important;display:flex !important;align-items:center !important;
  justify-content:center !important;gap:1.2rem !important;min-width:0 !important;
}
.progress-wrap{
  flex:0 0 220px !important;width:220px !important;min-width:220px !important;max-width:220px !important;
  display:grid !important;grid-template-columns:1fr !important;gap:.28rem !important;justify-items:start !important;
}
.progress-wrap #progress-label{font-size:.78rem !important;color:#7e8794 !important;white-space:nowrap !important}
.progress-track{width:220px !important;max-width:220px !important;height:6px !important;background:#e8ecee !important}
.progress-track span{background:linear-gradient(90deg,var(--brand-2),#fdc62b) !important}
.pager{display:flex !important;gap:.45rem !important;align-items:center !important;justify-content:center !important}
.primary-button,.secondary-button{
  min-height:44px !important;border-radius:14px !important;padding:.6rem 1rem !important;min-width:110px !important;
}
.primary-button{background:var(--brand-2) !important;border-color:var(--brand-2) !important;color:#fff !important}
.secondary-button{background:#fff !important;border-color:#d9e0e2 !important;color:var(--b-ink) !important}
.lsa-window{grid-area:lsa !important;justify-self:center !important;align-self:center !important;gap:.45rem !important}
.lsa-media{width:150px !important;min-width:150px !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;object-fit:contain !important}
.lsa-expand-button{width:34px !important;height:34px !important;border-radius:50% !important;background:#f7f8fa !important;color:var(--b-ink) !important;border:1px solid #dfe4e8 !important;box-shadow:none !important}
.lsa-window.is-expanded .lsa-media{width:250px !important}

/* Toast */
.toast{background:var(--b-ink) !important;border-radius:12px !important}

/* Responsive */
@media(max-width:1120px){
  .course-footer{grid-template-columns:220px minmax(390px,1fr) 185px !important;gap:.7rem !important}
  .progress-wrap,.progress-track{width:180px !important;min-width:180px !important;max-width:180px !important;flex-basis:180px !important}
  .lsa-media{width:135px !important;min-width:135px !important}
}
@media(max-width:900px){
  .course-shell{width:100% !important;margin:0 !important;border-radius:0 !important}
  .topbar{border-radius:0 !important}
  .stage{grid-template-columns:1fr !important;padding:1.5rem 1.1rem !important}
  .presenter:not(.is-hidden){width:100% !important;max-width:none !important;justify-self:stretch !important}
  .presenter:not(.is-hidden) .video-frame{width:100% !important;aspect-ratio:1/1 !important;max-height:none !important;border-radius:18px !important}
  .presenter:not(.is-hidden) .video-frame video{object-fit:contain !important}
  .objective-list{grid-template-columns:1fr 1fr !important}
  .course-footer{
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:"audio lsa" "center center" !important;
    border-radius:0 !important;
    row-gap:.8rem !important;
  }
  .audio-dock{justify-self:start !important}
  .lsa-window{justify-self:end !important}
  .footer-center{width:100% !important;justify-content:space-between !important}
}
@media(max-width:620px){
  .brand-logo{width:145px !important}
  .course-identity{display:none !important}
  .lesson h1{font-size:2.35rem !important}.lesson h2{font-size:1.95rem !important}
  .cards,.cards.three,.objective-list{grid-template-columns:1fr !important}
  .course-footer{grid-template-columns:1fr !important;grid-template-areas:"audio" "center" "lsa" !important;gap:.75rem !important}
  .audio-dock,.lsa-window{justify-self:center !important}
  .footer-center{flex-direction:column !important;gap:.65rem !important}
  .progress-wrap,.progress-track{width:100% !important;min-width:0 !important;max-width:none !important;flex-basis:auto !important}
  .pager{width:100% !important}.pager button{flex:1 !important}
}


/* Flip cards · opción editorial */
.flip-grid{display:grid;gap:1rem;margin-top:1.5rem;align-items:stretch}
.flip-grid.dual{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
.flip-grid.quad{grid-template-columns:repeat(4,minmax(0,1fr))}
.connector-arrow{display:grid;place-items:center;align-self:center;justify-self:center;width:56px;height:56px;border-radius:50%;background:#f4f7f8;color:#8da0aa;font-size:2rem;box-shadow:inset 0 0 0 1px #e3ebec}
.flip-card{position:relative;min-height:240px;padding:0;border:0;background:transparent;cursor:pointer;perspective:1200px;color:inherit;text-align:left}
.flip-card .flip-inner{position:relative;display:block;width:100%;height:100%;min-height:240px;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1.2rem;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #e3ebec;background:#fff;box-shadow:0 8px 25px rgba(24,48,68,0.06)}
.flip-front{justify-content:flex-start}
.flip-back{transform:rotateY(180deg)}
.reveal-card.donation .flip-front,.reveal-card.donation .flip-back{background:linear-gradient(180deg,#FFF4D5,#FFF4D5);border-color:#F6D780}
.reveal-card.transplant .flip-front,.reveal-card.transplant .flip-back{background:linear-gradient(180deg,#f6fbfb,#eef8f8);border-color:#cbe6e7}
.principle-card .flip-front,.principle-card .flip-back{background:#fff}
.principle-card.visited .flip-front,.principle-card.visited .flip-back{border-color:#F6D780}
.flip-card:hover .flip-face,.flip-card:focus-visible .flip-face{box-shadow:0 12px 30px rgba(24,48,68,0.1)}
.flip-card .icon{margin-bottom:.85rem}
.flip-face h3{margin:.1rem 0 .55rem;color:var(--navy-deep);font-size:1.15rem;line-height:1.18}
.flip-face p{margin:0;color:#52646b}
.flip-back p{font-size:1rem;line-height:1.45}
.flip-back strong{color:var(--navy-deep)}
.flip-hint{margin-top:auto;padding-top:1rem;font-size:.82rem;font-weight:700;color:#8d9ca2}
.mini-tag{display:inline-flex;padding:.32rem .7rem;border-radius:999px;background:rgba(253,198,43,0.12);color:var(--brand);font-size:.8rem;font-weight:800;margin-bottom:.85rem}
.flip-card.is-flipped .flip-front,.flip-card.is-flipped .flip-back,.flip-card.visited .flip-front,.flip-card.visited .flip-back{border-width:2px}
.principle-card .flip-face{min-height:228px}
@media(max-width:1100px){
  .flip-grid.quad{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .flip-grid.dual{grid-template-columns:1fr;gap:.9rem}
  .connector-arrow{display:none}
  .flip-grid.quad{grid-template-columns:1fr}
  .flip-card,.flip-card .flip-inner,.principle-card .flip-face{min-height:210px}
}

/* Ajuste v15 · videos verticales 9:16 de la presentadora en el marco cuadrado.
   Se ancla el recorte arriba (cara centrada) en lugar de recortar al centro, que cortaba la frente.
   La misma ventana se usa para los pósters (assets/avatar-0X-*.jpg), así no hay salto al reproducir. */
.video-frame video{object-fit:cover !important;object-position:50% 5% !important}
@media(max-width:900px){
  .presenter:not(.is-hidden) .video-frame video{object-fit:cover !important;object-position:50% 5% !important}
}

/* Ajuste v16 · el video se reproduce con un clic sobre él (independiente de la voz) y los subtítulos van sobre el video.
   El rótulo «Avatar IA» pasa arriba a la izquierda para dejar libre la zona inferior de los subtítulos. */
.video-frame .video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;display:grid;place-items:center;z-index:2}
.video-frame .video-play:focus-visible{outline:3px solid var(--focus);outline-offset:-6px}
.video-play-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:rgba(24,48,68,0.74);color:#fff;box-shadow:0 8px 22px rgba(24,48,68,0.32);transition:opacity .18s ease,transform .18s ease}
.video-play-icon svg{width:30px;height:30px}
.video-play-icon .icon-play{margin-left:4px}
.video-play-icon .icon-pause{display:none}
.video-play:hover .video-play-icon{transform:scale(1.06)}
.video-frame.is-playing .video-play-icon{opacity:0}
.video-frame.is-playing .icon-play{display:none}
.video-frame.is-playing .icon-pause{display:block}
.video-frame.is-playing .video-play:hover .video-play-icon,.video-frame.is-playing .video-play:focus-visible .video-play-icon{opacity:1}
.video-frame:not(.has-video) .video-play,.video-frame:not(.has-video) .video-cc,.video-frame:not(.has-video) .video-captions{display:none}
.video-captions{position:absolute;left:.6rem;right:.6rem;bottom:.75rem;z-index:3;text-align:center;pointer-events:none}
.video-captions[hidden]{display:none}
.video-captions span{display:inline-block;max-width:100%;padding:.35rem .65rem;border-radius:8px;background:rgba(24,48,68,0.84);color:#fff;font-size:.86em;font-weight:600;line-height:1.35}
.video-frame .ai-label{top:.7rem;bottom:auto;left:.7rem;z-index:4;pointer-events:none}
.video-cc{position:absolute;top:.6rem;right:.6rem;z-index:4;min-width:48px;min-height:36px;padding:0 .6rem;border-radius:10px;border:1px solid rgba(255,255,255,.7);background:rgba(24,48,68,0.62);color:#fff;font-weight:800;font-size:.78rem;letter-spacing:.05em;cursor:pointer}
.video-cc[aria-pressed="false"]{background:rgba(24,48,68,0.38);color:rgba(255,255,255,.78);text-decoration:line-through}
.video-cc:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--focus)}
@media(max-width:900px){.video-captions span{font-size:.8em}}

/* ============================================================================
   Ajuste v17 · Paleta institucional + pantallas nuevas
   principal #183044 (--brand) · secundario #FDC62B (--brand-2) · terciario #6FC4C1 (--brand-3) · fondo blanco
   Regla de uso: el amarillo y el turquesa se usan como RELLENO, nunca como color de texto sobre blanco
   (contraste insuficiente); el texto va siempre en el principal.
   ============================================================================ */

/* Fondo blanco */
body{background:#fff !important;color:var(--brand)}
.course-shell{background:#fff;border:1px solid #dfe5e8}
.stage,.stage:has(.presenter.is-hidden){background:#fff !important}
.presenter:before{display:none !important}
.course-footer{background:#fff !important}

/* Botones: principal = amarillo con texto y borde principal; secundario = blanco con borde principal */
.primary-button{background:var(--brand-2) !important;color:var(--brand) !important;border:1.5px solid var(--brand) !important}
.primary-button:not(:disabled):hover{box-shadow:0 6px 16px rgba(24,48,68,.22);transform:translateY(-1px)}
.secondary-button{background:#fff;color:var(--brand) !important;border:1.5px solid var(--brand) !important}
a.secondary-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:46px}
.secondary-button:not(:disabled):hover{background:var(--brand-3-tint)}
.audio-dock .audio-button:hover,.audio-dock .quiet-button:hover{background:var(--brand-3-tint) !important;border-color:var(--brand-3) !important}
.final-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.final-actions[hidden]{display:none}
.pager{flex-wrap:wrap}

/* Progreso y acentos */
.progress-track span{background:var(--brand-2) !important}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow:before{content:"";flex:0 0 auto;width:1.5rem;height:.28rem;border-radius:99px;background:var(--brand-2)}
.pill{background:var(--brand-2) !important;color:var(--brand) !important;border:1px solid var(--brand-2) !important}
.icon,.card:nth-child(even) .icon{background:var(--brand-3-tint) !important;color:var(--brand) !important;border:1px solid var(--brand-3-line) !important}
.objective-list li b{background:var(--brand-2) !important;color:var(--brand) !important}
.module-row.active .module-number{background:var(--brand-2) !important;color:var(--brand) !important;border-color:var(--brand-2) !important;box-shadow:0 0 0 4px var(--brand-2-tint) !important}
.mini-tag{background:var(--brand-2-tint) !important;color:var(--brand) !important}
.flip-hint,.flip-face p{color:var(--b-muted)}

/* Preguntas rápidas: estado correcto / incorrecto (con ícono y texto, no solo color) */
.answer-row button:hover,.answer-row button:focus-visible{border-color:var(--brand-3) !important;background:var(--brand-3-tint) !important}
.answer-row button.is-correct{border-color:var(--brand-3) !important;background:var(--brand-3-tint) !important}
.answer-row button.is-correct:before{content:"✓";display:grid;place-items:center;background:var(--brand-3);border-color:var(--brand-3);color:var(--brand);font-size:.72rem;font-weight:900;line-height:1}
.answer-row button.is-wrong{border-color:var(--brand-2) !important;background:var(--brand-2-tint) !important}
.answer-row button.is-wrong:before{content:"✕";display:grid;place-items:center;background:var(--brand-2);border-color:var(--brand-2);color:var(--brand);font-size:.68rem;font-weight:900;line-height:1}
.feedback[data-state="right"]{background:var(--brand-3-tint) !important;border-color:var(--brand-3-line) !important}
.feedback[data-state="wrong"]{background:var(--brand-2-tint) !important;border-color:var(--brand-2-line) !important}

/* Aviso de lo que falta para poder avanzar */
.gate-status{display:flex;align-items:center;gap:.65rem;margin:1.25rem 0 0;font-weight:700;color:var(--brand)}
.gate-status:before{content:"";flex:0 0 auto;width:.8rem;height:.8rem;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 4px var(--brand-2-tint)}
.gate-status.is-done:before{background:var(--brand-3);box-shadow:0 0 0 4px var(--brand-3-tint)}

/* Videos 2 y 3: encuadre 3:4 (hombros y parte del torso) en vez de recorte cuadrado de cara */
.video-frame.frame-wide,.presenter:not(.is-hidden) .video-frame.frame-wide{aspect-ratio:3/4 !important;max-height:none !important}
.video-frame.frame-wide video,.presenter:not(.is-hidden) .video-frame.frame-wide video{object-position:50% 0% !important}
.video-frame.frame-wide .video-play{align-content:end;padding-bottom:22%}

/* Examen */
.exam{margin-top:.5rem}
.exam-options{display:grid;gap:.55rem;margin:.75rem 0 .25rem}
.exam-option{display:flex;align-items:center;gap:.8rem;min-height:52px;padding:.8rem 1rem;border:1px solid var(--b-line);border-radius:14px;background:#fff;font-weight:700;color:var(--brand);cursor:pointer}
.exam-option:hover{border-color:var(--brand-3);background:var(--brand-3-tint)}
.exam-option input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--brand)}
.exam-option:has(input:checked){border-color:var(--brand);background:var(--brand-2-tint);box-shadow:inset 0 0 0 1px var(--brand)}
.exam-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.exam-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.exam-meta{margin:0;color:var(--b-muted);font-size:.9rem}
.exam-result{margin-top:1.25rem;padding:1.4rem;border:1.5px solid var(--b-line);border-radius:18px;background:#fff;max-width:560px}
.exam-result.is-pass{border-color:var(--brand-3);background:var(--brand-3-tint)}
.exam-result.is-fail{border-color:var(--brand-2);background:var(--brand-2-tint)}
.exam-score{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1.1rem}
.exam-score div{padding:.2rem 0}
.exam-score dt{font-size:.85rem;font-weight:700;color:var(--b-muted)}
.exam-score dd{margin:.15rem 0 0;font-size:2rem;font-weight:900;color:var(--brand)}
.exam-verdict{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;font-size:1.15rem;font-weight:800;color:var(--brand)}
.exam-verdict:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}
.exam-verdict-icon{display:grid;place-items:center;flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--brand-2);color:var(--brand);font-weight:900}
.exam-result.is-pass .exam-verdict-icon{background:var(--brand-3)}

/* Pie en la última pantalla: con 3 botones el navegador no entra al lado de la barra de progreso,
   así que baja a una segunda línea (en el resto de las pantallas todo queda en una sola fila). */
.footer-center{flex-wrap:wrap !important;row-gap:.6rem !important}
.pager{max-width:100%}
/* El link «Descargar resumen» tiene el mismo tamaño y tipografía que los botones vecinos */
a.secondary-button{font-family:Arial,Helvetica,sans-serif;font-size:13.3333px;line-height:normal}

/* Textos grises informativos que no llegaban al contraste AA (4.5:1) sobre blanco: se llevan al gris de apoyo de la paleta */
.progress-wrap #progress-label,.explore-status,.audio-dock-label,.course-identity small{color:var(--b-muted) !important}

/* Los botones finales («Descargar resumen» / «Realizar examen») traían el padding muy ajustado
   heredado de las reglas de .pager para angostos con 2 botones; con texto más largo y 3 elementos
   el texto quedaba pegado al borde. Se les da su propio padding, sin el min-width que los achicaba. */
.final-actions .primary-button,.final-actions .secondary-button{min-width:0 !important;padding:.72rem 1.05rem !important;white-space:nowrap}
@media(max-width:480px){
  .final-actions{flex-direction:column;align-items:stretch}
  .final-actions .primary-button,.final-actions .secondary-button{width:100%;text-align:center}
}

/* Ajuste v19 · Header con fondo principal y texto blanco (sin botón de accesibilidad) */
.topbar{background:var(--brand) !important;color:#fff !important;border:0 !important}
.brand{color:#fff !important}
.brand-logo{filter:none !important;opacity:1 !important}
.course-identity{border-left:1px solid rgba(255,255,255,.3) !important}
.course-identity .course-label{color:var(--brand-2) !important}
.course-identity strong{color:#fff !important}
.course-identity small{color:rgba(255,255,255,.8) !important}
.top-actions .icon-button{color:#fff !important;background:rgba(255,255,255,.14) !important;border:1px solid rgba(255,255,255,.36) !important}
.top-actions .icon-button:hover{background:rgba(255,255,255,.22) !important}