.bg-dark {
  background-color: #0183e1 !important;
}

.header {
  background-color: #0183E1;
  border-bottom: 1px solid #4faef3;
}

.footer p
{
  color:white;
}

.contact-info a
{
  color:white;
}

.footer .links a{
  color:white;
}

/* ============== Toasts 2026 ============== */
.Vue-Toastification__container.bottom-right {
  padding: 16px;
  bottom: 0;
  right: 0;
}

/* ============== A11y / Focus visible ============== */
*:focus-visible {
  outline: 2px solid #0183E1;
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Reduce motion para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============== Chat widgets — empujar arriba del MobileBottomBar ============== */
@media (max-width: 768px) {
  #_wpn_chat_container {
    bottom: 90px !important;
    right: 10px !important;
  }
  .whatsapp-flotante,
  iframe[src*="chat-widget"],
  iframe[id*="chat-widget"],
  iframe[id*="chatWidget"],
  iframe[class*="chat"],
  div[id*="chat-widget"],
  div[id*="chatWidget"],
  div[class*="chat-widget"],
  [class*="chat-widget"][class*="container"],
  [id*="whatsapp"],
  div[class*="-wa"][style*="fixed"] {
    bottom: 90px !important;
  }
}

/* En /cart la sticky CTA toma 78-128px del fondo, el chat widget sube
   mas para sentarse arriba sin pegarse a la CTA */
@media (max-width: 768px) {
  body.is-cart-page .whatsapp-flotante,
  body.is-cart-page #_wpn_chat_container,
  body.is-cart-page iframe[src*="chat-widget"],
  body.is-cart-page iframe[id*="chat-widget"],
  body.is-cart-page iframe[class*="chat"],
  body.is-cart-page div[id*="chat-widget"],
  body.is-cart-page div[class*="chat-widget"],
  body.is-cart-page [id*="whatsapp"] {
    bottom: 140px !important;
  }

  /* Fallback: si el JS setea inline bottom, NO sumamos transform encima
     porque genera doble offset visual. Dejo solo el bottom !important. */
}

/* ============== Banner home: imagen completa, sin recorte ============== */
/* Porto theme (app.css) inyecta height:280px / 428px y min-height:499px
   sobre `.home-slider img`, lo que genera bandas blancas arriba/abajo
   cuando la imagen natural es mas baja que 499px. Las matamos aca. */
.home-slider img,
.home-slider .slide-bg {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Video banner: full width al aspect-ratio natural del video, sin caps
   que generen franjas. */
.home-slider video.slide-video {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #fbfbfb;
}
@media (max-width: 850px) {
  /* Mobile: ocultamos los nav de owl visualmente. Quedan en el DOM para
     poder dispararlos programaticamente con click. */
  .home-slider .owl-nav {
    display: none !important;
  }
}

/* Single-banner (sin carousel): renderiza el video/imagen al ancho completo
   con altura natural, sin que ningun container de owl-carousel limite el alto. */
.single-banner-wrap {
  width: 100%;
  display: block;
  line-height: 0;
  background-color: #fbfbfb;
}
.single-banner-wrap > a {
  display: block;
  width: 100%;
  line-height: 0;
}
.single-banner-video,
.single-banner-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* Porto agrega margin-bottom:2.8rem al .home-slider */
.home-slider {
  margin-bottom: 0 !important;
}
/* Owl-carousel cachea heights de init y al resize quedan stale,
   generando bandas en blanco arriba/abajo. Forzamos que todos los
   wrappers sigan la altura real del slide. */
.home-slider .owl-stage-outer,
.home-slider .owl-stage,
.home-slider .owl-item,
.home-slider .home-slide {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.home-slider .home-slide,
.home-slider .owl-item {
  overflow: visible !important;
  line-height: 0;
}
.home-slider .owl-stage-outer {
  overflow: hidden !important;
}
.home-slider .home-slide a {
  display: block;
  width: 100%;
  line-height: 0;
}

/* ============== Flechas del banner home (owl-carousel) ============== */
/* vue-owl-carousel renderiza nav como <div>, no <button>.
   Selectores sin tag para matchear cualquier elemento .owl-prev/.owl-next */
.home-slider .owl-nav .owl-prev,
.home-slider .owl-nav .owl-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: rgba(15,30,60,0.65) !important;
  color: #fff !important;
  font-size: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 20px -4px rgba(15,30,60,0.30), 0 2px 6px rgba(15,30,60,0.18) !important;
  border: none !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
  text-indent: 0 !important;
  opacity: 1 !important;
  margin: 0 !important;
}
.home-slider .owl-nav .owl-prev { left: 16px !important; }
.home-slider .owl-nav .owl-next { right: 16px !important; }
@media (max-width: 768px) {
  .home-slider .owl-nav .owl-prev { left: 8px !important; }
  .home-slider .owl-nav .owl-next { right: 8px !important; }
}
.home-slider .owl-nav .owl-prev i,
.home-slider .owl-nav .owl-next i {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
.home-slider .owl-nav .owl-prev:hover,
.home-slider .owl-nav .owl-next:hover {
  background: #0183E1 !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 12px 28px -6px rgba(1,131,225,0.45), 0 4px 10px rgba(15,30,60,0.20) !important;
}
.home-slider .owl-nav .owl-prev::before,
.home-slider .owl-nav .owl-next::before {
  content: none !important;
}