/* =============================================================================
   FUNRAICES E.C.E. — estilos de la portada
   «La línea que no se rompe»
   -----------------------------------------------------------------------------
   Todo valor visual sale de tokens-v2.css. Si aquí aparece un color, un tamaño
   o un tiempo escrito a mano, es un error: se agrega el token y se avisa.
   ============================================================================= */

/* ------------------------------------------------------------------- 0 · base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La cabecera es fija: el ancla no puede quedar debajo de ella. */
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra-lectura);
  font-size: var(--t-cuerpo);
  line-height: var(--alto-lectura);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;                 /* nada de desborde horizontal, nunca */
}

img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: var(--alto-titular); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* El foco se ve SIEMPRE. Doble anillo para que funcione en claro y en oscuro. */
:focus-visible {
  outline: var(--trazo-grueso) solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radio-control);
}

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

.saltar {
  position: fixed; top: var(--e3); left: var(--e3); z-index: var(--z-saltar);
  transform: translateY(-160%);
  background: var(--sombra-monte); color: var(--cal-viva);
  font-family: var(--letra-ui); font-size: var(--t-menor);
  padding: var(--e3) var(--e5);
  border-radius: var(--radio-control);
  text-decoration: none;
  transition: transform var(--rapido) var(--curva);
}
.saltar:focus { transform: translateY(0); }

/* --------------------------------------------------------- 1 · tipos de texto */

.rotulo {
  font-family: var(--letra-ui); font-weight: 500;
  font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rotulo);
  margin: 0 0 var(--e4);
  display: flex; align-items: center; gap: var(--e3);
}
/* El rótulo lleva su propio trozo de la línea. */
.rotulo::before {
  content: ""; inline-size: var(--e6); block-size: var(--trazo-linea);
  background: var(--linea); flex: none;
}

.dato { font-family: var(--letra-dato); font-size: var(--t-dato); font-weight: 400; }

.enlace {
  font-family: var(--letra-ui); font-weight: 500;
  color: var(--acento-activo);
  text-decoration: none;
  border-bottom: var(--trazo-linea) solid var(--linea);
  padding-bottom: 1px;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.enlace:hover { background: var(--velo); color: var(--tinta); }

/* La flecha se dibuja, no se escribe: así no depende de un glifo que el
   subconjunto de la tipografía podría no traer. */
.flecha {
  display: inline-block; inline-size: .62em; block-size: .62em;
  margin-inline-start: .45em;
  border-top: var(--trazo-linea) solid currentColor;
  border-right: var(--trazo-linea) solid currentColor;
  transform: rotate(45deg) translate(-.06em, .06em);
  transition: transform var(--rapido) var(--curva);
}
.enlace:hover .flecha { transform: rotate(45deg) translate(.06em, -.06em); }

.boton {
  display: inline-flex; align-items: center; gap: var(--e3);
  font-family: var(--letra-ui); font-weight: 700; font-size: var(--t-menor);
  letter-spacing: .02em;
  padding: var(--e4) var(--e6);
  border: var(--trazo-linea) solid var(--linea);
  border-radius: var(--radio-control);
  background: transparent; color: var(--tinta);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--medio) var(--curva), color var(--medio) var(--curva);
}
.boton:hover { background: var(--linea); color: var(--sombra-monte); }
.boton--lleno { background: var(--acento-activo); border-color: var(--acento-activo); color: var(--cal-viva); }
.boton--lleno:hover { background: var(--linea); border-color: var(--linea); color: var(--sombra-monte); }

/* ------------------------------------------------- 2 · línea de avance y menú */

.avance {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-cabecera);
  block-size: var(--trazo-linea); background: transparent; pointer-events: none;
}
.avance__hilo {
  block-size: 100%; background: var(--linea);
  transform: scaleX(0); transform-origin: 0 50%;
}

.cabecera {
  position: sticky; inset-block-start: 0; z-index: var(--z-cabecera);
  background: color-mix(in srgb, var(--sombra-monte) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: var(--trazo-fino) solid var(--filete-oscuro);
  color: var(--cal-viva);
}
@supports not (backdrop-filter: blur(2px)) { .cabecera { background: var(--sombra-monte); } }

.cabecera__interior {
  max-inline-size: var(--ancho-tronco); margin-inline: auto;
  padding: var(--e3) var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e5);
  flex-wrap: wrap;
}

.marca { text-decoration: none; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.marca__sigla {
  font-family: var(--letra-lectura); font-weight: 800; font-size: 1.28rem;
  letter-spacing: -.012em; color: var(--cal-viva);
}
.marca__ece {
  font-family: var(--letra-dato); font-size: .68rem; color: var(--luz-filo);
  letter-spacing: .06em;
}
.marca__completo {
  font-family: var(--letra-ui); font-weight: 500; font-size: .78rem;
  color: var(--ceniza); inline-size: 100%; line-height: 1.3;
}

.menu > summary {
  display: none; cursor: pointer; list-style: none;
  font-family: var(--letra-ui); font-weight: 700; font-size: var(--t-menor);
  color: var(--cal-viva);
  padding: var(--e2) var(--e4);
  border: var(--trazo-fino) solid var(--filete-control);
  border-radius: var(--radio-control);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__cuerpo { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }

.nav { display: flex; gap: var(--e5); flex-wrap: wrap; }
.nav a {
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-menor);
  color: var(--hueso); text-decoration: none;
  padding-block-end: 2px; border-block-end: var(--trazo-linea) solid transparent;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.nav a:hover { color: var(--cal-viva); border-block-end-color: var(--linea); }

.util { display: flex; align-items: center; gap: var(--e4); }
.util a {
  font-family: var(--letra-dato); font-size: var(--t-dato);
  color: var(--ceniza); text-decoration: none;
}
.util a[aria-current] { color: var(--luz-filo); }
.util > span { display: flex; gap: .3rem; align-items: center; color: var(--filete-control); }

.interruptor {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-rotulo);
  letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--hueso);
  border: var(--trazo-fino) solid var(--filete-control);
  border-radius: var(--radio-control);
  padding: var(--e2) var(--e3); cursor: pointer;
}
.interruptor__punto {
  inline-size: .5rem; block-size: .5rem; border-radius: 50%;
  border: var(--trazo-linea) solid var(--filete-control);
}
.interruptor[aria-pressed="true"] .interruptor__punto { background: var(--luz-filo); border-color: var(--luz-filo); }
.interruptor:hover { color: var(--cal-viva); border-color: var(--linea); }

@media (max-width: 61.99rem) {
  .menu > summary { display: inline-block; }
  .menu__cuerpo {
    flex-direction: column; align-items: flex-start;
    gap: var(--e4); padding-block: var(--e5);
    inline-size: 100%;
  }
  .nav { flex-direction: column; gap: var(--e4); }
  .nav a { font-size: 1.05rem; }
}

/* ------------------------------------------------------- 3 · escena y respaldo
   El lienzo va fijo detrás de todo. Solo el hero y territorios lo dejan ver;
   las demás secciones llevan fondo opaco. El respaldo en SVG está en el HTML
   desde el primer pintado y el WebGL lo sustituye después, si puede.
--------------------------------------------------------------------------------*/

.escena {
  position: fixed; inset: 0; z-index: 0;
  background: var(--sombra-monte);
  pointer-events: none; overflow: hidden;
}
.escena__lienzo, .escena__respaldo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.escena__lienzo { opacity: 0; transition: opacity var(--lento) var(--curva); }
.escena[data-activa="si"] .escena__lienzo { opacity: 1; }
.escena[data-activa="si"] .escena__respaldo { opacity: 0; }

.escena__respaldo {
  display: grid; place-items: center;
  transition: opacity var(--lento) var(--curva);
}
.escena__respaldo svg { inline-size: 118%; block-size: auto; opacity: .95; }

/* El relieve en SVG: relleno del color del cielo para que cada fila tape a la
   de atrás, y trazo de oro. Es el mismo dibujo que hace el sombreador. */
.relieve__filas path {
  fill: var(--sombra-monte);
  stroke: var(--oro-injerto);
  stroke-width: 1.15;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Una luz que cruza el relieve estático, con CSS. El respaldo también respira. */
.escena__respaldo::after {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(46% 60% at 20% 42%,
              color-mix(in srgb, var(--luz-filo) 26%, transparent), transparent 68%);
  mix-blend-mode: screen;
  animation: cruzar 34s var(--curva) infinite alternate;
}
@keyframes cruzar { from { transform: translateX(-16%); } to { transform: translateX(30%); } }

.escena__velo {
  position: absolute; inset: 0;
  /* En el flanco del texto el velo nunca baja del 72 %: es lo que garantiza
     9,17:1 aunque el sol se pare justo detrás del titular. */
  /* La parada del 72 % llega hasta el 52 % del ancho porque hasta ahí llega la
     columna de texto (34rem dentro de un tronco de 78rem). Estaba en el 34 % y
     el final del titular caía sobre un velo de ~.43: medido sobre píxeles
     reales, el contraste bajaba a 5,12:1. Con esta parada no baja de 8:1. */
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--cielo-cenit) 88%, transparent) 0%,
      color-mix(in srgb, var(--cielo-cenit) 74%, transparent) 52%,
      color-mix(in srgb, var(--cielo-cenit) 20%, transparent) 76%,
      color-mix(in srgb, var(--cielo-cenit) 44%, transparent) 100%);
}
@media (max-width: 52rem) {
  /* En pantalla estrecha el texto ocupa casi todo el alto, así que el velo no
     puede adelgazarse abajo: ahí es donde caen los contadores. Medido sobre
     píxeles reales, con el degradado anterior el contraste bajaba a 2,62:1. */
  .escena__velo {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--cielo-cenit) 84%, transparent) 0%,
        color-mix(in srgb, var(--cielo-cenit) 76%, transparent) 55%,
        color-mix(in srgb, var(--cielo-cenit) 72%, transparent) 100%);
  }
}
/* Respaldo por si color-mix no existe: se cae a un velo plano suficiente. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .escena__velo { background: rgba(10, 19, 15, .74); }
}

[data-modo="ligero"] .escena__respaldo::after { animation: none; }
[data-movimiento="no"] .escena__respaldo::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .escena__respaldo::after { animation: none; } }

/* ------------------------------------------------------ 4 · control de pausa
   Fuera de todo menú plegable, visible siempre, alcanzable con el pulgar.
--------------------------------------------------------------------------------*/

.control {
  position: fixed; z-index: var(--z-control);
  inset-block-end: var(--e4); inset-inline-end: var(--e4);
}
.control__boton {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--letra-ui); font-weight: 700; font-size: var(--t-rotulo);
  letter-spacing: .05em; text-transform: uppercase;
  background: color-mix(in srgb, var(--sombra-monte) 92%, transparent);
  color: var(--cal-viva);
  border: var(--trazo-fino) solid var(--filete-control);
  border-radius: var(--radio-control);
  padding: var(--e3) var(--e4);
  cursor: pointer;
  box-shadow: var(--sombra-carta);
}
.control__boton:hover { border-color: var(--linea); }
.control__icono { inline-size: .7rem; block-size: .7rem; flex: none; position: relative; }
/* Dos barras = pausar. Un triángulo = activar. */
.control__icono::before, .control__icono::after {
  content: ""; position: absolute; inset-block: 0;
  inline-size: .22rem; background: var(--luz-filo);
}
.control__icono::before { inset-inline-start: 0; }
.control__icono::after  { inset-inline-end: 0; }
.control__boton[aria-pressed="false"] .control__icono::before {
  inset-inline-start: .06rem; inline-size: 0; block-size: 0;
  background: transparent;
  border-block: .35rem solid transparent;
  border-inline-start: .55rem solid var(--luz-filo);
}
.control__boton[aria-pressed="false"] .control__icono::after { display: none; }

/* ---------------------------------------------------------- 5 · esqueleto general */

.tronco { position: relative; z-index: 1; }

.seccion { position: relative; padding-block: var(--aire-seccion); }
.seccion__interior {
  max-inline-size: var(--ancho-tronco); margin-inline: auto;
  padding-inline: var(--margen);
}
/* Las secciones opacas tapan el lienzo. Las dos ventanas al terreno no. */
.seccion--opaca { background: var(--fondo); }
.seccion--velada { background: color-mix(in srgb, var(--cielo-cenit) 62%, transparent); }

.seccion__titulo { font-size: var(--t-seccion); font-weight: 700; letter-spacing: -.016em; max-inline-size: 22ch; }
.seccion__texto { color: var(--tinta-media); max-inline-size: var(--ancho-lectura); margin-block-start: var(--e5); }

/* El filete entre secciones es la misma línea. */
.seccion + .seccion.seccion--opaca { border-block-start: var(--trazo-fino) solid var(--filete); }

/* El contenido nace VISIBLE. Solo se oculta para revelarlo si el <head> pudo
   marcar la raíz con .js — es decir, solo si hay quien lo vuelva a mostrar.
   Sin JavaScript, esta regla no llega a existir y la página se lee entera. */
.js [data-revelar] {
  opacity: 0; transform: translateY(1.1rem);
  transition: opacity var(--lento) var(--curva-entrada), transform var(--lento) var(--curva-entrada);
}
.js [data-revelar][data-visto="si"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-revelar] { opacity: 1; transform: none; } }
.js[data-modo="ligero"] [data-revelar] { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 6 · hero */

.hero { min-block-size: 190vh; padding-block: 0; background: transparent; }
.hero__fijo {
  position: sticky; inset-block-start: 0;
  min-block-size: 100vh; min-block-size: 100svh;
  display: grid; align-content: center;
  padding-block: var(--e10) var(--e9);
}
.hero__interior {
  max-inline-size: var(--ancho-tronco); margin-inline: auto;
  padding-inline: var(--margen);
  inline-size: 100%;
}
.hero__columna { max-inline-size: 34rem; }

.hero__titulo {
  font-size: var(--t-hero); font-weight: 800;
  line-height: var(--alto-apretado); letter-spacing: -.021em;
  color: var(--cal-viva);
  margin-block: var(--e5) var(--e5);
  text-wrap: balance;
}
.hero__entradilla { color: var(--hueso); max-inline-size: 34rem; }

.hero__declaracion {
  margin-block-start: var(--e5);
  padding-inline-start: var(--e4);
  border-inline-start: var(--trazo-linea) solid var(--linea);
  color: var(--neblina); font-size: var(--t-menor);
  max-inline-size: 32rem;
}

.hero__pie {
  margin-block-start: var(--e7);
  display: flex; gap: var(--e6) var(--e8); flex-wrap: wrap; align-items: flex-end;
}

.cifra { display: grid; gap: 2px; }
.cifra__numero {
  font-family: var(--letra-lectura); font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1;
  color: var(--luz-filo); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cifra__que { font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-menor); color: var(--cal-viva); }
.cifra__desde { font-family: var(--letra-dato); font-size: var(--t-dato); color: var(--ceniza); }

/* La pista de scroll: la misma línea, cayendo. */
.hero__pista {
  position: absolute; inset-block-end: var(--e6); inset-inline-start: var(--margen);
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-rotulo);
  letter-spacing: .14em; text-transform: uppercase; color: var(--neblina);
}
.hero__pista::after {
  content: ""; inline-size: var(--trazo-linea); block-size: 3rem;
  background: linear-gradient(var(--linea), transparent);
  animation: caer 2.6s var(--curva) infinite;
  transform-origin: 50% 0;
}
@keyframes caer { 0%,100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
[data-movimiento="no"] .hero__pista::after,
[data-modo="ligero"] .hero__pista::after { animation: none; transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .hero__pista::after { animation: none; } }

/* --------------------------------------------------------------- 7 · silencio
   Una sola frase, mucho aire, y nada más. Sirve de respiro entre el hero y la
   densidad de lo que viene.
--------------------------------------------------------------------------------*/

.silencio { padding-block: clamp(6rem, 20vh, 13rem); }
.silencio p:not([class]) {
  font-size: var(--t-silencio); font-weight: 400; line-height: 1.24;
  letter-spacing: -.014em; max-inline-size: 24ch; text-wrap: balance;
}
.silencio em {
  font-style: normal; font-weight: 700;
  box-shadow: inset 0 -.38em 0 color-mix(in srgb, var(--oro-injerto) 26%, transparent);
}
.silencio__fuente {
  margin-block-start: var(--e6);
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-dato); color: var(--tinta-tenue);
}

/* --------------------------------------------------------------- 8 · dos columnas */

.duo {
  display: grid; gap: var(--e7) var(--e8);
  grid-template-columns: 5fr 7fr;                  /* asimétrica a propósito */
  align-items: start;
}
@media (max-width: 56rem) { .duo { grid-template-columns: 1fr; } }

.ficha { display: grid; gap: var(--e4); }
.ficha__linea {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
  align-items: baseline;
  padding-block-end: var(--e3);
  border-block-end: var(--trazo-fino) solid var(--filete);
}
.ficha__que {
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-rotulo);
  letter-spacing: .1em; text-transform: uppercase; color: var(--rotulo);
}
.ficha__valor { font-family: var(--letra-dato); font-size: var(--t-dato); color: var(--tinta); }
.ficha__valor--texto { font-family: var(--letra-lectura); font-size: var(--t-menor); }

/* ----------------------------------------------------------- 9 · territorios */

/* Alta a propósito: la transformación entre los tres relieves necesita recorrido
   de scroll. Con la altura del contenido, los tres territorios pasaban en menos
   de una pantalla y el cambio se sentía nervioso. */
.territorios {
  background: transparent;
  min-block-size: 215vh;
  padding-block: var(--aire-seccion) calc(var(--aire-seccion) * 1.4);
  display: grid; align-content: center;
}
.territorios__cabeza { max-inline-size: 46rem; margin-block-end: var(--e8); }

.tarjetas {
  display: grid; gap: var(--e5);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 62rem) { .tarjetas { grid-template-columns: 1fr; gap: var(--e6); } }

/* Perspectiva en el contenedor: la inclinación de las tarjetas es real, no un
   escalado disfrazado. La sombra sigue a la fuente de luz de la escena. */
.tarjetas { perspective: 1400px; }

.tarjeta {
  position: relative;
  background: color-mix(in srgb, var(--cielo-cenit) 82%, transparent);
  border: var(--trazo-fino) solid var(--filete-oscuro);
  border-block-start: var(--trazo-grueso) solid var(--linea);
  padding: var(--e5);
  /* Columna flexible, no rejilla: la ficha de cotas se empuja al fondo con
     margen automático y así las tres tarjetas cierran a la misma altura
     aunque el nombre de una ocupe una línea y el de otra, dos. */
  display: flex; flex-direction: column; gap: var(--e4);
  transform-style: preserve-3d;
  transition: transform var(--medio) var(--curva),
              box-shadow var(--medio) var(--curva),
              border-color var(--medio) var(--curva);
  will-change: transform;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .tarjeta { background: rgba(10, 19, 15, .84); }
}
.tarjeta[data-activa="si"] {
  border-color: var(--linea);
  box-shadow: -18px 22px 46px -26px rgba(0,0,0,.8);
}
.tarjeta:hover { box-shadow: -22px 26px 52px -24px rgba(0,0,0,.85); }

.tarjeta__huella {
  aspect-ratio: 420 / 240;
  background: color-mix(in srgb, var(--cielo-cenit) 70%, transparent);
  border: var(--trazo-fino) solid var(--filete-oscuro);
  overflow: hidden;
}
.tarjeta__huella svg { inline-size: 100%; block-size: 100%; }

/* Dos líneas reservadas siempre: «Cabildo Ovejas de Caldono» cabe en una y los
   otros dos nombres no, y sin esto la fila entera queda desalineada. */
.tarjeta__nombre {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.012em; color: var(--cal-viva);
  min-block-size: calc(2 * var(--alto-titular) * 1em);
}
@media (max-width: 62rem) { .tarjeta__nombre { min-block-size: 0; } }
.tarjeta__pueblo {
  font-family: var(--letra-ui); font-weight: 700; font-size: var(--t-menor);
  color: var(--luz-filo);
}
.tarjeta__lugar { font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-menor); color: var(--hueso); }
.tarjeta__cota {
  font-family: var(--letra-dato); font-size: var(--t-dato); color: var(--neblina);
  margin-block-start: auto;                 /* siempre al pie de la tarjeta */
  padding-block-start: var(--e3);
  border-block-start: var(--trazo-fino) solid var(--filete-oscuro);
  display: grid; gap: 2px;
}

/* Nota de fuente: son 36 palabras de prosa. En mono, la página empezaba a
   parecer salida de terminal, que es lo que el encargo prohíbe expresamente.
   La mono se queda solo donde hay dato de máquina. */
.nota-relieve {
  margin-block-start: var(--e7);
  max-inline-size: var(--ancho-lectura);
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-dato);
  color: var(--neblina); line-height: 1.55;
}

/* ------------------------------------------------------------- 10 · método
   Un eje vertical con nodos. No lleva numeración: no es una lista ordenada de
   pasos intercambiables, es una secuencia real que empieza en la autoridad.
--------------------------------------------------------------------------------*/

.metodo__lista { display: grid; gap: var(--e7); position: relative; margin-block-start: var(--e7); }
.metodo__lista::before {
  content: ""; position: absolute;
  inset-block: .55rem 0; inset-inline-start: calc(var(--e2) - 1px);
  inline-size: var(--trazo-linea); background: var(--filete);
}
.paso { position: relative; padding-inline-start: var(--e7); }
.paso::before {
  content: ""; position: absolute; inset-block-start: .42rem; inset-inline-start: 0;
  inline-size: var(--e4); block-size: var(--e4);
  background: var(--fondo);
  border: var(--trazo-linea) solid var(--linea);
}
.paso__titulo { font-size: var(--t-sub); font-weight: 700; margin-block-end: var(--e2); }
.paso p:not([class]) { color: var(--tinta-media); max-inline-size: var(--ancho-lectura); }

/* -------------------------------------------------------------- 11 · escala */

.escala { text-align: start; }
.escala__cifra {
  font-family: var(--letra-lectura); font-weight: 800;
  font-size: var(--t-escala); line-height: .86; letter-spacing: -.035em;
  color: var(--luz-filo);
  font-variant-numeric: tabular-nums;
  margin-block: var(--e5) var(--e5);
}
.escala__unidad { font-size: .34em; letter-spacing: -.01em; vertical-align: super; }
.escala p:not([class]) { max-inline-size: 40rem; color: var(--hueso); font-size: var(--t-sub); }
.escala__fuente {
  margin-block-start: var(--e6);
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-dato); color: var(--neblina);
  max-inline-size: var(--ancho-lectura);
}

/* ----------------------------------------------------------- 12 · capacidad */

.foco { display: grid; gap: var(--e5); margin-block: var(--e7); }
.foco__linea {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e5); align-items: baseline;
  padding-block-end: var(--e4);
  border-block-end: var(--trazo-linea) solid var(--linea);
}
.foco__letra {
  font-family: var(--letra-dato); font-size: var(--t-dato); color: var(--linea-texto);
}
.foco__que { font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.014em; }

.resto { display: grid; gap: var(--e3) var(--e6); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 46rem) { .resto { grid-template-columns: 1fr; } }
.resto li {
  padding-block: var(--e3);
  border-block-start: var(--trazo-fino) solid var(--filete);
  font-size: var(--t-menor); color: var(--tinta-media);
}

/* ------------------------------------------------------- 13 · institucional */

.certificado {
  margin-block-start: var(--e6);
  padding: var(--e5);
  background: var(--fondo-hondo);
  border-inline-start: var(--trazo-grueso) solid var(--linea);
  display: grid; gap: var(--e4);
}
.certificado__titulo { font-size: var(--t-sub); font-weight: 700; }
.certificado__meta { font-family: var(--letra-dato); font-size: var(--t-dato); color: var(--tinta-tenue); display: grid; gap: 2px; }
.certificado[data-caducado="si"] { border-inline-start-color: var(--filete-control); }
.certificado__aviso { font-size: var(--t-menor); color: var(--tinta-media); }

/* ------------------------------------------------------------ 14 · contacto
   Dos puertas separadas y distintas entre sí. La de la autoridad va primero y
   es la que ofrece hablar con una persona, no con un formulario.
--------------------------------------------------------------------------------*/

.puertas { display: grid; gap: var(--e6); grid-template-columns: repeat(2, 1fr); margin-block-start: var(--e7); }
@media (max-width: 56rem) { .puertas { grid-template-columns: 1fr; } }

.puerta { padding: var(--e6); display: grid; gap: var(--e4); align-content: start; }
.puerta--autoridad { background: var(--monte-alto); border-block-start: var(--trazo-grueso) solid var(--linea); }
.puerta--cooperante { background: transparent; border: var(--trazo-fino) solid var(--filete-oscuro); }
.puerta__titulo { font-size: var(--t-sub); font-weight: 700; color: var(--cal-viva); }
.puerta p:not([class]) { color: var(--hueso); font-size: var(--t-menor); }
.puerta__vias { display: grid; gap: var(--e3); margin-block-start: var(--e2); }
.puerta__via {
  font-family: var(--letra-dato); font-size: var(--t-dato);
  color: var(--cal-viva); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--e2);
  border-block-end: var(--trazo-fino) solid var(--filete-control);
  padding-block-end: 2px; inline-size: fit-content;
}
.puerta__via:hover { border-block-end-color: var(--linea); }

/* ------------------------------------------------------------------ 15 · pie */

.pie { background: var(--monte-hondo); color: var(--hueso); position: relative; z-index: 1; }
.pie__interior {
  max-inline-size: var(--ancho-tronco); margin-inline: auto;
  padding: var(--e8) var(--margen) var(--e7);
  display: grid; gap: var(--e6); grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 56rem) { .pie__interior { grid-template-columns: 1fr; } }
.pie h2 {
  font-family: var(--letra-ui); font-weight: 700; font-size: var(--t-rotulo);
  letter-spacing: .14em; text-transform: uppercase; color: var(--neblina);
  margin-block-end: var(--e4);
}
.pie ul { display: grid; gap: var(--e3); }
.pie a { color: var(--hueso); text-decoration: none; font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-menor); }
.pie a:hover { color: var(--cal-viva); text-decoration: underline; text-underline-offset: 3px; }
/* La mono solo donde hay dato de máquina. El nombre de la entidad, la dirección
   y la autoridad de vigilancia son texto, y en mono convertían el pie en salida
   de terminal — justo lo que el encargo prohíbe. Los <span class="dato"> del
   NIT y del registro sí la conservan. */
.pie__dato {
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-menor);
  color: var(--ceniza); display: grid; gap: var(--e2);
}
.pie__dato .dato { color: var(--hueso); }
.pie__legal {
  border-block-start: var(--trazo-fino) solid var(--filete-oscuro);
  padding: var(--e5) var(--margen);
  max-inline-size: var(--ancho-tronco); margin-inline: auto;
  font-family: var(--letra-ui); font-weight: 500; font-size: var(--t-menor);
  color: var(--ceniza);
  display: flex; gap: var(--e5); flex-wrap: wrap; justify-content: space-between;
}

/* ------------------------------------------------------ 16 · páginas interiores
   No llevan escena tridimensional: son páginas de documento, y descargarles 66 KB
   de relieve para adornar sería justo lo contrario de lo que pide el encargo.
   Llevan la misma línea, en una banda estática del mismo dato.
--------------------------------------------------------------------------------*/

.portada-interior {
  position: relative; overflow: hidden;
  background: var(--sombra-monte);
  padding-block: calc(var(--aire-seccion) * 1.15) var(--aire-seccion);
}
.banda {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 58%; opacity: .5; pointer-events: none;
}
.banda svg { inline-size: 100%; block-size: 100%; }
.banda .relieve__filas path {
  fill: var(--sombra-monte);
  stroke: var(--oro-injerto);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.portada-interior .seccion__interior { position: relative; z-index: 1; }

.pagina__titulo {
  font-size: clamp(2.1rem, 5vw, 4rem); font-weight: 800;
  line-height: var(--alto-apretado); letter-spacing: -.02em;
  color: var(--cal-viva); max-inline-size: 20ch;
  margin-block: var(--e4) var(--e5);
  text-wrap: balance;
}
.portada-interior .seccion__texto { color: var(--hueso); }

/* ------------------------------------------------------- 17 · impresión */

@media print {
  .escena, .control, .avance, .cabecera { display: none !important; }
  body { background: #fff; color: #000; }
  .seccion { padding-block: 1.5rem; break-inside: avoid; }
}