/*
Theme Name: Lotería CR
Theme URI: https://loteriacr.com
Author: Don Daniel Varela
Author URI: https://dvarela.com
Description: Tema propio del portal de resultados de loterías de Costa Rica. Sin maquetador, sin dependencias externas.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loteriacr
Tags: custom, one-column, blog
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	--tinta: #0b1727;
	--tinta-2: #142236;
	--tinta-3: #1d2f47;
	--oro: #f2b01e;
	--oro-2: #ffc94a;
	--oro-texto: #4a3405;
	--rojo: #d13b2f;
	--verde: #0f7b4f;
	--fondo: #f5f6f8;
	--papel: #ffffff;
	--texto: #17202c;
	--texto-suave: #5a6779;
	--texto-tenue: #8492a4;
	--linea: #e3e7ed;
	--linea-fuerte: #cfd6e0;
	--radio: 14px;
	--radio-sm: 10px;
	--sombra-sm: 0 1px 2px rgba(11, 23, 39, .06), 0 2px 8px rgba(11, 23, 39, .04);
	--sombra: 0 2px 4px rgba(11, 23, 39, .05), 0 12px 28px rgba(11, 23, 39, .07);
	--envoltura: 1160px;
	--transicion: 180ms cubic-bezier(.4, 0, .2, 1);
	--fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fuente-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--fuente);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--tinta);
	text-decoration-color: rgba(11, 23, 39, .25);
	text-underline-offset: 3px;
	transition: color var(--transicion), text-decoration-color var(--transicion);
}

a:hover {
	color: #0a4fa5;
	text-decoration-color: currentColor;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 .5em;
	font-weight: 750;
	letter-spacing: -.022em;
	line-height: 1.18;
	color: var(--tinta);
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

ul,
ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

table {
	border-collapse: collapse;
	width: 100%;
}

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

.envoltura {
	width: 100%;
	max-width: var(--envoltura);
	margin: 0 auto;
	padding: 0 20px;
}

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

.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--tinta);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--radio-sm) 0;
}

.saltar:focus {
	left: 0;
	color: #fff;
}

.punto {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c, var(--oro));
	flex: 0 0 auto;
}

/* ==========================================================================
   3. Botones
   ========================================================================== */
.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -.01em;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}

.boton:active {
	transform: translateY(1px);
}

.boton--oro {
	background: var(--oro);
	color: var(--oro-texto);
	box-shadow: 0 6px 18px rgba(242, 176, 30, .28);
}

.boton--oro:hover {
	background: var(--oro-2);
	color: var(--oro-texto);
	box-shadow: 0 8px 22px rgba(242, 176, 30, .36);
}

.boton--fantasma {
	background: var(--papel);
	color: var(--tinta);
	border-color: var(--linea-fuerte);
}

.boton--fantasma:hover {
	border-color: var(--tinta);
	color: var(--tinta);
}

.boton--fantasma-claro {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
}

.boton--fantasma-claro:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.boton[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

/* ==========================================================================
   4. Cabecera
   ========================================================================== */
.cabecera {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--linea);
}

.cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 72px;
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--tinta);
	flex: 0 0 auto;
}

.marca__icono {
	display: inline-flex;
}

.marca__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.marca__nombre {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--tinta);
}

.marca__punto {
	color: var(--oro);
}

.marca__bajada {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin-top: 3px;
}

.marca__img {
	max-height: 46px;
	width: auto;
}

.menu__lista {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__lista > li {
	position: relative;
}

.menu__lista a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 11px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--texto);
	text-decoration: none;
	white-space: nowrap;
}

.menu__lista a:hover,
.menu__lista .current-menu-item > a,
.menu__lista .current_page_item > a {
	background: #eef1f5;
	color: var(--tinta);
}

.menu__lista .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	box-shadow: var(--sombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.menu__lista > li:hover > .sub-menu,
.menu__lista > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu__lista .sub-menu a {
	display: block;
	border-radius: 8px;
	padding: 0 12px;
}

.menu-boton {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--papel);
	border: 1px solid var(--linea-fuerte);
	border-radius: 12px;
	cursor: pointer;
}

.menu-boton__lineas {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 20px;
}

.menu-boton__lineas span {
	display: block;
	height: 2px;
	background: var(--tinta);
	border-radius: 2px;
	transition: transform var(--transicion), opacity var(--transicion);
}

.menu-boton[aria-expanded="true"] .menu-boton__lineas span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-boton[aria-expanded="true"] .menu-boton__lineas span:nth-child(2) {
	opacity: 0;
}

.menu-boton[aria-expanded="true"] .menu-boton__lineas span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Cinta de últimos resultados */
.cinta {
	background: var(--tinta);
	color: #fff;
}

.cinta__interior {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 50px;
	overflow-x: auto;
	scrollbar-width: none;
}

.cinta__interior::-webkit-scrollbar {
	display: none;
}

.cinta__etiqueta {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oro);
}

.cinta__lista {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cinta__lista a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 13px 0;
	color: rgba(255, 255, 255, .86);
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}

.cinta__lista a:hover {
	color: #fff;
}

.cinta__juego {
	color: rgba(255, 255, 255, .6);
}

.cinta__num {
	font-family: var(--fuente-num);
	font-size: 15px;
	letter-spacing: .01em;
	color: var(--oro);
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero {
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(242, 176, 30, .16), transparent 55%),
		linear-gradient(160deg, #0b1727 0%, #10233a 45%, #0b1727 100%);
	color: #fff;
	padding: 56px 0 60px;
}

.hero__interior {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.hero__etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .82);
}

.hero__titulo {
	margin: 0 0 18px;
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 820;
	letter-spacing: -.038em;
	line-height: 1.04;
	color: #fff;
}

.hero__bajada {
	max-width: 56ch;
	margin: 0 0 26px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .76);
}

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

.hero__hoy {
	padding: 22px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radio);
}

.hero__hoy-etiqueta {
	margin: 0;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--oro);
}

.hero__hoy-fecha {
	margin: 4px 0 16px;
	font-size: 17px;
	font-weight: 650;
	color: #fff;
}

.hero__hoy-lista {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.hero__hoy-lista li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font-size: 15px;
	color: rgba(255, 255, 255, .9);
}

.hero__hoy-lista li:last-child {
	border-bottom: 0;
}

.hero__hoy-lista li.es-pasado {
	opacity: .55;
}

.hero__hoy-juegos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 4px 12px;
	min-width: 0;
	width: 100%;
}

.hero__hoy-juego {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

.hero__hora {
	flex: 0 0 auto;
	min-width: 54px;
	font-family: var(--fuente-num);
	font-size: 15px;
	font-weight: 700;
	color: var(--oro);
}

.hero__nota {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .5);
}

/* ==========================================================================
   6. Secciones
   ========================================================================== */
.seccion {
	padding: 44px 0;
}

.seccion--resultados {
	padding-top: 40px;
}

.seccion__cab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.seccion__titulo {
	margin: 0 0 18px;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 780;
	letter-spacing: -.028em;
}

.seccion__cab .seccion__titulo {
	margin-bottom: 0;
}

.seccion__enlace {
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
	color: #0a4fa5;
	white-space: nowrap;
}

.seccion__enlace::after {
	content: " →";
}

/* ==========================================================================
   7. Tarjetas de resultado
   ========================================================================== */
.rejilla-resultados {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
}

.rejilla-resultados--dia {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-bottom: 8px;
}

.tarjeta-resultado {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 18px 16px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: var(--sombra-sm);
	overflow: hidden;
}

.tarjeta-resultado::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, var(--jc, var(--oro)), var(--jc2, var(--oro-2)));
}

.tarjeta-resultado__cab {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 3px;
	margin-top: 2px;
}

.tarjeta-resultado__juego {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .035em;
	text-transform: uppercase;
	color: var(--jc, var(--tinta));
}

.tarjeta-resultado__fecha {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--texto-suave);
}

.tarjeta-resultado__hora {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	padding: 1px 6px;
	border-radius: 999px;
	background: #eef2f7;
	color: var(--tinta);
	font-family: var(--fuente-num);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tarjeta-resultado__vacio {
	margin: 0;
	font-size: 14px;
	color: var(--texto-suave);
}

.tarjeta-resultado__enlace {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--linea);
	font-size: 13px;
	font-weight: 650;
	color: var(--texto-suave);
	text-decoration: none;
}

.tarjeta-resultado__enlace:hover {
	color: var(--tinta);
}

.tarjeta-resultado--dia {
	box-shadow: none;
}

.bola-grande {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.bola-grande__num {
	font-family: var(--fuente-num);
	font-size: clamp(46px, 6vw, 62px);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.04em;
	color: var(--tinta);
	font-variant-numeric: tabular-nums;
}

.bola-grande__megan {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--texto-suave);
}

.bola-grande__megan strong {
	font-family: var(--fuente-num);
	font-size: 15px;
	color: var(--tinta);
}

.tres-bolas {
	display: flex;
	gap: 8px;
}

.tres-bolas__bola {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--jc, var(--tinta));
	color: #fff;
	font-family: var(--fuente-num);
	font-size: 22px;
	font-weight: 700;
}

.lotto-bolas {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	justify-items: start;
	gap: 6px;
}

.lotto-bolas__bola {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 38px;
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	background: var(--jc, var(--tinta));
	color: #fff;
	font-family: var(--fuente-num);
	font-size: 14px;
	font-weight: 700;
}

.lotto-bolas__bola--rev {
	background: transparent;
	color: var(--jc, var(--tinta));
	border: 1.5px solid var(--jc, var(--tinta));
}

.lotto-revancha {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.lotto-revancha__eti {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	margin-right: 2px;
}

.acumulado {
	margin: 0;
	font-size: 13px;
	color: var(--texto-suave);
}

.acumulado strong {
	font-family: var(--fuente-num);
	color: var(--tinta);
}

.pastillas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pastilla {
	padding: 3px 10px;
	border-radius: 999px;
	background: #f0f3f7;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--texto-suave);
}

.pastilla--blanca {
	background: #f4f4f2;
	color: #6b6b60;
	box-shadow: inset 0 0 0 1px #dcdcd6;
}

.pastilla--roja {
	background: #fdecea;
	color: #a8281d;
}

.pastilla--azul {
	background: #e8f0fd;
	color: #17457f;
}

.pastilla--verde {
	background: #e6f5ec;
	color: #12603c;
}

.pastilla--monto {
	background: #fff6dd;
	color: #6a4b04;
	font-family: var(--fuente-num);
	font-size: 12px;
}

/* Segundo y tercer premio (Lotería Nacional y Chances) */
.premios-lugares {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
	padding: 10px 0 0;
	list-style: none;
	border-top: 1px solid var(--linea);
}

.premio-lugar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 8px;
	row-gap: 2px;
	align-items: baseline;
}

.premio-lugar__pos {
	grid-column: 1;
	grid-row: 1;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--texto-suave);
	white-space: nowrap;
}

.premio-lugar__monto {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	padding: 1px 8px;
	border-radius: 999px;
	background: #fff6dd;
	color: #6a4b04;
	font-size: 11px;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.premio-lugar__dato {
	grid-column: 1 / -1;
	grid-row: 2;
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
}

.premio-lugar__num {
	font-family: var(--fuente-num);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--tinta);
}

.premio-lugar__serie {
	font-size: 11px;
	font-weight: 600;
	color: var(--texto-suave);
	white-space: nowrap;
}

/* ==========================================================================
   8. Destacado de la página de juego
   ========================================================================== */
.destacado {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
	margin-bottom: 8px;
}

.destacado .tarjeta-resultado {
	justify-content: center;
}

.destacado__lado {
	padding: 22px;
	background: var(--tinta);
	border-radius: var(--radio);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.destacado__proximo-etiqueta {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--oro);
}

.destacado__proximo {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .92);
}

.destacado__proximo strong {
	font-family: var(--fuente-num);
	font-size: 30px;
	color: #fff;
}

.destacado__nota {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   9. Tablas
   ========================================================================== */
.tabla-envoltura {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow-x: auto;
	box-shadow: var(--sombra-sm);
}

.tabla {
	width: 100%;
	font-size: 15px;
	border-collapse: collapse;
}

.tabla thead th {
	position: sticky;
	top: 0;
	background: #f8f9fb;
	text-align: left;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	padding: 12px 16px;
	border-bottom: 1px solid var(--linea);
	white-space: nowrap;
}

.tabla td {
	padding: 13px 16px;
	border-bottom: 1px solid #eef1f5;
	color: var(--texto);
	vertical-align: middle;
}

.tabla tbody tr:last-child td {
	border-bottom: 0;
}

.tabla tbody tr:hover {
	background: #fafbfc;
}

.tabla__sorteo {
	font-family: var(--fuente-num);
	font-size: 13px;
	color: var(--texto-tenue);
}

.tabla__resultado {
	font-family: var(--fuente-num);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	color: var(--tinta);
	white-space: nowrap;
}

.tabla__accion {
	text-align: right;
	white-space: nowrap;
}

.tabla__accion a {
	font-size: 13px;
	font-weight: 650;
	color: #0a4fa5;
	text-decoration: none;
}

.tabla--compacta {
	font-size: 14px;
}

.tabla--compacta td,
.tabla--compacta thead th {
	padding: 9px 14px;
}

.meta-datos {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--texto-tenue);
}

.paginacion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
}

.paginacion__estado {
	font-size: 13px;
	color: var(--texto-suave);
}

/* ==========================================================================
   10. Enlaces de sección
   ========================================================================== */
.enlaces-seccion {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/* ==========================================================================
   11. Próximos sorteos
   ========================================================================== */
.proximos {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	padding: 22px;
	box-shadow: var(--sombra-sm);
}

.proximos .seccion__titulo {
	font-size: 18px;
	margin-bottom: 14px;
}

.proximos__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: 14px;
}

.proximos__grupo {
	padding: 12px 16px 8px;
	background: #f8fafc;
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
}

.proximos__dia {
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--linea);
	font-size: 13px;
	font-weight: 750;
	color: var(--tinta);
}

@media (max-width: 760px) {
	.proximos__rejilla {
		grid-template-columns: 1fr;
	}
}

.proximos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.proximos__item {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	align-items: baseline;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px dotted var(--linea);
	font-size: 13.5px;
}

.proximos__item:last-child {
	border-bottom: 0;
}

.proximos__juego {
	font-weight: 600;
	min-width: 0;
}

.proximos__hora {
	flex: 0 0 auto;
	font-family: var(--fuente-num);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tinta);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	.hero__hoy-lista li {
		align-items: flex-start;
		gap: 10px;
	}

	.hero__hoy-juegos {
		gap: 3px 10px;
		font-size: 14px;
	}

	.hero__hora {
		min-width: 50px;
		font-size: 14px;
		padding-top: 1px;
	}
}

/* Días y horarios de los sorteos (portada) */
.seccion__bajada {
	max-width: 68ch;
	margin: -6px 0 18px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--texto-suave);
}

.seccion--horarios {
	padding-top: 6px;
}

.rejilla-horarios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(198px, 1fr));
	gap: 14px;
}

.horario-juego {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 16px 12px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: var(--sombra-sm);
	color: inherit;
	text-decoration: none;
	transition: box-shadow var(--transicion), transform var(--transicion), border-color var(--transicion);
}

.horario-juego::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	border-radius: var(--radio) var(--radio) 0 0;
	background: linear-gradient(90deg, var(--jc, var(--oro)), var(--jc2, var(--oro-2)));
}

.horario-juego:hover {
	border-color: var(--linea-fuerte);
	box-shadow: var(--sombra);
	transform: translateY(-1px);
}

.horario-juego__cab {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.horario-juego__nombre {
	font-size: 14.5px;
	font-weight: 780;
	letter-spacing: -.01em;
	color: var(--jc, var(--tinta));
}

.horario-juego__dias {
	font-size: 12px;
	font-weight: 600;
	color: var(--texto-suave);
}

.horario-juego__nota {
	margin-bottom: 6px;
	font-size: 11.5px;
	color: var(--texto-tenue);
}

.horario-juego__horas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 6px;
	margin-top: auto;
}

.horario-juego__hora {
	display: block;
	padding: 7px 4px;
	border-radius: 9px;
	background: var(--jc, var(--tinta));
	color: #fff;
	font-family: var(--fuente-num);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .01em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.horario-juego__pie {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
	padding-top: 9px;
	border-top: 1px solid var(--linea);
	font-size: 12px;
	color: var(--texto-tenue);
}

.horario-juego__cta {
	font-weight: 650;
	color: var(--jc, var(--tinta));
	white-space: nowrap;
}

.horario-juego__cta span {
	font-weight: 800;
}

/* ==========================================================================
   12. Herramientas y juegos
   ========================================================================== */
.seccion--herramientas {
	background: var(--papel);
	border-top: 1px solid var(--linea);
	border-bottom: 1px solid var(--linea);
}

.rejilla-herramientas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}

.herramienta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var(--fondo);
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	text-decoration: none;
	transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.herramienta:hover {
	transform: translateY(-2px);
	border-color: var(--linea-fuerte);
	box-shadow: var(--sombra);
}

.herramienta__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 4px;
	border-radius: 10px;
	background: var(--tinta);
	color: var(--oro);
	font-size: 18px;
}

.herramienta__titulo {
	font-size: 16px;
	font-weight: 700;
	color: var(--tinta);
}

.herramienta__texto {
	font-size: 14px;
	line-height: 1.5;
	color: var(--texto-suave);
}

.rejilla-juegos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
}

.rejilla-juegos--compacta {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-top: 26px;
}

.tarjeta-juego {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-left: 4px solid var(--jc, var(--oro));
	border-radius: var(--radio-sm);
	text-decoration: none;
	transition: box-shadow var(--transicion), transform var(--transicion);
}

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

.tarjeta-juego__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 6px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--jc) 14%, white);
	color: var(--jc);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.tarjeta-juego__nombre {
	font-size: 15px;
	font-weight: 700;
	color: var(--tinta);
}

.tarjeta-juego__horario {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--texto-suave);
}

/* ==========================================================================
   13. Notas
   ========================================================================== */
.rejilla-notas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 16px;
}

.nota {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra-sm);
}

.nota__enlace {
	position: relative;
	display: block;
	padding: 18px;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.nota__img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radio-sm);
	margin-bottom: 14px;
}

.nota__fecha {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.nota__titulo {
	margin: 6px 0 8px;
	font-size: 17px;
	line-height: 1.32;
	color: var(--tinta);
}

.nota__texto {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--texto-suave);
}

.nota__enlace:hover .nota__titulo {
	color: #0a4fa5;
}

/* ==========================================================================
   14. Newsletter
   ========================================================================== */
.seccion--newsletter {
	padding-bottom: 64px;
}

.newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 36px;
	align-items: center;
	padding: 36px;
	background:
		radial-gradient(80% 140% at 100% 0%, rgba(242, 176, 30, .18), transparent 60%),
		var(--tinta);
	border-radius: 20px;
	color: #fff;
}

.newsletter__titulo {
	margin: 0 0 10px;
	font-size: clamp(24px, 3vw, 32px);
	color: #fff;
}

.newsletter__bajada {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .72);
	font-size: 16px;
}

.newsletter__lista {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	color: rgba(255, 255, 255, .62);
}

.newsletter__form {
	display: grid;
	gap: 10px;
}

.newsletter__form input[type="email"] {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
}

.newsletter__form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .45);
}

.newsletter__form input[type="email"]:focus {
	outline: 2px solid var(--oro);
	outline-offset: 1px;
}

.consentimiento {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .66);
}

.consentimiento input {
	margin-top: 3px;
}

.consentimiento a {
	color: var(--oro);
}

.newsletter__estado {
	margin: 2px 0 0;
	font-size: 13px;
	min-height: 18px;
	color: var(--oro);
}

.trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ==========================================================================
   15. Generador
   ========================================================================== */
.generador {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	padding: 22px;
	box-shadow: var(--sombra-sm);
}

.generador__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.generador__tab {
	padding: 10px 16px;
	border: 1px solid var(--linea-fuerte);
	border-radius: 999px;
	background: var(--papel);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--texto-suave);
	cursor: pointer;
	transition: all var(--transicion);
}

.generador__tab:hover {
	border-color: var(--tinta);
	color: var(--tinta);
}

.generador__tab[aria-selected="true"] {
	background: var(--tinta);
	border-color: var(--tinta);
	color: #fff;
}

.generador__salida {
	display: block;
	padding: 24px;
	background: var(--fondo);
	border: 1px dashed var(--linea-fuerte);
	border-radius: var(--radio-sm);
	text-align: center;
	margin-bottom: 16px;
}

.generador__vacio {
	margin: 0;
	color: var(--texto-tenue);
	font-size: 14px;
}

.generador__numeros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.generador__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	height: 62px;
	padding: 0 10px;
	border-radius: 14px;
	background: var(--tinta);
	color: var(--oro);
	font-family: var(--fuente-num);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.02em;
	animation: aparecer 240ms ease-out;
}

@keyframes aparecer {
	from {
		opacity: 0;
		transform: translateY(6px) scale(.96);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

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

.generador__nota {
	margin: 16px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texto-tenue);
}

/* ==========================================================================
   16. Estadísticas y predicciones
   ========================================================================== */
.stats__resumen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-bottom: 26px;
}

.dato {
	padding: 16px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
}

.dato__num {
	display: block;
	font-family: var(--fuente-num);
	font-size: 24px;
	font-weight: 700;
	color: var(--tinta);
}

.dato__eti {
	display: block;
	font-size: 12px;
	color: var(--texto-tenue);
	margin-top: 2px;
}

.stats__dos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
	margin-bottom: 24px;
}

.lista-frecuencia {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.lista-frecuencia li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}

.lista-frecuencia--simple li {
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px dotted var(--linea);
}

.lista-frecuencia__num {
	font-family: var(--fuente-num);
	font-size: 17px;
	font-weight: 700;
	color: var(--tinta);
	min-width: 46px;
}

.lista-frecuencia__barra {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: #edf0f4;
	overflow: hidden;
}

.lista-frecuencia__barra span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--oro), #f7c95c);
}

.lista-frecuencia__veces {
	font-family: var(--fuente-num);
	font-size: 13px;
	color: var(--texto-suave);
	min-width: 56px;
	text-align: right;
}

.stats__tabla {
	margin-top: 8px;
}

.stats__tabla summary,
.premios summary {
	cursor: pointer;
	font-size: 14px;
	font-weight: 650;
	color: #0a4fa5;
	margin-bottom: 12px;
}

.aviso-estadistico,
.predicciones__aviso {
	margin-top: 20px;
	padding: 16px;
	background: #fffaf0;
	border: 1px solid #f2e2bd;
	border-left: 4px solid var(--oro);
	border-radius: var(--radio-sm);
	font-size: 14px;
	line-height: 1.55;
	color: #5b4a1d;
}

.predicciones__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/* Premios desplegables */
.premios {
	margin-top: 4px;
}

.premios__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
	font-size: 13px;
}

.premios__lista li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	border-bottom: 1px dotted var(--linea);
}

.premios__orden {
	color: var(--texto-tenue);
	min-width: 30px;
	font-family: var(--fuente-num);
	font-size: 12px;
}

.premios__num {
	font-family: var(--fuente-num);
	font-weight: 700;
}

.premios__serie {
	color: var(--texto-suave);
}

.premios__monto {
	margin-left: auto;
	font-family: var(--fuente-num);
	font-size: 12px;
	color: var(--texto-suave);
}

/* ==========================================================================
   17. Páginas y entradas
   ========================================================================== */
.pagina__cab {
	background: var(--papel);
	border-bottom: 1px solid var(--linea);
	padding: 34px 0 30px;
	margin-bottom: 32px;
}

.migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 12.5px;
	color: var(--texto-tenue);
}

.migas a {
	color: var(--texto-suave);
	text-decoration: none;
}

.migas a:hover {
	color: var(--tinta);
	text-decoration: underline;
}

.pagina__titulo {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	letter-spacing: -.035em;
}

.pagina__bajada {
	max-width: 68ch;
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--texto-suave);
}

.pagina__cuerpo {
	padding-bottom: 56px;
}

.pagina__principal,
.entrada__contenido {
	max-width: 74ch;
	font-size: 17px;
	line-height: 1.72;
}

.entrada__contenido h2,
.pagina__principal h2 {
	margin-top: 1.9em;
	font-size: 26px;
}

.entrada__contenido h3,
.pagina__principal h3 {
	margin-top: 1.5em;
	font-size: 20px;
}

.entrada__contenido table,
.pagina__principal table {
	margin: 1.4em 0;
	font-size: 15px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-sm);
	overflow: hidden;
}

.entrada__contenido th,
.pagina__principal th {
	background: #f8f9fb;
	text-align: left;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	padding: 10px 14px;
}

.entrada__contenido td,
.pagina__principal td {
	padding: 10px 14px;
	border-top: 1px solid var(--linea);
}

.entrada__contenido ul,
.pagina__principal ul {
	padding-left: 1.15em;
}

.entrada__contenido li,
.pagina__principal li {
	margin-bottom: .45em;
}

.entrada {
	max-width: 820px;
	margin: 0 auto;
	padding: 34px 0 56px;
}

.entrada__titulo {
	margin: 0 0 10px;
	font-size: clamp(28px, 4vw, 40px);
	letter-spacing: -.035em;
}

.entrada__meta {
	display: flex;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--texto-tenue);
}

.entrada__figura {
	margin: 26px 0;
}

.entrada__img {
	width: 100%;
	border-radius: var(--radio);
}

.entrada__pie {
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--linea);
}

.entrada__nota {
	font-size: 13px;
	color: var(--texto-tenue);
}

.listado__cab {
	padding: 34px 0 24px;
}

.aviso-fecha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	margin-bottom: 20px;
	background: #fffaf0;
	border: 1px solid #f2e2bd;
	border-radius: var(--radio-sm);
	font-size: 14px;
}

.aviso-fecha p {
	margin: 0;
}

.aviso-fecha a {
	font-weight: 650;
	font-size: 13px;
	color: #0a4fa5;
	text-decoration: none;
}

.vacio {
	padding: 18px;
	background: var(--papel);
	border: 1px dashed var(--linea-fuerte);
	border-radius: var(--radio-sm);
	color: var(--texto-suave);
	font-size: 14px;
}

.no-encontrado {
	padding: 64px 0 80px;
	max-width: 640px;
}

.no-encontrado__codigo {
	margin: 0;
	font-family: var(--fuente-num);
	font-size: 64px;
	font-weight: 700;
	color: var(--oro);
	line-height: 1;
}

/* Paginación de WordPress */
.navigation.pagination {
	margin-top: 28px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--linea);
	background: var(--papel);
	font-size: 14px;
	text-decoration: none;
	color: var(--texto);
}

.nav-links .current {
	background: var(--tinta);
	border-color: var(--tinta);
	color: #fff;
}

/* ==========================================================================
   18. Pie
   ========================================================================== */
.pie {
	background: var(--tinta);
	color: rgba(255, 255, 255, .7);
	padding: 48px 0 24px;
	font-size: 14px;
}

.pie__interior {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.marca__nombre--pie {
	display: inline-block;
	margin-bottom: 12px;
	color: #fff;
	font-size: 20px;
}

.pie__texto {
	margin: 0 0 12px;
	max-width: 42ch;
	line-height: 1.6;
}

.pie__aviso {
	margin: 0;
	max-width: 46ch;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .42);
}

.pie__titulo {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oro);
}

.pie__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.pie__col a {
	color: rgba(255, 255, 255, .7);
	text-decoration: none;
	font-size: 14px;
}

.pie__col a:hover {
	color: #fff;
}

.pie__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	padding-top: 18px;
	font-size: 12px;
	color: rgba(255, 255, 255, .42);
}

.pie__legal p {
	margin: 0;
}

.pie__legal a {
	color: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */
@media (max-width: 1000px) {
	.hero__interior {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hero {
		padding: 44px 0 46px;
	}

	.newsletter {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 28px;
	}

	.pie__interior {
		grid-template-columns: 1fr 1fr;
	}

	.destacado {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.menu-boton {
		display: inline-flex;
	}

	.menu {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		right: 0;
		padding: 12px 20px 20px;
		background: var(--papel);
		border-bottom: 1px solid var(--linea);
		box-shadow: 0 24px 40px rgba(11, 23, 39, .12);
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}

	.menu.is-open {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		transform: none;
	}

	.menu__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.menu__lista a {
		min-height: 48px;
		padding: 0 12px;
		border-radius: 10px;
	}

	.menu__lista .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 12px;
		min-width: 0;
	}

	.cabecera__interior {
		flex-wrap: wrap;
	}
}

@media (max-width: 680px) {
	body {
		font-size: 16px;
	}

	.seccion {
		padding: 32px 0;
	}

	.hero__bajada {
		font-size: 16.5px;
	}

	.rejilla-resultados {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 12px;
	}

	.tarjeta-resultado {
		padding: 15px 15px 13px;
	}

	.bola-grande__num {
		font-size: 44px;
	}

	.tabla thead th,
	.tabla td {
		padding: 10px 12px;
	}

	.tabla {
		font-size: 14px;
	}

	.pie__interior {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.paginacion {
		flex-wrap: wrap;
		justify-content: center;
	}

	.pagina__cab {
		padding: 26px 0 22px;
	}

	.newsletter {
		padding: 22px;
		border-radius: 16px;
	}
}

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

/* Impresión mínima */
@media print {
	.cabecera,
	.cinta,
	.pie,
	.newsletter,
	.generador,
	.enlaces-seccion {
		display: none !important;
	}
}

/* ==========================================================================
   20. Artículo con lateral (páginas de juego y guías)
   ========================================================================== */
.layout-articulo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
	padding-bottom: 64px;
}

.layout-articulo .pagina__principal {
	max-width: none;
}

.layout-articulo .prosa {
	max-width: 72ch;
	font-size: 17px;
	line-height: 1.75;
}

.lateral {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 96px;
}

.lateral__bloque {
	padding: 18px;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: var(--papel);
}

.lateral__etiqueta {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-tenue);
}

.lateral__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lateral__lista a {
	display: block;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--texto);
	text-decoration: none;
	border-bottom: 1px solid #f0f2f5;
}

.lateral__lista li:last-child a {
	border-bottom: 0;
}

.lateral__lista a:hover {
	color: var(--oro-oscuro);
}

.lateral__bloque--cta {
	background: var(--tinta);
	border-color: var(--tinta);
	color: #e8edf5;
}

.lateral__bloque--cta .lateral__etiqueta {
	color: var(--oro);
}

.lateral__texto {
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #b9c6d8;
}

.lateral .tarjeta-resultado {
	box-shadow: none;
}

@media (max-width: 1080px) {
	.layout-articulo {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.lateral {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.lateral__bloque {
		flex: 1 1 260px;
	}
}

.lateral__sorteos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lateral__sorteos li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f2f5;
	font-size: 14.5px;
}

.lateral__sorteos li:last-child {
	border-bottom: 0;
}

.lateral__sorteo-fecha {
	color: var(--texto-suave);
}

.seccion__nota {
	margin: -6px 0 16px;
	font-size: 14px;
	color: var(--texto-tenue);
}

/* Tablas dentro del artículo: ocupan todo el ancho de la columna, el texto no. */
.layout-articulo .prosa {
	max-width: none;
}

.prosa > p,
.prosa > ul,
.prosa > ol,
.prosa > h2,
.prosa > h3,
.prosa > blockquote {
	max-width: 72ch;
}

.prosa .tabla-envoltura {
	margin: 24px 0 28px;
}

.tabla thead th:last-child,
.tabla td:last-child {
	width: 74px;
	text-align: right;
	padding-right: 14px;
}

.tabla td:nth-child(4) {
	font-variant-numeric: tabular-nums;
}

.tabla tbody tr:hover {
	background: #fbfcfe;
}

/* La cinta de resultados no debe empujar el ancho de la página en móvil. */
.cinta {
	overflow: hidden;
}

.cinta__lista {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.cinta__lista::-webkit-scrollbar {
	display: none;
}

/* Tablas de las guías (Markdown) */
.tabla-scroll {
	max-width: 100%;
	overflow-x: auto;
	margin: 24px 0;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	background: var(--papel);
}

.tabla-scroll .tabla {
	min-width: 520px;
}

.prosa table {
	max-width: 100%;
}

/* Tablas en pantallas pequeñas */
@media (max-width: 600px) {
	.tabla {
		font-size: 13.5px;
	}

	.tabla th,
	.tabla td {
		padding: 9px 9px;
	}

	.tabla thead th:last-child,
	.tabla td:last-child {
		width: 42px;
		padding-right: 8px;
	}

	.tabla-scroll .tabla {
		min-width: 0;
	}

	.tabla-scroll {
		border: 0;
		background: transparent;
	}

	.tabla-scroll .tabla {
		border: 1px solid var(--linea);
		border-radius: var(--radio);
		background: var(--papel);
	}
}

/* ==========================================================================
   21. Móvil: cada sorteo a ancho completo y tablas convertidas en tarjetas
   ========================================================================== */
@media (max-width: 620px) {
	.rejilla-resultados,
	.rejilla-resultados--dia {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.tarjeta-resultado {
		padding: 16px 18px 14px;
	}

	.tarjeta-resultado__enlace {
		font-size: 14px;
	}

	.cinta__lista > li:nth-child(n+4) {
		display: none;
	}
}

@media (max-width: 700px) {
	.tabla-envoltura:has(.tabla--sorteos) {
		border: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
		border-radius: 0;
	}

	.tabla--sorteos,
	.tabla--sorteos tbody {
		display: block;
		width: 100%;
	}

	.tabla--sorteos thead {
		display: none;
	}

	.tabla--sorteos tr {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"sorteo fecha"
			"resultado accion";
		align-items: center;
		gap: 4px 12px;
		margin: 0 0 10px;
		padding: 14px 16px;
		background: var(--papel);
		border: 1px solid var(--linea);
		border-radius: var(--radio);
		box-shadow: var(--sombra-sm);
	}

	.tabla--sorteos.tabla--con-juego tr {
		grid-template-areas:
			"juego juego"
			"sorteo fecha"
			"resultado accion";
	}

	.tabla--sorteos td {
		display: block;
		padding: 0;
		border: 0;
		text-align: left;
	}

	.tabla--sorteos .tabla__juego {
		grid-area: juego;
		font-size: 12px;
		font-weight: 750;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--texto-tenue);
	}

	.tabla--sorteos .tabla__sorteo {
		grid-area: sorteo;
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--texto-tenue);
	}

	.tabla--sorteos .tabla__sorteo::before {
		content: "#";
	}

	.tabla--sorteos .tabla__fecha {
		grid-area: fecha;
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		gap: 6px;
		font-size: 13px;
		color: var(--texto-suave);
	}

	.tabla--sorteos .tabla__hora {
		font-weight: 750;
		color: var(--texto);
	}

	.tabla--sorteos .tabla__resultado {
		grid-area: resultado;
		font-size: 27px;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
	}

	.tabla--sorteos .tabla__accion {
		grid-area: accion;
		text-align: right;
	}

	.tabla--sorteos .tabla__accion a {
		display: inline-block;
		padding: 9px 16px;
		background: #eef1f5;
		border-radius: 999px;
		font-size: 13.5px;
		font-weight: 700;
		color: var(--tinta);
		text-decoration: none;
	}

	.tabla--sorteos .tabla__accion a:hover {
		background: #e3e8ef;
	}
}

@media (max-width: 620px) {
	.tabla-scroll .tabla {
		min-width: 0;
		font-size: 12.5px;
	}

	.tabla-scroll .tabla th,
	.tabla-scroll .tabla td {
		padding: 9px 8px;
	}

	.cinta__lista > li:nth-child(n+3) {
		display: none;
	}
}

@media (max-width: 620px) {
	.cinta__lista > li:nth-child(n+2) {
		display: none;
	}

	.cinta__lista {
		justify-content: center;
	}
}

/* Tarjetas parejas: el enlace siempre al pie */
.tarjeta-resultado__enlace {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.tarjeta-resultado__enlace span[aria-hidden] {
	color: var(--oro-oscuro);
	font-weight: 800;
}

/* Rejilla de juegos en tres columnas */
.rejilla-juegos {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.rejilla-juegos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.rejilla-juegos {
		grid-template-columns: 1fr;
	}
}

/* Las páginas de datos usan todo el ancho; las de texto quedan en 74ch */
.pagina__principal--datos {
	max-width: none;
}

/* Páginas de datos a todo el ancho */
.pagina__principal--ancho,
.pagina__principal--datos {
	max-width: none;
}

/* Los bloques de datos no heredan el estilo de prosa de las páginas */
.pagina__principal .tarjeta-resultado,
.entrada__contenido .tarjeta-resultado,
.pagina__principal .proximos,
.entrada__contenido .proximos,
.pagina__principal .horario-juego,
.entrada__contenido .horario-juego,
.pagina__principal .destacado,
.entrada__contenido .destacado {
	font-size: 15px;
	line-height: 1.5;
}

.pagina__principal .tarjeta-resultado h3,
.entrada__contenido .tarjeta-resultado h3,
.pagina__principal .dia-grupo h3,
.entrada__contenido .dia-grupo h3 {
	margin: 0;
	font-size: 11px;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.pagina__principal .tarjeta-resultado ul,
.entrada__contenido .tarjeta-resultado ul,
.pagina__principal .proximos ul,
.entrada__contenido .proximos ul {
	padding-left: 0;
}

.pagina__principal .tarjeta-resultado li,
.entrada__contenido .tarjeta-resultado li,
.pagina__principal .proximos li,
.entrada__contenido .proximos li {
	margin-bottom: 0;
}

/* ==========================================================================
   Todos los resultados del día, agrupados por juego
   ========================================================================== */
.dia-grupos {
	display: grid;
	gap: 20px;
}

.dia-grupo {
	padding: 16px 16px 18px;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: var(--sombra-sm);
}

.dia-grupo__cab {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--linea);
}

.dia-grupo__nombre {
	margin: 0;
	font-size: 13px;
	font-weight: 780;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--jc, var(--tinta));
}

.dia-grupo__texto {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.dia-grupo__nota {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--texto-tenue);
}

.dia-grupo__fecha {
	font-weight: 700;
	color: var(--texto-suave);
}

.dia-grupo__sep {
	margin: 0 3px;
	color: var(--texto-tenue);
}

.dia-grupo__enlace {
	margin-left: auto;
	font-size: 13px;
	font-weight: 650;
	color: var(--texto-suave);
	text-decoration: none;
}

.dia-grupo__enlace:hover {
	color: var(--tinta);
}

.dia-grupo .rejilla-resultados--dia {
	margin-bottom: 0;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	justify-content: start;
}

/* Las tarjetas no se estiran a todo el ancho cuando el juego trae una sola salida */
.dia-grupo .tarjeta-resultado {
	max-width: 380px;
	max-width: min(380px, 100%);
}

/* El nombre del juego ya está en la cabecera del grupo */
.dia-grupo .tarjeta-resultado__juego {
	display: none;
}

/* La hora pasa a ser la cabecera de la tarjeta, a la izquierda */
.dia-grupo .tarjeta-resultado__cab {
	margin-top: 4px;
}

.dia-grupo .tarjeta-resultado__hora {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	padding: 2px 10px;
	font-size: 12.5px;
	background: #eef2f7;
	color: var(--jc, var(--tinta));
}

@media (max-width: 620px) {
	.dia-grupo__enlace {
		margin-left: 0;
	}
}

/* ==========================================================================
   22. Aire, calendario y predicción del día
   ========================================================================== */
.migas {
	margin-top: 26px;
	margin-bottom: 4px;
}

.pagina__cab {
	margin-bottom: 28px;
}

.pagina__cuerpo {
	padding-bottom: 72px;
}

.rejilla-juegos,
.tabla-envoltura,
.prediccion {
	margin-bottom: 8px;
}

.rejilla-juegos {
	margin-bottom: 56px;
}

/* Calendario */
.tabla--calendario .tabla__fecha {
	white-space: nowrap;
	font-weight: 700;
}

.tabla--calendario .tabla__hora {
	display: none;
}

.tabla--calendario tr.tabla__fila-dia td {
	border-top: 1px solid var(--linea);
}

/* Predicción del día */
.prediccion {
	padding: 30px 30px 22px;
	background: linear-gradient(160deg, #0b1727 0%, #16243a 100%);
	border-radius: var(--radio);
	color: #e9eef5;
	margin: 8px 0 34px;
}

.prediccion__eti {
	margin: 0;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oro);
}

.prediccion__fecha {
	margin: 6px 0 10px;
	font-size: clamp(21px, 2.4vw, 27px);
	line-height: 1.2;
	color: #fff;
}

.prediccion__aviso {
	margin: 0;
	max-width: 78ch;
	font-size: 14px;
	line-height: 1.6;
	color: #b9c5d6;
}

.prediccion__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	margin: 22px 0 16px;
}

.prediccion__juego {
	background: rgba(255, 255, 255, .055);
	border: 1px solid rgba(255, 255, 255, .1);
	border-top: 3px solid var(--jc, #f2b01e);
	border-radius: 12px;
	padding: 16px 16px 12px;
}

.prediccion__juego-nombre {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

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

.bola {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 20px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: #fff;
	color: #0b1727;
}

.bola--caliente {
	background: var(--oro);
}

.bola--fria {
	background: #2b3d57;
	color: #fff;
}

.prediccion__leyenda {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: #9aa8bb;
	display: flex;
	align-items: center;
	gap: 6px;
}

.punto-leyenda {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

.punto-leyenda--caliente {
	background: var(--oro);
}

.punto-leyenda--fria {
	background: #2b3d57;
	border: 1px solid #4a5f7d;
}

.prediccion__nota {
	margin: 8px 0 0;
	font-size: 12px;
	color: #8fa0b5;
}

/* Aviso del newsletter */
.newsletter__aviso {
	grid-column: 1 / -1;
	margin: 0 0 14px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 600;
}

.newsletter__aviso.es-ok {
	background: #e8f6ee;
	color: #14683f;
	border: 1px solid #b7e2c9;
}

.newsletter__aviso.es-error {
	background: #fdeceb;
	color: #8f1d16;
	border: 1px solid #f5c2be;
}

/* Accesibilidad: foco visible en todo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 3px solid #1f6feb;
	outline-offset: 2px;
	border-radius: 6px;
}

@media (max-width: 700px) {
	.prediccion {
		padding: 22px 18px 16px;
	}

	.prediccion__rejilla {
		grid-template-columns: 1fr;
	}

	.tabla--calendario .tabla__hora {
		display: inline;
		margin-left: 8px;
		font-weight: 600;
		color: var(--texto-suave);
	}

	.tabla--calendario .tabla__resultado-cal {
		display: none;
	}

	.migas {
		margin-top: 18px;
	}
}

/* Calendario en tarjetas por día */
.cal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 18px;
	margin: 24px 0 8px;
}

.cal__dia {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: var(--sombra-sm);
	overflow: hidden;
}

.cal__fecha {
	margin: 0;
	padding: 12px 16px;
	background: #f5f7fa;
	border-bottom: 1px solid var(--linea);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--texto);
}

.cal__lista {
	margin: 0;
	padding: 6px 16px 12px;
	list-style: none;
}

.cal__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid #f0f2f6;
}

.cal__item:last-child {
	border-bottom: 0;
}

.cal__hora {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: 14px;
	color: var(--tinta);
	min-width: 54px;
}

.cal__juego {
	font-size: 14.5px;
	text-decoration: none;
	color: var(--texto);
	border-left: 3px solid var(--jc, #ccc);
	padding-left: 10px;
}

.cal__juego:hover {
	color: var(--tinta);
	text-decoration: underline;
}

.nota-pie {
	margin: 18px 0 40px;
	font-size: 13.5px;
	color: var(--texto-tenue);
}

@media (max-width: 560px) {
	.cal {
		grid-template-columns: 1fr;
	}
}

/* Newsletter dentro de una página: aire y alineación */
.pagina__principal .newsletter,
.pagina__principal .newsletter + * {
	margin-bottom: 56px;
}

.pagina__principal > .newsletter:last-child,
.pagina__principal .newsletter:last-of-type {
	margin-bottom: 56px;
}

.newsletter {
	margin: 26px 0 56px;
}

.newsletter__form {
	align-self: center;
}

.newsletter__form .consentimiento,
.newsletter__form .consentimiento span {
	color: rgba(255, 255, 255, .86);
	font-size: 13.5px;
	line-height: 1.45;
}

.newsletter__form .consentimiento a {
	color: var(--oro);
}

.pagina__cab {
	padding-bottom: 4px;
}

.migas + .pagina__cab {
	margin-top: 6px;
}

/* Casillas de sorteos que aún no han salido */
.tarjeta-resultado--pendiente {
	background: repeating-linear-gradient(135deg, #fbfcfd, #fbfcfd 10px, #f6f8fb 10px, #f6f8fb 20px);
	border-style: dashed;
	box-shadow: none;
	justify-content: flex-start;
}

.pendiente__titulo {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--texto-suave);
}

.pendiente__nota {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--texto-tenue);
}