: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)}
/* hero no celular: "aprender a ler" numa linha só; botão centrado e com ar */
.so-cel{display:inline}
.hero .txt .btn{display:flex; justify-content:center; width:100%; max-width:420px; margin:8px auto 0}
.hero .sub2{margin-bottom:26px}
@media (min-width:760px){ .so-cel{display:none} .hero .txt .btn{display:inline-flex; width:auto; margin:8px 0 0} }

/* ---------- 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}

/* ---------- retratos de família (fotos reais) ----------
   ATENÇÃO: NÃO chamar isto de .cena — esse nome já pertence à demo animada
   (position:absolute; opacity:0) e as fotos ficam invisíveis, deixando
   buracos na página. A página era 100% print de app; estas quatro fotos
   põem a mãe e a criança dentro dela. */
.retrato{margin:0; position:relative}
.retrato img{display:block; width:100%; height:auto; max-width:100%;
  border-radius:var(--r2); box-shadow:0 18px 44px rgba(20,40,25,.18)}
.retrato figcaption{margin-top:12px; font-size:15px; font-weight:700; line-height:1.4;
  color:var(--tinta-fraca); text-align:center}
.retrato-hero{position:relative; z-index:3}
.retrato-hero img{max-height:min(62vh,540px); object-fit:cover; object-position:center 22%}
.retrato-larga{max-width:520px; margin:26px auto 38px}
/* a foto da dor vive dentro da secção escura, junto dos cartões */
.retrato-dor{max-width:420px; margin:0 auto 26px}
.retrato-dor img{box-shadow:0 20px 50px rgba(0,0,0,.42)}
.retrato-dor figcaption{color:#E8D9A8}
@media (min-width:860px){
  .crua .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:center}
  .crua .tit{grid-column:1/-1}
  .retrato-dor{margin:0; max-width:440px; justify-self:center}
  .crua .dores{margin:0}
  .crua .virada-bloco{grid-column:1/-1}
}

/* a virada: foto e frase lado a lado, o antes/depois da secção da dor */
.virada-bloco{display:grid; gap:20px; align-items:center; margin-top:30px; justify-items:center}
.virada-bloco .retrato{max-width:330px; width:100%}
.virada-txt{text-align:center; max-width:460px}
.virada-sub{margin-top:12px; font-size:15.5px; font-weight:700; color:var(--tinta-fraca); line-height:1.5}

/* oferta rápida: secção própria entre a dor e o resto da página.
   Ficava dentro do bloco escuro da dor — vender no meio da dor está errado;
   o lugar é depois da virada, em fundo claro. */
.oferta-rapida{padding:clamp(30px,5vw,48px) 0}

/* TRANSFORMAÇÃO — o desejo tem de viver fora do bloco escuro da dor,
   senão os dois se anulam. Fundo claro = capítulo novo. */
.transformacao{background:linear-gradient(180deg,#FFFFFF,#F4FBF5); padding:clamp(40px,7vw,72px) 0}
.tr-grid{display:grid; gap:26px; align-items:center; justify-items:center}
.tr-grid .retrato{max-width:320px; width:100%}
.tr-txt{text-align:center; max-width:520px}
.tr-txt h2{margin:6px 0 14px}
.tr-lead{font-size:18px; font-weight:700; color:var(--tinta); line-height:1.5}
.tr-lead b{color:var(--verde-t)}
.tr-txt p{margin-top:12px; color:var(--tinta-fraca); font-size:16px; line-height:1.6}
.tr-fecho{font-size:18px; font-weight:800; color:var(--tinta)}
.tr-fecho b{color:var(--verde-t)}
@media (min-width:820px){
  .tr-grid{grid-template-columns:.8fr 1.2fr; gap:44px; justify-items:start}
  .tr-txt{text-align:left}
}
.preco-cedo{margin:0 auto; max-width:540px; background:#fff; border:2px solid var(--verde-c);
  border-radius:var(--r2); padding:22px; display:flex; flex-direction:column; gap:14px;
  align-items:center; text-align:center; box-shadow:0 10px 30px rgba(20,60,30,.08)}
.preco-cedo .pc-txt b{display:block; font-family:'Baloo 2',sans-serif; font-size:19px; color:var(--tinta)}
.preco-cedo .pc-txt span{display:block; margin-top:5px; font-size:13.5px; font-weight:700; color:var(--tinta-fraca)}
.preco-cedo .pc-val{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:center}
.preco-cedo .pc-val s{font-size:16px; color:var(--tinta-fraca)}
.preco-cedo .pc-val strong{font-family:'Baloo 2',sans-serif; font-size:44px; line-height:1;
  color:var(--verde-e); letter-spacing:-.01em}
.preco-cedo .pc-val span{font-size:13.5px; font-weight:700; color:var(--tinta-fraca); width:100%}
.preco-cedo .btn{width:100%; max-width:340px}
@media (min-width:760px){
  .virada-bloco{grid-template-columns:.85fr 1.15fr; justify-items:start; gap:34px}
  .virada-txt{text-align:left}
  .retrato-larga{max-width:600px}
}
/* desktop: nas secções com foto larga, título e foto ficam lado a lado —
   a foto vertical sozinha no centro deixava 2.000px de secção com laterais vazias */
@media (min-width:900px){
  .sec-foto .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:28px 48px; align-items:center}
  .sec-foto .tit{text-align:left; margin:0; max-width:none}
  .sec-foto .retrato-larga{margin:0; max-width:400px; justify-self:center}
  .sec-foto .retrato-larga figcaption{text-align:left}
  .sec-foto .wrap > *:not(.tit):not(.retrato-larga){grid-column:1/-1}
}
.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}
/* segunda linha do topo (só onde existe): a prova logo abaixo da promessa,
   um degrau menor. margin-top negativo em vez de mexer no .lead — a folha é
   compartilhada com a página em português, que tem um parágrafo só. */
.lead.sub2{font-size:clamp(14.5px,3.3vw,18px); color:var(--tinta-fraca);
  margin-top:-8px; margin-bottom:22px}
.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,.hgrid .retrato-hero{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,.hgrid .retrato-hero{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}
/* .gal-3: os mesmos 16 mundos em 3 colunas no telemóvel — a galeria ocupava
   2,5 ecrãs e empurrava o preço para baixo. Só a página ES usa. */
.gal-3{grid-template-columns:repeat(3,1fr); gap:8px}
.gal-3 .nm{font-size:12px}
.gal-3 .ds{display:none}
.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}
/* o preço é a informação que a mãe procura na página inteira — tem de ser
   a maior coisa do bloco, não competir com o título da seção */
.preco .por{font-family:'Baloo 2',sans-serif; font-size:clamp(54px,13vw,88px);
  font-weight:800; color:var(--verde-e); line-height:1; letter-spacing:-.01em}
.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 */
/* ==========================================================================
   BLOCOS NOVOS — histórias, compartilhar e controle dos pais
   Mockups desenhados em HTML/CSS (nada de print), então escalam junto com
   o resto e continuam nítidos em qualquer tela.
   ========================================================================== */

/* ---- layout de duas colunas: texto de um lado, celular do outro ---- */
.duo{display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,56px); align-items:center}
@media(min-width:900px){
  .duo{grid-template-columns:1.05fr .95fr}
  .duo.inv .duo-txt{order:2}
}
.duo-txt h3{font-size:clamp(24px,4.4vw,34px); margin-bottom:14px}
.duo-txt > p{font-size:clamp(16px,3.3vw,18.5px); color:var(--tinta-fraca); margin-bottom:22px}
.lista-b{display:flex; flex-direction:column; gap:14px}
.lista-b li{display:flex; gap:13px; align-items:flex-start; list-style:none}
.lista-b .ic{flex:0 0 auto; width:38px; height:38px; border-radius:13px; display:grid;
  place-items:center; font-size:19px; background:var(--verde-c)}
.lista-b .tx b{display:block; font-family:'Baloo 2',sans-serif; font-size:17px; margin-bottom:2px}
.lista-b .tx span{display:block; font-size:14.5px; color:var(--tinta-fraca); line-height:1.5}
/* dois celulares lado a lado precisam caber DENTRO do .wrap (que já tem 22px
   de padding de cada lado). Em 375px sobram 331px: 2 telas + 14 de intervalo
   não podem passar disso, senão o grid estica e a página ganha rolagem lateral. */
.duo > *{min-width:0}
/* controle dos pais: 4 chips em vez de parágrafos — mãe não lê texto corrido */
.pais-chips{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:12px}
.pais-chips li{display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:12px;
  background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 4px 16px rgba(20,60,30,.07)}
.pais-chips .ic{grid-row:1/3; width:40px; height:40px; border-radius:13px; background:var(--verde-c);
  display:grid; place-items:center; font-size:20px}
.pais-chips b{font-family:'Baloo 2',sans-serif; font-size:17px; line-height:1.2; color:var(--tinta)}
.pais-chips span:not(.ic){font-size:14.5px; color:var(--tinta-fraca); line-height:1.45; margin-top:2px}
@media (min-width:520px){ .pais-chips{grid-template-columns:1fr 1fr} }
.duo-fone{display:flex; gap:14px; justify-content:center; align-items:flex-start}
.duo-fone .fone{--fw:min(40vw,232px)}
@media(min-width:520px){ .duo-fone{gap:18px} .duo-fone .fone{--fw:min(33vw,240px)} }
@media(min-width:900px){ .duo-fone .fone{--fw:min(21vw,246px)} }

/* ---- faixa de números pequenos ---- */
.mini-nums{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.mini-nums span{background:#fff; border:2px solid var(--verde-c); border-radius:999px;
  padding:9px 16px; font-size:14px; font-weight:800; box-shadow:var(--sombra)}
.mini-nums b{font-family:'Baloo 2',sans-serif; color:var(--verde-e); font-size:17px; margin-right:5px}

/* ---- mockup: lista de histórias ---- */
.h-top{padding:16px 12px 8px}
.h-top b{font-family:'Baloo 2',sans-serif; font-size:19px; display:block}
.h-top small{display:block; color:#6B7B84; font-size:9.5px; line-height:1.45; margin-top:3px}
.h-grade{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:4px 12px}
.h-cd{background:#fff; border-radius:16px; padding:10px 7px 11px; text-align:center;
  box-shadow:0 3px 10px rgba(30,60,35,.09)}
.h-cd .e{font-size:30px; line-height:1.15}
.h-cd .n{font-size:10.5px; font-weight:800; line-height:1.25; margin-top:4px}
.h-cd .m{font-size:8.5px; color:#7C8B93; margin-top:3px}

/* ---- mockup: leitor com a palavra acesa ---- */
.l-top{display:flex; align-items:center; gap:8px; padding:13px 12px 6px}
.l-top .v{width:26px; height:26px; border-radius:9px; background:#fff; display:grid; place-items:center;
  font-size:14px; box-shadow:0 2px 6px rgba(0,0,0,.1)}
.l-top b{flex:1; text-align:center; font-family:'Baloo 2',sans-serif; font-size:12px}
.l-pontos{display:flex; justify-content:center; gap:4px; margin:3px 0 8px}
.l-pontos i{width:6px; height:6px; border-radius:99px; background:#DCE6DE}
.l-pontos i.ok{background:#A9D8B4} .l-pontos i.on{background:var(--verde); width:15px}
.l-art{width:118px; height:118px; margin:0 auto 9px; background:#fff; border-radius:20px;
  display:grid; place-items:center; font-size:56px; box-shadow:0 4px 14px rgba(30,60,35,.12)}
.l-txt{padding:0 15px; font-size:11px; font-weight:700; line-height:1.72; color:#20303A}
.l-txt em{font-style:normal; background:var(--verde); color:#fff; border-radius:6px; padding:1px 4px}
.l-nav{display:flex; gap:8px; justify-content:center; padding:12px 14px 0}
.l-nav span{height:38px; border-radius:14px; background:#fff; display:grid; place-items:center;
  font-size:14px; box-shadow:0 3px 9px rgba(30,60,35,.1); width:44px}
.l-nav .eu{flex:1; font-size:10.5px; font-weight:800; color:#6B3FB0;
  background:#F3ECFF; border:2px solid #B79BF0; gap:5px; display:flex; align-items:center; justify-content:center; width:auto}
.l-perg{margin:12px 13px 0; background:#FFF6E6; border:2px solid #FFD9A0; border-radius:15px; padding:10px 12px}
.l-perg b{display:block; font-size:7.6px; letter-spacing:.5px; color:#9A6B10; text-transform:uppercase; margin-bottom:3px}
.l-perg p{font-size:10.5px; font-weight:800; line-height:1.4}

/* ---- mockup: conversa com o desenho enviado ---- */
.zap{background:#DCE9DC; height:100%; padding:12px 10px; display:flex; flex-direction:column; gap:9px}
.zap-top{display:flex; align-items:center; gap:8px; background:#fff; border-radius:14px; padding:8px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.07)}
.zap-top .av{width:30px; height:30px; border-radius:99px; background:var(--rosa-c); display:grid;
  place-items:center; font-size:16px}
.zap-top b{font-size:11px; font-family:'Baloo 2',sans-serif}
.zap-top small{display:block; font-size:8.5px; color:#7C8B93}
.bolha{max-width:82%; background:#fff; border-radius:14px; padding:7px; box-shadow:0 2px 7px rgba(0,0,0,.09)}
.bolha.eu{align-self:flex-end; background:#DCF8C6}
.bolha .hr{font-size:8px; color:#7C8B93; text-align:right; margin-top:3px}
.bolha p{font-size:10.5px; font-weight:700; padding:2px 4px 0}
/* a moldura que o app gera no desenho compartilhado */
.moldura{background:#FFF6E6; border-radius:11px; padding:9px 9px 11px; text-align:center}
.moldura .art{background:#fff; border-radius:9px; height:118px; display:grid; place-items:center;
  font-size:60px; box-shadow:0 3px 9px rgba(120,95,55,.18)}
.moldura .t1{font-family:'Baloo 2',sans-serif; font-size:12px; margin-top:7px}
.moldura .t2{font-size:9.5px; color:#6B7B6E; font-weight:700}
.moldura .t3{font-size:7.6px; color:#9BAA9E; font-weight:800; margin-top:2px}

/* ---- mockup: painel dos pais ---- */
.pai-top{padding:15px 13px 6px}
.pai-top b{font-family:'Baloo 2',sans-serif; font-size:16px}
.cx-pai{background:#fff; border-radius:17px; padding:12px; margin:9px 12px; box-shadow:0 3px 11px rgba(30,60,35,.09)}
.cx-pai h5{font-family:'Baloo 2',sans-serif; font-size:11.5px; margin-bottom:9px}
.pai-lin{display:flex; flex-wrap:wrap; gap:6px}
.pai-lin span{flex:1 1 40px; text-align:center; background:#F4FBF5; border:2px solid transparent;
  border-radius:11px; padding:8px 3px; font-size:9.5px; font-weight:800}
.pai-lin span.on{border-color:var(--verde); background:var(--verde-c); color:var(--verde-t)}
.pai-lin span.full{flex:1 1 100%}
.pai-nota{font-size:8.6px; color:#7C8B93; margin-top:7px; line-height:1.45}
.pai-barra{height:7px; border-radius:99px; background:#EAF1EB; margin-top:6px; overflow:hidden}
.pai-barra i{display:block; height:100%; border-radius:99px; background:var(--verde)}

/* ---- selo de idiomas ---- */
.idiomas{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px}
.idiomas span{background:#fff; border-radius:999px; padding:10px 17px; font-size:14px; font-weight:800;
  box-shadow:var(--sombra); display:flex; align-items:center; gap:8px}
.idiomas i{font-style:normal; font-size:19px}


/* ---- bloco "o app cresce" ---- */
.cresce-mock{position:relative}
.barra-upd{position:absolute; left:8px; right:8px; bottom:8px; z-index:6;
  background:linear-gradient(180deg,#6BD07A,#46B45C); color:#fff; border-radius:16px;
  padding:11px 12px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:10.5px; font-weight:800; box-shadow:0 6px 18px rgba(40,120,60,.34)}
.barra-upd i{font-style:normal; font-size:13px}
.novidades{display:grid; grid-template-columns:1fr; gap:10px; margin-top:22px}
@media(min-width:640px){ .novidades{grid-template-columns:1fr 1fr} }
.novidades li{list-style:none; display:flex; gap:11px; align-items:center; background:#fff;
  border-radius:var(--r3); padding:13px 15px; box-shadow:var(--sombra); font-size:14.5px; font-weight:700}
.novidades li b{font-family:'Baloo 2',sans-serif; font-size:16px; display:block; margin-bottom:1px}
.novidades .e{font-size:22px; flex:0 0 auto}
.selo-vital{display:inline-flex; align-items:center; gap:10px; background:var(--amarelo-c);
  border:3px solid var(--amarelo); border-radius:999px; padding:13px 22px; margin-top:26px;
  font-size:16px; font-weight:800; color:var(--amarelo-t); box-shadow:var(--sombra)}
.selo-vital span:first-child{font-size:22px}


/* ==========================================================================
   OFERTA E GARANTIA — versão forte
   ========================================================================== */
.caixa{position:relative; overflow:hidden}
.caixa::before{content:''; position:absolute; inset:-40% -10% auto; height:60%;
  background:radial-gradient(60% 100% at 50% 0%, rgba(91,196,106,.13), transparent 70%); pointer-events:none}

/* separadores dentro da lista */
.inclui{max-width:470px}
.inclui li{margin-bottom:0; padding:11px 0; border-bottom:1px solid #EDF4EE; align-items:flex-start}
.inclui li:last-child{border-bottom:0}
.inclui li b{width:24px; height:24px; border-radius:99px; background:var(--verde-c); color:var(--verde-t);
  display:grid; place-items:center; font-size:13px; margin-top:1px}
.inclui .val{display:block; font-size:12.5px; font-weight:800; color:var(--verde-e); margin-top:2px}

/* preço */
.selo-lanc{display:inline-flex; align-items:center; gap:8px; background:#FFEDD8; color:#9A4B10;
  border:2px solid #FFC98A; border-radius:99px; padding:9px 16px; font-size:13.5px; font-weight:800;
  margin:6px 0 14px}
.preco .de{font-size:17px}
.preco .por{margin:2px 0}
.preco .por small{font-size:.32em; font-weight:800; color:var(--tinta-fraca); letter-spacing:.5px}
.eco{display:inline-block; background:var(--verde-c); color:var(--verde-t); border-radius:99px;
  padding:7px 15px; font-size:14px; font-weight:800; margin-top:10px}
/* selo de atualizações: frase longa, então caixa arredondada de várias linhas
   em vez da pílula .eco (que só fica bem numa linha) */
.att{display:block; max-width:430px; margin:12px auto 0; background:var(--verde-c);
  color:var(--verde-t); border-radius:16px; padding:11px 16px; font-size:14px;
  font-weight:800; line-height:1.45}
/* ---------- contador da promoção ----------
   Nasce com [hidden]: se o JS não rodar, ou a data já passou, some inteiro em
   vez de mostrar 00:00:00 — contador zerado passa a ideia de página abandonada. */
.contador{margin:16px 0 4px; background:#FFF6E9; border:2px solid #FFD9A6;
  border-radius:20px; padding:14px 12px 12px}
.ct-rot{display:block; font-size:13px; font-weight:800; color:#9A4B10;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:9px}
.ct-nums{display:flex; justify-content:center; gap:8px}
.ct-nums span{background:#fff; border-radius:12px; padding:8px 0 6px; min-width:62px;
  box-shadow:0 1px 3px rgba(120,80,20,.13)}
.ct-nums b{display:block; font-size:26px; line-height:1; color:#7A3A06;
  font-variant-numeric:tabular-nums}   /* tabular: o número não dança a cada segundo */
.ct-nums i{display:block; font-style:normal; font-size:11px; font-weight:800;
  color:#B07A3C; margin-top:4px}
.ct-fim{display:block; font-size:12.5px; font-weight:700; color:#9A4B10; margin-top:10px}
.ct-fim b{color:#7A3A06}
@media (max-width:360px){ .ct-nums{gap:6px} .ct-nums span{min-width:54px} .ct-nums b{font-size:23px} }

/* "(com juros)" tem de aparecer, mas sem competir com o valor da parcela */
.preco .cd small{font-size:.82em; font-weight:700; opacity:.72}
.preco .cd b{color:var(--verde-t)}
.aviso-sobe{font-size:13.5px; color:var(--tinta-fraca); font-weight:700; margin-top:12px; line-height:1.5}
.aviso-sobe b{color:#9A4B10}

/* pagamento */
/* selo da processadora, logo abaixo do botão de compra */
.processa{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px;
  margin-top:14px; color:var(--tinta-fraca)}
.processa span{font-size:13px; font-weight:700}
.processa svg{height:17px; width:auto; display:block; color:#062E26; opacity:.9}
.pagto{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:16px}
.pagto span{background:#F4FBF5; border-radius:99px; padding:8px 14px; font-size:12.5px; font-weight:800;
  color:var(--tinta-fraca)}

/* garantia — bloco grande */
.garantia{background:linear-gradient(180deg,#FFFDF5,#FFF6E0); border:3px solid var(--amarelo);
  border-radius:var(--r1); padding:clamp(26px,5vw,40px); max-width:640px; margin:30px auto 0;
  text-align:center; box-shadow:var(--sombra)}
.garantia .escudo{font-size:54px; line-height:1; display:block; margin-bottom:6px}
.garantia h3{font-size:clamp(23px,4.6vw,31px); color:var(--amarelo-t); margin-bottom:12px}
.garantia p{font-size:clamp(15.5px,3.2vw,17.5px); line-height:1.65; color:#6B5518; margin-bottom:14px}
.garantia p:last-of-type{margin-bottom:0}
.garantia .forte{font-weight:800; color:#8A5A00}
.gar-passos{display:grid; grid-template-columns:1fr; gap:10px; margin:18px 0 16px; text-align:left}
@media(min-width:620px){ .gar-passos{grid-template-columns:repeat(3,1fr)} }
.gar-passos li{list-style:none; background:#fff; border-radius:var(--r3); padding:13px 15px;
  font-size:14px; font-weight:700; color:#5E4A16; box-shadow:0 3px 10px rgba(120,90,20,.08)}
.gar-passos b{display:block; font-family:'Baloo 2',sans-serif; font-size:15px; color:var(--amarelo-t); margin-bottom:2px}
.gar-selo{display:inline-block; background:var(--amarelo); color:#5E4200; border-radius:99px;
  padding:11px 22px; font-size:16px; font-weight:800; margin-top:4px}


/* ---- selo de garantia (desenhado, não é selo de terceiro) ---- */
.selo-gar{width:clamp(150px,34vw,190px); height:auto; display:block; margin:0 auto 6px;
  filter:drop-shadow(0 8px 18px rgba(150,110,20,.24))}
.selo-gar .anel{fill:none; stroke:#fff; stroke-width:2.4; stroke-dasharray:5 6; opacity:.85}
.selo-gar .txt{font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; fill:#6B4A00;
  font-size:13.2px; letter-spacing:2.6px}
.selo-gar .num{font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; fill:#8A5A00;
  font-size:62px; text-anchor:middle}
.selo-gar .dias{font-family:'Baloo 2','Nunito',sans-serif; font-weight:800; fill:#8A5A00;
  font-size:19px; text-anchor:middle; letter-spacing:3px}
.selo-gar .risco{stroke:#E9B93A; stroke-width:2.2; stroke-linecap:round}
.garantia .escudo{display:none}

/* rabisca-vendas v56-20260920 */

/* ---------- canal de suporte (as três páginas de venda) ---------- */
.suporte{display:flex; gap:16px; align-items:flex-start; background:#fff;
         border:2px solid var(--linha); border-radius:var(--r1);
         padding:20px 22px; margin:18px auto 0; max-width:760px}
.suporte .sup-ic{font-size:30px; line-height:1; flex:0 0 auto}
.suporte b{font-family:'Baloo 2',sans-serif; font-size:19px; display:block}
.suporte p{margin:6px 0 0; font-size:14.5px; color:var(--fraca); line-height:1.5}
.sup-btn{display:inline-flex; align-items:center; gap:8px; margin-top:13px;
         background:#25D366; color:#fff; font-weight:800; font-size:14.5px;
         text-decoration:none; padding:11px 18px; border-radius:99px}
.sup-btn:hover{background:#1FB959}
@media(max-width:560px){
  .suporte{flex-direction:column; gap:10px; padding:18px}
  .sup-btn{font-size:13.5px; padding:11px 15px; text-align:center}
}

/* item destacado da lista da oferta (o suporte) */
/* a caixa sangra 12px para os lados para que o TEXTO continue alinhado com
   o dos outros itens — sem isto o item destacado fica deslocado da coluna */
.inclui li.li-dest{background:#EAF7EC; border:1.5px solid #CBE6D1; border-radius:14px;
                   padding:10px 12px; margin:4px -12px}
.inclui li.li-dest .val{margin-top:1px}
.inclui li.li-dest b{background:#25D366; color:#fff; border-color:#25D366}
.inclui li.li-dest strong{color:var(--verde-escuro, #1E6B34)}
/* na lista o <b> é a bolinha do ✓ (24px, redonda, com fundo). Para grifar
   uma palavra DENTRO do texto usa-se <i>, que não tem estilo aqui — senão a
   palavra vira uma bola verde por cima da frase. */
.inclui .val i{font-style:normal; font-weight:900; color:var(--verde-t)}

/* ---------- depoimentos (prints do WhatsApp) ---------- */
.depos{background:linear-gradient(180deg,#FFFDF4,var(--fundo,#F4FBF5))}
.dep-grade{display:grid; gap:18px; grid-template-columns:1fr; max-width:1040px; margin:0 auto}
@media(min-width:820px){.dep-grade{grid-template-columns:repeat(3,1fr); gap:20px}}
.dep{margin:0; background:#fff; border-radius:22px; padding:18px 18px 14px;
     box-shadow:0 10px 30px rgba(20,60,30,.09); display:flex; flex-direction:column}
.dep blockquote{margin:0 0 14px; font-family:'Baloo 2',sans-serif; font-size:17.5px;
                line-height:1.32; color:var(--tinta,#20303A); text-wrap:balance}
.dep blockquote b{color:var(--verde-t,#1E6B34)}
.dep img{width:100%; height:auto; display:block; border-radius:14px;
         border:1px solid var(--linha,#E3EAE5)}
.dep figcaption{margin-top:11px; font-size:12.5px; font-weight:800; color:var(--fraca,#5E6E78);
                letter-spacing:.02em}
@media(max-width:560px){
  .dep{padding:15px 15px 12px; border-radius:18px}
  .dep blockquote{font-size:16px}
}