/* Cacau & Avelã · a lousa do dia */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --papel: #F7F0E5;
  --areia: #E7D0BE;
  --cacau: #241813;
  --lousa: #5A3324;       /* chão da lousa: marrom chocolate claro, como o rodapé do cardápio do WhatsApp */
  --lousa-filete: #82533D;
  --moldura: #47281C;
  --chocolate: #684636;
  --terracota: #B0694B;
  --terracota-tinta: #8E4E33;
  --pessego: #D8B097;
  --oliva: #6F7253;
  --oliva-tinta: #55583F;
  --giz: rgba(247, 240, 229, .22);

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;

  --margem: clamp(16px, 4.4vw, 64px);
  --secao: clamp(88px, 12vw, 176px);
  --raio: 10px;
  --saida: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scrollbar-color: var(--chocolate) var(--papel); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--papel);
  color: var(--cacau);
  font: 400 clamp(17px, 1.15vw + 12px, 20px)/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--pessego); color: var(--cacau); }
:focus-visible { outline: 2px solid var(--terracota-tinta); outline-offset: 4px; border-radius: 4px; }
.sprite { position: absolute; }
svg { width: 1.2em; height: 1.2em; flex: none; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--lousa); color: var(--papel); padding: 12px 18px; border-radius: 999px; }
.skip:focus { top: 16px; }

h1, h2 { font-family: var(--serif); font-weight: 500; font-kerning: normal; font-optical-sizing: auto; font-feature-settings: "kern" 1; letter-spacing: -.02em; line-height: .95; text-wrap: balance; }
h2 { font-size: clamp(44px, 6.2vw, 92px); }
h2 em, h1 em { font-style: normal; } /* o destaque é só a cor: a identidade não usa itálico */

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1em 1.7em; border-radius: 999px;
  font: 500 clamp(17px, .5vw + 14px, 19px)/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .25s var(--saida), transform .35s var(--saida), box-shadow .35s var(--saida);
}
.botao--pessego { background: var(--pessego); color: var(--cacau); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7); }
.botao--pessego:hover { background: #E6C3AA; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .75); }
.botao--linha { color: var(--papel); box-shadow: inset 0 0 0 1px rgba(247, 240, 229, .5); }
.botao--linha:hover { box-shadow: inset 0 0 0 1px var(--papel); background: rgba(247, 240, 229, .06); }
.botao:active { transform: translateY(0); }

/* ---------- A lousa (material) ---------- */
.lousa {
  position: relative;
  color: var(--papel);
  background-color: var(--lousa);
  background-image:
    radial-gradient(ellipse 60% 40% at 22% 30%, rgba(247, 240, 229, .05), transparent 70%),
    radial-gradient(ellipse 50% 35% at 78% 72%, rgba(247, 240, 229, .04), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  border-radius: var(--raio);
  box-shadow:
    inset 0 0 0 clamp(8px, 1vw, 14px) var(--moldura),
    inset 0 0 0 calc(clamp(8px, 1vw, 14px) + 1px) var(--lousa-filete),
    0 30px 60px -36px rgba(36, 24, 19, .6);
}
.lousa :focus-visible { outline-color: var(--pessego); }
.lousa ::selection { background: var(--pessego); color: var(--cacau); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(340px, 34%) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "marca lousa" "retrato lousa";
  column-gap: clamp(24px, 2.6vw, 40px);
  min-height: min(100svh, 980px);
  padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) var(--margem);
}
/* O logo é parte da identidade: aparece grande, sem o nome repetido ao lado */
.marca { grid-area: marca; display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 4px 0 20px; }
.marca img { width: clamp(150px, 13vw, 190px); height: auto; }
.marca span { font: 500 15px/1.25 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.marca small { display: block; font-size: 12px; letter-spacing: .2em; color: var(--terracota-tinta); margin-top: 3px; }

.hero > .lousa {
  grid-area: lousa;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px) clamp(28px, 5vw, 76px) clamp(32px, 3.4vw, 52px);
}
.lousa__nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px clamp(20px, 2.4vw, 36px); font-size: 16px; }
.lousa__nav a { color: var(--areia); text-decoration: none; padding: 6px 0; background: linear-gradient(var(--pessego), var(--pessego)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--saida), color .25s; }
.lousa__nav a:hover { color: var(--papel); background-size: 100% 1px; }

.lousa__titulo { font-size: clamp(58px, min(7.4vw, 12.5vh), 116px); margin-top: clamp(12px, 2.4vh, 36px); line-height: .9; }
.lousa__titulo em { color: var(--pessego); }

.lousa__promessa { display: flex; flex-wrap: wrap; gap: 6px 0; margin: clamp(16px, 2.6vh, 28px) 0 clamp(20px, 3.4vh, 36px); font: 500 clamp(13px, .4vw + 10px, 16px)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pessego); }
.lousa__promessa { column-gap: clamp(20px, 2.2vw, 34px); }
.lousa__promessa li { display: inline-flex; align-items: center; gap: .5em; }
.lousa__promessa svg { width: 1.15em; height: 1.15em; }

.lousa__legenda { font: 400 clamp(18px, .6vw + 14px, 22px) var(--serif); color: var(--areia); margin-bottom: 6px; }

.cardapio { display: grid; column-gap: clamp(28px, 4vw, 64px); }
.cardapio li { position: relative; }
.cardapio__item {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: clamp(7px, 1.15vh, 12px) 0; text-align: left;
  border-bottom: 1px dashed var(--giz);
  background: linear-gradient(var(--pessego), var(--pessego)) 0 100% / 0 1px no-repeat;
  transition: background-size .55s var(--saida);
}
.cardapio__nome { font: 400 clamp(19px, .55vw + 12px, 24px)/1.2 var(--serif); color: var(--papel); }
.cardapio__ver { font-size: 13px; letter-spacing: .08em; color: var(--areia); white-space: nowrap; opacity: .75; transition: opacity .25s, color .25s; }
.cardapio__item:hover, .cardapio__item[aria-expanded="true"] { background-size: 100% 1px; }
.cardapio__item:hover .cardapio__ver, .cardapio__item[aria-expanded="true"] .cardapio__ver { opacity: 1; color: var(--pessego); }

/* A foto "escrita a giz": no desktop, um lugar fixo ao lado do cardápio.
   Mostra o primeiro doce até alguém apontar outro. */
.cardapio { position: relative; grid-template-columns: minmax(0, 1fr) clamp(190px, 16vw, 240px); }
.cardapio li { grid-column: 1; position: static; }
.polaroide {
  --giz-fechado: polygon(-20% -20%, 120% -20%, 120% -9%, 104% -14%, 91% -6%, 77% -17%, 66% -8%, 49% -13%, 37% -4%, 26% -15%, 12% -7%, -2% -12%, -20% -6%);
  --giz-aberto: polygon(-20% -20%, 120% -20%, 120% 131%, 104% 126%, 91% 134%, 77% 123%, 66% 132%, 49% 127%, 37% 136%, 26% 125%, 12% 133%, -2% 128%, -20% 134%);
  position: absolute; z-index: 5; top: 4px; right: 0;
  width: clamp(190px, 16vw, 240px); padding: 9px 9px 0;
  background: var(--papel); border-radius: 3px;
  box-shadow: 0 18px 34px -12px rgba(0, 0, 0, .65);
  transform: rotate(2.5deg);
  clip-path: var(--giz-fechado);
  opacity: 0; pointer-events: none;
  transition: clip-path .7s var(--saida), opacity .15s;
}
.polaroide img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 2px; }
.polaroide::after { content: ""; display: block; height: 26px; }
.cardapio__item:hover + .polaroide,
.cardapio__item:focus-visible + .polaroide,
.cardapio__item[aria-expanded="true"] + .polaroide,
.cardapio:not(:has(.cardapio__item:hover, .cardapio__item:focus-visible, .cardapio__item[aria-expanded="true"])) li:first-child .polaroide {
  clip-path: var(--giz-aberto); opacity: 1;
}
img.corte-baixo { object-position: 50% 100%; }

.lousa__rodape { margin-top: auto; padding-top: clamp(24px, 3.4vh, 44px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.lousa__rodape p { font-size: clamp(16px, .3vw + 14px, 18px); color: var(--areia); max-width: 36ch; }

.retrato { grid-area: retrato; position: relative; min-height: 420px; padding-bottom: 8px; }
.retrato img { position: absolute; inset: 0 0 8px; width: 100%; height: calc(100% - 8px); object-fit: cover; object-position: 50% 18%; border-radius: 999px 999px var(--raio) var(--raio); }
.retrato figcaption {
  position: absolute; left: -14px; bottom: 36px; max-width: min(300px, 86%);
  background: var(--papel); padding: 16px 20px; border-radius: 6px;
  font-size: 15px; line-height: 1.45; color: var(--chocolate);
  box-shadow: 0 14px 30px -14px rgba(36, 24, 19, .5);
}
.retrato strong { display: block; font: 400 28px/1.1 var(--serif); color: var(--cacau); margin-bottom: 4px; }

/* Abertura: o título e o cardápio são "escritos" uma vez */
@media (prefers-reduced-motion: no-preference) {
  .lousa__titulo span, .lousa__titulo em { display: inline-block; animation: escrever 1.1s var(--saida) both; }
  .lousa__titulo em { animation-delay: .25s; }
  .lousa__promessa { animation: surgir .9s .55s var(--saida) both; }
  /* backwards: o recorte só vale durante a entrada; se ficasse, cortaria a foto que abre ao lado */
  .cardapio li { animation: escrever .9s var(--saida) backwards; }
  .cardapio li:nth-child(1) { animation-delay: .7s; } .cardapio li:nth-child(2) { animation-delay: .78s; }
  .cardapio li:nth-child(3) { animation-delay: .86s; } .cardapio li:nth-child(4) { animation-delay: .94s; }
  .cardapio li:nth-child(5) { animation-delay: 1.02s; } .cardapio li:nth-child(6) { animation-delay: 1.1s; }
  .cardapio li:nth-child(7) { animation-delay: 1.18s; }
  .retrato img { animation: revelar 1.4s .1s var(--saida) both; }
}
@keyframes escrever { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes revelar { from { clip-path: inset(100% 0 0 0 round 999px 999px 10px 10px); } to { clip-path: inset(0 0 0 0 round 999px 999px 10px 10px); } }

/* ---------- A promessa ---------- */
.promessa {
  padding: var(--secao) var(--margem) calc(var(--secao) * .8);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 112px);
  max-width: 1600px; margin: 0 auto;
}

.promessa__lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 40px; align-items: center; padding: clamp(18px, 2.4vw, 32px) 0; border-bottom: 1px solid rgba(36, 24, 19, .14); }
.promessa__lista li:first-child { padding-top: 0; }
.riscado { position: relative; font: 400 clamp(54px, 7vw, 112px)/1 var(--serif); letter-spacing: -.02em; color: var(--chocolate); width: max-content; }
.riscado svg { position: absolute; left: -4%; top: 44%; width: 108%; height: .3em; color: var(--terracota); overflow: visible; }
.riscado path { stroke-width: 4px; }
.promessa__lista p:not(.riscado) { max-width: 34ch; }
.promessa__extra { margin-top: clamp(28px, 3vw, 44px); font-size: clamp(19px, .6vw + 15px, 24px); max-width: 40ch; }
.promessa__extra strong { color: var(--oliva-tinta); font-weight: 600; }
.promessa__aviso { margin-top: 18px; font-size: 16px; color: var(--chocolate); max-width: 52ch; }
.promessa__aviso a { color: var(--terracota-tinta); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .js .riscado path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--saida); }
  .js .promessa__lista li:nth-child(2) .riscado path { transition-delay: .12s; }
  .js .promessa__lista li:nth-child(3) .riscado path { transition-delay: .24s; }
  .js .riscado.visto path { stroke-dashoffset: 0; }
}

/* ---------- Os doces ---------- */
.doces { background: var(--areia); padding: var(--secao) 0 calc(var(--secao) * .85); }
.doces__topo { display: grid; grid-template-columns: auto minmax(0, 32ch) auto; align-items: end; gap: 24px clamp(32px, 5vw, 80px); padding: 0 var(--margem); margin-bottom: clamp(40px, 5vw, 72px); }
.doces__topo h2 em { color: var(--terracota-tinta); }
.doces__topo p { color: var(--chocolate); }
.doces__setas { display: flex; gap: 10px; }
.seta { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(36, 24, 19, .35); transition: background-color .25s, box-shadow .25s, color .25s; }
.seta:hover { background: var(--lousa); color: var(--papel); box-shadow: none; }
.seta--voltar svg { transform: scaleX(-1); }
.seta:disabled { opacity: .35; pointer-events: none; }

.faixa {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 21vw, 310px); gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margem);
  padding: 8px var(--margem) 28px; scrollbar-width: thin; scrollbar-color: var(--chocolate) transparent;
}
.faixa:focus-visible { outline-offset: -2px; }
.faixa li { scroll-snap-align: start; }
.faixa li:nth-child(even) { padding-top: clamp(28px, 4vw, 64px); }
.faixa figure img { aspect-ratio: 9 / 13; width: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 20px 40px -26px rgba(36, 24, 19, .6); }
.faixa figcaption { margin-top: 14px; font: 400 15px/1.45 var(--sans); color: var(--chocolate); }
.faixa figcaption strong { display: block; margin-bottom: 4px; font: 500 clamp(19px, .5vw + 15px, 22px)/1.2 var(--serif); color: var(--cacau); }
.faixa__fim a {
  height: 100%; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 28px; border-radius: 6px; text-decoration: none;
  background: var(--terracota-tinta); color: var(--papel);
  font: 400 clamp(26px, 1.4vw + 16px, 34px)/1.1 var(--serif);
  transition: background-color .3s;
}
.faixa__fim a:hover { background: var(--chocolate); }
.faixa__fim svg { width: 36px; height: 36px; margin-bottom: auto; }
.faixa__fim em { font: 500 15px var(--sans); letter-spacing: .02em; color: var(--papel); }

/* ---------- A Gabi ---------- */
.gabi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: center; padding: var(--secao) var(--margem); max-width: 1500px; margin: 0 auto; }
.gabi__foto { position: relative; max-width: 460px; justify-self: end; width: 100%; }
.gabi__foto img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 4px; padding: 12px 12px 56px; background: #fff; transform: rotate(-2.5deg); box-shadow: 0 26px 50px -26px rgba(36, 24, 19, .55); }
.gabi__foto::before { content: ""; position: absolute; z-index: 1; top: -14px; left: 50%; width: 120px; height: 32px; translate: -50% 0; rotate: 4deg; background: rgba(216, 176, 151, .78); }
.gabi__texto h2 em { color: var(--terracota-tinta); }
.gabi__texto > p { margin-top: clamp(24px, 2.4vw, 36px); max-width: 44ch; font-size: clamp(18px, .5vw + 15px, 22px); }
.gabi blockquote { margin-top: clamp(32px, 3vw, 48px); padding-top: 28px; border-top: 1px solid rgba(36, 24, 19, .18); max-width: 34em; }
.gabi blockquote p { font: 500 clamp(24px, 1vw + 15px, 32px)/1.25 var(--serif); color: #3E2A20; text-wrap: balance; }
.gabi blockquote p::before { content: "“"; color: var(--terracota); }
.gabi blockquote p::after { content: "”"; color: var(--terracota); }

/* ---------- Como pedir ---------- */
.pedir { padding: 0 var(--margem) var(--secao); max-width: 1500px; margin: 0 auto; }
.pedir h2 { margin-bottom: clamp(36px, 4vw, 64px); }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); counter-reset: passo; }
.passos li { counter-increment: passo; position: relative; padding-top: 88px; }
.passos li::before { content: counter(passo); position: absolute; top: 0; left: 0; font: 500 72px/1 var(--serif); color: var(--oliva); }
.passos li:not(:last-child)::after {
  content: ""; position: absolute; top: 34px; left: 64px; right: -12px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M1 9c30-6 60-6 92-2s70 4 100-3' fill='none' stroke='%23684636' stroke-width='1.4' stroke-dasharray='4 5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.passos h3 { font: 500 clamp(20px, .5vw + 16px, 24px)/1.25 var(--sans); margin-bottom: 8px; }
.passos p { color: var(--chocolate); max-width: 30ch; }
.pedir__nota { display: flex; gap: 10px; align-items: flex-start; text-wrap: pretty; margin-top: clamp(40px, 4vw, 64px); padding-top: 24px; border-top: 1px solid rgba(36, 24, 19, .14); font-size: 16px; color: var(--chocolate); }
.pedir__nota svg { color: var(--oliva); margin-top: 2px; }
.pedir__nota a { color: var(--terracota-tinta); font-weight: 500; }

/* ---------- Fecho ---------- */
.fecho { padding: 0 clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px); }
.lousa--fecho { padding: clamp(64px, 9vw, 140px) var(--margem); text-align: center; display: grid; justify-items: center; gap: 22px; }
.lousa--fecho h2 { font-size: clamp(56px, 9vw, 140px); }
.lousa--fecho h2 em { color: var(--pessego); }
.lousa--fecho p { color: var(--areia); font-size: clamp(18px, .5vw + 15px, 22px); }
.fecho__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }

/* ---------- Rodapé ---------- */
.rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding: 40px var(--margem) 48px; font-size: 15px; color: var(--chocolate); }
.rodape img { width: 120px; height: 120px; }
.rodape p:last-child { margin-left: auto; text-align: right; }
.rodape a { color: var(--cacau); }

/* ---------- Botão flutuante (só celular) ---------- */
.flutuante { display: none; }

/* ---------- Tablet e celular ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(280px, 38%) 1fr; }
  .cardapio { grid-template-columns: 1fr; }
  .cardapio li { grid-column: 1; }
  .cardapio li { position: relative; }
  .cardapio li:nth-child(n) .polaroide {
    position: relative; top: auto; right: auto; transform: rotate(-1.5deg);
    width: min(220px, 60%); margin: 0 0 0 4px; display: none;
  }
  .cardapio li:nth-child(n) .cardapio__item:hover + .polaroide,
  .cardapio li:nth-child(n) .cardapio__item:focus-visible + .polaroide,
  .cardapio:not(:has(.cardapio__item:hover, .cardapio__item:focus-visible, .cardapio__item[aria-expanded="true"])) li:first-child .polaroide { display: none; }
  .cardapio li:nth-child(n) .cardapio__item[aria-expanded="true"] + .polaroide { display: block; opacity: 1; clip-path: var(--giz-aberto); margin: 14px 0 18px 4px; animation: giz .7s var(--saida); }
  .doces__topo { grid-template-columns: 1fr auto; }
  .doces__topo p { grid-column: 1; }
  .doces__setas { grid-row: 1 / span 2; grid-column: 2; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; grid-template-areas: "marca" "lousa" "retrato"; padding: 0 12px 12px; min-height: 0; }
  .marca { padding: 14px 4px 18px; }
  .marca img { width: 128px; }
  .hero > .lousa { padding: 28px 24px 30px; }
  .lousa__nav { justify-content: flex-start; font-size: 15px; gap: 4px 18px; }
  .lousa__titulo { margin-top: 26px; }
  .lousa__rodape .botao { width: 100%; justify-content: center; }
  .retrato { margin-top: 12px; }
  .retrato { min-height: 0; }
  .retrato img { position: static; aspect-ratio: 4 / 5; height: auto; min-height: 0; border-radius: 999px 999px var(--raio) var(--raio); }
  .retrato figcaption { left: 12px; bottom: 20px; }

  .promessa { grid-template-columns: 1fr; }
  .promessa__titulo { margin-bottom: 40px; }
  .promessa__lista li { grid-template-columns: 1fr; }

  .doces__topo { grid-template-columns: 1fr; }
  .doces__setas { display: none; }
  .faixa { grid-auto-columns: 62vw; }

  .gabi { grid-template-columns: 1fr; }
  .gabi__foto { justify-self: center; max-width: 340px; }

  .passos { grid-template-columns: 1fr; gap: 36px; }
  .passos li { padding: 0 0 0 64px; }
  .passos li::before { font-size: 48px; }
  .passos li:not(:last-child)::after { top: 58px; left: 18px; right: auto; bottom: -30px; width: 2px; height: auto; background: repeating-linear-gradient(var(--chocolate) 0 4px, transparent 4px 9px); }

  .fecho { padding: 0 12px 12px; }
  .rodape { flex-direction: column; text-align: center; gap: 16px; }
  .rodape p:last-child { margin-left: 0; text-align: center; }

  .flutuante {
    display: inline-flex; align-items: center; gap: 10px;
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    justify-content: center; padding: 17px 20px; border-radius: 999px;
    background: var(--lousa); color: var(--papel); font: 500 17px var(--sans); text-decoration: none;
    box-shadow: 0 16px 34px -12px rgba(36, 24, 19, .7);
    transform: translateY(150%); visibility: hidden; transition: transform .5s var(--saida), visibility 0s .5s;
  }
  .flutuante.ativo { transform: none; visibility: visible; transition: transform .5s var(--saida), visibility 0s; }
  .flutuante svg { color: var(--pessego); }
}

@media (max-width: 560px) {
  .lousa__promessa { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px 28px; }
  .lousa__promessa li + li::before { content: none; }
  .cardapio__ver { display: none; }
}

/* No toque não existe "passar o mouse": avisa que cada doce abre uma foto */
.lousa__dica { display: none; font: 400 14px var(--sans); color: var(--areia); }
@media (hover: none) { .lousa__dica { display: inline; } }
@keyframes giz { from { clip-path: var(--giz-fechado); } to { clip-path: var(--giz-aberto); } }

/* ---------- Traços botânicos e carimbo ---------- */
.botanica { position: absolute; pointer-events: none; width: auto; height: auto; }
.retrato .botanica { z-index: 0; color: var(--oliva); opacity: .5; }
.retrato img, .retrato figcaption { z-index: 1; }
.botanica--ramo { left: -54px; bottom: 120px; width: 120px; aspect-ratio: 160 / 240; rotate: -24deg; }
.botanica--avela { right: -30px; top: 8%; width: 84px; aspect-ratio: 140 / 150; rotate: 18deg; }
.promessa__titulo { grid-row: span 3; align-self: start; position: sticky; top: 48px; }
.promessa__titulo h2 { position: static; }
.botanica--cacau { position: relative; display: block; margin-top: clamp(32px, 4vw, 64px); width: clamp(90px, 9vw, 140px); aspect-ratio: 120 / 236; color: var(--oliva); opacity: .45; rotate: -14deg; }
.lousa--fecho { overflow: hidden; }
.lousa--fecho .botanica { color: var(--areia); opacity: .2; }
.botanica--fecho-a { left: 4%; bottom: -30px; width: clamp(120px, 14vw, 210px); aspect-ratio: 160 / 240; rotate: 16deg; }
.botanica--fecho-b { right: 6%; bottom: -40px; width: clamp(80px, 9vw, 140px); aspect-ratio: 120 / 236; rotate: -22deg; }
.carimbo { position: absolute; top: clamp(28px, 4vw, 56px); right: clamp(28px, 5vw, 80px); width: clamp(120px, 12vw, 180px); height: auto; border-radius: 50%; rotate: -10deg; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
@media (max-width: 820px) {
  .promessa__titulo { position: static; grid-row: auto; }
  .botanica--cacau { display: none; }
  .botanica--ramo { display: none; }
  .botanica--avela { display: none; }
  .carimbo { top: 18px; right: 18px; width: 96px; }
  .lousa--fecho { padding-top: 120px; padding-bottom: 150px; }
  .botanica--fecho-a { left: -6px; bottom: -36px; width: 96px; }
  .botanica--fecho-b { right: 10px; bottom: -44px; width: 64px; }
}
.kern-w { letter-spacing: -.07em; }

/* Áreas de toque de pelo menos 44px (links de texto ganham altura sem mudar o visual) */
.lousa__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background-position: 0 calc(100% - 9px); }
.cardapio__item { min-height: 44px; }
.rodape a, .faixa__fim em, .pedir__nota a, .promessa__aviso a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* Bodoni em tamanho de leitura: o eixo de tamanho óptico baixo engrossa os traços finos,
   que no tamanho de título somem e deixam o texto "falhado". */
.gabi blockquote p, .cardapio__nome, .lousa__legenda, .faixa figcaption strong, .retrato strong { font-variation-settings: "opsz" 11; }

/* ---------- Recados de quem provou: bilhetes de papel presos com fita ---------- */
.recados { padding: var(--secao) var(--margem) calc(var(--secao) * .6); max-width: 1500px; margin: 0 auto; }
.recados__topo { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.recados__topo h2 em { color: var(--terracota-tinta); }
.recados__topo p { font-size: clamp(17px, 1.15vw + 12px, 20px); line-height: 1.55; color: var(--chocolate); max-width: 44ch; }
.recados__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; gap: clamp(40px, 4.4vw, 60px) clamp(24px, 3vw, 44px); }
.nota {
  position: relative; padding: 34px 28px 24px;
  background: #FFFCF6; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(36, 24, 19, .08), 0 22px 40px -26px rgba(36, 24, 19, .5);
}
/* o bilhete fica reto (texto girado borra na tela); só a fita sai torta */
/* fita: o mesmo pêssego translúcido da foto da Gabi */
.nota::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(216, 176, 151, .78); }
.nota:nth-child(even)::before { rotate: 4deg; left: 42%; }
.nota blockquote p { font: 600 clamp(19px, .4vw + 15px, 22px)/1.45 var(--serif); font-variation-settings: "opsz" 6; color: var(--cacau); }
.nota blockquote p::before { content: "“"; color: var(--terracota); }
.nota blockquote p::after { content: "”"; color: var(--terracota); }
.nota__sobre { margin-bottom: 12px; font: 500 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oliva-tinta); }
.nota__quem { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(36, 24, 19, .18); font-size: 14px; letter-spacing: .04em; color: var(--chocolate); }
.nota__quem svg { width: 14px; height: 14px; color: var(--terracota); flex: none; }