/** * provincias.css — CAPA DE SILO de la página de provincia. * * QUÉ VIVE AQUÍ Y QUÉ NO. Hay TRES capas por debajo de este archivo, y la * pregunta «¿dónde va esta regla?» se responde de abajo arriba: * * 1. assets/css/global.css — la base de los bloques `sat-{rol}` (rejillas * de síntomas, casos, tablas, pestañas, listas navegacionales, FAQ v1). * Desde la auditoría del 14-ago-2026 vive ahí porque la comparten las * 500+ páginas de marca, ciudad, servicio y core. * 2. assets/css/silo.css — la CAPA COMPARTIDA DE SILO GEOGRÁFICO, nueva el * 19-ago-2026. Lo que emiten LAS DOS plantillas de silo, provincia y * ciudad: rótulo de sección, tarjetas, banda y burbuja de `sat-casos`, * filete de `sat-alcance`, los `sat-nav-*` y todo el revelado al hacer * scroll. Se encola ANTES que este archivo, así que desde aquí se puede * afinar lo compartido sin subir la especificidad. * 3. este archivo — SOLO lo que distingue A LA PROVINCIA, que es la página * con más tráfico potencial del sitio y la única que monta los doce * bloques a la vez: * * · sangrado a ancho completo de las bandas `sat-visita`, * `sat-sectores` y `sat-garantia` (la de `sat-casos` se fue a * silo.css con su fondo, que es lo que le da sentido); * · tratamiento propio de síntomas, visita, equipos, clima/precios, * garantía y cobertura ilustrada; * · las micro-interacciones de esos bloques. * * ANTES DE AÑADIR UNA REGLA AQUÍ, comprueba si la plantilla de ciudad emite * ese mismo marcado. Si lo emite, la regla es de silo.css: este archivo NO se * encola en las ~311 páginas de ciudad y una regla escrita aquí para marcado * compartido simplemente no llega. Es el error que costó reconstruir el hero * (ver template-parts/portada.php) y el que se corrigió el 19-ago-2026. * * REFERENCIA. El ritmo visual replica el de la plantilla de provincia del * sitio hermano: hero + insignias solapadas, rótulo de categoría sobre cada * H2, bandas alternas, tarjetas de paso, banda oscura de confianza, FAQ * desplegable y revelado al hacer scroll. * * QUÉ RESTRICCIONES SIGUEN VIGENTES Y CUÁLES NO (decisión del propietario, * 18-ago-2026). Se levantan las tres prohibiciones heredadas de la auditoría * del CSS de placas —`nth-child` posicional, rótulo en `::before{content}` y * anchos fijos— y pasan a ser criterio, no veto. Se usan, pero solo donde no * pueden mentir: * * · `nth-child` SOLO para escalonar animaciones. Un retardo distinto por * posición es decorativo y da igual cuántos elementos haya; lo que sigue * estando prohibido es que la IDENTIDAD de un bloque dependa de su * posición (la banda media rota entre cuatro órdenes, O1-O4: un selector * posicional que decida colores o iconos se rompe en tres de los cuatro). * · Los RÓTULOS de categoría existen, pero no se hornean en `content:`. * Los inyecta assets/js/silo.js como `` real, por CLASE DE * ROL, con `aria-hidden` y saltándose el rótulo cuando repetiría lo que * ya dice el `

` — ver la nota larga de esa función. Un `::before` * con texto se cuela en el nombre accesible del encabezado que decora, y * eso es exactamente lo que le pasa a la referencia. * · Los anchos siguen siendo `auto-fit`/`minmax` porque ahí la regla no * era una restricción, era la solución correcta: el recuento real de * síntomas, servicios y casos cambia de una provincia a otra. * * REGLA VERIFICABLE (Paso 6), ESTA SÍ INTOCABLE: cero valor hexadecimal, * cero `font-family` y cero `font-size` en este archivo — todo pasa por * tokens.css. Es la razón de que el rótulo se inyecte con la clase de * utilidad `.sat-text-sm` en vez de declarar aquí su tamaño. Las mezclas * translúcidas se hacen con `color-mix()` sobre un token, nunca con un * literal `rgba()` con números de color propios. */ /* ═══════════════════════════════════════════════════════════════════════ 2. BANDAS SANGRADAS A ANCHO DE VENTANA REGRESIÓN REPUESTA (18-ago-2026, medida en la página de Albacete). Al mover el hero de este archivo a global.css se arrastró el bloque entero de sangrado y solo se repuso la parte de `.sat-portada`. Resultado medido en render a 1440px: la banda de `.sat-visita` empezaba en x=146 y medía 1148 —el ancho de la columna de texto— en vez de llegar a los bordes, que es lo que el propietario describió como «la banda de color cortada por los lados». POR QUÉ VIVE AQUÍ Y NO EN global.css. El sangrado sin fondo no dibuja nada: solo estira de borde a borde el filete divisorio de `.sat-cuerpo section[class^="sat-"]`. Y el FONDO de estas tres bandas lo pone este archivo, bajo `.sat-silo-provincias`. Generalizar el sangrado a global.css le daría a 400 páginas de ciudad una raya divisoria a ancho de ventana y ningún fondo. YA SON TRES Y NO CUATRO (19-ago-2026). `sat-casos` se fue a silo.css, y su sangrado con ella: el criterio es el mismo de siempre —sangrado y fondo viajan juntos— y el fondo de `sat-casos` ahora lo pone la capa compartida porque la ciudad también emite ese rol. `sat-visita`, `sat-sectores` y `sat-garantia` se quedan porque la ciudad no los emite. La nota que había aquí —«una ciudad nunca carga provincias.css, así que su `.sat-casos` no tiene banda que sangrar»— describía el problema, no una decisión: era exactamente lo que había que arreglar. 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. CORREGIDO 18-ago-2026. La fórmula anterior sumaba `var(--sat-space-3)` y usaba ese mismo valor como mínimo, porque `.sat-cuerpo` era entonces una caja con `padding-inline: var(--sat-space-3)`. Al migrar a la rejilla con calles `--sat-gutter` ese término dejó de corresponder a nada y las bandas quedaron desalineadas respecto al resto de secciones. Medido en Almería antes de corregir: a 1024px el texto de la banda empezaba en x=16 y el de las demás secciones en x=40 (24px de desfase), a 1440px en x=56 contra x=64, y a 1905px en x=288,5 contra x=272,5. Con la fórmula nueva coinciden exactamente en los cuatro anchos medidos. 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. 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—. QUIEN AÑADA UNA BANDA NUEVA la añade a esta lista y hereda las dos cosas a la vez, el sangrado y el ritmo. Una sección `sat-*` que NO esté aquí no tiene fondo, luego no es una banda, luego le corresponde el ritmo normal de la base: el defecto correcto sale solo. 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-provincias .sat-cuerpo section.sat-visita, .sat-silo-provincias .sat-cuerpo section.sat-sectores, .sat-silo-provincias .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; } /* `.sat-visita ol` 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. */ /* ═══════════════════════════════════════════════════════════════════════ 3. RÓTULO DE CATEGORÍA — SOLO LOS AJUSTES DE PROVINCIA LA BASE SE MUDÓ A silo.css (19-ago-2026): el filete bicolor, las versales y el `::before` viven ahí porque el `` lo inyecta assets/js/silo.js, que ahora corre también en la ciudad. Con la regla aquí, las ~311 ciudades recibían el rótulo y lo pintaban como texto suelto encima del titular. También se fue `.sat-casos > .sat-rotulo`, porque la ciudad emite ese rol. Aquí queda solo lo que depende de un bloque que la ciudad NO emite. ═══════════════════════════════════════════════════════════════════════ */ /* Sobre la banda oscura de confianza se invierte: la píldora clara no tiene contraste suficiente contra el fondo de marca. */ .sat-silo-provincias .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-provincias .sat-garantia > .sat-rotulo::before { background: linear-gradient( to right, var(--sat-color-bg) 0 45%, var(--sat-color-cta) 45% 100% ); } /* ═══════════════════════════════════════════════════════════════════════ 4. BLOQUES DE CONTENIDO, POR ROL ═══════════════════════════════════════════════════════════════════════ */ /* ── sat-sintomas: tríada síntoma → causa → comprobación ──────────────── La rejilla y la tarjeta ya vienen de global.css; aquí solo se le da a cada tarjeta un filete lateral de marca y respuesta al puntero, que es lo que la separa visualmente del mismo bloque en una página de ciudad. */ .sat-silo-provincias .sat-sintomas li { border-inline-start: 3px solid var(--sat-color-brand-light); transition: transform 0.25s ease, box-shadow 0.25s ease; } .sat-silo-provincias .sat-sintomas li:hover { transform: translateY(-3px); box-shadow: var(--sat-shadow-card); } /* NEUTRALIZADOR PROPIO, y hace falta desde el 19-ago-2026. La consulta `prefers-reduced-motion` que anulaba este `transform` se mudó a silo.css junto con el resto del revelado. silo.css se encola ANTES que este archivo y el selector allí, `:is(.sat-silo-provincias, .sat-silo-ciudades) .sat-sintomas li:hover`, pesa exactamente lo mismo que el de arriba (0,3,1) — luego perdería por orden. Lo que es de provincia se neutraliza en provincia. */ @media (prefers-reduced-motion: reduce) { .sat-silo-provincias .sat-sintomas li:hover { transform: none; } } /* La tarjeta de síntomas YA NO lleva filete lateral (18-ago-2026, decisión del propietario): con el icono en celeste dentro, el filete era un segundo acento del mismo color a dos centímetros del primero. La forma `
  • ` de arriba sí lo conserva — ahí no hay icono que haga de ancla. */ /* ── El icono de avería ────────────────────────────────────────────── Lo inyecta assets/js/silo.js como SVG en línea (ver la nota de `crearIcono()`). Aquí solo se le da la caja: un cuadrado redondeado con el trazo en celeste sobre un velo del mismo celeste, el mismo recurso que usa `.sat-servicios-icono` en global.css invertido — allí el trazo va en negativo sobre marca sólida porque es un icono de cabecera y solo hay uno; aquí se repiten cinco a ocho en rejilla y esa mancha de color sólido competiría con los encabezados. */ .sat-silo-provincias .sat-sintoma-icono { display: inline-flex; align-items: center; justify-content: center; /* Medidas fijas y `flex: 0 0 auto`: la tarjeta es un contenedor flex en columna, así que sin ancho propio el icono se estiraría a todo lo ancho y su fondo se convertiría en una banda. */ width: 2.75rem; height: 2.75rem; flex: 0 0 auto; align-self: start; border-radius: var(--sat-radius); background: color-mix(in srgb, var(--sat-color-brand-light) 12%, transparent); color: var(--sat-color-brand-light); transition: background-color 0.25s ease; } .sat-silo-provincias .sat-sintoma-icono svg { display: block; width: 1.5rem; height: 1.5rem; } /* El velo se densifica al pasar el puntero por la TARJETA, no por el icono: el objetivo de la interacción es la avería entera, no el pictograma. */ .sat-silo-provincias .sat-tarjeta:hover .sat-sintoma-icono { background: color-mix(in srgb, var(--sat-color-brand-light) 22%, transparent); } /* ── sat-servicios: mapa de servicios en tarjetas ─────────────────────── `.sat-tarjetas` / `.sat-tarjeta` SE MUDARON A silo.css (19-ago-2026). Las construye assets/js/silo.js a partir de los pares `

    ` + `

    ` que emite el contenido, y la ciudad también trae `sat-servicios`: con las reglas aquí, sus tarjetas salían sin caja, sin borde y sin rejilla. Se fueron ADEMÁS por acoplamiento: las reglas de escalonado del revelado referencian `.sat-tarjeta:nth-child(n)`. Tarjeta y animación de la tarjeta tienen que poder leerse en el mismo archivo. Lo que sí es de provincia y se queda: el icono de avería que va DENTRO de la tarjeta de `sat-sintomas` (arriba). */ /* ── sat-visita: los pasos de la intervención ─────────────────────────── Tratamiento del bloque equivalente de la referencia (18-ago-2026): sección centrada, tarjetas en fila, y en cada una un cuadro de color con el pictograma arriba. Los iconos los inyecta `initPasos()` en silo.js. EL NÚMERO SE QUEDA, y no es redundante con el icono: en un proceso el ORDEN es información. Pasa de insignia protagonista a marca discreta en la esquina, y lo sigue pintando el contador nativo de la lista, así que añadir, quitar o reordenar pasos no obliga a tocar el CSS. Rejilla `auto-fit`: 4 pasos hoy, 3 o 6 mañana, sin tocar nada. */ .sat-silo-provincias .sat-visita { /* FOTO DE PARED BAJO UN VELO DEGRADADO (18-ago-2026, petición del propietario). 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 contraste, a semitransparente a la derecha, donde la pared puede verse. Así la imagen aporta textura sin competir nunca con lo que se lee. RUTA RELATIVA, no absoluta: `../../../../uploads/…` sale de esta hoja hasta wp-content sin escribir el dominio. Con una URL absoluta, el CSS dejaría de funcionar en una copia de pruebas o si cambia el dominio. */ 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; text-align: center; } .sat-silo-provincias .sat-visita > * { text-align: start; } .sat-silo-provincias .sat-visita > h2, .sat-silo-provincias .sat-visita > p, .sat-silo-provincias .sat-visita > .sat-rotulo { text-align: center; } /* El rótulo con su filete se centra como bloque, no como texto. */ .sat-silo-provincias .sat-visita > .sat-rotulo { margin-inline: auto; } .sat-silo-provincias .sat-visita ol { list-style: none; padding-left: 0; margin-top: var(--sat-space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--sat-space-4); } .sat-silo-provincias .sat-visita ol li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sat-space-2); padding: var(--sat-space-5) var(--sat-space-4) var(--sat-space-4); background: var(--sat-color-bg); border: 1px solid var(--sat-color-border); border-radius: var(--sat-radius); box-shadow: var(--sat-shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* El cuadro de color con el pictograma, arriba y centrado. Fondo de marca y trazo en negativo: es el único elemento sólido de la banda y por eso marca el ritmo de lectura de izquierda a derecha. */ .sat-silo-provincias .sat-paso-icono { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: var(--sat-radius); /* Trazo en celeste institucional sobre un velo del mismo color, el mismo tratamiento que los iconos de avería y del catálogo de equipos. Antes era un bloque sólido de marca con el trazo en negativo; en celeste la banda respira y el icono deja de competir con el titular. */ background: color-mix(in srgb, var(--sat-color-brand-light) 14%, transparent); color: var(--sat-color-brand-light); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease; } .sat-silo-provincias .sat-paso-icono svg { width: 1.75rem; height: 1.75rem; display: block; } /* SIN NÚMERO (18-ago-2026, decisión del propietario). El contador propio se retiró entero —también su `counter-reset`/`counter-increment`— en vez de ocultarlo con `display: none`: una regla que incrementa algo que nadie pinta es deuda que el siguiente tiene que descifrar. El orden del proceso lo sigue diciendo el propio `

      `, que es donde debe vivir. */ .sat-silo-provincias .sat-visita ol li strong { color: var(--sat-color-brand-dark); display: block; } .sat-silo-provincias .sat-visita ol li:hover, .sat-silo-provincias .sat-visita ol li:focus-within { transform: translateY(-5px); border-color: var(--sat-color-brand-light); box-shadow: 0 0.875rem 2rem color-mix(in srgb, var(--sat-color-brand-dark) 14%, transparent); } /* El icono responde al puntero sobre la TARJETA, no sobre sí mismo: el objetivo de la interacción es el paso entero. */ .sat-silo-provincias .sat-visita ol li:hover .sat-paso-icono { transform: scale(1.08) rotate(-6deg); background: color-mix(in srgb, var(--sat-color-brand-light) 24%, transparent); } /* `:focus-within` ENTRA AQUÍ el 19-ago-2026, por el mismo motivo que el neutralizador de `sat-sintomas`: lo cubría la consulta general que se mudó a silo.css, y esa hoja se carga antes. El paso también se levanta al recibir el foco un enlace de dentro; quien pide menos movimiento tampoco debe recibirlo al tabular. */ @media (prefers-reduced-motion: reduce) { .sat-silo-provincias .sat-visita ol li, .sat-silo-provincias .sat-paso-icono { transition: none; } .sat-silo-provincias .sat-visita ol li:hover, .sat-silo-provincias .sat-visita ol li:focus-within, .sat-silo-provincias .sat-visita ol li:hover .sat-paso-icono { transform: none; } } /* ── sat-cobertura: geografía, vecinas y ciudades hijas ───────────────── `sat-cobertura-media` la inserta template-provincias.php moviendo al principio de la sección el `` suelto del contenido. Es DECORATIVA (`aria-hidden`), así que se limita en altura y se recorta: sin regla propia entraba a tamaño natural y empujaba el texto de cobertura fuera de la primera pantalla. */ .sat-silo-provincias .sat-cobertura-media { margin-bottom: var(--sat-space-4); position: relative; border-radius: var(--sat-radius); overflow: hidden; } .sat-silo-provincias .sat-cobertura-media img { display: block; width: 100%; height: auto; max-height: 18rem; object-fit: cover; } /* Velo de marca sobre la foto: la unifica con la paleta cuando la imagen destacada de cada provincia viene de un banco distinto. */ .sat-silo-provincias .sat-cobertura-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 45%, color-mix(in srgb, var(--sat-color-brand-dark) 55%, transparent) 100% ); } /* El segundo `

      ` de la sección («Zonas de cobertura en…») encabeza la lista de ciudades hijas que inyecta el filtro `the_content`. */ .sat-silo-provincias .sat-cobertura .sat-ciudades { margin-top: var(--sat-space-3); } /* ── sat-equipos / sat-sectores: pestañas ─────────────────────────────── Las construye global.js; global.css las estiliza. Aquí solo se le da al panel una superficie propia para que el bloque no se lea como texto suelto bajo una barra de botones, y se saca de la banda el cierre `data-sat-fuera-tabs` (la lista de marcas que SIEMPRE queda visible). */ /* PANEL TRANSPARENTE (19-ago-2026, decisión del propietario): sin fondo, sin borde y sin radio. El bloque ya vive dentro de una sección con su propia imagen de fondo, y una caja blanca encima la tapaba justo donde asoma. Se conserva solo el relleno lateral, que es lo que mantiene el texto alineado con el resto del contenido en vez de pegarse al borde. */ .sat-silo-provincias .sat-equipos .tab-panel, .sat-silo-provincias .sat-sectores .tab-panel { padding: var(--sat-space-4) 0; background: none; border: 0; border-radius: 0; } .sat-silo-provincias .sat-sectores { /* 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); /* BANDA. */ grid-column: full; display: grid; grid-template-columns: subgrid; background: var(--sat-color-bg-alt); } .sat-silo-provincias .sat-sectores > * { grid-column: content; } /* El último párrafo del panel arrastra su margen inferior por debajo del texto y lo suma al relleno del panel: dos veces el mismo blanco. */ .sat-silo-provincias .sat-equipos .tab-panel > :last-child, .sat-silo-provincias .sat-sectores .tab-panel > :last-child { margin-bottom: 0; } .sat-silo-provincias .sat-equipos [data-sat-fuera-tabs] { margin-top: var(--sat-space-4); } /* El CATÁLOGO cierra la MISMA composición que las pestañas. La navegación conserva su taxonomía propia: visualmente se integra, pero no se fuerza una correspondencia falsa entre familia editorial y URL —son 4-6 familias contra 12-18 páginas de equipo, relación 1 a N—. */ /* Sin caja (19-ago-2026, decisión del propietario): el catálogo ya no se presenta como un panel dentro de la sección. Cada enlace tiene su propio recuadro, así que una caja alrededor de todos ellos era una caja dentro de otra — y además tapaba la imagen de fondo de la sección. */ .sat-silo-provincias .sat-equipos-complementos { padding: var(--sat-space-4) 0 0; border: 0; background: none; } .sat-silo-provincias .sat-equipos-complementos > :first-child { margin-top: 0; } .sat-silo-provincias .sat-equipos-complementos > :last-child { margin-bottom: 0; } /* EL HUECO MUERTO ESTABA AQUÍ (18-ago-2026, medido en Almería a 1440 y 500). Lo que entra en el panel es un `
      ` completo, así que la regla base de global.css —`.sat-cuerpo section[class^="sat-"]`— le daba el relleno vertical de una SECCIÓN DE PÁGINA ENTERA, `--sat-space-seccion` (73,6 px a 1440), arriba y abajo, más su filete divisorio. Dentro de un panel de 24 px de relleno eso son ~147 px de vacío por bloque: el «vacío de varias líneas» entre la frase de entrada y el encabezado del catálogo, y el segundo hueco antes del cierre. El panel impone su propio ritmo, que es de panel y no de sección. Va por selector de atributo, no por nombre, para que cualquier bloque de navegación que entre mañana herede el arreglo. */ .sat-silo-provincias .sat-equipos-complementos > section[class^="sat-"] { padding-block: 0; border-bottom: 0; } .sat-silo-provincias .sat-equipos-complementos h3 { margin-top: 0; margin-bottom: var(--sat-space-3); } /* CATÁLOGO, NO NUBE DE ETIQUETAS. Las columnas venían de `auto-fit` con `1fr` —que ya reparte a partes iguales— pero NUNCA llegaban a aplicarse: dentro de `.sat-equipos`, la regla de etiquetas en línea `.sat-equipos ul` (0,1,2) gana a `.sat-nav-tipos-equipo-list` (0,1,0) y dejaba la lista en `display:flex` con `flex-wrap`, de modo que cada enlace medía lo que medía su texto y la rejilla declarada quedaba inerte. De ahí las cinco filas de anchos irregulares. Se repone `display:grid` explícitamente y se neutraliza la etiqueta del `
    1. `, que duplicaba el recuadro del enlace que lleva dentro. Los DOCE enlaces siguen ahí: es enlazado interno real y no se recorta ninguno; lo que cambia es que se leen como una rejilla de fichas de igual ancho y no como una nube. */ .sat-silo-provincias .sat-equipos-complementos .sat-nav-tipos-equipo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sat-space-2); margin: 0; padding: 0; list-style: none; } .sat-silo-provincias .sat-equipos-complementos .sat-nav-tipos-equipo-list li { display: flex; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } /* La ficha ocupa la celda entera: con dos y con tres líneas de texto la fila queda cuadrada, que es lo que distingue un catálogo de una nube. */ .sat-silo-provincias .sat-equipos-complementos .sat-nav-tipos-equipo-list a { display: flex; flex: 1; align-items: center; padding: var(--sat-space-3); background: var(--sat-color-bg); } @media (max-width: 42rem) { .sat-silo-provincias .sat-equipos .tab-panel, .sat-silo-provincias .sat-equipos-complementos { padding: var(--sat-space-3); } } /* ── sat-nav-marcas: banda de logotipos, SECCIÓN PROPIA ───────────────── Fabricante y tipo de equipo son ejes ortogonales. La banda vuelve a ser hermana de `sat-equipos` y no un tercer piso dentro de su panel: recupera el ritmo vertical de sección que ya tenía resuelto y deja de encajar un componente a ancho de sección dentro de una caja con borde. La frase multimarca viaja con ella porque es de marcas de lo que habla. `.sat-nav-intro` SE MUDÓ A silo.css (19-ago-2026): la banda de marcas la imprime `sataire_render_silo_nav()`, que la plantilla de ciudad también llama, así que la frase de entrada llegaba sin su color atenuado. */ /* ── clima + precio: las DOS TARJETAS GEMELAS de la referencia ────────── Tratamiento `content-7` / `content-8` de la plantilla de provincia de placas: dos tarjetas lado a lado, de IGUAL ALTURA, cada una con su sombra y su relleno, una a cada lado del eje central. EL ENVOLTORIO NO ES UNA SUPERFICIE, ES LA REJILLA. En la referencia el igualado de altura lo da la rejilla de `entry-content` y las tarjetas van directamente sobre el papel de la página. Aquí hace falta un `
      ` porque `.sat-cuerpo` es una rejilla de una sola columna de contenido y los dos `
      ` tienen que compartir fila, pero ese `
      ` no pinta nada: sin fondo, sin borde y sin relleno. La versión anterior le daba superficie tintada propia y el resultado era tarjeta dentro de tarjeta —tres bordes concéntricos alrededor del mismo texto—, que es lo que no convencía. COLUMNAS IGUALES. `1.08fr / 0.92fr` desequilibraba el eje central sin ningún criterio de contenido detrás: la referencia parte en dos mitades y aquí también. El PHP agrupa por clase, nunca por posición, porque O1-O4 rotan el orden. */ .sat-silo-provincias .sat-contexto-operativo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sat-space-4); margin-block: var(--sat-space-seccion); } /* Corpus antiguo o salida parcial: una sola tarjeta no se estira a doble ancho como si faltara visualmente su pareja. */ .sat-silo-provincias .sat-contexto-operativo--unico { grid-template-columns: minmax(0, 1fr); } .sat-silo-provincias .sat-contexto-operativo--unico > section { width: min(100%, var(--sat-max-width-narrow)); justify-self: center; } /* La tarjeta es SOMBRA, no borde: es lo que hace la referencia y evita el doble filete cuando dos tarjetas quedan pegadas. `flex` en columna existe por el descargo de precios de más abajo, que se ancla al pie. ESPECIFICIDAD. Hay que ganarle a `.sat-cuerpo section[class^="sat-"]:is( .sat-alcance, .sat-temporada)` de global.css, que vale (0,3,1) y le pone a `sat-temporada` —y SOLO a ella— un relleno propio. Sin esto las dos gemelas salen con rellenos distintos: la de clima con 2,5 rem por los cuatro lados y la de precios con el de aquí. Medido en render. Por eso el selector incluye `.sat-cuerpo` y el atributo, y llega a (0,4,1). */ .sat-silo-provincias .sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: var(--sat-space-5) var(--sat-space-4); border: 0; border-bottom: 0; border-radius: var(--sat-radius); background: var(--sat-color-bg); box-shadow: var(--sat-shadow-card); } /* NINGUNA DE LAS DOS LLEVA FILETE DE COLOR ARRIBA, y es deliberado: quien distingue los dos roles es el rótulo en píldora que pone silo.js —«Clima y estacionalidad» / «Precios orientativos»—, que además lo dice con palabras. La referencia tampoco lo lleva: sus dos tarjetas se diferencian por el contenido, no por un adorno en el canto. Un filete de 4 px encima de una tarjeta sin borde se lee como un resto, no como una decisión. */ /* El rótulo es una píldora, no una banda: como hijo de un contenedor flex en columna se estiraría a todo el ancho de la tarjeta. */ .sat-silo-provincias .sat-contexto-operativo > section > .sat-rotulo { align-self: start; } .sat-silo-provincias .sat-contexto-operativo h2 { margin-top: 0; } .sat-silo-provincias .sat-contexto-operativo > section > :last-child { margin-bottom: 0; } .sat-silo-provincias .sat-temporada strong { color: var(--sat-color-brand-dark); } /* La tabla sigue siendo scrollable desde global.css. Se destaca la cifra y se baja el tono del descargo: informa, pero no compite con el rango. */ .sat-silo-provincias .sat-precios strong { color: var(--sat-color-brand); } /* La tabla NO lleva sombra ni radio propios: global.css la hace `display: block` para poder desplazarla en horizontal, y un bloque de ancho completo con celdas más estrechas dibuja la sombra como un panel vacío a la derecha de la tabla. Comprobado en render. */ /* El descargo es siempre el último párrafo del bloque; `:last-of-type` es una relación estructural real, no una posición inventada de una lista cerrada. `margin-top: auto` lo ANCLA AL PIE de la tarjeta. Dos tarjetas de igual altura con textos de distinta longitud dejan sobrante en la más corta; con el descargo abajo, ese sobrante queda entre el argumento y la letra pequeña, que es donde un blanco significa algo, en vez de amontonado debajo del último párrafo. Sin la rejilla (una sola columna, móvil) el `auto` no tiene sobrante que repartir y no hace nada. */ .sat-silo-provincias .sat-precios > p:last-of-type { margin-top: auto; padding-top: var(--sat-space-3); color: var(--sat-color-text-secondary); border-top: 1px solid var(--sat-color-border); } @media (max-width: 48rem) { .sat-silo-provincias .sat-contexto-operativo { grid-template-columns: 1fr; gap: var(--sat-space-3); } .sat-silo-provincias .sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] { padding: var(--sat-space-4) var(--sat-space-3); } } /* ── sat-garantia: banda oscura de confianza ──────────────────────────── El único bloque de la página sobre fondo de marca. Es deliberado: el contraste marca dónde están los compromisos por escrito. Los tokens de texto se invierten explícitamente porque tokens.css fija el color de h1-h3 y p a nivel global. */ .sat-silo-provincias .sat-garantia { /* 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); /* BANDA. */ 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-provincias .sat-garantia > * { grid-column: content; } .sat-silo-provincias .sat-garantia h2, .sat-silo-provincias .sat-garantia h3 { color: var(--sat-color-bg); } .sat-silo-provincias .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 `` 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. */ .sat-silo-provincias .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-provincias .sat-garantia a { color: var(--sat-color-brand-light); } .sat-silo-provincias .sat-garantia > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sat-space-3); list-style: none; margin: var(--sat-space-4) 0 0; padding: 0; } .sat-silo-provincias .sat-garantia > ul > li { position: relative; overflow: hidden; background: color-mix(in srgb, var(--sat-color-bg) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sat-color-bg) 18%, transparent); border-radius: var(--sat-radius); padding: var(--sat-space-4); color: color-mix(in srgb, var(--sat-color-bg) 86%, transparent); box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--sat-color-brand-dark) 18%, transparent); transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .sat-silo-provincias .sat-garantia > ul > li.sat-garantia-item--mejorado { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sat-space-3); } .sat-silo-provincias .sat-garantia > ul > li::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--sat-space-1); background: var(--sat-color-brand-light); } .sat-silo-provincias .sat-garantia > ul > li:hover, .sat-silo-provincias .sat-garantia > ul > li:focus-within { transform: translateY(-0.1875rem); border-color: color-mix(in srgb, var(--sat-color-brand-light) 62%, transparent); background: color-mix(in srgb, var(--sat-color-bg) 12%, transparent); } .sat-silo-provincias .sat-garantia-item--mejorado > .sat-garantia-icono { display: inline-grid; place-items: center; width: var(--sat-space-6); height: var(--sat-space-6); border-radius: 50%; color: var(--sat-color-bg); background: color-mix(in srgb, var(--sat-color-brand-light) 24%, transparent); border: 1px solid color-mix(in srgb, var(--sat-color-brand-light) 48%, transparent); } .sat-silo-provincias .sat-garantia-item--mejorado > .sat-garantia-icono svg { width: var(--sat-space-4); height: var(--sat-space-4); } .sat-silo-provincias .sat-garantia-item--mejorado > .sat-garantia-texto { min-width: 0; } /* ── sat-casos: tarjetas de caso tipo ─────────────────────────────────── TODO SE MUDÓ A silo.css (19-ago-2026): banda de fondo, tarjeta, respuesta al puntero, burbuja con piquito y centrado cuando hay tres casos. La plantilla de ciudad emite `sat-casos` en sus ~311 páginas y las servía con la tarjeta pelada de global.css. La rejilla `auto-fit` y la tarjeta base siguen en global.css, que es donde les corresponde: `sat-casos` lo emiten además marcas y servicios. */ /* ── sat-faq ──────────────────────────────────────────────────────────── Las reglas del acordeón (`details`, `summary`, el indicador `+`) VIVÍAN AQUÍ, ancladas a `.sat-silo-provincias`. Por eso las 311 páginas de ciudad —que cargan core.css y global.css, nunca esta hoja— servían la FAQ con el triángulo por defecto del navegador y sin ningún estilo. Se han subido a global.css como CAPA BASE, sin anclar a silo. Aquí quedaban duplicadas y el indicador acababa pintándose desde dos hojas a la vez: el resultado era correcto, pero era una regla con dos padres. Lo que SÍ es de provincia —las dos columnas y la tarjeta de condiciones— también está en global.css, anclado a `.sat-silo-provincias`: esta hoja se encola por PLANTILLA y aquel marcado se inyecta por TÉRMINO de taxonomía, así que separarlos permitiría que llegara el marcado sin sus estilos. */ /* ── sat-alcance, sat-nav-* y TODO EL REVELADO AL HACER SCROLL ────────── SE MUDARON A silo.css (19-ago-2026). Concretamente: · `.sat-alcance { border-top }` — la ciudad cierra con el mismo bloque. · `[class^="sat-nav-"] h2` en color secundario — los tres bloques de navegación transversal los imprime `sataire_render_silo_nav()`, a la que llaman las dos plantillas. · los tres `@keyframes`, el bloque `@supports (animation-timeline: view())`, `.sat-por-revelar` / `.sat-revelado`, el escalonado con `nth-child` y la consulta `prefers-reduced-motion` que lo neutraliza. EL REVELADO VIAJA ENTERO Y NO A TROZOS. Su lista de objetivos mezcla roles de las dos plantillas (`.sat-tarjeta` y `.sat-casos > div` son de las dos; `.sat-visita ol li` y `.sat-contexto-operativo` solo de aquí). Un selector que no casa nada es un no-op y no cuesta nada; partir la lista habría duplicado los fotogramas y el bloque `@supports`, con la garantía de que algún día los tramos de escalonado dejarían de coincidir. OJO CON LA CONSULTA `prefers-reduced-motion`: al mudarse, dejó de cubrir los `:hover` que siguen definidos EN ESTE ARCHIVO —silo.css se encola antes y los selectores pesan lo mismo—. Por eso `sat-sintomas` y `sat-visita` tienen ahora su propio neutralizador junto a sus reglas. */ /* ═══════════════════════════════════════════════════════════════════════ 6. MÓVIL El grueso del layout es `auto-fit`/`minmax`, así que las columnas caen solas sin consultas de medios. Aquí solo lo que la rejilla no resuelve. ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 48rem) { /* ── sat-visita en una columna: CARRIL VERTICAL ────────────────────── En vertical, la vía dentro de cada tarjeta ya no conecta nada: los tramos quedan uno debajo de otro y vuelven a leerse como cajas sueltas, que es justo lo que el rediseño evita. Así que en móvil la guía sale de la tarjeta y pasa a ser UN SOLO carril continuo a la izquierda, con las insignias ensartadas en él. El carril es un pseudoelemento del `
        `, no del `
      1. `: así mide exactamente lo que mide la lista, sin depender del recuento ni obligar a tapar un tramo sobrante en el último paso. Se degrada a transparente en los dos extremos para que no asome por encima de la primera insignia ni por debajo de la última, y va del celeste al naranja de arriba abajo —el mismo «esto avanza» que en escritorio dice la punta de cada vía. */ .sat-silo-provincias .sat-visita ol { /* UNA COLUMNA, DECLARADA AQUÍ Y NO DADA POR SUPUESTA. El carril solo tiene sentido con los pasos en vertical, y `auto-fit`/`minmax(15rem)` todavía da DOS columnas hasta unos 528px de ventana —medido: a 640, 700 y 768px caían 2×2—. Dejarlo al azar ponía las insignias de la columna derecha flotando en el canalón, lejos del carril. Que la misma consulta que dibuja el carril fije la columna es lo que impide que las dos cosas se contradigan si mañana cambia el `minmax`. */ grid-template-columns: 1fr; padding-inline-start: calc( var(--sat-paso-insignia) + var(--sat-space-3) ); } .sat-silo-provincias .sat-visita ol::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc( var(--sat-paso-insignia) / 2 - var(--sat-paso-grosor) / 2 ); width: var(--sat-paso-grosor); border-radius: var(--sat-paso-grosor); background: linear-gradient( 180deg, transparent 0, color-mix(in srgb, var(--sat-color-brand-light) 45%, transparent) var(--sat-space-6), color-mix(in srgb, var(--sat-color-cta) 60%, transparent) calc(100% - var(--sat-space-6)), transparent 100% ); } /* La tarjeta recupera su relleno normal: la insignia ya no vive dentro. */ .sat-silo-provincias .sat-visita ol li { padding-top: var(--sat-space-4); } .sat-silo-provincias .sat-visita ol li::before { top: var(--sat-space-4); inset-inline-start: calc( -1 * (var(--sat-paso-insignia) + var(--sat-space-3)) ); /* El anillo interior toma el color de la BANDA, no el de la tarjeta: fuera de ella, lo que hay detrás de la insignia es el carril sobre `--sat-color-bg-alt`, y es ese trozo el que hay que ocultar. */ box-shadow: 0 0 0 0.3125rem var(--sat-color-bg-alt), 0 0 0 0.4375rem color-mix(in srgb, var(--sat-color-brand-light) 38%, transparent); } .sat-silo-provincias .sat-visita ol li:hover::before, .sat-silo-provincias .sat-visita ol li:focus-within::before { box-shadow: 0 0 0 0.3125rem var(--sat-color-bg-alt), 0 0 0 0.5625rem color-mix(in srgb, var(--sat-color-brand-light) 55%, transparent); } .sat-silo-provincias .sat-visita ol li::after { display: none; } } /* ── Icono del catálogo de equipos ───────────────────────────────────── La caja del `
      2. ` que junta icono y texto (`display:flex` + `gap`) SE MUDÓ A silo.css (19-ago-2026). Ya venía generalizada con `:is(.sat-silo-provincias, .sat-silo-ciudades)`, pero estaba INERTE en ciudad: generalizar un selector no sirve de nada si el archivo en que vive no se encola en esa plantilla. Ese fue precisamente el aviso de que hacía falta una capa compartida y no un selector más ancho. */ /* `.sat-equipo-icono` SE MUDO A global.css (19-ago-2026). Lo emite `sataire_render_silo_nav()`, que es compartida: cualquier plantilla que pinte `sat-nav-tipos-equipo` recibe los SVG. Con la regla viviendo aqui, las ~311 ciudades publicadas los servian a 157x157 px —medido en Berriozar— porque un SVG en linea sin width/height y sin CSS toma el ancho de su celda. La regla del tamano de un icono tiene que vivir donde vive quien lo emite, no en la hoja de un silo. */ /* ── sat-casos: burbuja de mensaje ───────────────────────────────────── SE MUDÓ A silo.css (19-ago-2026) junto con la banda y el hover: el piquito de dos triángulos superpuestos, la sombra con `filter: drop-shadow` y el centrado del conjunto cuando hay tres casos en una rejilla de cuatro. La explicación larga de por qué son DOS triángulos y no uno, y de por qué la sombra no puede ser `box-shadow`, está allí con las reglas. */ /* ── Selector de sector (sat-nav-sectores) ───────────────────────────── SE MUDÓ ENTERO A silo.css (19-ago-2026): `.sat-nav-sectores-list`, el prefijo atenuado `.sat-sector-pre`, `.sat-sector-icono`, el hub `.sat-sectores-hub` y su consulta `prefers-reduced-motion`. NO CONFUNDIR con `.sat-sectores`, la SECCIÓN redactada de negocios, que sigue más arriba en este archivo: esa es de provincia. Lo que viaja es la LISTA de navegación transversal, que imprime `sataire_render_silo_nav()` —ver `sataire_html_sectores()` en functions.php— también en ciudad. */ /* ── Lista de `sat-servicios-texto` con visto verde ──────────────────── (19-ago-2026, petición del propietario.) La `