.elementor-2802 .elementor-element.elementor-element-9d89dfb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for shortcode, class: .elementor-element-fd123b5 *//* ====== HEADER VIVAGOP – SIN BUSCADOR ====== */
:root{
  --vgx-bg:#000; --vgx-fg:#fff; --vgx-muted:#b3b3b3; --vgx-accent:#2f6df6;
  --vgx-headerH:64px;
}

/* Reset local */
.vgx-header, .vgx-header *{ box-sizing:border-box }
.vgx-header{ all:unset; display:block; width:100vw; background:var(--vgx-bg); color:var(--vgx-fg); position:relative; z-index:50 }

/* Fila principal: logo a la izquierda, iconos a la derecha */
.vgx-row{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--vgx-headerH); padding:8px 12px; gap:16px;
}

/* Logo */
.vgx-logo{ display:flex; align-items:center; line-height:0 }
.vgx-logo img{ height:42px; width:auto; display:block } /* ajusta 42→48 si quieres más grande */

/* Acciones (chips + iconos) */
.vgx-actions{ display:flex; align-items:center; gap:12px }
.vgx-chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 14px; border-radius:999px;
  background:#1a1a1a; color:#e0e0e0; text-decoration:none; font-weight:700;
}
.vgx-iconbtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:46px; width:46px; border-radius:50%; background:#181818; color:#fff; text-decoration:none;
}
.vgx-iconbtn:hover{ background:#242424 }
.vgx-iconbtn svg{ stroke:#fff; fill:#fff }
.vgx-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#2f6df6; color:#fff; font-size:11px; line-height:18px; text-align:center;
}

/* Quita márgenes/padding de contenedores Elementor alrededor */
.elementor-section .elementor-container,
.elementor-section,.elementor-column,.elementor-widget-container{ margin:0!important; padding:0!important }
.elementor-container{ max-width:100%!important }

/* Responsive */
@media (max-width:768px){
  .vgx-row{ padding:8px 10px }
  .vgx-logo img{ height:36px }
  .vgx-iconbtn{ height:42px; width:42px }
  .vgx-chip{ height:34px; padding:0 12px; font-size:12px }
}
/* === LOGO MÁS GRANDE === */
.vgx-logo img{
  height: 68px !important;   /* puedes subir a 60px si quieres más grande */
  width: auto !important;
}
/* Ocultar ES / USD en versión móvil */
@media (max-width: 768px){
  .vgx-chip {
    display: none !important;
  }
}
/* === ICONOS MUY OSCUROS → hacerlos BLANCOS y visibles === */
.vgx-iconbtn svg {
  stroke: #ffffff !important;
  fill: #ffffff !important;
  opacity: 1 !important;
}

/* Círculos más claros para mejor contraste */
.vgx-iconbtn {
  background: #2b2b2b !important;
}

/* Hover azul estilo marketplace */
.vgx-iconbtn:hover {
  background: #2f6df6 !important;
  transform: scale(1.08);
  transition: .2s ease;
}

/* === EL CARRITO ESTÁ MUY PEGADO A LA ORILLA → damos espacio === */
.vgx-actions {
  padding-right: 22px !important;      /* separa todos los iconos de la orilla */
}

.vgx-actions .vgx-iconbtn:last-child {
  margin-right: 10px !important;       /* carrito aún más adentro */
}

/* Badge del carrito (contador de productos) */
.vgx-badge {
  background: #2f6df6 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  top: -5px !important;
  right: -6px !important;
}
/* ====== ICONOS TOTALMENTE BLANCOS (SVG completo) ====== */
.vgx-iconbtn svg,
.vgx-iconbtn svg * {
  stroke: #ffffff !important;  /* líneas blancas */
  fill: #ffffff !important;    /* relleno blanco */
}

/* fondo de los círculos más visible */
.vgx-iconbtn {
  background: #2a2a2a !important;
}

/* hover iluminado azul */
.vgx-iconbtn:hover {
  background: #2f6df6 !important;
  transition: .25s ease;
  transform: scale(1.08);
}

/* chip idioma */
.vgx-chip {
  background:#222 !important;
  color:#ffffff !important;
}

/* badge y contador azul */
.vgx-badge {
  background:#2f6df6 !important;
  color:#ffffff !important;
}
/* ==== ICONOS ESTILO PROFESIONAL: solo líneas blancas, sin relleno ==== */

/* Fondo de circulo */
.vgx-iconbtn {
  background: #2b2b2b !important;
}

/* Los íconos: stroke blanco, sin fill */
.vgx-iconbtn svg,
.vgx-iconbtn svg * {
  stroke: #ffffff !important;   /* líneas blancas */
  fill: none !important;        /* sin relleno */
  stroke-width: 2 !important;
}

/* Efecto hover profesional */
.vgx-iconbtn:hover {
  background: #2f6df6 !important;   /* azul */
  transform: scale(1.08);
  transition: .25s ease;
}

/* Badge (carrito + wallet) */
.vgx-badge {
  background: #2f6df6 !important;
  color: #ffffff !important;
}
/* ===== Ajustes SOLO en móvil para toolbar de iconos ===== */
@media (max-width: 768px){
  /* Fila: respira un poco pero sin desordenar */
  .vgx-row{ gap:14px; padding:8px 10px; }

  /* Grupo de iconos: espaciado uniforme y sin empujar demasiado hacia adentro */
  .vgx-actions{
    display:flex; align-items:center;
    gap:12px;                     /* espacio entre iconos */
    padding-right: 8px !important;/* antes tenías 22px: lo acercamos a la orilla */
    flex: 1 1 auto;
  }

  /* Tamaño consistente de los botones redondos */
  .vgx-actions .vgx-iconbtn{
    width:44px; height:44px; flex-shrink:0;
  }

  /* Carrito al extremo derecho y un pelín más cerca del borde */
  .vgx-actions .vgx-iconbtn:last-child{
    margin-left:auto;             /* empuja el último (carrito) a la orilla */
    margin-right: 2px !important; /* un poco más cerca del borde */
  }
}
/* ===== AJUSTE SOLO EN MÓVIL – EVITA QUE SE VEA APLASTADO ===== */
@media (max-width: 768px){

  /* Reducimos un poco el logo SOLO en móvil */
  .vgx-logo img{
    height: 52px !important;   /* antes 68px */
  }

  /* Ajustamos altura mínima del header */
  .vgx-row{
    min-height: 58px !important;
  }

  /* Iconos un pelín más compactos */
  .vgx-iconbtn{
    width: 40px;
    height: 40px;
  }

}/* End custom CSS */