/* C07 · site final (30/10/2026). Cores, fontes e medidas do kit (tokens.css, 27/10/2026), direção «Essência premium». */
@font-face{font-family:Lora;src:url('fontes/Lora-400-600.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:Lora;src:url('fontes/Lora-Italic-500.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url('fontes/Manrope-200-700.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap}

:root{
  --floresta:#123D32;
  --verde:#17634B;
  --dourado:#B79A54;
  --marfim:#F7F4E8;
  --salvia:#DDE8D4;
  --tinta:#172E27;
  --branco:#FFFFFF;
  --apagado:#52645A;
  --linha:#C9D3C4;
  --serifa:'Lora',Georgia,serif;
  --texto:'Manrope',Arial,sans-serif;
  --raio:14px;
  --lado:16px;
}
@media (min-width:48em){:root{--lado:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--marfim);color:var(--tinta);font-family:var(--texto);font-size:1rem;line-height:1.65}
img,svg{display:block;max-width:100%;height:auto}
.slogan,h2,h3{font-family:var(--serifa);font-weight:500;line-height:1.15;margin:0;text-wrap:balance;color:var(--floresta)}
p{margin:0}
a{color:var(--verde);text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.escuro :focus-visible{outline-color:var(--marfim)}
.envolve{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--lado)}
.pular{position:absolute;left:-9999px}
.pular:focus{left:var(--lado);top:8px;z-index:20;background:var(--branco);padding:.5rem 1rem;border-radius:.5rem}
.pular:focus-visible{outline-color:var(--marfim)}
.junto{white-space:nowrap}

/* A faixa da prévia: uma linha, presente sem pesar. */

/* Abertura verde, assinatura clara e linhas douradas. */
.topo{background:var(--floresta);color:var(--marfim);position:relative;overflow:hidden}
.topo::after{content:'';position:absolute;right:-22vw;top:-30vw;width:50vw;height:50vw;border:1px solid rgba(183,154,84,.45);border-radius:50%;pointer-events:none}
.topo-grade{display:grid;gap:1.5rem;padding-top:1.25rem;padding-bottom:2.25rem;position:relative;z-index:1}
.marca{width:min(15.5rem,72%)}
.marca img{width:100%}
h1.marca{margin:0;font:inherit}
/* A linha da marca, com os fios dourados do descritor do logo, no lugar de etiquetas arredondadas. */
.marca-linha{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:600;letter-spacing:.06em;color:var(--salvia);line-height:1.4;overflow-wrap:anywhere}
.marca-linha::before{content:'';flex:0 0 28px;height:1px;background:var(--dourado)}
.topo .slogan{color:var(--marfim);font-size:clamp(2.1rem,7.6vw,3.6rem);letter-spacing:-.01em}
.topo .slogan em{font-style:italic;color:var(--dourado)}
.topo .lede{color:var(--salvia);font-size:1.0625rem;max-width:34rem}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;max-width:100%;border-radius:10px;font-family:var(--texto);font-weight:700;font-size:1.0625rem;line-height:1.25;text-decoration:none;text-align:center;border:0;cursor:pointer}
.botao-claro{background:var(--marfim);color:var(--floresta)}
.botao-claro:hover{background:var(--branco)}
.botao-verde{background:var(--verde);color:var(--branco)}
.botao-verde:hover{background:var(--floresta)}
.link-claro{color:var(--marfim);font-weight:600;min-height:2.75rem;display:inline-flex;align-items:center}
.topo-foto{margin:0;position:relative}
.topo-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%;border-radius:var(--raio)}
.topo-moldura{position:relative}
.topo-moldura::before{content:'';position:absolute;inset:-6px 6px 6px -6px;border:1px solid var(--dourado);border-radius:calc(var(--raio) + 4px);pointer-events:none;z-index:-1}
.topo-foto figcaption{margin-top:.9rem;color:var(--salvia);font-size:1rem;line-height:1.45}

/* Blocos de leitura em marfim. */
.secao{padding:3rem 0}
#servicos{padding-top:0}
.titulo-secao{display:grid;gap:.6rem;margin-bottom:1.5rem;max-width:40rem}
.titulo-secao h2{font-size:clamp(1.75rem,6vw,2.5rem)}
.titulo-secao p{color:var(--apagado)}
.olho{font-weight:700;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);overflow-wrap:anywhere}
.olho::before{content:'';display:inline-block;vertical-align:middle;width:28px;height:1px;background:var(--dourado);margin-right:10px}

.passos{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:passo}
.passos li{counter-increment:passo;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:16px}
.passos li::before{content:counter(passo);font-family:var(--serifa);font-size:1.75rem;line-height:1;color:var(--verde);padding-top:2px}
.passos h3{font-family:var(--texto);font-weight:700;font-size:1.0625rem;line-height:1.35;color:var(--floresta);margin-bottom:.15rem;overflow-wrap:anywhere}
.passos p{overflow-wrap:anywhere}
.passos p{color:var(--apagado)}

/* Os cartões dos serviços abrem com as ilustrações do kit (images/02–04), sem rótulo nem produto. */
.servicos{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.servico{display:grid;grid-template-rows:auto 1fr;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;min-width:0}
.servico-ilus{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--marfim);border-bottom:2px solid var(--dourado)}
.servico-corpo{display:grid;grid-template-rows:auto auto 1fr;gap:6px;padding:16px 16px 8px;min-width:0}
.servico-corpo>:last-child{align-self:end}
.servico h3{font-family:var(--texto);font-weight:700;font-size:1.125rem;line-height:1.35;overflow-wrap:anywhere}
.servico p{color:var(--apagado);overflow-wrap:anywhere}
.servico a{font-weight:700;min-height:44px;display:inline-flex;align-items:center;justify-self:start;min-width:0;overflow-wrap:anywhere}
.servico-links{display:flex;flex-wrap:wrap;gap:0 1.25rem;min-width:0}

.sobre{background:var(--salvia)}
.sobre-grade{display:grid;gap:1.75rem;align-items:center}
.sobre-texto{display:grid;gap:1rem;max-width:36rem}
.sobre-texto h2{font-size:clamp(1.75rem,6vw,2.5rem)}
.numero-21{font-family:var(--serifa);font-size:3.5rem;line-height:1;color:var(--verde)}
.numero-21 span{display:block;font-family:var(--texto);font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--floresta);margin-top:.35rem}

/* Reconhecimentos: uma faixa escura logo abaixo da abertura, com fios dourados como os do logo. */
.premios-faixa{background:var(--tinta);color:var(--marfim);padding:1.75rem 0}
.premios-grade{display:grid;gap:1.5rem}
.premios-texto{display:grid;gap:1rem;min-width:0}
.premios-foto{margin:0;width:100%;max-width:22rem}
.premios-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio);border:1px solid rgba(183,154,84,.55)}
.premios-foto figcaption{margin-top:.5rem;color:var(--salvia);font-size:1rem;line-height:1.45}
.premios-titulo{font-family:var(--texto);font-weight:700;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dourado);display:flex;align-items:center;gap:12px}
.premios-titulo::after{content:'';flex:1;height:1px;background:rgba(183,154,84,.5)}
.premios{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.premio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;border-top:1px solid rgba(183,154,84,.35);padding-top:.75rem}
.premio svg{grid-row:span 2;width:34px;height:34px;color:var(--dourado)}
.premio-nome{font-family:var(--serifa);font-size:1.3rem;line-height:1.2;color:var(--marfim);overflow-wrap:anywhere}
.premio-detalhe{color:var(--salvia);font-size:1rem;line-height:1.4;overflow-wrap:anywhere}

/* Produtos da casa: cada produto abre o WhatsApp com a sua própria mensagem; só nomes, sem promessa de resultado. */
.produtos{background:var(--branco);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.produtos-bloco{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
/* Momentos: a galeria das fotos que a cliente mandou (30/10), no mesmo desenho de «Ações de saúde», em fundo branco. */
.momentos{background:var(--branco);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.produtos-cabeca{display:grid;gap:.75rem;max-width:40rem}
.produtos-cabeca h2{font-size:clamp(1.75rem,6vw,2.5rem)}
.produtos-intro{color:var(--apagado)}
.vitrine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:12px;min-width:0}
.vitrine li{min-width:0}
.vitrine-item{display:grid;grid-template-rows:auto 1fr auto;gap:6px;height:100%;padding:8px 8px 12px;border:1px solid var(--linha);border-radius:var(--raio);background:var(--marfim);color:var(--tinta);text-decoration:none}
.vitrine-item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.vitrine-nome{padding:0 4px;font-weight:700;font-size:1.0625rem;line-height:1.3;overflow-wrap:anywhere}
.vitrine-acao{padding:0 4px;font-weight:600;color:var(--verde)}
.vitrine-acao::after{content:'→';content:'→' / '';margin-left:6px}
.vitrine-item:hover{border-color:var(--verde)}
.mais-produtos{display:grid;gap:.75rem;min-width:0}
.mais-produtos h3{font-family:var(--texto);font-weight:700;font-size:1.125rem;line-height:1.35}
.lista-produtos{list-style:none;margin:0 0 .5rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));gap:.5rem}
.lista-produtos a{display:flex;align-items:center;height:100%;min-height:52px;padding:9px 16px;border:1.5px solid #6E8378;border-radius:.85rem;background:var(--marfim);color:var(--tinta);font-weight:600;line-height:1.3;text-decoration:none;overflow-wrap:anywhere}
.lista-produtos a:hover{border-color:var(--verde);color:var(--floresta)}
.vitrine-item:focus-visible,.lista-produtos a:focus-visible{outline:3px solid var(--verde);outline-offset:2px}
.produtos-bloco>.botao{justify-self:start}

/* Ações de saúde: três fotos da farmácia na cidade, cada uma com a sua legenda. */
.galeria{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.galeria-destaque{grid-column:1/-1}
.galeria-destaque img{aspect-ratio:4/3}
.galeria figure{margin:0;display:grid;gap:.5rem}
.galeria img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--raio)}
.galeria figcaption{color:var(--apagado);font-size:1rem;line-height:1.45;overflow-wrap:anywhere}

/* O pedido: escolha, prévia da mensagem e o botão do WhatsApp. */
.agenda{display:grid;gap:20px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:20px 16px;counter-reset:etapa;min-width:0}
.passo{border:0;margin:0;padding:0;min-width:0;scroll-margin-top:1rem}
.passo legend,.campo>span{font-weight:700;color:var(--floresta);font-size:1.0625rem;padding:0;margin-bottom:.6rem;display:flex;gap:.6rem;align-items:baseline}
.passo legend::before,.campo>span::before{counter-increment:etapa;content:counter(etapa);font-family:var(--serifa);font-weight:500;color:var(--verde);font-size:1.25rem;line-height:1}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:.5rem}
#passo-servico .chips{grid-template-columns:minmax(0,1fr)}
@media (min-width:22.5em){#passo-servico .chips{grid-template-columns:repeat(2,minmax(0,1fr))}#passo-servico .chip:last-child{grid-column:1/-1}}
.chip{position:relative;min-width:0;display:flex}
.chip input{position:absolute;inset:0;z-index:1;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chip span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:9px 20px;border:1.5px solid #6E8378;border-radius:.85rem;background:var(--marfim);color:var(--tinta);font-weight:600;line-height:1.3;overflow-wrap:anywhere;position:relative}
.chip input:checked + span{background:var(--floresta);border-color:var(--floresta);color:var(--marfim)}
.chip input:checked + span::after{content:'✓';content:'✓' / '';position:absolute;top:50%;right:.6rem;transform:translateY(-50%);font-weight:700;color:var(--dourado)}
.chip input:focus-visible + span{outline:3px solid var(--verde);outline-offset:2px}
.campo{display:grid;min-width:0}
.campo input{font:inherit;font-size:1.0625rem;min-height:3.25rem;padding:.6rem .9rem;border:1.5px solid #6E8378;border-radius:.85rem;background:var(--marfim);color:var(--tinta);width:100%}
.campo input:focus-visible{outline:3px solid var(--verde);outline-offset:1px}
.envio{display:grid;gap:.85rem;border-top:1px solid var(--linha);padding-top:1.1rem}
.envio-rotulo{font-weight:700;color:var(--floresta)}
.mensagem{background:var(--salvia);border-radius:1rem 1rem 1rem .25rem;padding:.85rem 1rem;color:var(--tinta);font-size:1.0625rem}
.envio .botao{width:100%}
.nota{color:var(--apagado);font-size:1rem;line-height:1.5}

/* O endereço abre com a foto da fachada; do celular deitado em diante, horário e Instagram empilham ao lado. */
.onde-grade{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.onde-grade>.cartao-info:last-child{grid-column:1/-1}
.sobre-acao{justify-self:start}
.sobre-foto{margin:0;width:100%;max-width:22rem;justify-self:center}
.sobre-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio)}
.sobre-foto figcaption{margin-top:.6rem;color:var(--apagado);font-size:1rem;line-height:1.45}
.cartao-info{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 16px;display:grid;gap:6px;align-content:start;min-width:0}
.cartao-info h3{font-family:var(--texto);font-weight:700;font-size:1.0625rem;color:var(--floresta);overflow-wrap:anywhere}
.cartao-info p{overflow-wrap:anywhere}
.cartao-info a{font-weight:700;min-height:44px;display:inline-flex;align-items:center;justify-self:start;min-width:0;max-width:100%;overflow-wrap:anywhere}
.horario{margin:0;display:grid;gap:6px}
.horario div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 1rem;padding-bottom:6px;border-bottom:1px dashed var(--linha)}
.horario div:last-child{padding-bottom:0;border-bottom:0}
.horario dt{color:var(--tinta)}
.horario dd{margin:0 0 0 auto;font-weight:700;color:var(--floresta);font-variant-numeric:tabular-nums}

/* A ilustração de abertura do kit (images/01) acompanha o pedido só na tela larga. */
.pedido-ilus{display:none}
#pedido .passos{margin-bottom:1.5rem}
.agenda-grade{display:grid;gap:1rem}
.pedido-lado{display:grid;gap:1rem;align-content:start}
.pedido-lado p{color:var(--apagado);max-width:34rem}

.rodape{background:var(--floresta);color:var(--salvia);padding:2.5rem 0 6rem}
.rodape-grade{display:grid;gap:1.25rem}
.rodape .marca{width:min(13rem,62%)}
.rodape a{color:var(--marfim);font-weight:600;overflow-wrap:anywhere}
.rodape p{max-width:40rem;overflow-wrap:anywhere}

/* A barra do celular: aparece depois de uma escolha, com o mesmo link do botão. */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:.6rem var(--lado) calc(.6rem + env(safe-area-inset-bottom));background:rgba(247,244,232,.96);border-top:1px solid var(--linha)}
.barra .botao{width:100%}
.barra[hidden]{display:none}
.sem-js .so-js{display:none}

@media (min-width:48em){
  .premios-grade{grid-template-columns:minmax(0,1fr) 20rem;align-items:center;gap:3rem}
  .premios-faixa{padding:2.5rem 0}
  .vitrine{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .galeria{gap:1rem}
  .topo-grade{grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;padding-top:2.5rem;padding-bottom:4rem}
  .topo-texto{display:grid;gap:1.4rem}
  .topo::after{display:none}
  .secao{padding:4.5rem 0}
  .passos{grid-template-columns:repeat(3,1fr)}
  .agenda-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
  .pedido-ilus{display:block;width:100%;max-width:360px;aspect-ratio:1;object-fit:cover;border-radius:var(--raio)}
  .agenda{padding:28px}
  .barra{display:none}
  .rodape{padding-bottom:2.5rem}
  .rodape-grade{grid-template-columns:auto 1fr;align-items:end;gap:3rem}
}
@media (max-width:47.99em){
  .servico{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto}
  .servico-ilus{height:100%;aspect-ratio:auto;border-bottom:0;border-right:2px solid var(--dourado)}
  .servico-corpo{padding:14px 14px 6px}
  .topo-texto{display:grid;gap:1.1rem}
  html{scroll-padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}
/* Tablet: os cartões dos serviços deitam, com a ilustração à esquerda; «sobre» fica em uma coluna. */
@media (min-width:48em) and (max-width:63.99em){
  .galeria-destaque img{aspect-ratio:16/9}
  .servico{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:auto}
  .servico-ilus{height:100%;min-height:12rem;border-bottom:0;border-right:2px solid var(--dourado)}
  .servico-corpo{padding:20px 20px 12px}
}
@media (min-width:64em){
  .sobre-grade{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:3rem}
  .galeria{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .galeria-destaque{grid-column:auto;grid-row:span 2}
  .galeria-destaque figure{height:100%;grid-template-rows:minmax(0,1fr) auto}
  .galeria-destaque img{height:100%;aspect-ratio:auto}
  .servicos{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:75em){.sobre-texto{max-width:none}}