/**
 * Banana Pop Blocks — estilos de front.
 *
 * Los valores replican 1:1 lo que hoy genera Elementor en la home
 * (medidos sobre el sitio en producción), con dos diferencias deliberadas:
 *   1. El slider usa relación de aspecto en móvil en vez de 500px fijos.
 *   2. Las imágenes del slider son <img> reales, no background-image.
 */

/* No damos por sentado el reset del tema: sin border-box, el padding se suma
   al min-height y las tarjetas quedan más altas de lo definido. */
.bp-slider,
.bp-slider *,
.bp-cta,
.bp-cta *,
.bp-categories,
.bp-categories *,
.bp-iconbox,
.bp-iconbox * {
	box-sizing: border-box;
}

:root {
	--bp-color-heading: #585858;
	--bp-color-text: #7a7a7a;
	--bp-color-link: #6ec1e4;
	--bp-color-gray-bg: #ededed;
	--bp-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ==================================================================== *
 * Slider
 * ==================================================================== */

.bp-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	font-family: var(--bp-font);

	/* Fallbacks: si el JS no llega a correr, se ve la primera slide igual. */
	--bp-slider-h: 500px;
	--bp-slider-h-tablet: 420px;
	--bp-slider-h-mobile: auto;
	--bp-slider-ar-mobile: 4 / 5;
	--bp-slider-speed: 500ms;
	--bp-slide-content-max: 66%;
}

.bp-slider__viewport {
	overflow: hidden;
	height: var(--bp-slider-h);
	touch-action: pan-y; /* Deja el scroll vertical al navegador. */
}

.bp-slider__track {
	display: flex;
	height: 100%;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	transition-duration: var(--bp-slider-speed);
	will-change: transform;
}

.bp-slider.is-dragging .bp-slider__track {
	transition-duration: 0ms !important;
}

/* Sin JS todavía: solo la primera slide, sin saltos ni destellos. */
.bp-slider:not(.is-ready) .bp-slide + .bp-slide {
	display: none;
}

.bp-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-position: center;
	background-size: cover;
}

.bp-slide__picture {
	display: contents;
}

.bp-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

.bp-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bp-slide__inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	padding: 50px;
	color: #fff;
	text-decoration: none;
}

a.bp-slide__inner:hover,
a.bp-slide__inner:focus {
	color: #fff;
	text-decoration: none;
}

.bp-slide__content {
	position: relative;
	width: 100%;
	max-width: var(--bp-slide-content-max);
}

.bp-slide.has-text-shadow .bp-slide__content {
	text-shadow: 0 0 10px rgb(0 0 0 / 0.5);
}

/* Posición del contenido dentro de la slide. */
.bp-slide--v-top .bp-slide__inner { align-items: flex-start; }
.bp-slide--v-middle .bp-slide__inner { align-items: center; }
.bp-slide--v-bottom .bp-slide__inner { align-items: flex-end; }

.bp-slide--h-left .bp-slide__inner { justify-content: flex-start; }
.bp-slide--h-center .bp-slide__inner { justify-content: center; }
.bp-slide--h-right .bp-slide__inner { justify-content: flex-end; }

.bp-slide--text-left .bp-slide__content { text-align: left; }
.bp-slide--text-center .bp-slide__content { text-align: center; }
.bp-slide--text-right .bp-slide__content { text-align: right; }

.bp-slide__heading {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: 35px;
	font-weight: 700;
	line-height: 1;
}

.bp-slide__description {
	margin: 0;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
}

.bp-slide__heading:not(:last-child),
.bp-slide__description:not(:last-child) {
	margin-bottom: 30px;
}

.bp-slide__button {
	display: inline-block;
	padding: 12px 24px;
	border: 2px solid #fff;
	border-radius: 3px;
	background: transparent;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}

a.bp-slide__inner:hover .bp-slide__button,
a.bp-slide__inner:focus-visible .bp-slide__button {
	background: #fff;
	color: #111;
	/* Sin la sombra: sobre el fondo blanco del hover ensucia las letras. */
	text-shadow: none;
}

a.bp-slide__inner:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

/* --- Animación de entrada del contenido ---
 *
 * Réplica de lo que hace Elementor: al pasar a una slide, su texto entra
 * desde abajo con desvanecido. Valores medidos del sitio actual —
 * 1,25 s, curva ease, sin fill-mode (antes y después queda en su estado
 * normal, así que no hay parpadeo si el JS no llega a correr). */

@keyframes bp-fade-in-up {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes bp-fade-in-down {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes bp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes bp-zoom-in {
	from { opacity: 0; transform: scale3d(0.85, 0.85, 0.85); }
	to   { opacity: 1; transform: none; }
}

.bp-slide__content.is-animating {
	animation-duration: var(--bp-anim-duration, 1250ms);
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: none;
}

.bp-slider[data-content-animation="fadeInUp"] .bp-slide__content.is-animating { animation-name: bp-fade-in-up; }
.bp-slider[data-content-animation="fadeInDown"] .bp-slide__content.is-animating { animation-name: bp-fade-in-down; }
.bp-slider[data-content-animation="fadeIn"] .bp-slide__content.is-animating { animation-name: bp-fade-in; }
.bp-slider[data-content-animation="zoomIn"] .bp-slide__content.is-animating { animation-name: bp-zoom-in; }

@media (prefers-reduced-motion: reduce) {
	.bp-slide__content.is-animating { animation: none; }
}

/* --- Flechas --- */

.bp-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; /* Área táctil cómoda; el icono sigue siendo de 25px. */
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: rgb(237 237 237 / 0.9);
	cursor: pointer;
	transition: color 0.2s ease;
}

.bp-slider__arrow:hover { color: #fff; }
.bp-slider__arrow:disabled { opacity: 0.35; cursor: default; }
.bp-slider__arrow--prev { left: 0; }
.bp-slider__arrow--next { right: 0; }

.bp-slider__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
	border-radius: 4px;
}

/* --- Puntos --- */

.bp-slider__dots {
	position: absolute;
	bottom: 5px;
	left: 0;
	z-index: 5;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	pointer-events: none;
}

.bp-slider__dot {
	/* El punto visible mide 6 px y los centros quedan a 18 px, igual que el
	   original; el resto del botón es área táctil invisible. */
	width: 18px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	display: grid;
	place-items: center;
}

.bp-slider__dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
	opacity: 0.35;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bp-slider__dot.is-active::before {
	opacity: 1;
	transform: scale(1.15);
}

.bp-slider__dot:focus-visible {
	outline: 2px solid #000;
	outline-offset: -2px;
	border-radius: 50%;
}

/* --- Slider responsive --- */

@media (max-width: 1024px) {
	.bp-slider__viewport { height: var(--bp-slider-h-tablet); }
}

@media (max-width: 767px) {
	.bp-slider__viewport {
		height: var(--bp-slider-h-mobile);
		aspect-ratio: var(--bp-slider-ar-mobile);
	}

	.bp-slide__inner { padding: 30px; }

	.bp-slide__heading { font-size: 23px; }

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

	.bp-slide__heading:not(:last-child),
	.bp-slide__description:not(:last-child) { margin-bottom: 15px; }

	.bp-slide__button { padding: 10px 20px; font-size: 14px; }

	/* En pantallas angostas el 66% deja el texto en una columna ilegible.
	   Se fija aquí y no en la variable porque render.php la escribe inline,
	   y un estilo inline gana sobre cualquier media query. */
	.bp-slide__content { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bp-slider__track { transition-duration: 0ms !important; }
	.bp-slide__button { transition: none; }
}

/* ==================================================================== *
 * Tarjeta CTA
 * ==================================================================== */

.bp-cta {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	color: #fff;
	text-decoration: none;
	font-family: var(--bp-font);
}

.bp-cta__bg-wrapper {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.bp-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 1500ms ease;
	will-change: transform;
}

.bp-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: transparent;
	transition: background-color 1500ms ease;
}

.bp-cta__content {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: 35px;
	text-align: center;
}

.bp-cta__title {
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.3;
	transition: transform 1000ms ease;
}

.bp-cta:hover .bp-cta__bg,
.bp-cta:focus-visible .bp-cta__bg { transform: scale(1.2); }

.bp-cta:hover .bp-cta__overlay,
.bp-cta:focus-visible .bp-cta__overlay { background-color: rgb(0 0 0 / 0.3); }

.bp-cta:hover .bp-cta__title,
.bp-cta:focus-visible .bp-cta__title { transform: scale(1.1); }

.bp-cta:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

@media (prefers-reduced-motion: reduce) {
	.bp-cta__bg,
	.bp-cta__overlay,
	.bp-cta__title { transition: none; }

	.bp-cta:hover .bp-cta__bg { transform: none; }
	.bp-cta:hover .bp-cta__title { transform: none; }
}

/* ==================================================================== *
 * Grilla de categorías
 * ==================================================================== */

.bp-categories {
	display: grid;
	grid-template-columns: repeat(var(--bp-cat-cols, 4), minmax(0, 1fr));
	column-gap: var(--bp-cat-gap-x, 20px);
	row-gap: var(--bp-cat-gap-y, 40px);
	margin: 0;
	/* 10 px por lado, como el widget original: deja columnas de 265 px
	   dentro de un contenido de 1140. */
	padding: 0 10px;
	list-style: none;
	font-family: var(--bp-font);
}

.bp-category__link {
	display: block;
	text-decoration: none;
}

.bp-category__image {
	/* Ancho de la columna pero nunca más que su tamaño natural (el max-width
	   en píxeles lo escribe render.php). Centrada, sin estirar, como el
	   widget original. */
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.bp-category__title {
	margin: 15px 0;
	color: var(--bp-color-link);
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	transition: color 0.2s ease;
}

.bp-category__link:hover .bp-category__title { color: #4aa8d4; }

.bp-category__count {
	display: none; /* Igual que hoy: el número no se muestra. */
}

.bp-categories.show-count .bp-category__count {
	display: inline;
	color: #42d56d;
}

@media (max-width: 1024px) {
	.bp-categories { grid-template-columns: repeat(var(--bp-cat-cols-tablet, 3), minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.bp-categories { grid-template-columns: repeat(var(--bp-cat-cols-mobile, 2), minmax(0, 1fr)); }
}

/* ==================================================================== *
 * Utilidades para bloques nativos
 * ==================================================================== */

/* Caja de icono + texto (barra de beneficios y "¿Cómo jugamos hoy?").
 *
 * Woostify es un tema clásico sin theme.json, así que WordPress vuelve a
 * envolver el contenido de los bloques Grupo en un
 * .wp-block-group__inner-container. El contenedor flex tiene que existir en
 * los dos niveles para que funcione con y sin ese envoltorio.
 */
.bp-iconbox,
.bp-iconbox > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	font-family: var(--bp-font);
}

.bp-iconbox__icon {
	flex: 0 0 30%;
	margin: 0;
}

.bp-iconbox__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.bp-iconbox p {
	margin: 0;
	color: var(--bp-color-text);
	font-size: 14px;
	line-height: 28px;
}

.bp-iconbox a {
	color: inherit;
	text-decoration: none;
}

.bp-iconbox a:hover { color: var(--bp-color-link); }

/* Fila de beneficios: icono chico al lado del texto. */
.bp-iconbox--inline .bp-iconbox__icon { flex: 0 0 80px; }

@media (max-width: 767px) {
	.bp-iconbox--inline,
	.bp-iconbox--inline > .wp-block-group__inner-container {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.bp-iconbox--inline .bp-iconbox__icon { flex: 0 0 auto; width: 64px; }
}

/* Iconos grandes arriba del texto, en todos los tamaños. */
.bp-iconbox--stacked,
.bp-iconbox--stacked > .wp-block-group__inner-container {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.bp-iconbox--stacked .bp-iconbox__icon {
	flex: 0 0 auto;
	width: 30%;
}

.bp-iconbox--stacked .bp-iconbox__icon a { display: block; }

@media (max-width: 767px) {
	.bp-iconbox--stacked .bp-iconbox__icon { width: 80%; }
}

/* Mostrar/ocultar por dispositivo (banner de cuotas con arte distinta). */
@media (max-width: 767px) {
	.bp-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.bp-hide-desktop { display: none !important; }
}

/* Título de sección, como los H2 actuales. */
.bp-section-title {
	color: var(--bp-color-heading);
	font-family: var(--bp-font);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

/* Solo para lectores de pantalla (H1 de la home). */
.bp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================== *
 * Ancho de la página
 *
 * Woostify no trae theme.json, así que WordPress no genera el ancho de
 * contenido ni el comportamiento de "ancho completo". Lo aportamos acá,
 * limitado por la clase de body que añade el plugin, para no tocar el
 * resto del sitio mientras Elementor siga en uso.
 * ==================================================================== */

.bp-gutenberg-layout .site-main > article > * {
	max-width: var(--bp-content-width, 1140px);
	margin-left: auto;
	margin-right: auto;
}

/* 100% del contenedor, no 100vw: usar vw suma el ancho de la barra de
   desplazamiento y provoca desborde horizontal. */
.bp-gutenberg-layout .site-main > article > .alignfull {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.bp-gutenberg-layout .site-main > article > .alignwide {
	max-width: var(--bp-wide-width, 1400px);
}

@media (max-width: 1180px) {
	.bp-gutenberg-layout .site-main > article > *:not(.alignfull):not(.alignwide) {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Woostify separa el contenido del header y del footer con un margen que la
   plantilla de Elementor anulaba. Lo replicamos para que el banner quede
   pegado al header, como en la home actual. El aire de abajo lo pone el
   espaciador del propio contenido. */
.bp-gutenberg-layout .site-content {
	margin-top: 0;
	margin-bottom: 0;
}

/* ==================================================================== *
 * Ajustes finos contra la versión de Elementor
 * ==================================================================== */

/* Banner de cuotas ---------------------------------------------------
 * El original es una caja de 6vh con la imagen en "contain", así que la
 * imagen queda centrada con aire a los lados. Se replica igual para que
 * mida lo mismo y no aparezca hueco antes del slider. */
.bp-banner-cuotas .wp-block-image {
	margin: 0;
}

.bp-banner-cuotas img {
	display: block;
	width: 100%;
	height: 6vh;
	min-height: 34px;
	object-fit: contain;
}

/* Barra de beneficios ------------------------------------------------
 * Original: fila de 1140 px, tres columnas de 380 sin separación, cada
 * una con 10 px interiores, y 100 px de alto total. */
.bp-beneficios {
	padding-left: 0;
	padding-right: 0;
}

.bp-beneficios > .wp-block-group__inner-container {
	padding-left: 0;
	padding-right: 0;
}

.bp-beneficios .wp-block-columns {
	max-width: 1140px;
	margin: 0 auto;
	gap: 0;
}

.bp-beneficios .wp-block-column {
	padding: 0 10px;
}

@media (max-width: 767px) {
	.bp-beneficios .wp-block-column {
		padding: 0 5px;
	}
}

/* Separación entre columnas ------------------------------------------
 * El bloque Columnas del núcleo impone su separación por defecto (28 px).
 * Estas dos filas usan la del diseño original: pegadas en "¿Cómo jugamos
 * hoy?" y 20 px entre las tarjetas destacadas. */
.bp-gutenberg-layout .wp-block-columns:has(.bp-iconbox--stacked) {
	gap: 0;
}

.bp-gutenberg-layout .wp-block-columns:has(.bp-cta) {
	column-gap: 20px;
	row-gap: 20px;
}

/* En móvil el original deja 10 px a cada lado, no 20: así la grilla de
   categorías da columnas de 167,5 px como en la versión de Elementor. */
@media (max-width: 767px) {
	.bp-gutenberg-layout .site-main > article > *:not(.alignfull):not(.alignwide) {
		padding-left: 10px;
		padding-right: 10px;
	}

	.bp-categories {
		padding-left: 0;
		padding-right: 0;
	}
}