/* =========================================================
   Cladera Academy - estilos públicos y del estudiante
   ========================================================= */
:root{
  --ink:#1b1f3b;        /* texto y fondos oscuros */
  --ink-2:#4a4e69;      /* texto secundario */
  --muted:#7b7f99;
  --violet:#5b3df5;     /* acción principal */
  --violet-d:#4527d6;
  --violet-50:#f0ecff;
  --tang:#ff7a45;       /* acento: precios, insignias */
  --tang-50:#fff1ea;
  --mint:#16a37f;       /* gratis / completado */
  --mint-50:#e7f7f1;
  --amber:#e8a317;
  --red:#d64545;
  --paper:#f7f6fb;      /* fondo general */
  --white:#ffffff;
  --line:#e4e1f2;
  --r-lg:22px; --r:14px; --r-sm:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Bricolage Grotesque',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--tang);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.95rem;padding:.8rem 1.35rem;border-radius:999px;
  transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--violet-d)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2c3160}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-mint{background:var(--mint);color:#fff}
.btn-tang{background:var(--tang);color:#fff}
.btn-block{width:100%}
.btn-lg{padding:1rem 1.6rem;font-size:1.02rem}
.btn[disabled],.btn.off{background:#dcdae6;color:#8a8aa0;cursor:not-allowed}

/* ---------- Encabezado ---------- */
.topnav{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.topnav .wrap{display:flex;align-items:center;gap:1.5rem;height:68px}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.logo-mark i{color:#fff;font-size:.95rem}
.logo-mark:after{content:"";position:absolute;right:-6px;bottom:-6px;width:16px;height:16px;border-radius:50%;background:var(--tang)}
.nav-links{display:flex;gap:1.4rem;margin-left:1rem}
.nav-links a{color:var(--ink-2);font-weight:500}
.nav-links a:hover,.nav-links a.on{color:var(--violet)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.user-chip{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--violet-50);color:var(--violet);display:grid;place-items:center;font-weight:800}
.nav-toggle{display:none;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--ink)}
@media(max-width:860px){
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;
    padding:1rem 20px;border-bottom:1px solid var(--line);margin:0;gap:.9rem}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .nav-right .hide-sm{display:none}
}

/* ---------- Hero ---------- */
.hero{background:var(--white);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;padding-top:64px;padding-bottom:72px}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:800;max-width:14ch}
.hero p.lead{font-size:1.12rem;color:var(--ink-2);margin:1.2rem 0 1.8rem;max-width:46ch}
.search{display:flex;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px;max-width:520px}
.search:focus-within{border-color:var(--violet)}
.search i{align-self:center;margin:0 .4rem 0 .9rem;color:var(--muted)}
.search input{flex:1;border:0;background:transparent;font:inherit;font-size:1rem;padding:.6rem .4rem;outline:none;min-width:0;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{padding:.4rem .9rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.88rem;color:var(--ink-2)}
.chip:hover,.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Escalera de temas (elemento protagonista) */
.stair{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:26px 26px 22px;position:relative}
.stair-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:18px}
.stair-head h3{font-size:1.15rem;line-height:1.25;max-width:24ch}
.stair-head small{color:#b9bce0;display:block;margin-top:.3rem;font-size:.85rem}
.stair-price{background:var(--tang);color:#fff;font-weight:800;border-radius:12px;padding:.35rem .7rem;font-size:.95rem;white-space:nowrap}
.steps{display:flex;align-items:flex-end;gap:6px;height:210px}
.step{flex:1;background:#2d3266;border-radius:8px 8px 0 0;position:relative;display:flex;align-items:flex-start;justify-content:center;
  padding-top:8px;font-weight:800;font-size:.85rem;color:#c9ccf0;transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.step:last-child{background:var(--violet);color:#fff}
.step .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;color:var(--ink);font-weight:600;
  font-size:.78rem;padding:.4rem .6rem;border-radius:8px;width:max-content;max-width:200px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2}
.step:hover .tip,.step:focus .tip{opacity:1}
.flag{position:absolute;right:26px;top:96px;color:var(--tang);font-size:1.4rem}
.stair-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid #33386c;font-size:.88rem;color:#b9bce0}
.stair-foot a{color:#fff;font-weight:700}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.step{animation:none}}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:48px}.steps{height:170px}}

/* ---------- Secciones ---------- */
.section{padding:64px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:28px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.025em;line-height:1.1}
.sec-head p{color:var(--ink-2);margin-top:.4rem;max-width:56ch}
.link-more{font-weight:700;color:var(--violet)}

/* ---------- Tarjetas de curso ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card:hover{border-color:#c9c1f5}
.card-img{aspect-ratio:16/9;background:linear-gradient(135deg,var(--ink),var(--violet));position:relative}
.card-img img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:12px;top:12px;background:#fff;color:var(--ink);font-size:.78rem;font-weight:700;padding:.3rem .65rem;border-radius:999px}
.tag.free{background:var(--mint);color:#fff}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card-cat{color:var(--violet);font-size:.85rem;font-weight:600}
.card-title{font-size:1.14rem;line-height:1.25;margin:.35rem 0 .5rem;letter-spacing:-.01em}
.card-desc{color:var(--ink-2);font-size:.92rem;flex:1}
.card-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--muted);font-size:.85rem;margin:14px 0}
.card-meta i{color:var(--violet);margin-right:.3rem}
.card-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.price{font-weight:800;font-size:1.25rem;color:var(--ink)}
.price.free{color:var(--mint)}
.by{font-size:.85rem;color:var(--muted)}
.empty{background:#fff;border:1.5px dashed var(--line);border-radius:var(--r);padding:40px;text-align:center;color:var(--ink-2)}

/* ---------- Cómo funciona ---------- */
.how{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;list-style:none}
.how-list li{padding:22px 24px 6px 0;border-top:3px solid var(--line);position:relative;margin-right:18px}
.how-list li:before{counter-increment:s;content:counter(s);position:absolute;top:-17px;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.how-list li:last-child:before{background:var(--tang)}
.how-list h3{font-size:1.08rem;margin:.4rem 0}
.how-list p{color:var(--ink-2);font-size:.93rem}
@media(max-width:860px){.how-list{grid-template-columns:1fr 1fr;row-gap:28px}}
@media(max-width:520px){.how-list{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#c9ccf0;padding:40px 0;font-size:.92rem;margin-top:64px}
.footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer .logo{color:#fff}
.footer a{color:#fff}

/* ---------- Catálogo ---------- */
.page-head{background:var(--white);border-bottom:1px solid var(--line);padding:40px 0 30px}
.page-head h1{font-size:clamp(1.8rem,3.5vw,2.6rem);letter-spacing:-.03em;line-height:1.1}
.page-head p{color:var(--ink-2);margin-top:.4rem}
.filters{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:20px}
.filters .search{flex:1;min-width:240px;max-width:none}
.select{font:inherit;padding:.75rem 1rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}

/* ---------- Detalle de curso ---------- */
.course-hero{background:var(--ink);color:#fff;padding:48px 0 56px}
.course-hero .crumbs{color:#b9bce0;font-size:.9rem;margin-bottom:1rem}
.course-hero .crumbs a:hover{color:#fff}
.course-hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em;max-width:20ch}
.course-hero p{color:#d7d9f2;margin-top:1rem;max-width:62ch;font-size:1.05rem}
.facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.6rem;color:#d7d9f2;font-size:.95rem}
.facts i{color:var(--tang);margin-right:.4rem}
.detail{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;margin-top:-28px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.panel h2{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:.3rem}
.panel .sub{color:var(--muted);font-size:.92rem;margin-bottom:18px}
.module{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden}
.module summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;gap:.8rem;align-items:center;font-weight:700;background:#fbfaff}
.module summary::-webkit-details-marker{display:none}
.module summary .num{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.85rem;flex-shrink:0}
.module summary .count{margin-left:auto;font-weight:500;color:var(--muted);font-size:.85rem;white-space:nowrap}
.module summary .chev{transition:transform .2s;color:var(--muted)}
.module[open] summary .chev{transform:rotate(180deg)}
.module .mdesc{padding:0 18px 8px 60px;color:var(--ink-2);font-size:.92rem;background:#fbfaff}
.sublist a,.sublist div{display:flex;gap:.8rem;align-items:center;padding:12px 18px 12px 60px;border-top:1px solid var(--line);font-size:.95rem}
.sublist a:hover{background:var(--violet-50)}
.sublist i.t{color:var(--violet);width:18px}
.sublist .dur{margin-left:auto;color:var(--muted);font-size:.85rem;white-space:nowrap}
.sublist .lock{color:#b5b3c7}
.buy{position:sticky;top:90px}
.buy .cover{aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;margin-bottom:18px;background:var(--ink)}
.buy .cover img{width:100%;height:100%;object-fit:cover}
.buy .big-price{font-size:2.2rem;font-weight:800;letter-spacing:-.03em}
.buy .big-price.free{color:var(--mint)}
.buy ul{list-style:none;margin:18px 0;border-top:1px solid var(--line);padding-top:16px}
.buy li{display:flex;gap:.6rem;padding:.35rem 0;color:var(--ink-2);font-size:.93rem}
.buy li i{color:var(--mint);margin-top:.25rem}
.state{border-radius:var(--r-sm);padding:12px 14px;font-size:.92rem;margin-bottom:12px}
.state.pending{background:#fff7e6;color:#8a5a00}
.state.rejected{background:#fdecec;color:#9b2c2c}
.state.active{background:var(--mint-50);color:#0d6b53}
@media(max-width:940px){.detail{grid-template-columns:1fr;margin-top:24px}.buy{position:static}}

/* ---------- Formularios / auth ---------- */
.auth{min-height:calc(100vh - 68px);display:grid;grid-template-columns:1fr 1fr}
.auth-side{background:var(--ink);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:center}
.auth-side h2{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.03em;max-width:15ch}
.auth-side p{color:#c9ccf0;margin-top:1rem;max-width:40ch}
.auth-side .mini-steps{display:flex;gap:6px;align-items:flex-end;height:90px;margin-top:2.2rem;max-width:300px}
.auth-side .mini-steps span{flex:1;background:#2d3266;border-radius:6px 6px 0 0}
.auth-side .mini-steps span:last-child{background:var(--tang)}
.auth-main{display:grid;place-items:center;padding:40px 20px}
.form-card{width:100%;max-width:400px}
.form-card h1{font-size:1.8rem;letter-spacing:-.025em}
.form-card .sub{color:var(--ink-2);margin:.3rem 0 1.6rem}
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet)}
.field .help{font-size:.82rem;color:var(--muted);margin-top:5px}
.alert{padding:12px 14px;border-radius:12px;font-size:.93rem;margin-bottom:16px}
.alert.err{background:#fdecec;color:#9b2c2c}
.alert.ok{background:var(--mint-50);color:#0d6b53}
.alert.info{background:var(--violet-50);color:#3a25a8}
.form-foot{text-align:center;margin-top:18px;color:var(--ink-2);font-size:.93rem}
.form-foot a{color:var(--violet);font-weight:700}
@media(max-width:860px){.auth{grid-template-columns:1fr}.auth-side{display:none}}

/* ---------- Pago ---------- */
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.method{border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;display:flex;gap:.6rem;align-items:center;font-weight:600}
.method input{accent-color:var(--violet)}
.method:has(input:checked){border-color:var(--violet);background:var(--violet-50)}
.qr-box{text-align:center;border:1.5px dashed var(--line);border-radius:12px;padding:18px;margin-bottom:14px}
.qr-box img{width:200px;height:200px;object-fit:contain;margin:0 auto 8px}
.bank{background:var(--paper);border-radius:12px;padding:14px 16px;font-size:.93rem;line-height:1.7;margin-bottom:14px}
.summary-row{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.summary-row.total{border:0;font-weight:800;font-size:1.2rem}
@media(max-width:860px){.pay-grid{grid-template-columns:1fr}}

/* ---------- Mis cursos ---------- */
.mine{display:grid;gap:14px}
.mine-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:180px 1fr auto;gap:20px;align-items:center;padding:14px}
.mine-item .thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--ink)}
.mine-item .thumb img{width:100%;height:100%;object-fit:cover}
.mine-item h3{font-size:1.1rem;line-height:1.25}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 6px;max-width:420px}
.bar span{display:block;height:100%;background:var(--violet);border-radius:99px}
.bar.done span{background:var(--mint)}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:.25rem .6rem;border-radius:999px}
.pill.pending{background:#fff7e6;color:#8a5a00}
.pill.active{background:var(--mint-50);color:#0d6b53}
.pill.rejected{background:#fdecec;color:#9b2c2c}
.pill.cert{background:var(--tang-50);color:#b54a1c}
@media(max-width:700px){.mine-item{grid-template-columns:1fr}.mine-item .thumb{display:none}}

/* ---------- Ruta del curso (learn.php) ---------- */
.learn-head{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:30px;margin:28px 0 22px;display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:center}
.learn-head h1{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.12;letter-spacing:-.025em}
.learn-head p{color:#c9ccf0;margin-top:.5rem}
.ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin-left:auto;
  background:conic-gradient(var(--tang) calc(var(--p)*1%),#2d3266 0)}
.ring div{width:118px;height:118px;border-radius:50%;background:var(--ink);display:grid;place-items:center;text-align:center;line-height:1.1}
.ring b{font-size:1.8rem}
.ring small{color:#b9bce0;font-size:.78rem}
.path .module summary .st{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--muted)}
.path .sublist a.done i.t{color:var(--mint)}
.path .sublist a.current{background:var(--violet-50);font-weight:700}
.path .sublist a.locked{color:#a9a7bb;pointer-events:none}
.path .sublist .score{font-size:.8rem;color:var(--mint);font-weight:700;margin-left:auto}
.cert-box{background:#fff;border:1.5px dashed var(--line);border-radius:var(--r);padding:28px;text-align:center;margin-top:22px}
.cert-box.ready{border-style:solid;border-color:var(--mint);background:var(--mint-50)}
.cert-box i.big{font-size:2.4rem;margin-bottom:.6rem}
.cert-box h2{font-size:1.35rem;margin-bottom:.4rem}
.cert-box p{color:var(--ink-2);margin-bottom:1rem}
@media(max-width:700px){.learn-head{grid-template-columns:1fr}.ring{margin:0}}

/* ---------- Lección ---------- */
.lesson-layout{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start;margin:26px auto}
.reading{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px}
.kicker{color:var(--violet);font-weight:700;font-size:.9rem}
.reading h1{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15;letter-spacing:-.025em;margin:.3rem 0 .5rem}
.reading .meta{color:var(--muted);font-size:.92rem}
.block-title{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;margin:30px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.block-title .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.85rem}
.theory{font-family:'Literata',Georgia,serif;font-size:1.06rem;line-height:1.8;color:#2a2d40;max-width:68ch}
.theory h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .8rem;color:var(--ink)}
.theory h3{font-family:'Bricolage Grotesque',sans-serif;font-size:1.1rem;margin:1.5rem 0 .6rem;color:var(--ink)}
.theory p{margin-bottom:1rem}
.theory ul,.theory ol{margin:.6rem 0 1.2rem 1.4rem}
.theory li{margin-bottom:.45rem}
.theory strong{color:var(--ink)}
.theory .ejemplo{background:var(--tang-50);border-left:4px solid var(--tang);padding:14px 18px;border-radius:0 10px 10px 0;margin:1.2rem 0;font-size:1rem}
.media{background:#000;border-radius:12px;overflow:hidden}
.media video{width:100%;display:block;aspect-ratio:16/9;background:#000}
.media iframe.vid{width:100%;aspect-ratio:16/9;border:0;display:block}
.media iframe.pdf{width:100%;height:620px;border:0;background:#fff;display:block}
.media-actions{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:10px;font-size:.88rem;color:var(--muted)}
.media-actions a{color:var(--violet);font-weight:700}
.done-box{margin:22px 0;padding:18px;border-radius:12px;background:var(--paper);border:1px solid var(--line);display:grid;grid-template-rows:auto 26px 46px;gap:10px;min-height:150px}
.done-box .done-q{margin:0;font-weight:600}
.done-box .done-note{height:26px;overflow:hidden}
.done-box .done-actions{display:flex;justify-content:flex-end;align-items:flex-end}
.done-box .done-actions .btn{min-width:220px;justify-content:center}
.done-box .done-ok{color:#0d6b53;font-size:.92rem;align-self:center}
.done-box.ok{background:var(--mint-50);border-color:#bfe8da;color:#0d6b53}
.quiz{border:1px solid var(--line);border-radius:12px;padding:22px}
.quiz.locked{opacity:.55}
.q{padding:16px 0;border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:0}
.q-title{font-weight:700;margin-bottom:10px;display:flex;gap:.6rem}
.q-title span{color:var(--violet)}
.opt{display:flex;gap:.7rem;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;cursor:pointer}
.opt:hover{border-color:#c9c1f5}
.opt input{margin-top:.3rem;accent-color:var(--violet)}
.opt:has(input:checked){border-color:var(--violet);background:var(--violet-50)}
.q.wrong .q-title{color:var(--red)}
.q.right .q-title{color:var(--mint)}
.q .fb{font-size:.88rem;font-weight:600;margin-top:4px}
.quiz-result{margin-top:14px;padding:14px;border-radius:10px;font-weight:600;display:none}
.quiz-result.ok{display:block;background:var(--mint-50);color:#0d6b53}
.quiz-result.bad{display:block;background:#fdecec;color:#9b2c2c}
.bottom-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.side{position:sticky;top:88px;display:grid;gap:16px}
.side .panel{padding:20px}
.side h3{font-size:1rem;margin-bottom:10px}
.side-mod{font-size:.8rem;font-weight:700;color:var(--muted);margin:12px 0 4px}
.side-list a{display:flex;gap:.55rem;align-items:center;padding:7px 8px;border-radius:8px;font-size:.87rem;color:var(--ink-2)}
.side-list a:hover{background:var(--paper)}
.side-list a.on{background:var(--violet-50);color:var(--violet);font-weight:700}
.side-list a.done{color:var(--mint)}
.side-list a.locked{color:#b5b3c7;pointer-events:none}
@media(max-width:980px){.lesson-layout{grid-template-columns:1fr}.side{position:static}.reading{padding:22px}.media iframe.pdf{height:480px}}
.footer .logo-mark{background:var(--violet)}
.how + .footer{margin-top:0}
.hero .wrap > *{min-width:0}
.search{width:100%}
.search .btn{flex-shrink:0}
.logo-img{width:36px;height:36px;object-fit:contain;border-radius:8px}
.footer .logo-img{background:#fff;padding:3px}
.cert-sheet{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;box-shadow:0 18px 40px -24px rgba(27,31,59,.35)}
.cert-sheet svg{width:100%;height:auto;display:block}

/* ===================== v5: detalle de curso ===================== */
.hero-rating{margin-top:1rem;color:#ffd38a;font-size:.95rem;display:flex;align-items:center;gap:.45rem}
.hero-rating b{color:#fff}
.stars-static{--r:0;display:inline-block;font-size:1.1rem;letter-spacing:2px;
  background:linear-gradient(90deg,#ffb020 calc(var(--r)/5*100%),#4a4f7f 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stars-static:before{content:"★★★★★"}
.icon-facts{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:1.8rem;max-width:1000px}
.icon-facts li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:2px}
.icon-facts .ico{font-size:1.5rem;line-height:1;margin-bottom:4px}
.icon-facts b{font-size:1rem}
.icon-facts small{color:#b9bce0;font-size:.78rem}
@media(max-width:900px){.icon-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:480px){.icon-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.detail-main{display:grid;gap:18px;min-width:0}
.detail-main .panel h2{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:14px}
.learn-box{border:2px solid var(--violet);background:linear-gradient(180deg,#fff, #faf8ff)}
.outcomes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.outcomes li{display:flex;gap:.7rem;font-size:1.04rem;line-height:1.45}
.outcomes .chk{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;margin-top:1px}
@media(max-width:700px){.outcomes{grid-template-columns:1fr}}
.audience{list-style:none;display:grid;gap:10px}
.audience li{display:flex;gap:.8rem;align-items:flex-start;background:var(--paper);border-radius:12px;padding:12px 14px;font-size:1.03rem}
.audience .aud-n{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--tang);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.react-panel{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.react-panel h2{font-size:1.2rem !important;margin-bottom:10px !important}
.reactions{display:flex;gap:8px;flex-wrap:wrap}
.react{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .75rem;display:flex;align-items:center;gap:.4rem;cursor:pointer;font:inherit;transition:transform .15s,border-color .15s}
.react:hover{transform:translateY(-2px);border-color:#c9c1f5}
.react.on{border-color:var(--violet);background:var(--violet-50)}
.react .emo{font-size:1.35rem;line-height:1}
.react .cnt{font-weight:700;color:var(--ink-2);font-size:.9rem;min-width:1ch}
.rate-box{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rate{display:flex;gap:2px}
.star{background:none;border:0;font-size:1.9rem;line-height:1;color:#d8d5e6;cursor:pointer;padding:0 2px}
.star.on,.star.hover{color:#ffb020}
.muted-s{color:var(--muted);font-size:.85rem}
.quiz-row{display:flex;gap:.8rem;align-items:center;padding:12px 18px 12px 60px;border-top:1px dashed var(--line);font-weight:600;color:var(--violet);background:#fbfaff}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.testi{background:var(--paper);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;margin:0}
.testi-stars{color:#ffb020;letter-spacing:2px}
.testi blockquote{margin:0;font-family:'Literata',Georgia,serif;font-size:.98rem;line-height:1.6;color:#2a2d40}
.testi figcaption{display:flex;gap:.6rem;align-items:center;margin-top:auto}
.testi figcaption small{display:block;color:var(--muted);font-size:.78rem}
.share{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px}
.share-btns{display:flex;gap:8px;flex-wrap:wrap}
.sh{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;border:0;cursor:pointer;font-size:1.05rem}
.sh.wa{background:#25d366}.sh.fb{background:#1877f2}.sh.x{background:#111}.sh.li{background:#0a66c2}.sh.tg{background:#229ed9}.sh.cp{background:var(--ink)}
.sh:hover{filter:brightness(1.1)}
.buy{max-height:none}

/* Testimonios en el inicio */
.testi-home .testi{background:#fff;border:1px solid var(--line)}
.testi .course-link{font-size:.82rem;color:var(--violet);font-weight:600}

/* ===================== Chatbot ===================== */
.cb-fab{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;align-items:center;gap:.5rem;border:0;cursor:pointer;
  background:var(--ink);color:#fff;border-radius:999px;padding:.75rem 1.05rem .75rem .85rem;font:inherit;font-weight:700;box-shadow:0 12px 28px -10px rgba(27,31,59,.6)}
.cb-fab-ico{font-size:1.3rem;line-height:1}
.cb-fab.on{background:var(--violet)}
.cb-panel{position:fixed;right:18px;bottom:84px;z-index:91;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 120px));
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -20px rgba(27,31,59,.45);display:flex;flex-direction:column;overflow:hidden}
.cb-panel[hidden]{display:none}
.cb-head{background:var(--ink);color:#fff;display:flex;align-items:center;gap:.7rem;padding:12px 14px}
.cb-head small{display:block;color:#b9bce0;font-size:.78rem}
.cb-logo{width:34px;height:34px;background:#fff;border-radius:9px;padding:3px}
.cb-close{margin-left:auto;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1}
.cb-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.cb-msg{max-width:88%;padding:10px 12px;border-radius:14px;font-size:.92rem;line-height:1.45}
.cb-msg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.cb-msg.user{background:var(--violet);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.cb-msg.typing{color:var(--muted);font-style:italic}
.cb-msg a{color:var(--violet);font-weight:700;text-decoration:underline}
.cb-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.8rem}
.cb-table th{background:var(--ink);color:#fff;text-align:left;padding:5px 6px}
.cb-table td{border-bottom:1px solid var(--line);padding:5px 6px;vertical-align:top}
.cb-table td:first-child{font-weight:800;color:var(--tang)}
.cb-list{margin:6px 0 0 1.1rem}
.cb-price{color:var(--muted);font-size:.8rem}
.cb-quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);background:#fff}
.cb-chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.3rem .65rem;font:inherit;font-size:.8rem;cursor:pointer;color:var(--ink-2)}
.cb-chip:hover{border-color:var(--violet);color:var(--violet)}
.cb-form{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.cb-form input{flex:1;font:inherit;border:1.5px solid var(--line);border-radius:999px;padding:.6rem .9rem;min-width:0}
.cb-form input:focus{outline:none;border-color:var(--violet)}
.cb-form button{border:0;background:var(--violet);color:#fff;border-radius:50%;width:42px;height:42px;cursor:pointer}
@media(max-width:520px){.cb-fab-txt{display:none}.cb-fab{padding:.8rem}}

/* ===================== Lección / ruta ===================== */
.theory .recurso{margin-top:1.2rem;padding:12px 16px;border-radius:12px;background:var(--violet-50);font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem}
.theory .recurso a{color:var(--violet);font-weight:700}
.infografia{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.infografia img{width:100%;height:auto;display:block}
.path .sublist a.quiz-link{border-top:1px dashed var(--line);background:#fbfaff;font-weight:700;color:var(--violet)}
.path .sublist a.quiz-link.done{color:var(--mint)}
.path .sublist a.quiz-link.locked{color:#a9a7bb;font-weight:600}
.testi-form textarea{width:100%;font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:.8rem 1rem;min-height:110px}
.testi-form .rate .star{font-size:1.7rem}
/* v6: robot del chatbot */
.cb-fab{padding:.35rem 1.05rem .35rem .4rem}
.cb-robot{width:52px;height:52px;margin:-14px 0 -10px -6px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.cb-logo{width:40px;height:40px;background:#fff;border-radius:12px;padding:2px}
.cb-av{width:34px;height:34px;float:left;margin:-2px 8px 2px -2px}
@media(max-width:520px){.cb-fab{padding:.3rem .45rem}.cb-robot{margin:-12px -4px -8px -4px}}
.welcome .wave-hand{display:inline-block;transform-origin:70% 80%;animation:hand 2.4s ease-in-out 2}
@keyframes hand{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
.welcome-sub{font-size:1.08rem}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center}
.hero-cover{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);aspect-ratio:16/9;background:#2d3266}
.hero-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-cover{max-width:560px}}
/* v6: reproductor propio para YouTube */
.clp{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;user-select:none}
.clp:fullscreen{border-radius:0}
.clp-frame{position:absolute;inset:0 0 44px 0;overflow:hidden}
.clp-frame iframe,.clp-yt{position:absolute;left:0;width:100%;top:-70px;height:calc(100% + 140px);border:0;pointer-events:none}
.clp-shield{position:absolute;inset:0 0 44px 0;cursor:pointer;z-index:2}
.clp-poster{position:absolute;inset:0 0 44px 0;z-index:3;border:0;padding:0;cursor:pointer;background:#000;display:block;width:100%}
.clp-poster img{width:100%;height:100%;object-fit:cover;opacity:.75;display:block}
.clp-poster.hide{display:none}
.clp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.clp-msg{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#fff;font-weight:600;text-shadow:0 1px 3px #000}
.clp-bar{position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--ink);display:flex;align-items:center;gap:10px;padding:0 10px;z-index:4}
.clp-btn{background:none;border:0;color:#fff;font-size:1rem;cursor:pointer;width:32px;height:32px;border-radius:8px}
.clp-btn:hover{background:#2d3266}
.clp-track{flex:1;height:8px;background:#3a3f6e;border-radius:99px;position:relative;cursor:pointer}
.clp-seen{position:absolute;left:0;top:0;bottom:0;background:#6b6fa3;border-radius:99px;width:0}
.clp-cur{position:absolute;left:0;top:0;bottom:0;background:var(--tang);border-radius:99px;width:0}
.clp-time{color:#c9ccf0;font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.watch-note{display:flex;align-items:center;gap:.5rem;color:var(--ink-2);font-size:.92rem;height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.watch-note .ring-s{flex:0 0 22px}
.watch-note .ring-s{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--violet) calc(var(--p)*1%),var(--line) 0)}
/* v7: prueba gratuita */
.trial-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0;padding:14px 18px;border-radius:14px;background:#f1edff;border:1px solid #d9d0ff;color:var(--ink-2)}
.trial-bar > i{font-size:1.4rem;color:var(--violet)}
.trial-bar > div{flex:1;min-width:220px;font-size:.95rem}
.trial-bar.off{background:#fff1ec;border-color:#ffd2c2}
.trial-bar.off > i{color:var(--tang,#ff7a45)}
/* v7: más cursos (4 por fila) */
.more-courses{margin-top:34px}
.more-courses h2{font-size:1.35rem;margin-bottom:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.grid-4 .card-desc{display:none}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
/* v7: referidos */
.ref-box{border:2px solid #e3dcff;background:linear-gradient(135deg,#fff 0%,#f6f3ff 100%)}
.ref-head{display:flex;gap:14px;align-items:flex-start}
.ref-head h2{font-size:1.25rem;line-height:1.3;margin:0 0 .3rem}
.ref-ico{font-size:2.2rem;line-height:1;animation:refpop 2.4s ease-in-out infinite}
@keyframes refpop{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(-6deg)}}
@media(prefers-reduced-motion:reduce){.ref-ico{animation:none}}
.ref-prog{display:flex;align-items:center;gap:12px;margin:14px 0}
.ref-bar{flex:1;height:14px;border-radius:99px;background:#ebe6ff;overflow:hidden}
.ref-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--mint));transition:width .5s}
.ref-prog b{font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.ref-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.ref-form .field{margin:0}
@media(max-width:900px){.ref-form{grid-template-columns:1fr 1fr}.ref-form .btn{grid-column:1/-1}}
@media(max-width:520px){.ref-form{grid-template-columns:1fr}}
.ref-reward{background:var(--mint-50);border:1px solid #bfe8da;border-radius:12px;padding:14px;margin-bottom:14px}
.ref-pick{display:flex;gap:10px;flex-wrap:wrap}
.ref-pick .select{flex:1;min-width:220px}
.ref-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.ref-list{margin-top:14px}
.ref-list summary{cursor:pointer;font-weight:600;color:var(--violet)}
#refMsg{margin-top:12px}
[hidden]{display:none!important}
/* v8: imagen para compartir */
.share-prev{margin:10px 0 0;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.share-prev img{display:block;width:100%;height:auto}
.share-img-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* v9: imagen del curso destacado en la portada */
.stair-img{display:block;margin:-6px -6px 16px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#2d3266}
.stair-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.stair-img:hover img{transform:scale(1.03)}
.stair.has-img .flag{display:none}
.stair.has-img .steps{height:120px}
/* v10: libro del curso */
.tag.book{left:auto;right:12px;background:#ffb020;color:#1b1f3b}
.cat-book{color:#c77800}
.icon-facts .fact-book{border-color:#ffb020;background:rgba(255,176,32,.14)}
.buy li.li-book{background:#fff7e6;border-radius:10px;padding:.5rem .6rem;margin:.3rem 0}
.buy li.li-book i{color:#c77800}
.book-dl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:16px auto 0;padding:12px 16px;border-radius:12px;background:#fff7e6;border:1px solid #ffd98a;max-width:620px;text-align:left}
.book-dl span{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.book-dl small{color:var(--ink-2);font-size:.85rem}
.book-dl.done{background:#f4f3fb;border-color:var(--line)}
.mine-item .book-dl{margin:10px 0 0;max-width:none;padding:10px 12px}
.book-note{margin-top:8px;color:#c77800;font-weight:600}
/* v11: infografías SVG o HTML en marco aislado */
.info-frame{display:block;width:100%;height:560px;border:0;background:#fff}
.infografia.info-svg .info-frame{height:480px}
@media(max-width:600px){.info-frame{height:420px}}
/* v11: reacciones (7) */
.rx-panel{padding:20px 22px}
.rx-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rx-head h2{font-size:1.25rem !important;margin:0 !important}
.rx-sum{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:.95rem}
.rx-top{display:flex}
.rx-mini{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;background:#fff;box-shadow:0 0 0 2px #fff;margin-left:-6px;line-height:1}
.rx-mini:first-child{margin-left:0}
.rx-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.rx{border:2px solid transparent;background:#f4f3fb;border-radius:14px;padding:14px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font:inherit;color:var(--ink-2);transition:transform .15s,background .15s,border-color .15s}
.rx:hover{transform:translateY(-3px);background:#ecebf8}
.rx:hover .rx-ico{transform:scale(1.12)}
.rx.on{border-color:#ffb020;background:#fff7e6}
.rx.pop .rx-ico{animation:rxpop .45s ease}
@keyframes rxpop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.rx-ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:2.1rem;line-height:1;transition:transform .15s}
.rx-ico.rx-like,.rx-mini.rx-like{background:linear-gradient(180deg,#36a3ff,#1468e0);font-size:1.45rem}
.rx-ico.rx-love,.rx-mini.rx-love{background:linear-gradient(180deg,#ff6b81,#e0213f);font-size:1.4rem}
.rx-mini.rx-like,.rx-mini.rx-love{font-size:.7rem}
.rx-name{font-size:.82rem;text-align:center;line-height:1.2}
.rx-cnt{min-width:26px;padding:.1rem .45rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:.82rem;text-align:center;font-variant-numeric:tabular-nums}
.rx.on .rx-cnt{background:#ffb020;border-color:#ffb020;color:#1b1f3b}
.rx-note{margin:12px 0 0;color:var(--muted);font-size:.85rem}
.rx-rate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rx-rate-t{font-weight:600}
@media(max-width:760px){.rx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:420px){.rx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rx-ico{width:40px;height:40px;font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){.rx,.rx-ico{transition:none}.rx.pop .rx-ico{animation:none}}
.rx-love{color:#fff;font-family:Arial,sans-serif}
.rx-mini{width:24px;height:24px;font-size:1rem;margin-left:-5px;overflow:visible}
.rx-mini.rx-like,.rx-mini.rx-love{font-size:.72rem}
.rx-name{min-height:2.4em;display:flex;align-items:center}
@media(max-width:420px){.rx-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.rx{padding:10px 2px}.rx-ico{width:36px;height:36px;font-size:1.6rem}.rx-ico.rx-like,.rx-ico.rx-love{font-size:1.15rem}.rx-name{font-size:.74rem}}
.ref-end{margin-top:22px}
.info-file{margin:8px 0 0;font-size:.78rem;color:var(--muted);word-break:break-all}.info-file code{background:#f4f3fb;padding:.1rem .35rem;border-radius:6px}
.more-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.more-row[hidden]{display:none!important}
.hero .search{max-width:640px}
.hero .search .cat-sel{border:0;border-left:1px solid var(--line);background:transparent;font:inherit;color:var(--ink);padding:0 .6rem;max-width:200px;min-height:44px;outline:none;cursor:pointer}
@media (max-width:560px){.hero .search{flex-wrap:wrap;border-radius:18px}.hero .search .cat-sel{border-left:0;border-top:1px solid var(--line);max-width:none;width:100%;order:3}}
.ref-course{display:flex;gap:16px;align-items:flex-start;margin:12px 0 4px}
.ref-course img{width:150px;border-radius:10px;border:1px solid var(--line);flex:none}
@media (max-width:560px){.ref-course{flex-direction:column}.ref-course img{width:100%;max-width:280px}}
/* v18: rúbrica de la nota del curso */
.rub-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.rub{width:100%;border-collapse:collapse;min-width:760px;font-size:.88rem}
.rub th,.rub td{padding:10px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;text-align:left}
.rub tr>*:last-child{border-right:0}
.rub thead th{background:#f6f5fb;font-weight:700}
.rub thead th b{display:block;font-size:.92rem}
.rub thead th small,.rub .rub-crit small{display:block;color:var(--muted);font-weight:500;font-size:.78rem;margin-top:2px}
.rub .rub-crit{min-width:200px;width:24%}
.rub .rub-note{width:90px;text-align:center;white-space:nowrap}
.rub .rub-cell{color:#9a9db5;font-size:.8rem;line-height:1.35}
.rub .rub-cell.on{color:#1b1f3b;font-weight:600}
.rub .rub-cell.on i{margin-right:2px}
.rub thead .rub-exc{border-top:4px solid #16a37f}.rub thead .rub-mb{border-top:4px solid #5b3df5}.rub thead .rub-b{border-top:4px solid #e8a317}.rub thead .rub-ep{border-top:4px solid #d63031}
.rub .rub-cell.on.rub-exc{background:#e3f6ef}.rub .rub-cell.on.rub-exc i{color:#16a37f}
.rub .rub-cell.on.rub-mb{background:#ece8ff}.rub .rub-cell.on.rub-mb i{color:#5b3df5}
.rub .rub-cell.on.rub-b{background:#fdf3dc}.rub .rub-cell.on.rub-b i{color:#c48a0c}
.rub .rub-cell.on.rub-ep{background:#fde6e6}.rub .rub-cell.on.rub-ep i{color:#d63031}
.rub tfoot td{background:#faf9fd;border-bottom:0}
.rub .rub-final{font-size:1.3rem}
.rub-foot{margin-top:8px}
.rub-box summary{cursor:pointer;list-style:none}.rub-box summary::-webkit-details-marker{display:none}