/**
 * marcas.css — HOJA DE SLUG DEL SILO DE MARCAS.
 *
 * QUÉ ES. Lo propio de las 16 páginas de fabricante: los cuatro roles que solo
 * ellas emiten con este marcado —`sat-averias-marca`, `sat-equipos`,
 * `sat-visita` y `sat-garantia`— más la lista de comprobación que comparten
 * `sat-averias-marca` y `sat-cobertura`, y —desde el 19-ago-2026— las dos
 * composiciones a DOS COLUMNAS que pidió el propietario: `sat-entradilla` con
 * cuatro tarjetas de dudas a la derecha (sección 1.bis) y `sat-averias-marca`
 * con una foto vertical a la derecha (sección 2). Todo lo demás lo pone la capa
 * compartida: la encolan las plantillas de `sataire_silo_layer_templates()` y
 * desde el 19-ago-2026 `template-marcas.php` está en esa lista, así que
 * `sat-casos`, `sat-faq`, `sat-alcance`, el rótulo de sección y el revelado
 * llegan de assets/css/silo.css sin escribir aquí una sola regla.
 *
 * Y DESDE EL 19-ago-2026, EL HUB /marcas/ (sección 6). La misma plantilla sirve
 * a DIECISIETE páginas —el hub y sus 16 hijas—, así que esta hoja también.
 * Ninguna regla de la sección 6 puede tocar a las hijas: todas anclan en clases
 * que solo existen cuando `sataire_marcas_hub_componer()` reconoce el cuerpo
 * del hub. El porqué completo está en la cabecera de esa sección.
 *
 * EL MARCADO DE ESAS DOS COMPOSICIONES NO ESTÁ EN EL CORPUS: lo inyectan
 * `sataire_marcas_dudas_entradilla()` y `sataire_marcas_dos_columnas_averias()`
 * en template-marcas.php, y el copy de las tarjetas vive en
 * `marca_dudas.tarjetas` de data/business-facts.json. Esta hoja solo compone; no
 * conoce ni un texto ni una URL de `uploads`.
 *
 * ORDEN DE CARGA, que es la mitad del diseño: tokens.css → global.css →
 * silo.css → ESTA HOJA. Va la última a propósito, para poder afinar lo
 * compartido sin subir la especificidad. Lo declara `sataire_enqueue_assets()`
 * en functions.php, que añade `sataire-silo` como dependencia de la hoja de
 * slug cuando esa capa se ha encolado.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * POR QUÉ ESTO NO ESTÁ EN LA CAPA COMPARTIDA, Y NO ES POR PEREZA.
 *
 * `sat-visita` y `sat-garantia` los emiten TAMBIÉN las 52 provincias, y
 * provincias.css ya los tiene resueltos. La tentación evidente es promover
 * esas reglas a silo.css y borrar la copia. NO SE HACE, y el motivo es de
 * cascada, no de gusto:
 *
 *   Al mover el revelado de provincias.css a silo.css (19-ago-2026) se
 *   descubrió que un bloque `prefers-reduced-motion` deja de cubrir lo que se
 *   queda en la hoja POSTERIOR. La consulta neutraliza `transform` con la
 *   MISMA especificidad que los `:hover` que anula, así que entre dos reglas
 *   de igual peso decide el ORDEN DE CARGA — y silo.css se carga antes que la
 *   hoja de slug. Provincias.css tuvo que recuperar su propia consulta para
 *   `sat-sintomas` y `sat-visita` justo por eso; está documentado allí.
 *
 * Promover `sat-garantia` reproduciría exactamente ese desajuste en las 52
 * provincias publicadas: sus `:hover` de `.sat-garantia > ul > li` se quedarían
 * en provincias.css, la consulta subiría a silo.css, y quien pide menos
 * movimiento volvería a recibirlo. Una hoja duplicada es un coste conocido y
 * acotado; una regresión de accesibilidad en 52 páginas, no.
 *
 * LA COPIA ES PARCIAL A PROPÓSITO. No trae las reglas `> ul` de la banda de
 * garantía porque NINGUNA de las 16 marcas emite esa lista: su `sat-garantia`
 * es encabezado más uno o dos párrafos con la cifra en `<strong>`. Copiar
 * reglas que no pueden casar nada es lo que convierte una hoja en un cajón.
 *
 * `sat-equipos` NO se comparte por un motivo distinto y más simple: provincia
 * y marca lo emiten con marcado incompatible. En provincia son pares de
 * encabezado y párrafo que global.js convierte en pestañas; en marca es
 * encabezado, dos párrafos y una lista de familias. Un mismo selector no puede
 * servir a los dos.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * LAS SECCIONES 1 A 5 NO DECLARAN NI UNA ANIMACIÓN NI UN DESPLAZAMIENTO AL
 * PASAR EL PUNTERO: el revelado de silo.css es lo único que se mueve en una
 * página de fabricante, y su consulta lo cubre.
 *
 * LA SECCIÓN 6 SÍ, y por eso trae SU PROPIA consulta `prefers-reduced-motion`
 * al final (19-ago-2026). Las tarjetas del directorio del hub transicionan
 * borde, sombra y color de logotipo. La consulta de silo.css NO habría bastado
 * —leer arriba el porqué: neutraliza con la misma especificidad que los
 * `:hover` que anula, así que entre reglas de igual peso decide el orden de
 * carga y esta hoja se carga después—. QUIEN AÑADA MÁS MOVIMIENTO tiene que
 * meterlo en esa consulta o escribir la suya.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * REGLA VERIFICABLE (Paso 6), INTOCABLE: cero valor hexadecimal, cero
 * declaración de familia tipográfica y cero declaración de tamaño tipográfico
 * en este archivo, comentarios incluidos — todo pasa por tokens.css. Las
 * mezclas translúcidas se hacen con `color-mix()` sobre un token, nunca con un
 * literal `rgba()` con números de color propios.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. BANDAS SANGRADAS A ANCHO DE VENTANA

   Las dos bandas de la página de marca. Es la misma fórmula que usan
   provincias.css y silo.css, y tiene que seguir siendo la misma: el relleno
   lateral reproduce la columna `content` de la rejilla de `.sat-cuerpo`
   —`min(100% - var(--sat-gutter) * 2, var(--sat-max-width-content))` centrada
   entre dos calles `minmax(var(--sat-gutter), 1fr)`— leída desde dentro de una
   banda que sangra a ancho de ventana. Si un día cambia la rejilla, cambian
   las tres a la vez o las bandas dejan de alinearse con el resto de secciones.

   SANGRADO Y FONDO VIAJAN JUNTOS, siempre. Sangrar una sección sin fondo no
   dibuja nada: solo estira de borde a borde el filete divisorio de
   `.sat-cuerpo section[class^="sat-"]`. Por eso el sangrado de estas dos está
   en la misma hoja que sus fondos, aquí abajo, y no en la capa compartida.

   EL RELLENO VERTICAL ES PROPIO de una banda: entre dos secciones sobre
   blanco los rellenos se suman y ninguna tiene borde visible, mientras que
   aquí el canto del color es un límite duro. `--sat-space-seccion-banda` lo
   deriva tokens.css del ritmo normal, así que los dos valores no pueden
   separarse.

   ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que
   ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1).

   Funciona porque `body[class*="sat-silo-"] #page.grid-container` lleva
   `overflow-x: clip` en global.css: sin eso, 100vw abriría scroll lateral.
   ═══════════════════════════════════════════════════════════════════════ */

.sat-silo-marcas .sat-cuerpo section.sat-visita,
.sat-silo-marcas .sat-cuerpo section.sat-garantia {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(
    var(--sat-gutter),
    calc(50vw - var(--sat-max-width-content) / 2)
  );
  padding-block: var(--sat-space-seccion-banda);
  border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   1.bis sat-entradilla — DOS COLUMNAS CON CUATRO TARJETAS DE DUDAS

   Pedido por el propietario el 19-ago-2026: «hay algunas páginas de marcas que
   tienen sat-entradilla, otras no. Las que tengan, le pondremos otra columna al
   lado con 4 tarjetas, cada una con icono y copy resolviendo las dudas y los
   puntos de dolor del cliente».

   SOLO DONDE LA SECCIÓN SOBREVIVE, y eso no lo decide esta hoja. El bucle de
   template-marcas.php sube el PRIMER `<p>` de la entradilla al hero; si no
   queda nada más dentro, retira la sección entera. Medido el 19-ago-2026 sobre
   cinco marcas: sobrevive en daikin, baxi y samsung, y desaparece en lg y
   toshiba. Donde desaparece, estos selectores no casan nada — no-op, no error.

   LA CLASE QUE ANCLA ES EL MODIFICADOR, NO EL ROL. Baxi escribe la sección como
   `sat-entrada` y las otras quince como `sat-entradilla`; el modificador
   `sat-entradilla--con-dudas` lo pone la plantilla en las dos por igual, así que
   aquí no hay que repetir la alternancia de nombres del corpus. Es también la
   garantía de que una entradilla sin panel —porque no hubiera tarjetas en
   business-facts.json— no reciba una rejilla de dos columnas con una sola
   columna dentro.

   ESTA SECCIÓN NO DECLARA NINGÚN MOVIMIENTO, así que sigue valiendo lo que dice
   la cabecera de esta hoja: no hace falta consulta `prefers-reduced-motion`
   propia. Es además la razón de que las tarjetas de abajo NO reutilicen
   `.sat-tarjeta` — ver el porqué completo donde se declaran.
   ═══════════════════════════════════════════════════════════════════════ */

.sat-silo-marcas .sat-entradilla--con-dudas {
  display: grid;
  gap: var(--sat-space-5);
  align-items: start;
}
@media (min-width: 62rem) {
  .sat-silo-marcas .sat-entradilla--con-dudas {
    /* Mitad y mitad: a la izquierda una frase-respuesta corta —la entradilla
       del contrato es autocontenida— y a la derecha cuatro tarjetas que van a
       dos por fila. Dar más peso al texto dejaría las tarjetas demasiado
       estrechas para su línea de apoyo. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sat-space-6);
  }
}

/* El envoltorio del texto lo pone `sataire_marcas_dudas_entradilla()`. Sin él,
   cada `<p>` de la entradilla sería una celda suelta de la rejilla y los
   párrafos quedarían separados por el `gap` en vez de por su interlineado —la
   misma lección ya pagada en `sat-servicios` (ver global.css). */
.sat-silo-marcas .sat-entradilla-texto > *:first-child {
  margin-top: 0;
}
.sat-silo-marcas .sat-entradilla-texto > p {
  max-width: var(--sat-measure);
}

/* LAS CUATRO TARJETAS DE DUDAS SE MUDARON A global.css (19-ago-2026).
   Dejaron de ser cosa de marcas: el propietario las quiso bajo el hero en
   TODO el sitio, y una regla que sirve a nueve plantillas no puede vivir en
   la hoja de un silo. Aquí solo queda esta nota para quien las busque. */

/* ═══════════════════════════════════════════════════════════════════════
   2. sat-averias-marca — LA RAZÓN DE EXISTIR DE LA PÁGINA

   Es el bloque núcleo del silo (`prompts/marca.md` §4, bloque 1): de tres a
   cinco averías o particularidades técnicas de ESTA marca con la comprobación
   que se hace en cada una. Llega como prosa —encabezado y párrafos— y, en 8 de
   las 16 páginas, con una lista final.

   RECIBE EL RÓTULO «Diagnóstico», el mismo que `sat-sintomas` en provincia,
   porque hace el mismo papel con otro nombre de rol. Lo inyecta silo.js; ver
   allí por qué no dice «Averías».
   ═══════════════════════════════════════════════════════════════════════ */

/* MEDIDA DE LECTURA. Este bloque es el más largo de la página y el único de
   prosa continua: sin límite de ancho, en escritorio sus líneas cruzan los
   1360 px del contenedor y el ojo pierde el renglón al volver. `--sat-measure`
   es el token que el tema ya reserva para eso.

   EL SELECTOR ENUMERA LA SECCIÓN Y SU ENVOLTORIO (19-ago-2026). Desde que
   `sataire_marcas_dos_columnas_averias()` envuelve el contenido en
   `.sat-averias-texto`, los párrafos DEJARON DE SER hijos directos de la
   sección y `.sat-averias-marca > p` no casaba ninguno. Se aceptan los dos
   caminos en vez de sustituir uno por otro para que la regla siga valiendo si
   la envoltura no llegara a aplicarse —una página servida desde caché de
   objeto, un fallo del patrón— en lugar de perder la medida en silencio.
   `:is()` pesa lo que su argumento más específico, así que el selector sigue
   valiendo (0,2,0) y no escala la especificidad. */
.sat-silo-marcas :is(.sat-averias-marca, .sat-averias-texto) > p {
  max-width: var(--sat-measure);
}

/* ── LAS DOS COLUMNAS: CONTENIDO A LA IZQUIERDA, FOTO A LA DERECHA ────────
   Pedido por el propietario el 19-ago-2026: «el banner tiene 2 columnas: en la
   de la izquierda el contenido, en la de la derecha la imagen». El marcado lo
   pone `sataire_marcas_dos_columnas_averias()` en template-marcas.php; aquí
   solo se compone.

   LA SECCIÓN TIENE EXACTAMENTE DOS HIJOS —el texto envuelto y la foto—, que es
   la condición sin la que esta rejilla no funciona. Es la misma lección ya
   pagada en `sat-servicios`: con el `<h2>` y cada `<p>` sueltos como hijos
   directos, cada uno cae en su propia celda y los párrafos acaban separados
   por el `gap` en lugar de por su interlineado.

   `align-items: start`, no `stretch`: la foto tiene proporción propia y no
   debe estirarse hasta la altura del texto. Se recorta por arriba y por abajo
   con `object-fit` cuando hace falta, que es lo correcto para una imagen
   decorativa, pero nunca se deforma. */
.sat-silo-marcas .sat-averias-marca--con-foto {
  display: grid;
  gap: var(--sat-space-5);
  align-items: start;
}

/* EL MISMO PUNTO DE RUPTURA QUE EL RESTO DE LA HOJA (62rem). No es una cifra
   suelta: es donde `.sat-equipos-familias` pasa a dos columnas y donde
   `.sat-servicios--con-panel` hace lo propio en global.css. Un segundo punto de
   ruptura distinto para el mismo gesto haría que la página se recompusiera dos
   veces al estrecharla, y eso se nota. */
@media (min-width: 62rem) {
  .sat-silo-marcas .sat-averias-marca--con-foto {
    /* La foto es VERTICAL (572×1024). Una columna de 22rem la deja en unos
       630 px de alto, que es la altura a la que este bloque suele quedar: el
       texto manda y la imagen acompaña. Con `minmax(0, …)` en las dos, una
       palabra larga del contenido no puede empujar la rejilla. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    column-gap: var(--sat-space-6);
  }
}

/* ── La foto ──────────────────────────────────────────────────────────────
   OCULTA POR DEBAJO DEL PUNTO DE RUPTURA, Y ESTO ES UNA DECISIÓN, no un
   olvido. A una columna, una imagen de 1024 px de alto apilada bajo el texto
   es una pantalla entera de foto que el lector tiene que atravesar con el dedo
   para llegar al bloque siguiente — y esta foto es decorativa, así que ese
   peaje no compra ninguna información. En móvil se retira.

   `display: none` Y `loading="lazy"` VAN JUNTOS, y hay que saber por qué: el
   atributo lo pone la plantilla y es lo que evita la descarga. Un elemento en
   `display: none` no genera caja, así que nunca entra en el viewport y los
   navegadores actuales no llegan a pedir la imagen perezosa. Eso es una
   optimización del motor y no una garantía del estándar: si algún día un
   navegador decidiera descargarla igualmente, el coste sería una petición
   inútil en móvil, nunca una pantalla de foto. Se acepta ese riesgo antes que
   duplicar la etiqueta en un `<picture>` con `media`, que tampoco garantiza
   nada porque el `<img>` de respaldo se descarga siempre. */
.sat-silo-marcas .sat-averias-foto {
  display: none;
}
@media (min-width: 62rem) {
  .sat-silo-marcas .sat-averias-foto {
    display: block;
    width: 100%;
    /* Techo de altura: si el bloque de texto es corto, la foto a proporción
       natural sobresaldría por debajo de la sección. `object-fit: cover`
       recorta por el centro en lugar de deformar. */
    max-height: 38rem;
    object-fit: cover;
    object-position: center;
    border-radius: var(--sat-radius);
  }
}

/* ── La lista final, elevada a PANEL DE COMPROBACIÓN ──────────────────────
   Esa `<ul>` enumera lo que SÍ se comprueba en una intervención, así que el
   visto es el marcador que le corresponde y el verde es `--sat-color-success`,
   el token que el tema reserva para confirmación. El visto viene de
   `.sat-servicios-texto ul li::before` (provincias.css), que no se toca.

   ═══ SIN RECUADRO Y A UNA SOLA COLUMNA (19-ago-2026, petición del
   propietario: «al ul que está dentro quítale los bordes, ponlos en una sola
   columna») ═══

   Hasta hoy esta lista se pintaba sobre la superficie de tarjeta de
   `.sat-tarjeta` —fondo, borde, sombra y relleno— y a dos columnas por encima
   de 62rem. Las dos cosas se retiran, y las dos por el mismo motivo de
   composición: la sección pasa a ser un banner de dos columnas con una foto a
   la derecha, y la columna de texto ya no tiene el ancho entero. Una tarjeta
   dentro de una columna que a su vez está dentro de una banda es un marco
   dentro de otro marco; y dos columnas de puntos de comprobación dentro de una
   columna estrecha parten cada frase en cuatro renglones, que es justo lo que
   la regla anterior evitaba en móvil.

   EL VISTO VERDE SE QUEDA, y no es un resto: es lo único que distingue esta
   lista de la prosa que tiene encima. Sin recuadro y sin visto, la enumeración
   de comprobaciones se leería como un párrafo más.

   EL MISMO SELECTOR CUBRE `sat-cobertura > ul`, y no es economía de líneas:
   son la misma cosa semántica. Las dos listas dicen «esto entra», una sobre lo
   técnico y otra sobre el territorio, y darles dos tratamientos distintos en
   la misma página inventaría una diferencia que el lector no puede
   interpretar. `sat-cobertura` falta en 6 de las 16 páginas; el selector
   simplemente no casa nada ahí, que es un no-op y no un error. Esa sección NO
   se envuelve —solo `sat-averias-marca` pasa a dos columnas—, así que el
   camino `.sat-cobertura > ul` sigue siendo el suyo tal cual.

   EL VISTO ES UNA MÁSCARA, no un carácter metido con `content`. Dos razones,
   las mismas que en provincias.css: un glifo lo anuncia el lector de pantalla
   en cada punto de la lista, y su forma depende de la fuente instalada. Con
   máscara el SVG solo aporta la silueta y el color sale del token — que es
   además la única manera de teñirlo sin escribir un valor de color dentro del
   dibujo, que la regla verificable prohíbe. */

.sat-silo-marcas :is(.sat-averias-marca, .sat-averias-texto) > ul,
.sat-silo-marcas .sat-cobertura > ul {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sat-space-3);
  margin: var(--sat-space-4) 0 0;
  padding: 0;
}
.sat-silo-marcas :is(.sat-averias-marca, .sat-averias-texto) > ul > li,
.sat-silo-marcas .sat-cobertura > ul > li {
  display: flex;
  align-items: baseline;
  gap: var(--sat-space-3);
  margin: 0;
  color: var(--sat-color-text-secondary);
}
.sat-silo-marcas :is(.sat-averias-marca, .sat-averias-texto) > ul > li::before,
.sat-silo-marcas .sat-cobertura > ul > li::before {
  content: "";
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  /* El visto se alinea con la primera línea base del texto, no con la caja:
     `align-items: baseline` coloca la caja del pseudo-elemento y este empujón
     corrige la diferencia entre el trazo del dibujo y el ojo de la letra. */
  transform: translateY(0.15em);
  background-color: var(--sat-color-success);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.sat-silo-marcas :is(.sat-averias-marca, .sat-averias-texto) > ul > li strong,
.sat-silo-marcas .sat-cobertura > ul > li strong {
  color: var(--sat-color-brand-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   3. sat-equipos — REJILLA DE FAMILIAS

   EL PROBLEMA QUE RESUELVE. El bloque llega como encabezado, dos párrafos y
   una `<ul>` de 4 a 7 elementos, y cada elemento es una FRASE COMPLETA
   («Equipos multi-split para vivienda con varias estancias»). La regla
   `.sat-equipos ul` de global.css convierte esa lista en etiquetas en línea
   con `flex-wrap`: un tratamiento correcto para etiquetas de una o dos
   palabras y roto para frases, porque produce filas de anchos irregulares que
   no se leen ni en vertical ni en horizontal.

   LA CLASE `.sat-equipos-familias` LA PONE LA PLANTILLA, no el corpus — ver
   `sataire_marcas_iconizar_equipos()` en template-marcas.php. Existe para no
   pelearse por especificidad: `.sat-equipos ul li` de global.css vale (0,1,2)
   y estos selectores valen (0,2,1), dos clases contra una. Se gana por la
   cuenta correcta y no acumulando descendientes hasta que pese más.

   MODELADA SOBRE `.sat-nav-sectores-list` de silo.css: rejilla de filas con
   icono a la izquierda, dos columnas en escritorio y una en estrecho. Un
   recurso repetido da ritmo a la página; dos parecidos la desordenan.

   ═══ LO QUE NO SE COPIA DE ESA REFERENCIA, Y POR QUÉ ═══

   NI GALÓN NI DESPLAZAMIENTO AL PASAR EL PUNTERO. La fila-botón del catálogo
   de equipos lleva las dos cosas porque cada fila ES UN ENLACE: el galón dice
   «esto lleva a algún sitio» y el movimiento confirma que responde. Estos
   `<li>` NO son enlaces —son familias de equipo descritas en texto, sin
   destino—, así que un galón prometería una navegación que no existe y el
   movimiento invitaría a pulsar algo que no se puede pulsar. Es la diferencia
   entre decorar y mentir.
   ═══════════════════════════════════════════════════════════════════════ */

.sat-silo-marcas .sat-equipos-familias {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sat-space-2);
  margin: var(--sat-space-4) 0 0;
  padding: 0;
}
@media (min-width: 62rem) {
  .sat-silo-marcas .sat-equipos-familias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sat-space-3);
  }
}

.sat-silo-marcas .sat-equipos-familias li {
  /* `flex-start` y no `center`: una familia ocupa una o dos líneas según el
     ancho, y con el icono centrado en vertical la rejilla pierde la línea de
     lectura que forman los pictogramas al alinearse arriba. */
  display: flex;
  align-items: flex-start;
  gap: var(--sat-space-3);
  margin: 0;
  padding: var(--sat-space-3);
  background: var(--sat-color-bg-alt);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  color: var(--sat-color-text);
}

/* El icono lo antepone `sataire_icono_equipo()` desde la plantilla y ya trae
   sus medidas y su `flex: 0 0 auto` de global.css. Aquí solo el color: sobre
   una superficie alterna, el celeste institucional deja que el pictograma
   acompañe al texto en vez de competir con él, que es lo que hacía el naranja
   de acción heredado —ese color está reservado a lo que se puede pulsar—. */
.sat-silo-marcas .sat-equipos-familias .sat-equipo-icono {
  color: var(--sat-color-brand-light);
  /* Se baja el pictograma hasta la primera línea base del texto: alineado con
     el borde superior de la caja quedaba un pelo alto respecto a la mayúscula
     inicial. */
  transform: translateY(0.1em);
}

/* El `<span>` lo pone la plantilla alrededor del texto del `<li>`. Existe por
   una razón concreta: sin un elemento al que darle `min-width: 0`, una cadena
   larga sin espacios —un nombre de gama, por ejemplo— desborda su columna de
   rejilla en vez de partirse. */
.sat-silo-marcas .sat-equipo-familia-texto {
  min-width: 0;
}
.sat-silo-marcas .sat-equipos-familias li strong {
  color: var(--sat-color-brand-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   4. sat-visita — BANDA DE PROCESO, SIN CARRIL DE PASOS

   MISMA BANDA QUE EN PROVINCIA: fondo alterno y foto de pared bajo un velo
   degradado. El velo va en la MISMA propiedad que la foto y por encima de ella
   —en CSS la primera capa es la de arriba—, así que no hace falta ningún
   pseudo-elemento ni tocar el marcado. El degradado va de opaco a la
   izquierda, donde cae el texto y hay que garantizar el contraste, a
   semitransparente a la derecha, donde la pared puede verse: la imagen aporta
   textura sin competir nunca con lo que se lee.

   RUTA RELATIVA A LA HOJA, no absoluta. `../../../../uploads/…` sube cuatro
   niveles desde `wp-content/themes/{tema}/assets/css/` hasta `wp-content/` y
   entra en `uploads/`. COMPROBADO que la cadena vale sin cambios: este archivo
   vive en el mismo directorio que provincias.css, así que la cuenta de niveles
   es idéntica. Con una URL absoluta el CSS dejaría de funcionar en una copia de
   pruebas o si cambiara el dominio.

   ═══ SIN CARRIL DE PASOS, Y ESTO ES UNA DECISIÓN ═══

   En provincia este bloque es una lista ordenada que se convierte en tarjetas
   sobre un carril. En marca es PROSA en 15 de las 16 páginas: no hay pasos que
   colocar, y un carril vacío es un adorno. Las reglas del carril se quedan por
   tanto en provincias.css.

   BAXI ES LA EXCEPCIÓN — la única marca cuyo `sat-visita` trae `<ol><li>`— y
   por eso hay aquí abajo un tratamiento MÍNIMO del icono de paso. No es el
   carril: es evitar un fallo. `initPasos()` de silo.js inyecta el pictograma
   en cualquier `.sat-visita ol > li` que encuentre, y `sataire_icono()` emite
   el `<svg>` sin medidas, confiando en que la hoja se las dé. La única regla
   que lo dimensiona vive en provincias.css, que esta plantilla NO encola: sin
   lo de abajo, Baxi serviría un SVG con el tamaño por defecto del navegador
   —trescientos por ciento cincuenta píxeles— delante de cada paso. Se le da
   medida y color, y nada más.
   ═══════════════════════════════════════════════════════════════════════ */

.sat-silo-marcas .sat-visita {
  background-color: var(--sat-color-bg-alt);
  background-image:
    linear-gradient(
      to right,
      var(--sat-color-bg-alt) 0%,
      color-mix(in srgb, var(--sat-color-bg-alt) 88%, transparent) 40%,
      color-mix(in srgb, var(--sat-color-bg-alt) 62%, transparent) 100%
    ),
    url("../../../../uploads/2026/08/fondo-pared.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* La prosa a medida de lectura, alineada a la izquierda con el resto de la
   página. La banda cambia el fondo, no la retícula. */
.sat-silo-marcas .sat-visita > p {
  max-width: var(--sat-measure);
}

/* Baxi: el pictograma del paso, dimensionado y en línea con su texto. */
.sat-silo-marcas .sat-visita ol li {
  display: flex;
  align-items: baseline;
  gap: var(--sat-space-3);
}
.sat-silo-marcas .sat-paso-icono {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--sat-radius);
  background: color-mix(in srgb, var(--sat-color-brand-light) 14%, transparent);
  color: var(--sat-color-brand-light);
  transform: translateY(0.2em);
}
.sat-silo-marcas .sat-paso-icono svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}
.sat-silo-marcas .sat-visita ol li strong {
  display: block;
  color: var(--sat-color-brand-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. sat-garantia — BANDA OSCURA DE CONFIANZA

   COPIA DELIBERADA de provincias.css. El porqué está entero en la cabecera de
   este archivo y se resume en una frase: promoverla a la capa compartida
   rompería el `prefers-reduced-motion` de las 52 provincias publicadas.

   Es el único bloque de la página sobre fondo de marca, y eso es lo que hace:
   marcar dónde están los compromisos por escrito. Los tokens de texto se
   invierten explícitamente porque tokens.css fija el color de los encabezados
   y del párrafo a nivel global.

   SIN LAS REGLAS `> ul`. Ninguna de las 16 marcas emite esa lista: su
   `sat-garantia` es encabezado más uno o dos párrafos con la cifra en
   `<strong>`. Con ellas, `initGarantias()` de silo.js tampoco tiene sobre qué
   correr, así que tampoco se copian las de `.sat-garantia-item--mejorado`.
   ═══════════════════════════════════════════════════════════════════════ */

.sat-silo-marcas .sat-garantia {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  background:
    linear-gradient(
      150deg,
      var(--sat-color-brand-dark) 0%,
      color-mix(in srgb, var(--sat-color-brand) 70%, var(--sat-color-brand-dark)) 100%
    );
}
.sat-silo-marcas .sat-garantia > * {
  grid-column: content;
}
.sat-silo-marcas .sat-garantia h2,
.sat-silo-marcas .sat-garantia h3 {
  color: var(--sat-color-bg);
}
.sat-silo-marcas .sat-garantia p {
  color: color-mix(in srgb, var(--sat-color-bg) 82%, transparent);
  max-width: var(--sat-max-width-narrow);
}
/* El dato destacado se resuelve con color y subrayado, no con una pastilla de
   fondo: el `<strong>` del contenido cae a menudo pegado a una coma —«… de
   garantía por escrito, y el mantenimiento…»— y el relleno lateral de la
   pastilla abría un hueco antes del signo de puntuación. Comprobado en render
   sobre la página de provincia; el marcado de la marca es el mismo. */
.sat-silo-marcas .sat-garantia strong {
  color: var(--sat-color-bg);
  box-shadow: inset 0 -0.35em 0 color-mix(in srgb, var(--sat-color-brand-light) 45%, transparent);
}
.sat-silo-marcas .sat-garantia a {
  color: var(--sat-color-brand-light);
}

/* ── El rótulo de sección, invertido sobre la banda ─────────────────────
   `.sat-rotulo` lo inyecta silo.js y la capa compartida lo pinta en azul de
   marca. Sobre este fondo, azul oscuro, ese rótulo sería invisible: hay que
   invertirlo aquí igual que provincias.css lo invierte allí.

   ESTA REGLA ES OBLIGATORIA, no un remate. La capa compartida da rótulo a las
   16 páginas de marca desde el 19-ago-2026, así que sin esto el bloque de
   garantía saldría con un rótulo azul sobre azul oscuro en las 16 a la vez. */
.sat-silo-marcas .sat-garantia > .sat-rotulo {
  background: none;
  color: var(--sat-color-bg);
}
/* Sobre fondo de marca el tramo azul del filete desaparecería: se cambia por
   el fondo claro, y el naranja se mantiene porque ahí sí contrasta. */
.sat-silo-marcas .sat-garantia > .sat-rotulo::before {
  background: linear-gradient(
    to right,
    var(--sat-color-bg) 0 45%,
    var(--sat-color-cta) 45% 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════
   6. EL HUB /marcas/ — DIRECTORIO DE FABRICANTES (19-ago-2026)

   ESTA SECCIÓN NO PUEDE TOCAR LAS 16 PÁGINAS DE MARCA, y no depende de que
   nadie se acuerde: las cuatro clases que ancla —`sat-marcas-directorio`,
   `sat-marcas-rejilla`, `sat-marca-tarjeta` y `sat-hub-marcas-*`— las emite
   `sataire_marcas_hub_componer()` (inc/silo-marcas-hub.php) SOLO cuando el
   cuerpo no trae ningún bloque de rol, que es la firma del hub. En una página
   de fabricante esas clases no existen, así que ni un selector de aquí abajo
   casa nada. Comprobado sobre el HTML real de las 16, delta cero.

   POR QUÉ ES ESTO Y NO OTRA COSA. Un hub es un DIRECTORIO: su único trabajo es
   que el visitante encuentre su marca y entienda de un vistazo que se trabaja
   con todas. Por eso el bloque de los 16 enlaces recibe la rejilla y el
   logotipo —el ojo reconoce un rótulo antes que una palabra— y la prosa que
   viene después se retira a un par de tarjetas: apoyo, no camino.

   NO ES LA §13 DE servicios.css COPIADA. De allí se toma la LECCIÓN, que está
   escrita en aquel archivo y se resume así: el `<li>` no es una fila-botón,
   es una definición «<a>Término</a>: explicación», y partirla deja los dos
   puntos huérfanos. Aquí el `<li>` tampoco se parte; lo que cambia respecto de
   servicios es que encima de la definición hay un logotipo, y eso permite una
   rejilla más estrecha y más columnas, que es lo que un directorio de dieciséis
   entradas necesita para caber en una pantalla.

   ESTA SECCIÓN SÍ DECLARA TRANSICIONES, así que trae su propia consulta
   `prefers-reduced-motion` al final — leer la cabecera del archivo para el
   porqué: la consulta de la capa compartida NO cubre lo que se declara en una
   hoja posterior.

   LO QUE NO SE INTENTA. Las dos secciones del par pierden el revelado por
   scroll, porque silo.css lo da a los hijos DIRECTOS de `.sat-cuerpo` y a los
   de `.sat-contexto-operativo`, y no a los de este envoltorio. Es exactamente
   lo que ya le pasa al par del hub de servicios, y se deja igual a propósito:
   ganarlo aquí obligaría a tocar la capa compartida, que no es de este silo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La rejilla de marcas ───────────────────────────────────────────────
   `auto-fit` y no un número fijo de columnas: son dieciséis tarjetas y el
   número que cabe depende del ancho, no de una decisión nuestra. El mínimo de
   17rem no es estético — es el ancho por debajo del cual la descripción de una
   línea y media pasa a cuatro líneas y la rejilla se descuadra. */
.sat-silo-marcas .sat-marcas-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--sat-space-3);
  margin: var(--sat-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.sat-silo-marcas .sat-marca-tarjeta {
  margin: 0;
  padding: var(--sat-space-4);
  border: 1px solid var(--sat-color-border);
  border-radius: var(--sat-radius);
  background: var(--sat-color-bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── El hueco del logotipo ──────────────────────────────────────────────
   ES UNA CAJA DE ALTURA FIJA, y ahí está todo el diseño. Los quince dibujos
   son rótulos apaisados con el mismo alto de lienzo (140) y anchos que van de
   375 a 793, es decir, relaciones de 2,7:1 a 5,7:1. Igualarlos por ANCHO haría
   que «LG» se viera del triple de alto que «Samsung»; igualarlos por ALTO es
   lo que hace que la fila se lea como una fila. El `svg` conserva su relación
   porque tiene `viewBox`: al limitar los dos lados, el propio SVG se encaja
   dentro sin deformarse.

   EL COLOR LO PONE UN TOKEN Y NO LOS ARCHIVOS. Los quince dibujan con
   `fill="currentColor"`, así que el tono entero del muro de logotipos se decide
   en esta declaración; ese es también el motivo de que se incrusten en línea y
   no como `<img>` (ver `sataire_marca_logo_inline()`). */
.sat-silo-marcas .sat-marca-tarjeta-logo {
  display: block;
  height: 1.5rem;
  margin-bottom: var(--sat-space-3);
  color: var(--sat-color-text-secondary);
  transition: color 0.2s ease;
}
.sat-silo-marcas .sat-marca-tarjeta-logo svg {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* El pictograma de reserva es cuadrado —24x24— y a 1.5rem quedaría como una
   pulga junto a un rótulo de 5,7:1. Se le da el alto de la caja entera para
   que pese lo mismo ópticamente. Lo lleva hoy `general`, que no es un
   fabricante y por eso no tiene ni puede tener logotipo. */
.sat-silo-marcas .sat-marca-tarjeta-logo svg.sat-marca-tarjeta-generico {
  height: 1.75rem;
  margin-top: -0.125rem;
}

/* Solo el PRIMER enlace es la marca. Un enlace que aparezca después es prosa
   de la descripción y darle el mismo peso lo convertiría en un segundo
   destino — misma decisión, y por el mismo motivo, que en servicios.css §13. */
.sat-silo-marcas .sat-marca-tarjeta > a:first-of-type {
  color: var(--sat-color-brand);
  font-weight: 700;
  text-decoration: none;
}
.sat-silo-marcas .sat-marca-tarjeta > a:first-of-type:hover,
.sat-silo-marcas .sat-marca-tarjeta > a:first-of-type:focus-visible {
  text-decoration: underline;
}

/* `:focus-within` además de `:hover`: quien navega con el teclado tiene que
   ver qué tarjeta tiene el foco, no solo qué enlace. El logotipo pasa al color
   de marca en el mismo gesto, que es lo que convierte el muro monocromo en una
   respuesta y no en un adorno. */
.sat-silo-marcas .sat-marca-tarjeta:hover,
.sat-silo-marcas .sat-marca-tarjeta:focus-within {
  border-color: var(--sat-color-brand-light);
  box-shadow: var(--sat-shadow-card);
}
.sat-silo-marcas .sat-marca-tarjeta:hover .sat-marca-tarjeta-logo,
.sat-silo-marcas .sat-marca-tarjeta:focus-within .sat-marca-tarjeta-logo {
  color: var(--sat-color-brand);
}

/* ── Las dos tandas de prosa, como tarjetas gemelas ─────────────────────
   Mismo mecanismo que el par del hub de servicios y que las tarjetas de
   contexto de provincia: lo compone `sataire_componer_contexto_operativo()`.
   Aquí solo el aspecto. La clase es propia y no la de servicios porque aquella
   ancla en `.sat-silo-servicios`: compartir nombre solo serviría para que una
   corrección en un hub moviera el otro. */
.sat-silo-marcas .sat-hub-marcas-bloque > p {
  max-width: var(--sat-measure);
}

.sat-silo-marcas .sat-hub-marcas-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sat-space-4);
  margin-block: var(--sat-space-seccion);
}
.sat-silo-marcas .sat-hub-marcas-par--unico {
  grid-template-columns: minmax(0, 1fr);
}

/* Gana a `.sat-cuerpo section[class^="sat-"]` de global.css —que vale (0,2,1)
   y le pondría el filete divisorio y el ritmo de sección a cada tarjeta— por
   peso legítimo, (0,3,1), y no por acumular selectores. */
.sat-silo-marcas .sat-cuerpo .sat-hub-marcas-par > section[class^="sat-"] {
  margin: 0;
  padding: var(--sat-space-5);
  border: 0;
  border-radius: var(--sat-radius);
  background: var(--sat-color-bg-alt);
  box-shadow: var(--sat-shadow-card);
}
/* Dentro de la tarjeta la prosa ya está acotada por el ancho de la columna: la
   medida de lectura de arriba la estrecharía una segunda vez. */
.sat-silo-marcas .sat-hub-marcas-par .sat-hub-marcas-bloque > p {
  max-width: none;
}

@media (max-width: 61.99rem) {
  .sat-silo-marcas .sat-hub-marcas-par {
    grid-template-columns: 1fr;
    gap: var(--sat-space-3);
  }
  .sat-silo-marcas .sat-cuerpo .sat-hub-marcas-par > section[class^="sat-"] {
    padding: var(--sat-space-4) var(--sat-space-3);
  }
}

/* OBLIGATORIA porque esta sección es la primera de la hoja que declara
   `transition` — ver la cabecera del archivo: la consulta de silo.css no cubre
   lo que se declara en una hoja que se carga después. */
@media (prefers-reduced-motion: reduce) {
  .sat-silo-marcas .sat-marca-tarjeta,
  .sat-silo-marcas .sat-marca-tarjeta-logo {
    transition: none;
  }
}