/**
 * Banco Izalqueño — estilos de componentes y responsive.
 * Los tokens (color, tipo, espacio) viven en theme.json.
 * Medidas tomadas del diseño a 1920px (example/screenshot.png), con escala fluida.
 */

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* El diseño se aprobó viéndolo con el navegador al 90 %. Como todas las medidas
   están en rem, bajar la base reproduce esa escala con el zoom al 100 %. */
html {
	font-size: 90%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

/* <picture> de la imagen móvil (inc/responsive-images.php): el <img> se comporta como
   si no estuviera envuelto, así los estilos de Imagen, Portada y tarjetas no cambian. */
picture.banco-picture {
	display: contents;
}

:focus-visible {
	outline: 0.1875rem solid var(--wp--preset--color--accent-orange);
	outline-offset: 0.1875rem;
}

.skip-link:focus {
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

h2.wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.5em;
}

/* -------------------------------------------------------------------------- */
/* Botones                                                                    */
/* -------------------------------------------------------------------------- */

.wp-block-button.is-style-orange-pill .wp-block-button__link {
	background: var(--wp--preset--color--accent-orange) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 0.5rem;
	font-size: clamp(1rem, 0.775rem + 0.4vw, 1.25rem);
	font-weight: 700;
	padding: 0.6em 1.9em;
	transition: background-color 0.2s;
}

.wp-block-button.is-style-orange-pill .wp-block-button__link:hover {
	background: #d9531a !important;
}

.wp-block-button.is-style-white-pill .wp-block-button__link {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 0.5rem;
	font-size: clamp(1rem, 0.775rem + 0.4vw, 1.25rem);
	font-weight: 700;
	padding: 0.6em 1.9em;
	transition: background-color 0.2s, color 0.2s;
}

.wp-block-button.is-style-white-pill .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

.wp-block-button.is-style-green-pill .wp-block-button__link {
	background: var(--wp--preset--color--accent-green);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--alt);
	font-size: var(--banco-header-top-fs, var(--wp--preset--font-size--small));
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.55em 0.8em;
}

.wp-block-button.is-style-green-pill .wp-block-button__link:hover {
	background: #5c9a37;
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: 999px;
	padding: 0.65rem 1.35rem;
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */

.banco-header-top {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.banco-header-top .banco-header-row {
	flex-wrap: nowrap;
	gap: 2rem;
}

.banco-header-row .banco-brand > * {
	margin: 0;
}

.banco-logo {
	margin: 0;
}

/* Core deja el enlace inline-block: sin esto queda un hueco de ~8px bajo el logo. */
.banco-logo a {
	display: block;
}

.banco-logo img {
	display: block;
	width: clamp(9.375rem, 15vw, 17.8125rem);
	height: auto;
}

.banco-header-top .banco-header-side {
	align-items: flex-end;
	gap: 1.6rem;
}

.banco-header-top .banco-header-info {
	flex-wrap: nowrap;
	gap: clamp(1.25rem, 2.3vw, 3.5rem);
}

.banco-utility-item {
	margin: 0;
	font-size: var(--banco-header-top-fs);
	line-height: 1.15;
	color: var(--wp--preset--color--base);
}

.banco-utility-label,
.banco-utility-link a {
	display: block;
	font-weight: 500;
	text-transform: uppercase;
}

.banco-utility-item a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
}

.banco-utility-item a:hover {
	text-decoration: underline;
}

.banco-header-search {
	width: min(100%, 46.875rem);
	margin: 0;
}

/* Escritorio: buscador, enlaces y botón de Agencias en una sola fila. El buscador va
   primero y se queda con el espacio que sobra entre el logo y los enlaces. */
@media (min-width: 1025px) {
	.banco-header-top .banco-header-side {
		flex: 1 1 auto;
		min-width: 0;
	}

	.banco-header-top .banco-header-side.is-layout-flex {
		display: grid;
		grid-template-columns: minmax(7rem, 1fr) repeat(4, auto);
		align-items: center;
		column-gap: clamp(0.75rem, 1.1vw, 1.5rem);
	}

	.banco-header-top .banco-header-info {
		display: contents;
	}

	/* Cada dato en su bloque sin partirse; "Trabaja / con nosotros" conserva su salto. */
	.banco-header-top .banco-utility-item {
		white-space: nowrap;
	}

	.banco-header-top .banco-header-search {
		order: -1;
		width: 100%;
	}
}

.banco-header-search .wp-block-search__inside-wrapper {
	position: relative;
	border: 0;
	border-radius: 2px;
	padding: 0;
	background: var(--wp--preset--color--base);
}

.banco-header-search .wp-block-search__input {
	border: 0;
	border-radius: 2px;
	/* Derecha = lo que ocupa la lupa (0.6rem de margen + 1.6rem de ícono + 0.5rem de relleno). */
	padding: calc(0.2em + 2px) 2.7rem calc(0.2em + 2px) 0.5rem;
	font-size: var(--banco-header-top-fs);
	color: var(--wp--preset--color--contrast);
	background: transparent;
}

.banco-header-search .wp-block-search__input::placeholder {
	color: #b3b3b3;
}

.banco-header-search .wp-block-search__button {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	margin: 0;
	padding: 0.25rem;
	border: 0;
	background: transparent;
	color: #b3b3b3;
}

.banco-header-search .wp-block-search__button svg {
	width: 1.6rem;
	height: 1.6rem;
}

/* Menú principal.
   Core aplica padding: 1.25em 2.375em a todo grupo con fondo sin padding propio; aquí no va. */
.banco-nav-primary {
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: 0 2px 0 rgba(12, 89, 85, 0.06);
	position: relative;
	z-index: 50;
}

@media (min-width: 1025px) {
	.banco-main-nav,
	.banco-main-nav .wp-block-navigation__responsive-container,
	.banco-main-nav .wp-block-navigation__responsive-close,
	.banco-main-nav .wp-block-navigation__responsive-dialog,
	.banco-main-nav .wp-block-navigation__responsive-container-content {
		width: 100%;
	}

	.banco-main-nav .wp-block-navigation__container {
		width: 100%;
		gap: 0;
		justify-content: space-between;
		/* Todas las celdas con el alto de la barra: el verde del activo/hover llega de borde a borde. */
		align-items: stretch;
	}

	.banco-main-nav .wp-block-navigation__container > .wp-block-navigation-item {
		position: relative;
		/* Cada celda mide lo que su texto y el sobrante se reparte parejo: con 9 ítems
		   no caben celdas iguales sin partir "Canales Electrónicos". El relleno es el mínimo;
		   en pantallas anchas el sobrante lo hace crecer. Sin nowrap: si algo no cabe, el
		   texto pasa a dos líneas dentro de su celda en vez de empujar el header. */
		flex: 1 1 auto;
		justify-content: center;
		padding: 0 0.5rem;
		transition: background-color 0.2s, color 0.2s;
	}

	.banco-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		flex: 0 1 auto;
		padding: 14px 0;
		text-align: left;
	}

	/* Toda la celda abre el submenú, no solo el texto. */
	.banco-main-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.banco-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
		width: 1.1em;
		height: 1.1em;
		margin-left: 0.5em;
		pointer-events: none;
	}

	.banco-main-nav .wp-block-navigation__submenu-icon svg {
		width: 100%;
		height: 100%;
		stroke-width: 2;
	}

	.banco-main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
	.banco-main-nav .wp-block-navigation__container > .banco-nav-active,
	.banco-main-nav .wp-block-navigation__container > .wp-block-navigation-item:has(> [aria-expanded="true"]) {
		background: var(--wp--preset--color--accent-green);
		/* !important: el bloque Navegación hereda .has-contrast-color a cada ítem. */
		color: var(--wp--preset--color--base) !important;
	}

	.banco-main-nav .wp-block-navigation__submenu-container {
		top: 100%;
		left: 0;
		min-width: 100% !important;
		width: max-content;
		max-width: 21.25rem;
		padding: 0.5rem 0;
		border: 0 !important;
		border-top: 0.25rem solid var(--wp--preset--color--accent-green) !important;
		background: var(--wp--preset--color--base) !important;
		color: var(--wp--preset--color--contrast) !important;
		box-shadow: 0 0.875rem 1.875rem rgba(12, 89, 85, 0.15);
	}

	.banco-main-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container {
		left: auto;
		right: 0;
	}

	.banco-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
	}

	.banco-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.6rem 1.5rem;
		font-size: var(--wp--preset--font-size--small);
	}

	.banco-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.banco-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary);
	}
}

/* Un solo tamaño de texto para todo el header (menú, enlaces, botón de Agencias y buscador).
   En escritorio angosto baja de 17px (~1240px) a 13px (1025px) para que los 9 ítems del menú
   quepan en una línea, con ~5 % de holgura por diferencias de render. */
.banco-header {
	--banco-header-fs: 17px;
	/* Barra superior (enlaces, botón de Agencias y buscador): 2px menos que el menú. */
	--banco-header-top-fs: calc(var(--banco-header-fs) - 2px);
}

@media (min-width: 1025px) and (max-width: 1280px) {
	.banco-header {
		--banco-header-fs: clamp(13px, 1.62vw - 3.04px, 17px);
	}
}

.banco-main-nav {
	font-size: var(--banco-header-fs);
}

/* En escritorio con mouse los submenús también abren al pasar el cursor. */
@media (hover: hover) and (min-width: 1025px) {
	.banco-main-nav .has-child:hover > .wp-block-navigation__submenu-container,
	.banco-main-nav .has-child:focus-within > .wp-block-navigation__submenu-container {
		visibility: visible;
		opacity: 1;
		height: auto;
		overflow: visible;
	}
}

/* Menú móvil (overlay del bloque Navegación) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	color: var(--wp--preset--color--base) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	stroke: var(--wp--preset--color--base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

/* Core toma este padding del padding raíz (0 arriba/abajo en theme.json) y la X quedaba en la esquina.
   La X queda donde está la hamburguesa: .75rem + (71px de logo − 32px de ícono) / 2. */
.banco-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: calc(0.75rem + 1.2188rem) var(--wp--preset--spacing--50) 2rem;
}

.banco-main-nav .wp-block-navigation__responsive-container-close svg {
	width: 2rem;
	height: 2rem;
}

/* -------------------------------------------------------------------------- */
/* Header fijo                                                                */
/* Queda arriba al hacer scroll. La clase la pone theme.js (initStickyHeader). */
/* -------------------------------------------------------------------------- */

.banco-sticky-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transition: box-shadow 0.2s ease;
}

.banco-sticky-header.is-pinned {
	box-shadow: 0 0.375rem 1.25rem rgba(12, 89, 85, 0.12);
}

/* En pantallas ≤600px la barra de admin no es fija, así que no hay que dejarle espacio. */
@media (max-width: 600px) {
	.admin-bar .banco-sticky-header {
		top: 0;
	}
}

/* -------------------------------------------------------------------------- */
/* Hero carousel                                                              */
/* -------------------------------------------------------------------------- */

.banco-hero-carousel,
.wp-block-bancoizalqueno-hero-carousel {
	position: relative;
	overflow: hidden;
	background: #0f3f45;
}

.banco-hero-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	transition: transform 0.6s ease;
	will-change: transform;
}

.banco-hero-slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	overflow: hidden;
}

.banco-hero-slide .banco-media-desktop,
.banco-hero-slide .banco-media-mobile {
	margin: 0 !important;
}

.banco-hero-slide .banco-media-desktop img,
.banco-hero-slide .banco-media-mobile img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Todos los banners con la proporción del diseño: escritorio 1920×600 y móvil 450×550.
   Si alguien sube otra medida se recorta al centro y el carrusel no cambia de alto. */
.banco-hero-slide .banco-media-desktop img {
	aspect-ratio: 1920 / 600;
	object-fit: cover;
}

.banco-hero-slide .banco-media-mobile img {
	aspect-ratio: 450 / 550;
	object-fit: cover;
}

.banco-media-mobile {
	display: none;
}

/* Texto opcional sobre el banner (si el editor añade bloques al slide). */
.banco-hero-copy {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	max-width: 100rem;
	margin-inline: auto;
	padding-inline: clamp(4rem, 10vw, 12rem);
}

.banco-hero-copy > * {
	margin: 0 0 0.5rem;
	max-width: 38rem;
}

.banco-hero-title {
	color: var(--wp--preset--color--base) !important;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.05;
	text-shadow: 0 2px 1rem rgba(0, 0, 0, 0.25);
}

.banco-hero-claim {
	color: var(--wp--preset--color--base) !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.banco-hero-carousel > .banco-carousel-ui {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.banco-hero-carousel .banco-carousel-prev,
.banco-hero-carousel .banco-carousel-next {
	pointer-events: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: clamp(2.25rem, 4vw, 4rem);
	height: clamp(2.25rem, 4vw, 4rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	transition: color 0.2s;
}

.banco-hero-carousel .banco-carousel-prev:hover,
.banco-hero-carousel .banco-carousel-next:hover {
	color: var(--wp--preset--color--base);
}

.banco-hero-carousel .banco-carousel-ui svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.banco-hero-carousel .banco-carousel-prev {
	left: clamp(0.5rem, 3vw, 3.5rem);
}

.banco-hero-carousel .banco-carousel-next {
	right: clamp(0.5rem, 3vw, 3.5rem);
}

/* Con un solo slide no hay flechas (el PHP ya no las imprime; esto cubre contenido guardado con ellas). */
.banco-hero-carousel[data-single] .banco-carousel-ui {
	display: none;
}

/* Canvas del Editor: .is-root-container no existe en el front. */
.is-root-container .banco-hero-carousel {
	overflow: visible !important;
	height: auto !important;
}

/* En algunas vistas (p. ej. "Editar el patrón" dentro de una plantilla) el
   truco de márgenes negativos de alignfull (basado en 50vw) se calcula sobre
   un contenedor angosto y deja la tarjeta encogida. Lo anulamos en el editor. */
.is-root-container .banco-hero-carousel.alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.is-root-container .banco-hero-track {
	display: flex !important;
	flex-wrap: wrap !important;
	transform: none !important;
	gap: 1rem;
	align-items: flex-start;
}

.is-root-container .banco-hero-slide {
	flex: 1 1 18.75rem !important;
	width: auto !important;
	max-width: 23.75rem !important;
	min-height: 0 !important;
	height: auto !important;
	overflow: visible !important;
	margin-bottom: 0;
	background: var(--wp--preset--color--surface);
	border-radius: 1.15rem;
	box-shadow: 0 0.375rem 1.125rem rgba(11, 122, 124, 0.1);
	padding: 0.85rem;
}

.is-root-container .banco-hero-slide .banco-media-desktop,
.is-root-container .banco-hero-slide .banco-media-mobile,
.is-root-container figure.banco-media-desktop,
.is-root-container figure.banco-media-mobile {
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 0 0 0.75rem !important;
}

.is-root-container .banco-hero-slide .banco-media-desktop img,
.is-root-container .banco-hero-slide .banco-media-mobile img {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	max-width: 100% !important;
	object-fit: cover;
	border-radius: 0.6rem;
}

.is-root-container .banco-media-mobile {
	display: block !important;
}

.is-root-container .banco-hero-copy {
	position: static !important;
	min-height: 0 !important;
	padding: 0.25rem 0 0 !important;
	display: block !important;
}

.is-root-container .banco-hero-copy > * {
	max-width: none !important;
	margin: 0 0 0.4rem !important;
}

.is-root-container .banco-hero-title,
.is-root-container .banco-hero-claim {
	color: var(--wp--preset--color--primary) !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-shadow: none !important;
	font-size: 1rem !important;
	line-height: 1.3 !important;
}

.is-root-container .banco-carousel-ui,
.is-root-container .banco-creditos-ui {
	display: none !important;
}

.banco-hero-editor-help {
	margin: 0 0 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.4rem;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.banco-hero-slide-label {
	margin: 0 0 0.6rem;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.4;
}

.banco-hero-editor-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.banco-hero-editor-nav .banco-carousel-prev,
.banco-hero-editor-nav .banco-carousel-next {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid #fff;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.banco-hero-editor-nav .banco-carousel-prev:disabled,
.banco-hero-editor-nav .banco-carousel-next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.banco-hero-editor-count {
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	min-width: 3.5rem;
	text-align: center;
}

.banco-media-field-label {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

.banco-media-field-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.banco-media-field-alt {
	margin-top: 0.75rem;
}

.block-editor-block-list__block[data-type="bancoizalqueno/hero-carousel"] .block-list-appender {
	margin: 0.75rem 0 0;
}

.banco-add-slide {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 0.85rem 1.25rem;
	border: 2px dashed #fff;
	border-radius: 0.75rem;
	background: #ffffff;
	color: #00a1b1;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
}

.banco-add-slide:hover {
	background: #e8f4f4;
}

/* -------------------------------------------------------------------------- */
/* Quiénes somos                                                              */
/* -------------------------------------------------------------------------- */

.wp-block-image.is-style-rounded-photo img {
	border-radius: 2.5rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.banco-about .wp-block-image.is-style-rounded-photo {
	margin: 0;
}

.banco-about .wp-block-image.is-style-rounded-photo img {
	aspect-ratio: 1 / 1;
	object-position: 60% center;
	border-radius: 3.75rem;
}

.banco-about .wp-block-columns {
	gap: clamp(2rem, 6vw, 7.25rem);
}

.banco-about p {
	margin: 0 0 1.35em;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.33;
	text-align: justify;
	hyphens: auto;
}

.banco-about .wp-block-buttons {
	margin-top: 0.6rem !important;
}

.banco-section-title {
	margin-top: 0;
}

/* -------------------------------------------------------------------------- */
/* Estamos cerca de ti                                                        */
/* -------------------------------------------------------------------------- */

.banco-cerca-grid {
	display: flex;
	justify-content: space-around;
	gap: 2rem;
	margin-top: 1.25rem;
}

.banco-cerca-grid > * {
	margin-block-start: 0 !important;
}

.wp-block-group.is-style-icon-item,
.banco-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	flex: 0 1 auto;
	text-align: center;
}

.banco-icon-item > * {
	margin: 0 !important;
}

.banco-icon-item img,
.wp-block-group.is-style-icon-item img {
	display: block;
	width: 72px !important;
	height: auto !important;
	margin-inline: auto;
}

.banco-icon-item p,
.wp-block-group.is-style-icon-item p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	overflow-wrap: anywhere;
}

.banco-icon-item p strong,
.banco-icon-item p a {
	font-weight: 600;
}

.banco-icon-item p + .wp-block-buttons {
	margin-top: -1.2rem !important;
}

.banco-icon-item a {
	color: inherit;
	text-decoration: none;
}

.banco-icon-item a:hover {
	color: var(--wp--preset--color--primary);
}

.banco-icon-item .wp-block-button.is-style-orange-pill .wp-block-button__link {
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1.175rem);
	font-weight: 400;
	border-radius: 0.375rem;
	padding: 0.25em 1.1em;
}

/* -------------------------------------------------------------------------- */
/* Créditos                                                                   */
/* -------------------------------------------------------------------------- */

.banco-creditos {
	padding-bottom: calc(var(--wp--preset--spacing--70) * 0.5) !important;
}

.banco-creditos h2 {
	margin-bottom: 1em;
	padding-inline: var(--wp--preset--spacing--50);
}

.banco-creditos-carousel {
	position: relative;
}

.banco-creditos-track > *,
.banco-credit-card > *,
.banco-credit-panel > * {
	margin-block-start: 0 !important;
}

.banco-creditos-track {
	--card-w: clamp(15rem, 19.6vw, 23.5rem);
	display: flex;
	align-items: stretch;
	gap: clamp(1rem, 2.1vw, 2.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--50);
	padding: 0.5rem var(--wp--preset--spacing--50) 1rem;
	scrollbar-width: none;
	cursor: grab;
}

.banco-creditos-track::-webkit-scrollbar {
	display: none;
}

.banco-creditos-track.is-static {
	justify-content: center;
	cursor: default;
}

.banco-creditos-track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.banco-creditos-track.is-dragging a {
	pointer-events: none;
}

.banco-credit-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--card-w, 17.5rem);
	scroll-snap-align: start;
	border-radius: 1.25rem;
	overflow: hidden;
	background: var(--wp--preset--color--field);
}

.banco-credit-card .wp-block-image,
.banco-credit-card figure {
	margin: 0;
}

.wp-block-image.is-style-credit-card img,
.banco-credit-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 376 / 445;
	object-fit: cover;
	border-radius: 0;
	pointer-events: none;
	-webkit-user-drag: none;
}

.banco-credit-panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1rem;
}

.banco-credit-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.4em;
	margin: 0;
	color: var(--wp--preset--color--contrast) !important;
	font-family: inherit;
	font-size: clamp(1.05rem, 1rem + 0.47vw, 1.25rem) !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
}

.banco-credit-panel .wp-block-buttons {
	margin: 0;
	justify-content: center;
}

.banco-credit-panel .wp-block-button.is-style-orange-pill .wp-block-button__link {
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1.175rem);
	font-weight: 400;
	border-radius: 0.375rem;
	padding: 0.25em 1.1em;
}

.banco-creditos-ui .banco-carousel-prev,
.banco-creditos-ui .banco-carousel-next {
	position: absolute;
	top: 40%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 0.375rem 1.125rem rgba(12, 89, 85, 0.22);
	cursor: pointer;
	transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.banco-creditos-ui .banco-carousel-prev {
	left: 1rem;
}

.banco-creditos-ui .banco-carousel-next {
	right: 1rem;
}

.banco-creditos-ui .banco-carousel-prev:hover,
.banco-creditos-ui .banco-carousel-next:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.banco-creditos-ui svg {
	width: 1.625rem;
	height: 1.625rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.banco-creditos-ui [disabled] {
	opacity: 0;
	pointer-events: none;
}

.is-root-container .banco-creditos-track {
	flex-wrap: wrap;
	overflow-x: visible;
}

.is-root-container .banco-credit-card {
	flex: 1 1 13.75rem;
	min-width: 13.75rem;
}

.banco-credit-item-editor {
	padding: 0.75rem;
}

.banco-credit-item-editor .banco-media-field img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	border-radius: 0.6rem;
}

.banco-credit-item-fields {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Ahorros / Remesas                                                          */
/* -------------------------------------------------------------------------- */

.banco-products {
	padding-left: clamp(1rem, 1.7vw, 2rem) !important;
	padding-right: clamp(1rem, 1.7vw, 2rem) !important;
	padding-bottom: calc(var(--wp--preset--spacing--70) * 1.1) !important;
}

.banco-products .banco-products-grid {
	gap: clamp(1rem, 1.4vw, 1.6rem);
	margin: 0;
}

.wp-block-cover.is-style-product-card {
	min-height: clamp(32.5rem, 44vw, 52.625rem);
	height: 100%;
	align-items: flex-end;
	padding: 0 clamp(1.25rem, 5vw, 7rem) clamp(2rem, 3.5vw, 3.75rem);
	border-radius: 1.875rem;
	overflow: hidden;
	background: var(--wp--preset--color--primary);
}

/* La foto ocupa la parte superior y se funde en teal sólido. */
.wp-block-cover.is-style-product-card .wp-block-cover__image-background {
	height: 72% !important;
	bottom: auto !important;
	object-position: center top;
}

.wp-block-cover.is-style-product-card .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(to bottom, rgba(0, 161, 177, 0) 30%, rgba(0, 161, 177, 0.55) 52%, var(--wp--preset--color--primary) 72%) !important;
}

.wp-block-cover.is-style-product-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: none;
	text-align: center;
	color: var(--wp--preset--color--base);
}

.wp-block-cover.is-style-product-card .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.wp-block-cover.is-style-product-card h3,
.banco-product-title {
	margin: 0 0 1.2rem !important;
	color: var(--wp--preset--color--base) !important;
	font-size: var(--wp--preset--font-size--x-large) !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-shadow: 0 2px 1rem rgba(0, 60, 66, 0.25);
}

.wp-block-cover.is-style-product-card .banco-product-lead {
	max-width: 29em;
	margin: 0 0 clamp(1.75rem, 3vw, 3.2rem) !important;
	color: var(--wp--preset--color--base) !important;
	font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.225rem);
	line-height: 1.45;
}

.wp-block-cover.is-style-product-card .banco-product-lead a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wp-block-cover.is-style-product-card .banco-product-title:has(+ .banco-product-lead-sub) {
	margin-bottom: 0 !important;
}

.wp-block-cover.is-style-product-card .banco-product-lead-sub {
	margin: 0.1em 0 1.2rem !important;
	font-size: clamp(1.05rem, 0.775rem + 0.55vw, 1.25rem);
}

.banco-product-list-cols.wp-block-columns {
	justify-content: center;
	gap: 0 clamp(1.5rem, 4vw, 4rem);
	margin: 0 0 clamp(1.75rem, 3vw, 3.2rem) !important;
}

.banco-product-list-cols > .wp-block-column {
	flex: 0 0 auto !important;
}

.banco-product-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
	color: var(--wp--preset--color--base);
}

.banco-product-list li {
	margin-bottom: 0.55em;
	font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.225rem);
	line-height: 1.4;
}

.banco-product-list li::before {
	content: "•";
	margin-right: 0.35em;
}

/* -------------------------------------------------------------------------- */
/* Adulto mayor                                                               */
/* -------------------------------------------------------------------------- */

.banco-adulto {
	padding-top: clamp(2.5rem, 4vw, 4.5rem) !important;
	overflow: hidden;
}

.banco-adulto .banco-adulto-grid {
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
}

.banco-adulto-intro,
.banco-adulto-benefits {
	position: relative;
	z-index: 1;
	padding-bottom: 2rem;
}

.banco-adulto h2.banco-adulto-title {
	max-width: none;
	margin: 0 0 0.35em;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	line-height: 0.95;
	white-space: nowrap;
}

.banco-adulto-intro p {
	max-width: 22em;
	margin: 0 0 1.5em;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
}

.banco-adulto-intro .wp-block-buttons {
	margin-top: 0 !important;
}

.banco-adulto figure.banco-cutout-photo {
	margin: 0;
}

.banco-adulto figure.banco-cutout-photo img {
	display: block;
	width: 100%;
	max-width: 40rem;
	height: auto;
	margin-inline: auto;
}

.banco-check-list {
	display: grid;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.banco-check-list li {
	position: relative;
	padding-left: 3.1rem;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.25;
}

.banco-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 2.1rem;
	height: 2.1rem;
	background: url("../images/icon-check.svg") no-repeat center / contain;
}

/* -------------------------------------------------------------------------- */
/* Contacto                                                                   */
/* -------------------------------------------------------------------------- */

.banco-contacto h2 {
	margin-bottom: 0.6em;
}

.banco-contact-form,
.wpcf7 form,
.wpforms-form,
.frm-fluent-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1rem;
	width: 100%;
	margin-inline: auto;
}

.banco-contact-form p {
	margin: 0;
}

.banco-contact-form .banco-field-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.banco-contact-form label,
.wpcf7 label,
.wpforms-field-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.banco-contact-form input,
.banco-contact-form select,
.banco-contact-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.wpforms-field input,
.wpforms-field select,
.wpforms-field textarea {
	width: 100%;
	border: 2px solid transparent;
	border-radius: 0;
	padding: 0.55em 1.1em;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--field);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.2s, background-color 0.2s;
}

.banco-contact-form input:focus,
.banco-contact-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: #eef7f8;
}

.banco-contact-form input::placeholder,
.banco-contact-form textarea::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.banco-field-select select {
	padding-right: 3.5rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 8 8 8 8-8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
	background-size: 1.6rem;
	cursor: pointer;
}

.banco-field-select select:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
	background-color: #008a98;
}

.banco-field-select select option {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

.banco-contact-form textarea,
.wpcf7 textarea,
.wpforms-field textarea {
	min-height: 11.5rem;
	resize: vertical;
	grid-column: 1 / -1;
}

.banco-contact-form .banco-field-full,
.wpcf7 .banco-field-full {
	grid-column: 1 / -1;
}

.banco-field-submit {
	display: flex;
	justify-content: center;
	grid-column: 1 / -1;
	margin-top: 0.1rem !important;
}

.banco-contact-form .banco-submit,
.wpcf7 input[type="submit"],
.wpforms-submit,
.frm-fluent-form .ff-btn-submit {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(11.25rem, 13vw, 15.625rem);
	background: var(--wp--preset--color--accent-orange) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0;
	border-radius: 0.5rem;
	padding: 0.55em 2em;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s;
}

.banco-contact-form .banco-submit:hover,
.wpcf7 input[type="submit"]:hover {
	background: #d9531a !important;
}

.banco-contact-notice {
	max-width: 42.5rem;
	margin: 0 auto 1.5rem;
	padding: 0.85rem 1.25rem;
	border-radius: 0.6rem;
	text-align: center;
	font-weight: 600;
}

.banco-contact-notice--success {
	background: rgba(110, 178, 68, 0.16);
	color: #4a7d2a;
}

.banco-contact-notice--error {
	background: rgba(240, 101, 34, 0.14);
	color: #a3470f;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

.banco-footer {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	padding-top: clamp(2.5rem, 4vw, 4.5rem) !important;
}

.banco-footer a,
.banco-footer h2,
.banco-footer h3,
.banco-footer p,
.banco-footer li {
	color: var(--wp--preset--color--base) !important;
}

.banco-footer a:hover {
	text-decoration: underline;
}

.banco-footer .banco-footer-top {
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
}

.banco-footer .banco-brand > * {
	margin: 0;
}

.banco-footer .banco-logo img {
	width: clamp(9.375rem, 13vw, 16.25rem);
}

.banco-footer .banco-footer-links {
	flex: 1;
	justify-content: space-between !important;
	align-items: flex-start;
	gap: 1.5rem;
	margin-top: 1rem;
	padding-bottom: 1.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

.banco-footer-links p {
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.3;
}

.banco-footer-contact-item a {
	font-weight: 400 !important;
}

.banco-footer .banco-footer-products {
	margin-top: 2.5rem !important;
	gap: 2rem;
}

/* Proporciones de columnas del footer de la referencia: 1.15 / 1 / 1 / .9 */
@media (min-width: 1025px) {
	.banco-footer .banco-footer-products > .wp-block-column:nth-child(1) { flex: 1.15 1 0; }
	.banco-footer .banco-footer-products > .wp-block-column:nth-child(4) { flex: 0.9 1 0; }
}

.banco-footer .wp-block-heading {
	margin: 0 0 0.25rem;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: uppercase;
}

.banco-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.banco-footer li {
	margin: 0;
	font-size: inherit;
	line-height: 1.55;
}

.banco-footer-copy {
	margin-top: 4rem !important;
	padding-top: 0 !important;
	padding-bottom: 2.5rem !important;
	text-align: center;
}

.banco-footer-copy p {
	font-size: 0.9em !important;
}

/* -------------------------------------------------------------------------- */
/* Calculadora de cuota (modal)                                               */
/* -------------------------------------------------------------------------- */

.banco-calc {
	width: min(92vw, 30rem);
	padding: 2.25rem 2rem 2rem;
	border: 0;
	border-radius: 1.25rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--montserrat);
	box-shadow: 0 1.875rem 4.375rem rgba(0, 40, 45, 0.35);
}

.banco-calc::backdrop {
	background: rgba(8, 50, 55, 0.6);
}

.banco-calc[open] {
	animation: banco-calc-in 0.22s ease-out;
}

@keyframes banco-calc-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

.banco-calc__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.375rem;
	height: 2.375rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.banco-calc__close:hover {
	background: var(--wp--preset--color--surface);
}

.banco-calc__close svg {
	width: 1.375rem;
	height: 1.375rem;
	stroke: var(--wp--preset--color--contrast);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.banco-calc__title {
	margin: 0 0 0.3rem;
	color: var(--wp--preset--color--primary);
	font-size: 1.8rem;
	font-weight: 800;
}

.banco-calc__note {
	margin: 0 0 1.4rem;
	font-size: 0.9rem;
}

.banco-calc__form {
	display: grid;
	gap: 1rem;
}

.banco-calc__form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.92rem;
	font-weight: 600;
}

.banco-calc__form input {
	border: 2px solid transparent;
	background: var(--wp--preset--color--field);
	padding: 0.6em 0.9em;
	font: inherit;
	font-size: 1rem;
	color: inherit;
}

.banco-calc__form input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

.banco-calc__submit {
	margin-top: 0.4rem;
	padding: 0.7em 1.4em;
	border: 0;
	border-radius: 0.375rem;
	background: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.banco-calc__submit:hover {
	background: #d9531a;
}

.banco-calc__result {
	margin-top: 1.4rem;
	padding: 1.1rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.banco-calc__result span {
	display: block;
	font-size: 0.9rem;
}

.banco-calc__result strong {
	display: block;
	color: var(--wp--preset--color--primary);
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1.2;
}

.banco-calc__result small {
	font-size: 0.82rem;
}

/* -------------------------------------------------------------------------- */
/* Landing de créditos                                                        */
/* -------------------------------------------------------------------------- */

/* Botón compacto de las tarjetas del listado (va después de los estilos pill para ganarles). */
.wp-block-button.banco-btn-xs .wp-block-button__link {
	font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1.0625rem);
	padding: 0.7em 0.8em;
	border-radius: 0.75rem;
	white-space: nowrap;
}

/* El banner llega hasta el footer: sin el blockGap raíz, que dejaba una franja blanca. */
.page-template-page-creditos .wp-site-blocks > footer,
.page-template-page-calculadora-cuota .wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Hero y banner comparten el ancho de contenido del listado. */
.banco-page-hero.wp-block-cover,
.banco-calc-banner.wp-block-cover {
	padding: 0;
	color: var(--wp--preset--color--base);
}

/* Con "posición del contenido" core encoge este contenedor al ancho del texto; aquí se
   mantiene a lo ancho y el texto se ubica dentro según la posición elegida. */
.banco-page-hero .wp-block-cover__inner-container,
.banco-calc-banner .wp-block-cover__inner-container {
	z-index: 2;
	width: 100% !important;
	max-width: calc(95rem + 2 * var(--wp--preset--spacing--50));
	margin-inline: auto !important;
	padding-inline: var(--wp--preset--spacing--50);
}

.banco-page-hero__text > *,
.banco-calc-banner__text > * {
	margin-block: 0;
}

/* Hero. La posición del contenido se elige en el editor (barra del bloque Portada):
   centro = foto completa con velo turquesa; derecha/izquierda = la foto cubre ~94 % del
   ancho del lado contrario y se funde en turquesa hacia el texto. */
.banco-page-hero.wp-block-cover {
	min-height: clamp(26.25rem, 35.5vw, 42.5625rem);
	background: var(--wp--preset--color--primary);
}

.banco-page-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: radial-gradient(ellipse at center, rgba(0, 161, 177, 0.92) 0%, rgba(0, 161, 177, 0.72) 45%, rgba(0, 161, 177, 0.35) 100%) !important;
}

@media (min-width: 1025px) {
	.banco-page-hero.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .wp-block-cover__image-background {
		width: 94%;
		object-position: left center;
	}

	.banco-page-hero:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .wp-block-cover__background {
		background: linear-gradient(90deg, rgba(0, 161, 177, 0) 32%, rgba(0, 140, 150, 0.45) 43%, rgba(0, 157, 172, 0.9) 55%, var(--wp--preset--color--primary) 66%) !important;
	}

	.banco-page-hero.wp-block-cover:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .wp-block-cover__image-background {
		left: 6%;
		width: 94%;
		object-position: right center;
	}

	.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .wp-block-cover__background {
		background: linear-gradient(270deg, rgba(0, 161, 177, 0) 32%, rgba(0, 140, 150, 0.45) 43%, rgba(0, 157, 172, 0.9) 55%, var(--wp--preset--color--primary) 66%) !important;
	}

	/* Los planos diagonales acompañan al texto. */
	.banco-page-hero.wp-block-cover:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left)::after {
		transform: scaleX(-1);
	}
}

/* Planos diagonales sutiles del lado derecho. */
.banco-page-hero.wp-block-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(118deg, transparent 63%, rgba(0, 72, 92, 0.12) 63.2%, rgba(0, 72, 92, 0.03) 82%, transparent 82.2%),
		linear-gradient(62deg, transparent 70%, rgba(0, 72, 92, 0.1) 70.2%, rgba(0, 72, 92, 0.02) 100%),
		linear-gradient(140deg, transparent 84%, rgba(255, 255, 255, 0.06) 84.2%);
}

.banco-page-hero .wp-block-cover__inner-container {
	padding-block: 3rem;
}

.banco-page-hero__text {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.banco-page-hero__text .banco-page-hero__lead {
	margin-inline: auto;
}

.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-page-hero__text,
.banco-page-hero:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-page-hero__text {
	text-align: left;
}

.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-page-hero__lead,
.banco-page-hero:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-page-hero__lead {
	margin-inline: 0;
}

@media (min-width: 1025px) {
	.banco-page-hero:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-page-hero__text {
		margin-left: 56%;
		margin-right: 0;
	}

	.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-page-hero__text {
		max-width: min(40rem, 44%);
		margin-left: 0;
		margin-right: auto;
	}
}

.banco-page-hero .banco-page-hero__title {
	margin-bottom: 0.3em;
	font-size: clamp(2.5rem, 1.4rem + 2.9vw, 4rem);
	font-weight: 800;
	line-height: 1;
}

.banco-page-hero__lead {
	max-width: 15em;
	font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.875rem);
	line-height: 1.2;
}

/* Listado */
.banco-credit-list h2 {
	margin-bottom: clamp(1.5rem, 2.4vw, 2.9rem);
}

.banco-credit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 1.8vw, 2.1rem);
	align-items: start;
}

.banco-credit-grid > *,
.banco-credit-item > *,
.banco-credit-item__body > * {
	margin-block: 0 !important;
}

.banco-credit-item {
	overflow: hidden;
	border-radius: 1.25rem;
	background: var(--wp--preset--color--field);
}

.banco-credit-item img {
	display: block;
	width: 100%;
	aspect-ratio: 482 / 336;
	object-fit: cover;
}

.banco-credit-item__body {
	padding: clamp(1.5rem, 2.3vw, 2.75rem) clamp(1.25rem, 2.2vw, 2.6rem) clamp(1.75rem, 2.7vw, 3.2rem) clamp(1.25rem, 2.9vw, 3.5rem);
}

.banco-credit-item h3 {
	min-height: 2.4em;
	margin-bottom: 0.45em !important;
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1.05rem, 1rem + 0.47vw, 1.25rem);
	font-weight: 700;
	line-height: 1.2;
}

.banco-credit-item p {
	margin-bottom: 1.3em !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-align: justify;
	hyphens: auto;
}

.banco-credit-item .wp-block-buttons {
	gap: 0.75rem;
}

/* Banner calculadora. Igual que el hero, la posición del contenido se elige en el editor:
   izquierda/derecha = verde oscuro del lado del texto y la foto visible del otro;
   centro = velo verde parejo y texto centrado. */
.banco-calc-banner.wp-block-cover {
	min-height: clamp(28.75rem, 33.5vw, 40.25rem);
	background: var(--wp--preset--color--contrast);
}

.banco-calc-banner .wp-block-cover__background {
	opacity: 1 !important;
	background: radial-gradient(ellipse at center, rgba(12, 89, 85, 0.9) 0%, rgba(12, 89, 85, 0.7) 50%, rgba(12, 89, 85, 0.45) 100%) !important;
}

@media (min-width: 1025px) {
	.banco-calc-banner.wp-block-cover:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .wp-block-cover__image-background {
		object-position: right center;
	}

	.banco-calc-banner:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .wp-block-cover__background {
		background: linear-gradient(90deg, rgba(12, 89, 85, 0.95) 0%, rgba(12, 89, 85, 0.78) 22%, rgba(12, 89, 85, 0.45) 42%, rgba(12, 89, 85, 0) 66%) !important;
	}

	.banco-calc-banner.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .wp-block-cover__image-background {
		object-position: left center;
	}

	.banco-calc-banner:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .wp-block-cover__background {
		background: linear-gradient(270deg, rgba(12, 89, 85, 0.95) 0%, rgba(12, 89, 85, 0.78) 22%, rgba(12, 89, 85, 0.45) 42%, rgba(12, 89, 85, 0) 66%) !important;
	}

	/* .wp-block-cover extra: gana a la regla general de más abajo que alinea el texto. */
	.banco-calc-banner.wp-block-cover:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-calc-banner__text {
		margin-left: auto;
	}
}

.banco-calc-banner .wp-block-cover__inner-container {
	padding-block: clamp(2.5rem, 4.2vw, 5rem);
}

.banco-calc-banner__text {
	max-width: 45rem;
	margin-inline: auto;
	text-align: center;
}

.banco-calc-banner__text > * {
	margin-inline: auto;
}

.banco-calc-banner__text .wp-block-buttons {
	justify-content: center;
}

.banco-calc-banner:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-calc-banner__text,
.banco-calc-banner:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-calc-banner__text {
	margin-inline: 0;
	text-align: left;
}

.banco-calc-banner:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-calc-banner__text > *,
.banco-calc-banner:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-calc-banner__text > * {
	margin-inline: 0;
}

.banco-calc-banner:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-calc-banner__text .wp-block-buttons,
.banco-calc-banner:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-calc-banner__text .wp-block-buttons {
	justify-content: flex-start;
}

.banco-calc-banner h2 {
	max-width: 10.6em;
	margin-bottom: 0.45em;
	line-height: 1.12;
}

.banco-calc-banner p {
	max-width: 31.5em;
	margin-bottom: 1.5em;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.33;
}

.banco-calc-banner .banco-calc-banner__note {
	max-width: 47em;
	margin-top: 1.6em;
	margin-bottom: 0;
	font-size: clamp(0.8rem, 0.75rem + 0.15vw, 0.9375rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------- */
/* Landing de créditos personales                                             */
/* -------------------------------------------------------------------------- */

/* Pestañas con imagen (bloque bancoizalqueno/tabs). */
.banco-tabs__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.75rem, 2.1vw, 2.5rem);
	margin-bottom: clamp(1.75rem, 3vw, 3.6rem);
}

.banco-tabs__tab {
	padding: 0.55em 1.05em;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: clamp(1.05rem, 0.6rem + 1vw, 2.0625rem);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.banco-tabs__tab:hover {
	background: #d9d9d9;
}

.banco-tabs__tab[aria-selected="true"] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.banco-tabs__card {
	display: grid;
	grid-template-columns: 52fr 48fr;
	min-height: clamp(20rem, 25.5vw, 30.625rem);
	overflow: hidden;
	border-radius: clamp(1.125rem, 1.6vw, 1.875rem);
	background: var(--wp--preset--color--surface);
}

.banco-tabs__card--no-media {
	grid-template-columns: 1fr;
}

.banco-tabs__media {
	margin: 0;
}

.banco-tabs__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

.banco-tabs__panels {
	display: flex;
	align-items: center;
	padding: clamp(1.75rem, 3vw, 3.5rem) clamp(1.5rem, 6vw, 7.5rem);
}

.banco-tabs__panel {
	width: 100%;
}

.banco-tabs__panel:focus-visible {
	outline-offset: 0.5rem;
	border-radius: 0.25rem;
}

.banco-tabs__panel:not([hidden]) {
	animation: banco-fade-in 0.3s ease;
}

.banco-tab > * {
	margin-block: 0;
}

.banco-tab > * + * {
	margin-top: 1em;
}

.banco-tabs .is-style-arrow-list {
	font-size: clamp(1rem, 0.6rem + 0.85vw, 1.6875rem);
	line-height: 1.15;
}

.banco-tabs .is-style-arrow-list li {
	max-width: 14em;
}

@keyframes banco-fade-in {
	from {
		opacity: 0;
		transform: translateY(0.375rem);
	}
}

/* Estilo "Viñeta con flecha" del bloque Lista. */
.wp-block-list.is-style-arrow-list {
	display: grid;
	gap: clamp(0.9rem, 1.5vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-arrow-list li {
	position: relative;
	padding-left: 1.6em;
}

.is-style-arrow-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.02em;
	width: 1.1em;
	height: 1.1em;
	background: url("../images/icon-arrow-square.svg") no-repeat center / contain;
}

.banco-product-info .banco-product-info__cta {
	margin-top: clamp(1.75rem, 2.6vw, 3.1rem);
}

/* Preguntas frecuentes (bloques Detalles). */
.banco-faq h2 {
	margin-bottom: 0.1em;
}

.banco-faq .banco-faq__lead {
	margin-top: 0;
	margin-bottom: clamp(1.5rem, 2.4vw, 2.9rem);
	font-size: clamp(1rem, 0.6rem + 0.85vw, 1.6875rem);
}

.banco-faq__list > * {
	margin-block: 0 !important;
}

.banco-faq .wp-block-details:nth-child(odd) {
	background: var(--wp--preset--color--surface);
}

.banco-faq .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: clamp(3.5rem, 4vw, 4.8125rem);
	padding: 0.6rem clamp(1rem, 1.5vw, 1.6rem);
	color: var(--wp--preset--color--contrast);
	font-size: clamp(1rem, 0.6rem + 0.85vw, 1.6875rem);
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
	transition: color 0.2s;
}

.banco-faq .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.banco-faq .wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	border-right: 0.1875rem solid currentColor;
	border-bottom: 0.1875rem solid currentColor;
	transform: translateY(-0.25rem) rotate(45deg);
	transition: transform 0.2s;
}

.banco-faq .wp-block-details[open] > summary::after {
	transform: translateY(0.1875rem) rotate(-135deg);
}

.banco-faq .wp-block-details > summary:hover {
	color: var(--wp--preset--color--primary);
}

.banco-faq .wp-block-details > :not(summary) {
	max-width: 62em;
	margin: 0 !important;
	padding: 0 clamp(1rem, 1.5vw, 1.6rem) 1em;
	font-size: clamp(0.95rem, 0.6rem + 0.5vw, 1.25rem);
	line-height: 1.45;
}

.banco-faq .wp-block-details > :last-child:not(summary) {
	padding-bottom: clamp(1rem, 1.4vw, 1.6rem);
}

.banco-faq .wp-block-details[open] > :not(summary) {
	animation: banco-fade-in 0.25s ease;
}

.banco-faq .wp-block-details a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Banner "Solicita tu crédito": el banner verde de la calculadora con datos de contacto.
   El ícono de cada dato sale del enlace (mailto: o tel:), así sirve al editar la lista. */
.banco-apply-banner .banco-apply-banner__label {
	margin-bottom: 0.5em;
	font-weight: 700;
}

.banco-contact-list {
	display: grid;
	gap: 0.5em;
	margin-top: 0;
	margin-bottom: 1.6em;
	padding: 0;
	list-style: none;
	font-size: clamp(0.95rem, 0.6rem + 0.5vw, 1.1875rem);
}

.banco-contact-list li {
	display: flex;
	align-items: center;
	gap: 0.55em;
}

.banco-contact-list li:has(> a[href^="mailto:"])::before,
.banco-contact-list li:has(> a[href^="tel:"])::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background-color: currentColor;
	-webkit-mask: url("../images/icon-mail-line.svg") no-repeat center / contain;
	mask: url("../images/icon-mail-line.svg") no-repeat center / contain;
}

.banco-contact-list li:has(> a[href^="tel:"])::before {
	-webkit-mask-image: url("../images/icon-phone-line.svg");
	mask-image: url("../images/icon-phone-line.svg");
}

.banco-contact-list a,
.banco-contact-list a:hover {
	color: inherit;
	overflow-wrap: anywhere;
}

.banco-contact-list a:hover {
	text-decoration: underline;
}

/* Editor: pestañas con imagen. */
.banco-editor-help {
	margin: 0 0 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.4rem;
	background: rgba(0, 161, 177, 0.1);
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.banco-tabs-editor {
	padding: 1rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--surface);
}

.banco-tabs-editor__media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
}

.banco-tabs-editor__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0.6rem;
}

.banco-tabs-editor__tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1rem;
}

.banco-tabs-editor__tabs > * {
	margin-block: 0 !important;
}

.banco-tab-editor {
	padding: 1rem;
	border-radius: 0.75rem;
	background: var(--wp--preset--color--base);
}

.banco-tab-editor__label {
	margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Landing de calculadora de cuota                                            */
/* -------------------------------------------------------------------------- */

/* Hero y banner reutilizan .banco-page-hero y .banco-calc-banner (Landing de créditos). */

/* Hero con el texto a la izquierda: el turquesa se desvanece antes (≈ mitad del ancho)
   que en el hero de créditos personales, para dejar más foto a la vista. */
@media (min-width: 1025px) {
	.banco-cuota-hero.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .wp-block-cover__background {
		background: linear-gradient(90deg, var(--wp--preset--color--primary) 26%, rgba(0, 157, 172, 0.9) 34%, rgba(0, 140, 150, 0.45) 43%, rgba(0, 161, 177, 0) 52%) !important;
	}
}

/* Vistas apiladas: los saltos de línea del título son solo para escritorio; aquí el título
   usa todo el ancho. Cada <br> lleva un espacio antes para que las palabras no se peguen. */
@media (max-width: 1024px) {
	.banco-cuota-hero .banco-page-hero__title br {
		display: none;
	}
}

.banco-cuota-section h2 {
	margin-bottom: clamp(1.5rem, 3vw, 3.6rem);
}

/* Tarjeta blanca con los planos diagonales grises del diseño. */
.banco-cuota {
	max-width: 82.75rem;
	margin-inline: auto;
	padding: clamp(2rem, 4.6vw, 5.6rem) clamp(1.25rem, 7.9vw, 9.5rem) clamp(2.5rem, 6.5vw, 8rem);
	border-radius: clamp(1.5rem, 2.9vw, 3.5rem);
	background:
		linear-gradient(45deg, transparent 58%, rgba(0, 0, 0, 0.035) 58.1%, rgba(0, 0, 0, 0) 76%),
		linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0) 22%, transparent 22.1%),
		linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0) 16%, transparent 16.1%, transparent 44%, rgba(0, 0, 0, 0.03) 44.1%, rgba(0, 0, 0, 0) 62%),
		linear-gradient(-135deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0) 14%),
		#fcfcfc;
	color: var(--wp--preset--color--contrast);
}

.banco-cuota__form {
	max-width: 63.0625rem;
	margin-inline: auto;
}

.banco-cuota__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	font-size: clamp(1.05rem, 0.6rem + 0.95vw, 1.875rem);
	line-height: 1.2;
}

.banco-cuota__row + .banco-cuota__row {
	margin-top: clamp(0.9rem, 1.9vw, 2.25rem);
}

.banco-cuota__row > :first-child {
	flex: 1 1 auto;
}

.banco-cuota__field {
	position: relative;
	flex: 0 0 min(17.5625rem, 46%);
}

.banco-cuota__field input,
.banco-cuota__result {
	display: block;
	width: 100%;
	height: clamp(2.875rem, 2.8vw, 3.3125rem);
	border: 1px solid #1a1a1a;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: clamp(1rem, 0.7rem + 0.6vw, 1.5rem);
	text-align: right;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.banco-cuota__field input {
	padding: 0 0.75rem;
}

.banco-cuota__field input::placeholder {
	color: #b3b3b3;
	opacity: 1;
}

.banco-cuota__field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(0, 161, 177, 0.25);
}

.banco-cuota__field input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--accent-orange);
	box-shadow: 0 0 0 3px rgba(239, 101, 33, 0.2);
}

/* Prefijo y sufijo dentro del campo ($ / años / % anual). */
.banco-cuota__field::before,
.banco-cuota__field::after {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	font-size: clamp(0.8rem, 0.65rem + 0.3vw, 1rem);
	pointer-events: none;
}

.banco-cuota__field--prefix::before {
	content: attr(data-prefix);
}

.banco-cuota__field--prefix input {
	padding-left: 1.75rem;
}

.banco-cuota__field--suffix::after {
	content: attr(data-suffix);
}

.banco-cuota__error {
	margin: 0.9rem 0 0;
	color: #d9531a;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.banco-cuota__error:empty {
	display: none;
}

.banco-cuota__actions {
	display: grid;
	gap: clamp(0.9rem, 1.1vw, 1.3rem);
	margin-top: clamp(2rem, 3.3vw, 4rem);
}

.banco-cuota__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(3rem, 3vw, 3.5625rem);
	padding: 0.4em 1em;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: clamp(1rem, 0.7rem + 0.55vw, 1.45rem);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s;
}

.banco-cuota__btn--green {
	background: var(--wp--preset--color--accent-green);
}

.banco-cuota__btn--green:hover {
	background: #5c9a37;
}

.banco-cuota__btn--orange {
	background: var(--wp--preset--color--accent-orange);
}

.banco-cuota__btn--orange:hover {
	background: #d9531a;
}

.banco-cuota__row--result {
	margin-top: clamp(1.75rem, 2.3vw, 2.75rem);
}

.banco-cuota__result {
	display: flex;
	flex: 0 0 min(17.5625rem, 46%);
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	font-size: inherit;
	text-align: center;
	white-space: nowrap;
}

.banco-cuota__result.is-filled {
	border-color: var(--wp--preset--color--accent-green);
	background: #f4faf0;
	font-weight: 700;
}

.banco-cuota__note {
	margin: 1.1rem 0 0;
	font-size: clamp(0.8rem, 0.6rem + 0.4vw, 1.1875rem);
	line-height: 1.4;
}

/* -------------------------------------------------------------------------- */
/* Responsive — un solo DOM                                                   */
/* -------------------------------------------------------------------------- */

/* Por debajo de 1280px "Trabaja con nosotros" no cabe junto al buscador; sigue
   disponible en el menú (Conócenos). */
@media (max-width: 1280px) {
	.banco-header-info .banco-utility-link {
		display: none;
	}

	.banco-header-top .banco-header-side.is-layout-flex {
		grid-template-columns: minmax(7rem, 1fr) repeat(3, auto);
	}
}

@media (max-width: 1280px) {
	.banco-header-top .banco-header-info {
		gap: 1.25rem;
	}


	.banco-page-hero:is(.is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-page-hero__text {
		margin-left: 50%;
	}

	.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left) .banco-page-hero__text {
		max-width: min(40rem, 50%);
	}
}

@media (max-width: 1024px) {
	/* Header: logo + buscador; enlaces pasan al menú y al footer. */
	.banco-header-top .banco-header-row {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.banco-header-top .banco-header-side {
		width: 100%;
		align-items: stretch;
		gap: 0;
	}

	.banco-header-top .banco-header-info {
		display: none;
	}

	.banco-header-search {
		width: 100%;
	}

	/* El bloque Navegación cambia a hamburguesa a 1024px en vez de 600px. */
	.banco-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.banco-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* La hamburguesa sube a la barra teal, a la altura del logo (150px ≈ 71px de alto). */
	.banco-header {
		position: relative;
	}

	.banco-header-top {
		padding-top: 0.75rem !important;
	}

	.banco-logo img {
		width: 9.375rem;
	}

	.banco-nav-primary {
		position: absolute;
		top: 0.75rem;
		right: var(--wp--preset--spacing--50);
		left: auto;
		width: auto !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none;
	}

	.banco-nav-primary .banco-main-nav {
		height: 4.4375rem;
		align-items: center;
	}

	.banco-main-nav .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--base) !important;
	}

	.banco-main-nav .wp-block-navigation__responsive-container-open svg {
		width: 2rem;
		height: 2rem;
	}

	/* Secciones */
	.banco-about .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.banco-about .wp-block-column {
		flex-basis: 100% !important;
	}

	.banco-about .wp-block-image.is-style-rounded-photo {
		max-width: 35rem;
		margin-inline: auto;
	}

	.banco-about .wp-block-image.is-style-rounded-photo img {
		aspect-ratio: 4 / 3;
		border-radius: 2.5rem;
	}

	.banco-cerca-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 3rem;
	}

	.banco-products .banco-products-grid {
		flex-wrap: wrap !important;
	}

	.banco-products .banco-products-grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-cover.is-style-product-card {
		min-height: 37.5rem;
	}

	.banco-adulto .banco-adulto-grid {
		flex-wrap: wrap !important;
	}

	.banco-adulto .banco-adulto-intro,
	.banco-adulto .banco-adulto-benefits {
		flex-basis: calc(50% - 1rem) !important;
	}

	.banco-adulto .banco-adulto-media {
		order: 3;
		flex-basis: 100% !important;
	}

	.banco-adulto figure.banco-cutout-photo img {
		max-width: 32.5rem;
	}

	.banco-footer .banco-footer-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.banco-footer .banco-footer-links {
		width: 100%;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		column-gap: 2.5rem;
	}

	.banco-footer .banco-footer-products {
		flex-wrap: wrap !important;
	}

	.banco-footer .banco-footer-products > .wp-block-column {
		flex-basis: calc(50% - 1rem) !important;
	}

	/* Landing de créditos: hero y banner apilados (foto arriba, texto debajo). */
	.banco-page-hero.wp-block-cover,
	.banco-calc-banner.wp-block-cover {
		display: block;
		min-height: 0;
	}

	.banco-page-hero.wp-block-cover .wp-block-cover__image-background,
	.banco-page-hero .wp-block-cover__background {
		inset: 0 0 auto;
		width: 100%;
		height: clamp(15rem, 68vw, 28.75rem);
	}

	.banco-page-hero.wp-block-cover .wp-block-cover__image-background {
		object-position: 22% center;
	}

	.banco-page-hero .wp-block-cover__background {
		background: linear-gradient(to bottom, rgba(0, 161, 177, 0) 50%, rgba(0, 161, 177, 0.6) 78%, var(--wp--preset--color--primary) 100%) !important;
	}

	.banco-page-hero.wp-block-cover::after {
		opacity: 0.7;
	}

	.banco-page-hero .wp-block-cover__inner-container {
		padding-top: calc(clamp(15rem, 68vw, 28.75rem) - 1.5rem);
		padding-bottom: 2.5rem;
	}

	/* :is() con las posiciones: gana al ancho de columna de ≤1280px (min(40rem, 50%)). */
	.banco-page-hero__text,
	.banco-page-hero:is(.is-position-top-left, .is-position-center-left, .is-position-bottom-left, .is-position-top-right, .is-position-center-right, .is-position-bottom-right) .banco-page-hero__text {
		max-width: none;
		margin-left: 0;
	}

	.banco-credit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.banco-calc-banner.wp-block-cover .wp-block-cover__image-background {
		inset: 0 0 auto;
		height: 62vw;
		object-position: 78% top;
	}

	.banco-calc-banner .wp-block-cover__background {
		background: linear-gradient(to bottom, rgba(12, 89, 85, 0) 0, rgba(12, 89, 85, 0.25) 34vw, var(--wp--preset--color--contrast) 60vw) !important;
	}

	.banco-calc-banner .wp-block-cover__inner-container {
		padding-top: 50vw;
	}

	/* Landing de créditos personales */
	.banco-tabs__panels {
		padding-inline: clamp(1.25rem, 4vw, 3rem);
	}
}

@media (max-width: 680px) {
	.banco-media-desktop {
		display: none;
	}

	.banco-media-mobile {
		display: block;
	}

	.banco-about p {
		text-align: left;
	}

	.banco-cerca-grid {
		grid-template-columns: 1fr;
	}

	.wp-block-cover.is-style-product-card {
		min-height: 35rem;
	}

	.wp-block-cover.is-style-product-card .wp-block-cover__image-background {
		height: 60% !important;
	}

	.wp-block-cover.is-style-product-card .wp-block-cover__background {
		background: linear-gradient(to bottom, rgba(0, 161, 177, 0) 22%, rgba(0, 161, 177, 0.6) 42%, var(--wp--preset--color--primary) 60%) !important;
	}

	.banco-product-list-cols.wp-block-columns {
		flex-direction: column;
	}

	.banco-adulto .banco-adulto-intro,
	.banco-adulto .banco-adulto-benefits,
	.banco-adulto .banco-adulto-media {
		flex-basis: 100% !important;
	}

	.banco-adulto-title {
		white-space: normal;
	}

	.banco-contact-form,
	.wpcf7 form,
	.wpforms-form,
	.frm-fluent-form {
		grid-template-columns: 1fr;
	}

	.banco-creditos-ui {
		display: none;
	}

	.banco-footer .banco-footer-links {
		flex-direction: column;
		gap: 0.9rem;
	}

	.banco-footer .banco-footer-products > .wp-block-column {
		flex-basis: 100% !important;
	}

	.banco-footer-copy {
		margin-top: 2.5rem !important;
	}

	.banco-page-hero__lead {
		max-width: none;
	}

	.banco-credit-grid {
		grid-template-columns: 1fr;
	}

	.banco-credit-item h3 {
		min-height: 0;
	}

	.banco-credit-item p {
		text-align: left;
	}

	/* Landing de créditos personales: pestañas en una fila deslizable y tarjeta apilada (foto arriba). */
	.banco-tabs__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.6rem;
		margin-inline: calc(var(--wp--preset--spacing--50) * -1);
		padding: 0.4rem var(--wp--preset--spacing--50);
		overflow-x: auto;
		scroll-padding-inline: var(--wp--preset--spacing--50);
		scrollbar-width: none;
	}

	.banco-tabs__list::-webkit-scrollbar {
		display: none;
	}

	.banco-tabs__list.can-scroll-right {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
	}

	.banco-tabs__list.can-scroll-left {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3.5rem), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 3.5rem), transparent);
	}

	.banco-tabs__list.can-scroll-left.can-scroll-right {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
	}

	.banco-tabs__tab {
		flex: none;
	}

	.banco-tabs__card {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.banco-tabs__media img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.banco-tabs__panels {
		padding: 1.75rem 1.5rem 2rem;
	}

	.banco-tabs .is-style-arrow-list li {
		max-width: none;
	}

	.banco-faq .wp-block-details > summary {
		gap: 1rem;
	}

	.banco-tabs-editor__media {
		grid-template-columns: 1fr;
	}

	/* Landing de calculadora de cuota: etiqueta arriba y campo abajo. */
	.banco-cuota__row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.45rem;
	}

	.banco-cuota__row > :first-child,
	.banco-cuota__field,
	.banco-cuota__result {
		flex: none;
		width: 100%;
	}
}
