/* Promos (page-promos.php, template-parts/promo/card.php, promos.js). Titular grande con el halo cálido de las ofertas,
   control segmentado y una rejilla bento: la primera promo ocupa 2×2. Cada tarjeta es una superficie #1c1c1e con la
   foto a sangre (o el material del logo, en bancos) y un velo que la funde con el texto; el gancho, enorme y en el
   color de la promo. Con ratón, la tarjeta se inclina hacia el puntero con un muelle (promos.js) y sus capas se
   separan: foto, cogollo y pegatina a distintas profundidades, y un brillo que sigue al puntero. */

.bd-promos-page {
	--bd-ease: cubic-bezier(.32, .72, 0, 1); /* muelle críticamente amortiguado, como el de las hojas de iOS */
	--bd-fill: rgba(118, 118, 128, .24);
	--bd-muted: #a1a1a6;
	--bd-text: #f5f5f7;
	--bd-warm: linear-gradient(90deg, #ff9f0a, #ff6482 55%, #bf5af2);
	max-width: calc(var(--wp--style--global--wide-size, 1180px) + 2 * var(--horizontalPadding));
	margin: 0 auto !important;
	box-sizing: border-box;
	padding: var(--headerHeight) var(--horizontalPadding) 112px !important; /* la cabecera es fija */
	overflow-x: clip; /* el halo del titular se sale por los lados */
	color: var(--bd-text);
	-webkit-font-smoothing: antialiased;
}
.bd-promos-page :focus-visible { outline: 2px solid var(--bluedogBlue); outline-offset: 3px; }

/* ── Titular ── */
.bd-promos-page__intro { position: relative; isolation: isolate; max-width: 860px; margin: 0 auto; padding: 72px 0 40px; text-align: center; }
.bd-promos-page__intro::before {
	content: ""; position: absolute; inset: -40px -30% -20px; z-index: -1; pointer-events: none;
	background:
		radial-gradient(30% 46% at 36% 48%, rgba(255, 159, 10, .14), transparent 100%),
		radial-gradient(32% 50% at 64% 50%, rgba(255, 100, 130, .13), transparent 100%);
}
.bd-promos-page__kicker {
	display: inline-block; margin: 0 0 14px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.01em;
	background: var(--bd-warm); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bd-promos-page .bd-promos-page__title {
	margin: 0; color: var(--bd-text); font-family: inherit !important; font-size: clamp(40px, 5.6vw, 72px) !important; font-weight: 700;
	line-height: 1.04; letter-spacing: -.03em; text-wrap: balance;
}
.bd-promos-page__lede { max-width: 34em; margin: 22px auto 0; color: var(--bd-muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; letter-spacing: .005em; text-wrap: pretty; }

/* ── Control segmentado (la pastilla se desliza a la opción elegida) ── */
.bd-promos-seg {
	position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 360px); height: 36px;
	margin: 0 auto 8px; padding: 2px; box-sizing: border-box; border-radius: 10px; background: var(--bd-fill);
}
.bd-promos-seg::before {
	content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); border-radius: 8px;
	background: #636366; box-shadow: 0 3px 8px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .1);
	transition: transform .35s var(--bd-ease);
}
.bd-promos-seg[data-active="product"]::before { transform: translateX(100%); }
.bd-promos-seg[data-active="bank"]::before { transform: translateX(200%); }
.bd-promos-seg button {
	position: relative; z-index: 1; margin: 0; padding: 0 10px; border: 0; background: none; color: var(--bd-text); cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; -webkit-tap-highlight-color: transparent;
	transition: opacity .15s ease;
}
.bd-promos-seg button[aria-checked="true"] { font-weight: 600; }
.bd-promos-seg button:active { opacity: .6; }
.bd-promos-seg button:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* ── Rejilla bento: la primera, 2×2; con dos promos, la segunda ocupa toda la altura. ── */
.bd-promos-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 264px; grid-auto-flow: dense; gap: 20px;
	margin: 32px 0 0; padding: 0; list-style: none;
}
.bd-deal {
	--mx: 0; --my: 0; --lift: 0; /* promos.js: puntero en [-1, 1] y cuánto está «levantada» (0–1); las hereda la tarjeta */
	position: relative; min-width: 0; margin: 0; perspective: 1200px; border-radius: 28px;
	/* La sombra va aquí y no en la tarjeta: la tarjeta recorta con clip-path, que también recortaría su sombra. */
	box-shadow: 0 calc(var(--lift) * 24px) calc(var(--lift) * 48px) rgba(0, 0, 0, calc(var(--lift) * .5));
}
.bd-deal[hidden] { display: none; }
.bd-deal.is-featured { grid-column: span 2; grid-row: span 2; }
.bd-promos-grid[data-count="1"] { grid-auto-rows: 240px; }
.bd-promos-grid[data-count="1"] > .is-featured { grid-column: 1 / -1; }
.bd-promos-grid[data-count="2"] > .bd-deal:not(.is-featured):not([hidden]) { grid-row: span 2; }

/* ── Tarjeta ── */
.bd-deal__link {
	position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; border-radius: 28px;
	/* Recorte de verdad: overflow + border-radius no recorta las capas que van en su propia capa de composición (el giro
	   3D, blur, backdrop-filter, el movimiento con el puntero) y asomaban sus esquinas cuadradas. */
	clip-path: inset(0 round 28px);
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--bd-accent) 26%, transparent), transparent 60%), #1c1c1e;
	color: var(--bd-text) !important; text-decoration: none !important;
	transform: rotateX(calc(var(--my) * -3.5deg)) rotateY(calc(var(--mx) * 4.5deg));
	transition: scale .12s ease-out;
	-webkit-tap-highlight-color: transparent;
}
.bd-deal__link:active { scale: .98; }
/* La grande, menos: el mismo giro en una tarjeta el doble de alta se nota mucho más. */
.bd-deal.is-featured .bd-deal__link { transform: rotateX(calc(var(--my) * -2deg)) rotateY(calc(var(--mx) * 2.5deg)); }
.bd-deal__link img { -webkit-user-drag: none; user-select: none; }
/* Filo de luz del material, encima de todo. */
.bd-deal__link::after {
	content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .1);
}
/* Velo: la foto se funde con la superficie donde va el texto. */
.bd-deal__link::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, transparent 22%, rgba(28, 28, 30, .8) 50%, #1c1c1e 70%);
}
.bd-deal.is-featured .bd-deal__link::before {
	background:
		linear-gradient(90deg, rgba(28, 28, 30, .9) 0%, rgba(28, 28, 30, .4) 46%, transparent 70%),
		linear-gradient(180deg, transparent 40%, rgba(28, 28, 30, .7) 70%, #1c1c1e 96%);
}

/* Capas. Cada una se desplaza con el puntero según su profundidad (data-depth): más lejos, menos. */
.bd-deal__art { position: absolute; inset: 0; pointer-events: none; } /* sin z-index: el cogollo y la pegatina suben por encima del velo */
.bd-deal [data-depth] { translate: calc(var(--mx) * var(--d) * -5px) calc(var(--my) * var(--d) * -5px); }
.bd-deal [data-depth="1"] { --d: 1; }
.bd-deal [data-depth="2"] { --d: 2; }
.bd-deal [data-depth="3"] { --d: 2.6; }
.bd-deal [data-depth="4"] { --d: 4; }
.bd-deal__photo, .bd-deal__bud { position: absolute; inset: -12px; display: block; }
.bd-deal__photo img, .bd-deal__bud img {
	display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 30%;
	transform-origin: 50% 70%; transition: transform .9s var(--bd-ease), filter .6s ease;
}
.bd-deal.is-featured .bd-deal__photo img, .bd-deal.is-featured .bd-deal__bud img { object-position: 70% 35%; }
.bd-deal__bud img { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); }
/* El cogollo va por encima del velo (sale de la foto), difuminado hacia abajo, donde está el texto. */
.bd-deal__bud { z-index: 2; -webkit-mask-image: linear-gradient(#000 30%, transparent 62%); mask-image: linear-gradient(#000 30%, transparent 62%); }
.bd-deal__sticker {
	position: absolute; z-index: 3; top: 18px; left: 18px; width: auto; max-width: 96px; height: auto; max-height: 72px; rotate: -6deg;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
.bd-deal.is-featured .bd-deal__sticker { top: 26px; left: 26px; max-width: 124px; max-height: 100px; }
/* Brillo que sigue al puntero (solo con ratón, con la tarjeta levantada). */
.bd-deal__glare {
	position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: calc(var(--lift) * .9); mix-blend-mode: soft-light;
	background: radial-gradient(60% 60% at calc(50% + var(--mx) * 45%) calc(50% + var(--my) * 45%), rgba(255, 255, 255, .55), transparent 70%);
}

/* Banco: el logo sobre su material (el mismo logo, ampliado y desenfocado). */
.bd-deal__bg {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.8); filter: blur(40px) saturate(1.7) brightness(.5);
}
.bd-deal__tile {
	position: absolute; left: 50%; top: 40%; display: grid; place-items: center; width: min(46%, 220px); aspect-ratio: 1; margin: calc(min(46%, 220px) / -2) 0 0 calc(min(46%, 220px) / -2);
	border-radius: 28%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
	transition: transform .9s var(--bd-ease);
}
.bd-deal__tile img { width: 64%; height: 64%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }
.bd-deal--bank .bd-deal__link::before { background: linear-gradient(180deg, transparent 50%, rgba(28, 28, 30, .78) 74%, #1c1c1e 94%); }
.bd-deal--bank.is-featured .bd-deal__tile { left: 70%; top: 44%; --t: min(40%, 300px); width: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); }

/* «Quedan 3 días»: cápsula de cristal arriba a la derecha. */
.bd-deal__ends {
	position: absolute; z-index: 3; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px;
	background: rgba(22, 22, 23, .56); color: var(--bd-text); font-size: 13px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.bd-deal__ends.is-soon { color: #ffd60a; }

/* Texto, abajo. */
.bd-deal__body { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.bd-deal.is-featured .bd-deal__body { left: 40px; right: auto; bottom: 34px; max-width: min(56%, 440px); }

.bd-deal__badge {
	display: flex; flex-direction: column; margin-bottom: 10px; color: var(--bd-accent);
	font-size: clamp(32px, 2.8vw, 40px); font-weight: 800; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.bd-deal__badge small { margin-bottom: 4px; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.bd-deal.is-featured .bd-deal__badge { margin-bottom: 14px; font-size: clamp(52px, 5.4vw, 80px); }
.bd-deal.is-featured .bd-deal__badge small { font-size: 15px; }
.bd-deal__brand { margin-bottom: 4px; color: rgba(255, 255, 255, .64); font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; }
.bd-deal__title {
	color: #fff; font-family: Allenoire, serif !important; font-size: clamp(20px, 1.7vw, 24px); font-weight: 400; line-height: 1.04; letter-spacing: -.01em;
	text-wrap: balance; text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.bd-deal.is-featured .bd-deal__title { font-size: clamp(28px, 3vw, 40px); }
.bd-deal__text, .bd-deal__price { margin-top: 6px; color: var(--bd-muted); font-size: 14px; line-height: 1.35; letter-spacing: -.005em; }
.bd-deal.is-featured .bd-deal__text, .bd-deal.is-featured .bd-deal__price { margin-top: 10px; font-size: 16px; }
.bd-deal__price del { opacity: .6; }
.bd-deal__price ins { text-decoration: none; color: var(--bd-text); }
.bd-deal__price .screen-reader-text { position: absolute !important; }
.bd-deal__cta {
	display: inline-flex; align-items: center; gap: 4px; height: 36px; margin-top: 16px; padding: 0 14px 0 16px; border-radius: 18px;
	background: rgba(255, 255, 255, .14); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: background-color .2s ease, color .2s ease;
}
.bd-deal__cta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--bd-ease); }
/* En las tarjetas pequeñas, solo la flecha en un círculo abajo a la derecha (toda la tarjeta es el enlace). */
.bd-deal:not(.is-featured) .bd-deal__cta { position: absolute; right: -4px; bottom: 0; width: 36px; margin: 0; padding: 0; justify-content: center; }
.bd-deal:not(.is-featured) .bd-deal__cta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bd-deal:not(.is-featured) .bd-deal__body { padding-right: 44px; }

/* Escritorio: la última, ensanchada (bd_deals_fill), apaisada como la grande: texto a la izquierda, arte a la derecha. */
@media (min-width: 901px) {
	.bd-deal.is-wide { grid-column: span 2; }
	.bd-deal.is-full { grid-column: 1 / -1; }
	:is(.is-wide, .is-full) .bd-deal__link::before {
		background: linear-gradient(90deg, #1c1c1e 0%, rgba(28, 28, 30, .86) 34%, rgba(28, 28, 30, .3) 58%, transparent 74%);
	}
	.bd-deal:is(.is-wide, .is-full) .bd-deal__body { left: 32px; right: auto; bottom: 28px; max-width: min(48%, 420px); padding-right: 0; }
	:is(.is-wide, .is-full) :is(.bd-deal__photo, .bd-deal__bud) img { object-position: 50% 35%; }
	:is(.is-wide, .is-full) :is(.bd-deal__photo, .bd-deal__bud) { left: 36%; }
	:is(.is-wide, .is-full) .bd-deal__bud { -webkit-mask-image: none; mask-image: none; }
	:is(.is-wide, .is-full) .bd-deal__sticker { left: auto; right: 24px; top: auto; bottom: 22px; }
	.bd-deal--bank:is(.is-wide, .is-full) .bd-deal__tile { left: 72%; top: 50%; }
	.bd-deal:is(.is-wide, .is-full) .bd-deal__cta { position: static; margin-top: 16px; height: 36px; width: auto; padding: 0 14px 0 16px; }
	.bd-deal:is(.is-wide, .is-full) .bd-deal__cta-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
.bd-deal.is-featured .bd-deal__cta { height: 40px; margin-top: 20px; padding: 0 16px 0 20px; border-radius: 20px; background: rgba(255, 255, 255, .88); color: #000; font-size: 15px; }

@media (hover: hover) {
	.bd-deal__link:hover .bd-deal__photo img { transform: scale(1.04); filter: brightness(.82) saturate(1.08); }
	.bd-deal__link:hover .bd-deal__bud img { transform: scale(1.07); }
	.bd-deal__link:hover .bd-deal__tile { transform: scale(1.05); }
	.bd-deal__link:hover .bd-deal__cta { background: #fff; color: #000; }
	.bd-deal__link:hover .bd-deal__cta svg { transform: translateX(3px); }
}

/* Vacío */
.bd-promos-empty { max-width: 520px; margin: 24px auto 0; padding: 48px 24px; border-radius: 28px; background: #1c1c1e; color: var(--bd-muted); text-align: center; font-size: 17px; }
.bd-promos-empty p { margin: 0; }
.bd-promos-empty__title { margin-bottom: 6px !important; color: var(--bd-text); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.bd-promos-empty__cta {
	display: inline-flex; align-items: center; height: 44px; margin-top: 24px; padding: 0 22px; border-radius: 22px;
	background: var(--bluedogBlue); color: #000 !important; font-weight: 600; text-decoration: none !important;
}

/* Tableta: dos columnas; la primera, a todo el ancho y apaisada. */
@media (max-width: 900px) {
	.bd-promos-grid, .bd-promos-grid[data-count="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
	.bd-deal { aspect-ratio: 1 / 1; }
	.bd-deal.is-featured, .bd-promos-grid[data-count="1"] > .is-featured { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
	.bd-promos-grid[data-count="2"] > .bd-deal:not(.is-featured):not([hidden]) { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 2 / 1; }
	.bd-deal.is-featured .bd-deal__body { left: 32px; bottom: 32px; max-width: 62%; }
	/* La última sola en su fila, a todo el ancho. */
	.bd-promos-grid > .bd-deal:not(.is-featured):last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}
/* Móvil: una columna; la primera, más alta y con el texto abajo a todo el ancho. */
@media (max-width: 640px) {
	.bd-promos-page__intro { padding: 40px 0 28px; }
	.bd-promos-grid, .bd-promos-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; }
	.bd-deal, .bd-promos-grid[data-count="2"] > .bd-deal:not(.is-featured):not([hidden]) { aspect-ratio: 1 / 1; }
	.bd-deal.is-featured, .bd-promos-grid[data-count="1"] > .is-featured { aspect-ratio: 5 / 6; }
	.bd-promos-grid > .bd-deal:not(.is-featured):last-child:nth-child(even) { aspect-ratio: 1 / 1; }
	.bd-deal, .bd-deal__link { border-radius: 24px; }
	.bd-deal__link { clip-path: inset(0 round 24px); }
	.bd-deal.is-featured .bd-deal__link::before { background: linear-gradient(180deg, transparent 28%, rgba(28, 28, 30, .72) 52%, #1c1c1e 78%); }
	.bd-deal__body, .bd-deal.is-featured .bd-deal__body { left: 20px; right: 20px; bottom: 20px; max-width: none; }
	.bd-deal.is-featured .bd-deal__badge { font-size: 52px; }
	.bd-deal.is-featured .bd-deal__title { font-size: 28px; }
	.bd-deal.is-featured .bd-deal__sticker { top: 20px; left: 20px; max-width: 110px; max-height: 88px; }
	.bd-deal--bank.is-featured .bd-deal__tile { left: 50%; top: 36%; }
	.bd-deal.is-featured .bd-deal__photo img, .bd-deal.is-featured .bd-deal__bud img { object-position: 50% 30%; }
}

@media (prefers-reduced-motion: reduce) {
	.bd-deal__link { transform: none; }
	.bd-deal [data-depth] { translate: none; }
	.bd-deal__photo img, .bd-deal__bud img, .bd-deal__tile, .bd-deal__cta svg, .bd-promos-seg::before { transition: filter .2s ease, background-color .2s ease; }
	.bd-deal__link:hover .bd-deal__photo img, .bd-deal__link:hover .bd-deal__bud img, .bd-deal__link:hover .bd-deal__tile,
	.bd-deal__link:hover .bd-deal__cta svg { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.bd-deal__ends, .bd-deal__cta, .bd-deal__tile { background: #2c2c2e; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.bd-deal.is-featured .bd-deal__cta { background: #fff; }
}

/* Una promo (/promos/?promo=<id>): titular de la promo y sus productos con la rejilla del catálogo */
/* En la página de una promo, la línea de arriba en el color de la promo (el del logo del banco), no el degradado general. */
/* Halo del titular en el color de la promo (en /promos/, el cálido general): dos lóbulos, el segundo algo más hondo. */
.bd-promos-page--one .bd-promos-page__intro::before {
	background:
		radial-gradient(30% 46% at 36% 48%, color-mix(in srgb, var(--bd-accent) 17%, transparent), transparent 100%),
		radial-gradient(32% 50% at 64% 50%, color-mix(in srgb, color-mix(in srgb, var(--bd-accent) 75%, #000) 16%, transparent), transparent 100%);
}
.bd-promos-page--one .bd-promos-page__kicker { background: none; color: var(--bd-accent); -webkit-text-fill-color: currentColor; }
.bd-promos-page--one .bd-promos-page__kicker a { color: inherit; text-decoration: none; }
.bd-promos-page--one .bd-promos-page__kicker a:hover { color: var(--bd-text); }
.bd-promos-page--one .bd-promos-page__title mark { background: none; color: var(--bd-accent); }
.bd-promos-one__all { margin: 40px 0 0; text-align: center; font-size: 17px; }
.bd-promos-one__all a { color: var(--bluedogBlue); text-decoration: none; font-weight: 600; }
.bd-promos-one__all a:hover { text-decoration: underline; }

/* Banco con variedades concretas, en la grande: sus fotos en abanico, como tarjetas, a la derecha (en el móvil,
   arriba), y el logo del banco pequeño arriba a la izquierda. Al pasar el ratón el abanico se abre. En las pequeñas no
   (card.php): el logo grande sobre su material. */
.bd-deal__mark {
	position: absolute; z-index: 3; top: 22px; left: 24px; width: auto; max-width: 128px; height: auto; max-height: 40px; object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}
.bd-deal.is-featured .bd-deal__mark { top: 32px; left: 40px; max-width: 196px; max-height: 62px; }
.bd-deal__fan { position: absolute; z-index: 1; left: 50%; top: 40%; width: 0; height: 0; }
.bd-deal.is-featured .bd-deal__fan { left: 72%; top: 38%; }
.bd-deal__fan img {
	--w: clamp(88px, 9vw, 136px); --step: calc(var(--i) - (var(--n) - 1) / 2); /* posición respecto al centro: −1,5 … 1,5 */
	position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -.625); width: var(--w); height: calc(var(--w) * 1.25); max-width: none;
	object-fit: cover; border-radius: 18px; background: #2c2c2e;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 36px rgba(0, 0, 0, .55);
	transform-origin: 50% 140%; rotate: calc(var(--step) * 9deg); transform: translateX(calc(var(--step) * var(--w) * .28));
	transition: transform .9s var(--bd-ease), rotate .9s var(--bd-ease);
}
.bd-deal__fan[data-n="2"] { --n: 2; } .bd-deal__fan[data-n="3"] { --n: 3; } .bd-deal__fan[data-n="4"] { --n: 4; }
@media (hover: hover) {
	.bd-deal__link:hover .bd-deal__fan img { rotate: calc(var(--step) * 12deg); transform: translateX(calc(var(--step) * var(--w) * .42)) translateY(-6px); }
}
@media (max-width: 900px) {
	.bd-deal.is-featured .bd-deal__fan { left: 70%; top: 44%; }
	.bd-deal.is-featured .bd-deal__fan img { --w: clamp(90px, 16vw, 150px); }
}
@media (max-width: 640px) {
	/* El texto ocupa la mitad de abajo: el abanico, más pequeño y arriba; el logo sobra (el titular ya es el banco). */
	.bd-deal.is-featured .bd-deal__fan { left: 52%; top: 21%; }
	.bd-deal.is-featured .bd-deal__fan img { --w: 21vw; border-radius: 14px; }
	.bd-deal__mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bd-deal__fan img { transition: none; }
	.bd-deal__link:hover .bd-deal__fan img { rotate: calc(var(--step) * 9deg); transform: translateX(calc(var(--step) * var(--w) * .28)); }
}

/* Letra pequeña de cada promo («Sujeto a disponibilidad, hasta fin de existencias», bd_promo_legal()): presente pero
   sin competir con el gancho; con un poco de tracking positivo, que a este tamaño se lee mejor. */
.bd-deal__legal { margin-top: 8px; color: rgba(235, 235, 245, .42); font-size: 11px; line-height: 1.3; letter-spacing: .01em; }
.bd-deal.is-featured .bd-deal__legal { margin-top: 12px; font-size: 12px; }
.bd-promos-page__legal { margin: 10px auto 0; color: rgba(235, 235, 245, .42); font-size: 12px; line-height: 1.4; letter-spacing: .01em; }

/* Objeto recortado (foto con fondo transparente, bd_image_is_object(): el Mystery pack): entero, flotando sobre la
   superficie con su sombra, nunca ampliado por encima de su tamaño ni recortado a sangre. Arriba en las tarjetas
   verticales; a la derecha en las apaisadas. */
.bd-deal.is-object .bd-deal__photo { inset: 22px 22px auto; height: 50%; }
.bd-deal.is-object .bd-deal__photo img {
	margin: 0 auto; max-width: 100% !important; width: auto !important; max-height: 100%; height: 100% !important;
	object-fit: contain; object-position: 50% 50%; transform-origin: 50% 80%;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px color-mix(in srgb, var(--bd-accent) 18%, transparent));
}
.bd-deal.is-object .bd-deal__link::before { background: linear-gradient(180deg, transparent 50%, rgba(28, 28, 30, .7) 62%, #1c1c1e 74%); }
@media (hover: hover) {
	.bd-deal.is-object .bd-deal__link:hover .bd-deal__photo img {
		transform: scale(1.05) translateY(-4px);
		filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .6)) drop-shadow(0 0 48px color-mix(in srgb, var(--bd-accent) 26%, transparent));
	}
}
@media (min-width: 901px) {
	.bd-deal.is-object:is(.is-wide, .is-full) .bd-deal__photo { inset: 26px 6% 26px auto; left: auto; width: 44%; height: auto; }
	.bd-deal.is-object.is-full .bd-deal__photo { width: 36%; right: 10%; }
	.bd-deal.is-object:is(.is-wide, .is-full) .bd-deal__photo img { object-position: 50% 50%; }
	.bd-deal.is-object:is(.is-wide, .is-full) .bd-deal__link::before { background: none; }
	.bd-deal.is-object.is-featured .bd-deal__photo { inset: 40px 40px auto auto; width: 50%; height: 56%; }
}
@media (prefers-reduced-motion: reduce) {
	.bd-deal.is-object .bd-deal__link:hover .bd-deal__photo img { transform: none; }
}
/* El objeto ya es el producto: su pegatina, repetida, sobra. */
.bd-deal.is-object .bd-deal__sticker { display: none; }
/* Tarjetas pequeñas: «Hasta» en la misma línea que la cifra y la pegatina algo menor, para que el texto no la pise. */
.bd-deal:not(.is-featured) .bd-deal__badge { flex-direction: row; align-items: baseline; gap: 8px; }
.bd-deal:not(.is-featured) .bd-deal__badge small { margin-bottom: 0; }
.bd-deal:not(.is-featured) .bd-deal__sticker { top: 16px; left: 16px; max-width: 112px; max-height: 84px; } /* la pegatina dice el banco: sin antetítulo */
/* Escritorio estrecho: las pequeñas, con el nombre y la letra pequeña en dos líneas, necesitan algo más de alto. */
@media (min-width: 901px) and (max-width: 1180px) { .bd-promos-grid { grid-auto-rows: 296px; } }
/* Pequeñas de banco (sin abanico): el logo grande y sin baldosa en la parte de arriba, y de fondo el mismo logo a
   sangre, poco desenfocado (se reconoce) y oscurecido; el velo de abajo deja el texto legible. En escritorio, sin la
   línea de descripción: no cabe. */
.bd-deal--bank:not(.is-featured):not(.is-wide):not(.is-full) .bd-deal__bg { transform: scale(1.15); filter: blur(10px) saturate(1.3) brightness(.42); }
.bd-deal--bank:not(.is-featured):not(.is-wide):not(.is-full) .bd-deal__tile {
	display: block; left: 24%; right: 24%; top: 24px; width: auto; height: 34%; aspect-ratio: auto; margin: 0; /* bloque: en la rejilla de la baldosa, el 100 % de la imagen no tenía referencia */
	border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bd-deal--bank:not(.is-featured):not(.is-wide):not(.is-full) .bd-deal__tile img { width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .55)); }
@media (min-width: 901px) {
	.bd-deal--bank:not(.is-featured):not(.is-wide):not(.is-full) .bd-deal__tile { top: 24px; height: 28%; }
	.bd-deal--bank:not(.is-featured):not(.is-wide):not(.is-full) .bd-deal__text { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
	.bd-deal--bank:not(.is-featured):not(.is-wide):not(.is-full) .bd-deal__tile { background: none; }
}
/* Letra pequeña de las promos, una sola vez bajo la rejilla (page-promos.php). */
.bd-promos-page__note { margin: 28px 0 0; color: rgba(235, 235, 245, .42); font-size: 12px; line-height: 1.4; letter-spacing: .01em; text-align: center; }