/** * core.css — páginas hub/institucionales sin silo de ranking propio * (Paso 5): cobertura, marcas, ciudades, nosotros/contacto. Comparten el * mismo patrón de portada + cuerpo simple que provincias/servicios, así * que reutilizan .sat-cuerpo/.sat-portada de global.css; aquí solo lo que * es propio de estas cuatro plantillas. * * REGLA VERIFICABLE (Paso 6): cero valor hexadecimal ni declaracion de tipografia propia — todo pasa por tokens.css. */ .sat-portada--hub { /* BANDA (hereda `grid-column: full` de .sat-portada; se declara igual porque la regla que pinta el fondo tiene que decir lo que es). */ grid-column: full; background: var(--sat-color-brand-dark); } .sat-portada--hub .sat-portada-texto h1, .sat-portada--hub .sat-portada-texto p { color: var(--sat-color-bg); } /* ═══════════════════════════════════════════════════════════════════════ HUB DE COBERTURA: EL INDICE ALFABETICO DE LAS 52 PROVINCIAS (19-ago-2026) Sustituye a `.content-cobertura-hub` / `.cobertura-provincias-list`, que se retiran enteras. Aquellas dos clases las emitia UN SOLO bloque de template-cobertura.php —comprobado con `rg` sobre todo el tema antes de borrarlas: ningun otro archivo las nombra—, y ese bloque ya no existe. El marcado nuevo lo compone `sataire_core_render_indice_provincias()` en inc/silo-core.php, donde esta el porque de que el indice sea uno y no dos. EL NOMBRE LLEVA PREFIJO `sat-` y las clases viejas no lo llevaban: son anteriores a la migracion al esquema `sat-{rol}` del 12-ago-2026 y se quedaron sin migrar porque no las tocaba nadie. Al regenerar el marcado se migran, que es cuando sale gratis. ══ DE DONDE SALE CADA TRATAMIENTO ══ Las dos reglas de la lista son COPIA DELIBERADA de `.sat-ciudades-list, .sat-nav-servicios-list, .sat-nav-tipos-equipo-list, .sat-nav-sectores-list` (assets/css/global.css, ~L1400-1429). Esa hoja SI se encola en estas paginas, pero su selector enumera clases una por una y no alcanza a una clase nueva. Se copia en vez de anadir la clase alli porque global.css es de otro grupo y esta semana se escribe en paralelo. `.sat-indice-grupo` es COPIA DELIBERADA de `.sat-catalogo-grupo` (assets/css/silo.css, seccion 7). Esa hoja NO se encola aqui —solo la reciben provincias, ciudades y marcas—, asi que sin copiarla la letra saldria como un parrafo cualquiera. ══ LA UNICA DESVIACION: `auto-fill` DONDE EL ORIGINAL PONE `auto-fit` ══ No es un descuido. Con `auto-fit` los tramos vacios COLAPSAN y el `1fr` reparte el ancho sobrante entre los elementos que hay: un grupo de una sola provincia —«Islas Baleares», «Jaen», «Navarra», «Ourense», cuatro de los dieciseis grupos de hoy— se estiraria en un recuadro de 1312 px de ancho, con una palabra dentro y a la altura de un titular. `auto-fill` conserva los tramos vacios, asi que ese grupo ocupa UN tramo y los dieciseis grupos alinean sus columnas entre si, que es lo que hace legible un indice: la segunda entrada de la «A» esta justo encima de la segunda de la «B». El original acierta con `auto-fit` en su sitio porque sus listas son de 5 a 16 elementos y nunca de uno. ═══════════════════════════════════════════════════════════════════════ */ .sat-silo-core .sat-indice-provincias-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--sat-space-2); } .sat-silo-core .sat-indice-provincias-list a { display: block; padding: var(--sat-space-2); border: 1px solid var(--sat-color-border); border-radius: var(--sat-radius); text-decoration: none; color: var(--sat-color-text); } .sat-silo-core .sat-indice-provincias-list a:hover, .sat-silo-core .sat-indice-provincias-list a:focus { border-color: var(--sat-color-brand); color: var(--sat-color-brand); } /* La letra de grupo. Es una etiqueta de eje, no un encabezado —el porque, en la funcion que la imprime—, asi que se distingue por peso y versales y no por cuerpo de letra: el tamano vive solo en tokens.css (Paso 6). */ .sat-silo-core .sat-indice-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; } .sat-silo-core .sat-indice-grupo:first-of-type { margin-top: var(--sat-space-3); } /* ── Ciudad: mapa embebido junto a la copia ───────────────────────────── */ .sat-cobertura.has-city-map { display: grid; gap: var(--sat-space-3); } @media (min-width: 48rem) { .sat-cobertura.has-city-map { grid-template-columns: 1fr 1fr; align-items: start; } } .city-map-embed { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--sat-radius); } /* ═══════════════════════════════════════════════════════════════════════ NOSOTROS / CONTACTO — EL ENVOLTORIO TIENE QUE DEJAR PASAR LA REJILLA (19-ago-2026) ══ LO QUE HABIA, Y ESTABA ROTO ══ Aqui vivia `.nosotros-page { display: block }` con un comentario que describia el fallo —«DESACTIVABA la rejilla de anchos de .sat-cuerpo y dejaba la pagina sin columna de contenido»— pero dejaba la declaracion puesta. El comentario contaba el diagnostico y el codigo seguia siendo la enfermedad. MEDIDO el 19-ago-2026 con navegador sin cabeza a 1440 px sobre /sobre-nosotros/ en produccion, geometria real de cada seccion: .entry-content.sat-cuerpo x=0 w=1440 (display: grid) .nosotros-page x=0 w=1440 (display: block) ← el fallo section.sat-quienes x=0 w=1440 section.sat-metodo x=0 w=1440 section.sat-garantia x=0 w=1440 section.sat-cobertura x=0 w=1440 section.sat-alcance x=0 w=1440 section.sat-faq x=0 w=1440 Las seis secciones a x=0 y ancho de ventana completo: el texto pegado a los dos bordes de la pantalla, sin un pixel de margen. La misma medida sobre /cobertura/ y /contacto/ —que NO llevan envoltorio y cuelgan directamente de la rejilla— da x=64 w=1312, que es la columna de contenido correcta. ══ POR QUE PASABA ══ global.css:87-96 declara `.sat-cuerpo > .nosotros-page { grid-column: full; grid-template-columns: subgrid }` justamente para que este `
` deje pasar las lineas de la rejilla del padre, y su comentario lo dice con todas las letras: «El envoltorio tiene que dejar pasar las lineas, no cortarlas — que es exactamente para lo que existe subgrid». Pero `subgrid` es un valor de `grid-template-columns`, y solo hace algo si el elemento ES un contenedor de rejilla. Con `display: block` la declaracion quedaba inerte: el envoltorio se estiraba a `full` —eso si funciona, es una propiedad de item— y sus hijos se maquetaban en flujo normal a 1440 px, sin ninguna columna. La regla de global.css llevaba puesta desde el 18-ago-2026 y no pintaba nada. ══ POR QUE HACEN FALTA LAS TRES REGLAS Y NO SOLO `display: grid` ══ `.sat-cuerpo > *` (global.css:49) mete a todo hijo directo en la columna `content`, y NO alcanza a los hijos del envoltorio: su padre es `.nosotros-page`, no `.sat-cuerpo`. Sin un reparto propio, con `subgrid` activo los hijos se autocolocarian en el PRIMER tramo heredado, que es el margen izquierdo. De ahi la segunda regla. Y la tercera es obligatoria, no un remate: las reglas que declaran `grid-column: full` en global.css valen (0,1,0) y mi `> *` vale (0,2,0), asi que le gana y las encajonaria en la columna de contenido — que es LA MISMA regresion que global.css:71-86 documenta haber medido ya una vez («la portada se quedaba encajonada, medido: x=273 w=1360 en vez de 0/1905»). Se les devuelve `full` con la especificidad suficiente. ══ LA LISTA DE LA TERCERA REGLA NO SE ADIVINO, SE BUSCO ══ Son TODOS los componentes que declaran `grid-column: full` en las hojas que estas paginas cargan (global.css, tokens.css y esta), localizados con `rg` el 19-ago-2026: `.sat-portada`, su variante `--hub`, `.sat-banda-cta` y `.sat-banda-hechos`. Se nombran los cuatro aunque hoy el envoltorio solo contenga dos —portada y banda de cierre—: los otros dos los puede inyectar un filtro de functions.php sin que esta hoja se entere, y una banda que pierde su ancho se ve rota, no se ve distinta. `.sat-banda-cta` ES EL CASO QUE CASI SE ESCAPA y conviene dejarlo escrito. Antes de este arreglo su `grid-column: full` y su `grid-template-columns: subgrid` estaban INERTES —el envoltorio era `display: block`, asi que no habia rejilla de la que ser item— y la banda salia a 1440 px por flujo normal, con su fondo tenido, por casualidad. Al convertir el envoltorio en rejilla, esas dos declaraciones despiertan: sin esta tercera regla la banda se habria encogido a la columna de contenido y el arreglo de un fallo habria causado otro. QUIEN ANADA UN HIJO A ESTE ENVOLTORIO que deba ir a ancho de ventana lo anade a la tercera regla. El panel de dudas y las secciones del corpus van a columna de contenido, igual que en las otras dos paginas del silo. ══ Y ALGUIEN LO ANADIO (20-ago-2026): `.sat-trato-oscura` ══ La banda oscura de la seccion TRATAMIENTOS de aqui abajo sangra con `grid-column: full` + `subgrid`, como la de marca. Sin nombrarla en la tercera regla, el `> *` de la segunda —que vale (0,2,0) contra los (0,2,0) de su propia declaracion, y va antes en el archivo— la habria encajonado en la columna de contenido y la banda se habria quedado en una caja de color en medio de la pagina. Se anade aqui, que es donde este comentario dijo que se anadia. ═══════════════════════════════════════════════════════════════════════ */ .sat-silo-core .nosotros-page { display: grid; } .sat-silo-core .nosotros-page > * { grid-column: content; } .sat-silo-core .nosotros-page > :is(.sat-portada, .sat-portada--hub, .sat-banda-cta, .sat-banda-hechos, .sat-trato-oscura) { grid-column: full; } /* ═══════════════════════════════════════════════════════════════════════ TRATAMIENTOS DE BLOQUE EN /sobre-nosotros/ Y /condiciones-del-servicio/ (20-ago-2026, peticion del propietario, puntos 5 y 6 del encargo) ══ QUE ES ESTO ══ Los mismos cuatro aspectos del silo de MARCAS que servicios.css §15 reparte por el silo informacional, repartidos aqui entre las secciones de estas dos paginas por ORDEN DE APARICION y saltando `sat-faq`. Quien recibe que lo decide `sataire_core_tratar_secciones()` en inc/silo-core.php; aqui solo esta el aspecto. `sat-trato-foto` dos columnas, foto vertical a la derecha `sat-trato-banda` banda sangrada con fondo y foto de pared `sat-trato-oscura` banda oscura de confianza `sat-trato-lista` lista de comprobacion con visto verde ══ ES LA TERCERA COPIA DEL MISMO BLOQUE, Y HAY QUE DECIR POR QUE ══ Los originales estan en marcas.css (secciones 1, 2, 4 y 5) y la segunda copia en servicios.css §15. Las tres hojas son de slugs distintos y ninguna se encola en las otras dos: marcas.css solo la reciben las 17 paginas de template-marcas.php, servicios.css las 71 de servicios e informacional, y esta las de cobertura, ciudades y nosotros/contacto. La salida que evitaria la copia —promover las reglas a global.css— esta fuera del alcance de este encargo, y ademas la cabecera de marcas.css ya documenta por que promover `sat-garantia` romperia el `prefers-reduced-motion` de las 52 provincias publicadas. ⚠️ QUIEN CORRIJA UNA DE ESTAS REGLAS TIENE QUE MIRAR TRES SITIOS: aqui, assets/css/servicios.css §15 y assets/css/marcas.css. ══ EL ANCLAJE, QUE AQUI IMPORTA MAS QUE EN NINGUNA OTRA HOJA ══ Esta hoja la cargan TRES plantillas y una de ellas sirve a las 311 paginas de CIUDAD. Todo lo de aqui abajo cuelga de `.sat-silo-core` —que la ciudad no lleva: su termino de taxonomia le da `sat-silo-ciudades`— y ademas de la clase `sat-trato-*`, que solo pone PHP en dos paginas concretas. Dos cinturones independientes: ni con el anclaje borrado un selector de aqui alcanzaria una ciudad, porque la clase no existe en su marcado. LAS REGLAS `.sat-cobertura.has-city-map` Y `.city-map-embed` DE MAS ARRIBA NO SE TOCAN. Son lo unico que sostiene el mapa embebido de esas 311 paginas. ══ NINGUNA DE ESTAS CUATRO REGLAS DECLARA MOVIMIENTO ══ Ni una transicion ni un desplazamiento al pasar el puntero, a diferencia de §15.5 de servicios.css —que si lo tiene y por eso lleva su propia consulta `prefers-reduced-motion`—. Aqui no hace falta consulta. QUIEN AÑADA MOVIMIENTO tiene que escribirla, y al final de esta seccion: una consulta neutraliza con la misma especificidad que los `:hover` que anula, asi que entre reglas de igual peso decide el orden. ══ REGLA VERIFICABLE (Paso 6), INTOCABLE: cero valor hexadecimal, cero familia tipografica y cero tamano tipografico en este archivo, comentarios incluidos. Las mezclas translucidas se hacen con `color-mix()` sobre un token. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. sat-trato-foto — DOS COLUMNAS CON FOTO VERTICAL ─────────────────── El marcado —el envoltorio `.sat-trato-texto` y la ``— lo pone `sataire_trato_foto_dos_columnas()`. LA SECCION TIENE EXACTAMENTE DOS HIJOS, texto envuelto y foto, que es la condicion sin la que esta rejilla no funciona: con el `

` y cada `

` sueltos, cada uno caeria en su propia celda y los parrafos acabarian separados por el `gap` en vez de por su interlineado. `align-items: start` y no `stretch`: la foto tiene proporcion propia y no debe estirarse hasta la altura del texto. */ .sat-silo-core .sat-trato-foto { display: grid; gap: var(--sat-space-5); align-items: start; } /* 62rem: el mismo punto de ruptura que usan el original de marcas.css y la copia de servicios.css. Un segundo punto distinto para el mismo gesto haria que la pagina se recompusiera dos veces al estrecharla. */ @media (min-width: 62rem) { .sat-silo-core .sat-trato-foto { /* La foto es VERTICAL (572x1024). Una columna de 22rem la deja en unos 630 px de alto, que es la altura a la que este bloque suele quedar. Con `minmax(0, …)` en las dos, una cadena larga no puede empujar la rejilla. */ grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--sat-space-6); } } .sat-silo-core .sat-trato-texto > *:first-child { margin-top: 0; } .sat-silo-core .sat-trato-texto > p { max-width: var(--sat-measure); } /* OCULTA POR DEBAJO DEL PUNTO DE RUPTURA, Y ES UNA DECISION, no un olvido —la misma que ya esta escrita en marcas.css—. 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, y la foto es decorativa: ese peaje no compra ninguna informacion. `display: none` Y `loading="lazy"` VAN JUNTOS: el atributo lo pone PHP y es lo que evita la descarga. Un elemento sin caja nunca entra en el viewport. */ .sat-silo-core .sat-trato-imagen { display: none; } @media (min-width: 62rem) { .sat-silo-core .sat-trato-imagen { display: block; width: 100%; /* Techo de altura: con un bloque de texto corto, la foto a proporcion natural sobresaldria por debajo de la seccion. `cover` recorta por el centro en lugar de deformar. */ max-height: 38rem; object-fit: cover; object-position: center; border-radius: var(--sat-radius); } } /* ── 2. sat-trato-banda — BANDA SANGRADA A ANCHO DE VENTANA ─────────────── SANGRADO Y FONDO VIAJAN JUNTOS, SIEMPRE, y por eso estan en la misma regla: sangrar una seccion sin fondo no dibuja nada, solo estira de borde a borde el filete divisorio de `.sat-cuerpo section[class^="sat-"]`. 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)`— leida desde dentro de una banda que sangra a ancho de ventana. Es la misma formula que marcas.css, silo.css, provincias.css y servicios.css: si un dia cambia la rejilla, cambian todas a la vez. FUNCIONA DENTRO DE `.nosotros-page` porque ese envoltorio es `subgrid` de `.sat-cuerpo` (global.css) y por tanto ocupa el ancho completo: el margen negativo se calcula contra el ancho de la SECCION, que es el mismo que tendria colgando directamente de la rejilla. ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1) y se llevaria el `border-bottom: 0`. RUTA RELATIVA A LA HOJA, no absoluta: `../../../../uploads/…` sube cuatro niveles desde `wp-content/themes/{tema}/assets/css/` hasta `wp-content/`. Este archivo vive en el mismo directorio que marcas.css, asi que la cuenta de niveles es identica. EL VELO VA EN LA MISMA PROPIEDAD QUE LA FOTO y por encima de ella —en CSS la primera capa es la de arriba—, asi que no hace falta pseudo-elemento. Va de opaco a la izquierda, donde cae el texto y hay que garantizar el contraste, a semitransparente a la derecha. Funciona ademas porque `body[class*="sat-silo-"] #page.grid-container` lleva `overflow-x: clip` en global.css: sin eso, 100vw abriria scroll lateral. */ .sat-silo-core .sat-cuerpo section.sat-trato-banda { margin-inline: calc(50% - 50vw); padding-inline: max( var(--sat-gutter), calc(50vw - var(--sat-max-width-content) / 2) ); /* 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 aqui el canto del color es un limite duro. */ padding-block: var(--sat-space-seccion-banda); border-bottom: 0; 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 pagina. La banda cambia el fondo, no la reticula. */ .sat-silo-core .sat-trato-banda > p { max-width: var(--sat-measure); } /* ── 3. sat-trato-oscura — BANDA OSCURA DE CONFIANZA ────────────────────── SANGRA CON `grid-column: full` Y SUBGRID, no con el margen negativo de la regla anterior. No son dos formas de hacer lo mismo por capricho: `.sat-cuerpo` declara las lineas `full` y `content`, asi que una seccion que se declara `full` y reparte a sus hijos con `subgrid` queda alineada con la columna de contenido SIN calcular nada. Se copia la forma del original para que las bandas oscuras del sitio sigan siendo la misma. LA CLASE ESTA ADEMAS EN LA TERCERA REGLA DE `.nosotros-page`, mas arriba, y sin eso nada de esto se ve. Leer el porque alli. LOS TOKENS DE TEXTO SE INVIERTEN EXPLICITAMENTE porque tokens.css fija el color de los encabezados y del parrafo a nivel global. SIN LAS REGLAS `> ul` del original: ninguna de las dos secciones que reciben este tratamiento emite esa lista, y copiar reglas que no pueden casar nada es lo que convierte una hoja en un cajon. */ .sat-silo-core .sat-trato-oscura { 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-core .sat-trato-oscura > * { grid-column: content; } .sat-silo-core .sat-trato-oscura h2, .sat-silo-core .sat-trato-oscura h3 { color: var(--sat-color-bg); } .sat-silo-core .sat-trato-oscura 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 garantia por escrito, y el mantenimiento…»— y el relleno lateral de la pastilla abria un hueco antes del signo de puntuacion. */ .sat-silo-core .sat-trato-oscura 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-core .sat-trato-oscura a { color: var(--sat-color-brand-light); } /* ── 4. sat-trato-lista — LISTA DE COMPROBACION CON VISTO VERDE ─────────── Esa lista enumera lo que SI entra, asi que el visto es el marcador que le corresponde y el verde es `--sat-color-success`, el token que el tema reserva para confirmacion. SIN RECUADRO Y A UNA SOLA COLUMNA, igual que el original: una tarjeta clara dentro de una seccion que ya es un bloque es un marco dentro de otro marco. EL VISTO ES UNA MASCARA, no un caracter 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 mascara el SVG solo aporta la silueta y el color sale del token — que es ademas la unica manera de teñirlo sin escribir un valor de color dentro del dibujo, que la regla verificable prohibe. ⚠️ HOY NO PINTA NADA EN NINGUNA DE LAS DOS PAGINAS, Y ESO ES CORRECTO. El selector ancla en `> ul`, y MEDIDO el 20-ago-2026 sobre el HTML servido, ni `sat-precios` de /condiciones-del-servicio/ ni `sat-cobertura` de /sobre-nosotros/ —las dos secciones que caen en cuarta posicion— traen una sola lista: son encabezado y prosa. La clase se pone igual porque el encargo la pide y porque el dia que el corpus escriba esa lista se compone sola. Es un no-op limpio, exactamente como `sat-cobertura` falta en 6 de las 16 marcas sin que su selector sea un error. Queda dicho aqui para que nadie lo lea como una regla rota. */ .sat-silo-core .sat-trato-lista > 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-core .sat-trato-lista > ul > li { display: flex; align-items: baseline; gap: var(--sat-space-3); margin: 0; color: var(--sat-color-text-secondary); } .sat-silo-core .sat-trato-lista > ul > li::before { content: ""; flex: 0 0 auto; width: 1.125rem; height: 1.125rem; /* El visto se alinea con la primera linea base del texto, no con la caja: `align-items: baseline` coloca la caja del pseudo-elemento y este empujon 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-core .sat-trato-lista > ul > li strong { color: var(--sat-color-brand-dark); }