@charset "utf-8";

/* ==========================================================================
   FOOTER CORPORATIVO - Footer principal del hotel con columnas flexbox
   Estructura: logo + columnas de hoteles por isla + mas + social + certificados
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Base: Footer contenedor principal
   ---------------------------------------------------------------------------- */

#footer {
	float: left;
	position: relative;
	display: block;
	width: 100%;
	background-color: #fafafa;
	z-index: 3;
}

/* ----------------------------------------------------------------------------
   Footer Main: area superior con columnas
   ---------------------------------------------------------------------------- */

.footer-main {
	padding: 80px 48px;
}

/* ----------------------------------------------------------------------------
   Footer Grid: layout flexbox
   Columnas: logo | ibiza | formentera | mallorca+menorca | mas | social | certificados
   ---------------------------------------------------------------------------- */

.footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	justify-content: space-between;
}

/* ----------------------------------------------------------------------------
   Logo del footer
   ---------------------------------------------------------------------------- */

.footer-logo {
	flex: 0 0 200px;
}

.footer-logo a {
	display: block;
}

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

/* ----------------------------------------------------------------------------
   Columnas genericas del footer
   ---------------------------------------------------------------------------- */

.footer-column {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
}

/* Titulo de cada columna */
.footer-column__title {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-base-blue, #004b87);
	margin: 0 0 14px 0;
	line-height: 1.5;
}

/* Lista de links dentro de una columna */
.footer-column__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-column__list li {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
}

/* Links genericos del footer */
.footer-column__list li a {
	position: relative;
	display: inline-block;
	font-size: 0.875rem;
	color: var(--text-primary-solid-80);
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-column__list li a:hover {
	color: var(--color-base-blue, #004b87);
}

/* Subrayado animado en hover */
.footer-column__list li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-base-blue, #004b87);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0, 0, 0.57, 1);
}

.footer-column__list li a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Links de hoteles prestige con color corporativo destacado */
.footer-column__list li a.prestige-hotel {
	color: var(--color-base-blue, #004b87);
}

/* ----------------------------------------------------------------------------
   Columna de hoteles: layout de hoteles por isla
   ---------------------------------------------------------------------------- */

/* Columna con dos grupos (doble isla: Mallorca + Menorca) */
.footer-hotels--double {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.footer-hotels__group {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

/* ----------------------------------------------------------------------------
   Columna de redes sociales
   ---------------------------------------------------------------------------- */

.footer-column__list--social li a {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Iconos sociales */
.footer-column__list--social li a img {
	width: 16px;
	height: 16px;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.footer-column__list--social li a:hover img {
	opacity: 1;
}

/* Sin subrayado en redes sociales */
.footer-column__list--social li a::after {
	display: none;
}

/* ----------------------------------------------------------------------------
   Columna de certificaciones
   ---------------------------------------------------------------------------- */

.footer-certifications img {
	display: block;
	max-width: 100%;
	height: auto;
	opacity: 0.8;
}

/* ----------------------------------------------------------------------------
   Footer Bottom: barra inferior con links legales y powered by
   ---------------------------------------------------------------------------- */

.footer-bottom {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 24px 48px;
}

.footer-bottom__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

/* Links legales (privacidad, cookies, aviso legal) */
.footer-bottom__links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.footer-bottom__links a {
	position: relative;
	display: block;
	font-size: 0.8125rem;
	color: var(--text-primary-solid-64);
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-bottom__links a:hover {
	color: var(--color-base-blue, #004b87);
}

.footer-bottom__links a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color-base-blue, #004b87);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s cubic-bezier(0, 0, 0.57, 1);
}

.footer-bottom__links a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Texto y logo "powered by" */
.footer-bottom__powered {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	color: var(--text-primary-solid-64);
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
}

.footer-bottom__powered a {
	display: inline-flex;
	align-items: center;
}

.footer-bottom__powered picture {
	display: inline-flex;
}

.footer-bottom__powered img {
	height: 13px;
	width: auto;
	position: relative;
	top: -1px;
}

/* ----------------------------------------------------------------------------
   Desktop Grande (min-width: 1921px)
   ---------------------------------------------------------------------------- */

@media (min-width: 1921px) {
	.footer-main {
		padding: 80px 80px;
	}

	.footer-bottom {
		padding: 24px 80px;
	}
}

/* ----------------------------------------------------------------------------
   Desktop Medio (max-width: 1600px)
   ---------------------------------------------------------------------------- */

@media (max-width: 1600px) {
	.footer-logo {
		flex: 0 0 110px;
	}
}

/* ----------------------------------------------------------------------------
   Tablet y Movil (max-width: 991px)
   ---------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.footer-main {
		padding: 60px 24px;
	}

	.footer-grid {
		gap: 40px 24px;
	}

	.footer-logo {
		flex: 0 0 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 0;
	}

	.footer-logo img {
		width: 180px;
	}

	.footer-hotels,
	.footer-more,
	.footer-social,
	.footer-certifications {
		flex: 1 1 calc(25% - 18px);
		min-width: 140px;
	}

	.footer-column__title {
		font-size: 0.75rem;
	}

	.footer-column__list li a {
		font-size: 0.8125rem;
	}

	.footer-bottom {
		padding: 24px;
	}

	.footer-bottom__inner {
		flex-direction: column;
		text-align: center;
		gap: 16px;
	}

	.footer-bottom__links {
		justify-content: center;
		gap: 16px;
	}

	.footer-bottom__powered {
		white-space: normal;
	}
}

/* ----------------------------------------------------------------------------
   Mobile (max-width: 575px)
   ---------------------------------------------------------------------------- */

@media (max-width: 575px) {
	.footer-main {
		padding: 48px 16px;
	}

	.footer-grid {
		gap: 32px 16px;
	}

	.footer-hotels,
	.footer-more,
	.footer-social {
		flex: 1 1 calc(50% - 8px);
		min-width: 140px;
	}

	.footer-certifications {
		flex: 0 0 100%;
		text-align: center;
	}

	.footer-bottom {
		padding: 24px 16px;
	}

	.footer-bottom__links {
		gap: 12px 16px;
	}

	.footer-bottom__links a {
		font-size: 0.75rem;
	}

	.footer-bottom__powered {
		font-size: 0.75rem;
	}
}