/* ============================================================
   Tienda de equipo para alberca — hoja de estilos
   Tokens de diseño: ver :root y CLAUDE.md
   ============================================================ */

:root{
  /* Agua tratada en sombra */
  --deep:#08312F;
  --deep-2:#0E4543;
  --deep-3:#135B56;
  /* Agua iluminada */
  --glow:#4FE3C1;
  --glow-dk:#0FA98C;
  /* --glow-dk NO es para texto: sobre --stone da 2.44:1, sobre blanco
     2.97:1 — ninguno alcanza el mínimo de 4.5:1. Es para bordes, fondos
     de botón (con texto claro encima) y estados hover. Para texto/acento
     sobre fondo claro, usar --glow-aa (5.08:1 sobre --stone, 6.18:1
     sobre blanco) o --glow-aa-2 sobre --stone-2 específicamente
     (--glow-aa ahí da 4.41:1, corto; --glow-aa-2 da 4.99:1). */
  --glow-aa:#126E59;
  --glow-aa-2:#106552;
  /* Acento: SOLO para mayoreo / cuenta de instalador */
  --coral:#FF6A4D;
  --coral-dk:#E24E32;
  /* Superficies */
  --stone:#EBE9E2;
  --stone-2:#DDDACF;
  --ink:#0A2422;
  --ink-mid:#4E635F;
  --line:rgba(10,36,34,.13);
  --line-lt:rgba(235,233,226,.18);
  /* Layout: sangría compartida entre el logo y la franja coral. Si el
     logo cambia de tamaño, se ajusta aquí y todo lo demás se recalcula. */
  --wrap-pad:24px;
  /* Ancho único de la columna de contenido (index, categoría, catálogo,
     instalador, mantenimiento y guías). Un solo lugar: lo usa .wrap más
     abajo. NO afecta a la cabecera, la franja de instalador ni el pie (van
     a sangre completa, max-width:none en css/05), ni a la ficha de producto
     (también a sangre, css/09), ni al plano de la calculadora. */
  --wrap-max:1400px;
  /* Ritmo de movimiento: tres duraciones y dos curvas que usan TODAS las
     transiciones de css/*.css. No cubren las animaciones ambientales (foGlow,
     bob) ni la marquesina —esas van por keyframes/JS—. Reparto: rápido para
     color/fondo/borde/opacidad en hover y foco; medio para la elevación de
     tarjetas (transform + box-shadow); lento para paneles y barras que entran,
     el interruptor de instalador y los fades. */
  --t-fast:.15s;
  --t-med:.18s;
  --t-slow:.28s;
  --ease:ease;                              /* curva estándar (la de por defecto) */
  --ease-switch:cubic-bezier(.4,.05,.2,1);  /* interruptor Mostrador/Tu cuenta */
  --logo-w:48px;
  --logo-gap:12px;
  /* Propios del plano de la calculadora (calculadora.html). --deep-rail ya
     NO pinta el rail: toda la L oscura (cabecera, rail, zócalo y pie) va en
     --ink. Quedó como la tinta del dibujo —bordes de .pshape, regla de
     profundidad, cotas y líneas de la cuadrícula—. --paper es el "papel" claro
     del área de dibujo. --calc-rail es el ancho del rail, compartido con la
     primera columna del zócalo para que el borde del rail caiga exacto sobre
     el primer divisor del zócalo a cualquier ancho. */
  --deep-rail:#0E2E2C;
  --paper:#EDE9DE;
  --calc-rail:clamp(280px,25%,380px);
}

*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] es un atributo, no una clase: cualquier clase que declare su
   propio "display" (p. ej. .promo-card con display:flex) le gana en cascada
   al [hidden] de la hoja del navegador, porque ambos tienen la misma
   especificidad y el autor siempre gana sobre el user-agent. Esta regla lo
   fuerza de forma global, para que "hidden" oculte sin importar qué otra
   clase traiga el elemento. */
[hidden]{display:none!important}
/* overflow-x:hidden vive en html, no en body: si un eje tiene overflow
   distinto de "visible" y el otro se deja en "visible", la especificación
   convierte a ESE OTRO en "auto" — con overflow-x:hidden en body, su
   overflow-y calculado quedaba en "auto" sin haberlo pedido, y body pasaba
   a ser candidato a contenedor de scroll propio, con un desfase pequeño
   contra el scroll real de la ventana (afectaba, por ejemplo, la foto
   sticky de mantenimiento.html). Puesto en html, el mismo bloqueo de
   scroll lateral no arrastra ese efecto porque scroll-behavior ya vive
   ahí y no hay una segunda declaración de overflow en el mismo elemento.
   background:var(--stone) es del mismo tipo de arreglo: sin fondo propio
   en html (antes de esta línea era el único elemento con background sin
   declarar en toda la hoja), la franja que un navegador móvil descubre al
   ocultar su barra de direcciones puede quedar sin pintar hasta que se
   repinte el layout. --stone es el fondo de body en las 8 páginas del
   sitio (incluida calculadora.html: pg-calc solo oscurece .mast/.foot,
   no el body), así que un solo valor cubre el sitio entero. */
html{scroll-behavior:smooth;overflow-x:hidden;background:var(--stone)}
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--stone);color:var(--ink);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
/* Un solo ancho de columna de contenido para todo el sitio (--wrap-max,
   hoy 1400px): index, categoría, catálogo, instalador, mantenimiento y el
   cuerpo de las guías comparten esta regla. La cabecera, la franja de
   instalador y el pie la pisan con max-width:none en css/05 (van a sangre);
   la ficha de producto también (css/09). Antes las guías tenían una
   excepción propia (.wrap:has(>#guiaContent){max-width:1400px}) porque el
   resto iba a 1200: ya no hace falta, la regla general las cubre. */
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;line-height:1.03;letter-spacing:-.025em}
a{color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* Reduced-motion GLOBAL (vive aquí, en la base, porque aplica a las 8 páginas;
   antes estaba en css/08). Las guardas locales de otros archivos se quedan. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}