/* ============================================================
   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 (#F0811A).
   ============================================================ */

:root{
  --tl-blue:        #F0811A;
  --tl-blue-d:      #C05F10;
  --tl-blue-l:      #F59A3C;
  --tl-soft:        #FDECD9;
  --tl-line:        #CFCFD4;
  --tl-ink:         #14142B;
  --tl-muted:       #666;
  --tl-green:       #2BA24A;
  --tl-green-d:     #208a3e;
  --tl-yellow:      #FFD43B;
  --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,#D9660B,#F9A44D);color:#fff;font-size:13px;text-align:center;padding:7px 12px}
.taz-ship b{color:#fff}

@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(240,129,26,.16);
  transform:translateY(-3px);
  border-color:var(--tl-line);
}

/* media */
.jd-product-media{
  position:relative;
  background:#fff;
  padding:14px;
  height:190px;
  display:flex;align-items:center;justify-content:center;
}
.jd-product-media img{
  max-height:100%;width:auto;object-fit:contain;
}

/* 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}

/* ===== 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(240,129,26,.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(240,129,26,.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(240,129,26,.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}
  .jd-product-media{height:160px}
}

/* ============================================================
   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}

/* 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),#C05F10)}
.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(80,140,255,.55) 0%, rgba(80,140,255,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(80,140,255,.55) 0%, rgba(80,140,255,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(90,150,255,.5) 0%, rgba(90,150,255,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(60,90,200,.55) 0%, rgba(60,90,200,0) 55%),
  linear-gradient(120deg, #0a1f6e 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,#F0811A);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,#F0811A);color:#fff;border-color:var(--tl-blue,#F0811A)}
.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,#F0811A);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,#F0811A)}
.tl-form .tl-hero-cta{margin-top:18px;border:none;cursor:pointer;display:inline-block;background:var(--tl-blue,#F0811A);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,#F0811A);transform:translateY(-3px);box-shadow:0 8px 22px rgba(240,129,26,.10)}
.tl-marca-card img{width:100%;max-width:150px;height:80px;object-fit:contain}
.tl-marca-card span{font-weight:700;color:#0b1b3f;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:#0b1b3f;text-decoration:none;transition:.15s}
.tl-cta-btn:hover{border-color:var(--tl-blue,#F0811A);color:var(--tl-blue,#F0811A);transform:translateY(-2px)}
.tl-cta-btn i{color:var(--tl-blue,#F0811A)}
.tl-cta-primary,.tl-cta-primary i{color:#fff}
.tl-cta-primary{background:var(--tl-blue,#F0811A);border-color:var(--tl-blue,#F0811A)}
.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:#0b1b3f;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,#F0811A);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:#0b1b3f;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,#F0811A);transform:translateY(-3px);box-shadow:0 8px 20px rgba(240,129,26,.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:#F0811A;font-weight:700}
.tl-sim-name{font-size:13px;color:#0b1b3f;font-weight:600;margin:3px 0 6px;line-height:1.35;min-height:34px}
.tl-sim-price{font-weight:800;color:#F0811A;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)}}