/* Home */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--blanco);
  color: var(--azul-principal);
  font-family: var(--tipografia);
  font-weight: var(--peso-regular);
}

/* Los saltos del menú van andando, no de golpe: entre lienzos de una pantalla
   cada uno, aparecer de repente en otro lado hace perder dónde se está. */
html {
  scroll-behavior: smooth;
  /* La barra de desplazamiento no se dibuja: el sitio es una sucesión de
     lienzos a pantalla completa y esa franja gris del costado le parte el
     borde a todos. Se oculta, no se desactiva —la rueda, el dedo, el teclado y
     los saltos del menú siguen funcionando igual. */
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* El home no tiene fundido de entrada propio: el intro corre por encima en la
   misma página y lo destapa al retirarse. Animarlo acá además sería fundir dos
   veces lo mismo. */

/* --- El menú ------------------------------------------------------------
   Va fijo arriba y por encima de todo lo del home. Sin fondo propio: cada
   lienzo pasa por detrás, y el color del texto se ajusta al que va quedando
   debajo —de eso se encarga el script, que marca la barra con la sección que
   está a la vista. */

.barra {
  position: fixed;
  inset-inline: 0;
  top: 0;
  /* Por encima del contenido y de la tira de técnicas, y por debajo del intro,
     que va en 20. */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.75rem, 2vh, 1.25rem) clamp(1rem, 4vw, 3rem);
  /* No tapa el clic de lo que pasa por debajo; los enlaces sí lo reciben. */
  pointer-events: none;
}

.barra a {
  pointer-events: auto;
  text-decoration: none;
  color: inherit;
}

.barra-marca {
  font-weight: var(--peso-bold);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.barra-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-nav a {
  display: inline-block;
  padding: 0.25rem 0;
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* La sección en la que se está se marca con la línea de abajo. Va siempre
     dibujada y se revela con la escala, así el rótulo no se mueve al pasar de
     una sección a otra. */
  border-bottom: 2px solid currentColor;
  transform-origin: left;
  transition: opacity 0.2s;
  opacity: 0.7;
}

.barra-nav a {
  border-bottom-color: transparent;
}

.barra-nav a:hover,
.barra-nav a:focus-visible {
  opacity: 1;
}

.barra-nav a[aria-current='true'] {
  opacity: 1;
  border-bottom-color: currentColor;
}

/* Sobre los lienzos oscuros la barra pasa a claro. La clase la pone el script
   según qué sección está debajo. */
.barra--sobre-oscuro {
  color: var(--blanco);
}

.barra--sobre-claro {
  color: var(--azul-principal);
}

/* En pantalla angosta la marca sola ya ocupa su renglón: el menú se acomoda
   debajo en vez de apretarse contra ella. */
@media (max-width: 640px) {
  .barra {
    flex-direction: column;
    align-items: start;
    gap: 0.4rem;
    padding-bottom: 0.6rem;
  }
}

/* Cada lienzo ocupa una pantalla. Con svh en vez de vh, la barra del navegador
   móvil no se come parte del contenido. */
.lienzo {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* La portada es la frase y a dónde ir. El lienzo entero queda libre para la
   animación; el texto se apoya abajo a la izquierda y los botones van pegados
   debajo, como un solo bloque. */
.portada {
  padding: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
  justify-content: start;
  /* El video se sale de la caja al recortarse: acá se lo corta. La portada
     termina donde termina, y la franja de abajo empieza con su color entero:
     el borde entre las dos es un corte limpio y a propósito. */
  overflow: hidden;
}

/* Un velo parejo sobre el video, en el azul de marca y apenas marcado: baja el
   contraste del fondo lo justo para que el título blanco se apoye en algo, sin
   apagar la imagen. Va del ancho y alto del lienzo, no de la costura: no está
   para tapar un borde sino para sostener la lectura. */
.portada::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--azul-principal) 20%, transparent);
  /* Por encima del video y por debajo del texto, que va en z-index 1. */
  z-index: 0;
  pointer-events: none;
}

/* Fondo: ocupa el lienzo entero y se recorta antes que deformarse. Queda por
   debajo de todo lo demás, que es lo que lo vuelve fondo y no contenido. */
.portada-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* No recibe clics: el video es decorado y no tiene por qué robar el foco ni
     tapar los botones. */
  pointer-events: none;
  /* Capa propia en la placa de video: sin esto el navegador vuelve a componer
     el cuadro entero cada vez que algo se mueve arriba —el intro, el scroll—
     y el video se ve a tirones. */
  transform: translateZ(0);
  will-change: transform;
}

.portada-texto {
  /* Por encima del video. Sin esto queda detrás y no se lee. */
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
  justify-items: start;
  /* Ancho del boceto: la caja ocupa el tercio izquierdo, no la pantalla
     entera. En rem y no en ch para que no dependa del ancho de la letra. */
  max-width: min(30rem, 100%);
  /* El bloque no va pegado al piso: en el boceto queda una franja libre
     debajo. Ese aire es parte del encuadre, no un descuido. */
  margin-bottom: 2svh;
}

/* La frase va en regular y solo se destaca la parte marcada con asteriscos
   desde el panel (ver .portada-titulo strong). */
.portada-titulo {
  margin: 0;
  font-weight: var(--peso-regular);
  /* El tamaño es lo que fija el ancho del bloque: con text-wrap: nowrap el
     renglón más largo no se quiebra, así que la caja mide lo que mida ese
     renglón. El bloque pasa a rondar los dos tercios del ancho: la frase es lo
     primero que se lee del sitio, y contra un lienzo entero cualquier cosa más
     chica se lee como un pie de foto. El tope en rem es para las pantallas muy
     anchas, donde seguir creciendo con el ancho la volvería un cartel. */
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* Los cortes de renglón los pone el panel: que el navegador no reacomode
     nada por su cuenta. */
  text-wrap: nowrap;
}

/* En pantalla angosta manda el ancho, no el corte elegido: forzarlo dejaría la
   segunda línea saliéndose por el costado. */
@media (max-width: 700px) {
  .portada-titulo {
    text-wrap: balance;
  }
  .portada-titulo br {
    display: none;
  }
}

/* La parte marcada entre asteriscos. Es lo único en negrita del título. */
.portada-titulo strong {
  font-weight: var(--peso-bold);
}

/* Blanco con sombra paralela, y solo cuando hay video: el título se apoya
   sobre imagen que no es pareja, y la sombra corrida es lo que lo sostiene en
   los tramos claros. Sin video la portada queda en el blanco de marca, y ahí
   el título tiene que seguir siendo azul o no se lee. */
.portada--con-video .portada-titulo {
  color: var(--blanco);
  text-shadow: 0.055em 0.055em 0.1em rgba(0, 0, 0, 0.6);
}

.portada--con-video .boton {
  border-color: var(--blanco);
  color: var(--blanco);
}

.portada--con-video .boton--solido {
  background: var(--azul-principal);
  border-color: var(--azul-principal);
}

/* Los dos del mismo ancho y en una fila, como en el boceto: son dos caminos a
   la par, no uno principal y una nota al pie. El ancho lo hereda del bloque de
   texto para que las tres piezas cierren contra el mismo borde. */
/* Flex y no grilla: con una grilla el mínimo de la columna es rígido y, en
   cuanto el bloque se angosta más que ese mínimo, la fila se sale por el
   costado en vez de encogerse. En flex el mismo valor es solo la base y los
   botones pueden achicarse; cuando ya no da, se apilan. Sin puntos de corte. */
.portada-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-self: stretch;
  /* En el boceto la fila es más angosta que el bloque de texto: no llega al
     borde derecho de la frase. Lleva un tope en rem además del porcentaje: el
     bloque ahora lo mide el título, que creció, y sin ese tope los dos rótulos
     terminaban flotando en el medio de botones enormes. */
  max-width: min(78%, 34rem);
}

.portada-botones .boton {
  flex: 1 1 11rem;
  min-width: 0;
}

.boton {
  display: block;
  text-align: center;
  /* Relleno lateral contenido: los dos rótulos comparten el ancho del bloque
     de texto y con más aire se parten en varias líneas. */
  padding: 0.85rem 1rem;
  border: 1px solid var(--azul-principal);
  /* Esquinas vivas: rectángulos y no píldoras. Lo que los rodea son cortes
     rectos —el lienzo, la franja de abajo, las cajas de la tira— y la curva los
     dejaba como pegados encima en vez de formar parte del encuadre. */
  border-radius: 0;
  color: var(--azul-principal);
  text-decoration: none;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.2;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.boton:hover,
.boton:focus-visible {
  background: var(--azul-secundario);
  border-color: var(--azul-secundario);
  color: var(--blanco);
}

/* El primero es la acción que importa: va lleno para que gane sin depender del
   orden de lectura. */
.boton--solido {
  background: var(--azul-principal);
  color: var(--blanco);
}

/* --- Lo común a los lienzos que no son la portada ----------------------- */

.lienzo:not(.portada) {
  flex-direction: column;
  gap: 2rem;
}

/* Sin línea entre lienzos. La había mientras la estructura estaba en borrador
   y servía para ver dónde terminaba cada uno; ahora que cada lienzo trae su
   foto o su color, esa línea clara es un corte que se ve —y entre dos fotos
   seguidas se lee como un error de armado—. El límite lo marca el cambio de
   superficie, y donde no alcanza está el difuminado. */

.rotulo {
  margin: 0;
  font-weight: var(--peso-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-acento);
}

/* --- Las técnicas -------------------------------------------------------
   Un solo lienzo. Abajo, una tira con las categorías; arriba, la que está
   elegida. Cada categoría abre con una cabecera a pantalla completa —una
   sola— y debajo van sus técnicas en filas: el texto de un lado y la imagen
   del otro, alternando el lado en cada una. */

/* Se nombran las dos clases para ganarle a .lienzo:not(.portada), que si no le
   mete su gap y su dirección de flex. */
.lienzo.tecnicas {
  /* Cuánto ocupa la tira. Va en variable porque lo necesitan dos: la tira para
     medirse y la cabecera para dejarle ese aire abajo. */
  --tira-alto: clamp(6rem, 16vh, 9.5rem);

  /* Deja de medir una pantalla: la categoría abierta se recorre hacia abajo,
     así que la sección es tan alta como su contenido. La tira queda pegada al
     pie mientras dura ese recorrido. */
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  padding: 0;
}

/* La categoría abierta ocupa el flujo y las otras están con hidden, que las
   saca del todo. */
.tecnicas-vista {
  position: relative;
}

/* El display:none que trae hidden por defecto alcanza —.categoria no declara
   display propio—, pero se deja escrito: es lo único que impide que se vean
   las cinco categorías seguidas, y no puede depender de que a nadie se le
   ocurra darle un display a la clase. */
.categoria[hidden] {
  display: none;
}

/* --- La cabecera de la categoría ----------------------------------------
   La foto ocupa la pantalla entera y el nombre se apoya encima, abajo a la
   izquierda. Es lo primero que se ve al elegir una categoría, y lo que invita
   a seguir bajando. Una sola por categoría: las técnicas de adentro no traen
   la suya, van en filas más abajo. */
.categoria-cabecera {
  --aire: clamp(1.75rem, 5vw, 5rem);

  position: relative;
  display: flex;
  align-items: end;
  /* Exactamente un lienzo, igual que las técnicas: bajar una pantalla es
     pasar de la cabecera a la primera técnica. */
  height: 100vh;
  height: 100svh;
  padding: var(--aire);
  /* En la portada la tira está siempre a la vista, así que el nombre de la
     categoría tiene que quedar por encima de ella. */
  padding-bottom: calc(var(--aire) + var(--tira-alto));
  overflow: hidden;
  /* Sin foto la cabecera es un bloque del color de marca. Nunca queda en
     blanco: el nombre de la categoría tiene que apoyarse en algo. */
  background: var(--azul-principal);
  color: var(--blanco);
}

/* La foto o el video de fondo: van recortados antes que deformados, y por
   debajo del nombre. */
.categoria-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.categoria-titulo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.5rem;
  max-width: min(46rem, 100%);
}

/* Sobre foto, sombra paralela: la imagen no es pareja y sin ella el titular se
   pierde en los tramos claros. Sin foto queda sobre el azul liso, que ya
   sostiene solo. */
.categoria-titulo--sobre-foto {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.categoria-nombre {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.8rem, 4vw, 3.6rem);
  line-height: 1.05;
  text-wrap: balance;
}

/* Las siglas de lo que viene abajo. Es el índice de la categoría: dice qué se
   va a encontrar quien siga bajando. */
.categoria-siglas {
  margin: 0;
  font-weight: var(--peso-regular);
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* --- Cada técnica, una fila ---------------------------------------------
   Una técnica por lienzo: la fila mide una pantalla y se parte en dos, según
   el boceto. La imagen se queda con el lado ancho y lo cubre entero —todo el
   alto del lienzo, de arriba abajo, y hasta el borde de la ventana de su
   lado—; el texto ocupa la franja que queda al costado, también de alto
   completo. Los lados se alternan: la primera con el texto a la izquierda, la
   segunda al revés, la tercera como la primera. */

/* Se cuenta con nth-of-type y no con nth-child porque la cabecera es el primer
   hijo de la categoría: contando hijos, la primera técnica sería la segunda y
   toda la alternancia quedaría corrida. De tipo article solo están las filas. */
.tecnica {
  --aire: clamp(1.5rem, 4vw, 4.5rem);
  /* Cuánto se queda el texto. No es solo cuestión de lectura —de eso se ocupa
     el max-width del párrafo— sino de cuánto le deja a la imagen, que se queda
     con todo lo que sobre: esta medida es la que decide el reparto. El 30 % es
     el del boceto. Los topes en rem son para las puntas: en una pantalla
     angosta la franja no puede bajar de lo que necesita un párrafo, y en una
     muy ancha no tiene sentido que siga creciendo. */
  --texto-ancho: clamp(20rem, 30%, 30rem);

  --fila-fondo: var(--blanco);
  --fila-tinta: var(--azul-principal);

  display: grid;
  /* Impares: el texto a la izquierda, en la columna angosta, y la imagen se
     queda con todo lo demás. */
  grid-template-columns: minmax(0, var(--texto-ancho)) minmax(0, 1fr);
  /* Estirados y no centrados: es lo que le da a la imagen el alto del lienzo.
     El texto se centra por su cuenta, con align-content. */
  align-items: stretch;
  /* Sin aire ni separación en la fila: el aire lo lleva la columna de texto,
     que es la única que lo necesita. Puesto acá, la imagen quedaría despegada
     de los bordes y no llegaría al alto del lienzo. */
  gap: 0;
  padding: 0;
  /* Exactamente un lienzo, ni más ni menos. Con min-height una técnica de texto
     largo se pasaba —medimos 813 contra 768— y el recorrido dejaba de tener
     paradas parejas: cada tanto había que scrollear de más para llegar a la
     siguiente. Con alto fijo, bajar una pantalla es siempre bajar una técnica.
     Lo que sobre se recorta; para eso está el botón de más información. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--blanco);
  color: var(--azul-principal);
}

/* Pares: se da vuelta. La imagen pasa a la izquierda con order, y la columna
   angosta pasa a ser la segunda para que la reciba el texto —el ancho lo lleva
   la columna, no el elemento, así que mover uno sin mover el otro dejaría el
   texto estirado y la foto apretada. */
.tecnica:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--texto-ancho));
}

.tecnica:nth-of-type(even) .tecnica-medio {
  order: -1;
}

/* La técnica a la que todavía no se le cargó imagen no deja media pantalla
   vacía: el texto ocupa el ancho y la fila deja de medir una pantalla, que
   sin foto sería un vacío enorme alrededor de un párrafo. Sigue contando para
   la alternancia, así que cargarle la imagen después la pone del lado que le
   tocaba. */
.tecnica:not(:has(.tecnica-medio)),
.tecnica:nth-of-type(even):not(:has(.tecnica-medio)) {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

/* Los cuatro colores del manual en ciclo: blanco, azul, gris, azul claro.
   Arranca en blanco y de ahí van turnándose claro y color, así dos filas
   seguidas nunca comparten tono y ninguna repite antes de la cuarta. El ciclo
   cuenta desde el principio de cada categoría, así todas abren igual.

   Cada regla declara fondo y color de texto juntos: el resto de la fila hereda
   de ahí —la descripción, la sigla y las fichas de ventajas van con
   `inherit`— así que agregar o mover un color no obliga a tocar nada más. */
.tecnica:nth-of-type(4n + 2) {
  --fila-fondo: var(--azul-principal);
  --fila-tinta: var(--blanco);
  background: var(--azul-principal);
  color: var(--blanco);
}

.tecnica:nth-of-type(4n + 3) {
  --fila-fondo: var(--gris-claro);
  --fila-tinta: var(--azul-principal);
  background: var(--gris-claro);
  color: var(--azul-principal);
}

.tecnica:nth-of-type(4n + 4) {
  --fila-fondo: var(--azul-secundario);
  --fila-tinta: var(--blanco);
  background: var(--azul-secundario);
  color: var(--blanco);
}

/* El azul claro es el fondo más difícil de la paleta: contra el blanco deja
   poco margen, así que ahí el texto va a pleno. Es todo el contraste que se
   puede sacar sin cambiar el color. */
.tecnica:nth-of-type(4n + 4) .tecnica-descripcion {
  opacity: 1;
}

/* El aire lo lleva el texto y no la fila: es el único que lo necesita, y en la
   fila dejaría a la imagen despegada de los bordes. */
.tecnica-texto {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  align-content: center;
  padding: var(--aire);
  /* Y la franja de la tira. Se había sacado cuando la tira empezó a retirarse
     —guardarle cien píxeles en cada pantalla para algo que casi nunca está
     parecía regalar espacio—, pero sale en la portada, en la última técnica y
     cada vez que alguien acerca el puntero, y en todas esas tapaba el final
     del texto. El aire vale menos que un renglón que no se lee. */
  padding-bottom: calc(var(--aire) + var(--tira-alto));
}

/* El título en Helvetica bold; todo lo demás de la fila, en regular. La
   familia ya la pone el body —la del manual, con Arial de respaldo—, así que
   acá solo se decide el peso. */
.tecnica-nombre {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  line-height: 1.12;
  max-width: 16em;
  text-wrap: balance;
}

/* Los textos secundarios heredan el color de la fila en vez de traer el gris
   de acento: con cuatro fondos distintos, un gris fijo se leía bien sobre uno
   y mal sobre los otros tres. La transparencia es lo que los deja en segundo
   plano sin perder contraste contra el fondo que les toque. */
/* El rótulo chico de arriba del título: dice de qué se está hablando antes de
   nombrarlo. Va en regular y sin destacarse —lo que se lee primero tiene que
   seguir siendo el nombre de la técnica—. */
.tecnica-sigla {
  margin: 0;
  font-weight: var(--peso-regular);
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.08em;
  color: inherit;
  opacity: 0.75;
}

.tecnica-descripcion {
  margin: 0.4rem 0 0;
  max-width: 46ch;
  font-weight: var(--peso-regular);
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);
  line-height: 1.65;
  color: inherit;
  opacity: 0.88;
  /* Contra la izquierda y no justificado. La columna ronda los 40 caracteres:
     a ese ancho, estirar cada renglón hasta el margen derecho abre huecos del
     tamaño de una letra entre las palabras. Se parten palabras al final del
     renglón —el idioma se lo dice el lang del documento— para que el borde
     irregular no quede demasiado dentado. */
  hyphens: auto;
}

.tecnica-ventajas {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 46ch;
}

/* Las ventajas van como fichas y no como viñetas: son etiquetas sueltas, no
   una enumeración que se lea de corrido. */
.tecnica-ventajas li {
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-weight: var(--peso-regular);
  font-size: 0.82rem;
  line-height: 1.3;
  color: inherit;
}

/* El tamaño lo fija el lienzo y no la foto: la imagen llena el hueco que le
   deja la fila —el alto entero, y de ancho lo que sobre de la columna de
   texto— y se recorta para llenarlo. Así una foto apaisada y una parada ocupan
   lo mismo, y las filas no cambian de peso entre una técnica y otra.

   Sin proporción propia ni justify-self a propósito. Con los dos, el ancho lo
   terminaba fijando el tamaño natural del archivo: la foto que todavía no
   había cargado medía cero y la que sí, se pasaba del alto de la fila. */
/* Los dos botones de cada técnica, debajo del texto. Comparten la pinta de los
   de la portada —rectángulos, uno macizo y el otro al borde— pero acá el color
   lo pone la fila: sobre los fondos oscuros el azul de marca no se vería. */
/* Uno arriba del otro y del ancho de la columna. Al lado quedaban dos rótulos
   apretados en la mitad de una columna que ya es angosta; apilados, cada uno se
   lee de una pasada y la pila arma un bloque que se ve desde lejos. */
.tecnica-botones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  /* Poco aire arriba: con la franja de la tira descontada, el bloque de texto
     de la técnica más larga llegaba a rozarla. Lo que sobra se lo lleva la
     separación, que es lo que menos se nota. */
  margin-top: 0.9rem;
  /* El texto de la técnica es una grilla con justify-items: start, así que sus
     hijos miden lo que mide su contenido. Sin esto la pila se encogería hasta
     el ancho del rótulo más largo en vez de ocupar la columna. */
  justify-self: stretch;
}

.tecnica-botones .boton {
  border-color: currentColor;
  color: inherit;
}

/* El macizo queda invertido respecto de lo que lo rodea: se pinta con el color
   del texto de la fila y escribe con el fondo de la fila.

   Los dos salen de variables y ninguno de currentColor. Con background:
   currentColor el fondo se resuelve contra el color final del propio botón
   —que es justamente el que se está cambiando— y quedaba del mismo tono que su
   texto: invisible. Por eso cada paso del ciclo declara los dos colores. */
.tecnica-botones .boton--solido {
  background: var(--fila-tinta);
  color: var(--fila-fondo);
  border-color: transparent;
}

.tecnica-medio {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  line-height: 0;
}

/* La foto va despegada del flujo. Dentro de la fila, el alto del hueco depende
   del alto de la fila y el alto de la fila del de su contenido: si la foto
   cuenta como contenido, el cálculo se muerde la cola y el navegador lo corta
   usando el alto natural del archivo. Una foto 4:3 en una columna de 775
   pedía 581 y estiraba la fila a 813 —una técnica más alta que su lienzo, y
   más alta que sus hermanas—. Despegada no aporta alto: el hueco lo fija la
   fila y ella lo llena. */
.tecnica-medio > img,
.tecnica-medio > video,
.tecnica-medio > picture,
.tecnica-medio > picture > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* En pantalla angosta no entran las dos columnas: el texto arriba y la imagen
   debajo, en el orden en que están escritos. La fila deja de medir una pantalla
   —apiladas serían dos— y la imagen pasa a tener alto propio: sin proporción ni
   alto, en una sola columna se achicaría hasta desaparecer. */
@media (max-width: 900px) {
  .tecnica,
  .tecnica:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    /* Apiladas, texto e imagen ya no entran en una pantalla: serían dos. La
       fila vuelve a medir lo que mida su contenido, y nada se recorta. */
    height: auto;
    overflow: visible;
  }
  .tecnica:nth-of-type(even) .tecnica-medio {
    order: 0;
  }
  .tecnica-medio {
    /* Apilada, la imagen ya no tiene un alto de fila del que agarrarse: se lo
       da su proporción. */
    height: auto;
    aspect-ratio: 4 / 3;
  }
  /* En pantalla táctil la tira no se esconde —no hay puntero que acercar— así
     que la última técnica de la categoría le deja su lugar: debajo de ella no
     queda nada más que se pueda correr. Va en la fila y no en el texto porque
     lo último que se ve es la imagen. */
  .tecnica:last-of-type {
    padding-bottom: calc(var(--aire) + var(--tira-alto));
  }
}

/* Pantalla baja —un portátil chico o un teléfono acostado—: la cabecera mide
   una pantalla y ahí el titular tiene que achicarse para no comerse el aire. */
@media (max-height: 640px) {
  .categoria-cabecera,
  .tecnica {
    /* Se achica el aire, no el padding. El atajo pisaría el padding-bottom que
       le hace lugar a la tira y el nombre terminaría detrás de las cajas.
       Tocando la variable, ese cálculo se reajusta solo. */
    --aire: clamp(1rem, 3vw, 2.5rem);
  }
  .categoria-nombre {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
  }
  .tecnica-descripcion {
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .tecnica-ventajas li {
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
  }
}

/* --- Confianza y manifiesto ---------------------------------------------
   Dos cajas apiladas: arriba la tira que pasa, abajo el manifiesto sobre el
   fondo que se mueve. La de abajo se queda con el alto que sobra. */

/* El reparto es 40 / 60: arriba las certificaciones, abajo el parallax.
   Va en grilla y con alto definido a propósito. Con flex y porcentajes el
   reparto depende de que el contenedor tenga un alto cierto, y acá lo daba un
   min-height: las proporciones salían de lo que midiera el contenido y no de
   lo pedido. Con fr sobre un alto fijo, 40 y 60 son exactos. */
/* Se nombran las dos clases para ganarle a .lienzo:not(.portada), que tiene la
   misma cuenta de especificidad y si no le mete gap a la grilla. Y hay que
   estirar los hijos: .lienzo los centra, y centrados conservan el alto de su
   contenido en vez de tomar el de la fila. */
.lienzo.lienzo-manifiesto {
  display: grid;
  /* La columna explícita es necesaria: sin ella la implícita se dimensiona al
     contenido y el justify-content: center de .lienzo la deja angosta y
     centrada en vez de ocupar el ancho. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 40fr 60fr;
  height: 100vh;
  height: 100svh;
  align-items: stretch;
  justify-items: stretch;
  gap: 0;
  padding: 0;
}

.confianza {
  display: grid;
  place-items: center;
  /* Las dos filas —el rótulo y los logos— juntas y centradas como un bloque.
     Sin esto se estiran hasta llenar la franja y quedan a 113 px una de otra:
     el rótulo pegado al techo y los logos en el medio, sin relación entre
     ellos. La distancia la pone el margen del rótulo. */
  align-content: center;
  /* El alto lo fija la fila de la grilla. min-height:0 es lo que le permite
     achicarse hasta esa medida en vez de crecer con su contenido. */
  min-height: 0;
  padding-inline: clamp(1rem, 4vw, 3rem);
  /* Blanco de marca. Los logos son ajenos y ya van en gris: sobre el azul, ese
     gris quedaba apagado y la franja tiraba del ojo más que ellos. En blanco la
     banda desaparece y lo único que se ve son las certificaciones, que es lo
     que la banda viene a mostrar. */
  background: var(--blanco);
  position: relative;
  /* Sin borde: el corte con el parallax de abajo lo hace el cambio de claro a
     foto, que ya separa de sobra. */
  /* La tira se sale por los dos lados y acá se recorta: es lo que hace que se
     vea entrar y salir en vez de aparecer y desaparecer. */
  overflow: hidden;
}

/* La foto de fondo de la franja, cuando se carga una: va entera y sin velo. Si
   no hay foto, lo que queda es el blanco de la caja, también entero. En los dos
   casos el bloque es de una superficie maciza y el borde con lo de arriba y lo
   de abajo es un corte limpio. */
.confianza-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* El contenido va por encima de la foto. */
.confianza-lista,
.confianza-rotulo,
.confianza .rotulo {
  position: relative;
  z-index: 1;
}

/* Qué son esos logos.
   ------------------------------------------------------------------------
   Sin el rótulo, la tira es un renglón de marcas ajenas y hay que deducir de
   qué habla. Va chico y espaciado, en el mismo tono de rótulo que el resto del
   sitio: es una etiqueta, no un título, y lo que tiene que mirarse son los
   logos. */
.confianza-rotulo {
  margin: 0 0 clamp(1rem, 2.5vh, 2rem);
  font-weight: var(--peso-bold);
  font-size: clamp(.68rem, 1vw, .78rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gris-acento);
}

/* Quietos y repartidos: la lista ocupa el ancho y el espacio sobrante se
   reparte entre los logos y contra los bordes, así los tres quedan a distancias
   iguales sea cual sea el ancho de cada uno. */
.confianza-lista {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  /* Sin separación propia entre columnas: space-evenly ya reparte todo el
     sobrante en partes iguales, y un gap encima se suma solo a los huecos del
     medio —los de los extremos quedan más chicos y el reparto deja de ser
     parejo. El de las filas sí queda, para cuando no entran en una sola. */
  column-gap: 0;
  row-gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada logo tiene la misma caja: mismo ancho y mismo alto para los tres. Con
   máximos sobre la imagen, el tamaño lo terminaba fijando cada archivo —el
   escudo de CSWIP es casi cuadrado y el de API bien apaisado— y la fila
   quedaba con tres pesos distintos. Con la caja igual, lo que cambia es cuánto
   la llena cada uno, no cuánto lugar ocupa.

   El ancho va en la caja y no en la imagen: un porcentaje sobre la imagen se
   mediría contra su propia caja, que a su vez la define ella. Sobre el ítem se
   mide contra la lista, que sí tiene ancho cierto. Y va como medida y no como
   máximo, porque un máximo lo deja encogerse hasta lo que mida su contenido y
   volveríamos a tres anchos distintos.

   La caja es ancha pero no tanto: en 28 % un logo bien apaisado como el de API
   la llenaba a lo ancho y quedaba cinco veces más grande que el escudo de
   CSWIP, que la llena a lo alto. En 15 % ninguno de los dos puede estirarse
   tanto y los tres pesan parecido. Lo que sobra lo reparte space-evenly en los
   cuatro huecos. */
.confianza-lista li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  /* La banda pasó a ocupar el 40 % del lienzo: con el alto de la tira fina de
     antes los logos quedaban perdidos en el medio. */
  height: clamp(2.25rem, 9vh, 5.5rem);
}

@media (min-width: 700px) {
  .confianza-lista li {
    width: 15%;
  }
}

/* Llena la caja sin deformarse: contain la escala hasta que toca los bordes por
   el lado que le queda justo —el ancho en un logo apaisado, el alto en uno
   cuadrado— y el resto queda de aire. */
.confianza-lista img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* En escala de grises. Son logos ajenos y cada uno trae su propia paleta
     —azul, dorado, blanco—: juntos competían entre sí y con el color de marca.
     En gris se leen como lo que son, una fila de certificaciones, y la banda
     queda de un solo color.

     Gris a secas y nada más. Hubo una versión que además los oscurecía, para
     que el que viniera en blanco no quedara blanco sobre blanco: el problema
     es que brightness multiplica todo por igual y también achica la distancia
     entre los tonos de adentro de un mismo logo. El escudo del medio —fondo
     dorado con las letras en blanco— pasaba de 161 y 255 a 56 y 89, y dejaba
     de leerse. El logo claro se resuelve aparte, invirtiéndolo, que es lo
     único que no le toca el contraste interno. */
  filter: grayscale(1);
}

/* El logo que viene en claro, invertido: la banda es blanca y en gris un logo
   blanco es blanco sobre blanco. Invertirlo lo deja oscuro sin achicarle la
   distancia entre sus propios tonos, que es lo que pasaba al oscurecerlo.

   Cuál es lo decide el panel al subirlo, midiendo el archivo: ver
   logo_claro() en admin/index.php. */
.confianza-lista li.es-claro img {
  filter: grayscale(1) invert(1);
}

/* Sobre el blanco de la banda, el texto vuelve al azul de marca: es el nombre
   de la certificación que todavía no tiene logo, y en blanco no se vería. */
.confianza-lista span {
  white-space: nowrap;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-principal);
}

.confianza .rotulo {
  color: var(--azul-principal);
  opacity: 0.75;
}

/* --- Parallax ----------------------------------------------------------
   El fondo se dibuja más alto que la sección: ese excedente es lo que se
   consume al correrse. Sin él, moverlo destaparía el borde. */

.parallax {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* El difuminado de costura.
   ------------------------------------------------------------------------
   Va en la cabecera de una categoría y no en el parallax: ahí se pidió la foto
   limpia, sin nada encima. La costura entre la tira de certificaciones y la
   foto queda a filo, que es como se quiere ver.

   Donde una foto empieza justo debajo de otra cosa, el borde es un filo duro
   que corta la página en dos piezas pegadas. Con el degradado la foto empieza
   aclarada y va tomando cuerpo: lo de arriba apoya sobre ella en vez de
   terminar contra ella.

   Va en el azul principal del manual y sobre el ancho entero. En blanco era un
   aclarado que podía leerse como niebla, y en el azul claro seguía siendo un
   tinte tenue: es un color de por sí luminoso, y sobre una foto que ya tiene
   sus propios grises no se impone. El principal es oscuro y por eso se planta
   —y es además el color con el que el sitio arranca y termina—.

   Arranca casi macizo, en 92 %, y no del todo: entero taparía la foto en vez
   de teñirla, y ahí el borde de abajo del degradado se vuelve visible otra
   vez. Lleva una parada intermedia además de las dos puntas —92, 60 y nada—
   para que el color se sostenga en el primer tramo en lugar de caer desde el
   primer píxel: sin ella lo cargado dura nada y el promedio queda igual de
   flojo que antes.

   Se apaga en el 35 % del alto, que a pantalla completa son unos 270 px:
   cuanto más largo el recorrido, menos se nota dónde termina, que es
   justamente lo que se busca. */
.categoria-cabecera::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 35%;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--azul-principal) 92%, transparent) 0%,
    color-mix(in srgb, var(--azul-principal) 60%, transparent) 45%,
    transparent 100%
  );
  /* Por encima de la foto y por debajo del texto.
     El z-index no es cosmético: la foto de fondo también va posicionada, y
     entre dos posicionados que empatan gana el que viene después en el
     documento. El ::before es siempre el primero, así que sin subirlo la foto
     lo tapaba entero —por eso la primera versión no se veía por ningún lado—. */
  z-index: 1;
  pointer-events: none;
}


.manifiesto-titulo {
  margin: 0 0 0.75rem;
  font-weight: var(--peso-regular);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.1;
}

.manifiesto-texto {
  margin: 0;
  /* Ancho de medida pensado para que el manifiesto caiga en unas cinco
     líneas y no en nueve. Con 48ch el renglón quedaba corto y el texto se
     estiraba hacia abajo hasta comerse el lienzo. El número exacto de
     líneas depende del ancho de pantalla: esto lo acerca, no lo fija. */
  max-width: 92ch;
  font-weight: var(--peso-regular);
  font-size: clamp(1.15rem, 1.75vw, 1.6rem);
  line-height: 1.55;
}

/* El texto va en blanco, centrado y directamente sobre la foto, sin caja que
   lo sostenga. Como la foto no es pareja, lleva una sombra: es lo único que
   garantiza que se lea también donde el fondo aclara. */
.parallax-frente {
  /* Por encima del difuminado del borde de arriba, que va en 1. */
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  /* Más ancho que las 44rem de antes: con aquella medida el manifiesto
     caía en ocho o nueve renglones y se comía el lienzo a lo alto. Con
     esto entra en unas cinco líneas. */
  max-width: 76rem;
  margin-inline: auto;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Centrado también el bloque de texto, que traía su propio tope de ancho. */
.parallax-frente .manifiesto-texto {
  margin-inline: auto;
}

/* El excedente es lo que se consume al moverse, así que también es el techo
   del efecto: con 12% el fondo se corría 57 px sobre casi 1200 px de scroll y
   no se notaba. Con 22% el recorrido se duplica y el parallax se lee. */
.parallax-fondo {
  position: absolute;
  inset: -22% 0;
  transform: translate3d(0, calc(var(--desplazamiento, 0) * 1px), 0);
}

.parallax-fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El contenido va por encima del fondo y del difuminado, y no se mueve con
   ellos. Es la segunda vez que se declara —la otra está arriba, con la
   tipografía— y las dos tienen que coincidir: la de más abajo es la que manda. */
.parallax-frente {
  position: relative;
  z-index: 2;
}

/* --- Blog y contacto ---------------------------------------------------- */

.titulo-seccion {
  margin: 0;
  font-weight: var(--peso-light);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  text-align: center;
}

/* Mosaico de seis columnas: las tarjetas ocupan cuatro o dos según les toque,
   y esa desigualdad es la que le da ritmo al índice. Con columnas iguales se
   lee como una tabla. */
.notas {
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  /* El 100% es el que manda en el teléfono: como ítem de un flex centrado, la
     lista se sostenía en su ancho mínimo y sobresalía de la pantalla. */
  max-width: min(76rem, 100%);
}

.nota--ancha { grid-column: span 4; }
.nota--angosta { grid-column: span 2; }

/* La tarjeta entera es el botón: no hay un "leer más" chiquito al que apuntar.
   Se le sacan los estilos de botón, que no tienen nada que ver con esto. */
.nota-tarjeta {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nota-foto {
  display: block;
  overflow: hidden;
  background: var(--gris-claro);
}

/* La ancha lleva la foto apaisada y la angosta cuadrada: es lo que hace que
   las dos terminen midiendo parecido de alto pese a la diferencia de ancho. */
.nota--ancha .nota-foto { aspect-ratio: 16 / 9; }
.nota--angosta .nota-foto { aspect-ratio: 1 / 1; }

.nota-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.nota-tarjeta:hover .nota-foto img,
.nota-tarjeta:focus-visible .nota-foto img {
  transform: scale(1.03);
}

.nota-datos {
  display: grid;
  gap: 0.4rem;
}

.nota-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-secundario);
}

.nota-categoria {
  color: var(--gris-acento);
}

.nota-titulo {
  display: block;
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.2;
}

.nota-bajada {
  display: block;
  margin: 0;
  color: var(--gris-acento);
  line-height: 1.55;
}

/* El "Leer" aparece al acercarse: en reposo la tarjeta es la foto y el titular,
   y esto sería ruido repetido doce veces. */
.nota-leer {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--azul-principal);
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 0.2s, transform 0.2s;
}

.nota-tarjeta:hover .nota-leer,
.nota-tarjeta:focus-visible .nota-leer {
  opacity: 1;
  transform: none;
}

.nota-tarjeta:focus-visible {
  outline: 2px solid var(--azul-secundario);
  outline-offset: 6px;
}

/* --- La nota abierta ----------------------------------------------------
   Ocupa la pantalla entera por encima de todo. No es una página aparte: el
   texto ya estaba en el documento y acá solo se lo destapa. */

.nota-abierta {
  position: fixed;
  inset: 0;
  z-index: 15;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--blanco);
  scrollbar-width: none;
}

.nota-abierta::-webkit-scrollbar {
  display: none;
}

.nota-abierta[hidden] {
  display: none;
}

.nota-abierta-caja {
  /* Más ancha que antes —46rem— porque ahora la caja lleva dos columnas: la
     regla y el texto. El ancho de lectura lo limita el propio texto. */
  max-width: 58rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 10vh, 6rem);
  display: grid;
  gap: 1.25rem;
}

/* ── La ficha de la nota ──
   Rotulados arriba y el dato debajo, en una franja bajo una regla gruesa:
   es la cabecera de un informe de ensayos. Los números van en cifras de
   ancho fijo, como los de un instrumento. */
.nota-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  padding: .9rem 0;
  border-top: 2px solid var(--azul-principal);
  border-bottom: 1px solid var(--gris-claro);
}

.nota-ficha-dato {
  display: grid;
  gap: .25rem;
}

.nota-ficha dt {
  font-size: .62rem;
  font-weight: var(--peso-bold);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris-acento);
}

.nota-ficha dd {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: .9rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.nota-volver {
  justify-self: start;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--azul-secundario);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.nota-volver:hover,
.nota-volver:focus-visible {
  color: var(--azul-principal);
}

.nota-abierta-titulo {
  margin: .4rem 0 0;
  /* La misma voz que el titular del home y el del cabezote: pesada, en
     mayúsculas y apretada. Es la marca hablando. */
  font-weight: var(--peso-heavy);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  transform: scaleX(.94);
  transform-origin: left center;
}

.nota-abierta-bajada {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--gris-acento);
}

/* ── La placa ──
   La foto montada como una placa radiográfica: el recuadro fino y las
   cuatro marcas de registro en las esquinas, que en una placa de verdad
   son las que dicen dónde estaba puesta. */
.nota-placa {
  --marca: linear-gradient(var(--azul-principal) 0 0);
  position: relative;
  margin: clamp(.5rem, 2vh, 1rem) 0 0;
  padding: .7rem;
  border: 1px solid var(--gris-claro);
  background:
    var(--marca) 0 0 / 16px 2px no-repeat,
    var(--marca) 0 0 / 2px 16px no-repeat,
    var(--marca) 100% 0 / 16px 2px no-repeat,
    var(--marca) 100% 0 / 2px 16px no-repeat,
    var(--marca) 0 100% / 16px 2px no-repeat,
    var(--marca) 0 100% / 2px 16px no-repeat,
    var(--marca) 100% 100% / 16px 2px no-repeat,
    var(--marca) 100% 100% / 2px 16px no-repeat;
}

.nota-abierta-foto {
  width: 100%;
  height: auto;
  display: block;
}

/* ── La lectura: la regla y el texto ── */
.nota-lectura {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1rem, 3vh, 2rem);
}

/* La regla. Las marcas cortas cada 4% y las largas cada 20%: la escala
   entera es la nota entera, así que el cursor siempre queda a la altura
   del renglón que se está leyendo. */
.nota-regla {
  position: relative;
  border-left: 1px solid var(--gris-claro);
  background-image:
    linear-gradient(to right, var(--gris-acento) 0 14px, transparent 14px),
    linear-gradient(to right, var(--gris-claro) 0 7px, transparent 7px);
  background-size: 100% 20%, 100% 4%;
  background-repeat: repeat-y;
}

.nota-regla-cursor {
  position: absolute;
  top: var(--leido, 0%);
  left: -1px;
  display: flex;
  align-items: center;
  gap: .45rem;
  transform: translateY(-50%);
}

/* El trazo del cursor, del ancho de la marca larga. */
.nota-regla-cursor::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--azul-principal);
}

.nota-regla-valor {
  font-weight: var(--peso-bold);
  font-size: .68rem;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--azul-secundario);
}

.nota-abierta-cuerpo {
  display: grid;
  gap: 1.1rem;
  max-width: 62ch;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}

.nota-abierta-cuerpo p {
  margin: 0;
}

/* El primer párrafo, más grande: un informe abre con el resumen. */
.nota-abierta-cuerpo p:first-child {
  font-size: 1.2em;
  line-height: 1.6;
  text-align: left;
}

/* El cuadrado del final, como el que cierra un artículo impreso. */
.nota-fin {
  width: 11px;
  height: 11px;
  margin: .6rem 0 0;
  background: var(--azul-principal);
}

/* La lectura para cuando no hay sitio para la regla: una línea fina
   arriba de todo. Se enciende sola cuando la regla se apaga. */
.nota-progreso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: var(--leido, 0%);
  height: 3px;
  background: var(--azul-principal);
}

@media (max-width: 1000px) {
  .nota-lectura {
    grid-template-columns: minmax(0, 1fr);
  }

  .nota-regla {
    display: none;
  }

  .nota-progreso {
    display: block;
  }
}

/* En el teléfono el mosaico no tiene sentido: las dos medidas de tarjeta caen
   a una sola columna. */
@media (max-width: 760px) {
  .notas {
    grid-template-columns: 1fr;
  }
  .nota--ancha,
  .nota--angosta {
    grid-column: 1 / -1;
  }
  .nota--angosta .nota-foto {
    aspect-ratio: 16 / 10;
  }
  /* Sin puntero no hay al qué acercarse: el "Leer" va siempre visible. */
  .nota-leer {
    opacity: 1;
    transform: none;
  }
}

.contacto-texto {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  color: var(--gris-acento);
}

/* Título que solo leen los lectores de pantalla. */
.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La foto y el lienzo comparten caja exacta. Ojo: con el recorte de cover la
   imagen dibujada es más grande que esa caja, así que el efecto ya no puede
   medirse contra ella —de eso se ocupa el script, que rehace la misma cuenta
   del recorte para saber dónde quedó el caño. */
/* El alto va explícito: sin él la imagen impone su proporción, el height:100%
   de adentro no tiene contra qué resolverse y la sección crece más que la
   pantalla. */
/* La foto vive dentro del hueco de la técnica 7, así que llena a su
   contenedor: el alto se lo da la columna de texto de al lado. */
.inspeccion {
  position: relative;
  margin: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
  min-height: 16rem;
  overflow: hidden;
}

.inspeccion img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El ancho y el alto van explícitos: un canvas es un elemento reemplazado y
   con inset:0 solo toma su tamaño intrínseco en vez de estirarse, que es como
   el efecto terminaba corrido respecto de la foto. */
.inspeccion canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- La tira de las categorías ------------------------------------------
   Va abajo del lienzo, con todas a la vista. Cada una es una pestaña: la
   abierta se marca con una línea arriba, y las otras quedan al ras. */

/* La tira queda pegada al pie de la pantalla todo lo que dure el recorrido de
   la categoría: es lo que permite saltar a otra sin tener que volver arriba.
   Sticky y no fija: pertenece a la sección, así que entra con ella y se va
   cuando la sección termina, en vez de quedar flotando sobre el resto del
   sitio. Va por encima de todo lo del lienzo, para que ninguna foto ni efecto
   que se estire la tape. */
.tecnicas-tira {
  position: sticky;
  bottom: 0;
  z-index: 3;
  /* No suma alto a la sección: se monta sobre el final de la última técnica en
     vez de agregar una banda propia detrás de ella. Sin esto la sección medía
     una técnica más un pedazo, y al llegar al final la tira quedaba colgada
     sobre una franja en blanco, despegada de todo. */
  margin-top: calc(-1 * var(--tira-alto));

  display: grid;
  /* Una columna por categoría. Cuando el ancho ya no da, la tira se desliza de
     costado en vez de apretar las cajas hasta lo ilegible. */
  grid-auto-flow: column;
  /* Todas entran siempre, repartiéndose el ancho en partes iguales. El mínimo
     va en 0 y no en una medida: cualquier mínimo mayor que la parte que le toca
     a cada una las empuja fuera y aparece el scroll. Lo que se achica es la
     caja; el texto se acomoda dentro. */
  grid-auto-columns: minmax(0, 1fr);
  overscroll-behavior-x: contain;
  /* Color fijo, no el de lo que hay arriba: una categoría son varias técnicas
     seguidas y cada una trae su fondo, así que seguirlo sería una tira que se
     repinta sola mientras se lee. En el azul de marca es la misma de la
     primera pantalla a la última.

     Translúcida hasta donde el texto aguanta, que es 80 %. El velo estuvo en
     28 % y se veía todo lo de atrás, pero encima van rótulos chicos en blanco
     y sobre el panel blanco o una foto clara quedaban lavados: la sombra
     terminaba haciendo un trabajo que no le corresponde.

     El piso está medido, no elegido. Contraste del rótulo blanco sobre el
     panel blanco, que es el peor caso: 3.76 al 70 %, 4.22 al 75 %, 4.73 al
     80 %. Ochenta es donde cruza el mínimo de 4.5, así que ahí se queda.
     Bajarlo más no hace que se vea mucho más el fondo, pero sí que no se lea
     el rótulo.

     Sobre los fondos oscuros —los dos azules, una foto de noche— el velo pesa
     mucho menos y ahí la tira se ve claramente translúcida, que es donde la
     transparencia tenía sentido: sobre una foto, no sobre un panel liso.

     Los rótulos van siempre en blanco. Hubo una versión en que seguían al
     color del panel de atrás —azules sobre los claros— y sobre el velo azul
     ese azul se perdía: dos tonos parecidos peleando. El blanco es el único
     que se lee igual sobre los cinco fondos. */
  background: color-mix(in srgb, var(--azul-principal) 80%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  color: var(--blanco);
  /* La barra de scroll no se muestra: la tira se arrastra o se recorre con el
     teclado, y una barra acá parte el borde de abajo del lienzo. */
  scrollbar-width: none;
}

/* La tira se guarda sola y sale cuando se la busca.
   ------------------------------------------------------------------------
   Cada técnica ocupa una pantalla, y una barra fija de casi cien píxeles se
   come una parte de todas. Retirada, la técnica se ve entera; acercando el
   puntero al borde de abajo vuelve, que es donde uno lo lleva justamente
   cuando quiere cambiar de categoría.

   Se va con transform y no con display: hay que poder animarla, y sacarla del
   flujo cambiaría el alto de la sección cada vez que entra y sale. Ahí queda,
   ocupando su lugar, corrida hacia abajo.

   Solo donde hay puntero de verdad. En un teléfono no existe «acercarse»: la
   tira quedaría escondida para siempre, así que ahí sigue a la vista. */
@media (hover: hover) and (pointer: fine) {
  .tecnicas-tira {
    transform: translateY(100%);
    /* La transición no lleva el fondo ni el color: solo se mueve. */
    transition: transform 0.25s ease;
  }

  /* Sale en la portada de la categoría, que es donde se elige, y en la última
     técnica, que es donde se termina de recorrerla y hay que decidir a dónde
     ir. En el medio estorba —cada técnica ocupa una pantalla y la barra le
     come una franja— así que ahí se retira.

     Hubo una versión que además la traía acercando el puntero al borde de
     abajo, con una pestaña que lo anunciaba. Se fue: el puntero se queda
     quieto donde uno lo dejó, y si eso es cerca del pie —volviendo de la ficha
     de una técnica, por ejemplo— la tira se quedaba afuera todo el recorrido
     sin que nadie la hubiera pedido, y solo se iba al mover el mouse a otro
     lado.

     También sale cuando se la está recorriendo con el teclado: ahí no hay
     scroll que la traiga, y una barra que se esconde de quien la está usando
     es peor que una que no se esconde nunca.

     Con :focus-visible y no con :focus-within: un clic deja el botón enfocado,
     así que tocar una categoría con el mouse dejaba la tira clavada afuera
     todo el recorrido siguiente —solo se iba al hacer clic en cualquier otro
     lado, que no es algo que nadie tenga por qué deducir—. :focus-visible es
     justamente el foco que el navegador considera que hay que mostrar, y a un
     botón tocado con el mouse no se lo pone. */
  .tecnicas-tira--fija,
  .tecnicas-tira:has(:focus-visible) {
    transform: none;
  }

  /* Fuera de la sección no se dibuja. Corrida hacia abajo, la tira se sale de
     su caja y sticky no puede sujetarla —el corrimiento es un transform—, así
     que al pasar a lo que sigue reaparecía flotando sobre el blog. */
  .tecnicas-tira--fuera {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tecnicas-tira {
    transition: none;
  }
}

.tecnicas-tira::-webkit-scrollbar {
  display: none;
}

/* En el teléfono la quinta parte de la pantalla son unos setenta píxeles, y
   ahí no entra 'Ensayos superficiales' de ninguna manera. Vuelve el ancho
   mínimo y la tira se arrastra, que es lo que se espera de una fila de
   pestañas en un teléfono. */
@media (max-width: 700px) {
  .tecnicas-tira {
    grid-auto-columns: minmax(7.5rem, 1fr);
    overflow-x: auto;
  }

  /* Y que se note que hay más.
     ----------------------------------------------------------------------
     Cinco categorías son 680 px de tira en una pantalla de 375: dos quedan
     fuera. Con la barra de scroll oculta —que se oculta a propósito, porque
     parte el borde de abajo del lienzo— no había ninguna señal de que la tira
     se arrastra, y las que no entraban no existían.

     El borde se desvanece del lado donde queda tira por recorrer. Se hace con
     máscara y no con un degradado encima: la tira es translúcida y tiene
     desenfoque detrás, así que cualquier velo del color del fondo se vería
     como un parche. La máscara apaga el pixel de la propia tira y deja pasar
     lo que hay atrás, que es justo lo que se busca. */
  .tecnicas-tira--hay-mas {
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  }

  .tecnicas-tira--hay-antes {
    -webkit-mask-image: linear-gradient(to left, #000 80%, transparent 100%);
    mask-image: linear-gradient(to left, #000 80%, transparent 100%);
  }

  .tecnicas-tira--hay-antes.tecnicas-tira--hay-mas {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  }
}

.tecnica-caja {
  display: grid;
  align-content: center;
  gap: 0.3rem;
  /* El relleno lateral va en proporción del ancho: con un valor fijo, en una
     quinta parte de pantalla angosta se come todo el lugar del texto. */
  padding: clamp(0.9rem, 2vh, 1.6rem) clamp(0.25rem, 0.7vw, 0.75rem);
  /* Sin esto la caja se niega a bajar del ancho de su contenido y se salen
     igual: es lo que le permite achicarse hasta su parte de la grilla. */
  min-width: 0;
  /* La caja es una tarjeta y no un renglón: ese alto es lo que le da lugar al
     nombre de la categoría y a las siglas debajo. */
  min-height: var(--tira-alto);
  border: 0;
  /* El separador sale del propio color del texto, rebajado: una sola decisión
     de color y no hay forma de que las dos queden desparejas. */
  border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: transparent;
  color: inherit;
  /* Tres capas de sombra oscura, de la más cerrada a la más abierta. Con el
     velo tan liviano, esto es lo único que separa el blanco del rótulo de un
     fondo que puede ser casi blanco: la primera dibuja el contorno, la segunda
     lo engrosa y la tercera apoya el conjunto. Sobre los fondos oscuros no se
     nota; sobre los claros es lo que hace que el rótulo exista. */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(0, 0, 0, 0.5);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.tecnica-caja:last-child {
  border-right: 0;
}

/* El nombre de la categoría. Es lo que se elige, así que va primero y en
   negrita. Con cinco cajas y no doce hay ancho de sobra: entra entero. */
.tecnica-caja-sigla {
  font-weight: var(--peso-bold);
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

/* Las siglas de lo que hay adentro —"LRUT · MRUT"—, de índice. No es lo que se
   elige sino lo que confirma que se eligió bien, así que va más chico y en
   segundo plano. Se recorta a dos renglones: la categoría con más técnicas son
   tres siglas y entran de sobra. */
.tecnica-caja-nombre {
  font-size: clamp(0.66rem, 0.85vw, 0.88rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  -webkit-line-clamp: 2;
  color: inherit;
  opacity: 0.78;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tecnica-caja:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* La abierta se marca con una línea y el nombre a pleno, no con un bloque de
   color: la tira es transparente a propósito y un bloque volvería a taparle el
   panel a la técnica que se está mirando. */
.tecnica-caja[aria-selected='true'] {
  box-shadow: inset 0 3px 0 0 currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.tecnica-caja[aria-selected='true'] .tecnica-caja-nombre {
  opacity: 1;
}

.tecnica-caja:focus-visible {
  outline: 2px solid var(--azul-secundario);
  outline-offset: -3px;
}

/* --- La ficha de una técnica --------------------------------------------
   La página a la que lleva «Más información». Reusa las filas de las técnicas
   —.tecnica, con su alternancia y su ciclo de colores— para que se lea como
   una continuación del home y no como otro sitio. Lo propio de acá es la
   cabecera, la entrada y el cierre. */

/* Sin barra de menú: es una página de salida, no una sección más del recorrido.
   Lo único que la ata al home es el botón de volver, y por eso va arriba. */
.pagina-ficha {
  background: var(--blanco);
  color: var(--azul-principal);
}

.ficha-cabecera {
  --aire: clamp(1.5rem, 4vw, 4.5rem);

  position: relative;
  display: grid;
  align-content: space-between;
  gap: 2rem;
  /* Más baja que un lienzo del home: acá la foto presenta, no recibe. Quien
     llega ya eligió la técnica y viene a leer, así que el texto tiene que
     empezar a verse sin scrollear. */
  min-height: 70vh;
  min-height: 70svh;
  padding: var(--aire);
  overflow: hidden;
  background: var(--azul-principal);
  color: var(--blanco);
}

.ficha-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* El mismo difuminado que cose los lienzos del home, por la misma razón: la
   foto arranca contra el borde de la ventana y sin él ese borde es un filo. */
.ficha-cabecera::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 35%;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--azul-principal) 92%, transparent) 0%,
    color-mix(in srgb, var(--azul-principal) 60%, transparent) 45%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
}

.ficha-volver {
  position: relative;
  z-index: 2;
  justify-self: start;
  border-color: currentColor;
  color: inherit;
  /* Sobre la foto necesita algo detrás: el difuminado ayuda, pero el botón
     puede caer sobre un tramo claro. */
  background: color-mix(in srgb, var(--azul-principal) 55%, transparent);
}

.ficha-volver:hover,
.ficha-volver:focus-visible {
  background: var(--azul-principal);
}

.ficha-titulo {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.5rem;
  max-width: min(46rem, 100%);
}

.ficha-titulo--sobre-foto {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.ficha-categoria {
  margin: 0;
  font-weight: var(--peso-regular);
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.ficha-nombre {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.8rem, 4vw, 3.6rem);
  line-height: 1.05;
  text-wrap: balance;
}

/* La sigla va delante del nombre, en la misma línea y más chica: es la forma
   corta de lo mismo, no un dato aparte. */
.ficha-sigla {
  display: block;
  font-size: 0.45em;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

/* La entrada va al ancho de una lectura larga y centrada, que es lo contrario
   de la columna angosta y al costado que tiene en el home: acá la descripción
   es el contenido y no el pie de una foto. */
.ficha-entrada {
  display: grid;
  justify-items: stretch;
  gap: 0.9rem;
  /* Más ancha que antes: dos columnas de lectura necesitan el doble de lugar
     que una. */
  max-width: 64rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 8vh, 5rem) clamp(1.5rem, 4vw, 4.5rem);
}

/* A dos columnas, como una revista. El texto de una técnica es largo y de una
   sola pieza: a todo el ancho, cada renglón cruza la pantalla entera y el ojo
   se pierde volviendo; partido en dos, cada columna queda en un ancho de
   lectura y la mancha de texto se lee como una página.

   El corte va por column-width y no por column-count: así el número de
   columnas lo decide el ancho disponible, y en una pantalla angosta cae en una
   sola sin necesidad de una regla aparte que lo deshaga. */
.ficha-descripcion {
  margin: 0;
  font-weight: var(--peso-regular);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.7;
  hyphens: auto;
  columns: 20rem 2;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  /* Justificado: es lo que hace que las dos columnas tengan bordes rectos y se
     lean como bloques y no como dos textos sueltos. Los guiones al final del
     renglón son lo que evita que justificar abra huecos. */
  text-align: justify;
}

.ficha-cierre {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  padding: clamp(3rem, 10vh, 6rem) clamp(1.5rem, 4vw, 4.5rem);
  background: var(--gris-claro);
  text-align: center;
}

.ficha-pregunta {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  text-wrap: balance;
}

.ficha-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.ficha-acciones .boton {
  min-width: 13rem;
}

/* --- El cabezote del contacto -------------------------------------------
   La foto de un lado y el título con el texto del otro. Es lo primero que se
   ve al llegar desde «Cotizar», así que tiene que decir dónde se cayó antes
   que ninguna otra cosa. */

/* El lienzo del contacto necesita aire propio: .lienzo no trae padding, y sin
   él el cabezote arranca pegado al borde. Va en variable porque la foto lo usa
   en negativo para salirse por su lado. */
.contacto {
  --aire-lienzo: clamp(1.5rem, 4vw, 4.5rem);
  padding: var(--aire-lienzo);
  /* La foto se sale del padding y llega al borde: acá se corta lo que sobra. */
  overflow: hidden;
}

/* Todo el contacto en una sola grilla: la foto a la izquierda con los datos
   debajo, y a la derecha el texto con el formulario pegado abajo.

   Antes eran dos bloques apilados —foto con texto arriba, datos con formulario
   abajo— y el formulario arrancaba a 464 px del principio de la sección, más
   de lo que entra en una pantalla. Compartiendo la grilla sube a la altura del
   texto, que es donde se lo busca.

   El texto arranca a la altura de la foto y no en el medio de su columna:
   centrado quedaba cien píxeles más abajo que el borde de arriba de ella, y
   las dos mitades se leían como piezas sueltas puestas una al lado de la otra
   en vez de un solo bloque. */
.contacto-panel {
  display: grid;
  align-items: start;
  /* El hueco entre filas es chico a propósito: lo que separa la foto de los
     datos es una costura, no un corte. El de las columnas sí es amplio, que
     ahí se separan dos cosas distintas. */
  gap: clamp(0.9rem, 1.8vw, 1.5rem) clamp(1.5rem, 4vw, 4rem);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

/* Contra la izquierda y en negrita, no centrado y liviano como el resto de los
   títulos de sección: acá el título no encabeza una página sino que arranca un
   bloque de dos columnas, y centrado quedaría flotando en su mitad. */
.contacto-intro .titulo-seccion {
  font-weight: var(--peso-bold);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  text-align: left;
}

.contacto-intro .contacto-texto {
  text-align: left;
}

/* Con foto se parte en dos columnas y tres filas. La foto ocupa las dos
   primeras, los datos van debajo de ella, y el formulario acompaña desde la
   segunda: así arranca a la altura del texto y no debajo de todo. Sin foto no
   hay nada que partir y esta regla no se aplica. */
.contacto-panel--con-foto {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "foto  intro"
    "foto  forma"
    "datos forma";
}

/* La foto llena las dos filas que ocupa en vez de quedarse con su proporción:
   sobraban 57 px de fila vacía debajo de ella, y los datos empezaban 97 más
   abajo de donde terminaba. Estirada, la separación es solo el hueco de la
   grilla y el bloque se lee colgado de la foto. */
.contacto-panel--con-foto .contacto-foto-caja {
  grid-area: foto;
  align-self: stretch;
}

/* La caja que sostiene la foto y el nombre encima. */
.contacto-foto-caja {
  position: relative;
  display: grid;
  min-height: 0;
}

.contacto-panel--con-foto .contacto-foto {
  aspect-ratio: auto;
  height: 100%;
}

/* El nombre sobre la foto, abajo a la izquierda, del lado que la máscara no
   toca. En blanco con sombra: la foto no es pareja y el contorno es lo único
   que lo sostiene en los tramos claros. */
.contacto-empresa-nombre--sobre-foto {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: clamp(0.9rem, 2vw, 1.6rem) clamp(1rem, 2.5vw, 2rem);
  color: var(--blanco);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 0, 0, 0.4);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: 0.08em;
}
.contacto-panel--con-foto .contacto-intro {
  grid-area: intro;
}
.contacto-panel--con-foto .contacto-empresa {
  grid-area: datos;
}
.contacto-panel--con-foto .contacto-forma {
  grid-area: forma;
}

.contacto-foto {
  margin: 0;
  /* Se sale del padding del lienzo por su lado y llega al borde de la ventana:
     media foto con margen a la izquierda y pegada a la derecha se lee como un
     recuadro suelto y no como el fondo de esa mitad. */
  margin-left: calc(-1 * var(--aire-lienzo));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  line-height: 0;
  /* El borde interior se desvanece en vez de cortar. Con máscara y no con un
     degradado encima: encima habría que pintarlo del color del fondo, y ese
     color cambia —el lienzo es blanco, pero la foto puede caer sobre otro—.
     La máscara borra la foto y deja pasar lo que haya detrás, sea lo que sea. */
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
  mask-image: linear-gradient(to right, #000 62%, transparent 100%);
}

.contacto-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contacto-intro {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  max-width: 40rem;
}

.contacto-intro .contacto-texto {
  margin: 0;
  max-width: 46ch;
}

/* En pantalla angosta la foto pasa arriba y el texto debajo: partido en dos,
   ninguna de las dos mitades tiene ancho para nada. */
@media (max-width: 900px) {
  .contacto-panel--con-foto {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  /* Los mismos selectores que asignan las áreas, para ganarles: con
     «> *» no alcanzaba —una clase menos de especificidad— y los cuatro bloques
     quedaban colocados por nombre en una grilla que ya no los tenía, uno
     encima de otro.

     Y el formulario se adelanta a los datos: apilado, lo que se busca primero
     es dónde escribir. */
  .contacto-panel--con-foto .contacto-foto,
  .contacto-panel--con-foto .contacto-intro,
  .contacto-panel--con-foto .contacto-foto-caja,
  .contacto-panel--con-foto .contacto-empresa,
  .contacto-panel--con-foto .contacto-forma {
    grid-area: auto;
  }

  /* Y la foto recupera su proporción. Estirarla servía para llenar las dos
     filas de la grilla de dos columnas; apilada no hay filas que llenar, y esa
     regla —dos clases— le ganaba a la proporción de acá. */
  .contacto-panel--con-foto .contacto-foto {
    height: auto;
    aspect-ratio: 2 / 1;
  }
  .contacto-panel--con-foto .contacto-forma {
    order: 1;
  }
  .contacto-panel--con-foto .contacto-empresa {
    order: 2;
  }
  .contacto-foto {
    /* Apilada se sale por los dos lados: es el ancho entero de la pantalla. */
    margin-inline: calc(-1 * var(--aire-lienzo));
    aspect-ratio: 2 / 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
}

/* Llegando con un ancla, la página se tapa hasta que el script la ubica: sin
   esto se ve el sitio desde arriba y recién después el salto. La clase la pone
   y la saca JavaScript —el <head> al entrar, el script al ubicarla—, así que
   sin JavaScript nunca se aplica y no hay forma de que quede tapada. */
.con-ancla body {
  visibility: hidden;
}

/* --- El anclaje del recorrido -------------------------------------------
   Cada bloque del sitio mide una pantalla, así que el scroll se detiene en los
   bordes en vez de dejar dos mitades a la vista. En las técnicas es lo que
   cambia el recorrido: pasar de una a otra es un gesto con un destino, y no un
   deslizamiento que puede quedar en cualquier lado.

   Va en proximity y no en mandatory. Con mandatory el scroll está obligado a
   terminar siempre en un punto de anclaje, y en una sección más alta que la
   pantalla —el blog, con sus notas— eso significa no poder detenerse en el
   medio a leer. Con proximity ancla cuando está cerca, que en las técnicas es
   siempre, porque los puntos están exactamente a una pantalla uno de otro. */
html {
  scroll-snap-type: y proximity;
}

.lienzo,
.categoria-cabecera,
.tecnica {
  scroll-snap-align: start;
}

/* Y en las técnicas el anclaje no se puede saltear: un gesto largo se frena en
   la siguiente en vez de pasarle por encima. Es lo que evita llegar a la
   tercera sin haber visto la segunda. */
.categoria-cabecera,
.tecnica {
  scroll-snap-stop: always;
}

/* En el teléfono no hay anclaje.
   ------------------------------------------------------------------------
   El anclaje supone bloques de una pantalla exacta. Apilado, ningún bloque
   mide eso: una técnica ocupa pantalla y media, y el lienzo del blog casi dos.
   Y anclar por el borde de arriba un bloque más alto que la pantalla tiene una
   consecuencia que se siente enseguida: leyendo por la mitad, al soltar el
   dedo el navegador vuelve al principio del bloque. Eso era el tirón —«hace un
   efecto de movimiento y no deja bajar normal»—.

   Se apaga entero y el teléfono scrollea como scrollea un teléfono. En el
   escritorio, donde los bloques sí miden una pantalla, el anclaje sigue. */
@media (max-width: 900px) {
  html {
    scroll-snap-type: none;
  }
}

/* --- El contacto: los datos y el formulario ------------------------------
   Dos columnas: a la izquierda los teléfonos y el correo, a la derecha el
   formulario. Quien ya sabe qué quiere llama; quien viene a preguntar escribe.
   Ninguno de los dos tiene que buscar al otro. */

/* El nombre encabeza los datos: al lado de un formulario que también pide
   correo y teléfono, hay que poder distinguir de un vistazo cuáles son los de
   la empresa y cuáles los que hay que escribir. */
.contacto-empresa-nombre {
  margin: 0 0 0.9rem;
  font-weight: var(--peso-bold);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-principal);
}

.contacto-datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  /* Contra la izquierda: son datos que se leen de a uno, no un bloque
     centrado. Centrados, el ojo tiene que buscar dónde empieza cada línea. */
  justify-items: start;
  text-align: left;
}

/* El rótulo de cada dato. Tres números seguidos no dicen a cuál conviene
   llamar; con «Celular» y «Fijo» delante, sí. */
.contacto-rotulo {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-acento);
  margin-bottom: 0.15rem;
}

.contacto-datos a,
.contacto-datos li > span:not(.contacto-rotulo) {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--azul-principal);
}

/* El formulario se apoya sobre una caja del gris del manual. Suelto sobre el
   blanco del lienzo no se leía como una sola cosa: era una fila de campos
   flotando entre el texto y el pie. */
.contacto-forma {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.2rem, 2.5vw, 1.9rem);
  background: var(--gris-claro);
}

/* El rótulo en el azul de marca y no en el gris de acento: sobre el blanco del
   lienzo el gris se leía como una nota al pie y no como el nombre del campo. */
.contacto-forma label {
  display: grid;
  gap: 0.35rem;
  font-weight: var(--peso-bold);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-principal);
}

.contacto-opcional {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

/* Campos con caja entera y fondo propio. Antes iban con la sola línea de abajo
   y sobre el blanco del lienzo apenas se distinguían: había que adivinar dónde
   se escribe. La caja rellena dice dónde va cada cosa antes de leer el
   rótulo. */
.contacto-forma input,
.contacto-forma textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--azul-principal) 45%, transparent);
  border-radius: 0;
  background: var(--blanco);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--azul-principal) 8%, transparent);
  color: var(--azul-principal);
  /* Los campos no heredan la tipografía del sitio: hay que dársela. Y el
     tamaño no baja de 1rem porque abajo de eso el navegador del iPhone hace
     zoom al tocar el campo y desarma el encuadre. */
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

.contacto-forma textarea {
  resize: vertical;
}

/* Enfocado, el borde entero se cierra en el azul de marca y se engrosa con un
   contorno por fuera: se engrosa el borde a secas y el campo empujaba un píxel
   todo lo que tiene debajo. */
.contacto-forma input:focus-visible,
.contacto-forma textarea:focus-visible {
  outline: 2px solid var(--azul-principal);
  outline-offset: -2px;
  border-color: var(--azul-principal);
}

.contacto-forma .boton {
  justify-self: start;
  min-width: 14rem;
  margin-top: 0.4rem;
}

/* El aviso de qué pasó con el envío. Va arriba del formulario, que es donde se
   mira al volver. */
.contacto-aviso {
  margin: 0 0 0.5rem;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  border-left: 3px solid currentColor;
}

.contacto-aviso--bien {
  background: color-mix(in srgb, var(--azul-secundario) 14%, transparent);
  color: var(--azul-principal);
}

.contacto-aviso--mal {
  background: color-mix(in srgb, #b3261e 10%, transparent);
  color: #8c1d18;
}

/* La trampa contra el spam. Escondida de verdad —fuera de la pantalla y sin
   tamaño— pero sin display:none ni visibility:hidden, que es justo lo que un
   robot mira para saltearla. */
.contacto-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



/* --- La invitación al blog en el home -----------------------------------
   En el home va de qué se habla, no el índice. Un mosaico de tarjetas acá
   obliga a elegir una nota antes de saber de qué habla el blog, y deja el
   lienzo con más para leer que ninguno de los otros. */

.blog-invita {
  position: relative;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4.5rem);
  overflow: hidden;
  background: var(--azul-principal);
  color: var(--blanco);
}

.blog-invita-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Un velo sobre la foto: el texto va encima y una foto de campo no es pareja.
   Va en el azul de marca y no en negro, que oscurecer a secas apaga la foto y
   la deja gris. */
.blog-invita-fondo + .blog-invita-texto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--azul-principal) 72%, transparent);
  z-index: -1;
}

.blog-invita-texto {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 1rem;
  max-width: 46rem;
}

/* El rótulo chico de arriba: dice qué sección es antes de que el titular
   diga de qué habla. */
.blog-invita-rotulo {
  margin: 0;
  font-weight: var(--peso-regular);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.blog-invita-titulo {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  text-wrap: balance;
}

.blog-invita-bajada {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  opacity: 0.9;
}

/* Los títulos de las últimas notas, de anticipo. Sin enlace propio: son la
   prueba de que hay algo adentro, no un índice. Lo que se toca es el botón. */
.blog-invita-ultimas {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  max-width: 46ch;
}

.blog-invita-ultimas li {
  padding-left: 1.4rem;
  position: relative;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.4;
  opacity: 0.92;
}

/* Una raya en vez de una viñeta: no es una enumeración cerrada sino una
   muestra de lo que hay. */
.blog-invita-ultimas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.8rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Sobre el azul, el botón macizo se pinta en blanco y escribe en azul. */
.blog-invita .boton--solido {
  margin-top: 0.6rem;
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--azul-principal);
}

.blog-invita .boton--solido:hover,
.blog-invita .boton--solido:focus-visible {
  background: var(--gris-claro);
  border-color: var(--gris-claro);
}

/* --- La página del blog -------------------------------------------------- */

.pagina-blog {
  background: var(--blanco);
  color: var(--azul-principal);
}

.blog-pagina {
  /* Sin relleno arriba: el cabezote arranca pegado al borde de la
     pantalla. El relleno dejaba una franja blanca sobre la foto, y la
     foto no se corta con el ancho porque sale a sangre por su cuenta.
     Su propio relleno interno ya separa el título del borde. */
  /* Y sin relleno a los lados: la lista trae el suyo, del mismo tamaño que
     el del cabezote. Sumados, las tarjetas arrancaban a 102 px del borde
     mientras el título de la foto lo hacía a 38, y no se leían como parte
     de la misma página. */
  padding: 0 0 clamp(1.5rem, 4vw, 4.5rem);
}

/* La lista es quien lleva el relleno lateral, así que el aviso de índice
   vacío necesita el suyo para no quedar pegado al borde. */
.blog-pagina > .rotulo {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 2.6vw, 2.4rem);
}

.blog-cabecera {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  max-width: 46rem;
  margin: 0 auto clamp(2rem, 5vh, 3.5rem);
}

.blog-cabecera .blog-invita-rotulo {
  color: var(--gris-acento);
  opacity: 1;
}

.blog-cabecera-titulo {
  margin: 0;
  font-weight: var(--peso-bold);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.08;
  text-wrap: balance;
}

.blog-volver {
  margin-bottom: 0.8rem;
  border-color: currentColor;
  color: var(--azul-principal);
}

/* ─────────────────────────────────────────────────────────────
   BLOG — portada de investigaciones

   Fondo blanco, tipografía condensada en mayúsculas y la foto
   entrando por la derecha. El texto se apoya sobre blanco limpio
   porque la foto se funde antes de llegar a él: no lleva velo
   encima, que ensuciaría los dos.
   ───────────────────────────────────────────────────────────── */
.inv {
  position: relative;
  /* El azul principal del manual. */
  background: var(--azul-principal);
  color: var(--blanco);
  overflow: hidden;
  /* Capa propia: la foto se recorta contra esta sección y no contra el
     lienzo de al lado. */
  isolation: isolate;
}

/* Los lienzos del home centran su contenido. Acá no: el bloque se apoya en
   el borde izquierdo, y con el centrado quedaba a 224 px del margen en una
   pantalla de 1440. Va con las dos clases porque una sola no le gana a la
   regla de .lienzo que lo centra. */
.lienzo.inv {
  /* Con !important porque la regla que centra los lienzos también lo
     lleva, y sin igualar la fuerza el bloque quedaba a 224 px del margen
     en una pantalla de 1440. */
  justify-content: flex-start !important;
  /* Y esta es la que de verdad lo corría: el lienzo apila en columna, así
     que justify-content manda en vertical y quien centraba en horizontal
     era align-items:center. La caja se encogía a su contenido —529 px de
     1365— y ese sobrante se repartía a los lados: el texto arrancaba a
     418 px del borde. Estirada, arranca donde lo pone su propio relleno. */
  align-items: stretch !important;
}

/* La foto ocupa la mitad derecha y se desvanece hacia la izquierda con
   una máscara. Con un degradado encima haría falta pintar el blanco dos
   veces y el borde se notaría; así el propio pixel se vuelve
   transparente y el fondo de la página se ve tal cual. */
.inv-foto {
  position: absolute;
  /* La caja se queda donde estaba y del tamaño que estaba: agrandarla
     reescala la foto, porque con background-size:cover la imagen se
     ajusta a la caja. */
  /* Anclada a la esquina inferior derecha: arranca más abajo y más a la
     derecha que antes, para que quede claramente en el ángulo y deje
     libre toda la mitad superior izquierda, que es donde va el texto. */
  inset: 38% 0 0 42%;
  z-index: 0;
  background-position: bottom right;
  background-size: cover;
  background-repeat: no-repeat;

  /* El corte recto salía de aquí: el degradado seguía opaco al llegar al
     borde de arriba y al de la izquierda, y ahí terminaba la caja de
     golpe. Ahora se apaga del todo ANTES de esos bordes —transparente al
     62%, con la caja llegando al 100%—, así que la foto se funde con el
     fondo en vez de cortarse.

     Anclado en la esquina inferior derecha: se apaga a la vez hacia la
     izquierda y hacia arriba con una sola capa. Con dos degradados
     lineales —uno por eje— habría que componerlos, y el cruce de ambos
     deja una mancha más oscura en la diagonal. */
     El difuminado arranca más lejos y se apaga más tarde que antes —opaco
     hasta el 34% en vez del 18%, transparente recién al 80% en vez del
     62%—: se descubre bastante más foto y el desvanecido sigue siendo
     gradual, sin el corte recto que tenía al principio. */
  -webkit-mask-image: radial-gradient(115% 125% at 100% 100%,
      #000 34%, rgba(0, 0, 0, .82) 50%, rgba(0, 0, 0, .38) 65%, transparent 80%);
  mask-image: radial-gradient(115% 125% at 100% 100%,
      #000 34%, rgba(0, 0, 0, .82) 50%, rgba(0, 0, 0, .38) 65%, transparent 80%);
}

.inv-cuerpo {
  position: relative;
  z-index: 1;
  /* Apoyado en el borde izquierdo y no centrado: centrarlo dejaba un
     hueco de más del 10% a la izquierda en pantallas anchas, y el texto
     se despegaba del margen. El ancho máximo sigue mandando para que las
     líneas no se estiren de lado a lado. */
  /* Ocupa el ancho entero y la separación la pone su propio relleno.
     Limitarlo con max-width lo dejaba a merced de quien lo centre —había
     un contenedor intermedio haciéndolo, y el bloque quedaba a 224 px del
     borde en una pantalla de 1440—. Así la posición no depende de nadie
     más: lo que separa del margen es el padding y nada más. El ancho de
     lectura lo limitan el titular, el texto y la lista, cada uno el suyo. */
  /* Ocupa el hueco del lienzo SIN poder desbordarlo. Antes iba con
     width:100%, y sumado al relleno hacía el bloque más ancho que su
     panel: el home calcula la posición de todos los paneles a partir de
     esos anchos, así que uno que se pasa corre el sitio entero. En una
     ventana de 1600 el contenido quedaba encajonado en la mitad
     izquierda.
     Con flex el elemento se estira hasta el hueco disponible y ni un
     píxel más; min-width:0 evita que el contenido largo lo empuje. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  /* El texto arriba, no centrado: la esquina superior izquierda es su
     sitio. Antes iba centrado en vertical dentro del lienzo. */
  justify-content: flex-start;
  /* A la izquierda, un dedo de separación del borde: alrededor de un
     centímetro. */
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem) clamp(1rem, 2.6vw, 2.4rem);
  display: flex;
  flex-direction: column;
  /* Arranca arriba. Centrado en vertical dejaba el titular flotando en
     mitad del lienzo en vez de en la esquina. */
  justify-content: flex-start;
  /* La altura la pone el lienzo del home, no esta caja: fijarle una acá
     la sumaría a la del contenedor y la sección quedaría del doble. */
  height: 100%;
}

.inv-titulo {
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
  font-weight: var(--peso-heavy);
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  /* Condensada como en la referencia: la Helvetica de la marca no tiene
     corte estrecho, así que se aprieta por escala horizontal. */
  transform: scaleX(.88);
  transform-origin: left center;
}

.inv-texto {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 46ch;
  font-weight: var(--peso-bold);
  font-size: clamp(.82rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--blanco);
}

.inv-rotulo {
  /* El auto de arriba y el de abajo del pie reparten el espacio libre en
     partes iguales: el titular y la entradilla se quedan arriba y el
     grupo de artículos baja al centro del lienzo, en vez de amontonarse
     contra el texto y dejar medio lienzo vacío. */
  margin: auto 0 1rem;
  /* Y este relleno los baja un poco más del centro: el reparto sigue
     siendo parejo, pero sobre un hueco más chico, así que el grupo queda
     por debajo de la mitad. */
  padding-top: clamp(2rem, 14vh, 8rem);
  font-weight: var(--peso-bold);
  font-size: clamp(.82rem, 1.5vw, 1.05rem);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Las entradas ── */
.inv-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
  /* La medida la pone la lista, no el contenedor: así las tarjetas no se
     estiran de lado a lado en una pantalla ancha. */
  max-width: 58rem;
}

.inv-item {
  min-width: 0;
}

.inv-entrada {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid rgba(249, 250, 249, .35);
  border-radius: 0;
  /* Transparente, no un rectángulo negro: la tarjeta enmarca la foto de
     la nota y deja ver el fondo por detrás cuando todavía no tiene una.
     El borde es lo que la dibuja. */
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  font: inherit;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.inv-entrada:hover {
  transform: translateY(-4px);
  border-color: var(--blanco);
  background: rgba(249, 250, 249, .08);
}

/* En blanco y no en azul: el fondo de la sección ES el azul principal, y
   un contorno del mismo color no se ve. */
.inv-entrada:focus-visible {
  outline: 3px solid var(--blanco);
  outline-offset: 3px;
}

.inv-entrada-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity .35s ease, transform .6s ease;
}

.inv-entrada:hover .inv-entrada-foto {
  opacity: 1;
  transform: scale(1.04);
}

.inv-entrada-datos {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem;
  background: linear-gradient(to top, rgba(17, 20, 22, .82), rgba(17, 20, 22, 0));
}

.inv-entrada-categoria {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul-secundario);
}

.inv-entrada-titulo {
  font-weight: var(--peso-bold);
  font-size: clamp(.8rem, 1.1vw, .95rem);
  line-height: 1.25;
  text-transform: uppercase;
}

.inv-entrada-fecha {
  font-size: .66rem;
  color: var(--gris-claro);
}

/* ── El pie ── */
.inv-pie {
  /* Pegado a los artículos y con el auto abajo: baja junto con ellos en
     vez de quedarse solo contra el borde inferior del lienzo. */
  margin: clamp(1rem, 2vw, 1.6rem) 0 auto;
  text-align: right;
}

.inv-mas {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: var(--peso-heavy);
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanco);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: .15rem;
  transition: color .3s ease, border-color .3s ease;
}

/* Sobre el azul de la sección, el subrayado blanco es lo que marca el
   paso del cursor: pintarlo del azul del manual lo haría desaparecer. */
.inv-mas:hover {
  border-bottom-color: var(--blanco);
}

.inv-mas:focus-visible {
  outline: 3px solid var(--blanco);
  outline-offset: 4px;
}

/* ── Pantallas medianas y chicas ── */
@media (max-width: 900px) {
  .inv-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inv-foto {
    opacity: .6;
  }
}

@media (max-width: 560px) {
  .inv-lista {
    grid-template-columns: 1fr;
  }

  .inv-entrada {
    aspect-ratio: 5 / 4;
  }

  .inv-titulo {
    transform: none;
  }

  .inv-foto {
    -webkit-mask-image: radial-gradient(150% 90% at 100% 100%, #000 22%, rgba(0, 0, 0, .45) 52%, transparent 76%);
    mask-image: radial-gradient(150% 90% at 100% 100%, #000 22%, rgba(0, 0, 0, .45) 52%, transparent 76%);
  }
}

/* ─────────────────────────────────────────────────────────────
   BLOG — el cabezote de la página

   La foto a lo ancho con el título encima. Sin foto queda el gris
   de marca solo, que es un estado válido y no un hueco.
   ───────────────────────────────────────────────────────────── */
.cabezote {
  position: relative;
  /* A sangre, de borde a borde. Vive dentro de <main>, que tiene relleno
     lateral, así que sin esto la foto quedaba con 64 px de margen a cada
     lado en vez de ocupar el ancho entero. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--gris-acento);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--blanco);
  isolation: isolate;
}

/* El velo va solo cuando hay foto: sobre el gris liso oscurecería de más
   sin necesidad. Se pone en una capa aparte y no como segundo fondo para
   que el degradado no se recorte con el background-size de la foto. */
.cabezote--con-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top,
      rgba(17, 20, 22, .88) 0%,
      rgba(17, 20, 22, .55) 55%,
      rgba(17, 20, 22, .35) 100%);
}

.cabezote-caja {
  position: relative;
  z-index: 1;
  /* Mismo criterio que el bloque del home: ancho entero y la separación
     la pone el relleno, no un ancho máximo centrado. Así las dos páginas
     arrancan en la misma vertical. */
  width: 100%;
  margin: 0;
  /* Poco relleno arriba: es lo único que separa del borde al botón de
     volver, y con 56 px quedaba flotando en mitad de la foto. El título
     no se mueve, que va anclado abajo. */
  padding: clamp(1rem, 2.2vw, 1.6rem) clamp(1.4rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 2.6vw, 2.4rem);
  min-height: clamp(18rem, 42vh, 26rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cabezote .blog-volver {
  align-self: flex-start;
  margin-bottom: auto;
}

.cabezote-rotulo {
  margin: 0 0 .6rem;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(249, 250, 249, .75);
}

.cabezote-titulo {
  margin: 0;
  font-weight: var(--peso-heavy);
  font-size: clamp(2rem, 6vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--blanco);
}

.cabezote-bajada {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: clamp(.88rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: rgba(249, 250, 249, .85);
}

/* ─────────────────────────────────────────────────────────────
   Los botones de volver

   Los tres —el del índice del blog, el de una nota abierta y el
   de la ficha de una técnica— con el mismo aspecto. Antes cada
   uno iba por su lado y ninguno se notaba: el de la nota abierta
   era un enlace de texto sin recuadro, y el del cabezote un
   rectángulo translúcido que se confundía con la foto.
   ───────────────────────────────────────────────────────────── */
.blog-volver,
.nota-volver,
.ficha-volver {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  justify-self: start;
  padding: .7rem 1.25rem;
  /* Relleno del azul del manual y no un contorno: un botón macizo se ve
     de lejos, y sobre una foto es lo único que no depende de qué haya
     debajo. */
  border: 2px solid var(--azul-principal);
  border-radius: 0;
  background: var(--azul-principal);
  color: var(--blanco);
  font-weight: var(--peso-bold);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

/* Al pasar el cursor se invierte: blanco de fondo y azul la letra. El
   cambio es de los dos colores a la vez, así que se nota sin mirarlo. */
.blog-volver:hover,
.nota-volver:hover,
.ficha-volver:hover,
.blog-volver:focus-visible,
.nota-volver:focus-visible,
.ficha-volver:focus-visible {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--azul-principal);
}

/* Sobre la foto, el mismo botón con el borde blanco: lo despega del
   fondo cuando cae sobre un tramo oscuro de la imagen. El de la ficha
   de una técnica va siempre sobre la foto del encabezado. */
.ficha-volver,
.cabezote--con-foto .blog-volver {
  border-color: var(--blanco);
  background: var(--azul-principal);
  color: var(--blanco);
}

.ficha-volver:hover,
.ficha-volver:focus-visible,
.cabezote--con-foto .blog-volver:hover,
.cabezote--con-foto .blog-volver:focus-visible {
  background: var(--blanco);
  color: var(--azul-principal);
}

/* ─────────────────────────────────────────────────────────────
   BLOG — las portadas del índice

   Cada nota es una portada apaisada: la foto con su número a un
   lado y, al otro, lo que identifica una investigación. Una
   debajo de otra, no en mosaico: en columnas hay que cortar el
   título, y en un índice de investigaciones el título es lo que
   decide si alguien entra.
   ───────────────────────────────────────────────────────────── */
.cabezote-caja,
.investigaciones,
.investigacion-datos {
  text-align: left;
}

.investigaciones {
  list-style: none;
  /* Mismo margen izquierdo que el cabezote y que el bloque del home: el
     título de arriba y las portadas de abajo arrancan en la misma
     vertical. Antes iban centradas y cada una empezaba en su sitio. */
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.4rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem) clamp(1rem, 2.6vw, 2.4rem);
  width: 100%;
  /* Sin el tope de 76rem que hereda de .notas: capaba la lista en 1216 px
     de 1600 y las cinco columnas quedaban en 197 px cada una, apretadas
     contra el margen izquierdo con un cuarto del lienzo vacío a la
     derecha. Acá el ancho lo pone el lienzo y lo separa el relleno. */
  max-width: none;
  /* Mosaico de cinco columnas que baja: reparte el ancho de forma pareja
     y deja ver más del índice de un vistazo. Baja a tres en pantallas
     medianas y a una en el teléfono, donde cinco dejarían cada tarjeta
     en poco más de sesenta píxeles. */
  display: grid;
  /* Cinco por fila como máximo, pero repartiendo siempre el ancho entero
     entre las que haya: con repeat(5, 1fr) y tres notas cargadas
     quedaban dos huecos a la derecha y la fila se veía coja.
     El 15% es lo que deja entrar cinco y no seis: hay que contar los
     huecos de 32 px, que también consumen ancho. Con 18% entraban solo
     cuatro. */
  grid-template-columns: repeat(auto-fit, minmax(15%, 1fr));
  /* Estiradas, no alineadas arriba: así todas las de una fila miden lo
     mismo y el mosaico queda parejo. Con align-items:start cada tarjeta
     terminaba donde le alcanzaba su texto y la fila quedaba desigual. */
  align-items: stretch;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

/* La medida de lectura la pone la portada, no el contenedor: sin esto se
   estirarían de lado a lado en una pantalla ancha.

   OJO con el selector: .portada a secas es TAMBIÉN el primer panel del
   home —la sección de portada—. Sin acotarlo a la lista del blog, este
   ancho máximo se lo comía ese panel, que pasaba de 1600 a 992 px, y con
   él se descolocaba el cálculo de posiciones de todos los demás: en una
   pantalla ancha el home entero quedaba encajonado a la izquierda. */
.investigaciones > .investigacion {
  max-width: 62rem;
}

/* El <li> arrastraba relleno y márgenes de las reglas viejas del mosaico
   —la lista conserva la clase .notas porque es por donde blog.js la
   encuentra—, y la portada acababa 48 px más angosta que su hueco. */
.investigaciones > .investigacion {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.investigacion-tarjeta {
  display: grid;
  /* Foto arriba y datos debajo. La segunda fila se lleva lo que sobre
     —de ahí el 1fr—, así la tarjeta llena el alto de su fila del mosaico
     y el enlace de abajo queda a la misma altura en todas. Sin esto,
     cada una terminaba donde le alcanzaba su texto. */
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 1px solid var(--gris-claro);
  background: var(--blanco);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.investigacion-tarjeta:hover {
  border-color: var(--azul-principal);
  box-shadow: 0 18px 40px -26px rgba(12, 86, 120, .55);
  transform: translateY(-2px);
}

.investigacion-tarjeta:focus-visible {
  outline: 3px solid var(--azul-principal);
  outline-offset: 3px;
}

/* ── La foto ── */
.investigacion-foto {
  position: relative;
  display: block;
  /* Apaisada: en cinco columnas una foto alta empuja la tarjeta hacia
     abajo sin aportar nada. */
  aspect-ratio: 16 / 10;
  background: var(--gris-acento);
  overflow: hidden;
}

.investigacion-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.investigacion-tarjeta:hover .investigacion-foto img {
  transform: scale(1.04);
}

.investigacion-numero {
  position: absolute;
  top: 0;
  left: 0;
  padding: .35rem .65rem;
  background: var(--azul-principal);
  color: var(--blanco);
  font-weight: var(--peso-bold);
  font-size: .68rem;
  letter-spacing: .1em;
}

/* ── Los datos ── */
.investigacion-datos {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  /* Menos aire adentro: en columna angosta el margen se comía el ancho
     útil y empujaba el título a partirse. */
  padding: clamp(.9rem, 1.5vw, 1.4rem);
  min-width: 0;
}

.investigacion-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.investigacion-categoria {
  color: var(--azul-principal);
  font-weight: var(--peso-bold);
}

.investigacion-fecha {
  color: var(--gris-acento);
}

.investigacion-titulo {
  /* En bloque: como <span> en línea no partía, y el título se salía de su
     columna en vez de pasar al renglón siguiente. */
  display: block;
  font-weight: var(--peso-bold);
  /* Chico: en cinco columnas la tarjeta mide unos 290 px y con el
     tamano anterior el titulo ocupaba siete renglones. Es un índice, no
     una lectura: alcanza con que se lea de un vistazo. */
  font-size: clamp(.8rem, .85vw, .95rem);
  line-height: 1.2;
  color: var(--azul-principal);
  /* Sin recortes: el título entero, que es lo que decide si alguien
     entra a leer. */
  /* Sin partir palabras a la mitad: rompia "inspeccion" en dos
     renglones. Se guionan solo donde el idioma lo permite. */
  hyphens: auto;
}

.investigacion-bajada {
  /* A tres renglones: en cinco columnas la tarjeta es angosta y una
     bajada larga la estiraba hasta los 900 px de alto. El texto entero
     sigue estando en la nota. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(.72rem, .78vw, .85rem);
  line-height: 1.5;
  color: var(--gris-acento);
}

.investigacion-leer {
  margin-top: auto;
  padding-top: .6rem;
  font-weight: var(--peso-bold);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul-principal);
}

.investigacion-tarjeta:hover .investigacion-leer {
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* ── Tablet: baja a dos columnas ──
   A este ancho, tres dejan cada tarjeta en unos 220 px y el título se
   parte en tiras de dos palabras. */
@media (max-width: 900px) {
  .investigaciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .investigacion-foto {
    aspect-ratio: 16 / 10;
  }
}

/* ── Móvil: la foto arriba y los datos debajo ──
   A este ancho, dos columnas dejan el título en una tira de tres o
   cuatro palabras por renglón, que es ilegible. */
@media (max-width: 620px) {
  /* Una sola columna: dos dejan la tarjeta demasiado angosta. */
  .investigaciones {
    grid-template-columns: 1fr;
  }

  .investigacion-foto {
    aspect-ratio: 16 / 9;
  }

  .investigacion-datos {
    gap: .5rem;
  }

  .investigacion-leer {
    margin-top: .4rem;
  }
}

/* ── El bloque del blog en pantallas bajas ──
   Con 640 px de alto el contenido pedía 781 y la sección crecía por
   encima del lienzo: las tarjetas quedaban cortadas y el pie fuera de
   la pantalla. Se aprieta lo que se puede sin tocar el tamaño del
   titular, que es lo que sostiene la composición. */
@media (max-height: 820px) and (min-width: 761px) {
  /* Grande igual: el titular es lo que sostiene la composición y a 2,4rem
     quedaba del tamaño de un subtítulo. Lo que se aprieta para entrar en
     el lienzo son los márgenes, no el cuerpo de la letra. */
  .lienzo.inv .inv-titulo {
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    margin-bottom: .9rem;
  }

  .lienzo.inv .inv-texto {
    font-size: clamp(.9rem, 1.15vw, 1.15rem);
    margin-bottom: 1.4rem;
  }

  .lienzo.inv .inv-rotulo {
    font-size: clamp(.9rem, 1.15vw, 1.15rem);
    margin-bottom: .6rem;
  }

  /* Las cuatro en una fila. Con tres, la cuarta bajaba sola a un segundo
     renglón y la lista pasaba de 166 a 464 px de alto: era eso, y no el
     titular, lo que hacía que el bloque no entrara en el lienzo. En el
     home nunca hay más de cuatro. */
  .lienzo.inv .inv-lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Apaisadas: es lo que más alto libera. */
  .lienzo.inv .inv-entrada {
    aspect-ratio: 4 / 3;
  }

  .lienzo.inv .inv-cuerpo {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
}