/* CartolaNews Boxe Hub — all rules scoped under .cnboxe-wrap.
 * Theme-aware: LIGHT is the default look (matches every other page on the
 * site and the reference mockup); dark tokens only apply when the site's own
 * dark-mode toggle is on — Foxiz stamps body[data-theme="dark"], no page
 * reload needed. Brand accent colors (blue/red) stay constant across both
 * themes — only surface/text/border/shadow tokens change. Never touches
 * body/html/.site-header/footer — everything lives inside .cnboxe-wrap. */

.cnboxe-wrap, .cnboxe-wrap-outer {
	font-family: "Inter", Roboto, Arial, sans-serif;
	--cnboxe-primary: #144b9b;
	--cnboxe-primary-light: #7494c4;
	--cnboxe-primary-soft: #849cc4;
	--cnboxe-accent: #dc2626;
	--cnboxe-green: #16a34a;
	--cnboxe-gold: #d4a017;
	--cnboxe-radius: 14px;
	/* Light theme tokens (default) */
	--cnboxe-bg: #f3f5fa;
	--cnboxe-bg-2: #eaeef6;
	--cnboxe-card: #ffffff;
	--cnboxe-card-hover: #f5f7fb;
	--cnboxe-border: rgba(16,24,40,.10);
	--cnboxe-text: #101828;
	--cnboxe-muted: #5b6b82;
	--cnboxe-faint: #97a3b5;
	--cnboxe-shadow: 0 4px 16px rgba(16,24,40,.06);
	--cnboxe-accent-text: var(--cnboxe-primary);
}
body[data-theme="dark"] .cnboxe-wrap, body[data-theme="dark"] .cnboxe-wrap-outer {
	--cnboxe-bg: #0c1420;
	--cnboxe-bg-2: #0a1119;
	--cnboxe-card: #121c2b;
	--cnboxe-card-hover: #17233590;
	--cnboxe-border: rgba(116,148,196,.20);
	--cnboxe-text: #f5f7fa;
	--cnboxe-muted: #9eabb9;
	--cnboxe-faint: #6f8098;
	--cnboxe-shadow: none;
	--cnboxe-accent-text: var(--cnboxe-primary-light);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cnboxe-wrap,
	:root:not([data-theme="light"]) .cnboxe-wrap-outer {
		--cnboxe-bg: #0c1420;
		--cnboxe-bg-2: #0a1119;
		--cnboxe-card: #121c2b;
		--cnboxe-card-hover: #17233590;
		--cnboxe-border: rgba(116,148,196,.20);
		--cnboxe-text: #f5f7fa;
		--cnboxe-muted: #9eabb9;
		--cnboxe-faint: #6f8098;
		--cnboxe-shadow: none;
		--cnboxe-accent-text: var(--cnboxe-primary-light);
	}
}

.cnboxe-wrap, .cnboxe-wrap-outer { max-width: 100%; min-width: 0; }
.cnboxe-wrap { background: var(--cnboxe-bg); color: var(--cnboxe-text); position: relative; overflow-x: hidden; }
.cnboxe-wrap * { box-sizing: border-box; }
.cnboxe-hero-inner, .cnboxe-events-grid, .cnboxe-events-grid > *, .cnboxe-brazilians-grid, .cnboxe-brazilians-grid > *,
.cnboxe-champions-grid > *, .cnboxe-org-grid > *, .cnboxe-legends-grid > *, .cnboxe-calendar-news-grid > *,
.cnboxe-news-grid, .cnboxe-news-grid > *, .cnboxe-brazil-columns > *, .cnboxe-historic-grid > *,
.cnboxe-faq-grid > *, .cnboxe-filters, .cnboxe-card, .cnboxe-section { min-width: 0; }
.cnboxe-wrap a { color: inherit; text-decoration: none; }
.cnboxe-wrap img { max-width: 100%; height: auto; display: block; }
.cnboxe-wrap button { font-family: inherit; }
.cnboxe-wrap h1, .cnboxe-wrap h2, .cnboxe-wrap h3, .cnboxe-wrap p { margin: 0; }
.cnboxe-container { max-width: 1340px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 1024px) { .cnboxe-container { padding: 0 20px; } }
@media (max-width: 600px) { .cnboxe-container { padding: 0 14px; } }

.cnboxe-section { padding: 40px 0; max-width: 1340px; margin: 0 auto; }
@media (max-width: 600px) { .cnboxe-section { padding: 28px 0; } }
.cnboxe-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cnboxe-title-bar { display: inline-block; width: 5px; height: 20px; background: var(--cnboxe-primary); border-radius: 3px; margin-right: 10px; vertical-align: -3px; }
.cnboxe-section-title { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.cnboxe-section-title-sm { font-size: 15px; }
.cnboxe-section-subtitle { color: var(--cnboxe-muted); font-size: 13px; margin-top: 4px; }
.cnboxe-wrap .cnboxe-link-small { font-size: 13px; color: var(--cnboxe-accent-text); background: none; border: none; cursor: pointer; padding: 0; }
.cnboxe-link-small:hover { text-decoration: underline; }
.cnboxe-empty-state { color: var(--cnboxe-muted); font-size: 14px; padding: 8px 0; }
.cnboxe-source-note { color: var(--cnboxe-faint); font-size: 12px; margin-top: 6px; }
.cnboxe-admin-only-link { display: none; }

.cnboxe-card { background: var(--cnboxe-card); border: 1px solid var(--cnboxe-border); box-shadow: var(--cnboxe-shadow); border-radius: var(--cnboxe-radius); padding: 20px; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.cnboxe-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ---------------------------------------------------------------- Buttons/chips */
.cnboxe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; cursor: pointer; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease; }
.cnboxe-wrap .cnboxe-btn-primary { background: var(--cnboxe-primary); color: #fff; }
.cnboxe-btn-primary:hover { background: #1a5bb8; transform: translateY(-1px); }
.cnboxe-wrap .cnboxe-btn-outline { background: transparent; color: var(--cnboxe-text); border-color: var(--cnboxe-border); }
.cnboxe-btn-outline:hover { border-color: var(--cnboxe-primary-light); background: rgba(116,148,196,.08); }
.cnboxe-btn-small { padding: 6px 12px; font-size: 11px; }

.cnboxe-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: thin; }
.cnboxe-chip { flex: 0 0 auto; background: transparent; border: 1px solid var(--cnboxe-border); color: var(--cnboxe-muted); border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: all 150ms ease; white-space: nowrap; }
.cnboxe-chip:hover { border-color: var(--cnboxe-primary-light); color: var(--cnboxe-text); }
.cnboxe-chip.is-active { background: var(--cnboxe-primary); border-color: var(--cnboxe-primary); color: #fff; }

.cnboxe-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cnboxe-accent); box-shadow: 0 0 0 0 rgba(220,38,38,.6); animation: cnboxe-pulse 1.6s infinite; }
@keyframes cnboxe-pulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 70% { box-shadow: 0 0 0 8px rgba(220,38,38,0); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); } }
.cnboxe-live-badge-small { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cnboxe-accent); background: rgba(220,38,38,.12); padding: 4px 8px; border-radius: 999px; }
.cnboxe-status-chip { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cnboxe-muted); background: var(--cnboxe-bg-2); padding: 4px 8px; border-radius: 999px; }

/* ---------------------------------------------------------------- Hero
 * Two distinct looks: with a real photo (.has-image), text/pills are always
 * light-on-dark-scrim regardless of site theme (a full-bleed photo needs a
 * dark overlay for legibility no matter what — same convention as every
 * other hub plugin's photo hero). Without a photo yet (.no-image — the
 * default state before an admin uploads one), the section must NOT hardcode
 * a fixed dark background/white text: it follows the page's own light/dark
 * tokens like every other section, or it looks permanently "stuck dark"
 * even when the site's light mode is active. */
.cnboxe-hero { position: relative; padding: 90px 0 64px; overflow: hidden; min-height: 480px; display: flex; align-items: flex-end; }
.cnboxe-hero.no-image { background: radial-gradient(ellipse at 20% 10%, rgba(20,75,155,.20) 0%, transparent 55%), linear-gradient(180deg, var(--cnboxe-bg) 0%, var(--cnboxe-bg-2) 100%); }
.cnboxe-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,10,20,.35) 0%, rgba(5,10,20,.55) 55%, rgba(5,10,20,.88) 100%); }
.cnboxe-hero.has-image::after { content: ""; position: absolute; inset: 0 0 0 0; z-index: 1; background: radial-gradient(ellipse at 15% 30%, rgba(20,75,155,.25) 0%, transparent 60%); }
.cnboxe-hero.has-image .cnboxe-hero-left { --cnboxe-text: #ffffff; --cnboxe-muted: #d7e0ee; }
.cnboxe-hero-media { position: absolute; inset: 0; z-index: 0; }
.cnboxe-hero-media picture { display: block; width: 100%; height: 100%; }
.cnboxe-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cnboxe-hero-pos-desktop, center center); }
.cnboxe-hero-inner { position: relative; z-index: 2; }
.cnboxe-hero-kicker { font-size: clamp(44px, 7vw, 84px); font-weight: 900; line-height: .92; letter-spacing: -.02em; color: var(--cnboxe-text); }
.cnboxe-hero-desc { color: var(--cnboxe-muted); margin-top: 14px; max-width: 560px; line-height: 1.5; font-size: 15px; }
.cnboxe-hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 640px) { .cnboxe-hero-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 26px -14px 0; padding: 0 14px; } .cnboxe-hero-pills::-webkit-scrollbar { display: none; } }
.cnboxe-wrap .cnboxe-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--cnboxe-bg-2); border: 1px solid var(--cnboxe-border); color: var(--cnboxe-text); backdrop-filter: blur(4px); transition: background 150ms ease, transform 150ms ease; }
.cnboxe-pill .dashicons { font-size: 16px; width: 16px; height: 16px; }
.cnboxe-pill:hover { background: var(--cnboxe-card-hover); transform: translateY(-1px); }
.cnboxe-wrap .cnboxe-pill.is-active { background: var(--cnboxe-primary); border-color: var(--cnboxe-primary); color: #fff; }
/* Photo hero: pills sit on the dark scrim, so they always use the light-glass style regardless of site theme. */
.cnboxe-wrap .cnboxe-hero.has-image .cnboxe-pill { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); color: #fff; }
.cnboxe-hero.has-image .cnboxe-pill:hover { background: rgba(255,255,255,.18); }
.cnboxe-wrap .cnboxe-hero.has-image .cnboxe-pill.is-active { background: var(--cnboxe-primary); border-color: var(--cnboxe-primary); color: #fff; }
@media (max-width: 960px) { .cnboxe-hero { padding: 70px 0 44px; min-height: 380px; } }
@media (max-width: 640px) { .cnboxe-hero-media img { object-position: var(--cnboxe-hero-pos-mobile, center center); } .cnboxe-hero { min-height: 420px; } }

/* ---------------------------------------------------------------- Fighter photo / flag */
.cnboxe-photo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--cnboxe-bg-2); border: 2px solid var(--cnboxe-border); flex-shrink: 0; width: 56px; height: 56px; }
.cnboxe-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cnboxe-photo.cnboxe-no-photo { flex-direction: column; justify-content: flex-end; align-items: center; }
.cnboxe-photo.cnboxe-no-photo::before { content: ""; width: 38%; height: 38%; border-radius: 50%; background: var(--cnboxe-faint); display: block; }
.cnboxe-photo.cnboxe-no-photo::after { content: ""; width: 78%; height: 40%; border-radius: 50% 50% 0 0; background: var(--cnboxe-faint); display: block; }

/* ---------------------------------------------------------------- Próximos Eventos */
.cnboxe-events-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1199px) and (min-width: 768px) { .cnboxe-events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .cnboxe-events-grid { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; grid-template-columns: none; } .cnboxe-events-grid > * { scroll-snap-align: start; } }
.cnboxe-event-card { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cnboxe-event-card.is-live { border-color: var(--cnboxe-accent); }
.cnboxe-event-card.is-muted { opacity: .65; }
.cnboxe-fav-star { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: var(--cnboxe-faint); padding: 2px; }
.cnboxe-fav-star:hover, .cnboxe-fav-star[aria-pressed="true"] { color: var(--cnboxe-gold); }
.cnboxe-fav-star[aria-pressed="true"] .dashicons:before { content: "\f155"; }
.cnboxe-event-card-top { display: flex; align-items: center; gap: 12px; }
.cnboxe-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background: var(--cnboxe-primary); color: #fff; flex-shrink: 0; }
.cnboxe-event-day { font-size: 18px; font-weight: 800; line-height: 1; }
.cnboxe-event-month { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.cnboxe-event-when { font-size: 13px; color: var(--cnboxe-muted); font-weight: 600; }
.cnboxe-matchup { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cnboxe-matchup-fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; text-align: center; }
.cnboxe-matchup-name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.cnboxe-matchup-record { font-size: 11px; color: var(--cnboxe-muted); }
.cnboxe-matchup-vs { font-size: 12px; font-weight: 800; color: var(--cnboxe-faint); flex-shrink: 0; }
.cnboxe-live-round { font-size: 12px; font-weight: 700; color: var(--cnboxe-accent); text-align: center; }
.cnboxe-event-meta-line { font-size: 12px; color: var(--cnboxe-muted); }
.cnboxe-title-tag { color: var(--cnboxe-gold); font-weight: 700; }
.cnboxe-event-broadcast, .cnboxe-event-location { font-size: 12px; color: var(--cnboxe-muted); display: flex; align-items: center; gap: 6px; }
.cnboxe-event-broadcast .dashicons, .cnboxe-event-location .dashicons { font-size: 15px; width: 15px; height: 15px; }
.cnboxe-event-result { font-size: 12px; font-weight: 700; color: var(--cnboxe-text); background: var(--cnboxe-bg-2); padding: 6px 10px; border-radius: 8px; }

/* ---------------------------------------------------------------- Brasileiros em Destaque */
.cnboxe-brazilians-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1199px) and (min-width: 992px) { .cnboxe-brazilians-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px) and (min-width: 768px) { .cnboxe-brazilians-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .cnboxe-brazilians-grid { grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; grid-template-columns: none; } .cnboxe-brazilians-grid > * { scroll-snap-align: start; } }
.cnboxe-fighter-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cnboxe-fighter-card-photo-wrap { position: relative; margin-bottom: 8px; }
.cnboxe-fighter-card-photo-wrap .cnboxe-photo { width: 84px; height: 84px; }
.cnboxe-flag-badge { position: absolute; bottom: -2px; right: -2px; font-size: 20px; background: var(--cnboxe-card); border-radius: 50%; line-height: 1; padding: 2px; box-shadow: var(--cnboxe-shadow); }
.cnboxe-fighter-card-name { font-weight: 700; font-size: 14px; }
.cnboxe-fighter-card-division { font-size: 12px; color: var(--cnboxe-muted); }
.cnboxe-fighter-card-record { font-size: 12px; color: var(--cnboxe-text); font-weight: 600; }
.cnboxe-fighter-card-rank { font-size: 11px; color: var(--cnboxe-accent-text); font-weight: 700; }
.cnboxe-fighter-card-next { font-size: 11px; color: var(--cnboxe-faint); margin-top: 2px; }

/* ---------------------------------------------------------------- Campeões e Rankings */
.cnboxe-champions-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 991px) { .cnboxe-champions-grid { grid-template-columns: 1fr; } }
.cnboxe-p4p-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cnboxe-p4p-table th { text-align: left; color: var(--cnboxe-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--cnboxe-border); }
.cnboxe-p4p-table td { padding: 8px; border-bottom: 1px solid var(--cnboxe-border); }
.cnboxe-p4p-table tr:last-child td { border-bottom: none; }
.cnboxe-btn-link { margin-top: 12px; display: inline-block; }
.cnboxe-org-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 480px) { .cnboxe-org-grid { grid-template-columns: 1fr; } }
.cnboxe-org-card { text-align: center; background: var(--cnboxe-bg-2); border-radius: 10px; padding: 16px 10px; }
.cnboxe-org-name { font-weight: 800; font-size: 15px; color: var(--cnboxe-accent-text); }
.cnboxe-org-belt { width: 48px; height: 48px; object-fit: contain; margin: 8px auto; }
.cnboxe-org-champion { font-weight: 700; font-size: 13px; margin-top: 6px; }
.cnboxe-org-division { font-size: 11px; color: var(--cnboxe-muted); }
.cnboxe-org-record { font-size: 11px; color: var(--cnboxe-faint); }
.cnboxe-full-rankings { margin-top: 24px; border-top: 1px solid var(--cnboxe-border); padding-top: 20px; }
.cnboxe-ranking-selectors { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.cnboxe-ranking-selectors label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--cnboxe-muted); text-transform: uppercase; }
.cnboxe-ranking-selectors select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--cnboxe-border); background: var(--cnboxe-card); color: var(--cnboxe-text); }

/* ---------------------------------------------------------------- Categorias de Peso */
.cnboxe-divisions-wrap { display: flex; align-items: center; gap: 10px; }
.cnboxe-divisions-scroller { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0; flex: 1; }
.cnboxe-divisions-scroller::-webkit-scrollbar { display: none; }
.cnboxe-division-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--cnboxe-card); border: 1px solid var(--cnboxe-border); border-radius: 12px; padding: 14px 18px; min-width: 130px; text-align: center; box-shadow: var(--cnboxe-shadow); }
.cnboxe-division-icon { font-size: 20px; }
.cnboxe-division-name { font-weight: 700; font-size: 12px; }
.cnboxe-division-limit { font-size: 11px; color: var(--cnboxe-muted); }
.cnboxe-scroll-arrow { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cnboxe-border); background: var(--cnboxe-card); color: var(--cnboxe-text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cnboxe-scroll-arrow:hover { border-color: var(--cnboxe-primary-light); }
@media (max-width: 767px) { .cnboxe-scroll-arrow-left, .cnboxe-scroll-arrow-right { display: none; } }

/* ---------------------------------------------------------------- Lendas */
.cnboxe-legends-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 1199px) and (min-width: 992px) { .cnboxe-legends-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 991px) and (min-width: 768px) { .cnboxe-legends-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .cnboxe-legends-grid { grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; grid-template-columns: none; } .cnboxe-legends-grid > * { scroll-snap-align: start; } }
.cnboxe-legend-card { text-align: center; padding: 14px; }
/* Overrides the base .cnboxe-photo's fixed height:56px — without resetting it to auto,
 * aspect-ratio:1 below never takes effect (a fixed height always wins over aspect-ratio),
 * which squashed every legend photo into a short 56px-tall strip and cropped out most of
 * the face. object-position stays "top center" (inherited from .cnboxe-photo img) so the
 * visible crop favors the head, not an arbitrary center point. */
.cnboxe-legend-photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; margin: 0 auto 8px; }
.cnboxe-legend-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cnboxe-legend-name { font-weight: 700; font-size: 13px; }
.cnboxe-legend-years, .cnboxe-legend-meta { font-size: 11px; color: var(--cnboxe-muted); }

/* ---------------------------------------------------------------- Calendário + Notícias */
.cnboxe-calendar-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; padding: 40px 0; max-width: 1340px; margin: 0 auto; }
@media (max-width: 991px) { .cnboxe-calendar-news-grid { grid-template-columns: 1fr; } }
.cnboxe-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cnboxe-calendar-month-label { font-weight: 700; text-transform: capitalize; }
.cnboxe-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; color: var(--cnboxe-faint); font-weight: 700; margin-bottom: 4px; }
.cnboxe-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cnboxe-cal-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 8px; cursor: default; color: var(--cnboxe-text); }
.cnboxe-cal-day.is-outside { color: var(--cnboxe-faint); opacity: .4; }
.cnboxe-cal-day.is-today { border: 1px solid var(--cnboxe-primary); font-weight: 700; }
.cnboxe-cal-day.has-event { background: rgba(20,75,155,.10); cursor: pointer; font-weight: 700; }
.cnboxe-cal-day.has-event:hover { background: rgba(20,75,155,.2); }
.cnboxe-cal-day.has-brazil::after { content: ""; position: absolute; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--cnboxe-green); }
.cnboxe-calendar-legend { display: flex; gap: 16px; font-size: 11px; color: var(--cnboxe-muted); margin-top: 10px; }
.cnboxe-cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.cnboxe-cal-dot-event { background: var(--cnboxe-primary); }
.cnboxe-cal-dot-brazil { background: var(--cnboxe-green); }
.cnboxe-calendar-selected { margin-top: 14px; border-top: 1px solid var(--cnboxe-border); padding-top: 12px; font-size: 13px; }
.cnboxe-calendar-selected-item { display: flex; justify-content: space-between; padding: 4px 0; }

.cnboxe-news-grid { display: flex; flex-direction: column; gap: 12px; }
.cnboxe-news-item { display: flex; gap: 12px; align-items: center; }
.cnboxe-news-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cnboxe-news-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--cnboxe-bg-2); color: var(--cnboxe-faint); }
.cnboxe-news-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cnboxe-news-title { font-weight: 700; font-size: 13px; line-height: 1.3; }
.cnboxe-news-date { font-size: 11px; color: var(--cnboxe-faint); }

/* ---------------------------------------------------------------- História (timeline) */
.cnboxe-timeline { position: relative; padding-left: 24px; border-left: 2px solid var(--cnboxe-border); display: flex; flex-direction: column; gap: 28px; }
.cnboxe-timeline-item { position: relative; }
.cnboxe-timeline-marker { position: absolute; left: -30px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--cnboxe-primary); border: 3px solid var(--cnboxe-bg); }
.cnboxe-timeline-photo { border-radius: 10px; margin-bottom: 10px; max-width: 320px; }
.cnboxe-timeline-period { font-size: 12px; font-weight: 700; color: var(--cnboxe-accent-text); text-transform: uppercase; }
.cnboxe-timeline-title { font-size: 17px; font-weight: 800; margin-top: 4px; }
.cnboxe-timeline-desc { color: var(--cnboxe-muted); font-size: 14px; line-height: 1.6; margin-top: 8px; }
.cnboxe-timeline-desc p { margin: 0 0 10px; }

/* ---------------------------------------------------------------- Boxe Brasileiro */
.cnboxe-brazil-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 767px) { .cnboxe-brazil-columns { grid-template-columns: 1fr; } }
.cnboxe-simple-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cnboxe-simple-list li { padding-bottom: 8px; border-bottom: 1px solid var(--cnboxe-border); }
.cnboxe-simple-list li:last-child { border-bottom: none; }

/* ---------------------------------------------------------------- Grandes Lutas */
.cnboxe-historic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 991px) { .cnboxe-historic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cnboxe-historic-grid { grid-template-columns: 1fr; } }
.cnboxe-historic-card { position: relative; border-radius: var(--cnboxe-radius); overflow: hidden; min-height: 220px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: var(--cnboxe-bg-2); border: 1px solid var(--cnboxe-border); }
.cnboxe-historic-card.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5,10,20,.85) 100%); }
.cnboxe-historic-card-body { position: relative; z-index: 1; padding: 18px; width: 100%; }
.cnboxe-historic-card.has-image .cnboxe-historic-card-body { color: #fff; }
.cnboxe-historic-matchup { font-weight: 800; font-size: 15px; }
.cnboxe-historic-date { font-size: 12px; opacity: .85; margin: 4px 0 10px; }

/* ---------------------------------------------------------------- Entenda o Boxe */
.cnboxe-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 767px) { .cnboxe-faq-grid { grid-template-columns: 1fr; } }
.cnboxe-faq-card { background: var(--cnboxe-card); border: 1px solid var(--cnboxe-border); border-radius: 10px; padding: 14px 16px; }
.cnboxe-faq-question { font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.cnboxe-faq-question::-webkit-details-marker { display: none; }
.cnboxe-faq-question::before { content: "+ "; color: var(--cnboxe-accent-text); font-weight: 800; }
.cnboxe-faq-card[open] .cnboxe-faq-question::before { content: "– "; }
.cnboxe-faq-answer { font-size: 13px; color: var(--cnboxe-muted); margin-top: 8px; line-height: 1.5; }

/* ---------------------------------------------------------------- Accessibility */
.cnboxe-wrap a:focus-visible, .cnboxe-wrap button:focus-visible, .cnboxe-wrap select:focus-visible { outline: 2px solid var(--cnboxe-primary); outline-offset: 2px; }