/**
 * Sorteo Pro — vista pública.
 *
 * Fondo negro y dorado. Todo el color sale de las variables de abajo, así que
 * un tema solo tiene que cambiarlas: la estructura no se toca.
 *
 * Regla de oro de esta hoja: el fondo siempre es oscuro y el dorado siempre
 * es claro. Por eso existe --sorteo-sobre-oro, que es la tinta que va encima
 * del dorado y nunca depende de la paleta.
 */

.sorteo-envoltura {
	--sorteo-fondo: #030405;
	--sorteo-fondo-2: #070a0b;
	--sorteo-panel: #0b0e0f;
	--sorteo-panel-2: #101415;
	--sorteo-panel-3: #161b1c;

	--sorteo-oro: #ffc400;
	--sorteo-oro-2: #ff9d00;
	--sorteo-oro-claro: #ffdf7a;
	--sorteo-oro-tenue: rgba(255, 196, 0, 0.13);
	/* Tinta para lo que va encima del dorado. El dorado siempre es claro. */
	--sorteo-sobre-oro: #080909;

	--sorteo-texto: #f4f4f4;
	--sorteo-suave: #b6b9bb;
	--sorteo-tenue: #93979a;

	--sorteo-linea: rgba(255, 196, 0, 0.34);
	--sorteo-linea-suave: rgba(255, 255, 255, 0.12);

	--sorteo-verde: #3ddc84;
	--sorteo-sobre-verde: #04180d;
	--sorteo-rojo: #ff6b57;
	--sorteo-rojo-fondo: rgba(255, 107, 87, 0.14);
	--sorteo-aviso: #ffd166;
	--sorteo-aviso-fondo: rgba(255, 209, 102, 0.13);

	--sorteo-brillo: 0 0 35px rgba(255, 180, 0, 0.1);
	--sorteo-radio: 14px;

	--sorteo-cartel: "Barlow Condensed", "Anton", "Arial Narrow", Impact, sans-serif;
	--sorteo-cuerpo: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;

	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	background: var(--sorteo-fondo);
	color: var(--sorteo-texto);
	font-family: var(--sorteo-cuerpo);
	font-size: 16px;
	line-height: 1.6;
	border: 1px solid var(--sorteo-linea-suave);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

/* El resplandor dorado de arriba, como en el diseño de referencia. */
.sorteo-envoltura::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 420px;
	pointer-events: none;
	background: radial-gradient(circle at 50% -12%, rgba(255, 194, 0, 0.11), transparent 62%);
	z-index: 0;
}

.sorteo-envoltura > * {
	position: relative;
	z-index: 1;
}

.sorteo-envoltura *,
.sorteo-envoltura *::before,
.sorteo-envoltura *::after {
	box-sizing: inherit;
}

/* El atributo hidden debe ganarle a cualquier display de estas hojas: sin
   esto, un elemento con display:flex se sigue viendo aunque esté oculto. */
.sorteo-envoltura [hidden] {
	display: none !important;
}

/* Se usa :where() para que estas bases no le ganen en especificidad a las
   reglas de cada componente, que solo llevan una clase. */
:where(.sorteo-envoltura) h2,
:where(.sorteo-envoltura) h3,
:where(.sorteo-envoltura) h4 {
	font-family: var(--sorteo-cartel);
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 0.92;
	margin: 0 0 10px;
	color: var(--sorteo-texto);
}

:where(.sorteo-envoltura) h3 {
	font-size: clamp(30px, 4.4vw, 40px);
}

:where(.sorteo-envoltura) h4 {
	font-size: 22px;
}

:where(.sorteo-envoltura) p {
	margin: 0 0 12px;
}

:where(.sorteo-envoltura) b,
:where(.sorteo-envoltura) strong {
	font-weight: 700;
}

.sorteo-wrap {
	padding: 0 22px;
}

.sorteo-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.sorteo-envoltura--normal {
	max-width: 920px;
}

.sorteo-envoltura--ancho {
	max-width: 1200px;
}

/* Se sale del contenedor del tema para ocupar toda la pantalla.
   Los márgenes van con !important porque los temas de bloques imponen
   "margin-left: auto !important" a los hijos de un contenedor restringido.
   --sorteo-scroll lo pone el JS con el ancho de la barra de desplazamiento;
   sin él, 100vw se pasaría de largo y aparecería scroll horizontal. */
.sorteo-envoltura--completo {
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw + (var(--sorteo-scroll, 0px) / 2)) !important;
	margin-right: calc(50% - 50vw + (var(--sorteo-scroll, 0px) / 2)) !important;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

/* En pantalla completa el color llega a los bordes, pero el contenido se
   mantiene en un ancho cómodo de leer. */
/* El width: 100% no sobra. Dentro de un contenedor flex en columna, poner
   los márgenes en auto anula el estirado y la caja se encoge a lo que ocupe
   su contenido: la cabecera se quedaba en la mitad de ancho. */
.sorteo-envoltura--completo .sorteo-wrap,
.sorteo-envoltura--completo .sorteo-columnas {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* Piezas compartidas ---------------------------------------------------- */

.sorteo-kicker {
	display: inline-block;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sorteo-oro);
	margin-bottom: 8px;
}

/* La caja base de casi todo el sitio. */
.sorteo-ficha,
.sorteo-boleta,
.sorteo-forma,
.sorteo-exito,
.sorteo-premio,
.sorteo-paso,
.sorteo-resultado-fila,
.sorteo-faq__item,
.sorteo-contacto {
	background: linear-gradient(145deg, rgba(14, 18, 19, 0.96), rgba(5, 8, 9, 0.98));
	border: 1px solid var(--sorteo-linea);
	border-radius: var(--sorteo-radio);
	box-shadow: var(--sorteo-brillo);
}

/* En pantalla completa el bloque es la página entera: se pinta también el
   fondo del documento para que no asome el color del constructor por los
   bordes. Solo aplica en este modo, que es el que pide tomar la pantalla. */
:root:has(.sorteo-envoltura--completo) body {
	background-color: #030405;
}

/* Nada de scroll-behavior global: dejaba todo desplazamiento (incluido el
   que provoca dar el foco) a merced de la animación. Si esta no corría, la
   caja de compra nunca llegaba a verse. Cada salto pide su modo en el JS. */

/* Que el destino no quede pegado al borde de arriba al saltar. */
.sorteo-zona-boleta {
	scroll-margin-top: 24px;
}

/* Rótulo de marca ------------------------------------------------------- */

.sorteo-marca {
	text-align: center;
	padding: 30px 0 24px;
	background:
		radial-gradient(circle at 50% 120%, rgba(255, 196, 0, 0.16), transparent 62%),
		var(--sorteo-fondo);
	border-bottom: 1px solid var(--sorteo-linea);
}

.sorteo-marca__estrellas {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-bottom: 12px;
}

/* Las estrellas se dibujan en CSS: así no las lee el lector de pantalla ni
   dependen de que la fuente traiga el símbolo. */
.sorteo-marca__estrella {
	width: 17px;
	height: 17px;
	background: var(--sorteo-oro);
	filter: drop-shadow(0 0 7px rgba(255, 196, 0, 0.55));
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sorteo-marca__nombre {
	margin: 0;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(34px, 6.4vw, 68px);
	line-height: 0.9;
	letter-spacing: 0.01em;
	background: linear-gradient(180deg, var(--sorteo-oro-claro) 0%, var(--sorteo-oro) 48%, var(--sorteo-oro-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0 28px rgba(255, 180, 0, 0.3));
	overflow-wrap: anywhere;
}

.sorteo-marca__lema {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--sorteo-suave);
}

/* Cinta superior -------------------------------------------------------- */

.sorteo-cinta {
	overflow: hidden;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255, 196, 0, 0.16);
	background: var(--sorteo-fondo-2);
	padding: 10px 0;
}

.sorteo-cinta__pista {
	display: inline-flex;
	animation: sorteo-cinta-corre 34s linear infinite;
}

.sorteo-cinta__grupo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.sorteo-cinta__item {
	font-family: var(--sorteo-cartel);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sorteo-suave);
	padding: 0 26px;
	position: relative;
}

.sorteo-cinta__item::after {
	content: "\2605";
	position: absolute;
	right: -5px;
	color: var(--sorteo-oro);
	font-size: 10px;
}

@keyframes sorteo-cinta-corre {
	to {
		transform: translateX(-50%);
	}
}

/* Cabecera -------------------------------------------------------------- */

.sorteo-hero {
	position: relative;
	padding: 54px 0 0;
	background:
		radial-gradient(circle at 78% 26%, rgba(255, 177, 0, 0.14), transparent 48%),
		linear-gradient(180deg, var(--sorteo-fondo-2), var(--sorteo-fondo));
}

/* La foto del premio hace de fondo. El velo va más denso a la izquierda,
   que es donde cae el texto. */
.sorteo-hero--foto {
	/* El velo ya no carga hacia un lado: antes tapaba entera la foto de la
	   izquierda. Aquí solo oscurece arriba y abajo, para que la cinta y el
	   pie se lean; de proteger el texto se encarga el propio bloque, que
	   lleva su mancha y así funciona esté donde esté. */
	background:
		linear-gradient(180deg, rgba(3, 4, 5, 0.88) 0%, rgba(3, 4, 5, 0.38) 22%, rgba(3, 4, 5, 0.38) 64%, rgba(3, 4, 5, 0.95) 100%),
		radial-gradient(circle at 78% 28%, rgba(255, 177, 0, 0.16), transparent 44%),
		var(--sorteo-hero-foto) center / cover no-repeat;
	min-height: 520px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* En el teléfono la foto apaisada se recortaba por el centro y dejaba fuera
   lo de los lados. Si hay una vertical subida, manda esa. */
@media (max-width: 760px) {
	.sorteo-hero--movil {
		background-image:
			linear-gradient(180deg, rgba(3, 4, 5, 0.88) 0%, rgba(3, 4, 5, 0.38) 22%, rgba(3, 4, 5, 0.38) 64%, rgba(3, 4, 5, 0.95) 100%),
			radial-gradient(circle at 78% 28%, rgba(255, 177, 0, 0.16), transparent 44%),
			var(--sorteo-hero-movil);
	}
}

/* Un degradado al pie funde la foto con el fondo de la página. */
.sorteo-hero--foto::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 150px;
	pointer-events: none;
	background: linear-gradient(transparent, var(--sorteo-fondo));
}

.sorteo-hero--foto > * {
	position: relative;
	z-index: 1;
}

.sorteo-hero__texto {
	max-width: 34ch;
	margin-bottom: 30px;
}

/* La mancha va pegada al texto, no al costado de la cabecera: así el titular
   se lee sobre cualquier foto sin tener que oscurecer media pantalla. */
.sorteo-hero--foto .sorteo-hero__texto {
	margin-left: -34px;
	margin-right: -34px;
	padding: 30px 34px;
	background: radial-gradient(ellipse 62% 72% at 34% 50%, rgba(3, 4, 5, 0.88), rgba(3, 4, 5, 0.6) 58%, rgba(3, 4, 5, 0) 100%);
}

/* En el teléfono el texto ocupa casi todo el ancho, así que la mancha se
   centra y se ensancha: si no, la derecha del titular se quedaba fuera y
   sobre una foto clara no habría forma de leerlo. */
@media (max-width: 760px) {
	.sorteo-hero--foto .sorteo-hero__texto {
		background: radial-gradient(ellipse 94% 78% at 50% 50%, rgba(3, 4, 5, 0.9), rgba(3, 4, 5, 0.66) 62%, rgba(3, 4, 5, 0) 100%);
	}
}

.sorteo-hero__titulo {
	font-size: clamp(44px, 8.6vw, 100px);
	line-height: 0.82;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: var(--sorteo-texto);
	text-shadow: 4px 6px 0 rgba(0, 0, 0, 0.5);
	overflow-wrap: anywhere;
}

.sorteo-hero__premio {
	font-size: 16px;
	color: var(--sorteo-suave);
	max-width: 46ch;
	margin: 0;
}

.sorteo-hero__accion {
	margin: 0 0 26px;
}

/* Lleva el padre delante a propósito: la regla base de .sorteo-wa está más
   abajo en esta hoja y, con la misma especificidad, ganaba ella y el botón
   se estiraba a todo el ancho. */
.sorteo-hero__accion .sorteo-wa--comprar {
	width: auto;
	padding: 16px 30px;
	font-size: 16px;
	letter-spacing: 0.02em;
}

.sorteo-wa__flecha {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.22s ease;
}

.sorteo-hero__accion .sorteo-wa--comprar:hover .sorteo-wa__flecha {
	transform: rotate(45deg) translate(2px, 2px);
}

/* Redes del organizador, discretas al pie ------------------------------- */

.sorteo-redes {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sorteo-red {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sorteo-tenue);
	border: 1px solid var(--sorteo-linea-suave);
	border-radius: 999px;
	padding: 7px 16px;
	transition: color 0.22s ease, border-color 0.22s ease;
}

.sorteo-red:hover,
.sorteo-red:focus-visible {
	color: var(--sorteo-oro);
	border-color: var(--sorteo-linea);
}

/* Datos rápidos --------------------------------------------------------- */

.sorteo-datos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 28px;
	border: 1px solid var(--sorteo-linea);
	border-radius: var(--sorteo-radio);
	overflow: hidden;
	background: linear-gradient(145deg, rgba(14, 18, 19, 0.96), rgba(5, 8, 9, 0.98));
	box-shadow: var(--sorteo-brillo);
}

.sorteo-datos__celda {
	padding: 18px 20px;
	border-right: 1px solid var(--sorteo-linea-suave);
}

.sorteo-datos__celda:last-child {
	border-right: 0;
}

.sorteo-datos__celda span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sorteo-oro);
}

.sorteo-datos__celda strong {
	display: block;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 26px;
	line-height: 1.1;
	margin-top: 4px;
	color: var(--sorteo-texto);
	font-variant-numeric: tabular-nums;
}

.sorteo-datos__oro {
	color: var(--sorteo-oro);
}

/* Avance de ventas ------------------------------------------------------ */

.sorteo-avance {
	padding: 26px 0 34px;
}

.sorteo-avance__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sorteo-suave);
	margin-bottom: 10px;
}

.sorteo-avance__cabeza b {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-size: 22px;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

.sorteo-barra {
	height: 10px;
	border-radius: 999px;
	background: var(--sorteo-panel-2);
	border: 1px solid var(--sorteo-linea-suave);
	overflow: hidden;
}

.sorteo-barra i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--sorteo-oro-2), var(--sorteo-oro));
	box-shadow: 0 0 14px rgba(255, 190, 0, 0.5);
	transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.sorteo-avance small {
	display: block;
	margin-top: 9px;
	font-size: 12px;
	color: var(--sorteo-tenue);
}

.sorteo-pausa {
	margin: 0;
	padding: 14px 22px;
	background: var(--sorteo-aviso-fondo);
	border-top: 1px solid var(--sorteo-linea);
	color: var(--sorteo-aviso);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* Ganador --------------------------------------------------------------- */

.sorteo-ganador {
	text-align: center;
	padding: 36px 22px;
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 196, 0, 0.18), transparent 60%),
		var(--sorteo-fondo-2);
	border-top: 1px solid var(--sorteo-linea);
	border-bottom: 1px solid var(--sorteo-linea);
}

.sorteo-ganador__titulo {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 0.2em;
	color: var(--sorteo-oro);
	margin: 0 0 6px;
}

.sorteo-ganador__numero {
	display: block;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(56px, 12vw, 104px);
	line-height: 0.9;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 34px rgba(255, 190, 0, 0.35);
}

.sorteo-ganador__premio {
	margin: 6px 0 0;
	font-size: 16px;
	color: var(--sorteo-suave);
}

/* Vitrina de premios ---------------------------------------------------- */

.sorteo-premios {
	padding: 46px 0;
	border-top: 1px solid var(--sorteo-linea-suave);
	border-bottom: 1px solid var(--sorteo-linea-suave);
}

.sorteo-premios__cabeza {
	text-align: center;
	margin-bottom: 28px;
}

.sorteo-premios h3 {
	font-size: clamp(32px, 5.6vw, 52px);
	margin: 0 0 6px;
}

.sorteo-premios__cuando {
	color: var(--sorteo-suave);
	font-size: 15px;
	margin: 0;
}

.sorteo-premios__aviso {
	display: inline-block;
	margin: 15px 0 0;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--sorteo-oro-tenue);
	border: 1px solid var(--sorteo-linea);
	color: var(--sorteo-oro-claro);
	font-size: 13px;
	font-weight: 700;
}

.sorteo-premios__rejilla {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.sorteo-premio {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	margin: 0;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
	.sorteo-premio:hover {
		transform: translateY(-6px);
		border-color: var(--sorteo-oro);
		box-shadow: 0 0 35px rgba(255, 190, 0, 0.16);
	}

	.sorteo-premio:hover .sorteo-premio__imagen {
		transform: scale(1.05);
	}
}

.sorteo-premio--mayor {
	border-color: var(--sorteo-oro);
	box-shadow: 0 0 44px rgba(255, 180, 0, 0.16);
}

/* Filo dorado en el borde de arriba: el detalle que da el aire de premium. */
.sorteo-premio::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sorteo-oro), transparent);
	opacity: 0.55;
	z-index: 2;
}

.sorteo-premio--mayor::before {
	opacity: 1;
	height: 3px;
}

.sorteo-premio__foto {
	position: relative;
	/* En una sola columna no se impone proporción: la altura la marca la
	   propia foto, así que no se corta nada. */
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 48%, rgba(255, 196, 0, 0.18), transparent 60%),
		linear-gradient(145deg, var(--sorteo-panel-3), #060808);
}

/* La foto se ve entera, nunca recortada: el organizador sube lo que sea.
   El tope evita que una foto muy vertical se coma la pantalla. */
.sorteo-premio__imagen {
	width: 100%;
	height: auto;
	max-height: 54vh;
	object-fit: contain;
	display: block;
	transition: transform 0.35s ease;
}

.sorteo-premio__sin-foto {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sorteo-tenue);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sorteo-premio__contador {
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: rgba(3, 4, 5, 0.86);
	border: 1px solid var(--sorteo-linea);
	color: var(--sorteo-oro-claro);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
}

.sorteo-premio__texto {
	padding: 20px 22px 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sorteo-premio__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.sorteo-premio__rotulo {
	display: inline-block;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.5;
	padding: 4px 11px;
	border-radius: 4px;
	background: var(--sorteo-panel-3);
	color: var(--sorteo-suave);
}

/* El rótulo de orden y la fecha: los dos en dorado, que es lo que importa. */
.sorteo-premio__rotulo--orden,
.sorteo-premio__rotulo--dia {
	background: var(--sorteo-oro);
	color: var(--sorteo-sobre-oro);
}

.sorteo-premio__rotulo--dia {
	font-variant-numeric: tabular-nums;
}

.sorteo-premio__rotulo--acumulado {
	background: var(--sorteo-oro-tenue);
	color: var(--sorteo-oro-claro);
	border: 1px solid var(--sorteo-linea);
}

.sorteo-premio__rotulo--fecha {
	background: var(--sorteo-panel-3);
	color: var(--sorteo-oro-claro);
	border: 1px solid var(--sorteo-linea);
}

.sorteo-premio__nombre {
	font-size: clamp(26px, 3.6vw, 38px);
	line-height: 0.94;
	margin: 0 0 10px;
	color: var(--sorteo-texto);
	overflow-wrap: anywhere;
}

.sorteo-premio__desc {
	color: var(--sorteo-suave);
	font-size: 14px;
	margin: 0 0 16px;
}

.sorteo-premio__cuenta {
	margin: 0 0 16px;
	gap: 6px;
}

.sorteo-premio__cuenta .sorteo-cuenta__par {
	flex: 1 1 46px;
	padding: 7px 3px;
	background: rgba(0, 0, 0, 0.42);
}

.sorteo-premio__cuenta .sorteo-cuenta__par b {
	font-size: 22px;
}

.sorteo-premio--mayor .sorteo-premio__cuenta .sorteo-cuenta__par b {
	font-size: 30px;
}

.sorteo-premio__pie {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--sorteo-linea-suave);
}

.sorteo-premio__valor {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 30px;
	color: var(--sorteo-oro);
	letter-spacing: 0.01em;
}

.sorteo-premio__juega {
	font-size: 12px;
	font-weight: 700;
	color: var(--sorteo-suave);
	text-align: right;
}

.sorteo-premio__origen {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--sorteo-oro-claro);
	font-weight: 700;
}

@media (min-width: 700px) {
	.sorteo-premios__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}

	/* El premio mayor ocupa la columna derecha de arriba abajo. Los demás
	   caen solos en la izquierda, uno debajo de otro. */
	.sorteo-premios__rejilla .sorteo-premio--mayor {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	/* Aquí sí manda la caja, para que las tarjetas casen de altura. La foto
	   se centra dentro sin recortarse. */
	.sorteo-premio__imagen {
		height: 100%;
		max-height: none;
	}

	/* Proporción fija: si se deja crecer, la foto se come la tarjeta y el
	   texto queda aplastado abajo. */
	.sorteo-premio--mayor .sorteo-premio__foto {
		aspect-ratio: 4 / 3;
		flex: 0 0 auto;
	}

	.sorteo-premio--mayor .sorteo-premio__nombre {
		font-size: clamp(34px, 3.6vw, 50px);
	}

	.sorteo-premio--mayor .sorteo-premio__texto {
		padding: 26px 28px 28px;
	}

	/* Las tarjetas pequeñas van en horizontal: foto a un lado, texto al otro. */
	.sorteo-premio:not(.sorteo-premio--mayor) {
		flex-direction: row;
	}

	.sorteo-premio:not(.sorteo-premio--mayor) .sorteo-premio__foto {
		flex: 0 0 38%;
		aspect-ratio: auto;
	}

	.sorteo-premio:not(.sorteo-premio--mayor) .sorteo-premio__texto {
		flex: 1 1 auto;
	}
}

/* Columnas -------------------------------------------------------------- */

.sorteo-columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	padding: 34px 0;
}

.sorteo-principal {
	min-width: 0;
}

.sorteo-lateral {
	display: grid;
	gap: 16px;
	align-content: start;
	min-width: 0;
	padding: 0 22px;
}

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

.sorteo-wa,
.sorteo-boton-linea {
	font: inherit;
	cursor: pointer;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	text-decoration: none;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

/* El botón principal: dorado, como el de la referencia. */
.sorteo-wa {
	border: 0;
	background: linear-gradient(135deg, #ffd426, #f6a900);
	color: var(--sorteo-sobre-oro);
	font-weight: 900;
	font-size: 15px;
	padding: 15px 26px;
	width: 100%;
	box-shadow: 0 0 20px rgba(255, 190, 0, 0.24);
}

.sorteo-wa:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 0 30px rgba(255, 190, 0, 0.42);
}

.sorteo-wa:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

.sorteo-wa--chico {
	width: auto;
	padding: 11px 20px;
	font-size: 14px;
}

.sorteo-icono-wa {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: currentColor;
}

.sorteo-boton-linea {
	background: transparent;
	border: 1px solid var(--sorteo-linea);
	color: var(--sorteo-oro);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 20px;
}

.sorteo-boton-linea:hover:not(:disabled) {
	background: var(--sorteo-oro-tenue);
	border-color: var(--sorteo-oro);
}

.sorteo-boton-linea:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Zona de compra -------------------------------------------------------- */

.sorteo-zona-boleta {
	margin-bottom: 22px;
}

.sorteo-boleta {
	padding: 28px 26px;
}

.sorteo-boleta--vacia {
	text-align: center;
	color: var(--sorteo-suave);
}

.sorteo-paso-actual {
	display: inline-block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sorteo-oro);
	margin-bottom: 8px;
}

.sorteo-boleta__titulo {
	font-size: clamp(28px, 4.2vw, 42px);
	margin: 0 0 6px;
}

.sorteo-boleta__sub {
	color: var(--sorteo-suave);
	font-size: 14px;
	margin: 0 0 18px;
}

/* Buscador -------------------------------------------------------------- */

.sorteo-buscador {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.sorteo-buscador .sorteo-campo {
	flex: 1 1 150px;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 30px;
	text-align: center;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	padding: 10px 14px;
}

.sorteo-buscador button {
	font: inherit;
	font-weight: 900;
	cursor: pointer;
	border: 0;
	border-radius: 8px;
	padding: 0 26px;
	background: linear-gradient(135deg, #ffd426, #f6a900);
	color: var(--sorteo-sobre-oro);
	box-shadow: 0 0 20px rgba(255, 190, 0, 0.24);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.sorteo-buscador button:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 0 30px rgba(255, 190, 0, 0.42);
}

.sorteo-buscador button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sorteo-rango {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--sorteo-tenue);
}

/* Campos ---------------------------------------------------------------- */

.sorteo-campo {
	width: 100%;
	font: inherit;
	color: var(--sorteo-texto);
	background: var(--sorteo-fondo);
	border: 1px solid var(--sorteo-linea-suave);
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sorteo-campo::placeholder {
	color: var(--sorteo-tenue);
	opacity: 1;
}

.sorteo-campo:focus {
	outline: none;
	border-color: var(--sorteo-oro);
	box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.2);
}

.sorteo-campo--invalido {
	border-color: var(--sorteo-rojo);
}

.sorteo-campo-grupo {
	margin-bottom: 14px;
}

.sorteo-etiqueta {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sorteo-oro);
	margin-bottom: 6px;
}

.sorteo-opcional {
	color: var(--sorteo-tenue);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.sorteo-campo-error {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--sorteo-rojo);
	min-height: 1em;
}

/* Resultado de la búsqueda ---------------------------------------------- */

.sorteo-resultado {
	margin-top: 20px;
	padding: 20px;
	border: 1px dashed var(--sorteo-linea);
	border-radius: var(--sorteo-radio);
	background: rgba(255, 196, 0, 0.04);
}

.sorteo-resultado__vacio,
.sorteo-resultado__cargando {
	margin: 0;
	color: var(--sorteo-suave);
	font-size: 14px;
}

.sorteo-resultado__error {
	margin: 0;
	color: var(--sorteo-rojo);
	font-size: 14px;
	font-weight: 700;
}

.sorteo-resultado__titular {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 28px;
	line-height: 1;
	margin: 10px 0 6px;
	color: var(--sorteo-texto);
}

.sorteo-resultado__texto {
	color: var(--sorteo-suave);
	font-size: 14px;
	margin: 0 0 14px;
}

.sorteo-sello {
	display: inline-block;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 4px;
	background: var(--sorteo-panel-3);
	color: var(--sorteo-suave);
}

.sorteo-sello--libre {
	background: rgba(61, 220, 132, 0.16);
	color: var(--sorteo-verde);
}

.sorteo-sello--reservado {
	background: var(--sorteo-aviso-fondo);
	color: var(--sorteo-aviso);
}

.sorteo-sello--vendido {
	background: var(--sorteo-rojo-fondo);
	color: var(--sorteo-rojo);
}

.sorteo-sello--ganador {
	background: var(--sorteo-oro);
	color: var(--sorteo-sobre-oro);
}

/* Sorpréndeme ----------------------------------------------------------- */

.sorteo-sorpresa {
	margin-top: 16px;
}

.sorteo-sorpresa__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

/* Resumen del pedido ---------------------------------------------------- */

.sorteo-resumen {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--sorteo-linea);
	border-radius: var(--sorteo-radio);
	background: var(--sorteo-oro-tenue);
}

.sorteo-resumen__rotulo {
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sorteo-oro);
	margin-bottom: 10px;
}

.sorteo-resumen__fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sorteo-ficha-numero {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--sorteo-oro);
	color: var(--sorteo-sobre-oro);
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 19px;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	padding: 5px 8px 5px 13px;
	border-radius: 6px;
}

.sorteo-ficha-numero__quitar {
	font: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	border: 0;
	border-radius: 4px;
	width: 21px;
	height: 21px;
	display: grid;
	place-items: center;
	background: rgba(8, 9, 9, 0.18);
	color: var(--sorteo-sobre-oro);
}

.sorteo-ficha-numero__quitar:hover {
	background: rgba(8, 9, 9, 0.4);
}

.sorteo-resumen__total {
	margin: 14px 0 0;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 26px;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
}

.sorteo-resumen__nota {
	margin: 12px 0;
	font-size: 12px;
	color: var(--sorteo-tenue);
	text-align: center;
}

/* Formulario ------------------------------------------------------------ */

.sorteo-forma {
	margin-top: 18px;
	padding: 26px;
}

.sorteo-forma__titulo {
	font-size: 26px;
	margin: 0 0 6px;
}

.sorteo-forma__intro {
	color: var(--sorteo-suave);
	font-size: 14px;
	margin: 0 0 18px;
}

.sorteo-forma__aviso {
	margin: 4px 0 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sorteo-rojo);
	min-height: 1em;
}

.sorteo-forma__nota {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--sorteo-tenue);
	text-align: center;
}

/* Éxito ----------------------------------------------------------------- */

.sorteo-exito {
	margin-top: 18px;
	padding: 26px;
	text-align: center;
	border-color: var(--sorteo-verde);
}

.sorteo-exito__titular {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 30px;
	line-height: 1;
	margin: 12px 0 6px;
	color: var(--sorteo-texto);
}

.sorteo-exito__texto {
	color: var(--sorteo-suave);
	font-size: 15px;
	margin: 0 0 18px;
}

.sorteo-exito__nota {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--sorteo-tenue);
}

/* Selector de bloques --------------------------------------------------- */

.sorteo-bloques {
	padding: 8px 0 0;
}

.sorteo-bloques__intro {
	color: var(--sorteo-suave);
	font-size: 14px;
	margin-bottom: 16px;
}

.sorteo-rejilla-bloques {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
}

.sorteo-bloque {
	font: inherit;
	cursor: pointer;
	text-align: left;
	padding: 15px 16px;
	border: 1px solid var(--sorteo-linea);
	border-radius: 10px;
	background: linear-gradient(145deg, var(--sorteo-panel), #050707);
	color: var(--sorteo-texto);
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.sorteo-bloque:hover:not(:disabled) {
	transform: translateY(-3px);
	border-color: var(--sorteo-oro);
	box-shadow: 0 0 24px rgba(255, 190, 0, 0.16);
}

.sorteo-bloque--agotado {
	opacity: 0.45;
	cursor: not-allowed;
}

.sorteo-bloque__rango {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 21px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sorteo-bloque__libres {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sorteo-suave);
}

.sorteo-mini {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: var(--sorteo-panel-3);
	overflow: hidden;
	margin-top: 3px;
}

.sorteo-mini i {
	display: block;
	height: 100%;
	background: var(--sorteo-oro);
}

/* Ruta del navegador ---------------------------------------------------- */

.sorteo-ruta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sorteo-ruta__atras {
	font: inherit;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--sorteo-linea);
	border-radius: 8px;
	padding: 8px 15px;
	background: transparent;
	color: var(--sorteo-oro);
}

.sorteo-ruta__atras:hover {
	background: var(--sorteo-oro-tenue);
}

.sorteo-ruta__flecha {
	font-size: 15px;
	line-height: 1;
}

.sorteo-ruta__migas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 13px;
}

.sorteo-ruta__miga {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* El separador se dibuja con CSS para no ensuciar el texto del lector. */
.sorteo-ruta__miga + .sorteo-ruta__miga::before {
	content: "\203A";
	color: var(--sorteo-tenue);
	margin-right: 2px;
}

.sorteo-ruta__enlace {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	padding: 2px 4px;
	color: var(--sorteo-oro);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sorteo-ruta__enlace:hover {
	color: var(--sorteo-oro-claro);
}

.sorteo-ruta__actual {
	font-weight: 700;
	color: var(--sorteo-texto);
	padding: 2px 4px;
}

.sorteo-nivel:empty {
	display: none;
}

/* Grilla de números ----------------------------------------------------- */

.sorteo-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
	gap: 8px;
}

.sorteo-numero {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 19px;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	position: relative;
	padding: 11px 4px;
	border-radius: 8px;
	border: 1px solid var(--sorteo-linea-suave);
	background: var(--sorteo-panel-2);
	color: var(--sorteo-texto);
	transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.sorteo-numero--libre {
	border-color: var(--sorteo-linea);
	color: var(--sorteo-oro);
}

.sorteo-numero--libre:hover {
	transform: translateY(-2px);
	background: var(--sorteo-oro-tenue);
	border-color: var(--sorteo-oro);
}

.sorteo-numero--elegido {
	background: linear-gradient(135deg, #ffd426, #f6a900);
	border-color: var(--sorteo-oro);
	color: var(--sorteo-sobre-oro);
	box-shadow: 0 0 18px rgba(255, 190, 0, 0.35);
}

.sorteo-numero--reservado {
	color: var(--sorteo-aviso);
	border-color: rgba(255, 209, 102, 0.35);
	cursor: not-allowed;
	opacity: 0.75;
}

.sorteo-numero--vendido {
	color: var(--sorteo-tenue);
	cursor: not-allowed;
	opacity: 0.6;
}

.sorteo-numero__marca {
	display: block;
	font-family: var(--sorteo-cuerpo);
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 2px;
}

/* Leyenda --------------------------------------------------------------- */

.sorteo-leyenda {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 12px;
	color: var(--sorteo-suave);
}

.sorteo-leyenda li {
	display: flex;
	align-items: center;
	gap: 7px;
}

.sorteo-punto {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	display: inline-block;
	flex: 0 0 auto;
}

.sorteo-punto--libre {
	background: var(--sorteo-oro);
}

.sorteo-punto--reservado {
	background: var(--sorteo-aviso);
	opacity: 0.6;
}

.sorteo-punto--vendido {
	background: var(--sorteo-tenue);
}

/* Pasos ----------------------------------------------------------------- */

.sorteo-pasos {
	padding: 34px 0 0;
}

.sorteo-paso {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 20px;
	margin-bottom: 12px;
}

.sorteo-paso__n {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--sorteo-oro);
	color: var(--sorteo-sobre-oro);
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 20px;
	box-shadow: 0 0 18px rgba(255, 190, 0, 0.3);
}

.sorteo-paso h4 {
	font-size: 20px;
	margin: 0 0 4px;
}

.sorteo-paso p {
	margin: 0;
	font-size: 13px;
	color: var(--sorteo-suave);
}

/* Fichas laterales ------------------------------------------------------ */

.sorteo-ficha {
	padding: 20px;
}

.sorteo-ficha__titulo {
	font-size: 21px;
	margin: 0 0 12px;
	color: var(--sorteo-oro);
}

.sorteo-ficha__texto {
	font-size: 14px;
	color: var(--sorteo-suave);
	margin: 0 0 14px;
}

.sorteo-ficha__pie {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--sorteo-tenue);
}

.sorteo-ficha--cuenta {
	border-color: var(--sorteo-oro);
}

.sorteo-cuenta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sorteo-cuenta__par {
	flex: 1 1 60px;
	text-align: center;
	background: var(--sorteo-fondo);
	border: 1px solid var(--sorteo-linea);
	border-radius: 8px;
	padding: 9px 4px;
}

.sorteo-cuenta__par b {
	display: block;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 30px;
	line-height: 1;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
}

.sorteo-cuenta__par small {
	display: block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sorteo-tenue);
	margin-top: 3px;
}

.sorteo-cifras {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.sorteo-cifras li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--sorteo-suave);
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--sorteo-linea-suave);
}

.sorteo-cifras li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sorteo-cifras b {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-size: 20px;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
}

.sorteo-ultimas,
.sorteo-anteriores__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.sorteo-ultimas li,
.sorteo-anterior {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--sorteo-suave);
}

.sorteo-ultimas__numero,
.sorteo-anterior__numero {
	flex: 0 0 auto;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--sorteo-sobre-oro);
	background: var(--sorteo-oro);
	border-radius: 6px;
	padding: 3px 10px;
}

.sorteo-ultimas__quien,
.sorteo-anterior__texto {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sorteo-ficha--contacto {
	border-color: var(--sorteo-verde);
}

/* Resultados ------------------------------------------------------------ */

.sorteo-resultados {
	padding: 10px 0 46px;
}

.sorteo-resultados__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sorteo-resultado-fila {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	flex-wrap: wrap;
}

.sorteo-resultado-fila__numero {
	flex: 0 0 auto;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 34px;
	line-height: 1;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--sorteo-oro);
}

.sorteo-resultado-fila__texto {
	flex: 1 1 200px;
	min-width: 0;
	font-size: 14px;
	color: var(--sorteo-suave);
}

.sorteo-resultado-fila__fecha {
	display: block;
	font-weight: 700;
	color: var(--sorteo-texto);
}

.sorteo-resultado-fila__quien {
	color: var(--sorteo-verde);
	font-weight: 700;
}

.sorteo-resultado-fila__quien--acumulo {
	color: var(--sorteo-aviso);
}

.sorteo-resultado-fila__premios {
	display: block;
	font-size: 13px;
	color: var(--sorteo-tenue);
}

/* Preguntas frecuentes -------------------------------------------------- */

.sorteo-faq {
	padding: 10px 0 46px;
}

.sorteo-faq__lista {
	display: grid;
	gap: 10px;
}

.sorteo-faq__item {
	overflow: hidden;
}

.sorteo-faq__pregunta {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 19px;
	color: var(--sorteo-texto);
}

/* Safari pinta su propio marcador si no se le quita. */
.sorteo-faq__pregunta::-webkit-details-marker {
	display: none;
}

.sorteo-faq__pregunta:hover {
	color: var(--sorteo-oro);
}

/* El span viene vacío desde la plantilla: el signo se dibuja con dos barras
   para que el lector de pantalla no lo lea como texto. */
.sorteo-faq__signo {
	flex: 0 0 auto;
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--sorteo-oro);
	transition: transform 0.25s ease;
}

.sorteo-faq__signo::before,
.sorteo-faq__signo::after {
	content: "";
	position: absolute;
	background: var(--sorteo-sobre-oro);
	border-radius: 2px;
}

.sorteo-faq__signo::before {
	top: 12px;
	left: 7px;
	width: 12px;
	height: 2px;
}

.sorteo-faq__signo::after {
	top: 7px;
	left: 12px;
	width: 2px;
	height: 12px;
}

.sorteo-faq__item[open] .sorteo-faq__signo {
	transform: rotate(45deg);
}

.sorteo-faq__respuesta {
	padding: 0 20px 18px;
	color: var(--sorteo-suave);
	font-size: 14px;
}

.sorteo-faq__respuesta p:last-child {
	margin-bottom: 0;
}

/* Confianza y contacto -------------------------------------------------- */

.sorteo-confianza {
	padding: 10px 0 46px;
}

.sorteo-confianza__texto {
	color: var(--sorteo-suave);
	font-size: 15px;
	max-width: 62ch;
}

.sorteo-contacto {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	margin-top: 16px;
}

.sorteo-avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--sorteo-oro);
	color: var(--sorteo-sobre-oro);
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 22px;
	box-shadow: 0 0 18px rgba(255, 190, 0, 0.28);
}

.sorteo-contacto__texto {
	min-width: 0;
}

.sorteo-contacto__quien {
	display: block;
	font-weight: 700;
	color: var(--sorteo-texto);
	overflow-wrap: anywhere;
}

.sorteo-contacto__tel {
	display: block;
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 22px;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
}

/* Barra flotante de compra (solo móvil) --------------------------------- */

.sorteo-flotante {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: linear-gradient(transparent, rgba(3, 4, 5, 0.92) 28%);
	/* La entrada es un detalle, no la posición. Antes salía de translateY(100%)
	   con relleno «both»: si los fotogramas no corrían (pestaña en segundo
	   plano, ahorro de energía), la barra se quedaba una pantalla más abajo y
	   el botón de comprar era inalcanzable. Ahora el reposo es el sitio bueno
	   y el desplazamiento es mínimo. */
	animation: sorteo-flotante-sube 0.28s ease;
}

@keyframes sorteo-flotante-sube {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sorteo-flotante__caja {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 620px;
	margin: 0 auto;
	padding: 10px 12px 10px 18px;
	border: 1px solid var(--sorteo-linea);
	border-radius: 999px;
	background: var(--sorteo-panel);
	box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 190, 0, 0.14);
}

.sorteo-flotante__texto {
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.sorteo-flotante__texto b {
	font-size: 13px;
	color: var(--sorteo-texto);
}

.sorteo-flotante__texto span {
	font-family: var(--sorteo-cartel);
	font-style: italic;
	font-weight: 900;
	font-size: 21px;
	color: var(--sorteo-oro);
	font-variant-numeric: tabular-nums;
}

.sorteo-wa--flotante {
	width: auto;
	flex: 0 0 auto;
	padding: 13px 22px;
	font-size: 15px;
}

/* En pantalla ancha no hace falta: el propio clic lleva al recuadro. */
@media (min-width: 861px) {
	.sorteo-flotante {
		display: none !important;
	}
}

/* Que la barra no tape el final de la página. */
@media (max-width: 860px) {
	.sorteo-envoltura {
		padding-bottom: 84px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sorteo-flotante {
		animation: none;
	}
}

/* Entrada animada ------------------------------------------------------- */

/* La clase la pone el JS, así que sin JavaScript todo se ve de una. */
.sorteo-anima .sorteo-revelar {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	/* --sorteo-turno lo pone la plantilla con el orden de la tarjeta, para
	   que las de una misma rejilla entren una detrás de otra. */
	transition-delay: calc(var(--sorteo-turno, 0) * 90ms);
}

.sorteo-anima .sorteo-revelar--visto {
	opacity: 1;
	transform: none;
}

/* Foco y movimiento ----------------------------------------------------- */

.sorteo-envoltura :focus-visible {
	outline: 2px solid var(--sorteo-oro);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sorteo-envoltura *,
	.sorteo-envoltura *::before,
	.sorteo-envoltura *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sorteo-anima .sorteo-revelar {
		opacity: 1;
		transform: none;
	}
}

/* Pantallas anchas ------------------------------------------------------ */

@media (min-width: 760px) {
	.sorteo-hero {
		padding-top: 70px;
	}

	.sorteo-grilla {
		grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	}
}

/* Dos columnas: el sorteo a la izquierda, la información al lado. */
@media (min-width: 1000px) {
	.sorteo-columnas {
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: 30px;
	}

	.sorteo-lateral {
		padding-right: 22px;
		padding-left: 0;
	}
}

@media (max-width: 620px) {
	.sorteo-wrap {
		padding: 0 16px;
	}

	.sorteo-lateral {
		padding: 0 16px;
	}

	.sorteo-datos {
		grid-template-columns: 1fr;
	}

	.sorteo-datos__celda {
		border-right: 0;
		border-bottom: 1px solid var(--sorteo-linea-suave);
	}

	.sorteo-datos__celda:last-child {
		border-bottom: 0;
	}

	.sorteo-boleta,
	.sorteo-forma,
	.sorteo-exito {
		padding: 22px 18px;
	}

	.sorteo-buscador .sorteo-campo {
		font-size: 26px;
	}

	.sorteo-buscador button {
		flex: 1 1 100%;
		padding: 13px 20px;
	}

	.sorteo-grilla {
		grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
		gap: 6px;
	}

	.sorteo-numero {
		font-size: 17px;
		padding: 9px 3px;
	}
}

/* Página de acceso -------------------------------------------------------
   Una sola tarjeta centrada. No lleva cabecera ni nada del sorteo: quien
   llega aquí ya sabe a qué viene, y cuanto menos se cuente, mejor. */

.sorteo-acceso-envoltura {
	max-width: 520px;
	border-color: var(--sorteo-linea);
	box-shadow: var(--sorteo-brillo);
}

.sorteo-acceso {
	display: flex;
	justify-content: center;
	padding: 38px 22px 44px;
	background:
		radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255, 196, 0, 0.11), transparent 70%),
		linear-gradient(180deg, var(--sorteo-fondo-2), var(--sorteo-fondo));
}

.sorteo-acceso__caja {
	width: 100%;
	max-width: 380px;
	text-align: center;
	animation: sorteo-acceso-entra 0.5s ease both;
}

.sorteo-acceso__marca {
	margin: 0 0 4px;
	font-family: var(--sorteo-cartel);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 15px;
	color: var(--sorteo-oro-claro);
}

.sorteo-acceso__titulo {
	margin: 0 0 8px;
	font-family: var(--sorteo-cartel);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(28px, 7vw, 38px);
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--sorteo-texto);
}

.sorteo-acceso__titulo::after {
	content: "";
	display: block;
	width: 62px;
	height: 2px;
	margin: 12px auto 0;
	background: linear-gradient(90deg, transparent, var(--sorteo-oro), transparent);
}

.sorteo-acceso__texto {
	margin: 14px 0 22px;
	font-size: 14px;
	color: var(--sorteo-suave);
}

.sorteo-acceso__aviso {
	margin: 0 0 18px;
	padding: 11px 14px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	color: var(--sorteo-aviso);
	background: var(--sorteo-aviso-fondo);
	border: 1px solid var(--sorteo-aviso);
	border-radius: 8px;
}

/* Los campos van alineados a la izquierda aunque la tarjeta esté centrada:
   una etiqueta centrada sobre su casilla se lee fatal. */
.sorteo-acceso__forma {
	text-align: left;
}

.sorteo-acceso__casilla {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-size: 13px;
	color: var(--sorteo-suave);
	cursor: pointer;
}

.sorteo-acceso__casilla input {
	width: 16px;
	height: 16px;
	accent-color: var(--sorteo-oro);
	cursor: pointer;
}

.sorteo-acceso__pie {
	margin: 20px 0 0;
	font-size: 13px;
}

.sorteo-acceso__pie a {
	/* Gris claro, no el tenue: a 13px sobre negro el tenue se queda en 3,1
	   de contraste y no llega al mínimo legible. */
	color: var(--sorteo-suave);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sorteo-acceso__pie a:hover,
.sorteo-acceso__pie a:focus-visible {
	color: var(--sorteo-oro-claro);
	border-bottom-color: var(--sorteo-linea);
}

@keyframes sorteo-acceso-entra {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sorteo-acceso__caja {
		animation: none;
	}
}