/* ── repuestos-config — Public CSS ────────────────────────────────────────────
   Se carga DESPUÉS de rce-public.css (dependencia declarada en
   repuestos-config.php) y SOLO en home/catálogo (nunca en checkout, ver el
   enqueue condicional) -- por eso puede redefinir el :root del motor sin
   afectar ferreteria-config/tecnologia-config (ellos nunca cargan este
   archivo) ni el checkout de este mismo sitio (sigue con la paleta clara
   original, fuera de alcance de este rediseño).
   Referencia visual: video de un mockup ("ApexMoto") con estética
   concesionario/motorsport -- oscuro, tipografía condensada en mayúsculas,
   acento rojo carrera. Sin fotos de producto reales todavía: las tarjetas
   usan el emoji de categoría en vez de imágenes inventadas/robadas.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	--rce-graphite:    #d81e2c;
	--rce-graphite-lt: #ff4d5a;
	--rce-orange:      #d81e2c;
	--rce-orange-dim:  #a8121e;
	--rce-steel:       #9a9a9a;
	--rce-cream:       #0d0d0d;
	--rce-sand:        #1a1a1a;
	--rce-text:        #f2f0ee;
	--rce-muted:       #9a9a9a;
	--rce-border:      #2a2a2a;
	--rce-danger:      #ff5252;
	--rce-font-display: "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body.rce-page-shell { background: var(--rce-cream); }

/* SIN overflow-x acá a propósito -- bug real reportado con captura: cualquier
   ancestro de un elemento position:sticky con overflow distinto de "visible"
   desactiva el sticky por completo (lo vuelve un bloque normal que se
   scrollea con todo lo demás). .rc-page es ancestro directo de .rc-header
   (sticky) -- con overflow-x:hidden acá, el header entero se perdía al
   scrollear, y el carrito/menú (esos sí position:fixed de verdad, ajenos a
   este problema) quedaban "flotando" solos sobre el contenido, pareciendo
   fuera de lugar. El desborde horizontal que esto prevenía en .rc-hero/
   .rc-banner ya se corta en esos mismos elementos (ver ambos, `overflow:
   hidden` puesto directo ahí, no hace falta acá también). */
.rc-page { background: var(--rce-cream); color: var(--rce-text); }
.rc-page * { box-sizing: border-box; }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.rc-header {
	position: sticky; top: 0; z-index: 500;
	background: rgba(13, 13, 13, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rce-border);
	padding: 14px clamp(16px, 4vw, 48px) 12px;
}
.rc-header__top { display: flex; align-items: center; }
.rc-logo {
	font-family: var(--rce-font-display); font-weight: 700; font-size: 1.3rem;
	letter-spacing: .02em; color: #fff; text-decoration: none; text-transform: uppercase;
}
.rc-logo span { color: var(--rce-orange); }
.rc-header__search { position: relative; margin-top: 12px; }
.rc-header__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; font-size: .9rem; }
.rc-header__search-input {
	width: 100%; background: var(--rce-sand); border: 1px solid var(--rce-border);
	border-radius: 8px; padding: 11px 14px 11px 38px; color: var(--rce-text);
	font-family: inherit; font-size: .9rem;
}
.rc-header__search-input::placeholder { color: var(--rce-muted); }
.rc-header__search-input:focus { outline: none; border-color: var(--rce-orange); }

/* Carrito: vuelve a flotar ABAJO a la derecha (posición de fábrica de
   cart-widget.php, sin overrides de posición acá) -- a pedido explícito del
   usuario, para que nunca compita con la barra de arriba. Solo se le tocan
   colores para que combine con el tema oscuro. */
#rce-cart-fab {
	background: var(--rce-orange) !important; box-shadow: 0 6px 18px rgba(216,30,44,.4) !important;
}
.rce-cart-fab__badge {
	background: var(--rce-graphite) !important; color: #fff !important;
}
/* Bug real (mismo patrón ya visto en otros motores de este proyecto): sin
   esto, [hidden] pierde contra el display:flex de rce-public.css a igual
   especificidad -- la insignia "0" quedaba visible siempre, incluso con el
   carrito vacío (ver initBadgeCarrito() en repuestos-public.js). */
.rce-cart-fab__badge[hidden] { display: none !important; }

/* Menú: centrado arriba -- a pedido explícito del usuario ("el botoncito de
   menú en el medio"), ahora que el carrito ya no comparte esa esquina.
   position:fixed (no sticky): sigue siendo el MISMO botón de
   menu-drawer.php/rce-public.js, solo repositicionado; con .rc-header ya
   sticky de verdad (ver el fix de overflow arriba), queda alineado con el
   header en todo momento sin necesitar tocar su JS. */
#rce-menu-toggle {
	top: 12px !important; right: auto !important; left: 50% !important;
	transform: translateX(-50%) !important;
	width: 40px !important; height: 40px !important;
	background: var(--rce-sand) !important; border: 1px solid var(--rce-border) !important;
	box-shadow: none !important; z-index: 501 !important;
}
.rce-menu-toggle__icon { width: 16px; height: 16px; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.rc-hero {
	position: relative; overflow: hidden;
	background: radial-gradient(ellipse 900px 500px at 80% -10%, rgba(216, 30, 44, .25), transparent 60%), #0d0d0d;
	padding: clamp(48px, 9vw, 96px) clamp(20px, 5vw, 64px) clamp(56px, 8vw, 88px);
}
.rc-hero__flag {
	position: absolute; inset: 0; opacity: .05; pointer-events: none;
	background-image:
		repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%);
	background-size: 40px 40px;
	mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
.rc-hero__content { position: relative; z-index: 1; max-width: 640px; }
.rc-eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--rce-orange); color: var(--rce-orange);
	font-family: var(--rce-font-display); font-weight: 600; font-size: .72rem;
	letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 3px;
	margin-bottom: 18px;
}
.rc-hero__title {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.05; letter-spacing: .01em;
	color: #fff; margin-bottom: 18px; text-wrap: balance;
}
.rc-accent { color: var(--rce-orange); }
.rc-hero__subtitle { color: var(--rce-muted); font-size: clamp(.95rem, 2vw, 1.1rem); max-width: 46ch; margin-bottom: 30px; }
.rc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── BOTONES propios (además de los .rce-btn ya existentes) ────────────────── */
.rc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-family: var(--rce-font-display); font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; font-size: .82rem; padding: 13px 26px;
	border-radius: 4px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
	transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.rc-btn--primary { background: var(--rce-orange); color: #fff; }
.rc-btn--primary:hover { background: var(--rce-orange-dim); transform: translateY(-2px); }
.rc-btn--ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.rc-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.rc-btn--outline { background: transparent; border-color: var(--rce-orange); color: var(--rce-orange); }
.rc-btn--outline:hover { background: var(--rce-orange); color: #fff; }
.rc-btn--sm { padding: 8px 14px; font-size: .72rem; }
.rc-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── CONFIANZA ────────────────────────────────────────────────────────────── */
.rc-trust {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--rce-border); border-top: 1px solid var(--rce-border);
}
.rc-trust__item {
	display: flex; align-items: center; gap: 10px; background: var(--rce-cream);
	padding: 16px clamp(14px, 3vw, 28px);
}
.rc-trust__icon { font-size: 1.3rem; flex-shrink: 0; }
.rc-trust__item strong { display: block; font-size: .82rem; color: #fff; }
.rc-trust__item span { display: block; font-size: .74rem; color: var(--rce-muted); }
@media (min-width: 720px) {
	.rc-trust { grid-template-columns: repeat(4, 1fr); }
}

/* ── SECCIONES GENERALES ──────────────────────────────────────────────────── */
.rc-section { padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 64px); }
.rc-section--alt { background: #101010; }
.rc-section__header {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; margin-bottom: 26px; border-bottom: 2px solid var(--rce-orange);
	padding-bottom: 14px;
}
.rc-section__header h2 {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.3rem, 3vw, 1.7rem); color: #fff; letter-spacing: .02em; margin: 0 0 4px;
}
.rc-section__header p { color: var(--rce-muted); font-size: .88rem; margin: 0; }
.rc-link-ver-todo {
	color: var(--rce-orange); font-family: var(--rce-font-display); font-weight: 600;
	font-size: .78rem; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
}
.rc-link-ver-todo:hover { text-decoration: underline; }

/* ── CATEGORÍAS (home) ────────────────────────────────────────────────────── */
.rc-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .rc-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rc-cat-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-cat-tile {
	position: relative; display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 6px; text-align: center; text-decoration: none;
	background: linear-gradient(160deg, #1c1c1c, #101010);
	border: 1px solid var(--rce-border); border-radius: 6px;
	padding: 26px 12px; min-height: 140px; overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}
.rc-cat-tile::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
	background: var(--rce-orange); transform: scaleX(0); transform-origin: left;
	transition: transform .2s ease;
}
.rc-cat-tile:hover { border-color: var(--rce-orange); transform: translateY(-3px); }
.rc-cat-tile:hover::after { transform: scaleX(1); }
.rc-cat-tile__emoji { font-size: 2.2rem; filter: drop-shadow(0 4px 10px rgba(216,30,44,.35)); }
.rc-cat-tile__label { font-family: var(--rce-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .86rem; color: #fff; }
.rc-cat-tile__count { font-size: .72rem; color: var(--rce-muted); }

/* ── PRODUCTOS DESTACADOS (home, tarjetas estáticas) ─────────────────────────
   Mismo lenguaje visual que .rce-card del catálogo (ver abajo), pero
   servidas directo por PHP -- no pasan por Catalogo/rce-tpl-product-card. */
.rc-product-grid--static { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 720px) { .rc-product-grid--static { grid-template-columns: repeat(4, 1fr); } }
.rc-card-static {
	background: var(--rce-sand); border: 1px solid var(--rce-border); border-radius: 6px; overflow: hidden;
	display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease;
}
.rc-card-static:hover { border-color: var(--rce-orange); transform: translateY(-3px); }
.rc-card-static__img {
	position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 30%, #232323, #141414);
	font-size: 3rem;
}
.rc-badge-agotado {
	position: absolute; top: 8px; left: 8px; background: var(--rce-danger); color: #fff;
	font-size: .62rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
}
.rc-card-static--agotado .rc-card-static__img { opacity: .5; }
.rc-card-static__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rc-card-static__cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rce-muted); }
.rc-card-static__body h3 { font-size: .88rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
.rc-card-static__footer { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rc-card-static__price { font-family: var(--rce-font-display); font-weight: 700; font-size: 1rem; color: var(--rce-orange); }

/* ── BANNER SECUNDARIO ────────────────────────────────────────────────────── */
.rc-banner {
	position: relative; overflow: hidden;
	background: linear-gradient(160deg, #1a1a1a, #0d0d0d);
	padding: clamp(48px, 8vw, 80px) clamp(20px, 5vw, 64px);
	border-top: 1px solid var(--rce-border); border-bottom: 1px solid var(--rce-border);
}
.rc-banner__flag {
	position: absolute; inset: 0; opacity: .04; pointer-events: none;
	background-image: repeating-linear-gradient(45deg, #fff 0 10px, transparent 10px 20px);
}
.rc-banner__content { position: relative; z-index: 1; max-width: 560px; }
.rc-banner__content h2 {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.6rem, 4vw, 2.2rem); color: #fff; margin-bottom: 12px; text-wrap: balance;
}
.rc-banner__content p { color: var(--rce-muted); margin-bottom: 24px; }

/* ── MARCAS ───────────────────────────────────────────────────────────────── */
.rc-brands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rce-border); border: 1px solid var(--rce-border); }
@media (min-width: 640px) { .rc-brands-grid { grid-template-columns: repeat(4, 1fr); } }
.rc-brand-tile {
	background: var(--rce-cream); text-align: center; padding: 26px 10px;
	font-family: var(--rce-font-display); font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; font-size: .82rem; color: var(--rce-muted);
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.rc-footer { background: #0a0a0a; border-top: 3px dashed var(--rce-orange); padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 64px) 0; }
.rc-footer__top { display: grid; gap: 28px; padding-bottom: 32px; }
@media (min-width: 720px) { .rc-footer__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.rc-logo--footer { display: inline-block; margin-bottom: 10px; }
.rc-footer__brand p { color: var(--rce-muted); font-size: .86rem; max-width: 34ch; }
.rc-footer__col h4 { font-family: var(--rce-font-display); color: var(--rce-orange); font-size: .78rem; letter-spacing: .08em; margin: 0 0 12px; }
.rc-footer__col { display: flex; flex-direction: column; gap: 9px; }
.rc-footer__col a, .rc-footer__col span { color: var(--rce-muted); text-decoration: none; font-size: .86rem; }
.rc-footer__col a:hover { color: #fff; }
.rc-footer__bottom { border-top: 1px solid var(--rce-border); padding: 18px 0; text-align: center; color: var(--rce-muted); font-size: .76rem; }

/* ── CATÁLOGO ─────────────────────────────────────────────────────────────── */
.rc-cat-header { padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 64px) 8px; }
.rc-cat-header h1 {
	font-family: var(--rce-font-display); font-weight: 700; text-transform: uppercase;
	font-size: clamp(1.8rem, 5vw, 2.6rem); color: #fff; margin: 0 0 8px;
}
.rc-cat-header p { color: var(--rce-muted); margin: 0 0 14px; max-width: 52ch; }
.rc-cat-header::after { content: ""; display: block; width: 64px; height: 3px; background: var(--rce-orange); }

/* Tabs horizontales -- pisa el sidebar vertical fijo original (.rce-cat-nav)
   por completo: position:static, scroll horizontal en vez de vertical. */
/* Pegada arriba (debajo del header) al scrollear -- a pedido explícito del
   usuario, para no perder de vista los filtros mientras se recorre el grid.
   `top` usa --rc-header-h (medida en vivo por repuestos-public.js, igual
   criterio que medirAlturaHeader() del motor) en vez de un número fijo: el
   alto real del header cambia según ancho de pantalla/idioma. Fondo opaco
   obligatorio -- sin esto el grid se ve "pasar por debajo" de las tabs. */
.rc-cat-tabs-wrap {
	position: sticky; top: var(--rc-header-h, 108px); z-index: 400;
	background: var(--rce-cream); padding: 14px clamp(20px, 5vw, 64px) 12px;
	border-bottom: 1px solid var(--rce-border);
}
.rce-cat-nav {
	position: static !important; width: auto !important; height: auto !important;
	flex-direction: row !important; align-items: center !important;
	background: transparent !important; border-right: none !important; box-shadow: none !important;
	padding: 0 !important; gap: 8px !important;
	overflow-x: auto; overflow-y: hidden !important;
	scrollbar-width: none;
}
.rce-cat-nav::-webkit-scrollbar { display: none; }
.rce-cat-tab, button.rce-cat-tab {
	flex-direction: row !important; width: auto !important; flex-shrink: 0;
	padding: 9px 18px !important; border-radius: 4px !important;
	border: 1.5px solid var(--rce-border) !important; background: var(--rce-sand) !important;
	font-family: var(--rce-font-display); font-weight: 600; text-transform: uppercase;
	letter-spacing: .04em; font-size: .74rem !important; color: var(--rce-muted) !important;
}
.rce-cat-tab__emoji { display: none; }
.rce-cat-tab:hover, button.rce-cat-tab:hover { border-color: var(--rce-orange) !important; color: #fff !important; background: var(--rce-sand) !important; }
.rce-cat-tab--active, button.rce-cat-tab.rce-cat-tab--active {
	background: var(--rce-orange) !important; border-color: var(--rce-orange) !important; color: #fff !important;
}

.rc-cat-toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px clamp(20px, 5vw, 64px) 0; }
.rc-cat-toolbar__search {
	flex: 1; min-width: 200px; background: var(--rce-sand); border: 1px solid var(--rce-border);
	border-radius: 6px; padding: 11px 14px; color: var(--rce-text); font-family: inherit; font-size: .88rem;
}
.rc-cat-toolbar__sort {
	background: var(--rce-sand); border: 1px solid var(--rce-border); border-radius: 6px;
	padding: 11px 14px; color: var(--rce-text); font-family: var(--rce-font-display);
	font-weight: 600; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; cursor: pointer;
}
.rc-cat-toolbar__search::placeholder { color: var(--rce-muted); }
.rc-cat-toolbar__search:focus, .rc-cat-toolbar__sort:focus { outline: none; border-color: var(--rce-orange); }

.rc-cat-count {
	padding: 16px clamp(20px, 5vw, 64px) 0; color: var(--rce-muted);
	font-family: var(--rce-font-display); font-size: .78rem; letter-spacing: .06em;
}

.rce-products { margin-left: 0 !important; padding: 12px clamp(20px, 5vw, 64px) 60px !important; max-width: none !important; }
.rc-product-grid.rce-product-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .rc-product-grid.rce-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .rc-product-grid.rce-product-grid { grid-template-columns: repeat(4, 1fr); } }

.rce-card {
	background: var(--rce-sand) !important; border: 1px solid var(--rce-border); border-radius: 6px;
}
.rce-card:hover { border-color: var(--rce-orange); }
.rce-card__img-wrap { background: radial-gradient(circle at 50% 30%, #232323, #141414) !important; }
.rce-card__img-placeholder { filter: drop-shadow(0 4px 10px rgba(216,30,44,.3)); }
.rce-card__title { color: #fff !important; }
.rce-card__desc { display: none; }
.rce-card__cats { display: none; }
.rce-card__price { color: var(--rce-orange) !important; font-family: var(--rce-font-display); }
.rce-card__add-btn { background: var(--rce-graphite) !important; }
.rc-empty.rce-empty, .rc-empty.rce-error-msg { color: var(--rce-muted); }
.rce-loading { color: var(--rce-muted); }
.rce-cargar-mas {
	background: transparent !important; border: 1.5px solid var(--rce-orange) !important;
	color: var(--rce-orange) !important; font-family: var(--rce-font-display) !important;
	text-transform: uppercase; letter-spacing: .04em;
}
.rce-cargar-mas:hover { background: var(--rce-orange) !important; color: #fff !important; }

/* Menú/carrito drawers, modal de variante -- solo redefinen colores acá vía
   las mismas variables de arriba, sin tocar su HTML/estructura/animaciones. */
.rce-menu-drawer__panel, .rce-cart-drawer__panel, .rce-variante-modal__panel { background: var(--rce-sand) !important; color: var(--rce-text); }