/*
Theme Name: XtremePC
Theme URI: https://www.xtremepc.com.ar
Description: Tema de la tienda XtremePC. Color y tipografía tomados de la marca real: el negro y el rojo del logo, e Inter con los mismos ajustes ópticos de la landing. Estructura de marketplace (grilla densa, precio grande, escaneable) con la ficha técnica visible en la tarjeta.
Author: Panelix
Template: kadence
Version: 2.0.0
*/

/* ===========================================================================
   Paleta: sale del logo (negro + rojo), no de MercadoLibre.
   =========================================================================== */
:root{
  --tinta:#1D1D1F;
  --rojo:#E3323C;
  --rojo-oscuro:#C4262F;
  --papel:#FFFFFF;
  --fondo:#F4F4F6;
  --gris:#6E6E76;
  --tenue:#A1A1A8;
  --linea:rgba(0,0,0,.09);
  --stock:#0E7A45;
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --sombra-alta:0 8px 24px rgba(0,0,0,.10);
  --radio:10px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono","DejaVu Sans Mono",monospace;
}

body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;border-radius:3px}

/* ============================== BARRA SUPERIOR ==========================
   Blanca con filete rojo. El logo es JPEG con fondo blanco: sobre chrome
   claro se integra sin recorte.                                            */
.ml-bar{
  background:var(--papel);
  border-bottom:1px solid var(--linea);
  box-shadow:0 2px 0 var(--rojo);
  position:relative;z-index:50;
}
.ml-bar__wrap{
  max-width:1360px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:24px;
}
.ml-bar__marca img{max-height:26px;width:auto;display:block}
.ml-bar__nombre{
  font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--tinta);
}
.ml-bar__buscador{
  flex:1;max-width:620px;display:flex;align-items:center;
  border:1.5px solid var(--linea);border-radius:8px;background:var(--papel);
  box-shadow:none;overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.ml-bar__buscador:focus-within{border-color:var(--tinta);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.ml-bar__buscador input[type="search"]{
  flex:1;border:0;outline:0;background:none;min-width:0;
  padding:10px 14px;font-size:.9375rem;color:var(--tinta);box-shadow:none;
}
.ml-bar__buscador input[type="search"]::placeholder{color:var(--tenue)}
.ml-bar__buscador button{
  background:none;border:0;border-left:1px solid var(--linea);
  color:var(--gris);padding:0 14px;height:40px;display:flex;align-items:center;
  cursor:pointer;border-radius:0;
}
.ml-bar__buscador button:hover{color:var(--tinta);background:none}
.ml-bar__acciones{display:flex;align-items:center;gap:20px;margin-left:auto;flex-shrink:0}
.ml-bar__acciones a{color:var(--gris);font-size:.875rem;display:flex;align-items:center}
.ml-bar__acciones a:hover{color:var(--tinta)}
.ml-bar__carrito{position:relative}
.ml-bar__contador{
  position:absolute;top:-7px;right:-10px;background:var(--rojo);color:#fff;
  font-size:.6875rem;font-weight:700;line-height:1;padding:3px 5px;border-radius:9px;
  min-width:17px;text-align:center;
}

/* el encabezado de Kadence queda debajo, discreto */
#main-header,.site-header,.site-header-wrap,.site-header-row-container{
  background:var(--papel) !important;box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.site-header .site-branding{display:none}
.site-header a{font-size:.8125rem;color:var(--gris)}
.site-header a:hover{color:var(--tinta)}

/* =============================== PORTADA ================================ */
.ml-portada{max-width:1360px;margin:0 auto;padding:20px 16px 48px}
.ml-hero{
  background:var(--tinta);color:#fff;border-radius:var(--radio);
  padding:44px 42px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  margin-bottom:16px;min-height:auto;box-shadow:none;
}
.ml-hero h1{
  font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.12;font-weight:700;
  letter-spacing:-.022em;margin:0 0 12px;color:#fff;max-width:18ch;
}
.ml-hero h1 em{font-style:normal;color:var(--rojo)}
.ml-hero p{color:rgba(255,255,255,.66);font-size:1rem;margin:0 0 24px;max-width:48ch}
.ml-hero__cta{
  display:inline-block;background:var(--rojo);color:#fff;font-weight:600;
  padding:12px 26px;border-radius:8px;font-size:.9375rem;
  transition:background .15s ease,transform .15s ease;
}
.ml-hero__cta:hover{background:var(--rojo-oscuro);color:#fff;transform:translateY(-1px)}
.ml-hero__deco{
  position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(227,50,60,.32),transparent 62%);
  pointer-events:none;
}
.ml-datos{display:flex;gap:34px;flex-wrap:wrap}
.ml-dato__n{
  font-family:var(--mono);font-size:1.6rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;
}
.ml-dato__t{
  font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;
  letter-spacing:.07em;margin-top:3px;
}

/* marcas reales, en texto (sin banners de proveedor) */
.ml-marcas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:4px 0 18px}
.ml-marcas span{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--gris);
  border:1px solid var(--linea);border-radius:20px;padding:6px 13px;background:var(--papel);
}
.ml-marcas span b{color:var(--tinta);font-weight:600}

/* envío por CP */
.ml-cp{
  background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:14px 18px;margin-bottom:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.ml-cp__t{font-size:.875rem;font-weight:600}
.ml-cp__t small{display:block;font-weight:400;color:var(--gris);font-size:.8125rem}
.ml-cp form{display:flex;gap:8px;margin-left:auto}
.ml-cp input{
  border:1.5px solid var(--linea);border-radius:7px;padding:9px 12px;
  font-family:var(--mono);font-size:.875rem;width:120px;outline:0;
}
.ml-cp input:focus{border-color:var(--tinta)}
.ml-cp button{
  border:0;border-radius:7px;background:var(--tinta);color:#fff;
  padding:9px 18px;font-size:.875rem;font-weight:600;cursor:pointer;
}
.ml-cp button:hover{background:#000}
.ml-cp__r{font-size:.875rem;font-weight:600;width:100%;color:var(--stock)}

.ml-seccion{margin-bottom:36px}
.ml-seccion__titulo{
  font-size:1.1875rem;font-weight:600;letter-spacing:-.014em;margin:0 0 14px;
}

/* categorías */
.ml-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ml-cat{
  background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:18px 16px;display:block;transition:box-shadow .18s ease,transform .18s ease;
}
.ml-cat:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.ml-cat__nombre{display:block;font-size:.9375rem;font-weight:600;color:var(--tinta);line-height:1.3}
.ml-cat__cuenta{display:block;font-family:var(--mono);font-size:.75rem;color:var(--rojo);margin-top:6px}

/* ================================ GRILLA ================================ */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:14px;margin:0;padding:0;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{
  background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:14px;margin:0 !important;width:auto !important;float:none !important;
  display:flex;flex-direction:column;
  transition:box-shadow .18s ease,transform .18s ease;
}
.woocommerce ul.products li.product:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.woocommerce ul.products li.product img{
  width:100%;height:172px;object-fit:contain;background:var(--papel);
  margin-bottom:12px;border-radius:4px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:.875rem !important;font-weight:400;line-height:1.34;color:var(--tinta);
  margin:0 0 9px;padding:0;min-height:2.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* LA FIRMA: ficha técnica en la tarjeta */
.ml-specs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.ml-spec{
  font-family:var(--mono);font-size:.6875rem;line-height:1;
  padding:5px 7px;border:1px solid var(--linea);border-radius:5px;
  color:var(--gris);background:#FAFAFB;white-space:nowrap;
}
.ml-spec b{color:var(--tinta);font-weight:600}

/* precio en cifras tabulares: se comparan bajando la columna */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{
  font-family:var(--mono) !important;font-variant-numeric:tabular-nums;
  color:var(--tinta) !important;font-size:1.375rem !important;font-weight:600 !important;
  letter-spacing:-.028em;line-height:1.15;margin:0 0 4px;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del{
  display:block;font-size:.8rem;font-weight:400;color:var(--tenue);
  text-decoration:line-through;margin-bottom:2px;opacity:1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins{text-decoration:none;font-weight:600;background:none}

.ml-envio-gratis{color:var(--stock);font-weight:600;font-size:.8125rem;margin-top:4px}
.ml-dep{
  font-family:var(--mono);font-size:.6875rem;color:var(--gris);margin-top:6px;
  display:flex;align-items:center;gap:5px;
}
.ml-punto{width:6px;height:6px;border-radius:50%;background:var(--stock);flex:none}
.ml-punto--poco{background:#C77B0A}
.ml-off{
  display:inline-block;background:var(--stock);color:#fff;font-size:.75rem;font-weight:700;
  line-height:1;padding:3px 6px;border-radius:3px;margin-left:6px;vertical-align:middle;
}

.woocommerce ul.products li.product .button{
  margin-top:auto;background:transparent;color:var(--rojo);
  padding:11px 0 0;font-size:.8125rem !important;font-weight:600;text-align:left;
  border-radius:0;text-transform:none !important;letter-spacing:0 !important;
}
.woocommerce ul.products li.product .button:hover{background:transparent;color:var(--rojo-oscuro)}

/* ============================= FICHA DE PRODUCTO ======================== */
.woocommerce div.product{
  background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);padding:28px;
}
.woocommerce div.product .product_title{
  font-size:1.375rem;font-weight:600;line-height:1.3;margin-bottom:12px;
}
.woocommerce div.product p.price{font-size:2.25rem !important}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--gris);font-size:.9375rem;line-height:1.55;
}
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,.woocommerce #respond input#submit.alt{
  background:var(--rojo);color:#fff;border-radius:8px;font-weight:600;
  font-size:1rem;padding:13px 26px;box-shadow:none;text-shadow:none;border:0;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background:var(--rojo-oscuro);color:#fff}
.woocommerce a.button:not(.alt){
  background:rgba(227,50,60,.12);color:var(--rojo);border-radius:8px;font-weight:600;border:0;
}
.woocommerce div.product .stock{color:var(--stock);font-weight:600}
.woocommerce div.product .out-of-stock{color:var(--rojo);font-weight:600}

.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;border-bottom:1px solid var(--linea)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;border:0;border-radius:0;margin:0 24px 0 0;padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  color:var(--gris);font-weight:600;padding:12px 0;display:block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--tinta);box-shadow:inset 0 -3px 0 var(--rojo);
}

/* ======================== MENSAJES, CARRITO, CHECKOUT =================== */
.woocommerce-message,.woocommerce-info{
  background:var(--papel);border-top:3px solid var(--tinta);border-radius:var(--radio);
  box-shadow:var(--sombra);color:var(--tinta);
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--tinta)}
.woocommerce-error{
  background:var(--papel);border-top:3px solid var(--rojo);border-radius:var(--radio);
  box-shadow:var(--sombra);color:var(--tinta);
}
.woocommerce table.shop_table,.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,.woocommerce form.checkout_coupon,.woocommerce form.login{
  background:var(--papel);border:0;border-radius:var(--radio);box-shadow:var(--sombra);padding:20px;
}
.woocommerce nav.woocommerce-pagination ul{border:0;gap:6px;display:flex;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--papel);border-radius:8px;box-shadow:var(--sombra);
  color:var(--tinta);padding:10px 14px;font-weight:600;
}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--tinta);color:#fff}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--gris)}

/* ================================= PIE ================================= */
.site-footer .footer-html{display:none !important}
.ml-pie{background:var(--papel);border-top:1px solid var(--linea);margin-top:40px}
.ml-pie__wrap{
  max-width:1360px;margin:0 auto;padding:40px 16px 28px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;
}
.ml-pie__col h3{font-size:.875rem;font-weight:600;color:var(--tinta);margin:0 0 12px;text-transform:none}
.ml-pie__col ul{list-style:none;margin:0;padding:0}
.ml-pie__col li{font-size:.875rem;line-height:1.9;color:var(--gris)}
.ml-pie__col li a{color:var(--gris)}
.ml-pie__col li a:hover{color:var(--tinta)}
.ml-pie__col li strong{color:var(--tinta);font-weight:600}
.ml-pie__gratis{color:var(--stock) !important;font-weight:600}
.ml-pie__marca{
  display:inline-block;background:var(--tinta);color:#fff;font-weight:800;
  font-size:1.0625rem;letter-spacing:-.02em;padding:7px 14px;border-radius:6px;
}
.ml-pie__marca em{font-style:normal;color:var(--rojo)}
.ml-pie__desc{font-size:.8125rem;color:var(--gris);line-height:1.5;margin:12px 0 0}
.ml-pie__legal{
  max-width:1360px;margin:0 auto;padding:18px 16px 30px;border-top:1px solid var(--linea);
  font-size:.75rem;color:var(--tenue);
}

/* =============================== WHATSAPP ============================== */
.ml-wa{
  position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.24);transition:transform .16s ease;
}
.ml-wa:hover{transform:scale(1.06)}
.ml-wa svg{width:29px;height:29px;fill:#fff}

/* ================================ CELULAR ============================== */
@media (max-width:860px){
  .ml-bar__wrap{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .ml-bar__buscador{order:3;flex-basis:100%;max-width:none}
  .ml-bar__acciones{margin-left:auto;gap:14px}
  .ml-hero{grid-template-columns:1fr;padding:30px 22px}
  .ml-hero__deco{width:260px;height:260px;right:-80px}
  .ml-cp form{margin-left:0;flex-basis:100%}
  .ml-cats{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:10px}
  .woocommerce ul.products li.product{padding:10px}
  .woocommerce ul.products li.product img{height:132px}
  .woocommerce ul.products li.product .price{font-size:1.125rem !important}
  .woocommerce div.product{padding:16px}
  .woocommerce div.product p.price{font-size:1.75rem !important}
  .ml-wa{right:14px;bottom:14px;width:50px;height:50px}
  .ml-portada{padding:12px 10px 32px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ===========================================================================
   v3 — 1-ago-2026. Banner principal, banners de categoría y tira de ficha.
   Lenguaje visual: hoja de datos. Los valores técnicos van SIEMPRE en
   monoespaciada con cifras tabulares; el resto en Inter. La grilla del banner
   evoca el papel milimetrado de una hoja de especificaciones.
   =========================================================================== */
:root{
  --carbon:#121214;
  --acero:rgba(255,255,255,.10);
}

/* ------------------------------- BANNER --------------------------------- */
.xp-banner{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--carbon);color:#fff;border-radius:var(--radio);
  padding:52px 46px;margin-bottom:14px;
}
.xp-banner__grilla{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(227,50,60,.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(227,50,60,.13) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 88% 8%, #000 0%, transparent 68%);
          mask-image:radial-gradient(120% 90% at 88% 8%, #000 0%, transparent 68%);
}
.xp-banner__cuerpo{max-width:74ch}
.xp-banner__eyebrow{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rojo);margin:0 0 18px;
}
.xp-banner__titulo{
  font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.08;font-weight:800;
  letter-spacing:-.028em;margin:0 0 14px;color:#fff;max-width:17ch;
}
.xp-banner__titulo em{font-style:normal;color:var(--rojo)}
.xp-banner__bajada{
  color:rgba(255,255,255,.62);font-size:1rem;line-height:1.5;
  margin:0 0 26px;max-width:52ch;
}

/* ---------------------- TIRA DE FICHA (elemento firma) ------------------- */
.xp-tira{
  display:flex;align-items:stretch;gap:0;max-width:100%;
  border:1px solid var(--acero);border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.04);margin:0 0 28px;
  transition:border-color .15s ease,background .15s ease;
}
.xp-tira:hover{border-color:rgba(227,50,60,.55);background:rgba(255,255,255,.07)}
.xp-tira__et{
  flex:0 0 auto;display:flex;align-items:center;
  background:var(--rojo);color:#fff;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;padding:0 12px;
}
.xp-tira__txt{
  font-family:var(--mono);font-size:.8125rem;line-height:1.45;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82);
  padding:11px 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* -------------------------------- BOTONES ------------------------------- */
.xp-banner__acciones{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.xp-btn{
  display:inline-block;font-weight:600;font-size:.9375rem;
  padding:12px 26px;border-radius:8px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.xp-btn--rojo{background:var(--rojo);color:#fff}
.xp-btn--rojo:hover{background:var(--rojo-oscuro);color:#fff;transform:translateY(-1px)}
.xp-btn--linea{border:1px solid var(--acero);color:rgba(255,255,255,.85)}
.xp-btn--linea:hover{border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-1px)}

/* --------------------------------- DATOS -------------------------------- */
.xp-datos{
  display:flex;gap:0;flex-wrap:wrap;
  border-top:1px solid var(--acero);padding-top:22px;
}
.xp-datos>div{padding-right:38px;margin-right:38px;border-right:1px solid var(--acero)}
.xp-datos>div:last-child{border-right:0;margin-right:0;padding-right:0}
.xp-datos b{
  display:block;font-family:var(--mono);font-size:1.5rem;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;
}
.xp-datos span{
  display:block;font-size:.75rem;color:rgba(255,255,255,.48);
  text-transform:uppercase;letter-spacing:.07em;margin-top:4px;
}

/* -------------------- BANNERS DE CATEGORÍA (3 arriba) ------------------- */
.xp-destacadas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px;
}
.xp-dest{
  position:relative;overflow:hidden;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:22px 20px 18px;display:flex;flex-direction:column;gap:4px;
  box-shadow:var(--sombra);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.xp-dest:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px);border-color:rgba(227,50,60,.4)}
/* franja de color: el único cromatismo que distingue una categoría de otra */
.xp-dest::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rojo);
}
.xp-dest--2::before{background:var(--tinta)}
.xp-dest--3::before{background:var(--stock)}
.xp-dest__n{
  font-family:var(--mono);font-size:2rem;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--tinta);
}
.xp-dest__nombre{
  font-size:1rem;font-weight:650;color:var(--tinta);line-height:1.25;
}
.xp-dest__ir{
  font-family:var(--mono);font-size:.75rem;color:var(--rojo);margin-top:6px;
}

/* ------------------------- BARRA DE CONFIANZA --------------------------- */
.xp-confianza{
  display:flex;flex-wrap:wrap;gap:0;margin-bottom:18px;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px 20px;box-shadow:var(--sombra);
  font-size:.875rem;color:var(--gris);
}
.xp-confianza span{padding-right:26px;margin-right:26px;border-right:1px solid var(--linea)}
.xp-confianza span:last-child{border-right:0;margin-right:0;padding-right:0}
.xp-confianza b{color:var(--tinta);font-weight:650}

/* -------------------------------- MOBILE -------------------------------- */
@media (max-width:900px){
  .xp-destacadas{grid-template-columns:1fr}
  .xp-banner{padding:34px 22px}
  .xp-banner__titulo{max-width:none}
  .xp-tira__txt{white-space:normal}
  .xp-datos>div{padding-right:22px;margin-right:22px}
  .xp-confianza span{border-right:0;margin-right:0;padding-right:0;flex:0 0 100%;padding-bottom:6px}
  .xp-confianza span:last-child{padding-bottom:0}
}
@media (max-width:520px){
  .xp-banner{padding:26px 18px}
  .xp-datos>div{flex:0 0 100%;border-right:0;margin:0 0 14px;padding:0}
  .xp-datos>div:last-child{margin-bottom:0}
  .xp-btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .xp-btn,.xp-dest,.xp-tira{transition:none}
  .xp-btn:hover,.xp-dest:hover{transform:none}
}

/* ===========================================================================
   v4 — banner de imagen del proveedor + bloques claros debajo.
   La imagen aporta el color; lo que la rodea queda neutro para no competir.
   =========================================================================== */
.xp-hero{margin:0 0 12px;line-height:0}
.xp-hero__a{display:block}
.xp-hero__img{
  display:block;width:100%;height:auto;border-radius:var(--radio);
  box-shadow:var(--sombra);
}

/* tira de ficha, versión sobre fondo claro */
.xp-tira--claro{
  background:var(--papel);border:1px solid var(--linea);box-shadow:var(--sombra);
  margin:0 0 12px;
}
.xp-tira--claro:hover{border-color:rgba(227,50,60,.45);background:var(--papel)}
.xp-tira--claro .xp-tira__txt{color:var(--gris)}

/* fila de datos, versión sobre fondo claro */
.xp-datos--claro{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:18px 22px;margin:0 0 14px;border-top:1px solid var(--linea);
}
.xp-datos--claro>div{border-right:1px solid var(--linea)}
.xp-datos--claro b{color:var(--tinta)}
.xp-datos--claro span{color:var(--tenue)}

/* fallback sin imagen: banner sobrio, sin la grilla roja */
.xp-banner{padding:38px 40px}
.xp-banner__grilla{display:none}

@media (max-width:520px){
  .xp-datos--claro{padding:16px 16px}
}

/* ===========================================================================
   v5 — una sola barra de datos bajo el banner y menú legible.
   =========================================================================== */
.xp-barra{
  display:flex;flex-wrap:wrap;align-items:center;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:15px 22px;margin:0 0 14px;
  font-size:.9375rem;color:var(--gris);
}
.xp-barra span{padding-right:24px;margin-right:24px;border-right:1px solid var(--linea)}
.xp-barra span:last-child{border-right:0;margin-right:0;padding-right:0}
.xp-barra b{color:var(--tinta);font-weight:650;font-variant-numeric:tabular-nums}

/* menú de categorías de Kadence: estaba demasiado chico y claro para leerse */
.site-header .kadence-nav-inner .menu-item > a,
.header-navigation .menu > li > a,
.main-navigation .menu > li > a{
  font-size:.9375rem !important;
  font-weight:600 !important;
  color:var(--tinta) !important;
  letter-spacing:-.005em;
}
.site-header .kadence-nav-inner .menu-item > a:hover,
.header-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:hover{color:var(--rojo) !important}

@media (max-width:760px){
  .xp-barra span{border-right:0;margin-right:0;padding-right:0;flex:0 0 100%;padding-bottom:6px}
  .xp-barra span:last-child{padding-bottom:0}
}

/* ===========================================================================
   v6 — el logo lo imprime Kadence como .custom-logo y venia sin limite de
   tamano (952x273): se comia la barra y aplastaba el buscador.
   =========================================================================== */
.custom-logo-link{display:inline-block;line-height:0}
.custom-logo{
  max-height:34px !important;
  max-width:190px !important;
  width:auto !important;height:auto !important;
}
@media (max-width:600px){
  .custom-logo{max-height:26px !important;max-width:140px !important}
}

/* ===========================================================================
   v7 — un escalon mas de tamano en el bloque bajo el banner.
   =========================================================================== */
.xp-dest{padding:26px 24px 22px}
.xp-dest__n{font-size:2.5rem}
.xp-dest__nombre{font-size:1.125rem}
.xp-dest__ir{font-size:.8125rem;margin-top:8px}

.xp-barra{font-size:1rem;padding:18px 24px}
.xp-barra span{padding-right:28px;margin-right:28px}

.ml-marcas span{font-size:.8125rem;padding:7px 15px}

.ml-seccion__titulo{font-size:1.375rem}
.ml-cat{padding:18px 18px}
.ml-cat__nombre{font-size:1.0625rem}
.ml-cat__cuenta{font-size:.8125rem;margin-top:8px}
.ml-cats{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}

/* v8 — logo un escalon mas grande */
.custom-logo{max-height:46px !important;max-width:230px !important}
@media (max-width:600px){.custom-logo{max-height:32px !important;max-width:165px !important}}

/* ===========================================================================
   v9 — ficha de producto con el criterio de la referencia de jazzpc:
   titulo grande, SKU visible, badge de stock, precio en recuadro y boton solido.
   =========================================================================== */

/* --- titulo --- */
.single-product .product_title{
  font-size:clamp(1.5rem,2.4vw,2rem) !important;
  font-weight:800 !important;letter-spacing:-.02em;line-height:1.15 !important;
  color:var(--tinta);margin:0 0 10px !important;
}

/* --- SKU + badge de stock --- */
.xp-ident{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;
}
.xp-sku{
  font-family:var(--mono);font-size:1.0625rem;font-weight:600;
  letter-spacing:.02em;color:var(--tinta);
  background:var(--fondo);border:1px solid var(--linea);border-radius:6px;
  padding:6px 12px;
}
.xp-badge{
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--stock);border-radius:5px;padding:6px 10px;
}
.xp-badge--no{background:var(--tenue)}

/* --- precio en recuadro --- */
.single-product .summary .price{
  display:inline-block;
  font-size:clamp(1.75rem,3vw,2.375rem) !important;
  font-weight:800 !important;letter-spacing:-.03em;color:var(--tinta) !important;
  border:2px solid var(--tinta);border-radius:10px;
  padding:10px 18px;margin:0 0 6px !important;
  font-variant-numeric:tabular-nums;
}
.single-product .summary .price del{font-size:.5em;font-weight:500;opacity:.5}
.single-product .summary .price ins{text-decoration:none}

/* --- disponibles --- */
.xp-disponibles{
  font-size:.9375rem;color:var(--gris);margin:10px 0 0;
}

/* --- boton: estaba recortado (height 40px con line-height 40 + padding 26) --- */
.single-product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button{
  height:auto !important;min-height:52px;
  line-height:1.2 !important;
  padding:15px 34px !important;
  font-size:1rem !important;font-weight:700 !important;
  letter-spacing:.02em;text-transform:uppercase;
  background:var(--tinta) !important;color:#fff !important;
  border:0 !important;border-radius:8px !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  white-space:normal;
  transition:background .15s ease,transform .15s ease;
}
.single-product .single_add_to_cart_button:hover{
  background:var(--rojo) !important;transform:translateY(-1px);
}
.single-product form.cart{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-top:16px}
.single-product form.cart .quantity input.qty{
  height:52px;width:76px;text-align:center;font-size:1rem;
  border:1px solid var(--linea);border-radius:8px;
}

/* --- descripcion corta --- */
.single-product .woocommerce-product-details__short-description{
  color:var(--gris);font-size:.9375rem;line-height:1.55;margin-bottom:16px;
}

/* --- stock de Woo por defecto: lo reemplaza el badge --- */
.single-product .summary p.stock{display:none}

@media (max-width:600px){
  .single-product form.cart{flex-direction:column;align-items:stretch}
  .single-product .single_add_to_cart_button{width:100%}
  .single-product form.cart .quantity input.qty{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .single-product .single_add_to_cart_button{transition:none}
  .single-product .single_add_to_cart_button:hover{transform:none}
}

/* ===========================================================================
   v10 — envio gratis destacado, con camioncito.
   El icono va en CSS (mask SVG) para no tocar el HTML ni sumar una request.
   =========================================================================== */
.ml-envio-gratis{
  display:inline-flex !important;align-items:center;gap:8px;
  background:rgba(14,122,69,.10);
  border:1px solid rgba(14,122,69,.30);
  color:var(--stock) !important;
  font-size:1rem !important;font-weight:700 !important;
  padding:9px 15px;border-radius:8px;
  margin:10px 0 !important;
}
.ml-envio-gratis::before{
  content:"";width:22px;height:22px;flex:0 0 22px;
  background-color:var(--stock);
  -webkit-mask:var(--camion) center/contain no-repeat;
          mask:var(--camion) center/contain no-repeat;
}
:root{
  --camion:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h13v13H1z'/%3E%3Cpath d='M14 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

/* en las tarjetas del listado, mas chico */
ul.products .ml-envio-gratis{
  font-size:.8125rem !important;padding:5px 10px;gap:6px;
}
ul.products .ml-envio-gratis::before{width:16px;height:16px;flex:0 0 16px}

/* ===========================================================================
   v11 — pie oscuro de 4 columnas, con el criterio de la referencia.
   =========================================================================== */
.ml-pie{display:none} /* el pie viejo del tema */

.xp-pie{
  background:#232326;color:rgba(255,255,255,.72);
  margin-top:40px;padding:44px 20px 0;
}
.xp-pie__wrap{
  max-width:1360px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  padding-bottom:34px;
}
.xp-pie h3{
  font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;
}
.xp-pie ul{list-style:none;margin:0;padding:0}
.xp-pie li{margin:0 0 10px;font-size:.875rem;line-height:1.45}
.xp-pie a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s ease}
.xp-pie a:hover{color:#fff;text-decoration:underline}
.xp-pie b{color:#fff;font-weight:600}
.xp-pie__gratis{color:#5FD39B !important}
.xp-pie__gratis .amount{color:#5FD39B}

.xp-pie__pagos{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.xp-pie__pagos span{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.22);border-radius:4px;padding:5px 8px;
  color:rgba(255,255,255,.62);
}

.xp-pie__col--marca .custom-logo{
  max-height:38px !important;max-width:190px !important;
  background:#fff;padding:7px 10px;border-radius:7px;
}
.xp-pie__marca{font-size:1.25rem;font-weight:800;color:#fff;display:block}
.xp-pie__desc{font-size:.875rem;line-height:1.5;margin:14px 0 0;color:rgba(255,255,255,.6)}

.xp-pie__legal{
  max-width:1360px;margin:0 auto;
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0 26px;font-size:.8125rem;color:rgba(255,255,255,.5);
}

@media (max-width:900px){
  .xp-pie__wrap{grid-template-columns:repeat(2,1fr);gap:26px}
}
@media (max-width:520px){
  .xp-pie__wrap{grid-template-columns:1fr}
  .xp-pie{padding:32px 16px 0}
}

/* v12 — enlaces legales obligatorios */
.xp-legalbar{
  max-width:1360px;margin:12px auto 0;padding:0 16px;
  font-size:.8125rem;color:var(--gris);display:flex;gap:10px;align-items:center;
}
.xp-legalbar a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.xp-legalbar a:hover{color:var(--rojo)}
.xp-pie__legalink{font-weight:600;color:#fff !important}
.xp-btn-legal{
  display:inline-block;background:var(--rojo);color:#fff !important;
  padding:12px 22px;border-radius:8px;font-weight:700;text-decoration:none !important;
}
.xp-btn-legal:hover{background:var(--rojo-oscuro)}

/* ===========================================================================
   v13 — carrusel horizontal: scroll-snap, sin libreria.
   =========================================================================== */
.xp-car{margin:0 0 34px}
.xp-car__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 14px}
.xp-car__titulo{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;color:var(--tinta);margin:0}
.xp-car__sub{font-size:.8125rem;color:var(--tenue);margin:4px 0 0;font-family:var(--mono)}
.xp-car__nav{display:flex;gap:8px;flex:0 0 auto}
.xp-car__b{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);
  background:var(--papel);color:var(--tinta);font-size:1.25rem;line-height:1;
  cursor:pointer;box-shadow:var(--sombra);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.xp-car__b:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.xp-car__b:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

ul.products.xp-car__pista{
  display:flex !important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 !important;padding:4px 2px 10px !important;list-style:none;
  scrollbar-width:thin;
}
ul.products.xp-car__pista > li.product{
  flex:0 0 232px !important;width:232px !important;max-width:232px !important;
  margin:0 !important;scroll-snap-align:start;
}
ul.products.xp-car__pista::-webkit-scrollbar{height:8px}
ul.products.xp-car__pista::-webkit-scrollbar-thumb{background:var(--linea);border-radius:4px}

@media (max-width:600px){
  .xp-car__nav{display:none}
  ul.products.xp-car__pista > li.product{flex:0 0 168px !important;width:168px !important}
}
@media (prefers-reduced-motion:reduce){
  ul.products.xp-car__pista{scroll-behavior:auto}
}

/* ===========================================================================
   v14 — tarjeta de producto dentro del carrusel.
   El problema anterior: fijé el ancho pero no el contenido, asi que el titulo
   heredaba un tamaño de grilla ancha, se partia en 6 lineas y cada tarjeta
   terminaba a distinta altura. Ahora la tarjeta es una columna con el precio
   y el boton anclados abajo, y el titulo recortado a 2 lineas.
   =========================================================================== */

ul.products.xp-car__pista > li.product{
  display:flex !important;flex-direction:column;
  background:var(--papel);border:1px solid var(--linea);border-radius:10px;
  padding:12px !important;box-shadow:var(--sombra);
  text-align:left !important;
}
ul.products.xp-car__pista > li.product:hover{box-shadow:var(--sombra-alta)}

/* imagen: misma caja para todas */
ul.products.xp-car__pista > li.product img{
  width:100% !important;height:150px !important;object-fit:contain;
  margin:0 0 10px !important;background:#fff;border-radius:6px;
}

/* titulo: 2 lineas exactas, sin importar el largo */
ul.products.xp-car__pista > li.product .woocommerce-loop-product__title{
  font-size:.8125rem !important;line-height:1.35 !important;font-weight:600 !important;
  color:var(--tinta) !important;
  margin:0 0 8px !important;padding:0 !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em;
}

/* chips de ficha: una sola linea, sin romper la altura */
ul.products.xp-car__pista > li.product .ml-specs{
  display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden;margin:0 0 8px;min-height:22px;
}
ul.products.xp-car__pista > li.product .ml-spec{
  font-size:.625rem !important;padding:3px 6px !important;white-space:nowrap;
}

/* precio: anclado abajo para que todas las tarjetas lo alineen */
ul.products.xp-car__pista > li.product .price{
  margin:auto 0 8px !important;padding:0 !important;border:0 !important;
  font-size:1.0625rem !important;font-weight:800 !important;
  color:var(--tinta) !important;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:block !important;
}

ul.products.xp-car__pista > li.product .ml-envio-gratis{
  font-size:.6875rem !important;padding:4px 8px !important;margin:0 0 8px !important;
}

/* stock + sku: una linea chica */
ul.products.xp-car__pista > li.product .ml-stock,
ul.products.xp-car__pista > li.product .ml-sku{
  font-size:.625rem !important;color:var(--tenue) !important;
}

/* boton: compacto, ancho completo, sin partirse */
ul.products.xp-car__pista > li.product .button,
ul.products.xp-car__pista > li.product .add_to_cart_button{
  display:block !important;width:100% !important;
  margin:8px 0 0 !important;padding:9px 8px !important;
  font-size:.75rem !important;font-weight:700 !important;line-height:1.2 !important;
  text-transform:uppercase;letter-spacing:.02em;
  background:var(--tinta) !important;color:#fff !important;
  border:0 !important;border-radius:7px !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
}
ul.products.xp-car__pista > li.product .button:hover{background:var(--rojo) !important}

/* flechas: sobrias, sin el circulo rojo */
.xp-car__b{background:var(--papel) !important;color:var(--tinta) !important;border:1px solid var(--linea) !important}
.xp-car__b:hover{background:var(--tinta) !important;color:#fff !important}

@media (max-width:600px){
  ul.products.xp-car__pista > li.product img{height:120px !important}
}

/* v15 — sin chips de ficha dentro del carrusel: la tarjeta baja de 493px */
ul.products.xp-car__pista > li.product .ml-specs{display:none !important}
ul.products.xp-car__pista > li.product .ml-sku{display:none !important}

/* ===========================================================================
   v16 — una sola anatomia de tarjeta para TODA la tienda.
   Antes convivian tres alturas (carrusel 463, grilla 481 y 554) porque cada
   bloque dejaba crecer libre el titulo y los chips. Ahora cada pieza tiene
   altura acotada, asi la tarjeta mide siempre lo mismo.
   =========================================================================== */

ul.products > li.product{
  display:flex !important;flex-direction:column;
  background:var(--papel);border:1px solid var(--linea);border-radius:10px;
  padding:12px !important;box-shadow:var(--sombra);
  text-align:left !important;
  min-height:412px;
}
ul.products > li.product:hover{box-shadow:var(--sombra-alta)}

/* imagen: misma caja siempre */
ul.products > li.product img{
  width:100% !important;height:150px !important;object-fit:contain;
  margin:0 0 10px !important;background:#fff;border-radius:6px;
}

/* titulo: exactamente 2 lineas */
ul.products > li.product .woocommerce-loop-product__title{
  font-size:.8125rem !important;line-height:1.35 !important;font-weight:600 !important;
  color:var(--tinta) !important;margin:0 0 8px !important;padding:0 !important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;height:2.7em;
}

/* chips: una sola linea, altura fija */
ul.products > li.product .ml-specs{
  display:flex;flex-wrap:nowrap;gap:4px;overflow:hidden;
  margin:0 0 8px !important;height:24px;
}
ul.products > li.product .ml-spec{
  font-size:.625rem !important;padding:3px 6px !important;white-space:nowrap;flex:0 0 auto;
}

/* precio anclado abajo: lo que sigue queda siempre a la misma altura */
ul.products > li.product .price{
  margin:auto 0 8px !important;padding:0 !important;border:0 !important;
  font-size:1.0625rem !important;font-weight:800 !important;color:var(--tinta) !important;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:block !important;
}
ul.products > li.product .ml-envio-gratis{
  font-size:.6875rem !important;padding:4px 8px !important;margin:0 0 6px !important;
}
ul.products > li.product .ml-stock,
ul.products > li.product .ml-sku{
  font-size:.625rem !important;color:var(--tenue) !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* boton en la grilla: compacto y de una linea */
ul.products > li.product .button,
ul.products > li.product .add_to_cart_button{
  display:block !important;width:100% !important;height:34px;
  margin:8px 0 0 !important;padding:0 8px !important;
  font-size:.75rem !important;font-weight:700 !important;line-height:34px !important;
  text-transform:uppercase;letter-spacing:.02em;
  background:var(--tinta) !important;color:#fff !important;
  border:0 !important;border-radius:7px !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
ul.products > li.product .button:hover{background:var(--rojo) !important}

/* EN EL CARRUSEL: sin boton. La tarjeta entera lleva al producto. */
ul.products.xp-car__pista > li.product .button,
ul.products.xp-car__pista > li.product .add_to_cart_button,
ul.products.xp-car__pista > li.product .added_to_cart{
  display:none !important;
}
/* sin boton la tarjeta es mas baja: la igualamos con las de la grilla */
ul.products.xp-car__pista > li.product{padding-bottom:20px !important}

@media (max-width:600px){
  ul.products > li.product{min-height:366px}
  ul.products > li.product img{height:120px !important}
}

/* v17 — las del carrusel median 431 y las de la grilla 412: el padding extra
   que le habia puesto al carrusel para compensar la falta de boton sobraba,
   porque el precio ya esta anclado abajo. Misma altura fija para todas. */
ul.products > li.product{height:412px;min-height:412px}
ul.products.xp-car__pista > li.product{padding-bottom:12px !important}
@media (max-width:600px){
  ul.products > li.product{height:366px;min-height:366px}
}

/* v18 — la linea de deposito se partia en dos renglones en 4 tarjetas y
   desbordaba la altura fija. Una sola linea, con puntos suspensivos. */
ul.products > li.product .ml-dep{
  height:18px;line-height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:.625rem !important;color:var(--tenue) !important;
  margin:0 0 4px !important;
}

/* v19 — titulo de carrusel clickeable */
.xp-car__titulo a{color:var(--tinta);text-decoration:none;display:inline-flex;align-items:baseline;gap:12px}
.xp-car__titulo a:hover{color:var(--rojo)}
.xp-car__ver{
  font-size:.75rem;font-weight:600;letter-spacing:0;color:var(--rojo);
  font-family:var(--mono);white-space:nowrap;
}
.xp-car__titulo a:hover .xp-car__ver{text-decoration:underline}

/* ===========================================================================
   v20 — titulos de carrusel con la misma fuente que los titulos de seccion
   (Inter 22px peso 600, no 800) y degradado en el borde derecho de la pista,
   para que la tarjeta que asoma se lea como "hay mas" y no como recorte.
   =========================================================================== */
.xp-car__titulo,
.xp-car__titulo a{
  font-size:1.375rem !important;font-weight:600 !important;
  letter-spacing:-.014em !important;color:#0E0E0E !important;
}
.xp-car__titulo a:hover{color:var(--rojo) !important}

.xp-car{position:relative}
.xp-car__pista{position:relative;scroll-padding-left:2px}
.xp-car::after{
  content:"";position:absolute;right:0;bottom:18px;height:412px;width:56px;
  background:linear-gradient(to left, var(--fondo) 18%, rgba(244,244,246,0));
  pointer-events:none;z-index:2;
}
@media (max-width:600px){
  .xp-car::after{width:28px;height:366px}
}

/* ===========================================================================
   v21 — el carrusel quedaba con 107px de blanco abajo: al sacarle el boton,
   el contenido mide 324px y la tarjeta seguia fijada en 412 (la medida que
   necesita la grilla, que si tiene boton). Cada bloque toma su propia altura;
   dentro de cada bloque todas siguen siendo identicas.
   =========================================================================== */
ul.products.xp-car__pista > li.product{
  height:372px !important;min-height:372px !important;
}
.xp-car::after{height:372px}

@media (max-width:600px){
  ul.products.xp-car__pista > li.product{height:330px !important;min-height:330px !important}
  .xp-car::after{height:330px}
}

/* v22 — ajuste fino: el contenido del carrusel mide 324px, la tarjeta va a 322
   mas el padding. Queda un respiro chico abajo en lugar de 107px de blanco. */
ul.products.xp-car__pista > li.product{
  height:322px !important;min-height:322px !important;
}
.xp-car::after{height:322px}
@media (max-width:600px){
  ul.products.xp-car__pista > li.product{height:296px !important;min-height:296px !important}
  .xp-car::after{height:296px}
}

/* v23 — el hueco que quedaba era el contenedor del boton: oculte el boton pero
   no .product-action-wrap, que seguia ocupando 45px vacios en el carrusel. */
ul.products.xp-car__pista > li.product .product-action-wrap{display:none !important}
ul.products.xp-car__pista > li.product{
  height:284px !important;min-height:284px !important;
}
.xp-car::after{height:284px}
@media (max-width:600px){
  ul.products.xp-car__pista > li.product{height:258px !important;min-height:258px !important}
  .xp-car::after{height:258px}
}

/* v24 — sin altura magica en el carrusel: como imagen, titulo, precio, envio y
   deposito ya tienen altura acotada, la tarjeta toma su alto natural y todas
   coinciden solas. Se quita ademas el padding sobrante del bloque de detalles. */
ul.products.xp-car__pista > li.product{
  height:auto !important;min-height:0 !important;
}
ul.products.xp-car__pista > li.product .product-details{
  padding-bottom:0 !important;margin-bottom:0 !important;
}
ul.products.xp-car__pista > li.product .ml-dep{margin-bottom:0 !important}
.xp-car::after{height:100%;bottom:auto;top:0}

/* ===========================================================================
   v25 — bloque de ultimas noticias. Se alimenta de las entradas publicadas.
   =========================================================================== */
.xp-news{margin:8px 0 36px}
.xp-news__titulo{
  font-size:1.375rem;font-weight:600;letter-spacing:-.014em;color:#0E0E0E;
  margin:0 0 18px;text-align:center;
}
.xp-news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.xp-news__card{
  display:flex;flex-direction:column;
  background:var(--papel);border:1px solid var(--linea);border-radius:10px;
  padding:20px;box-shadow:var(--sombra);color:inherit;
  transition:box-shadow .18s ease,transform .18s ease;
}
.xp-news__card:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px)}
.xp-news__img{
  display:block;height:132px;margin:-20px -20px 14px;border-radius:10px 10px 0 0;
  background-size:cover;background-position:center;
}
.xp-news__fecha{
  font-family:var(--mono);font-size:.6875rem;color:var(--tenue);
  letter-spacing:.04em;margin-bottom:6px;
}
.xp-news__h{
  font-size:1rem;font-weight:700;line-height:1.3;color:var(--tinta);margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.xp-news__p{
  font-size:.875rem;line-height:1.5;color:var(--gris);margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.xp-news__mas{
  margin-top:auto;font-family:var(--mono);font-size:.75rem;color:var(--rojo);
}
.xp-news__card:hover .xp-news__mas{text-decoration:underline}
@media (max-width:900px){.xp-news__grid{grid-template-columns:1fr}}

/* ===========================================================================
   v26 — banner principal a TODO el ancho de la pantalla (full bleed).
   La portada vive dentro de un contenedor de 1360px: el banner se sale de el
   con la tecnica de 100vw + margen negativo, sin romper el scroll horizontal.
   =========================================================================== */
.xp-hero{
  position:relative;
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:0;margin-bottom:22px;
  overflow:hidden;line-height:0;background:#0B0B0D;
}
.xp-hero__pista{position:relative;width:100%}
.xp-hero__slide{
  display:none;width:100%;
}
.xp-hero__slide.es-activa{display:block;animation:xpFade .45s ease}
@keyframes xpFade{from{opacity:.35}to{opacity:1}}
.xp-hero__slide a{display:block}
.xp-hero__img{
  display:block;width:100%;height:auto;object-fit:cover;
}

/* flechas, como en la referencia */
.xp-hero__flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.82);color:#1D1D1F;
  font-size:1.5rem;line-height:1;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease;
}
.xp-hero__flecha:hover{background:#fff}
.xp-hero__flecha:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
.xp-hero__flecha--izq{left:14px}
.xp-hero__flecha--der{right:14px}

/* puntos */
.xp-hero__puntos{
  position:absolute;left:0;right:0;bottom:12px;z-index:3;
  display:flex;justify-content:center;gap:8px;
}
.xp-hero__punto{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .15s ease,width .15s ease;
}
.xp-hero__punto.es-activa{background:#fff;width:22px;border-radius:5px}

@media (max-width:600px){
  .xp-hero__flecha{width:34px;height:34px;font-size:1.125rem}
  .xp-hero__flecha--izq{left:8px}
  .xp-hero__flecha--der{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .xp-hero__slide.es-activa{animation:none}
}

/* v27 — el segundo banner aparecia como una franja de 16px mientras cargaba:
   tenia loading=lazy dentro de un contenedor oculto. Ademas se reserva la
   proporcion real (2000x520 = 3.846) para que no salte el layout. */
.xp-hero__pista{aspect-ratio:2000/520}
.xp-hero__slide,.xp-hero__slide a,.xp-hero__img{height:100%}
.xp-hero__img{object-fit:cover;object-position:center}

/* ===========================================================================
   v28 — dos arreglos en las paginas de listado (marca, categoria, tienda):
   1) la tarjeta tenia altura fija 412px, pensada para la grilla de la portada
      que si trae boton. En estos listados el boton aparece al pasar el mouse,
      asi que sobraba blanco abajo. Ahora la altura es natural y la grilla
      empareja sola cada fila.
   2) banner de marca debajo del titulo.
   =========================================================================== */
ul.products > li.product{height:auto !important;min-height:0 !important}

.xp-marca-banner{
  width:100vw;max-width:100vw;
  margin:0 calc(50% - 50vw) 26px;
  overflow:hidden;line-height:0;background:#0B0B0D;
}
.xp-marca-banner img{display:block;width:100%;height:auto}