:root{
  --verde:#5BC46A; --verde-e:#3EA855; --verde-c:#E6F6E4; --verde-t:#1E6B34;
  --amarelo:#FFD44E; --amarelo-t:#7A5A00; --amarelo-c:#FFF6DC;
  --azul:#6FB4F2; --azul-c:#E5F1FD; --rosa:#FF9FC4; --rosa-c:#FDE8F0;
  --roxo:#B79BF0; --roxo-c:#F0E9FC; --laranja:#FFB068; --laranja-c:#FFEEDD;
  --tinta:#20303A; --tinta-fraca:#5E6E78; --fundo:#F4FBF5;
  --r1:34px; --r2:26px; --r3:20px;
  --sombra:0 6px 20px rgba(30,60,35,.09), 0 2px 6px rgba(30,60,35,.05);
  --sombra-g:0 20px 48px rgba(30,60,35,.16), 0 5px 14px rgba(30,60,35,.08);
  --mola:cubic-bezier(.34,1.4,.64,1);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:'Nunito',ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--tinta); background:var(--fundo); font-weight:600; line-height:1.6; overflow-x:hidden}
h1,h2,h3,h4,.ft{font-family:'Baloo 2','Nunito',system-ui,sans-serif; font-weight:800; line-height:1.12; letter-spacing:.2px}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{width:100%; max-width:1140px; margin:0 auto; padding:0 22px}
.estreito{max-width:780px}

/* ---------- revelar ao rolar ---------- */
.rev{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s var(--mola)}
.rev.on{opacity:1; transform:none}

/* ---------- botão ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(180deg,#6BD07A,#3EA855); color:#fff;
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:clamp(18px,4.2vw,23px);
  padding:20px 34px; border-radius:999px; text-decoration:none; border:0; cursor:pointer;
  box-shadow:0 8px 0 #2f8642, 0 18px 32px rgba(45,130,60,.32);
  transition:transform .16s var(--mola), box-shadow .16s ease; text-align:center}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 0 #2f8642, 0 22px 38px rgba(45,130,60,.36)}
.btn:active{transform:translateY(6px); box-shadow:0 2px 0 #2f8642, 0 6px 14px rgba(45,130,60,.3)}
.btn.am{background:linear-gradient(180deg,#FFDD72,#F5B92E); color:#6B4B00; box-shadow:0 8px 0 #c8901c, 0 18px 32px rgba(200,144,28,.32)}
.btn.am:hover{box-shadow:0 10px 0 #c8901c, 0 22px 38px rgba(200,144,28,.36)}
.btn.am:active{box-shadow:0 2px 0 #c8901c, 0 6px 14px rgba(200,144,28,.3)}
.nota{display:block; margin-top:14px; font-size:14px; font-weight:700; color:var(--tinta-fraca)}

/* ---------- celular ---------- */
/* O conteúdo interno é desenhado num tamanho fixo (262px) e depois REDUZIDO para caber
   na célula. Sem isso, num card estreito o texto de dentro estourava. */
.fone{position:relative; width:var(--fw,280px); aspect-ratio:9/19.2; margin:0 auto;
  background:#1B2830; border-radius:12%/5.6%; padding:3.5%;
  box-shadow:var(--sombra-g), 0 0 0 2px rgba(0,0,0,.05), inset 0 0 0 2px #35464f}
.fone::before{content:''; position:absolute; top:6.6%; left:50%; transform:translateX(-50%);
  width:29%; height:3.4%; background:#1B2830; border-radius:999px; z-index:6}
.tela-wrap{position:absolute; inset:3.5%; border-radius:9%/4.2%; overflow:hidden; background:#EAF7EA}
.tela{width:262px; height:559px; position:relative; overflow:hidden; background:#EAF7EA; font-size:11px;
  transform:scale(var(--k,1)); transform-origin:top left}
.cap{text-align:center; margin-top:15px; font-size:13.5px; font-weight:800; color:var(--tinta-fraca)}

/* barra de abas do app */
.abas{position:absolute; left:7px; right:7px; bottom:7px; z-index:5; display:flex;
  background:#fff; border-radius:18px; padding:6px 3px; box-shadow:0 -2px 12px rgba(20,40,20,.1)}
.abas i{flex:1; text-align:center; font-style:normal; font-size:8px; font-weight:800; color:#9aa8a0; line-height:1.5}
.abas i b{display:block; font-size:14px; font-weight:400}
.abas i.on{color:var(--verde-e)}

/* --- tela HOME --- */
.h-hero{position:relative; height:33%; background-size:cover; background-position:center 34%}
.h-hero::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.9) 88%)}
.h-txt{position:absolute; z-index:2; left:12px; top:30px; right:12px}
.h-txt .o{font-size:7.5px; font-weight:800; color:#2b7a45; letter-spacing:1px; text-transform:uppercase}
.h-txt .n{font-family:'Baloo 2',sans-serif; font-size:17px; margin:1px 0 2px}
.h-txt .s{font-size:9px; font-weight:700; color:#4a5c52}
.h-pim{position:absolute; right:10px; top:38px; z-index:3; font-size:34px}
.h-body{position:absolute; left:0; right:0; top:27%; bottom:0; padding:0 10px; z-index:2}
.moeda{display:inline-block; width:11px; height:11px; border-radius:99px; vertical-align:-1px;
  background:radial-gradient(circle at 35% 30%,#FFE896,#F3B81F); box-shadow:inset 0 0 0 1.5px #E0A200}
.h-pills{display:flex; gap:5px; margin-bottom:9px}
.h-pills div{flex:1; background:#fff; border-radius:11px; padding:6px 2px; text-align:center; box-shadow:var(--sombra)}
.h-pills b{display:block; font-family:'Baloo 2',sans-serif; font-size:12px}
.h-pills span{font-size:6.5px; font-weight:800; color:#8a978f}
.h-cont{display:flex; align-items:center; gap:8px; background:linear-gradient(135deg,#EAF9EE,#DCF2E2);
  border:1.5px solid #cbe9d2; border-radius:15px; padding:8px; box-shadow:var(--sombra); margin-bottom:9px}
.h-cont .th{width:34px; height:34px; border-radius:10px; background:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--sombra)}
.h-cont .in{flex:1; min-width:0}
.h-cont .lb{display:block; font-size:6.5px; font-weight:800; color:#2b7a45; letter-spacing:.6px}
.h-cont .tt{display:block; font-family:'Baloo 2',sans-serif; font-size:11.5px; line-height:1.2}
.h-cont .br{display:block; height:4px; background:#fff; border-radius:99px; margin-top:3px; overflow:hidden}
.h-cont .br b{display:block; height:100%; width:52%; background:var(--verde-e); border-radius:99px}
.h-cont .go{width:26px; height:26px; border-radius:99px; background:var(--verde); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:13px}
.h-sec{display:flex; justify-content:space-between; align-items:center; font-size:8.5px; font-weight:800; margin:9px 2px 6px}
.h-sec span:last-child{color:#8a978f}
.h-w{display:flex; align-items:center; gap:8px; background:#fff; border-radius:14px; padding:6px;
  box-shadow:var(--sombra); margin-bottom:6px}
.h-w .im{width:36px; height:36px; border-radius:11px; flex:0 0 auto; background-size:cover; background-position:center 62%}
.h-w .in{flex:1; min-width:0}
.h-w .nm{display:block; font-family:'Baloo 2',sans-serif; font-size:11px}
.h-w .mt{display:block; font-size:7px; font-weight:800; color:#8a978f}
.h-w .br{display:block; height:4px; background:#eef4ef; border-radius:99px; margin-top:3px; overflow:hidden}
.h-w .br b{display:block; height:100%; background:var(--verde); border-radius:99px}

/* --- tela PERCURSO --- */
.m-bg{position:absolute; inset:0; background-size:cover; background-position:center top}
.m-top{position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; gap:6px; padding:26px 9px 8px}
.m-top .v{width:26px; height:26px; border-radius:99px; background:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--sombra); font-size:13px}
.m-card{background:#fff; border-radius:12px; padding:5px 10px; box-shadow:var(--sombra); flex:1}
.m-card b{display:block; font-family:'Baloo 2',sans-serif; font-size:12px}
.m-card small{font-size:8px; color:#8a978f; font-weight:700}
.m-est{background:#fff; border-radius:99px; padding:4px 8px; font-size:9px; font-weight:800; box-shadow:var(--sombra)}
.m-tr{position:absolute; left:0; right:0; top:70px; bottom:0; z-index:3}
.m-no{position:absolute; width:44px; height:44px; border-radius:99px; border:3.5px solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  box-shadow:0 4px 0 rgba(0,0,0,.16), 0 9px 14px rgba(20,40,15,.22)}
.m-no.ok{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.9),rgba(255,255,255,0) 44%),#6CC06E}
.m-no.lk{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.9),rgba(255,255,255,0) 44%),#CBD4CF}
.m-rt{position:absolute; background:rgba(255,255,255,.96); border-radius:99px; padding:2px 8px;
  font-size:9px; font-weight:800; white-space:nowrap; box-shadow:0 3px 7px rgba(20,40,15,.18)}
.m-pr{position:absolute; left:50%; transform:translateX(-50%); bottom:9%; z-index:4; text-align:center}
.m-pr .g{position:absolute; left:50%; top:-14px; width:110px; height:110px; margin-left:-55px; border-radius:99px;
  background:radial-gradient(circle,rgba(255,236,150,.8),rgba(255,214,78,0) 66%)}
.m-pr .b{position:relative; font-size:44px; filter:drop-shadow(0 8px 8px rgba(60,40,10,.34))}
.m-pr .t{position:relative; display:inline-block; margin-top:5px; background:rgba(28,44,26,.62); color:#fff;
  border-radius:99px; padding:4px 10px; font-size:8px; font-weight:800; white-space:nowrap}

/* --- tela DESENHO --- */
.d-wrap{position:absolute; inset:0; background:linear-gradient(180deg,#CDEBFF,#EAF7EA); padding:28px 9px 9px;
  display:flex; flex-direction:column; gap:7px}
.d-tt{background:#fff; border-radius:12px; padding:6px 10px; box-shadow:var(--sombra);
  font-family:'Baloo 2',sans-serif; font-size:11.5px; text-align:center}
.d-cv{flex:1; background:#fff; border-radius:20px; box-shadow:var(--sombra); display:flex;
  align-items:center; justify-content:center; overflow:hidden}
.d-cv svg{width:84%; height:84%}
.d-pal{display:flex; gap:4px; justify-content:center}
.d-pal i{width:21px; height:21px; border-radius:99px; border:2.5px solid #fff; box-shadow:var(--sombra)}
.d-tl{display:flex; gap:4px}
.d-tl i{flex:1; height:30px; border-radius:10px; background:#fff; box-shadow:var(--sombra);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-style:normal}
.d-tl i.on{background:linear-gradient(180deg,#6BD07A,#3EA855)}
.d-ok{background:linear-gradient(180deg,#6BD07A,#3EA855); color:#fff; border-radius:13px;
  padding:9px; text-align:center; font-family:'Baloo 2',sans-serif; font-size:13px; box-shadow:0 4px 0 #2f8642}

/* --- tela ATIVIDADE --- */
.a-wrap{position:absolute; inset:0; background:linear-gradient(180deg,#CDEBFF,#EAF7EA); padding:28px 9px 9px;
  display:flex; flex-direction:column; gap:8px}
.a-bal{display:flex; align-items:center; gap:6px}
.a-bal .p{font-size:26px}
.a-bal .b{flex:1; background:#fff; border-radius:14px; padding:8px 10px; box-shadow:var(--sombra);
  font-size:11px; font-weight:800; line-height:1.3}
.a-hero{background:linear-gradient(180deg,#fff,#f6fbf7); border-radius:20px; box-shadow:var(--sombra),0 0 0 5px rgba(95,196,106,.16);
  aspect-ratio:1; width:56%; margin:2px auto; display:flex; align-items:center; justify-content:center}
.a-hero svg{width:86%; height:86%}
.a-op{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:auto}
.a-op div{background:#fff; border-radius:15px; box-shadow:var(--sombra); padding:9px 3px;
  display:flex; flex-direction:column; align-items:center; gap:3px; border:2.5px solid transparent}
.a-op div.ok{border-color:var(--verde); background:var(--verde-c)}
.a-op svg{width:100%; height:34px}
.a-op b{font-family:'Baloo 2',sans-serif; font-size:22px}
.a-op span{font-size:7.5px; font-weight:800; color:#8a978f}

/* --- tela PAIS --- */
.pa{position:absolute; inset:0; background:linear-gradient(180deg,#DFF3FF,#F4FBF5); padding:30px 11px 11px; overflow:hidden}
.pa h4{font-family:'Baloo 2',sans-serif; font-size:15px; margin-bottom:8px}
.pa-c{background:#fff; border-radius:15px; padding:9px 10px; box-shadow:var(--sombra); margin-bottom:8px}
.pa-c h5{font-family:'Baloo 2',sans-serif; font-size:11px; margin-bottom:6px}
.pa-n{display:flex; gap:5px}
.pa-n div{flex:1; background:var(--verde-c); border-radius:10px; padding:6px 2px; text-align:center}
.pa-n b{display:block; font-family:'Baloo 2',sans-serif; font-size:15px; color:var(--verde-t)}
.pa-n small{font-size:7px; font-weight:700; color:#8a978f}
.pa-b{display:flex; align-items:center; gap:5px; margin-bottom:5px; font-size:9px; font-weight:800}
.pa-b span{flex:0 0 56px; color:#8a978f}
.pa-b i{flex:1; height:7px; background:var(--verde-c); border-radius:99px; overflow:hidden; display:block}
.pa-b i b{display:block; height:100%; background:var(--verde); border-radius:99px}
.pa-t{display:inline-block; background:var(--verde-c); color:var(--verde-t); border-radius:99px;
  padding:3px 8px; font-size:8.5px; font-weight:800; margin:0 3px 3px 0}

/* --- tela: NAVEGADOR com convite de instalar --- */
.nv{position:absolute; inset:0; background:#EAF7EA}
.nv-bar{position:absolute; top:0; left:0; right:0; height:16%; background:#F2F2F7; z-index:4;
  display:flex; align-items:flex-end; padding:0 8px 6px; gap:6px}
.nv-url{flex:1; background:#fff; border-radius:8px; padding:4px 8px; font-size:8px; color:#6b7680;
  text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.1)}
.nv-in{position:absolute; top:16%; left:0; right:0; bottom:0; overflow:hidden}
.nv-hero{height:44%; background-size:cover; background-position:center 30%; position:relative}
.nv-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(234,247,234,.95))}
.nv-cv{position:absolute; left:9px; right:9px; top:26%; z-index:3}
.nv-ico{width:56px; height:56px; border-radius:17px; margin:0 auto 8px; box-shadow:var(--sombra-g)}
.nv-t{text-align:center; font-family:'Baloo 2',sans-serif; font-size:13px; margin-bottom:3px}
.nv-s{text-align:center; font-size:8.5px; font-weight:700; color:#5b6b62; line-height:1.35; margin-bottom:9px}
.nv-btn{background:linear-gradient(180deg,#6BD07A,#3EA855); color:#fff; border-radius:12px; padding:9px;
  text-align:center; font-family:'Baloo 2',sans-serif; font-size:11.5px; box-shadow:0 4px 0 #2f8642}
.nv-passo{display:flex; align-items:center; gap:7px; background:#fff; border-radius:11px; padding:7px 8px;
  box-shadow:var(--sombra); margin-top:6px}
.nv-passo b{width:20px; height:20px; border-radius:99px; background:var(--verde-c); color:var(--verde-t);
  display:flex; align-items:center; justify-content:center; font-size:9px; flex:0 0 auto}
.nv-passo span{font-size:8px; font-weight:800; line-height:1.3}

/* --- tela: FOLHA DE COMPARTILHAR do iPhone --- */
.sh{position:absolute; inset:0; background:#0e1a14}
.sh-blur{position:absolute; inset:0; background-size:cover; background-position:center 30%; filter:blur(2px) brightness(.55)}
.sh-card{position:absolute; left:5px; right:5px; bottom:5px; background:#F2F2F7; border-radius:15px;
  padding:9px 8px; box-shadow:0 -12px 34px rgba(0,0,0,.5)}
.sh-top{display:flex; align-items:center; gap:8px; background:#fff; border-radius:11px; padding:8px; margin-bottom:8px}
.sh-top img{width:30px; height:30px; border-radius:9px}
.sh-top b{display:block; font-size:9.5px; font-family:'Baloo 2',sans-serif}
.sh-top small{font-size:7.5px; color:#8a8a8e; font-weight:700}
.sh-l{background:#fff; border-radius:11px; overflow:hidden}
.sh-r{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px;
  font-size:9.5px; font-weight:700; border-bottom:1px solid #ececf0}
.sh-r:last-child{border-bottom:0}
.sh-r i{font-style:normal; font-size:13px; opacity:.75}
.sh-r.hl{background:#E9F7EC; box-shadow:inset 0 0 0 2px var(--verde); border-radius:11px; font-weight:800}
.sh-seta{position:absolute; right:14px; z-index:5; font-size:20px; animation:aponta 1.4s ease-in-out infinite}
@keyframes aponta{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}

/* --- tela: TELA DE INÍCIO do celular (o "money shot") --- */
.ios{position:absolute; inset:0; background:linear-gradient(165deg,#78C6F5,#9BA8F0 46%,#F3A0C6 100%)}
.ios::after{content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 74% 16%, rgba(255,255,255,.5), transparent 42%)}
.ios-hora{position:absolute; top:26px; left:0; right:0; text-align:center; color:#fff; z-index:3;
  font-family:'Baloo 2',sans-serif; font-size:30px; text-shadow:0 2px 8px rgba(0,0,0,.25); line-height:1}
.ios-data{position:absolute; top:58px; left:0; right:0; text-align:center; color:rgba(255,255,255,.92);
  z-index:3; font-size:8.5px; font-weight:800; text-shadow:0 1px 4px rgba(0,0,0,.25)}
.ios-grid{position:absolute; top:24%; left:0; right:0; padding:0 12px; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr); gap:13px 9px}
.ios-app{text-align:center}
.ios-app .ic{width:100%; aspect-ratio:1; border-radius:23%; display:flex; align-items:center;
  justify-content:center; font-size:17px; box-shadow:0 4px 10px rgba(0,0,0,.22)}
.ios-app .lb{display:block; font-size:6.5px; color:#fff; margin-top:4px; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ios-app.rab .ic{padding:0; overflow:hidden; box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 8px 18px rgba(0,0,0,.35);
  animation:pulsa 2.2s ease-in-out infinite}
.ios-app.rab .ic img{width:100%; height:100%; border-radius:23%}
.ios-app.rab .lb{font-weight:800}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.ios-dock{position:absolute; bottom:8px; left:7px; right:7px; z-index:3; background:rgba(255,255,255,.26);
  border-radius:19px; padding:7px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.ios-dock .ic{width:100%; aspect-ratio:1; border-radius:23%; display:flex; align-items:center;
  justify-content:center; font-size:16px; box-shadow:0 3px 8px rgba(0,0,0,.2)}
.ios-tag{position:absolute; z-index:5; background:var(--amarelo); color:var(--amarelo-t);
  border-radius:99px; padding:5px 11px; font-size:9px; font-weight:800; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.28)}

/* --- tela: MEMÓRIA --- */
.mm{position:absolute; inset:0; background:linear-gradient(180deg,#CDEBFF,#EAF7EA); padding:28px 10px 10px;
  display:flex; flex-direction:column; gap:8px}
.mm-g{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; align-content:center}
.mm-c{aspect-ratio:1; border-radius:14px; box-shadow:var(--sombra); display:flex; align-items:center;
  justify-content:center; font-size:22px; background:#fff}
.mm-c.back{background:linear-gradient(135deg,#6FB4F2,#4A8FD0); color:#fff; font-size:16px}
.mm-c.done{background:var(--verde-c); box-shadow:0 0 0 2.5px var(--verde), var(--sombra)}

/* --- tela: LIGAR OS PARES --- */
.lp{position:absolute; inset:0; background:linear-gradient(180deg,#CDEBFF,#EAF7EA); padding:28px 10px 10px;
  display:flex; flex-direction:column; gap:8px}
.lp-cols{position:relative; flex:1; display:flex; gap:34px}
.lp-svg{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible}
.lp-col{flex:1; display:flex; flex-direction:column; gap:9px; justify-content:center}
.lp-i{background:#fff; border-radius:14px; box-shadow:var(--sombra); padding:6px 4px; min-height:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; border:2.5px solid transparent}
.lp-i.ok{border-color:var(--verde); background:var(--verde-c)}
.lp-i b{font-family:'Baloo 2',sans-serif; font-size:20px}
.lp-i span{font-size:22px}
.lp-i small{font-size:7px; font-weight:800; color:#8a978f}

/* --- tela: COLEÇÃO --- */
.cl{position:absolute; inset:0; background:linear-gradient(180deg,#DFF3FF,#F4FBF5); padding:30px 10px 10px}
.cl h4{font-family:'Baloo 2',sans-serif; font-size:15px; margin-bottom:8px}
.cl-g{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.cl-i{background:#fff; border-radius:14px; padding:10px 6px; text-align:center; box-shadow:var(--sombra);
  border:2.5px solid transparent; position:relative}
.cl-i .e{font-size:24px; display:block}
.cl-i .n{display:block; font-family:'Baloo 2',sans-serif; font-size:9.5px; margin-top:2px}
.cl-i .b{display:block; margin-top:5px; border-radius:99px; padding:4px; font-size:8px; font-weight:800}
.cl-i.ready{border-color:var(--amarelo)}
.cl-i.ready .b{background:linear-gradient(180deg,#FFDD72,#F5B92E); color:#6B4B00}
.cl-i.own .b{background:var(--verde-c); color:var(--verde-t)}
.cl-i.lock{filter:grayscale(.85); opacity:.75}
.cl-i.lock .b{background:#eef2ef; color:#8a978f}
.cl-i .bar{display:block; height:5px; background:#eef2ef; border-radius:99px; margin-top:5px; overflow:hidden}
.cl-i .bar i{display:block; height:100%; background:linear-gradient(180deg,#FFDD72,#F5B92E); border-radius:99px}

/* --- escada da alfabetização --- */
.alfa{background:linear-gradient(180deg,#FFF9E8,#FFF3D4)}
.escada{display:grid; gap:14px; max-width:980px; margin:0 auto}
.deg{background:#fff; border-radius:var(--r2); box-shadow:var(--sombra); overflow:hidden;
  display:flex; align-items:center; gap:16px; padding:16px 18px; position:relative}
.deg::before{content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c,var(--verde))}
.deg .art{flex:0 0 auto; width:74px; height:74px; background:#F7FBF8; border-radius:18px;
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 2px #eaf1ec}
.deg .art svg{width:84%; height:84%}
.deg .n{flex:0 0 auto; width:30px; height:30px; border-radius:99px; background:var(--c,var(--verde)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-size:15px}
.deg .tx{flex:1; min-width:0}
.deg h3{font-size:17.5px; margin-bottom:3px}
.deg p{font-size:14px; color:var(--tinta-fraca); line-height:1.45}
.deg .qt{display:inline-block; margin-top:6px; background:var(--verde-c); color:var(--verde-t);
  border-radius:99px; padding:4px 11px; font-size:11.5px; font-weight:800}
@media (max-width:600px){
  /* no celular o texto não cabe ao lado da arte: número+arte em cima, texto embaixo */
  .deg{flex-wrap:wrap; gap:12px; padding:16px}
  .deg .n{order:1} .deg .art{order:2; width:60px; height:60px; border-radius:15px}
  .deg .tx{order:3; flex:1 1 100%}
  .deg h3{font-size:18px}
}
.alfa-total{max-width:980px; margin:28px auto 0; background:#20303A; color:#fff; border-radius:var(--r2);
  padding:24px; text-align:center; box-shadow:var(--sombra-g)}
.alfa-total b{display:block; font-family:'Baloo 2',sans-serif; font-size:clamp(30px,6.4vw,44px); color:var(--amarelo); line-height:1.05}
.alfa-total span{display:block; font-size:15.5px; font-weight:700; color:#C9D8E0; margin-top:6px}

/* --- jornada de instalação --- */
/* jornada de instalação — aqui o texto de dentro do celular precisa ser LIDO.
   Em 3 colunas no celular ficava minúsculo: empilha grande e só vira grade no computador. */
.jornada{display:grid; grid-template-columns:1fr; gap:26px; padding:6px 0 4px; max-width:420px; margin:0 auto}
.jornada>div{position:relative}
.jornada .fone{--fw:min(268px,74vw)}
.jornada .cap{font-size:13.5px; margin-top:12px; line-height:1.35}
.jn{display:inline-flex; align-items:center; gap:8px; background:var(--verde); color:#fff;
  border-radius:99px; padding:7px 16px 7px 7px; font-size:14px; font-weight:800; margin:0 auto 13px;
  line-height:1.2; max-width:100%; box-shadow:0 5px 14px rgba(45,130,60,.28)}
.jn b{width:25px; height:25px; flex:0 0 auto; border-radius:99px; background:rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-size:14px}
.jwrap{text-align:center}
@media (min-width:760px){
  .jornada{grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px}
  .jornada .fone{--fw:100%}
  .jn{font-size:13px; padding:6px 14px 6px 6px; gap:8px}
  .jn b{width:24px; height:24px; font-size:13px}
  .jornada .cap{font-size:13px}
}
@media (min-width:1000px){ .jornada{gap:32px} }

/* ---------- vitrine: a home inteira rolando sozinha ---------- */
.vitrine{background:linear-gradient(180deg,#EAF7EA,#DFF3FF)}
.vit-grid{display:grid; gap:26px; align-items:center; max-width:960px; margin:0 auto}
@media (min-width:820px){ .vit-grid{grid-template-columns:.95fr 1.05fr; gap:44px} }
.vit-lista{display:grid; gap:11px}
.vit-i{display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:var(--r3);
  padding:14px 16px; box-shadow:var(--sombra)}
.vit-i i{font-style:normal; font-size:21px; flex:0 0 auto}
.vit-i b{display:block; font-family:'Baloo 2',sans-serif; font-size:15.5px}
.vit-i span{display:block; font-size:13.5px; color:var(--tinta-fraca); line-height:1.4}
/* ---- demonstração: o dedo rola, toca um mundo, abre a trilha e desenha ---- */
.rola{will-change:transform; transition:transform 4.2s cubic-bezier(.4,0,.2,1)}
.rolando .tela::before{content:''; position:absolute; top:0; left:0; right:0; height:8%; z-index:6;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0)); pointer-events:none}
.cena{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; overflow:hidden}
.cena.on{opacity:1}
.realce{position:absolute; left:3%; right:3%; height:56px; border-radius:16px; z-index:4;
  box-shadow:0 0 0 3px var(--verde), 0 0 0 9px rgba(95,196,106,.3); opacity:0;
  transition:opacity .25s ease; pointer-events:none}
.realce.on{opacity:1}
.dedo{position:absolute; z-index:9; font-size:30px; pointer-events:none; opacity:0;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transition:left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1),
             opacity .3s ease, transform .18s ease}
.dedo.on{opacity:1}
.dedo.toca{transform:scale(.78) translateY(4px)}
.ondinha{position:absolute; z-index:8; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:99px;
  background:rgba(95,196,106,.45); pointer-events:none; opacity:0}
.ondinha.bate{animation:ondaBate .6s ease-out}
@keyframes ondaBate{0%{opacity:.9; transform:scale(.2)}100%{opacity:0; transform:scale(1.9)}}
.traco-anim{stroke-dasharray:520; stroke-dashoffset:520}
.traco-anim.desenha{transition:stroke-dashoffset 2.6s ease-in-out; stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .rola{transition:none} .dedo,.ondinha{display:none} .cena{transition:none}
}
/* blocos extras que só existem na home rolando */
.h-aprend{background:#fff; border-radius:15px; padding:9px 10px; box-shadow:var(--sombra); margin-bottom:9px}
.ha-t{font-family:'Baloo 2',sans-serif; font-size:11px; margin-bottom:6px}
.ha-c{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:7px}
.ha-c span{background:var(--verde-c); color:var(--verde-t); border-radius:99px; padding:3px 8px;
  font-size:8px; font-weight:800}
.ha-f{display:flex; align-items:center; justify-content:space-between; gap:6px;
  border-top:1.5px solid #eef2ef; padding-top:7px; font-size:7.5px; font-weight:800; color:#8a978f}
.ha-b{background:var(--azul-c); color:#1f6fb2; border-radius:99px; padding:4px 8px; flex:0 0 auto}
.h-desenhar{background:linear-gradient(180deg,#FFDD72,#F5B92E); color:#6B4B00; border-radius:14px;
  padding:11px; text-align:center; font-family:'Baloo 2',sans-serif; font-size:13px;
  box-shadow:0 4px 0 #c8901c; margin:10px 0 16px}
/* (a rolagem antiga em @keyframes foi removida: ela sobrepunha o transform do
   roteiro e travava a home no topo, fazendo o dedo tocar no lugar errado) */

/* ---------- palco do topo: 3 celulares mostrando o app por dentro ---------- */
/* leque de 3 celulares — mesma composição no celular e no computador,
   só muda o tamanho. Tudo em % pra escalar junto. */
.palco{position:relative; width:100%; height:0; padding-top:116%}
.palco > *{position:absolute}
.palco .fone{--fw:50%; left:50%; top:2%; transform:translateX(-50%); z-index:5}
.palco .lado{--fw:39%; top:16%; z-index:3}
.palco .lado.esq{left:0;  transform:rotate(-10deg)}
.palco .lado.dir{right:0; transform:rotate(10deg)}
.palco .selo-flut{z-index:8; background:#fff; border-radius:99px; padding:7px 12px;
  font-size:11px; font-weight:800; color:var(--verde-t); box-shadow:var(--sombra-g); white-space:nowrap;
  display:flex; align-items:center; gap:6px}
.palco .selo-flut i{font-style:normal; font-size:14px}
.sf1{top:8%;  left:-2%}
.sf2{top:52%; right:-3%}
.sf3{bottom:4%; left:2%}
@media (max-width:459px){
  .palco .selo-flut{font-size:9.5px; padding:6px 10px; gap:5px}
  .palco .selo-flut i{font-size:12px}
  .sf1{top:5%; left:-3%} .sf2{top:56%; right:-4%} .sf3{bottom:1%; left:0}
}
@media (min-width:820px){
  .palco{padding-top:112%}
  .palco .fone{--fw:52%} .palco .lado{--fw:41%}
  .palco .lado.esq{left:-3%} .palco .lado.dir{right:-3%}
  .palco .selo-flut{font-size:13px; padding:9px 15px; gap:7px}
  .palco .selo-flut i{font-size:16px}
}

/* faixa "o que você recebe" logo abaixo da dobra */
.recebe{background:#20303A; padding:20px 0}
/* quebra em linhas em vez de cortar no canto (antes ficava "269 atividade…") */
.recebe .lista{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.recebe .it{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.17); border-radius:99px; padding:9px 14px; color:#fff;
  font-size:12.5px; font-weight:800; line-height:1.25}
.recebe .it i{font-style:normal; font-size:15px; flex:0 0 auto}
.recebe .it.forte{background:rgba(255,212,78,.14); border-color:rgba(255,212,78,.4)}
.recebe .it.forte b{font-family:'Baloo 2',sans-serif; font-size:17px; color:var(--amarelo); margin-right:1px}
@media (min-width:620px){ .recebe .it.forte b{font-size:19px} }
@media (min-width:620px){ .recebe .it{font-size:13.5px; padding:10px 16px; gap:9px} .recebe .lista{gap:10px} }

/* ---------- topo da página ---------- */
.hero{position:relative; overflow:hidden; padding:30px 0 0;
  background:linear-gradient(180deg,#CDEBFF 0%,#DFF3FF 26%,#EAF7EA 62%,#F4FBF5 100%)}
.bolhas{position:absolute; inset:0; pointer-events:none; overflow:hidden; contain:paint}
.bolhas i{position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; display:block}
.bolhas i:nth-child(1){width:280px; height:280px; background:#8CEFAC; top:-80px; left:-90px}
.bolhas i:nth-child(2){width:240px; height:240px; background:#FFE08A; bottom:8%; right:-90px}
.bolhas i:nth-child(3){width:200px; height:200px; background:#A9D6FF; top:38%; left:52%}
.marca{display:flex; align-items:center; gap:12px; position:relative; z-index:3}
.marca img{width:50px; height:50px; border-radius:15px; box-shadow:var(--sombra)}
.marca b{font-family:'Baloo 2',sans-serif; font-size:22px}
.hgrid{position:relative; z-index:3; display:grid; gap:22px; padding:18px 0 40px; align-items:center}
.selo{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--verde-t);
  border-radius:99px; padding:8px 15px; font-size:12.5px; font-weight:800; box-shadow:var(--sombra); margin-bottom:13px}
h1{font-size:clamp(29px,7.2vw,60px); margin-bottom:13px}
.grifo{background:linear-gradient(180deg,transparent 58%,var(--amarelo) 58%,var(--amarelo) 93%,transparent 93%);
  padding:0 4px; border-radius:4px}
.lead{font-size:clamp(15.5px,3.7vw,20.5px); color:#33454f; max-width:570px; margin-bottom:20px}
.provas{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; justify-content:center}
.provas span{background:#fff; border-radius:99px; padding:8px 14px; font-size:12.5px; font-weight:800;
  color:var(--verde-t); box-shadow:var(--sombra)}
/* no celular: o celular do app entra ANTES das provas, pra aparecer na 1ª dobra */
@media (max-width:819px){
  .hgrid{gap:14px}
  .hgrid .txt{order:1} .hgrid .palco{order:2} .hgrid .provas{order:3}
  .btn{padding:17px 26px}
  .nota{margin-top:11px; font-size:13px}
}
@media (min-width:820px){
  .provas{justify-content:flex-start; grid-column:1; margin-top:-6px}
  .hgrid{grid-template-areas:'txt palco' 'provas palco'; grid-template-rows:auto auto; align-items:center}
  .hgrid .txt{grid-area:txt} .hgrid .provas{grid-area:provas} .hgrid .palco{grid-area:palco}
}

/* ---------- seções ---------- */
section{padding:clamp(58px,9vw,104px) 0}
.tit{text-align:center; max-width:760px; margin:0 auto clamp(34px,5vw,54px)}
.olho{display:inline-block; color:var(--verde-e); font-size:13px; font-weight:800;
  letter-spacing:2.2px; text-transform:uppercase; margin-bottom:12px}
h2{font-size:clamp(29px,5.6vw,46px); margin-bottom:14px}
.tit p{font-size:clamp(16px,3.5vw,19px); color:var(--tinta-fraca)}

/* dor */
.crua{background:#1B2830; color:#fff}
.crua h2{color:#fff} .crua .tit p{color:#A9BAC4} .crua .olho{color:var(--amarelo)}
.dores{display:grid; gap:13px; max-width:640px; margin:0 auto}
.dor{display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,.07);
  border-radius:var(--r3); padding:17px 19px; border:1px solid rgba(255,255,255,.12)}
.dor span{font-size:22px; flex:0 0 auto}
.dor p{font-size:16px; color:#DCE7ED}
.virada{text-align:center; margin:42px auto 0; font-family:'Baloo 2',sans-serif;
  font-size:clamp(22px,4.6vw,32px); color:#fff; max-width:660px}
.virada em{color:var(--amarelo); font-style:normal}

/* números — faixa colorida, não cartões soltos no vazio */
.faixa-num{background:linear-gradient(135deg,#3EA855,#2E8B44 55%,#2A7F9E);
  border-radius:var(--r1); padding:clamp(26px,5vw,40px) clamp(18px,4vw,34px); position:relative; overflow:hidden;
  box-shadow:var(--sombra-g)}
.faixa-num::before{content:''; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background:radial-gradient(circle at 12% 18%, #fff 0 2px, transparent 3px) 0 0/26px 26px}
.faixa-num h3{position:relative; text-align:center; color:#fff; font-size:clamp(20px,4.4vw,28px); margin-bottom:22px}
.nums{position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.num{background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.28); border-radius:var(--r2);
  padding:20px 10px; text-align:center; backdrop-filter:blur(4px)}
.num b{display:block; font-family:'Baloo 2',sans-serif; font-size:clamp(34px,7.4vw,52px); color:#fff; line-height:1}
.num span{display:block; font-size:13px; font-weight:800; color:rgba(255,255,255,.86); margin-top:3px}
.num i{display:block; font-style:normal; font-size:20px; margin-bottom:4px}
.faixa-num p{position:relative; text-align:center; color:rgba(255,255,255,.9); font-size:15px;
  font-weight:700; margin-top:20px}

/* GALERIA DE MUNDOS — o coração visual da página */
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.mundo{position:relative; border-radius:var(--r2); overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--sombra); transition:transform .2s var(--mola), box-shadow .2s ease}
.mundo:hover{transform:translateY(-5px) scale(1.015); box-shadow:var(--sombra-g)}
/* as artes são altas e o "assunto" fica no alto — cortar pelo meio dava só grama */
.mundo img{width:100%; height:100%; object-fit:cover; object-position:center 12%}
/* a trilha com as bolinhas por cima do cenário: sem isso o card era só paisagem */
.mtr{position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none}
.mno{position:absolute; z-index:3; width:26%; aspect-ratio:1; border-radius:99px; border:2.5px solid #fff;
  display:flex; align-items:center; justify-content:center; font-size:clamp(13px,3.1vw,19px);
  transform:translate(-50%,-50%); box-shadow:0 3px 0 rgba(0,0,0,.18), 0 6px 12px rgba(20,40,15,.3)}
.mno.ok{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.9),rgba(255,255,255,0) 44%),#6CC06E}
.mno.lk{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.9),rgba(255,255,255,0) 44%),#CBD4CF}
.mundo .vu{position:absolute; inset:0; z-index:4;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(8,22,13,.34) 52%,rgba(8,22,13,.88) 100%)}
.mundo .in{z-index:5}
.mundo .in{position:absolute; left:0; right:0; bottom:0; padding:12px 12px 13px; color:#fff}
.mundo .em{display:block; font-size:22px; line-height:1; margin-bottom:5px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.mundo .nm{display:block; font-family:'Baloo 2',sans-serif; font-size:15.5px; line-height:1.15;
  text-shadow:0 2px 6px rgba(0,0,0,.55)}
.mundo .ds{display:block; font-size:10.5px; font-weight:700; opacity:.94; line-height:1.35;
  margin-top:2px; text-shadow:0 1px 5px rgba(0,0,0,.6)}
.gal-nota{text-align:center; margin-top:22px; font-size:15px; font-weight:700; color:var(--tinta-fraca)}

/* telas do app — GRADE (carrossel escondia metade do conteúdo no celular) */
.telas{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 14px; padding:6px 0 4px}
.telas .fone{--fw:100%}
.telas .cap{font-size:12px; margin-top:10px; line-height:1.3}
@media (min-width:620px){ .telas{grid-template-columns:repeat(3,1fr); gap:30px 20px} }
@media (min-width:980px){ .telas{grid-template-columns:repeat(4,1fr); gap:34px 22px} .telas .cap{font-size:13.5px} }

/* passos */
.passos{display:grid; gap:16px; max-width:820px; margin:0 auto}
.passo{display:flex; gap:18px; align-items:flex-start; background:#fff; border-radius:var(--r2);
  padding:22px; box-shadow:var(--sombra)}
.passo>b{flex:0 0 auto; width:46px; height:46px; border-radius:99px; background:var(--verde-c);
  color:var(--verde-t); display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2',sans-serif; font-size:21px}
.passo h3{font-size:19px; margin-bottom:5px}
.passo p{font-size:15.5px; color:var(--tinta-fraca)}

/* diferenciais */
.difs{display:grid; gap:13px}
.dif{background:#fff; border-radius:var(--r2); padding:24px; box-shadow:var(--sombra); border-top:5px solid var(--c,var(--verde))}
.dif span{font-size:30px; display:block; margin-bottom:10px}
.dif h3{font-size:18px; margin-bottom:6px}
.dif p{font-size:14.5px; color:var(--tinta-fraca)}

/* para quem */
.pq-grid{display:grid; gap:16px; max-width:900px; margin:0 auto}
.pq{background:#fff; border-radius:var(--r2); padding:28px; box-shadow:var(--sombra)}
.pq.sim{border:3px solid var(--verde)} .pq.nao{border:3px solid #E7C9C9}
.pq h3{font-size:19px; margin-bottom:15px}
.pq li{list-style:none; display:flex; gap:10px; margin-bottom:11px; font-size:15px; color:#37474f}
.pq li b{flex:0 0 auto; color:var(--verde-e)}
.pq.nao li b{color:#C0706F}

/* oferta */
.oferta{background:linear-gradient(180deg,#EAF7EA,#DFF3FF)}
.caixa{background:#fff; border-radius:var(--r1); padding:clamp(28px,6vw,48px); box-shadow:var(--sombra-g);
  max-width:660px; margin:0 auto; text-align:center; border:4px solid var(--amarelo)}
.fita{display:inline-block; background:var(--amarelo); color:var(--amarelo-t); border-radius:99px;
  padding:8px 20px; font-size:13.5px; font-weight:800; margin-bottom:20px}
.inclui{text-align:left; max-width:430px; margin:24px auto 28px}
.inclui li{list-style:none; display:flex; gap:11px; margin-bottom:11px; font-size:15.5px; align-items:flex-start}
.inclui li b{color:var(--verde-e); flex:0 0 auto}
.inclui li span{flex:1; min-width:0}
.inclui li strong{color:var(--verde-t); font-weight:800}
.preco{margin:6px 0 4px}
.preco .de{font-size:16px; color:var(--tinta-fraca); text-decoration:line-through}
.preco .por{font-family:'Baloo 2',sans-serif; font-size:clamp(42px,9vw,64px); color:var(--verde-e); line-height:1.04}
.preco .cd{font-size:15px; color:var(--tinta-fraca); font-weight:700}
.gar{display:flex; align-items:center; gap:14px; background:var(--verde-c); border-radius:var(--r2);
  padding:18px 20px; max-width:540px; margin:26px auto 0; text-align:left}
.gar span{font-size:34px; flex:0 0 auto}
.gar b{display:block; font-family:'Baloo 2',sans-serif; font-size:16px; color:var(--verde-t)}
.gar small{font-size:13.5px; color:#3d5a45; font-weight:700}

/* faq */
.faq{max-width:790px; margin:0 auto}
details{background:#fff; border-radius:var(--r3); margin-bottom:11px; box-shadow:var(--sombra); overflow:hidden}
summary{padding:19px 22px; cursor:pointer; font-family:'Baloo 2',sans-serif; font-size:16.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; font-size:25px; color:var(--verde-e); flex:0 0 auto; transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 22px 20px; font-size:15.5px; color:var(--tinta-fraca)}

.vazio{border:3px dashed #C7D6CB; background:#fff; border-radius:var(--r2); padding:28px;
  text-align:center; color:var(--tinta-fraca); font-size:14.5px; font-weight:700}
.vazio b{display:block; font-family:'Baloo 2',sans-serif; font-size:17px; color:var(--tinta); margin-bottom:7px}

footer{background:#1B2830; color:#8FA3AE; padding:46px 0; font-size:13.5px; text-align:center}
footer b{color:#fff; font-family:'Baloo 2',sans-serif; font-size:18px; display:block; margin-bottom:10px}
footer a{color:#B8CBD6}

.barra{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px); box-shadow:0 -6px 22px rgba(30,60,35,.13);
  transform:translateY(130%); transition:transform .3s var(--mola)}
.barra.on{transform:none}
.barra .btn{width:100%; padding:16px 20px; font-size:18px; box-shadow:0 6px 0 #2f8642}
@media (min-width:820px){ .barra{display:none} }
@media (max-width:819px){ body.cb{padding-bottom:90px} }

@media (min-width:820px){
  .hgrid{grid-template-columns:1.08fr .92fr; gap:48px; padding:44px 0 76px}
  .nums{grid-template-columns:repeat(4,1fr)}
  .gal{grid-template-columns:repeat(4,1fr); gap:14px}
  .difs{grid-template-columns:repeat(3,1fr)}
  .pq-grid{grid-template-columns:1fr 1fr}
  /* no desktop as telas quebram em linhas em vez de virar carrossel largo demais */
  .telas{flex-wrap:wrap; justify-content:center; overflow:visible; padding:6px 0 16px; margin:0; gap:30px 24px}
}
@media (min-width:1100px){ .fone{--fw:300px} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important} html{scroll-behavior:auto}
  .rev{opacity:1; transform:none}
}

/* troca de idioma no topo */
.troca-idioma{position:absolute; right:22px; top:26px; z-index:9; background:#fff; color:var(--tinta);
  border-radius:99px; padding:8px 14px; font-size:12.5px; font-weight:800; text-decoration:none;
  box-shadow:var(--sombra); transition:transform .14s var(--mola)}
.troca-idioma:hover{transform:translateY(-2px)}