/* academia.css — Academia · rediseño v1 (academia.html).
   Fuente de verdad: design/academia/README.md; valores de la referencia
   design/academia/referencia.dc.html.

   ESCALA ÚNICA (README): 56/40/32 (Newsreader, clamp), 17–19 (títulos de
   tarjeta), 18 (bajada), 16 (cuerpo), 15 (texto de tarjeta), 13 (meta y
   eyebrow), 12 (etiquetas en tarjetas); más los dos que fija el README: el
   número del índice (Newsreader 22) y el contador del checklist (Newsreader
   48). Los 14 px de la referencia (enlaces, mensaje del checklist) suben a 15,
   y la frase de la foto usa la escala del título destacado.

   Las guías (el lector #reader) y el modal del historial NO viven aquí: siguen
   en css/academia-guias.css y css/styles.css. */

.acad {
  /* Paleta 2026: alias de css/tokens.css, cambian solos con html.dark. */
  --acad-acento: var(--text);
  --acad-tinta: var(--text);
  --acad-gris: var(--text-muted);
  --acad-meta: var(--text-muted);
  --acad-linea: var(--border);
  --acad-fondo: var(--bg);
  --acad-superficie: var(--card-bg);
  --acad-loseta: var(--surface-2);
  --acad-rosado: var(--border);
  /* Pictogramas: heredan los tokens de css/pictos.css (acento naranja en
     claro y menta en oscuro, tinta = texto, fondo = --bg). */
  --acad-serif: Newsreader, Georgia, serif;
  background: var(--acad-fondo);
  color: var(--acad-tinta);
  font-family: Poppins, system-ui, sans-serif;
}
.acad-wrap { max-width: 1160px; margin: 0 auto; }
.acad section, .acad header { scroll-margin-top: 72px; }   /* barra superior sticky de 56 px */

/* ── Escala tipográfica ── */
.acad-h1 {
  margin: 0; font-family: var(--acad-serif); font-weight: 500;
  font-size: clamp(40px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em;
}
.acad-h2 {
  margin: 0; font-family: var(--acad-serif); font-weight: 500;
  font-size: clamp(32px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.01em;
}
.acad-h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.acad-bajada { margin: 0; font-size: 18px; line-height: 1.6; color: var(--acad-gris); }
.acad-cuerpo { margin: 0; font-size: 16px; line-height: 1.6; color: var(--acad-gris); }
.acad-texto { margin: 0; font-size: 15px; line-height: 1.55; color: var(--acad-gris); }
.acad-meta { font-size: 13px; color: var(--acad-meta); }
.acad-eyebrow {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acad-acento);
}
.acad-eyebrow--gris { color: var(--acad-meta); }
.acad-etiqueta {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acad-acento);
}

/* ── 1 · Encabezado e índice ── */
.acad-cabecera { padding: 72px 24px 56px; }
.acad-cabecera__inner { display: flex; flex-direction: column; gap: 40px; }
.acad-cabecera__texto { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.acad-indice { display: flex; flex-direction: column; gap: 16px; }
.acad-indice__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.acad-indice__titulo .acad-cuerpo { color: var(--acad-tinta); opacity: .85; }
.acad-indice__grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.acad-paso {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  border-radius: 18px; background: var(--acad-loseta); color: var(--acad-tinta);
  text-decoration: none; transition: background .2s, box-shadow .2s;
}
.acad-paso:hover { background: var(--acad-superficie); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent), 0 10px 24px color-mix(in srgb, var(--hs-marino) 6%, transparent); color: var(--acad-tinta); }
.acad-paso__num { font-family: var(--acad-serif); font-size: 22px; line-height: 1; color: var(--acad-acento); }

/* Foco visible en todo lo clicable de la página. */
.acad a:focus-visible,
.acad button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ── 2 · Radar: franja oscura a todo el ancho de la columna ── */
.acad-radar {
  position: relative; overflow: hidden;
  background: var(--hs-marino); color: var(--hs-crema); padding: 80px 24px;
  --focus: var(--hs-crema);
  --acad-radar-gris: color-mix(in srgb, var(--hs-crema) 72%, var(--hs-marino));
  --acad-radar-tarjeta: color-mix(in srgb, var(--hs-crema) 6%, var(--hs-marino));
  --acad-radar-tarjeta-hover: color-mix(in srgb, var(--hs-crema) 10%, var(--hs-marino));
  --acad-radar-linea: color-mix(in srgb, var(--hs-crema) 14%, transparent);
  --acad-radar-linea-fuerte: color-mix(in srgb, var(--hs-crema) 24%, transparent);
}
/* En oscuro el fondo de la página es el mismo marino de la franja: un filete
   arriba y abajo la mantiene como bloque. */
html.dark .acad-radar { box-shadow: inset 0 1px 0 var(--acad-radar-linea), inset 0 -1px 0 var(--acad-radar-linea); }
.acad-radar__arcos {
  position: absolute; right: -160px; top: -200px; width: 640px; height: 640px;
  opacity: .5; pointer-events: none; color: var(--acad-radar-linea-fuerte);
}
.acad-radar__inner { position: relative; display: flex; flex-direction: column; gap: 36px; }
.acad-radar__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.acad-radar__titulos { display: flex; flex-direction: column; gap: 12px; }
.acad-radar .acad-h2 { color: var(--hs-crema); }
.acad-eyebrow--radar { color: var(--hs-crema); }
.acad-radar__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.acad-radar__fecha { color: var(--acad-radar-gris); }
.acad-activo {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-radius: 999px; background: var(--acad-radar-linea);
  font-size: 13px; font-weight: 600; color: var(--hs-crema);
}
.acad-activo__punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-safe);
  animation: acad-latido 1.8s ease-in-out infinite;
}
@keyframes acad-latido {
  0%, 100% { box-shadow: 0 0 0 0 var(--acad-radar-linea-fuerte); }
  60% { box-shadow: 0 0 0 8px transparent; }
}

.acad-radar__cuerpo { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.acad-radar__destacada { flex: 999 1 520px; min-width: 0; display: flex; }
.acad-radar__columna { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.acad-radar__laterales { display: flex; flex-direction: column; gap: 16px; }

.acad-alerta {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  border-radius: 20px; padding: 22px 24px; background: var(--acad-radar-tarjeta);
  box-shadow: inset 0 0 0 1px var(--acad-radar-linea); transition: background .2s;
}
.acad-alerta:hover { background: var(--acad-radar-tarjeta-hover); }
.acad-alerta--destacada {
  gap: 18px; border-radius: 24px; padding: 32px;
  background: var(--acad-radar-tarjeta);
  box-shadow: inset 0 0 0 1px var(--acad-radar-linea-fuerte);
}
.acad-alerta--destacada:hover { background: var(--acad-radar-tarjeta); }
.acad-alerta__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acad-alerta__fecha { font-size: 13px; color: var(--acad-radar-gris); }
.acad-alerta__reciente { font-size: 13px; color: var(--acad-radar-gris); }
.acad-alerta__titulo { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hs-crema); }
.acad-alerta--destacada .acad-alerta__titulo {
  font-family: var(--acad-serif); font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15;
}
.acad-alerta__resumen { margin: 0; font-size: 15px; line-height: 1.55; color: var(--acad-radar-gris); }
.acad-alerta--destacada .acad-alerta__resumen { font-size: 16px; line-height: 1.6; color: var(--acad-radar-gris); max-width: 640px; }
.acad-alerta__empuje { flex-grow: 1; }
.acad-alerta__vacio { margin: 0; font-size: 16px; line-height: 1.6; color: var(--acad-radar-gris); }

/* Severidad sobre fondo oscuro (README): CRÍTICO rojo, ALTO ámbar; MEDIO
   amarillo, aprobado por Francisco con el mismo criterio. */
.acad-sev {
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
}

.acad-detalle-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--acad-radar-linea-fuerte);
  border-radius: 12px; background: transparent; color: var(--hs-crema);
  font: 500 15px Poppins, system-ui, sans-serif; cursor: pointer;
}
.acad-detalle-btn:hover { background: color-mix(in srgb, var(--hs-crema) 6%, transparent); }
.acad-detalle-btn svg { transition: transform .3s; }
.acad-detalle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.acad-detalle {
  display: flex; flex-direction: column; gap: 14px; padding: 16px 18px;
  border-radius: 14px; background: color-mix(in srgb, var(--hs-crema) 5%, transparent);
}
.acad-detalle[hidden] { display: none; }
.acad-detalle__rotulo {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hs-crema);
}
.acad-detalle__texto { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--acad-radar-gris); }
.acad-detalle__texto--vacio { font-style: italic; color: var(--acad-radar-gris); }
.acad-detalle__fuente { font-size: 15px; font-weight: 500; color: var(--hs-crema); text-decoration: underline; }
.acad-detalle__fuente:hover { color: var(--hs-crema); }

.acad-historial {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 16px;
  background: transparent; color: inherit; box-shadow: inset 0 0 0 1px var(--hs-naranja);
  font: 600 15px Poppins, system-ui, sans-serif; cursor: pointer; text-align: left;
}
.acad-historial:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

/* ── 3 · Checklist del mes ── */
.acad-seccion { padding: 80px 24px; }
.acad-checklist {
  display: flex; flex-wrap: wrap; gap: 40px 56px;
  border-radius: 28px; background: var(--acad-superficie);
  box-shadow: inset 0 0 0 2px var(--acad-acento);
  padding: clamp(28px, 4vw, 48px);
}
.acad-checklist__resumen { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.acad-pastilla {
  align-self: flex-start; padding: 7px 14px; border-radius: 999px;
  background: var(--acad-rosado); font-size: 13px; font-weight: 600; color: var(--text);
}
.acad-pastilla[hidden] { display: none; }
.acad-progreso { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.acad-progreso__cifra { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.acad-progreso__num { font-family: var(--acad-serif); font-size: 48px; line-height: 1; color: var(--acad-tinta); }
.acad-progreso__barra { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; }
.acad-progreso__relleno {
  height: 10px; width: 0; border-radius: 5px; background: var(--acad-acento);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}
.acad-progreso__mensaje { margin: 0; font-size: 15px; line-height: 1.55; color: var(--acad-meta); }

.acad-checklist__lista {
  flex: 999 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.acad-accion {
  display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px;
  border-radius: 18px; background: var(--acad-superficie);
  box-shadow: inset 0 0 0 1px var(--acad-linea); transition: background .2s;
}
.acad-accion:hover,
.acad-accion.is-hecha { background: color-mix(in srgb, var(--text) 5%, var(--acad-superficie)); }
.acad-accion__marca {
  flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 24%, transparent); background: var(--acad-superficie); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--acad-serif); font-size: 22px; line-height: 1; cursor: pointer;
}
.acad-accion__marca[aria-pressed="true"] { border-color: var(--accent-safe); background: var(--accent-safe); color: var(--on-safe); }
.acad-accion__marca svg { display: none; }
.acad-accion__marca[aria-pressed="true"] svg { display: block; }
.acad-accion__marca[aria-pressed="true"] .acad-accion__n { display: none; }
.acad-accion__cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.acad-accion__titulo { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--acad-tinta); }
.acad-accion.is-hecha .acad-accion__titulo { color: var(--acad-meta); text-decoration: line-through; }
/* Zona de clic de 44 px (README: botones de al menos 44) sin agrandar el
   espaciado visible: los márgenes negativos devuelven la altura extra. */
.acad-accion__enlace {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px;
  margin: -6px 0 -12px; padding: 0; border: 0; background: none;
  font: 600 15px Poppins, system-ui, sans-serif; color: var(--acad-acento);
  text-decoration: underline; cursor: pointer;
}
.acad-accion__enlace:hover { text-decoration: underline; color: var(--acad-acento); }

/* ── 4 · Guías esenciales ── */
.acad-seccion--guias { padding-top: 24px; padding-bottom: 88px; }
.acad-seccion--guias .acad-wrap { display: flex; flex-direction: column; gap: 32px; }
.acad-intro { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.acad-enlace { align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--acad-acento); text-decoration: underline; }
.acad-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.acad-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.acad-guia {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 0;
  border-radius: 20px; background: var(--acad-superficie); box-shadow: 0 0 0 1px var(--acad-linea);
  color: var(--acad-tinta); text-align: left; font-family: inherit; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
a.acad-guia { text-decoration: none; }   /* tarjetas enlazadas a /guias (26-oct-2026) */
.acad-guia:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent), 0 18px 36px color-mix(in srgb, var(--hs-marino) 9%, transparent); }
.acad-guia__titulo { font-size: 19px; font-weight: 600; line-height: 1.3; }
.acad-guia__cta { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--acad-acento); }

/* ── 5 · Por qué importa ── */
.acad-porque { background: var(--acad-superficie); border-top: 1px solid var(--acad-linea); padding: 88px 24px; }
.acad-porque__inner { display: flex; flex-direction: column; gap: 40px; }
.acad-motivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.acad-motivo { display: flex; flex-direction: column; gap: 14px; }
.acad-motivo .acad-h3 { font-size: 19px; }
.acad-foto { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; }
.acad-foto__img {
  flex: 1 1 420px; min-width: 0; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: center 35%; border-radius: 24px;
}
.acad-frase {
  flex: 1 1 360px; min-width: 0; margin: 0;
  font-family: var(--acad-serif); font-weight: 500;
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--acad-tinta);
}
.acad-frase__acento { color: var(--acad-acento); }

/* ── Celular ── */
@media (max-width: 639px) {
  .acad-cabecera { padding: 48px 16px 40px; }
  .acad-radar { padding: 56px 16px; }
  .acad-alerta--destacada { padding: 24px; }
  .acad-seccion { padding: 56px 16px; }
  .acad-seccion--guias { padding-top: 16px; padding-bottom: 64px; }
  .acad-porque { padding: 64px 16px; }
  .acad-accion { padding: 18px 16px; gap: 14px; }
}

/* ── Reducir movimiento: nada se anima ── */
@media (prefers-reduced-motion: reduce) {
  .acad-activo__punto { animation: none; }
  .acad-guia, .acad-paso, .acad-alerta, .acad-accion,
  .acad-progreso__relleno, .acad-detalle-btn svg { transition: none; }
  .acad-guia:hover { transform: none; }
}