/* ============================================================
   QUINTAL — Feitos de Cem · landing page
   Figma: "Natureza também é sala de aula" (frame de 1440px).

   Unidade de desenho: --u vale 1px numa tela de 1440px e encolhe
   proporcionalmente até 960px. Assim as posições do Figma entram
   no CSS como estão — `calc(400 * var(--u))` é o "x: 400" do Figma.
   Textos pequenos ficam em px fixos para não ficarem ilegíveis.
   Abaixo de 960px cada seção troca para um layout empilhado.
   ============================================================ */
:root{
  --creme:        #fffdf4;
  --creme-2:      #fff9ea;
  --amarelo-claro:#fff0a8;
  --amarelo:      #f7e74b;
  --verde:        #86a83b;
  --verde-escuro: #234c35;
  --verde-noite:  #18350e;
  --tinta:        #1d2618;
  --texto:        #3f493a;
  --vermelho:     #e96559;
  --bola-amarela: #fff2b7;
  --bola-verde:   #e8f5d0;

  --f-satoshi: "Satoshi", "Outfit", system-ui, sans-serif;
  --f-outfit:  "Outfit", "Satoshi", system-ui, sans-serif;
  --f-inter:   "Inter", system-ui, sans-serif;

  --u: calc(min(100vw, 1440px) / 1440);
  --borda: max(0px, calc((100vw - 1440px) / 2));
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip; }
body{
  margin:0;
  background:var(--creme);
  color:var(--texto);
  font-family:var(--f-satoshi);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ display:block; max-width:100%; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }

.img-cover{ width:100%; height:100%; object-fit:cover; }
.img-center{ object-position:center; }
.img-contain{ width:100%; height:100%; object-fit:contain; }
.ph{ display:block; width:100%; height:100%; background:var(--bola-verde); }

/* ---------- peças compartilhadas ---------- */
.pilula{
  display:inline-flex; align-items:center; gap:12px;
  height:44px; padding:0 22px; border-radius:999px;
  font-family:var(--f-inter); font-weight:800; font-size:11px;
  text-transform:uppercase; white-space:nowrap; color:var(--verde-noite);
  transition:transform .2s ease, box-shadow .2s ease;
}
.pilula:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(24,53,14,.45); }
.pilula .seta{ flex:none; }
.pilula-creme{ background:var(--creme); }
.pilula-amarela{ background:var(--amarelo); }
.pilula-escura{ background:var(--verde-noite); color:var(--creme); gap:10px; }
.pilula-p{ height:42px; padding:0 20px; gap:10px; font-size:10px; }

.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-inter); font-weight:700; font-size:11px;
  text-transform:uppercase; color:var(--verde-escuro);
}
.eyebrow .traco{ width:32px; height:3px; border-radius:2px; background:var(--verde-escuro); }
.eyebrow-verde{ color:var(--texto); }
.eyebrow-verde .traco{ width:28px; background:var(--verde); }
.eyebrow-simples{
  font-family:var(--f-satoshi); font-weight:700; font-size:11px;
  text-transform:uppercase; color:var(--texto);
}

.redondo{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%; padding:0;
  font-family:var(--f-inter); font-weight:300; font-size:20px; line-height:1;
  transition:transform .2s ease;
}
.redondo:hover{ transform:scale(1.06); }
.redondo-vazado{ background:var(--creme-2); border:2px solid var(--verde-escuro); color:var(--verde-escuro); }
.redondo-cheio{ background:var(--verde-escuro); border:0; color:var(--creme-2); }
.redondo-p{ width:44px; height:44px; font-size:18px; }
.redondo-p.redondo-vazado{ background:var(--creme); }
.redondo-p.redondo-cheio{ color:var(--creme); }

.sub{
  text-decoration:underline;
  text-decoration-thickness:.09em;
  text-underline-offset:.06em;
  text-decoration-skip-ink:none;
}

.onda{ position:absolute; left:0; width:100%; display:block; pointer-events:none; }
.bola{ position:absolute; border-radius:50%; pointer-events:none; }
/* Enfeites soltos: posicionados em unidades de desenho, sem interação. */
.enf{ position:absolute; z-index:1; pointer-events:none; line-height:0; }
.enf svg{ display:block; width:100%; height:auto; }

/* ============ CABEÇALHO ============ */
/* Cabeçalho em pílula, fixo e flutuando sobre a página (home e /proposta).
   Fundo creme translúcido com desfoque; ganha sombra ao rolar. */
.topo{
  position:fixed; z-index:50; top:14px; left:50%; transform:translateX(-50%);
  width:min(1260px, calc(100% - 32px)); height:66px;
  display:flex; align-items:center; gap:24px;
  padding:0 12px 0 30px;
  border-radius:999px;
  background:rgba(255,253,244,.64);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(35,76,53,.08);
  box-shadow:0 6px 24px -14px rgba(24,53,14,.35);
  transition:background .3s ease, box-shadow .3s ease, top .3s ease;
}
.topo.rolou{ top:10px; background:rgba(255,253,244,.8); box-shadow:0 12px 32px -14px rgba(24,53,14,.45); }
.topo-marca{ display:block; flex:none; }
.topo-logo{ display:block; width:150px; height:auto; }
.topo-nav{ flex:1; display:flex; justify-content:center; align-items:center; gap:clamp(18px, 2.6vw, 40px); }
.topo-nav > a{
  position:relative; padding:8px 0;
  font-family:var(--f-satoshi); font-weight:500; font-size:16px; text-transform:lowercase;
  color:#5b6656; transition:color .2s ease;
}
/* seção atual: só cor e peso (o contorno engrossa sem mudar a largura do texto) */
.topo-nav > a:hover{ color:var(--verde-escuro); }
.topo-nav > a[aria-current]{ color:var(--verde-escuro); -webkit-text-stroke:.45px currentColor; }
.topo-acoes{ flex:none; display:flex; align-items:center; gap:2px; }

/* Botão "Matrículas 2027": a imagem das mascotes ocupa o botão inteiro, sob um véu
   escuro uniforme que segura o texto; ao passar o mouse, focar ou tocar, o véu
   clareia e a imagem acende e cresce um pouco. */
.topo-cta{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; min-width:200px; padding:0 24px; margin-right:10px;
  border-radius:999px;
  background:var(--verde-escuro);
  font-family:var(--f-satoshi); font-weight:900; font-size:15px; white-space:nowrap;
  color:var(--creme);
  box-shadow:0 6px 16px -10px rgba(24,53,14,.8);
  transition:transform .25s ease, box-shadow .25s ease;
}
.topo-cta-img{
  position:absolute; inset:0; z-index:-2;
  background:url("/project/assets/img/landing/matriculas-mascotes.webp") center 40% / cover no-repeat;
  filter:saturate(.9) brightness(.92);
  transition:transform .5s cubic-bezier(.22,.7,.2,1), filter .4s ease;
}
.topo-cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(20,44,28,.5);
  transition:background-color .4s ease;
}
.topo-cta-texto{ text-shadow:0 1px 2px rgba(10,30,6,.7), 0 0 12px rgba(10,30,6,.55); }
.topo-cta:hover, .topo-cta:focus-visible, .topo-cta.ativo{ transform:translateY(-1px); box-shadow:0 12px 24px -12px rgba(24,53,14,.9); }
.topo-cta:hover .topo-cta-img, .topo-cta:focus-visible .topo-cta-img, .topo-cta.ativo .topo-cta-img{ transform:scale(1.08); filter:saturate(1.1) brightness(1.08); }
.topo-cta:hover::before, .topo-cta:focus-visible::before, .topo-cta.ativo::before{ background-color:rgba(20,44,28,.22); }
.topo-cta:active{ transform:scale(.97); }
@keyframes topo-pulinho{ 0%,100%{ transform:scale(1.08); } 40%{ transform:scale(1.14) translateY(-4%); } }
.topo-cta.ativo .topo-cta-img{ animation:topo-pulinho .5s ease; }

/* redes: só o ícone, sem círculo; acende na cor da marca */
.topo-rede{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:12px;
  color:var(--verde-escuro);
  transition:color .2s ease, transform .2s ease;
}
.topo-rede svg{ width:22px; height:22px; }
.topo-rede:hover, .topo-rede:focus-visible{ color:var(--verde); transform:scale(1.14); }
.topo-rede:active{ color:var(--vermelho); transform:scale(.95); }
.topo-menu{ display:none; }
.topo-nav-extra{ display:none; }

/* ============ APRESENTAÇÃO ============ */
.hero{
  position:relative; z-index:2;
  height:600px;
  background:var(--amarelo-claro);
}
.hero-foto{ position:absolute; inset:0; overflow:hidden; }
/* No Figma (nó 3:200) a foto começa 35px acima do quadro; aqui ela cobre o
   quadro e o enquadramento sobe um pouco para o rosto ficar no centro. */
.hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.hero-conteudo{
  position:absolute; z-index:1;
  left:calc(var(--borda) + 96 * var(--u)); top:175px;
  width:calc(855 * var(--u));
  display:flex; flex-direction:column; align-items:flex-start; gap:48px;
}
.hero-titulo{
  font-family:var(--f-satoshi); font-weight:900;
  font-size:max(56px, calc(80 * var(--u)));
  line-height:.78;
  text-transform:lowercase;
  color:var(--amarelo-claro);
  font-feature-settings:"case" 1;
  text-shadow:0 2px 22px rgba(10,30,6,.45), 0 1px 3px rgba(10,30,6,.35);
}
.hero-titulo .sub{ text-decoration:none; }
.onda-hero{ bottom:-48px; height:109px; z-index:2; }
.hero-gota{ left:calc(var(--borda) + 1344 * var(--u)); top:calc(419 * var(--u)); width:calc(69 * var(--u)); }
.hero-flor{ left:calc(var(--borda) + 1158 * var(--u)); top:175px; width:calc(88 * var(--u)); }
/* Mascote espelhado (no Figma, o nó 62:59 está invertido na horizontal). */
.hero-mascote{
  position:absolute; z-index:3;
  left:calc(var(--borda) + 1065 * var(--u)); top:234px;
  width:calc(346 * var(--u)); height:calc(432 * var(--u));
  transform:scaleX(-1);
}

/* ============ ESPAÇOS ============ */
.espacos{
  position:relative; z-index:1;
  display:flex; align-items:flex-start;
  min-height:calc(410 * var(--u));
  padding:calc(77 * var(--u)) 0 calc(60 * var(--u)) calc(var(--borda) + 82 * var(--u));
  background:var(--creme);
}
.espacos-flor{ left:calc(var(--borda) + 449 * var(--u)); top:calc(113 * var(--u)); width:calc(91 * var(--u)); z-index:2; }
/* a folha passa por cima da onda da faixa seguinte (a .faixa fica em z-index 0) */
.espacos-folha{ left:calc(var(--borda) + 1230 * var(--u)); top:calc(188 * var(--u)); width:calc(210 * var(--u)); z-index:0; }
.espacos-intro{
  position:relative; z-index:2;
  flex:none; width:calc(390 * var(--u)); margin-top:calc(8 * var(--u));
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.espacos-titulo{
  font-family:var(--f-outfit); font-weight:900;
  font-size:max(32px, calc(45 * var(--u))); line-height:.95;
  color:var(--tinta);
}
.espacos-lista{ position:relative; z-index:1; display:flex; gap:calc(22 * var(--u)); margin-left:calc(51 * var(--u)); }
.espaco figure{
  position:relative; overflow:hidden;
  width:calc(182 * var(--u));
  background:#fff;
  box-shadow:0 8px 20px rgba(24,53,14,.1);
  transition:transform .3s ease;
}
.espaco-1{ margin-top:calc(18 * var(--u)); }
.espaco-3{ margin-top:calc(18 * var(--u)); }
.espaco-4{ margin-top:calc(7 * var(--u)); }
.espaco-1 figure{ height:calc(252 * var(--u)); border-radius:34px 22px 38px 18px; transform:rotate(.7deg); }
.espaco-2 figure{ height:calc(268 * var(--u)); border-radius:22px 38px 18px 34px; transform:rotate(-.65deg); }
.espaco-3 figure{ height:calc(252 * var(--u)); border-radius:38px 20px 30px 24px; transform:rotate(.45deg); }
.espaco-4 figure{ height:calc(261 * var(--u)); border-radius:20px 34px 26px 40px; transform:rotate(-.75deg); }
.espaco figure:hover{ transform:rotate(0) translateY(-4px); }

/* No Figma a legenda fica debaixo da foto. Aqui ela aparece ao passar o
   mouse — e sempre, em telas de toque, onde não existe "passar o mouse". */
.legenda{
  position:absolute; z-index:1; left:50%; bottom:12px;
  transform:translate(-50%, 6px);
  min-width:92px; height:36px; padding:0 15px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  font-family:var(--f-inter); font-weight:800; font-size:10px;
  text-transform:uppercase; white-space:nowrap;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.espaco figure:hover .legenda{ opacity:1; transform:translate(-50%, 0); }
@media (hover:none){ .legenda{ opacity:1; transform:translate(-50%, 0); } }
.leg-branco{ background:#fff; color:var(--verde-noite); }
.leg-verde{ background:#5f7d22; color:#fff; }
.leg-vermelho{ background:#c9483c; color:#fff; }
.leg-amarelo{ background:var(--amarelo); color:var(--verde-noite); }

/* ============ FAIXA COM FOTO ============ */
.faixa{
  position:relative; z-index:0; overflow:hidden;
  height:calc(380 * var(--u));
  min-height:300px;
}
.faixa-foto{ position:absolute; inset:0; }
.faixa-foto img{ position:absolute; inset:0; }
.faixa-veu{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0) 38%, rgba(10,30,6,.62) 85%);
}
.faixa-texto{
  position:absolute; z-index:1;
  font-size:max(36px, calc(54 * var(--u))); line-height:1.02;
  color:var(--creme);
}
.faixa-esq{
  font-family:var(--f-satoshi); font-weight:900;
  left:calc(var(--borda) + 86 * var(--u)); top:calc(107 * var(--u));
}
.faixa-dir{
  font-family:var(--f-inter); font-weight:700; text-align:right;
  right:calc(var(--borda) + 86 * var(--u)); top:calc(134 * var(--u));
}
.faixa-trigo{ left:0; top:calc(120 * var(--u)); width:calc(55 * var(--u)); }
.faixa .onda-topo{ top:0; height:calc(54 * var(--u)); z-index:2; }
.faixa .onda-base{ bottom:0; height:calc(38 * var(--u)); z-index:2; }

/* ============ FUNDAMENTOS ============ */
.fundamentos{
  position:relative; z-index:2;
  background:var(--verde);
  /* a onda de cima come ~54u do verde e a de baixo acrescenta ~54u: estes
     valores deixam o mesmo espaço verde acima e abaixo do conteúdo */
  padding:calc(132 * var(--u)) 0 calc(25 * var(--u));
}
.fundamentos .onda-topo{ top:0; height:calc(77 * var(--u)); }
.fundamentos .onda-base{ top:calc(100% - 1px); height:calc(70 * var(--u)); }
.fundamentos-grade{
  position:relative;
  display:grid;
  grid-template-columns:
    calc(var(--borda) + 93 * var(--u)) calc(384 * var(--u))
    calc(187 * var(--u)) calc(54 * var(--u))
    calc(187 * var(--u)) calc(36 * var(--u))
    calc(187 * var(--u)) calc(23.5 * var(--u))
    calc(187 * var(--u)) 1fr;
  align-items:center;
}
.fundamentos-titulo{
  grid-column:2;
  width:calc(444 * var(--u));
  font-family:var(--f-satoshi); font-weight:900;
  font-size:max(40px, calc(56 * var(--u))); line-height:.9;
  color:var(--verde-escuro);
  white-space:nowrap;
}
.fundamento:nth-of-type(1){ grid-column:3; }
.fundamento:nth-of-type(2){ grid-column:5; }
.fundamento:nth-of-type(3){ grid-column:7; }
.fundamento:nth-of-type(4){ grid-column:9; }
.fundamento{ align-self:start; text-align:center; color:var(--verde-escuro); }
.fundamento-icone{ height:calc(120 * var(--u)); display:flex; align-items:flex-end; justify-content:center; }
.fundamento-icone svg{ width:calc(108 * var(--u)); height:auto; }
.fundamento h3{
  margin-top:calc(6 * var(--u));
  font-family:var(--f-satoshi); font-weight:900; font-size:max(20px, calc(24 * var(--u))); line-height:1.06;
  white-space:nowrap;
}
.fundamento p{ margin-top:10px; font-size:14px; line-height:1.55; color:#1a2e14; }

/* ============ DEPOIMENTOS ============ */
/* Coordenadas = Figma (nó 68:181) + 69: a onda verde da seção anterior cobre
   os primeiros 69px. A pera é o grupo 138:97 inteiro; a seção mostra só a
   barriga e os olhos dela, o resto fica cortado em cima e embaixo. */
.depoimentos{
  position:relative; overflow:hidden;
  height:calc(860 * var(--u));
  background:var(--creme);
}
.pera{
  position:absolute;
  left:calc(var(--borda) - 156 * var(--u)); top:calc(-478 * var(--u));
  width:calc(1667 * var(--u)); height:calc(1360 * var(--u));
}
.pera-svg{ display:block; width:100%; height:100%; overflow:visible; }
.depoimentos-titulo{
  position:absolute; z-index:1;
  left:calc(var(--borda) + 218 * var(--u)); top:calc(93 * var(--u));
  width:calc(967 * var(--u));
  font-family:var(--f-outfit); font-weight:900;
  font-size:max(36px, calc(52 * var(--u))); line-height:.92;
  text-align:center; color:var(--verde-escuro);
}
/* fileira de cartões na barriga da pera: desliza de lado (setas no computador,
   dedo no celular); a altura de cada cartão segue o texto */
.depoimentos-lista{
  position:absolute; z-index:1;
  left:calc(var(--borda) + 200 * var(--u)); width:calc(1015 * var(--u));
  top:calc(158 * var(--u));
  display:flex; align-items:stretch; gap:24px;
  padding:14px 8px 34px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 8px;
  scrollbar-width:none; overscroll-behavior-x:contain;
}
.depoimentos-lista::-webkit-scrollbar{ display:none; }
.depoimentos-setas{
  position:absolute; z-index:2; pointer-events:none;
  left:calc(var(--borda) + 140 * var(--u)); right:calc(var(--borda) + 140 * var(--u)); top:calc(320 * var(--u));
  display:flex; justify-content:space-between;
}
.depoimentos-pontos{ display:none; }
.depoimentos-setas button{ pointer-events:auto; }
/* cartões retos e da mesma altura (a fileira estica todos pelo maior);
   o destaque troca de cor em vez de girar ou ganhar contorno */
.depoimento{
  position:relative; flex:none; scroll-snap-align:start;
  width:calc((100% - 48px) / 3);
  display:flex; flex-direction:column; gap:14px;
  padding:26px 26px 22px;
  border-radius:24px;
  background:var(--creme);
  box-shadow:0 1px 0 rgba(24,53,14,.05), 0 14px 26px -20px rgba(24,53,14,.55);
}
.depoimento{ transition:background-color .35s ease; }
.depoimento *{ transition:color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.pulando .depoimento, .pulando .depoimento *{ transition:none !important; }
.depoimento.depoimento-destaque{ background:var(--verde-escuro); }
.depoimento-aspas{
  display:block; height:26px;
  font-family:var(--f-outfit); font-weight:900; font-size:64px; line-height:.95;
  color:var(--verde);
}
.depoimento blockquote{
  flex:1;
  font-family:var(--f-satoshi); font-weight:500; font-size:15.5px; line-height:1.6;
  color:#2c3628; text-wrap:pretty;
}
.depoimento-familia{ display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid rgba(35,76,53,.12); }
.depoimento-retrato{
  flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  font-family:var(--f-satoshi); font-weight:900; font-size:17px; color:#fff;
}
.depoimento-cor-1{ background:var(--verde); }
.depoimento-cor-2{ background:var(--vermelho); }
.depoimento-cor-3{ background:#8e6a9e; }
.depoimento-cor-4{ background:#f2a64a; }
.depoimento-retrato img{ width:100%; height:100%; object-fit:cover; }
.depoimento-familia p{ display:flex; flex-direction:column; gap:1px; font-family:var(--f-satoshi); }
.depoimento-familia strong{ font-weight:900; font-size:15px; color:var(--verde-escuro); }
.depoimento-familia p span{ font-size:13px; font-weight:500; color:#5b6656; }
/* destaque: fundo verde-escuro, texto creme, aspas e nome em amarelo */
.depoimento-destaque .depoimento-aspas{ color:var(--amarelo); }
.depoimento-destaque blockquote{ color:var(--creme); }
.depoimento-destaque .depoimento-familia{ border-top-color:rgba(255,253,244,.18); }
.depoimento-destaque .depoimento-familia strong{ color:var(--amarelo); }
.depoimento-destaque .depoimento-familia p span{ color:rgba(255,253,244,.72); }
.depoimento-destaque .depoimento-retrato{ box-shadow:0 0 0 2px var(--amarelo); }

/* ============ MAPA ============ */
/* Sem overflow:hidden aqui: a maçã sai da seção e pisa no rodapé. As bolas
   de fundo ficam presas no próprio contêiner. */
.mapa{
  position:relative;
  height:calc(600 * var(--u));
  background:var(--amarelo-claro);
}
.mapa .onda-topo{ top:calc(-48 * var(--u)); height:calc(77 * var(--u)); z-index:1; }
.mapa-bolas{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.bola-mapa-1{ width:calc(280 * var(--u)); height:calc(260 * var(--u)); left:calc(var(--borda) - 60 * var(--u)); top:calc(40 * var(--u)); background:#fff9d6; opacity:.6; }
.bola-mapa-2{ width:calc(240 * var(--u)); height:calc(220 * var(--u)); left:calc(var(--borda) + 1220 * var(--u)); top:calc(300 * var(--u)); background:var(--bola-verde); opacity:.5; }
.mapa-flor{ left:calc(var(--borda) + 1328 * var(--u)); top:calc(22 * var(--u)); width:calc(70 * var(--u)); z-index:2; transform:rotate(-10deg); }
.mapa-texto{
  position:absolute; z-index:1;
  left:calc(var(--borda) + 82 * var(--u)); top:calc(134 * var(--u));
  width:calc(380 * var(--u));
  display:flex; flex-direction:column; align-items:flex-start;
}
.mapa-titulo{
  font-family:var(--f-outfit); font-weight:900;
  font-size:max(38px, calc(52 * var(--u))); line-height:.92;
  color:var(--tinta);
}
.mapa-desc{
  margin-top:calc(17 * var(--u)); max-width:340px;
  font-family:var(--f-inter); font-size:13px; line-height:1.65;
  color:var(--texto); opacity:.85;
}
.mapa-texto .pilula{ margin-top:calc(17 * var(--u)); margin-left:-2px; }
.mapa-moldura{
  position:absolute; overflow:hidden;
  left:calc(var(--borda) + 486 * var(--u)); top:calc(50 * var(--u));
  width:calc(880 * var(--u)); height:calc(462 * var(--u));
  border-radius:calc(112 * var(--u)) calc(52 * var(--u)) calc(128 * var(--u)) calc(64 * var(--u));
  background:#d1e5bd;
}
.mapa-moldura iframe{ display:block; width:100%; height:100%; border:0; }
.mapa-mascote{
  position:absolute; z-index:5; pointer-events:none;
  left:calc(var(--borda) + 361 * var(--u)); top:calc(300 * var(--u));
  width:calc(395 * var(--u)); height:calc(381 * var(--u));
}

/* ============ RODAPÉ ============ */
/* Coordenadas = Figma (nó 66:121) + 39, porque a onda verde do topo começa
   39px antes do quadro do rodapé. */
.rodape{
  position:relative; z-index:2;
  background:var(--verde-escuro);
  color:var(--creme);
}
.rodape .onda-topo{ top:calc(-34 * var(--u)); height:calc(77 * var(--u)); }
.rodape-convite{ position:relative; height:calc(1024 * var(--u)); overflow:hidden; }
.rodape-titulo{
  position:absolute; z-index:1;
  left:calc(var(--borda) + 100 * var(--u)); top:calc(176 * var(--u));
  font-family:var(--f-satoshi); font-weight:900;
  font-size:max(36px, calc(52 * var(--u))); line-height:.92;
  color:var(--creme);
}
.rodape-raminho{ left:calc(var(--borda) + 286 * var(--u)); top:calc(112 * var(--u)); width:calc(62 * var(--u)); transform:rotate(14deg); }
.rodape-fila{ position:absolute; left:var(--borda); width:calc(2100 * var(--u)); }
.rodape-fila-cima{ top:calc(150 * var(--u)); left:calc(var(--borda) + 549 * var(--u)); }
.rodape-fila-baixo{ top:calc(446 * var(--u)); }
.rodape-foto{
  position:absolute; overflow:hidden;
  left:calc(var(--x) * var(--u)); top:calc(var(--y) * var(--u));
  width:calc(214 * var(--u)); height:calc(264 * var(--u));
  background:#c4c4c4;
  transform:rotate(var(--rot));
}
/* fotos em pé (4:5), um pouco encavaladas e giradas, como num mural */
.rodape-foto-1{ --x:-40;  --y:14; --rot:5.5deg; }
.rodape-foto-2{ --x:192;  --y:4;  --rot:-3.6deg; }
.rodape-foto-3{ --x:426;  --y:0;  --rot:4.2deg; }
.rodape-foto-4{ --x:662;  --y:8;  --rot:-2.6deg; }
.rodape-foto-5{ --x:896;  --y:2;  --rot:3.8deg; }
.rodape-foto-6{ --x:1130; --y:12; --rot:-3.2deg; }
.rodape-foto-7{ --x:1364; --y:4;  --rot:4.6deg; }
.rodape-foto-8{ --x:1598; --y:10; --rot:-2.8deg; }
.rodape-chamada{
  position:absolute;
  left:calc(var(--borda) + 135 * var(--u)); top:calc(770 * var(--u));
  width:calc(1121 * var(--u));
  font-family:var(--f-outfit); font-weight:900;
  font-size:max(30px, calc(52 * var(--u))); line-height:.92;
  text-align:center; color:var(--creme);
}
.rodape-convite .pilula{ position:absolute; left:calc(var(--borda) + 620 * var(--u)); top:calc(922 * var(--u)); }
/* faixa final: foto da amora com o menino, e por cima dela logo, descrição,
   links e copyright. Altura segue o conteúdo; a foto cobre tudo. */
.rodape-base{
  position:relative; overflow:hidden;
  min-height:calc(524 * var(--u));
  padding-top:calc(155 * var(--u));
}
.rodape-base-foto{ position:absolute; inset:0; }
.rodape-base .onda-foto{ top:-1px; height:calc(54 * var(--u)); z-index:2; }
.rodape-base-foto img{ position:absolute; inset:0; object-position:50% 30%; }
/* escurece de leve a foto toda e bem mais embaixo, onde ficam os links */
.rodape-base::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(12,30,8,.92) 0%, rgba(12,30,8,.78) 38%, rgba(12,30,8,0) 66%),
    rgba(0,0,0,.26);
}
.rodape-base-texto{
  position:relative; z-index:1;
  margin-left:calc(var(--borda) + 75 * var(--u));
  width:calc(317 * var(--u)); min-width:260px;
}
.rodape-logo{ display:block; width:calc(316 * var(--u)); min-width:220px; height:auto; }
.rodape-base-texto p{
  margin-top:calc(6 * var(--u));
  font-size:13px; line-height:1.65; color:#fff9f6; opacity:.85;
}

/* links do rodapé */
.rodape-info{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.1fr 1.3fr 1.2fr 1.2fr;
  gap:40px calc(56 * var(--u));
  padding:calc(96 * var(--u)) calc(var(--borda) + 75 * var(--u)) 48px;
  font-family:var(--f-inter); font-size:14px; line-height:1.6;
  color:rgba(255,253,244,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.rodape-col h3{
  margin:0 0 18px;
  font-family:var(--f-inter); font-weight:800; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--amarelo);
}
.rodape-col ul{ display:flex; flex-direction:column; gap:10px; }
.rodape-col a{ color:var(--creme); text-decoration:none; transition:color .2s ease; }
.rodape-col a:hover{ color:var(--amarelo); text-decoration:underline; text-underline-offset:3px; }
.rodape-secoes{ font-family:var(--f-satoshi); font-weight:700; font-size:15px; }
.rodape-rotulo{
  display:block;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,253,244,.7);
}
.rodape-col address{ font-style:normal; color:var(--creme); }
.rodape-horario{ margin-top:12px; }
.rodape-horario span{ font-size:12px; color:rgba(255,253,244,.6); }
.rodape-col .rodape-mapa{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--amarelo);
}
.rodape-col-cta p{ max-width:260px; }
.rodape-col-cta .pilula{ margin-top:20px; color:var(--verde-noite); }
.rodape-col-cta .pilula:hover{ color:var(--verde-noite); text-decoration:none; }
.rodape-final{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  margin:0 calc(var(--borda) + 75 * var(--u));
  padding:20px 0 28px;
  border-top:1px solid rgba(255,253,244,.18);
  font-family:var(--f-inter); font-size:12px;
  color:rgba(255,253,244,.7);
}
.rodape-final a{ color:rgba(255,253,244,.8); }
.rodape-final a:hover{ color:var(--amarelo); }

/* ============================================================
   TABLET E CELULAR (< 960px)
   ============================================================ */
@media (max-width: 959px){
  :root{ --g:20px; }

  /* cabeçalho */
  /* pílula menor; o menu abre num cartão logo abaixo dela */
  .topo{ top:10px; width:calc(100% - 20px); height:58px; padding:0 8px 0 18px; gap:8px; }
  .topo.rolou{ top:8px; }
  .topo-logo{ width:124px; }
  .topo-cta, .topo-rede{ display:none; }
  .topo-menu{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 11px; border:0; border-radius:50%;
    background:var(--verde-escuro);
  }
  .topo-menu span{ display:block; height:2px; background:var(--creme); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .topo-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .topo-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .topo-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .topo-acoes{ margin-left:auto; }
  .topo-nav{
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:14px 14px 16px; border-radius:26px;
    background:rgba(255,253,244,.97);
    box-shadow:0 18px 40px -16px rgba(24,53,14,.45);
    display:none;
  }
  .topo-nav.aberto{ display:flex; }
  .topo-nav > a{ padding:12px 10px; font-size:20px; font-weight:700; color:var(--verde-escuro); border-radius:14px; }
  /* no menu do celular entram também o botão e as redes */
  .topo-nav-extra{ display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:12px; border-top:1px solid rgba(35,76,53,.1); }
  .topo-nav-extra .topo-cta, .topo-nav-extra .topo-rede{ display:inline-flex; }
  .topo-nav-extra .topo-rede{ display:grid; }
  .topo-nav-extra .topo-cta{ flex:1; min-width:0; margin:0; padding:0 14px; height:52px; font-size:17px; }
  .topo-nav-extra .topo-rede{ width:48px; height:48px; }

  /* apresentação */
  /* criança no centro, rosto livre em cima; o título desce para a parte de
     baixo da foto, sobre um véu escuro que garante a leitura */
  .hero{ height:min(660px, 165vw); }
  .hero-foto img{ object-position:47% 50%; }
  .hero-foto::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(18,53,14,.35) 0%, rgba(18,53,14,0) 22%),
      linear-gradient(0deg, rgba(10,30,6,.82) 0%, rgba(10,30,6,.55) 32%, rgba(10,30,6,0) 58%);
  }
  .hero-conteudo{ left:var(--g); right:var(--g); width:auto; top:auto; bottom:118px; gap:20px; }
  .hero-titulo{ font-size:clamp(36px, 10.6vw, 72px); line-height:.86; color:#fff6c9; }

  /* espaços */
  .espacos{ flex-direction:column; gap:36px; min-height:0; padding:56px 0 88px; }
  .espacos-intro{ width:auto; margin:0; padding:0 var(--g); }
  .espacos-titulo{ font-size:clamp(32px, 9vw, 42px); }
  .espacos-lista{
    width:100%; margin:0; gap:16px;
    padding:12px var(--g) 18px;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .espacos-lista::-webkit-scrollbar{ display:none; }
  .espaco{ flex:none; scroll-snap-align:center; }
  .espaco figure{ width:182px; }
  .espaco-1 figure, .espaco-3 figure{ height:252px; }
  .espaco-2 figure{ height:268px; }
  .espaco-4 figure{ height:261px; }
  .espaco-1, .espaco-3{ margin-top:18px; }
  .espaco-4{ margin-top:7px; }

  /* faixa */
  .faixa{ height:440px; }
  .faixa-foto img{ object-position:40% 50%; }
  .faixa-veu{ background:linear-gradient(180deg, rgba(10,30,6,.15) 0%, rgba(10,30,6,.3) 40%, rgba(10,30,6,.7) 100%); }
  .faixa-texto{ font-size:clamp(28px, 8vw, 40px); left:var(--g); right:var(--g); }
  .faixa-esq{ top:72px; }
  .faixa-dir{ top:auto; bottom:64px; text-align:right; }
  .faixa .onda-topo{ height:30px; }
  .faixa .onda-base{ height:24px; }

  /* fundamentos */
  .fundamentos{ padding:84px var(--g) 36px; }
  .fundamentos .onda-topo{ height:40px; }
  .fundamentos .onda-base{ height:36px; }
  .fundamentos-grade{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:40px 20px; }
  .fundamentos-titulo{ grid-column:1 / -1; width:auto; margin:0; white-space:normal; font-size:clamp(36px, 10vw, 48px); }
  .fundamento:nth-of-type(n){ grid-column:auto; }
  .fundamento-icone{ height:96px; }
  .fundamento-icone:empty{ display:none; }
  .fundamento-icone svg{ width:84px; }
  .fundamento h3{ margin-top:8px; font-size:20px; white-space:normal; }

  /* depoimentos: título no creme, a pera inteira embaixo, cartões na barriga
     dela e os olhos logo abaixo. --pw é a largura do desenho todo (1667). */
  .depoimentos{
    --pw:min(150vw, 640px);
    height:auto; padding:48px 0 0;
  }
  .depoimentos-titulo{ position:relative; left:auto; top:auto; width:auto; padding:0 var(--g); font-size:clamp(32px, 9vw, 44px); }
  .pera{
    position:relative; left:calc(50% - var(--pw) * .517); top:auto;
    width:var(--pw); height:calc(var(--pw) * 1360 / 1667);
    margin-top:24px;
  }
  .depoimentos-lista{
    position:absolute; z-index:1; left:0; right:0; top:auto; width:auto;
    bottom:calc(var(--pw) * 322 / 1667);
    align-items:flex-end; gap:var(--g);
    padding:8px var(--g) 26px; scroll-padding:0 var(--g);
  }
  .depoimentos-setas{ display:none; }
  .rodape-base .onda-foto{ height:28px; }
  /* celular: um cartão inteiro por vez (nada cortado nas bordas) e
     pontinhos embaixo mostrando onde se está */
  .depoimento{ width:100%; padding:22px 20px 18px; gap:12px; scroll-snap-align:center; }
  .depoimentos-pontos{
    position:absolute; z-index:1; left:0; right:0;
    bottom:calc(var(--pw) * 322 / 1667 - 6px);
    display:flex; justify-content:center; gap:8px;
  }
  .depoimentos-pontos button{
    width:8px; height:8px; padding:0; border:0; border-radius:99px;
    background:rgba(35,76,53,.3); transition:width .25s ease, background-color .25s ease;
  }
  .depoimentos-pontos button[aria-current]{ width:22px; background:var(--verde-escuro); }
  .depoimento blockquote{ flex:none; font-size:14px; line-height:1.55; }
  .depoimento-destaque blockquote{ font-size:14px; }
  .mapa .onda-topo{ top:-24px; height:40px; }

  /* mapa */
  .mapa{ height:auto; padding:64px var(--g) 120px; display:flex; flex-direction:column; gap:32px; }
  .bola-mapa-1{ width:220px; height:200px; left:-60px; top:30px; }
  .bola-mapa-2{ width:200px; height:180px; left:auto; right:-60px; top:auto; bottom:-50px; }
  .mapa-texto{ position:relative; left:auto; top:auto; width:auto; }
  .mapa-titulo{ font-size:clamp(36px, 10vw, 48px); }
  .mapa-desc{ margin-top:16px; }
  .mapa-texto .pilula{ margin-top:20px; }
  .mapa-moldura{ position:relative; left:auto; top:auto; width:100%; height:320px; border-radius:72px 32px 80px 40px; }
  .mapa-mascote{ left:0; top:auto; bottom:-52px; width:196px; height:189px; }

  /* rodapé */
  .rodape .onda-topo{ top:-20px; height:40px; }
  .rodape-convite{ height:auto; padding:72px 0 64px; display:flex; flex-direction:column; align-items:center; gap:32px; }
  .rodape-titulo{ position:relative; left:auto; top:auto; align-self:stretch; padding:0 var(--g); font-size:clamp(36px, 10vw, 48px); }
  .rodape-fotos{ align-self:stretch; overflow-x:auto; scrollbar-width:none; }
  .rodape-fotos::-webkit-scrollbar{ display:none; }
  .rodape-fila-cima{ display:none; }
  .rodape-fila-baixo{ position:static; width:auto; display:flex; gap:14px; padding:18px var(--g); }
  .rodape-foto{ position:relative; left:auto; top:auto; flex:none; width:170px; height:210px; }
  .rodape-chamada{ position:static; width:auto; padding:0 var(--g); font-size:clamp(26px, 7.4vw, 36px); }
  .rodape-convite .pilula{ position:static; }
  /* faixa final no celular: a foto inteira (menino + amora) em cima, e
     embaixo dela, em fundo verde liso, logo, botão e blocos de contato */
  .rodape-base{ min-height:0; padding:0 0 8px; background:var(--verde-noite); }
  .rodape-base::after{ display:none; }
  .rodape-base-foto{ position:relative; inset:auto; aspect-ratio:16 / 10; }
  .rodape-base-foto img{ position:absolute; inset:0; object-position:46% 50%; }
  .rodape-base-foto::after{ content:""; position:absolute; inset:auto 0 0; height:46%; background:linear-gradient(0deg, var(--verde-noite), rgba(24,53,14,0)); }
  .rodape-base-texto{ position:relative; margin:-34px var(--g) 0; width:auto; min-width:0; text-align:center; }
  .rodape-logo{ width:210px; min-width:0; margin:0 auto; }
  .rodape-base-texto p{ margin:10px auto 0; max-width:330px; font-size:14px; }
  .rodape-info{ grid-template-columns:minmax(0, 1fr); gap:12px; padding:26px var(--g) 24px; text-shadow:none; }
  .rodape-col{ padding:18px 18px 20px; border-radius:22px; background:rgba(255,253,244,.07); }
  .rodape-col h3{ margin-bottom:12px; }
  .rodape-col:first-child{ order:3; }
  .rodape-col-cta{ order:-1; background:var(--amarelo-claro); color:var(--verde-noite); text-align:center; }
  .rodape-col-cta h3{ color:var(--verde-escuro); }
  .rodape-col-cta p{ max-width:none; color:var(--texto); }
  .rodape-col-cta .pilula{ margin-top:14px; width:100%; justify-content:center; height:50px; }
  .rodape-col ul{ gap:4px; }
  .rodape-col li a{ display:flex; flex-direction:column; min-height:44px; justify-content:center; }
  .rodape-secoes{ display:grid !important; grid-template-columns:1fr 1fr; gap:0 16px !important; }
  .rodape-secoes li a{ min-height:42px; }
  .rodape-col .rodape-mapa{ display:inline-flex; flex-direction:row; min-height:44px; margin-top:8px; }
  .rodape-final{ flex-direction:column; align-items:center; text-align:center; margin:0 var(--g); padding:18px 0 calc(24px + env(safe-area-inset-bottom)); }
  .rodape-final a{ display:inline-flex; align-items:center; min-height:44px; }

  /* apresentação: o mascote encolhe e fica no canto da foto */
  .hero-mascote{ left:auto; right:-8px; top:auto; bottom:-40px; width:156px; height:195px; }

  .enf{ display:none; }
}

@media (max-width: 520px){
  .rodape-info{ grid-template-columns:1fr; }
  .fundamentos-grade{ grid-template-columns:1fr; }
  .fundamento p{ max-width:320px; margin-left:auto; margin-right:auto; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}