/* ==========================================================================
   THOR PET SPA — página /creche (Creche · Day Care)
   Complemento do style.css. Carregue SEMPRE depois dele.

   Mesma marca da /gatos, outra experiência: enquanto a página felina é
   contemplativa e simétrica, esta narra a PASSAGEM DO TEMPO de um dia.
   Daí os blocos próprios: hero com vídeo, faixa de dados, linha do tempo
   alternada, pilares grandes e galeria editorial de alturas desiguais.
   ========================================================================== */

/* ───────────── HERO — texto à esquerda, vídeo à direita ───────────── */
.chero{
  position:relative; overflow:hidden;
  background:var(--green-d);
  padding:clamp(38px,5vw,68px) 0 clamp(96px,11vw,150px);
}
.chero__in{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(30px,4.5vw,64px); align-items:center;
}
.chero h1{
  color:#fff; margin-bottom:.3em;
  font-size:clamp(2.3rem,5.2vw,4.1rem);
  text-shadow:0 3px 16px rgba(9,58,60,.3);
}
/* "propósito" ganha o amarelo do logo — é a palavra que carrega a promessa */
.chero .hl{color:var(--lime);}
.chero__sub{
  color:#fff; font-size:clamp(1.02rem,1.5vw,1.2rem);
  margin-bottom:1rem; max-width:34em;
  text-shadow:0 2px 10px rgba(9,58,60,.25);
}
.chero__line{
  display:inline-block; font-family:'Pacifico',cursive; font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.42rem); line-height:1.4;
  color:var(--green-l); margin-bottom:1.8rem;
}
.chero__btns{display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1rem;}
.chero__micro{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .85rem;
  font-size:.92rem; font-weight:700; color:rgba(255,255,255,.9);
}
.chero__micro span{display:inline-flex; align-items:center; gap:.5rem;}
.chero__micro span::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--lime); flex:none;
}

/* ───────────── MOLDURA DO VÍDEO ───────────── */
/* preload="none": nada do vídeo desce antes do clique — só o pôster. */
.vframe{
  position:relative; border-radius:34px; overflow:hidden;
  aspect-ratio:16/9; background:var(--green-dd);
  box-shadow:0 0 0 8px rgba(255,255,255,.14), var(--sh-l);
}
.vframe video,.vframe img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.vframe__btn{
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  background:linear-gradient(rgba(9,58,60,.12), rgba(9,58,60,.42));
  transition:background .35s var(--e), opacity .3s;
}
.vframe__btn:hover{background:linear-gradient(rgba(9,58,60,.05), rgba(9,58,60,.3));}
.vframe__play{
  display:grid; place-items:center; width:clamp(72px,7vw,96px); aspect-ratio:1;
  border-radius:50%; background:rgba(255,255,255,.94); color:var(--green-dd);
  box-shadow:var(--sh-m);
  transition:transform .4s var(--eb), background .3s;
}
.vframe__btn:hover .vframe__play{transform:scale(1.09); background:var(--lime);}
.vframe__play svg{width:38%; height:38%; fill:currentColor; margin-left:12%;}
.vframe__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.6rem 1.5rem 1.15rem; pointer-events:none;
  background:linear-gradient(transparent, rgba(9,58,60,.72));
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.95rem; color:#fff;
}
.vframe.on .vframe__btn,.vframe.on .vframe__cap{opacity:0; pointer-events:none;}

/* ───────────── FAIXA DE INFORMAÇÕES RÁPIDAS ───────────── */
/* Deliberadamente sem card: só filete + rótulo + valor. Serve a quem escaneia. */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.5vw,34px);
}
.facts li{padding-left:1.1rem; border-left:4px solid var(--green-l);}
.facts b{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--green); margin-bottom:.15em;
}
.facts span{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1.08rem,1.6vw,1.32rem); line-height:1.22; color:var(--green-dd);
}

/* ───────────── POSICIONAMENTO — assimétrico ───────────── */
.skew{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(32px,5vw,72px); align-items:center;}
.skew__ph{
  border-radius:40px; overflow:hidden; aspect-ratio:5/4;
  background:var(--green-l); box-shadow:var(--sh-l);
}
.skew__ph img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e);}
.skew__ph:hover img{transform:scale(1.05);}
/* a lista de verbos é o coração do posicionamento — tipografia grande, sem card */
.verbs{
  display:flex; flex-wrap:wrap; gap:.35em .85em;
  margin:1.5rem 0 1.4rem;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1.15rem,2.1vw,1.7rem); line-height:1.25;
  color:var(--green-d);
}
.verbs span:nth-child(even){color:var(--purple);}
.verbs span::after{content:"."; color:var(--green-l);}

/* ───────────── LINHA DO TEMPO — "Um dia na Thor" ───────────── */
.day{display:grid; gap:clamp(52px,7vw,104px); position:relative;}
/* o fio central só existe no desktop, onde há duas colunas para costurar */
.day::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
  translate:-50% 0;
  background:linear-gradient(var(--green-l), rgba(157,238,240,.15));
}
.step{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,70px); align-items:center; position:relative;
}
.step--rev .step__ph{order:2;}
.step__ph{
  border-radius:36px; overflow:hidden; aspect-ratio:4/3;
  background:var(--green-l); box-shadow:var(--sh-m);
}
.step__ph img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e);}
.step__ph:hover img{transform:scale(1.05);}
/* marcador no fio, alinhado ao topo do texto */
.step__tx{position:relative;}
.step__when{
  display:inline-flex; align-items:baseline; gap:.6em;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  margin-bottom:.6rem;
}
.step__when b{
  font-size:1.5rem; color:var(--green-d); letter-spacing:-.01em;
}
.step__when i{
  font-style:normal; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green);
}
.step__n{
  position:absolute; top:.15em; left:-3.4rem;
  display:grid; place-items:center; width:2.2rem; height:2.2rem;
  border-radius:50%; background:var(--green); color:#fff;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.88rem;
  box-shadow:0 0 0 6px var(--cream);
}
.step--rev .step__n{left:auto; right:-3.4rem;}
.step h3{font-size:clamp(1.35rem,2.4vw,1.95rem); margin-bottom:.4em;}
.step p:last-child{margin-bottom:0;}

/* etiquetas do que a atividade trabalha */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem;}
.chips li{
  background:#fff; border:2px solid var(--green-l); color:var(--green-dd);
  padding:.35em .95em; border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.82rem;
  letter-spacing:.05em; text-transform:uppercase;
}

/* a etapa de descanso desacelera: mais respiro, menos contraste */
.step--calm .step__ph{aspect-ratio:16/10; box-shadow:var(--sh-s);}
.step--calm .step__tx{padding-block:clamp(10px,2vw,26px);}

/* ───────────── ENRIQUECIMENTO AMBIENTAL ───────────── */
.ea{display:grid; grid-template-columns:1.15fr .85fr; gap:0; align-items:stretch;}
.ea__ph{position:relative; overflow:hidden; min-height:clamp(300px,42vw,540px);
  border-radius:38px 0 0 38px; background:var(--green-l);}
.ea__ph img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.ea__tx{
  background:#fff; border-radius:0 38px 38px 0;
  padding:clamp(30px,4vw,58px); color:var(--body);
  box-shadow:var(--sh-m); align-self:center;
}
.ea__tx h2{margin-bottom:.45em;}
/* os sentidos trabalhados, em tipografia solta */
.senses{
  display:flex; flex-wrap:wrap; gap:.3em .7em; margin:1.3rem 0;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1rem,1.5vw,1.24rem); color:var(--green-d);
}
.senses span::after{content:" ·"; color:var(--green-l);}
.senses span:last-child::after{content:"";}
.ea__tx p:last-child{margin-bottom:0;}

/* ───────────── ANIVERSÁRIO — quebra dentro da narrativa ───────────── */
.bday{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,40px);
  align-items:center;
  background:rgba(255,255,255,.14); border:2px dashed rgba(255,255,255,.5);
  border-radius:36px; padding:clamp(24px,3.4vw,44px);
}
.bday__i{
  display:grid; place-items:center; width:clamp(64px,7vw,88px); aspect-ratio:1;
  border-radius:26px; background:var(--lime); color:var(--purple); flex:none;
}
.bday__i svg{width:52%; height:52%; fill:currentColor;}
.bday h3{color:#fff; margin-bottom:.3em;}
.bday p{margin:0;}
.bday__ph{
  margin-top:clamp(26px,3.4vw,42px); border-radius:36px; overflow:hidden;
  aspect-ratio:16/9; background:var(--green-l);
  box-shadow:0 0 0 8px rgba(255,255,255,.18), var(--sh-l);
}
.bday__ph img{width:100%; height:100%; object-fit:cover;}

/* ───────────── OS QUATRO PILARES ───────────── */
.pil{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,38px);}
.pil li{position:relative; padding-top:1.4rem; border-top:4px solid var(--green-l);}
.pil b{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.82rem; letter-spacing:.18em; color:var(--green);
  margin-bottom:.5rem;
}
.pil h3{
  font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:.35em;
  color:var(--green-dd);
}
.pil p{font-size:.97rem; margin:0;}
.band--green-d .pil li,.band--purple .pil li{border-top-color:rgba(255,255,255,.35);}
.band--green-d .pil h3,.band--purple .pil h3{color:#fff;}
.band--green-d .pil b,.band--purple .pil b{color:var(--lime);}

/* ───────────── PLANOS ───────────── */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,34px);}
.plan{
  background:#fff; border-radius:34px; padding:clamp(26px,3.2vw,42px);
  box-shadow:var(--sh-m); color:var(--body);
  display:flex; flex-direction:column;
  transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.plan:hover{transform:translateY(-8px); box-shadow:var(--sh-l);}
.plan__i{
  display:grid; place-items:center; width:58px; height:58px; border-radius:19px;
  background:var(--green); color:#fff; margin-bottom:1.1rem;
}
.plan__i .ic{width:1.5rem; height:1.5rem;}
.plan h3{color:var(--green-dd); margin-bottom:.35em;}
.plan p{font-size:1rem;}
.plan .ticks{margin-top:auto; padding-top:1rem;}

/* ───────────── HORÁRIOS ───────────── */
.hours{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,30px);}
.hour{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  border-radius:28px; padding:1.7rem 1.6rem;
  transition:transform .4s var(--e), background .4s;
}
.hour:hover{transform:translateY(-6px); background:rgba(255,255,255,.2);}
.hour b{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime); margin-bottom:.3rem;
}
.hour span{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; color:#fff;
}

/* ───────────── DEPOIMENTOS DO GOOGLE ───────────── */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); align-items:start;}
.rev{
  background:#fff; border-radius:30px; padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--sh-m); color:var(--body);
  display:flex; flex-direction:column; gap:.9rem;
  transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.rev:hover{transform:translateY(-7px); box-shadow:var(--sh-l);}
.rev__st{display:flex; gap:.15rem; color:#F5A623;}
.rev__st svg{width:1.15rem; height:1.15rem; fill:currentColor;}
.rev p{margin:0; font-size:.99rem;}
.rev__who{display:flex; align-items:center; gap:.75rem; margin-top:auto; padding-top:.4rem;}
.rev__av{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--green-l); color:var(--green-dd); flex:none;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.05rem;
}
.rev__who b{display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:.99rem; color:var(--green-dd); line-height:1.2;}
.rev__who span{display:block; font-size:.84rem;}
.rev__g{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.82rem; font-weight:700; color:var(--body);
}
.rev__g svg{width:1rem; height:1rem;}
.revs__note{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-top:clamp(26px,3.4vw,40px); flex-wrap:wrap;
  font-family:'Baloo 2',sans-serif; font-weight:800; color:var(--green-dd);
}
.revs__score{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border-radius:999px; padding:.5em 1.1em; box-shadow:var(--sh-s);
}
.revs__score b{font-size:1.25rem; color:var(--green-d);}

/* ───────────── GALERIA EDITORIAL ───────────── */
/* alturas desiguais de propósito: é o que separa esta galeria da felina */
.egal{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.3vw,18px);
}
.egal figure{
  position:relative; overflow:hidden; border-radius:26px;
  background:var(--green-l); box-shadow:var(--sh-s); margin:0;
}
.egal img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e);}
.egal figure:hover img{transform:scale(1.07);}
.egal .g-w2{grid-column:span 2;}
.egal .g-h1{aspect-ratio:1/1;}
.egal .g-h2{aspect-ratio:16/10;}
.egal .g-tall{grid-row:span 2; aspect-ratio:auto;}

/* ───────────── "SERÁ QUE É PARA O MEU CÃO?" ───────────── */
.fit{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center;}
.fit__ph{border-radius:40px; overflow:hidden; aspect-ratio:4/5; background:var(--green-l);
  box-shadow:var(--sh-l);}
.fit__ph img{width:100%; height:100%; object-fit:cover;}
/* espaço reservado para os requisitos (vacinação etc.) quando a Thor definir */
.fit__req{margin-top:1.5rem;}
.fit__req:empty{display:none;}

/* ───────────── PERGUNTAS (accordion nativo) ───────────── */
.qa{max-width:900px; margin-inline:auto; display:grid; gap:.75rem;}
.qa details{
  background:#fff; border:2px solid transparent; border-radius:22px;
  box-shadow:var(--sh-s); overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.qa details[open]{border-color:var(--green-l); box-shadow:var(--sh-m);}
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.4rem;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.06rem;
  color:var(--green-dd);
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{
  content:"+"; flex:none; display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--green); color:#fff; font-size:1.25rem; line-height:1;
  transition:background .3s, rotate .35s var(--eb);
}
.qa details[open] summary::before{content:"−"; background:var(--purple); rotate:180deg;}
.qa summary:hover{color:var(--green);}
.qa__a{padding:0 1.5rem 1.4rem clamp(1.5rem,4vw,3.9rem); color:var(--body);}
.qa__a p:last-child{margin-bottom:0;}

/* ───────────── CTA FINAL SOBRE FOTO ───────────── */
.last{position:relative; overflow:hidden; border-radius:44px; isolation:isolate;
  padding:clamp(40px,6vw,86px) clamp(24px,4vw,64px); text-align:center;}
.last__ph{position:absolute; inset:0; z-index:-2;}
.last__ph img{width:100%; height:100%; object-fit:cover;}
.last::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(rgba(15,95,98,.72), rgba(50,0,110,.72));}
.last h2{color:#fff;}
.last p{color:rgba(255,255,255,.94); max-width:52ch; margin-inline:auto;}
.last .btn{margin-top:1.4rem;}
.last__micro{
  display:block; margin-top:.9rem; font-size:.9rem; font-weight:700;
  color:rgba(255,255,255,.85);
}

/* ───────────── BARRA FIXA NO CELULAR ───────────── */
/* aparece só depois do hero, e some quando o rodapé chega (não cobre conteúdo) */
.stick{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:88;
  padding:.7rem clamp(12px,4vw,20px);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.96);
  border-top:1px solid rgba(14,124,119,.16);
  box-shadow:0 -8px 26px rgba(10,60,58,.14);
  translate:0 130%; transition:translate .4s var(--e);
}
.stick.on{translate:0 0;}
.stick .btn{width:100%; padding:.95em 1.4em;}

/* ───────────── OS DOIS PÁTIOS ───────────── */
/* As duas fotos têm proporções diferentes (16:9 e 1:1). Em vez de deixar cada
   uma com a sua altura — o que desalinharia a base —, as duas dividem a mesma
   altura e o object-fit resolve o recorte. */
.yards{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(14px,1.8vw,24px);}
.yard{
  position:relative; overflow:hidden; margin:0;
  height:clamp(250px,31vw,430px);
  border-radius:32px; background:var(--green-l); box-shadow:var(--sh-m);
}
.yard img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e);}
.yard:hover img{transform:scale(1.05);}
.yard figcaption{
  position:absolute; left:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.95); color:var(--green-dd);
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:.95rem; line-height:1;
  padding:.6em 1.1em; border-radius:999px; box-shadow:var(--sh-s);
}
.yards__note{
  margin:clamp(26px,3.4vw,46px) auto 0; max-width:820px; text-align:center;
  font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1.15rem,2.2vw,1.7rem); line-height:1.25;
}
.yards__note em{font-style:normal; color:var(--lime);}

/* ───────────── BLOCO DE ARGUMENTO E CAIXA DE REQUISITOS ───────────── */
.argue,.reqbox{
  background:#fff; border-radius:28px; box-shadow:var(--sh-s);
  padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1.3rem,2.4vw,2rem);
}
.argue{border-left:6px solid var(--lime); margin-top:1.7rem;}
.argue b{
  display:block; font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:clamp(1.12rem,1.9vw,1.4rem); line-height:1.25;
  color:var(--green-dd); margin-bottom:.55em;
}
.argue p{color:var(--body);}
.argue p:last-child{margin-bottom:0;}
.reqbox{margin-top:1.1rem;}
.reqbox h3{font-size:1.1rem; margin-bottom:.85em;}
.reqbox .ticks{margin:0;}
.reqbox__ps{
  display:block; margin-top:1.05rem; padding-top:.95rem;
  border-top:1px solid rgba(14,124,119,.14);
  font-size:.91rem; line-height:1.6; color:var(--body);
}

/* ───────────── RESPONSIVO ───────────── */
@media (max-width:1080px){
  .chero__in{grid-template-columns:1fr; gap:clamp(26px,4vw,40px);}
  .facts{grid-template-columns:repeat(2,1fr);}
  .pil{grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.4vw,40px);}
  .revs{grid-template-columns:1fr;}
  .egal{grid-template-columns:repeat(2,1fr);}
  .egal .g-tall{grid-row:span 1; aspect-ratio:4/5;}
}
@media (max-width:900px){
  /* a linha do tempo vira coluna única: foto em cima, texto embaixo */
  .day::before{left:0; translate:0 0;}
  .step,.step--rev{grid-template-columns:1fr; gap:1.2rem;}
  .step--rev .step__ph{order:0;}
  .step__tx{padding-left:2.6rem;}
  .step__n,.step--rev .step__n{left:-.1rem; right:auto; top:.1em;}
  .day{padding-left:.4rem;}

  /* Empilhadas não há base para alinhar, então cada foto volta à proporção
     real — cortar a horizontal num quadrado esconderia a amplitude do pátio. */
  .yards{grid-template-columns:1fr;}
  .yard{height:auto;}
  .yard--wide{aspect-ratio:16/9;}
  .yard--sq{aspect-ratio:1/1;}

  .skew,.fit{grid-template-columns:1fr; gap:1.8rem;}
  .skew__ph,.fit__ph{max-width:520px; margin-inline:auto; width:100%;}
  .fit__ph{aspect-ratio:4/3;}

  .ea{grid-template-columns:1fr;}
  .ea__ph{border-radius:36px 36px 0 0; min-height:clamp(230px,48vw,340px);}
  .ea__tx{border-radius:0 0 36px 36px;}

  .plans,.hours{grid-template-columns:1fr;}
  .bday{grid-template-columns:1fr; text-align:center; justify-items:center;}
}
@media (max-width:640px){
  .facts{gap:16px 18px;}
  .pil{grid-template-columns:repeat(2,1fr); gap:22px;}
  .pil h3{font-size:1.28rem;}
  .egal .g-w2{grid-column:span 2;}
  .qa summary{font-size:.99rem; padding:.95rem 1.1rem;}
  .qa__a{padding:0 1.1rem 1.2rem 1.1rem;}
  /* na tela pequena a legenda disputa espaço com o botão de play — o título
     da página já diz do que é o vídeo */
  .vframe__cap{display:none;}
  .stick{display:block;}
  /* No celular quem chama é a barra fixa. O botão redondo sairia por cima do
     vídeo e repetiria o mesmo destino — some, e o "voltar ao topo" ocupa o
     canto sozinho, acima da barra. */
  .wpp{display:none;}
  .totop{right:16px; bottom:88px;}
}
@media (prefers-reduced-motion:reduce){
  .egal img,.step__ph img,.skew__ph img{transition:none;}
}