/* Speed Fibra TV 360 — Design system "Feito de luz".
   Tokens extraídos da Home pública aprovada (site/assets/css/main.css).
   Espelho para Android: plataforma/android-tv e android-phone, ficheiro ui/Theme.kt. */

@font-face {
  font-family: 'Archivo';
  src: url('../web/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../web/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Cor — só as cores oficiais e as suas transparências */
  --bg: #070b14;
  --bg-2: #0b1222;
  --bg-3: #111b33;
  --azul: #1d4ed8;
  --azul-claro: #60a5fa;
  --verde: #14b8a6;
  --verde-claro: #5eead4;
  --texto: #eef3fb;
  --texto-2: #b4c0d4;
  --texto-3: #8b98b0;
  --linha: rgba(148, 163, 184, 0.16);
  --vidro: rgba(13, 21, 40, 0.72);
  --perigo: #fca5a5; /* só para mensagens de erro, nunca decorativo */

  /* Luz — gradientes de marca */
  --grad-luz: linear-gradient(100deg, var(--azul-claro) 0%, var(--verde-claro) 100%);
  --grad-verde: linear-gradient(100deg, var(--verde) 0%, var(--verde-claro) 100%);
  --brilho-verde: 0 0 14px rgba(94, 234, 212, 0.75);
  --sombra-cartao: 0 30px 70px -40px rgba(0, 0, 0, 0.9);

  /* Tipografia */
  --fonte-titulo: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Espaço (escala de 4) e forma */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --raio-p: 10px;
  --raio: 16px;
  --raio-g: 24px;

  /* Foco: anel verde-claro visível a 3 m numa TV */
  --foco: 0 0 0 3px var(--bg), 0 0 0 6px var(--verde-claro), 0 0 28px rgba(94, 234, 212, 0.55);

  /* Movimento */
  --curva: cubic-bezier(0.2, 0.75, 0.2, 1);
  --t-rapido: 160ms;
  --t-medio: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-rapido: 0ms;
    --t-medio: 0ms;
  }
}

/* Componentes base partilhados */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font: 650 0.78rem/1.2 var(--fonte-titulo);
  font-stretch: 78%;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--verde-claro);
}
.kicker__traco {
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-luz);
  box-shadow: var(--brilho-verde);
}
.luz {
  background: var(--grad-luz);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 650 0.95rem/1 var(--fonte-texto);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--t-rapido) var(--curva),
    box-shadow var(--t-medio) var(--curva),
    background-color var(--t-medio);
}
.btn--g {
  min-height: 54px;
  padding: 0 1.6em;
  font-size: 1rem;
}
.btn--p {
  min-height: 42px;
  padding: 0 1.1em;
  font-size: 0.88rem;
}
.btn--bloco {
  width: 100%;
}
.btn--verde {
  background: var(--grad-verde);
  color: #03141a;
  box-shadow: 0 14px 34px -14px rgba(20, 184, 166, 0.85);
}
.btn--vidro {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.aovivo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.6em;
  border-radius: 6px;
  background: rgba(7, 11, 20, 0.7);
  border: 1px solid rgba(94, 234, 212, 0.45);
  font: 750 0.68rem/1 var(--fonte-titulo);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.aovivo::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--verde-claro);
  box-shadow: var(--brilho-verde);
}
.progresso {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.progresso i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--grad-luz);
}