/* 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 }
}

/* ═════════ 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_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% } }

/* Página "Como acontece uma aula" · usa os tokens e componentes do site */
.page-aulas{ background:var(--ivory) }
.page-aulas .nav{ color:var(--green) }
.page-aulas .nav.is-solid{ background:rgba(253,252,250,.92) }

/* abertura */
.au-hero{ padding:calc(64px + 40px) var(--g) 0; display:grid; gap:28px }
.au-back{ font:600 12.500px/1 var(--sans); color:var(--muted); text-decoration:none; display:inline-block; margin-bottom:26px; border-bottom:1px solid var(--rule); padding-bottom:4px }
.au-back::before{ content:"←  "; white-space:pre; color:var(--orange) }
.au-hero__h{ margin-top:18px; font-size:clamp(34px,9.200vw,42px); font-weight:700; letter-spacing:-.04em; line-height:1.04; color:var(--green) } .au-hero__h em{ font-style:normal; color:var(--orange) }
.au-hero__p{ margin-top:16px; color:var(--muted); max-width:38ch; font-size:16.500px }
.au-hero__hand{ margin-top:22px; color:var(--green-3) }
.au-hero__ph{ aspect-ratio:4/5; margin:0 calc(var(--g) * -1) 0 12%; border-radius:4px 0 0 4px }
@media (min-width:900px){
  .au-hero{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; padding-top:calc(64px + 56px) }
  .au-hero__copy{ grid-column:1/7 } .au-hero__h{ font-size:clamp(44px,4.400vw,68px) } .au-hero__p{ font-size:19px }
  .au-hero__ph{ grid-column:7/13; margin:0 calc(var(--g) * -1) 0 0; max-height:78vh }
}

/* o que não muda */
.au-fixed{ padding:var(--sec) var(--g) 0 }
.au-fixed__list{ margin-top:22px; counter-reset:f; display:grid }
.au-fixed__list li{ counter-increment:f; padding:20px 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:34px 1fr; column-gap:10px }
.au-fixed__list li::before{ content:counter(f,decimal-leading-zero); font:700 11px/1.6 var(--sans); letter-spacing:.08em; color:var(--orange) }
.au-fixed__list b{ font:700 19px/1.15 var(--sans); letter-spacing:-.03em; color:var(--green) }
.au-fixed__list p{ grid-column:2; margin-top:6px; color:var(--muted); font-size:15.500px; max-width:38ch }
@media (min-width:900px){ .au-fixed__list{ grid-template-columns:repeat(3,1fr); column-gap:36px; margin-top:34px } .au-fixed__list li{ border-top:1px solid var(--rule); border-bottom:0; padding:26px 0 } .au-fixed__list b{ font-size:22px } }

/* os cinco momentos */
.au-moments{ padding:var(--sec) var(--g) 0 }
.au-moments__head h2{ margin-top:18px } .au-moments__p{ margin-top:14px; color:var(--muted); max-width:44ch }
.mo{ margin-top:52px; display:grid; gap:20px }
.mo__ph{ aspect-ratio:4/3; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px }
.mo--alt .mo__ph{ margin:0 0 0 calc(var(--g) * -1); border-radius:0 4px 4px 0 }
.mo__n{ display:flex; align-items:center; gap:12px; font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.mo__n b{ width:30px; height:30px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font-size:12px; letter-spacing:0 }
.mo__body h3{ margin-top:14px; font-size:clamp(24px,6.600vw,30px); font-weight:700; letter-spacing:-.035em; color:var(--green) }
.mo__body > p{ margin-top:12px; color:var(--muted); max-width:40ch }
.mo__body dl{ margin:20px 0 0; display:grid; gap:10px } .mo__body dt{ font:700 10.500px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--orange) } .mo__body dd{ margin:4px 0 0; font-size:15px; color:var(--green); max-width:36ch }
.mo__body .hand{ margin-top:20px; color:var(--green-3) }
@media (min-width:900px){
  .au-moments__head{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px } .au-moments__head .cap{ grid-column:1/-1 } .au-moments__head h2{ grid-column:1/8 } .au-moments__p{ grid-column:9/13; align-self:end; margin:0 }
  .mo{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; margin-top:84px }
  .mo__ph{ grid-column:1/7; margin:0 0 0 calc(var(--g) * -1); border-radius:0 4px 4px 0; max-height:64vh } .mo__body{ grid-column:8/13 }
  .mo--alt .mo__ph{ grid-column:7/13; grid-row:1; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px } .mo--alt .mo__body{ grid-column:1/6; grid-row:1 }
  .mo__body h3{ font-size:clamp(28px,2.600vw,38px) } .mo__body dl{ grid-template-columns:1fr; gap:12px }
}

/* fio de uma aula */
.au-flow{ margin-top:var(--sec); background:var(--green); color:#fff; padding:var(--sec) var(--g) }
.au-flow h2{ margin-top:18px; color:#fff }
.au-flow__line{ margin-top:34px; position:relative; display:grid; gap:0; counter-reset:s }
.au-flow__line::before{ content:""; position:absolute; left:6px; top:12px; bottom:12px; width:1.500px; background:var(--orange) }
.au-flow__line li{ counter-increment:s; position:relative; padding:12px 0 12px 32px; display:grid; gap:2px }
.au-flow__line li::before{ content:""; position:absolute; left:0; top:20px; width:13px; height:13px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 5px rgba(242,106,27,.22) }
.au-flow__line b{ font:700 19px/1.15 var(--sans); letter-spacing:-.03em } .au-flow__line span{ font:500 14px/1.3 var(--sans); color:rgba(255,255,255,.66) }
.au-flow__p{ margin-top:30px; color:rgba(255,255,255,.76); max-width:44ch }
.au-flow__hand{ margin-top:24px; color:#fff }
@media (min-width:900px){
  .au-flow__line{ grid-template-columns:repeat(5,1fr); margin-top:56px; padding-top:30px }
  .au-flow__line::before{ left:6px; right:6px; top:6px; bottom:auto; width:auto; height:1.500px }
  .au-flow__line li{ padding:20px 24px 0 0 } .au-flow__line li::before{ left:0; top:-6px }
  .au-flow h2{ max-width:14em }
}

/* por idade */
.au-ages{ padding:var(--sec) var(--g) 0 }
.au-ages h2{ margin-top:18px; max-width:14em }
.au-ages__grid{ margin-top:30px; display:grid; gap:30px }
.au-ages__grid .ph{ aspect-ratio:4/5 }
.au-ages__age{ margin-top:14px; font:700 26px/1 var(--sans); letter-spacing:-.04em; color:var(--orange); display:flex; align-items:baseline; gap:10px } .au-ages__age span{ font:700 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--green) }
.au-ages__grid article > p:last-child{ margin-top:10px; color:var(--muted); font-size:15.500px; max-width:34ch }
@media (min-width:760px){ .au-ages__grid{ grid-template-columns:repeat(3,1fr); gap:24px } }

/* cinco horas */
.au-five{ padding:var(--sec) var(--g) 0; display:grid; gap:10px; align-items:center }
.au-five__num{ font:800 clamp(150px,44vw,260px)/.8 var(--sans); letter-spacing:-.06em; color:var(--paper); -webkit-text-stroke:1.500px rgba(17,39,30,.28); margin-left:-.04em }
.au-five h2{ margin-top:16px } .au-five__body > p{ margin-top:14px; color:var(--muted); max-width:40ch } .au-five .txt-ph{ margin-top:18px }
@media (min-width:900px){ .au-five{ grid-template-columns:auto 1fr; column-gap:60px } .au-five__num{ font-size:clamp(220px,22vw,340px) } }

/* fechamento */
.au-end{ margin-top:var(--sec); padding:var(--sec) var(--g); background:var(--deep); color:#fff; text-align:center }
.au-end h2{ color:#fff; max-width:14em; margin:0 auto } .au-end > p{ margin:16px auto 0; color:rgba(255,255,255,.78); max-width:36ch }
.au-end__cta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:center; align-items:center } .au-end .lnk{ color:#fff }

/* ═════════ 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_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) }

/* ═════════ kids_garden_refinement_v11 · página Aulas: momentos só com título, imagem e nota ═════════ */
.mo{ margin-top:44px; display:grid; gap:14px; position:relative }
.mo__ph{ position:relative; aspect-ratio:3/2; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px; overflow:hidden }
.mo--alt .mo__ph{ margin:0 0 0 calc(var(--g) * -1); border-radius:0 4px 4px 0 }
.mo:nth-of-type(2) .mo__ph{ aspect-ratio:4/5; width:82%; margin-left:auto }
.mo:nth-of-type(3) .mo__ph{ aspect-ratio:16/10 }
.mo:nth-of-type(4) .mo__ph{ aspect-ratio:1/1; width:84%; margin-left:auto }
.mo:nth-of-type(5) .mo__ph{ aspect-ratio:16/10 }
/* a nota manuscrita vive na foto: branca, com sombra e uma vinheta discreta atrás */
.mo__ph .hand{ position:absolute; left:18px; bottom:16px; z-index:3; margin:0; color:#fff; font-size:27px; text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5); transform-origin:left bottom }
.mo__ph::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(20deg, rgba(6,20,14,.55) 0, rgba(6,20,14,.18) 24%, rgba(6,20,14,0) 46%) }
.mo__video::after{ background:linear-gradient(20deg, rgba(6,20,14,.55) 0, rgba(6,20,14,.18) 24%, rgba(6,20,14,0) 46%) }
.mo__body{ display:grid; gap:8px }
.mo__body h3{ margin-top:6px; font-size:clamp(26px,7vw,32px) }
.mo__body > p:not(.mo__n){ display:none }
@media (min-width:900px){
  .mo{ grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:end; margin-top:72px }
  .mo__ph .hand{ left:26px; bottom:22px; font-size:30px }
  .mo__body h3{ font-size:clamp(30px,2.800vw,42px); max-width:11em }
  /* 01 · largo à esquerda, título encostado embaixo à direita */
  .mo:nth-of-type(1) .mo__ph{ grid-column:1/9; aspect-ratio:3/2; margin:0 0 0 calc(var(--g) * -1); border-radius:0 4px 4px 0 } .mo:nth-of-type(1) .mo__body{ grid-column:9/13; padding-bottom:8px }
  /* 02 · retrato à direita, título à esquerda no alto, sobrepondo de leve a foto */
  .mo:nth-of-type(2){ align-items:start } .mo:nth-of-type(2) .mo__ph{ grid-column:6/13; grid-row:1; width:100%; aspect-ratio:4/5; max-height:76vh; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px } .mo:nth-of-type(2) .mo__body{ grid-column:1/6; grid-row:1; padding-top:12%; position:relative; z-index:4; margin-right:-40px }
  /* 03 · largo, mais baixo que a página, título centralizado à direita */
  .mo:nth-of-type(3){ align-items:center } .mo:nth-of-type(3) .mo__ph{ grid-column:1/8; aspect-ratio:16/10; margin:0 0 0 calc(var(--g) * -1); border-radius:0 4px 4px 0 } .mo:nth-of-type(3) .mo__body{ grid-column:8/13 }
  /* 04 · quadrado à direita, título à esquerda alinhado pela base */
  .mo:nth-of-type(4) .mo__ph{ grid-column:7/13; grid-row:1; width:100%; aspect-ratio:1/1; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px } .mo:nth-of-type(4) .mo__body{ grid-column:1/6; grid-row:1; padding-bottom:10% }
  /* 05 · vídeo largo ocupando quase tudo; título por cima, à esquerda */
  .mo:nth-of-type(5){ align-items:start } .mo:nth-of-type(5) .mo__ph{ grid-column:3/13; grid-row:1; aspect-ratio:16/9; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px } .mo:nth-of-type(5) .mo__body{ grid-column:1/5; grid-row:1; padding-top:10%; position:relative; z-index:4 }
  .mo:nth-of-type(5) .mo__body h3,.mo:nth-of-type(2) .mo__body h3{ background:linear-gradient(90deg, var(--ivory) 70%, rgba(253,252,250,0)); padding:6px 22px 8px 0; display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone }
}

/* a vinheta tambem quando a foto real esta carregada (o .ph esconde o ::after) */
.mo__ph.has-img::after{ display:block }

/* 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 } }

/* ═════════ Página Aulas · "Os cinco momentos" · composição própria, mesma linguagem do site ═════════
   Tokens, tipografia, .cap, .hand e .ph vêm de base.css. Aqui só o arranjo. */
.mx{ padding:var(--sec) 0 0; overflow:hidden }
.mx__head{ padding:0 var(--g) } .mx__head h2{ margin-top:18px } .mx__p{ margin-top:14px; color:var(--muted); max-width:44ch }
.mx h3{ font-size:clamp(28px,7.600vw,34px); font-weight:700; letter-spacing:-.04em; line-height:1.04; color:var(--green); text-wrap:balance; margin:0 } .mx h3 em{ font-style:normal; color:var(--orange) }
.mx__ph{ position:relative; overflow:hidden; margin:0 }
.mx__ph::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(20deg, rgba(6,20,14,.5) 0, rgba(6,20,14,.16) 24%, rgba(6,20,14,0) 46%) }
.mx__ph.has-img::after{ display:block }
.mx .hand{ color:var(--green-3); font-size:26px }
.mx__video{ background:#0a2219 } .mx__video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.mx__over h3,.mx__over .hand{ position:absolute; z-index:3; color:#fff } .mx__over .hand{ text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5) } .mx__over h3 em{ color:var(--orange) }

/* ── celular: uma coluna com ritmo próprio ── */
.mx__a,.mx__e{ position:relative }
.mx__a{ margin-top:34px }
.mx__a .mx__ph,.mx__e .mx__ph{ aspect-ratio:4/5 }
.mx__a h3,.mx__e h3{ position:absolute; left:var(--g); right:var(--g); bottom:78px; z-index:3; color:#fff; font-size:clamp(30px,8.400vw,38px) } .mx__a h3 em,.mx__e h3 em{ color:var(--orange) }
.mx__a .hand,.mx__e .hand{ position:absolute; left:var(--g); bottom:30px; z-index:3; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5) }
.mx__a .mx__ph::after,.mx__e .mx__ph::after{ background:linear-gradient(0deg, rgba(6,20,14,.8) 0, rgba(6,20,14,.38) 34%, rgba(6,20,14,0) 62%) }
.mx__pair{ margin-top:40px; padding:0 var(--g); display:grid; gap:44px }
.mx__b{ display:grid; gap:14px } .mx__b h3{ order:-1 }
.mx__b .mx__ph{ aspect-ratio:4/5; width:84%; margin-left:auto; margin-right:calc(var(--g) * -1); border-radius:4px 0 0 4px }
.mx__b .hand{ margin:0 0 0 auto; width:max-content; text-align:right; transform-origin:right center; transform:rotate(-4deg) }
.mx__c{ display:grid; gap:14px } .mx__c .mx__ph{ aspect-ratio:4/3; margin-left:calc(var(--g) * -1); border-radius:0 4px 4px 0 }
.mx__d{ margin-top:44px; padding:0 var(--g); display:grid; gap:14px }
.mx__d .mx__ph{ aspect-ratio:1/1; width:78%; border-radius:4px } .mx__d .hand{ margin-left:12% }
.mx__e{ margin-top:48px }

/* ── desktop: grade de 12 colunas, alternância intencional ── */
@media (min-width:900px){
  .mx h3{ font-size:clamp(32px,2.900vw,44px) } .mx .hand{ font-size:30px }
  .mx__head{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px } .mx__head .cap{ grid-column:1/-1 } .mx__head h2{ grid-column:1/8 } .mx__p{ grid-column:9/13; align-self:end; margin:0 }
  /* 1 e 5 · foto/vídeo em toda a largura; frase grande à esquerda, nota à direita */
  .mx__a{ margin-top:56px } .mx__e{ margin-top:84px }
  .mx__a .mx__ph,.mx__e .mx__ph{ aspect-ratio:2/1; max-height:78vh }
  .mx__a h3,.mx__e h3{ left:var(--g); right:auto; max-width:11em; bottom:calc(var(--g) + 8px); font-size:clamp(40px,4.200vw,64px) }
  .mx__a .hand,.mx__e .hand{ left:auto; right:var(--g); bottom:calc(var(--g) + 12px); text-align:right; transform-origin:right center }
  .mx__a .mx__ph::after,.mx__e .mx__ph::after{ background:linear-gradient(90deg, rgba(6,20,14,.7) 0, rgba(6,20,14,.25) 40%, rgba(6,20,14,0) 65%), linear-gradient(0deg, rgba(6,20,14,.5) 0, rgba(6,20,14,0) 40%) }
  /* 2 + 3 · retrato alto sangrando à esquerda; paisagem mais baixa à direita; as frases se cruzam */
  .mx__pair{ margin-top:72px; padding:0 var(--g) 0 0; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:56px; align-items:start }
  .mx__b{ gap:0 } .mx__b h3{ order:1; margin:22px 0 0 var(--g); max-width:9em }
  .mx__b .mx__ph{ order:0; width:100%; margin:0; aspect-ratio:4/5; border-radius:0 4px 4px 0; max-height:80vh }
  .mx__b .hand{ order:2; margin:14px 0 0 var(--g); text-align:left; transform-origin:left center; transform:rotate(-4deg) }
  .mx__c{ gap:0; padding-top:14% } .mx__c h3{ max-width:10em; margin-bottom:26px } .mx__c .mx__ph{ margin:0; border-radius:4px } .mx__c .hand{ margin:16px 0 0 auto; width:max-content; text-align:right; transform-origin:right center }
  /* 4 · frase ocupa a esquerda, quadrado sangra à direita, nota entre os dois */
  .mx__d{ margin-top:84px; grid-template-columns:repeat(12,1fr); column-gap:24px; align-items:center; gap:0 24px }
  .mx__d h3{ grid-column:1/6; grid-row:1; font-size:clamp(36px,3.400vw,52px); max-width:8.500em; align-self:end }
  .mx__d .mx__ph{ grid-column:7/13; grid-row:1/3; width:100%; margin:0 calc(var(--g) * -1) 0 0; border-radius:4px 0 0 4px; max-height:78vh }
  .mx__d .hand{ grid-column:1/6; grid-row:2; margin:18px 0 0 6%; align-self:start }
}

/* v13: notas manuscritas na mesma cor verde das outras notas do site. Nada mais muda:
   sobre as fotos escuras a nota ganha só um brilho claro atrás para o verde continuar legível. */
.mx__a .hand,.mx__e .hand,.mx__over .hand{ color:var(--green-3); text-shadow:0 0 2px rgba(255,255,255,.95), 0 0 6px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.85) }
@media (min-width:900px){ .mx__head h2{ grid-column:1/10 } }

/* 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 }