/**
 * global.css — estructura y estilos compartidos por todo el sitio (Paso 4).
 *
 * REGLA VERIFICABLE (Paso 6): cero valor hexadecimal, cero declaración de
 * tipografía propia en este archivo — todo pasa por las custom properties
 * de tokens.css. Si hace falta un color, un tamaño de texto o una fuente
 * que tokens.css no expone todavía, se añade el token ahí, nunca se
 * hardcodea aquí.
 *
 * Cubre: header, footer, sat-portada (hero + tarjeta de confianza),
 * sat-banda-hechos, sat-banda-cta, breadcrumbs, base de .sat-cuerpo y la
 * estructura del botón flotante de WhatsApp.
 */

/* ── Base ───────────────────────────────────────────────────────────── */

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

body {
  /* El SUELO de la pagina es gris claro y las superficies —tarjetas, cabecera,
     desplegables— siguen siendo blancas. Esa separacion es la que da el 60/30/10
     del diseno: sin ella, una tarjeta blanca sobre fondo blanco necesita un borde
     para existir, y con ella se sostiene sola. (01-sep-2026) */
  background: var(--sat-color-bg-page);
  color: var(--sat-color-text);
}

a {
  color: var(--sat-color-brand);
}
a:hover,
a:focus {
  color: var(--sat-color-brand-light);
}

.sat-cuerpo {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--sat-gutter), 1fr)
    [content-start] min(100% - var(--sat-gutter) * 2, var(--sat-max-width-content)) [content-end]
    minmax(var(--sat-gutter), 1fr) [full-end];
  /* `cqi` es el `vw` que NO cuenta la barra de scroll: cualquier calculo de
     sangrado se hace contra el ancho real del contenedor. */
  container-type: inline-size;
}
/* Por DEFECTO todo cae en la columna de contenido. Una seccion que el
   pipeline emita manana y que nadie haya estilizado hereda esta regla. */
.sat-cuerpo > * {
  grid-column: content;
}

/* Solo el contenedor exterior referencia la miga absoluta. Los `.sat-cuerpo`
   anidados del contenido no deben crear nuevos contextos de posicionamiento. */
.entry-content.sat-cuerpo {
  position: relative;
}

/* `.sat-cuerpo` ANIDADO (18-ago-2026, medido en la página de Navarra en
   producción). Los lotes recientes del pipeline envuelven las secciones en su
   propio `<div class="sat-cuerpo">`, que cae DENTRO del
   `entry-content sat-cuerpo` que ya emiten las siete plantillas. Con dos
   niveles, el `max-width` y el `padding-inline` de arriba se aplican dos
   veces y el texto queda notablemente más estrecho de lo previsto —el
   síntoma que reportó el propietario— además de romper el cálculo de las
   bandas sangradas, que asume que su contenedor mide el ancho de contenido.

   Se neutraliza el nivel interior en vez de quitarlo del contenido: el
   marcado ya está publicado en cientos de páginas y esto tiene que funcionar
   con las dos formas. */
/* `.nosotros-page` es el MISMO problema con otro nombre, y se arregla con el
   mismo mecanismo (18-ago-2026, medido al migrar a la rejilla). La plantilla
   de nosotros/contacto envuelve su contenido en ese `<div>`, así que la
   portada quedaba como NIETA de la rejilla y no como hija:

     div.entry-content.sat-cuerpo > div.nosotros-page > div.sat-portada

   `grid-column: full` solo obedece a un HIJO DIRECTO de la rejilla. En un
   nieto es una declaración inerte: la portada se quedaba encajonada en la
   columna de contenido (medido: x=273 w=1360 en vez de 0/1905) y su H1 salía
   con doble sangrado. El envoltorio tiene que dejar pasar las líneas, no
   cortarlas — que es exactamente para lo que existe `subgrid`.

   REGLA GENERAL PARA QUIEN AÑADA UNA PLANTILLA: cualquier `<div>` que se
   interponga entre `.sat-cuerpo` y las secciones tiene que repetir estas tres
   declaraciones, o romperá todas las bandas que haya dentro. */
.sat-cuerpo > .sat-cuerpo,
.sat-cuerpo > .nosotros-page {
  grid-column: full;
  grid-template-columns: subgrid;
  /* SIN contencion aqui: un elemento con contencion de tamano NO puede ser
     subgrid (deja de heredar las lineas del padre y se convierte en una
     rejilla independiente). Medido: sin esta linea las secciones del nivel
     anidado se salian de la columna de contenido. */
  container-type: normal;
}

.sat-cuerpo strong {
  font-weight: 700;
}

/* MEDIDA DE LECTURA. El ancho del contenedor crece con la pantalla; el de un
   parrafo no. Se aplica a TODO parrafo del cuerpo y se retira solo donde el
   parrafo es una etiqueta dentro de una caja (tarjeta, celda), no prosa. */
.sat-cuerpo p {
  max-width: var(--sat-measure);
}
.sat-cuerpo :is(li, td, th, figcaption) p,
.sat-cuerpo :is(.sat-tarjeta, .sat-portada-confianza, .sat-ventajas) p {
  max-width: none;
}
/* En un bloque centrado la medida se centra con el; sin esto quedaria
   pegada a la izquierda. */
.sat-cuerpo :is(.sat-banda-cta, .sat-banda-hechos) p {
  margin-inline: auto;
}

/* ── IMAGEN DESTACADA DUPLICADA DE GENERATEPRESS ───────────────────────
   Medido en producción el 18-ago-2026: las páginas de silo pintan la imagen
   destacada DOS VECES. Una la emite GeneratePress antes de `#page`, como
   `<div class="featured-image page-header-image grid-container grid-parent">`
   a tamaño completo; la otra la emite nuestra plantilla dentro de
   `.sat-portada-media`, que es donde tiene que estar. El resultado es una
   foto enorme antes del H1 que empuja toda la página hacia abajo.

   `sattermos_suppress_gp_featured_image()` (functions.php §3) existe justo para
   evitarlo, pero no lo consigue en esta versión de GeneratePress: quita
   acciones y añade filtros cuyos nombres ya no son los que usa el tema padre.
   Esta regla es la segunda red —el mismo criterio de «dos redes» que ya se
   aplica a la cabecera y el pie duplicados de GP—: el CSS no depende de
   ningún nombre interno y se aplica seguro.

   Se limita a las páginas de silo (`sat-silo-*`), que son las únicas que
   renderizan la imagen en su propia portada. Una página ajena al silo que use
   la cabecera con imagen de GeneratePress sigue funcionando igual.

   NOTA: no ahorra la descarga, solo la duplicación visual — es el mismo
   archivo que ya carga la portada, así que no añade una petición. */
body[class*="sat-silo-"] .page-header-image {
  display: none;
}

/* ── Banda de confianza (encima de la cabecera) ────────────────────────
   template-parts/topbar.php. Tres afirmaciones desde
   `trust_bar.claims` de business-facts.json.

   Escritorio: las tres en fila, separadas por una línea vertical.
   Móvil: apiladas en la MISMA celda de rejilla y alternando opacidad — el
   `<li>` que no toca sigue ocupando su sitio y sigue en el árbol de
   accesibilidad, solo que transparente. Por eso la banda no da saltos de
   alto al rotar: mide siempre lo que mide el claim más largo.

   AGNÓSTICA AL RECUENTO: nada asume que sean tres. */

.topbar-silo {
  background: var(--sat-color-brand-dark);
  color: var(--sat-color-bg-alt);
}

.topbar-list {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  padding: var(--sat-space-2) var(--sat-space-3);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sat-space-3);
}

.topbar-claim {
  margin: 0;
  text-align: center;
}

/* El separador es un BORDE, no un carácter «|» metido por `content`: escala
   con la tipografía, no lo lee el lector de pantalla y no depende de que la
   fuente traiga la barra. Sobre `li + li`, así que nunca sobra uno al final
   ni falta al principio, sean tres claims o cinco. */
.topbar-claim + .topbar-claim {
  border-inline-start: 1px solid var(--sat-color-brand);
  padding-inline-start: var(--sat-space-3);
}

@media (max-width: 62rem) {
  .topbar-list {
    display: grid;
    padding-block: var(--sat-space-1);
  }
  .topbar-claim {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .topbar-claim.is-active {
    opacity: 1;
  }
  /* En móvil no hay fila que separar: solo se ve un claim cada vez. */
  .topbar-claim + .topbar-claim {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* Sin animación declarada: el JS no arranca la rotación bajo
   `prefers-reduced-motion` y deja fijo el primer claim, así que aquí solo hay
   que asegurarse de que ese primero se vea y de que no haya transición. */
@media (prefers-reduced-motion: reduce) {
  .topbar-claim {
    transition: none;
  }
}

/* ── Header ─────────────────────────────────────────────────────────── */
/* SEIS entradas, tres desplegables, resueltas desde nav.generated.php
   (template-parts/header-silo.php) + el slot CTA. El slot no lleva estilo
   propio aquí: el plugin del propietario decide su apariencia; solo se le
   reserva el hueco en el layout flex.

   AGNÓSTICO AL RECUENTO, como el resto de este archivo: ninguna regla asume
   6 entradas ni 7 ítems por desplegable. Si mañana el contrato añade o quita
   una, el layout no se entera. */

.header-silo {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sat-color-bg);
  border-bottom: 1px solid var(--sat-color-border);
}
/* Sombra solo cuando el header ya flota sobre contenido desplazado — la añade
   assets/js/global.js. En reposo, arriba del todo, no hay nada bajo lo que
   proyectar sombra. */
.header-silo.is-scrolled {
  box-shadow: var(--sat-shadow-card);
}

.header-inner {
  position: relative;
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  padding-inline: var(--sat-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sat-space-3);
  min-height: 4rem;
}

.header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--sat-color-text);
  flex-shrink: 0;
}
.header-logo-img {
  max-height: 2.5rem;
  width: auto;
}
.logo-text {
  color: var(--sat-color-brand);
}

.header-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.header-burger span {
  display: block;
  height: 2px;
  width: 1.5rem;
  margin-inline: auto;
  background: var(--sat-color-text);
  border-radius: var(--sat-radius);
  transition: transform 0.2s ease, opacity 0.15s ease;
}
/* Las tres barras se convierten en una X cuando el menú está abierto. El estado
   se lee del propio `aria-expanded`, no de una clase paralela: un solo origen
   de verdad para lo que ve el usuario y para lo que anuncia el lector. */
.header-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-nav .nav-list {
  display: flex;
  align-items: center;
  gap: var(--sat-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Enlace simple y botón de desplegable comparten caja a propósito: en el menú
   son la misma cosa para el usuario, aunque uno sea <a> y el otro <button>. */
.nav-link,
.nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sat-space-1);
  padding: var(--sat-space-2) var(--sat-space-2);
  border: 0;
  border-radius: var(--sat-radius);
  background: transparent;
  /* `font: inherit` NO es una excepción a la regla del Paso 6: no declara
     ningún tamaño ni ninguna familia, hace lo contrario — impide que el
     navegador imponga su tipografía por defecto de <button>, que es la única
     forma de que el botón del desplegable se lea igual que el <a> de al lado. */
  font: inherit;
  font-weight: 600;
  color: var(--sat-color-text);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.nav-link:hover,
.nav-link:focus,
.nav-dropdown-btn:hover,
.nav-has-dropdown.is-open .nav-dropdown-btn {
  color: var(--sat-color-brand);
  background: var(--sat-color-bg-alt);
}
.nav-link:focus-visible,
.nav-dropdown-btn:focus-visible,
.nav-dropdown a:focus-visible {
  outline: 2px solid var(--sat-color-brand-light);
  outline-offset: 2px;
}
/* Página actual: subrayado de marca, no solo color — el color por sí solo no es
   un indicador accesible. `aria-current="page"` lo emite la plantilla. */
.nav-link.is-current,
.nav-dropdown a[aria-current="page"] {
  color: var(--sat-color-brand);
  box-shadow: inset 0 -2px 0 var(--sat-color-brand);
}

.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-has-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}

.nav-has-dropdown {
  position: relative;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: var(--sat-space-2);
  list-style: none;
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  box-shadow: var(--sat-shadow-card);
  z-index: 10;
}
.nav-has-dropdown.is-open .nav-dropdown {
  display: block;
}
.nav-dropdown li {
  margin: 0;
  padding: 0;
}
.nav-dropdown a {
  display: block;
  padding: var(--sat-space-2);
  border-radius: var(--sat-radius);
  color: var(--sat-color-text);
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus {
  background: var(--sat-color-bg-alt);
  color: var(--sat-color-brand);
}
/* «Ver todos los servicios» / «Ver todas las marcas»: separado del resto porque
   no es un hermano de los otros ítems, es la salida al hub. Sin él, las marcas
   fuera del menú serían páginas isla — el fallo del sitio de placas. */
.nav-dropdown-more {
  margin-top: var(--sat-space-1);
  padding-top: var(--sat-space-1);
  border-top: 1px solid var(--sat-color-border);
}
.nav-dropdown-more a {
  font-weight: 700;
  color: var(--sat-color-brand);
}

/* ── Header en móvil / tableta ─────────────────────────────────────────
   Por debajo de 62rem el nav se convierte en un panel desplegable y cada
   desplegable pasa a acordeón EN FLUJO (position: static): un panel flotante
   dentro de otro panel flotante no cabe en 360px de ancho.

   `max-height` + scroll propio: con tres desplegables abiertos el menú es más
   alto que la pantalla de un móvil, y sin esto el final de la lista queda
   inalcanzable. `dvh` para que la barra de direcciones del navegador móvil no
   recorte el último ítem al replegarse. */
/* ══ CABECERA DE DOS FILAS ═══════════════════════════════════════════════
   Fila 1, destacada:  logo · índice de secciones de esta página · CTA grande
   Fila 2, secundaria: el menú hacia otras zonas del sitio

   La jerarquía es el argumento: quien ya está dentro de una página quiere
   moverse POR ELLA. El menú del sitio es la salida, y una salida no se pinta
   más grande que el contenido. (02-sep-2026)

   Las dos filas viajan pegadas: `.header-silo` sigue siendo el único `sticky`
   y las filas son hijas normales. Un segundo `sticky` anidado no se apila
   solo — se quedaría pegado DENTRO de su padre, que ya está quieto. */

.header-fila--principal {
  background: var(--sat-color-bg);
}
/* Menos destacada por tamaño y por contraste, no por otro color de marca:
   dos azules compitiendo en la misma cabecera es lo que la haría ilegible. */
.header-fila--secundaria {
  background: var(--sat-color-bg-alt);
  border-top: 1px solid var(--sat-color-border);
  font-size: 0.9375rem;
}
.header-fila--secundaria .header-inner {
  min-height: 2.75rem;
}
.header-fila--secundaria .nav-link,
.header-fila--secundaria .nav-dropdown-btn {
  padding-block: var(--sat-space-1);
  color: var(--sat-color-text-secondary);
  font-weight: 500;
}

/* ── EL ÍNDICE DE SECCIONES ────────────────────────────────────────────── */
/* ── LOS TRES SITIOS DE LA FILA PRINCIPAL ──────────────────────────────────
   Escritorio: logo a la izquierda, CTA CENTRADO, índice a la derecha.

   El centrado del CTA es óptico, no «entre sus vecinos»: tiene que caer en la
   mitad de la fila aunque el logo mida 180 px y el índice 400. Se consigue
   dando a los dos flancos la misma base flexible (`flex: 1 1 0`) y dejando al
   CTA en su tamaño natural — los dos costados crecen igual y el del medio
   queda en el centro. No hace falta rejilla ni posicionamiento absoluto.

   `min-width: 0` en los dos flancos porque un elemento flexible no encoge por
   debajo de su contenido: sin él, un índice largo ensancharía su mitad, la
   fila se desbordaría y el CTA se saldría del centro. */
.header-anclas {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sat-space-1);
  justify-content: flex-end;
}
/* 🔴 EL QUE SE DESPLAZA ES EL `<ul>`, NO ESTE CONTENEDOR. Si la alineación a
   la derecha viviera en el contenedor con desbordamiento, al desbordar el
   PRIMER enlace quedaría fuera por la izquierda y sin forma de llegar a él:
   es el fallo clásico de `justify-content: flex-end` sobre un contenedor con
   scroll. Así, mientras cabe, la lista se pega a la derecha; cuando no cabe,
   ocupa el ancho entero y se desplaza desde el principio. */
.header-anclas .anclas-lista {
  /* `1 auto` y no `1 1 auto`: la lista encoge para dejar sitio a las flechas
     cuando aparecen, pero no crece más allá de sus enlaces — si creciera, con
     pocas anclas quedaría un tramo vacío entre la última y el borde y la
     alineación a la derecha no se notaría. */
  flex: 0 1 auto;
  min-width: 0;
}
@media (min-width: 62.0625rem) {
  .header-logo-img {
    max-height: 3.5rem;
  }
  /* 🔴 SOLO CUANDO HAY CTA. Los dos flancos iguales existen para centrar lo
     del medio; sin nada en el medio, lo único que hacen es partir la fila en
     dos mitades y obligar al índice a desplazarse con hueco libre al lado del
     logo. Y hoy no hay CTA: el plugin del propietario todavía no responde al
     slot `sattermos_cta_slot` con el nombre 'header', así que
     `sattermos_cta_cabecera()` no imprime nada.

     Con `:has()` la cabecera se adapta sola el día que el plugin conteste, sin
     tocar este fichero. */
  .header-fila--principal .header-inner:has(.header-cta) .header-logo {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Sin CTA: el logo ocupa lo suyo y el índice se lleva el resto, pegado a la
     derecha. Es la misma fila, con una pieza menos. */
  .header-fila--principal .header-inner:not(:has(.header-cta)) .header-anclas {
    flex: 1 1 auto;
  }
}
.anclas-lista {
  display: flex;
  align-items: center;
  gap: var(--sat-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Las páginas largas tienen ocho o diez secciones: en vez de recortar la
     lista —que es decidir por el lector cuáles no le interesan— la fila se
     desplaza. La barra se oculta porque el desbordamiento ya se ve en el
     degradado del borde. */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.anclas-lista::-webkit-scrollbar {
  display: none;
}
/* ── QUE SE VEA QUE LA FILA SIGUE: FLECHAS ────────────────────────────────
   La fila se desplaza en horizontal, pero sin señal el último enlace queda
   partido contra el borde y se lee como un fallo de maquetación. El
   propietario lo vio en el móvil y pidió «una barra lateral o flechitas hacia
   ambos lados, como si fuese un slide».

   FLECHAS Y NO BARRA DE DESPLAZAMIENTO. En iOS la barra es de superposición:
   está oculta en reposo y solo aparece MIENTRAS se desliza — o sea, avisa
   después de que ya hayas descubierto que se desliza, que es justo cuando ya
   no hace falta. La flecha se ve quieta.

   Aquí vivía un desvanecido con `mask-image` que hacía este mismo papel. Se
   retira: en la captura del propietario no se veía, porque Safari necesita
   `-webkit-mask-image` y solo estaba la propiedad sin prefijo. Una señal que
   funciona en la mitad de los móviles no es una señal, y arreglarla habría
   dejado dos mecanismos para lo mismo.

   Las clases las pone assets/js/global.js según quede recorrido a cada lado.
   Sin JS no hay flechas: la fila se desliza con el dedo igual que antes. */
.anclas-flecha {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sat-color-bg);
  color: var(--sat-color-brand);
  cursor: pointer;
  box-shadow: var(--sat-shadow-card);
}
.anclas-flecha svg {
  width: 1rem;
  height: 1rem;
}
.header-anclas.tiene-antes .anclas-flecha--antes,
.header-anclas.tiene-mas .anclas-flecha--mas {
  display: flex;
}

.ancla-enlace {
  display: inline-block;
  padding: var(--sat-space-1) var(--sat-space-2);
  border-radius: var(--sat-radius);
  color: var(--sat-color-text);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.ancla-enlace:hover,
.ancla-enlace:focus-visible {
  color: var(--sat-color-brand);
  background: var(--sat-color-bg-alt);
}
/* La sección que se está leyendo. La marca assets/js/global.js; sin JS la fila
   sigue siendo una lista de enlaces que funciona. */
.ancla-enlace.is-activa {
  color: var(--sat-color-brand);
  border-bottom-color: var(--sat-color-cta);
}

/* ── EL CTA DE TELÉFONO, EN GRANDE ─────────────────────────────────────────
   El tema NO construye el botón: el marcado lo inyecta el plugin del
   propietario en el slot `sattermos_cta_slot` con el nombre 'header'. Aquí
   solo se le da tamaño y sitio. Por eso las reglas apuntan a los descendientes
   genéricos (`a`, `strong`) y no a ninguna clase concreta: no se puede acotar
   por un nombre que este repositorio no escribe. */
.header-cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.header-cta-lista {
  display: flex;
  align-items: center;
  gap: var(--sat-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* El botón es el MISMO que el del hero —misma plantilla, misma clase
   `CtaLlamada`, mismo color—; aquí solo se ajusta a la altura de una barra.
   No se redefine su fondo ni su tipografía: si mañana cambia el naranja de
   marca, tiene que cambiar en los dos sitios a la vez. */
.header-cta .sat-cta-llamada--compacto {
  display: flex;
  /* `.sat-cta-llamada` hereda `margin-top: var(--sat-space-4)` (global.css
     :3212), que ahí separa el botón del párrafo que lo precede en la portada.
     En una barra de una sola línea no hay párrafo del que separarse. Se
     declara el margen COMPLETO, no solo el de arriba: así el valor no depende
     de qué traiga heredado la regla de la portada. */
  margin: 0.5rem;
}

/* ── LO QUE MONTA EL PLUGIN DENTRO DEL BOTÓN ───────────────────────────────
   El JS de «city contact» hace `btn.innerHTML = ''` y reconstruye el botón con
   `.ccm-call-before` (el rótulo «llama ahora»), `.ccm-phone-number` y
   `.ccm-call-after`. O sea: el icono y el «Llamar ahora» que imprime
   template-parts/cta-llamada.php DESAPARECEN en cuanto el plugin corre — lo
   que se ve al final es esto, no lo que hay en el marcado del tema.

   🔴 TODO ACOTADO A `.header-cta`. Las mismas clases están en el CTA del hero
   y en el de `sat-alcance`, donde el rótulo sí acompaña y el tamaño es otro.
   Una regla suelta sobre `.ccm-phone-number` los cambiaría los tres. */
.header-cta .ccm-call-before {
  /* En la cabecera el número se basta solo: el rótulo delante alarga el botón
     y repite lo que el propio icono de teléfono ya dice. */
  display: none;
}
.header-cta .ccm-phone-number {
  font-size: 2.125rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.header-cta .sat-cta-boton {
  padding: var(--sat-space-3) var(--sat-space-5);
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: nowrap;
}
/* Cuando el plugin cablea el número, sale a la vista y en grande: es lo que el
   propietario pidió ver en la cabecera. Sin plugin y sin `contact.phone_tel`
   este `<span>` no se imprime y queda «Llamar ahora», que sigue siendo un CTA
   entero. */
.header-cta .sat-cta-numero {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── EL ANCLAJE NO QUEDA DEBAJO DE LA CABECERA ─────────────────────────────
   Con una cabecera pegajosa, saltar a `#sec-faq` deja el titular tapado. El
   alto real lo mide `global.js` y lo escribe en `--sat-header-alto`; el valor
   de reserva cubre las dos filas por si el script no llega. */
:root {
  --sat-header-alto: 7rem;
}
.sat-cuerpo > section[id] {
  scroll-margin-top: calc(var(--sat-header-alto) + var(--sat-space-3));
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 62rem) {
  /* En móvil la segunda fila no pinta nada cuando el menú está cerrado: el
     panel lo abre la hamburguesa de la fila de arriba. Se deja sin alto ni
     borde para que no quede una banda vacía, y sin `position: relative` para
     que el panel cuelgue de `.header-silo` —la cabecera entera— y no de una
     fila de altura cero. */
  .header-fila--secundaria,
  .header-fila--secundaria .header-inner {
    position: static;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .header-cta a {
    font-size: 1.0625rem;
  }
  /* El índice pasa a su propia línea: en 360 px, logo + índice + teléfono en
     una sola fila no caben sin que el índice quede en dos palabras. */
  .header-fila--principal .header-inner {
    flex-wrap: wrap;
  }
  .header-anclas {
    flex-basis: 100%;
    margin-inline: calc(var(--sat-space-3) * -1);
    border-top: 1px solid var(--sat-color-border);
  }
  /* El relleno va en la LISTA, no en el contenedor: si lo lleva el contenedor,
     el desplazamiento empieza después del relleno y el primer enlace nace
     pegado al borde al desplazar. */
  .anclas-lista {
    padding-inline: var(--sat-space-3);
  }
}

@media (max-width: 62rem) {
  .header-burger {
    display: flex;
  }
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sat-color-bg);
    border-top: 1px solid var(--sat-color-border);
    border-bottom: 1px solid var(--sat-color-border);
    box-shadow: var(--sat-shadow-card);
  }
  .header-nav.is-open {
    display: block;
  }
  .header-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sat-space-2) var(--sat-space-3);
  }
  .header-nav .nav-item {
    border-bottom: 1px solid var(--sat-color-border);
  }
  .header-nav .nav-item:last-child {
    border-bottom: 0;
  }
  .nav-link,
  .nav-dropdown-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: var(--sat-space-3) var(--sat-space-2);
    border-radius: 0;
  }
  .nav-has-dropdown {
    position: static;
  }
  .nav-dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 var(--sat-space-2) 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-dropdown a {
    padding: var(--sat-space-2) var(--sat-space-2) var(--sat-space-2) var(--sat-space-4);
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-burger span,
  .nav-chevron,
  .nav-link,
  .nav-dropdown-btn {
    transition: none;
  }
}

/* ── Breadcrumbs ────────────────────────────────────────────────────── */

.breadcrumbs-silo {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  /* `.sat-cuerpo` es el containing block: la ruta queda ligada a la portada,
     no al viewport, a 20 px del comienzo del contenido bajo la cabecera. */
  padding: var(--sat-breadcrumb-offset-top) var(--sat-space-3) 0;
  color: var(--sat-color-text-secondary);
}
.breadcrumbs-silo a {
  color: var(--sat-color-brand);
}
.breadcrumbs-silo .rank-math-breadcrumb p {
  margin: 0;
  color: var(--sat-color-text-secondary);
}
.breadcrumbs-silo a:hover,
.breadcrumbs-silo a:focus-visible {
  color: var(--sat-color-brand-light);
}

/* La miga absoluta no reserva espacio. Este margen superior, combinado con
   los 30 px del texto, mantiene separación incluso cuando Rank Math ocupa
   una línea completa en móvil. */
.breadcrumbs-silo + .sat-portada {
  padding-top: var(--sat-space-4);
}

@media (max-width: 48rem) {
  /* En pantallas estrechas Rank Math puede partir la ruta en dos líneas. */
  .breadcrumbs-silo + .sat-portada {
    padding-top: var(--sat-space-5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTADA (hero) — COMPONENTE COMPARTIDO POR TODAS LAS PLANTILLAS DE SILO
   Marcado: template-parts/portada.php.

   POR QUÉ ESTÁ AQUÍ Y NO EN LA HOJA DE UN SILO (18-ago-2026). El rediseño
   se hizo primero solo en provincias.css. El propietario abrió una página de
   CIUDAD y no vio nada: las ciudades cargan `core.css`, no `provincias.css`.
   El hero es el mismo en los siete silos, así que su CSS tiene que vivir en
   el archivo que cargan todos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El contenedor de GeneratePress ────────────────────────────────────
   GP corre en layout «Contained» + «separate containers»: envuelve todo en
   `#page.grid-container` con `max-width` y reparte relleno entre contenido y
   artículo. Eso estrechaba la página y, con la portada sangrada a color,
   recortaba el fondo y dejaba una franja en blanco bajo la cabecera.

   Se libera en las páginas de silo, que son las que pintan su propio hero a
   ancho completo. Selector de ID para ganar al CSS en línea que GP emite
   desde el personalizador. La cabecera y el pie del tema se imprimen fuera
   de `#page`, así que esto no los toca. */

body[class*="sat-silo-"] #page.grid-container {
  max-width: none;
  padding-inline: 0;
  /* `clip` y no `hidden`: no crea contexto de scroll y no rompe el
     `position: sticky` de la cabecera. Absorbe el ancho de la barra de
     scroll, que `100vw` sí cuenta y el contenedor no. */
  overflow-x: clip;
}
body[class*="sat-silo-"] #content.site-content,
body[class*="sat-silo-"] #primary,
body[class*="sat-silo-"] #main.site-main {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}
body[class*="sat-silo-"] .site-main > article {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
/* El H1 lo pinta la portada; el título de entrada de GP sería un segundo
   encabezado duplicado. */
body[class*="sat-silo-"] .entry-title {
  display: none;
}

/* ── La banda ─────────────────────────────────────────────────────────
   Sangra a ancho de ventana para que el fondo llegue a los bordes, mientras
   el texto sigue centrado en la misma columna que el resto de la página. */

.sat-portada {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sat-space-5);
  align-items: center;
  /* `space-5` y no `space-6`: con el titular a `--sat-text-4xl` la columna de
     texto ya es alta por sí sola, y el relleno anterior hacía una banda
     desproporcionada — el propietario lo notó como «el banner es más alto y
     es un error». La foto no influye en el alto: lo manda el texto. */
  padding-block: var(--sat-space-5);
  grid-column: full;
  padding-inline: max(var(--sat-gutter), (100% - var(--sat-max-width-content)) / 2);
  /* FONDO BLANCO (18-ago-2026, decisión del propietario: «cambia el celeste
     de fondo por blanco»). Se conserva la trama de puntos, que es lo que
     evita que el hero quede plano ahora que no hay degradado de color.
     ORDEN DE CAPAS: en CSS la PRIMERA es la de arriba — con los puntos
     declarados los últimos quedaban enterrados y no se veían. */
  background-color: var(--sat-color-bg);
  background-image:
    radial-gradient(
      circle at center,
      color-mix(in srgb, var(--sat-color-brand) 14%, transparent) 1px,
      transparent 1.5px
    );
  background-size: 1.25rem 1.25rem;
  background-position: top left;
  background-repeat: repeat;
}

/* La banda ya centra su contenido con su propio relleno: las dos columnas no
   pueden volver a limitarse por su cuenta o quedarían centradas dentro de sí
   mismas. */
.sat-portada > * {
  max-width: none;
  padding-inline: 0;
}

.sat-portada-texto,
.sat-portada-media {
  width: 100%;
}

/* El texto va SIEMPRE por encima de la foto: la imagen la solapa por debajo
   y sin este contexto de apilamiento el titular quedaría tapado. */
.sat-portada-texto {
  position: relative;
  z-index: 1;
  padding-top: var(--sat-portada-texto-padding-top);
}

.sat-portada h1 {
  color: var(--sat-color-brand-dark);
  max-width: 16ch;
  /* El titular de portada va más apretado que un H1 de cuerpo: a este cuerpo
     de letra, el interlineado normal es lo que hacía crecer la banda de alto.
     No es un `font-size` — la escala sigue viviendo solo en tokens.css. */
  line-height: 1.08;
  margin-bottom: var(--sat-space-3);
}

/* El topónimo, en color de marca. Lo envuelve la plantilla a partir del
   propio H1 — el «en» se queda fuera a propósito. */
/* La entidad que la página identifica —el lugar en provincias, el fabricante
   en marcas— sube al azul claro sobre el titular en azul de marca. Es el mismo
   papel y por eso comparten regla. */
.sat-portada-lugar,
.sat-portada-marca,
.sat-lugar {
  color: var(--sat-color-brand-light);
}

/* ── Rótulo de portada ────────────────────────────────────────────────
   Filete de dos tramos —azul de marca y naranja de acción— resuelto con un
   degradado de paradas duras sobre un solo pseudo-elemento, no con dos
   elementos ni dos bordes. */

.sat-portada-rotulo {
  display: flex;
  align-items: center;
  gap: var(--sat-space-3);
  margin-bottom: var(--sat-space-3);
  color: var(--sat-color-brand);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sat-portada-rotulo::before {
  content: "";
  flex: 0 0 auto;
  width: 3.5rem;
  height: 0.1875rem;
  border-radius: var(--sat-radius);
  background: linear-gradient(
    to right,
    var(--sat-color-brand-dark) 0 60%,
    var(--sat-color-cta) 60% 100%
  );
}

/* ── Imagen ───────────────────────────────────────────────────────────
   Es la IMAGEN DESTACADA de la página. Sangra hasta el borde derecho de la
   ventana: el margen negativo es exactamente el inverso del `padding-inline`
   de la banda, así que el cálculo no se puede desincronizar. Sin tarjeta,
   sin sombra y sin radio — forma parte del fondo del hero. */

.sat-portada-media {
  position: relative;
}
.sat-portada-media img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 30rem;
  object-fit: cover;
  border-radius: 0;
}

@media (min-width: 62rem) {
  /* 60/40 (18-ago-2026, petición del propietario). El texto manda porque es
     lo que posiciona; la foto gana presencia por el sangrado, no por robarle
     columna al titular. */
  /* 55/45 desde el 01-sep-2026. Era 60/40 cuando la derecha era una foto, que
     se deja recortar; ahora son cuatro tarjetas con texto y a 40 % las frases
     rompían a tres y cuatro líneas. El texto sigue mandando en la izquierda. */
  .sat-portada {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--sat-space-4);
    /* 70vh en escritorio (01-sep-2026, petición del propietario): la banda
       ocupa una porción fija de la ventana y el pliegue cae siempre en el
       mismo sitio, en vez de moverse según lo largo que sea el titular de cada
       provincia.

       `min-height` y no `height`: si en una ventana baja el contenido no cabe
       en 70vh, con `height` se saldría de la caja y las tarjetas quedarían
       cortadas. Así la banda crece cuando hace falta y nunca recorta. */
    min-height: 70vh;
    align-content: center;
  }
  /* `--sin-media` YA NO COLAPSA A UNA COLUMNA. Significaba «no hay foto, así
     que no hay nada a la derecha»; desde que la derecha son las tarjetas de
     dolor —que salen de business-facts.json y existen en todas las páginas—
     hay contenido ahí aunque la página no tenga destacada. Colapsar dejaría a
     las 311 futuras páginas de ciudad sin las cuatro respuestas. El modificador
     se conserva porque sigue diciendo algo cierto: esta página no pinta foto de
     fondo, y el velo es entonces el fondo liso de la banda. */
  /* Sin el `min-width: 0` implicito de arriba una celda de rejilla nunca
     encoge por debajo de su contenido y la foto vuelve a desbordar. */
  .sat-portada-media {
    /* `width: auto` NO ES DECORATIVO. Con el `width: 100%` que la columna
       hereda, la caja mide exactamente su celda de rejilla y el margen
       negativo ya no puede ensancharla: se aplica (medido: -130px) pero la
       foto se queda en 472px y no llega al borde. Con `auto`, el estirado de
       la rejilla resuelve el ancho como «celda menos márgenes», y un margen
       negativo la ensancha, que es justo lo que se busca. */
    width: auto;
    align-self: stretch;
    margin-block: calc(-1 * var(--sat-space-5));
    margin-inline-end: calc(
      -1 * max(var(--sat-gutter), (100cqi - var(--sat-max-width-content)) / 2)
    );
    /* La foto entra por debajo de la columna de texto (petición del
       propietario, 18-ago-2026: «que se difumine y pase por debajo un
       poquito del h1»). El solape es del ancho de la propia rejilla, no una
       cifra suelta, para que no haya que retocarlo si cambia el reparto de
       columnas. */
    margin-inline-start: calc(-1 * var(--sat-space-6));
    z-index: 0;
    /* LA FOTO NO PUEDE MANDAR EN EL ALTO DE LA BANDA. Medido el 18-ago-2026:
       con la imagen en flujo, al ensanchar su columna a 666px conservaba su
       proporción natural y crecía hasta 833px de alto, arrastrando la fila
       entera — mientras la columna de texto medía 537. Era exactamente lo que
       describió el propietario: «como la imagen ocupa más ancho, el banner
       también es más alto».
       Sacándola del flujo (`position: absolute` en el `img`), la caja deja de
       aportar altura: manda el texto y la foto se estira a lo que resulte. */
    overflow: hidden;
    min-height: 0;
  }
  .sat-portada-media img {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    /* DIFUMINADO RETIRADO (20-ago-2026, peticion del propietario).
       Aqui habia una `mask-image` en degradado que dejaba entrar la foto en
       transparente por su borde izquierdo. Existia porque la imagen SOLAPA
       bajo la columna de texto —ver el `margin-inline-start` negativo de
       arriba, «que se difumine y pase por debajo un poquito del h1»— y sin
       ella la foto llega a plena opacidad justo donde cae el titular.
       El solape sigue en pie: si el H1 se lee mal sobre la foto en alguna
       pagina, la salida es reducir ese margen negativo, no devolver la
       mascara a escondidas. */
  }
}

/* ── Diferenciales DENTRO de la portada ───────────────────────────────
   El mismo bloque que más abajo se estiliza como tarjetas cuando va suelto,
   aquí es una fila en línea bajo la entradilla: sin fondo, sin borde y
   separada por filetes. Variación de FORMA por contexto — el HTML y los
   datos son exactamente los mismos. */

/* El prefijo `.sat-cuerpo` NO es decorativo (misma trampa documentada en
   `.sat-banda-diferenciales` más abajo). Este bloque es un `<section
   class="sat-banda-diferenciales">` DENTRO de `.sat-portada-texto`, así que
   la base `.sat-cuerpo section[class^="sat-"]` (0,2,1) le cae encima y le
   gana a `.sat-portada .sat-banda-diferenciales` (0,2,0): medido, el
   `padding: 0` de aquí NUNCA se aplicaba y la fila heredaba los 2.5rem de la
   base. Daba igual mientras la base era fija; con el relleno fluido serían
   ~92px arriba y abajo METIDOS EN EL HERO. Con `.sat-cuerpo` delante la regla
   vale (0,3,0) y gana por número de clases, que es lo que decide antes que el
   selector de elemento. */
.sat-cuerpo .sat-portada .sat-banda-diferenciales {
  margin-top: var(--sat-space-5);
  padding: 0;
  border: 0;
}
/* EN ESTRECHO, UNA COLUMNA LIMPIA (19-ago-2026). Con `flex-wrap` cada
   diferencial medía lo que medía su texto, así que al envolver quedaban
   escalonados —empezando cada uno en una sangría distinta— y encima el
   `padding-inline` de la fila los desalineaba entre sí. Una rejilla de una
   columna los alinea todos al mismo margen izquierdo, y la separación la pone
   el `gap`, no un relleno que además desplaza el primero. */
.sat-portada .sat-banda-diferenciales ul {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sat-space-3);
}
.sat-portada .sat-banda-diferenciales li {
  padding-inline: 0;
}
.sat-portada .sat-banda-diferenciales li {
  flex: 0 1 auto;
  align-items: center;
  gap: var(--sat-space-2);
  /* SIN relleno lateral por defecto: en móvil van apilados y cualquier
     sangría deja cada uno empezando en un sitio distinto — el escalonado que
     reportó el propietario. La separación entre filas la pone el `gap`. El
     relleno se repone solo en escritorio, donde sí separa columnas. */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.sat-portada .sat-banda-diferenciales li:hover {
  transform: none;
  box-shadow: none;
}
/* (Retirada la excepción del primer elemento: con relleno 0 por defecto ya
   no hay nada que compensar. En escritorio se repone abajo, y allí sí se
   exceptúa el primero para que su icono alinee con el titular.) */
/* El icono pierde la caja de color: aquí es un trazo suelto del tamaño de
   las dos líneas de texto que acompaña. Va en el MISMO azul con el que se
   resalta el topónimo del titular (`--sat-color-brand-light`), no en el azul
   oscuro del texto: los dos son los acentos de la portada y tienen que
   leerse como el mismo gesto. */
.sat-portada .sat-diferencial-icono {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--sat-color-brand-light);
}
/* SIN `stroke-width` AQUÍ. Esta regla lo bajaba a 1.5 y pisaba el atributo
   del propio SVG, así que los iconos del hero se veían más finos que los del
   panel de ventajas siendo el mismo dialecto. El grosor lo decide un único
   sitio: `sattermos_icono()` en functions.php. */
.sat-portada .sat-diferencial-icono svg {
  width: 2rem;
  height: 2rem;
}

@media (min-width: 62rem) {
  /* Cabiendo en una fila, se separan con filete. `nowrap` + `min-width: 0`
     deja que el texto se estreche antes que romper la fila. Declarado fuera
     de esta consulta, en móvil pintaba una raya suelta a la izquierda del
     que bajaba de línea. */
  .sat-portada .sat-banda-diferenciales ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
  }
  .sat-portada .sat-banda-diferenciales li {
    padding-inline: var(--sat-space-3);
  }
  .sat-portada .sat-banda-diferenciales li:first-child {
    padding-inline-start: 0;
  }
  .sat-portada .sat-banda-diferenciales li {
    min-width: 0;
  }
  .sat-portada .sat-banda-diferenciales li + li {
    border-inline-start: 1px solid var(--sat-color-border);
  }
}

/* ── Entrada del hero ─────────────────────────────────────────────────
   Al cargar, no al hacer scroll: ya está en pantalla. */

@keyframes sat-portada-izquierda {
  from { opacity: 0; transform: translateX(-2.5rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes sat-portada-derecha {
  from { opacity: 0; transform: translateX(2.5rem); }
  to   { opacity: 1; transform: none; }
}
.sat-portada-texto {
  animation: sat-portada-izquierda 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sat-portada-media {
  animation: sat-portada-derecha 0.7s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .sat-portada-texto,
  .sat-portada-media {
    animation: none;
  }
}

/* Entradilla del hero: la emiten las 7 plantillas de silo extrayendo
   `<p class="entradilla">` del contenido. Sin regla propia heredaba el
   párrafo base y no se distinguía del cuerpo. Sin `font-size` — la escala
   tipográfica vive entera en tokens.css (regla verificable del Paso 6). */
.sat-portada-sumario {
  color: var(--sat-color-text-secondary);
  max-width: 52ch;
  margin-block: var(--sat-space-3);
}

.sat-portada-confianza {
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  box-shadow: var(--sat-shadow-card);
  padding: var(--sat-space-3);
  margin-top: var(--sat-space-3);
}
.sat-portada-confianza ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sat-space-2);
}
.sat-portada-confianza li {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.sat-portada-confianza strong {
  color: var(--sat-color-brand);
}
.sat-portada-confianza span {
  color: var(--sat-color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   PANEL DE VENTAJAS EN sat-servicios (18-ago-2026)
   Marcado: template-parts/panel-ventajas.php, inyectado por
   `sattermos_inyectar_panel_ventajas()`. La sección pasa a tres columnas:
   icono · texto del contenido · tarjeta de ventajas.

   El reparto se hace por EXCLUSIÓN (`> *:not(...)`) y no enumerando los
   hijos: el contenido de `sat-servicios` cambia de una página a otra —a
   veces `<h2>` + dos párrafos, a veces además una `<ul>`— y cualquier regla
   que dé por hecho cuántos hijos hay se rompe en la siguiente.
   ═══════════════════════════════════════════════════════════════════════ */

/* DOS COLUMNAS, NO UNA REJILLA DE HIJOS SUELTOS. La primera versión hacía
   celda de rejilla a cada `<p>` del contenido y repartía las columnas con
   `grid-row: 1 / span 30`. Dos consecuencias, las dos medidas en producción:
   los párrafos quedaban separados por el `gap` en lugar de por su propio
   interlineado, y —peor— abarcar 30 filas LAS CREA, así que la sección
   arrastraba dos docenas de filas vacías con su `gap` cada una y un hueco
   enorme por debajo. El propietario lo describió como «un grid súper
   troceado».

   Ahora la sección solo tiene dos hijos: el texto envuelto (lo hace
   `sattermos_inyectar_panel_ventajas()`) y el panel. */
.sat-servicios--con-panel {
  display: grid;
  gap: var(--sat-space-5);
  align-items: start;
  /* Más aire con la banda que va encima: pegada al hero se leía como parte
     de él. */
  padding-block-start: var(--sat-space-6);
}

/* Icono de cabecera: cuadrado redondeado con el trazo en negativo. */
.sat-servicios-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  border-radius: var(--sat-radius);
  background: var(--sat-color-brand);
  color: var(--sat-color-bg);
  box-shadow: var(--sat-shadow-card);
}
.sat-servicios-icono svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ── La tarjeta ─────────────────────────────────────────────────────── */

.sat-ventajas {
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  box-shadow: var(--sat-shadow-card);
  padding: var(--sat-space-4);
}
.sat-ventajas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* `auto-fit` otra vez: hoy son cuatro ventajas, pero si un dato falta en
     business-facts.json la tarjeta se imprime con tres y no queda un hueco. */
  grid-template-columns: repeat(auto-fit, minmax(min(6.75rem, 100%), 1fr));
  gap: var(--sat-space-3);
}
.sat-ventajas li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sat-space-2);
  text-align: center;
  padding-inline: var(--sat-space-2);
}
/* Filete entre columnas, sobre `li + li` para que nunca sobre uno al final.
   Se apaga en estrecho, donde las ventajas caen a varias filas y una raya
   vertical entre filas distintas no separa nada. */
@media (min-width: 48rem) {
  .sat-ventajas li + li {
    border-inline-start: 1px solid var(--sat-color-border);
  }
}
.sat-ventaja-icono {
  color: var(--sat-color-brand-light);
}
.sat-ventaja-icono svg {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
}
.sat-ventajas strong {
  color: var(--sat-color-brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--sat-line-height-heading);
}
/* La línea de apoyo se selecciona POR SU CLASE, no como `li > span`. Con el
   selector de descendencia también casaba el `<span>` del icono —que es otro
   hijo directo del `<li>`— y encima le ganaba en especificidad (0,1,1 frente
   a 0,1,0), así que los iconos salían en gris de texto en vez de en celeste
   de marca. Medido: `color: rgb(71, 85, 105)`. */
.sat-ventajas li > .sat-text-sm {
  color: var(--sat-color-text-secondary);
}

/* El texto: flujo normal. El primer elemento no lleva margen superior para
   que su línea base coincida con la del icono flotante. */
.sat-servicios-texto > *:first-of-type {
  margin-top: 0;
}

@media (min-width: 62rem) {
  .sat-servicios--con-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--sat-space-6);
  }
  /* El icono FLOTA a la izquierda del texto: no es una columna de la rejilla
     —eso obligaba a repartir los hijos a mano— sino un elemento posicionado
     sobre el hueco que le reserva el `padding` del propio bloque de texto. */
  .sat-servicios-texto {
    position: relative;
    padding-inline-start: 5rem;
  }
  .sat-servicios-texto > .sat-servicios-icono {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
  }
}

/* ── sat-banda-hechos ──────────────────────────────────────────────────
   Franja de hechos verificables (garantía, plazos, cobertura...), siempre
   poblada desde business-facts.json en la plantilla — ver template-home.php.
   Rejilla auto-fit: se adapta al número real de hechos, nunca asume un
   recuento fijo (los 3 fallos documentados del CSS de placas quedan
   prohibidos: nada de nth-child con lista cerrada, nada de span fijo). */

.sat-banda-hechos {
  /* BANDA: fondo a ancho de ventana. Va PEGADO al `background` a proposito —
     no se puede anadir un fondo sin ver aqui mismo la columna que ocupa. */
  grid-column: full;
  background: var(--sat-color-brand-dark);
  padding-block: var(--sat-space-4);
}
.sat-banda-hechos ul {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  padding-inline: var(--sat-space-3);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--sat-space-3);
}
.sat-banda-hechos li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
.sat-banda-hechos strong {
  color: var(--sat-color-bg);
}
.sat-banda-hechos span {
  color: var(--sat-color-bg-alt);
}

/* ── sat-banda-diferenciales ───────────────────────────────────────────
   Franja de diferenciales que se lee justo después del H1 y la entradilla
   — ver template-parts/banda-diferenciales.php, que la puebla ENTERA desde
   business-facts.json.

   Equivalente propio de `.hero-badges` del sitio hermano, con dos
   diferencias de mecanismo: allí eran tres celdas flex con separadores
   `border-right` y un `:last-child` que se rompe al envolver; aquí es una
   rejilla `auto-fit` sin separadores, agnóstica al recuento (dos o cuatro
   tarjetas se ven igual de bien) y sin ninguna regla que asuma posición.

   El solape sobre la portada es por ADYACENCIA, no por posición en el
   documento: la banda sube sobre el bloque anterior solo cuando ese bloque
   es de verdad la portada. Suelta, en cualquier otro sitio, se comporta
   como una sección normal. */

/* El prefijo `.sat-cuerpo` no es decorativo: sin él estas reglas pierden
   contra la base `.sat-cuerpo section[class^="sat-"]`, que gana el desempate
   de especificidad por el selector de elemento. Medido — el solape no se
   aplicaba porque el `padding-block` de la base seguía ganando y compensaba
   exactamente el margen negativo. */
.sat-cuerpo .sat-banda-diferenciales {
  border-bottom: 0;
}
.sat-cuerpo .sat-portada + .sat-banda-diferenciales {
  /* La portada reserva `--sat-space-6` de padding inferior: la banda entra
     en ese hueco en lugar de empujar el hero hacia arriba. */
  margin-top: calc(var(--sat-space-5) * -1);
  padding-block: 0;
  position: relative;
  z-index: 1;
}

.sat-banda-diferenciales ul {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sat-space-3);
}

.sat-banda-diferenciales li {
  display: flex;
  align-items: flex-start;
  gap: var(--sat-space-3);
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  box-shadow: var(--sat-shadow-card);
  padding: var(--sat-space-3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sat-banda-diferenciales li:hover {
  transform: translateY(-3px);
  border-color: var(--sat-color-brand-light);
  box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--sat-color-brand-dark) 14%, transparent);
}

/* El icono es decorativo y de tamaño fijo A PROPÓSITO (no es contenido):
   la caja no puede encogerse cuando el texto de la tarjeta es largo. */
.sat-diferencial-icono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--sat-radius);
  background: color-mix(in srgb, var(--sat-color-brand-light) 14%, transparent);
  color: var(--sat-color-brand);
}
.sat-diferencial-icono svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.sat-diferencial-texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.sat-diferencial-texto strong {
  color: var(--sat-color-brand-dark);
  line-height: var(--sat-line-height-heading);
}
.sat-diferencial-texto span {
  color: var(--sat-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .sat-banda-diferenciales li {
    transition: none;
  }
  .sat-banda-diferenciales li:hover {
    transform: none;
  }
}

/* ── sat-banda-cta (cierre) ────────────────────────────────────────────
   Contenedor de ancho completo para el slot `sattermos_cta_slot('cierre')`
   — ver sattermos_cta_band() en functions.php. Vacío por defecto: el
   propietario decide qué inyecta. */

.sat-banda-cta {
  /* BANDA. */
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  background: var(--sat-color-bg-alt);
  padding-block: var(--sat-space-5);
  text-align: center;
}
.sat-banda-cta > * {
  grid-column: content;
}
.sat-banda-cta:empty {
  display: none;
}

/* ── Botón flotante de WhatsApp ────────────────────────────────────────
   Estructura y posición del contenedor; el contenido (icono, enlace) lo
   inyecta el plugin del propietario en el slot. Solo se imprime cuando
   `contact.phone_tel` existe — ver sattermos_render_whatsapp_button(). */

.sat-whatsapp-flotante {
  position: fixed;
  right: var(--sat-space-3);
  bottom: var(--sat-space-3);
  z-index: 50;
  background: var(--sat-color-success);
  border-radius: 50%;
  box-shadow: var(--sat-shadow-card);
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sat-whatsapp-flotante:empty {
  display: none;
}
.sat-whatsapp-flotante a {
  color: var(--sat-color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
/* Bloque de marca + las CUATRO columnas del contrato (servicios, equipos,
   ayuda, empresa) + línea NAP + línea de copyright.

   La rejilla de columnas es `auto-fit`, no `repeat(4, …)`, y es deliberado
   aunque el contrato diga cuatro: una columna cuyos destinos no estén
   publicados todavía no se imprime (footer-silo.php la descarta), así que un
   recuento fijo dejaría un hueco vacío en producción. Misma regla que el resto
   del archivo: nada asume un número de elementos. */

.footer-silo {
  background: var(--sat-color-brand-dark);
  color: var(--sat-color-bg-alt);
  /* SIN MARGEN SUPERIOR (02-sep-2026, petición del propietario). El pie es una
     banda oscura a ancho de ventana: el margen abría una calle del fondo de
     página entre él y lo último del cuerpo, y se notaba en cuanto esa última
     pieza también era una banda de color. El aire lo pone su propio relleno
     (`.footer-inner`), que es donde se puede ajustar sin abrir huecos. */
}

.footer-inner {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  padding: var(--sat-space-5) var(--sat-space-3);
  display: grid;
  gap: var(--sat-space-5);
}
/* A partir de tableta grande, la marca se pone a la izquierda y las columnas
   ocupan el resto. Por debajo, la marca es una fila completa encima. */
@media (min-width: 62rem) {
  .footer-inner {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--sat-space-6);
    align-items: start;
  }
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--sat-space-4);
}

.footer-marca {
  color: var(--sat-color-bg-alt);
}
.footer-logo {
  display: inline-block;
  margin-bottom: var(--sat-space-2);
  color: var(--sat-color-bg);
  text-decoration: none;
}
.footer-marca p {
  color: var(--sat-color-bg-alt);
  max-width: 44ch;
}

.footer-nav h3 {
  color: var(--sat-color-bg);
  margin: 0 0 var(--sat-space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sat-space-1);
}
.footer-nav a {
  display: inline-block;
  padding-block: var(--sat-space-1);
  color: var(--sat-color-bg-alt);
  text-decoration: none;
}
.footer-nav a:hover,
.footer-nav a:focus {
  color: var(--sat-color-brand-light);
  text-decoration: underline;
}
.footer-nav a[aria-current="page"] {
  color: var(--sat-color-bg);
  font-weight: 700;
}
.footer-nav a:focus-visible,
.footer-nap a:focus-visible {
  outline: 2px solid var(--sat-color-brand-light);
  outline-offset: 2px;
}

/* ── Iconos de redes (dentro de la columna «Empresa») ──────────────────
   template-parts/footer-social.php. Van en el pie y solo en el pie.

   `flex-wrap` y no una fila rígida: en la columna estrecha de móvil, tres
   iconos más el rótulo no caben en línea, y forzarlos los sacaría de la caja.

   El enlace mide 2.25rem (36px) aunque el SVG mida 20: por debajo de 24px el
   objetivo táctil incumple WCAG 2.2 AA (2.5.8), y un icono de 20px sin caja
   alrededor se falla de dedo constantemente. El dibujo es pequeño; el blanco
   que lo rodea es el que se pulsa. */

.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sat-space-2);
  margin-top: var(--sat-space-3);
}

.footer-social__label {
  color: var(--sat-color-bg-alt);
  width: 100%;
}

/* SIN CÍRCULO (20-ago-2026, petición del propietario). Se va el borde y el
   radio; NO se va la caja. El enlace sigue midiendo 2.25rem aunque ya no se
   vea nada a su alrededor: eso es lo que mantiene el objetivo táctil por
   encima del mínimo de 24px de WCAG 2.2 AA (2.5.8). Quitar también el tamaño
   dejaría un blanco de pulsación de 20px y se fallaría de dedo. */
.footer-social__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--sat-color-bg-alt);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-social__icono:hover,
.footer-social__icono:focus {
  color: var(--sat-color-brand-light);
}
/* La caja de 36px centra un glifo de 20, así que deja 8px de aire a cada lado
   y el primer icono quedaba metido hacia dentro respecto al texto de encima.
   Con el círculo no se notaba —el borde marcaba dónde empezaba la caja—; sin
   él, el ojo alinea contra el dibujo y el escalón canta. Se compensa el aire
   del primero SIN tocar su tamaño: el objetivo táctil sigue siendo de 36px. */
.footer-social__icono:first-of-type {
  margin-inline-start: calc((2.25rem - 20px) / -2);
}
.footer-social__icono:focus-visible {
  outline: 2px solid var(--sat-color-brand-light);
  outline-offset: 2px;
}

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

/* ── Línea NAP ─────────────────────────────────────────────────────────
   Razón social, CIF, domicilio, horario y email, sitewide. Es lo que consolida
   la entidad, y es lo que el contrato marca como ausente en las 30 páginas
   evaluadas. `flex-wrap` en vez de una sola línea rígida: en móvil son cinco o
   seis segmentos y forzarlos a una línea los recorta o desborda. */

.footer-nap {
  border-top: 1px solid var(--sat-color-brand);
  padding: var(--sat-space-3);
}
.footer-nap p {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  color: var(--sat-color-bg-alt);
  text-align: center;
}
.footer-nap strong {
  color: var(--sat-color-bg);
}
/* `inline-block` + relleno vertical para que el objetivo táctil llegue a 24px
   (WCAG 2.2 AA, criterio 2.5.8). Medido a 320-1920px: el enlace del correo
   quedaba en 20-21px de alto, por debajo del mínimo, porque hereda la escala
   pequeña del NAP y en línea no admite altura propia. */
.footer-nap a {
  display: inline-block;
  padding-block: var(--sat-space-1);
  color: var(--sat-color-bg-alt);
  text-decoration: underline;
}
.footer-nap a:hover,
.footer-nap a:focus {
  color: var(--sat-color-brand-light);
}
.footer-nap-sep {
  color: var(--sat-color-brand);
  padding-inline: var(--sat-space-1);
}

.footer-bottom {
  border-top: 1px solid var(--sat-color-brand);
  padding: var(--sat-space-3);
  text-align: center;
  color: var(--sat-color-bg-alt);
}
.footer-bottom p {
  color: var(--sat-color-bg-alt);
}

/* ── Listas navegacionales de silo (sat-ciudades, sat-nav-*) ──────────
   sat-ciudades: rellenada por el filtro the_content
   sattermos_inyectar_ciudades_hijas() (functions.php, ajustes-muestra-4 U3).
   sat-nav-servicios / sat-nav-tipos-equipo / sat-nav-sectores: los tres
   bloques de navegación de silo transversal que siguen siendo rejilla de
   enlaces, renderizados por sattermos_render_silo_nav() (functions.php,
   ajustes-muestra-4 U5).
   SIEMPRE lista de enlaces, nunca prosa — el estilo lo refleja como
   rejilla de enlaces cortos, no como párrafo. Agnóstica a la cantidad de
   ítems: ninguna regla asume un número fijo.

   sat-nav-marcas YA NO ESTÁ AQUÍ (18-ago-2026): pasó a ser una banda de
   logotipos y ya nadie imprime la clase `.sat-nav-marcas-list`. Sus reglas
   viven en el bloque «Banda de marcas» del final de este archivo. */

.sat-ciudades-list,
.sat-nav-servicios-list,
.sat-nav-tipos-equipo-list,
.sat-nav-sectores-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--sat-space-2);
}
.sat-ciudades-list a,
.sat-nav-servicios-list a,
.sat-nav-tipos-equipo-list a,
.sat-nav-sectores-list a {
  display: block;
  padding: var(--sat-space-2);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  text-decoration: none;
  color: var(--sat-color-text);
}
.sat-ciudades-list a:hover,
.sat-ciudades-list a:focus,
.sat-nav-servicios-list a:hover,
.sat-nav-servicios-list a:focus,
.sat-nav-tipos-equipo-list a:hover,
.sat-nav-tipos-equipo-list a:focus,
.sat-nav-sectores-list a:hover,
.sat-nav-sectores-list a:focus {
  border-color: var(--sat-color-brand);
  color: var(--sat-color-brand);
}

/* ── sat-ciudades: lista de ciudades + mapa de la provincia ─────────────
   (18-ago-2026, petición del propietario.) Las ciudades DEJAN DE SER
   botones: aquí no son navegación transversal como los bloques ,
   son el detalle de la cobertura que la sección acaba de describir en prosa,
   así que se leen como lista. El recuadro de cada una competía con las
   tarjetas reales de la página y multiplicaba los bordes.

   Las reglas de arriba siguen sirviendo a , que sí son
   navegación; estas anulan solo lo que sobra para las ciudades. */

.sat-ciudades .sat-ciudades-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sat-space-2) var(--sat-space-4);
}
.sat-ciudades .sat-ciudades-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sat-space-2);
}
.sat-ciudades .sat-ciudades-list a {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--sat-color-brand);
}
.sat-ciudades .sat-ciudades-list a:hover,
.sat-ciudades .sat-ciudades-list a:focus {
  text-decoration: underline;
}

/* La chincheta, en naranja institucional. `flex: 0 0 auto` para que no se
   encoja cuando el nombre del municipio ocupa dos líneas. */
.sat-ciudad-pin {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--sat-color-cta);
  transform: translateY(0.15em);
}

/* Dos columnas: ciudades a la izquierda, mapa a la derecha. Por debajo de
   62rem el mapa cae bajo la lista, que es el orden en que se necesitan. */
.sat-ciudades--con-mapa {
  display: grid;
  gap: var(--sat-space-4);
  align-items: start;
}
/* Lista y mapa APILADOS: los dos viven ya en la columna derecha de la
   sección, así que partirla otra vez dejaría cuatro columnas de nada. */
@media (min-width: 62rem) {
  .sat-ciudades--con-mapa .sat-ciudades-list {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  }
}

/* ── sat-cobertura a dos columnas ──────────────────────────────────────
   Izquierda el titular y la prosa; derecha las ciudades y el mapa. La
   sección tiene exactamente DOS hijos porque el filtro PHP envuelve la
   prosa — ver `sattermos_inyectar_ciudades_hijas()`. */
.sat-cobertura--dos-columnas {
  display: grid;
  gap: var(--sat-space-5);
  align-items: start;
}
@media (min-width: 62rem) {
  .sat-cobertura--dos-columnas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sat-space-6);
  }
}
.sat-cobertura-texto > *:first-child {
  margin-top: 0;
}

.sat-ciudades-mapa {
  border-radius: var(--sat-radius);
  overflow: hidden;
  box-shadow: var(--sat-shadow-card);
  /* Proporción fija: sin ella el iframe entra a 150px de alto por defecto. */
  aspect-ratio: 4 / 3;
}
.sat-mapa-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Bloques de rol sat-{rol}: BASE COMPARTIDA ────────────────────────────
   (14-ago-2026, auditoría de consistencia del tema.)

   Estas reglas ya existían idénticas en home.css, provincias.css y
   servicios.css, pero NO en core.css — la hoja que sirve a las plantillas de
   marcas, ciudades, cobertura y nosotros/contacto. Resultado: los bloques de
   rol de 16 páginas de marca, 400 de ciudad y 4 core (prompts/marca.md,
   prompts/ciudad*.md, prompts/core.md los emiten igual que provincia o
   servicio) se renderizaban sin ritmo vertical, sin tarjetas y sin tablas
   scrollables. La base vive ahora aquí, que es lo que cargan TODAS las
   páginas; cada hoja de silo sigue pudiendo afinar lo suyo después, porque
   se encola con `sattermos-global` como dependencia.

   Mismos principios que las hojas de silo: por clase de rol, agnóstico a
   orden y a recuento — nada de `nth-child` de lista cerrada, nada de rótulo
   horneado en `::before{content}`, nada de `span` de ancho fijo. */

/* RITMO VERTICAL (18-ago-2026, petición del propietario: «no tiene aire»).
   El relleno pasa de fijo a fluido. Antes valía 2.5rem a CUALQUIER ancho, así
   que el aire entre secciones era el mismo a 390px que a 1905px mientras el
   contenedor crecía de 358px a 1360px: en móvil sobraba y en escritorio la
   página se leía como un muro. Medido en la página de Almería antes del
   cambio, el aire REAL de tinta a tinta era de 80px en todos los anchos.

   El valor vive en `--sat-space-seccion` (tokens.css) con la justificación de
   los tres números del clamp. Aquí solo se consume.

   POR DEFECTO CORRECTO: sigue siendo el selector de atributo, así que una
   sección `sat-*` que el pipeline emita mañana y que nadie haya estilizado
   hereda el ritmo bueno sin tocar nada — el mismo criterio que la rejilla. */
.sat-cuerpo section[class^="sat-"] {
  padding-block: var(--sat-space-seccion);
  border-bottom: 1px solid var(--sat-color-border);
}
.sat-cuerpo section[class^="sat-"]:last-of-type {
  border-bottom: 0;
}

/* Tríadas síntoma→causa→comprobación y listas equivalentes en tarjetas. */
.sat-sintomas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 30rem y no 16rem (01-sep-2026, petición del propietario). Con 16rem
     entraban hasta cuatro columnas y cada avería quedaba en una tira estrecha
     donde el texto rompía cada tres palabras. A 30rem caben dos como mucho.

     🔴 LA FRASE QUE HABÍA AQUÍ ERA FALSA Y COSTÓ EL FALLO. Decía que «`auto-fit`
     sigue bajando a una sola columna cuando no hay sitio». `auto-fit` colapsa
     las pistas VACÍAS; una pista con contenido y mínimo FIJO no encoge por
     debajo de ese mínimo. En un móvil de 360 px la rejilla se plantaba en 480 y
     desbordaba, arrastrando fuera de pantalla el `h2` y los párrafos de la
     sección entera —porque el que se ensanchaba era el padre—.

     `min(30rem, 100%)` es lo que faltaba: por encima de 30rem se comporta igual
     y por debajo acota el mínimo al ancho disponible en vez de imponerlo. Lo
     vigila `pipeline/test_css_desbordamiento.py`. (02-sep-2026) */
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: var(--sat-space-3);
}
.sat-sintomas li {
  background: var(--sat-color-bg-alt);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-3);
}
.sat-sintomas li strong {
  color: var(--sat-color-brand);
}

/* Pasos de la visita técnica: numeración NATIVA de <ol>, solo coloreada. */
.sat-visita ol {
  margin: 0;
  padding-left: var(--sat-space-4);
  display: grid;
  gap: var(--sat-space-3);
}
.sat-visita ol li::marker {
  color: var(--sat-color-brand);
  font-weight: 700;
}

/* Marcas/equipos como etiquetas en línea. */
.sat-equipos ul {
  list-style: none;
  margin: var(--sat-space-2) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sat-space-2);
}
.sat-equipos ul li {
  background: var(--sat-color-bg-alt);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-1) var(--sat-space-2);
}

/* Casos tipo: 3-5 tarjetas, sin recuento fijo.
 *
 * La rejilla va en la SECCIÓN, no en un wrapper interno. La versión anterior
 * ponía `display:grid` en `.sat-casos > div` y estilaba la tarjeta con
 * `.sat-casos div[class]`, dando por hecho un marcado
 * `<section><div wrapper><div class="caso">…` que el contrato de contenido no
 * emite: los 1.566 casos redactados son `<div>` DIRECTOS Y SIN CLASE
 * (`prompts/ciudadv2.md` §2). Con aquellas reglas cada caso se convertía él
 * mismo en rejilla y su `<strong>`, su texto y sus `<br>` se repartían en
 * columnas de 16rem, y el selector de tarjeta no casaba nunca — ni fondo, ni
 * sombra, ni padding. Afectaba a las 311 ciudades y a las páginas de servicio
 * que usan el bloque.
 */
.sat-casos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--sat-space-3);
  align-items: start;
}

/* El encabezado y los párrafos de entrada no son tarjetas: ocupan la fila. */
.sat-casos > h2,
.sat-casos > h3,
.sat-casos > p {
  grid-column: 1 / -1;
}

/* La tarjeta es el hijo directo, lleve clase o no. `article` cubre las cuatro
   páginas de marca que usan esa etiqueta en vez de `div`. */
.sat-casos > div,
.sat-casos > article {
  background: var(--sat-color-bg-alt);
  border-radius: var(--sat-radius);
  box-shadow: var(--sat-shadow-card);
  padding: var(--sat-space-3);
}
.sat-casos > div strong,
.sat-casos > article strong {
  color: var(--sat-color-brand);
  display: block;
  margin-bottom: var(--sat-space-2);
}

/* El corpus escribe `<strong>Zona · Equipo</strong><br>` y ese `<br>` sobra en
   cuanto el `strong` pasa a bloque con su propio margen: dejaba un renglón
   vacío bajo cada título de caso. */
.sat-casos > div > strong + br,
.sat-casos > article > strong + br {
  display: none;
}

/* FAQ v1 (<div> + <h3>). El marcado v2 con <details>/<summary> lo cubre
   provincias.css; ambos conviven a propósito mientras haya lotes con la
   forma antigua ya publicada. */
.sat-faq > div {
  padding-block: var(--sat-space-3);
  border-top: 1px solid var(--sat-color-border);
}
.sat-faq > div:first-of-type {
  border-top: 0;
}
.sat-faq h3 {
  color: var(--sat-color-brand);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BORRADOR — LISTO PARA PEGAR
   ARCHIVO DESTINO : theme/generatepress-child-sattermos/assets/css/global.css
   POSICIÓN        : los DOS bloques van seguidos, justo DESPUÉS de la regla
                     `.sat-faq h3 { color: … }` (hoy líneas 1429-1441, el
                     bloque «FAQ v1») y ANTES del comentario «Bloques de cierre
                     y de confianza sobre fondo diferenciado»
                     (`.sat-alcance, .sat-dureza`).

   SON DOS CAPAS DISTINTAS Y NO SE MEZCLAN:

     CAPA 1 — BASE. El acordeón. SIN anclar a ningún silo. Es reparación de lo
              que hoy está roto en 311 páginas de ciudad, no diseño de su
              plantilla: una sola columna, bien presentada.

     CAPA 2 — PROVINCIA. Las dos columnas y la tarjeta «Condiciones del
              servicio». Anclada a `.sat-silo-provincias`. Es el rediseño que
              pidió el propietario, y solo para ese silo. Las ciudades tendrán
              el suyo, con su propio trabajo de plantilla.

   POR QUÉ LA CAPA 2 TAMBIÉN VA EN global.css Y NO EN provincias.css
   ────────────────────────────────────────────────────────────────
   provincias.css parece su casa natural, y por convención lo es. Pero se
   encola por PLANTILLA (`sattermos_template_asset_map()` mira
   `get_page_template_slug()`), mientras que la clase `.sat-silo-provincias`
   del `<body>` y el filtro que inyecta la tarjeta deciden por TÉRMINO de la
   taxonomía `silo`, con la plantilla solo como reserva.

   Son dos criterios distintos, y ahí está el riesgo: una página con término
   `provincias` servida con otra plantilla recibiría el marcado de la tarjeta
   —el filtro sí se dispara— y NO recibiría provincias.css. Es exactamente el
   fallo que hay que evitar: marcado de tarjeta sin su layout.

   En global.css, en cambio, el ancla `.sat-silo-provincias` la calcula el
   MISMO criterio que dispara el filtro (`sattermos_body_class_silo()`), así que
   marcado y layout no pueden separarse nunca. El coste es que ~90 líneas
   viajan a las páginas que no las usan y no casan con nada; a cambio, la
   garantía es estructural y no depende de que dos mapas sigan de acuerdo.

   [Para quien mantenga assets/css/*.css: si se prefiere la convención sobre
   la garantía, la CAPA 2 se mueve a provincias.css TAL CUAL —los selectores
   ya llevan el ancla— y se acepta ese modo de fallo.]

   MARCADO         : lo produce `sattermos_inyectar_panel_condiciones()`
                     (scratchpad/faq-hook.php.txt) +
                     template-parts/panel-condiciones.php.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  CAPA 1 — BASE DEL ACORDEÓN. SIN ANCLAR A SILO.                         ║
   ╚═════════════════════════════════════════════════════════════════════════╝

   QUÉ ARREGLA. El corpus v2 escribe `<details>`/`<summary>` directamente en el
   contenido, en todos los silos. Pero las reglas que los visten solo existen
   en provincias.css, anclada a `.sat-silo-provincias`. Medido el 18-ago-2026:
   /…/baranain-baranain/ sirve cuatro `<details>` y su `<body>` lleva
   `sat-silo-ciudades`, así que carga core.css —que no tiene una sola regla de
   `sat-faq`— y se ve con el triangulito por defecto del navegador, sin
   tarjeta y sin indicador. Son 311 páginas de ciudad en ese estado.

   ESTO NO ES DISEÑAR LA PLANTILLA DE CIUDAD. Es el mínimo para que no se vean
   rotas mientras les llega su turno: una columna, tarjeta blanca, indicador
   propio y foco visible. Nada de layout.

   RELACIÓN CON provincias.css (líneas 407-463). Estas reglas son las de allí
   traídas al ámbito global, con los mismos valores. provincias.css se encola
   DESPUÉS de global.css y sus selectores llevan una clase más, así que en
   provincia sigue ganando él donde declara algo — y donde no declara nada
   (la caja del indicador) manda esta capa. El resultado pintado es el mismo,
   pero sale de dos hojas.
   [RECOMENDADO a quien mantenga provincias.css: con esta capa dentro, sus
   líneas 407-463 quedan REDUNDANTES y pueden borrarse enteras. Es la forma
   limpia de cerrar esto; mientras no se haga, no rompe nada.] */

.sat-faq details {
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-3);
  margin-bottom: var(--sat-space-2);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sat-faq details[open] {
  border-color: var(--sat-color-brand-light);
  box-shadow: var(--sat-shadow-card);
}
.sat-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: var(--sat-space-3);
}
.sat-faq summary::-webkit-details-marker {
  display: none;
}
.sat-faq summary h3 {
  margin: 0;
  color: var(--sat-color-brand-dark);
}
.sat-faq summary:focus-visible {
  outline: 2px solid var(--sat-color-brand);
  outline-offset: 2px;
}
.sat-faq .faq-respuesta {
  padding-block-start: var(--sat-space-3);
  color: var(--sat-color-text-secondary);
}
.sat-faq .faq-respuesta > *:last-child {
  margin-bottom: 0;
}

/* El envoltorio `<div class="faq">` del marcado v2 es hijo directo de la
   sección, así que la regla v1 de aquí arriba (`.sat-faq > div`) le pone su
   `padding-block` y su filete. Ahí no separan nada: separan las tarjetas. Va
   en la BASE porque el envoltorio v2 existe en todos los silos, no solo en
   provincia. */
.sat-faq > .faq {
  padding-block: 0;
  border-top: 0;
}

/* El «+» de la derecha. Es DECORATIVO: no dice nada que la pregunta no diga
   ya, y por eso vive en un pseudo-elemento y no en el marcado.

   `align-self: center` en vez de tocar el `align-items` del `<summary>`:
   provincias.css lo fija en `baseline` con más peso y ganaría, así que la
   posición del disco se resuelve en el propio pseudo-elemento, que nadie más
   toca. Su tamaño no es tipográfico —es una caja de 1.75rem con el glifo
   centrado—, así que no hace falta ningún `font-size`. */
.sat-faq summary::after {
  content: "+";
  margin-inline-start: auto;
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--sat-color-brand) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sat-color-brand-light) 12%, transparent);
  color: var(--sat-color-brand);
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sat-faq details[open] summary::after {
  content: "–";
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║  CAPA 2 — DOS COLUMNAS + TARJETA. SOLO PROVINCIA.                       ║
   ╚═════════════════════════════════════════════════════════════════════════╝

   TODO lo que sigue va anclado a `.sat-silo-provincias`, la clase que
   `sattermos_body_class_silo()` pone en el `<body>` a partir del TÉRMINO de la
   taxonomía `silo`. El filtro PHP que inyecta la tarjeta se limita al mismo
   silo y con el mismo criterio (ver scratchpad/faq-hook.php.txt): en ciudad
   no hay ni marcado ni rejilla, no una de las dos cosas.

   La maqueta de referencia venía de una página de ciudad —se diseñó allí—,
   pero el destino acordado es el silo de PROVINCIA. Ciudades se aborda
   después, con su propia plantilla.

   ── 2.1 LA REJILLA ─────────────────────────────────────────────────────────
   La sección tiene TRES hijos y ni uno más: el `<h2>`, que abarca el ancho,
   la columna del acordeón y la tarjeta. Los reparte el filtro; aquí no se
   enumera ningún hijo ni se abarca ningún número de filas.

   ESTO NO ES UN DETALLE DE ESTILO. La primera versión del panel de ventajas
   hacía celda de rejilla a cada `<p>` y repartía las columnas con
   `grid-row: 1 / span 30`: abarcar 30 filas LAS CREA, con su `gap` cada una,
   y la sección arrastraba dos docenas de filas vacías. Con tres hijos —uno de
   ellos a ancho completo— `grid-template-rows` computa exactamente dos filas,
   haya 5 preguntas o haya 8.

   `section.` además del ancla de silo: el bloque es siempre un `<section>`
   (lo es en las dos formas del corpus, y el filtro solo casa `<section>`), y
   así se le gana a provincias.css sin inventar clases nuevas. */

.sat-silo-provincias section.sat-faq--con-panel {
  display: grid;
  gap: var(--sat-space-4);
  align-items: start;
}
.sat-silo-provincias section.sat-faq--con-panel > h2 {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* `min-width: 0` para que la columna pueda encogerse por debajo del ancho de
   su contenido más largo — sin esto, una respuesta con una palabra larga o un
   enlace sin espacios ensancha la celda y desequilibra las dos columnas.
   El `padding-block` y el filete heredados de la regla v1 ya los neutraliza
   la CAPA 1 (`.sat-faq > .faq`), aquí no hay que repetirlo. */
.sat-silo-provincias section.sat-faq--con-panel > .faq {
  min-width: 0;
}

/* v1 SIN JAVASCRIPT. En provincia, assets/js/silo.js convierte los
   `<div><h3>…` en `<details>`; esta regla es la red para cuando ese JS no
   corre. No se les pone un «+» —no abren nada, y un indicador que miente es
   peor que ninguno—, pero sí la misma tarjeta blanca que a los `<details>`,
   para que la columna se lea igual venga de donde venga el marcado. */
.sat-silo-provincias section.sat-faq--con-panel > .faq > div {
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-top: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-3);
  margin-bottom: var(--sat-space-2);
}
.sat-silo-provincias section.sat-faq--con-panel > .faq > div > *:first-child {
  margin-top: 0;
}
.sat-silo-provincias section.sat-faq--con-panel > .faq > div > *:last-child {
  margin-bottom: 0;
}

/* Dos columnas solo cuando hay ancho de sobra, en el mismo escalón que usa el
   panel de ventajas — por debajo, una sola columna y la tarjeta CAE DEBAJO del
   acordeón, que es el orden del marcado. */
@media (min-width: 62rem) {
  .sat-silo-provincias section.sat-faq--con-panel {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    column-gap: var(--sat-space-5);
  }
}

/* ── 2.2 LA TARJETA DE CONDICIONES ──────────────────────────────────────────
   Marcado: template-parts/panel-condiciones.php.

   ANCLADA A PROVINCIA COMO EL RESTO, por consigna: hoy el filtro solo la
   inyecta ahí, y un componente sin marcado que lo use no debe estar suelto en
   el ámbito global. Dicho esto, y para que quede escrito: el ASPECTO INTERNO
   de la tarjeta no tiene nada de provincial —es un componente—. El día que la
   plantilla de ciudad la quiera, lo correcto NO es duplicar este bloque sino
   subirlo entero a la CAPA 1 quitándole el `.sat-silo-provincias ` del
   principio (un reemplazo mecánico, por eso el ancla va como prefijo suelto
   en todos los selectores de aquí abajo) y dejar en la CAPA 2 solo la
   rejilla, que sí es decisión de plantilla. */

.sat-silo-provincias .sat-condiciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sat-space-3);
  background: var(--sat-color-bg-alt);
  border: 1px solid color-mix(in srgb, var(--sat-color-brand-light) 30%, transparent);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-4);
}

/* Icono grande en círculo. Trazo en color de marca sobre un velo del celeste
   del tema, no un segundo fondo inventado. */
.sat-silo-provincias .sat-condiciones-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sat-color-brand-light) 18%, transparent);
  color: var(--sat-color-brand);
}
.sat-silo-provincias .sat-condiciones-icono svg {
  width: 2rem;
  height: 2rem;
}

/* `> h3` y no `h3`: `.sat-faq h3` (color de marca) empataría en peso con
   `.sat-condiciones h3` y ganaría el que fuera último. Con el combinador de
   hijo no hay empate que resolver por orden de archivo. */
.sat-silo-provincias .sat-condiciones > h3 {
  margin: 0;
  color: var(--sat-color-brand-dark);
}
.sat-silo-provincias .sat-condiciones > p {
  margin: 0;
  color: var(--sat-color-text-secondary);
}

/* EL BOTÓN. Naranja de CTA del tema, que es el único naranja que existe.
   Enlaza a UNA página del sitio y a nada más: es navegación, no conversión
   (ver la cabecera del filtro). */
.sat-silo-provincias .sat-condiciones-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--sat-space-2);
  margin-top: var(--sat-space-1);
  padding: var(--sat-space-2) var(--sat-space-4);
  border-radius: var(--sat-radius);
  background: var(--sat-color-cta);
  color: var(--sat-color-bg);
  font-weight: 700;
  line-height: var(--sat-line-height-base);
  text-decoration: none;
  box-shadow: var(--sat-shadow-card);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.sat-silo-provincias .sat-condiciones-boton:hover,
.sat-silo-provincias .sat-condiciones-boton:focus {
  background: var(--sat-color-cta-hover);
  color: var(--sat-color-bg);
  transform: translateY(-1px);
}
.sat-silo-provincias .sat-condiciones-boton:focus-visible {
  outline: 2px solid var(--sat-color-brand);
  outline-offset: 2px;
}
.sat-silo-provincias .sat-condiciones-flecha {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
}
@media (prefers-reduced-motion: reduce) {
  .sat-silo-provincias .sat-condiciones-boton {
    transition: background-color 0.15s ease;
  }
  .sat-silo-provincias .sat-condiciones-boton:hover,
  .sat-silo-provincias .sat-condiciones-boton:focus {
    transform: none;
  }
}

/* Bloques de cierre y de confianza sobre fondo diferenciado.

   ESTO NO ES UNA BANDA, ES UNA CAJA: fondo teñido, esquinas redondeadas y
   ancho de la columna de contenido. Su relleno es una propiedad de la caja
   —lo que separa su texto de SU PROPIO borde— y no del ritmo de la página,
   así que no puede seguir a `--sat-space-seccion`: a 1905px le tocarían 92px
   arriba y abajo contra 24px a los lados, una caja 3,8 veces más alta de
   relleno que ancha.

   Se fija simétrica y con la especificidad necesaria para ganarle a la base.
   Medido antes del cambio: la base (0,2,1) ya le ganaba el `padding-block` a
   esta regla (0,1,0), de modo que la caja renderizaba 40px arriba/abajo y
   24px a los lados sin que nadie lo hubiera decidido. `:is()` aporta la
   especificidad de una clase, con lo que el selector vale (0,3,1). */
/* `sat-dureza` Y NO `sat-temporada`. Es el bloque local de la pagina de
   provincia y en este sitio ese eje es la DUREZA DEL AGUA, no la
   estacionalidad: la cifra en mg/L de CaCO₃ y su consecuencia —cal en la
   resistencia, vida del anodo, frecuencia de descalcificacion—. El nombre de
   rol se decide en un solo sitio, `sattermos_componer_contexto_operativo()` de
   functions.php, y aqui, en provincias.css y en el mapa `ROTULOS` de silo.js se
   escribe igual: si estos cuatro no dicen lo mismo, el bloque que hace existir
   la pagina de provincia se sirve sin estilos. */
.sat-alcance,
.sat-dureza {
  background: var(--sat-color-bg-alt);
  border-radius: var(--sat-radius);
}
.sat-cuerpo section[class^="sat-"]:is(.sat-alcance, .sat-dureza) {
  padding: var(--sat-space-5);
}
/* (0,2,1) Y NO (0,1,0) (19-ago-2026). Esta regla llevaba tiempo INERTE: la
   base `.sat-cuerpo section[class^="sat-"]` pesa (0,2,1) y le ganaba, asi que
   el filete solo desaparecia cuando `sat-alcance` caia de ultima y se lo
   quitaba `:last-of-type`. Parecia activa y no lo estaba. Desde que existe el
   bloque de cierre compuesto, `sat-alcance` YA NO siempre es la ultima, asi
   que la regla tenia que empezar a hacer su trabajo de verdad. */
.sat-cuerpo section.sat-alcance {
  border-bottom: 0;
}
.sat-precios ul {
  margin: var(--sat-space-2) 0;
  padding-left: var(--sat-space-4);
}
.sat-cobertura a {
  font-weight: 600;
}

/* Tablas del cuerpo (rangos por zona, periodicidad RITE, códigos de error
   del silo informacional): el propio <table> es el contenedor con scroll,
   sin depender de que el contenido lo envuelva en un div. Cebrado por
   PARIDAD, nunca por una lista cerrada de posiciones. */
.sat-cuerpo table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  width: 100%;
  margin-block: var(--sat-space-3);
}
.sat-cuerpo table th,
.sat-cuerpo table td {
  padding: var(--sat-space-2) var(--sat-space-3);
  border: 1px solid var(--sat-color-border);
  text-align: left;
  white-space: nowrap;
}
.sat-cuerpo table th {
  background: var(--sat-color-bg-alt);
  color: var(--sat-color-brand-dark);
}
.sat-cuerpo table tr:nth-of-type(even) td {
  background: var(--sat-color-bg-alt);
}

/* ── Tabla de datos del contenido ────────────────────────────────────────
   POR QUÉ EN global.css Y NO EN provincias.css: la tabla la puede emitir
   cualquier página con `.sat-cuerpo` (provincia, ciudad, servicio, portada).
   El selector es por ROL —el marcador `[data-sat-tabla]`— y no por silo,
   igual que el resto de bloques de contenido de esta hoja.

   QUÉ LLEGA HASTA AQUÍ, DESPUÉS DEL 19-AGO-2026. Solo las tablas con TRES
   columnas o más, que son las que tienen dos ejes de verdad. Las de dos
   columnas ya no son tablas: `sattermos_tabla_es_pares()` (functions.php) las
   convierte en la lista de pares de más abajo, y el porqué está allí.

   La regla base de arriba deja la tabla en `display: block` + `overflow-x:
   auto` + `white-space: nowrap`: en escritorio pasa, pero en móvil obliga a
   arrastrar la tabla DENTRO de la tarjeta para leer la segunda columna. Ese
   scroll lateral escondido es lo que el propietario llamó «se ve mal en
   móvil», y tiene razón: lo que hay que arrastrar para ver, la mitad no lo ve.

   Aquí la tabla se resuelve en dos lecturas distintas del mismo marcado:

     · ESCRITORIO — tabla de verdad, enmarcada, con cabecera clara y cebrado
       suave. Deja de parecer la tabla por defecto del navegador metida dentro
       de una página diseñada.

     · MÓVIL (≤48rem) — la tabla se apila dentro de un panel, con la misma
       piel que la lista de pares. CERO scroll horizontal.

   SUPERFICIE PLANA, NO ELEVADA (19-ago-2026). La tabla llevaba borde, radio y
   `--sat-shadow-card`, o sea la misma superficie elevada que las tarjetas de
   avería que tiene JUSTO ENCIMA en `.sat-sintomas` — y encima con una banda de
   marca sólida a todo lo ancho, que la convertía en el elemento más pesado del
   bloque. La jerarquía quedaba del revés: el anexo de consulta pesaba más que
   el contenido principal. Ahora la tabla es un plano enmarcado sin sombra y su
   cabecera es una banda clara: sigue siendo obvio que es una cabecera, pero ya
   no compite con las tarjetas.

   EL MARCADOR `[data-sat-tabla]` Y LAS ETIQUETAS los pone
   `sattermos_preparar_tablas_de_datos()` (functions.php, filtro `the_content`
   con prioridad 22): el corpus está generado y publicado, no se reescribe
   para un cambio de presentación. Ese filtro también repone los roles ARIA —
   ver la nota de accesibilidad de la sección móvil, que es la parte que de
   verdad importa aquí.

   SIN EL FILTRO no pasa nada malo: sin `[data-sat-tabla]` no casa ningún
   selector de este bloque y la tabla se queda con la regla base de arriba,
   que es exactamente el estado actual.
   ─────────────────────────────────────────────────────────────────────── */

.sat-cuerpo table[data-sat-tabla] {
  /* Se deshace el `display: block` + `overflow-x: auto` de la regla base:
     aquí ya no hace falta un carril de scroll, porque en estrecho la tabla
     deja de ser una tabla en vez de encogerse. */
  display: table;
  width: 100%;
  margin-block: var(--sat-space-4);
  /* `separate` + `border-spacing: 0` en vez de `collapse`: con los bordes
     colapsados el radio de las esquinas no recorta el fondo de la cabecera,
     y la banda de marca asomaba en cuadrado por encima de la curva. */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  overflow: hidden;
  background: var(--sat-color-bg);
}

/* ── Cabecera: jerarquía real, no una fila más en negrita ────────────────
   Banda CLARA con filete de marca debajo, no banda de marca sólida: ver la
   nota «superficie plana, no elevada» de arriba. La jerarquía la dan las
   versales, el peso y el filete — que es exactamente lo mismo que hacía
   antes, pero sin gritar. */
.sat-cuerpo table[data-sat-tabla] thead th {
  padding: var(--sat-space-3) var(--sat-space-4);
  border: 0;
  border-bottom: 2px solid var(--sat-color-brand-light);
  background: var(--sat-color-bg-alt);
  color: var(--sat-color-brand-dark);
  text-align: start;
  vertical-align: bottom;
  /* Mismo recurso que `.sat-ventajas strong`: mayúsculas y prosa espaciada
     marcan «esto es una etiqueta» sin tocar la escala tipográfica, que vive
     entera en tokens.css y no se declara fuera de allí. */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--sat-line-height-heading);
  /* Se levanta el `nowrap` de la regla base — es la causa del desbordamiento. */
  white-space: normal;
}

/* Redondeo por celdas ADEMÁS del `overflow: hidden` de la tabla: el recorte
   sobre una caja de tabla no es igual de fiable en todos los navegadores, y
   una esquina cuadrada de marca sobre un borde curvo se ve al instante. */
.sat-cuerpo table[data-sat-tabla] thead th:first-child {
  border-start-start-radius: var(--sat-radius);
}
.sat-cuerpo table[data-sat-tabla] thead th:last-child {
  border-start-end-radius: var(--sat-radius);
}
.sat-cuerpo table[data-sat-tabla] tbody tr:last-child td:first-child {
  border-end-start-radius: var(--sat-radius);
}
.sat-cuerpo table[data-sat-tabla] tbody tr:last-child td:last-child {
  border-end-end-radius: var(--sat-radius);
}

/* ── Ritmo de filas ────────────────────────────────────────────────────── */
.sat-cuerpo table[data-sat-tabla] tbody td {
  padding: var(--sat-space-3) var(--sat-space-4);
  /* Un solo filete horizontal entre filas. La rejilla completa de la regla
     base (borde en las cuatro caras de cada celda) dibuja una cuadrícula que
     compite con el texto; para tres o cuatro filas de prosa sobra. */
  border: 0;
  border-top: 1px solid var(--sat-color-border);
  text-align: start;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: break-word;
  color: var(--sat-color-text-secondary);
}
/* El filete de la cabecera ya cierra por arriba: uno más ahí sería doble. */
.sat-cuerpo table[data-sat-tabla] tbody tr:first-child td {
  border-top: 0;
}

/* La primera columna es la CLAVE de la fila (la época, la zona, el equipo):
   se lee como tal y no como una celda más. Vale igual con dos columnas que
   con tres, y sobrevive al apilado de móvil sin repetirse allí. */
.sat-cuerpo table[data-sat-tabla] tbody td:first-child {
  color: var(--sat-color-brand-dark);
  font-weight: 600;
}

/* Cebrado propio, con especificidad suficiente para ganarle al de la regla
   base (que pinta por `tr:nth-of-type(even) td` sobre toda la tabla, cabecera
   incluida cuando la tabla no trae `<thead>`).

   AQUÍ EL CEBRADO SE GANA EL SITIO, y no siempre lo hacía: con tres columnas
   a lo ancho del contenedor, seguir una fila de un extremo al otro sin una
   guía es donde la vista se salta de renglón. Un velo más flojo que el de la
   cabecera —que es `--sat-color-bg-alt`— para que la cabecera siga siendo la
   banda tintada más fuerte de la tabla y no se confunda con una fila par. */
.sat-cuerpo table[data-sat-tabla] tbody tr:nth-of-type(even) td {
  background: color-mix(in srgb, var(--sat-color-brand-light) 6%, transparent);
}
/* Realce al puntero sobre la FILA entera, el mismo lenguaje que las tarjetas
   de `.sat-sintomas`: lo que se sigue con la vista es la fila, no la celda. */
.sat-cuerpo table[data-sat-tabla] tbody tr:hover td {
  background: color-mix(in srgb, var(--sat-color-brand-light) 10%, transparent);
}

/* ── Móvil: la tabla se apila dentro de un panel ─────────────────────────
   YA NO SE APILA COMO TARJETAS (19-ago-2026). Cada fila era una caja blanca
   con borde, radio y `--sat-shadow-card`: exactamente la misma piel que las
   tarjetas de avería que hay JUSTO ENCIMA en `.sat-sintomas`. En móvil, donde
   todo va en una columna, el bloque se leía como una tira continua de cajas
   iguales y no había forma de saber dónde acababan las averías y dónde
   empezaba la tabla de comprobaciones. Ahora el conjunto es UN panel tintado
   con filete de marca al costado —la misma piel que `.sat-pares` de más
   abajo— y las filas se separan con un filete, no con una caja cada una.

   ACCESIBILIDAD — LA PARTE QUE HAY QUE LEER.

   Apilar exige cambiar el `display` de `table`, `tbody`, `tr` y `td`. Y una
   tabla a la que se le cambia el `display` DEJA DE SER UNA TABLA para el
   lector de pantalla: el navegador la saca del árbol de accesibilidad como
   tal y con ella se van las cabeceras de columna y la navegación por celdas.
   El texto se sigue leyendo; lo que se pierde es la relación «esta celda
   pertenece a esta columna», que es justo lo que hace útil a una tabla.

   Se compensa en dos sitios, y los dos hacen falta:

   1. En el marcado. `sattermos_preparar_tablas_de_datos()` escribe los roles
      ARIA explícitos (`table`, `rowgroup`, `row`, `columnheader`, `cell`) y
      `scope="col"`. Los roles no inventan nada: repiten en voz alta lo que
      los elementos ya significan, así que en escritorio son inertes; en
      móvil son lo único que sostiene la tabla en pie cuando el `display`
      cambia bajo sus pies.

   2. Aquí. La fila de encabezados se RECORTA, no se apaga con `display:
      none`. Recortada sigue en el árbol de accesibilidad y sus
      `columnheader` siguen asociados a las celdas; apagada desaparecería y
      el único rastro de la columna quedaría en un `::before`, que es
      contenido generado y no todos los lectores anuncian.

   O sea: el `data-label` es la versión VISIBLE de la cabecera, para quien
   mira la pantalla. La cabecera de verdad no se ha ido a ninguna parte.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
  .sat-cuerpo table[data-sat-tabla] {
    display: block;
    padding: var(--sat-space-4);
    /* El marco de escritorio se cambia por el panel: filete de marca solo en
       el costado de inicio y radio solo en el lado contrario. Una caja
       redondeada por los cuatro lados volvería a leerse como tarjeta. */
    border: 0;
    border-inline-start: 3px solid var(--sat-color-brand-light);
    border-radius: 0 var(--sat-radius) var(--sat-radius) 0;
    overflow: visible;
    background: var(--sat-color-bg-alt);
  }

  .sat-cuerpo table[data-sat-tabla] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sat-cuerpo table[data-sat-tabla] tbody {
    display: block;
  }

  .sat-cuerpo table[data-sat-tabla] tbody tr {
    display: block;
    padding-block: var(--sat-space-3);
  }
  /* Filete ENTRE filas, nunca alrededor: el mismo criterio que separa los
     pares de `.sat-pares`, para que las dos formas se lean como la misma
     familia aunque el marcado de origen sea distinto. */
  .sat-cuerpo table[data-sat-tabla] tbody tr + tr {
    border-top: 1px solid color-mix(in srgb, var(--sat-color-brand) 14%, transparent);
  }
  .sat-cuerpo table[data-sat-tabla] tbody tr:first-child {
    padding-top: 0;
  }
  .sat-cuerpo table[data-sat-tabla] tbody tr:last-child {
    padding-bottom: 0;
  }
  /* El redondeo de esquinas de escritorio se aplicaba a la primera y última
     celda de la tabla; apilado, esas cuatro reglas dejarían una curva suelta
     en mitad del panel. */
  .sat-cuerpo table[data-sat-tabla] tbody tr:last-child td:first-child,
  .sat-cuerpo table[data-sat-tabla] tbody tr:last-child td:last-child {
    border-radius: 0;
  }

  /* El cebrado y el realce al puntero se enumeran aquí para desactivarlos:
     tienen la especificidad del bloque de escritorio y, sin nombrarlos, una
     fila par se pintaría de fondo alternativo DENTRO del panel. */
  .sat-cuerpo table[data-sat-tabla] tbody td,
  .sat-cuerpo table[data-sat-tabla] tbody tr:nth-of-type(even) td,
  .sat-cuerpo table[data-sat-tabla] tbody tr:hover td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-wrap: break-word;
  }
  .sat-cuerpo table[data-sat-tabla] tbody td + td {
    margin-top: var(--sat-space-2);
  }

  /* La etiqueta de columna, delante de su valor. Se pinta solo si la celda
     trae `data-label`: una tabla que el filtro no supo etiquetar se apila
     igual, sin etiquetas huérfanas ni `::before` vacíos. */
  .sat-cuerpo table[data-sat-tabla] tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--sat-space-1);
    color: var(--sat-color-text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--sat-line-height-heading);
  }
  /* SALVO EN LA PRIMERA CELDA. Su etiqueta es siempre la misma en todas las
     filas («ÉPOCA», «ÉPOCA», «ÉPOCA»…) y no distingue nada: lo único que
     aporta es ruido, cuatro veces seguidas. La primera celda ya se lee como
     el título de la fila —le da color y peso la regla `td:first-child` de
     escritorio, que vale también aquí— y esa posición dice lo mismo que la
     etiqueta decía.

     LA CABECERA DE VERDAD NO SE TOCA: el `<th scope="col">` con su
     `role="columnheader"` sigue en el árbol de accesibilidad, recortado, tal
     y como explica la nota de arriba. Esto apaga la copia VISIBLE, no la
     asociación. */
  .sat-cuerpo table[data-sat-tabla] tbody td:first-child[data-label]::before {
    content: none;
  }
}

/* ── Lista de pares clave-valor ──────────────────────────────────────────
   QUÉ ES. Lo que emite `sattermos_lista_de_pares()` (functions.php) cuando una
   «tabla» del contenido resulta tener DOS columnas: un `<dl>` con el nombre de
   los dos ejes delante. El porqué de la conversión está en el comentario de
   `sattermos_tabla_es_pares()` y no se repite aquí; lo que sí importa en esta
   hoja es la consecuencia de diseño.

   POR QUÉ NO SE PARECE A UNA TARJETA, Y ES DELIBERADO.
   El bloque `.sat-sintomas` cierra con esta lista JUSTO DEBAJO de la rejilla
   de averías. Si la lista se resolviera también como tarjetas, el bloque
   entero sería dos rejillas de tarjetas seguidas y el lector no sabría qué es
   cada cosa — que es exactamente lo que pasaba en móvil, donde cada fila de la
   tabla se apilaba como una caja blanca con borde, radio y sombra:
   indistinguible de las averías de encima.

   La jerarquía se dice con la SUPERFICIE, que es el recurso que el sitio ya
   usa y no hay que inventar:

     · TARJETA DE AVERÍA — blanca, con borde y sombra, y se LEVANTA al pasar el
       puntero. Superficie elevada = contenido principal, y además navegable.
     · LISTA DE PARES — un solo plano tintado, hundido en la página, con un
       filete de marca al costado y sin ninguna reacción al puntero. Superficie
       recesiva = anexo de consulta.

   Y son UNA SOLA CAJA frente a N cajas: la rejilla de arriba es un conjunto de
   piezas que se barre en diagonal; esto es un bloque continuo que se lee de
   arriba abajo. La diferencia se ve antes de leer una palabra.

   MEDIDA ACOTADA (`max-width`). En el contenedor de 1360px la tabla anterior
   se estiraba a todo lo ancho y dejaba un pasillo muerto de más de 200px entre
   la época y su descripción: la vista tenía que cruzarlo para emparejar las
   dos. Acotada, el par cabe de una mirada — y de paso la lista queda más
   estrecha que la rejilla de averías, que es otra manera de decir que está
   subordinada a ella.

   AGNÓSTICA AL RECUENTO: no hay ni una regla que dependa de cuántos pares
   haya. Con 3 o con 6 el bloque es el mismo, solo más alto.
   ─────────────────────────────────────────────────────────────────────── */

.sat-cuerpo .sat-pares {
  max-width: 54rem;
  margin-block: var(--sat-space-5);
  padding: var(--sat-space-4);
  /* El filete al costado es el mismo recurso de `.sat-sintomas li`: marca el
     bloque como anexo sin gastar una caja. Va SOLO en el costado de inicio, y
     el radio acompaña — una caja redondeada por los cuatro lados volvería a
     leerse como tarjeta. */
  border-inline-start: 3px solid var(--sat-color-brand-light);
  border-start-end-radius: var(--sat-radius);
  border-end-end-radius: var(--sat-radius);

  /* SIN color de fondo (19-ago-2026, decisión del propietario): el filete
     lateral y el aire ya lo separan del cuerpo, y sobre el papel de la
     página el panel pesa menos que las tarjetas de encima — que es
     justamente la jerarquía que se buscaba. */
  background: none;}

/* El nombre de los dos ejes: una vez, arriba. Versales y prosa espaciada, el
   mismo recurso de etiqueta que usan las cabeceras de tabla de más arriba —
   pero en color secundario, no de marca: esto rotula, no titula. El tamaño lo
   pone la clase de utilidad `sat-text-xs` desde el marcado. */
.sat-cuerpo .sat-pares-eje {
  margin: 0 0 var(--sat-space-3);
  color: var(--sat-color-text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: var(--sat-line-height-heading);
}

.sat-cuerpo .sat-pares dl {
  margin: 0;
}

/* El `<div>` que agrupa cada par (`dl > div > dt + dd`) es lo que permite
   maquetar la fila sin tocar la semántica del `<dl>`. En estrecho es una
   columna; a partir de tableta, dos. */
.sat-cuerpo .sat-pares dl > div {
  display: grid;
  gap: var(--sat-space-1);
  padding-block: var(--sat-space-3);
}
/* Filete ENTRE pares, nunca alrededor: un borde en las cuatro caras de cada
   par dibujaría otra vez la cuadrícula que sobraba en la tabla. */
.sat-cuerpo .sat-pares dl > div + div {
  border-top: 1px solid color-mix(in srgb, var(--sat-color-brand) 14%, transparent);
}
.sat-cuerpo .sat-pares dl > div:first-child {
  padding-top: 0;
}
.sat-cuerpo .sat-pares dl > div:last-child {
  padding-bottom: 0;
}

.sat-cuerpo .sat-pares dt {
  margin: 0;
  color: var(--sat-color-brand-dark);
  font-weight: 600;
  line-height: var(--sat-line-height-heading);
}
.sat-cuerpo .sat-pares dd {
  /* El `<dd>` trae sangría propia del navegador (40px). Sin esto, la
     descripción aparecería descolgada de su término. */
  margin: 0;
  color: var(--sat-color-text-secondary);
}

/* Dos columnas a partir de tableta. `minmax(0, …)` en las dos: sin el mínimo
   en 0, una palabra larga sin puntos de corte ensancha su columna y empuja la
   rejilla más allá del contenedor. */
@media (min-width: 48rem) {
  .sat-cuerpo .sat-pares {
    padding: var(--sat-space-4) var(--sat-space-5);
  }
  .sat-cuerpo .sat-pares dl > div {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sat-space-4);
    align-items: baseline;
  }
}

/* ── Pestañas (sat-equipos, sat-sectores) — ajustes-muestra-4/tabs, U8 ────
   Las construye assets/js/global.js a partir del HTML plano del bloque
   (h3+p repetido); esta hoja solo estiliza el resultado. Selector por
   clase de rol, agnóstico a plantilla/silo — igual que las listas de
   arriba. El panel oculto usa el atributo nativo `hidden`, no una regla
   de display propia. */

/* SIN filete inferior (19-ago-2026, decisión del propietario). El subrayado
   de la pestaña activa ya marca dónde estás; la línea que cruzaba toda la
   barra solo servía para cerrar la caja del panel, y el panel ya no tiene
   caja. */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sat-space-1);
  margin-top: var(--sat-space-3);
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  /* El `-1px` existía para montar el botón sobre el filete de la barra. Sin
     filete no hay nada que montar, y dejarlo desalineaba el subrayado activo. */
  padding: var(--sat-space-2) var(--sat-space-3);
  font: inherit;
  font-weight: 600;
  color: var(--sat-color-text-secondary);
  cursor: pointer;
  border-radius: var(--sat-radius) var(--sat-radius) 0 0;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.tab-btn:hover {
  color: var(--sat-color-brand);
  background: var(--sat-color-bg-alt);
}
.tab-btn.active {
  color: var(--sat-color-brand);
  border-bottom-color: var(--sat-color-brand);
  background: var(--sat-color-bg-alt);
}
.tab-btn:focus-visible {
  outline: 2px solid var(--sat-color-brand-light);
  outline-offset: 2px;
}

.tab-panel {
  padding-top: var(--sat-space-3);
}
.tab-panel:not([hidden]) {
  animation: sat-tab-fade-up 0.25s ease forwards;
}
@keyframes sat-tab-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-panel:not([hidden]) { animation: none; }
}

.tab-more-link {
  display: inline-block;
  margin-top: var(--sat-space-2);
  font-weight: 700;
  color: var(--sat-color-brand);
  text-decoration: none;
  border-bottom: 2px solid var(--sat-color-brand-light);
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.tab-more-link:hover {
  border-color: var(--sat-color-brand);
}

/* ═══════════════════════════════════════════════════════════════════════
   BANDA DE MARCAS (.sat-nav-marcas) — 18-ago-2026
   Renderiza sattermos_render_marcas_slider() en functions.php.
   ═══════════════════════════════════════════════════════════════════════ */

/* Texto que se lee pero no se ve. Lo usa el nombre de cada marca dentro de
   su enlace: el logotipo es el que se ve, pero el TEXTO ANCLA del enlace
   tiene que seguir en el documento, o quince enlaces internos se quedan sin
   él. Se recorta con `clip-path` y no con `display:none` por el mismo motivo
   que la fila de encabezados de las tablas de más arriba: recortado sigue en
   el árbol de accesibilidad y sigue siendo texto real del documento. */
.sat-solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── El carril ────────────────────────────────────────────────────────
   ESTADO BASE = SIN JAVASCRIPT. Una fila desplazable con los quince enlaces
   dentro, alcanzable con dedo, rueda, barra y teclado. No hay estado inicial
   oculto, desplazado ni transformado: si el script no llega, no falta nada.
   `.is-animado` la añade assets/js/global.js y es lo ÚNICO que convierte la
   fila en una cinta que se mueve sola. */
.sat-marcas-slider {
  /* Altura óptica de los logotipos. Un solo valor manda sobre los quince:
     los SVG están normalizados a la misma altura de bloque y a la misma caja
     (viewBox 0 0 W 140), así que fijar la altura aquí los iguala a todos sin
     una sola regla por marca. */
  --sat-marca-altura: clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem);
  /* La rellena el script con el ancho real del carril dividido por una
     velocidad constante en px/s. Así el recorrido va SIEMPRE a la misma
     velocidad aparente, tanto con doce marcas como con dieciocho. El valor de
     aquí solo cubre el instante anterior a que el script mida. */
  --sat-marcas-duracion: 40s;

  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sat-color-border) transparent;
  /* Desvanecido en los dos cantos, para que los logotipos entren y salgan en
     vez de quedar cortados a cuchillo. Es una rampa de OPACIDAD, no un color
     de la paleta: `black`/`transparent` aquí solo significan «opaco» y
     «transparente» dentro de la máscara. */
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--sat-space-5), black calc(100% - var(--sat-space-5)), transparent);
  mask-image: linear-gradient(to right, transparent, black var(--sat-space-5), black calc(100% - var(--sat-space-5)), transparent);
}

.sat-marcas-pista {
  list-style: none;
  margin: 0;
  padding: var(--sat-space-3) 0;
  display: flex;
  align-items: center;
  width: max-content;
}

/* La separación es `margin-inline-end` en cada ítem y NO `gap` en el carril,
   y no es cosmética: con `gap`, un carril de n ítems mide n·ancho + (n−1)·gap,
   así que al duplicarlo para el bucle la mitad exacta cae medio hueco antes
   del punto de repetición y el empalme da un salto visible en cada vuelta.
   Con el margen en cada ítem, la mitad es exacta. */
.sat-marca {
  flex: 0 0 auto;
  margin-inline-end: var(--sat-space-6);
}

.sat-marca a {
  display: flex;
  align-items: center;
  padding: var(--sat-space-2);
  border-radius: var(--sat-radius);
  text-decoration: none;
  /* MONOCROMO. El token secundario y no `--sat-color-brand`: la banda dice
     «trabajamos con estas marcas», no «somos servicio técnico autorizado»
     (brand_authorisation.oficial = false, y «oficial» está prohibida en todo
     el copy). El gris azulado del texto secundario la coloca donde le toca —
     apoyo, no reclamo—; el azul de marca la convertiría en el elemento más
     llamativo de la página y en un guiño a una autorización que no existe. */
  color: var(--sat-color-text-secondary);
  transition: color 0.15s ease, opacity 0.15s ease;
}

.sat-marca-logo {
  height: var(--sat-marca-altura);
  width: auto;
  display: block;
  /* 0.85 y no 0.7. La regla anterior se escribió para logotipos SVG
     MONOCROMOS, que heredaban `currentColor` y podían apagarse mucho sin
     perderse. Desde el 01-sep-2026 son los logotipos REALES, a color: al 70 %
     se veían lavados y con el color corporativo alterado, que en una marca
     ajena no es solo feo. Se apagan lo justo para que la fila no compita con
     el contenido, y al señalar suben a plena opacidad. */
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

/* Al apuntar o al enfocar, el logotipo sube a color de marca y a opacidad
   plena. Es el azul DEL SITIO, el mismo que ya reciben todos los enlaces del
   tema, y solo en el que se está señalando: sigue sin haber una fila de
   colores corporativos. */
.sat-marca a:hover,
.sat-marca a:focus-visible {
  color: var(--sat-color-brand);
}
.sat-marca a:hover .sat-marca-logo,
.sat-marca a:focus-visible .sat-marca-logo {
  opacity: 1;
}
.sat-marca a:focus-visible {
  outline: 2px solid var(--sat-color-brand-light);
  outline-offset: 2px;
}

/* Marca sin dibujo (hoy `marca.general`, que no es un fabricante y por eso no
   puede tener logotipo). Mismo hueco, mismo color, el rótulo como texto. En
   reposo va SIN recuadro, igual que los logotipos: un borde permanente lo
   convertía en el elemento más pesado de la fila, que es justo al revés de lo
   que le toca. El recuadro aparece al apuntarlo, como el color en los demás. */
.sat-marca--texto a {
  max-width: 14rem;
  border: 1px solid transparent;
  line-height: var(--sat-line-height-base);
}
.sat-marca--texto a:hover,
.sat-marca--texto a:focus-visible {
  border-color: var(--sat-color-brand);
}

/* ── Estado animado ───────────────────────────────────────────────────── */

.sat-marcas-slider.is-animado {
  overflow-x: hidden;
}
.sat-marcas-slider.is-animado .sat-marcas-pista {
  animation: sat-marcas-cinta var(--sat-marcas-duracion) linear infinite;
}

/* Se para al apuntar Y al recibir el foco. Lo segundo importa tanto como lo
   primero: un enlace que se mueve mientras lo tienes enfocado es imposible de
   activar con precisión. El script además desmonta la animación entera
   mientras el foco esté dentro, para que el navegador pueda desplazar el
   enlace enfocado hasta ponerlo a la vista. */
.sat-marcas-slider.is-animado:hover .sat-marcas-pista,
.sat-marcas-slider.is-animado:focus-within .sat-marcas-pista {
  animation-play-state: paused;
}

/* Las copias solo existen para cerrar el bucle. Fuera del estado animado
   estorban: se apagan y la fila vuelve a mostrar cada marca una vez. */
.sat-marcas-slider:not(.is-animado) .sat-marca[aria-hidden="true"] {
  display: none;
}

@keyframes sat-marcas-cinta {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Menos movimiento: NO se anima. Doble red — el script ni siquiera monta la
   cinta, y si `.is-animado` llegara a estar puesta (por ejemplo si el usuario
   cambia la preferencia con la página abierta) esta regla la desactiva y
   devuelve la fila desplazable a mano. */
@media (prefers-reduced-motion: reduce) {
  .sat-marcas-slider.is-animado {
    overflow-x: auto;
  }
  .sat-marcas-slider.is-animado .sat-marcas-pista {
    animation: none;
  }
  .sat-marcas-slider.is-animado .sat-marca[aria-hidden="true"] {
    display: none;
  }
}

/* ── sat-panel-servicios ────────────────────────────────────────────────
   La lista de servicios en la columna derecha del bloque `sat-servicios`
   (18-ago-2026). Sustituye al panel de cuatro ventajas.

   Filas apiladas, una por servicio, con la marca de verificación en disco:
   es el tratamiento de la referencia que pasó el propietario. Cada fila es un
   ENLACE a su página de servicio, así que toda la fila responde al puntero y
   al foco, no solo el texto.

   Agnóstico al recuento: hoy son seis servicios, mañana pueden ser cuatro u
   ocho. Ninguna regla asume un número. */

.sat-panel-servicios-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sat-space-2);
}
.sat-panel-servicios-list li {
  display: flex;
  align-items: center;
  gap: var(--sat-space-3);
  padding: var(--sat-space-3);
  background: var(--sat-color-bg-alt);
  border-radius: var(--sat-radius);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.sat-panel-servicios-list li:hover {
  background: color-mix(in srgb, var(--sat-color-brand-light) 12%, var(--sat-color-bg));
  transform: translateX(3px);
}
.sat-panel-servicios-list a {
  color: var(--sat-color-brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.sat-panel-servicios-list a:hover,
.sat-panel-servicios-list a:focus {
  color: var(--sat-color-brand);
  text-decoration: underline;
}

/* El tic va en disco claro, no suelto: sin el círculo se confunde con el
   texto a esta escala. Medidas fijas y `flex: 0 0 auto` porque el nombre del
   servicio ocupa dos líneas en varias provincias. */
/* ── .sat-equipo-icono ─────────────────────────────────────────────────
   El pictograma de cada fila de `sat-nav-tipos-equipo`. Lo pone
   `sattermos_icono_equipo()` a traves de `sattermos_render_silo_nav()`, que es
   COMPARTIDA: vive aqui, en la capa que cargan todas las plantillas, y no en
   la hoja de un silo. Estuvo en provincias.css hasta el 19-ago-2026 y por eso
   las ciudades lo servian sin dimensionar.

   Medidas fijas y `flex: 0 0 auto` porque varios rotulos ocupan dos lineas
   («Reparacion y mantenimiento de unidad de tratamiento de aire»). En naranja
   institucional: cada fila ES un punto de entrada a su pagina. */
.sat-equipo-icono {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sat-color-cta);
}

.sat-servicio-tic {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.3rem;
  box-sizing: content-box;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sat-color-brand-light) 15%, transparent);
  color: var(--sat-color-brand);
}

@media (prefers-reduced-motion: reduce) {
  .sat-panel-servicios-list li,
  .sat-panel-servicios-list li:hover {
    transition: none;
    transform: none;
  }
}

/* ── ENLACES DENTRO DE LA PROSA ─────────────────────────────────────────
   Medido el 19-ago-2026 en la página de Navarra: el enlace se pinta con
   `--sat-color-brand` y el párrafo que lo rodea con
   `--sat-color-text-secondary`. El contraste ENTRE LOS DOS es de
   1,00:1 — misma luminancia exacta— y no había subrayado en ninguna regla del
   cuerpo. El resultado es un enlace que existe en el HTML, responde al clic y
   es literalmente invisible al leer.

   Lo detectó el propietario mirando la página, no ninguna compuerta: yo había
   verificado que los tres enlaces estaban servidos y di el trabajo por bueno.

   WCAG 1.4.1 pide, cuando el color es la única señal, 3:1 contra el texto que
   rodea al enlace. Aquí se resuelve con subrayado, que además es lo que la
   gente reconoce como enlace sin pensar.

   SOLO EN PÁRRAFOS. Las listas del cuerpo son navegación —`sat-nav-*`,
   ciudades, hermanas— y ahí el enlace ya se lee como enlace por su sitio y su
   maquetación; subrayarlas convertiría cada rejilla en una madeja de rayas. */

.sat-cuerpo p a,
.sat-cuerpo dd a {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--sat-color-brand) 45%, transparent);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.sat-cuerpo p a:hover,
.sat-cuerpo p a:focus,
.sat-cuerpo dd a:hover,
.sat-cuerpo dd a:focus {
  text-decoration-color: currentColor;
}

/* ── CTA de llamada ────────────────────────────────────────────────────
   Marcado: template-parts/cta-llamada.php. Va en global.css y no en una hoja
   de silo porque se engancha a `sattermos_cta_slot`, que existe en las siete
   plantillas: si viviera en provincias.css, el mismo botón saldría sin
   estilo en ciudad, marcas o contacto. */

/* El botón a la izquierda y el microcopy a su derecha (19-ago-2026).
   `row-reverse` y no reordenar el marcado: en el HTML el microcopy sigue
   ANTES que el botón, así que un lector de pantalla anuncia primero la
   promesa y después la acción, que es el orden que tiene sentido al
   escuchar. Lo que cambia es solo la disposición visual.

   En estrecho se apila, porque los dos juntos no caben en una línea de móvil
   sin partir el microcopy en tres renglones. */
.sat-cta-llamada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sat-space-2);
  margin-top: var(--sat-space-4);
}
@media (min-width: 48rem) {
  .sat-cta-llamada {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sat-space-4);
  }
}

.sat-cta-microcopy {
  display: flex;
  align-items: center;
  gap: var(--sat-space-2);
  margin: 0;
  color: var(--sat-color-text-secondary);
}

/* La bolita: verde de `--sat-color-success` con un halo que late. El halo es
   una SOMBRA que crece y se desvanece, no la propia bolita agrandándose: si
   escalara el punto, empujaría el texto de al lado en cada latido. */
.sat-cta-punto {
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--sat-color-success);
  animation: sat-latido 2s ease-out infinite;
}
@keyframes sat-latido {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sat-color-success) 55%, transparent);
  }
  70% {
    box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--sat-color-success) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sat-color-success) 0%, transparent);
  }
}

.sat-cta-boton {
  display: inline-flex;
  align-items: center;
  gap: var(--sat-space-2);
  padding: var(--sat-space-3) var(--sat-space-4);
  border-radius: var(--sat-radius);
  /* El naranja de marca ya cumple 4,72:1 con texto blanco desde que se ajusto
     la paleta el 01-sep-2026, asi que aqui va el token de marca a secas: no hay
     variante que recordar ni excepcion que mantener. */
  background: var(--sat-color-cta);
  color: var(--sat-color-bg);
  font-weight: 700;
  font-size: var(--sat-text-lg);
  text-decoration: none;
  box-shadow: var(--sat-shadow-cta);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sat-cta-boton:hover,
.sat-cta-boton:focus {
  background: var(--sat-color-cta-hover);
  color: var(--sat-color-bg);
  transform: translateY(-2px);
  box-shadow: 0 14px 20px -4px rgba(255, 87, 34, 0.4);
}
.sat-cta-boton:focus-visible {
  outline: 2px solid var(--sat-color-brand-dark);
  outline-offset: 2px;
}
.sat-cta-icono {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}
/* El número, dentro del propio botón: quien mira el móvil quiere verlo antes
   de pulsar. Se separa con un filete en vez de con un guion. */
.sat-cta-numero {
  padding-inline-start: var(--sat-space-2);
  border-inline-start: 1px solid color-mix(in srgb, var(--sat-color-bg) 45%, transparent);
}

/* Quien pide menos movimiento no recibe latido: es un adorno que llama la
   atención, exactamente lo que esa preferencia pide desactivar. */
@media (prefers-reduced-motion: reduce) {
  .sat-cta-punto {
    animation: none;
  }
  .sat-cta-boton:hover {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   sat-dudas — LAS CUATRO TARJETAS DE DUDAS DEL CLIENTE

   El copy vive en `dudas_cliente` de data/business-facts.json y el marcado en
   template-parts/panel-dudas.php. Se imprime bajo el hero en todo el sitio
   —salvo en marcas, donde va en la columna derecha de la entradilla porque
   ahi nacio—. Vive AQUI, en la capa que cargan todas las paginas, porque un
   componente de nueve plantillas no es de ningun silo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Las cuatro tarjetas ──────────────────────────────────────────────────
   MARCADO: template-parts/panel-dudas.php — una `<ul>` con cuatro `<li>`, cada
   uno con su pictograma, su pregunta en `<strong>` y su respuesta en
   `.sat-text-sm`. Ni un solo encabezado: el título de una tarjeta es una
   pregunta del lector, no una sección del documento, y cuatro `<h3>` meterían
   cuatro entradas falsas en el esquema. El porqué largo está en el propio
   template-part.

   ═══ POR QUÉ NO SE REUTILIZA `.sat-tarjeta` DE silo.css ═══

   Encajaba en lo visual y no encaja en lo demás, y son tres cosas concretas:

     · `.sat-tarjeta` lleva `:hover` con `transform: translateY(-4px)`. Esa
       tarjeta se desplaza porque LLEVA A ALGÚN SITIO —las de `sat-servicios`
       tienen dentro el enlace al silo—, y estas cuatro no llevan a ninguna
       parte: son respuestas, no destinos. Es exactamente el mismo argumento ya
       escrito en la sección 3 de esta hoja para no darle galón ni movimiento a
       las familias de equipo, y se resume igual: la diferencia entre decorar y
       mentir.
     · Ese `:hover` obligaría además a traer aquí una consulta
       `prefers-reduced-motion`, porque la de silo.css se carga ANTES que esta
       hoja y no cubre lo que se escriba después — el desajuste que está
       documentado en la cabecera de este archivo y que ya costó una regresión
       en provincias.css.
     · `initRevelado()` de silo.js observa `.sat-tarjeta` por clase. Ponérsela
       a cuatro `<li>` que no son tarjetas de contenido metería cuatro
       elementos más en el observador y les aplicaría el escalonado de
       `nth-child` que silo.css calcula para la rejilla de tarjetas, no para
       esta lista.

   La superficie SÍ se copia —fondo alterno, borde y radio de los tokens—, que
   es lo que hace que las dos se reconozcan como parientes. Se copia el aspecto,
   no el comportamiento. Es el mismo criterio con el que
   `.sat-equipos-familias li` construye su propia fila en la sección 3. */

/* AIRE ALREDEDOR DEL PANEL, SOLO CUANDO VA SUELTO (19-ago-2026, peticion del
   propietario: «a sat-dudas ponle en escritorio un margen arriba y abajo de
   5rem, adaptalo a movil, en el caso de las paginas que no esta al lado del
   sat-entradilla-texto»).

   La distincion es real y no un capricho: el panel tiene DOS colocaciones. Bajo
   el hero va SUELTO, como una banda propia entre el titular y el cuerpo, y ahi
   necesita separarse de los dos. En marcas va en la COLUMNA DERECHA de
   `sat-entradilla`, emparejado con el texto: alli un margen vertical lo
   descolgaria de la fila que forma con su pareja, que es justo lo que le da
   sentido.

   5rem no sale de la escala de espacio —salta de 2,5 a 4 a 6— y es la cifra
   que pidio el propietario, asi que va literal. En movil baja a
   `--sat-space-5`: 5rem entre bloques en una pantalla de 390 px es media
   pantalla de aire, y obliga a arrastrar para descubrir que hay debajo. */
.sat-dudas {
  margin-block: 5rem;
}

@media (max-width: 61.99rem) {
  .sat-dudas {
    margin-block: var(--sat-space-5);
  }
}

/* La colocacion emparejada se queda sin margen. (0,2,0) frente a (0,1,0): gana
   por especificidad, no por orden, asi que sigue valiendo si alguien mueve el
   bloque de sitio. */
.sat-entradilla .sat-dudas {
  margin-block: 0;
}

.sat-dudas ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--sat-space-3);
  margin: 0;
  padding: 0;
}
/* `auto-fit` RESUELVE LAS DOS COLOCACIONES CON UNA SOLA REGLA (19-ago-2026).
   Aqui habia una consulta `@media (min-width: 48rem)` que forzaba dos
   columnas. Tenia sentido cuando el panel solo vivia en la columna derecha de
   la entradilla de marca; al llevarlo bajo el hero de todo el sitio se
   convirtio en un techo: a ancho completo seguia dando 2x2 en vez de las
   cuatro en fila. Y no podia arreglarse subiendo el punto de ruptura, porque
   una consulta de medios mide la VENTANA y lo que aqui importa es el ancho
   del CONTENEDOR: la misma ventana de 1440 px tiene una banda entera bajo el
   hero y un tercio de banda en la entradilla de marca.

   `repeat(auto-fit, minmax(min(14rem, 100%), 1fr))` lo decide solo: cuatro en la banda,
   dos en la columna estrecha, una en movil. Sin consulta que mantener. */

.sat-dudas li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sat-space-2);
  margin: 0;
  padding: var(--sat-space-4);
  background: var(--sat-color-bg-alt);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  color: var(--sat-color-text);
}

/* El pictograma en su cajita, mismo recurso que `.sat-paso-icono` de la
   sección 4: cuadrado redondeado con el celeste institucional sobre un velo
   del mismo color. La translucidez se hace con `color-mix()` sobre el token,
   nunca con un literal de color propio. */
.sat-duda-icono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--sat-radius);
  background: color-mix(in srgb, var(--sat-color-brand-light) 14%, transparent);
  color: var(--sat-color-brand-light);
}
.sat-duda-icono svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* La pregunta. Va en azul oscuro y con el interlineado de encabezado del tema
   —el token, no una cifra— porque hace el papel visual de un título aunque no
   sea un encabezado. El tamaño no se toca: lo pone tokens.css y la regla
   verificable del Paso 6 prohíbe declararlo aquí. */
.sat-dudas strong {
  color: var(--sat-color-brand-dark);
  line-height: var(--sat-line-height-heading);
}
/* La respuesta se selecciona POR SU CLASE y no como `li > span`: con la
   descendencia también casaba el `<span>` del icono, que es el otro hijo
   directo del `<li>`, y encima le ganaba en especificidad. Está medido y
   documentado en `.sat-ventajas li > .sat-text-sm` de global.css; aquí se evita
   el mismo error en vez de repetirlo. */
.sat-dudas .sat-text-sm {
  color: var(--sat-color-text-secondary);
}

/* ── BARRA INFERIOR DE LLAMADA EN MÓVIL ────────────────────────────────
   Guía de diseño del propietario, 01-sep-2026. El contenedor y la posición
   los pone el tema; el contenido lo inyecta el plugin en el slot
   `sattermos_cta_slot('llamada-movil')` — ver functions.php §15.bis.

   Solo existe por debajo de 768px: en escritorio el teléfono ya vive en la
   cabecera sticky y una barra fija ahí solo robaría alto de pantalla. */

.sat-llamada-movil {
  display: none;
}

@media (max-width: 767px) {
  .sat-llamada-movil {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sat-space-2);
    padding: var(--sat-space-3);
    background: var(--sat-color-cta);
    box-shadow: 0 -4px 12px rgba(10, 37, 64, 0.15);
    /* En iPhone la franja del gesto se come el borde inferior: sin esto el
       texto queda medio tapado en cuanto el navegador oculta su barra. */
    padding-bottom: calc(var(--sat-space-3) + env(safe-area-inset-bottom, 0px));
  }

  .sat-llamada-movil a {
    display: flex;
    align-items: center;
    gap: var(--sat-space-2);
    color: var(--sat-color-bg);
    font-family: var(--sat-font-heading);
    font-weight: 700;
    font-size: var(--sat-text-lg);
    text-decoration: none;
    /* Objetivo táctil de 44px, que es el mínimo de la WCAG para puntero. */
    min-height: 2.75rem;
  }

  .sat-llamada-movil a:focus-visible {
    outline: 2px solid var(--sat-color-bg);
    outline-offset: 2px;
  }

  /* La barra ocupa el borde inferior, así que el botón flotante de WhatsApp
     sube por encima de ella en vez de quedar debajo. */
  .sat-whatsapp-flotante {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Y el pie de página deja hueco: sin esto, la barra tapa las últimas
     líneas —que son justo los enlaces legales—. */
  body {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── HERO SOBRE AZUL CONFIANZA ─────────────────────────────────────────
   Guía de diseño del propietario, 01-sep-2026: «fondo --color-primary con
   texto claro para dar impacto visual inmediato».

   POR QUÉ A ANCHO COMPLETO Y NO EN UNA TARJETA. El contenedor del silo ya
   es de ancho completo (ver `body[class*="sat-silo-"] #page.grid-container`
   más arriba), así que la banda puede sangrar de borde a borde sin trucos de
   `100vw` ni márgenes negativos. Una banda que llega a los bordes es lo que
   separa una portada de una sección más; contenida en una caja pierde
   justamente el impacto que se busca.

   El texto se aclara aquí y no en cada regla hija: la portada es el único
   sitio del sitio con fondo oscuro, y repartir el color claro por los
   componentes obligaría a que cada uno supiera dónde vive. */

/* ── HERO SOBRE FOTO, CON VELO BLANCO ──────────────────────────────────────
   01-sep-2026, decisión del propietario: la foto pasa de columna derecha a
   FONDO de la banda, con una capa blanca difuminada encima que le devuelve el
   contraste al texto. El hero deja de ser azul marino y pasa a claro.

   🔴 EL CONTRASTE NO DEPENDE DE LA FOTO, Y ESA ES LA REGLA QUE MANDA. Son 254
   fotos distintas, unas casi blancas y otras casi negras, y el mismo texto
   tiene que leerse sobre todas. El velo lleva alfa 0.88, no un valor «bonito»:
   sobre la foto más oscura posible —negro puro— compone #E0E0E0, y el texto
   #1E293B encima da 11:1. Sobre la más clara, 13:1. O sea que el peor caso
   duplica con holgura el 4,5:1 de la WCAG y NINGUNA foto puede romperlo.

   EL `blur` ES UN EXTRA, NO EL MECANISMO. `backdrop-filter` no está en todos
   los navegadores y en algunos se desactiva por ahorro de batería; si
   desaparece, el velo sigue ahí con su alfa y el texto sigue cumpliendo. Al
   revés —fiarlo al blur y dejar el velo casi transparente— el texto sería
   ilegible justo en los navegadores que peor lo pasan. */
.sat-portada {
  position: relative;
  isolation: isolate;
  background: var(--sat-color-bg-page);
  color: var(--sat-color-text);
  padding-block: var(--sat-space-6);
  /* 🔴 EL PADDING SE CALCULA, NO SE FIJA. Esta regla llega DESPUÉS de la de
     arriba y antes ponía `--sat-space-4` plano, así que pisaba el cálculo que
     centra el contenido en la medida de lectura: en pantalla ancha el titular
     salía pegado al borde de la ventana. Se repite aquí el mismo cálculo —el
     canalón, o lo que sobre a cada lado de la columna de contenido, lo que sea
     mayor— porque la banda va a sangre y su interior no. */
  padding-inline: max(var(--sat-gutter), (100% - var(--sat-max-width-content)) / 2);
  overflow: hidden;
}

.sat-portada-fondo,
.sat-portada-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sat-portada-fondo {
  z-index: -2;
  background-image: var(--sat-portada-foto);
  background-size: cover;
  /* Igual que en la banda de banner: en estas fotos el técnico y el aparato
     están en el tercio superior, y centrar a la mitad les corta la cabeza. */
  background-position: center 35%;
}
.sat-portada-velo {
  z-index: -1;
  background: color-mix(in srgb, var(--sat-color-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.sat-portada :is(h1, h2, h3) {
  color: var(--sat-color-brand);
}

/* El sumario baja al 78 % sobre el velo: sigue dando 7,9:1 en el peor caso y
   deja de competir con el titular, que es lo que tiene que leerse primero. */
.sat-portada-sumario {
  color: color-mix(in srgb, var(--sat-color-text) 78%, var(--sat-color-bg-page));
}

.sat-portada a:not(.sat-cta-boton) {
  color: var(--sat-color-brand);
  text-decoration-color: var(--sat-color-cta);
  text-underline-offset: 0.2em;
}

.sat-portada .sat-banda-diferenciales {
  color: color-mix(in srgb, var(--sat-color-text) 78%, var(--sat-color-bg-page));
  border-color: color-mix(in srgb, var(--sat-color-brand) 18%, transparent);
}

/* ── LAS CUATRO TARJETAS DE DOLOR, A LA DERECHA ────────────────────────────
   Ocupan el sitio que dejó la foto. Dos columnas de tarjeta dentro de la
   columna derecha: cuatro apiladas alargarían el hero más que el texto de la
   izquierda y descuadrarían la banda, que es justo el problema que el
   propietario señaló en su día con el hero anterior. */
.sat-portada-dolor {
  position: relative;
}
.sat-dolor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sat-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sat-dolor-tarjeta {
  /* Tarjeta translúcida sobre el velo: deja intuir la foto sin poner texto
     encima de ella. El borde la separa del velo, que es casi del mismo color. */
  background: color-mix(in srgb, var(--sat-color-bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--sat-color-brand) 12%, transparent);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-3);
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.sat-dolor-icono {
  display: inline-flex;
  color: var(--sat-color-cta);
}
.sat-dolor-icono svg { width: 1.35rem; height: 1.35rem; }
.sat-dolor-titulo {
  margin: 0;
  font-weight: 650;
  line-height: 1.25;
  color: var(--sat-color-brand);
  text-wrap: balance;
}
.sat-dolor-texto {
  margin: 0;
  line-height: 1.45;
  color: color-mix(in srgb, var(--sat-color-text) 82%, var(--sat-color-bg-page));
}

@media (max-width: 900px) {
  /* Por debajo del cambio a una columna, las cuatro tarjetas se apilan detrás
     del texto y en dos columnas siguen cabiendo: son frases cortas. */
  .sat-dolor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sat-dolor { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .sat-portada {
    padding-block: var(--sat-space-5);
    /* En móvil el canalón ya es pequeño; se respeta un mínimo para que el
       texto no toque el borde de la pantalla. */
    padding-inline: max(var(--sat-space-3), var(--sat-gutter));
  }
}

/* ── BANDA DE BANNER ────────────────────────────────────────────────────────
   La segunda foto de cada pagina, subida al principio del cuerpo por
   `sattermos_subir_banner()` (functions.php). Ver alli por que la imagen vive
   en el HTML del contenido y no en un campo aparte.

   ALTURA FIJA Y `object-fit: cover`, no `aspect-ratio` sobre la figura: las
   fotos del banco vienen todas 1024x1024, y una banda cuadrada a ancho de
   ventana empujaria el resto del contenido dos pantallas hacia abajo. Se
   recorta a una franja panoramica, que es lo que un banner es.

   `object-position: center 40%` porque en estas fotos el tecnico y el aparato
   estan en el tercio superior; centrado a la mitad se les corta la cabeza.

   EL PIE NO SE SUPERPONE A LA FOTO. Es contenido —una frase real sobre ese
   aparato en ese sitio, y el motivo de que la imagen sea contenido y no un
   meta—, asi que se lee sobre el fondo de pagina, con su contraste garantizado,
   en vez de sobre una imagen cuyo color no controlamos. */
.sat-banner-banda {
  grid-column: full;
  margin-block: var(--sat-space-6);
}
.sat-cuerpo .sat-banner {
  margin: 0;
  display: grid;
  gap: var(--sat-space-2);
}
.sat-banner img {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 340px);
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--sat-radius);
}
.sat-banner figcaption {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
  padding-inline: var(--sat-space-4);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sat-color-text-secondary);
  text-align: center;
  text-wrap: pretty;
}
/* En movil el recorte panoramico deja la foto demasiado baja para leerse; se
   le devuelve algo de alto y se pegan los bordes al ancho de la ventana. */
@media (max-width: 600px) {
  .sat-banner img {
    height: 200px;
    border-radius: 0;
  }
}

/* ── LA FIGURA DE BANNER, DENTRO DE LA COBERTURA ───────────────────────────
   01-sep-2026: deja de ser banda a ancho completo y acompaña al texto de
   `sat-cobertura` por la derecha. La mueve `sattermos_subir_banner()`.

   `float` y no rejilla, a propósito: la sección la escribe el redactor y su
   contenido varía —a veces un párrafo, a veces tres y una lista de ciudades—.
   Una rejilla obligaría a saber cuántas celdas hay; el flotado deja que el
   texto la rodee sea cual sea, y en móvil se desactiva sin más. */
.sat-cobertura-figura {
  float: right;
  /* 40 % sin tope en rem (01-sep-2026, petición del propietario). El
     `min(38%, 20rem)` anterior hacía que en pantallas anchas mandara el tope
     fijo y la foto se quedara pequeña al lado de una columna de texto que sí
     crecía. */
  width: 40%;
  margin: 0 0 var(--sat-space-3) var(--sat-space-4);
}
.sat-cobertura-figura .sat-banner {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.sat-cobertura-figura img {
  display: block;
  width: 100%;
  height: auto;
  /* 4/5 (vertical), no 4/3. Las fotos del banco son cuadradas y a lo ancho el
     recorte se comía al técnico y al aparato, que están en el centro. En
     vertical cabe la escena entera y además la figura acompaña mejor a una
     columna de texto que la rodea. (01-sep-2026) */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--sat-radius);
  /* Sombra corta y de poco alcance: separa la foto del fondo de página sin
     convertirla en una tarjeta flotante. */
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sat-color-brand) 18%, transparent);
}
.sat-cobertura-figura figcaption {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--sat-color-text-secondary);
  text-wrap: pretty;
}
/* La sección tiene que contener el flotado, o la siguiente se le sube al lado. */
.sat-cobertura::after { content: ""; display: block; clear: both; }

@media (max-width: 700px) {
  .sat-cobertura-figura {
    float: none;
    width: 100%;
    margin: var(--sat-space-3) 0;
  }
}

/* ── EL PÁRRAFO DE `sat-visita`, BAJO SU TITULAR Y CENTRADO ────────────────
   Lo sube `sattermos_reordenar_visita()`. Se centra en la medida de lectura:
   centrado y a ancho completo sería una línea de 120 caracteres, que se lee
   peor que alineada a la izquierda. */
/* El titular se centra con su entradilla: los dos encabezan la sección y
   dejarlos desalineados —uno a la izquierda, el párrafo centrado debajo— parte
   la cabecera del bloque en dos piezas que no se ven como una. Los pasos del
   `<ol>` siguen alineados a la izquierda, que es como se lee una secuencia. */
.sat-visita > h2 {
  text-align: center;
  text-wrap: balance;
}
.sat-visita-intro {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
}

/* Enlace de salida dentro de cada panel de pestaña. Discreto a propósito: el
   panel lo abre quien ya está interesado en ESE aparato o ESE tipo de negocio,
   y el enlace es la continuación natural, no un reclamo que compita con el CTA
   del hero. */
.sat-panel-enlace {
  margin-block: var(--sat-space-2) 0;
  font-size: 0.9375rem;
  color: var(--sat-color-text-secondary);
}
.sat-panel-enlace a {
  color: var(--sat-color-brand);
  text-decoration-color: var(--sat-color-cta);
  text-underline-offset: 0.2em;
}
/* El resto —lo que no encajó en ningún panel— va fuera de las pestañas, con
   una línea de separación para que no parezca cola del último panel. */
.sat-panel-enlace--resto {
  margin-top: var(--sat-space-3);
  padding-top: var(--sat-space-2);
  border-top: 1px solid color-mix(in srgb, var(--sat-color-brand) 12%, transparent);
}

/* El párrafo de cierre de `sat-sintomas` iba pegado a la lista: la `<ul>` no
   trae margen inferior en este contexto y el texto arrancaba a un pixel de la
   última viñeta. Se separa aquí y no tocando la `<ul>` en general, que la usan
   otras diez secciones con espaciados distintos. */
.sat-sintomas ul + p,
.sat-sintomas ol + p {
  margin-top: var(--sat-space-3);
}

/* ── LA BANDA DE MARCAS, BAJO EL HERO ──────────────────────────────────────
   01-sep-2026: sube del centro de la página al primer hueco del cuerpo, sobre
   fondo blanco, y los logotipos crecen. Es la tira que contesta «¿tocan mi
   marca?» antes de que nadie lea un párrafo, así que tiene que leerse de un
   vistazo — y a la altura anterior los dibujos eran demasiado pequeños para
   reconocer un fabricante de reojo, que es todo lo que esa tira hace. */
.sat-nav-marcas {
  grid-column: full;
  background: var(--sat-color-bg);
  /* `padding: 0` (01-sep-2026, petición del propietario). La tira se mueve
     sola de lado a lado, así que el relleno lateral no protegía nada: solo
     recortaba el recorrido y dejaba dos huecos blancos por los que los
     logotipos aparecían y desaparecían antes de llegar al borde. A ancho
     completo la cinta entra y sale de la pantalla, que es como se lee. */
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sat-color-brand) 10%, transparent);
}
/* 🔴 EL TOKEN SE PISA EN `.sat-marcas-slider`, NO EN `:root`. Ahí es donde
   está declarado —y una declaración en el propio elemento gana siempre a una
   heredada de `:root`, sea cual sea el orden—. Puesto en `:root` esta regla no
   habría hecho absolutamente nada y los logotipos habrían seguido igual de
   pequeños, sin ningún error que lo delatara.

   De `clamp(1.5rem … 2.25rem)` a 3rem fijos: el valor anterior se calculó
   cuando los dibujos eran SVG monocromos, que se reconocen por la silueta. Un
   logotipo real a color necesita más altura para leerse de reojo, que es todo
   lo que esta tira hace. */
.sat-marcas-slider { --sat-marca-altura: 3rem; }
@media (max-width: 767px) {
  .sat-marcas-slider { --sat-marca-altura: 2.25rem; }
}

/* ── LA FIGURA DENTRO DE `sat-faq` NO PUEDE FLOTAR ─────────────────────────
   🔴 `float` NO HACE NADA DENTRO DE UNA REJILLA. La figura se coloca a la
   derecha con `float: right` cuando entra en `sat-cobertura`, que es contenido
   en flujo normal y el texto la rodea. Pero `sat-faq` es `display: grid`: ahí
   la figura deja de flotar, se convierte en UNA CELDA MÁS y las preguntas caen
   debajo en vez de ponerse al lado. No es que el flotado se aplique mal — es
   que en una rejilla no existe.

   Así que en `sat-faq` se resuelve con la herramienta de esa caja: dos
   columnas, el titular a lo ancho, las preguntas a la izquierda y la figura a
   la derecha. `:has()` para no tener que inventar una clase modificadora que
   PHP tendría que recordar poner en dos sitios distintos. */
.sat-faq:has(> .sat-cobertura-figura) {
  display: grid;
  /* 24rem y no 19rem (01-sep-2026): a 19 la foto salía angosta y con el
     recorte 4/5 quedaba un sello estrecho al lado de una columna ancha. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--sat-space-4);
  align-items: start;
}
/* 🔴 LAS CUATRO FILAS SE FIJAN, Y ESTO ES EL ARREGLO DEL TITULAR. La figura la
   inserta PHP justo tras la etiqueta de apertura, así que en el marcado va
   ANTES que el rótulo y que el `<h2>`. Con solo la fila de la figura y de la
   lista fijadas, el `<h2>` no tenía sitio asignado y la colocación automática
   —que nunca retrocede— lo mandaba a la fila siguiente: el titular salía
   DEBAJO de las preguntas. Fijando las cuatro, el orden visual deja de
   depender del orden del HTML. */
.sat-faq:has(> .sat-cobertura-figura) > .sat-rotulo {
  grid-column: 1 / -1;
  grid-row: 1;
}
.sat-faq:has(> .sat-cobertura-figura) > h2 {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-bottom: 0;
}
/* 🔴 FILA EXPLÍCITA EN LAS DOS, y no es redundante. En el marcado la figura
   va ANTES de la lista —la inserta PHP justo tras la etiqueta de apertura—, y
   la colocación automática de la rejilla no retrocede: con solo la columna
   fijada, la figura ocupaba la fila 2 y la lista bajaba a la fila 3, o sea
   otra vez debajo de la imagen. Fijando la fila, el orden del HTML deja de
   mandar sobre la posición. */
.sat-faq:has(> .sat-cobertura-figura) > .faq {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}
.sat-faq:has(> .sat-cobertura-figura) > .sat-cobertura-figura {
  grid-row: 3;
}
.sat-faq > .sat-cobertura-figura {
  /* Se desactiva el flotado heredado: aquí es una celda, no un elemento
     alrededor del cual fluye nada. */
  float: none;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  margin: 0;
}
/* En provincias la sección ya trae su propia rejilla de dos columnas con una
   especificidad más alta; se le gana con la misma raíz para que la figura
   caiga en la columna derecha en lugar de abrir una tercera. */
.sat-silo-provincias section.sat-faq--con-panel:has(> .sat-cobertura-figura) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
}

@media (max-width: 900px) {
  /* Una columna: la figura pasa a ir sobre las preguntas, que a este ancho es
     lo único que se lee bien. */
  .sat-faq:has(> .sat-cobertura-figura),
  .sat-silo-provincias section.sat-faq--con-panel:has(> .sat-cobertura-figura) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* En una columna la fila explícita estorba: se devuelve el control a la
     colocación automática y manda el orden del HTML —figura arriba, preguntas
     debajo—, que a este ancho es lo que se quiere. */
  .sat-faq:has(> .sat-cobertura-figura) > :is(.sat-rotulo, h2, .faq, .sat-cobertura-figura) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── ICONO DE PASO, EN CUALQUIER SILO ──────────────────────────────────────
   🔴 SIN ESTA REGLA EL SVG SALE A TAMAÑO NATURAL. `silo.js` inyecta un
   `.sat-paso-icono` en cada `<li>` de `sat-visita` en TODOS los silos, pero su
   tamaño solo estaba escrito en `provincias.css` y `marcas.css`, los dos
   acotados por la clase de silo del `<body>`. En tipos, servicios,
   informacionales y sectores no casaba ninguna regla: el `<svg>` se pintaba a
   su tamaño intrínseco y ocupaba media pantalla.

   Se pone el mínimo aquí —caja, tamaño y color— y las dos hojas de silo
   siguen mandando sobre lo suyo: van después en la cascada y son más
   específicas, así que su tratamiento no cambia ni un píxel. (01-sep-2026) */
.sat-paso-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: var(--sat-radius);
  background: color-mix(in srgb, var(--sat-color-brand-light) 14%, transparent);
  color: var(--sat-color-brand-light);
}
.sat-paso-icono svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}
.sat-visita ol > li {
  display: flex;
  gap: var(--sat-space-3);
  align-items: flex-start;
}

/* ── PASO DE `sat-visita`: ICONO + TEXTO, EN CUALQUIER SILO ────────────────
   El `<li>` tiene ahora exactamente dos hijos —el icono y `.sat-paso-texto`—
   porque PHP envuelve el contenido al inyectar el icono. Sin ese envoltorio,
   el `<strong>` del rótulo y el texto que le sigue eran dos hijos sueltos y
   cualquier disposición en fila los repartía en dos columnas de ancho
   distinto: el rótulo estrecho a la izquierda y la explicación empezando en
   una `x` diferente en cada paso. */
.sat-visita ol > li {
  display: flex;
  gap: var(--sat-gap-icono);
  align-items: flex-start;
}
.sat-paso-texto {
  min-width: 0;
  flex: 1 1 auto;
}
/* EN LÍNEA, NO EN BLOQUE (01-sep-2026, petición del propietario). En bloque
   el rótulo se llevaba un renglón entero para sí y cada paso salía en dos
   líneas donde cabía en una. Corrido —«Resistencia. Medimos continuidad…»— se
   lee como lo que es: una frase que empieza por su asunto. */
.sat-paso-texto > strong {
  color: var(--sat-color-brand);
  margin-right: 0.25em;
}

/* ── `sat-aparato`: LISTA CON CHECK VERDE ──────────────────────────────────
   Sin viñeta y con una marca de verificación en el verde de la paleta. La
   lista enumera lo que SÍ se comprueba en el aparato, y un punto negro no
   dice eso; un check sí. El icono va en `::before` y no en el marcado: es
   decoración, no contenido, y así ningún lector de pantalla lo anuncia. */
.sat-aparato ul {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: var(--sat-space-3);
}
:root {
  /* Separación entre el icono y lo que le sigue. Responsiva y en un token
     porque la usan la lista de `sat-aparato` y el paso de `sat-visita`, y las
     dos tienen que respirar igual: dos huecos distintos en la misma página se
     leen como un descuido. */
  --sat-gap-icono: clamp(0.5rem, 0.35rem + 0.6vw, 0.9rem);
  --sat-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* ── `sat-cierre` EN CUALQUIER SILO ────────────────────────────────────────
   Las reglas que ya existían están acotadas a `.sat-silo-servicios`, así que
   en tipos el grupo se componía en PHP y luego se pintaba como tres cajas
   apiladas: la composición estaba bien y el CSS no llegaba. Mismo patrón que
   el icono de paso — el mínimo aquí, y la hoja de silo sigue mandando sobre
   lo suyo. */
.sat-cierre {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sat-space-4);
  margin-block: var(--sat-space-seccion);
}
.sat-cierre > .sat-alcance {
  grid-column: 1 / -1;
}
.sat-cierre--unico {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 767px) {
  .sat-cierre {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── EL RÓTULO DE SECCIÓN, ALINEADO CON SU TITULAR ─────────────────────────
   `.sat-rotulo` es la etiqueta que va encima del `<h2>` («PASO A PASO»). En
   `sat-visita` el titular está centrado desde el 01-sep-2026 y el rótulo se
   quedó pegado a la izquierda: dos piezas de la misma cabecera, cada una a un
   lado. Se centra con él —y solo ahí, porque en las demás secciones el titular
   sigue alineado a la izquierda y el rótulo tiene que acompañarlo. */
.sat-visita > .sat-rotulo {
  display: flex;
  justify-content: center;
}

/* ── `sat-contexto-operativo` EN CUALQUIER SILO ────────────────────────────
   Las gemelas existían solo para provincias y para la home, cada una en su
   hoja y acotadas por la clase de silo del `<body>`. Al componerlas en tipos
   —señalización y dureza— el grupo salía en el HTML y se pintaba como dos
   cajas apiladas: la composición llegaba, el estilo no. Tercera vez que pasa
   lo mismo (icono de paso, `sat-cierre`, y esto), así que aquí va el mínimo y
   las hojas de silo siguen mandando sobre lo suyo. */
.sat-contexto-operativo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sat-space-4);
  margin-block: var(--sat-space-seccion);
}
.sat-contexto-operativo--unico {
  grid-template-columns: minmax(0, 1fr);
}
/* La misma especificidad que necesita la hoja de provincias, y por el mismo
   motivo: `.sat-cuerpo section[class^="sat-"]:is(.sat-alcance, .sat-dureza)`
   de más arriba le da a `sat-dureza` —y solo a ella— un relleno propio, así
   que sin esto las dos gemelas salen con rellenos distintos. */
.sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: var(--sat-space-5) var(--sat-space-4);
  border: 0;
  border-radius: var(--sat-radius);
  background: var(--sat-color-bg);
  box-shadow: var(--sat-shadow-card);
}
@media (max-width: 767px) {
  .sat-contexto-operativo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── `sat-bloque`: LA LISTA, COMO LA DE SÍNTOMAS ───────────────────────────
   🔴 SOLO LAS LISTAS SIN CLASE. Esta pieza es para la `<ul>` PELADA que
   escribe el redactor. Cualquier lista que el tema ya haya clasificado
   —`sat-hub-lista`, la de `sat-trato-casos`— trae su propio tratamiento y
   recibía este ENCIMA: el check absoluto aparecía flotando sobre la primera
   palabra y la rejilla de 30 rem forzaba una sola columna alineada a la
   izquierda dentro de un bloque centrado. `:not([class])` separa las dos
   familias sin enumerar una por una las que hay que excluir. (01-sep-2026)
   01-sep-2026, petición del propietario. Los bloques genéricos del hub traen
   listas con viñeta de punto; se les da el mismo tratamiento que a
   `sat-sintomas` en las páginas hijas —tarjeta, sin viñeta, con marca de
   verificación— para que el hub y sus hijas se lean como el mismo sitio.

   Se reutiliza `--sat-check`, que ya define la marca en el verde de la
   paleta: dos iconos de comprobación distintos en la misma página serían dos
   ideas donde hay una. */
.sat-bloque ul:not([class]),
.sat-hub-bloque ul:not([class]),
.sat-hub-marcas-bloque ul:not([class]),
.sat-averias-texto > ul:not([class]),
.sat-banda-media .sat-trato-texto > ul:not([class]) {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
  gap: var(--sat-space-3);
}
/* 🔴 EL ICONO VA FUERA DEL FLUJO, NO COMO ELEMENTO DE UNA FILA. Con la fila
   flexible, el `<a>` del nombre y el texto que le sigue eran DOS elementos
   distintos, así que el `column-gap` se colaba entre ellos: los dos puntos
   salían despegados del nombre —«Termo eléctrico   : para viviendas…»— y el
   enlace, al no poder encoger, rompía en dos líneas mientras al lado sobraba
   sitio.

   Sacando el icono del flujo con posición absoluta, el `<li>` vuelve a ser
   texto corrido: nombre, dos puntos y explicación se comportan como una sola
   frase, la puntuación queda pegada donde debe y el conjunto rompe línea por
   donde tenga que romper. El hueco lo hace el relleno izquierdo, no un `gap`
   entre hermanos. (01-sep-2026) */
.sat-bloque ul:not([class]) > li,
.sat-hub-bloque ul:not([class]) > li,
.sat-aparato ul:not([class]) > li,
.sat-hub-marcas-bloque ul:not([class]) > li,
.sat-banda-media .sat-trato-texto > ul:not([class]) > li,
.sat-averias-texto > ul > li,
.sat-silo-marcas .sat-cobertura > ul:not(.sat-cobertura-provincias) > li {
  position: relative;
  padding: var(--sat-space-3) var(--sat-space-3) var(--sat-space-3)
           calc(1.25rem + var(--sat-gap-icono) + var(--sat-space-3));
  background: var(--sat-color-bg);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
}
.sat-bloque ul:not([class]) > li::before,
.sat-hub-bloque ul:not([class]) > li::before,
.sat-aparato ul:not([class]) > li::before,
.sat-hub-marcas-bloque ul:not([class]) > li::before,
.sat-banda-media .sat-trato-texto > ul:not([class]) > li::before,
.sat-averias-texto > ul > li::before,
.sat-silo-marcas .sat-cobertura > ul:not(.sat-cobertura-provincias) > li::before {
  content: "";
  position: absolute;
  left: var(--sat-space-3);
  top: calc(var(--sat-space-3) + 0.15em);
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--sat-color-success);
  -webkit-mask: var(--sat-check) center / contain no-repeat;
  mask: var(--sat-check) center / contain no-repeat;
}
.sat-bloque ul:not([class]) > li > strong,
.sat-hub-bloque ul:not([class]) > li > strong,
.sat-aparato ul:not([class]) > li > strong,
.sat-hub-marcas-bloque ul > li > strong {
  color: var(--sat-color-brand);
}

/* ── LOS ENLACES DEL CUERPO, EN NARANJA INSTITUCIONAL ──────────────────────
   01-sep-2026, petición del propietario. Eran azul de marca, el mismo color
   del titular y del rótulo: un enlace que comparte color con el texto de
   alrededor deja de leerse como enlace. El naranja es el color de acción del
   sitio —el del CTA— y aquí hace el mismo trabajo.

   NO ALCANZA A LOS BOTONES NI A LAS BANDAS OSCURAS: el CTA ya es naranja
   sólido y un enlace naranja sobre naranja desaparecería; y sobre el azul del
   hero el naranja no llega a 4,5:1. Los dos casos se excluyen por selector,
   no por confianza. */
.sat-cuerpo a:not(.sat-cta-boton):not(.sat-marca a):not([class*="boton"]) {
  color: var(--sat-color-cta-hover);
  text-decoration-color: color-mix(in srgb, var(--sat-color-cta) 45%, transparent);
  text-underline-offset: 0.2em;
}
.sat-cuerpo a:not(.sat-cta-boton):hover {
  text-decoration-color: var(--sat-color-cta);
}

/* ── LA BANDA DE GARANTÍA, EN CUALQUIER SILO ───────────────────────────────
   🔴 `marcas.css` dice, en su cabecera, que no copia estas reglas «porque
   NINGUNA de las 16 marcas emite esa lista». Era cierto cuando se escribió y
   ha dejado de serlo: el corpus nuevo sí la emite —tres puntos por marca—, así
   que en las 16 páginas de fabricante la banda salía sin rejilla, sin tarjeta
   y con el icono a tamaño natural. Un supuesto sobre el contenido envejece con
   el contenido; por eso el mínimo va aquí y no se copia por hoja.

   Es la cuarta vez con el mismo patrón: icono de paso, `sat-cierre`,
   `sat-contexto-operativo` y ahora esto. Lo acotado por clase de silo se queda
   sin aplicar en cuanto un silo nuevo emite el mismo bloque. */
.sat-garantia > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--sat-space-3);
  list-style: none;
  margin: var(--sat-space-4) 0 0;
  padding: 0;
}
.sat-garantia > ul > li {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--sat-color-bg) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sat-color-bg) 18%, transparent);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-4);
  color: color-mix(in srgb, var(--sat-color-bg) 86%, transparent);
}
.sat-garantia > ul > li.sat-garantia-item--mejorado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sat-space-3);
}
.sat-garantia-item--mejorado > .sat-garantia-icono {
  display: inline-grid;
  place-items: center;
  width: var(--sat-space-6);
  height: var(--sat-space-6);
  border-radius: 50%;
  color: var(--sat-color-bg);
  background: color-mix(in srgb, var(--sat-color-brand-light) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--sat-color-brand-light) 48%, transparent);
}
.sat-garantia-item--mejorado > .sat-garantia-icono svg {
  width: var(--sat-space-4);
  height: var(--sat-space-4);
}
.sat-garantia-item--mejorado > .sat-garantia-texto {
  min-width: 0;
}

/* ── `sat-averias-texto`: CADA PUNTO, UNA TARJETA ──────────────────────────
   La lista enumera lo que el aparato hace cuando falla. En tarjetas cada
   síntoma se lee por separado, que es como se busca: alguien mira la lista
   para encontrar EL SUYO, no para leerla entera. */
/* El párrafo de cierre iba pegado a la última tarjeta. */
.sat-averias-texto ul + p {
  margin-top: var(--sat-space-3);
}

/* El logotipo de la marca, bajo el CTA del hero. Discreto: acompaña al
   titular, no compite con él. */
.sat-portada-logo-marca {
  margin-top: var(--sat-space-4);
  display: block;
  /* Responsivo: en el hero el logotipo identifica la página de un vistazo, así
     que crece con el ancho en vez de quedarse en un sello fijo. */
  height: clamp(3rem, 2.2rem + 2.4vw, 4.5rem);
  width: auto;
}

/* ── PROVINCIAS DESTACADAS EN `sat-cobertura` ──────────────────────────────
   Navegación, no prosa: por eso va en rejilla y con la bolita del CTA delante
   de cada una. Ver `sattermos_provincias_en_cobertura()`.

   La bolita late igual que la del CTA porque es la MISMA clase; quien pida
   menos movimiento la recibe quieta por la regla de `prefers-reduced-motion`
   que ya existe, sin tener que repetirla aquí. */
.sat-cobertura-provincias {
  list-style: none;
  padding-left: 0;
  margin: var(--sat-space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--sat-space-2) var(--sat-space-3);
}
/* 🔴 SIN CAJA Y SIN CHECK, Y HAY QUE DECIRLO EXPLÍCITAMENTE. Este `<ul>` es
   un hijo directo de `sat-cobertura`, así que lo alcanzaba la regla-tarjeta
   compartida —fondo, borde y marca de verificación— pensada para las listas
   de contenido. Salían las dos cosas: el check de la tarjeta Y la bolita.
   Arriba se excluye por selector; aquí se neutraliza lo que quedara. */
.sat-cobertura-provincias > li {
  display: flex;
  align-items: center;
  gap: var(--sat-gap-icono);
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
}
.sat-cobertura-provincias > li::before {
  content: none;
}
.sat-cobertura-todas {
  margin-top: var(--sat-space-3);
  font-size: 0.9375rem;
}

/* ── COLUMNA DE APOYO EN LA FAQ ────────────────────────────────────────────
   Imagen, remate y CTA a la IZQUIERDA de las preguntas. Ver
   `sattermos_faq_columna_apoyo()`.

   Se usa `:has()` y filas explícitas por el mismo motivo que en la figura de
   banner: el bloque lo inserta PHP antes que el resto del contenido, así que
   sin fijar la fila la colocación automática mandaría el titular debajo. */
.sat-faq:has(> .sat-faq-apoyo) {
  display: grid;
  /* 38 % y no `22rem` (01-sep-2026, petición del propietario): con la medida
     fija la columna se quedaba clavada mientras las preguntas crecían, y en
     pantalla ancha el apoyo iba quedando cada vez más estrecho al lado. En
     porcentaje las dos crecen a la vez. */
  grid-template-columns: 38% minmax(0, 1fr);
  /* 10 % de separación (01-sep-2026, petición del propietario). En porcentaje
     como las columnas: con un hueco fijo, al crecer la pantalla las dos
     columnas se separaban proporcionalmente menos y el bloque se veía
     apelmazado justo donde más sitio hay. */
  column-gap: 10%;
  row-gap: var(--sat-space-2);
  /* 🔴 LAS FILAS SE DECLARAN, O EL APOYO LAS ESTIRA. La columna izquierda
     ocupa las tres filas y es más alta que lo que hay a su derecha; con las
     filas en automático, ese exceso se reparte a partes iguales entre las
     tres y separa el rótulo del titular, y el titular de las preguntas, con
     dos huecos enormes que nadie pidió.

     `auto auto 1fr`: las dos primeras miden lo que ocupa su contenido y toda
     la holgura cae en la lista de preguntas, que es la que puede absorberla
     sin que se note. */
  grid-template-rows: auto auto 1fr;
  align-items: start;
}
/* 🔴 EL TITULAR Y SU RÓTULO VAN SOBRE LAS PREGUNTAS, NO A ANCHO COMPLETO
   (01-sep-2026, petición del propietario). Antes cruzaban las dos columnas y
   el apoyo quedaba colgando debajo de un titular que no lo encabezaba: «Dudas
   frecuentes» anunciaba la columna de preguntas, no la imagen ni el CTA.
   Encima de su propia columna, cada mitad dice de qué va. */
.sat-faq:has(> .sat-faq-apoyo) > .sat-rotulo {
  grid-column: 2;
  grid-row: 1;
}
.sat-faq:has(> .sat-faq-apoyo) > h2 {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 0;
}
/* La columna de apoyo ocupa las tres filas: sin el `span`, quedaría a la
   altura de la fila 1 —la del rótulo— y la imagen empezaría medio bloque por
   encima de la primera pregunta. */
.sat-faq-apoyo {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  gap: var(--sat-space-2);
  align-content: start;
}
.sat-faq:has(> .sat-faq-apoyo) > .faq {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
}
/* 3 rem alrededor de la lista, solo en escritorio (01-sep-2026, petición del
   propietario). Va dentro de la consulta de más abajo y no aquí suelto: en
   móvil la sección ya colapsa a una columna y ahí ese margen sería un
   desperdicio de ancho en la pantalla que menos tiene. */
.sat-faq-apoyo-img {
  width: 100%;
  height: auto;
  border-radius: var(--sat-radius);
}
.sat-faq-apoyo-titulo {
  margin: var(--sat-space-2) 0 0;
  font-weight: 650;
  color: var(--sat-color-brand);
}
.sat-faq-apoyo p {
  margin: 0;
  color: var(--sat-color-text-secondary);
  line-height: 1.5;
}

@media (min-width: 901px) {
  .sat-faq:has(> .sat-faq-apoyo) > .faq {
    margin: 3rem;
  }
}

@media (max-width: 900px) {
  /* Una columna: el apoyo pasa encima de las preguntas y la fila explícita
     estorba, así que se devuelve el control al orden del HTML. */
  .sat-faq:has(> .sat-faq-apoyo) {
    grid-template-columns: minmax(0, 1fr);
  }
  .sat-faq:has(> .sat-faq-apoyo) > :is(.sat-rotulo, h2, .sat-faq-apoyo, .faq) {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── LA FAQ SE ABRE CON TRANSICIÓN ─────────────────────────────────────────
   01-sep-2026, petición del propietario. Un `<details>` nativo salta de cero
   a su alto final en un fotograma: el contenido aparece de golpe y la página
   pega un tirón que obliga a buscar dónde estaba uno leyendo.

   `::details-content` es el pseudo-elemento que envuelve lo que hay tras el
   `<summary>`, y `interpolate-size: allow-keywords` es lo que permite animar
   HACIA `auto` —sin él, `height` no sabe interpolar de `0` a «lo que mida» y
   la transición no arranca—. Se declara en `:root` porque es una capacidad
   del documento, no de un componente.

   `content-visibility` viaja en la misma transición con
   `transition-behavior: allow-discrete`: es una propiedad discreta y, sin esa
   línea, el contenido se ocultaría de golpe al cerrar aunque la altura sí
   animara.

   DEGRADA SOLO: donde el navegador no conozca el pseudo-elemento, el
   `<details>` sigue abriendo y cerrando como siempre. No hay JavaScript de
   por medio, así que no hay nada que pueda quedarse a medias. */
:root {
  interpolate-size: allow-keywords;
}
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  content-visibility: hidden;
  transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
}
.faq details[open]::details-content {
  block-size: auto;
  content-visibility: visible;
}
/* El indicador del `<summary>` gira con la misma duración, para que el gesto
   se lea como uno solo y no como dos cosas que pasan a la vez. */
.faq details > summary::marker,
.faq details > summary::-webkit-details-marker {
  transition: transform 0.28s ease;
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content,
  .faq details[open]::details-content {
    transition: none;
  }
}

/* ── LAS CUATRO TARJETAS, COMO BANDA BAJO LA PORTADA ───────────────────────
   01-sep-2026. La misma pieza que va a la derecha del hero en los demás
   silos, aquí a ancho completo y en cuatro columnas. Los iconos crecen y pasan
   al naranja de acción: en el hero acompañan a un texto que ya manda, y aquí
   son lo primero que se ve de cada tarjeta. */
.sat-banda-dolor {
  grid-column: full;
  background: var(--sat-color-bg);
  padding-block: var(--sat-space-5);
  padding-inline: max(var(--sat-gutter), (100% - var(--sat-max-width-content)) / 2);
  border-block: 1px solid color-mix(in srgb, var(--sat-color-brand) 10%, transparent);
}
.sat-banda-dolor .sat-dolor {
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sat-space-4);
}
.sat-banda-dolor .sat-dolor-tarjeta {
  background: none;
  border: 0;
  padding: 0;
  gap: var(--sat-space-2);
}
.sat-banda-dolor .sat-dolor-icono {
  /* Caja propia y no solo un trazo más grande: a este tamaño el pictograma
     suelto flota, y el fondo tenue lo asienta sin convertirlo en un botón. */
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--sat-radius);
  color: var(--sat-color-cta);
  background: color-mix(in srgb, var(--sat-color-cta) 10%, transparent);
}
.sat-banda-dolor .sat-dolor-icono svg {
  width: 1.75rem;
  height: 1.75rem;
}
.sat-banda-dolor .sat-dolor-titulo {
  font-size: 1.0625rem;
}

/* ── LOS TRES MOTIVOS, BAJO EL CTA DEL HERO ────────────────────────────────
   Ver `template-parts/banda-decision.php`. En fila mientras quepan; cada punto
   es corto y en columna ocuparía media portada. */
.sat-banda-decision {
  list-style: none;
  margin: var(--sat-space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--sat-space-3);
}
.sat-banda-decision > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sat-gap-icono);
  min-width: 0;
}
.sat-decision-icono {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--sat-radius);
  color: var(--sat-color-cta);
  background: color-mix(in srgb, var(--sat-color-cta) 10%, transparent);
}
.sat-decision-icono svg { width: 1.25rem; height: 1.25rem; }
/* 🔴 EL HERO SE ALIGERA: SOLO EL TITULAR DE CADA MOTIVO (01-sep-2026, el
   propietario lo vio «muy cargado» y tenía razón). Cada punto salía con dos
   líneas —rótulo y explicación— y tres puntos a dos líneas, bajo un titular de
   tres, un párrafo y el CTA, llenan la portada entera.

   La segunda línea no se pierde: dice lo mismo que las tarjetas de la banda
   que va JUSTO DEBAJO —«Cita en 24-48 h», «Presupuesto por escrito antes de
   intervenir»— y repetirlo a un palmo no refuerza, reparte la atención. Se
   oculta en pantalla y se conserva en el marcado para el lector de pantalla,
   que no tiene la banda de abajo a la vista mientras oye el hero. */
.sat-decision-texto {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.sat-decision-texto > strong { color: var(--sat-color-brand); line-height: 1.25; }
.sat-decision-texto > .sat-text-sm {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sat-banda-decision > li { align-items: center; }
.sat-decision-icono { width: 2rem; height: 2rem; }
.sat-decision-icono svg { width: 1.1rem; height: 1.1rem; }

/* ── SELLO DE `sat-alcance` ────────────────────────────────────────────────
   Esquina inferior derecha del bloque. Ver `sattermos_sello_en_alcance()`.

   `position: absolute` sobre la sección y no un elemento más en el flujo: es
   un distintivo, no un punto de la lista, y en flujo empujaría el contenido
   hacia abajo y se leería como el remate del último párrafo. */
.sat-cuerpo section.sat-alcance {
  position: relative;
}
/* TARJETA ELEVADA, NO PÍLDORA. La referencia del propietario es un distintivo
   con cuerpo —fondo propio, esquinas amplias y sombra— que se apoya sobre el
   contenido. La primera versión salió como una etiqueta plana y no se leía
   como un sello, que es todo lo que un sello tiene que hacer. */
.sat-sello {
  position: absolute;
  right: var(--sat-space-4);
  bottom: var(--sat-space-4);
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  min-width: 11rem;
  padding: var(--sat-space-4) var(--sat-space-5);
  border-radius: calc(var(--sat-radius) * 2);
  background: var(--sat-color-bg);
  border: 1px solid color-mix(in srgb, var(--sat-color-brand) 12%, transparent);
  box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--sat-color-brand) 18%, transparent);
  text-align: center;
  line-height: 1.2;
}
.sat-sello-icono {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--sat-color-cta);
  background: color-mix(in srgb, var(--sat-color-cta) 12%, transparent);
}
.sat-sello-icono svg { width: 1.6rem; height: 1.6rem; }
.sat-sello-titulo {
  font-weight: 700;
  /* Versalitas como en la referencia: a este tamaño el titular tiene que
     leerse como un rótulo, no como una frase. */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
  color: var(--sat-color-brand);
  text-wrap: nowrap;
}
.sat-sello-nota {
  font-size: 0.875rem;
  color: var(--sat-color-text-secondary);
}

@media (max-width: 767px) {
  /* En móvil no hay esquina libre: el sello vuelve al flujo, centrado bajo el
     texto. Absoluto se montaría encima de la última línea. */
  .sat-sello {
    position: static;
    margin: var(--sat-space-4) auto 0;
    width: fit-content;
  }
}

/* ── SECCIÓN CON FOTO DE FONDO ─────────────────────────────────────────────
   Mismo par fondo + velo que la portada, aplicado a una sección del cuerpo.
   Hoy lo usa `sat-sintomas`; la clase es genérica a propósito, porque el
   mecanismo no tiene nada de particular de ese bloque.

   🔴 EL VELO LLEVA ALFA 0.88 POR LA MISMA RAZÓN QUE EN EL HERO, y conviene
   repetirlo aquí porque es lo que sostiene la legibilidad: sobre la foto más
   oscura posible compone un gris claro que da 11:1 con el texto del sitio. El
   `blur` es un extra; si el navegador no lo soporta, el velo sigue estando y
   el texto sigue cumpliendo. Al revés no. */
/* DE EXTREMO A EXTREMO (01-sep-2026, petición del propietario). La banda va a
   sangre como el hero y como la banda de marcas: una foto de fondo encajonada
   en la columna de lectura se lee como una tarjeta grande, no como una banda.
   El interior sí se centra en la medida de lectura —el mismo cálculo que usa
   la portada—, así que el texto no se estira hasta el borde de la ventana. */
.sat-cuerpo section.sat-seccion--con-fondo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: full;
  border-radius: 0;
  padding-block: var(--sat-space-6);
  padding-inline: max(var(--sat-gutter), (100% - var(--sat-max-width-content)) / 2);
}
/* Las tarjetas en blanco sólido, no en el fondo translúcido que usan sobre
   página lisa: sobre una foto, un fondo semitransparente deja pasar la imagen
   y el texto de cada punto pierde el contraste que el velo le había dado. */
.sat-seccion--con-fondo :is(ul, ol) > li {
  background: var(--sat-color-bg);
  border: 1px solid color-mix(in srgb, var(--sat-color-brand) 10%, transparent);
}
.sat-seccion-fondo,
.sat-seccion-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sat-seccion-fondo {
  z-index: -2;
  background-image: var(--sat-seccion-foto);
  background-size: cover;
  background-position: center 35%;
}
.sat-seccion-velo {
  z-index: -1;
  background: color-mix(in srgb, var(--sat-color-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}
/* El pie de la foto, al final de la sección: es el contenido que justifica que
   la imagen viva en el HTML, así que se lee, no se decora. */
.sat-seccion-pie {
  margin: var(--sat-space-4) 0 0;
  color: var(--sat-color-text-secondary);
  text-wrap: pretty;
}

/* ── ACLARACIÓN DE LISTA, EN TODO EL PROYECTO ──────────────────────────────
   01-sep-2026. El recuadro existía solo en `servicios.css`, acotado por la
   clase de silo del `<body>`: el filtro dejó de estarlo y el estilo tenía que
   seguirle. Quinta vez con el mismo patrón —icono de paso, `sat-cierre`,
   `sat-contexto-operativo`, la banda de garantía y ahora esto—, así que el
   mínimo va aquí y `servicios.css` sigue mandando sobre lo suyo.

   EL ICONO EN TONO DE INFORMACIÓN (petición del propietario). Iba en azul de
   marca, el mismo del titular: un aviso que comparte color con la cabecera no
   se lee como un aviso. `--sat-color-info` es el azul de la familia del
   primario, reservado para «esto es una nota, no una acción»: ni el naranja
   —que en este sitio significa «pulsa aquí»— ni el verde, que significa
   «confirmado». */
:root {
  --sat-color-info: #2563EB;
}
/* 🔴 EL FONDO ES TRANSLÚCIDO, NO UN COLOR SÓLIDO, Y ESO NO ES UN DETALLE. La
   primera versión de esta regla lo puso opaco —`color-mix(… info 7%, bg)`— y
   dentro de `sat-garantia`, que es una banda AZUL OSCURA con el texto en
   blanco, el recuadro salió celeste claro con letra blanca encima:
   ilegible. La versión original de `servicios.css` acertaba justo en esto:
   mezclando con `transparent`, el recuadro toma el color de la sección que lo
   contiene y funciona igual sobre papel blanco que sobre la banda oscura.

   Se conservan sus valores exactos —18 % del celeste sobre transparente y el
   borde al 40 % del azul de marca— porque están medidos sobre los dos fondos.
   Lo ÚNICO que cambia respecto al original es el color del icono, que pasa al
   tono de información. */
.sat-aclaracion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sat-space-3);
  margin-block: var(--sat-space-4) var(--sat-space-3);
  padding: var(--sat-space-3) var(--sat-space-4);
  border: 1px solid color-mix(in srgb, var(--sat-color-brand) 40%, transparent);
  border-radius: var(--sat-radius);
  background: color-mix(in srgb, var(--sat-color-brand-light) 18%, transparent);
}
.sat-aclaracion-icono {
  width: var(--sat-space-4);
  height: var(--sat-space-4);
  color: var(--sat-color-info);
  /* El trazo de un icono circular se apoya más arriba que la línea base del
     texto; sin este empujón queda medio renglón alto. */
  transform: translateY(0.1em);
}
.sat-aclaracion-texto > p { margin-block: 0 var(--sat-space-2); }
.sat-aclaracion-texto > p:last-child { margin-bottom: 0; }

/* LA MISMA NOTA, SOBRE LA BANDA OSCURA. Existía en `servicios.css` acotada al
   silo, así que en la home y en el resto la nota de `sat-garantia` se quedaba
   con el tratamiento de fondo claro sobre un fondo que no lo es. */
.sat-garantia .sat-aclaracion {
  background: color-mix(in srgb, var(--sat-color-bg) 12%, transparent);
  border-color: color-mix(in srgb, var(--sat-color-bg) 30%, transparent);
  color: color-mix(in srgb, var(--sat-color-bg) 86%, transparent);
}
/* Blanco puro y no el tono de información: sobre el extremo claro del
   degradado, un azul se queda en 2,5:1 contra el relleno, y un pictograma que
   se pierde en media banda no es un pictograma. */
.sat-garantia .sat-aclaracion-icono {
  color: var(--sat-color-bg);
}

/* ── `sat-normalidad`: TEXTO Y FOTO ────────────────────────────────────────
   60/40 en escritorio (01-sep-2026, petición del propietario). El texto manda
   porque es lo que resuelve la duda; la foto acompaña. Ver
   `sattermos_normalidad_dos_columnas()`. */
/* BANDA A SANGRE Y SIN COSTURA (01-sep-2026, referencia del propietario). La
   foto llega al borde de la ventana y el panel de texto es una superficie
   blanca pegada a ella: sin hueco entre las dos y sin esquinas redondeadas,
   que es lo que hace que se lean como una sola pieza y no como dos cajas.

   FONDO BLANCO Y NO GRIS, a petición expresa: la referencia venía con el panel
   en gris claro y en este sitio el gris es el fondo de PÁGINA. Un panel gris
   sobre página gris no sería un panel. */
/* 🔴 SIN MARGEN CUANDO LA SIGUIENTE TAMBIÉN VA A SANGRE. `sat-normalidad` y
   `sat-sintomas` con foto de fondo son dos bandas seguidas de borde a borde;
   con margen entre ellas se abría una franja del color de la PÁGINA entre dos
   superficies que tienen que tocarse. Se anula solo en ese caso —`+` mira a la
   hermana inmediata—, así que donde `sat-normalidad` cierra una sección normal
   conserva su respiro. */
.sat-cuerpo section.sat-normalidad:has(+ .sat-seccion--con-fondo) {
  margin-bottom: 0;
}
.sat-cuerpo section.sat-seccion--con-fondo:has(+ .sat-normalidad) {
  margin-bottom: 0;
}
.sat-cuerpo section.sat-normalidad {
  grid-column: full;
  padding: 0;
  margin-block: var(--sat-space-6);
  background: var(--sat-color-bg);
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.sat-normalidad-texto {
  padding: var(--sat-space-6) var(--sat-space-5);
  /* El texto no se estira hasta el borde de la banda: se queda en la medida
     de lectura y se alinea con el resto de la página. */
  padding-inline-start: max(var(--sat-gutter), (100vw - var(--sat-max-width-content)) / 2);
}
.sat-normalidad-texto > :first-child { margin-top: 0; }
.sat-normalidad-texto > :last-child { margin-bottom: 0; }
.sat-normalidad-texto .sat-cta-llamada { margin-top: var(--sat-space-4); }
.sat-normalidad-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 62rem) {
  .sat-cuerpo section.sat-normalidad {
    display: grid;
    grid-template-columns: 60% 40%;
    /* Sin `gap`: la costura entre panel y foto es lo que rompería la pieza. */
    gap: 0;
    align-items: stretch;
  }
  .sat-normalidad-texto {
    /* Centrado vertical en su mitad: con el texto arriba y la foto a toda
       altura, el panel se ve descolgado. */
    align-self: center;
  }
  /* La foto cubre su columna entera, alto incluido: a 40 % de ancho una imagen
     de 16/9 quedaría muy por debajo del texto y dejaría media columna vacía. */
  .sat-normalidad-media img {
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }
}

/* ── `sat-trato-oscura`: TEXTO Y FOTO ──────────────────────────────────────
   Rótulo, titular y texto a la izquierda; la figura a la derecha. Ver
   `sattermos_trato_oscura_dos_columnas()`. */
.sat-trato-texto > :first-child { margin-top: 0; }
.sat-trato-texto > :last-child { margin-bottom: 0; }

/* 🔴 LA BANDA OSCURA REPARTE A TODOS SUS HIJOS EN LA MISMA COLUMNA, y eso es
   lo que apilaba la foto sobre el texto. `servicios.css` la declara a sangre
   con `grid-template-columns: subgrid` y luego pone
   `… .sat-trato-oscura > * { grid-column: content }`: da igual cuántas
   columnas declare yo, si cada hijo se coloca en la misma.

   Así que aquí se declaran DOS columnas propias —sin subgrid— y se libera la
   colocación de los hijos. El selector lleva `.sat-cuerpo` para valer (0,3,0)
   y ganarle a la regla del silo, que vale (0,2,0). El sangrado se conserva con
   `grid-column: full` y el relleno lateral se calcula, que es lo que el
   subgrid hacía por nosotros.

   Solo cuando HAY figura: sin ella el bloque sigue a una columna y con su
   tratamiento de siempre. */
@media (min-width: 62rem) {
  .sat-cuerpo section.sat-trato-oscura:has(> .sat-cobertura-figura) {
    grid-column: full;
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    grid-template-rows: auto;
    column-gap: var(--sat-space-6);
    align-items: center;
    padding-inline: max(var(--sat-gutter), (100% - var(--sat-max-width-content)) / 2);
  }
  .sat-cuerpo .sat-trato-oscura > .sat-trato-texto,
  .sat-cuerpo .sat-trato-oscura > .sat-cobertura-figura {
    grid-column: auto;
  }
  /* En el marcado la figura va DESPUÉS del texto —PHP la inserta al cerrar la
     sección—, así que el orden visual se fija con `order`. Mover nodos en el
     HTML para conseguir una disposición lo ataría a una sola pantalla, y en
     móvil el orden bueno es el del documento: primero el texto. */
  .sat-cuerpo .sat-trato-oscura > .sat-cobertura-figura {
    order: -1;
    /* Deja de flotar: aquí es una celda de la rejilla, y un flotado dentro de
       una rejilla no hace nada. Mismo caso que ya se pagó en la FAQ. */
    float: none;
    width: 100%;
    margin: 0;
  }
  /* La foto se recorta a una proporción fija: la original es cuadrada y a
     ancho de media banda estiraba la sección a casi dos mil píxeles de alto,
     que es lo que se veía. */
  .sat-cuerpo .sat-trato-oscura > .sat-cobertura-figura img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* ── `sat-trato-foto`: UNA COLUMNA CENTRADA ────────────────────────────────
   01-sep-2026, petición del propietario. El bloque tenía dos columnas —texto y
   una foto cableada— y la foto se retiró. Sin ella, mantener la rejilla
   dejaría el texto en la mitad izquierda con medio bloque vacío al lado.

   El texto se centra en la medida de lectura, no a ancho completo: centrado y
   estirado sería una línea de 120 caracteres, que se lee peor que alineada a
   la izquierda. */
.sat-cuerpo section.sat-trato-foto {
  display: block;
}
.sat-trato-texto {
  max-width: var(--sat-max-width-content);
  margin-inline: auto;
}
.sat-trato-foto .sat-trato-texto > :is(h2, p) {
  text-align: center;
  text-wrap: pretty;
}
.sat-trato-foto .sat-trato-texto > h2 { text-wrap: balance; }
/* La lista a tres columnas: son enlaces cortos —un síntoma cada uno— y en una
   sola columna el bloque se hacía una tira de doce filas. */
.sat-trato-foto .sat-trato-texto > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sat-space-2) var(--sat-space-3);
  text-align: left;
}
@media (max-width: 900px) {
  .sat-trato-foto .sat-trato-texto > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .sat-trato-foto .sat-trato-texto > ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── EL RÓTULO SOBRE EL BLOQUE OSCURO ──────────────────────────────────────
   🔴 HEREDABA EL AZUL DE MARCA SOBRE UN FONDO DE MARCA: texto azul oscuro
   sobre azul oscuro, invisible. Y el filete —azul y naranja— perdía su primer
   tramo por lo mismo, así que la línea de dos colores se leía como una raya
   naranja corta y nada más.

   Se invierte igual que ya hacen `sat-garantia` en la home y en provincias:
   el texto pasa al fondo claro y el tramo azul del filete al CELESTE
   institucional (`--sat-color-brand-light`), que es el tono de la familia del
   primario reservado para realces —el mismo del topónimo y del nombre de
   marca en los titulares—. El naranja se queda: sobre oscuro contrasta solo. */
/* 🔴 EL SELECTOR LLEVA `.sat-cuerpo` PARA GANAR EL PULSO. Sin él vale
   (0,2,0), exactamente lo mismo que
   `:is(.sat-silo-equipos, .sat-silo-informacional) .sat-rotulo` de
   `servicios.css` —el peso de `:is()` es el de su argumento más específico—, y
   a igualdad manda la hoja que carga después, que es la del silo. El rótulo
   seguía saliendo en azul de marca sobre fondo de marca. Con `.sat-cuerpo`
   vale (0,3,0) y el empate se acaba. */
.sat-cuerpo .sat-trato-oscura > .sat-rotulo {
  color: var(--sat-color-bg);
  background: none;
}
.sat-cuerpo .sat-trato-oscura > .sat-rotulo::before {
  background: linear-gradient(
    to right,
    var(--sat-color-brand-light) 0 45%,
    var(--sat-color-cta) 45% 100%
  );
}
/* El titular y el texto del bloque también viven sobre ese fondo: si la hoja
   de silo no los ha aclarado, se aclaran aquí. */
.sat-cuerpo .sat-trato-oscura :is(h2, h3) { color: var(--sat-color-bg); }

/* ── LA CINTA DE MARCAS APARECE, NO SALTA ──────────────────────────────────
   El script duplica los `<li>` para que el recorrido no deje hueco, y ese
   reflujo ocurre después del primer pintado. Sin esto se ve saltar al cargar.

   La transición es sobre `opacity` y no sobre `visibility` o `display` a
   propósito: el espacio ya está reservado desde el primer pintado —la altura
   la fija `--sat-marca-altura`— así que la banda no cambia de tamaño y no
   arrastra al resto de la página. */
.sat-marcas-slider.is-animado {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sat-marcas-slider.is-animado.is-lista {
  opacity: 1;
}
/* Sin JavaScript la cinta no se monta nunca, así que `is-animado` no llega y
   la tira se ve quieta y completa. Esta regla no puede dejarla invisible. */
.sat-marcas-slider:not(.is-animado) {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .sat-marcas-slider.is-animado {
    opacity: 1;
    transition: none;
  }
}

/* ── `sat-trato-banda` CON FOTO: DOS COLUMNAS SOBRE FONDO CLARO ────────────
   Misma composición que la banda oscura de averías —foto a la izquierda,
   texto a la derecha— pero sobre superficie clara, a petición del propietario.
   El motivo de que las columnas se declaren aquí y no se herede el subgrid es
   el mismo: la hoja de silo reparte a TODOS los hijos en la columna de
   contenido, y con eso la foto se apila sobre el texto por muchas columnas
   que declare la sección. `.sat-cuerpo` da (0,3,0) para ganar ese pulso. */
/* 🔴 NO SE VUELVE A SANGRAR. La hoja de silo ya saca esta banda a ancho de
   ventana con `margin-inline: calc(50% - 50vw)`; añadirle `grid-column: full`
   encima la sacaba DOS veces y se desbordaba —medido: 1920 px de ancho con
   `margin: 0 -7.5px` en una ventana de 1905—. Se respeta su sangrado y su
   relleno, y aquí solo se declaran las dos columnas.

   Con el texto ya envuelto por PHP la sección tiene DOS hijos, así que no hay
   filas que estirar: era eso lo que dejaba la banda en mil píxeles de alto. */
@media (min-width: 62rem) {
  .sat-cuerpo section.sat-trato-banda:has(> .sat-cobertura-figura) {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    column-gap: var(--sat-space-6);
    align-items: center;
  }
  .sat-cuerpo .sat-trato-banda > .sat-trato-texto,
  .sat-cuerpo .sat-trato-banda > .sat-cobertura-figura {
    grid-column: auto;
  }
  .sat-cuerpo .sat-trato-banda > .sat-cobertura-figura {
    order: -1;
    float: none;
    width: 100%;
    margin: 0;
  }
  .sat-cuerpo .sat-trato-banda > .sat-cobertura-figura img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

/* ── LA LISTA DE `sat-trato-casos`, EN FILA Y CENTRADA ─────────────────────
   🔴 EL `<ul>` ES UNA SOLA CELDA. `sat-trato-casos` es una rejilla de
   `auto-fit` a 18 rem pensada para que cada caso sea un HIJO DIRECTO de la
   sección; el redactor los entrega dentro de una `<ul>`, así que la lista
   entera ocupa UNA columna de 18 rem y sus `<li>` se apilan pegados a la
   izquierda mientras el resto de la banda queda vacío. Medido: sección de
   1920 px con los tres casos en una tira de 18 rem.

   Se le da a la lista el ancho completo de la sección y se convierte ELLA en
   la rejilla de casos, con el mismo `auto-fit` que la sección usa para sus
   hijos directos. Así el reparto es el mismo venga el marcado como venga.

   `.sat-cuerpo` para valer (0,3,0) y ganarle a
   `:is(.sat-silo-informacional, .sat-silo-servicios) .sat-trato-casos`, que
   vale (0,2,0) y carga después. */
.sat-cuerpo .sat-trato-casos > ul {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--sat-space-3);
  justify-content: center;
  margin: var(--sat-space-4) 0 0;
  padding: 0;
  list-style: none;
}
/* Las tarjetas no heredan la rejilla de 30 rem de la pieza compartida: aquí
   son tres y tienen que caber en fila. Se conserva su caja y su check. */
.sat-cuerpo .sat-trato-casos > ul > li {
  margin: 0;
}

/* Fondo blanco en el bloque de casos (01-sep-2026, petición del propietario).
   La hoja de silo le da el gris alterno, que es el fondo de PÁGINA: sobre él,
   las tarjetas blancas de dentro se recortaban y el bloque se leía como un
   hueco. En blanco, la banda es una superficie y las tarjetas se distinguen
   por su borde. `.sat-cuerpo` para ganarle el pulso de especificidad. */
.sat-cuerpo section.sat-trato-casos {
  background: var(--sat-color-bg);
}

/* ── BLOQUE DE CIERRE CON PANEL DE CIFRA ───────────────────────────────────
   Texto a la izquierda sobre blanco y a la derecha un panel en diagonal con la
   cifra. El corte lo hace `clip-path`, no una imagen: es una forma, y una
   forma dibujada con CSS escala con la pantalla y no pesa nada. */
.sat-cuerpo section.sat-hub-bloque--cifra {
  background: var(--sat-color-bg);
}
/* 🔴 EL COLOR Y LA DIAGONAL VAN EN UN `::before`, NO EN EL PROPIO PANEL. Un
   `clip-path` recorta a TODOS sus descendientes, así que mientras la forma
   estuviera en `.sat-cifra` el distintivo no podía asomar por arriba: se
   cortaba por la misma línea. Con la forma en una capa de fondo, el panel es
   una caja normal y sus hijos pueden salirse. */
.sat-cifra {
  position: relative;
  /* 🔴 `isolation: isolate` O EL FONDO DESAPARECE. La capa de color va en un
     `::before` con `z-index: -1`; sin un contexto de apilamiento propio, ese
     −1 no se queda detrás del panel sino detrás del ANCESTRO que sí lo tiene
     —la sección, que es blanca— y el azul se pinta debajo del blanco: panel
     invisible. Aislando el panel, el −1 se queda dentro de él.

     Es el mismo par que ya usa la portada con su fondo y su velo. */
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: 0.25rem;
  padding: var(--sat-space-6) var(--sat-space-5);
  color: var(--sat-color-bg);
  text-align: center;
}
.sat-cifra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    150deg,
    var(--sat-color-brand) 0%,
    color-mix(in srgb, var(--sat-color-brand-light) 85%, var(--sat-color-brand)) 100%
  );
}
.sat-cifra-rotulo {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--sat-color-bg);
}
.sat-cifra-valor {
  margin: 0;
  font-weight: 800;
  line-height: 1;
  font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
  letter-spacing: -0.02em;
  color: var(--sat-color-bg);
}
.sat-cifra-nota {
  margin: var(--sat-space-2) 0 0;
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--sat-color-bg) 82%, transparent);
}
/* EL DISTINTIVO SE ENGANCHA ARRIBA, montado sobre el borde del panel azul,
   como en la referencia. Puede hacerlo desde que la diagonal vive en el
   `::before`: el panel ya no recorta a sus hijos.

   `z-index` explícito porque el fondo va en una capa a -1 y sin él la píldora
   quedaría en el mismo plano que el texto; con la sombra encima del azul, la
   diferencia se nota. */
.sat-cifra-distintivo {
  position: absolute;
  top: calc(var(--sat-space-4) * -1);
  right: var(--sat-space-6);
  z-index: 2;
  padding: var(--sat-space-2) var(--sat-space-5);
  border-radius: var(--sat-radius);
  background: var(--sat-color-cta);
  color: var(--sat-color-bg);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--sat-color-brand) 32%, transparent);
}

/* DE LADO A LADO. El bloque genérico vive en la columna de contenido; este
   sale a sangre para que el panel llegue al borde de la ventana, como en la
   referencia. El TEXTO no se estira: se le da el mismo relleno calculado que
   usan las demás bandas, así que arranca alineado con el resto de la página.

   Este `sat-hub-bloque` no lo sangra ninguna hoja de silo —a diferencia de
   `sat-trato-banda`— así que aquí `grid-column: full` no duplica nada. */
.sat-cuerpo section.sat-hub-bloque--cifra {
  grid-column: full;
  padding-inline: 0;
  /* 🔴 SIN RELLENO VERTICAL. `sat-hub-bloque` lo trae para separar bloques de
     texto, y aquí dejaba una franja blanca por arriba y por abajo del panel
     azul: la banda parecía una tarjeta con marco en vez de un corte a sangre.
     Sin él, el panel llega a los dos bordes, como en la referencia.

     El texto no se queda pegado: su propio relleno lo pone
     `.sat-hub-bloque--cifra > .sat-trato-texto`, que es donde se puede
     ajustar sin volver a abrir el marco. */
  padding-block: 0;
  /* SIN EL MARGEN VERTICAL QUE HEREDA DE `sat-hub-bloque`. Ese margen separa
     bloques de texto dentro de la columna de lectura; esta banda va a sangre y
     de color, así que el hueco la deja flotando en vez de cerrando la página.
     El aire de dentro lo pone su propio relleno. */
  margin-block: 0;
}
.sat-hub-bloque--cifra > .sat-trato-texto {
  padding-inline-start: max(var(--sat-gutter), (100vw - var(--sat-max-width-content)) / 2);
  padding-block: var(--sat-space-5);
}

@media (min-width: 62rem) {
  .sat-cuerpo section.sat-hub-bloque--cifra {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: 0;
    align-items: stretch;
  }
  /* 5rem por arriba solo en escritorio (02-sep-2026, petición del
     propietario). Va aquí y no en la regla base porque en móvil las dos
     mitades se apilan y ese hueco sería aire perdido antes del titular. */
  .sat-hub-bloque--cifra > .sat-trato-texto {
    padding-top: 5rem;
  }
  .sat-cuerpo .sat-hub-bloque--cifra > :is(.sat-trato-texto, .sat-cifra) {
    grid-column: auto;
  }
  /* La diagonal solo en escritorio: en móvil el panel va a ancho completo y un
     corte oblicuo se comería una esquina del texto. El vértice se lleva a la
     izquierda porque ahora el panel llega al borde de la ventana. */
  .sat-cifra {
    padding-inline: var(--sat-space-6);
  }
  /* La diagonal, en la capa de fondo. Se deja sitio arriba para que el
     distintivo se monte sobre el azul y no sobre el blanco de al lado. */
  .sat-cifra::before {
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ── `sat-garantia`, BANDA OSCURA EN CUALQUIER SILO ────────────────────────
   🔴 SEXTA VEZ CON EL MISMO PATRÓN. El fondo de marca y el texto invertido de
   este bloque estaban escritos en `provincias.css`, `marcas.css` y `home.css`,
   los tres acotados por la clase de silo del `<body>`. En las hijas de precios
   —silo `informacional`— no casaba ninguno: la banda salía sobre papel blanco
   con el texto en gris, sin ningún contraste que la marcara como lo que es,
   el único bloque de la página que declara un compromiso.

   El mínimo va aquí. Las hojas de silo siguen mandando sobre lo suyo. */
.sat-cuerpo section.sat-garantia {
  background: linear-gradient(
    150deg,
    var(--sat-color-brand-dark) 0%,
    color-mix(in srgb, var(--sat-color-brand) 70%, var(--sat-color-brand-dark)) 100%
  );
  color: color-mix(in srgb, var(--sat-color-bg) 86%, transparent);
  border-radius: var(--sat-radius);
  padding: var(--sat-space-5) var(--sat-space-4);
}
.sat-cuerpo section.sat-garantia :is(h2, h3, strong) {
  color: var(--sat-color-bg);
}
.sat-cuerpo section.sat-garantia p {
  color: color-mix(in srgb, var(--sat-color-bg) 86%, transparent);
}
.sat-cuerpo .sat-garantia > .sat-rotulo {
  color: var(--sat-color-bg);
  background: none;
}
.sat-cuerpo .sat-garantia > .sat-rotulo::before {
  background: linear-gradient(
    to right,
    var(--sat-color-brand-light) 0 45%,
    var(--sat-color-cta) 45% 100%
  );
}

/* ── EL RÓTULO SOBRE EL `h2`, EN CUALQUIER PÁGINA ──────────────────────────
   🔴 OCTAVA VEZ, Y LA ÚLTIMA: ESTA REGLA NO SE ACOTA POR SILO.

   Estaba escrita CUATRO veces —`home.css`, `silo.css` y dos veces en
   `servicios.css`—, byte a byte idéntica, cada copia acotada a su juego de
   silos. Entre las cuatro cubrían home, provincias, ciudades, marcas,
   servicios, sectores, equipos e informacional. No cubrían `sat-silo-core`,
   así que en /contacto/ y /nosotros/ el rótulo salía como texto pelado, sin
   versalitas ni el filete de dos colores. El propietario lo vio antes que yo.

   El rótulo es un componente compartido: lo emite `sattermos_rotulos_y_resaltes()`
   para cualquier plantilla. Su aspecto base va aquí, sin prefijo de silo, y
   las inversiones sobre banda oscura siguen donde estaban —ganan por
   especificidad y por orden de carga, que es como debe ser—.

   Las cuatro copias se borraron en el mismo cambio: dejar una regla duplicada
   viva es garantizar que la quinta edición solo toque tres. (02-sep-2026) */
.sat-rotulo {
  display: flex;
  align-items: center;
  gap: var(--sat-space-3);
  width: fit-content;
  margin-bottom: var(--sat-space-2);
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--sat-color-brand);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Más naranja que en el hero: aquí el tramo de acción ocupa la mitad del
   filete, no un tercio. Es el gesto que el propietario pidió reforzar. */
.sat-rotulo::before {
  content: "";
  flex: 0 0 auto;
  width: 3.5rem;
  height: 0.1875rem;
  border-radius: var(--sat-radius);
  background: linear-gradient(
    to right,
    var(--sat-color-brand-dark) 0 45%,
    var(--sat-color-cta) 45% 100%
  );
}

/* ── `sat-banda-media`: LA BANDA CON FOTO, REUTILIZABLE ────────────────────
   Foto a la izquierda, texto a la derecha, sobre superficie clara. Nació en
   `sat-alcance-servicio` de las hijas de precios y el propietario pidió
   guardarla porque «la utilizaremos muchas veces»: por eso el CSS cuelga del
   modificador y no del nombre de una sección. Para llevarla a otra basta con
   `sattermos_banda_media( $html, 'su-clase' )` en PHP. Hoy la usan
   `sat-alcance-servicio` y `sat-metodo`. (02-sep-2026)

   DOS HIJAS Y `flex-wrap` ─────────────────────────────────────────────────
   🔴 NO SE HACE REJILLA SOBRE LA SECCIÓN. Esta versión estaba puesta como
   `display: grid` en el propio `<section>`, y con eso el rótulo, el `<h2>`,
   cada `<p>` y la lista pasan a ser CELDAS: el titular acababa en la misma
   fila que la foto, separado de su párrafo por la altura de la imagen, y el
   rótulo colgando en otra celda. El propietario lo señaló con la captura, y
   tiene razón.

   La forma correcta es la que ya usan `sat-trato-oscura` y `sat-trato-banda`:
   PHP envuelve el texto y la sección queda con DOS hijas. Con dos hijas, un
   `flex` con `wrap` y un ancho base por cada una resuelve el escritorio y el
   móvil sin una sola consulta de medios: cuando no caben los dos anchos, la
   línea se parte sola y cada columna pasa a ocupar el 100 %.

   `min-width: 0` en las dos porque un elemento flexible no encoge por debajo
   de su contenido más largo: sin él, una palabra larga o un enlace sin
   espacios ensancharía su columna y rompería el reparto. */
.sat-cuerpo section.sat-banda-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sat-space-5) var(--sat-space-6);
  background: var(--sat-color-bg);
}
.sat-cuerpo .sat-banda-media > .sat-trato-texto {
  flex: 1 1 30rem;
  min-width: 0;
}
.sat-cuerpo .sat-banda-media > .sat-cobertura-figura {
  /* 40 % de base, y `order` porque en el marcado la figura va después: en
     móvil, al partirse la línea, manda el orden visual y la foto queda
     arriba, que es donde se quiere. */
  flex: 1 1 20rem;
  max-width: 40%;
  min-width: 0;
  order: -1;
  float: none;
  width: auto;
  margin: 0;
}
@media (max-width: 61.99rem) {
  /* En una sola columna el tope del 40 % dejaría la foto en un sello: se
     libera para que ocupe el ancho de la línea. */
  .sat-cuerpo .sat-banda-media > .sat-cobertura-figura {
    max-width: 100%;
  }
}
.sat-cuerpo .sat-banda-media > .sat-cobertura-figura img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── EL RELLENO INTERIOR DE `sat-cierre`, EN CUALQUIER SILO ────────────────
   🔴 SÉPTIMA VEZ. La regla que ajusta el relleno de las secciones agrupadas
   dentro de `sat-cierre` vive en `servicios.css` acotada a `.sat-silo-servicios`.
   En las hijas de precios —silo `informacional`— no casaba, así que
   `sat-precios` conservaba el `padding-block` grande de la regla base y salía
   con el doble de aire que `sat-relacionados`, su pareja a la izquierda. Dos
   gemelas con distinto respiro no parecen gemelas.

   Mismo tratamiento que ya recibió `sat-contexto-operativo`. */
.sat-cuerpo .sat-cierre > section[class^="sat-"] {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: var(--sat-space-5) var(--sat-space-4);
  border: 0;
  border-radius: var(--sat-radius);
  background: var(--sat-color-bg);
  box-shadow: var(--sat-shadow-card);
}

/* ── FONDO A SANGRE EN LA BANDA CON FOTO Y EN `sat-garantia` ───────────────
   Las dos son bandas: su color tiene que llegar al borde de la ventana, no
   quedarse en la columna de lectura como una tarjeta ancha.

   Ninguna de las dos la sangra ya otra hoja —comprobado antes de escribir
   esto—, así que `grid-column: full` no duplica nada. El interior se centra
   con el mismo cálculo que usan el hero y la banda de marcas, así que el texto
   sigue alineado con el resto de la página. */
/* `sat-alcance-servicio` sigue nombrada aparte de `sat-banda-media` porque no
   siempre le toca foto: sin figura no lleva el modificador, y aun así es una
   banda y tiene que sangrar igual. */
.sat-cuerpo section:is(.sat-banda-media, .sat-alcance-servicio, .sat-garantia) {
  grid-column: full;
  border-radius: 0;
  padding-inline: max(var(--sat-gutter), (100% - var(--sat-max-width-content)) / 2);
}