/* Orelume Kids · paleta Manhã (07-diseno.md). Solo claro (crema), sin fondo negro. Contraste AA: textos en tinta;
   coral/teal oscurecidos para texto pequeño (--coral-t, --mar-t). */
:root{--papel:#FFF8EC;--creme:#FBEBD0;--tinta:#2B2340;--tinta2:#4A4060;--coral:#E8734A;--coral-t:#B3431C;--sol:#F4B63F;--mar:#3E9C9A;--mar-t:#1F6B69;
  --folha:#7BAE5B;--lilas:#8C6BB1;--linha:#E7D3B2;--r:22px;--sh:0 10px 30px -14px rgba(43,35,64,.35);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.05rem/1.6 Nunito,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;line-height:1.15;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(2rem,5.4vw,3.4rem)}h2{font-size:clamp(1.6rem,3.8vw,2.4rem)}h3{font-size:1.25rem}
p{margin:0 0 1em}a{color:var(--coral-t)}
img{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:10px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--mar-t);outline-offset:3px}
.tiny{font-size:.88rem;color:var(--tinta2)}
.lead{font-size:1.12rem;color:var(--tinta2)}.narrow{max-width:680px}
.kicker{font:700 .8rem Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-t);margin-bottom:10px}
.card{background:#fff;border:3px solid var(--tinta);border-radius:var(--r);padding:20px;box-shadow:6px 6px 0 var(--tinta)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:3px solid var(--tinta);
  background:var(--coral);color:var(--tinta);font:600 1.05rem Fredoka,sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--tinta);
  transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--tinta)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--tinta)}
.btn-ghost{background:#fff}.btn-sm{min-height:44px;padding:0 16px;font-size:.95rem}.wide{width:100%}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.check{list-style:none;padding:0;margin:0 0 1em}.check li{position:relative;padding-left:30px;margin:.45em 0}
.check li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border-radius:50%;background:var(--folha) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10l3.5 3.5L15 7' fill='none' stroke='%232B2340' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border:2px solid var(--tinta)}
/* barra */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,248,236,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--linha)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tinta);font:600 1.2rem Fredoka,sans-serif;min-height:44px}
.brand b{color:var(--coral-t)}
.bar nav{display:flex;align-items:center;gap:6px}
.bar nav a:not(.btn){display:none;color:var(--tinta);text-decoration:none;font-weight:700;padding:10px;min-height:44px}
@media (min-width:760px){.bar nav a:not(.btn){display:inline-flex;align-items:center}}
/* hero */
.hero{padding:36px 0 40px;background:radial-gradient(120% 80% at 85% 0%,#FDE3B4 0,transparent 60%),radial-gradient(80% 60% at 0% 100%,#D9EEE9 0,transparent 60%)}
.hero-in{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.hero-in{grid-template-columns:1.1fr .9fr}.hero{padding:64px 0 72px}}
.hl{background:linear-gradient(transparent 62%,var(--sol) 62%);padding:0 .1em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips li{background:#fff;border:2px solid var(--tinta);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.9rem}
.hero-art{position:relative;aspect-ratio:482/300;max-width:560px;width:100%;margin:0 auto}
.logo-wrap{position:absolute;inset:14% 0 auto 0}
.logo-wrap svg{width:100%;height:auto;display:block}
.lapis{transform-origin:70px 96px;animation:desenha .9s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i)*.14s + .2s)}
@keyframes desenha{from{transform:scale(.15) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.stickers{position:absolute;inset:0}
.stk{position:absolute;left:var(--x);top:var(--y);font-size:2.4rem;width:56px;height:56px;display:grid;place-items:center;background:#fff;border:3px solid var(--tinta);border-radius:50%;
  box-shadow:3px 3px 0 var(--tinta);transform:rotate(var(--r));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;animation:flutua 4s ease-in-out infinite alternate}
.stk:nth-child(2){animation-delay:-1s}.stk:nth-child(3){animation-delay:-2s}.stk:nth-child(4){animation-delay:-3s}
.stk.drag{cursor:grabbing;animation:none;z-index:3}
@keyframes flutua{to{translate:0 -8px}}
.hint{position:absolute;bottom:-6px;right:0;margin:0}
/* seções */
.sec{padding:56px 0}.tint{background:var(--creme)}
/* colorir */
.paint{display:grid;gap:20px;margin-top:20px}
@media (min-width:900px){.paint{grid-template-columns:1.3fr .7fr;align-items:start}}
.paint-board{padding:10px}
#arca{width:100%;height:auto;display:block;aspect-ratio:4/3}
.pz{cursor:pointer;transition:fill .25s}
.pz:hover{filter:brightness(.97)}
.pz.pop{animation:pop .3s}
@keyframes pop{50%{opacity:.75}}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:300px}
.sw{width:100%;aspect-ratio:1;min-height:48px;border-radius:50%;border:3px solid var(--tinta);background:var(--c);cursor:pointer;transition:transform .15s}
.sw[aria-checked="true"]{transform:scale(1.12);box-shadow:0 0 0 4px var(--papel),0 0 0 7px var(--tinta)}
/* idade */
.ages{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.age{min-height:48px;padding:0 20px;border-radius:999px;border:3px solid var(--tinta);background:#fff;font:600 1.05rem Fredoka,sans-serif;color:var(--tinta);cursor:pointer}
.age[aria-selected="true"]{background:var(--c);box-shadow:0 4px 0 var(--tinta)}
.age-panel{display:grid;gap:20px;align-items:center}
@media (min-width:760px){.age-panel{grid-template-columns:300px 1fr}}
.age-fig{margin:0;max-width:300px;width:100%;justify-self:center;aspect-ratio:800/1131;border-radius:12px;overflow:hidden;border:2px solid var(--linha);view-transition-name:agefig}
.age-txt{view-transition-name:agetxt}
::view-transition-old(agefig){animation:sai .25s ease-in both}::view-transition-new(agefig){animation:entra .35s ease-out both}
@keyframes sai{to{opacity:0;transform:translateX(-24px) rotate(-3deg)}}@keyframes entra{from{opacity:0;transform:translateX(24px) rotate(3deg)}}
/* flipbook */
.flip{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(16px,calc((100vw - 1120px)/2 + 16px)) 26px;scrollbar-width:thin;perspective:1200px}
.pg{flex:0 0 min(70vw,280px);margin:0;scroll-snap-align:center;background:#fff;border:3px solid var(--tinta);border-radius:16px;padding:8px;box-shadow:5px 5px 0 var(--tinta);
  transition:transform .3s;transform-style:preserve-3d}
.pg img{aspect-ratio:800/1131;border-radius:8px;width:100%}
.pg figcaption{font-weight:700;text-align:center;padding:8px 0 2px}
.flip-nav{display:flex;gap:10px;justify-content:center}
@supports (animation-timeline:view()){
  .pg{animation:folha linear both;animation-timeline:view(inline);animation-range:cover 0% cover 100%}
  @keyframes folha{0%{transform:rotateY(28deg) scale(.92)}50%{transform:none}100%{transform:rotateY(-28deg) scale(.92)}}
  .reveal{animation:sobe linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes sobe{from{opacity:0;transform:translateY(30px)}}
}
/* jogo */
.game{max-width:720px;margin-top:20px}
.game-hud{display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 1.1rem Fredoka,sans-serif;margin-bottom:10px}
#campo{width:100%;height:auto;aspect-ratio:400/220;display:block;border-radius:14px;touch-action:manipulation}
.sheep{cursor:pointer}.sheep.found ellipse{fill:var(--sol)}.sheep.found{animation:pula .5s}
@keyframes pula{50%{transform:translateY(-10px)}}
/* passos */
.steps{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sol);border:3px solid var(--tinta);font:700 1.2rem Fredoka,sans-serif;margin-bottom:10px}
.steps li:nth-child(2) .num{background:var(--mar)}.steps li:nth-child(3) .num{background:var(--folha)}
/* professoras */
.prof{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.prof{grid-template-columns:1.2fr .8fr}}
.lic{background:#fff;border-style:dashed}
/* oferta */
.offer{display:grid;gap:22px;margin-top:20px}
@media (min-width:860px){.offer{grid-template-columns:1fr 1fr}}
.badge{display:inline-block;background:var(--mar);color:#fff;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.8rem;margin-bottom:10px;background:var(--mar-t)}
.badge.alt{background:var(--coral-t)}
.amount{font:700 3rem Fredoka,sans-serif;margin:.1em 0 .3em}
.opt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;border:2px solid var(--linha);border-radius:14px;padding:12px;margin:8px 0;cursor:pointer;min-height:44px}
.opt input{width:24px;height:24px;accent-color:var(--coral-t);margin-top:2px}
.opt small{display:block;color:var(--tinta2)}.opt em{font-style:normal;font-weight:800}
.meter{height:14px;border:2px solid var(--tinta);border-radius:999px;overflow:hidden;background:var(--creme);margin:14px 0 8px}
.meter i{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--coral),var(--sol),var(--folha));transition:width .5s cubic-bezier(.2,1.4,.4,1)}
.sum{font:600 1.3rem Fredoka,sans-serif;margin:0 0 4px}
.builder.fam{animation:festa .6s}@keyframes festa{30%{transform:rotate(-1.2deg) scale(1.02)}60%{transform:rotate(1deg)}}
.guar{display:flex;gap:16px;align-items:center;margin-top:22px}
.seal{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--sol);border:3px solid var(--tinta);font:700 1.8rem/1 Fredoka,sans-serif;text-align:center}
.seal small{display:block;font-size:.6rem;letter-spacing:.1em}
.guar p{margin:0}
/* faq */
.faq{max-width:820px}
details{background:#fff;border:2px solid var(--tinta);border-radius:16px;margin:10px 0;padding:0 16px}
summary{cursor:pointer;font-weight:800;min-height:52px;display:flex;align-items:center;list-style-position:inside}
details p{margin:0 0 14px}
.final{text-align:center}.final .btn{margin:10px 0 16px}
.foot{border-top:2px solid var(--linha);padding:26px 0 40px}
.foot a{color:var(--tinta);font-weight:700;display:inline-block;padding:10px 2px}
/* confete */
.confete{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confete i{position:absolute;top:-16px;font-style:normal;font-size:1.4rem;animation:cai 1.8s ease-in forwards}
@keyframes cai{to{transform:translate3d(var(--dx),108vh,0) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .confete{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}