/*
 * Layout — contenedores, secciones y rejillas.
 * Mobile-first: una columna por defecto, las rejillas se arman en min-width.
 */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section--elev {
  background: var(--c-bg-elev);
}

/* Banda editable: los bloques que el editor coloca uno debajo de otro necesitan
   respirar entre sí. Sin esto, la lista de diferenciales y las preguntas
   frecuentes quedan pegadas y se leen como un solo bloque. */
.section--band > .container > * + * {
  margin-top: var(--sp-2xl);
}

/* El ancho va en rem, no en ch: `ch` se resuelve contra el tamaño de fuente de
   ESTE contenedor (1rem), no contra el del título que está dentro, y dejaba el
   H2 partido en una columna angosta. */
.section__head {
  margin-bottom: var(--sp-xl);
  max-width: min(100%, 46rem);
}

/* Cabecera con acción a la derecha: "Empresas que ya confían" + "Ver más casos" */
.section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-m);
  max-width: none;
  flex-wrap: wrap;
}

.section__head--split > div { max-width: min(100%, 34rem); }

.section__head h2 {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tight);
}

/* El antetítulo de sección es el `.eyebrow` del sistema (components.css) con
   el aire que necesita debajo del título. Nada más: ni tamaño, ni familia, ni
   color propios — si los repitiera acá volveríamos a tener dos antetítulos. */
.section__eyebrow {
  display: block;
  margin-bottom: var(--sp-s);
}

.section__lead {
  margin-top: var(--sp-s);
  color: var(--c-text-muted);
}

/* Rejillas ----------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-m);
}

/*
 * Escalón de tablet. Faltaba: entre 640 y 900 px las rejillas de tres y cuatro
 * columnas caían a UNA sola, y una tablet en vertical (768 px) mostraba las
 * tarjetas de caso apiladas a ancho completo, que es el punto que el Figma no
 * cubre y el que más se nota en la revisión.
 *
 * A partir de 640 px todo lo que tolera dos columnas pasa a dos; las tres y
 * cuatro columnas siguen esperando a 900 px, donde el ancho de columna vuelve
 * a ser cómodo para el texto de las tarjetas.
 */
/*
 * `--2` y `--4` completan la escala aunque hoy solo se use `--3`: son la misma
 * regla con otro número y un dev que necesite dos o cuatro columnas las
 * encuentra donde espera. Las que SÍ se quitaron —`--logos` y `--split`— no
 * eran escala: eran dos maquetas sueltas que ya resuelven componentes propios
 * (`.client-strip` y `.split`), y tenerlas acá ofrecía dos formas de hacer lo
 * mismo sin decir cuál es la buena.
 */
/* `minmax(0, 1fr)` y no `1fr`: con `1fr` el mínimo de la columna es el de su
   contenido, así que un título largo del panel sin espacios ensancha SU
   columna y desbalancea la fila entera. Las rejillas vecinas ya lo hacían
   bien; éstas eran las que faltaban. */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Rejilla con líneas ---------------------------------------------------- *
 * Una caja dividida en celdas por líneas de 1 px. La usan los dos bloques de
 * datos del sitio: la tarjeta de números del inicio (`.stats-card`) y la
 * rejilla de resultados de una vertical (`.metric-grid`). Antes cada una
 * reescribía la misma lógica —18 y 12 líneas— y ninguna coincidía con la otra.
 *
 * Las líneas NO son bordes de la celda: cada celda proyecta su línea de
 * arriba y la de la izquierda con `box-shadow` —que no ocupa espacio— y la
 * caja recorta con `overflow: clip` las que caen fuera de ella. El dibujo sale
 * correcto para CUALQUIER cantidad de celdas y cualquier reparto de columnas,
 * sin una sola regla `:nth-child`.
 *
 * Por qué importa: con bordes hay que saber de antemano qué celda abre fila, y
 * eso depende de cuántas columnas haya. Con cinco números —el caso que aparece
 * en cuanto el cliente cree la quinta vertical— el quinto quedaba SIN línea
 * superior y CON línea izquierda aunque no tuviera nada a la izquierda.
 *
 * `overflow: clip` y no `hidden`: recorta igual pero no convierte la caja en
 * un contenedor de scroll. Adentro no hay enlaces ni nada que pueda quedar
 * fuera —son texto y cifras con `min-width: 0`—, así que no esconde contenido.
 */
.linegrid {
  display: grid;

  /* `minmax(0, 1fr)` y no `1fr`: con `1fr` el mínimo de la columna es el de su
     contenido, así que una etiqueta larga ensancha SU celda y desbalancea la
     fila entera. Medido antes del cambio: 281 px → 594 px. */
  grid-template-columns: repeat(var(--linegrid-cols, 1), minmax(0, 1fr));
  background: var(--c-surface);
  overflow: clip;
}

.linegrid > * {
  min-width: 0;

  /* La caja recorta (`overflow: clip`), así que una palabra sin cortes sería
     un recorte INVISIBLE: ni la consola ni la medición de desborde de página
     lo detectan. `anywhere` se hereda hacia el texto de dentro y garantiza que
     nada salga de su celda. */
  overflow-wrap: anywhere;
  box-shadow: -1px 0 0 var(--c-border-soft),
              0 -1px 0 var(--c-border-soft);
}

/* Franja de acento del borde superior ---------------------------------- */

.top-accent {
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-marketing) 60%, transparent);
}

/* Dentro de una vertical la franja toma SU color: es la primera señal de que
   se cambió de sección, antes incluso de leer el titular. */
body[data-vertical] .top-accent {
  background: linear-gradient(90deg, var(--c-vertical), var(--c-vertical-soft) 55%, transparent);
}

/* Cabecera ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  /* Red de seguridad para un menú largo: si aun así no entra, la fila baja de
     línea en vez de empujar el botón de Contacto fuera de la pantalla. Con el
     menú del cliente (cuatro entradas) nunca se activa. */
  flex-wrap: wrap;
  row-gap: var(--sp-2xs);
  min-height: 72px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  text-decoration: none;
}

.site-header__mark {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.site-header__mark svg { width: 100%; height: 100%; }

/*
 * Logo real del cliente. La altura la manda el tema y el ancho lo decide la
 * proporción del archivo: así un logotipo apaisado no estira el encabezado ni
 * empuja la navegación. `width:auto` es necesario porque WordPress emite
 * `width`/`height` como atributos y sin esto se serviría deformado.
 */
.site-header__logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 200px;
  flex-shrink: 0;
}

.site-header__cta { display: none; }

.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--sp-l);
  /*
   * La lista NUNCA se sale de su caja: si el cliente carga más entradas de las
   * que entran, pasan a una segunda línea en lugar de recortarse (con
   * `overflow-x: clip` en <html> no habría forma de llegar a ellas). El módulo
   * de navegación detecta ese salto de línea y cambia al panel desplegable;
   * este `wrap` es lo que sostiene la maqueta si el JavaScript no corre.
   */
  flex-wrap: wrap;
  row-gap: var(--sp-2xs);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);

  /*
   * Medido a 1024 y a 1440, en las 12 plantillas: los cuatro enlaces daban
   * 86,6×23,1 · 40,5×23,1 · 106,9×23,1 · 32,7×23,1. El alto es 23,1 porque la
   * caja del enlace la fijaba el texto (14 px × 1,65) y nadie declaraba un
   * piso: 0,9 px por debajo de los 24 que exige la WCAG 2.5.8 AA. Es el mismo
   * arreglo y el mismo token que ya lleva `.link-arrow`.
   *
   * Crece SIN empujar: el `li` que lo contiene ya mide 28,05 px (su propia
   * caja de línea), así que el enlace se estira dentro de un hueco que ya
   * existía. Verificado con getComputedStyle a los cuatro anchos: la altura
   * del `ul` sigue en 28,05, la cabecera en 73, el borde superior de `#contenido`
   * en 76 y el desplegable de "Soluciones" abre en el mismo 59,02. El texto
   * tampoco se mueve: `align-items: center` lo mantiene en el centro de una
   * caja que creció 0,45 px por lado.
   *
   * Se descartó estirar el enlace a los 28 px del `li` (con `display:flex` en
   * el `li`): daba más margen, pero encogía el `ul` a 24 y subía el
   * desplegable 2 px. Mover la maqueta para ganar margen no compensa.
   */
  min-height: var(--tap-target-min);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-parent > a {
  color: var(--c-text);
}

/* Desplegable de "Soluciones" ------------------------------------------ *
 * Se abre con `:hover` y con `:focus-within`, así que funciona con el ratón
 * y con el tabulador sin una línea de JavaScript. El módulo de navegación
 * solo agrega lo que CSS no puede: el toque en móvil, Escape y cerrar al
 * tocar fuera.
 *
 * `data-open="false"` es «cerrado a propósito» y manda sobre las dos
 * pseudoclases. Hace falta porque cerrar deja el foco en el disparador —que es
 * lo correcto, WAI-ARIA lo pide— y el disparador está DENTRO del elemento que
 * escucha `:focus-within`: sin esta marca, Escape cambiaba `aria-expanded` a
 * "false" y el panel seguía desplegado a la vista. El lector de pantalla decía
 * «contraído» sobre un panel abierto.
 *
 * Va como `:not()` sobre las reglas de apertura y no como una regla de cierre
 * escrita después: así el cierre no depende del orden del archivo. El módulo
 * levanta la marca en cuanto el puntero y el foco se van, y el submenú vuelve a
 * abrirse con hover y con el tabulador como siempre.
 */

.site-nav .menu-item-has-children {
  position: relative;
}

.site-nav .menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 6px;
  display: grid;
  gap: 0;
  min-width: 230px;
  padding: var(--sp-2xs);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out),
              translate var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}

.site-nav .menu-item-has-children:hover:not([data-open="false"]) > .sub-menu,
.site-nav .menu-item-has-children:focus-within:not([data-open="false"]) > .sub-menu,
.site-nav .menu-item-has-children[data-open="true"] > .sub-menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.site-nav .menu-item-has-children:hover:not([data-open="false"]) > a::after,
.site-nav .menu-item-has-children[data-open="true"] > a::after {
  transform: translateY(-4px) rotate(225deg);
}

.site-nav .sub-menu li { display: block; }

.site-nav .sub-menu a {
  display: block;
  padding: var(--sp-2xs) var(--sp-xs);
  border-radius: var(--radius-s);
  white-space: nowrap;
}

.site-nav .sub-menu a:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3xs);

  /* Medía 46×38: alto suficiente para el ojo, no para el dedo. Es el control
     más importante del sitio en móvil y era el único por debajo del objetivo
     de `--control-h` (44 px, WCAG 2.5.5). */
  min-height: var(--control-h);
  padding: var(--sp-2xs) var(--sp-xs);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

/* Era uno de los tres controles del sitio sin ninguna respuesta al ratón. */
.nav-toggle:hover {
  border-color: var(--c-text-faint);
  background: var(--c-bg-elev);
}

.nav-toggle:active { transform: translateY(1px); }

@media (min-width: 1000px) {
  /* La navegación se queda con el espacio libre entre la marca y el botón, y
     `min-width: 0` la deja encogerse: sin él, un menú largo empuja el CTA. */
  .site-nav {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header__cta { display: inline-flex; }
  .nav-toggle { display: none; }

  /*
   * Menú largo en escritorio. Cuando la lista necesita más de una línea, el
   * módulo de navegación marca la cabecera y el menú pasa al panel desplegable:
   * la cabecera conserva su alto de 72 px y —lo importante— el botón de
   * Contacto sigue en pantalla. `:not([data-open])` para que el panel abierto
   * gane igual, que si no esta regla lo escondería por especificidad.
   */
  .site-header[data-nav="compact"] .site-nav:not([data-open="true"]) { display: none; }
  .site-header[data-nav="compact"] .nav-toggle { display: inline-flex; }
}

/* Menú móvil: se despliega sin JS pesado, con el atributo aria-expanded */
.site-nav[data-open="true"] {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  padding: var(--sp-m) var(--gutter);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);

  /*
   * El panel nunca puede ser más alto que lo que queda de pantalla: es
   * `absolute` dentro de una cabecera `sticky`, así que al desplazar la página
   * el panel acompaña y las últimas entradas quedaban fuera para siempre.
   * `--header-bottom` la escribe el módulo de navegación con la posición del
   * BORDE INFERIOR de la cabecera en el momento de abrir (72 px es el valor del
   * diseño, por si el JS no corre); el scroll es del panel y no se contagia a
   * la página detrás.
   *
   * Ojo, no confundir con `--header-h`, que es el ALTO de la cabecera y se usa
   * para el desplazamiento de los saltos a ancla. Son dos números distintos:
   * arriba del todo la franja de acento todavía ocupa sus 3 px y el borde
   * inferior queda en 76 mientras el alto sigue siendo 73. Los dos existían
   * bajo el mismo nombre y el segundo en llegar pisaba al primero.
   */
  max-height: calc(100dvh - var(--header-bottom, 72px));
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* En el panel el ancho manda sobre la línea única: un nombre de sección largo
   se parte en dos renglones en vez de desbordar a lo ancho. */
.site-nav[data-open="true"] a { white-space: normal; }

.site-nav[data-open="true"] ul {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-s);
}

/* En el menú desplegado el submenú se muestra en cascada, no flotando:
   una capa superpuesta dentro de un panel ya superpuesto se pierde. */
.site-nav[data-open="true"] .sub-menu {
  position: static;
  translate: none;
  opacity: 1;
  visibility: visible;
  min-width: 0;
  margin-top: var(--sp-2xs);
  padding: 0 0 0 var(--sp-s);
  background: transparent;
  border: 0;
  border-left: 1px solid var(--c-border);
  border-radius: 0;
  box-shadow: none;
  gap: var(--sp-2xs);
}

/* Pie ------------------------------------------------------------------ */

/*
 * Una sola maqueta: la variante A (`parts/footer-a.php`).
 *
 * Hasta el 24/08 convivían dos propuestas con un interruptor por cookie para
 * que el cliente comparara mirándolas. Eligió la A y el andamiaje se retiró
 * entero: el parcial de la B, `inc/pie-variante.php`, la barra de vista previa,
 * el atributo `[data-pie]` del `<footer>` y el token `--pie-b-sangrado`.
 *
 * `.pie-col*`, `.pie-cierre*` y `.pie-redes*` siguen en su propio bloque más
 * abajo: nacieron compartidos entre las dos propuestas y se quedan ahí porque
 * son piezas del pie, no de una maqueta concreta.
 */

.site-footer {
  padding-block: var(--sp-2xl) var(--sp-xl);
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg-elev);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

/* Columna de enlaces (compartida) --------------------------------------- */

.pie-col {
  min-width: 0;
}

/*
 * Rótulo de columna. Es un `<p>`, no un encabezado: el pie está fuera del
 * `<main>` y estos tres rótulos no abren secciones del documento. La relación
 * con su lista la declara el `aria-labelledby` del `<nav>`.
 */
.pie-col__titulo {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.pie-col__lista {
  display: grid;
  gap: var(--sp-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-col__enlace {
  display: inline-flex;
  align-items: center;

  /* Es un enlace: no baja del mínimo pulsable de la WCAG 2.5.8. */
  min-height: var(--tap-target-min);

  /* Los rótulos son títulos de página que escribe el cliente: "Capacitación
     Industrial" ya mide 22 caracteres y mañana puede medir 40. `anywhere` y no
     `break-word` porque dentro de un grid `break-word` NO reduce el tamaño
     mínimo intrínseco y la palabra larga sigue empujando la columna. */
  overflow-wrap: anywhere;

  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.pie-col__enlace:hover,
.pie-col__enlace:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Redes (compartida) ---------------------------------------------------- */

.pie-redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-m);
  margin: var(--sp-s) 0 0;
  padding: 0;
  list-style: none;
}

.pie-redes__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.pie-redes__enlace:hover,
.pie-redes__enlace:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Línea de cierre (compartida) ------------------------------------------ */

/*
 * La raya la dibuja el CONTENEDOR y no el párrafo del copyright: el copyright
 * es un ítem flex y su `border-top` medía lo que mide su texto —113 px a
 * 1440— en vez del ancho del pie. Con la marca en grande encima, ese trocito
 * de raya se leía como un accidente y no como el cierre de la página. Los dos
 * espacios se mudan con ella y así valen para el copyright y para el botón de
 * pausa por igual.
 */
.pie-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-s);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-m);
  border-top: 1px solid var(--c-border-soft);
}

.pie-cierre__legal {
  min-width: 0;
  margin: 0;
  color: var(--c-text-muted);
}

/* La razón social larga va en su propio renglón y no separada por un punto:
   con un separador en línea, a 320 px la frase parte donde cae y el copyright
   queda colgando a mitad de línea. */
.pie-cierre__nota {
  display: block;
  color: var(--c-text-faint);
  overflow-wrap: anywhere;
}

/* VARIANTE A — la marca como título de sección -------------------------- */

/*
 * El recorte por la línea de base. El porqué del número está en el docblock de
 * `parts/footer-a.php` y en el token; acá solo hay dos cosas que explicar:
 *
 *   `display: flow-root`  NO es decorativo. `overflow: clip` —a diferencia de
 *      `hidden`— NO crea contexto de formato de bloque, así que sin esto el
 *      margen inferior negativo del hijo se COLAPSA con el del padre en vez de
 *      recortar su alto: la caja mediría lo mismo y no se cortaría nada.
 *
 *   `overflow: clip` y no `hidden`  porque `hidden` convierte la caja en
 *      contenedor de desplazamiento; acá no hay nada que desplazar y sí un
 *      `position: sticky` en la página del que no conviene acercarse.
 */
.pie-a__marca {
  display: flow-root;
  overflow: clip;
}

.pie-a__marca .marca-pie {
  /* El margen superior del parcial es para cuando la marca cierra el pie; acá
     encabeza, y el aire ya lo pone el `padding-block` de `.site-footer`. */
  margin-top: 0;

  /* Porcentaje: se resuelve contra el ANCHO del contenedor, así que el gesto es
     el mismo a 320 y a 2560 px. Nunca un valor en píxeles. */
  margin-bottom: calc(-1 * var(--pie-a-recorte));
}

/*
 * La raya que separa la marca de los enlaces cae pegada al recorte: es la que
 * hace que la marca se lea "cortada por el pie" y no simplemente incompleta.
 * Por eso no hay `margin-top` entre la marca y esta rejilla.
 */
.pie-a__grid {
  display: grid;
  gap: var(--sp-xl) var(--sp-l);
  padding-top: var(--sp-l);
  border-top: 1px solid var(--c-border-soft);
}

@media (min-width: 560px) {
  .pie-a__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * El reparto sale de CUÁNTAS columnas quedaron con contenido (`data-cols`, lo
 * escribe la variante), no de cuántas hay declaradas: si el cliente todavía no
 * cargó el menú, las que sí tienen enlaces se reparten el ancho en vez de dejar
 * un cuarto del pie en blanco. La primera es la de la frase de posicionamiento
 * y siempre pide más ancho que una lista de enlaces.
 *
 * El corte a 1040 px NO es un número redondo elegido a ojo: es donde cada
 * columna de enlaces deja de partir el rótulo más largo. Medido con la fuente
 * ya cargada, "Agendar demo de 20 min" ocupa 180,3 px y "Capacitación
 * Industrial" 160,7. Con `1.5fr + 3 × 1fr` y 32 px de hueco, el ancho de
 * columna es (ancho_interior − 96) / 4,5, y el interior del contenedor es
 * 0,96 × ventana − 16: a 1040 px de ventana la columna mide 197 px y sobran 17;
 * a 960 mide 180 y el rótulo parte en dos. Por debajo de 1040 van dos columnas,
 * que a 1024 px se leen mejor que cuatro estrechas.
 */
@media (min-width: 1040px) {
  .pie-a__grid[data-cols="2"] { grid-template-columns: 1.5fr minmax(0, 1fr); }
  .pie-a__grid[data-cols="3"] { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); }
  .pie-a__grid[data-cols="4"] { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
}

.pie-a__intro {
  min-width: 0;
}

.pie-a__claim {
  /* `ch` se resuelve contra el tamaño de fuente de ESTE elemento, que es el que
     lleva el texto: acá sí mide lo que dice medir. */
  max-width: 34ch;
  margin: 0 0 var(--sp-s);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  overflow-wrap: anywhere;
}

.pie-a__estado {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  min-width: 0;
  margin: 0;
}

/*
 * El punto NO late: un punto que pulsa es movimiento que arranca solo y no
 * termina, así que entraría en la WCAG 2.2.2 y habría que sumarlo al control de
 * pausa. Un adorno no vale ampliar la superficie de un compromiso.
 */
.pie-a__punto {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-vertical-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-vertical-soft) 20%, transparent);
}

.pie-a__estado-enlace {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--tap-target-min);
  color: var(--c-text-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}

.pie-a__estado-enlace:hover,
.pie-a__estado-enlace:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}