/* Banner de consentimiento de cookies -------------------------------------- */

.consent-banner[hidden] {
	display: none;
}

.consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background: #ffffff;
	border-top: 1px solid #e3e6ec;
	box-shadow: 0 -4px 24px rgba(20, 26, 44, .12);
	font-size: 14px;
	line-height: 1.6;
	color: #4a5164;
}

.consent-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 20px;
}

.consent-title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	color: #141a2c;
}

.consent-text {
	margin: 0;
}

.consent-text a {
	color: #1b4dc1;
	text-decoration: underline;
}

/* Panel de categorías */

.consent-options {
	margin-top: 16px;
	padding: 16px;
	background: #f6f7fa;
	border-radius: 6px;
}

.consent-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	cursor: pointer;
}

.consent-option:last-child {
	margin-bottom: 0;
}

.consent-option input {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.consent-option input:disabled {
	cursor: not-allowed;
}

.consent-option strong {
	color: #141a2c;
}

/* Botones: mismo tamaño y misma jerarquía visual para aceptar y rechazar,
   tal y como exige la guía de cookies de la AEPD. */

.consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.consent-btn {
	flex: 1 1 auto;
	min-width: 150px;
	padding: 11px 20px;
	border: 1px solid #141a2c;
	border-radius: 4px;
	background: #ffffff;
	color: #141a2c;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.consent-btn:hover,
.consent-btn:focus-visible {
	background: #141a2c;
	color: #ffffff;
}

@media (min-width: 576px) {
	.consent-actions {
		justify-content: flex-end;
	}

	.consent-btn {
		flex: 0 0 auto;
	}
}

/* Botón flotante para reabrir las preferencias --------------------------------
   Mismo tratamiento visual que el boton "subir arriba" del sitio (.scroll-top:
   circulo de 60px, misma sombra y misma transicion), pero anclado a la esquina
   contraria para que los dos no se solapen. */

.consent-fab[hidden] {
	display: none;
}

.consent-fab {
	position: fixed;
	left: 30px;
	bottom: 60px;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--bs-color-principal, #18a470);
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	cursor: pointer;
	transition: .25s cubic-bezier(.645, .045, .355, 1);
}

.consent-fab:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
}

.consent-fab:focus-visible {
	outline: 3px solid #141a2c;
	outline-offset: 3px;
}

@media (max-width: 575px) {
	.consent-fab {
		left: 16px;
		bottom: 16px;
		width: 48px;
		height: 48px;
	}

	.consent-fab svg {
		width: 22px;
		height: 22px;
	}
}

/* Recuadro de carga bajo demanda para iframes de terceros -----------------------
   Reproduce las alturas de .contact-map-area iframe (assets/css/style.css:46306)
   para que al insertar el mapa el contenido de abajo no se mueva. */

.embed-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 500px;
	padding: 24px;
	border: 1px solid #e3e6ec;
	border-radius: 6px;
	background-color: #f6f7fa;
	text-align: center;
}

.embed-placeholder-address {
	margin: 0;
	max-width: 32em;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #141a2c;
}

.embed-placeholder-note {
	margin: 0;
	max-width: 44em;
	font-size: 13px;
	line-height: 1.6;
	color: #4a5164;
}

.embed-placeholder-note a {
	color: #1b4dc1;
	text-decoration: underline;
}

.embed-placeholder-btn {
	padding: 11px 28px;
	border: 1px solid #141a2c;
	border-radius: 4px;
	background: #ffffff;
	color: #141a2c;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.embed-placeholder-btn:hover,
.embed-placeholder-btn:focus-visible {
	background: #141a2c;
	color: #ffffff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.embed-placeholder {
		height: 400px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.embed-placeholder {
		height: 350px;
	}
}

@media only screen and (max-width: 767px) {
	.embed-placeholder {
		height: 300px;
	}

	.embed-placeholder-address {
		font-size: 16px;
	}
}