/* =============================================================================
   SISTEMA SOHAM HOME — archivo canónico del lenguaje visual.

   Este archivo es la FUENTE DE VERDAD del diseño de Soham Home, y lo comparten dos
   superficies que tienen que verse como una sola cosa:

     · el sitio público   →  Web/sohamiot-web/smarthome.html
     · el cotizador       →  Home/Soham_Home/cotizador/src/sistema-soham.css (copia)

   Viven en repositorios distintos, así que la copia del cotizador lleva en su
   encabezado de dónde viene. **Cualquier cambio de token se hace AQUÍ y se copia**,
   nunca al revés: si los dos divergen, el cliente ve dos empresas distintas entre la
   propuesta que le enseñan en la sala y la página que abre después en su teléfono.

   ---------------------------------------------------------------------------
   DE DÓNDE SALE CADA COSA, para que nadie tenga que adivinar:

   COLOR y ACENTO — del manual normativo de la marca (`MANUAL_DE_MARCA.md` v3.1,
   confirmado contra el CSS en producción): verde sabio #059669 como único acento
   identitario de la rama Home, y tinta oscura de alto contraste.

   PROPORCIÓN, AIRE y CONTROLES — de sonos.com, pedida por Juan el 2026-08-10 y
   medida en el sitio, no recordada: lienzo blanco, titulares en peso 500 —nunca
   negrita—, botones en píldora con borde de 2 px, y color que entra por la
   fotografía. La restricción es el punto: el acento aparece UNA vez por pantalla.

   TIPOGRAFÍA — DM Sans, que ya era la fuente de cuerpo de la marca y es del mismo
   linaje neo-grotesco que la `aktiv-grotesk` de Sonos, que es de pago. Space Grotesk
   queda reservada al nombre de la marca. Ambas se sirven desde el propio dominio,
   nunca desde Google: el cotizador tiene que abrir en un sótano sin señal.
   ============================================================================= */

:root{
  /* ---- Lienzo ---- */
  --blanco:#FFFFFF;
  --hueso:#F6F6F4;
  --arena:#EFEAE3;
  --linea:#E4E4E1;
  --linea-tenue:#EFEFEC;

  /* ---- Tinta ---- */
  --negro:#0A0A0A;
  --texto:#3D3D3D;
  --gris:#767674;

  /* ---- El único acento ---- */
  --verde:#059669;
  --verde-hover:#047857;
  --verde-tenue:#EDF9F3;

  /* ---- Señales ---- */
  --aviso:#8A5A0B;
  --aviso-tenue:#FBF6EA;
  --alto:#A32318;
  --alto-tenue:#FBF0EF;

  /* ---- Tipografía ---- */
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --marca:'Space Grotesk','DM Sans',system-ui,sans-serif;

  /* ---- Escala tipográfica ----
     Una sola escala, con proporción fija. El manual de marca registró como deuda que
     el sitio NO tenía escala real, sino valores acumulados sesión a sesión. Esta es. */
  --t-cartel:clamp(2.75rem,7vw,5rem);      /* titular de portada */
  --t-titulo:clamp(2rem,4.4vw,3.25rem);    /* titular de sección */
  --t-sub:clamp(1.35rem,2.4vw,1.75rem);    /* subtítulo */
  --t-guia:1.25rem;                        /* entrada de párrafo */
  --t-cuerpo:1.0625rem;                    /* cuerpo */
  --t-dato:0.9375rem;                      /* apoyo */
  --t-pie:0.8125rem;                       /* nota */

  /* ---- Ritmo. Base de 4, como el sistema de la referencia. ---- */
  --e1:.25rem; --e2:.5rem;  --e3:.75rem; --e4:1rem;
  --e5:1.5rem; --e6:2rem;   --e7:3rem;   --e8:4.5rem;
  --e9:7rem;   --e10:10rem;

  /* ---- Forma ---- */
  --pildora:999px;
  --r:12px;     /* medios */
  --r-lg:20px;  /* portadas y paneles */
  --tap:48px;

  --ancho:1180px;
}

/* ============================ Tipografías propias ============================ */
/* Las rutas son relativas a este archivo, así que la carpeta `fuentes/` debe estar
   junto a él en las dos superficies. */

@font-face{
  font-family:'DM Sans';
  src:url('fuentes/dm-sans-latin.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('fuentes/space-grotesk-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* ============================ Primitivas ============================ */
/* Lo que TIENE que verse idéntico en las dos superficies. La maquetación de cada
   página vive en su propio archivo; aquí solo el vocabulario compartido. */

.sh-titular{
  font:500 var(--t-cartel)/1.04 var(--sans);
  color:var(--negro);letter-spacing:-.035em;margin:0;
  text-wrap:balance;
}
.sh-titulo{
  font:500 var(--t-titulo)/1.1 var(--sans);
  color:var(--negro);letter-spacing:-.03em;margin:0;
  text-wrap:balance;
}
.sh-sub{
  font:500 var(--t-sub)/1.25 var(--sans);
  color:var(--negro);letter-spacing:-.02em;margin:0;
}
.sh-guia{
  font:400 var(--t-guia)/1.55 var(--sans);color:var(--texto);margin:0;
  max-width:62ch;
}
.sh-dato{font:400 var(--t-dato)/1.55 var(--sans);color:var(--gris);margin:0}

/* Píldora. La medida sale de la referencia: borde de 2 px y relleno amplio. */
.sh-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--e6);
  border:2px solid var(--negro);border-radius:var(--pildora);
  background:transparent;color:var(--negro);cursor:pointer;text-decoration:none;
  font:500 var(--t-cuerpo)/1 var(--sans);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.sh-btn:hover{background:var(--negro);color:var(--blanco)}
.sh-btn--pri{background:var(--verde);border-color:var(--verde);color:var(--blanco)}
.sh-btn--pri:hover{background:var(--verde-hover);border-color:var(--verde-hover);color:var(--blanco)}
.sh-btn--claro{background:var(--blanco);border-color:var(--blanco);color:var(--negro)}
.sh-btn--claro:hover{background:transparent;color:var(--blanco);border-color:var(--blanco)}

/* Pastilla de estado. Nunca lleva el acento salvo que marque algo accionable. */
.sh-pastilla{
  display:inline-flex;align-items:center;gap:var(--e2);
  padding:var(--e2) var(--e4);border-radius:var(--pildora);
  background:var(--hueso);color:var(--texto);
  font:500 var(--t-dato)/1.3 var(--sans);
}
.sh-pastilla--verde{background:var(--verde-tenue);color:var(--verde-hover)}
.sh-pastilla--aviso{background:var(--aviso-tenue);color:var(--aviso)}

/* El precio: la firma tipográfica compartida. La moneda SIEMPRE explícita. */
.sh-precio{display:inline-flex;align-items:baseline;gap:var(--e2)}
.sh-precio b{
  font:500 clamp(2.25rem,4vw,3rem)/1 var(--sans);color:var(--verde);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.sh-precio i{font:400 var(--t-dato)/1 var(--sans);font-style:normal;color:var(--gris)}

/* Foco visible, uno solo para todo el sistema. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--negro);outline-offset:3px;border-radius:var(--pildora);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}