/* Mega Header – CSS v11.8.1
 * Cambios:
 *  - Logo principal alineado a la izquierda (quitado centrado desktop).
 *  - Tamaños de logos MUCHO más pequeños.
 *  - Variables fáciles de ajustar.
 *  - Ajustes de spacing tras reducción.
 *  - CORREGIDO: Tamaños consistentes de iconos móviles
 *  - CORREGIDO: Búsqueda móvil con overlay
 */

:root {
  --mh-bg:#ffffff;--mh-border:#e2e6ec;--mh-primary:#6A21BF;--mh-primary-hover:#54189f;
  --mh-accent:#EA9350;--mh-text:#1a1f29;--mh-text-sec:#4b5563;--mh-radius:10px;
  --mh-shadow-sm:0 2px 6px -1px rgba(0,0,0,.08),0 1px 3px -1px rgba(0,0,0,.05);
  --mh-shadow:0 10px 25px -8px rgba(0,0,0,.18);--mh-transition:180ms cubic-bezier(.4,0,.2,1);
  --mh-panel-width:100%;--mh-panel-max:1240px;--mh-panel-bg:#fff;--mh-z:120;--mh-header-h:72px;

  /* NUEVAS: controla tamaños de logos */
  --mh-logo-size:25px;           /* logos en listas */
  --mh-logo-size-heading:22px;   /* logos en headings */
  --mh-logo-gap:6px;

  /* MÓVIL: Tamaños consistentes */
  --mh-mobile-btn-size:52px;
  --mh-mobile-icon-size:24px;
}

.cs-mega-header{position:sticky;top:0;z-index:calc(var(--mh-z) + 3);background:var(--mh-bg);border-bottom:1px solid var(--mh-border);font-family:'Inter',sans-serif;box-shadow:var(--mh-shadow-sm);}
.cs-header-inner{
  display:flex;align-items:center;width:100%;margin:0 auto;
  gap:.65rem;padding:.45rem clamp(1rem,3vw,3rem);
}
.cs-mobile-menu-btn{display:none;background:var(--mh-primary);border:1px solid var(--mh-primary);color:#fff;width:46px;height:46px;border-radius:14px;cursor:pointer;transition:var(--mh-transition);align-items:center;justify-content:center;}
.cs-mobile-menu-btn:hover{background:var(--mh-primary-hover);}
.cs-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}

.cs-logo{display:inline-flex;align-items:center;line-height:1;margin-right:.55rem;}
.cs-logo img{width:50px;height:50px;object-fit:cover;border-radius:8px;display:block;}

.cs-mega-nav{display:flex;}
.cs-mega-nav-list{display:flex;gap:.35rem;list-style:none;margin:0;padding:0;}
.cs-mega-nav-list>li>a,.cs-mega-trigger{
  font:600 .80rem/1 'Montserrat',sans-serif;letter-spacing:.25px;
  display:inline-flex;align-items:center;padding:.5rem .7rem;
  border-radius:6px;background:transparent;border:0;
  color:var(--mh-text)!important;text-decoration:none;cursor:pointer;
  transition:var(--mh-transition);
}
.cs-mega-nav-list>li>a:hover,.cs-mega-trigger:hover{background:rgba(106,33,191,.08);color:var(--mh-primary)!important;}
.cs-mega-trigger{padding-right:1.35rem;position:relative;}
.cs-mega-trigger::after{
  content:"";width:5px;height:5px;position:absolute;top:50%;right:7px;margin-top:-4px;
  border:2px solid currentColor;border-left:0;border-top:0;transform:rotate(45deg);opacity:.6;transition:var(--mh-transition);
}
.cs-mega-trigger[aria-expanded="true"]::after{transform:rotate(225deg);opacity:1;}
.cs-mega-trigger[aria-expanded="true"]{color:var(--mh-primary)!important;}

.cs-search{
  position:relative;display:flex;align-items:center;
  background:#f5f7fa;border:1px solid var(--mh-border);border-radius:8px;
  padding:0 .55rem;margin-left:1rem;flex:1;max-width:380px;
}
.cs-search input{
  flex:1;border:0;background:transparent;padding:.5rem .3rem;
  font-size:.75rem;outline:none;color:var(--mh-text);
}
.cs-search .cs-icon{width:19px;height:19px;stroke:var(--mh-text-sec);margin-right:.3rem;stroke-width:2;fill:none;}

.cs-right{display:flex;align-items:center;gap:.45rem;margin-left:auto;}
.cs-right-link{
  display:inline-flex;align-items:center;gap:.3rem;
  font:600 .70rem/1 'Montserrat',sans-serif;
  padding:.5rem .65rem;border-radius:6px;
  color:var(--mh-text)!important;text-decoration:none;
  background:transparent;transition:var(--mh-transition);position:relative;
  letter-spacing:.25px;
}
.cs-right-link:hover{background:#f3f4f6;}
.cs-cart-btn{background:var(--mh-primary);color:#fff!important;}
.cs-cart-btn:hover{background:var(--mh-primary-hover);}
.cs-cart-count{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;
  font-size:.55rem;display:flex;align-items:center;justify-content:center;
  background:var(--mh-accent);color:#fff;font-weight:700;border-radius:999px;padding:0 4px;
}

/* Overlay & panels */
.cs-overlay{position:fixed;inset:0;background:transparent!important;z-index:calc(var(--mh-z)+2);opacity:0;pointer-events:none;transition:var(--mh-transition);top:var(--mh-header-h,72px);}
.cs-overlay[data-active="true"]{opacity:1;pointer-events:auto;}

.cs-panels-wrapper{position:relative;width:100%;}
.cs-panel{position:absolute;left:0;width:var(--mh-panel-width);background:var(--mh-panel-bg);border-bottom:1px solid var(--mh-border);box-shadow:var(--mh-shadow);animation:fadePanel .22s ease;z-index:calc(var(--mh-z)+4);}
@keyframes fadePanel{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.cs-panel-inner{
  max-width:var(--mh-panel-max);margin:0 auto;
  padding:1.35rem 1.2rem 1.95rem;
  display:grid;gap:1.4rem;grid-template-columns:repeat(3,1fr);
}

.cs-panel-col h3,.cs-panel-col h4{
  font:700 .66rem/1.1 'Montserrat',sans-serif;
  letter-spacing:.55px;text-transform:uppercase;
  color:var(--mh-primary);margin:1.05rem 0 .48rem;position:relative;
}
.cs-panel-col h3:first-child{margin-top:.2rem;}
.cs-panel-col h3:after,.cs-panel-col h4:after{
  content:"";position:absolute;bottom:-5px;left:0;width:64px;height:2px;
  background:linear-gradient(90deg,var(--mh-primary),transparent);
}
.cs-heading-link{
  display:inline-flex;align-items:center;gap:var(--mh-logo-gap);
  font:inherit;color:inherit;text-decoration:none;
}
.cs-heading-link:hover{color:var(--mh-primary-hover);}

/* Lista de enlaces */
.cs-links{list-style:none;margin:0 0 .7rem;padding:0;display:grid;gap:.3rem;}
.cs-links li a{
  font:500 .66rem/1.25 'Inter',sans-serif;
  color:var(--mh-text);text-decoration:none;
  padding:.18rem 0;display:inline-flex;align-items:center;
  gap:var(--mh-logo-gap);transition:var(--mh-transition);
}
.cs-links li a:hover{color:var(--mh-primary);transform:translateX(3px);}
.cs-links li a.cs-see-all{
  font-weight:700;color:var(--mh-primary)!important;
  padding:.22rem .5rem;border-radius:6px;
  background:linear-gradient(90deg,rgba(106,33,191,.10),rgba(106,33,191,.04));
  box-shadow:0 0 0 1px rgba(106,33,191,.18);
  transform:none;
}
.cs-links li a.cs-see-all:hover{background:linear-gradient(90deg,rgba(106,33,191,.18),rgba(106,33,191,.08));}

/* LOGOS (reducción fuerte) */
.cs-nav-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cs-nav-logo img{
  width:var(--mh-logo-size);height:var(--mh-logo-size);
  object-fit:contain;display:block;max-width:100%;max-height:100%;
  border-radius:3px;
}
.cs-nav-logo--heading img{
  width:var(--mh-logo-size-heading);height:var(--mh-logo-size-heading);
  border-radius:4px;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.06));
}

/* Buscador avanzado */
.cs-search-advanced{position:relative;}
.cs-search-results{
  position:absolute;top:100%;left:0;width:100%;background:#fff;
  border:1px solid var(--mh-border);border-radius:0 0 8px 8px;
  box-shadow:0 2px 6px -2px rgba(0,0,0,.13);z-index:100;display:none;
}
.cs-search-results.active{display:block;}
.cs-search-results ul{list-style:none;margin:0;padding:.35rem 0;}
.cs-search-results li{padding:.45rem .9rem;border-bottom:1px solid #f3f4f8;font-size:.65rem;}
.cs-search-results li:last-child{border-bottom:none;}
.cs-search-results a{color:var(--mh-primary);font-weight:500;text-decoration:none;transition:color .14s;}
.cs-search-results a:hover{color:var(--mh-primary-hover);}

/* Mobile */
.cs-mobile-actions{display:none;}

/* BÚSQUEDA MÓVIL - CORREGIDO */
.cs-mobile-search {
  position:fixed;top:0;left:0;width:100%;height:100dvh;
  background:#fff;z-index:calc(var(--mh-z) + 40);
  transform:translateY(-100%);transition:transform .25s ease;
  display:flex;flex-direction:column;
}

.cs-mobile-search[data-open="true"] {
  transform:translateY(0);
}

.cs-mobile-search form {
  display:flex;align-items:center;gap:.5rem;
  padding:1rem;border-bottom:1px solid var(--mh-border);
  background:#fff;
}

.cs-ms-back {
  background:var(--mh-primary);border:1px solid var(--mh-primary);color:#fff;
  width:var(--mh-mobile-btn-size);height:var(--mh-mobile-btn-size);
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--mh-transition);flex-shrink:0;
}

.cs-ms-back:hover {
  background:var(--mh-primary-hover);
}

.cs-ms-back .cs-icon {
  width:var(--mh-mobile-icon-size);height:var(--mh-mobile-icon-size);
  stroke:#fff;stroke-width:2.5;
}

.cs-mobile-search input {
  flex:1;border:1px solid var(--mh-border);
  background:#f5f7fa;padding:.75rem 1rem;
  font-size:.9rem;border-radius:12px;outline:none;
}

.cs-mobile-search input:focus {
  border-color:var(--mh-primary);
  background:#fff;
}

.cs-ms-submit {
  background:var(--mh-primary);border:1px solid var(--mh-primary);color:#fff;
  width:var(--mh-mobile-btn-size);height:var(--mh-mobile-btn-size);
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--mh-transition);flex-shrink:0;
}

.cs-ms-submit:hover {
  background:var(--mh-primary-hover);
}

.cs-ms-submit .cs-icon {
  width:var(--mh-mobile-icon-size);height:var(--mh-mobile-icon-size);
  stroke:#fff;stroke-width:2.5;
}

/* Body lock cuando búsqueda móvil está abierta */
body.cs-mobile-search-open {
  overflow:hidden;
}

@media (max-width:1100px){
  .cs-search{display:none;}
  .cs-mobile-menu-btn{display:inline-flex;}
}

@media (max-width:640px){
  .cs-mega-nav,.cs-search,.cs-right{display:none!important;}
  
  /* CORREGIDO: Tamaños consistentes de botones móviles */
  .cs-mobile-menu-btn{
    width:var(--mh-mobile-btn-size);
    height:var(--mh-mobile-btn-size);
    border-radius:16px;
  }
  
  .cs-mobile-menu-btn .cs-icon {
    width:var(--mh-mobile-icon-size);
    height:var(--mh-mobile-icon-size);
    stroke-width:2.5;
  }
  
  .cs-header-inner{gap:.55rem;padding:.5rem .9rem;}
  .cs-logo{margin-right:auto;}
  .cs-logo img{width:54px;height:54px;}
  
  .cs-mobile-actions{
    display:flex!important;align-items:center;gap:.5rem;margin-left:.4rem;
  }
  
  .cs-icon-btn{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:var(--mh-mobile-btn-size);height:var(--mh-mobile-btn-size);
    background:#f5f7fa;border:1px solid var(--mh-border);
    border-radius:18px;text-decoration:none;color:var(--mh-text);
    transition:var(--mh-transition);
  }
  
  .cs-icon-btn:hover{background:#ebeef2;}
  
  /* CORREGIDO: Iconos del mismo tamaño */
  .cs-icon-btn .cs-icon{
    width:var(--mh-mobile-icon-size);
    height:var(--mh-mobile-icon-size);
    stroke-width:2.2;
  }
  
  /* CORREGIDO: Lupa del mismo tamaño que otros iconos */
  .cs-mobile-search-trigger .cs-icon {
    width:var(--mh-mobile-icon-size)!important;
    height:var(--mh-mobile-icon-size)!important;
    stroke-width:2.2!important;
  }
  
  .cs-icon-btn[data-badge]:after{
    content:attr(data-badge);position:absolute;top:4px;right:4px;min-width:18px;height:18px;
    background:var(--mh-accent);color:#fff;font:700 .55rem/1 'Montserrat',sans-serif;
    display:flex;align-items:center;justify-content:center;border-radius:999px;padding:0 4px;
  }
}

/* Drawer móvil (sin cambios relevantes salvo heredar estilos previos) */
@media (max-width:640px){
  .cs-mobile-drawer{
    position:fixed;top:0;left:0;width:100%;height:100dvh;background:#fff;
    box-shadow:var(--mh-shadow);z-index:calc(var(--mh-z)+30);display:flex;flex-direction:column;
    transform:translateX(-100%);transition:var(--mh-transition);overflow-y:auto;
  }
  .cs-mobile-drawer[data-open="true"]{transform:none;}
  .cs-m-header{display:flex;align-items:center;gap:.8rem;padding:.85rem .85rem;border-bottom:1px solid var(--mh-border);}
  .cs-m-back,.cs-m-close{
    background:var(--mh-primary);border:1px solid var(--mh-primary);color:#fff;
    width:var(--mh-mobile-btn-size);height:var(--mh-mobile-btn-size);border-radius:16px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .cs-m-back svg,.cs-m-close svg{
    width:var(--mh-mobile-icon-size);height:var(--mh-mobile-icon-size);
    stroke:#fff;stroke-width:3;
  }
  .cs-m-title{font:700 1rem/1.1 'Montserrat',sans-serif;margin:0;flex:1;color:var(--mh-text);}
  .cs-m-level-wrapper{position:relative;width:100%;height:calc(100dvh - 70px);overflow:hidden;}
  .cs-m-nav-level{position:absolute;inset:0;overflow-y:auto;padding:0 0 3.2rem;background:#fff;transform:translateX(100%);opacity:0;transition:transform .32s var(--mh-transition),opacity .22s var(--mh-transition);z-index:0;}
  .cs-m-nav-level.is-active{transform:translateX(0);opacity:1;z-index:1;}
  .cs-m-nav-level.is-prev{transform:translateX(-40%);opacity:0;}
  .cs-m-list{list-style:none;margin:0;padding:0;}
  .cs-m-list>li{border-bottom:1px solid #eceff2;}
  .cs-m-link,.cs-m-expand{
    width:100%;background:#f5f7fa;border:0;display:flex;align-items:center;gap:.75rem;
    padding:.85rem 1rem;min-height:60px;font:600 .86rem/1.25 'Montserrat',sans-serif;color:var(--mh-text);
    cursor:pointer;text-decoration:none;position:relative;transition:var(--mh-transition);
  }
  .cs-m-link:hover,.cs-m-expand:hover{background:#ebeef2;}
  .cs-m-expand:after,.cs-m-link[data-next="true"]:after{
    content:"";width:7px;height:7px;border:2px solid currentColor;border-left:0;border-top:0;
    transform:rotate(-45deg);position:absolute;right:16px;top:50%;margin-top:-6px;opacity:.55;
  }
  .cs-m-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .cs-m-icon img{width:100%;height:100%;object-fit:contain;display:block;}
  .cs-m-subtitle{
    font:700 .62rem/1.2 'Montserrat',sans-serif;letter-spacing:.5px;
    padding:.75rem 1rem .35rem;text-transform:uppercase;color:var(--mh-text-sec);background:#fff;
  }
  .cs-m-team-list .cs-m-link{background:#fff;font:500 .78rem/1.28 'Inter',sans-serif;padding:.7rem 1rem;min-height:54px;}
  .cs-m-link.cs-all{
    font-weight:700;color:var(--mh-primary);background:linear-gradient(90deg,rgba(106,33,191,.14),rgba(106,33,191,.04));
    margin-top:.3rem;
  }
  .cs-m-link.cs-all:before{
    content:"+";font-size:.65rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;margin-right:.4rem;background:var(--mh-primary);color:#fff;border-radius:5px;
    box-shadow:0 0 0 1px rgba(106,33,191,.4);
  }
}

/* Focus */
.cs-mega-header .cs-mega-nav-list>li>a:focus-visible,
.cs-mega-header .cs-mega-trigger:focus-visible,
.cs-m-link:focus-visible,.cs-m-expand:focus-visible{outline:2px solid var(--mh-primary);outline-offset:2px;}

/* Fuerza cachebust para desarrollo */
.cs-mega-header::before {
  content: "v11.8.1";
  position: absolute;
  top: -999px;
  left: -999px;
  opacity: 0;
}

/* FIX DIRECTO PARA ICONOS MÓVILES - Agregar al final de mega-header.css */

/* FORZAR tamaños de iconos móviles - Máxima especificidad */
@media (max-width: 640px) {
  
  /* Botón de menú hamburguesa */
  .cs-mega-header .cs-mobile-menu-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  
  .cs-mega-header .cs-mobile-menu-btn .cs-icon {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.5 !important;
  }
  
  /* Todos los botones de acciones móviles */
  .cs-mega-header .cs-mobile-actions .cs-icon-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
  }
  
  /* TODOS los iconos dentro de acciones móviles */
  .cs-mega-header .cs-mobile-actions .cs-icon-btn .cs-icon {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.2 !important;
  }
  
  /* Específicamente el icono de búsqueda móvil */
  .cs-mega-header .cs-mobile-search-trigger .cs-icon,
  .cs-mega-header .cs-mobile-search-trigger .cs-icon-search-big {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.2 !important;
  }
  
  /* Remover cualquier estilo específico que pueda estar interfiriendo */
  .cs-mega-header .cs-mobile-actions .cs-mobile-search-trigger .cs-icon-search-big {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.2 !important;
    /* Remover cualquier transformación */
    transform: none !important;
    /* Asegurar display */
    display: block !important;
  }
  
  /* Iconos del drawer móvil */
  .cs-mobile-drawer .cs-m-back .cs-icon,
  .cs-mobile-drawer .cs-m-close .cs-icon,
  .cs-mobile-drawer .cs-m-back svg,
  .cs-mobile-drawer .cs-m-close svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 3 !important;
  }
  
  /* Iconos de la búsqueda móvil */
  .cs-mobile-search .cs-ms-back .cs-icon,
  .cs-mobile-search .cs-ms-submit .cs-icon {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.5 !important;
  }
  
  /* Asegurar que no hay estilos conflictivos de otras fuentes */
  .cs-mega-header svg[viewBox="0 0 24 24"] {
    min-width: 24px !important;
    min-height: 24px !important;
  }
  
  /* Fix específico para el SVG de búsqueda que puede tener clases especiales */
  .cs-mega-header .cs-mobile-search-trigger svg {
    width: 24px !important;
    height: 24px !important;
  }
  
  .cs-mega-header .cs-mobile-search-trigger svg g {
    stroke-width: 2.2 !important;
  }
  
  .cs-mega-header .cs-mobile-search-trigger svg circle,
  .cs-mega-header .cs-mobile-search-trigger svg line {
    stroke-width: 2.2 !important;
  }
}