/* =============================================================================
   home.css — maquetación de la página de Soham Home.

   AUTOCONTENIDA A PROPÓSITO. Enlaza `sistema-soham.css` (tokens y primitivas) y
   NADA MÁS: no toca `styles.css`, que lo comparten index, industry y labs. Así esta
   página se puede aprobar o descartar sin arrastrar a las otras tres.

   El mundo visual es el mismo que el del cotizador —«La pared de material»—, y esa
   es la razón de que exista: Juan pidió que el sitio y la herramienta «vayan de la
   mano». Los tokens se cambian en `sistema-soham.css` y se copian al cotizador,
   nunca al revés.

   QUÉ SE CORRIGIÓ DE LA PÁGINA ANTERIOR, y por qué no vuelve:

   1. **El rótulo sobre el titular.** «SOHAM HOME · SATÉLITE Y VALLE DORADO» en
      versales encima del titular. Es la señal más reconocible de interfaz generada,
      y el titular carga su propio peso sin él. No vuelve en ninguna sección.
   2. **La ficha de «DICTAMEN DE REVISIÓN» con rotulación en versales espaciadas.**
      Se leía como terminal de comandos —el mismo defecto que ya se rechazó una vez—.
      Su contenido es valioso y se conserva, pero como sección con tipografía normal.
   3. **Las tres tarjetas de precio idénticas** con borde, etiqueta de color y viñeta
      verde: es la tabla de precios de plantilla. Ahora son tres bandas donde el
      precio va a escala de cartel y el material entra por fotografía.
   4. **El verde en todas partes.** Aparecía una docena de veces por pantalla, entre
      etiquetas, precios, viñetas y botones. Aparece UNA vez por pantalla.
   5. **Titulares en negrita.** El sistema pide peso 500. La negrita se fue.
   ============================================================================= */

/* ============================ Base ============================ */

*{box-sizing:border-box}
body{
  margin:0;background:var(--blanco);color:var(--texto);
  font:400 var(--t-cuerpo)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.envoltura{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--e5)}
@media(min-width:900px){.envoltura{padding-inline:var(--e6)}}
/* Medida de lectura. La prosa nunca corre a lo ancho del lienzo. */
.medida{max-width:66ch}

/* ============================ Cabecera ============================ */
/* Sobre la portada va transparente y en blanco; al bajar se vuelve sólida. La clase
   `.fija` la pone `home.js` al pasar la portada; sin JavaScript queda sólida, que es
   el estado legible. */

.cab{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.cab .envoltura{display:flex;align-items:center;gap:var(--e4);min-height:76px}
.cab.sobre-portada{background:transparent}
/* Sobre la fotografía TODO el texto de la cabecera va en blanco, el selector de
   idioma incluido: en gris heredado quedaba ilegible contra la foto. */
.cab.sobre-portada .marca-txt,
.cab.sobre-portada .nav-link,
.cab.sobre-portada .lang-select{color:#fff}
.cab.sobre-portada .lang-select option{color:var(--negro)}
.cab:not(.sobre-portada){
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom-color:var(--linea);
}
.marca{display:flex;align-items:center;gap:var(--e3);text-decoration:none;flex:none;min-height:var(--tap)}
.marca img{height:30px;width:auto}
/* `display:block` de la regla de arriba pisaba el atributo `hidden` y se veían los
   DOS logotipos —el negro y el blanco— uno junto al otro. `hidden` tiene que ganar. */
.marca img[hidden]{display:none}
.marca-txt{font:500 1.0625rem/1 var(--marca);color:var(--negro);letter-spacing:-.02em}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--e5)}
.nav-lista{display:flex;align-items:center;gap:var(--e5);list-style:none;margin:0;padding:0}
.nav-link{
  text-decoration:none;color:var(--texto);
  font:400 var(--t-dato)/1 var(--sans);
  padding:var(--e3) 0;transition:opacity .18s ease;
}
.nav-link:hover{opacity:.6}
/* El idioma iba en una caja con borde que competía con la navegación. Va desnudo. */
.lang-select{
  border:0;background:transparent;color:inherit;cursor:pointer;
  font:400 var(--t-dato)/1 var(--sans);padding-inline:var(--e2);
  appearance:none;text-align:center;min-height:var(--tap);
}
.abre-menu{display:none}

@media(max-width:860px){
  .abre-menu{
    display:flex;align-items:center;justify-content:center;
    margin-left:auto;width:var(--tap);height:var(--tap);
    border:0;background:transparent;color:inherit;cursor:pointer;
  }
  .abre-menu span{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
  .abre-menu span::before,.abre-menu span::after{
    content:'';position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
  }
  .abre-menu span::before{top:-7px}
  .abre-menu span::after{top:7px}
  .nav{
    position:fixed;inset:76px 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--blanco);border-bottom:1px solid var(--linea);
    padding:var(--e4) var(--e5) var(--e6);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
  }
  .nav[data-abierto="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav-lista{flex-direction:column;align-items:stretch;gap:0}
  .nav-lista a{
    color:var(--negro);display:block;min-height:var(--tap);
    display:flex;align-items:center;
    border-bottom:1px solid var(--linea-tenue);font-size:var(--t-guia);
  }
  .cab.sobre-portada .nav-link{color:var(--negro)}
}

/* ============================ Portada ============================ */
/* A sangre y a altura de pantalla. El color entra por la fotografía; el titular va
   en peso 500 sobre un degradado que existe para el contraste, no para el efecto. */

.portada{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden}
.portada>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.portada::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,9,.55) 0%,rgba(8,10,9,.20) 34%,rgba(8,10,9,.86) 100%);
}
.portada .envoltura{position:relative;z-index:1;padding-bottom:var(--e8);padding-top:120px}
.portada h1{
  font:500 var(--t-cartel)/1.02 var(--sans);color:#fff;
  letter-spacing:-.035em;margin:0 0 var(--e5);text-wrap:balance;
}
/* El tope de medida solo aplica donde hay ancho de sobra. En teléfono la columna ya
   es estrecha, y con 17ch encima el titular se partía en cinco renglones cortos. */
@media(min-width:900px){.portada h1{max-width:17ch}}
.portada p{
  font:400 var(--t-guia)/1.55 var(--sans);color:rgba(255,255,255,.9);
  margin:0 0 var(--e6);max-width:56ch;
}
/* UNA acción. La versión anterior ponía dos botones sólidos compitiendo entre sí. */
.portada .sh-btn{background:var(--verde);border-color:var(--verde);color:#fff}
.portada .sh-btn:hover{background:var(--verde-hover);border-color:var(--verde-hover)}
.portada .segundo{
  display:inline-flex;align-items:center;min-height:var(--tap);
  margin-left:var(--e5);color:#fff;
  font:400 var(--t-cuerpo)/1 var(--sans);
  text-decoration:none;
  /* El subrayado va en una sombra interior en vez de en el borde: así el enlace
     puede medir 56 px de alto sin que la línea se despegue del texto. */
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.45);
}
.portada .segundo:hover{box-shadow:inset 0 -1px 0 #fff;border-bottom-color:transparent}
.portada .segundo:hover{border-bottom-color:#fff}
@media(max-width:620px){
  /* `inline-block`, no `block`: en bloque el subrayado se estiraba al ancho de la
     pantalla y parecía una regla horizontal en vez de un enlace. */
  .portada .segundo{display:inline-block;margin:var(--e5) 0 0}
  .portada .sh-btn{width:100%}
}

/* ============================ Secciones ============================ */

section{padding-block:var(--e9)}
@media(max-width:700px){section{padding-block:var(--e8)}}
section.hueso{background:var(--hueso)}
/* El encabezado ya deja su propio aire; los bloques que lo siguen no vuelven a
   sumarlo, porque juntos abrían un hueco muerto de casi cien píxeles. */
.enc{margin-bottom:var(--e7)}
.enc h2{margin-bottom:var(--e4)}
.enc .sh-guia{margin-top:var(--e4)}
.enc+.precios,.enc+.bloques,.enc+.metodo,.enc+.limites,.enc+.config{margin-top:0}

/* ============================ Precios ============================ */
/* Tres bandas, no tres tarjetas iguales. El precio manda por tamaño, y el orden de
   lectura es precio → qué incluye → la nota que lo justifica. */

.precios{display:flex;flex-direction:column;gap:0;margin-top:var(--e7)}
.precio-fila{
  display:grid;grid-template-columns:1fr;gap:var(--e5);
  padding-block:var(--e7);border-top:1px solid var(--linea);
}
.precio-fila:last-child{border-bottom:1px solid var(--linea)}
@media(min-width:860px){
  .precio-fila{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--e8);align-items:start}
}
.precio-fila h3{
  font:500 var(--t-sub)/1.2 var(--sans);color:var(--negro);
  letter-spacing:-.02em;margin:0 0 var(--e3);
}
.precio-cifra{display:flex;align-items:baseline;gap:var(--e2);margin-bottom:var(--e4)}
.precio-cifra b{
  font:500 clamp(2.75rem,6vw,4.25rem)/1 var(--sans);color:var(--negro);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.precio-cifra i{font:400 var(--t-cuerpo)/1 var(--sans);font-style:normal;color:var(--gris)}
/* El acento del bloque: solo la banda destacada lleva el precio en verde. */
.precio-fila.eje .precio-cifra b{color:var(--verde)}
.precio-fila p{margin:0 0 var(--e4);color:var(--texto)}
.precio-fila ul{
  margin:0;padding:0;list-style:none;
  display:grid;gap:var(--e3);
}
.precio-fila li{
  padding-left:var(--e5);position:relative;
  font:400 var(--t-cuerpo)/1.5 var(--sans);color:var(--texto);
}
/* Guion, no viñeta de cuadrito verde: la viñeta de color repetida quince veces por
   pantalla era lo que hacía invisible al acento. */
.precio-fila li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:12px;height:1px;background:var(--gris);
}
.nota-precio{
  margin-top:var(--e5);padding-top:var(--e4);border-top:1px solid var(--linea-tenue);
  font:400 var(--t-dato)/1.55 var(--sans);color:var(--gris);max-width:52ch;
}

/* ============================ Hallazgos y capacidades ============================ */
/* Bloques de texto separados por hilo, no tarjetas con icono. El icono decorativo
   encima de un título es el andamio perezoso que el sistema evita. */

.bloques{display:grid;gap:0;margin-top:var(--e7)}
@media(min-width:820px){.bloques{grid-template-columns:repeat(3,1fr);gap:var(--e7)}}
.bloque{padding-block:var(--e5);border-top:1px solid var(--linea)}
@media(min-width:820px){.bloque{border-top:1px solid var(--negro);padding-top:var(--e4)}}
/* ============================ Escaparate de categorías (index) ============================ */
/* Cuatro bandas fotográficas a media pantalla, una por categoría — el índice se ve
   como catálogo editorial, no como rejilla de tarjetas. La foto carga el color;
   el texto vive abajo a la izquierda sobre un velo que existe para el contraste. */
.escaparate{display:grid;gap:var(--e4);margin-top:var(--e7)}
.banda{
  position:relative;display:flex;align-items:flex-end;
  min-height:64vh;overflow:hidden;border-radius:var(--r-lg);
  text-decoration:none;background:var(--arena);
}
@media(max-width:700px){.banda{min-height:52vh}}
/* La foto carga el color y no se mueve: el zoom al pasar el cursor se retiró (sistema de
   movimiento 2026-08-22, principio 1). El hover de la banda vive en `.m-banda` (motion.css). */
.banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,10,9,.62),rgba(8,10,9,.04) 52%);
}
.banda-txt{position:relative;z-index:1;padding:var(--e7);max-width:64ch}
@media(max-width:700px){.banda-txt{padding:var(--e5)}}
.banda-num{
  display:block;margin-bottom:var(--e3);
  font:400 var(--t-dato)/1 var(--sans);color:rgba(255,255,255,.66);
  font-variant-numeric:tabular-nums;
}
.banda h3{font:500 clamp(1.9rem,4.6vw,3.25rem)/1.05 var(--sans);color:#fff;letter-spacing:-.03em;margin:0 0 var(--e3)}
.banda p{margin:0;font:400 var(--t-cuerpo)/1.5 var(--sans);color:rgba(255,255,255,.88);max-width:52ch}
.banda .ancla{display:inline-block;margin-top:var(--e4);font:500 var(--t-dato)/1 var(--sans);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}

.bloque-precio{
  font:500 var(--t-cuerpo)/1.3 var(--sans);color:var(--negro);
  font-variant-numeric:tabular-nums;margin:var(--e3) 0 0;
}
.bloque-precio i{font:400 var(--t-pie)/1 var(--sans);font-style:normal;color:var(--gris);margin-left:var(--e2)}
.bloque h4{
  font:500 var(--t-guia)/1.3 var(--sans);color:var(--negro);
  letter-spacing:-.02em;margin:0 0 var(--e3);text-wrap:balance;
}
.bloque p{margin:0;font:400 var(--t-cuerpo)/1.6 var(--sans);color:var(--texto)}
.bloque .chip{
  display:inline-block;margin-bottom:var(--e3);
  font:400 var(--t-pie)/1 var(--sans);color:var(--gris);
}

/* ============================ El método ============================ */
/* La numeración se conserva porque aquí la secuencia SÍ es información: es el orden
   real de una visita de cuarenta y cinco minutos, y el dictamen es el paso 5 porque
   depende de los cuatro anteriores. Va discreta, no como numeral decorativo. */

.metodo{list-style:none;margin:var(--e7) 0 0;padding:0;counter-reset:paso}
.paso{
  display:grid;grid-template-columns:auto 1fr;gap:var(--e4) var(--e5);
  padding-block:var(--e6);border-top:1px solid var(--linea);align-items:baseline;
}
.paso:last-child{border-bottom:1px solid var(--linea)}
.paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  font:400 var(--t-dato)/1 var(--sans);color:var(--gris);
  font-variant-numeric:tabular-nums;padding-top:.45em;
}
.paso h3{
  font:500 var(--t-sub)/1.22 var(--sans);color:var(--negro);
  letter-spacing:-.025em;margin:0 0 var(--e3);text-wrap:balance;
}
.paso p{margin:0 0 var(--e3);max-width:62ch}
.paso .aparato{font:400 var(--t-dato)/1.4 var(--sans);color:var(--gris)}
@media(min-width:900px){
  .paso{grid-template-columns:auto minmax(0,26ch) minmax(0,1fr)}
  .paso h3{margin-bottom:0}
}

/* ============================ Dos argumentos ============================ */

.pares{display:grid;gap:var(--e7);margin-top:var(--e7)}
@media(min-width:820px){.pares{grid-template-columns:1fr 1fr;gap:var(--e8)}}

/* ============================ Catálogo de aplicativos ============================ */
/* La oferta completa como página de servicios normal: fotografía que carga el color
   —la regla del mundo—, nombre y descripción, hilo de 1 px como separación. Qué
   aplicativos aparecen lo decide la bandera `activo` del script de la página. */
.catalogo{display:grid;gap:var(--e7) var(--e7);margin-top:var(--e7)}
@media(min-width:680px){.catalogo{grid-template-columns:1fr 1fr}}
@media(min-width:1020px){.catalogo{grid-template-columns:1fr 1fr 1fr;gap:var(--e8) var(--e7)}}
.aplicativo{min-width:0}
.aplicativo-img{
  aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--arena);
  margin-bottom:var(--e4);
}
/* La foto tampoco se mueve aqui: el zoom 1.03 al pasar el cursor se retiro igual
   que en las bandas del indice (sistema de movimiento 2026-08-22, principio 1).
   La ficha es un <article>, no un enlace — el zoom era realimentacion sobre algo
   que no responde, y quedaba ademas fuera de todo bloque de movimiento reducido. */
.aplicativo-img img{width:100%;height:100%;object-fit:cover;display:block}
.aplicativo-img--sin{
  display:flex;align-items:center;justify-content:center;padding:var(--e5);
  text-align:center;font:500 var(--t-guia)/1.3 var(--sans);color:var(--gris);
  letter-spacing:-.02em;
}
.aplicativo h4{
  font:500 var(--t-cuerpo)/1.3 var(--sans);color:var(--negro);
  letter-spacing:-.01em;margin:0 0 var(--e2);
}
.aplicativo p{margin:0;font:400 var(--t-dato)/1.55 var(--sans);color:var(--texto)}
.par h4{
  font:500 var(--t-sub)/1.22 var(--sans);color:var(--negro);
  letter-spacing:-.025em;margin:0 0 var(--e4);
}
.par p{margin:0;color:var(--texto)}

/* ============================ Fabricación ============================ */
/* La foto a sangre carga la sección y el precio va a escala de cartel encima de
   ella. Es la traducción literal de «el color entra por la fotografía». */

.pieza{
  display:grid;grid-template-columns:1fr;gap:0;
  margin-top:var(--e7);
}
@media(min-width:900px){
  .pieza{grid-template-columns:1fr 1fr;align-items:stretch}
  .pieza.invertida .pieza-img{order:2}
}
.pieza-img{position:relative;min-height:340px;overflow:hidden;background:var(--hueso)}
.pieza-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pieza-txt{padding:var(--e7) 0 var(--e7)}
@media(min-width:900px){
  .pieza-txt{padding:var(--e7) var(--e7);display:flex;flex-direction:column;justify-content:center}
  .pieza.invertida .pieza-txt{padding-left:0}
  .pieza:not(.invertida) .pieza-txt{padding-right:0}
}
.pieza-txt h3{
  font:500 var(--t-titulo)/1.08 var(--sans);color:var(--negro);
  letter-spacing:-.035em;margin:0 0 var(--e5);text-wrap:balance;
}
.pieza-txt .clase{
  display:block;margin-bottom:var(--e3);
  font:400 var(--t-dato)/1.4 var(--sans);color:var(--gris);
}
.pieza-txt p{margin:0 0 var(--e4);max-width:56ch}

/* ============================ Límites ============================ */
/* La promesa que NO se hace va entrecomillada y en gris; la razón técnica va en
   tinta fuerte. La jerarquía dice sola cuál de las dos es la verdad. */

.limites{margin-top:var(--e7);display:grid;gap:0}
.limite{padding-block:var(--e6);border-top:1px solid var(--linea)}
.limite:last-child{border-bottom:1px solid var(--linea)}
@media(min-width:900px){
  .limite{grid-template-columns:minmax(0,30ch) minmax(0,1fr);display:grid;gap:var(--e7);align-items:baseline}
}
.limite .dicho{
  margin:0 0 var(--e3);font:400 var(--t-sub)/1.3 var(--sans);
  color:var(--gris);letter-spacing:-.02em;text-wrap:balance;
}
@media(min-width:900px){.limite .dicho{margin-bottom:0}}
.limite .razon{margin:0;color:var(--texto)}

/* ============================ Configurador ============================ */
/* Conserva ÍNTEGRO el contrato de `scripts.js`: todos los identificadores, clases,
   el campo trampa y los atributos de idioma. Cambia la piel, no el comportamiento. */

.config{margin-top:var(--e7)}
.paso-config{margin-bottom:var(--e7)}
.paso-config h3{
  font:500 var(--t-sub)/1.25 var(--sans);color:var(--negro);
  letter-spacing:-.025em;margin:0 0 var(--e5);
}
.linea-campos{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:flex-end}
.linea-campos>*{min-height:var(--tap)}

input[type=text],input[type=email],input[type=tel],textarea,select:not(.lang-select){
  width:100%;padding:var(--e3) 0;min-height:var(--tap);
  background:transparent;color:var(--negro);
  border:0;border-bottom:1.5px solid var(--linea);border-radius:0;
  font:400 var(--t-cuerpo)/1.5 var(--sans);
  transition:border-color .18s ease;
}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--negro)}
::placeholder{color:var(--gris);opacity:1}
textarea{border:1.5px solid var(--linea);border-radius:var(--r);padding:var(--e4)}
.campo{display:flex;flex-direction:column;gap:var(--e1);margin-bottom:var(--e5);flex:1 1 220px}
.campo label{font:400 var(--t-dato)/1.4 var(--sans);color:var(--gris)}

#room-tabs-container{display:flex;gap:var(--e2);flex-wrap:wrap;margin-top:var(--e5)}
#room-tabs-container button,.pestana-area{
  min-height:var(--tap);padding:0 var(--e5);cursor:pointer;
  border:1.5px solid var(--linea);border-radius:var(--pildora);
  background:transparent;color:var(--texto);
  font:500 var(--t-dato)/1 var(--sans);
}
#room-tabs-container button.active,#room-tabs-container button[aria-selected="true"]{
  background:var(--negro);border-color:var(--negro);color:#fff;
}

.rejilla-config{display:grid;gap:var(--e7)}
@media(min-width:1000px){.rejilla-config{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--e8);align-items:start}}

/* LAS PARTIDAS DEL CONFIGURADOR.
   El marcado NO lo escribe esta página: lo genera `scripts.js` desde `products.json`,
   y se comprobó en el navegador antes de darle estilo. Lo que genera de verdad es
   título + precio + descripción + un botón «Agregar a esta área». **No hay imagen y
   no hay casilla**, así que aquí no se finge un mosaico con foto: son fichas claras
   sobre hueso, y la jerarquía la cargan el tamaño y el hilo, como en el resto.

   Además, esas tarjetas traen estilos EN LÍNEA que apuntan a `var(--text-light)` y
   `var(--text-gray)`, tokens que viven en `styles.css` — la hoja que esta página
   deliberadamente NO carga para quedar autocontenida. Sin definirlos, el color caía
   a `inherit` y quedaba al azar. Se definen abajo, mapeados a los tokens del sistema. */
:root{
  --text-light:var(--negro);
  --text-gray:var(--gris);
  --card-bg:var(--blanco);
  --border-color:var(--linea);
  --bg-dark-accent:var(--hueso);
  --primary-accent:var(--verde);
  --glass-shadow:none;
}

.products-catalog-grid{display:grid;grid-template-columns:1fr;gap:var(--e4)}
@media(min-width:640px){.products-catalog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1360px){.products-catalog-grid{grid-template-columns:repeat(3,1fr)}}

.domotica-card{
  display:flex;flex-direction:column;
  padding:var(--e5);background:var(--blanco);
  border:0;border-top:1px solid var(--negro);
  /* `scripts.js` inyecta `margin-bottom:15px` en línea; la rejilla ya separa. */
  margin-bottom:0 !important;
}
.domotica-card-body{display:flex;flex-direction:column;height:100%}
.domotica-card-title{
  font:500 var(--t-guia)/1.28 var(--sans) !important;color:var(--negro) !important;
  letter-spacing:-.02em;margin:0 0 var(--e2) !important;text-wrap:balance;
}
/* El precio va en tinta, no en verde. Con doce partidas en pantalla, doce precios
   verdes gastan el acento que el sistema reserva para UNA aparición: aquí esa
   aparición es el total del resumen y la acción de enviar. */
.domotica-card-price{
  margin:0 0 var(--e3) !important;
  font:500 var(--t-cuerpo)/1.4 var(--sans);color:var(--negro);
  font-variant-numeric:tabular-nums;
}
.domotica-card-desc{
  font:400 var(--t-dato)/1.55 var(--sans) !important;color:var(--texto) !important;
  margin:0 0 var(--e5) !important;flex:1;
}
/* El botón «Agregar» usa las clases `.btn.btn-primary` de `styles.css`, que esta
   página no carga: sin esto quedaba como botón crudo del navegador. */
.domotica-card .btn,.linea-campos .btn{
  align-self:flex-start;margin-top:auto !important;
  min-height:var(--tap);padding:0 var(--e5) !important;
  border:2px solid var(--negro);border-radius:var(--pildora);
  background:transparent;color:var(--negro);cursor:pointer;
  font:500 var(--t-dato)/1 var(--sans) !important;
  transition:background .18s ease,color .18s ease;
}
.domotica-card .btn:hover{background:var(--negro);color:#fff}
.domotica-card.seleccionada,.domotica-card.selected,.domotica-card.active{
  outline:2px solid var(--verde);outline-offset:-2px;
}
/* Si `products.json` llega a traer imagen algún día, cae en su sitio sin tocar nada. */
.domotica-card img{width:100%;height:170px;object-fit:cover;margin-bottom:var(--e4)}
.domotica-cb{width:26px;height:26px;accent-color:var(--verde);cursor:pointer}

.domotica-summary-card{
  position:sticky;top:96px;
  background:var(--hueso);border-radius:var(--r-lg);padding:var(--e6);
}
.summary-title{font:500 var(--t-sub)/1.25 var(--sans);color:var(--negro);margin:0 0 var(--e5);letter-spacing:-.025em}
.summary-empty-msg{color:var(--gris);font-size:var(--t-dato);margin:0}
.summary-items-list{display:grid;gap:var(--e2)}
.summary-row{display:flex;justify-content:space-between;gap:var(--e4);padding-block:var(--e3);
  border-top:1px solid var(--linea);font:400 var(--t-cuerpo)/1.5 var(--sans)}
.summary-row.total-row{border-top-color:var(--negro);padding-top:var(--e4);margin-top:var(--e3)}
.summary-val{font-variant-numeric:tabular-nums;color:var(--negro);font-weight:500}
.summary-val.highlight{color:var(--verde);font-size:var(--t-sub)}
.domotica-checkout-form .sh-btn{width:100%;margin-top:var(--e4)}

/* ============================ Contacto ============================ */

.contacto{display:grid;gap:var(--e8)}
@media(min-width:900px){.contacto{grid-template-columns:1fr 1fr;gap:var(--e9)}}
.datos{display:grid;gap:var(--e5);margin-top:var(--e6)}
.dato span{display:block;font:400 var(--t-dato)/1.4 var(--sans);color:var(--gris);margin-bottom:2px}
.dato a{
  font:500 var(--t-guia)/1.35 var(--sans);color:var(--negro);text-decoration:none;
  border-bottom:1px solid var(--linea);padding-bottom:var(--e2);
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.dato a:hover{border-bottom-color:var(--negro)}
.contact-form .sh-btn{width:100%;margin-top:var(--e4)}
.form-response-msg{margin-top:var(--e4);font:400 var(--t-dato)/1.5 var(--sans)}

/* ============================ Pie ============================ */

.pie{background:var(--negro);color:rgba(255,255,255,.72);padding-block:var(--e8) var(--e6)}
.pie-rejilla{display:grid;gap:var(--e7)}
@media(min-width:820px){.pie-rejilla{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e7)}}
.pie h4{
  font:500 var(--t-dato)/1.3 var(--sans);color:#fff;margin:0 0 var(--e4);
  letter-spacing:normal;text-transform:none;
}
.pie ul{list-style:none;margin:0;padding:0;display:grid}
/* Los enlaces del pie medían 20 px de alto: por debajo del mínimo accesible de 44 y
   muy por debajo del objetivo táctil del sistema. Se les da altura, no tipografía
   más grande — el pie no debe competir con el contenido. */
.pie a{
  color:rgba(255,255,255,.72);text-decoration:none;font-size:var(--t-dato);
  display:inline-flex;align-items:center;min-height:var(--tap);
}
.pie a:hover{color:#fff}
.pie .resumen{max-width:38ch;font:400 var(--t-dato)/1.6 var(--sans);margin:var(--e4) 0 0}
.pie-abajo{
  margin-top:var(--e8);padding-top:var(--e5);border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;gap:var(--e4);flex-wrap:wrap;
  font-size:var(--t-pie);
}
.pie .lang-select{color:rgba(255,255,255,.72)}
.pie .lang-select option{color:var(--negro)}

/* ============================ Mega menú de categorías ============================ */
/* Panel bajo la cabecera, uno por categoría, construido por `pintaMenu()` desde
   `catalogo-datos.js`: enlaces directos a cada ficha + la fotografía de la
   categoría. Solo escritorio; en móvil manda la hamburguesa. Al abrirse, la
   cabecera se vuelve sólida aunque esté sobre la portada (`.con-mega`). */
.mega{
  position:absolute;top:100%;left:0;right:0;display:none;
  background:rgba(255,255,255,.98);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
  box-shadow:0 18px 40px -24px rgba(8,10,9,.18);
}
.mega.abierta{display:block}
.cab.con-mega{background:rgba(255,255,255,.98);border-bottom-color:var(--linea)}
.cab.con-mega .marca-txt,.cab.con-mega .nav-link,.cab.con-mega .lang-select{color:var(--negro)}
.mega-panel{
  display:none;max-width:var(--ancho);margin-inline:auto;
  padding:var(--e6) var(--e6) var(--e7);
  grid-template-columns:minmax(0,1fr) clamp(220px,24vw,320px);gap:var(--e8);
  align-items:start;
}
.mega-panel.activa{display:grid}
.mega-grupos{display:flex;gap:var(--e6);flex-wrap:wrap}
.mega h5{
  font:400 var(--t-pie)/1 var(--sans);color:var(--gris);
  margin:0 0 var(--e3);letter-spacing:normal;text-transform:none;
}
/* Anchos explícitos: sin ellos, la lista multicolumna toma ancho impredecible y el
   segundo grupo se cae de renglón — el panel de Madera y acero medía 599 px de alto. */
.mega ul{list-style:none;margin:0;padding:0;min-width:200px;max-width:260px}
.mega ul.dos{columns:2;column-gap:var(--e6);width:460px;max-width:none}
.mega ul a{
  display:inline-flex;align-items:center;min-height:36px;
  font:400 var(--t-dato)/1.35 var(--sans);color:var(--texto);
  text-decoration:none;transition:opacity .15s ease;
}
.mega ul a:hover{opacity:.55}
.mega-foto{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none}
.mega-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.mega-lema{
  position:absolute;inset:auto 0 0;padding:var(--e5) var(--e4) var(--e4);
  font:500 var(--t-dato)/1.4 var(--sans);color:#fff;
  background:linear-gradient(to top,rgba(8,10,9,.72),rgba(8,10,9,0));
}
@media(max-width:860px){.mega{display:none !important}}

/* Las anclas del mega menú aterrizan en fichas: que no queden bajo la cabecera fija. */
.aplicativo,.pieza{scroll-margin-top:96px}

/* Titulares-enlace (avances del blog en el índice). */
.par h4 a{color:inherit;text-decoration:none}
.par h4 a:hover{color:var(--verde-hover)}

/* ============================ Movimiento ============================ */
/* Un solo momento autorado: los bloques entran una vez, con salida exponencial,
   desde un estado YA VISIBLE. Sin JavaScript o con movimiento reducido, todo queda
   en su sitio: la animación nunca es condición para leer la página. */

/* EL CONTENIDO ES VISIBLE POR OMISIÓN. El estado oculto lo pone `home.js` en línea,
   y SOLO sobre los bloques que al cargar quedan por debajo del viewport.

   La primera versión hacía lo contrario —`.revela{opacity:.001}` en la hoja— y tenía
   un fallo medido: al entrar por un ancla (`#servicios`), al recargar a media página
   o al saltar el scroll, los bloques que nunca cruzan el viewport no disparan al
   observador y **se quedan invisibles para siempre**. Verificado en el navegador:
   tras un salto a 2400 px, el primer bloque seguía en `opacity:0.001`.

   Con este orden, cada modo de fallo —sin JavaScript, movimiento reducido, ancla
   profunda, salto de scroll— deja la página legible. */
@media (prefers-reduced-motion:no-preference){
  .revela.oculto{
    opacity:.001;transform:translateY(14px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  }
  .revela.oculto.visible{opacity:1;transform:none}
}

/* ---- El paso del método en teléfono ----
   `.paso` es una rejilla de DOS columnas por debajo de 900 px (`auto 1fr`) pero lleva
   TRES hijos: el numeral `::before`, el `<h3>` y el `<div>` de contenido. El tercero cae
   en la columna del numeral y la ensancha con su párrafo, aplastando el título. Medido
   a 375 px el 2026-08-22: en `electrico.html` la rejilla resolvía a `188.95px 114.05px`,
   con el `<h3>` «Prueba de resistencia de aislamiento» en 114 px de ancho y 105 px de
   alto a la derecha y el párrafo debajo, en la columna del numeral.
   El fallo es del patrón, así que la regla va sin prefijo de sección: alcanza a
   `electrico.html` (#metodo), `madera-y-acero.html` (#como-trabajamos) y
   `flujo-venta.html`, que usan el mismo marcado. */
@media(max-width:899px){
  .paso>div{grid-column:2/-1}
}