/* =============================================================================
   AÉREO · CURSO PILOTO DGAC — diseño unificado de los módulos
   Blanco, simple y con movimiento: el mismo lenguaje del sitio público,
   pensado para proyectar en clase y leer en el celular. Apto para 12 años.
   ============================================================================= */
:root{
  --yellow:#ECE31D; --yellow-deep:#D8CF12; --yellow-soft:#FBF9C8;
  --ink:#0A0C0D; --ink-2:#5C636A; --ink-3:#6A6F76;
  --petrol:#425D76; --green:#156B69; --rojo:#d23b1f; --blue:#104A7F;
  --bg:#FFFFFF; --bg-2:#F4F5F6; --bg-3:#EDEFF1;
  --line:#E2E5E8; --line-strong:#C9CDD1;
  --hd:'Big Shoulders Display','Arial Narrow',sans-serif;
  --bd:'Roboto',system-ui,sans-serif;
  --mn:'Roboto Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--bd);color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;padding-top:58px}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:980px;margin:0 auto;padding:0 20px;width:100%}
h1,h2,h3{font-family:var(--hd);text-transform:uppercase;line-height:.98;font-weight:800}

/* ---------------- BARRA DEL CURSO ---------------- */
.cbar{position:fixed;top:0;left:0;right:0;height:58px;background:var(--ink);color:#fff;z-index:90;
  border-bottom:3px solid var(--yellow)}
.cbar-in{max-width:1180px;margin:0 auto;padding:0 16px;height:100%;display:flex;align-items:center;gap:14px}
.cbar .menu{font-family:var(--mn);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);
  border:1px solid rgba(236,227,29,.5);border-radius:2px;padding:7px 10px;white-space:nowrap}
.cbar .menu:hover{background:var(--yellow);color:#000}
.cbar .tit{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:center}
.cbar .dots{display:none;gap:6px;align-items:center}
@media(min-width:760px){ .cbar .dots{display:flex} }
.cbar .dots a{width:26px;height:26px;border-radius:2px;border:1px solid rgba(255,255,255,.3);
  font-family:var(--hd);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;
  color:#C9CDD1;transition:background .15s,color .15s}
.cbar .dots a:hover{border-color:var(--yellow);color:#fff}
.cbar .dots a.on{background:var(--yellow);color:#000;border-color:var(--yellow)}
.cbar .dots a.done{border-color:var(--green);color:#7fc9c0}

/* progreso de lectura */
.cprog{position:fixed;top:58px;left:0;right:0;height:4px;background:transparent;z-index:89}
.cprog i{display:block;height:100%;width:0;background:var(--yellow);transition:width .15s linear}

/* ---------------- PORTADA DEL MÓDULO ---------------- */
.mhero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg)}
.mhero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 78% 40%,#000 0%,transparent 72%);
          mask-image:radial-gradient(120% 90% at 78% 40%,#000 0%,transparent 72%)}
.mhero .wrap{position:relative;z-index:1;padding:46px 20px 40px}
.mnum{display:inline-block;font-family:var(--hd);font-weight:900;font-size:15px;background:#000;color:var(--yellow);
  border-radius:2px;padding:5px 11px}
.mhero h1{font-size:clamp(34px,7.6vw,64px);font-weight:900;margin-top:14px}
.mhero .baja{font-size:16.5px;color:var(--ink-2);margin-top:14px;max-width:58ch}
.mhero .baja strong{color:var(--ink)}
.mmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.mmeta span{font-family:var(--mn);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px}

/* ---------------- FASES ---------------- */
.fase{padding:46px 0;border-bottom:1px solid var(--line)}
.fase:last-of-type{border-bottom:none}
.fase.gris{background:var(--bg-2)}
.fk{font-family:var(--mn);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--petrol);
  display:inline-flex;align-items:center;gap:10px}
.fk::before{content:"";width:22px;height:1px;background:var(--petrol)}
.fase h2{font-size:clamp(24px,4.6vw,38px);margin-top:12px}
.fase>.wrap>p, .fase .prosa{font-size:16px;color:#333;margin-top:14px;max-width:62ch}
.fase .prosa strong, .fase>.wrap>p strong{background:var(--yellow-soft);padding:0 .12em}

/* revelado con movimiento */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------------- DRONITO, EL GUÍA ---------------- */
.dro{display:flex;gap:14px;align-items:flex-start;margin-top:22px;max-width:640px}
.dro-fig{flex:0 0 64px;animation:droFlota 3.4s ease-in-out infinite}
@keyframes droFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.dro-b{position:relative;background:var(--yellow);border:2px solid #000;border-radius:3px;padding:13px 16px;
  font-size:14.5px;line-height:1.5;color:#1c1a00}
.dro-b::before{content:"";position:absolute;left:-9px;top:20px;width:14px;height:14px;background:var(--yellow);
  border-left:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg)}
.dro-b b{display:block;font-family:var(--mn);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#000;margin-bottom:4px}

/* ---------------- LADRILLOS DE CONTENIDO ---------------- */
.cards2{display:grid;gap:12px;margin-top:22px}
@media(min-width:700px){ .cards2{grid-template-columns:repeat(2,1fr)} }
.cards3{display:grid;gap:12px;margin-top:22px}
@media(min-width:700px){ .cards3{grid-template-columns:repeat(3,1fr)} }
.cc{position:relative;background:#fff;border:2px solid var(--line);border-radius:3px;padding:18px;overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.cc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--yellow)}
.cc:hover{border-color:#000;transform:translateY(-3px)}
.cc h3{font-size:18px}
.cc p{font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.cc .ic{font-size:26px;line-height:1;margin-bottom:8px;display:block}

/* dato clave (para proyectar en grande) */
.dato{background:var(--ink);color:#fff;border:3px solid #000;border-radius:3px;box-shadow:8px 8px 0 var(--yellow);
  padding:24px;margin-top:22px}
.dato .k{font-family:var(--mn);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.dato .v{font-family:var(--hd);font-weight:900;text-transform:uppercase;font-size:clamp(26px,5vw,44px);line-height:1;margin-top:8px}
.dato p{font-size:14px;color:#C9CDD1;margin-top:10px;max-width:56ch}
.dato p b{color:#fff}

/* ---------------- WIDGETS (fases interactivas) ---------------- */
.widget{background:#fff;border:3px solid #000;border-radius:3px;box-shadow:8px 8px 0 var(--yellow);
  padding:22px;margin-top:24px}
.widget .wt{font-family:var(--mn);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--petrol);
  display:flex;align-items:center;gap:8px;margin-bottom:14px}
.widget .wt::before{content:"";width:9px;height:9px;background:var(--yellow);border:1px solid #000}
.widget label{display:block;font-family:var(--mn);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin:12px 0 6px}
.widget input[type=range]{width:100%;accent-color:var(--yellow-deep);height:26px}
.lect{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.lect span{font-family:var(--mn);font-size:11px;letter-spacing:.04em;border:1px solid var(--line-strong);
  border-radius:2px;padding:7px 11px;background:var(--bg-2)}
.lect span b{color:#000}
.escena{position:relative;background:var(--bg-2);border:2px solid var(--line);border-radius:3px;overflow:hidden;margin-top:14px}
.escena svg{display:block;width:100%;height:auto}

/* botones del curso */
.cbtn{display:inline-flex;align-items:center;gap:9px;font-family:var(--hd);font-weight:800;text-transform:uppercase;
  font-size:15px;background:var(--yellow);color:#000;border:3px solid #000;border-radius:3px;padding:12px 18px;
  cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.cbtn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000}
.cbtn.sec{background:#fff}
.cbtn.mini{font-size:13px;padding:9px 13px;box-shadow:none}
.cbtn.mini:hover{box-shadow:3px 3px 0 #000}

/* juego de clasificar / elegir */
.opciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.opc{font-size:14px;background:#fff;border:2px solid var(--line-strong);border-radius:3px;padding:11px 14px;
  cursor:pointer;transition:border-color .15s,transform .15s}
.opc:hover{border-color:#000;transform:translateY(-2px)}
.opc.ok{border-color:var(--green);background:#E6F2F1}
.opc.mal{border-color:var(--rojo);background:#FBEAE6;animation:tiemb .35s}
@keyframes tiemb{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.veredicto{display:none;margin-top:12px;border:1px solid var(--line-strong);border-left:4px solid var(--yellow);
  background:var(--bg-2);border-radius:0 3px 3px 0;padding:11px 14px;font-size:13.5px;color:#333}
.veredicto.on{display:block}

/* semáforo GO / NO GO */
.gonogo{display:inline-flex;align-items:center;gap:10px;font-family:var(--hd);font-weight:900;text-transform:uppercase;
  font-size:22px;border:3px solid #000;border-radius:3px;padding:10px 18px;margin-top:14px}
.gonogo.go{background:var(--green);color:#fff}
.gonogo.nogo{background:var(--rojo);color:#fff}
.gonogo.mid{background:var(--yellow);color:#000}

/* checklist interactiva */
.chk{list-style:none;margin-top:14px;display:grid;gap:8px}
.chk li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--line);border-radius:3px;
  padding:11px 13px;cursor:pointer;transition:border-color .15s;font-size:14.5px}
.chk li:hover{border-color:#000}
.chk li.on{border-color:var(--green);background:#E6F2F1}
.chk li .box{flex:0 0 20px;width:20px;height:20px;border:2px solid #000;border-radius:2px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;margin-top:1px}
.chk li.on .box{background:var(--green);color:#fff;border-color:var(--green)}

/* tabla simple */
.tabla{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px;background:#fff}
.tabla th{font-family:var(--mn);font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:left;
  background:var(--ink);color:#fff;padding:10px 12px}
.tabla td{border:1px solid var(--line);padding:10px 12px;vertical-align:top}
.tabla tr:nth-child(even) td{background:var(--bg-2)}

/* ---------------- CIERRE: EVALUACIÓN + NAV ---------------- */
.fase-eval{background:var(--ink);color:#fff;border-bottom:none}
.fase-eval .fk{color:var(--yellow)}
.fase-eval .fk::before{background:var(--yellow)}
.fase-eval h2{color:#fff}
.fase-eval p{color:#C9CDD1;font-size:15.5px;margin-top:12px;max-width:58ch}
.mnav{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:28px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
.mnav a{display:inline-flex;flex-direction:column;gap:3px;border:2px solid rgba(255,255,255,.3);border-radius:3px;
  padding:12px 16px;min-width:150px;transition:border-color .2s,background .2s}
.mnav a:hover{border-color:var(--yellow)}
.mnav a small{font-family:var(--mn);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8B9196}
.mnav a b{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:15px;color:#fff}
.mnav a.sig{text-align:right;background:var(--yellow);border-color:var(--yellow)}
.mnav a.sig small{color:#4d4a00}
.mnav a.sig b{color:#000}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .dro-fig{animation:none}
  .cc,.cbtn,.opc{transition:none}
}

/* =============================================================================
   ESCALA DE PRESENTACIÓN — cada módulo se proyecta en clase.
   Desde 1000px (notebook al proyector) toda la tipografía sube de talla para
   leerse desde el fondo de la sala. En el celular rigen los tamaños base.
   ============================================================================= */
@media(min-width:1000px){
  .wrap{max-width:1120px}
  body{font-size:18px}
  .fase{padding:64px 0}

  /* portada del módulo */
  .mnum{font-size:18px;padding:6px 14px}
  .mhero .wrap{padding:60px 20px 52px}
  .mhero h1{font-size:clamp(56px,6.4vw,88px)}
  .mhero .baja{font-size:21px;max-width:60ch}
  .mmeta span{font-size:12px;padding:8px 15px}

  /* fases */
  .fk{font-size:13.5px}
  .fase h2{font-size:clamp(38px,4.4vw,58px)}
  .fase>.wrap>p,.fase .prosa{font-size:20px;max-width:64ch}

  /* Dronito habla más fuerte */
  .dro{max-width:760px}
  .dro-fig{flex:0 0 88px}
  .dro-fig svg{width:88px;height:auto}
  .dro-b{font-size:17.5px;padding:16px 20px}
  .dro-b b{font-size:11px}

  /* ladrillos */
  .cc{padding:24px}
  .cc h3{font-size:23px}
  .cc p{font-size:16.5px}
  .cc .ic{font-size:36px}
  .dato{padding:30px}
  .dato .k{font-size:12px}
  .dato .v{font-size:clamp(34px,4.6vw,58px)}
  .dato p{font-size:17.5px;max-width:60ch}

  /* widgets interactivos */
  .widget{padding:28px}
  .widget .wt{font-size:12px}
  .widget label{font-size:13.5px}
  .widget input[type=range]{height:32px}
  .lect span{font-size:14px;padding:9px 14px}
  .opciones{gap:12px}
  .opc{font-size:17.5px;padding:14px 18px}
  .veredicto{font-size:16.5px;padding:14px 18px}
  .gonogo{font-size:28px;padding:13px 24px}
  .chk li{font-size:18px;padding:14px 16px}
  .chk li .box{flex:0 0 24px;width:24px;height:24px;font-size:15px}

  /* tabla legible desde lejos */
  .tabla{font-size:17px}
  .tabla th{font-size:12px;padding:12px 16px}
  .tabla td{padding:13px 16px}

  /* cierre */
  .fase-eval p{font-size:18px}
  .cbtn{font-size:18px;padding:15px 24px}
  .mnav a{min-width:190px;padding:14px 20px}
  .mnav a small{font-size:10px}
  .mnav a b{font-size:18px}

  /* barra del curso */
  .cbar{height:64px}
  body{padding-top:64px}
  .cprog{top:64px}
  .cbar .tit{font-size:17px}
  .cbar .menu{font-size:11px;padding:8px 12px}
  .cbar .dots a{width:30px;height:30px;font-size:15px}
}

/* pantallas de proyector grandes: un empujón más */
@media(min-width:1500px){
  .wrap{max-width:1260px}
  .mhero h1{font-size:96px}
  .fase h2{font-size:64px}
  .fase>.wrap>p,.fase .prosa{font-size:22px}
  .cc p{font-size:18px}
  .opc{font-size:19px}
  .tabla{font-size:18px}
}

/* ---------------- EJEMPLOS GRÁFICOS (.gfx) ---------------- */
.gfx{background:#fff;border:2px solid #000;border-radius:3px;box-shadow:5px 5px 0 var(--bg-3);
  padding:14px 14px 10px;margin:18px 0 6px}
.gfx svg{width:100%;height:auto;display:block}
.gfx figcaption{font-family:var(--mn);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);border-top:1px solid var(--line);margin-top:10px;padding-top:9px}
@media(min-width:1000px){ .gfx{padding:20px 20px 14px} .gfx figcaption{font-size:12px} }