/* Brolab Extras styles */

/* menu-shortcode */
.brolab-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	height: 106px;
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.08);
	transition: height 0.4s ease;
	background-color: #fff;
}

/* El header es position: fixed; reservamos el espacio que ocupaba en el flujo
   para que el contenido de la página no quede oculto detrás.
   También elevamos la sección del header (Divi Theme Builder) por encima del
   contenido de la página, para que el submenu quede encima del texto. */
.et-l--header .et_pb_section {
	height: 106px;
	z-index: 1000;
}

/* Estado al hacer scroll: el header queda fijo y se encoge (106px -> 86px),
   igual que el menú de staging1.brolab.com. */
.brolab-header.brolab-header--scrolled {
	height: 86px;
}

.brolab-header.brolab-header--scrolled .logo {
	padding-top: 12px;
	padding-bottom: 12px;
}

.brolab-header.brolab-header--scrolled .logo img {
	max-height: 55px;
}

.brolab-header .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	border-right: 1px solid #eaeaea;
	width: 240px; 
}

.brolab-header .logo img {
	max-width: 100%;
	max-height: 67.5px;
	transition: max-height 0.4s ease;
}

.brolab-header .brolab-menu-principal--desktop ul {
	display: flex;
	align-items: center;
}

.brolab-header .social-icons {
	display: flex;
	align-items: center;
	gap: 19px;
	margin-left: 20px;
}

.brolab-header .social-icons a {
	display: block;
	color: #031b4e !important;
	font-size: 18px;
	line-height: 18px;
	text-decoration: none;
	transition: color 0.25s ease;
}

.brolab-header .social-icons a:hover,
.brolab-header .social-icons a:active {
	color: #345298;
}

.brolab-header .search {
	display: flex;
	align-items: center;
	color: #031b4e;
	font-size: 18px;
	line-height: 18px;
	cursor: pointer;
	margin-left: auto;
	padding: 0 26px;
	transition: color 0.25s ease;
}

.brolab-header .search:hover,
.brolab-header .search:active {
	color: #345298;
}

.brolab-header .contact-link {
	align-self: stretch;
	display: flex;
}

.brolab-header .contact-link a {
	display: flex;
	align-items: center;
	background-color: #031b4e !important;
	color: #fff !important;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	padding: 0 30px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.brolab-header .contact-link a:hover,
.brolab-header .contact-link a:active {
	background-color: #345298;
	color: #fff;
}

.brolab-menu-principal--desktop {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-start;
	align-self: stretch;
}

.brolab-menu-principal--desktop ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.brolab-menu-principal__list {
	padding-bottom: 0 !important;
}

.brolab-menu-principal--desktop li {
	position: relative;
}

.brolab-menu-principal--desktop > ul {
	height: 100%;
}

.brolab-menu-principal--desktop > ul > li {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.brolab-header .brolab-menu-principal--desktop .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	z-index: 999;
	padding: 10px 0;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	flex-direction: column;
	align-items: flex-start;
	border-top: 2px solid #345298;
}

.brolab-header .brolab-menu-principal--desktop .sub-menu li {
	display: block;
}

.brolab-menu-principal--desktop a {
	display: block;
	color: #031b4e !important;
	text-transform: uppercase;
	font-size: 16px;
	text-decoration: none;
	padding: 10px 15px;
	transition: color 0.25s ease;
}

/* Enlaces del nivel superior: ocupan el alto completo del header y el texto
   queda centrado verticalmente (en lugar de usar padding vertical fijo). */
.brolab-menu-principal--desktop > ul > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 15px;
}

/* Items con submenú: caret que apunta hacia abajo, alineado a la derecha del item.
   El enlace del nivel superior es flex con align-items: center, así el caret queda
   centrado verticalmente con el texto; margin-left: auto lo empuja al borde derecho
   y gap garantiza separación con el texto. Sin animación. */
.brolab-menu-principal--desktop .menu-item-has-children > a {
	gap: 7px;
}

.brolab-menu-principal--desktop .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	margin-left: auto;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
	margin-top: -3px;
}

.brolab-menu-principal--desktop a:hover,
.brolab-menu-principal--desktop a:active,
.brolab-menu-principal--desktop .current-menu-item > a,
.brolab-menu-principal--desktop .current-menu-ancestor > a {
	color: #345298 !important;
}

.brolab-header .brolab-menu-principal--desktop li:hover > .sub-menu,
.brolab-header .brolab-menu-principal--desktop li:focus-within > .sub-menu {
	display: flex;
}

.brolab-header-mobile {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	background-color: #fff;
}

.brolab-header-mobile__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	padding: 0 20px;	
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.08);
}

.brolab-header-mobile__bar .logo {
	display: flex;
	align-items: center;
}

.brolab-header-mobile__bar .logo img {
	max-height: 55px;
	max-width: 100%;
	width: auto;
}

.brolab-header-mobile__actions {
	display: flex;
	align-items: center;
	gap: 30px;
}

.brolab-header-mobile__actions .search {
	display: flex;
	align-items: center;
	color: #031b4e;
	font-size: 20px;
	line-height: 20px;
	cursor: pointer;
	transition: color 0.25s ease;
}

.brolab-header-mobile__actions .search:hover,
.brolab-header-mobile__actions .search:active {
	color: #345298;
}

.brolab-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.brolab-menu-toggle__bar {
	display: block;
	width: 27px;
	height: 3px;
	background-color: #031b4e;
	border-radius: 0;
	transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}

.brolab-menu-toggle:hover .brolab-menu-toggle__bar {
	background-color: #345298;
}

.brolab-menu-toggle.is-active .brolab-menu-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.brolab-menu-toggle.is-active .brolab-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.brolab-menu-toggle.is-active .brolab-menu-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.brolab-mobile-menu {
	width: 90%;
	margin: 0 auto;
	max-height: 0;
	overflow-y: hidden;
	opacity: 0;
	visibility: hidden;
	background-color: #fff;
	border-top: 2px solid #345298;
	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.08);
	transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.brolab-mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
}

.brolab-mobile-menu .brolab-menu-principal--mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.brolab-mobile-menu .brolab-menu-principal--mobile > ul {
	padding: 15px 30px !important;
}

.brolab-mobile-menu .brolab-menu-principal--mobile a {
	display: block;
	color: #031b4e !important;
	text-transform: uppercase;
	font-size: 15px;
	text-decoration: none;
	padding: 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	transition: color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.brolab-mobile-menu .brolab-menu-principal--mobile a:hover {
	color: #345298;
}

.brolab-mobile-menu .brolab-menu-principal--mobile .sub-menu {
	display: none;
	padding-left: 15px !important;
}

.brolab-mobile-menu .brolab-menu-principal--mobile .sub-menu.open {
	display: block;
}

.brolab-mobile-menu .brolab-menu-principal--mobile .sub-menu a {
	font-size: 14px;
}

.brolab-mobile-menu .brolab-menu-principal--mobile .menu-item-has-children > a .brolab-submenu-toggle {
	float: right;
	margin-left: 10px;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.brolab-mobile-menu .brolab-menu-principal--mobile .menu-item-has-children > a .brolab-submenu-toggle.is-active {
	transform: rotate(225deg);
}

/* /menu-shortcode */

.brolab-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100001;
	background-color: rgba(52, 82, 152, 0.9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-30%);
	transition: opacity 300ms ease, visibility 300ms ease, transform 300ms ease;
	overflow-y: auto;
}

.brolab-search-overlay.st-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.brolab-search-close {
	position: absolute;
	top: 25px;
	right: 25px;
	width: 30px;
	height: 30px;
	cursor: pointer;
}

.brolab-search-close::before,
.brolab-search-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 3px;
	background-color: #fff;
	opacity: 0.6;
	transition: opacity 300ms ease, transform 300ms ease;
}

.brolab-search-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.brolab-search-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.brolab-search-close:hover::before,
.brolab-search-close:hover::after {
	opacity: 1;
}

.brolab-search-close:hover::before {
	transform: translate(-50%, -50%) rotate(225deg);
}

.brolab-search-close:hover::after {
	transform: translate(-50%, -50%) rotate(135deg);
}

.brolab-search-outer {
	max-width: 970px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	text-align: center;
}

.brolab-search-logo {
	margin-bottom: 60px;
}

.brolab-search-logo img {
	max-height: 65px;
	width: auto;
}

.brolab-site-searchform {
	position: relative;
	max-width: 970px;
	margin: 0 auto;
}

.brolab-site-searchform input[type="search"] {
	width: 100%;
	border: none;
	border-bottom: 2px solid #345298;
	font-size: 25px;
	color: #09162a;
	padding: 0 80px 0 15px;
	text-align: left;
	height: 70px;
	line-height: 70px;
	background: #fff;
	box-sizing: border-box;
	outline: none;
}

.brolab-site-searchform input[type="search"]::placeholder {
	color: rgba(0, 0, 0, 0.4);
	opacity: 1;
}

.brolab-site-searchform button {
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: #031b4e;
	color: #fff;
	border: none;
	font-size: 20px;
	height: 60px;
	line-height: 60px;
	padding: 0;
	width: 60px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 300ms ease;
}

.brolab-site-searchform button:hover {
	background-color: #0b2a6e;
}

body.st-prevent-scroll {
	overflow: hidden;
}

.brolab-proceso-quejas {
    width: 75%;
    margin: 0 auto;
}

.brolab-proceso-quejas .item {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f6faff;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.brolab-proceso-quejas .item h3 {
    line-height: 1.2;
    margin-top: 0;
    font-weight: 900;
}

.brolab-proceso-quejas .item .description {
    font-size: 16px;
    font-weight: 600;
}

.brolab-proceso-quejas .item .image {
    padding-top: 15px;
    width: 15%;
}

.brolab-proceso-quejas .item .image img {
    max-width: 100%;
}

.brolab-proceso-quejas .item .content {
    width: 85%;
    padding-right: 5vw;
}

#brolab-buscar {
	cursor: pointer;
}


#formulario-quejas input[type="submit"] {
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 11px 34px 11px;
    border-radius: 0px;
    text-transform: uppercase;
    border: none;
    color: #fff;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    cursor: pointer;
    outline: none !important;
    -webkit-font-smoothing: antialiased;
    background-color: #031b4e;
}

#formulario-quejas input[type="submit"]:hover {
	background-color: #345298;
}

#formulario-quejas .gform_required_legend {
	display: none;
}

@media (max-width: 1600px) {
	.brolab-header .logo {
		width: 215px;
	}
	.brolab-menu-principal--desktop a,
	.brolab-header .social-icons a,
	.brolab-header .search,
	.brolab-header .contact-link a {
		font-size: 15px;
	}

	.brolab-header .contact-link a {
		padding: 10px 12px;
	}

	.brolab-menu-principal--desktop > ul > li > a {
		padding: 0 12px;
	}
}

@media (max-width: 1390px) {
	.brolab-header .logo {
		width: 160px !important;
	}

	.brolab-menu-principal--desktop a,
	.brolab-header .social-icons a,
	.brolab-header .search,
	.brolab-header .contact-link a {
		font-size: 14px;
	}

	.brolab-header .search {
		padding: 0 15px;
	}
}

/* A partir de 1280px hacia abajo se oculta el header de escritorio y se
   muestra el header móvil (logo, buscador y menú hamburguesa). */
@media (max-width: 1280px) {
	.brolab-header {
		display: none;
	}

	/* Reservamos el espacio que ocupaba el header fijo en el flujo. */
	.et-l--header .et_pb_section {
		height: 80px;
	}

	.brolab-header-mobile {
		display: block;
	}
}

@media (max-width: 767px) {
	.brolab-search-outer {
		top: 50%;
		transform: translateY(-50%);
	}

	.brolab-site-searchform input[type="search"] {
		font-size: 18px;
		height: 60px;
		line-height: 60px;
	}

	.brolab-site-searchform button {
		height: 50px;
		line-height: 50px;
		width: 50px;
		top: 5px;
		right: 5px;
	}

	.brolab-proceso-quejas .item {
        flex-direction: column;
        gap: 0;
    }

    .brolab-proceso-quejas .item .image {
        width: 100%;
        text-align: center;
    }

    .brolab-proceso-quejas .item .image img {
        width: 120px;
    }

    .brolab-proceso-quejas .item .content {
        width: 100%;
        padding-right: 0;
    }

    .brolab-proceso-quejas .item .content h3 {
        font-size: 22px;
        text-align: center;
    }
}

@media (max-width: 580px) {
    .brolab-proceso-quejas .item .image img {
        width: 80px;
    }
}

/* Shortcode Resultados de búsqueda */
.brolab-search-results {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.brolab-search-result-item {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
}

.brolab-search-result-thumb {
	flex: 0 0 25%;
	max-width: 25%;
}

.brolab-search-result-thumb a {
	display: block;
}

.brolab-search-result-thumb img {
	max-width: 100%;
	height: auto;
}

.brolab-search-result-content {
	flex: 0 0 calc(75% - 20px);
	max-width: calc(75% - 20px);
}

.brolab-search-result-title {
	font-size: 26px;
	font-weight: 900;
	margin-bottom: 0px;
	line-height: 1.2;
}

.brolab-search-result-title a {
	color: inherit;
	text-decoration: none;
}

.brolab-search-result-title a:hover {
	color: #345298;
}

.brolab-search-result-date {
	font-size: 14px;
	color: #777;
	margin-bottom: 0px;
}

.brolab-search-result-excerpt {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 18px;
}

.brolab-search-result-btn {
	display: inline-block;
	background-color: #345298;
	color: #fff;
	padding: 10px 25px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.brolab-search-result-btn:hover {
	background-color: #2ea3f2;
	color: #fff;
}

@media(max-width: 1380px){
	.brolab-search-result-item {
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	.brolab-search-result-thumb,
	.brolab-search-result-content {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.brolab-search-result-thumb {
		margin-bottom: 5px;
	}
}