/**
 * bee-raffles frontend — tema oscuro pro con acento dorado.
 * Versión 0.5.0 (Wave 8a).
 *
 * Convención BEM. Encapsulado: todos los estilos están scopeados a `.bee-raffle`.
 */

/* ─── Tokens ───────────────────────────────────────────────────────────── */
.bee-raffle {
	--bee-bg: #0a0a0a;
	--bee-panel: #141414;
	--bee-panel-soft: #1c1c1c;
	--bee-border: #2a2a2a;
	--bee-border-strong: #3a3a3a;
	--bee-text: #f5f5f5;
	--bee-text-muted: #8a8a8a;
	--bee-text-dim: #5a5a5a;
	--bee-accent: #fbbf24;
	--bee-accent-soft: rgba(251, 191, 36, 0.15);
	--bee-accent-strong: #f59e0b;
	--bee-success: #10b981;
	--bee-success-soft: rgba(16, 185, 129, 0.15);
	--bee-danger: #ef4444;
	--bee-radius-sm: 8px;
	--bee-radius: 14px;
	--bee-radius-lg: 20px;
	--bee-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	background: var(--bee-bg);
	color: var(--bee-text);
	font-family: var(--bee-font);
	font-size: 14px;            /* mobile-first base */
	line-height: 1.5;
	box-sizing: border-box;
	max-width: min(100%, 1440px);
	width: 100%;
	overflow-x: hidden;         /* defensive: nada del componente desborda horizontalmente */
	/* Mobile-first: edge-to-edge sin border-radius ni margins externos.
	   El padding interno chico maximiza el ancho útil de la grilla. */
	padding: 0.75rem;
	margin: 0;
	border-radius: 0;
	/* En mobile el plugin "vive" pegado al CTA flotante; reservamos espacio inferior. */
	padding-bottom: 6rem;
}

@media (min-width: 768px) {
	.bee-raffle {
		font-size: 15px;
		padding: 1.5rem;
		margin: 1rem auto;
		border-radius: var(--bee-radius-lg);
		padding-bottom: 1.5rem;
	}
}
@media (min-width: 1100px) {
	.bee-raffle { padding: 2.5rem; }
}
.bee-raffle *, .bee-raffle *::before, .bee-raffle *::after { box-sizing: border-box; }
.bee-raffle h1, .bee-raffle h2, .bee-raffle h3 {
	color: var(--bee-text);
	font-family: var(--bee-font);
	letter-spacing: -0.02em;
	margin: 0;
}
.bee-raffle--error { background: #2a1a1a; color: #fca5a5; padding: 1rem; }

/* ─── HERO (mobile-first) ─────────────────────────────────────────────── */
.bee-raffle__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}
@media (min-width: 880px) {
	.bee-raffle__hero {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 3vw, 2.5rem);
		margin-bottom: 2rem;
	}
}

.bee-raffle__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: rgba(239, 68, 68, 0.15);
	color: var(--bee-danger);
	padding: 0.3em 0.85em;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* A.8: badge verde para sorteo activo. */
.bee-raffle__tag--live {
	background: var(--bee-success-soft);
	color: var(--bee-success);
	animation: bee-pulse 2s ease-in-out infinite;
}
@keyframes bee-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.7; }
}

.bee-raffle__title {
	font-size: clamp(1.5rem, 6vw, 3.5rem);    /* mobile-first: bajo el mínimo a 1.5rem */
	font-weight: 800;
	margin: 0.5rem 0 0.4rem;
	line-height: 1.1;
	letter-spacing: -0.025em;
}
.bee-raffle__desc { color: var(--bee-text-muted); max-width: 60ch; margin-bottom: 1.5rem; }

.bee-raffle__cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%);
	background-size: cover;
	background-position: center;
	border-radius: var(--bee-radius);
	overflow: hidden;
	border: 1px solid var(--bee-border);
}

/* ─── Hero sidebar cards ──────────────────────────────────────────────── */
.bee-raffle__prizes-card,
.bee-raffle__summary,
.bee-raffle__trust {
	background: var(--bee-panel);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	padding: 1.25rem 1.4rem;
}

.bee-raffle__card-title {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bee-accent);
	margin-bottom: 1rem;
}

.bee-raffle__prizes { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.bee-raffle__prize {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	background: var(--bee-panel-soft);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	padding: 0.65rem 0.85rem;
	font-size: 0.92rem;
}
.bee-raffle__prize-medal { font-size: 1.1rem; }
.bee-raffle__prize-name  { color: var(--bee-text); font-weight: 500; }
.bee-raffle__prize-value { color: var(--bee-accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bee-raffle__progress { margin-bottom: 1.25rem; }
.bee-raffle__progress-text {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	color: var(--bee-text-muted);
	margin-bottom: 0.4rem;
}
.bee-raffle__progress-text strong { color: var(--bee-text); }
.bee-raffle__progress-bar {
	height: 10px;
	background: var(--bee-panel-soft);
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--bee-border);
}
.bee-raffle__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--bee-accent) 0%, var(--bee-accent-strong) 100%);
	transition: width 0.5s ease;
}

.bee-raffle__countdown-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--bee-danger);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
.bee-raffle__countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.bee-raffle__countdown-grid > div {
	background: var(--bee-panel-soft);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius-sm);
	padding: 0.6rem 0.4rem;
	text-align: center;
}
.bee-raffle__countdown-grid strong {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--bee-accent);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.bee-raffle__countdown-grid small {
	display: block;
	font-size: 0.65rem;
	color: var(--bee-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0.25rem;
}

.bee-raffle__notice {
	background: var(--bee-panel);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	padding: 1rem 1.25rem;
	color: var(--bee-text-muted);
	margin-bottom: 1.5rem;
}
.bee-raffle__notice--inactive { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; }

/* ─── MAIN: selector + sidebar (mobile-first stack) ───────────────────── */
.bee-raffle__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}
@media (min-width: 1024px) {
	.bee-raffle__main {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
		gap: clamp(1rem, 2.5vw, 2rem);
	}
}

.bee-raffle__selector {
	background: var(--bee-panel);
	border: 1px solid var(--bee-border);
	border-radius: var(--bee-radius);
	padding: 1rem;            /* mobile-first: padding chico para ganar ancho de grid */
	min-width: 0;             /* permite que el grid hijo shrinkee sin desbordar */
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;         /* contiene cualquier overflow de pills/grid (defensive) */
}
@media (min-width: 768px) { .bee-raffle__selector { padding: 1.5rem; } }

.bee-raffle__selector-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
@media (min-width: 768px) {
	.bee-raffle__selector-header { align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
}
.bee-raffle__overline {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--bee-accent);
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}
.bee-raffle__subtitle {
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	font-weight: 800;
	margin: 0;
}

/* Tabs */
.bee-raffle__tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0.4rem;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--bee-border-strong) transparent;
}
.bee-raffle__tabs::-webkit-scrollbar { height: 4px; }
.bee-raffle__tabs::-webkit-scrollbar-thumb { background: var(--bee-border-strong); border-radius: 4px; }
.bee-raffle__tab {
	background: transparent;
	border: 1px solid var(--bee-border);
	color: var(--bee-text-muted);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.82rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	white-space: nowrap;
	transition: all 150ms ease;
}
.bee-raffle__tab:hover { color: var(--bee-text); border-color: var(--bee-border-strong); }
.bee-raffle__tab.is-active {
	background: var(--bee-accent-soft);
	color: var(--bee-accent);
	border-color: var(--bee-accent);
}

/* Leyenda */
.bee-raffle__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	font-size: 0.82rem;
	color: var(--bee-text-muted);
}
.bee-raffle__legend li { display: flex; align-items: center; gap: 0.45rem; }
.bee-raffle__legend-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.bee-raffle__legend-swatch--selected { background: var(--bee-accent); }
.bee-raffle__legend-swatch--sold {
	background: var(--bee-panel-soft);
	border: 1px solid var(--bee-border);
	position: relative;
}
.bee-raffle__legend-swatch--sold::after {
	content: '';
	position: absolute;
	inset: 6px 2px;
	border-top: 1px solid var(--bee-text-dim);
	transform: rotate(-12deg);
	transform-origin: 0 0;
}
.bee-raffle__legend-swatch--available { background: var(--bee-panel-soft); border: 1px solid var(--bee-border-strong); }

/* Grid de tokens — mobile-first:
 *   base (≤420px) : 4 cols (touch-friendly en pantallas chicas tipo iPhone SE)
 *   ≥421px       : 5 cols
 *   ≥600px       : 6 cols (tablet portrait)
 *   ≥880px       : 8 cols
 *   ≥1100px      : 10 cols (desktop 10×10)
 */
.bee-raffle__grid {
	display: grid;
	/* minmax(0, 1fr) en TODOS los breakpoints permite que la celda shrinkee por debajo
	   de su contenido natural ("00000" + padding). Sin esto, el grid desborda el
	   contenedor en mobiles angostos. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.35rem;
	margin-bottom: 1rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
@media (min-width: 421px)  { .bee-raffle__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; } }
@media (min-width: 600px)  { .bee-raffle__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; } }
@media (min-width: 880px)  { .bee-raffle__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1.25rem; } }
@media (min-width: 1100px) { .bee-raffle__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

.bee-raffle__grid-placeholder { grid-column: 1 / -1; padding: 3rem 1rem; text-align: center; color: var(--bee-text-muted); }

.bee-raffle__cell {
	/* Mobile-first: alto fijo razonable, NO aspect-ratio 1:1 (que en mobile da celdas
	   demasiado altas porque el ancho disponible es grande). En desktop sí queremos
	   cuadradas porque los anchos son acotados. */
	height: 44px;
	background: var(--bee-panel-soft);
	border: 1px solid var(--bee-border);
	color: var(--bee-text);
	border-radius: var(--bee-radius-sm);
	font-family: var(--bee-font);
	font-size: 0.78rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}
@media (min-width: 421px) { .bee-raffle__cell { height: 48px; font-size: 0.82rem; } }
@media (min-width: 600px) { .bee-raffle__cell { height: 56px; font-size: 0.88rem; } }
@media (min-width: 880px) { .bee-raffle__cell { height: 64px; aspect-ratio: 1 / 1; font-size: 0.92rem; } }
@media (min-width: 1100px) { .bee-raffle__cell { height: auto; aspect-ratio: 1 / 1; max-height: 88px; } }
.bee-raffle__cell:hover:not([disabled]) {
	border-color: var(--bee-accent);
	transform: translateY(-2px);
}
.bee-raffle__cell.is-selected {
	background: var(--bee-accent);
	color: #0a0a0a;
	border-color: var(--bee-accent);
	border-width: 2px;
	box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}
.bee-raffle__cell.is-sold,
.bee-raffle__cell.is-holding {
	background: var(--bee-panel-soft);
	color: var(--bee-text-dim);
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.55;
}
.bee-raffle__cell.is-available { background: var(--bee-panel-soft); color: var(--bee-text); }

/* Chips */
.bee-raffle__selected {
	border-top: 1px solid var(--bee-border);
	padding-top: 1rem;
	margin-top: 0.5rem;
}
.bee-raffle__selected-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: var(--bee-accent);
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
}
.bee-raffle__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bee-raffle__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--bee-accent);
	color: #0a0a0a;
	border-radius: 999px;
	padding: 0.35rem 0.45rem 0.35rem 0.85rem;
	font-weight: 700;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}
.bee-raffle__chip button {
	background: transparent;
	border: 0;
	color: #0a0a0a;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 0.35rem;
	border-radius: 50%;
	opacity: 0.75;
	transition: opacity 120ms;
}
.bee-raffle__chip button:hover { opacity: 1; }

/* ─── SIDEBAR ─────────────────────────────────────────────────────────── */
.bee-raffle__sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: sticky;
	top: 1rem;
}
@media (max-width: 1024px) { .bee-raffle__sidebar { position: static; } }

.bee-raffle__sidebar-cover {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #1e2a4a 0%, #16213e 100%);
	background-size: cover;
	background-position: center;
	border-radius: var(--bee-radius);
	border: 1px solid var(--bee-border);
}

.bee-raffle__summary-list { margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.92rem; }
.bee-raffle__summary-list > div { display: flex; justify-content: space-between; gap: 1rem; }
.bee-raffle__summary-list dt { color: var(--bee-text-muted); margin: 0; }
.bee-raffle__summary-list dd { color: var(--bee-text); margin: 0; font-weight: 600; text-align: right; }

.bee-raffle__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 0;
	border-top: 1px solid var(--bee-border);
	border-bottom: 1px solid var(--bee-border);
	margin-bottom: 1rem;
}
.bee-raffle__total span { color: var(--bee-text-muted); font-size: 0.92rem; }
.bee-raffle__total strong { font-size: 1.6rem; font-weight: 800; color: var(--bee-accent); font-variant-numeric: tabular-nums; }

/* Botones */
.bee-raffle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--bee-panel-soft);
	color: var(--bee-text);
	border: 1px solid var(--bee-border);
	border-radius: 999px;
	padding: 0.65rem 1.25rem;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 150ms ease;
	text-decoration: none;
}
.bee-raffle__btn:hover:not(:disabled) { border-color: var(--bee-accent); color: var(--bee-accent); }
.bee-raffle__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bee-raffle__btn--block { width: 100%; padding: 0.95rem 1.5rem; }
.bee-raffle__btn--primary {
	background: var(--bee-accent);
	color: #0a0a0a;
	border-color: var(--bee-accent);
	font-weight: 800;
	font-size: 1rem;
	box-shadow: 0 4px 20px rgba(251, 191, 36, 0.25);
}
.bee-raffle__btn--primary:hover:not(:disabled) {
	background: var(--bee-accent-strong);
	border-color: var(--bee-accent-strong);
	color: #0a0a0a;
	box-shadow: 0 6px 24px rgba(251, 191, 36, 0.4);
}
.bee-raffle__btn--outline { background: transparent; }
.bee-raffle__btn--ghost-sm {
	padding: 0.4rem 0.85rem;
	font-size: 0.85rem;
	background: var(--bee-accent-soft);
	color: var(--bee-accent);
	border-color: var(--bee-accent);
}

/* Multi lucky stepper */
.bee-raffle__multi-lucky {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.65rem;
	margin: 1rem 0;
	font-size: 0.88rem;
	color: var(--bee-text-muted);
}
.bee-raffle__stepper {
	display: flex;
	align-items: center;
	background: var(--bee-panel-soft);
	border: 1px solid var(--bee-border);
	border-radius: 999px;
	overflow: hidden;
}
.bee-raffle__stepper button {
	background: transparent;
	border: 0;
	color: var(--bee-text);
	width: 32px;
	height: 32px;
	cursor: pointer;
	font-size: 1.1rem;
	transition: background 120ms;
}
.bee-raffle__stepper button:hover { background: var(--bee-border); }
.bee-raffle__stepper input {
	width: 44px;
	background: transparent;
	border: 0;
	color: var(--bee-text);
	font-family: inherit;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
	appearance: textfield;
	-moz-appearance: textfield;
}
.bee-raffle__stepper input::-webkit-outer-spin-button,
.bee-raffle__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Payments */
.bee-raffle__payments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.bee-raffle__payment {
	background: var(--bee-panel-soft);
	border: 1px solid var(--bee-border);
	color: var(--bee-text-muted);
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.bee-raffle__payments-note { font-size: 0.72rem; color: var(--bee-text-dim); text-align: center; margin-top: 0.6rem; }

/* Trust */
.bee-raffle__trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
.bee-raffle__trust-list li { display: flex; align-items: center; gap: 0.55rem; color: var(--bee-text); }
.bee-raffle__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--bee-accent);
	color: #0a0a0a;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 800;
}

/* Toast */
.bee-raffle__toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #111;
	color: var(--bee-text);
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--bee-border-strong);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
	font-size: 0.92rem;
	font-weight: 600;
	z-index: 10000;
	animation: bee-slide-up 250ms ease;
	max-width: calc(100% - 2rem);
	text-align: center;
}
.bee-raffle__toast[data-kind="error"] { border-color: var(--bee-danger); color: #fca5a5; }
.bee-raffle__toast[data-kind="ok"]    { border-color: var(--bee-success); color: #6ee7b7; }
.bee-raffle__toast[hidden] { display: none; }

/* Mobile: toast más compacto + más arriba para no chocar con el panel sticky bottom. */
@media (max-width: 767px) {
	.bee-raffle__toast {
		bottom: 5.5rem; /* arriba del panel sticky (~70px) + 16px de gap */
		padding: 0.55rem 1rem;
		font-size: 0.8rem;
		border-radius: 8px;
		max-width: calc(100% - 1.5rem);
		font-weight: 500;
		line-height: 1.3;
	}
}

@keyframes bee-slide-up {
	from { opacity: 0; transform: translate(-50%, 20px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── CTA flotante mobile ─────────────────────────────────────────────────
 * Aparece en el viewport bottom cuando hay ≥1 boleto seleccionado.
 * Mobile-first: visible por default. Desktop (≥1024px): hidden.
 *
 * Patrón Apple HIG / Material Design: bottom bar con info compacta + CTA
 * grande accionable con el pulgar (zona segura inferior).
 */
.bee-raffle__mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
	background: rgba(20, 20, 20, 0.95);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border-top: 1px solid var(--bee-border-strong);
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
	animation: bee-cta-slide-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bee-raffle__mobile-cta[hidden] { display: none; }

.bee-raffle__mobile-cta-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.bee-raffle__mobile-cta-count {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bee-text-muted);
	line-height: 1.1;
}
.bee-raffle__mobile-cta-total {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--bee-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-top: 0.15rem;
}
.bee-raffle__mobile-cta-btn {
	flex: 0 0 auto;
	padding: 0.85rem 1.25rem;
	font-size: 0.92rem;
	font-weight: 700;
	border-radius: 999px;
	min-width: 130px;
	min-height: 48px;
}

@keyframes bee-cta-slide-in {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Desktop: el CTA del sidebar cubre el rol — escondemos el flotante. */
@media (min-width: 1024px) {
	.bee-raffle__mobile-cta { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE OVERHAUL — Fernando 2026-05-15
   "Box de compra y Mis números sticky · grilla full-width · trust oculto"
   ────────────────────────────────────────────────────────────────────────── */

/* TABLET + MOBILE (< 1024px): ocultar elementos secundarios que se duplican o
   roban espacio vertical. La info crítica vive en hero + grilla + sticky panel. */
@media (max-width: 1023px) {
	.bee-raffle__trust         { display: none; }
	.bee-raffle__payments      { display: none; }
	.bee-raffle__payments-note { display: none; }
	.bee-raffle__sidebar-cover { display: none; }
	.bee-raffle__multi-lucky   { display: none; }

	/* Pills de navegación: en mobile mejoran como scroller horizontal con snap. */
	.bee-raffle__macros,
	.bee-raffle__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.35rem;
	}
	.bee-raffle__macro,
	.bee-raffle__tab {
		flex-shrink: 0;
		scroll-snap-align: start;
	}
}

/* MOBILE (< 768px): el sidebar entero se convierte en panel sticky bottom.
   El mobile-cta legacy se oculta (el sidebar lo reemplaza). */
@media (max-width: 767px) {
	.bee-raffle__sidebar {
		position: fixed;
		top: auto;          /* CRÍTICO: el base rule tenía top:1rem desde el modo sticky
		                       desktop. Sin override, fixed + top + bottom + L/R = sidebar
		                       cubría TODO el viewport (bug visto en iPhone real). */
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;       /* defensive: el alto lo decide el contenido */
		max-height: 30vh;   /* tope por las dudas (no debería pasar de ~80px en uso real) */
		margin: 0;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
		background: rgba(20, 20, 20, 0.96);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid var(--bee-border, #2c2c30);
		z-index: 100;
		flex-direction: row;
		gap: 0.75rem;
		align-items: center;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
	}

	/* Dentro del sidebar sticky: ocultamos lo que ocupa altura innecesaria
	   (cover, summary list, multi-lucky ya hidden por la regla anterior). */
	.bee-raffle__sidebar > .bee-raffle__summary { display: contents; }
	.bee-raffle__summary > .bee-raffle__card-title { display: none; }
	.bee-raffle__summary-list { display: none; }

	.bee-raffle__total {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		border: none;
		padding: 0;
		margin: 0;
		font-size: 0.78rem;
		gap: 0.1rem;
	}
	.bee-raffle__total > span { color: var(--bee-text-muted, #9a9a9e); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
	.bee-raffle__total strong { font-size: 1.1rem; color: var(--bee-text, #f5f5f5); }

	.bee-raffle__btn--primary.bee-raffle__btn--block {
		flex: 0 0 auto;
		width: auto;
		padding: 0.7rem 1.2rem;
		font-size: 0.88rem;
		font-weight: 700;
		border-radius: 999px;
		min-height: 44px;
		white-space: nowrap;
	}

	/* El CTA flotante legacy queda obsoleto cuando el sidebar es sticky bottom. */
	.bee-raffle__mobile-cta { display: none !important; }

	/* Espacio inferior para que el panel sticky no tape el contenido del scroll. */
	.bee-raffle { padding-bottom: 5.5rem; }

	/* Chips "Mis números seleccionados" — dejan inline encima de la grilla, scrolleable horizontal */
	.bee-raffle__selected {
		margin: 0.5rem 0;
		padding: 0.6rem 0.75rem;
	}
	.bee-raffle__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.bee-raffle__chip { flex-shrink: 0; }
}

/* ─── Wave 9 (A.2–A.9): macro pills, search, clear, lightbox, prize button ─── */

/* A.2: macro pills (nivel 1 — 1000s). Visualmente más prominentes que las micros. */
.bee-raffle__macros {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--bee-border);
}
.bee-raffle__macros[hidden] { display: none; }

.bee-raffle__macro {
	appearance: none;
	background: var(--bee-panel-soft);
	color: var(--bee-text-muted);
	border: 1px solid var(--bee-border);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: all 0.15s ease;
}
.bee-raffle__macro:hover {
	background: var(--bee-panel);
	color: var(--bee-text);
}
.bee-raffle__macro.is-active {
	background: var(--bee-accent);
	color: #000;
	border-color: var(--bee-accent);
}

/* Header del selector — ajuste para meter el buscador. */
.bee-raffle__selector-actions {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap;
}

/* A.3: buscador de número. */
.bee-raffle__search-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.bee-raffle__search-icon {
	position: absolute;
	left: 0.7rem;
	pointer-events: none;
	opacity: 0.6;
	font-size: 0.9rem;
}
.bee-raffle__search {
	background: var(--bee-panel-soft);
	color: var(--bee-text);
	border: 1px solid var(--bee-border);
	border-radius: 999px;
	padding: 0.5rem 0.9rem 0.5rem 2.1rem;
	font-size: 0.88rem;
	font-family: inherit;
	width: 140px;
	transition: border-color 0.15s ease;
}
.bee-raffle__search:focus {
	outline: none;
	border-color: var(--bee-accent);
}
.bee-raffle__search::-webkit-inner-spin-button,
.bee-raffle__search::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bee-raffle__search { -moz-appearance: textfield; }

/* Hint live debajo del search: muestra qué número se va a tomar mientras tipeás.
   Crítico para starts_at_zero (offset=-1): confirma visualmente que la conversión
   display → interno está bien antes de presionar Enter. */
.bee-raffle__search-hint {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	font-size: 0.72rem;
	color: var(--bee-accent, #fbbf24);
	background: rgba(20, 20, 20, 0.95);
	border: 1px solid rgba(245, 158, 11, 0.35);
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	white-space: nowrap;
	z-index: 10;
	pointer-events: none;
}
.bee-raffle__search-hint.is-error {
	color: #fca5a5;
	border-color: rgba(239, 68, 68, 0.4);
}

/* A.4: botón limpiar selección. */
.bee-raffle__selected-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}
.bee-raffle__clear-btn {
	appearance: none;
	background: transparent;
	color: var(--bee-text-muted);
	border: 1px solid var(--bee-border);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.bee-raffle__clear-btn:hover {
	color: var(--bee-danger);
	border-color: var(--bee-danger);
}

/* A.9: premios clickeables. */
.bee-raffle__prize-btn {
	appearance: none;
	background: transparent;
	color: inherit;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	position: relative;
	transition: opacity 0.15s ease;
}
.bee-raffle__prize-btn:hover { opacity: 0.85; }
.bee-raffle__prize-btn:hover .bee-raffle__prize-zoom { opacity: 1; }
.bee-raffle__prize-zoom {
	margin-left: auto;
	opacity: 0;
	transition: opacity 0.15s ease;
	font-size: 0.85rem;
}

/* A.9: lightbox. */
.bee-raffle__lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: 10001;
	animation: bee-fade-in 200ms ease;
}
.bee-raffle__lightbox[hidden] { display: none; }
.bee-raffle__lightbox-inner {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.bee-raffle__lightbox-img {
	max-width: 100%;
	max-height: 80vh;
	border-radius: var(--bee-radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.bee-raffle__lightbox-caption {
	color: var(--bee-text);
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	text-align: center;
}
.bee-raffle__lightbox-close {
	position: absolute;
	top: -3rem;
	right: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 2rem;
	cursor: pointer;
	line-height: 1;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	transition: background 0.15s ease;
}
.bee-raffle__lightbox-close:hover { background: rgba(255, 255, 255, 0.1); }

@keyframes bee-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Pulse para el token recién buscado / pickeado (lucky). */
.bee-raffle__cell.is-pulse {
	animation: bee-cell-pulse 1.2s ease;
}
@keyframes bee-cell-pulse {
	0%   { box-shadow: 0 0 0 0 var(--bee-accent); transform: scale(1); }
	30%  { box-shadow: 0 0 0 8px var(--bee-accent-soft); transform: scale(1.08); }
	100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* ─── INDEX SHORTCODE — `[bee_raffles_index]` ─────────────────────────────
   Dark theme matcheando mocks 2026-05-15 (Fernando). Reusa tokens dorados de
   .bee-raffle (--bee-accent = amber/gold). Soporta dos estados: active y coming-soon. */

.bee-raffles-index {
	width: 100%;
	color: #f5f5f5;
}

.bee-raffles-index--empty {
	padding: 3rem 1rem;
	text-align: center;
	color: rgba(245, 245, 245, 0.5);
	background: #1a1a1a;
	border: 1px solid rgba(245, 158, 11, 0.15);
	border-radius: 14px;
}

.bee-raffles-index__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/* Single-card mode (shortcode [bee_raffle_card]). Limita el ancho del wrapper para
   que no se estire al 100% del contenedor padre — el grid de 1 col explotaría visual. */
.bee-raffles-index--single { display: flex; justify-content: flex-start; }
.bee-raffles-index--single .bee-raffles-index__grid { grid-template-columns: 1fr; width: 100%; }
.bee-raffles-index--width-small  { max-width: 320px; }
.bee-raffles-index--width-medium { max-width: 420px; }
.bee-raffles-index--width-large  { max-width: 560px; }
.bee-raffles-index--width-full   { max-width: 100%; }

@media (min-width: 600px) {
	.bee-raffles-index__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.bee-raffles-index__grid {
		grid-template-columns: repeat(var(--bee-index-cols, 3), 1fr);
	}
}

.bee-raffles-index__card {
	display: flex;
	flex-direction: column;
	position: relative;
	background: #1a1a1a;
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.4);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.bee-raffles-index__card:hover {
	transform: translateY(-3px);
	border-color: rgba(245, 158, 11, 0.5);
	box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2), 0 16px 40px rgba(0, 0, 0, 0.5);
}

.bee-raffles-index__card--featured {
	border-color: rgba(245, 158, 11, 0.55);
}

.bee-raffles-index__card--coming {
	opacity: 0.95;
	filter: saturate(0.85);
}

.bee-raffles-index__card--coming:hover {
	transform: translateY(-1px);
}

/* Cover area con gradient fade y chips */
.bee-raffles-index__cover {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-color: #0a0a0a;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(135deg, rgba(120, 80, 20, 0.5), rgba(20, 20, 20, 0.85));
}

.bee-raffles-index__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, #1a1a1a 100%);
	pointer-events: none;
}

.bee-raffles-index__chip,
.bee-raffles-index__status {
	position: absolute;
	z-index: 2;
	top: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.95rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.85);
	color: #fbbf24;
	border: 1px solid rgba(245, 158, 11, 0.4);
	backdrop-filter: blur(6px);
}

.bee-raffles-index__chip {
	left: 1rem;
}

.bee-raffles-index__chip--featured {
	color: #fde68a;
	border-color: rgba(253, 224, 71, 0.6);
	background: rgba(146, 64, 14, 0.45);
}

.bee-raffles-index__status {
	right: 1rem;
}

.bee-raffles-index__status--live {
	color: #fff;
	background: #dc2626;
	border-color: rgba(220, 38, 38, 0.6);
}

/* Body */
.bee-raffles-index__body {
	padding: 0.25rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
}

.bee-raffles-index__title {
	font-size: 1.55rem;
	font-weight: 800;
	margin: 0;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #fff;
}

.bee-raffles-index__title a {
	color: inherit;
	text-decoration: none;
}

.bee-raffles-index__title a:hover {
	color: #fbbf24;
}

.bee-raffles-index__desc {
	margin: 0;
	font-size: 0.92rem;
	color: rgba(245, 245, 245, 0.7);
	line-height: 1.5;
}

/* Premio mayor — box destacado */
.bee-raffles-index__prize {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.8rem 1rem;
	background: rgba(146, 64, 14, 0.18);
	border: 1px solid rgba(245, 158, 11, 0.35);
	border-radius: 12px;
}

.bee-raffles-index__prize-icon {
	font-size: 1.4rem;
	flex-shrink: 0;
}

.bee-raffles-index__prize-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.bee-raffles-index__prize-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fbbf24;
}

.bee-raffles-index__prize-text strong {
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Countdown */
.bee-raffles-index__countdown {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.3);
	border-radius: 12px;
}

.bee-raffles-index__cd-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f87171;
	white-space: nowrap;
}

.bee-raffles-index__cd-cells {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4rem;
	flex: 1;
}

.bee-raffles-index__cd-cells > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	padding: 0.35rem 0.25rem;
	background: rgba(20, 20, 20, 0.6);
	border: 1px solid rgba(245, 158, 11, 0.18);
	border-radius: 8px;
}

.bee-raffles-index__cd-cells strong {
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.bee-raffles-index__cd-cells small {
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.55);
}

/* Footer: precio + CTA */
.bee-raffles-index__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.5rem;
}

.bee-raffles-index__price {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}

.bee-raffles-index__price strong {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.01em;
}

.bee-raffles-index__price span {
	font-size: 0.75rem;
	color: rgba(245, 245, 245, 0.55);
}

.bee-raffles-index__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.4rem;
	border-radius: 12px;
	background: #fbbf24;
	color: #1a1a1a;
	font-weight: 800;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	box-shadow: 0 4px 12px rgba(251, 191, 36, 0.25);
}

.bee-raffles-index__cta:hover {
	background: #f59e0b;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(251, 191, 36, 0.35);
}

.bee-raffles-index__cta--coming {
	background: transparent;
	color: rgba(245, 245, 245, 0.55);
	border: 1px solid rgba(245, 158, 11, 0.3);
	cursor: default;
	pointer-events: none;
	box-shadow: none;
	font-weight: 700;
}

.bee-raffles-index__cta--ghost {
	background: transparent;
	color: #fbbf24;
	border: 1px solid rgba(245, 158, 11, 0.4);
	box-shadow: none;
}

.bee-raffles-index__cta--ghost:hover {
	background: rgba(245, 158, 11, 0.12);
}

/* Progress bar (sólo en active) */
.bee-raffles-index__progress {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.bee-raffles-index__progress-bar {
	width: 100%;
	height: 8px;
	background: rgba(245, 245, 245, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.bee-raffles-index__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #fbbf24, #f59e0b);
	border-radius: 999px;
	transition: width 300ms ease;
}

.bee-raffles-index__progress-text {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	color: rgba(245, 245, 245, 0.6);
}

.bee-raffles-index__progress-text span:last-child {
	color: #fbbf24;
	font-weight: 700;
}

/* Mobile tweaks (≤599px) — botón más slim, precio en 1 sola línea */
@media (max-width: 599px) {
	.bee-raffles-index__title { font-size: 1.3rem; }
	.bee-raffles-index__price strong {
		font-size: 1.15rem;
		white-space: nowrap;       /* "$399 MXN" en 1 línea, no parte en 2 */
	}
	.bee-raffles-index__cta {
		padding: 0.55rem 0.9rem;
		font-size: 0.75rem;
	}
	.bee-raffles-index__cd-cells strong { font-size: 0.95rem; }
}

/* Narrow mobile (≤399px) — footer apilado verticalmente para que el botón sea
 * full-width slim en lugar de cuadrado fat al costado de un precio multi-línea. */
@media (max-width: 399px) {
	.bee-raffles-index__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}
	.bee-raffles-index__cta {
		width: 100%;
		justify-content: center;
	}
}

/* Defensa: ningún card sale del parent. Aplica a ambos modos (index y single). */
.bee-raffles-index,
.bee-raffles-index *,
.bee-raffles-index *::before,
.bee-raffles-index *::after { box-sizing: border-box; }
.bee-raffles-index__card { max-width: 100%; min-width: 0; }
.bee-raffles-index__grid { min-width: 0; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
 * v1.1.10 — Card SIZE variants (small / medium / large)
 *   El renderer ya filtra QUÉ se rendea por size; acá ajustamos AMBIENTE
 *   visual (paddings, fonts, aspect ratios) según el size.
 * ═══════════════════════════════════════════════════════════════ */

/* Small: compact, cover más chico, texto reducido */
.bee-raffles-index__card--size-small .bee-raffles-index__cover {
	aspect-ratio: 16 / 9;
}
.bee-raffles-index__card--size-small .bee-raffles-index__body {
	padding: 0.25rem 1rem 1rem;
	gap: 0.7rem;
}
.bee-raffles-index__card--size-small .bee-raffles-index__title {
	font-size: 1.05rem;
	line-height: 1.2;
}
.bee-raffles-index__card--size-small .bee-raffles-index__price strong {
	font-size: 1.1rem;
}
.bee-raffles-index__card--size-small .bee-raffles-index__cta {
	padding: 0.55rem 0.9rem;
	font-size: 0.75rem;
}

/* Medium: default — sin overrides (usa los styles base de la card) */
/* (current behavior, sin tweaks adicionales) */

/* Large: featured, cover más alto, fonts más grandes, más respiración */
.bee-raffles-index__card--size-large .bee-raffles-index__cover {
	aspect-ratio: 16 / 10;
}
.bee-raffles-index__card--size-large .bee-raffles-index__body {
	padding: 0.5rem 1.75rem 1.75rem;
	gap: 1.1rem;
}
.bee-raffles-index__card--size-large .bee-raffles-index__title {
	font-size: 1.75rem;
	line-height: 1.1;
}
.bee-raffles-index__card--size-large .bee-raffles-index__price strong {
	font-size: 1.6rem;
}
.bee-raffles-index__card--size-large .bee-raffles-index__cta {
	padding: 0.95rem 1.6rem;
	font-size: 0.95rem;
}

/* Mobile (≤599px) — apretar size large para que no se vea desbordado */
@media (max-width: 599px) {
	.bee-raffles-index__card--size-large .bee-raffles-index__title { font-size: 1.4rem; }
	.bee-raffles-index__card--size-large .bee-raffles-index__price strong { font-size: 1.25rem; }
	.bee-raffles-index__card--size-large .bee-raffles-index__cta {
		padding: 0.7rem 1rem;
		font-size: 0.82rem;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * v1.1.10 — Index LAYOUT variants (grid / list / featured)
 * ═══════════════════════════════════════════════════════════════ */

/* LIST: cada card ocupa fila completa, en stack vertical. Cards en size large. */
.bee-raffles-index--layout-list .bee-raffles-index__grid {
	grid-template-columns: 1fr !important;  /* override de los @media de columns */
	gap: 2rem;
}

/* FEATURED: primer card ocupa fila completa (large), resto en grid 2-3 cols (small).
 * grid-column: 1 / -1 hace que el primer ítem span de borde a borde. */
.bee-raffles-index--layout-featured .bee-raffles-index__grid {
	display: grid;
	gap: 1.5rem;
}
.bee-raffles-index--layout-featured .bee-raffles-index__card:first-child {
	grid-column: 1 / -1;
}

@media (min-width: 600px) {
	.bee-raffles-index--layout-featured .bee-raffles-index__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 960px) {
	.bee-raffles-index--layout-featured .bee-raffles-index__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ─── WINNERS SHORTCODE — `[bee_raffles_winners]` ─────────────────────────
   Mock 4 (Fernando 2026-05-15): cards de testimoniales con badge VERIFICADO verde,
   nombre, ciudad+fecha, box premio dorado, quote, rating. Tema verde (no dorado)
   para diferenciar visualmente de las cards activas del index. */

.bee-raffles-winners { width: 100%; color: #f5f5f5; }

.bee-raffles-winners--empty {
	padding: 2.5rem 1rem;
	text-align: center;
	color: rgba(245, 245, 245, 0.55);
	background: #1a1a1a;
	border: 1px solid rgba(34, 197, 94, 0.18);
	border-radius: 14px;
}

.bee-raffles-winners__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 600px) {
	.bee-raffles-winners__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.bee-raffles-winners__grid { grid-template-columns: repeat(var(--bee-winners-cols, 3), 1fr); }
}

.bee-raffles-winners__card {
	display: flex;
	flex-direction: column;
	background: #1a1a1a;
	border: 1px solid rgba(34, 197, 94, 0.25);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.bee-raffles-winners__card:hover {
	transform: translateY(-3px);
	border-color: rgba(34, 197, 94, 0.45);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.bee-raffles-winners__cover {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: #0a0a0a;
	background-size: cover;
	background-position: center;
	background-image: linear-gradient(135deg, rgba(20, 83, 45, 0.55), rgba(20, 20, 20, 0.9));
}

.bee-raffles-winners__cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 60%, #1a1a1a 100%);
	pointer-events: none;
}

.bee-raffles-winners__badge {
	position: absolute;
	z-index: 2;
	bottom: 0.9rem;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.9rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	background: rgba(20, 20, 20, 0.85);
	color: #6ee7b7;
	border: 1px solid rgba(34, 197, 94, 0.5);
	backdrop-filter: blur(6px);
}

.bee-raffles-winners__body {
	padding: 0.5rem 1.4rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.bee-raffles-winners__name {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0;
	color: #fff;
	letter-spacing: 0.02em;
}

.bee-raffles-winners__meta {
	margin: 0;
	font-size: 0.82rem;
	color: rgba(245, 245, 245, 0.6);
}

.bee-raffles-winners__prize {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: rgba(146, 64, 14, 0.18);
	border: 1px solid rgba(245, 158, 11, 0.3);
	border-radius: 10px;
}

.bee-raffles-winners__prize strong {
	font-weight: 700;
	color: #fbbf24;
	font-size: 0.92rem;
}

.bee-raffles-winners__quote {
	margin: 0;
	padding: 0;
	font-size: 0.92rem;
	color: rgba(245, 245, 245, 0.78);
	font-style: italic;
	line-height: 1.55;
	border-left: 2px solid rgba(34, 197, 94, 0.4);
	padding-left: 0.85rem;
}

.bee-raffles-winners__rating {
	display: flex;
	gap: 0.15rem;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
}

.bee-raffles-winners__star { color: rgba(245, 245, 245, 0.18); }
.bee-raffles-winners__star.is-on { color: #fbbf24; }