/* Emi Kids · página inicial (10/11/2026). Mesmo jeito do checkout: papel, tinta, borda grossa. Celular primeiro. */
.inicio a{color:inherit;text-decoration:none}
.inicio .topo{padding-bottom:4px}
.inicio .topo .yt{margin-left:auto;font:800 16px/1 Baloo,Nunito;padding:10px 14px;background:var(--sol);border:var(--tr);border-radius:999px;box-shadow:0 3px 0 var(--tinta)}
.casa{max-width:1080px;margin:0 auto;padding:10px 18px 60px;display:grid;gap:34px}

.heroi{display:grid;gap:18px;align-items:center}
.heroi h1{font-weight:800;font-size:clamp(40px,12vw,68px);line-height:.98;letter-spacing:-1px}
.heroi h1 span{display:inline-block;background:var(--sol);border:var(--tr);border-radius:14px;padding:0 12px 4px;transform:rotate(-2deg);box-shadow:var(--chao);animation:carimbo .7s .35s cubic-bezier(.2,1.5,.4,1) both}
.heroi p{margin-top:16px;color:var(--cinza);max-width:30em}
.portas{display:grid;gap:12px;margin-top:20px;max-width:420px}
.palco{position:relative;height:clamp(250px,70vw,360px)}
.monte{position:absolute;inset:0}
.monte img{position:absolute;left:50%;top:6%;height:74%;width:auto;aspect-ratio:210/297;object-fit:cover;background:#fff;border:var(--tr);border-radius:6px;box-shadow:0 6px 0 rgba(31,42,68,.16);animation:cai .8s cubic-bezier(.2,1.3,.4,1) both,boia 6s ease-in-out infinite}
.monte img:nth-child(1){--x:-108%;--g:-9deg;animation-delay:.1s,.9s}
.monte img:nth-child(2){--x:-50%;--g:2deg;z-index:2;animation-delay:.25s,1.6s}
.monte img:nth-child(3){--x:8%;--g:10deg;animation-delay:.4s,2.3s}
.emi{position:absolute;right:0;bottom:0;width:min(46%,210px);height:auto;border:var(--tr);border-radius:18px;box-shadow:var(--chao);z-index:3;background:#fff;animation:carimbo .7s .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes cai{from{opacity:0;transform:translate(var(--x),-60px) rotate(0)}to{opacity:1;transform:translate(var(--x),0) rotate(var(--g))}}
@keyframes boia{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes carimbo{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

.tres{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;counter-reset:n}
.tres li{background:var(--branco);border:var(--tr);border-radius:var(--r);padding:12px 8px 10px;text-align:center;display:grid;gap:2px;justify-items:center}
.tres span{width:34px;height:34px;border-radius:50%;border:var(--tr);display:grid;place-items:center;font:800 18px/1 Baloo,Nunito;background:var(--azul-c)}
.tres li:nth-child(2) span{background:var(--agua-c)}.tres li:nth-child(3) span{background:var(--laranja-c)}
.tres b{font:800 18px/1.1 Baloo,Nunito}.tres small{font:700 13px/1.25 Nunito;color:var(--cinza)}

.abas{position:sticky;top:8px;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;background:var(--branco);border:var(--tr);border-radius:999px;box-shadow:var(--chao)}
.abas button{border:0;background:none;border-radius:999px;min-height:46px;padding:6px 8px;font:800 16px/1.1 Baloo,Nunito;cursor:pointer;transition:background .25s,transform .25s}
.abas button[aria-pressed=true]{background:var(--tinta);color:var(--branco)}
.abas i{font-style:normal;font-size:12px;opacity:.7;margin-left:3px}
.js .linha[hidden]{display:none}
.linha{scroll-margin-top:80px}
.linha h2,.canal h2{font-weight:800;font-size:clamp(28px,7.5vw,40px);line-height:1.05}
.sub{color:var(--cinza);margin-top:4px}
.grade{display:grid;gap:16px;margin-top:18px}
.cartao{display:grid;grid-template-columns:118px 1fr;background:var(--branco);border:var(--tr);border-radius:var(--r);overflow:hidden;box-shadow:var(--chao);transition:transform .2s,box-shadow .2s}
.cartao:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--tinta)}
.cartao:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}
.cartao .foto{border-right:var(--tr);background:var(--sol-c);overflow:hidden}
.cartao .foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cartao:hover .foto img{transform:scale(1.07)}
.cartao .txt{padding:12px 14px;display:grid;gap:4px;align-content:start}
.cartao b{font:800 19px/1.12 Baloo,Nunito}
.cartao small{font:700 14px/1.3 Nunito;color:var(--cinza)}
.cartao em{font:800 12px/1 Nunito;font-style:normal;text-transform:uppercase;letter-spacing:.4px;background:var(--tinta);color:var(--sol);justify-self:start;padding:5px 8px;border-radius:6px}
.pe{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.pe .preco{font-size:24px}
.ver{font:800 15px/1 Baloo,Nunito;padding:8px 14px;background:var(--agua);border:var(--tr);border-radius:999px}
.kitc{grid-template-columns:1fr;background:var(--sol-c)}
.kitc .foto{border-right:0;border-bottom:var(--tr);aspect-ratio:3/2}
.kitc b{font-size:26px}.kitc .pe .preco{font-size:32px}.kitc .ver{background:var(--sol)}

.canal{background:var(--azul-c);border:var(--tr);border-radius:24px;padding:22px 0 22px;display:grid;gap:16px;overflow:hidden}
.canal .cab,.canal>.botao{margin:0 18px}.canal>.botao{width:auto}
.fita{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 18px 8px;scrollbar-width:none}
.fita::-webkit-scrollbar{display:none}
.video{flex:0 0 72%;max-width:300px;scroll-snap-align:center;display:grid;gap:8px}
.video .tela{position:relative;border:var(--tr);border-radius:14px;overflow:hidden;box-shadow:var(--chao);background:#fff}
.video img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s}
.video:hover img{transform:scale(1.06)}
.video i{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:var(--sol);border:var(--tr);animation:chama 2.2s infinite}
.video i::after{content:"";position:absolute;left:19px;top:14px;border-left:16px solid var(--tinta);border-top:10px solid transparent;border-bottom:10px solid transparent}
.video b{font:800 16px/1.2 Baloo,Nunito}

.selo{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;background:var(--branco);border:var(--tr);border-radius:var(--r);padding:16px}
.selo .sete{width:64px;height:64px;border-radius:50%;background:var(--laranja);border:var(--tr);display:grid;place-items:center;font:800 30px/1 Baloo,Nunito}
.selo p{font-size:15px;color:var(--cinza)}.selo b{color:var(--tinta)}
.rodape{text-align:center;font:700 13px/1.4 Nunito;color:var(--cinza);padding:0 18px 40px}

/* entrada na rolagem: só quando o script confirma que dá para animar */
.js .revela{opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,1.2,.4,1);transition-delay:calc(var(--i,0)*70ms)}
.js .revela.viu{opacity:1;transform:none}

@media (min-width:760px){
  .heroi{grid-template-columns:1.05fr .95fr;gap:30px;padding-top:18px}
  .portas{grid-template-columns:1fr 1fr;max-width:none}
  .grade{grid-template-columns:repeat(3,1fr)}
  .cartao{grid-template-columns:1fr}
  .cartao .foto{border-right:0;border-bottom:var(--tr);aspect-ratio:3/2}
  .kitc{grid-column:1/-1;grid-template-columns:1.2fr 1fr}
  .kitc .foto{border-bottom:0;border-right:var(--tr)}
  .kitc .txt{padding:26px;align-content:center}
  .abas{max-width:520px;margin:0 auto;width:100%}
  .video{flex-basis:260px}
}
@media (prefers-reduced-motion:reduce){
  .inicio *{animation:none!important;transition:none!important}
  .monte img{transform:translate(var(--x),0) rotate(var(--g))}
}

/* 10/11: a página é a casa da marca (canal + materiais), não só venda */
.heroi h1{font-size:clamp(34px,10vw,58px)}
.heroi h1 span{margin-top:6px;font-size:.82em;padding:2px 12px 6px}
.emi{width:min(62%,300px)}
.monte img{height:62%}
.quem{display:grid;gap:12px}
.q{background:var(--branco);border:var(--tr);border-radius:var(--r);padding:16px;display:grid;gap:4px;box-shadow:var(--chao)}
.q:nth-child(1){background:var(--sol-c)}.q:nth-child(2){background:var(--agua-c)}.q:nth-child(3){background:var(--laranja-c)}
.q b{font:800 21px/1.1 Baloo,Nunito}.q span{font-size:15px;color:var(--cinza)}
.materiais{display:grid;gap:18px;scroll-margin-top:14px}
.materiais h2{font-weight:800;font-size:clamp(28px,7.5vw,40px);line-height:1.05}
.materiais .grade{margin-top:0}
.canal{scroll-margin-top:14px}
@media (min-width:760px){.quem{grid-template-columns:repeat(3,1fr)}}
html{scroll-behavior:smooth}
