/* Oral Education: estilo común de todas las lecciones (es/fr).
   Cada lección lo carga con ../../oral-education/oral.css */
:root{
  --bg:#0b0b0e; --soft:#131318; --card:#1a1a20; --line:#2a2a33;
  --txt:#f4f1ec; --txt-2:#b5aea4; --txt-3:#7d766d;
  --oro:#d4af37; --oro-2:#f0cf6a;
  --fuego:#e0393e; --verde:#34d07f; --agua:#5aa9e6; --rosa:#d4547a;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--txt);
     font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
     font-size:19px; line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:640px; margin:0 auto; padding:0 0 60px}
.pad{padding-left:22px; padding-right:22px}
h1,h2,h3{font-family:"Bricolage Grotesque","Source Sans 3",sans-serif; margin:0}
p{margin:0; color:var(--txt-2)}
p strong, li strong{color:var(--txt); font-weight:700}

.hero{position:relative; padding:44px 22px 30px; overflow:hidden;
      background:radial-gradient(120% 80% at 15% 0%, rgba(212,84,122,.18), transparent 60%),
                 radial-gradient(90% 60% at 100% 0%, rgba(212,175,55,.12), transparent 60%)}
.kicker{font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
        color:var(--oro); margin:0}
.hero h1{font-size:clamp(34px,9vw,52px); font-weight:800; line-height:1;
         letter-spacing:-.025em; margin:12px 0 0; text-wrap:balance}
.hero .bajada{margin-top:15px; font-size:20px; color:var(--txt); max-width:30ch}
.tiempo{display:inline-flex; align-items:center; gap:8px; margin-top:20px;
        background:rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.35);
        border-radius:99px; padding:8px 16px; font-size:14.5px; font-weight:700; color:var(--oro-2)}
.firma{display:flex; align-items:center; gap:13px; margin-top:24px}
.firma img{width:48px; height:48px; border-radius:99px; object-fit:cover;
           border:2px solid var(--rosa); flex:0 0 auto}
.firma b{display:block; font-size:16px; color:var(--txt)}
.firma span{font-size:14px; color:var(--txt-3)}

.arranque{margin:26px 22px 0; background:var(--soft); border-radius:14px;
          border:1px solid var(--line); padding:24px 22px;
          display:flex; flex-direction:column; gap:13px}
.grande{font-family:"Bricolage Grotesque",sans-serif; font-size:21px;
        font-weight:600; color:var(--oro-2); line-height:1.35}

h2.seccion{font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
           margin:0 0 10px; text-wrap:balance}
.lead{font-size:18.5px; color:var(--txt-2); margin-bottom:18px}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px;
      padding:18px 10px 16px; text-align:center}
.stat b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(28px,8vw,38px);
        font-weight:800; line-height:1; color:var(--acc,var(--oro))}
.stat span{display:block; margin-top:8px; font-size:14.5px; line-height:1.3; color:var(--txt-2)}
.nota{font-size:15px; color:var(--txt-3); margin-top:10px}

.paso{margin-top:40px}
.num{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.num b{font-family:"Bricolage Grotesque",sans-serif; font-size:15px; font-weight:800;
       width:38px; height:38px; border-radius:99px; display:flex; align-items:center;
       justify-content:center; background:var(--acc,var(--oro)); color:#0b0b0e; flex:0 0 auto}
.num h2{font-size:26px; font-weight:800; letter-spacing:-.015em; line-height:1.15}
.comose{background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:22px 22px 20px; display:flex; flex-direction:column; gap:16px}
.comose h3{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
           color:var(--acc,var(--oro))}
ol.pasitos{margin:0; padding:0; list-style:none; display:flex; flex-direction:column;
           gap:14px; counter-reset:p}
ol.pasitos li{display:flex; gap:13px; align-items:flex-start; color:var(--txt);
              font-size:18.5px; line-height:1.5}
ol.pasitos li > span{flex:1; min-width:0}
ol.pasitos li::before{counter-increment:p; content:counter(p); flex:0 0 auto;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:14px;
  width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.07); color:var(--acc,var(--oro)); margin-top:2px}
.porque{border-left:3px solid var(--acc,var(--oro)); padding:2px 0 2px 15px;
        font-size:17.5px; color:var(--txt)}
.porque b{color:var(--acc,var(--oro))}

.voz{margin-top:22px; padding:20px 22px; border-radius:14px;
     background:linear-gradient(150deg, rgba(212,84,122,.14), var(--soft) 60%);
     border:1px solid rgba(212,84,122,.38)}
.voz p{font-family:"Bricolage Grotesque",sans-serif; font-size:20px; font-weight:600;
       line-height:1.4; color:var(--txt)}
.voz span{display:block; margin-top:10px; font-size:14.5px; color:var(--txt-3)}

.mitos{margin-top:6px; display:flex; flex-direction:column}
.mito{padding:18px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.mito:last-child{border-bottom:none}
.mito .no{font-size:17.5px; color:var(--txt-3); text-decoration:line-through; text-decoration-color:var(--fuego)}
.mito .si{font-size:18.5px; color:var(--txt)}
.mito .si::before{content:"✓ "; color:var(--verde); font-weight:700}

.solo{margin:38px 22px 0; border-radius:16px; padding:24px;
      background:linear-gradient(140deg, rgba(52,208,127,.12), var(--soft) 60%);
      border:1px solid rgba(52,208,127,.4); display:flex; flex-direction:column; gap:10px}
.solo h3{font-size:20px; font-weight:800; color:var(--verde)}
.solo p{font-size:18px; color:var(--txt)}

.cierre{margin:40px 22px 0; padding:28px 22px; border-radius:16px;
        background:radial-gradient(120% 100% at 50% 0%, rgba(212,84,122,.2), var(--soft) 65%);
        border:1px solid rgba(212,84,122,.38); text-align:center;
        display:flex; flex-direction:column; gap:13px}
.cierre h2{font-size:26px; font-weight:800; line-height:1.15; text-wrap:balance}
.cierre p{font-size:19px; color:var(--txt)}

.fuentes{margin:30px 22px 0; font-size:13.5px; color:var(--txt-3); line-height:1.55;
         border-top:1px solid var(--line); padding-top:18px}
.fuentes b{color:var(--txt-2)}
@media (max-width:380px){ .stat span{font-size:13px} }

/* ===== Componentes de lecciones ===== */
/* Lección 2: esquema */
.figura{margin:8px 0 0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 14px 16px}
.figura svg{display:block; width:100%; height:auto}
.figura figcaption{margin-top:10px; font-size:14.5px; color:var(--txt-3); text-align:center}
.leyenda{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-top:12px; font-size:14.5px; color:var(--txt-2)}
.leyenda i{display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:6px; vertical-align:-1px}
/* Lección 3: frenos y aceleradores · Lección 6: señales */
.pedales,.senales{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
.pedal,.lado{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 16px}
.pedal h3,.lado h3{font-size:18px; font-weight:800; margin-bottom:10px; color:var(--acc)}
.pedal ul,.lado ul{margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:7px}
.pedal li,.lado li{font-size:16.5px; line-height:1.4; color:var(--txt)}
@media (max-width:420px){ .pedales,.senales{grid-template-columns:1fr} }
/* Lección 4: frases */
.frases{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.frase{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--verde);
       border-radius:12px; padding:14px 16px; font-size:18px; color:var(--txt); line-height:1.45}
.frase.mal{border-left-color:var(--fuego); color:var(--txt-2)}
.frase small{display:block; margin-top:4px; font-size:14.5px; color:var(--txt-3)}
/* Lección 5: lista y alerta */
.check{margin-top:6px; background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:8px 20px}
.fila-check{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); font-size:18px; color:var(--txt); line-height:1.45}
.fila-check:last-child{border-bottom:none}
.caja{width:24px; height:24px; border-radius:7px; border:2px solid var(--txt-3); flex:0 0 auto; margin-top:2px}
.alerta{margin:38px 22px 0; border-radius:16px; padding:22px;
        background:linear-gradient(140deg, rgba(224,57,62,.16), var(--soft) 60%);
        border:1px solid rgba(224,57,62,.5); display:flex; flex-direction:column; gap:10px}
.alerta h3{font-size:20px; font-weight:800; color:#ff6b6f}
.alerta p{font-size:18px; color:var(--txt)}
/* Lección 6: ruta por etapas */
.ruta{margin-top:6px; display:flex; flex-direction:column}
.etapa{display:grid; grid-template-columns:44px 1fr; gap:14px; position:relative; padding-bottom:22px}
.etapa:last-child{padding-bottom:0}
.etapa::before{content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--line)}
.etapa:last-child::before{display:none}
.etapa .n{width:44px; height:44px; border-radius:99px; display:flex; align-items:center; justify-content:center;
          font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:16px; color:#0b0b0e; background:var(--c)}
.etapa h3{font-size:20px; font-weight:800; color:var(--txt); margin:8px 0 4px}
.etapa p{font-size:17.5px}
.etapa .min{display:inline-block; margin-top:8px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c)}
/* Lección 7: movimientos, presión, fases, puente */
.movs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px}
.mov{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 10px 14px; text-align:center}
.mov svg{width:56px; height:56px; margin:0 auto 8px; display:block}
.mov b{display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:17px; font-weight:800; color:var(--txt)}
.mov span{display:block; margin-top:4px; font-size:14px; color:var(--txt-2); line-height:1.3}
.mov em{display:block; margin-top:8px; font-style:normal; font-family:"Bricolage Grotesque",sans-serif; font-size:20px; font-weight:800; color:var(--c)}
.barra{margin-top:6px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px}
.escala{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px}
.escala div{border-radius:10px; padding:12px 6px; text-align:center; font-size:15px; font-weight:700}
.escala small{display:block; font-weight:400; font-size:13px; margin-top:3px}
.fases{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.fase{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--c); border-radius:12px; padding:16px 18px}
.fase h3{font-size:18px; font-weight:800; color:var(--c); margin-bottom:4px}
.fase p{font-size:17.5px; color:var(--txt)}
.puente{margin:38px 22px 0; border-radius:16px; padding:22px;
        background:linear-gradient(140deg, rgba(212,175,55,.16), var(--soft) 60%);
        border:1px solid rgba(212,175,55,.45); display:flex; flex-direction:column; gap:10px}
.puente h3{font-size:21px; font-weight:800; color:var(--oro-2); line-height:1.2}
.puente p{font-size:18px; color:var(--txt)}
@media (max-width:400px){ .mov span{font-size:13px} .mov b{font-size:15.5px} }
/* Lección 8: posiciones */
.posis{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.posi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px}
.posi h3{font-size:19px; font-weight:800; color:var(--txt); margin-bottom:6px}
.posi p{font-size:17px; color:var(--txt-2)}
.posi .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.posi .tags span{font-size:13px; font-weight:700; padding:4px 10px; border-radius:99px; background:rgba(255,255,255,.06); color:var(--txt-2)}
.posi .tags span.b{background:rgba(52,208,127,.14); color:#34d07f}

/* ===== Interactivo (motor oral.js) ===== */
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:58px;
     border:0; border-radius:14px; padding:14px 18px; cursor:pointer; text-align:center;
     font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:800; line-height:1.25;
     background:linear-gradient(180deg,#f0cf6a,#a8801f); color:#1a1305;
     box-shadow:0 10px 30px -10px rgba(212,175,55,.6)}
.btn:active{transform:scale(.99)}
.btn.sec{background:var(--card); color:var(--txt); border:1px solid var(--line); box-shadow:none; font-size:17px}
.noche-btn{margin-top:22px}
.noche{margin:16px 22px 0; background:var(--soft); border:1px solid rgba(212,175,55,.4); border-radius:16px; padding:20px 22px}
.noche h3{font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--oro); margin-bottom:12px}
.noche ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px}
.noche li{font-size:18.5px; color:var(--txt); line-height:1.45}
.q{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-top:12px}
.q p.preg{font-family:"Bricolage Grotesque",sans-serif; font-size:20px; font-weight:800; color:var(--txt); line-height:1.3; margin-bottom:14px}
.op{display:block; width:100%; text-align:left; min-height:56px; margin-top:8px; padding:14px 16px;
    border-radius:12px; border:1px solid var(--line); background:var(--soft); color:var(--txt);
    font-family:inherit; font-size:18px; line-height:1.35; cursor:pointer}
.op.ok{border-color:var(--verde); background:rgba(52,208,127,.14)}
.op.mal{border-color:var(--fuego); background:rgba(224,57,62,.12); color:var(--txt-2)}
.op:disabled{cursor:default}
.exp{margin-top:12px; font-size:17.5px; color:var(--txt); border-left:3px solid var(--verde); padding-left:14px}
.mision{margin:40px 22px 0; border-radius:18px; padding:24px 22px;
        background:linear-gradient(150deg, rgba(212,84,122,.18), var(--soft) 55%);
        border:1px solid rgba(212,84,122,.45); display:flex; flex-direction:column; gap:14px}
.mision .tag{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--rosa)}
.mision h2{font-size:25px; font-weight:800; line-height:1.15}
.mision p{font-size:18.5px; color:var(--txt)}
.mision p.suave{margin-top:12px; color:var(--txt-2)}
.reacs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.reac{min-height:84px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--txt);
      font-family:inherit; font-size:17px; font-weight:700; cursor:pointer; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:4px; padding:10px}
.reac b{font-size:30px; line-height:1}
.anika{display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start}
.anika img{width:44px; height:44px; border-radius:99px; object-fit:cover; border:2px solid var(--rosa)}
.anika .burbuja{background:var(--card); border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:14px 16px; font-size:18px; color:var(--txt); line-height:1.5}
.anika .burbuja b{color:var(--oro-2)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.chip{min-height:50px; padding:10px 16px; border-radius:99px; border:1px solid var(--line); background:var(--card);
      color:var(--txt); font-family:inherit; font-size:17px; font-weight:600; cursor:pointer}
.chip.sel{border-color:var(--oro); background:rgba(212,175,55,.14)}
.mision p.sub{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); margin-top:18px}
.hecho{display:flex; align-items:center; gap:12px; font-size:18.5px; color:var(--verde); font-weight:700}
.mapa{margin:22px 22px 0; background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:22px}
.mapa h3{font-size:21px; font-weight:800}
.mapa .priv{font-size:14.5px; color:var(--txt-3); margin-top:4px}
.fila{display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:18px}
.fila:last-child{border-bottom:none}
.fila span{color:var(--txt-2)}
.fila b{color:var(--txt); text-align:right}
.fila.no b{color:#ff8a8d}
.vacio{margin-top:12px; font-size:17.5px; color:var(--txt-2)}
[hidden]{display:none !important}