/* =========================================================
   Alpha Service — Terceirização de Monitoramento
   Direção: preto grafite e prata. A paleta, a letra e o metal
   saem da faixa de missão, visão e valores e das artes da Alpha
   que o cliente mandou em 14/09/2026: fundos pretos com faixas
   diagonais, títulos em degradê prata, chapas cromadas com letra
   escura e seções claras em branco e cinza metálico. Não há cor
   de acento: quem chama a ação é a chapa de prata.
   ========================================================= */

:root{
  /* preto — neutro, com um fio de frio, como o fundo das artes */
  --noite:        #090B0F;
  --casco:        #090B0F;
  --grafite-fundo:#151920;   /* o miolo mais claro dos fundos escuros */

  /* prata, do brilho à sombra do metal */
  --prata-clara:  #E4E7EA;
  --prata:        #C6CBD1;
  --prata-media:  #A7ADB4;
  --prata-sombra: #5F666F;

  /* os degradês de metal. O de texto e o de aro são os da faixa de missão;
     a chapa é a das etiquetas "Monitoramento de alarmes" das artes, com o
     reflexo claro em cima e a sombra passando pelo meio */
  --metal-texto:  linear-gradient(180deg,#FFFFFF 12%,#C6CBD1 55%,#858B93 100%);
  --metal-aro:    linear-gradient(145deg,#F7F8FA 0%,#BCC2C9 24%,#6C737C 50%,#DADEE2 72%,#858B93 100%);
  --metal-chapa:  linear-gradient(180deg,#FFFFFF 0%,#E3E6E9 30%,#B9BFC6 56%,#D5D9DD 80%,#F1F2F4 100%);
  /* sobre o claro o metal escurece: é o realce dos títulos das seções brancas */
  --metal-grafite:linear-gradient(180deg,#8A9199 0%,#5A616A 45%,#23272E 100%);
  /* o fundo da faixa de missão: faixas diagonais de brilho e sombra sobre
     um preto que clareia no meio. Vale para todos os fundos escuros lisos */
  --faixas-diagonais:
    linear-gradient(55deg,
      transparent 0 16%,
      rgba(255,255,255,.03) 16% 30%,
      transparent 30% 44%,
      rgba(255,255,255,.045) 44% 55%,
      rgba(0,0,0,.28) 55% 63%,
      transparent 63% 76%,
      rgba(255,255,255,.03) 76% 87%,
      transparent 87%);

  /* as linhas onduladas do fundo preto das artes "Quem somos" e "Faça o seu
     orçamento", finas como curvas de nível (SVG gerado por script, 16 ondas).
     Vão no rodapé do index e no da tela de links */
  --curvas-nivel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='1.1'><path d='M-50 -54C-42 -48 -17 -28 0 -17C17 -6 33 9 50 13C67 17 83 11 100 8C117 5 133 -5 150 -7C167 -8 183 -2 200 1C217 5 233 14 250 15C267 16 283 10 300 5C317 1 333 -10 350 -12C367 -14 383 -10 400 -8C417 -5 433 4 450 2C467 1 483 -8 500 -18C517 -28 533 -48 550 -58C567 -68 583 -74 600 -77C617 -80 633 -73 650 -74C667 -75 683 -77 700 -80C717 -84 733 -94 750 -93C767 -93 783 -88 800 -79C817 -70 842 -46 850 -39'/><path d='M-50 0C-42 8 -17 33 0 45C17 57 33 69 50 71C67 74 83 65 100 60C117 56 133 46 150 45C167 43 183 48 200 50C217 51 233 55 250 52C267 49 283 39 300 33C317 28 333 19 350 19C367 19 383 28 400 31C417 35 433 44 450 42C467 40 483 28 500 18C517 8 533 -11 550 -19C567 -27 583 -30 600 -33C617 -35 633 -31 650 -33C667 -35 683 -42 700 -45C717 -49 733 -57 750 -54C767 -51 783 -40 800 -28C817 -16 842 10 850 18'/><path d='M-50 54C-42 63 -17 92 0 104C17 115 33 124 50 125C67 127 83 116 100 111C117 106 133 99 150 97C167 95 183 100 200 98C217 97 233 94 250 88C267 81 283 66 300 60C317 54 333 48 350 50C367 51 383 64 400 68C417 73 433 80 450 77C467 75 483 62 500 53C517 44 533 30 550 23C567 17 583 18 600 16C617 14 633 15 650 12C667 8 683 -3 700 -7C717 -11 733 -17 750 -11C767 -6 783 11 800 24C817 38 842 64 850 72'/><path d='M-50 108C-42 116 -17 147 0 157C17 168 33 173 50 173C67 174 83 163 100 158C117 154 133 151 150 149C167 146 183 150 200 146C217 141 233 132 250 123C267 113 283 96 300 89C317 82 333 79 350 82C367 84 383 98 400 103C417 107 433 112 450 109C467 106 483 94 500 87C517 80 533 71 550 68C567 65 583 69 600 67C617 66 633 64 650 59C667 54 683 40 700 37C717 33 733 30 750 37C767 44 783 64 800 78C817 93 842 116 850 123'/><path d='M-50 162C-42 169 -17 197 0 206C17 215 33 216 50 215C67 215 83 205 100 202C117 199 133 200 150 198C167 196 183 198 200 191C217 185 233 170 250 158C267 147 283 128 300 121C317 114 333 114 350 117C367 120 383 133 400 137C417 140 433 141 450 138C467 135 483 123 500 119C517 115 533 113 550 113C567 113 583 120 600 120C617 119 633 114 650 109C667 103 683 88 700 86C717 83 733 84 750 92C767 100 783 121 800 134C817 147 842 165 850 171'/><path d='M-50 217C-42 222 -17 245 0 251C17 257 33 253 50 252C67 250 83 244 100 242C117 241 133 245 150 244C167 242 183 242 200 234C217 225 233 207 250 194C267 181 283 163 300 157C317 151 333 154 350 156C367 158 383 169 400 171C417 173 433 169 450 166C467 163 483 154 500 152C517 151 533 155 550 159C567 162 583 171 600 171C617 171 633 165 650 159C667 154 683 141 700 139C717 138 733 143 750 152C767 161 783 181 800 192C817 203 842 214 850 218'/><path d='M-50 271C-42 275 -17 291 0 293C17 295 33 288 50 285C67 283 83 279 100 279C117 279 133 286 150 285C167 283 183 281 200 271C217 262 233 241 250 229C267 217 283 202 300 197C317 192 333 197 350 199C367 201 383 207 400 207C417 206 433 199 450 196C467 192 483 186 500 188C517 189 533 199 550 204C567 210 583 220 600 221C617 221 633 214 650 210C667 206 683 196 700 197C717 198 733 207 750 216C767 225 783 242 800 250C817 259 842 263 850 265'/><path d='M-50 325C-42 327 -17 334 0 333C17 331 33 321 50 318C67 315 83 314 100 315C117 316 133 324 150 322C167 320 183 314 200 304C217 295 233 274 250 263C267 252 283 242 300 239C317 236 333 243 350 244C367 245 383 247 400 245C417 242 433 232 450 229C467 226 483 223 500 227C517 231 533 244 550 251C567 258 583 267 600 268C617 270 633 261 650 259C667 257 683 252 700 255C717 259 733 272 750 281C767 289 783 303 800 308C817 313 842 311 850 311'/><path d='M-50 377C-42 376 -17 375 0 371C17 367 33 355 50 352C67 348 83 350 100 351C117 352 133 359 150 356C167 354 183 344 200 334C217 324 233 305 250 296C267 288 283 283 300 282C317 281 333 289 350 290C367 290 383 288 400 284C417 280 433 269 450 267C467 264 483 266 500 272C517 277 533 293 550 301C567 308 583 314 600 316C617 317 633 309 650 308C667 308 683 308 700 314C717 320 733 335 750 344C767 352 783 361 800 363C817 365 842 358 850 357'/><path d='M-50 423C-42 421 -17 413 0 407C17 401 33 390 50 387C67 384 83 388 100 389C117 389 133 394 150 390C167 386 183 373 200 363C217 353 233 336 250 330C267 324 283 325 300 325C317 326 333 334 350 334C367 334 383 328 400 324C417 320 433 309 450 309C467 308 483 315 500 322C517 330 533 346 550 353C567 360 583 363 600 364C617 364 633 357 650 358C667 360 683 365 700 372C717 379 733 396 750 403C767 410 783 414 800 413C817 413 842 403 850 401'/><path d='M-50 464C-42 460 -17 448 0 441C17 434 33 426 50 424C67 422 83 428 100 428C117 428 133 430 150 424C167 418 183 402 200 393C217 383 233 370 250 366C267 362 283 367 300 368C317 370 333 377 350 376C367 375 383 367 400 363C417 360 433 352 450 354C467 357 483 368 500 377C517 386 533 402 550 408C567 414 583 413 600 413C617 414 633 407 650 410C667 413 683 422 700 429C717 437 733 452 750 457C767 461 783 460 800 458C817 455 842 445 850 442'/><path d='M-50 498C-42 494 -17 478 0 472C17 465 33 461 50 461C67 460 83 469 100 469C117 468 133 466 150 459C167 452 183 435 200 426C217 417 233 408 250 405C267 403 283 411 300 412C317 414 333 417 350 416C367 414 383 404 400 402C417 400 433 397 450 402C467 408 483 424 500 434C517 444 533 458 550 464C567 469 583 466 600 466C617 466 633 462 650 465C667 469 683 480 700 487C717 493 733 504 750 506C767 508 783 501 800 496C817 492 842 483 850 480'/><path d='M-50 527C-42 523 -17 505 0 500C17 495 33 496 50 497C67 498 83 508 100 508C117 508 133 503 150 495C167 488 183 471 200 463C217 456 233 451 250 450C267 449 283 457 300 458C317 459 333 458 350 455C367 452 383 442 400 441C417 440 433 443 450 452C467 460 483 480 500 491C517 502 533 514 550 519C567 524 583 519 600 520C617 520 633 519 650 523C667 527 683 539 700 544C717 549 733 554 750 552C767 549 783 537 800 531C817 525 842 518 850 515'/><path d='M-50 553C-42 549 -17 531 0 527C17 523 33 529 50 532C67 535 83 546 100 545C117 545 133 538 150 532C167 525 183 510 200 505C217 500 233 499 250 500C267 500 283 507 300 506C317 505 333 500 350 496C367 492 383 481 400 482C417 483 433 491 450 502C467 513 483 535 500 546C517 558 533 568 550 572C567 577 583 572 600 574C617 576 633 578 650 583C667 587 683 598 700 600C717 602 733 601 750 595C767 589 783 572 800 564C817 556 842 551 850 549'/><path d='M-50 579C-42 575 -17 557 0 555C17 553 33 562 50 566C67 571 83 580 100 580C117 580 133 572 150 567C167 562 183 552 200 550C217 547 233 552 250 553C267 554 283 559 300 557C317 555 333 544 350 539C367 534 383 525 400 527C417 530 433 542 450 554C467 566 483 588 500 599C517 610 533 617 550 622C567 626 583 623 600 627C617 630 633 637 650 642C667 646 683 656 700 655C717 654 733 646 750 636C767 626 783 606 800 598C817 589 842 586 850 583'/><path d='M-50 607C-42 604 -17 587 0 586C17 585 33 596 50 601C67 605 83 612 100 612C117 612 133 604 150 602C167 599 183 595 200 596C217 597 233 606 250 608C267 611 283 613 300 609C317 606 333 592 350 587C367 581 383 574 400 578C417 581 433 596 450 608C467 620 483 639 500 649C517 659 533 662 550 667C567 671 583 671 600 676C617 681 633 692 650 697C667 702 683 710 700 706C717 702 733 688 750 676C767 664 783 643 800 633C817 624 842 622 850 620'/></svg>");

  --grafite:      #0E1014;   /* texto sobre o claro */
  --grafite-sub:  #565C64;   /* texto de apoio sobre o claro (6,6:1 no branco) */
  --claro-metal:  #ECEEF0;   /* o cinza das seções claras */
  --borda-clara:  rgba(255,255,255,.12);
  --tinta-clara:  rgba(255,255,255,.72);
  --tinta-fraca:  rgba(255,255,255,.50);
  --foco:         #D5D9DD;   /* contorno de teclado sobre o escuro */

  /* tipografia — a da faixa de missão: Satoshi nos títulos e botões, Inter
     no texto corrido */
  --display: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --texto:   "Inter", "Segoe UI", system-ui, sans-serif;

  /* 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;
}

/* no celular e no tablet o cabeçalho acompanha o aparelho: o logo fica em
   56px até ~340px de tela, sobe junto com a largura (62px num celular comum
   de 392px) e trava em 70px a partir de ~465px; a barra, os ícones e o
   hambúrguer saem dele. O teto pela altura segura o celular deitado, onde a
   largura é grande e a tela é baixa */
@media (max-width:1023px){
  :root{
    --logo-nav: clamp(56px, min(11.1vw + 18.5px, 10vh + 20px), 70px);
    --h-nav:    calc(var(--logo-nav) + 36px);
  }
}
@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(--foco);
  outline-offset:3px;
  border-radius:5px;
}

::selection{ background:var(--prata); color:var(--noite) }

.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(--metal-chapa); color:var(--noite);
  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) }

/* a chapa de prata: o botão de ação do site inteiro (cabeçalho, banner,
   bandas, chamada e menu). Letra preta em maiúsculas espaçadas, como as
   etiquetas cromadas das artes. O fio claro em cima e o escuro embaixo dão
   a espessura do metal. No hover a chapa clareia pela camada de brilho, que
   só acende (opacity) */
.btn--prata{
  position:relative; isolation:isolate;
  background:var(--metal-chapa);
  color:var(--noite);
  text-transform:uppercase; letter-spacing:.06em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 12px 26px -14px rgba(0,0,0,.9);
}
.btn--prata::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  opacity:0;
  transition:opacity .25s;
}
.btn--prata:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 18px 34px -14px rgba(0,0,0,.95);
}
.btn--prata:hover::before{ opacity:1 }

.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.
   Na paleta preta e prata ele é sempre escuro: no topo, transparente sobre a
   foto do banner; rolando, vidro preto com um fio de prata no pé */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:var(--noite);
  color:#fff;
  transition:background-color .3s, box-shadow .3s;
}
/* o fio de prata do pé: acende no meio e some nas pontas */
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, rgba(198,203,209,0), rgba(198,203,209,.5) 50%, rgba(198,203,209,0));
  transition:opacity .3s;
}

.masthead.is-fixa{
  background-color:rgba(9,11,15,.88);
  -webkit-backdrop-filter:saturate(120%) blur(14px);
  backdrop-filter:saturate(120%) blur(14px);
  box-shadow:0 16px 34px -26px rgba(0,0,0,.9);
}
.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;
}

/* o cabeçalho é sempre escuro, então a marca é sempre a branca */
.brand__marca{ display:grid; align-items:center }
.brand__mark{
  grid-area:1 / 1;
  width:42px; height:42px; object-fit:contain;
}

/* 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(--display); font-size:.625rem; font-weight:500; line-height:1;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--prata-media);
}

/* ---------- cabecalho sobre o banner ----------
   No topo da pagina o cabecalho fica sem fundo e sem o fio, direto sobre a
   foto. Assim que a pagina rola, o .is-fixa devolve o vidro preto — nada
   aqui muda posicionamento. */

.masthead--sobre-banner:not(.is-fixa){ background:transparent; box-shadow:none }
.masthead--sobre-banner:not(.is-fixa)::after{ opacity:0 }
.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(255,255,255,.86);
  transition:color .2s;
}
/* o traço do hover é um fio de prata */
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--metal-aro);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.25,1);
}
.nav a:hover{ color:#fff }
.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:rgba(255,255,255,.22);
  }
}
.iconelink{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  color:#fff;
  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; no vidro preto ele fica só com os traços, sem quadrado.
   Os três traços ficam a --traco-v um do outro (6px, e no celular na
   proporção do ícone): ao abrir, o de cima e o de baixo andam essa distância
   até o meio e giram em X, e o do meio some */
.burger{
  --traco-v:6px;   /* distância entre os traços */
  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;
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s, background-color .3s;
}
.burger__tracos{ position:relative; width:20px; height:calc(var(--traco-v) * 2 + 2px) }
.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:var(--traco-v) }
.burger__tracos span:nth-child(3){ top:calc(var(--traco-v) * 2) }
.burger[aria-expanded="true"] .burger__tracos span:nth-child(1){ transform:translateY(var(--traco-v)) 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(calc(var(--traco-v) * -1)) rotate(-45deg) }

/* ---------- menu mobile ----------
   Tela cheia no preto, 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.
   O fundo é o da faixa de missão, com um brilho de prata subindo do pé */

.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(198,203,209,.16), transparent 62%),
    var(--faixas-diagonais),
    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(--prata) }
.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: os mesmos botões .social da tela de links (lá embaixo) */
.menu__social{ display:flex; justify-content:center; gap:14px; margin-top:auto }

/* 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 preto chapado, 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::after{ opacity:0 }
.masthead.is-menu .burger{ background:rgba(255,255,255,.10) }

/* 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(6,7,10,.72) 0%,
      rgba(6,7,10,.66) 30%,
      rgba(6,7,10,.64) 58%,
      rgba(6,7,10,.76) 78%,
      rgba(6,7,10,.88) 100%),
    linear-gradient(180deg,
      rgba(6,7,10,.80) 0%,
      rgba(6,7,10,.20) 34%,
      rgba(6,7,10,.62) 100%);
}
/* a foto da central é azulada: sem cor ela assenta no preto e prata */
.hero__fundo img{ filter:grayscale(.85) }

/* os fios de prata nos cantos do banner só existem no computador (lá
   embaixo, na PRIMEIRA TELA) */
.hero__fio{ display:none }

.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(0,0,0,.6));
}

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

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

/* a entrada do título, do card e dos campos está em ANIMAÇÕES DE ENTRADA */

/* o título na letra e no metal da faixa de missão: Satoshi, "Seja um" em
   500 e "Parceiro Alpha" em 700, os dois em degradê prata, com um fio de
   prata à esquerda, do topo do "Seja um" à base do "Alpha". O fio fica a 3%
   da borda dos campos e o texto a 8,5%.
   Duas linhas, e o "Parceiro Alpha" enche a largura: na Satoshi 700 com
   -.02em a frase mede 6,45em de tinta, então 14,6cqi dá 94% do título (o
   cqi é a largura do título já sem o recuo). O "Seja um" tem .58 do corpo.
   Altura: 1,2 × 8,4 + 1 × 14,6 = 24,68cqi do título, ou 22,58% da largura do
   formulário (o título é 91,5% dela) — a conta da foto do celular, lá
   embaixo, usa esse número. No computador o título segue o anexo, sem o fio
   (ver PRIMEIRA TELA) */
.parceria__titulo{
  --fino:        8.4cqi;                        /* corpo da letra */
  --forte:       14.6cqi;
  --fino-caixa:  calc(var(--fino) * 1.2);       /* altura da linha */
  --forte-caixa: var(--forte);

  position:relative;
  padding-left:8.5%;
  font-family:var(--display);
  letter-spacing:-.02em;
  color:#fff;
  container-type:inline-size;
}
/* o fio acompanha a tinta, não a caixa da linha. Na Satoshi a caixa do
   texto tem 1,25em (1,01 acima da base e .24 abaixo), a maiúscula tem .73em,
   e a caixa fica centrada na linha: da borda de cima até o topo da
   maiúscula vão (caixa / 2 − .345 × corpo), e da base até a borda de baixo,
   (caixa / 2 − .385 × corpo) */
.parceria__titulo::before{
  content:""; position:absolute; left:3%;
  top:calc(var(--fino-caixa) / 2 - var(--fino) * .345);
  bottom:calc(var(--forte-caixa) / 2 - var(--forte) * .385);
  width:4px;
  background:linear-gradient(180deg, #FFFFFF, var(--prata-media) 55%, var(--prata-clara));
}
.parceria__titulo-fino{
  display:block;
  font-size:var(--fino);
  line-height:var(--fino-caixa);
  font-weight:500;
}
.parceria__titulo-forte{
  display:block;
  font-size:var(--forte);
  line-height:var(--forte-caixa);
  font-weight:700;
  white-space:nowrap;
}
/* o degradê é vertical, então cada linha pega o metal inteiro, do brilho em
   cima à sombra embaixo, seja qual for a largura. O "Alpha" leva um cromo
   mais claro que o "Parceiro" */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .parceria__titulo-fino,
  .parceria__titulo-forte,
  .parceria__titulo-alpha{
    background:var(--metal-texto);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
  .parceria__titulo-fino{ background-image:linear-gradient(180deg,#F1F2F4 10%,#B4BAC1 60%,#80868E 100%) }
  .parceria__titulo-alpha{ background-image:linear-gradient(180deg,#FFFFFF 22%,#E1E4E7 52%,#9AA1A9 100%) }
}

/* a maleta no "Tipo de negócio" é do layout do computador; no celular o
   formulário segue como foi aprovado, com o prédio no campo. O
   .parceria__cartao não tem estilo aqui: só no computador ele vira o card em
   volta dos campos */
.campo__ico--pc{ display:none }

.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(9,11,15,.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(9,11,15,.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á é a prata; aqui ele vai ao branco */
.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:var(--prata-clara) }

/* 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;
  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 de prata 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:linear-gradient(90deg, rgba(228,231,234,.1), rgba(228,231,234,.6) 50%, rgba(228,231,234,.1));
  transform:scaleY(.5); transform-origin:top;
}
.parceria-bloco .parceria{
  max-width:520px; margin-inline:auto;
}
/* aqui atrás dos campos é o casco chapado: o desfoque de vidro dos campos
   não mudava nenhum pixel e custava à placa de vídeo do celular um desfoque
   por campo a cada quadro de rolagem e de animação */
.parceria-bloco .parceria input,
.parceria-bloco .parceria select,
.parceria-bloco .parceria textarea{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

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

/* mesmo escuro do banner: agora quem marca a emenda é só o filete de prata
   — 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.
   Prata que acende no meio e apaga nas pontas, como um reflexo no metal */
.numeros::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:linear-gradient(90deg, rgba(228,231,234,.1), rgba(228,231,234,.6) 50%, rgba(228,231,234,.1));
  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;
  /* prata, como os títulos da faixa de missão (o degradê vai no @supports
     logo abaixo) */
  /* na entrada o número conta do zero (js/main.js) e o texto troca dezenas
     de vezes. Com a caixa de tamanho fixo — a largura da coluna e uma linha
     de altura, onde o número já cabia centrado — cada troca refaz só o layout
     desta caixa, e não o da página. Sem paint na contenção: nada é cortado */
  align-self:stretch;
  height:1em;
  contain:size layout style;
}
/* "anos" ao lado do 22, menor e na mesma linha de base. Fica fora do texto
   que a contagem troca (o main.js mexe só no primeiro nó, o número); o
   espaço vai dentro do span para não sumir na troca */
.numeros__unidade{
  font-size:.42em; font-weight:700;
  letter-spacing:0;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .numeros__valor{
    background:var(--metal-texto);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
.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 vem logo depois do "Sobre", que já fecha com respiro
   próprio (.secao--base-curta) */
.banda-secao--topo-curto{ padding-top:clamp(24px,3vw,40px) }

/* as duas metades se encostam sem costura dentro da moldura arredondada */
.banda{
  --cunha:clamp(40px,5vw,72px);   /* quanto o painel invade a foto no pé */
  --foto-alto:clamp(260px,60vw,340px);   /* a foto empilhada, no celular */
  position:relative;
  isolation:isolate;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-radius:var(--raio);
  overflow:hidden;
}

/* o fundo é o da faixa de missão (faixas diagonais sobre um preto que
   clareia), centrado no painel. Ele vive numa camada atrás das metades,
   recortada para ficar só debaixo do painel: pintado na .banda inteira, o
   preto vazava pela borda antialiasada da moldura por baixo da foto e
   desenhava um fio escuro no topo e nos cantos dela. As medidas continuam as
   do card inteiro, então o degradê não muda de lugar */
.banda::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    var(--faixas-diagonais),
    radial-gradient(90% 110% at 76% 40%, var(--grafite-fundo) 0%, var(--noite) 72%);
  clip-path:inset(calc(var(--foto-alto) - 1px) 0 0);
}

/* a foto é um recorte em fundo branco: o degradê cinza metálico (o painel
   claro das artes) 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(160deg,#FAFBFB 0%,#E7E9EC 55%,#C9CDD2 100%);
}

/* o corte diagonal das artes: a foto termina inclinada, o painel escuro
   invade o pé dela e um fio de prata corre na emenda. O fio vive na .banda,
   numa caixa do tamanho da cunha centrada na divisa das colunas, recortada
   numa tira de 4px ao longo da diagonal. Só com as metades lado a lado */
/* o arquivo da foto já vem sem as sobras brancas em volta das pessoas, então
   o contain mostra os dois inteiros e grandes. O respiro de cima segura as
   cabeças longe da borda quando a foto é baixa (celular). Os respiros são
   padding: o contain encaixa a foto na caixa de conteúdo */
.banda__foto img{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding-top:clamp(16px,4vw,24px);
  object-fit:contain; object-position:bottom center;
  mix-blend-mode:multiply;
  filter:brightness(1.02);
}
@media (min-width:761px){
  .banda__foto{ clip-path:polygon(0 0, 100% 0, calc(100% - var(--cunha)) 100%, 0 100%) }
  /* a foto para antes do ponto mais baixo da diagonal: o braço do técnico
     desce até o pé e, com a foto na largura toda, a cunha cortava ele. O
     respiro da esquerda puxa a dupla para perto da diagonal */
  .banda__foto img{
    padding-left:clamp(12px,2vw,28px);
    padding-right:calc(var(--cunha) + 3px);
  }
  /* o preto fica só do outro lado da diagonal; o 1px que entra embaixo da
     foto some sob o fio de prata */
  .banda::before{
    clip-path:polygon(calc(50% - 1px) 0, 100% 0, 100% 100%, calc(50% - var(--cunha) - 1px) 100%);
  }
  .banda::after{
    content:""; position:absolute; top:0; bottom:0;
    left:calc(50% - var(--cunha) - 4px);
    width:calc(var(--cunha) + 8px);
    background:linear-gradient(180deg, #F7F8FA 0%, #9AA1A9 45%, #E4E7EA 75%, #858B93 100%);
    clip-path:polygon(calc(100% - 6px) 0, calc(100% - 2px) 0, 6px 100%, 2px 100%);
    pointer-events:none;
  }
}

.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;
}

/* ---------- títulos em prata ----------
   O degradê dos títulos da faixa de missão nos títulos sobre o escuro. O
   ladrilho do degradê tem a altura de uma linha e repete para baixo: num
   título de duas ou três linhas cada linha pega o metal inteiro, do brilho em
   cima à sombra embaixo (a altura do ladrilho tem de ser a line-height) */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .banda__titulo,
  .chamada__titulo,
  .central__item-titulo{
    background:var(--metal-texto) 0 0 / 100% var(--linha-metal, 1.12em) repeat-y;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
.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:var(--foto-alto) }
}

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

/* nas cores do próprio WhatsApp (verde #25D366 e ícone branco), a única
   peça verde do index: é o botão que a pessoa já reconhece de longe */
.zap{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:grid; place-items:center;
  width:66px; height:66px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  transition:transform .25s cubic-bezier(.2,.7,.25,1), opacity .25s;
}
.zap .ico{ width:31px; height:31px }
/* o anel que pulsa em volta do botão. Era uma sombra crescendo, que o
   navegador repinta a cada quadro sem parar; agora é um aro de prata que
   cresce (scale) e apaga (opacity), as duas coisas que a placa de vídeo
   anima sozinha. Um aro, e não um disco: o disco nasce por cima do miolo
   (o z-index -1 fica dentro do botão) e desbotaria o verde a cada pulso.
   1,485 de escala é o mesmo alcance dos 16px da sombra num botão de 66px */
.zap::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border:2px solid rgba(37,211,102,.75);
  border-radius:50%;
  opacity:0;
  animation:pulso-zap 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
.zap:hover{ transform:scale(1.07) }
@keyframes pulso-zap{
  0%  { opacity:1; scale:1 }
  70% { opacity:0; scale:1.485 }
  100%{ opacity:0; scale:1.485 }
}

/* a entrada da tela de links (links.html) */
@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 }
}

@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 }
  /* 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 }
}

@media (max-width:560px){
  /* 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" por
       cima do pé dele e o "Nome completo" à vista, com o resto do formulário
       chamando a rolagem. O título sobe para dentro do banner (ver o bloco
       abaixo), então --dobra, o que vem do pé do banner até o fim desse campo,
       não conta com ele: respiro do bloco (10px) + campo (64,9px, os campos
       maiores do celular, lá embaixo) + 8px de folga — menor que os 12px
       entre os campos, então o segundo campo não aparece nem pela borda.
       Mexeu no respiro ou nos campos, refaça a soma */
    --dobra: calc(10px + 64.9px + 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);
    /* a foto aparece inteira até a calça: a cintura fica em 87% da altura
       dela, e só os últimos 12% (a calça) somem, em degraus para não marcar
       linha */
    -webkit-mask-image:linear-gradient(180deg, #000 88%, rgba(0,0,0,.75) 94%, rgba(0,0,0,.3) 98%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 88%, rgba(0,0,0,.75) 94%, rgba(0,0,0,.3) 98%, transparent 100%);
  }
  /* com o formulário no bloco (o script tirou o hidden), a foto se prende ao
     título, como no layout aprovado: a cintura fica à mostra logo acima do
     "Seja um" (uns 18px) e a calça some por trás do título. Descer a foto em
     relação ao título esconde a cintura atrás das letras — testado e
     reprovado.
     --pe: do pé do banner até o pé da foto. O título vai de 16px acima do pé
     do banner até 16px + 22,58% da largura do formulário (a altura dele, ver
     .parceria__titulo), e o topo da tinta do "Seja um" fica uns 2% abaixo
     disso. A cintura (87% da foto, 13% × 1,68 = 21,84% da largura acima do pé
     dela) cai 18px acima dessa tinta com o pé da foto em 30px + .74% da
     largura. Ela tem 1,68 da largura do formulário de altura — um pouco mais
     larga que a coluna, centrada, com as sobras transparentes da foto
     cortadas pela borda do banner. Pode subir até 4px do menu, porque o topo
     da foto já tem 5% de transparente acima do cabelo; em tela baixa ela
     encolhe. A largura do formulário é a tela menos a margem da .wrap dos
     dois lados. Mexeu no tamanho do título, refaça a conta.
     Sem :has() ela fica como acima */
  .hero:has(~ .parceria-bloco:not([hidden])) .hero__atendente{
    --atendente-largura: calc(100vw - 2 * max(18px, 4vw));
    --atendente-pe:      calc(30px + var(--atendente-largura) * .0074);
    --atendente-altura:  clamp(220px, min(var(--atendente-largura) * 1.68,
      100svh - var(--dobra) - var(--h-nav) - 4px - var(--atendente-pe)), 700px);
    width:calc(var(--atendente-altura) / 1.5);
    height:var(--atendente-altura);
    max-width:none;
    margin-left:calc((100% - var(--atendente-altura) / 1.5) / 2);
    transform:translateY(calc(-1 * var(--atendente-pe)));
  }
  /* a foto da central escurece até virar o fundo da página no pé do banner,
     sem emenda: a primeira camada termina no preto chapado, por cima dos dois
     véus de sempre */
  .hero__fundo::after{
    background:
      linear-gradient(180deg, rgba(9,11,15,0) 60%, var(--noite) 97%),
      linear-gradient(90deg,
        rgba(6,7,10,.72) 0%,
        rgba(6,7,10,.66) 30%,
        rgba(6,7,10,.64) 58%,
        rgba(6,7,10,.76) 78%,
        rgba(6,7,10,.88) 100%),
      linear-gradient(180deg,
        rgba(6,7,10,.80) 0%,
        rgba(6,7,10,.20) 34%,
        rgba(6,7,10,.62) 100%);
  }

  /* o bloco encosta no banner sem o fio, e o título sai do fluxo e sobe para
     cima do pé da foto: a base dele fica 26px acima do primeiro campo, a
     mesma margem de sempre. Como ele não ocupa lugar, a altura do título não
     entra em conta nenhuma */
  .parceria-bloco{ padding-top:10px }
  .parceria-bloco::before{ display:none }
  .parceria-bloco .parceria{
    position:relative;
    /* o link index.html#form-parceiro para com o título inteiro abaixo do
       menu: altura do título (22,58% da largura do formulário, ver
       .parceria__titulo) + os 26px até o campo + 16px de respiro */
    scroll-margin-top:calc(var(--h-nav) + (100vw - 2 * max(18px, 4vw)) * .2258 + 42px);
  }
  .parceria-bloco .parceria__titulo{
    position:absolute; left:0; right:0;
    bottom:calc(100% + 26px);
  }
  .parceria-bloco .parceria__campos{ margin-top:0; gap:12px }

  /* campos maiores no celular: letra de 17px e mais respiro por dentro. Um
     campo mede 25,5px de linha + 2 × 18,7px de respiro + 2px de borda =
     64,9px, a medida que entra no --dobra lá em cima. O ícone e a seta
     centram pela conta; na caixa de texto o ícone acompanha a primeira linha.
     O botão cresce junto para não ficar miúdo embaixo deles */
  .parceria-bloco .campo{ font-size:1.0625rem }   /* o ícone acompanha o texto */
  .parceria-bloco .parceria input,
  .parceria-bloco .parceria select,
  .parceria-bloco .parceria textarea{
    padding-block:1.1em;
    font-size:1.0625rem;
    border-radius:14px;
  }
  /* a lista não segue a altura de linha dos outros campos: a altura vem na conta */
  .parceria-bloco .parceria select{ height:calc(1.5em + 2.2em + 2px) }
  .parceria-bloco .parceria textarea{ min-height:112px }
  .parceria-bloco .campo__ico,
  .parceria-bloco .campo__seta{ top:calc(50% - 1px); transform:translateY(-50%) }
  .parceria-bloco .campo--texto .campo__ico{ top:calc(1.1em + 3px); transform:none }
  .parceria-bloco .parceria__enviar{
    margin-top:18px;
    padding-block:1.45em;
    font-size:.9375rem;
  }
}

@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.
   O layout daqui segue o anexo do computador que o cliente mandou em
   13/09/2026: título solto sobre o banner, campos num card e fios (verdes no anexo, de prata desde 14/09) nos
   cantos. O texto de apoio e os ícones na faixa de números do anexo entraram e
   saíram a pedido do cliente; a faixa voltou a ser a de antes. O celular não
   mudou.

   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 600px 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) / 3,2 e
   a = compacto - 6 x b. A régua começava em 520px; com o card o formulário
   não cabe numa tela tão baixa, e abaixo de ~600px a página passa a rolar. A
   faixa de números é a exceção: voltou com as medidas de antes, na régua antiga. */
@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.75vh - 16.5px, 18px);    /* menu → título */
    --hero-pe:      clamp(18px, 5vh - 12px, 34px);         /* card → 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 (78,34vh - 102,3px) entre 600px
     e 920px de tela e trava nas pontas. A largura da coluna é 75,06% dessa
     altura: 10 de vão + 65,06 até o braço direito. Errar alguns pixels aqui
     só desloca o centro.
     A largura do formulário também anda com a altura, e mais depressa que os
     campos: 360px numa tela de 600px de altura, 520px numa de 920px. Numa
     tela baixa (HD, ou Full HD com 150% de zoom) os campos encolhem de altura,
     e com a largura travada em 430px o card e o título, que enche a largura,
     ficavam esticados (13/09/2026) */
  .hero__grid{
    --form-largura: clamp(360px, 50vh + 60px, 520px);
    --figura-altura: clamp(367.8px, 78.34vh - 102.3px, 618.5px);
    grid-template-columns:var(--form-largura) minmax(0, calc(var(--figura-altura) * .7506));
    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; com 110% de altura a cabeça passa
     um pouco do topo do título, como no anexo, sem chegar nos ícones do menu.
     A figura é container de tamanho, então o cqh é a altura dela: largura
     (73,33cqh = a proporção 2:3 da foto) e vão até o card (10cqh, mais o
     transparente à esquerda do braço) andam com o tamanho da atendente —
     numa tela mais baixa ela encolhe e chega junto. O min/max só segura telas
     estreitas e altas, onde a coluna encolhe e ela não caberia (65,06cqh é
     até o braço direito; o resto da foto, à direita, é transparente).
     Em 14/09/2026 o cliente pediu o título menor e o formulário mais para
     baixo, e a atendente ficou do tamanho de antes: a figura sobe acima da
     linha do formulário o quanto ele perdeu de altura — a margem até o pé do
     banner de antes (a reta de 30px a 64px) menos a de agora, mais o que o
     título encolheu (2,48% da largura do formulário; 2,2% nas telas baixas,
     ver o título abaixo) */
  .hero__figura{
    grid-area:2 / 2;
    align-self:stretch;
    position:relative;
    container-type:size;
    margin-top:calc(var(--hero-pe) - clamp(30px, 10.625vh - 33.75px, 64px) - var(--form-largura) * .0248);
    margin-bottom:calc(-1 * var(--hero-pe));
  }
  .hero__atendente{
    position:absolute; bottom:0;
    left:max(0px, min(10cqh, 100cqw - 65.06cqh));
    width:min(73.33cqh, 112.7cqw); height:110%;
    object-position:left bottom;
  }

  /* os fios do anexo, em prata: um corta o canto de cima, à esquerda, e o outro
     sobe do pé do banner pela direita. Por cima da foto e dos véus, por baixo
     do formulário e da atendente.
     Eram um <svg> do tamanho do banner. Trocados por um traço em imagem de
     fundo, porque o <svg> refazia o layout e repintava o brilho do banner
     inteiro sempre que qualquer coisa ali dentro mexia — e na abertura tudo
     mexe. Cada fio mora numa caixa com o tamanho dele (as mesmas pontas em %
     do banner) mais uma folga para o brilho, e o traço vai de canto a canto
     da caixa sem a folga: de baixo à esquerda para cima à direita, com o
     degradê e o non-scaling-stroke de antes (2px em qualquer largura) */
  .hero__fio{
    --folga:12px;
    display:block;
    position:absolute; z-index:1;
    left:calc(var(--fio-x) - var(--folga));
    top:calc(var(--fio-y) - var(--folga));
    width:calc(var(--fio-l) + 2 * var(--folga));
    height:calc(var(--fio-a) + 2 * var(--folga));
    overflow:hidden;   /* é o corte que desenha o fio na entrada */
    pointer-events:none;
  }
  .hero__fio--canto{
    --fio-x:0%; --fio-y:0%; --fio-l:4.3%; --fio-a:20%;
    --fio-traco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='.95'/%3E%3Cstop offset='.75' stop-color='%23C6CBD1' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23C6CBD1' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='url(%23g)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  .hero__fio--pe{
    --fio-x:90%; --fio-y:50.5%; --fio-l:10%; --fio-a:49.5%;
    --fio-traco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='.95'/%3E%3Cstop offset='.8' stop-color='%23C6CBD1' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23C6CBD1' stop-opacity='.15'/%3E%3C/linearGradient%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='url(%23g)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  }
  /* a camada que anda na entrada tem o tamanho da caixa; o traço e o brilho
     ficam num pseudo-elemento parado dentro dela, e assim o navegador pinta o
     brilho uma vez e só desloca a camada */
  .hero__fio-traco{ position:absolute; inset:0 }
  .hero__fio-traco::before{
    content:""; position:absolute; inset:var(--folga);
    background:var(--fio-traco) 0 0 / 100% 100% no-repeat;
    filter:drop-shadow(0 0 4px rgba(255,255,255,.45));
  }

  /* o formulário: título, card, campos e botão compactam juntos pela altura
     da tela */
  .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(13px, .9375vh + 7.375px, 1rem);
    --campo-py:    clamp(5px, 2.1875vh - 8.125px, 12px);
  }

  /* o título do anexo, sem o fio à esquerda. Tudo em cqi, a largura do
     formulário, que já anda com a altura da tela. O "Parceiro Alpha" enchia
     a largura como no celular (14,6cqi, 94%); em 14/09/2026 o cliente pediu
     a letra um pouco menor e tudo encolheu 12%: 12,8cqi, 83% da largura. O
     "Seja um" fica com metade do corpo. As linhas fecham mais que no celular
     para o título caber na altura da primeira tela: a Satoshi é bem mais
     alta que a Unbounded de antes na mesma largura, e numa tela de 768px de
     altura sobravam só uns 34px acima do título (medido em 14/09/2026). Com
     .86 a perna do "p" do "Alpha" desce um pouco sobre a margem do card, que
     é maior que ela. Altura: 18cqi (eram 20,48; a atendente compensa a
     diferença, ver .hero__figura) */
  .hero .parceria__titulo{
    --fino:        6.3cqi;
    --fino-caixa:  6.95cqi;
    --forte:       12.8cqi;
    --forte-caixa: 11.05cqi;
    padding-left:0;
  }
  .hero .parceria__titulo::before{ display:none }
  /* na ponta de baixo da régua (600px de altura, onde o respiro acima do
     título já travou em 6px) o título estourava a tela em 9px: aqui ele
     enche menos a largura e as linhas fecham mais. Com os mesmos 12% a menos,
     a altura é 15,8cqi (eram 18) */
  @media (max-height:620px){
    .hero .parceria__titulo{
      --fino:        5.45cqi;
      --fino-caixa:  5.8cqi;
      --forte:       11.8cqi;
      --forte-caixa: 10cqi;
    }
    .hero__figura{
      margin-top:calc(var(--hero-pe) - clamp(30px, 10.625vh - 33.75px, 64px) - var(--form-largura) * .022);
    }
  }

  /* o card em volta dos campos, do botão e do aviso de dados: vidro preto,
     mais fechado que a foto para os campos lerem bem. O fio da borda é mais
     claro em cima e escurece embaixo, como a luz batendo numa chapa */
  .hero .parceria__cartao{
    margin-top:clamp(14px, 3.75vh - 8.5px, 26px);
    padding:clamp(9px, 3.4375vh - 11.625px, 20px) clamp(14px, 1.875vh + 2.75px, 20px);
    border:1px solid;
    border-color:rgba(255,255,255,.34) rgba(255,255,255,.16) rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(9,11,15,.58);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.9);
  }

  .hero .parceria__campos{
    gap:clamp(6px, 1.25vh - 1.5px, 10px);
    margin-top:0;
  }
  .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);
  }
  /* dentro do card os campos perdem o vidro e a sombra próprios e ficam só
     com o contorno claro e o canto menor do anexo. O :where() deixa estas
     regras mais leves que o hover, o foco e o campo inválido lá de cima, que
     continuam valendo por cima delas */
  :where(.hero) .parceria input,
  :where(.hero) .parceria select,
  :where(.hero) .parceria textarea{
    border-color:rgba(255,255,255,.3);
    border-radius:7px;
    background:rgba(9,11,15,.4);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }
  :where(.hero) .campo__ico,
  :where(.hero) .campo__seta,
  :where(.hero) .parceria ::placeholder,
  :where(.hero) .parceria select:invalid{ color:rgba(255,255,255,.8) }

  /* a lista não segue a altura de linha dos outros campos: a altura vem na conta */
  .hero .parceria select{ height:calc(1.5em + 2 * var(--campo-py) + 2px) }
  .hero .parceria textarea{
    height:clamp(42px, 11.875vh - 29.25px, 80px);
    min-height:42px;
  }
  /* 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 }
  /* no "Tipo de negócio" a maleta do anexo, no lugar do prédio do celular */
  .hero .campo__ico--mobile{ display:none }
  .hero .campo__ico--pc{ display:block }

  /* o botão segue com a letra preta da chapa de prata, como no resto do site
     (a letra branca do anexo foi testada e o cliente pediu preta) */
  .hero .parceria__enviar{
    margin-top:clamp(9px, 2.1875vh - 4.125px, 16px);
    padding-block:clamp(9px, 2.1875vh - 4.125px, 16px);
    font-size:clamp(12.5px, .625vh + 8.75px, 14.5px);
    letter-spacing:.04em;
  }
  .hero .parceria__aviso{ margin-top:10px }

  /* o aviso de uso dos dados fecha o card */
  .hero .parceria__lgpd{
    margin-top:clamp(5px, 2.1875vh - 8.125px, 12px);
    font-size:clamp(11px, .469vh + 8.19px, 12.5px);
    color:rgba(255,255,255,.72);
  }

  /* a faixa de números fica como era antes do layout com card (o cliente
     pediu para voltar): centrada, e encolhendo na régua antiga, de 520px a
     920px de altura de tela */
  .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{
    /* ícones e hambúrguer na proporção do logo (26px de ícone num logo de
       62px); a área de toque nunca fica abaixo de 44px. O recuo negativo
       alinha o desenho do ícone, e não a caixa dele, com a margem da página */
    --ico-nav:   calc(var(--logo-nav) * .42);
    --toque-nav: max(44px, var(--ico-nav) + 20px);
    --recuo-nav: calc((var(--ico-nav) - var(--toque-nav)) / 2);

    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:var(--recuo-nav) }
  .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:var(--recuo-nav) }

  .iconelink,
  .burger{ width:var(--toque-nav); height:var(--toque-nav) }
  .iconelink .ico{ width:var(--ico-nav); height:var(--ico-nav) }
  .burger{ --traco-v:calc(var(--ico-nav) * .27) }
  .burger__tracos{ width:calc(var(--ico-nav) * .9) }

  .navbar__cta{ display:none }
  .brand__mark{ width:36px; height:36px }
  .navbar .brand__mark{ width:auto; height:var(--logo-nav) }
  .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:var(--logo-nav) }
}

@media (max-width:560px){

  .zap{ right:16px; bottom:16px; width:58px; height:58px }
  .zap .ico{ width:29px; height:29px }
}

@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: títulos na Satoshi, fundo alternando
   o preto das faixas e o branco com cinza metálico das artes.
   ========================================================= */

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

/* sobre o claro o contorno de teclado vai ao grafite: a prata some no branco.
   Os painéis escuros dentro das seções claras devolvem a prata */
.secao--clara :focus-visible,
.banda-secao :focus-visible{ outline-color:var(--grafite) }
.banda__painel :focus-visible{ outline-color:var(--foco) }

.secao{ padding-block:clamp(64px,8vw,124px) }
.secao--clara{ background:var(--claro-metal); color:var(--grafite) }
/* variante branca: o branco das artes */
.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) }

.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--clara .secao__lead{ color:var(--grafite-sub) }

/* ---------- realce no texto ----------
   Uma palavra ou expressão do título ou do lead que sai do cinza. No lead,
   que corre em peso de corpo, o realce vai ao preto e sobe de peso; no
   título, que já é preto e pesado, ele vira grafite metálico (lá embaixo) */
.realce{ color:var(--grafite) }
.secao__lead .realce{ font-weight:700 }

/* ---------- títulos de chamada ----------
   Os títulos das seções claras, na letra da faixa de missão: Satoshi, a
   abertura numa linha menor e mais leve (.titulo-marca__fino) e o resto em
   700 (.titulo-marca__forte), pretos como os títulos claros das artes ("Nossos
   serviços", "Faça o seu orçamento"). O realce é o metal da faixa escurecido
   para o branco: brilho de grafite em cima, quase preto embaixo. Estes
   títulos centralizam em algum tamanho de tela. O corpo da letra fica em cada
   seção, porque cada bloco tem outra medida.
   O realce vai num span próprio (inline): o degradê é vertical e cada linha
   pega o metal inteiro */
.titulo-marca{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06; letter-spacing:-.025em;
  color:var(--grafite);
}
.titulo-marca__fino{
  display:block;
  margin-bottom:.1em;
  font-size:.62em;
  font-weight:500;
  letter-spacing:-.01em;
  color:#3C424A;
}
.titulo-marca__forte{ display:block; font-weight:700 }
@supports (-webkit-background-clip:text) or (background-clip:text){
  .titulo-marca .realce{
    background:var(--metal-grafite);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}

/* o parágrafo que acompanha um título de chamada: a Inter do texto da faixa
   de missão, em 500 para segurar o cinza sobre o branco */
.secao__lead--marca{
  font-family:var(--texto);
  font-weight:500;
  letter-spacing:-.01em;
  text-wrap:pretty;   /* sem palavra sozinha na última linha em tela estreita */
}

/* ---------- 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 título é de chamada (ver .titulo-marca): a linha pesada ("monitoramento
   terceirizada") mede 12,25em na Satoshi 700 e cabe inteira nos 880px do
   bloco no corpo cheio. No celular só a redação curta, em duas linhas
   pesadas ("Monitoramento" / "terceirizado"): o "Monitoramento" tem 6,8em de
   tinta, e 10,4vw deixa ele com uns 80% da coluna */
.central .central__titulo{ font-size:clamp(2rem,1.1rem + 2.4vw,3.3rem) }
@media (max-width:560px){
  .central .central__titulo{ font-size:10.4vw }
}
/* 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);
  line-height:1.65;
}

/* 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 fundo da faixa de missão, o mesmo das bandas */
  background:
    var(--faixas-diagonais),
    radial-gradient(110% 95% at 50% 40%, var(--grafite-fundo) 0%, var(--noite) 72%);
  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 — em .9, prata
   clara e não branco puro. 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(.9);
}

/* "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;
  --linha-metal:1.25em;   /* o ladrilho do prata (ver títulos em prata) */
  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 }

/* o título é de chamada (ver .titulo-marca). Em toda largura, duas linhas
   (pedido do cliente, 14/09/2026): "Conheça a" fino e "Alpha em detalhes"
   pesado numa linha só, com o "em detalhes" no grafite metálico. A linha
   pesada mede 8,24em de tinta na Satoshi 700: no corpo cheio (3,3rem) dá uns
   435px, que cabem na coluna de texto de ~448px do desktop largo; o nowrap
   garante que ela não quebre. No celular o corpo sai da coluna (lá embaixo) */
.conheca .titulo-marca{ font-size:clamp(2.1rem,1.4rem + 2.4vw,3.3rem) }
.conheca .titulo-marca__forte{ white-space:nowrap }

/* 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. No
   celular as duas também dividem o título e o corpo menores (lá embaixo, no
   bloco do "Conheça") */
.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
   de prata já aparece na banda logo abaixo. Leva ao WhatsApp do comercial.
   Na Satoshi dos títulos e na cor chapada: com degradê o texto ficaria
   transparente e o sublinhado do hover sumiria junto */
.conheca__mais{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:22px;
  color:var(--grafite);
  font-family:var(--display); font-size:1.125rem; 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 prata no meio do caminho, como um fio de metal pegando
   luz 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(--prata-sombra) 34%,
    var(--prata-media) 54%,
    rgba(167,173,180,.38) 78%,
    rgba(167,173,180,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 */
@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__lead{ margin-inline:auto }
  .conheca__filete{ max-width:760px; margin-inline:auto }
}

/* no celular o título segue nas mesmas duas linhas e o texto fecha em três.
   A linha pesada mede 8,24em de tinta na Satoshi 700, então o corpo sai da
   largura da coluna (a tela menos a margem da .wrap dos dois lados):
   coluna / 9,6 deixa ela com uns 86% da coluna. O "Conheça a" sobe para
   .72em para não ficar miúdo perto dela. O texto, no corpo que divide com o "Sobre" (17,9px),
   pedia quatro linhas na coluna do celular: ele também sai da coluna
   (coluna / 20,8, uns 16,4px num celular de 377px e 15,6px num de 360px) e
   fecha em três dos 360px para cima; o piso de 15px segura a leitura nas
   telas menores, que voltam a quatro */
@media (max-width:560px){
  .conheca .titulo-marca{ font-size:calc((100vw - 2 * max(18px, 4vw)) / 9.6) }
  .conheca .titulo-marca__fino{ font-size:.72em }
  /* o "Sobre" anda junto com o "Conheça" (ver os leads ao lado de imagem) */
  .conheca .secao__lead,
  .sobre .secao__lead{ font-size:clamp(15px, (100vw - 2 * max(18px, 4vw)) / 20.8, 16.5px) }
}

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

/* fundo branco chapado (.secao--branca), como a banda "Terceirize" logo
   abaixo: o cinza metálico com brilho diagonal que ele teve em 14/09/2026
   saiu a pedido do cliente */
.sobre{ position:relative; overflow:hidden }

/* o título é de chamada (ver .titulo-marca), no mesmo corpo do "Conheça":
   "Atendimento em" fino e "todo o Brasil" pesado, com o "Brasil" no
   grafite metálico. A linha pesada (~5,5em) cabe na coluna de texto */
.sobre .titulo-marca{ font-size:clamp(2.1rem,1.4rem + 2.4vw,3.3rem) }

.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.
   O filtro tira o verde e escurece o traço para o grafite da paleta. Ele fica
   na imagem, parada: quem anima na entrada é a caixa de fora */
.sobre__foto{ justify-self:center }
.sobre__foto img{
  display:block;
  width:100%; max-width:clamp(320px,40vw,560px); height:auto;
  filter:grayscale(1) brightness(.42) contrast(1.25);
}

/* 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 }

  /* no celular o título usa o mesmo corpo do "Conheça" (a coluna / 9,6) e o
     mesmo "Atendimento em" a .72em. Fica aqui, e não no bloco do "Conheça",
     porque o corpo do desktop acima vem depois dele no arquivo */
  .sobre .titulo-marca{ font-size:calc((100vw - 2 * max(18px, 4vw)) / 9.6) }
  .sobre .titulo-marca__fino{ font-size:.72em }
}

/* ---------- missão, visão e valores ----------
   Os itens do card do "Conheça" (lá embaixo): cada ícone numa moldura de
   metal e o título em prata. Vieram da faixa escura do anexo do cliente,
   que ficou entre o "Sobre" e a terceirização até 14/09/2026 e foi a
   matriz da paleta do site inteiro (ver o :root): o preto, a prata, as
   faixas diagonais e a moldura saem dela. A faixa saiu da página a pedido
   do cliente quando os itens foram para o "Conheça"; as lascas de metal das
   pontas estão no commit 2340491, caso ela volte */

.proposito__lista{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,52px);
  max-width:1040px; margin-inline:auto;
}

.proposito__item{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* a moldura de metal: a borda é o degradê cromado (border-box) e o miolo,
   o grafite (padding-box). A sombra de dentro afunda o miolo na chapa.
   O ícone sai do mesmo --lado, e não de %: o <svg> sem tamanho próprio
   tem 150px de altura e esticava a moldura (o aspect-ratio não segura) */
.proposito__moldura{
  --lado:clamp(96px,8vw,124px);
  display:grid; place-items:center;
  width:var(--lado); height:var(--lado);
  border:clamp(7px,.7vw,10px) solid transparent;
  border-radius:clamp(20px,1.7vw,26px);
  background:
    linear-gradient(160deg,#1B212B,#0A0E15) padding-box,
    linear-gradient(145deg,#F7F8FA 0%,#BCC2C9 24%,#6C737C 50%,#DADEE2 72%,#858B93 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 3px 10px rgba(0,0,0,.7),
    0 22px 36px -22px rgba(0,0,0,.95);
}
.proposito__ico{ display:block; width:calc(var(--lado) * .54); height:calc(var(--lado) * .54) }

.proposito__titulo{
  margin-top:clamp(14px,1.4vw,20px);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.55rem,1.1rem + 1.1vw,2.15rem);
  line-height:1.15; letter-spacing:-.02em;
  color:#E3E6E9;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .proposito__titulo{
    background:var(--metal-texto);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}

.proposito__texto{
  margin-top:10px; max-width:30ch;
  font-size:clamp(.95rem,.9rem + .2vw,1.06rem); line-height:1.6;
  color:var(--tinta-clara);
  text-wrap:balance;
}

/* no celular os três viram linhas, com a moldura à esquerda do título e do
   texto: empilhados e centrados, cada item gastava quase uma tela */
@media (max-width:760px){
  .proposito__lista{ grid-template-columns:minmax(0,1fr); gap:30px; max-width:34rem }
  .proposito__item{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    column-gap:18px; align-items:start;
    text-align:left;
  }
  .proposito__moldura{ --lado:76px; grid-row:1 / span 2; border-width:6px; border-radius:17px }
  .proposito__titulo{ margin-top:4px; font-size:1.5rem }
  .proposito__texto{ margin-top:6px; max-width:none; text-wrap:pretty }
}

/* ---------- teste: missão, visão e valores no "Conheça" ----------
   No lugar da foto do "Conheça em detalhes" (14/09/2026, a pedido do
   cliente): os mesmos itens da antiga faixa de missão, com
   as mesmas classes, num card escuro do tamanho da foto — o fundo da faixa e
   o canto arredondado da foto. Aqui o espaço é bem menor que o da faixa,
   então a moldura, o título e o texto descem um degrau. No celular (até
   760px) valem as linhas da faixa, com a moldura à esquerda, e o card desce
   para depois do título e do texto (a foto subia; o card, a pedido do
   cliente, não) */
.conheca__proposito{
  border-radius:var(--raio);
  padding:clamp(30px,3.4vw,48px) clamp(18px,2.2vw,34px);
  background:
    var(--faixas-diagonais),
    radial-gradient(110% 95% at 50% 40%, var(--grafite-fundo) 0%, var(--noite) 72%);
  color:#fff;
}
@media (min-width:761px){
  .conheca__proposito .proposito__lista{ gap:clamp(14px,1.8vw,26px); max-width:none }
  .conheca__proposito .proposito__moldura{ --lado:clamp(80px,6.2vw,104px) }
  .conheca__proposito .proposito__titulo{ font-size:clamp(1.35rem,1rem + .8vw,1.8rem) }
  .conheca__proposito .proposito__texto{ font-size:clamp(.9rem,.86rem + .12vw,.98rem); max-width:none }
}
@media (max-width:760px){
  .conheca__proposito{ order:1; padding:26px 20px }
  .conheca__proposito .proposito__lista{ gap:24px }
}

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

/* e tambem o destino do #orcamento, para onde os dois botoes
   "Solicitar orcamento" do cabecalho apontam */
.chamada{
  position:relative; isolation:isolate;
  /* a foto entra um pouco ampliada (ver ANIMAÇÕES DE ENTRADA) e não pode
     vazar da faixa. Clip, como no banner, para a seção não virar caixa rolável */
  overflow:hidden;
  overflow:clip;
  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:
    var(--faixas-diagonais),
    linear-gradient(100deg, rgba(6,7,10,.95), rgba(6,7,10,.84) 45%, rgba(6,7,10,.94));
}
.chamada__conteudo{ position:relative; z-index:2 }
.chamada__titulo{
  --linha-metal:1.06em;   /* o ladrilho do prata (ver títulos em prata) */
  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;
}
/* o texto em tarjas de prata, como o "Reduza seus custos operacionais" da
   primeira arte: cada linha numa chapa própria (box-decoration-break), com
   a letra preta e espaçada. As tarjas vão num span, porque só uma caixa
   inline quebra em pedaços por linha */
.chamada__lead{
  margin:22px auto 0; max-width:44ch;
  font-size:clamp(.95rem,.92rem + .2vw,1.05rem); font-weight:500;
  line-height:2.25;
  letter-spacing:.06em;
  color:var(--noite);
}
.chamada__tarja{
  padding:.34em .7em;
  background:linear-gradient(90deg, #A3A9B0 0%, #E9EBEE 42%, #F4F5F7 60%, #BFC4CA 100%);
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}
.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é ---------- */

/* o fundo preto das artes "Quem somos" e "Faça o seu orçamento": as linhas
   onduladas do --curvas-nivel entrando pela direita e sumindo antes do
   texto. É uma imagem de fundo parada */
.rodape{
  background:
    linear-gradient(90deg, var(--noite) 18%, rgba(9,11,15,.6) 52%, rgba(9,11,15,0) 82%),
    var(--curvas-nivel) right center / max(900px, 70%) auto no-repeat,
    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);
}
/* os títulos das colunas como o "CONSULTOR COMERCIAL" da arte: maiúsculas
   espaçadas, em prata */
.rodape__col h2{
  margin-bottom:16px;
  font-family:var(--display); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--prata);
}
.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(--display); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
  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(--noite); background:var(--metal-chapa); border-color:var(--prata);
  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 e-mail 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(--prata);
}
/* 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 ícones */
.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 da 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 }
}

/* =========================================================
   ANIMAÇÕES DE ENTRADA
   Os blocos da home aparecem conforme a página rola, no computador
   e no celular. O HTML marca o que anima com data-revela e o
   js/main.js acende o .is-visivel quando o bloco chega na tela
   (IntersectionObserver: nada roda a cada pixel de rolagem). Cada
   bloco anima uma vez só.
   Desempenho, medido no Chrome com a CPU 4x mais lenta (13/09/2026):
   - só mexem opacity, translate e scale, que a placa de vídeo compõe
     sem refazer o layout nem repintar. São as propriedades soltas, não
     o transform: a entrada soma com o transform que o elemento já tem
     (a atendente do celular, o ícone centrado dos campos);
   - quem anda é a camada de fora, nunca a que tem filter, máscara ou
     mix-blend-mode: animado, o próprio elemento com filtro obriga a
     placa a refazer o desfoque a cada quadro; dentro de uma camada que
     anda, ele é pintado uma vez só. Por isso anima a figura e não a
     atendente (sombra e máscara), o fundo do banner inteiro e não a foto
     (o véu vai junto na mesma camada), o card da banda e não a foto
     recortada (multiply);
   - nada de SVG animado: o navegador não compõe o SVG por dentro e
     repinta tudo a cada quadro (os fios do banner viraram imagem de fundo
     com um corte que anda).
   Nada aqui depende do mouse.
   Tudo depende da .com-revela, que o script do <head> põe no <html>:
   sem script, sem IntersectionObserver ou com o sistema pedindo
   menos movimento, a página aparece inteira e parada.
   ========================================================= */

/* sem o "to": a animação termina no valor que o elemento já tem. Cada
   variação só troca as variáveis */
@keyframes revela{
  from{
    opacity:var(--revela-opacidade, 0);
    translate:var(--revela-x, 0) var(--revela-y, 28px);
    scale:var(--revela-escala, 1);
  }
}
@keyframes zap-entra{
  from{ opacity:0; scale:.4 }
}
/* o traço dos fios anda ao contrário da caixa que o corta (ver o fio) */
@keyframes fio-contra{
  from{ translate:100% 0 }
}

@media screen and (prefers-reduced-motion: no-preference){

  /* antes de chegar o bloco fica só apagado, no lugar dele: o deslocamento
     existe só durante a animação, então a posição que o observador mede é a
     de verdade e nada pula */
  .com-revela [data-revela]:not(.is-visivel){ opacity:0 }

  /* o backwards segura o começo durante a espera e, no fim, devolve o
     elemento às regras dele — o hover dos botões continua valendo */
  .com-revela [data-revela].is-visivel{
    animation:revela var(--revela-duracao, .8s) var(--revela-curva, cubic-bezier(.2,.7,.25,1)) backwards;
    /* a espera: o atraso do bloco mais um degrau para cada vizinho que chegou
       junto com ele (o main.js numera os vizinhos em --revela-ordem, na ordem
       de leitura: cinco lado a lado no computador, dois a dois no celular) */
    animation-delay:calc(var(--revela-atraso, 0s) + var(--revela-ordem, 0) * var(--revela-passo, 90ms));
  }
  /* o que já está na tela quando a página abre segue a coreografia da
     abertura (--revela-carga). Quem abrir a página já rolada vê cada bloco
     entrar sem essa espera */
  .com-revela [data-revela].is-carga{
    animation-delay:calc(var(--revela-carga, 0s) + var(--revela-ordem, 0) * var(--revela-passo, 90ms));
  }

  /* ---------- de onde cada bloco vem (sem valor: sobe 28px) ---------- */

  [data-revela="direita"]{ --revela-x:40px; --revela-y:0 }
  [data-revela="zoom"]{ --revela-y:0; --revela-escala:.9; --revela-duracao:1.1s }
  [data-revela="foto"]{ --revela-y:24px; --revela-escala:.96; --revela-duracao:1s }

  /* fotos de fundo: entram ampliadas e assentam devagar, por dentro da faixa
     (o banner e a chamada cortam o que passa da borda) */
  [data-revela="fundo"]{
    --revela-y:0; --revela-escala:1.1;
    --revela-duracao:1.8s; --revela-curva:cubic-bezier(.16,.8,.3,1);
    --revela-passo:0s;
  }

  /* o filete corre da esquerda para a direita */
  [data-revela="risco"]{
    --revela-opacidade:1; --revela-y:0; --revela-escala:0 1;
    --revela-duracao:1.2s; --revela-curva:cubic-bezier(.65,0,.35,1);
    --revela-atraso:.1s;
    transform-origin:left center;
  }

  /* os fios de prata do banner (só no computador) se desenham da ponta acesa,
     a de baixo, para cima. É uma cortina: a caixa (que corta) sai de uma
     largura inteira para a esquerda e o traço dentro dela anda o mesmo tanto
     para a direita, na mesma curva e no mesmo tempo. As duas andanças se
     anulam, o traço fica parado na tela e só a borda do corte avança por
     cima dele — tudo na placa de vídeo, sem repintar o brilho */
  [data-revela="fio"]{
    --revela-opacidade:1; --revela-x:-100%; --revela-y:0;
    --revela-duracao:1.3s; --revela-curva:cubic-bezier(.65,0,.35,1);
    --revela-carga:.7s;
    /* os fios e o fundo são vizinhos no banner e o main.js os numeraria
       juntos: aqui cada um tem a própria espera, sem degrau */
    --revela-passo:0s;
  }
  .hero__fio--pe{ --revela-carga:.95s }
  /* o mesmo tempo, curva e espera da caixa, pelas mesmas variáveis (que o
     traço herda dela). Não usar animation-delay:inherit e afins: herdar a
     animação de um pai que está animando faz o Chrome recalcular o estilo
     do traço a cada quadro (medido: 154 recálculos contra 5) */
  .com-revela .hero__fio.is-visivel .hero__fio-traco{
    animation:fio-contra var(--revela-duracao) var(--revela-curva) backwards;
    animation-delay:calc(var(--revela-atraso, 0s) + var(--revela-ordem, 0) * var(--revela-passo, 90ms));
  }
  .com-revela .hero__fio.is-carga .hero__fio-traco{
    animation-delay:calc(var(--revela-carga, 0s) + var(--revela-ordem, 0) * var(--revela-passo, 90ms));
  }

  /* ---------- a abertura ----------
     A primeira tela entra numa sequência só: a foto da central assenta, a
     atendente sobe, o título e o card chegam, os campos descem em cascata, a
     faixa de números conta e os fios de prata se desenham por último */
  .hero__figura{ --revela-y:48px; --revela-duracao:1.1s; --revela-carga:.15s }
  .parceria__titulo{ --revela-carga:.1s }
  .parceria__cartao{ --revela-carga:.22s }
  .parceria__cartao [data-revela]{ --revela-y:16px; --revela-carga:.42s; --revela-passo:70ms }
  .numeros__item{ --revela-carga:.5s }
  /* no computador os campos só acendem, sem subir: quem sobe é o card inteiro.
     Campo de formulário (input, select, textarea) que anda refaz layout e
     pintura no começo e no fim da animação — medido: 44 layouts e 12ms só
     nos campos, contra 8 layouts e 2ms só acendendo */
  @media (min-width:1024px){
    .hero .parceria__cartao [data-revela]{ --revela-y:0px }
  }

  /* no celular e no tablet o formulário sai do banner e o card não tem
     moldura: quem anima são os campos, um a um conforme a rolagem. Na
     abertura a atendente vem primeiro, e o título e o primeiro campo, que
     fecha a primeira tela, chegam depois dela */
  @media (max-width:1023px){
    .com-revela .parceria__cartao[data-revela]{ opacity:1; animation:none }
    .parceria__titulo{ --revela-carga:.3s }
    .numeros__item{ --revela-carga:0s }
  }

  /* ---------- bandas ----------
     o card sobe e o texto do painel chega logo depois, da direita. A foto
     recortada (multiply) não anima sozinha: vai pintada dentro do card.
     Empilhado, o painel fica embaixo da foto e o texto também sobe */
  .banda{ --revela-y:40px }
  .banda__conteudo [data-revela]{ --revela-atraso:.15s }
  /* o teste da missão no "Conheça": o card entra como a foto entrava e os
     três itens sobem em cascata logo atrás dele */
  .conheca__proposito [data-revela]{ --revela-atraso:.15s }
  @media (max-width:760px){
    .banda__conteudo [data-revela="direita"]{ --revela-x:0; --revela-y:28px }
  }

  /* ---------- cabeçalho e WhatsApp ----------
     não esperam a rolagem: o cabeçalho desce junto com a abertura e o botão
     do WhatsApp aparece quando ela termina */
  .navbar__inner{
    --revela-y:-12px;
    animation:revela .7s cubic-bezier(.2,.7,.25,1) backwards;
  }
  .zap{ animation:zap-entra .6s cubic-bezier(.34,1.56,.64,1) 1.2s backwards }
}

/* =========================================================
   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. Desde 14/09/2026 ela segue o
   index (ver o :root): o preto com as faixas diagonais, a foto da
   central sem cor, títulos em degradê prata e o metal das
   molduras da missão, visão e valores no logo e nos ícones. Não há
   cor de acento: sob o dedo, quem acende é a chapa de prata.
   ========================================================= */

.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;
  /* o fundo escuro do index: as faixas diagonais sobre um preto que clareia
     atrás dos cartões */
  background:
    var(--faixas-diagonais),
    radial-gradient(120% 60% at 50% 48%, var(--grafite-fundo) 0%, var(--noite) 72%);
}

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

/* a foto da central, sem cor como a do banner do index. 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%;
  filter:grayscale(.85);
}
.links__capa::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.62) 0%, rgba(6,7,10,.78) 70%, rgba(6,7,10,.92) 100%);
}
/* o fio de prata de meio pixel que costura o banner à faixa de números no
   index: acende no meio, 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:linear-gradient(90deg, rgba(228,231,234,.1), rgba(228,231,234,.6) 50%, rgba(228,231,234,.1));
  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, na moldura de metal da missão, visão e
   valores, só que redonda: a borda é o degradê cromado (border-box) e o
   miolo, o grafite afundado (padding-box). Um aro do preto a 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:6px solid transparent;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 30%, #1B212B 0%, #0A0E15 72%) padding-box,
    var(--metal-aro) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 3px 10px rgba(0,0,0,.7),
    0 0 0 6px var(--noite),
    0 22px 36px -18px rgba(0,0,0,.95);
}
.links__avatar img{
  display:block;
  width:66%; 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;
  --linha-metal:1.1em;   /* o ladrilho do prata (ver títulos em prata) */
}
/* o selo de verificado é a chapa de prata do botão, com o visto no preto */
.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);
}

/* o nome e os títulos dos cartões no degradê prata dos títulos do index. O
   texto do nome vai num span: o selo, ao lado, não entra no recorte */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .links__nome-texto,
  .cartao__titulo{
    background:var(--metal-texto) 0 0 / 100% var(--linha-metal, 1.12em) repeat-y;
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}

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

.links__social{
  display:flex; justify-content:center; gap:14px;
  margin-top:24px;
}
/* os mesmos botões do menu do celular no index: o branco translúcido do
   botão do menu, ícone branco, e a chapa de prata sob o dedo */
.social{
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), background-color .2s, color .2s;
}
.social svg{ width:27px; height:27px }
.social:hover,
.social:active{ background:var(--metal-chapa); color:var(--noite) }
.social:hover{ transform:translateY(-3px) }
.social--google svg{ width:25px; height:25px }

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

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

/* o card escuro do index, com a borda num fio de prata que acende nas
   pontas da diagonal, como o aro das molduras. Sob o dedo o fio clareia */
.cartao{
  display:flex; align-items:center; gap:16px;
  min-height:82px;
  padding:12px 14px 12px 12px;
  border:1px solid transparent;
  border-radius:18px;
  background:
    linear-gradient(160deg, #161A21 0%, #0C0F14 100%) padding-box,
    linear-gradient(145deg, rgba(247,248,250,.3) 0%, rgba(108,115,124,.14) 45%, rgba(218,222,226,.24) 75%, rgba(133,139,147,.1) 100%) border-box;
  box-shadow:0 18px 30px -22px rgba(0,0,0,.95);
  transition:transform .25s cubic-bezier(.2,.7,.25,1), box-shadow .25s;
}
.cartao:hover{
  background:
    linear-gradient(160deg, #1A1F27 0%, #0E1116 100%) padding-box,
    linear-gradient(145deg, rgba(247,248,250,.6) 0%, rgba(108,115,124,.3) 45%, rgba(218,222,226,.5) 75%, rgba(133,139,147,.25) 100%) border-box;
  box-shadow:0 22px 34px -22px rgba(0,0,0,1);
  transform:translateY(-2px);
}

/* o ícone de cada canal numa moldura de metal pequena, a mesma da missão,
   visão e valores: aro cromado, miolo grafite afundado e o ícone em prata */
.cartao__ico{
  display:grid; place-items:center;
  flex:0 0 auto;
  width:56px; height:56px;
  border:4px solid transparent;
  border-radius:15px;
  background:
    linear-gradient(160deg, #1B212B, #0A0E15) padding-box,
    var(--metal-aro) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 2px 7px rgba(0,0,0,.7),
    0 12px 20px -14px rgba(0,0,0,.95);
  color:var(--prata-clara);
}
.cartao__ico svg{ width:26px; height:26px }

.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;
  --linha-metal:1.25em;
  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(--metal-chapa); color:var(--noite);
  transform:translateX(2px);
}

/* o desenho de cada ícone dentro da moldura */
.cartao__ico--zap svg{ width:27px; height:27px }
.cartao__ico--fone svg{ width:24px; height:24px }
/* a marca da Alpha: o escudo branco do rodapé, que o brilho baixa para a
   prata dos outros ícones */
.cartao__ico--site img{ display:block; width:30px; height:30px; filter:brightness(.9) }
.cartao__ico--google svg{ width:23px; height:23px }

/* ---------- 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(--prata) }
.links__horario strong{ font-weight:600; color:#fff }

/* o rodapé do index em miniatura: as curvas de nível ao fundo, apagadas no
   alto, os links em maiúsculas espaçadas na prata e a linha legal miúda. O
   fio de prata do topo é o do cabeçalho do index */
.links__rodape{
  position:relative;
  padding:26px clamp(16px,4.5vw,24px) 30px;
  text-align:center;
  font-size:.8125rem; line-height:1.5;
  color:var(--tinta-fraca);
  background:
    linear-gradient(180deg, var(--noite) 0%, rgba(9,11,15,.5) 100%),
    var(--curvas-nivel) center 30% / max(900px, 100%) auto no-repeat,
    var(--noite);
}
.links__rodape::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, rgba(198,203,209,0), rgba(198,203,209,.5) 50%, rgba(198,203,209,0));
}
.links__rodape p{ margin-top:12px }

.links__rodape-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 0;
  font-family:var(--display); font-size:.8125rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--prata);
}
.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:#fff }

.links__legal{
  font-family:var(--display); font-size:.75rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
}

.links__credito a{ font-weight:600; color:var(--tinta-clara) }

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

@media (prefers-reduced-motion: no-preference){
  .links__topo > *,
  .links__lista > li,
  .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__horario{ animation-delay:.45s }
}

@media (max-width:360px){
  .cartao{ gap:12px }
  .cartao__ico{ width:50px; height:50px; border-width:3.5px; border-radius:14px }
}