/* MIGARI — site institucional (migari.com.br)
   ==========================================================================
   A fachada. O sistema mora em migariflow.com.br e tem tema claro/escuro;
   aqui não: o site é COMPROMETIDO com o escuro. Motivo — a logo é um M
   cromado cortado por uma lâmina vermelha, feita para fundo preto, e a
   fachada precisa de um recado só, não de uma preferência.

   Os tokens abaixo são os mesmos de frontend/src/theme.css (bloco :root, o
   escuro). Copiados, não importados: o site é estático e não pode depender do
   build do produto. Ao mudar a marca, mudar nos dois lugares — os únicos
   valores que realmente importam são --accent, --prata e as fontes. */

:root {
  --bg: #0b0b0d;
  --superficie: #16171a;
  --superficie-alta: #1c1e22;
  --superficie-recuada: #101116;
  --borda: #26272b;
  --borda-forte: #35373d;
  --texto: #e9eaec;
  --texto-fraco: #9a9ca3;
  --texto-rotulo: #a6a8b0;
  --prata: #c9ced6;
  /* O cromado da logo em TOKEN. Estava inline dentro de .hero-titulo-prata, o
     que o prendia ao wordmark — das quatro aparições de --prata no arquivo,
     três eram o logotipo. A marca é um M de metal cortado por uma lâmina: o
     metal é a massa, o vermelho é só o corte. Em token, o metal volta a poder
     carregar estrutura em vez de ficar preso ao letreiro. */
  --metal: linear-gradient(160deg, #ffffff 0%, var(--prata) 42%, #7d838d 100%);
  --accent: #c8102e;
  --accent-forte: #a20d25;
  --accent-fraca: rgba(200, 16, 46, 0.14);
  --accent-texto: #ef6a80;
  /* A borda que acende ao toque. O hover ia pra um cinza (--borda-forte) e a
     página inteira reagia em cinza; com o vermelho da marca a 42% a peça
     acende sem virar glow — é 1px de borda, não sombra colorida, então a
     transição é de cor e não custa GPU. */
  --borda-toque: rgba(200, 16, 46, 0.42);
  /* Um degrau ABAIXO da superfície recuada, pra o cabeçalho de tabela assentar
     como base em vez de flutuar junto com as linhas de dado. Existe em
     frontend/src/theme.css e não tinha vindo na cópia — era a única deriva
     real entre os dois conjuntos de tokens. */
  --cabecalho-tabela: #0a0b0f;
  --overlay-fraco: rgba(255, 255, 255, 0.03);
  --overlay-media: rgba(255, 255, 255, 0.06);

  --luz-topo: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22), var(--luz-topo);
  --sombra-forte: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4), var(--luz-topo);

  --t-rapido: 120ms;
  --t-medio: 180ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  --fonte-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Escala tipográfica. O arquivo tinha QUATRO tamanhos de texto corrido — 14,
     15, 16 e 17px — fazendo o mesmo trabalho em blocos diferentes. Cada bloco
     com a sua régua é exatamente o que faz uma página ler como peças montadas
     em vez de um sistema. Viram dois, e a diferença passa a significar algo:
       --t-corpo  texto DENTRO de uma peça (cartão, passo, canal)
       --t-secao  coluna de texto da SEÇÃO (descrição, hero, plataforma) */
  --t-micro: 11px;
  --t-legenda: 13px;
  --t-corpo: 15px;
  --t-secao: 17px;
  --t-destaque: clamp(19px, 1.5vw, 21px);
  --t-h2: clamp(28px, 3.6vw, 42px);
  --t-h1: clamp(52px, 10.5vw, 108px);

  /* Medida de linha: o olho perde a volta acima de ~75 caracteres. Sem teto, o
     parágrafo da #plataforma chegava a ~110 entre 941 e 1140px de tela, onde a
     grade vira uma coluna só e nada o segura. */
  --medida: 66ch;

  /* Largura útil e respiro vertical de seção: um valor só, usado em todo
     lugar, porque é o que faz o site parecer desenhado e não montado.
     1140 era estreito pra uma grade de QUATRO colunas: a coluna útil do cartão
     ficava em 206px, ~27 caracteres por linha, contra os ~45 que são o piso de
     conforto. 1240 leva a ~29 — alivia sem resolver; quem resolve o piso é o
     texto do cartão mais curto. O ganho grande está na #plataforma e no hero. */
  --faixa: 1240px;
  /* Dois respiros, não um. --respiro separa SEÇÕES; --respiro-interno separa o
     cabeçalho da seção do conteúdo dela, e era um `56px` solto repetido — o
     único intervalo estrutural da página inteira que não tinha nome. */
  --respiro: clamp(72px, 9vw, 128px);
  --respiro-interno: clamp(40px, 4.5vw, 56px);

  color-scheme: dark;
  scrollbar-color: var(--borda-forte) transparent;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
  /* O cabeçalho é fixo: sem isto, âncora de menu para com o título embaixo
     dele. O valor é a altura do topo + folga. */
  scroll-padding-top: 96px;
}

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

img {
  max-width: 100%;
  height: auto;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-apenas {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.pular-para-conteudo:focus {
  left: 16px;
}

/* Padding fluido em vez de 24px fixo: com a faixa em 1240, um notebook de 1280
   ficaria com 20px de margem de cada lado — a página encostando na moldura da
   tela. O clamp abre onde há espaço e fecha em 18px no celular. */
.faixa {
  width: 100%;
  max-width: var(--faixa);
  margin: 0 auto;
  padding: 0 clamp(18px, 3.2vw, 40px);
}

/* ======================================================= tipografia base === */

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 700;
}

/* Era 19px fixo: entre o h2, que escala por vw, e o corpo, que não escala, ele
   ficava proporcionalmente enorme no celular e apertado no desktop. */
h3 {
  font-size: var(--t-destaque);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

/* Sobrescrito de marca: mono, caixa alta, muito espaçado. É a assinatura
   tipográfica do produto — aparece no login e repete aqui em toda seção. */
.eyebrow {
  display: inline-block;
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-texto);
}

/* O fio vermelho que abre e fecha bloco. Elemento mais barato do sistema e o
   que mais "diz MIGARI" — vem do PageHeader do produto. */
.linha-acento {
  display: block;
  height: 1px;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: 0.8;
  margin-top: 22px;
}

.destaque {
  color: var(--accent-texto);
  font-weight: 600;
}

/* =========================================================== botões ======= */

.botao-marca,
.botao-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-family: var(--fonte-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva),
    transform var(--t-rapido) var(--curva), box-shadow var(--t-medio) var(--curva);
}

.botao-marca {
  height: 40px;
  padding: 0 18px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.botao-marca:hover {
  background: var(--accent-forte);
  border-color: var(--accent-forte);
  box-shadow: 0 8px 24px -8px rgba(200, 16, 46, 0.7);
}

.botao-fantasma {
  height: 40px;
  padding: 0 18px;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda-forte);
}
.botao-fantasma:hover {
  background: var(--overlay-media);
  border-color: var(--prata);
}

/* Regra da casa: :active desloca 1px, nunca escala. */
.botao-marca:active,
.botao-fantasma:active {
  transform: translateY(1px);
}

.botao-grande {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

.botao-marca svg,
.botao-fantasma svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ============================================================= topo ======= */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(11, 11, 13, 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-medio) var(--curva), background var(--t-medio) var(--curva);
}

/* A borda só aparece depois que a página rola: no topo da tela, o cabeçalho
   flutua sobre o hero sem cortá-lo com uma linha. */
.topo.rolado {
  background: rgba(11, 11, 13, 0.92);
  border-bottom-color: var(--borda);
}

.topo-interno {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--prata);
  margin-right: auto;
}
.topo-marca img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
.topo-marca b {
  color: var(--accent);
  font-weight: 700;
}

.topo-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.topo-nav > a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-fraco);
  padding: 4px 0;
  transition: color var(--t-rapido) var(--curva);
}
.topo-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width var(--t-medio) var(--curva);
}
.topo-nav > a:hover {
  color: var(--texto);
}
.topo-nav > a:hover::after {
  width: 100%;
}

/* "O que fazemos" / "Como trabalhamos" abrem um painel com as duas linhas de
   negócio em vez de rolar direto pra uma seção — o site tem DUAS ofertas
   diferentes (projeto sob medida x assinatura) e o link único escondia isso.
   Mesmo padrão aria-expanded/hidden do .botao-menu, um por gatilho. */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-gatilho {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: var(--fonte-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: color var(--t-rapido) var(--curva);
}
.nav-dropdown-gatilho:hover {
  color: var(--texto);
}
.nav-dropdown-seta {
  width: 14px;
  height: 14px;
  transition: transform var(--t-rapido) var(--curva);
}
.nav-dropdown-gatilho[aria-expanded="true"] .nav-dropdown-seta {
  transform: rotate(180deg);
}
.nav-dropdown-painel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda-forte);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  z-index: 20;
}
.nav-dropdown-painel[hidden] {
  display: none;
}
.nav-dropdown-painel a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--texto);
}
.nav-dropdown-painel a:hover {
  background: var(--overlay-media);
}
.nav-dropdown-painel a strong {
  font-size: 14px;
  font-weight: 600;
}
.nav-dropdown-painel a span {
  font-size: 12.5px;
  color: var(--texto-fraco);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Site institucional é de passagem — quem chega não volta amanhã pra notar
   que o botão "sempre balança". Aqui vale chamar atenção; numa tela de
   trabalho do sistema de verdade isso cansaria em uma hora de uso. */
@keyframes pular-cta {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.topo-acoes .botao-marca,
.topo-acoes .botao-fantasma {
  animation: pular-cta 1.8s ease-in-out infinite;
}
.topo-acoes .botao-fantasma {
  animation-delay: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .topo-acoes .botao-marca,
  .topo-acoes .botao-fantasma {
    animation: none;
  }
}

/* Aparece só no celular — ver o @media de 820px. No desktop o cabeçalho já tem
   o menu inteiro mais o botão da plataforma, e um terceiro botão quebra a
   linha entre 820 e 1000px. Quadrado de 40px, igual ao hambúrguer ao lado:
   alvo de toque confortável e simetria na barra. */
.topo-zap {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
}
.topo-zap svg {
  width: 20px;
  height: 20px;
}

.botao-menu {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.botao-menu-barras,
.botao-menu-barras::before,
.botao-menu-barras::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform var(--t-medio) var(--curva), opacity var(--t-rapido) var(--curva);
}
.botao-menu-barras::before,
.botao-menu-barras::after {
  content: "";
  position: absolute;
}
.botao-menu-barras::before {
  transform: translateY(-5px);
}
.botao-menu-barras::after {
  transform: translateY(5px);
}
.botao-menu[aria-expanded="true"] .botao-menu-barras {
  background: transparent;
}
.botao-menu[aria-expanded="true"] .botao-menu-barras::before {
  transform: rotate(45deg);
}
.botao-menu[aria-expanded="true"] .botao-menu-barras::after {
  transform: rotate(-45deg);
}

.menu-mobile {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--borda);
  background: var(--superficie-recuada);
  padding: 8px 24px 20px;
}
.menu-mobile[hidden] {
  display: none;
}
.menu-mobile a {
  padding: 14px 0;
  font-size: var(--t-corpo);
  font-weight: 500;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
}
.menu-mobile a:last-of-type {
  border-bottom: none;
}
/* Rótulo não-clicável agrupando as duas ofertas — o painel mobile já é a
   tela cheia expandida, então não precisa do gatilho abre/fecha do desktop:
   as duas opções já aparecem direto embaixo do rótulo. */
.menu-mobile-grupo {
  padding: 14px 0 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-rotulo);
}
.menu-mobile-grupo:first-child {
  padding-top: 0;
}
.menu-mobile a.menu-mobile-sub {
  padding-left: 14px;
  font-weight: 400;
}
.menu-mobile-cta {
  margin-top: 12px;
  color: var(--accent-texto) !important;
  font-weight: 600 !important;
}

/* ============================================================= hero ======= */

/* A arte do login, reaproveitada inteira: gradiente diagonal + dois brilhos
   vermelhos + malha mascarada + os dois traços diagonais que ecoam a lâmina
   da logo. Ver .login-lado-arte em frontend/src/theme.css. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 120px 0 96px;
  /* Raio EXPLÍCITO, preso à LARGURA da tela. Sem raio vale `farthest-corner`,
     que deriva da DIAGONAL da caixa — e a caixa muda de proporção entre
     aparelhos. Num desktop 1440x900 o brilho de cima ficava com ~948px num
     plano de 2016px (47% da largura); num celular 390x760 a mesma regra dava
     ~482px num plano de 546px (88%). O mesmo CSS pintava quase o dobro de tela
     justamente onde este site mais abre, que é o celular — o link vive na bio
     do Instagram. Com min(vw, px) o brilho passa a ocupar sempre a mesma fatia
     da largura, e o teto em px evita que em ultrawide ele deixe de ser facho e
     vire névoa. */
  background:
    radial-gradient(circle min(58vw, 880px) at 12% 10%, rgba(200, 16, 46, 0.34), transparent),
    radial-gradient(circle min(62vw, 940px) at 88% 90%, rgba(200, 16, 46, 0.2), transparent),
    linear-gradient(135deg, #1a0508 0%, #0b0b0d 55%, #050506 100%);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: deriva-arte 24s ease-in-out infinite alternate;
}

@keyframes deriva-arte {
  from {
    background-position: 0% 0%, 100% 100%, 0 0;
  }
  to {
    background-position: 30% 20%, 70% 80%, 0 0;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  /* Mesma correção da máscara: a 75% da diagonal, no celular a malha cobria
     ~115% da largura — ou seja, tudo — e deixava de ser um trecho de grade
     aparecendo, que é o efeito, pra virar textura de fundo inteira. */
  -webkit-mask-image: radial-gradient(circle min(72vw, 900px) at 30% 30%, black, transparent);
  mask-image: radial-gradient(circle min(72vw, 900px) at 30% 30%, black, transparent);
  pointer-events: none;
}

.traco-canto {
  position: absolute;
  width: 360px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  pointer-events: none;
}
.traco-canto--topo {
  top: 18%;
  left: -60px;
  transform: rotate(-30deg);
}
.traco-canto--baixo {
  bottom: 16%;
  right: -60px;
  transform: rotate(-30deg);
}

.hero-interno {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-logo {
  width: 96px;
  height: auto;
  margin-bottom: 26px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

/* MIGARI em cima, FLOW embaixo — o empilhamento do lockup oficial, o mesmo da
   tela de login. Lado a lado o "FLOW" vermelho perde a força e a marca deixa
   de ser reconhecível à distância. */
.hero-titulo {
  margin: 14px 0 0;
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.hero-titulo span {
  display: block;
}
.hero-titulo-prata {
  /* Prata da logo: gradiente sutil, não cor chapada — é o que dá o metálico. */
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-titulo-accent {
  color: var(--accent);
}

.hero-tagline {
  margin-top: 24px;
  max-width: 660px;
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto);
}

.hero-descricao {
  margin-top: 18px;
  max-width: var(--medida);
  font-size: var(--t-secao);
  color: var(--texto-fraco);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero-garantia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 18px;
  max-width: var(--medida);
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
}
/* Mesma pontuação do rodapé do hero, e pela mesma razão: separador é
   pontuação, não sinal — na cor do texto que separa ele some corretamente. */
.hero-garantia i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--texto-fraco);
  opacity: 0.7;
}

.hero-trilha {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 72px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-fraco);
}
/* Separador entre palavras é pontuação, não sinal — e na cor do texto que ele
   separa some corretamente. Em vermelho eram mais três acentos de 4px logo
   abaixo de dois botões, um deles já vermelho. */
.hero-trilha i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--texto-fraco);
}

/* ============================================================ seções ====== */

.secao {
  position: relative;
  padding: var(--respiro) 0;
}

/* A troca de superfície já separa a seção; a borda sólida de ponta a ponta só
   acrescentava uma COSTURA — quatro linhas horizontais atravessando a página
   inteira, que é o jeito mais direto de anunciar "isto aqui é um bloco colado
   no outro". O fio continua, mas apaga nas pontas: perto do conteúdo ele
   define a aresta, nas margens some e a emenda deixa de ser visível. */
.secao-recuada {
  background: var(--superficie-recuada);
}
.secao-recuada::before,
.secao-recuada::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--borda);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}
.secao-recuada::before {
  top: 0;
}
.secao-recuada::after {
  bottom: 0;
}

.secao-cabecalho {
  max-width: 720px;
  margin-bottom: var(--respiro-interno);
}
.secao-cabecalho h2 {
  margin-top: 16px;
}
.secao-descricao {
  margin-top: 16px;
  max-width: var(--medida);
  font-size: var(--t-secao);
  color: var(--texto-fraco);
}

/* ========================================================== cartões ======= */

/* Colunas explícitas, não `auto-fit`: são QUATRO cartões, e o auto-fit cabia
   três na largura útil (1092px), deixando o quarto sozinho numa segunda fila.
   4 → 2 → 1 nunca produz órfão, e o 4-em-linha ainda ecoa o "Quatro frentes"
   do título logo acima. */
.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Duas ofertas, não quatro frentes — a home aponta pras duas páginas de
   negócio (projeto sob medida / assinatura) em vez de explicar tudo aqui. */
.grade-cartoes--duas {
  grid-template-columns: repeat(2, 1fr);
  max-width: 860px;
  margin: 0 auto;
}

.cta-central {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 26px;
  box-shadow: var(--sombra-cartao);
  transition: transform var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva),
    box-shadow var(--t-medio) var(--curva);
}
/* CONTRATO ÚNICO DE TOQUE. Toda peça da página — cartão de serviço, passo,
   canal de contato — sobe os MESMOS 2px, abre a MESMA sombra e acende a mesma
   borda. Antes eram três respostas pro mesmo gesto: o cartão subia 3px e
   trocava a sombra, o canal subia 2px e não trocava, e o passo não reagia a
   nada apesar de ser visualmente um cartão. A mão sente essa emenda antes de o
   olho ver. Peça nova entra neste seletor; não ganha hover próprio. */
.grade-cartoes .cartao,
.passo,
.canal {
  transition: transform var(--t-medio) var(--curva), border-color var(--t-medio) var(--curva),
    box-shadow var(--t-medio) var(--curva);
}
.grade-cartoes .cartao:hover,
.passo:hover,
.canal:hover {
  transform: translateY(-2px);
  border-color: var(--borda-toque);
  box-shadow: var(--sombra-forte);
}

/* Selo quadrado de 38px — a assinatura do PageHeader do produto. Só que lá ele
   aparece UMA vez por tela; aqui vinham quatro em fila, e quatro assinaturas
   iguais deixam de assinar: viram papel de parede, e ainda competiam com o CTA
   que está na mesma dobra. Medido: #servicos tinha 5 acentos vermelhos contra 1
   de #processo, que é a seção que melhor lê.
   Em metal o selo continua sendo selo e para de disputar. É a lógica da própria
   logo — o metal é a massa, o vermelho é a lâmina que corta. */
.cartao-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--borda-forte);
  box-shadow: var(--luz-topo);
  color: var(--prata);
  margin-bottom: 18px;
}
.cartao-selo svg {
  width: 19px;
  height: 19px;
}

.cartao h3 {
  margin-bottom: 10px;
}
.cartao p {
  font-size: var(--t-corpo);
  color: var(--texto-fraco);
}
.cartao-link {
  margin-top: 6px;
}
.cartao-link a {
  color: var(--accent-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ========================================================== processo ===== */

/* Mesma razão da grade acima — são quatro passos numerados, e 01/02/03 em cima
   com 04 sozinho embaixo quebraria a leitura de sequência. */
.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: passo;
}

.passo {
  position: relative;
  padding: 28px 22px 26px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}
/* Filete vermelho no topo — o mesmo do KPI do produto. */
.passo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}

/* Um ordinal não avisa nada — só conta. Em vermelho a 13px ele competia com o
   filete do topo, ficava MENOR que o h3 logo abaixo e a sequência 01→04 não
   lia como sequência. Em cromado a 30px vira a âncora do cartão e repete o
   metal do M. O `width: fit-content` é obrigatório: sem ele a caixa do
   gradiente é a largura toda do cartão, o glifo sampleia só o começo da rampa
   e perde a parte escura, que é justamente o que faz parecer metal. */
.passo-numero {
  display: block;
  width: fit-content;
  font-family: var(--fonte-mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}
.passo h3 {
  margin-bottom: 10px;
}
.passo p {
  font-size: var(--t-corpo);
  color: var(--texto-fraco);
}

/* ========================================================= plataforma ==== */

.secao-produto {
  overflow: hidden;
}

.produto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.produto-texto > p {
  margin-top: 16px;
  max-width: var(--medida);
  font-size: var(--t-secao);
  color: var(--texto-fraco);
}

.produto-texto h2 {
  margin-top: 16px;
}

/* Especificidade em vez de !important: `.produto-texto > p` já é (0,2,1), e
   acrescentar a classe ao seletor dá (0,3,1) — vence sem gritar. Três
   !important num arquivo de 1.200 linhas é o começo de uma guerra que ninguém
   ganha. */
.produto-texto > p.produto-chamada {
  margin-top: 20px;
  font-size: var(--t-destaque);
  font-weight: 500;
  color: var(--texto);
}

.modulos {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modulo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  /* 12px como toda peça da página. 10px é raio de coisa DENTRO de peça (selo,
     KPI), e o módulo é peça. */
  border-radius: 12px;
  /* Era a única peça plana da página: mesma cor de cartão, mesma borda, sem
     espessura. No escuro quem desenha a aresta é 1px de luz no alto — sem ela
     a lista de módulos afunda no fundo e volta a parecer <li> de lista. */
  box-shadow: var(--luz-topo);
}
/* "Disponível" já está dito pela cápsula verde ao lado. O véu vermelho repetia
   o mesmo recado numa segunda cor — e vermelho, no resto da página, quer dizer
   ação, alerta e erro. O destaque passa a ser de MATÉRIA: borda mais firme,
   sem cor nova e sem recado duplicado. */
.modulo--ativo {
  border-color: var(--borda-forte);
  background: var(--superficie);
}

/* Cápsula com o "flow dot" de 6px — mesmo vocabulário do .ti-badge. */
.modulo-status {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--fonte-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.modulo-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.modulo-status--breve {
  background: var(--overlay-media);
  color: var(--texto-rotulo);
}

.modulo strong {
  grid-row: 1;
  font-size: 16px;
  font-weight: 600;
}
/* Módulo com página própria — o nome vira link pra landing dele. Mesmo
   padrão de .form-lgpd a: cor de destaque + sublinhado, pra ficar óbvio que
   é clicável mesmo herdando o resto do estilo do .modulo. */
.modulo strong a {
  color: var(--accent-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modulo-desc {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--texto-fraco);
}

.produto-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* --- a janela decorativa (o "print" do produto, desenhado em CSS) --- */

.produto-arte {
  position: relative;
}
.produto-arte::before {
  /* Brilho vermelho por trás da janela, para ela não flutuar no vazio. */
  content: "";
  position: absolute;
  inset: -12% -18%;
  background: radial-gradient(ellipse at center, rgba(200, 16, 46, 0.18), transparent 65%);
  pointer-events: none;
}

.janela {
  position: relative;
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: var(--sombra-forte);
  transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transition: transform 400ms var(--curva);
}
.produto-arte:hover .janela {
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
}

.janela-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--superficie-recuada);
  border-bottom: 1px solid var(--borda);
}
.janela-barra i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borda-forte);
}
.janela-barra i:first-child {
  background: var(--accent);
}
.janela-endereco {
  margin-left: 10px;
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--texto-fraco);
}

.janela-corpo {
  padding: 20px;
}

/* Galeria de telas REAIS (screenshot do sistema, não maquete CSS) — mesma
   moldura de .janela, mas sem a inclinação 3D (perspectiva deforma texto de
   verdade de um jeito que uma barra de KPI desenhada não sofre) e sem
   padding no corpo, porque a imagem já é a tela inteira. */
.grade-telas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* Uma .janela só, com abas, centralizada — substituiu o grid de 2 imagens
   fixas quando o módulo tem telas demais pra caber em 2 colunas. */
.telas-galeria {
  max-width: 920px;
  margin: 0 auto;
}
.janela--real {
  transform: none;
  display: flex;
  flex-direction: column;
}
.janela--real img {
  display: block;
  width: 100%;
  height: auto;
}

/* Setas do carrossel — por cima da imagem, nas laterais. .galeria-imagem-wrap
   é só o âncora de posicionamento; a imagem em si continua a mesma. */
.galeria-imagem-wrap {
  position: relative;
}
.galeria-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  background: rgba(11, 11, 13, 0.72);
  color: var(--texto);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-rapido) var(--curva), background var(--t-rapido) var(--curva);
}
.galeria-imagem-wrap:hover .galeria-seta {
  opacity: 1;
}
.galeria-seta:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.galeria-seta svg {
  width: 18px;
  height: 18px;
}
.galeria-seta--anterior {
  left: 12px;
}
.galeria-seta--proxima {
  right: 12px;
}
/* No celular não tem hover — as setas ficam sempre visíveis, senão somem
   pra sempre pra quem usa o dedo. */
@media (hover: none) {
  .galeria-seta {
    opacity: 1;
  }
}
.janela--real figcaption {
  padding: 14px 16px;
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
  border-top: 1px solid var(--borda);
}

/* Galeria com abas — várias telas do mesmo módulo numa moldura só, como um
   navegador de verdade com várias abas abertas. JS genérico em site.js:
   clicar na aba troca img/legenda/endereço da MESMA .janela, sem recarregar
   nada. Overflow horizontal em vez de quebrar linha: 5-6 abas cabem rolando
   no celular, e quebrar linha empurraria a imagem pra baixo da dobra. */
.galeria-abas {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  background: var(--superficie-recuada);
  overflow-x: auto;
  scrollbar-width: none;
}
.galeria-abas::-webkit-scrollbar {
  display: none;
}
.galeria-aba {
  flex: none;
  padding: 9px 16px;
  background: transparent;
  border: none;
  border-radius: 8px 8px 0 0;
  font-family: var(--fonte-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-fraco);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.galeria-aba:hover {
  color: var(--texto);
}
.galeria-aba.galeria-aba--ativa {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: inset 0 2px 0 var(--accent);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kpi {
  position: relative;
  padding: 14px 12px;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--borda-forte), transparent 85%);
}
.kpi-alerta::before {
  background: linear-gradient(90deg, var(--accent), transparent 85%);
}
.kpi-rotulo {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-rotulo);
}
.kpi-valor {
  display: block;
  margin-top: 6px;
  font-family: var(--fonte-mono);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-alerta .kpi-valor {
  color: var(--accent-texto);
}

/* Miniatura do produto, não wireframe. A gramática é a mesma da tabela real:
   cabeçalho um degrau ABAIXO da superfície, nome em texto, número em mono
   tabular, estado em cápsula. Mesmo custo de CSS das barras cinzas, recado
   completamente diferente. O minmax(0, 1fr) é o que permite a reticência
   funcionar na primeira coluna — com 1fr puro o mínimo é o conteúdo e a coluna
   empurra as outras para fora em tela estreita. */
.janela-tabela {
  margin-top: 20px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
}
.janela-tabela-topo,
.janela-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
}
.janela-tabela-topo {
  background: var(--cabecalho-tabela);
  border-bottom: 1px solid var(--borda);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-rotulo);
}
.janela-linha {
  font-size: 12px;
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
.janela-linha:last-child {
  border-bottom: none;
}
.janela-linha > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.janela-num {
  font-family: var(--fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--texto-fraco);
}
/* Mesma cápsula do .modulo-status: verde é o estado bom, o vermelho da casa é
   o que pede atenção, o neutro é o resto. Cor nunca sozinha — cada uma carrega
   o rótulo escrito dentro. */
.janela-tag {
  justify-self: end;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--fonte-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}
.janela-tag--alerta {
  background: var(--accent-fraca);
  color: var(--accent-texto);
}
.janela-tag--neutra {
  background: var(--overlay-media);
  color: var(--texto-rotulo);
}

/* =========================================================== contato ===== */

.contato {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
}

.contato-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.campo-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.campo label {
  font-size: var(--t-legenda);
  font-weight: 600;
  color: var(--texto-rotulo);
}

/* A regra dos dois campos dita ANTES deles. Dizer "(opcional)" em cada rótulo
   separadamente esconderia justamente o que importa: sozinho cada um é
   dispensável, juntos não. */
.campo-nota {
  margin-top: -4px;
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
}
.campo-nota strong {
  color: var(--texto);
  font-weight: 600;
}
.opcional {
  font-weight: 400;
  color: var(--texto-fraco);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--superficie-recuada);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  line-height: 1.5;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.campo textarea {
  resize: vertical;
  min-height: 118px;
}

/* "Endereço da conta" sozinho como rótulo confundia com endereço físico — o
   prefixo grudado no campo mostra na hora o que está sendo digitado, sem
   precisar ler a nota embaixo pra entender. */
.campo-prefixo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie-recuada);
  overflow: hidden;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.campo-prefixo span {
  display: flex;
  align-items: center;
  padding: 0 4px 0 14px;
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--texto-fraco);
  white-space: nowrap;
  background: var(--overlay-media);
  border-right: 1px solid var(--borda);
}
.campo-prefixo input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 12px 14px 12px 8px;
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
}
.campo-prefixo input:focus {
  outline: none;
}
.campo-prefixo:has(input:focus) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-fraca);
}

/* O endereço já sai pronto do nome da empresa (slugificado) — mostrar um
   CAMPO A MAIS pra confirmar algo que já foi calculado é fricção sem
   necessidade. Some como resumo; "mudar" revela o input só pra quem
   realmente precisa ajustar (nome repetido, preferência própria). */
.campo-slug-resumo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--superficie-recuada);
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-family: var(--fonte-mono);
  font-size: 13px;
  color: var(--texto-fraco);
}
.campo-slug-resumo strong {
  color: var(--texto);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campo-slug-resumo button {
  margin-left: auto;
  flex: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fonte-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
/* Sem esta regra o texto de exemplo fica com a cor que o navegador inventa.
   --texto-fraco dá ~6,9:1 sobre o fundo do campo e continua claramente mais
   apagado que o texto digitado (--texto), que é o contraste que importa aqui. */
.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-fraco);
  opacity: 1;
}
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-fraca);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--accent);
}

/* Isca de robô. `display:none` é detectável demais e alguns preenchedores
   automáticos ignoram; tirar do fluxo com posição absoluta engana melhor e
   mantém o campo fora do alcance do teclado (tabindex="-1" no HTML). */
.isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.botao-enviar {
  align-self: flex-start;
  margin-top: 4px;
}

.form-lgpd {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-fraco);
}
.form-lgpd a {
  color: var(--accent-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.botao-enviar[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-aviso {
  font-size: 14px;
  min-height: 20px;
}
.form-aviso.ok {
  color: #4ade80;
}
.form-aviso.erro {
  color: var(--accent-texto);
}

/* =========================================================== cadastro ==== */
/* Formulário de autoatendimento (site/cadastro/) — faixa mais estreita que o
   resto do site porque aqui não tem coluna ao lado (sem os canais de
   contato da seção de contato), um formulário largo demais fica difícil de
   escanear campo a campo. */
.faixa-estreita {
  max-width: 640px;
}

.campo select {
  width: 100%;
  padding: 12px 14px;
  background: var(--superficie-recuada);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto);
  font-family: var(--fonte-ui);
  font-size: var(--t-corpo);
  line-height: 1.5;
  transition: border-color var(--t-rapido) var(--curva), box-shadow var(--t-rapido) var(--curva);
}
.campo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-fraca);
}

.campo-radio-grupo {
  border: none;
  margin: 0;
  padding: 0;
}
.campo-radio-grupo legend {
  padding: 0;
  font-size: var(--t-legenda);
  font-weight: 600;
  color: var(--texto-rotulo);
  margin-bottom: 7px;
}
.campo-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: var(--t-corpo);
  color: var(--texto);
  cursor: pointer;
}
.campo-radio input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.campo-radio-destaque {
  border-color: var(--accent);
  background: var(--accent-fraca);
}

/* O total é a única coisa que muda sozinha conforme a pessoa marca módulo e
   digita usuários — precisa ficar visualmente separado do resto do form,
   senão a atualização passa despercebida. */
/* Formulário do teste grátis + preview da tela do módulo escolhido, lado a
   lado — a mesma ideia do .produto (texto + janela), só que aqui a imagem
   muda sozinha conforme a escolha, em vez de ser fixa. */
.trial-layout {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 32px;
  align-items: start;
}
.trial-preview {
  position: sticky;
  top: 96px;
}
.trial-preview figcaption {
  padding: 14px 16px;
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
  border-top: 1px solid var(--borda);
}

.cadastro-resumo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--superficie-recuada);
}
.cadastro-resumo-rotulo {
  font-size: var(--t-legenda);
  color: var(--texto-rotulo);
}
.cadastro-resumo-valor {
  font-family: var(--fonte-mono);
  font-size: var(--t-destaque);
  color: var(--texto);
}

.cadastro-pix {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
}
.cadastro-pix img {
  width: 240px;
  height: 240px;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}
.cadastro-pix label {
  font-size: var(--t-legenda);
  font-weight: 600;
  color: var(--texto-rotulo);
  align-self: flex-start;
}
.cadastro-pix-copia {
  display: flex;
  gap: 8px;
  width: 100%;
}
.cadastro-pix-copia input {
  flex: 1;
  padding: 10px 12px;
  background: var(--superficie-recuada);
  border: 1px solid var(--borda);
  border-radius: 8px;
  color: var(--texto-fraco);
  font-family: var(--fonte-mono);
  font-size: 12.5px;
}
#cadastro-pix-status {
  font-size: var(--t-corpo);
  color: var(--texto-fraco);
}

.contato-canais {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.canal {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao);
  transition: transform var(--t-rapido) var(--curva), border-color var(--t-medio) var(--curva);
}
.canal:hover {
  transform: translateY(-2px);
  border-color: var(--borda-forte);
}
/* Mesma razão dos selos de serviço, e aqui o custo era maior: os três
   competiam com o "Enviar mensagem", que é a única ação vermelha que deveria
   existir nesta dobra. Em metal, o botão volta a ser o ponto mais quente da
   tela. */
.canal-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
  border: 1px solid var(--borda-forte);
  box-shadow: var(--luz-topo);
  color: var(--prata);
  transition: background var(--t-medio) var(--curva), color var(--t-medio) var(--curva),
    border-color var(--t-medio) var(--curva);
}
/* O selo acende ao passar o mouse: o cartão inteiro é clicável, e o vermelho
   volta no momento em que ele significa "isto reage" — mesmo emprego que a
   borda de toque já faz nas outras peças. */
.canal:hover .canal-selo {
  background: var(--accent-fraca);
  border-color: var(--borda-toque);
  color: var(--accent-texto);
}
.canal-selo svg {
  width: 20px;
  height: 20px;
}
.canal-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.canal-texto strong {
  font-size: 15px;
  font-weight: 600;
}
.canal-texto span {
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
  overflow-wrap: anywhere;
}

.canal-nota {
  margin-top: 6px;
  padding: 16px 18px;
  border: 1px dashed var(--borda-forte);
  border-radius: 12px;
  font-size: 14px;
  color: var(--texto-fraco);
}
.canal-nota a {
  color: var(--accent-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================================== FAQ (landing) ======== */

/* <details> nativo: acessível de graça, funciona sem JS e o Google entende
   como FAQ. Um acordeão feito à mão custaria script e daria menos. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 800px;
}
.faq-item {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
  transition: border-color var(--t-medio) var(--curva);
}
.faq-item:hover {
  border-color: var(--borda-toque);
}
.faq-item summary {
  padding: 18px 22px;
  font-size: var(--t-corpo);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
/* Sinal de abrir/fechar em CSS puro — mais um lugar onde não vale carregar um
   ícone só pra desenhar um "+". */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent-texto);
  border-bottom: 2px solid var(--accent-texto);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-medio) var(--curva);
}
.faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.faq-item p {
  padding: 0 22px 20px;
  max-width: 66ch;
  font-size: var(--t-corpo);
  color: var(--texto-fraco);
}

/* ============================================ ajustes da landing ========= */

/* A landing não abre com a marca gigante: o visitante veio de um anúncio com
   uma promessa, e o H1 precisa ser essa promessa, não o logotipo. Por isso o
   título é menor que o da home e o hero é mais curto. */
.hero-lp {
  min-height: auto;
  padding: 132px 0 84px;
}
.hero-titulo-lp {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
.hero-titulo-lp .hero-titulo-accent {
  display: inline;
  color: var(--accent);
}
.secao-produto .linha-acento {
  margin-bottom: 4px;
}

/* Hero com a galeria ao lado do texto — vender o sistema ANTES de rolar,
   com tela de verdade trocando sozinha (autoplay, ver site.js). Só nas
   landings de módulo: home/plataforma/contato são hub, não vitrine de UM
   produto só. */
.hero-interno--com-galeria {
  width: 100%;
}
@media (min-width: 941px) {
  .hero-interno--com-galeria {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 48px;
    align-items: center;
  }
  .hero-interno--com-galeria .hero-galeria {
    margin-top: 0;
  }
}
.hero-galeria {
  width: 100%;
  margin-top: 40px;
}
.hero-galeria .galeria-aba {
  font-size: 12px;
  padding: 7px 12px;
}

@media (max-width: 820px) {
  .hero-lp {
    padding: 96px 0 64px;
  }
  .hero-titulo-lp {
    max-width: none;
  }
}

/* Na tela mais baixa que existe em uso real (iPhone SE, 568px de viewport) o
   CTA da landing fechava 5px abaixo da dobra — e a landing existe justamente
   pra converter. O título é mais longo aqui que na home (é a promessa do
   anúncio, não a marca), então o respiro de cima cede um pouco. */
@media (max-width: 560px) {
  .hero-lp {
    padding: 84px 0 56px;
  }
  .hero-titulo-lp {
    font-size: clamp(30px, 8.4vw, 38px);
  }
}

/* ================================================= página de obrigado ==== */

/* Reusa a arte do hero: quem chega aqui acabou de converter, e a tela de
   confirmação ser visualmente irmã do site é o que faz parecer que deu certo. */
.tela-obrigado {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 48px 0;
  background:
    radial-gradient(circle min(58vw, 880px) at 12% 10%, rgba(200, 16, 46, 0.34), transparent),
    radial-gradient(circle min(62vw, 940px) at 88% 90%, rgba(200, 16, 46, 0.2), transparent),
    linear-gradient(135deg, #1a0508 0%, #0b0b0d 55%, #050506 100%);
}
.obrigado-interno {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}
.obrigado-logo {
  width: 72px;
  height: auto;
  margin-bottom: 22px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}
.obrigado-titulo {
  margin: 14px 0 0;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.obrigado-texto {
  margin-top: 18px;
  max-width: var(--medida);
  font-size: var(--t-secao);
  color: var(--texto-fraco);
}
.obrigado-texto strong {
  color: var(--texto);
  font-weight: 600;
}
.obrigado-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.obrigado-nota {
  margin-top: 22px;
  max-width: var(--medida);
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
}

@media (max-width: 560px) {
  .obrigado-acoes {
    width: 100%;
  }
  .obrigado-acoes a {
    flex: 1 1 100%;
  }
}

/* ================================================== banner de cookie ===== */

/* Ancorado embaixo e estreito: aviso de cookie não é conteúdo, é burocracia —
   deve ser fácil de resolver e não pode cobrir o CTA da página. Nada de
   overlay escurecendo a tela nem de bloquear a rolagem. */
.banner-cookie {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 32px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 16px 20px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 12px;
  box-shadow: var(--sombra-forte);
  animation: sobe-banner 300ms var(--curva);
}
@keyframes sobe-banner {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.banner-cookie p {
  flex: 1 1 320px;
  font-size: var(--t-legenda);
  line-height: 1.5;
  color: var(--texto-fraco);
}
.banner-cookie a {
  color: var(--accent-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.banner-cookie-acoes {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.banner-cookie-acoes button {
  height: 34px;
  padding: 0 16px;
  font-size: var(--t-legenda);
}

@media (max-width: 560px) {
  /* No celular o aviso cobria um terço da primeira dobra, inclusive o botão do
     WhatsApp do hero. Mais baixo e mais compacto, sem perder os dois botões. */
  .banner-cookie {
    bottom: 10px;
    gap: 10px;
    padding: 12px 14px;
  }
  .banner-cookie p {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 1.45;
  }
  .banner-cookie-acoes {
    width: 100%;
    margin-left: 0;
  }
  .banner-cookie-acoes button {
    flex: 1;
    height: 32px;
  }
}

/* ============================================ landing: vídeo e demonstração == */

/* O vídeo ocupa a moldura inteira, como o print da galeria. Fundo preto para o
   intervalo entre o poster e o primeiro quadro não piscar branco. */
.janela-video video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* Módulo sem a cápsula "Incluído": se tudo está incluído, o selo não diz nada,
   e a grade de duas colunas deixaria um vão vazio à esquerda. */
.modulo--sem-selo {
  grid-template-columns: 1fr;
}

/* Selo da tela recriada: todo número inventado carrega o aviso. */
.janela-demo {
  margin-top: 10px;
  text-align: right;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-rotulo);
}

/* Preço logo abaixo da garantia do teste: visível sem virar anúncio. */
.preco-entrada {
  margin-top: 10px;
  font-size: var(--t-legenda);
  color: var(--texto-fraco);
}
.preco-entrada strong {
  color: var(--texto);
  font-family: var(--fonte-mono);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .banner-cookie {
    animation: none;
  }
}

/* ====================================== páginas legais (privacidade) ===== */

/* Cabeçalho reduzido: em documento legal não existe navegação de venda, e o
   menu completo só convidaria a sair antes de ler. */
.topo-simples {
  position: static;
  background: var(--bg);
  border-bottom: 1px solid var(--borda);
}
.topo-simples .topo-acoes .botao-fantasma {
  display: inline-flex;
}

.secao-legal {
  padding-top: var(--respiro-interno);
}

/* Coluna de leitura longa. Aqui a medida é mais estreita que --medida: texto
   jurídico é lido palavra a palavra, e linha curta reduz o cansaço de quem já
   está fazendo algo que não queria fazer. */
.texto-legal {
  max-width: 58ch;
  font-size: var(--t-secao);
  color: var(--texto-fraco);
}
.texto-legal h2 {
  margin-top: var(--respiro-interno);
  margin-bottom: 14px;
  font-size: var(--t-destaque);
  color: var(--texto);
}
.texto-legal h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-size: var(--t-corpo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-rotulo);
}
.texto-legal p + p {
  margin-top: 14px;
}
.texto-legal ul {
  margin: 14px 0 0;
  padding-left: 20px;
}
.texto-legal li + li {
  margin-top: 8px;
}
.texto-legal strong {
  color: var(--texto);
  font-weight: 600;
}
.texto-legal a {
  color: var(--accent-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.texto-legal-data {
  font-family: var(--fonte-mono);
  font-size: var(--t-legenda);
  color: var(--texto-rotulo);
}
/* Bloco de identificação do controlador: é o dado que o Google e o Meta
   procuram, então ganha superfície própria em vez de se perder no corrido. */
.texto-legal-dados {
  list-style: none;
  padding: 18px 20px !important;
  margin-top: 16px !important;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao);
  font-size: var(--t-corpo);
}

/* ============================================================ rodapé ===== */

/* O rodapé respirava 56px onde toda seção respira 72–128: metade do ritmo da
   página, e o olho lia como se o conteúdo tivesse acabado antes da hora. Entra
   na mesma escada, e a linha de cima ganha o mesmo tratamento das emendas —
   apaga nas pontas em vez de atravessar a tela. */
.rodape {
  position: relative;
  padding: var(--respiro) 0 var(--respiro-interno);
  background: var(--bg);
}
.rodape::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--borda);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}
.rodape-interno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}
.rodape-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}
.rodape-marca strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--prata);
}
.rodape-flow {
  color: var(--accent);
}
.rodape-marca span {
  display: block;
  font-size: 12px;
  color: var(--texto-fraco);
}
.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.rodape-links a {
  font-size: 14px;
  color: var(--texto-fraco);
  transition: color var(--t-rapido) var(--curva);
}
.rodape-links a:hover {
  color: var(--texto);
}
/* A linha legal fica ABAIXO do copyright e ainda menor: é obrigatória, mas não
   é recado — ninguém precisa lê-la para usar o site, e o Google só precisa
   encontrá-la. */
.rodape-legal {
  display: block;
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.rodape-nota {
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid var(--borda);
  font-family: var(--fonte-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-fraco);
}

/* ====================================== entrada por rolagem (revelar) ==== */

/* Só vale quando o JS confirma suporte, marcando <html class="js-revelar">.
   Sem essa trava, JS desligado ou quebrado deixaria a página inteira
   invisível — o conteúdo tem que aparecer por padrão. */
.js-revelar .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--curva), transform 600ms var(--curva);
}
.js-revelar .revelar.visivel {
  opacity: 1;
  transform: none;
}

/* ========================================================= responsivo ==== */

@media (max-width: 1000px) {
  .grade-cartoes,
  .passos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 940px) {
  .produto {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .produto-arte {
    order: -1;
  }
  .janela {
    transform: none;
  }
  .trial-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .trial-preview {
    position: static;
    order: -1;
  }
  .contato {
    grid-template-columns: 1fr;
  }
  /* Mesmo recurso do .produto-arte acima. Em uma coluna só, o formulário na
     frente empurra o WhatsApp uns 600px pra baixo — e quem chegou aqui pelo
     "Falar com a gente" quer justamente o caminho mais curto. Quem prefere
     escrever rola e escreve; ninguém ganha um clique a mais. */
  .contato-canais {
    order: -1;
  }
}

@media (max-width: 820px) {
  /* No dedo, os links do rodapé ficavam com 22px de caixa — abaixo dos 24px
     que o WCAG 2.5.8 pede e bem abaixo do confortável. Ganham respiro vertical
     e viram coluna, porque em linha eles se encostam lateralmente também. */
  .rodape-links {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .rodape-links a {
    padding: 11px 0;
    border-bottom: 1px solid var(--borda);
  }
  .rodape-links a:last-child {
    border-bottom: none;
  }

  .topo-nav {
    display: none;
  }
  .topo-acoes .botao-fantasma,
  .topo-acoes .topo-cta-desktop {
    display: none;
  }
  .topo-zap {
    display: inline-flex;
  }
  .botao-menu {
    display: inline-flex;
    position: relative;
  }
  /* A PRIMEIRA DOBRA NO CELULAR, que é onde este site mais abre.
     Medido antes: o botão "Falar com a gente" terminava 260px abaixo da dobra
     num iPhone SE, 170 num Galaxy S9+, 111 num iPhone 13. Ninguém que chega
     pela bio do Instagram via o CTA sem rolar — o caminho de conversão
     começava escondido. Três cortes resolvem, e nenhum apaga conteúdo:

     1. a logo de 96px sai. Ela repete a marca que o cabeçalho fixo já mostra
        30px acima; era a única coisa aqui dizendo duas vezes a mesma coisa.
     2. o respiro de cima cai de 132 para 92px — ainda folgado sobre os 73px
        do cabeçalho fixo.
     3. a descrição longa desce para DEPOIS dos botões. Ela explica, não
        convence: quem se convenceu já clicou, e quem quer ler continua lendo
        um dedo abaixo.

     Depois disso o botão fecha em +68px no SE, +158 no S9+ e +191 no 13. */
  .hero {
    min-height: auto;
    padding: 92px 0 64px;
  }
  .hero-logo {
    display: none;
  }
  .hero-descricao {
    order: 10;
    margin-top: 26px;
  }
  .hero-trilha {
    margin-top: 56px;
    justify-content: flex-start;
    gap: 10px;
    font-size: 10px;
  }
  .traco-canto {
    width: 220px;
  }
}

@media (max-width: 560px) {
  .grade-cartoes,
  .passos,
  .grade-telas {
    grid-template-columns: 1fr;
  }
  .campo-dupla {
    grid-template-columns: 1fr;
  }
  .contato-form {
    padding: 22px;
  }
  .hero-acoes,
  .produto-acoes {
    width: 100%;
  }
  .hero-acoes a,
  .produto-acoes a {
    flex: 1 1 100%;
  }
  .kpis {
    grid-template-columns: 1fr;
  }
}

/* Quem pediu menos movimento recebe menos movimento: o gradiente para de
   respirar, a janela para de girar e o revelar entrega tudo pronto. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero {
    animation: none;
  }
  .janela {
    transform: none;
  }
  .js-revelar .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================= landing — rework (lp-) ==
   Rework da landing do Bebidas (27/09/2026): o público não lê, então a
   página vira bordão + uma frase por bloco. Só classes novas com prefixo
   `lp-`, em cima dos tokens de sempre — as outras landings, que dividem este
   arquivo, não mudam. */

/* Oito ganhos, uma frase cada: o cartão encolhe junto com o texto. Com o
   padding de 26px de sempre, uma frase de oito palavras ficava perdida no
   meio de um cartão feito para um parágrafo. */
.lp-ganhos .cartao {
  padding: 22px;
}
.lp-ganhos .cartao-selo {
  margin-bottom: 14px;
}
.lp-ganhos .cartao h3 {
  font-size: 19px;
  margin-bottom: 6px;
}

/* A faixa do link próprio: o único bloco da página com o vermelho de fundo,
   porque é o ganho que o dono sente no bolso. Um só — dois destaques
   vermelhos na mesma página deixam de destacar. */
.lp-faixa-destaque {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 16px;
  border: 1px solid var(--borda-toque);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(200, 16, 46, 0.22), transparent 60%),
    var(--superficie);
  box-shadow: var(--sombra-forte);
}
.lp-faixa-texto h2 {
  margin-top: 14px;
}
.lp-faixa-texto p {
  margin-top: 14px;
  font-size: var(--t-secao);
  color: var(--texto-rotulo);
  max-width: 46ch;
}
.lp-faixa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.lp-faixa-lista li,
.lp-plano-lista li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-corpo);
  color: var(--texto);
}
/* O visto é desenhado em CSS (duas bordas giradas), sem ícone nem fonte: a
   lista continua sendo lista para o leitor de tela. */
.lp-faixa-lista li::before,
.lp-plano-lista li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.3em;
  width: 6px;
  height: 11px;
  border: solid var(--accent-texto);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Os dois planos. O Delivery leva a borda acesa: é o plano que o dono de
   depósito que entrega precisa, e o que a faixa acima acabou de vender. */
.lp-plano {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-plano--destaque {
  border-color: var(--borda-toque);
}
.lp-plano h3 {
  margin-bottom: 0;
}
.lp-plano .lp-plano-para {
  color: var(--texto-rotulo);
}
.lp-plano .lp-plano-preco {
  margin: 10px 0 8px;
  color: var(--texto-rotulo);
}
.lp-plano-preco strong {
  font-family: var(--fonte-mono);
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 600;
  color: var(--texto);
  letter-spacing: -0.02em;
}
.lp-plano-lista {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
  /* Lista curta não estica as linhas pra igualar a altura do outro cartão. */
  align-content: start;
}
.lp-plano .botao-marca {
  align-self: stretch;
  text-align: center;
  justify-content: center;
}

@media (max-width: 820px) {
  .lp-faixa-destaque {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* No celular, oito cartões empilhados davam ~1.300px de rolagem para oito
   frases. Em duas colunas a seção cabe em duas telas e continua lendo como
   lista de ganhos, não como parede. */
@media (max-width: 560px) {
  .lp-ganhos {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .lp-ganhos .cartao {
    padding: 16px;
  }
  .lp-ganhos .cartao-selo {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
  }
  .lp-ganhos .cartao h3 {
    font-size: 16px;
  }
  .lp-ganhos .cartao p {
    font-size: 14px;
  }
}

/* A gestão no celular (landing do Bebidas). O aparelho é HTML, não print:
   nítido em qualquer tela, leve, e com os números de demonstração da casa. */
.lp-celular-secao {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.lp-celular-texto h2 {
  margin-top: 16px;
}
.lp-celular-texto p {
  margin: 16px 0 24px;
  font-size: var(--t-secao);
  color: var(--texto-rotulo);
  max-width: 44ch;
}
.lp-celular {
  justify-self: center;
  text-align: center;
}
.lp-celular-tela {
  width: 272px;
  padding: 14px 12px 10px;
  border-radius: 38px;
  border: 1px solid var(--borda-forte);
  outline: 6px solid #1c1e22;
  background: var(--bg);
  box-shadow: var(--sombra-forte), 0 30px 80px -30px rgba(200, 16, 46, 0.45);
  text-align: left;
  transform: rotate(-2deg);
}
.lp-celular-topo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 8px 12px;
}
.lp-celular-hora {
  font-family: var(--fonte-mono);
  font-size: 11px;
  color: var(--texto-rotulo);
  text-align: center;
}
.lp-celular-titulo {
  font-weight: 700;
  font-size: 18px;
}
.lp-celular-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lp-celular-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
}
.lp-celular-kpi--largo {
  grid-column: 1 / -1;
}
.lp-celular-kpi span,
.lp-celular-rotulo {
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-rotulo);
}
.lp-celular-kpi strong {
  font-family: var(--fonte-mono);
  font-size: 20px;
  font-weight: 600;
}
.lp-celular-kpi--largo strong {
  font-size: 26px;
}
.lp-celular-kpi--alerta strong {
  color: var(--accent-texto);
}
.lp-celular-lista {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  display: grid;
  gap: 8px;
}
.lp-celular-linha {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.lp-celular-linha em {
  font-style: normal;
  font-family: var(--fonte-mono);
  color: var(--accent-texto);
}
.lp-celular-barra {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--borda);
  padding-top: 10px;
  font-size: 10px;
  text-align: center;
  color: var(--texto-rotulo);
}
.lp-celular-aba-ativa {
  position: relative;
  color: var(--texto);
  font-weight: 600;
}
.lp-celular-aba-ativa b {
  position: absolute;
  top: -9px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  line-height: 15px;
}
.lp-celular-demo {
  margin-top: 18px;
  font-family: var(--fonte-mono);
  font-size: var(--t-micro);
  color: var(--texto-rotulo);
}

@media (max-width: 820px) {
  .lp-celular-secao {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp-celular-tela {
    transform: none;
  }
}

/* O celular com um print dentro (robô da barbearia): a tela vira moldura e a
   imagem ocupa tudo, cortada em cima — é o começo da conversa que conta. */
.lp-celular-tela--print {
  padding: 0;
  overflow: hidden;
  height: 560px;
}
.lp-celular-tela--print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}