/* ---------- CATEGORÍAS HOME: 5 columnas desktop | 1 columna móvil ---------- */

/* El contenedor ocupa el 95 % del ancho de la pantalla */
.section-categories-index .container{
    max-width:95% !important;
    width:95% !important;
    margin:0 auto !important;
}

/* ► Desktop (≥ 768 px): una sola fila con 5 columnas */
@media (min-width:768px){
    /* Forzamos una única fila */
    .section-categories-index .row{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:space-between;
    }
    /* Cada columna ocupa el 20 % (100 / 5) */
    .section-categories-index .row > .col-md-6{
        flex:0 0 20% !important;
        max-width:20% !important;
    }
}

/* ► Móvil (< 768 px): una categoría debajo de la otra */
@media (max-width:767.98px){
    .section-categories-index .row{
        display:block !important;   /* Flujo vertical */
    }
    .section-categories-index .row > .col-md-6{
        width:100% !important;
        max-width:100% !important;
    }
}

/* Las imágenes llenan su contenedor sin deformarse */
.section-categories-index_item img{
    width:100%;
    height:auto;
    object-fit:contain;
}
/*  ↓ 1 pt en la tipografía de los botones sobre las imágenes  */
.section-categories-index .btn-outline-primary__custom{
    font-size: calc(100% - 1pt) !important;
}

/* ---------- FIN CATEGORÍAS HOME: 5 columnas desktop | 1 columna móvil ---------- */

/* ---------- HEADER ---------- */
/* 1. Asegura que todo el header sea el “lienzo” de la franja negra */
.page-header {                     /* selector del header principal */
    position: relative;
}

/* 2. Dibuja una pseudo-capa negra que cubra TODO el ancho y la misma altura
      de la .top-bar, colocándola *detrás* del contenido */
.page-header::before {
    content: "";
    position: absolute;
    top: 0;                       /* arranca en el borde superior */
    left: 0;
    width: 100%;
    height: 38px;                 /* misma altura que .top-bar */
    background: #000;             /* color del preheader */
    z-index: 0;                   /* por detrás de los demás elementos */
}

/* 3. Eleva la .top-bar para que quede por encima de la pseudo-capa */
.top-bar {
    position: relative;
    z-index: 2;
}

/* 4. Quita el fondo blanco que provoca el “corte” */
.logo__container {
    background: transparent !important;
    position: relative;
    z-index: 1;                   /* encima de la pseudo-capa, debajo de .top-bar */
}

/* 5. (Opcional) Sólo en escritorio; en móvil podría no hacer falta */
@media (max-width: 991.98px) {
    .page-header::before {
        display: none;            /* ajusta según tu diseño mobile */
    }
}
/* ---------- FIN HEADER ---------- */

/* ---------- LOGOTIPO ---------- */
/* 1 - Reiniciamos el margen que habíamos agregado */
.logo__container{
    margin-top: 0 !important;        /* quita el salto grande */
    padding: 16px 0 0 0;                  /* aire simétrico arriba-abajo (≈6 px) */
    display: flex;                   /* centrado vertical real */
    align-items: center;
}

/* 2 - Limitamos la altura máxima del logo para que no toque bordes */
.logo__container img{
    max-height: 64px;                /* ajústalo a tu gusto: 56–68 px suele ir bien */
    height: auto;
    width: auto;                     /* evita distorsión */
}

/* 3 - Nos aseguramos de que el resto del header siga alineado */
.header-main,        /* o el contenedor que envuelva logo+nav */
.navbar,             /* depende de tu plantilla */
.header-content{
    display: flex;
    align-items: center;             /* todo el bloque centrado vertical */
}

/* 4 - Opcional: en pantallas pequeñas reducimos aún más el logo */
@media (max-width: 991.98px){
    .logo__container{
        padding: 4px 0;              /* un poco menos de aire en mobile */
    }
    .logo__container img{
        max-height: 48px;
    }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::FORM HOME FILTROS :::::::::::::::::::::::::::::::::::::::::*/

:root{
  --rmc-yellow:#FFD400;
  --rmc-dark:#0F1114;
  --rmc-ink:#2B2E34;
  --rmc-line:#E2E7EF;
  --rmc-panel:#F3F3F4; 
  --rmc-radius:14px;
  --rmc-field-h:52px;
}

/* Contenedor del formulario */
section.angulo-content form[data-section="filtros-atributos-home"]{
  max-width:1100px;
  margin:-18px auto 28px;
  padding:16px 18px;
  background:var(--rmc-panel);          /* <- gris azulado */
  border:1px solid var(--rmc-line);
  border-radius:var(--rmc-radius);
  box-shadow:0 10px 26px rgba(15,17,20,.06);
}

/* Eliminar la línea amarilla decorativa previa */
section.angulo-content form[data-section="filtros-atributos-home"]::after{
  content:none !important;
  display:none !important;
}

/* Espaciado columnas */
form[data-section="filtros-atributos-home"] .form-group{ margin-bottom:12px; }

/* ===== Selects (bootstrap-multiselect) ===== */
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select{
  display:flex !important; align-items:center; justify-content:space-between; gap:8px;
  height:var(--rmc-field-h); line-height:var(--rmc-field-h);
  padding:0 16px;
  border-radius:999px !important;                 /* píldora */
  border:2px solid var(--rmc-line) !important;
  background:#fff !important;
  color:var(--rmc-ink) !important;
  font-weight:600; letter-spacing:.2px;
  box-shadow:none !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select:hover{
  border-color:#D6DCE6 !important;
}
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select:focus{
  border-color:var(--rmc-yellow) !important;
  box-shadow:0 0 0 3px rgba(255,212,0,.35) !important;
  outline:none !important;
}
form[data-section="filtros-atributos-home"] .multiselect-selected-text{
  width:100%; text-align:left; font-size:15px;
}

/* Dropdown */
form[data-section="filtros-atributos-home"] .multiselect-container.dropdown-menu{
  border-radius:12px; border:1px solid #E3E7EF; padding:8px 0 6px;
  box-shadow:0 16px 40px rgba(0,0,0,.12); max-height:280px; overflow:auto; z-index:1055;
}
form[data-section="filtros-atributos-home"] .multiselect-container .dropdown-item{
  padding:8px 14px; font-size:14px;
}
form[data-section="filtros-atributos-home"] .multiselect-container .dropdown-item:hover{
  background:rgba(255,212,0,.12);
}

/* ===== Botón Buscar ===== */
form[data-section="filtros-atributos-home"] .boton-especial{
  height:var(--rmc-field-h);
  line-height:calc(var(--rmc-field-h) - 4px);
  padding:0 28px !important;
  border-radius:999px !important;                 /* igual de redondeado que el hover */
  border:2px solid var(--rmc-yellow) !important;  /* borde amarillo */
  background:var(--rmc-yellow) !important;        /* default amarillo */
  color:var(--rmc-dark) !important;
  font-weight:800; letter-spacing:.3px;
  box-shadow:0 8px 18px rgba(255,212,0,.35);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
form[data-section="filtros-atributos-home"] .boton-especial i{ margin-right:6px; }

/* Hover negro */
form[data-section="filtros-atributos-home"] .boton-especial:hover{
  background:var(--rmc-dark) !important;
  border-color:var(--rmc-dark) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(15,17,20,.25);
}
form[data-section="filtros-atributos-home"] .boton-especial:active{
  transform:translateY(1px);
}

/* ===== Responsive 100% ===== */
@media (max-width:991.98px){
  section.angulo-content form[data-section="filtros-atributos-home"]{
    margin:10px 12px 22px; padding:12px;
  }
}
@media (max-width:575.98px){
  :root{ --rmc-field-h:48px; }
  /* selects y botón a 100% de ancho en mobile */
  form[data-section="filtros-atributos-home"] .btn-group,
  form[data-section="filtros-atributos-home"] .btn-group > .multiselect.dropdown-toggle.custom-select{
    width:100%;
  }
  form[data-section="filtros-atributos-home"] .boton-especial{
    width:100%;
    padding:0 22px !important;
  }
}



/* ====== Remincor | Filtros: radios uniformes de 10px ====== */
:root{
  --rmc-radius: 10px; /* unifica radios */
}

/* Contenedor */
section.angulo-content form[data-section="filtros-atributos-home"]{
  border-radius: var(--rmc-radius) !important;
}

/* Select del plugin (antes era pill/999px) */
form[data-section="filtros-atributos-home"] 
.btn-group > .multiselect.dropdown-toggle.custom-select{
  border-radius: var(--rmc-radius) !important;
}

/* Menú desplegable */
form[data-section="filtros-atributos-home"] 
.multiselect-container.dropdown-menu{
  border-radius: var(--rmc-radius) !important;
}

/* Buscador dentro del dropdown e inputs genéricos */
form[data-section="filtros-atributos-home"] .multiselect-filter .form-control,
form[data-section="filtros-atributos-home"] .multiselect-filter .input-group-text,
form[data-section="filtros-atributos-home"] .form-control,
form[data-section="filtros-atributos-home"] .custom-select{
  border-radius: var(--rmc-radius) !important;
}

/* Botón Buscar (antes era pill/999px) */
form[data-section="filtros-atributos-home"] .boton-especial{
  border-radius: var(--rmc-radius) !important;
}

/* Mobile: por si el tema cambia estilos en breakpoints */
@media (max-width: 575.98px){
  form[data-section="filtros-atributos-home"] 
  .btn-group > .multiselect.dropdown-toggle.custom-select,
  form[data-section="filtros-atributos-home"] .boton-especial{
    border-radius: var(--rmc-radius) !important;
  }
}

/*:::::::::::::::::::::::::::::::::::::::::::::::::::FIN FORM HOME FILTROS :::::::::::::::::::::::::::::::::::::::::*/

/* Quitar espacio superior de la sección de categorías */
.categories.section-categories-index,
.section-categories-index{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Por si la plantilla agrega espacio dentro del container/row */
.section-categories-index .container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.section-categories-index .row{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Asegura que el primer item no empuje hacia abajo */
.section-categories-index .section-categories-index_item{
  margin-top: 0 !important;
  padding-top: 0 !important;
}