/* =============================================
   RETRO — Theme System (Retro / Light / Dark)
   Ciclo do toggle: retrô → claro → escuro → retrô
   Default de marca: sem data-theme = retrô.
   ============================================= */

/* ── Retro theme — default de marca ─────── */

:root,
[data-theme="retro"] {
  --bg:                 #b9d3dc;   /* azul-claro — canvas */
  --surface:            #f2e8d4;   /* creme — cards */
  --surface-2:          #a5c3cd;   /* azul mais escuro — colunas */
  --surface-3:          #e8dcc8;   /* creme escuro — hover/destaque */
  --border:             rgba(44, 36, 24, 0.10);
  --border-strong:      rgba(44, 36, 24, 0.18);
  --accent:             #f8c43f;   /* amarelo retrô — só para fundos interativos */
  --accent-hover:       #ffd058;
  --accent-text:        #2c2418;   /* ink sobre amarelo — ~8.6:1 */
  --accent-bg:          rgba(248, 196, 63, 0.15);
  --accent-border:      rgba(248, 196, 63, 0.30);
  --accent-border-mid:  rgba(248, 196, 63, 0.50);
  --accent-border-str:  rgba(248, 196, 63, 0.70);
  --text:               #2c2418;   /* ink escuro — ~13:1 sobre creme */
  --text-muted:         #4a3c2a;   /* ink médio — ~9:1 sobre creme */
  --text-dim:           #5a4a38;   /* ink claro — ~5:1 sobre creme e bg */
  --dot-color:          rgba(44, 36, 24, 0.05);
  --focus-ring:         rgba(44, 36, 24, 0.35);
}

/* ── Light theme ─────────────────────────── */

[data-theme="light"] {
  --bg:                 #f5f1eb;   /* off-white quente */
  --surface:            #ffffff;
  --surface-2:          #ede9e0;   /* colunas do board */
  --surface-3:          #e4dfd5;
  --border:             rgba(0, 0, 0, 0.08);
  --border-strong:      rgba(0, 0, 0, 0.14);
  --accent:             #0d9488;   /* teal-600 */
  --accent-hover:       #0f766e;
  --accent-text:        #ffffff;
  --accent-bg:          rgba(13, 148, 136, 0.08);
  --accent-border:      rgba(13, 148, 136, 0.22);
  --accent-border-mid:  rgba(13, 148, 136, 0.35);
  --accent-border-str:  rgba(13, 148, 136, 0.55);
  --text:               #292524;   /* stone-800 */
  --text-muted:         #57534e;   /* stone-600 */
  --text-dim:           #78716c;   /* stone-500 */
  --dot-color:          rgba(0, 0, 0, 0.035);
  --focus-ring:         rgba(13, 148, 136, 0.25);
}

/* ── Dark theme ────────────────────────────── */

[data-theme="dark"] {
  --bg:                 #0f1117;
  --surface:            #1c2438;   /* cards — mais claro que colunas */
  --surface-2:          #161c2c;   /* colunas — mais escuro que cards */
  --surface-3:          #1e2d40;   /* hover/destaque — mais claro que cards */
  --border:             rgba(255, 255, 255, 0.07);
  --border-strong:      rgba(255, 255, 255, 0.13);
  --accent:             #14e8c8;
  --accent-hover:       #0fd4b5;
  --accent-text:        #0a0f18;
  --accent-bg:          rgba(20, 232, 200, 0.15);
  --accent-border:      rgba(20, 232, 200, 0.25);
  --accent-border-mid:  rgba(20, 232, 200, 0.35);
  --accent-border-str:  rgba(20, 232, 200, 0.55);
  --text:               #e2e8f0;
  --text-muted:         #94a3b8;
  --text-dim:           #8899b4;   /* contraste ≥ 4.5:1 sobre surfaces dark */
  --dot-color:          rgba(255, 255, 255, 0.04);
  --focus-ring:         rgba(20, 232, 200, 0.25);
}

/* ── Base ─────────────────────────────────── */

*, *::before, *::after {
  font-family: 'DM Sans', system-ui, sans-serif;
}

body {
  background-color: var(--bg) !important;
  background-image: radial-gradient(circle, var(--dot-color) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--text) !important;
}

h1, h2, h3, h4 {
  font-family: 'Syne', sans-serif !important;
}

/* ── Nav ──────────────────────────────────── */

nav {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.retro-brand {
  font-family: 'Syne', sans-serif;
  color: var(--accent) !important;
  letter-spacing: -0.02em;
}
.retro-brand:hover {
  color: var(--accent-hover) !important;
}

/* ── Surfaces (via vars — ambos os temas) ─── */

.bg-white   { background-color: var(--surface)   !important; }
.bg-gray-50 { background-color: var(--surface-2) !important; }
.bg-surface-3 { background-color: var(--surface-3) !important; }

/* ── Borders (via vars — ambos os temas) ──── */

.border-gray-200,
.border-gray-100 { border-color: var(--border) !important; }

.border-gray-300 { border-color: var(--border-strong) !important; }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border) !important;
}

/* ── Text (via vars — ambos os temas) ─────── */

.text-gray-900 { color: var(--text)       !important; }
.text-gray-800 { color: var(--text)       !important; }
.text-gray-700 { color: var(--text-muted) !important; }
.text-gray-600 { color: var(--text-muted) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-dim)   !important; }

/* ── Dark-only: ajustes de texto ─────────── */

[data-theme="dark"] .text-gray-800 { color: #d0d8e4 !important; }
[data-theme="dark"] .text-gray-700 { color: #b0bccc !important; }
[data-theme="dark"] .bg-gray-100   { background-color: rgba(255,255,255,0.05) !important; }

/* ── Identidade: Indigo → Teal (ambos) ───── */

.bg-indigo-600 {
  background-color: var(--accent)      !important;
  color:            var(--accent-text) !important;
}
.hover\:bg-indigo-700:hover {
  background-color: var(--accent-hover) !important;
  color:            var(--accent-text)  !important;
}

.bg-indigo-100 { background-color: var(--accent-bg) !important; }
.bg-indigo-50  { background-color: var(--accent-bg) !important; }

.text-indigo-600 { color: var(--accent)       !important; }
.text-indigo-800 { color: var(--accent)       !important; }

.hover\:text-indigo-600:hover { color: var(--accent)       !important; }
.hover\:text-indigo-700:hover { color: var(--accent-hover) !important; }

.border-indigo-200 { border-color: var(--accent-border)     !important; }
.border-indigo-300 { border-color: var(--accent-border-mid) !important; }
.border-indigo-400 { border-color: var(--accent-border-str) !important; }

.focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--focus-ring) !important;
}

/* ── Readiness counter — animação ao atualizar ── */

@keyframes counter-pop {
  0%   { transform: scale(1.2); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 1; }
}

.readiness-counter {
  animation: counter-pop 200ms ease-out;
}

/* ── Emerald (readiness) — global ─────────── */

.bg-emerald-600 { background-color: #10b981 !important; color: #fff !important; }
.hover\:bg-emerald-700:hover { background-color: #059669 !important; }

/* ── Emerald — dark ajustes ───────────────── */

[data-theme="dark"] .bg-emerald-100   { background-color: rgba(52,211,153,0.1) !important; }
[data-theme="dark"] .text-emerald-700 { color: #34d399 !important; }

/* ── Amber — dark ajustes ─────────────────── */

[data-theme="dark"] .bg-amber-100     { background-color: rgba(251,191,36,0.1)  !important; }
[data-theme="dark"] .bg-amber-50      { background-color: rgba(251,191,36,0.07) !important; }
[data-theme="dark"] .text-amber-800   { color: #fbbf24 !important; }
[data-theme="dark"] .border-amber-200 { border-color: rgba(251,191,36,0.2) !important; }

/* ── Red (errors / danger) — global ─────── */

.bg-red-600              { background-color: #dc2626 !important; color: #fff !important; }
.hover\:bg-red-700:hover { background-color: #b91c1c !important; }

/* ── Red — dark ajustes ───────────────────── */

[data-theme="dark"] .bg-red-50              { background-color: rgba(239,68,68,0.08) !important; }
[data-theme="dark"] .border-red-200         { border-color: rgba(239,68,68,0.2) !important; }
[data-theme="dark"] .text-red-800           { color: #fca5a5 !important; }
[data-theme="dark"] .text-red-700           { color: #fca5a5 !important; }
[data-theme="dark"] .text-red-600           { color: #f87171 !important; }
[data-theme="dark"] .text-red-400           { color: #f87171 !important; }
[data-theme="dark"] .hover\:text-red-500:hover { color: #f87171 !important; }
[data-theme="dark"] .hover\:text-red-600:hover { color: #ef4444 !important; }

/* ── Green — dark ajustes ─────────────────── */

[data-theme="dark"] .bg-green-50      { background-color: rgba(74,222,128,0.07) !important; }
[data-theme="dark"] .bg-green-100     { background-color: rgba(74,222,128,0.1)  !important; }
[data-theme="dark"] .border-green-200 { border-color: rgba(74,222,128,0.2) !important; }
[data-theme="dark"] .text-green-800   { color: #4ade80 !important; }
[data-theme="dark"] .text-green-700   { color: #4ade80 !important; }

/* ── Cores de categoria do resultado ─────── */
/* Mesmo valor funciona em ambos os temas */

.border-l-green-400  { border-left-color: #4ade80 !important; }
.border-l-red-400    { border-left-color: #f87171 !important; }
.border-l-blue-400   { border-left-color: #60a5fa !important; }
.border-l-yellow-400 { border-left-color: #fbbf24 !important; }

/* Texto de categoria: ajuste dark (mais vibrante em fundo escuro) */
[data-theme="dark"] .text-blue-700   { color: #93c5fd !important; }
[data-theme="dark"] .text-yellow-700 { color: #fbbf24 !important; }

/* ── Elementos UI cinza — dark ────────────── */

[data-theme="dark"] .btn-secondary {
  background-color: rgba(255,255,255,0.07) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .hover\:bg-gray-200:hover {
  background-color: rgba(255,255,255,0.11) !important;
}

[data-theme="dark"] .btn-outline {
  border-color: var(--border-strong) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: rgba(255,255,255,0.07) !important;
}

[data-theme="dark"] .badge-ui {
  background-color: rgba(255,255,255,0.06) !important;
  color: var(--text-muted) !important;
}

/* ── Retro-only: ajustes de UI ───────────── */
/* --accent é amarelo no retrô: ótimo em fundos interativos (botões), mas
   contraste insuficiente como cor de texto sobre creme ou bg azul. Links,
   brand e rótulos de acento usam ink. */

html:not([data-theme]) .retro-brand,
[data-theme="retro"] .retro-brand {
  color: var(--text) !important;
}
html:not([data-theme]) .retro-brand:hover,
[data-theme="retro"] .retro-brand:hover {
  color: var(--text-muted) !important;
}

html:not([data-theme]) .text-indigo-600,
html:not([data-theme]) .text-indigo-800,
[data-theme="retro"] .text-indigo-600,
[data-theme="retro"] .text-indigo-800 {
  color: var(--text) !important;
}
html:not([data-theme]) .hover\:text-indigo-600:hover,
html:not([data-theme]) .hover\:text-indigo-700:hover,
[data-theme="retro"] .hover\:text-indigo-600:hover,
[data-theme="retro"] .hover\:text-indigo-700:hover {
  color: var(--text-muted) !important;
}
html:not([data-theme]) .text-accent,
[data-theme="retro"] .text-accent {
  color: var(--text) !important;
}

/* UI6.8 — o campeão do ranking mantém destaque no retrô: o override acima
   rebate o acento para ink; aqui a contagem do #1 recebe o âmbar legível
   (mesmo tom do badge de ranking, ~4.8:1 sobre creme). */
html:not([data-theme]) .result-vote-count.text-accent,
[data-theme="retro"] .result-vote-count.text-accent {
  color: #b45309 !important;
}

/* UI6.10 — no retrô, links de texto perdem a cor de acento (vira ink);
   o sublinhado devolve a affordance de clique. */
html:not([data-theme]) a.text-indigo-600,
[data-theme="retro"] a.text-indigo-600 {
  text-decoration: underline;
  text-underline-offset: 2px;
}

html:not([data-theme]) .bg-gray-100,
[data-theme="retro"] .bg-gray-100 {
  background-color: rgba(44, 36, 24, 0.07) !important;
}
html:not([data-theme]) .hover\:bg-gray-200:hover,
[data-theme="retro"] .hover\:bg-gray-200:hover {
  background-color: rgba(44, 36, 24, 0.11) !important;
}
html:not([data-theme]) .hover\:bg-gray-50:hover,
[data-theme="retro"] .hover\:bg-gray-50:hover {
  background-color: rgba(44, 36, 24, 0.05) !important;
}

html:not([data-theme]) .btn-secondary,
[data-theme="retro"] .btn-secondary {
  background-color: rgba(44, 36, 24, 0.07) !important;
  color: var(--text-muted) !important;
}
html:not([data-theme]) .btn-outline,
[data-theme="retro"] .btn-outline {
  border-color: var(--border-strong) !important;
  background-color: rgba(44, 36, 24, 0.03) !important;
  color: var(--text-muted) !important;
}
html:not([data-theme]) .badge-ui,
[data-theme="retro"] .badge-ui {
  background-color: rgba(44, 36, 24, 0.07) !important;
  color: var(--text-muted) !important;
}

/* ── Inputs & forms ─────────────────────── */

/* Foco com teal — ambos os temas */
input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring) !important;
  border-color: var(--accent-border-mid) !important;
}

/* Input inline do título do grupo */
input.bg-transparent {
  background-color: transparent !important;
  border-color: var(--accent-border-mid) !important;
  color: var(--text) !important;
}

/* Placeholder — ambos os temas (usa var que adapta por tema) */
input::placeholder,
textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
}

/* Dark: fundo e placeholder dos inputs */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
  background-color: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-dim) !important;
  opacity: 1;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  background-color: rgba(255,255,255,0.06) !important;
}

/* ── Shadows ──────────────────────────────── */

[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3) !important;
}

/* ── UI3.1 — Flash messages ───────────────── */

@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0);    }
}

[data-flash] .rounded-md {
  backdrop-filter: blur(4px);
  animation: flash-slide-in 0.25s ease forwards;
}

/* ── UI3.2 — Button press feedback ───────── */

button,
input[type="submit"] {
  transition: transform 120ms ease, background-color 150ms ease;
}

button:active,
input[type="submit"]:active {
  transform: scale(0.95);
}

/* ── Accent text utility ──────────────────── */

.text-accent { color: var(--accent) !important; }

/* Ranking #1 badge — âmbar mais escuro no claro, brilhante no escuro */
.text-amber-400 { color: #b45309 !important; }
[data-theme="dark"] .text-amber-400 { color: #fbbf24 !important; }

/* ── Result item ──────────────────────────── */

.result-vote-count {
  font-family: 'Syne', sans-serif;
}

@keyframes result-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.result-item {
  opacity: 0;
  animation: result-reveal 0.4s ease forwards;
}

@keyframes bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.result-bar {
  transform-origin: left;
  transform: scaleX(0);
  animation: bar-grow 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--result-delay, 0ms) + 200ms);
}

/* ── UI3.3 — Board card stagger ──────────── */

@keyframes board-card-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.board-card {
  animation: board-card-reveal 0.28s ease both;
}

/* ── UI6.6 — Aviso LGPD como <dialog> modal ── */
/* Herda as superfícies do tema pelas classes remapeadas; aqui só o que
   classe utilitária não cobre: centralização, largura fluida e backdrop. */

dialog#privacy_notice_banner {
  margin: auto;
  width: min(28rem, calc(100vw - 2rem));
}
dialog#privacy_notice_banner::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* ── UI6.9 — Gatilho "+ Reagir" (details) ──── */

details.reaction-picker > summary {
  list-style: none;
}
details.reaction-picker > summary::-webkit-details-marker {
  display: none;
}

/* ── UI4 — Theme toggle button ────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background-color: var(--accent-bg);
}

/* =============================================
   Landing (home — raiz para visitantes deslogados)
   ============================================= */

/* Entrada suave por seção — escalonada via animation-delay inline */
@keyframes landing-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.landing-rise {
  opacity: 0;
  animation: landing-rise 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Cluster de cartões do hero — flutuação contínua e discreta */
@keyframes landing-float {
  0%, 100% { transform: translateY(0);     }
  50%      { transform: translateY(-12px); }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .landing-rise,
  .landing-cluster {
    animation: none;
  }
  .landing-rise { opacity: 1; }
}

/* ── UI5.1 — Contador de votos fixo ───────── */

.vote-counter-sticky {
  position: fixed;
  top: 4.5rem;
  right: 1.25rem;
  z-index: 40;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.25);
}

/* ── UI5.2 — Destaque do card em que votei ── */

.voted-highlight {
  box-shadow: 0 0 0 2px var(--accent-border-mid);
}

/* ── UI5.2 — Foco visível por teclado ─────── */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-ring);
}

/* ── Fase de agrupamento — drag & drop ────── */
/* Cards arrastáveis sinalizam o gesto. turbo-frame é inline por padrão;
   forçamos block para o transform do estado .dragging valer. */
turbo-frame[draggable="true"] {
  display: block;
  cursor: grab;
}
turbo-frame[draggable="true"]:active {
  cursor: grabbing;
}

/* Item sendo arrastado: fica como "fantasma elevado" no lugar de origem
   (a imagem que segue o cursor é capturada pelo browser no dragstart). */
.dragging {
  opacity: 0.6 !important;
  transform: scale(1.05) rotate(1deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25),
              0 8px 10px -6px rgba(0, 0, 0, 0.2);
  cursor: grabbing !important;
}

/* Zona de drop válida — usa o acento (teal), não indigo cru.
   Sem border-radius próprio: o anel segue o raio natural do alvo
   (card rounded-xl, grupo rounded-2xl). */
.drop-active {
  box-shadow: 0 0 0 2px var(--accent) !important;
  background-color: var(--accent-bg) !important;
}

/* Encaixe do grupo recém-criado: scale 1.05 → 1.0 */
@keyframes group-snap {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}
.group-snap {
  animation: group-snap 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .dragging  { transform: none; }
  .group-snap { animation: none; }
}

/* =============================================
   Landing v2 — "Retro" (estética vintage/rádio)
   Autocontida: paleta fixa, imune ao theme toggle.
   ============================================= */

.retro-lp {
  /* Paleta quente da inspiração */
  --r-bg:       #b9d3dc;   /* azul-claro — moldura/canvas */
  --r-ink:      #2c2418;   /* marrom-café escuro */
  --r-ink-2:    #3a2f1f;
  --r-cream:    #f2e8d4;   /* creme */
  --r-yellow:   #f8c43f;
  --r-orange:   #f2a83a;
  --r-deep:     #f27d38;
  --r-red:      #f14a42;
  --r-blue-ink: #6f93a0;   /* azul dessaturado p/ tag "Ação" */
  --r-cream-dim: rgba(242, 232, 212, 0.62);
  --r-ink-dim:   rgba(44, 36, 24, 0.72);   /* ink atenuado — texto secundário sobre canvas */

  /* Full-bleed: rompe o container max-w-6xl do <main> */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: var(--r-bg);
  background-image: radial-gradient(rgba(44, 36, 24, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  /* Compensa o py-6 do <main> para o canvas encostar no nav */
  margin-top: -1.5rem;
  margin-bottom: -2rem;
  padding: clamp(1rem, 4vw, 3rem) 1rem clamp(2.5rem, 5vw, 4rem);
}

.retro-lp-inner {
  max-width: 64rem;
  margin: 0 auto;
}

/* Tipografia display retrô — sobrepõe o Syne global */
.retro-lp h1,
.retro-lp h2,
.retro-lp h3 {
  font-family: 'Archivo', 'Syne', sans-serif !important;
}

/* Foco visível dentro do tema retrô */
.retro-lp a:focus-visible,
.retro-lp button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 36, 24, 0.45);
}

/* ── Painéis ──────────────────────────────── */

.retro-panel {
  border-radius: 1.75rem;
  position: relative;
  overflow: hidden;
}
.retro-panel--ink {
  background-color: var(--r-ink);
  color: var(--r-cream);
}
.retro-panel--cream {
  background-color: var(--r-cream);
  color: var(--r-ink);
}

/* ── Hero ─────────────────────────────────── */

.retro-hero {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .retro-hero { grid-template-columns: 1.35fr 1fr; }
}

.retro-hero-main {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
}

.retro-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.retro-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--r-yellow);
  color: var(--r-ink);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
.retro-pill-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background-color: var(--r-red);
  box-shadow: 0 0 0 0 rgba(241, 74, 66, 0.6);
  animation: retro-blink 1.6s ease-in-out infinite;
}
@keyframes retro-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 74, 66, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(241, 74, 66, 0); }
}

.retro-fm {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--r-cream-dim);
  text-align: right;
}
.retro-fm-meta {
  font-size: 0.62rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.retro-fm-logo {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--r-cream);
  border: 2px solid var(--r-cream-dim);
  border-radius: 0.4rem;
  padding: 0.1rem 0.4rem;
}

.retro-display {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--r-cream);
}
.retro-display-accent { color: var(--r-yellow); }

.retro-hero-sub {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.retro-hero-sub p {
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--r-cream-dim);
}

/* Mini fita cassete em CSS */
.retro-cassette {
  flex-shrink: 0;
  position: relative;
  width: 3.25rem;
  height: 2.1rem;
  border-radius: 0.4rem;
  background: linear-gradient(160deg, #4a3c28, #2c2418);
  border: 2px solid var(--r-cream-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.retro-cassette-reel {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--r-cream);
  box-shadow: inset 0 0 0 0.18rem var(--r-ink);
  animation: retro-spin 3s linear infinite;
}
@keyframes retro-spin { to { transform: rotate(360deg); } }

.retro-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2rem;
}
.retro-cta--center { justify-content: center; padding-top: 1.75rem; }

.retro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  padding: 0.85rem 1.5rem;
  border-radius: 0.85rem;
  transition: transform 120ms ease, background-color 150ms ease, color 150ms ease;
}
.retro-btn:active { transform: translateY(1px); }
.retro-btn--solid {
  background-color: var(--r-yellow);
  color: var(--r-ink);
  box-shadow: 0 6px 0 0 #c89320;
}
.retro-btn--solid:hover { background-color: #ffd058; }
.retro-btn--solid:active { box-shadow: 0 3px 0 0 #c89320; }
.retro-btn--ghost {
  background-color: transparent;
  color: var(--r-cream);
  border: 2px solid var(--r-cream-dim);
}
.retro-btn--ghost:hover { background-color: rgba(242, 232, 212, 0.1); }

.retro-hero-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--r-cream-dim);
}

/* ── Hero aside (lado A / tracklist) ──────── */

.retro-hero-aside {
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
}
.retro-aside-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1rem;
  border-bottom: 2px dashed rgba(44, 36, 24, 0.18);
}
.retro-aside-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}
.retro-aside-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 1rem;
}
.retro-aside-eq i {
  width: 3px;
  background: var(--r-deep);
  border-radius: 2px;
  animation: retro-eq 0.9s ease-in-out infinite;
}
.retro-aside-eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.retro-aside-eq i:nth-child(2) { height: 90%; animation-delay: 0.15s; }
.retro-aside-eq i:nth-child(3) { height: 60%; animation-delay: 0.3s; }
.retro-aside-eq i:nth-child(4) { height: 100%; animation-delay: 0.45s; }
@keyframes retro-eq {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

.retro-tracklist {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.retro-track {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  background: var(--r-cream);
  border-left: 5px solid var(--c);
  box-shadow: 0 8px 18px -12px rgba(44, 36, 24, 0.4);
}
.retro-track-tag {
  grid-column: 1 / -1;
  width: fit-content;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* UI6.10 — cor da categoria como fundo (texto colorido sobre creme era ~1.4:1) */
  background: var(--c);
  color: var(--r-ink);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  order: -1;
}
.retro-track-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--r-ink);
  line-height: 1.25;
}
.retro-track-votes {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--r-ink);
  background: var(--r-yellow);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

/* ── Ticker de rádio ──────────────────────── */

.retro-marquee {
  margin: 1rem 0;
  overflow: hidden;
  background: linear-gradient(90deg, var(--r-yellow), var(--r-orange), var(--r-deep), var(--r-red));
  border-radius: 999px;
  padding: 0.6rem 0;
}
.retro-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: retro-marquee 26s linear infinite;
}
.retro-marquee-track span {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  color: var(--r-ink);
  padding: 0 1rem;
}
.retro-marquee-sep { opacity: 0.55; }
@keyframes retro-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Seções ───────────────────────────────── */

.retro-section { margin-top: clamp(2.5rem, 6vw, 4rem); }

.retro-section-head { max-width: 38rem; }
.retro-h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  color: var(--r-ink);
}
.retro-lede {
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--r-ink-dim);
}

/* ── Swatches (as fases) ──────────────────── */

.retro-swatches {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.retro-swatch {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--c);
  border-radius: 0.85rem;
  padding: 1rem 1.25rem;
  color: var(--r-ink);
  transition: transform 150ms ease;
}
.retro-swatch:last-child { color: var(--r-cream); }
.retro-swatch:hover { transform: translateX(6px); }
.retro-swatch-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  opacity: 0.55;
  min-width: 2.25rem;
}
.retro-swatch-body { display: flex; flex-direction: column; gap: 0.15rem; }
.retro-swatch-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
}
.retro-swatch-desc { font-size: 0.85rem; opacity: 0.85; line-height: 1.3; }

/* ── Recursos ─────────────────────────────── */

.retro-features {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .retro-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .retro-features { grid-template-columns: repeat(3, 1fr); } }

.retro-feature {
  background: var(--r-cream);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 2px solid rgba(44, 36, 24, 0.08);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.retro-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(44, 36, 24, 0.55);
}
.retro-feature-icon { font-size: 1.6rem; }
.retro-feature-title {
  margin-top: 0.75rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--r-ink);
}
.retro-feature-desc {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(44, 36, 24, 0.7);
}

/* ── CTA final ────────────────────────────── */

.retro-final {
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  text-align: center;
}
.retro-final-kicker {
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--r-yellow);
}
.retro-final-title {
  margin-top: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(2.1rem, 5.5vw, 3.5rem);
  color: var(--r-cream);
}
.retro-final-lede {
  margin: 1rem auto 0;
  max-width: 30rem;
  color: var(--r-cream-dim);
  line-height: 1.45;
}

/* ── Reduced motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .retro-cassette-reel,
  .retro-aside-eq i,
  .retro-pill-dot,
  .retro-marquee-track { animation: none; }
}