/* ==========================================================================
   AudioVic Aparelhos Auditivos — folha de estilo unica
   Identidade completa em clientes/audiovic/identidade.md

   REGRAS QUE NAO SE QUEBRAM
   1. Texto sobre laranja e PRETO (5,6:1). Branco sobre laranja so em titulo
      grande (>=28px, peso >=700).
   2. Laranja #FD4A01 nunca vira texto sobre branco (3,4:1). Para texto use
      --laranja-texto #C43A00 (5,3:1).
   3. Corpo do texto: 19px desktop / 18px mobile. Nunca menor que 16px.
   4. Alvo de toque minimo 48x48px.
   ========================================================================== */

:root {
  /* Cores da marca */
  --laranja:        #FD4A01;   /* amostrado do logo oficial */
  --laranja-texto:  #C43A00;   /* unico laranja que pode ser texto sobre branco */
  --laranja-fundo:  #FFF2EC;   /* creme, fundo de secao */
  --laranja-borda:  #FFD9C7;
  --preto:          #101010;   /* a placa */
  --preto-suave:    #1F1F1F;   /* texto corrido */
  --cinza:          #5A5A5A;   /* apoio — nunca mais claro que isso */
  --cinza-borda:    #E3E0DD;
  --branco:         #FFFFFF;
  --wpp:            #25D366;

  /* Tipografia */
  --fonte-titulo: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo:  'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Ritmo */
  --largura: 1200px;
  --leitura: 65ch;
  --raio: 10px;
  --raio-g: 16px;
  --sombra: 0 2px 8px rgba(16,16,16,.06), 0 12px 32px rgba(16,16,16,.08);
  --sombra-alta: 0 4px 12px rgba(16,16,16,.10), 0 24px 56px rgba(16,16,16,.14);
  --transicao: 180ms ease;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--preto-suave);
  font-family: var(--fonte-corpo);
  font-size: 1.1875rem;   /* 19px, mas em rem: respeita a fonte que o usuario configurou */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }

/* Palavra longa ("acompanhamento", "otorrinolaringologista") quebra em vez de
   estourar a coluna. Vale em tela estreita e para quem aumenta a fonte. */
h1, h2, h3, h4, p, li, a, summary, strong { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--preto);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.75rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.5rem);  font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
p  { margin: 0 0 1.1em; max-width: var(--leitura); }
ul, ol { max-width: var(--leitura); }
a { color: var(--laranja-texto); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--preto); }
strong { font-weight: 600; color: var(--preto); }

/* Foco visivel — requisito. O publico navega por teclado e com zoom alto. */
:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Estrutura ---------- */
.container { width: min(100% - 2.5rem, var(--largura)); margin-inline: auto; }
.secao { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.secao--creme  { background: var(--laranja-fundo); }
.secao--preta  { background: var(--preto); color: #F2EFEC; }
.secao--preta h2, .secao--preta h3 { color: var(--branco); }
.secao--laranja { background: var(--laranja); color: var(--preto); }
.secao--laranja h2, .secao--laranja h3 { color: var(--preto); }
.secao--compacta { padding: clamp(2.5rem, 4.5vw, 4rem) 0; }

.cabecalho-secao { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cabecalho-secao p { font-size: 1.05rem; color: var(--cinza); }
.secao--preta .cabecalho-secao p { color: #C9C5C1; }
.secao--laranja .cabecalho-secao p { color: #2A1A12; }

/* Rotulo em caixa alta — vem do "APARELHOS AUDITIVOS" da placa */
.rotulo {
  display: inline-flex; align-items: flex-start; gap: .55rem;
  font-family: var(--fonte-titulo);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--laranja-texto);
  margin-bottom: 1rem;
}
.rotulo::before {
  content: ''; width: 9px; height: 9px; margin-top: .42em;  /* alinha com a 1a linha, nao com o bloco */
  background: var(--laranja); transform: rotate(45deg);  /* o losango da vitrine */
  flex: none;
}
.secao--preta .rotulo { color: var(--laranja); }
.secao--laranja .rotulo { color: var(--preto); }
.secao--laranja .rotulo::before { background: var(--preto); }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.6rem;
  font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 600;
  border-radius: var(--raio); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.btn:hover { transform: translateY(-2px); }
.btn svg { flex: none; }

.btn--primario { background: var(--laranja); color: var(--preto); box-shadow: 0 4px 0 #C43A00; }
.btn--primario:hover { background: #FF5A16; color: var(--preto); }
.btn--primario:active { transform: translateY(2px); box-shadow: 0 2px 0 #C43A00; }

.btn--wpp { background: var(--wpp); color: #06301A; box-shadow: 0 4px 0 #128C4A; }
.btn--wpp:hover { background: #2FE773; color: #06301A; }

.btn--contorno { background: transparent; color: var(--preto); border-color: var(--preto); }
.btn--contorno:hover { background: var(--preto); color: var(--branco); }
.secao--preta .btn--contorno { color: var(--branco); border-color: rgba(255,255,255,.5); }
.secao--preta .btn--contorno:hover { background: var(--branco); color: var(--preto); }
.secao--laranja .btn--contorno { border-color: var(--preto); }

.grupo-botoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.75rem; }

/* ---------- Cabecalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--preto);
  border-bottom: 3px solid var(--laranja);
}
.topo__interno { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.topo__logo { display: flex; align-items: center; flex: none; }
.topo__logo img { width: 190px; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  display: flex; align-items: center; min-height: 46px; padding: .4rem .62rem;
  color: #EDEAE7; font-size: .9375rem; font-weight: 500;
  text-decoration: none; border-radius: 8px; white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.nav a:hover { background: rgba(255,255,255,.1); color: var(--branco); }
.nav a[aria-current="page"] { color: var(--laranja); font-weight: 600; }
.topo .btn { min-height: 46px; padding: .5rem .95rem; font-size: .9375rem; box-shadow: none; }
.menu-botao {
  display: none; align-items: center; justify-content: center;
  width: 52px; height: 52px; background: transparent;
  border: 2px solid rgba(255,255,255,.35); border-radius: 8px;
  color: var(--branco); cursor: pointer;
}

/* ---------- Hero ---------- */
.hero { background: var(--laranja-fundo); padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5.5rem); overflow: hidden; }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero__texto > p { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: #3A3733; }
.hero__destaques { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
/* Losango posicionado, não flex: se o item tiver link ou negrito dentro,
   flex quebraria o texto em itens separados numa linha que não dobra. */
.hero__destaques li { position: relative; padding-left: 1.55rem; font-size: 1.0625rem; }
.hero__destaques li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 10px;
  background: var(--laranja); transform: rotate(45deg);
}

/* Moldura deslocada — cita o quadro laranja do adesivo da vitrine */
.moldura { position: relative; }
.moldura img, .moldura video { border-radius: var(--raio-g); box-shadow: var(--sombra-alta); position: relative; z-index: 1; }
.moldura::after {
  content: ''; position: absolute; inset: 18px -18px -18px 18px;
  border: 3px solid var(--laranja); border-radius: var(--raio-g); z-index: 0;
}
.moldura--preta::after { border-color: var(--preto); }

/* ---------- Faixa de credenciais — letreiro que corre ----------
   Uma linha só, rodando sem parar. Resolve o empilhamento no celular
   (eram quatro blocos, virou uma faixa) e dá movimento sem poluir. */
.faixa {
  position: relative; background: var(--preto); color: #EDEAE7;
  padding: 1.1rem 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Desbota nas pontas para o texto nascer e sumir, em vez de ser cortado */
.faixa::before, .faixa::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
  pointer-events: none;
}
.faixa::before { left: 0;  background: linear-gradient(to right, var(--preto), transparent); }
.faixa::after  { right: 0; background: linear-gradient(to left,  var(--preto), transparent); }

.faixa__trilho { display: flex; width: max-content; animation: faixa-correr 38s linear infinite; }
.faixa:hover .faixa__trilho, .faixa:focus-within .faixa__trilho { animation-play-state: paused; }

.faixa__lista {
  display: flex; align-items: center; gap: 3rem;
  margin: 0; padding: 0 1.5rem; list-style: none; max-width: none;
}
.faixa__lista li { display: flex; align-items: baseline; gap: .6rem; white-space: nowrap; }
.faixa__lista li::before {
  content: ''; align-self: center; flex: none;
  width: 8px; height: 8px; background: var(--laranja); transform: rotate(45deg);
}
.faixa strong {
  color: var(--laranja); font-family: var(--fonte-titulo);
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
}
.faixa span { font-size: .9375rem; color: #B9B4AF; }

/* Três cópias e um terço de deslocamento: quando a primeira sai, a segunda já
   está no lugar dela. Com duas cópias abriria buraco em tela muito larga. */
@keyframes faixa-correr {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

/* Sem movimento: vira lista quebrada e centralizada, sem correr */
@media (prefers-reduced-motion: reduce) {
  .faixa__trilho { animation: none; width: 100%; justify-content: center; }
  .faixa__trilho > :last-child { display: none; }   /* a cópia só serve para o laço */
  .faixa__lista { flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
  .faixa__lista li { white-space: normal; }
}

/* ---------- Grades e cartoes ---------- */
.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cartao {
  background: var(--branco); border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-g); padding: 1.75rem;
  display: flex; flex-direction: column;
  transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: var(--laranja-borda); }
.cartao h3 { margin-bottom: .5rem; }
.cartao p { font-size: 1rem; color: var(--cinza); margin-bottom: 0; }
.cartao__icone {
  width: 52px; height: 52px; border-radius: 12px; margin-bottom: 1.1rem;
  background: var(--laranja-fundo); color: var(--laranja-texto);
  display: grid; place-items: center; flex: none;
}
.cartao--destaque { border: 2px solid var(--laranja); }
.cartao__link { margin-top: auto; padding-top: 1.1rem; font-weight: 600; font-size: 1rem; }
.cartao--foto { padding: 0; overflow: hidden; }
.cartao--foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cartao--foto .cartao__corpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.secao--creme .cartao { border-color: #F0E2D9; }

/* ---------- Bloco de prova (foto + texto) ---------- */
.prova { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.prova--invertida .prova__midia { order: 2; }
.prova__lista { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.prova__lista li { position: relative; padding-left: 1.7rem; }
.prova__lista li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 11px; height: 11px;
  background: var(--laranja); transform: rotate(45deg);
}

/* ---------- Passos numerados ---------- */
.passos { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.passos li::before {
  content: counter(passo);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--laranja); color: var(--preto);
  font-family: var(--fonte-titulo); font-size: 1.375rem; font-weight: 700;
  display: grid; place-items: center;
}
.passos h3 { margin-bottom: .25rem; }
.passos p { margin-bottom: 0; font-size: 1rem; color: var(--cinza); }
.secao--preta .passos p { color: #C9C5C1; }
.passos__conteudo { grid-column: 2; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.faq details {
  background: var(--branco); border: 1px solid var(--cinza-borda);
  border-radius: var(--raio); overflow: hidden;
}
.faq details[open] { border-color: var(--laranja); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; min-height: 52px; cursor: pointer;
  font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 600;
  color: var(--preto); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 12px; height: 12px;
  border-right: 3px solid var(--laranja); border-bottom: 3px solid var(--laranja);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__resposta { padding: 0 1.35rem 1.35rem; }
.faq__resposta p { font-size: 1rem; margin-bottom: .8em; }
.faq__resposta p:last-child { margin-bottom: 0; }

/* ---------- Nota honesta ---------- */
.nota {
  border-left: 4px solid var(--laranja); background: var(--laranja-fundo);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--raio) var(--raio) 0;
  max-width: var(--leitura);
}
.nota p { margin-bottom: 0; font-size: 1rem; }
.secao--preta .nota { background: rgba(253,74,1,.10); }
.secao--preta .nota p { color: #EDEAE7; }

/* ---------- Video ---------- */
.video-bloco { position: relative; border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-alta); }
.video-bloco video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }

/* ---------- Contato / mapa ---------- */
.mapa { border: 0; width: 100%; aspect-ratio: 4/3; border-radius: var(--raio-g); box-shadow: var(--sombra); }
.dados-contato { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
.dados-contato li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1rem; align-items: start; }
.dados-contato__icone {
  width: 46px; height: 46px; border-radius: 10px; background: var(--laranja);
  color: var(--preto); display: grid; place-items: center; flex: none;
}
.dados-contato strong { display: block; font-family: var(--fonte-titulo); font-size: 1.0625rem; }
.dados-contato span, .dados-contato a { font-size: 1.0625rem; color: var(--preto-suave); }
.secao--preta .dados-contato span, .secao--preta .dados-contato a { color: #EDEAE7; }

/* ---------- Rodape ---------- */
.rodape { background: var(--preto); color: #C9C5C1; padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; }
.rodape__logo { width: 210px; margin-bottom: 1.25rem; }
.rodape h4 { color: var(--branco); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.rodape a { color: #C9C5C1; text-decoration: none; font-size: 1rem; }
.rodape a:hover { color: var(--laranja); text-decoration: underline; }
.rodape p { font-size: 1rem; margin-bottom: .8em; }
.rodape__base {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .9375rem;
}

/* ---------- WhatsApp flutuante ---------- */
.wpp-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 60px; padding: .9rem 1.4rem;
  background: var(--wpp); color: #06301A;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.0625rem;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  transition: transform var(--transicao);
}
.wpp-flutuante:hover { transform: scale(1.04); color: #06301A; }

/* Pular pro conteudo — teclado e leitor de tela */
/* Sai da tela por cima, não pela lateral — evita rolagem horizontal fantasma */
.pular {
  position: absolute; left: 0; top: 0; z-index: 100;
  transform: translateY(-200%);
  background: var(--laranja); color: var(--preto); padding: 1rem 1.5rem;
  font-weight: 600; border-radius: 0 0 var(--raio) 0; text-decoration: none;
}
.pular:focus { transform: translateY(0); }

/* Link solto (nao dentro de frase) recebe area de toque de verdade.
   Link no meio de um paragrafo continua inline — a norma isenta esse caso. */
.cartao__link a,
.rodape ul a,
.dados-contato a {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* ---------- Migalhas ---------- */
.migalhas { font-size: .9375rem; color: var(--cinza); padding: 1.25rem 0 0; }
.migalhas a { color: var(--cinza); text-decoration: none; }
.migalhas a:hover { color: var(--laranja-texto); text-decoration: underline; }
.migalhas span { margin: 0 .45rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .hero__grade, .prova { grid-template-columns: minmax(0, 1fr); }
  .prova--invertida .prova__midia { order: 0; }
  .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .moldura::after { inset: 12px -12px -12px 12px; }
}

@media (max-width: 760px) {
  body { font-size: 1.125rem; }
  .menu-botao { display: inline-flex; }
  .topo__interno { min-height: 68px; }
  .topo__logo img { width: 158px; }
  /* O botao do WhatsApp fica dentro do menu recolhido — nao esconder aqui. */
  .nav {
    display: none; position: absolute; left: -1.25rem; right: -1.25rem; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--preto); padding: .75rem 1.25rem 1.5rem;
    border-bottom: 3px solid var(--laranja);
  }
  .nav.aberto { display: flex; }
  .nav a { min-height: 54px; font-size: 1.0625rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav .btn { margin-top: 1rem; border-radius: var(--raio); min-height: 54px; font-size: 1.0625rem; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }
  .passos li { grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; }
  .passos li::before { width: 48px; height: 48px; font-size: 1.1875rem; }
  .wpp-flutuante { right: 14px; bottom: 14px; padding: .85rem 1.15rem; font-size: 1rem; }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .moldura::after { display: none; }
}

@media (max-width: 420px) {
  .wpp-flutuante span { display: none; }
  .wpp-flutuante { padding: 1rem; border-radius: 50%; min-width: 60px; justify-content: center; }
}

/* ---------- Acessibilidade e impressao ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .cartao:hover, .wpp-flutuante:hover { transform: none; }
}
@media print {
  .topo, .wpp-flutuante, .menu-botao { display: none; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   CARROSSEL DE BANNERS — direcao de arte separada por tela
   Desktop recebe a peca 2103x748; celular recebe a peca 9:16. Nao e a mesma
   imagem esticada: sao arquivos diferentes, trocados por <picture>.
   ========================================================================== */
.carrossel { position: relative; background: var(--laranja-fundo); overflow: hidden; }
.carrossel__palco { display: grid; }
.slide {
  grid-area: 1 / 1; position: relative;
  opacity: 0; visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms ease;
}
.slide--ativo { opacity: 1; visibility: visible; }
.slide img { width: 100%; height: auto; display: block; }

/* Texto de verdade por cima da imagem — no celular, sobre um veu escuro */
.slide__texto { position: absolute; inset: 0; display: flex; align-items: flex-end; }
/* O véu precisa cobrir TODO o bloco de texto, não só o rodapé da imagem —
   senão o rótulo laranja cai numa área clara e perde contraste. */
.slide__texto::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,10,10,.94) 0%,
    rgba(10,10,10,.90) 42%,
    rgba(10,10,10,.70) 64%,
    rgba(10,10,10,.34) 82%,
    rgba(10,10,10,.10) 100%);
}
/* O respiro embaixo abre espaço para os pontos, que não podem encostar no botão */
.slide__caixa { position: relative; padding: 2rem 0 4.5rem; max-width: 34rem; }
.slide__caixa .rotulo { color: var(--laranja); }
.slide__caixa h1, .slide__caixa h2 { color: var(--branco); font-size: clamp(1.75rem, 6.4vw, 2.4rem); margin-bottom: .6rem; }
.slide__caixa p { color: #F0EDEA; font-size: 1.0625rem; margin-bottom: 0; }
.slide__caixa .grupo-botoes { margin-top: 1.4rem; }
/* Sobre o véu escuro, o botão de contorno vira claro — preto sobre preto some */
.slide__caixa .btn--contorno { color: var(--branco); border-color: rgba(255,255,255,.75); }
.slide__caixa .btn--contorno:hover { background: var(--branco); color: var(--preto); }

/* Controles */
.carrossel__setas { display: none; }
.carrossel__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 2px solid var(--preto);
  color: var(--preto); cursor: pointer;
  align-items: center; justify-content: center;
}
.carrossel__seta:hover { background: var(--laranja); }
.carrossel__seta--anterior { left: 18px; }
.carrossel__seta--proxima { right: 18px; }

.carrossel__pontos {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  display: flex; justify-content: center; gap: .5rem;
}
.carrossel__ponto {
  width: 44px; height: 44px; padding: 0; background: none; border: 0;
  cursor: pointer; display: grid; place-items: center;
}
.carrossel__ponto::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.55); border: 2px solid rgba(16,16,16,.35);
  transition: background var(--transicao), width var(--transicao);
}
.carrossel__ponto[aria-current="true"]::before { background: var(--laranja); width: 28px; border-radius: 6px; }

@media (min-width: 761px) {
  /* Nos slides 2 e 3 o texto ja esta gravado na arte — nao repetir por cima */
  .slide--arte-com-texto .slide__texto { display: none; }
  .slide__texto { align-items: center; }
  .slide__texto::before { background: none; }
  .slide__caixa { padding: 0; max-width: 33rem; }
  .slide__caixa .rotulo { color: var(--laranja-texto); }
  .slide__caixa h1, .slide__caixa h2 { color: var(--preto); font-size: clamp(2rem, 3.2vw, 3rem); }
  .slide__caixa p { color: #3A3733; }
  .slide__caixa .btn--contorno { color: var(--preto); border-color: var(--preto); }
  .slide__caixa .btn--contorno:hover { background: var(--preto); color: var(--branco); }
  .carrossel__setas { display: block; }
  .carrossel__seta { display: flex; }
  .carrossel__pontos { bottom: 20px; }
}

/* ==========================================================================
   CARDS DE DESTAQUE — os tres caminhos principais do site
   ========================================================================== */
.destaques {
  display: grid;
  /* Ajusta sozinha: 3 colunas no computador, 2 no tablet, 1 no celular.
     Sem ponto de virada fixo — quem manda e o espaco que o cartao precisa. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.destaque {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 290px; padding: 1.75rem; border-radius: var(--raio-g);
  text-decoration: none; overflow: hidden;
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.destaque:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }

/* Halo atrás do produto — dá profundidade sem pesar */
.destaque::before {
  content: ''; position: absolute; z-index: -1;
  right: -14%; bottom: -18%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 68%);
  transition: transform 380ms ease;
}
.destaque:hover::before { transform: scale(1.12); }

.destaque__corpo { position: relative; z-index: 2; max-width: 66%; }
.destaque__eyebrow {
  font-family: var(--fonte-titulo); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 .5rem; opacity: .72;
}
.destaque h3 {
  font-size: 1.375rem; line-height: 1.2; letter-spacing: -.015em;
  margin: 0 0 .45rem;
}
.destaque__texto { font-size: .9375rem; line-height: 1.5; margin: 0; opacity: .82; max-width: none; }

.destaque__acao {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.25rem; min-height: 44px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem;
}
.destaque__acao svg {
  flex: none; padding: 7px; border-radius: 50%;
  border: 2px solid currentColor;
  transition: transform 260ms ease, background 260ms ease, color 260ms ease;
}
.destaque:hover .destaque__acao svg { transform: translateX(5px); }

.destaque img {
  position: absolute; right: -5%; bottom: -4%; z-index: 1;
  width: 56%; max-width: 215px; height: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.34));
  transition: transform 380ms ease;
}
.destaque:hover img { transform: scale(1.06) rotate(-2deg); }

/* Variações de cor */
.destaque--escuro { background: radial-gradient(120% 120% at 78% 88%, #23211F 0%, var(--preto) 58%); }
.destaque--escuro .destaque__corpo, .destaque--escuro h3, .destaque--escuro .destaque__acao { color: var(--branco); }
.destaque--escuro .destaque__eyebrow { color: var(--laranja); opacity: 1; }
.destaque--escuro:hover .destaque__acao svg { background: var(--laranja); border-color: var(--laranja); color: var(--preto); }

.destaque--claro { background: var(--branco); border: 1px solid var(--cinza-borda); }
.destaque--claro .destaque__corpo, .destaque--claro h3, .destaque--claro .destaque__acao { color: var(--preto); }
.destaque--claro .destaque__eyebrow { color: var(--laranja-texto); opacity: 1; }
.destaque--claro::before { background: radial-gradient(circle, rgba(253,74,1,.10) 0%, transparent 68%); }
.destaque--claro:hover .destaque__acao svg { background: var(--preto); border-color: var(--preto); color: var(--branco); }

.destaque--laranja { background: radial-gradient(120% 120% at 78% 88%, #FF6B2C 0%, var(--laranja) 56%); }
.destaque--laranja .destaque__corpo, .destaque--laranja h3, .destaque--laranja .destaque__acao { color: var(--preto); }
.destaque--laranja .destaque__eyebrow { color: #4A1B04; opacity: 1; }
.destaque--laranja::before { background: radial-gradient(circle, rgba(255,255,255,.30) 0%, transparent 68%); }
.destaque--laranja:hover .destaque__acao svg { background: var(--preto); border-color: var(--preto); color: var(--laranja); }

/* Card com fotografia em vez de produto recortado */
.destaque--foto { justify-content: flex-end; }
.destaque--foto img {
  right: 0; top: 0; bottom: 0; width: 50%; max-width: none; height: 100%;
  object-fit: cover; object-position: 62% center;
  border-radius: 0; filter: none;
}
.destaque--foto:hover img { transform: scale(1.05) rotate(0); }
.destaque--foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, var(--branco) 44%, rgba(255,255,255,.86) 54%, transparent 72%);
}
.destaque--foto .destaque__corpo, .destaque--foto .destaque__acao { z-index: 2; }
.destaque--foto .destaque__corpo { max-width: 56%; }

/* ==========================================================================
   OS SEIS FORMATOS DE APARELHO — vitrine com a foto real de cada um
   ========================================================================== */
.tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.tipo {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-g); overflow: hidden;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.tipo:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: var(--laranja-borda); }

.tipo__figura {
  position: relative; margin: 0; padding: 1.5rem 1.5rem .5rem;
  background: radial-gradient(circle at 50% 58%, var(--laranja-fundo) 0%, var(--branco) 72%);
  display: grid; place-items: center;
}
.tipo__figura img { width: 74%; max-width: 200px; height: auto; }
.tipo__ordem {
  position: absolute; left: 1rem; top: 1rem;
  font-family: var(--fonte-titulo); font-size: .75rem; font-weight: 700;
  color: var(--laranja-texto); letter-spacing: .08em;
}
.tipo__corpo { padding: 1rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tipo__sigla {
  display: inline-block; align-self: flex-start;
  padding: .2rem .6rem; margin-bottom: .55rem;
  background: var(--preto); color: var(--branco);
  font-family: var(--fonte-titulo); font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  border-radius: 5px;
}
.tipo h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.tipo p { font-size: .9375rem; color: var(--cinza); margin-bottom: .9rem; max-width: none; }
.tipo__quem {
  margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--cinza-borda);
  font-size: .9375rem; color: var(--preto-suave);
}
.tipo__quem strong { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--laranja-texto); margin-bottom: .2rem; }

/* ==========================================================================
   SECAO COM VIDEO VERTICAL — so no celular
   O clipe e 9:16 e ocupa a tela toda; o texto entra por cima, com veu.
   ========================================================================== */
/* A secao troca de figurino conforme a tela. O texto e escrito UMA vez:
   no computador ela e um bloco .prova comum, com foto ao lado;
   no celular o clipe vertical vira fundo e o texto sobe por cima dele. */
.secao-video { position: relative; }
.secao-video__midia { display: none; }

@media (max-width: 760px) {
  .secao-video { background: var(--preto); overflow: hidden; }
  .secao-video__midia {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; z-index: 0;
  }
  /* O véu é forte de propósito: o clipe é enfeite, o texto é o que precisa
     ser lido. Sem isso, parágrafo claro cai sobre área clara do vídeo. */
  .secao-video::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to top,
        rgba(10,10,10,.95) 0%,
        rgba(10,10,10,.92) 46%,
        rgba(10,10,10,.82) 68%,
        rgba(10,10,10,.62) 86%,
        rgba(10,10,10,.42) 100%);
  }
  .secao-video .prova__midia { display: none; }     /* no celular quem mostra e o video */
  .secao-video__conteudo {
    position: relative; z-index: 2;
    min-height: 76vh; display: flex; flex-direction: column; justify-content: flex-end;
    /* 6rem no topo porque o cabeçalho fica fixo e cobriria o rótulo */
    padding-top: 6rem; padding-bottom: 2.5rem;
  }
  .secao-video .rotulo { color: var(--laranja); }
  .secao-video h2, .secao-video h3 { color: var(--branco); }
  .secao-video p { color: #EDEAE7; }
  .secao-video .prova__lista li { color: #EDEAE7; }
  .secao-video .prova__lista li strong { color: var(--branco); }
  .secao-video .btn--contorno { color: var(--branco); border-color: rgba(255,255,255,.6); }
  .secao-video .nota { background: rgba(253,74,1,.14); }
  .secao-video .nota p { color: #EDEAE7; }

  /* Os loops 16:9 sao de computador; no celular quem manda sao os verticais */
  .video-bloco { display: none; }

  .destaques { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .destaque { min-height: 210px; padding: 1.5rem; }
  .destaque__corpo { max-width: 60%; }
  .destaque h3 { font-size: 1.25rem; }
  .destaque img { width: 48%; max-width: 165px; }
  .destaque--foto .destaque__corpo { max-width: 58%; }
  .destaque--foto img { width: 46%; }

  .tipos { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .tipo__figura { padding: 1.25rem 1.25rem .25rem; }
  .tipo__figura img { width: 56%; max-width: 165px; }
  .tipo__corpo { padding: .85rem 1.25rem 1.35rem; }

  .faixa::before, .faixa::after { width: 44px; }
  .faixa__lista { gap: 2.25rem; }
}

@media (min-width: 761px) and (max-width: 980px) {
  .destaques { gap: 1rem; }
  .destaque { min-height: 260px; padding: 1.4rem; }
  .destaque h3 { font-size: 1.125rem; }
  .destaque__corpo { max-width: 74%; }
  .destaque img { width: 52%; max-width: 150px; }
  .tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Texto de apoio logo abaixo dos cards de destaque */
.grade--apos-destaques { margin-top: 1.75rem; }
.grade--apos-destaques p { font-size: 1rem; color: var(--cinza); margin-bottom: 0; }

/* Vitrine miuda dos tipos de aparelho — so aparece no computador,
   porque no celular o lugar dela e ocupado pelo video vertical. */
.tipos-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.tipos-mini figure {
  margin: 0; padding: .75rem .5rem .6rem; text-align: center;
  background: var(--laranja-fundo); border: 1px solid var(--laranja-borda);
  border-radius: var(--raio);
}
.tipos-mini img { width: 100%; height: auto; }
.tipos-mini figcaption {
  font-family: var(--fonte-titulo); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; color: var(--laranja-texto); line-height: 1.3;
}

@media (max-width: 760px) {
  /* O espacamento no celular quem manda e o conteudo, nao a secao */
  .secao-video.secao { padding: 0; }
}

/* A sigla ao lado do nome do formato (BTE, RIC, ITE...) */
.tipos-mini figcaption span { display: block; color: var(--cinza); font-weight: 600; letter-spacing: .06em; }

/* ==========================================================================
   CARTAZ DOS VIDEOS VIA CSS — não via atributo poster
   O atributo `poster` é baixado mesmo quando o vídeo está escondido por CSS.
   Isso fazia o computador baixar as imagens de celular (e vice-versa), à toa.
   Fundo CSS dentro de media query só baixa na tela em que aparece.
   ========================================================================== */
.secao-video__midia, .loop { background-size: cover; background-position: center; background-color: var(--preto); }

@media (max-width: 760px) {
  .secao-video__midia--aparelhos { background-image: url('/assets/img/hero-mob-1.jpg'); }
  .secao-video__midia--familia   { background-image: url('/assets/img/hero-mob-3.jpg'); }
}

@media (min-width: 761px) {
  .loop--expositor { background-image: url('/assets/img/expositor-aparelhos-audiovic.jpg'); }
  .loop--orelha    { background-image: url('/assets/img/ilustra-retroauricular-detalhe.jpg'); }
}

/* Enquanto a página carrega, só o primeiro banner existe de verdade.
   `display: none` faz o navegador NÃO baixar a imagem dos outros dois — assim
   eles não roubam banda da imagem principal, que é o que a pessoa vê primeiro.
   O JavaScript tira essa classe depois que a página termina de carregar. */
.carrossel--adiado .slide:not(.slide--ativo) { display: none; }

/* ==========================================================================
   EFEITOS — vida sem atrapalhar a leitura
   Regras que valem para tudo aqui embaixo:
   1. Só anima `transform` e `opacity`. São as duas coisas que o navegador faz
      na placa de vídeo, sem recalcular a página. Animar altura ou margem
      trava em celular fraco.
   2. Nada acima da dobra é animado — o que a pessoa vê primeiro aparece
      pronto, senão a nota de velocidade do Google piora.
   3. Tudo desliga em `prefers-reduced-motion`. Não é opcional: parte do
      público tem tontura ou desconforto com movimento.
   4. Sem JavaScript, todo o conteúdo continua visível. O efeito é um extra.
   ========================================================================== */

/* ---------- Aparecer ao rolar ---------- */
/* O estado escondido só existe quando o JavaScript confirmou que está ligado
   (classe `js` no <html>). Sem isso, nada some. */
.js .revelar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1) var(--atraso, 0ms),
              transform 620ms cubic-bezier(.22,.61,.36,1) var(--atraso, 0ms);
}
.js .revelar--visivel { opacity: 1; transform: none; }

/* ---------- Cabeçalho ao rolar ---------- */
.topo { transition: box-shadow 260ms ease, background 260ms ease; }
.topo--rolado { box-shadow: 0 6px 24px rgba(0,0,0,.28); }
.topo--rolado .topo__logo img { transform: scale(.94); }
.topo__logo img { transition: transform 260ms ease; transform-origin: left center; }

/* ---------- Onda sonora: a assinatura da marca virando divisória ----------
   É o traço que sai do ícone de orelha no logo. Some devagar para a direita,
   como som se propagando. Fica em cima de seções escolhidas. */
.onda { position: relative; }
.onda::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26'%3E%3Cpath d='M0 13h14l5-8 5 16 5-11 5 6 5-3h16l5-9 5 18 5-13 5 7 5-3h20l5-6 5 12 5-9 5 5 5-2h18l5-10 5 20 5-14 5 8 5-4h22l5-7 5 13 5-10 5 6 5-2h30' fill='none' stroke='%23FD4A01' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.42'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: onda-corre 26s linear infinite;
  pointer-events: none;
}
@keyframes onda-corre {
  from { background-position: 0 center; }
  to   { background-position: -240px center; }
}
.secao--preta.onda::before { opacity: .8; }

/* Sobre o laranja, a onda precisa ser PRETA — laranja sobre laranja some.
   É o mesmo desenho, só troca a cor do traço. */
.secao--laranja.onda::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26'%3E%3Cpath d='M0 13h14l5-8 5 16 5-11 5 6 5-3h16l5-9 5 18 5-13 5 7 5-3h20l5-6 5 12 5-9 5 5 5-2h18l5-10 5 20 5-14 5 8 5-4h22l5-7 5 13 5-10 5 6 5-2h30' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Resposta do FAQ aparecendo ---------- */
details[open] .faq__resposta { animation: faq-abre 280ms cubic-bezier(.22,.61,.36,1); }
@keyframes faq-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Voltar ao topo ---------- */
/* Página longa e público que rola devagar: isso é utilidade, não enfeite. */
.ao-topo {
  position: fixed; right: 20px; bottom: 92px; z-index: 59;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--branco); color: var(--preto);
  border: 2px solid var(--preto);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease, background 200ms ease;
}
.ao-topo--visivel { opacity: 1; visibility: visible; transform: none; }
.ao-topo:hover { background: var(--laranja); border-color: var(--laranja); }

/* ---------- Foto respirando dentro da moldura ---------- */
.moldura { overflow: hidden; border-radius: var(--raio-g); }
.moldura img, .moldura video { transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
.moldura:hover img, .moldura:hover video { transform: scale(1.035); }

/* ---------- Banner ativo respirando ---------- */
/* Zoom lento no banner da vez. 4% em 20 segundos: dá vida sem chamar atenção. */
.slide--ativo picture img { animation: respira 20s ease-in-out infinite alternate; }
@keyframes respira {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* ---------- Vitrine de tipos: o produto sobe ---------- */
.tipo__figura img { transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
.tipo:hover .tipo__figura img { transform: translateY(-6px) scale(1.05); }
.tipo__sigla { transition: background 240ms ease, color 240ms ease; }
.tipo:hover .tipo__sigla { background: var(--laranja); color: var(--preto); }

/* ---------- Botão de WhatsApp chamando de leve ---------- */
/* Uma pulsação a cada 6 segundos. Mais que isso vira pisca-pisca. */
.wpp-flutuante::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--wpp); animation: pulso 6s ease-out infinite;
  pointer-events: none;
}
@keyframes pulso {
  0%, 72% { transform: scale(1); opacity: .7; }
  88%     { transform: scale(1.28); opacity: 0; }
  100%    { transform: scale(1.28); opacity: 0; }
}

/* ---------- Sublinhado que cresce nos links de texto ---------- */
.prova p a, .faq__resposta a, .cabecalho-secao p a {
  text-decoration: none;
  background-image: linear-gradient(var(--laranja), var(--laranja));
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 260ms ease;
}
.prova p a:hover, .faq__resposta a:hover, .cabecalho-secao p a:hover { background-size: 100% 2px; }

/* ==========================================================================
   DESLIGA TUDO para quem pediu menos movimento.
   Vem depois de propósito, para vencer as regras acima.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .onda::before, .slide--ativo picture img, .wpp-flutuante::after { animation: none; }
  .wpp-flutuante::after { display: none; }
  .moldura:hover img, .moldura:hover video,
  .tipo:hover .tipo__figura img { transform: none; }
  details[open] .faq__resposta { animation: none; }
  .ao-topo { transition: none; }
  .topo__logo img { transition: none; }
}

/* ==========================================================================
   MENU SANDUICHE ATE 1040px
   O menu tem 7 links mais o botao do WhatsApp. Medido: ele precisa de ~1005px. Abaixo disso nao cabe
   ao lado do logo e empurrava a pagina para o lado no tablet.
   Só o menu muda aqui — os outros pontos de virada (video vertical, arte do
   banner) continuam em 760px, porque sao decisao de conteudo, nao de espaco.
   ========================================================================== */
@media (max-width: 1040px) {
  .menu-botao { display: inline-flex; }
  .topo__interno { min-height: 70px; }
  .topo__logo img { width: 165px; }
  .nav {
    display: none; position: absolute; left: -1.25rem; right: -1.25rem; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--preto); padding: .75rem 1.25rem 1.5rem;
    border-bottom: 3px solid var(--laranja);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav.aberto { display: flex; }
  .nav a {
    min-height: 54px; font-size: 1.0625rem; border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav .btn {
    margin-top: 1rem; border-radius: var(--raio);
    min-height: 54px; font-size: 1.0625rem; border-bottom: 0;
  }
}