/* ==========================================================================
   AG en Línea — UI Fase 2 (NC Mejoras de apariencia · Landing · Santo Creativo)
   C08 Header nuevo (buscador redondeado + widgets Centro / Entrega / Moneda / Mi carrito, informativos)
   C09 Menú de categorías con iconos — panel de familias a la izquierda del hero en la home; CONSERVA los dos
       niveles (Familia → SubFamilias) y la misma mecánica hover/click del módulo iqitmegamenu (ajuste AG 23-sep:
       NO navega directo al listado de la familia; solo cambia la apariencia)
   C10 Hero banner institucional responsive (components/home-hero.tpl + js/ui-fase2.js)
   C11 Carrusel "Productos más comprados" — tarjetas homogéneas + flechas circulares (hicarouselspack / Owl 2)
   Solo presentación sobre el DOM existente (Visual Composer + iqitmegamenu + shippingcondition + blockcart +
   hicarouselspack): no cambia funcionalidad ni UX. Tokens en ui-fase1.css (:root). Carga después de ui-fase1.css.
   ========================================================================== */

/* ---- C08 · Fila logo / buscador / widgets (VC .header-row-container-01; flex ≥768 por theme-styles.css) ---- */
@media (min-width: 768px) {
  .header-row-container-01 { align-items: center; gap: 4px; }
  /* la fila trae <style> intercalados: se cuenta por tipo. 1 = logo (vc_col-sm-3), 2 = buscador (.searchbox), 3 = widgets (.text-right).
     Presupuesto a 1170 px: logo 232+30 · widgets ~570 · buscador el resto (>=300). Los widgets pueden contraerse (textos con elipsis). */
  .header-row-container-01 > .wpb_column:nth-of-type(1) { flex: 0 0 auto; width: auto; min-width: 0; }
  .header-row-container-01 > .wpb_column.searchbox { flex: 1 1 320px; width: auto; min-width: 260px; max-width: 560px; }
  .header-row-container-01 > .wpb_column.text-right { flex: 0 1 auto; width: auto; min-width: 0; margin-left: auto; }
  /* los 4 widgets en UNA sola fila: las 2 sub-filas VC (.shipping_condition y .carrito) quedan lado a lado */
  .header-row-container-01 > .wpb_column.text-right > .wpb_wrapper { display: flex; align-items: center; justify-content: flex-end; flex-direction: row !important; }
  .header-row-container-01 > .wpb_column.text-right .vc_row { margin: 0; width: auto; }
  .header-row-container-01 > .wpb_column.text-right .vc_row:before,
  .header-row-container-01 > .wpb_column.text-right .vc_row:after { content: none; }
  .header-row-container-01 > .wpb_column.text-right .vc_row > .vc_col-sm-12 { width: auto; padding: 0; float: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* contenedor de 750/970 px: los widgets pasan a una segunda línea alineada a la derecha; logo + buscador en la primera */
  .header-row-container-01 { flex-wrap: wrap; row-gap: 10px; }
  .header-row-container-01 > .wpb_column.searchbox { max-width: none; }
  .header-row-container-01 > .wpb_column.text-right { flex: 1 0 100%; margin-left: 0; }
  .header-row-container-01 .wpb_single_image img { width: 200px; height: 78px; padding-left: 200px; }
}

/* Widgets Centro / Entrega / Moneda (shippingcondition, hook displayTop; el mismo id se pinta también en la fila
   móvil visible-xs, por eso las reglas van por id y aplican a las dos copias) */
#shippingcondition-displayTop { display: flex; align-items: stretch; justify-content: flex-end; padding: 0; margin: 0; }
#shippingcondition-displayTop > .flex-xs,
#shippingcondition-displayTop > .btn-group { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; margin: 0; padding: 4px 10px; border: 0; border-left: 1px solid var(--ag-line); text-align: left; }
#shippingcondition-displayTop > :first-child { border-left: 0; }
#shippingcondition-displayTop .btn-group > a[data-type] { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
#shippingcondition-displayTop > a.flex-xs,
#shippingcondition-displayTop > div.flex-xs { gap: 8px; }
#shippingcondition-displayTop a:hover, #shippingcondition-displayTop a:focus { text-decoration: none; }
/* iconos de la agencia (paquete 2: UBICACION, ENTREGA, MONEDA) como máscara: toman el color por CSS */
#shippingcondition-displayTop i.fa,
#blockcart-displayTop i.fa.icon_header {
  display: inline-block; flex: none; width: 28px; height: 28px; font-size: 0; line-height: 0; background-color: var(--ag-cyan);
  -webkit-mask: url(../img/ui/ubicacion.svg) center / contain no-repeat; mask: url(../img/ui/ubicacion.svg) center / contain no-repeat;
}
#shippingcondition-displayTop i.fa:before,
#blockcart-displayTop i.fa.icon_header:before { content: none; }
#shippingcondition-displayTop i.fa-truck { -webkit-mask-image: url(../img/ui/entrega.svg); mask-image: url(../img/ui/entrega.svg); }
#shippingcondition-displayTop i.fa-money { -webkit-mask-image: url(../img/ui/moneda.svg); mask-image: url(../img/ui/moneda.svg); }
#blockcart-displayTop i.fa.icon_header { -webkit-mask-image: url(../img/ui/carrito.svg); mask-image: url(../img/ui/carrito.svg); }
/* texto en dos líneas: etiqueta en navy, valor en gris */
#shippingcondition-displayTop .text-xs,
#blockcart-displayTop .text-xs { padding: 0; margin: 0; font: 500 12px/1.25 var(--ag-font); color: var(--ag-muted); text-align: left; max-width: 104px; min-width: 0; }
#shippingcondition-displayTop .text-xs strong { display: block; color: var(--ag-navy); font-weight: 700; white-space: nowrap; }
#shippingcondition-displayTop .text-xs span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* caret en los widgets accionables (Entrega abre el modal de dirección; Moneda abre su lista) */
#shippingcondition-displayTop a[data-type] .text-xs span:after,
#shippingcondition-displayTop a[data-type] .text-xs strong:only-child:after {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 5px; vertical-align: 0; background-color: var(--ag-navy);
  -webkit-mask: url(../img/ui/flecha-abajo.svg) center / contain no-repeat; mask: url(../img/ui/flecha-abajo.svg) center / contain no-repeat;
}
#shippingcondition-displayTop .dropdown-menu { left: auto; right: 0; min-width: 120px; margin-top: 8px; padding: 6px 0; border: 0; border-radius: 12px; box-shadow: var(--ag-shadow); }
#shippingcondition-displayTop .dropdown-menu > li > a { padding: 8px 18px; font: 500 13px/1.3 var(--ag-font); color: var(--ag-ink); }
#shippingcondition-displayTop .dropdown-menu > li > a:hover, #shippingcondition-displayTop .dropdown-menu > li.active > a { background: var(--ag-chip); color: var(--ag-navy); }
/* Mi carrito (blockcart displayTop) */
#blockcart-displayTop { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 10px; margin: 0; border-left: 1px solid var(--ag-line); text-align: left; }
#blockcart-displayTop > a.block { display: inline-block; position: relative; margin: 0; line-height: 0; }
#blockcart-displayTop .text-xs span { display: block; color: var(--ag-navy); font-weight: 700; white-space: nowrap; }
.qty_cart_badge { background: var(--ag-yellow); color: var(--ag-navy); width: 18px; height: 18px; font: 700 11px/1 var(--ag-font); top: -7px; right: -9px; bottom: auto; }
.qty_cart_badge.qty_cart_hide { display: none; }
@media (max-width: 767px) {
  /* fila móvil visible-xs: los 3 widgets se reparten el ancho, con el mismo estilo */
  #shippingcondition-displayTop { justify-content: space-between; padding: 6px 0; }
  #shippingcondition-displayTop > .flex-xs, #shippingcondition-displayTop > .btn-group { flex: 1 1 0; min-width: 0; padding: 2px 6px; }
  #shippingcondition-displayTop > a.flex-xs, #shippingcondition-displayTop > div.flex-xs, #shippingcondition-displayTop .btn-group > a[data-type] { flex-direction: column; gap: 3px; width: 100%; text-align: center; }
  #shippingcondition-displayTop i.fa { width: 26px; height: 26px; }
  #shippingcondition-displayTop .text-xs { font-size: 11px; max-width: 100%; text-align: center; }
  #shippingcondition-displayTop .text-xs strong { white-space: normal; }
  #shippingcondition-displayTop .dropdown-menu { left: 50%; right: auto; transform: translateX(-50%); }
  /* carrito en la fila movil del header: solo el icono con su contador; la etiqueta no cabe junto al buscador */
  #blockcart-displayTop { border-left: 0; padding: 4px 0 4px 6px; gap: 0; }
  #blockcart-displayTop .text-xs { display: none; }
}

/* Buscador redondeado (categorysearch: #search_block_top form#searchbox = select#search_category + button#submit_search + input#search_query_top).
   Acuerdo con AG (sesion 25-sep, visual de Anthony Avila): SIN el desplegable de categorias, solo [lupa] [campo]. El select se oculta
   por CSS y sigue en el formulario: nunca viene preseleccionado (categorysearch.php::getCategoryOption no marca selected), asi que
   siempre envia search_category=0 = "Todas las categorias" y la busqueda funciona igual que antes. No se toca el modulo (archivos de common).
   El select lo envuelve uniform (div.selector#uniform-search_category): se ocultan los dos. */
#search_block_top { margin: 0; padding: 0; float: none; width: 100%; }
#search_block_top form#searchbox {
  display: flex; align-items: center; height: 52px; margin: 0; padding: 0 8px 0 4px; background: #fff; border: 1px solid var(--ag-line);
  border-radius: 26px; box-shadow: 0 2px 8px rgba(8, 42, 88, .05); transition: box-shadow .15s, border-color .15s;
}
#search_block_top form#searchbox:focus-within { border-color: var(--ag-cyan); box-shadow: 0 0 0 3px rgba(0, 178, 255, .15); }
#search_block_top form#searchbox .selector,
#search_block_top form#searchbox #uniform-search_category,
#search_block_top form#searchbox select#search_category { display: none !important; }
/* lupa dentro de un circulo tenue a la izquierda, como la visual acordada */
#search_block_top form#searchbox #submit_search,
#search_block_top form#searchbox .button-search {
  order: 1; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--ag-chip); color: var(--ag-navy); box-shadow: none; text-shadow: none; transition: background .15s;
}
#search_block_top form#searchbox #submit_search:hover, #search_block_top form#searchbox #submit_search:focus { background: #D8E7FB; outline: none; }
#search_block_top form#searchbox #submit_search .icon-search,
#search_block_top form#searchbox #submit_search .fa {
  display: block; width: 22px; height: 22px; font-size: 0; line-height: 0; background-color: var(--ag-navy);
  -webkit-mask: url(../img/ui/lupa.svg) center / contain no-repeat; mask: url(../img/ui/lupa.svg) center / contain no-repeat;
}
#search_block_top form#searchbox #submit_search .icon-search:before, #search_block_top form#searchbox #submit_search .fa:before { content: none; }
#search_block_top form#searchbox #search_query_top {
  order: 2; flex: 1 1 auto; display: block; width: auto; min-width: 0; height: 36px; margin: 0; padding: 0 12px 0 14px; border: 0 !important;
  border-radius: 0; background: transparent; box-shadow: none; font: 400 15px/36px var(--ag-font); color: var(--ag-ink); text-shadow: none;
}
#search_block_top form#searchbox #search_query_top:focus { outline: none; box-shadow: none; }
#search_block_top form#searchbox #search_query_top::placeholder { color: #9AA3AF; opacity: 1; }
#search_block_top form#searchbox #search_query_top::-webkit-input-placeholder { color: #9AA3AF; }
#search_block_top form#searchbox #search_query_top:-ms-input-placeholder { color: #9AA3AF; }
@media (max-width: 767px) {
  #search_block_top form#searchbox { height: 46px; border-radius: 23px; padding-left: 3px; }
  #search_block_top form#searchbox #submit_search { width: 38px; height: 38px; }
  #search_block_top form#searchbox #search_query_top { font-size: 14px; }
}

/* ---- C09 · Panel de familias (menú vertical iqitmegamenu, ul absoluto bajo el botón "Categorías") ----
   Misma mecánica del módulo: mouseover → .cbp-vert-expanded muestra el ul; hoverIntent en cada familia → .cbp-hropen
   abre el flyout .cbp-hrsub-wrapper con las SubFamilias (segundo nivel); click en la familia → su página de listado.
   Aquí solo se viste: tarjeta blanca, icono de familia por slug de la URL (portable QA/PRD: los id_tab difieren), chevron. */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top > .cbp-vertical > ul {
  top: calc(100% + 20px); left: 0; width: 264px; margin: 0; padding: 6px 0; background: #fff; border: 1px solid #EEF2F7 !important;
  border-radius: 16px; box-shadow: var(--ag-shadow) !important; transition: opacity .15s, visibility .15s; z-index: 1001;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li { float: none; display: block; width: 100%; position: relative; }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > span.cbp-main-link {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 40px 10px 16px !important; margin: 0;
  color: var(--ag-navy); font: 600 14px/1.25 var(--ag-font); text-transform: none; border: 0 !important; background: transparent; transition: background .15s;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a > span { flex: 1 1 auto; min-width: 0; }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a:hover,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a:focus,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li.cbp-hropen > a { background: var(--ag-chip); color: var(--ag-navy); text-decoration: none; }
/* icono de la familia (10 iconos de la agencia: 8 del paquete 2 + Laminas de techo y Trefilados del 25-sep) — clave = slug de la URL, no id_tab.
   PRD verificado 25-sep: /471-lamina-de-techo y /450-trefilados. "-lamina-de-techo" va DESPUES de "-lamina" (misma especificidad, gana por orden). */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a:before {
  content: ""; display: inline-block; flex: none; width: 28px; height: 28px; background-color: var(--ag-navy);
  -webkit-mask: url(../img/ui/categorias.svg) center / contain no-repeat; mask: url(../img/ui/categorias.svg) center / contain no-repeat;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-lamina"]:before { -webkit-mask-image: url(../img/ui/cat-lamina.svg); mask-image: url(../img/ui/cat-lamina.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-lamina-de-techo"]:before,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-laminas-de-techo"]:before { -webkit-mask-image: url(../img/ui/cat-lamina-techo.svg); mask-image: url(../img/ui/cat-lamina-techo.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-perfiles"]:before { -webkit-mask-image: url(../img/ui/cat-perfiles.svg); mask-image: url(../img/ui/cat-perfiles.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-prefabricados"]:before { -webkit-mask-image: url(../img/ui/cat-prefabricados.svg); mask-image: url(../img/ui/cat-prefabricados.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-transmetal"]:before { -webkit-mask-image: url(../img/ui/cat-transmetal.svg); mask-image: url(../img/ui/cat-transmetal.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-tuberia"]:before { -webkit-mask-image: url(../img/ui/cat-tuberia.svg); mask-image: url(../img/ui/cat-tuberia.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-varilla-corrugada"]:before { -webkit-mask-image: url(../img/ui/cat-varilla-corrugada.svg); mask-image: url(../img/ui/cat-varilla-corrugada.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-varilla-lisa"]:before { -webkit-mask-image: url(../img/ui/cat-varilla-lisa.svg); mask-image: url(../img/ui/cat-varilla-lisa.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-trefilados"]:before { -webkit-mask-image: url(../img/ui/cat-trefilados.svg); mask-image: url(../img/ui/cat-trefilados.svg); }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a[href*="-vigas"]:before { -webkit-mask-image: url(../img/ui/cat-vigas.svg); mask-image: url(../img/ui/cat-vigas.svg); }
/* chevron "›" (el módulo pone i.icon-angle-right absoluto a la derecha) */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a .cbp-submenu-aindicator {
  position: absolute; right: 16px; top: 50%; margin: 0; width: 16px; height: 16px; transform: translateY(-50%); font-size: 0; line-height: 0;
  background-color: var(--ag-gray); -webkit-mask: url(../img/ui/flecha-carrusel.svg) center / contain no-repeat; mask: url(../img/ui/flecha-carrusel.svg) center / contain no-repeat;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a .cbp-submenu-aindicator:before { content: none; }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li > a:hover .cbp-submenu-aindicator,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical > ul > li.cbp-hropen > a .cbp-submenu-aindicator { background-color: var(--ag-navy); }
/* Flyout de SubFamilias (segundo nivel): misma tarjeta; el triángulo del módulo se oculta */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub .cbp-triangle-container { display: none; }
/* La tarjeta se ajusta al nombre mas largo (PRD trae subfamilias largas en mayusculas, p. ej. "LAMINA DE TECHO TROQUELADA AZN PREPINTADO",
   que con el ancho fijo col-xs-3 del modulo se salian de la tarjeta). Tope de 460 px: lo que exceda se parte en dos lineas. */
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub { width: auto !important; }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub-inner {
  box-sizing: border-box; width: max-content; min-width: 280px; max-width: 460px;
  margin-left: 10px; padding: 14px 12px; background: #fff; border: 1px solid #EEF2F7 !important; border-radius: 16px; box-shadow: var(--ag-shadow) !important;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub-inner .cbp-categories-row { margin-top: 0; }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub-inner .cbp-categories-row > div { margin-top: 2px; }
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub-inner .cbp-column-title,
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub-inner a.cbp-column-title:link {
  display: block; padding: 9px 12px !important; border: 0 !important; border-radius: 8px; font: 500 14px/1.3 var(--ag-font) !important;
  color: var(--ag-ink) !important; text-transform: none; white-space: normal; transition: background .15s;
}
.full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical .cbp-hrsub-inner a.cbp-column-title:hover { background: var(--ag-chip); color: var(--ag-navy) !important; text-decoration: none; }
/* En la HOME (≥1200, contenedor de 1170) el panel queda FIJO a la izquierda del hero, como el mockup de la agencia; no se pliega al salir el puntero.
   El módulo lo vuelve a esconder si el menú se hace sticky (.cbp-sticky) salvo que esté expandido por hover. */
@media (min-width: 1200px) {
  body#index .full_area_bottom_header #iqitmegamenu-horizontal:not(.cbp-sticky) .cbp-vertical-on-top > .cbp-vertical > ul { visibility: visible; opacity: 1; }
  body#index #top_column.ag-top { padding-left: 278px; } /* 264 (panel, nace en el borde del .container) + 14 (gap) */
  body#index #top_column.ag-top.ag-top--full { padding-left: 15px; } /* perfil 0071: el panel no existe (header.tpl lo oculta) */
  /* Panel a la ALTURA DEL BANNER (Marketing AG, 26-sep: sin espacio bajo el banner con las 10 familias de PRD).
     js/ui-fase2.js fija la altura del ul = fondo del banner y agrega .ag-fit; las filas se reparten esa altura (flex).
     8 familias (QA) quedan en ~44 px por fila; 10 (PRD) en ~35 px. Si no cupieran con el minimo de 34 px por fila,
     el JS quita .ag-fit y vuelve al comportamiento anterior (el carrusel espera al panel). El banner no se estira. */
  body#index .full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top > .cbp-vertical > ul.ag-fit {
    display: flex; flex-direction: column; box-sizing: border-box; overflow: visible;
  }
  body#index .full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top > .cbp-vertical > ul.ag-fit > li { flex: 1 0 auto; display: block; min-height: 34px; } /* bloque: el flyout del modulo se ubica con margin-top:-altura de la fila */
  body#index .full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top > .cbp-vertical > ul.ag-fit > li > a {
    box-sizing: border-box; height: 100%; min-height: 0; padding-top: 2px !important; padding-bottom: 2px !important; line-height: 1.15;
  }
}

/* Barra de accesos en 992–1199 (contenedor de 970): padding menor para que Categorías + 5 accesos quepan en una sola línea */
@media (min-width: 992px) and (max-width: 1199px) {
  .full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul { gap: 10px; }
  .full_area_bottom_header #cbp-hrmenu.cbp-horizontal > ul > li.cbp-hrmenu-tab > a { padding: 13px 14px; font-size: 14px; }
  .full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-title { padding: 0 14px !important; font-size: 14px !important; }
  .full_area_bottom_header #iqitmegamenu-horizontal .cbp-vertical-on-top { margin-right: 10px; }
}

/* ---- C10 · Hero banner (components/home-hero.tpl) ---- */
body#index #top_column.ag-top { display: flex; align-items: flex-start; padding-top: 0; padding-bottom: 10px; } /* el tope del hero = tope del panel (boton + 20 px) */
body#index #top_column.ag-top > .ag-hero { flex: 1 1 auto; width: 100%; min-width: 0; }
.ag-hero { position: relative; overflow: hidden; border-radius: 16px; background: var(--ag-navy); box-shadow: var(--ag-shadow); }
.ag-hero__track { position: relative; width: 100%; }
.ag-hero__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 0; transition: opacity .6s ease; }
.ag-hero__slide.is-active { position: relative; opacity: 1; z-index: 1; }
.ag-hero__link { display: block; }
.ag-hero__slide picture, .ag-hero__slide img { display: block; width: 100%; height: auto; }
.ag-hero__arrow {
  position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  transform: translateY(-50%); border: 1px solid var(--ag-line); border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(8, 42, 88, .18); cursor: pointer; opacity: .94; transition: opacity .15s, background .15s;
}
.ag-hero__arrow:hover, .ag-hero__arrow:focus { opacity: 1; background: var(--ag-chip); outline: none; }
.ag-hero__arrow--prev { left: 14px; }
.ag-hero__arrow--next { right: 14px; }
.ag-hero__arrow:before {
  content: ""; display: block; width: 28px; height: 28px; background-color: var(--ag-navy);
  -webkit-mask: url(../img/ui/flecha-carrusel.svg) center / contain no-repeat; mask: url(../img/ui/flecha-carrusel.svg) center / contain no-repeat;
}
.ag-hero__arrow--prev:before { transform: scaleX(-1); }
.ag-hero__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.ag-hero__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: background .15s, transform .15s; }
.ag-hero__dot.is-active, .ag-hero__dot:hover { background: var(--ag-yellow); transform: scale(1.15); }
.ag-hero--single .ag-hero__arrow, .ag-hero--single .ag-hero__dots { display: none; }
@media (max-width: 767px) {
  .ag-hero { border-radius: 12px; }
  .ag-hero__arrow { width: 36px; height: 36px; }
  .ag-hero__arrow--prev { left: 8px; }
  .ag-hero__arrow--next { right: 8px; }
  .ag-hero__arrow:before { width: 18px; height: 18px; }
  .ag-hero__dots { bottom: 8px; }
}

/* ---- C11 · Carrusel "Productos más comprados" (hicarouselspack id 34, Owl 2 fork CPowlCarousel) ---- */
body#index .carousels-pack-block { margin: 26px 0 6px; }
body#index .carousels-pack-block .text-4xl.font-bold.primary-color.text-center { text-align: left; margin: 0 0 18px; padding: 0 2px; font: 700 22px/1.2 var(--ag-font); color: var(--ag-navy); }
body#index .carousels-pack-block .secondary-pleca { width: 48px; height: 4px; margin: 8px 0 0; border-radius: 2px; background: var(--ag-yellow); }
.carousels-pack { position: relative; padding: 0; }
.carousels-pack .owl-stage-outer { padding: 4px 2px 8px; }
.carousels-pack .owl-stage { display: flex; }
.carousels-pack .owl-item { display: flex; }
.carousels-pack li.ajax_block_product, .carousels-pack .owl-item > li { width: 100%; padding: 0; margin: 0; list-style: none; }
.carousels-pack li.ajax_block_product .product-container {
  display: flex; flex-direction: column; height: 100%; padding: 14px 14px 16px; background: #fff; border: 1px solid var(--ag-line);
  border-radius: 12px; box-shadow: none; text-align: left; transition: box-shadow .15s, border-color .15s;
}
.carousels-pack li.ajax_block_product:hover .product-container { border-color: #DCE3EC; box-shadow: var(--ag-shadow-sm); }
.carousels-pack .left-block, .carousels-pack .right-block { padding: 0; }
.carousels-pack .product-image-container { position: relative; margin: 0 0 12px; padding: 8px; border: 0; border-radius: 8px; background: #F8FAFC; }
.carousels-pack .product-image-container .product_img_link { display: block; height: 150px; }
.carousels-pack .product-image-container .product_img_link img { width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; }
.carousels-pack .right-block .height-limit { min-height: 38px; max-height: none; overflow: visible; }
.carousels-pack .right-block .height-limit a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.35 var(--ag-font); color: var(--ag-navy); }
.carousels-pack .right-block .product-desc { display: none; }
.carousels-pack .right-block .content_price p { margin: 6px 0 0; font: 500 13px/1.3 var(--ag-font); color: var(--ag-muted); }
.carousels-pack .right-block .content_price p .fa { color: var(--ag-muted); }
.carousels-pack .right-block .button-container { margin-top: auto; padding-top: 12px; }
.carousels-pack .right-block .button-container .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; border: 0; border-radius: 999px;
  background: var(--ag-yellow); color: var(--ag-navy); font: 600 13px/1.2 var(--ag-font); box-shadow: none; transition: filter .15s;
}
.carousels-pack .right-block .button-container .btn-primary:hover { filter: brightness(.96); }
.carousels-pack .right-block .button-container .btn-primary .fa { color: var(--ag-navy); }
/* flechas circulares (FLECHA CARRUSEL de la agencia) y puntos */
.carousels-pack .owl-nav { margin: 0; }
.carousels-pack .owl-nav .owl-prev, .carousels-pack .owl-nav .owl-next {
  position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
  transform: translateY(-50%); border: 1px solid var(--ag-line); border-radius: 50%; background: #fff; color: transparent; font-size: 0; line-height: 0;
  box-shadow: 0 4px 14px rgba(8, 42, 88, .18); cursor: pointer; transition: background .15s;
}
.carousels-pack .owl-nav .owl-prev { left: -22px; }
.carousels-pack .owl-nav .owl-next { right: -22px; }
.carousels-pack .owl-nav .owl-prev:hover, .carousels-pack .owl-nav .owl-next:hover { background: var(--ag-chip); color: transparent; }
.carousels-pack .owl-nav .owl-prev:before, .carousels-pack .owl-nav .owl-next:before {
  content: ""; display: block; width: 28px; height: 28px; background-color: var(--ag-navy);
  -webkit-mask: url(../img/ui/flecha-carrusel.svg) center / contain no-repeat; mask: url(../img/ui/flecha-carrusel.svg) center / contain no-repeat;
}
.carousels-pack .owl-nav .owl-prev:before { transform: scaleX(-1); }
.carousels-pack .owl-nav .disabled { opacity: .35; cursor: default; }
.carousels-pack .owl-dots { margin-top: 4px; }
.carousels-pack .owl-dots .owl-dot span { width: 8px; height: 8px; margin: 4px; background: var(--ag-line); }
.carousels-pack .owl-dots .owl-dot.active span, .carousels-pack .owl-dots .owl-dot:hover span { background: var(--ag-yellow); }
@media (max-width: 767px) {
  body#index .carousels-pack-block .text-4xl.font-bold.primary-color.text-center { font-size: 19px; }
  .carousels-pack .owl-nav .owl-prev { left: 2px; }
  .carousels-pack .owl-nav .owl-next { right: 2px; }
  .carousels-pack .product-image-container .product_img_link { height: 120px; }
}