/* =========================================================================
   ELETROGAMES - FOLHA DE ESTILO UNICA
   VERSAO 14
   =========================================================================

   IMPORTANTE AO ALTERAR ESTE ARQUIVO
   O navegador guarda o CSS em cache por horas. Para que a alteracao apareca
   na hora para todo mundo, suba o numero da versao em dois lugares:
     1. o "VERSAO 14" da linha acima
     2. o "?v=14" no final do endereco deste arquivo, dentro de cada .html
   Sem isso, quem ja visitou o site continua vendo a aparencia antiga.
   =========================================================================

   Este arquivo controla a aparencia do site inteiro. Editar uma cor aqui
   muda todas as paginas de uma vez.

   INDICE
   01. Tokens (cores, fontes, medidas)   - mexa aqui para trocar as cores
   02. Base e tipografia
   03. Utilitarios de layout
   04. Cabecalho e menu
   05. Botoes
   06. Hero (primeira dobra)
   07. Secoes e titulos
   08. Cartoes
   09. Fita rolante
   10. Faixa de fatos
   11. Lista de sintomas
   12. Etapas numeradas
   13. Perguntas frequentes
   14. Bloco final de chamada
   15. Rodape
   16. Botao flutuante do WhatsApp
   17. Efeitos (revelacao, cursor, brilho)
   18. Responsivo (celular e tablet)
   19. Movimento reduzido e impressao
   ========================================================================= */


/* =========================================================================
   01. TOKENS
   Todas as cores do site saem daqui. Para trocar a identidade visual,
   altere apenas os valores abaixo.
   ========================================================================= */
:root {
  /* --- Fundos: preto azulado --- */
  --fundo:            #05080F;   /* fundo principal */
  --fundo-alt:        #080D1A;   /* fundo das faixas separadoras */
  --painel:           #0C1428;   /* fundo dos cartoes */

  /* --- AZUL: a cor da marca e da acao de COMPRAR --- */
  --azul:             #1E5BFF;   /* preenchimento de botao e destaques */
  --azul-vivo:        #4D87FF;   /* brilhos e linhas de luz */
  --azul-claro:       #8AB0FF;   /* textos de apoio em azul */
  --azul-fundo:       rgba(30, 91, 255, 0.12);

  /* --- AZUL ESCURO: os paineis solidos --- */
  --azul-escuro:      #0B2A8C;
  --azul-noite:       #071B5C;

  /* --- BRANCO: usado pouco, e por isso pesa ---
     E a cor do lado tecnico (assistencia), para separar do azul
     da loja sem inventar uma terceira cor. */
  --gelo:             #FFFFFF;
  --gelo-claro:       #E9F0FF;

  /* --- Textos --- */
  --texto:            #FFFFFF;   /* titulos */
  --texto-suave:      #A9B7D0;   /* paragrafos */
  --texto-fraco:      #7C8AA6;   /* legendas */

  /* --- Linhas e bordas --- */
  --linha:            rgba(255, 255, 255, 0.10);

  /* --- Fontes --- */
  --fonte-titulo:     'Archivo', system-ui, sans-serif;
  --fonte-texto:      'IBM Plex Sans', system-ui, sans-serif;
  --fonte-codigo:     'IBM Plex Mono', monospace;

  /* --- Medidas --- */
  --largura-maxima:   1200px;
  --arredondamento:   14px;
  --espaco-secao:     7rem;      /* respiro entre uma secao e outra */
}


/* =========================================================================
   02. BASE E TIPOGRAFIA
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;   /* impede que o menu fixo cubra o titulo */
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  max-width: 100%;
  display: block;
}

/* Contorno de foco: quem navega pelo teclado precisa ver onde esta */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--gelo);
}

::selection {
  background: var(--azul-vivo);
  color: var(--fundo);
}

/* Atalho para quem usa leitor de tela pular direto ao conteudo */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}
.pular-para-conteudo:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.9rem 1.2rem;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
}


/* =========================================================================
   03. UTILITARIOS DE LAYOUT
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.secao {
  padding: var(--espaco-secao) 0;
}

/* Filete que separa duas secoes claras seguidas */
.secao--com-linha {
  border-top: 1px solid var(--linha);
}

.secao--fundo-alt {
  background: var(--fundo-alt);
}

/* Fundo da secao de assistencia tecnica. E o azul mais escuro da paleta,
   com a malha por cima, para a secao mais importante da pagina ter um
   ambiente proprio em vez de mais um retangulo preto. */
.secao--bancada {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(30, 91, 255, 0.20), transparent 60%),
    linear-gradient(180deg, var(--azul-noite), #0A1330 60%, var(--fundo));
}
.secao--bancada::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.secao--bancada > .container {
  position: relative;
}

.grade {
  display: grid;
  gap: 1.25rem;
}
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
.grade--5 { grid-template-columns: repeat(5, 1fr); }

/* Malha neon de fundo, herdada do visual da loja */
.malha {
  background-image:
    linear-gradient(to right,  rgba(77, 135, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77, 135, 255, 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
}

.apenas-leitor-de-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* =========================================================================
   04. CABECALHO E MENU
   ========================================================================= */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(5, 8, 15, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Classe adicionada pelo JavaScript quando a pagina rola */
.cabecalho.rolou {
  border-bottom-color: var(--linha);
  box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.95);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 80px;
  transition: height 0.3s ease;
}
.cabecalho.rolou .cabecalho__interno {
  height: 68px;
}

/* --- Logotipo --- */
.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
}
/* Logotipo em imagem. Use quando trocar a marca provisoria em texto pelo
   arquivo oficial. O arquivo fica em assets/img/logo.png
   A altura manda; a largura se ajusta sozinha para nao deformar a marca. */
.logo__imagem {
  height: 38px;
  width: auto;
  /* A marca e deitada e comprida. O object-fit garante que ela nunca
     estique nem achate, mesmo se o limite de largura entrar em acao. */
  max-width: 240px;
  object-fit: contain;
  transition: height 0.3s ease;
}
.cabecalho.rolou .logo__imagem {
  height: 34px;
}
.rodape .logo__imagem {
  height: 44px;
}



/* --- Links do menu --- */
.menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.menu__link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 14px;
  color: var(--texto-suave);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.menu__link:hover {
  color: var(--texto);
}
.menu__link[aria-current='page'] {
  color: var(--azul-claro);
}
.menu__link[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--azul-claro);
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* --- Botao hamburguer (so aparece no celular) --- */
.hamburguer {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.hamburguer span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.hamburguer[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Menu aberto no celular --- */
.menu-celular {
  display: none;
  border-top: 1px solid var(--linha);
  background: var(--fundo);
}
.menu-celular.aberto {
  display: block;
}
.menu-celular__link {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 17px;
}
.menu-celular__acoes {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem 0 0.5rem;
}


/* =========================================================================
   05. BOTOES

   Duas cores, com significado fixo:
     .botao--loja    = comprar   (azul)
     .botao--servico = consertar (gelo)
   Nunca troque essa relacao: o visitante aprende a diferenca em segundos.
   ========================================================================= */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 1rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--fonte-texto);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Faixa de luz que atravessa o botao quando o mouse passa por cima */
.botao::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.botao:hover::after {
  transform: translateX(100%);
}

.botao--loja {
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul));
  color: #fff;
  box-shadow: 0 0 32px -6px rgba(77, 135, 255, 0.7);
}
.botao--loja:hover {
  background: var(--azul);
}

.botao--servico {
  background: var(--gelo);
  color: var(--fundo);
}
.botao--servico:hover {
  background: var(--gelo-claro);
  box-shadow: 0 0 32px -6px rgba(255, 255, 255, 0.6);
}

.botao--contorno {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  color: var(--gelo-claro);
}
.botao--contorno:hover {
  border-color: var(--gelo);
  background: rgba(255, 255, 255, 0.15);
}

.botao--contorno-azul {
  border-color: rgba(30, 91, 255, 0.5);
  background: rgba(30, 91, 255, 0.05);
  color: var(--texto);
}
.botao--contorno-azul:hover {
  border-color: var(--azul);
  background: rgba(30, 91, 255, 0.15);
}

.botao--pequeno {
  min-height: 46px;
  padding: 0.75rem 1.25rem;
  font-size: 13px;
}

.botao--largura-total {
  width: 100%;
}

/* Botao compacto do cabecalho */
.botao-topo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.botao-topo:hover {
  border-color: var(--gelo);
  color: var(--gelo);
}
.botao-topo--destaque {
  border-color: transparent;
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul));
  color: #fff;
  box-shadow: 0 0 32px -6px rgba(77, 135, 255, 0.7);
}
.botao-topo--destaque:hover {
  background: var(--azul);
  color: #fff;
}


/* =========================================================================
   06. HERO (primeira dobra)
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 10rem 0 6rem;
}

/* Camada de luz: fica atras de tudo e nao recebe cliques */
.hero__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__luz::before,
.hero__luz::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
}
.hero__luz::before {
  left: -10%;
  top: -25%;
  width: 820px;
  height: 620px;
  background: rgba(30, 91, 255, 0.30);
}
.hero__luz::after {
  right: -10%;
  bottom: -30%;
  width: 680px;
  height: 520px;
  background: rgba(77, 135, 255, 0.13);
}

/* --- Hero das paginas internas ---
   Sobre, Contato, Assistencia e Politica usam esta versao: conteudo
   centralizado e um brilho azul atras. Sem isso a pagina abre com o
   texto encostado na esquerda e um vazio preto do lado direito. */
.hero--interno {
  padding: 9.5rem 0 5rem;
  border-bottom: 1px solid var(--linha);
  text-align: center;
}
.hero--interno::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -20%;
  z-index: -1;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(30, 91, 255, 0.28);
  filter: blur(150px);
  pointer-events: none;
}
.hero--interno .hero__titulo {
  font-size: clamp(1.9rem, 4vw, 3rem);
}
.hero--interno .hero__subtitulo {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.hero--interno .hero__botoes,
.hero--interno .selos {
  justify-content: center;
}

.hero__interno {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 4rem;
}

.hero__titulo {
  margin-top: 1.75rem;
  font-size: clamp(2.15rem, 4.5vw, 3.4rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.94;
}
/* A ultima linha do titulo, dentro de uma caixa azul solida.
   E o mesmo recurso do .destaque, aplicado ao titulo principal. */
.hero__titulo em {
  display: inline-block;
  margin-top: 0.18em;
  padding: 0.06em 0.3em;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  font-style: normal;
  box-shadow: 0 18px 40px -18px rgba(30, 91, 255, 0.95);
}

.hero__subtitulo {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: 18px;
  color: var(--texto-suave);
}

/* Selos curtos abaixo do subtitulo */
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
}
.selo svg {
  color: var(--gelo);
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* Tres numeros de prova, no rodape do hero */
.provas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 36rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}
.provas dt {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.provas dt .mais {
  color: var(--azul-vivo);
}
.provas dd {
  margin: 0.5rem 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--texto-fraco);
}

/* --- Quadro: a foto da loja emoldurada -----------------------------------

   Montado como um quadro de parede, de fora para dentro:
     1. brilho neon por tras, fazendo as vezes da luz na parede
     2. a moldura em si, um friso grosso em gradiente
     3. o paspatur, a borda escura entre a moldura e a foto
     4. a foto, sempre deitada (16:9), recortada para caber

   E deliberadamente pequeno: um quadro pendurado, nao um painel.
   --------------------------------------------------------------------------- */
.quadro {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
}

/* 1. Luz por tras do quadro */
.quadro::before {
  content: '';
  position: absolute;
  inset: 6%;
  z-index: -1;
  background: linear-gradient(120deg, var(--azul), var(--azul-vivo) 55%, var(--gelo));
  filter: blur(48px);
  opacity: 0.4;
  transition: opacity 0.5s ease;
}
.quadro:hover::before {
  opacity: 0.65;
}

/* 2. A moldura: friso grosso em gradiente, com sombra de peso */
.quadro__moldura {
  padding: 13px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--azul), var(--azul-vivo) 45%, var(--gelo));
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.quadro:hover .quadro__moldura {
  transform: translateY(-6px);
}

/* 3. Paspatur: a borda escura que separa a moldura da foto.

   O fundo dele carrega um aviso desenhado em CSS. Ele so fica visivel se o
   arquivo da foto faltar: assim, um arquivo ausente vira uma mensagem clara
   dentro do quadro, e nao um icone de imagem quebrada atravessando a tela. */
.quadro__paspatur {
  padding: 11px;
  border-radius: 3px;
  background-color: var(--fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23071B5C'/%3E%3Crect x='14' y='14' width='292' height='152' rx='6' fill='none' stroke='%234D87FF' stroke-width='2'/%3E%3Ctext x='160' y='82' text-anchor='middle' fill='%23ffffff' font-family='sans-serif' font-size='18' font-weight='bold'%3ECOLOQUE A FOTO AQUI%3C/text%3E%3Ctext x='160' y='108' text-anchor='middle' fill='%238AB0FF' font-family='monospace' font-size='11'%3Eassets/img/loja.jpg%3C/text%3E%3C/svg%3E");
  background-size: calc(100% - 22px) calc(100% - 22px);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* 4. A foto, sempre deitada */
.quadro__foto {
  display: block;
  width: 100%;
  /* height: auto e obrigatorio: sem ele, o atributo height="900" da tag
     vence o aspect-ratio e a foto estica na vertical. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;      /* recorta o excesso em vez de deformar a foto */
  border-radius: 2px;
  /* Se o arquivo faltar, o texto alternativo nao e desenhado por cima do
     aviso do paspatur. Leitores de tela continuam lendo o alt normalmente. */
  color: transparent;
}

/* Classe posta pelo navegador quando o arquivo da foto nao carrega. Esconde
   o icone de imagem quebrada, mantendo o espaco do quadro e o aviso atras. */
.quadro__foto--ausente {
  visibility: hidden;
}

/* =========================================================================
   07. SECOES E TITULOS
   ========================================================================= */
.rotulo {
  display: block;
  font-family: var(--fonte-codigo);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--azul-claro);
}
.rotulo--gelo {
  color: var(--gelo-claro);
}
.rotulo--azul {
  color: var(--azul-claro);
}

/* Palavra destacada dentro de um titulo: caixa azul solida atras dela.

   Use <em class="destaque">palavra</em>. Vale para uma ou duas palavras por
   titulo, nunca para a frase inteira: o destaque so funciona enquanto for
   excecao. */
.destaque {
  display: inline-block;
  padding: 0.08em 0.34em;
  border-radius: 6px;
  background: var(--azul);
  color: #fff;
  font-style: normal;
  box-shadow: 0 10px 26px -12px rgba(30, 91, 255, 0.9);
}

/* Versao so em cor, para paragrafos e textos menores, onde a caixa
   solida pesaria demais. */
.destaque--texto {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--azul-claro);
  font-weight: 600;
}

/* Pilula usada no topo do hero */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(30, 91, 255, 0.4);
  border-radius: 999px;
  background: rgba(30, 91, 255, 0.1);
  font-family: var(--fonte-codigo);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--azul-claro);
}

.secao__cabecalho {
  max-width: 48rem;
}
/* Cabecalho centralizado. Usado nas duvidas frequentes. */
.secao__cabecalho--centro {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.secao__titulo {
  margin-top: 1.25rem;
  font-size: clamp(1.95rem, 3.5vw, 2.85rem);
  font-weight: 800;
}
.secao__texto {
  margin-top: 1.5rem;
  font-size: 17px;
  color: var(--texto-suave);
}

/* Blocos de texto corrido, como o da secao Nossa Historia */
.texto-corrido p + p {
  margin-top: 1.25rem;
}
.texto-corrido {
  font-size: 17px;
  color: var(--texto-suave);
}

.citacao {
  margin: 2.5rem 0 0;
  padding-left: 1.75rem;
  border-left: 2px solid var(--azul);
}
.citacao p {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--texto);
}


/* =========================================================================
   08. CARTOES

   .cartao        - cartao simples
   .cartao--neon  - cartao com fio neon na moldura, que acende no hover
   ========================================================================= */
.cartao {
  position: relative;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--linha);
  border-radius: var(--arredondamento);
  /* Painel levemente iluminado no topo, como se a luz viesse de cima.
     E o que tira o aspecto de retangulo chapado. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%),
    var(--painel);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.cartao:hover {
  transform: translateY(-4px);
  border-color: rgba(30, 91, 255, 0.45);
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, 0.95);
}

/* Fio de luz azul que corre no topo do cartao quando o mouse chega */
.cartao::after {
  content: '';
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--azul), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.cartao:hover::after {
  opacity: 1;
}

/* Cartao que e um link inteiro. A seta anda quando o mouse chega. */
.cartao--link {
  display: flex;
  flex-direction: column;
}
.cartao--link .cartao__seta {
  margin-top: auto;
  padding-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fonte-codigo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--azul-claro);
}
.cartao--link .cartao__seta svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cartao--link:hover .cartao__seta svg {
  transform: translateX(5px);
}

.cartao--neon {
  position: relative;
  border: 0;
}
/* O fio de luz da moldura. Feito com mascara para so pintar a borda. */
.cartao--neon::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--azul), var(--gelo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.45;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.cartao--neon:hover::before {
  opacity: 1;
}
.cartao--neon-gelo::before {
  background: linear-gradient(140deg, var(--gelo), var(--azul));
}

.cartao__icone {
  width: 36px;
  height: 36px;
  color: var(--azul-claro);
  transition: color 0.3s ease;
}
.cartao:hover .cartao__icone {
  color: var(--azul-vivo);
}
.cartao__icone--gelo {
  color: var(--gelo);
}
.cartao:hover .cartao__icone--gelo {
  color: var(--gelo-claro);
}

/* Icone dentro de caixinha, usado nos cartoes de servico */
.cartao__icone-caixa {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%),
    rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--gelo);
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cartao:hover .cartao__icone-caixa {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 22px -4px rgba(255, 255, 255, 0.55);
}
.cartao__icone-caixa--azul {
  border-color: rgba(30, 91, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%),
    rgba(30, 91, 255, 0.12);
  color: var(--azul-claro);
}
.cartao:hover .cartao__icone-caixa--azul {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 22px -4px rgba(77, 135, 255, 0.6);
}
.cartao__icone-caixa--azul {
  border-color: rgba(30, 91, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%),
    var(--azul-fundo);
  color: var(--azul-claro);
}
.cartao:hover .cartao__icone-caixa--azul {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 22px -4px rgba(30, 91, 255, 0.7);
}

/* Icone dentro de cartao ja azul: vidro branco, nao azul sobre azul */
.cartao__icone-caixa--sobre-azul {
  border-color: rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  color: #fff;
}
.cartao:hover .cartao__icone-caixa--sobre-azul {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px -4px rgba(255, 255, 255, 0.7);
}

.cartao__titulo {
  margin-top: 1.5rem;
  font-size: 17px;
  font-weight: 700;
}
.cartao__texto {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--texto-suave);
}
.cartao__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--gelo-claro);
}

/* Cartao solido: fundo azul cheio, para os blocos que precisam pesar.
   Use alternando --azul e --azul-noite dentro da mesma grade. */
.cartao--solido {
  overflow: hidden;
  border: 0;
  background: var(--azul);
  color: #fff;
}
.cartao--solido-noite {
  background: var(--azul-escuro);
}
.cartao--solido .cartao__texto {
  /* Quase branco puro: sobre o azul cheio, qualquer transparencia maior
     derruba o contraste abaixo do minimo de leitura. */
  color: rgba(255, 255, 255, 0.95);
}
.cartao--solido:hover {
  border-color: transparent;
  box-shadow: 0 26px 50px -30px rgba(30, 91, 255, 0.9);
}
.cartao--solido::after {
  display: none;   /* o fio de luz nao aparece sobre fundo cheio */
}

/* Um botao azul dentro de um cartao azul sumiria: dentro do cartao solido
   ele vira branco, do mesmo jeito que acontece no painel final. */
.cartao--solido .botao--loja {
  background: #fff;
  color: var(--azul-escuro);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.7);
}
.cartao--solido .botao--loja:hover {
  background: var(--gelo-claro);
}

/* Icone grande e apagado no canto, como marca d'agua do cartao */
.cartao__marca-agua {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 108px;
  height: 108px;
  color: rgba(255, 255, 255, 0.13);
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cartao:hover .cartao__marca-agua {
  transform: translate(-4px, -4px) rotate(-6deg);
}

/* Cartao com contorno azul aceso desde o inicio. Serve para as grades que,
   so com a borda branca fraca, sumiam no fundo preto. */
.cartao--contorno-azul {
  border-color: rgba(30, 91, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(30, 91, 255, 0.12), rgba(255, 255, 255, 0) 45%),
    var(--painel);
}
.cartao--contorno-azul:hover {
  border-color: var(--azul);
  box-shadow: 0 22px 46px -28px rgba(30, 91, 255, 0.85);
}
.cartao--contorno-azul .cartao__icone {
  color: var(--azul-vivo);
}

/* --- Cartao de produto ---
   Fundo azul escuro cheio, icone grande em cima de um circulo aceso.
   Ao passar o mouse o fundo clareia para o azul vivo e o icone sobe.
   Fica abaixo do painel de acao na hierarquia: o painel e azul vivo
   desde o inicio, o cartao so chega la no hover. */
.cartao--produto {
  overflow: hidden;
  padding: 2rem 1.5rem;
  border-color: rgba(30, 91, 255, 0.5);
  background:
    linear-gradient(170deg, rgba(30, 91, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    var(--azul-noite);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.cartao--produto:hover {
  transform: translateY(-6px);
  border-color: var(--azul-vivo);
  background: linear-gradient(170deg, var(--azul), var(--azul-escuro));
  box-shadow: 0 28px 54px -26px rgba(30, 91, 255, 0.95);
}

/* O disco aceso atras do icone */
.cartao--produto .cartao__icone {
  width: 30px;
  height: 30px;
  margin: 0.35rem;
  color: #fff;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cartao--produto:hover .cartao__icone {
  transform: scale(1.12);
  color: #fff;
}
.cartao__disco {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--azul), var(--azul-escuro));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 6px rgba(30, 91, 255, 0.14);
  transition: box-shadow 0.4s ease;
}
.cartao--produto:hover .cartao__disco {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 8px rgba(255, 255, 255, 0.16),
    0 0 26px rgba(77, 135, 255, 0.8);
}
.cartao--produto .cartao__titulo {
  margin-top: 1.35rem;
  font-size: 19px;
}
.cartao--produto .cartao__texto {
  color: rgba(255, 255, 255, 0.9);
}

/* --- Cartao de avaliacao ---
   Serve tanto para as avaliacoes escritas no HTML quanto para as que o
   arquivo avaliacoes.php traz do Google. As duas usam as mesmas classes,
   entao trocar de uma para a outra nao muda a aparencia. */
.avaliacao {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.avaliacao__estrelas {
  display: flex;
  gap: 3px;
  color: var(--azul-vivo);
}
.avaliacao__estrelas svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.avaliacao__texto {
  margin-top: 1.1rem;
  font-size: 15px;
  line-height: 1.65;
  color: var(--texto-suave);
}
.avaliacao__rodape {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
}
/* O filete precisa nascer colado nas bordas do cartao, e o cartao tem
   1.5rem de recuo interno. Por isso as margens negativas. */
.avaliacao__rodape {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.avaliacao__rodape > span {
  line-height: 1.35;
}
.avaliacao__foto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--azul-escuro);
}
.avaliacao__autor {
  font-size: 14px;
  font-weight: 700;
}
.avaliacao__quando {
  font-size: 12px;
  color: var(--texto-fraco);
}

/* Selo do Google embaixo da grade. As regras do Google pedem que a origem
   da avaliacao fique visivel, entao esta linha nao deve ser removida. */
.selo-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 13px;
  color: var(--texto-fraco);
}
.selo-google a {
  color: var(--azul-claro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Cartao tecnico ---
   Mesma forma do cartao de produto, com o disco branco no lugar do azul.
   E o que separa o lado que conserta do lado que vende sem inventar uma
   terceira cor. */
.cartao--tecnico {
  padding: 2rem 1.5rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(4px);
}
.cartao--tecnico:hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.9);
}
.cartao--tecnico .cartao__disco {
  background: linear-gradient(150deg, #fff, #C9D8F5);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 6px rgba(255, 255, 255, 0.08);
}
.cartao--tecnico .cartao__icone {
  width: 28px;
  height: 28px;
  color: var(--azul-noite);
}
.cartao--tecnico:hover .cartao__disco {
  box-shadow: inset 0 1px 0 #fff, 0 0 0 9px rgba(255, 255, 255, 0.14), 0 0 24px rgba(255, 255, 255, 0.5);
}
.cartao--tecnico .cartao__titulo {
  margin-top: 1.35rem;
  font-size: 18px;
}

/* --- Bloco de conversao ao lado do texto da assistencia --- */
.aviso-tecnico {
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--arredondamento);
  background: rgba(255, 255, 255, 0.05);
}
.aviso-tecnico__titulo {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}
.aviso-tecnico__lista {
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0;
}
.aviso-tecnico__lista li {
  display: flex;
  gap: 0.75rem;
  font-size: 15px;
  color: var(--texto-suave);
}
.aviso-tecnico__lista svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: #fff;
}

/* Cartao pontilhado, para conteudo que ainda sera preenchido */
.cartao--reservado {
  border-style: dashed;
  background: none;
  text-align: center;
}


/* =========================================================================
   09. FITA ROLANTE
   ========================================================================= */
.fita {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  background: var(--fundo-alt);
}
.fita__trilho {
  display: flex;
  width: max-content;
  animation: rolar 34s linear infinite;
}
.fita:hover .fita__trilho {
  animation-play-state: paused;
}
@keyframes rolar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.fita__lista {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.fita__item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-suave);
}
.fita__item::after {
  content: '';
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--azul-vivo);
}
/* Pontas escurecidas para a fita nao parecer cortada */
.fita::before,
.fita::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 7rem;
  pointer-events: none;
  background: linear-gradient(90deg, var(--fundo-alt), transparent);
}
.fita::after {
  inset: 0 0 0 auto;
  background: linear-gradient(270deg, var(--fundo-alt), transparent);
}


/* =========================================================================
   10. FAIXA DE FATOS
   ========================================================================= */
/* O painel azul solido. E o bloco que corta o preto da pagina e segura
   os dados que sustentam a marca. */
.faixa-fatos {
  padding: 4.5rem 0 var(--espaco-secao);
  background: var(--fundo);
}
.faixa-fatos__lista {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul) 130%);
  box-shadow: 0 34px 70px -40px rgba(30, 91, 255, 0.85);
}
/* Duas ondas claras no fundo do painel, para ele nao ficar chapado */
.faixa-fatos__lista::before,
.faixa-fatos__lista::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.faixa-fatos__lista::before {
  right: -8%;
  top: -70%;
  width: 480px;
  height: 480px;
}
.faixa-fatos__lista::after {
  left: -6%;
  bottom: -80%;
  width: 380px;
  height: 380px;
}
.faixa-fatos__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 3rem 1.75rem;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.faixa-fatos__item:first-child {
  border-left: 0;
}
.faixa-fatos__item svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.65);
}
.faixa-fatos__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
}
/* Risco curto entre o dado e a legenda, como no painel de uma bancada */
.faixa-fatos__valor + .faixa-fatos__nota::before {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin: 0 auto 0.75rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
}
.faixa-fatos__nota {
  margin-top: 0.25rem;
  font-family: var(--fonte-codigo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================================
   11. LISTA DE SINTOMAS
   ========================================================================= */
.sintomas {
  overflow: hidden;
  border: 1px solid rgba(30, 91, 255, 0.35);
  border-radius: var(--arredondamento);
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(30, 91, 255, 0.16), transparent 60%),
    var(--painel);
}
.sintomas__cabecalho {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--linha);
  background: var(--azul-fundo);
}
.sintomas__cabecalho h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
}
.sintomas__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.sintomas__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--linha);
  font-size: 15px;
  color: var(--texto-suave);
}
.sintomas__item:nth-child(odd) {
  border-right: 1px solid var(--linha);
}
.sintomas__item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--azul-claro);
}
/* O rodape do bloco fecha em azul: e onde esta o botao */
.sintomas__rodape {
  background: linear-gradient(120deg, var(--azul-noite), var(--azul-escuro));
}
.sintomas__rodape span {
  color: rgba(255, 255, 255, 0.85);
}
.sintomas__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
}
.sintomas__rodape strong {
  display: block;
  font-size: 15px;
}
.sintomas__rodape span {
  display: block;
  margin-top: 0.35rem;
  font-size: 14px;
  color: var(--texto-suave);
}


/* =========================================================================
   12. ETAPAS NUMERADAS
   A numeracao existe aqui porque a ordem importa de verdade.
   ========================================================================= */
.etapas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.etapa {
  position: relative;
  padding-top: 4.25rem;
}

/* O traco que liga uma etapa a proxima. E ele que faz a sequencia parecer
   um caminho, e nao quatro caixas soltas lado a lado. A ultima etapa nao
   tem traco, senao a linha continuaria para o vazio. */
.etapa:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 70px;
  right: -1.4rem;
  top: 30px;
  height: 2px;
  background: var(--azul);
  opacity: 0.55;
}

/* A bolinha numerada, que fica sobre a linha */
.etapa__numero {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 2px solid var(--azul);
  border-radius: 50%;
  background: var(--fundo);
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.etapa:hover .etapa__numero {
  transform: translateY(-3px);
  box-shadow: 0 0 26px -4px rgba(30, 91, 255, 0.9);
}

.etapa__titulo {
  font-size: 18px;
  font-weight: 700;
}
.etapa__texto {
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--texto-suave);
}

/* A etapa em que o cliente decide. E a que responde o medo de deixar o
   aparelho e receber uma conta que ninguem combinou, entao ela e a unica
   pintada de azul. */
.etapa--sua .etapa__numero {
  background: var(--azul);
  border-color: var(--azul);
  box-shadow: 0 0 30px -6px rgba(30, 91, 255, 0.95);
}
.etapa--sua .etapa__titulo {
  color: var(--azul-claro);
}


/* =========================================================================
   12B. SELETOR DE PLATAFORMA

   As quatro plataformas dentro de um painel unico, divididas por filete.
   E de proposito que nao sejam quatro cartoes soltos: aqui o visitante
   escolhe o aparelho dele, entao o bloco tem que parecer uma lista de
   opcoes, e nao mais uma grade de cartoes como as outras secoes.
   ========================================================================= */
.seletor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid rgba(30, 91, 255, 0.4);
  border-radius: var(--arredondamento);
  background: var(--painel);
}

.seletor__opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 2rem 1.75rem 1.75rem;
  border-left: 1px solid var(--linha);
  transition: background 0.3s ease;
}
.seletor__opcao:first-child {
  border-left: 0;
}
.seletor__opcao:hover,
.seletor__opcao:focus-visible {
  background: linear-gradient(180deg, rgba(30, 91, 255, 0.22), transparent);
}

/* Faixa azul que acende no topo da opcao escolhida */
.seletor__opcao::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.seletor__opcao:hover::before,
.seletor__opcao:focus-visible::before {
  transform: scaleX(1);
}

.seletor__icone {
  width: 30px;
  height: 30px;
  margin-bottom: 0.75rem;
  color: var(--azul-vivo);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.seletor__opcao:hover .seletor__icone {
  transform: translateY(-3px) scale(1.08);
}

.seletor__nome {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  font-weight: 800;
}
.seletor__modelos {
  font-family: var(--fonte-codigo);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.seletor__acao {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  /* Empurra a acao para o pe da celula, para as quatro alinharem mesmo
     quando a linha de modelos quebra em duas. */
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-claro);
}
.seletor__acao svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.seletor__opcao:hover .seletor__acao svg {
  transform: translateX(4px);
}


/* =========================================================================
   13. PERGUNTAS FREQUENTES
   Usa <details> e <summary> do proprio HTML: abre e fecha sem JavaScript.
   ========================================================================= */
.perguntas {
  max-width: 48rem;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--arredondamento);
}
.pergunta {
  border-bottom: 1px solid var(--linha);
}
.pergunta:last-child {
  border-bottom: 0;
}
.pergunta[open] {
  background: rgba(255, 255, 255, 0.02);
}
.pergunta__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.75rem;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s ease;
}
.pergunta__titulo::-webkit-details-marker {
  display: none;
}
.pergunta__titulo:hover {
  background: rgba(255, 255, 255, 0.03);
}
.pergunta__titulo svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--azul-claro);
  transition: transform 0.3s ease;
}
.pergunta[open] .pergunta__titulo svg {
  transform: rotate(45deg);
}
.pergunta__resposta {
  padding: 0 1.75rem 1.5rem;
  font-size: 15px;
  color: var(--texto-suave);
}


/* =========================================================================
   14. BLOCO FINAL DE CHAMADA
   ========================================================================= */
.chamada {
  position: relative;
  overflow: hidden;
  padding: var(--espaco-secao) 0;
  background: linear-gradient(135deg, var(--azul-noite), var(--azul-escuro) 60%, var(--azul));
  text-align: center;
}
/* Onda clara no canto, a mesma do painel de fatos */
.chamada::before {
  content: '';
  position: absolute;
  right: -6%;
  top: -60%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  pointer-events: none;
}
.chamada__linha {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 135, 255, 0.5), rgba(255, 255, 255, 0.4), transparent);
}
.chamada__interno {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}
.chamada__titulo {
  font-size: clamp(1.95rem, 3.5vw, 2.85rem);
  font-weight: 800;
}
.chamada__texto {
  margin-top: 1.75rem;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.86);
}
/* Dentro do painel azul, um botao azul sumiria. O botao principal vira
   branco e o secundario fica so no contorno. */
.chamada .botao--loja {
  background: #fff;
  color: var(--azul-escuro);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
.chamada .botao--loja:hover {
  background: var(--gelo-claro);
}
.chamada .botao--contorno {
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}

.chamada__botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.75rem;
}


/* =========================================================================
   15. RODAPE
   ========================================================================= */
.rodape {
  border-top: 1px solid var(--linha);
  background: var(--fundo-alt);
}
.rodape__interno {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 1.1fr;
  gap: 3rem;
  padding: 4rem 0;
}
.rodape__sobre {
  max-width: 24rem;
  margin-top: 1.5rem;
  font-size: 14px;
  color: var(--texto-suave);
}
.rodape__titulo {
  font-family: var(--fonte-codigo);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gelo-claro);
}
.rodape__lista {
  margin-top: 0.75rem;
}
.rodape__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* alvo de toque confortavel no celular */
  font-size: 14px;
  color: var(--texto-suave);
  transition: color 0.2s ease;
}
.rodape__lista a:hover {
  color: var(--texto);
}
.rodape__contato {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  font-size: 14px;
  color: var(--texto-suave);
}
.rodape__contato li {
  display: flex;
  gap: 0.9rem;
}
/* Links do rodape precisam de area de toque confortavel no celular */
.rodape__contato a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color 0.2s ease;
}
.rodape__contato a:hover {
  color: var(--texto);
}
.rodape__contato svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--gelo);
}
.rodape__aviso {
  padding: 1.5rem 0;
  border-top: 1px solid var(--linha);
  font-family: var(--fonte-codigo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--texto-fraco);
}


/* =========================================================================
   16. BOTAO FLUTUANTE DO WHATSAPP
   ========================================================================= */
.whatsapp-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 18px 50px -24px rgba(77, 135, 255, 0.6), 0 4px 14px -8px rgba(0, 0, 0, 0.8);
  transition: background 0.3s ease;
}
.whatsapp-flutuante:hover {
  background: var(--azul);
}
.whatsapp-flutuante svg {
  width: 22px;
  height: 22px;
}


/* =========================================================================
   17. EFEITOS

   Todos os efeitos abaixo sao opcionais: se o JavaScript nao carregar, o
   site continua legivel e navegavel. Nada fica escondido esperando animacao.
   ========================================================================= */

/* --- Barra de progresso da leitura --- */
.progresso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 99;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--azul), var(--azul-vivo), var(--gelo));
}

/* --- Revelacao ao rolar --- */
/* O JavaScript adiciona a classe .visivel quando o bloco entra na tela */
[data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--atraso, 0ms);
}
[data-revelar].visivel {
  opacity: 1;
  transform: none;
}

/* --- Traco do desenho tecnico --- */
.traco {
  stroke-dasharray: var(--comprimento, 1200);
  stroke-dashoffset: var(--comprimento, 1200);
  transition: stroke-dashoffset 1.6s cubic-bezier(0.33, 1, 0.68, 1);
  transition-delay: var(--atraso, 0ms);
}
.visivel .traco {
  stroke-dashoffset: 0;
}

/* Autoteste: depois de desenhado, os botoes piscam tres vezes */
.visivel .autoteste {
  animation: autoteste 1.1s ease-in-out 2.4s 3 both;
}
@keyframes autoteste {
  0%, 100% { opacity: 1;    filter: none; }
  50%      { opacity: 0.35; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); }
}

/* --- Holofote na moldura neon (segue o ponteiro) --- */
[data-holofote] {
  --pos-x: 50%;
  --pos-y: 0%;
}
[data-holofote].cartao--neon::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--pos-x) var(--pos-y),
              var(--azul-vivo), var(--azul) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
[data-holofote].cartao--neon:hover::after {
  opacity: 1;
}
[data-holofote].cartao--neon-gelo::after {
  background: radial-gradient(260px circle at var(--pos-x) var(--pos-y),
              var(--gelo), var(--azul) 45%, transparent 70%);
}

/* --- Inclinacao do cartao sob o ponteiro --- */
[data-inclinar] {
  transform: perspective(1000px) rotateX(var(--giro-x, 0deg)) rotateY(var(--giro-y, 0deg));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-inclinar].inclinando {
  transition: transform 0.12s linear;
}

/* --- Ima: o botao persegue o ponteiro de leve --- */
[data-ima] {
  transform: translate3d(var(--desloc-x, 0), var(--desloc-y, 0), 0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-ima].puxando {
  transition: transform 0.12s linear;
}


/* =========================================================================
   18. RESPONSIVO
   ========================================================================= */
@media (max-width: 1024px) {
  .hero__interno {
    grid-template-columns: 1fr;
  }
  .quadro {
    max-width: 420px;   /* no tablet o quadro fica um pouco menor */
  }
  .grade--5,
  .grade--4,
  .grade--3,
  .seletor {
    grid-template-columns: repeat(2, 1fr);
  }
  .seletor__opcao:nth-child(3) {
    border-left: 0;
  }
  .seletor__opcao:nth-child(n+3) {
    border-top: 1px solid var(--linha);
  }
  .etapas {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Em duas colunas, o traco da segunda etapa apontaria para fora */
  .etapa:nth-child(2)::after {
    display: none;
  }
  .etapas {
    row-gap: 2.5rem;
  }
  .rodape__interno {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --espaco-secao: 4.5rem;
  }

  /* No celular, o menu vira hamburguer */
  .menu,
  .cabecalho__acoes {
    display: none;
  }
  .hamburguer {
    display: block;
  }

  .hero {
    padding: 7.5rem 0 4rem;
  }
  .grade--2,
  .grade--3,
  .grade--4,
  .grade--5,
  .seletor,
  .etapas,
  .faixa-fatos__lista,
  .sintomas__lista,
  .rodape__interno {
    grid-template-columns: 1fr;
  }
  .provas {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .etapa:not(:last-child)::after {
    display: none;
  }
  .seletor__opcao {
    border-left: 0;
    border-top: 1px solid var(--linha);
  }
  .seletor__opcao:first-child {
    border-top: 0;
  }
  .faixa-fatos__item {
    border-right: 0;
    border-bottom: 1px solid var(--linha);
  }
  .etapa:last-child,
  .faixa-fatos__item:last-child {
    border-bottom: 0;
  }
  .faixa-fatos__item {
    padding: 2rem 1.5rem;
    border-left: 0;
  }
  .faixa-fatos__item:last-child {
    border-bottom: 0;
  }
  .sintomas__item {
    padding: 1rem 1.5rem;
    border-right: 0 !important;
  }
  .sintomas__cabecalho,
  .sintomas__rodape {
    padding: 1.5rem;
  }
  .sintomas__rodape {
    flex-direction: column;
    align-items: stretch;
  }
  .botao {
    width: 100%;
  }
  .quadro__moldura {
    padding: 10px;
  }
  .quadro__paspatur {
    padding: 8px;
  }
  .whatsapp-flutuante {
    padding: 0;
    width: 56px;
    justify-content: center;
  }
  .whatsapp-flutuante span {
    display: none;
  }
}


/* =========================================================================
   19. MOVIMENTO REDUZIDO E IMPRESSAO
   Respeita quem configurou o sistema para reduzir animacoes.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-revelar] {
    opacity: 1;
    transform: none;
  }
  .traco {
    stroke-dashoffset: 0;
  }
  .fita__trilho {
    animation: none;
  }
}

@media print {
  .cabecalho,
  .whatsapp-flutuante,
  .progresso,
  .fita {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}