/* HW · Cabecera: logo grande, buscador centrado con lupa, menu deslizable.
   Ancho de contenido unificado a 1300 px en toda la web. */

/* ---- Ancho general del sitio: 1300 px ---- */
:root{--hw-ancho:1300px}
.hw-bar-in,
.site-main > .page-content,
.elementor-section.elementor-section-boxed > .elementor-container,
.woocommerce .site-main,
.site-main{max-width:var(--hw-ancho);margin-left:auto;margin-right:auto}
.hw-sec,.hw-hero{max-width:var(--hw-ancho);margin-left:auto;margin-right:auto}
body.woocommerce-page .site-main,
body.woocommerce .site-main{padding-left:20px;padding-right:20px}

/* ---- Barra ---- */
.hw-bar{position:sticky;top:0;z-index:9990;background:#fff;border-bottom:1px solid #ececec;padding:14px 20px}
.hw-bar-in{display:flex;align-items:center;gap:24px}

/* Logo mas grande */
.hw-bar-logo{flex:0 0 auto}
.hw-bar-logo img{max-height:86px;width:auto;display:block}

/* Buscador centrado, sin boton, con lupa dentro */
.hw-search{flex:1 1 auto;display:flex;justify-content:center}
.hw-search form{position:relative;width:100%;max-width:520px}
.hw-search input[type=search]{width:100%;border:1px solid #d8d8d8 !important;border-radius:26px;
  padding:11px 46px 11px 20px;font-size:15px;outline:none;background:#fff;
  -webkit-appearance:none;appearance:none}
.hw-search input[type=search]:focus{border-color:#9aa0ab !important;box-shadow:0 0 0 3px rgba(31,36,48,.07)}
.hw-search input[type=search]::-webkit-search-cancel-button{display:none}
.hw-search .hw-lupa{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;padding:6px;line-height:0;color:#5a6070}
.hw-search .hw-lupa:hover{color:#1f2430}
.hw-search .hw-lupa svg{width:20px;height:20px;display:block}

/* Boton del menu */
.hw-burger{flex:0 0 auto;border:0 !important;background:transparent;cursor:pointer;padding:8px;
  display:flex;flex-direction:column;gap:5px;width:44px}
.hw-burger span{display:block;height:2px;background:#1f2430;border-radius:2px}

/* Panel deslizable */
.hw-panel{position:fixed;top:0;right:0;bottom:0;width:330px;max-width:86vw;background:#fff;
  box-shadow:-4px 0 28px rgba(0,0,0,.16);transform:translateX(100%);
  transition:transform .28s ease;z-index:10000;display:flex;flex-direction:column;overflow-y:auto}
.hw-panel.abierto{transform:translateX(0)}
.hw-panel-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid #eee}
.hw-panel-head strong{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#1f2430}
.hw-panel-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:#555}
.hw-panel nav{padding:8px 0}
.hw-panel nav a{display:block;padding:13px 20px;color:#1f2430;text-decoration:none;
  font-size:15px;border-bottom:1px solid #f4f4f4}
.hw-panel nav a:hover{background:#f7f7f9}
.hw-velo{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;
  transition:opacity .28s;z-index:9999}
.hw-velo.abierto{opacity:1;visibility:visible}

@media(max-width:900px){
  .hw-bar-logo img{max-height:62px}
  .hw-bar-in{gap:14px}
}
@media(max-width:720px){
  .hw-bar{padding:10px 14px}
  .hw-bar-in{flex-wrap:wrap}
  .hw-bar-logo img{max-height:48px}
  .hw-search{order:3;flex-basis:100%}
  .hw-search form{max-width:none}
}

/* ---- Pie de pagina ---- */
.hw-pie{background:#1f2430;color:#c9cdd6;margin-top:56px;padding:44px 20px 0}
.hw-pie-in{max-width:var(--hw-ancho);margin:0 auto;display:flex;flex-wrap:wrap;gap:36px}
.hw-pie-col{flex:1 1 220px;min-width:200px}
.hw-pie-col h4{color:#fff !important;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  margin:0 0 16px;font-weight:700}
.hw-pie-col p{margin:0 0 12px;font-size:14px;line-height:1.65;color:#a7adba !important}
.hw-pie-col a{display:block;color:#c9cdd6 !important;text-decoration:none;font-size:14px;padding:5px 0}
.hw-pie-col a:hover{color:#fff !important}
/* Los logos son JPG con fondo blanco: el filtro de invertir los dejaba en
   blanco sobre blanco. Se muestran tal cual, sobre una caja clara. */
.hw-pie-logo img{max-height:72px;width:auto;margin-bottom:14px;
  background:#fff;padding:10px 14px;border-radius:10px}
.hw-pie-bajo{max-width:var(--hw-ancho);margin:34px auto 0;padding:18px 0 22px;
  border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;
  gap:10px;justify-content:space-between;align-items:center}
.hw-pie-bajo small{color:#8f96a5;font-size:13px;line-height:1.6}
.hw-pie-bajo nav{display:flex;flex-wrap:wrap;gap:18px}
.hw-pie-bajo nav a{color:#a7adba !important;text-decoration:none;font-size:13px}
.hw-pie-bajo nav a:hover{color:#fff !important}

/* Ocultar el pie antiguo del tema, que salia sin formato */
footer#site-footer.site-footer{display:none !important}

@media(max-width:720px){
  .hw-pie{padding:32px 16px 0;margin-top:36px}
  .hw-pie-in{gap:26px}
  .hw-pie-bajo{flex-direction:column;align-items:flex-start}
}

/* hw-pie-blanco: titulos y enlaces del pie en blanco */
.hw-pie-col h4,.hw-pie-col a,.hw-pie-bajo nav a{color:#fff}

/* hw-pie-blanco-v2: todo el texto del pie en blanco; los enlaces cambian al pasar el raton */
.hw-pie,.hw-pie-col h4,.hw-pie-col p,.hw-pie-col a,.hw-pie-bajo small,.hw-pie-bajo nav a{color:#fff}
.hw-pie-col a,.hw-pie-bajo nav a{opacity:.82;transition:opacity .15s ease,transform .15s ease}
.hw-pie-col a:hover,.hw-pie-bajo nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* hw-sin-footer-viejo: oculta el pie viejo del tema/Elementor si la cache no lo recorta */
.wma-footer-zone,#site-footer{display:none !important}

/* hw-kit-blindaje: el global.css del kit de Elementor pisa button/input; se restauran los estilos hw */
.hw-burger{background:transparent !important;border:0 !important;padding:8px !important;border-radius:0 !important}
.hw-search input[type=search]{border:1px solid #d8d8d8 !important;border-radius:26px !important;background:#fff !important}
.hw-search input[type=search]:focus{border-color:#9aa0ab !important}
.hw-search .hw-lupa{background:transparent !important;border:0 !important}

/* hw-kit-blindaje-v2: el kit de Elementor tambien pisa las flechas de los sliders y la X del menu */
.hw-nav{background:#fff !important;border:1px solid #e2e5ea !important;padding:0 !important;width:42px !important;height:42px !important;border-radius:50% !important}
.hw-nav:hover{background:#12151c !important}
.hw-nav svg{width:19px !important;height:19px !important}
.hw-panel-close{background:transparent !important;border:0 !important;padding:0 !important;font-size:26px !important;color:#555 !important;width:auto !important}
.hw-panel-close:hover{background:transparent !important;color:#111 !important}

/* hw-logo-grande: logo con la misma presencia que el de ropademarca */
@media(min-width:781px){.hw-bar-logo img{max-height:112px}}

/* hw-movil-menu-derecha: en movil el boton del menu se va al borde derecho de
   la barra (antes quedaba pegado al logo) y el buscador ocupa toda la fila de
   abajo. El !important es por el kit global de Elementor. */
@media(max-width:720px){
  .hw-bar-in{align-items:center}
  .hw-bar-logo{margin-right:auto}
  .hw-burger{order:2 !important;margin-left:auto !important}
  .hw-search{order:3 !important;flex-basis:100% !important;display:flex !important}
}

/* hw-movil-buscador-desplegable: en movil el logo va mas grande y el buscador
   se colapsa en un icono de lupa (.hw-buscar-toggle, lo inserta el mu-plugin
   hw-movil-buscador.php) que lo despliega en la fila de abajo. */
.hw-buscar-toggle{display:none;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;padding:0 !important;border:0 !important;border-radius:0 !important;
  background:transparent !important;color:#1f2430;cursor:pointer;line-height:0}
.hw-buscar-toggle svg{width:23px !important;height:23px !important;display:block}
@media(max-width:720px){
  .hw-bar-logo img{max-height:72px !important;max-width:55vw}
  .hw-buscar-toggle{display:flex}
  .hw-burger{margin-left:4px !important}
  .hw-bar-in:not(.hw-buscando) .hw-search{display:none !important}
  .hw-bar-in.hw-buscando .hw-search{display:flex !important;margin-top:10px}
}

/* hw-buscar-toggle-color: el kit global de Elementor pone color:#fff a todos
   los <button>, asi que la lupa salia blanca sobre blanco (invisible). Ademas
   los logos apaisados (ropademarca, tipicode) pueden ocupar hasta 60vw. */
.hw-buscar-toggle{color:#1f2430 !important}
.hw-buscar-toggle svg{stroke:#1f2430 !important;fill:none !important}
.hw-buscar-toggle:hover svg{stroke:#000 !important}
@media(max-width:720px){.hw-bar-logo img{max-width:60vw !important}}

/* hw-busca-ventana: en movil el buscador se abre como VENTANA a pantalla
   completa sobre la pagina, no como una fila mas de la cabecera. Se reposiciona
   el propio nodo .hw-search (asi hw-live-search sigue funcionando dentro), y
   las sugerencias pasan de absolutas a flujo normal, o quedarian fuera. */
.hw-busca-cab{display:none}
@media(max-width:720px){
  .hw-bar-in.hw-buscando .hw-search{
    position:fixed !important;top:0;left:0;right:0;bottom:0;z-index:10060;
    display:flex !important;flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:#fff;padding:10px 16px 0;margin:0 !important;
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .hw-bar-in.hw-buscando .hw-busca-cab{display:flex;align-items:center;justify-content:space-between;
    flex:0 0 auto;padding:2px 0 12px}
  .hw-busca-tit{font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#1f2430}
  .hw-busca-cerrar{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    font-size:30px;line-height:1;cursor:pointer;margin-right:-8px;
    background:transparent !important;border:0 !important;border-radius:0 !important;
    padding:0 !important;color:#1f2430 !important}
  .hw-bar-in.hw-buscando .hw-search form{max-width:none !important;width:100%;flex:0 0 auto}
  .hw-bar-in.hw-buscando .hw-search input[type=search]{font-size:16px;padding:14px 48px 14px 18px}
  .hw-bar-in.hw-buscando .hw-sugs{position:static !important;margin:16px -16px 0;flex:1 1 auto;
    border:0 !important;border-top:1px solid #eee !important;border-radius:0 !important;
    box-shadow:none !important;max-height:none !important}
}

/* hw-busca-ventana-v2: dos arreglos de la ventana de busqueda movil.
   1) El kit de Elementor deja .hw-busca-cerrar en font-size:11px y width:0 (la
      X salia diminuta), el mismo colapso que sufrio .hw-panel-close.
   2) El banner de cookies (#cookies-eu-banner, z-index 999999) tapaba la
      ventana: se oculta mientras esta abierta. */
.hw-busca-cerrar{font-size:32px !important;line-height:1 !important;
  width:44px !important;height:44px !important;flex:0 0 44px !important;
  min-width:0 !important;overflow:visible !important}
.hw-busca-tit{font-size:14px !important}
html.hw-busca-abierta #cookies-eu-banner,
html.hw-busca-abierta #cookies-eu-banner-closed{display:none !important}

/* hw-pie-bajo-centrado: solo el copyright, centrado en todas las paginas */
.hw-pie-bajo{justify-content:center;text-align:center}
@media(max-width:720px){.hw-pie-bajo{align-items:center}}