/* ==========================================================================
   CMCS — Base, tipografía y el tejido
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--marino);
  scroll-behavior: smooth;
  caret-color: var(--ceruleo);
  scrollbar-color: var(--marino) var(--lana-honda);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--lana);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--t-base);
  line-height: var(--interlinea-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--oro); color: var(--tinta); }

:focus-visible {
  outline: var(--hilo-trama) solid var(--ceruleo);
  outline-offset: 3px;
}
.sobre-marino :focus-visible { outline-color: var(--oro); }

/* Barras de desplazamiento: no se dejan en el default del navegador */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--lana-honda); }
::-webkit-scrollbar-thumb { background: var(--marino); }
::-webkit-scrollbar-thumb:hover { background: var(--marino-medio); }

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

/* ---- Tipografía ----------------------------------------------------------
   EL PESO DE LOS TITULARES NO SE ESCRIBE AQUÍ: sale de `--peso-titular`, en
   tokens.css, donde está la historia de por qué ha bajado dos veces —900 en el
   sistema original, 700 el 2026-09-07 y 600 el 2026-09-08, las dos por el mismo
   motivo: Montserrat es geométrica y ancha y mancha más que una grotesca de la
   misma talla—.

   Lo que NO baja son los rótulos: `.codigo`, los botones, los enlaces de acción
   y el menú se quedan en 700. Un rótulo de 0,6rem en versalitas necesita el peso
   para leerse; un titular de 4rem no. Si alguien iguala las dos cosas, o los
   titulares vuelven a manchar o los rótulos se deshacen.                      */

h1, h2, h3 {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  line-height: var(--interlinea-titular);
  letter-spacing: var(--tracking-titular);
  text-wrap: balance;
  margin: 0;
}
/* LOS DOS TAMAÑOS VIVEN EN `tokens.css` y la razón está escrita allí: hasta
   el 2026-09-10 había cuatro y el nombre de una etapa pesaba más que el único
   H1 del sitio. Aquí sólo se consumen. */
h1 { font-size: var(--display-1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--display-2); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--t-lg); font-weight: var(--peso-titular); }

p { margin: 0; max-width: var(--medida-lectura); text-wrap: pretty; }

a { color: var(--ceruleo-hondo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
/* LEY DEL ORO — el oro NO es el color de los enlaces.
   Está reservado para evidencia verificable y solo lo lleva `.codigo`.
   Cuando todo es dorado, nada lo es: la prueba deja de destacar.
   Los enlaces sobre marino son blancos y aclaran al cerúleo en hover. */
.sobre-marino a:not(.boton) { color: #FFF; }
.sobre-marino a:not(.boton):hover { color: var(--ceruleo-claro); }

/* Códigos documentales: número de resolución, convenio. Cifras tabulares
   porque son datos, no texto corrido. */
.codigo {
  font-family: var(--fuente-codigo);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-codigo);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---- La retícula: contenedor sobre urdimbre ------------------------------ */

.lienzo {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* ---- EL TEJIDO -----------------------------------------------------------
   La urdimbre son hilos verticales continuos. La trama es un hilo horizontal
   que los cruza pasando POR ENCIMA y POR DEBAJO en alternancia — que es lo
   que separa un tejido de un simple rayado. El paso por debajo se dibuja
   tapando segmentos del hilo horizontal con el color del fondo.
   Todo en CSS puro: cero imágenes, cero JavaScript.                          */

/* LAS LÍNEAS DE URDIMBRE SE RETIRAN DE TODO EL SITIO (decisión del cliente,
   2026-09-04). Sobre fotografía hacían ruido y competían con la imagen.
   El concepto del tejido sobrevive donde importa: en los dos hilos de color,
   en los remates de trama que separan secciones, y en la retícula de 12
   columnas que sigue gobernando la composición aunque ya no se dibuje.
   Se conserva el marcado para poder reactivarlas en un solo sitio. */
.urdimbre {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / 12 - var(--hilo-fino)),
    var(--color-urdimbre, rgba(255, 255, 255, 0.09)) calc(100% / 12 - var(--hilo-fino)),
    var(--color-urdimbre, rgba(255, 255, 255, 0.09)) calc(100% / 12)
  );
}

.trama {
  position: relative;
  height: var(--hilo-trama);
  background: var(--color-trama, var(--ceruleo));
  transform-origin: left center;
  border: 0;
  margin: 0;
}
/* Los pasos por debajo: la urdimbre vuelve a aparecer encima del hilo */
.trama::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / 12 - var(--hilo-fino)),
    var(--color-paso, var(--lana)) calc(100% / 12 - var(--hilo-fino)),
    var(--color-paso, var(--lana)) calc(100% / 12)
  );
  /* solo la mitad de los cruces pasan por debajo */
  clip-path: polygon(
    0 0, 8.333% 0, 8.333% 100%, 0 100%,
    16.66% 0, 25% 0, 25% 100%, 16.66% 100%,
    33.33% 0, 41.66% 0, 41.66% 100%, 33.33% 100%,
    50% 0, 58.33% 0, 58.33% 100%, 50% 100%,
    66.66% 0, 75% 0, 75% 100%, 66.66% 100%,
    83.33% 0, 91.66% 0, 91.66% 100%, 83.33% 100%
  );
}

/* El único momento con autoría: el hilo se teje al entrar en vista.
   Por defecto está tejido; la animación solo lo mejora donde hay soporte. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .trama {
      animation: tejer var(--dur-larga) var(--sale) both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}
@keyframes tejer {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.orillo-hilo { height: var(--hilo-orillo); background: var(--oro); }

/* ---- Titular que se teje ------------------------------------------------
   Las palabras suben en secuencia, como la lanzadera pasando la trama. Es el
   único momento de entrada del sitio: no hay intro que tapar ni saltar, porque
   una cortina previa retrasaría el LCP por debajo del objetivo de 2,5 s.

   El estado natural es VISIBLE. La animación solo existe donde hay soporte y
   el usuario no pidió menos movimiento, así que sin CSS moderno, sin JS o con
   `prefers-reduced-motion` el titular simplemente está ahí. Solo se animan
   `transform` y `opacity`: cero desplazamiento de layout, CLS intacto.        */

.revela .palabra {
  display: inline-block;
  /* La palabra ocupa su sitio desde el primer pintado */
  will-change: auto;
}

/* Animación de entrada, basada en tiempo — NO en scroll. La trama de las
   secciones sí usa `animation-timeline: view()`; este titular no, porque ya
   está en pantalla al cargar y una línea de tiempo de scroll lo dejaría
   congelado en su primer fotograma. */
@media (prefers-reduced-motion: no-preference) {
  .revela .palabra {
    animation: tejer-palabra 620ms var(--sale) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
}

@keyframes tejer-palabra {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}

/* ---- Botones ------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  /* Con la píldora el texto necesita más aire a los lados: en una caja recta el
     ojo mide el hueco contra el filo, y en una curva contra la tangente, que
     está más cerca. Mismo padding se vería apretado. */
  padding: var(--e-4) var(--e-7);
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--hilo-trama) solid transparent;
  /* La esquina se decide en un solo sitio: `--radio-cta`, en tokens.css, donde
     está escrito por qué. */
  border-radius: var(--radio-cta);
  transition: background var(--dur-corta) var(--sale),
              color var(--dur-corta) var(--sale),
              border-color var(--dur-corta) var(--sale);
}
.boton svg { width: 1em; height: 1em; flex: none; }

.boton--primario { background: var(--oro); color: var(--marino); border-color: var(--oro); }
.boton--primario:hover { background: #FFC94D; border-color: #FFC94D; }

/* EL BOTÓN DE LÍNEA SE ADAPTA AL CAMPO, y no es un refinamiento: escrito con
   `color: #FFF` fijo era la CUARTA vez que una pieza pensada para el campo
   marino acababa en uno claro y se volvía ilegible —blanco sobre cielo hondo da
   1,5:1—. Las tres anteriores fueron `.enlace-accion`, `.campo__caja` y el
   antetítulo del pórtico de Vida Cervantista, y las tres se arreglaron una a
   una en el sitio donde aparecieron. Ésta se arregla en la raíz.

   La regla del sistema, escrita en ESTADO.md: NINGUNA pieza lleva un color
   suelto; el contenedor declara su campo —`.es-clara` o `.es-marino`— y la
   pieza hereda. Si mañana este botón vuelve a aparecer en un campo nuevo, ya
   no hay nada que recordar. */
.boton--linea { background: transparent; color: #FFF; border-color: var(--marino-tinte); }
.boton--linea:hover { border-color: #FFF; background: rgba(255, 255, 255, 0.08); }
.es-clara .boton--linea { color: var(--marino); border-color: var(--marino-tinte); }
.es-clara .boton--linea:hover { border-color: var(--marino); background: rgba(42, 46, 104, 0.06); }

.boton--claro { background: var(--marino); color: #FFF; border-color: var(--marino); }
.boton--claro:hover { background: var(--marino-medio); border-color: var(--marino-medio); }

.boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

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

/* ---- Enlace de acción: la secundaria deja de competir --------------------
   "Conocer Admisiones" es la conversión primaria de toda la estrategia.
   Cuando la secundaria lleva la misma caja y el mismo peso, compiten y el
   visitante no sabe qué hacer. Ahora es un enlace con flecha. */

.enlace-accion {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding-block: var(--e-4);
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFF;
  text-decoration: none;
  border-bottom: var(--hilo-trama) solid rgba(255,255,255,0.35);
  transition: border-color var(--dur-corta) var(--sale), gap var(--dur-corta) var(--sale);
}
.enlace-accion:hover { border-bottom-color: #FFF; gap: var(--e-4); }
.enlace-accion svg { width: 1em; height: 1em; flex: none; }

/* Aviso de actualización visible en la web pública (ver index.html). */
/* Franja superior: oculta; queda por si se usa para otros avisos. */
.aviso-actualizacion { display: none !important; }


/* Barra de revisión del prototipo: no debe verse en la web pública. */
.revision,
.lanzadera {
  display: none !important;
}