/* =========================================================
   Alpha Service — Terceirização de Monitoramento
   Direção: "vigília noturna". Azul-noite tirado do céu da foto
   aérea; o verde do banner é o único acento, e só aparece em
   ação: CTA, status no ar, ícones.
   ========================================================= */

:root{
  /* cor */
  --noite:        #070C15;
  --noite-fumaca: #050911;
  --casco:        #070C15;

  /* o verde do banner, acento único do site: matiz 155°, puxado para o
     azul-noite para conviver com ele. Sobre o escuro entra chapado; sobre o
     branco precisa escurecer para passar de 4.5:1, daí a variante forte. */
  --verde:        #24C67E;
  --verde-claro:  #3AD892;
  --verde-forte:  #0A7A4B;   /* verde legível sobre branco */
  --verde-tinta:  #04170E;   /* texto sobre o verde */
  --neve:         #F4F6F8;
  --grafite:      #12161C;
  --grafite-sub:  #5C6673;
  --borda-clara:  rgba(255,255,255,.12);
  --borda-escura: rgba(5,9,17,.12);
  --tinta-clara:  rgba(255,255,255,.72);
  --tinta-fraca:  rgba(255,255,255,.50);

  /* tipografia — Satoshi nos títulos/botões e Inter no corpo, 700 e 500
     como pesos de trabalho (o mesmo par da referência) */
  --display: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --texto:   "Inter", "Segoe UI", system-ui, sans-serif;
  --dado:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* estrutura — a barra segue a altura do logo mais 20px de respiro
     de cada lado, como na referência (72px de logo = 112px de barra) */
  --h-nav:    112px;
  --raio:     22px;
  --risco:    #F1F3F5;   /* filete do cabeçalho */
}

@media (max-width:1023px){ :root{ --h-nav:92px } }
@media (max-width:560px){  :root{ --raio:18px } }

/* ---------- base ---------- */

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--noite);
  color:#fff;
  font-family:var(--texto);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.5px;   /* mesmo tracking de corpo da referência */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,figure{ margin:0 }
ul{ padding:0; list-style:none }
img{ max-width:100% }
a{ color:inherit; text-decoration:none }
button,input{ font:inherit; color:inherit }

[hidden]{ display:none !important }

:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:3px;
  border-radius:5px;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden }

.ico{
  width:1em; height:1em;
  flex:0 0 auto;
  vertical-align:-.14em;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; top:-100px; left:16px; z-index:100;
  padding:12px 18px; border-radius:0 0 10px 10px;
  background:var(--verde); color:var(--verde-tinta);
  font-family:var(--display); font-weight:700;
  transition:top .2s;
}
.skip:focus{ top:0 }

.wrap{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(18px,4vw,40px);
}

/* ---------- botões ---------- */

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.85em 1.4em;
  border:0; border-radius:999px;
  font-family:var(--display); font-size:.9375rem; font-weight:700; line-height:1;
  white-space:nowrap; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s, background-color .2s;
}
.btn .ico{ width:1.05em; height:1.05em; transition:transform .25s }
.btn:hover .ico{ transform:translateX(3px) }

/* o acento em ação: chapado, com brilho baixo para não virar néon sobre o
   azul-noite. É o mesmo botão dos orçamentos e do banner */
.btn--verde{
  background:var(--verde);
  color:var(--verde-tinta);
  box-shadow:0 10px 26px -12px rgba(36,198,126,.8);
}
.btn--verde:hover{
  background:var(--verde-claro);
  transform:translateY(-2px);
  box-shadow:0 18px 34px -12px rgba(36,198,126,.95);
}

/* botão da primeira tela: preto sólido sobre o branco */
.btn--preto{
  background:var(--noite);
  color:#fff;
  box-shadow:0 10px 24px -14px rgba(5,9,17,.9);
}
.btn--preto:hover{
  background:#1B2333;
  transform:translateY(-2px);
  box-shadow:0 18px 32px -16px rgba(5,9,17,.95);
}

/* o mesmo preto invertido, para quando a pilula cai sobre fundo escuro */
.btn--branco{
  background:#fff;
  color:var(--noite);
}
.btn--branco:hover{
  background:#E9EDF1;
  transform:translateY(-2px);
  box-shadow:0 18px 32px -16px rgba(5,9,17,.95);
}

.btn--bloco{ display:flex; justify-content:center; width:100% }

/* =========================================================
   CABEÇALHO
   ========================================================= */

/* O cabeçalho é sempre fixo. Ao rolar ele apenas encolhe de altura e
   ganha fundo e sombra — sem troca de posicionamento, sem salto. */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:#fff;
  color:var(--grafite);
  box-shadow:0 1px 0 var(--risco);
  transition:background-color .3s, box-shadow .3s;
}

.masthead.is-fixa{
  background-color:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 var(--risco), 0 16px 34px -26px rgba(5,9,17,.4);
}
.masthead.is-fixa .navbar__inner{ min-height:84px }

/* barra principal */

.navbar__inner{
  display:flex; align-items:center; gap:clamp(18px,2.4vw,44px);
  min-height:var(--h-nav);
  transition:min-height .25s;
}

.brand{
  display:inline-flex; align-items:center; gap:12px;
  flex:0 0 auto; margin-right:auto;
}

/* preta e branca empilhadas na mesma celula da grade: as duas recebem as
   mesmas regras de tamanho, entao trocam sem nenhum salto de layout */
.brand__marca{ display:grid; align-items:center }
.brand__mark{
  grid-area:1 / 1;
  width:42px; height:42px; object-fit:contain;
  transition:opacity .3s;
}
.brand__mark--claro{ opacity:0 }

/* no desktop a barra anda junta, como na referência: logo, menu e botão
   colados num bloco só, centrado — sem o vão entre a marca e o menu */
/* no cabeçalho a marca é o lockup inteiro (escudo + ALPHA), então ela
   trabalha por altura e encolhe quando a barra recolhe */
.navbar .brand__mark{
  width:auto; height:72px;
  transition:height .25s;
}
.masthead.is-fixa .brand__mark{ height:56px }
.brand__lockup strong{
  display:block;
  font-family:var(--display); font-size:1.06rem; font-weight:700; line-height:1;
  letter-spacing:-.02em;
}
.brand__lockup span{
  display:block; margin-top:5px;
  font-family:var(--dado); font-size:.625rem; line-height:1;
  letter-spacing:.28em; text-transform:uppercase;
  color:#8A93A0;
}

/* ---------- cabecalho sobre o banner escuro ----------
   No topo da pagina o cabecalho fica sem fundo, direto sobre a foto, com a
   marca e o menu em branco. Assim que a pagina rola, o .is-fixa devolve a
   barra branca com blur que ja existia — nada aqui muda posicionamento. */

.masthead--sobre-banner:not(.is-fixa){
  background:transparent;
  color:#fff;
  box-shadow:none;
}

.masthead--sobre-banner:not(.is-fixa) .brand__mark--escuro{ opacity:0 }
.masthead--sobre-banner:not(.is-fixa) .brand__mark--claro{ opacity:1 }

.masthead--sobre-banner:not(.is-fixa) .nav a{ color:rgba(255,255,255,.92) }
.masthead--sobre-banner:not(.is-fixa) .nav a:hover{ color:#fff }
.masthead--sobre-banner:not(.is-fixa) .nav a::after{ background:#fff }

/* a pilula preta ficaria invisivel na foto: sobre o banner ela inverte */
.masthead--sobre-banner:not(.is-fixa) .navbar__cta{
  background:#fff; color:var(--noite);
  box-shadow:0 12px 28px -16px rgba(5,9,17,.9);
}
.masthead--sobre-banner:not(.is-fixa) .navbar__cta:hover{ background:#E9EDF1 }

.masthead--sobre-banner:not(.is-fixa) .iconelink,
.masthead--sobre-banner:not(.is-fixa) .burger{ color:#fff }
.masthead--sobre-banner:not(.is-fixa) .burger{ background:rgba(255,255,255,.10) }

.nav ul{ display:flex; align-items:center; gap:clamp(18px,2.2vw,34px) }
.nav a{
  position:relative; display:inline-block;
  padding-block:.45rem;
  font-family:var(--display); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
  color:rgba(18,22,28,.82);
  transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--grafite);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.25,1);
}
.nav a:hover{ color:var(--grafite) }
.nav a:hover::after{ transform:scaleX(1) }

.navbar__cta{
  flex:0 0 auto;
  padding:1.05em 2em;
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.09em;
}

/* telefone e WhatsApp em ícone, entre o menu e o botão */
.navbar__contatos{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto }

/* no desktop um filete separa os links do grupo de contato: a barra se lê
   como dois blocos — navegação | telefone, WhatsApp e botão. Ele fica no
   meio do vão da barra, por isso o clamp repete o gap do .navbar__inner */
@media (min-width:1024px){
  .navbar__contatos{ position:relative }
  .navbar__contatos::before{
    content:""; position:absolute; top:50%;
    left:calc(clamp(18px,2.4vw,44px) / -2);
    width:1px; height:22px; transform:translateY(-50%);
    background:var(--borda-escura);
  }
  .masthead--sobre-banner:not(.is-fixa) .navbar__contatos::before{ background:rgba(255,255,255,.22) }
}
.iconelink{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  color:var(--grafite);
  transition:opacity .2s, transform .2s, color .3s;
}
.iconelink .ico{ width:22px; height:22px }
.iconelink:hover{ opacity:.62; transform:translateY(-1px) }

/* o botão do menu ganha um quadrado branco a 10% sobre o banner e com o
   menu aberto; na barra branca ele fica só com os traços, sem quadrado.
   Os três traços ficam a 6px um do outro: ao abrir, o de cima e o de baixo
   andam esses 6px até o meio e giram em X, e o do meio some */
.burger{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto;
  padding:0; border:0; border-radius:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s, background-color .3s;
}
.burger__tracos{ position:relative; width:20px; height:14px }
.burger__tracos span{
  position:absolute; top:0; left:0; right:0;
  height:2px; border-radius:2px;
  background:currentColor;
  transition:transform .45s cubic-bezier(.2,.7,.25,1), opacity .2s;
}
.burger__tracos span:nth-child(2){ top:6px }
.burger__tracos span:nth-child(3){ top:12px }
.burger[aria-expanded="true"] .burger__tracos span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] .burger__tracos span:nth-child(2){ opacity:0; transform:scaleX(.3) }
.burger[aria-expanded="true"] .burger__tracos span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ---------- menu mobile ----------
   Tela cheia no azul-noite, descendo por baixo do cabeçalho como uma
   cortina (clip-path), e o cabeçalho escurece junto (.is-menu). Fechado,
   o visibility só vira hidden depois que a cortina sobe; o js/main.js
   ainda devolve o [hidden] no fim da saída */

.menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column;
  padding-top:calc(var(--h-nav) + clamp(14px,3vh,28px));
  padding-bottom:max(22px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 55% at 50% 118%, rgba(36,198,126,.16), transparent 62%),
    var(--noite);
  color:#fff;
  overflow-y:auto;
  overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .38s cubic-bezier(.55,0,.75,.2), visibility 0s .38s;
}
.menu.is-aberto{
  clip-path:inset(0);
  visibility:visible;
  transition:clip-path .55s cubic-bezier(.2,.7,.25,1), visibility 0s;
}

/* o botão vem logo abaixo da lista e as redes encostam no pé da tela */
.menu__corpo{
  flex:1 0 auto;
  display:flex; flex-direction:column; gap:20px;
}

.menu__nav a{
  display:block;
  padding-block:clamp(10px, 1.75vh, 16px);
  border-bottom:1px solid var(--borda-clara);
  -webkit-tap-highlight-color:transparent;
}
.menu__link-nome{
  display:block;
  font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1.15;
  letter-spacing:-.02em;
  transition:color .2s;
}
.menu__nav a:hover .menu__link-nome,
.menu__nav a:active .menu__link-nome{ color:var(--verde-claro) }
.menu__link-desc{
  display:block; margin-top:3px;
  font-size:.8125rem; line-height:1.4; letter-spacing:0;
  color:var(--tinta-fraca);
}

.menu__rodape{
  flex:1 0 auto;
  display:flex; flex-direction:column; gap:16px;
}
.menu__cta{ padding-block:1.05em; font-size:1.1875rem }

/* Instagram e e-mail: o formato do .social da tela de links, mas nas cores
   do menu — o mesmo branco translúcido do botão do menu, ícone branco, e o
   verde do site ao tocar. O .social é declarado mais abaixo: por isso o .menu */
.menu__social{ display:flex; justify-content:center; gap:14px; margin-top:auto }
.menu .social{
  background:rgba(255,255,255,.10);
  box-shadow:none;
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), background-color .2s, color .2s;
}
.menu .social:hover,
.menu .social:active{ background:var(--verde); color:var(--verde-tinta) }

/* a lista entra um item de cada vez, logo atrás da cortina. Na saída tudo
   some junto e rápido, e o deslocamento só volta depois de apagado */
@media (prefers-reduced-motion: no-preference){
  .menu__nav li,
  .menu__rodape{
    opacity:0; transform:translateY(14px);
    transition:opacity .16s, transform 0s .2s;
  }
  .menu.is-aberto .menu__nav li,
  .menu.is-aberto .menu__rodape{
    opacity:1; transform:none;
    transition:opacity .45s cubic-bezier(.2,.7,.25,1), transform .6s cubic-bezier(.2,.7,.25,1);
    transition-delay:var(--atraso, .1s);
  }
  .menu__nav li:nth-child(1){ --atraso:.15s }
  .menu__nav li:nth-child(2){ --atraso:.2s }
  .menu__nav li:nth-child(3){ --atraso:.25s }
  .menu__nav li:nth-child(4){ --atraso:.3s }
  .menu__nav li:nth-child(5){ --atraso:.35s }
  .menu__rodape{ --atraso:.41s }
}

/* com o menu aberto o cabeçalho entra no mesmo azul-noite, com o logo e
   os ícones em branco, esteja a página no topo ou já rolada */
.masthead.is-menu{
  background:var(--noite);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 1px 0 var(--borda-clara);
}
.masthead.is-menu .brand__mark--escuro{ opacity:0 }
.masthead.is-menu .brand__mark--claro{ opacity:1 }
.masthead.is-menu .iconelink,
.masthead.is-menu .burger{ color:#fff }
.masthead.is-menu .burger{ background:rgba(255,255,255,.10) }
.masthead.is-menu :focus-visible{ outline-color:var(--verde) }

/* a página por trás não rola, e o WhatsApp flutuante sai da frente do rodapé do menu */
body.menu-aberto{ overflow:hidden }
body.menu-aberto .zap{ opacity:0; transform:scale(.6); pointer-events:none }

/* =========================================================
   HERO
   ========================================================= */

/* Banner escuro: a foto da central preenche a faixa inteira, o texto ocupa a
   coluna da esquerda e a atendente entra recortada na direita, apoiada na
   borda de baixo — por isso o padding de baixo acompanha o recuo dela. */
.hero{
  position:relative; isolation:isolate;
  /* clip e não hidden: o hidden corta igual, mas vira caixa rolável, e o link
     index.html#form-parceiro rolava o banner por dentro no desktop (a foto e
     a atendente subiam e descolavam do pé). O hidden fica para navegador antigo */
  overflow:hidden;
  overflow:clip;
  display:flex; flex-direction:column;
  /* quase a tela toda: o svh evita o pulo da barra do navegador no celular */
  min-height:clamp(560px,90vh,940px);
  min-height:clamp(560px,90svh,940px);
  padding-top:calc(var(--h-nav) + clamp(20px,3vw,44px));
  padding-bottom:clamp(64px,7vw,96px);
  background:var(--noite);
  color:#fff;
}

.hero__fundo{ position:absolute; inset:0; z-index:0 }
/* a foto traz o logotipo da Alpha pintado na parede do fundo, bem onde a
   marca do cabeçalho cai. A aproximação empurra essa parede para fora do
   quadro pela esquerda e deixa no enquadramento o painel de câmeras e a
   bancada — o que sobra da parede fica agora sob um véu bem mais leve. */
.hero__fundo img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 58%;
  transform:scale(1.56);
  transform-origin:98% 52%;
}

/* dois véus sobre a foto: um na horizontal, que abre a esquerda para o painel
   de câmeras e a bancada aparecerem e vai fechando em direção à direita, onde
   o fundo mais escuro recorta a atendente dos monitores; e outro na vertical,
   que segura o cabeçalho no topo e escurece a borda de baixo, onde a faixa
   de números encosta */
.hero__fundo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,9,17,.70) 0%,
      rgba(5,9,17,.64) 30%,
      rgba(5,9,17,.62) 58%,
      rgba(5,9,17,.74) 78%,
      rgba(5,9,17,.86) 100%),
    linear-gradient(180deg,
      rgba(5,9,17,.80) 0%,
      rgba(5,9,17,.20) 34%,
      rgba(5,9,17,.62) 100%);
}

.hero__grid{
  position:relative; z-index:2;
  flex:1 1 auto;            /* estica até o pé do banner alto */
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4.5vw,72px);
  align-items:center;
}

/* a atendente encosta na borda de baixo do banner: o recuo negativo anula
   exatamente o padding-bottom do banner — mexeu num, mexa no outro */
.hero__figura{
  margin:0;
  grid-column:2;   /* sem a coluna de texto, a atendente continua na direita */
  align-self:end;
  margin-bottom:calc(-1 * clamp(64px,7vw,96px));
}
.hero__atendente{
  display:block;
  width:auto; max-width:100%;
  height:clamp(420px,52vw,780px);
  margin-inline:auto;
  object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 34px 46px rgba(5,9,17,.6));
}

/* coluna de texto */

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--dado); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--verde);
}
.eyebrow__risco{
  width:34px; height:1px; background:var(--verde); opacity:.55;
}

.masthead :focus-visible{ outline-color:var(--grafite) }
.masthead--sobre-banner:not(.is-fixa) :focus-visible{ outline-color:var(--verde) }

.hero__titulo{
  font-family:var(--display); font-weight:700;
  font-size:2.5rem;          /* 40px, como o h1 da referência */
  line-height:1.2;           /* letter-spacing herda os -.5px do corpo */
  text-wrap:balance;
}

/* marca-texto atrás do trecho destacado, no lugar do texto colorido */
.hero__titulo em{
  position:relative; z-index:0;
  font-style:normal; color:inherit;
}
.hero__titulo em::before{
  content:""; position:absolute; z-index:-1;
  left:-.06em; right:-.06em; bottom:.1em;
  height:.22em;
  background:#fff; opacity:.18;
}

.hero__lead{
  margin-top:18px;
  max-width:47ch;
  font-size:1.25rem;         /* 20px */
  line-height:1.55;
  color:var(--tinta-clara);
}

.textlink{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:18px;
  font-family:var(--display); font-size:1rem; font-weight:700;
  color:var(--grafite);
  transition:color .2s, gap .25s;
}
.textlink:hover{ color:var(--grafite-sub); gap:.8em }
.textlink .ico{ width:1.05em; height:1.05em }

.hero .textlink{ color:#fff }
.hero .textlink:hover{ color:var(--tinta-clara) }

/* =========================================================
   PARCERIA — o formulário que abre o banner
   ========================================================= */

/* sem moldura e sem cor de destaque: o formulário usa só a paleta do banner
   — branco e o azul-noite da foto. O único bloco cheio é o botão branco */
.parceria{
  grid-column:1;
  align-self:center;
  width:100%; max-width:500px;
  text-align:left;          /* o banner centraliza no celular; o form, não */
}

@media (prefers-reduced-motion: no-preference){
  .parceria{ animation:sobe .85s cubic-bezier(.2,.7,.25,1) .05s backwards }
}

.parceria__titulo{
  font-family:var(--display); font-weight:700;
  text-transform:uppercase;
  line-height:1.02; letter-spacing:-.01em;
}
.parceria__titulo-fino{
  display:block;
  font-size:clamp(1.3125rem,1.95vw,1.6rem);
  font-weight:500;
  color:var(--verde);
  letter-spacing:.02em;
}
.parceria__titulo-forte{
  display:block;
  font-size:clamp(1.9375rem,3vw,2.55rem);
}

.parceria__campos{
  display:grid; gap:10px;
  margin-top:26px;
}

/* o ícone mora dentro do contorno, à esquerda, e o texto começa depois dele */
.campo{ position:relative; margin:0 }

.campo__ico{
  position:absolute; z-index:2; left:15px; top:15px;
  width:1.125em; height:1.125em;
  color:rgba(255,255,255,.62);
  pointer-events:none;
  transition:color .2s;
}
.campo--texto .campo__ico{ top:14px }

.campo__seta{
  position:absolute; z-index:2; right:14px; top:16px;
  width:1em; height:1em;
  color:rgba(255,255,255,.62);
  pointer-events:none;
}

.parceria input,
.parceria select,
.parceria textarea{
  width:100%;
  padding:.9em 1em .9em 2.9em;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(5,9,17,.8);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 16px 30px -22px rgba(0,0,0,.95);
  color:#fff;
  font-family:var(--texto); font-size:1rem; letter-spacing:-.5px;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.parceria textarea{
  display:block;
  min-height:88px; resize:vertical;
  line-height:1.45;
}
.parceria select{
  appearance:none; -webkit-appearance:none;
  padding-right:2.6em;
  cursor:pointer;
}
/* a lista aberta é desenhada pelo sistema: sem fundo claro aqui, as opções
   ficam brancas sobre branco no Windows */
.parceria select option{ background:var(--casco); color:#fff }
.parceria select:invalid{ color:rgba(255,255,255,.62) }

.parceria ::placeholder{ color:rgba(255,255,255,.62); opacity:1 }

/* o preenchimento automático do navegador pinta o campo de azul claro e o texto
   de preto com !important. O texto volta pelo text-fill; o fundo não dá para
   sobrescrever, então a troca dele leva dias para acontecer */
.parceria input:-webkit-autofill,
.parceria select:-webkit-autofill,
.parceria textarea:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  transition:border-color .2s, box-shadow .2s, background-color 600000s 0s;
}

.parceria input:hover,
.parceria select:hover,
.parceria textarea:hover{ border-color:rgba(255,255,255,.38) }

.parceria input:focus,
.parceria select:focus,
.parceria textarea:focus{
  outline:0;
  border-color:#fff;
  background:rgba(5,9,17,.88);
  box-shadow:0 0 0 3px rgba(255,255,255,.16);
}
.campo:focus-within .campo__ico{ color:#fff }

/* o contorno de teclado do site já é o verde; aqui ele só acompanha o banner */
.parceria :focus-visible{ outline-color:#fff }

.parceria [aria-invalid="true"]{
  border-color:#E4695A;
  box-shadow:0 0 0 3px rgba(228,105,90,.16);
}

/* uma linha só de recado: erro de preenchimento ou confirmação do envio */
.parceria__aviso{
  margin-top:14px;
  font-size:.875rem; line-height:1.45;
  color:#F2A79B;
}
.parceria__aviso--ok{ color:#7BD9A2 }

/* a isca contra robô: está no formulário, mas longe da vista. Nada de
   display:none, que robô esperto reconhece e pula */
.parceria__isca{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

/* o aviso de uso dos dados, miúdo e na cor do placeholder */
.parceria__lgpd{
  margin-top:10px;
  font-size:.75rem; line-height:1.4;
  color:rgba(255,255,255,.62);
  text-align:center;
}

.parceria__enviar{
  margin-top:16px;
  justify-content:center;
  padding-block:1.2em;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.875rem;
}
.parceria__enviar .ico{ width:1.15em; height:1.15em }
/* enquanto o e-mail vai: o botão apaga um pouco e para de reagir ao mouse */
.parceria__enviar:disabled{ opacity:.7; cursor:progress; transform:none }
.parceria__enviar:disabled .ico{ transform:none }

/* ---------------------------------------------------------
   No celular o formulário desce do banner para este bloco,
   que abre logo abaixo dele. O fundo é o mesmo casco da faixa
   de números, então o formulário continua branco sobre escuro
   e nada do que está acima precisa trocar de cor.
   Quem move o formulário para cá é o script no fim da primeira
   tela; sem ele o bloco fica escondido e o formulário segue
   dentro do banner, como no desktop.
   --------------------------------------------------------- */
.parceria-bloco{
  position:relative;
  background:var(--casco);
  color:#fff;
  padding-block:clamp(34px,7vw,52px);
}
/* a mesma emenda de fio branco que a faixa de números faz com o banner */
.parceria-bloco::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:rgba(255,255,255,.35);
  transform:scaleY(.5); transform-origin:top;
}
.parceria-bloco .parceria{
  max-width:520px; margin-inline:auto;
}

/* =========================================================
   NÚMEROS — a faixa que fecha o banner
   ========================================================= */

/* mesmo escuro do banner: agora quem marca a emenda é só o filete branco
   — sem ele os dois fundos se encostariam sem costura visível */
.numeros{
  position:relative;
  background:var(--casco);
  padding-block:clamp(18px,2.4vw,30px);
}
/* o filete tem meio pixel: em tela de alta densidade vira um fio de verdade,
   e nas comuns o navegador suaviza e ele sai mais leve que uma borda de 1px.
   Branco translúcido: marca a emenda sem brigar com a foto */
.numeros::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:rgba(255,255,255,.35);
  transform:scaleY(.5); transform-origin:top;
}

.numeros__lista{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.numeros__item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-inline:clamp(8px,1.5vw,20px);
  text-align:center;
}
/* os filetes separam colunas, nunca abrem a linha pela ponta */
.numeros__item + .numeros__item{ border-inline-start:1px solid var(--borda-clara) }

.numeros__valor{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem); line-height:1;
  letter-spacing:-.03em;
  color:#fff;
}
.numeros__rotulo{
  font-size:clamp(.75rem,.7rem + .2vw,.875rem); line-height:1.35;
  color:var(--tinta-clara);
  text-wrap:balance;
}

/* =========================================================
   BANDA DA CENTRAL — foto de um lado, painel do outro
   ========================================================= */

/* a banda abre com o topo cheio: o "Conheça em detalhes" logo acima fecha com
   padding-bottom zero e conta com este respiro. Quem cai depois de uma seção
   que já fecha inteira encurta o topo pelo modificador abaixo. O bloco em si
   respeita a margem lateral da página, como todo o resto */
.banda-secao{
  background:#fff;
  color:var(--grafite);
  padding-top:clamp(56px,7vw,92px);
  padding-bottom:clamp(30px,4vw,56px);
  scroll-margin-top:calc(var(--h-nav) + 24px);
}

/* a terceirização cai depois do "Sobre", e as duas são brancas: sem troca de
   cor no meio, o respiro cheio das duas virava um vão vazio */
.banda-secao--topo-curto{ padding-top:clamp(24px,3vw,40px) }

/* as duas metades se encostam sem costura dentro da moldura arredondada */
.banda{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-radius:var(--raio);
  overflow:hidden;
  background:var(--noite);
}

/* a foto é um recorte em fundo branco: o degradê dá chão a ela e o multiply
   dissolve o fundo do arquivo nesse degradê, então os dois ficam de pé sobre
   a borda de baixo em vez de flutuar num retângulo branco */
.banda__foto{
  position:relative;
  min-height:clamp(300px,30vw,440px);
  background:linear-gradient(180deg,#F1F5F9 0%,#DCE4ED 100%);
}
.banda__foto img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain; object-position:bottom center;
  mix-blend-mode:multiply;
  filter:brightness(1.02);
}

.banda__painel{
  display:flex; align-items:center;
  padding:clamp(34px,4.2vw,60px) clamp(26px,3.6vw,56px);
  color:#fff;
}
.banda__conteudo{ max-width:30rem }

.banda__titulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem,1.15rem + 1.7vw,2.5rem);
  line-height:1.12; letter-spacing:-.03em;
  text-wrap:balance;
}
.banda__texto{
  margin-top:18px;
  font-size:clamp(1rem,.96rem + .2vw,1.1rem); line-height:1.55;
  color:var(--tinta-clara);
}
.banda .btn{ margin-top:28px; padding:1em 1.65em; font-size:1rem }

/* o texto do "Atendimento que não para" tem duas redações, como a central e
   o sobre: no celular o painel já vem abaixo da foto e a versão curta chega
   mais rápido no botão */
.banda__so-mobile{ display:none }
@media (max-width:560px){
  .banda__so-largo{ display:none }
  .banda__so-mobile{ display:revert }
}

@media (max-width:760px){
  .banda{ grid-template-columns:minmax(0,1fr) }
  .banda__foto{ min-height:clamp(260px,60vw,340px) }
}

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */

.zap{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:grid; place-items:center;
  width:58px; height:58px;
  border-radius:50%;
  background:var(--verde); color:var(--verde-tinta);
  box-shadow:0 14px 30px -10px rgba(36,198,126,.75);
  transition:transform .25s cubic-bezier(.2,.7,.25,1), background .25s, opacity .25s;
}
.zap .ico{ width:28px; height:28px }
.zap::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(36,198,126,.5);
  animation:pulso-zap 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
.zap:hover{ transform:scale(1.07); background:var(--verde-claro) }
@keyframes pulso-zap{
  0%  { box-shadow:0 0 0 0 rgba(36,198,126,.5) }
  70% { box-shadow:0 0 0 16px rgba(36,198,126,0) }
  100%{ box-shadow:0 0 0 0 rgba(36,198,126,0) }
}

/* =========================================================
   ENTRADA DA PÁGINA — um único momento orquestrado
   ========================================================= */

@media (prefers-reduced-motion: no-preference){
  .hero__copy > *{ animation:sobe .85s cubic-bezier(.2,.7,.25,1) backwards }
  .hero__copy > *:nth-child(1){ animation-delay:.05s }
  .hero__copy > *:nth-child(2){ animation-delay:.13s }
  .hero__copy > *:nth-child(3){ animation-delay:.21s }
}

@keyframes sobe{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:1023px){
  .nav{ display:none }
  .burger{ display:inline-flex }
  .navbar__cta{ padding:.85em 1.3em; font-size:.75rem }
  .navbar .brand__mark{ height:62px }   /* a barra cai para 92px aqui */
}

@media (max-width:1023px){
  /* o formulário sai do banner e vira o bloco logo abaixo dele: aqui em cima
     fica só a foto da central com a atendente. Sem o card dividindo a área,
     o banner também não precisa mais de quase a tela inteira de altura */
  .hero{
    min-height:clamp(340px,54vh,560px);
    min-height:clamp(340px,54svh,560px);
  }
  .hero__grid{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(34px,6vw,52px);
    align-items:end;
  }
  .hero__figura{ grid-column:auto }
  .hero__lead{ max-width:56ch }
  /* sozinha no banner, ela cresce um pouco mais do que quando dividia a área */
  .hero__atendente{ height:clamp(320px,46vw,480px) }

  /* rede de segurança: sem JavaScript o formulário não desce do banner, então
     ele fica aqui mesmo, centrado e com largura de card */
  .parceria{ grid-column:auto; max-width:480px; margin-inline:auto }
}

/* no celular a referência centraliza a coluna de texto e dissolve a moldura
   do card, deixando os botões correrem soltos na página */
@media (max-width:560px){
  .hero__copy{ text-align:center }
  .hero__copy .textlink{ justify-content:center }
  .hero__titulo{ font-size:1.875rem }
  .hero__lead{ margin-inline:auto; font-size:1rem }

  /* o padding de baixo e o recuo da atendente andam sempre no mesmo valor,
     senão ela descola da borda */
  .hero{
    padding-bottom:clamp(40px,9vw,72px);

    /* A primeira tela do celular termina sempre logo abaixo do primeiro campo
       do formulário: o banner inteiro, o título "Seja um parceiro Alpha" e o
       "Nome completo" à vista, com o resto do formulário chamando a rolagem.
       --dobra é o que vem do pé do banner até o fim desse campo, somado:
       respiro do bloco (o mesmo clamp do .parceria-bloco) + título (53px) +
       margem dos campos (26px) + campo (54,8px) + 8px de folga — menor que os
       10px entre os campos, então o segundo campo não aparece nem pela borda.
       Mexeu no tamanho do título ou dos campos, refaça esta soma */
    --dobra: calc(clamp(34px,7vw,52px) + 53px + 26px + 54.8px + 8px);
    min-height:calc(100vh - var(--dobra));
    min-height:calc(100svh - var(--dobra));
  }
  .hero__figura{ margin-bottom:calc(-1 * clamp(40px,9vw,72px)) }
  /* a atendente preenche a altura que o banner ganhou: vai do respiro abaixo
     do menu até o pé do banner (o padding de baixo e o recuo se anulam).
     Os limites seguram telas muito baixas ou muito altas */
  .hero__atendente{
    height:clamp(220px, calc(100vh - var(--dobra) - var(--h-nav) - clamp(20px,3vw,44px)), 600px);
    height:clamp(220px, calc(100svh - var(--dobra) - var(--h-nav) - clamp(20px,3vw,44px)), 600px);
  }
}

@media (max-width:820px){
  .numeros__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(22px,4vw,32px) }
  .numeros__item + .numeros__item{ border-inline-start:0 }
  .numeros__item:nth-child(2n){ border-inline-start:1px solid var(--borda-clara) }
}

/* no celular a faixa sai de cena: em duas colunas ela vira dois blocos de
   rolagem entre o formulário e a primeira seção. O 24h/365 dias reaparece no
   card "Atendimento 24h" e o tempo de casa, no "desde 2004" do rodapé */
@media (max-width:560px){
  .numeros{ display:none }
}

/* PRIMEIRA TELA — o banner e a faixa de números ocupam juntos a altura da
   tela, então a faixa aparece inteira sem rolar. A faixa fica com a altura
   natural dela e o banner estica no que sobra.
   Só a partir de 1024px, onde o formulário e a atendente dividem a linha do
   banner; abaixo disso os dois empilham e não há altura de tela que comporte
   o conjunto, então a faixa vem depois do banner, na rolagem.

   Para a composição de 100% valer em qualquer tela de computador (notebook
   1366x768, Windows em 125%, zoom do navegador), quem manda nas medidas
   verticais é a ALTURA da tela: cada medida abaixo vai do valor compacto numa
   tela de 520px de altura ao valor cheio numa de 920px, em linha reta, e trava
   nas pontas. Na conta, "a + b vh" é essa reta: b = (cheio - compacto) / 4 e
   a = compacto - (cheio - compacto) x 1,3. Em 920px de altura tudo fica
   exatamente como era; abaixo de ~520px a página passa a rolar. */
@media (min-width:1024px){
  .primeira-tela{
    display:flex; flex-direction:column;
    min-height:clamp(500px,100vh,1100px);
    min-height:clamp(500px,100svh,1100px);

    --hero-respiro: clamp(6px, 3.5vh - 12.2px, 20px);   /* menu → título */
    --hero-pe:      clamp(24px, 10.5vh - 30.6px, 96px); /* botão → pé do banner */
  }
  .primeira-tela > .hero{ flex:1 0 auto; min-height:0 }
  .primeira-tela > .numeros{ flex:none }

  .primeira-tela > .hero{
    padding-top:calc(var(--h-nav) + var(--hero-respiro));
    padding-bottom:var(--hero-pe);
  }

  /* duas linhas: a de cima só guarda a sobra de altura, e na de baixo o
     formulário e a atendente ficam lado a lado, com a mesma altura. Toda a
     sobra vai para cima porque a atendente precisa encostar no pé do banner */
  /* a primeira coluna tem a largura exata do formulário e a segunda começa
     colada nele, só com a largura visível da atendente (o vão até ela é
     medido na figura, abaixo) — e o par fica centrado na página.
     Para centrar é preciso saber a largura da atendente antes de o grid
     montar a linha, então a altura da figura entra estimada pela altura da
     tela: medida no navegador, ela é uma reta (61,68vh + 8px) entre 520px e
     920px de tela, cresce só o pé do banner (10,5vh) acima disso e trava
     nas pontas. A largura visível é 94,5% dessa altura: 32,4 de vão + 62,1
     do braço direito. Errar alguns pixels aqui só desloca o centro */
  .hero__grid{
    --form-largura: clamp(400px, 25vh + 270px, 500px);
    --figura-altura: max(328px, min(61.68vh + 8px, 10.5vh + 478.8px, 605.4px));
    grid-template-columns:var(--form-largura) minmax(0, calc(var(--figura-altura) * .945));
    justify-content:center;
    grid-template-rows:minmax(0,1fr) auto;
    gap:0;
    align-items:end;
  }

  /* a atendente não tem altura própria: a figura estica na linha do
     formulário e o recuo negativo a leva até o pé do banner. A imagem tem
     4,75% de transparente acima da cabeça — os 105% de altura jogam essa
     sobra para cima da figura, e a cabeça alinha com o topo do título.
     A figura é container de tamanho, então o cqh é a altura dela: largura
     (70cqh = a proporção 2:3 da foto) e vão até o formulário (32,4cqh)
     andam com o tamanho da atendente — numa tela HD, mais baixa, ela encolhe
     e chega junto, em vez de ficar parada no meio da coluna. Em 1920x1080 o
     vão é o mesmo de antes. O min/max só segura telas estreitas e altas,
     onde a coluna encolhe e ela não caberia (62,1cqh é até o braço direito;
     o resto da foto, à direita, é transparente) */
  .hero__figura{
    grid-area:2 / 2;
    align-self:stretch;
    position:relative;
    container-type:size;
    margin-bottom:calc(-1 * var(--hero-pe));
  }
  .hero__atendente{
    position:absolute; bottom:0;
    left:max(0px, min(32.4cqh, 100cqw - 62.1cqh));
    width:min(70cqh, 112.7cqw); height:105%;
    object-position:left bottom;
  }

  /* o formulário: título, campos e botão compactam juntos pela altura */
  .hero .parceria{
    grid-area:2 / 1;
    max-width:none;   /* quem dá a largura é a coluna do grid */
    /* aqui o formulário já está inteiro na primeira tela: o link
       index.html#form-parceiro para no topo da página, com o banner e a faixa
       de números à vista. A margem de uma tela inteira joga a conta para
       baixo de zero, e o navegador trava no topo */
    scroll-margin-top:100vh;
    --campo-fonte: clamp(.875rem, .5vh + 11.4px, 1rem);
    --campo-py:    clamp(6px, 2.1vh - 4.92px, 14.4px);
  }
  .hero .parceria__titulo-fino{
    font-size:min(clamp(1.3125rem,1.95vw,1.6rem), clamp(17px, 2.15vh + 5.82px, 1.6rem));
  }
  .hero .parceria__titulo-forte{
    font-size:min(clamp(1.9375rem,3vw,2.55rem), clamp(26px, 3.7vh + 6.76px, 2.55rem));
  }
  .hero .parceria__campos{
    gap:clamp(5px, 1.25vh - 1.5px, 10px);
    margin-top:clamp(12px, 3.5vh - 6.2px, 26px);
  }
  .hero .campo{ font-size:var(--campo-fonte) }   /* o ícone acompanha o texto */
  .hero .parceria input,
  .hero .parceria select,
  .hero .parceria textarea{
    padding-block:var(--campo-py);
    font-size:var(--campo-fonte);
  }
  .hero .parceria textarea{
    height:clamp(50px, 12.5vh - 15px, 100px);
    min-height:50px;
  }
  /* com o campo mudando de altura, o ícone e a seta centram pela conta, não
     por um top fixo; na caixa de texto o ícone acompanha a primeira linha */
  .hero .campo__ico,
  .hero .campo__seta{ top:calc(50% - 1px); transform:translateY(-50%) }
  .hero .campo--texto .campo__ico{ top:var(--campo-py); transform:none }

  .hero .parceria__enviar{
    margin-top:clamp(8px, 2vh - 2.4px, 16px);
    padding-block:clamp(10px, 1.7vh + 1.16px, 16.8px);
  }

  /* o aviso de uso dos dados não entra na altura do formulário: a conta da
     atendente (--figura-altura) e o encaixe da primeira tela partem dela.
     Ele desce para o respiro entre o botão e o pé do banner, que nunca tem
     menos de 24px — os 16,8px da linha cabem, e a margem encolhe junto */
  .hero .parceria{ position:relative }
  .hero .parceria__lgpd{
    position:absolute; top:100%; left:0; right:0;
    margin-top:clamp(2px, var(--hero-pe) - 21px, 10px);
  }

  /* a faixa de números encolhe na mesma régua */
  .primeira-tela .numeros{
    padding-block:min(clamp(18px,2.4vw,30px), clamp(8px, 5.5vh - 20.6px, 30px));
  }
  .primeira-tela .numeros__valor{
    font-size:min(clamp(2rem,1.3rem + 2.4vw,3.25rem), clamp(28px, 6vh - 3.2px, 52px));
  }
}

/* CABEÇALHO DO CELULAR — menu à esquerda, logo centralizado e os
   contatos em ícone à direita. Vale em toda a faixa do hambúrguer (até
   1023px), para a janela estreita do PC ficar igual ao celular */
@media (max-width:1023px){
  .navbar__inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
    min-height:var(--h-nav);
  }

  .burger{ grid-area:1 / 1; justify-self:start; margin-inline-start:-10px }
  .brand { grid-area:1 / 2; justify-self:center; margin-right:0 }
  .navbar__contatos{ grid-area:1 / 3; justify-self:end; display:flex; gap:4px; margin-inline-end:-10px }

  .navbar__cta{ display:none }
  .brand__mark{ width:36px; height:36px }
  .navbar .brand__mark{ width:auto; height:56px }
  .brand__lockup strong{ font-size:.95rem }
  .brand__lockup span{ font-size:.5625rem; letter-spacing:.24em }

  /* no celular a barra fica com a mesma altura o tempo todo */
  .masthead.is-fixa .navbar__inner{ min-height:var(--h-nav) }
  .masthead.is-fixa .brand__mark{ height:56px }
}

@media (max-width:560px){

  .zap{ right:16px; bottom:16px; width:52px; height:52px }
  .zap .ico{ width:25px; height:25px }
}

@media (max-width:380px){
}

/* ---------- preferências do sistema ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* =========================================================
   SEÇÕES INTERNAS
   Mesma gramática do topo: olho da seção em mono verde,
   título em Archivo apertado, fundo alternando noite/neve.
   ========================================================= */

main [id],
.rodape [id]{ scroll-margin-top:calc(var(--h-nav) + 24px) }

.secao{ padding-block:clamp(64px,8vw,124px) }
.secao--escura{ background:var(--noite); color:#fff }
.secao--clara{ background:var(--neve); color:var(--grafite) }
/* variante branca: mesmo fundo do banner do topo */
.secao--branca{ background:#fff }
/* quando a seção acima já entrega respiro por conta própria, o topo encurta */
.secao--topo-curto{ padding-top:clamp(26px,3vw,44px) }

/* o mesmo caso de baixo para cima: quando a seção seguinte já abre com respiro
   próprio, a base encurta para as duas não somarem vão */
.secao--base-curta{ padding-bottom:clamp(26px,3vw,44px) }

/* sobre o claro o verde precisa escurecer para continuar legível */
.secao--clara .eyebrow{ color:var(--verde-forte) }
.secao--clara .eyebrow__risco{ background:var(--verde-forte) }

.secao__topo{ max-width:660px }

/* cabecalho centrado: o lead tambem precisa da margem automatica porque
   o max-width:58ch dele costuma ser menor que os 660px do bloco */
.secao__topo--centro{ margin-inline:auto; text-align:center }
.secao__topo--centro .secao__lead{ margin-inline:auto }

.secao__titulo{
  margin-top:20px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.85rem,1.3rem + 2.1vw,3.05rem);
  line-height:1.05; letter-spacing:-.032em;
  text-wrap:balance;
}

/* sem o eyebrow acima, o titulo abre o bloco e nao precisa do recuo */
.secao__topo > .secao__titulo:first-child{ margin-top:0 }

/* mesmo corte do titulo do banner: 40px, entrelinha 1.2 e o tracking do corpo */
.secao__titulo--banner{
  font-size:2.5rem;
  line-height:1.2;
  letter-spacing:-.5px;
}
@media (max-width:560px){
  .secao__titulo--banner{ font-size:1.875rem }
}

.secao__lead{
  margin-top:20px; max-width:58ch;
  font-size:clamp(1rem,.96rem + .2vw,1.1rem); line-height:1.62;
}
.secao--escura .secao__lead{ color:var(--tinta-clara) }
.secao--clara .secao__lead{ color:var(--grafite-sub) }

/* ---------- realce em verde no texto ----------
   Uma palavra ou expressão do título/lead tirada do cinza para o verde do
   banner. Sobre o escuro entra o verde chapado; sobre o claro, a variante
   forte — o mesmo par que o eyebrow usa acima. No lead, que corre em peso de
   corpo, o realce sobe meio peso para não depender só da cor. */
.realce{ color:var(--verde) }
.secao--clara .realce{ color:var(--verde-forte) }
.secao__lead .realce{ font-weight:600 }

/* ---------- central terceirizada ----------
   Abertura da página: o título centrado sobre o branco e, logo abaixo, uma
   faixa escura sangrando de ponta a ponta com os cinco serviços em linha, no
   mesmo fundo do painel da banda "Terceirize sua central". Ela encosta na
   seção seguinte (o "Sobre", branca), então é ela quem marca o corte. */

/* a faixa escura faz as vezes do respiro de baixo, então a seção não leva
   padding embaixo. Para o cabeçalho ficar centrado no branco — e não
   empurrado para baixo, como ficava com os 124px que o .secao dá de topo —
   o respiro de cima e o vão até a faixa saem da mesma variável: mexer em um
   sem mexer no outro desalinha */
.central{
  --respiro:clamp(40px,4.2vw,60px);
  padding-top:var(--respiro);
  padding-bottom:0;
}

/* o título tem 54 caracteres: nos 660px padrão ele quebraria em três linhas */
.central__topo{ max-width:880px }

/* por abrir a página, este cabeçalho pede um degrau a mais que o das outras
   seções. O seletor é escopado para não levar junto o "Seis frentes", que
   usa a mesma classe de título, e por ter especificidade maior também vence
   o corte de 1.875rem que o --banner faz abaixo de 560px — daí o piso do
   clamp cobrir o celular por conta própria */
.central .secao__titulo--banner{ font-size:clamp(1.95rem,1.4rem + 1.7vw,2.8rem) }
/* o lead tem 168 caracteres e precisa fechar em duas linhas: nos 58ch que o
   .secao__lead impõe por padrão ele quebrava em três. Aqui a medida é a
   largura cheia do bloco, e o bloco cresceu o suficiente para as duas linhas
   caberem com folga — é uma medida de leitura mais larga que a do resto do
   site, trocada de propósito pelo desenho do cabeçalho */
.central .secao__lead{
  max-width:none;
  font-size:clamp(1.06rem,1rem + .28vw,1.2rem);
}

/* o cabeçalho tem duas redações no HTML e só uma aparece de cada vez. O
   revert devolve a caixa natural de cada uma — inline no trecho do título,
   bloco no parágrafo do lead — sem precisar de uma regra por elemento */
.central__so-mobile{ display:none }
@media (max-width:560px){
  .central__so-largo{ display:none }
  .central__so-mobile{ display:revert }
}

.central__faixa{
  margin-top:var(--respiro);
  padding-block:clamp(50px,5.6vw,78px);
  /* o mesmo escuro do painel da banda "Terceirize sua central" */
  background:var(--noite);
  color:#fff;
}

/* diferente do resto da página, esta linha não tem o teto de 1240px do
   .wrap: ela ocupa a largura toda e guarda só a margem lateral, que é o que
   dá espaço para os cinco itens respirarem lado a lado */
.central__faixa-inner{
  width:100%;
  padding-inline:clamp(18px,4vw,40px);
}

/* flex em vez de grade: com cinco itens, nenhuma das quebras fecha a linha
   certinho (5 = 3+2 = 2+2+1), e o flex-wrap com justify-content:center deixa
   a fileira incompleta centrada em vez de encostada à esquerda. Os itens não
   crescem (flex-grow:0), então a largura da coluna é sempre a mesma */
.central__lista{
  --col-gap:clamp(16px,2.2vw,30px);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--col-gap);
}

.central__item{
  flex:0 1 calc((100% - 4 * var(--col-gap)) / 5);
  min-width:0;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* o sexto item só existe no celular: nas larguras maiores a fileira fecha em
   cinco ou em três e ele sobraria pendurado. A regra vem depois de
   .central__item de propósito — as duas têm a mesma especificidade e a de
   baixo é que vale, então invertê-las devolve o item ao desktop */
.central__item--so-mobile{ display:none }

/* sem disco: o ícone vem preto com os detalhes em branco, então o invert o
   devolve claro e ele fica direto sobre o escuro da faixa. Os arquivos são
   deitados (3:2) e ainda trazem margem transparente, daí a largura generosa
   e a caixa de altura fixa para todos assentarem na mesma linha */
.central__ico{
  display:flex; align-items:center; justify-content:center;
  height:clamp(104px,10vw,152px);
}
.central__ico img{
  display:block;
  width:auto; max-width:100%; height:100%;
  object-fit:contain;
  filter:invert(1);
}

/* "Análise de vídeo com IA" ocupa duas linhas e os demais títulos uma só, o
   que faria o texto dessa coluna descer sozinho. Reservando duas linhas em
   todos e encostando o título na base da caixa, os parágrafos começam na
   mesma altura ao longo da linha e a sobra fica acima do título */
.central__item-titulo{
  display:flex; align-items:flex-end; justify-content:center;
  min-height:calc(2 * 1.25em);
  margin-top:18px;
  font-family:var(--display); font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  font-weight:700; letter-spacing:-.022em; line-height:1.25;
  color:#fff;
  text-wrap:balance;
}

.central__item-texto{
  margin-top:8px;
  font-size:clamp(.95rem,.9rem + .18vw,1.05rem); line-height:1.6; color:var(--tinta-clara);
}

/* cinco colunas enquanto sobrar largura para o texto não virar uma coluna de
   palavras soltas; abaixo disso quebra em três e depois em duas. A fileira
   incompleta que sobra dessas contas fica centrada, por conta do flex */
@media (max-width:1100px){
  .central__lista{ row-gap:clamp(30px,4vw,44px) }
  .central__item{ flex-basis:calc((100% - 2 * var(--col-gap)) / 3) }
}
@media (max-width:640px){
  .central__item{ flex-basis:calc((100% - var(--col-gap)) / 2) }
  .central__item-texto{ font-size:.94rem }
  /* duas colunas: sem o sexto item o último ficaria sozinho na linha de baixo */
  .central__item--so-mobile{ display:flex }
}

/* ---------- conheça em detalhes ----------
   texto à esquerda, foto à direita, as duas colunas centradas uma na outra.
   A coluna de texto é a menor das duas: quem manda no bloco é a imagem */

.conheca{
  padding-top:clamp(56px,7vw,92px);
  /* o respiro de baixo vem da banda seguinte, que já abre com o topo cheio */
  padding-bottom:0;
}

.conheca__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,5vw,68px); align-items:center;
}

/* sem o eyebrow acima, o título abre a coluna e não precisa do recuo que o
   .secao__titulo traz para quando vem depois dele */
.conheca__texto .secao__titulo{ margin-top:0 }

/* leads que correm ao lado de uma imagem: o "Conheça" e o "Sobre", que são
   o mesmo desenho de bloco em sequência na página. Nos dois a coluna de texto
   divide a linha com uma foto grande e, no passo padrão do .secao__lead, o
   parágrafo fica miúdo ao lado dela — aqui sobe um degrau, acima até do lead da
   abertura. A entrelinha fecha um pouco no mesmo movimento, senão as linhas se
   soltam umas das outras nesse corpo. As duas seções andam juntas de propósito:
   se uma mudar de tamanho sem a outra, a dupla desalinha na leitura */
.conheca .secao__lead,
.sobre .secao__lead{
  font-size:clamp(1.12rem,1.02rem + .36vw,1.3rem);
  line-height:1.55;
}

/* "Saiba mais": link de texto, não pílula — o bloco é de leitura e o botão
   verde já aparece na banda logo abaixo. Leva ao WhatsApp do comercial */
.conheca__mais{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:22px;
  color:var(--verde-forte);
  font-family:var(--display); font-size:1.0625rem; font-weight:700;
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:5px; text-decoration-thickness:2px;
  transition:text-decoration-color .2s;
}
.conheca__mais .ico{ width:1.1em; height:1.1em; transition:transform .25s }
.conheca__mais:hover{ text-decoration-color:currentColor }
.conheca__mais:hover .ico{ transform:translateX(4px) }

.conheca__midia{ margin:0 }
.conheca__midia img{
  display:block;
  width:100%; height:auto;
  border-radius:var(--raio);
}

/* o filete que fecha o bloco, como no anexo. Lá ele é azul, a cor da marca da
   referência; aqui a barra sai do --noite — o mesmo fundo do cartão da banda
   logo abaixo — e vira verde no meio do caminho, misturando o fecho da seção
   com o acento da marca antes de se abrir. Ele acompanha a largura do conteúdo
   porque vive dentro do .wrap, e não sangra de ponta a ponta.

   A barra não corre chapada de ponta a ponta: começa cheia num trecho curto,
   alinhada ao início do texto, e se desfaz até sumir antes da margem direita.
   Assim ela fecha a seção sem virar o elemento mais pesado de um bloco claro,
   e o fim aberto puxa a leitura para a banda que vem embaixo */
.conheca__filete{
  margin-top:clamp(38px,4.6vw,64px);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,
    var(--noite) 0,
    var(--noite) clamp(64px,11%,120px),
    var(--verde-forte) 34%,
    var(--verde) 54%,
    rgba(36,198,126,.38) 78%,
    rgba(36,198,126,0) 100%);
}

/* empilha cedo: em duas colunas estreitas a foto perde a leitura e o texto
   vira uma coluna de palavras soltas. Empilhado, a foto sobe para cima do
   título: no celular ela é o que abre o bloco, e o texto vem embaixo
   explicando o que se está vendo. Sem a foto ao lado, o texto centraliza
   embaixo dela; o lead tem max-width e precisa da margem automática.
   Vale até as telas HD (1280 e 1366 de largura): ali o bloco não abre na
   largura toda do site — a foto passaria da altura da tela —, fica numa
   coluna de 760px centrada, e o filete de fecho acompanha a mesma largura.
   O "em detalhes" desce sempre para a própria linha, como no celular */
@media (max-width:1366px){
  .conheca__grid{
    grid-template-columns:minmax(0,1fr); gap:26px;
    max-width:760px; margin-inline:auto;
  }
  .conheca__midia{ order:-1 }
  .conheca__texto{ text-align:center }
  .conheca__texto .secao__titulo .realce{ display:block }
  .conheca__texto .secao__lead{ margin-inline:auto }
  .conheca__filete{ max-width:760px; margin-inline:auto }
}

/* ---------- sobre ---------- */

.sobre{ position:relative; overflow:hidden }

.sobre__grid{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(30px,5vw,76px); align-items:center;
}

/* o mapa é uma imagem transparente, de traço verde: sobre o claro da seção ele
   assenta direto, sem moldura nem sombra — qualquer cartão atrás dele criaria
   uma borda que o recorte não tem. O brilho dos nós, desenhado para fundo
   escuro, some no claro e sobra o traço, que é o que a seção mostra */
.sobre__foto{ justify-self:center }
.sobre__foto img{
  display:block;
  width:100%; max-width:clamp(320px,40vw,560px); height:auto;
}

/* o lead tem duas redações no HTML, como o cabeçalho da central: no celular
   o parágrafo inteiro vira um bloco alto entre o título e o mapa, então entra
   a versão curta, com os mesmos dois destaques */
.sobre__so-mobile{ display:none }
@media (max-width:560px){
  .sobre__so-largo{ display:none }
  .sobre__so-mobile{ display:revert }
}

/* ---------- chamada final ---------- */

/* e tambem o destino do #orcamento, para onde os dois botoes
   "Solicitar orcamento" do cabecalho apontam */
.chamada{
  position:relative; isolation:isolate;
  padding-block:clamp(64px,8vw,110px);
  background:var(--noite);
  text-align:center;
  scroll-margin-top:calc(var(--h-nav) + 24px);
}
.chamada__foto{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
}
.chamada::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(5,9,17,.94), rgba(5,9,17,.82) 45%, rgba(5,9,17,.93));
}
.chamada__conteudo{ position:relative; z-index:2 }
.chamada__titulo{
  max-width:19ch; margin-inline:auto;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.7rem,1.25rem + 1.9vw,2.85rem);
  line-height:1.06; letter-spacing:-.03em;
  text-wrap:balance;
}
.chamada__lead{
  margin:18px auto 0; max-width:52ch;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem); line-height:1.6;
  color:var(--tinta-clara);
}
.chamada__acoes{
  margin-top:30px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
/* aqui o ícone vem antes do texto: deslizar para a direita ficaria errado */
.chamada__acoes .btn:hover .ico{ transform:none }

.btn--linha{
  background:rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
}
.btn--linha:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.42);
  transform:translateY(-2px);
}

/* ---------- rodapé ---------- */

.rodape{
  background:var(--noite); color:var(--tinta-clara);
  padding-block:clamp(48px,6vw,76px) 26px;
}
.rodape__grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px);
}
.rodape__marca p{
  margin-top:20px; max-width:38ch;
  font-size:.9375rem; line-height:1.66; color:var(--tinta-fraca);
}
.rodape__col h2{
  margin-bottom:16px;
  font-family:var(--dado); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--verde);
}
.rodape__col ul{ display:grid; gap:13px }
.rodape__col li{ font-size:.9375rem; line-height:1.55 }
.rodape__col a{ transition:color .2s }
.rodape__col a:hover{ color:#fff }

.rodape__base{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  margin-top:clamp(38px,4.5vw,60px); padding-top:22px;
  border-top:1px solid var(--borda-clara);
  font-family:var(--dado); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--tinta-fraca);
}

/* o bloco legal ocupa a esquerda inteiro: numa tela estreita o CNPJ desce para
   a linha de baixo em vez de empurrar o "voltar ao topo" para fora */
.rodape__legal{ display:flex; flex-wrap:wrap; gap:6px 18px }

/* os dois canais de conversa viram alvo de toque debaixo da marca. O texto
   deles continua listado no contato ao lado; aqui é atalho, não repetição de
   informação — por isso só o ícone, sem o número escrito de novo */
.rodape__social{ display:flex; gap:10px; margin-top:22px }
.rodape__social a{
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid var(--borda-clara); border-radius:12px;
  color:var(--tinta-clara);
  transition:color .2s, background-color .2s, border-color .2s, transform .2s;
}
.rodape__social .ico{ width:17px; height:17px }
.rodape__social a:hover{
  color:var(--verde-tinta); background:var(--verde); border-color:var(--verde);
  transform:translateY(-2px);
}

/* as listas com ícone viram grade de duas colunas: a do ícone tem largura fixa,
   então as linhas de texto alinham entre si mesmo quando o endereço quebra em
   duas. O ícone desce um fio para assentar na primeira linha do item, e não no
   topo da caixa */
.rodape__lista li{
  display:grid; grid-template-columns:16px minmax(0,1fr);
  gap:11px; align-items:start;
}
.rodape__lista .ico{
  width:16px; height:16px; margin-top:.2em;
  color:var(--verde);
}
/* o e-mail não tem espaço onde quebrar e a coluna é estreita: o <wbr> do HTML
   quebra depois do @; isto só segura o caso de nem o domínio caber sozinho */
.rodape__email{ overflow-wrap:anywhere }
/* no contato o ícone diz qual é o canal e trabalha cheio; nos serviços ele é só
   marcador de lista, então recua para a coluna não virar uma fileira de verde */
.rodape__lista--servicos .ico{ opacity:.5 }

/* o selo "Aberto 24 horas" que fechava o rodapé era enfeite. No lugar dele
   entra o caminho de volta, que é o que falta a quem chegou ao fim da página;
   o chevron do sprite aponta para baixo, então gira para virar subida */
.rodape__topo{ display:inline-flex; align-items:center; gap:9px; transition:color .2s }
.rodape__topo .ico{
  width:14px; height:14px;
  transform:rotate(180deg);
  transition:transform .2s;
}
.rodape__topo:hover{ color:#fff }
.rodape__topo:hover .ico{ transform:rotate(180deg) translateY(2px) }

/* o crédito de quem fez o site: a última linha da página, fora do mono
   em caixa alta da linha legal, porque o @ do Instagram só se lê em minúsculas */
.rodape__credito{
  margin-top:16px;
  font-size:.8125rem; line-height:1.5;
  color:var(--tinta-fraca);
}
.rodape__credito a{ font-weight:600; color:var(--tinta-clara); transition:color .2s }
.rodape__credito a:hover{ color:#fff }

/* ---------- responsivo das seções internas ---------- */

@media (max-width:1023px){
  /* empilhado, o mapa desce para depois do texto: quem abre a seção é o
     título, e a ilustração entra logo abaixo confirmando o alcance */
  .sobre__grid{ grid-template-columns:minmax(0,1fr); gap:26px }
  .sobre__foto{ order:1 }
  .rodape__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:560px){
  .rodape__grid{ grid-template-columns:minmax(0,1fr) }
  .chamada__acoes .btn{ width:100%; justify-content:center }
}

/* =========================================================
   TELA DE LINKS (links.html)
   A página da bio: uma coluna só, na largura de um celular, com
   os canais da Alpha em cartões. O fundo é o mesmo azul-noite do
   site e o verde continua sendo só ação: o anel da marca, a seta
   do cartão sob o dedo e o botão do Pix.
   A exceção de cor da página são os ícones dos canais: cada um
   entra com a logo e a cor original dele, para ser reconhecido
   de relance, como nos apps do celular.
   ========================================================= */

.links{
  /* a altura da capa; o avatar senta com o centro exatamente no pé dela */
  --capa: clamp(150px, 16vw + 90px, 230px);
  --avatar: 124px;

  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
}

/* ---------- capa ---------- */

/* a foto da central apagada no azul-noite. Sangra de ponta a ponta mesmo
   no computador; quem fica estreita é a coluna. O recorte pega o painel de
   câmeras, e não a parede com o logo, que já está no avatar logo abaixo */
.links__capa{
  position:absolute; top:0; left:0; right:0; z-index:-1;
  height:var(--capa);
  overflow:hidden;
}
.links__capa img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center 20%;
  /* aproxima pela direita: a parede com o logo sai do quadro */
  transform:scale(1.9);
  transform-origin:96% 18%;
}
.links__capa::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,12,21,.62) 0%, rgba(7,12,21,.78) 70%, rgba(7,12,21,.9) 100%);
}
/* o fio branco de meio pixel, o mesmo da emenda do banner com a faixa de
   números na home: marca o pé da capa e passa por trás do avatar */
.links__capa::before{
  content:""; position:absolute; z-index:1; left:0; right:0; bottom:0;
  height:1px; background:rgba(255,255,255,.35);
  transform:scaleY(.5); transform-origin:bottom;
}

/* ---------- coluna ---------- */

.links__coluna{
  flex:1 0 auto;
  width:100%; max-width:480px;
  margin-inline:auto;
  padding-inline:clamp(16px,4.5vw,24px);
}

.links__topo{
  padding-top:calc(var(--capa) - var(--avatar) / 2);
  text-align:center;
}

/* o logo inteiro, escudo e ALPHA, dentro do círculo. O anel é verde e um
   aro do azul-noite o separa do fio da capa, que passa por trás */
.links__avatar{
  display:grid; place-items:center;
  width:var(--avatar); height:var(--avatar);
  margin-inline:auto;
  border:3px solid var(--verde);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%, #14202F 0%, var(--noite) 72%);
  box-shadow:
    0 0 0 6px var(--noite),
    0 0 0 7px rgba(255,255,255,.10);
}
.links__avatar img{
  display:block;
  width:62%; height:auto;
  margin-top:-4%;   /* o ALPHA pesa embaixo: sobe um fio para centrar no olho */
}

.links__nome{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:20px;
  font-family:var(--display); font-weight:700;
  font-size:1.75rem; line-height:1.1; letter-spacing:-.02em;
}
.links__selo{ width:24px; height:24px; flex:0 0 auto }

.links__lema{
  margin-top:10px;
  font-family:var(--texto); font-size:.9375rem; line-height:1.55;
  color:var(--tinta-clara);
}

/* ---------- redes: Instagram, e-mail e avaliações no Google ---------- */

.links__social{
  display:flex; justify-content:center; gap:14px;
  margin-top:24px;
}
.social{
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:16px;
  color:#fff;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s;
}
.social svg{ width:27px; height:27px }
.social:hover{ transform:translateY(-3px) }

/* o degradê do ícone do Instagram, do amarelo no pé ao azul no topo */
.social--insta{
  background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  box-shadow:0 14px 28px -14px rgba(214,36,159,.9);
}
.social--email{
  background:linear-gradient(180deg, #37B8FF 0%, #1370E8 100%);
  box-shadow:0 14px 28px -14px rgba(19,112,232,.95);
}
.social--google{
  background:#fff;
  box-shadow:0 14px 28px -16px rgba(255,255,255,.45);
}
.social--google svg{ width:26px; height:26px }

/* ---------- cartões ---------- */

.links__lista{
  display:grid; gap:12px;
  margin-top:32px;
}

.cartao,
.pix{
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%);
}

.cartao{
  display:flex; align-items:center; gap:16px;
  min-height:82px;
  padding:12px 14px 12px 12px;
  transition:border-color .2s, background-color .2s, transform .25s cubic-bezier(.2,.7,.25,1);
}
.cartao:hover{
  border-color:rgba(255,255,255,.2);
  background-color:rgba(255,255,255,.03);
  transform:translateY(-2px);
}

.cartao__ico{
  display:grid; place-items:center;
  flex:0 0 auto;
  width:56px; height:56px;
  border-radius:15px;
  color:#fff;
}
.cartao__ico svg{ width:30px; height:30px }

.cartao__texto{ flex:1 1 auto; min-width:0 }
.cartao__titulo{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:1.0625rem; line-height:1.25; letter-spacing:-.01em;
  color:#fff;
}
.cartao__sub{
  display:block; margin-top:3px;
  font-size:.875rem; line-height:1.4;
  color:var(--tinta-clara);
}

/* o chevron do sprite aponta para baixo: gira para apontar a saída */
.cartao__seta{
  display:grid; place-items:center;
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:var(--tinta-clara);
  transition:background-color .2s, color .2s, transform .25s cubic-bezier(.2,.7,.25,1);
}
.cartao__seta svg{ width:16px; height:16px; transform:rotate(-90deg) }
.cartao:hover .cartao__seta{
  background:var(--verde); color:var(--verde-tinta);
  transform:translateX(2px);
}

/* as cores de cada canal */
.cartao__ico--zap{ background:#25D366 }
.cartao__ico--zap svg{ width:31px; height:31px }
.cartao__ico--fone{ background:linear-gradient(180deg, #37B8FF 0%, #1370E8 100%) }
.cartao__ico--fone svg{ width:27px; height:27px }
/* a marca da Alpha é preto e branco: o escudo branco do rodapé, invertido
   sobre a pastilha branca, como o logo de um app */
.cartao__ico--site{ background:#fff }
.cartao__ico--site img{ display:block; width:36px; height:36px; filter:invert(1) }
.cartao__ico--parceiro{ background:var(--verde); color:var(--verde-tinta) }
.cartao__ico--google{ background:#fff }
.cartao__ico--google svg{ width:28px; height:28px }
.cartao__ico--mapa{ background:#fff }
.cartao__ico--mapa svg{ width:32px; height:32px }
.cartao__ico--pix{ background:#32BCAD }
.cartao__ico--pix svg{ width:28px; height:28px }

/* ---------- Pix ---------- */

.pix{
  margin-top:12px;
  padding:18px 16px 16px;
}
.pix__cabeca{ display:flex; align-items:center; gap:16px }
.pix__dados{ min-width:0 }

.pix__rotulo{
  font-family:var(--dado); font-size:.6875rem; font-weight:500; line-height:1.3;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--verde);
}
.pix__chave{
  margin-top:4px;
  font-family:var(--display); font-weight:700;
  font-size:1.375rem; line-height:1.2; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.pix__nome{
  margin-top:3px;
  font-family:var(--dado); font-size:.6875rem; line-height:1.3;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--tinta-fraca);
}

.pix__copiar{
  margin-top:18px;
  padding-block:1.05em;
  font-size:1rem;
}
.pix__copiar .ico{ width:1.15em; height:1.15em }
/* o ícone vem antes do texto: deslizar para a direita ficaria errado */
.pix__copiar:hover .ico{ transform:none }
/* copiado: o botão fica do verde claro por uns segundos, com o check */
.pix__copiar.is-copiado{ background:var(--verde-claro) }

.pix__aviso{
  margin-top:10px;
  font-size:.8125rem; line-height:1.45; text-align:center;
  color:#F2A79B;
}
.pix__aviso:empty{ display:none }

/* o segundo caminho do Pix: contornado, abaixo do copiar, para o verde
   continuar sendo a ação principal do cartão. Abre o popup do QR Code */
.pix__gerar{
  margin-top:10px;
  padding-block:calc(1.05em - 1px);   /* a borda de 1px conta na altura */
  font-size:1rem;
}
.pix__gerar .ico{ width:1.15em; height:1.15em }
.pix__gerar:hover .ico{ transform:none }

/* ---------- horário e rodapé ---------- */

.links__horario{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-block:26px 34px;
  font-size:.875rem;
  color:var(--tinta-clara);
}
.links__horario .ico{ width:16px; height:16px; color:var(--verde) }
.links__horario strong{ font-weight:600; color:#fff }

.links__rodape{
  padding:24px clamp(16px,4.5vw,24px) 30px;
  border-top:1px solid var(--borda-clara);
  text-align:center;
  font-size:.8125rem; line-height:1.5;
  color:var(--tinta-fraca);
}
.links__rodape p{ margin-top:10px }

.links__rodape-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0;
  font-family:var(--display); font-size:.9375rem; font-weight:700;
  color:#fff;
}
.links__rodape-nav li + li::before{
  content:"·"; margin-inline:10px;
  color:var(--tinta-fraca);
}
.links__rodape a{ transition:color .2s }
.links__rodape a:hover{ color:var(--verde) }

.links__credito a{ font-weight:600; color:#fff }

/* ---------- entrada ---------- */

@media (prefers-reduced-motion: no-preference){
  .links__topo > *,
  .links__lista > li,
  .pix,
  .links__horario{ animation:sobe .7s cubic-bezier(.2,.7,.25,1) backwards }

  .links__topo > :nth-child(2){ animation-delay:.05s }
  .links__topo > :nth-child(3){ animation-delay:.1s }
  .links__topo > :nth-child(4){ animation-delay:.15s }
  .links__lista > li:nth-child(1){ animation-delay:.2s }
  .links__lista > li:nth-child(2){ animation-delay:.25s }
  .links__lista > li:nth-child(3){ animation-delay:.3s }
  .links__lista > li:nth-child(4){ animation-delay:.35s }
  .links__lista > li:nth-child(5){ animation-delay:.4s }
  .links__lista > li:nth-child(6){ animation-delay:.45s }
  .pix{ animation-delay:.5s }
  .links__horario{ animation-delay:.55s }
}

@media (max-width:360px){
  .cartao{ gap:12px }
  .cartao__ico{ width:50px; height:50px; border-radius:14px }
  .pix__chave{ font-size:1.2rem }
}

/* ---------- popup do QR Code Pix ----------
   Um <dialog> só, que muda de roupa pela largura: no computador é a
   janela no meio da tela; no celular (a mesma consulta do js/links.js)
   é a folha que sobe do pé da tela e fecha arrastando. Quem anima é o
   script, só com transform e opacity; o CSS aqui só dá o lugar final */

/* com o popup aberto a página por trás não rola, nem puxa para atualizar */
html.modal-aberto{ overflow:hidden; overscroll-behavior:none }

.modal{
  /* o script ajusta as duas medidas à área visível da tela: com o teclado
     do celular aberto, a folha sobe junto e o campo não fica escondido */
  position:fixed;
  top:var(--vv-topo, 0px); bottom:auto; left:0; right:auto;
  width:100%; height:var(--vv-altura, 100%);
  max-width:none; max-height:none;
  margin:0; padding:0; border:0;
  background:transparent;
  color:#fff;
  overflow:visible;
}
.modal[open]{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,24px);
}
/* o escurecido é um elemento de verdade, e não o ::backdrop, porque o
   arrasto clareia o fundo junto com a folha, quadro a quadro. Fixo, ele
   cobre a tela inteira mesmo quando o popup encolhe por causa do teclado */
.modal::backdrop{ background:transparent }
.modal__fundo{
  position:fixed; inset:0;
  background:rgba(3,6,12,.74);
  will-change:opacity;
  touch-action:none;   /* no iPhone o dedo no escuro rolaria a página de trás */
}

.folha{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:420px;
  max-height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:linear-gradient(180deg, #121C2C 0%, #0A111C 100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  text-align:center;
  will-change:transform;
}
.folha:focus{ outline:0 }

/* quem rola é o corpo, e o respiro mora nele: o conteúdo corre até a borda
   da folha, sem sumir numa linha invisível antes dela */
.folha__corpo{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:30px 28px 24px;
}
.folha--arrastando{ -webkit-user-select:none; user-select:none; cursor:grabbing }

/* a alça só existe na folha do celular */
.folha__alca{ display:none }

/* o centro do X cai na linha do título: 30px de respiro + meia linha de 27,5px */
.folha__fechar{
  position:absolute; top:26px; right:16px;
  display:grid; place-items:center;
  width:36px; height:36px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.08);
  color:var(--tinta-clara);
  cursor:pointer;
  transition:background-color .2s, color .2s;
}
.folha__fechar:hover{ background:rgba(255,255,255,.16); color:#fff }
.folha__fechar .ico{ width:18px; height:18px }

.folha__titulo{
  padding-inline:44px;   /* não passa por baixo do botão de fechar */
  font-family:var(--display); font-weight:700;
  font-size:1.375rem; line-height:1.25; letter-spacing:-.02em;
}
.folha__titulo:focus{ outline:0 }

.folha__quem{
  margin-top:10px;
  font-size:.875rem; line-height:1.45;
  color:var(--tinta-clara);
}
.folha__quem strong{
  display:block;
  font-family:var(--display); font-size:.9375rem; font-weight:700;
  color:#fff;
}

/* passo 1: o valor */

.folha__rotulo{
  display:block;
  margin-top:26px;
  text-align:left;
  font-size:.875rem; font-weight:600;
  color:#fff;
}
/* 24px de letra: acima dos 16px o iPhone não dá zoom ao tocar no campo */
.folha__campo{
  display:block;
  width:100%; height:62px;
  margin-top:8px; padding:0 18px;
  border:1px solid rgba(255,255,255,.18); border-radius:14px;
  background:rgba(5,9,17,.55);
  font-family:var(--display); font-size:1.5rem; font-weight:700;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  color:#fff; caret-color:var(--verde);
  transition:border-color .2s, box-shadow .2s;
}
.folha__campo::placeholder{ color:rgba(255,255,255,.34); opacity:1 }
.folha__campo:hover{ border-color:rgba(255,255,255,.3) }
.folha__campo:focus{
  outline:0;
  border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(36,198,126,.18);
}

.folha__dica{
  margin-top:8px;
  text-align:left;
  font-size:.8125rem; line-height:1.45;
  color:var(--tinta-fraca);
}

.folha__acao{
  margin-top:22px;
  padding-block:1.1em;
  font-size:1rem;
}
.folha__acao .ico{ width:1.15em; height:1.15em }
.folha__acao:hover .ico{ transform:none }

/* passo 2: o QR Code */

.folha__valor{
  margin-top:6px;
  font-family:var(--display); font-weight:700;
  font-size:2rem; line-height:1.15; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--verde);
}
.folha__valor--livre{ font-size:1.125rem; line-height:1.6; color:var(--tinta-clara) }

/* a caixa branca tem o tamanho fixo desde o começo: quando o desenho chega
   ela não muda de altura, e nada na folha se mexe */
.folha__qr{
  display:grid; place-items:center;
  width:min(244px, 68vw);
  aspect-ratio:1;
  margin:18px auto 0;
  padding:10px;
  border-radius:20px;
  background:#fff;
}
.folha__qr svg{ display:block; width:100%; height:100% }
.folha__qr-erro{
  padding:10px;
  font-size:.875rem; line-height:1.45;
  color:var(--grafite-sub);
}
@media (prefers-reduced-motion: no-preference){
  .folha__qr--carregando{ animation:qr-pisca 1.1s ease-in-out infinite alternate }
}
@keyframes qr-pisca{ to{ opacity:.55 } }

.folha__qr + .folha__quem{ margin-top:16px }

.folha__aviso{
  margin-top:10px;
  font-size:.8125rem; line-height:1.45;
  color:#F2A79B;
}
.folha__aviso:empty{ display:none }

/* o código aparece só quando o copiar falha, já selecionado */
.folha__codigo{
  display:block;
  width:100%; margin-top:10px; padding:10px 12px;
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  background:rgba(5,9,17,.55);
  font-family:var(--dado); font-size:.75rem; line-height:1.5;
  color:#fff;
  word-break:break-all;
  resize:none;
}

.folha__voltar{
  display:inline-block;
  margin-top:6px; padding:12px 18px;
  border:0; background:none;
  font-family:var(--display); font-size:.9375rem; font-weight:700;
  color:var(--tinta-clara);
  cursor:pointer;
  transition:color .2s;
}
.folha__voltar:hover{ color:#fff }

/* ---------- a folha do celular ---------- */

@media (max-width:640px), (pointer:coarse) and (max-height:500px){
  .modal[open]{
    align-items:flex-end;
    padding:24px 0 0;
  }

  .folha{
    max-width:none;
    border-width:1px 0 0;
    border-radius:24px 24px 0 0;
    /* a segunda sombra é um pedaço da própria folha abaixo do pé dela: ao
       puxar para cima, o que aparece embaixo é folha, e não a página */
    box-shadow:0 -20px 50px -24px rgba(0,0,0,.8), 0 90px 0 0 #0A111C;
    /* o gesto na folha é todo do script; o navegador não rola nem dá zoom */
    touch-action:none;
  }
  .folha__corpo{ padding:0 20px 22px }
  /* conteúdo maior que a tela: o corpo rola, e a folha arrasta só pelo topo */
  .folha--rola .folha__corpo{ touch-action:pan-y }
  .folha--rola .folha__titulo{ touch-action:none }

  .folha__alca{
    display:block;
    position:relative;
    flex:none;
    height:30px;
    cursor:grab;
  }
  .folha__alca::before{
    content:""; position:absolute; top:10px; left:50%;
    width:40px; height:5px; margin-left:-20px;
    border-radius:3px;
    background:rgba(255,255,255,.24);
  }

  .folha__fechar{ top:36px; right:16px }   /* alça (30) + respiro (10) + meia linha, menos meio X */
  .folha__titulo{ padding-top:10px }
  .folha__rotulo{ margin-top:24px }
}