/* Variante C · «Manifiesto»: papel y tinta, el bordó como único color, Source Serif 4 en display.
   Depende de tokens.css y base.css; acá va solo lo propio de la variante. Mecanismos: wordIn (claim
   palabra a palabra), beam (borde del formulario) y marquee (mosaico de materias). Ver proceso/02-triada.md. */

/* ---------- El dorado de la línea ASE no aparece en C: los tokens dorados pasan al bordó ---------- */
html[data-variante="c"] {
  --dorado: var(--acento);
  --dorado-texto: var(--acento-texto);
  --dorado-suave: var(--acento-suave);
  --mosaico-gap: var(--e6);
  --mosaico-velocidad: 36; /* píxeles por segundo; escena.js calcula --dur con este valor */
}

/* ---------- Portada: claim a la izquierda, formulario a la derecha ---------- */
.portada { padding-block: clamp(var(--e6), 5vw, var(--e8)); }
.portada__grilla { display: grid; grid-template-columns: 1fr; gap: var(--e7); align-items: start; }
.portada__claim {
  font-size: min(var(--t-display), 11.5vw);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 20ch;
}
.portada__bajada { margin-top: var(--e5); max-width: 42ch; }
.portada__cta { margin-top: var(--e6); }
.portada__cta .boton { width: 100%; }
@media (min-width: 640px) { .portada__cta .boton { width: auto; } }
@media (min-width: 1100px) {
  .portada__grilla { grid-template-columns: 7fr 5fr; gap: var(--e9); }
  .portada__texto { padding-top: var(--e5); }
  .portada__cta { display: none; } /* el formulario ya está a la vista, al lado */
}
.portada__formulario { scroll-margin-top: var(--e6); }

/* El formulario es el único objeto elevado de la página: lleva el beam en el borde */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.portada .formulario { position: relative; isolation: isolate; }
.portada .formulario::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--beam), transparent 0deg 250deg, var(--acento) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beam 7s linear infinite;
  pointer-events: none;
}
@keyframes beam { to { --beam: 360deg; } }

/* ---------- Claim palabra a palabra (solo con JS, bajo html.fx) ---------- */
.palabra { display: inline-block; }
html.fx .palabra {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.25em);
  animation: wordIn 700ms var(--curva) forwards;
  animation-delay: calc(var(--i, 0) * 75ms);
}
html.fx .portada__bajada,
html.fx .portada__cta,
html.fx .portada__formulario {
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 600ms var(--curva) forwards;
  animation-delay: var(--dl-portada, 1100ms);
}
html.fx .portada__formulario { animation-delay: calc(var(--dl-portada, 1100ms) + 120ms); }
@keyframes wordIn { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---------- Mosaico de materias ---------- */
.materias { overflow: hidden; }
.materias__cabeza { display: grid; gap: var(--e3); }
.materias__texto { color: var(--tinta-2); }
.materias__resumen { font-variant-numeric: tabular-nums; }
.materias__resumen:empty { display: none; }
.materias__filtros { margin-top: var(--e5); }
.materias__fallback { margin-top: var(--e5); color: var(--tinta-2); }
.materias__accion { margin-top: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.materias__accion .meta { flex: 1 1 24ch; }

.mosaico { margin-top: var(--e6); transition: opacity var(--rapida); }
.mosaico.is-cambiando { opacity: 0; }
.mosaico ul { list-style: none; margin: 0; padding: 0; }

/* Una pieza: el nombre del curso en serif, su código en sans */
.pieza { display: flex; flex-direction: column; gap: 2px; }
.pieza__nombre { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.25; color: var(--tinta); }
.pieza__codigo { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.3; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pieza__comun { color: var(--acento-texto); }

/* Mural: filas en marquee lento, direcciones alternas */
.mosaico__fila {
  display: flex;
  gap: var(--mosaico-gap);
  overflow: hidden;
  padding-block: var(--e3);
  border-bottom: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.mosaico__fila:first-child { border-top: 1px solid var(--linea); }
.mosaico__grupo {
  display: flex;
  flex: 0 0 auto;
  gap: var(--mosaico-gap);
  animation: marquee var(--dur, 160s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.mosaico__grupo .pieza { white-space: nowrap; }
.mosaico--mural.is-activo .mosaico__grupo { animation-play-state: running; }
.mosaico__fila--reversa .mosaico__grupo { animation-direction: reverse; }
.mosaico--mural:hover .mosaico__grupo,
.mosaico--mural.is-pausado .mosaico__grupo { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--mosaico-gap))); } }

/* Plan de una carrera: grilla estática por año y semestre */
.mosaico--plan { display: grid; gap: var(--e5) var(--e8); grid-template-columns: 1fr; }
.plan-titulo { grid-column: 1 / -1; font-size: var(--t-h3); margin-top: var(--e4); }
.plan-titulo:first-child { margin-top: 0; }
.plan-titulo .meta { display: block; font-weight: 400; margin-top: var(--e1); }
.semestre { border-top: 1px solid var(--linea); padding-top: var(--e3); }
.semestre__rotulo { font-family: var(--sans); font-size: var(--t-pequeno); font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.semestre__lista { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); margin-top: var(--e3); }
.semestre .pieza { max-width: 30ch; }
@media (min-width: 900px) { .mosaico--plan { grid-template-columns: 1fr 1fr; } }

/* ---------- Qué es la UIC ---------- */
.quienes { display: grid; gap: var(--e3); align-content: start; font-family: var(--sans); color: var(--tinta-2); }
.quienes h3 { color: var(--tinta); margin-bottom: var(--e1); }
.quienes p + p { margin-top: 0; }
@media (min-width: 900px) { .quienes { border-left: 0; padding-top: var(--e2); } }

/* ---------- Las 4 licenciaturas: planas y compactas, una al lado de la otra ----------
   El mosaico ya enseña el catálogo; acá queda lo que identifica a cada carrera (nombre, duración,
   créditos, credencial, plan de estudios y botón). La etiqueta repetía el nombre y el objetivo del
   catálogo alargaba la franja más de 1,6 pantallas; ambos quedan fuera en esta variante. */
#programas .tarjeta {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  padding-inline: 0;
  padding-top: var(--e5);
  box-shadow: none;
}
#programas .tarjeta:hover { box-shadow: none; }
#programas .tarjeta__etiqueta,
#programas .tarjeta__texto { display: none; }
#programas .tarjeta__titulo { min-height: 2.6em; }
@media (min-width: 1100px) { #programas.rejilla--2 { grid-template-columns: repeat(4, 1fr); gap: var(--e6); } }

/* ---------- Cómo se cursa · Qué pasa después ---------- */
.cursada__grilla { gap: var(--e7); }
.cursada .puntos, .cursada .pasos { margin-top: var(--e5); }

/* ---------- Preguntas frecuentes ---------- */
.faq__lista { margin-top: var(--e5); max-width: calc(var(--ancho-lectura) + var(--e8)); }

/* ---------- CTA final ---------- */
.cierre__interior { display: grid; gap: var(--e5); justify-items: start; }
.cierre__titulo { font-size: var(--t-h1); font-weight: 400; max-width: 24ch; }
@media (min-width: 900px) {
  .cierre__interior { grid-template-columns: 1fr auto; align-items: center; gap: var(--e8); }
}

/* ---------- Movimiento reducido: todo en su estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .portada .formulario::before { animation: none; background: var(--linea); }
  html.fx .palabra, html.fx .portada__bajada, html.fx .portada__cta, html.fx .portada__formulario {
    opacity: 1; filter: none; transform: none; animation: none;
  }
  .mosaico__fila { display: block; -webkit-mask-image: none; mask-image: none; }
  .mosaico__grupo { animation: none; flex-wrap: wrap; will-change: auto; row-gap: var(--e3); }
  .mosaico__grupo .pieza { white-space: normal; max-width: 30ch; }
  .mosaico__grupo[aria-hidden="true"] { display: none; }
  .mosaico { transition: none; }
}