/* Estilos generales del encabezado */
.top-menu.navbar.navbar-expand-lg.text-white.py-0.no-mobile {
  display: none;
}
.home.page-id-10 .site-header {
  padding: 5px 20px;
  top: 0px;
  width: 100%;
  z-index: 1000;
  position: absolute;
background-color: rgba(55, 55, 55, 0);
  box-shadow: 0px 10px 15px 5px rgba(55, 55, 55, 0);
}
.page .site-header {
  padding: 5px 20px;
  width: 100%;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0px 10px 15px 5px rgba(55, 55, 55, 0.37);
}
/* Estilos para el logotipo */
.site-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.custom-logo {
    max-height: 60px;
    width: auto;
}

/* Navegación principal */
.main-navigation {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.menu-principal-container {
    display: flex;
    align-items: center;
}

#primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-menu .menu-item {
    margin: 0 15px;
    position: relative; /* Necesario para el efecto de subrayado */
}

#primary-menu .menu-item a {
    text-decoration: none;
    color: #333333; /* Color de la fuente principal */
    font-weight: bold;
    padding: 10px 15px;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 5px;
}

/* Efecto hover: cambio de color de fondo y texto */
#primary-menu .menu-item a:hover {
  color: #0cb4ce;
  text-decoration: none;
}

/* Efecto hover: subrayado animado */
#primary-menu .menu-item::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #0cb4ce;
    transition: width 0.3s;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#primary-menu .menu-item:hover::after {
    width: 100%;
}

/* Íconos de redes sociales */
.site-redes-sociales {
    display: flex;
    align-items: center;
    gap: 15px;
}

.site-redes-sociales .bi {
    font-size: 20px;
    color: #0073e6;
    transition: color 0.3s;
}

.site-redes-sociales a:hover .bi {
    color: #004a99;
}

/* Botón de menú para dispositivos móviles */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333333;
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px) {
    .main-navigation {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 15px 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .main-navigation.open {
        display: flex;
    }

    #primary-menu {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    #primary-menu .menu-item {
        margin: 10px 0;
    }

    .menu-toggle {
        display: block;
    }
}

/* Estilos del menú superior */
.top-menu {
    background-color: #ff9400; /* Color de fondo oscuro similar a Implanet */
    color: white;
    font-size: 14px;
    padding: 10px 0;
}

.top-menu a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.top-menu a:hover {
    color: #fff; /* Color de hover llamativo */
}

.top-menu .btn-primary {
  background-color: #ffffff4a;
  border: none;
  font-weight: bold;
}
.top-menu .redes-sociales a:hover {
  color: #1a5b64!important;
}
.btn.btn-primary.btn-sm.me-3:hover {
  color: #fff !important;
}
.top-menu .btn-primary:hover {
  background-color: #1a5b64;
}

/* Ajustes de tamaño de iconos */
.top-menu i {
    vertical-align: middle;
}

/* Asegurar que se vea bien en móviles */
@media (max-width: 768px) {
    .top-menu {
        flex-direction: column;
        text-align: center;
    }

    .top-menu .container-fluid {
        flex-direction: column;
        align-items: center;
    }

    .top-menu .d-flex {
        flex-direction: column;
        gap: 5px;
    }

    .top-menu a {
        display: block;
        margin-bottom: 5px;
    }
}

/* Estilos para los botones del menú */
.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

/* Estilo del botón primario ("Agenda tu hora") */
.menu-btn.btn-primary {
    background-color: #0073e6; /* Azul Bootstrap */
    color: #ffffff;
    border: none;
}

.menu-btn.btn-primary:hover {
    background-color: #005bb5;
}

/* Estilo del botón secundario ("Sucursales") */
.menu-btn.btn-outline-light {
    color: #ffffff;
    border: 2px solid #ffffff;
}

.menu-btn.btn-outline-light:hover {
    background-color: #ffffff;
    color: #0073e6;
}

/* Íconos dentro de los botones */
.menu-btn i {
    margin-right: 8px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
        width: 100%;
    }

    .menu-btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Estilos del submenú */
.navbar-nav .dropdown-menu {
  display: none;
  background-color: #fffffff2;
  box-shadow: 0px 4px 6px rgba(223, 223, 223, 0.54);
  border-radius: 4px;
  z-index: 1050;
  flex-wrap: wrap;
  width: 400px;
  left: 0px;
  padding: 25px;
  border-color: #ffffff57;
}
.navbar-nav .dropdown:hover .dropdown-menu .dropdown-item {
  color: #00439e;
  font-size: 13px;
  text-transform: uppercase;
}
.navbar-nav .dropdown:hover .dropdown-menu {
  display: flex;
  text-align: left !important;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.menu-item-object-page .dropdown-item{
	text-align: left;
}
.dropdown-menu .menu-item-object-page {
  width: 100%;
  padding: 0px 5px 5px 0px;
  color: #000;
}
.dropdown-menu .dropdown-item {
  color: #fff;
}

.dropdown-menu .dropdown-item:hover {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline #ff9400 !important;
    background-color: #ffffff00;
}


.container-menu {
  width: 100%;
}
/* Alinear correctamente los elementos del menú */
.navbar .navbar-collapse {
    justify-content: space-between;
}

/* Estilos para los botones de la derecha */
.navbar-nav .menu-btn {
    margin-left: 10px;
    font-size: 14px;
    padding: 8px 15px;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
    .navbar .navbar-collapse {
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav {
        width: 100%;
        justify-content: center;
    }

    .navbar-nav .menu-btn {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
	  .navbar-nav .dropdown-menu {
    width: 100%;
    right: 0;
    left: 0;
  }
	#documentTabs.nav.nav-tabs {
         justify-content: center;
	}
}
/* Mobile Menu - Simplified and Optimized */
@media (max-width: 768px) {

	.redes-sociales .text-white.me-3, .redes-sociales .text-white {
  display: none;
}
	.style-mobile-header {
  font-size: 10px;
  flex-direction: unset !important;
}
	.redes-sociales .btn.btn-primary.btn-sm.me-3 {
  margin: 0px !important;
  font-size: 10px;
}
	.navbar-nav .nav-item .menu-btn {
  margin-left: 20px !important;
  font-size: 14px;
  padding: 8px 15px;
  margin-right: 20px !important;
  width: 90%;
}
	.site-branding .custom-logo-link .custom-logo {
  max-width: 70%;
}
    /* Hide menu by default */
    #primary-menu {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #000;
        text-align: center;
        padding: 15px 0;
        z-index: 9999;
    }

    /* Show menu when toggled */
    #primary-menu.open {
        display: block;
    }

    /* Menu toggle button */
    .menu-toggle {
        display: block;
        background-color: #5490ff;
        color: #fff;
        border: none;
        padding: 10px;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        width: 100%;
        text-align: center;
    }

    /* Menu items */
    #primary-menu li {
        list-style: none;
        margin: 10px 0;
    }

    #primary-menu a {
        color: white;
        text-decoration: none;
        padding: 10px;
        display: block;
        border-radius: 5px;
        transition: background 0.3s;
    }

    #primary-menu a:hover {
        background-color: #5490ff;
    }

    /* Hide social icons on mobile */
    .site-redes-sociales {
        display: none;
    }

    /* Adjustments for header */
    #masthead {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
    }

    .site-branding {
        width: auto;
    }

    .custom-logo-link {
        display: block;
        width: auto;
        height: 40px;
    }
}
ul#menu-principal {
    margin-right: 0 !important;
}
div#navbarNav {
    justify-content: flex-end !important;
}

.nav-item a.nav-link {
  text-decoration: none !important;
}
.navbar-nav li a:hover, 
#primary-menu li a:hover {
    color: #00439e;
    font-weight: bold;
    text-decoration: underline #ff9400 !important;
}

.navbar-nav li a, #primary-menu li a {
  font-weight: bold;
  letter-spacing: 0.05em;
  font-size: 15px;
  font-family: "Oxygen", sans-serif;
  font-style: normal;
  background-color: #fff0;
  border-radius: 20px;
  color: #00439e;
  padding: 5px;
}
.home .navbar-nav li a, .home #primary-menu li a {
  font-weight: bold;
  letter-spacing: 0.05em;
  font-size: 15px;
  font-family: "Oxygen", sans-serif;
  font-style: normal;
  background-color: #fff0;
  border-radius: 20px;
  color: #fff;
  padding: 5px;
}
.home .navbar-nav li a:hover, 
.home #primary-menu li a:hover {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline #ff9400 !important;
}
.page-child .navbar-nav li a, .page-child #primary-menu li a {
    font-weight: bold;
    letter-spacing: 0.05em;
    font-size: 15px;
    font-family: "Oxygen", sans-serif;
    font-style: normal;
    background-color: #fff0;
    border-radius: 20px;
    color: #00439e;
    padding: 5px;
}
.page-child .dropdown-menu .dropdown-item {
    color: #fff;
}
.btn.btn-primary.menu-btn {
  border-style: solid;
  color: #fff;
  background-color: #00439e;
  border-radius: 20px;
  border-width: 1px;
}
.btn.btn-primary.menu-btn:hover {
  background-color: #ff9400;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0px 1px 10px 0px #00000057;
}
.menu-item {
  margin: 0px 5px 0px 5px;
}

@media (max-width: 991px) {
	.pq-elegir {
  width: 90%;
}
	.bx-procesos {
  width: 90%;
}
	#sb_instagram #sbi_images {
  width: 90% !important;
  margin-left: auto;
  margin-right: auto;
}
	.site-footer.text-white, .site-footer p {
  text-align: center !important;
}
	.bx-pd-procesos {
  width: 90%;
}
	.bx-img-text .img-fluid.rounded.shadow {
  display: none;
}
	.home.page-id-10 .site-header {
  position: inherit;
  background-color: rgb(255, 255, 255);
	}
    .navbar-collapse {
        background-color: #ffffff; /* Fondo blanco */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        z-index: 1050;
        padding-top: 80px; /* Espacio para que no quede pegado arriba */
        display: none; /* Ocultar por defecto */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .navbar-collapse.show {
        display: flex !important;
    }
.navbar-nav li a, #primary-menu li a {
    font-weight: 400!important;
	}
    .navbar-nav {
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }
.dropdown-menu .dropdown-item {
	padding: 10px 10px;
	}
	
	.navbar-nav li a{
  letter-spacing: 0;
		font-size: 13px;
	}
	
        .navbar-nav .nav-item {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }

        .navbar-nav .nav-link {
        color: #00439e;
        text-align: center;
        padding: 15px;
        font-size: 18px;
        display: block;
    }

    .navbar-nav .nav-link:hover {
        color: #00439e !important;
        font-weight: bold;
        text-decoration: underline #ff9400 !important;
    }

    .dropdown-menu {
        background-color: #ffffff;
        text-align: center;
        width: 100%;
    }
.navbar-nav .dropdown:hover .dropdown-menu .dropdown-item {
  color: #00439e;
  font-size: 11px;
  text-transform: uppercase;
}


    .dropdown-item:hover {
        background-color: #e6f7f9;
    }

    .navbar-toggler {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1100;
        border: none;
    }

    .navbar-toggler-icon {
        filter: invert(48%) sepia(74%) saturate(551%) hue-rotate(152deg) brightness(95%) contrast(85%);
    }
}
/* Alinear el menú correctamente en escritorio */
@media (min-width: 992px) {
    div#navbarNav {
        justify-content: flex-end !important;
    }
}

/* Asegurar alineación correcta en móviles */
@media (max-width: 991px) {
  div#navbarNav {
    text-align: center;
    width: 100%;
    justify-content: unset !important;
  }
.navbar-toggler.collapsed {
  background-color: #00439e;
  color: #fff;
  font-weight: bold;
  font-size: 25px;
  border-radius: 3px;
}
    .navbar-nav {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
	
    .navbar-toggler {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1100;
    }
	.navbar-nav li a, #primary-menu li a, .home .navbar-nav li a, .home #primary-menu li a  {
  color: #00439e;
}

}