@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --bs-primary: #003f76 !important;
    --bs-primary-rgb: 0, 63, 118;
    --neo-orange: #ff7600;
    --neo-orange-focus: #c85d00;
    --neo-blue: #057ac3;
    --neo-blue-focus: #044572;
    --neo-blue-light: #CCE1F2;
    --neo-gray: #6a89a1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    font-family: 'Outfit', sans-serif;

}

img {
    max-width: 100%;
    height: auto;
}

.img__crece_conecta_rentabiliza{
    min-width: 100px !important;
    max-width: 100px !important;
}

.img-wifi_siguiente_nivel{
    width: 150px;
    max-width: 100% !important;
}

.text-primary-focus {
    color: var(--neo-blue-focus)
}

.bg-primary-neo-focus {
    background: var(--neo-blue-focus);
}

.bg-orange {
    background: var(--neo-orange);
}

.text-blue-light{
	color: var(--neo-blue-light);
}

.bg-blue {
    background: var(--bs-primary);
}

.nav-link {
    color: var(--neo-gray) !important;
    font-size: 1.1rem !important;
    font-weight: 400;
}

.nav-link.active {
    color: var(--neo-orange) !important;
    font-weight: bold;
}

.hero-section {
    background: rgb(17, 46, 73);
    background: linear-gradient(180deg, rgba(17, 46, 73, 1) 0%, rgba(3, 106, 192, 1) 100%);
}

.text-orange {
    color: var(--neo-orange)
}

.h-50 {
    height: 50vh !important;
}

.main-header-title{
	font-size: 45px !important;
}

.fs-l-1 {
    font-size: 4rem;
}

.fs-l-2 {
    font-size: 3.5rem;
}

.fs-l-3 {
    font-size: 3rem;
}

.fs-l-4 {
    font-size: 2.5rem;
}

.fs-l-5 {
    font-size: 2rem;
}

.fs-l-6 {
    font-size: 1.5rem;
}

.datos_son_poder ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.bg-orange {
    background: var(--neo-orange);
}

.btn.bg-orange {
    color: #FFF !important;
}

.btn.bg-orange:hover,
.btn.bg-orange:focus,
.btn.bg-orange:active {
    color: #FFF !important;
    background: var(--neo-orange-focus) !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.step-wifi {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    /* Para hacer el círculo */
    font-size: 30px;
    /* Ajusta el tamaño del número */
    color: white;
    /* Color del número */
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: #f5fafe;
}

.accordion-button:not(.collapsed) {
    color: var(--neo-blue-focus)
}

#form-contact input[type="text"]::placeholder,
#form-contact textarea::placeholder {
    color: var(--neo-blue-focus);
}

#form-contact input[type="text"],
#form-contact textarea {
    border: 3px solid var(--neo-blue) !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

footer {
    background: #001832;
    min-height: 10rem;
    height: auto;
}

.link-rss {
    color: inherit;
    text-decoration: none !important;
}

.nav-btn-blue {
    border: 3px solid var(--neo-blue);
    border-radius: 25px;
    height: 2rem !important;
    display: flex;
    padding: 0px 8px !important;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 5px;
}

.nav-btn-blue .nav-link{
    color: var(--neo-blue) !important;
    padding: 0px !important;
}

.nav-btn-orange {
    background-color: var(--neo-orange);
    border-radius: 25px;
    height: 2rem !important;
    display: flex;
    padding: 0px 8px !important;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 5px;
}

.nav-btn-orange .nav-link{
    color: #fff !important;
    padding: 0px !important;
}

.visible-movil-tablet {
  display: none; /* Oculta por defecto en todos los dispositivos */
}

/* Visible en pantallas de hasta 768px (tablets y móviles) */
@media (max-width: 768px) {
  .visible-movil-tablet {
    display: block; /* Cambia a block, flex o grid según tu diseño */
  }
}

.visible-desktop {
  display: none; /* Oculta por defecto en todos los dispositivos */
}

/* Visible en pantallas a partir de 769px (computadoras de escritorio y pantallas grandes) */
@media (min-width: 769px) {
  .visible-desktop {
    display: block; /* Cambia a block, flex o grid según tu diseño */
  }
}
@media (min-width: 769px) {
.navbar-collapse{
	flex-grow: 0 !important;
}
}

/* Ajusta la disposición del navbar en pantallas pequeñas */
@media (max-width: 769px) {
  .navbar {
    flex-direction: column; /* Pone los elementos del navbar en columna */
    align-items: start; /* Alinea los elementos a la izquierda */
  }

  .navbar-brand,
  .navbar-toggler {
    display: flex;
    align-items: center;
  }

  .navbar-toggler {
    margin-left: auto; /* Empuja el botón de colapsar a la derecha */
  }

  .navbar-collapse {
    width: 100%; /* Asegura que el menú ocupe todo el ancho */
    margin-top: 10px; /* Agrega espacio entre el botón y el menú */
  }

  .navbar-nav {
    flex-direction: column; /* Alinea el menú verticalmente */
    width: 100%;
  }

  .nav-item {
    text-align: center; /* Centra los elementos del menú */
  }
}

@media (min-width: 769px) {
.navbar-expand-lg{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    justify-content: center !important;
}

.container-fluid.d-flex.align-items-center {
    width: auto;
}

li.nav-item.nav-btn-blue.mx-2 {
    display: flex;
    min-width: 150px !important;
}

.container-fluid.d-flex.align-items-center {
    width: auto !important;
    margin: 0 !important;
}

div#navbarMain {
    width: auto !important;
}
}