/*
  Componentes reutilizables. Cada uno corresponde a una decisión de
  docs/03-sistema-diseno.md o docs/04-figuras.md — no hay componentes
  "porque hacían falta", están todos justificados en esos documentos.
*/

/* ---- cabecera ---- */

.cabecera {
  padding-block: var(--space-4);
}

.marca {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--size-body-l);
  text-decoration: none;
  color: var(--color-tinta);
  letter-spacing: 0.01em;
}

.marca:hover {
  color: var(--color-naranja-texto);
}

/* fila del header cuando lleva, además de la marca, el descargable del PDF
   (hoy solo en Home — C1/P7 de docs/08-plan-devolucion-cliente.md) */
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.descarga-pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-tinta);
  text-decoration: none;
  border: 2px solid var(--color-tinta);
  border-radius: 2px;
  padding: var(--space-2) var(--space-3);
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.descarga-pdf:hover,
.descarga-pdf:focus-visible {
  color: var(--color-tinta);
  border-color: var(--color-tinta);
  background: var(--color-naranja);
}

/* en mobile el botón quedaba con el mismo padding que en escritorio y quedaba
   más grande que la marca del header — se achica el marco, no la letra
   (--size-label ya es el token de texto más chico del sistema). */
@media (max-width: 37.4375em) {
  .descarga-pdf {
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
  }
}

/* ---- el sello (elemento firma, docs/03-sistema-diseno.md) ---- */

.sello {
  display: inline-block;
  font-family: var(--font-stencil);
  text-transform: uppercase;
  font-size: var(--size-body-s);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-tinta);
  border: 3px solid var(--color-naranja);
  /* radio en unidades fijas, no en %: un radio en % se recalcula sobre el
     ancho/alto de la caja, así que en una caja muy ancha y baja (una frase
     larga en una sola línea) o que pasa a dos líneas, la curva se cierra de
     golpe y pisa el texto de las puntas. En px el radio no se deforma con
     el contenido — el navegador ya lo recorta solo si la caja es más chica
     que el radio, así que a los sellos cortos (CONFIRMADO) les sigue
     quedando bien ovalado. */
  border-radius: 2.2rem 1.7rem 2rem 2.4rem / 1.3rem 1.6rem 1.1rem 1.4rem;
  padding: var(--space-4) var(--space-5);
  transform: rotate(-3deg);
  margin: 0 0 var(--space-5);
  max-width: 30rem;
}

/* Con un solo acento en la paleta, el sello vacío (aviso, "Recordá:") y el
   sello lleno (veredicto, "Confirmado" / "Es tu derecho") ya no se separan
   por matiz sino por relleno: el veredicto viene estampado, con el naranja
   pleno atrás y la tinta encima (9:1). Es la misma diferencia que hace el
   impreso entre un recuadro al margen y una palabra sellada. */
.sello--relleno {
  background: var(--color-naranja);
  border-color: var(--color-tinta);
  color: var(--color-tinta);
}

/* ---- hero de portada ---- */

.hero {
  padding-block: var(--space-7) var(--space-8);
}

/* título + sello de tapa del impreso (fuente/sello.svg): funcionan como una
   sola unidad, el sello siempre arriba a la derecha del título — por eso es
   un flex del propio h1, no un elemento suelto en el header, así se
   mantienen pegados en cualquier ancho en vez de terminar en puntas
   opuestas de la pantalla. */
.hero__titulo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

/* el sello lleva cinco renglones de texto adentro: por debajo de ~10rem la
   bajada deja de leerse y queda como una mancha. En el impreso ocupa cerca de
   un quinto del ancho de tapa, así que acá también pesa. */
.hero__sello {
  flex-shrink: 0;
  height: 11rem;
  width: auto;
}

@media (max-width: 37.4375em) {
  .hero__sello {
    height: 7.5rem;
  }
}

.hero__bajada {
  font-family: var(--font-texto);
  font-style: italic;
  color: var(--color-gris);
  margin-bottom: var(--space-6);
}

/* ---- accesos principales (tres tarjetas de entrada) ---- */

.accesos {
  padding-block: var(--space-6) var(--space-8);
}

.accesos__etiqueta {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-gris);
}

.accesos__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 37.5em) {
  .accesos__grilla {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.tarjeta-acceso {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 3px solid var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-5);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.tarjeta-acceso:hover,
.tarjeta-acceso:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-acceso:hover,
  .tarjeta-acceso:focus-visible {
    transform: none;
  }
}

.tarjeta-acceso__titulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--size-display-m);
  line-height: 1.05;
}

.tarjeta-acceso__bajada {
  font-family: var(--font-texto);
  font-size: var(--size-body-s);
  color: var(--color-gris);
}

/* firmas al pie de la tarjeta del informe: MATE + Caren Tepp, la elaboración
   conjunta. Van como pieza institucional (igual criterio que los logos del
   pie), no como parte del texto — de ahí el separador arriba. */
.tarjeta-acceso__firmas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gris-suave);
}

.tarjeta-acceso__firmas img {
  height: 2.25rem;
  width: auto;
}

/* Las cuatro tarjetas de acceso de Home ya no se distinguen por matiz (la
   paleta tiene un solo acento) sino por SUPERFICIE, que es como separa
   bloques el impreso: naranja pleno / gris de afiche con grano / papel con
   marco / tinta plena. Cuatro materiales distintos, un solo color. */

.tarjeta-acceso--naranja {
  background: var(--color-naranja);
  border-color: var(--color-tinta);
}

.tarjeta-acceso--naranja:hover,
.tarjeta-acceso--naranja:focus-visible {
  background: color-mix(in srgb, var(--color-tinta) 8%, var(--color-naranja));
}

.tarjeta-acceso--naranja .tarjeta-acceso__bajada {
  color: var(--color-tinta);
}

.tarjeta-acceso--gris {
  background-color: var(--color-gris-afiche);
  background-image: var(--trama-grano);
  border-color: var(--color-tinta);
}

.tarjeta-acceso--gris:hover,
.tarjeta-acceso--gris:focus-visible {
  background-color: color-mix(in srgb, var(--color-tinta) 8%, var(--color-gris-afiche));
}

.tarjeta-acceso--gris .tarjeta-acceso__bajada {
  color: var(--color-tinta);
}

.tarjeta-acceso--papel:hover,
.tarjeta-acceso--papel:focus-visible {
  background: var(--color-gris-suave);
}

.tarjeta-acceso--tinta {
  background: var(--color-tinta);
  border-color: var(--color-tinta);
  color: var(--color-papel);
}

.tarjeta-acceso--tinta:hover,
.tarjeta-acceso--tinta:focus-visible {
  background: color-mix(in srgb, var(--color-naranja) 18%, var(--color-tinta));
}

.tarjeta-acceso--tinta .tarjeta-acceso__titulo {
  color: var(--color-naranja);
}

.tarjeta-acceso--tinta .tarjeta-acceso__bajada {
  color: var(--color-papel);
}

/* la misma tarjeta de acceso de Home, pero suelta en medio de un párrafo de
   página interior en vez de una celda de .accesos__grilla — le hace falta
   su propio margen vertical, que ahí le daba el gap de la grilla. Se usa en
   Home para la card "¿Por qué un manual de autodefensa financiera?" y en
   /la-maquina para el link al informe completo del MATE — la misma tarjeta
   que ya usa Home para sus accesos principales es, literalmente, el
   componente que el sistema tiene para "esto es un lugar al que ir", así
   que reutilizarla acá es más coherente que inventar una variante nueva. */
.tarjeta-acceso--suelta {
  margin: var(--space-6) 0;
}

/* ---- franja de contacto persistente (docs/02-arquitectura.md, punto 7) ---- */

.franja-contacto {
  background: var(--color-tinta);
  color: var(--color-papel);
  padding-block: var(--space-4);
}

.franja-contacto__texto {
  margin: 0;
  max-width: none;
  font-size: var(--size-body-s);
}

/* sobre fondo Tinta el naranja se invierte: acá va el pleno (9:1 contra la
   tinta), no --color-naranja-texto, que sobre oscuro queda casi ilegible. */
.franja-contacto a {
  color: var(--color-papel);
  font-weight: bold;
  text-decoration-color: var(--color-naranja);
  text-decoration-thickness: 2px;
}

/* variante fija: en /que-hacer tiene que estar visible siempre, no solo al
   final de la página (Fase 2, punto 7: "es donde está el lector en el
   momento de mayor angustia"). El body de esas páginas suma la clase
   .con-franja-fija para no perder el último tramo de contenido debajo. */
.franja-contacto--fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  box-shadow: 0 -2px 8px rgb(0 0 0 / 15%);
}

body.con-franja-fija {
  padding-bottom: 4.5rem;
}

@media (max-width: 37.4375em) {
  body.con-franja-fija {
    padding-bottom: 6rem; /* el texto puede envolver a dos líneas en 360px */
  }
}

/* ---- hero de página interior (más chico que el de la home) ---- */

.hero--pagina {
  padding-block: var(--space-6) var(--space-6);
}

/* ---- tarjetas de "momento" (línea de tiempo de escalada, Fase 2 §4.2) ---- */

.momentos {
  padding-block: var(--space-6) var(--space-7);
}

.momentos__etiqueta {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-gris);
}

.momentos__grilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 37.5em) {
  .momentos__grilla {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.tarjeta-momento {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-tinta);
  background: var(--color-naranja);
  border: 3px solid var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-5);
  transition: transform 0.12s ease, background 0.12s ease;
}

.tarjeta-momento:hover,
.tarjeta-momento:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--color-tinta) 10%, var(--color-naranja));
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-momento:hover,
  .tarjeta-momento:focus-visible {
    transform: none;
  }
}

.tarjeta-momento__etiqueta {
  color: var(--color-tinta);
}

.tarjeta-momento__titulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--size-display-m);
  line-height: 1.05;
}

.tarjeta-momento__bajada {
  font-family: var(--font-texto);
  font-size: var(--size-body-s);
  color: var(--color-tinta);
}

/* ---- referencia siempre disponible (Fase 2 §4.1, §4.3, §4.4) ---- */

.referencia {
  padding-block: var(--space-6) var(--space-7);
}

.referencia__etiqueta {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-gris);
}

.referencia__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 37.5em) {
  .referencia__lista {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.referencia__lista a {
  display: block;
  text-decoration: none;
  color: var(--color-tinta);
  border: 2px solid var(--color-gris);
  border-radius: 4px;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-texto);
  font-size: var(--size-body-s);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.referencia__lista a:hover,
.referencia__lista a:focus-visible {
  border-color: var(--color-tinta);
  background: var(--color-gris-suave);
}

/* ---- mitos/realidades como acordeón (docs/04-figuras.md, fig-mitos-realidades) ----
   Base en <details>/<summary> nativos: sin JS, las 7 preguntas son igual de
   accesibles (se pueden abrir con teclado o lector de pantalla). JS no hace
   falta ni siquiera para el efecto del sello: es una animación CSS disparada
   por el atributo [open], que además ya respeta prefers-reduced-motion por
   la regla general de base.css. */

.mitos {
  padding-block: var(--space-7) var(--space-8);
}

.mitos__etiqueta {
  display: block;
  margin-bottom: var(--space-2);
}

.mitos__intro {
  color: var(--color-gris);
  margin-bottom: var(--space-5);
}

.mitos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-gris);
}

.mito {
  border-bottom: 1px solid var(--color-gris);
}

.mito > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  list-style: none;
  cursor: pointer;
  padding-block: var(--space-4);
}

.mito > summary::-webkit-details-marker {
  display: none;
}

.mito > summary::marker {
  content: "";
}

.mito__etiqueta {
  flex: 0 0 auto;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-tinta);
  border: 2px solid var(--color-naranja);
  border-radius: 3px;
  padding: 0.05em 0.5em;
}

.mito__pregunta {
  flex: 1 1 auto;
  font-family: var(--font-texto);
  font-size: var(--size-body-l);
}

.mito__indicador {
  flex: 0 0 auto;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-l);
  color: var(--color-gris);
}

.mito[open] .mito__indicador::before {
  content: "\2212"; /* − */
}

.mito:not([open]) .mito__indicador::before {
  content: "+";
}

.mito__respuesta {
  padding-bottom: var(--space-5);
}

.mito__respuesta .sello {
  margin-bottom: var(--space-3);
  animation: sello-entra 0.18s ease-out;
}

@keyframes sello-entra {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(-3deg);
  }
}

.mito__texto {
  margin-bottom: var(--space-3);
}

.mito__link {
  display: inline-block;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-tinta);
  text-decoration-color: var(--color-naranja-texto);
  text-decoration-thickness: 2px;
}

/* link suelto DENTRO de una oración corrida (no al final de un párrafo como
   llamado a la acción): tiene que fluir como texto, nunca como bloque —
   con inline-block, un punto pegado justo después del link puede quedar
   solo en el renglón siguiente si el link llena el ancho disponible. */
.enlace-en-texto {
  color: var(--color-tinta);
  text-decoration-color: var(--color-naranja-texto);
  text-decoration-thickness: 2px;
}

.enlace-en-texto:hover,
.enlace-en-texto:focus-visible {
  color: var(--color-naranja-texto);
}

.mito__link:hover,
.mito__link:focus-visible {
  color: var(--color-naranja-texto);
}

/* "Seguir leyendo: ...→" — el hilo que encadena las páginas del manual
   (por-que-autodefensa → la-maquina → el-impacto-de-la-deuda → organizarse):
   antes reutilizaba .mito__link y quedaba chico, casi invisible al final de
   un párrafo largo. Es una invitación a seguir, no una nota al pie: letra
   más grande y más pesada, con el subrayado en naranja para que la
   vista lo encuentre. */
.seguir-leyendo {
  display: inline-block;
  font-family: var(--font-utilidad);
  font-weight: 700;
  font-size: var(--size-body);
  color: var(--color-tinta);
  text-decoration-color: var(--color-naranja);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.2em;
}

.seguir-leyendo:hover,
.seguir-leyendo:focus-visible {
  color: var(--color-naranja);
}

/* ---- fig-resaltado: frases marcadas como en el impreso (manual_final.pdf) ----
   En el papel es un rectángulo de resaltador con un borde irregular (fuente/
   resaltado.svg, fuente/ejemplo_resaltado.png). Ese trazo fijo no se puede
   calcar tal cual: acá el texto resaltado es prosa corrida que se reparte en
   renglones distintos según el ancho de pantalla (hasta 360px), así que un
   único rectángulo con un borde recortado se rompería en cualquier ancho que
   no sea el del diseño original. <mark> ya es la etiqueta semántica correcta
   ("texto marcado por su relevancia") y funciona sin CSS. box-decoration-break
   le da a cada renglón partido su propio bloque de fondo con las mismas
   esquinas, en vez de un único rectángulo aplastado en el salto de línea. */
/* El resaltado del impreso no es un rectángulo parejo de marcador: cada
   pasada arranca rayada y se vuelve sólida, como un fibrón que todavía no
   apoyó del todo (fuente/resaltado.svg y resaltado2.svg). Acá se arma con
   dos capas de fondo —la trama diagonal en el naranja pleno sobre el tono
   marcador— y box-decoration-break: clone hace que cada línea de una frase
   larga tenga su propia entrada rayada, igual que en resaltado2.svg. */
.resaltado {
  background-color: var(--color-naranja-marcador);
  background-image: var(--trama-diagonal);
  background-size: 1.6em 100%;
  background-repeat: no-repeat;
  padding: 0.05em 0.2em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* La pieza que acompaña al resaltado en el impreso: la barra de rayado
   diagonal al costado del bloque marcado (fuente/cita.svg, y el ejemplo
   armado en fuente/ejemplo_resaltado.png). El marcador solo pinta el
   renglón; la barra dice "este bloque entero está marcado". Va dentro de
   la caja del párrafo, no afuera, para no desbordar a 360px. */
.parrafo-resaltado {
  position: relative;
  padding-right: var(--space-4);
}

/* la posición y el alto los pone js/resaltado.js: la barra cubre del primer
   al último renglón marcado, no el párrafo entero. Sin JS no aparece (el
   resaltado en sí es CSS puro y no depende de esto). */
.resaltado__trama {
  position: absolute;
  right: 0;
  width: 10px;
  background-image: var(--trama-diagonal);
  border-radius: 1px;
  pointer-events: none;
}

/* ---- superficies de afiche ----
   El gris texturado del impreso (páginas 2-3, 7 y 16): una superficie con
   peso, no una línea. Se usa para bloques que en el impreso ocupan página
   entera —una afirmación sola, un índice— y se lee por área y por grano,
   no por borde. Encima va tinta, nunca gris (ahí queda en 3.8:1). */
.panel-afiche {
  background-color: var(--color-gris-afiche);
  background-image: var(--trama-grano);
  color: var(--color-tinta);
  padding: var(--space-6) 0;
  margin-block: var(--space-7);
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* trama de puntos: la sombra de medio tono con la que el impreso apoya los
   engranajes y las piezas 3D. Va como fondo de una capa decorativa, nunca
   debajo de texto. */
.trama-puntos {
  background-image: var(--trama-puntos);
  background-size: var(--trama-puntos-medida);
}

/* ---- volver al hub, desde cualquier página interior de /que-hacer ---- */

.volver {
  display: inline-block;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-gris);
  text-decoration: none;
  margin-top: var(--space-4);
}

.volver:hover,
.volver:focus-visible {
  color: var(--color-tinta);
}

/* ---- mapa mini de los tres momentos (Fase 2 §4.2: "no un capítulo
   siguiente/anterior", un mapa fijo para saltar sin releer) ---- */

.mapa-momentos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-gris);
  margin-bottom: var(--space-6);
}

.mapa-momentos a {
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  text-decoration: none;
  color: var(--color-gris);
  border: 1.5px solid var(--color-gris);
  border-radius: 3px;
  padding: var(--space-1) var(--space-3);
}

.mapa-momentos a:hover,
.mapa-momentos a:focus-visible {
  color: var(--color-tinta);
  border-color: var(--color-tinta);
}

.mapa-momentos a[aria-current="page"] {
  color: var(--color-naranja-texto);
  border-color: var(--color-naranja-texto);
  font-weight: bold;
}

/* ---- listas sí/no (quién-te-reclama, checklist de cobro extrajudicial) ---- */

.checklist {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--space-2);
}

.checklist__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-gris);
  font-family: var(--font-texto);
}

.checklist__marca {
  flex: 0 0 auto;
  font-family: var(--font-utilidad);
  font-weight: bold;
}

/* Sí y no ya no se separan por rojo/verde —que además era el par de color
   más frágil para daltonismo, y el único lugar del sistema que se leía como
   semáforo genérico. Ahora se separan por superficie y por marca: lo que hay
   que hacer viene en naranja (el color con el que el impreso afirma), lo que
   no hay que hacer viene en gris de afiche, y en las dos listas la marca ✕/✓
   —o la pieza ilustrada NO/SÍ del impreso, ver .checklist--ilustrado— dice
   lo mismo sin depender del color. */
.checklist__item--si {
  border-color: var(--color-tinta);
  background: var(--color-naranja);
}

.checklist__item--si .checklist__marca {
  color: var(--color-tinta);
}

.checklist__item--no {
  border-color: var(--color-tinta);
  background-color: var(--color-gris-afiche);
  background-image: var(--trama-grano);
}

.checklist__item--no .checklist__marca {
  color: var(--color-tinta);
}

/* variante con las ilustraciones del impreso (fuente/no.svg, fuente/si.svg)
   en vez del glifo ✕/✓ — se agranda un poco el punto entero para que la
   pieza ilustrada se reconozca (te-estan-llamando, "A tener en cuenta").
   Modificador aparte para no afectar el .checklist de quien-te-reclama,
   que sigue usando el glifo de texto. */
.checklist--ilustrado .checklist__item {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--size-body);
}

.checklist__icono {
  flex: 0 0 auto;
  height: 3rem;
  width: auto;
}

.checklist__titulo {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--size-display-m);
  margin: var(--space-6) 0 var(--space-3);
}

/* ---- advertencia / cita destacada (pull-quote con dato concreto) ---- */

.advertencia {
  border-left: 4px solid var(--color-tinta);
  background: var(--color-naranja);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  max-width: var(--ancho-lectura);
}

.advertencia p {
  max-width: none;
  margin: 0;
}

.advertencia strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  display: block;
  font-size: var(--size-body-l);
  color: var(--color-tinta);
  margin-bottom: var(--space-2);
}

/* ---- grilla de derechos (fig-derechos-grid) ---- */

.grilla-derechos {
  list-style: none;
  margin: var(--space-5) 0 var(--space-7);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 37.5em) {
  .grilla-derechos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* naranja pleno de fondo (docs/03-sistema-diseno.md): el mismo tratamiento
   que el hero de Home y los demás paneles del sistema, con Tinta encima. */
.grilla-derechos li {
  background: var(--color-naranja);
  border: 2px solid var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-4);
  font-size: var(--size-body-s);
}

/* 4 de los 9 derechos tienen ilustración propia del manual impreso (M4 de
   docs/08-plan-devolucion-cliente.md, fuente/derechos/) — piezas 3D en
   negro/naranja/blanco diseñadas para fondo blanco. Sobre el naranja pleno
   de la tarjeta el relleno naranja de la pieza desaparecería, así que van
   en un recuadro de papel, como una calcomanía pegada sobre la tarjeta. */
.derecho__ilustracion {
  height: 4.5rem;
  width: auto;
  display: block;
  margin-bottom: var(--space-3);
  background: var(--color-papel);
  border-radius: 3px;
  padding: var(--space-2);
  box-sizing: content-box;
}

.grilla-derechos li::before {
  content: "→";
  display: block;
  color: var(--color-tinta);
  font-family: var(--font-utilidad);
  font-weight: bold;
  margin-bottom: var(--space-2);
}

/* ---- tarjetas de herramienta externa (Veraz, BCRA, calculadora) ---- */

.tarjeta-herramienta {
  border: 2px solid var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  max-width: none;
}

.tarjeta-herramienta h3 {
  margin-bottom: var(--space-3);
}

.tarjeta-herramienta__boton {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  text-decoration: none;
  color: var(--color-tinta);
  border: 2px solid var(--color-tinta);
  border-radius: 3px;
  padding: var(--space-2) var(--space-4);
  transition: background 0.12s ease, color 0.12s ease;
}

.tarjeta-herramienta__boton:hover,
.tarjeta-herramienta__boton:focus-visible {
  background: var(--color-tinta);
  color: var(--color-papel);
}

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

/* ---- fundamentos legales ---- */

.fundamento-legal {
  border-top: 1px solid var(--color-gris);
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fundamento-legal:last-child {
  border-bottom: 1px solid var(--color-gris);
}

.fundamento-legal__cita {
  font-family: var(--font-utilidad);
  font-size: var(--size-legal);
  color: var(--color-naranja-texto);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* dentro de la tarjeta, el ritmo lo da el gap del flex column, no el
     margen propio de .sello (que está pensado para uso suelto en el texto) */
  margin-bottom: 0;
  /* .sello es inline-block, pero el padre flex-column lo estira (stretch
     por defecto) a todo el ancho de la tarjeta — eso deforma el óvalo hasta
     tapar el título de abajo. Lo anclamos a su ancho natural. */
  align-self: flex-start;
}

.fundamento-legal .checklist__titulo {
  margin-top: 0;
}

/* ---- formulario (frenar-un-debito: la carta se genera, no se muestra como imagen) ---- */

.formulario {
  margin-block: var(--space-5) var(--space-6);
  max-width: var(--ancho-lectura);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 37.5em) {
  .formulario {
    grid-template-columns: 1fr 1fr;
  }
}

.formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* un ítem de grid no se achica por debajo del ancho mínimo natural de su
     contenido a menos que se lo digas explícitamente — un <input> sin esto
     fuerza su columna a un mínimo de ~170-200px del navegador aunque el
     grid tenga menos espacio real, y eso es lo que rompía el responsive
     (desborde horizontal en anchos angostos con dos columnas). */
  min-width: 0;
}

/* nombre y servicio ocupan las dos columnas; dni/cuenta/cbu/teléfono van de a
   dos por fila — que se note que esto es un formulario, no una lista */
.formulario__campo--completo {
  grid-column: 1 / -1;
}

.formulario__campo label {
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gris);
}

.formulario__campo input {
  width: 100%;
  min-width: 0;
  font-family: var(--font-texto);
  font-size: var(--size-body);
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 2px solid var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-3) var(--space-4);
}

.formulario__campo input::placeholder {
  color: var(--color-gris);
}

.formulario__campo input:focus-visible {
  border-color: var(--color-naranja-texto);
}

.carta {
  margin-top: var(--space-6);
}

.carta label {
  display: block;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gris);
  margin-bottom: var(--space-2);
}

.carta textarea {
  width: 100%;
  min-height: 20rem;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  line-height: 1.6;
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 2px solid var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-4);
  resize: vertical;
}

.carta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.carta__boton {
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  border: 2px solid var(--color-tinta);
  border-radius: 3px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-tinta);
  color: var(--color-papel);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.carta__boton--secundario {
  background: transparent;
  color: var(--color-tinta);
}

.carta__boton:hover,
.carta__boton:focus-visible {
  background: var(--color-naranja-texto);
  border-color: var(--color-naranja-texto);
  color: var(--color-papel);
}

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

.carta__estado {
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-naranja-texto);
  margin-top: var(--space-2);
}

/* ---- pie ---- */

.pie {
  padding-block: var(--space-6);
  color: var(--color-gris);
  font-size: var(--size-body-s);
}

.pie__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.pie__logos img {
  height: 1.75rem;
  width: auto;
}

.pie a {
  color: var(--color-gris);
}

.pie a:hover {
  color: var(--color-tinta);
}

/* ===================================================================
   /la-maquina y /el-impacto-de-la-deuda — la zona de naranja del sistema
   (docs/03-sistema-diseno.md).
   =================================================================== */

/* El hero naranja es una banda a sangre completa, naranja pleno con Tinta
   encima, cortada en diagonal antes del contenido — el borde del bloque
   naranja de la tapa del impreso. La sección ya no lleva `.contenedor`: el
   texto va en un `.contenedor` propio adentro, para poder sangrar el fondo
   sin sacar el título de la grilla. El padding-bottom lleva 3rem de más: es
   lo que el corte se "come" del lado más bajo, así el último renglón no
   queda pisado por la diagonal.

   En Home la banda envuelve el título + la ilustración + el primer párrafo;
   en las páginas interiores (`hero--pagina`) solo el título y la bajada, y
   el resto de la página sigue en papel abajo. */
.hero--naranja {
  background: var(--color-naranja);
  color: var(--color-tinta);
  margin-bottom: var(--space-6);
  padding-block: var(--space-7) calc(var(--space-7) + 3rem);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3rem));
}

.hero--naranja.hero--pagina {
  padding-block: var(--space-6) calc(var(--space-5) + 3rem);
}

.hero--naranja .hero__bajada {
  color: var(--color-tinta);
}

/* el borde naranja del sello desaparece sobre el fondo naranja — sobre la
   banda va en tinta. */
.hero--naranja .sello {
  border-color: var(--color-tinta);
}

/* el descargable del informe vive dentro de la banda naranja (no en el
   header como en Home): el hover a fondo naranja no se vería, así que acá
   invierte a fondo tinta. */
.hero--naranja .descarga-pdf {
  margin-top: var(--space-4);
}

.hero--naranja .descarga-pdf:hover,
.hero--naranja .descarga-pdf:focus-visible {
  background: var(--color-tinta);
  color: var(--color-papel);
  border-color: var(--color-tinta);
}

/* cita grande: énfasis editorial (pt2-cita-futuro-comprometido, pt2-genero),
   distinta del .sello a propósito — el sello es "esto está verificado",
   esto es una frase que el manual resalta por su peso, no un veredicto. */

.cita-grande {
  font-family: var(--font-texto);
  font-weight: 600;
  font-style: normal;
  font-size: var(--size-display-m);
  line-height: 1.25;
  color: var(--color-tinta);
  max-width: var(--ancho-lectura);
  margin: var(--space-6) 0;
}

/* panel de cita en naranja sólido, a ancho completo de viewport (rompe el
   .contenedor a propósito) — mismo tratamiento que usa el impreso para sus
   citas de mayor peso (fuente/manual_final_final.pdf: el cierre "Protege a
   la gente...", pág. 20, con naranja de tapa de fondo entero). Ahí el texto
   es blanco; acá es Tinta, porque blanco sobre este naranja da 1.8:1 y no
   pasa contraste de pantalla (Tinta da 8.4:1) — mismo protagonismo de
   color, letra distinta. Ver docs/03-sistema-diseno.md, Paleta. */
/* el padding (aire adentro del recuadro naranja) y el margin (separación
   con el párrafo anterior/siguiente) son cosas distintas — antes esto usaba
   un solo padding grande para las dos cosas, y como el margin-bottom del
   párrafo anterior (32px, ver p en base.css) se sumaba al padding-top del
   panel, el espacio de "antes" quedaba mucho más grande que el de
   "después" (nada empuja desde el bloque siguiente, que no tiene
   margin-top). Con margin-block acá el margen colapsa con el del párrafo
   de arriba en vez de sumarse, así los dos lados quedan iguales. */
.cita-grande--panel {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-block: var(--space-7);
  background: var(--color-naranja);
  padding-block: var(--space-6);
}

/* el texto usa el mismo .contenedor que el resto de la página (no un
   max-width/margin:auto aparte) para que quede exactamente alineado a la
   izquierda con los demás párrafos — centrarlo en el ancho completo del
   panel (100vw) lo corría de esa columna. */
.cita-grande--panel .cita-grande {
  color: var(--color-tinta);
  margin: 0;
}

/* ---- fig-stats-destacadas: tarjetas con conteo ascendente ---- */

.stats-grid {
  list-style: none;
  margin: var(--space-5) 0 var(--space-7);
  padding: 0;
  display: grid;
  /* a 2 columnas, "millones" a --size-data no entra en el ancho de tarjeta
     que queda a 360px sin partirse fea a la mitad — 1 columna le da el
     ancho que necesita. */
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 26em) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 50em) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* PRUEBA (2026-09): naranja de tapa sólido en vez del tinte + borde —
   coincide con las 4 etiquetas en forma de casita de
   fuente/manual_final_final.pdf pág. 11 ("+3 millones de deudores...",
   "20 millones de personas"...), que son así, rellenas, sin borde. El
   número (.stat-card__valor) pasa de naranja-texto a Tinta: el naranja pleno con
   naranja-texto encima no pasa contraste (necesita Tinta, ver Paleta en
   docs/03-sistema-diseno.md). */
.stat-card {
  background: var(--color-naranja);
  border-radius: 4px;
  padding: var(--space-4);
  text-align: left;
  /* sin esto, el número grande (ej. "millones") fija un ancho mínimo de
     contenido que la grilla respeta aunque no entre en pantalla — el
     bug clásico de CSS Grid con ítems de texto, ya visto en .formulario. */
  min-width: 0;
  /* .stat-card__valor mide su tamaño contra el ancho REAL de esta tarjeta
     (ver container-type acá abajo), no contra el del viewport completo —
     por eso --size-data (pensada para una sola cifra grande y suelta, no
     para una grilla de 2 o 4 columnas) no sirve acá: crece con vw sin
     enterarse de cuántas columnas hay, y "millones" terminaba partido a la
     mitad en varios anchos intermedios (600-900px) donde 4 columnas ya
     entraban pero el número todavía no había dejado de crecer. */
  container-type: inline-size;
}

.stat-card__valor {
  display: block;
  font-family: var(--font-utilidad);
  font-weight: 600;
  font-size: clamp(1.375rem, 0.75rem + 11cqi, 3.25rem);
  line-height: 1.05;
  color: var(--color-tinta);
  overflow-wrap: break-word;
}

/* "millones" (8 letras) no siempre entra al lado del número en una tarjeta
   angosta — en vez de seguir bajando el tamaño de fuente hasta que entre
   (números chicos e ilegibles) o dejar que se parta a la mitad, se
   abrevia a "Mill." apenas la tarjeta se pone demasiado angosta para la
   palabra completa. Es texto real en las dos versiones, no un ::after con
   content — así sigue siendo seleccionable/leíble por lectores de
   pantalla en cualquiera de los dos casos. */
.stat-card__sufijo-corto {
  display: none;
}

@container (max-width: 13rem) {
  .stat-card__sufijo-completo {
    display: none;
  }

  .stat-card__sufijo-corto {
    display: inline;
  }
}

.stat-card__etiqueta {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-texto);
  font-size: var(--size-body-s);
  color: var(--color-tinta);
}

/* PRUEBA (2026-09): dos recuadros sólidos en naranja de tapa, uno junto al
   otro — coincide con "DEUDAS PRESCRIPTAS"/"DEUDAS INEXISTENTES" de
   fuente/manual_final_final.pdf pág. 14 (mismo contenido, /que-hacer/tu-
   situacion). Texto Tinta encima, igual que el resto de los usos sólidos
   de este naranja (ver Paleta, docs/03-sistema-diseno.md). */
.recuadros-naranja {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

@media (min-width: 37.5em) {
  .recuadros-naranja {
    grid-template-columns: repeat(2, 1fr);
  }
}

.recuadro-naranja {
  background: var(--color-naranja);
  color: var(--color-tinta);
  border-radius: 4px;
  padding: var(--space-4);
}

.recuadro-naranja h3 {
  margin-bottom: var(--space-2);
}

.recuadro-naranja p {
  margin-bottom: 0;
}

/* ---- fig-caida-ingresos: círculos encadenados ---- */

.caida-ingresos {
  margin: var(--space-6) 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 20rem;
}

.circulo-dato {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-naranja);
  color: var(--color-tinta);
  text-align: center;
  padding: var(--space-4);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.circulo-dato.entra {
  opacity: 1;
  transform: scale(1);
}

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

.circulo-dato:nth-child(1) {
  width: 65%;
  align-self: flex-start;
}

.circulo-dato:nth-child(2) {
  width: 78%;
  align-self: center;
  background: var(--color-naranja-texto);
  color: var(--color-papel);
}

.circulo-dato:nth-child(3) {
  width: 92%;
  align-self: flex-end;
  background: var(--color-tinta);
  color: var(--color-papel);
}

.circulo-dato__valor {
  font-family: var(--font-utilidad);
  font-weight: 600;
  font-size: var(--size-display-m);
  line-height: 1;
}

.circulo-dato__etiqueta {
  font-family: var(--font-texto);
  font-size: var(--size-body-s);
  margin-top: var(--space-2);
}

/* ---- fig-mora-tipos-deuda: barras agrupadas 2025 → 2026 ---- */

.grafico-barras {
  margin: var(--space-6) 0 var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-4);
  align-items: end;
  max-width: none;
}

@media (min-width: 37.5em) {
  .grafico-barras {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grupo-barras {
  display: flex;
  flex-direction: column;
  /* sin esto, "Cadenas de venta de electrodomésticos" fija un ancho mínimo
     de contenido que la grilla respeta aunque no entre en pantalla — el
     mismo bug de CSS Grid que .stat-card y .formulario__campo. */
  min-width: 0;
}

.grupo-barras__categoria {
  font-family: var(--font-texto);
  font-size: var(--size-body-s);
  color: var(--color-gris);
  margin-bottom: var(--space-3);
  min-height: 2.6em;
}

.grupo-barras__pista {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 11rem;
  border-bottom: 2px solid var(--color-tinta);
}

/* Cada barra y su año viven en la misma columna flex (incluida más abajo,
   en .grupo-barras__anios span, con el mismo flex/gap) — así se alinean
   por construcción en vez de depender de que dos filas separadas midan
   igual "por casualidad". Antes la barra tenía max-width propio y el año
   no, así que con dos barras angostas en una pista ancha el año de la
   segunda quedaba flotando lejos de su barra.

   El valor (.barra__valor) es HERMANO de .barra, no hijo: con
   flex-direction column-reverse, el primer elemento del DOM (.barra) queda
   anclado abajo y el segundo (.barra__valor) se apila arriba suyo, siempre
   con el mismo gap — así el número flota separado de la barra en vez de
   metido adentro, que es lo que hacía que en las barras cortas (9%, 4%)
   la etiqueta quedara tapando/pegada al borde de la barra. */
.columna-barra {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
}

/* estilo "dibujado a mano": esquinas superiores livemente asimétricas +
   un segundo contorno apenas rotado y traslúcido detrás (::before), como
   el trazo doble de una regla que no quedó perfectamente firme — la misma
   lógica del sello (docs/03-sistema-diseno.md: "borde irregular... nunca
   una forma perfecta ni vectorial limpia"), aplicada acá. Nunca se rota
   la barra en sí: apoya en la línea de base de la pista y rotarla abriría
   un hueco visible ahí. */
/* la barra de 2025 es la referencia (el "antes"): va en Tinta plena. La de
   2026 —.barra--2026, más abajo— va en naranja pleno. Negro vs. naranja
   separa los dos años sin sumar un color, y el naranja queda para el dato
   que el gráfico quiere que mires. */
.barra {
  position: relative;
  height: 0;
  width: 3.4rem;
  background: var(--color-tinta);
  border: 2.5px solid var(--color-tinta);
  border-bottom: none;
  border-radius: 7px 3px 0 0;
  transition: height 0.5s ease;
}

.barra::before {
  content: "";
  position: absolute;
  inset: -2px -4px 0 -4px;
  border: 2px solid var(--color-tinta);
  border-bottom: none;
  border-radius: 4px 9px 0 0;
  opacity: 0.4;
  transform: rotate(-0.7deg);
  pointer-events: none;
}

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

.barra--2026 {
  background: var(--color-naranja);
  border-color: var(--color-tinta);
}

.barra__valor {
  font-family: var(--font-utilidad);
  font-weight: 600;
  font-size: var(--size-body-s);
  color: var(--color-tinta);
}

.grupo-barras__anios {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.grupo-barras__anios span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  color: var(--color-gris);
}

/* ---- fig-engranajes-maquina: los tres engranajes de /la-maquina, cada
   uno linkea (con #ancla, las tres secciones viven en la misma página) al
   desarrollo del factor que representa ----
   Los tres son del mismo tamaño y la misma cantidad de dientes (antes el
   del medio era más chico), engranando de verdad — dientes superpuestos,
   no tarjetas separadas — igual que en la página 7 del impreso, con sus
   anotaciones (líneas sin punta que terminan subrayando el texto). Como
   una sola escena de coordenadas fijas no puede pasar de fila a columna
   entre escritorio y mobile, hay dos escenas (misma geometría de
   engranaje, generada una sola vez y reutilizada por <use> — nunca se
   duplica el path pesado de los dientes) alternadas por CSS: fila en
   escritorio (960px+), columna en mobile/tablet. */

.maquina {
  margin: var(--space-6) 0 var(--space-7);
}

.maquina__escena {
  display: block;
  width: 100%;
  height: auto;
}

.maquina__escena--desktop {
  display: none;
}

@media (min-width: 60em) {
  .maquina__escena--mobile {
    display: none;
  }

  .maquina__escena--desktop {
    display: block;
  }
}

.engranaje {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.engranaje:hover,
.engranaje:focus-visible {
  transform: scale(1.035);
}

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

.engranaje__diente {
  fill: var(--color-naranja);
  filter: drop-shadow(0 3px 4px rgb(34 26 23 / 35%));
}

/* la rueda dentada real (fuente/engranaje.svg) ya viene con el agujero
   central hecho — no hace falta dibujar un círculo aparte encima como en
   la versión procedural anterior. Solo esta capa gira; el texto de abajo
   es un grupo hermano que se queda quieto. */
.rueda {
  transform-box: fill-box;
  transform-origin: center;
}

/* el texto curvo real (fuente/ingresos.svg, digitalizacion.svg,
   desregulacion.svg), ya diagramado siguiendo el aro interno del
   engranaje — reemplaza el <text> recto de la versión anterior. */
.engranaje__etiqueta path {
  fill: var(--color-tinta);
}

/* anotaciones (hoja 7 del impreso): línea sin punta de flecha que arranca
   del borde del engranaje y termina subrayando el texto — es <text> real,
   no un dibujo de las letras, así queda seleccionable y accesible. */
.engranaje__anotacion path {
  fill: none;
  stroke: var(--color-tinta);
  stroke-width: 1.5;
}

.engranaje__anotacion text {
  font-family: var(--font-texto);
  fill: var(--color-tinta);
}

/* llamada a la acción en el centro del engranaje ("Leer más →"): el texto
   curvo ya dice de qué trata cada engranaje, pero por sí solo no comunica
   que es un link a otra página — esto lo hace explícito en el mismo lugar
   donde cae la mirada. Va en naranja pleno (el mismo naranja de los
   dientes) para que se lea como parte del engranaje, no como una etiqueta
   pegada encima; sube de tinta a naranja pleno en hover/focus del link
   entero, igual que el resto de la escena ya reacciona con el scale. */
.engranaje__cta {
  font-family: var(--font-utilidad);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0.02em;
  text-anchor: middle;
  fill: var(--color-tinta);
}

.engranaje:hover .engranaje__cta,
.engranaje:focus-visible .engranaje__cta {
  fill: var(--color-naranja);
}

/* ===================================================================
   /organizarse
   =================================================================== */

/* una cita legal fuera de la lista de /que-hacer/fundamentos-legales no
   necesita el filete superior que las separa entre sí ahí */
.fundamento-legal--suelto {
  border-top: none;
  padding-top: 0;
}

/* ===================================================================
   /sobre
   =================================================================== */

.grilla-organizaciones {
  list-style: none;
  margin: var(--space-5) 0 var(--space-7);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 37.5em) {
  .grilla-organizaciones {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
}

.tarjeta-organizacion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 2px solid var(--color-gris);
  border-radius: 4px;
  padding: var(--space-4);
  font-size: var(--size-body-s);
}

.tarjeta-organizacion__logo {
  height: 2rem;
  width: auto;
  align-self: flex-start;
}

.tarjeta-organizacion strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--size-body-l);
}

.tarjeta-organizacion span {
  color: var(--color-gris);
}

/* La impresión directa (window.print() + @media print) se reemplazó por
   descarga de PDF real — ver carta.js. El motivo: el diálogo de impresión
   del navegador agrega su propio encabezado/pie (fecha, URL) que ninguna
   hoja de estilos puede desactivar; un PDF descargado no tiene ese
   problema y además le deja a la persona elegir imprimirlo o guardarlo. */

/* ===================================================================
   Ilustraciones originales del manual impreso (docs/04-figuras.md,
   "Fotografías e ilustraciones expresivas") — quietas a propósito
   (CLAUDE.md: "NO se animan"). Acompañan al título en vez de vivir
   aparte con marco y etiqueta propios: en escritorio (60em+) se ubican
   al lado del bloque de título, en móvil/tablet debajo. Sin marco: la
   ilustración entra en la misma jerarquía visual que el título.
   =================================================================== */

.encabezado-con-figura {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

.encabezado-con-figura__texto {
  min-width: 0;
}

.encabezado-con-figura__imagen {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}

.encabezado-con-figura__imagen img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 60em) {
  .encabezado-con-figura {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-7);
  }
}

/* ===================================================================
   El camino de la deuda, la historia de Claudia y Eduardo (docs/01-inventario.yaml: juego-camino)
   — figura narrativa de 10 pasos, armada a partir de las piezas
   originales de fuente/camino/. Es una ilustración diagramática (como
   los engranajes de /la-maquina), no una foto expresiva: el
   JS permite enfocar paso a paso con un pan/zoom sobre el mismo dibujo,
   nunca la única forma de leerla — el texto completo de los 10 pasos
   está siempre debajo, como lista real, sin depender del JS.
   =================================================================== */

.camino {
  margin-block: var(--space-7);
}

.camino__intro {
  color: var(--color-gris);
}

.camino__escena {
  margin-block: var(--space-5);
  border: 2px solid var(--color-tinta);
  border-radius: 4px;
  background: var(--color-papel);
}

.camino__viewport {
  overflow: hidden;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  /* alto de sobra por si el JS todavía no corrió: ver camino.js
     ajustarTamano(), que fija un ancho/alto en px para que la escena
     entera (ilustración + controles) entre siempre en la pantalla. */
}

.camino__viewport svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* el pan/zoom mueve este grupo, no el <svg> — así el viewBox no cambia
   nunca y no hay que animar un atributo de contenido (no se puede con
   CSS), solo un transform, que sí anima suave y con GPU. */
#camino-escena {
  transform-origin: 0 0;
  transition: transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  #camino-escena {
    transition: none;
  }
}

.camino-pieza[data-pieza^="texto"] {
  transition: opacity 0.4s ease;
}

.camino-pieza--clicable {
  cursor: pointer;
}

.camino__controles {
  padding: var(--space-3) var(--space-4);
  border-top: 2px solid var(--color-tinta);
}

.camino__pasos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.camino__paso {
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  background: none;
  color: var(--color-gris);
  border: 1.5px solid var(--color-gris);
  border-radius: 3px;
  width: 2.25em;
  padding-block: var(--space-1);
  cursor: pointer;
}

.camino__paso:hover,
.camino__paso:focus-visible {
  color: var(--color-tinta);
  border-color: var(--color-tinta);
}

.camino__paso[aria-pressed="true"] {
  color: var(--color-naranja-texto);
  border-color: var(--color-naranja-texto);
  font-weight: bold;
}

.camino__fila-botones {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.camino__boton {
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  background: none;
  color: var(--color-tinta);
  border: 1.5px solid var(--color-gris);
  border-radius: 3px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.camino__boton:hover,
.camino__boton:focus-visible {
  color: var(--color-naranja-texto);
  border-color: var(--color-naranja-texto);
}

.camino__boton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.camino__boton:disabled:hover {
  color: var(--color-tinta);
  border-color: var(--color-gris);
}

.camino__contador {
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-gris);
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
}

.camino__boton--todo {
  flex: 1 1 100%;
  order: 3;
  border-color: var(--color-tinta);
}

@media (min-width: 30em) {
  .camino__boton--todo {
    flex: 0 0 auto;
    order: 0;
    margin-inline-start: auto;
  }
}

/* ---- el texto completo, siempre presente, sin depender del JS ---- */

.camino__texto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.camino__texto li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-family: var(--font-texto);
}

.camino__numero {
  flex: 0 0 auto;
  font-family: var(--font-display);
  color: var(--color-tinta);
  background: var(--color-naranja);
  min-width: 1.7em;
  text-align: center;
  padding: 0 0.25em;
  border-radius: 2px;
}

/* ===================================================================
   /la-maquina/informe-mate — el informe completo del MATE
   (docs/05-informe-mate.md). Documento largo, una sola página, con
   índice lateral pegajoso en escritorio e índice plegado en móvil.
   Zona de naranja del sistema (docs/03-sistema-diseno.md).
   =================================================================== */

/* layout de dos columnas: índice + cuerpo. En móvil/tablet es una sola
   columna (el índice va arriba, plegado). El cuerpo nunca supera el
   ancho de lectura; en escritorio la grilla se centra en el contenedor. */
.informe {
  margin-block: var(--space-6) var(--space-8);
}

.informe__cuerpo {
  max-width: var(--ancho-lectura);
}

@media (min-width: 64em) {
  .informe {
    display: grid;
    grid-template-columns: 14rem minmax(0, var(--ancho-lectura));
    gap: var(--space-7);
    justify-content: center;
    align-items: start;
  }
}

/* ---- índice lateral (escritorio) ---- */

.informe__indice {
  display: none;
}

@media (min-width: 64em) {
  .informe__indice {
    display: block;
    position: sticky;
    top: var(--space-4);
    align-self: start;
    max-height: calc(100vh - var(--space-7));
    overflow-y: auto;
    font-family: var(--font-utilidad);
    font-size: var(--size-body-s);
  }
}

.informe__indice-titulo {
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gris);
  margin: 0 0 var(--space-3);
}

.informe__indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.informe__indice li {
  margin: 0;
}

.informe__indice a {
  display: block;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 2px solid var(--color-gris-suave);
  color: var(--color-gris);
  text-decoration: none;
  line-height: 1.35;
}

.informe__indice a:hover,
.informe__indice a:focus-visible {
  color: var(--color-tinta);
  border-left-color: var(--color-tinta);
}

.informe__indice a[aria-current="true"] {
  color: var(--color-naranja-texto);
  border-left-color: var(--color-naranja-texto);
  font-weight: 700;
}

/* sub-anclas (subsecciones): sólo en el índice de escritorio, sangradas */
.informe__indice .informe__indice--sub a {
  padding-left: var(--space-5);
  font-size: calc(var(--size-body-s) - 1px);
}

.informe__indice-num {
  color: var(--color-naranja-texto);
  font-weight: 700;
  margin-right: 0.4em;
}

/* ---- índice plegado (móvil / tablet) ---- */

.informe__indice-movil {
  margin-block: var(--space-5);
  border: 2px solid var(--color-gris);
  border-radius: 4px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
}

@media (min-width: 64em) {
  .informe__indice-movil {
    display: none;
  }
}

.informe__indice-movil > summary {
  cursor: pointer;
  padding-block: var(--space-3);
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gris);
}

.informe__indice-movil[open] > summary {
  border-bottom: 1px solid var(--color-gris);
  margin-bottom: var(--space-3);
}

.informe__indice-movil ol {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
}

.informe__indice-movil a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-tinta);
  text-decoration: none;
}

.informe__indice-movil a:hover,
.informe__indice-movil a:focus-visible {
  color: var(--color-naranja-texto);
}

/* ---- estructura del cuerpo ---- */

.informe__capitulo {
  margin-block: var(--space-8) var(--space-6);
  padding-top: var(--space-6);
  border-top: 3px solid var(--color-tinta);
}

.informe__capitulo:first-of-type {
  margin-top: var(--space-6);
}

.informe__capitulo-etiqueta {
  display: block;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-naranja-texto);
  margin-bottom: var(--space-2);
}

.informe__cuerpo h2 {
  font-size: var(--size-display-l);
}

.informe__cuerpo h3 {
  font-size: var(--size-display-m);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.informe__cuerpo h4 {
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: var(--size-body-l);
  text-transform: none;
  margin: var(--space-6) 0 var(--space-3);
}

/* primer párrafo de cada capítulo, un punto más grande */
.informe__capitulo + p,
.informe__bajada {
  font-size: var(--size-body-l);
}

/* fila de logos de la atribución del informe (mate + Caren Tepp) */
.informe__creditos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.informe__creditos img {
  height: 2.5rem;
  width: auto;
}

/* nota al pie inline (SFA, intereses punitorios) */
.informe__nota-ref {
  font-family: var(--font-utilidad);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  color: var(--color-naranja-texto);
  padding-inline: 0.15em;
}

.informe__nota-ref:hover,
.informe__nota-ref:focus-visible {
  text-decoration: underline;
}

.informe__notas {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-gris);
  font-size: var(--size-body-s);
  color: var(--color-gris);
}

.informe__notas ol {
  padding-left: var(--space-4);
}

.informe__notas li {
  margin-bottom: var(--space-3);
}

/* al saltar a una nota desde su llamada, se marca con el resaltador del
   manual —no con el naranja pleno de un panel—: es texto resaltado, no un
   bloque. Tinta encima da 10,8:1. */
.informe__notas li:target {
  background: var(--color-naranja-marcador);
  border-radius: 2px;
}

/* ---- fuentes consultadas ---- */

.informe__fuentes {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-size: var(--size-body-s);
  color: var(--color-gris);
}

.informe__fuentes li {
  padding-left: var(--space-4);
  text-indent: calc(-1 * var(--space-4));
  margin-bottom: var(--space-3);
  overflow-wrap: break-word;
}

/* ===================================================================
   figura del informe (gráfico o cuadro). El SVG lo agregan las fases
   4 y 5 dentro de .figura-mate__lienzo; el equivalente textual
   (.figura-mate__resumen) es permanente y no depende del JS.
   =================================================================== */

.figura-mate {
  margin: var(--space-7) 0;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-gris);
  border-bottom: 1px solid var(--color-gris);
  max-width: none;
}

.figura-mate__cap {
  margin-bottom: var(--space-4);
}

.figura-mate__num {
  display: block;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-naranja-texto);
  margin-bottom: var(--space-1);
}

.figura-mate__titulo {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--size-display-m);
  line-height: 1.1;
}

.figura-mate__sub {
  display: block;
  font-family: var(--font-texto);
  font-style: italic;
  font-size: var(--size-body-s);
  color: var(--color-gris);
  margin-top: var(--space-2);
}

/* contenedor del dibujo: scrollea en su propia caja si el gráfico es
   más ancho que la columna (piso de calidad: el body nunca scrollea
   en horizontal). */
.figura-mate__lienzo {
  overflow-x: auto;
  margin-block: var(--space-4);
}

.figura-mate__lienzo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* placeholder hasta que la fase 4/5 ponga el SVG */
.figura-mate__pendiente {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  border: 2px dashed var(--color-gris);
  border-radius: 4px;
  text-align: center;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-gris);
}

.figura-mate__resumen {
  margin: var(--space-4) 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-tinta);
  background: var(--color-naranja);
  color: var(--color-tinta);
  font-size: var(--size-body-s);
  max-width: none;
}

.figura-mate__resumen b {
  font-family: var(--font-utilidad);
  font-weight: 600;
}

.figura-mate__fuente,
.figura-mate__nota {
  margin: 0;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  color: var(--color-gris);
  max-width: none;
}

.figura-mate__nota {
  margin-bottom: var(--space-2);
  font-style: normal;
  color: var(--color-naranja-texto);
}

/* ---- cuadros (tablas reales: Cuadro 1 y Cuadro 2) ---- */

.cuadro-mate__scroll {
  overflow-x: auto;
  margin-block: var(--space-4);
}

.cuadro-mate table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
}

.cuadro-mate caption {
  text-align: left;
  font-style: italic;
  color: var(--color-gris);
  margin-bottom: var(--space-2);
  font-family: var(--font-texto);
}

.cuadro-mate th,
.cuadro-mate td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-gris-suave);
  text-align: right;
}

.cuadro-mate th[scope="row"],
.cuadro-mate td:first-child,
.cuadro-mate th:first-child {
  text-align: left;
}

.cuadro-mate thead th {
  border-bottom: 2px solid var(--color-tinta);
  color: var(--color-tinta);
}

.cuadro-mate tbody th[scope="rowgroup"] {
  padding-top: var(--space-3);
  color: var(--color-naranja-texto);
  text-transform: uppercase;
  font-size: var(--size-label);
  letter-spacing: 0.06em;
}

.cuadro-mate tfoot th,
.cuadro-mate tfoot td {
  border-top: 2px solid var(--color-tinta);
  border-bottom: none;
  font-weight: 700;
}

/* barra proporcional dentro de la celda (Cuadro 1) — pura decoración,
   el número al lado es el dato real */
.cuadro-mate__barra {
  display: inline-block;
  height: 0.7em;
  background: var(--color-naranja);
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* ---- enlace de vuelta a Entender ---- */

.informe__volver {
  display: inline-block;
  margin-top: var(--space-7);
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-gris);
  text-decoration: none;
}

.informe__volver:hover,
.informe__volver:focus-visible {
  color: var(--color-tinta);
}

/* enlace desde cada uno de los tres factores de /la-maquina hacia la
   sección correspondiente del informe completo ("ver esto con los datos") */
.ver-en-informe {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-tinta);
  text-decoration-color: var(--color-naranja);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.ver-en-informe:hover,
.ver-en-informe:focus-visible {
  color: var(--color-naranja-texto);
}

/* ===================================================================
   Gráficos del informe (src/la-maquina/informe-mate/graficos.js).
   SVG generado por JS; sin JS queda el resumen en texto. Paleta y
   tipografía: docs/03-sistema-diseno.md, docs/05-informe-mate.md §3.2.
   =================================================================== */

.g-mate {
  display: block;
  width: 100%;
  height: auto;
  /* en pantallas angostas el gráfico escala hacia abajo con el
     contenedor (responsive real hasta 360px); las cifras exactas
     quedan en el resumen y en la tabla de datos. El overflow-x:auto
     de .figura-mate__lienzo es solo una red de seguridad. */
  min-width: 17rem;
}

.g-mate__eje,
.g-mate__grilla,
.g-mate__cero {
  stroke: var(--color-gris);
  fill: none;
}

.g-mate__grilla {
  stroke-width: 1;
  opacity: 0.25;
}

.g-mate__eje {
  stroke-width: 1.5;
}

.g-mate__cero {
  stroke-width: 1.5;
  stroke-dasharray: 2 3;
}

.g-mate__eje-texto {
  font-family: var(--font-utilidad);
  font-size: 11px;
  fill: var(--color-gris);
}

.g-mate__valor,
.g-mate__valor-fin,
.g-mate__valor-seg {
  font-family: var(--font-utilidad);
  font-size: 11px;
  font-weight: 600;
}

.g-mate__valor {
  fill: var(--color-tinta);
}

.g-mate__anotacion {
  font-family: var(--font-utilidad);
  font-size: 11px;
  fill: var(--color-naranja-texto);
  font-weight: 600;
}

.g-mate__destacado {
  font-family: var(--font-utilidad);
  font-size: 30px;
  font-weight: 600;
  fill: var(--color-naranja-texto);
}

.g-mate__leyenda-txt {
  font-family: var(--font-utilidad);
  font-size: 11px;
  fill: var(--color-tinta);
}

.g-mate__linea {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.g-mate__linea--tenue {
  stroke-width: 1.5;
  opacity: 0.45;
}

.g-mate__barra,
.g-mate__seg {
  /* el color va inline (depende de la serie); acá solo la animación */
}

/* ---- leyenda en HTML, antes del SVG ---- */

.g-mate__leyenda {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
  color: var(--color-tinta);
}

.g-mate__leyenda li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.g-mate__leyenda-sw {
  width: 0.9em;
  height: 0.9em;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* ---- tabla de datos plegable de cada figura ---- */

.figura-mate__tabla {
  margin: var(--space-3) 0 0;
  font-size: var(--size-body-s);
}

.figura-mate__tabla > summary {
  cursor: pointer;
  font-family: var(--font-utilidad);
  font-size: var(--size-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gris);
  padding-block: var(--space-2);
}

.figura-mate__tabla[open] > summary {
  margin-bottom: var(--space-2);
}

.figura-mate__tabla table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-utilidad);
  font-size: var(--size-body-s);
}

.figura-mate__tabla th,
.figura-mate__tabla td {
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-gris-suave);
  text-align: right;
  white-space: nowrap;
}

.figura-mate__tabla th[scope="row"] {
  text-align: left;
}

.figura-mate__tabla thead th {
  border-bottom: 2px solid var(--color-tinta);
  color: var(--color-tinta);
  text-align: right;
}

/* ---- animación de entrada (solo si el JS agrega .g-mate--anim:
   nunca corre bajo prefers-reduced-motion, ver graficos.js) ---- */

.g-mate--anim .g-mate__linea {
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
}

.g-mate--anim.g-mate--visible .g-mate__linea {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s ease;
}

.g-mate--anim .g-mate__barra {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
}

.g-mate--anim .g-mate__barra[style*="--base: top"] {
  transform-origin: top;
}

.g-mate--anim.g-mate--visible .g-mate__barra {
  transform: scaleY(1);
  transition: transform 0.6s ease;
}

.g-mate--anim .g-mate__seg {
  transform: scaleX(0);
  transform-box: fill-box;
}

.g-mate--anim .g-mate__seg--izq {
  transform-origin: right;
}

.g-mate--anim .g-mate__seg--der {
  transform-origin: left;
}

.g-mate--anim.g-mate--visible .g-mate__seg {
  transform: scaleX(1);
  transition: transform 0.55s ease;
}

/* los textos de valor aparecen con un fundido corto tras el trazo */
.g-mate--anim .g-mate__valor,
.g-mate--anim .g-mate__valor-fin,
.g-mate--anim .g-mate__valor-seg {
  opacity: 0;
}

.g-mate--anim.g-mate--visible .g-mate__valor,
.g-mate--anim.g-mate--visible .g-mate__valor-fin,
.g-mate--anim.g-mate--visible .g-mate__valor-seg {
  opacity: 1;
  transition: opacity 0.4s ease 0.5s;
}