/*
  Responsive fixes (mobile-first overrides)
  Objetivo: mejorar visualizacion en celular sin alterar contenido.
*/

/* Evitar scroll horizontal por elementos con anchos fijos o desbordes */
html, body {
  overflow-x: hidden;
}

/* Imagens y medios siempre responsivos */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Banner: el .inner tenia un ancho fijo (55em) que rompia en pantallas chicas */
#banner .inner {
  width: 100%;
  max-width: 55em;
}

/* Texto del slogan en el banner: que se lea sobre el fondo claro */
.texto-logo {
  color: #0b2d5c !important;
  text-shadow: none !important;
}

/* Navbar Bootstrap (BS3) fijo y con toggle visible */
body {
  padding-top: 56px; /* espacio para navbar-fixed-top */
}

/* Navbar SOLIDO, blanco y con tipografia azul (combina con el sitio) */
.wps-navbar.navbar {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.wps-navbar .navbar-brand {
  color: #0b2d5c !important;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.wps-navbar .navbar-nav > li > a {
  color: #0b2d5c !important;
  font-weight: 700;
}

.wps-navbar .navbar-nav > li > a:hover,
.wps-navbar .navbar-nav > li > a:focus {
  background: rgba(11, 45, 92, 0.06) !important;
}

/* Boton hamburguesa (Bootstrap nativo icon-bar) bien visible */
.wps-navbar .navbar-toggle {
  border-color: rgba(11, 45, 92, 0.28);
}

.wps-navbar .navbar-toggle:focus,
.wps-navbar .navbar-toggle:hover {
  background: rgba(11, 45, 92, 0.06);
}

.wps-navbar .navbar-toggle .icon-bar {
  background-color: #0b2d5c;
}

/* Estado activo */
.wps-navbar .navbar-nav > .active > a,
.wps-navbar .navbar-nav > .active > a:hover,
.wps-navbar .navbar-nav > .active > a:focus {
  background: rgba(11, 45, 92, 0.10) !important;
}

/* WhatsApp link: estilo de CTA sin romper el menu */
.wps-navbar .wps-wa-link {
  font-weight: 800;
}

/* WhatsApp como CTA discreto */
.wps-navbar .wps-nav-wa > a {
  margin-left: 6px;
  border: 1px solid rgba(11, 45, 92, 0.18);
  border-radius: 999px;
  padding: 10px 14px !important;
}

.wps-navbar .wps-nav-wa > a:hover,
.wps-navbar .wps-nav-wa > a:focus {
  border-color: rgba(11, 45, 92, 0.35);
}

.wps-navbar .wps-wa-link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Ajustes especificos para mobiles */
@media screen and (max-width: 991px) {
  #banner .inner {
    max-width: none;
  }

  #banner .logo {
    text-align: center;
  }

  #banner h2.texto-logo {
    margin-left: 0 !important;
    text-align: center;
  }

  .imagen-logo {
    width: 100% !important;
    max-width: 320px;
    display: block;
    margin: 0 auto;
  }

  .texto-logo {
    width: 100% !important;
  }

  /* En mobile, al abrir el collapse, mantener todo blanco y solido */
  .wps-navbar .navbar-collapse {
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .wps-navbar .navbar-nav {
    margin: 7.5px -15px;
  }

  .wps-navbar .navbar-nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .wps-navbar .dropdown-menu {
    background: #ffffff;
  }
}

/* Desktop: forzar comportamiento Bootstrap 3 (horizontal) aunque exista CSS de Bootstrap 4 */
@media screen and (min-width: 992px) {
  .wps-navbar .navbar-toggle {
    display: none !important;
  }

  .wps-navbar .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .wps-navbar .navbar-nav {
    display: block !important;
    float: left !important;
    margin: 0 !important;
  }

  .wps-navbar .navbar-nav > li {
    float: left !important;
  }
}

@media screen and (max-width: 480px) {
  .wrapper .inner {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  input, textarea, select {
    max-width: 100%;
  }
}