/**
 * 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 {
  background: var(--sat-color-bg);
  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.

   `sataire_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. */
@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. */
.sat-portada-lugar,
.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. */
  .sat-portada {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    gap: var(--sat-space-4);
  }
  /* Sin foto no se reserva la columna: el hero pasa a una sola, y el texto se
     queda a la MISMA anchura que tendría con foto para que el titular no se
     estire hasta el borde. Hoy es el caso de las 311 páginas de ciudad, que
     no tienen imagen destacada — ver template-parts/portada.php. */
  .sat-portada--sin-media {
    grid-template-columns: minmax(0, 60%);
  }
  /* 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: `sataire_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
   `sataire_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
   `sataire_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(6.75rem, 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(11rem, 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(15rem, 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 `sataire_cta_slot('cierre')`
   — ver sataire_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 sataire_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);
  margin-top: var(--sat-space-6);
}

.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(10rem, 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
   sataire_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 sataire_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(9rem, 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(14rem, 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(10rem, 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 `sataire_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 `sataire-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;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 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(18rem, 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-sataire/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-temporada`).

   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 (`sataire_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 (`sataire_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 `sataire_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
   `sataire_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-alcance,
.sat-temporada {
  background: var(--sat-color-bg-alt);
  border-radius: var(--sat-radius);
}
.sat-cuerpo section[class^="sat-"]:is(.sat-alcance, .sat-temporada) {
  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: `sataire_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
   `sataire_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. `sataire_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 `sataire_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
   `sataire_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 sataire_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;
  opacity: 0.7;
  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
   `sataire_icono_equipo()` a traves de `sataire_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 `sataire_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);
  background: var(--sat-color-cta);
  color: var(--sat-color-bg);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sat-shadow-card);
  transition: background-color 0.2s ease, transform 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);
}
.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(14rem, 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(14rem, 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);
}


/* ═══════════════════════════════════════════════════════════════════════
   EL ICONO DEL BOTÓN DE WHATSAPP DEL PLUGIN «WA Contact» (20-ago-2026)

   DIAGNÓSTICO, medido antes de escribir esto. El plugin emite
   `<i class="wa-fa fa-brands fa-whatsapp">` y su CSS en línea
   (`wa-contact-btn-inline-css`) solo le fija a `.wa-fa` un tamaño de letra de
   20 px y el interlineado: le da TAMAÑO, no dibujo. El glifo tenía que venir de Font Awesome, y en la página
   servida no hay ni una hoja de Font Awesome ni una `@font-face` — el único
   rastro es la clase. Además `sataire_remove_font_awesome()` (functions.php)
   desencola cualquier hoja de esa librería en `wp_print_styles`. Resultado:
   una etiqueta vacía donde debería estar el icono.

   POR QUÉ SE DIBUJA AQUÍ Y NO SE DEJA PASAR LA LIBRERÍA. Cargar Font Awesome
   entera por un glifo son decenas de KB en las 546 páginas, y contradice lo
   que este tema sostiene en todas: cero librerías de iconos, SVG en línea o
   máscara. Es la misma técnica del galón de las filas-botón y del visto de
   las listas de comprobación.

   Se dibuja el auricular dentro del bocadillo con el trazo del tema, no se
   copia el glifo de marca: reproducir el logotipo de un tercero desde una
   librería con licencia propia es un problema distinto y evitable.

   `currentColor` para que herede el color del botón sea cual sea el estilo
   que el propietario elija en el plugin. Si algún día el plugin trae su
   propio icono, esta regla deja de encontrar una etiqueta vacía y se puede
   retirar. */

.wa-fa.fa-whatsapp {
  display: inline-block;
  flex: 0 0 auto;
  /* 1.4rem y no 1.25: con la silueta rellena el icono ya no engorda al
     crecer, asi que puede ocupar lo que le corresponde junto al texto. */
  width: 1.4rem;
  height: 1.4rem;
  background-color: currentColor;
  -webkit-mask: var(--sat-icono-whatsapp) center / contain no-repeat;
  mask: var(--sat-icono-whatsapp) center / contain no-repeat;
}




/* ═══════════════════════════════════════════════════════════════════════
   EL BOTON DE LLAMADA CUANDO LO PINTA EL PLUGIN (20-ago-2026)

   En modo «numero fijo» el plugin «city contact» vacia el boton y monta lo
   suyo: `.ccm-call-before`, `.ccm-phone-number` (o `.ccm-phone-image`) y
   `.ccm-call-after`. Con eso desaparecen dos cosas que SI pone el tema: el
   auricular en linea y la barra separadora, que cuelga de `.sat-cta-numero`,
   una clase que el plugin no escribe.

   Estas reglas devuelven las dos SIN que haya que teclear nada en los ajustes
   del plugin: la barra no se escribe en «texto antes», se dibuja; y el icono
   tampoco se elige, aparece.

   EL ICONO VA EN `::before` Y NO COMO HIJO, y esa es la clave: un
   pseudoelemento NO es un nodo hijo, asi que `innerHTML = ''` no puede
   quitarlo. Sobrevive al vaciado del plugin por construccion, no por suerte.

   `:has()` para que solo aparezca cuando el plugin ha tomado el boton: si lo
   pintara siempre, en el marcado propio del tema —que ya trae su SVG en
   linea— saldrian dos auriculares seguidos. */

/* SOLO CUANDO EL NUMERO ES TEXTO (corregido el 20-ago-2026 al verlo). Con las
   imagenes activadas en el plugin, el propio dibujo que genera el servidor YA
   LLEVA un auricular —lo controla su ajuste `ccm_show_icon`—, asi que anadir
   este pseudoelemento ponia dos telefonos seguidos en el boton. Se limita al
   caso de texto, que es el unico que llega sin icono. */
.sat-cta-boton:has(.ccm-phone-number)::before {
  content: "";
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--sat-icono-telefono) center / contain no-repeat;
  mask: var(--sat-icono-telefono) center / contain no-repeat;
}

/* LA BARRA, solo si hay algo a su izquierda. Se ancla al hermano adyacente y
   no al elemento suelto: sin «texto antes» configurado, una barra abriendo el
   boton no separa nada, decora. */
.sat-cta-boton .ccm-call-before + .ccm-phone-number,
.sat-cta-boton .ccm-call-before + .ccm-phone-image {
  padding-inline-start: var(--sat-space-2);
  border-inline-start: 1px solid color-mix(in srgb, var(--sat-color-bg) 45%, transparent);
}

/* El texto que el plugin pone despues no lleva barra: cierra la frase, no
   abre un dato nuevo. */
.sat-cta-boton .ccm-call-after {
  padding-inline-start: var(--sat-space-2);
}