/* ==========================================================================
   Industrial AI Academy — hoja de estilo del sitio
   Construida sobre brand/tokens/brand.css. Decisiones en INFORME_DISENO.md §4.
   ========================================================================== */

/* ── Sora autoalojada (variable, 33 KB cubre los 6 pesos) ─────────────── */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--iaa-font);
  font-weight: var(--iaa-peso-regular);
  font-size: var(--iaa-t-base);
  line-height: var(--iaa-lh-texto);
  color: var(--iaa-texto);
  background: var(--iaa-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--iaa-texto-titular);
  line-height: var(--iaa-lh-titular);
  letter-spacing: var(--iaa-ls-titular);
  text-wrap: balance;
}
p { margin: 0; }

::selection { background: var(--iaa-teal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--iaa-acento);
  outline-offset: 3px;
  border-radius: var(--iaa-radio-sm);
}

.iaa-salto-contenido {
  position: absolute; left: -9999px;
  background: var(--iaa-navy); color: #fff;
  padding: var(--iaa-sp-3) var(--iaa-sp-4);
}
.iaa-salto-contenido:focus { left: var(--iaa-sp-4); top: var(--iaa-sp-4); z-index: 100; }

/* ── Retícula ──────────────────────────────────────────────────────────── */
.iaa-contenedor {
  width: 100%;
  max-width: var(--iaa-ancho-max);
  margin-inline: auto;
  padding-inline: var(--iaa-sp-6);
}
.iaa-seccion { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.iaa-seccion--compacta { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* ── Tipografía de composición ─────────────────────────────────────────── */
/* Sora Light/Thin en titulares grandes: el manual la reserva para «titulares
   editoriales de gran formato», y es el registro sobrio de MIT xPRO y Section. */
.iaa-h1 { font-size: var(--iaa-t-3xl); font-weight: var(--iaa-peso-light); }
.iaa-h2 { font-size: var(--iaa-t-2xl); font-weight: var(--iaa-peso-light); }
.iaa-h3 { font-size: var(--iaa-t-lg);  font-weight: var(--iaa-peso-semibold); letter-spacing: -.01em; }

.iaa-eyebrow {
  font-size: var(--iaa-t-xs);
  font-weight: var(--iaa-peso-medium);
  letter-spacing: var(--iaa-ls-eyebrow);
  text-transform: uppercase;
  color: var(--iaa-acento);
  margin-bottom: var(--iaa-sp-4);
}
.iaa-lead {
  font-size: var(--iaa-t-md);
  font-weight: var(--iaa-peso-light);
  color: var(--iaa-texto);
  max-width: 54ch;
}
.iaa-texto { max-width: var(--iaa-ancho-texto); }
.iaa-suave { color: var(--iaa-texto-suave); }
.iaa-cifra {
  font-size: var(--iaa-t-xl);
  font-weight: var(--iaa-peso-bold);
  color: var(--iaa-texto-titular);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ── La diagonal del isotipo como único motivo gráfico ─────────────────── */
.iaa-diagonal {
  width: 68px; height: 3px;
  background: var(--iaa-acento);
  transform: skewX(-38deg);
  margin-bottom: var(--iaa-sp-6);
}

/* ── Botones ───────────────────────────────────────────────────────────── */
/* CTAs sobrios: sin urgencia, sin gradientes, sin sombras dramáticas.
   MIT xPRO — en el registro premium, dejar espacio a la duda es sofisticación. */
.iaa-btn {
  display: inline-flex; align-items: center; gap: var(--iaa-sp-2);
  font: inherit;
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .01em;
  padding: .85em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--iaa-radio);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.iaa-btn--principal { background: var(--iaa-navy); color: #fff; }
.iaa-btn--principal:hover { background: #24406B; }
.iaa-btn--secundario { border-color: var(--iaa-borde); color: var(--iaa-texto-titular); background: transparent; }
.iaa-btn--secundario:hover { border-color: var(--iaa-navy); }
.iaa-oscuro .iaa-btn--principal { background: #fff; color: var(--iaa-navy); }
.iaa-oscuro .iaa-btn--principal:hover { background: var(--iaa-gris); }
.iaa-oscuro .iaa-btn--secundario { border-color: var(--iaa-borde-oscuro); color: #fff; }
.iaa-oscuro .iaa-btn--secundario:hover { border-color: var(--iaa-teal-sobre-oscuro); }

.iaa-enlace {
  color: var(--iaa-acento);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.iaa-enlace:hover { color: var(--iaa-texto-titular); }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.iaa-cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 242, 242, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--iaa-borde);
}
.iaa-cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--iaa-sp-6);
  min-height: 68px;
}
.iaa-cabecera__logo img { width: 168px; }
.iaa-nav { display: flex; align-items: center; gap: var(--iaa-sp-6); }
/* display:contents en la hoja, NO en línea: si va en línea gana a la media
   query de abajo, el menú no se oculta nunca y la cabecera desborda a 390 px. */
.iaa-nav__enlaces { display: contents; }
/* :not(.iaa-btn) — si no, esta regla gana en especificidad al color del botón
   y el «Apply» sale navy sobre navy, es decir, invisible. */
.iaa-nav a:not(.iaa-btn) {
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-medium);
  color: var(--iaa-texto-titular);
  text-decoration: none;
}
.iaa-nav a:not(.iaa-btn):hover { color: var(--iaa-acento); }
@media (max-width: 720px) {
  .iaa-nav__enlaces { display: none; }
  .iaa-cabecera__logo img { width: 140px; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Contenido, no a sangre: el generador de imágenes topa en 1536 px de ancho
   y a sangre completa se vería blando en pantallas grandes. */
.iaa-hero { padding-block: clamp(3rem, 1.5rem + 6vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem); }
.iaa-hero__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .iaa-hero__rejilla { grid-template-columns: 1.05fr .95fr; }
}
.iaa-hero__acciones {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--iaa-sp-4);
  margin-top: var(--iaa-sp-8);
}
.iaa-hero__figura { position: relative; }
.iaa-hero__figura img {
  width: 100%;
  border-radius: var(--iaa-radio-lg);
  box-shadow: var(--iaa-sombra-lg);
}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.iaa-tarjeta {
  background: var(--iaa-fondo-alt);
  border: 1px solid var(--iaa-borde);
  border-radius: var(--iaa-radio-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.iaa-oscuro .iaa-tarjeta { background: var(--iaa-fondo-alt); border-color: var(--iaa-borde-oscuro); }

.iaa-rejilla { display: grid; gap: var(--iaa-sp-6); }
@media (min-width: 720px)  { .iaa-rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .iaa-rejilla--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Programa destacado: la pieza única de la home (brief §7) ──────────── */
.iaa-programa {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  border: 1px solid var(--iaa-borde);
  border-left: 3px solid var(--iaa-acento);
  border-radius: var(--iaa-radio-lg);
  background: var(--iaa-fondo-alt);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}
@media (min-width: 900px) { .iaa-programa { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.iaa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--iaa-sp-3); }
.iaa-lista li { position: relative; padding-left: 1.6rem; }
.iaa-lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 2px; background: var(--iaa-acento);
  transform: skewX(-38deg);
}

/* ── Bloque de cohorte ─────────────────────────────────────────────────── */
/* Escasez como hecho de capacidad, nunca como urgencia (INFORME_DISENO §3). */
.iaa-cohorte { display: grid; gap: var(--iaa-sp-8); }
@media (min-width: 900px) { .iaa-cohorte { grid-template-columns: 1fr 1fr; align-items: center; } }

.iaa-hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.iaa-hitos li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--iaa-sp-4);
  padding-block: var(--iaa-sp-4);
  border-bottom: 1px solid var(--iaa-borde);
}
.iaa-hitos li:first-child { border-top: 1px solid var(--iaa-borde); }
.iaa-hitos b { font-weight: var(--iaa-peso-semibold); color: var(--iaa-texto-titular); }
.iaa-hitos time { font-variant-numeric: tabular-nums; color: var(--iaa-texto-suave); white-space: nowrap; }
.iaa-hitos li[data-destacado] time { color: var(--iaa-acento); font-weight: var(--iaa-peso-semibold); }

/* ── Métricas del modelo sándwich ──────────────────────────────────────── */
.iaa-metricas { display: grid; gap: var(--iaa-sp-8); }
@media (min-width: 720px) { .iaa-metricas { grid-template-columns: repeat(3, 1fr); } }
.iaa-metrica dt {
  font-size: var(--iaa-t-xs);
  letter-spacing: var(--iaa-ls-eyebrow);
  text-transform: uppercase;
  color: var(--iaa-texto-suave);
  margin-bottom: var(--iaa-sp-2);
}
.iaa-metrica dd { margin: 0; }

/* ── Marcador de contenido pendiente ───────────────────────────────────── */
/* Visible a propósito: mientras el brief §12 no cierre precio y plazas, es
   preferible un hueco evidente a un dato inventado (INFORME_DISENO §2). */
.iaa-pendiente {
  display: inline-block;
  font-size: var(--iaa-t-xs);
  font-weight: var(--iaa-peso-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8A5A00;
  background: #FFF4DB;
  border: 1px dashed #D9A441;
  border-radius: var(--iaa-radio-sm);
  padding: .25em .6em;
}

/* ── Pie ───────────────────────────────────────────────────────────────── */
.iaa-pie { border-top: 1px solid var(--iaa-borde-oscuro); }
.iaa-pie__fila { display: grid; gap: var(--iaa-sp-8); padding-block: var(--iaa-sp-12); }
@media (min-width: 720px) { .iaa-pie__fila { grid-template-columns: 1.4fr 1fr 1fr; } }
.iaa-pie a { color: var(--iaa-gris); text-decoration: none; font-size: var(--iaa-t-sm); }
.iaa-pie a:hover { color: #fff; }
.iaa-pie__legal {
  border-top: 1px solid var(--iaa-borde-oscuro);
  padding-block: var(--iaa-sp-6);
  font-size: var(--iaa-t-xs);
  color: var(--iaa-gris);
}

/* ==========================================================================
   Sala de control — componentes de la dirección elegida (22-ago-2026)
   El bloque de cohorte se lee como un panel de instrumentación: cifras
   tabulares, retícula de filetes, teal solo como indicador. La escasez es un
   dato de capacidad, nunca una cuenta atrás (INFORME_DISENO §3).
   ========================================================================== */

/* ── Migas ─────────────────────────────────────────────────────────────── */
.iaa-migas {
  border-bottom: 1px solid var(--iaa-borde);
  font-size: var(--iaa-t-xs);
  color: var(--iaa-texto-suave);
}
.iaa-migas ol {
  list-style: none; margin: 0; padding-block: var(--iaa-sp-3);
  display: flex; flex-wrap: wrap; gap: var(--iaa-sp-2);
}
.iaa-migas li::after { content: "/"; margin-left: var(--iaa-sp-2); color: var(--iaa-gris); }
.iaa-migas li:last-child::after { content: none; }
.iaa-migas a { color: var(--iaa-texto-suave); text-decoration: none; }
.iaa-migas a:hover { color: var(--iaa-acento); }
.iaa-migas [aria-current] { color: var(--iaa-texto-titular); font-weight: var(--iaa-peso-medium); }

/* ── Panel de lecturas ─────────────────────────────────────────────────── */
.iaa-panel {
  background: var(--iaa-navy);
  border-radius: var(--iaa-radio);
  overflow: hidden;
  color: #fff;
}
.iaa-panel__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;   /* antes de partir «COHORT 01», que baje la píldora */
  gap: var(--iaa-sp-3) var(--iaa-sp-4);
  padding: var(--iaa-sp-4) var(--iaa-sp-6);
  border-bottom: 1px solid var(--iaa-borde-oscuro);
}
.iaa-panel__titulo {
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.iaa-estado {
  display: inline-flex; align-items: center; gap: var(--iaa-sp-2);
  padding: .35em .8em;
  border: 1px solid var(--iaa-teal-sobre-oscuro);
  border-radius: var(--iaa-radio-sm);
  font-size: 10.5px;
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--iaa-teal-sobre-oscuro);
  white-space: nowrap;
}
.iaa-estado::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

/* Los filetes son el gap del grid sobre fondo navy: una sola declaración
   dibuja toda la retícula, sin bordes por celda que se dupliquen. */
.iaa-panel__rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--iaa-borde-oscuro);
}
.iaa-lectura {
  background: var(--iaa-navy);
  padding: var(--iaa-sp-4) var(--iaa-sp-6);
  margin: 0;
}
.iaa-lectura dt {
  font-size: 10.5px;
  font-weight: var(--iaa-peso-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--iaa-gris);
  margin-bottom: var(--iaa-sp-2);
}
.iaa-lectura dd {
  margin: 0;
  /* Fijo, no fluido: una lectura que salta de línea deja de leerse como
     instrumento. 21px cabe en media columna del panel a cualquier ancho. */
  font-size: 1.3125rem;
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: -.015em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.iaa-lectura dd small {
  display: block;
  margin-top: var(--iaa-sp-2);
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-regular);
  letter-spacing: 0;
  color: var(--iaa-gris);
}
.iaa-panel__pie {
  padding: var(--iaa-sp-4) var(--iaa-sp-6) var(--iaa-sp-6);
  border-top: 1px solid var(--iaa-borde-oscuro);
}
.iaa-panel__precio {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--iaa-sp-4);
}
.iaa-panel__precio b {
  font-size: 1.5rem;
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: -.02em;
}
.iaa-panel__nota {
  margin-top: var(--iaa-sp-3);
  font-size: var(--iaa-t-sm);
  line-height: 1.5;
  color: var(--iaa-gris);
}

/* ── Hero de sala de control ───────────────────────────────────────────── */
.iaa-hero--panel .iaa-hero__rejilla { align-items: start; }
/* El titular convive con el panel: a 76px la columna izquierda se rompe en
   cuatro líneas y pierde el golpe. Un escalón menos y respira. */
.iaa-hero--panel .iaa-h1 { font-size: var(--iaa-t-2xl); }
@media (min-width: 980px) {
  .iaa-hero--panel .iaa-hero__rejilla { grid-template-columns: 1fr 468px; }
}

/* ── Temario en módulos ────────────────────────────────────────────────── */
.iaa-temario {
  background: var(--iaa-fondo-alt);
  border: 1px solid var(--iaa-borde);
  border-radius: var(--iaa-radio);
}
.iaa-modulo { border-bottom: 1px solid var(--iaa-borde); }
.iaa-modulo:last-child { border-bottom: 0; }
.iaa-modulo > summary {
  display: flex; align-items: baseline; gap: var(--iaa-sp-4);
  padding: var(--iaa-sp-4) var(--iaa-sp-6);
  cursor: pointer;
  list-style: none;
}
.iaa-modulo > summary::-webkit-details-marker { display: none; }
.iaa-modulo > summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--iaa-t-lg);
  font-weight: var(--iaa-peso-light);
  color: var(--iaa-texto-suave);
  line-height: 1;
}
.iaa-modulo[open] > summary::after { content: "\2212"; }
.iaa-modulo__n {
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .1em;
  color: var(--iaa-acento);
  font-variant-numeric: tabular-nums;
}
.iaa-modulo__titulo {
  font-size: var(--iaa-t-md);
  font-weight: var(--iaa-peso-medium);
  color: var(--iaa-texto-titular);
  letter-spacing: -.01em;
}
.iaa-modulo__meta {
  display: block;
  margin-top: var(--iaa-sp-1);
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-regular);
  color: var(--iaa-texto-suave);
  font-variant-numeric: tabular-nums;
}
.iaa-modulo__cuerpo {
  display: grid; gap: var(--iaa-sp-6);
  padding: 0 var(--iaa-sp-6) var(--iaa-sp-6) calc(var(--iaa-sp-6) + 2.1rem);
}
@media (min-width: 780px) { .iaa-modulo__cuerpo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iaa-modulo__cuerpo dt {
  font-size: var(--iaa-t-xs);
  font-weight: var(--iaa-peso-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--iaa-texto-suave);
  margin-bottom: var(--iaa-sp-2);
}
.iaa-modulo__cuerpo dd { margin: 0; font-size: var(--iaa-t-sm); line-height: 1.6; }

/* ── Tabla de especificaciones ─────────────────────────────────────────── */
.iaa-especificaciones { display: grid; }
.iaa-especificaciones > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--iaa-sp-6);
  padding-block: var(--iaa-sp-4);
  border-top: 1px solid var(--iaa-borde);
}
.iaa-especificaciones > div:last-child { border-bottom: 1px solid var(--iaa-borde); }
.iaa-especificaciones dt { font-size: var(--iaa-t-sm); color: var(--iaa-texto-suave); }
.iaa-especificaciones dd {
  margin: 0; text-align: right;
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-medium);
  color: var(--iaa-texto-titular);
}

/* ── FAQ: siempre visible, nunca plegada (GUIA_SEO §3.2) ───────────────── */
.iaa-faq { display: grid; max-width: 76ch; }
.iaa-faq > div { padding-block: var(--iaa-sp-6); border-top: 1px solid var(--iaa-borde); }
.iaa-faq > div:last-child { border-bottom: 1px solid var(--iaa-borde); }
.iaa-faq h3 {
  font-size: var(--iaa-t-md);
  font-weight: var(--iaa-peso-medium);
  margin-bottom: var(--iaa-sp-3);
}

/* ── Pasos numerados ───────────────────────────────────────────────────── */
.iaa-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--iaa-sp-6); }
.iaa-pasos li { display: flex; gap: var(--iaa-sp-4); }
.iaa-pasos b {
  flex-shrink: 0;
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .08em;
  color: var(--iaa-acento);
  font-variant-numeric: tabular-nums;
  padding-top: .15em;
}
.iaa-pasos strong { display: block; font-weight: var(--iaa-peso-medium); color: var(--iaa-texto-titular); }
.iaa-pasos p { margin-top: var(--iaa-sp-1); font-size: var(--iaa-t-sm); color: var(--iaa-texto-suave); }

/* ── Formularios ───────────────────────────────────────────────────────── */
.iaa-formulario { display: grid; gap: var(--iaa-sp-8); }
.iaa-campos { display: grid; gap: var(--iaa-sp-4); }
@media (min-width: 680px) { .iaa-campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.iaa-campo { display: grid; gap: var(--iaa-sp-2); }
.iaa-campo > label,
.iaa-pregunta__label {
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-medium);
  color: var(--iaa-texto-titular);
}
.iaa-campo small { font-size: var(--iaa-t-sm); line-height: 1.55; color: var(--iaa-texto-suave); }
.iaa-campo input,
.iaa-campo textarea,
.iaa-campo select {
  font: inherit;
  font-size: var(--iaa-t-sm);
  color: var(--iaa-texto);
  background: var(--iaa-blanco-puro);
  border: 1px solid #C9CFD7;
  border-radius: var(--iaa-radio);
  padding: .85em 1em;
  min-height: 48px;   /* mínimo táctil */
  width: 100%;
}
.iaa-campo textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.iaa-campo input:focus-visible,
.iaa-campo textarea:focus-visible { border-color: var(--iaa-acento); }
.iaa-pregunta { display: grid; gap: var(--iaa-sp-2); }
.iaa-pregunta__cabecera { display: flex; gap: var(--iaa-sp-4); align-items: baseline; }
.iaa-pregunta__n {
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .08em;
  color: var(--iaa-acento);
  font-variant-numeric: tabular-nums;
}
.iaa-pregunta__label { font-size: var(--iaa-t-md); line-height: 1.4; }
.iaa-pregunta__cuerpo { padding-left: 2.1rem; display: grid; gap: var(--iaa-sp-3); }
@media (max-width: 560px) { .iaa-pregunta__cuerpo { padding-left: 0; } }
.iaa-envio {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--iaa-sp-6);
  border-top: 1px solid var(--iaa-borde);
  padding-top: var(--iaa-sp-6);
}
.iaa-envio p { font-size: var(--iaa-t-sm); line-height: 1.55; color: var(--iaa-texto-suave); max-width: 48ch; }

/* ── Registro público de certificados ──────────────────────────────────── */
.iaa-registro { display: grid; gap: var(--iaa-sp-8); }
@media (min-width: 900px) { .iaa-registro { grid-template-columns: 1fr 1fr; align-items: start; } }
.iaa-acta { display: grid; }
.iaa-acta > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--iaa-sp-6);
  padding-block: var(--iaa-sp-4);
  border-top: 1px solid var(--iaa-borde);
}
.iaa-acta > div:last-child { border-bottom: 1px solid var(--iaa-borde); }
.iaa-acta dt { font-size: var(--iaa-t-sm); color: var(--iaa-texto-suave); }
.iaa-acta dd {
  margin: 0; text-align: right;
  font-size: var(--iaa-t-sm);
  font-weight: var(--iaa-peso-medium);
  color: var(--iaa-texto-titular);
}
.iaa-acta .iaa-id { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.iaa-valido {
  display: inline-flex; align-items: center; gap: var(--iaa-sp-2);
  padding: .35em .8em;
  border: 1px solid var(--iaa-teal);
  border-radius: var(--iaa-radio-sm);
  background: #E8F3F5;
  font-size: var(--iaa-t-xs);
  font-weight: var(--iaa-peso-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--iaa-teal-texto);
}
.iaa-oscuro .iaa-valido {
  background: transparent;
  border-color: var(--iaa-teal-sobre-oscuro);
  color: var(--iaa-teal-sobre-oscuro);
}
.iaa-buscador { display: flex; gap: var(--iaa-sp-3); flex-wrap: wrap; }
.iaa-buscador input { flex: 1 1 220px; }

/* ── Barra fija de móvil: el único elemento que persigue al usuario ────── */
.iaa-barra {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: none;
  align-items: center; justify-content: space-between;
  gap: var(--iaa-sp-4);
  padding: var(--iaa-sp-3) var(--iaa-sp-4) calc(var(--iaa-sp-3) + env(safe-area-inset-bottom));
  background: var(--iaa-fondo-alt);
  border-top: 1px solid var(--iaa-borde);
  box-shadow: 0 -2px 12px rgba(25, 44, 74, .08);
}
.iaa-barra b { display: block; font-size: var(--iaa-t-sm); font-weight: var(--iaa-peso-medium); color: var(--iaa-texto-titular); font-variant-numeric: tabular-nums; }
.iaa-barra span { font-size: var(--iaa-t-xs); color: var(--iaa-texto-suave); }
.iaa-barra .iaa-btn { min-height: 48px; }
@media (max-width: 900px) {
  .iaa-barra { display: flex; }
  body:has(.iaa-barra) { padding-bottom: 88px; }
}
@media print { .iaa-barra, .iaa-cabecera { display: none; } }

/* ── Panel en pantallas estrechas ──────────────────────────────────────── */
/* Las lecturas van nowrap para no partirse; a 390 px eso desborda si se
   mantiene el cuerpo de 21 px. Baja el tamaño y el padding, no la retícula:
   dos columnas siguen leyéndose como panel, una sola parecería una lista. */
@media (max-width: 560px) {
  .iaa-lectura { padding: var(--iaa-sp-3) var(--iaa-sp-4); }
  .iaa-lectura dd { font-size: 1.0625rem; }
  .iaa-panel__cabecera,
  .iaa-panel__pie { padding-inline: var(--iaa-sp-4); }
  .iaa-panel__titulo { font-size: var(--iaa-t-xs); }
  .iaa-modulo > summary { padding-inline: var(--iaa-sp-4); }
  .iaa-modulo__cuerpo { padding-left: var(--iaa-sp-4); padding-right: var(--iaa-sp-4); }
  .iaa-especificaciones > div,
  .iaa-acta > div { flex-direction: column; gap: var(--iaa-sp-1); }
  .iaa-especificaciones dd,
  .iaa-acta dd { text-align: left; }
}

/* ── Nombre del titular en /verify/{id} ────────────────────────────────── */
/* Un apellido compuesto largo es una sola palabra sin puntos de corte: a
   76 px desborda el móvil. Un escalón menos y corte permitido. */
.iaa-titular {
  font-size: var(--iaa-t-2xl);
  overflow-wrap: anywhere;
}

/* ── Marcador de pendiente sobre fondo oscuro ──────────────────────────── */
/* El ámbar de fondo claro sobre navy queda sucio; sobre oscuro basta el
   contorno discontinuo y el teal accesible. */
.iaa-oscuro .iaa-pendiente,
.iaa-panel .iaa-pendiente {
  color: var(--iaa-teal-sobre-oscuro);
  background: transparent;
  border-color: var(--iaa-borde-oscuro);
}

/* ── Firma de la autoridad certificadora ───────────────────────────────── */
/* Va en /verify/{id}: es lo que convierte «firmo cada certificado» en algo
   que se ve. Sin ella, la credencial no tiene a nadie detrás. */
.iaa-firma {
  display: grid;
  gap: var(--iaa-sp-2);
  border-top: 1px solid var(--iaa-borde);
  padding-top: var(--iaa-sp-6);
  margin-top: var(--iaa-sp-8);
}
.iaa-firma dt {
  font-size: var(--iaa-t-xs);
  font-weight: var(--iaa-peso-medium);
  letter-spacing: var(--iaa-ls-eyebrow);
  text-transform: uppercase;
  color: var(--iaa-texto-suave);
}
.iaa-firma dd { margin: 0; }
.iaa-firma strong {
  display: block;
  font-size: var(--iaa-t-md);
  font-weight: var(--iaa-peso-medium);
  color: var(--iaa-texto-titular);
}
.iaa-firma span { font-size: var(--iaa-t-sm); color: var(--iaa-texto-suave); }

/* ── Aviso de estado de formulario sobre fondo oscuro ──────────────────── */
.iaa-oscuro [data-estado] { color: var(--iaa-teal-sobre-oscuro) !important; }