/**
 * BSV — Home 2027 (templates/template-home-2027.php).
 *
 * Se encola solo en esa template. Todas las clases llevan el prefijo bh- y
 * cuelgan de .bsv-home: Porto y el style.css del tema ya definen .hero,
 * .container, .premios, .button, y sin prefijo se pisarían en los dos sentidos.
 *
 * Colores desde bsv-tokens.css. Contrastes medidos (WCAG AA, 4.5:1):
 *
 *   oro claro  sobre verde             4.69   eyebrow del hero
 *   oro        sobre verde legal       6.84   números de la cuenta
 *   verde legal sobre oro              6.84   botón y dato destacado
 *   gris       sobre niebla            4.79   texto de los pasos
 *   oro        sobre verde             3.76   SOLO el <em> del título (texto grande)
 */

.bsv-home {
	--bh-oro-claro: #ffd65c;
	--bh-tinta: #253029;
	--bh-gris: #647069;
	--bh-niebla: #f5f7f3;
	--bh-borde: #e4ebe5;
	--bh-radio: 18px;
	--bh-sombra: 0 20px 46px rgba(4, 54, 23, .14);
	--bh-titulos: Montserrat, "Segoe UI", Arial, sans-serif;

	color: var(--bh-tinta);
	font-family: Roboto, Arial, sans-serif;
	overflow-x: clip;
}

/*
 * Porto envuelve el contenido en .container-fluid (30px de padding) > .row >
 * .col-lg-12 (15px). Con eso el hero no llega a los bordes y arriba queda una
 * franja blanca. Se anula solo en las templates propias, por la clase que les
 * pone inc/bsv-layout.php en el body. No se usa 100vw: incluye la barra de
 * scroll y desborda.
 */
.bsv-layout-propio #main > .container-fluid {
	padding: 0;
}

.bsv-layout-propio #main .main-content-wrap {
	margin: 0;
}

.bsv-layout-propio #main .main-content {
	padding: 0;
}

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

/* Porto y style.css dan márgenes, tamaños y viñetas a estos elementos. */
.bsv-home h1,
.bsv-home h2,
.bsv-home h3,
.bsv-home p,
.bsv-home ul,
.bsv-home ol,
.bsv-home dl,
.bsv-home dd {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
}

.bsv-home ul,
.bsv-home ol {
	list-style: none;
}

.bsv-home img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bsv-home a:focus-visible {
	outline: 3px solid var(--bsv-oro);
	outline-offset: 3px;
}

.bsv-home section {
	scroll-margin-top: 90px;
}

/* Con .bsv-home delante: el reset de márgenes de arriba (dl, ul) tiene más
 * especificidad y descentraba los contenedores que son listas. */
.bsv-home .bh-contenedor {
	width: min(var(--bsv-ancho), calc(100% - 40px));
	margin-inline: auto;
}

.bh-eyebrow {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	font: 800 12px/1 var(--bh-titulos);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.bh-eyebrow::before {
	content: "";
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
}

.bh-encabezado {
	max-width: 700px;
	margin: 0 auto 42px;
	text-align: center;
}

.bh-encabezado .bh-eyebrow {
	color: var(--bsv-verde);
}

.bsv-home .bh-encabezado h1,
.bsv-home .bh-encabezado h2 {
	margin: 12px 0 10px;
	color: var(--bsv-verde-legal);
	font: 800 clamp(29px, 4vw, 44px)/1.08 var(--bh-titulos);
	letter-spacing: -.04em;
}

.bh-encabezado p {
	color: var(--bh-gris);
	font-size: 17px;
	line-height: 1.55;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.bsv-home .bh-boton {
	display: inline-flex;
	min-height: 48px;
	padding: 0 24px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 2px solid transparent;
	border-radius: 8px;
	font: 800 14px/1.2 var(--bh-titulos);
	letter-spacing: .03em;
	text-align: center;
	text-decoration: none;
	transition: transform .2s, background-color .2s;
}

.bsv-home .bh-boton:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.bsv-home .bh-boton--oro {
	color: var(--bsv-verde-legal);
	background: var(--bsv-oro);
	box-shadow: 0 9px 22px rgba(251, 185, 0, .28);
}

.bsv-home .bh-boton--oro:hover {
	color: var(--bsv-verde-legal);
	background: var(--bh-oro-claro);
}

.bsv-home .bh-boton--linea {
	color: var(--bsv-blanco);
	border-color: rgba(255, 255, 255, .7);
	background: transparent;
}

.bsv-home .bh-boton--linea:hover {
	color: var(--bsv-blanco);
	background: rgba(255, 255, 255, .12);
}

.bsv-home .bh-boton--verde {
	color: var(--bsv-blanco);
	background: var(--bsv-verde);
}

.bsv-home .bh-boton--verde:hover {
	color: var(--bsv-blanco);
	background: var(--bsv-verde-footer);
}

@media (prefers-reduced-motion: reduce) {
	.bsv-home .bh-boton,
	.bh-tarjeta,
	.bh-ganador img {
		transition: none;
	}

	.bsv-home .bh-boton:hover,
	.bh-tarjeta:hover,
	.bh-ganador:hover img {
		transform: none;
	}
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.bh-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--bsv-blanco);
	background: var(--bsv-verde);
}

/* ── Fondo del hero: fotos que rotan ─────────────────────────────────────── */

.bh-hero__fondo {
	position: absolute;
	z-index: -3;
	inset: 0;
	background: var(--bsv-verde-legal);
}

/*
 * Las fotos se apilan y se cruzan por opacidad. La que está arriba es la que
 * lleva .es-activa; el JS mueve esa clase.
 */
.bsv-home .bh-hero__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	contain: none;
	contain-intrinsic-size: none;
}

.bsv-home .bh-hero__foto.es-activa {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bsv-home .bh-hero__foto {
		transition: none;
	}
}

/*
 * Overlay sobre la foto, en dos capas. Las opacidades no son estéticas: son
 * las que hacen legible el texto blanco sobre fotos nocturnas con focos de
 * escenario, que es el peor caso.
 *
 * Un overlay parejo lo bastante oscuro para el texto borraba la foto entera.
 * Por eso van dos: una base suave sobre toda la superficie y un refuerzo que
 * cubre solo la columna del texto y se apaga antes del póster.
 *
 * Opacidad efectiva y contraste del texto blanco, medidos sobre las tres fotos
 * (p95 de luminancia en esa franja; el peor caso es un foco quemado):
 *
 *   x=0%    0.91   7.2:1
 *   x=30%   0.84   5.4:1
 *   x=45%   0.79   4.7:1   <- donde termina la columna de texto
 *   x=70%   0.58   ahí ya no hay texto: es la zona del póster
 */
.bsv-home .bh-hero--con-fotos::before {
	background:
		linear-gradient(
			90deg,
			rgba(7, 64, 29, .55) 0%,
			rgba(7, 64, 29, .40) 45%,
			rgba(7, 64, 29, 0) 68%
		),
		linear-gradient(
			100deg,
			rgba(7, 64, 29, .80) 0%,
			rgba(7, 64, 29, .48) 100%
		);
}

/*
 * En mobile el texto va centrado y ocupa todo el ancho, así que el overlay no
 * puede aclararse de un lado: queda parejo en 0.86 efectivo (4.7:1 contra un
 * foco, 5.9:1 en el p95).
 */
@media (max-width: 900px) {
	.bsv-home .bh-hero--con-fotos::before {
		background:
			linear-gradient(rgba(7, 64, 29, .50), rgba(7, 64, 29, .50)),
			linear-gradient(rgba(7, 64, 29, .72), rgba(7, 64, 29, .72));
	}
}

/* El brillo de arriba a la izquierda queda detrás del eyebrow: va atenuado
 * para que el oro claro no baje de 4.5:1. */
.bh-hero::before {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	background:
		radial-gradient(circle at 6% 2%, rgba(37, 148, 81, .45) 0, transparent 31%),
		radial-gradient(circle at 90% 0, #14743a 0, transparent 25%),
		linear-gradient(115deg, var(--bsv-verde-legal), var(--bsv-verde) 58%, #0b6030);
}

.bh-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	opacity: .12;
	background-image: radial-gradient(var(--bsv-oro) 1.2px, transparent 1.2px);
	background-size: 20px 20px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 48%, #000);
	mask-image: linear-gradient(90deg, #000, transparent 48%, #000);
}

.bh-hero__grilla {
	display: grid;
	grid-template-columns: 1.06fr .94fr;
	gap: 44px;
	align-items: center;
	min-height: 560px;
	padding: 72px 0 90px;
}

.bh-hero .bh-eyebrow {
	color: var(--bh-oro-claro);
}

.bsv-home .bh-hero__titulo {
	max-width: 660px;
	margin: 17px 0;
	color: var(--bsv-blanco);
	font: 900 clamp(42px, 6vw, 74px)/.96 var(--bh-titulos);
	letter-spacing: -.065em;
}

.bh-hero__titulo em {
	color: var(--bsv-oro);
	font-style: normal;
}

.bsv-home .bh-hero__bajada {
	max-width: 540px;
	margin-bottom: 29px;
	color: #e5f0e8;
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.5;
}

.bh-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bsv-home .bh-hero__confianza {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 29px;
	color: #dcecdf;
	font-size: 14px;
	font-weight: 700;
}

.bh-hero__confianza li {
	display: inline-flex;
	gap: 7px;
	align-items: center;
}

.bh-hero__confianza span {
	display: grid;
	width: 19px;
	height: 19px;
	place-items: center;
	color: var(--bsv-verde);
	border-radius: 50%;
	background: var(--bsv-oro);
	font-size: 12px;
}

.bh-hero__arte {
	position: relative;
	display: grid;
	place-items: center;
	align-self: stretch;
}

.bh-hero__halo {
	position: absolute;
	width: min(36vw, 480px);
	aspect-ratio: 1;
	border: 1px solid rgba(251, 185, 0, .42);
	border-radius: 50%;
	box-shadow: 0 0 0 28px rgba(251, 185, 0, .08), 0 0 0 66px rgba(251, 185, 0, .04);
}

.bsv-home .bh-hero__poster {
	position: relative;
	width: min(100%, 485px);
	filter: drop-shadow(0 26px 32px rgba(0, 0, 0, .31));
}

.bh-hero__chip {
	position: absolute;
	right: -8px;
	bottom: 43px;
	display: flex;
	gap: 11px;
	align-items: center;
	padding: 12px 16px;
	color: var(--bsv-verde-legal);
	border-radius: 12px;
	background: var(--bsv-blanco);
	box-shadow: var(--bh-sombra);
	font: 800 12px/1.25 var(--bh-titulos);
}

.bh-hero__chip strong {
	display: block;
	color: var(--bsv-verde);
	font-size: 19px;
	line-height: 1;
}

.bh-hero__estrella {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	color: var(--bsv-blanco);
	border-radius: 50%;
	background: var(--bsv-oro);
	font-size: 19px;
}

/* ── Datos del sorteo ────────────────────────────────────────────────────── */

.bh-datos {
	position: relative;
	z-index: 2;
	margin-top: -38px;
}

.bsv-home .bh-datos__grilla {
	display: grid;
	grid-template-columns: 1.1fr 1.8fr 1.1fr;
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 0 15px 36px rgba(4, 55, 23, .2);
}

.bh-dato {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 102px;
	padding: 20px 27px;
	color: var(--bsv-blanco);
	background: var(--bsv-verde-footer);
}

.bh-dato dt {
	margin-bottom: 6px;
	color: #bdd4c3;
	font: 800 11px/1 var(--bh-titulos);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bh-dato dd {
	font: 800 clamp(20px, 2.2vw, 27px)/1.1 var(--bh-titulos);
	letter-spacing: -.03em;
}

.bh-dato--destacado {
	color: var(--bsv-verde-legal);
	background: var(--bsv-oro);
	text-align: center;
}

/* Verde oscuro y no el de marca: el de marca sobre oro da 3.76:1. */
.bh-dato--destacado dt {
	color: var(--bsv-verde-legal);
}

/* ── Catálogo de premios ─────────────────────────────────────────────────── */

.bh-catalogo {
	padding: 100px 0;
	background: var(--bh-niebla);
}

.bsv-home .bh-catalogo__grilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}

.bh-premio {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bh-borde);
	border-radius: var(--bh-radio);
	background: var(--bsv-blanco);
	box-shadow: 0 8px 18px rgba(13, 108, 48, .08);
	transition: transform .25s, box-shadow .25s;
}

.bh-premio:hover {
	transform: translateY(-4px);
	box-shadow: var(--bh-sombra);
}

.bh-premio__foto {
	position: relative;
	background: #e9f0ea;
}

/* 4:3: los premios son objetos —autos, motos, bicicletas— y la proporción
 * apaisada los muestra mejor que el 4:5 de los flyers. */
.bsv-home .bh-premio__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	contain: none;
	contain-intrinsic-size: none;
}

/*
 * Cantidad sobre la foto. Es el dato que evita cargar 63 tarjetas iguales: una
 * sola dice cuántas se entregan.
 */
.bsv-home .bh-premio__cantidad {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	display: grid;
	padding: 7px 11px;
	color: var(--bsv-blanco);
	border-radius: 10px;
	background: rgba(7, 64, 29, .88);
	text-align: center;
}

.bh-premio__cantidad b {
	font: 800 20px/1 var(--bh-titulos);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.bh-premio__cantidad span {
	margin-top: 2px;
	font: 700 9px/1 var(--bh-titulos);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bh-premio__texto {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px 22px;
}

.bsv-home .bh-premio__etiqueta {
	align-self: flex-start;
	padding: 4px 10px;
	color: var(--bsv-verde-legal);
	border-radius: 999px;
	background: var(--bsv-oro);
	font: 800 10px/1.4 var(--bh-titulos);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bsv-home .bh-premio__titulo {
	color: var(--bsv-verde-legal);
	font: 800 19px/1.25 var(--bh-titulos);
	letter-spacing: -.02em;
}

.bsv-home .bh-premio__detalle {
	color: var(--bh-gris);
	font-size: 14px;
	line-height: 1.5;
}

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

	.bh-premio:hover {
		transform: none;
	}
}

/* ── Premios ─────────────────────────────────────────────────────────────── */

.bh-premios {
	padding: 105px 0;
}

.bsv-home .bh-premios__grilla {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.bh-tarjeta {
	overflow: hidden;
	border: 1px solid var(--bh-borde);
	border-radius: 12px;
	background: var(--bsv-blanco);
	box-shadow: 0 8px 18px rgba(13, 108, 48, .08);
	transition: transform .25s, box-shadow .25s;
}

.bh-tarjeta:hover {
	transform: translateY(-5px);
	box-shadow: var(--bh-sombra);
}

/*
 * 4:5, la proporción de los flyers: sin recorte.
 *
 * contain e intrinsic-size en none: WordPress 6.7 agrega
 * contain-intrinsic-size: 3000px 1500px a las imágenes con sizes="auto", y otra
 * hoja les pone contain: size. Juntas ignoran el aspect-ratio y cada flyer
 * medía 1500px de alto.
 */
.bsv-home .bh-tarjeta img,
.bsv-home .bh-ganador img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	contain: none;
	contain-intrinsic-size: none;
}

.bh-premios__pie {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 33px;
}

/* ── Miniaturas ampliables ───────────────────────────────────────────────── */

.bsv-home .bh-zoom {
	position: relative;
	display: block;
	cursor: zoom-in;
}

/* La lupa avisa que la imagen se puede abrir. Es decorativa: el nombre
 * accesible del enlace sale del alt de la miniatura. */
.bh-zoom__icono {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 50%;
	background: rgba(7, 64, 29, .72);
	opacity: 0;
	transition: opacity .2s;
}

.bh-zoom__icono::before {
	content: "";
	width: 12px;
	height: 12px;
	border: 2px solid var(--bsv-blanco);
	border-radius: 50%;
	box-shadow: 7px 7px 0 -2px var(--bsv-blanco);
	transform: translate(-2px, -2px);
}

.bh-zoom:hover .bh-zoom__icono,
.bh-zoom:focus-visible .bh-zoom__icono {
	opacity: 1;
}

/* En táctil no hay hover: el indicador queda siempre visible, más tenue. */
@media (hover: none) {
	.bh-zoom__icono {
		opacity: .85;
	}
}

/* ── Visor a pantalla completa ───────────────────────────────────────────── */

.bsv-home .bh-visor {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--bsv-blanco);
	border: 0;
	background: rgba(4, 30, 14, .96);
}

.bsv-home .bh-visor:not([open]) {
	display: none;
}

.bh-visor::backdrop {
	background: rgba(4, 30, 14, .96);
}

.bsv-home .bh-visor[open] {
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.bh-visor__barra,
.bh-visor__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
}

.bh-visor__pie {
	justify-content: center;
}

.bsv-home .bh-visor__contador,
.bsv-home .bh-visor__ayuda {
	color: #cfe3d5;
	font: 700 13px/1.3 var(--bh-titulos);
	text-align: center;
}

.bsv-home .bh-visor__boton {
	display: grid;
	min-width: 46px;
	min-height: 46px;
	place-items: center;
	padding: 0;
	color: var(--bsv-blanco);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	font: 700 22px/1 var(--bh-titulos);
	cursor: pointer;
}

.bsv-home .bh-visor__boton:hover {
	background: rgba(255, 255, 255, .18);
}

.bsv-home .bh-visor__boton:focus-visible {
	outline: 3px solid var(--bsv-oro);
	outline-offset: 2px;
}

/*
 * El lienzo scrollea: al acercar, la imagen pasa a su tamaño natural y se
 * recorre. Es lo que permite leer la nómina de ganadores, que es el punto.
 */
.bh-visor__lienzo {
	display: grid;
	place-items: center;
	overflow: auto;
	padding: 0 14px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/*
 * La altura se acota contra la ventana y no con max-height: 100%: dentro de un
 * contenedor con overflow y altura indefinida, el porcentaje no resuelve y la
 * imagen abría a tamaño natural, ya recortada.
 *
 * Las dos declaraciones son a propósito: dvh descuenta las barras del navegador
 * en el celular; vh queda de respaldo donde dvh no exista.
 */
.bsv-home .bh-visor__lienzo img {
	max-width: 100%;
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-in;
	contain: none;
	contain-intrinsic-size: none;
}

.bsv-home .bh-visor__lienzo.es-ampliada img {
	max-width: none;
	max-height: none;
	width: auto;
	cursor: zoom-out;
}

/* ── Slider de premios semanales ─────────────────────────────────────────── */

.bh-slider {
	position: relative;
}

/*
 * El scroll lo hace el navegador: scroll-snap alinea cada flyer y el arrastre
 * táctil funciona solo. Las flechas del JS son un atajo, no el mecanismo.
 */
.bsv-home .bh-slider__pista {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px;
	margin: -4px;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

/* La barra se oculta: las flechas y el propio arrastre ya comunican que hay
 * más. En Firefox lo hace scrollbar-width. */
.bh-slider__pista::-webkit-scrollbar {
	display: none;
}

.bh-slider__pista:focus-visible {
	outline: 3px solid var(--bsv-oro);
	outline-offset: 4px;
}

.bh-slide {
	flex: 0 0 auto;
	width: clamp(230px, 26vw, 300px);
	scroll-snap-align: start;
	overflow: hidden;
	border: 1px solid var(--bh-borde);
	border-radius: 12px;
	background: var(--bsv-blanco);
	box-shadow: 0 8px 18px rgba(13, 108, 48, .08);
}

.bsv-home .bh-slide img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	contain: none;
	contain-intrinsic-size: none;
}

.bsv-home .bh-slider__flecha {
	position: absolute;
	top: calc(50% - 23px);
	z-index: 2;
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	padding: 0;
	color: var(--bsv-verde-legal);
	border: 1px solid var(--bh-borde);
	border-radius: 50%;
	background: var(--bsv-blanco);
	box-shadow: 0 6px 18px rgba(4, 55, 23, .18);
	font: 700 26px/1 var(--bh-titulos);
	cursor: pointer;
	transition: background-color .2s;
}

.bsv-home .bh-slider__flecha:hover {
	background: var(--bh-niebla);
}

.bsv-home .bh-slider__flecha:focus-visible {
	outline: 3px solid var(--bsv-oro);
	outline-offset: 2px;
}

/* Al llegar al extremo el botón queda visible pero inerte: si desapareciera,
 * el otro saltaría de lugar en cada extremo. */
.bsv-home .bh-slider__flecha[disabled] {
	opacity: .35;
	cursor: default;
}

.bh-slider__flecha--previa {
	left: -14px;
}

.bh-slider__flecha--siguiente {
	right: -14px;
}

@media (max-width: 900px) {
	.bh-slide {
		width: clamp(210px, 44vw, 280px);
	}

	/* Sobre el borde de la tira, que a este ancho ya no tiene aire al costado. */
	.bh-slider__flecha--previa {
		left: 2px;
	}

	.bh-slider__flecha--siguiente {
		right: 2px;
	}
}

@media (max-width: 640px) {
	.bh-slide {
		width: 70vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsv-home .bh-slider__pista {
		scroll-behavior: auto;
	}
}

/* ── Cuenta regresiva ────────────────────────────────────────────────────── */

.bh-cuenta {
	padding: 92px 0;
	color: var(--bsv-blanco);
	background: var(--bsv-verde-legal);
}

.bh-cuenta__grilla {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: 56px;
	align-items: center;
}

.bh-cuenta .bh-eyebrow {
	color: var(--bh-oro-claro);
}

.bsv-home .bh-cuenta h2 {
	margin: 15px 0;
	color: var(--bsv-blanco);
	font: 800 clamp(31px, 4vw, 48px)/1.05 var(--bh-titulos);
	letter-spacing: -.05em;
}

.bh-cuenta p {
	max-width: 490px;
	color: #d4e5d9;
	font-size: 17px;
	line-height: 1.55;
}

.bh-cuenta__celdas {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 11px;
}

.bh-celda {
	padding: 22px 6px 17px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 12px;
	background: rgba(255, 255, 255, .08);
	text-align: center;
}

.bh-celda b {
	display: block;
	color: var(--bsv-oro);
	font: 800 clamp(30px, 4vw, 46px)/1 var(--bh-titulos);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.05em;
}

.bh-celda span {
	display: block;
	margin-top: 8px;
	color: #d6e6db;
	font: 700 11px/1 var(--bh-titulos);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bsv-home .bh-cuenta__fecha {
	max-width: none;
	margin-top: 18px;
	color: var(--bsv-blanco);
	font-size: 14px;
	font-weight: 700;
	text-align: right;
}

/* ── Pasos ───────────────────────────────────────────────────────────────── */

.bh-pasos {
	padding: 108px 0;
	background: var(--bh-niebla);
}

.bsv-home .bh-pasos__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	counter-reset: bh-paso;
}

.bh-paso {
	position: relative;
	min-height: 218px;
	padding: 33px 31px 29px;
	border: 1px solid var(--bh-borde);
	border-radius: var(--bh-radio);
	background: var(--bsv-blanco);
	counter-increment: bh-paso;
}

/* Numeración por contador: el <ol> ya comunica el orden a lectores de pantalla. */
.bh-paso::before {
	content: counter(bh-paso, decimal-leading-zero);
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	margin-bottom: 24px;
	color: var(--bsv-verde-legal);
	border-radius: 50%;
	background: var(--bsv-oro);
	font: 800 15px/1 var(--bh-titulos);
}

.bh-paso:not(:last-child)::after {
	content: "→";
	position: absolute;
	z-index: 1;
	top: 92px;
	right: -30px;
	color: var(--bsv-oro);
	font: 800 31px/1 var(--bh-titulos);
}

.bsv-home .bh-paso h3 {
	margin-bottom: 10px;
	color: var(--bsv-verde-legal);
	font: 800 20px/1.2 var(--bh-titulos);
	letter-spacing: -.03em;
}

.bh-paso p {
	color: var(--bh-gris);
	font-size: 15px;
	line-height: 1.55;
}

/* ── Juego responsable ───────────────────────────────────────────────────── */

/*
 * Franja oscura entre los premios y los ganadores. Corta la página en dos a
 * propósito: si la advertencia se pinta con el mismo fondo claro que el resto,
 * se lee como una sección más de venta.
 *
 * El fondo es el verde de marca llevado casi a negro. No se usa --bsv-verde-legal
 * —el de la cuenta regresiva— para que las dos franjas oscuras de la página no
 * parezcan la misma, y porque este mensaje no tiene que verse festivo.
 *
 * Contrastes sobre --bh-carbon (WCAG AA, 4.5:1):
 *
 *   blanco             18.72   el texto de la leyenda
 *   oro claro          13.39   el eyebrow
 *   --bsv-texto-suave  13.04   la línea de apoyo
 *   oro (botón)        10.73   el botón de la línea de asistencia
 */
.bh-responsable {
	--bh-carbon: #0b1410;

	position: relative;
	padding: 76px 0;
	color: var(--bsv-blanco);
	background: var(--bh-carbon);
	text-align: center;
}

/* Filete dorado arriba: separa del bloque claro anterior sin una línea gris. */
.bh-responsable::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--bsv-verde), var(--bsv-oro) 45%, var(--bh-oro-claro));
}

.bh-responsable .bh-eyebrow {
	color: var(--bh-oro-claro);
}

.bsv-home .bh-responsable h2 {
	max-width: 19ch;
	margin: 18px auto 14px;
	color: var(--bsv-blanco);
	font: 800 clamp(26px, 3.6vw, 40px)/1.15 var(--bh-titulos);
	letter-spacing: -.03em;
	text-wrap: balance;
}

.bsv-home .bh-responsable p {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--bsv-texto-suave);
	font-size: 17px;
	line-height: 1.6;
}

.bh-responsable__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 30px;
}

/* ── Ganadores ───────────────────────────────────────────────────────────── */

.bh-ganadores {
	padding: 107px 0;
}

.bsv-home .bh-ganadores__grilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.bh-ganador {
	overflow: hidden;
	border-radius: 14px;
	background: #e9f0ea;
	box-shadow: 0 8px 20px rgba(4, 55, 23, .1);
}

.bh-ganador img {
	transition: transform .35s;
}

.bh-ganador:hover img {
	transform: scale(1.04);
}

/* ── Ayuda ───────────────────────────────────────────────────────────────── */

.bh-ayuda {
	padding: 79px 0;
	color: var(--bsv-blanco);
	background: linear-gradient(120deg, var(--bsv-verde), var(--bsv-verde-footer));
}

.bh-ayuda__caja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.bsv-home .bh-ayuda h2 {
	max-width: 720px;
	color: var(--bsv-blanco);
	font: 800 clamp(28px, 4vw, 43px)/1.1 var(--bh-titulos);
	letter-spacing: -.05em;
}

.bh-ayuda p {
	margin-top: 10px;
	color: #d8e8dc;
	font-size: 17px;
}

.bsv-home .bh-ayuda .bh-boton {
	flex: 0 0 auto;
	min-height: 52px;
	padding-inline: 28px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.bh-hero__grilla,
	.bh-cuenta__grilla {
		grid-template-columns: 1fr;
	}

	.bh-hero__grilla {
		padding-top: 60px;
		text-align: center;
	}

	.bh-hero__texto {
		display: grid;
		justify-items: center;
	}

	.bh-hero__acciones,
	.bh-hero__confianza {
		justify-content: center;
	}

	.bh-hero__arte {
		width: 100%;
		max-width: 430px;
		min-height: 260px;
		margin: 0 auto;
	}

	.bh-hero__chip {
		right: 0;
		bottom: 8px;
	}

	.bsv-home .bh-datos__grilla {
		grid-template-columns: 1fr 1fr;
	}

	.bh-dato--destacado {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.bsv-home .bh-premios__grilla,
	.bsv-home .bh-ganadores__grilla {
		grid-template-columns: repeat(3, 1fr);
	}

	.bsv-home .bh-catalogo__grilla {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 640px) {
	.bsv-home .bh-contenedor {
		width: calc(100% - 30px);
	}

	.bh-responsable {
		padding: 56px 0;
	}

	.bsv-home .bh-responsable h2 {
		max-width: none;
	}

	/* Los dos botones a lo ancho: al lado quedan dos cajas angostas. */
	.bh-responsable__acciones .bh-boton {
		width: 100%;
	}

	.bh-hero__grilla {
		min-height: 0;
		gap: 18px;
		padding: 44px 0 64px;
	}

	.bsv-home .bh-hero__titulo {
		font-size: clamp(40px, 13vw, 58px);
	}

	.bsv-home .bh-hero__bajada {
		font-size: 16px;
	}

	.bh-hero__acciones {
		display: grid;
		width: 100%;
	}

	.bh-hero__arte {
		min-height: 200px;
	}

	.bsv-home .bh-hero__poster {
		width: 290px;
	}

	.bh-hero__halo {
		width: 235px;
	}

	.bh-hero__chip {
		bottom: -6px;
		padding: 9px 10px;
		font-size: 11px;
	}

	.bh-hero__chip strong {
		font-size: 15px;
	}

	.bh-hero__estrella {
		width: 29px;
		height: 29px;
	}

	.bh-datos {
		margin-top: -22px;
	}

	.bh-dato {
		min-height: 88px;
		padding: 16px 14px;
	}

	.bh-premios,
	.bh-pasos,
	.bh-ganadores {
		padding: 70px 0;
	}

	.bh-catalogo {
		padding: 70px 0;
	}

	.bsv-home .bh-catalogo__grilla {
		grid-template-columns: 1fr;
		gap: 14px;
	}


	.bh-encabezado {
		margin-bottom: 29px;
	}

	.bh-encabezado p {
		font-size: 15px;
	}

	.bsv-home .bh-premios__grilla,
	.bsv-home .bh-ganadores__grilla {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.bh-cuenta {
		padding: 68px 0;
	}

	.bh-cuenta__grilla {
		gap: 30px;
	}

	.bh-cuenta__celdas {
		gap: 6px;
	}

	.bh-celda {
		padding: 16px 3px 13px;
	}

	.bh-celda b {
		font-size: 28px;
	}

	.bh-celda span {
		font-size: 10px;
		letter-spacing: .04em;
	}

	.bsv-home .bh-cuenta__fecha {
		text-align: center;
	}

	.bsv-home .bh-pasos__lista {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bh-paso {
		min-height: 0;
		padding: 27px 25px;
	}

	.bh-paso::before {
		margin-bottom: 17px;
	}

	.bh-paso:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -30px;
		left: calc(50% - 12px);
		transform: rotate(90deg);
	}

	.bh-ayuda {
		padding: 57px 0;
		text-align: center;
	}

	.bh-ayuda__caja {
		display: grid;
		gap: 23px;
	}

	.bsv-home .bh-ayuda .bh-boton {
		width: 100%;
	}
}

/* ── Instagram ───────────────────────────────────────────────────────────── */

.bh-instagram {
	padding: 100px 0;
}

/*
 * La grilla la arma el plugin; acá solo se le da aire y se evita que se escape
 * del ancho, que es lo que suele pasar con los feeds embebidos.
 */
.bh-instagram__galeria {
	max-width: 100%;
	overflow: hidden;
}

.bsv-home .bh-instagram__galeria img {
	border-radius: 8px;
}

@media (max-width: 640px) {
	.bh-instagram {
		padding: 70px 0;
	}
}

/* ── Slider ancho: paneles informativos ──────────────────────────────────── */

.bh-faq {
	padding: 100px 0;
	background: var(--bh-niebla);
}

/*
 * Estos paneles son piezas de diseño con texto, no fotos de producto: no se
 * recortan. El alto lo pone la propia imagen.
 */
.bh-slider--ancho .bh-slide {
	width: clamp(300px, 46vw, 520px);
}

.bsv-home .bh-slider--ancho .bh-slide img {
	aspect-ratio: auto;
	object-fit: contain;
}

@media (max-width: 640px) {
	.bh-faq {
		padding: 70px 0;
	}

	.bh-slider--ancho .bh-slide {
		width: 80vw;
	}
}