/**
 * Bloque "Juego del día" — El pulso del mundial.
 *
 * Layout de 2 columnas: pregunta del día (izquierda) y marcador + WhatsApp
 * apilados (derecha). Incluye los estilos del marcador y del CTA de
 * WhatsApp (antes en bloques sueltos, ahora consolidados aquí).
 *
 * La pregunta (.pulso-pregunta) se estiliza en page-el-pulso-del-mundial.css,
 * que ya se carga en esta plantilla.
 */

.pulso-submit {
	background-color: var(--primary-red);
	color: var(--color-white);
	border: 2px solid var(--color-red);
	border-radius: 7px;
	padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
	font-family: var(--font-bud-bold);
	font-size: clamp(16px, 1.5vw, 20px);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	transition: all var(--transition-normal);
}

.pulso-juego {
	padding: 20px;
}

/* ===== Layout 2 columnas ===== */
.pulso-juego__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
	margin: 0 auto;
}

.pulso-juego__right {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Cuando el bloque de WhatsApp está oculto (toggle off, p.ej. en la página
   del Chiringuito), el marcador es el único hijo y debe ocupar toda la
   altura de la columna. */
.pulso-juego__right--solo-marcador .pulso-marcador-block {
	flex: 1 1 auto;
}

@media (max-width: 900px) {
	.pulso-juego__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== Marcador global ===== */
.pulso-marcador-block {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto; /* rellena el alto restante de la columna derecha */
	background-color: var(--primary-blue, #0a0541);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white, #fff);
	min-height: 190px;
	display: flex;
}

.pulso-marcador-block__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.pulso-marcador-block__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 30px 28px;
}

.pulso-marcador-block__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.pulso-marcador-block__logo {
	width: 56px;
	height: 56px;
	object-fit: contain;
	flex: 0 0 auto;
}

.pulso-marcador-block__titulo {
	font-family: var(--font-secondary, serif);
	font-size: clamp(20px, 3vw, 42px);
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

.pulso-marcador-block__scores {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.pulso-marcador-block__team {
	font-family: var(--font-secondary, serif);
	font-weight: 700;
	font-size: clamp(20px, 2vw, 26px);
	text-transform: uppercase;
}

.pulso-marcador-block__badge {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	color: var(--color-white, #fff);
	flex: 0 0 auto;
}

/* El número va en un <svg>: text-anchor=middle + dominant-baseline=central
   lo centran por geometría de la fuente, idéntico en Chrome y Firefox.
   El viewBox 0 0 100 100 hace que el font-size sea relativo al círculo:
   60 unidades ≈ 60% del diámetro. Como el SVG ocupa el 100% del badge, el
   número se reescala solo en cada breakpoint (no hace falta tocar tamaños).
   fill:currentColor hereda el color del badge. Para subir/bajar el número,
   un único dy="..." en el <text> vale para todos los navegadores. */
.pulso-marcador-block__badge-num {
	display: block;
	width: 100%;
	height: 100%;
}
.pulso-marcador-block__badge-num text {
	font-family: var(--font-secondary, serif);
	font-weight: 700;
	font-size: 60px;
	fill: currentColor;
}

.pulso-marcador-block__badge--hosteleros {
	background: #da001d5f;
	border: 5px solid var(--primary-red, #da001c);
}

.pulso-marcador-block__badge--chiringuito {
	background: #2415c54d;
	border: 5px solid #2415c5;
}

/* ===== CTA de WhatsApp ===== */
.pulso-whatsapp {
	background: var(--color-white, #fff);
	box-sizing: border-box;
	flex: 0 0 auto; /* tamaño según su contenido; el marcador es el que rellena */
}

.pulso-whatsapp__inner {
	padding: 28px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.pulso-whatsapp__titulo {
	font-family: var(--font-secondary, serif);
	font-size: clamp(20px, 3vw, 40px);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--primary-blue, #0a0541);
	margin: 0 0 12px;
}

.pulso-whatsapp__texto {
	font-family: var(--font-roboto);
	font-size: clamp(20px, 2vw, 22px);
	color: var(--primary-blue, #0a0541);
	margin: 0 0 20px;
	max-width: 42ch;
}

.pulso-whatsapp__texto p {
	margin: 0;
}

.pulso-whatsapp__texto strong {
	color: var(--primary-red, #da001c);
}

.pulso-whatsapp__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #25d366;
	color: #fff;
	font-family: var(--font-roboto);
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--color-red);
	border-radius: 7px;
	padding: clamp(15px, 1.2vw, 17px) clamp(16px, 2.4vw, 37px);
	font-family: var(--font-bud-bold);
	font-size: clamp(16px, 1.5vw, 20px);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	transition: all var(--transition-normal);
}

.pulso-whatsapp__btn:hover,
.pulso-whatsapp__btn:focus-visible {
	background: #1da851;
	color: #fff;
}

.pulso-whatsapp__icon {
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	.pulso-marcador-block__logo {
		width: 44px;
		height: 44px;
	}

	.pulso-marcador-block__badge {
		width: 48px;
		height: 48px;
	}

	.pulso-marcador-block__scores {
		gap: 10px;
	}
}