/* Modo Examen - estilos propios de la seccion.
 *
 * Todo lo comun (tokens, Inter, cabecera, pie, .btn, .course, .container, .eyebrow)
 * llega de partes/base_XX.css, que es el CSS REAL del sitio extraido por shell.py.
 * Aqui solo va lo que la seccion anade, y siempre con las variables del sitio:
 * ni un color a mano, para que no vuelva a haber dos azules distintos.
 */

/* ------------------------------------------------------------------ portada */
.me-hero{background:linear-gradient(160deg,var(--warm) 0%,var(--warm-2) 100%);
  color:#fff;padding:52px 0 60px}
.me-hero h1{color:#fff;font-size:2.05rem;line-height:1.18;letter-spacing:-.01em;margin:0 0 12px;max-width:760px}
.me-hero p.sub{color:#c9d8f5;margin:0;max-width:660px;font-size:1.02rem}
.me-hero .eyebrow{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#c9d8f5}
.me-chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none}
.me-chips li{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:7px 14px;font-size:.85rem;color:#e8eefb}

/* ------------------------------------------------- rejilla de dos columnas */
.me-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;
  padding:40px 0 56px}
@media(max-width:900px){.me-grid{grid-template-columns:1fr;padding-top:32px;gap:20px}}

.me-caja{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.me-caja h2{font-size:1.08rem;margin:0 0 14px;letter-spacing:-.01em}
.me-caja + .me-caja{margin-top:16px}

/* --------------------------------------------------------- panel de compra */
.me-compra{position:sticky;top:88px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:24px;box-shadow:0 8px 24px -8px rgba(11,16,34,.14)}
@media(max-width:900px){.me-compra{position:static}}
.me-precio{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:var(--warm-2);margin:0}
.me-iva{font-size:.78rem;color:var(--muted);margin:4px 0 18px}
.me-compra .btn{width:100%;justify-content:center;font-size:1rem;padding:14px 18px}
.me-compra .btn + .btn{margin-top:10px}
.me-nota{font-size:.78rem;color:var(--muted);margin:14px 0 0;line-height:1.5}

/* ------------------------------------------------------------ lista de "incluye" */
.me-inc{list-style:none;margin:0 0 18px;padding:0}
.me-inc li{padding-left:26px;position:relative;margin-bottom:9px;font-size:.94rem}
.me-inc li::before{content:"";position:absolute;left:3px;top:8px;width:9px;height:5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}

/* ------------------------------------------------------------------ formularios */
.me-campo{margin-bottom:14px}
.me-campo label{display:block;font-size:.82rem;font-weight:700;margin:0 0 6px}
.me-campo input{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;font:inherit;background:#fff;color:var(--fg)}
.me-campo input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.me-ayuda{font-size:.76rem;color:var(--muted);margin:6px 0 0}
.me-cond{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--muted);
  margin:16px 0 4px;line-height:1.5}
.me-cond input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--accent)}

/* ------------------------------------------------------------------- avisos */
.me-aviso{border-radius:12px;padding:12px 15px;font-size:.88rem;margin:0 0 16px;
  border:1px solid var(--warm-line);background:var(--warm-soft);color:var(--warm-2)}
.me-aviso.malo{background:#fff4f4;border-color:#ffd2d2;color:#8a1c1c}
.me-aviso.bien{background:#eafaf0;border-color:#bfe8cd;color:#12643a}

/* ----------------------------------------------------------------- licencias */
.me-lic{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;
  margin-bottom:12px}
.me-lic b{display:block;font-size:1.02rem;margin-bottom:3px}
.me-lic .meta{color:var(--muted);font-size:.85rem}
.me-exs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.me-ex{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:8px 16px;font-size:.86rem;font-weight:600;
  text-decoration:none;color:var(--accent)}
.me-ex:hover{border-color:var(--accent);background:#fff}

/* --------------------------------------------------------------- indicador */
.me-spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:me-giro .8s linear infinite;
  vertical-align:-2px;margin-right:9px}
@keyframes me-giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.me-spin{animation:none}}

.hidden{display:none !important}
.me-legal{font-size:.76rem;color:var(--muted);line-height:1.6;margin:8px 0 0}