/* Kid's Garden — sistema visual v2 (alinhado à referência aprovada)
   UMA família para títulos e texto: Plus Jakarta Sans (larga, arredondada, confiante)
   Anotações em inglês: Caveat (caneta, inclinada, humana) · "Look closely": Caveat Brush
   Motivo gráfico: conexões neurais — linhas finas laranja + pequenos pontos. Nada botânico. */

:root{
  --green:#0f2f23; --green-2:#164333; --green-3:#1f6a4c; --deep:#0a2219;
  --orange:#f26a1b; --orange-ink:#2a1204;
  --purple:#6b4aa6;
  --ivory:#f8f4ea; --paper:#f1eadb; --bone:#e6dccb;
  --ink:#11271e; --muted:#55645c; --rule:rgba(17,39,30,.16);
  --night:#060d0a; --fog:#e9e6dd;

  --sans:"Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --hand:"Caveat", "Segoe Script", cursive;
  --brush:"Caveat Brush", "Caveat", cursive;

  --g:20px; --sec:64px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (min-width:760px){ :root{ --g:40px; --sec:84px } }
@media (min-width:1100px){ :root{ --g:clamp(48px,4.6vw,88px); --sec:clamp(88px,7.4vw,120px) } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:64px }
body{ margin:0; background:var(--ivory); color:var(--ink); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden }
img,svg,video{ display:block; max-width:100% }
h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; padding:0 }
ul,ol{ list-style:none }
a{ color:inherit }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--orange); color:var(--orange-ink); padding:10px 14px; font-weight:700; border-radius:99px }
.skip:focus{ left:8px }

/* títulos */
h1,h2,h3{ font-family:var(--sans); font-weight:600; letter-spacing:-.035em; line-height:1.08; text-wrap:balance; color:var(--green) }
h2{ font-size:clamp(30px,8.2vw,38px) }
h2 em,h1 em{ font-style:normal; color:var(--orange) }
@media (min-width:900px){ h2{ font-size:clamp(38px,3.5vw,54px) } }

/* anotação manuscrita — inglês, com parcimônia */
.hand{ font-family:var(--hand); font-weight:600; font-size:24px; line-height:1.02; color:var(--orange); transform:rotate(-5deg); transform-origin:left center; letter-spacing:0 }
@media (min-width:900px){ .hand{ font-size:28px } }

/* legenda de capítulo: número em pequena moldura, como na referência */
.cap{ font:600 10.5px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px }
.cap b{ font-weight:700; letter-spacing:.04em; color:var(--green); border:1px solid rgba(17,39,30,.3); border-radius:5px; padding:5px 6px 4px; font-variant-numeric:tabular-nums; background:rgba(255,255,255,.5) }
.cap--dark{ color:rgba(255,255,255,.72) } .cap--dark b{ color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06) }

/* botões — pílula, como na referência; laranja só para a ação principal */
.btn{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; font:700 14.5px/1 var(--sans); letter-spacing:-.01em; border-radius:99px; padding:15px 20px 15px 24px; background:var(--orange); color:#fff; transition:transform .3s var(--ease), background .25s, color .25s, box-shadow .25s; box-shadow:0 10px 24px -12px rgba(242,106,27,.8) }
.btn svg{ width:20px; height:20px; flex:none; transition:transform .3s var(--ease) }
.btn:hover svg:not(.btn__pre){ transform:translateX(4px) } .btn:active{ transform:scale(.98) }
.btn--line{ background:none; box-shadow:inset 0 0 0 1.5px currentColor; color:#fff }
.btn--line:hover{ background:#fff; color:var(--green); box-shadow:inset 0 0 0 1.5px #fff }
.btn--ink{ color:var(--green) } .btn--ink:hover{ background:var(--green); color:#fff; box-shadow:inset 0 0 0 1.5px var(--green) }
.btn .btn__pre{ margin-left:-6px }

.lnk{ font:700 14.5px/1.2 var(--sans); text-decoration:none; padding-bottom:6px; background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat; display:inline-block; transition:background-size .35s var(--ease) }
.lnk::after{ content:"  →"; white-space:pre; color:var(--orange) }
.lnk:hover{ background-size:36% 1.5px }

/* ─────────  ESPAÇO RESERVADO DE IMAGEM  ─────────
   <figure class="ph" data-asset="chave-do-manifesto" data-label="o que mostrar" data-ratio="4:5">
   O JS lê js/assets.js; se houver caminho, injeta a <img> e o rótulo some. */
.ph{ position:relative; display:block; overflow:hidden; margin:0; background:repeating-linear-gradient(128deg, #e7dcc8 0 1px, #eee5d3 1px 13px); color:#6a6350; border-radius:4px; isolation:isolate }
.ph::before{ content:""; position:absolute; inset:8px; border:1px dashed rgba(106,99,80,.5); border-radius:2px; pointer-events:none }
.ph::after{ content:"IMAGEM · " attr(data-asset) "\A" attr(data-label) "\A" attr(data-ratio); white-space:pre-line; position:absolute; left:18px; right:18px; bottom:16px; font:600 10.5px/1.5 var(--sans); letter-spacing:.04em; text-wrap:balance }
.ph--dark{ background:repeating-linear-gradient(128deg, #1b3d30 0 1px, #15352a 1px 13px); color:rgba(233,230,221,.62) } .ph--dark::before{ border-color:rgba(233,230,221,.3) }
.ph--png{ background:none; overflow:visible } .ph--png::before{ inset:0; border-radius:12px; border-color:rgba(106,99,80,.55); background:conic-gradient(rgba(17,39,30,.035) 25%, transparent 0 50%, rgba(17,39,30,.035) 0 75%, transparent 0) 0 0/18px 18px }
.ph--round{ border-radius:50% } .ph--round::before{ border-radius:50%; inset:4px } .ph--round::after{ content:"foto"; text-align:center; left:0; right:0; bottom:50%; transform:translateY(50%); letter-spacing:.12em; text-transform:uppercase; font-size:9px }
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1 }
.ph--png > img{ object-fit:contain; object-position:bottom right }
.ph.has-img{ background:none } .ph.has-img::before,.ph.has-img::after{ display:none }
.ph__tag{ font:600 10.5px/1.5 var(--sans); letter-spacing:.04em; color:#6a6350; display:grid } .ph__tag b{ text-transform:uppercase; letter-spacing:.14em; font-size:9.5px } .ph__tag i{ font-style:normal; opacity:.8 }

/* texto ainda não confirmado — nunca inventamos fatos */
.txt-ph{ font:500 13px/1.5 var(--sans); color:#6a6350; border:1px dashed rgba(106,99,80,.55); border-radius:6px; padding:12px 14px 12px 40px; position:relative; max-width:34em; background:rgba(255,255,255,.35) }
.txt-ph::before{ content:"T"; position:absolute; left:12px; top:11px; width:18px; height:18px; border-radius:4px; background:#6a6350; color:var(--ivory); font:700 11px/18px var(--sans); text-align:center }

/* fio condutor: revelado por recorte (SVG esticado) */
.thread{ position:absolute; pointer-events:none; overflow:visible; clip-path:inset(-8px calc((1 - var(--draw,0)) * 100%) -8px -8px) }
.thread path{ fill:none; stroke:var(--orange); stroke-width:1.400; vector-effect:non-scaling-stroke; stroke-linecap:round }

/* dois painéis lado a lado no desktop (ritmo de mosaico da referência) */
.duo{ display:grid }
@media (min-width:1180px){ .duo{ grid-template-columns:var(--duo,1fr 1fr); gap:6px; background:#fff; padding:6px 0 } }

/* ───────── navegação ───────── */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; height:60px; padding:0 var(--g); display:flex; align-items:center; gap:16px; color:#fff; transition:background .35s, color .35s, box-shadow .35s, transform .4s var(--ease) }
.nav.is-solid{ background:rgba(248,244,234,.94); color:var(--green); box-shadow:0 1px 0 var(--rule); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px) }
.nav.is-away{ transform:translateY(-100%) }
.brand{ display:flex; flex-direction:column; text-decoration:none; line-height:1; margin-right:auto }
.brand__name{ font:800 19px/1 var(--sans); letter-spacing:-.04em }
.brand__sub{ font:500 11px/1 var(--sans); letter-spacing:.01em; margin-top:3px; opacity:.85 }
.nav__links{ display:none }
.nav__cta{ font:700 12.5px/1 var(--sans); text-decoration:none; padding:10px 14px; border-radius:99px; background:var(--orange); color:#fff }
.nav__menu{ display:flex; align-items:center; gap:10px; height:44px; margin-right:-6px; padding:0 6px; font:700 13px/1 var(--sans) }
.nav__menu-t{ display:none }
.nav__menu-i{ width:24px; height:9px; border-top:2px solid; border-bottom:2px solid; border-radius:1px; transition:height .3s var(--ease) }
.menu-open .nav{ color:#fff; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none }
.menu-open .nav__menu-i{ height:0; border-bottom:0 } .menu-open .nav__cta{ visibility:hidden } .menu-open{ overflow:hidden }

.menu{ position:fixed; inset:0; z-index:90; background:var(--green); color:#fff; padding:80px var(--g) calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:space-between; overflow-y:auto; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease), visibility 0s .6s; visibility:hidden }
.menu[hidden]{ display:flex }
.menu.is-open{ clip-path:inset(0); visibility:visible; transition:clip-path .6s var(--ease) }
.menu__list{ counter-reset:m }
.menu__list li{ counter-increment:m; border-bottom:1px solid rgba(255,255,255,.14); opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i,0)*45ms + 120ms) }
.menu.is-open li{ opacity:1; transform:none }
.menu__list a{ display:grid; grid-template-columns:30px 1fr; align-items:baseline; padding:12px 0 11px; text-decoration:none }
.menu__list a::before{ content:counter(m,decimal-leading-zero); font:600 11px var(--sans); color:var(--orange); letter-spacing:.06em }
.menu__list b{ font:600 25px/1.1 var(--sans); letter-spacing:-.035em }
.menu__list i{ grid-column:2; font:600 20px/1.1 var(--hand); color:rgba(255,255,255,.62); margin-top:2px }
.menu__foot{ margin-top:26px; display:grid; gap:16px; justify-items:start; font:500 14px var(--sans); color:rgba(255,255,255,.75) }
.menu__wa{ display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:#fff; font-weight:600 } .menu__wa svg{ width:22px; height:22px }
@media (min-width:760px){ .nav{ height:70px } .nav__menu-t{ display:inline } .brand__name{ font-size:22px } .menu{ padding-top:110px } .menu__list{ columns:2; column-gap:64px } .menu__list li{ break-inside:avoid } .menu__list b{ font-size:32px } }
@media (min-width:1180px){
  .nav__menu{ display:none }
  .nav__links{ display:flex; gap:clamp(14px,1.700vw,28px); margin-right:clamp(14px,2vw,36px); font:600 13px/1 var(--sans) }
  .nav__links a{ text-decoration:none; padding:8px 0; position:relative; opacity:.88; transition:opacity .2s }
  .nav__links a::after{ content:""; position:absolute; left:50%; bottom:0; width:5px; height:5px; margin-left:-2.500px; border-radius:50%; background:var(--orange); transform:scale(0); transition:transform .3s var(--ease) }
  .nav__links a:hover,.nav__links a.is-here{ opacity:1 } .nav__links a:hover::after,.nav__links a.is-here::after{ transform:none }
  .nav__cta{ font-size:13.5px; padding:13px 20px }
}

/* ───────── rodapé ───────── */
.foot{ background:var(--night); color:rgba(255,255,255,.7); padding:52px var(--g) calc(84px + env(safe-area-inset-bottom)); display:grid; gap:32px; font:500 14px/1.5 var(--sans) }
.foot__brand{ color:#fff; display:flex; flex-direction:column } .foot__brand .brand__name{ font-size:26px }
.foot__nav{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px }
.foot a{ text-decoration:none } .foot a:hover{ color:#fff }
.foot__info{ display:grid; gap:6px; color:#fff }
.foot__fine{ font-size:12px; color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.12); padding-top:18px }
@media (min-width:900px){ .foot{ grid-template-columns:1.100fr 1.600fr 1fr; padding-bottom:36px } .foot__nav{ grid-template-columns:repeat(3,auto); justify-content:start; gap:10px 36px } .foot__fine{ grid-column:1/-1 } }

.fab{ position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:80; width:48px; height:48px; display:grid; place-items:center; background:var(--orange); color:#fff; border-radius:50%; box-shadow:0 8px 24px rgba(0,0,0,.28); transform:translateY(90px); transition:transform .5s var(--ease) }
.fab svg{ width:25px; height:25px } .fab.is-on{ transform:none }
@media (min-width:1100px){ .fab{ right:24px; bottom:24px } }

@keyframes kgIn{ to{ opacity:1 } }
@keyframes kgRise{ from{ opacity:0; transform:translateY(10px) } }
@keyframes kgWave{ to{ transform:scaleY(1) } }
@keyframes kgPulse{ 70%{ box-shadow:0 0 0 16px rgba(255,255,255,0) } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important; transition-delay:0s !important }
  .thread{ clip-path:none }
}

/* 01 hero · 02 abordagem · 03 phonics · 04 aula · 05 cinco horas  (mobile primeiro) */

/* ───────── 01 HERO — vídeo original ───────── */
.hero{ position:relative; background:var(--night); color:#fff; padding-bottom:44px; overflow:hidden }
.hero__media{ position:relative; aspect-ratio:1/1; max-height:66svh; width:100%; overflow:hidden; background:var(--night) url(../assets/video/hero-poster.jpg) 88% 50%/cover no-repeat }
.hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,13,10,.6) 0, rgba(6,13,10,0) 24%, rgba(6,13,10,0) 56%, rgba(6,13,10,.86) 88%, var(--night) 99%); pointer-events:none }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:88% 50%; opacity:0; transition:opacity .7s ease }
.hero__video.is-playing{ opacity:1 } .hero__video.is-looping{ opacity:0; transition-duration:.45s }
.hero__copy{ position:relative; z-index:2; margin-top:-64px; padding:0 var(--g) }
.hero__h{ color:#fff; font-size:clamp(29px,8.300vw,38px); font-weight:700; line-height:1.04; letter-spacing:-.04em }
.hero__h em.hand{ display:block; font-size:1.720em; font-weight:700; line-height:.86; margin:.1em 0 0 -.02em; color:var(--orange); transform:rotate(-4deg) }
.hero__p{ margin-top:22px; font-size:16.500px; line-height:1.45; font-weight:500; color:rgba(255,255,255,.9) }
.hero__cta{ margin-top:24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.hero__cta .btn{ white-space:nowrap }
.hero__note{ color:#fff; font-size:21px; opacity:.92 }
.hero__place{ margin-top:26px; font:500 11.500px/1 var(--sans); letter-spacing:.02em; color:rgba(255,255,255,.6) }
.hero__tag{ display:none }
.hero__pause{ position:absolute; right:16px; top:74px; z-index:3; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:grid; place-items:center; background:rgba(6,13,10,.35) }
.hero__pause i{ width:9px; height:11px; border-left:3px solid #fff; border-right:3px solid #fff } .hero__pause[aria-pressed="true"] i{ width:0; height:0; border:6px solid transparent; border-left:10px solid #fff; border-right:0; margin-left:3px }

@media (min-width:760px){
  .hero{ min-height:100svh; padding:0; display:flex; align-items:flex-end }
  .hero__media{ position:absolute; inset:0; aspect-ratio:auto; max-height:none; background-position:70% 50% }
  .hero__video{ object-position:70% 50% }
  .hero__media::after{ background:linear-gradient(90deg, rgba(6,13,10,.88) 0, rgba(6,13,10,.6) 30%, rgba(6,13,10,0) 58%), linear-gradient(180deg, rgba(6,13,10,.55) 0, rgba(6,13,10,0) 18%, rgba(6,13,10,0) 72%, rgba(6,13,10,.7) 100%) }
  .hero__copy{ margin:0; padding:130px var(--g) clamp(44px,7vh,84px); width:100% }
  .hero__h{ font-size:clamp(44px,4.700vw,76px) } .hero__p{ font-size:19px; margin-top:26px }
  .hero__cta{ margin-top:30px; gap:26px } .hero__note{ font-size:26px }
  .hero__tag{ display:block; position:absolute; right:var(--g); bottom:clamp(44px,7vh,84px); z-index:2; color:#fff; font-size:25px; text-align:right; transform-origin:right center; opacity:.9 }
  .hero__pause{ top:auto; bottom:clamp(44px,7vh,84px); right:calc(var(--g) + 250px) }
}

/* ───────── 02 NOSSA ABORDAGEM — o que acontece por dentro da aprendizagem ───────── */
.learn{ position:relative; padding:var(--sec) var(--g) calc(var(--sec) - 8px); display:grid }
.learn__head{ display:contents }
.learn .cap{ order:1 } .learn__h{ order:2; margin-top:18px } .learn__p{ order:3; margin-top:16px; color:var(--muted); max-width:38ch }
.learn__map{ order:4; margin-top:30px } .learn__say{ order:5 } .learn__hand{ order:6 }
.learn__map{ position:relative; display:grid; grid-template-columns:57% 1fr; align-items:stretch; margin-right:calc(var(--g) * -.3) }
.ph--child{ aspect-ratio:4/5; border-radius:4px; margin-left:calc(var(--g) * -1) }
.learn__wires{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible }
.learn__wires path{ fill:none; stroke:rgba(242,106,27,.3); stroke-width:1; transition:stroke .45s, stroke-width .45s, filter .45s }
.learn__wires path.is-on{ stroke:var(--orange); stroke-width:2; filter:drop-shadow(0 0 4px rgba(242,106,27,.55)) }
.learn__wires circle{ fill:var(--orange) } .learn__wires .halo{ fill:rgba(242,106,27,.18) }
.learn__nodes{ display:flex; flex-direction:column; justify-content:space-between; padding:2% 0 2% 30px; position:relative; z-index:1 }
.idea{ display:grid; text-align:left; position:relative; padding:5px 0; min-height:44px; align-content:center }
.idea i{ position:absolute; left:-22px; top:50%; width:9px; height:9px; margin-top:-4.500px; border-radius:50%; background:var(--ivory); box-shadow:0 0 0 1.500px rgba(242,106,27,.55); transition:background .4s, box-shadow .4s, transform .4s var(--ease) }
.idea__pt{ font:600 16.500px/1.1 var(--sans); letter-spacing:-.025em; color:rgba(17,39,30,.5); transition:color .4s }
.idea__en{ font-size:17px; transform:none; color:rgba(242,106,27,.0); height:0; transition:color .4s, height .4s var(--ease) }
.idea.is-on .idea__pt{ color:var(--green) } .idea.is-on .idea__en{ color:var(--orange); height:17px }
.idea.is-on i{ background:var(--orange); box-shadow:0 0 0 5px rgba(242,106,27,.2), 0 0 14px rgba(242,106,27,.6); transform:scale(1.150) }
.learn__say{ margin-top:26px; padding:16px 0 0 18px; border-left:1.500px solid var(--orange); min-height:6.200em }
.learn__say-k{ font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--orange) }
.learn__say-t{ margin-top:8px; font:500 19px/1.35 var(--sans); letter-spacing:-.02em; color:var(--green); max-width:24em }
.learn__say.is-swap p{ animation:kgRise .5s var(--ease) both }
.learn__hand{ margin:24px 0 0 auto; width:max-content; color:var(--green-3) }

@media (min-width:900px){
  .learn{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center }
  .learn__head{ display:block; grid-column:1/6 } .learn__p{ font-size:17px } .learn__say{ margin-top:40px; min-height:7em } .learn__say-t{ font-size:23px }
  .learn__map{ grid-column:6/13; order:0; margin:0 calc(var(--g) * -1) 0 0; grid-template-columns:57% 1fr }
  .ph--child{ margin-left:0; width:100% }
  .learn__nodes{ padding:4% var(--g) 4% 56px } .idea i{ left:-30px; width:11px; height:11px; margin-top:-5.500px }
  .idea__pt{ font-size:clamp(20px,1.900vw,28px) } .idea__en{ font-size:22px } .idea.is-on .idea__en{ height:22px }
  .learn__hand{ grid-column:1/6; margin:30px 0 0 }
}

/* ───────── 03 PHONICS ───────── */
.phon{ background:var(--paper); padding:var(--sec) var(--g); position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 42%; column-gap:12px; align-content:start }
.phon > *{ grid-column:1/-1 }
.phon__h{ margin-top:18px; font-weight:700; letter-spacing:-.045em }
.phon__p{ margin-top:12px; color:var(--muted); max-width:36ch }
.phon__board{ margin-top:26px; max-width:520px }
.phon__guide{ display:flex; font:700 10.500px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:rgba(17,39,30,.36); counter-reset:g }
.phon__guide li{ counter-increment:g; padding:0 0 10px; margin-right:22px; border-bottom:2px solid transparent; transition:color .3s, border-color .3s }
.phon__guide li::before{ content:counter(g) "  "; white-space:pre; opacity:.7 }
[data-state="listen"] [data-g="listen"],[data-state="blend"] [data-g="blend"],[data-state="say"] [data-g="say"]{ color:var(--green); border-color:var(--orange) }
.phon__blocks{ margin-top:14px; display:grid; grid-template-columns:1fr 1.250fr 1fr; gap:10px; transition:gap .7s var(--ease) }
.snd{ position:relative; background:#fff; border-radius:16px; aspect-ratio:1/1.080; display:grid; grid-template-rows:1fr auto; justify-items:center; align-items:center; padding:0 0 12px; box-shadow:0 1px 0 rgba(17,39,30,.06), 0 16px 30px -20px rgba(17,39,30,.35); transition:background .25s, color .25s, transform .25s var(--ease), border-radius .7s var(--ease) }
.snd:nth-child(2){ aspect-ratio:auto }
.snd__g{ font:700 clamp(52px,17vw,76px)/1 var(--sans); letter-spacing:-.05em; color:var(--green); padding-top:6px; transition:color .25s }
.snd__ico{ width:24px; height:24px; color:var(--muted); transition:opacity .25s, color .25s }
.snd__wave{ position:absolute; left:0; right:0; bottom:14px; height:20px; display:flex; gap:4px; justify-content:center; align-items:center; opacity:0 }
.snd__wave i{ width:3px; height:100%; background:#fff; border-radius:2px; transform:scaleY(.25) }
.snd::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(242,106,27,.5); pointer-events:none }
.snd.is-live{ background:var(--orange); transform:translateY(-4px) } .snd.is-live .snd__g{ color:#fff }
.snd.is-live::before{ animation:kgRing .7s ease-out }
@keyframes kgRing{ to{ box-shadow:0 0 0 16px rgba(242,106,27,0) } }
.snd.is-live .snd__ico{ opacity:0 } .snd.is-live .snd__wave{ opacity:1 } .snd.is-live .snd__wave i{ animation:kgWave .42s ease-in-out infinite alternate }
.snd__wave i:nth-child(2){ animation-delay:.1s !important } .snd__wave i:nth-child(3){ animation-delay:.2s !important } .snd__wave i:nth-child(4){ animation-delay:.05s !important } .snd__wave i:nth-child(5){ animation-delay:.15s !important }
.snd.is-heard .snd__ico{ color:var(--orange) }
@media (hover:hover){ .snd:hover{ transform:translateY(-3px) } .snd:hover .snd__ico{ color:var(--orange) } }
[data-state="say"] .phon__blocks{ gap:0 }
[data-state="say"] .snd:nth-child(1){ border-radius:16px 0 0 16px } [data-state="say"] .snd:nth-child(2){ border-radius:0 } [data-state="say"] .snd:nth-child(3){ border-radius:0 16px 16px 0 }
.phon__act{ margin-top:18px; display:flex; align-items:center; gap:14px }
.phon__blend{ flex:none; width:58px; height:58px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; box-shadow:0 12px 24px -10px rgba(242,106,27,.85); transition:transform .25s var(--ease) }
.phon__blend svg{ width:24px; height:24px; margin-left:3px } .phon__blend:active{ transform:scale(.94) }
[data-state="blend"] .phon__blend{ animation:kgNudge 1.6s ease-in-out infinite }
@keyframes kgNudge{ 50%{ box-shadow:0 12px 24px -10px rgba(242,106,27,.85), 0 0 0 9px rgba(242,106,27,.16) } }
.phon__hint{ font:600 15px/1.3 var(--sans); letter-spacing:-.015em; color:var(--green); max-width:15em }
.phon__hand{ grid-column:1; margin-top:34px; color:var(--green-3); font-size:23px; align-self:start }
.phon__after{ grid-column:1; margin-top:14px; color:var(--muted); font-size:15px } .phon__after b{ color:var(--green); font-weight:700 }
.phon__bird{ grid-column:2; grid-row:6/8; aspect-ratio:4/5; align-self:end; margin:20px calc(var(--g) * -.5) 0 0; transition:transform .8s var(--ease) }
.phon__bird.is-open{ transform:translateY(-6px) rotate(-1.500deg) } .phon__bird.is-open::before{ border-color:var(--orange); border-style:solid }

/* ───────── 04 COMO ACONTECE UMA AULA ───────── */
.klass{ padding:var(--sec) 0; position:relative; background:var(--ivory) }
.klass__top{ padding:0 var(--g) }
.klass__h{ margin-top:18px } .klass__p{ margin-top:12px; color:var(--muted); max-width:40ch }
.klass__stage{ margin-top:28px }
.klass__frame{ position:relative; aspect-ratio:4/3; margin:0 0 0 var(--g); border-radius:4px 0 0 4px; overflow:hidden }
.klass__ph{ position:absolute; inset:0; border-radius:0; opacity:0; transform:scale(1.040); transition:opacity .7s var(--ease), transform 1.200s var(--ease) } .klass__ph.is-on{ opacity:1; transform:none }
.klass__note{ position:absolute; right:22px; top:18px; z-index:2; text-align:right; transform-origin:right center; font-size:27px; text-shadow:0 0 12px var(--ivory) }
.klass__note.is-swap{ animation:kgRise .5s var(--ease) both }
.klass__rail{ position:relative; margin:4px var(--g) 0; height:74px }
.klass__wave{ position:absolute; left:0; top:0; width:100%; height:44px; overflow:visible }
.klass__wave path{ fill:none; stroke-width:1.400; vector-effect:non-scaling-stroke } .klass__wave-bg{ stroke:var(--rule) }
.klass__wave-on{ stroke:var(--orange); clip-path:inset(-4px calc((1 - var(--kp)) * 100%) -4px 0); transition:clip-path .8s var(--ease) }
.klass__steps{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr) }
.klass__step{ width:100%; height:100%; display:grid; grid-template-rows:44px auto; justify-items:center; align-items:center; font:700 9.500px/1.150 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:rgba(17,39,30,.5); transition:color .3s }
.klass__step i{ width:11px; height:11px; border-radius:50%; background:var(--ivory); box-shadow:0 0 0 1.500px rgba(17,39,30,.4); transition:background .35s, box-shadow .35s, transform .35s var(--ease) }
.klass__step.is-done i{ background:var(--orange); box-shadow:0 0 0 1.500px var(--orange) }
.klass__step.is-on{ color:var(--green) } .klass__step.is-on i{ background:var(--orange); box-shadow:0 0 0 6px rgba(242,106,27,.2), 0 0 14px rgba(242,106,27,.55); transform:scale(1.200) }
.klass__txt{ padding:14px var(--g) 0; min-height:5.600em }
.klass__en{ font:700 26px/1.1 var(--sans); letter-spacing:-.04em; color:var(--green) } .klass__pt{ margin-top:4px; color:var(--muted); font-size:16.500px }
.klass__txt.is-swap p{ animation:kgRise .5s var(--ease) both }
.klass__hand{ margin:8px var(--g) 0; color:var(--green-3) }

@media (min-width:760px){ .klass__step{ font-size:11px } .klass__en{ font-size:32px } }
@media (min-width:1180px){
  .duo--a{ --duo:minmax(0,5fr) minmax(0,7fr) }
  .duo--a .phon{ padding:var(--sec) calc(var(--g) * .7) var(--sec) var(--g); grid-template-columns:1fr 40% }
  .duo--a .phon__board{ max-width:none } .duo--a .snd__g{ font-size:clamp(60px,5.400vw,92px) }
  .duo--a .klass{ padding-bottom:calc(var(--sec) - 20px) } .duo--a .klass__top{ padding:0 var(--g) 0 calc(var(--g) * .7) }
  .duo--a .klass__frame{ margin-left:calc(var(--g) * .7); aspect-ratio:16/9 } .duo--a .klass__rail{ margin:6px var(--g) 0 calc(var(--g) * .7) }
  .duo--a .klass__txt,.duo--a .klass__hand{ padding-left:0; margin-left:calc(var(--g) * .7) } .duo--a .klass__txt{ display:flex; align-items:baseline; gap:18px; min-height:0; padding-top:18px } .duo--a .klass__pt{ font-size:18px }
  .duo--a .klass__hand{ position:absolute; right:var(--g); bottom:calc(var(--sec) - 34px); margin:0; transform-origin:right center }
}

/* ───────── 05 CINCO HORAS — o 5 inteiro, sempre ───────── */
.five{ position:relative; padding:calc(var(--sec) - 16px) var(--g) var(--sec); display:grid }
.five__num{ position:relative; width:min(72%,330px); margin-left:-10px }
.five__svg{ width:100%; height:auto; overflow:visible; display:block }
.five__glyph{ font:800 930px/1 var(--sans); letter-spacing:0 }
.five__glyph--line{ fill:none; stroke:rgba(17,39,30,.28); stroke-width:1.500; stroke-dasharray:6 7 }
.five.has-img .five__glyph--line{ display:none }
.five__tag{ position:absolute; left:calc(100% + 4px); bottom:12%; width:9.500em }
.five.has-img .five__tag{ display:none }
.five__body{ margin-top:6px }
.five__h{ margin-top:16px; font-size:clamp(34px,9.400vw,44px); font-weight:700 }
.five__p{ margin-top:14px; color:var(--muted); max-width:38ch }
.five__track{ margin-top:22px; position:relative }
.five__net{ width:100%; height:78px; overflow:visible; display:block }
.five__net path{ fill:none; stroke:var(--orange); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.75 } .five__net circle{ fill:var(--orange) }
.five__net g{ opacity:0; transform:translateY(8px); transition:opacity .7s var(--ease), transform .7s var(--ease) } .five__net g.is-on{ opacity:1; transform:none }
.five__hours{ display:grid; grid-template-columns:repeat(5,1fr); position:relative; margin-top:-16px }
.five__hours::before,.five__hours::after{ content:""; position:absolute; left:0; right:0; top:5px; height:1.500px; background:var(--rule) }
.five__hours::after{ background:var(--orange); right:auto; width:calc(var(--fp,0) * 100%); transition:width .7s var(--ease) }
.five__hours button{ position:relative; z-index:1; display:grid; justify-items:center; gap:9px; padding:0 0 8px; font:700 13px/1 var(--sans); color:rgba(17,39,30,.45); min-height:44px; transition:color .3s }
.five__hours i{ width:11px; height:11px; border-radius:50%; background:var(--ivory); box-shadow:0 0 0 1.500px rgba(17,39,30,.4); transition:background .35s, box-shadow .35s, transform .35s var(--ease) }
.five__hours .is-on{ color:var(--green) } .five__hours .is-on i{ background:var(--orange); box-shadow:0 0 0 1.500px var(--orange) }
.five__hours .is-now i{ box-shadow:0 0 0 6px rgba(242,106,27,.2), 0 0 14px rgba(242,106,27,.55); transform:scale(1.200) }
.five__hours button:last-child{ font-size:17px }
.five__list{ margin-top:16px }
.five__list li{ font:600 20px/1.2 var(--sans); letter-spacing:-.03em; color:var(--green); padding:9px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:56px 1fr; opacity:.22; transform:translateX(-6px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.five__list li.is-on{ opacity:1; transform:none } .five__list span{ font-weight:400; color:var(--muted) }
.five__hand{ margin-top:26px; color:var(--green-3) }

@media (min-width:900px){
  .five{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; padding-top:var(--sec) }
  .five__num{ grid-column:1/7; width:100%; max-width:560px; justify-self:center; margin:0 } .five__svg{ max-height:80vh }
  .five__tag{ left:auto; right:-2%; bottom:8% }
  .five__body{ grid-column:7/13; margin:0 } .five__h{ font-size:clamp(44px,4.200vw,64px) } .five__p{ font-size:17px }
  .five__list li{ font-size:24px; grid-template-columns:70px 1fr; padding:11px 0 }
}

/* 06 projetos · 07 jornada · 08 teens · 09 cambridge */

/* ───────── 06 PROJETOS — entrar numa investigação ───────── */
.proj{ background:radial-gradient(120% 80% at 85% 10%, #17503b 0, rgba(23,80,59,0) 60%), var(--deep); color:#fff; padding:var(--sec) 0; position:relative; display:grid; overflow:hidden }
.proj__copy{ display:contents }
.proj .cap{ order:1; margin:0 var(--g) } .proj__title{ order:2 } .proj__h{ order:3 } .proj__p{ order:4 } .proj__stage{ order:5 } .proj__menu{ order:6 } .proj__note{ order:7 } .proj__key{ order:8 }
.proj__title{ margin:22px var(--g) 0; font:400 clamp(76px,23vw,104px)/.78 var(--brush); text-transform:uppercase; letter-spacing:.005em; transform:rotate(-4deg); transform-origin:left bottom; color:#fff }
.proj__title i{ font-style:normal; color:var(--orange) }
.proj__h{ margin:26px var(--g) 0; color:#fff; font-size:clamp(23px,6.200vw,28px); font-weight:600; max-width:16em }
.proj__p{ margin:12px var(--g) 0; color:rgba(255,255,255,.74); max-width:40ch; font-size:15.500px }
.proj__stage{ position:relative; margin-top:28px; aspect-ratio:1/1; overflow:hidden }
.proj__ph{ position:absolute; inset:0; border-radius:0 }
.proj__lens{ position:absolute; left:var(--lx,34%); top:var(--ly,30%); width:38%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); border:1.500px solid rgba(255,255,255,.9); box-shadow:0 0 0 100vmax rgba(6,20,14,.38), 0 18px 40px rgba(0,0,0,.4); background:repeating-linear-gradient(128deg, #2b5a48 0 2px, #1d4637 2px 30px); background-repeat:no-repeat; pointer-events:none; transition:left .7s var(--ease), top .7s var(--ease); z-index:1 }
.proj__lens.has-img{ background-repeat:no-repeat }
.spot{ position:absolute; left:var(--x); top:var(--y); width:48px; height:48px; margin:-24px 0 0 -24px; display:grid; place-items:center; z-index:2 }
.spot b{ width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:kgPulse 2.400s infinite; transition:background .3s, transform .3s var(--ease) }
.spot.is-on b{ background:var(--orange); animation:none; box-shadow:0 0 0 7px rgba(242,106,27,.3); transform:scale(1.150) }
.proj__hand{ display:none }
.proj__menu{ display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid rgba(255,255,255,.14) }
.proj__menu button{ display:grid; justify-items:center; gap:7px; padding:14px 0 12px; color:rgba(255,255,255,.55); position:relative; transition:color .25s }
.proj__menu svg{ width:40px; height:40px; padding:9px; border-radius:50%; border:1px solid rgba(255,255,255,.26); fill:none; stroke:currentColor; stroke-width:1.500; stroke-linecap:round; stroke-linejoin:round; transition:background .3s, border-color .3s, color .3s }
.proj__menu b{ font:700 8.500px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase }
.proj__menu .is-on{ color:#fff } .proj__menu .is-on svg{ background:var(--orange); border-color:var(--orange); color:#fff }
.proj__note{ margin:22px var(--g) 0; padding-left:18px; border-left:1.500px solid var(--orange); min-height:7.400em }
.proj__note-k{ font:700 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--orange) }
.proj__note-q{ margin-top:8px; font:600 clamp(26px,7vw,32px)/1.08 var(--sans); letter-spacing:-.035em }
.proj__note-pt{ margin-top:8px; font-size:14.500px; color:rgba(255,255,255,.7) }
.proj__note.is-swap p{ animation:kgRise .5s var(--ease) both }
.proj__key{ margin:34px var(--g) 0; font:600 clamp(22px,6vw,26px)/1.180 var(--sans); letter-spacing:-.03em; max-width:17em } .proj__key em{ font-style:normal; color:var(--orange) }

@media (min-width:1000px){
  .proj{ grid-template-columns:minmax(0,4.200fr) minmax(0,6fr) minmax(0,1.700fr); grid-template-rows:auto auto; padding:var(--sec) 0 var(--sec) var(--g); column-gap:0; align-items:start }
  .proj__copy{ display:block; grid-column:1; grid-row:1; padding-right:48px } .proj .cap{ margin:0 }
  .proj__title{ margin:26px 0 0; font-size:clamp(96px,8.400vw,148px) } .proj__h{ margin:34px 0 0; font-size:clamp(24px,2vw,30px) } .proj__p{ margin:12px 0 0; font-size:16px }
  .proj__note{ margin:34px 0 0; min-height:8.600em } .proj__note-q{ font-size:clamp(30px,2.700vw,42px) } .proj__note-pt{ font-size:15.500px }
  .proj__stage{ grid-column:2; grid-row:1/3; margin:0; aspect-ratio:4/3; border-radius:4px; align-self:center } .proj__lens{ width:26% }
  .proj__hand{ display:block; position:absolute; right:22px; bottom:20px; z-index:3; color:#fff; text-align:right; transform-origin:right center; text-shadow:0 1px 12px rgba(0,0,0,.6) }
  .proj__menu{ grid-column:3; grid-row:1/3; grid-template-columns:1fr; border:0; align-self:center; padding:0 var(--g) 0 30px; gap:4px }
  .proj__menu button{ grid-template-columns:50px 1fr; justify-items:start; align-items:center; gap:14px; padding:7px 0 } .proj__menu svg{ width:50px; height:50px; padding:12px } .proj__menu b{ font-size:11.500px; letter-spacing:.1em }
  .proj__key{ grid-column:1; grid-row:2; margin:36px 48px 0 0; font-size:clamp(22px,1.800vw,27px); align-self:end }
}

/* ───────── 07 A JORNADA — uma cena contínua ───────── */
.jr{ position:relative; height:420svh; background:var(--jbg,var(--ivory)) }
.jr__pin{ position:sticky; top:0; height:100svh; overflow:hidden; color:var(--green); transition:color .5s }
.jr__pin.is-dark{ color:#fff }
.jr__path{ position:absolute; inset:0; width:100%; height:100%; clip-path:inset(0 calc((1 - var(--jp,0)) * 100%) 0 0) }
.jr__path path{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round }
.jr__ribbon{ stroke:rgba(255,255,255,.7); stroke-width:34 } .is-dark .jr__ribbon{ stroke:rgba(255,255,255,.07) }
.jr__line{ stroke:var(--orange); stroke-width:1.500 }
.jr__intro{ position:absolute; left:var(--g); right:var(--g); top:84px; z-index:3; opacity:var(--io,1); transform:translateY(calc((1 - var(--io,1)) * -24px)); pointer-events:none }
.jr__h{ margin-top:16px; font-size:clamp(36px,10vw,46px); font-weight:700; color:inherit } .jr__h em{ color:var(--green-3) } .is-dark .jr__h em{ color:var(--orange) }
.jr__p{ margin-top:12px; max-width:34ch; color:var(--muted); font-size:15.500px }
.jr__stage{ position:absolute; left:50%; top:54%; width:min(68vw,300px); z-index:2; opacity:var(--o,0); transform:translate(-50%,-50%) translate(calc(var(--x,0) * 1vw), calc(var(--y,0) * 1svh)) scale(var(--s,.6)); will-change:transform,opacity }
.jr__ph{ aspect-ratio:4/5; width:100%; box-shadow:0 30px 60px -30px rgba(10,34,25,.5) }
.jr__stage--1 .jr__ph{ border-radius:999px 999px 10px 10px } .jr__stage--1 .jr__ph::before{ border-radius:999px 999px 6px 6px }
.jr__stage--2 .jr__ph{ border-radius:44px } .jr__stage--2 .jr__ph::before{ border-radius:38px }
.jr__stage--3 .jr__ph{ border-radius:3px }
.jr__meta{ margin-top:14px; display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline; opacity:var(--mo,0) }
.jr__age{ font:300 44px/1 var(--sans); letter-spacing:-.05em; color:var(--orange); grid-row:1/3 } .jr__stage--3 .jr__age{ color:#b79cf0 }
.jr__meta h3{ font-size:23px; font-weight:700; color:inherit } .jr__pt{ font-size:14px; line-height:1.35; opacity:.8 }
.jr__meta .hand{ grid-column:1/-1; margin-top:8px; color:inherit; font-size:25px }
.jr__dots{ position:absolute; left:var(--g); right:var(--g); bottom:22px; z-index:3; display:flex; gap:18px; font:700 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase }
.jr__dots li{ display:flex; align-items:center; gap:7px; opacity:.4; transition:opacity .4s } .jr__dots li::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; transition:background .4s, box-shadow .4s }
.jr__dots li.is-on{ opacity:1 } .jr__dots li.is-on::before{ background:var(--orange); box-shadow:0 0 0 4px rgba(242,106,27,.25) }
.jr__end{ position:absolute; right:var(--g); bottom:54px; z-index:3; text-align:right; transform-origin:right center; color:var(--orange); opacity:var(--eo,0); font-size:26px }
.jr.is-static{ height:auto; background:var(--ivory) } .jr.is-static .jr__pin{ position:relative; height:auto; padding:var(--sec) var(--g); display:grid; gap:40px; color:var(--green) }
.jr.is-static .jr__intro,.jr.is-static .jr__stage,.jr.is-static .jr__dots,.jr.is-static .jr__end{ position:static; transform:none; opacity:1 } .jr.is-static .jr__meta{ opacity:1 } .jr.is-static .jr__path{ display:none } .jr.is-static .jr__stage{ margin:0 auto }

@media (min-width:900px){
  .jr__intro{ top:50%; right:auto; width:29%; transform:translateY(-50%); opacity:1 } .jr__h{ font-size:clamp(46px,4.300vw,68px) } .jr__p{ font-size:17px; color:inherit; opacity:.75 }
  .jr__stage{ left:69%; top:50%; width:min(54vw,720px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.800fr); align-items:end; column-gap:36px }
  .jr__ph{ max-height:70vh; width:auto; justify-self:end; height:70vh } .jr__meta{ margin:0 0 6%; grid-template-columns:1fr } .jr__age{ font-size:72px; grid-row:auto } .jr__meta h3{ font-size:34px; margin-top:4px } .jr__pt{ font-size:16px; margin-top:6px } .jr__meta .hand{ font-size:32px; margin-top:16px }
  .jr__dots{ left:var(--g); right:auto; bottom:40px } .jr__end{ bottom:40px; font-size:32px } .jr__ribbon{ stroke-width:64 }
}

/* ───────── 08 TEENS — a marca amadurece ───────── */
.teen{ background:var(--deep); color:var(--fog); padding:0 0 var(--sec); position:relative; display:grid }
.teen__bar{ display:flex; justify-content:space-between; padding:18px var(--g) 16px; border-bottom:1px solid rgba(233,230,221,.18); font:600 10.500px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(233,230,221,.62) } .teen__bar span:first-child{ color:var(--orange) }
.teen__head{ padding:44px var(--g) 0 }
.teen__h{ color:#fff; font-size:clamp(46px,13.400vw,60px); font-weight:800; text-transform:uppercase; line-height:.94; letter-spacing:-.045em; text-wrap:initial } .teen__h em{ display:block }
.teen__hand{ margin-top:16px; color:#fff; font-size:27px }
.teen__lead{ margin-top:22px; padding-left:16px; border-left:1.500px solid var(--orange); max-width:40ch; font-size:16px; color:rgba(233,230,221,.82) }
.teen__pics{ margin-top:36px; padding:0 var(--g); display:grid; grid-template-columns:repeat(12,1fr) } .teen__ph{ aspect-ratio:3/4; border-radius:2px }
.teen__ph--a{ grid-column:1/8; grid-row:1 } .teen__ph--b{ grid-column:7/13; grid-row:1; margin-top:34%; box-shadow:-10px -10px 0 var(--deep) }
.rq__k,.rq__tag{ font:700 10.500px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(233,230,221,.55) } .rq__tag{ color:var(--orange) }
.rq{ margin:52px var(--g) 0; padding:24px 0; border-top:1px solid rgba(233,230,221,.2); border-bottom:1px solid rgba(233,230,221,.2) }
.rq__q{ margin-top:16px; font:600 clamp(27px,7.600vw,34px)/1.1 var(--sans); letter-spacing:-.035em; color:#fff; min-height:3.300em } .rq__q.is-swap{ animation:kgRise .55s var(--ease) both }
.rq__cols{ margin-top:22px; display:grid; gap:24px }
.rq__themes{ margin-top:12px; display:grid; grid-template-columns:1fr 1fr }
.rq__themes button{ font:700 14px/1 var(--sans); padding:15px 8px; border:1px solid rgba(233,230,221,.28); margin:0 -1px -1px 0; transition:background .25s, color .25s }
.rq__themes .is-on{ background:var(--fog); color:var(--deep) }
.rq__more{ margin-top:12px; font-size:13px; color:rgba(233,230,221,.5) }
.rq__fns{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px }
.rq__fns button{ font:600 14.500px/1 var(--sans); padding:11px 13px; border:1px solid rgba(233,230,221,.24); border-radius:2px; color:rgba(233,230,221,.8); transition:border-color .25s, color .25s, background .25s }
.rq__fns .is-on{ border-color:var(--orange); color:var(--orange); background:rgba(242,106,27,.08) }
.rq__say{ margin:26px 0 0; min-height:9.500em } .rq__say p{ font:500 clamp(19px,5.200vw,23px)/1.4 var(--sans); letter-spacing:-.02em; color:#fff; max-width:26em } .rq__say p::before{ content:"“" } .rq__say p::after{ content:"”" }
.rq__say.is-swap p{ animation:kgRise .55s var(--ease) both }
.rq__say footer{ margin-top:12px; display:flex; gap:12px; align-items:baseline; font:700 10.500px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--orange) } .rq__say footer i{ font:500 12px/1 var(--sans); letter-spacing:0; text-transform:none; font-style:normal; color:rgba(233,230,221,.45) }
.teen__skills{ margin:36px var(--g) 0 } .teen__skills ul{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 18px }
.teen__skills li{ font:600 14px/1.2 var(--sans); color:rgba(233,230,221,.4); display:flex; align-items:center; gap:7px; transition:color .4s } .teen__skills li::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; transition:box-shadow .4s }
.teen__skills li.is-on{ color:#fff } .teen__skills li.is-on::before{ background:var(--orange); box-shadow:0 0 0 4px rgba(242,106,27,.25) }
.teen__close{ margin:48px var(--g) 0; font:600 clamp(24px,6.600vw,30px)/1.150 var(--sans); letter-spacing:-.035em; color:#fff; max-width:16em } .teen__close em{ font-style:normal; color:var(--orange) }

@media (min-width:900px){
  .teen{ grid-template-columns:repeat(12,1fr); column-gap:24px; padding-left:var(--g); padding-right:var(--g) }
  .teen__bar{ grid-column:1/-1; padding:26px 0 18px } .teen__head{ grid-column:1/8; padding:70px 0 0 } .teen__h{ font-size:clamp(76px,8vw,132px) } .teen__hand{ font-size:34px } .teen__lead{ font-size:18px; margin-top:30px }
  .teen__pics{ grid-column:8/13; grid-row:2/4; margin:70px 0 0; padding:0; align-self:start }
  .rq{ grid-column:1/8; margin:64px 0 0 } .rq__q{ font-size:clamp(34px,3.200vw,48px); min-height:2.400em } .rq__cols{ grid-template-columns:1fr 1.300fr; gap:36px } .rq__say p{ font-size:24px }
  .teen__skills{ grid-column:9/13; margin:0; align-self:end; padding-bottom:24px } .teen__skills ul{ display:grid; gap:9px } .teen__skills li{ font-size:15px }
  .teen__close{ grid-column:1/9; margin:70px 0 0; font-size:clamp(34px,3.200vw,48px) }
}

/* ───────── 09 CAMBRIDGE — institucional ───────── */
.camb{ position:relative; padding:var(--sec) 0; background:var(--ivory); overflow:hidden; display:grid }
.camb__head{ padding:0 var(--g) }
.camb__h{ margin-top:20px; font-size:clamp(42px,11.600vw,54px); font-weight:400; letter-spacing:-.05em; line-height:1.02 }
.camb__p{ margin-top:16px; color:var(--muted); max-width:38ch }
.camb__logo{ position:absolute; right:var(--g); top:calc(var(--sec) - 10px); width:128px; aspect-ratio:2.600/1 } .camb__logo::after{ left:10px; right:10px; bottom:8px; font-size:8.500px; line-height:1.3 } .camb__logo::before{ border-radius:6px }
.camb__cards{ margin-top:22px; display:flex; padding:26px var(--g) 34px calc(var(--g) + 4%); overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity } .camb__cards::-webkit-scrollbar{ display:none }
.q{ flex:0 0 50%; aspect-ratio:3/4.100; margin-left:-4%; padding:20px 10px 0; display:flex; flex-direction:column; align-items:center; text-align:center; border-radius:4px; background:var(--qb); color:var(--green); transform:rotate(var(--r)); box-shadow:0 18px 34px -22px rgba(17,39,30,.5), 0 1px 0 rgba(255,255,255,.7) inset; transition:transform .5s var(--ease), box-shadow .4s; scroll-snap-align:center; position:relative }
.q--1{ --qb:#f8dcc5; --qs:#e8601c; --r:-4deg } .q--2{ --qb:#dce9d7; --qs:#2f8a55; --r:2.500deg } .q--3{ --qb:#e5dcf1; --qs:#6b4aa6; --r:-2deg } .q--4{ --qb:#f0eadf; --qs:#43306e; --r:3.500deg }
.q__n{ font:700 19px/1.1 var(--sans); letter-spacing:-.03em } .q__l{ font:500 13px/1.2 var(--sans); margin-top:4px; color:var(--muted) } .q__s{ width:44%; margin:auto 0; color:var(--qs) }
.q.is-on{ transform:rotate(0) translateY(-12px); z-index:2; box-shadow:0 30px 44px -24px rgba(17,39,30,.6) }
.q.is-on::after{ content:""; position:absolute; left:50%; bottom:-22px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(242,106,27,.2) }
.camb__curve{ position:relative; display:block; width:100%; height:70px; margin-top:-6px } .camb__curve path{ stroke:var(--green-3) }
.camb__info{ padding:0 var(--g); display:grid; gap:14px } .camb__t{ min-height:4.800em; font:500 18px/1.4 var(--sans); letter-spacing:-.02em; color:var(--green); max-width:30em }
.camb__why{ margin:30px var(--g) 0; display:grid; gap:0; border-top:1px solid var(--rule) }
.camb__why li{ padding:14px 0; border-bottom:1px solid var(--rule); font-size:14.500px; color:var(--muted); display:grid; gap:3px } .camb__why b{ font:700 16px/1.2 var(--sans); letter-spacing:-.02em; color:var(--green) }
.camb__hand{ margin:24px var(--g) 0 auto; width:max-content; color:var(--green-3) }
@media (min-width:600px) and (max-width:899px){ .q{ flex-basis:30% } }
@media (min-width:900px){
  .camb{ grid-template-columns:repeat(12,1fr); column-gap:24px; padding:var(--sec) var(--g); align-items:start }
  .camb__head{ grid-column:1/5; padding:0 } .camb__h{ font-size:clamp(50px,4.800vw,78px) } .camb__p{ font-size:17px }
  .camb__logo{ top:calc(var(--sec) - 44px); width:190px }
  .camb__cards{ grid-column:5/13; grid-row:1; margin:64px 0 0; padding:40px 0 40px 6%; overflow:visible } .q{ flex:1; margin-left:-3% } .q__n{ font-size:24px }
  .q:nth-child(1){ margin-top:60px } .q:nth-child(2){ margin-top:20px } .q:nth-child(3){ margin-top:50px }
  .camb__curve{ grid-column:5/13; grid-row:2; height:100px; width:calc(100% + var(--g)); margin-top:-20px }
  .camb__info{ grid-column:1/5; grid-row:2/4; padding:0; margin-top:10px } .camb__t{ font-size:20px }
  .camb__why{ grid-column:5/12; grid-row:3; margin:10px 0 0; grid-template-columns:repeat(3,1fr); column-gap:28px; border:0 } .camb__why li{ border-bottom:0; border-top:1px solid var(--rule); padding-top:16px }
  .camb__hand{ grid-column:10/13; grid-row:2; margin:40px 0 0; align-self:end; z-index:1 }
}

/* 10 história · 11 famílias · 12–13 pessoas · 14 dias comuns · 15 faq · 16 visita */

/* ───────── 10 NOSSA HISTÓRIA — pessoal, não corporativa ───────── */
.story{ background:var(--paper); padding:var(--sec) var(--g); position:relative; overflow:hidden; display:grid }
.story__path{ display:none }
.story > *:not(.story__path){ position:relative }
.story__h{ margin-top:18px; font-size:clamp(30px,8.400vw,40px) } .story__h em{ display:block; margin-top:.15em }
.story__pics{ margin-top:32px; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto auto }
.story__ph--f{ grid-column:1/9; grid-row:1/3; aspect-ratio:4/5; border-radius:160px 160px 4px 4px } .story__ph--f::before{ border-radius:152px 152px 2px 2px }
.story__ph--d1{ grid-column:8/13; grid-row:1; aspect-ratio:1; margin-top:22%; border-radius:50%; box-shadow:0 0 0 6px var(--paper) } .story__ph--d2{ grid-column:9/13; grid-row:2; aspect-ratio:1; margin:-6% 0 0 -18%; border-radius:50%; box-shadow:0 0 0 6px var(--paper) }
.story__ph--d1::before,.story__ph--d2::before{ border-radius:50%; inset:5px } .story__ph--d1::after,.story__ph--d2::after{ text-align:center; bottom:50%; transform:translateY(50%); font-size:9.500px; left:12px; right:12px }
.story__note{ grid-column:1/-1; margin-top:14px; color:var(--green-3) }
.story__body{ margin-top:26px; display:grid; gap:20px }
.story__lead{ font:500 19px/1.45 var(--sans); letter-spacing:-.02em; color:var(--green); max-width:30em }
.story__tl{ position:relative; padding-left:26px; display:grid; gap:22px; margin-top:6px }
.story__tl::before{ content:""; position:absolute; left:4px; top:8px; bottom:30px; width:1.500px; background:linear-gradient(var(--orange),var(--orange)) }
.story__tl li{ position:relative } .story__tl li::before{ content:""; position:absolute; left:-26px; top:5px; width:9.500px; height:9.500px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 1.500px var(--orange) }
.story__tl li:last-child::before{ background:var(--orange); box-shadow:0 0 0 5px rgba(242,106,27,.2), 0 0 12px rgba(242,106,27,.5) }
.story__y{ display:block; font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--orange) } .story__y[data-tbc]{ display:inline-block; color:#6a6350; border:1px dashed rgba(106,99,80,.6); border-radius:4px; padding:4px 6px; letter-spacing:.1em; font-size:9.500px }
.story__tl b{ display:block; margin-top:7px; font:700 21px/1.1 var(--sans); letter-spacing:-.03em; color:var(--green) } .story__tl p{ margin-top:4px; color:var(--muted); max-width:34ch; font-size:15px }
.story__ph--a{ aspect-ratio:3/2; max-width:420px } .story__hand{ color:var(--green-3) }
@media (min-width:900px){
  .story{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center }
  .story__path{ display:block; left:0; top:6%; width:52%; height:88%; opacity:.85 }
  .story__pics{ grid-column:1/7; grid-row:1/3; margin:0; max-width:620px } .story__head{ grid-column:7/13 } .story__h{ font-size:clamp(38px,3.500vw,56px) }
  .story__body{ grid-column:7/13; margin-top:28px; grid-template-columns:1fr 1fr; column-gap:28px; align-items:start } .story__lead,.story__body .txt-ph,.story__tl{ grid-column:1/-1 } .story__lead{ font-size:22px }
  .story__tl{ grid-template-columns:1fr 1fr; padding:26px 0 0; column-gap:28px } .story__tl::before{ left:0; right:30%; top:4.500px; bottom:auto; width:auto; height:1.500px } .story__tl li::before{ left:0; top:-26px }
  .story__ph--a{ grid-column:1 } .story__hand{ grid-column:2; align-self:center } .story__note{ font-size:30px }
}

/* ───────── 11 FAMÍLIAS — uma voz de cada vez ───────── */
.fam{ padding:var(--sec) var(--g); position:relative; display:grid; background:var(--ivory) }
.fam__wrap{ margin-top:22px; position:relative; min-height:19em }
.fam__wrap::before{ content:"“"; display:block; font:800 110px/.7 var(--sans); color:var(--orange); height:48px; margin-left:-4px }
.fam__q{ display:none; margin:0 } .fam__q.is-on{ display:block; animation:kgRise .7s var(--ease) both }
.fam__q blockquote p{ font:600 clamp(25px,6.900vw,32px)/1.180 var(--sans); letter-spacing:-.035em; color:var(--green); max-width:20em; text-wrap:balance }
.fam__q[data-placeholder] blockquote p{ color:rgba(17,39,30,.4) }
.fam__q figcaption{ margin-top:24px; display:flex; align-items:center; gap:14px; font:500 13.500px/1.35 var(--sans); color:var(--muted) } .fam__q figcaption b{ display:block; font-weight:700; color:var(--green); font-size:15.500px } .fam__q figcaption i{ font-style:normal }
.fam__q .ph--round{ width:58px; height:58px; flex:none }
.fam__q[data-placeholder] figcaption > span:last-child::after{ content:"aguardando depoimento autorizado"; display:inline-block; margin-top:6px; font:700 9px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; border:1px dashed rgba(106,99,80,.6); color:#6a6350; padding:4px 6px; border-radius:4px }
.fam__nav{ margin-top:22px; display:flex; align-items:center; gap:14px; font:700 14px var(--sans); color:var(--green); font-variant-numeric:tabular-nums }
.fam__nav button{ width:46px; height:46px; border:1.500px solid rgba(17,39,30,.3); border-radius:50%; display:grid; place-items:center; transition:background .25s, color .25s, border-color .25s } .fam__nav svg{ width:20px; height:20px } .fam__nav button:first-child svg{ transform:scaleX(-1) }
.fam__nav button:hover{ background:var(--green); border-color:var(--green); color:#fff }
.fam__side{ margin-top:34px; display:grid; gap:10px } .fam__hand{ margin-top:30px; color:var(--green-3) }
@media (min-width:900px){
  .fam{ grid-template-columns:repeat(12,1fr); column-gap:24px } .fam .cap{ grid-column:1/-1 }
  .fam__wrap{ grid-column:1/9; min-height:22em } .fam__wrap::before{ font-size:170px; height:78px } .fam__q blockquote p{ font-size:clamp(36px,3.400vw,52px) }
  .fam__nav{ grid-column:1/9 } .fam__side{ grid-column:9/13; grid-row:2/4; margin:60px 0 0; align-content:start } .fam__hand{ grid-column:9/13; font-size:30px }
}

/* ───────── 12–13 PESSOAS ───────── */
.teach{ padding:var(--sec) var(--g); overflow:hidden; background:var(--paper) }
.teach__ph{ width:70%; aspect-ratio:4/5; margin-left:calc(var(--g) * -1); border-radius:0 140px 4px 0 } .teach__ph::before{ border-radius:0 132px 2px 0 }
.teach__body{ margin-top:26px } .teach__h{ margin-top:16px } .teach__h em{ color:var(--green-3) } .teach__p{ margin-top:14px; color:var(--muted); max-width:38ch }
.teach__verbs{ margin-top:24px; display:flex; flex-wrap:wrap; gap:4px 16px; font:600 clamp(24px,6.800vw,30px)/1.2 var(--sans); letter-spacing:-.04em; color:rgba(17,39,30,.22) }
.teach__verbs span{ transition:color .6s } .teach__verbs .is-on{ color:var(--green) } .teach__verbs .is-on::after{ content:"."; color:var(--orange) }
.behind{ background:var(--green); color:#fff; padding:var(--sec) var(--g); position:relative }
.behind__h{ margin-top:20px; color:#fff } .behind__h span{ display:block } .behind__dim{ color:rgba(255,255,255,.28); transition:color 1.600s .4s var(--ease) } .behind__h.in .behind__dim{ color:var(--orange) }
.behind__p{ margin-top:16px; max-width:38ch; color:rgba(255,255,255,.76) }
.behind__list{ margin-top:26px; counter-reset:b; display:grid; grid-template-columns:1fr 1fr; column-gap:18px; border-top:1px solid rgba(255,255,255,.2) }
.behind__list li{ counter-increment:b; display:grid; grid-template-columns:26px 1fr; align-items:baseline; font:600 14.500px/1.2 var(--sans); letter-spacing:-.015em; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.12); opacity:.18; transition:opacity .7s var(--ease) }
.behind__list li::before{ content:counter(b,decimal-leading-zero); font-size:10px; color:var(--orange); letter-spacing:.06em } .behind__list li.is-on{ opacity:1 }
.behind__hand{ margin-top:28px; color:#fff }
@media (min-width:1180px){
  .duo--b{ --duo:minmax(0,7fr) minmax(0,5fr) }
  .teach{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); column-gap:40px; align-items:center; padding-left:0 } .teach__ph{ width:100%; margin:0; max-height:70vh } .teach__body{ margin:0; padding-right:calc(var(--g) * .4) }
  .behind{ padding-left:calc(var(--g) * .8) } .behind__list li{ font-size:16px; padding:14px 0 }
}

/* ───────── 14 DIAS COMUNS — curadoria, não mosaico aleatório ───────── */
.days{ padding:var(--sec) var(--g) }
.days__h{ margin-top:18px; max-width:12em } .days__h em{ color:var(--green-3) }
.days__grid{ margin-top:30px; display:grid; grid-template-columns:repeat(12,1fr); gap:10px; align-items:end; position:relative }
.d--1{ grid-column:1/8; aspect-ratio:4/5 } .d--2{ grid-column:8/13; aspect-ratio:1 }
.d--3{ grid-column:1/13; aspect-ratio:3/2; margin-right:calc(var(--g) * -1); border-radius:4px 0 0 4px }
.d--4{ grid-column:6/13; aspect-ratio:4/5; grid-row:3 } .d--5{ grid-column:1/6; aspect-ratio:1; grid-row:3; align-self:start }
.days__hand{ grid-column:1/6; grid-row:3; align-self:end; color:var(--green-3); margin-bottom:8px }
.days__lnk{ margin-top:34px; color:var(--green) }
@media (min-width:900px){
  .days__grid{ gap:16px; align-items:stretch; grid-template-rows:auto auto; margin-top:48px }
  .d--1{ grid-column:1/4; grid-row:1/3; aspect-ratio:auto; min-height:100% } .d--2{ grid-column:4/6; grid-row:1 } .d--5{ grid-column:4/6; grid-row:2; align-self:stretch }
  .d--3{ grid-column:6/11; grid-row:1/3; aspect-ratio:3/2.200; margin:0; border-radius:4px } .d--4{ grid-column:11/13; grid-row:1/3; aspect-ratio:auto; margin-right:calc(var(--g) * -1); border-radius:4px 0 0 4px }
  .days__hand{ position:absolute; right:12%; bottom:-54px; margin:0; grid-column:auto; grid-row:auto } .days__lnk{ margin-top:70px }
}

/* ───────── 15 FAQ — simples ───────── */
.faq{ padding:var(--sec) var(--g); border-top:1px solid var(--rule) }
.faq__list{ margin-top:24px; border-top:1.500px solid var(--green) }
.faq details{ border-bottom:1px solid var(--rule) }
.faq summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 20px; gap:16px; align-items:center; padding:18px 0 17px; font:600 17px/1.25 var(--sans); letter-spacing:-.02em; color:var(--green) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:""; width:14px; height:14px; justify-self:end; background:linear-gradient(var(--orange),var(--orange)) center/100% 2px no-repeat, linear-gradient(var(--orange),var(--orange)) center/2px 100% no-repeat; transition:transform .35s var(--ease) }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 36px 22px 0; color:var(--muted); max-width:40em } .faq details a{ color:var(--green); font-weight:600 }
@media (min-width:900px){ .faq{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px } .faq__h{ grid-column:1/5 } .faq__list{ grid-column:5/13; margin-top:8px } .faq summary{ font-size:19px; padding:22px 0 21px } }

/* ───────── 16 VISITA ───────── */
.end{ background:radial-gradient(100% 90% at 10% 0, #17503b 0, rgba(23,80,59,0) 60%), var(--deep); color:#fff; padding:var(--sec) var(--g); position:relative; overflow:hidden; display:grid }
.end__path{ left:0; top:0; width:100%; height:100%; opacity:.55 } .end > *:not(.end__path){ position:relative }
.end__ph{ width:62%; aspect-ratio:4/5; margin:0 calc(var(--g) * -1) 0 auto; border-radius:140px 0 0 4px } .end__ph::before{ border-radius:132px 0 0 2px }
.end__body{ margin-top:-40px } .end__h{ margin-top:18px; color:#fff; font-size:clamp(40px,11.400vw,54px); font-weight:700; max-width:8em }
.end__p{ margin-top:16px; color:rgba(255,255,255,.8); max-width:36ch; font-size:16.500px }
.end__cta{ margin-top:26px; display:grid; gap:12px; justify-items:start } .end__hand{ margin-top:34px; color:#fff }
@media (min-width:900px){
  .end{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; min-height:86vh }
  .end__ph{ grid-column:8/13; grid-row:1; width:auto; max-height:70vh; justify-self:end; height:70vh } .end__body{ grid-column:1/8; grid-row:1; margin:0 } .end__h{ font-size:clamp(60px,6vw,100px) } .end__p{ font-size:19px }
  .end__cta{ grid-auto-flow:column; justify-content:start; gap:14px; margin-top:36px } .end__hand{ font-size:32px; margin-top:48px }
}

/* ═════════ kids-garden-refinement-v2 ═════════
   Tudo o que muda em relação a kids-garden-current-approved está neste arquivo
   (+ marcação em index.html e blocos marcados "v2" em js/site.js). */

/* ───────── 2 · FUNDO: branco quente no lugar do bege ───────── */
:root{ --ivory:#fdfcfa; --paper:#f7f5f1; --bone:#ecebe6 }
.ph{ background:repeating-linear-gradient(128deg, #e6e4de 0 1px, #f1efea 1px 13px); color:#6b6a63 }
.ph::before{ border-color:rgba(107,106,99,.45) }
.ph--dark{ background:repeating-linear-gradient(128deg, #1b3d30 0 1px, #15352a 1px 13px); color:rgba(233,230,221,.62) }
.ph--png{ background:none }
.ph.has-img{ background:none }
.txt-ph{ background:#fff }
.q--4{ --qb:#f1efea }
.duo{ gap:0 }
@media (min-width:1180px){ .duo{ gap:1px; background:rgba(17,39,30,.1); padding:1px 0 } }

/* ───────── 1 · CABEÇALHO FIXO, sempre visível, fino ───────── */
.nav{ height:56px; transform:none !important }
.nav.is-solid{ background:rgba(253,252,250,.9); box-shadow:0 1px 0 rgba(17,39,30,.1); backdrop-filter:saturate(1.3) blur(14px); -webkit-backdrop-filter:saturate(1.3) blur(14px) }
.nav__cta{ padding:9px 14px }
html{ scroll-padding-top:60px }
@media (min-width:760px){ .nav{ height:64px } html{ scroll-padding-top:68px } }
@media (min-width:1180px){ .nav__cta{ padding:12px 20px } }

/* ───────── 3 · CINCO HORAS: sem a malha geométrica; um "Mais", uma frase que cresce ───────── */
.five__track{ margin-top:30px }
.five__hours{ margin-top:0 }
.five__more{ margin-top:30px; font:600 clamp(25px,6.900vw,32px)/1.220 var(--sans); letter-spacing:-.035em; color:var(--green); max-width:15em; text-wrap:balance }
.five__more span{ color:rgba(17,39,30,.18); transition:color .6s var(--ease) }
.five__more i{ font-style:normal; color:rgba(17,39,30,.18) }
.five__more span.is-on{ color:var(--green) }
.five__more span.is-now{ color:var(--orange) }
.five__hand{ margin-top:30px }
@media (min-width:900px){ .five__more{ font-size:clamp(32px,2.900vw,44px); margin-top:40px } }

/* ───────── 5 · PHONICS: o pássaro, limpo, como elemento recortado ───────── */
.phon__bird{ aspect-ratio:1/1.050 }
.phon__bird.has-img{ overflow:visible }
.phon__bird.has-img > img{ object-fit:cover; object-position:46% 42%; -webkit-mask-image:radial-gradient(ellipse 60% 58% at 50% 48%, #000 46%, transparent 74%); mask-image:radial-gradient(ellipse 60% 58% at 50% 48%, #000 46%, transparent 74%); transform:scale(1.250); transform-origin:60% 60% }
.phon__hint-off{ display:block; margin-top:4px; font:500 12.500px/1.3 var(--sans); color:var(--muted); letter-spacing:0 }
@media (min-width:1180px){ .duo--a .phon{ grid-template-columns:1fr 46% } }

/* ───────── 4 · PROJETO: o pássaro e pequenos desafios ───────── */
.proj__h{ font-size:clamp(19px,5.200vw,22px); font-weight:500; color:rgba(255,255,255,.82); max-width:18em; margin-top:22px } .proj__h em{ color:#fff }
.proj__task{ order:7; margin:20px var(--g) 0; display:grid; grid-template-columns:1fr auto; column-gap:14px; align-items:start; min-height:11.500em; align-content:start }
.proj__task-k{ grid-column:1/-1; font:700 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--orange) }
.proj__task-q{ grid-column:1; margin-top:9px; font:600 clamp(25px,6.800vw,30px)/1.1 var(--sans); letter-spacing:-.035em; color:#fff }
.proj__next{ grid-column:2; grid-row:2; margin-top:8px; display:flex; align-items:center; gap:7px; font:700 13px/1 var(--sans); color:#fff; padding:10px 0 10px 8px } .proj__next svg{ width:20px; height:20px; color:var(--orange) }
.proj__opts{ grid-column:1/-1; margin-top:16px; display:flex; flex-wrap:wrap; gap:8px }
.proj__opts:empty{ display:none }
.proj__opts button{ font:600 15px/1 var(--sans); padding:12px 16px; border-radius:99px; border:1px solid rgba(255,255,255,.3); color:#fff; transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease) }
.proj__opts button:hover{ border-color:#fff }
.proj__opts button.is-yes{ background:var(--orange); border-color:var(--orange) }
.proj__opts button.is-no{ animation:kgNo .4s; opacity:.45 }
.proj__opts .sw{ width:64px; height:64px; padding:0; border-radius:50%; background:linear-gradient(90deg, var(--a) 50%, var(--b) 50%); border:2px solid rgba(255,255,255,.35); transform:rotate(-20deg) }
.proj__opts .sw.is-yes{ background:linear-gradient(90deg, var(--a) 50%, var(--b) 50%); border-color:#fff; box-shadow:0 0 0 4px var(--orange); transform:rotate(-20deg) scale(1.080) }
@keyframes kgNo{ 25%{ transform:translateX(-5px) } 75%{ transform:translateX(5px) } }
.proj__fb{ grid-column:1/-1; margin-top:12px; min-height:1.400em; font:600 15px/1.35 var(--sans); color:var(--orange) }
.proj__task.is-swap > *{ animation:kgRise .45s var(--ease) both }

.proj__stage{ aspect-ratio:1/1; touch-action:pan-y; -webkit-user-select:none; user-select:none }
.proj__ph > img{ transition:transform 1.200s var(--ease) }
[data-step="find"] .proj__ph > img,[data-step="match"] .proj__ph > img,[data-step="name"] .proj__ph > img{ transform:scale(1.050) }
.proj__lens{ width:40%; opacity:0; box-shadow:0 0 0 100vmax rgba(6,20,14,.22), 0 18px 40px rgba(0,0,0,.45); transition:opacity .4s, left .5s var(--ease), top .5s var(--ease) }
.proj__lens.is-free{ transition:opacity .4s }
[data-step="observe"] .proj__lens,[data-step="notice"] .proj__lens{ opacity:1 }
.spot{ opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s }
[data-step="find"] .spot{ opacity:1; visibility:visible; transition:opacity .4s }
.spot span{ position:absolute; left:42px; top:50%; transform:translateY(-50%) translateX(-6px); font:700 13px/1 var(--sans); background:#fff; color:var(--green); padding:7px 10px; border-radius:99px; opacity:0; white-space:nowrap; pointer-events:none; transition:opacity .3s, transform .3s var(--ease) }
.spot.is-open span{ opacity:1; transform:translateY(-50%) }
.spot.is-hit b{ background:var(--orange); animation:none; box-shadow:0 0 0 7px rgba(242,106,27,.3) } .spot.is-hit span{ background:var(--orange); color:#fff }
.spot.is-on b{ background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.6); transform:none; animation:kgPulse 2.400s infinite }
.proj__name{ position:absolute; left:56%; top:7%; z-index:3; color:#fff; font-size:34px; opacity:0; transition:opacity .6s; text-shadow:0 1px 14px rgba(0,0,0,.6) } .proj__name.is-on{ opacity:1 }
.proj__hand{ display:block; position:absolute; right:16px; bottom:14px; z-index:3; color:#fff; text-align:right; transform-origin:right center; font-size:22px; text-shadow:0 1px 12px rgba(0,0,0,.65) }
.proj__menu button.is-done:not(.is-on) svg{ border-color:var(--orange); color:var(--orange) }
.proj__key{ margin-top:26px }
@media (min-width:1000px){
  .proj{ align-items:center }
  .proj__h{ font-size:20px; margin-top:30px }
  .proj__task{ margin:34px 0 0; min-height:15em } .proj__task-q{ font-size:clamp(30px,2.600vw,40px) } .proj__opts button{ font-size:16px }
  .proj__stage{ aspect-ratio:1/1; max-height:82vh; max-width:82vh; width:100%; justify-self:center; cursor:crosshair } .proj__lens{ width:30% }
  .proj__hand{ font-size:28px; right:24px; bottom:22px } .proj__name{ font-size:46px }
  .proj__key{ margin-top:30px }
}

/* ───────── 6 · TEENS: a conversa ganha imagem ───────── */
.rq__ph{ aspect-ratio:3/2; margin:22px 0 4px; border-radius:2px }
@media (min-width:900px){
  .teen__pics{ grid-row:2 }
  .rq{ grid-column:1/-1; display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:56px; align-content:start }
  .rq > *{ grid-column:1 } .rq__ph{ grid-column:2; grid-row:1/6; aspect-ratio:4/5; margin:0; align-self:start; width:100% }
  .teen__skills{ grid-column:1/-1; margin:34px 0 0; padding:0 } .teen__skills ul{ display:flex; flex-wrap:wrap; gap:10px 26px }
}

/* ───────── 7 · CAMBRIDGE: sem a curva e sem a nota flutuante ───────── */
.camb__info{ margin-top:6px }
@media (min-width:900px){ .camb__info{ margin-top:0 } .camb__why{ margin-top:0 } }

/* ───────── 8 · FAMÍLIAS: depoimento + fotografia, lado a lado ───────── */
.fam{ padding:0; background:var(--paper); display:grid; overflow:hidden }
.fam__pics{ order:-1; position:relative; aspect-ratio:4/3.300 }
.fam__ph::after{ bottom:auto; top:74px }
.fam__ph{ position:absolute; inset:0; border-radius:0; opacity:0; transition:opacity .7s var(--ease) } .fam__ph.is-on{ opacity:1 }
.fam__hand{ position:absolute; left:var(--g); bottom:18px; z-index:2; margin:0; color:var(--orange); font-size:26px; text-shadow:0 0 14px var(--paper), 0 0 4px var(--paper) }
.fam__pics:has(.is-on.has-img) .fam__hand{ color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.6) }
.fam__text{ padding:34px var(--g) 44px }
.fam__wrap{ margin-top:18px; min-height:0 } .fam__wrap::before{ font-size:96px; height:40px }
.fam__q blockquote p{ font-size:clamp(23px,6.300vw,28px); line-height:1.220; max-width:18em }
.fam__q figcaption{ margin-top:20px; display:grid; gap:3px } .fam__q figcaption b{ font-size:16px }
.fam__q[data-placeholder] figcaption::after{ content:"aguardando depoimento autorizado"; justify-self:start; margin-top:8px; font:700 9px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; border:1px dashed rgba(107,106,99,.6); color:#6b6a63; padding:4px 6px; border-radius:4px }
.fam__q[data-placeholder] figcaption > span:last-child::after{ content:none }
.fam__nav{ margin-top:24px }
@media (min-width:900px){
  .fam{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch }
  .fam__pics{ order:0; aspect-ratio:auto; min-height:min(78vh,720px) } .fam__hand{ font-size:34px; left:32px; bottom:30px }
  .fam__text{ padding:var(--sec) 56px var(--sec) var(--g); display:flex; flex-direction:column; justify-content:center }
  .fam__wrap{ grid-column:auto; min-height:15em; margin-top:26px } .fam__wrap::before{ font-size:150px; height:66px }
  .fam__q blockquote p{ font-size:clamp(30px,2.800vw,44px); max-width:15em } .fam__nav{ grid-column:auto; margin-top:30px }
}

/* rodapé: crédito provisório das fotos de aves */
.foot__cred{ display:block; margin-top:6px }

/* ═════════ kids_garden_refinement_v3 ═════════
   Só o que muda em relação a kids_garden_current_approved (marcação em index.html, blocos "v3" em js/site.js). */

/* ───────── 1 · HERO mais limpo (sem a nota à direita) ───────── */
@media (min-width:760px){ .hero__pause{ right:var(--g) } }

/* ───────── 5 · CINCO HORAS: convite para entender as aulas ───────── */
.five__btn{ margin-top:30px }
.five__hand{ margin-top:26px }

/* ───────── 6 · AULA + PHONICS: uma só composição ─────────
   A aula vem primeiro (no desktop, à direita); Phonics é um dos momentos dela, visto de perto. */
.duo--a{ position:relative }
.duo--a .klass{ position:relative; z-index:1 }
.duo--a .klass::before{ content:""; position:absolute; left:50%; bottom:-26px; width:1.500px; height:52px; margin-left:-.75px; background:var(--orange); z-index:3 }
.duo--a .klass::after{ content:""; position:absolute; left:50%; bottom:-31px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(242,106,27,.2); z-index:3 }
.duo--a .phon{ padding-top:calc(var(--sec) - 8px) }
.phon__link{ margin-top:16px; color:var(--orange); font-size:24px }
.phon__link + .phon__h{ margin-top:6px }
@media (min-width:1180px){
  .duo--a .phon{ order:-1 }                                   /* Phonics à esquerda, aula à direita */
  .duo--a .klass::before{ left:-40px; bottom:auto; top:132px; width:80px; height:1.500px; margin:0 }
  .duo--a .klass::after{ left:-45px; bottom:auto; top:127px; margin:0 }
  .duo--a .phon{ padding-top:var(--sec) } .phon__link{ font-size:28px }
}

/* ───────── 7 · PROJETO imersivo ───────── */
/* acerto: confirmação grande, sobre a imagem */
.proj__win{ position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(242,106,27,.34), rgba(10,34,25,.5) 70%) }
.proj__win svg{ width:clamp(84px,22vw,132px); height:auto; fill:none; stroke:#fff; stroke-width:3.500; stroke-linecap:round; stroke-linejoin:round }
.proj__win svg circle{ fill:var(--orange); stroke:none }
.proj__win svg path{ stroke-dasharray:44; stroke-dashoffset:44 }
.proj__win p{ color:#fff; font-size:clamp(44px,12vw,84px); transform:rotate(-4deg); transform-origin:center; text-shadow:0 2px 18px rgba(0,0,0,.55) }
.proj__win.is-on{ animation:kgWin 2.200s var(--ease) both }
.proj__win.is-on svg{ animation:kgPop .55s var(--ease) both } .proj__win.is-on svg path{ animation:kgTick .45s .25s ease-out forwards }
@keyframes kgWin{ 0%{ opacity:0 } 10%,78%{ opacity:1 } 100%{ opacity:0 } }
@keyframes kgPop{ from{ transform:scale(.4) } 60%{ transform:scale(1.100) } to{ transform:scale(1) } }
@keyframes kgTick{ to{ stroke-dashoffset:0 } }
.spot.is-hit b{ box-shadow:0 0 0 7px rgba(242,106,27,.35), 0 0 0 22px rgba(242,106,27,.16) }

/* NOTICE: o comprimento se vê (associação) */
.proj__opts .opt-line{ display:grid; gap:10px; justify-items:start; padding:14px 18px 12px; border-radius:14px; min-width:96px }
.proj__opts .opt-line i{ display:block; height:5px; border-radius:3px; background:#fff; transition:background .25s }
.proj__opts .opt-line.is-yes i{ background:#fff }
/* CONNECT: cada ambiente tem a sua pequena imagem */
.proj__opts[data-kind="connect"]{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.proj__opts .opt-pic{ padding:0 0 10px; border-radius:12px; overflow:hidden; display:grid; gap:8px; font-size:13.500px; text-align:center }
.proj__opts .opt-pic svg,.proj__opts .opt-pic img{ width:100%; aspect-ratio:8/5; object-fit:cover; display:block }
.proj__opts .opt-pic.is-no{ opacity:.4 }

/* desktop: volta à composição anterior (texto · pássaro · menu), refinada:
   pássaro maior e mais à esquerda, e a interação mora SOBRE a imagem, colada ao pássaro */
@media (min-width:1000px){
  .proj{ padding:calc(var(--sec) - 30px) 0 calc(var(--sec) - 30px) var(--g); grid-template-columns:minmax(0,3.300fr) minmax(0,7.200fr) auto; grid-template-rows:auto auto auto 1fr; column-gap:0; align-items:start; min-height:0 }
  .proj__copy{ display:contents }
  .proj .cap{ grid-column:1; grid-row:1; margin:6px 0 0 }
  .proj__title{ grid-column:1/3; grid-row:2; margin:24px 0 0; font-size:clamp(80px,6.700vw,118px); position:relative; z-index:3; pointer-events:none; width:max-content }
  .proj__h{ grid-column:1; grid-row:3; margin:30px 28px 0 0; font-size:19px }
  .proj__key{ grid-column:1; grid-row:4; margin:0 28px 6px 0; align-self:end; font-size:clamp(20px,1.650vw,25px) }
  .proj__stage{ grid-column:2; grid-row:1/5; width:100%; max-width:min(88vh,100%); max-height:none; aspect-ratio:1/1; border-radius:6px; justify-self:start; align-self:center; cursor:crosshair }
  .proj__task{ grid-column:2; grid-row:1/5; align-self:end; justify-self:start; z-index:4; order:0; margin:0 0 22px 22px; width:min(410px,54%); min-height:13.500em; padding:20px 22px 16px; border-radius:16px; background:rgba(6,20,14,.66); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); box-shadow:0 20px 50px -20px rgba(0,0,0,.6) }
  .proj__task-q{ font-size:clamp(24px,1.900vw,29px) } .proj__opts button{ font-size:15px } .proj__opts .opt-pic{ font-size:12.500px }
  .proj__menu{ grid-column:3; grid-row:1/5; align-self:center; grid-template-columns:1fr; border:0; padding:0 var(--g) 0 26px; gap:4px }
  .proj__menu button{ grid-template-columns:50px 1fr; justify-items:start; align-items:center; gap:14px; padding:7px 0 } .proj__menu svg{ width:50px; height:50px; padding:12px } .proj__menu b{ font-size:11.500px; letter-spacing:.1em }
  .proj__hand{ right:24px; bottom:22px; font-size:28px } .proj__name{ left:55%; top:6%; font-size:46px } .proj__lens{ width:30% }
}

/* ───────── 8 · TEENS: como a aula acontece ───────── */
.teen__bar span:nth-child(2){ color:#fff }
.teen__flow{ margin:36px var(--g) 0; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; counter-reset:tf }
.teen__flow li{ counter-increment:tf; padding:14px 0 14px; border-top:1px solid rgba(233,230,221,.2); display:grid; gap:3px }
.teen__flow li::before{ content:counter(tf,decimal-leading-zero); font:700 10.500px/1 var(--sans); letter-spacing:.1em; color:var(--orange); margin-bottom:5px }
.teen__flow b{ font:700 17px/1.15 var(--sans); letter-spacing:-.025em; color:#fff }
.teen__flow span{ font:500 12.500px/1.2 var(--sans); color:rgba(233,230,221,.55) }
@media (min-width:900px){
  .teen__flow{ grid-column:1/8; margin:44px 0 0; grid-template-columns:repeat(4,1fr); gap:0 22px; align-self:start } .teen__flow b{ font-size:19px }
  .teen__pics{ grid-row:2/4 } .rq{ margin-top:70px }
}

/* ───────── 11 · FAMÍLIAS: três depoimentos, juntos, sem carrossel ───────── */
.famx{ background:var(--paper); padding:var(--sec) var(--g) }
.famx__head{ display:grid; gap:0 } .famx__h{ margin-top:18px } .famx__h em{ color:var(--orange) }
.famx__hand{ margin-top:14px; color:var(--green-3) }
.famx__list{ margin-top:28px; display:grid }
.famx__card{ margin:0; padding:22px 0 24px; border-top:1px solid var(--rule); display:grid; align-content:space-between; gap:18px }
.famx__card::before{ content:"“"; font:800 64px/.6 var(--sans); color:var(--orange); height:22px; margin-left:-2px }
.famx__card blockquote{ margin:0 } .famx__card blockquote p{ font:500 18.500px/1.4 var(--sans); letter-spacing:-.02em; color:var(--green) }
.famx__card[data-placeholder] blockquote p{ color:rgba(17,39,30,.42) }
.famx__card figcaption{ display:flex; align-items:center; gap:12px; font:500 13px/1.35 var(--sans); color:var(--muted) }
.famx__card figcaption b{ display:block; font-weight:700; font-size:15px; color:var(--green) } .famx__card figcaption i{ font-style:normal }
.famx__card .ph--round{ width:52px; height:52px; flex:none }
.famx__card[data-placeholder] figcaption > span:last-child::after{ content:"aguardando depoimento autorizado"; display:inline-block; margin-top:6px; font:700 8.500px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; border:1px dashed rgba(107,106,99,.6); color:#6b6a63; padding:4px 6px; border-radius:4px }
@media (min-width:900px){
  .famx__head{ grid-template-columns:1fr auto; align-items:end } .famx__head .cap{ grid-column:1/-1 } .famx__hand{ margin:0 0 6px; font-size:30px }
  .famx__list{ grid-template-columns:repeat(3,1fr); margin-top:48px; border-top:1px solid var(--rule) }
  .famx__card{ border-top:0; padding:34px 36px 8px; border-left:1px solid var(--rule); gap:30px; min-height:19em } .famx__card:first-child{ border-left:0; padding-left:0 } .famx__card:last-child{ padding-right:0 }
  .famx__card blockquote p{ font-size:clamp(19px,1.550vw,23px) }
}

/* rótulo dos espaços reservados sem hífen (a chave real continua em data-asset / js/assets.js) */
.ph::after{ content:"IMAGEM · " attr(data-name) "\A" attr(data-label) "\A" attr(data-ratio) }
.ph--round::after{ content:"foto" }

/* Abordagem: a segunda frase do título em linha própria */
.learn__h em{ display:block; margin-top:.18em }

/* ═════════ v3 · ajustes (ordem, destaque, lados, teens) ═════════ */

/* 2 · Abordagem: "Da infância à adolescência." é a afirmação principal */
.learn__h{ line-height:1.04 }
.learn__h em{ display:block; margin:0; color:var(--orange); font-weight:700; font-size:1.120em; letter-spacing:-.04em }
.learn__h span{ display:block; margin-top:.32em; color:var(--green); font-weight:600; font-size:.760em; line-height:1.120; letter-spacing:-.03em }

/* 5 · Aula à ESQUERDA, Phonics à DIREITA (no celular: aula primeiro) */
@media (min-width:1180px){
  .duo--a{ --duo:minmax(0,7fr) minmax(0,5fr) }
  .duo--a .phon{ order:0; padding:var(--sec) var(--g) var(--sec) calc(var(--g) * .8) }
  .duo--a .klass__top{ padding:0 calc(var(--g) * .7) 0 var(--g) }
  .duo--a .klass__frame{ margin:0 calc(var(--g) * .7) 0 0; border-radius:0 4px 4px 0 }
  .duo--a .klass__rail{ margin:6px calc(var(--g) * .7) 0 var(--g) }
  .duo--a .klass__txt,.duo--a .klass__hand{ margin-left:var(--g) }
  .duo--a .klass__hand{ right:calc(var(--g) * .7) }
  .duo--a .klass::before{ left:auto; right:-40px } .duo--a .klass::after{ left:auto; right:-45px }
}

/* 7 · TEENS: a entrada precisa ser óbvia */
.teen{ border-top:5px solid var(--orange) }
.teen__head{ padding-top:30px }
.teen__big{ font:800 clamp(104px,31vw,150px)/.8 var(--sans); letter-spacing:-.065em; text-transform:uppercase; color:#fff; margin-left:-.04em }
.teen__sub{ margin-top:16px; font:600 15px/1.2 var(--sans); letter-spacing:.02em; color:rgba(233,230,221,.8); display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center }
.teen__sub span{ font:700 10.500px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--deep); background:var(--orange); padding:6px 9px 5px; border-radius:99px }
.teen__h{ margin-top:34px; font-size:clamp(34px,9.600vw,44px); line-height:1; text-transform:none; letter-spacing:-.04em; font-weight:700 } .teen__h em{ display:inline }
@media (min-width:900px){
  .teen__head{ padding-top:44px } .teen__big{ font-size:clamp(190px,21vw,340px) } .teen__sub{ font-size:18px; margin-top:22px }
  .teen__h{ font-size:clamp(44px,4.400vw,70px); margin-top:44px }
  .teen__pics{ margin-top:calc(clamp(190px,21vw,340px) * .8 + 96px) }   /* as fotos começam abaixo da palavra TEENS */
}

/* 8 · grade equilibrada: quatro passos em 2 x 2; habilidades em duas colunas, ao lado da frase final */
.teen__flow{ grid-template-columns:1fr 1fr; gap:0 22px }
.teen__flow li{ padding:18px 0 20px } .teen__flow b{ font-size:20px } .teen__flow span{ font-size:13.500px }
.teen__skills ul{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px }
.teen__skills li{ padding:11px 0; border-top:1px solid rgba(233,230,221,.14); font-size:14.500px }
@media (min-width:900px){
  .teen__flow{ grid-column:1/7; grid-template-columns:1fr 1fr; gap:0 36px; margin-top:48px } .teen__flow li{ padding:22px 0 26px } .teen__flow b{ font-size:24px } .teen__flow span{ font-size:15px }
  .teen__skills{ grid-column:1/7; margin:64px 0 0 } .teen__skills ul{ display:grid; grid-template-columns:1fr 1fr; gap:0 36px } .teen__skills li{ font-size:16px; padding:13px 0 }
  .teen__close{ grid-column:8/13; grid-row:auto; margin:64px 0 0; align-self:center; font-size:clamp(34px,3.200vw,50px) }
}

/* ═════════ kids_garden_refinement_v4 ═════════
   Só o que muda em relação a kids_garden_v3_approved. */

/* logo oficial */
.brand__logo{ height:30px; width:auto } .foot__brand .brand__logo{ height:40px; filter:brightness(1.08) }
@media (min-width:760px){ .brand__logo{ height:34px } }

/* fotos reais: sem moldura tracejada, cantos discretos */
.teach__ph{ width:78% }
.klass__lnk{ display:block; margin:14px var(--g) 0; width:max-content }
@media (min-width:1180px){ .duo--a .klass__lnk{ margin:16px 0 0 var(--g) } }

/* ───────── 3 · TEENS: entrada manuscrita e centralizada, sem linhas ───────── */
.teen{ border-top:0 }
.teen__bar{ border-bottom:0; padding-bottom:0 }
.teen__head{ text-align:center; padding-top:34px }
.teen__big{ font:600 clamp(72px,19vw,104px)/.9 var(--hand); letter-spacing:0; text-transform:none; color:var(--orange); margin:0 auto; transform:rotate(-4deg); display:inline-block }
.teen__sub{ display:block; margin:14px auto 0; font:600 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:rgba(233,230,221,.7) }
.teen__h{ margin:26px auto 0; max-width:12em }
.teen__hand{ margin:12px auto 0; display:inline-block; transform:rotate(-5deg) }
.teen__lead{ margin:22px auto 0; padding:0; border:0; text-align:center }
.teen__flow{ margin-top:30px } .teen__flow li{ border-top:0; text-align:center; justify-items:center }
.rq{ border:0; padding:0 }
.teen__skills li{ border-top:0 }
.rq__video{ position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:4px; background:#0a1a13; margin:22px 0 4px }
.rq__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45% }
.rq__vtag{ position:absolute; left:12px; top:12px; font:700 9.500px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(6,20,14,.6); padding:6px 9px 5px; border-radius:99px; display:flex; align-items:center; gap:6px }
.rq__vtag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange) }
@media (min-width:900px){
  .teen__head{ grid-column:1/-1; padding-top:48px } .teen__big{ font-size:clamp(120px,11vw,176px) } .teen__sub{ font-size:13px; margin-top:20px }
  .teen__h{ font-size:clamp(44px,4.400vw,70px); margin-top:34px } .teen__lead{ max-width:44ch; font-size:18px }
  .teen__pics{ grid-column:8/13; grid-row:3; margin-top:60px; align-self:start }
  .teen__flow{ grid-column:1/7; grid-row:3; margin-top:60px; grid-template-columns:1fr 1fr }
  .rq{ grid-row:4 } .teen__skills{ grid-row:5 } .teen__close{ grid-row:5 } .teen__flow li{ text-align:left; justify-items:start }
  .rq__video{ aspect-ratio:4/5; margin:0; grid-column:2; grid-row:1/6; align-self:start }
}


/* ═════════ kids_garden_refinement_v5 ═════════ */

/* 9 · logo do rodapé sem esticar */
.foot__brand{ align-items:flex-start } .foot__brand .brand__logo{ width:auto; height:auto; max-width:210px; max-height:50px; align-self:flex-start }
.nav .brand__logo{ width:auto }

/* 3 · PROJETO: pássaro completo (quadrado, sem recorte), perguntas à esquerda, menu à direita */
.proj__task{ position:static; margin:22px var(--g) 0; width:auto; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-radius:0; min-height:12.500em }
.proj__copy{ display:contents }
.proj .cap{ order:1 } .proj__title{ order:2 } .proj__h{ order:3 } .proj__task{ order:4 } .proj__stage{ order:5 } .proj__menu{ order:6 } .proj__key{ order:7 }
.proj__stage{ margin-top:26px; aspect-ratio:1/1 }
.proj__menu{ position:static; display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid rgba(255,255,255,.14); background:none; padding:0; transform:none }
.proj__menu button{ padding:14px 0 12px; color:rgba(255,255,255,.55) } .proj__menu svg{ width:40px; height:40px; padding:9px; background:none }
.proj__hand{ bottom:14px } .proj__key{ margin-top:30px } .proj__lens{ width:40% }
.proj__opts .opt-line{ display:grid; gap:10px; justify-items:start; padding:14px 18px 12px; border-radius:14px; min-width:96px }
.proj__opts .opt-line i{ display:block; height:5px; border-radius:3px; background:#fff }
@media (min-width:1000px){
  .proj{ padding:calc(var(--sec) - 30px) 0 calc(var(--sec) - 30px) var(--g); grid-template-columns:minmax(0,3.100fr) minmax(0,7.400fr) auto; grid-template-rows:auto auto auto 1fr auto; column-gap:0; align-items:start; min-height:0 }
  .proj .cap{ grid-column:1; grid-row:1; margin:6px 0 0 }
  .proj__title{ grid-column:1; grid-row:2; margin:22px 0 0; font-size:clamp(72px,5.800vw,104px); width:auto; z-index:auto; pointer-events:auto }
  .proj__h{ grid-column:1; grid-row:3; margin:24px 28px 0 0; font-size:18px }
  .proj__task{ grid-column:1; grid-row:4; margin:22px 28px 0 0; min-height:13em; align-self:start } .proj__task-q{ font-size:clamp(24px,1.900vw,30px) }
  .proj__key{ grid-column:1; grid-row:5; margin:12px 28px 0 0; align-self:end; font-size:clamp(19px,1.500vw,23px) }
  .proj__stage{ grid-column:2; grid-row:1/6; margin:0; width:100%; max-width:min(92vh,100%); aspect-ratio:1/1; border-radius:6px; justify-self:start; align-self:center; cursor:crosshair; height:auto; position:relative }
  .proj__menu{ grid-column:3; grid-row:1/6; align-self:center; grid-template-columns:1fr; border:0; padding:0 var(--g) 0 26px; gap:4px }
  .proj__menu button{ grid-template-columns:50px 1fr; justify-items:start; align-items:center; gap:14px; padding:7px 0; width:auto } .proj__menu svg{ width:50px; height:50px; padding:12px } .proj__menu b{ font-size:11.500px; letter-spacing:.1em }
  .proj__hand{ right:24px; bottom:22px; font-size:28px } .proj__name{ left:55%; top:6%; font-size:46px } .proj__lens{ width:30% }
}

/* 4 · TEENS: só o título manuscrito, mais abaixo; foto principal em cima, as outras embaixo */
.teen__head{ padding-top:calc(var(--sec) + 40px) }
.teen__big{ font-size:clamp(78px,20vw,110px) }
.teen__pics{ display:block; padding:0 var(--g) } .teen__ph--a{ width:100%; aspect-ratio:3/4 }
.teen__more{ margin:40px var(--g) 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end }
.teen__more .ph{ aspect-ratio:4/3 } .teen__more .ph:last-of-type{ aspect-ratio:3/4 }
.teen__more-hand{ grid-column:1/-1; color:#fff; margin-top:6px }
@media (min-width:900px){
  .teen__head{ padding-top:calc(var(--sec) + 70px) } .teen__big{ font-size:clamp(130px,12vw,190px) }
  .teen__pics{ grid-column:8/13; grid-row:3; padding:0; margin-top:60px } .teen__ph--a{ max-height:78vh }
  .teen__more{ grid-column:1/13; grid-row:6; margin:90px 0 0; grid-template-columns:5fr 4fr; gap:24px }
  .teen__more .ph:first-of-type{ aspect-ratio:3/2 } .teen__more .ph:last-of-type{ aspect-ratio:4/3; margin-bottom:40px }
  .teen__more-hand{ grid-column:2; margin-top:-24px; font-size:28px }
}

/* 5 · CAMBRIDGE: título com peso igual aos outros; logo oficial; sem foto */
.camb__h{ font-weight:600; letter-spacing:-.035em; line-height:1.08; font-size:clamp(30px,8.400vw,40px) }
.camb__logo{ position:static; width:min(220px,60%); height:auto; aspect-ratio:auto; margin:22px var(--g) 0 }
@media (min-width:900px){
  .camb__h{ font-size:clamp(38px,3.500vw,56px) }
  .camb__logo{ grid-column:1/5; grid-row:2; margin:6px 0 0; width:min(230px,80%); align-self:start }
  .camb__info{ grid-row:3 } .camb__why{ grid-row:3 }
}

/* 7 · Quem ensina: mesmo formato de antes, um pouco maior */
@media (min-width:1180px){ .teach{ grid-template-columns:minmax(0,5.600fr) minmax(0,5.400fr) } .teach__ph{ width:100% } }

/* ═════════ kids_garden_refinement_v6 ═════════ */

/* 8 · PROJETO: o desafio tem que ser visto de longe */
.proj__task{ position:relative; margin-top:26px; padding:18px 0 4px 18px; border-left:2px solid var(--orange); min-height:13em }
.proj__task::before{ content:""; position:absolute; left:-7px; top:24px; width:12px; height:12px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(242,106,27,.22); animation:kgSpotPulse 2.400s infinite }
@keyframes kgSpotPulse{ 70%{ box-shadow:0 0 0 12px rgba(242,106,27,0) } 100%{ box-shadow:0 0 0 5px rgba(242,106,27,0) } }
.proj__task-k{ font-size:12px; letter-spacing:.22em }
.proj__task-k::after{ content:" · tap the image"; color:rgba(255,255,255,.55); letter-spacing:.12em; font-weight:600 }
[data-step="observe"] ~ * .proj__task-k::after{ content:" · tap the image" }
.proj__task-q{ font-size:clamp(30px,8.400vw,38px); line-height:1.04; margin-top:12px }
.proj__opts{ margin-top:18px } .proj__opts button{ font-size:16px; padding:14px 18px; border-color:rgba(255,255,255,.5) }
.proj__fb{ font-size:16px }
.proj__next{ font-size:14px; padding:12px 8px 12px 12px; border-radius:99px; border:1px solid rgba(255,255,255,.35) }
.proj__task.is-swap{ animation:kgTaskIn .55s var(--ease) both }
@keyframes kgTaskIn{ from{ transform:translateX(-8px); opacity:.4 } }
.proj__task.is-swap::before{ animation:kgSpotPulse 2.400s infinite, kgPop .5s var(--ease) both }
.proj__stage{ box-shadow:0 0 0 1px rgba(255,255,255,.08) }
@media (min-width:1000px){
  .proj__task{ margin:30px 0 0 0; padding:20px 0 6px 22px; min-height:16em }
  .proj__task::after{ content:""; position:absolute; left:calc(100% + 4px); top:29px; width:34px; height:1.500px; background:var(--orange); opacity:.9 }   /* liga a pergunta à imagem */
  .proj__task-q{ font-size:clamp(30px,2.500vw,40px) }
  .proj__h{ margin-right:44px } .proj__key{ margin-right:44px }
  .proj{ grid-template-columns:minmax(0,3.400fr) minmax(0,7.100fr) auto }
  .proj__stage{ margin-left:40px; max-width:min(92vh, calc(100% - 40px)) }
}

/* 9 · TEENS: abertura editorial com duas fotos e a nota manuscrita */
.teen__pics{ display:grid; grid-template-columns:repeat(12,1fr); padding:0 var(--g); position:relative }
.teen__ph--a{ grid-column:1/9; grid-row:1; aspect-ratio:3/4; width:auto }
.teen__ph--b{ grid-column:7/13; grid-row:1; margin-top:38%; aspect-ratio:3/4; box-shadow:-10px -10px 0 var(--deep) }
.teen__pics-hand{ grid-column:1/8; grid-row:2; margin-top:18px; color:#fff; font-size:26px }
@media (min-width:900px){
  .teen__pics{ grid-column:8/13; grid-row:3; padding:0; margin-top:60px; align-self:start }
  .teen__ph--a{ max-height:none } .teen__pics-hand{ font-size:28px; margin-top:22px }
}

/* 10 · CAMBRIDGE: credencial oficial junto ao rótulo da seção */
.camb__top{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.camb__top .cap{ flex:none }
.camb__logo{ position:static; width:auto; height:auto; max-width:46%; max-height:44px; margin:0; aspect-ratio:auto; grid-column:auto; grid-row:auto }
@media (min-width:900px){
  .camb__top{ grid-column:1/13; align-items:flex-start; margin-bottom:8px }
  .camb__head{ display:contents }
  .camb__h{ grid-column:1/5; grid-row:2 } .camb__p{ grid-column:1/5; grid-row:3; align-self:start }
  .camb__logo{ max-width:250px; max-height:none; margin-top:-6px }
  .camb__cards{ grid-column:5/13; grid-row:2/4; margin:26px 0 0 }
  .camb__info{ grid-column:1/5; grid-row:4 } .camb__why{ grid-column:5/13; grid-row:4 }
}

/* ═════════ kids_garden_refinement_v7 ═════════ */

/* 2 · SEÇÃO 5: um pouco mais de respiro entre texto, imagem e trilho */
.klass__stage{ margin-top:40px }
.klass__rail{ margin-top:20px }
.klass__txt{ padding-top:18px }
@media (min-width:1180px){ .duo--a .klass__stage{ margin-top:44px } .duo--a .klass__rail{ margin-top:22px } .duo--a .klass__txt{ padding-top:22px } }

/* 3 · NOTAS MANUSCRITAS SOBRE FOTOS: legíveis, ainda escritas à mão */
.klass__frame::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(215deg, rgba(6,20,14,.58) 0, rgba(6,20,14,.22) 22%, rgba(6,20,14,0) 44%) }
.klass__note{ color:#fff; font-size:29px; right:20px; top:16px; text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5); max-width:9em }
@media (min-width:900px){ .klass__note{ font-size:31px; right:26px; top:22px } }
.proj__hand,.proj__name{ text-shadow:0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.65) }
.proj__stage::after{ content:""; position:absolute; right:0; bottom:0; width:60%; height:34%; z-index:1; pointer-events:none; background:linear-gradient(200deg, rgba(6,20,14,0) 40%, rgba(6,20,14,.55)) }
.proj__win p{ text-shadow:0 2px 4px rgba(0,0,0,.6), 0 4px 24px rgba(0,0,0,.6) }
.teen__pics-hand,.jr__meta .hand,.end__hand{ text-shadow:0 1px 10px rgba(0,0,0,.35) }

/* 4 · EXPLORE UM PROJETO: a pergunta é a protagonista */
.proj__task{ padding:22px 0 8px 20px; border-left-width:3px }
.proj__task::before{ width:14px; height:14px; left:-8.500px; top:26px }
.proj__task-k{ display:inline-block; justify-self:start; width:max-content; background:var(--orange); color:#fff; padding:7px 11px 6px; border-radius:99px; font-size:11px; letter-spacing:.2em }
.proj__task-k::after{ content:"" }
.proj__task-k + .proj__task-q::before{ content:"Tap the image"; display:block; margin:12px 0 4px; font:700 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6) }
.proj__task-q{ font-size:clamp(34px,9.400vw,42px); font-weight:700; letter-spacing:-.04em; color:#fff }
.proj__task.is-swap{ animation:kgTaskIn .6s var(--ease) both }
.proj__task.is-swap .proj__task-q{ animation:kgQIn .6s var(--ease) both }
@keyframes kgQIn{ from{ opacity:0; transform:translateY(10px) } }
/* celular: um conector desce da pergunta até a imagem */
.proj__task{ margin-bottom:0 }
.proj__stage{ margin-top:30px }
.proj__stage::before{ content:""; position:absolute; left:calc(var(--g) - 8.500px + 1px); top:0; width:3px; height:30px; background:var(--orange); z-index:2; transform:translateY(-30px) }
@media (min-width:1000px){
  .proj__stage::before{ display:none }
  .proj__task{ padding:24px 0 8px 24px; min-height:17em }
  .proj__task-q{ font-size:clamp(34px,2.900vw,46px) }
  .proj__task::after{ left:calc(100% + 4px); width:36px; height:2px; top:31px; box-shadow:36px 0 0 0 var(--orange) }
  .proj__task.is-swap::after{ animation:kgLink .6s var(--ease) both }
  @keyframes kgLink{ from{ transform:scaleX(0); transform-origin:left } }
}

/* 5 · dois olhos junto de LOOK CLOSELY: traço fino, laranja, piscam de vez em quando */
.proj__title{ position:relative }
.proj__eyes{ display:inline-block; width:.62em; height:auto; vertical-align:baseline; margin-left:.12em; color:var(--orange); transform:translateY(-.02em) rotate(4deg) }
.proj__eyes .eye,.proj__eyes .pupils{ transform-origin:50% 50%; transform-box:fill-box; animation:kgBlink 5.200s ease-in-out infinite }
.proj__eyes .pupils{ animation:kgBlink 5.200s ease-in-out infinite, kgLook 5.200s ease-in-out infinite }
@keyframes kgBlink{ 0%,92%,100%{ transform:scaleY(1) } 95%{ transform:scaleY(.08) } }
@keyframes kgLook{ 0%,30%,100%{ translate:0 0 } 40%,60%{ translate:2px .5px } 70%,85%{ translate:-2px 0 } }
@media (prefers-reduced-motion:reduce){ .proj__eyes .eye,.proj__eyes .pupils{ animation:none } }
/* título do projeto: os olhos ficam na mesma linha do ponto, também no celular */
.proj__title{ white-space:nowrap; font-size:clamp(66px,20vw,104px) }
.proj__eyes{ width:.54em }
@media (min-width:1000px){ .proj__title{ font-size:clamp(72px,5.800vw,104px) } }

/* ═════════ kids_garden_refinement_v8 ═════════
   Cinco Horas: a foto chega já recortada em forma de 5 (PNG transparente); nada de máscara. */
.five__num{ position:relative; width:min(78%,360px); margin-left:-6px }
.five__photo{ aspect-ratio:1145/1374; background:none; overflow:visible; border-radius:0 }
.five__photo.has-img::before,.five__photo.has-img::after{ display:none }
.five__photo > img{ object-fit:contain; object-position:center }
.five__photo:not(.has-img)::before{ inset:0; border-radius:12px }
@media (min-width:900px){ .five__num{ grid-column:1/7; width:100%; max-width:520px; justify-self:center; margin:0 } }

/* ═════════ kids_garden_refinement_v9 ═════════ */

/* Avaliações: letra menor, sem a bolinha da foto */
.famx__card blockquote p{ font-size:16px; line-height:1.5 }
.famx__card figcaption{ gap:0 } .famx__card .ph--round{ display:none }
.famx__card figcaption b{ font-size:14.500px } .famx__card figcaption{ font-size:12.500px }
@media (min-width:900px){ .famx__card blockquote p{ font-size:clamp(15px,1.150vw,17px) } .famx__card{ min-height:0; gap:22px } }

/* História: o ano sem pontilhado; a pergunta da fundadora como frase, não como aviso */
.story__y{ display:block; font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--orange); border:0; padding:0; background:none }
.story__q{ position:relative; margin:0; padding:2px 0 2px 18px; border-left:2px solid var(--orange); font:500 18px/1.45 var(--sans); letter-spacing:-.015em; color:var(--green); max-width:30em }
.story__q::before{ content:"“"; position:absolute; left:-1px; top:-14px; font:800 34px/1 var(--sans); color:var(--orange); background:var(--paper); padding:0 2px }
@media (min-width:900px){ .story__q{ grid-column:1/-1; font-size:20px } }

/* ═════════ kids_garden_refinement_v10 ═════════ */

/* História: aspas sem fundo, acima da régua */
.story__q::before{ background:none; padding:0; left:-3px; top:-24px; font-size:36px }
.story__q{ margin-top:14px }

/* Dias comuns: um halo suave atrás da nota, para ler sobre as fotos */
.days__hand{ position:relative; z-index:2; padding:6px 10px }
.days__hand::before{ content:""; position:absolute; inset:-14px -22px; z-index:-1; border-radius:50%; background:radial-gradient(closest-side, rgba(253,252,250,.96), rgba(253,252,250,.75) 55%, rgba(253,252,250,0)); filter:blur(4px) }
@media (min-width:900px){ .days__hand::before{ inset:-18px -30px } }

/* Cambridge: os cartões passam a ser os certificados originais; nome e nível ficam na legenda */
.q{ padding:0; background:#fff; aspect-ratio:auto; box-shadow:0 18px 34px -22px rgba(17,39,30,.55), 0 0 0 1px rgba(17,39,30,.06); overflow:visible }
.q__s{ display:none }
.q__cert{ width:100%; aspect-ratio:2/3; border-radius:3px; overflow:hidden; background:#fbf8f0 }
.q__cert::before{ inset:6px } .q__cert::after{ font-size:9px; left:10px; right:10px; bottom:10px }
.q__cap{ display:block; padding:10px 6px 12px; text-align:center }
.q__cap .q__n{ display:block; font-size:15px } .q__cap .q__l{ display:block; font-size:12px }
@media (min-width:900px){ .q__cap .q__n{ font-size:17px } .q__cap .q__l{ font-size:12.500px } .camb__cards{ padding-top:24px } .q:nth-child(1){ margin-top:44px } .q:nth-child(3){ margin-top:36px } }

/* Página Aulas: o momento Play em vídeo */
.mo__video{ position:relative; overflow:hidden; background:#0a2219; aspect-ratio:4/3 }
.mo__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.mo__vtag{ position:absolute; left:12px; top:12px; font:700 9.500px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:#fff; background:rgba(6,20,14,.6); padding:6px 9px 5px; border-radius:99px; display:flex; align-items:center; gap:6px }
.mo__vtag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange) }

/* v20 · rodapé: direitos reservados + crédito discreto da CrIAmos */
.foot__by{ grid-column:1/-1; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; display:grid; gap:10px; font:400 12px/1.5 var(--sans); color:rgba(255,255,255,.45) }
.foot__rights{ margin:0 }
.foot__dev{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; color:rgba(255,255,255,.38) }
.foot__dev a{ text-decoration:none; color:rgba(255,255,255,.45) } .foot__dev a:hover{ color:rgba(255,255,255,.8) }
.foot__dev img{ height:14px; width:auto; opacity:.55; vertical-align:middle; transition:opacity .25s } .foot__dev a:hover img{ opacity:.9 }
/* v21 · logo da CrIAmos um pouco maior e mais nítido, para dar para ler o nome */
.foot__dev img{ height:24px; opacity:.8 } .foot__dev a:hover img{ opacity:1 }
.foot__cred{ grid-column:1/-1; margin:0; font-size:11px; color:rgba(255,255,255,.3) }
.foot .foot__fine{ display:none }
@media (min-width:900px){ .foot__by{ grid-template-columns:1fr auto; align-items:center } }

/* v25 · hero: quando o aparelho bloqueia o autoplay (baixo consumo, economia de dados), convite discreto para tocar.
   Só aparece com .hero.is-blocked; em bateria normal o vídeo começa sozinho e nada disso é mostrado. */
.hero__tap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:none; flex-direction:column; align-items:center; gap:12px; padding:0; background:none; border:0; color:#fff; font:600 13px/1 var(--sans); letter-spacing:.01em; cursor:pointer; -webkit-tap-highlight-color:transparent }
.hero__tap i{ width:60px; height:60px; border-radius:50%; background:var(--orange); display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.35); animation:heroTap 2.2s ease-in-out infinite }
.hero__tap i::before{ content:""; border:9px solid transparent; border-left:15px solid #fff; border-right:0; margin-left:5px }
.hero__tap span{ padding:7px 13px; border-radius:999px; background:rgba(6,13,10,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.hero.is-blocked .hero__tap{ display:flex }
.hero.is-blocked .hero__pause{ display:none }
@keyframes heroTap{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
@media (prefers-reduced-motion: reduce){ .hero__tap i{ animation:none } }
@media (min-width:760px){ .hero__tap{ top:46%; font-size:14px } }

/* v32 · suavidade: jornada sem repintura por quadro, lupa do projeto por transform, camadas compostas só com a seção na tela. Visual idêntico. */
/* 03 jornada: o fundo que muda de cor vira duas camadas com opacidade (compositor); a seção em si fica estática */
.jr{ background:#fdfcfa }
.jr__pin{ background:#fdfcfa; contain:layout paint }
.jr__bg{ position:absolute; inset:0; pointer-events:none }
.jr__bg--1{ background:#ecf3e9; opacity:var(--b1,0) } .jr__bg--2{ background:#0a2219; opacity:var(--b2,0) }
.jr__stage{ will-change:auto }
.jr.is-live .jr__stage{ will-change:transform,opacity } .jr.is-live .jr__bg{ will-change:opacity } .jr.is-live .jr__meta{ will-change:opacity }
.jr.is-live .jr__intro,.jr.is-live .jr__end{ will-change:opacity,transform }
.jr.is-static{ background:var(--ivory) } .jr.is-static .jr__pin{ background:none; contain:none } .jr.is-static .jr__bg{ display:none }
/* 07 projeto: a lupa anda por transform (nada de left/top), a foto ampliada é um <img> dentro dela movido por transform */
.proj__lens{ left:0; top:0; transform:translate(var(--tx,34%),var(--ty,30%)) translate(-50%,-50%); transition:opacity .4s, transform .5s var(--ease); overflow:hidden }
.proj__lens.is-free{ transition:opacity .4s }
.proj__lens.is-touch{ will-change:transform }
.proj__lens-img{ position:absolute; left:0; top:0; max-width:none; display:block; pointer-events:none; will-change:transform; -webkit-user-drag:none }
.proj__stage{ -webkit-touch-callout:none } .proj__stage img{ -webkit-user-drag:none; user-drag:none }
/* laços infinitos só rodam com a seção na tela */
.proj:not(.is-live) .spot b,.proj:not(.is-live) .proj__task::before,.proj:not(.is-live) .proj__eyes .eye,.proj:not(.is-live) .proj__eyes .pupils{ animation-play-state:paused }
.phon:not(.is-live) .phon__blend{ animation-play-state:paused }
/* barra fixa no celular: desfoque menor custa bem menos por quadro e, com fundo a 90%, não se nota */
@media (max-width:759px){ .nav.is-solid{ backdrop-filter:saturate(1.3) blur(8px); -webkit-backdrop-filter:saturate(1.3) blur(8px) } }

/* v33 · primeira tela: o poster do hero vira <img> responsivo (é o LCP); mesmo enquadramento do fundo antigo. */
.hero__media{ background-image:none }
.hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:88% 50%; display:block }
@media (min-width:760px){ .hero__poster{ object-position:70% 50% } }

/* v34 · aviso de cookies: cartão discreto, fixo embaixo, identidade do site (branco quente, verde, laranja), sem travar rolagem */
.kgc{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:85; display:flex; justify-content:flex-start; pointer-events:none; font:400 14px/1.5 var(--sans); color:var(--green) }
.kgc[hidden]{ display:none }
.kgc__card{ position:relative; pointer-events:auto; width:100%; max-width:440px; background:#fdfcfa; color:var(--green); border:1px solid rgba(15,47,35,.1); border-radius:18px; padding:18px 18px 14px; box-shadow:0 18px 50px -18px rgba(10,34,25,.45), 0 2px 8px rgba(10,34,25,.08); transform:translateY(16px); opacity:0; transition:transform .45s var(--ease), opacity .35s }
.kgc.is-in .kgc__card{ transform:none; opacity:1 }
.kgc__text{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--green); padding-right:4px }
.kgc__actions{ display:flex; flex-wrap:wrap; gap:8px }
.kgc__btn{ font:700 13.5px/1 var(--sans); letter-spacing:-.01em; border-radius:99px; padding:12px 18px; cursor:pointer; border:1.5px solid transparent; transition:transform .25s var(--ease), background .25s, color .25s }
.kgc__btn--primary{ background:var(--orange); color:#fff } .kgc__btn--primary:hover{ transform:translateY(-1px) }
.kgc__btn--line{ background:transparent; color:var(--green); border-color:rgba(15,47,35,.35) } .kgc__btn--line:hover{ border-color:var(--green) }
.kgc__btn[hidden]{ display:none }
.kgc__links{ margin:12px 0 0; display:flex; flex-wrap:wrap; gap:4px 18px }
.kgc__link{ display:inline-block; padding:2px 0; background:none; border:0; cursor:pointer; font:600 12.5px/1.4 var(--sans); color:var(--green-3); text-decoration:underline; text-underline-offset:3px }
.kgc__close{ position:absolute; right:10px; top:10px; width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--green); display:grid; place-items:center; cursor:pointer } .kgc__close svg{ width:14px; height:14px } .kgc__close:hover{ background:rgba(15,47,35,.06) } .kgc__close[hidden]{ display:none }
.kgc.is-prefs .kgc__text{ padding-right:34px }
.kgc__prefs{ display:grid; gap:4px; margin:0 0 14px; padding-top:12px; border-top:1px solid rgba(15,47,35,.1) } .kgc__prefs[hidden]{ display:none }
.kgc__row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; padding:8px 0; cursor:pointer }
.kgc__note{ margin:6px 0 0; font-size:12px; color:rgba(15,47,35,.6) }
.kgc__row-t{ display:grid; gap:2px } .kgc__row-t b{ font-size:13.5px; font-weight:700 } .kgc__row-t small{ font-size:12px; line-height:1.4; color:rgba(15,47,35,.7) }
.kgc__switch{ appearance:none; -webkit-appearance:none; width:40px; height:24px; border-radius:99px; background:rgba(15,47,35,.22); position:relative; cursor:pointer; margin:0; transition:background .25s; flex:none }
.kgc__switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .25s var(--ease) }
.kgc__switch:checked{ background:var(--orange) } .kgc__switch:checked::after{ transform:translateX(16px) }
.kgc__switch:disabled{ background:var(--green-3); cursor:default; opacity:.8 }
.kgc__btn:focus-visible,.kgc__link:focus-visible,.kgc__close:focus-visible,.kgc__switch:focus-visible{ outline:3px solid rgba(242,106,27,.55); outline-offset:3px }
/* o botão flutuante do WhatsApp sobe enquanto o aviso está na tela (celular); no desktop o aviso fica à esquerda e não encosta nele */
@media (max-width:759px){ .kgc-open .fab.is-on{ transform:translateY(calc(-1 * (var(--kgc-h,0px) + 12px))) } }   /* por transform (não conta como layout shift) */
@media (min-width:760px){ .kgc{ left:24px; right:auto; bottom:24px; width:min(440px, calc(100vw - 48px)) } }
@media (prefers-reduced-motion: reduce){ .kgc__card{ transition:none } }
.foot .foot__cookies{ color:rgba(255,255,255,.72); text-decoration:underline; text-underline-offset:3px; margin-left:6px } .foot .foot__cookies:hover{ color:#fff }