/* Divino Sabores · site conceito (cafeteriadivinosabores.com.br)
   Cores da logo (clientes/divino-sabores/marca/logo.pdf: verde #466912 e rosa-claro #F6E3E3, medidos no PDF) e da
   casa: creme de fundo, cacau (Nutella e café) no texto e o rosa das flores como assinatura. O rosa nunca toma a
   página: fica nas flores, nas palavras em itálico e num bloco só (o Visitar).
   Títulos em Cormorant Garamond, texto em Inter (fontes/, licença OFL ao lado, porque o CSP só aceita fonte do
   próprio site). Movimento só com transform e opacity; com movimento reduzido nada se mexe e o croissant aparece
   pronto.
   Foto que ainda não chegou (o pagina.js marca .falta) vira um lugar reservado com o que precisa ser fotografado. */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fontes/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fontes/cormorant-garamond-italico.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fontes/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --creme: #FBF6EF;       /* fundo */
  --creme-2: #F3E9DD;     /* lugar da foto e fundo do croissant enquanto carrega */
  --rosa-claro: #F6E3E3;  /* fundo da logo: bloco do Visitar */
  --cacau: #2B1A12;       /* texto (15,5:1 no creme) e bloco do Ambiente */
  --cacau-2: #6B5244;     /* texto secundário (>= 5,9:1 nos fundos claros) */
  --rosa: #EBB4C1;        /* flores: só enfeite, e texto sobre o cacau (9,4:1) */
  --rosa-forte: #A83E62;  /* palavras em itálico e sublinhados (>= 4,9:1 nos fundos claros) */
  --verde: #466912;       /* o verde da logo: nome no topo e sobretítulos (>= 5,1:1 nos fundos claros) */
  --dourado: #9A6F2A;     /* estrelas das avaliações (>= 3,7:1, gráfico) */
  --linha: rgba(43, 26, 18, 0.14);

  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --margem: clamp(20px, 5vw, 72px);
  --calha: clamp(16px, 2vw, 32px);
  --respiro: clamp(96px, 13vw, 200px);
  --raio: 3px;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

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

html {
  background: var(--creme);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--cacau);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* flores que passam da borda não criam rolagem para o lado */
}

h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
[hidden] { display: none !important; }

::selection { background: var(--rosa); color: var(--cacau); }
:focus-visible { outline: 2px solid var(--rosa-forte); outline-offset: 4px; border-radius: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--margem); top: -120px; z-index: 30;
  padding: 12px 18px;
  background: var(--cacau); color: var(--creme);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.envelope {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* Aviso de conceito: honestidade com quem chega pela Anju Labs ou por um link solto */
.aviso-conceito {
  padding: 9px var(--margem);
  background: var(--cacau);
  color: var(--creme);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.aviso-conceito a { text-decoration-color: var(--rosa); text-underline-offset: 3px; }

/* Topo: rola junto com a página, para a cena do croissant ter a tela inteira */
.topo-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  min-height: 84px;
}
/* Marca: o selo redondo e o nome, os dois tirados da logo (marca/logo.pdf) */
.marca {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  line-height: 1;
}
.marca-selo { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.marca-nome { width: auto; height: 38px; }
@media (max-width: 399px) {
  .marca { gap: 10px; }
  .marca-selo { width: 40px; height: 40px; }
  .marca-nome { height: 30px; }
}
.menu { display: flex; gap: clamp(20px, 3vw, 44px); }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(var(--rosa-forte), var(--rosa-forte)) left calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size 0.35s var(--suave);
}
.menu a:hover { background-size: 100% 1px; }
@media (max-width: 599px) {
  .menu-extra { display: none; }
}

/* Títulos */
.titulo {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 0.98;
  text-wrap: balance;
}
.titulo em {
  font-style: italic;
  color: var(--rosa-forte);
}
.titulo-secao { font-size: clamp(44px, 6.4vw, 96px); }
.sobretitulo {
  margin-bottom: 18px;
  color: var(--verde);
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.4;
}
.lide {
  max-width: 40ch;
  color: var(--cacau-2);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Ações: um botão cheio e links com sublinhado rosa que cresce no hover */
.acoes {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 32px;
  margin-top: clamp(28px, 3vw, 40px);
}
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px;
  border-radius: 999px;
  background: var(--cacau); color: var(--creme);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  transition: background-color 0.25s, transform 0.25s var(--suave);
}
.botao:hover { background: #47301F; }
.botao:active { transform: scale(0.98); }
.link {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: 15px; font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rosa-forte);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: text-decoration-thickness 0.2s, color 0.2s;
}
.link:hover { color: var(--rosa-forte); text-decoration-thickness: 2px; }

/* Fotos: cantos quase retos, fundo creme enquanto carrega, recorte sem distorcer */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--creme-2);
}
.foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Lugar reservado: a foto ainda não existe. Mostra o que fotografar, no proporcional certo, sem quebrar a página. */
.foto.falta {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(235, 180, 193, 0.35), transparent 60%),
    radial-gradient(90% 80% at 80% 90%, rgba(169, 194, 176, 0.3), transparent 60%),
    var(--creme-2);
  outline: 1px dashed rgba(43, 26, 18, 0.22);
  outline-offset: -10px;
}
.foto.falta img { visibility: hidden; }
.foto.falta::after {
  content: attr(data-foto);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  color: var(--cacau-2);
  font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
}

/* Flores de enfeite: grandes, rosa claro, sempre saindo pela borda */
.flor {
  position: absolute;
  pointer-events: none;
  fill: var(--rosa);
  opacity: 0.55;
}
.flor .flor-miolo, .flor-miolo { fill: #D98FA3; }

/* ABERTURA ------------------------------------------------------------------------------------------------ */
.abertura {
  position: relative;
  padding-top: clamp(8px, 2vw, 24px);
}
/* Sai pela borda esquerda, abaixo do texto, e desce um pouco mais devagar que a página */
.flor-abertura {
  width: clamp(180px, 22vw, 340px); height: clamp(180px, 22vw, 340px);
  left: calc(-1 * clamp(80px, 9vw, 150px));
  bottom: calc(-1 * clamp(90px, 10vw, 170px));
  rotate: -12deg;
}
.abertura-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.titulo-abertura {
  font-size: clamp(60px, 15vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.titulo-abertura .l { display: block; }
.titulo-abertura + .lide { margin-top: clamp(24px, 2.4vw, 36px); }
.abertura-info {
  margin-top: 28px;
  color: var(--cacau-2);
  font-size: 13px; letter-spacing: 0.02em;
}
.abertura-foto { aspect-ratio: 4 / 5; }
.abertura-detalhe {
  width: 44%;
  aspect-ratio: 1;
  margin-top: -22%;
  margin-left: auto;
  margin-right: 6%;
  border: 6px solid var(--creme);
  border-radius: 4px;
  z-index: 2;
}
@media (max-width: 1023px) {
  .abertura-texto { order: 1; }
  .abertura-foto { order: 2; margin-inline: calc(-1 * var(--margem)); border-radius: 0; }
  .abertura-detalhe { order: 3; }
}
@media (min-width: 1024px) {
  .abertura-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--calha);
    align-items: end;
    /* A primeira tela inteira, descontados o aviso e o topo (cerca de 120px): os botões aparecem sem rolar */
    min-height: min(calc(100vh - 128px), 920px);
    min-height: min(calc(100svh - 128px), 920px);
    padding-bottom: clamp(28px, 3vw, 48px);
  }
  .abertura-texto {
    grid-column: 1 / 7;
    grid-row: 1;
    padding-bottom: clamp(8px, 2vw, 40px);
    position: relative; z-index: 2;
  }
  .titulo-abertura { font-size: clamp(80px, 8.2vw, 132px); }
  /* A foto sangra até a borda direita da janela */
  .abertura-foto {
    grid-column: 7 / 13;
    grid-row: 1;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 560px;
    margin-right: calc(-1 * max(var(--margem), (100vw - 1440px) / 2 + var(--margem)));
    border-radius: var(--raio) 0 0 var(--raio);
  }
  /* A altura vem da grade (a primeira tela), não da proporção da foto; o recorte guarda o nome dourado na parede */
  .abertura-foto img { position: absolute; inset: 0; object-position: 50% 30%; }
  .abertura-detalhe {
    grid-column: 6 / 9;
    grid-row: 1;
    align-self: end;
    width: auto;
    margin: 0 0 calc(-1 * clamp(40px, 5vw, 88px)) 0;
    border-width: 8px;
  }
}

/* CROISSANT ----------------------------------------------------------------------------------------------- */
/* Sem JavaScript ou com movimento reduzido: a cena tem altura própria e mostra o croissant pronto ao lado do
   texto. Com o pagina.js e movimento liberado (.js .croissant.anima): a seção ganha a altura da rolagem
   (--altura-croissant) e o palco fica preso no topo enquanto a linha do tempo anda. */
.croissant {
  --altura-croissant: 520vh;
  position: relative;
  margin-top: clamp(40px, 6vw, 96px);
}
.palco {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--creme-2);
}
.croissant.anima { height: var(--altura-croissant); }
.croissant.anima .palco { position: sticky; top: 0; }
@media (max-width: 767px) {
  .croissant { --altura-croissant: 420vh; }
}

.cena { position: absolute; inset: 0; }
/* Esmaecido do creme para a cena: o fim da abertura vira o começo do palco, sem corte seco */
.cena::after {
  content: '';
  position: absolute; inset: 0 0 auto;
  height: 30%;
  background: linear-gradient(var(--creme), rgba(251, 246, 239, 0));
  opacity: var(--esmaecido, 0);
  pointer-events: none;
  z-index: 5;
}
.camada { position: absolute; }
.camada img { width: 100%; height: 100%; object-fit: contain; }
.camada.foto { border-radius: 0; background: none; overflow: visible; }
.camada.foto.falta { outline: none; background: none; }

/* Fundo: o canto da árvore florida (foto do cliente, nítida), desfocado aqui como numa foto com pouca profundidade de
   campo, e com um véu creme para o rosa e o verde não brigarem com o croissant. Uma foto já desfocada na câmera
   dispensa o filtro: --desfoque-fundo: 0px. */
.croissant { --desfoque-fundo: 14px; }
.camada-fundo { inset: -4%; } /* passa da borda: a borda desfocada fica fora do palco, que corta o excesso */
.camada-fundo img { object-fit: cover; filter: blur(var(--desfoque-fundo, 0px)); scale: 1.06; }
.camada-fundo::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(251, 246, 239, 0) 30%, rgba(43, 26, 18, 0.22)),
    rgba(251, 246, 239, 0.3);
  pointer-events: none;
}
/* Enfeites em primeiro plano, saindo pelas bordas: as flores embaixo à esquerda (atrás do prato quando o croissant
   vai para o lado) e a xícara no alto à direita (acima do texto final). Fora de foco, como numa foto com pouca
   profundidade de campo: se os recortes vierem nítidos, aumentar --desfoque-enfeite (ex.: 3px). */
.camada-flores {
  width: clamp(240px, 34vw, 560px); aspect-ratio: 1;
  left: calc(-1 * clamp(70px, 8vw, 150px));
  bottom: -10%;
}
.camada-xicara {
  width: clamp(150px, 19vw, 320px); aspect-ratio: 1;
  right: calc(-1 * clamp(24px, 3vw, 60px));
  top: 4%;
}
.camada-flores img, .camada-xicara img { filter: blur(var(--desfoque-enfeite, 0px)); }
.produto {
  position: absolute;
  left: 50%; top: 52%;
  width: min(66vw, 1080px, calc((100svh - 140px) * 4 / 3));
  aspect-ratio: 4 / 3;
  translate: -50% -50%;
}
.produto .camada { inset: 0; }

.croissant-texto {
  position: absolute;
  right: max(var(--margem), (100vw - 1440px) / 2 + var(--margem));
  top: 50%;
  translate: 0 -50%;
  width: min(30vw, 420px);
  z-index: 6;
}
.croissant-texto p:last-child {
  margin-top: 20px;
  max-width: 30ch;
  color: var(--cacau-2);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
}
.titulo-croissant { font-size: clamp(52px, 5.6vw, 92px); }
.croissant-dica {
  position: absolute;
  left: 50%; bottom: 28px;
  translate: -50% 0;
  color: var(--cacau-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
  z-index: 6;
}
.croissant-dica::after {
  content: '';
  display: block;
  width: 1px; height: 28px;
  margin: 10px auto 0;
  background: currentColor;
  opacity: 0.5;
}

/* Pronto (sem animação): produto à esquerda, texto à direita */
.croissant:not(.anima) .produto { left: 35%; scale: 0.9; } /* o mesmo lugar do fim da animação */
.croissant:not(.anima) .croissant-dica { display: none; }

/* Lugares reservados das camadas: formas simples, tracejadas, onde cada parte vai ficar. Não imitam o produto. */
.camada.falta img { visibility: hidden; }
.camada.falta::after {
  content: attr(data-foto);
  position: absolute;
  display: grid; place-items: center;
  border: 1px dashed rgba(43, 26, 18, 0.32);
  color: var(--cacau-2);
  font-size: 12px; font-weight: 500; line-height: 1.3; text-align: center;
  background: rgba(251, 246, 239, 0.4);
}
.camada-fundo.falta { background: radial-gradient(80% 70% at 50% 60%, #F6EEE4, #E8D8C6); }
.camada-fundo.falta::after { content: none; }
.camada-flores.falta::after { inset: 18%; border-radius: 50%; background: rgba(235, 180, 193, 0.35); }
.camada-xicara.falta::after { inset: 22%; border-radius: 50%; }
.camada-prato.falta::after { left: 6%; right: 6%; top: 52%; bottom: 10%; border-radius: 50%; }
.camada-base.falta::after { left: 18%; right: 18%; top: 54%; bottom: 26%; border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%; }
.camada-nutella.falta::after { left: 20%; right: 20%; top: 48%; bottom: 44%; border-radius: 40px; background: rgba(110, 70, 45, 0.18); }
.camada-morangos.falta::after { left: 23%; right: 23%; top: 41%; bottom: 50%; border-radius: 40px; background: rgba(214, 90, 100, 0.16); }
.camada-topo.falta::after { left: 17%; right: 17%; top: 22%; bottom: 52%; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%; }
.camada-cobertura.falta::after { left: 26%; right: 26%; top: 15%; bottom: 74%; border-radius: 40px; background: rgba(110, 70, 45, 0.18); }
.camada-acabamento.falta::after { left: 30%; right: 30%; top: 6%; bottom: 84%; border-radius: 40px; background: rgba(214, 90, 100, 0.16); }

@media (max-width: 767px) {
  .produto { width: min(108vw, calc((100svh - 140px) * 4 / 3)); top: 46%; }
  /* No celular os dois enfeites ficam no alto, longe do texto, que entra embaixo */
  .camada-flores { width: 56vw; left: -24vw; top: -3%; bottom: auto; }
  .camada-xicara { width: 30vw; right: -10vw; top: 10%; }
  .croissant-texto {
    left: var(--margem); right: var(--margem);
    top: auto; bottom: clamp(28px, 6svh, 56px);
    translate: none;
    width: auto;
  }
  /* Degradê creme atrás do texto: embaixo do palco fica o painel verde da foto, escuro demais para o texto */
  .croissant-texto::before {
    content: '';
    position: absolute;
    inset: -72px calc(-1 * var(--margem)) calc(-1 * clamp(28px, 6svh, 56px));
    z-index: -1;
    background: linear-gradient(rgba(251, 246, 239, 0), rgba(251, 246, 239, 0.92) 38%);
  }
  .croissant-texto .sobretitulo { margin-bottom: 10px; }
  .croissant-texto p:last-child { margin-top: 12px; font-size: 16px; }
  .titulo-croissant { font-size: clamp(42px, 12vw, 60px); }
  .croissant:not(.anima) .produto { left: 50%; top: 36%; width: min(96vw, 520px); }
}

/* VITRINE ------------------------------------------------------------------------------------------------- */
.vitrine { padding-top: var(--respiro); }
.vitrine-cabeca { max-width: 760px; }
.vitrine-cabeca .lide { margin-top: clamp(20px, 2vw, 28px); }
.categorias {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 88px);
  margin-inline: calc(-1 * var(--margem));
  padding-inline: var(--margem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.categorias::-webkit-scrollbar { display: none; }
.categoria { scroll-snap-align: start; }
.categoria .foto { aspect-ratio: 4 / 5; }
.categoria .foto img { transition: transform 1.2s var(--suave); }
.categoria h3 {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.05;
}
.categoria p { margin-top: 4px; color: var(--cacau-2); font-size: 15px; }
@media (hover: hover) {
  .categoria:hover .foto img { transform: scale(1.035); }
}
/* Do computador para cima: três fotos em alturas e larguras diferentes, sem grade de cartões iguais */
@media (min-width: 1024px) {
  .categorias {
    grid-auto-flow: row;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--calha);
    align-items: start;
    margin-inline: 0; padding-inline: 0;
    overflow: visible;
  }
  .categoria:nth-child(1) { grid-column: 1 / 6; }
  .categoria:nth-child(2) { grid-column: 7 / 10; margin-top: clamp(80px, 10vw, 180px); }
  .categoria:nth-child(3) { grid-column: 10 / 13; margin-top: clamp(24px, 3vw, 48px); }
}

/* DESTAQUES ----------------------------------------------------------------------------------------------- */
.destaques { padding-top: var(--respiro); }
.destaques-titulo { margin-bottom: clamp(48px, 6vw, 96px); }
.destaque {
  display: grid;
  gap: 28px;
  align-items: center;
}
.destaque + .destaque { margin-top: clamp(72px, 9vw, 140px); }
.destaque-foto { aspect-ratio: 4 / 5; }
.destaque-texto h3 { font-size: clamp(38px, 4.4vw, 68px); }
.destaque-texto p {
  margin-top: 16px;
  max-width: 28ch;
  color: var(--cacau-2);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .destaque { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); }
  .destaque-foto { grid-column: 1 / 7; }
  .destaque-texto { grid-column: 8 / 12; }
  .destaque-invertido .destaque-foto { grid-column: 7 / 13; grid-row: 1; }
  .destaque-invertido .destaque-texto { grid-column: 2 / 6; grid-row: 1; }
}

/* AMBIENTE ------------------------------------------------------------------------------------------------ */
/* Bloco cacau de ponta a ponta: o momento mais fotográfico da página, com a luz quente das fotos sobre o escuro */
.ambiente {
  position: relative;
  margin-top: var(--respiro);
  padding-block: var(--respiro);
  background: var(--cacau);
  color: var(--creme);
  overflow: clip;
}
.ambiente .titulo em { color: var(--rosa); }
.ambiente .lide { color: #E6D7CB; margin-top: clamp(20px, 2vw, 28px); }
.ambiente .foto { background: #3A271C; }
.ambiente .foto.falta {
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(235, 180, 193, 0.18), transparent 60%),
    radial-gradient(90% 80% at 80% 90%, rgba(169, 194, 176, 0.14), transparent 60%),
    #3A271C;
  outline-color: rgba(251, 246, 239, 0.25);
}
.ambiente .foto.falta::after { color: #E6D7CB; }
.flor-ambiente {
  width: clamp(200px, 24vw, 380px); height: clamp(200px, 24vw, 380px);
  right: calc(-1 * clamp(60px, 7vw, 120px));
  top: calc(-1 * clamp(40px, 4vw, 80px));
  opacity: 0.22;
  rotate: 18deg;
}
.ambiente-grade { display: grid; gap: 24px; }
.ambiente-principal { aspect-ratio: 4 / 5; margin-top: 24px; }
.ambiente-flores { aspect-ratio: 3 / 4; width: 62%; }
.ambiente-mesa { aspect-ratio: 1; width: 48%; margin-left: auto; margin-top: -30%; border: 6px solid var(--cacau); border-radius: 4px; }
@media (min-width: 1024px) {
  .ambiente-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--calha);
    row-gap: 0;
    align-items: start;
  }
  .ambiente-texto { grid-column: 1 / 6; grid-row: 1; }
  .ambiente-principal { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: 0; }
  .ambiente-flores { grid-column: 2 / 6; grid-row: 2; width: auto; margin-top: clamp(64px, 7vw, 120px); }
  .ambiente-mesa { grid-column: 5 / 8; grid-row: 3; width: auto; margin: calc(-1 * clamp(80px, 9vw, 160px)) 0 0; }
}

/* AVALIAÇÕES ---------------------------------------------------------------------------------------------- */
.avaliacoes { padding-top: var(--respiro); }
.avaliacoes-cabeca {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px 48px;
}
.avaliacoes-cabeca .titulo { max-width: 14ch; }
.avaliacoes-resumo {
  display: flex; align-items: center; gap: 10px;
  color: var(--cacau-2);
  font-size: 15px;
}
.avaliacoes-resumo strong { color: var(--cacau); font-weight: 600; font-size: 17px; }
.avaliacoes-trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 72px);
  margin-inline: calc(-1 * var(--margem));
  padding-inline: var(--margem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.avaliacoes-trilho::-webkit-scrollbar { display: none; }
.avaliacoes-trilho:focus-visible { outline-offset: -2px; }
.avaliacao {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
}
.avaliacao .estrelas { display: flex; gap: 3px; color: var(--dourado); }
.avaliacao .estrelas svg { width: 16px; height: 16px; fill: currentColor; }
.avaliacao blockquote {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.3;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  overflow: hidden;
}
.avaliacao figcaption {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  color: var(--cacau-2);
}
.avaliacao .autor-foto {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--creme-2);
  object-fit: cover;
}
.avaliacao .autor { display: flex; flex-direction: column; line-height: 1.35; margin-right: auto; }
.avaliacao .autor a { color: var(--cacau); font-weight: 600; text-decoration: none; }
.avaliacao .autor a:hover { text-decoration: underline; text-decoration-color: var(--rosa-forte); text-underline-offset: 4px; }
.avaliacao .ver-no-google {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rosa-forte);
  text-underline-offset: 5px;
  min-height: 44px; display: inline-flex; align-items: center;
}
/* Uma avaliação: ela sozinha, grande, no meio. Duas ou três: lado a lado. Quatro ou cinco: trilho com setas. */
.avaliacoes[data-quantas="1"] .avaliacoes-trilho { grid-auto-columns: 100%; overflow: visible; }
.avaliacoes[data-quantas="1"] .avaliacao { max-width: 860px; }
.avaliacoes[data-quantas="1"] blockquote { font-size: clamp(26px, 3vw, 44px); -webkit-line-clamp: unset; line-clamp: none; }
@media (min-width: 768px) {
  .avaliacoes-trilho { grid-auto-columns: calc((100% - 2 * var(--margem) - 32px) / 2); }
  .avaliacoes-trilho { gap: 32px; }
}
@media (min-width: 1024px) {
  .avaliacoes-trilho {
    margin-inline: 0; padding-inline: 0;
    scroll-padding-inline: 0;
    grid-auto-columns: calc((100% - 2 * 48px) / 3);
    gap: 48px;
  }
  .avaliacoes[data-quantas="2"] .avaliacoes-trilho { grid-auto-columns: calc((100% - 64px) / 2); gap: 64px; }
}
.avaliacoes-pe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(32px, 4vw, 56px);
}
.avaliacoes-criterio { color: var(--cacau-2); font-size: 14px; flex: 1 1 100%; }
.avaliacoes-acoes { display: flex; align-items: center; gap: 24px; }
.avaliacoes-botoes { display: flex; gap: 10px; }
.seta-botao {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--linha); border-radius: 50%;
  background: transparent; color: var(--cacau);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.seta-botao svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .seta-botao:hover { background: var(--cacau); border-color: var(--cacau); color: var(--creme); }
}
.seta-botao[aria-disabled="true"] { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .seta-botao[aria-disabled="true"]:hover { background: transparent; border-color: var(--linha); color: var(--cacau); }
}
/* Atribuição do Google: texto "Google Maps" em sans, 12 a 16px, #5E5E5E, numa linha, sem tradução */
.atribuicao-google {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #5E5E5E;
  white-space: nowrap;
}

/* GALERIA ------------------------------------------------------------------------------------------------- */
.galeria { padding-top: var(--respiro); }
.galeria-cabeca {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 48px;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.galeria-grade { display: grid; gap: 16px; }
.galeria-coluna { display: grid; gap: 16px; align-content: start; }
.galeria-par { display: grid; grid-template-columns: 1fr 0.86fr; gap: 16px; align-items: end; }
.galeria-1 { aspect-ratio: 4 / 3; }
.galeria-2 { aspect-ratio: 3 / 4; }
.galeria-3 { aspect-ratio: 1; }
.galeria-4 { aspect-ratio: 3 / 4; }
.galeria-5 { aspect-ratio: 4 / 5; width: 78%; margin-left: auto; }
.galeria-6 { aspect-ratio: 21 / 9; margin-top: 16px; }
@media (min-width: 1024px) {
  .galeria-grade { grid-template-columns: 1.5fr 1fr; gap: var(--calha); align-items: start; }
  .galeria-coluna { gap: var(--calha); }
  .galeria-par { gap: var(--calha); width: 92%; }
  .galeria-coluna-2 { padding-top: clamp(80px, 12vw, 200px); }
  .galeria-5 { width: 74%; margin-left: 0; }
  .galeria-6 { width: 84%; margin: clamp(48px, 6vw, 96px) 0 0 auto; }
}

/* VISITAR ------------------------------------------------------------------------------------------------- */
.visite {
  position: relative;
  margin-top: var(--respiro);
  padding-block: var(--respiro);
  background: var(--rosa-claro);
  overflow: clip;
}
.flor-visite {
  width: clamp(220px, 26vw, 420px); height: clamp(220px, 26vw, 420px);
  left: calc(-1 * clamp(80px, 9vw, 160px));
  bottom: calc(-1 * clamp(60px, 7vw, 120px));
  opacity: 0.7;
  rotate: 8deg;
}
.visite-grade { position: relative; display: grid; gap: 48px; }
.titulo-visite { font-size: clamp(56px, 8vw, 128px); line-height: 0.95; }
.endereco {
  margin-top: clamp(28px, 3vw, 40px);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
}
.horarios {
  display: grid; gap: 10px;
  margin-top: 28px;
  font-size: 15px;
}
.horarios div { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.horarios dt { min-width: 160px; color: var(--verde); font-weight: 600; }
@media (max-width: 479px) {
  .horarios div { flex-direction: column; }
}
.horarios dd { color: var(--cacau-2); font-variant-numeric: tabular-nums; }
.mapa { display: grid; gap: 8px; align-content: start; }
.mapa .foto, .mapa iframe {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--raio);
}
.mapa iframe { background: var(--creme-2); }
.mapa .foto.falta { background: rgba(251, 246, 239, 0.55); }
.mapa-link { justify-self: start; }
@media (min-width: 1024px) {
  .visite-grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: end; }
  .visite-texto { grid-column: 1 / 7; }
  .mapa { grid-column: 7 / 13; }
}

/* RODAPÉ -------------------------------------------------------------------------------------------------- */
.rodape-linha {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px 40px;
  padding-block: 48px 56px;
  font-size: 14px;
  color: var(--cacau-2);
}
.rodape-marca { display: flex; align-items: center; gap: 14px; }
.rodape-marca .marca-selo { width: 56px; height: 56px; }
.rodape-marca .marca-nome { height: 30px; }
.rodape-marca p { margin-top: 8px; }

/* Página 404 */
.pagina-erro { min-height: 100vh; min-height: 100svh; }
.erro { padding-block: clamp(64px, 10vw, 160px) var(--respiro); }
.erro .lide { margin-top: 24px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.rodape-links a, .rodape-credito a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-color: var(--rosa-forte); text-underline-offset: 5px;
}
.rodape-links a:hover, .rodape-credito a:hover { color: var(--rosa-forte); }

/* MOVIMENTO ----------------------------------------------------------------------------------------------- */
/* Entrada da abertura: as linhas do H1 sobem e aparecem uma depois da outra; o resto vem num fade curto. Só CSS. */
@keyframes subir { from { opacity: 0; transform: translateY(0.25em); } }
@keyframes surgir { from { opacity: 0; } }
@keyframes revelar-foto { from { opacity: 0; transform: scale(1.04); } }
@media (prefers-reduced-motion: no-preference) {
  .titulo-abertura .l { animation: subir 0.9s var(--suave) both; }
  .titulo-abertura .l:nth-child(2) { animation-delay: 0.1s; }
  .titulo-abertura .l:nth-child(3) { animation-delay: 0.2s; }
  .abertura-texto .lide, .abertura-texto .acoes, .abertura-info { animation: surgir 0.6s ease-out 0.45s both; }
  .abertura-foto img { animation: revelar-foto 1.4s var(--suave) both; }
}
/* Ao rolar (o pagina.js põe .revela só no que está abaixo da janela ao carregar e .visto quando chega nela) */
.revela { opacity: 0; transform: translateY(20px); }
.revela.visto { opacity: 1; transform: none; transition: opacity 0.7s ease-out, transform 0.9s var(--suave); }
.foto.revela { transform: none; }
.foto.revela img { transform: scale(1.05); }
.foto.revela.visto img { transform: none; transition: transform 1.4s var(--suave); }
.foto.revela.visto { transition: opacity 0.9s ease-out; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .revela, .foto.revela img { opacity: 1 !important; transform: none !important; }
  [data-parallax] { translate: none !important; }
}

@media print {
  .aviso-conceito, .croissant-dica, .flor { display: none; }
  .ambiente { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}