/* ============================================================
   TAZ Motos — Override de rediseño (layout estilo marketplace)
   Carga DESPUÉS de jaguer-header.css y jaguar-design.css.
   Restiliza las clases existentes (jg-*, jd-*) hacia el mockup
   aprobado, SIN tocar blades de lógica ni el JS Vue.
   Reversible: quitar el <link> de taz-loja.css en layouts/index.
   Paleta azul TAZ ya provista por --jd-primary (#130A0A).
   ============================================================ */

:root{
  --tl-blue:        #130A0A;
  --tl-blue-d:      #2B2220;
  --tl-blue-l:      #3A2E2B;
  --tl-soft:        #FFF5DA;
  --tl-line:        #CFCFD4;
  --tl-ink:         #212529;
  --tl-muted:       #666;
  --tl-green:       #2BA24A;
  --tl-green-d:     #208a3e;
  --tl-yellow:      #F6AA00;
  --tl-radius:      16px;
}

/* ============================================================
   1. FRANJAS DEL HEADER (markup nuevo añadido al blade)
   ============================================================ */
.taz-util{background:var(--tl-ink);color:#cfd2d6;font-size:12.5px;line-height:1}
.taz-util-inner{max-width:var(--jd-container,1320px);margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:22px;height:34px}
.taz-util a{color:#cfd2d6;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.taz-util a:hover{color:#fff}
.taz-util .taz-util-sp{flex:1}
.taz-util .taz-util-hot{color:#fff;font-weight:600}

.taz-ship{background:linear-gradient(90deg,#2B2220,var(--tl-blue-l));color:#fff;font-size:13px;text-align:center;padding:7px 12px}
.taz-ship b{color:var(--tl-yellow)}

@media(max-width:768px){
  .taz-util-inner{gap:14px;overflow-x:auto}
  .taz-util a span.taz-util-lbl{display:none}
}

/* ============================================================
   1b. HEADER estilo referencia: CEP + Televentas + Pedidos
   ============================================================ */
.tl-cep{display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;cursor:pointer;padding:0 4px}
.tl-cep-ico{display:inline-flex;color:var(--tl-blue)}
.tl-cep-txt{display:flex;flex-direction:column;line-height:1.18}
.tl-cep-txt small{font-size:11px;color:var(--tl-muted)}
.tl-cep-txt strong{font-size:13px;color:var(--tl-ink)}
.tl-cep:hover .tl-cep-txt strong{color:var(--tl-blue)}

/* Televentas / Pedidos: ícono + texto de 2 líneas */
.tl-action-lbl{gap:9px !important}
.tl-action-lbl .jg-action-text{display:flex;flex-direction:column;line-height:1.18;text-align:left}
.tl-action-lbl .jg-action-text strong{font-size:13px;color:var(--tl-ink)}
.tl-action-lbl .jg-action-text small{font-size:11px;color:var(--tl-muted)}
.tl-action-lbl:hover .jg-action-text strong{color:var(--tl-blue)}

/* Responsive: bajo 1200px se ocultan los textos, quedan los íconos */
@media (max-width:1200px){
  .tl-cep-txt,.tl-action-lbl .jg-action-text{display:none}
}
@media (max-width:920px){
  .tl-cep{display:none}
}

/* --- Barra principal BLANCA con íconos/textos negros --- */
#jg-main{background:#ffffff !important;border-bottom:none}
#jg-main .jg-action,
#jg-main .tl-cep-ico,
#jg-main .tl-cep,
#jg-main .jg-action svg,
#jg-main .jg-action i{color:var(--tl-ink) !important}
#jg-main .tl-cep-txt small,
#jg-main .tl-action-lbl .jg-action-text small,
#jg-main .jg-action-text small{color:var(--tl-muted) !important}
#jg-main .tl-cep-txt strong,
#jg-main .tl-action-lbl .jg-action-text strong,
#jg-main .jg-action-text strong{color:var(--tl-ink) !important}
/* hover: fondo gris suave + acento azul (legible sobre blanco) */
#jg-main .jg-action:hover,
#jg-main .tl-cep:hover{background:#f2f4f8 !important;border-radius:8px}
#jg-main .jg-action:hover,
#jg-main .jg-action:hover svg,
#jg-main .jg-action:hover i,
#jg-main .jg-action:hover .jg-action-text strong,
#jg-main .jg-action:hover .jg-action-text small,
#jg-main .tl-cep:hover,
#jg-main .tl-cep:hover .tl-cep-txt strong,
#jg-main .tl-cep:hover .tl-cep-txt small{color:var(--tl-blue) !important}
/* botón BUSCAR: amarillo (acento sobre blanco) */
#jg-main #jg-search-submit{background:var(--tl-yellow) !important;color:var(--tl-ink) !important}
#jg-main #jg-search-submit:hover{background:#ffc400 !important}

/* ===== Header COMPACTO (proporciones tipo referencia) ===== */
/* logo: de 110px a ~46px — principal causa de header "grande y tosco" */
.jg-logo img{max-height:46px !important;width:auto !important}
/* barra principal: menos padding y alto */
#jg-main-inner{padding:9px 22px !important;min-height:0 !important;gap:20px !important}
.jg-h.is-stuck #jg-main-inner{padding:7px 22px !important}
/* buscador: pill (spec del cliente) */
#jg-search-form{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--jg-border);border-radius:9999px;padding:0px 0px 0px 18px;transition:border-color var(--jg-t),box-shadow var(--jg-t)}
#jg-search-input{height:38px !important;padding-top:0 !important;padding-bottom:0 !important;border:0 !important;background:transparent !important}
#jg-search-submit{height:40px !important;border-radius:9999px !important}
/* acciones más ajustadas */
#jg-actions{height:46px !important}
.jg-action.jg-wishlist-link,.jg-action.jg-cart-link{width:44px !important}
.jg-action svg{width:22px !important;height:22px !important}
/* logo rectangular de TAZ */
.jg-logo-rect img{height:48px !important;max-height:48px !important;width:auto !important;max-width:190px;object-fit:contain;transform:none !important;transition:none !important}
/* logo estático: no cambia de tamaño al hacer scroll */
.jg-h.is-stuck .jg-logo-rect img{height:48px !important;transform:none !important}

/* ============================================================
   2. CARD DE PRODUCTO  (.jd-product-card y children)
   Mockup: blanco, borde #CFCFD4, radius inferior 16px, cinta
   de descuento azul, nombre 3 líneas, precio grande, botones.
   ============================================================ */
.jd-product-card{
  background:#fff;
  border:1px solid var(--tl-line);
  border-radius:0 0 var(--tl-radius) var(--tl-radius);
  box-shadow:none;
  overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease;
}
.jd-product-card:hover{
  box-shadow:0 8px 24px rgba(19,10,10,.16);
  transform:translateY(-3px);
  border-color:var(--tl-line);
}

/* media */
.jd-product-media{
  position:relative;
  background:#fff;
  padding:14px;
  /* Caja cuadrada, igual que las fotos: la imagen entra completa y todas las
     cards quedan alineadas. Antes era una altura fija de 190px que no tenia
     que ver con la proporcion de las imagenes. */
  aspect-ratio:1/1;
  height:auto;
  display:block;
}
.jd-product-media img{
  /* Las fotos del catalogo son 100% cuadradas (verificado sobre 400 al azar).
     Se le da a la imagen el tamano completo de la caja y object-fit:contain
     se encarga de encajarla entera sin recortar.

     Antes esto era `max-height:100%; width:auto`, pero la imagen es un ITEM
     FLEX y en ese contexto el max-height porcentual no la limitaba: se
     renderizaba a 261x268 dentro de una caja de 190 de alto y el
     overflow:hidden le cortaba arriba y abajo. */
  width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;display:block;
}

/* cinta de descuento (badge) arriba-izquierda */
.jd-product-badges{
  position:absolute;top:10px;left:0;z-index:2;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
}
.jd-badge{
  font-size:11px;font-weight:700;letter-spacing:.2px;
  padding:4px 10px 4px 12px;border-radius:0 4px 4px 0;
  text-transform:uppercase;line-height:1.1;
}
.jd-badge-discount{background:var(--tl-blue);color:#fff}
.jd-badge-sale{background:var(--tl-blue);color:#fff}
.jd-badge-new{background:var(--tl-blue-l);color:#fff}

/* corazón favoritos arriba-derecha */
.jd-wishlist-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--tl-line);
  display:grid;place-items:center;color:#aab;
}
.jd-wishlist-btn:hover,.jd-wishlist-btn.is-active{color:var(--tl-blue);border-color:var(--tl-blue);transform:none}

/* info */
.jd-product-info{padding:0 14px 16px;display:flex;flex-direction:column}
.jd-product-category{
  font-size:11px;color:var(--tl-blue);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;
}
.jd-product-name{
  font-family:var(--jd-font-sans);
  font-size:13px;line-height:1.35;color:#444;font-weight:500;
  text-transform:none;letter-spacing:normal;
  min-height:54px;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.jd-product-name a{color:inherit}
.jd-product-name a:hover{color:var(--tl-blue)}

.jd-product-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.jd-product-price strong{font-size:22px;font-weight:800;color:var(--tl-ink);font-family:var(--jd-font-sans)}
.jd-product-price .jd-old-price{font-size:13px;color:#9aa3b2;text-decoration:line-through;font-weight:600}

/* botones */
.jd-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.jd-btn-add,.jd-btn-wa{
  border-radius:8px;font-size:13px;font-weight:700;padding:10px 8px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-transform:none;letter-spacing:normal;
}
.jd-btn-add{background:var(--tl-soft);color:var(--tl-blue);border:0}
.jd-btn-add:hover{background:var(--tl-blue);color:#fff}
.jd-btn-add:disabled,.jd-btn-add.is-disabled{opacity:.5}
.jd-btn-wa{background:var(--tl-green);color:#fff;border:0}
.jd-btn-wa:hover{background:var(--tl-green-d)}

/* rating con estrellas en la card */
.jd-rating{display:flex;align-items:center;gap:6px;margin:4px 0 6px}
.jd-rating-stars{--r:5;position:relative;display:inline-block;color:#d8dce3;font-size:13px;letter-spacing:1px;line-height:1}
.jd-rating-stars::before{content:"★★★★★";position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#FFB400;width:calc(var(--r) / 5 * 100%)}
.jd-rating-num{font-size:11.5px;color:#9aa3b2;font-weight:600}

/* renglón "al contado por transferencia bancaria" */
.jd-pay{font-size:12px;color:var(--tl-green-d);font-weight:600;margin-top:3px}
.jd-pay b{color:var(--tl-blue)}

/* indicador EN STOCK */
.jd-instock{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:5px}
.jd-instock-dot{width:7px;height:7px;border-radius:50%;background:var(--tl-green);flex:none}
.jd-instock span:last-child{color:var(--tl-green-d);font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* indicador AGOTADO (productos sin stock, se publican igual) */
.jd-outstock{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:5px}
.jd-outstock-dot{width:7px;height:7px;border-radius:50%;background:#9aa0a6;flex:none}
.jd-outstock span:last-child{color:#6b7075;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.jdp-stock--out{color:#6b7075}
.jdp-stock--out .jdp-stock-dot{background:#9aa0a6}

/* ===== Card "más amor": polish visual ===== */
.jd-product-card{transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease}
.jd-product-card:hover{border-color:var(--tl-blue);box-shadow:0 12px 30px rgba(19,10,10,.18);transform:translateY(-4px)}
.jd-product-media{overflow:hidden;background:linear-gradient(180deg,#fbfcff,#fff)}
.jd-product-media img{transition:transform .4s cubic-bezier(.4,0,.2,1)}
.jd-product-card:hover .jd-product-media img{transform:scale(1.07)}
/* una sola cinta de descuento limpia (oculto el "PROMOCIÓN" redundante) */
.jd-badge-sale{display:none}
.jd-badge-discount{background:var(--tl-blue);color:#fff;box-shadow:0 2px 6px rgba(19,10,10,.3);font-size:12px;padding:5px 11px;font-weight:800}
.jd-wishlist-btn{box-shadow:0 1px 5px rgba(0,0,0,.1)}
/* "al contado" más sutil (evita doble verde con EN STOCK) */
.jd-pay{font-size:11.5px;color:#5a6473;font-weight:500;margin-top:4px}
.jd-pay b{color:var(--tl-blue);font-weight:700}
.jd-instock{font-size:10.5px;margin-top:6px}
/* botones con jerarquía: Agregar primario azul, Consultar verde outline */
.jd-btn-add{background:var(--tl-blue);color:#fff;border:0;box-shadow:0 2px 8px rgba(19,10,10,.22)}
.jd-btn-add:hover{background:var(--tl-blue-d);color:#fff}
.jd-btn-wa{background:#fff;color:var(--tl-green-d);border:1.5px solid var(--tl-green)}
.jd-btn-wa:hover{background:var(--tl-green);color:#fff}
/* ícono FA del círculo de categoría, centrado */
.tl-circ i{font-size:24px;line-height:1}

@media(max-width:480px){
  .jd-product-actions{grid-template-columns:1fr}
  /* en movil tambien cuadrada, no altura fija */
  .jd-product-media{height:auto;aspect-ratio:1/1}
}

/* ============================================================
   3. PÁGINA DE PRODUCTO  (.jdp-*)
   El diseño ya estaba en azul TAZ; alineamos al mockup:
   badge descuento azul, caja de compra como panel, tabs azules.
   ============================================================ */

/* badge de descuento rojo -> azul */
.jdp-price-discount{background:var(--tl-blue) !important;color:#fff}

/* precio: mantener azul de marca, un poco más contenido */
.jdp-price-now{color:var(--tl-blue)}

/* "Caja de compra": panel con borde como en el mockup */
.jdp-actions-wrap{
  border:1px solid var(--tl-line);
  border-radius:14px;
  padding:16px;
  background:#fff;
  box-shadow:0 1px 3px rgba(20,20,40,.06);
}

/* cantidad + agregar en columna prolija */
.jdp-actions-row{flex-wrap:wrap}

/* mini-beneficios: íconos azules ya OK; separador suave */
.jdp-mini-benefits{border-top-color:var(--tl-line)}

/* Tabs estilo mockup: activo azul */
.jdp-tab.is-active,
.jdp-tab[aria-selected="true"]{
  color:var(--tl-blue) !important;
  border-bottom-color:var(--tl-blue) !important;
}
.jdp-tab:hover{color:var(--tl-blue)}

/* Panel de tab como tarjeta */
.jdp-tab-panel.is-active{
  background:#fff;
  border:1px solid var(--tl-line);
  border-radius:14px;
  padding:22px;
}
.jdp-tab-panel h3{color:var(--tl-ink);font-family:var(--jd-font-sans);text-transform:none;letter-spacing:normal;font-weight:700;font-size:1rem;margin:0 0 10px}

/* "Detalles del producto" (grid Tailwind) -> aire tipo ficha técnica */
.jdp-info-col .grid.grid-cols-2 > div{
  border-bottom:1px solid #eef0f3;
}

/* Galería: thumbs y main con borde TAZ al activo */
.jdp-gallery-thumb.is-active,
.jdp-gallery-thumb:hover{border-color:var(--tl-blue) !important}

/* ============================================================
   4. LISTADO / CATEGORÍA
   Las cards ya heredan el rediseño. Acentos azul TAZ en chrome.
   ============================================================ */
/* botón "Cargar más" */
.secondary-button{
  border:1.5px solid var(--tl-blue) !important;
  color:var(--tl-blue) !important;
  border-radius:10px !important;
  font-weight:700;
}
.secondary-button:hover{background:var(--tl-blue) !important;color:#fff !important}

/* sidebar de filtros como panel con borde (hook semántico .panel-side) */
.panel-side{
  border:1px solid var(--tl-line);
  border-radius:14px;
  padding:14px 16px;
  background:#fff;
}

/* ============================================================
   5. HOME / CARRUSELES
   Los product-carousels ya usan las cards rediseñadas.
   Recolor de restos rojos del theme Jaguer (#d32f2f) -> azul TAZ.
   (Clases Tailwind ya compiladas; se overridean por nombre.)
   ============================================================ */
.text-\[\#d32f2f\]{color:var(--tl-blue) !important}
.border-\[\#d32f2f\]{border-color:var(--tl-blue) !important}
.hover\:bg-\[\#d32f2f\]\/5:hover{background:var(--tl-soft) !important}
.hover\:text-\[\#333333\]:hover{color:var(--tl-blue-d) !important}

/* carrusel HORIZONTAL de productos: 5 visibles, scroll + flechas */
.tl-carwrap{position:relative}
.jd-products-grid{margin-top:8px;display:flex !important;gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px}
.jd-products-grid::-webkit-scrollbar{display:none}
.jd-products-grid > *{flex:0 0 calc((100% - 64px)/5);scroll-snap-align:start;min-width:0}
@media(max-width:1280px){.jd-products-grid > *{flex-basis:calc((100% - 48px)/4)}}
@media(max-width:1000px){.jd-products-grid > *{flex-basis:calc((100% - 32px)/3)}}
@media(max-width:640px){.jd-products-grid > *{flex-basis:calc((100% - 16px)/2)}}
.tl-car-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--tl-line);box-shadow:0 3px 12px rgba(0,0,0,.18);color:var(--tl-blue);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.tl-car-arrow.prev{left:-6px}
.tl-car-arrow.next{right:-6px}
.tl-car-arrow:hover{background:var(--tl-blue);color:#fff}
.tl-carwrap--marcas .tl-car-arrow{top:50%}

/* banda azul separadora estilo "Ofertas en destaque" (sección Nuevos Productos) */
.tl-band{background:linear-gradient(180deg,var(--tl-blue-d),var(--tl-blue));margin:22px 0;padding:26px 0 32px}
.tl-band > *{margin-top:0 !important}
.tl-band h2{color:#fff !important;display:inline-flex;align-items:center}
.tl-band h2::before{content:"\f06d";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--tl-yellow);margin-right:10px;font-size:.9em}
.tl-band .text-\[\#d32f2f\]{color:#fff !important}
.tl-band .text-\[\#d32f2f\] svg{color:#fff !important}

/* ============================================================
   7. FOOTER estilo referencia (clases tl-foot-*)
   ============================================================ */
.tl-foot{background:#fff;margin-top:24px;font-size:13.5px;color:#444}
.tl-foot-strip{height:4px;background:linear-gradient(90deg,var(--tl-blue),var(--tl-blue-l),#2B2220)}
.tl-foot-main{padding:34px 0 8px}
.tl-foot-cols{display:grid;grid-template-columns:1.1fr 1.2fr 1fr 1fr;gap:30px}
.tl-foot-col h4{font-size:14px;margin:0 0 14px;color:var(--tl-ink);font-weight:700}
.tl-foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.tl-foot-col a{color:#555}
.tl-foot-col a:hover{color:var(--tl-blue)}
.tl-foot-tel{display:inline-flex;align-items:center;gap:8px;font-size:19px;font-weight:800;color:var(--tl-blue);margin-bottom:12px}
.tl-foot-contact{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tl-foot-contact li{display:flex;align-items:center;gap:9px;color:#555;font-size:13px}
.tl-foot-contact li a{display:inline-flex;align-items:center;gap:9px;color:#555}
.tl-foot-contact li a:hover{color:var(--tl-blue)}
.tl-foot-contact i{color:var(--tl-blue);width:16px;text-align:center}

/* Marcas A-Z */
.tl-foot-brands{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;border-top:1px solid var(--tl-line);margin-top:24px;padding-top:16px}
.tl-foot-brands-lbl{font-weight:700;color:var(--tl-ink);margin-right:6px}
.tl-foot-brands a{color:#888;font-weight:600;padding:2px 5px;border-radius:5px}
.tl-foot-brands a:hover{background:var(--tl-soft);color:var(--tl-blue)}

/* Barra inferior */
.tl-foot-bottom{background:#f5f7fa;border-top:1px solid var(--tl-line);margin-top:8px;padding:8px 0}
.tl-foot-quick{display:flex;flex-wrap:wrap;gap:8px 26px;padding-bottom:18px;border-bottom:1px solid var(--tl-line);margin-bottom:20px}
.tl-foot-quick a{color:#444;font-weight:600;font-size:13px}
.tl-foot-quick a:hover{color:var(--tl-blue)}
.tl-foot-bottom-grid{display:block}
.tl-foot-bottom-grid h5{font-size:13px;margin:0 0 12px;color:var(--tl-ink);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.tl-foot-logo img{height:42px;width:auto;margin-bottom:10px}
.tl-foot-legal{font-size:12.5px;color:#666;line-height:1.6;margin:0 0 14px}
.tl-foot-social{display:flex;gap:10px}
.tl-foot-social a{width:36px;height:36px;border-radius:50%;background:var(--tl-blue);color:#fff;display:grid;place-items:center;font-size:16px;transition:.15s}
.tl-foot-social a:hover{background:var(--tl-blue-d);transform:translateY(-2px)}
.tl-foot-pays{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tl-pay{background:#fff;border:1px solid #e3e6ec;border-radius:8px;height:46px;min-width:66px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;font-size:34px;color:#1a1f36;box-shadow:0 1px 3px rgba(0,0,0,.10)}
.tl-pay.tl-pay-txt{font-size:13px;font-weight:800;color:#5a6473;letter-spacing:.02em}
.tl-pay .fa-cc-visa{color:#1a1f71}.tl-pay .fa-cc-mastercard{color:#eb001b}.tl-pay .fa-cc-amex{color:#2e77bb}

/* logo + redes en la fila de arriba del footer */
.tl-foot-brand{padding:22px 0 6px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tl-foot-brand img{height:54px;width:auto;max-width:210px;object-fit:contain}
.tl-foot-seals{display:grid;gap:12px}
.tl-seal{display:flex;align-items:center;gap:11px}
.tl-seal i{font-size:22px;color:var(--tl-blue);width:24px;text-align:center}
.tl-seal span{display:flex;flex-direction:column;font-size:12px;color:#777;line-height:1.3}
.tl-seal strong{color:var(--tl-ink);font-size:13px}
.tl-foot-copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:12.5px;color:#888}
.tl-foot-credit a{color:var(--tl-blue);font-weight:600}

@media(max-width:1000px){
  .tl-foot-cols{grid-template-columns:1fr 1fr}
  .tl-foot-bottom-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tl-foot-cols{grid-template-columns:1fr}
}

/* ============================================================
   6. HOME REARMADA — secciones tipo marketplace (clases tl-*)
   ============================================================ */
.tl-wrap{max-width:var(--jd-container,1320px);margin:0 auto;padding:16px}
.tl-hero-card,.tl-hero-cta,.tl-catitem,.tl-brand,.tl-promo .tl-link,.tl-seeall{text-decoration:none}
.tl-hero-card:hover,.tl-catitem:hover,.tl-brand:hover{text-decoration:none}
.tl-sec{padding:26px 0}
.tl-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.tl-h{font-size:22px;font-weight:800;color:var(--tl-ink);display:flex;align-items:center;gap:10px;font-family:var(--jd-font-sans);text-transform:none;letter-spacing:normal;margin:0}
.tl-h .tl-ico{color:var(--tl-blue);display:inline-flex}
.tl-seeall{color:var(--tl-blue);font-weight:700;font-size:13px;white-space:nowrap}
.tl-seeall:hover{color:var(--tl-blue-d)}

/* Hero */
.tl-hero{padding:18px 0}
.tl-hero-grid{display:grid;grid-template-columns:1fr 300px;gap:14px}
.tl-hero-main{position:relative;border-radius:14px;overflow:hidden;min-height:320px;
  background:
    radial-gradient(90% 120% at 88% -10%, rgba(246,170,0,.55) 0%, rgba(246,170,0,0) 55%),
    radial-gradient(70% 90% at 12% 110%, rgba(0,16,80,.6) 0%, rgba(0,16,80,0) 60%),
    linear-gradient(120deg, var(--tl-blue-l) 0%, var(--tl-blue) 42%, var(--tl-blue-d) 100%);
  color:#fff;display:flex;align-items:center;padding:38px 46px}
.tl-hero-main::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,transparent 14px 30px)}
.tl-hero-copy{position:relative;z-index:1;max-width:62%}
.tl-hero-tag{display:inline-block;background:var(--tl-yellow);color:var(--tl-ink);font-weight:800;font-size:12px;padding:5px 12px;border-radius:20px;letter-spacing:.4px;text-transform:uppercase}
.tl-hero-copy h2{font-size:38px;line-height:1.05;margin:14px 0 8px;font-weight:800;color:#fff;font-family:var(--jd-font-sans);text-transform:none}
.tl-hero-copy p{font-size:15px;opacity:.92;margin:0 0 20px}
.tl-hero-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--tl-blue);font-weight:800;padding:12px 24px;border-radius:8px;font-size:14px}
.tl-hero-cta:hover{background:var(--tl-yellow);color:var(--tl-ink)}
.tl-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.tl-hero-card{border-radius:14px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:center;font-weight:700;font-size:16px;position:relative;overflow:hidden}
.tl-hero-card.a{background:linear-gradient(135deg,var(--tl-blue-l),var(--tl-blue-d))}
.tl-hero-card.b{background:linear-gradient(135deg,var(--tl-ink),#3a3f44)}
.tl-hero-card small{display:block;font-weight:500;opacity:.85;font-size:12px;margin-top:4px}

/* Banner full-width tipo carrusel (flechas + puntitos) */
.tl-banner{position:relative;border-radius:14px;overflow:hidden;min-height:340px}
.tl-banner-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.tl-banner-slide{min-width:100%;min-height:340px;display:flex;align-items:center;
  padding:42px 64px;color:#fff;position:relative}
.tl-banner-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,transparent 14px 30px)}
.tl-banner-slide .tl-hero-copy{position:relative;z-index:1;max-width:58%}
.tl-banner-slide.s1{background:
  radial-gradient(90% 120% at 88% -10%, rgba(246,170,0,.55) 0%, rgba(246,170,0,0) 55%),
  linear-gradient(120deg, var(--tl-blue-l) 0%, var(--tl-blue) 42%, var(--tl-blue-d) 100%)}
.tl-banner-slide.s2{background:
  radial-gradient(80% 120% at 15% 0%, rgba(246,170,0,.5) 0%, rgba(246,170,0,0) 55%),
  linear-gradient(120deg, var(--tl-blue-d) 0%, var(--tl-blue) 60%, var(--tl-blue-l) 100%)}
.tl-banner-slide.s3{background:
  radial-gradient(85% 120% at 80% 110%, rgba(246,170,0,.55) 0%, rgba(246,170,0,0) 55%),
  linear-gradient(120deg, #0B0606 0%, var(--tl-blue) 55%, var(--tl-blue-l) 100%)}

.tl-banner-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--tl-blue);
  border:0;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:.15s}
.tl-banner-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.tl-banner-arrow.prev{left:16px}
.tl-banner-arrow.next{right:16px}
.tl-banner-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3}
.tl-banner-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s}
.tl-banner-dots i.on{background:#fff;width:24px;border-radius:5px}

/* slides de imagen reales (del admin) */
.tl-banner-img{padding:0;min-height:0}
.tl-banner-img::after{content:none}
.tl-banner-imglink{display:block;width:100%}
.tl-banner-img img{display:block;width:100%;aspect-ratio:2.743/1;object-fit:cover}

/* decorativo del banner (ícono grande difuminado, arte propio TAZ) */
.tl-banner-deco{position:absolute;right:6%;top:50%;transform:translateY(-50%) rotate(-8deg);font-size:215px;color:rgba(255,255,255,.13);z-index:0;pointer-events:none;line-height:1}
.tl-banner-slide .tl-hero-copy{position:relative;z-index:1;max-width:60%}
.tl-banner-slide .tl-hero-copy h2{font-size:46px;line-height:1.04;margin:14px 0 10px}
.tl-banner-slide .tl-hero-copy p{font-size:16px}
@media(max-width:768px){
  .tl-banner-deco{font-size:120px;right:-12px;opacity:.7}
  .tl-banner-slide .tl-hero-copy{max-width:100%}
  .tl-banner-slide .tl-hero-copy h2{font-size:27px}
}

/* ===== Banner FULL-BLEED con proporciones de la referencia ===== */
/* de borde a borde, flush bajo el nav */
.tl-hero-bleed{width:100%;max-width:none;margin:0;padding:0}
.tl-hero-bleed .tl-banner{border-radius:0;min-height:0;overflow:visible}
/* imagen del admin a su proporción NATURAL (sin recortar) -> el alto sale solo */
.tl-hero-bleed .tl-banner-slide.tl-banner-img{min-height:0;padding:0}
.tl-hero-bleed .tl-banner-img img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
/* degradé blanco en la parte inferior del banner */
.tl-hero-bleed .tl-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 100%);z-index:2;pointer-events:none}
/* en fallback degradé, contener el texto al ancho del sitio */
.tl-hero-bleed .tl-banner-slide.s1 .tl-hero-copy,
.tl-hero-bleed .tl-banner-slide.s2 .tl-hero-copy,
.tl-hero-bleed .tl-banner-slide.s3 .tl-hero-copy{margin-left:max(0px, calc((100% - 1320px) / 2))}

@media(max-width:768px){
  .tl-banner,.tl-banner-slide{min-height:240px}
  .tl-banner-slide{padding:28px 30px}
  .tl-banner-slide .tl-hero-copy{max-width:100%}
  .tl-banner-arrow{width:36px;height:36px;font-size:22px}
}

/* Categorías más buscadas */
/* tarjeta gris CONTENIDA que flota sobre el banner: a los costados se ve el
   banner + degradé (como si fuera absolute). No full-width. */
.tl-catwrap{position:relative;z-index:3;background:#f4f5f7;border-radius:18px 18px 0 0;
  width:min(1320px, calc(100% - 56px));margin:-50px auto 0;padding:12px 20px 8px;
  box-shadow:0 -2px 18px rgba(0,0,0,.06)}
@media(max-width:768px){.tl-catwrap{width:calc(100% - 24px);margin-top:-26px;border-radius:14px 14px 0 0;padding:10px 12px 6px}}
/* Carrusel de categorías (scroll horizontal + flechas) */
.tl-cat-carousel{position:relative}
.tl-catrow{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.tl-catrow::-webkit-scrollbar{display:none}
.tl-catitem{flex:0 0 auto;width:calc((100% - 70px) / 8);min-width:104px;background:#fff;border:1px solid var(--tl-line);border-radius:12px;padding:16px 8px;text-align:center;transition:.15s;display:block;color:inherit}
.tl-catitem:hover{border-color:var(--tl-line);box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-2px)}
.tl-cat-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:36px;height:36px;border-radius:50%;border:1px solid var(--tl-line,#e2e6ee);background:#fff;color:var(--tl-blue,#130A0A);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.14);transition:.15s}
.tl-cat-arrow:hover{background:var(--tl-blue,#130A0A);color:#fff;border-color:var(--tl-blue,#130A0A)}
.tl-cat-arrow.prev{left:-4px}
.tl-cat-arrow.next{right:-4px}
.tl-cat-arrow.off{opacity:.3;pointer-events:none}
@media(max-width:768px){.tl-cat-arrow{display:none}.tl-catitem{min-width:92px}}
.tl-circ{width:58px;height:58px;border-radius:50%;background:var(--tl-soft);color:var(--tl-blue);display:grid;place-items:center;margin:0 auto 8px;overflow:hidden}
.tl-circ img{width:100%;height:100%;object-fit:cover}
.tl-catitem span{font-size:12px;font-weight:600;color:#444;display:block;line-height:1.25}

/* Promos: cards iguales con header + grilla de 4 imágenes + botón */
.tl-promos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.tl-promo{background:#fff;border:1px solid var(--tl-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.tl-promo-head{background:var(--tl-blue);color:#fff;text-align:center;padding:12px 10px}
.tl-promo-head h5{margin:0;font-size:15px;font-weight:800;line-height:1.2;color:#fff !important;font-family:var(--jd-font-sans);text-transform:none;letter-spacing:normal}
.tl-promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;flex:1}
.tl-promo-cell{border:1px solid var(--tl-line);border-radius:10px;aspect-ratio:1;display:grid;place-items:center;padding:8px;background:#fff;overflow:hidden}
.tl-promo-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .25s ease}
.tl-promo-cell:hover{border-color:var(--tl-blue)}
.tl-promo-cell:hover img{transform:scale(1.06)}
.tl-promo-btn{margin:0 16px 16px;text-align:center;background:var(--tl-soft);color:var(--tl-blue);font-weight:700;padding:11px;border-radius:8px;font-size:13.5px;text-decoration:none}
.tl-promo-btn:hover{background:var(--tl-blue);color:#fff}

/* Marcas: carrusel horizontal (conectado al atributo brand del admin) */
.tl-brands{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;padding:2px}
.tl-brands::-webkit-scrollbar{display:none}
.tl-brands > *{flex:0 0 calc((100% - 70px)/6);min-width:195px;scroll-snap-align:start}
.tl-brand{background:#fff;border-radius:12px;height:120px;display:grid;place-items:center;padding:16px;overflow:hidden;transition:.15s}
.tl-brand img{max-width:100%;max-height:100%;object-fit:contain}
.tl-brand:hover{box-shadow:none}

/* Franja de confianza */
.tl-trust{background:#fff;border-top:1px solid var(--tl-line);border-bottom:1px solid var(--tl-line);margin-top:18px}
.tl-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:22px 0}
.tl-t{display:flex;gap:12px;align-items:flex-start}
.tl-t .tl-ico{font-size:24px;color:var(--tl-blue);flex:none}
.tl-t b{display:block;font-size:14px;color:var(--tl-ink)}
.tl-t span{font-size:12px;color:var(--tl-muted)}

/* Sección de servicios (estilo referencia: título + 4 columnas con ícono/título/desc) */
.tl-services{background:#fff;padding:38px 0 32px;border-top:1px solid var(--tl-line)}
.tl-services-head{display:flex;align-items:center;gap:18px;margin-bottom:28px}
.tl-services-head h3{font-size:24px;font-weight:800;color:var(--tl-ink);margin:0;font-family:var(--jd-font-sans);text-transform:none;line-height:1.2}
.tl-services-line{flex:1;height:2px;background:linear-gradient(90deg,var(--tl-blue),transparent)}
.tl-services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.tl-srv i{font-size:30px;color:var(--tl-blue);margin-bottom:14px;display:block}
.tl-srv h4{font-size:18px;font-weight:800;color:var(--tl-ink);margin:0 0 8px;font-family:var(--jd-font-sans);text-transform:none}
.tl-srv p{font-size:13.5px;color:#555;line-height:1.6;margin:0}
.tl-srv p b{color:var(--tl-ink)}
@media(max-width:900px){.tl-services-grid{grid-template-columns:repeat(2,1fr)}.tl-services-head h3{font-size:20px}}
@media(max-width:540px){.tl-services-grid{grid-template-columns:1fr}}

@media(max-width:1100px){
  .tl-hero-grid{grid-template-columns:1fr}
  .tl-hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .tl-catrow{grid-template-columns:repeat(4,1fr)}
  .tl-promos{grid-template-columns:repeat(2,1fr)}
  .tl-brands{grid-template-columns:repeat(4,1fr)}
  .tl-trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .tl-catrow{grid-template-columns:repeat(3,1fr)}
  .tl-hero-copy{max-width:100%}
  .tl-hero-copy h2{font-size:28px}
}

/* ===================== B2B / Fase 1-2: formularios, pasos, marcas, CTAs =====================
   (movido desde los <style> inline de los blades porque la CSS compilada de Bagisto los pisaba;
   aquí, al cargarse taz-loja.css al final del <head>, ganan siempre) */

/* Cómo funciona (pasos) */
.tl-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 4px}
.tl-step{background:#f4f6fb;border-radius:14px;padding:18px 16px;display:flex;gap:12px;align-items:flex-start}
.tl-step-n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--tl-blue,#130A0A);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.tl-step p{margin:4px 0 0;font-size:14px;color:#333}

/* Formulario de socios / genérico */
.tl-form{background:#fff;border:1px solid #e7ebf3;border-radius:16px;padding:22px;max-width:900px}
.tl-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tl-form label,.tl-form-full{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#334;margin-top:14px}
.tl-form input,.tl-form textarea{border:1px solid #cdd5e4;border-radius:10px;padding:11px 13px;font-size:14px;font-weight:400;color:#111;background:#fff;width:100%}
.tl-form input:focus,.tl-form textarea:focus{outline:none;border-color:var(--tl-blue,#130A0A)}
.tl-form .tl-hero-cta{margin-top:18px;border:none;cursor:pointer;display:inline-block;background:var(--tl-blue,#130A0A);color:#fff;padding:13px 28px;border-radius:12px;font-weight:700}
.tl-form .tl-hero-cta:hover{filter:brightness(1.12);color:#fff}
.tl-alert-ok{background:#e6f7ec;border:1px solid #9edcb4;color:#1c6b3c;border-radius:12px;padding:14px 16px;margin-bottom:16px;font-weight:600}
.tl-alert-err{background:#fdecec;border:1px solid #f0a9a9;color:#a12626;border-radius:10px;padding:11px 14px;margin-top:14px;font-weight:600}

/* Página de marcas */
.tl-marcas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tl-marca-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid #e7ebf3;border-radius:14px;padding:18px 14px;text-decoration:none;transition:.15s}
.tl-marca-card:hover{border-color:var(--tl-blue,#130A0A);transform:translateY(-3px);box-shadow:0 8px 22px rgba(19,10,10,.10)}
.tl-marca-card img{width:100%;max-width:150px;height:80px;object-fit:contain}
.tl-marca-card span{font-weight:700;color:#130A0A;font-size:14px;text-align:center}

/* CTAs de acceso rápido (home) */
.tl-cta-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:6px 0 4px}
.tl-cta-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:14px;background:#fff;border:1.5px solid #e1e7f2;font-weight:700;color:#130A0A;text-decoration:none;transition:.15s}
.tl-cta-btn:hover{border-color:var(--tl-blue,#130A0A);color:var(--tl-blue,#130A0A);transform:translateY(-2px)}
.tl-cta-btn i{color:var(--tl-blue,#130A0A)}
.tl-cta-primary,.tl-cta-primary i{color:#fff}
.tl-cta-primary{background:var(--tl-blue,#130A0A);border-color:var(--tl-blue,#130A0A)}
.tl-cta-primary:hover{color:#fff;filter:brightness(1.12)}

@media(max-width:980px){.tl-marcas-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
  .tl-steps,.tl-form-grid,.tl-cta-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .tl-steps,.tl-form-grid{grid-template-columns:1fr}
  .tl-marcas-grid{grid-template-columns:repeat(2,1fr)}
}

/* FAQ (details/summary) */
.tl-faq{max-width:860px}
.tl-faq-item{border:1px solid #e7ebf3;border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden}
.tl-faq-item summary{cursor:pointer;padding:16px 18px;font-weight:700;color:#130A0A;list-style:none;position:relative;padding-right:44px}
.tl-faq-item summary::-webkit-details-marker{display:none}
.tl-faq-item summary::after{content:'+';position:absolute;right:18px;top:14px;color:var(--tl-blue,#130A0A);font-weight:800;font-size:20px}
.tl-faq-item[open] summary::after{content:'\2013'}
.tl-faq-item p{margin:0;padding:0 18px 16px;color:#556;font-size:14px;line-height:1.6}

/* Depoimentos / testimonios */
.tl-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tl-testi{background:#fff;border:1px solid #e7ebf3;border-radius:14px;padding:20px}
.tl-testi .stars{color:#f5a623;font-size:14px;margin-bottom:8px}
.tl-testi p{margin:0 0 12px;color:#334;font-size:14px;line-height:1.6;font-style:italic}
.tl-testi .who{font-weight:700;color:#130A0A;font-size:13px}
.tl-testi .who span{display:block;font-weight:400;color:#889;font-size:12px}
@media(max-width:820px){.tl-testi-grid{grid-template-columns:1fr}}

/* Productos similares / compatibles (ficha de producto) */
.tl-sim-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.tl-sim-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e7ebf3;border-radius:12px;padding:12px;text-decoration:none;transition:.15s}
.tl-sim-card:hover{border-color:var(--tl-blue,#130A0A);transform:translateY(-3px);box-shadow:0 8px 20px rgba(19,10,10,.10)}
.tl-sim-img{height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.tl-sim-img img{max-height:108px;max-width:100%;object-fit:contain}
.tl-sim-sku{font-size:11px;color:#130A0A;font-weight:700}
.tl-sim-name{font-size:13px;color:#130A0A;font-weight:600;margin:3px 0 6px;line-height:1.35;min-height:34px}
.tl-sim-price{font-weight:800;color:#130A0A;font-size:15px;margin-top:auto}
@media(max-width:1100px){.tl-sim-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tl-sim-grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   CARRUSEL DE MARCAS DEL HOME  (override de jaguar-design.css)
   Pedido del cliente (20/08/2026): que pase mas despacio, que los
   logos se vean grandes y SIEMPRE a color (antes estaban en gris al
   65% y solo se coloreaban al pasar el mouse).
   Va aca porque taz-loja.css se carga ultimo y gana; las mismas
   reglas dentro del blade las pisa jaguar-design.css.
   ============================================================ */
.jd-brands-track{animation:jd-brands-scroll 110s linear infinite}
.jd-brand-slide{width:280px;height:130px;padding:0 26px}
/* El logo va dentro de un <a> en linea: sin esto el ancho porcentual de la
   imagen se resuelve contra el tamano natural del logo y no crece nunca. */
.jd-brand-slide a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* width:100% para que el logo ocupe todo el ancho util del slide (los JPEG del
   ERP vienen a ~200px); object-fit:contain mantiene la proporcion y max-height
   evita que los logos verticales se desborden. */
.jd-brand-slide img,.jd-brand-slide svg{width:100%;max-width:100%;max-height:105px;height:auto;object-fit:contain;filter:none;opacity:1;transition:transform .3s ease}
.jd-brand-slide:hover img,.jd-brand-slide:hover svg{filter:none;opacity:1;transform:scale(1.05)}
@media(max-width:768px){
  .jd-brand-slide{width:200px;height:105px;padding:0 20px}
  .jd-brand-slide img,.jd-brand-slide svg{max-height:80px}
}

/* ============================================================
   ARREGLOS DE AUDITORIA (21/08/2026)
   ============================================================ */

/* 1. El banner no recortaba sus slides: los 3 se acomodaban uno al lado del
      otro y el documento medía 4320px en un viewport de 1440 → barra de scroll
      horizontal y layout corrido durante los primeros segundos de carga. */
.tl-hero, .tl-banner{overflow:hidden}

/* 2. En móvil las flechas del banner quedaban ENCIMA del texto del slide.
      Se bajan al borde inferior, en fila, fuera del bloque de texto. */
@media(max-width:768px){
  /* Flechas chicas pegadas a los bordes y el texto con aire a los costados,
     asi no se pisan (antes estaban ENCIMA del parrafo) ni quedan tapadas por
     la tarjeta de categorias que monta sobre el borde inferior del banner. */
  .tl-banner-arrow{top:38%;bottom:auto;transform:translateY(-50%);width:30px;height:30px;font-size:18px;opacity:.9}
  .tl-banner-arrow.prev{left:4px;right:auto}
  .tl-banner-arrow.next{right:4px;left:auto}
  .tl-hero-copy{padding-left:40px;padding-right:40px}
  /* Los puntos caian sobre el parrafo; en movil alcanza con las flechas
     y el auto-play. */
  .tl-banner-dots{display:none}
}

/* 3. La barra superior escondía las etiquetas en móvil y quedaba una fila de
      íconos sin texto, imposible de interpretar. Se muestran y la barra
      scrollea en horizontal (ya tenía overflow-x:auto). */
@media(max-width:768px){
  .taz-util a span.taz-util-lbl{display:inline}
  .taz-util-inner{gap:18px;padding-right:16px}
}

/* ============================================================
   AUDITORIA MOVIL (24/08/2026)
   ============================================================ */
@media(max-width:768px){

  /* 1. Las flechas de los carruseles de producto se apoyaban SOBRE la tarjeta
        y tapaban las primeras letras del nombre ("...ACABADO PARA M|ANOPLA").
        Se suben a la altura de la imagen, donde no hay texto, y se achican. */
  /* El alto lo decide el CSS por clase de contenedor (antes venia como estilo
     en linea desde el JS y no se podia sobrescribir). Sobre la imagen, que es
     donde no hay texto. */
  .tl-carwrap--prod .tl-car-arrow{top:80px}
  .tl-carwrap--marcas .tl-car-arrow{top:50%}
  .tl-car-arrow{width:34px;height:34px;font-size:19px;opacity:.95}
  .tl-car-arrow.prev{left:2px}
  .tl-car-arrow.next{right:2px}

  /* 2. Tarjetas mas compactas: entraba apenas 1 producto por pantalla.
        El precio en una sola linea evita ademas que los botones queden a
        distinta altura entre tarjetas vecinas. */
  .jd-product-price strong{font-size:17px;white-space:nowrap}
  .jd-product-name{font-size:12.5px;min-height:46px;-webkit-line-clamp:3}
  .jd-product-info{padding:0 10px 12px}
  .jd-product-media{padding:8px}
  /* "al contado por transferencia bancaria" ocupaba 2 lineas en cada tarjeta */
  .jd-pay{font-size:10.5px;line-height:1.25}

  /* 3. Botones de la tarjeta: SIGUEN APILADOS a proposito. Con 2 columnas de
        tarjetas el contenido mide ~145px, asi que lado a lado quedarian de 70px
        y "Consultar" no entra. Se los hace mas bajos para recuperar altura. */
  .jd-product-actions{gap:6px;margin-top:8px}
  .jd-btn-add,.jd-btn-wa{padding:9px 6px;font-size:12.5px;white-space:nowrap}

  /* 4. Barra superior: los enlaces median 13px de alto (minimo tactil 44px) y
        quedaban cortados. Se les da altura real y se marca que scrollea. */
  .taz-util-inner{height:auto;padding-top:6px;padding-bottom:6px}
  .taz-util a{min-height:34px;padding:4px 2px;align-items:center}
  .taz-util-inner::-webkit-scrollbar{height:2px}
  .taz-util-inner::-webkit-scrollbar-thumb{background:#555;border-radius:2px}

  /* 5. Carrusel de marcas: con slides de 200px y 110s se veian 1-2 marcas.
        Mas chicas y mas rapido para que pasen varias. */
  .jd-brand-slide{width:150px;height:86px;padding:0 14px}
  .jd-brand-slide img,.jd-brand-slide svg{max-height:64px}
  .jd-brands-track{animation-duration:55s}
  .jd-brands-section{padding:34px 0}
  .jd-brands-eyebrow{letter-spacing:.10em;font-size:.70rem}

  /* 6. Botones del bloque de accesos: "Comprar ahora" partia en 2 lineas */
  .tl-cta-btn{padding:13px 8px;font-size:13.5px;white-space:nowrap}

  /* 7. Ficha de producto: la galeria de ESCRITORIO se mostraba tambien en
        movil (su clase Tailwind `max-1180:hidden` es un valor arbitrario que
        NO esta en el CSS compilado del storefront). Resultado: la foto
        aparecia dos veces y dejaba ~105px de hueco arriba. */
  .jdp-gallery-desktop{display:none !important}

  /* 8. Footer: la grilla de categorias dejaba un hueco vertical grande */
  .tl-footcats,.jg-foot-cats{display:block !important}
}

/* ============================================================
   PULIDO DE OFICIO (24/08/2026)
   Identidad intacta: mismo azul, mismo layout. Se trabaja la
   EJECUCION: respuesta al tacto, materiales, tipografia y
   respeto por las preferencias de movimiento.
   ============================================================ */

:root{
  /* Curvas: salida exponencial, sin rebote. El rebote solo se justifica
     cuando el gesto trajo inercia, y aca no hay gestos de arrastre. */
  --tl-ease:      cubic-bezier(.22,1,.36,1);   /* ease-out-quint */
  --tl-ease-fast: cubic-bezier(.16,1,.3,1);
  /* Escala de elevacion. Antes las sombras se elegian una por una. */
  --tl-sh-1: 0 1px 2px rgba(16,24,40,.06);
  --tl-sh-2: 0 4px 10px rgba(16,24,40,.08);
  --tl-sh-3: 0 10px 24px rgba(19,10,10,.14);
}

/* ------------------------------------------------------------
   1. RESPUESTA AL TACTO
   No habia UN SOLO estado :active en todo el sitio. En movil,
   con el resaltado nativo desactivado, presionar no devolvia
   ninguna senal: la interfaz se sentia muerta hasta que cargaba
   la pagina siguiente. El feedback va al presionar, no al soltar.
   ------------------------------------------------------------ */
.jd-btn-add:active,
.jd-btn-wa:active,
.tl-cta-btn:active,
.tl-hero-cta:active,
.tl-promo-btn:active,
.jd-wishlist-btn:active,
.tl-banner-arrow:active,
.tl-car-arrow:active,
.tl-cat-arrow:active,
#jg-search-submit:active{
  transform:scale(.97);
  transition:transform 90ms var(--tl-ease-fast);
}
.jd-product-card:active{transform:translateY(-1px) scale(.995)}
.tl-catitem:active .tl-circ{transform:scale(.94)}
.tl-circ{transition:transform 140ms var(--tl-ease)}

/* Las tarjetas y los enlaces de categoria son objetivos grandes:
   un tinte al presionar confirma el toque sin mover el layout. */
.tl-catitem:active,.tl-marca-card:active{background:var(--tl-soft)}

/* ------------------------------------------------------------
   2. MOVIMIENTO
   `transition:all` obliga al navegador a vigilar cada propiedad
   y puede animar propiedades de layout. Se declara solo lo que
   se anima, con salida exponencial.
   ------------------------------------------------------------ */
.jd-btn-add,.jd-btn-wa,.tl-cta-btn,.tl-hero-cta,.tl-promo-btn{
  transition:background-color .2s var(--tl-ease),
             color .2s var(--tl-ease),
             border-color .2s var(--tl-ease),
             transform .2s var(--tl-ease),
             box-shadow .2s var(--tl-ease);
}
.jd-product-card{transition:transform .24s var(--tl-ease), box-shadow .24s var(--tl-ease), border-color .24s var(--tl-ease)}

/* Elevacion coherente: antes el hover mezclaba borde de 1px con una
   sombra de 24px de difuminado, que lee como halo en vez de relieve. */
.jd-product-card:hover{box-shadow:var(--tl-sh-3);transform:translateY(-2px)}
.tl-cta-btn:hover{box-shadow:var(--tl-sh-2)}

/* ------------------------------------------------------------
   3. TIPOGRAFIA
   El tracking es especifico del tamano: los titulos grandes leen
   con las letras demasiado separadas y necesitan tracking
   negativo; el texto chico necesita un poco de aire.
   El titular del banner venia con tracking POSITIVO.
   ------------------------------------------------------------ */
.tl-banner-slide h2,.jd-brands-title{letter-spacing:-.02em;text-wrap:balance}
.tl-hero-copy h2{line-height:1.06}
.tl-h,.jdp-title,h1,h2{text-wrap:balance}
/* Etiquetas cortas en mayuscula: ahi el tracking positivo SI ayuda */
.jd-instock span:last-child,.jd-outstock span:last-child,.tl-hero-tag{letter-spacing:.05em}
/* Cuerpo neutro */
.jd-product-name,.jd-pay{letter-spacing:0}
/* Los precios son el dato que se compara: que no se corten nunca */
.jd-product-price strong{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ------------------------------------------------------------
   4. MATERIAL DEL HEADER
   El header es sticky pero opaco: al scrollear, el contenido
   desaparece detras de un bloque solido. Se convierte en una
   capa translucida con el contenido pasando por debajo, y el
   borde duro se reemplaza por una sombra minima que solo
   aparece cuando de verdad hay contenido debajo.
   ------------------------------------------------------------ */
.jg-h.is-stuck #jg-main{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
.jg-h.is-stuck{box-shadow:var(--tl-sh-1)}
.jg-h{transition:box-shadow .25s var(--tl-ease)}

/* ------------------------------------------------------------
   5. FOCO VISIBLE
   Navegar con teclado no mostraba donde estaba el foco.
   ------------------------------------------------------------ */
.jd-btn-add:focus-visible,.jd-btn-wa:focus-visible,.tl-cta-btn:focus-visible,
.tl-catitem:focus-visible,.jd-product-card a:focus-visible,#jg-search-input:focus-visible,
.tl-hero-cta:focus-visible,.tl-promo-btn:focus-visible{
  outline:2px solid var(--tl-blue);
  outline-offset:2px;
  border-radius:8px;
}

/* ------------------------------------------------------------
   6. PREFERENCIAS DE MOVIMIENTO
   No habia NINGUNA regla. La marquesina de marcas gira en bucle
   infinito y el banner se mueve solo cada 6s: para alguien
   sensible al movimiento eso es hostil. Reducir no es apagar
   todo: se conservan los cambios de color y opacidad, que
   ayudan a entender, y se quitan los desplazamientos.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .jd-brands-track{animation:none !important;flex-wrap:wrap;justify-content:center;width:100%}
  .tl-banner-track{transition:none !important}
  .jd-product-card:hover,.jd-product-card:active{transform:none}
  .jd-product-card:hover .jd-product-media img{transform:none}
  .jd-btn-add:active,.jd-btn-wa:active,.tl-cta-btn:active,.tl-hero-cta:active,
  .tl-promo-btn:active,.tl-banner-arrow:active,.tl-car-arrow:active{transform:none;opacity:.75}
  .tl-catitem:active .tl-circ{transform:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* Menos transparencia: el header vuelve a ser solido */
@media (prefers-reduced-transparency: reduce){
  .jg-h.is-stuck #jg-main{background:#fff !important;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ============================================================
   DIRECCION VISUAL (24/08/2026)
   El sitio funcionaba pero se leia como plantilla: azul saturado
   en bloques grandes, adornos que compiten con el producto y
   tarjetas dentro de tarjetas. Se calma el ruido para que lo
   que resalte sea la pieza, que es lo que el mecanico compara.
   Identidad intacta: mismo azul, mismo layout.
   ============================================================ */

/* --- 1. Circulos de categoria ---------------------------------
   El fondo celeste (--tl-soft) dibujaba un "cuenco" celeste detras
   de cada foto recortada. Era lo que mas gritaba "sin terminar".
   Fondo neutro y la foto contenida, no recortada. */
.tl-circ{background:#fff;border:1px solid var(--tl-line);overflow:hidden}
.tl-circ img{object-fit:contain;padding:8px;background:#fff}
.tl-catitem:hover .tl-circ{border-color:var(--tl-blue)}
.tl-catitem:active,.tl-marca-card:active{background:transparent}

/* --- 2. Banner -------------------------------------------------
   Tenia rayas diagonales + un icono translucido de 215px. Dos
   adornos compitiendo con el mensaje. Se quitan: queda un degrade
   azul limpio y el texto manda. */
.tl-banner-slide.s1::after,.tl-banner-slide.s2::after,.tl-banner-slide.s3::after{background:none !important}
.tl-banner-deco{display:none}
.tl-hero-copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.025em;line-height:1.04}
.tl-hero-copy p{max-width:46ch;opacity:.92}

/* --- 3. Las 4 cajas del home ----------------------------------
   Cabecera de color solido + tarjetas DENTRO de la tarjeta.
   Las tarjetas anidadas siempre estan de mas: se quita el marco
   interno y la cabecera pasa a texto sobre una linea. */
.tl-promo-head{background:transparent;padding:14px 14px 10px;text-align:left;border-bottom:1px solid var(--tl-line)}
.tl-promo-head h5{color:var(--tl-ink) !important;font-size:14px;letter-spacing:-.01em}
.tl-promo-cell{border:0 !important;background:#fff}
.tl-promo{border:1px solid var(--tl-line);border-radius:14px;overflow:hidden;background:#fff}
.tl-promo-btn{border-top:1px solid var(--tl-line);background:#fff;color:var(--tl-blue);font-weight:700}
.tl-promo-btn:hover{background:var(--tl-soft)}

/* --- 4. Jerarquia en la fila de accesos -----------------------
   Cuatro botones del mismo peso no son jerarquia, son ruido.
   Uno primario, el resto discretos. */
.tl-cta-btn{border-color:#e6e9f0;font-weight:600;color:#3a4356}
.tl-cta-btn i{color:#8b93a6}
.tl-cta-primary,.tl-cta-primary i{color:#fff}
.tl-cta-btn:not(.tl-cta-primary):hover{border-color:var(--tl-blue);color:var(--tl-blue)}
.tl-cta-btn:not(.tl-cta-primary):hover i{color:var(--tl-blue)}

/* --- 5. Hover solo donde hay puntero fino ---------------------
   En tactil el hover se dispara al tocar y deja el estado pegado. */
@media (hover: hover) and (pointer: fine){
  .jd-product-card:hover{transform:translateY(-2px);box-shadow:var(--tl-sh-3)}
}
@media (hover: none){
  .jd-product-card:hover{transform:none;box-shadow:none}
  .jd-product-card:hover .jd-product-media img{transform:none}
}

/* --- 6. Curvas y tiempos -------------------------------------
   Curva de salida mas fuerte (la de Emil) y feedback de presion
   en el rango 100-160ms, que es donde se siente inmediato. */
:root{--tl-ease:cubic-bezier(.23,1,.32,1)}
.jd-btn-add:active,.jd-btn-wa:active,.tl-cta-btn:active,.tl-hero-cta:active,
.tl-promo-btn:active,.jd-wishlist-btn:active,.tl-banner-arrow:active,
.tl-car-arrow:active,.tl-cat-arrow:active,#jg-search-submit:active{
  transition:transform 120ms var(--tl-ease);
}

/* ============================================================
   TIPOGRAFIA UNIFICADA + RITMO LATERAL (24/08/2026)
   ============================================================ */

/* --- Una sola familia -----------------------------------------
   Convivian Montserrat (titulos), Inter (cuerpo) y Russo One /
   Oswald / Bebas (display). Tres sans parecidas pero distintas:
   eso es lo que se lee como "no cuadra". Manrope cubre todo el
   rango con contraste de peso. */
:root{
  --jd-font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
  --jd-font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --tl-font:         'Poppins', system-ui, -apple-system, sans-serif;
  /* el header tenia su PROPIO token con Inter */
  --jg-font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
}
html,body,button,input,select,textarea,
h1,h2,h3,h4,h5,h6,p,a,span,div,li,label,strong,b,small{
  font-family:var(--tl-font);
}

/* Escala: el tracking es especifico del tamano. Los titulos grandes
   se cierran, el cuerpo queda neutro y las etiquetas en mayuscula
   se abren, que es donde el espacio ayuda a leer. */
h1,.jdp-title{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.12;letter-spacing:-.022em;font-weight:800}
h2,.tl-hero-copy h2{letter-spacing:-.025em;line-height:1.06;font-weight:800}
h3,.tl-h,.jd-brands-title{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.2;letter-spacing:-.015em;font-weight:800}
.tl-promo-head h5{font-weight:700;letter-spacing:-.01em}

/* Cuerpo y datos */
body{font-weight:400;letter-spacing:0}
.jd-product-name{font-weight:600;letter-spacing:.005em;line-height:1.32}
.jd-pay,small,.tl-cep-txt small{font-weight:500;letter-spacing:.005em}

/* Numeros: tabulares para que los precios alineen entre tarjetas */
.jd-product-price strong,.jdp-price,.tl-sim-price{
  font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

/* Etiquetas cortas en mayuscula */
.jd-instock span:last-child,.jd-outstock span:last-child,.tl-hero-tag,
.jd-badge,.jd-brands-eyebrow{font-weight:700;letter-spacing:.06em}

/* Botones: peso, no mayuscula forzada */
.jd-btn-add,.jd-btn-wa,.tl-cta-btn,.tl-hero-cta,.tl-promo-btn{font-weight:700;letter-spacing:0}

/* Titulares sin lineas huerfanas */
h1,h2,h3,.tl-h,.jdp-title{text-wrap:balance}

/* --- Ritmo lateral en movil ------------------------------------
   Convivian TRES margenes (24 / 16 / 12) y dos bloques pegados al
   borde. Modelo: UN contenedor manda el gutter y los hijos van a 0,
   si no los margenes se SUMAN al anidarse (llegaban a 44px). */
@media(max-width:768px){
  :root{--tl-gutter:16px}

  /* el contenedor de seccion es el unico que abre margen */
  .tl-wrap,.tl-sec{
    margin-left:0;margin-right:0;width:auto;max-width:none;
    padding-left:var(--tl-gutter);padding-right:var(--tl-gutter);
  }
  /* hijos: sin margen propio, heredan el del contenedor */
  .tl-wrap .tl-promos,.tl-wrap .tl-cta-row,.tl-wrap .jd-products-grid,
  .tl-wrap .tl-catrow,.tl-wrap .jd-brands-header,.tl-wrap .tl-trust-grid,
  .tl-wrap .tl-sec-head{padding-left:0;padding-right:0;margin-left:0;margin-right:0}

  /* los que NO viven dentro de .tl-wrap abren su propio margen */
  .tl-promos:not(.tl-wrap *),
  .tl-cta-row:not(.tl-wrap *),
  .jd-products-grid:not(.tl-wrap *),
  .tl-trust-grid:not(.tl-wrap *),
  .jd-brands-container{padding-left:var(--tl-gutter);padding-right:var(--tl-gutter)}

  .tl-catwrap{padding-left:0;padding-right:0}

  /* bandas a sangre: el color llega al borde, el contenido no */
  .tl-band,.taz-util,.taz-ship{padding-left:0;padding-right:0}
  .taz-util-inner{padding-left:var(--tl-gutter);padding-right:var(--tl-gutter)}
}

/* Forzar la familia por encima de los tokens viejos de las otras hojas */
body,body *:not(i):not(svg):not([class*="fa-"]){font-family:var(--tl-font)}

/* --- Gutter movil: version final ------------------------------
   El sitio mezcla contenedores propios (.tl-wrap) con wrappers del
   tema (.max-w-7xl, .mt-12.max-lg:px-6). Cada uno aportaba lo suyo
   y los margenes se sumaban (llegaban a 44px) o quedaban en 0.
   Modelo: los ancestros no aportan NADA y el contenedor de
   contenido abre exactamente un gutter. */
@media(max-width:768px){
  /* 1. ancestros neutralizados */
  .tl-catwrap,
  [class*="max-w-7xl"],
  [class*="max-lg:px-6"],
  .tl-carwrap{
    padding-left:0 !important;padding-right:0 !important;
    margin-left:0 !important;margin-right:0 !important;
  }

  /* 2. el contenedor de contenido abre el gutter */
  .tl-wrap,.tl-sec,.tl-promos,.tl-cta-row,.jd-products-grid,
  .tl-trust-grid,.jd-brands-container,.taz-util-inner{
    padding-left:var(--tl-gutter) !important;
    padding-right:var(--tl-gutter) !important;
    margin-left:0 !important;margin-right:0 !important;
    max-width:none !important;width:auto !important;
  }

  /* 3. si ya esta dentro de uno que abrio, no abre de nuevo */
  .tl-wrap .tl-promos,.tl-wrap .tl-cta-row,.tl-wrap .jd-products-grid,
  .tl-wrap .tl-trust-grid,.tl-wrap .jd-brands-header,.tl-wrap .tl-catrow,
  .tl-wrap .tl-sec-head,.tl-wrap .jd-brands-container{
    padding-left:0 !important;padding-right:0 !important;
  }
}

/* ============================================================
   TITULOS DE LAS CAJAS + FLECHAS DEL CARRUSEL (25/08/2026)
   ============================================================ */

:root{ --tl-accent:#F6AA00; }   /* un solo lugar para ajustar el rojo */

/* --- Cabeceras tipo pestaña, centradas y en rojo ---------------
   Referencia enviada por el cliente. La pestaña sobresale por
   encima de la caja, con las esquinas superiores redondeadas. */
.tl-promo{overflow:visible;margin-top:14px}
.tl-promo-head{
  background:var(--tl-accent);
  border-bottom:0;
  border-radius:12px 12px 0 0;
  text-align:center;
  padding:11px 14px;
  margin:-14px 10px 0;       /* sobresale sobre el borde de la caja */
  position:relative;
  z-index:1;
}
.tl-promo-head h5{
  color:#fff !important;
  font-weight:600;
  font-size:16px;
  letter-spacing:-.005em;
  line-height:1.2;
}
@media(max-width:768px){
  .tl-promo-head{font-size:14px;padding:9px 10px;margin:-12px 8px 0}
  .tl-promo-head h5{font-size:14px}
}

/* --- Flechas del carrusel de categorias ------------------------
   Estaban ocultas por completo en movil (`display:none`), asi que
   el boton "no funcionaba" porque directamente no estaba. Y en
   escritorio, al inicio, la flecha izquierda quedaba con
   pointer-events:none pero casi igual de visible: parecia rota.
   Ahora se ven en movil y el estado inhabilitado se nota. */
@media(max-width:768px){
  .tl-cat-arrow{display:flex !important;width:32px;height:32px;font-size:19px}
  .tl-cat-arrow.prev{left:2px}
  .tl-cat-arrow.next{right:2px}
}
.tl-cat-arrow.off{opacity:.28;pointer-events:none;box-shadow:none;border-color:#e8ebf2}

/* --- Cuadricula de las cajas (referencia del cliente) ----------
   Cada miniatura en su propia tarjeta blanca con borde suave,
   en 2x2, y el boton inferior en rojo tenue. */
.tl-promo-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;
}
.tl-promo-cell{
  border:1px solid #e8ebf0 !important;
  border-radius:12px;
  background:#fff;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  padding:10px;
  transition:border-color .2s var(--tl-ease),box-shadow .2s var(--tl-ease);
}
.tl-promo-cell:hover{border-color:var(--tl-accent) !important;box-shadow:var(--tl-sh-2)}
.tl-promo-cell img{max-width:100%;max-height:100%;object-fit:contain}
.tl-promo-btn{
  margin:0 16px 16px;border:0;border-top:0;border-radius:10px;
  background:#FFF5DA;color:var(--tl-accent);font-weight:700;padding:13px 10px;
}
.tl-promo-btn:hover{background:var(--tl-accent);color:#fff}

/* --- Carrusel de marcas: tarjetas + flechas --------------------
   Pasa de marquesina infinita a avance de a una marca cada 2s
   (el temporizador vive en el blade del componente). */
.jd-brands-marquee{
  position:relative;overflow:hidden;padding:4px 44px;
  -webkit-mask-image:none;mask-image:none;   /* el degrade de los bordes ya no aplica */
}
.jd-brands-track{
  display:flex;gap:14px;width:auto !important;
  animation:none !important;                  /* fuera el bucle infinito */
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.jd-brands-track::-webkit-scrollbar{display:none}
.jd-brand-slide{
  flex:0 0 auto;width:190px;height:112px;
  border:1px solid #e8ebf0;border-right:1px solid #e8ebf0;
  border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:14px;
}
.jd-brand-slide img,.jd-brand-slide svg{max-width:100%;max-height:74px;filter:none;opacity:1}
.jd-brands-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--tl-line);
  background:#fff;color:var(--tl-ink);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--tl-sh-2);
}
.jd-brands-arrow.prev{left:4px}
.jd-brands-arrow.next{right:4px}
.jd-brands-arrow:hover{background:var(--tl-accent);color:#fff;border-color:var(--tl-accent)}
.jd-brands-arrow:active{transform:translateY(-50%) scale(.94)}
@media(max-width:768px){
  .jd-brands-marquee{padding:4px 38px}
  .jd-brand-slide{width:150px;height:92px;padding:10px}
  .jd-brand-slide img,.jd-brand-slide svg{max-height:60px}
}

/* el peso 600 de la referencia (una regla previa lo forzaba a 700) */
.tl-promo-head h5{font-weight:600 !important}

/* ============================================================
   CARD DE PRODUCTO — jerarquia segun referencia (25/08/2026)
   Objetivo: que se distinga de un vistazo QUE es cada cosa.
   Antes titulo, forma de pago y stock tenian pesos parecidos y
   se leian como un bloque gris.
   ============================================================ */

/* 1. TITULO: es lo primero que se lee despues de la foto.
      Dos lineas exactas con puntos suspensivos, para que todas
      las cards midan igual y los precios queden alineados. */
.jd-product-name{
  font-size:15px;
  font-weight:500;
  line-height:1.34;
  color:#1a1f2b;
  letter-spacing:-.006em;
  -webkit-line-clamp:2;
  min-height:41px;
  margin:2px 0 8px;
}

/* 2. PRECIO: el dato que se compara. Moneda chica, numero grande. */
.jd-product-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:2px}
.jd-product-price strong{
  font-size:27px;
  font-weight:700;
  color:#0f1420;
  letter-spacing:-.03em;
  line-height:1.05;
}
/* el "Gs." queda como prefijo chico, no compitiendo con el numero */
.jd-product-price strong::first-letter{font-size:inherit}
.jd-old-price{font-size:13px;color:#9aa1ae;text-decoration:line-through;font-weight:500}

/* 3. FORMA DE PAGO: en verde y con peso, como la linea del Pix.
      Antes era azul y del mismo tamano que todo lo demas. */
.jd-pay{
  font-size:13px;
  font-weight:600;
  color:var(--tl-green-d,#208a3e);
  margin-top:7px;
  line-height:1.35;
  letter-spacing:0;
}
.jd-pay b{color:var(--tl-green-d,#208a3e);font-weight:700}

/* 4. DISPONIBILIDAD: informacion secundaria, no compite. */
.jd-instock,.jd-outstock{margin-top:8px;font-size:11px}

/* 5. ACCIONES separadas del bloque de datos por aire, no por linea. */
.jd-product-actions{margin-top:14px;gap:8px}
.jd-btn-add{font-size:14px;padding:12px 10px;border-radius:10px}
.jd-btn-wa{font-size:14px;padding:11px 10px;border-radius:10px}

/* 6. La foto respira: mas aire alrededor de la pieza. */
.jd-product-media{padding:16px}
.jd-product-info{padding:0 16px 16px}

@media(max-width:768px){
  .jd-product-name{font-size:13.5px;min-height:37px;margin-bottom:6px}
  .jd-product-price strong{font-size:21px}
  .jd-pay{font-size:11.5px;margin-top:5px}
  .jd-btn-add,.jd-btn-wa{font-size:12.5px;padding:10px 8px}
  .jd-product-media{padding:10px}
  .jd-product-info{padding:0 11px 12px}
}

/* --- Marcas: que ninguna quede cortada -------------------------
   El paso avanzaba el ancho de una tarjeta, pero como el ancho
   visible no es multiplo exacto del ancho de tarjeta, el carrusel
   frenaba a mitad de una marca. Con scroll-snap cada parada cae
   siempre sobre el borde de una tarjeta. */
.jd-brands-track{
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
}
.jd-brand-slide{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* --- Encabezado de marcas: titulo + separador (referencia) ------
   Antes eran tres niveles centrados (antetitulo + titulo + bajada).
   La referencia usa un solo titulo al ras de la izquierda con una
   linea que corre hasta el borde. */
.jd-brands-header{
  display:flex;align-items:center;gap:18px;
  text-align:left !important;margin-bottom:20px;
}
.jd-brands-title{
  font-family:var(--tl-font) !important;
  font-size:clamp(1.15rem,1.9vw,1.5rem) !important;
  font-weight:700 !important;
  color:#141922 !important;
  text-transform:none !important;
  letter-spacing:-.02em !important;
  margin:0 !important;white-space:nowrap;
}
.jd-brands-rule{flex:1;height:2px;background:var(--tl-accent);border-radius:2px;min-width:24px}
.jd-brands-vermas{
  color:var(--tl-accent);font-weight:700;font-size:14px;white-space:nowrap;text-decoration:none;
}
.jd-brands-vermas:hover{text-decoration:underline}
.jd-brands-eyebrow,.jd-brands-subtitle{display:none}

/* mismo separador para los titulos de seccion del home */
.tl-sec-head{display:flex;align-items:center;gap:18px}
.tl-sec-head .tl-h{white-space:nowrap;margin:0}
.tl-sec-head::after{content:"";flex:1;height:2px;background:var(--tl-accent);border-radius:2px;order:1}
.tl-sec-head .tl-seeall{order:2;white-space:nowrap;color:var(--tl-accent);font-weight:700}

@media(max-width:768px){
  .jd-brands-header{gap:12px;margin-bottom:14px}
  .jd-brands-title{font-size:1.05rem !important}
  .tl-sec-head{gap:12px}
}

/* --- Marcas: ancho derivado, nunca una tarjeta a medias ---------
   El ancho fijo (190px) no divide exacto el contenedor, asi que
   siempre sobraba una fraccion y se veia media marca en el borde.
   Ahora el ancho SALE del contenedor: entran N tarjetas enteras
   exactas, y el snap cae siempre sobre un borde limpio. */
.jd-brands-track{--n:6;gap:14px}
.jd-brand-slide{
  flex:0 0 calc((100% - (var(--n) - 1) * 14px) / var(--n)) !important;
  width:auto !important;
}
@media(max-width:1280px){ .jd-brands-track{--n:5} }
@media(max-width:1024px){ .jd-brands-track{--n:4} }
@media(max-width:820px){  .jd-brands-track{--n:3} }
@media(max-width:560px){  .jd-brands-track{--n:2} }

/* --- Margen global en ESCRITORIO -------------------------------
   El gutter se habia normalizado solo en movil. En escritorio cada
   seccion traia el suyo: la franja de confianza arrancaba pegada
   al borde y la linea del separador llegaba hasta el extremo.
   Un solo contenedor centrado, mismo ancho y mismo aire. */
@media(min-width:769px){
  .tl-wrap,.tl-sec,
  .jd-brands-container,
  .tl-trust-grid,
  .tl-services .tl-wrap,
  .tl-promos,.tl-cta-row{
    max-width:var(--jd-container,1320px);
    margin-left:auto;margin-right:auto;
    padding-left:24px;padding-right:24px;
    box-sizing:border-box;
  }
  /* los que ya viven dentro de un contenedor no vuelven a abrir */
  .tl-wrap .tl-promos,.tl-wrap .tl-cta-row,.tl-wrap .jd-brands-container,
  .tl-wrap .tl-trust-grid{padding-left:0;padding-right:0;max-width:none}
}

/* --- Botones de la card: desborde, sombras y estado agotado -----
   Medido: .jd-product-actions daba 190px pero sus columnas se
   dimensionaban por contenido (101 + 117 + 8 de gap = 226px), asi
   que "Consultar" se salia 20px del borde de la tarjeta.
   Se apilan a ancho completo: entran siempre, en cualquier ancho
   de columna, y coinciden con la referencia (accion principal a
   todo el ancho). */
.jd-product-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px;
  width:100%;
}
.jd-btn-add,.jd-btn-wa{
  width:100%;min-width:0;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:none !important;          /* sin sombra, pedido del cliente */
}

/* Agotado: gris neutro, no azul apagado. Un azul lavado se lee
   como "boton azul roto"; el gris comunica inhabilitado. */
.jd-btn-add:disabled,
.jd-btn-add[disabled]{
  background:#EDEFF3 !important;
  color:#9AA1AE !important;
  border:1px solid #E2E6EE !important;
  cursor:not-allowed;
  box-shadow:none !important;
}
.jd-btn-add:disabled svg,.jd-btn-add[disabled] svg{opacity:.55}
.jd-btn-add:disabled:hover,.jd-btn-add[disabled]:hover{background:#EDEFF3 !important;color:#9AA1AE !important}
.jd-btn-add:disabled:active,.jd-btn-add[disabled]:active{transform:none}

/* =========================================================================
   Categorias del home: que se desplacen igual que las marcas.

   Antes cada tarjeta media calc((100% - 70px)/8), o sea las 8 entraban justo
   en el ancho y la fila NUNCA desbordaba; como el JS esconde las flechas
   cuando no hay desborde, el carrusel parecia estatico. Con ancho fijo la
   fila siempre desborda y se desplaza con las flechas, igual que la de
   marcas (.jd-brands-track).
   ========================================================================= */
.tl-catitem{width:170px;min-width:170px}

@media(max-width:768px){
  .tl-catitem{width:132px;min-width:132px}
}

/* Grilla de productos de categoria: 4 por fila.
   `grid-cols-4` no esta en el CSS compilado del storefront, por eso va aca. */
.tl-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1200px){ .tl-grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:1060px){ .tl-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){  .tl-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =========================================================================
   MOVIMIENTO — carruseles que se desplazan solos (07/09/2026)

   El motor vive en public/taz-auto-carousel.js y marca el contenedor con
   .tl-auto. Dos cosas de la hoja pelean contra un scrollLeft por cuadro:
   el scroll-snap (devuelve la posicion al borde de la tarjeta) y el
   scroll-behavior:smooth (anima cada asignacion y sale a tirones).
   ========================================================================= */
.tl-auto{
  scroll-snap-type:none !important;
  scroll-behavior:auto !important;
}
.tl-auto > *{
  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
}

/* Con menos movimiento pedido por el sistema, ademas de que el JS no avanza,
   las tarjetas vuelven a engancharse al borde. */
@media (prefers-reduced-motion:reduce){
  .tl-auto{scroll-snap-type:x proximity !important}
  .tl-auto > *{scroll-snap-align:start !important}
}

/* =========================================================================
   MARCAS mas grandes: 5 por fila en vez de 6 (pedido del cliente).

   El ancho de la tarjeta SALE del contenedor (--n), asi que basta con bajar
   el numero: cada logo gana ~40 px de ancho y la tarjeta 20 px de alto.
   ========================================================================= */
.jd-brands-track{--n:5}
@media(max-width:1280px){ .jd-brands-track{--n:4} }
@media(max-width:1024px){ .jd-brands-track{--n:3} }
@media(max-width:820px){  .jd-brands-track{--n:3} }
@media(max-width:560px){  .jd-brands-track{--n:2} }

.jd-brand-slide{height:132px;padding:16px}
.jd-brand-slide img,.jd-brand-slide svg{max-height:92px}

@media(max-width:768px){
  .jd-brand-slide{height:104px;padding:12px}
  .jd-brand-slide img,.jd-brand-slide svg{max-height:70px}
}

/* =========================================================================
   CATEGORIAS mas grandes: 5 por fila y la foto al frente.

   Antes la tarjeta media 170 px fijos (entraban 7-8) y la foto era un
   circulo de 58 px: la imagen quedaba de adorno al lado del nombre. Con 5
   por fila el circulo pasa a 104 px y la foto es lo que se ve primero.
   ========================================================================= */
.tl-catrow{gap:14px}
.tl-catitem{
  flex:0 0 calc((100% - 4 * 14px) / 5) !important;
  width:auto !important;min-width:0 !important;
  padding:18px 12px 16px;
}
.tl-circ{width:104px;height:104px;margin:0 auto 12px}
.tl-circ img{padding:6px}
.tl-catitem span{font-size:13.5px;line-height:1.3}

@media(max-width:1024px){
  .tl-catitem{flex-basis:calc((100% - 3 * 14px) / 4) !important}
  .tl-circ{width:92px;height:92px}
}
@media(max-width:768px){
  .tl-catrow{gap:10px}
  .tl-catitem{flex-basis:calc((100% - 2 * 10px) / 2.6) !important;padding:14px 8px 12px}
  .tl-circ{width:76px;height:76px;margin-bottom:9px}
  .tl-catitem span{font-size:12.5px}
}

/* =========================================================================
   REDES SOCIALES con el color de cada red (07/09/2026)

   Estaban las cinco del mismo azul TAZ: se leian como cinco botones iguales.
   El color se elige por el destino del enlace, asi no hay que tocar el blade
   ni agregar clases. Las reglas van despues de la del :hover azul, que es de
   la misma especificidad, asi que ganan tambien apretadas.
   ========================================================================= */
.tl-foot-social a[href*="facebook"]{background:#1877F2}
.tl-foot-social a[href*="instagram"]{
  background:radial-gradient(circle at 28% 106%,#FDD75F 0%,#F97B45 28%,#E23F5E 52%,#D0288F 72%,#7B34C9 100%);
}
.tl-foot-social a[href*="youtube"]{background:#FF0000}
.tl-foot-social a[href*="tiktok"]{background:#0B0B0B}
.tl-foot-social a[href*="wa.me"],
.tl-foot-social a[href*="whatsapp"]{background:#25D366}

/* El realce en hover ya no puede ser un cambio de fondo (cada uno tiene el
   suyo): se aclara el color propio y sigue el mismo empujon hacia arriba. */
.tl-foot-social a:hover{transform:translateY(-2px);filter:brightness(1.12)}
.tl-foot-social a:active{transform:translateY(0) scale(.94);filter:brightness(.95)}

/* Banner en pantallas grandes (06/10/2026): el <picture> es item flex y se encogía al
   tamaño natural de la imagen (1400 px) → placa pegada a la izquierda + blanco al costado,
   y el track tomaba la altura de la placa más grande (blanco arriba/abajo). Ahora ocupa
   todo el ancho; en ultrawide se tope a 2560 px centrado para no pasar los ~930 px de alto. */
.tl-hero-bleed .tl-banner-img picture{flex:0 0 100%;width:100%;max-width:2560px;margin:0 auto}
.tl-hero-bleed .tl-banner-slide.tl-banner-img{background:#0b0b0d}

/* ============================================================
   KAVA — marca (09/10/2026)
   Colores del logo: amarillo #F6AA00 + negro #130A0A (+ gris de las alas).
   El azul de TAZ quedó mapeado a NEGRO en todas las hojas y blades
   (--tl-blue / --jd-primary / --jg-primary = tinta KAVA), así que todo
   lo que era "blanco sobre azul" sigue legible. Acá va el amarillo,
   SIEMPRE con letra negra: blanco sobre #F6AA00 da 1,9:1 y no se lee.
   ============================================================ */
:root{
  --kava-yellow:   #F6AA00;   /* fondo del logo */
  --kava-yellow-d: #E09A00;   /* hover */
  --kava-ink:      #130A0A;   /* negro del logo */
}

/* --- Barra del logo en amarillo: mismo tono que el fondo del logo,
       así el logo se funde y no se ve como un recuadro pegado --- */
#jg-main{background:var(--kava-yellow) !important}
#jg-main .jg-action,#jg-main .tl-cep,#jg-main .tl-cep-ico,
#jg-main .jg-action svg,#jg-main .jg-action i,
#jg-main .tl-cep-txt strong,#jg-main .jg-action-text strong{color:var(--kava-ink) !important}
#jg-main .tl-cep-txt small,#jg-main .jg-action-text small,
#jg-main .tl-action-lbl .jg-action-text small{color:rgba(19,10,10,.75) !important}
#jg-main .jg-action:hover,#jg-main .tl-cep:hover{background:rgba(19,10,10,.08) !important}
#jg-main .jg-action:hover *,#jg-main .tl-cep:hover *{color:var(--kava-ink) !important}
#jg-main #jg-search-form{border-color:transparent}
#jg-main #jg-search-submit{background:var(--kava-ink) !important;color:#fff !important}
#jg-main #jg-search-submit:hover{background:#2B2220 !important}
.jg-wishlist-count{background:var(--kava-ink)}
/* Al hacer scroll la barra NO cambia (pedido de Fernando, 09/10): sin el vidrio
   blanco translúcido de TAZ, mismo alto y mismo logo. */
.jg-h.is-stuck #jg-main{background:var(--kava-yellow) !important;backdrop-filter:none;-webkit-backdrop-filter:none}
.jg-h.is-stuck #jg-main-inner{padding:9px 22px !important}
.jg-logo-rect img,.jg-h.is-stuck .jg-logo-rect img{height:58px !important;max-height:58px !important}

/* móvil: misma barra amarilla (logo + buscador) */
@media (max-width:1023px){
  #jg-mob{background:var(--kava-yellow);border-bottom:0}
  #jg-mob-actions a{color:var(--kava-ink)}
  #jg-mob-actions a:hover{background:rgba(19,10,10,.08)}
  #jg-mob-search form{border-color:transparent}
}

/* --- Nav negra: el hover y "Promociones" pasan a amarillo --- */
.jg-nav-link:hover{background:transparent;color:var(--kava-yellow)}
#jg-cat-toggle[aria-expanded="true"]{background:var(--kava-yellow);color:var(--kava-ink)}
.jg-promo{background:var(--kava-yellow);color:var(--kava-ink)}
.jg-promo:hover{background:var(--kava-yellow-d);color:var(--kava-ink)}

/* --- Acción principal: amarillo con letra negra --- */
.jd-btn-add,.jd-btn-primary,.tl-cta-primary,.primary-button,
.jdcart-summary-block button[type="submit"],.jd-nl-btn,.jdcat-load-btn{
  background:var(--kava-yellow);border-color:var(--kava-yellow);color:var(--kava-ink)
}
.jd-btn-add:hover,.jd-btn-primary:hover,.tl-cta-primary:hover,.primary-button:hover,
.jdcart-summary-block button[type="submit"]:hover,.jd-nl-btn:hover,.jdcat-load-btn:hover{
  background:var(--kava-yellow-d);border-color:var(--kava-yellow-d);color:var(--kava-ink);filter:none
}
.tl-cta-primary,.tl-cta-primary i,.tl-cta-primary:hover{color:var(--kava-ink)}

/* --- Etiquetas: NUEVO en amarillo; descuento en negro con amarillo --- */
.jd-badge-new{background:var(--kava-yellow);color:var(--kava-ink)}
.jd-badge-discount,.jd-badge-pct,.jdp-price-discount{background:var(--kava-ink);color:var(--kava-yellow)}

/* --- Acentos de sección (antes rojo TAZ): la línea va en amarillo,
       el texto "Ver más" en negro (amarillo sobre blanco no se lee) --- */
.tl-sec-head .tl-seeall,.jd-brands-vermas{color:var(--kava-ink)}
.tl-promo-head h5{color:var(--kava-ink) !important}
.tl-promo-btn{color:var(--kava-ink)}
.tl-promo-btn:hover,.jd-brands-arrow:hover{background:var(--kava-yellow);border-color:var(--kava-yellow);color:var(--kava-ink)}

/* --- Pie: franja amarilla arriba y logo como placa con esquinas --- */
.tl-foot-strip{background:var(--kava-yellow)}
.tl-foot-brand img{height:88px;max-width:none;border-radius:14px}
.tl-services-line{background:linear-gradient(90deg,var(--kava-yellow),transparent)}