/**
 * Banana Pop — Footer.
 *
 * Reemplaza la plantilla de Elementor `elementor-2448`. Las medidas salen de
 * medir el footer real en producción (ver _analisis/footer/): contenedor de
 * 1140px, columnas 40/20/20/20, azul #213574, Montserrat.
 *
 * Se carga en TODAS las páginas —el footer está en todas— y también dentro del
 * lienzo del editor, para que editar el footer se parezca a verlo.
 *
 * Cortes: 1024px y 767px, los mismos que usaba Elementor, para que el cambio
 * no mueva nada en pantallas intermedias.
 */

/* Los tokens del footer (--bp-footer-*) viven en tokens.css, junto con el
   resto de la paleta. Esta hoja lo declara como dependencia. */

/* El tema no garantiza border-box en todo; sin él los padding de las columnas
   se suman al ancho y la grilla de 40/20/20/20 se desborda. */
.bp-footer,
.bp-footer *,
.bp-wave,
.bp-cards,
.bp-cards * {
	box-sizing: border-box;
}

.bp-footer {
	clear: both;
	color: var( --bp-footer-fg );
	font-family: var( --bp-footer-font );
}

/* ==================================================================== *
 * Ola divisoria (bloque bananapop/wave-divider)
 * ==================================================================== */

.bp-wave {
	position: relative;
	overflow: hidden;
	line-height: 0;
	height: var( --bp-wave-h, 150px );
	background-color: var( --bp-wave-bg, var( --bp-footer-bg ) );
}

/* El +1.3px evita la costura de un píxel que deja el antialiasing del SVG
   contra el borde derecho. Viene del footer original. */
.bp-wave svg {
	position: absolute;
	inset: 0;
	display: block;
	width: calc( 100% + 1.3px );
	height: 100%;
}

/* ==================================================================== *
 * Cuerpo del footer
 * ==================================================================== */

.bp-footer__main {
	background-color: var( --bp-footer-bg );
	/* 70px de la sección más los 10px de padding que Elementor ponía en cada
	   columna: el bloque azul queda exactamente igual de alto que hoy. */
	padding-block: 80px;
	padding-inline: 0;
}

/* Varias reglas de acá abajo llevan delante la clase del núcleo
   (.wp-block-columns, .wp-block-image, .wp-block-list, .wp-block-social-links)
   aunque parezca redundante. Es a propósito: sin eso empatan en especificidad
   con los estilos del núcleo sobre el mismo elemento y gana el que se cargue
   último. En el sitio real esta hoja se carga antes que wp-block-library, así
   que perdía: el bloque Columnas volvía a ser flex y el icono de Instagram
   volvía a 24px. La dependencia declarada en el plugin arregla el orden; esto
   lo hace irrelevante.

   Sin theme.json, WordPress vuelve a envolver el contenido de los Grupos en
   .wp-block-group__inner-container. Anclamos el ancho en las columnas, no en
   el grupo, para que funcione con y sin ese envoltorio. */
.wp-block-columns.bp-footer__cols,
.wp-block-columns.bp-footer__barcols {
	max-width: var( --bp-footer-max );
	margin-block: 0;
	margin-inline: auto;
}

/* .wp-block-columns es flex y reparte por contenido. Pasamos a grid para
   fijar 40/20/20/20 y poder recomponer el orden en móvil. */
.wp-block-columns.bp-footer__cols {
	display: grid;
	grid-template-columns: 40% 20% 20% 20%;
	gap: 0;
}

/* La alineación vertical va en cada columna, no en el contenedor: el núcleo
   declara `.wp-block-columns { align-items: normal !important }`, así que desde
   el contenedor no hay nada que hacer. Con align-self en las columnas —que es
   como el propio núcleo aplica su ajuste de «alineación vertical»— sí funciona. */
.bp-footer__cols > .wp-block-column {
	align-self: start;
	/* Neutraliza el flex-basis en línea que escribe el bloque Columnas. */
	flex-basis: auto !important;
	min-width: 0;
	padding-inline: var( --bp-footer-inset );
}

.bp-footer__cols > .bp-footer__brand {
	padding-right: calc( var( --bp-footer-brand-gap ) + var( --bp-footer-inset ) );
}

/* --- Marca --- */

.wp-block-image.bp-footer__logo {
	margin: 0;
	text-align: center;
}

.bp-footer__logo img {
	height: auto;
	max-width: 100%;
}

.bp-footer__tagline {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 28px;
	color: var( --bp-footer-fg );
}

/* --- Columnas de enlaces --- */

.bp-footer__title {
	margin: 0;
	font-family: var( --bp-footer-font );
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	color: var( --bp-footer-fg );
}

.wp-block-list.bp-footer__list {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.bp-footer__list li {
	font-size: 14px;
	font-weight: 300;
	line-height: 28px;
}

.bp-footer__list li + li {
	margin-top: 5px;
}

.bp-footer__list a {
	color: var( --bp-footer-fg );
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.bp-footer__list a:hover,
.bp-footer__list a:focus-visible {
	opacity: 0.7;
	text-decoration: underline;
}

/* --- Instagram --- */

.wp-block-social-links.bp-footer__social {
	margin: 20px 0 0;
	padding: 0;
	gap: 12px;
}

/* El estilo "solo logos" del bloque de iconos sociales pinta el SVG con
   currentColor; fijamos tamaño y color aquí para no depender de los ajustes
   guardados en el bloque. */
.wp-block-social-links.bp-footer__social .wp-social-link {
	/* El núcleo le pone margen inferior a cada icono; sin quitarlo, el hueco
	   hasta el @usuario queda mayor que el del título al icono. */
	margin: 0;
	background: none;
	padding: 0;
	color: var( --bp-footer-fg );
}

.wp-block-social-links.bp-footer__social .wp-social-link a {
	padding: 0;
	color: inherit;
}

.wp-block-social-links.bp-footer__social .wp-social-link svg {
	width: 50px;
	height: 50px;
	fill: currentColor;
}

.wp-block-social-links.bp-footer__social .wp-social-link:hover {
	opacity: 0.75;
	transform: none;
}

.bp-footer__handle {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 28px;
}

.bp-footer__handle a {
	color: var( --bp-footer-fg );
	text-decoration: none;
}

.bp-footer__handle a:hover,
.bp-footer__handle a:focus-visible {
	text-decoration: underline;
}

/* ==================================================================== *
 * Barra inferior
 * ==================================================================== */

/* El footer de Elementor separaba esta barra con un filete de
   rgba(255,255,255,0.19). Se quitó: con las tarjetas más chicas el filete ya no
   delimitaba dos bloques, se leía como una costura suelta. La separación la da
   el espacio. Para recuperarlo, basta con volver a poner el borde. */
.bp-footer__bar {
	background-color: var( --bp-footer-bg );
	padding-block: 0;
	padding-inline: 0;
}

.wp-block-columns.bp-footer__barcols {
	display: grid;
	grid-template-columns: 1fr auto;
	min-height: 99px;
	gap: 20px;
}

/* El crédito y las tarjetas van centrados entre sí, como en el footer de
   Elementor. Va en las columnas por lo mismo que arriba: el núcleo bloquea
   align-items en el contenedor con !important. */
.bp-footer__barcols > .wp-block-column {
	align-self: center;
	flex-basis: auto !important;
	min-width: 0;
	padding-inline: var( --bp-footer-inset );
}

.bp-footer__credit {
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	line-height: 1.6;
	color: var( --bp-footer-fg );
}

.bp-footer__credit img.emoji,
.bp-footer__credit img.wp-smiley {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
	margin: 0 0.15em;
}

/* ==================================================================== *
 * Tarjetas de pago (bloque bananapop/payment-icons)
 * ==================================================================== */

.bp-cards {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --bp-cards-gap, 14px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-cards--start { justify-content: flex-start; }
.bp-cards--center { justify-content: center; }
.bp-cards--end { justify-content: flex-end; }

.bp-cards li {
	display: flex;
	margin: 0;
}

.bp-cards svg {
	display: block;
	width: var( --bp-cards-w, 56px );
	height: auto;
}

/* ==================================================================== *
 * Tablet
 * ==================================================================== */

@media ( max-width: 1024px ) {

	.bp-footer__main {
		padding-block: 60px;
		padding-inline: 20px;
	}

	.bp-footer__bar {
		padding-block: 10px;
		padding-inline: 20px;
	}

	.wp-block-columns.bp-footer__cols {
		grid-template-columns: 34% 22% 22% 22%;
	}

	.bp-footer__cols > .bp-footer__brand {
		padding-right: calc( 40px + var( --bp-footer-inset ) );
	}

	.bp-footer__tagline {
		font-size: 13px;
	}

	/* Debajo de 1025px las columnas se angostan y enlaces como "Libro de
	   Reclamaciones" pasan a dos líneas. Con 28px de interlineado esas dos
	   líneas se leen como dos enlaces distintos, así que de aquí para abajo el
	   aire entre ítems lo da el margen y no el interlineado. */
	.bp-footer__list li {
		font-size: 13px;
		line-height: 1.45;
	}

	.bp-footer__list li + li {
		margin-top: 12px;
	}
}

/* ==================================================================== *
 * Móvil
 *
 * Elementor apilaba la marca y dejaba las otras tres columnas en 33% cada
 * una: 111px de ancho con textos como "Libro de Reclamaciones", que partían
 * en dos líneas separadas por 28px de interlineado y se leían como dos
 * enlaces distintos. Aquí los enlaces van en dos columnas y el bloque de
 * Instagram pasa a ancho completo.
 * ==================================================================== */

@media ( max-width: 767px ) {

	.bp-wave {
		height: var( --bp-wave-h-mobile, 70px );
	}

	.bp-footer__main {
		padding-block: 45px;
		padding-inline: 20px;
	}

	.wp-block-columns.bp-footer__cols {
		grid-template-columns: 1fr 1fr;
		row-gap: 40px;
	}

	.bp-footer__cols > .bp-footer__brand {
		grid-column: 1 / -1;
		padding-right: var( --bp-footer-inset );
	}

	.bp-footer__cols > .bp-footer__social-col {
		grid-column: 1 / -1;
	}

	.bp-footer__bar {
		padding: 30px 20px 20px;
	}

	.wp-block-columns.bp-footer__barcols {
		grid-template-columns: 1fr;
		justify-items: center;
		min-height: 0;
		row-gap: 18px;
	}

	.bp-footer__credit {
		text-align: center;
	}

	.bp-cards {
		justify-content: center;
	}
}

/* ==================================================================== *
 * Dentro del editor
 *
 * El lienzo no tiene el <footer class="bp-footer">, así que el fondo azul lo
 * ponen los propios grupos. Sí hace falta forzar el color del texto: el
 * editor pinta encima sus estilos por defecto.
 * ==================================================================== */

.editor-styles-wrapper .bp-footer__main,
.editor-styles-wrapper .bp-footer__bar {
	color: var( --bp-footer-fg );
}

.editor-styles-wrapper .bp-footer__title,
.editor-styles-wrapper .bp-footer__tagline,
.editor-styles-wrapper .bp-footer__credit,
.editor-styles-wrapper .bp-footer__handle,
.editor-styles-wrapper .bp-footer__list li,
.editor-styles-wrapper .bp-footer__list a {
	color: var( --bp-footer-fg );
}