/* ============================================================= Casino hub
 * Self-contained styles for the /juegos/ hub and casino pages.
 * Semantic classes only (the site's compiled Tailwind can't be extended).
 * ========================================================================= */
.casino { --c-accent:#1f9d55; --c-accent-dark:#188045; --c-ink:#1a1a1a; --c-muted:#757575; --c-line:#eaeaea; --c-bg:#f7f7f7; }

/* ---- Hero ---- */
.casino-hero { padding:10px 0 22px; border-bottom:1px solid var(--c-line); margin-bottom:30px; }
.casino-hero__title { font-size:34px; line-height:1.2; font-weight:700; margin:0 0 12px; }
.casino-hero__meta { font-size:13.5px; color:var(--c-muted); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.casino-hero__meta strong { color:var(--c-ink); font-weight:600; }
.casino-hero__sep { opacity:.5; }
.casino-hero__date--updated { color:var(--c-accent-dark); }

/* ---- Article typography ---- */
.casino-content { font-size:16px; line-height:1.7; color:#222; }
.casino-content h2 { font-size:24px; line-height:1.3; font-weight:700; margin:38px 0 14px; }
.casino-content h3 { font-size:19px; line-height:1.35; font-weight:600; margin:26px 0 10px; }
.casino-content p { margin:0 0 16px; }
.casino-content a { color:var(--c-accent-dark); text-decoration:underline; }
.casino-content ul { margin:0 0 18px; padding-left:22px; list-style:disc; }
.casino-content ul li { margin:0 0 7px; }
.casino-content strong { font-weight:600; }
.casino-content img { display:block; max-width:100%; height:auto; margin:22px auto; border-radius:10px; border:1px solid var(--c-line); }
.casino-content p:has(> img) { text-align:center; }

/* ---- Comparison tables from the docx ---- */
.casino-table-wrap { overflow-x:auto; margin:0 0 22px; -webkit-overflow-scrolling:touch; }
.casino-table-wrap .casino-table { border-collapse:collapse; width:100%; min-width:560px; font-size:14px; }
.casino-table-wrap .casino-table th, .casino-table-wrap .casino-table td { border:1px solid #dcdcdc; padding:9px 12px; text-align:left; vertical-align:top; }
.casino-table-wrap .casino-table th { background:var(--c-bg); font-weight:600; }
.casino-table-wrap .casino-table tr:nth-child(even) td { background:#fafafa; }

/* ============================================================= Casino listing
 * Top-3 grid + table layout (mirrors the reference design). Purple accent.
 * ========================================================================= */
.casino-list-section { --brand:#7c74ff; --brand-dark:#5b52e0; margin:26px 0 36px; }
.casino-list-title { font-size:22px; font-weight:700; margin:0 0 18px; }

/* shared brand bits */
.casino-rank { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px;
	background:var(--brand); color:#fff; font-weight:800; font-size:15px; border-radius:8px; }
.casino-logo-img { display:block; width:70px; height:47px; object-fit:contain; border-radius:8px; background:#fff; }
.casino-name { margin:0 0 5px; font-size:15px; font-weight:700; }
.casino-name a { color:var(--c-ink) !important; text-decoration:none !important; }
.rating-stars { display:flex; align-items:center; gap:8px; }
.stars-box { display:inline-block; }
.stars-background { position:relative; display:inline-block; width:82px; height:15px;
	background:linear-gradient(90deg,#ddd 0 100%); -webkit-mask:repeating-linear-gradient(90deg,#000 0 13px,transparent 13px 16.4px); mask:repeating-linear-gradient(90deg,#000 0 13px,transparent 13px 16.4px); }
.stars-fill { position:absolute; left:0; top:0; height:100%; background:#f5a623; }
.rating-score { font-size:14px; font-weight:800; color:var(--brand-dark); }
.bonus-text { font-size:14.5px; font-weight:700; margin:0 0 8px; line-height:1.35; }
.bonus-features { display:flex; flex-direction:column; gap:4px; }
.bonus-features .feature { font-size:12px; color:#555; padding-left:16px; position:relative; }
.bonus-features .feature::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700; }
.bonus-btn, .btn-primary {
	display:inline-block; background:var(--brand) !important; color:#fff !important; text-decoration:none !important;
	font-weight:800; font-size:14px; padding:12px 20px; border-radius:10px; transition:background .2s; white-space:nowrap; text-align:center;
}
.bonus-btn:hover { background:var(--brand-dark) !important; }
.casino-stats { display:flex; gap:14px; }
.stat-item { display:flex; flex-direction:column; }
.stat-label { font-size:11px; color:var(--c-muted); text-transform:uppercase; letter-spacing:.02em; }
.stat-value { font-size:15px; font-weight:800; color:var(--c-ink); }
.payment-icons { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.payment-icon img { height:22px; width:auto; display:block; }
.payment-more { font-size:12px; font-weight:700; color:var(--c-muted); }

/* top-3 grid */
.top-casinos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.casino-card { position:relative; border:1px solid var(--c-line); border-radius:16px; background:#fff;
	box-shadow:0 2px 10px rgba(0,0,0,.05); padding:18px; transition:transform .2s, box-shadow .2s; }
.casino-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(124,116,255,.16); }
.casino-card-header { position:absolute; top:-10px; left:18px; }
.casino-card-main { display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.casino-logo-section { display:flex; align-items:center; gap:12px; }
.casino-card .casino-actions { text-align:center; }
.casino-card .bonus-btn { display:block; }
.casino-card .casino-stats { justify-content:center; }
.casino-card .payment-methods { display:flex; justify-content:center; }

/* table for 4+ */
.casino-table-section { border:1px solid var(--c-line); border-radius:16px; overflow:hidden; }
.casino-table-section .casino-table, .casino-table-section .table-body { display:block; }
.casino-table-section .table-row { display:grid; grid-template-columns:44px 190px 1fr 150px auto auto; align-items:center; gap:16px;
	padding:16px 18px; border-bottom:1px solid var(--c-line); }
.casino-table-section .table-row:last-child { border-bottom:0; }
.casino-table-section .table-row:nth-child(even) { background:#fafaff; }
.table-cell.logo-cell { display:flex; align-items:center; gap:10px; }
.table-cell.action-cell .bonus-btn { display:block; }

@media (max-width:900px){
	.top-casinos-grid { grid-template-columns:1fr; }
	/* Stack listing rows with flex (avoids CSS-grid min-content overflow). */
	.casino-card, .casino-card-main, .casino-logo-section, .casino-bonus, .casino-actions,
	.casino-stats, .payment-methods, .payment-icons,
	.casino-table-section .table-row, .casino-table-section .table-cell { min-width:0; }
	.casino-table-section .table-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
	.casino-table-section .table-cell { width:100%; }
	.casino-table-section .table-cell.rank-cell { width:auto; }
	.casino-table-section .table-cell.logo-cell { flex-direction:row; align-items:center; gap:10px; }
	.bonus-btn, .btn-primary { display:block; width:100%; white-space:normal; }
	.bonus-text, .bonus-features .feature, .casino-name, .casino-name a { overflow-wrap:anywhere; }
	.payment-icons { flex-wrap:wrap; }
	.casino-stats { justify-content:flex-start; }
	.casino-table-wrap { max-width:100%; }
}

/* ---- FAQ accordion ---- */
.casino-faq { margin:34px 0; }
.casino-faq__title { font-size:24px; font-weight:700; margin:0 0 16px; }
.casino-faq__item { border-bottom:1px solid var(--c-line); }
.casino-faq__q {
	width:100%; background:none; border:0; cursor:pointer; text-align:left;
	display:flex; justify-content:space-between; align-items:center; gap:16px;
	padding:16px 2px; font-size:16.5px; font-weight:600; color:var(--c-ink); font-family:inherit;
}
.casino-faq__icon { font-size:22px; color:var(--c-muted); transition:transform .2s; flex:0 0 auto; }
.casino-faq__q.is-open .casino-faq__icon { transform:rotate(45deg); }
.casino-faq__a { padding:0 2px 18px; font-size:15.5px; line-height:1.7; color:#333; }
.casino-faq__a p { margin:0 0 10px; }

/* ---- Hub grid ---- */
.casino-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:50px; }
@media (max-width:900px){ .casino-grid { grid-template-columns:1fr; } }
.casino-tile {
	display:flex; flex-direction:column; border:1px solid var(--c-line); border-radius:14px; overflow:hidden;
	text-decoration:none !important; color:var(--c-ink); background:#fff; transition:box-shadow .2s, transform .2s;
}
.casino-tile:hover { box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.casino-tile__media { display:block; aspect-ratio:16/9; background:#111; overflow:hidden; }
.casino-tile__media img { width:100%; height:100%; object-fit:cover; display:block; }
.casino-tile__box { display:flex; flex-direction:column; flex:1; padding:18px 20px 20px; }
.casino-tile__title { font-size:18px; font-weight:700; line-height:1.3; margin:0 0 12px; }
.casino-tile__meta { font-size:12px; color:var(--c-muted); margin:0 0 10px auto; }
.casino-tile__cta { font-size:14px; font-weight:700; color:var(--c-accent-dark); }

/* ---- Author box + author page ---- */
.casino-author {
	display:flex; gap:20px; align-items:flex-start; margin:34px 0 10px;
	border:1px solid var(--c-line); border-radius:16px; padding:22px; background:var(--c-bg);
}
.casino-author__photo { flex:0 0 auto; }
.casino-author__photo img { width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; }
.casino-author__kicker { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); margin:0 0 3px; }
.casino-author__name { font-size:20px; font-weight:700; margin:0 0 3px; }
.casino-author__name a { color:var(--c-ink) !important; text-decoration:none !important; }
.casino-author__name a:hover { text-decoration:underline !important; }
.casino-author__role { font-size:13px; color:var(--c-accent-dark); font-weight:600; margin:0 0 10px; }
.casino-author__bio { font-size:14.5px; line-height:1.6; color:#444; margin:0 0 10px; }
.casino-author__link { font-size:14px; font-weight:700; color:var(--c-accent-dark); text-decoration:none; }
@media (max-width:600px){ .casino-author { flex-direction:column; } }

.casino-author-hero { border-bottom:1px solid var(--c-line); padding:10px 0 26px; margin-bottom:26px; }
.casino-author-hero__inner { display:flex; gap:26px; align-items:center; }
.casino-author-hero__photo { width:140px; height:140px; border-radius:50%; object-fit:cover; }
.casino-author-hero__name { font-size:34px; font-weight:700; line-height:1.15; margin:2px 0; }
.casino-author-hero__role { font-size:15px; color:var(--c-accent-dark); font-weight:600; margin:0; }
.casino-author-bio { font-size:16px; line-height:1.75; color:#222; padding-bottom:20px; }
.casino-author-bio p { margin:0 0 16px; }
.casino-author-guides__title { font-size:22px; font-weight:700; margin:20px 0 18px; }
@media (max-width:600px){ .casino-author-hero__inner { flex-direction:column; text-align:center; } }