/* ==========================================================
   Busca do Local — estilos do site
   Depende de: css/tokens.css (cores, fontes, botões, cartões)
   ========================================================== */

/* ---------- Fonte Lexend (arquivos locais) ---------- */
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; }
.icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Texto só para leitores de tela */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Foco do teclado: contorno laranja do manual + anel verde-escuro para contraste em fundo claro */
:focus-visible { box-shadow: 0 0 0 2px var(--bdl-verde-escuro); }
.bdl-secao--escura :focus-visible, .rodape :focus-visible { box-shadow: none; }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--bdl-branco); transition: box-shadow .2s; }
.topo.com-sombra { box-shadow: var(--bdl-sombra-cabecalho); }
.topo__in { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-height: 64px; }
.topo__logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.topo__logo img { height: 40px; width: auto; } /* 40 px de altura = 129 px de largura (mínimo do manual: 120 px) */
.topo__cta { margin-left: auto; min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.topo__cta .so-desktop { display: none; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--bdl-raio-pequeno); background: transparent; color: var(--bdl-verde-escuro); cursor: pointer; }
.menu-btn .fechar { display: none; }
.menu-btn[aria-expanded="true"] .abrir { display: none; }
.menu-btn[aria-expanded="true"] .fechar { display: block; }
.menu ul { list-style: none; padding: 0; }
.menu a { color: var(--bdl-verde-escuro); text-decoration: none; font-weight: 600; }
.menu a:hover { color: var(--bdl-verde); }

@media (max-width: 1023px) {
  /* Sem JavaScript: o menu aparece como uma linha de links abaixo do logo */
  .menu { order: 3; width: 100%; }
  .menu ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-bottom: .5rem; }
  .menu a { display: inline-block; padding: .6rem 0; }
  /* Com JavaScript: menu hambúrguer */
  .js .menu-btn { display: inline-flex; }
  .js .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; width: auto; background: var(--bdl-branco); box-shadow: 0 12px 24px rgba(3, 75, 55, .12); }
  .js .menu.aberto { display: block; }
  .js .menu ul { display: block; padding: .25rem var(--bdl-margem-lateral) 1rem; }
  .js .menu a { display: block; padding: .9rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--bdl-borda); }
}
@media (max-width: 374px) {
  /* Celulares estreitos (até ~374 px, cobrindo também a faixa 360–365 px onde o
     cabeçalho já quebrava em duas linhas): logo, CTA e hambúrguer precisam caber na
     mesma linha. Nenhum ajuste isolado resolvia sozinho, então reduzimos um pouco de
     cada (padding lateral do cabeçalho, gap, logo e CTA) em vez de apertar só um
     elemento. */
  .topo .bdl-container { padding-inline: .75rem; }
  .topo__in { gap: .375rem; }
  .topo__logo img { height: 38px; } /* ainda acima do mínimo do manual (120 px de largura) */
  .topo__cta { padding: 8px; font-size: .875rem; }
}
@media (min-width: 1024px) {
  .topo__in { min-height: 76px; gap: 1.5rem; flex-wrap: nowrap; }
  .menu { margin-left: auto; }
  .menu ul { display: flex; gap: 1.75rem; }
  .menu a { font-size: .9375rem; padding: .5rem 0; }
  .topo__cta { margin-left: 0; padding: 12px 22px; }
  .topo__cta .so-desktop { display: inline; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--bdl-fundo); padding-top: 2.5rem; }
.hero__grid { position: relative; z-index: 1; display: grid; gap: 2rem; align-items: center; }
.hero h1 { margin: 1rem 0 1rem; }
.hero__texto { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); max-width: 34rem; }
.hero__botoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
@media (max-width: 359px) {
  /* Celulares bem estreitos (320 px): CTA em largura total para não quebrar em duas linhas */
  .hero__botoes { flex-direction: column; align-items: stretch; }
  .hero__botoes .bdl-btn { width: 100%; padding-inline: 16px; font-size: .9375rem; }
}
.hero__apoio { margin: 1rem 0 0; font-size: var(--bdl-fs-pequeno); color: var(--bdl-texto-suave); }
.hero__img { position: relative; width: min(92%, 400px); margin-inline: auto; }
.hero { padding-bottom: 3rem; }
/* Assinatura gráfica da marca (círculos + arco laranja), desenhada em SVG no HTML */
.decor { position: absolute; z-index: 0; right: 0; bottom: 0; max-width: none; pointer-events: none; }
.hero__decor { width: 600px; height: 600px; transform: translate(42%, 50%); }
@media (min-width: 900px) {
  .hero { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
  .hero__img { width: min(100%, 520px); }
  .hero__decor { width: min(60vw, 860px); height: min(60vw, 860px); transform: translate(20%, 45%); }
}
@media (min-width: 900px) and (max-width: 1129px) {
  /* Nessa faixa a coluna de texto do grid 1.1fr/.9fr fica mais estreita, em termos
     absolutos, do que em 768px (coluna única) ou 1130px+ (container já no máximo),
     o que empurrava o título para 4 linhas com "negócios." órfão. Damos um pouco mais
     de espaço ao texto só aqui; testado pixel a pixel até 1129 para não reabrir uma
     quebra ruim diferente logo antes da próxima faixa (1130px+, inalterada). */
  .hero__grid { grid-template-columns: 1.25fr .75fr; }
}

/* ---------- Cabeçalho das seções ---------- */
.secao__cabeca { max-width: 42rem; margin-bottom: 2rem; }
.secao__cabeca p { color: var(--bdl-texto-suave); margin: 0; }
.secao__cabeca a { color: var(--bdl-verde-escuro); font-weight: 600; }

/* Duas linhas no celular, uma linha no computador */
.quebra-celular .sep { display: none; }
.quebra-celular > span:not(.sep) { display: block; }
@media (min-width: 640px) {
  .quebra-celular .sep { display: inline; }
  .quebra-celular > span:not(.sep) { display: inline; }
}

/* ---------- Serviços ---------- */
.servicos { display: grid; gap: 1rem; }
.servico { display: flex; flex-direction: column; gap: .5rem; }
.servico h3 { margin: .5rem 0 0; }
.servico p { margin: 0; }
.servico__ideal { font-size: var(--bdl-fs-pequeno); color: var(--bdl-texto-suave); }
.servico__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .75rem; min-height: 44px; font-weight: 600; color: var(--bdl-verde); text-decoration: none; }
.servico__link:hover { color: var(--bdl-verde-hover); text-decoration: underline; }
.servico__link .icone { width: 18px; height: 18px; }
.icone-caixa { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bdl-fundo); border: 1px solid var(--bdl-borda); color: var(--bdl-verde); flex-shrink: 0; }
@media (min-width: 640px) { .servicos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .servicos { grid-template-columns: repeat(4, 1fr); } }

.inclusos { margin-top: 1.5rem; background: var(--bdl-fundo); border: 1px solid var(--bdl-borda); border-radius: var(--bdl-raio-card); padding: 1.5rem; }
.inclusos h3 { font-size: 1.0625rem; margin-bottom: 1rem; }
.inclusos ul { list-style: none; padding: 0; display: grid; gap: .75rem; }
.inclusos li { display: flex; align-items: flex-start; gap: .6rem; }
.check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bdl-verde-claro); color: var(--bdl-branco); flex-shrink: 0; margin-top: 1px; }
.check .icone { width: 14px; height: 14px; stroke-width: 3; }
@media (min-width: 640px) { .inclusos ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .inclusos ul { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Como funciona ---------- */
.passos { list-style: none; padding: 0; display: grid; }
.passo { position: relative; padding: 0 0 2rem 4.25rem; }
.passo__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bdl-verde); color: var(--bdl-branco); font-weight: 700; font-size: 1.25rem; }
.passo:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 56px; bottom: 8px; width: 2px; background: var(--bdl-verde-claro); }
.passo h3 { margin: .65rem 0 .35rem; }
.passo p { margin: 0; }
.passos + .bdl-btn { margin-top: .5rem; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
  .passo { padding: 0; }
  .passo__num { position: relative; margin-bottom: 1rem; }
  .passo:not(:last-child)::before { left: 60px; right: calc(-1.5rem + 8px); top: 23px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- Portfólio ---------- */
/* Cada case novo entra sozinho na grade: 1 coluna no celular, até 3 no computador */
.cases { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.case { display: flex; flex-direction: column; overflow: hidden; background: var(--bdl-branco); border: 1px solid var(--bdl-borda); border-radius: var(--bdl-raio-card); box-shadow: var(--bdl-sombra-card); }
.case__img { background: var(--bdl-fundo); padding: 1.5rem 1.5rem 0; }
.case__img img { width: min(100%, 340px); margin-inline: auto; }
@media (max-width: 639px) {
  /* Os dois celulares da composição ficavam pequenos demais para mostrar detalhe real
     do projeto neste tamanho de tela. Em vez de encolher os dois por igual, damos
     protagonismo ao celular da frente (recortando a sobra do segundo, que continua
     sugerido na borda) usando a mesma imagem já existente, sem cortar nada do celular
     principal. A partir de 640px a composição original (os dois celulares inteiros)
     já funciona bem e não é alterada. */
  .case__img { overflow: hidden; }
  .case__img img {
    width: 100%;
    max-width: none;
    aspect-ratio: .72;
    object-fit: cover;
    object-position: left center;
    margin-inline: 0;
  }
}
.case__txt { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; flex: 1; padding: 1.5rem; }
.case h3 { margin: .25rem 0 0; font-size: 1.5rem; }
.case__negocio { margin: 0; font-size: var(--bdl-fs-pequeno); color: var(--bdl-texto-suave); }
.case__txt > p { margin: 0; }
.case__tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }
.case__tags li { font-size: .8125rem; font-weight: 600; color: var(--bdl-verde-escuro); background: var(--bdl-fundo); border: 1px solid var(--bdl-borda); border-radius: var(--bdl-raio-pilula); padding: 4px 10px; }
.case .bdl-btn { margin-top: auto; }
.bdl-pilula--demo { background: var(--bdl-branco); color: var(--bdl-verde-escuro); box-shadow: inset 0 0 0 1.5px var(--bdl-verde-escuro); }

/* ---------- Diferenciais ---------- */
.difs { list-style: none; padding: 0; display: grid; gap: 1rem; }
.dif { display: flex; gap: 1rem; align-items: flex-start; background: var(--bdl-branco); border: 1px solid var(--bdl-borda); border-radius: 20px; padding: 1.25rem; }
.dif h3 { font-size: 1.0625rem; margin: .1rem 0 .25rem; }
.dif p { margin: 0; font-size: .9375rem; }
@media (min-width: 640px) { .difs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .difs { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Sobre ---------- */
.sobre { display: grid; gap: 2rem; align-items: center; }
.sobre__foto img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; margin-inline: auto; border: 6px solid var(--bdl-branco); box-shadow: var(--bdl-sombra-card); }
.sobre__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .5rem; }
.sobre__links a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .sobre { grid-template-columns: 300px 1fr; gap: 3rem; }
  .sobre__foto img { width: 260px; height: 260px; }
}

/* ---------- Dúvidas ---------- */
.faq { max-width: 48rem; }
@media (min-width: 1024px) {
  .duvidas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 3rem; align-items: start; }
  .duvidas .secao__cabeca { position: sticky; top: 108px; }
}
.faq details { background: var(--bdl-branco); border: 1px solid var(--bdl-borda); border-radius: 16px; margin-bottom: .75rem; }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: 1.1rem 3.25rem 1.1rem 1.25rem; font-weight: 600; color: var(--bdl-verde-escuro); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--bdl-verde); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0; padding: 0 1.25rem 1.25rem; }

/* ---------- Chamada final ---------- */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final .bdl-container { position: relative; z-index: 1; }
.cta-final__simbolo { width: 56px; margin: 0 auto 1.25rem; }
.cta-final p { max-width: 34rem; margin-inline: auto; }
.cta-final .bdl-btn { margin-top: .75rem; }
.cta-final__horario { margin-top: 1.25rem !important; font-size: var(--bdl-fs-pequeno); color: var(--bdl-menta); }
.cta-final__decor { display: none; }
@media (min-width: 900px) {
  .cta-final__decor { display: block; width: 580px; height: 580px; transform: translate(34%, 52%); }
}

/* ---------- Rodapé ---------- */
.rodape { background: var(--bdl-verde-escuro); color: var(--bdl-texto-sobre-escuro); padding: 3rem 0 6.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9375rem; }
.rodape__grid { display: grid; gap: 2rem; }
.rodape__logo img { width: 210px; }
.rodape__slogan { margin: 1rem 0 0; }
.rodape__titulo { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bdl-menta); }
.rodape ul { list-style: none; padding: 0; }
.rodape li { margin: .35rem 0; }
.rodape a { color: var(--bdl-branco); text-decoration: none; display: inline-block; padding: .2rem 0; }
.rodape a:hover { text-decoration: underline; }
.rodape__base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--bdl-fs-pequeno); }
@media (min-width: 900px) {
  .rodape { padding-bottom: 3rem; }
  .rodape__grid { grid-template-columns: 1.3fr 1.3fr .8fr 1fr; }
}

/* ---------- Botão flutuante do WhatsApp ---------- */
/* Geometria centralizada aqui para não espalhar os mesmos números (tamanho, distância da
   borda, respiro acima do banner) em vários lugares: o botão em si, o deslocamento quando
   o banner abre e a reserva de espaço da 404 usam sempre estas mesmas variáveis. */
:root {
  --bdl-wa-size: 58px;  /* diâmetro do botão */
  --bdl-wa-edge: 20px;  /* distância das bordas da tela, antes da safe-area */
  --bdl-wa-gap: 16px;   /* respiro entre o botão e o que estiver logo abaixo dele (banner ou borda) */
  --bdl-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Espaço total que o botão passa a ocupar, de baixo para cima, quando ele sobe acima do
     banner: borda + safe-area + o próprio botão + o respiro. */
  --bdl-wa-clearance: calc(var(--bdl-wa-edge) + var(--bdl-safe-bottom) + var(--bdl-wa-size) + var(--bdl-wa-gap));
}
.wa-flutuante {
  position: fixed;
  right: calc(var(--bdl-wa-edge) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--bdl-wa-edge) + var(--bdl-safe-bottom));
  z-index: 60;
  display: grid; place-items: center;
  width: var(--bdl-wa-size); height: var(--bdl-wa-size);
  border-radius: 50%;
  background: var(--bdl-verde);
  color: var(--bdl-branco);
  box-shadow: 0 2px 6px rgba(3, 75, 55, .24), 0 10px 28px rgba(3, 75, 55, .28);
  transition: background-color .2s, box-shadow .2s, transform .25s ease;
}
.wa-flutuante:hover { background: var(--bdl-verde-hover); box-shadow: 0 4px 10px rgba(3, 75, 55, .28), 0 14px 32px rgba(3, 75, 55, .34); }
.wa-flutuante:active { transform: scale(.94); }
.wa-flutuante:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bdl-branco), 0 0 0 6px var(--bdl-laranja); }
.wa-flutuante .icone-whatsapp { width: 28px; height: 28px; fill: currentColor; stroke: none; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .wa-flutuante:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  /* Mantém a transição de cor/sombra (não é movimento), mas remove a do transform:
     o botão troca de posição/escala na hora, sem deslizar. */
  .wa-flutuante { transition: background-color .2s, box-shadow .2s; }
}
/* Com o banner de cookies aberto, o botão sobe para ficar acima dele (altura real medida via JS).
   Usa transform em vez de recalcular "bottom" para evitar que o navegador deixe de reavaliar
   um calc() que mistura env() e var() quando só a custom property muda (visto em testes). */
body.bdl-cookies-banner-aberto .wa-flutuante {
  transform: translateY(calc(-1 * (var(--bdl-cookie-banner-height, 0px) + var(--bdl-wa-gap))));
}

/* ---------- Páginas simples (privacidade, 404) ---------- */
.pagina { padding-block: 3rem 4rem; background: var(--bdl-branco); }
.pagina .bdl-container { max-width: 760px; }
.pagina h2 { font-size: 1.375rem; margin-top: 2rem; }
.pagina .aviso { background: var(--bdl-branco); border: 1px solid var(--bdl-borda); border-left: 4px solid var(--bdl-laranja); border-radius: var(--bdl-raio-pequeno); padding: 1rem 1.25rem; font-size: var(--bdl-fs-pequeno); }
.pagina h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.rodape--simples { padding: 1.5rem 0; }
.rodape--simples .rodape__base { margin: 0; padding: 0; border: 0; }
/* Centralizado na altura disponível (não só no topo): evita que o conteúdo fique perto
   demais do botão flutuante do WhatsApp quando o banner de cookies empurra esse botão
   para cima em telas estreitas e baixas. 100vh primeiro como fallback para navegadores
   sem suporte a dvh; a segunda declaração sobrescreve quando dvh é entendido. */
.erro404 {
  text-align: center; display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  padding-block: 3rem;
}
@media (min-width: 1024px) {
  .erro404 { min-height: calc(100vh - 76px); min-height: calc(100dvh - 76px); }
}
/* Com o banner aberto, o botão flutuante sobe (ver --bdl-cookie-banner-height); encolhemos
   a área de centralização pela mesma medida que o botão ocupa (--bdl-wa-clearance, que já
   inclui a safe-area inferior) para o conteúdo não ficar atrás dele. O padding-block cede
   lugar porque, nessa janela estreita e temporária, cada pixel de folga ajuda o conteúdo a
   caber acima. */
body.bdl-cookies-banner-aberto .erro404 {
  min-height: calc(100vh - 64px - var(--bdl-cookie-banner-height, 0px) - var(--bdl-wa-clearance));
  min-height: calc(100dvh - 64px - var(--bdl-cookie-banner-height, 0px) - var(--bdl-wa-clearance));
  padding-block: 0;
}
body.bdl-cookies-banner-aberto .erro404 h1 { margin-top: 0; margin-bottom: 0; font-size: 1.375rem; }
body.bdl-cookies-banner-aberto .erro404 p { margin-bottom: 0; }
body.bdl-cookies-banner-aberto .erro404__botoes { margin-top: 0; gap: .5rem; }
body.bdl-cookies-banner-aberto .erro404__botoes .bdl-btn { min-height: 44px; padding-block: 10px; }
@media (min-width: 1024px) {
  body.bdl-cookies-banner-aberto .erro404 {
    min-height: calc(100vh - 76px - var(--bdl-cookie-banner-height, 0px) - var(--bdl-wa-clearance));
    min-height: calc(100dvh - 76px - var(--bdl-cookie-banner-height, 0px) - var(--bdl-wa-clearance));
  }
}
.erro404 .bdl-container { max-width: 560px; }
.erro404 h1 { margin-top: 1rem; }
.erro404__botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Consentimento de cookies ---------- */
.rodape__cookies {
  font: inherit; color: var(--bdl-branco); background: none; border: 0;
  padding: .2rem 0; margin: .35rem 0; cursor: pointer; text-align: left; text-decoration: none;
}
.rodape__cookies:hover { text-decoration: underline; }
.rodape__cookies-linha { margin: 0 0 .75rem; }

.bdl-cookies-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--bdl-branco); border-top: 1px solid var(--bdl-borda);
  box-shadow: 0 -12px 32px rgba(3, 75, 55, .16);
  padding: 1.25rem var(--bdl-margem-lateral) calc(1.25rem + var(--bdl-safe-bottom));
}
.bdl-cookies-banner[hidden] { display: none; }
/* Garante espaço de rolagem suficiente para revelar conteúdo (ex.: botões da página 404)
   que, em páginas curtas, ficaria escondido atrás do banner fixo.
   --bdl-cookie-banner-height é medida em tempo real pelo consent.js (ResizeObserver),
   então o espaço reservado acompanha o texto real do banner em qualquer largura. */
body.bdl-cookies-banner-aberto { padding-bottom: calc(var(--bdl-cookie-banner-height, 0px) + 24px); }
.bdl-cookies-banner__in { max-width: var(--bdl-largura-max); margin-inline: auto; display: grid; gap: 1.1rem; }
.bdl-cookies-banner p { margin: 0; font-size: var(--bdl-fs-pequeno); color: var(--bdl-texto); line-height: 1.55; }
.bdl-cookies-banner p strong { color: var(--bdl-verde-escuro); }
.bdl-cookies-banner a { color: var(--bdl-verde-escuro); font-weight: 600; }
.bdl-cookies-banner__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.bdl-cookies-banner__botoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.bdl-cookies-banner__botoes .bdl-btn { min-height: 44px; padding: 10px 22px; font-size: .9375rem; }
.bdl-cookies-link-botao {
  font: inherit; font-weight: 600; color: var(--bdl-verde-escuro); text-align: left;
  background: none; border: 0; padding: .5rem 0; margin: 0;
  min-height: 44px; display: inline-flex; align-items: center;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.bdl-cookies-link-botao:hover { color: var(--bdl-verde-hover); }
@media (min-width: 640px) {
  .bdl-cookies-banner {
    left: 1rem; right: 1rem; bottom: 1rem; max-width: 960px; margin-inline: auto;
    border: 1px solid var(--bdl-borda); border-radius: var(--bdl-raio-card);
    padding: 1.5rem 1.75rem;
  }
  .bdl-cookies-banner__acoes { flex-direction: row; align-items: center; gap: 1.5rem; }
}
@media (min-width: 900px) {
  .bdl-cookies-banner__in { grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .bdl-cookies-banner { animation: bdl-cookies-subir .3s ease-out; }
}
@keyframes bdl-cookies-subir { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.bdl-cookies-modal {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center;
  padding: var(--bdl-margem-lateral); background: rgba(3, 75, 55, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.bdl-cookies-modal[hidden] { display: none; }
.bdl-cookies-modal__caixa {
  position: relative; background: var(--bdl-branco); border-radius: var(--bdl-raio-card);
  box-shadow: 0 24px 64px rgba(3, 75, 55, .35); max-width: 34rem; width: 100%;
  max-height: calc(100vh - 2 * var(--bdl-margem-lateral)); overflow-y: auto; overflow-x: hidden;
  padding: var(--bdl-esp-4);
}
.bdl-cookies-modal h2 { font-size: 1.375rem; margin: 0 0 .5rem; padding-right: 2rem; }
.bdl-cookies-modal > .bdl-cookies-modal__caixa > p { color: var(--bdl-texto-suave); margin-bottom: 0; }
.bdl-cookies-modal__categoria { border: 1px solid var(--bdl-borda); border-radius: var(--bdl-raio-pequeno); padding: 1.1rem 1.25rem; margin-top: 1.1rem; }
.bdl-cookies-modal__categoria--fixa { background: var(--bdl-fundo); }
.bdl-cookies-modal__categoria h3 { font-size: 1rem; margin: 0 0 .4rem; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; color: var(--bdl-verde-escuro); }
.bdl-cookies-modal__categoria p { margin: 0; font-size: var(--bdl-fs-pequeno); color: var(--bdl-texto-suave); }
.bdl-cookies-modal__estado {
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--bdl-verde-escuro); background: var(--bdl-branco);
  border: 1px solid var(--bdl-borda); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.bdl-cookies-modal__toggle { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--bdl-fs-pequeno); font-weight: 600; cursor: pointer; }
.bdl-cookies-modal__toggle input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  width: 42px; height: 25px; border-radius: 999px; background: var(--bdl-borda);
  position: relative; cursor: pointer; transition: background-color .2s;
}
.bdl-cookies-modal__toggle input::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--bdl-branco); box-shadow: 0 1px 3px rgba(3, 75, 55, .35);
  transition: transform .2s;
}
.bdl-cookies-modal__toggle input:checked { background: var(--bdl-verde); }
.bdl-cookies-modal__toggle input:checked::before { transform: translateX(17px); }
.bdl-cookies-modal__toggle input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bdl-branco), 0 0 0 6px var(--bdl-laranja); }
@media (prefers-reduced-motion: reduce) {
  .bdl-cookies-modal__toggle input, .bdl-cookies-modal__toggle input::before { transition: none; }
}
.bdl-cookies-modal__botoes { margin-top: 1.5rem; }
.bdl-cookies-modal__atalhos { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .9rem; }
.bdl-cookies-modal__fechar {
  position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--bdl-verde-escuro); cursor: pointer; transition: background-color .15s;
}
.bdl-cookies-modal__fechar:hover { background: var(--bdl-fundo); }
.bdl-cookies-modal__fechar:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bdl-branco), 0 0 0 5px var(--bdl-laranja); }