/* =========================================================
   STYLE.CSS - VERSIÓN OPTIMIZADA Y LIMPIA
   =========================================================
   
   MEJORAS APLICADAS:
   - ✅ Eliminadas 16 líneas de código duplicado
   - ✅ Consolidadas definiciones de selectores repetidos
   - ✅ Optimizaciones CLS para rendimiento 100/100
   - ✅ Sin skeleton loaders (solo min-height)
   
   CAMBIOS ESPECÍFICOS:
   1. body: Eliminada definición duplicada
   2. img: Eliminada definición duplicada  
   3. .features-section: Combinadas 3 definiciones en 1
   4. Mantenidas todas las optimizaciones de rendimiento
   
   TAMAÑO: 3,441 líneas (vs 3,457 original)
   AHORRO: 16 líneas de duplicaciones
   
   COMPATIBILIDAD: 100% compatible con HTML existente
   RENDIMIENTO: Optimizado para CLS < 0.1
   
   Última actualización: Febrero 2026
========================================================= */

/* =========================================================
   1. VARIABLES & RESET & UTILIDADES GLOBALES
========================================================= */
:root {
  --blue: #096cb1;
  --red: #ff1e00;
  --dark: #333;
  --gray: #666;
  --border: #e5e5e5;
  --bg-light: #f8f9fa;
  --yellow: #FFC107;
  --logo-mobile-size: 60px;
  --mega-h: 350px;
}

img { max-width: 100%; height: auto; }
body{
  font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
  width: 100%;
  color: var(--dark);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.relative-container { position: relative; }
.logic-check { display: none; }
a { text-decoration: none; }
ul { list-style: none; }

/* Iconos y Flotantes */
.whatsapp-float { position: fixed; right: 22px; bottom: 52px; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; z-index: 999999; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-float img { width: 42px; height: 42px; display: block; }
.whatsapp-float:hover { transform: translateY(-3px); }

/* Material Symbols locales (sprite SVG) */
.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}
.material-symbols-rounded .msr-icon {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
.material-symbols-rounded .msr-icon-mask {
  width: 100%;
  height: 100%;
  display: block;
  background-color: currentColor;
  mask-image: var(--msr-icon-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--msr-icon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.icon-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.icon-whatsapp {
  mask-image: url('/assets/icons/whatsapp-svgrepo-com.svg');
  -webkit-mask-image: url('/assets/icons/whatsapp-svgrepo-com.svg');
}
.icon-facebook {
  mask-image: url('/assets/icons/facebook-176-svgrepo-com.svg');
  -webkit-mask-image: url('/assets/icons/facebook-176-svgrepo-com.svg');
}
.icon-instagram {
  mask-image: url('/assets/icons/instagram-svgrepo-com.svg');
  -webkit-mask-image: url('/assets/icons/instagram-svgrepo-com.svg');
}
.icon-tiktok {
  mask-image: url('/assets/icons/tiktok-svgrepo-com.svg');
  -webkit-mask-image: url('/assets/icons/tiktok-svgrepo-com.svg');
}
.icon-linkedin {
  mask-image: url('/assets/icons/linkedin.svg');
  -webkit-mask-image: url('/assets/icons/linkedin.svg');
}
.icon-pdf {
  mask-image: url('/assets/icons/picture_as_pdf_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
  -webkit-mask-image: url('/assets/icons/picture_as_pdf_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
}

/* =========================================================
   2. HEADER & MEGA MENU (DESKTOP)
========================================================= */
.site-header { background: #096CB1; width: 100%; position: sticky; top: 0; z-index: 2000; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.172); }
.header-container { display: flex; width: 100%; min-height: 140px; }
.main-header { position: relative; z-index: 1000; height: 0; }

/* Columna Izquierda (Logo) */
.header-left { width: 280px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1002; border-right: 1px solid #f0f0f0; }
.logo-box { display: block; padding: 10px; }
.logo-box img { width: 120px; height: 137px; object-fit: contain; }

.logo-section { position: absolute; top: -25px; left: 20px; z-index: 1001; }

/* Columna Derecha (Contenido) */
.header-right { flex-grow: 1; display: flex; flex-direction: column; }

/* Top Bar */
.top-bar { border-bottom: 1px solid var(--border); padding: 10px 0; font-size: 13px; color: var(--gray); }
.top-item { display: flex; align-items: center; gap: 6px; }
.top-item span { font-size: 15px; color: #009BDD; }
.top-flex { display: flex; justify-content: right; gap: 32px; }
.top-bar .material-symbols-rounded { display: inline-flex; margin-top: 2px; color: #096CB1; font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }

/* Fila Superior (Datos header derecha) */
.h-row-top { height: 38px; background-color: #096CB1; display: flex; align-items: center; justify-content: flex-end; padding: 0 40px; gap: 25px; color: #fff; font-size: 12px; border-bottom: 1px solid #BBD2E6; }

/* Fila Media (Buscador y Trigger Menu) */
.h-row-middle { height: 90px; background-color: #096CB1; display: flex; align-items: center; padding: 0 40px; gap: 20px; position: relative; }
.header-grid { position: relative; padding-left: 0; min-height: 0; }
.hamburger-btn { display: none; }

/* Buscador y Botones */
.search-section { position: relative; flex-grow: 1; max-width: none; }
.search-bar-wide { position: relative; flex-grow: 1; height: 42px; display: flex; background: #fff; border-radius: 18px; overflow: visible; }
.search-bar-wide input { flex: 1; border: none; padding: 0 15px; outline: none; font-size: 14px; border-radius: 4px; }
.search-bar-wide button { width: 50px; border: none; background: #fff; color: #555; font-size: 16px; cursor: pointer; border-radius: 4px;}
.search-bar-wide button:hover { color: var(--blue); }

.search-box { font-size: 16px; display: flex; border: 1px solid #246393; border-radius: 5px; height: 42px; overflow: hidden; background: #fff; }
.search-box input { border: none; padding: 0 15px; flex-grow: 1; outline: none; font-size: 15px; }
.search-btn-icon { font-size: 17px; background: var(--blue); border: none; color: white; padding: 0 20px; cursor: pointer; transition: 0.3s; }
.search-btn-icon:hover { background: #246393; }

.cta-button { height: 42px; border: 1px solid rgba(255,255,255,0.4); color: #fff; display: flex; align-items: center; padding: 0 20px; gap: 8px; font-size: 13px; font-weight: 700; border-radius: 4px; white-space: nowrap; text-decoration: none; }
.cta-button:hover { background: rgba(255,255,255,0.1); }
.phone-pill { margin-left: auto; background: var(--red); color: white; padding: 8px 15px; border-radius: 5px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Fila Inferior (Navegación) */
.h-row-bottom { height: 55px; background-color: #005a96; display: flex; align-items: center; padding: 0 40px; }
.nav-links { display: flex; height: 100%; gap: 5px; }
.nav-links a { color: #fff; display: flex; align-items: center; height: 100%; padding: 0 15px; font-size: 14px; font-weight: 700; text-decoration: none; transition: 0.3s; border-bottom: 3px solid transparent; }
.nav-links a:hover, .nav-links a.active { background: rgba(0, 0, 0, 0.2); /*border-bottom-color: #FFC107;*/ }

/* Nav Blue (Barra principal) */
.nav-blue { background: var(--blue); height: 60px; position: relative; z-index: 900; }
.nav-relative { position: relative; display: flex; align-items: center; height: 100%; justify-content: flex-start; }
.nav-relative .categories-pc { margin-left: 140px; }
.nav-list { display: flex; height: 100%; flex-grow: 1; }
.nav-list li { height: 100%; display: flex; align-items: center; }
.nav-list li a { color: white; padding: 0 20px; height: 100%; display: flex; align-items: center; font-weight: 700; font-size: 15px; transition: 0.3s; }
.nav-list li a:hover, .nav-list li a.active { background: rgba(255,255,255,0.2); }

/* --- MEGA MENU DESKTOP --- */
.cat-wrapper { position: relative; height: 42px; }
.btn-cat-trigger { background-color: #009BDD; color: #fff; height: 100%; padding: 0 25px; display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 4px; transition: 0.3s; white-space: nowrap; }

.btn-cat-trigger .material-symbols-rounded {
    display: inline-flex;
    margin-top: 2px;
    align-items: center;
    font-size: 24px; /* Tamaño del icono */
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20;
}

.categories-pc { position: static; height: 100%; background-color: transparent; display: flex; align-items: center; border-right: 1px solid rgba(255, 255, 255, 0.15); margin-right: 10px; min-width: 220px; }
.cat-btn { padding: 0 20px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; cursor: pointer; font-weight: 800; font-size: 15px; color: #ffffff; width: 100%; height: 100%; transition: background 0.3s; }
.cat-btn:hover { background-color: rgba(0, 0, 0, 0.1); }

/* Dropdown Container */
.dropdown-desk {
  --mega-left-w: 290px;
  --mega-right-w: 600px;
  --mega-seam-overlap: 3px;
  --mega-topline-bleed-x: 2px;
  --mega-topline-y: -3px;
  --mega-topline-h: 10px;
  --mega-topline-r: 12px;
  max-height: 350px;
  overflow: visible;
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--mega-left-w);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: none;
  margin-top: 10px;
  border-radius: 10px;
  z-index: 3000;
}
.dropdown-desk.is-flyout-open { border-radius: 10px; }
.dropdown-desk::before { content: none !important; display: none !important; }
.dropdown-desk::after {
  content: '';
  position: absolute;
  top: var(--mega-topline-y);
  left: 0;
  width: 100%;
  height: var(--mega-topline-h);
  background: #FFC107;
  border-radius: var(--mega-topline-r) var(--mega-topline-r) 0 0;
  pointer-events: none;
  z-index: -1;
}

.dropdown-desk.is-flyout-open::after {
  width: calc(100% + var(--mega-seam-overlap) + 1px);
  border-radius: var(--mega-topline-r) 0 0 0;
}

/* Oculto temporal de líneas superiores (sin eliminar la lógica) */
.dropdown-desk::after,
.mega-topline-panel::before{
  display: none;
}

#cat-desk-toggle:checked ~ .dropdown-desk { display: block; }

/* Items del menú */
.mega-menu-list { max-height: var(--mega-h); scroll-behavior: smooth; scrollbar-gutter: auto; overflow-x: hidden; overflow-y: auto; list-style: none; padding: 0; margin: 0; position: relative; border-radius: 10px; background: #fff; clip-path: inset(0 round 10px); }
.dropdown-desk.is-flyout-open .mega-menu-list { border-radius: 10px; }
.mega-menu-item > a { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; color: #444; font-size: 14px; text-decoration: none; width: 100%; background: #fff; position: relative; transition: background 0.2s; height: 50px; font-weight: 700; border-bottom: 1px solid #f5f5f5; }
.mega-menu-item:hover > a { background: #f0f8ff; color: var(--blue); }

.mega-menu-item > .mega-cat-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  background:#fff;
  height:50px;
  padding:0 0; /* el padding lo ponemos en hijos */
  border-bottom:1px solid #f5f5f5;
  transition: background .2s;
}

.mega-menu-list > .mega-menu-item:last-child > .mega-cat-row{
  border-bottom: 0;
  border-radius: 0 0 10px 10px;
}

.mega-menu-list > .mega-menu-item:first-child > .mega-cat-row{
  border-radius: 10px 10px 0 0;
}

.dropdown-desk.is-flyout-open .mega-menu-list > .mega-menu-item:first-child > .mega-cat-row{
  border-radius: 10px 10px 0 0;
}

.dropdown-desk.is-flyout-open .mega-menu-list > .mega-menu-item:last-child > .mega-cat-row{
  border-radius: 0 0 10px 10px;
}

.dropdown-desk.is-flyout-open .mega-menu-item:first-child.is-active > .mega-cat-row{
  border-radius: 10px 10px 0 0;
}

.mega-cat-link{
  flex:1;
  display:flex;
  align-items:center;
  padding:12px 20px;
  color:#444;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  height:50px;
}

.mega-cat-toggle{
  width:44px;
  height:50px;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.mega-menu-item:hover > .mega-cat-row{
  background:#f0f8ff;
}
.mega-menu-item:hover .mega-cat-link,
.mega-menu-item:hover .mega-cat-toggle i{
  color: var(--blue);
}

.mega-menu-item.is-active > .mega-cat-row{
  background-color: var(--blue);
}
.mega-menu-item.is-active .mega-cat-link,
.mega-menu-item.is-active .mega-cat-toggle i{
  color:#fff;
}

/* Si no hay subcategorías, que la “flecha” no sea clickable */
.mega-cat-toggle.is-empty{
  opacity:.35;
}


.mega-floating-panel{
  position: absolute;
  left: calc(100% - var(--mega-seam-overlap) - 1px);
  top: 0;
  width: var(--mega-right-w);
  height: var(--mega-h);
  background: #fff;
  border-left: 1px solid #eee;
  box-shadow: 8px 10px 30px rgba(0,0,0,0.18);
  display: none;
  overflow: hidden;
  clip-path: inset(0 round 0 10px 10px 0);
}

.mega-topline-panel::before{
  content: '';
  position: absolute;
  top: var(--mega-topline-y);
  left: calc(-1 * (var(--mega-seam-overlap) + 2px));
  width: calc(100% + var(--mega-seam-overlap) + 2px);
  height: var(--mega-topline-h);
  background: #FFC107;
  border-radius: 0 var(--mega-topline-r) 0 0;
  pointer-events: none;
  z-index: -1;
}


/* Ajuste visual: redondeo del panel derecho flotante */
.mega-floating-panel{
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  clip-path: inset(0 round 0 10px 10px 0);
}

.dropdown-desk.is-flyout-open .mega-floating-panel{
  display: block;
}

.mega-menu-list,
.mega-floating-panel {
  z-index: 1;
}

/* El contenido adentro scrollea si es largo */
.mega-floating-panel .mega-sub-content{
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  max-height: 100%;
  height: 100%;
  display: block;
  border-left: 0;
  box-shadow: none;
  border-radius: 0 10px 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
  clip-path: inset(0 round 0 10px 10px 0);
}

/* Scrollbar estética */
.mega-menu-list::-webkit-scrollbar,
.mega-sub-content::-webkit-scrollbar{
  width: 10px;
}

.mega-menu-list::-webkit-scrollbar-track{
  background: #fff;
}

.mega-sub-content::-webkit-scrollbar-track{
  background: linear-gradient(
    to bottom,
    transparent 0,
    transparent 10px,
    #fff 10px,
    #fff 100%
  );
}

.mega-menu-list::-webkit-scrollbar-corner{
  background: #fff;
}

.mega-menu-list::-webkit-scrollbar-thumb,
.mega-sub-content::-webkit-scrollbar-thumb{
  background: #d6dde6;
  border-radius: 999px;
  border: 2px solid #fff;
}

.mega-menu-list::-webkit-scrollbar-thumb:hover,
.mega-sub-content::-webkit-scrollbar-thumb:hover{
  background: #c2cbd6;
}

/* Contenido Flyout */
.mega-sub-content { max-height: 350px; overflow-y: auto; overflow-x: hidden; display: none; position: absolute; left: 100%; top: 0; width: 600px; min-height: auto; background: #fff; border-left: 1px solid #eee; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); padding: 20px; z-index: 4000; border-radius: 0 10px 10px 0; clip-path: inset(0 round 0 10px 10px 0); }
.mega-menu-item:hover .mega-sub-content { display: block; }
.mega-cols-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mega-col h4 { color: var(--blue); font-size: 15px; font-weight: 800; margin-bottom: 15px; text-transform: uppercase; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px; }
.mega-col ul li { margin-bottom: 8px; }
.mega-col ul li a { color: #555; font-size: 14px; transition: color 0.2s; }
.mega-col ul li a:hover { color: var(--blue); }

/* Lógica primer item activo por defecto */

/* ✅ Item activo (el que el usuario está viendo) */
.mega-menu-item.is-active > a{
background-color: var(--blue);
color:#fff;
}
.mega-menu-item.is-active > a i{ color:#fff; }
.mega-menu-item.is-active .mega-sub-content{ display:block; }
/* (opcional) mantener azul aunque esté hover */
.mega-menu-item.is-active:hover > a{
background-color: var(--blue) !important;
color:#fff !important;
}

.mega-menu-item.active-default > a { background-color: var(--blue); color: #fff; }
.mega-menu-item.active-default > a i { color: #fff; }
.mega-menu-item.active-default .mega-sub-content { display: block; }
.mega-menu-list:hover .mega-menu-item.active-default > a { background-color: #fff; color: #444; }
.mega-menu-list:hover .mega-menu-item.active-default > a i { color: #999; }
.mega-menu-list:hover .mega-menu-item.active-default .mega-sub-content { display: none; }
.mega-menu-item.active-default:hover > a { background-color: var(--blue) !important; color: #fff !important; }
.mega-menu-item.active-default:hover > a i { color: #fff !important; }
.mega-menu-item.active-default:hover .mega-sub-content { display: block !important; }


/* --- DESKTOP: subtítulo dentro del flyout --- */
.mega-col .mega-col-title{
display:block;
color: var(--blue);
font-size: 15px;
font-weight: 700;
margin-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 5px;
text-decoration: none;
line-height: 1.2;
}


.mega-col .mega-col-title:hover{
text-decoration: none;
filter: brightness(.95);
}


/* opcional: que no se vea “como link” (sin cambios raros) */
.mega-col .mega-col-title:visited{ color: var(--blue); }


/* --- MÓVIL: subtítulo dentro del acordeón --- */
.mobile-cat-content .mob-sub-link{
display:block;
padding: 15px 16px 5px 25px; /* igual que tu .mob-sub-header */
font-size: 16px;
text-transform: uppercase;
color: var(--blue);
font-weight: 900;
letter-spacing: .5px;
text-decoration: none;
border-top: none; /* quita la línea que hereda de .mobile-cat-content a */
background: transparent;
}


/* Hover sutil (sin “botón” raro) */
.mobile-cat-content .mob-sub-link:hover{
background: transparent;
color: var(--blue);
text-decoration: underline;
}

/* Elementos móviles ocultos en desktop */
.mobile-extras { display: none !important; }
.drawer-overlay, .mobile-drawer { display: none !important; }
.mobile-top-bar, .mob-search-dropdown { display: none; }
.drawer-top{ padding:0; border-bottom:1px solid #e9e9e9; background:#fff; }

.drawer-tabs{
  display:flex;
   gap: 5px;
  align-items:center;
  border-bottom:1px solid #ededed;
}

.drawer-tabs input{ display:none; }

.drawer-tabs label {
    flex: 1;
    padding: 12px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.3s;
    border-bottom: 2px solid #eee;
    color: #888;

    /* AQUI ESTA EL CENTRADO VERTICAL */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Cambia este numero para mas o menos espacio */
}

.drawer-tabs label .material-symbols-rounded {
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    font-size: 24px; /* Tamaño del icono */
    line-height: 1;
}

/* Línea azul activa */
#tabMenu:checked + label{
  color: var(--blue);
  border-bottom-color: var(--blue);
}
#tabCats:checked + label{
  color: var(--blue);
  border-bottom-color: var(--blue);
}


/* Paneles */
html.drawer-open, body.drawer-open{
  overflow: hidden;
  height: 100%;
  }

.drawer-body{ padding:0; }
.drawer-panel{ display:none; }

/* Mostramos panel según clase (la pone JS) */
.mobile-drawer.show-menu .panel-menu{ display:block; }
.mobile-drawer.show-cats .panel-cats{ display:block; }


/* Links MENÚ */
.drawer-panel.panel-menu a{
  display:block;
  padding:22px 20px;
  border-bottom:1px solid #f0f0f0;
  color:#222;
  font-weight:500;
  text-transform:uppercase;
  font-size: 18px;
}
.drawer-panel.panel-menu a:hover{ background:#f7f7f7; color: var(--blue); }

/* Categorías */
.mobile-cat-group{ border-bottom:1px solid #f0f0f0; }

.mobile-cat-btn{
  width:100%;
  background:#fff;
  border:0;
  padding:18px 16px;
  text-align:left;
  font-size:20px;
  font-weight:500;
  color:#111;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}

.mobile-cat-btn i{
  color: var(--blue);
  transition: transform .25s ease;
}
.mobile-cat-btn .material-symbols-rounded[data-icon="keyboard_arrow_down"]{
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
  transition: transform .25s ease;
}

/* Contenido colapsado */
.mobile-cat-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: #fdfdfd;
  display: block !important; /* <--- ESTO ES CLAVE */
}

.mobile-cat-btn.active i {
  transform: rotate(180deg);
}
.mobile-cat-btn.active .material-symbols-rounded[data-icon="keyboard_arrow_down"] {
  transform: rotate(180deg);
}

.mobile-cat-content a{
  display:block;
  padding:12px 16px 12px 30px;
  font-size:14px;
  color:#555;
  border-top:1px solid #f7f7f7;
  text-decoration:none;
}
.mobile-cat-content a:hover{ background:#f0f8ff; color: var(--blue); }

.mob-sub-header{
  padding:15px 16px 5px 25px;
  font-size:11px;
  text-transform:uppercase;
  color: var(--blue);
  font-weight:900;
  letter-spacing:.5px;
}


/* =========================
   BUSCADOR: SUGERENCIAS (tipo autocompletado)
========================= */

/* el form debe ser relativo para posicionar el dropdown */
.search-bar-wide
/* contenedor dropdown */
.search-suggest{
position:absolute;
top: calc(100% + 8px);
left:0;
right:0;
background:#fff;
border:1px solid #e5e5e5;
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0,0,0,.12);
z-index: 9999;
display:none;
overflow:hidden;
}

/* Caja de sugerencias (ajusta el selector al que uses en tu JS) */
#searchSuggest,
#searchSuggestions,
.search-suggest,
.search-suggestions{
position: absolute;
top: calc(100% + 8px); /* exactamente debajo */
left: 0;
width: 100%; /* mismo ancho que el buscador */
max-width: 100%;
z-index: 9999;


background: #fff;
border: 1px solid #e5e5e5;
border-radius: 0 0 10px 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.12);


overflow: hidden;
}

/* Si tu lista crece, que scrollee DENTRO del cuadro */
#searchSuggest .suggest-list,
#searchSuggestions .suggest-list,
.search-suggest .suggest-list,
.search-suggestions .suggest-list{
max-height: 320px;
overflow-y: auto;
}

/* grid 2x2 */
.search-suggest__grid{
display:grid;
grid-template-columns: 1fr 1fr; /* 2 por fila */
max-height: 265px; 
overflow-y: auto; 
overflow-x: auto;
scroll-behavior: smooth;
border-top: 1px solid #eee;
scrollbar-width: thin;
scrollbar-color: #ccc #f1f1f1;
}

/* Personalización del Scrollbar (Estilo moderno tipo Chrome/Safari) */
.search-suggest__grid::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.search-suggest__grid::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.search-suggest__grid::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
.search-suggest__grid::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

.search-suggest__item{
  display: flex;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  text-decoration: none;
  color: inherit;
}

.search-suggest__item:nth-child(2n){
  border-right:none; /* última columna */
}

.search-suggest__thumb{
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #f6f6f6;
  overflow: hidden;
  flex: 0 0 54px;
}

.search-suggest__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-suggest__meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-suggest__brand{
  font-size: 11px;
  opacity: .7;
  text-transform: uppercase;
}

.search-suggest__name{
  font-size: 12.5px;
  line-height: 1.15;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-suggest__sku{
  font-size: 11px;
  opacity: .65;
}

.search-suggest__img{
width:54px;
height:54px;
border:1px solid #eee;
border-radius:10px;
object-fit: contain;
background:#fff;
flex: 0 0 auto;
}

/* botón final */
.search-suggest__all{
  display: block;
  text-align: center;
  padding: 12px 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  color: #096CB1;
  background: #fafafa;
  border-top: 1px solid #f1f1f1;
}

.search-suggest.is-open{ display:block; }

/* estado vacío */
.search-suggest__empty{
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  opacity: .7;
}




/* =========================================================
   3. ESTILOS DE COMPONENTES DE PRODUCTOS (CARDS)
========================================================= */

 #infoAdicionalList{
  list-style: disc !important;
  padding-left: 22px !important;
  margin: 10px 0 0;
    }
    #infoAdicionalList li{
      margin: 6px 0;
    }
.product-modern { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; flex: 0 0 calc(25% - 20px); max-width: calc(25% - 20px); margin: 0 10px; height: auto; }
.product-modern:hover { transform: translateY(0px); border-color: var(--blue); z-index: 2; }
.product-modern .fav-btn { position: absolute; top: 12px; right: 20px; background: #fff; border: 1px solid #eee; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: #aaa; z-index: 2; display: flex; align-items: center; justify-content: center; transition: all .3s ease; }
.product-modern .fav-btn:hover { color: var(--red); border-color: var(--red); transform: scale(1.1); }
.product-img { padding: 10px; height: 200px; width: 100%; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; }
.product-img a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-img img { will-change: transform; transform-origin: center center;transition: transform 0.8s ease !important;width: 100%; height: 100%; object-fit: contain; }
.product-modern:hover .product-img img { transform: scale(1.08); /* Aumenta un 8% su tamaño */}
.p-brand { font-size: 12px; color: #888; font-weight: 600; display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.p-name { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--dark); margin-bottom: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; height: calc(1.4em * 5); text-transform: uppercase; }
.p-sku {
  font-size: 11px;
  color: #bbb;
  font-weight: 400;
  margin-bottom: 12px;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  overflow-wrap: anywhere;
}
.p-footer { border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: auto; }
.tax-info { display: none; font-size: 11px; color: #888; margin-bottom: 10px; }
.btn-view-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  height: 40px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
  transition: background .3s ease;
  font-size: 14px;
  line-height: 1;
}
.btn-view-modern:hover { background: #246393; }
.btn-wsp-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  height: 40px;
  padding: 9px 10px;
  border-radius: 6px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  text-align: center;
  transition: background .3s ease;
  font-size: 14px;
  margin-top: 10px;
  text-decoration: none;
  gap: 8px;
  line-height: 1;
}
.btn-wsp-card .icon-svg {
  font-size: 16px;
  line-height: 1;
}
.btn-wsp-card .whatsapp-svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  color: #fff;
  flex: 0 0 auto;
}
.btn-wsp-card:hover { background: #1ebc57; color: #fff; }

/* =========================================================
   4. HOME PAGE
========================================================= */
/* Hero Slider */
.hero-slider { width: 100%; position: relative; overflow: hidden; background: #000; border-bottom: 7px solid #ffb820; border-top: 7px solid #ffb820;}
.hero-container { width: 100%; height: auto; aspect-ratio: 26 / 9; position: relative; }
.hero-content .container {
    width: 100%;
    z-index: 999;
    /* No es necesario definir max-width aquí porque ya lo hereda de tu clase global .container (1300px) */
}

/* =========================================
   ZIGZAG AUTOMÁTICO (Clase .zigzag-right)
========================================= */

/* 1. Sombra invertida (oscura a la derecha) */
.hero-slide.zigzag-right .hero-overlay {
    background: linear-gradient(270deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
}

/* 2. Alinear contenido a la DERECHA */
.hero-slide.zigzag-right .hero-content .container {
    align-items: flex-end; 
}

/* 3. Texto alineado a la derecha */
.hero-slide.zigzag-right .hero-content-inner {
    text-align: right; 
    margin-left: auto;
    margin-right: -20px; 
    padding-right: 0;
}

/* 4. Párrafo a la derecha */
.hero-slide.zigzag-right .hero-desc {
    margin-left: auto;
    margin-right: 0;
}

/* 5. Botones a la derecha */
.hero-slide.zigzag-right .hero-btns {
    justify-content: flex-end;
}


.hero-track { display: flex; width: 100%; height: 100%; }
.hero-slide {
    position: absolute; /* Apilamos uno sobre otro */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;         /* Invisible por defecto */
    z-index: 0;
    visibility: hidden;
    /* visibility se oculta DESPUÉS de que opacity termine (evita flashes) */
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
}

/* Clase para el slide visible */
.hero-slide.active {
    opacity: 1;         /* Visible */
    z-index: 2;         /* Por encima de los demás */
    visibility: visible;
    /* visibility aparece INMEDIATAMENTE, luego opacity anima */
    transition: opacity 0.6s ease-in-out, visibility 0s linear 0s;
}

.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 20px; transition: all 0.3s ease; z-index: 10; display: flex; align-items: center; justify-content: center; }
.hero-arrow .material-symbols-rounded { font-size: 28px; }
.hero-arrow:hover { background: #fff; color: var(--blue); box-shadow: 0 0 15px rgba(255,255,255,0.3); }
.hero-prev { left: 20px; }
.hero-next { right: 20px; }
.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20 !important;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(8, 22, 38, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.h-dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: width 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
}
.h-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #fff;
    transform-origin: left center;
    transform: scaleX(0);
}
.h-dot:hover {
    background: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.8);
}
.h-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.h-dot.active {
    width: 42px;
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.18);
}
.h-dot.active::before {
    animation: hero-dot-progress 7s linear forwards;
}
@keyframes hero-dot-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
/* Capa oscura sobre la imagen para que el texto blanco se lea */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0) 100%);
    z-index: 2; /* Encima de la imagen */
}

/* Contenedor del texto - Centrado verticalmente */
.hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999; /* Encima del overlay */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: flex-start; /* Alineado a la izquierda */
    padding: 0 5%; /* Margen lateral */
}

/* Caja interna para limitar el ancho del texto */
.hero-content-inner {
    z-index: 99 !important;
    max-width: 600px;
    color: #fff;
    opacity: 0;   /* <--- IMPORTANTE: Empieza oculto */
    transform: translateY(20px); /* Empieza un poco abajo */
    /* animation: ... <--- LO QUITAMOS DE AQUÍ */
}

/* 2. Clase para EJECUTAR la animación (JS la pondrá al cambiar slide) */
.hero-content-inner.run-animation {
    animation: fadeUp 0.8s ease-out forwards;
}

/* 3. Clase para MANTENER visible (Para el truco del bucle infinito) */
.hero-content-inner.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tipografía */
.hero-subtitle {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--yellow); /* Usamos tu amarillo corporativo */
    margin-bottom: 10px;
}

.hero-title {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    color: #fff;
    text-transform: uppercase;
}

.hero-desc {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
    color: #f0f0f0;
    max-width: 90%;
}

/* Botones */
.hero-btns {
    display: flex;
    gap: 15px;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Botón Principal (Amarillo) */
.btn-hero.btn-primary {
    background-color: var(--blue);
    color: #ffffff;
    border: 2px solid var(--blue);
    border-radius: 6px;
}
.btn-hero.btn-primary:hover {
    background-color: #246393;
    border-color: #246393;
}

/* Botón Secundario (Borde Blanco) */
.btn-hero.btn-outline {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 6px;
}
.btn-hero.btn-outline:hover {
    background-color: #fff;
    color: var(--blue);
}


/* Features Section */
.features-section { background-color: #f3faff; padding: 40px 0; border-bottom: 1px solid var(--border); align-items: center; min-height: 150px; }
.features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px 40px; width: 100%; justify-items: center; }
.feature-item { display: flex; align-items: center; gap: 12px; min-height: 64px;}
.feature-item i { font-size: 32px; color: #096CB1; flex-shrink: 0; }
.feature-text h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: #005A96; }
.feature-text p { font-size: 14px; color: #096CB1; }
.features-grid .material-symbols-rounded { color: #096CB1; font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.feature-item .material-symbols-rounded{
  display: inline-flex;
  width: 40px;
  height: 40px;
  font-size: 40px;
  line-height: 1;
  flex: 0 0 40px;
}


/* Categories Grid */
.categories-grid-section { padding: 50px 0 40px 0; }
.cat-grid-layout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-card-item { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 30px 20px; transition: all 0.3s ease; height: 100%; }
.cat-card-item:hover { border-color: var(--blue); transform: translateY(-3px); }
.cat-card-item img { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
.cat-card-item h2, .cat-card-item h3 { font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.3; }

/* Single Banner */
.single-banner-section { padding: 20px 0 40px 0; }
.banner-link { display: block; border-radius: 12px; }
.banner-link img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Top Products Carousel */
.top-products { padding: 30px 0 10px 0; }

.section-header {
  display: flex;
  justify-content: space-between; /* Empuja los elementos a los extremos */
  align-items: center; /* Alineación vertical perfecta */
  margin-bottom: 30px;
  width: 100%;
  flex-wrap: wrap; /* Permite que en móviles muy pequeños bajen si no caben */
  gap: 15px;
}

.section-header h2 {
  margin-bottom: 0 !important; /* Quitamos márgenes para que quede centrado con el botón */
  text-align: left !important;
  color: #096CB1;
  /* Mantiene tus estilos de fuente (tamaño, color) */
}
/* Ajuste específico para cuando el botón está DENTRO del header */
.section-header .section-btn-wrapper {
  margin-top: 0;
  width: auto; /* Ya no ocupa el 100%, solo lo que necesite el botón */
  display: block;
}

/* 3. El Riel (Track) */
.carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: none;        /* ← Sin snap */
    scroll-behavior: smooth;
    cursor: grab;                  /* ← Cursor de agarre */
}

.carousel-track:active {
    cursor: grabbing;              /* ← Cursor cuando arrastra */
}

.carousel-track.active {
    cursor: grabbing;
    user-select: none;
}

.product-card, .product-modern {
    scroll-snap-align: none;       /* ← Sin snap en las tarjetas */
    flex-shrink: 0;
}

/* ================= ARREGLO FINAL SWIPE MOVIL ================= */
.product-carousel-wrapper,
.carousel-window,
.carousel-track,
.product-modern,
.product-img, 
.product-img img {
    /* CAMBIA ESTO: touch-action: pan-y !important; */
    /* POR ESTO: */
    touch-action: pan-x pan-y !important; /* Permite scroll en TODAS direcciones */
    
    /* Mantenemos lo demás igual */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ================= CORRECCIÓN SCROLL RELACIONADOS ================= */

/* Permitimos que el navegador maneje el deslizamiento horizontal (pan-x) 
   SOLO en las tarjetas de la sección de productos relacionados */
.related-grid .product-modern,
.related-grid .product-img,
.related-grid .product-img img {
    touch-action: pan-x pan-y !important; 
    cursor: auto; /* Quitamos el icono de "manito de arrastre" si lo tuviera */
}

/* Aseguramos que el contenedor permita el scroll */
.related-grid {
    touch-action: pan-x pan-y !important;
}

.carousel-track:active {
    cursor: grabbing;
}

.product-carousel-wrapper { 
  touch-action: pan-y pinch-zoom;
  max-width: 100%;
  gap: 5px; 
  position: relative; 
  padding: 0 !important;
  overflow: visible;}

.carousel-window {
    /* 1. Habilitamos el scroll */
    overflow-x: auto !important;
    overflow-y: hidden;
    
    /* 2. Estilo Moderno para FIREFOX */
    scrollbar-width: thin; /* Hace la barra delgada */
    
    /* 3. Comportamiento */
    margin: 0;   
    padding: 15px 0 25px 0; /* Espacio abajo para que la barra no tape el producto */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* 4. Permisos de toque (Vital para tu Zenbook Fold) */
    touch-action: pan-x pan-y !important; 
}



.product-carousel-wrapper::before {
    left: 0;
    border-right: 1px solid rgba(0,0,0,0.02); /* Opcional: una línea casi invisible para separar */
}

.product-carousel-wrapper::after {
    right: 0;
    border-left: 1px solid rgba(0,0,0,0.02);
}

.product-carousel-wrapper::before,
.product-carousel-wrapper::after {
    display: none !important;
    content: none !important;
}

/* 4. Posicionamiento de las flechas encima de todo */
/* 4. Flechas de Navegación */
.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: var(--blue);
    font-size: 18px;
    cursor: pointer;
    z-index: 20; /* Aseguramos que esté encima de todo */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prev-btn { left: -10px !important;}
.next-btn { right: -10px !important;}

/* Info Banners */
.info-banners { padding: 40px 0 60px 0 }
.banners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.info-card { border-radius: 15px; padding: 45px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.info-blue { background: #EDF8FF; }
.info-yellow { background: #FFF6D1; }
.info-text-banner h2, .info-text-banner h3 { font-size: 26px; font-weight: 900; line-height: 1.2; margin-bottom: 10px; }
.info-text-banner span { color: var(--blue); }
.info-img { display: flex; justify-content: flex-end; align-items: center; }
.info-img img { max-width: 70%; height: auto; display: block; }
.btn-shop { display: inline-block; padding: 12px 28px; background: var(--blue); color: #fff; font-weight: 700; border-radius: 6px; margin-top: 20px; font-size: 14px; text-transform: uppercase; white-space: nowrap; }

/* Brands Strip */
.brands-strip { border-top: 1px solid #e5e5e5; padding: 35px 0 10px; }
.brands-slider { width: 100%; overflow: hidden; position: relative; background: transparent; margin-bottom: 30px; }
.brands-track { display: flex; align-items: center; width: max-content; animation: brandsScroll 18s linear infinite; will-change: transform; }
.brand-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
.brand-item img { height: 40px; width: 80px; display: block; object-fit: contain; }
@keyframes brandsScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================================
   5. TIENDA (SHOP PAGE)
========================================================= */

/* ================= BOTONES DE SECCIÓN (VER TIENDA / VER MÁS) ================= */

.section-btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
}

.btn-section-outline {
  display: inline-block;
  padding: 12px 25px;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
  border-radius: 8px; /* Bordes redondeados modernos */
  transition: all 0.3s ease;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  background: transparent;
}

.btn-section-outline:hover {
  background: var(--blue);
  color: #fff;
}


.product-info{
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bc-home .material-symbols-rounded{ 
  vertical-align: middle;
  margin-bottom: 3px;
  color: #888; 
  font-size: 20px; 
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;}


.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================
  HEADER DE CATEGORÍAS (Banner Imagen Total)
========================================= */
/* Shop base styles moved to css/shop.css (phase 1/2) */


/* ===== FILTER: separar título y flecha (desktop y mobile) ===== */


/* =========================================================
   6. PRODUCT PAGE
========================================================= */
.product-page-wrapper { padding-top: 30px; padding-bottom: 20px; }
.breadcrumbs { font-size: 13px; color: #888; margin-bottom: 30px; }
.breadcrumbs a { text-transform: uppercase; color: #888; transition: 0.3s; }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs .current { text-transform: uppercase;color: var(--dark); font-weight: 700; }

.product-main-grid { display: grid; grid-template-columns: 40% 55%; gap: 5%; margin-bottom: 50px; }
.main-image-box {
  border: 1px solid #eee;
  padding: 20px;
  position: relative;
  border-radius: 8px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  overflow: hidden;
  user-select: none;
  cursor: zoom-in;
  touch-action: manipulation;
}

.main-image-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate3d(var(--img-x, 0px), var(--img-y, 0px), 0) scale(var(--img-scale, 1));
  transform-origin: center center;
  transition: transform 0.22s ease;
  will-change: transform;
  pointer-events: none;
}

.main-image-box.is-zoomed {
  cursor: crosshair;
  touch-action: none;
}

.main-image-box.is-zoomed img {
  transition: none;
}

.zoom-icon {
  display: none !important;
}

.main-image-box::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #096cb1;
  display: flex;
  align-items: center;
  justify-content: center;
  mask-image: url('/assets/icons/search_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 18px 18px;
  -webkit-mask-image: url('/assets/icons/search_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 18px 18px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.main-image-box:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.main-image-box.is-zoomed::after {
  opacity: 0;
}

.product-title { font-size: 28px; font-weight: 700; color: #222222; line-height: 1.2; margin-bottom: 5px; text-transform: uppercase; }
.product-title a,
.product-title a:visited{
  color: #232323;
  text-decoration: none;
}

.p-name a,
.p-name a:visited{
  color: #232323;
  text-decoration: none;
}

.product-data p { font-size: 12px; margin-bottom: 20px;}
.brand-badge img { height: 35px; margin-bottom: 20px; object-fit: contain; }
.btn-datasheet{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #246393;
  border-radius: 6px;
  text-decoration: none;
  color: #246393; /* ajusta a tu azul */
}


.btn-datasheet .material-symbols-rounded{ gap: 2px; vertical-align: middle; color: #246393; font-size: 15px; font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20; }
.btn-datasheet:hover .material-symbols-rounded{ color: #ffffff;}


.btn-datasheet > .material-symbols-rounded,
.btn-datasheet > .icon-svg{
  font-size: 40px;     /* tamaño del ícono */
  line-height: 1;
  flex: 0 0 auto;
}
.btn-datasheet .txt{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.btn-datasheet .title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
}
.btn-datasheet .sub{
  font-size: 14px;
  opacity: .9;
}.btn-datasheet:hover { background: #246393; color: #FFFFFF; border-color: #ccc; }

.actions-row { outline: none; margin-bottom: 20px; }
.actions-row button { outline: none; background: none; cursor: pointer; color: #888; font-size: 13px; margin-right: 20px; transition: 0.3s; padding: 0; }
.actions-row .material-symbols-rounded{ gap: 2px; vertical-align: middle; color: #888; font-size: 15px; font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 20; }
.actions-row button:hover { color: var(--blue); }
.actions-row .action{
background: transparent;
border: 0;
outline: 0;
padding: 0;
margin-right: 20px;
color: #666;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
-webkit-appearance: none;
appearance: none;
}
.actions-row .action:focus,
.actions-row .action:focus-visible{
outline: 0 !important;
box-shadow: none !important;
}

/* ===== Resumen del producto (más específico para ganarle a .product-data p) ===== */
.product-data .product-resume{
  margin: 10px 0 16px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--gray);
}

/* ===== Botón WhatsApp Consultar (abajo de Ficha Técnica) ===== */
#btnConsultar.btn-consultar{
  display: flex;              /* bloque -> baja a la siguiente línea */
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;         /* no ocupa todo el ancho */
  padding: 12px 18px;
  border-radius: 6px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  margin: 0 0 14px;           /* separación con lo de abajo */
  vertical-align: middle
}

#btnConsultar.btn-consultar .icon-svg{
  font-size: 18px;
  line-height: 1;
}
#btnConsultar.btn-consultar .whatsapp-svg{
  width: 18px;
  height: 18px;
  display: inline-block;
  color: #fff;
  flex: 0 0 auto;
}

#btnConsultar.btn-consultar:hover{
  filter: brightness(.95);
  color: #fff;
}

.divider { border: 0; border-top: 1px solid #eee; margin: 20px 0; }
.meta-info p { font-size: 13px; color: #666; margin-bottom: 15px; }
.meta-info strong { color: var(--dark); font-weight: 700; }
.meta-info span { color: #888; }
.share-row { margin-top: 20px; font-size: 13px; color: var(--dark); display: block; }
.share-row strong { display: block; margin-bottom: 10px; }
.share-row__icons { display: flex; align-items: center; gap: 12px; }
.share-row__icons a { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }

/* Redes sociales – SVG inline monotono */
.social-svg {
  width: 17px;
  height: 17px;
  display: block;
  color: #5a6c7d;
  transition: color .25s ease, opacity .25s ease;
}
.arrow-btn .material-symbols-rounded { font-size: 26px; }
.social-svg,
.social-svg path,
.social-svg g {
  fill: currentColor !important;
}
.share-row__icons .social-svg {
  width: 20px;
  height: 20px;
  color: #888;
}
.share-row__icons a:hover .social-svg {
  color: #5a6c7d;
}


.product-tabs { border-top: 1px solid #e5e5e5; margin-top: 40px; }
.tab-nav { display: flex; gap: 30px; border-bottom: 1px solid #e5e5e5; margin-bottom: 25px; }
.tab-nav li { padding: 15px 0; font-size: 16px; font-weight: 600; color: #246393; cursor: pointer; border-bottom: 2px solid transparent; transition: 0.3s; }
.tab-nav li.active { color: #246393; border-bottom-color: #246393; }
.tab-nav li:hover { color: var(--blue); }
.tab-content { font-size: 15px; color: #666; line-height: 1.6; }
.tab-content.hidden { display: none; }

.related-products { margin-top: 50px; margin-bottom: 50px;}
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.related-grid .product-modern { width: 100% !important; margin: 0 !important; flex: none !important; max-width: 100% !important; height: 100%; }

/* =========================================================
   7. FOOTER
========================================================= */
.main-footer { min-height: 450px; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%); color: #5a6c7d; padding: 50px 0 20px 0; overflow: hidden; }
.main-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue) 0%, #1e5a8e 100%); }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 30px; position: relative; }
.footer-about { padding-right: 30px; }
.footer-logo { display: inline-block; margin-bottom: 25px; }
.footer-logo img { height: 60%; width: 60%; }
.footer-description { font-size: 14px; line-height: 1.8; color: #5a6c7d; margin-bottom: 30px; font-weight: 400; }
.footer-social { display: flex; gap: 15px; }
.footer-social .social-icon { width: 42px; height: 42px; background: #fff; color: #5a6c7d; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); font-size: 17px; position: relative; }
.footer-social .social-icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--blue); opacity: 0; transform: scale(0); transition: all 0.4s ease; }
.footer-social .social-icon .social-svg { position: relative; z-index: 1; width: 17px; height: 17px; color: #5a6c7d; }
.footer-social .social-icon:hover { color: #fff; transform: translateY(-5px) rotate(5deg); }
.footer-social .social-icon:hover::before { opacity: 1; transform: scale(1); }
.footer-social .social-icon:hover .social-svg { color: #fff; }

.footer-title { font-size: 15px; font-weight: 700; color: #2c3e50; margin-bottom: 25px; text-transform: capitalize; position: relative; padding-bottom: 12px; }
.footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 1.5px; background: var(--blue); border-radius: 2px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 14px; position: relative; padding-left: 0; transition: padding-left 0.3s ease; }
.footer-links li::before { content: '›'; position: absolute; left: 0; color: var(--blue); font-weight: 700; opacity: 0; transition: all 0.3s ease; }
.footer-links li:hover { padding-left: 9px; }
.footer-links li:hover::before { opacity: 1; left: 0; }
.footer-links li a { color: #5a6c7d; font-size: 14px; transition: all 0.3s ease; display: inline-block; font-weight: 500; }
.footer-links li a:hover { color: var(--blue); }

.footer-contact { list-style: none; display: flex; flex-direction: column; gap: 15px; padding: 0; }
.footer-contact li { background: #fff; padding: 20px 25px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.05); width: 100%; box-sizing: border-box; }
.footer-contact li:hover { border-color: var(--blue); }
.footer-contact strong { display: block; color: #2c3e50; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.footer-contact, .footer-contact a { color: #666; font-size: 15px; line-height: 1.5; text-decoration: none; }
.footer-contact a:hover { color: var(--blue); text-decoration: underline; }

.footer-bottom-bar { backdrop-filter: blur(10px); padding: 25px 0 0 0; border-top: 1px solid rgba(0,0,0,0.06); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-copyright { font-size: 13px; color: #5a6c7d; font-weight: 500; }

.footer-legal-content { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.site-footer__book { display: block; max-width: 170px; }
.site-footer__book-img { width: 100%; height: auto; display: block; }
.site-footer__credits { font-size: 13px; line-height: 1.4; color: #5a6c7d; }
.site-footer__credits strong { font-size: 13px; font-weight: 700; display: block; color: #5a6c7d; }
.site-footer__credits span { font-size: 13px; }
.payment-methods { display: flex; gap: 14px; font-size: 22px; color: #5a6c7d; }

.ico-yape-footer, .ico-bcp-footer, .ico-visa-footer{
    height: 50px; /* Esto lo iguala a la altura del texto de los otros iconos */
    width: 32px;   /* Mantiene la forma circular sin aplastarlo */
    vertical-align: middle;
    object-fit: contain;
} 
/* =========================================================
   8. PÁGINAS TEXTO (NOSOTROS, POLÍTICAS)
========================================================= */
.page-hero { border-bottom: 7px solid #ffb820; border-top: 7px solid #ffb820;display: flex;justify-content: center; align-items: center;background: #096CB0; min-height:350px; position: relative; }
.page-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #ffffff; opacity: .25; }
.page-hero__inner { text-align: center; }
.page-hero h1 { align-items: CENTER;color: #fff; font-size: clamp(28px, 5vw, 54px); line-height: 1.1; font-weight: 600; margin: 0 0 10px; letter-spacing: .3px; }
.page-hero__breadcrumb { font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.page-hero__breadcrumb a, .page-hero__breadcrumb .current, .page-hero__breadcrumb .sep { color: #fff; text-transform: uppercase; }
.page-hero__breadcrumb a { text-decoration: none; }
.page-hero__breadcrumb a:hover { color: #DCDCDC; }
.page-hero__breadcrumb .sep { margin: 0 8px; opacity: .85; }

/* Sección Acordeón */
.sig-section { background-color: #004B82; padding: 80px 0; color: #ffffff; }
.sig-container { max-width: 1000px; margin: 0 auto; }
.sig-title { display: flex; align-items: center; text-align: center; gap: 10px; font-size: 28px; font-weight: 700; margin-bottom: 20px; justify-content: center; }
.sig-dot { width: 14px; height: 14px; border: 3px solid #00b2ff; border-radius: 50%; }
.sig-description { color: #cfd8dc; line-height: 1.6; margin-bottom: 40px; justify-content: space-between; text-align: justify; text-justify: inter-word; }

.sig-accordion details { border-bottom: 1px solid rgba(255,255,255,0.3); padding: 18px 0; }
.sig-accordion summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sig-accordion summary::after { content: "+"; font-size: 22px; color: #54B8F7; }
.sig-accordion details[open] summary::after { content: "−"; }
.sig-accordion p { margin-top: 15px; color: #e0e0e0; line-height: 1.6; font-size: 15px; }

/* Misión y Visión */
.mv-clean { background: #f7f7f7; padding: 90px 0; }
.mv-clean-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
.mv-title { display: flex; align-items: center; gap: 10px; font-size: 36px; font-weight: 700; color: #1f4fa3; margin-bottom: 20px; }
.mv-title i { font-size: 22px; color: #1f4fa3; }
.mv-item p { color: #555; line-height: 1.8; margin-bottom: 16px; max-width: 520px; text-align: justify; text-justify: inter-word; }
.mv-title .material-symbols-rounded { margin-top: 2px; font-size: 47px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }

/* Estilos de Acordeón Móvil (Categorías en menú) */
.mobile-cat-group { border-bottom: 1px solid #f0f0f0; }
.mobile-cat-btn { width: 100%; background: none; border: none; padding: 22px 16px; text-align: left; font-size: 18px; font-weight: 500; color: #111; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Lato', sans-serif; }
.mobile-cat-btn i { color: var(--blue); transition: transform 0.3s ease; }
.mobile-cat-btn.active i { transform: rotate(180deg); }
.mobile-cat-btn .material-symbols-rounded[data-icon="keyboard_arrow_down"] { color: var(--blue); font-size: 28px; line-height: 1; transition: transform 0.3s ease; }
.mobile-cat-btn.active .material-symbols-rounded[data-icon="keyboard_arrow_down"] { transform: rotate(180deg); }
.mobile-cat-btn.active { background-color: #f9f9f9; color: var(--blue); }
.mobile-cat-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; background: #fdfdfd; }
.mobile-cat-content a { display: block; padding: 12px 16px 12px 30px; font-size: 16px; color: #555; border-top: 1px solid #f9f9f9; text-decoration: none; }
.mobile-cat-content a:hover { color: var(--blue); background: #f0f8ff; }
.mob-sub-header { padding: 15px 16px 5px 25px; font-size: 11px; text-transform: uppercase; color: var(--blue); font-weight: 900; letter-spacing: 0.5px; }


/* =========================================================
   CONTACTO
========================================================= */
.contact-split{
  width: 100%;
  border-bottom: 1px solid var(--border);
  font-family:'Lato', sans-serif;
}

/* Split a pantalla completa */
.contact-split__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

/* IZQUIERDA */
.contact-split__left{
  background: #fff;
  padding: 70px 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card{
  width: min(820px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  padding: 44px 44px 40px;
}

.contact-card__title{
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 700;
  color: #096CB1;
}

/* FORM */
.contact-form__row{ margin-bottom: 16px; }

.contact-form__row--2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-input,
.contact-textarea{
  width: 100%;
  border: 1px solid #d9dee6;
  border-radius: 999px;
  padding: 14px 18px;
  font-size: 15px;
  outline: none;
  color: var(--dark);
  background: #fff;
}

.contact-textarea{
  border-radius: 18px;
  min-height: 140px;
  resize: vertical;
  padding: 16px 18px;
}

.contact-input::placeholder,
.contact-textarea::placeholder{ color: #9aa3ad; }

.contact-check{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--gray);
  margin: 10px 0;
}

.contact-check input{ margin-top: 3px; }

.contact-check a{
  color: #0b5ed7;
  text-decoration: underline;
}

.contact-btn{
  margin-top: 10px;
  border: 0;
  border-radius: 8px;
  padding: 12px 42px;
  font-weight: 600;
  color: #fff;
  background: #096CB1;
  cursor: pointer;
}

.contact-btn:hover{ filter: brightness(.97); }

/* DERECHA */
.contact-split__right{
  position: relative;
  color: #fff;

  /* Cambia esta imagen por la tuya */
  background-image:
    linear-gradient(rgba(7, 70, 140, .72), rgba(7, 70, 140, .72)),
    url("../img/banners/electricista-contacto.webp");
  background-size: cover;
  background-position: center;
}

.contact-info{
  height: 100%;
  padding: 70px 6vw;
  display: flex;
  align-items: center;
}

.contact-info__grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px 70px;
}

.info-item{ max-width: 380px; }

.info-item{ .material-symbols-rounded { display: inline-flex; color: #ffffff; font-size: 60px; font-variation-settings: 'FILL' 0, 'wght' 270, 'GRAD' 0, 'opsz' 20; }}

.info-ico{
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  margin-bottom: 10px;
}

.info-ico svg{
  width: 44px;
  height: 44px;
}

/* “puntito” turquesa como en la referencia */
.info-ico::after{
  content:"";
  position:absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: none;
  right: 6px;
  bottom: 6px;
}

.info-title{
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 700;
}

.info-text{
  margin: 0;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  font-size: 16px;
}


/* =========================================================
   9. LEGALES
========================================================= */


.privacy-section{
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.privacy-title{
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--dark);
}

.privacy-text{
  max-width: 920px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray);
}

.privacy-text p{
  margin-bottom: 14px;
}

/* =========================================================
   SECCIÓN SERVICIOS
========================================================= */
.seccion-servicios {
            padding: 60px 15px;
            max-width: 1300px;
            margin: 0 auto;
        }

        .grid-servicios {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 columnas */
            gap: 20px; /* Espacio entre cajas */
        }

        /* --- CAJA DEL SERVICIO --- */
        .servicio-item {
            position: relative;
            height: 520px; /* Altura fija */
            overflow: hidden; /* IMPORTANTE: Oculta lo que se salga al hacer zoom */
            cursor: pointer;
            border-radius: 4px;
        }

        /* --- IMAGEN (ETIQUETA IMG) --- */
        .servicio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Hace que la imagen actúe como fondo (no se estira) */
            object-position: center;
            display: block;
            transition: transform 0.6s ease; /* Suavizado del zoom */
            position: absolute; /* Para que quede detrás del texto */
            top: 0;
            left: 0;
            z-index: 1; /* Nivel más bajo */
        }

        /* --- CAPA DE COLOR (OVERLAY) --- */
        .servicio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Filtro oscuro inicial */
            z-index: 2; /* Encima de la imagen */
            transition: background-color 0.3s ease;
        }

        /* --- TEXTO --- */
        .servicio-texto {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3; /* Encima de todo */
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .servicio-texto h2 {
            color: #ffffff;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            margin: 0;
            line-height: 1.2;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            transition: transform 0.6s ease;
        }

        /* --- EFECTOS HOVER (AL PASAR EL MOUSE) --- */
        
        /* 1. Zoom a la imagen */
        .servicio-item:hover img {
            transform: scale(1.05);
        }

        /* 2. Cambio a azul corporativo */
        .servicio-item:hover .servicio-overlay {
            background-color: rgba(0, 87, 179, 0.63); 
        }

        /* 3. Pequeño zoom al texto */
        .servicio-item:hover .servicio-texto h2 {
            transform: scale(1.05);
        }

/* =========================================================
   ETIQUETA "NUEVO" FLOTANTE
========================================================= */

/* 1. Aseguramos que la imagen sea el marco de referencia */
.product-img {
    position: relative !important; 
}

/* 2. Diseño de la etiqueta */
.badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff7138; /* Tu azul corporativo */
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none; /* Permite hacer clic en la foto a través de la etiqueta */
    text-transform: uppercase;
}

/* =========================================================
   ARRASTRAR CARRUSELES
========================================================= */

/* --- ESTILOS PARA DRAG SCROLL (Carrusel arrastrable) --- */
.drag-scroll {
    overflow-x: auto;
    cursor: grab !important; /* Fuerza la manito siempre */
    cursor: -webkit-grab !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    
    /* PROHIBIDO SELECCIONAR O ARRASTRAR ELEMENTOS INTERNOS */
    user-select: none; 
    -webkit-user-select: none;
}

/* Cuando se está agarrando */
.drag-scroll.active {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
    transform: scale(1);
}

/* ESTO ES LO QUE SOLUCIONA TU ERROR DE LA IMAGEN */
.drag-scroll img, 
.drag-scroll a,
.drag-scroll h2,
.drag-scroll p {
    -webkit-user-drag: none; /* Chrome/Safari: No permite arrastrar la imagen fantasma */
    user-drag: none;
    pointer-events: auto; /* Permite clic, pero controlamos el arrastre con JS */
}

/* =========================================================
   9. RESPONSIVE (LIMPIO + FUNCIONAL)
   Breakpoints: 1024 / 900 / 768 / 600 / 420
========================================================= */

/* ---------------------------------------------------------
   <= 1024px  (tablet horizontal / laptop chica)
--------------------------------------------------------- */

/* --- Breakpoints SOLO para este carrusel --- */
/* En pantallas “intermedias” muestra 4 cards (en vez de 5) */
@media (max-width: 1280px){
  .top-products .product-modern{
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }

}

@media (max-width: 1024px) {

  /* Estilo de la X */
.drawer-close-x {
  font-size: 30px;
  color: #555;
  cursor: pointer;
  line-height: 1;
  font-family: sans-serif;
  font-weight: 300;
  
  /* IMPORTANTE: Quitamos position:absolute si lo tenías antes */
  position: static; 
  transform: none;
}

  .drawer-close-bar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 20px 20px 10px 0;
        background: #fff;
        flex: 0 0 auto;
        border-bottom: 1px solid #f5f5f5;
  }

  .drag-scroll::-webkit-scrollbar{
    display: none;  /* Ocultar scrollbar en Chrome/Safari */
  }

  .drag-scroll{
    scrollbar-width: none;                 /* Firefox */
    -ms-overflow-style: none;              /* IE/Edge */
  }
    

  .hero-container {width: 100%; height: auto; aspect-ratio: 26 / 9; position: relative; }

  .hero-title {font-size: 28px;}

  .grid-servicios {
        grid-template-columns: repeat(2, 1fr); /* Cambia de 3 a 2 columnas */
    }

  .drawer-overlay{
  display:block !important;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 200000;
  }

  

  /* 1. Contenedor Principal: Flexbox Vertical y Altura Dinámica */
.mobile-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: min(85vw, 500px);
    height: 100dvh; /* IMPORTANTE: 100dvh para que no se salga de la pantalla */
    background: #fff;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 200001;
}


   /* 2. Cabecera (Tabs): Tamaño fijo, no encoge */
.drawer-top {
  font-size: 20px;
  flex: 0 0 auto;
  width: 100%;
  background: #fff;
  z-index: 10;
  border-bottom: 1px solid #f0f0f0;
 
}


/* El cuerpo interno es el que debe tener el scroll */
.drawer-body {
    flex: 1;           /* Ocupa todo el espacio disponible */
    min-height: 0;     /* Truco para que el flex permita scroll */
    overflow-y: auto;  /* ACTIVA EL SCROLL AQUÍ */
    -webkit-overflow-scrolling: touch; /* Suavidad en iPhone */
    overscroll-behavior: contain; /* Evita que se mueva la página de fondo */
    padding-bottom: 50px; /* Espacio extra abajo */
}

  .mobile-drawer .drawer-body{
  max-height: none;   /* ✅ quita el límite conflictivo */
}


/* 4. El Panel Interno: Es el que lleva el relleno final */
.drawer-panel {
  width: 100%;
  /* CRÍTICO: El padding va AQUÍ. Esto hace que el contenido sea físicamente más largo */
  padding-bottom: 120px !important; 
  /* Aseguramos que se comporte como bloque normal */
  position: static; 
}

  #menu-toggle:checked ~ .mobile-drawer{
  transform: translateX(0);
  }
  #menu-toggle:checked ~ .drawer-overlay{
  opacity: 1;
  pointer-events: auto;
  }
  #menu-toggle:checked ~ .mobile-drawer{
  transform: translateX(0);
  }
  /* Grillas generales */
  .cat-grid-layout { grid-template-columns: repeat(2, 1fr); }

  /* Cards (carruseles / listados flex) */
  .product-modern{
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    margin: 0 10px;
  }


  /* Footer: 2 columnas */
  .main-footer{ padding-top: 50px; }

  .footer-content{
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-about{
    grid-column: 1 / -1;
    padding-right: 0;
    text-align: center;
  }

  .footer-social{ justify-content: center; }

  .footer-bottom{
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .payment-methods{ justify-content: center; flex-wrap: wrap; }

  /* Shop: 2 columnas de productos (ya es cómodo) */


  /* Header NUEVO (index.html): ocultar desktop y mostrar barra móvil */

  .header-container { display: none !important; }

  .mobile-top-bar{
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #ffffff !important;
    height: 120px;
    position: relative;
    z-index: 2500;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  }
  .mob-logo img { height: 70px; width: 170px; object-fit: contain; display:block; }
  .mob-actions { display:flex; align-items:center; gap: 15px; }
  .mob-icon-btn{
    font-size: 40px;
    color: #333;
    width: 54px;
    height: 54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 6px;
    transition: .2s;
    cursor:pointer;
    background: #3379B4;   /* color de fondo */
    border-radius: 999px;  /* redondeado */
  }
  .mob-icon-btn:hover { background:#3379B4; color: var(--blue); }

  .mobile-top-bar .material-symbols-rounded{
    display: inline-flex;
    color: #ffffff;
    font-size: 34px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  }
  /* Buscador desplegable (móvil, index.html) */
  .mob-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;                    /* ← Cambiado a block */
    background: #ffffff !important;
    overflow: hidden;
    max-height: 0;                     /* ← Empieza con altura 0 */
    opacity: 0;                        /* ← Empieza invisible */
    transform: translateY(-20px);      /* ← Empieza más arriba */
    z-index: 2400;
    
    /* ANIMACIÓN SUAVE */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                transform 0.4s ease;
    
    pointer-events: none;              /* ← No clickeable cuando está cerrado */
}

#mob-search-toggle:checked ~ .mob-search-dropdown {
    max-height: 200px;                 /* ← Altura final */
    opacity: 1;                        /* ← Visible */
    transform: translateY(0);          /* ← Posición final */
    pointer-events: auto;              /* ← Clickeable cuando está abierto */
    overflow: visible;
}

/* 2) SOLO el contenedor del input permite que “salga” la caja */
.mob-search-dropdown .search-wrap{
position: relative;
overflow: visible;
}

  #mob-search-toggle:checked ~ .mob-search-dropdown {
    max-height: 500px;        /* Altura suficiente */
    transform: translateY(0); 
    pointer-events: auto;
    overflow: visible;
}
.mob-search-dropdown form {
    position: relative; /* Base para que el panel se pegue aquí */
    display: flex;
    padding: 10px 20px;
    background: #ffffff;
    overflow: visible !important; /* Vital para que las sugerencias salgan del form */
}
  .mob-search-dropdown input{
    flex:1;
    padding:10px 15px;
    border:1px solid #ddd;
    border-radius:4px;
    outline:none;
    font-size:16px;
    min-width: 80%;
  }

  .mob-search-dropdown .search-suggest {
    position: absolute;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    display: none;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin-top: 0;
}

.mob-search-dropdown .search-suggest.is-open {
    display: flex !important;
}

.search-suggest__all {
    display: block;
    width: 100%;
    padding: 12px;
    background: #f8f9fa; /* Un gris muy tenue para diferenciarlo de los productos */
    text-align: center;
    font-weight: 700;
    color: var(--blue);
    border-top: 1px solid #eee;
    text-decoration: none;
}

    .top-products .product-modern{
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }

 }
/* ---------------------------------------------------------
   <= 900px  (tablet vertical / mobile grande)
--------------------------------------------------------- */
@media (max-width: 900px) {


.footer-legal-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
    text-align: left;
}


.product-carousel-wrapper { display: flex;justify-content: center;align-items: center;max-width:100%;gap: 5px; position: relative; padding: 0 !important; overflow: visible;margin: 0 auto;}  
.carousel-track {gap: 10px}
.carousel-window {
    overflow-x: auto !important;
    overflow-y: hidden;
    margin: 0;   
    /* CAMBIO AQUÍ: De "0px" a "10px" a los lados */
    /* Esto da espacio para que se vea el borde y la sombra completa */
    padding: 15px 10px 25px 10px !important; 
}
.prev-btn { left: -20px }
.next-btn { right: -20px }



/* Estilo del botón original (solo aseguramos que no se estire demasiado) */


/* Estilo del NUEVO botón de limpiar */


  .contact-info{
    justify-content: center;   /* centra el bloque completo */
    text-align: center;        /* centra textos */
  }
  .contact-split__grid{ grid-template-columns:1fr; }
  .contact-split__left, .contact-info{ padding:44px 20px; }
  .contact-card{ padding:32px 22px 26px; }
  .contact-card__title{ font-size:24px; }
  .contact-info__grid{ grid-template-columns:1fr; gap:28px; justify-items: center; }
  .info-item{
    max-width: 420px;          /* opcional: evita que se estire demasiado */
  }
  .info-ico{ margin-left:auto; margin-right:auto; }


  /* Product page: 1 columna */
  .product-main-grid { grid-template-columns: 1fr; gap: 30px; }
  .main-image-box { margin-bottom: 20px; }

  /* Related: carrusel horizontal */
  .related-grid{
    display:flex !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom: 20px;
    gap: 15px;
    -webkit-overflow-scrolling: touch;
  }
  .related-grid .product-modern{
    min-width:260px;
    max-width:260px !important;
    scroll-snap-align:center;
    margin-right:0 !important;
  }

  /* Banners 2->1 */
  .banners-grid { grid-template-columns: 1fr; gap: 20px; }
  .info-card{
    flex-direction: column;
    text-align:center;
    padding: 30px 20px;
    align-items:center;
  }
  .info-text{ margin-bottom:25px; width:100%; }
  .info-img{ width:100%; display:flex; justify-content:center; }
  .info-img img{ max-width:80%; }

  /* Shop: layout 1 columna + filtros drawer */


/* Aseguramos que el contenido use todo el ancho disponible */





  .mv-clean{ padding: 60px 0; }
  .mv-clean-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mv-title{ font-size: clamp(24px, 4vw, 36px); }
  .mv-item p{ max-width: none; }

  /* El form es la referencia del dropdown */
.mob-search-dropdown form{ position: relative; }


/* Respeta el padding lateral del form (10px 20px) */
.mob-search-dropdown .search-suggest{
left: 20px;
right: 20px;
width: 90%; /* evita 100% full */
}


/* El bloque de texto debe poder encogerse (para que haga wrap bien) */
.search-suggest__item > div{
flex: 1;
min-width: 0;
}


.search-suggest__name,
.search-suggest__meta{
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}


}


/* ---------------------------------------------------------
   <= 768px  (mobile)
--------------------------------------------------------- */
@media (max-width: 768px) {

  .drawer-top,
  .mobile-cat-btn,
  .drawer-panel.panel-menu a{
  font-size: 14px;
  }

  .mobile-cat-content .mob-sub-link,
  .mobile-cat-content a
  {font-size: 12px;}

   .footer-legal-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
    text-align: center;
    }

    .footer-contact li:last-child {
        border-bottom: none !important;
    }

    /* Si la línea viene del contenedor de créditos específicamente */
    .footer-col:last-of-type {
      padding-top: 10px;
        border-bottom: none !important;
    }

  .mobile-top-bar{height: 80px }
  .mob-logo img { height: 50px; }
  .mob-icon-btn{width: 34px;height: 34px  }
  .mobile-top-bar .material-symbols-rounded{ font-size: 24px;}

 

  .privacy-section{ padding: 40px 0; }
  .privacy-title{ font-size: 24px; margin-bottom: 14px; }
  .privacy-text{ font-size: 15px; }

  /* 1. Contenedor "Ventana": Permite el scroll con el dedo */
    /* 1. LIBERAR EL DEDO (CRÍTICO) */
    /* Esto sobrescribe cualquier regla anterior que bloqueara el movimiento */
    .product-carousel-wrapper,
.carousel-window,
.carousel-track,
.product-modern,
.product-img, 
.product-img img {
    /* CAMBIA 'pan-y' POR 'pan-x pan-y' PARA QUE FUNCIONE EN HÍBRIDOS */
    touch-action: pan-x pan-y !important; 
    
    -webkit-user-drag: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .carousel-window {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory; /* Efecto magnético */
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 0 40px 20px !important; /* Espacio para sombras */
        
        /* Libera el scroll horizontal nativo */
        touch-action: pan-x pan-y !important; 
        
        /* Asegura que los hijos no se corten */
        align-items: stretch;
    }

    /* 2. Riel (Track): Se adapta al contenido */
    .carousel-track {
        display: flex !important;
        width: max-content !important; /* CLAVE: Deja que crezca a la derecha */
        transform: none !important;    /* Anula JS */
        gap: 15px !important;
    }

    /* 3. Tarjetas: Tamaño fijo y visible */
    .top-products .product-modern {
        /* Tamaño: 75% del ancho de la pantalla (1 producto y medio) */
        flex: 0 0 70vw !important; 
        width: 70vw !important;
        max-width: 70vw !important;
        
        scroll-snap-align: start;
        margin: 0 !important;
        height: auto !important; /* Altura automática según contenido */
        min-height: 380px;       /* Altura mínima para que no se vea vacío */
        
        /* Aseguramos visibilidad */
        opacity: 1 !important;
        visibility: visible !important;
        background: #fff;
    }

    /* 4. Asegurar que la IMAGEN se vea */
    .top-products .product-img {
        height: 200px !important; /* Altura fija para imagen */
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }
    
    .top-products .product-img img {
        max-height: 100%;
        width: auto;
        display: block !important;
    }

    /* 5. Asegurar que el TEXTO se vea */
    .top-products .product-info {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        text-align: center;
    }
    
    /* Ocultar flechas definitivamente en móvil */
    .arrow-btn { display: none !important; }

 .seccion-servicios {
        padding: 40px 15px; /* Reducimos el padding superior/inferior */
    }

    .grid-servicios {
        grid-template-columns: 1fr; /* 1 sola columna (uno debajo del otro) */
        gap: 15px;
    }

    .servicio-item {
        height: 300px; /* Reducimos la altura (de 520px a 300px) para facilitar el scroll */
    }

    .servicio-texto h3 {
        font-size: 20px; /* Ajustamos ligeramente el tamaño del texto */
    }
    
    /* Opcional: En móvil, a veces es mejor que el filtro azul sea permanente 
       o más oscuro para asegurar legibilidad, ya que no hay "mouse hover" */
    .servicio-overlay {
        background-color: rgba(0, 0, 0, 0.5); 
    } 


  .cat-banner-card {
        flex-direction: column;
        height: auto;
        padding: 30px 20px;
        text-align: center;
    }


  .product-title{ font-size: 20px; }
  /* Ocultar cosas “desktop only” */
  .categories-grid-section,
  .categories-pc,
  .hide-mobile { display:none !important; }

  /* Header ANTIGUO (tienda/nosotros/producto): logo + hamburguesa */
  .main-header{
    height:auto !important;
    position:relative;
    background:#fff;
    padding: 10px 0;
    z-index: 500;
  }
  .header-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 20px;
    min-height: 60px;
  }
  .logo-section{
    position:static;
    transform:none;
    margin:0;
    width:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 10px;
  }
  .hamburger-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
    font-size: 26px;
    color: var(--blue);
    width: 44px;
    height: 44px;
    background: transparent;
    cursor:pointer;
  }

  /* Menú ANTIGUO: nav-list colapsable (NO ocultamos nav-blue) */
  .nav-relative{ position:relative; height:auto; }
  .nav-list{
    position:absolute;
    top: 100%;
    left:0;
    right:0;
    width:100%;
    background: var(--blue);
    flex-direction: column;
    align-items: flex-start;
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease-out;
    z-index: 100000;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  }
  #menu-toggle:checked ~ .nav-blue .nav-list{
    max-height: 100vh;
    overflow-y:auto;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .nav-list > li > a{
    width:100%;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    height:auto;
    display:block;
  }

  /* Drawer NUEVO (index.html) */
  /*.drawer-overlay, .mobile-drawer { display:block !important; } ESTO IMPIDE QUE EL MENU HAMBURGUESA SCROLLEE*/ 
  .drawer-overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease;
    z-index: 200000;
  }

  /* ================= BOTÓN CERRAR (X) ================= */
/* ================= BARRA DE CIERRE (NUEVA) ================= */
/* Estilo de la X */
.drawer-close-x {
  font-size: 20px;
}

.drawer-close-x:hover {
  color: var(--blue);
}

/* Ajuste opcional para los tabs que vienen debajo */
.drawer-top {
  border-top: none; /* Quitamos borde superior si choca con la barra de cierre */
}

/* IMPORTANTE: Dar espacio al header para que la X no tape el texto si es necesario */
.mobile-drawer .drawer-header {
  padding-top: 5px; 
}
  .mobile-drawer{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:#fff;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200001;
    display:flex;
    flex-direction:column;
    box-shadow: 0 0 15px rgba(0,0,0,.2);
  }
  #menu-toggle:checked ~ .drawer-overlay{ opacity:1; pointer-events:auto; }
  #menu-toggle:checked ~ .mobile-drawer{ transform: translateX(0); }

  /* Secciones */
  .features-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 15px; }

  

  /* Cards: 2 por fila (mobile) */
  .product-modern{
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin: 0 10px;
  }

  /* Footer “accordion mobile” */
  .main-footer{ padding-top: 30px; }
  .footer-content{ display:flex; flex-direction:column; gap:0; text-align:left; }
  .footer-col{ border-bottom:1px solid rgba(0,0,0,0.05); padding: 0 20px; }
  .footer-title{
    margin:0;
    padding: 20px 0;
    font-size:16px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .footer-title::after{ display:none; }
  .footer-title::before{
    content:'';
    width: 14px;
    height: 14px;
    display: inline-block;
    background-color: currentColor;
    mask-image: url('/assets/icons/keyboard_arrow_down_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url('/assets/icons/keyboard_arrow_down_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    font-size:14px;
    color: var(--blue);
    transition: transform .3s ease;
  }
  .footer-title.active::before{ transform: rotate(180deg); }

  .footer-links, .footer-contact{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease-out;
    padding-left: 10px;
  }
  .footer-contact{ padding-left:0; }
  .footer-about{
    text-align:center;
    padding: 30px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  .footer-social{ justify-content:center; }
  .footer-bottom{
    flex-direction:column;
    gap:15px;
    text-align:center;
    justify-content:center;
  }
  .payment-methods{ justify-content:center; }

  /* WhatsApp */
  .whatsapp-float{ width:54px; height:54px; right:14px; bottom:14px; }
  .whatsapp-float img{ width:28px; height:28px; }

  /* Hero cuadrado */
  .hero-container{ aspect-ratio: 1 / 1; }

  .sig-section{ padding: 50px 0; }
  .sig-title{ font-size: clamp(20px, 3.5vw, 28px); }
  .sig-description{ text-align: left; }
  .sig-accordion summary{ font-size: 15px; }
  .sig-accordion p{ font-size: 14px; }
  


}


/* ---------------------------------------------------------
   <= 600px  (mobile chico)
--------------------------------------------------------- */
@media (max-width: 600px) {




  .mobile-top-bar{height: 70px }
  .mob-logo img { height: 52px; }
  .mob-icon-btn{width: 33px;height: 33px  }
  .mobile-top-bar .material-symbols-rounded{ font-size: 20px;}


  .section-header {
    flex-direction: column;       /* Pone uno debajo del otro */
    justify-content: center;      /* Centra verticalmente */
    text-align: center;           /* Centra el texto */
    gap: 15px;
  }

  .section-header h2 {
    font-size: 22px; /* Un poco más pequeño para dar espacio */
  }
  
  .section-header .btn-section-outline {
    padding: 8px 20px; /* Botón un poco más compacto */
    font-size: 12px;
  }
  .product-title{ font-size: 20px; }
  .section-header h2 {font-size: 20px;}
  .tab-nav{ gap: 15px; }
  .tab-nav li{ font-size: 12px; }

  .shop-grid-3 .product-modern {

    max-width: 100% !important; /* Evita que herede el tamaño del carrusel */
  }

  .shop-grid-3 .product-img{ height: 130px; } /* prueba 110–130 */
  .shop-grid-3 .product-img img{ width: 100%; height: 100%; object-fit: contain; }

  .product-img{ height: 160px; }
  .p-name{ -webkit-line-clamp: 3; height: calc(1.4em * 3); }

  .top-products .product-modern{
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }

  .banners-grid { grid-template-columns: 2fr; gap: 20px; }


}


/* ---------------------------------------------------------
   <= 450px  (móviles muy pequeños)
--------------------------------------------------------- */
@media (max-width: 450px) {

  .footer-legal-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
    text-align: center;
}

.footer-contact li:last-child {
    border-bottom: none !important;
}

/* Si la línea viene del contenedor de créditos específicamente */
.footer-col:last-of-type {
  padding-top: 10px;
    border-bottom: none !important;
}

  /* Scrollbar oculto también en responsive */
  .drag-scroll::-webkit-scrollbar{
    display: none;
  }
  .drag-scroll{
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hero-dots {
      top: auto;
      bottom: 14px;
      left: 50%;
      transform: translateX(-50%);
      gap: 7px;
      padding: 5px 8px;
  }
  .h-dot {
      width: 13px;
      height: 13px;
  }
  .h-dot.active {
      width: 34px;
  }

  .hero-slide.zigzag-right .hero-overlay { background: none; }
    .hero-slide.zigzag-right .hero-content .container { align-items: center; justify-content: center; }
    .hero-slide.zigzag-right .hero-content-inner { text-align: center; margin-right: 0; }
    .hero-slide.zigzag-right .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-slide.zigzag-right .hero-btns { justify-content: center; }

  .hero-content{
      pointer-events: none !important;
  }
  .hero-dots{
      pointer-events: auto !important;
  }


  /* En móvil, centramos todo y reducimos tamaños */
    .hero-overlay {
        /* Gradiente vertical en móvil */
        background: none;
    }

    .hero-content {
        align-items: flex-start; /* Texto abajo en móvil para que se vea la imagen arriba */
        justify-content: center;
        margin-top: 60px;
        padding-bottom: 60px; /* Espacio para los dots */
        text-align: center;
        z-index: 30;
        
    }

    .hero-content-inner {
        pointer-events: auto !important; 
        position: relative;
        z-index: 50 !important; /* Elevamos el contenido */
    }

    .hero-subtitle { color:#2a2a2a;font-size: 12px; margin-bottom: 5px; }
    .hero-title { box-shadow: #000; font-weight: 600; font-size: 21px; margin-bottom: 10px; }
    .hero-desc { font-size: 15px; margin-bottom: 20px; display: none; /* Opcional: ocultar descripción larga en móvil muy chico */ }
    
    .hero-btns { margin-top: 20px; justify-content: center; }
    
    .btn-hero { display:block; align-items: center; justify-content: center; padding: 12px 20px; font-size: 12px; }

    .btn-hero.btn-outline{display: none !important;}

    .hero-arrow {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

  .product-img{ padding: 10px; height: 150px; }
  .p-name{ text-align: center;font-size: 12px; -webkit-line-clamp: 6; height: calc(1.4em * 6); }
  .p-sku{
    font-size: 10px;
    min-height: calc(1.25em * 2);
  }
  /* Cards: 1 por fila cuando ya no entra cómodo */
  
  .product-title{font-size: 20px;}
  .section-header h2{text-align: left; font-size: 20px;}
  .tab-nav li{font-size: 15px;}

  .product-info{
    text-align: center;
  }
  .product-modern{
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }
  .p-footer{
    text-align: center;
    justify-content: center;
    align-items: center;   

  }
  .btn-wsp-card{
    font-size: 12px;
    min-height: 40px;
    height: 40px;
    padding: 8px 10px;
  }

  .btn-view-modern{
    font-size: 12px;
    min-height: 40px;
    height: 40px;
    padding: 8px 10px;
  }

  .footer-social .icon-svg{
    font-size: 22px;
  }

  .top-products .product-modern{
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  .hero-container{ aspect-ratio: 1 / 1; }

  .features-grid{ text-align: center; grid-template-columns: 1fr; }


  /* un poquito menos padding en pantallas muy chicas */
.mob-search-dropdown .search-suggest{
left: 12px;
right: 112px;
}

  /* La caja siempre pegada al ancho del buscador */
.search-bar-wide{ width: 100%; }


.search-suggest{
left: 0;
right: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}


/* ✅ En móvil chico: 1 columna (evita corte) */
.search-suggest__grid{
grid-template-columns: 1fr !important;
}


/* Quita borde de “segunda columna” */
.search-suggest__item{
border-right: none;
}

/* opcional: deja el nombre sin “clamp” para que baje a 2+ líneas si hace falta */
.search-suggest__name{
-webkit-line-clamp: unset;
overflow: visible;
display: block;
}


/* Opcional: compactar un poco */
.search-suggest__thumb{
width: 46px;
height: 46px;
flex: 0 0 46px;
}

}

/* =========================================================
   HOVERS SOLO PARA MOUSE / TRACKPAD (NO TÁCTIL)
   Pega esto AL FINAL de tu CSS
========================================================= */
@media (hover: none) and (pointer: coarse){

  /* Desactiva hover en táctil (evita "hover pegado") */
  .whatsapp-float:hover,
  .search-bar-wide button:hover,
  .search-btn-icon:hover,
  .cta-button:hover,
  .nav-links a:hover,
  .nav-list li a:hover,
  .cat-btn:hover,
  .mega-menu-item:hover > a,
  .mega-menu-item:hover .mega-sub-content,
  .mega-col .mega-col-title:hover,
  .mega-col ul li a:hover,
  .mobile-cat-content .mob-sub-link:hover,
  .drawer-panel.panel-menu a:hover,
  .mobile-cat-content a:hover,
  .search-suggest__item:hover,
  .product-modern:hover,
  .product-modern .fav-btn:hover,
  .btn-view-modern:hover,
  .btn-wsp-card:hover,
  .hero-arrow:hover,
  .arrow-btn:hover,
  .cat-card-item:hover,
  .filter-parent:hover,
  .filter-subs li:hover,
  .filter-list li:hover,
  .btn-clear-filters:hover,
  .breadcrumbs a:hover,
  .zoom-icon:hover,
  .actions-row button:hover,
  .tab-nav li:hover,
  .share-row a:hover,
  .footer-social .social-icon:hover,
  .footer-social .social-icon:hover::before,
  .footer-links li:hover,
  .footer-links li a:hover,
  .footer-contact li:hover,
  .footer-contact a:hover,
  .page-hero__breadcrumb a:hover{
    /* neutraliza la mayoría de animaciones/efectos típicos */

    filter: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }
  .cat-list li .cat-panel { display: none; }
  .cat-list li.is-open .cat-panel { display: block; }

  /* si algún hover cambiaba color, forzamos herencia */
  .nav-links a:hover,
  .nav-list li a:hover,
  .mega-col ul li a:hover,
  .footer-links li a:hover,
  .footer-contact a:hover,
  .breadcrumbs a:hover,
  .page-hero__breadcrumb a:hover{
    color: inherit !important;
  }
}


/* Texto arriba de flechas/dots (ahora están dentro del slide) */
.hero-content{ z-index: 30 !important; pointer-events: none; }
.hero-content-inner{ pointer-events: auto; }
.hero-btns{ pointer-events: auto; }
.hero-arrow{ z-index: 20 !important; pointer-events: auto; }
.hero-dots{ z-index: 20 !important; pointer-events: auto; }
.hero-overlay{ z-index: 2 !important; }

/* SOLO tablets (no móviles) */
  /* textos de categorías (los que tienes en 12px) */

  /* si también usas el estilo tipo lista (.filter-subs li / .filter-list li) */

/* Fallback: que el primer slide sea visible SOLO si JS aún no corrió */
.hero-track:not(.js-ready) .hero-slide:first-child{
  opacity: 1;
  z-index: 2;
  visibility: visible;
}
.hero-track:not(.js-ready) .hero-slide:first-child .hero-content-inner{
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* ========================================
   FIXES CRÍTICOS DE CLS - VERSIÓN SIMPLIFICADA
   Sin skeleton loaders - Solo reserva de espacio
   Pegar al final de style.css
   ======================================== */

/* 1. HERO SLIDER - Reservar espacio */
.hero-container {
    width: 100%;
    aspect-ratio: 26/9;
    position: relative;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .hero-container {
        width: 100%;
        aspect-ratio: 1/1;
        min-height: auto;
        max-height: 100vw;  /* ← No puede ser más alta que el ancho */
    }
    
    .hero-slide img {
        object-fit: cover;
        object-position: center;
    }
}

/* 2. CARRUSELES - Reservar altura mínima */
.top-products {
    min-height: 550px;
    position: relative;
}

.carousel-track {
    min-height: 480px;
    display: flex;
    gap: 0px;
}

/* 3. SECCIÓN DE CATEGORÍAS */
.categories-section {
    min-height: 400px;
}

.cat-cards {
    min-height: 350px;
}

/* 4. FOOTER */
.main-footer {
    min-height: 400px;
}

@media (max-width: 768px) {
    .main-footer {
        min-height: 600px;
    }
}


/* 6. BANNERS */
.single-banner-section {
    min-height: 300px;
}

@media (max-width: 768px) {
    .single-banner-section {
        min-height: 400px;
    }
}

/* 7. FUENTES - Evitar saltos */

.fonts-loaded body {
    font-family: "Lato", system-ui, -apple-system, sans-serif;
}

/* 8. IMÁGENES */

/* 9. SECTION HEADERS */
.section-header {
    min-height: 80px;
}

/* 10. CAROUSEL WRAPPER */
.product-carousel-wrapper {
    min-height: 480px;
}


/* ========================================
   OPTIMIZACIÓN CLS - TIENDA
   Pegar al FINAL de style.css
   ======================================== */

/* SHOP GRID - Reservar espacio antes de que JavaScript cargue */


/* SIDEBAR - Reservar espacio */

/* FILTER SECTIONS - Evitar saltos */

/* PAGINACIÓN - Reservar espacio */

/* SHOP HEADER - Evitar saltos */

/* BREADCRUMBS */
.breadcrumbs {
    min-height: 40px;
}

/* CATEGORY HEADER */

/* FEATURES SECTION */

/* ========================================
   FIX CARRUSELES (DRAG + CLICK + SCROLLBAR)
   ======================================== */

.product-carousel-wrapper .carousel-window,
.product-carousel-wrapper .carousel-track,
.related-products .related-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-carousel-wrapper .carousel-window::-webkit-scrollbar,
.product-carousel-wrapper .carousel-track::-webkit-scrollbar,
.related-products .related-grid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.product-carousel-wrapper .carousel-window {
    overflow-x: auto !important;
    overflow-y: hidden;
}

/* Flex scroll solo para tablets y móviles */
@media (max-width: 1024px) {
    .related-products .related-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 20px;
        scroll-behavior: smooth;
    }

    .related-products .related-grid .product-modern {
        flex: 0 0 clamp(240px, 24vw, 300px);
        max-width: clamp(240px, 24vw, 300px);
    }
}

.product-card {
    cursor: pointer;
}

/* Desktop only: quitar sticky del header principal */
@media (min-width: 1025px) {
  .site-header {
    position: relative !important;
    top: auto !important;
  }
}

/* ========================================
   SECCIÓN: BENEFICIOS + CARRUSEL DE SERVICIOS
   ======================================== */

.promo-dual-section {
    padding: 50px 0;
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.promo-dual-grid {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.promo-card {
    border-radius: 18px;
    overflow: hidden;
}

/* --- Caja izquierda: Beneficios --- */
.promo-benefits {
    background: linear-gradient(150deg, #e8f5ff 0%, #f0f8ff 50%, #f7fbff 100%);
    border: 1px solid #cce5f8;
    padding: 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.promo-benefits-image-box {
    padding: 0;
    background: transparent;
    border: none;
}

.promo-benefits-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.promo-logo {
    width: 95px;
    height: auto;
    object-fit: contain;
    display: block;
}

.promo-benefits-subtitle {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--blue);
    opacity: 0.7;
    margin-top: -10px;
}

.benefits-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    flex: 1;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: #183a56;
    line-height: 1.3;
}

.benefits-list li .material-symbols-rounded {
    font-size: 15px;
    color: var(--blue);
    background: rgba(9, 108, 177, 0.1);
    border-radius: 8px;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-benefits-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    width: fit-content;
    transition: background 0.2s, transform 0.15s;
    margin-top: auto;
}

.promo-benefits-cta:hover {
    background: #005a96;
    transform: translateY(-1px);
}

/* --- Caja derecha: Carrusel de servicios --- */
.promo-services {
    position: relative;
}

.svc-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
}

.svc-track {
    display: flex;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-slide {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: 100%;
    flex: 0 0 100%;
    overflow: hidden;
}

.svc-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.svc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(4,22,55,0.78) 100%);
    pointer-events: none;
}

.svc-label {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 2;
}

.svc-label a {
    display: inline-flex;
    align-items: center;
    background: var(--yellow);
    color: #0d1f35;
    font-weight: 900;
    font-size: 12px;
    padding: 8px 14px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.svc-label a:hover {
    background: #e6ac00;
}

.svc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255,255,255,0.35);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s, transform 0.18s, border-color 0.2s;
    padding: 0;
}

.svc-arrow:hover {
    background: rgba(9, 108, 177, 0.85);
    border-color: transparent;
    transform: translateY(-50%) scale(1.07);
}

.svc-prev { left: 12px; }
.svc-next { right: 12px; }

.svc-dots {
    position: absolute;
    bottom: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 5;
}

.svc-dot {
    width: 7px;
    height: 7px;
    border-radius: 4px;
    border: none;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s, width 0.3s;
}

.svc-dot.active {
    background: var(--yellow);
    width: 20px;
}

/* Responsive */
@media (max-width: 960px) {
    .promo-dual-grid {
        grid-template-columns: 1fr;
    }

    .promo-benefits {
        padding: 28px 28px;
    }

    .svc-carousel {
        aspect-ratio: 16 / 8;
    }
}

@media (max-width: 540px) {
    .promo-dual-section {
        padding: 35px 0;
    }

    .promo-benefits {
        padding: 24px 20px;
        gap: 16px;
    }

    .benefits-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .svc-carousel {
        aspect-ratio: 4 / 3;
    }

    .svc-label a {
        font-size: 11px;
        padding: 7px 11px;
    }
}