/* ==========================================================================
   Modelo 07 — Gamer e streaming (v3)
   Ângulo: baixa latência, partida sem lag, live sem travar.
   Direção visual: dark mode, neon verde + roxo, tipografia display
   condensada (Rajdhani) em caixa alta, cantos cortados, HUD com cantoneiras,
   linhas de varredura e fotos com efeito neon.
   Carregado DEPOIS de base.css e secoes.css: tokens + pele do modelo.
   ========================================================================== */

:root {
  --ff-titulo: "Rajdhani", system-ui, sans-serif;
  --ff-texto: "Inter", system-ui, sans-serif;

  --cor-fundo: #06070b;
  --cor-fundo-alt: #0b0d14;
  --cor-superficie: #10131c;
  --cor-texto: #f2f4f8;
  --cor-texto-neutro: #9aa3b5;
  --cor-borda: rgba(255, 255, 255, 0.08);
  --cor-borda-forte: rgba(255, 255, 255, 0.16);

  --cor-acento: color-mix(in srgb, var(--cor-primaria) 75%, #ffffff);
  --grad-marca: linear-gradient(120deg, var(--cor-primaria), var(--cor-secundaria));
  --grad-botao: linear-gradient(120deg, var(--cor-primaria), color-mix(in srgb, var(--cor-primaria) 75%, #ffffff));
  --grad-texto: linear-gradient(95deg, var(--cor-primaria), color-mix(in srgb, var(--cor-secundaria) 70%, #ffffff));
  --grad-faixa: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--cor-secundaria) 50%, transparent), transparent 55%),
    linear-gradient(120deg, color-mix(in srgb, var(--cor-secundaria) 40%, #07050f), #07050f);
  --brilho: 0 0 30px -6px color-mix(in srgb, var(--cor-primaria) 75%, transparent);

  --painel: rgba(8, 10, 16, 0.82);
  --moldura-fundo: linear-gradient(165deg, color-mix(in srgb, var(--cor-secundaria) 28%, #0b0d14), #06070b 62%);
  --plano-destaque-fundo: linear-gradient(180deg, #121826, #0b0e16);
  --rodape-fundo: #030407;
  --mapa-fundo: #07080e;

  --raio: 4px;
  --raio-pequeno: 4px;

  --cor-header-fundo: #ffffff;
  --cor-header-texto: #0b0d14;
  --cor-header-texto-neutro: #4a5263;
  --cor-header-borda: #e6e8ee;
}

h1,
h2,
h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.8rem, 1.6rem + 5vw, 5.4rem);
  line-height: 0.95;
}

h2 {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1;
}

h3 {
  font-size: 1.45rem;
}

.rotulo {
  font-family: var(--ff-titulo);
  font-size: 15px;
  letter-spacing: 0.2em;
}

.rotulo::before {
  width: 10px;
  height: 10px;
  border-radius: 0;
  transform: rotate(45deg);
}

/* Botões com canto cortado */
.btn {
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  font-family: var(--ff-titulo);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header__acoes .btn {
  font-size: 15px;
}

.barra-topo {
  background: #000000;
  border-bottom: 1px solid color-mix(in srgb, var(--cor-primaria) 40%, transparent);
}

/* Cartões com canto cortado (o plano fica de fora: a fita "Mais escolhido" sai da borda) */
.perfil,
.beneficio,
.passo,
.depoimento,
.atalho,
.app-tile,
.vantagens {
  border-radius: 0;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

/* ==========================================================================
   HERO: foto em tela cheia com neon + varredura + HUD
   ========================================================================== */
.hero--arena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 70px 48px;
  background: #06070b;
}

.hero__paisagem {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__paisagem .hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__paisagem::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(6, 7, 11, 0.95) 0%, rgba(6, 7, 11, 0.75) 45%, rgba(6, 7, 11, 0.35) 100%),
    linear-gradient(0deg, #06070b, transparent 35%);
}

.hero__paisagem .foto__etiqueta {
  left: auto;
  right: 16px;
  top: 16px;
  bottom: auto;
  z-index: 3;
}

.hero__scan {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.hero__scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cor-primaria) 12%, transparent), transparent);
  animation: varrer 6s linear infinite;
}

@keyframes varrer {
  from {
    transform: translateY(-120px);
  }
  to {
    transform: translateY(900px);
  }
}

@media (min-width: 960px) {
  .hero--arena {
    padding-block: 110px 56px;
    min-height: 780px;
  }
  .hero--arena .hero__grid {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

.hero--arena .hero__selo {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.5);
  border-color: color-mix(in srgb, var(--cor-primaria) 50%, transparent);
}

.hero--arena .hero__selo-cidade {
  border-radius: 0;
}

.hero--arena h1 .grad {
  text-shadow: none;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--cor-primaria) 50%, transparent));
}

.hero__oferta {
  border-radius: 0;
  backdrop-filter: blur(8px);
}

.hero__oferta-rotulo {
  border-radius: 0;
}

/* HUD */
.hud {
  position: relative;
  padding: 26px;
  background: rgba(6, 8, 14, 0.75);
  border: 1px solid color-mix(in srgb, var(--cor-primaria) 35%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 60px -20px color-mix(in srgb, var(--cor-primaria) 60%, transparent);
}

.hud__canto {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--cor-primaria);
}

.hud__canto--1 {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.hud__canto--2 {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}

.hud__canto--3 {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}

.hud__canto--4 {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.hud__topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--ff-titulo);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hud__online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cor-primaria);
}

.hud__grafico {
  width: 100%;
  height: 80px;
  margin-top: 18px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 100% 20px;
}

.hud__grafico polyline {
  fill: none;
  stroke: var(--cor-primaria);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px var(--cor-primaria));
  stroke-dasharray: 600;
  animation: tracar 3s ease-out both;
}

@keyframes tracar {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.hud__legenda {
  margin-top: 6px;
  font-size: 13px;
  color: var(--cor-texto-neutro);
}

.hud__velocidade {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--cor-primaria) 14%, transparent);
  border-left: 3px solid var(--cor-primaria);
}

.hud__velocidade small {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cor-texto-neutro);
}

.hud__velocidade strong {
  font-family: var(--ff-titulo);
  font-size: 30px;
  line-height: 1;
  color: var(--cor-primaria);
}

.hud__lista {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.hud__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}

.hud__lista svg {
  width: 18px;
  height: 18px;
  color: var(--cor-secundaria);
  color: color-mix(in srgb, var(--cor-secundaria) 70%, #ffffff);
}

.vantagens {
  background: rgba(6, 8, 14, 0.7);
}

.vantagem__icone {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ---- Faixa de gêneros (letreiro) ---- */
.generos {
  overflow: hidden;
  padding: 18px 0;
  background: var(--grad-marca);
  color: #06070b;
}

.generos__trilho {
  display: flex;
  width: max-content;
  animation: letreiro 30s linear infinite;
}

.generos__lista {
  display: flex;
  flex-shrink: 0;
}

.generos__lista li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  font-family: var(--ff-titulo);
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.generos__lista li::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #06070b;
  transform: rotate(45deg);
}

@keyframes letreiro {
  to {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
.plano__nome,
.plano__vel-numero,
.plano__vel-unidade,
.plano__preco-reais {
  font-family: var(--ff-titulo);
}

.plano__nome {
  font-size: 18px;
}

.plano__vel-numero {
  font-size: clamp(72px, 5vw + 36px, 96px);
}

.plano__fita {
  border-radius: 0;
  color: #06070b;
}

.plano__check {
  border-radius: 0;
  transform: rotate(45deg) scale(0.8);
}

.plano__check svg {
  transform: rotate(-45deg);
}

.perfil__tag {
  font-family: var(--ff-titulo);
  font-size: 14px;
  letter-spacing: 0.16em;
}

.beneficio__icone,
.passo__icone,
.atalho__icone,
.flutuante__icone,
.planos__ajuda-icone,
.faq__ajuda-icone,
.numero__icone,
.depoimento__avatar {
  border-radius: 0;
}

.passo__icone {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.promo,
.cta-final,
.numeros {
  border-radius: 0;
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}

.faq__lista .faq__item {
  border-radius: 0;
}

.cobertura__select {
  border-radius: 0;
}

.mapa__pino-ponto {
  background: var(--cor-primaria);
}

.plano {
  border-radius: 0;
}