/* =====================================================================
   LIMAA TEC — ESTILOS DA LANDING PAGE (css/style.css)
   ---------------------------------------------------------------------
   Abordagem MOBILE-FIRST: os estilos "soltos" valem para o celular.
   Telas maiores recebem ajustes dentro de @media (min-width: ...), no
   bloco 8. Assim o celular (onde está a maioria dos visitantes) baixa
   e aplica só o necessário, e o código fica mais fácil de seguir.

   Índice:
     1. Tokens (variáveis de design)
     2. Reset
     3. Tipografia
     4. Layout
     5. Componentes (botões, cards, header, menu, mockup, FAQ...)
     6. Seções
     7. Utilitários e animações de entrada
     8. Responsivo (tablet, desktop, telas grandes)
     9. Preferências de acessibilidade (movimento reduzido)
   ===================================================================== */


/* =====================================================================
   1. TOKENS (VARIÁVEIS DE DESIGN)
   ---------------------------------------------------------------------
   Toda cor, fonte e medida importante fica aqui. Para mudar a cara do
   site (ex.: a cor ciano), altere SÓ este bloco: o resto do CSS lê
   essas variáveis com var(--nome).
   ===================================================================== */
:root {
  /* --- Cores da marca --- */
  --cor-primaria: #00d4ff;                    /* Ciano: destaque, links e botões */
  --cor-primaria-hover: #66e5ff;              /* Ciano mais claro para o hover */
  --cor-primaria-suave: rgba(0, 212, 255, 0.12); /* Fundo leve de ícones e etiquetas */
  --cor-brilho: rgba(0, 212, 255, 0.35);      /* Brilho (sombra) ciano dos cards */

  /* --- Fundos --- */
  --cor-fundo: #0a0e14;                       /* Fundo principal (quase preto azulado) */
  --cor-fundo-alt: #101722;                   /* Seções alternadas */
  --cor-card: #141c2a;                        /* Cards */

  /* --- Textos --- (contraste conferido: todos passam no WCAG AA sobre os fundos acima) */
  --cor-texto: #e8eef7;                       /* Texto principal */
  --cor-texto-sec: #9fb0c6;                   /* Texto secundário (≈ 7,6:1 sobre o card) */
  --cor-cta-texto: #04121a;                   /* Texto escuro sobre o botão ciano (≈ 10:1) */

  /* --- Bordas --- */
  --cor-borda: rgba(255, 255, 255, 0.08);     /* Borda sutil padrão */
  --cor-borda-forte: rgba(255, 255, 255, 0.16);
  --cor-borda-destaque: rgba(0, 212, 255, 0.45); /* Borda ciano no hover */

  /* --- WhatsApp: usado SOMENTE no botão flutuante --- */
  --cor-whatsapp: #25d366;

  /* --- Fontes ---
     Depois do nome da fonte vêm "reservas" do sistema, usadas enquanto a
     fonte do Google carrega (ou se ela não carregar). */
  --fonte-titulo: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Espaçamentos (escala de 4 em 4 px, em rem) --- */
  --espaco-1: 0.25rem;  /*  4px */
  --espaco-2: 0.5rem;   /*  8px */
  --espaco-3: 0.75rem;  /* 12px */
  --espaco-4: 1rem;     /* 16px */
  --espaco-5: 1.5rem;   /* 24px */
  --espaco-6: 2rem;     /* 32px */
  --espaco-7: 2.5rem;   /* 40px */
  --espaco-8: 3rem;     /* 48px */

  /* --- Cantos arredondados --- */
  --raio-p: 12px;
  --raio-g: 16px;
  --raio-pilula: 999px;

  /* --- Medidas de layout (algumas mudam no bloco 8) --- */
  --altura-header: 64px;      /* Altura do cabeçalho fixo; usada para compensar as âncoras */
  --largura-max: 1180px;      /* Largura máxima do conteúdo */
  --gutter: 1rem;             /* Respiro lateral da página */
  --secao-espaco: 4.5rem;     /* Espaço vertical entre seções */
  --tamanho-flutuante: 60px;  /* Botão flutuante do WhatsApp (mínimo pedido: 56px) */

  /* --- Movimento --- */
  --transicao: 200ms ease;
  --curva-suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =====================================================================
   2. RESET
   ---------------------------------------------------------------------
   Zera diferenças entre navegadores e define padrões mais previsíveis.
   ===================================================================== */

/* box-sizing: border-box faz padding e borda contarem DENTRO da largura.
   Sem isso, um elemento com width: 100% + padding "estoura" a tela. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Tira as margens padrão para controlarmos todo o espaçamento. */
body,
h1, h2, h3, h4,
p, ul, ol, dl, dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

/* Imagens nunca passam da largura do "pai" e mantêm a proporção.
   O width/height escritos no HTML continuam servindo para o navegador
   reservar o espaço antes da imagem chegar (evita "pulos" na página). */
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Botões e links herdam a fonte do site (por padrão, botões usam a do sistema). */
button,
a {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Rede de segurança contra rolagem horizontal: se algum elemento passar da
   tela por engano, ele é cortado em vez de criar uma barra lateral.
   Isso NÃO substitui corrigir a causa; é só uma proteção extra. */
body {
  overflow-x: clip;
}

/* Rolagem suave nas âncoras, só para quem NÃO pediu menos movimento no sistema. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* =====================================================================
   3. TIPOGRAFIA
   ===================================================================== */
body {
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  -webkit-font-smoothing: antialiased; /* Texto claro em fundo escuro fica mais fino e nítido no Mac */
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance; /* Equilibra as linhas do título (evita uma palavra sozinha na última linha) */
}

p {
  text-wrap: pretty; /* Evita "viúvas" em parágrafos (navegadores que não suportam ignoram) */
}

/* clamp(mínimo, ideal, máximo): o tamanho cresce com a tela, mas dentro de limites. */
.hero__titulo {
  font-size: clamp(2rem, 1.25rem + 3.6vw, 3.75rem);
}

.secao__titulo {
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 600;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

/* Rótulo pequeno acima dos títulos ("Serviços", "Cases"...). */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--espaco-3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-primaria);
}

/* Trecho do título pintado de ciano. */
.texto-destaque {
  color: var(--cor-primaria);
}

/* Degradê no texto: só aplica se o navegador suportar "background-clip: text".
   Sem esse @supports, um navegador antigo deixaria o texto transparente (invisível). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .texto-destaque {
    background: linear-gradient(90deg, var(--cor-primaria), #7ae8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}


/* =====================================================================
   4. LAYOUT
   ===================================================================== */

/* Container: centraliza o conteúdo e limita a largura em telas grandes. */
.container {
  width: 100%;
  max-width: calc(var(--largura-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Versão mais estreita, para blocos de leitura (FAQ). */
.container--estreito {
  max-width: calc(820px + var(--gutter) * 2);
}

/* Espaço vertical padrão de cada seção. */
.secao {
  padding-block: var(--secao-espaco);
}

/* Seções alternadas: fundo um pouco mais claro + brilho ciano discreto no canto,
   para separar visualmente uma seção da outra. */
.secao--alternada {
  background-color: var(--cor-fundo-alt);
  background-image: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(0, 212, 255, 0.06), transparent 70%);
}

/* O cabeçalho é fixo e ficaria POR CIMA do título ao clicar numa âncora do menu.
   scroll-margin-top faz o navegador parar um pouco antes, compensando a altura dele. */
section[id],
main {
  scroll-margin-top: calc(var(--altura-header) + var(--espaco-4));
}

/* O <main> recebe foco pelo skip link; não precisa de contorno, porque não é clicável. */
main:focus {
  outline: none;
}

/* Cabeçalho de cada seção (rótulo + título + descrição), centralizado. */
.secao__cabecalho {
  max-width: 680px;
  margin: 0 auto var(--espaco-7);
  text-align: center;
}

.secao__descricao {
  margin-top: var(--espaco-4);
  font-size: 1.0625rem;
  color: var(--cor-texto-sec);
}

/* Grade genérica dos cards: 1 coluna no celular (mais colunas no bloco 8).
   minmax(0, 1fr) impede que um texto longo force a coluna a ficar maior que a tela. */
.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-5);
}


/* =====================================================================
   5. COMPONENTES
   ===================================================================== */

/* ---------- 5.1 Foco visível (navegação por teclado) ----------
   :focus-visible aparece quando a pessoa navega pelo teclado (Tab), mas não
   ao clicar com o mouse. Nunca remova o contorno sem colocar outro no lugar. */
:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 5.2 Skip link ----------
   Fica escondido acima da tela e desce quando recebe foco pelo Tab. */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--espaco-4);
  z-index: 200;
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-p);
  background: var(--cor-primaria);
  color: var(--cor-cta-texto);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transicao);
}

.skip-link:focus {
  top: var(--espaco-4);
}

/* ---------- 5.3 Ícones SVG ----------
   O tamanho acompanha o texto (em = tamanho da fonte), e a cor vem de "currentColor". */
.icone {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Esconde a "biblioteca" de ícones sem usar display: none (alguns navegadores
   deixam de desenhar os <symbol> quando o SVG está com display: none). */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 5.4 Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  min-height: 48px;                 /* Alvo de toque confortável (mínimo recomendado: 44px) */
  padding: var(--espaco-3) var(--espaco-5);
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicao), border-color var(--transicao),
              box-shadow var(--transicao), transform var(--transicao), color var(--transicao);
}

/* Principal: ciano sólido com texto escuro (é o botão que mais chama atenção). */
.btn--primario {
  background-color: var(--cor-primaria);
  color: var(--cor-cta-texto);
}

/* Secundário: só contorno, para não competir com o principal. */
.btn--secundario {
  border-color: var(--cor-borda-destaque);
  color: var(--cor-texto);
}

/* Variações de tamanho. */
.btn--pequeno {
  min-height: 44px;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.btn--grande {
  min-height: 52px;
  padding: 0.875rem var(--espaco-5);
}

/* No celular o botão enorme ocupa a largura toda (no bloco 8 volta ao tamanho do texto). */
.btn--enorme {
  width: 100%;
  min-height: 60px;
  padding: var(--espaco-4) var(--espaco-5);
  font-size: 1.125rem;
}

.btn--grande .icone,
.btn--enorme .icone {
  width: 1.4em;
  height: 1.4em;
}

/* Hover só em aparelhos com mouse: no celular, o "hover" fica preso depois do toque. */
@media (hover: hover) {
  .btn--primario:hover {
    background-color: var(--cor-primaria-hover);
    box-shadow: 0 8px 28px -8px var(--cor-brilho);
    transform: translateY(-2px);
  }

  .btn--secundario:hover {
    background-color: var(--cor-primaria-suave);
    border-color: var(--cor-primaria);
  }
}

/* Link de ação dentro dos cards de serviço ("Pedir orçamento →"). */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  margin-top: auto;            /* Empurra o link para o fim do card (todos ficam alinhados) */
  font-weight: 600;
  color: var(--cor-primaria);
  text-decoration: none;
}

.link-cta:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Link discreto (ex.: portfólio na seção Sobre). */
.link-discreto {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  color: var(--cor-primaria);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(0, 212, 255, 0.4);
}

.link-discreto:hover {
  text-decoration-color: currentColor;
}

/* ---------- 5.5 Cards ----------
   Base de todos os blocos em "cartão": fundo, borda sutil e cantos arredondados.
   No hover, a borda fica ciano e aparece um brilho leve. */
.card {
  position: relative;
  padding: var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g);
  background-color: var(--cor-card);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--cor-borda-destaque);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.12), 0 16px 40px -16px var(--cor-brilho);
  }
}

/* Etiqueta pequena (ex.: tipo de serviço nos cases). */
.etiqueta {
  display: inline-block;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-pilula);
  background-color: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- 5.6 Cabeçalho fixo ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;             /* Topo, ocupando a largura toda */
  z-index: 100;
  height: var(--altura-header);
  border-bottom: 1px solid var(--cor-borda);
  /* Fundo semitransparente + desfoque: o conteúdo passa "por baixo" de forma elegante. */
  background-color: rgba(10, 14, 20, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  height: 100%;
}

/* Logo do cabeçalho: só o símbolo "L". */
.header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* Área de toque confortável */
  margin-right: auto;            /* Empurra o resto do cabeçalho para a direita */
}

.header__logo img {
  width: 40px;
  height: 40px;
}

/* Marca do rodapé (símbolo "L" + nome em texto). */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
  text-decoration: none;
  white-space: nowrap;           /* "Limaa Tec" nunca quebra em duas linhas */
}

.marca__icone {
  width: 28px;
  height: 28px;
}

/* O "Tec" em ciano, combinando com o símbolo. */
.marca__destaque {
  color: var(--cor-primaria);
}

/* No celular, o CTA aparece antes do botão de menu (visualmente), mesmo vindo depois no HTML. */
.header__cta {
  order: 1;
}

/* ---------- 5.7 Botão do menu (hambúrguer) ---------- */
.menu-toggle {
  order: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 10px;
  background: transparent;
}

.menu-toggle__barra {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--cor-texto);
  transition: transform var(--transicao), opacity var(--transicao);
}

/* Quando o menu está aberto, as 3 barras viram um "X".
   O seletor usa o próprio aria-expanded: o visual sempre bate com o estado real. */
.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__barra:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sem JavaScript o botão não funcionaria, então fica invisível.
   "visibility: hidden" (em vez de display: none) mantém o espaço reservado,
   e nada "pula" de lugar quando o JS carrega. */
.no-js .menu-toggle {
  visibility: hidden;
}

/* ---------- 5.8 Menu de navegação (celular: painel que desce) ----------
   Escondido com visibility: hidden, que também tira os links da ordem do Tab
   enquanto o menu está fechado. */
.nav {
  position: fixed;
  inset: var(--altura-header) 0 auto 0;
  max-height: calc(100vh - var(--altura-header));
  overflow-y: auto;
  padding: var(--espaco-2) var(--gutter) var(--espaco-5);
  border-bottom: 1px solid var(--cor-borda);
  background-color: var(--cor-fundo-alt);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  /* O "visibility" só muda DEPOIS da animação de fechar (atraso de 200ms). */
  transition: opacity var(--transicao), transform var(--transicao), visibility 0s linear 200ms;
}

.nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--transicao), transform var(--transicao), visibility 0s;
}

.nav__lista {
  list-style: none;
}

.nav__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--cor-borda);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transicao);
}

.nav__link:hover {
  color: var(--cor-primaria);
}

/* ---------- 5.9 Mockup decorativo do hero (janela de navegador em CSS) ---------- */
.mockup {
  overflow: hidden;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-g);
  background-color: var(--cor-card);
  box-shadow: 0 30px 80px -30px rgba(0, 212, 255, 0.35), 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

.mockup__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--cor-borda);
  background-color: var(--cor-fundo-alt);
}

.mockup__bolinha {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--cor-borda-forte);
}

.mockup__bolinha:first-child {
  background-color: rgba(0, 212, 255, 0.6);
}

.mockup__url {
  flex: 1;
  min-width: 0;
  margin-left: var(--espaco-3);
  padding: 2px var(--espaco-3);
  overflow: hidden;
  border-radius: var(--raio-pilula);
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--cor-texto-sec);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mockup__tela {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
}

.mockup__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-3);
}

/* Todos os "blocos" do mockup são spans vazios com fundo: imitam textos e imagens. */
.mockup__logo,
.mockup__links,
.mockup__linha,
.mockup__card {
  display: block;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
}

.mockup__logo {
  width: 64px;
  height: 12px;
  background-color: rgba(0, 212, 255, 0.55);
}

.mockup__links {
  width: 40%;
  height: 8px;
}

.mockup__linha--titulo {
  width: 85%;
  height: 18px;
  background-color: rgba(232, 238, 247, 0.22);
}

.mockup__linha--titulo-curto {
  width: 55%;
  height: 18px;
  background-color: rgba(232, 238, 247, 0.22);
}

.mockup__linha--texto {
  width: 70%;
  height: 10px;
}

.mockup__botao {
  display: block;
  width: 120px;
  height: 32px;
  margin-block: var(--espaco-2);
  border-radius: 8px;
  background-color: var(--cor-primaria);
  box-shadow: 0 6px 20px -6px var(--cor-brilho);
}

.mockup__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-3);
  margin-top: var(--espaco-2);
}

.mockup__card {
  height: 56px;
  border: 1px solid var(--cor-borda);
  background-color: rgba(255, 255, 255, 0.04);
}

/* "Notificação" flutuando sobre o mockup. Fica DENTRO dos limites do hero
   (posições positivas) para não gerar rolagem horizontal no celular. */
.mockup__aviso {
  position: absolute;
  bottom: calc(var(--espaco-5) * -1);
  left: var(--espaco-4);
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-borda-destaque);
  border-radius: var(--raio-pilula);
  background-color: var(--cor-fundo-alt);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  color: var(--cor-texto);
  font-size: 0.8125rem;
  font-weight: 500;
}

.mockup__aviso-icone {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--cor-primaria);
  box-shadow: 0 0 0 4px var(--cor-primaria-suave);
}

/* ---------- 5.10 FAQ (details/summary) ---------- */
.faq__item {
  margin-bottom: var(--espaco-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  background-color: var(--cor-card);
  transition: border-color var(--transicao);
}

.faq__item[open] {
  border-color: var(--cor-borda-destaque);
}

.faq__pergunta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--espaco-4) 3.25rem var(--espaco-4) var(--espaco-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;              /* Remove a setinha padrão (Firefox/Chrome) */
}

.faq__pergunta::-webkit-details-marker {
  display: none;                 /* Remove a setinha padrão (Safari) */
}

/* Indicador "+" (fechado) e "−" (aberto).
   A sintaxe 'content: "+" / ""' define um texto alternativo vazio, para o leitor
   de tela não ler o sinal. A linha anterior é a reserva para navegadores antigos. */
.faq__pergunta::after {
  content: "+";
  content: "+" / "";
  position: absolute;
  top: 50%;
  right: var(--espaco-5);
  transform: translateY(-50%);
  color: var(--cor-primaria);
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  line-height: 1;
}

.faq__item[open] .faq__pergunta::after {
  content: "−";
  content: "−" / "";
}

.faq__resposta {
  padding: 0 var(--espaco-5) var(--espaco-5);
  color: var(--cor-texto-sec);
}

/* ---------- 5.11 Botão flutuante do WhatsApp ----------
   env(safe-area-inset-*) respeita a "franja" e a barra de gestos do iPhone. */
.whatsapp-flutuante {
  position: fixed;
  right: max(var(--espaco-4), env(safe-area-inset-right));
  bottom: max(var(--espaco-4), env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--tamanho-flutuante);
  height: var(--tamanho-flutuante);
  border-radius: 50%;
  background-color: var(--cor-whatsapp);
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.55), 0 4px 14px -4px rgba(37, 211, 102, 0.45);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.whatsapp-flutuante .icone {
  width: 32px;
  height: 32px;
}

@media (hover: hover) {
  .whatsapp-flutuante:hover {
    transform: scale(1.06);
  }
}


/* =====================================================================
   6. SEÇÕES
   ===================================================================== */

/* ---------- 6.1 Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* Espaço extra no topo porque o cabeçalho é fixo e fica por cima. */
  padding-top: calc(var(--altura-header) + var(--espaco-8));
  padding-bottom: calc(var(--secao-espaco) + var(--espaco-4));
  background:
    radial-gradient(ellipse 80% 60% at 75% 0%, rgba(0, 212, 255, 0.14), transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0, 212, 255, 0.06), transparent 70%),
    var(--cor-fundo);
}

/* Grade quadriculada bem sutil no fundo (toque "tech"), que some nas bordas com a máscara. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}

.hero__grid {
  position: relative;            /* Fica acima da grade quadriculada */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-8);
}

.hero__subtitulo {
  max-width: 560px;
  margin-top: var(--espaco-5);
  font-size: 1.125rem;
  color: var(--cor-texto-sec);
}

/* No celular os botões ficam um embaixo do outro, ocupando a largura toda (fáceis de tocar). */
.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  margin-top: var(--espaco-6);
}

.hero__nota {
  margin-top: var(--espaco-4);
  font-size: 0.9375rem;
  color: var(--cor-texto-sec);
}

.hero__pontos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3) var(--espaco-5);
  margin-top: var(--espaco-6);
  list-style: none;
}

.hero__pontos li {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.icone--check {
  color: var(--cor-primaria);
}

.hero__visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

/* Flutuação suave do mockup: só para quem não pediu menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  .mockup {
    animation: flutuar 6s ease-in-out infinite;
  }
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- 6.2 Serviços ---------- */
.servico {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.servico__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--espaco-2);
  border-radius: var(--raio-p);
  background-color: var(--cor-primaria-suave);
  color: var(--cor-primaria);
}

.servico__icone .icone {
  width: 26px;
  height: 26px;
}

.servico__texto {
  color: var(--cor-texto-sec);
}

/* ---------- 6.3 Cases ----------
   Flexbox com "wrap" e centralização: 2 cards por linha a partir do tablet.
   Se você adicionar um case e o total ficar ímpar, o último card fica
   centralizado sozinho na linha de baixo, em vez de colado à esquerda. */
.grade-cases {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-5);
}

.case {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  min-width: 0;
  padding: 0;                    /* A imagem encosta nas bordas; o padding fica no corpo */
  overflow: hidden;
}

.case__imagem {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-bottom: 1px solid var(--cor-borda);
}

.case__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-5);
}

.case__etapas {
  display: grid;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-2);
}

.case__etapas dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-primaria);
}

.case__etapas dd {
  color: var(--cor-texto-sec);
}

.case__botao {
  margin-top: auto;              /* Alinha os botões no fim de todos os cards */
}

/* ---------- 6.4 Como funciona ----------
   Os números (01, 02...) são gerados por um "contador" do CSS, sem escrever no HTML. */
.etapas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-5);
  list-style: none;
  counter-reset: etapa;
}

.etapa {
  counter-increment: etapa;
}

.etapa::before {
  content: counter(etapa, decimal-leading-zero);
  content: counter(etapa, decimal-leading-zero) / ""; /* O <ol> já informa a ordem ao leitor de tela */
  display: block;
  margin-bottom: var(--espaco-3);
  font-family: var(--fonte-titulo);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cor-primaria);
}

.etapa__titulo {
  margin-bottom: var(--espaco-2);
}

.etapa p {
  color: var(--cor-texto-sec);
}

/* ---------- 6.5 O que está incluso ---------- */
.incluso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-3);
  list-style: none;
}

.incluso__item {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  padding: var(--espaco-4) var(--espaco-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  background-color: var(--cor-card);
  font-weight: 500;
}

/* O check fica dentro de um círculo ciano clarinho. */
.incluso__item .icone--check {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--cor-primaria-suave);
}

.incluso__cta {
  margin-top: var(--espaco-7);
  text-align: center;
}

/* ---------- 6.6 Sobre ---------- */
.sobre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-7);
  align-items: center;
}

/* 380px é o tamanho real da foto (img/perfil.webp): maior que isso ela seria
   esticada e ficaria borrada. Para exibir maior, use uma foto com mais pixels. */
.sobre__foto {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}

.sobre__foto img {
  width: 100%;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-g);
  box-shadow: 0 20px 60px -30px var(--cor-brilho);
}

.sobre__foto figcaption {
  margin-top: var(--espaco-3);
  font-size: 0.875rem;
  text-align: center;
  color: var(--cor-texto-sec);
}

.sobre__texto p:not(.eyebrow) {
  margin-top: var(--espaco-4);
  color: var(--cor-texto-sec);
}

.sobre__texto .link-discreto {
  margin-top: var(--espaco-4);
}

/* ---------- 6.7 Contato (CTA final) ---------- */
.contato__caixa {
  max-width: 880px;
  margin-inline: auto;
  padding: var(--espaco-8) var(--espaco-5);
  border: 1px solid var(--cor-borda-destaque);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0, 212, 255, 0.16), transparent 70%),
    var(--cor-fundo-alt);
  text-align: center;
}

.contato__titulo {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
}

.contato__texto {
  max-width: 560px;
  margin: var(--espaco-4) auto var(--espaco-6);
  font-size: 1.0625rem;
  color: var(--cor-texto-sec);
}

.redes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--espaco-3);
  margin-top: var(--espaco-6);
  list-style: none;
}

.redes__link {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  min-height: 44px;
  padding: var(--espaco-2) var(--espaco-4);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  color: var(--cor-texto-sec);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--transicao), border-color var(--transicao);
}

.redes__link:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-texto);
}

/* ---------- 6.8 Rodapé ---------- */
.rodape {
  /* Espaço extra embaixo: o botão flutuante do WhatsApp nunca cobre o texto final. */
  padding: var(--espaco-8) 0 calc(var(--tamanho-flutuante) + var(--espaco-7));
  border-top: 1px solid var(--cor-borda);
  background-color: var(--cor-fundo);
  font-size: 0.9375rem;
  color: var(--cor-texto-sec);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--espaco-6);
}

.rodape__logo {
  margin-bottom: var(--espaco-3);
}

.rodape__titulo {
  margin-bottom: var(--espaco-2);
  font-family: var(--fonte-corpo);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-texto);
}

.rodape__lista {
  list-style: none;
}

.rodape__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape__lista a:hover {
  color: var(--cor-primaria);
}

.rodape__base {
  margin-top: var(--espaco-7);
  padding-top: var(--espaco-5);
  border-top: 1px solid var(--cor-borda);
  font-size: 0.875rem;
}


/* =====================================================================
   7. UTILITÁRIOS E ANIMAÇÕES DE ENTRADA
   ===================================================================== */

/* Esconde da TELA, mas mantém para leitores de tela.
   Usado para completar textos de links (ex.: "(abre em nova aba)"). */
.visualmente-oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Animação de entrada ao rolar a página ("reveal").
   - Só esconde quando existe a classe .js no <html> (colocada pelo main.js).
     Sem JavaScript, nada fica invisível.
   - O main.js adiciona .is-visible quando o elemento entra na tela.
   - --atraso cria o efeito "um depois do outro" (stagger) nos cards.
   - Cada propriedade tem sua própria transição: assim o atraso do stagger vale só
     para a entrada, e o hover dos cards (borda/brilho) continua instantâneo. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms ease var(--atraso, 0ms),
    transform 600ms var(--curva-suave) var(--atraso, 0ms),
    border-color var(--transicao),
    box-shadow var(--transicao);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* =====================================================================
   8. RESPONSIVO
   ---------------------------------------------------------------------
   Mobile-first: cada bloco abaixo ACRESCENTA ajustes a partir de uma
   largura mínima. Larguras de referência: 360px (base), 768px (tablet),
   1024px (desktop) e 1440px (telas grandes).
   ===================================================================== */

/* Exceção: telas menores que 360px (celulares muito antigos).
   O CTA do cabeçalho sai para não espremer o logo; o botão flutuante
   do WhatsApp continua disponível. */
@media (max-width: 359.98px) {
  .header__cta {
    display: none;
  }
}

/* --- Celulares maiores (480px+): botões do hero lado a lado --- */
@media (min-width: 480px) {
  .hero__ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .header__cta {
    font-size: 0.875rem;
    padding-inline: var(--espaco-4);
  }

  .btn--enorme {
    width: auto;
    padding-inline: var(--espaco-6);
  }
}

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --secao-espaco: 6rem;
  }

  /* 2 colunas nas grades de cards. */
  .grade,
  .etapas,
  .incluso {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cases: 2 por linha. */
  .case {
    flex: 0 1 calc(50% - var(--espaco-5) / 2);
  }

  /* Sobre: foto à esquerda, texto à direita. */
  .sobre {
    grid-template-columns: 5fr 7fr;
    gap: var(--espaco-8);
  }

  .contato__caixa {
    padding: 4rem var(--espaco-8);
  }

  .rodape__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: var(--espaco-6);
  }

  .case {
    padding: 0;
  }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  :root {
    --altura-header: 76px;
    --gutter: 2rem;
    --secao-espaco: 7rem;
  }

  .header__logo img {
    width: 44px;
    height: 44px;
  }

  .marca {
    gap: 0.5rem;
    font-size: 1.375rem;
  }

  .marca__icone {
    width: 36px;
    height: 36px;
  }

  /* O hambúrguer some e o menu vira uma linha de links no cabeçalho. */
  .menu-toggle {
    display: none;
  }

  .nav {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__lista {
    display: flex;
    gap: var(--espaco-1);
  }

  .nav__link {
    min-height: 44px;
    padding: 0 var(--espaco-3);
    border-bottom: 0;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--cor-texto-sec);
  }

  .nav__link:hover {
    color: var(--cor-texto);
    background-color: rgba(255, 255, 255, 0.04);
  }

  .header__cta {
    margin-left: var(--espaco-4);
  }

  /* Hero em 2 colunas: texto à esquerda, mockup à direita. */
  .hero {
    padding-top: calc(var(--altura-header) + 5rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: var(--espaco-8);
  }

  .mockup__aviso {
    left: calc(var(--espaco-6) * -1);  /* No desktop há espaço de sobra para "sair" do mockup */
  }

  /* Serviços e etapas: 4 colunas. Incluso: 3 colunas. */
  .grade--servicos,
  .etapas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .incluso {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grade--servicos .card,
  .etapas .card {
    padding: var(--espaco-5);
  }

  /* Cases: continuam 2 por linha (hoje são 2 cases). Se um dia houver 3 ou mais,
     dá para colocar 3 por linha adicionando aqui:
     .case { flex-basis: calc((100% - var(--espaco-5) * 2) / 3); } */

  .rodape__grade {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

/* --- Telas grandes (1440px+): mais respiro --- */
@media (min-width: 1440px) {
  :root {
    --secao-espaco: 8.5rem;
  }

  .hero {
    padding-top: calc(var(--altura-header) + 6.5rem);
  }
}


/* =====================================================================
   9. MOVIMENTO REDUZIDO (acessibilidade)
   ---------------------------------------------------------------------
   Pessoas com sensibilidade a movimento (ex.: labirintite) podem ativar
   "reduzir movimento" no sistema. Aqui desligamos animações e transições
   e mostramos tudo direto, sem efeito de entrada.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}