/* Cores tiradas do logo da Botica Fontenelle */
:root {
  --verde: #12704b;
  --verde-escuro: #0e3b2a;
  --verde-claro: #e9f1ec;
  --pessego: #fbd5a5;
  --pessego-claro: #fdf0df;
  --cafe: #2c1a10;
  --ouro: #8a6114;
  --texto-suave: #5b4a3f;
  --papel: #ffffff;
  --wa: #128c4a;
  --serif: "Alegreya", Georgia, serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --largura: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--cafe);
  font: 400 1.125rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); color: var(--verde-escuro); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: var(--verde); }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }

.pular { position: absolute; left: -9999px; top: 8px; background: var(--verde-escuro); color: #fff; padding: 8px 14px; z-index: 50; }
.pular:focus { left: 8px; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .6em 1.3em; border-radius: 999px;
  background: var(--verde); color: #fff; text-decoration: none;
  font: 700 1.05rem/1.2 var(--sans); border: 0; cursor: pointer;
  transition: background-color .15s, transform .1s;
}
.botao:hover { background: var(--verde-escuro); }
.botao:active { transform: scale(.98); }
.botao svg { width: 1.25em; height: 1.25em; flex: none; }
.botao--wa { background: var(--wa); }
.botao--wa:hover { background: #0d6b38; }
.botao--claro { background: var(--pessego); color: var(--verde-escuro); }
.botao--claro:hover { background: #fff; }
.botao--grande { min-height: 56px; font-size: 1.15rem; padding: .7em 1.6em; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #e3e0da; }
.topo__in { max-width: var(--largura); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 32px; }
.topo__logo img { width: 184px; }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { color: var(--cafe); text-decoration: none; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-color: var(--verde); color: var(--verde); }
.topo__wa { min-height: 42px; padding: .45em 1.1em; font-size: 1rem; }

/* Banner */
.banner { position: relative; width: 100%; margin: 0; }
.banner__trilho { overflow: hidden; }
.slide { display: block; }
.slide[hidden] { display: none; }
.slide img { width: 100%; height: auto; }
.slide:focus-visible { outline-offset: -4px; }
.tradicao h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem); color: var(--verde-escuro); }

/* Setas nas laterais e pontos embaixo, por cima da imagem: o banner vai de ponta a ponta sem faixa branca */
.banner__controles { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; }
.banner__controles > * { pointer-events: auto; }
.banner__seta { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); cursor: pointer; display: grid; place-items: center; }
.banner__seta[data-dir="-1"] { left: 20px; }
.banner__seta[data-dir="1"] { right: 20px; }
.banner__seta svg { width: 20px; fill: none; stroke: var(--cafe); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.banner__seta:hover { background: #fff; }
.banner__pontos { display: flex; gap: 2px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.banner__pontos button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.banner__pontos button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: width .2s, background-color .2s; }
.banner__pontos button[aria-current="true"]::before { width: 24px; border-radius: 5px; background: #fff; }

/* Tradição: o número de anos é o destaque da página */
.tradicao__in { max-width: var(--largura); margin: 0 auto; padding: 88px 24px; display: grid; grid-template-columns: auto 1fr; gap: 24px 64px; align-items: center; }
.tradicao__numero { margin: 0; font-family: var(--serif); font-weight: 700; color: var(--ouro); font-size: 2rem; line-height: .9; display: flex; flex-direction: column; }
.tradicao__numero span { font-size: clamp(7rem, 4rem + 9vw, 12rem); color: var(--verde); letter-spacing: -.03em; }
.tradicao__texto p { max-width: 60ch; }

/* Nosso diferencial */
.diferencial { background: var(--pessego-claro); }
.diferencial__in { max-width: var(--largura); margin: 0 auto; padding: 88px 24px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.diferencial__cab { position: sticky; top: 120px; }
.diferencial__frase { font: 500 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.35 var(--serif); color: var(--verde-escuro); text-wrap: pretty; }
.diferencial__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.diferencial__lista li { border-top: 3px solid var(--ouro); padding-top: 16px; }
.diferencial__lista h3 { color: var(--cafe); margin-bottom: .35em; }
.diferencial__lista p { color: var(--texto-suave); font-size: 1.05rem; margin: 0; }

/* O que fazemos */
.servicos { background: var(--verde-claro); }
.servicos__in { max-width: var(--largura); margin: 0 auto; padding: 88px 24px; }
.servicos__intro { color: var(--texto-suave); max-width: 52ch; }
.servicos__lista { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #cfdcd3; border: 1px solid #cfdcd3; border-radius: 12px; overflow: hidden; }
.servicos__lista li { background: #fff; padding: 28px 28px 24px; display: flex; flex-direction: column; }
.servicos__lista h3 { color: var(--verde-escuro); }
.servicos__lista p { color: var(--texto-suave); font-size: 1.05rem; }
.servicos__lista a { margin-top: auto; font-weight: 700; text-underline-offset: 3px; }

/* Produtos */
.produtos { max-width: var(--largura); margin: 0 auto; padding: 64px 24px 80px; }
.produtos__cab p { color: var(--texto-suave); }
.grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 28px 0 8px; border-bottom: 2px solid #dfe5e0; }
.grupo { min-height: 56px; padding: .6em 1em; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; background: none; color: var(--texto-suave); font: 700 1.3rem/1.2 var(--serif); cursor: pointer; }
.grupo:hover { color: var(--verde-escuro); }
.grupo[aria-selected="true"] { color: var(--verde-escuro); border-bottom-color: var(--verde); }
.grupo__vazio { max-width: 640px; padding: 40px 0 8px; }
.grupo__vazio p { font-size: 1.2rem; color: var(--texto-suave); margin-bottom: 24px; }
.abas { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 32px; }
.aba { min-height: 44px; padding: .4em 1.1em; border-radius: 999px; border: 1px solid #cfd9d2; background: #fff; color: var(--verde-escuro); font: 500 1rem/1 var(--sans); cursor: pointer; }
.aba:hover { border-color: var(--verde); }
.aba[aria-selected="true"] { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }
.painel__desc { color: var(--texto-suave); margin-bottom: 24px; }
.grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; }

.produto { display: flex; flex-direction: column; }
.produto__img { position: relative; aspect-ratio: 4 / 5; background: var(--verde-claro); border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; }
.produto__img img { position: absolute; inset: 0; margin: auto; height: 82%; width: auto; max-width: 90%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(14, 59, 42, .2)); }
.produto h3 { margin-bottom: .3em; }
.produto__desc { font-size: 1rem; color: var(--texto-suave); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.produto__rodape { margin-top: auto; padding-top: 8px; }
.produto__preco { font: 700 1.3rem/1.2 var(--serif); color: var(--verde-escuro); margin-bottom: 10px; }
.produto__preco--consulta { font: 500 1rem/1.2 var(--sans); color: var(--texto-suave); }
.produto .botao { width: 100%; }

/* Frasco desenhado para produtos ainda sem mockup */
.frasco { width: 38%; aspect-ratio: 1 / 1.75; position: relative; border-radius: 14% 14% 10% 10% / 8% 8% 6% 6%; background: linear-gradient(90deg, #14201a, #2a3a31 45%, #14201a); filter: drop-shadow(0 10px 12px rgba(14, 59, 42, .2)); }
.frasco::before { content: ""; position: absolute; left: 6%; right: 6%; top: -9%; height: 13%; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #8a6114, #d6b062 50%, #8a6114); }
.frasco span { position: absolute; left: 0; right: 0; top: 30%; padding: 10% 6%; background: var(--verde); border-top: 2px solid #d6b062; border-bottom: 2px solid #d6b062; color: #fff; font: 700 clamp(.6rem, .5rem + .4vw, .8rem)/1.15 var(--serif); text-align: center; text-wrap: balance; }

/* Como funciona */
.receita { background: var(--verde-escuro); color: #fff; }
.receita__in { max-width: var(--largura); margin: 0 auto; padding: 88px 24px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.receita h2 { color: #fff; }
.receita p { max-width: 40ch; color: #dfe9e3; margin-bottom: 28px; }
.receita__texto { position: sticky; top: 120px; }
.passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
.passos li { counter-increment: passo; color: #dfe9e3; }
.passos li::before { content: counter(passo); width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: var(--pessego); color: var(--verde-escuro); display: grid; place-items: center; font: 700 1.4rem/1 var(--serif); }
.passos strong { display: block; color: #fff; font-family: var(--serif); font-size: 1.3rem; margin-bottom: 2px; }

/* História em linha do tempo */
.historia { background: var(--pessego-claro); }
.historia__in { max-width: 900px; margin: 0 auto; padding: 88px 24px; }
.historia__cab p { max-width: 62ch; line-height: 1.7; }
.linha { list-style: none; margin: 48px 0 0; padding: 0; }
.linha li { display: grid; grid-template-columns: 120px 1fr; gap: 32px; position: relative; padding-bottom: 40px; }
.linha li::before { content: ""; position: absolute; left: 154px; top: 14px; bottom: -14px; width: 2px; background: #e6c9a3; }
.linha li:last-child::before { display: none; }
.linha__ano { margin: 0; font: 700 2rem/1 var(--serif); color: var(--verde); text-align: right; }
.linha li > div { padding-left: 32px; position: relative; }
.linha li > div::before { content: ""; position: absolute; left: -2px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--ouro); border: 3px solid var(--pessego-claro); }
.linha li > div > p { max-width: 56ch; line-height: 1.7; }
.foto-antiga { margin: 16px 0 0; display: inline-block; background: #fff; padding: 10px 10px 8px; box-shadow: 0 10px 24px rgba(44, 26, 16, .16); transform: rotate(-1deg); }
.linha li:nth-child(even) .foto-antiga { transform: rotate(1deg); }
.foto-antiga img { height: 240px; width: auto; max-width: none; }
.foto-antiga figcaption { font: 500 .95rem/1.3 var(--serif); color: var(--texto-suave); padding-top: 6px; text-align: center; }

/* Dicas */
.dicas { background: var(--pessego-claro); }
.dicas__in { max-width: var(--largura); margin: 0 auto; padding: 88px 24px; }
.vantagens { margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; }
.vantagens div { padding: 20px 0; border-top: 1px solid #e3e0da; }
.vantagens dt { font: 700 1.25rem/1.3 var(--serif); color: var(--verde-escuro); margin-bottom: 4px; }
.vantagens dd { margin: 0; color: var(--texto-suave); max-width: 52ch; }

/* Contato */
.contato { background: var(--verde-claro); }
.contato__in { max-width: var(--largura); margin: 0 auto; padding: 88px 24px; }
.unidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.unidade { background: #fff; border-radius: 10px; padding: 28px; display: flex; flex-direction: column; }
.unidade h3 { color: var(--verde-escuro); margin-bottom: .2em; }
.unidade__tipo { color: var(--ouro); font-weight: 700; margin-bottom: .6em; }
.unidade address { font-style: normal; margin-bottom: 1em; }
.unidade__tel { margin-bottom: 1.2em; }
.unidade .botao { margin-top: auto; }
.contato__email { margin-top: 32px; }

/* Rodapé */
.rodape { background: var(--verde-escuro); color: #c9d8cf; font-size: 1rem; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rodape h2 { font: 700 1.15rem/1.2 var(--serif); color: var(--pessego); margin-bottom: 16px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape__in { max-width: var(--largura); margin: 0 auto; padding: 72px 24px 48px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 48px 40px; }
.rodape__logo { display: inline-block; background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 18px; }
.rodape__logo img { width: 170px; }
.rodape__marca p { max-width: 38ch; line-height: 1.6; }
.rodape__premios { margin-top: 16px !important; display: grid; gap: 6px; }
.rodape__premios li { padding-left: 16px; position: relative; font-size: .95rem; }
.rodape__premios li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); }
.rodape__redes { display: flex; gap: 10px; margin-top: 20px; }
.rodape__redes a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; }
.rodape__col li + li { margin-top: 10px; }
.rodape__contato a { display: inline-flex; align-items: center; gap: 10px; }
.rodape__contato svg { width: 18px; height: 18px; flex: none; color: var(--pessego); }
.rodape__contato li span { display: inline-flex; gap: 10px; }
.rodape__unidades { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 36px; }
.rodape__unidades ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px; }
.rodape__unidades strong { display: block; color: #fff; font-family: var(--serif); font-size: 1.05rem; margin-bottom: 4px; }
.rodape__unidades p { margin: 0; font-size: .95rem; line-height: 1.55; }
.rodape__unidades svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; color: var(--pessego); }
.rodape__legal { border-top: 1px solid rgba(255, 255, 255, .12); background: #0a2c1f; }
.rodape__legal-in { max-width: var(--largura); margin: 0 auto; padding: 28px 24px 100px; font-size: .9rem; color: #a9bdb2; }
.rodape__legal p { margin: 0 0 .6em; max-width: 110ch; }
.rodape__dados { color: #dfe9e3; }
.rodape__copy a { color: var(--pessego); margin-left: 8px; }

.wa-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.wa-flutuante svg { width: 32px; height: 32px; }

/* Tablet */
@media (max-width: 1000px) {
  .menu { display: none; }
  .topo__wa { margin-left: auto; }
  .grade { grid-template-columns: repeat(3, 1fr); }
  .diferencial__in { grid-template-columns: 1fr; gap: 32px; }
  .diferencial__cab { position: static; }
  .servicos__lista { grid-template-columns: 1fr 1fr; }
  .receita__in { grid-template-columns: 1fr; }
  .receita__texto { position: static; }
  .unidades { grid-template-columns: 1fr; }
  .rodape__in { grid-template-columns: 1fr 1fr; }
  .rodape__unidades ul { grid-template-columns: 1fr 1fr; }
}

/* Celular */
@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .topo__in { padding: 8px 16px; gap: 12px; }
  .topo__logo img { width: 140px; }
  /* no celular troca com o dedo; as setas sairiam por cima do texto da arte */
  .banner__seta { display: none; }
  .banner__controles { justify-content: flex-end; padding: 0 10px 8px 0; }
  .banner__pontos button { width: 22px; height: 22px; }
  .tradicao__in { grid-template-columns: 1fr; padding: 56px 16px 48px; gap: 8px; }
  .tradicao__numero { flex-direction: row; align-items: baseline; gap: 10px; }
  .diferencial__in { padding: 64px 16px; }
  .diferencial__lista { grid-template-columns: 1fr; gap: 28px; }
  .grupo { font-size: 1.1rem; padding: .5em .4em; }
  .grupos { grid-template-columns: 1fr 1fr; }
  .servicos__in { padding: 64px 16px; }
  .servicos__lista { grid-template-columns: 1fr; }
  .servicos__lista li { padding: 22px 20px; }
  .receita__in { grid-template-columns: 1fr; gap: 40px; }
  .receita__texto { position: static; }
  .passos { grid-template-columns: 1fr; gap: 28px; }
  .linha li { grid-template-columns: 1fr; gap: 6px; padding-left: 28px; }
  .linha li::before { left: 6px; top: 6px; }
  .linha__ano { text-align: left; font-size: 1.6rem; }
  .linha li > div { padding-left: 0; position: static; }
  .linha li > div::before { left: 0; top: 4px; }
  .foto-antiga img { height: 200px; }
  .produtos { padding: 48px 16px 64px; }
  .abas { flex-wrap: nowrap; overflow-x: auto; margin: 20px -16px 28px; padding: 0 16px 4px; scrollbar-width: none; }
  .aba { flex: none; }
  .grade { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .produto h3 { font-size: 1.1rem; }
  .produto__desc { font-size: .95rem; }
  .produto .botao { font-size: 1rem; padding: .5em .6em; }
  .receita__in { padding: 64px 16px; }
  .historia__in { padding: 64px 16px; }
  .dicas__in, .contato__in { padding: 64px 16px; }
  .vantagens { grid-template-columns: 1fr; }
  .rodape__in { grid-template-columns: 1fr; padding: 56px 16px 40px; gap: 36px; }
  .rodape__unidades ul { grid-template-columns: 1fr; }
  .rodape__legal-in { padding: 24px 16px 100px; }
  .wa-flutuante { right: 14px; bottom: 14px; width: 56px; height: 56px; }
}