/* ==========================================================================
   tecnomercado.css — estilos propios, fuera de la plantilla Elpath.
   Se carga al final del <head> para ganarle a los estilos del tema.

   Este archivo nace con las correcciones de accesibilidad de la Ola 1 y es
   el destino previsto para el CSS que hoy inyecta script.js (Ola 3).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Foco visible
   La plantilla suprime el contorno con seis reglas `outline:none`, cuatro de
   ellas con !important, y no pone nada en su lugar: quien navega con teclado
   no sabe dónde está parado. Se restituye con :focus-visible, que solo se
   activa en navegación por teclado y no molesta al hacer clic con el mouse.
   -------------------------------------------------------------------------- */
:root {
  --tm-focus-color: var(--tm-brand);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.theme-btn:focus-visible,
.tab-btn:focus-visible,
.nice-select:focus-visible {
  outline: var(--tm-focus-width) solid var(--tm-focus-color) !important;
  outline-offset: var(--tm-focus-offset) !important;
  border-radius: 2px;
}

/* Sobre fondos oscuros (cabecera superior, pie) el azul no se despega. */
.header-top a:focus-visible,
.main-footer a:focus-visible,
.main-footer button:focus-visible,
.tm-dark-surface a:focus-visible {
  outline-color: var(--tm-surface) !important;
}

/* --------------------------------------------------------------------------
   2. Enlace de salto al contenido
   Primer elemento enfocable del documento. Invisible hasta recibir foco.
   -------------------------------------------------------------------------- */
.tm-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100000;
  display: inline-block;
  padding: 12px 20px;
  min-height: var(--tm-target);
  background: var(--tm-brand);
  color: var(--tm-surface);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  border-radius: 0 0 6px 6px;
  transition: top .18s ease-out;
}
.tm-skip-link:focus {
  top: 0;
  color: var(--tm-surface);
}

/* --------------------------------------------------------------------------
   3. Título de página (h1)
   Ninguna de las 12 páginas de tienda tenía <h1>: la jerarquía empezaba en
   H4 y los precios eran H5. El h1 vive junto al breadcrumb, en .page-title.
   -------------------------------------------------------------------------- */
.page-title .tm-page-title {
  margin: 6px 0 0;
  font-family: var(--tm-font-title);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tm-ink);
  text-wrap: balance;
}
@media (max-width: 767px) {
  .page-title .tm-page-title { font-size: 24px; }
}

/* Donde el título de la página ya existía como h2 y solo cambió de etiqueta,
   se conserva el tamaño que traía el tema para no mover el diseño. */
.sec-title h1 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: inherit;
  color: inherit;
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   4. Contraste
   El precio anterior tachado quedaba en 4,17:1 sobre blanco (mínimo 4,5:1).
   -------------------------------------------------------------------------- */
del,
.old-price,
.tm-price-row del {
  color: var(--tm-ink-5);
}

/* --------------------------------------------------------------------------
   5. Objetivos táctiles — 44×44 (WCAG 2.5.5)
   Se medían 31 controles por debajo de 44 px: el carrito a 30×26, las manijas
   del slider de precio a 20×20, el aspa del aviso a 22×18, y una docena de
   enlaces del pie que se quedaban a 2 px (42).

   El área activa crece por padding y min-height; el tamaño de letra no se
   toca. Donde agrandar el elemento arruinaría el diseño (las manijas del
   slider) se extiende la zona sensible con un pseudo-elemento, que cuenta
   igual para el criterio.

   Se aplica en todos los punteros, no solo en táctil: el criterio no
   distingue, y quien usa el ratón con poca precisión gana lo mismo.
   -------------------------------------------------------------------------- */

/* Controles discretos ------------------------------------------------------ */
.info-list > li.cart-box > a.shopping-cart,
.search-box form .form-group > button[type="submit"],
.subscribe-widget .form-inner button[type="submit"] {
  min-width: var(--tm-target);
  min-height: var(--tm-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Botones de acción -------------------------------------------------------- */
/* Los de la tarjeta y el selector de orden viven en el CSS que inyecta
   script.js: allí se corrigieron, para no tener dos dueños de la misma regla. */
.filter-widget .range-box .theme-btn,
.tm-state .tm-state-btn {
  min-height: var(--tm-target);
}

/* Selectores estilizados fuera de la barra de resultados (país, cantidad…) --- */
.select-box > .nice-select {
  min-height: var(--tm-target);
  display: flex;
  align-items: center;
}

/* Listas de enlaces: pie, migas y contacto --------------------------------- */
.main-footer .links-list > li > a,
.main-footer .contact-widget .info > li > a,
.main-footer .support-box > a,
.header-top .support-box > a,
.upper-inner .support-box > a,
.page-title .bread-crumb > li > a,
.main-menu .navigation > li > a,
.category-list > li > a {
  min-height: var(--tm-target);
  display: inline-flex;
  align-items: center;
}

/* Las migas quedarían con demasiado aire propio: el alto lo pone el enlace. */
.page-title .bread-crumb > li { display: inline-flex; align-items: center; }

/* «Inicio» mide 39 px de ancho: el texto es corto, así que el ancho lo da el
   padding. Se compensa el sangrado del primero para no mover la alineación. */
.page-title .bread-crumb > li > a {
  justify-content: center;
  min-width: var(--tm-target);
  padding-inline: 4px;
}
.page-title .bread-crumb > li:first-child > a { margin-inline-start: -4px; }

/* Menú móvil: solo se ve desplegado, y ahí todo se toca con el dedo --------- */
.mobile-menu .nav-logo > a,
.mobile-menu .contact-info ul li > a,
.mobile-menu .social-links li > a {
  min-height: var(--tm-target);
  display: inline-flex;
  align-items: center;
}
.mobile-menu .social-links li > a {
  min-width: var(--tm-target);
  justify-content: center;
}

/* Manijas del slider de precio --------------------------------------------- */
/* Se dibujan a 20 px a propósito. El pseudo-elemento lleva la zona sensible a
   44×44 sin cambiar un pixel de lo que se ve. */
.price-range-slider .ui-slider-handle { position: relative; }
.price-range-slider .ui-slider-handle::before {
  content: "";
  position: absolute;
  top: -12px; right: -12px; bottom: -12px; left: -12px;
}

/* Campos de formulario ------------------------------------------------------ */
/* Un campo de 26 px de alto es tan difícil de acertar como un botón pequeño. */
.form-inner .form-group input[type="text"],
.form-inner .form-group input[type="email"],
.form-inner .form-group input[type="tel"],
.form-inner .form-group input[type="password"],
.form-inner .form-group input[type="number"],
.form-inner .form-group textarea,
.form-inner .form-group select,
.billing-content .form-group input,
.default-form .form-group input,
.default-form .form-group textarea {
  min-height: var(--tm-target);
}

/* Botones pequeños repartidos por la interfaz ------------------------------- */
.single-item > button,                 /* «Editar» de Mi cuenta (36×24)        */
.bootstrap-touchspin-up,               /* +/- de cantidad, los pinta el plugin */
.bootstrap-touchspin-down,
.tm-empty-cart > a,                    /* «Ir a la tienda» del carrito vacío   */
.forgot-password {                     /* «¿Olvidaste tu contraseña?»          */
  min-height: var(--tm-target);
  min-width: var(--tm-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Excepciones declaradas ----------------------------------------------------

   1. El enlace «Tecnomercado» del copyright va dentro de una frase: agrandarlo
      rompería el interlineado del párrafo. La excepción «inline» del criterio
      lo contempla, y el mismo destino está disponible en el logo y en el menú.

   No hay más: todo lo demás llega a 44×44 por sus propios medios.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   6. Solo para lectores de pantalla
   -------------------------------------------------------------------------- */
.tm-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. Etiqueta del menú móvil
   Era un <h4> que aparecía en el documento ANTES del <h1> de la página, con lo
   que el esquema de encabezados arrancaba en nivel 4. Es el rótulo de un bloque
   de interfaz, no una división del contenido: deja de ser encabezado y conserva
   el aspecto que le daba header.css.
   -------------------------------------------------------------------------- */
.mobile-menu .contact-info .tm-menu-heading {
  position: relative;
  font-size: 20px;
  color: var(--tm-surface);
  font-weight: 700;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   8. Valores que no son encabezados
   El precio de la ficha era un <h3> vacío hasta que respondía la API, y el
   subtotal/total del carrito eran <h4>+<h5>. Un importe no es una división
   del documento: se conservan sus estilos, no su nivel de encabezado.
   -------------------------------------------------------------------------- */
.product-details-content .content-box .tm-pd-price {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--tm-brand);
  margin-bottom: 20px;
}
.total-cart .tm-total-label,
.total-cart .tm-total-value {
  display: inline-block;
  font-family: var(--tm-font-title);
  font-weight: 700;
  color: var(--tm-ink);
}
.total-cart .tm-total-label { font-size: 18px; }
.total-cart .tm-total-value { font-size: 16px; }
.total-cart .total-box .tm-total-label,
.total-cart .total-box .tm-total-value { font-size: 20px; }

/* --------------------------------------------------------------------------
   9. Errores en línea (WCAG 3.3.1 Identificación de errores)
   El fallo de Webpay se anunciaba con un alert() del navegador: roba el foco,
   no se puede copiar, no deja rastro en la pantalla y desaparece al aceptar.
   En su lugar, un bloque junto al control que falló, con role="alert" para
   que un lector de pantalla lo lea sin que el usuario tenga que ir a buscarlo.

   Estructura fija: qué pasó · por qué · cómo seguir.
   -------------------------------------------------------------------------- */
.tm-inline-error {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--tm-critical-tint);
  border: 1px solid var(--tm-critical-line);
  border-left: 4px solid var(--tm-critical);
  border-radius: var(--tm-radius-md);
  text-align: left;
}
.tm-inline-error__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--tm-critical);
  margin-top: 1px;
}
.tm-inline-error__icon svg { width: 22px; height: 22px; display: block; }
.tm-inline-error__body { flex: 1; min-width: 0; }
.tm-inline-error__title {
  margin: 0 0 4px;
  font-family: var(--tm-font-title);
  font-size: 15px;
  font-weight: 700;
  color: var(--tm-critical-ink);
}
.tm-inline-error__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tm-critical-ink);
}
.tm-inline-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.tm-inline-error__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tm-target);
  padding: 0 18px;
  border-radius: var(--tm-radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: .18s;
}
.tm-inline-error__btn--primary { background: var(--tm-critical); color: var(--tm-surface); }
.tm-inline-error__btn--primary:hover { background: var(--tm-critical-strong); color: var(--tm-surface); }
.tm-inline-error__btn--ghost { background: var(--tm-surface); color: var(--tm-critical-ink); border-color: var(--tm-critical-line); }
.tm-inline-error__btn--ghost:hover { border-color: var(--tm-critical); color: var(--tm-critical); }
.tm-inline-error__btn:focus-visible { outline: var(--tm-focus-width) solid var(--tm-critical) !important; outline-offset: var(--tm-focus-offset) !important; }

/* Variante para avisos que no son fallos (falta elegir una comuna, por ej.) */
.tm-inline-error--warn {
  background: var(--tm-warn-tint);
  border-color: var(--tm-warn-tint);
  border-left-color: var(--tm-warn-strong);
}
.tm-inline-error--warn .tm-inline-error__icon { color: var(--tm-warn-strong); }
.tm-inline-error--warn .tm-inline-error__title { color: var(--tm-warn-ink); }
.tm-inline-error--warn .tm-inline-error__text { color: var(--tm-warn-ink); }
.tm-inline-error--warn .tm-inline-error__btn--primary { background: var(--tm-warn-strong); }
.tm-inline-error--warn .tm-inline-error__btn--primary:hover { background: var(--tm-warn-ink); }

@media (max-width: 575px) {
  .tm-inline-error__actions { flex-direction: column; }
  .tm-inline-error__btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Contraste de texto (WCAG 1.4.3 — 4,5:1 normal, 3:1 grande)
   Una medición sobre todos los nodos de texto de las 13 páginas —no sobre una
   muestra— encontró siete combinaciones por debajo del mínimo. Las que vivían
   en el CSS que inyecta script.js se corrigieron allí; estas son las que
   vienen del tema.
   -------------------------------------------------------------------------- */

/* Contador del carrito: blanco sobre ámbar daba 1,88:1. El ámbar es color de
   marca y se conserva; lo que cambia es el texto, que pasa a 9,7:1. */
.main-header .menu-right-content .info-list li a.shopping-cart span,
.header-style-two.main-header .menu-right-content .info-list li a.shopping-cart span,
.header-style-three .header-top .menu-right-content .info-list li a.shopping-cart span,
.header-style-five .menu-right-content .info-list li a.shopping-cart span {
  color: var(--tm-accent-ink);
}

/* «ninguno» del filtro de marcas: #9ca3af sobre blanco = 2,54:1 */
.tm-brand-accordion-widget .tm-empty-filter { color: var(--tm-ink-5); }

/* Gris de apoyo del tema: 4,17:1 sobre blanco y 3,89:1 sobre el gris claro de
   la barra de resultados. Se oscurece lo justo para pasar en ambos fondos. */
.item-shorting .short-box > p,
.item-shorting .menu-box > p,
.item-shorting .text p,
.shop-page-section .our-shop .item-shorting p {
  color: var(--tm-ink-5);
}

/* Pestañas de la ficha de producto: la activa era blanco sobre ámbar (1,88:1)
   y las inactivas usaban el mismo gris de apoyo que no llega a 4,5:1. */
.shop-details .product-discription .tab-btns li { color: var(--tm-ink-5); }
.shop-details .product-discription .tab-btns li.active-btn { color: var(--tm-accent-ink); }

/* Umbral de despacho gratis en el carrito: #E92530 sobre el gris de la caja
   daba 4,14:1. Se oscurece el rojo conservando el mismo papel de acento. */
.cart-section .target-price p span { color: var(--tm-critical); }

/* --------------------------------------------------------------------------
   11. Mini-carrito
   El nombre del producto era un <h5>: un rótulo de panel que se colaba en el
   esquema de encabezados por delante del <h1> de la página. Deja de ser
   encabezado y conserva el aspecto que le daba el tema.
   -------------------------------------------------------------------------- */
/* El tema deja el panel en 315px con 25px de padding: la columna de texto queda
   en ~197px y todo se lee apretado. La propuesta trabaja sobre 380px. */
.cart-menu {
  width: min(380px, calc(100vw - 32px)) !important;
  padding: 18px !important;
}

.cart-menu .tm-mini-title {
  padding: 0 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--tm-line-soft);
  font-family: var(--tm-font-title);
  font-size: 15px;
  font-weight: 800;
  color: var(--tm-ink);
}
.cart-menu .tm-mini-title span { color: var(--tm-ink-4); font-weight: 500; }

/* La lista se desplaza dentro del panel: con muchos productos el subtotal y el
   botón de pagar tienen que seguir a la vista. */
.cart-menu .cart-products { max-height: 340px; overflow-y: auto; }

.cart-menu .cart-products .product {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--tm-line-soft);
}
.cart-menu .cart-products .product:last-child { border-bottom: none; }
/* El tema la saca del flujo (position:absolute; left:0) para el layout viejo de
   padding-left. En la fila flex eso la montaba encima del nombre. */
.cart-menu .cart-products .product .image-box {
  position: static;
  width: 56px; height: 56px; flex: 0 0 56px; margin: 0; padding: 0;
  border: 1px solid var(--tm-line-soft); border-radius: var(--tm-radius-md);
  background: var(--tm-surface-1); overflow: hidden;
}
.cart-menu .cart-products .product .image-box a { display: block; width: 100%; height: 100%; }
.cart-menu .cart-products .product .image-box img { width: 100%; height: 100%; object-fit: contain; }

.cart-menu .tm-mini-mid { flex: 1; min-width: 0; }
.cart-menu .tm-mini-top { display: flex; align-items: flex-start; gap: 8px; }

/* El nombre se recorta a dos líneas: sin esto un título largo llenaba el panel
   entero y dos productos no cabían. */
.cart-menu .cart-products .product .tm-mini-nm {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--tm-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
/* El recorte va en el enlace, no en el <p>: como el <p> es hijo directo de un
   contenedor flex, CSS "blockifica" su display y -webkit-box se pierde. */
.cart-menu .cart-products .product .tm-mini-nm a {
  color: var(--tm-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-menu .cart-products .product .tm-mini-nm a:hover { color: var(--tm-brand); }

.cart-menu .tm-mini-x {
  width: 26px; height: 26px; flex: 0 0 26px;
  border: 0; background: none; color: var(--tm-ink-5);
  border-radius: var(--tm-radius-sm); font-size: 20px; line-height: 1; cursor: pointer;
}
.cart-menu .tm-mini-x:hover { color: var(--tm-critical); }

.cart-menu .tm-mini-bot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.cart-menu .tm-mini-qty { display: inline-flex; align-items: center; gap: 3px; }
.cart-menu .tm-mini-qb {
  width: 28px; height: 28px; flex: 0 0 28px;
  border: 1px solid var(--tm-line-strong); background: var(--tm-surface); color: var(--tm-ink-3);
  border-radius: var(--tm-radius-sm); font-size: 15px; line-height: 1; cursor: pointer;
}
.cart-menu .tm-mini-qb:hover:not([disabled]) { border-color: var(--tm-brand); color: var(--tm-brand); }
.cart-menu .tm-mini-qb[disabled] { opacity: .4; cursor: not-allowed; }
.cart-menu .cart-products .product .tm-mini-qn {
  min-width: 30px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tm-line-strong); border-radius: var(--tm-radius-sm);
  font-size: 13px; font-weight: 700; color: var(--tm-ink-2);
}

/* El precio iba en rojo, que en este sistema significa error. */
.cart-menu .cart-products .product .tm-mini-pz {
  text-align: right;
  font-family: var(--tm-font-title);
  font-size: 14px;
  font-weight: 800;
  color: var(--tm-ink);
  font-variant-numeric: tabular-nums;
}
.cart-menu .cart-products .product .tm-mini-pz small { display: block; font-family: var(--tm-font-body); font-size: 11px; font-weight: 400; color: var(--tm-ink-5); margin-top: 1px; }

.cart-menu .cart-total {
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--tm-line-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.cart-menu .cart-total span { font-family: var(--tm-font-title); font-size: 15px; font-weight: 700; color: var(--tm-ink); }
.cart-menu .cart-total span.cart-total-price { font-size: 20px; font-weight: 800; color: var(--tm-ink); }

/* Una sola llamada a la acción: "Pagar" es el botón y "Ver carrito" baja a
   enlace. Antes competían con el mismo peso visual. */
.cart-menu .cart-action { display: flex; flex-direction: column-reverse; gap: 6px; margin-top: 14px; }
.cart-menu .cart-action .theme-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 15px !important;
}
.cart-menu .cart-action .theme-btn.btn-two {
  background: none !important;
  color: var(--tm-brand) !important;
  border: 0 !important;
  padding: 8px 0 !important;
  min-height: 0 !important;
  font-weight: 500;
  font-size: 14px !important;
  box-shadow: none !important;
}
.cart-menu .cart-action .theme-btn.btn-two:hover { text-decoration: underline; }
.cart-menu .cart-action .theme-btn.btn-two span { display: none !important; }

/* El nombre del producto en la fila del carrito era un <h6>: un dato de tabla,
   no una división del documento. Saltaba de h1 a h6 en el esquema. */
.cart-section .cart-table .product-box .tm-cart-nm {
  margin: 0;
  font-family: var(--tm-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.cart-section .cart-table .product-box .tm-cart-nm a { color: var(--tm-ink); }
.cart-section .cart-table .product-box .tm-cart-nm a:hover { color: var(--tm-brand); }

/* --------------------------------------------------------------------------
   12. Páginas legales
   El documento ocupa el ancho del contenedor. Con líneas largas la jerarquía
   carga más trabajo: interlínea de 1,7, aire generoso entre bloques y tablas
   que se desplazan solas en móvil en vez de romper la página.
   -------------------------------------------------------------------------- */
.tm-legal-section { padding: 32px 0 72px; background: var(--tm-ground); }

.tm-legal {
  width: 100%;
  padding: 40px 48px 48px;
  background: var(--tm-surface);
  border: 1px solid var(--tm-line-soft);
  border-radius: var(--tm-radius-lg);
  color: var(--tm-ink-2);
  font-size: var(--tm-text-md);
  line-height: 1.7;
}

.tm-legal-meta {
  font-size: var(--tm-text-sm);
  color: var(--tm-ink-5);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tm-line-soft);
}

.tm-legal-intro { font-size: 17px; line-height: 1.65; color: var(--tm-ink-2); }

.tm-legal h2 {
  font-family: var(--tm-font-title);
  font-size: var(--tm-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tm-ink);
  margin: 40px 0 12px;
  text-wrap: balance;
}
.tm-legal h2:first-of-type { margin-top: 32px; }

.tm-legal p { margin: 0 0 16px; }
.tm-legal ul, .tm-legal ol { margin: 0 0 20px; padding-left: 22px; }
.tm-legal li { margin-bottom: 9px; }
.tm-legal strong { color: var(--tm-ink); font-weight: 600; }

.tm-legal code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .88em;
  background: var(--tm-surface-1);
  padding: 2px 6px;
  border-radius: var(--tm-radius-sm);
  color: var(--tm-ink);
}

/* Lo que falta por completar antes de publicar en firme: tiene que saltar a la
   vista de quien revise la página, no esconderse entre el texto. */
.tm-legal-aviso {
  background: var(--tm-warn-tint);
  border: 1px solid #e8cfa6;
  border-left: 4px solid var(--tm-warn-strong);
  border-radius: var(--tm-radius-md);
  padding: 16px 18px;
  margin: 0 0 28px;
}
.tm-legal-aviso p { margin: 0; font-size: var(--tm-text-sm); color: var(--tm-warn-ink); }

.tm-legal-nota-final {
  background: var(--tm-brand-tint);
  border-left: 4px solid var(--tm-brand);
  border-radius: var(--tm-radius-md);
  padding: 16px 18px;
  margin: 36px 0 0;
}
.tm-legal-nota-final p { margin: 0; font-size: var(--tm-text-sm); color: var(--tm-ink-2); }

.tm-legal-datos { list-style: none; padding-left: 0; }
.tm-legal-datos li {
  padding: 9px 0;
  border-bottom: 1px solid var(--tm-line-soft);
  margin-bottom: 0;
}
.tm-legal-datos li:last-child { border-bottom: none; }

.tm-legal-opciones, .tm-legal-pasos { counter-reset: none; }
.tm-legal-pasos li { margin-bottom: 14px; }

/* La tabla se desplaza dentro de su caja: el cuerpo de la página nunca lo hace. */
.tm-legal-tabla { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--tm-line-soft); border-radius: var(--tm-radius-md); }
.tm-legal-tabla table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--tm-text-sm); }
.tm-legal-tabla th {
  text-align: left;
  padding: 12px 14px;
  background: var(--tm-surface-1);
  border-bottom: 1px solid var(--tm-line);
  font-family: var(--tm-font-title);
  font-weight: 700;
  color: var(--tm-ink);
  white-space: nowrap;
}
.tm-legal-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--tm-line-soft); vertical-align: top; line-height: 1.55; }
.tm-legal-tabla tr:last-child td { border-bottom: none; }
.tm-legal-nota { font-size: 12px; color: var(--tm-ink-5); }

@media (max-width: 767px) {
  .tm-legal-section { padding: 20px 0 48px; }
  .tm-legal { padding: 24px 18px 32px; border-radius: var(--tm-radius-md); font-size: 15px; }
  .tm-legal h2 { font-size: 18px; margin-top: 32px; }
  .tm-legal-intro { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   13. Barra de progreso de carga
   Reemplaza al preloader a pantalla completa de la plantilla. Ocupa 3 px del
   borde superior y nunca tapa el contenido: la tienda se ve desde el primer
   pintado. La lógica que la mueve vive al inicio de script.js.
   -------------------------------------------------------------------------- */
.tm-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 99999;
  background: var(--tm-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .2s ease-out, opacity .3s ease-out .15s;
  will-change: transform;
  pointer-events: none;
}
.tm-progress.is-done { opacity: 0; }

/* Quien pide menos movimiento ve la barra aparecer y desaparecer, sin el
   recorrido: el desplazamiento horizontal es lo que molesta, no el color. */
@media (prefers-reduced-motion: reduce) {
  .tm-progress { transition: opacity .2s linear; }
}

/* --------------------------------------------------------------------------
   14. Tamaño del logotipo
   La medida base está en module-css/header.css (150 px / 145 px). Se sube aquí
   y no allí porque ese archivo se sirve sin `?v=` y con caché de 7 días: el
   cambio no llegaría a quien ya lo tiene guardado.

   La cabecera mide 115 px con 25 px de relleno arriba y abajo, así que la caja
   de contenido son 65 px. Con la proporción 4:1 del logo, 240 px de ancho dan
   60 px de alto: es el máximo que entra sin empujar la altura de la cabecera.

   Se repiten los selectores del original para ganar por orden de carga, no a
   base de !important.
   -------------------------------------------------------------------------- */
.header-upper .upper-inner .logo-box img[src*="tecnomercado-logo"] {
  width: 240px;
}

.mobile-menu .nav-logo img[src*="tecnomercado-logo"],
.sticky-header img[src*="tecnomercado-logo"] {
  width: 200px;
}

/* ==========================================================================
   13. Home (index.html) — hero, buscador, categorias, destacados, B2B, marcas
   Reemplaza la vista "catalogo como home". El catalogo completo vive en shop.html.
   ========================================================================== */

/* Botones reutilizables de la home */
.tm-btn-primary { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: var(--tm-radius-md); background: var(--tm-brand); color: #fff; font-family: var(--tm-font-title); font-size: 15px; font-weight: 700; border: 0; cursor: pointer; }
.tm-btn-primary:hover { background: #002f83; color: #fff; }
.tm-btn-ghost { display: inline-flex; align-items: center; height: 50px; padding: 0 22px; border-radius: var(--tm-radius-md); border: 1.5px solid var(--tm-line-strong); background: #fff; color: var(--tm-ink); font-family: var(--tm-font-title); font-size: 15px; font-weight: 700; }
.tm-btn-ghost:hover { border-color: var(--tm-brand); color: var(--tm-brand); }

/* Hero */
.tm-hero { background: linear-gradient(180deg, #eef2f8 0%, #fff 100%); border-bottom: 1px solid var(--tm-line-soft); }
.tm-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: 52px 0; }
.tm-hero-badge { display: inline-block; background: var(--tm-accent, #ffac00); color: #111; font-family: var(--tm-font-title); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.tm-hero-title { font-family: var(--tm-font-title); font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--tm-ink); margin: 0 0 16px; text-wrap: balance; }
.tm-hero-sub { font-size: 17px; line-height: 1.6; color: var(--tm-ink-4); margin: 0 0 26px; max-width: 48ch; }
.tm-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.tm-hero-points { display: flex; gap: 24px; margin: 26px 0 0; padding: 0; list-style: none; flex-wrap: wrap; font-size: 13px; color: var(--tm-ink-4); }
.tm-hero-points li { display: flex; align-items: center; gap: 7px; }
.tm-hero-points i { color: var(--tm-ok, #1b8a4b); }
.tm-hero-card { background: #fff; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); padding: 22px; box-shadow: var(--tm-shadow-sm); }
.tm-hero-card .tm-hc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tm-hero-card .tm-hc-lbl { font-family: var(--tm-font-title); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-ink-5); }
.tm-hero-card .tm-hc-off { background: var(--tm-critical, #b02338); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.tm-hero-card .tm-hc-img { height: 190px; border: 1px solid var(--tm-line-soft); border-radius: var(--tm-radius-md); background: var(--tm-surface-1); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; }
.tm-hero-card .tm-hc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.tm-hero-card .tm-hc-cat { font-size: 12px; color: var(--tm-ink-5); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tm-hero-card .tm-hc-name { font-family: var(--tm-font-title); font-size: 16px; font-weight: 700; color: var(--tm-ink); line-height: 1.3; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-hero-card .tm-hc-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tm-hero-card .tm-hc-price { font-family: var(--tm-font-title); font-size: 24px; font-weight: 800; color: var(--tm-ink); }


/* Encabezados de seccion */
.tm-home-sec { padding: 44px 0 4px; }
.tm-home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tm-home-head h2 { font-family: var(--tm-font-title); font-size: 25px; font-weight: 800; color: var(--tm-ink); margin: 0; }
.tm-home-head a { font-size: 14px; font-weight: 500; color: var(--tm-brand); }
.tm-home-loading { padding: 30px 0; text-align: center; color: var(--tm-ink-5); width: 100%; }

/* Grilla de categorias */
.tm-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tm-cat-card { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 18px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); background: #fff; color: var(--tm-ink); }
.tm-cat-card:hover { border-color: var(--tm-brand); color: var(--tm-ink); box-shadow: var(--tm-shadow-sm); }
.tm-cat-ico { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: #eef2f8; color: var(--tm-brand); display: flex; align-items: center; justify-content: center; }
.tm-cat-nm { font-family: var(--tm-font-title); font-size: 15px; font-weight: 700; line-height: 1.3; }
.tm-cat-sub { display: block; font-size: 12px; color: var(--tm-ink-5); margin-top: 2px; }

/* Destacados: reutiliza la grilla de shop-grid-content, acotada a la home */
.tm-home-featured-wrap .inner-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }

/* Bloque B2B */
.tm-home-b2b { margin-top: 52px; background: #eef2f8; border-top: 1px solid var(--tm-line-soft); border-bottom: 1px solid var(--tm-line-soft); }
.tm-home-b2b-in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: center; padding: 44px 0; }
.tm-home-b2b-text h2 { font-family: var(--tm-font-title); font-size: 25px; font-weight: 800; color: var(--tm-ink); margin: 0 0 10px; }
.tm-home-b2b-text p { font-size: 15px; line-height: 1.6; color: var(--tm-ink-4); margin: 0 0 18px; max-width: 62ch; }
.tm-home-b2b-points { display: flex; gap: 26px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--tm-ink-2); }
.tm-home-b2b-cta { justify-content: center; }

/* Marcas */
.tm-home-brands-sec { padding-bottom: 56px; }
.tm-brand-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tm-brand-card { height: 62px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--tm-line-soft); border-radius: var(--tm-radius-md); background: #fff; font-family: var(--tm-font-title); font-size: 14px; font-weight: 700; color: var(--tm-ink-4); text-align: center; padding: 0 8px; }
.tm-brand-card:hover { border-color: var(--tm-brand); color: var(--tm-brand); }

/* Responsive */
@media (max-width: 992px) {
  .tm-hero-in { grid-template-columns: 1fr; gap: 30px; }
  .tm-hero-card { max-width: 460px; }
  .tm-hero-title { font-size: 32px; }
  .tm-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-home-featured-wrap .inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tm-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tm-home-b2b-in { grid-template-columns: 1fr; gap: 22px; }
  .tm-home-b2b-cta { justify-self: start; }
}
@media (max-width: 600px) {
  .tm-hero-title { font-size: 27px; }
  .tm-hero-sub { font-size: 15px; }
  .tm-hero-cta { flex-direction: column; }
  .tm-hero-cta .tm-btn-primary, .tm-hero-cta .tm-btn-ghost { width: 100%; justify-content: center; }
  .tm-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tm-home-featured-wrap .inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tm-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-home-head h2 { font-size: 20px; }
}

/* La home compartía los 15px de padding de .large-container (1680px), muy pegado
   al borde. Se conserva el ancho del header para no desalinear, pero con más aire
   lateral para que respire. */
.tm-hero .large-container,
.tm-home-sec .large-container,
.tm-home-b2b .large-container {
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 600px) {
  .tm-hero .large-container,
  .tm-home-sec .large-container,
  .tm-home-b2b .large-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Destacados de la home: tarjeta compacta y hover estable.
   Al quitar la clase shop-grid-content del contenedor, la grilla la define la
   regla .tm-home-featured-wrap .inner-container (mas arriba). Aqui solo se
   compacta la tarjeta y se blinda el hover para que NO cambie de alto ni se
   desborde (el tema crecia un ::before en :hover e invadia la fila de abajo). */
.tm-home-featured-wrap .tm-card .inner-box { overflow: hidden; }
.tm-home-featured-wrap .tm-card .inner-box::before,
.tm-home-featured-wrap .tm-card .inner-box:hover::before { display: none !important; }
.tm-home-featured-wrap .tm-card .inner-box:hover { transform: translateY(-4px); box-shadow: var(--tm-shadow-md, 0 8px 24px rgba(15,23,42,.10)); }

/* Compactar: teaser de home. La ficha completa (stock, ahorro por transferencia)
   vive en la pagina del producto; aqui la tarjeta se mantiene liviana. */
.tm-home-featured-wrap .tm-card .tm-img { height: 150px; }
.tm-home-featured-wrap .tm-card .tm-img img { object-fit: contain; padding: 10px; }
.tm-home-featured-wrap .tm-card .tm-info { padding: 12px 14px 14px; }
.tm-home-featured-wrap .tm-card .tm-cat { font-size: 11px; }
.tm-home-featured-wrap .tm-card .tm-name { font-size: 14px; min-height: 38px; margin-bottom: 4px; }
.tm-home-featured-wrap .tm-card .tm-current { font-size: 18px; }
.tm-home-featured-wrap .tm-card .tm-transfer-saving,
.tm-home-featured-wrap .tm-card .tm-stock { display: none !important; }
.tm-home-featured-wrap .tm-card .tm-price-row { margin-bottom: 12px; }
.tm-home-featured-wrap .tm-card .tm-btn { height: 40px; font-size: 14px; }

/* ==========================================================================
   14. Contacto (contact.html) — formulario protagonista + riel de canales + mapa
   ========================================================================== */
.tm-ct-hero { background: linear-gradient(180deg, #0f172a 0%, #16233d 100%); color: #fff; }
.tm-ct-hero .large-container { padding-top: 34px; padding-bottom: 34px; padding-left: 40px; padding-right: 40px; }
.tm-ct-hero .bread-crumb { margin: 0 0 8px; padding: 0; list-style: none; display: flex; gap: 8px; font-size: 13px; color: #94a3b8; }
.tm-ct-hero .bread-crumb li { color: #94a3b8; }
.tm-ct-hero .bread-crumb li + li::before { content: "›"; margin-right: 8px; color: #64748b; }
.tm-ct-hero .bread-crumb a { color: #94a3b8; }
.tm-ct-hero h1 { font-family: var(--tm-font-title); font-size: 32px; font-weight: 800; margin: 0 0 6px; color: #fff; line-height: 1.15; }
.tm-ct-hero p { margin: 0; font-size: 16px; color: #cbd5e1; max-width: 62ch; line-height: 1.6; }

.tm-ct-main .large-container { padding-left: 40px; padding-right: 40px; padding-top: 36px; }
.tm-ct-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }

/* Formulario */
.tm-ct-form-card { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); padding: 30px 30px 32px; box-shadow: var(--tm-shadow-sm); }
.tm-ct-form-card h2 { font-family: var(--tm-font-title); font-size: 22px; font-weight: 800; color: var(--tm-ink); margin: 0 0 4px; }
.tm-ct-form-sub { margin: 0 0 22px; font-size: 14px; color: var(--tm-ink-4); }
.tm-ct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.tm-ct-fld { display: flex; flex-direction: column; }
.tm-ct-fld-full { grid-column: 1 / -1; }
.tm-ct-fld label { font-size: 13px; font-weight: 600; color: var(--tm-ink-3); margin-bottom: 6px; }
.tm-ct-fld input, .tm-ct-fld textarea { width: 100%; border: 1.5px solid var(--tm-line-strong); border-radius: var(--tm-radius-md); padding: 0 14px; font-size: 14px; color: var(--tm-ink); background: var(--tm-surface); font-family: var(--tm-font-body); }
.tm-ct-fld input { height: 48px; }
.tm-ct-fld textarea { min-height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.tm-ct-fld input:focus, .tm-ct-fld textarea:focus { outline: none; border-color: var(--tm-brand); }
.tm-ct-submit { margin-top: 20px; width: 100%; height: 52px; border: 0; border-radius: var(--tm-radius-md); background: var(--tm-brand); color: #fff; font-family: var(--tm-font-title); font-size: 16px; font-weight: 700; cursor: pointer; }
.tm-ct-submit:hover { background: #002f83; }

/* Riel de canales */
.tm-ct-rail { display: flex; flex-direction: column; gap: 12px; }
.tm-ct-chan { display: flex; gap: 14px; align-items: flex-start; background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); padding: 16px 18px; color: var(--tm-ink); }
a.tm-ct-chan:hover { border-color: var(--tm-brand); box-shadow: var(--tm-shadow-sm); }
.tm-ct-chan-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; background: #eef2f8; color: var(--tm-brand); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tm-ct-chan-ico.tm-ct-wa { background: #e9f7ef; color: #25a95a; }
.tm-ct-chan-tx { min-width: 0; }
.tm-ct-chan-t { display: block; font-family: var(--tm-font-title); font-size: 15px; font-weight: 700; color: var(--tm-ink); }
.tm-ct-chan-d { display: block; font-size: 14px; color: var(--tm-brand); margin-top: 2px; word-break: break-word; }
.tm-ct-chan-static .tm-ct-chan-d { color: var(--tm-ink-2); }
.tm-ct-chan-n { display: block; font-size: 12px; color: var(--tm-ink-4); margin-top: 2px; }
.tm-ct-hours { background: #fbf6e8; border: 1px solid #f2e2b8; border-radius: var(--tm-radius-md); padding: 16px 18px; }
.tm-ct-hours-t { display: block; font-family: var(--tm-font-title); font-size: 14px; font-weight: 700; color: #8a6d1f; }
.tm-ct-hours-d { display: block; font-size: 13px; color: #7c6a3c; margin-top: 4px; }

/* Mapa secundario */
.tm-ct-map-sec .large-container { padding-left: 40px; padding-right: 40px; padding-top: 28px; padding-bottom: 44px; }
.tm-ct-map-sec h3 { font-family: var(--tm-font-title); font-size: 16px; font-weight: 700; color: var(--tm-ink); margin: 0 0 12px; }
.tm-ct-map { border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); overflow: hidden; }
.tm-ct-map iframe { display: block; }

/* Responsive */
@media (max-width: 992px) {
  .tm-ct-grid { grid-template-columns: 1fr; }
  .tm-ct-hero h1 { font-size: 27px; }
}
@media (max-width: 600px) {
  .tm-ct-hero .large-container, .tm-ct-main .large-container, .tm-ct-map-sec .large-container { padding-left: 18px; padding-right: 18px; }
  .tm-ct-form-card { padding: 20px 18px 22px; }
  .tm-ct-fields { grid-template-columns: 1fr; gap: 14px; }
  .tm-ct-hero h1 { font-size: 23px; }
}

/* ==========================================================================
   15. Header rediseñado (Opción A) — estilo navy, logo en una línea,
   teléfono + email visibles, carrito + Mi cuenta a la derecha.
   Restiliza el header del tema conservando sus hooks (mega-menú, sticky,
   móvil, carrito). Alcance: .main-header y .sticky-header.
   ========================================================================== */

/* --- Barra superior: navy con logo + buscador + contacto --- */
.main-header .header-upper { background: linear-gradient(180deg,#0f172a 0%,#16233d 100%) !important; }
.main-header .header-upper .upper-inner { display: flex; align-items: center; gap: 28px; padding: 14px 0; }

/* Logo en una línea: isotipo (M) + palabra */
.main-header .logo-box { margin: 0; flex: 0 0 auto; }
.main-header .logo-box a { display: flex; align-items: center; gap: 11px; }
.main-header .logo-box img { width: 40px; height: 40px; object-fit: contain; }
.main-header .tm-logo-word { font-family: var(--tm-font-title); font-size: 22px; font-weight: 800; letter-spacing: .02em; color: #fff; line-height: 1; white-space: nowrap; }
.main-header .tm-logo-word span { font-weight: 500; opacity: .7; }

/* Buscador protagonista */
.main-header .search-area { flex: 1; max-width: 640px; }
.main-header .search-box .form-group { position: relative; display: flex; background: #fff; border-radius: 10px; overflow: hidden; }
.main-header .search-box input { flex: 1; height: 48px; border: 0; padding: 0 16px; font-size: 15px; color: var(--tm-ink); background: #fff; }
.main-header .search-box input:focus { outline: none; }
.main-header .search-box button { width: 56px; border: 0; background: var(--tm-accent); color: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; }

/* Contacto a la derecha: teléfono y email, íconos ámbar */
.main-header .right-column { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.main-header .right-column .language-picker { display: none !important; } /* selector de idioma: fuera, solo ES */
.main-header .support-box { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 0; }
.main-header .support-box .icon-box { display: none; }
.main-header .support-box p { display: none; }
/* Se reconstruye el bloque de contacto con clases propias abajo (.tm-hd-contact). */
.main-header .tm-hd-contact { display: flex; flex-direction: column; gap: 8px; }
.main-header .tm-hd-contact a { display: flex; align-items: center; gap: 8px; color: #e2e8f0; font-size: 13.5px; line-height: 1.2; }
.main-header .tm-hd-contact a:hover { color: #fff; }
.main-header .tm-hd-contact svg { color: var(--tm-accent); flex: 0 0 auto; }

/* --- Barra inferior: navy con categorías + navegación + carrito + cuenta --- */
.main-header .header-lower { background: #16233d !important; border-top: 1px solid rgba(255,255,255,.08); }
.main-header .header-lower .outer-box { display: flex; align-items: center; gap: 24px; min-height: 52px; }

/* Botón "Todas las categorías" ámbar */
.main-header .header-lower .category-box { position: relative; }
.main-header .header-lower .category-box > .text { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; background: var(--tm-accent); color: #111; font-family: var(--tm-font-title); font-size: 14px; font-weight: 700; cursor: pointer; }
.main-header .header-lower .category-box > .text i { color: #111; }

/* Navegación */
.main-header .menu-area { flex: 0 1 auto; }
.main-header .main-menu .navigation > li > a { color: #cbd5e1 !important; font-size: 15px; padding: 14px 0; }
.main-header .main-menu .navigation > li:hover > a,
.main-header .main-menu .navigation > li.current > a { color: #fff !important; }
.main-header .main-menu .navigation > li { margin-right: 24px; }

/* Carrito + Mi cuenta a la derecha */
.main-header .menu-right-content { margin-left: auto; }
.main-header .menu-right-content .info-list { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.main-header .tm-hd-account { display: flex; align-items: center; gap: 9px; color: #fff; }
.main-header .tm-hd-account:hover { color: #fff; }
.main-header .tm-hd-account svg { color: #fff; }
.main-header .tm-hd-account .tm-hd-lbl { line-height: 1.1; }
.main-header .tm-hd-account .tm-hd-lbl small { display: block; font-size: 11px; color: #94a3b8; }
.main-header .tm-hd-account .tm-hd-lbl b { display: block; font-family: var(--tm-font-title); font-size: 14px; font-weight: 700; }
.main-header .cart-box .shopping-cart { color: #fff !important; }
.main-header .cart-box .shopping-cart > span:first-of-type { background: var(--tm-accent) !important; color: #111 !important; }

/* --- Sticky header: mismo estilo navy --- */
.sticky-header { background: #0f172a !important; }
.sticky-header .main-menu .navigation > li > a { color: #cbd5e1 !important; }
.sticky-header .main-menu .navigation > li:hover > a,
.sticky-header .main-menu .navigation > li.current > a { color: #fff !important; }
.sticky-header .cart-box .shopping-cart { color: #fff !important; }
.sticky-header .cart-box .shopping-cart > span:first-of-type { background: var(--tm-accent) !important; color: #111 !important; }
.sticky-header .logo-box img { width: 34px; height: 34px; }
.sticky-header .tm-logo-word { color: #fff; font-family: var(--tm-font-title); font-weight: 800; font-size: 18px; }
.sticky-header .tm-logo-word span { font-weight: 500; opacity: .7; }

@media (max-width: 992px) {
  .main-header .header-upper .upper-inner { flex-wrap: wrap; gap: 12px; }
  .main-header .search-area { order: 3; flex-basis: 100%; max-width: none; }
  .main-header .right-column { gap: 16px; }
  .main-header .tm-hd-contact { flex-direction: row; gap: 16px; }
}

/* Header — correcciones de legibilidad y móvil */
.main-header .tm-hd-account,
.main-header .tm-hd-account b,
.main-header .tm-hd-account small,
.sticky-header .tm-hd-account,
.sticky-header .tm-hd-account b { color: #fff !important; }
.main-header .tm-hd-account small,
.sticky-header .tm-hd-account small { color: #94a3b8 !important; }

@media (max-width: 992px) {
  /* En móvil el botón ámbar de categorías se vuelve un ícono simple para no
     competir con el toggler de navegación (menú único queda pendiente). */
  .main-header .header-lower .category-box > .text {
    background: transparent !important; color: #fff !important;
    height: auto !important; padding: 8px 10px !important; margin-left: 0 !important;
  }
  .main-header .header-lower .category-box > .text i { color: #fff !important; }
  /* La etiqueta "Ingresar / Mi cuenta" se oculta; queda el ícono. */
  .main-header .tm-hd-account .tm-hd-lbl { display: none; }
}

/* El toggler de navegación móvil venía azul (theme-color); se armoniza al navy. */
.main-header .menu-area .mobile-nav-toggler { background: transparent !important; padding: 8px 10px; }
.main-header .menu-area .mobile-nav-toggler .icon-bar { background-color: #fff !important; }

/* Header — botón "Todas las categorías": el tema le pone caja blanca + radio de
   pill (30px). Se limpia a un botón ámbar rectangular en ambos headers. */
.main-header .category-box,
.sticky-header .category-box { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; width: auto !important; }
.main-header .category-box > .text,
.sticky-header .category-box > .text { border-radius: 0 !important; width: auto !important; justify-content: flex-start; }

/* Sticky: logo compacto inyectado por JS + layout logo | categorías | nav | carrito */
.sticky-header .outer-box { display: flex; align-items: center; gap: 22px; min-height: 55px; }
.sticky-header .tm-sticky-logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.sticky-header .tm-sticky-logo img { width: 32px; height: 32px; object-fit: contain; }
.sticky-header .tm-sticky-logo .tm-logo-word { font-family: var(--tm-font-title); font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }
.sticky-header .tm-sticky-logo .tm-logo-word span { font-weight: 500; opacity: .7; }
.sticky-header .category-box > .text { height: 55px; padding: 0 16px; }
.sticky-header .menu-right-content { margin-left: auto; }

/* El botón de categorías del sticky también en ámbar (la regla base estaba
   acotada a .header-lower). */
.sticky-header .category-box > .text { background: var(--tm-accent) !important; color: #111 !important; font-family: var(--tm-font-title); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.sticky-header .category-box > .text i { color: #111 !important; }
.sticky-header .main-menu .navigation > li { margin-right: 22px; }

/* El tema posiciona el ícono de barras en absolute (top-left) y el texto en
   block, rompiendo la alineación del botón. Se devuelven al flujo para que
   ícono + texto queden en una sola línea centrada. */
.main-header .category-box > .text i,
.sticky-header .category-box > .text i { position: static !important; top: auto !important; left: auto !important; right: auto !important; margin: 0 !important; font-size: 16px; line-height: 1; }
.main-header .category-box > .text span,
.sticky-header .category-box > .text span { display: inline !important; position: static !important; }
/* Chevron del tema (flecha del desplegable), si aparece suelto: se alinea. */
.main-header .category-box > .text::after,
.sticky-header .category-box > .text::after { position: static !important; margin-left: 6px; }

/* ==========================================================================
   Header — estructura de 3 bandas (igual a la propuesta Opción A):
   utilitaria (confianza + contacto) · principal (logo+búsqueda+cuenta+carrito)
   · navegación (categorías + menú + stock).
   ========================================================================== */
/* 1) Barra utilitaria */
.main-header .tm-hd-utility { background: #0b1220; color: #cbd5e1; font-size: 13px; }
.main-header .tm-hd-utility-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; flex-wrap: wrap; }
.main-header .tm-hd-trust strong { color: #fff; }
.main-header .tm-hd-uticontact { display: flex; gap: 22px; }
.main-header .tm-hd-uticontact a { display: flex; align-items: center; gap: 7px; color: #e2e8f0; }
.main-header .tm-hd-uticontact a:hover { color: #fff; }
.main-header .tm-hd-uticontact svg { color: var(--tm-accent); }

/* 2) Barra principal — más compacta (como la propuesta) */
.main-header .header-upper .upper-inner { padding: 12px 0; gap: 26px; }
.main-header .search-area { max-width: 620px; }
.main-header .search-box input { height: 46px; }
.main-header .search-box button { width: 52px; }
/* Cuenta + carrito ahora viven en el right-column de la barra principal */
.main-header .right-column .info-list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.main-header .right-column .cart-box { position: relative; }

/* 3) Navegación — contador de stock a la derecha */
.main-header .header-lower .menu-right-content { margin-left: auto; }
.main-header .tm-hd-stock { color: #94a3b8; font-size: 13px; white-space: nowrap; }

/* El chevron decorativo del tema (.text::before, absolute top-right) sobra en el
   botón ámbar de categorías: se oculta en ambos headers. */
.main-header .category-box > .text::before,
.sticky-header .category-box > .text::before { display: none !important; content: none !important; }


/* Sticky compacto de una sola banda: se le quita el alto extra (el mega-menú del
   category-box quedaba en el flujo) y se iguala el ancho al header principal. */
.sticky-header .auto-container { max-width: 1680px; padding-left: 15px; padding-right: 15px; }
.sticky-header .outer-box { height: 58px; min-height: 58px; align-items: center; overflow: visible; }
.sticky-header .category-box { align-self: center; display: flex; align-items: center; }
.sticky-header .category-box > .text { height: 40px; padding: 0 16px; }
.sticky-header .category-box .category-list { position: absolute !important; top: 100% !important; left: 0; }
.sticky-header .menu-area .main-menu .navigation > li > a { padding: 0 !important; line-height: 58px; }

/* El tema deja 25px de padding vertical en .header-upper y 15px en .header-lower,
   ADEMÁS del padding de .upper-inner / .outer-box → header demasiado alto. Se
   anula: la altura la controlan el inner y el outer-box. */
.main-header .header-upper { padding-top: 0 !important; padding-bottom: 0 !important; }
.main-header .header-lower { padding-top: 0 !important; padding-bottom: 0 !important; }
.main-header .header-lower .main-menu .navigation > li > a { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 52px; }

/* Banda de navegación compacta: el category-box se estiraba a 82px. Se fija la
   altura de la banda y del botón, con el desplegable como flotante. */
.main-header .header-lower .outer-box { height: 56px; min-height: 56px; align-items: center; }
.main-header .header-lower .category-box { align-self: center; display: flex; align-items: center; }
.main-header .header-lower .category-box > .text { height: 40px !important; }
.main-header .header-lower .main-menu .navigation > li > a { line-height: 56px; }