/* Variante A · «Cátedra». Editorial sobrio sobre los tokens de comun/tokens.css y los
   componentes de comun/base.css. Solo lo propio de A: portada a dos columnas, listas de
   hechos con filete, el itinerario de 3 + 2 años y el remate. Ningún valor fuera de la escala. */

/* ---------- Portada ---------- */
.portada { padding-block: clamp(var(--e6), 5vw, var(--e9)); }
.portada__columnas { align-items: start; }
.portada__titular { font-size: var(--t-h1); font-weight: 600; max-width: 22ch; }
.portada__bajada { margin-top: var(--e5); max-width: 46ch; }
.portada__cta { margin-top: var(--e6); }
.portada__formulario { margin-top: var(--e6); }
@media (min-width: 900px) {
  .portada__formulario { margin-top: 0; }
  .portada__cta { display: none; } /* en escritorio el formulario ya está a la vista */
  .portada__texto { padding-top: var(--e5); }
}


/* Tras el envío, la tarjeta deja de anunciar «4 datos»: queda el título, el estado y el paso 2 */
#preinscripcion.formulario--enviado .formulario__intro { display: none; }

/* ---------- Listas de hechos (filete dorado arriba, sin cajas) ---------- */
.hechos {
  list-style: none; display: grid; gap: var(--e3);
  margin-top: var(--e6); padding-top: var(--e5);
  border-top: 2px solid var(--dorado);
  max-width: var(--ancho-lectura);
}
.hechos > li { font-family: var(--sans); color: var(--tinta); line-height: 1.45; }
.portada__hechos { max-width: 52ch; }
.hechos--quienes { margin-top: var(--e4); }

/* ---------- Qué es la UIC ---------- */
.que-es__parrafo { margin-top: var(--e5); }
.que-es__subtitulo { font-size: var(--t-h3); color: var(--tinta-2); font-weight: 400; }
@media (min-width: 900px) { .que-es__subtitulo { padding-top: var(--e3); } }

/* ---------- Carreras: el título respira antes de la rejilla ---------- */
#carreras .rejilla { margin-top: var(--e6); }

/* ---------- Itinerario de 3 + 2 años ---------- */
.itinerario__resumen { margin-top: var(--e4); font-family: var(--sans); color: var(--tinta-2); }
.itinerario__selector { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.itinerario__nota { margin-top: var(--e6); }
.itinerario__nota a { color: var(--tinta-2); }

/* La vía: pista en --linea y relleno en --acento que crece con --pl (lo escribe reveal.js) */
.via {
  position: relative; list-style: none;
  margin-top: var(--e7); padding-left: var(--e7);
  display: grid; gap: var(--e5);
}
.via::before, .via::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--e2) + var(--e3) / 2 - 1px); width: 2px;
}
.via::before { background: var(--linea); }
.via::after {
  background: var(--acento);
  transform: scaleY(var(--pl, 0)); transform-origin: top;
  transition: transform var(--rapida) linear;
}

/* Cada semestre: texto sobre la vía, con su nodo. Sin tarjeta. */
.paso { position: relative; }
.paso::before {
  content: ""; position: absolute; top: 0.3em;
  left: calc(var(--e2) - var(--e7)); width: var(--e3); height: var(--e3);
  border-radius: 50%; background: var(--fondo); border: 2px solid var(--linea);
  transition: background var(--media), border-color var(--media);
}
.paso.is-lit::before { background: var(--acento); border-color: var(--acento); }
.paso__cuando { font-family: var(--sans); font-size: var(--t-pequeno); color: var(--tinta-2); line-height: 1.3; }
.paso__anio { font-weight: 600; color: var(--tinta); }
.paso__anio::after { content: " ·"; color: var(--tinta-2); font-weight: 400; }
.paso__carga { font-family: var(--sans); font-size: var(--t-pequeno); color: var(--tinta-2); font-variant-numeric: tabular-nums; margin-top: var(--e1); }
.paso__carga span + span::before { content: "· "; }
.paso__cursos { list-style: none; display: grid; gap: var(--e1); margin-top: var(--e3); font-family: var(--serif); font-size: 1rem; line-height: 1.35; }
.paso__comun { display: block; font-family: var(--sans); font-size: 0.8125rem; color: var(--dorado-texto); }

/* Hitos: la credencial que se obtiene, con el nodo dorado */
.paso--hito::before { border-color: var(--dorado); width: var(--e4); height: var(--e4); left: calc(var(--e2) - var(--e7) - var(--e1)); top: 0.15em; }
.paso--hito.is-lit::before { background: var(--dorado-suave); border-color: var(--dorado); }
.paso__titulo { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; line-height: var(--interlineado-titulo); margin-top: var(--e1); }

/* Escritorio ancho: la vía va horizontal, 6 semestres · hito · 4 semestres · hito */
@media (min-width: 1100px) {
  .via {
    grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr);
    column-gap: var(--e4); row-gap: 0; padding-left: 0;
  }
  .via::before, .via::after {
    left: 0; right: 0; bottom: auto; width: auto; height: 2px;
    top: calc(var(--e7) + var(--e6) / 2 - 1px);
  }
  .via::after { transform: scaleX(var(--pl, 0)); transform-origin: left; }
  .paso { display: grid; grid-template-rows: var(--e7) var(--e6) auto; align-content: start; }
  .paso::before { left: 0; top: calc(var(--e7) + (var(--e6) - var(--e3)) / 2); }
  .paso--hito::before { left: 0; top: calc(var(--e7) + (var(--e6) - var(--e4)) / 2); }
  .paso__cuando { align-self: end; padding-bottom: var(--e2); }
  .paso__anio { display: block; }
  .paso__anio::after { content: none; }
  .paso__carga { grid-row: 3; margin-top: 0; }
  .paso__carga span { display: block; }
  .paso__carga span + span::before { content: none; }
  .paso__cursos { grid-row: 4; font-size: var(--t-pequeno); line-height: 1.3; gap: var(--e2); }
  .paso__comun { font-size: 0.75rem; }
  .paso--hito .paso__titulo { grid-row: 3; font-size: 1.0625rem; margin-top: 0; }
  .paso--hito .paso__carga { grid-row: 4; margin-top: var(--e1); }
}

/* ---------- Cómo se cursa · qué pasa después ---------- */
.como-se-cursa__puntos, .despues__pasos { margin-top: var(--e5); }

/* ---------- Preguntas frecuentes ---------- */
.faq__lista { margin-top: calc(-1 * var(--e3)); } /* el primer renglón alinea con el título */
@media (max-width: 899px) { .faq__lista { margin-top: 0; } }

/* ---------- Remate ---------- */
.cierre__interior { display: grid; gap: var(--e5); align-items: center; }
.cierre__texto { font-size: var(--t-h3); line-height: 1.4; max-width: var(--ancho-lectura); }
@media (min-width: 900px) {
  .cierre__interior { grid-template-columns: 1fr auto; gap: var(--e8); }
}

/* ---------- Movimiento reducido: el itinerario queda encendido de entrada ---------- */
@media (prefers-reduced-motion: reduce) {
  .via::after { transform: none; }
  .paso::before { background: var(--acento); border-color: var(--acento); }
  .paso--hito::before { background: var(--dorado-suave); border-color: var(--dorado); }
}

/* Las cuatro carreras en una fila desde 1280 px: con el objetivo a una oración la franja baja de 1,6 viewports
   (hallazgo de la revisión, 9/10). Mismo recurso que B y C; a dos columnas se queda en el límite. */
@media (min-width: 1280px) {
  #programas.rejilla--2 { grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
  #programas .programa { padding: var(--e5); }
}