/* =====================================================================
   PARODI MOTORS — TEMA "RACING NAVY"
   Paleta, tipografía y estilo inspirados en store.alpinef1.com/collections/sale
   (azul marino profundo + rosa + rojo sale + gris claro, tipografía
   condensada en mayúsculas). No usa logos, fotos ni la fuente propietaria
   de Alpine: la tipografía es Barlow / Barlow Condensed (Google Fonts, libre).

   INSTALACIÓN
   1) Subir este archivo como /parodi-theme-alpine.css
   2) En el <head> de cada página, DESPUÉS de todos los demás estilos:
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&display=swap">
        <link rel="stylesheet" href="/parodi-theme-alpine.css">
   3) Listo. No hace falta tocar el HTML ni el JS.

   CÓMO FUNCIONA
   El sitio actual tiene casi todo el estilo inline (style="…"), así que
   este archivo lo pisa con selectores de atributo + !important. Si en el
   futuro se cambian los colores en el código fuente, conviene reemplazar
   directamente los valores de la tabla de abajo y borrar este archivo.

   TABLA DE REEMPLAZO (color actual → color nuevo)
     #0A0A0A  negro header/footer/texto  → #061A4D  navy   (fondos oscuros, títulos)
     #4A0B26  bordó hero                  → #061A4D  navy
     #2A0714  bordó bloques/fotos         → #0B2A6F  navy 700
     #FF2E88  magenta botones             → #0000FF  azul eléctrico (CTA)
     #1F4BFF  azul acentos/líneas         → #FF87BC  rosa   (líneas, contador, franja)
     —        (nuevo) badges sale / %off   → #FF0202  rojo
     #F4F4F5  gris fondo                  → #F2F2F2
     #E4E4E7  gris borde                  → #E8E8E8
     Michroma (títulos)                   → Barlow Condensed 700, MAYÚSCULAS
     Inter (cuerpo)                       → Barlow 400–600
   ===================================================================== */

:root{
  --pm-navy:      #061A4D;
  --pm-navy-700:  #0B2A6F;
  --pm-navy-500:  #2B4486;
  --pm-blue:      #0000FF;
  --pm-blue-hover:#0000C2;
  --pm-pink:      #FF87BC;
  --pm-red:       #FF0202;
  --pm-gray-100:  #F2F2F2;
  --pm-gray-200:  #E8E8E8;
  --pm-gray-500:  #5C6478;
  --pm-text:      #000000;
  --pm-white:     #FFFFFF;

  --pm-font-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --pm-font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;

  --pm-radius-sm: 2px;   /* badges %OFF */
  --pm-radius:    4px;   /* chips, inputs, badges */
  --pm-radius-lg: 8px;   /* imágenes de producto / categoría */
}

/* ---------- 1. TIPOGRAFÍA GLOBAL ---------- */
html, body{
  font-family: var(--pm-font-body) !important;
  color: var(--pm-text);
  background: var(--pm-white);
  -webkit-font-smoothing: antialiased;
}
[style*="font-family: Inter"]{
  font-family: var(--pm-font-body) !important;
}
[style*="font-family: Michroma"],
h1, h2, h3,
.wm b{
  font-family: var(--pm-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  line-height: 1.05 !important;
}
h1{ font-size: clamp(52px, 6.4vw, 78px) !important; }
h2{ font-size: clamp(32px, 3.6vw, 44px) !important; }
h3{ font-size: clamp(24px, 2.4vw, 32px) !important; }
#buscador h2{ font-size: 26px !important; }

/* Títulos sobre fondo claro en navy */
section:not([aria-label="Promociones"]) h1,
section:not([aria-label="Promociones"]) h2,
section:not([aria-label="Promociones"]) h3,
main h1, main h2, main h3{
  color: var(--pm-navy) !important;
}

/* Botones, nav y etiquetas: condensada en mayúsculas, sin tracking ancho */
button, a[style*="letter-spacing"], span[style*="letter-spacing: 0.1"],
span[style*="letter-spacing: 0.2"], label[style*="letter-spacing"]{
  font-family: var(--pm-font-display) !important;
  letter-spacing: 0.02em !important;
}

/* ---------- 2. HEADER ---------- */
header[style*="background: rgb(10, 10, 10)"]{
  background: var(--pm-navy) !important;
  border-bottom: 0 !important;
}
header nav a,
header nav button{
  font-family: var(--pm-font-display) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--pm-white) !important;
}
header nav a:hover,
header nav button:hover{ color: var(--pm-pink) !important; }
header nav button[aria-expanded="true"]{ border-bottom-color: var(--pm-pink) !important; }

/* Franja de anuncio rosa bajo el header (estilo "announcement bar").
   Para cambiar el texto, editar "content". Para quitarla, borrar el bloque. */
header[style*="background: rgb(10, 10, 10)"]::after{
  content: "ENVÍO EN EL DÍA EN AMBA  |  +30.000 REPUESTOS EN STOCK  |  ENVÍOS A TODO EL PAÍS";
  display: block;
  background: var(--pm-pink);
  color: var(--pm-white);
  font-family: var(--pm-font-display);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 7px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Contador del carrito */
header span[style*="background: rgb(31, 75, 255)"]{
  background: var(--pm-pink) !important;
  color: var(--pm-navy) !important;
}

/* Dropdown del menú */
header > div[style*="top: 100%"]{
  border-bottom: 0 !important;
  box-shadow: 0 16px 32px rgba(6,26,77,.18) !important;
}
header > div[style*="top: 100%"] span{ color: var(--pm-red) !important; }
header > div[style*="top: 100%"] a{ color: var(--pm-navy) !important; font-weight: 500; }
header > div[style*="top: 100%"] a:hover{ color: var(--pm-blue) !important; }

/* ---------- 3. HERO ---------- */
section[aria-label="Promociones"]{
  background: var(--pm-navy) !important;
}
section[aria-label="Promociones"] p{
  font-size: 19px !important;
  color: #DCE3F5 !important;
}
/* Flechas y puntos del carrusel */
section[aria-label="Promociones"] button[aria-label^="Banner"]{
  border-color: rgba(255,255,255,.35) !important;
  border-radius: 50% !important;
}
section[aria-label="Promociones"] button[aria-label^="Ir al banner"][style*="rgb(31, 75, 255)"],
section[aria-label="Promociones"] button[aria-label^="Ir al banner"][style*="rgb(255, 46, 136)"]{
  background: var(--pm-pink) !important;
}

/* ---------- 4. BOTONES ---------- */
/* Primario (antes magenta) → azul eléctrico, rectos, condensada bold */
a[style*="background: rgb(255, 46, 136)"],
button[style*="background: rgb(255, 46, 136)"]{
  background: var(--pm-blue) !important;
  color: var(--pm-white) !important;
  border-color: var(--pm-blue) !important;
  border-radius: 0 !important;
  font-family: var(--pm-font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}
a[style*="background: rgb(255, 46, 136)"]:hover,
button[style*="background: rgb(255, 46, 136)"]:hover{
  background: var(--pm-blue-hover) !important;
}
/* Secundario con borde magenta → borde blanco/navy */
a[style*="border: 1px solid rgb(255, 46, 136)"],
button[style*="border: 1px solid rgb(255, 46, 136)"]{
  border-color: currentColor !important;
  border-radius: 0 !important;
  color: inherit;
}
section[aria-label="Promociones"] a[style*="border: 1px solid"]{
  color: var(--pm-white) !important;
  border-color: var(--pm-white) !important;
  border-radius: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
/* Botones/links negros → navy */
a[style*="background: rgb(10, 10, 10)"],
button[style*="background: rgb(10, 10, 10)"]{
  background: var(--pm-navy) !important;
  border-radius: 0 !important;
}
a[style*="border: 1px solid rgb(10, 10, 10)"],
button[style*="border: 1px solid rgb(10, 10, 10)"]{
  border-color: var(--pm-navy) !important;
  color: var(--pm-navy) !important;
  border-radius: 0 !important;
}

/* ---------- 5. ACENTOS ---------- */
/* Líneas finas de los títulos y separadores (antes azul) → rosa */
span[style*="background: rgb(31, 75, 255)"][style*="height: 2px"]{
  background: var(--pm-pink) !important;
}
/* Textos de acento azul (numeración, precio transferencia) */
[style*="color: rgb(31, 75, 255)"],
[style*="color: rgb(255, 46, 136)"]{
  color: var(--pm-blue) !important;
}
svg[stroke="#1F4BFF"], svg[stroke="#FF2E88"]{ stroke: var(--pm-blue) !important; }

/* Links: texto en navy, hover azul */
a[style*="color: rgb(10, 10, 10)"]{ color: var(--pm-navy) !important; }
a[style*="color: rgb(10, 10, 10)"]:hover{ color: var(--pm-blue) !important; }

/* ---------- 6. FONDOS Y BLOQUES ---------- */
div[style*="background: rgb(42, 7, 20)"]{ background: var(--pm-navy-700) !important; }
[style*="background: rgb(244, 244, 245)"]{ background: var(--pm-gray-100) !important; }
[style*="border: 1px solid rgb(228, 228, 231)"]{ border-color: var(--pm-gray-200) !important; }
[style*="border-right: 1px solid rgb(228, 228, 231)"]{ border-right-color: var(--pm-gray-200) !important; }
[style*="color: rgb(113, 113, 122)"],
[style*="color: rgb(82, 82, 91)"]{ color: var(--pm-gray-500) !important; }

/* Franja de beneficios: títulos navy */
ul[aria-label="Beneficios"] strong{
  color: var(--pm-navy) !important;
  font-size: 24px !important;
}

/* Tarjetas de categoría y marca: imagen redondeada sobre gris */
section[aria-labelledby="cat-t"] a > div:first-child,
section[aria-labelledby="marcas-t"] a > div:first-child{
  background: var(--pm-gray-200) !important;
  border-radius: var(--pm-radius-lg) !important;
}
section[aria-labelledby="cat-t"] a span span:first-child,
section[aria-labelledby="marcas-t"] a span:first-of-type{
  font-family: var(--pm-font-display) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  text-transform: uppercase;
  color: var(--pm-navy) !important;
}
section[aria-labelledby="marcas-t"]{ background: var(--pm-gray-100) !important; }

/* ---------- 7. TARJETA DE PRODUCTO (estilo listado "Sale") ---------- */
article[style*="border: 1px solid"]{
  border: 0 !important;
  background: transparent !important;
}
/* Imagen: gris, 8px de radio, sin borde */
article > a:first-child{
  background: var(--pm-gray-200) !important;
  border-radius: var(--pm-radius-lg) !important;
  overflow: hidden;
}
article > div{ padding: 14px 0 0 !important; }
/* Badge "Original" (antes azul) → navy; "Alternativa" → gris */
article span[style*="background: rgb(31, 75, 255)"]{
  background: var(--pm-navy) !important;
  border-radius: var(--pm-radius) !important;
  font-size: 10px !important;
}
article span[style*="background: rgb(228, 228, 231)"]{
  background: var(--pm-white) !important;
  color: var(--pm-navy) !important;
  border-radius: var(--pm-radius) !important;
  font-size: 10px !important;
}
/* Badge de descuento (−3%, −54%) → rojo */
article span[style*="background: rgb(10, 10, 10)"]{
  background: var(--pm-red) !important;
  border-radius: var(--pm-radius-sm) !important;
  font-size: 10px !important;
}
/* Título del repuesto */
article > div > a{
  font-family: var(--pm-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--pm-text) !important;
}
/* Línea marca · vehículo · año y fabricante */
article > div > span{ color: var(--pm-navy) !important; }
/* Precio */
article span[style*="font-size: 24px"]{
  font-family: var(--pm-font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--pm-navy) !important;
}
/* Precio anterior tachado y precio en oferta en rojo */
article span[style*="line-through"]{ color: var(--pm-red) !important; font-weight: 700; }
article div:has(> span[style*="line-through"]) span[style*="font-size: 24px"]{ color: var(--pm-red) !important; }
/* Botón agregar */
article a[href*="arrito"], article a[href*="heckout"], article button{
  border-radius: 0 !important;
}

/* ---------- 8. FORMULARIOS (estilo chips de filtro) ---------- */
select, input[type="text"], input[type="search"], input[type="email"], input[type="tel"]{
  background-color: var(--pm-gray-200) !important;
  border: 1px solid var(--pm-gray-200) !important;
  border-radius: var(--pm-radius) !important;
  color: var(--pm-navy) !important;
  font-family: var(--pm-font-body) !important;
}
select:focus, input:focus{
  outline: 2px solid var(--pm-blue) !important;
  outline-offset: 0;
  background-color: var(--pm-white) !important;
}
label[style*="letter-spacing"]{ color: var(--pm-navy) !important; }
input[type="checkbox"], input[type="radio"]{ accent-color: var(--pm-blue) !important; }
#buscador form{
  border: 0 !important;
  border-radius: var(--pm-radius-lg) !important;
  box-shadow: 0 12px 32px rgba(6,26,77,.12) !important;
}

/* ---------- 9. FOOTER ---------- */
footer[style*="background: rgb(10, 10, 10)"]{
  background: var(--pm-navy) !important;
}
footer a{
  font-family: var(--pm-font-display) !important;
  text-transform: uppercase;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: var(--pm-white) !important;
}
footer a:hover{ color: var(--pm-pink) !important; }
footer [style*="color: rgb(161, 161, 170)"]{ color: #C9D2EA !important; }
footer [style*="border-top: 1px solid rgb(39, 39, 42)"]{ border-top-color: var(--pm-navy-500) !important; }
footer [style*="border: 1px solid rgb(63, 63, 70)"]{ border-color: var(--pm-navy-500) !important; border-radius: var(--pm-radius) !important; }

/* ---------- 10. MOBILE ---------- */
@media (max-width: 640px){
  header[style*="background: rgb(10, 10, 10)"]::after{
    content: "ENVÍO EN EL DÍA EN AMBA  |  +30.000 REPUESTOS";
    font-size: 13px;
  }
  header nav a, header nav button{ font-size: 17px !important; }
  article > div > a{ font-size: 16px !important; }
}