` * antes de imprimirlos), pero una vez normalizado el marcado es el mismo, y * ese es exactamente el requisito que esta capa pide. * * EL PRECEDENTE QUE LA MOTIVA, y conviene leerlo antes de mover nada aquí. * El hero se había resuelto dos veces, una por plantilla: la de provincia * evolucionaba y la de ciudad se quedaba clavada. El propietario abrió una * página de ciudad, no vio ninguno de los cambios que acababa de aprobar en * provincia, y esa fue la señal de que el problema no era el hero sino la * duplicación. De ahí nació `template-parts/portada.php`: UN componente, dos * plantillas. Este archivo es la misma decisión aplicada al CSS. * * EL SÍNTOMA MEDIDO (19-ago-2026). Las ~311 páginas de ciudad publicadas * emiten `sat-servicios`, `sat-casos`, `sat-cobertura`, `sat-faq` y * `sat-alcance`, además de los tres bloques `sat-nav-*` que imprime * `sataire_render_silo_nav()`. Pero solo encolaban tokens.css, global.css, * core.css y global.js: ni provincias.css ni el script de silo. Resultado: * sin rótulo de sección, sin tarjetas de servicio, sin burbuja en los casos, * sin revelado al hacer scroll y sin catálogo de equipos en fila-botón. Los * estilos existían desde hacía días; simplemente no llegaban. * * ───────────────────────────────────────────────────────────────────────── * EL CRITERIO: ¿ESTA REGLA VA AQUÍ O EN LA HOJA DE UN SILO? * * Se responde mirando el MARCADO, no el diseño: * * · Si VARIAS de las plantillas de la lista emiten el marcado al que apunta * el selector, la regla va aquí. Ejemplos: `.sat-rotulo` (lo inyecta * silo.js, que ahora corre en las tres), `.sat-tarjetas`/`.sat-tarjeta` * (las construye ese mismo script sobre `.sat-servicios`, que existe en * provincia y ciudad), `.sat-casos`, `.sat-alcance` y los `sat-nav-*`. * NO hace falta que las emitan LAS TRES: un selector que no casa nada en * una de ellas es un no-op, no un error, y partir la lista por hoja es lo * que ya obligó a duplicar el hero. * · Si el marcado lo emite SOLO una plantilla, la regla se queda en la hoja * de ese silo con su prefijo intacto. Ejemplos que se han quedado en * provincias.css: `.sat-sintomas`, `.sat-visita`, `.sat-equipos`, * `.sat-garantia`, `.sat-contexto-operativo`, `.sat-cobertura-media`. * Traerlas aquí no rompería nada, pero convertiría esta capa en un cajón: * el día que alguien busque por qué la ciudad no pinta `sat-visita` * tendría que descartar reglas que nunca podían aplicarse. * · OJO: «lo emite provincia Y marca» NO basta para subirlo aquí si las dos * lo pintan distinto. `sat-visita` y `sat-garantia` los emiten las dos, y * aun así siguen repartidos entre provincias.css y marcas.css, COPIADOS. * El motivo está documentado en la cabecera de marcas.css y es de cascada, * no de gusto: esta capa se carga ANTES que la hoja de slug, así que un * bloque `prefers-reduced-motion` que viva aquí pierde —a igual * especificidad, por orden— contra los `:hover` que se queden allí. * Promover `sat-garantia` reproduciría ese desajuste en las 52 provincias * publicadas. * · Si el marcado lo emite CUALQUIER plantilla del tema —incluidas * servicios, core y legal— la regla no es de esta capa, es de global.css. * Ahí está la línea que no hay que cruzar hacia abajo: `sat-casos` y * `sat-faq` los emiten también esos otros silos, así que su BASE vive en * global.css y aquí solo está el tratamiento de silo (banda de color, * burbuja, revelado). * * ───────────────────────────────────────────────────────────────────────── * POR QUÉ `:is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas)` Y NO OTRA COSA. * * `sataire_body_class_silo()` pone en el `` la clase del término, así * que provincia, ciudad y marca se distinguen ahí y no en la plantilla. Se * generaliza con `:is()` por una razón exacta y comprobable: `:is()` toma la * especificidad de su argumento MÁS ESPECÍFICO, y aquí los TRES argumentos son * una clase suelta. Luego `:is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) X` * pesa EXACTAMENTE lo mismo que pesaba `.sat-silo-provincias X`. Añadir un * cuarto silo a la lista tampoco cambiaría ese peso: no puede alterar la * cascada de las 52 provincias ya publicadas, y ese es el motivo de elegirlo. * * (El 19-ago-2026 se añadió `.sat-silo-marcas` a los 92 anclajes de este * archivo. Las 16 páginas de marca publicadas venían sirviendo `sat-casos`, * `sat-faq` y `sat-alcance` con la tarjeta pelada de global.css, sin rótulo de * sección, sin banda y sin revelado — el mismo síntoma que la ciudad, por el * mismo motivo: la hoja existía y no llegaba.) * * NO se usa `body[class*="sat-silo-"]`: esa forma alcanzaría también a * servicios, core y legal, que emiten `sat-casos` y `sat-faq` con el mismo * marcado y NO deben recibir banda de color ni burbuja. Un selector que * acierta por casualidad es un selector que fallará cuando entre el sexto * silo. * * ───────────────────────────────────────────────────────────────────────── * 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 — 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. BANDA DE `sat-casos` SANGRADA A ANCHO DE VENTANA AQUÍ SOLO ESTÁ `sat-casos`. Las otras tres bandas de la provincia —`sat-visita`, `sat-sectores` y `sat-garantia`— siguen en provincias.css con su prefijo, y una banda sin fondo no dibuja nada: solo estira de borde a borde el filete divisorio de `.sat-cuerpo section[class^="sat-"]`. Sangrar lo que no tiene fondo es regalar una raya a ancho de ventana, así que el sangrado tiene que viajar SIEMPRE con el fondo, en la misma hoja. ESO SIGUE VALIENDO CON MARCAS DENTRO (19-ago-2026), aunque el motivo ya no sea «la ciudad no emite esos roles»: la marca SÍ emite `sat-visita` y `sat-garantia`. Lo que pasa es que su fondo lo pone marcas.css —copiado, no promovido; ver la cabecera de esa hoja—, así que su sangrado va allí también. Subir el sangrado aquí y dejar el fondo abajo es justo la media decisión que este comentario lleva avisando de no tomar. `sat-casos` SÍ viaja, y por eso viaja con su fondo: el bloque «banda y hover» de más abajo es el que le pone `--sat-color-bg-alt`. Las dos cosas tienen que estar en la misma hoja o la ciudad recibiría media decisión. (La nota que provincias.css tenía aquí —«una ciudad nunca carga esta hoja, así que su `.sat-casos` no tiene banda que sangrar»— dejó de ser cierta el 19-ago-2026: ahora la ciudad carga ESTA capa, y con ella la banda.) EL RELLENO REPRODUCE LA COLUMNA `content` DE LA REJILLA. La banda sangra a ancho de ventana, así que tiene que volver a meter su texto justo donde lo pone la rejilla de `.sat-cuerpo`, cuya columna central es `min(100% - var(--sat-gutter) * 2, var(--sat-max-width-content))` centrada entre dos calles `minmax(var(--sat-gutter), 1fr)`. El `max()` de aquí abajo es esa misma definición leída desde dentro de la banda: manda la calle mientras el ancho no llega al máximo, y a partir de ahí manda el sobrante repartido a los dos lados. ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1); un selector de dos clases perdería el `border-bottom: 0` aunque esta hoja se cargue después de global.css. EL RELLENO VERTICAL TAMBIÉN ES PROPIO. Una banda no puede conformarse con `--sat-space-seccion`: entre dos secciones sobre blanco los rellenos se SUMAN y ninguna tiene borde visible, mientras que aquí el borde del color es un límite duro y el relleno del vecino cae fuera de él. Por eso consume `--sat-space-seccion-banda`, que tokens.css deriva del anterior ×1.5 —una sola decisión, imposible que los dos valores se separen—. Funciona porque `body[class*="sat-silo-"] #page.grid-container` lleva `overflow-x: clip` en global.css: sin eso, 100vw abriría scroll lateral. ═══════════════════════════════════════════════════════════════════════ */ :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-cuerpo section.sat-casos { 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; } /* `.sat-casos` es `display: grid`: el relleno de la banda va en la SECCIÓN, así que las columnas `auto-fit` se calculan sobre la caja de contenido ya reducida y siguen cayendo solas. */ /* ═══════════════════════════════════════════════════════════════════════ 2. RÓTULO DE CATEGORÍA Filete bicolor + versales sobre el `

` de cada bloque: es el recurso que le da a la página ritmo de portada en vez de aire de documento. Lo inyecta assets/js/silo.js como `` real —no como `::before{content}`— porque un pseudo-elemento con texto se cuela en el nombre accesible del encabezado que decora. VA EN ESTA CAPA porque el script que lo inyecta corre ahora en las dos plantillas: sin la regla aquí, la ciudad recibiría el `` y lo pintaría como texto suelto encima del titular. SIN DECLARAR AQUÍ EL TAMAÑO DEL TEXTO: se lo da la clase de utilidad `.sat-text-sm` de tokens.css, que el propio script añade al ``. Es la única forma de tener un rótulo pequeño sin abrir un segundo origen de la escala tipográfica. Mismo tratamiento que el rótulo del hero (18-ago-2026, petición del propietario): filete bicolor + versales, en vez de la píldora de fondo. Un solo recurso repetido da ritmo a la página; dos recursos distintos para lo mismo la desordenan. El filete es la única forma en que el naranja aparece en TODAS las secciones, no solo donde hay un botón. ═══════════════════════════════════════════════════════════════════════ / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-rotulo { display: flex; align-items: center; gap: var(--sat-space-3); width: fit-content; margin-bottom: var(--sat-space-2); padding: 0; border-radius: 0; background: none; color: var(--sat-color-brand); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } / Más naranja que en el hero: aquí el tramo de acción ocupa la mitad del filete, no un tercio. Es el gesto que el propietario pidió reforzar. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-rotulo::before { content: ""; flex: 0 0 auto; width: 3.5rem; height: 0.1875rem; border-radius: var(--sat-radius); background: linear-gradient( to right, var(--sat-color-brand-dark) 0 45%, var(--sat-color-cta) 45% 100% ); } / En un bloque que ya es rejilla, el rótulo entraría como una celda más y se comería una columna de tarjetas. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > .sat-rotulo { grid-column: 1 / -1; } / La inversión del rótulo sobre la banda oscura (`.sat-garantia > .sat-rotulo`) NO está aquí: vive en provincias.css y, desde el 19-ago-2026, COPIADA en marcas.css. Va con la banda oscura, y esa banda está repartida entre las dos hojas de slug por el motivo de cascada que explica la cabecera de marcas.css. Un rótulo azul sobre fondo azul oscuro es el síntoma de haberlas separado. / / ═══════════════════════════════════════════════════════════════════════ 3. TARJETAS (`.sat-tarjetas` / `.sat-tarjeta`) El contenido emite `
` + `
` repetidos, sin envoltorio. Las tarjetas las construye assets/js/silo.js moviendo cada par a un `.sat-tarjeta` dentro de `.sat-tarjetas` — mismo patrón de mejora progresiva que las pestañas de global.js. SIN JavaScript el bloque se lee como una sucesión normal de encabezados con su párrafo y sus enlaces siguen en el HTML, que es lo único que importa para el enlazado interno. Por eso las reglas de abajo estilizan la tarjeta, no la ausencia de tarjeta: el estado sin JS no necesita CSS propio. VAN EN ESTA CAPA POR DOS MOTIVOS, y el segundo es el que obliga: · la ciudad emite `.sat-servicios`, que es una de las dos secciones que el script convierte en tarjetas; · el ESCALONADO del revelado (sección 8) referencia `.sat-tarjeta` por `nth-child`. Dejar la tarjeta en una hoja y su animación en otra es exactamente el acoplamiento que produjo el desajuste del hero. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjetas { display: grid; / En estrecho manda el contenido: `auto-fit` decide cuántas caben. / grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sat-space-3); margin-top: var(--sat-space-4); } / DOS COLUMNAS FIJAS EN ESCRITORIO (18-ago-2026, petición del propietario). Con `auto-fit` y el contenedor ya en 1360px entraban tres o cuatro por fila y cada tarjeta quedaba demasiado estrecha para su párrafo. Dos dan una medida de lectura cómoda y una rejilla regular con 4, 5, 6 u 8 tarjetas — la última fila impar se estira, que es el comportamiento correcto y no deja huecos. / @media (min-width: 62rem) { :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sat-space-4); } } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta { display: flex; flex-direction: column; gap: var(--sat-space-2); background: var(--sat-color-bg); border: 1px solid var(--sat-color-border); border-radius: var(--sat-radius); padding: var(--sat-space-4); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:hover { transform: translateY(-4px); border-color: var(--sat-color-brand-light); box-shadow: 0 0.875rem 2rem color-mix(in srgb, var(--sat-color-brand-dark) 13%, transparent); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta h3 { margin: 0; color: var(--sat-color-brand); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta p { margin: 0; color: var(--sat-color-text-secondary); } / El enlace al silo de servicio es el destino real de la tarjeta: se marca como tal sin convertirlo en un botón (los botones son territorio del slot de CTA, que este tema no invade). / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta a { font-weight: 600; } / NOTA CRUZADA: `.sat-tarjeta:hover .sat-sintoma-icono` sigue en provincias.css. Es correcto: el icono de avería solo existe donde existe `sat-sintomas`, que es un rol de provincia. La tarjeta es compartida; lo que la provincia mete dentro, no. / / ═══════════════════════════════════════════════════════════════════════ 4. sat-casos: banda, tarjeta y BURBUJA DE MENSAJE La rejilla `auto-fit` y la tarjeta base vienen de global.css (los casos son `
` DIRECTOS Y SIN CLASE: el contrato de contenido no emite ningún envoltorio intermedio). Aquí, el tratamiento de silo: banda de fondo, respuesta al puntero y piquito de burbuja. POR QUÉ CADA SELECTOR SE ESCRIBE DOS VECES, `> div` Y `> article`. El corpus de provincia y de ciudad emite `
`; el de MARCA llega en cuatro formas distintas —`
` ya hecho, `
`+`
`, `
` y `
` plano— y `template-marcas.php` las normaliza TODAS a `
` antes de imprimir. Enumerar las dos etiquetas es aditivo y no cuesta nada: `> article` no casa nada en provincia ni en ciudad, porque allí no existe. La alternativa —normalizar también provincia y ciudad a `
`— tocaría el marcado de ~363 páginas publicadas para no ganar nada. EL PIQUITO, BIEN HECHO (19-ago-2026). El primer intento —un cuadrado girado 45° con dos bordes y `clip-path`— tenía dos defectos que el propietario vio enseguida: el contorno no empalmaba con el de la tarjeta, y la sombra lo cortaba con una línea. La técnica correcta es la clásica de las burbujas con borde, y son DOS triángulos superpuestos: · `::before` dibuja el triángulo del COLOR DEL BORDE. · `::after` dibuja el mismo triángulo un pelo más pequeño y desplazado 1px hacia dentro, del COLOR DEL FONDO. El segundo tapa el interior del primero y deja a la vista solo su canto: así el contorno del piquito y el de la tarjeta son la misma línea continua. Un triángulo hecho con `border` no admite contorno propio — por eso hacen falta dos y no basta con uno. Y LA SOMBRA VA CON `filter: drop-shadow`, NO `box-shadow`. `box-shadow` sigue la caja rectangular e ignora los pseudo-elementos: de ahí la línea que cortaba el piquito. `drop-shadow` sigue la SILUETA REAL de lo pintado, piquito incluido, y la sombra lo rodea de una pieza. ═══════════════════════════════════════════════════════════════════════ / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos { / Mas aire que una seccion sobre blanco: aqui el fondo hace de marco y el texto pegado al canto de color se lee peor. Ver --sat-space-seccion-banda. / padding-block: var(--sat-space-seccion-banda); background: var(--sat-color-bg-alt); / Con 3 casos en una rejilla de 4 columnas, las pistas vacías dejaban el bloque pegado a la izquierda. `justify-content: center` centra el conjunto sea cual sea el recuento. / justify-content: center; justify-items: center; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > h2, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > p, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > .sat-rotulo { justify-self: center; text-align: center; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article { position: relative; width: 100%; background: var(--sat-color-bg); border: 1px solid var(--sat-color-border); border-radius: var(--sat-radius) var(--sat-radius) var(--sat-radius) 0; margin-bottom: var(--sat-space-4); box-shadow: none; transition: transform 0.25s ease, box-shadow 0.25s ease; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--sat-color-brand-dark) 8%, transparent)) drop-shadow(0 4px 10px color-mix(in srgb, var(--sat-color-brand-dark) 10%, transparent)); } / SE CONSERVA EL `box-shadow` DEL HOVER TAL CUAL ESTABA (19-ago-2026, al extraer la capa). En provincias.css estas dos declaraciones vivían en dos bloques separados y el de hover, con `:hover` de por medio, vale (0,3,1) contra los (0,2,1) del `box-shadow: none` de arriba: le gana, así que la sombra rectangular reaparece al pasar el puntero y vuelve a cortar el piquito con la línea que `filter: drop-shadow` había venido a evitar. Es una TENSIÓN HEREDADA, no algo que introduzca esta extracción, y por eso se traslada intacta: cambiarla aquí alteraría el render de las 52 provincias publicadas sin que nadie lo haya pedido. [PENDIENTE de decisión del propietario: o se quita el `box-shadow` y se intensifican los `drop-shadow` en hover, o se acepta la línea.] / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:hover, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:hover { transform: translateY(-4px); box-shadow: 0 0.875rem 2rem color-mix(in srgb, var(--sat-color-brand-dark) 13%, transparent); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div::before, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div::after, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article::before, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; } / Canto del piquito: hereda el color del borde de la tarjeta. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div::before, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article::before { bottom: -0.8rem; inset-inline-start: -1px; border-width: 0.8rem 0.8rem 0 0; border-color: var(--sat-color-border) transparent transparent transparent; } / Relleno del piquito: mismo triángulo, 1px más adentro. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div::after, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article::after { bottom: -0.7rem; inset-inline-start: 0; border-width: 0.7rem 0.7rem 0 0; border-color: var(--sat-color-bg) transparent transparent transparent; } / ═══════════════════════════════════════════════════════════════════════ 5. sat-alcance: cierre y desambiguación Panel de cierre sobre fondo alterno (regla base en global.css); aquí solo el filete de marca que lo separa del pie. Las dos plantillas cierran con este bloque. ═══════════════════════════════════════════════════════════════════════ / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-alcance { border-top: 3px solid var(--sat-color-brand); } / ═══════════════════════════════════════════════════════════════════════ 6. NAVEGACIÓN DE SILO TRANSVERSAL (sat-nav-) Las imprime `sataire_render_silo_nav()` DESPUÉS del cuerpo, en provincia y en ciudad. Son navegación de plantilla, no contenido: se marcan como tal bajando el peso visual del encabezado para que no compitan con los H2 del cuerpo redactado. ═══════════════════════════════════════════════════════════════════════ / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) [class^="sat-nav-"] h2 { color: var(--sat-color-text-secondary); } /* La frase de entrada de un bloque de navegación (hoy, la multimarca que acompaña a `sat-nav-marcas`). / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-intro { margin-top: 0; margin-bottom: var(--sat-space-3); color: var(--sat-color-text-secondary); } / ── Selector de sector (sat-nav-sectores) ───────────────────────────── Deja de ser una lista de pie de página y pasa a ser un selector: rejilla de filas con icono, la parte que distingue en negrita y el prefijo común atenuado. Ver `sataire_html_sectores()` en functions.php. OJO, NO CONFUNDIR con `.sat-sectores`, que es la SECCIÓN redactada de negocios y sigue en provincias.css: la ciudad no la emite. Lo que viaja aquí es la LISTA de navegación, que sí imprimen las dos plantillas. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sat-space-2); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-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; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list li:hover { background: color-mix(in srgb, var(--sat-color-brand-light) 12%, var(--sat-color-bg)); transform: translateX(3px); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list a { display: block; padding: 0; border: 0; color: var(--sat-color-brand-dark); text-decoration: none; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list a:hover, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list a:focus { text-decoration: underline; } / El prefijo repetido en las seis filas, atenuado y en bloque: la cola —lo que de verdad distingue un sector de otro— queda en primera línea de lectura. El texto del enlace no cambia; solo su peso visual. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-sector-pre { display: block; color: var(--sat-color-text-secondary); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list strong { color: var(--sat-color-brand-dark); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-sector-icono { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; color: var(--sat-color-cta); } / El hub, con el mismo recuadro que los sectores para que no quede como un enlace suelto colgando debajo de la rejilla, pero con el fondo invertido: sigue siendo la salida al padre, no un séptimo sector. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-sectores-hub { margin-top: var(--sat-space-2); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-sectores-hub a { display: flex; align-items: center; gap: var(--sat-space-3); padding: var(--sat-space-3); border: 1px solid var(--sat-color-brand-light); border-radius: var(--sat-radius); background: var(--sat-color-bg); font-weight: 700; color: var(--sat-color-brand); text-decoration: none; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-sectores-hub a:hover, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-sectores-hub a:focus { background: color-mix(in srgb, var(--sat-color-brand-light) 10%, var(--sat-color-bg)); } @media (prefers-reduced-motion: reduce) { :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list li, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-sectores-list li:hover { transition: none; transform: none; } } / ═══════════════════════════════════════════════════════════════════════ 7. CATÁLOGO DE EQUIPOS (sat-nav-tipos-equipo) ═══════════════════════════════════════════════════════════════════════ / / ── La caja del `
` que contiene icono y texto ───────────────────── Lo pone `sataire_icono_equipo()` (functions.php) según el tipo. Medidas fijas y `flex: 0 0 auto` en el icono —regla en global.css— porque varios rótulos ocupan dos líneas («Reparación y mantenimiento de unidad de tratamiento de aire»). `:is()` y no dos reglas ni `body[class=]` (19-ago-2026, al portar la capa a ciudades): `:is()` toma la especificidad de su argumento MAS especifico, asi que esto sigue pesando (0,2,1) — exactamente lo que pesaba con el prefijo suelto. Generalizar aqui no puede alterar la cascada de las 52 provincias, y esa es la razon de elegirlo. ESTA REGLA ESTUVO INERTE EN CIUDAD hasta el 19-ago-2026: ya venía generalizada con `:is()`, pero vivía en provincias.css, una hoja que la ciudad nunca encolaba. Generalizar un selector no sirve de nada si el archivo no llega. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li { display: flex; align-items: center; gap: var(--sat-space-3); } /* ── Rótulo de grupo del catálogo de equipos ─────────────────────────── Separa vivienda de industria dentro de «¿Qué equipo tienes instalado?». Es una etiqueta de eje, no un encabezado de sección: por eso va en versales discretas y NO como `
` — meter un nivel más de encabezado dentro de un bloque que ya cuelga de un `
` ensucia el esquema del documento para ganar solo un efecto visual. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-catalogo-grupo { margin: var(--sat-space-4) 0 var(--sat-space-2); color: var(--sat-color-text-secondary); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-catalogo-grupo:first-of-type { margin-top: var(--sat-space-3); } / ── Catálogo de equipos: la fila entera es el botón ─────────────────── (19-ago-2026.) Antes el recuadro lo llevaba el `` y el icono quedaba FUERA, a su izquierda: se leía como una viñeta suelta y no como parte del elemento. Ahora la caja la lleva el `
`, así que icono y texto viven dentro de la misma superficie. Y SE NOTA QUE SE PUEDE PULSAR, que era la otra queja: la fila entera responde al puntero, aparece un galón a la derecha y toda el área es pulsable —no solo las palabras—. Eso último se consigue estirando el propio enlace con un `::after` que cubre la fila: el área de pulsación crece sin duplicar el enlace ni añadir marcado, así que el lector de pantalla sigue anunciando UN solo enlace por fila. ═══ ESTE BLOQUE ESTÁ DUPLICADO A PROPÓSITO ═══ La versión de aquí NO lleva el prefijo `.sat-equipos-complementos`; la de provincias.css SÍ, y las dos se mantienen a la vez. El motivo es de cascada, no de estilo: · En PROVINCIA, el catálogo va DENTRO de la sección `sat-equipos`, y ahí la regla de etiquetas en línea `.sat-equipos ul li` de provincias.css vale (0,1,2) contra los (0,1,1) de `.sat-nav-tipos-equipo-list li`. Le gana y deja la lista en `display:flex` con `flex-wrap`, que es lo que producía las cinco filas de anchos irregulares. Por eso la provincia NECESITA el prefijo extra: le da la especificidad que hace falta para ganar ese pulso concreto. · En CIUDAD no existe `sat-equipos` —el catálogo cuelga directamente del cuerpo, impreso por `sataire_render_silo_nav()`—, así que ese conflicto no se da y la versión sin prefijo basta. Se duplica en vez de dejar solo la versión con prefijo porque esa no casa nunca en ciudad; y en vez de dejar solo la de aquí porque esa pierde en provincia. Son dos contextos con especificidades distintas alrededor del MISMO componente. Quien toque uno de los dos bloques tiene que tocar el otro: si el catálogo deja de vivir dentro de `sat-equipos` en provincia, la copia con prefijo sobra y se borra entera. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list { display: grid; grid-template-columns: 1fr; gap: var(--sat-space-2); } @media (min-width: 62rem) { :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sat-space-3); } } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li { position: relative; display: flex; align-items: center; gap: var(--sat-space-3); margin: 0; padding: var(--sat-space-3) var(--sat-space-5) var(--sat-space-3) var(--sat-space-3); background: var(--sat-color-bg); border: 1px solid var(--sat-color-border); border-radius: var(--sat-radius); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li:hover { border-color: var(--sat-color-brand-light); box-shadow: var(--sat-shadow-card); transform: translateY(-2px); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li:focus-within { outline: 2px solid var(--sat-color-brand-light); outline-offset: 2px; } / El enlace pierde su caja —la lleva el `li`— y se estira sobre toda la fila. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list a { padding: 0; border: 0; border-radius: 0; background: none; color: var(--sat-color-brand-dark); font-weight: 600; text-decoration: none; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } / Galón de «esto lleva a algún sitio». Máscara y no carácter: no lo anuncia el lector de pantalla y su forma no depende de la fuente instalada. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li::after { content: ""; position: absolute; inset-inline-end: var(--sat-space-3); width: 1rem; height: 1rem; background-color: var(--sat-color-brand-light); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 6 6 6-6 6' fill='none' stroke='black' stroke-width='2.5' 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='m9 6 6 6-6 6' fill='none' stroke='black' stroke-width='2.5' 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; } @media (prefers-reduced-motion: reduce) { :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-nav-tipos-equipo-list li:hover { transition: none; transform: none; } } / ═══════════════════════════════════════════════════════════════════════ 8. ANIMACIONES Y REVELADO AL HACER SCROLL ─ Solo `transform` y `opacity` (compuestas por GPU, sin reflow). ─ Revelado por scroll con `animation-timeline: view()` donde el navegador lo soporta; assets/js/silo.js cubre el resto con IntersectionObserver. Ninguno de los dos caminos puede dejar contenido invisible si falla: el estado oculto SOLO se aplica cuando el mecanismo que va a revelarlo está activo. POR QUÉ LA SECCIÓN VIAJA ENTERA. Los selectores enumeran roles de las TRES plantillas mezclados (`.sat-contexto-operativo` es solo de provincia; `.sat-visita ol li` es de provincia y de UNA sola marca —Baxi, la única del corpus que escribe la visita con `
`—; `.sat-tarjeta` es de provincia y ciudad; `.sat-casos > div` de provincia y ciudad, y `> article` solo de marca). Los que no casan nada en una plantilla NO cuestan nada: un selector sin coincidencias es un no-op, no un error. Partir la lista por hoja habría duplicado los tres `@keyframes` y el bloque `@supports`, y con ellos la probabilidad de que un día los tramos de escalonado dejen de coincidir. `> div` Y `> article` SE ENUMERAN JUNTOS EN LOS CUATRO SITIOS de esta sección —el `@supports`, los tres tramos de `nth-child` y los tres `transition-delay`—, y tienen que seguir yendo juntos. Si un día alguien añade un quinto tramo y solo escribe `> div`, el escalonado de la marca se partirá justo ahí y el síntoma (una tarjeta que entra a destiempo) no señalará a este archivo. ESTE BLOQUE VA AL FINAL DEL ARCHIVO A PROPÓSITO: la consulta `prefers-reduced-motion` de más abajo neutraliza `transform` con la MISMA especificidad que las reglas de `:hover` que anula, así que solo gana si va después. Quien añada reglas nuevas a esta hoja las pone ARRIBA, no aquí. Y solo neutraliza lo que vive AQUÍ: las hojas de slug se cargan después, así que provincias.css y marcas.css llevan cada una su propia consulta para los `:hover` que declaran ellas. ═══════════════════════════════════════════════════════════════════════ / @keyframes sat-entrada-abajo { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } } @keyframes sat-entrada-izquierda { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } } @keyframes sat-entrada-derecha { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } } / Las animaciones de entrada de la PORTADA viven en global.css junto al resto del hero: el componente lo comparten todas las plantillas de silo y sus fotogramas tienen que ir con él. Aquí quedan solo las del cuerpo. / / Revelado nativo por scroll. `@supports` garantiza que en un navegador sin la propiedad no se aplique NADA — ni siquiera el estado inicial. / @supports (animation-timeline: view()) { :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-cuerpo > section[class^="sat-"]:not(.sat-banda-diferenciales), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-cuerpo > .sat-contexto-operativo > section[class^="sat-"], :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li { animation: sat-entrada-abajo linear both; animation-timeline: view(); animation-range: entry 0% entry 28%; } / ESCALONADO. Único uso de `nth-child` del archivo, y es seguro precisamente porque no decide NADA: solo desplaza unos puntos el tramo de scroll en el que cada tarjeta termina de entrar, de modo que una fila no aparece de golpe. Con dos elementos o con nueve se comporta igual — los que no casen ninguna de estas tres reglas usan el tramo base de arriba, que es un estado válido, no un hueco. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:nth-child(2), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:nth-child(2), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:nth-child(2), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li:nth-child(2) { animation-range: entry 4% entry 32%; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:nth-child(3), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:nth-child(3), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:nth-child(3), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li:nth-child(3) { animation-range: entry 8% entry 36%; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:nth-child(4), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:nth-child(4), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:nth-child(4), :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li:nth-child(4) { animation-range: entry 12% entry 40%; } } / Camino alternativo (IntersectionObserver). Las dos clases las pone y las quita assets/js/silo.js: sin JavaScript, ninguna existe y el contenido se ve entero desde el primer pintado. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-por-revelar { opacity: 0; transform: translateY(1.75rem); } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-revelado { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } / Mismo escalonado que el camino nativo, resuelto con retardo de transición en vez de con tramo de scroll. / :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:nth-child(2).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:nth-child(2).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:nth-child(2).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li:nth-child(2).sat-revelado { transition-delay: 0.08s; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:nth-child(3).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:nth-child(3).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:nth-child(3).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li:nth-child(3).sat-revelado { transition-delay: 0.16s; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:nth-child(4).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:nth-child(4).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:nth-child(4).sat-revelado, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-visita ol li:nth-child(4).sat-revelado { transition-delay: 0.24s; } / ── Respeto a las preferencias del sistema ───────────────────────────── Quien pide menos movimiento no recibe ninguna animación de entrada ni ningún desplazamiento al pasar el puntero. Se neutraliza también el estado inicial oculto, por si el observador no llegara a dispararse. ⚠️ ESTA CONSULTA YA NO ALCANZA A TODA LA PROVINCIA. Vivía en provincias.css y desde allí neutralizaba también los `:hover` de `sat-sintomas` y `sat-visita`, que están más arriba EN AQUELLA MISMA HOJA. Al mudarse aquí, esta capa se carga ANTES que provincias.css y —con la misma especificidad— perdería contra esas dos reglas. Por eso provincias.css conserva su propia consulta `prefers-reduced-motion` para los roles que solo emite ella; ver la nota de allí. Lo de aquí cubre lo que vive aquí. / @media (prefers-reduced-motion: reduce) { :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) , :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) ::before, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) ::after { animation-duration: 0.01ms !important; animation-delay: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-por-revelar { opacity: 1; transform: none; } :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-tarjeta:hover, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > div:hover, :is(.sat-silo-provincias, .sat-silo-ciudades, .sat-silo-marcas) .sat-casos > article:hover { transform: none; } }