/* Reserva com a medida da Montserrat: enquanto a fonte real nao chega, o texto
   ocupa exatamente o mesmo espaco, entao nada se desloca quando ela entra.
   Numeros medidos das duas fontes: largura media 0,5292em (Montserrat) contra
   0,4771em (Arial) -> 110,9%; ascendente 0,968 e descendente 0,251 ajustadas
   na mesma proporcao. */
@font-face{
  font-family:"Montserrat reserva";
  src:local("Arial"),local("Helvetica"),local("Liberation Sans");
  size-adjust:110.9%;
  ascent-override:87.3%;
  descent-override:22.6%;
  line-gap-override:0%;
}
/* =============================================================================
   BH COROAS — HOME 2026
   -----------------------------------------------------------------------------
   DUAS REGRAS GOVERNAM ESTE ARQUIVO.

   1. PROPORCAO AUREA (phi = 1,618)
      · A grade do heroi e da secao de flores e 1 : 1,618 — o texto ocupa 38,2%
        e a imagem 61,8%. E a mesma divisao que o olho aceita como "certa" sem
        saber por que.
      · A escala tipografica sobe por raiz de phi (1,272): 17 - 21,6 - 27,5 -
        35 - 44,5 - 56,6. Nenhum tamanho foi escolhido no olho.
      · O respiro vertical das secoes e 64 x 1,618 = 104px no desktop.
      · O cartao de coroa e 1 : 1,618 entre foto e texto.

   2. PSICOLOGIA DAS CORES — e por que o verde do heroi mudou de tom
      · VERDE PROFUNDO (#2E4D35) no heroi: verde e a cor da natureza e do
        repouso; escurecido, vira solenidade. O tom anterior (#486E4E) era
        claro demais e achatava a pagina.
        O motivo tecnico e mais duro que o estetico: sobre #486E4E o verde
        claro do titulo dava contraste 2,84:1 e o texto bege dava 3,49:1 —
        os dois REPROVAM na WCAG. Sobre #2E4D35 os mesmos tons sobem para
        4,60:1 e 5,66:1 e passam. A paleta e a mesma; so o fundo desceu.
      · BEGE (#D9C7A0) e CREME (#F6F2E7): calor humano, memoria, o oposto do
        clinico. E o que separa uma floricultura de um hospital.
      · VERMELHO (#B3121B) so no preco: vermelho e a cor da decisao. Usado em
        um lugar so, ele vira o ponto onde o olho para. Espalhado, viraria
        alarme — e alarme e a ultima coisa que essa pagina pode transmitir.
        Contraste 6,96:1 sobre branco.
      · VERDE VIVO (#8CC63F) nos acentos: vida, continuidade.
   ============================================================================= */

.bh{--phi:1.618;
  --v9:#0E2413; --v8:#1E3724; --v7:#2E4D35; --v6:#3F6647; --act:#2F7D32;
  --lime:#8CC63F; --lime2:#A8E063; --bege:#D9C7A0; --creme:#F6F2E7;
  --vermelho:#B3121B; --tinta:#16351F; --mut:#54654C; --linha:#DCE6DD;
  --max:1560px; --r:18px;
  font-family:Montserrat,"Montserrat reserva",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased}
.bh *,.bh *::before,.bh *::after{box-sizing:border-box}
.bh img{max-width:100%;display:block}
.bh-wrap{width:min(100% - 56px,var(--max));margin-inline:auto}
.bh-sec{padding:104px 0}
.bh-sec--curta{padding:64px 0}
.bh h1,.bh h2,.bh h3,.bh h4{margin:0;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.bh p{margin:0}

/* escala tipografica em raiz de phi */
.bh-t1{font-size:clamp(32px,4.6vw,56.6px)}
.bh-t2{font-size:clamp(27px,3.2vw,44.5px)}
.bh-t3{font-size:clamp(23px,2.2vw,35px)}
.bh-t4{font-size:clamp(20px,1.7vw,27.5px)}
.bh-lead{font-size:clamp(18px,1.35vw,21.6px);line-height:1.55}

/* ---------------------------------------------------------------- HEROI --- */
.bh-hero{background:var(--v7);color:#fff;padding:56px 0 72px;position:relative;overflow:hidden}
.bh-hero::after{content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;
  background:radial-gradient(60% 100% at 50% 100%,#ffffff12,transparent 70%);pointer-events:none}
.bh-hero h1{text-align:center;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(92deg,var(--lime2) 0%,var(--lime) 46%,#5FBF3E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-transform:uppercase;margin-bottom:52px}
@supports not (background-clip:text){.bh-hero h1{color:var(--lime2)}}
/* O titulo pinta um gradiente DENTRO do texto, e para isso a cor do texto e
   transparente. As tres paradas medem 6,06 / 4,60 / 4,04 sobre o verde do
   heroi — passam. Mas em dois casos o gradiente nao e pintado e o texto some:
   no modo de alto contraste do Windows e quando a impressao ignora fundos.
   Nesses dois, a cor volta a ser solida. */
@media (forced-colors:active){
  .bh-hero h1{background:none;-webkit-text-fill-color:currentColor;color:CanvasText}
}
@media print{
  .bh-hero h1{background:none;-webkit-text-fill-color:currentColor;color:#16351f}
}

/* a grade aurea: 1 para o texto, 1,618 para a foto */
/* A razao aurea agora vem invertida, e por medicao: a coroa e um RETRATO. Na
   coluna maior (920px) ela ocupava 376px e sobravam 272px vazios de cada lado —
   os "buracos". Na coluna menor a sobra cai para ~110px, e o painel arredondado
   atras dela preenche o resto. */
/* Tres colunas: texto | os tres numeros | a coroa. Os numeros passaram a ocupar
   o vao que sobrava entre as folhinhas e o coracao — era ali que estava o vazio.
   A razao aurea continua valendo entre a coluna do texto e a da foto. */
.bh-hero-grid{display:grid;grid-template-columns:minmax(0,1.618fr) auto minmax(0,1fr);
  gap:clamp(26px,2.8vw,52px);align-items:stretch}
/* o "buraco" do layout antigo era isto: a coluna de texto tinha altura livre e
   os itens caiam nas pontas. Agora ela e uma pilha com respiro constante. */
.bh-hero-txt{display:flex;flex-direction:column;gap:24px;justify-content:center}
.bh-hero-txt h2{color:var(--bege);text-transform:uppercase;font-size:clamp(24px,2.1vw,33px);
  line-height:1.28;letter-spacing:.005em}
.bh-checks{display:grid;grid-template-columns:1fr;gap:15px;margin:0;padding:0;list-style:none}
.bh-checks li{display:flex;align-items:flex-start;gap:12px;color:#fff;font-weight:700;
  font-size:15px;letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
.bh-folha{flex:0 0 18px;width:18px;height:18px;margin-top:1px;
  background:var(--lime);border-radius:0 100% 0 100%;transform:rotate(-8deg)}
.bh-hero-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.bh-hero-foto{display:grid;place-items:center;background:#ffffff0d;border:1px solid #ffffff1f;
  border-radius:24px;padding:clamp(18px,2vw,32px)}
.bh-hero-foto img{width:auto;height:auto;max-height:clamp(280px,33vw,520px);max-width:100%;
  object-fit:contain;filter:drop-shadow(0 26px 46px #0000004d)}
.bh-hero-frases{margin-top:56px;text-align:center;display:flex;flex-direction:column;gap:10px}
.bh-hero-frases span{font-style:italic;font-weight:600;font-size:clamp(19px,1.7vw,27.5px)}
.bh-hero-frases span:first-child{color:#BFE8A8}
.bh-hero-frases span:last-child{color:var(--lime2)}

/* ---------------------------------------------------------------- BOTOES --- */
.bh-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;border-radius:100px;font-weight:700;font-size:15px;
  text-decoration:none;letter-spacing:.02em;border:2px solid transparent;
  transition:transform .15s,background-color .15s,color .15s}
.bh-btn:hover{transform:translateY(-2px)}
.bh-btn:focus-visible{outline:3px solid var(--lime2);outline-offset:3px}
.bh-btn--wpp{background:#2E8B33;color:#fff}
.bh-btn--wpp:hover{background:#24702a;color:#fff}
.bh-btn--claro{background:transparent;color:#fff;border-color:#ffffff66}
.bh-btn--claro:hover{background:#ffffff1a;color:#fff}
.bh-btn--escuro{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.bh-btn--escuro:hover{background:var(--tinta);color:#fff}
.bh-zap{width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:#fff;
  box-shadow:inset -5px 4px 0 currentColor}

/* -------------------------------------------------------------- CABECALHO -- */
.bh-tit{text-align:center;max-width:940px;margin:0 auto 56px}
.bh-tit p{color:var(--mut);margin-top:14px}
.bh-tit--claro p{color:#D6E6D9}

/* ---------------------------------------------------------------- COROAS --- */
.bh-produtos{background:#fff}
.bh-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.bh-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;max-width:1100px;margin:36px auto 0}
.bh-card{background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:26px 22px 28px;display:flex;flex-direction:column;align-items:center;
  text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
.bh-card:hover{border-color:var(--act);box-shadow:0 18px 40px #16351f14;transform:translateY(-3px)}
/* a foto ocupa 1,618 do cartao e o texto 1 — a mesma razao do heroi */
/* A foto estava VAZANDO da moldura: com max-height:100% e height:auto o
   navegador media 392, 411 e 404px dentro de uma caixa de 340 — e o preco
   ficava atras da coroa. Agora a caixa manda: width e height 100% com contain,
   overflow fechado. Efeito colateral desejado: as seis coroas passam a ocupar
   exatamente a mesma altura, que era o outro pedido. */
.bh-card-foto{width:100%;height:340px;display:block;overflow:hidden;margin-bottom:20px}
.bh-card-foto img{width:100%;height:100%;object-fit:contain}
.bh-card--g .bh-card-foto{height:420px}
/* Nome em cima, preco embaixo: o preco deixa de aparecer no meio das flores. */
.bh-card h3{color:var(--tinta);font-size:clamp(19px,1.5vw,24px);text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:10px}
.bh-preco{color:var(--vermelho);font-weight:700;font-size:clamp(26px,2.1vw,35px);
  line-height:1;margin-bottom:8px;letter-spacing:-.02em}
.bh-medida{color:var(--mut);font-weight:600;font-size:14.5px;margin-bottom:18px}
.bh-card .bh-btn{margin-top:auto}

/* -------------------------------------------------------------- ENTREGA --- */
.bh-entrega{background:var(--creme)}
.bh-resposta{text-align:center;min-height:26px;color:var(--tinta);font-weight:600}
.bh-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.bh-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  background:#fff;border:1px solid var(--linha);border-radius:100px;text-decoration:none;
  color:var(--tinta);font-weight:600;font-size:14.5px}
.bh-chips a:hover{border-color:var(--act);color:var(--act)}

/* --------------------------------------------------------------- 24 HORAS -- */
.bh-24h{background:#fff;text-align:center}
.bh-24h p{max-width:820px;margin:18px auto 30px;color:var(--mut)}

/* ---------------------------------------------------------------- FLORES --- */
/* Aqui a razao aurea vem invertida: a foto (menor arquivo) fica na coluna de 1
   e o texto na de 1,618. A foto original tem 222x227 — ampliar alem disso
   embaca. O que cresce e a SECAO, nao o arquivo. */
.bh-flores{background:var(--v7);color:#fff}
.bh-flores-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:clamp(32px,4vw,72px);align-items:center}
.bh-flores-foto{background:#ffffff10;border:1px solid #ffffff2e;border-radius:var(--r);
  padding:26px;display:grid;place-items:center}
.bh-flores-foto img{width:100%;max-width:300px;border-radius:12px}
.bh-flores h2{color:#fff;margin-bottom:20px}
.bh-flores p{color:#DCEADD;margin-bottom:16px}
.bh-flores-lista{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.bh-flores-lista li{background:#ffffff17;border:1px solid #ffffff30;border-radius:100px;
  padding:8px 16px;font-size:14.5px;font-weight:600}

/* ---------------------------------------------------------------- EQUIPE --- */
.bh-equipe{background:var(--creme)}
.bh-pessoas{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.bh-pessoa{text-align:center}
/* moldura 1 : 1,618 de altura — a foto entra inteira, sem corte no rosto */
/* A moldura precisa mandar na altura. Com display:grid a foto empurrava o
   quadro e as quatro ficavam com alturas diferentes (543, 549, 560, 550).
   Com position:absolute a proporcao 1:1,35 vale para as quatro. */
.bh-pessoa-foto{position:relative;aspect-ratio:1/1.35;background:#fff;border-radius:var(--r);
  overflow:hidden;box-shadow:0 16px 34px #16351f1f;margin-bottom:18px;border:1px solid #e6ded0}
.bh-pessoa-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 20%}
.bh-pessoa strong{display:block;font-size:19px;color:var(--tinta);font-weight:700}
.bh-pessoa span{display:block;color:var(--mut);font-weight:600;font-size:15px;margin-top:3px}

/* ----------------------------------------------------------------- GUIAS --- */
.bh-guias{background:#fff}
.bh-guias-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bh-guia{display:block;background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  padding:30px;text-decoration:none;transition:border-color .15s,transform .15s}
.bh-guia:hover{border-color:var(--act);transform:translateY(-3px)}
.bh-guia h3{color:var(--tinta);font-size:20px;margin-bottom:10px}
.bh-guia p{color:var(--mut);font-size:15.5px;margin-bottom:14px}
.bh-guia span{color:var(--act);font-weight:700;font-size:14.5px}

/* ------------------------------------------------------------------- FAQ --- */
.bh-faq{background:var(--creme)}
.bh-faq-lista{max-width:980px;margin:0 auto}
.bh-faq details{background:#fff;border:1px solid var(--linha);border-radius:14px;margin-bottom:12px}
.bh-faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:700;
  color:var(--tinta);display:flex;justify-content:space-between;gap:16px;min-height:60px;
  align-items:center;font-size:16.5px}
.bh-faq summary::-webkit-details-marker{display:none}
.bh-faq summary::after{content:"+";font-size:26px;color:var(--act);line-height:1;font-weight:400}
.bh-faq details[open] summary::after{content:"−"}
.bh-faq summary:focus-visible{outline:3px solid var(--act);outline-offset:-3px;border-radius:14px}
.bh-faq-r{padding:0 24px 22px;color:var(--mut)}

/* ---------------------------------------------------------- DIFERENCIAIS --- */
.bh-dif{background:#fff}
.bh-dif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.bh-dif-item{padding:34px 26px;border:1px solid var(--linha);border-radius:var(--r)}
.bh-dif-item h3{color:var(--tinta);font-size:21px;margin-bottom:10px}
.bh-dif-item p{color:var(--mut);font-size:15.5px}

/* ---------------------------------------------------------------- RODAPE --- */
.bh-footer{background:var(--v9);color:#fff;padding:88px 0 34px}
.bh-footer h2{color:#fff;font-size:clamp(22px,1.9vw,30px);margin-bottom:8px}
.bh-footer-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:clamp(30px,4vw,70px);
  align-items:start;padding-bottom:52px;border-bottom:1px solid #ffffff24}
.bh-footer-marca p{color:#CBDCCE;margin-top:14px;max-width:44ch}
.bh-footer-contato{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.bh-footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bh-footer-links h3{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:14px}
.bh-footer-links a{display:flex;align-items:center;min-height:34px;color:#CBDCCE;
  text-decoration:none;font-size:15px}
.bh-footer-links a:hover{color:#fff;text-decoration:underline}

/* as 34 cidades e os 117 locais, distribuidos na horizontal */
.bh-locais{padding:52px 0 44px;border-bottom:1px solid #ffffff24}
.bh-locais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:30px 26px;margin-top:30px}
.bh-cidade h4{font-size:15px;margin-bottom:8px}
.bh-cidade h4 a{color:var(--lime2);text-decoration:none}
.bh-cidade h4 a:hover{text-decoration:underline}
.bh-cidade ul{margin:0;padding:0;list-style:none}
.bh-cidade li{color:#9FBAA4;font-size:13.5px;line-height:1.5;margin-bottom:3px}
.bh-locais-nota{color:#9FBAA4;font-size:13.5px;margin-top:26px;max-width:88ch}
.bh-bottom{padding-top:26px;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  color:#9FBAA4;font-size:13.5px}

/* ----------------------------------------------------------- RESPONSIVO --- */
@media(max-width:1200px){
  .bh-grid4{grid-template-columns:repeat(2,1fr)}
  .bh-pessoas{grid-template-columns:repeat(2,1fr)}
  .bh-guias-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .bh-wrap{width:min(100% - 32px,var(--max))}
  .bh-sec{padding:64px 0}
  .bh-hero-grid,.bh-flores-grid,.bh-footer-topo{grid-template-columns:1fr}
  .bh-hero-foto{order:-1}
  .bh-hero h1{margin-bottom:34px}
  .bh-dif-grid,.bh-footer-links{grid-template-columns:1fr}
  .bh-guias-grid{grid-template-columns:1fr}
  .bh-grid2{grid-template-columns:1fr;gap:24px}
}
@media(max-width:620px){
  .bh-grid4{grid-template-columns:1fr}
  .bh-pessoas{grid-template-columns:repeat(2,1fr);gap:20px}
  .bh-card-foto{height:280px}
  .bh-card--g .bh-card-foto{height:320px}
  .bh-btn{width:100%}
  .bh-hero-acoes .bh-btn{width:100%}
  .bh-locais-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .bh *{transition:none!important;animation:none!important}
}

/* rotulo so para leitor de tela */
.bh-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ----------------------------------------------------------------------------
   O Oxygen fecha o conteudo numa caixa de 1120px e a HOME nova precisa da
   largura inteira. Sem isto a grade aurea era calculada dentro de 1024px.
   ---------------------------------------------------------------------------- */
body .bde-section,
body .bde-section .bde-section__inner-content,
body .bde-section .bde-container,
body .bde-section .bde-section__container,
body .bde-section .section-container,
body .section-container,
body .oxy-html-code,
body .oxy-post, body .oxygen-page, body #oxy-main, body #main, body .site-main{
  max-width:none!important; width:100%!important; padding:0!important; margin:0!important;
}
body{margin:0}

/* links do rodape: 24px minimo de alvo mesmo no desktop (WCAG 2.5.8) */
.bh-cidade h4 a{display:inline-flex;align-items:center;min-height:26px}
.bh-cidade li{min-height:22px}

/* Tres numeros embaixo dos botoes: fecham a diferenca de altura entre as duas
   colunas do heroi (era 368px de texto contra 560px de foto — a "sobra" que
   voce viu como buraco) e dizem, em tres palavras, o que a empresa promete. */
.bh-hero-mini{display:flex;flex-direction:column;justify-content:center;gap:26px;
  min-width:172px;padding-left:26px;border-left:1px solid #ffffff26}
.bh-hero-mini div{position:relative}
.bh-hero-mini strong{display:block;font-size:clamp(21px,1.6vw,27.5px);color:var(--lime2);
  line-height:1.05;text-shadow:0 2px 10px #0000004d}
.bh-hero-mini span{display:block;color:#DCEADD;font-size:12.5px;font-weight:700;margin-top:6px;
  text-transform:uppercase;letter-spacing:.07em;line-height:1.35;max-width:19ch}

/* No celular a lista dos 117 locais somava 6.600px de rolagem. Ela nasce aberta
   (e continua aberta sem JavaScript, e para o Google) e so se fecha em telas
   estreitas — o conteudo continua no HTML, apenas recolhido. */
.bh-locais-det summary{list-style:none;cursor:pointer;display:block;padding-bottom:6px}
.bh-locais-det summary::-webkit-details-marker{display:none}
.bh-locais-det summary span{display:block;color:#CBDCCE;max-width:70ch;margin-top:6px;font-size:15px}
.bh-locais-det summary::after{content:"Ver a lista completa ▾";display:inline-block;margin-top:14px;
  color:var(--lime2);font-weight:700;font-size:14px}
.bh-locais-det[open] summary::after{content:"Recolher a lista ▴"}
.bh-locais-det summary:focus-visible{outline:3px solid var(--lime2);outline-offset:4px;border-radius:8px}
@media(min-width:901px){.bh-locais-det summary::after{display:none}}

/* Coluna de dados do rodape: telefone, e-mail e CNPJ — os mesmos do rodape
   antigo, agora ao lado da marca em vez de empilhados no centro. */
.bh-footer-dados{display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  justify-content:center}
.bh-footer-dados a{text-decoration:none;display:inline-flex;align-items:center;min-height:34px}
.bh-fone{color:var(--lime2);font-size:clamp(22px,1.7vw,28px);font-weight:700;letter-spacing:-.01em}
.bh-fone:hover{color:#fff}
.bh-mail{color:#fff;font-size:17px;font-weight:600}
.bh-mail:hover{text-decoration:underline}
.bh-cnpj{color:#9FBAA4;font-size:14px}
@media(max-width:900px){.bh-footer-dados{align-items:flex-start;margin-top:8px}}

/* =============================================================================
   ACABAMENTO — RELEVO E PROFUNDIDADE
   -----------------------------------------------------------------------------
   Sombra de verdade tem duas camadas: uma curta e escura, que cola o objeto na
   pagina, e uma longa e clara, que da a distancia. Uma sombra so, larga e
   cinzenta, e o que faz um site parecer datado.

   O relevo aqui e contido de proposito. O assunto e luto: a pagina pode ser
   elegante, nao pode ser chamativa. Por isso nada de bisel, nada de brilho
   forte — so uma linha branca de 1px no topo de cada cartao (a "luz de cima",
   que e o que o olho le como volume) e sombras suaves.
   ============================================================================= */
.bh{--sombra-1:0 1px 2px #16351f0f, 0 8px 16px -6px #16351f14, 0 24px 48px -20px #16351f1f;
    --sombra-2:0 1px 2px #16351f14, 0 14px 26px -8px #16351f1f, 0 40px 70px -28px #16351f2e;
    --luz:inset 0 1px 0 #ffffffe6}

/* ---- cartoes de coroa ---- */
.bh-card{box-shadow:var(--sombra-1),var(--luz);border-color:#e6ede7;
  background:linear-gradient(180deg,#fff 0%,#fcfdfc 100%)}
.bh-card:hover{box-shadow:var(--sombra-2),var(--luz);border-color:#cfe0d2;transform:translateY(-4px)}
.bh-card-foto{border-radius:14px;background:linear-gradient(180deg,#f7faf7 0%,#eef4ef 100%);
  box-shadow:inset 0 1px 3px #16351f14;padding:14px}

/* ---- botoes com volume ---- */
.bh-btn--wpp{background:linear-gradient(180deg,#2b8434 0%,#175a20 100%);
  box-shadow:0 1px 0 #ffffff40 inset,0 6px 14px -4px #14532d66,0 12px 26px -12px #14532d80}
.bh-btn--wpp:hover{background:linear-gradient(180deg,#25742c 0%,#134c1a 100%);
  box-shadow:0 1px 0 #ffffff40 inset,0 10px 22px -6px #14532d73,0 18px 34px -14px #14532d8c}
.bh-btn--wpp:active{transform:translateY(0);box-shadow:0 2px 6px -2px #14532d99 inset}
.bh-btn--escuro{background:linear-gradient(180deg,#ffffff 0%,#f4f7f4 100%);
  box-shadow:0 1px 2px #16351f14,0 6px 14px -8px #16351f26}
.bh-btn--escuro:hover{box-shadow:0 8px 20px -8px #16351f40}

/* ---- consulta de entrega: uma ficha branca, e so ---- */
.bh-consulta{max-width:720px;margin:0 auto;background:#fff;border:1px solid #e6ede7;
  border-radius:22px;padding:clamp(26px,3vw,40px);
  box-shadow:var(--sombra-2),var(--luz)}
.bh-resposta{min-height:24px;font-size:15.5px}
/* Esta regra pintava de verde QUALQUER link dentro da resposta — inclusive o
   botao verde de WhatsApp, que ficava com texto verde sobre fundo verde. O
   :not(.bh-btn) deixa os botoes com a cor deles. */
.bh-resposta a:not(.bh-btn){color:var(--act);font-weight:700}
.bh-entrega-link{text-align:center;margin-top:18px}
.bh-entrega-link a{display:inline-flex;align-items:center;min-height:32px;color:var(--mut);
  font-size:14.5px;font-weight:600;text-decoration:none;border-bottom:1px solid #cfd9d0;
  padding-bottom:2px}
.bh-entrega-link a:hover{color:var(--act);border-color:var(--act)}

/* ---- flores da estacao: painel de vidro sobre o verde ---- */
.bh-flores-foto{background:linear-gradient(180deg,#ffffff1f 0%,#ffffff0d 100%);
  box-shadow:0 1px 0 #ffffff33 inset,0 24px 48px -24px #00000073;
  backdrop-filter:blur(2px)}
.bh-flores-foto img{box-shadow:0 18px 36px -18px #000000a6}
.bh-flores-lista li{background:linear-gradient(180deg,#ffffff24 0%,#ffffff12 100%);
  box-shadow:0 1px 0 #ffffff2e inset}

/* ---- heroi: a coroa ganha um painel com a mesma linguagem ---- */
.bh-hero-foto{background:linear-gradient(180deg,#ffffff17 0%,#ffffff08 100%);
  box-shadow:0 1px 0 #ffffff2e inset,0 30px 60px -30px #00000099}

/* ---- equipe ---- */
.bh-pessoa-foto{box-shadow:var(--sombra-2),var(--luz);transition:transform .18s,box-shadow .18s}
.bh-pessoa:hover .bh-pessoa-foto{transform:translateY(-4px);
  box-shadow:0 1px 2px #16351f1a,0 20px 36px -10px #16351f33,0 50px 90px -34px #16351f3d}

/* ---- guias ---- */
.bh-guia{background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%);
  box-shadow:var(--sombra-1),var(--luz)}
.bh-guia:hover{box-shadow:var(--sombra-2),var(--luz)}

/* ---- FAQ ---- */
.bh-faq details{box-shadow:var(--sombra-1),var(--luz);border-color:#e6ede7;
  transition:box-shadow .18s}
.bh-faq details[open]{box-shadow:var(--sombra-2),var(--luz)}

/* ---- diferenciais ---- */
.bh-dif-item{background:linear-gradient(180deg,#fff 0%,#fafcfa 100%);
  box-shadow:var(--sombra-1),var(--luz);border-color:#e6ede7;
  transition:transform .18s,box-shadow .18s}
.bh-dif-item:hover{transform:translateY(-3px);box-shadow:var(--sombra-2),var(--luz)}

/* ---- heroi em tela estreita: as tres colunas viram uma pilha ---- */
@media(max-width:1100px){
  .bh-hero-grid{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr)}
  .bh-hero-mini{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:24px 40px;
    padding:20px 0 0;border-left:0;border-top:1px solid #ffffff26;min-width:0}
  .bh-hero-mini div{flex:1 1 160px}
}
@media(max-width:900px){
  .bh-hero-mini{order:3}
  .bh-hero-foto{order:-1}
}
@media(max-width:620px){
  .bh-hero-mini div{flex:1 1 100%}
  .bh-consulta{padding:22px;border-radius:18px}
}

/* A regra de 1100px foi escrita depois da de 900px e, no celular, as duas
   valem — a ultima ganhava e o heroi ficava com duas colunas de 186 e 115px.
   Esta reafirma a pilha unica abaixo de 900. */
@media(max-width:900px){
  .bh-hero-grid{grid-template-columns:1fr!important}
  .bh-hero-mini{grid-column:auto}
}

/* =============================================================================
   RODAPE COMPACTO — como no site antigo
   A lista dos 117 locais media 2.319px so ela. Saiu daqui e ficou em
   /onde-entregamos/, com o link na secao de consulta. O rodape volta a ser o
   que sempre foi: o cartao de visita, centralizado.
   ============================================================================= */
.bh-footer{background:#032109;padding:52px 0 44px}
.bh-rod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.bh-rod-ico{line-height:0;filter:drop-shadow(0 6px 16px #25d36640);transition:transform .18s}
.bh-rod-ico:hover{transform:translateY(-2px)}
.bh-rod-ico:focus-visible{outline:3px solid #25D366;outline-offset:6px;border-radius:50%}
.bh-btn--rod{background:linear-gradient(180deg,#1a6b5e 0%,#0f4b41 100%);color:#fff;
  box-shadow:0 1px 0 #ffffff2e inset,0 10px 24px -10px #000000a6;margin-top:2px}
.bh-btn--rod:hover{background:linear-gradient(180deg,#1f7d6e 0%,#125a4e 100%);color:#fff}
.bh-rod-fone{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;
  color:#3EC5B0;font-size:clamp(26px,2.2vw,34px);font-weight:700;text-decoration:none;
  letter-spacing:-.01em;text-shadow:0 2px 12px #00000066}
.bh-rod-fone:hover{color:#6FE0CD}
.bh-rod-dado{color:#fff;font-weight:700;font-size:clamp(17px,1.3vw,21px)}
.bh-rod-mail{color:#fff;font-weight:700;font-size:clamp(17px,1.3vw,21px);text-decoration:none;
  display:inline-flex;align-items:center;min-height:34px}
.bh-rod-mail:hover{text-decoration:underline}
.bh-rod-min{color:#E4EDE5;font-size:15px;margin-top:2px}
.bh-rod-min:first-of-type{margin-top:14px}
.bh-rod-autor{color:#E2574C;font-size:14px;font-weight:600}

/* =============================================================================
   PAGINAS DE CIDADE — o que muda em relacao a inicial
   ============================================================================= */
.bh-pular{position:absolute;left:8px;top:-60px;background:#fff;color:var(--tinta);
  padding:10px 14px;z-index:9999;font-weight:800;border-radius:0 0 10px 10px}
.bh-pular:focus{top:0}
.bh-hero-olho{text-align:center;color:var(--bege);font-weight:700;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.bh-hero h1{margin-bottom:44px}

/* lista de locais na consulta da cidade */

.bh-resposta{margin-top:4px}
.bh-ok{display:flex;align-items:flex-start;gap:12px;color:var(--tinta);font-weight:700;
  font-size:17px;line-height:1.45;text-align:left;background:#f2f9f3;border:1px solid #cfe6d3;
  border-radius:14px;padding:16px 18px;box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px #16351f33}
.bh-tique{flex:0 0 22px;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--act);position:relative}
.bh-tique::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.bh-aviso{color:var(--mut);font-weight:600;text-align:center}
.bh-resp-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;justify-content:center}

/* o texto da cidade */
.bh-artigo-sec{background:#fff}
.bh-artigo{max-width:820px;margin:0 auto;font-size:17.5px;line-height:1.75;color:#33413a}
.bh-artigo h2{color:var(--tinta);font-size:clamp(22px,1.9vw,28px);margin:38px 0 14px}
.bh-artigo h2:first-child{margin-top:0}
.bh-artigo h3{color:var(--g8);font-size:19px;margin:26px 0 10px}
.bh-artigo p{margin:0 0 16px}
.bh-artigo ul{margin:0 0 20px;padding-left:22px}
.bh-artigo li{margin-bottom:7px}
.bh-artigo a{color:var(--act);font-weight:600}

@media(max-width:620px){
  .bh-resp-acoes .bh-btn{width:100%}
}

/* =============================================================================
   BARRA DO TOPO
   Ela nascia com o CSS embutido pelo injetor, que so roda na pagina inicial.
   Nas paginas de cidade o HTML vinha sem estilo nenhum — logo, sem fundo, sem
   alinhamento e com alvos de 20px. Agora o estilo mora aqui e vale para todas.
   ============================================================================= */
.bxt-barra{position:sticky;top:0;z-index:9000;background:#fff;
  border-bottom:1px solid #e2eae3;box-shadow:0 1px 0 #0f281a0a}
.bxt-in{max-width:1560px;margin:0 auto;padding:9px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.bxt-marca{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.bxt-flor{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#f7f3e6 0 34%,#2f7d32 36% 100%);
  box-shadow:inset 0 0 0 3px #fff}
.bxt-nome{font:800 1.02rem/1 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.04em;color:#16351f}
.bxt-sub{font:600 .74rem/1 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#607166;padding-left:10px;margin-left:2px;border-left:1px solid #dde6df}
.bxt-dir{display:flex;align-items:center;gap:14px}
.bxt-tel{font:700 .92rem/1 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#16351f;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.bxt-tel:hover{color:#2f7d32}
.bxt-wpp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;
  border-radius:100px;color:#fff;text-decoration:none;
  font:800 .92rem/1 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(180deg,#237a30 0%,#175620 100%);
  box-shadow:0 1px 0 #ffffff40 inset,0 6px 14px -6px #14532d66}
.bxt-wpp:hover{background:linear-gradient(180deg,#1d6b29 0%,#123f1a 100%);color:#fff}
.bxt-wpp:focus-visible,.bxt-tel:focus-visible,.bxt-marca:focus-visible{
  outline:3px solid #2f7d32;outline-offset:3px}
.bxt-ico{width:15px;height:15px;flex:0 0 15px;border-radius:50%;background:#fff;
  box-shadow:inset -4px 3px 0 #1f7a3d}
@media(max-width:760px){
  .bxt-in{padding:8px 14px;gap:10px}
  .bxt-sub,.bxt-tel{display:none}
  .bxt-wpp{padding:0 16px}
  .bxt-nome{font-size:.95rem}
}
@media(prefers-reduced-motion:reduce){.bxt-barra{position:static}}


/* =============================================================================
   CONSULTA DE ENTREGA
   -----------------------------------------------------------------------------
   O <select> do navegador nao aceita meio-termo: ou voce o estiliza inteiro
   (appearance:none e a seta desenhada a mao) ou ele volta ao visual do sistema
   e destoa de tudo em volta. Foi o que aconteceu — o CSS antigo apontava para
   uma classe que o HTML deixou de usar, e o campo apareceu cru.

   Os dois campos agora sao gemeos: mesma altura, mesma borda, mesmo raio, mesmo
   tipo. Cada um tem um rotulo visivel em cima, porque um campo sem rotulo obriga
   a pessoa a adivinhar o que ele quer — e essa pessoa esta com pressa e abalada.
   ============================================================================= */
.bh-consulta{max-width:800px;margin:0 auto;background:#fff;border:1px solid #e6ede7;
  border-radius:22px;padding:clamp(24px,2.6vw,36px);
  box-shadow:var(--sombra-2),var(--luz)}

.bh-campos{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end}
.bh-campo{display:flex;flex-direction:column;gap:9px;min-width:0}
.bh-campo label{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);padding-left:2px}

/* os dois campos partilham a mesma pele */
.bh-campo select,.bh-campo input{width:100%;min-width:0;height:58px;padding:0 18px;
  border:1.5px solid #dbe5dc;border-radius:14px;background:#fff;color:var(--tinta);
  font:600 16px/1 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:inset 0 2px 4px #16351f0d;transition:border-color .15s,box-shadow .15s;
  appearance:none;-webkit-appearance:none}
.bh-campo input::placeholder{color:#93a396;font-weight:500}
.bh-campo select:hover,.bh-campo input:hover{border-color:#c2d4c5}
.bh-campo select:focus,.bh-campo input:focus{outline:none;border-color:var(--act);
  box-shadow:inset 0 2px 4px #16351f0d,0 0 0 4px #2f7d321f}
.bh-campo select:invalid,.bh-campo select option[value=""]{color:#93a396}

/* a seta, desenhada — sem ela o select some visualmente */
.bh-sel{position:relative}
.bh-sel select{padding-right:48px;text-overflow:ellipsis}
.bh-sel::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-right:2px solid var(--g7);border-bottom:2px solid var(--g7);
  transform:rotate(45deg);pointer-events:none;transition:border-color .15s}
.bh-sel:hover::after{border-color:var(--act)}

/* o "ou" separa sem competir */
.bh-ou{align-self:end;height:58px;display:flex;align-items:center;justify-content:center}
.bh-ou span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#f4f8f4;border:1px solid #e2eae3;color:var(--mut);
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}

/* o botao e a acao principal do bloco: verde cheio */
.bh-btn--acao{width:100%;min-height:58px;margin-top:20px;
  background:linear-gradient(180deg,#2f7d32 0%,#1c5722 100%);color:#fff;font-size:16px;
  box-shadow:0 1px 0 #ffffff40 inset,0 8px 18px -8px #14532d80,0 16px 32px -16px #14532d99}
.bh-btn--acao:hover{background:linear-gradient(180deg,#2a7230 0%,#164a1c 100%);color:#fff;
  box-shadow:0 1px 0 #ffffff40 inset,0 12px 26px -8px #14532d8c,0 22px 40px -18px #14532da6}
.bh-btn--acao:active{transform:translateY(0);box-shadow:0 3px 8px -2px #14532da6 inset}

.bh-resposta{margin-top:20px}
.bh-resposta:empty{margin-top:0}

@media(max-width:760px){
  .bh-campos{grid-template-columns:1fr;gap:14px}
  .bh-ou{height:auto;margin:2px 0}
  .bh-ou span{width:34px;height:34px}
}

/* A frase que abre a lista de locais na pagina da cidade. */
.bh-onde{font-weight:700;color:var(--tinta);margin:0 0 12px}

/* Lista de municipios da pagina "Onde entregamos" */
.bh-municipios{background:var(--creme)}
.bh-mun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
.bh-mun{background:#fff;border:1px solid #e6ede7;border-radius:16px;padding:22px 24px;
  box-shadow:var(--sombra-1),var(--luz)}
.bh-mun h3{font-size:17px;margin-bottom:10px}
.bh-mun h3 a{color:var(--g8);text-decoration:none;display:inline-flex;align-items:center;min-height:26px}
.bh-mun h3 a:hover{color:var(--act);text-decoration:underline}
.bh-mun ul{margin:0;padding:0;list-style:none}
.bh-mun li{color:var(--mut);font-size:14.5px;line-height:1.5;margin-bottom:5px;padding-left:14px;
  position:relative}
.bh-mun li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:#bcd0bf}
.bh-bairro{color:#8a998e}
@media(max-width:620px){.bh-mun-grid{grid-template-columns:1fr;gap:18px}}

/* =============================================================================
   PAGINA DE ARTIGO
   -----------------------------------------------------------------------------
   O texto estava vivo; a pagina e que nao estava. Um bloco unico de 560 palavras
   com titulos do mesmo peso do corpo nao da ao leitor nenhuma pista de onde ele
   esta — e quem le isso esta com pressa e abalado, nao vai caçar informacao.

   O que muda aqui e, em ordem de importancia:
     · um sumario preso na lateral, que acende a secao em que voce esta;
     · a primeira frase maior, para o texto ter um comeco;
     · titulos com um traco verde acima, que separam de longe;
     · listas com marcador proprio e o termo em destaque;
     · uma chamada no fim, porque quem leu ate ali esta decidindo.
   ============================================================================= */
.bh-artigo-sec{background:#fff}
.bh-leitura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);
  gap:clamp(32px,4vw,72px);align-items:start;max-width:1180px;margin:0 auto}
.bh-leitura--solo{grid-template-columns:minmax(0,1fr);max-width:820px}
.bh-lateral{position:sticky;top:88px}

/* ---- sumario ---- */
.bh-sumario{background:linear-gradient(180deg,#f7faf7 0%,#f1f6f2 100%);
  border:1px solid #e2eae3;border-radius:18px;padding:24px 26px;
  box-shadow:var(--sombra-1),var(--luz)}
.bh-sumario-tit{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);margin-bottom:14px}
.bh-sumario ol{margin:0;padding:0;list-style:none;counter-reset:s}
.bh-sumario li{counter-increment:s;margin-bottom:2px}
.bh-sumario a{display:flex;gap:11px;align-items:baseline;padding:9px 10px;margin-left:-10px;
  border-radius:10px;color:var(--tinta);text-decoration:none;font-size:15px;font-weight:600;
  line-height:1.4;min-height:38px;transition:background-color .15s,color .15s}
.bh-sumario a::before{content:counter(s);flex:0 0 auto;font-size:12px;font-weight:800;
  color:var(--g7);opacity:.65;min-width:14px}
.bh-sumario a:hover{background:#e7f0e8;color:var(--act)}
.bh-sumario a:focus-visible{outline:3px solid var(--act);outline-offset:2px}
.bh-sumario a[aria-current="true"]{background:var(--g9);color:#fff}
.bh-sumario a[aria-current="true"]::before{color:var(--lime2);opacity:1}

/* ---- o texto ---- */
.bh-artigo{max-width:none;font-size:18px;line-height:1.78;color:#33413a}
/* a primeira frase e o convite: ela e maior que o resto */
.bh-artigo > p:first-child{font-size:21px;line-height:1.6;color:var(--tinta);font-weight:500;
  margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--linha)}
.bh-artigo h2{color:var(--tinta);font-size:clamp(23px,2vw,30px);margin:46px 0 16px;
  scroll-margin-top:96px;position:relative;padding-top:20px}
.bh-artigo h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:4px;
  border-radius:2px;background:linear-gradient(90deg,var(--act),var(--lime))}
.bh-artigo h2:first-child{margin-top:0}
.bh-artigo h3{color:var(--g8);font-size:20px;margin:30px 0 10px}
.bh-artigo p{margin:0 0 18px}
.bh-artigo strong{color:var(--g9);font-weight:700}
.bh-artigo a{color:var(--act);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.bh-artigo a:hover{color:var(--g9)}

/* listas: marcador proprio, e o termo em destaque ganha respiro */
.bh-artigo ul{margin:0 0 24px;padding:0;list-style:none}
.bh-artigo ul li{position:relative;padding-left:26px;margin-bottom:11px}
.bh-artigo ul li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;
  background:var(--lime);border-radius:0 100% 0 100%;transform:rotate(-8deg)}
.bh-artigo ol{margin:0 0 24px;padding-left:24px}
.bh-artigo ol li{margin-bottom:11px;padding-left:4px}
.bh-artigo ol li::marker{color:var(--act);font-weight:800}

/* qualquer bloco solto dentro do texto vira um destaque */
.bh-artigo > div{background:var(--creme);border-left:4px solid var(--act);
  border-radius:0 14px 14px 0;padding:20px 24px;margin:0 0 26px;color:var(--tinta);
  font-size:17px;box-shadow:var(--sombra-1)}
.bh-artigo > div p:last-child{margin-bottom:0}

/* ---- chamada do fim ---- */
.bh-ctafim{background:var(--creme)}
.bh-ctafim-cx{max-width:1180px;margin:0 auto;background:linear-gradient(135deg,var(--v8) 0%,var(--v7) 100%);
  border-radius:22px;padding:clamp(28px,3vw,44px);display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between;
  box-shadow:0 1px 0 #ffffff1f inset,0 24px 50px -24px #16351f80}
.bh-ctafim-cx h2{color:#fff;margin-bottom:8px}
.bh-ctafim-cx p{color:#D6E6D9;max-width:56ch}
.bh-ctafim-bt{display:flex;flex-wrap:wrap;gap:12px}
.bh-ctafim-bt .bh-btn--escuro{background:transparent;color:#fff;border-color:#ffffff59;box-shadow:none}
.bh-ctafim-bt .bh-btn--escuro:hover{background:#ffffff1f;color:#fff}

@media(max-width:1000px){
  .bh-leitura{grid-template-columns:minmax(0,1fr);max-width:760px}
  .bh-lateral{position:static}
  .bh-sumario{padding:20px 22px}
  .bh-sumario ol{columns:2;column-gap:20px}
  .bh-sumario li{break-inside:avoid}
}
@media(max-width:620px){
  .bh-sumario ol{columns:1}
  .bh-artigo{font-size:17px}
  .bh-artigo > p:first-child{font-size:19px}
  .bh-ctafim-cx{flex-direction:column;align-items:flex-start}
  .bh-ctafim-bt{width:100%}
  .bh-ctafim-bt .bh-btn{width:100%}
}

/* =============================================================================
   ONDE ENTREGAMOS NA CIDADE
   -----------------------------------------------------------------------------
   A informacao estava certa e a apresentacao era de rodape: uma lista com
   marcador, dentro do texto corrido. Cada local passa a ser uma linha propria,
   com o tipo e o bairro, e as duas familias — cemiterio e velorio — ficam em
   colunas separadas, porque quem procura ja sabe para qual das duas vai.

   O primeiro bloco e o endereco livre, de proposito: era a parte que a lista
   escondia, e e a que abre a venda para residencia, igreja e empresa.
   ============================================================================= */
.bh-locaiscid{background:var(--creme)}

.bh-endlivre{max-width:1180px;margin:0 auto 34px;display:flex;flex-wrap:wrap;gap:20px;
  align-items:center;background:linear-gradient(135deg,var(--v8) 0%,var(--v7) 100%);
  border-radius:20px;padding:26px 30px;color:#fff;
  box-shadow:0 1px 0 #ffffff1f inset,0 22px 46px -26px #16351f8c}
.bh-endlivre-ico{flex:0 0 46px;width:46px;height:46px;border-radius:14px;background:#ffffff1f;
  border:1px solid #ffffff33;position:relative}
.bh-endlivre-ico::before{content:"";position:absolute;left:50%;top:11px;width:13px;height:13px;
  margin-left:-6.5px;border:2.5px solid var(--lime2);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg)}
.bh-endlivre-ico::after{content:"";position:absolute;left:50%;bottom:11px;width:20px;height:3px;
  margin-left:-10px;border-radius:2px;background:#ffffff40}
.bh-endlivre > div{flex:1 1 320px;min-width:0}
.bh-endlivre strong{display:block;font-size:19px;margin-bottom:4px}
.bh-endlivre p{color:#D6E6D9;font-size:15.5px;line-height:1.5}
.bh-endlivre .bh-btn{flex:0 0 auto}

.bh-locais-cols{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.bh-locais-bloco{background:#fff;border:1px solid #e6ede7;border-radius:20px;padding:26px 28px;
  box-shadow:var(--sombra-1),var(--luz)}
.bh-locais-bloco h3{display:flex;align-items:center;gap:10px;font-size:15px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--mut);margin-bottom:18px}
.bh-conta{display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:100px;
  background:#eef4ef;color:var(--g8);font-size:12.5px;font-weight:800;letter-spacing:0}
.bh-locais-lista{margin:0;padding:0;list-style:none}
.bh-local{display:flex;gap:14px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid #eef2ef}
.bh-local:last-child{border-bottom:0;padding-bottom:0}
.bh-local:first-child{padding-top:0}
.bh-local-ico{flex:0 0 26px;width:26px;height:26px;border-radius:9px;position:relative;margin-top:2px}
.bh-local--cem .bh-local-ico{background:#e8f1e9}
.bh-local--vel .bh-local-ico{background:#f5efe2}
/* cruz para cemiterio */
.bh-local--cem .bh-local-ico::before,.bh-local--cem .bh-local-ico::after{content:"";position:absolute;
  background:var(--g7);border-radius:1px}
.bh-local--cem .bh-local-ico::before{left:12px;top:6px;width:2.5px;height:14px}
.bh-local--cem .bh-local-ico::after{left:8px;top:10px;width:10px;height:2.5px}
/* telhado para velorio/capela */
.bh-local--vel .bh-local-ico::before{content:"";position:absolute;left:6px;top:8px;width:14px;height:11px;
  border:2.5px solid #8a6d3b;border-top:0;border-radius:0 0 2px 2px}
.bh-local--vel .bh-local-ico::after{content:"";position:absolute;left:5px;top:6px;width:11px;height:11px;
  border-top:2.5px solid #8a6d3b;border-right:2.5px solid #8a6d3b;transform:rotate(-45deg)}
.bh-local-txt{min-width:0}
.bh-local-txt strong{display:block;color:var(--tinta);font-size:16px;font-weight:700;line-height:1.35}
.bh-local-bairro{display:inline-block;color:var(--mut);font-size:14px;margin-top:3px}
.bh-local-tipo{display:inline-block;margin-top:5px;margin-left:0;padding:2px 9px;border-radius:100px;
  background:#f4f7f4;border:1px solid #e6ede7;color:var(--mut);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.bh-local-bairro + .bh-local-tipo{margin-left:8px}

@media(max-width:760px){
  .bh-endlivre{padding:22px;flex-direction:column;align-items:flex-start}
  .bh-endlivre .bh-btn{width:100%}
  .bh-locais-cols{grid-template-columns:1fr}
  .bh-locais-bloco{padding:22px}
}

/* =============================================================================
   OS TRES NUMEROS NO CELULAR
   -----------------------------------------------------------------------------
   Empilhados com o rotulo EMBAIXO do numero, cada item virava um bloco de duas
   linhas e o rotulo quebrava no meio da frase: "PRAZO MEDIO DE / ENTREGA".
   Tres blocos desses ocupavam quase meia tela para dizer tres coisas curtas.

   Aqui eles viram linhas: numero a esquerda numa coluna fixa, rotulo a direita
   com a largura que sobra (~200px, suficiente para o rotulo caber numa linha so).
   O olho desce por uma coluna de numeros alinhados em vez de tropecar em blocos.
   ============================================================================= */
@media(max-width:620px){
  .bh-hero-mini{flex-direction:column;flex-wrap:nowrap;gap:0;padding-top:6px}
  .bh-hero-mini div{flex:1 1 auto;display:flex;align-items:center;gap:16px;
    padding:14px 0;border-bottom:1px solid #ffffff1f}
  .bh-hero-mini div:last-child{border-bottom:0;padding-bottom:0}
  /* "24 horas" a 22px mede ~95px e nao cabia na coluna de 92: o numero quebrava
     em duas linhas e aquele item ficava 24px mais alto que os outros. A coluna
     agora cresce com o conteudo, com um piso para os rotulos continuarem
     alinhados, e o numero nunca quebra. */
  /* Largura FIXA, nao minima: com min-width a coluna crescia no item mais longo
     ("24 horas") e os rotulos ficavam 2px fora de prumo entre si. 104px cabe o
     maior valor a 22px sem quebrar. */
  .bh-hero-mini strong{flex:0 0 104px;white-space:nowrap;
    font-size:22px;line-height:1.1;margin:0}
  .bh-hero-mini span{flex:1 1 auto;margin-top:0;max-width:none;font-size:12px;
    letter-spacing:.06em;line-height:1.3}
}
@media(max-width:360px){
  .bh-hero-mini strong{flex:0 0 92px;font-size:20px}
  .bh-hero-mini span{font-size:11.5px}
}

/* =============================================================================
   OS TRES NUMEROS — VERSAO FINAL
   -----------------------------------------------------------------------------
   No desktop continua a coluna vertical, que preenche o vao entre as folhinhas
   e a coroa. No celular vira o que voce descreveu: um lema curto e tres linhas
   corridas, cada uma com um icone, o numero em destaque e a frase inteira.

   Sobre os icones: sao DESENHADOS em CSS, nao emoji. Emoji muda de desenho a
   cada sistema (o raio do Android nao e o do iPhone), nem sempre respeita a cor
   da marca, e o leitor de tela le "alta tensao", "relogio", "alfinete" no meio
   da frase. Aqui o desenho e o mesmo em todo lugar, na cor certa, e invisivel
   para quem ouve a pagina.
   ============================================================================= */
/* ATENCAO A ESPECIFICIDADE: existe la em cima um ".bh-hero-mini span{display:block}"
   que vale 0,1,1. Escrever so ".bh-mini-longo" (0,1,0) PERDE dessa regra — foi o
   que aconteceu: os dois rotulos ficavam visiveis ao mesmo tempo, o longo era
   empurrado para uma segunda linha da grade, caia na coluna de 22px e quebrava em
   14 linhas. Por isso os seletores abaixo levam o pai junto. */
.bh-i{display:none}
.bh-hero-lema{display:none}
.bh-hero-mini .bh-mini-longo{display:none}

@media(max-width:620px){
  .bh-hero-mini{flex-direction:column;flex-wrap:nowrap;gap:0;padding-top:2px;
    border-top:1px solid #ffffff26}
  .bh-hero-lema{display:block;color:#fff;font-size:16.5px;font-weight:700;
    line-height:1.35;padding:16px 0 6px;letter-spacing:.005em}
  .bh-hero-mini div{flex:1 1 auto;display:grid;grid-template-columns:22px auto 1fr;
    align-items:baseline;gap:0 11px;padding:12px 0;border-bottom:1px solid #ffffff1a}
  .bh-hero-mini div:last-child{border-bottom:0;padding-bottom:0}
  .bh-hero-mini strong{flex:none;font-size:17px;line-height:1.3;white-space:nowrap;margin:0;
    color:var(--lime2)}
  .bh-hero-mini .bh-mini-curto{display:none}
  .bh-hero-mini .bh-mini-longo{display:block;margin-top:0;max-width:none;color:#DCEADD;
    font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.4}

  /* icones */
  .bh-i{display:block;width:16px;height:16px;position:relative;align-self:center;
    justify-self:center;opacity:.95}
  /* raio */
  .bh-i--raio::before{content:"";position:absolute;inset:0;background:var(--lime);
    clip-path:polygon(58% 0,18% 56%,44% 56%,36% 100%,82% 40%,54% 40%)}
  /* relogio */
  .bh-i--relogio::before{content:"";position:absolute;inset:0;border:2px solid var(--lime);
    border-radius:50%}
  .bh-i--relogio::after{content:"";position:absolute;left:7px;top:4px;width:2px;height:5px;
    background:var(--lime);box-shadow:1px 5px 0 -1px var(--lime),3px 5px 0 -1px var(--lime)}
  /* pino de mapa */
  .bh-i--pino::before{content:"";position:absolute;left:2px;top:0;width:12px;height:12px;
    border:2px solid var(--lime);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
  .bh-i--pino::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:4px;
    border-radius:50%;background:var(--v7)}
}
@media(max-width:360px){
  .bh-hero-mini strong{font-size:16px}
  .bh-mini-longo{font-size:13px}
  .bh-hero-lema{font-size:15.5px}
}

/* -----------------------------------------------------------------------------
   CONTRASTE DOS BOTOES VERDES
   O texto branco sobre o topo do gradiente media 3,57:1 — reprovado para 15px.
   O axe nao consegue julgar fundo em gradiente e marca "indefinido"; o Lighthouse
   resolve e reprova. As paradas foram escurecidas ate a mais clara passar de
   4,5:1 com folga (4,72 no botao principal, 5,39 na barra do topo).
   ----------------------------------------------------------------------------- */