/* ==========================================================================
   OpoTIC — web publica
   Construida sobre los tokens del Design System (css/tokens/*.css).
   Regla de oro: aqui no se inventa ningun color; solo se usan alias y tokens.
   ========================================================================== */

/* --------------------------------------------------------------- utilidades */

.contenedor {
  width: 100%;
  max-width: var(--container-lg);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.contenedor--xl { max-width: var(--container-xl); }
.contenedor--md { max-width: var(--container-md); }

.seccion {
  padding-block: var(--section-y-sm);
  position: relative;
}

.seccion--claro  { background: var(--surface-card); }
.seccion--pagina { background: var(--surface-page); }
.seccion--suave  { background: var(--gradient-brand-soft); }
.seccion--oscuro { background: var(--surface-dark); }

.ico { flex: 0 0 auto; }

.eyebrow {
  font: var(--type-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-brand);
  display: block;
}

.eyebrow--dark { color: var(--teal-400); }

.lead {
  font: var(--type-lead);
  color: var(--text-muted);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.salto-contenido {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--surface-card);
  color: var(--text-brand);
  border: var(--border-width) solid var(--border-brand);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font: var(--type-label);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.salto-contenido:focus { transform: translateY(0); }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  height: var(--field-height);
  padding-inline: var(--space-5);
  font-size: var(--text-md);
  transition: var(--transition-control), transform var(--duration-instant) var(--ease-standard);
}

.btn:active:not(:disabled) { transform: scale(var(--press-scale)); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--sm { height: var(--field-height-sm); padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn--lg { height: 52px; padding-inline: var(--space-6); font-size: var(--text-lg); }
.btn--bloque { width: 100%; }

.btn--primario { background: var(--teal-700); color: var(--text-on-brand); }
.btn--primario:hover:not(:disabled) { background: var(--teal-800); color: var(--text-on-brand); }
.btn--primario:active:not(:disabled) { background: var(--teal-900); }

.btn--secundario { background: var(--surface-card); color: var(--navy-800); border-color: var(--border-default); }
.btn--secundario:hover:not(:disabled) { background: var(--teal-050); border-color: var(--teal-400); color: var(--teal-900); }
.btn--secundario:active:not(:disabled) { background: var(--teal-100); }

.btn--fantasma { background: transparent; color: var(--teal-700); }
.btn--fantasma:hover:not(:disabled) { background: var(--state-hover-ink); color: var(--teal-800); }
.btn--fantasma:active:not(:disabled) { background: var(--state-press-ink); }

.btn--inverso { background: var(--white); color: var(--navy-900); }
.btn--inverso:hover:not(:disabled) { background: var(--teal-100); color: var(--navy-900); }

.btn--sobre-oscuro { background: transparent; color: var(--white); border-color: var(--border-on-dark); }
.btn--sobre-oscuro:hover:not(:disabled) {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
  color: var(--white);
}

/* El icono derecho avanza 2 px al pasar el raton: refuerza la idea de direccion. */
.btn .ico--fin { transition: transform var(--duration-fast) var(--ease-standard); }
.btn:hover .ico--fin { transform: translateX(2px); }

/* ------------------------------------------------------------------- badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-xs);
  font: var(--type-overline);
  letter-spacing: var(--ls-wide);
  border: var(--border-width) solid transparent;
  white-space: nowrap;
  align-self: flex-start;
}

.badge--marca   { background: var(--teal-100); color: var(--teal-800); }
.badge--navy    { background: var(--navy-800); color: var(--white); }
.badge--teal    { background: var(--teal-700); color: var(--white); }
.badge--neutro  { background: var(--ink-100); color: var(--ink-700); }
.badge--contorno { background: transparent; color: var(--text-body); border-color: var(--teal-400); }
.badge--contorno-oscuro { background: transparent; color: rgba(255,255,255,.86); border-color: var(--border-on-dark); }

/* ----------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
  transition: var(--transition-surface), border-color var(--duration-fast) var(--ease-standard);
}

.tarjeta--elevada { box-shadow: var(--shadow-md); border-color: transparent; }
.tarjeta--plana { box-shadow: none; }

.tarjeta--interactiva:hover {
  transform: var(--lift-hover);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-300);
}

.tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-brand-soft);
  color: var(--teal-700);
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------ cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border-bottom: var(--border-width) solid transparent;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.cabecera[data-desplazada='true'] {
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-xs);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
}

.cabecera__logo { display: flex; align-items: center; flex: 0 0 auto; }
.cabecera__logo img { height: 36px; width: auto; display: block; }

.cabecera__nav {
  display: flex;
  gap: var(--space-6);
  flex: 1;
  align-items: center;
}

.cabecera__enlace {
  font: var(--type-label);
  color: var(--text-body);
  text-decoration: none;
  position: relative;
  padding-block: var(--space-1);
}

/* Subrayado que crece desde la izquierda: 140 ms, sin rebote. */
.cabecera__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background: var(--teal-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.cabecera__enlace:hover { color: var(--teal-800); }
.cabecera__enlace:hover::after,
.cabecera__enlace[aria-current='true']::after { transform: scaleX(1); }

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.cabecera__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  color: var(--navy-800);
  cursor: pointer;
  transition: var(--transition-control);
}

.cabecera__menu-btn:hover { background: var(--teal-050); border-color: var(--teal-400); }

.menu-movil {
  display: none;
  border-top: var(--border-width) solid var(--border-subtle);
  background: var(--surface-card);
  padding: var(--space-4) 0 var(--space-6);
}

.menu-movil[data-abierto='true'] { display: block; }

.menu-movil__lista {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.menu-movil__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-min);
  font: var(--type-h4);
  color: var(--text-strong);
  text-decoration: none;
  border-bottom: var(--border-width) solid var(--border-subtle);
  padding-block: var(--space-3);
}

.menu-movil__lista a .ico { color: var(--ink-400); }
.menu-movil__acciones { display: flex; flex-direction: column; gap: var(--space-3); }

/* --------------------------------------------------------------------- hero */

.hero { padding-block: var(--space-10) var(--space-11); overflow: hidden; }

.hero__rejilla {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-10);
  align-items: center;
}

.hero__titulo {
  font: var(--type-display);
  font-size: clamp(32px, 3.5vw, 48px);
  letter-spacing: var(--ls-tighter);
  margin-top: var(--space-5);
}

/* Las dos lineas del titular entran escalonadas, 220 ms y 12 px. */
.hero__titulo span { display: block; }

.hero__lead { margin-top: var(--space-5); max-width: 56ch; color: var(--ink-700); }

.hero__ctas {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

.hero__apoyos {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-8);
  flex-wrap: wrap;
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.hero__apoyo { display: flex; align-items: center; gap: var(--space-2); }
.hero__apoyo .ico { color: var(--teal-700); }

/* ------------------------------------------------- panel de producto (hero) */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.panel__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.panel__tema { font: var(--type-h3); color: var(--text-strong); margin-top: var(--space-1); }

.panel__motivo {
  font: var(--type-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.panel__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border-subtle);
}

.panel__pie span { font: var(--type-caption); color: var(--text-subtle); }

.panel__nota {
  font: var(--type-caption);
  color: var(--text-subtle);
  text-align: center;
  margin-top: var(--space-3);
}

/* Barra de progreso: solo anima la anchura, 320 ms. */
.progreso__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.progreso__label { font: var(--type-label); color: var(--text-muted); }

.progreso__valor {
  font: var(--type-mono);
  font-size: var(--text-xs);
  color: var(--text-brand);
}

.progreso__pista {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
}

.progreso__barra {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--teal-700);
  width: 0;
  transition: width var(--duration-slow) var(--ease-out);
}

.sesion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: var(--transition-control);
}

.sesion--activa {
  border-color: var(--teal-700);
  background: var(--surface-brand-softer);
  box-shadow: inset 0 0 0 1px var(--teal-700);
}

.sesion__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--ink-100);
  color: var(--ink-600);
  flex: 0 0 auto;
}

.sesion--activa .sesion__icono { background: var(--teal-100); color: var(--teal-800); }
.sesion__cuerpo { flex: 1; min-width: 0; }
.sesion__titulo { font: var(--type-label); color: var(--text-strong); }

.sesion__duracion {
  font: var(--type-mono);
  font-size: var(--text-2xs);
  color: var(--text-subtle);
}

/* Medidor de dominio: cuatro barras, se rellenan las alcanzadas. */
.dominio { display: inline-flex; gap: 3px; align-items: flex-end; }

.dominio__paso {
  width: 6px;
  height: 14px;
  border-radius: 2px;
  background: var(--track);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.dominio__paso[data-activo='true'] { background: var(--teal-700); }

/* ----------------------------------------------------------------- problema */

.problema__rejilla {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-10);
  align-items: start;
}

.problema__parrafo { font: var(--type-body); color: var(--text-muted); margin-top: var(--space-4); }

.problema__parrafo--fuerte {
  color: var(--text-strong);
  font-weight: var(--fw-medium);
}

.preguntas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pregunta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  background: var(--surface-page);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font: var(--type-body-sm);
  color: var(--text-body);
  transition: var(--transition-control);
}

.pregunta .ico { color: var(--ink-500); transition: color var(--duration-fast) var(--ease-standard); }
.pregunta:hover { border-color: var(--teal-400); background: var(--teal-050); }
.pregunta:hover .ico { color: var(--teal-700); }

/* ------------------------------------------------------------------- metodo */

.metodo__intro { max-width: 720px; }
.metodo__lead { margin-top: var(--space-4); }

.pasos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-9) 0 0;
  padding: 0;
  position: relative;
}

/* Linea que une las cinco etapas: se dibuja al entrar en pantalla. */
.pasos::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--border-subtle);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slower) var(--ease-out);
}

.pasos[data-visible='true']::before { transform: scaleX(1); }

.paso { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.paso__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--teal-100);
  color: var(--teal-800);
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  transition: var(--transition-control), transform var(--duration-base) var(--ease-out);
}

.paso:hover .paso__icono { background: var(--teal-700); color: var(--white); }

.paso__titulo { display: flex; align-items: baseline; gap: var(--space-2); }

.paso__numero {
  font: var(--type-mono);
  font-size: var(--text-2xs);
  color: var(--text-subtle);
}

.paso__nombre { font: var(--type-h4); color: var(--text-strong); }

.paso__descripcion {
  font: var(--type-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* -------------------------------------------------------------- oposiciones */

.seccion__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.seccion__encabezado > div { max-width: 620px; }

.cuerpos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.cuerpo { display: flex; flex-direction: column; }
.cuerpo__nombre { font: var(--type-h4); margin-top: var(--space-4); }
.cuerpo__resumen { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-2); }

.cuerpo__lista {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.cuerpo__lista li {
  display: flex;
  gap: var(--space-3);
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.cuerpo__lista .ico { color: var(--teal-700); margin-top: 2px; }

.cuerpo__pie {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
}

/* --------------------------------------------------------------- plataforma */

.plataforma__rejilla {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--space-10);
  align-items: center;
}

.plataforma__titulo {
  font: var(--type-h1);
  color: var(--white);
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-4);
}

.plataforma__lead { color: rgba(255, 255, 255, .72); margin-top: var(--space-4); }

.principios {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.principio { display: flex; gap: var(--space-4); }
.principio .ico { color: var(--teal-400); margin-top: 2px; }
.principio__titulo { font: var(--type-h4); color: var(--white); }

.principio__descripcion {
  font: var(--type-body-sm);
  color: rgba(255, 255, 255, .66);
  margin-top: 2px;
}

.metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.metrica {
  background: var(--navy-900);
  border: var(--border-width) solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.metrica__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.metrica__label {
  font: var(--type-label);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .66);
}

.metrica__cabecera .ico { color: var(--teal-400); }
.metrica__cifra { display: flex; align-items: baseline; gap: var(--space-2); }

.metrica__valor {
  font: var(--type-metric);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.metrica__unidad { font: var(--type-body-sm); color: rgba(255, 255, 255, .6); }

.metrica__pie {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  flex-wrap: wrap;
}

.metrica__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--teal-400);
  font-weight: var(--fw-medium);
}

.metrica__hint { color: rgba(255, 255, 255, .55); }

.plataforma__nota {
  font: var(--type-caption);
  color: rgba(255, 255, 255, .5);
  margin-top: var(--space-4);
  text-align: right;
}

/* --------------------------------------------------------------- confianza */

.razones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.razon__cabecera {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.razon__titulo { font: var(--type-h4); }
.razon p { font: var(--type-body-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------- FAQ */

.faq__lista {
  margin-top: var(--space-8);
  border-top: var(--border-width) solid var(--border-subtle);
}

.faq__item { border-bottom: var(--border-width) solid var(--border-subtle); }

.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: var(--type-h4);
  color: var(--text-strong);
  transition: color var(--duration-fast) var(--ease-standard);
}

.faq__pregunta:hover { color: var(--teal-800); }

.faq__pregunta .ico {
  color: var(--teal-700);
  transition: transform var(--duration-base) var(--ease-standard);
}

.faq__pregunta[aria-expanded='true'] .ico { transform: rotate(180deg); }

.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-standard);
}

.faq__respuesta[data-abierta='true'] { grid-template-rows: 1fr; }
.faq__respuesta > div { overflow: hidden; }

.faq__respuesta p {
  font: var(--type-body);
  color: var(--text-muted);
  padding-bottom: var(--space-5);
  max-width: 78ch;
}

/* ------------------------------------------------------------------- cierre */

.cierre {
  background: var(--gradient-brand);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-9);
  display: flex;
  gap: var(--space-8);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cierre__texto { max-width: 620px; }

.cierre__titulo {
  font: var(--type-h1);
  color: var(--white);
  letter-spacing: var(--ls-tight);
}

.cierre__lead { color: rgba(255, 255, 255, .78); margin-top: var(--space-4); }
.cierre__ctas { display: flex; flex-direction: column; gap: var(--space-3); }

/* --------------------------------------------------------------------- pie */

.pie {
  background: var(--surface-darker);
  color: rgba(255, 255, 255, .66);
  padding-block: var(--space-11) var(--space-7);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
}

.pie__logo { height: 30px; width: auto; display: block; }

.pie__descripcion {
  font: var(--type-body-sm);
  margin-top: var(--space-4);
  max-width: 34ch;
}

.pie__contacto {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font: var(--type-body-sm);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}

.pie__contacto:hover { color: var(--white); }

.pie__titulo {
  font: var(--type-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: rgba(255, 255, 255, .4);
}

.pie__lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pie__lista a {
  font: var(--type-body-sm);
  color: rgba(255, 255, 255, .66);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

.pie__lista a:hover { color: var(--white); }

.pie__base {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-on-dark);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font: var(--type-caption);
  color: rgba(255, 255, 255, .45);
}

.pie__legales { display: flex; gap: var(--space-5); }
.pie__legales a { color: inherit; text-decoration: none; }
.pie__legales a:hover { color: var(--white); }

/* ------------------------------------------------------------ formularios */

.formulario { display: flex; flex-direction: column; gap: var(--space-6); }

.campo { display: flex; flex-direction: column; gap: var(--space-2); }

.campo__label { font: var(--type-label); color: var(--text-strong); }
.campo__label .obligatorio { color: var(--teal-700); }

.campo__control {
  height: var(--field-height);
  width: 100%;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-default);
  background: var(--surface-card);
  padding-inline: var(--space-4);
  font: var(--type-body);
  color: var(--text-body);
  transition: var(--transition-control);
}

textarea.campo__control {
  height: auto;
  min-height: 110px;
  padding-block: var(--space-3);
  resize: vertical;
  font: var(--type-body);
}

select.campo__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234C6670' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-9);
}

.campo__control:hover { border-color: var(--border-strong); }

.campo__control:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-focus);
}

.campo__control[aria-invalid='true'] { border-color: var(--danger-solid); }

.campo__hint { font: var(--type-caption); color: var(--text-subtle); }

.campo__error {
  font: var(--type-caption);
  color: var(--danger-fg);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.opcion {
  position: relative;
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  background: var(--surface-card);
  transition: var(--transition-control);
}

.opcion:hover { border-color: var(--teal-400); background: var(--teal-050); }

.opcion input { position: absolute; opacity: 0; pointer-events: none; }

.opcion__marca {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: var(--border-width-strong) solid var(--border-strong);
  flex: 0 0 auto;
  margin-top: 2px;
  transition: var(--transition-control);
  display: grid;
  place-items: center;
}

.opcion__marca::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--white);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.opcion input:checked ~ .opcion__marca { border-color: var(--teal-700); background: var(--teal-700); }
.opcion input:checked ~ .opcion__marca::after { transform: scale(1); }

.opcion:has(input:checked) {
  border-color: var(--teal-700);
  background: var(--surface-brand-softer);
  box-shadow: inset 0 0 0 1px var(--teal-700);
}

.opcion input:focus-visible ~ .opcion__marca { box-shadow: var(--shadow-focus); }

.opcion__titulo { font: var(--type-label); color: var(--text-strong); }
.opcion__descripcion { font: var(--type-caption); color: var(--text-muted); margin-top: 2px; }

.casilla {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}

.casilla input { position: absolute; opacity: 0; pointer-events: none; }

.casilla__marca {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: var(--border-width-strong) solid var(--border-strong);
  flex: 0 0 auto;
  margin-top: 1px;
  display: grid;
  place-items: center;
  color: var(--white);
  transition: var(--transition-control);
}

.casilla__marca .ico { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.casilla input:checked ~ .casilla__marca { background: var(--teal-700); border-color: var(--teal-700); }
.casilla input:checked ~ .casilla__marca .ico { opacity: 1; }
.casilla input:focus-visible ~ .casilla__marca { box-shadow: var(--shadow-focus); }
.casilla__texto { font: var(--type-body-sm); color: var(--text-body); }

.aviso {
  display: flex;
  gap: var(--space-3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: var(--border-width) solid transparent;
}

.aviso--error { background: var(--danger-bg); border-color: var(--danger-solid); color: var(--danger-fg); }
.aviso--exito { background: var(--success-bg); border-color: var(--success-solid); color: var(--success-fg); }
.aviso--info  { background: var(--info-bg); border-color: var(--teal-400); color: var(--info-fg); }
.aviso__titulo { font: var(--type-h4); color: inherit; }
.aviso p { font: var(--type-body-sm); margin-top: var(--space-1); color: inherit; }

/* -------------------------------------------------------- paginas internas */

.pagina-cabecera { padding-block: var(--space-10) var(--space-8); }
.pagina-cabecera h1 { margin-top: var(--space-4); }
.pagina-cabecera .lead { margin-top: var(--space-4); max-width: 62ch; }

.prosa { max-width: 72ch; }
.prosa h2 { font: var(--type-h3); margin-top: var(--space-8); }
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { font: var(--type-body); color: var(--text-muted); margin-top: var(--space-4); }
.prosa ul { padding-left: var(--space-6); }
.prosa strong { color: var(--text-strong); font-weight: var(--fw-semibold); }

.pendiente {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-caption);
  color: var(--warning-fg);
  background: var(--warning-bg);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
}

.estado {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-11);
}

.estado__codigo {
  font: var(--type-mono);
  font-size: var(--text-sm);
  color: var(--text-brand);
  letter-spacing: var(--ls-caps);
}

.estado h1 { margin-top: var(--space-4); }
.estado p { margin-top: var(--space-4); max-width: 48ch; }
.estado .btn { margin-top: var(--space-7); }

/* ------------------------------------------------------------ animaciones */

/* Aparicion al hacer scroll: fundido corto + 12 px, nada mas. */
.revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.revelar[data-visible='true'] { opacity: 1; transform: none; }

/* Escalonado por posicion dentro del grupo, sin estilos inline (CSP estricto). */
.revelar[data-i='1'] { transition-delay:  60ms; }
.revelar[data-i='2'] { transition-delay: 120ms; }
.revelar[data-i='3'] { transition-delay: 180ms; }
.revelar[data-i='4'] { transition-delay: 240ms; }
.revelar[data-i='5'] { transition-delay: 300ms; }
.revelar[data-i='6'] { transition-delay: 360ms; }
.revelar[data-i='7'] { transition-delay: 420ms; }
.revelar[data-i='8'] { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .pasos::before { transform: scaleX(1); transition: none; }
  .progreso__barra { transition: none; }
  html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* -------------------------------------------------------------- responsive */

@media (min-width: 900px) {
  .seccion { padding-block: var(--section-y); }
  .contenedor { padding-inline: var(--gutter-lg); }
}

@media (max-width: 1080px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-8); }
  .pasos::before { display: none; }
  .cuerpos, .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

@media (max-width: 960px) {
  .cabecera__nav { display: none; }
  .cabecera__menu-btn { display: inline-flex; }
  .hero__rejilla,
  .problema__rejilla,
  .plataforma__rejilla { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero { padding-block: var(--space-9) var(--space-10); }
  .plataforma__nota { text-align: left; }
}

@media (max-width: 720px) {
  .pasos { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .paso { flex-direction: row; gap: var(--space-4); }
  .cuerpos, .razones, .preguntas, .opciones, .metricas { grid-template-columns: 1fr; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .cierre { padding: var(--space-8) var(--space-6); }
  .cierre__ctas { width: 100%; }
  .cierre__ctas .btn { width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .seccion__encabezado { align-items: flex-start; }
  .metricas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .metricas { grid-template-columns: 1fr; }
  .cabecera__logo img { height: 30px; }
}


/* ------------------------------------- clases que sustituyen estilos inline */

.bloque-intro { max-width: 680px; }
.seccion--cierre { background: var(--surface-page); padding-block: var(--space-10); }
.seccion--formulario { padding-block: var(--space-9) var(--section-y-sm); }
.aviso--separado { margin-bottom: var(--space-7); }
.campo__hint--pie { margin-top: var(--space-3); }

.confirmacion { padding: var(--space-9); }
.confirmacion__icono { width: 40px; height: 40px; }
.confirmacion__titulo { margin-top: var(--space-5); }
.confirmacion__parrafo { margin-top: var(--space-4); }

.confirmacion__acciones {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

/* --------------------------------------- ajustes de escala del hero (1440+) */

.hero .contenedor { max-width: var(--container-xl); }

@media (max-width: 720px) {
  .confirmacion { padding: var(--space-6); }
  .confirmacion__acciones .btn { width: 100%; }
}

/* ==========================================================================
   Paginas de oposicion (/oposiciones/*)
   ========================================================================== */

/* ------------------------------------------------------------------ migas */

.migas { margin-bottom: var(--space-6); }

.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font: var(--type-body-sm);
  color: var(--text-subtle);
}

.migas li + li::before {
  content: "\00B7";
  margin-right: var(--space-2);
  color: var(--ink-400);
}

.migas a { color: var(--text-muted); text-decoration: none; }
.migas a:hover { color: var(--text-link); }
.migas [aria-current="page"] { color: var(--text-body); }

/* --------------------------------------------------------------- cabecera */

.op-cabecera { padding-block: var(--space-9) var(--space-10); }

.op-cabecera__rejilla {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-10);
  align-items: start;
}

.op-titulo {
  font: var(--type-display);
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: var(--ls-tighter);
  margin-top: var(--space-4);
}

.op-entradilla { margin-top: var(--space-5); max-width: 60ch; color: var(--ink-700); }

.op-ctas {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

.op-actualizado {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font: var(--type-caption);
  color: var(--text-subtle);
}

.op-actualizado .ico { color: var(--success-fg); }

/* --------------------------------------------------------- ficha de datos */

.ficha {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.ficha__titulo {
  font: var(--type-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-brand);
  margin-bottom: var(--space-4);
}

.ficha__lista { margin: 0; }

.ficha__fila {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-width) solid var(--border-subtle);
}

.ficha__fila:first-child { border-top: 0; padding-top: 0; }

.ficha__fila dt {
  font: var(--type-label);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.ficha__fila dd {
  margin: 0;
  font: var(--type-body-sm);
  color: var(--text-strong);
  font-weight: var(--fw-medium);
}

.ficha__fila--destacada dd {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  line-height: 1.2;
}

/* ------------------------------------------------ respuesta rapida (AEO) */

.op-respuesta-seccion { padding-block: var(--space-9); }

.op-respuesta {
  border-left: 3px solid var(--teal-700);
  padding-left: var(--space-6);
}

.op-respuesta h2 { font: var(--type-h2); letter-spacing: var(--ls-tight); }

.op-respuesta p {
  font: var(--type-lead);
  color: var(--text-body);
  margin-top: var(--space-4);
  max-width: 72ch;
}

/* ------------------------------------------------------------- requisitos */

.op-dos-columnas {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-10);
  align-items: start;
}

.op-destacado {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--surface-brand-softer);
  border: var(--border-width) solid var(--teal-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
}

.op-destacado h3 { font: var(--type-h4); }
.op-destacado p { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-2); }

.op-subtitulo { font: var(--type-h3); margin-bottom: var(--space-4); }

.op-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.op-lista--densa { gap: var(--space-3); margin-top: var(--space-5); }

.op-lista li {
  display: flex;
  gap: var(--space-3);
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.op-lista .ico { color: var(--teal-700); margin-top: 2px; }

.op-nota {
  font: var(--type-body-sm);
  color: var(--text-subtle);
  margin-top: var(--space-5);
  max-width: 76ch;
}

/* ------------------------------------------------------------- ejercicios */

.ejercicios {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ejercicio__cabecera {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.ejercicio__numero {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--ink-300);
  line-height: 1;
  flex: 0 0 auto;
}

.ejercicio__nombre { font: var(--type-h3); }
.ejercicio__resumen { font: var(--type-body-sm); color: var(--text-brand); margin-top: var(--space-1); }

.op-notas {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* ---------------------------------------------------------------- temario */

.temario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.temario__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.temario__cabecera h3 { font: var(--type-h4); }
.temario__rango { font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 2px; }

.temario__cifra {
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  line-height: 1;
}

.temario__lista {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.temario__lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.temario__n { color: var(--text-subtle); flex: 0 0 auto; }

/* ----------------------------------------------------------- convocatoria */

.convocatoria {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-8);
  margin-top: var(--space-6);
}

.convocatoria__cifras { display: flex; flex-direction: column; gap: var(--space-6); }

.convocatoria__valor {
  display: block;
  font-size: var(--text-5xl);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  line-height: 1;
}

.convocatoria__label {
  display: block;
  font: var(--type-label);
  color: var(--text-body);
  margin-top: var(--space-2);
}

.convocatoria__hint { display: block; font: var(--type-caption); color: var(--text-subtle); margin-top: 2px; }

.convocatoria__fuente {
  border-left: var(--border-width) solid var(--border-subtle);
  padding-left: var(--space-7);
}

.convocatoria__fuente dl { margin: 0 0 var(--space-6); }

.convocatoria__fuente dl > div {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.convocatoria__fuente dt { font: var(--type-label); font-size: var(--text-xs); color: var(--text-muted); }
.convocatoria__fuente dd { margin: 0; font: var(--type-body-sm); color: var(--text-strong); }

/* ------------------------------------------------------- tabla historica */

.historico { margin-top: var(--space-10); }

.tabla-envoltorio {
  overflow-x: auto;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  margin-top: var(--space-5);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font: var(--type-body-sm);
  min-width: 520px;
}

.tabla th, .tabla td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.tabla thead th {
  font: var(--type-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
  background: var(--surface-page);
}

.tabla tbody th { font: var(--type-label); color: var(--text-strong); font-weight: var(--fw-medium); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.tabla tbody tr:hover { background: var(--teal-050); }
.tabla__num { text-align: right; }
.tabla td.mono { color: var(--text-body); }

/* ------------------------------------------------------ otras oposiciones */

.op-otras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.op-otra { display: flex; flex-direction: column; text-decoration: none; }
.op-otra h3 { font: var(--type-h4); margin-top: var(--space-4); }
.op-otra p { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-2); flex: 1; }

.op-otra__enlace {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--type-label);
  color: var(--text-brand);
  margin-top: var(--space-5);
}

.op-otra .ico--fin { transition: transform var(--duration-fast) var(--ease-standard); }
.op-otra:hover .ico--fin { transform: translateX(2px); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .op-cabecera__rejilla,
  .op-dos-columnas,
  .convocatoria { grid-template-columns: 1fr; gap: var(--space-8); }
  .convocatoria__fuente { border-left: 0; padding-left: 0; }
  .convocatoria__cifras { flex-direction: row; gap: var(--space-8); flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .temario, .op-otras { grid-template-columns: 1fr; }
  .op-ctas .btn { flex: 1 1 100%; }
  .convocatoria { padding: var(--space-6); }
  .convocatoria__cifras { flex-direction: column; gap: var(--space-6); }
  .ficha__fila { grid-template-columns: 1fr; gap: var(--space-1); }
  .op-respuesta { padding-left: var(--space-4); }
  .ejercicio__numero { font-size: var(--text-lg); }
}

/* La tarjeta de cuerpo es clicable entera, pero solo hay un enlace real:
   el del titular. El resto se cubre con un pseudoelemento. */
.cuerpo { position: relative; }
.cuerpo__enlace { color: inherit; text-decoration: none; }

.cuerpo__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.cuerpo:hover .cuerpo__enlace { color: var(--text-link); }
.cuerpo:hover .ico--fin { transform: translateX(2px); }
.cuerpo .ico--fin { transition: transform var(--duration-fast) var(--ease-standard); }

.cuerpo__enlace:focus-visible { outline: none; }

.cuerpo__enlace:focus-visible::after {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Modalidades de servicio y pagina de la plataforma
   ========================================================================== */

.modalidades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
  align-items: start;
}

.modalidad {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* La opcion tutorizada pesa mas: borde de marca y elevacion. */
.modalidad--destacada {
  border-color: var(--teal-700);
  box-shadow: var(--shadow-md);
}

.modalidad__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: 24px;
}

.modalidad__recomendada {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--type-overline);
  letter-spacing: var(--ls-wide);
  color: var(--text-brand);
}

.modalidad__nombre { font: var(--type-h2); font-size: var(--text-2xl); margin-top: var(--space-5); }

.modalidad__resumen {
  font: var(--type-label);
  color: var(--text-body);
  margin-top: var(--space-2);
}

.modalidad__descripcion {
  font: var(--type-body-sm);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.modalidad__precio {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-page);
}

.modalidad--destacada .modalidad__precio { background: var(--surface-brand-softer); }

.modalidad__precio-titular {
  display: block;
  font: var(--type-h4);
  color: var(--text-strong);
}

.modalidad__precio-detalle {
  display: block;
  font: var(--type-caption);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.modalidad__lista {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.modalidad__lista li {
  display: flex;
  gap: var(--space-3);
  font: var(--type-body-sm);
  color: var(--text-body);
}

.modalidad__lista .ico { color: var(--teal-700); margin-top: 2px; }

/* Lo que la modalidad NO incluye: gris, nunca rojo. El rojo no juzga. */
.modalidad__no { color: var(--text-subtle); }
.modalidad__no .ico { color: var(--ink-400); }

.modalidad__pie {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
}

.modalidad__nota {
  font: var(--type-caption);
  color: var(--text-subtle);
  margin-top: var(--space-3);
  text-align: center;
}

/* -------------------------------------------- pasos sobre fondo navy */

.pasos--oscuro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos--oscuro::before { background: var(--border-on-dark); }

.paso__icono--oscuro { background: rgba(255, 255, 255, .10); color: var(--teal-400); }
.paso:hover .paso__icono--oscuro { background: var(--teal-700); color: var(--white); }
.paso__numero--oscuro { color: rgba(255, 255, 255, .5); }
.paso__nombre--oscuro { color: var(--white); }
.paso__descripcion--oscuro { color: rgba(255, 255, 255, .7); }

/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .pasos--oscuro { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
}

@media (max-width: 900px) {
  .modalidades { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .modalidad { padding: var(--space-6); }
  .pasos--oscuro { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Acceso a la Plataforma Inteligente
   ========================================================================== */

/* Boton de acceso: teal de marca, para que sea la accion mas reconocible
   de la cabecera sin competir con el primario de "Solicita plaza". */
.btn--plataforma {
  background: var(--surface-brand-soft);
  color: var(--teal-900);
  border-color: var(--teal-400);
}

.btn--plataforma:hover:not(:disabled) {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: var(--text-on-brand);
}

.btn--plataforma:active:not(:disabled) { background: var(--teal-800); border-color: var(--teal-800); }

/* La etiqueta larga solo cabe en pantallas anchas. */
.cabecera__acceso-corto { display: none; }

@media (max-width: 1180px) {
  .cabecera__acceso-largo { display: none; }
  .cabecera__acceso-corto { display: inline; }
}

/* El acceso a la plataforma incluido en el programa tutorizado se resalta:
   es la duda mas frecuente y tiene que quedar fuera de toda discusion. */
.modalidad__item--destacado {
  background: var(--surface-brand-soft);
  border: var(--border-width) solid var(--teal-400);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--teal-900);
}

.modalidad__item--destacado .ico { color: var(--teal-700); }