/* category.css — plantilla compartida de las páginas de categoría (tires / winches / axles / bumpers). Reutiliza tokens/base/components. El rojo (--accent) sigue siendo la marca; cada categoría añade un acento sutil vía --cat-accent / --cat-glow (clase en ). */ .cat-tires { --cat-accent: var(--amber); --cat-glow: rgba(255,176,32,.14) } .cat-winches{ --cat-accent: var(--blue); --cat-glow: rgba(47,123,255,.14) } .cat-axles { --cat-accent: var(--green); --cat-glow: rgba(55,224,75,.12) } .cat-bumpers{ --cat-accent: var(--purple); --cat-glow: rgba(192,75,255,.14) } /* ============================================================ HERO — imagen full-bleed con el MISMO trato oscuro que el hero de inicio (reutiliza .hero-bg / .hero-shade de components.css). ============================================================ */ .cat-hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;overflow:hidden; border-bottom:1px solid var(--line-2);padding:130px 0 52px} .cat-hero .wrap{position:relative;z-index:2} /* por encima de .hero-shade (z-index:1) */ .cat-hero .eyebrow{color:var(--cat-accent)} /* el "toque" por categoría */ .cat-hero h1{font-size:clamp(2.2rem,5.6vw,4.2rem);margin:14px 0 0;padding-right:.18em;max-width:16em} .cat-hero .lede{color:#D6D6D6;font-size:1.12rem;max-width:46em;margin:20px 0 0} /* ============================================================ Cuerpo de texto (sección "Why RXT") ============================================================ */ .cat-body{color:var(--silver);font-size:1.04rem;line-height:1.7;max-width:44em;margin-top:18px} /* ============================================================ Bloque "Our [Category] Lineup" (placeholder) ============================================================ */ .cat-lineup{margin-top:40px;background:var(--panel);border:1px solid var(--line); border-left:3px solid var(--cat-accent);border-radius:16px;padding:38px 40px;max-width:780px} .cat-lineup p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:42em} .cat-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:26px} .cat-link{font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem; font-weight:600;color:var(--muted);transition:color .2s} .cat-link:hover{color:var(--accent)} @media(max-width:760px){ .cat-hero{min-height:50vh;padding:118px 0 44px} .cat-lineup{padding:28px} }