/* =========================================================================
   EBC Frenos — Fonts
   Saira Condensed -> display headlines (motorsport, condensed, uppercase)
   Saira           -> section titles, labels, buttons (technical semi-cond.)
   Inter           -> body, tables, part references, tabular figures
   ------------------------------------------------------------------------
   NOTE: served from Google Fonts CDN. Saira + Inter are the exact specified
   typefaces (delivery is CDN, not self-hosted). Swap for self-hosted woff2
   here if you need an offline / locked production build.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Families */
  --font-display: 'Saira Condensed', 'Saira', 'Arial Narrow', system-ui, sans-serif;
  --font-heading: 'Saira', 'Saira Condensed', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Part numbers / specs / prices reuse Inter with tabular + slashed-zero */
  --font-data: 'Inter', ui-monospace, 'SF Mono', monospace;

  /* OpenType feature presets */
  --feat-tabular: 'tnum' 1, 'zero' 1; /* @kind other */
  --feat-display: 'ss01' 1; /* @kind other */
}

/* Utility: technical numerals (part refs, prices, spec tables) */
.is-data,
[data-numerals='tabular'] {
  font-family: var(--font-data);
  font-feature-settings: var(--feat-tabular);
  font-variant-numeric: tabular-nums slashed-zero;
}
/* =========================================================================
   EBC Frenos — Color system
   ------------------------------------------------------------------------
   Four-role brand palette + a graphite bridge:
     · Black  #0a0a0a  -> impact / premium surfaces (header, footer, hero,
                          racing range bands, photography). The signature.
     · White           -> content surfaces (listings, product, forms) ~50%.
     · Blue   #00378d  -> structure, trust, headlines on light, secondary CTA.
     · Red    #e00209  -> ACTION ONLY: primary CTA, active search, price/offer,
                          "doesn't fit". Used in small doses.
     · Graphite #1a1d24 -> body text & mid-weight between black and white.

   RULES (enforced in components):
     - Never blue and red at equal weight, never one on top of the other.
     - Red never covers large surfaces. Black + white carry the contrast.
     - Each hue has a tint/shade ramp for hovers, fills and borders.

   Range/compound colors live in their own block — they are PRODUCT IDENTITY
   colors (badges/cards), independent of the brand action palette.
   ========================================================================= */

:root {
  /* ---- Brand: Blue (#00378d) — structure & trust ---- */
  --blue-950: #001531;
  --blue-900: #001f4f;
  --blue-800: #002a6b;
  --blue-700: #00378d; /* BASE */
  --blue-600: #0a47a6;
  --blue-500: #1559c2;
  --blue-400: #3f7ad6;
  --blue-300: #7ba4e4;
  --blue-200: #b6cdf0;
  --blue-100: #e0eafa;
  --blue-50:  #f1f6fd;

  /* ---- Brand: Red (#e00209) — action / accent only ---- */
  --red-900: #6e0205;
  --red-800: #930308;
  --red-700: #b8030a;
  --red-600: #e00209; /* BASE */
  --red-500: #f51820;
  --red-400: #f9555b;
  --red-300: #fb8a8e;
  --red-200: #fdc1c3;
  --red-100: #fde4e5;
  --red-50:  #fdf2f3;

  /* ---- Ink / Graphite / Neutral ramp ---- */
  --black: #0a0a0a;      /* impact surfaces — the signature black */
  --graphite-900: #121419;
  --graphite-800: #1a1d24; /* graphite — heavy text / mid weight */
  --graphite-700: #23272f;
  --graphite-600: #2f343d;
  --gray-700: #3a3f4a;
  --gray-600: #555b66;
  --gray-500: #6b7280;
  --gray-400: #9aa1ad;
  --gray-300: #c7ccd4;
  --gray-250: #d8dce2;
  --gray-200: #e4e7ec;
  --gray-150: #edeff3;
  --gray-100: #f4f5f7;
  --gray-50:  #fafbfc;
  --white: #ffffff;

  /* ---- Semantic status (functional) ---- */
  --ok-700: #1c7a3e;
  --ok-600: #1f9b4e;   /* "Compatible con tu vehículo" */
  --ok-100: #e4f6ea;
  --ok-50:  #f1faf4;
  --warn-700: #9a5b00;
  --warn-600: #c47a09; /* "Comprueba compatibilidad" (ámbar) */
  --warn-100: #fbf0d8;
  --warn-50:  #fdf8ee;
  --danger-600: var(--red-600); /* "No encaja" reuses action red */
  --danger-100: var(--red-100);

  /* =====================================================================
     SEMANTIC ALIASES — reach for these in components, not raw ramps
     ===================================================================== */

  /* Surfaces */
  --surface-impact: var(--black);          /* header / footer / hero / racing bands */
  --surface-impact-2: var(--graphite-900); /* raised panel on black */
  --surface-page: var(--gray-50);          /* default content page bg */
  --surface-card: var(--white);            /* product / form cards */
  --surface-sunken: var(--gray-100);       /* fields, wells, alt rows */
  --surface-sunken-2: var(--gray-150);
  --surface-brand: var(--blue-700);        /* trust panels / secondary bands */
  --surface-brand-deep: var(--blue-900);

  /* Borders / hairlines */
  --border-soft: var(--gray-200);
  --border: var(--gray-250);
  --border-strong: var(--gray-300);
  --border-onblack: rgba(255, 255, 255, 0.12);
  --border-brand: var(--blue-700);

  /* Text on light */
  --text-strong: var(--graphite-800);   /* primary copy */
  --text-body: var(--gray-700);          /* secondary copy */
  --text-muted: var(--gray-500);         /* captions, meta */
  --text-faint: var(--gray-400);         /* disabled, placeholders */
  --text-heading: var(--blue-700);       /* headings on light */
  --text-link: var(--blue-600);
  --text-link-hover: var(--blue-800);
  --text-price: var(--red-600);          /* price / offer */

  /* Text on dark */
  --text-on-impact: var(--white);
  --text-on-impact-soft: rgba(255, 255, 255, 0.72);
  --text-on-impact-faint: rgba(255, 255, 255, 0.48);

  /* Action (red) */
  --action: var(--red-600);
  --action-hover: var(--red-700);
  --action-active: var(--red-800);
  --action-tint: var(--red-50);
  --action-on: var(--white);

  /* Secondary / structure (blue) */
  --secondary: var(--blue-700);
  --secondary-hover: var(--blue-800);
  --secondary-active: var(--blue-900);
  --secondary-tint: var(--blue-50);
  --secondary-on: var(--white);

  /* Focus ring */
  --focus-ring: var(--blue-500);
  --focus-ring-on-impact: var(--blue-300);

  /* Fit / compatibility states */
  --fit-yes-fg: var(--ok-700);
  --fit-yes-bg: var(--ok-50);
  --fit-yes-border: var(--ok-600);
  --fit-maybe-fg: var(--warn-700);
  --fit-maybe-bg: var(--warn-50);
  --fit-maybe-border: var(--warn-600);
  --fit-no-fg: var(--red-700);
  --fit-no-bg: var(--red-50);
  --fit-no-border: var(--red-600);

  /* =====================================================================
     EBC RANGE / COMPOUND COLORS — product identity (badges, cards, bands)
     Each range: surface color + ink (text/icon color that sits on it).
     ===================================================================== */
  --range-ultimax: #5b6573;     --range-ultimax-ink: #ffffff;   /* uso diario */
  --range-greenstuff: #2e9b3e;  --range-greenstuff-ink: #ffffff;/* urbano/dep. suave */
  --range-redstuff: #cc1f2d;    --range-redstuff-ink: #ffffff;  /* deportivo calle */
  --range-yellowstuff: #ffcf2e; --range-yellowstuff-ink: #1a1d24;/* calle + circuito */
  --range-bluestuff: #0a6fd0;   --range-bluestuff-ink: #ffffff; /* competición */
  --range-orangestuff: #f26a1b; --range-orangestuff-ink: #ffffff;/* race endurance */
  --range-rp1: #ff5a1f;         --range-rp1-ink: #ffffff;        /* racing */
  --range-rpx: #111317;         --range-rpx-ink: #ffffff;        /* racing top */
  /* Discs — technical steel neutrals (GD/USR/BSD/SD) */
  --range-gd: #2f343d;          --range-gd-ink: #ffffff;         /* ranurados/dimpled */
  --range-usr: #555b66;         --range-usr-ink: #ffffff;        /* sport ranurado fino */
  --range-bsd: #23272f;         --range-bsd-ink: #ffffff;        /* blade */
  --range-sd: #6b7280;          --range-sd-ink: #ffffff;         /* sport dimpled */
}
/* =========================================================================
   EBC Frenos — Typography scale
   Display = Saira Condensed (uppercase, condensed, motorsport).
   Heading = Saira (technical labels, buttons, eyebrows).
   Body    = Inter. Data/specs = Inter + tabular figures + slashed zero.
   ========================================================================= */

:root {
  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-display: 800; /* @kind other */

  /* ---- Line heights ---- */
  --lh-none: 1; /* @kind other */
  --lh-tight: 1.08; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-normal: 1.45; /* @kind other */
  --lh-relaxed: 1.6; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display: -0.01em;   /* @kind other */
  --ls-tight: -0.005em;    /* @kind other */
  --ls-normal: 0;          /* @kind other */
  --ls-label: 0.04em;      /* @kind other */
  --ls-caps: 0.08em;       /* @kind other */

  /* ---- Fluid type scale (clamp: min .. preferred .. max) ---- */
  --text-3xs: 0.6875rem;   /* 11px — micro labels */
  --text-2xs: 0.75rem;     /* 12px — meta, badges */
  --text-xs: 0.8125rem;    /* 13px — captions */
  --text-sm: 0.875rem;     /* 14px — secondary body, table */
  --text-base: 1rem;       /* 16px — body */
  --text-md: 1.0625rem;    /* 17px — lead body */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.5rem;       /* 24px */
  --text-2xl: clamp(1.75rem, calc(1.2rem + 1.8vw), 2.25rem); /* @kind spacing */
  --text-3xl: clamp(2.1rem, calc(1.4rem + 2.6vw), 3rem); /* @kind spacing */
  --text-4xl: clamp(2.6rem, calc(1.6rem + 4vw), 4rem); /* @kind spacing */
  --text-5xl: clamp(3.2rem, calc(1.8rem + 6vw), 5.5rem); /* @kind spacing */

  /* =====================================================================
     SEMANTIC TYPE ROLES
     ===================================================================== */
  /* Display (hero, section openers) — Saira Condensed, uppercase */
  --type-display-font: var(--font-display);
  --type-display-weight: var(--fw-display);
  --type-display-spacing: var(--ls-display);
  --type-display-leading: var(--lh-tight);
  --type-display-transform: uppercase;

  /* Headings — Saira Condensed / Saira */
  --type-h1-font: var(--font-display);
  --type-h2-font: var(--font-display);
  --type-h3-font: var(--font-heading);

  /* Eyebrow / label — Saira, uppercase, tracked */
  --type-eyebrow-font: var(--font-heading);
  --type-eyebrow-weight: var(--fw-semibold);
  --type-eyebrow-spacing: var(--ls-label);
  --type-eyebrow-transform: uppercase;

  /* Body — Inter */
  --type-body-font: var(--font-body);
  --type-body-weight: var(--fw-regular);
  --type-body-leading: var(--lh-relaxed);

  /* Button / UI label — Saira, uppercase */
  --type-button-font: var(--font-heading);
  --type-button-weight: var(--fw-semibold);
  --type-button-spacing: var(--ls-label);
  --type-button-transform: uppercase;
}

/* =========================================================================
   Convenience classes (optional helpers; components mostly set inline)
   ========================================================================= */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.t-h1 { font: var(--fw-display) var(--text-4xl)/var(--lh-tight) var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.t-h2 { font: var(--fw-bold) var(--text-3xl)/var(--lh-tight) var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); }
.t-h3 { font: var(--fw-bold) var(--text-xl)/var(--lh-snug) var(--font-heading); letter-spacing: var(--ls-tight); }
.t-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.t-body { font: var(--fw-regular) var(--text-base)/var(--lh-relaxed) var(--font-body); }
.t-small { font: var(--fw-regular) var(--text-sm)/var(--lh-normal) var(--font-body); }
.t-data {
  font-family: var(--font-data);
  font-feature-settings: var(--feat-tabular);
  font-variant-numeric: tabular-nums slashed-zero;
}
/* =========================================================================
   EBC Frenos — Spacing, radii, borders, shadows, motion, breakpoints, z
   Disciplined 4px base grid. Tighter radii read as "engineered / precise".
   ========================================================================= */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 2rem;      /* 32 */
  --space-8: 2.5rem;    /* 40 */
  --space-9: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-11: 5rem;     /* 80 */
  --space-12: 6rem;     /* 96 */
  --space-13: 8rem;     /* 128 */

  /* Section rhythm */
  --section-y: clamp(3rem, calc(2rem + 4vw), 5.5rem); /* @kind spacing */
  --page-max: 1600px;
  --page-gutter: 24px;
  /* Full-bleed rows (header/footer) use this to align their content with a
     `max-width: var(--page-max); padding: 0 var(--page-gutter)` body column. */
  --page-pad-x: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
  --container-max: 1600px;
  --container-pad: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* ---- Radii — tight & technical ---- */
  --radius-xs: 2px;     /* stamped badges */
  --radius-sm: 4px;
  --radius: 6px;        /* buttons, inputs */
  --radius-md: 8px;
  --radius-lg: 12px;    /* cards */
  --radius-xl: 16px;    /* hero panels */
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair: 1px;
  --bw: 1.5px;
  --bw-thick: 2px;
  --bw-accent: 3px;     /* left-accent rules, underlines */

  /* ---- Shadows — graphite-tinted, premium, restrained ---- */
  --shadow-xs: 0 1px 2px rgba(10, 12, 18, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 12, 18, 0.08), 0 1px 2px rgba(10, 12, 18, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 12, 18, 0.10), 0 2px 4px rgba(10, 12, 18, 0.06);
  --shadow-lg: 0 12px 28px rgba(10, 12, 18, 0.14), 0 4px 10px rgba(10, 12, 18, 0.08);
  --shadow-xl: 0 24px 56px rgba(10, 12, 18, 0.20), 0 8px 20px rgba(10, 12, 18, 0.10);
  /* Navy-tinted lift for cards on light (matches legacy filter card) */
  --shadow-brand: 0 8px 24px rgba(0, 55, 141, 0.10), 0 2px 6px rgba(0, 55, 141, 0.06);
  --shadow-brand-hover: 0 14px 34px rgba(0, 55, 141, 0.16), 0 4px 10px rgba(0, 55, 141, 0.08);
  /* Action glow for the primary CTA on dark */
  --shadow-action: 0 6px 18px rgba(224, 2, 9, 0.32);
  /* Inset hairline highlight on dark surfaces */
  --ring-onblack: inset 0 0 0 1px rgba(255, 255, 255, 0.08); /* @kind shadow */

  /* ---- Focus ---- */
  --focus-width: 3px;  /* @kind other */
  --focus-offset: 2px; /* @kind other */

  /* ---- Motion — minimal, mechanical easing ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);     /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 180ms;      /* @kind other */
  --dur-slow: 280ms; /* @kind other */
  --transition-base: color var(--dur) var(--ease-out),
                     background-color var(--dur) var(--ease-out),
                     border-color var(--dur) var(--ease-out),
                     box-shadow var(--dur) var(--ease-out),
                     transform var(--dur) var(--ease-out); /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base: 1;        /* @kind other */
  --z-raised: 10;     /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-dropdown: 200;  /* @kind other */
  --z-overlay: 900;   /* @kind other */
  --z-modal: 1000;    /* @kind other */
  --z-toast: 1100;    /* @kind other */

  /* ---- Breakpoints (reference values; use in media queries) ---- */
  --bp-mobile: 540px;   /* @kind other */
  --bp-tablet: 768px;   /* @kind other */
  --bp-desktop: 1024px; /* @kind other */
  --bp-wide: 1280px;    /* @kind other */
}

/* =========================================================================
   EBC Frenos — Mapping de tokens → Hummingbird (Bootstrap 5.3)
   Capa de marca: re-skin por CSS custom properties. Sin tocar el SCSS padre.
   ========================================================================= */
:root {
  --bs-primary: var(--blue-700);
  --bs-primary-rgb: 0, 55, 141;
  --bs-secondary: var(--graphite-800);
  --bs-secondary-rgb: 26, 29, 36;
  --bs-danger: var(--red-600);
  --bs-danger-rgb: 224, 2, 9;

  --bs-link-color: var(--blue-700);
  --bs-link-color-rgb: 0, 55, 141;
  --bs-link-hover-color: var(--blue-900);
  --bs-link-hover-color-rgb: 0, 31, 79;

  --bs-body-color: var(--graphite-800);
  --bs-body-color-rgb: 26, 29, 36;
  --bs-body-bg: var(--white);
  --bs-body-font-family: var(--font-body);
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: var(--lh-relaxed);
  --bs-emphasis-color: var(--black);
  --bs-heading-color: var(--graphite-900);

  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
}

body { font-family: var(--font-body); color: var(--graphite-800); }

/* Titulares → Saira Condensed (motorsport, MAYÚSCULAS) */
h1, h2, .h1, .h2,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

/* Botones → voz técnica (Saira, mayúsculas) */
.btn { font-family: var(--font-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* Primario → azul EBC. Fijamos también el color del TEXTO en todos los estados:
   si no, los .btn-primary que son <a> heredaban el azul oscuro de `a:hover`
   (más específico que .btn) y el texto quedaba ilegible sobre el fondo azul. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--blue-700);
  --bs-btn-border-color: var(--blue-700);
  --bs-btn-hover-bg: var(--blue-800);
  --bs-btn-hover-border-color: var(--blue-800);
  --bs-btn-active-bg: var(--blue-900);
  --bs-btn-active-border-color: var(--blue-900);
  --bs-btn-disabled-bg: var(--blue-700);
  --bs-btn-disabled-border-color: var(--blue-700);
}

/* Acción (añadir al carrito) → rojo EBC, solo para CTA */
.btn-danger, .add-to-cart, button.add-to-cart {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-bg: var(--red-600);
  --bs-btn-border-color: var(--red-600);
  --bs-btn-hover-bg: var(--red-700);
  --bs-btn-hover-border-color: var(--red-700);
  --bs-btn-active-bg: var(--red-800);
  --bs-btn-active-border-color: var(--red-800);
}

/* Color de enlaces de TEXTO. Esta regla NO debe alcanzar a los `<a>` estilados
   como botón: cada uno fija su propio `color` por estado en su componente, y si
   la regla global (0,1,1 base / 0,2,1 hover) le gana por especificidad deja el
   texto azul ilegible sobre el fondo de color. Por eso excluimos:
     · `.btn` — botones Bootstrap (conservan el color de su variante).
     · `.ebc-hdr *` / `.ebc-ftr *` — chrome oscuro; gestiona sus colores. Sin esto
       la global pisaba `.ebc-hdr__navlink:hover` (0,2,0) → menú azul sobre negro.
     · el resto — CTA propios que son `<a>` con fondo de color (o variantes ghost
       con texto oscuro). Excluir la clase BASE deja que cada variante conserve su
       color por estado (p.ej. `.ebc-gar__btn--search` es oscuro sobre claro en
       reposo y blanco sobre azul en activo; forzar #fff lo rompería).
   `:not()` con lista de selectores no infla la especificidad (sigue 0,1,1 / 0,2,1)
   y es seguro: el tema ya exige soporte de @container, más reciente que este. */
a:not(.btn, .ebc-hdr *, .ebc-ftr *, .ebc-gp-btn, .ebc-gar__btn, .ebc-pdp__btn, .ebc-pdp__compat-cta, .ebc-card__add, .ebc-gx__reco-cta, .ebc-legal__btn) { color: var(--blue-700); }
a:not(.btn, .ebc-hdr *, .ebc-ftr *, .ebc-gp-btn, .ebc-gar__btn, .ebc-pdp__btn, .ebc-pdp__compat-cta, .ebc-card__add, .ebc-gx__reco-cta, .ebc-legal__btn):hover { color: var(--blue-900); }

/* Cifras tabulares para precios/specs (Inter) */
.product-price, .price, .current-price, .regular-price, .product-prices {
  font-variant-numeric: tabular-nums slashed-zero;
}