/* Start custom CSS for shortcode, class: .elementor-element-46771 */@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600&display=swap');

:root{
  --brand-card-max: 160px;        /* ancho base del logo en móvil (carrusel) */
  --brand-pad-x: 12px;
  --brand-logo-radius: 8px;
  --brand-logo-bg: #ffffff;
  --brand-hover-bg: #ffffff;
  --brand-card-border: none;      /* ej: 1px solid #e9eef5 */
  --brand-card-radius: 5px;
  --brand-card-shadow: none;      /* ej: 0 4px 10px rgba(0,0,0,.06) */
  --brand-active-border: #E4002B;
  --brand-active-bg: #ffffff;
  --brand-gap: 12px;
}

/* ===== Estilos compartidos ===== */
.brand-vertical-proxy{
  width:100%; max-width:100%; overflow-x:hidden;
  padding:0 var(--brand-pad-x);
}
.brand-vertical-proxy .bp-item.is-active{
  border:2px solid var(--brand-active-border);
  background:var(--brand-active-bg);
  border-radius:var(--brand-card-radius);
}
.brand-vertical-proxy .brand-img{
  display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:contain; background:var(--brand-logo-bg);
  border-radius:var(--brand-logo-radius);
}
/* Mostrar SOLO el texto del primer item (Todas las marcas) */
.brand-vertical-proxy .bp-list > li:not(:first-child) .brand-label{ display:none !important; }
.brand-vertical-proxy .bp-list > li:first-child .brand-label{
  display:block !important; text-align:center; font-weight:500; color:#111;mmargin-top:20px; 
}

/* ===== HORIZONTAL ===== */
.brand-vertical-proxy.brand-proxy--horizontal .bp-list{
  list-style:none; margin:0; padding:0 6px 8px;
  display:flex; flex-direction:row; flex-wrap:nowrap;
  gap:var(--brand-gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  align-items:stretch;
}
.brand-vertical-proxy.brand-proxy--horizontal .bp-item{
  flex:0 0 var(--brand-card-max);
  max-width:var(--brand-card-max);
  margin:0; padding:0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  border:var(--brand-card-border);
  border-radius:var(--brand-card-radius);
  box-shadow:var(--brand-card-shadow);
  background:transparent;
  transition:background .15s;
  scroll-snap-align:center;
}
.brand-vertical-proxy.brand-proxy--horizontal .bp-item:hover{
  background:var(--brand-hover-bg);
}
/* Scrollbar opcional (WebKit) */
.brand-vertical-proxy.brand-proxy--horizontal .bp-list::-webkit-scrollbar{ height:10px; }
.brand-vertical-proxy.brand-proxy--horizontal .bp-list::-webkit-scrollbar-thumb{ background:#c9ccd1; border-radius:8px; }
.brand-vertical-proxy.brand-proxy--horizontal .bp-list::-webkit-scrollbar-track{ background:transparent; }

/* Desktop: cambia a grid centrado (2 por fila; ajusta si quieres) */
@media (min-width: 992px){
  .brand-vertical-proxy.brand-proxy--horizontal .bp-list{
    padding:0;
    overflow-x:hidden;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--brand-gap);
  }
  .brand-vertical-proxy.brand-proxy--horizontal .bp-item{
    flex:0 1 calc(50% - var(--brand-gap));
    max-width:calc(50% - var(--brand-gap));
  }
  /* Para 3 por fila: usa 33.33%; para 4 por fila: 25% */
  /* .brand-vertical-proxy.brand-proxy--horizontal .bp-item{ flex:0 1 calc(33.33% - var(--brand-gap)); max-width:calc(33.33% - var(--brand-gap)); } */
}

/* ===== VERTICAL ===== */
.brand-vertical-proxy.brand-proxy--vertical .bp-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px; align-items:center;
}
.brand-vertical-proxy.brand-proxy--vertical .bp-item{
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:var(--brand-card-max);
  margin:0 auto; padding:0; min-width:0;
  background:transparent;
  border:var(--brand-card-border);
  border-radius:var(--brand-card-radius);
  box-shadow:var(--brand-card-shadow);
  transition:background .15s;
}
.brand-vertical-proxy.brand-proxy--vertical .bp-item:hover{
  background:var(--brand-hover-bg);
}

/* ===== Separar el primer ítem ("Todas las marcas") del borde superior ===== */
.brand-vertical-proxy .bp-list > li:first-child {
  margin-top: 10px;       /* espacio superior */
}

.brand-vertical-proxy .bp-list > li:first-child .bp-item {
  padding-top: 6px;       /* pequeño relleno interno */
}

/* ===== Opcional: hacer que el texto tenga más espacio alrededor ===== */
.brand-vertical-proxy .bp-list > li:first-child .brand-label {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  background: #ffffff;    /* fondo blanco o ajusta según tu tema */
  color: #111;
  box-shadow: 0 0 3px rgba(0,0,0,0.05);
}/* End custom CSS */