/* ==========================================================================
   Motorteil — frontend
   1. Tokens y componentes del design system "Industry" (Claude Design)
   2. Estilos propios del sitio (tema oscuro/claro, animaciones, layout)
   Fuentes: Barlow / Barlow Condensed autohospedadas en frontend/fonts/
   (subset latin, woff2) — sin request a Google Fonts que bloquee el render.
   ========================================================================== */

/* Nombres de familia propios ("MT") para que ninguna fuente instalada en la PC
   del visitante pueda intervenir en el matching: el navegador solo puede
   resolver estos nombres con los .woff2 que servimos nosotros. */
@font-face {
  font-family: "Barlow MT";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed MT";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-condensed-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed MT";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed MT", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow MT", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  /* Sin negrita/itálica sintética: si falta un peso preferimos el real, no el
     engrosado falso del navegador (se ve pastoso y desprolijo). */
  font-synthesis: none;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ── componentes del design system ── */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — blueprint frame: components are wireframe objects — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }

/* ==========================================================================
   Sitio Motorteil — tema y comportamiento visual
   ========================================================================== */

#site {
  --brand-red: #e00b1f;
  --brand-yellow: #f6e732;
  --color-bg: #101315;
  --color-surface: #171b1e;
  --color-text: #eef0f2;
  --color-accent: var(--brand-yellow);
  --color-accent-600: #dccd18; /* hover/active de .btn-primary */
  --color-accent-700: #bfb210;
  --color-divider: rgba(238,240,242,0.20);
  --line: rgba(238,240,242,0.13);
  --dim: rgba(238,240,242,0.62);
  --plate: #0b0d0f;
  --hero-veil: 0,0,0; /* rgb del velo sobre el video del hero */
  /* Velos livianos: el cliente pidió ver la gráfica del video. El texto del hero
     se sostiene igual porque el gradiente de la izquierda arranca en --color-bg. */
  --hero-veil-strong: 0.46; /* alfa de los velos: fuerte / medio / suave */
  --hero-veil-mid: 0.24;
  --hero-veil-soft: 0.10;
  /* el video arranca apenas bajado y termina de lavarse con el scroll */
  --hero-video-limpio: 0.92;
  --hero-video-opacity: 0.85;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
/* En tema claro el amarillo no contrasta sobre fondo claro: el acento pasa a rojo */
#site[data-theme="light"] {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: var(--brand-red);
  --color-accent-600: #c40a1b;
  --color-accent-700: #a50917;
  --color-divider: rgba(29,31,32,0.20);
  --line: rgba(29,31,32,0.13);
  --dim: rgba(29,31,32,0.62);
  --plate: #e4e4e6;
  --hero-veil: 242,242,243; /* velo claro, más liviano que el oscuro para que el video se vea */
  --hero-veil-strong: 0.24;
  --hero-veil-mid: 0.10;
  --hero-veil-soft: 0.04;
  --hero-video-limpio: 0.96;
  --hero-video-opacity: 0.92;
}
/* Header y footer (.chrome) quedan siempre oscuros — el logo tiene el
   wordmark blanco — así que en tema claro recuperan la paleta oscura. */
#site[data-theme="light"] .chrome {
  --color-bg: #101315;
  --color-surface: #171b1e;
  --color-text: #eef0f2;
  --color-accent: var(--brand-yellow);
  --color-accent-600: #dccd18;
  --color-accent-700: #bfb210;
  --color-divider: rgba(238,240,242,0.20);
  --line: rgba(238,240,242,0.13);
  --dim: rgba(238,240,242,0.62);
  --plate: #0b0d0f;
}
#site a:not(.btn) { color: var(--color-accent); text-decoration: none; }
#site a:not(.btn):hover { color: var(--color-text); }
#site a.btn { text-decoration: none; }
#site a.btn-primary, #site a.btn-primary:hover { color: var(--color-bg); }
#site ::selection { background: var(--color-accent); color: var(--color-bg); }
#site :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* reveal on scroll */
[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-rv][data-in="true"] { opacity: 1; transform: none; }

/* globos del hero, sincronizados con el video */
[data-globo] {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--plate) 82%, transparent);
  backdrop-filter: blur(6px);
  padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(18px) scale(.99);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
[data-globo][data-on="true"] { opacity: 1; transform: none; pointer-events: auto; }
[data-globo-chip] { flex: 1; height: 3px; padding: 0; border: 0; background: var(--line); cursor: pointer; }

/* chips (filtros de catálogo y selector de globos) */
[data-chip][data-on="true"] { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }

/* navegación */
[data-navlink]:hover { color: var(--color-text); }
[data-navlink] .nav-underline { display: none; position: absolute; left: 15px; right: 15px; bottom: 30px; height: 2px; background: var(--color-accent); }
[data-navlink][data-active="true"] .nav-underline { display: block; }
#site .btn { white-space: nowrap; font-size: 15px; }

/* tiles de producto */
[data-tile]:hover [data-tilezoom] { transform: scale(1.06); }
[data-tile]:hover { border-color: var(--color-accent); }

/* mega menú */
[data-mega] {
  position: absolute; left: 0; right: 0; top: 100px;
  background: var(--plate);
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
[data-mega][data-on="true"] { opacity: 1; transform: none; pointer-events: auto; }

/* ==========================================================================
   Layout del sitio — clases que reemplazan los estilos inline de la vista
   (frontend.php). Los selectores `#site a.x` empatan la especificidad de
   `#site a:not(.btn)` y ganan por orden.
   ========================================================================== */

.wrap { max-width: 1480px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* — header — */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--plate); }
.header-bar { display: flex; align-items: center; gap: 30px; height: 96px; }
#site a.brand { display: flex; align-items: center; color: var(--color-text); flex-shrink: 0; }
.brand img { height: 72px; width: auto; display: block; }
.header-rule { height: 4px; background: linear-gradient(90deg, var(--brand-red) 0%, var(--brand-yellow) 100%); }
.main-nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
#site a.nav-link {
  position: relative; padding: 38px 15px;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; left: 11px; pointer-events: none; }
.search-field {
  background: transparent; border: 1px solid var(--line); color: var(--color-text);
  font-family: var(--font-body); font-size: 13px; border-radius: 0;
}
.search-field--header { width: 250px; height: 38px; padding: 0 12px 0 32px; outline-offset: 2px; }
.search-field--side { width: 100%; height: 40px; padding: 0 12px; }
.theme-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--dim); cursor: pointer;
}

/* — variantes de botón (la tipografía base la pone #site .btn) — */
#site .btn-lg { height: 46px; padding: 0 26px; letter-spacing: 0.16em; text-transform: uppercase; }
#site .btn-quote { height: 40px; padding: 0 20px; letter-spacing: 0.14em; text-transform: uppercase; }
#site .btn-send { height: 40px; padding: 0 16px; letter-spacing: 0.14em; text-transform: uppercase; }
#site .btn-submit { height: 50px; letter-spacing: 0.18em; text-transform: uppercase; }
#site .btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* — tiles compartidos (mega menú, líneas del home, catálogo) — */
#site a.tile-card { display: block; color: var(--color-text); transition: border-color .3s ease; }
#site a.mega-tile { display: block; border: 1px solid var(--line); color: var(--color-text); transition: border-color .25s ease; }
.tile-media { position: relative; overflow: hidden; background: var(--color-surface); }
.tile-media--xs { height: 132px; }
.tile-media--sm { height: 220px; }
.tile-media--lg { height: 300px; }
[data-tilezoom] { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
/* Los soportes de motor solo se venden en Uruguay: la tarjeta lo avisa antes
   de que el visitante entre a la ficha o escriba a la distribuidora equivocada. */
.zona-tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 9px; background: var(--color-accent); color: #0b0d0f;
  font-family: var(--font-heading); font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
/* en claro el acento es el rojo de marca: ahí el texto negro no contrasta */
#site[data-theme="light"] .zona-tag { color: #fff; }
/* con 6 líneas ya no entran cinco columnas fijas */
.mega-grid { padding-top: 30px; padding-bottom: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.mega-tile-body { padding: 14px 16px 16px; }
.mega-tile-name { font-family: var(--font-heading); font-weight: 600; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; }
.mega-tile-blurb { font-size: 12.5px; color: var(--dim); margin-top: 5px; }

/* — hero — */
/* El fondo y los velos siguen al tema: en oscuro el video se apaga sobre negro,
   en claro se lava sobre el gris claro para que el texto oscuro tenga contraste. */
.hero { position: relative; background: var(--color-bg); }
.hero-stage { position: relative; min-height: calc(100vh - 100px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--hero-video-opacity); }
/* lluvia sobre vidrio (opt-in, HERO_GOTAS en el controller): va pegada al video */
.hero-gotas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-shade-x { position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-bg) 4%, rgba(var(--hero-veil),var(--hero-veil-mid)) 55%, rgba(var(--hero-veil),var(--hero-veil-strong)) 100%); }
.hero-shade-y { position: absolute; inset: 0; background: linear-gradient(0deg, var(--color-bg) 1%, transparent 42%); }
.hero-inner {
  position: relative; width: 100%; padding-bottom: 64px;
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: 48px; align-items: end;
}
.kicker-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.kicker-line { width: 34px; height: 1px; background: var(--color-accent); display: block; }
.kicker { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-accent); }
.hero-title { font-size: clamp(36px,4.1vw,62px); line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 22px; max-width: 14ch; }
.hero-lead { font-size: 17px; color: var(--dim); max-width: 48ch; margin: 0 0 30px; text-wrap: pretty; }
/* En claro el velo es liviano y el video queda visible: el párrafo pasa a
   color pleno y título/párrafo llevan un halo claro para despegarse del fondo. */
#site[data-theme="light"] .hero-lead { color: var(--color-text); }
#site[data-theme="light"] .hero-title,
#site[data-theme="light"] .hero-lead { text-shadow: 0 0 14px rgba(var(--hero-veil),0.9), 0 0 4px rgba(var(--hero-veil),0.7); }
/* — hero: entrada atada al progreso del scroll (solo desktop) —
   main.js le pone a .hero dos variables que van de 0 a 1 mientras se recorre la
   pantalla de más: --hero-p (crudo, mueve velo y video) y --hero-in (con
   arranque retrasado, mueve los textos). El atributo data-scrollfx lo pone el
   propio JS, así que sin JS —o con prefers-reduced-motion— nada de esto aplica
   y el hero se comporta como una sección normal. */
@media (min-width: 1001px) {
  #site[data-scrollfx] .hero { height: 200vh; }
  /* se queda pegado justo debajo del header (96px de barra + 4px de regla) */
  #site[data-scrollfx] .hero-stage { position: sticky; top: 100px; height: calc(100vh - 100px); min-height: 0; }
  /* arranca en --hero-video-limpio (apenas bajado, no a opacidad plena) y
     termina de lavarse contra el fondo en --hero-video-opacity */
  #site[data-scrollfx] .hero-video {
    opacity: calc(var(--hero-video-limpio) - (var(--hero-video-limpio) - var(--hero-video-opacity)) * var(--hero-p));
    transform: scale(calc(1 + 0.05 * var(--hero-p)));
  }
  #site[data-scrollfx] .hero-shade-x,
  #site[data-scrollfx] .hero-shade-y { opacity: var(--hero-p); }
  #site[data-scrollfx] .hero-inner {
    opacity: var(--hero-in);
    transform: translateY(calc((1 - var(--hero-in)) * 34px));
  }
  #site[data-scrollfx] .hero-cue { display: flex; opacity: calc(1 - var(--hero-in)); }
}

/* — hero: invitación a scrollear —
   Banda opaca de punta a punta: atrás corre un video y no hay ningún color de
   fondo que se pueda dar por seguro, así que el aviso se apoya en su propia
   franja en vez de pelearle al cuadro que toque. Usa la paleta del header y
   del footer, que también son placas opacas sobre el resto del sitio. */
.hero-cue {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: none; align-items: center; justify-content: center; gap: 14px;
  padding: 15px 24px;
  background: var(--plate); color: var(--color-text);
  pointer-events: none;
}
.hero-cue-label { font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; }
.hero-cue-wheel { animation: cue-wheel 1.9s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cue-wheel {
  0%, 12% { transform: translateY(0); opacity: 1; }
  55%, 100% { transform: translateY(7px); opacity: 0; }
}

.globos { position: relative; }
.globos-stack { position: relative; height: 206px; }
.globo-num { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.28em; color: var(--color-accent); margin-bottom: 12px; }
.globo-title { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1.06; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 10px; }
.globo-text { font-size: 14.5px; color: var(--dim); text-wrap: pretty; }
.globo-chips { display: flex; gap: 6px; margin-top: 22px; }

/* — home: secciones — */
.rule-top { border-top: 1px solid var(--line); }
.home-cats { padding-top: 96px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 38px; }
.cats-title { font-size: clamp(34px,3.6vw,54px); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }
.link-all { font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.cats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.cat-body { padding: 24px 24px 28px; border-top: 1px solid var(--line); }
.cat-name { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.cat-blurb { font-size: 14px; color: var(--dim); margin: 8px 0 16px; text-wrap: pretty; }
.cat-count { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }

.home-feature { padding-top: 110px; }
.feature-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.fig-surface { margin: 0; background: var(--color-surface); }
.fig-plain { margin: 0; }
.img-square { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.img-block { width: 100%; display: block; }
.eyebrow { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; }
.feature-title { font-size: clamp(34px,3.8vw,58px); line-height: 0.98; text-transform: uppercase; margin: 0 0 18px; }
.feature-lead { font-size: 16.5px; color: var(--dim); max-width: 52ch; margin: 0 0 30px; text-wrap: pretty; }
.spec-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 30px; }
.spec-cell { background: var(--color-bg); padding: 18px 20px; }
.spec-k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.spec-v { font-family: var(--font-heading); font-weight: 600; font-size: 21px; margin-top: 4px; }

.lab-band { margin-top: 110px; background: var(--plate); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lab-inner { padding-top: 84px; padding-bottom: 84px; }
.lab-grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 56px; align-items: center; }
.lab-title { font-size: clamp(32px,3.4vw,50px); line-height: 1; text-transform: uppercase; margin: 0 0 18px; }
.lab-lead { font-size: 16px; color: var(--dim); max-width: 46ch; margin: 0; text-wrap: pretty; }
.lab-link { display: inline-block; margin-top: 26px; }

.home-cta { padding-top: 96px; padding-bottom: 110px; }
.cta-band {
  padding: 64px; display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 40px; align-items: center;
  background: var(--brand-yellow); color: #0b0d0f; border-color: var(--brand-yellow);
}
.cta-title { font-size: clamp(30px,3vw,46px); line-height: 1; text-transform: uppercase; margin: 0 0 12px; color: #0b0d0f; }
.cta-lead { font-size: 16.5px; margin: 0; max-width: 52ch; opacity: 0.82; }
#site a.cta-btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 34px;
  background: #0b0d0f; color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}

/* — páginas internas — */
.page { padding-bottom: 110px; }
.page--empresa, .page--calidad, .page--contacto { padding-top: 72px; }
.page--productos { padding-top: 64px; }
.page--ficha { padding-top: 40px; }

.empresa-title { font-size: clamp(32px,3.6vw,52px); line-height: 0.96; text-transform: uppercase; margin: 0 0 44px; max-width: 16ch; }
.empresa-cols { display: grid; grid-template-columns: repeat(2,1fr); gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.empresa-lead { font-size: 18px; margin: 0; text-wrap: pretty; }
.empresa-lead--dim { color: var(--dim); }
.empresa-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

/* calidad: la leyenda grande es el mensaje de la página */
.calidad-title { font-size: clamp(44px,7.4vw,112px); line-height: 0.9; text-transform: uppercase; margin: 0 0 40px; max-width: 12ch; }
.calidad-pct { color: var(--color-accent); }
.calidad-intro { padding-bottom: 56px; border-bottom: 1px solid var(--line); }
.calidad-lead { font-size: 20px; max-width: 52ch; margin: 0; text-wrap: pretty; }
.fig-gap-lg { margin: 64px 0 0; }
.fig-gap { margin: 22px 0 0; }

/* — catálogo — */
.catalog-title { font-size: clamp(28px,3.1vw,46px); text-transform: uppercase; margin: 0 0 34px; }
.catalog-grid { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 44px; align-items: start; }
.catalog-aside { position: sticky; top: 124px; }
.overline { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.overline--gap { margin-top: 26px; }
.filter-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.filter-btn {
  background: var(--color-bg); border: 0; color: var(--color-text);
  text-align: left; padding: 13px 15px;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px;
}
.filter-count { opacity: 0.55; }
/* el JS esconde los filtros que no dejarían nada a la vista */
.filter-btn[hidden] { display: none; }
.filter-clear {
  display: block; margin-top: 14px; background: transparent; border: 0; padding: 0;
  color: var(--color-accent); cursor: pointer;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.result-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.product-body { padding: 18px 18px 20px; border-top: 1px solid var(--line); }
.product-ref { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }
.product-name { font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.12; margin: 6px 0 8px; }
.product-medida { font-size: 13px; color: var(--dim); }

/* — ficha — */
.breadcrumb { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 30px; }
.breadcrumb .sep { opacity: 0.5; }
.ficha-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: 56px; align-items: start; }
.ficha-title { font-size: clamp(32px,3.4vw,50px); line-height: 1; text-transform: uppercase; margin: 0 0 16px; }
.ficha-desc { font-size: 16.5px; color: var(--dim); margin: 0 0 30px; max-width: 54ch; text-wrap: pretty; }
.ficha-table { margin-bottom: 30px; }
.spec-key { width: 38%; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.spec-val { font-family: var(--font-heading); font-weight: 600; font-size: 16px; }
/* Las fotos buenas del catálogo son de 800 px; acotar la figura evita ampliarlas
   y deja lugar para la tira de miniaturas debajo. */
.ficha-media { max-width: 440px; }
.fig-surface--fam { max-width: 440px; }

/* — ficha: tira de fotos de la familia — */
.ficha-thumbs { display: flex; gap: 8px; margin-top: 12px; }
/* ídem .carousel-nav: sin esto, la tira de una sola foto se seguía viendo */
.ficha-thumbs[hidden] { display: none; }
.ficha-thumb {
  width: 74px; padding: 0; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--line);
}
.ficha-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.ficha-thumb[data-on="true"] { border-color: var(--color-accent); }
.ficha-thumb:hover { border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }

/* — ficha: carrusel de otras medidas —
   Las mismas tarjetas del catálogo, en una tira que se corre en horizontal.
   El scroll nativo hace el trabajo (arrastre en táctil, rueda en trackpad) y
   las flechas solo lo empujan; por eso no hay estado de "slide actual". */
.ficha-otras { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.carousel-head .ficha-otras-title { margin: 0; }
.carousel-nav { display: flex; gap: 8px; flex: 0 0 auto; }
/* el display de la clase le gana al [hidden] del navegador: hay que repetirlo */
.carousel-nav[hidden] { display: none; }
.carousel-btn { font-size: 20px; line-height: 1; padding-bottom: 3px; }
.carousel-btn:not(:disabled):hover { border-color: var(--color-accent); color: var(--color-accent); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
/* el padding compensa las esquinas del marco blueprint, que se dibujan 6 px
   afuera de la tarjeta y las comería el overflow del viewport */
.carousel-viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  margin: -8px; padding: 8px;
  /* sin esto el snap del primer artículo cae en scrollLeft: 8 (el padding) y la
     flecha izquierda nunca se apagaría por estar "en el inicio" */
  scroll-padding-left: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport:focus-visible { outline: 1px solid var(--color-accent); outline-offset: -2px; }
.carousel-track { display: flex; gap: 20px; }
#site a.carousel-card { flex: 0 0 232px; scroll-snap-align: start; }
.carousel-card .product-body { padding: 14px 16px 16px; }
.carousel-card .product-name { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .carousel-viewport { scroll-behavior: auto; }
}

/* — ficha: tabla de medidas de la familia — */
.ficha-otras-title { font-size: clamp(20px,1.8vw,28px); text-transform: uppercase; margin: 0 0 24px; }

/* — contacto — */
.dist-block { margin-bottom: 64px; }
.dist-title { font-size: clamp(24px,2.2vw,34px); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 20px; }
.dist-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.dist-card {
  display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 22px 30px; height: 120px;
  transition: border-color .3s ease;
}
.dist-card:hover { border-color: var(--color-accent); }
.dist-card img { max-height: 100%; max-width: 220px; object-fit: contain; display: block; }
/* zona de cobertura debajo del logo: es lo que decide a qué distribuidor escribir */
.dist-item { display: flex; flex-direction: column; }
.dist-zona {
  margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; font-family: var(--font-heading); font-size: 17px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text);
}
.dist-flag { width: 27px; height: 18px; flex: none; display: block; box-shadow: 0 0 0 1px var(--line); }

.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; }
.contact-title { font-size: clamp(28px,3vw,45px); line-height: 0.98; text-transform: uppercase; margin: 0 0 20px; }
.contact-lead { font-size: 17px; color: var(--dim); max-width: 44ch; margin: 0 0 40px; text-wrap: pretty; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-name { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
#site .input { background: transparent; border-color: var(--line); color: var(--color-text); }
.input--lg { height: 46px; }
.input--area { resize: vertical; padding: 12px; }
.form-ok { font-size: 13px; color: var(--color-accent); letter-spacing: 0.06em; }
.form-error { font-size: 13px; color: #e5484d; letter-spacing: 0.06em; }
#site .input[aria-invalid="true"] { border-color: #e5484d; }
/* select de zona: flecha propia (la nativa no respeta el tema) */
.select-wrap { position: relative; display: block; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
#site select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
#site select.input option { background: var(--plate); color: var(--color-text); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* el sello flotante de reCAPTCHA se reemplaza por .captcha-note, como permite Google */
.grecaptcha-badge { visibility: hidden; }
.captcha-note { font-size: 12px; color: var(--dim); margin: 0; }
#site .captcha-note a { color: inherit; text-decoration: underline; }

/* — footer — */
.site-footer { background: var(--plate); border-top: 1px solid var(--line); }
.footer-grid { padding-top: 66px; padding-bottom: 26px; display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap: 40px; }
.footer-logo { margin-bottom: 16px; }
.footer-logo img { height: 64px; width: auto; display: block; }
.footer-blurb { font-size: 14px; color: var(--dim); max-width: 34ch; margin: 0; }
.overline--footer { margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.news-blurb { font-size: 13px; color: var(--dim); margin: 0 0 12px; }
.news-row { display: flex; gap: 8px; }
.news-input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line); color: var(--color-text);
  font-family: var(--font-body); font-size: 13px; border-radius: 0;
}
.footer-legal { padding-top: 22px; padding-bottom: 30px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); }

/* páginas (SPA): solo la activa es visible, con transición al conmutar */
main[data-page] { display: none; }
main[data-page][data-active="true"] { display: block; }
/* swipe horizontal: la página saliente se va hacia la izquierda y la nueva
   entra desde la derecha (#site lleva overflow-x: clip, no hay scroll lateral) */
main[data-page].page-enter { animation: pageIn .45s cubic-bezier(.2,.7,.2,1) both; }
main[data-page].page-leave { animation: pageOut .2s ease-in both; }
@keyframes pageIn { from { opacity: 0; transform: translateX(80px); } }
@keyframes pageOut { to { opacity: 0; transform: translateX(-60px); } }
/* al ir "atrás" (navegador, o a una página anterior en el orden del sitio,
   p. ej. ficha → catálogo) el swipe se invierte; el JS setea data-dir en #site */
#site[data-dir="back"] main[data-page].page-enter { animation-name: pageInBack; }
#site[data-dir="back"] main[data-page].page-leave { animation-name: pageOutBack; }
@keyframes pageInBack { from { opacity: 0; transform: translateX(-80px); } }
@keyframes pageOutBack { to { opacity: 0; transform: translateX(60px); } }
@media (prefers-reduced-motion: reduce) {
  main[data-page].page-enter, main[data-page].page-leave { animation: none; }
  .hero-cue-wheel { animation: none; }
}

/* ==========================================================================
   Responsive
   Breakpoints: 1180 (header apretado) · 1000 (menú hamburguesa, grillas a
   una columna) · 800 · 640 · 480. Mobile-last: el diseño base es desktop.
   ========================================================================== */

#site { overflow-x: clip; }

/* botón hamburguesa y búsqueda del panel móvil: solo existen en móvil */
.menu-btn { display: none; }
.search-box--menu { display: none; }

@media (max-width: 1180px) {
  .header-bar { gap: 18px; }
  .main-nav { margin-left: 4px; }
  #site a.nav-link { padding: 38px 10px; letter-spacing: 0.12em; }
  [data-navlink] .nav-underline { left: 10px; right: 10px; }
  .search-field--header { width: 190px; }
  .wrap { padding-left: 24px; padding-right: 24px; }
  .catalog-grid { grid-template-columns: 210px minmax(0,1fr); gap: 32px; }
  .feature-grid, .lab-grid, .ficha-grid { gap: 40px; }
  .contact-grid { gap: 48px; }
}

@media (max-width: 1000px) {
  .wrap { padding-left: 22px; padding-right: 22px; }

  /* — header: hamburguesa — */
  .header-bar { height: 72px; gap: 12px; }
  .brand img { height: 52px; }
  .search-box--header { display: none; }
  [data-mega] { display: none; }
  .menu-btn {
    display: grid; place-items: center; width: 38px; height: 38px;
    background: transparent; border: 1px solid var(--line); color: var(--color-text); cursor: pointer;
  }
  .menu-btn .ico-close { display: none; }
  #site[data-menu="open"] .menu-btn .ico-open { display: none; }
  #site[data-menu="open"] .menu-btn .ico-close { display: block; }

  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--plate); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 76px); overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  #site[data-menu="open"] .main-nav { display: flex; }
  #site a.nav-link { padding: 18px 22px; font-size: 16px; letter-spacing: 0.16em; border-top: 1px solid var(--line); }
  #site a.nav-link[data-active="true"] { color: var(--color-accent); }
  [data-navlink] .nav-underline { display: none !important; }
  .search-box--menu { display: flex; padding: 16px 22px 20px; border-top: 1px solid var(--line); }
  .search-box--menu svg { left: 33px; }
  .search-field--menu { width: 100%; height: 42px; padding: 0 12px 0 32px; font-size: 14px; }

  /* — hero — */
  .hero-stage { min-height: 0; align-items: stretch; }
  .hero-shade-x { background: linear-gradient(90deg, rgba(var(--hero-veil),var(--hero-veil-strong)) 0%, rgba(var(--hero-veil),var(--hero-veil-mid)) 100%); }
  .hero-shade-y { background: linear-gradient(0deg, var(--color-bg) 6%, rgba(var(--hero-veil),var(--hero-veil-strong)) 55%, rgba(var(--hero-veil),var(--hero-veil-soft)) 100%); }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
  .hero-title { font-size: clamp(34px, 6vw, 52px); max-width: 16ch; }
  .hero-lead { font-size: 16px; }
  /* los globos pasan de posición absoluta con alto fijo a apilado en grid,
     así el alto lo da el globo más largo y no se corta el texto */
  .globos-stack { display: grid; height: auto; min-height: 180px; }
  [data-globo] { position: relative; inset: auto; grid-area: 1 / 1; padding: 22px 22px; }
  .globo-title { font-size: 26px; }

  /* — home — */
  .home-cats { padding-top: 64px; }
  .section-head { flex-wrap: wrap; margin-bottom: 28px; }
  .cats-grid { gap: 16px; }
  .cat-body { padding: 18px 18px 22px; }
  .cat-name { font-size: 21px; }
  .home-feature { padding-top: 72px; }
  .lab-band { margin-top: 72px; }
  .lab-inner { padding-top: 60px; padding-bottom: 60px; }
  .home-cta { padding-top: 64px; padding-bottom: 72px; }
  .cta-band { padding: 44px 40px; }

  /* — páginas internas — */
  .page { padding-bottom: 72px; }
  .page--empresa, .page--calidad, .page--contacto { padding-top: 44px; }
  .page--productos { padding-top: 40px; }
  .page--ficha { padding-top: 28px; }
  .fig-gap-lg { margin-top: 40px; }

  /* catálogo: filtros arriba como chips, grilla debajo */
  .catalog-grid { grid-template-columns: 1fr; gap: 28px; }
  .catalog-aside { position: static; }
  .filter-list { flex-direction: row; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; }
  .filter-btn { border: 1px solid var(--line); padding: 10px 14px; font-size: 13px; }
  .overline--gap { margin-top: 18px; }
  .search-field--side { max-width: 360px; }
  .product-grid { gap: 16px; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 28px; padding-top: 48px; }
}

@media (max-width: 800px) {
  .feature-grid, .lab-grid, .ficha-grid, .contact-grid, .empresa-cols { grid-template-columns: 1fr; gap: 32px; }
  .empresa-cols { padding-bottom: 40px; }
  .empresa-title { margin-bottom: 28px; }
  .empresa-lead { font-size: 17px; }
  .calidad-title { margin-bottom: 28px; }
  .calidad-intro { padding-bottom: 40px; }
  .calidad-lead { font-size: 17px; }
  .lab-grid figure { order: -1; }
  .cta-band { grid-template-columns: 1fr; gap: 24px; padding: 36px 28px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-media--sm { height: 190px; }
  .carousel-track { gap: 16px; }
  #site a.carousel-card { flex-basis: 200px; }
}

@media (max-width: 640px) {
  .wrap { padding-left: 18px; padding-right: 18px; }
  .btn-quote { display: none; }
  .hero-inner { padding-top: 48px; padding-bottom: 36px; gap: 32px; }
  .hero-title { font-size: clamp(30px, 8.2vw, 44px); }
  .kicker { letter-spacing: 0.24em; }
  .cats-grid { grid-template-columns: 1fr; }
  .tile-media--lg { height: 220px; }
  .spec-cell { padding: 14px 16px; }
  .spec-v { font-size: 18px; }
  .dist-grid { grid-template-columns: 1fr; gap: 14px; }
  .dist-card { height: 104px; }
  .dist-block { margin-bottom: 44px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-blurb { max-width: none; }
  .footer-legal { font-size: 11px; }
  .breadcrumb { margin-bottom: 20px; }
}

@media (max-width: 480px) {
  .header-bar { height: 64px; }
  .brand img { height: 46px; }
  #site .btn-lg { height: 44px; padding: 0 18px; letter-spacing: 0.12em; }
  .btn-row { gap: 10px; }
  .product-grid { gap: 12px; }
  .tile-media--sm { height: 150px; }
  .product-body { padding: 14px 14px 16px; }
  .product-name { font-size: 17px; }
  .carousel-track { gap: 12px; }
  #site a.carousel-card { flex-basis: 168px; }
  .carousel-card .product-name { font-size: 15px; }
  [data-globo] { padding: 18px; }
  .globo-title { font-size: 23px; }
  .spec-key { width: 42%; }
  .contact-lead { margin-bottom: 28px; }
}

/* — paginador del catálogo — */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 40px; }
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 10px; cursor: pointer;
  background: var(--color-bg); border: 1px solid var(--line); color: var(--color-text);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.pager-btn:hover:not(:disabled):not([data-on="true"]) { border-color: var(--color-accent); }
.pager-btn[data-on="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.pager-btn:disabled { opacity: 0.3; cursor: default; }
.pager-btn--gap { border-color: transparent; background: transparent; min-width: 20px; padding: 0; }