/* A landing nova do FluxoHealth, quarta versão (29/10/2026), no molde do template Accretion do Framer (accretion.framer.ai),
   refeita no nosso código: o topo claro com o sistema grande, um horizonte iluminado que abre a faixa escura (cartões em
   grade, quatro recursos, um dia na clínica e o que vem junto), outro horizonte que volta ao claro (áreas, planos,
   dúvidas) e o rodapé com a marca grande. No lugar do preto e do laranja dele, o azul-noite e o degradê da logo; a barra
   de cima fica clara (a escura flutuante e o botão laranja o Diego chama de cara de IA). Os títulos das seções ficam à
   esquerda. As versões anteriores estão em docs/landing-nova/v1, v2 e v3. */
:root{
  --tinta:rgb(var(--k1)); --apoio:rgb(var(--k17)); --suave:rgb(var(--k18)); --linha:rgb(var(--k19)); --linha-2:rgb(var(--k20)); --gelo:rgb(var(--k21)); --gelo-2:rgb(var(--k22));
  --azul:rgb(var(--k3)); --azul-esc:rgb(var(--k23)); --azul-gelo:rgb(var(--k24)); --azul-txt:rgb(var(--k25));
  --g-marca:linear-gradient(135deg,rgb(var(--k4)) 0%,rgb(var(--k5)) 100%);
  --ok:#12805C; --ok-gelo:#E3F4EC; --alerta:#A85A07; --alerta-gelo:#FDF1DD; --ruim:#C8312F; --ruim-gelo:#FCE9E8;
  --odonto:rgb(var(--k3)); --odonto-gelo:rgb(var(--k24)); --vet:#0F766E; --vet-gelo:#E3F6F2; --nutri:#C2541A; --nutri-gelo:#FDEFE4;
  /* a faixa escura: azul-noite, não preto */
  --noite:rgb(var(--k11)); --noite-2:rgb(var(--k26)); --noite-3:rgb(var(--k27)); --noite-linha:rgb(var(--k0) / .13); --noite-tx:rgb(var(--k28)); --noite-apoio:rgb(var(--k29));
  --fonte:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --papel:rgb(var(--k30));
  --larg:1200px; --entra:cubic-bezier(.22, 1, .36, 1);
  --sombra:0 1px 2px rgb(var(--k1) / .04), 0 8px 24px -12px rgb(var(--k1) / .12);
  --sombra-g:0 2px 6px rgb(var(--k1) / .04), 0 40px 80px -36px rgb(var(--k2) / .35);
}
/* as cores de cada área (30/10/2026): todo azul da página é uma variável --kN ("r g b"); a Vet gira para o verde-água e a
   Nutrição para o laranja, com a mesma claridade. Gerado por paletas.cjs a partir dos azuis da Odonto. */
:root{--k0:148 178 230;--k1:11 22 38;--k2:16 60 140;--k3:26 86 214;--k4:26 107 255;--k5:19 181 227;--k6:143 208 255;--k7:56 168 245;--k8:94 194 255;--k9:6 18 52;--k10:3 10 30;--k11:6 13 28;--k12:220 238 255;--k13:11 22 40;--k14:8 24 64;--k15:6 14 32;--k16:230 246 255;--k17:90 106 126;--k18:138 152 170;--k19:230 235 241;--k20:213 221 231;--k21:245 248 252;--k22:238 243 249;--k23:21 70 176;--k24:234 241 255;--k25:23 72 180;--k26:12 23 48;--k27:19 33 63;--k28:232 238 248;--k29:147 163 189;--k30:247 249 252;--k31:185 197 211;--k32:66 82 102;--k33:251 252 254;--k34:227 232 239;--k35:74 90 110;--k36:252 253 254;--k37:124 196 255;--k38:13 24 52;--k39:10 19 41;--k40:56 196 245;--k41:11 63 184;--k42:20 82 216;--k43:14 63 174;--k44:201 212 230;--k45:18 31 61;--k46:45 91 216;--k47:8 16 31;--k48:28 42 72;--k49:17 29 57;--k50:242 250 255;--k51:47 123 255;--k52:15 163 207;--k53:26 91 224;--k54:20 38 77;--k55:13 26 56;--k56:154 167 184;--k57:29 43 74;--k58:14 26 54;--k59:95 112 144;--k60:21 38 75;--k61:14 24 50;--k62:10 18 40;--k63:15 29 63;--k64:18 48 122;--k65:26 79 214;--k66:26 123 255;--k67:26 44 70;--k68:227 234 244;--k69:11 21 40;--k70:185 198 218;--k71:238 244 255;--k72:61 123 255;--k73:11 19 36;--k74:24 36 63;--k75:11 20 40;--k76:10 20 48;--k77:27 40 70;--k78:14 24 48;--k79:26 38 68;--k80:13 22 48;--k81:10 19 40;--k82:11 23 54;--acc-1:rgb(var(--k6));--acc-2:rgb(var(--k8));--acc-3:rgb(var(--k7));--acc-4:rgb(var(--k4))}
html[data-area="vet"]{--k0:127 206 199;--k1:11 38 35;--k2:29 108 101;--k3:46 165 157;--k4:35 213 197;--k5:42 174 135;--k6:118 233 210;--k7:53 212 180;--k8:81 227 195;--k9:6 52 50;--k10:3 30 29;--k11:6 28 27;--k12:220 255 249;--k13:11 40 37;--k14:8 64 61;--k15:6 32 30;--k16:230 255 249;--k17:84 106 103;--k18:122 149 146;--k19:230 241 240;--k20:213 231 229;--k21:245 252 251;--k22:238 249 248;--k23:38 136 129;--k24:234 255 253;--k25:40 139 133;--k26:12 48 46;--k27:19 63 60;--k28:232 248 246;--k29:129 166 163;--k30:247 252 251;--k31:161 188 184;--k32:63 85 82;--k33:251 254 254;--k34:227 239 238;--k35:70 92 89;--k36:252 254 254;--k37:103 230 207;--k38:13 52 50;--k39:10 41 39;--k40:53 212 168;--k41:31 141 134;--k42:42 166 158;--k43:32 133 127;--k44:201 230 227;--k45:18 61 58;--k46:58 172 167;--k47:8 31 29;--k48:28 72 69;--k49:17 57 55;--k50:242 255 252;--k51:45 221 205;--k52:37 159 123;--k53:47 173 164;--k54:20 77 73;--k55:13 56 53;--k56:135 162 159;--k57:29 74 71;--k58:14 54 52;--k59:90 121 118;--k60:21 75 71;--k61:14 50 48;--k62:10 40 39;--k63:15 63 60;--k64:18 122 117;--k65:46 165 159;--k66:35 213 191;--k67:26 70 65;--k68:227 244 242;--k69:11 40 38;--k70:160 195 191;--k71:238 255 254;--k72:56 223 211;--k73:11 36 34;--k74:24 63 61;--k75:11 40 38;--k76:10 48 46;--k77:27 70 67;--k78:14 48 46;--k79:26 68 66;--k80:13 48 47;--k81:10 40 38;--k82:11 54 52}
html[data-area="nutri"]{--k0:222 172 137;--k1:38 22 11;--k2:127 65 21;--k3:194 102 34;--k4:243 114 24;--k5:206 71 28;--k6:248 168 130;--k7:234 109 52;--k8:246 134 85;--k9:52 27 6;--k10:30 15 3;--k11:28 15 6;--k12:255 232 220;--k13:40 23 11;--k14:64 33 8;--k15:32 17 6;--k16:255 237 230;--k17:118 99 87;--k18:162 143 131;--k19:241 234 230;--k20:231 220 213;--k21:252 248 245;--k22:249 242 238;--k23:160 84 27;--k24:255 243 234;--k25:164 87 29;--k26:48 28 12;--k27:63 38 19;--k28:248 238 232;--k29:180 155 139;--k30:252 249 247;--k31:202 184 174;--k32:95 76 64;--k33:254 252 251;--k34:239 232 227;--k35:103 84 72;--k36:254 253 252;--k37:248 158 113;--k38:52 30 13;--k39:41 24 10;--k40:234 99 52;--k41:167 83 19;--k42:196 100 28;--k43:158 80 21;--k44:230 213 201;--k45:61 37 18;--k46:201 116 47;--k47:31 18 8;--k48:72 47 28;--k49:57 34 17;--k50:255 246 242;--k51:244 125 43;--k52:188 64 23;--k53:203 106 34;--k54:77 44 20;--k55:56 32 13;--k56:175 157 146;--k57:74 48 29;--k58:54 31 14;--k59:134 110 93;--k60:75 44 21;--k61:50 30 14;--k62:40 23 10;--k63:63 36 15;--k64:122 64 18;--k65:194 104 34;--k66:243 108 24;--k67:70 43 26;--k68:244 234 227;--k69:40 23 11;--k70:209 188 174;--k71:255 245 238;--k72:245 136 56;--k73:36 22 11;--k74:63 41 24;--k75:40 23 11;--k76:48 27 10;--k77:70 46 27;--k78:48 29 14;--k79:68 44 26;--k80:48 29 13;--k81:40 23 10;--k82:54 30 11}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--tinta);font:400 16px/1.6 var(--fonte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,h4,h5,p{margin:0}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:8px}
.caixa{width:min(var(--larg), 100% - 48px);margin-inline:auto}

.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;transition:background-color .2s,border-color .2s,box-shadow .2s}
.bt svg{width:17px;height:17px;transition:transform .25s var(--entra)}
.bt:hover svg{transform:translateX(3px)}
.bt-p{background:var(--azul);color:#fff;box-shadow:0 1px 0 rgb(255 255 255 / .2) inset, 0 8px 20px -10px rgb(var(--k3) / .7)}
.bt-p:hover{background:var(--azul-esc)}
.bt-s{background:#fff;color:var(--tinta);border:1px solid var(--linha-2)}
.bt-s:hover{border-color:rgb(var(--k31));background:var(--gelo)}
.bt-pq{height:40px;padding:0 16px;font-size:14.5px;border-radius:10px}
.ln-az{color:var(--azul-txt);font-weight:600}
.ln-az:hover{text-decoration:underline}

.topo{position:sticky;top:0;z-index:50;background:rgb(255 255 255 / .9);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.topo.rolou{border-bottom-color:var(--linha)}
.topo .caixa{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;letter-spacing:-.035em;flex:none}
.logo img{width:28px;height:28px}
.logo em{font-style:normal;font-weight:500;background:var(--g-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:2px}
.menu a{padding:8px 12px;border-radius:9px;font-size:15px;font-weight:500;color:rgb(var(--k32))}
.menu a:hover{color:var(--tinta);background:var(--gelo)}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.topo-dir .ln{padding:8px 12px;font-size:15px;font-weight:500;color:rgb(var(--k32))}
.topo-dir .ln:hover{color:var(--tinta)}

/* ---------- o topo da página: claro, com o brilho atrás do título e o sistema grande ---------- */
.ini{position:relative;padding:84px 0 0;text-align:center;overflow:hidden;isolation:isolate;background:#fff}
.ini::before{content:"";position:absolute;left:50%;top:-140px;width:1100px;height:760px;transform:translateX(-50%);z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgb(var(--k4) / .16), rgb(var(--k5) / .08) 55%, transparent)}
.etq-ini{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 6px;border-radius:999px;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra);font-size:13.5px;font-weight:500;color:rgb(var(--k32))}
.etq-ini .area-ic{width:24px;height:24px;border-radius:7px}
.etq-ini .area-ic svg{width:14px;height:14px}
.etq-ini span:last-child{padding:0 8px 0 4px}
.area-ic{display:inline-grid;place-items:center;flex:none;border-radius:10px}
.area-ic.odonto{background:var(--odonto-gelo);color:var(--odonto)} .area-ic.vet{background:var(--vet-gelo);color:var(--vet)} .area-ic.nutri{background:var(--nutri-gelo);color:var(--nutri)}
.h1{max-width:920px;margin:22px auto 0;font-size:clamp(40px, 5.6vw, 72px);line-height:1.03;font-weight:650;letter-spacing:-.045em}
.h1 em{font-style:normal;background:var(--g-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
.ini .lead{max-width:640px;margin:22px auto 0;font-size:19px;line-height:1.6;color:var(--apoio)}
.ini-acoes{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.provas{display:flex;justify-content:center;gap:22px;margin-top:20px;flex-wrap:wrap;font-size:14px;color:var(--apoio)}
.provas span{display:inline-flex;align-items:center;gap:6px}
.provas svg{width:15px;height:15px;color:var(--ok)}

.seletor{display:inline-flex;gap:4px;margin-top:64px;padding:5px;border-radius:14px;background:var(--gelo-2);border:1px solid var(--linha)}
.sel{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 8px;border-radius:10px;font-size:15px;font-weight:600;color:var(--apoio);transition:background .25s,color .25s,box-shadow .25s}
.sel .area-ic{width:30px;height:30px;border-radius:8px;background:transparent;color:inherit;transition:background .25s,color .25s}
.sel .area-ic svg{width:17px;height:17px}
.sel:hover{color:var(--tinta)}
.sel[aria-selected="true"]{background:#fff;color:var(--tinta);box-shadow:var(--sombra)}
.sel[aria-selected="true"][data-area="odonto"] .area-ic{background:var(--odonto-gelo);color:var(--odonto)}
.sel[aria-selected="true"][data-area="vet"] .area-ic{background:var(--vet-gelo);color:var(--vet)}
.sel[aria-selected="true"][data-area="nutri"] .area-ic{background:var(--nutri-gelo);color:var(--nutri)}
.sel small{font-size:11px;font-weight:600;color:var(--nutri);background:var(--nutri-gelo);padding:1px 7px;border-radius:999px}

.palco{position:relative;margin-top:28px;perspective:1400px;padding-bottom:40px}
.app{position:relative;width:min(1080px, 100%);margin:0 auto;border-radius:20px;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra-g);overflow:hidden;text-align:left;
  transform:rotateX(var(--inc, 14deg)) translateY(var(--sobe, 30px));transform-origin:50% 0}
.app-barra{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--linha);background:rgb(var(--k33))}
.app-barra i{width:10px;height:10px;border-radius:50%;background:rgb(var(--k34))}
.app-barra .url{margin:0 auto;height:24px;padding:0 14px;border-radius:7px;background:var(--gelo-2);font:500 12px var(--mono);color:var(--suave);display:flex;align-items:center}
.app-corpo{display:grid;grid-template-columns:200px 1fr;min-height:480px}
.app-lado{border-right:1px solid var(--linha);padding:14px 10px;display:flex;flex-direction:column;gap:2px;font-size:13.5px;color:rgb(var(--k35));background:rgb(var(--k36))}
.app-lado .marca{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-weight:700;font-size:14px;color:var(--tinta)}
.app-lado .marca img{width:20px;height:20px}
.app-lado .it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px}
.app-lado .it svg{width:16px;height:16px;color:var(--suave)}
.app-lado .it.on{background:var(--azul-gelo);color:var(--azul-txt);font-weight:600}
.app-lado .it.on svg{color:var(--azul)}
.app-lado .grupo{margin:12px 10px 4px;font-size:11.5px;font-weight:600;color:var(--suave)}
.app-main{position:relative;padding:20px 22px;min-width:0}
.tela{position:absolute;inset:20px 22px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s var(--entra),transform .5s var(--entra),visibility 0s .4s}
.tela.on{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--entra) .05s,transform .6s var(--entra) .05s,visibility 0s}
.t-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.t-cab h4{font-size:19px;font-weight:650;letter-spacing:-.025em}
.t-cab small{display:block;font-size:13px;color:var(--suave)}
.t-cab .bt{height:36px;padding:0 14px;font-size:13.5px;border-radius:9px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.num{padding:12px 14px;border-radius:12px;border:1px solid var(--linha);font-size:12.5px;color:var(--apoio)}
.num b{display:block;margin-top:2px;font-size:20px;color:var(--tinta);letter-spacing:-.03em}
.num.dest{background:var(--g-marca);border-color:transparent;color:rgb(255 255 255 / .82)}
.num.dest b{color:#fff}
.lista{border:1px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff}
.li{display:grid;grid-template-columns:54px 1fr auto auto;align-items:center;gap:14px;padding:11px 14px;border-top:1px solid var(--linha);font-size:13.5px}
.li:first-child{border-top:0}
.li time{font:600 12px var(--mono);color:var(--suave)}
.li b{display:block;font-weight:600}
.li small{color:var(--suave);font-size:12.5px}
.li .quem{font-size:12.5px;color:var(--apoio)}
.li.li3{grid-template-columns:44px 1fr auto}
.li.li4{grid-template-columns:1fr auto auto auto}
.li .vl{font-size:13.5px;text-align:right;min-width:62px}
.st{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;transition:background .35s,color .35s}
.st.ok{background:var(--ok-gelo);color:var(--ok)} .st.al{background:var(--alerta-gelo);color:var(--alerta)} .st.ru{background:var(--ruim-gelo);color:var(--ruim)} .st.az{background:var(--azul-gelo);color:var(--azul-txt)} .st.cz{background:var(--gelo-2);color:var(--apoio)}
.duo{display:grid;grid-template-columns:1.15fr 1fr;gap:12px;margin-top:12px}
.caixinha{border:1px solid var(--linha);border-radius:12px;padding:14px;font-size:13px}
.caixinha h5{margin-bottom:10px;font-size:13.5px;font-weight:650}
.dentes{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.dente{height:32px;border-radius:7px 7px 11px 11px;border:1.5px solid var(--linha-2);display:grid;place-items:center;font:600 9.5px var(--mono);color:var(--suave)}
.dente.pl{border-color:var(--azul);background:var(--azul-gelo);color:var(--azul-txt)} .dente.ft{border-color:var(--ok);background:var(--ok-gelo);color:var(--ok)}
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.box{border-radius:10px;padding:9px 10px;background:var(--gelo);font-size:12px;box-shadow:inset 3px 0 0 var(--ok)}
.box.at{box-shadow:inset 3px 0 0 var(--alerta)} .box.cr{box-shadow:inset 3px 0 0 var(--ruim)} .box.lv{background:#fff;border:1px dashed var(--linha-2);box-shadow:none;color:var(--suave)}
.box b{display:block;font-size:12.5px}
.box small{color:var(--suave)}
.breve{position:absolute;inset:-20px -22px;display:grid;place-items:center;background:linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / .94) 45%)}
.breve-c{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:380px;text-align:center}
.breve-c h4{font-size:20px;letter-spacing:-.025em}
.breve-c p{font-size:14.5px;color:var(--apoio)}
.form-breve{display:flex;gap:8px;width:100%;margin-top:4px}
.form-breve input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--linha-2);font:inherit;font-size:15px}
.form-breve input:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:transparent}
.form-breve .bt{height:44px}

/* ---------- as seções: título e texto de apoio empilhados à esquerda ---------- */
.secao{padding:120px 0}
.secao.gelo{background:var(--gelo)}
.rot{font-size:14px;font-weight:600;color:var(--azul-txt)}
.h2{margin-top:12px;font-size:clamp(32px, 3.8vw, 50px);line-height:1.06;font-weight:650;letter-spacing:-.04em}
.cab{max-width:680px;margin:0 0 56px}
.cab p{margin-top:16px;font-size:18px;color:var(--apoio)}

/* ---------- o horizonte: a borda iluminada entre o claro e a faixa escura ---------- */
.horizonte{position:relative;height:240px;overflow:hidden;background:#fff;margin-top:-1px}
.horizonte::before{content:"";position:absolute;left:-30%;right:-30%;top:96px;height:1200px;border-radius:50%;background:var(--noite);
  box-shadow:0 -1px 0 1px rgb(var(--k6) / .9), 0 -14px 40px 4px rgb(var(--k7) / .55), 0 -60px 140px 30px rgb(var(--k4) / .35)}
.horizonte::after{content:"";position:absolute;left:50%;top:40px;width:900px;height:200px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side, rgb(var(--k5) / .35), transparent);filter:blur(10px)}

/* ---------- a faixa escura ---------- */
.escuro{background:var(--noite);color:var(--noite-tx)}
.escuro .secao{padding:100px 0}
.escuro .secao:first-child{padding-top:20px}
.escuro .rot{color:rgb(var(--k37))}
.escuro .cab p{color:var(--noite-apoio)}

.bento{display:grid;grid-template-columns:1.45fr 1fr 1fr;grid-template-rows:300px 300px;gap:16px}
.bt-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:22px;padding:28px;border-radius:22px;background:linear-gradient(180deg, rgb(var(--k38)), rgb(var(--k39)));border:1px solid var(--noite-linha);overflow:hidden;isolation:isolate}
.bt-card.grande{grid-column:1;grid-row:1 / span 2;justify-content:flex-start;padding:36px 36px 0}
.bento .bt-card:nth-child(2){grid-column:2;grid-row:1} .bento .bt-card:nth-child(3){grid-column:2;grid-row:2}
.bt-card.acento{grid-column:3;grid-row:1 / span 2;border-color:transparent;color:#fff;
  background:radial-gradient(120% 70% at 85% 0%, rgb(var(--k40)) 0%, transparent 60%), radial-gradient(90% 60% at 0% 100%, rgb(var(--k41)) 0%, transparent 70%), linear-gradient(160deg,rgb(var(--k4)) 0%,rgb(var(--k42)) 55%,rgb(var(--k43)) 100%)}
.bt-card.acento::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1.2px);background-size:7px 7px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 75%);mask:linear-gradient(180deg,#000,transparent 75%)}
.bt-tx h3{font-size:20px;font-weight:650;letter-spacing:-.025em;color:#fff}
.bt-tx p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--noite-apoio)}
.bt-card.acento .bt-tx p{color:rgb(255 255 255 / .9)}
.bt-card.grande .bt-tx h3{font-size:24px}
.bt-card.grande .bt-tx p{font-size:16.5px;max-width:520px}

/* o celular escuro, grande e cortado embaixo, com a agenda vazando dos dois lados */
.palco-cel{position:relative;flex:1;margin:28px -36px 0;min-height:0}
.quadro-fundo{position:absolute;left:0;right:0;top:150px;bottom:0;display:grid;grid-template-columns:1fr 330px 1fr;gap:24px;opacity:.75;
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.coluna{display:grid;align-content:start;gap:10px}
.coluna:first-child{margin-left:-90px} .coluna:last-child{margin-right:-90px}
.col-cab{display:flex;align-items:center;gap:8px;padding:4px 2px 6px;font-size:13.5px;color:rgb(var(--k44))}
.col-cab i{font-style:normal;display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:rgb(var(--k8) / .16);color:rgb(var(--k6));font-size:11.5px;font-weight:600}
.tarefa{display:grid;gap:10px;padding:13px 14px;border-radius:14px;background:rgb(var(--k45));border:1px solid rgb(var(--k0) / .1);font-size:12.5px;color:var(--noite-apoio);text-align:left}
.tarefa b{font-size:14px;font-weight:600;color:rgb(var(--k28))}
.tf-l{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tf-l>span{display:inline-flex;align-items:center;gap:6px}
.tf-l svg{width:13px;height:13px}
.tarefa .st{height:22px;font-size:11px}
.escuro .st.ok{background:rgb(18 128 92 / .22);color:#5FD3A6} .escuro .st.az{background:rgb(var(--k7) / .18);color:rgb(var(--k6))} .escuro .st.al{background:rgb(243 169 74 / .18);color:#F6BE6E} .escuro .st.ru{background:rgb(240 90 88 / .18);color:#FF8F8D}
.avs{display:inline-flex}
.avs i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgb(var(--k46));color:#fff;font-size:9.5px;font-weight:700;border:2px solid rgb(var(--k45))}
.avs i+i{margin-left:-7px}
.avs i.b{background:#0F8F86} .avs i.c{background:#B4561E} .avs i.d{background:#7A4BD0}
.cont{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:rgb(var(--k0) / .1);font-size:11.5px}
.cel{position:absolute;left:50%;top:0;bottom:-40px;width:330px;transform:translateX(-50%);padding:14px 16px 0;border-radius:52px 52px 0 0;background:rgb(var(--k47));
  border:7px solid rgb(var(--k48));border-bottom:0;box-shadow:0 0 0 1px rgb(var(--k0) / .25), 0 -30px 80px -30px rgb(var(--k7) / .55);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.cel-status{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 10px;font-size:13px;color:#fff}
.ilha{width:100px;height:28px;border-radius:999px;background:#000}
.sinais{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.sinais i{width:3px;background:#fff;border-radius:1px}
.sinais i:nth-child(1){height:4px} .sinais i:nth-child(2){height:6px} .sinais i:nth-child(3){height:9px} .sinais i:nth-child(4){height:12px}
.cel-cab{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 0;color:#fff}
.cel-cab b{font-size:19px;letter-spacing:-.02em}
.cel-cab svg{width:20px;height:20px}
.cel-ferr{display:flex;align-items:center;justify-content:space-between;padding:0 4px 10px;border-bottom:1px solid rgb(var(--k0) / .12)}
.pilula{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;border:1px solid rgb(var(--k0) / .2);font-size:13px;color:rgb(var(--k28))}
.pilula svg{width:14px;height:14px}
.cel-ferr .ics{display:inline-flex;gap:14px;color:var(--noite-apoio)}
.cel-ferr .ics svg{width:17px;height:17px}
.cel .tarefa{background:rgb(var(--k49))}

/* os raios: a lista de amanhã saindo em leque */
.raios{position:absolute;inset:0;z-index:-1;overflow:hidden}
.raios i{position:absolute;left:86%;top:-6%;width:calc(70px + var(--i) * 7px);height:3px;border-radius:3px;transform-origin:0 50%;
  transform:rotate(calc(112deg + var(--i) * 4.2deg)) translateX(calc(120px + var(--i) * 4px));
  background:linear-gradient(90deg, rgb(var(--k50)), rgb(var(--k8)) 35%, rgb(var(--k4)) 75%, rgb(var(--k3) / 0));box-shadow:0 0 12px rgb(var(--k8) / .45);opacity:calc(1 - var(--i) * .045)}
.raios::after{content:"";position:absolute;right:-4%;top:-14%;width:180px;height:120px;border-radius:50%;background:radial-gradient(closest-side, rgb(var(--k6) / .55), transparent);filter:blur(8px)}
html.anima .raios i{animation:raio 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes raio{50%{filter:brightness(1.6)}}

/* a mesma ficha: os cursores de quem está mexendo */
.junto{position:relative;flex:1;display:grid;place-items:center;padding:30px 0 22px}
.junto .tarefa{width:min(270px, 92%)}
.digita{display:inline-flex;align-items:center}
.cursor-tx{display:inline-block;width:2px;height:16px;margin-left:1px;background:rgb(var(--k6));animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.mao{position:absolute;display:inline-flex;align-items:flex-start;pointer-events:none}
.mao svg{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .4))}
.mao b{margin:16px 0 0 -4px;padding:4px 10px;border-radius:8px;font-size:14px;font-weight:650;color:#fff;white-space:nowrap}
.mao.m1{left:0;top:0;color:rgb(var(--k51));flex-direction:row-reverse}
.mao.m1 b{background:rgb(var(--k51));margin:16px -4px 0 0}
.mao.m1 svg{transform:scaleX(-1)}
.mao.m2{right:0;bottom:0;color:rgb(var(--k5))}
.mao.m2 b{background:rgb(var(--k52))}
html.anima .mao.m1{animation:anda1 6s ease-in-out infinite} html.anima .mao.m2{animation:anda2 7s ease-in-out infinite}
@keyframes anda1{50%{transform:translate(14px,10px)}} @keyframes anda2{50%{transform:translate(-18px,-8px)}}

/* da marcação ao recebido: pílulas escuras ligadas por um fio pontilhado */
.passos{list-style:none;margin:20px 0 auto;padding:0;display:grid;justify-items:center;gap:30px}
.passos li{position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px 0 8px;border-radius:999px;background:rgb(var(--k9) / .55);border:1px solid rgb(255 255 255 / .14);
  box-shadow:0 10px 24px -12px rgb(var(--k10) / .7);font-weight:550;font-size:14.5px;white-space:nowrap}
.ok-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:rgb(var(--k42))}
.ok-ic svg{width:15px;height:15px}
.passos li:not(:last-child)::after{content:"";position:absolute;left:50%;top:100%;width:0;height:30px;border-left:1.5px dashed rgb(255 255 255 / .45)}
.passos li:not(:last-child)::before{content:"";position:absolute;left:50%;top:calc(100% + 9px);width:10px;height:10px;transform:translateX(-50%);border-radius:50%;border:1.5px solid rgb(255 255 255 / .6);background:rgb(var(--k53));z-index:1}
html.anima .passos li{opacity:.45;transform:scale(.97);transition:opacity .5s, transform .5s var(--entra)}
html.anima .passos li.feito{opacity:1;transform:none}

.quatro{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:72px}
.q{padding-top:22px;border-top:1px solid var(--noite-linha)}
.q-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;background:rgb(var(--k7) / .14);color:rgb(var(--k37))}
.q-ic svg{width:20px;height:20px}
.q b{display:block;margin-top:16px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.q p{margin-top:8px;font-size:15px;color:var(--noite-apoio)}

/* um dia na clínica: a lista à esquerda, a moldura clara à direita que troca */
.dia{display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:center}
.dia .cab{margin-bottom:32px}
.papeis{display:grid;border-top:1px solid var(--noite-linha)}
.papel{display:block;width:100%;padding:18px 0;text-align:left;border-bottom:1px solid var(--noite-linha);color:var(--noite-apoio);transition:color .25s}
.papel b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.papel p{display:none;margin-top:8px;font-size:15px;color:var(--noite-apoio)}
.papel:hover{color:var(--noite-tx)}
.papel[aria-selected="true"]{color:#fff}
.papel[aria-selected="true"] p{display:block;animation:sobe .45s var(--entra)}
.papel .fio{display:none;height:2px;margin-top:14px;border-radius:2px;background:var(--noite-linha);overflow:hidden}
.papel[aria-selected="true"] .fio{display:block}
.papel .fio i{display:block;height:100%;width:0;background:rgb(var(--k8))}
.papel[aria-selected="true"] .fio i{animation:fio 7s linear forwards}
.papeis.parado .fio{display:none !important}
@keyframes fio{to{width:100%}}
@keyframes sobe{from{opacity:0;transform:translateY(6px)}}
/* um dia na clínica: cada função abre uma tela do painel (agenda, ficha, a receber, equipe) na moldura clara; a tela
   entra inteira e a câmera chega perto do ponto daquela função, e o resto some (o movimento do Accretion) */
/* um dia na clínica, quinta ideia (29/10/2026, no estilo das seções de recurso da Linear e da Stripe): um palco escuro
   com o brilho da marca; a janela do painel inclinada mostra a tela da função inteira; o ponto daquela função ganha um
   anel, e dele sai voando um cartão maior, ligado por um fio de luz, onde a ação acontece (a mensagem é respondida, o
   orçamento é aprovado, a parcela é paga, o acesso troca). Sem moldura branca e sem zoom. */
.palco-dia{position:relative;height:600px;border-radius:28px;overflow:hidden;isolation:isolate;perspective:1800px;border:1px solid var(--noite-linha);
  background:radial-gradient(60% 65% at 32% 45%, rgb(var(--k4) / .30), transparent 70%), radial-gradient(38% 45% at 88% 55%, rgb(var(--k5) / .20), transparent 70%), rgb(var(--k15))}
.palco-dia::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgb(var(--k0) / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--k0) / .07) 1px, transparent 1px);background-size:44px 44px;
  -webkit-mask:radial-gradient(70% 70% at 40% 50%, #000, transparent 80%);mask:radial-gradient(70% 70% at 40% 50%, #000, transparent 80%)}
.janela{position:absolute;left:30px;top:50%;width:920px;height:580px;transform-origin:0 50%;transform:translateY(-50%) rotateY(13deg) rotateX(3deg) scale(var(--s, .62));transition:transform .9s var(--entra)}
.janela.reta{top:16px;left:16px;transform:scale(var(--s, .4));transform-origin:0 0}
.janela .cena{transform:none !important}
.cena [data-alvo]{transition:box-shadow .5s}
.cena [data-alvo].marcado{box-shadow:0 0 0 2px rgb(var(--k8)), 0 0 30px 6px rgb(var(--k8) / .45);animation:anel 1.8s ease-in-out infinite}
@keyframes anel{50%{box-shadow:0 0 0 2px rgb(var(--k6)), 0 0 46px 12px rgb(var(--k8) / .6)}}

.fio-dia{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.fio-dia path{fill:none;stroke:url(#fio-g);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgb(var(--k8) / .8));transition:stroke-dashoffset .7s var(--entra)}
.fio-dia circle{fill:rgb(var(--k6));opacity:0;filter:drop-shadow(0 0 8px rgb(var(--k8)));transition:opacity .3s}
.fio-dia.on circle{opacity:1;animation:ponto 1.6s ease-in-out infinite}
@keyframes ponto{50%{r:7}}

.solto{position:absolute;right:30px;top:120px;width:340px;z-index:3;display:grid;gap:12px;padding:18px;border-radius:18px;transform-origin:0 0;opacity:0;visibility:hidden;color:var(--noite-tx);
  background:linear-gradient(180deg,rgb(var(--k54)),rgb(var(--k55)));border:1px solid rgb(var(--k6) / .32);
  box-shadow:0 50px 90px -30px rgb(0 0 0 / .85), 0 0 70px -12px rgb(var(--k7) / .45);transition:opacity .35s, visibility 0s .35s}
.solto.on{opacity:1;visibility:visible;transition:transform .85s cubic-bezier(.2,.9,.25,1), opacity .5s, visibility 0s}
.solto.voa{transition:none}
.so-cab{display:flex;align-items:center;gap:10px}
.so-cab>div{flex:1;min-width:0}
.so-cab b{display:block;font-size:15px;color:#fff}
.so-cab small{display:block;font-size:12px;color:var(--noite-apoio)}
.so-cab .avs i{width:34px;height:34px;font-size:11px;border:0}
.so-st{flex:none;height:24px;font-size:11px;font-style:normal;transition:background .4s,color .4s}
.so-chat{display:grid;gap:8px}
.so-chat .bolha,.solto .bolha{max-width:92%;font-size:13px}
.digitando{display:inline-flex;gap:4px;justify-self:start;padding:10px 12px;border-radius:14px 14px 14px 4px;background:#fff}
.digitando i{width:6px;height:6px;border-radius:50%;background:rgb(var(--k56));animation:dig 1s infinite}
.digitando i:nth-child(2){animation-delay:.15s} .digitando i:nth-child(3){animation-delay:.3s}
@keyframes dig{50%{transform:translateY(-3px);opacity:.5}}
.so-itens{display:grid;gap:8px}
.so-itens div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:11px;background:rgb(var(--k0) / .07);font-size:13px}
.so-itens span{display:inline-flex;align-items:center;gap:9px}
.dn{font-style:normal;display:grid;place-items:center;width:26px;height:26px;border-radius:7px 7px 10px 10px;border:1.5px solid rgb(var(--k7));background:rgb(var(--k7) / .16);color:rgb(var(--k6));font:600 10px var(--mono)}
.so-tot,.so-valor{display:flex;align-items:baseline;justify-content:space-between;padding-top:10px;border-top:1px solid rgb(var(--k0) / .14);font-size:12.5px;color:var(--noite-apoio)}
.so-valor{border-top:0;padding-top:0}
.so-tot b,.so-valor b{font-size:24px;letter-spacing:-.03em;color:#fff}
.so-acao{display:grid}
.so-acao>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:11px;font-size:13.5px;font-weight:600;transition:opacity .45s, transform .45s var(--entra)}
.so-acao svg{width:16px;height:16px}
.so-bt{background:var(--azul);color:#fff}
.so-bt.verde{background:#1FA855}
.so-feito{background:rgb(18 128 92 / .22);color:#5FD3A6;border:1px solid rgb(95 211 166 / .3);opacity:0;transform:translateY(6px)}
.so-mx{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;gap:9px 8px;font-size:12.5px;color:rgb(var(--k44))}
.so-mx em{font-style:normal;font-size:11px;color:var(--noite-apoio);text-align:center}
.so-mx .st{justify-content:center;font-style:normal;height:24px;font-size:11px}
.escuro .st.cz{background:rgb(var(--k0) / .1);color:var(--noite-apoio)}

/* os passos de cada cartão: p1, p2, p3, p4 entram um depois do outro */
.solto .so-a,.solto .so-b,.solto .so-c{opacity:0;transform:translateY(8px);transition:opacity .45s, transform .45s var(--entra)}
.solto.p1 .so-a,.solto.p2 .so-b,.solto.p3 .so-c{opacity:1;transform:none}
.solto.p3 .digitando{display:none}
.solto.p3 .so-bt{transform:scale(.95);filter:brightness(1.15)}
.solto.p4 .so-bt{opacity:0;transform:translateY(-6px)}
.solto.p4 .so-feito{opacity:1;transform:none}
.solto.p1 .so-troca{box-shadow:0 0 0 2px rgb(var(--k8)), 0 0 18px rgb(var(--k8) / .6)}
.cena{position:absolute;left:0;top:0;width:920px;height:580px;transform-origin:0 0;display:grid;grid-template-columns:168px 1fr;border-radius:24px;background:rgb(var(--k39));border:1px solid rgb(var(--k57));color:var(--noite-tx);overflow:hidden;
  box-shadow:0 40px 80px -30px rgb(var(--k11) / .6);opacity:0;visibility:hidden;
  transition:transform 1.15s cubic-bezier(.65,0,.3,1), opacity .45s, visibility 0s .45s, background-color .7s .25s, border-color .7s .25s, box-shadow .7s .25s;will-change:transform,opacity}
.cena.on{opacity:1;visibility:visible;transition:transform 1.15s cubic-bezier(.65,0,.3,1), opacity .5s, visibility 0s, background-color .7s .25s, border-color .7s .25s, box-shadow .7s .25s}
.cena.sem-tr{transition:none !important}
/* no zoom, a tela some e fica só o ponto da função, no meio da moldura */
.cena.focando{background-color:transparent;border-color:transparent;box-shadow:none;overflow:visible}
.cena .zoomavel,.cn-lado,.cn-cab,.cn-ferr,.col-cab,.cn-abas,.tb-cab{transition:filter .7s, opacity .7s}
.cena.focando .zoomavel:not(.alvo),.cena.focando .cn-lado,.cena.focando .cn-cab,.cena.focando .cn-ferr,.cena.focando .col-cab,.cena.focando .cn-abas,.cena.focando .tb-cab{filter:blur(6px);opacity:0}
.cena.focando .alvo{background:rgb(var(--k58));border-color:rgb(var(--k6) / .3);box-shadow:0 30px 60px -24px rgb(var(--k11) / .55)}

/* o menu lateral, igual ao do painel */
.cn-lado{display:flex;flex-direction:column;gap:2px;padding:18px 10px;border-right:1px solid rgb(var(--k0) / .1);background:rgb(var(--k47));font-size:12.5px;color:var(--noite-apoio)}
.cn-lado .mc{display:flex;align-items:center;gap:8px;padding:2px 8px 16px;font-weight:700;font-size:13.5px;color:#fff}
.cn-lado .mc img{width:18px;height:18px}
.cn-lado .it{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px}
.cn-lado .it svg{width:15px;height:15px}
.cn-lado .it.on{background:rgb(var(--k7) / .14);color:#fff;font-weight:600}
.cn-lado .it.on svg{color:rgb(var(--k8))}
.cn-lado .gr{margin:12px 10px 4px;font-size:10.5px;font-weight:600;color:rgb(var(--k59))}
.cn-main{position:relative;padding:22px 24px;min-width:0}
.cn-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cn-tit{display:block;font-size:22px;letter-spacing:-.03em;color:#fff}
.cn-cab small{display:block;margin-top:2px;font-size:12.5px;color:var(--noite-apoio)}
.cn-bt{flex:none;height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:9px;background:var(--azul);color:#fff;font-size:12.5px;font-weight:600}
.cn-ferr{display:flex;align-items:center;gap:10px;margin:16px 0;padding-bottom:14px;border-bottom:1px solid rgb(var(--k0) / .12)}
.cn-busca{margin-left:auto;height:32px;padding:0 14px;display:inline-flex;align-items:center;border-radius:9px;border:1px solid rgb(var(--k0) / .2);font-size:12.5px;color:var(--noite-apoio);width:180px}
.cn-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cn-col{display:grid;align-content:start;gap:10px}
.bolha-mini{padding:8px 10px;border-radius:10px 10px 3px 10px;background:#DCF8C6;color:var(--tinta);font-size:12px;line-height:1.4}

/* a ficha */
.pac{display:flex;align-items:center;gap:12px}
.pac .avs i{width:42px;height:42px;font-size:13px;border:0}
.avs i.g{background:var(--g-marca)}
.cn-abas{display:flex;gap:18px;margin:16px 0 14px;padding-bottom:10px;border-bottom:1px solid rgb(var(--k0) / .12);font-size:12.5px;color:var(--noite-apoio)}
.cn-abas .on{color:rgb(var(--k6));box-shadow:0 11px 0 -9px rgb(var(--k7))}
.ficha{display:grid;grid-template-columns:1fr 300px;gap:14px}
.odonto{display:grid;gap:8px;align-content:start;padding:14px;border-radius:14px;background:rgb(var(--k45));border:1px solid rgb(var(--k0) / .1)}
.arc{display:grid;grid-template-columns:repeat(16,1fr);gap:4px}
.arc i{font-style:normal;height:34px;display:grid;place-items:center;border-radius:7px 7px 11px 11px;border:1.5px solid rgb(var(--k0) / .22);font:600 9px var(--mono);color:var(--noite-apoio)}
.arc + .arc i{border-radius:11px 11px 7px 7px}
.arc i:nth-child(8){margin-right:6px}
.arc i.pl,.leg i.pl{border-color:rgb(var(--k7));background:rgb(var(--k7) / .16);color:rgb(var(--k6))}
.arc i.ft,.leg i.ft{border-color:#2FB384;background:rgb(18 128 92 / .22);color:#5FD3A6}
.arc i.az,.leg i.az{border-color:#F3A94A;background:rgb(243 169 74 / .16);color:#F6BE6E}
.leg{display:flex;gap:14px;margin-top:4px;font-size:11.5px;color:var(--noite-apoio)}
.leg span{display:inline-flex;align-items:center;gap:6px}
.leg i{width:10px;height:10px;border-radius:3px;border:1.5px solid}
.orc{gap:9px}
.orc-li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:rgb(var(--k44))}
.orc-tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:9px;border-top:1px solid rgb(var(--k0) / .12);font-size:12.5px}
.orc-tot b{font-size:18px}
.orc-bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;border-radius:9px;background:var(--azul);color:#fff;font-size:12.5px;font-weight:600}
.orc-bt svg{width:14px;height:14px}
.evol{display:grid;gap:4px;margin-top:14px;padding:12px 14px;border-radius:12px;background:rgb(var(--k45));border:1px solid rgb(var(--k0) / .1);font-size:12.5px;color:rgb(var(--k44))}
.evol b{font-size:12px;color:var(--noite-apoio);font-weight:600}

/* o a receber */
.cn-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.cn-nums div{padding:12px 14px;border-radius:12px;background:rgb(var(--k45));border:1px solid rgb(var(--k0) / .1);font-size:12px;color:var(--noite-apoio)}
.cn-nums div.dest{background:var(--g-marca);border-color:transparent;color:rgb(255 255 255 / .85)}
.cn-nums b{display:block;margin-top:2px;font-size:20px;letter-spacing:-.03em;color:#fff}
.cn-nums b.ru{color:#FF8F8D}
.tabela{display:grid;gap:6px}
.tb-cab,.tb-li{display:grid;grid-template-columns:1fr 1.4fr .8fr 1.4fr .8fr;align-items:center;gap:10px;padding:0 14px;font-size:12.5px}
.tb-cab{height:30px;color:rgb(var(--k59));font-size:11.5px}
.tb-li{position:relative;height:50px;border-radius:12px;background:rgb(var(--k45));border:1px solid rgb(var(--k0) / .1);color:rgb(var(--k44))}
.tb-li b{color:#fff}
.tb-li > span:nth-child(4){display:inline-flex;align-items:center;gap:7px}
.pt{width:7px;height:7px;border-radius:50%;background:rgb(var(--k59))}
.pt.ru{background:#FF6B69}
.fin{display:grid;grid-template-columns:1fr 236px;gap:12px;align-items:start}
.fin .tb-cab,.fin .tb-li{grid-template-columns:.8fr 1.3fr .7fr 1.3fr .7fr;gap:8px;padding:0 12px}
.tb-li.sel{border-color:rgb(var(--k8) / .45);background:rgb(var(--k60))}
.lado-f{gap:10px}
.lado-f small{display:block;margin-top:2px;font-size:11.5px;color:var(--noite-apoio)}
.lf-bts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lf-bts span{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:9px;font-size:12.5px;font-weight:600}
.lf-bts svg{width:14px;height:14px}
.lf-r{border:1px solid rgb(var(--k0) / .22);color:#fff}
.lf-c{background:#1FA855;color:#fff}

/* a equipe */
.equipe{display:grid;grid-template-columns:1fr 360px;gap:14px;margin-top:18px}
.pessoas{display:grid;gap:8px;align-content:start}
.ps{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgb(var(--k45));border:1px solid rgb(var(--k0) / .1);font-size:12.5px}
.ps b{display:block;color:#fff;font-size:13px}
.ps small{color:var(--noite-apoio)}
.matriz{gap:12px}
.mx{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;gap:9px 8px;font-size:12px;color:rgb(var(--k44))}
.mx em{font-style:normal;font-size:11px;color:var(--noite-apoio);text-align:center}
.mx .st{justify-content:center;font-style:normal;height:22px;font-size:10.5px}

/* o que vem junto: os grupos nos cantos e a marca no meio, com o brilho */
.conecta{display:grid;grid-template-columns:1fr 300px 1fr;grid-template-rows:auto auto;gap:16px}
.grp{padding:24px;border-radius:20px;background:var(--noite-2);border:1px solid var(--noite-linha)}
.grp b{font-size:17px;font-weight:650;letter-spacing:-.02em}
.grp p{margin-top:6px;font-size:14.5px;color:var(--noite-apoio)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{height:32px;padding:0 12px;display:inline-flex;align-items:center;border-radius:9px;background:var(--noite-3);border:1px solid var(--noite-linha);font-size:13.5px;font-weight:500;color:var(--noite-tx)}
.conecta .grp:nth-child(1){grid-column:1;grid-row:1} .conecta .grp:nth-child(2){grid-column:1;grid-row:2}
.conecta .grp:nth-child(4){grid-column:3;grid-row:1} .conecta .grp:nth-child(5){grid-column:3;grid-row:2}
.centro{grid-column:2;grid-row:1 / span 2;position:relative;border-radius:20px;background:var(--noite-2);border:1px solid var(--noite-linha);overflow:hidden;display:grid;place-items:center;min-height:300px}
.centro::after{content:"";position:absolute;left:50%;bottom:-180px;width:420px;height:300px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side, rgb(var(--k7) / .7), rgb(var(--k4) / .3) 50%, transparent)}
.nucleo{position:relative;z-index:1;display:grid;place-items:center;width:104px;height:104px;border-radius:28px;background:var(--noite-3);border:1px solid rgb(var(--k0) / .28);box-shadow:0 20px 50px -16px rgb(var(--k7) / .6)}
.nucleo img{width:52px;height:52px}

/* ---------- de volta ao claro ---------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.area{min-width:0;display:flex;flex-direction:column;padding:28px;border-radius:20px;background:#fff;border:1px solid var(--linha);transition:border-color .25s,box-shadow .3s,transform .35s var(--entra)}
a.area:hover{border-color:var(--linha-2);box-shadow:var(--sombra-g);transform:translateY(-3px)}
.area .area-ic{width:48px;height:48px;border-radius:13px}
.area .area-ic svg{width:24px;height:24px}
.area h3{margin-top:22px;font-size:22px;font-weight:650;letter-spacing:-.03em;display:flex;align-items:center;gap:10px}
.area h3 small{font-size:12px;font-weight:600;color:var(--nutri);background:var(--nutri-gelo);padding:2px 9px;border-radius:999px;letter-spacing:0}
.area p{margin-top:8px;color:var(--apoio);font-size:15.5px}
.area ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--linha);display:grid;gap:9px;font-size:15px}
.area li{display:flex;gap:10px;align-items:flex-start}
.area li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ok)}
.area .mais{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--azul-txt)}
.area .mais svg{width:17px;height:17px;transition:transform .25s var(--entra)}
a.area:hover .mais svg{transform:translateX(4px)}
.area .form-breve{margin-top:auto;padding-top:24px}

.porque{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:72px}
.pq{padding-top:22px;border-top:1px solid var(--linha)}
.pq .q-ic{background:var(--azul-gelo);color:var(--azul)}
.pq b{display:block;margin-top:16px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.pq p{margin-top:8px;font-size:15px;color:var(--apoio)}

.cab-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}
.cab-linha .cab{margin:0}
.chaves{display:inline-flex;gap:4px;padding:5px;border-radius:12px;background:var(--noite-2);border:1px solid var(--noite-linha);flex:none}
.chave{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--noite-apoio);transition:background .25s,color .25s}
.chave svg{width:16px;height:16px}
.chave:hover{color:var(--noite-tx)}
.chave[aria-selected="true"]{background:var(--noite-3);color:#fff;box-shadow:inset 0 0 0 1px rgb(var(--k0) / .18)}

/* os planos no molde do Accretion: nome, o preço grande, um vão, e a lista alinhada embaixo com o botão inteiro */
.planos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.plano{position:relative;display:flex;flex-direction:column;min-height:500px;padding:26px 22px 22px;border-radius:20px;background:linear-gradient(180deg,rgb(var(--k61)),rgb(var(--k62)));border:1px solid var(--noite-linha);color:var(--noite-tx);overflow:hidden;isolation:isolate}
.plano.dest{border-color:rgb(var(--k8) / .35);background:radial-gradient(120% 55% at 50% 0%, rgb(var(--k4) / .42), transparent 70%), linear-gradient(180deg,rgb(var(--k63)),rgb(var(--k62)))}
.plano.dest::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgb(var(--k6) / .12) 1px, transparent 1.2px);background-size:7px 7px;-webkit-mask:linear-gradient(180deg,#000,transparent 45%);mask:linear-gradient(180deg,#000,transparent 45%)}
.pl-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.plano h3{font-size:17px;font-weight:650;letter-spacing:-.02em;color:#fff}
.selo{height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:999px;background:var(--g-marca);color:#fff;font-size:11.5px;font-weight:650;white-space:nowrap;box-shadow:0 6px 16px -6px rgb(var(--k4) / .8)}
.plano .tp{margin-top:4px;font-size:13px;color:var(--noite-apoio)}
.plano .vl{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;margin-top:26px;font-weight:650;color:#fff;white-space:nowrap}
.plano .vl small{font-size:18px;font-weight:600}
.plano .vl b{font-size:40px;letter-spacing:-.045em;line-height:1}
.plano .vl .cent{font-size:20px;letter-spacing:-.02em}
.plano .vl span{margin-left:4px;font-size:13.5px;font-weight:500;color:var(--noite-apoio)}
.plano .lista-pl{margin-top:auto;padding-top:28px}
.plano .lista-pl > b{display:block;margin-bottom:12px;font-size:13.5px;font-weight:650;color:#fff}
.plano ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:rgb(var(--k44))}
.plano li{display:flex;gap:9px;line-height:1.4}
.plano li svg{width:15px;height:15px;flex:none;margin-top:2px;color:rgb(var(--k8))}
.plano .bt{margin-top:22px;width:100%;height:46px;font-size:14.5px;border-radius:11px}
.plano .bt-s{background:rgb(var(--k0) / .08);border-color:rgb(var(--k0) / .16);color:#fff}
.plano .bt-s:hover{background:rgb(var(--k0) / .14);border-color:rgb(var(--k0) / .26)}
.plano.dest .bt-p{background:var(--g-marca);box-shadow:0 12px 28px -12px rgb(var(--k4) / .9)}
.planos-nota{margin-top:20px;font-size:14.5px;color:var(--noite-apoio)}

/* áreas, porquês e dúvidas também no escuro */
.escuro .area{background:linear-gradient(180deg,rgb(var(--k61)),rgb(var(--k62)));border-color:var(--noite-linha);color:var(--noite-tx)}
.escuro a.area:hover{border-color:rgb(var(--k0) / .28);box-shadow:0 30px 60px -30px rgb(var(--k4) / .45)}
.escuro .area h3{color:#fff}
.escuro .area p{color:var(--noite-apoio)}
.escuro .area ul{border-top-color:var(--noite-linha);color:rgb(var(--k44))}
.escuro .area li svg{color:rgb(var(--k8))}
.escuro .area .mais{color:rgb(var(--k6))}
.escuro .area-ic.odonto{background:rgb(var(--k7) / .16);color:rgb(var(--k6))} .escuro .area-ic.vet{background:rgb(45 190 170 / .16);color:#5FD8C6} .escuro .area-ic.nutri{background:rgb(240 140 80 / .16);color:#F6A877}
.escuro .area h3 small{background:rgb(240 140 80 / .16);color:#F6A877}
.escuro .form-breve input{background:var(--noite-3);border-color:var(--noite-linha);color:#fff}
.escuro .form-breve input::placeholder{color:var(--noite-apoio)}
.escuro .form-breve .bt-s{background:rgb(var(--k0) / .08);border-color:rgb(var(--k0) / .16);color:#fff}
.escuro .pq{border-top-color:var(--noite-linha)}
.escuro .pq .q-ic{background:rgb(var(--k7) / .14);color:rgb(var(--k37))}
.escuro .pq p{color:var(--noite-apoio)}
.escuro .dv{background:var(--noite-2);border-color:var(--noite-linha)}
.escuro .dv summary{color:#fff}
.escuro .dv summary svg{color:var(--noite-apoio)}
.escuro .dv p{color:var(--noite-apoio)}
.escuro .ln-az{color:rgb(var(--k6))}

.duv{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start}
.duvidas{display:grid;gap:10px}
.dv{border:1px solid var(--linha);border-radius:14px;background:#fff;overflow:hidden}
.dv summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.dv summary::-webkit-details-marker{display:none}
.dv summary svg{width:18px;height:18px;flex:none;color:var(--suave);transition:transform .3s var(--entra)}
.dv[open] summary svg{transform:rotate(45deg)}
.dv p{padding:0 22px 20px;color:var(--apoio);font-size:15.5px}


/* a volta ao claro, no molde do Accretion: a faixa escura termina numa curva torta, com o brilho grosso por baixo
   (do azul-noite ao azul da marca, ao ciano e ao claro), e o convite final fica solto no fundo claro */
.horizonte.volta{height:470px;background:var(--papel);margin-bottom:-90px}
.horizonte.volta::before{left:-35%;right:-35%;top:-1080px;height:1300px;background:var(--noite);transform:rotate(-2.5deg);
  box-shadow:0 6px 10px 0 rgb(var(--k64)), 0 16px 24px 4px rgb(var(--k65)), 0 34px 46px 10px rgb(var(--k66)), 0 60px 70px 18px rgb(var(--k7) / .7), 0 95px 100px 30px rgb(var(--k6) / .5), 0 130px 120px 40px rgb(var(--k12) / .55)}
.horizonte.volta::after{display:none}

.final{position:relative;padding:0 0 110px;background:linear-gradient(180deg, transparent 0 90px, var(--papel) 90px)}
.final-c{max-width:760px;margin:0 auto;text-align:center;color:var(--tinta)}
.final-c .h2{margin:0}
.final-c p{max-width:560px;margin:18px auto 0;font-size:18.5px;color:var(--apoio)}
.final-c .ini-acoes{margin-top:30px}
.final-c .bt-p{background:var(--tinta);box-shadow:0 10px 24px -12px rgb(var(--k1) / .6)}
.final-c .bt-p:hover{background:rgb(var(--k67))}

.rodape{border-top:0;padding:0 0 32px;background:var(--papel);overflow:hidden}
.rodape .caixa{padding-top:56px;border-top:1px solid var(--linha-2)}
.rod-grade{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.rod-sub{margin-top:12px;color:var(--apoio);font-size:14.5px;max-width:320px}
.rodape h4{margin-bottom:14px;font-size:12.5px;font-weight:500;color:var(--suave)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--tinta)}
.rodape a:hover{color:var(--azul-txt)}
/* a marca grande: o último elemento da página, num tom sólido, com o símbolo, e a borda de baixo corta a palavra */
.marca-grande{display:flex;align-items:center;justify-content:center;gap:.06em;margin:48px auto -0.2em;width:min(1320px, 100% - 32px);font-size:clamp(64px, 16.2vw, 250px);font-weight:700;letter-spacing:-.065em;line-height:1;color:rgb(var(--k68));user-select:none;white-space:nowrap}
.mg-sim{flex:none;width:.78em;height:.78em;background:currentColor;-webkit-mask:url(../img/simbolo.svg) center/contain no-repeat;mask:url(../img/simbolo.svg) center/contain no-repeat}
.rodape{padding-bottom:0}
.rodape .fim{position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--linha);font-size:13.5px;color:var(--suave)}

html.anima [data-rev]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--entra),transform .9s var(--entra)}
html.anima [data-rev].vis{opacity:1;transform:none}
/* o topo entra sozinho, só com CSS: não depende do JavaScript nem de a página estar à vista */
html.anima .ini [data-rev]{opacity:1;transform:none;transition:none;animation:entra .9s var(--entra) both}
.ini [data-rev]:nth-child(2){animation-delay:.07s} .ini [data-rev]:nth-child(3){animation-delay:.14s} .ini [data-rev]:nth-child(4){animation-delay:.21s} .ini [data-rev]:nth-child(n+5){animation-delay:.28s}
@keyframes entra{from{opacity:0;transform:translateY(20px)}}

@media (max-width:1080px){
  .planos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plano{min-height:460px}
  .porque,.quatro{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .bt-card{min-height:280px}
  .bt-card.grande{min-height:560px}
  .bt-card.acento{min-height:480px}
  .bento .bt-card:nth-child(n){grid-row:auto;grid-column:auto}
  .bt-card.grande,.bt-card.acento{grid-column:1 / -1}
  .dia,.duv{grid-template-columns:1fr}
  .conecta{grid-template-columns:1fr 1fr}
  .conecta .grp:nth-child(n){grid-column:auto;grid-row:auto}
  .centro{grid-column:1 / -1;grid-row:1;min-height:200px}
  .cab-linha{flex-direction:column;align-items:flex-start}
}
@media (max-width:860px){
  .menu,.topo-dir .ln{display:none}
  .areas{grid-template-columns:minmax(0,1fr)}
  .app-corpo{grid-template-columns:1fr}
  .app-lado{display:none}
  .nums{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .rod-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .caixa{width:calc(100% - 32px)}
  .ini{padding-top:48px}
  .seletor{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .sel{flex-direction:column;height:auto;padding:8px 4px;gap:4px;font-size:13px}
  .sel small{display:none}
  .app{transform:none}
  .li{grid-template-columns:44px 1fr auto}
  .li .quem{display:none}
  .li.li4{grid-template-columns:1fr auto auto}
  .li.li4 .st:nth-of-type(3){display:none}
  .planos,.porque,.quatro,.bento,.conecta{grid-template-columns:1fr}
  .secao,.escuro .secao{padding:80px 0}
  .horizonte{height:160px}
  .horizonte::before{top:70px}
  .palco-cel{margin-left:-28px;margin-right:-28px}
  .bt-card.grande{padding:28px 28px 0}
  .horizonte.volta{height:400px;margin-bottom:-60px}
  .horizonte.volta::before{top:-1150px}
  .rod-grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}html.anima [data-rev]{opacity:1;transform:none}.app{transform:none}html.anima .passos li{opacity:1;transform:none}}
.matriz{align-self:start;align-content:start}
.cena .tf-l>span{white-space:nowrap;font-size:12px}
.cena .tarefa .st{font-size:10.5px;padding:0 8px}

/* ===== o topo no nível do Accretion (30/10/2026) ===== */
/* o painel de verdade (captura do modo escuro, 1600 x 1000), mais largo que o texto, como o do Accretion */
.app-real{position:relative;width:min(1400px, calc(100vw - 48px));margin-left:50%;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:rgb(var(--k69));
  border:1px solid rgb(var(--k0) / .22);box-shadow:0 0 0 7px rgb(var(--k13) / .9), 0 60px 120px -40px rgb(var(--k14) / .55), 0 30px 60px -30px rgb(var(--k4) / .35);
  transform:translateX(-50%) rotateX(var(--inc, 14deg)) translateY(var(--sobe, 30px));transform-origin:50% 0}
.app-real .tela-area{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity .6s var(--entra)}
.app-real .tela-area.on{opacity:1}
.app-real .borrada{width:100%;height:100%;object-fit:cover;object-position:top left;filter:blur(6px) saturate(.6);opacity:.5}
.app-real .breve{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(50% 50% at 50% 50%, rgb(var(--k15) / .55), rgb(var(--k15) / .85))}
.app-real .breve-c{max-width:440px;color:#fff}
.app-real .breve-c p{color:rgb(var(--k70))}
.app-real .breve .area-ic{width:48px;height:48px;border-radius:13px}
.app-real .breve .area-ic svg{width:24px;height:24px}
.palco{padding-bottom:60px}

/* a grade em funil atrás do título (o poço do Accretion, no azul), desenhada pelo v2.js, com riscos de luz descendo */
.ini{background:radial-gradient(60% 50% at 50% 46%, rgb(var(--k71)) 0%, #fff 70%)}
.ini::before{display:none}
.funil{position:absolute;left:50%;top:150px;width:2000px;height:780px;transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:0;-webkit-mask:radial-gradient(48% 62% at 50% 62%, #000 45%, transparent 92%);mask:radial-gradient(48% 62% at 50% 62%, #000 45%, transparent 92%)}
.funil .anel,.funil .raio{fill:none;stroke:rgb(var(--k72));stroke-width:1;vector-effect:non-scaling-stroke}
.funil .anel{opacity:.32} .funil .raio{opacity:.24}
.funil .luz{fill:none;stroke:url(#funil-luz);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgb(var(--k7) / .9))}
.funil .fundo{fill:url(#funil-fundo)}
html.anima .funil{animation:funil-entra 1s cubic-bezier(.12,.23,.5,1) 1.2s both}
html:not(.anima) .funil{opacity:.9}
@keyframes funil-entra{from{opacity:0}to{opacity:.9}}

/* a entrada do Accretion: de 20% maior e 20 px acima, 1,5 s, curva (.12,.23,.5,1), um depois do outro a cada 0,1 s */
html.anima .ini [data-rev]{animation:entra-acc 1.5s cubic-bezier(.12,.23,.5,1) both}
.ini [data-rev]:nth-child(1){animation-delay:.5s} .ini [data-rev]:nth-child(2){animation-delay:.6s} .ini [data-rev]:nth-child(3){animation-delay:.7s}
.ini [data-rev]:nth-child(4){animation-delay:.8s} .ini [data-rev]:nth-child(5){animation-delay:.9s} .ini [data-rev]:nth-child(n+6){animation-delay:1s}
@keyframes entra-acc{from{opacity:0;transform:translateY(-20px) scale(1.2)}to{opacity:1;transform:none}}
html.anima .palco{animation:sobe-acc 1.6s cubic-bezier(.12,.23,.5,1) 1.1s both}
@keyframes sobe-acc{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:none}}

/* o resto da página entra como no Accretion: de baixo, desfocado, e assenta */
html.anima [data-rev]:not(.ini [data-rev]){opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s cubic-bezier(.12,.23,.5,1), transform 1.1s cubic-bezier(.12,.23,.5,1), filter 1s cubic-bezier(.12,.23,.5,1)}
html.anima [data-rev].vis:not(.ini [data-rev]){opacity:1;transform:none;filter:none}

@media (max-width:860px){ .app-real{border-radius:14px;box-shadow:0 0 0 4px rgb(var(--k13) / .9), 0 30px 60px -30px rgb(var(--k14) / .5)} .funil{top:120px;width:1200px;height:520px} }
@media (prefers-reduced-motion:reduce){ .app-real{transform:translateX(-50%)} .funil{opacity:.9} }

/* o celular do bento: a agenda de verdade no celular, com a tela do computador vazando atrás */
.palco-cel{position:relative;flex:1;margin:24px -36px 0;min-height:0;overflow:hidden}
.cel-fundo{position:absolute;left:-6%;top:70px;width:112%;max-width:none;opacity:.32;filter:saturate(.8);
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent), linear-gradient(180deg,#000 40%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent) intersect, linear-gradient(180deg,#000 40%,transparent)}
.cel-real{position:absolute;left:50%;top:6px;width:300px;transform:translateX(-50%);padding:10px 10px 0;border-radius:50px 50px 0 0;background:rgb(var(--k73));
  border:1px solid rgb(var(--k0) / .3);border-bottom:0;box-shadow:inset 0 0 0 6px rgb(var(--k74)), 0 -30px 80px -30px rgb(var(--k7) / .6), 0 0 0 1px rgb(0 0 0 / .4)}
.cel-real img{display:block;width:100%;border-radius:40px 40px 0 0}
.cel-real .ilha{position:absolute;left:50%;top:20px;width:92px;height:26px;transform:translateX(-50%);border-radius:999px;background:#000;z-index:1}
.cel-real{padding-top:40px}
.cel-real .ilha{top:12px}
.cel-real::before{content:"9:41";position:absolute;left:34px;top:15px;font-size:12px;font-weight:600;color:#fff}

/* o palco com as telas de verdade (capturas do modo escuro, 1600 x 1000) */
.janela{width:1600px;height:1000px;left:28px}
.janela .cena.real{display:block;width:1600px;height:1000px;padding:0;border-radius:26px;overflow:hidden;background:rgb(var(--k69));border:2px solid rgb(var(--k0) / .25);
  box-shadow:0 0 0 12px rgb(var(--k13) / .85), 0 80px 140px -40px rgb(0 0 0 / .8)}
.janela .cena.real img{display:block;width:100%;height:100%}
.alvo-img{position:absolute;border-radius:16px;pointer-events:none}
.cena .alvo-img.marcado{box-shadow:0 0 0 4px rgb(var(--k8)), 0 0 60px 14px rgb(var(--k8) / .45);animation:anel-g 1.8s ease-in-out infinite}
@keyframes anel-g{50%{box-shadow:0 0 0 4px rgb(var(--k6)), 0 0 90px 24px rgb(var(--k8) / .6)}}

/* o cartão do meio de "o que vem junto": o brilho no pé, as faíscas subindo (canvas) e a borda acesa embaixo */
.centro{background:radial-gradient(90% 55% at 50% 108%, rgb(var(--k7) / .55), rgb(var(--k4) / .22) 45%, transparent 75%), linear-gradient(180deg,rgb(var(--k75)),rgb(var(--k76)));
  border-color:rgb(var(--k0) / .14);box-shadow:inset 0 -1px 0 rgb(var(--k8) / .9), 0 18px 50px -20px rgb(var(--k7) / .55)}
.centro::after{display:none}
.faiscas{position:absolute;inset:0;width:100%;height:100%}
.nucleo{width:116px;height:116px;border-radius:30px;background:linear-gradient(180deg,rgb(var(--k77)),rgb(var(--k78)));border:1px solid rgb(var(--k0) / .22);
  box-shadow:inset 0 -1px 0 rgb(var(--k8) / .9), 0 24px 60px -18px rgb(var(--k7) / .75)}
.chips span{background:linear-gradient(180deg,rgb(var(--k79)),rgb(var(--k80)));border-color:rgb(var(--k0) / .14)}
.centro{background:radial-gradient(42% 26% at 50% 102%, rgb(var(--k16) / .95), rgb(var(--k8) / .75) 38%, transparent 75%), radial-gradient(95% 60% at 50% 110%, rgb(var(--k7) / .7), rgb(var(--k4) / .3) 45%, transparent 78%), linear-gradient(180deg,rgb(var(--k81)),rgb(var(--k82)));
  box-shadow:inset 0 -2px 0 rgb(var(--k6) / 1), 0 26px 70px -18px rgb(var(--k7) / .75)}

/* ===== a troca de área (30/10/2026): a cor nova se abre num círculo a partir do botão (o JS anima o clip-path) ===== */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
body,.escuro,.palco-dia,.bt,.plano,.centro{transition:background-color .5s,border-color .5s,color .5s}
.areas-topo{display:inline-flex;gap:2px;padding:4px;border-radius:12px;background:rgb(var(--k0) / .25);border:1px solid var(--linha)}
.sel-topo{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--apoio);transition:background .25s,color .25s}
.sel-topo svg{width:15px;height:15px}
.sel-topo:hover{color:var(--tinta)}
.sel-topo[aria-selected="true"]{background:#fff;color:var(--azul-txt);box-shadow:var(--sombra)}
@media (max-width:860px){ .areas-topo{margin-left:auto} .sel-topo span{display:none} .sel-topo{padding:0 9px} }

/* ===== planos no molde do Accretion: preço leve e igual em todos, lista clara, botão inteiro, recomendado com brilho ===== */
/* Planos na mesma largura das outras seções (30/10/2026): o título começa na mesma linha à esquerda */
.plano{padding:26px 24px 24px;min-height:520px;border-radius:18px;background:linear-gradient(180deg, var(--noite-2), var(--noite))}
.plano.dest{background:radial-gradient(110% 50% at 50% 0%, color-mix(in srgb, var(--acc-4) 30%, transparent), transparent 72%), linear-gradient(180deg, var(--noite-2), var(--noite));border-color:color-mix(in srgb, var(--acc-2) 40%, transparent)}
.plano.dest::before{display:none}
.plano h3{font-size:18px;font-weight:600}
.plano .tp{font-size:13.5px}
.plano .vl{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;margin-top:30px;font-weight:600;white-space:nowrap}
.plano .vl small{margin-right:6px;font-size:19px;font-weight:500;color:var(--noite-apoio)}
.plano .vl b,.plano .vl .cent{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1}
.plano .vl span{flex-basis:100%;margin:8px 0 0;font-size:13.5px;font-weight:500}
.plano .lista-pl{padding-top:32px}
.plano ul{gap:11px;font-size:14.5px;color:rgb(214 222 236)}
.plano li svg{color:var(--acc-2)}
.plano .bt{height:46px;border-radius:10px}
.plano .bt-s{background:rgb(255 255 255 / .05);border-color:rgb(255 255 255 / .1)}
.plano.dest .bt-p{background:var(--acc-4);box-shadow:0 12px 28px -12px var(--acc-4)}
.selo{background:var(--acc-4);box-shadow:none}

/* ===== a barra de cima no molde do Accretion: uma cápsula escura flutuando, com o botão na cor da área ===== */
.topo{top:0;padding-top:12px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
.topo.rolou{border-bottom:0}
.topo .caixa{width:min(1120px, 100% - 24px);height:56px;gap:24px;padding:0 8px 0 18px;border-radius:16px;background:var(--noite);border:1px solid rgb(255 255 255 / .08);
  box-shadow:0 12px 32px -12px rgb(0 0 0 / .45)}
.topo .logo{color:#fff;font-size:18px}
.topo .logo img{width:26px;height:26px}
.topo .menu{margin:0 auto}
.topo .menu a{color:#E3E9F3;font-size:14.5px}
.topo .menu a:hover{color:#fff;background:rgb(255 255 255 / .07)}
.topo .topo-dir{margin-left:0}
.topo .topo-dir .ln{color:#C9D2E0}
.topo .topo-dir .ln:hover{color:#fff}
.topo .bt-pq{height:40px;border-radius:11px;background:var(--acc-4);box-shadow:0 8px 20px -10px var(--acc-4)}
.topo .areas-topo{background:rgb(255 255 255 / .06);border-color:rgb(255 255 255 / .08)}
.topo .sel-topo{height:30px;color:#93A3BD}
.topo .sel-topo:hover{color:#fff}
.topo .sel-topo[aria-selected="true"]{background:rgb(255 255 255 / .12);color:#fff;box-shadow:none}
.ini{padding-top:72px}
@media (max-width:1080px){ .topo .menu{display:none} .topo .areas-topo{margin-left:auto} }
@media (max-width:600px){ .topo .caixa{gap:10px;padding:0 6px 0 12px} .topo .logo span{display:none} }

/* ===== só o conteúdo da área escolhida ===== */
html[data-area="vet"] .so-od{display:none}
html:not([data-area="vet"]) .so-vt{display:none}
.areas{grid-template-columns:1fr}
html:not([data-area="vet"]):not([data-area="nutri"]) .area:not(.a-odonto),html[data-area="vet"] .area:not(.a-vet),html[data-area="nutri"] .area:not(.a-nutri){display:none}
.areas .area{display:grid;grid-template-columns:auto 1fr 1.1fr;column-gap:24px;align-items:start;padding:32px}
.areas .area .area-ic{grid-row:span 3}
.areas .area h3{margin-top:0} .areas .area p{grid-column:2}
.areas .area ul{grid-column:3;grid-row:1 / span 3;margin:0;padding:0 0 0 28px;border-top:0;border-left:1px solid var(--noite-linha)}
.areas .area .mais,.areas .area .form-breve{grid-column:2;padding-top:18px}
html[data-area="nutri"] #dia,html[data-area="nutri"] #planos{display:none}
@media (max-width:860px){ .areas .area{grid-template-columns:auto 1fr} .areas .area ul{grid-column:1 / -1;grid-row:auto;padding:18px 0 0;margin-top:18px;border-left:0;border-top:1px solid var(--noite-linha)} .areas .area .area-ic{grid-row:span 2} }

/* ===== tudo claro (30/10/2026, o Diego: "clean, verde e branco" no Vet e "claro também" na Odonto): a faixa do miolo fica
   clara, cartões brancos, texto escuro e a cor da área nos destaques (--v-*: azul, verde-água, laranja); os cartões de
   destaque (marcação e faíscas) ficam na cor da área ===== */
:root{--v-fundo:#F4F7FC;--v-cartao:#FFFFFF;--v-linha:#E1E8F2;--v-texto:#0B1626;--v-apoio:#5A6A7E;--v-verde:#1A56D6;--v-verde-2:#1A6BFF;--v-a:26 107 255;--v-a2:26 86 214;--v-sombra:11 22 38;--v-gelo:#E8F0FF;--v-gelo-2:#F2F6FC;--v-ini:#EEF4FF;--v-txt2:#344458;--v-claro:214 228 255}
html[data-area="vet"]{--v-fundo:#F3FAF8;--v-linha:#DCEEE9;--v-texto:#0E2A26;--v-apoio:#56706B;--v-verde:#0F8A7C;--v-verde-2:#14B8A6;--v-a:20 184 166;--v-a2:15 138 124;--v-sombra:14 42 38;--v-gelo:#E1F5F1;--v-gelo-2:#F1F8F6;--v-ini:#E8F7F3;--v-txt2:#2B4540;--v-claro:204 240 233}
html[data-area="nutri"]{--v-fundo:#FCF7F3;--v-linha:#F2E3D8;--v-texto:#2A1A10;--v-apoio:#7A6152;--v-verde:#C2541A;--v-verde-2:#EA7A35;--v-a:234 122 53;--v-a2:194 84 26;--v-sombra:42 26 16;--v-gelo:#FDEFE4;--v-gelo-2:#FBF5F0;--v-ini:#FDF1E8;--v-txt2:#4A3426;--v-claro:250 226 208}
html .escuro{background:var(--v-fundo);color:var(--v-texto)}
html .escuro .rot{color:var(--v-verde)}
html .escuro .h2,html .escuro h3,html .escuro b{color:var(--v-texto)}
html .escuro .cab p,html .escuro .q p,html .escuro .grp p,html .escuro .pq p,html .escuro .area p,
html .escuro .bt-tx p,html .escuro .papel,html .escuro .papel p,html .planos-nota,html .escuro .dv p{color:var(--v-apoio)}
html .escuro .papel[aria-selected="true"],html .escuro .papel[aria-selected="true"] b{color:var(--v-texto)}
html .papeis,html .papel,html .q,html .pq{border-color:var(--v-linha)}
html .papel .fio{background:var(--v-linha)} html .papel .fio i{background:var(--v-verde-2)}
html .q-ic,html .escuro .pq .q-ic{background:var(--v-gelo);color:var(--v-verde)}
/* os cartões brancos */
html .bt-card:not(.acento),html .grp,html .escuro .area,html .escuro .dv,html .plano{background:var(--v-cartao);border-color:var(--v-linha);box-shadow:0 1px 2px rgb(var(--v-sombra) / .04), 0 12px 32px -18px rgb(var(--v-sombra) / .18)}
html .bt-tx h3{color:var(--v-texto)}
html .chips span{background:var(--v-gelo-2);border-color:var(--v-linha);color:var(--v-texto)}
html .escuro .area ul{border-color:var(--v-linha);color:var(--v-texto)}
html .escuro .area li svg,html .plano li svg{color:var(--v-verde-2)}
html .escuro .area .mais{color:var(--v-verde)}
html .escuro .area-ic.vet{background:var(--v-gelo);color:var(--v-verde)}
html .escuro .dv summary{color:var(--v-texto)}
/* os cartões de dentro (ficha da equipe, raios) */
html .tarefa{background:#fff;border-color:var(--v-linha);color:var(--v-apoio);box-shadow:0 10px 30px -18px rgb(var(--v-sombra) / .3)}
html .tarefa b{color:var(--v-texto)}
html .cont{background:var(--v-gelo-2)}
html .escuro .st.ok{background:#E3F4EC;color:#12805C} html .escuro .st.al{background:#FDF1DD;color:#A85A07} html .escuro .st.ru{background:#FCE9E8;color:#C8312F}
html .avs i{border-color:#fff}
/* o palco e os cartões que saem da tela */
html .palco-dia{background:radial-gradient(60% 65% at 35% 45%, rgb(var(--v-a) / .14), transparent 70%), var(--v-gelo-2);border-color:var(--v-linha)}
html .palco-dia::before{background-image:linear-gradient(rgb(var(--v-a2) / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--v-a2) / .08) 1px, transparent 1px)}
html .janela .cena.real{background:#fff;border-color:var(--v-linha);box-shadow:0 0 0 12px rgb(255 255 255 / .9), 0 60px 120px -40px rgb(var(--v-sombra) / .35)}
html .solto{background:#fff;color:var(--v-texto);border-color:rgb(var(--v-a) / .35);box-shadow:0 40px 80px -30px rgb(var(--v-sombra) / .4), 0 0 50px -16px rgb(var(--v-a) / .45)}
html .so-cab small,html .so-tot,html .so-valor{color:var(--v-apoio)}
html .so-tot b,html .so-valor b{color:var(--v-texto)}
html .so-itens div{background:var(--v-gelo-2);color:var(--v-texto)}
html .so-tot{border-color:var(--v-linha)}
html .dn{border-color:var(--v-verde-2);background:var(--v-gelo);color:var(--v-verde);width:34px;font-size:9.5px}
html .so-bt{background:var(--v-verde)}
html .so-feito{background:#E3F4EC;color:#12805C;border-color:#BFE6D3}
html .so-mx{color:var(--v-texto)} html .so-mx em{color:var(--v-apoio)}
html .digitando{background:var(--v-gelo-2)}
/* o celular do bento e o fundo dele, claros */
html .cel-real{background:#fff;border-color:var(--v-linha);box-shadow:inset 0 0 0 6px var(--v-gelo-2), 0 -30px 80px -30px rgb(var(--v-a) / .45)}
html .cel-real::before{color:var(--v-texto)}
html .cel-fundo{opacity:.5}
/* planos */
html .plano .tp,html .plano .vl small,html .plano .vl span{color:var(--v-apoio)}
html .plano h3,html .plano .vl b{color:var(--v-texto)}
html .plano ul{color:var(--v-txt2)}
html .plano .bt-s{background:var(--v-gelo-2);border-color:var(--v-linha);color:var(--v-texto)}
html .plano.dest{background:radial-gradient(110% 50% at 50% 0%, rgb(var(--v-a) / .16), transparent 72%), #fff;border-color:rgb(var(--v-a) / .5)}
html .plano.dest .bt-p,html .selo{background:var(--v-verde);box-shadow:0 12px 28px -12px rgb(var(--v-a2) / .7)}
html .chaves{background:#fff;border-color:var(--v-linha)}
html .chave{color:var(--v-apoio)} html .chave[aria-selected="true"]{background:var(--v-gelo);color:var(--v-verde)}
html .escuro .form-breve input{background:#fff;border-color:var(--v-linha);color:var(--v-texto)}
/* as curvas: no Vet, brilho verde sobre o claro */
html .horizonte::before{background:var(--v-fundo);box-shadow:0 -1px 0 1px rgb(var(--v-a) / .55), 0 -14px 40px 4px rgb(var(--v-a) / .25), 0 -60px 140px 30px rgb(var(--v-a) / .14)}
html .horizonte::after{background:radial-gradient(closest-side, rgb(var(--v-a) / .18), transparent)}
html .horizonte.volta{background:var(--papel)}
html .horizonte.volta::before{background:var(--v-fundo);box-shadow:0 6px 10px 0 rgb(var(--v-a) / .35), 0 30px 60px 10px rgb(var(--v-a) / .22), 0 90px 120px 40px rgb(var(--v-claro) / .6)}
html .final-c .bt-p{background:var(--v-verde)}
/* a barra de cima: cápsula branca */
html .topo .caixa{background:#fff;border-color:var(--v-linha);box-shadow:0 12px 32px -16px rgb(var(--v-sombra) / .25)}
html .topo .logo{color:var(--v-texto)}
html .topo .menu a{color:var(--v-txt2)} html .topo .menu a:hover{color:var(--v-texto);background:var(--v-gelo-2)}
html .topo .topo-dir .ln{color:var(--v-txt2)}
html .topo .bt-pq{background:var(--v-verde);box-shadow:0 8px 20px -10px var(--v-verde)}
html .topo .areas-topo{background:var(--v-gelo-2);border-color:var(--v-linha)}
html .topo .sel-topo{color:var(--v-apoio)} html .topo .sel-topo[aria-selected="true"]{background:#fff;color:var(--v-verde);box-shadow:var(--sombra)}
/* o topo da página */
html .app-real{background:#fff;border-color:var(--v-linha);box-shadow:0 0 0 7px rgb(255 255 255 / .95), 0 60px 120px -40px rgb(var(--v-sombra) / .3), 0 30px 60px -30px rgb(var(--v-a) / .35)}
html .ini{background:radial-gradient(60% 50% at 50% 46%, var(--v-ini) 0%, #fff 70%)}
html .centro{background:radial-gradient(46% 30% at 50% 104%, rgb(255 255 255 / .95), rgb(255 255 255 / .35) 45%, transparent 75%), linear-gradient(180deg, var(--v-verde) 0%, var(--v-verde-2) 100%);
  border-color:transparent;box-shadow:inset 0 -2px 0 rgb(255 255 255 / .9), 0 26px 60px -24px rgb(var(--v-a) / .7)}
html .nucleo{background:rgb(255 255 255 / .16);border-color:rgb(255 255 255 / .35);box-shadow:inset 0 -1px 0 rgb(255 255 255 / .7), 0 20px 50px -18px rgb(var(--v-sombra) / .45)}
html .nucleo img{filter:brightness(0) invert(1)}

/* ===== planos largos e baixos, como os do Accretion: até 3 por linha, preço com o "por mês" ao lado ===== */
.planos{grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr));max-width:calc(var(--n, 3) * 400px + (var(--n, 3) - 1) * 14px);margin-inline:auto;gap:14px}
.plano{min-height:460px;padding:28px 26px 26px}
.plano .vl{margin-top:34px;flex-wrap:nowrap}
.plano .vl b,.plano .vl .cent{font-size:46px}
.plano .vl span{flex-basis:auto;margin:0 0 0 10px;font-size:14px}
.plano .lista-pl{padding-top:40px}
.plano .bt{margin-top:26px}
.planos-nota{text-align:center}
@media (max-width:860px){ .planos{grid-template-columns:1fr;max-width:440px} .plano{min-height:0} }
.rodape{padding-bottom:36px}

/* o símbolo da logo na cor da área: a imagem vira só o molde (máscara) e a cor vem do degradê da marca, que muda com a área */
.logo img{object-position:-9999px 0;background:var(--g-marca);-webkit-mask:url(../img/simbolo.png) center/contain no-repeat;mask:url(../img/simbolo.png) center/contain no-repeat;transition:background .5s}
html .escuro .area h3{color:var(--v-texto)}
.solto .bolha small{display:block;margin-top:3px;text-align:right}
html .escuro .ln-az,html .ln-az{color:var(--v-verde)}
@media (min-width:600px) and (max-width:860px){ .planos{grid-template-columns:repeat(2, minmax(0, 1fr));max-width:none} }
.zap-breve{margin-top:16px;align-self:flex-start}
.breve-c .zap-breve{align-self:center}

/* o Login aparece também no celular e no tablet (30/10/2026), entre o seletor de área e o Testar grátis */
@media (max-width:860px){ .topo .topo-dir .ln{display:inline-flex;padding:8px 6px;font-weight:600} .topo .topo-dir{gap:4px} }
@media (max-width:400px){ .topo .bt-pq{padding:0 12px;font-size:13.5px} .topo .sel-topo{padding:0 7px} .topo .areas-topo{gap:0;padding:3px} }

/* ===== o fluxo do topo (30/10/2026, no lugar da grade em funil): curvas das laterais convergindo para o painel, com pontos
   de luz descendo por elas. Fica atrás do painel (que cobre o encontro das linhas); a máscara limpa o centro, atrás do
   título, para o fluxo aparecer nas laterais e acima do painel. Cor da área (--acc-*) ===== */
.funil{display:none}
.fluxo{position:absolute;left:50%;top:120px;width:max(1600px, 100vw);height:620px;transform:translateX(-50%);z-index:-1;pointer-events:none;overflow:visible;
  -webkit-mask:radial-gradient(34% 46% at 50% 22%, transparent 45%, #000 82%), linear-gradient(180deg, transparent, #000 18%);-webkit-mask-composite:source-in;
  mask:radial-gradient(34% 46% at 50% 22%, transparent 45%, #000 82%) intersect, linear-gradient(180deg, transparent, #000 18%)}
.fl-linha{fill:none;stroke:url(#fluxo-linha);stroke-width:1.1;vector-effect:non-scaling-stroke}
.fl-foco{fill:url(#fluxo-foco)}
.fl-luz{fill:none;stroke:var(--acc-2);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:3 100;stroke-dashoffset:103;opacity:0;
  filter:drop-shadow(0 0 4px var(--acc-2)) drop-shadow(0 0 10px var(--acc-3))}
html.anima .fl-luz{animation:fl-desce 6s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes fl-desce{0%{stroke-dashoffset:103;opacity:0}10%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
html.anima .fluxo{animation:fluxo-entra 1.2s cubic-bezier(.12,.23,.5,1) .9s both}
@keyframes fluxo-entra{from{opacity:0}to{opacity:1}}
@media (max-width:860px){ .fluxo{top:110px;height:460px;width:1200px} }
@media (prefers-reduced-motion:reduce){ .fl-luz{display:none} }
.fl-linha{stroke-width:1.3}
.fluxo .fl-linha:nth-of-type(odd){stroke-dasharray:none}
.fl-luz{stroke-width:3}
.fl-linha{stroke-width:1.5}
@media (max-width:600px){ .fluxo{display:none} }
/* no celular, o fluxo volta enquadrado no espaço entre o seletor e o painel: curvas mais deitadas, que terminam logo
   abaixo do topo do painel (assim não sobram riscos ao lado dele) */
@media (max-width:600px){ .fluxo{display:block;top:150px;width:760px;height:330px;
  -webkit-mask:radial-gradient(46% 40% at 50% 30%, transparent 40%, #000 85%), linear-gradient(180deg, transparent, #000 30%);mask:radial-gradient(46% 40% at 50% 30%, transparent 40%, #000 85%) intersect, linear-gradient(180deg, transparent, #000 30%)} }
@media (max-width:600px){ .fluxo{height:305px} }

/* ===== o FAQ (30/10/2026): à esquerda o título e o cartão de contato; à direita as dúvidas num painel só, separadas por
   linha fina; a aberta ganha a barra e o fundo na cor da área, o ícone gira de + para menos e a resposta desliza ===== */
.duv{grid-template-columns:380px 1fr;gap:72px}
.duv-esq{position:sticky;top:100px;display:grid;gap:28px}
.duv-esq .cab{margin:0}
.duv-contato{display:grid;justify-items:start;gap:8px;padding:24px;border-radius:20px;background:var(--v-cartao);border:1px solid var(--v-linha);box-shadow:0 1px 2px rgb(var(--v-sombra) / .04), 0 14px 34px -20px rgb(var(--v-sombra) / .25)}
.duv-contato b{font-size:17px;letter-spacing:-.02em;color:var(--v-texto)}
.duv-contato p{font-size:14.5px;color:var(--v-apoio);margin-bottom:8px}
.duv-contato .bt{height:44px;font-size:14.5px;background:var(--v-verde)}
.duv-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--v-gelo);color:var(--v-verde);margin-bottom:6px}
.duv-ic svg{width:20px;height:20px}
.duvidas{gap:0;border-radius:22px;background:var(--v-cartao);border:1px solid var(--v-linha);overflow:hidden;box-shadow:0 1px 2px rgb(var(--v-sombra) / .04), 0 20px 50px -30px rgb(var(--v-sombra) / .3)}
.dv2{position:relative;border-top:1px solid var(--v-linha);transition:background-color .35s}
.dv2:first-child{border-top:0}
.dv2::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--v-verde);transform:scaleY(0);transition:transform .35s var(--entra)}
.dv2.aberta{background:color-mix(in srgb, var(--v-gelo) 55%, transparent)}
.dv2.aberta::before{transform:none}
.dv2-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:22px 26px;text-align:left;font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--v-texto)}
.dv2-q:hover span{color:var(--v-verde)}
.dv2-q span{transition:color .2s}
.dv2-ic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--v-linha);background:#fff;transition:background-color .3s,border-color .3s,transform .4s var(--entra)}
.dv2-ic::before,.dv2-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;border-radius:2px;background:var(--v-apoio);transform:translate(-50%,-50%);transition:transform .4s var(--entra),background-color .3s}
.dv2-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.dv2.aberta .dv2-ic{background:var(--v-verde);border-color:var(--v-verde);transform:rotate(180deg)}
.dv2.aberta .dv2-ic::before,.dv2.aberta .dv2-ic::after{background:#fff}
.dv2.aberta .dv2-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.dv2-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--entra)}
.dv2.aberta .dv2-r{grid-template-rows:1fr}
.dv2-r>div{overflow:hidden}
.dv2-r p{padding:0 74px 24px 26px;font-size:15.5px;line-height:1.65;color:var(--v-apoio);opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .45s var(--entra)}
.dv2.aberta .dv2-r p{opacity:1;transform:none;transition-delay:.08s}
@media (max-width:1080px){ .duv{grid-template-columns:1fr;gap:40px} .duv-esq{position:static} }
@media (max-width:600px){ .dv2-q{padding:18px 18px;font-size:15.5px} .dv2-r p{padding:0 18px 20px} .duv-contato{padding:20px} }

/* o Instagram no rodapé, ao lado do copyright */
.fim-esq{display:inline-flex;align-items:center;gap:18px;flex-wrap:wrap}
.rodape .ig{display:inline-flex;align-items:center;gap:7px;color:var(--v-apoio);font-weight:500;transition:color .2s}
.rodape .ig svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.rodape .ig:hover{color:var(--v-verde)}
.rod-grade{padding-bottom:32px}

/* ===== o FAQ editorial (30/10/2026): duas colunas, a pergunta em negrito e a resposta embaixo, uma linha fina em cima
   de cada uma; sem cartão, sem ícone, sem acordeão ===== */
.duv{display:block}
.duv .cab{max-width:640px;margin-bottom:56px}
.duvidas{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:64px;row-gap:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.dq{padding:28px 0 32px;border-top:1px solid var(--v-linha)}
.dq h3{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.35;color:var(--v-texto)}
.dq p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--v-apoio);max-width:520px}
.duv-fim{margin-top:28px;padding-top:28px;border-top:1px solid var(--v-linha);font-size:16px;color:var(--v-apoio)}
.duv-fim a{color:var(--v-verde);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.duv-fim a:hover{text-decoration-thickness:2px}
@media (max-width:860px){ .duvidas{grid-template-columns:1fr} .dq{padding:24px 0 26px} }

/* ===== o FAQ no molde do exemplo do Diego (30/10/2026): título no centro; faixas arredondadas em cinza claro com o número
   e o botão redondo escuro; a aberta fica branca com a borda de brilho nas cores da área e o botão vira um x contornado ===== */
.duv-cab{max-width:none;margin:0 auto 44px;text-align:center}
.duvidas{display:grid;grid-template-columns:1fr;row-gap:12px;max-width:820px;margin:0 auto;background:none;border:0;box-shadow:none;overflow:visible}
.dq{position:relative;padding:0;border:0;border-radius:22px;background:linear-gradient(180deg, #EEF1F5, #E7EBF1);transition:background .35s, box-shadow .35s}
.dq::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;opacity:0;transition:opacity .4s;
  background:linear-gradient(120deg, var(--acc-1), var(--acc-3) 30%, #F0C3FF 55%, var(--acc-2) 80%, var(--acc-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.dq.aberta{background:#fff;box-shadow:0 18px 40px -22px rgb(var(--v-a) / .45), 0 0 0 6px color-mix(in srgb, var(--acc-1) 14%, transparent)}
.dq.aberta::before{opacity:1}
.dq-q{display:flex;align-items:center;gap:16px;width:100%;padding:20px 20px 20px 22px;text-align:left}
.dq-n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:rgb(255 255 255 / .8);font-size:11.5px;font-weight:600;color:var(--v-apoio)}
.dq.aberta .dq-n{background:var(--v-gelo-2)}
.dq-t{flex:1;font-size:16.5px;font-weight:550;letter-spacing:-.01em;color:var(--v-texto)}
.dq-bt{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#14161C;transition:background .3s, box-shadow .3s, transform .45s var(--entra)}
.dq-bt::before,.dq-bt::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;border-radius:2px;background:#fff;transform:translate(-50%,-50%);transition:background .3s}
.dq-bt::after{transform:translate(-50%,-50%) rotate(90deg)}
.dq.aberta .dq-bt{background:#fff;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--acc-3) 55%, #D9DEE7);transform:rotate(45deg)}
.dq.aberta .dq-bt::before,.dq.aberta .dq-bt::after{background:var(--v-texto)}
.dq-q:hover .dq-bt{transform:scale(1.06)}
.dq.aberta .dq-q:hover .dq-bt{transform:rotate(45deg) scale(1.06)}
.dq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--entra)}
.dq.aberta .dq-r{grid-template-rows:1fr}
.dq-r>div{overflow:hidden}
.dq-r p{margin:0;padding:0 76px 24px 62px;font-size:15px;line-height:1.7;color:var(--v-apoio);max-width:none;opacity:0;transition:opacity .35s}
.dq.aberta .dq-r p{opacity:1;transition-delay:.1s}
.dq h3{display:none}
.duv-fim{max-width:820px;margin:28px auto 0;padding-top:0;border-top:0;text-align:center}
@media (max-width:600px){ .dq-q{padding:16px 14px 16px 16px;gap:12px} .dq-t{font-size:15px} .dq-r p{padding:0 18px 20px 52px} .dq-bt{width:30px;height:30px} }
.dq::before{pointer-events:none}

/* o topo claro: o passar do mouse escurece o texto (o #fff era do topo escuro antigo e fazia o Login e a Nutri sumirem) */
html .topo .topo-dir .ln:hover{color:var(--v-texto)}
html .topo .sel-topo:hover{color:var(--v-texto)}
html .topo .sel-topo[aria-selected="true"]:hover{color:var(--v-verde)}

/* ===== telas baixas (30/10/2026, Diego viu no notebook de 14" da mãe os cards tampando a tela inteira): o tamanho segue
   também a altura da janela, não só a largura. Num 27" nada muda; num notebook de 1366 x 768 cada peça cabe na tela. ===== */
@media (min-width:861px){
  .h1{font-size:clamp(40px, min(5.6vw, 9.5svh), 72px)}
  .app-real{width:min(1400px, calc(100vw - 48px), calc((100svh - 110px) * 1.6))}
  .bento{grid-template-rows:repeat(2, clamp(220px, calc((100svh - 150px) / 2), 300px))}
  .palco-dia{height:clamp(440px, calc(100svh - 120px), 600px)}
}
@media (min-width:861px) and (max-height:820px){
  .ini{padding-top:56px}
  .plano{min-height:0}
  .horizonte{height:180px}
  .horizonte.volta{height:340px;margin-bottom:-70px}
}

/* ===== títulos de seção no molde da LastWeek (30/10/2026, Diego: "os títulos nossos muito grandes"): o título firme e
   médio, o texto de apoio logo embaixo, sem o rótulo azul em cima ===== */
.cab .rot{display:none}
.cab .h2,.duv-cab .h2{margin-top:0;font-size:clamp(26px, 2.5vw, 34px);line-height:1.15;letter-spacing:-.025em}
.cab p{margin-top:10px;font-size:16px;line-height:1.55}
.cab{margin-bottom:36px}
.duv-cab{margin-bottom:32px}

/* a Plus Jakarta Sans (30/10/2026, a fonte da LastWeek): ela já é mais larga e firme, então o espaço entre as letras
   volta quase ao normal (o -.045em da Geist grudava as palavras) */
.h1{letter-spacing:-.02em;font-weight:700}
.cab .h2,.duv-cab .h2,.final-c .h2{letter-spacing:-.015em;font-weight:700}
.topo .logo span,.rod .logo span{letter-spacing:-.01em}

/* mensal ou anual (30/10/2026): a chave no meio, entre o título e os planos; no anual, o preço do ano */
.ciclo-linha{display:flex;justify-content:center;margin:-12px 0 28px}
.ciclos .chave{padding:0 18px}