:root{
  --papel:#FFF7EC; --papel2:#FDEEDC; --tinta:#2B0A2A; --tinta2:#6B4A68;
  --roxo:#81007F; --amarelo:#FBB247; --azul:#36ACE2; --creme:#FEF8F1;
  --borda:#E9D8C8;
  --roxo2:#5C0059; --azul2:#1B84BC; --amarelo2:#F49A2A;
  --patas-claras:url("../svg/patas-brancas.svg");
  --patas-roxas:url("../svg/patas-roxas.svg");
  /* --arco-base e a curva das secoes; a fita e uma faixa baixa e leva a sua
     propria, menor. Quem vem DEPOIS de uma fita so pode reservar a curva
     pequena, senao sobra um vazio; quem vem depois de uma secao reserva a base. */
  --arco-base:clamp(46px,7vw,120px);
  --arco-fita:clamp(24px,3vw,44px);
  --arco:var(--arco-base);
  --fdisplay:'Fredoka','Trebuchet MS',sans-serif;
  --frotulo:'Bebas Neue',Impact,sans-serif;
  --ftexto:'Figtree','Segoe UI',system-ui,sans-serif;
  --seta:url("../img/cursor-seta.png");
  --link:url("../img/cursor-link.png");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* os arcos das seções são mais largos que a tela de propósito (a curva
   fica mais suave); o clip impede que isso vire barra de rolagem lateral */
html{scroll-behavior:auto;overflow-x:clip}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--ftexto); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* ⚠️ clip, NUNCA hidden: overflow:hidden no body faz dele o "scrollport"
     dos filhos e mata o position:sticky do palco da cena (o video parava de
     grudar e rolava junto com a pagina). O clip corta igual e nao cria
     contexto de rolagem. O html acima ja faz o mesmo pelos arcos largos. */
  overflow-x:clip;
}
@media (pointer:fine){
  body{cursor:var(--seta) 4 3,auto}
  a,button,[data-cursor="link"]{cursor:var(--link) 11 5,pointer}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- topo ---------- */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:22px;
  padding:14px clamp(16px,4vw,40px);
  background:var(--papel);
  border-bottom:3px solid var(--tinta);
  box-shadow:0 3px 0 rgba(43,10,42,.09);
}
.topo .marca{display:flex;align-items:center;gap:13px;margin-right:auto}
.topo .marca img{height:66px;width:auto}
.topo .marca b{font-family:var(--fdisplay);font-weight:600;font-size:23px;letter-spacing:-.01em;line-height:1}
.topo .marca span{display:block;font-family:var(--frotulo);font-size:14px;letter-spacing:.15em;color:var(--tinta2)}
.menu{display:flex;gap:20px;font-family:var(--frotulo);font-size:17px;letter-spacing:.07em}
.menu a{padding:4px 0;border-bottom:3px solid transparent;transition:border-color .2s,color .2s}
.menu a:hover{border-color:var(--amarelo);color:var(--roxo)}
@media(max-width:900px){.menu{display:none}}

.btn{
  font-family:var(--fdisplay); font-weight:600; font-size:16px;
  border:3px solid var(--tinta); border-radius:999px;
  padding:11px 22px; background:var(--amarelo); color:var(--tinta);
  box-shadow:0 4px 0 var(--tinta); transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--tinta)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--tinta)}
.btn.vazado{background:transparent;box-shadow:0 4px 0 var(--roxo);border-color:var(--roxo);color:var(--roxo)}
.btn:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  padding:120px clamp(16px,4vw,40px) 0; max-width:1360px; margin:0 auto;
}
.eyebrow{
  font-family:var(--frotulo); font-size:16px; letter-spacing:.2em; color:var(--roxo);
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--amarelo);border-radius:2px}

.adesivo{
  position:relative; display:block;
  font-family:var(--fdisplay); font-weight:600;
  font-size:clamp(2.8rem,6.6vw,5.4rem); line-height:.94; letter-spacing:-.02em;
  margin:0 0 20px; color:var(--creme); text-wrap:balance;
  filter:drop-shadow(5px 7px 0 var(--roxo));
}
.adesivo span{display:block;position:relative;white-space:nowrap}
.adesivo span::before,.adesivo i::before{
  content:attr(data-t); position:absolute; left:0; top:0; z-index:-1;
  -webkit-text-stroke:15px var(--tinta); color:var(--tinta);
}
.adesivo i{display:inline-block;position:relative;font-style:normal;will-change:transform}
.adesivo i.esp{width:.27em}
.adesivo .amarelo{color:var(--amarelo)}

/* ---------- pegadas e objetos soltos ---------- */
.texto{position:relative;z-index:2}
.flutua{position:absolute;z-index:1;pointer-events:none;will-change:transform}
.flutua img,.patinha img{
  width:100%;display:block;
  transform:translate(var(--px,0px),var(--py,0px)) rotate(var(--rot,0deg));
}
#f-osso{width:104px;right:-7%;top:-5%;--rot:-17deg;z-index:3}
#f-bola{width:62px;left:9%;bottom:98px;z-index:3}
.pegada-mouse{
  position:fixed;top:0;left:0;width:30px;margin:-15px 0 0 -15px;
  pointer-events:none;z-index:900;will-change:transform,opacity;
}

.hero p.chamada{font-size:1.16rem;max-width:46ch;color:var(--tinta2);margin:0 0 28px}
.hero p.chamada b{color:var(--tinta);font-weight:700}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}

.selos{display:flex;flex-wrap:wrap;gap:10px}
.selo{
  display:flex;align-items:center;gap:8px;
  font-family:var(--frotulo);font-size:14.5px;letter-spacing:.1em;
  background:#fff;border:2px solid var(--borda);border-radius:999px;padding:7px 15px 5px;
}
.selo i{width:9px;height:9px;border-radius:50%;background:var(--azul);display:block}
.selo:nth-child(2) i{background:var(--amarelo)}
.selo:nth-child(3) i{background:var(--roxo)}

/* ---------- janela com foto + mascote ---------- */
.palco{position:relative;align-self:center;padding-bottom:70px}
.janela{
  position:relative; border:6px solid var(--amarelo); border-radius:34px;
  background:var(--azul); overflow:hidden; box-shadow:0 24px 50px -28px rgba(43,10,42,.7);
  aspect-ratio:1/1.02;
}
.janela img{width:100%;height:100%;object-fit:cover}
.janela::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 6px rgba(129,0,127,.9);border-radius:28px}

.muro{
  position:absolute; left:-16px; right:-16px; bottom:0; height:104px;
  background:var(--roxo); border:5px solid var(--tinta); border-radius:18px;
  box-shadow:0 6px 0 var(--tinta);
}
.muro::before{
  content:"COLÉGIO PET · PAULÍNIA · CRECHE · HOTEL · BANHO E TOSA";
  position:absolute;inset:auto 0 16px;text-align:center;
  font-family:var(--frotulo);font-size:15px;letter-spacing:.22em;color:#fff;opacity:.55;
}
#mascote{
  position:absolute; right:7%; bottom:66px; width:min(34%,200px);
  transform-origin:50% 100%; will-change:transform; z-index:2;
}
#mascote svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 0 rgba(43,10,42,.13))}

.patinha{position:absolute;width:44px;opacity:0;pointer-events:none;z-index:1}
.patinha img{width:100%}

/* ---------- a rotina do dia ---------- */
.rotina{position:relative; padding:100px clamp(16px,4vw,40px) 120px}
.miolo{max-width:1060px;margin:0 auto;position:relative;z-index:2}

.cabeca-secao{text-align:center;margin-bottom:56px}
.titulo2{
  font-family:var(--fdisplay); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.02; margin:0 0 14px; text-wrap:balance;
}
.sub2{max-width:52ch;margin:0 auto;color:var(--tinta2);font-size:1.1rem}
.cabeca-secao .eyebrow{justify-content:center}

.trilho{position:relative;padding:10px 0 20px}
.linha{
  position:absolute; left:50%; top:0; bottom:0; width:5px; transform:translateX(-50%);
  background:repeating-linear-gradient(to bottom,var(--roxo) 0 13px,transparent 13px 28px);
  opacity:.4; border-radius:3px;
}
#cao-trilho{position:absolute;left:50%;top:0;width:116px;margin-left:-58px;z-index:4;will-change:transform}
#cao-trilho svg,#cao-trilho img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 8px 0 rgba(43,10,42,.16)) drop-shadow(0 0 22px rgba(43,10,42,.35));
}
#mascote img{width:100%;height:auto;display:block}

.parada{
  position:relative; width:calc(50% - 54px); margin-bottom:46px;
}
.parada:nth-child(odd){margin-left:0}
.parada:nth-child(even){margin-left:calc(50% + 54px)}
.parada::after{
  content:""; position:absolute; top:26px; width:17px; height:17px; border-radius:50%;
  background:var(--cor,var(--azul)); border:4px solid var(--tinta); z-index:3;
}
.parada:nth-child(odd)::after{right:-62px}
.parada:nth-child(even)::after{left:-62px}

.hora{
  display:inline-block; font-family:var(--frotulo); font-size:19px; letter-spacing:.13em;
  background:var(--cor,var(--azul)); color:var(--tinta);
  border:3px solid var(--tinta); border-radius:999px; padding:5px 16px 2px; margin-bottom:12px;
  box-shadow:0 3px 0 var(--tinta);
}
.cartao{
  background:#fff; border:3px solid var(--tinta); border-radius:20px; padding:22px 24px;
  box-shadow:0 6px 0 rgba(43,10,42,.14);
}
.cartao h3{font-family:var(--fdisplay);font-weight:600;font-size:1.35rem;margin:0 0 8px;letter-spacing:-.01em}
.cartao p{margin:0;color:var(--tinta2)}
.cartao .foto{
  margin:0 0 16px; border-radius:13px; overflow:hidden; aspect-ratio:16/10;
  border:3px solid var(--tinta);
}
.cartao .foto img{width:100%;height:100%;object-fit:cover;object-position:center 26%}

.aviso{
  max-width:640px; margin:10px auto 0; text-align:center; color:var(--tinta2);
  font-size:.98rem; background:color-mix(in srgb,var(--amarelo) 22%,#fff);
  border:3px dashed var(--tinta); border-radius:18px; padding:16px 22px;
}
.aviso b{color:var(--tinta)}

.mochila{
  max-width:680px; margin:56px auto 0; background:var(--roxo); color:var(--creme);
  border:3px solid var(--tinta); border-radius:22px; padding:26px 28px;
  box-shadow:0 7px 0 var(--tinta); display:flex; gap:20px; align-items:center;
}
.mochila img{width:78px;flex:none}
.mochila h3{font-family:var(--fdisplay);font-weight:600;font-size:1.3rem;margin:0 0 6px}
.mochila p{margin:0;opacity:.92}
.mochila b{color:var(--amarelo)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:104px;gap:24px;min-height:auto}
  .palco{order:-1;max-width:420px;margin:0 auto;width:100%;padding-bottom:54px}
  .adesivo{font-size:clamp(2.4rem,10vw,3.4rem)}
  .adesivo span::before,.adesivo i::before{-webkit-text-stroke-width:11px}
  .topo{gap:12px;padding:10px 14px}
  .topo .marca img{height:38px}
  .topo .marca b{font-size:16px}
  .topo .marca span{font-size:11px;letter-spacing:.12em}
  .topo .btn{font-size:14px;padding:9px 15px;border-width:2px;box-shadow:0 3px 0 var(--tinta)}
  .muro{height:70px;left:-8px;right:-8px}
  .muro::before{content:"COLÉGIO PET · PAULÍNIA";font-size:12px;letter-spacing:.16em;bottom:11px}
  #mascote{bottom:44px;width:42%;right:4%}
  .patinha{width:34px}
  #f-osso{width:78px;right:-4%;top:-4%}
  #f-bola{width:46px;left:7%;bottom:66px}
  .rotina{padding:70px 16px 90px}
  .cabeca-secao{margin-bottom:36px;text-align:left}
  .cabeca-secao .eyebrow{justify-content:flex-start}
  .sub2{margin:0}
  .linha{left:24px;transform:none}
  #cao-trilho{left:24px;width:74px;margin-left:-37px}
  .parada:nth-child(odd),.parada:nth-child(even){width:auto;margin-left:70px;margin-bottom:34px}
  .parada::after,.parada:nth-child(odd)::after,.parada:nth-child(even)::after{left:-51px;right:auto;top:22px}
  .mochila{flex-direction:column;text-align:center;gap:12px;padding:22px}
  .mochila img{width:60px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ================= comuns das seções novas ================= */
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.centro{text-align:center;margin:34px 0 0}
.cabeca-secao.clara .titulo2,.cabeca-secao.clara .sub2{color:var(--creme)}
.cabeca-secao.clara .eyebrow{color:var(--amarelo)}
.caixa{
  background:#fff;border:3px solid var(--tinta);border-radius:20px;padding:24px;
  box-shadow:0 6px 0 rgba(43,10,42,.14);
}
.caixa h3{font-family:var(--fdisplay);font-weight:600;font-size:1.3rem;margin:0 0 10px}
.caixa p{margin:0 0 12px;color:var(--tinta2)}
.caixa b{color:var(--tinta)}
.caixa .miudo{font-size:.9rem;opacity:.8;margin:0}
ul.limpa{list-style:none;padding:0;margin:0 0 12px}
ul.limpa li{padding-left:22px;position:relative;margin-bottom:5px;color:var(--tinta2)}
ul.limpa li::before{
  content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--amarelo)
}
.link-zap{
  display:inline-block;font-family:var(--frotulo);font-size:16px;letter-spacing:.1em;
  color:var(--roxo);border-bottom:3px solid var(--amarelo);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.link-zap:hover{color:var(--tinta);border-color:var(--roxo)}
.link-zap.grande{font-size:21px}
.btn.grande{font-size:19px;padding:15px 30px}

/* ================= as matérias ================= */
.materias{position:relative;padding:100px clamp(16px,4vw,40px)}
.grade-materias{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cracha{
  background:#fff;border:3px solid var(--tinta);border-radius:22px;overflow:hidden;
  box-shadow:0 7px 0 rgba(43,10,42,.16);display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s;
}
.cracha::before{content:"";display:block;height:9px;background:var(--cor)}
.cracha:hover{transform:translateY(-7px) rotate(-.6deg);box-shadow:0 14px 0 rgba(43,10,42,.16)}
.cracha-foto{aspect-ratio:16/11;overflow:hidden;border-bottom:3px solid var(--tinta)}
.cracha-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cracha:hover .cracha-foto img{transform:scale(1.06)}
.cracha-corpo{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.cracha .tag{
  display:inline-block;align-self:flex-start;font-family:var(--frotulo);font-size:13.5px;
  letter-spacing:.13em;background:var(--cor);color:var(--tinta);
  border:2px solid var(--tinta);border-radius:999px;padding:4px 12px 2px;margin-bottom:10px;
}
.cracha h3{font-family:var(--fdisplay);font-weight:600;font-size:1.45rem;margin:0 0 8px;letter-spacing:-.01em}
.cracha p{margin:0 0 16px;color:var(--tinta2);flex:1}
.destaque-cracha{grid-column:span 2}
.destaque-cracha .cracha-foto{aspect-ratio:21/9}

/* ================= hotel (noturno) ================= */
.hotel{
  position:relative;overflow:hidden;color:var(--creme);
  padding:110px clamp(16px,4vw,40px);
  background:radial-gradient(120% 90% at 50% 0%,#2A1A66 0%,#1A1040 55%,#120B2E 100%);
}
.hotel .miolo{position:relative;z-index:2}
.hotel-grade{display:grid;grid-template-columns:.8fr 1.3fr .8fr;gap:26px;align-items:center;margin-bottom:52px}
.hotel-foto{margin:0;border:4px solid var(--amarelo);border-radius:22px;overflow:hidden;aspect-ratio:3/4}
.hotel-foto img{width:100%;height:100%;object-fit:cover}
.hotel-texto{text-align:center}
.hotel-texto h3{font-family:var(--fdisplay);font-weight:600;font-size:1.7rem;margin:0 0 12px}
.hotel-texto p{color:#E5D8F0;margin:0 0 14px}
.hotel-texto .dica{
  background:rgba(255,255,255,.08);border:2px dashed var(--amarelo);
  border-radius:16px;padding:12px 16px;font-size:.98rem;
}
.hotel-texto .dica b{color:var(--amarelo)}
.hotel-texto .btn{margin-top:6px}

.tabela-horas{
  max-width:640px;margin:0 auto;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.22);border-radius:20px;padding:24px 26px;
}
.tabela-horas h3{font-family:var(--fdisplay);font-weight:600;font-size:1.25rem;margin:0 0 14px;text-align:center}
.tabela-horas table{width:100%;border-collapse:collapse;font-size:15.5px}
.tabela-horas th,.tabela-horas td{padding:10px 8px;text-align:left;border-bottom:1px solid rgba(255,255,255,.16)}
.tabela-horas th{font-family:var(--frotulo);font-size:15px;letter-spacing:.13em;color:var(--amarelo);font-weight:400}
.tabela-horas tr:last-child td{border-bottom:0}
.tabela-horas .nota{margin:14px 0 0;font-size:.9rem;color:#D6C7E6;text-align:center}

/* ================= banho e tosa ================= */
.banho{
  position:relative;overflow:hidden;color:var(--creme);
  padding:110px clamp(16px,4vw,40px);
  background:linear-gradient(180deg,#0E5B85 0%,#1682B8 45%,#36ACE2 100%);
}
.bolhas-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:screen;opacity:.55;pointer-events:none;
}
.banho .miolo{position:relative;z-index:2}
.etapas{
  list-style:none;margin:0 0 40px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.etapas li{
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);
  border-radius:18px;padding:18px 20px;backdrop-filter:blur(3px);
}
.etapas .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--amarelo);color:var(--tinta);
  font-family:var(--frotulo);font-size:19px;border:2px solid var(--tinta);margin-bottom:8px;
}
.etapas b{display:block;font-family:var(--fdisplay);font-weight:600;font-size:1.18rem;margin-bottom:2px}
.etapas i{font-style:normal;color:#DCF1FC;font-size:.96rem}
.banho-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.banho-fotos figure{margin:0;border:4px solid var(--creme);border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.banho-fotos img{width:100%;height:100%;object-fit:cover}

/* ================= como funciona ================= */
.funciona{padding:100px clamp(16px,4vw,40px);background:var(--papel2)}
.caixa.clube{background:var(--roxo);color:var(--creme);border-color:var(--tinta)}
.caixa.clube p,.caixa.clube b{color:inherit}
.caixa.clube b{color:var(--amarelo)}
.caixa.clube .link-zap{color:var(--amarelo);border-color:var(--creme)}
.caixa.clube .link-zap:hover{color:#fff}
.preco-aviso{
  display:flex;gap:26px;align-items:center;margin-top:26px;
  background:var(--amarelo);border:3px solid var(--tinta);border-radius:22px;
  padding:26px 30px;box-shadow:0 7px 0 var(--tinta);
}
.preco-aviso img{width:120px;flex:none;transform:rotate(-12deg)}
.preco-aviso h3{font-family:var(--fdisplay);font-weight:600;font-size:1.5rem;margin:0 0 6px}
.preco-aviso p{margin:0 0 14px;max-width:56ch}

/* ================= matrícula ================= */
.matricula{padding:100px clamp(16px,4vw,40px)}
.lista-material{list-style:none;counter-reset:mat;margin:0 0 26px;padding:0;max-width:760px;margin-inline:auto}
.lista-material li{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  background:#fff;border:3px solid var(--tinta);border-radius:18px;
  padding:20px 22px;margin-bottom:14px;box-shadow:0 5px 0 rgba(43,10,42,.13);
}
.marca-check{
  width:38px;height:38px;border-radius:10px;border:3px solid var(--tinta);
  background:var(--creme);position:relative;
}
.marca-check::after{
  content:"";position:absolute;left:9px;top:5px;width:12px;height:20px;
  border:solid var(--roxo);border-width:0 5px 5px 0;transform:rotate(42deg) scale(0);
  transform-origin:center;transition:transform .35s cubic-bezier(.2,1.4,.4,1);
}
.lista-material li.ok .marca-check{background:var(--amarelo)}
.lista-material li.ok .marca-check::after{transform:rotate(42deg) scale(1)}
.lista-material h3{font-family:var(--fdisplay);font-weight:600;font-size:1.2rem;margin:0 0 5px}
.lista-material p{margin:0;color:var(--tinta2)}
.cta-matricula{
  text-align:center;margin-top:40px;background:var(--roxo);color:var(--creme);
  border:3px solid var(--tinta);border-radius:24px;padding:38px 26px;
  box-shadow:0 8px 0 var(--tinta);
}
.cta-matricula h3{font-family:var(--fdisplay);font-weight:600;font-size:2rem;margin:0 0 8px}
.cta-matricula p{margin:0 0 22px;opacity:.92}

/* ================= foto do dia ================= */
.fotodia{padding:100px clamp(16px,4vw,40px);background:var(--papel2)}
.fotodia-texto p{color:var(--tinta2);margin:0 0 14px;max-width:48ch}
.celular{
  width:min(300px,80%);margin:0 auto;aspect-ratio:9/18.5;
  background:var(--tinta);border-radius:38px;padding:12px;
  box-shadow:0 20px 40px -22px rgba(43,10,42,.8);position:relative;
}
.celular::before{
  content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:86px;height:8px;border-radius:99px;background:rgba(255,255,255,.25);z-index:3;
}
.celular .tela{
  position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;background:#000;
}
.celular .tira{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s ease;
}
.celular .tira.ativa{opacity:1}

/* ================= mural ================= */
.mural{padding:100px clamp(16px,4vw,40px)}
.mural-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mural-grade img{
  width:100%;aspect-ratio:1;object-fit:cover;border:3px solid var(--tinta);
  border-radius:18px;transition:transform .3s,box-shadow .3s;
}
.mural-grade img:hover{transform:translateY(-5px) rotate(-1.2deg);box-shadow:0 10px 0 rgba(43,10,42,.15)}
.redes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ================= onde ficamos ================= */
.onde{padding:100px clamp(16px,4vw,40px);background:var(--papel2)}
.onde-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.mapa{
  border:4px solid var(--tinta);border-radius:24px;overflow:hidden;
  box-shadow:0 8px 0 rgba(43,10,42,.16);aspect-ratio:4/3.4;background:#ddd;
}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.onde-info .bloco{
  background:#fff;border:3px solid var(--tinta);border-radius:20px;
  padding:20px 22px;margin-bottom:16px;box-shadow:0 5px 0 rgba(43,10,42,.13);
}
.onde-info h3{font-family:var(--fdisplay);font-weight:600;font-size:1.2rem;margin:0 0 10px}
.onde-info p{margin:0;color:var(--tinta2)}
.horarios{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}
.horarios dt{font-family:var(--frotulo);font-size:16px;letter-spacing:.1em;color:var(--roxo);padding-top:2px}
.horarios dd{margin:0;color:var(--tinta2);font-size:.97rem}
.horarios i{opacity:.75;font-size:.9rem}
.telefones{list-style:none;margin:0;padding:0}
.telefones li{border-top:2px dashed var(--borda);padding:12px 0}
.telefones li:first-child{border-top:0;padding-top:0}
.telefones a{display:block}
.telefones b{display:block;font-family:var(--fdisplay);font-weight:600;font-size:1.22rem;color:var(--roxo)}
.telefones span{display:block;color:var(--tinta2);font-size:.93rem}
.telefones a:hover b{color:var(--tinta)}

/* ================= rodapé ================= */
.rodape{background:var(--tinta);color:var(--creme);padding:64px clamp(16px,4vw,40px) 28px}
.rodape-grade{display:grid;grid-template-columns:1.1fr .8fr 1.1fr;gap:40px}
.rodape-logo{height:120px;width:auto;margin-bottom:12px}
.rodape-tag{font-family:var(--frotulo);font-size:15px;letter-spacing:.16em;color:var(--amarelo);margin:0}
.rodape h3{font-family:var(--fdisplay);font-weight:600;font-size:1.15rem;margin:0 0 12px;color:#fff}
.rodape-menu{display:flex;flex-direction:column;gap:7px}
.rodape-menu a{color:#E8D8E6;transition:color .2s}
.rodape-menu a:hover{color:var(--amarelo)}
.rodape-contato p{margin:0 0 12px;color:#E8D8E6;line-height:1.7}
.rodape-contato a{color:#fff;border-bottom:2px solid var(--roxo)}
.rodape-contato a:hover{border-color:var(--amarelo)}
.redes-mini a{color:var(--amarelo);border:0}
.creditos{
  margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  text-align:center;font-size:.9rem;color:#C9B3C7;
}
.creditos a{color:var(--amarelo)}

/* ================= flutuantes ================= */
.zap-flutua{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;align-items:center;gap:10px;
  background:#25D366;color:#0A2B14;border:3px solid var(--tinta);
  border-radius:999px;padding:12px 20px 12px 16px;
  box-shadow:0 5px 0 var(--tinta);
  font-family:var(--fdisplay);font-weight:600;font-size:16px;
  transition:transform .15s,box-shadow .15s;
}
.zap-flutua:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--tinta)}
.topo-btn{
  position:fixed;right:22px;bottom:88px;z-index:80;
  width:52px;height:52px;border-radius:50%;
  background:var(--amarelo);color:var(--tinta);border:3px solid var(--tinta);
  box-shadow:0 4px 0 var(--tinta);display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .25s,transform .25s,box-shadow .15s;
}
.topo-btn.aparece{opacity:1;pointer-events:auto;transform:none}
.topo-btn:hover{box-shadow:0 2px 0 var(--tinta);transform:translateY(2px)}

/* ================= preloader ================= */
.preloader{
  position:fixed;inset:0;z-index:999;background:var(--roxo);
  display:grid;place-items:center;
}
.preloader.foi{opacity:0;pointer-events:none;transition:opacity .5s}
.pre-miolo{text-align:center;padding:20px}
.pre-miolo img{height:min(38vh,300px);width:auto;margin:0 auto 26px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.3))}
.pre-barra{
  width:min(260px,64vw);height:12px;margin:0 auto;border-radius:99px;
  background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.5);overflow:hidden;
}
.pre-barra i{display:block;height:100%;width:0;background:var(--amarelo);border-radius:99px}
.pre-txt{
  font-family:var(--frotulo);font-size:16px;letter-spacing:.2em;
  color:rgba(255,255,255,.75);margin:14px 0 0;
}

/* ================= menu no celular ================= */
.hamburguer{display:none;width:48px;height:44px;border:3px solid var(--tinta);
  border-radius:12px;background:#fff;padding:0;place-items:center;gap:5px;
  box-shadow:0 3px 0 var(--tinta);flex-direction:column;justify-content:center}
.hamburguer span{display:block;width:22px;height:3px;background:var(--tinta);border-radius:2px;transition:transform .25s,opacity .2s}
.hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--roxo);
  display:grid;place-items:center;
}
.menu-mobile nav{display:flex;flex-direction:column;gap:18px;text-align:center}
.menu-mobile a{
  font-family:var(--fdisplay);font-weight:600;font-size:1.7rem;color:var(--creme);
}
.menu-mobile a.btn{font-size:1.1rem;margin-top:10px;color:var(--tinta)}

/* ================= responsivo ================= */
@media(max-width:1000px){
  .grade-materias{grid-template-columns:repeat(2,1fr)}
  .destaque-cracha{grid-column:span 2}
  .hotel-grade{grid-template-columns:1fr 1fr;gap:20px}
  .hotel-texto{grid-column:span 2;order:-1}
  .onde-grade{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:900px){
  .hamburguer{display:flex}
  .topo-cta{display:none}
  .grade-2{grid-template-columns:1fr;gap:28px}
  .grade-3{grid-template-columns:1fr}
  .grade-materias{grid-template-columns:1fr}
  .destaque-cracha{grid-column:span 1}
  .destaque-cracha .cracha-foto{aspect-ratio:16/11}
  .etapas{grid-template-columns:1fr 1fr;gap:12px}
  .banho-fotos{grid-template-columns:1fr;gap:14px}
  .banho-fotos figure{aspect-ratio:16/10}
  .materias,.hotel,.banho,.funciona,.matricula,.fotodia,.mural,.onde{padding:70px 16px}
  .hotel-grade{grid-template-columns:1fr}
  .hotel-texto{grid-column:span 1}
  .hotel-foto{aspect-ratio:16/11}
  .preco-aviso{flex-direction:column;text-align:center;gap:14px;padding:24px 20px}
  .preco-aviso img{width:88px}
  .mural-grade{grid-template-columns:repeat(2,1fr);gap:10px}
  .lista-material li{grid-template-columns:44px 1fr;gap:14px;padding:16px 18px}
  .rodape-grade{grid-template-columns:1fr;gap:26px;text-align:center}
  .rodape-logo{height:96px}
  .rodape-menu{align-items:center}
  .zap-flutua span{display:none}
  .zap-flutua{padding:14px;border-radius:50%}
  .topo-btn{bottom:84px;right:20px}
  .cta-matricula h3{font-size:1.6rem}
}
@media(max-width:520px){
  .etapas{grid-template-columns:1fr}
}

/* =======================================================================
   FUNDOS DO MATERIAL IMPRESSO (Apresentacao Colegio Pet)
   Cor cheia + patinhas tom sobre tom, e as secoes encaixadas por ARCOS —
   nenhuma emenda reta entre uma secao e a outra.
   ======================================================================= */

body{
  background-color:var(--papel);
  background-image:var(--patas-roxas);
  background-size:420px;
}

/* O ARCO — quem faz a curva e a PROPRIA secao de baixo, subindo em cupula
   por cima da de cima (margem negativa + cantos de topo arredondados).

   ⚠️ Antes o arco era um ::after desenhado DENTRO da secao de cima, pintado
   com a cor chapada da proxima. Dava para ver a emenda de dois jeitos:
   (a) a faixa do arco nao tinha patinha nenhuma, e a textura "comecava"
   numa linha horizontal logo abaixo dela; (b) a cor chapada nao batia com
   o gradiente da secao seguinte (ex.: --roxo #81007F contra o #8E128C do
   topo do gradiente da rotina), entao sobrava um degrau curvo de cor.
   Agora a cupula E a secao: mesma cor, mesmo gradiente, mesmas patinhas,
   continuos ate a borda curva. Nao ha o que emendar. */
.rotina,.materias,.fita,.hotel,.banho,.funciona,.matricula,
.fotodia,.mural,.onde,.recreio,.rodape{
  position:relative;
  margin-top:calc(-1 * var(--arco));
  padding-top:calc(100px + var(--arco));
  border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0;
  /* isola o empilhamento: sem isso o .miolo{z-index:2} de uma secao
     escapa para a raiz e passa por cima da cupula da seguinte */
  isolation:isolate;
}
.hero{isolation:isolate}

/* ---- 1. hero (creme) ---- */
.hero{padding-bottom:calc(var(--arco) + 10px)}

/* ---- 1b. A CENA DO BANHO (video que anda com a rolagem) ----
   .cena e so a ALTURA de rolagem; quem aparece e o .cena-palco, grudado no
   alto da tela. Os dois levam a mesma cupula: na entrada ela se ve contra o
   creme do hero, e depois some porque atras do palco fica o mesmo escuro.
   ⚠️ Nada de overflow:hidden no .cena — ancestral com overflow quebra o
   position:sticky do palco. Quem recorta o video e o .cena-quadro. */
.cena{
  position:relative; height:380vh;
  margin-top:calc(-1 * var(--arco));
  border-radius:50% 50% 0 0/var(--arco) var(--arco) 0 0;
  /* ⚠️ sem z-index proprio: com z-index:1 a cena passava a ficar ACIMA da
     rotina e escondia a cupula roxa que sobe por cima dela no fim */
  background:#160A1A; isolation:isolate;
}
.cena-palco{
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  border-radius:inherit;
}
.cena-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cena-quadro{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.cena-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; background:#160A1A;
}
/* o veu escurece o pe da tela (onde entra o texto) e o alto (onde fica a
   barra fixa creme), deixando o meio limpo — que e onde esta o cachorro */
.cena-veu{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(22,10,26,.72) 0%,rgba(22,10,26,.12) 26%,
                    rgba(22,10,26,0) 44%,rgba(22,10,26,.55) 74%,rgba(22,10,26,.93) 100%),
    radial-gradient(120% 80% at 22% 86%,rgba(43,10,42,.55) 0%,transparent 62%);
}

.cena-falas{
  position:absolute; left:clamp(18px,6vw,86px); right:clamp(18px,6vw,86px);
  bottom:clamp(84px,13vh,150px); z-index:3;
  min-height:210px; pointer-events:none;
}
.cena-fala{
  position:absolute; left:0; bottom:0; max-width:min(660px,52vw);
  opacity:0; transform:translateY(26px); transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.3,1);
}
.cena-fala.vis{opacity:1;transform:none}
.cena-fala.vis .btn{pointer-events:auto}
.cena-t{
  font-family:var(--fdisplay); font-weight:600; color:var(--creme);
  font-size:clamp(2.1rem,5.4vw,4.2rem); line-height:.98; letter-spacing:-.02em;
  margin:0 0 14px; text-wrap:balance;
  text-shadow:0 4px 0 rgba(43,10,42,.5),0 14px 40px rgba(0,0,0,.45);
}
.cena-s{
  margin:0; color:#F3E4F2; font-size:clamp(1rem,1.5vw,1.22rem); max-width:34ch;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.cena-fim .btn{margin-top:22px;display:inline-block}

/* quatro tracinhos: dizem em que ponto da historia a pessoa esta */
.cena-barra{
  position:absolute; left:clamp(18px,6vw,86px); bottom:clamp(38px,6vh,74px);
  display:flex; gap:8px; z-index:3;
}
.cena-barra i{
  display:block; width:38px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.28); transition:background .35s,transform .35s;
}
.cena-barra i.on{background:var(--amarelo);transform:scaleY(1.5)}

/* ⚠️ no meio da base, nao no canto direito: la ela fica escondida atras do
   botao flutuante do WhatsApp */
.cena-role{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:clamp(34px,5.5vh,68px); z-index:3;
  margin:0; font-family:var(--frotulo); font-size:16px; letter-spacing:.18em;
  color:rgba(255,247,236,.82); display:flex; align-items:center; gap:10px;
  transition:opacity .45s;
}
.cena-role::after{
  content:""; width:2px; height:26px; border-radius:2px; background:currentColor;
  animation:cena-desce 1.5s ease-in-out infinite;
}
.cena-role.foi{opacity:0}
@keyframes cena-desce{0%,100%{transform:translateY(-6px);opacity:.35}50%{transform:translateY(6px);opacity:1}}

@media(max-width:900px){
  /* no celular o video vira um cartao 4:5 (o arquivo tambem e outro) e as
     falas ficam embaixo dele, em vez de por cima */
  .cena{
    height:300vh;
    background-image:var(--patas-claras); background-size:300px;
    background-color:#160A1A;
  }
  .cena-palco{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:20px; padding:92px 18px 30px;
  }
  .cena-quadro{
    position:relative; inset:auto; width:min(88vw,420px); aspect-ratio:4/5; flex:none;
    border:3px solid var(--creme); border-radius:26px;
    box-shadow:0 10px 0 rgba(0,0,0,.4),0 0 0 6px rgba(255,247,236,.08);
  }
  .cena-video{object-position:center center}
  .cena-veu{background:linear-gradient(180deg,rgba(22,10,26,0) 62%,rgba(22,10,26,.55) 100%)}
  .cena-falas{
    position:relative; left:auto; right:auto; bottom:auto; width:100%;
    min-height:158px; text-align:center;
  }
  .cena-fala{left:0;right:0;bottom:auto;top:0;max-width:none;margin:0 auto}
  .cena-t{font-size:clamp(1.9rem,8.4vw,2.6rem);margin-bottom:10px}
  .cena-s{margin:0 auto;font-size:1rem}
  .cena-barra{position:relative;left:auto;bottom:auto;justify-content:center}
  .cena-barra i{width:28px}
  .cena-role{display:none}
}

@media (prefers-reduced-motion:reduce){
  /* sem movimento: a cena vira um bloco comum, com o quadro do video em cima
     (so o poster) e as quatro falas empilhadas, todas visiveis */
  .cena{height:auto;padding-bottom:60px}
  .cena-palco{position:static;height:auto;display:block;padding:calc(60px + var(--arco)) clamp(18px,6vw,86px) 20px}
  .cena-quadro{position:relative;inset:auto;width:100%;max-width:760px;margin:0 auto;aspect-ratio:16/9;border-radius:24px}
  .cena-veu{display:none}
  .cena-falas{position:static;min-height:0;margin-top:34px;display:grid;gap:34px}
  .cena-fala{position:static;opacity:1;transform:none;max-width:none;pointer-events:auto}
  .cena-barra,.cena-role{display:none}
}

/* ---- 2. a rotina do dia (roxo, como a pagina "Pacotes para Creche") ---- */
.rotina{
  padding-bottom:calc(66px + var(--arco));
  background-color:var(--roxo);
  background-image:var(--patas-claras),linear-gradient(180deg,#8E128C 0%,#81007F 46%,#6B0069 100%);
  background-size:400px,auto;
}
.rotina .titulo2{color:var(--creme)}
.rotina .sub2{color:#EAD3E9}
.rotina .eyebrow{color:var(--amarelo)}
.rotina .eyebrow::before{background:var(--amarelo)}
.rotina .linha{background:repeating-linear-gradient(to bottom,#fff 0 13px,transparent 13px 28px);opacity:.5}
.rotina .aviso{background:#fff;border-color:var(--tinta);color:var(--tinta2)}
.rotina .mochila{background:var(--amarelo);color:var(--tinta)}
.rotina .mochila p{opacity:1;color:var(--tinta2)}
.rotina .mochila b{color:var(--roxo)}

/* ---- 3. as materias (creme) ----
   precisa do fundo escrito aqui (antes herdava o do body): a cupula do topo
   e pintada pelo fundo da PROPRIA secao — sem fundo, nao ha cupula. */
.materias{
  padding-bottom:calc(30px + var(--arco-fita));
  background-color:var(--papel);
  background-image:var(--patas-roxas); background-size:420px;
}

/* ---- 4 e 7. as fitas que correm ---- */
.fita{
  position:relative; overflow:hidden; --arco:var(--arco-fita);
  padding:calc(15px + var(--arco)) 0 calc(13px + var(--arco-base));
  user-select:none;
}
.fita-pista{
  display:flex; width:max-content; will-change:transform;
  font-family:var(--frotulo); letter-spacing:.13em;
  font-size:clamp(19px,2.5vw,29px); line-height:1.5;
}
.fita-pista span{white-space:nowrap; display:block}
.fita-amarela{
  background-color:var(--amarelo);
  background-image:var(--patas-claras); background-size:300px; color:var(--tinta);
}
.fita-roxa{
  background-color:var(--roxo);
  background-image:var(--patas-claras); background-size:300px; color:#F6E3F5;
}

/* ---- 5. o hotel (azul-noite, sem video) ---- */
.hotel{
  padding-bottom:calc(100px + var(--arco));
  background-color:#0E3E68;
  background-image:var(--patas-claras),
    radial-gradient(120% 90% at 50% 0%,#1A6EA8 0%,#12558A 42%,#0A2E4F 100%);
  background-size:410px,auto;
}
/* o ceu e a lua moram dentro da cupula: sem o border-radius herdado as
   estrelinhas vazariam para cima da fita amarela */
.ceu{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.ceu i{position:absolute;inset:-10%;display:block;background-repeat:repeat}
@keyframes pisca{0%,100%{opacity:.35}50%{opacity:1}}
.lua{
  position:absolute; right:12vw; top:calc(56px + var(--arco)); width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF6DC 0%,#FBE9B4 58%,#F3D68A 100%);
  box-shadow:0 0 0 14px rgba(251,178,71,.10),0 0 0 34px rgba(251,178,71,.06),
             0 0 60px 12px rgba(255,236,180,.30);
  z-index:0; pointer-events:none;
}
.lua::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(9px 9px at 62% 30%,rgba(214,182,120,.5) 0 100%,transparent 100%),
             radial-gradient(13px 13px at 34% 64%,rgba(214,182,120,.42) 0 100%,transparent 100%),
             radial-gradient(7px 7px at 68% 68%,rgba(214,182,120,.38) 0 100%,transparent 100%);
}

/* ---- 6. banho e tosa (azul, com o video de bolhas) ---- */
.banho{
  padding-bottom:calc(90px + var(--arco-fita));
  background-color:#1682B8;
  background-image:var(--patas-claras),
    linear-gradient(180deg,#2FA3DC 0%,#1E8FCB 45%,#0E6C99 100%);
  background-size:390px,auto;
}
.etapas li{backdrop-filter:none;background:rgba(255,255,255,.17)}

/* ---- 8. como funciona (creme) ---- */
.funciona{
  position:relative;
  padding-bottom:calc(100px + var(--arco));
  background-color:var(--papel2); background-image:var(--patas-roxas); background-size:420px;
}

/* ---- 9. matricula (amarelo, como as paginas de preco) ---- */
.matricula{
  position:relative;
  padding-bottom:calc(100px + var(--arco));
  background-color:var(--amarelo);
  background-image:var(--patas-roxas),linear-gradient(180deg,#FDBE60 0%,#FBB247 48%,#F59A25 100%);
  background-size:410px,auto;
}
.matricula .aviso{background:#fff}
/* nesta seção o fundo já é amarelo: o "marcado" vira roxo, senão some */
.matricula .marca-check{background:#fff}
.matricula .lista-material li.ok .marca-check{background:var(--roxo)}
.matricula .lista-material li.ok .marca-check::after{border-color:var(--amarelo)}

/* ---- 10. foto do dia (creme) ---- */
.fotodia{
  position:relative;
  padding-bottom:calc(100px + var(--arco));
  background-color:var(--papel2); background-image:var(--patas-roxas); background-size:420px;
}

/* ---- 11. a turma (roxo) ---- */
.mural{
  position:relative;
  padding-bottom:calc(100px + var(--arco));
  background-color:var(--roxo);
  background-image:var(--patas-claras),linear-gradient(180deg,#8E128C 0%,#7A0078 100%);
  background-size:400px,auto;
}
.mural .titulo2{color:var(--creme)}
.mural .sub2{color:#EAD3E9}
.mural .sub2 b{color:var(--amarelo)}
.mural .eyebrow{color:var(--amarelo)}
.mural .eyebrow::before{background:var(--amarelo)}
.mural-grade img{border-color:var(--creme)}
.mural-grade img:hover{box-shadow:0 10px 0 rgba(0,0,0,.22)}
.mural .btn.vazado{border-color:var(--creme);color:var(--creme);box-shadow:0 4px 0 var(--creme)}
.mural .btn.vazado:hover{box-shadow:0 2px 0 var(--creme)}

/* ---- 12. onde ficamos (creme) ---- */
.onde{
  position:relative;
  padding-bottom:calc(100px + var(--arco));
  background-color:var(--papel2); background-image:var(--patas-roxas); background-size:420px;
}

/* ---- 12b. o recreio (amarelo) — mini-jogo antes do rodape ---- */
.recreio{
  position:relative;
  /* o padding-top precisa repor a curva: o atalho "padding" apaga o
     padding-top do bloco geral das seções */
  padding:calc(90px + var(--arco)) clamp(16px,4vw,40px) calc(90px + var(--arco));
  background-color:var(--amarelo);
  background-image:var(--patas-claras),linear-gradient(180deg,#FDC169 0%,#FBB247 52%,#F0A231 100%);
  background-size:380px,auto;
}
.jogo{
  position:relative; margin-top:34px;
  border:4px solid var(--tinta); border-radius:26px; overflow:hidden;
  box-shadow:0 10px 0 rgba(43,10,42,.2); background:#EAF7FE;
  /* o dedo tem que poder rolar a pagina em cima do jogo (so o toque
     rapido pula); sem isso o celular fica preso na faixa do jogo */
  touch-action:pan-y;
}
.jogo canvas{display:block;width:100%;height:310px;cursor:inherit}
.jogo-placar{
  position:absolute; top:12px; left:12px; right:12px; z-index:2;
  display:flex; gap:8px; align-items:center; pointer-events:none;
  font-family:var(--frotulo); letter-spacing:.1em; font-size:17px;
  opacity:0; transition:opacity .3s;   /* só aparece com a partida rolando */
}
.jogo.jogando .jogo-placar{opacity:1}
.jogo-marca{
  background:var(--creme); border:3px solid var(--tinta); border-radius:999px;
  padding:3px 13px 1px; box-shadow:0 3px 0 rgba(43,10,42,.22);
}
.jogo-marca b{font-weight:400}
.jogo-rec{margin-left:auto;background:var(--tinta);color:var(--creme);font-size:15px}
.jogo-brinq{background:var(--azul)}

.jogo-caixa{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center; padding:22px;
  background:rgba(43,10,42,.62); color:var(--creme);
  backdrop-filter:blur(2px);
}
.jogo-titulo{
  font-family:var(--fdisplay); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.2rem);
  margin:0; color:var(--creme);
}
.jogo-txt{margin:0;max-width:44ch;color:#F3E4F2}
.jogo-txt b{color:var(--amarelo)}
.jogo-botoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.jogo-caixa .btn.vazado{background:transparent;border-color:var(--creme);color:var(--creme);box-shadow:0 4px 0 var(--creme)}
.jogo-caixa .btn.vazado:hover{box-shadow:0 2px 0 var(--creme)}

@media(max-width:760px){
  .jogo canvas{height:230px}
  .jogo-placar{font-size:15px;top:9px;left:9px;right:9px}
  .jogo-marca{padding:2px 10px 0}
  .jogo-rec{display:none}
}

/* ---- 13. rodape ---- */
.rodape{
  background-image:var(--patas-claras);background-size:420px;
  padding-top:calc(64px + var(--arco));
}

/* =======================================================================
   O SLIDE DAS MATERIAS (mesmo estilo de carrossel da referencia)
   ======================================================================= */
.vitrine{position:relative}
.vit-janela{overflow:hidden;margin:0 -10px;padding:14px 10px 26px}
.vit-pista{
  display:flex; gap:22px; width:max-content;
  will-change:transform; touch-action:pan-y;
}
.vit-pista .cracha{flex:0 0 var(--vit-larg,320px);width:var(--vit-larg,320px);margin:0}
.vitrine.arrastando .cracha{pointer-events:none}
.vitrine.arrastando .cracha:hover{transform:none}
@media(pointer:fine){
  .vit-pista{cursor:grab}
  .vitrine.arrastando .vit-pista{cursor:grabbing}
}
.destaque-cracha{grid-column:auto;box-shadow:0 7px 0 var(--roxo)}
.destaque-cracha .cracha-foto{aspect-ratio:16/11}

.vit-controles{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.vit-seta{
  position:relative;width:54px;height:54px;flex:none;border-radius:50%;
  border:3px solid var(--tinta);background:var(--amarelo);color:var(--tinta);
  box-shadow:0 4px 0 var(--tinta);display:grid;place-items:center;padding:0;
  transition:transform .12s,box-shadow .12s,opacity .2s;
}
.vit-seta:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--tinta)}
.vit-seta:disabled{opacity:.3;box-shadow:0 0 0 var(--tinta);transform:translateY(4px)}
.vit-barra{
  width:min(300px,44vw);height:9px;border-radius:99px;
  background:rgba(43,10,42,.15);overflow:hidden;
}
.vit-barra i{display:block;height:100%;width:30%;background:var(--roxo);border-radius:99px}
.vit-conta{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  margin:0;font-family:var(--frotulo);font-size:15px;letter-spacing:.12em;
  color:var(--tinta2);white-space:nowrap;
}
.vit-conta b{color:var(--roxo);font-size:19px}
.vit-dica{
  display:flex;align-items:center;justify-content:center;gap:9px;
  text-align:center;margin:14px 0 0;font-family:var(--frotulo);
  font-size:16px;letter-spacing:.13em;color:var(--tinta2);
}
.vit-dica b{color:var(--roxo)}
.vit-dica svg{flex:none;color:var(--roxo)}

/* ⚠️ o carrossel passava por CARTÕES PARADOS: três cabiam inteiros na
   largura e a fila terminava exatamente na borda, então nada dizia que
   havia mais. Os três sinais abaixo resolvem, e o quarto está no JS
   (o empurrãozinho na primeira vez que a seção aparece).
   1. o próximo cartão fica CORTADO na direita (a medida vem do main.js)
   2. o dedo/mãozinha e a contagem na dica
   3. a setinha "próxima" pulsa até a pessoa mexer no carrossel */
.vitrine.vit-adormecida .vit-proxima{animation:vit-chama 1.9s ease-in-out infinite}
@keyframes vit-chama{
  0%,62%,100%{transform:translateX(0)}
  74%{transform:translateX(5px)}
  86%{transform:translateX(0)}
}
.vitrine.vit-adormecida .vit-proxima::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:3px solid var(--roxo);opacity:0;
  animation:vit-anel 1.9s ease-out infinite;
}
@keyframes vit-anel{
  0%{transform:scale(1);opacity:.55}
  55%,100%{transform:scale(1.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .vitrine.vit-adormecida .vit-proxima,
  .vitrine.vit-adormecida .vit-proxima::after{animation:none}
}

/* =======================================================================
   MOVIMENTO: enfeites que entram pelas laterais e barra de progresso
   ======================================================================= */
.enfeites{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.enfeite{position:absolute;display:block;width:var(--t,70px);will-change:transform;opacity:0}
/* o giro fica no <img> (o .enfeite ja tem o tween da entrada) e a sombra
   descola o brinquedo do fundo chapado da seção */
.enfeite img{
  width:100%; display:block;
  transform:rotate(var(--rot,0deg));
  filter:drop-shadow(0 10px 14px rgba(43,10,42,.32));
}
.titulo2 .pal{display:inline-block;will-change:transform}

.progresso{
  position:absolute;left:0;bottom:-3px;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--azul),var(--amarelo) 55%,var(--roxo));
  pointer-events:none;
}

/* =======================================================================
   ajustes de responsivo das partes novas
   ======================================================================= */
@media(max-width:1000px){
  .lua{width:74px;height:74px;right:6vw;top:calc(54px + var(--arco))}
}
@media(max-width:900px){
  .vit-janela{margin:0 -16px;padding:12px 16px 22px}
  .vit-controles{gap:14px}
  .vit-seta{width:48px;height:48px}
  .vit-conta{display:none}
  .vit-dica{font-size:14.5px;letter-spacing:.1em}
  /* o padding:70px do bloco de cima e atalho e zera o topo: repoe o arco */
  .rotina,.materias,.hotel,.banho,.funciona,.matricula,.fotodia,.mural,.onde{
    padding-top:calc(70px + var(--arco));
  }
  .rodape{padding-top:calc(48px + var(--arco))}
  .rotina{padding-bottom:calc(80px + var(--arco))}
  .materias{padding-bottom:calc(20px + var(--arco-fita))}
  .hotel,.funciona,.matricula,.fotodia,.mural,.onde{
    padding-bottom:calc(70px + var(--arco));
  }
  .banho{padding-bottom:calc(60px + var(--arco-fita))}
  .lua{width:58px;height:58px;top:calc(46px + var(--arco))}
  .fita-pista{font-size:18px}
}
/* no celular a dica esbarrava nos botões flutuantes: fica só o essencial */
@media(max-width:560px){
  .vit-dica b{display:none}
}

.ceu i:nth-child(1){background-image:radial-gradient(1.4px 1.4px at 0.0% 92.1%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 28.9% 21.1%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 72.9% 53.3%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 32.9% 75.2%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 75.5% 54.3%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 68.5% 63.6%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 81.7% 24.2%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 37.4% 70.8%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 69.8% 5.4%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 68.4% 46.8%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 92.2% 80.7%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 12.3% 51.3%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 92.3% 68.9%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%),radial-gradient(1.4px 1.4px at 64.4% 57.7%,rgba(255,255,255,0.55) 0,rgba(255,255,255,0) 100%);background-size:520px 420px;animation:pisca 5.5s ease-in-out 0s infinite}
.ceu i:nth-child(2){background-image:radial-gradient(2px 2px at 91.2% 90.8%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 37.2% 33.5%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 83.7% 33.2%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 15.3% 29.8%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 42.8% 29.5%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 93.7% 55.7%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 72.9% 87.8%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 5.9% 27.3%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 56.1% 50.9%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 42.1% 19.3%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%),radial-gradient(2px 2px at 90.9% 5.5%,rgba(255,255,255,0.75) 0,rgba(255,255,255,0) 100%);background-size:760px 640px;animation:pisca 7s ease-in-out 1.3s infinite}
.ceu i:nth-child(3){background-image:radial-gradient(2.8px 2.8px at 36.5% 34.4%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 66.4% 92.4%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 51.5% 16.6%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 40.6% 28.4%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 36.4% 42.4%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 33.3% 53.2%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 61.4% 23.3%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%),radial-gradient(2.8px 2.8px at 90.6% 45.8%,rgba(255,255,255,0.95) 0,rgba(255,255,255,0) 100%);background-size:980px 820px;animation:pisca 9s ease-in-out 2.6s infinite}