/* catalogo.css — el indice de /herramientas/ y la cabecera de cada calculadora (P2, 2026-09-28).
 *
 * Este fichero NO declara tokens: `tokens.css` es su unico origen, y lo comprueba
 * `tests/web/test_herramientas.py::CatalogoCss`. Un token sin respaldo no da error, invalida
 * la declaracion entera, y la tarjeta se queda sin fondo, sin borde o sin tamano sin que nada lo
 * diga. Por eso aqui no hay ni un hex, ni un color con nombre, ni un `rgb()`.
 *
 * TODO lo que hay aqui cuelga de `.herramientas`, el contenedor que pone `seo._estatica` en las
 * nueve paginas de la familia. Ni un selector suelto: `/empresas/` usa las mismas clases de prosa
 * que estas paginas, y un `h1` global en esta hoja cambiaria el titulo de las mil cuatrocientas
 * notas. Lo que esta fuera de esa clase no existe para esta hoja.
 *
 * En tema oscuro la elevacion NO es una sombra (un negro sobre negro no se ve): es mas luz de
 * superficie, un `--ds-superficie-1` que sube a `--ds-superficie-2` al apuntar, mas un
 * `--ds-brillo-superior` en el canto. El alzado son dos pixeles hacia arriba, no mas: la tarjeta
 * esta en reposo el 95% del tiempo y un recorrido largo se lee como un juego, no como una interfaz.
 */

/* ——— el aire de la pagina ———
   El contenedor se abre por arriba con una seccion entera. Lo que hay entre la barra y el
   contenido no lo rellena ninguna caja: en tema oscuro, mas superficie cerca del borde hace que la
   pagina parezca una lista y no una portada de catalogo. */
.herramientas {
  max-width: var(--ds-ancho-max);
  margin-inline: auto;
  padding: var(--ds-seccion) var(--ds-esp-5) var(--ds-seccion);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

/* ——— los titulos ———
   El h1 de la cabecera es el unico display grande de la pagina: cerrado (`--tracking-display`)
   y con la linea a 1.02, como el de apple.com. Los `h2` de grupo bajan a `--ds-titulo-2`; los `h3`
   de las tarjetas son de cuerpo, porque el nombre de una calculadora no tiene que competir con el
   nombre del grupo. */
.herramientas h1 {
  margin: 0 0 var(--ds-esp-5);
  font: 600 var(--ds-display)/var(--ds-linea-display) var(--condensada);
  letter-spacing: var(--tracking-display);
  color: var(--hueso);
  text-wrap: balance;
}

.herramientas h2 {
  margin: 0 0 var(--ds-esp-2);
  font: 600 var(--ds-titulo-2)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-display);
  color: var(--hueso);
}

.herramientas h3 {
  margin: 0;
  font: 600 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-texto);
  color: var(--hueso);
}

.herramientas p {
  margin: 0;
  color: var(--hueso-2);
}

/* ——— el rotulo ———
   El micro-texto en versales que dice la materia o el tipo de pagina. Va ANTES del h1 (ver
   `_cabecera_herramienta`): es una orientacion, no un subtitulo, y en el orden de lectura es lo
   que el visitante necesita para saber si se ha equivocado de pagina. */
.herramientas .herramientas-rotulo {
  margin: 0 0 var(--ds-esp-3);
  color: var(--catodo);
  font: 600 var(--ds-rotulo)/1 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}


/* ——— las migas de pan ———
   Lo mas pequeno de la pagina y lo mas apagado: son una orientacion, no un contenido. El separador
   es el `::before` en vez de un caracter suelto en el texto, para que el lector de pantalla no lo
   lea y para que el hueco entre las dos migas lo ponga la caja, no los espacios del marcado. */
.herramientas .migas {
  margin: 0 0 var(--ds-esp-5);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.4 var(--prosa);
}

.herramientas .migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.herramientas .migas li + li::before {
  content: "/";
  margin-inline-end: var(--ds-esp-2);
  color: var(--bronce);
}

.herramientas .migas a {
  color: var(--hueso-3);
  text-decoration-color: var(--bronce);
  text-underline-offset: var(--ds-esp-1);
}

.herramientas .migas a:hover,
.herramientas .migas a:focus-visible {
  color: var(--hueso);
}

.herramientas .migas [aria-current='page'] {
  color: var(--hueso-2);
}

/* ——— la cabecera del indice ———
   `52ch` era una medida de SALTO: la entradilla se partia en tres lineas a 1200 px de ancho, que
   es donde una sola frase deberia leerse. El ancho util de la pagina es `--ds-ancho-max` y el
   bloque de texto se queda en la medida de lectura del sistema (68 ch): ni una linea mas ancha
   —que se lee con los ojos saltando de sitio— ni una mas corta —que se lee como un bloque
   partido—. La jerarquia la hace el TAMAÑO, no el ancho. */
.herramientas .catalogo-cab {
  margin: 0 0 var(--ds-esp-8);
}

.herramientas .catalogo-cab > p {
  max-width: var(--ancho-lectura);
}

.herramientas #catalogo-cuenta {
  margin-top: var(--ds-esp-3);
  color: var(--hueso-3);
  font: 400 var(--ds-pie)/1.4 var(--prosa);
  font-variant-numeric: tabular-nums;
}

/* ——— el buscador ———
   El campo nace `hidden` (el HTML) y `catalogo.js` se lo quita cuando sabe que ha cargado. El
   borde se enciende con `--ds-borde-activo` al recibir el foco, no con un contorno: el contorno
   separa el campo de la pagina y aqui lo que se quiere es que el campo parezca encendido. */
.herramientas .catalogo-busca {
  display: grid;
  gap: var(--ds-esp-2);
  max-width: 32rem;
  margin-top: var(--ds-esp-5);
}

.herramientas .catalogo-busca label {
  color: var(--hueso-3);
  font: 500 var(--ds-rotulo)/1.4 var(--condensada);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.herramientas #catalogo-buscar {
  min-height: 44px;
  padding: 0 var(--ds-esp-4);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
  color: var(--hueso);
  font: 400 var(--ds-cuerpo)/1.2 var(--prosa);
  transition: border-color var(--ds-t-media) var(--ds-curva),
              background-color var(--ds-t-media) var(--ds-curva);
}

.herramientas #catalogo-buscar::placeholder {
  color: var(--hueso-3);
}

.herramientas #catalogo-buscar:hover {
  border-color: var(--ds-borde-fuerte);
}

.herramientas #catalogo-buscar:focus-visible {
  border-color: var(--ds-borde-activo);
  background: var(--ds-superficie-2);
}

/* ——— los grupos ———
   Un grupo por materia, con la separacion entre ellos en AIR y no en una linea: un filete
   horizontal entre «Ahorro» e «Inversión» parte el indice en dos listas y hace que se lea como un
   indice de dos paginas. La separacion la pone el `margin` del grupo, que es `--ds-esp-9`. */
.herramientas .catalogo-grupo {
  margin: 0 0 var(--ds-esp-9);
}

.herramientas .catalogo-grupo:last-of-type {
  margin-bottom: 0;
}

/* La frase de grupo es prosa leida, y se mide con la medida del sistema (`--ancho-lectura`): a
   60 ch se partia en dos lineas de las que la segunda llevaba cuatro palabras, que es la forma mas
   rapida de perder un final de frase. Con 68 ch cabe en una o en dos enteras, y el aire de abajo
   la separa de las tarjetas que viene a explicar. */
.herramientas .catalogo-frase {
  max-width: var(--ancho-lectura);
  margin: 0 0 var(--ds-esp-5);
  color: var(--hueso-3);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
  text-wrap: pretty;
}

/* ——— la rejilla de tarjetas ———
   `auto-fill` con `minmax(min(100%, 17rem), 1fr)`: en el telefono UNA columna, en el escritorio las
   que quepan, sin decidirlo en un `@media`. El `min(100%, …)` es lo que evita el scroll horizontal
   en pantallas estrechas: sin el, el ancho minimo de la columna empuja la pagina hacia los lados
   y el visitante ve la pagina desplazada de lado al entrar. */
.herramientas .catalogo-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--ds-esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.herramientas .catalogo-rejilla--mini {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* ——— la tarjeta ———
   Superficie 1, filete, radio grande, brillo en el canto. Sin sombra: en nogal sobre nogal la
   sombra no se ve, y la unica sombra posible (negro puro) lo que hace es recorte. Lo que separa
   la tarjeta del fondo es un punto mas de crema. */
.herramientas .catalogo-tarjeta {
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-l);
  background: var(--ds-superficie-1);
  box-shadow: var(--ds-brillo-superior);
  transition: background-color var(--ds-t-media) var(--ds-curva),
              border-color var(--ds-t-media) var(--ds-curva),
              transform var(--ds-t-media) var(--ds-curva);
}

.herramientas .catalogo-tarjeta > a {
  display: grid;
  gap: var(--ds-esp-3);
  align-content: start;
  height: 100%;
  padding: var(--ds-esp-5);
  color: var(--hueso);
  text-decoration: none;
}

/* El alzado va en `:hover` Y en `:focus-within` de la tarjeta, no solo del enlace: el foco llega
   al `<a>` y la caja que sube es la que lo rodea, y asi el teclado ve el mismo recorrido que el
   raton. Dos pixeles, con `--ds-alzado`, que es un token y no una medida escrita aqui. */
.herramientas .catalogo-tarjeta:hover,
.herramientas .catalogo-tarjeta:focus-within {
  border-color: var(--ds-borde-activo);
  background: var(--ds-superficie-2);
  transform: translateY(var(--ds-alzado));
}

.herramientas .catalogo-tarjeta p {
  color: var(--hueso-2);
  font: 400 var(--ds-pie)/1.5 var(--prosa);
}

/* ——— la baldosa del icono ———
   Cuadrada, con el radio corto y en oro. El `--ds-superficie-3` es un escalon mas claro que el
   fondo de la tarjeta: el dibujo se separa de la caja sin necesitar un borde. */
.herramientas .catalogo-icono {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radio-s);
  background: var(--ds-superficie-3);
  color: var(--oro);
}

.herramientas .catalogo-icono svg {
  width: 22px;
  height: 22px;
}

/* ——— la flecha ———
   Se travels 4px a la derecha al apuntar la tarjeta: dice «esto se abre» sin texto, y el
   `aria-hidden` del HTML evita que el lector de pantalla anuncie «flecha» entre el titulo y la
   descripcion de cada tarjeta. */
.herramientas .catalogo-flecha {
  color: var(--hueso-3);
  font: 400 var(--ds-cuerpo)/1 var(--prosa);
  transition: transform var(--ds-t-media) var(--ds-curva);
}

.herramientas .catalogo-tarjeta:hover .catalogo-flecha,
.herramientas .catalogo-tarjeta:focus-within .catalogo-flecha {
  transform: translateX(var(--ds-esp-1));
  color: var(--catodo);
}

/* La version corta de las «calculadoras relacionadas» es la misma tarjeta con menos aire: ahi el
   visitante esta leyendo una ficha larga y las otras son una referencia al pie, no el catalogo. */
.herramientas .catalogo-tarjeta[data-mini='true'] > a {
  gap: var(--ds-esp-2);
  padding: var(--ds-esp-4);
}

.herramientas .catalogo-tarjeta[data-mini='true'] .catalogo-icono {
  width: 32px;
  height: 32px;
}

/* ——— el indice con la letra de la portada (P9, hallazgo 1) ———
   El escaparate de las calculadoras estuvo dentro del chat de Elisa hasta la auditoria del 28-sep:
   cuatro tarjetas con `data-seccion="chat"`, que se veian en TODAS las paginas y empujaban la
   conversacion. Se ha ido al sitio que le toca —/herramientas/, que ya existed— y ha vestido las
   cartas de aqui con la tarjeta que tenia alli, para que el indice deje de ser un indice de texto
   pelado. Su letra, con su aire, se mide en `tests/web/test_portada_herramientas.py`.

   El selector es `.herramientas#herramientas-indice` y NO `.herramientas #herramientas-indice`:
   clase e id estan en el MISMO `<div>` (lo escribe `seo.hornea_herramientas`), y un espacio en
   medio buscaria un hijo que no existe. Ademas, colgarlo del id es lo que deja las ocho fichas
   —`#herramientas-pagina`— con su tarjeta corta de «relacionadas», que es otra cosa. */
.herramientas#herramientas-indice .catalogo-rejilla {
  /* Una columna en el telefono. `minmax(0, 1fr)` y no `1fr` a pelo: un `1fr` a pelo dentro de una
     rejilla con texto largo es la causa clasica de scroll horizontal a 390 px, y eso no lo ve
     nadie hasta que alguien abre la pagina en un telefono. */
  grid-template-columns: minmax(0, 1fr);
}

.herramientas#herramientas-indice .catalogo-tarjeta > a {
  /* El aire de la portada (`--ds-esp-5`): el hueco que hace que una tarjeta se lea como una pieza
     y no como un texto con borde. */
  gap: var(--ds-esp-3);
  padding: var(--ds-esp-5);
}

.herramientas#herramientas-indice .catalogo-tarjeta h3 {
  /* El nombre es un titulo de segundo nivel DENTRO de la carta: compite con la frase de al lado,
     no con el h1 de la pagina ni con el rotulo del grupo. */
  font: 500 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-texto);
  text-wrap: balance;
}

.herramientas#herramientas-indice .catalogo-tarjeta p {
  /* La descripcion es prosa leida, no un pie: cuerpo entero, la fuente de lectura y el crema
     apagado. Es la frase que se leia en la portada, al tamano que se leia alli. */
  color: var(--hueso-2);
  font: 400 var(--ds-cuerpo)/var(--ds-linea-cuerpo) var(--prosa);
}

.herramientas#herramientas-indice .catalogo-icono {
  /* La baldosa de la portada: 40 px, CUADRADA, con el filete y en el oro de la moneda de marca.
     Aqui ya la habia de 40 px y en oro, pero sin el filete, y el dibujo se separaba de la caja
     solo por el escalon de superficie: con el filete es la misma pieza que se veia antes. */
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-s);
  color: var(--oro);
}

.herramientas#herramientas-indice .catalogo-tarjeta:hover,
.herramientas#herramientas-indice .catalogo-tarjeta:focus-within {
  /* El alzado de la portada, en los dos estados: superficie-2 en vez de una sombra (negro sobre
     negro no se ve), el borde encendido y dos pixeles hacia arriba. La tarjeta esta en reposo el
     95% del tiempo: un recorrido largo se lee como un juego, no como una interfaz. */
  border-color: var(--ds-borde-activo);
  background: var(--ds-superficie-2);
  transform: translateY(var(--ds-alzado));
}

/* ——— dos columnas desde donde caben dos ———
   600px es el mismo corte que usa el resto del mundo para el menu de secciones: por debajo de ahi
   una tarjeta de la mitad son 170px utiles, y un texto de 170px son seis lineas por dato. */
@media (min-width: 600px) {
  .herramientas#herramientas-indice .catalogo-rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ——— cuatro columnas en escritorio ———
   1100px, y no antes: por debajo, cuatro tarjetas estrechas con un nombre de tres palabras ya no
   caben, y el nombre partido en dos lineas empuja la frase fuera de la carta. El ancho util por
   columna sale en torno a 265px, que es lo que pide un titulo de --ds-titulo-3. */
@media (min-width: 1100px) {
  .herramientas#herramientas-indice .catalogo-rejilla {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ——— el foco ———
   `:focus-visible` y no `:focus`: con `outline: none` + `:focus` el contorno tambien aparece al
   pinchar con el raton, y en una rejilla de ocho tarjetas eso es un recuadro fantasma en la carta
   que el visitante acaba de tocar. Aqui el foco sale con el teclado, que es cuando hace falta. */
.herramientas :focus-visible {
  outline: 2px solid var(--catodo);
  outline-offset: 3px;
  border-radius: var(--ds-radio-s);
}

/* ——— la valvula del movimiento ———
   Reduce el movimiento, no el contenido: la tarjeta sigue encendiendo al apuntarla y la flecha
   sigue moviendose, lo que se apaga es el travel. Sin este bloque, quien tiene
   `prefers-reduced-motion` ve ocho tarjetas que saltan dos pixeles en cada paso del raton, y eso
   no es decoracion para quien ha pedido que el sitio no se mueva. */
@media (prefers-reduced-motion: reduce) {
  .herramientas *,
  .herramientas *::before,
  .herramientas *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}