/* Identidad institucional compartida con inconfin.com · 2026-08-22 */
:root {
  --brand-navy: #0b234a;
  --brand-deep: #061632;
  --brand-blue: #163a70;
  --brand-red: #df1f3f;
  --brand-red-dark: #b71430;
  --brand-gold: #b99646;
  --brand-teal: #118a78;
  --brand-cloud: #f3f6fa;
  --brand-line: #dce3ec;
  --brand-pink: #ffbdc9;
}

/* La firma visual se reconoce desde el primer vistazo. */
.topbar,
.kids-topbar {
  color: white;
  background:
    radial-gradient(circle at 88% -40%, rgba(185, 150, 70, .24), transparent 36%),
    linear-gradient(108deg, var(--brand-deep), var(--brand-navy) 58%, var(--brand-blue)) !important;
  border-bottom-color: var(--brand-gold) !important;
}
.topbar::after,
.kids-topbar::after {
  background: linear-gradient(90deg, var(--brand-red) 0 34%, var(--brand-gold) 34% 67%, #fff 67% 100%) !important;
}
.brand-mark i,
.kids-brand-mark i { opacity: 1 !important; box-shadow: none !important; }
.brand-mark i:nth-child(1),
.kids-brand-mark i:nth-child(1) { background: var(--brand-gold) !important; }
.brand-mark i:nth-child(2),
.kids-brand-mark i:nth-child(2) { background: #fff !important; }
.brand-mark i:nth-child(3),
.kids-brand-mark i:nth-child(3) { background: var(--brand-red) !important; box-shadow: 0 0 18px rgba(223, 31, 63, .36) !important; }
.brand-copy small,
.kids-brand small { color: rgba(255,255,255,.7) !important; }

.audience-switch {
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
.audience-switch a:hover,
.audience-switch a:focus-visible { color: white !important; background: var(--brand-red) !important; }
.audience-switch a:hover small,
.audience-switch a:focus-visible small { color: rgba(255,255,255,.72) !important; }
.audience-switch a[aria-current="page"] {
  color: var(--brand-navy) !important;
  border-color: rgba(185,150,70,.75) !important;
  background: white !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.17), inset 0 -4px 0 var(--brand-red) !important;
}
.audience-switch a[aria-current="page"] small { color: var(--brand-red-dark) !important; }

.creator-ribbon {
  color: white !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
  background: linear-gradient(92deg, var(--brand-red-dark), var(--brand-red) 58%, #c84259) !important;
}
.creator-ribbon span { color: #ffdce2; }

.primary-button,
.kids-primary-button { color: white !important; background: var(--brand-red) !important; box-shadow: 0 13px 30px rgba(223,31,63,.24) !important; }
.primary-button:hover,
.kids-primary-button:hover { background: var(--brand-red-dark) !important; }
.secondary-button,
.kids-secondary-button { border-color: rgba(255,255,255,.32) !important; }
.section-kicker,
.eyebrow { color: var(--brand-red) !important; }
.kids-hero .hero-kicker,
.kids-moon-mission .section-kicker,
.curiosity-deck .section-kicker,
.game-stage .section-kicker,
.football-hero .section-kicker { color: var(--brand-pink) !important; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible { outline-color: rgba(223,31,63,.42) !important; }

/* Adultos: interfaz del atlas y módulos temáticos. */
.map-toolbar,
.filter-card h2,
.period-row.is-active,
.map-panel-action:hover,
.map-panel-action[aria-expanded="true"] { border-color: rgba(185,150,70,.42) !important; }
.map-toolbar .map-zoom-button:hover,
.map-toolbar .map-action:hover,
.map-toolbar .map-action[aria-expanded="true"],
.map-toolbar .map-action[aria-pressed="true"],
.map-zoom-button:hover:not(:disabled),
.map-action.is-active { color: white !important; background: var(--brand-red) !important; }
.map-toolbar .map-zoom-controls output,
.map-axis span,
.map-tooltip em { color: var(--brand-pink) !important; }
.mission-dock,
.atlas-footer { background: linear-gradient(110deg, var(--brand-deep), var(--brand-navy) 58%, var(--brand-blue)) !important; }
.mission-dock > header span { color: var(--brand-pink) !important; }
.mission-destination > span { color: var(--brand-red) !important; background: rgba(223,31,63,.14) !important; }
.mission-destination.is-active { border-color: var(--brand-gold) !important; background: linear-gradient(135deg, #d3b362, #f0d88f) !important; }
.atlas-footer nav a { color: white !important; background: var(--brand-red) !important; }
.atlas-footer nav a:last-child { color: var(--brand-navy) !important; background: #e5cd8b !important; }

/* Países y fútbol heredan la misma identidad. */
.country-atlas-header,
.football-hero,
.football-footer {
  background:
    radial-gradient(circle at 86% 0, rgba(185,150,70,.22), transparent 30%),
    linear-gradient(120deg, var(--brand-deep), var(--brand-navy) 58%, var(--brand-blue)) !important;
  border-color: var(--brand-gold) !important;
}
.country-atlas-search span,
.country-atlas-count strong,
.country-card-kicker,
.country-atlas-close:hover,
.football-story-card a,
.football-source-line a,
.football-rights summary,
.football-rights a { color: var(--brand-red-dark) !important; }
.country-continent-filter button[aria-pressed="true"],
.football-story-filters button.is-active,
.football-photo-filters button.is-active { color: white !important; border-color: var(--brand-red) !important; background: var(--brand-red) !important; }
.world-cup-card.is-latest { background: linear-gradient(145deg, var(--brand-blue), var(--brand-deep)) !important; border-color: var(--brand-gold) !important; }

/* Niñas y niños: más energía, sin perder legibilidad ni la identidad oficial. */
body { background-color: #fff; }
.kids-section-links a:hover,
.kids-mobile-nav a:hover { color: white !important; background: var(--brand-red) !important; }
.kids-hero {
  background:
    radial-gradient(circle at 14% 18%, rgba(223,31,63,.18), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(185,150,70,.12), transparent 30%),
    linear-gradient(115deg, var(--brand-deep) 0 43%, var(--brand-navy) 68%, var(--brand-blue)) !important;
}
.kids-hero h1 em,
.hero-kicker span,
.hero-promises span { color: #f0d88f !important; }
.kids-hero-visual::before { background: rgba(223,31,63,.13) !important; }
.curiosity-orbit span { background: rgba(6,22,50,.78) !important; }

.kids-moon-mission,
.curiosity-deck,
.game-stage {
  border-color: rgba(185,150,70,.34) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(223,31,63,.2), transparent 31%),
    radial-gradient(circle at 16% 80%, rgba(185,150,70,.15), transparent 27%),
    linear-gradient(125deg, var(--brand-deep), var(--brand-navy) 62%, var(--brand-blue)) !important;
}
.kids-moon-mission::before { background: linear-gradient(90deg, var(--brand-red), var(--brand-gold), white) !important; }
.moon-fact-controls button { border-color: rgba(255,255,255,.24) !important; }
.moon-fact-controls button[aria-pressed="true"] { color: var(--brand-navy) !important; border-color: var(--brand-gold) !important; background: #f0d88f !important; }
.moon-mission-actions a { color: white !important; background: var(--brand-red) !important; }
.moon-mission-actions a:first-child { color: var(--brand-navy) !important; background: #f0d88f !important; }
.moon-mission-visual::before { border-color: rgba(185,150,70,.46) !important; box-shadow: 0 0 70px rgba(185,150,70,.2) !important; }
.moon-mission-visual figcaption { border-color: rgba(185,150,70,.34) !important; background: rgba(6,22,50,.94) !important; }

.photo-library { background: linear-gradient(145deg, white, var(--brand-cloud) 70%, #faf7f1) !important; }
.photo-library-total,
.curious-passport { background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue)) !important; }
.photo-library-total { box-shadow: inset 0 0 0 4px rgba(185,150,70,.35), 0 18px 38px rgba(6,22,50,.2) !important; }
.photo-search span:first-child,
.photo-card p { color: var(--brand-red-dark) !important; }
.photo-library-tools > button,
.photo-library-actions > button { color: white !important; background: var(--brand-red) !important; }
.photo-collection-strip button[aria-pressed="true"] { border-color: var(--brand-navy) !important; background: var(--brand-navy) !important; }
.photo-collection-strip button[aria-pressed="true"] small { color: var(--brand-pink) !important; }

.game-tabs { border-color: var(--brand-line) !important; background: var(--brand-cloud) !important; }
.game-tabs button { border-radius: 15px !important; }
.game-tabs button > span { color: var(--brand-red); box-shadow: inset 0 0 0 1px var(--brand-line); }
.game-tabs button[aria-selected="true"] { color: white !important; border-color: rgba(185,150,70,.55) !important; background: var(--brand-navy) !important; box-shadow: inset 0 4px 0 var(--brand-red) !important; }
.game-tabs button[aria-selected="true"] small { color: var(--brand-pink) !important; }
.game-tabs button[aria-selected="true"] > span { color: var(--brand-navy) !important; background: #f0d88f !important; }
.game-intro > button { color: white !important; background: var(--brand-red) !important; }
.game-status { border-left-color: var(--brand-red) !important; background: white !important; }
.memory-card,
.timeline-game-board button { border-color: rgba(255,255,255,.22) !important; }
.timeline-game-board button small { color: var(--brand-pink) !important; }
.timeline-answer b { background: var(--brand-red) !important; }
.map-game-orb { border-color: rgba(185,150,70,.5) !important; background: radial-gradient(circle at 35% 28%, #3b6fab, var(--brand-blue) 52%, var(--brand-deep)) !important; box-shadow: inset -28px -22px 48px rgba(0,0,0,.26), 0 0 70px rgba(22,58,112,.28) !important; }

.kids-footer {
  background: linear-gradient(105deg, var(--brand-deep), var(--brand-navy) 62%, var(--brand-blue)) !important;
  border-top-color: var(--brand-gold) !important;
}
.kids-footer nav a { color: white !important; background: var(--brand-red) !important; }
.kids-footer nav a:last-child { color: var(--brand-navy) !important; background: #f0d88f !important; }

@media (max-width: 780px) {
  .kids-hero-copy { background: linear-gradient(135deg, var(--brand-deep), var(--brand-navy)) !important; }
}