` de cada bloque. El `` lo inyecta
`initRotulos()` de assets/js/silo.js a partir del mapa `ROTULOS`; el script lo
encola esta pagina desde hoy.
══ QUE RECIBE CADA SECCION DE LA PORTADA, COMPROBADO UNA POR UNA ══
La guarda de `initRotulos()` no imprime el rotulo si su texto ya esta
contenido en el `` que decora, normalizando antes tildes, mayusculas y
signos. Contrastado contra los H2 REALES servidos hoy con `?nc=`:
sat-servicios «¿Que necesitas?» -> «Que hacemos» SI
sat-sintomas «¿Que le pasa a tu equipo?» -> «Diagnostico» SI
sat-equipos «¿Que equipo tienes instalado?» -> «Tipos de equipo» SI
sat-negocios «Para negocios e instalaciones…» -> «Negocios» NO, se autodescarta
sat-precios «Cuanto cuesta» -> «Precios orientativos» SI
sat-cobertura «Donde trabajamos» -> «Donde llegamos» SI
sat-garantia «Doce años reparando climatizacion» -> «Confianza» SI
sat-faq «Preguntas frecuentes» -> «Preguntas frecuentes» NO, se autodescarta
sat-alcance «Que entra y que no» -> «Alcance del servicio» SI
Los dos que se autodescartan lo hacen porque su rotulo ya esta dicho en el
encabezado, que es exactamente para lo que existe la guarda. Ninguno de los
siete que si salen dice nada que el bloque no sea: se ha leido el contenido
de los siete antes de dar esto por bueno.
`sat-banda-hechos` no esta en el mapa y no recibe rotulo, que es lo correcto:
es un componente de plantilla, no un bloque de rol redactado.
NO SE DECLARA AQUI EL TAMAÑO DEL TEXTO: se lo da `.sat-text-sm` de tokens.css,
que el propio script añade al ``. Es la unica forma de tener un rotulo
pequeño sin abrir un segundo origen de la escala tipografica, que es lo que
prohibe la regla verificable del Paso 6.
NO SE COPIA `.sat-casos > .sat-rotulo { grid-column: 1 / -1 }`, que en las
otras hojas evita que el rotulo se coma una columna de la rejilla de casos.
La portada no emite `sat-casos`: una regla que no puede casar nada es lo que
convierte una hoja en un cajon. */
.home .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;
}
.home .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%
);
}
/* ══════════════════════════════════════════════════════════════════════════
4. sat-sintomas — TARJETA DE AVERIA CON PICTOGRAMA (20-ago-2026)
══════════════════════════════════════════════════════════════════════════
══ EL ENCARGO NOMBRABA servicios.css §14, Y ESE NO ES EL TRATAMIENTO QUE
LE CORRESPONDE A ESTE MARCADO ══
§14.2 estiliza `.sat-tarjetas` / `.sat-tarjeta`, es decir, la forma en la que
los silos de equipo e informacional escriben este bloque: pares `` + `
`
que `initTarjetas()` agrupa. La portada NO usa esa forma. Medido hoy contra
el HTML servido, su `sat-sintomas` es un `
`, dos parrafos y una `` de
seis `- `, cada uno abierto por un `` enlazado. Sobre ese marcado
`initTarjetas()` no encuentra un solo `
` hijo directo y no hace nada.
EL TRATAMIENTO CORRECTO ES EL DE servicios.css §6, que es el de esta MISMA
forma de lista, y es el que se copia. La diferencia no es academica: aplicar
§14.2 aqui habria escrito una rejilla de tarjetas que ningun elemento de esta
pagina lleva, y el bloque se habria quedado exactamente igual que antes.
══ LO QUE YA ESTABA Y NO SE TOCA ══
La rejilla y la caja de cada averia vienen de global.css (`.sat-sintomas ul`
con `auto-fit` de 16rem, `.sat-sintomas li` con fondo alterno, radio y
relleno, `.sat-sintomas li strong` en azul de marca), y esta pagina ya las
recibia. Lo que le faltaba era el PICTOGRAMA —que lo pone `initSintomasLista()`
de silo.js, disponible aqui desde hoy— y la respuesta al puntero.
POR QUE MERECE LA PENA EN ESTE BLOQUE Y NO EN OTROS: es la unica seccion de
la pagina que se lee EN DIAGONAL —quien llega buscando su averia barre la
rejilla hasta reconocerla— y seis bloques de texto identico no ofrecen ningun
punto de anclaje para ese barrido.
══ LO QUE NO SE COPIA DE §6, Y POR QUE ══
Aquella seccion devuelve a lista normal la SEGUNDA `` del bloque —las
tres comprobaciones caseras con las que reparacion y urgencias cierran su
`sat-sintomas`—. La portada tiene UNA sola `` en esta seccion, contada
sobre el HTML servido. `:first-of-type` se conserva igual, porque es la misma
condicion que aplica `initSintomasLista()` y las dos tienen que seguir
diciendo lo mismo si mañana el corpus añade esa segunda lista. */
.home .sat-sintomas > ul:first-of-type > li {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: translateY(-3px);
box-shadow: var(--sat-shadow-card);
}
/* La clase la añade `initSintomasLista()` DESPUES de haber creado las dos
celdas. Sin JavaScript el `- ` conserva su flujo de bloque normal y se lee
igual de bien: el icono es una mejora, no la estructura. */
.home .sat-sintoma-item--mejorado {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--sat-space-3);
}
.home .sat-sintoma-texto {
min-width: 0;
}
/* El cuadrado redondeado con el trazo en celeste sobre un velo del mismo
celeste — el mismo recurso que el icono de paso y que la tarjeta de averia de
provincia. Medidas fijas y `flex: 0 0 auto` porque la celda de la rejilla es
de ancho automatico: sin ancho propio el fondo se convertiria en una banda.
La translucidez se hace con `color-mix()` sobre el token, nunca con un
literal de color propio. */
.home .sat-sintoma-icono {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
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;
}
.home .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 interaccion es la averia entera, no el pictograma. */
.home .sat-sintomas > ul:first-of-type > li:hover .sat-sintoma-icono {
background: color-mix(in srgb, var(--sat-color-brand-light) 22%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
5. sat-contexto-operativo — PRECIO Y COBERTURA, DOS TARJETAS GEMELAS
══════════════════════════════════════════════════════════════════════════
El marcado lo compone `sataire_componer_contexto_operativo()`, la MISMA
funcion que ya llaman `template-provincias.php` y `template-servicios.php`:
el PHP no se duplica. El CSS si, y es la decision de siempre en este tema —
ver la cabecera de este archivo.
══ QUE PAREJA SE COMPONE AQUI, Y POR QUE NO ES LA DE SIEMPRE ══
En provincia y en servicio la pareja es `sat-temporada` + `sat-precios`. La
portada NO emite `sat-temporada`: sus dos bloques de contexto son el precio y
la cobertura, que ademas llegan seguidos en el documento. Por eso la llamada
de `template-home.php` pasa sus propios roles; la clase del envoltorio es la
misma porque el componente es el mismo.
POR ESO TAMPOCO SE COPIA `.sat-contexto-operativo .sat-temporada strong`: en
esta pagina no hay ninguna `sat-temporada` que pintar.
══ ESPECIFICIDAD, QUE ES LA MITAD DE ESTE BLOQUE ══
La tarjeta tiene que ganarle a `.sat-cuerpo section[class^="sat-"]` de
global.css (0,2,1), que le pone a las dos secciones el relleno de seccion y
el filete inferior. Con `.home` + `.sat-cuerpo` + `.sat-contexto-operativo` +
`section[class^="sat-"]` el selector vale (0,4,1) — la misma forma exacta que
usa servicios.css §11, que ya tuvo que ganarle ademas a otras dos. Se
conserva la forma en vez de bajarla al minimo que hoy bastaria: el dia que
alguien añada una regla a global.css para uno de estos dos roles, esta seguira
ganando.
NO SE COPIA `.sat-precios > p:last-of-type`, la regla que en provincia baja el
descargo legal al pie de la tarjeta en gris y con un filete encima. Alli es
correcta porque el descargo SIEMPRE es el ultimo parrafo; en la portada NO lo
es: sus cuatro parrafos de `sat-precios` terminan en un enlace a la pagina de
precios, y el descargo es el tercero. La regla habria teñido de gris y
rematado con letra pequeña el enlace de salida del bloque. Es el mismo motivo
por el que servicios.css tampoco la copio.
Este bloque no declara ni `:hover` ni `transition`, asi que NO necesita
consulta `prefers-reduced-motion` propia. */
.home .sat-contexto-operativo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sat-space-4);
margin-block: var(--sat-space-seccion);
}
/* Una sola tarjeta no se estira a doble ancho como si faltara visualmente su
pareja. Hoy la portada emite los dos roles y esta rama no se toma; existe
para el dia que el corpus deje de emitir uno. */
.home .sat-contexto-operativo--unico {
grid-template-columns: minmax(0, 1fr);
}
.home .sat-contexto-operativo--unico > section {
width: min(100%, var(--sat-max-width-narrow));
justify-self: center;
}
/* La tarjeta es SOMBRA, no borde: evita el doble filete cuando las dos quedan
pegadas. */
.home .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);
}
/* El rotulo es una pildora, no una banda: como hijo de un contenedor flex en
columna se estiraria a todo el ancho de la tarjeta. */
.home .sat-contexto-operativo > section > .sat-rotulo {
align-self: start;
}
.home .sat-contexto-operativo h2 {
margin-top: 0;
}
.home .sat-contexto-operativo > section > :last-child {
margin-bottom: 0;
}
.home .sat-contexto-operativo .sat-precios strong {
color: var(--sat-color-brand);
}
@media (max-width: 48rem) {
.home .sat-contexto-operativo {
grid-template-columns: 1fr;
gap: var(--sat-space-3);
}
.home .sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] {
padding: var(--sat-space-4) var(--sat-space-3);
}
}
/* ══════════════════════════════════════════════════════════════════════════
6. sat-garantia — BANDA OSCURA DE CONFIANZA (20-ago-2026)
══════════════════════════════════════════════════════════════════════════
Es el unico bloque de esta pagina sobre fondo de marca, y eso es justo lo que
hace: marcar donde estan los compromisos por escrito. Los tokens de texto se
invierten explicitamente porque tokens.css fija el color de los encabezados y
del parrafo a nivel global.
══ SANGRADO Y FONDO VIAJAN JUNTOS, SIEMPRE ══
Sangrar una seccion sin fondo no dibuja nada: solo estira de borde a borde el
filete divisorio de `.sat-cuerpo section[class^="sat-"]`. Por eso las dos
declaraciones estan aqui y no repartidas.
La formula del relleno lateral reproduce la columna `content` de la rejilla de
`.sat-cuerpo` leida desde dentro de una banda que sangra a ancho de ventana.
Si cambia la rejilla, cambian todas las bandas del tema a la vez o dejan de
alinearse con el resto de secciones.
══ MEDIDO ANTES DE COPIARLO ══
Las dos mecanicas —el margen negativo de aqui y el `grid-column: full` +
`subgrid` de abajo— conviven en provincias.css y en servicios.css, y a
primera vista parecen sumar dos sangrados. No lo hacen. Comprobado el
20-ago-2026 con Chrome sin interfaz a 1440px sobre una provincia publicada:
la banda mide 1440px de ancho empezando en x=-7, y su `
` cae en x=64 —
exactamente el mismo x que el `` de `sat-faq`, que es una seccion normal
en la columna de contenido. El texto queda alineado; la banda, a ancho de
ventana. Por eso se copian las dos y no una.
Funciona porque `body[class*="sat-silo-"] #page.grid-container` lleva
`overflow-x: clip` en global.css — y la portada entra en ese selector: su
`` lleva `sat-silo-core`. Sin eso, 100vw abriria scroll lateral.
ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que
ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1).
══ LO QUE NO SE COPIA ══
El bloque `> ul` de servicios.css §8 —la rejilla de compromisos con su icono,
que alli sirve a una sola pagina—. El `sat-garantia` de la portada son un
`` y tres parrafos, sin una sola lista: `initGarantias()` de silo.js
tampoco encuentra nada. Se copia lo que puede casar algo, y solo eso.
Este bloque no declara ni `:hover` ni `transition`: una garantia no lleva a
ninguna parte, asi que el movimiento invitaria a pulsar algo que no se puede
pulsar. Y como no se declara ningun movimiento, no necesita consulta
`prefers-reduced-motion` propia. */
.home .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;
}
.home .sat-garantia {
grid-column: full;
display: grid;
grid-template-columns: subgrid;
background:
linear-gradient(
150deg,
var(--sat-color-brand-dark) 0%,
color-mix(in srgb, var(--sat-color-brand) 70%, var(--sat-color-brand-dark)) 100%
);
}
.home .sat-garantia > * {
grid-column: content;
}
.home .sat-garantia h2,
.home .sat-garantia h3 {
color: var(--sat-color-bg);
}
.home .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: los cuatro `` de esta seccion caen dentro de la frase —«…con
garantia por escrito de 3 meses; las instalaciones, con…»— y el relleno
lateral de la pastilla abria un hueco antes del signo de puntuacion. */
.home .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);
}
/* Los tres enlaces de esta seccion —carne de gases fluorados y condiciones del
servicio— en celeste: el azul de marca sobre este fondo no se distinguiria
del texto. */
.home .sat-garantia a {
color: var(--sat-color-brand-light);
}
/* ── El rotulo de seccion, invertido sobre la banda ──────────────────────
OBLIGATORIO, no un remate. El punto 3 le da rotulo a `sat-garantia`
—«Confianza», que la guarda de `initRotulos()` no suprime sobre el H2 «Doce
años reparando climatizacion»— y ese rotulo es azul de marca: sobre este
fondo, azul oscuro, saldria azul sobre azul. Es el mismo par de reglas que
provincias.css, marcas.css y servicios.css tienen por la misma razon, y su
ausencia es el sintoma de haber separado la banda de su rotulo. */
.home .sat-garantia > .sat-rotulo {
background: none;
color: var(--sat-color-bg);
}
/* Sobre fondo de marca el tramo azul del filete desapareceria: se cambia por el
fondo claro, y el naranja se mantiene porque ahi si contrasta. */
.home .sat-garantia > .sat-rotulo::before {
background: linear-gradient(
to right,
var(--sat-color-bg) 0 45%,
var(--sat-color-cta) 45% 100%
);
}
/* ══════════════════════════════════════════════════════════════════════════
7. MOVIMIENTO REDUCIDO
══════════════════════════════════════════════════════════════════════════
Quien pide que el sistema no se mueva no deberia tener que verlo moverse. Se
enumeran los tres selectores con `transition` de esta hoja —la tarjeta de
servicio del punto 1.b, la tarjeta de averia del punto 4 y su pictograma— y
se neutralizan los dos desplazamientos que los `:hover` disparan.
VA EN ESTE ARCHIVO Y NO EN OTRO, y eso es lo importante: un bloque de
`prefers-reduced-motion` tiene que vivir en la MISMA hoja que los `:hover`
que neutraliza. Este tema ya pago dos veces por separarlos —ver la nota de
provincias.css y la cabecera de marcas.css—, y esta hoja se encola la ultima,
asi que aqui no hay nada que pueda pisarlo despues. */
@media (prefers-reduced-motion: reduce) {
.home .sat-tarjeta,
.home .sat-sintomas > ul:first-of-type > li,
.home .sat-sintoma-icono {
transition: none;
}
.home .sat-tarjeta:hover,
.home .sat-tarjeta:focus-within,
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
LA PIEZA MULTIMARCA DEL HERO (20-ago-2026)
Copia deliberada de `servicios.css` §16, que esta hoja no puede reutilizar
porque `servicios.css` no se encola en la portada. Se copia el ASPECTO, no
el mecanismo, y por eso la clase de silo cambia.
Neutraliza lo que `global.css` escribe para la imagen DESTACADA: márgenes
negativos que sangran hasta el borde, `align-self: stretch`, `overflow:
hidden` y un `![]()
` POSICIONADO EN ABSOLUTO con `object-fit: cover`. Eso
está bien para una foto de fondo y es lo contrario de lo que necesita una
pieza gráfica que se lee: sacar la imagen del flujo deja la caja en altura
cero y la recorta entera —medido el 20-ago-2026 en servicios: contenedor
515x0 con la imagen cargada dentro—.
═══════════════════════════════════════════════════════════════════════ */
.home .sat-portada-media--promo {
width: 100%;
margin: 0;
align-self: center;
justify-self: center;
height: auto;
min-height: 0;
overflow: visible;
}
.home .sat-portada-media--promo img {
position: static;
inset: auto;
width: 100%;
height: auto;
max-height: none;
object-fit: fill;
border-radius: 0;
}
@media (max-width: 61.99rem) {
.home .sat-portada-media--promo {
max-width: var(--sat-max-width-narrow);
margin-top: var(--sat-space-4);
}
}
` + `
` que `initTarjetas()` agrupa. La portada NO usa esa forma. Medido hoy contra el HTML servido, su `sat-sintomas` es un `
`, dos parrafos y una `` de
seis `- `, cada uno abierto por un `` enlazado. Sobre ese marcado
`initTarjetas()` no encuentra un solo `
` hijo directo y no hace nada.
EL TRATAMIENTO CORRECTO ES EL DE servicios.css §6, que es el de esta MISMA
forma de lista, y es el que se copia. La diferencia no es academica: aplicar
§14.2 aqui habria escrito una rejilla de tarjetas que ningun elemento de esta
pagina lleva, y el bloque se habria quedado exactamente igual que antes.
══ LO QUE YA ESTABA Y NO SE TOCA ══
La rejilla y la caja de cada averia vienen de global.css (`.sat-sintomas ul`
con `auto-fit` de 16rem, `.sat-sintomas li` con fondo alterno, radio y
relleno, `.sat-sintomas li strong` en azul de marca), y esta pagina ya las
recibia. Lo que le faltaba era el PICTOGRAMA —que lo pone `initSintomasLista()`
de silo.js, disponible aqui desde hoy— y la respuesta al puntero.
POR QUE MERECE LA PENA EN ESTE BLOQUE Y NO EN OTROS: es la unica seccion de
la pagina que se lee EN DIAGONAL —quien llega buscando su averia barre la
rejilla hasta reconocerla— y seis bloques de texto identico no ofrecen ningun
punto de anclaje para ese barrido.
══ LO QUE NO SE COPIA DE §6, Y POR QUE ══
Aquella seccion devuelve a lista normal la SEGUNDA `` del bloque —las
tres comprobaciones caseras con las que reparacion y urgencias cierran su
`sat-sintomas`—. La portada tiene UNA sola `` en esta seccion, contada
sobre el HTML servido. `:first-of-type` se conserva igual, porque es la misma
condicion que aplica `initSintomasLista()` y las dos tienen que seguir
diciendo lo mismo si mañana el corpus añade esa segunda lista. */
.home .sat-sintomas > ul:first-of-type > li {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: translateY(-3px);
box-shadow: var(--sat-shadow-card);
}
/* La clase la añade `initSintomasLista()` DESPUES de haber creado las dos
celdas. Sin JavaScript el `- ` conserva su flujo de bloque normal y se lee
igual de bien: el icono es una mejora, no la estructura. */
.home .sat-sintoma-item--mejorado {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--sat-space-3);
}
.home .sat-sintoma-texto {
min-width: 0;
}
/* El cuadrado redondeado con el trazo en celeste sobre un velo del mismo
celeste — el mismo recurso que el icono de paso y que la tarjeta de averia de
provincia. Medidas fijas y `flex: 0 0 auto` porque la celda de la rejilla es
de ancho automatico: sin ancho propio el fondo se convertiria en una banda.
La translucidez se hace con `color-mix()` sobre el token, nunca con un
literal de color propio. */
.home .sat-sintoma-icono {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
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;
}
.home .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 interaccion es la averia entera, no el pictograma. */
.home .sat-sintomas > ul:first-of-type > li:hover .sat-sintoma-icono {
background: color-mix(in srgb, var(--sat-color-brand-light) 22%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
5. sat-contexto-operativo — PRECIO Y COBERTURA, DOS TARJETAS GEMELAS
══════════════════════════════════════════════════════════════════════════
El marcado lo compone `sataire_componer_contexto_operativo()`, la MISMA
funcion que ya llaman `template-provincias.php` y `template-servicios.php`:
el PHP no se duplica. El CSS si, y es la decision de siempre en este tema —
ver la cabecera de este archivo.
══ QUE PAREJA SE COMPONE AQUI, Y POR QUE NO ES LA DE SIEMPRE ══
En provincia y en servicio la pareja es `sat-temporada` + `sat-precios`. La
portada NO emite `sat-temporada`: sus dos bloques de contexto son el precio y
la cobertura, que ademas llegan seguidos en el documento. Por eso la llamada
de `template-home.php` pasa sus propios roles; la clase del envoltorio es la
misma porque el componente es el mismo.
POR ESO TAMPOCO SE COPIA `.sat-contexto-operativo .sat-temporada strong`: en
esta pagina no hay ninguna `sat-temporada` que pintar.
══ ESPECIFICIDAD, QUE ES LA MITAD DE ESTE BLOQUE ══
La tarjeta tiene que ganarle a `.sat-cuerpo section[class^="sat-"]` de
global.css (0,2,1), que le pone a las dos secciones el relleno de seccion y
el filete inferior. Con `.home` + `.sat-cuerpo` + `.sat-contexto-operativo` +
`section[class^="sat-"]` el selector vale (0,4,1) — la misma forma exacta que
usa servicios.css §11, que ya tuvo que ganarle ademas a otras dos. Se
conserva la forma en vez de bajarla al minimo que hoy bastaria: el dia que
alguien añada una regla a global.css para uno de estos dos roles, esta seguira
ganando.
NO SE COPIA `.sat-precios > p:last-of-type`, la regla que en provincia baja el
descargo legal al pie de la tarjeta en gris y con un filete encima. Alli es
correcta porque el descargo SIEMPRE es el ultimo parrafo; en la portada NO lo
es: sus cuatro parrafos de `sat-precios` terminan en un enlace a la pagina de
precios, y el descargo es el tercero. La regla habria teñido de gris y
rematado con letra pequeña el enlace de salida del bloque. Es el mismo motivo
por el que servicios.css tampoco la copio.
Este bloque no declara ni `:hover` ni `transition`, asi que NO necesita
consulta `prefers-reduced-motion` propia. */
.home .sat-contexto-operativo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sat-space-4);
margin-block: var(--sat-space-seccion);
}
/* Una sola tarjeta no se estira a doble ancho como si faltara visualmente su
pareja. Hoy la portada emite los dos roles y esta rama no se toma; existe
para el dia que el corpus deje de emitir uno. */
.home .sat-contexto-operativo--unico {
grid-template-columns: minmax(0, 1fr);
}
.home .sat-contexto-operativo--unico > section {
width: min(100%, var(--sat-max-width-narrow));
justify-self: center;
}
/* La tarjeta es SOMBRA, no borde: evita el doble filete cuando las dos quedan
pegadas. */
.home .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);
}
/* El rotulo es una pildora, no una banda: como hijo de un contenedor flex en
columna se estiraria a todo el ancho de la tarjeta. */
.home .sat-contexto-operativo > section > .sat-rotulo {
align-self: start;
}
.home .sat-contexto-operativo h2 {
margin-top: 0;
}
.home .sat-contexto-operativo > section > :last-child {
margin-bottom: 0;
}
.home .sat-contexto-operativo .sat-precios strong {
color: var(--sat-color-brand);
}
@media (max-width: 48rem) {
.home .sat-contexto-operativo {
grid-template-columns: 1fr;
gap: var(--sat-space-3);
}
.home .sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] {
padding: var(--sat-space-4) var(--sat-space-3);
}
}
/* ══════════════════════════════════════════════════════════════════════════
6. sat-garantia — BANDA OSCURA DE CONFIANZA (20-ago-2026)
══════════════════════════════════════════════════════════════════════════
Es el unico bloque de esta pagina sobre fondo de marca, y eso es justo lo que
hace: marcar donde estan los compromisos por escrito. Los tokens de texto se
invierten explicitamente porque tokens.css fija el color de los encabezados y
del parrafo a nivel global.
══ SANGRADO Y FONDO VIAJAN JUNTOS, SIEMPRE ══
Sangrar una seccion sin fondo no dibuja nada: solo estira de borde a borde el
filete divisorio de `.sat-cuerpo section[class^="sat-"]`. Por eso las dos
declaraciones estan aqui y no repartidas.
La formula del relleno lateral reproduce la columna `content` de la rejilla de
`.sat-cuerpo` leida desde dentro de una banda que sangra a ancho de ventana.
Si cambia la rejilla, cambian todas las bandas del tema a la vez o dejan de
alinearse con el resto de secciones.
══ MEDIDO ANTES DE COPIARLO ══
Las dos mecanicas —el margen negativo de aqui y el `grid-column: full` +
`subgrid` de abajo— conviven en provincias.css y en servicios.css, y a
primera vista parecen sumar dos sangrados. No lo hacen. Comprobado el
20-ago-2026 con Chrome sin interfaz a 1440px sobre una provincia publicada:
la banda mide 1440px de ancho empezando en x=-7, y su `
` cae en x=64 —
exactamente el mismo x que el `` de `sat-faq`, que es una seccion normal
en la columna de contenido. El texto queda alineado; la banda, a ancho de
ventana. Por eso se copian las dos y no una.
Funciona porque `body[class*="sat-silo-"] #page.grid-container` lleva
`overflow-x: clip` en global.css — y la portada entra en ese selector: su
`` lleva `sat-silo-core`. Sin eso, 100vw abriria scroll lateral.
ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que
ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1).
══ LO QUE NO SE COPIA ══
El bloque `> ul` de servicios.css §8 —la rejilla de compromisos con su icono,
que alli sirve a una sola pagina—. El `sat-garantia` de la portada son un
`` y tres parrafos, sin una sola lista: `initGarantias()` de silo.js
tampoco encuentra nada. Se copia lo que puede casar algo, y solo eso.
Este bloque no declara ni `:hover` ni `transition`: una garantia no lleva a
ninguna parte, asi que el movimiento invitaria a pulsar algo que no se puede
pulsar. Y como no se declara ningun movimiento, no necesita consulta
`prefers-reduced-motion` propia. */
.home .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;
}
.home .sat-garantia {
grid-column: full;
display: grid;
grid-template-columns: subgrid;
background:
linear-gradient(
150deg,
var(--sat-color-brand-dark) 0%,
color-mix(in srgb, var(--sat-color-brand) 70%, var(--sat-color-brand-dark)) 100%
);
}
.home .sat-garantia > * {
grid-column: content;
}
.home .sat-garantia h2,
.home .sat-garantia h3 {
color: var(--sat-color-bg);
}
.home .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: los cuatro `` de esta seccion caen dentro de la frase —«…con
garantia por escrito de 3 meses; las instalaciones, con…»— y el relleno
lateral de la pastilla abria un hueco antes del signo de puntuacion. */
.home .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);
}
/* Los tres enlaces de esta seccion —carne de gases fluorados y condiciones del
servicio— en celeste: el azul de marca sobre este fondo no se distinguiria
del texto. */
.home .sat-garantia a {
color: var(--sat-color-brand-light);
}
/* ── El rotulo de seccion, invertido sobre la banda ──────────────────────
OBLIGATORIO, no un remate. El punto 3 le da rotulo a `sat-garantia`
—«Confianza», que la guarda de `initRotulos()` no suprime sobre el H2 «Doce
años reparando climatizacion»— y ese rotulo es azul de marca: sobre este
fondo, azul oscuro, saldria azul sobre azul. Es el mismo par de reglas que
provincias.css, marcas.css y servicios.css tienen por la misma razon, y su
ausencia es el sintoma de haber separado la banda de su rotulo. */
.home .sat-garantia > .sat-rotulo {
background: none;
color: var(--sat-color-bg);
}
/* Sobre fondo de marca el tramo azul del filete desapareceria: se cambia por el
fondo claro, y el naranja se mantiene porque ahi si contrasta. */
.home .sat-garantia > .sat-rotulo::before {
background: linear-gradient(
to right,
var(--sat-color-bg) 0 45%,
var(--sat-color-cta) 45% 100%
);
}
/* ══════════════════════════════════════════════════════════════════════════
7. MOVIMIENTO REDUCIDO
══════════════════════════════════════════════════════════════════════════
Quien pide que el sistema no se mueva no deberia tener que verlo moverse. Se
enumeran los tres selectores con `transition` de esta hoja —la tarjeta de
servicio del punto 1.b, la tarjeta de averia del punto 4 y su pictograma— y
se neutralizan los dos desplazamientos que los `:hover` disparan.
VA EN ESTE ARCHIVO Y NO EN OTRO, y eso es lo importante: un bloque de
`prefers-reduced-motion` tiene que vivir en la MISMA hoja que los `:hover`
que neutraliza. Este tema ya pago dos veces por separarlos —ver la nota de
provincias.css y la cabecera de marcas.css—, y esta hoja se encola la ultima,
asi que aqui no hay nada que pueda pisarlo despues. */
@media (prefers-reduced-motion: reduce) {
.home .sat-tarjeta,
.home .sat-sintomas > ul:first-of-type > li,
.home .sat-sintoma-icono {
transition: none;
}
.home .sat-tarjeta:hover,
.home .sat-tarjeta:focus-within,
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
LA PIEZA MULTIMARCA DEL HERO (20-ago-2026)
Copia deliberada de `servicios.css` §16, que esta hoja no puede reutilizar
porque `servicios.css` no se encola en la portada. Se copia el ASPECTO, no
el mecanismo, y por eso la clase de silo cambia.
Neutraliza lo que `global.css` escribe para la imagen DESTACADA: márgenes
negativos que sangran hasta el borde, `align-self: stretch`, `overflow:
hidden` y un `![]()
` POSICIONADO EN ABSOLUTO con `object-fit: cover`. Eso
está bien para una foto de fondo y es lo contrario de lo que necesita una
pieza gráfica que se lee: sacar la imagen del flujo deja la caja en altura
cero y la recorta entera —medido el 20-ago-2026 en servicios: contenedor
515x0 con la imagen cargada dentro—.
═══════════════════════════════════════════════════════════════════════ */
.home .sat-portada-media--promo {
width: 100%;
margin: 0;
align-self: center;
justify-self: center;
height: auto;
min-height: 0;
overflow: visible;
}
.home .sat-portada-media--promo img {
position: static;
inset: auto;
width: 100%;
height: auto;
max-height: none;
object-fit: fill;
border-radius: 0;
}
@media (max-width: 61.99rem) {
.home .sat-portada-media--promo {
max-width: var(--sat-max-width-narrow);
margin-top: var(--sat-space-4);
}
}
` hijo directo y no hace nada.
EL TRATAMIENTO CORRECTO ES EL DE servicios.css §6, que es el de esta MISMA
forma de lista, y es el que se copia. La diferencia no es academica: aplicar
§14.2 aqui habria escrito una rejilla de tarjetas que ningun elemento de esta
pagina lleva, y el bloque se habria quedado exactamente igual que antes.
══ LO QUE YA ESTABA Y NO SE TOCA ══
La rejilla y la caja de cada averia vienen de global.css (`.sat-sintomas ul`
con `auto-fit` de 16rem, `.sat-sintomas li` con fondo alterno, radio y
relleno, `.sat-sintomas li strong` en azul de marca), y esta pagina ya las
recibia. Lo que le faltaba era el PICTOGRAMA —que lo pone `initSintomasLista()`
de silo.js, disponible aqui desde hoy— y la respuesta al puntero.
POR QUE MERECE LA PENA EN ESTE BLOQUE Y NO EN OTROS: es la unica seccion de
la pagina que se lee EN DIAGONAL —quien llega buscando su averia barre la
rejilla hasta reconocerla— y seis bloques de texto identico no ofrecen ningun
punto de anclaje para ese barrido.
══ LO QUE NO SE COPIA DE §6, Y POR QUE ══
Aquella seccion devuelve a lista normal la SEGUNDA `` del bloque —las
tres comprobaciones caseras con las que reparacion y urgencias cierran su
`sat-sintomas`—. La portada tiene UNA sola `` en esta seccion, contada
sobre el HTML servido. `:first-of-type` se conserva igual, porque es la misma
condicion que aplica `initSintomasLista()` y las dos tienen que seguir
diciendo lo mismo si mañana el corpus añade esa segunda lista. */
.home .sat-sintomas > ul:first-of-type > li {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: translateY(-3px);
box-shadow: var(--sat-shadow-card);
}
/* La clase la añade `initSintomasLista()` DESPUES de haber creado las dos
celdas. Sin JavaScript el `- ` conserva su flujo de bloque normal y se lee
igual de bien: el icono es una mejora, no la estructura. */
.home .sat-sintoma-item--mejorado {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--sat-space-3);
}
.home .sat-sintoma-texto {
min-width: 0;
}
/* El cuadrado redondeado con el trazo en celeste sobre un velo del mismo
celeste — el mismo recurso que el icono de paso y que la tarjeta de averia de
provincia. Medidas fijas y `flex: 0 0 auto` porque la celda de la rejilla es
de ancho automatico: sin ancho propio el fondo se convertiria en una banda.
La translucidez se hace con `color-mix()` sobre el token, nunca con un
literal de color propio. */
.home .sat-sintoma-icono {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
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;
}
.home .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 interaccion es la averia entera, no el pictograma. */
.home .sat-sintomas > ul:first-of-type > li:hover .sat-sintoma-icono {
background: color-mix(in srgb, var(--sat-color-brand-light) 22%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
5. sat-contexto-operativo — PRECIO Y COBERTURA, DOS TARJETAS GEMELAS
══════════════════════════════════════════════════════════════════════════
El marcado lo compone `sataire_componer_contexto_operativo()`, la MISMA
funcion que ya llaman `template-provincias.php` y `template-servicios.php`:
el PHP no se duplica. El CSS si, y es la decision de siempre en este tema —
ver la cabecera de este archivo.
══ QUE PAREJA SE COMPONE AQUI, Y POR QUE NO ES LA DE SIEMPRE ══
En provincia y en servicio la pareja es `sat-temporada` + `sat-precios`. La
portada NO emite `sat-temporada`: sus dos bloques de contexto son el precio y
la cobertura, que ademas llegan seguidos en el documento. Por eso la llamada
de `template-home.php` pasa sus propios roles; la clase del envoltorio es la
misma porque el componente es el mismo.
POR ESO TAMPOCO SE COPIA `.sat-contexto-operativo .sat-temporada strong`: en
esta pagina no hay ninguna `sat-temporada` que pintar.
══ ESPECIFICIDAD, QUE ES LA MITAD DE ESTE BLOQUE ══
La tarjeta tiene que ganarle a `.sat-cuerpo section[class^="sat-"]` de
global.css (0,2,1), que le pone a las dos secciones el relleno de seccion y
el filete inferior. Con `.home` + `.sat-cuerpo` + `.sat-contexto-operativo` +
`section[class^="sat-"]` el selector vale (0,4,1) — la misma forma exacta que
usa servicios.css §11, que ya tuvo que ganarle ademas a otras dos. Se
conserva la forma en vez de bajarla al minimo que hoy bastaria: el dia que
alguien añada una regla a global.css para uno de estos dos roles, esta seguira
ganando.
NO SE COPIA `.sat-precios > p:last-of-type`, la regla que en provincia baja el
descargo legal al pie de la tarjeta en gris y con un filete encima. Alli es
correcta porque el descargo SIEMPRE es el ultimo parrafo; en la portada NO lo
es: sus cuatro parrafos de `sat-precios` terminan en un enlace a la pagina de
precios, y el descargo es el tercero. La regla habria teñido de gris y
rematado con letra pequeña el enlace de salida del bloque. Es el mismo motivo
por el que servicios.css tampoco la copio.
Este bloque no declara ni `:hover` ni `transition`, asi que NO necesita
consulta `prefers-reduced-motion` propia. */
.home .sat-contexto-operativo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sat-space-4);
margin-block: var(--sat-space-seccion);
}
/* Una sola tarjeta no se estira a doble ancho como si faltara visualmente su
pareja. Hoy la portada emite los dos roles y esta rama no se toma; existe
para el dia que el corpus deje de emitir uno. */
.home .sat-contexto-operativo--unico {
grid-template-columns: minmax(0, 1fr);
}
.home .sat-contexto-operativo--unico > section {
width: min(100%, var(--sat-max-width-narrow));
justify-self: center;
}
/* La tarjeta es SOMBRA, no borde: evita el doble filete cuando las dos quedan
pegadas. */
.home .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);
}
/* El rotulo es una pildora, no una banda: como hijo de un contenedor flex en
columna se estiraria a todo el ancho de la tarjeta. */
.home .sat-contexto-operativo > section > .sat-rotulo {
align-self: start;
}
.home .sat-contexto-operativo h2 {
margin-top: 0;
}
.home .sat-contexto-operativo > section > :last-child {
margin-bottom: 0;
}
.home .sat-contexto-operativo .sat-precios strong {
color: var(--sat-color-brand);
}
@media (max-width: 48rem) {
.home .sat-contexto-operativo {
grid-template-columns: 1fr;
gap: var(--sat-space-3);
}
.home .sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] {
padding: var(--sat-space-4) var(--sat-space-3);
}
}
/* ══════════════════════════════════════════════════════════════════════════
6. sat-garantia — BANDA OSCURA DE CONFIANZA (20-ago-2026)
══════════════════════════════════════════════════════════════════════════
Es el unico bloque de esta pagina sobre fondo de marca, y eso es justo lo que
hace: marcar donde estan los compromisos por escrito. Los tokens de texto se
invierten explicitamente porque tokens.css fija el color de los encabezados y
del parrafo a nivel global.
══ SANGRADO Y FONDO VIAJAN JUNTOS, SIEMPRE ══
Sangrar una seccion sin fondo no dibuja nada: solo estira de borde a borde el
filete divisorio de `.sat-cuerpo section[class^="sat-"]`. Por eso las dos
declaraciones estan aqui y no repartidas.
La formula del relleno lateral reproduce la columna `content` de la rejilla de
`.sat-cuerpo` leida desde dentro de una banda que sangra a ancho de ventana.
Si cambia la rejilla, cambian todas las bandas del tema a la vez o dejan de
alinearse con el resto de secciones.
══ MEDIDO ANTES DE COPIARLO ══
Las dos mecanicas —el margen negativo de aqui y el `grid-column: full` +
`subgrid` de abajo— conviven en provincias.css y en servicios.css, y a
primera vista parecen sumar dos sangrados. No lo hacen. Comprobado el
20-ago-2026 con Chrome sin interfaz a 1440px sobre una provincia publicada:
la banda mide 1440px de ancho empezando en x=-7, y su `
` cae en x=64 —
exactamente el mismo x que el `` de `sat-faq`, que es una seccion normal
en la columna de contenido. El texto queda alineado; la banda, a ancho de
ventana. Por eso se copian las dos y no una.
Funciona porque `body[class*="sat-silo-"] #page.grid-container` lleva
`overflow-x: clip` en global.css — y la portada entra en ese selector: su
`` lleva `sat-silo-core`. Sin eso, 100vw abriria scroll lateral.
ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que
ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1).
══ LO QUE NO SE COPIA ══
El bloque `> ul` de servicios.css §8 —la rejilla de compromisos con su icono,
que alli sirve a una sola pagina—. El `sat-garantia` de la portada son un
`` y tres parrafos, sin una sola lista: `initGarantias()` de silo.js
tampoco encuentra nada. Se copia lo que puede casar algo, y solo eso.
Este bloque no declara ni `:hover` ni `transition`: una garantia no lleva a
ninguna parte, asi que el movimiento invitaria a pulsar algo que no se puede
pulsar. Y como no se declara ningun movimiento, no necesita consulta
`prefers-reduced-motion` propia. */
.home .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;
}
.home .sat-garantia {
grid-column: full;
display: grid;
grid-template-columns: subgrid;
background:
linear-gradient(
150deg,
var(--sat-color-brand-dark) 0%,
color-mix(in srgb, var(--sat-color-brand) 70%, var(--sat-color-brand-dark)) 100%
);
}
.home .sat-garantia > * {
grid-column: content;
}
.home .sat-garantia h2,
.home .sat-garantia h3 {
color: var(--sat-color-bg);
}
.home .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: los cuatro `` de esta seccion caen dentro de la frase —«…con
garantia por escrito de 3 meses; las instalaciones, con…»— y el relleno
lateral de la pastilla abria un hueco antes del signo de puntuacion. */
.home .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);
}
/* Los tres enlaces de esta seccion —carne de gases fluorados y condiciones del
servicio— en celeste: el azul de marca sobre este fondo no se distinguiria
del texto. */
.home .sat-garantia a {
color: var(--sat-color-brand-light);
}
/* ── El rotulo de seccion, invertido sobre la banda ──────────────────────
OBLIGATORIO, no un remate. El punto 3 le da rotulo a `sat-garantia`
—«Confianza», que la guarda de `initRotulos()` no suprime sobre el H2 «Doce
años reparando climatizacion»— y ese rotulo es azul de marca: sobre este
fondo, azul oscuro, saldria azul sobre azul. Es el mismo par de reglas que
provincias.css, marcas.css y servicios.css tienen por la misma razon, y su
ausencia es el sintoma de haber separado la banda de su rotulo. */
.home .sat-garantia > .sat-rotulo {
background: none;
color: var(--sat-color-bg);
}
/* Sobre fondo de marca el tramo azul del filete desapareceria: se cambia por el
fondo claro, y el naranja se mantiene porque ahi si contrasta. */
.home .sat-garantia > .sat-rotulo::before {
background: linear-gradient(
to right,
var(--sat-color-bg) 0 45%,
var(--sat-color-cta) 45% 100%
);
}
/* ══════════════════════════════════════════════════════════════════════════
7. MOVIMIENTO REDUCIDO
══════════════════════════════════════════════════════════════════════════
Quien pide que el sistema no se mueva no deberia tener que verlo moverse. Se
enumeran los tres selectores con `transition` de esta hoja —la tarjeta de
servicio del punto 1.b, la tarjeta de averia del punto 4 y su pictograma— y
se neutralizan los dos desplazamientos que los `:hover` disparan.
VA EN ESTE ARCHIVO Y NO EN OTRO, y eso es lo importante: un bloque de
`prefers-reduced-motion` tiene que vivir en la MISMA hoja que los `:hover`
que neutraliza. Este tema ya pago dos veces por separarlos —ver la nota de
provincias.css y la cabecera de marcas.css—, y esta hoja se encola la ultima,
asi que aqui no hay nada que pueda pisarlo despues. */
@media (prefers-reduced-motion: reduce) {
.home .sat-tarjeta,
.home .sat-sintomas > ul:first-of-type > li,
.home .sat-sintoma-icono {
transition: none;
}
.home .sat-tarjeta:hover,
.home .sat-tarjeta:focus-within,
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
LA PIEZA MULTIMARCA DEL HERO (20-ago-2026)
Copia deliberada de `servicios.css` §16, que esta hoja no puede reutilizar
porque `servicios.css` no se encola en la portada. Se copia el ASPECTO, no
el mecanismo, y por eso la clase de silo cambia.
Neutraliza lo que `global.css` escribe para la imagen DESTACADA: márgenes
negativos que sangran hasta el borde, `align-self: stretch`, `overflow:
hidden` y un `![]()
` POSICIONADO EN ABSOLUTO con `object-fit: cover`. Eso
está bien para una foto de fondo y es lo contrario de lo que necesita una
pieza gráfica que se lee: sacar la imagen del flujo deja la caja en altura
cero y la recorta entera —medido el 20-ago-2026 en servicios: contenedor
515x0 con la imagen cargada dentro—.
═══════════════════════════════════════════════════════════════════════ */
.home .sat-portada-media--promo {
width: 100%;
margin: 0;
align-self: center;
justify-self: center;
height: auto;
min-height: 0;
overflow: visible;
}
.home .sat-portada-media--promo img {
position: static;
inset: auto;
width: 100%;
height: auto;
max-height: none;
object-fit: fill;
border-radius: 0;
}
@media (max-width: 61.99rem) {
.home .sat-portada-media--promo {
max-width: var(--sat-max-width-narrow);
margin-top: var(--sat-space-4);
}
}
- ` en esta seccion, contada
sobre el HTML servido. `:first-of-type` se conserva igual, porque es la misma
condicion que aplica `initSintomasLista()` y las dos tienen que seguir
diciendo lo mismo si mañana el corpus añade esa segunda lista. */
.home .sat-sintomas > ul:first-of-type > li {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home .sat-sintomas > ul:first-of-type > li:hover,
.home .sat-sintomas > ul:first-of-type > li:focus-within {
transform: translateY(-3px);
box-shadow: var(--sat-shadow-card);
}
/* La clase la añade `initSintomasLista()` DESPUES de haber creado las dos
celdas. Sin JavaScript el `
- ` conserva su flujo de bloque normal y se lee
igual de bien: el icono es una mejora, no la estructura. */
.home .sat-sintoma-item--mejorado {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--sat-space-3);
}
.home .sat-sintoma-texto {
min-width: 0;
}
/* El cuadrado redondeado con el trazo en celeste sobre un velo del mismo
celeste — el mismo recurso que el icono de paso y que la tarjeta de averia de
provincia. Medidas fijas y `flex: 0 0 auto` porque la celda de la rejilla es
de ancho automatico: sin ancho propio el fondo se convertiria en una banda.
La translucidez se hace con `color-mix()` sobre el token, nunca con un
literal de color propio. */
.home .sat-sintoma-icono {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
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;
}
.home .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 interaccion es la averia entera, no el pictograma. */
.home .sat-sintomas > ul:first-of-type > li:hover .sat-sintoma-icono {
background: color-mix(in srgb, var(--sat-color-brand-light) 22%, transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
5. sat-contexto-operativo — PRECIO Y COBERTURA, DOS TARJETAS GEMELAS
══════════════════════════════════════════════════════════════════════════
El marcado lo compone `sataire_componer_contexto_operativo()`, la MISMA
funcion que ya llaman `template-provincias.php` y `template-servicios.php`:
el PHP no se duplica. El CSS si, y es la decision de siempre en este tema —
ver la cabecera de este archivo.
══ QUE PAREJA SE COMPONE AQUI, Y POR QUE NO ES LA DE SIEMPRE ══
En provincia y en servicio la pareja es `sat-temporada` + `sat-precios`. La
portada NO emite `sat-temporada`: sus dos bloques de contexto son el precio y
la cobertura, que ademas llegan seguidos en el documento. Por eso la llamada
de `template-home.php` pasa sus propios roles; la clase del envoltorio es la
misma porque el componente es el mismo.
POR ESO TAMPOCO SE COPIA `.sat-contexto-operativo .sat-temporada strong`: en
esta pagina no hay ninguna `sat-temporada` que pintar.
══ ESPECIFICIDAD, QUE ES LA MITAD DE ESTE BLOQUE ══
La tarjeta tiene que ganarle a `.sat-cuerpo section[class^="sat-"]` de
global.css (0,2,1), que le pone a las dos secciones el relleno de seccion y
el filete inferior. Con `.home` + `.sat-cuerpo` + `.sat-contexto-operativo` +
`section[class^="sat-"]` el selector vale (0,4,1) — la misma forma exacta que
usa servicios.css §11, que ya tuvo que ganarle ademas a otras dos. Se
conserva la forma en vez de bajarla al minimo que hoy bastaria: el dia que
alguien añada una regla a global.css para uno de estos dos roles, esta seguira
ganando.
NO SE COPIA `.sat-precios > p:last-of-type`, la regla que en provincia baja el
descargo legal al pie de la tarjeta en gris y con un filete encima. Alli es
correcta porque el descargo SIEMPRE es el ultimo parrafo; en la portada NO lo
es: sus cuatro parrafos de `sat-precios` terminan en un enlace a la pagina de
precios, y el descargo es el tercero. La regla habria teñido de gris y
rematado con letra pequeña el enlace de salida del bloque. Es el mismo motivo
por el que servicios.css tampoco la copio.
Este bloque no declara ni `:hover` ni `transition`, asi que NO necesita
consulta `prefers-reduced-motion` propia. */
.home .sat-contexto-operativo {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sat-space-4);
margin-block: var(--sat-space-seccion);
}
/* Una sola tarjeta no se estira a doble ancho como si faltara visualmente su
pareja. Hoy la portada emite los dos roles y esta rama no se toma; existe
para el dia que el corpus deje de emitir uno. */
.home .sat-contexto-operativo--unico {
grid-template-columns: minmax(0, 1fr);
}
.home .sat-contexto-operativo--unico > section {
width: min(100%, var(--sat-max-width-narrow));
justify-self: center;
}
/* La tarjeta es SOMBRA, no borde: evita el doble filete cuando las dos quedan
pegadas. */
.home .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);
}
/* El rotulo es una pildora, no una banda: como hijo de un contenedor flex en
columna se estiraria a todo el ancho de la tarjeta. */
.home .sat-contexto-operativo > section > .sat-rotulo {
align-self: start;
}
.home .sat-contexto-operativo h2 {
margin-top: 0;
}
.home .sat-contexto-operativo > section > :last-child {
margin-bottom: 0;
}
.home .sat-contexto-operativo .sat-precios strong {
color: var(--sat-color-brand);
}
@media (max-width: 48rem) {
.home .sat-contexto-operativo {
grid-template-columns: 1fr;
gap: var(--sat-space-3);
}
.home .sat-cuerpo .sat-contexto-operativo > section[class^="sat-"] {
padding: var(--sat-space-4) var(--sat-space-3);
}
}
/* ══════════════════════════════════════════════════════════════════════════
6. sat-garantia — BANDA OSCURA DE CONFIANZA (20-ago-2026)
══════════════════════════════════════════════════════════════════════════
Es el unico bloque de esta pagina sobre fondo de marca, y eso es justo lo que
hace: marcar donde estan los compromisos por escrito. Los tokens de texto se
invierten explicitamente porque tokens.css fija el color de los encabezados y
del parrafo a nivel global.
══ SANGRADO Y FONDO VIAJAN JUNTOS, SIEMPRE ══
Sangrar una seccion sin fondo no dibuja nada: solo estira de borde a borde el
filete divisorio de `.sat-cuerpo section[class^="sat-"]`. Por eso las dos
declaraciones estan aqui y no repartidas.
La formula del relleno lateral reproduce la columna `content` de la rejilla de
`.sat-cuerpo` leida desde dentro de una banda que sangra a ancho de ventana.
Si cambia la rejilla, cambian todas las bandas del tema a la vez o dejan de
alinearse con el resto de secciones.
══ MEDIDO ANTES DE COPIARLO ══
Las dos mecanicas —el margen negativo de aqui y el `grid-column: full` +
`subgrid` de abajo— conviven en provincias.css y en servicios.css, y a
primera vista parecen sumar dos sangrados. No lo hacen. Comprobado el
20-ago-2026 con Chrome sin interfaz a 1440px sobre una provincia publicada:
la banda mide 1440px de ancho empezando en x=-7, y su `
` cae en x=64 — exactamente el mismo x que el `
` de `sat-faq`, que es una seccion normal en la columna de contenido. El texto queda alineado; la banda, a ancho de ventana. Por eso se copian las dos y no una. Funciona porque `body[class*="sat-silo-"] #page.grid-container` lleva `overflow-x: clip` en global.css — y la portada entra en ese selector: su `` lleva `sat-silo-core`. Sin eso, 100vw abriria scroll lateral. ESPECIFICIDAD. Se incluye el tipo `section` porque la regla base que hay que ganar, `.sat-cuerpo section[class^="sat-"]`, ya vale (0,2,1). ══ LO QUE NO SE COPIA ══ El bloque `> ul` de servicios.css §8 —la rejilla de compromisos con su icono, que alli sirve a una sola pagina—. El `sat-garantia` de la portada son un `
` y tres parrafos, sin una sola lista: `initGarantias()` de silo.js tampoco encuentra nada. Se copia lo que puede casar algo, y solo eso. Este bloque no declara ni `:hover` ni `transition`: una garantia no lleva a ninguna parte, asi que el movimiento invitaria a pulsar algo que no se puede pulsar. Y como no se declara ningun movimiento, no necesita consulta `prefers-reduced-motion` propia. */ .home .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; } .home .sat-garantia { grid-column: full; display: grid; grid-template-columns: subgrid; background: linear-gradient( 150deg, var(--sat-color-brand-dark) 0%, color-mix(in srgb, var(--sat-color-brand) 70%, var(--sat-color-brand-dark)) 100% ); } .home .sat-garantia > * { grid-column: content; } .home .sat-garantia h2, .home .sat-garantia h3 { color: var(--sat-color-bg); } .home .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: los cuatro `` de esta seccion caen dentro de la frase —«…con garantia por escrito de 3 meses; las instalaciones, con…»— y el relleno lateral de la pastilla abria un hueco antes del signo de puntuacion. */ .home .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); } /* Los tres enlaces de esta seccion —carne de gases fluorados y condiciones del servicio— en celeste: el azul de marca sobre este fondo no se distinguiria del texto. */ .home .sat-garantia a { color: var(--sat-color-brand-light); } /* ── El rotulo de seccion, invertido sobre la banda ────────────────────── OBLIGATORIO, no un remate. El punto 3 le da rotulo a `sat-garantia` —«Confianza», que la guarda de `initRotulos()` no suprime sobre el H2 «Doce años reparando climatizacion»— y ese rotulo es azul de marca: sobre este fondo, azul oscuro, saldria azul sobre azul. Es el mismo par de reglas que provincias.css, marcas.css y servicios.css tienen por la misma razon, y su ausencia es el sintoma de haber separado la banda de su rotulo. */ .home .sat-garantia > .sat-rotulo { background: none; color: var(--sat-color-bg); } /* Sobre fondo de marca el tramo azul del filete desapareceria: se cambia por el fondo claro, y el naranja se mantiene porque ahi si contrasta. */ .home .sat-garantia > .sat-rotulo::before { background: linear-gradient( to right, var(--sat-color-bg) 0 45%, var(--sat-color-cta) 45% 100% ); } /* ══════════════════════════════════════════════════════════════════════════ 7. MOVIMIENTO REDUCIDO ══════════════════════════════════════════════════════════════════════════ Quien pide que el sistema no se mueva no deberia tener que verlo moverse. Se enumeran los tres selectores con `transition` de esta hoja —la tarjeta de servicio del punto 1.b, la tarjeta de averia del punto 4 y su pictograma— y se neutralizan los dos desplazamientos que los `:hover` disparan. VA EN ESTE ARCHIVO Y NO EN OTRO, y eso es lo importante: un bloque de `prefers-reduced-motion` tiene que vivir en la MISMA hoja que los `:hover` que neutraliza. Este tema ya pago dos veces por separarlos —ver la nota de provincias.css y la cabecera de marcas.css—, y esta hoja se encola la ultima, asi que aqui no hay nada que pueda pisarlo despues. */ @media (prefers-reduced-motion: reduce) { .home .sat-tarjeta, .home .sat-sintomas > ul:first-of-type > li, .home .sat-sintoma-icono { transition: none; } .home .sat-tarjeta:hover, .home .sat-tarjeta:focus-within, .home .sat-sintomas > ul:first-of-type > li:hover, .home .sat-sintomas > ul:first-of-type > li:focus-within { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════ LA PIEZA MULTIMARCA DEL HERO (20-ago-2026) Copia deliberada de `servicios.css` §16, que esta hoja no puede reutilizar porque `servicios.css` no se encola en la portada. Se copia el ASPECTO, no el mecanismo, y por eso la clase de silo cambia. Neutraliza lo que `global.css` escribe para la imagen DESTACADA: márgenes negativos que sangran hasta el borde, `align-self: stretch`, `overflow: hidden` y un `
` POSICIONADO EN ABSOLUTO con `object-fit: cover`. Eso está bien para una foto de fondo y es lo contrario de lo que necesita una pieza gráfica que se lee: sacar la imagen del flujo deja la caja en altura cero y la recorta entera —medido el 20-ago-2026 en servicios: contenedor 515x0 con la imagen cargada dentro—. ═══════════════════════════════════════════════════════════════════════ */ .home .sat-portada-media--promo { width: 100%; margin: 0; align-self: center; justify-self: center; height: auto; min-height: 0; overflow: visible; } .home .sat-portada-media--promo img { position: static; inset: auto; width: 100%; height: auto; max-height: none; object-fit: fill; border-radius: 0; } @media (max-width: 61.99rem) { .home .sat-portada-media--promo { max-width: var(--sat-max-width-narrow); margin-top: var(--sat-space-4); } }