/* =====================================================================
   Espaço Palmeiras — estilos
   ---------------------------------------------------------------------
   Índice
   01. Tokens (cores, tipos, medidas)
   02. Base
   03. Utilitários (conteiner, rótulo, títulos, ícones)
   04. Botões
   05. Topo
   06. Hero (banner + fileira de fotos)
   08. Seções
   09. O espaço (cartão com as ocasiões + carrosséis)
   10. Avaliações (resumo + carrossel)
   11. Como chegar
   12. Chamada final
   13. Rodapé
   14. Galeria
   15. Revelação no scroll
   16. Movimento reduzido
   17. Página de links (links.html)
   18. Popup do QR Code Pix (links.html)
   ===================================================================== */


/* ---------- 01. Tokens ----------
   Verde e dourado saem do próprio logo: o texto é #002620 e a palmeira vai de
   #AD8448 a #E9CB88. O verde do fundo é um passo mais claro que o do logo
   para ler como "verde" e não como preto em tela de celular. */
:root {
  --mata-950: #001D17;
  --mata-900: #022A22;
  --mata-800: #04362B;
  --mata-700: #0B4636;
  --mata-600: #14563F;
  --folha-500: #1E6A50;
  --folha-200: #A9CDB8;

  --nevoa-50:  #F2F6F1;
  --nevoa-100: #E4ECE3;
  --nevoa-200: #CFDDCF;

  --tinta:   #0A231C;
  --tinta-2: #40594F;

  --claro:   #EEF3EC;
  --claro-2: rgba(238, 243, 236, .74);
  --claro-3: rgba(238, 243, 236, .5);

  --ouro-200: #F2DDA4;
  --ouro-300: #E6C886;
  --ouro-400: #D2AD69;
  --ouro-500: #B88C4A;
  --ouro-700: #8A6530;

  /* dourado "metálico" do logo. A versão do botão é mais clara para o texto
     verde-escuro passar folgado no contraste (AA). */
  --ouro-metal: linear-gradient(115deg, #C9A35F 0%, #F2DDA4 38%, #D6B373 62%, #EED39A 100%);

  --f-display: "Gloock", Georgia, "Times New Roman", serif;
  --f-texto:   "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-rotulo:  "Josefin Sans", "Figtree", system-ui, sans-serif;

  --max: 1240px;
  --gutter: clamp(16px, 4.5vw, 48px);
  --raio: 20px;
  --topo-h: 96px;
  --topo-h-rolado: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}


/* ---------- 02. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h-rolado) + 8px);
  -webkit-tap-highlight-color: rgba(230, 200, 134, .25);
}
/* sem rubber-band no desktop; no toque mantém o puxar-para-atualizar */
@media (pointer: fine) {
  html { overscroll-behavior: none; }
}
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--nevoa-50);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure, blockquote, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--ouro-300);
  outline-offset: 3px;
  border-radius: 6px;
}
.secao--clara :focus-visible { outline-color: var(--folha-500); }

.pular {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ouro-300);
  color: var(--mata-900);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.pular:focus-visible { transform: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* par do .so-largo: texto que só aparece no celular */
.so-estreito { display: none; }


/* ---------- 03. Utilitários ---------- */
.conteiner {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* palavras com hífen que não podem quebrar no meio (pula-pula) */
.sem-quebra { white-space: nowrap; }

.icone {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}


/* ---------- 04. Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 54px;
  padding: 0 1.6em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .25s var(--ease), background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .25s ease;
}
.botao:active { transform: translateY(1px) scale(.99); }

.botao--ouro {
  background: var(--ouro-metal);
  background-color: var(--ouro-300);
  color: var(--mata-900);
  box-shadow: 0 14px 34px -14px rgba(230, 200, 134, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.botao--ouro:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(230, 200, 134, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.botao--contorno {
  border-color: rgba(230, 200, 134, .55);
  color: var(--ouro-200);
}
.botao--contorno:hover {
  background-color: var(--ouro-300);
  border-color: var(--ouro-300);
  color: var(--mata-900);
}

.botao--pequeno { min-height: 44px; padding: 0 1.15em; font-size: .95rem; }
.botao--bloco   { width: 100%; }

.botao-redondo {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid var(--nevoa-200);
  border-radius: 50%;
  background: #fff;
  color: var(--mata-800);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.botao-redondo:hover:not(:disabled) {
  background-color: var(--mata-800);
  border-color: var(--mata-800);
  color: var(--claro);
}
.botao-redondo:disabled { opacity: .35; cursor: default; }
.botao-redondo--claro {
  background: rgba(238, 243, 236, .08);
  border-color: rgba(238, 243, 236, .22);
  color: var(--claro);
}
.botao-redondo--claro:hover:not(:disabled) {
  background-color: var(--ouro-300);
  border-color: var(--ouro-300);
  color: var(--mata-900);
}

/* ---------- 05. Topo ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.topo.is-rolado {
  background-color: rgba(2, 42, 34, .9);
  box-shadow: 0 1px 0 rgba(230, 200, 134, .14), 0 10px 30px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.topo__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  height: var(--topo-h);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}
.topo__marca {
  display: block;
  margin-right: auto;
  border-radius: 6px;
}
.topo__marca img { width: auto; height: 62px; }
/* logo grande só por cima do banner; rolando, o topo vira barra e encolhe */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .topo__inner,
  .topo__marca img { transition: height .3s var(--ease); }
}
@media (min-width: 761px) {
  .topo.is-rolado .topo__inner { height: var(--topo-h-rolado); }
  .topo.is-rolado .topo__marca img { height: 44px; }
}
.topo__nav {
  display: flex;
  gap: 4px;
}
.topo__nav a {
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .72);
  font-family: "Poppins", var(--f-texto);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.topo__nav a:hover { color: var(--claro); background-color: rgba(238, 243, 236, .07); }


/* ---------- 06. Hero ----------
   Medidas tiradas da referência (doisamoresecia.com.br) a 1440px:
   script 100px a 28% de opacidade, sobrepondo o título em -0.3em; título
   Poppins 200, 56px, caixa alta, 8px de espaçamento; apoio 18px com 3px;
   botão em pílula, Poppins 500, 20px; 133px livres abaixo do botão. */
.hero {
  --tracking: clamp(3px, .55vw, 8px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--mata-900);
  color: #fff;
  text-align: center;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  will-change: transform;
}
.hero__fundo picture,
.hero__fundo img {
  width: 100%;
  height: 100%;
}
.hero__fundo img {
  object-fit: cover;
  object-position: 50% 24%;
}
/* véu: o da referência é preto a ~80%; aqui é o verde da marca */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(1, 29, 23, .8) 0%, rgba(2, 42, 34, .84) 100%);
}
.hero__conteudo {
  max-width: 1120px;
  margin-inline: auto;
  padding: calc(var(--topo-h) + 40px) var(--gutter) 160px;
}
.hero__script {
  position: relative;
  z-index: 0;
  margin-bottom: -.3em;
  color: rgba(242, 221, 164, .3);
  font-family: "Petit Formal Script", cursive;
  font-size: clamp(4.2rem, 7vw, 6.25rem);
  line-height: 1;
}
.hero__titulo {
  position: relative;
  z-index: 1;
  /* o letter-spacing sobra depois da última letra e empurra a linha
     centralizada para a esquerda; o recuo igual na frente compensa */
  padding-left: var(--tracking);
  font-family: "Poppins", var(--f-texto);
  font-weight: 200;
  font-size: clamp(1.6rem, .9rem + 2.9vw, 3.5rem);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-wrap: balance;
}
/* na tela larga quem quebra a linha é o <br class="so-largo">, como na
   referência (2 linhas); o balance só entra no celular, onde o <br> some */
.hero__lead {
  margin: 14px auto 0;
  padding-left: clamp(1.5px, .21vw, 3px);
  font-family: "Poppins", var(--f-texto);
  font-weight: 400;
  font-size: clamp(.95rem, .85rem + .35vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: clamp(1.5px, .21vw, 3px);
}
.hero__cta { margin-top: 60px; }

/* botão em pílula da referência (Poppins 500, 20px, raio 52px). Classe
   compartilhada: banner e cartão das ocasiões usam o mesmo botão. */
.pilula {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 6px 30px;
  border-radius: 52px;
  background: var(--ouro-metal);
  background-color: var(--ouro-300);
  color: var(--mata-900);
  font-family: "Poppins", var(--f-texto);
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
  line-height: 34px;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(230, 200, 134, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
  touch-action: manipulation;
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.pilula:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(230, 200, 134, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.pilula:active { transform: translateY(1px) scale(.99); }

/* variantes da pílula: tamanho médio (botões dentro de cartões) e a cor
   verde, para quando o dourado já está em uso por perto */
.pilula--media {
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 1rem;
  line-height: 1.2;
}
.pilula--media .icone { width: 18px; height: 18px; }
.pilula--verde {
  background: var(--mata-800);
  color: #fff;
  box-shadow: none;
  transition: transform .25s var(--ease), box-shadow .25s ease, background-color .2s ease;
}
.pilula--verde:hover {
  background: var(--mata-600);
  box-shadow: 0 12px 26px -14px rgba(4, 54, 43, .7);
}
/* contorno dourado, para o segundo botão quando o dourado cheio já está
   logo acima (o "Gerar QR Code" debaixo do "Copiar chave Pix") */
.pilula--contorno {
  background: none;
  color: var(--ouro-200);
  box-shadow: inset 0 0 0 1.5px rgba(230, 200, 134, .5);
  transition: transform .25s var(--ease), box-shadow .25s ease, background-color .2s ease;
}
.pilula--contorno:hover {
  background-color: rgba(230, 200, 134, .1);
  box-shadow: inset 0 0 0 1.5px var(--ouro-300);
}

/* entrada do texto em cascata */
@media (prefers-reduced-motion: no-preference) {
  .hero__entra {
    animation: entra .9s var(--ease) both;
    animation-delay: calc(var(--e, 0) * 110ms + 80ms);
  }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(18px); }
}

/* fileira de fotos em degraus: 6 colunas de 14,17% com 3% entre elas
   (204px e 43px a 1440), as pares descem 3,6% e todas sobem 77px por cima
   da base do banner */
.hero-fotos {
  position: relative;
  z-index: 2;
  margin-top: -77px;
}
.hero-fotos__lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  column-gap: 3vw;
}
.hero-fotos__item:nth-child(even) { margin-top: 3.6vw; }
.hero-fotos__botao {
  /* relative: o texto .sr-only (absolute) precisa ficar preso aqui dentro;
     sem isso ele escapa do corte da faixa no celular e alarga a página */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 204 / 363;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--mata-700);
  cursor: zoom-in;
  touch-action: manipulation;
}
.hero-fotos__botao picture,
.hero-fotos__botao img {
  width: 100%;
  height: 100%;
}
.hero-fotos__botao img {
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.hero-fotos__botao:hover img { transform: scale(1.05); }
.hero-fotos__botao:focus-visible { outline-offset: 4px; outline-color: var(--folha-500); border-radius: 0; }


/* ---------- 08. Seções ---------- */
.secao {
  position: relative;
  padding-block: clamp(80px, 10vw, 140px);
}
.secao--clara {
  background-color: var(--nevoa-50);
  color: var(--tinta);
}
.secao--mata {
  background-color: var(--mata-800);
  color: var(--claro);
}


/* ---------- 09. O espaço (ocasiões) ---------- */

/* título de seção no idioma do banner: palavra em script translúcida por
   trás de um título fino em caixa alta. Reutilizável em outras seções. */
.titulo-script {
  position: relative;
  z-index: 0;
  margin-bottom: -.34em;
  color: rgba(184, 140, 74, .3);
  font-family: "Petit Formal Script", cursive;
  font-size: clamp(3.4rem, 5.6vw, 5.5rem);
  line-height: 1;
}
.titulo-fino {
  --tracking: clamp(2px, .42vw, 6px);
  position: relative;
  z-index: 1;
  padding-left: var(--tracking); /* compensa o espaçamento que sobra no fim */
  color: var(--mata-800);
  font-family: "Poppins", var(--f-texto);
  font-weight: 300;
  font-size: clamp(1.55rem, 1rem + 2.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-wrap: balance;
}
/* as mesmas duas peças sobre fundo escuro (chamada final), com o dourado
   e o branco do banner */
.titulo-script--claro { color: rgba(242, 221, 164, .3); }
.titulo-fino--claro {
  color: #fff;
  font-weight: 200;
}

.ocasioes__cabeca { text-align: center; }
.ocasioes__intro {
  max-width: 52ch;
  margin: 18px auto 0;
  color: var(--tinta-2);
  font-family: "Poppins", var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: balance;
}

/* o cartão branco da referência: borda quase invisível, raio de 8px e
   sombra curta. Ocupa a largura toda do conteúdo (1240px) e tem pouco
   respiro lateral, para as fotos ficarem grandes. O padding de baixo deixa
   espaço para a metade do botão que fica dentro do cartão. */
.ocasioes__cartao {
  --cartao-px: clamp(20px, 2.4vw, 32px);
  position: relative;
  max-width: var(--max);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(40px, 5.6vw, 80px) var(--cartao-px) clamp(64px, 6vw, 84px);
  border: 1px solid rgba(4, 54, 43, .08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 18px -6px rgba(4, 54, 43, .1);
}
.ocasioes__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(20px, 2.6vw, 36px);
}

/* coluna: título e texto em cima, fotos embaixo. O texto cresce (flex: 1)
   e empurra o carrossel, então as três fotos começam na mesma altura mesmo
   com textos de tamanhos diferentes. */
.ocasiao {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.ocasiao__texto { flex: 1; }
.ocasiao__titulo {
  padding-bottom: 12px;
  color: var(--tinta);
  font-family: "Poppins", var(--f-texto);
  font-weight: 600;
  /* ~26px no computador, encolhendo com a coluna para não passar de 2 linhas */
  font-size: clamp(1.35rem, .27rem + 1.7vw, 1.65rem);
  line-height: 1.12;
  text-wrap: balance;
}
/* justificado como na referência, mas com hifenização: sem ela, a coluna
   estreita abre buracos entre as palavras */
.ocasiao__desc {
  color: var(--tinta-2);
  font-family: "Poppins", var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* carrossel: rolagem nativa com snap, uma foto por vez, sem arredondar
   (como as fotos da referência e a fileira do banner) */
.carrossel {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--nevoa-100);
}
.carrossel__trilho {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.carrossel__slide button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  touch-action: manipulation;
}
.carrossel__slide picture,
.carrossel__slide img {
  width: 100%;
  height: 100%;
}
.carrossel__slide img {
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.carrossel__slide button:hover img { transform: scale(1.04); }
.carrossel__slide button:focus-visible { outline-offset: -4px; outline-color: var(--ouro-300); }

/* pontos embaixo, sobre a foto. Brancos com sombra leve: aparecem tanto na
   foto clara do gramado quanto na do salão à noite. Sem setas, são eles
   que trocam a foto no computador (no celular também dá para arrastar). */
.carrossel__pontos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
}
.carrossel__pontos:empty { display: none; }
.carrossel__ponto {
  display: grid;
  place-items: center;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.carrossel__ponto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: background-color .2s ease, transform .2s ease;
}
.carrossel__ponto[aria-current="true"]::before {
  background: #fff;
  transform: scale(1.15);
}
.carrossel__ponto:focus-visible { outline-offset: -4px; }

/* o botão "monta" na borda de baixo do cartão, como na referência */
.ocasioes__acao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  transform: translateY(50%);
}


/* ---------- 10. Avaliações ----------
   No formato dos widgets de avaliação do Google, como o da referência
   (doisamoresecia.com.br): fundo branco, resumo da nota à esquerda e
   cartões claros com nome, estrelas e texto à direita, dois por vez. */
.avaliacoes { background-color: #fff; }
.avaliacoes__cabeca { text-align: center; }
.avaliacoes__apoio {
  margin-bottom: 10px;
  color: var(--tinta-2);
  font-family: "Poppins", var(--f-texto);
  font-weight: 500;
  font-size: clamp(.95rem, .9rem + .2vw, 1.0625rem);
}

.avaliacoes__painel {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  max-width: 1080px;
  margin: clamp(40px, 5vw, 60px) auto 0;
  font-family: "Poppins", var(--f-texto);
}

/* resumo: selo, estrelas, total e o logotipo do Google */
.avaliacoes__resumo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.avaliacoes__selo {
  color: var(--tinta);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.avaliacoes__resumo .estrelas { margin: 8px 0 6px; }
.avaliacoes__total {
  color: var(--tinta);
  font-size: .95rem;
  line-height: 1.4;
}
.avaliacoes__total strong { font-weight: 600; }
.avaliacoes__google {
  display: block;
  margin-top: 10px;
  padding: 2px 4px;
  border-radius: 6px;
}
.avaliacoes__google svg { width: 112px; height: 38px; }

/* estrelas: uma faixa com o desenho da estrela repetido como máscara. O
   dourado cobre --nota/5 da largura, então meia estrela sai sozinha. */
.estrelas {
  --nota: 5;
  display: block;
  flex: none;
  width: 5.75em;
  height: 1em;
  font-size: 1.05rem;
  background: linear-gradient(90deg, #F6BB06 calc(var(--nota) / 5 * 100%), #D5DAD5 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1.5 23 20'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") 0 0 / 1.15em 1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 1.5 23 20'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") 0 0 / 1.15em 1em repeat-x;
}
.estrelas--grande { font-size: 1.9rem; }

/* carrossel: rolagem nativa com snap, um cartão por clique nas setas */
.avaliacoes__carrossel { position: relative; }
.avaliacoes__faixa {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 10px;
}
.avaliacoes__faixa::-webkit-scrollbar { display: none; }
/* com JS, todos os cartões fechados têm a altura do maior deles
   (--altura-cartao, medida no JS) e só o que abre no "Leia mais" cresce;
   esticar pela linha deixava os outros vazios e compridos */
.js .avaliacoes__faixa { align-items: flex-start; }

.avaliacao {
  display: flex;
  flex: 0 0 calc((100% - 16px) / 2);
  min-width: 0;
  scroll-snap-align: start;
  /* avatar sem foto, como o do Google: inicial sobre uma cor */
  --cor-avatar: var(--folha-500);
}
.avaliacao:nth-child(5n+2) { --cor-avatar: #B4583C; }
.avaliacao:nth-child(5n+3) { --cor-avatar: #3A6EA5; }
.avaliacao:nth-child(5n+4) { --cor-avatar: #7A4E8C; }
.avaliacao:nth-child(5n+5) { --cor-avatar: var(--ouro-700); }

.avaliacao figure {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--altura-cartao, 0);
  padding: 20px;
  border-radius: 10px;
  background: var(--nevoa-50);
}
.avaliacao__autor {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avaliacao__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--cor-avatar);
  color: #fff;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1;
}
.avaliacao__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--tinta);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avaliacao__g {
  flex: none;
  align-self: flex-start;
  width: 20px;
  height: 20px;
}
.avaliacao__nota {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
}
.avaliacao__verificada { flex: none; width: 15px; height: 15px; }
.avaliacao blockquote { margin-top: 10px; }
.avaliacao__texto {
  color: var(--tinta);
  font-size: .9375rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: break-word;
}
/* com JS, textos longos param na 4ª linha e ganham o "Leia mais" */
.js .avaliacao__texto:not(.is-aberto) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.avaliacao__mais {
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font-size: .8125rem;
  cursor: pointer;
}
.avaliacao__mais:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: .25em; }

/* setas montadas na borda dos cartões, como na referência. O ::after
   aumenta a área de toque para 46px sem aumentar o círculo. */
.avaliacoes__seta {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 1px solid rgba(10, 35, 28, .08);
  border-radius: 50%;
  background: #fff;
  color: var(--tinta);
  box-shadow: 0 2px 8px -2px rgba(10, 35, 28, .3);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.avaliacoes__seta::after {
  content: "";
  position: absolute;
  inset: -7px;
}
.avaliacoes__seta[hidden] { display: none; }
.avaliacoes__seta .icone { width: 16px; height: 16px; }
.avaliacoes__seta--ant { left: -16px; }
.avaliacoes__seta--prox { right: -16px; }
.avaliacoes__seta:hover {
  background-color: var(--mata-800);
  border-color: var(--mata-800);
  color: var(--claro);
}


/* ---------- 11. Como chegar ----------
   No idioma do banner (Poppins + palavra em script) e do cartão das
   ocasiões: borda quase invisível, raio de 8px e sombra curta. O cartão é
   dividido: informações à esquerda, mapa encostado na borda à direita. */
.local__cabeca { text-align: center; }
.local__intro {
  max-width: 50ch;
  margin: 18px auto 0;
  color: var(--tinta-2);
  font-family: "Poppins", var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  text-wrap: balance;
}

.local__cartao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  max-width: var(--max);
  margin: clamp(40px, 5vw, 64px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(4, 54, 43, .08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 18px -6px rgba(4, 54, 43, .1);
  font-family: "Poppins", var(--f-texto);
}
.local__info { padding: clamp(28px, 4.4vw, 60px); }

.local__rotulo {
  color: var(--ouro-700);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.local__rotulo--contato {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--nevoa-100);
}
.local__endereco { margin-top: 10px; }
.local__rua {
  display: block;
  color: var(--tinta);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + .9vw, 1.85rem);
  line-height: 1.15;
}
.local__cidade {
  display: block;
  margin-top: 8px;
  color: var(--tinta-2);
  font-size: 1rem;
}
/* o botão de rota e, ao lado, o "copiar endereço" (para colar no app de
   transporte); no celular o botão ocupa a linha e o link desce */
.local__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 24px;
}
.local__copiar-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--folha-500);
  font-family: inherit;
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: underline;
  text-decoration-color: rgba(30, 106, 80, .35);
  text-underline-offset: .3em;
  cursor: pointer;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.local__copiar-botao .icone { width: 18px; height: 18px; }
.local__copiar-botao:hover { color: var(--mata-800); text-decoration-color: currentColor; }
.local__status {
  color: var(--folha-500);
  font-size: .875rem;
  font-weight: 600;
}

.contatos {
  display: grid;
  gap: 2px;
  margin-top: 12px;
}
.contatos a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-radius: 10px;
  color: var(--tinta);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}
.contatos__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nevoa-50);
  color: var(--mata-800);
  transition: background-color .2s ease, color .2s ease;
}
.contatos__icone .icone { width: 20px; height: 20px; }
.contatos small {
  display: block;
  color: var(--tinta-2);
  font-size: .8125rem;
  font-weight: 400;
}
.contatos a:hover .contatos__icone { background-color: var(--mata-800); color: var(--ouro-200); }

.local__visita { width: 100%; margin-top: 28px; }

/* o mapa estica até a altura do cartão: a coluna da grade estica e o
   iframe ocupa tudo */
.local__mapa {
  position: relative;
  min-height: 420px;
  background: var(--nevoa-100);
}
.local__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ---------- 12. Chamada final ----------
   Fecha a página com a voz do banner: as classes de título padrão (script
   + título fino) na variante clara, texto e botão em pílula em Poppins. */
.chamada {
  position: relative;
  overflow: hidden;
  padding-block: clamp(88px, 11vw, 150px);
  background-color: var(--mata-900);
  background-image: radial-gradient(50% 70% at 50% 0%, rgba(30, 106, 80, .6), rgba(30, 106, 80, 0) 70%);
  color: var(--claro);
  text-align: center;
}
.chamada__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chamada__simbolo { width: 76px; height: 76px; margin-bottom: 14px; }
/* no tamanho do título do banner (56px e 8px de espaçamento), maior que o
   das seções: é a última chamada da página */
.chamada__titulo {
  --tracking: clamp(3px, .55vw, 8px);
  font-size: clamp(1.7rem, .9rem + 2.9vw, 3.5rem);
  line-height: 1.05;
}
.chamada__texto {
  max-width: 44ch;
  margin-top: 22px;
  color: var(--claro-2);
  font-family: "Poppins", var(--f-texto);
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.6;
  text-wrap: balance;
}
.chamada__cta { margin-top: 40px; }
.chamada__fone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--claro-3);
  font-family: "Poppins", var(--f-texto);
  font-size: .95rem;
}
.chamada__fone a {
  color: var(--ouro-200);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-underline-offset: .25em;
}


/* ---------- 13. Rodapé ---------- */
.rodape {
  padding-top: clamp(56px, 7vw, 80px);
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  background-color: var(--mata-950);
  color: var(--claro-2);
  font-size: .96rem;
}
.rodape__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
}
.rodape__marca img { width: 220px; }
.rodape__marca p { max-width: 30ch; margin-top: 18px; }
.rodape__titulo {
  margin-bottom: 14px;
  color: var(--ouro-300);
  font-family: var(--f-rotulo);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.rodape__col ul { display: grid; gap: 6px; }
.rodape__col a {
  color: var(--claro-2);
  text-decoration: none;
  transition: color .2s ease;
}
.rodape__col a:hover { color: var(--ouro-200); text-decoration: underline; text-underline-offset: .25em; }
.rodape__base {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(238, 243, 236, .08);
  color: var(--claro-3);
  font-size: .86rem;
}


/* ---------- 14. Galeria ---------- */
.galeria {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--mata-950);
  color: var(--claro);
  overscroll-behavior: contain;
}
.galeria[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.galeria::backdrop { background: rgba(1, 29, 23, .7); }
.galeria__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 10px;
}
.galeria__contador {
  font-family: var(--f-rotulo);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-200);
  font-variant-numeric: tabular-nums;
}
.galeria__figura {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 0;
  padding: 0 var(--gutter) max(24px, env(safe-area-inset-bottom));
  touch-action: pan-y;
  user-select: none;
}
.galeria__figura picture {
  display: flex;
  justify-content: center;
  min-height: 0;
  max-height: 100%;
}
.galeria__figura img {
  width: auto;
  max-width: min(92vw, 820px);
  height: auto;
  max-height: calc(100svh - 170px);
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.galeria__legenda {
  color: var(--claro-2);
  font-size: 1rem;
  text-align: center;
}
.galeria__nav {
  position: fixed;
  top: 50%;
  margin-top: -26px;
}
.galeria__nav--ant { left: max(16px, env(safe-area-inset-left)); }
.galeria__nav--prox { right: max(16px, env(safe-area-inset-right)); }
@media (prefers-reduced-motion: no-preference) {
  .galeria[open] { animation: galeria-abre .3s ease both; }
  .galeria__figura img.is-trocando { animation: foto-entra .35s var(--ease) both; }
}
@keyframes galeria-abre { from { opacity: 0; } }
@keyframes foto-entra { from { opacity: 0; transform: scale(.985); } }


/* ---------- 15. Revelação no scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revela] {
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .js [data-revela]:not(.is-visivel) {
    opacity: 0;
    transform: translateY(22px);
  }
}


/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .rodape__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__marca { grid-column: 1 / -1; }
}

/* abaixo de 1100px as três colunas ficariam estreitas (fotos pequenas e
   títulos em 3 linhas): passa para uma ocasião por linha, texto à esquerda
   e foto grande à direita */
@media (max-width: 1100px) {
  .ocasioes__grade { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ocasiao {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 36px;
    padding-block: 36px;
  }
  .ocasiao + .ocasiao { border-top: 1px solid var(--nevoa-100); }
  .ocasiao:first-child { padding-top: 0; }
  .ocasiao:last-child { padding-bottom: 0; }
  .ocasiao__titulo { font-size: clamp(1.35rem, .2rem + 2.2vw, 1.6rem); }
}

@media (max-width: 980px) {
  :root { --topo-h: 84px; }
  .topo__marca img { height: 54px; }
  /* como chegar: mapa em cima, informações embaixo */
  .local__cartao { grid-template-columns: minmax(0, 1fr); }
  .local__mapa { order: -1; min-height: clamp(280px, 48vw, 380px); }
  /* resumo da nota em cima, cartões embaixo */
  .avaliacoes__painel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 860px) {
  .topo__nav { display: none; }
}

@media (max-width: 760px) {
  :root { --topo-h: 84px; }
  /* no celular o topo não acompanha a rolagem: barra fixa comeria a tela */
  .topo { position: absolute; }
  .topo__inner { gap: 16px; }
  /* a logo cresce com a tela até onde o botão do WhatsApp deixa:
     ~38px aos 320px, ~53px aos 375px e 60px a partir de ~400px */
  .topo__marca img { height: clamp(38px, 27vw - 48px, 60px); }

  /* quebras de linha fixas e o trecho das ocasiões só valem na tela larga;
     aqui o apoio fica só com a estrutura e o texto corre */
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .hero__conteudo { padding-top: calc(var(--topo-h) + 64px); padding-bottom: 160px; }
  .hero__titulo { font-size: clamp(1.9rem, 1.05rem + 4.3vw, 2.5rem); }
  .hero__lead { margin-top: 20px; font-size: 1.2rem; text-wrap: balance; }
  /* botão largo como o das ocasiões; a fonte encolhe só o bastante para o
     texto caber numa linha nos 320px */
  .hero__cta {
    width: 100%;
    max-width: 360px;
    min-height: 58px;
    margin-top: 48px;
    padding: 12px 16px;
    font-size: clamp(1.05rem, 5vw, 1.2rem);
  }

  /* fotos viram faixa com rolagem lateral, mantendo o degrau; o main.js
     emenda o fim no começo para a faixa não ter ponta */
  .hero-fotos { margin-top: -100px; }
  .hero-fotos__lista {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding: 0 var(--gutter) 6px;
    scrollbar-width: none;
  }
  .hero-fotos__lista::-webkit-scrollbar { display: none; }
  /* uma foto por gesto: o snap-stop impede que um deslize rápido do dedo
     passe direto por várias fotos */
  .hero-fotos__item { flex: 0 0 42vw; scroll-snap-align: start; scroll-snap-stop: always; }
  .hero-fotos__item:nth-child(even) { margin-top: 28px; }

  /* título e texto de abertura das ocasiões maiores no celular */
  .ocasioes__cabeca .titulo-fino { font-size: clamp(1.8rem, 1rem + 4vw, 2.2rem); }
  .ocasioes__intro { font-size: 1.2rem; }

  /* empilha: texto em cima, fotos embaixo (como na referência), com a
     foto indo de uma borda à outra do cartão */
  .ocasiao { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ocasiao__titulo { font-size: 1.4rem; }
  /* coluna estreita + fonte de 16px: justificado abriria buracos entre as
     palavras, então no celular o texto alinha à esquerda */
  .ocasiao__desc { text-align: left; }
  .ocasiao .carrossel { margin-inline: calc(var(--cartao-px) * -1); }
  .ocasioes__acao .pilula { width: 100%; max-width: 360px; }

  /* um cartão por gesto: o snap-stop impede que um deslize rápido do dedo
     passe direto por vários cartões */
  .avaliacao { flex-basis: 100%; scroll-snap-stop: always; }
  .avaliacoes__seta--ant { left: -12px; }
  .avaliacoes__seta--prox { right: -12px; }

  /* título e texto de abertura do "Como chegar" maiores no celular; o
     título é curto, então cresce um pouco além do das ocasiões */
  .local__cabeca .titulo-fino { font-size: clamp(2rem, 1rem + 5vw, 2.5rem); }
  .local__intro { font-size: 1.2rem; }

  .local__acoes .pilula { flex: 1 1 100%; }

  /* chamada final maior no celular; o título quebra em duas linhas
     ("Tem uma data / em mente?") e cabe assim mesmo nos 320px */
  .chamada__titulo { font-size: clamp(1.9rem, .9rem + 5vw, 2.4rem); }
  .chamada__texto { font-size: 1.2rem; }

  .rodape__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .galeria__nav {
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom));
    margin-top: 0;
  }
  .galeria__figura { padding-bottom: 92px; }
  .galeria__figura img { max-height: calc(100svh - 230px); }
}

@media (max-width: 420px) {
  .rodape__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ---------- 16. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------- 17. Página de links (links.html) ----------
   A página da bio do Instagram, no layout de "cartão de visitas": capa com
   a foto do banner e o véu verde, o símbolo da marca como avatar, as redes
   e uma lista de cartões. Os ícones dos cartões levam o desenho e a cor
   originais de cada serviço (WhatsApp, Google, Maps, Pix); telefone e site
   usam o dourado e o verde da marca. No celular a coluna ocupa a tela; no
   computador vira um cartão centralizado sobre o verde mais escuro. */
.pagina-links {
  background-color: var(--mata-900);
  color: var(--claro);
  font-family: "Poppins", var(--f-texto);
}
.links {
  max-width: 460px;
  margin-inline: auto;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(90% 40% at 50% 14%, rgba(30, 106, 80, .5), rgba(30, 106, 80, 0) 70%),
    var(--mata-900);
}

/* perfil */
.perfil {
  padding-inline: 20px;
  text-align: center;
}
/* a capa some no verde de cima para baixo (máscara), sem linha de corte */
.perfil__capa {
  position: relative;
  height: 190px;
  margin-inline: -20px;
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
  mask-image: linear-gradient(#000 40%, transparent);
}
.perfil__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 29, 23, .2) 0%, rgba(2, 42, 34, .6) 100%);
}
.perfil__capa picture,
.perfil__capa img {
  width: 100%;
  height: 100%;
}
.perfil__capa img {
  object-fit: cover;
  object-position: 50% 26%;
}
/* o símbolo da palmeira já tem o próprio anel dourado; o círculo verde em
   volta e o contorno escuro destacam o avatar da foto da capa */
.perfil__avatar {
  position: relative;
  width: 116px;
  height: 116px;
  margin: -70px auto 0;
  padding: 11px;
  border-radius: 50%;
  background: var(--mata-800);
  box-shadow: 0 0 0 4px var(--mata-900), 0 0 0 5px rgba(230, 200, 134, .3),
              0 20px 40px -14px rgba(0, 0, 0, .7);
}
.perfil__avatar img { width: 100%; height: 100%; }
/* nome no idioma dos títulos do site: Poppins fino, caixa alta e espaçado */
.perfil__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 18px;
  color: #fff;
  font-weight: 300;
  font-size: clamp(1.2rem, 1rem + 1.6vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.perfil__selo { flex: none; width: 1em; height: 1em; }
/* o lema com as linhas douradas dos dois lados, como no logo. A margem do
   ::before iguala o espaço que o letter-spacing deixa depois da última letra */
.perfil__lema {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  color: var(--ouro-300);
  font-weight: 500;
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.perfil__lema::before,
.perfil__lema::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(210, 173, 105, 0), var(--ouro-400));
}
.perfil__lema::before { margin-right: .3em; }
.perfil__lema::after { transform: scaleX(-1); }
.perfil__local {
  margin-top: 8px;
  color: var(--claro-2);
  font-size: .9375rem;
  line-height: 1.4;
}

/* redes: quadrados com as cores originais */
.perfil__redes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.rede {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6);
  touch-action: manipulation;
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.rede svg { width: 26px; height: 26px; }
.rede:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .7);
}
.rede--insta {
  background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
  color: #fff;
}
.rede--google { background: #fff; }
.rede--google svg { width: 24px; height: 24px; }

.links__divisa {
  height: 1px;
  margin: 28px 20px 24px;
  border: 0;
  background: linear-gradient(90deg, rgba(230, 200, 134, 0), rgba(230, 200, 134, .35), rgba(230, 200, 134, 0));
}

/* cartões */
.links__lista {
  display: grid;
  gap: 12px;
  padding-inline: 20px;
}
.link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(238, 243, 236, .1);
  border-radius: 16px;
  background: rgba(238, 243, 236, .05);
  color: var(--claro);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color .2s ease, border-color .2s ease, transform .25s var(--ease);
}
.link:hover {
  background-color: rgba(238, 243, 236, .09);
  border-color: rgba(230, 200, 134, .35);
}
.link:active { transform: scale(.99); }
.link__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
}
.link__icone svg { width: 28px; height: 28px; }
.link__icone--whats { background: #25D366; color: #fff; }
.link__icone--fone {
  background: var(--ouro-metal);
  background-color: var(--ouro-300);
  color: var(--mata-900);
}
.link__icone--fone svg { width: 26px; height: 26px; }
.link__icone--site {
  background: var(--mata-800);
  box-shadow: inset 0 0 0 1px rgba(230, 200, 134, .35);
}
.link__icone--site img { width: 40px; height: 40px; }
.link__icone--branco { background: #fff; }
.link__icone .link__google { width: 26px; height: 26px; }
.link__icone .link__maps { width: 22px; height: 32px; }
.link__icone--pix { background: #32BCAD; color: #fff; }
.link__texto {
  flex: 1;
  min-width: 0;
}
.link__titulo {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
}
.link__desc {
  display: block;
  margin-top: 3px;
  color: var(--claro-2);
  font-size: .875rem;
  line-height: 1.35;
}
.link__seta {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--claro-3);
  transition: transform .25s var(--ease), color .2s ease;
}
.link:hover .link__seta {
  transform: translateX(3px);
  color: var(--ouro-300);
}

/* Pix: cartão com a chave e o botão de copiar (a pílula dourada do site) */
.pix {
  margin: 12px 20px 0;
  padding: 16px;
  border: 1px solid rgba(230, 200, 134, .22);
  border-radius: 18px;
  background: rgba(238, 243, 236, .05);
}
.pix__topo {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pix__titulo {
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
}
/* "user-select: all": se o copiar falhar, um toque seleciona a chave inteira */
.pix__chave {
  margin-top: 3px;
  color: var(--ouro-200);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
}
.pix__botao {
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  border: 0;
  cursor: pointer;
}
.pix__botao + .pix__botao { margin-top: 10px; }
.pix__botao[hidden] { display: none; }
.pix__icone-ok { display: none; }
.pix__botao.is-copiado .pix__icone-copiar { display: none; }
.pix__botao.is-copiado .pix__icone-ok { display: block; }
.pix__status {
  margin-top: 12px;
  color: var(--ouro-200);
  font-size: .875rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.pix__status:empty { display: none; }

.links__rodape {
  margin-top: 32px;
  padding-inline: 20px;
  color: var(--claro-3);
  font-size: .8125rem;
  text-align: center;
}

/* entrada em cascata, a mesma do texto do banner */
@media (prefers-reduced-motion: no-preference) {
  .links__entra {
    animation: entra .8s var(--ease) both;
    animation-delay: calc(var(--e, 0) * 70ms + 60ms);
  }
}

@media (min-width: 560px) {
  .pagina-links {
    padding-block: 40px;
    background-color: var(--mata-950);
    background-image: radial-gradient(60% 50% at 50% 0%, rgba(30, 106, 80, .35), rgba(30, 106, 80, 0) 70%);
    background-repeat: no-repeat;
  }
  .links {
    border: 1px solid rgba(230, 200, 134, .14);
    border-radius: 28px;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  }
}


/* ---------- 18. Popup do QR Code Pix (links.html) ----------
   Um <dialog> do tamanho da tela e transparente: dentro dele, o véu e o
   painel. No computador o painel é uma janela no centro; abaixo de 560px
   (a quebra da página de links) vira gaveta presa à base, com a alça de
   arrastar. Abrir, fechar e arrastar animam só transform e opacity (o
   pix.js cuida do movimento). Fundo, cartões e pílula são os da página. */
.popup {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  overflow: hidden;
  background: none;
  color: var(--claro);
  font-family: "Poppins", var(--f-texto);
  overscroll-behavior: contain;
}
.popup[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* o véu é um elemento (e não o ::backdrop) para clarear junto com o
   arrasto da gaveta */
.popup::backdrop { background: none; }
.popup__veu {
  position: absolute;
  inset: 0;
  background: rgba(0, 13, 10, .66);
  touch-action: none;
}
.popup__painel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(230, 200, 134, .16);
  border-radius: 28px;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(30, 106, 80, .45), rgba(30, 106, 80, 0) 72%),
    var(--mata-900);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85);
}
.popup__alca { display: none; }
/* o ::after aumenta a área de toque para 48px sem aumentar o círculo */
.popup__fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 243, 236, .1);
  color: var(--claro);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .2s ease, color .2s ease;
}
.popup__fechar::after {
  content: "";
  position: absolute;
  inset: -6px;
}
.popup__fechar .icone { width: 18px; height: 18px; }
.popup__fechar:hover {
  background-color: var(--ouro-300);
  color: var(--mata-900);
}

/* o corpo rola só se o conteúdo passar da altura da tela; enquanto a
   altura do painel anima (troca de etapa), a barra de rolagem não pisca */
.popup__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px 28px 28px;
}
.popup__painel.is-mudando .popup__corpo { overflow: hidden; }
.popup__conteudo { position: relative; }
.popup__passo {
  margin: 0;
  text-align: center;
}
/* a etapa que sai fica por cima da que entra até sumir */
.popup__passo.is-saindo {
  position: absolute;
  pointer-events: none;
}

/* o padding lateral deixa o título longe do botão de fechar */
.popup__titulo {
  padding-inline: 36px;
  color: #fff;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.25;
  text-wrap: balance;
}
/* recebe o foco na troca de etapa (para o leitor de tela), sem contorno */
.popup__titulo:focus-visible { outline: none; }
.popup__quem {
  margin-top: 6px;
  color: var(--claro-2);
  font-size: .875rem;
  line-height: 1.5;
}
.popup__nome { color: var(--claro); font-weight: 500; }

/* etapa 1: valor */
.popup__rotulo {
  display: block;
  margin-top: 28px;
  color: #fff;
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.4;
  text-align: left;
}
.popup__campo {
  display: flex;
  align-items: center;
  margin-top: 10px;
  border: 1px solid rgba(238, 243, 236, .16);
  border-radius: 14px;
  background: rgba(238, 243, 236, .05);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.popup__campo:focus-within {
  border-color: rgba(230, 200, 134, .7);
  background-color: rgba(238, 243, 236, .08);
  box-shadow: 0 0 0 3px rgba(230, 200, 134, .16);
}
.popup__moeda {
  order: -1;
  padding-left: 18px;
  color: #fff;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1;
}
.popup__input:placeholder-shown + .popup__moeda { color: var(--claro-3); }
/* fonte acima de 16px: o iOS não dá zoom na página ao focar o campo */
.popup__input {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 0 18px 0 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.popup__input::placeholder { color: var(--claro-3); opacity: 1; }
.popup__input:focus-visible { outline: none; }
.popup__ajuda {
  margin-top: 10px;
  color: var(--claro-2);
  font-size: .8125rem;
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
}
.popup__acao { margin-top: 24px; }

/* etapa 2: QR Code. Módulos no verde da marca sobre o branco: o contraste
   continua alto para a câmera */
.popup__valor {
  margin-top: 4px;
  color: var(--ouro-200);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.popup__valor.is-livre {
  margin-top: 6px;
  color: var(--claro-2);
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.45;
  text-wrap: balance;
}
.popup__qr {
  width: min(100%, 248px);
  margin: 20px auto 0;
  padding: 8px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
}
.popup__qr svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.popup__qr path { fill: var(--mata-900); }
.popup__qr + .popup__quem { margin-top: 16px; }
.popup__copiar .pix__status { margin-top: 10px; }
.popup__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--claro-2);
  font-weight: 500;
  font-size: .9375rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .2s ease;
}
.popup__voltar:hover {
  color: var(--ouro-200);
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* gaveta do celular: presa à base, cantos de cima arredondados e alça.
   O --teclado (e o --teclado-topo) vêm do pix.js quando o teclado do
   celular abre: a gaveta sobe para a parte visível da tela. O toque no
   painel é todo do arrasto (touch-action: none); se o conteúdo passar da
   tela, o corpo volta a rolar com o dedo e o arrasto fica na alça. */
@media (max-width: 559.98px) {
  .popup {
    padding: calc(max(16px, env(safe-area-inset-top)) + var(--teclado-topo, 0px)) 0 var(--teclado, 0px);
  }
  .popup[open] { align-items: flex-end; }
  /* a 2ª sombra é uma cópia do painel na cor da base, logo abaixo dele: o
     puxão para cima (que resiste) não descobre o fundo */
  .popup__painel {
    width: 100%;
    border-width: 1px 0 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -20px 60px -24px rgba(0, 0, 0, .8), 0 64px 0 0 var(--mata-900);
    will-change: transform;
  }
  .popup__painel,
  .popup__corpo { touch-action: none; }
  .popup__painel.is-rolavel .popup__corpo { touch-action: pan-y; }
  .popup__alca {
    display: block;
    flex: none;
    width: 40px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 99px;
    background: rgba(238, 243, 236, .3);
  }
  .popup__fechar { top: 14px; right: 14px; }
  .popup__corpo { padding: 18px 20px calc(24px + env(safe-area-inset-bottom)); }
  /* em tela baixa o QR encolhe para a etapa caber sem rolar */
  .popup__qr { width: min(100%, 248px, max(168px, 100dvh - 400px)); }
}