/* ------------------------------------------------------------------
   Doceria Flor de Laranjeira - folha de estilo
   Paleta: verde-folha escuro (mata), verde medio, laranja da fruta,
   branco da flor e um fundo verde-claro (nao creme).
   Tipografia: Fraunces (titulos, com eixos SOFT/WONK) + Karla (texto).
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  src: url('fontes/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fontes/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  src: url('fontes/karla-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  src: url('fontes/karla-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --mata: #123027;
  --mata-claro: #1b4335;
  --folha: #2e6b4a;
  --laranja: #d97a24;
  --laranja-clara: #f0b070;
  --flor: #fffcf6;
  --cal: #eef1e5;
  --cal-escuro: #e2e7d4;
  --tinta-suave: #4a5a51;
  --risco: rgba(18, 48, 39, .16);
  --envelope: 1140px;
  --respiro: clamp(3.6rem, 8vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--cal);
  background-image: radial-gradient(rgba(18, 48, 39, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--mata);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--folha); }

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mata); color: var(--flor);
  padding: .7rem 1.1rem; border-radius: 0 0 10px 0; text-decoration: none;
}
.pular:focus { left: 0; }

.envelope {
  width: min(100% - 2.5rem, var(--envelope));
  margin-inline: auto;
}

/* ---------- titulos ---------- */

h1, h2, h3, .marca__nome, .rodape__marca {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 60, 'WONK' 0, 'wght' 600;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 6.4vw, 4.25rem);
  font-variation-settings: 'SOFT' 72, 'WONK' 1, 'wght' 600;
  margin: 0 0 1.1rem;
}

h2, .titulo { font-size: clamp(1.85rem, 4vw, 2.7rem); margin: 0; }
h3 { font-size: 1.28rem; line-height: 1.2; margin: 0; }

p { margin: 0; }

.olho {
  margin-top: 1rem;
  max-width: 46ch;
  color: var(--tinta-suave);
  font-size: 1.075rem;
}

/* ---------- botoes ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--laranja);
  color: #23150a;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .9rem 1.5rem;
  border: 2px solid var(--laranja);
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.botao:hover { background: var(--laranja-clara); border-color: var(--laranja-clara); }
.botao:active { transform: translateY(1px); }

.botao--vazado {
  background: transparent;
  color: var(--flor);
  border-color: rgba(255, 252, 246, .45);
}
.botao--vazado:hover { background: rgba(255, 252, 246, .12); border-color: var(--flor); }

.botao--pequeno { padding: .62rem 1.1rem; font-size: .94rem; }
.botao--grande { padding: 1.05rem 1.9rem; font-size: 1.075rem; }
.botao__icone { width: 18px; height: 18px; flex: none; }

/* ---------- topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(238, 241, 229, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--risco);
}

.topo__faixa {
  width: min(100% - 2.5rem, var(--envelope));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .7rem 0;
}

.marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--mata);
}
.marca__flor { width: 38px; height: 38px; flex: none; color: var(--laranja); }
.marca__nome {
  font-size: 1.18rem; line-height: 1;
  display: flex; flex-direction: column; gap: .18rem;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'wght' 600;
}
.marca__nome small {
  font-family: 'Karla', sans-serif;
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.menu { margin-left: auto; display: flex; gap: 1.35rem; }
.menu a {
  color: var(--mata); text-decoration: none; font-size: .96rem; font-weight: 500;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--laranja); }

/* ---------- heroi ---------- */

.heroi {
  background: var(--mata);
  color: var(--flor);
  position: relative;
  overflow: hidden;
}
.heroi::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 60%;
  background: radial-gradient(120% 100% at 12% 100%, rgba(217, 122, 36, .28), transparent 62%);
  pointer-events: none;
}

.heroi__grade {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--envelope));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.heroi__linha {
  font-size: .95rem;
  letter-spacing: .015em;
  color: var(--laranja-clara);
  margin-bottom: 1.1rem;
}

.heroi__resumo {
  max-width: 42ch;
  font-size: 1.14rem;
  color: rgba(255, 252, 246, .88);
}

.heroi__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

.heroi__pe {
  margin-top: 1.6rem;
  font-size: .92rem;
  color: rgba(255, 252, 246, .66);
}

.heroi__desenho { color: var(--laranja-clara); justify-self: center; }
.ramo { width: min(100%, 340px); }
.ramo .estames { opacity: .95; }

/* entrada orquestrada do heroi (um momento so) */
.sobe { animation: sobe .85s cubic-bezier(.2, .7, .25, 1) both; animation-delay: var(--atraso, 0s); }
@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- secoes ---------- */

.secao { padding: var(--respiro) 0; scroll-margin-top: 72px; }
.secao > .envelope > .titulo { margin-bottom: .2rem; }

/* o que a doceria faz */

.faz__lista { margin-top: 2.6rem; border-top: 1px solid var(--risco); }

.faz__item {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 1rem 3rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--risco);
}
.faz__item h3 { color: var(--mata); }
.faz__corpo p { max-width: 58ch; }
.faz__nota {
  margin-top: .75rem;
  font-size: .93rem;
  color: var(--folha);
  font-weight: 500;
}

.marca-exemplo {
  display: inline-block;
  margin-left: .35rem;
  padding: .05rem .45rem;
  font-family: 'Karla', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--folha);
  border: 1px dashed rgba(46, 107, 74, .55);
  border-radius: 999px;
  vertical-align: 1px;
}
.marca-exemplo--escuro { color: var(--laranja-clara); border-color: rgba(240, 176, 112, .6); margin: 0 .1rem; }

/* ---------- vitrine / cardapio ---------- */

.vitrine {
  background: var(--mata);
  color: var(--flor);
  background-image:
    radial-gradient(80% 60% at 100% 0%, rgba(217, 122, 36, .16), transparent 60%),
    radial-gradient(rgba(255, 252, 246, .05) 1px, transparent 1px);
  background-size: auto, 26px 26px;
}
.vitrine .titulo { color: var(--flor); }
.vitrine__cabeca {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 34ch);
  gap: 1.2rem 3rem;
  align-items: end;
  justify-content: space-between;
}
.vitrine__aviso { font-size: .95rem; color: rgba(255, 252, 246, .72); }

.vitrine__grade {
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.4rem clamp(1.5rem, 4vw, 3.5rem);
}

.grupo h3 {
  color: var(--laranja-clara);
  padding-bottom: .55rem;
  border-bottom: 2px solid rgba(240, 176, 112, .5);
  font-variation-settings: 'SOFT' 70, 'WONK' 0, 'wght' 600;
}
.grupo h3 small { font-family: 'Karla', sans-serif; font-size: .8rem; font-weight: 500; color: rgba(255,252,246,.6); }

.lista { list-style: none; margin: 1rem 0 0; padding: 0; }
.lista li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
}
.lista__nome { max-width: 70%; }
.lista__pontos {
  flex: 1;
  border-bottom: 1px dotted rgba(255, 252, 246, .34);
  transform: translateY(-3px);
}
.lista__preco { color: var(--laranja-clara); font-weight: 700; white-space: nowrap; font-size: .98rem; }

.vitrine__obs {
  margin-top: 2.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 252, 246, .22);
  max-width: 62ch;
  color: rgba(255, 252, 246, .72);
  font-size: .96rem;
}

/* ---------- como encomendar ---------- */

.passos {
  list-style: none;
  margin: 2.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

.passo { position: relative; padding-top: 3.4rem; }
.passo::before {
  content: '';
  position: absolute; top: .95rem; left: 0; right: 0;
  border-top: 1px solid var(--risco);
}
.passo__numero {
  position: absolute; top: 0; left: 0;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 70, 'WONK' 1, 'wght' 600;
  font-size: 1.15rem;
  color: var(--mata);
  background: var(--flor);
  border: 1px solid var(--risco);
  border-radius: 50%;
}
.passo h3 { margin-bottom: .5rem; }
.passo p { color: var(--tinta-suave); max-width: 40ch; }

.encomendar__chamada {
  margin-top: 3.2rem;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--cal-escuro);
  border-radius: 18px;
  border: 1px solid var(--risco);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.1rem;
}
.encomendar__frase {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 70, 'WONK' 1, 'wght' 600;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  max-width: 30ch;
}
.encomendar__obs { font-size: .88rem; color: var(--tinta-suave); }

/* ---------- visita ---------- */

.visita__grade {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 2rem;
  align-items: start;
}

.visita__bloco {
  background: var(--flor);
  border: 1px solid var(--risco);
  border-radius: 18px;
  padding: 1.7rem;
}
.visita__bloco h3 { margin-bottom: .9rem; }

.horarios { margin: 0; }
.horarios > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--risco);
}
.horarios > div:last-child { border-bottom: 0; }
.horarios dt { font-weight: 500; }
.horarios dd { margin: 0; color: var(--folha); font-weight: 700; }

.endereco { font-size: 1.075rem; line-height: 1.7; }

.visita__nota {
  margin-top: 1rem;
  font-size: .93rem;
  color: var(--tinta-suave);
}

.visita__bloco--mapa { padding: .9rem; background: var(--cal-escuro); }
.mapinha { display: block; border-radius: 12px; }
.mapinha__fundo { fill: #f6f3e9; }
.mapinha__rua { stroke: #cfd6c2; stroke-width: 11; fill: none; }
.mapinha__rua--fina { stroke-width: 6; }
.mapinha__praca { fill: #d9e2c8; }
.mapinha__ponto { fill: var(--laranja); stroke: var(--flor); stroke-width: 3; }
.mapinha__texto {
  font-family: 'Karla', sans-serif;
  font-size: 13px; font-weight: 700; fill: var(--mata);
}
.mapinha__texto--claro { font-weight: 500; fill: #7d8a78; font-size: 12px; }

/* ---------- rodape ---------- */

.rodape {
  background: var(--mata-claro);
  color: var(--flor);
  padding: clamp(2.6rem, 5vw, 4rem) 0 2rem;
}
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 1.6rem 2.5rem;
  align-items: center;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(255, 252, 246, .2);
}
.rodape__marca { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; line-height: 1; }
.rodape__linha { margin-top: .5rem; color: rgba(255, 252, 246, .72); font-size: .95rem; }
.rodape__menu { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; }
.rodape__menu a { color: rgba(255, 252, 246, .82); text-decoration: none; font-size: .95rem; }
.rodape__menu a:hover { color: var(--laranja-clara); text-decoration: underline; }
.rodape__aviso {
  margin-top: 1.6rem;
  max-width: 78ch;
  font-size: .88rem;
  color: rgba(255, 252, 246, .62);
}

/* ---------- telas menores ---------- */

@media (max-width: 980px) {
  .menu { display: none; }
  .topo__faixa { justify-content: space-between; }
  .heroi__grade { grid-template-columns: 1fr; }
  .heroi__desenho { order: -1; justify-self: start; }
  .ramo { width: min(62%, 220px); }
  .vitrine__cabeca { grid-template-columns: 1fr; align-items: start; }
  .passos { grid-template-columns: 1fr; gap: 1.6rem; }
  .passo { padding-top: 2.9rem; }
  .passo::before { display: none; }
  .rodape__grade { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .faz__item { grid-template-columns: 1fr; gap: .6rem; padding: 1.5rem 0; }
  .heroi__acoes .botao { width: 100%; }
  .botao--grande { width: 100%; }
  .botao--pequeno { padding: .55rem .9rem; }
  .marca__nome { font-size: .98rem; white-space: nowrap; }
  .marca__nome small { display: none; }
  .marca__flor { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sobe { animation: none; }
  .botao { transition: none; }
}