/**
 * footer.css — Footer propio de ÉLEVÉE.
 *
 * El capturado se rompía en móvil: a 375px las columnas CONTACTO / UBICACIÓN / HORARIOS
 * se solapaban (5 colisiones medidas, idénticas en el original y en el clon). La causa
 * era una rejilla del builder que no colapsaba. Aquí la rejilla colapsa de verdad:
 * 4 columnas → 2 en tablet → 1 en móvil.
 *
 * Depende de ds.css para tokens y contenedor.
 */

/**
 * Footer OSCURO, continuo con la sección de cierre.
 *
 * Antes era crema entre dos bloques oscuros —CTA arriba, barra legal abajo— y el pie se
 * leía a rayas en vez de como una base. Unificando el fondo desaparecen dos transiciones
 * duras y la página apoya en un solo bloque.
 */
/**
 * Borde superior con el corte de la É, el mismo del hero de HIFU pero tumbado.
 *
 * La máscara va en DOS capas y no en una: la curva ocupa una franja de 70px fijos y de
 * ahí para abajo manda un degradado opaco. Con una sola capa estirada a todo el footer,
 * la curva crecía con el alto del pie —que cambia entre móvil y escritorio— y en móvil
 * se comía media columna de contacto.
 *
 * El `margin-top` negativo es lo que hace que el corte SIRVA de algo: sube el pie sobre
 * la sección anterior, así que por el hueco que abre la curva asoma la foto del cierre.
 * Sin él, la parte transparente dejaría ver el fondo de la página y el efecto sería una
 * franja blanca. El `padding-top` devuelve el contenido a su sitio.
 */
.ev-pie {
	--curva-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 3 C2 11 18 13 50 13 C82 13 98 11 100 3 L100 20 L0 20 Z'/%3E%3C/svg%3E");

	position: relative;
	overflow: hidden;
	margin-top: -70px;
	padding-top: 70px;
	background: var(--ev-oscuro);
	color: rgba(255, 255, 255, .70);
	font-family: var(--ev-sans);

	-webkit-mask-image: var(--curva-e), linear-gradient(#000, #000);
	mask-image: var(--curva-e), linear-gradient(#000, #000);
	-webkit-mask-size: 100% 70px, 100% calc(100% - 69px);
	mask-size: 100% 70px, 100% calc(100% - 69px);
	-webkit-mask-position: left top, left 69px;
	mask-position: left top, left 69px;
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;
}

/**
 * La ola de marca, apenas insinuada, en la esquina inferior derecha.
 *
 * Es el mismo trazo del hero del Club, y aquí cierra la página con la misma firma con la
 * que abre. Va al 22%: sobre el oscuro, el dorado a plena opacidad se convierte en un
 * grafismo que compite con los enlaces del pie, y este bloque es de servicio —teléfono,
 * dirección, legales—, no de lucimiento.
 *
 * En la esquina derecha y no en la izquierda porque a la izquierda están el logo y el
 * párrafo de la marca, que es lo único del pie que no debe tener nada detrás.
 */
/**
 * A 620px de ancho y al 22% solo se leía el remolino del extremo derecho —el resto del
 * trazo se apagaba sobre el oscuro— y parecía un borrón. El dibujo necesita sitio para
 * reconocerse como ola: ocupa el ancho de las tres columnas de la derecha y sube al 32%,
 * que sobre #2E2E2E sigue estando muy por debajo del texto.
 */
.ev-pie::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(72%, 1000px);
	aspect-ratio: 1672 / 941;
	background: url("../img/club-olas.webp") no-repeat right bottom / contain;
	opacity: .32;
	pointer-events: none;
	z-index: 0;
}

/* El contenido, por encima del ornamento. */
.ev-pie__inner,
.ev-pie__barra { position: relative; z-index: 1; }

/**
 * Ola vertical en el flanco izquierdo, la misma pieza que cose el hero de HIFU.
 *
 * Cuelga del contenedor y no del pie para que arranque donde arranca el contenido: sobre
 * el borde de la ventana quedaba cortada por la mitad y ya no se leía como un trazo.
 * Al 20%: es un flanco, no un elemento.
 */
.ev-pie__inner::before {
	content: "";
	position: absolute;
	left: calc(var(--ev-gutter) * -1);
	top: 50%;
	transform: translateY(-50%);
	width: min(190px, 15%);
	height: 92%;
	background: url("../img/olas-vertical.webp") no-repeat left center / auto 100%;
	/* Al 20% no se veía: el trazo del asset es de 1px y muy claro, y sobre el oscuro se
	   apagaba del todo. Al 38% sigue muy por debajo del texto del pie. */
	opacity: .38;
	pointer-events: none;
	z-index: -1;
}

@media (max-width: 767px) {
	/* A una columna el flanco se cruza con el logo y el párrafo de marca. */
	.ev-pie__inner::before { display: none; }
}

/* Sin corte entre la sección de cierre y el pie: es el mismo bloque. */
.ev-seccion--oscuro + .ev-pie .ev-pie__inner { padding-block-start: 0; }

.ev-seccion--oscuro + .ev-pie::before {
	content: "";
	display: block;
	height: 1px;
	max-width: var(--ev-ancho);
	margin: 0 auto;
	background: rgba(255, 255, 255, .12);
}

.ev-pie__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	/* Menos aire que antes: con las columnas cortas, 5rem arriba y abajo dejaban un
	   hueco muerto enorme bajo el contenido. */
	padding-block: clamp(2.5rem, 4.5vw, 3.75rem);
	grid-template-columns: 1fr;                 /* móvil: una sola columna */
	align-items: start;
}

@media (min-width: 600px) {
	.ev-pie__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	/* La columna de marca pesa más que las tres de datos. */
	.ev-pie__inner { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; }
}

/* ==================================================================== marca */

/* El logotipo es negro y sobre fondo oscuro desaparecía. Al ser monocromo, invertirlo
   da un blanco limpio. Lo ideal es que el cliente facilite una versión en blanco. */
.ev-pie__logo {
	width: 168px;
	height: auto;
	margin-bottom: 1.5rem;
	filter: brightness(0) invert(1);
	opacity: .92;
}

.ev-pie__marca p {
	color: rgba(255, 255, 255, .62);
	font-size: var(--ev-pequeno);
	line-height: 1.7;
	max-width: 32ch;
	margin-bottom: 1.75rem;
}

.ev-pie__redes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.ev-pie__redes a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	font-size: .95rem;
	transition: background-color var(--ev-trans), border-color var(--ev-trans), color var(--ev-trans);
}

.ev-pie__redes a:hover {
	background: var(--ev-dorado);
	border-color: var(--ev-dorado);
	color: var(--ev-tinta);
}

/* ================================================================= columnas */

/**
 * Serifa en versales, como el original: es el registro de la marca.
 *
 * Lo que fallaba antes no era la tipografía sino el contraste (marrón sobre fondo
 * oscuro) y el tamaño, que heredaba el de un H2 de sección y resultaba desproporcionado.
 * Aquí se fija un cuerpo propio, tracking amplio y blanco.
 */
.ev-pie .ev-pie__titulo {
	font-family: var(--ev-serif);
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ev-blanco);
	margin: 0 0 1.5rem;
}

.ev-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .75rem;
	font-size: var(--ev-pequeno);
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.ev-pie__lista a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--ev-trans), color var(--ev-trans);
}

.ev-pie__lista a:hover { color: var(--ev-blanco); border-bottom-color: var(--ev-dorado); }

.ev-pie__sedes li { display: grid; gap: .15rem; }
.ev-pie__calle { color: var(--ev-blanco); font-weight: 500; }
.ev-pie__ciudad { color: rgba(255, 255, 255, .55); }
.ev-pie__ciudad em { font-style: normal; font-size: var(--ev-micro); letter-spacing: .06em; }

/* Días y horas en dos columnas alineadas, no como texto corrido. */
.ev-pie__horario li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	color: rgba(255, 255, 255, .55);
	max-width: 22rem;
}

.ev-pie__horario li span:last-child { color: var(--ev-blanco); white-space: nowrap; }

/* ============================================================ barra inferior */

.ev-pie__barra {
	background: var(--ev-oscuro);
	color: rgba(255, 255, 255, .72);
}

.ev-pie__barra-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-block: 1.25rem;
}

.ev-pie__copy {
	margin: 0;
	font-size: var(--ev-micro);
	letter-spacing: .06em;
}

.ev-pie__legales {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	font-size: var(--ev-micro);
}

.ev-pie__legales a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	transition: color var(--ev-trans);
}

.ev-pie__legales a:hover { color: var(--ev-blanco); }

@media (max-width: 767px) {
	.ev-pie__barra-inner { flex-direction: column; align-items: flex-start; }
	.ev-pie__legales { gap: .6rem 1.1rem; }
}

/* ========================================================= WhatsApp flotante */

/**
 * El botón del plugin qlwapp, fuera.
 *
 * Venía en la captura y se pintaba como una cápsula verde deformada: el plugin le fija
 * el ancho por variable (--qlwapp-scheme-icon-size: 60px) y el alto se lo recortaba
 * otra regla, así que salía un óvalo. Además abría un panel de chat con textos en
 * inglés y la marca del plugin. Se oculta en vez de borrar su markup para no tocar el
 * script que lo acompaña: quitar uno sin el otro es como se rompen las cosas (regla
 * dura 1). Cuando se retire el chrome capturado, se van los dos juntos.
 */
.qlwapp { display: none !important; }

/**
 * El nuestro: un círculo y ya. Sin JS, sin panel, sin petición al CDN del origen.
 *
 * z-index por debajo del menú a pantalla completa (1000): flotando por encima tapaba
 * los iconos de redes del pie del menú.
 */
.ev-wa {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Cuadrado explícito: sin `aspect-ratio` el contenido podía estirarlo a cápsula,
	   que es justo el defecto que tenía el del plugin. */
	width: 56px;
	height: 56px;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	box-shadow: 0 6px 20px rgba(17, 17, 17, .18);
	transition: transform var(--ev-trans), box-shadow var(--ev-trans);
}

.ev-wa:hover,
.ev-wa:focus-visible {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 10px 26px rgba(17, 17, 17, .24);
}

.ev-wa svg { display: block; }

/* Con el menú abierto no pinta nada: el menú ya lleva sus vías de contacto. */
.ev-menu:not([hidden]) ~ .ev-wa,
body:has(.ev-menu:not([hidden])) .ev-wa { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ev-wa { transition: none; }
}