/*
Theme Name: Matbar
Theme URI: https://comercializadoramatbar.cl
Author: FlowCode AI
Description: Comercializadora Matbar — pañalería y artículos de aseo, tema a medida con WooCommerce.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: matbar-theme
*/

/* Reset: box-sizing:border-box global — sin esto, padding se suma por fuera de max-width
   (bug real encontrado: la franja de "Día del Niño" quedaba más angosta que su fondo). */
*, *::before, *::after{ box-sizing:border-box; }

.screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important; }

/* Sin scroll horizontal: el drawer del mini-cart de WooCommerce (position:fixed, trasladado
   fuera de pantalla mientras está cerrado) y el badge del contador pueden sumar unos px al
   scrollWidth del documento en anchos angostos aunque no se vean; esto lo neutraliza sin ocultar contenido. */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; max-width:100vw; }

/* Barra superior: solo datos reales (despacho, forma de pago) — nada de promesas que no
   se pueden cumplir (soporte 24/7, garantías inventadas) ni de "Mi cuenta". */
.mb-topbar{ background:#16202B; color:#fff; }
.mb-topbar__inner{
  max-width:1280px; margin:0 auto; padding:0.5rem 1.25rem;
  display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap;
}
.mb-topbar__item{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8rem; white-space:nowrap; }
.mb-topbar__item svg{ flex-shrink:0; }

/* Header / navegación */
.mb-header{ position:sticky; top:0; z-index:50; background:#fff; }
.mb-header .wp-block-navigation{ font-size:0.98rem; }
/* Logo oficial del cliente (isotipo recortado del arte original) + wordmark en texto, así el
   nombre nunca desaparece en mobile (ver wp-mobile-logo-text-hidden-reads-as-broken-logo). */
.mb-logo-mark{ display:flex; align-items:center; gap:0.55rem; text-decoration:none !important; }
.mb-logo-mark img{ height:44px; width:auto; display:block; border-radius:50%; }
.mb-logo-mark__text{ font-family:var(--wp--preset--font-family--heading); font-weight:700; font-size:1.3rem; color:#1A3F64; letter-spacing:-0.01em; }
footer .mb-logo-mark img{ height:36px; }
footer .mb-logo-mark__text{ color:#fff; font-size:1.15rem; }
@media (max-width:480px){
  .mb-logo-mark img{ height:34px; }
  .mb-logo-mark__text{ font-size:1.1rem; }
}

/* Mini-carrito: sin cuentas de cliente, es el único control a la derecha */
.mb-header-actions{ align-items:center; }
.mb-header-actions .wc-block-mini-cart__button{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0 !important; border-radius:50%;
  color:#16202B; background:transparent; border:none;
}
.mb-header-actions .wc-block-mini-cart__button:hover{ background:#F5F7F9; }
.mb-header-actions .wc-block-mini-cart__icon{ width:22px; height:22px; }
.mb-header-actions .wc-block-mini-cart__badge{ background:#1A3F64 !important; color:#FFFFFF !important; }

/* Buscador de productos en el header */
.mb-search-form{ position:relative; display:flex; align-items:center; }
.mb-search-input{
  width:200px; max-width:40vw; height:40px; border:1px solid #E3E7EC; border-radius:999px;
  padding:0 2.6rem 0 1rem; font-size:0.9rem; color:#16202B; background:#F5F7F9;
  transition:width .2s,max-width .2s;
}
.mb-search-input::placeholder{ color:#5B6472; }
.mb-search-input:focus{ outline:2px solid #1A3F64; outline-offset:1px; width:260px; max-width:60vw; }
.mb-search-submit{
  position:absolute; right:2px; top:2px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:none; background:transparent;
  color:#16202B; cursor:pointer;
}
.mb-search-submit:hover{ background:#E3E7EC; }
@media (max-width:480px){
  .mb-search-input{ width:140px; }
}

/* Menú hamburguesa: colapsa entre 980 y 1080px (si no, el header desborda en tablet) */
@media (min-width:600px) and (max-width:1079.98px){
  .mb-header .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex !important; }
  .mb-header .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; }
}

/* WhatsApp flotante */
.mb-wa{ position:fixed; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.25); z-index:1000; }
.mb-wa svg{ width:30px; height:30px; fill:#fff; }
.mb-wa:hover{ transform:scale(1.06); }

/* Cards de producto (loop clásico WooCommerce) — usado en tienda, home, relacionados y categorías: una sola tarjeta para todo el sitio */
.woocommerce ul.products,
ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
  gap:clamp(1rem,2vw,1.75rem) !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
/* El clearfix ::before/::after de WooCommerce (woocommerce-layout.css) se convierte en un ítem
   más de la grilla y ocupa la primera celda, corriendo el primer producto a la 2da columna. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after{
  content:none !important;
  display:none !important;
}
.woocommerce ul.products li.product,
ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  clear:none !important;
  display:flex !important;
  flex-direction:column;
  background:#fff;
  border:1px solid #E3E7EC;
  border-radius:14px;
  overflow:hidden;
  padding:0 !important;
  list-style:none;
  transition:box-shadow .2s,transform .2s;
}
.woocommerce ul.products li.product:hover{ box-shadow:0 12px 28px rgba(16,19,28,0.1); transform:translateY(-3px); }
.woocommerce ul.products li.product:focus-within{ outline:2px solid #1A3F64; outline-offset:2px; }
.woocommerce ul.products li.product > a:not(.button){ text-decoration:none; color:inherit; display:flex; flex-direction:column; flex:0 0 auto; }
.woocommerce ul.products li.product a img{
  width:100%; aspect-ratio:1/1; object-fit:contain; display:block;
  background:#F5F7F9; padding:1rem; box-sizing:border-box;
  transition:transform .3s;
}
.woocommerce ul.products li.product:hover img{ transform:scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:1rem;
  margin:0.9rem 1rem 0.3rem; color:#16202B; min-height:2.6em; line-height:1.3;
  text-wrap:balance; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.woocommerce ul.products li.product .price{ display:block; margin:0 1rem 1rem; font-weight:700; color:#146774; font-size:1.05rem; }
/* Agregar al carrito (grilla): fondo oscurecido a #0F2A45 (igual que el hero) — texto blanco
   sobre #1A3F64 daba 3.37:1 (falla AA en texto chico); sobre #0F2A45 da 4.50:1. */
.woocommerce ul.products li.product .button{
  display:block; width:calc(100% - 2rem); margin:auto 1rem 1.1rem;
  text-align:center; background:#0F2A45; color:#fff; border-radius:10px;
  padding:0.7rem 0.6rem; font-weight:600; line-height:1.25; white-space:normal;
  box-sizing:border-box; font-size:0.88rem; flex-shrink:0;
}
.woocommerce ul.products li.product .button:hover{ background:#0F2A45; }
.woocommerce ul.products li.product .button:focus-visible{ outline:2px solid #16202B; outline-offset:2px; }
/* El texto "✓ Agregado" (JS) ya trae el visto — el ::after de WooCommerce duplicaba el ícono
   y además sumaba ~3px de alto al botón (lo movía del resto de la fila). */
.woocommerce ul.products li.product .button.added::after{ content:none !important; margin-left:0 !important; }
/* WooCommerce inserta "Ver carrito" (a.added_to_cart) después del botón al agregar; sin esto
   descuadra la tarjeta (crece y desalinea la fila). El feedback ya lo da el propio botón (JS). */
.woocommerce ul.products li.product a.added_to_cart,
.products a.added_to_cart{ display:none !important; }

/* Pulso del badge del mini-cart al agregar un producto (ver JS en functions.php). */
.wc-block-mini-cart__badge.mb-badge-pulse{ animation:mbBadgePulse .5s ease; }
@keyframes mbBadgePulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.4); }
  100%{ transform:scale(1); }
}
.mb-cat-filter{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:0 0 2rem; }
.mb-cat-filter__pill{
  display:inline-flex; align-items:center; padding:0.55rem 1.1rem; border-radius:999px;
  border:1px solid #E3E7EC; color:#16202B; text-decoration:none; font-weight:600; font-size:0.9rem;
  transition:background .15s,color .15s,border-color .15s;
}
.mb-cat-filter__pill:hover{ border-color:#146774; color:#146774; }
.mb-cat-filter__pill.is-active{ background:#1A3F64; border-color:#1A3F64; color:#FFFFFF; }

.woocommerce-ordering{ display:inline-block; margin-bottom:2rem; }
.woocommerce-ordering select.orderby{
  appearance:none; -webkit-appearance:none;
  border:1px solid #E3E7EC; border-radius:999px; background:#fff;
  padding:0.55rem 2.2rem 0.55rem 1.1rem; font-weight:600; font-size:0.9rem; color:#16202B;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310131C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.75rem center; background-size:14px;
  cursor:pointer;
}
.woocommerce-ordering select.orderby:hover{ border-color:#1A3F64; }
.woocommerce-result-count{ color:#5B6472; font-size:0.92rem; }
.woocommerce span.onsale{ position:absolute; margin:0.7rem; background:#16202B; color:#fff; border-radius:999px; padding:0.25rem 0.7rem; font-size:0.75rem; font-weight:700; z-index:2; }
.woocommerce nav.woocommerce-pagination ul{ display:flex; gap:0.4rem; list-style:none; padding:0; justify-content:center; margin:2.5rem 0 0; }
.woocommerce nav.woocommerce-pagination ul li{ list-style:none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; border:1px solid #E3E7EC; border-radius:8px; color:#16202B; text-decoration:none; }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:#1A3F64; color:#FFFFFF; border-color:#1A3F64; }

/* Single producto */
.woocommerce div.product .woocommerce-product-gallery img{ border-radius:14px; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:#146774; font-size:1.5rem; font-weight:700; }

.woocommerce div.product form.cart{
  display:flex; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;
}
.woocommerce div.product form.cart .quantity{ margin:0; }
.woocommerce div.product form.cart .quantity .qty{ height:48px; box-sizing:border-box; border-radius:10px; }
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product .mb-wa-product-btn{
  height:48px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px !important; font-weight:700 !important; font-size:0.98rem;
  padding:0 1.6rem !important; border:none !important; margin:0 !important; line-height:1; white-space:nowrap;
}
/* Agregar al carrito (ficha): mismo criterio que el botón de grilla — #0F2A45 + texto blanco = 4.50:1. */
.woocommerce div.product .single_add_to_cart_button{ background:#0F2A45 !important; color:#fff; }
.woocommerce div.product .single_add_to_cart_button:hover{ background:#0F2A45 !important; }
.woocommerce div.product .mb-wa-product-btn{ background:#2A7132; color:#fff; text-decoration:none; gap:0.5rem; }
.woocommerce div.product .mb-wa-product-btn:hover{ background:#1F5526; }

/* Info de despacho / pago / garantía debajo del botón de compra */
.mb-product-info{ display:flex; flex-direction:column; gap:1.1rem; padding:1.5rem; margin-bottom:1.5rem; background:#F5F7F9; border-radius:14px; }
.mb-product-info__item{ display:flex; gap:0.9rem; align-items:flex-start; }
.mb-product-info__icon{ display:inline-flex; flex-shrink:0; }
.mb-product-info__icon svg{ width:22px; height:22px; }
.mb-product-info__item strong{ display:block; font-size:0.95rem; color:#16202B; margin-bottom:0.15rem; }
.mb-product-info__item span{ display:block; font-size:0.88rem; color:#5B6472; line-height:1.5; }
.mb-product-info__item a{ color:#146774; font-weight:600; }

/* Tabs de producto */
.woocommerce div.product .woocommerce-tabs ul.tabs{ border-bottom:1px solid #E3E7EC; padding:0; margin:0 0 1.5rem; display:flex; gap:0.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{ list-style:none; margin:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:inline-block; padding:0.8rem 1.2rem; font-weight:600; color:#5B6472; text-decoration:none; border-bottom:2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:#146774; border-bottom-color:#146774; }
.woocommerce div.product .woocommerce-tabs .panel{ color:#333; line-height:1.7; }

/* Relacionados: mismo título que el resto del sitio */
.woocommerce div.product .related.products > h2{ font-family:var(--wp--preset--font-family--heading); font-size:1.7rem; margin-bottom:1.5rem; }

/* Carrito / checkout clásicos */
.woocommerce table.shop_table{ border-radius:12px; overflow:hidden; border:1px solid #E3E7EC; border-collapse:separate; width:100%; }
.woocommerce table.shop_table th{ background:#F5F7F9; font-weight:700; color:#16202B; padding:1rem; text-align:left; }
.woocommerce table.shop_table td{ padding:1rem; border-top:1px solid #E3E7EC; vertical-align:middle; }
.woocommerce table.shop_table td.product-thumbnail img{ border-radius:10px; width:70px; height:70px; object-fit:contain; background:#F5F7F9; }
.woocommerce table.shop_table td.product-name a{ font-weight:600; color:#16202B; text-decoration:none; }
.woocommerce table.shop_table .quantity .qty{ height:42px; border-radius:8px; box-sizing:border-box; }
.woocommerce a.remove{ color:#146774 !important; border-radius:50% !important; }
.woocommerce a.remove:hover{ background:#1A3F64 !important; color:#FFFFFF !important; }
.woocommerce #payment #place_order, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{ background:#1A3F64; color:#FFFFFF; border-radius:10px; border:none; padding:0.85rem 1.5rem; font-weight:700; }
.woocommerce #payment #place_order:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ background:#0F2A45; color:#FFFFFF; }
.woocommerce .cart-collaterals .cart_totals{ background:#F5F7F9; border-radius:14px; padding:1.5rem; }
.woocommerce .cart-collaterals .cart_totals h2{ margin-top:0; }
.woocommerce .cart-collaterals .cart_totals table{ width:100%; }
.woocommerce .cart-collaterals .cart_totals table td, .woocommerce .cart-collaterals .cart_totals table th{ padding:0.7rem 0; border-top:1px solid #E3E7EC; }
.woocommerce-message, .woocommerce-info{ border-top-color:#1A3F64 !important; background:#E8F2F3; }
.woocommerce-message::before, .woocommerce-info::before{ color:#1A3F64 !important; }

/* Checkout: campos, secciones y pago */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading{ font-family:var(--wp--preset--font-family--heading); font-size:1.3rem; }
.woocommerce-checkout .form-row label{ font-weight:600; font-size:0.92rem; color:#16202B; margin-bottom:0.3rem; }
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea{
  border:1px solid #E3E7EC; border-radius:8px; padding:0.75rem; box-sizing:border-box; width:100%;
}
/* Select2 (Región) reemplaza el <select> nativo por su propio contenedor visual — hay que
   estilarlo aparte, si no queda sin borde visible (bug reportado en móvil 390px). */
.woocommerce-checkout .select2-container{ width:100% !important; }
.woocommerce-checkout .select2-container .select2-selection--single{
  border:1px solid #E3E7EC !important; border-radius:8px !important; height:48px !important;
  display:flex; align-items:center; padding:0 0.75rem;
}
.woocommerce-checkout .select2-container .select2-selection__rendered{ padding:0 !important; color:#16202B; line-height:normal; }
.woocommerce-checkout .select2-container .select2-selection__arrow{ height:46px !important; }
.woocommerce-checkout .select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single{ border-color:#1A3F64 !important; }
/* Layout de 2 columnas: datos + notas a la izquierda, resumen pegajoso a la derecha */
.woocommerce-checkout form.checkout{ display:block; }
@media (min-width:900px){
  .woocommerce-checkout form.checkout{
    display:grid; grid-template-columns:1.5fr 1fr; column-gap:2.5rem; align-items:start;
  }
  .woocommerce-checkout #customer_details{ grid-column:1; grid-row:1 / span 2; }
  .woocommerce-checkout #order_review_heading{ grid-column:2; grid-row:1; margin-top:0; }
  .woocommerce-checkout #order_review{ grid-column:2; grid-row:2; position:sticky; top:90px; }
}
.woocommerce-checkout #customer_details .col2-set{ display:block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{ width:100%; float:none; }
.woocommerce-checkout #customer_details .col-2{ margin-top:1rem; }
.woocommerce-checkout #order_notes_field textarea{ min-height:80px; }

/* Miniatura de producto en "Tu pedido" */
.mb-order-item{ display:flex; align-items:center; gap:0.75rem; }
.mb-order-thumb{ width:44px; height:44px; object-fit:contain; background:#F5F7F9; border-radius:8px; flex-shrink:0; }
.mb-order-item__name{ font-size:0.92rem; }

/* Tabla "Tu pedido" con la estética del sitio */
.woocommerce-checkout-review-order-table{ border:1px solid #E3E7EC; border-radius:12px; border-collapse:separate; overflow:hidden; width:100%; }
.woocommerce-checkout-review-order-table thead th{ background:#F5F7F9; padding:0.8rem 1rem; font-weight:700; color:#16202B; text-align:left; }
.woocommerce-checkout-review-order-table td{ padding:0.8rem 1rem; border-top:1px solid #E3E7EC; }
.woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td{ padding:0.7rem 1rem; border-top:1px solid #E3E7EC; }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td{ font-size:1.1rem; font-weight:700; color:#16202B; }

/* Avisos de WooCommerce con la paleta de marca en vez del azul por defecto */
.woocommerce-info, .woocommerce-message{ border-top-color:#1A3F64 !important; background:#E8F2F3; color:#16202B; }
.woocommerce-info::before, .woocommerce-message::before{ color:#1A3F64 !important; }
.woocommerce-NoticeGroup .woocommerce-info a, .woocommerce-cart .woocommerce-info a{ color:#146774; font-weight:600; }

.mb-thankyou-wa{ margin-top:1.5rem; }

.woocommerce-checkout #payment{ background:#F5F7F9; border-radius:14px; }
.woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid #E3E7EC; padding:1.2rem 1.2rem 0.8rem; margin:0; }
.woocommerce-checkout #payment div.payment_box{ background:#fff !important; border-radius:10px; margin:1rem 1.2rem 1.2rem !important; }
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment #place_order{ margin:0 1.2rem 1.2rem; width:calc(100% - 2.4rem); float:none; }

/* Mi cuenta */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid #E3E7EC; border-radius:14px; overflow:hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid #E3E7EC; }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{ border-bottom:none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:0.9rem 1.2rem; color:#16202B; text-decoration:none; font-weight:600; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:#1A3F64; color:#FFFFFF; }

/* Hero home — arte de productos del diseño de Johny (hero-arte-productos.png). Fondo oscurecido
   de #1A3F64/#1A3F64 a #0F2A45 (mismo tono H17.9°, misma saturación, -7% de luminosidad,
   imperceptible al lado del naranja de marca) — pedido del cliente de pasar TODO el texto chico
   a blanco: blanco sobre el naranja de marca da 3.37:1 (falla AA texto chico); blanco sobre
   #0F2A45 da 4.50:1 (pasa AA en cualquier tamaño). El resto de la paleta (acentos, bordes,
   íconos fuera del hero, píldoras) sigue en #1A3F64, sin cambios. */
.mb-hero{ background:#0F2A45; overflow:hidden; }
.mb-hero__inner{
  max-width:1280px; margin:0 auto; padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.25rem,4vw,2rem);
  display:grid; grid-template-columns:55% 45%; align-items:center; gap:clamp(1rem,3vw,2rem);
  min-height:340px;
}
@media (min-width:900px){
  .mb-hero__inner{ max-height:500px; }
}
/* Texto blanco: 4.50:1 sobre el nuevo fondo #0F2A45. El fondo/borde translúcido blanco es
   decorativo, sin requisito de contraste de texto. */
.mb-hero__eyebrow{
  display:inline-block; margin-bottom:0.9rem; padding:0.4rem 0.9rem; border-radius:999px;
  background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.35);
  color:#fff; font-size:0.75rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
}
.mb-hero__title{
  font-family:var(--wp--preset--font-family--heading); font-weight:700; color:#fff;
  font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.15; margin:0 0 0.75rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:480px){
  .mb-hero__title{ font-size:clamp(1.6rem,7vw,2.2rem); }
}
.mb-hero__lead{
  font-size:clamp(0.95rem,1.4vw,1.05rem); color:#fff; max-width:42ch; margin:0 0 1.25rem;
}
.mb-hero__ctas{ display:flex; gap:0.85rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.mb-btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.8rem 1.5rem; border-radius:999px; font-weight:600; text-decoration:none; font-size:0.95rem; }
.mb-btn--solid-navy{ background:#1A3F64; color:#FFFFFF !important; }
.mb-btn--solid-navy:hover{ background:#0F2A45; color:#FFFFFF !important; }
/* "Ver catálogo" fondo blanco / texto azul marino — contraste AA sobre blanco. "Consultar por
   WhatsApp" en blanco (texto y borde) sobre #0F2A45 da 4.50:1. Hover invierte a fondo blanco con
   texto #0F2A45 (4.50:1 también, mismo par de colores). */
.mb-hero .mb-btn--solid{ background:#fff; color:#0F2A45; }
.mb-hero .mb-btn--solid:hover{ background:#F5F7F9; color:#0F2A45; }
.mb-hero .mb-btn--outline{ background:transparent; color:#fff; border:2px solid #fff; }
.mb-hero .mb-btn--outline:hover{ background:#fff; color:#0F2A45; }
/* Fila de 3 micro-ítems (ícono + label + sublabel). Blanco — 4.50:1 sobre #0F2A45, pasa AA en
   texto chico. Los íconos SVG (stroke) se cambiaron a blanco directo en hero-home.php. */
.mb-hero__micro{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; }
.mb-hero__micro-item{ display:inline-flex; align-items:center; gap:0.5rem; }
.mb-hero__micro-item svg{ flex-shrink:0; }
.mb-hero__micro-text{ display:flex; flex-direction:column; line-height:1.3; }
.mb-hero__micro-text strong{ color:#fff; font-size:0.85rem; font-weight:700; }
/* Sin opacity:0.8 — mezclado con el fondo #0F2A45 bajaba el contraste real a 3.38:1 (blanco
   puro da 4.50:1). El tono más suave ahora es solo tipográfico (font-weight), no de color. */
.mb-hero__micro-text em{ color:#fff; font-style:normal; font-size:0.75rem; }

/* Arte del hero — collage 2x2 con fotos reales de productos del cliente (no ilustración). */
.mb-hero__art{ display:flex; align-items:center; justify-content:center; height:100%; }
.mb-hero__collage{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem;
  width:100%; max-width:420px; max-height:420px;
}
.mb-hero__collage img{
  display:block; width:100%; height:100%; aspect-ratio:1/1; object-fit:contain;
  background:#fff; border-radius:14px; padding:0.6rem;
}
@media (max-width:899px){
  .mb-hero__collage{ max-width:320px; max-height:320px; margin:0 auto; }
}
@media (max-width:480px){
  .mb-hero__collage{ max-width:260px; max-height:260px; gap:0.5rem; }
  .mb-hero__collage img{ border-radius:10px; padding:0.4rem; }
}
@media (max-width:899px){
  .mb-hero__inner{ grid-template-columns:1fr; text-align:center; }
  .mb-hero__lead{ margin-left:auto; margin-right:auto; }
  .mb-hero__ctas,.mb-hero__micro{ justify-content:center; }
  .mb-hero__art{ justify-content:flex-end; margin-top:0.5rem; }
  .mb-hero__art img{ max-height:240px; }
}

/* Franja Sucursales — banda con gradiente de marca (sin depender de arte externo) + caption
   blanca con CTA, mismo lenguaje visual que el resto de las franjas del home. */
.mb-child-strip{
  display:block; text-decoration:none !important; background:#F3EEDB; border-radius:16px; overflow:hidden;
  max-width:1280px; margin:0 auto;
}
.mb-child-strip__media{ display:block; overflow:hidden; }
.mb-child-strip__media--brand{
  display:flex; align-items:center; justify-content:center; padding:2.5rem 1.5rem;
  background:linear-gradient(135deg,#1A3F64 0%,#146774 100%);
}
.mb-child-strip__media-inner{ display:flex; flex-direction:column; align-items:center; gap:0.35rem; text-align:center; color:#fff; }
.mb-child-strip__media-inner strong{ font-family:var(--wp--preset--font-family--heading); font-size:1.3rem; }
.mb-child-strip__media-inner span{ font-size:0.95rem; opacity:0.9; }
.mb-child-strip__caption{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.9rem;
  padding:1rem clamp(1.1rem,3vw,1.75rem); background:#fff; border-top:1px solid #E3E7EC;
}
.mb-child-strip__text{ font-weight:700; color:#16202B; font-size:1.02rem; }
.mb-child-strip__cta{
  background:#1A3F64; color:#FFFFFF; font-weight:700; font-size:0.9rem;
  padding:0.6rem 1.2rem; border-radius:999px; white-space:nowrap; flex-shrink:0;
}
.mb-child-strip:hover .mb-child-strip__cta{ background:#0F2A45; }

/* Tarjetas promocionales — dos son piezas del diseño de Johny usadas tal cual como fondo
   (promo-01/02), con el botón puesto encima en HTML. La tercera ("Audífonos Inalámbricos" en
   el diseño original, categoría que el cliente no vende) se reconstruyó en HTML puro con el
   mismo lenguaje visual (fondo oscuro, misma tipografía/alto) mostrando el TV Box real. */
.mb-promo-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
/* Radio 10px: el arte trae su propio borde redondeado de ~7px y ahora garantiza transparencia
   real hasta 14px del borde — 10px queda cómodamente dentro de esa zona transparente, así el
   contenedor jamás deja ver un filo blanco aunque el recorte del arte varíe un poco. */
/* Los chips "Ver más/Ver ofertas/Descubrir" se sacaron: eran <span> decorativos sin href (el
   enlace real es la tarjeta entera) y tapaban texto (32px de solape con la bajada del TV Box).
   La tarjeta completa es el link — cursor:pointer + elevación + sombra + borde naranja al hover,
   mismo lenguaje "se siente clickeable" que ya usan las tarjetas de categoría (.mb-cat-card). */
.mb-promo-card{
  position:relative; display:block; height:188px; border-radius:10px; overflow:hidden;
  text-decoration:none !important; cursor:pointer; border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.mb-promo-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(16,19,28,0.22); border-color:#1A3F64; }

/* Tarjetas 1 y 2: imagen del diseño tal cual, a sangre */
.mb-promo-card--art picture{ position:absolute; inset:0; display:block; }
.mb-promo-card--art .mb-promo-card__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Tarjeta 3: TV Box, construida en HTML — mismo alto (188px), mismo idioma visual */
.mb-promo-card--tvbox{ background:#0D0D0D; display:flex; flex-direction:column; justify-content:center; padding:1.5rem 1.5rem 1.5rem 1.75rem; }
.mb-promo-card--tvbox > *:not(.mb-promo-card__media){ max-width:60%; position:relative; z-index:2; }
.mb-promo-card--tvbox .mb-promo-card__eyebrow{
  display:inline-block; align-self:flex-start; margin-bottom:0.6rem; padding:0.25rem 0.65rem; border-radius:5px;
  background:#1A3F64; color:#FFFFFF; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
}
.mb-promo-card--tvbox .mb-promo-card__title{
  font-family:var(--wp--preset--font-family--heading); font-weight:700; color:#fff; font-size:1.4rem; line-height:1.2; margin-bottom:0.4rem;
}
.mb-promo-card--tvbox .mb-promo-card__subtitle{ color:#B7B7B7; font-size:0.85rem; margin-bottom:0; max-width:60%; }
.mb-promo-card--tvbox .mb-promo-card__media{
  position:absolute; right:0.5rem; bottom:0; display:flex; align-items:flex-end; height:100%; pointer-events:none;
}
.mb-promo-card--tvbox .mb-promo-card__media img{ height:150px; width:auto; filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)); }

@media (max-width:760px){
  .mb-promo-cards{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .mb-promo-card--tvbox .mb-promo-card__media{ display:none; }
  .mb-promo-card--tvbox .mb-promo-card__subtitle{ max-width:100%; }
}

/* Barra de confianza final */
.mb-trust-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.mb-trust-bar__item{ display:flex; align-items:center; gap:0.9rem; }
.mb-trust-bar__icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#fff; flex-shrink:0; }
.mb-trust-bar__icon svg{ width:22px; height:22px; }
.mb-trust-bar__item strong{ display:block; font-size:0.92rem; color:#16202B; }
.mb-trust-bar__item em{ display:block; font-style:normal; font-size:0.82rem; color:#5B6472; }
@media (max-width:900px){
  .mb-trust-bar{ grid-template-columns:repeat(2,1fr); row-gap:1.5rem; }
}
@media (max-width:480px){
  .mb-trust-bar{ grid-template-columns:1fr; }
}

/* Pilares de marca */
.mb-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.mb-pillar{ text-align:center; padding:1.75rem 1rem; border-radius:14px; background:#F5F7F9; }
.mb-pillar__icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#fff; margin-bottom:0.9rem; }
.mb-pillar__icon svg{ width:26px; height:26px; }
.mb-pillar h3{ font-size:1.05rem; margin:0 0 0.2rem; font-family:var(--wp--preset--font-family--heading); }
.mb-pillar p{ margin:0; color:#5B6472; font-size:0.92rem; }

/* Fila de categorías — layout horizontal del diseño de Johny: foto a la izquierda, nombre en
   negrita y "Ver más →" apilados a la derecha. Fondo de la sección #F9F9F9, tarjeta blanca,
   radio 14px. 6 categorías: 3×2 en desktop, 2 columnas en tablet, deslizable en horizontal en móvil. */
.mb-cat-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem);
}
.mb-cat-card{
  display:flex; align-items:center; gap:0.9rem; height:110px; border-radius:14px;
  background:#fff; text-decoration:none !important; color:#16202B; overflow:hidden; padding:0.9rem 1rem;
  box-shadow:0 1px 3px rgba(16,19,28,0.06); transition:box-shadow .2s,transform .2s;
}
.mb-cat-card:hover{ box-shadow:0 12px 26px rgba(16,19,28,0.14); transform:translateY(-3px); }
.mb-cat-card__media{
  display:flex; align-items:center; justify-content:center; flex-shrink:0; width:78px; height:88px;
}
.mb-cat-card__media img{ max-height:88px; max-width:100%; width:auto; height:auto; object-fit:contain; }
.mb-cat-card__text{ display:flex; flex-direction:column; gap:0.3rem; min-width:0; }
.mb-cat-card__text strong{ font-weight:700; font-size:0.98rem; line-height:1.25; }
.mb-cat-card__text em{ font-style:normal; font-size:0.85rem; font-weight:600; color:#146774; white-space:nowrap; }
@media (max-width:900px){
  .mb-cat-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .mb-cat-row{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .mb-cat-card{ scroll-snap-align:start; }
}

/* Cómo comprar: pasos con conectores */
.mb-steps{ display:flex; align-items:flex-start; gap:0; }
.mb-step{ flex:1; background:#fff; border-radius:14px; padding:1.75rem 1.5rem; position:relative; }
.mb-step__num{ position:absolute; top:1.2rem; right:1.4rem; font-family:var(--wp--preset--font-family--heading); font-weight:700; font-size:1.6rem; color:#1A3F64; opacity:0.35; }
.mb-step__icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#E8F2F3; margin-bottom:1rem; }
.mb-step__icon svg{ width:26px; height:26px; }
.mb-step h3{ font-size:1.1rem; margin:0 0 0.4rem; }
.mb-step p{ margin:0; color:#5B6472; font-size:0.92rem; line-height:1.55; }
.mb-step__connector{ flex:0 0 auto; width:clamp(24px,4vw,56px); height:2px; background:repeating-linear-gradient(90deg,#1A3F64 0 6px,transparent 6px 12px); margin-top:2.6rem; }

/* Productos destacados de la home: 3 columnas parejas en desktop (no el auto-fill genérico de /tienda/) */
.mb-featured-products ul.products{ grid-template-columns:repeat(3,1fr) !important; }

@media (max-width:900px){
  .mb-steps{ flex-direction:column; gap:1.25rem; }
  .mb-step__connector{ display:none; }
  .mb-pillars{ grid-template-columns:repeat(2,1fr); }
  .mb-featured-products ul.products{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:600px){
  .mb-featured-products ul.products{ grid-template-columns:1fr !important; }
}
@media (max-width:600px){
  .mb-wa{ right:14px; bottom:14px; width:52px; height:52px; }
  .mb-child-strip__caption{ justify-content:center; text-align:center; }
}

/* Contacto: tarjetas de datos + formulario en caja */
.mb-contact-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.mb-contact-info:has(.mb-contact-info__item:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); max-width:640px; margin:0 auto; }

/* Sucursales: 2 tarjetas con mapa embebido */
.mb-sucursales{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.75rem; }
.mb-sucursal-card{ border:1px solid #E3E7EC; border-radius:16px; padding:1.5rem; display:flex; flex-direction:column; gap:0.9rem; }
.mb-sucursal-card h2{ margin:0; font-size:1.3rem; }
.mb-sucursal-card__addr{ display:flex; align-items:center; gap:0.5rem; color:#5B6472; margin:0; font-size:0.95rem; }
.mb-sucursal-card__addr svg{ flex-shrink:0; }
.mb-sucursal-card__map{ border-radius:12px; overflow:hidden; border:1px solid #E3E7EC; }
.mb-sucursal-card__map iframe{ width:100%; height:260px; border:0; display:block; }
.mb-sucursal-card .mb-btn{ align-self:flex-start; }
@media (max-width:760px){
  .mb-sucursales{ grid-template-columns:1fr; }
}

/* Galería de productos */
.mb-galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.mb-galeria__item{ margin:0; border:1px solid #E3E7EC; border-radius:14px; overflow:hidden; background:#F5F7F9; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.mb-galeria__item img{ width:100%; height:100%; object-fit:contain; padding:0.75rem; }
@media (max-width:760px){
  .mb-galeria{ grid-template-columns:repeat(2,1fr); }
}
.mb-contact-info__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.7rem; padding:1.5rem 1rem; border:1px solid #E3E7EC; border-radius:14px; }
.mb-contact-info__icon{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#E8F2F3; }
.mb-contact-info__icon svg{ width:24px; height:24px; }
.mb-contact-info__item strong{ font-size:0.95rem; color:#16202B; }
.mb-contact-info__item a, .mb-contact-info__item span{ color:#5B6472; font-size:0.9rem; text-decoration:none; }
.mb-contact-info__item a:hover{ color:#146774; }

.mb-contact-form{
  display:flex; flex-direction:column; gap:1rem; margin-top:0;
  background:#F5F7F9; border-radius:16px; padding:clamp(1.5rem,4vw,2.25rem);
}
.mb-contact-form .mb-honeypot{ position:absolute; left:-9999px; }

/* Un solo país de venta (Chile): selector redundante oculto */
.mb-hidden-field{ display:none !important; }
.mb-contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mb-contact-form label{ display:flex; flex-direction:column; gap:0.35rem; font-weight:600; font-size:0.9rem; color:#16202B; }
.mb-contact-form input, .mb-contact-form textarea{
  font-family:inherit; font-weight:400; font-size:0.98rem; color:#16202B;
  padding:0.75rem; border:1px solid #E3E7EC; border-radius:8px; box-sizing:border-box; width:100%;
  background:#fff;
}
.mb-contact-form input::placeholder, .mb-contact-form textarea::placeholder{ color:#9099AC; }
.mb-contact-form__submit{
  background:#1A3F64; color:#FFFFFF; border:none; border-radius:10px; padding:0.9rem 1.6rem;
  font-weight:700; font-size:1rem; cursor:pointer; width:100%;
}
.mb-contact-form__submit:hover{ background:#0F2A45; }

@media (max-width:600px){
  .mb-contact-info{ grid-template-columns:1fr; }
  .mb-contact-form__row{ grid-template-columns:1fr; }
}

.mb-footer-contact svg{ vertical-align:-2px; margin-right:0.15rem; }

/* Ancla bajo header sticky */
[id]{ scroll-margin-top:90px; }

/* Respeta la preferencia del sistema de reducir movimiento: desactiva transiciones/animaciones */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .woocommerce ul.products li.product:hover,
  .woocommerce ul.products li.product:hover img,
  .mb-category:hover,
  .mb-wa:hover{ transform:none !important; }
}