/* ============================================================================
   21MONTEIRO — PORTFÓLIO
   Estilos exclusivos da página index.html
   ========================================================================== */

/* ---- HERO ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 4rem) 4rem;
  overflow: hidden;
  isolation: isolate;
}

/* Fundo em camadas: imagem + grade + halo de luz */
.hero-fundo {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.hero-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .28;
}

.hero-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255, 126, 0, .16), transparent 70%),
    linear-gradient(180deg, rgba(3, 11, 31, .55) 0%, rgba(3, 11, 31, .9) 55%, var(--bg) 100%);
}

.hero-grade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 80%);
}

.hero-inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-inner { grid-template-columns: 1.15fr .85fr; }
}

/* Selo de disponibilidade */
.selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem .4375rem .625rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 1.5rem;
}

.selo-ponto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #35E88A;
  box-shadow: 0 0 0 0 rgba(53, 232, 138, .7);
  animation: pulso 2.4s infinite;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(53, 232, 138, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(53, 232, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 232, 138, 0); }
}

.hero-titulo {
  font-size: var(--t-3xl);
  margin-bottom: 1.75rem;
  letter-spacing: -.04em;
}

.hero-titulo .linha-1 {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .26em;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--texto-suave);
  margin-bottom: .5em;
}

.hero-titulo .linha-2 {
  display: block;
  font-family: var(--fonte-display);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.01em;
}

.hero-texto {
  font-size: var(--t-lg);
  color: var(--texto-suave);
  max-width: 48ch;
  margin-bottom: 2.25rem;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-bottom: 3rem;
}

/* Provas rápidas ao lado do CTA */
.hero-provas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.prova {
  display: flex;
  flex-direction: column;
  gap: .125rem;
}

.prova-valor {
  font-family: var(--fonte-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1;
  background: var(--gradiente-marca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prova-rotulo {
  font-size: var(--t-sm);
  color: var(--texto-fraco);
}

/* Cartão lateral do hero */
.hero-cartao {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sombra);
}

/* Fio de luz no topo do cartão, como se pegasse o brilho do hero */
.hero-cartao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 148, 43, .75), transparent);
}

.hero-cartao-topo {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--borda);
}

.hero-cartao-topo img {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 126, 0, .5);
}

.hero-cartao-topo strong { display: block; font-size: var(--t-md); }
.hero-cartao-topo span { font-size: var(--t-sm); color: var(--texto-fraco); }

.hero-beneficios { display: flex; flex-direction: column; gap: 1rem; }

.hero-beneficios li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.5;
}

.hero-beneficios svg {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  color: var(--laranja-cl);
}

/* Indicador de rolagem */
.scroll-dica {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

@media (min-width: 1000px) { .scroll-dica { display: flex; } }

.scroll-dica img { width: 22px; opacity: .55; animation: flutua 2.2s ease-in-out infinite; }

@keyframes flutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ---- SERVIÇOS ------------------------------------------------------------ */
.servicos-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.servico {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Brilho que segue o cursor */
.servico::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 126, 0, .14),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--transicao);
  pointer-events: none;
}

.servico:hover::before { opacity: 1; }

.servico-icone {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--raio-sm);
  background: rgba(255, 126, 0, .1);
  border: 1px solid rgba(255, 126, 0, .22);
}

/* SVG inline em currentColor: sem filtro, sem achatamento, cor da marca direta */
.servico-icone svg {
  width: 28px;
  height: 28px;
  color: var(--laranja-cl);
  transition: transform var(--transicao);
}

.servico:hover .servico-icone svg { transform: scale(1.08); }

.servico h3 { font-size: var(--t-lg); }

.servico p {
  color: var(--texto-fraco);
  font-size: var(--t-sm);
  line-height: 1.6;
  flex: 1;
}

.servico .btn {
  align-self: flex-start;
  margin-top: .5rem;
}

/* ---- PROJETOS ------------------------------------------------------------ */
.projetos-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.carrossel { position: relative; }

.carrossel-trilho {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: .5rem 1.5rem;
  /* Sangra até a borda da tela no mobile */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.carrossel-trilho::-webkit-scrollbar { display: none; }

.projeto {
  flex: 0 0 min(88%, 430px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  border-radius: var(--raio-lg);
}

@media (min-width: 760px)  { .projeto { flex-basis: 48%; } }
@media (min-width: 1100px) { .projeto { flex-basis: 32%; } }

/* O mockup é um <button>: precisa zerar os estilos nativos */
.projeto-midia {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  cursor: zoom-in;
  background: linear-gradient(160deg, var(--navy-600), var(--navy-900));
}

/* Convite a clicar, que aparece no hover */
.projeto-lupa {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  background: rgba(2, 9, 26, .7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--branco);
  font-size: var(--t-sm);
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--transicao);
}

.projeto-lupa svg {
  width: 34px; height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--gradiente-marca);
  color: var(--navy-900);
  transform: scale(.85);
  transition: transform var(--transicao);
}

.projeto-midia:hover .projeto-lupa,
.projeto-midia:focus-visible .projeto-lupa { opacity: 1; }
.projeto-midia:hover .projeto-lupa svg { transform: scale(1); }

/* O <picture> existe só para trocar o mockup de notebook pelo de celular
   em telas pequenas. Ele precisa ocupar a mídia inteira, senão o <img>
   dentro dele não tem altura para preencher. */
.projeto-midia picture {
  display: block;
  width: 100%;
  height: 100%;
}

.projeto-midia img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 1.25rem;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
}

.projeto:hover .projeto-midia img { transform: scale(1.055); }

.projeto-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  padding: .3125rem .75rem;
  background: rgba(2, 9, 26, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--laranja-cl);
}

.projeto-corpo {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.projeto-cliente {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.projeto-corpo h3 { font-size: var(--t-lg); }

.projeto-corpo p {
  color: var(--texto-fraco);
  font-size: var(--t-sm);
  line-height: 1.6;
  flex: 1;
}

/* Crédito da agência: existe para dar contexto, não para competir com a
   descrição. Por isso não cresce junto com ela nem puxa o olho. */
.projeto-corpo .projeto-credito {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .25rem .625rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--texto-fraco);
}

.projeto-credito::before {
  content: "";
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background: var(--laranja-cl);
  opacity: .7;
}

.projeto-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin-top: .75rem;
}

.projeto-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--laranja-cl);
  cursor: pointer;
  transition: color var(--transicao);
}

.projeto-link:hover { color: var(--ambar); }

.projeto-link svg {
  width: 16px; height: 16px;
  transition: transform var(--transicao);
}

.projeto-link-site { color: var(--texto-suave); }
.projeto-link-site:hover { color: var(--branco); }
.projeto-link-site:hover svg { transform: translate(3px, -3px); }

/* Controles do carrossel */
.carrossel-controles {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.carrossel-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-full);
  color: var(--texto);
  transition: all var(--transicao);
}

.carrossel-btn:hover:not(:disabled) {
  background: var(--gradiente-marca);
  color: var(--navy-900);
  border-color: transparent;
}

.carrossel-btn:disabled { opacity: .3; cursor: not-allowed; }
.carrossel-btn svg { width: 18px; height: 18px; }

.carrossel-pontos {
  display: flex;
  gap: .4375rem;
  margin-left: auto;
}

.carrossel-ponto {
  width: 8px; height: 8px;
  border-radius: var(--raio-full);
  background: var(--borda-forte);
  transition: all var(--transicao);
}

.carrossel-ponto[aria-current="true"] {
  width: 24px;
  background: var(--gradiente-marca);
}

.carrossel-nota {
  text-align: center;
  color: var(--texto-fraco);
  font-size: var(--t-sm);
  margin-top: 1.5rem;
}

/* ---- DEPOIMENTOS --------------------------------------------------------- */
.depoimentos-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.depoimento {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.depoimento::before {
  content: "\201C";
  position: absolute;
  top: -.35em; right: .2em;
  font-family: Georgia, serif;
  font-size: 9rem;
  line-height: 1;
  color: rgba(255, 126, 0, .08);
  pointer-events: none;
}

.estrelas { display: flex; gap: .1875rem; color: var(--ambar); }
.estrelas svg { width: 17px; height: 17px; }

.depoimento p {
  color: var(--texto-suave);
  font-size: var(--t-md);
  line-height: 1.65;
  flex: 1;
}

.depoimento-autor {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
}

.depoimento-autor img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.depoimento-autor strong { display: block; font-size: var(--t-sm); }
.depoimento-autor span { font-size: var(--t-xs); color: var(--texto-fraco); }

/* ---- CHAMADA FINAL ------------------------------------------------------- */
.cta-final { padding-block: var(--secao-y); }

.cta-caixa {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--raio-lg);
  border: 1px solid rgba(255, 126, 0, .25);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255, 126, 0, .18), transparent 65%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.cta-caixa h2 { font-size: var(--t-2xl); max-width: 20ch; }

.cta-caixa p {
  color: var(--texto-suave);
  font-size: var(--t-lg);
  max-width: 50ch;
}

.cta-caixa .hero-acoes { margin-bottom: 0; justify-content: center; }

/* ---- LIGHTBOX DA PÁGINA COMPLETA ----------------------------------------- *
   Os prints são muito verticais (até 2560px de altura). Em vez de encolher
   tudo até virar ilegível, mostramos em largura confortável e deixamos rolar.
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2rem);
}

.lightbox[hidden] { display: none; }

.lightbox-fundo {
  position: absolute;
  inset: 0;
  background: rgba(2, 9, 26, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 280ms ease;
}

.lightbox.aberto .lightbox-fundo { opacity: 1; }

.lightbox-painel {
  position: relative;
  z-index: 1;
  width: min(100%, 940px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--navy-800);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(16px) scale(.985);
  transition: opacity 280ms cubic-bezier(.22,1,.36,1),
              transform 280ms cubic-bezier(.22,1,.36,1);
}

.lightbox.aberto .lightbox-painel { opacity: 1; transform: none; }

/* ---- Topo ---- */
.lightbox-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borda);
  background: var(--navy-900);
  flex: none;
}

.lightbox-cliente {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--laranja-cl);
}

.lightbox-titulo {
  display: block;
  font-size: var(--t-md);
  font-weight: 600;
}

.lightbox-acoes { display: flex; gap: .5rem; flex: none; }

.lightbox-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  color: var(--texto-suave);
  transition: color var(--transicao), background var(--transicao),
              border-color var(--transicao);
}

.lightbox-btn:hover {
  color: var(--branco);
  background: var(--superficie-2);
  border-color: var(--borda-forte);
}

.lightbox-btn svg { width: 18px; height: 18px; }

.lightbox-fechar:hover {
  color: var(--navy-900);
  background: var(--gradiente-marca);
  border-color: transparent;
}

/* ---- Área rolável com o print ---- */
.lightbox-rolagem {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--navy-900);
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}

.lightbox-rolagem::-webkit-scrollbar { width: 10px; }
.lightbox-rolagem::-webkit-scrollbar-track { background: transparent; }
.lightbox-rolagem::-webkit-scrollbar-thumb {
  background: var(--borda-forte);
  border-radius: var(--raio-full);
  border: 3px solid var(--navy-900);
}

.lightbox-img {
  width: 100%;
  height: auto;
  display: block;
}

/* O print de celular tem 780px de largura. Esticado na largura do painel ele
   apareceria ampliado e borrado, então fica na largura de um aparelho. */
.lightbox-img-mobile {
  max-width: min(420px, 100%);
  margin-inline: auto;
}

/* ---- Rodapé ---- */
.lightbox-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--borda);
  background: var(--navy-900);
  flex: none;
}

.lightbox-dica {
  font-size: var(--t-xs);
  color: var(--texto-fraco);
}

.lightbox-cta { padding: .625rem 1.25rem; }

/* ---- Troca entre o print de desktop e o de celular ---- */
.lightbox-vista {
  display: inline-flex;
  padding: .1875rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-full);
  background: var(--superficie-2);
}

.lightbox-vista[hidden] { display: none; }

.lightbox-vista-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: var(--raio-full);
  font-size: var(--t-xs);
  line-height: 1;
  color: var(--texto-fraco);
  transition: color var(--transicao), background var(--transicao);
}

.lightbox-vista-btn svg { width: 16px; height: 16px; }
.lightbox-vista-btn:hover { color: var(--branco); }

.lightbox-vista-btn[aria-pressed="true"] {
  color: var(--navy-900);
  background: var(--gradiente-marca);
}

@media (max-width: 560px) {
  .lightbox-painel { width: 100%; max-height: 100%; }
  .lightbox-rodape { justify-content: center; }
  .lightbox-cta { width: 100%; }
  /* Com o seletor no rodapé não sobra linha para a dica de rolagem. */
  .lightbox-dica { display: none; }
}

/* ============================================================================
   IDENTIDADE APNS SITES
   ----------------------------------------------------------------------------
   Escopada em body.marca-apns, para não afetar a bio nem as políticas,
   que seguem com a identidade 21Monteiro.

   Paleta oficial: laranja #FF7E00 · carvão #1B1B1B · creme #E8DFC9 · marrom #8A6A3F
   ========================================================================== */

@font-face {
  font-family: "Augustus";
  src: url("/assets/fonts/augustus.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* O "?" da Augustus é um glifo ornamental, com a volta virada para o lado
   errado: em um título grande ele parece um caractere quebrado. Esta face
   desvia só esse caractere (e o "¿") para uma fonte de texto comum. Como
   vem depois da declaração acima, ela vence para o intervalo que cobre.
   Se nenhuma das locais existir, a face é inválida e o navegador cai na
   próxima família da pilha — que também desenha um "?" normal. */
@font-face {
  font-family: "Augustus";
  src: local("Inter"), local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  unicode-range: U+003F, U+00BF;
}

body.marca-apns {
  /* Redefinimos os próprios tokens de base: tudo que os referencia
     (lightbox, cartões, botões) acompanha sem precisar de regra nova. */
  --navy-900: #101010;
  --navy-800: #1B1B1B;
  --navy-700: #232323;
  --navy-600: #2E2E2E;

  --creme:  #E8DFC9;
  --marrom: #8A6A3F;

  --bg:     var(--navy-800);
  --bg-alt: var(--navy-900);

  /* Superfícies e texto em creme, não em branco puro:
     é o que dá o tom quente da marca. */
  --superficie:   rgba(232, 223, 201, .045);
  --superficie-2: rgba(232, 223, 201, .08);
  --borda:        rgba(232, 223, 201, .10);
  --borda-forte:  rgba(232, 223, 201, .22);
  --texto:        rgba(232, 223, 201, .96);
  --texto-suave:  rgba(232, 223, 201, .70);
  --texto-fraco:  rgba(232, 223, 201, .48);

  /* A marca usa laranja chapado; o gradiente é só uma variação sutil */
  --gradiente-marca: linear-gradient(135deg, #FF7E00 0%, #E06A00 100%);
  --brilho-marca: 0 0 0 1px rgba(255, 126, 0, .4), 0 14px 44px -14px rgba(255, 126, 0, .55);

  --fonte-display: "Augustus", "Times New Roman", serif;

  background: var(--bg);
  color: var(--texto);
}

/* ---- TIPOGRAFIA DE DISPLAY ------------------------------------------------ *
   A Augustus não possui caixa baixa: minúsculas viram versalete. Por isso
   todo display vai em caixa alta — que é exatamente como o manual da marca
   apresenta os títulos.
   -------------------------------------------------------------------------- */
.marca-apns .display,
.marca-apns .hero-titulo .linha-2,
.marca-apns .secao-titulo,
.marca-apns .cta-caixa h2,
.marca-apns .prova-valor,
.marca-apns .bio-nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .96;
}

/* Subtítulos e microtexto: caixa alta espaçada, assinatura da marca */
.marca-apns .sobretitulo,
.marca-apns .projeto-cliente,
.marca-apns .rodape h3 {
  letter-spacing: .22em;
}

.marca-apns .hero-titulo .linha-1 {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .2em;
  font-weight: 500;
}

/* Cartões e rótulos pequenos continuam na Inter: caixa alta em corpo
   pequeno prejudicaria a leitura. */
.marca-apns .servico h3,
.marca-apns .projeto-corpo h3 {
  font-family: var(--fonte-corpo);
  text-transform: none;
}

/* ---- AJUSTES DE COR QUE ESTAVAM FIXOS ------------------------------------- */
.marca-apns .cabecalho.rolado { background: rgba(27, 27, 27, .85); }
.marca-apns .menu-mobile      { background: rgba(16, 16, 16, .975); }
.marca-apns .projeto-tag      { background: rgba(16, 16, 16, .8); }
.marca-apns .lightbox-fundo,
.marca-apns .lead-fundo       { background: rgba(16, 16, 16, .9); }

/* Fundo do hero: a mesma luz quente que atravessa as peças do manual */
.marca-apns .hero-fundo::after {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255, 126, 0, .2), transparent 70%),
    linear-gradient(180deg, rgba(16, 16, 16, .5) 0%, rgba(27, 27, 27, .9) 55%, var(--bg) 100%);
}

.marca-apns .hero-grade {
  background-image:
    linear-gradient(rgba(232, 223, 201, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 223, 201, .045) 1px, transparent 1px);
}

.marca-apns .cta-caixa {
  border-color: rgba(255, 126, 0, .28);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255, 126, 0, .2), transparent 65%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
}

/* O ícone de serviço usa marrom da paleta como moldura */
.marca-apns .servico-icone {
  background: rgba(138, 106, 63, .16);
  border-color: rgba(138, 106, 63, .38);
}

/* ---- LOGO ----------------------------------------------------------------- */
.marca-apns .logo img { height: 42px; }
.marca-apns .rodape-marca img { height: 56px; }

@media (max-width: 560px) {
  .marca-apns .logo img { height: 36px; }
}

/* Os quatro pilares: o nome do pilar puxa o olho antes da explicação */
.marca-apns .pilares strong {
  display: block;
  color: var(--texto);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  margin-bottom: .1875rem;
}

.marca-apns .pilares li { align-items: flex-start; }
.marca-apns .pilares svg { margin-top: 2px; }

/* "trás" no hero: a Augustus não tem itálico, então o <em>
   marca sentido sem inclinar (o navegador simularia uma oblíqua feia). */
.marca-apns .hero-titulo em {
  font-style: normal;
}

/* ---- FUNDO DA MARCA: DEGRADÊ + HALFTONE ----------------------------------- *
   Duas camadas fixas em z-index negativo, atrás de todo o conteúdo:
   ::before  degradê escuro, que dá profundidade ao carvão chapado
   ::after   halftone branco em pontos, dissolvendo conforme desce

   z-index negativo (em vez de 0) é o que mantém lightbox, formulário e
   header — todos position:fixed — funcionando normalmente.
   -------------------------------------------------------------------------- */
.marca-apns { background: var(--bg); }

.marca-apns::before,
.marca-apns::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.marca-apns::before {
  z-index: -2;
  background:
    radial-gradient(120% 85% at 50% -12%, #2C2522 0%, transparent 58%),
    linear-gradient(180deg, #211E1C 0%, #1B1B1B 38%, #131313 100%);
}

.marca-apns::after {
  z-index: -1;
  /* Pontos brancos em grade fina: o halftone */
  background-image: radial-gradient(circle, rgba(255, 255, 255, .6) 1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: .07;
  /* O degradê de opacidade: denso no topo, sumindo para baixo */
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.2) 58%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.2) 58%, transparent 85%);
}

/* Halftone mais fino no celular, senão vira textura pesada */
@media (max-width: 700px) {
  .marca-apns::after { background-size: 5px 5px; opacity: .055; }
}

/* Com o halftone no lugar, a grade do hero sai: as duas juntas poluem */
.marca-apns .hero-grade { display: none; }

/* Seções e rodapé ficam translúcidos, deixando o fundo atravessar */
.marca-apns .secao-alt { background: rgba(16, 16, 16, .55); }
.marca-apns .rodape    { background: rgba(16, 16, 16, .7); }