.cria .sx{display:none}
.cria .presa{padding:clamp(116px,17vh,160px) var(--gut) 24px}
.abre-tx{max-width:1040px;margin-inline:auto;text-align:center}
.abre-tx .t1{font-size:clamp(38px,4.2vw,64px);line-height:1.02}
.abre-tx .lead{margin-inline:auto;max-width:620px}
.abre-base .btns{justify-content:center}

.ps{list-style:none;margin:clamp(56px,9vh,96px) auto 0;padding:0;max-width:760px;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(52px,8vh,84px)}
.ps-i{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.ps-t .n{font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ciano)}
.ps-t h2{margin-top:10px;font-size:clamp(28px,3vw,46px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.ps-t p{margin-top:14px;max-width:46ch;font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--apoio)}

.im .cria .presa{padding:0;background:#040405}
.im .cria .sx{display:block;position:absolute;inset:0}
.im .cria .presa:not(.viva) .sx{visibility:hidden}
.im .abre-tx{position:absolute;z-index:5;left:var(--gut);right:var(--gut);top:clamp(92px,12vh,124px);max-width:none}
.im .abre-tx .lead{margin-top:14px}
.im .abre-base{position:absolute;z-index:5;left:0;right:0;bottom:clamp(26px,4.5vh,48px)}
.im .abre-base .btns{margin-top:0}
.im .ps{position:absolute;inset:0;z-index:9;margin:0;max-width:none;display:block;pointer-events:none}
.im .ps-i{position:absolute;left:max(40px,6vw);top:50%;width:min(420px,29vw);display:block;opacity:0;visibility:hidden}
.im .ps-f{display:none}

.qd{position:relative;container-type:inline-size;width:100%;max-width:760px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0E0F11;box-shadow:0 0 0 1px rgba(255,255,255,.11),0 50px 90px -50px #000,0 0 120px -50px rgba(56,189,255,.35)}
.qd-i{position:absolute;inset:0;font-size:1.72cqw;color:#c9d0d8}

.q1 .qd-i{display:flex;flex-direction:column;padding:1.6em;gap:1.2em;background:#F3F5F7;color:#1A2330}
.vt-cab{display:flex;align-items:center;gap:1em;font-weight:700;font-size:1.25em}
.vt-cab span{margin-left:auto;height:2.6em;padding:0 1.1em;border-radius:999px;display:flex;align-items:center;background:#fff;box-shadow:inset 0 0 0 1px #DCE1E7;font-size:.72em;font-weight:500;color:#8A95A3}
.vt-g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1em}
.vt-c{display:flex;flex-direction:column;min-height:0;padding:.6em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px #E1E5EA,0 .6em 1.2em -.8em rgba(26,35,48,.35)}
.vt-c img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top;border-radius:.6em}
.vt-c div{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:.6em .2em 0;font-size:.82em;font-weight:700;white-space:nowrap}
.vt-c em{font-style:normal;height:2.2em;padding:0 .8em;border-radius:.6em;display:flex;align-items:center;background:#EEF1F4;font-size:.86em;font-weight:600}
.vt-c.alvo{box-shadow:0 0 0 .18em #009CFF,0 0 0 1px #E1E5EA,0 .6em 1.2em -.8em rgba(26,35,48,.35)}
.vt-c.alvo em{background:#1A2330;color:#fff}
.seta{position:absolute;z-index:3;left:23%;top:49%;width:1.9em;height:1.9em;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.35))}

.q2 .qd-i{background:#1A1A1A}
.qd .pg{position:relative;container-type:inline-size}
.qd .pg img{width:100%;height:auto}
.q2 .pg{position:absolute;left:5%;top:15%;width:90%;box-shadow:0 1.4em 3.4em -1.2em #000}
.qd .tit{position:absolute;left:8.6%;top:25.4%;width:41%;height:29%;padding:1.05cqw 0 0 2.35cqw;background:#F4ECE5;font:500 8.125cqw/.92 "Cormorant Garamond",Georgia,serif;letter-spacing:-.01em;color:#7A2E3B;white-space:nowrap}
.qd .tit i{display:block}
.marca-sel{position:absolute;left:9.9%;top:25.9%;width:39%;height:28%;border:.17em solid #0099ff}
.qd .barra{position:absolute;left:5%;top:4.5%;display:flex;align-items:center;gap:.9em;height:3em;padding:0 1em;border-radius:.8em;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.1);font-size:.92em;color:#fff;white-space:nowrap}
.qd .barra span{color:#8b8b8b}
.qd .barra .st{margin-left:.6em;color:#34D399}
.qd .cores{position:absolute;right:7%;bottom:8%;display:flex;align-items:center;gap:.7em;padding:.7em .9em;border-radius:999px;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1em 2em -1em #000;font-size:.92em;color:#fff}
.qd .cores i{width:1.7em;height:1.7em;border-radius:50%}
.qd .cores i:nth-of-type(2){box-shadow:0 0 0 .15em #111,0 0 0 .3em #0099ff}

.q3 .qd-i{display:flex;flex-direction:column;background:#111}
.qd .nav{flex:none;display:flex;align-items:center;gap:.8em;height:4em;padding:0 1.2em}
.qd .nav .pts{display:flex;gap:.45em}
.qd .nav .pts i{width:.8em;height:.8em;border-radius:50%;background:#2c2c2c}
.qd .end{flex:1;display:flex;align-items:center;gap:.6em;height:2.6em;padding:0 1em;border-radius:999px;background:#1c1c1c;color:#fff;white-space:nowrap}
.qd .end svg{width:1.05em;height:1.05em;flex:none;color:#34D399}
.qd .noar{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 1em;border-radius:999px;background:rgba(52,211,153,.14);color:#6EE7B7;font-weight:600;white-space:nowrap}
.qd .noar:before{content:"";width:.6em;height:.6em;border-radius:50%;background:#34D399}
.q3 .corta{flex:1;min-height:0;overflow:hidden}

.fm-palco{max-width:360px}
.fm-palco .form{border-radius:16px;background:#F4ECE5;color:#2B2320;padding:20px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.fm-palco .form em{font:italic 500 19px "Cormorant Garamond",Georgia,serif;color:#7A2E3B}
.fm-palco .form b{font-size:18px;letter-spacing:-.01em}
.fm-palco .form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:#7A6A61}
.fm-palco .form label span{display:flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(43,35,32,.14);font-size:13px;font-weight:500;color:#2B2320;white-space:nowrap;overflow:hidden}
.fm-palco .form label .vazio{color:#A89A92}
.fm-palco .env{display:grid;place-items:center;margin-top:4px;height:40px;border-radius:999px;background:#2B2320;color:#fff;font-weight:600}
.fm-palco .env.foi{background:#4F6F5B}
.col-f{max-width:420px;padding:18px;display:flex;flex-direction:column;gap:10px;font-size:13px}
.col-cab{display:flex;align-items:center;gap:8px;padding:2px 4px 6px;font-size:15px;font-weight:700}
.col-cab b{margin-left:auto;min-width:34px;height:26px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:#1C1E22;font-size:13px}
.col-f .ct{flex-wrap:wrap}
@media (max-width:640px){
  .qd-i{font-size:2.5cqw}
  .vt-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vt-c:nth-child(n+5){display:none}
  .seta{left:36%;top:44%}
}

/* abertura no céu da home: o fundo de pedra da página Sites dá lugar ao horizonte azul, que segue o notebook no mergulho */
.cria .sx .fundo{background:linear-gradient(180deg,oklch(0.115 0.02 252) 0,oklch(0.2 0.035 250) var(--hz),oklch(0.17 0.03 250) var(--hz),oklch(0.1 0.018 252) 100%)}
.cria .sx .fundo .pedra,.cria .sx .fundo .nevoa,.cria .sx .fundo .feixe,.cria .sx .fundo .chao{display:none}
.cria .sx .fundo .az{left:0;top:calc(var(--hz) - 62vh);width:100%;height:62vh;margin:0;background:radial-gradient(ellipse 46% 100% at 50% 100%,oklch(0.757 0.145 235.7/.34),oklch(0.676 0.181 247.7/.1) 45%,transparent 72%)}
.cria .apoio{margin:16px auto 0;max-width:26em;text-wrap:balance;color:oklch(0.72 0.015 250)}
.im .abre-tx .apoio{margin-top:12px}

/* empilhada, os aparelhos da abertura ficam entre o texto e os botões, parados, com a vitrine na tela do notebook */
html:not(.im,.empe) .cria .presa{display:flex;flex-direction:column;background:radial-gradient(ellipse 80% 40% at 50% 34%,oklch(0.3 0.06 245/.5),transparent 70%)}
html:not(.im,.empe) .cria .sx{display:block;position:relative;order:1;align-self:center;width:min(100vw,1040px);margin-top:clamp(20px,4vh,40px);padding-top:min(16vw,166px)}
html:not(.im,.empe) .cria .sx > :not(.ha-raiz){display:none}
html:not(.im,.empe) .cria .sx #hp-aparelhos{position:relative;width:100%}
html:not(.im,.empe) .cria #tl,html:not(.im,.empe) .cria #tl-sombra{display:none}
html:not(.im,.empe) .cria #hp-tela{background:#0b0b0b url(img/vitrine-modelos.webp) center/cover}
html:not(.im,.empe) .cria .abre-base{order:2;margin-top:clamp(16px,3vh,28px)}
html:not(.im,.empe) .cria .ps{order:3}
html:not(.im,.empe) .cria .vende{order:4}

/* na cena, só os links das soluções recebem o clique; o resto do texto deixa passar para a rolagem */
.ps-t .lk,.vende .lk{margin-top:16px}
.im .ps .lk,.im .vende .lk{pointer-events:auto}
.im .vende .tj-esq{pointer-events:auto}
.vende .n{display:block;margin-bottom:12px;font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ciano)}
.vende .pal-tx .lk{display:flex;width:max-content}

/* as frases da história são mais longas que as palavras da página Sites: o corpo desce para caber ao lado da janela */
.im .vende .pal:not(.frase) .pi{font-size:clamp(40px,3.6vw,64px);line-height:1;letter-spacing:-.04em}
.im .vende .frase .pi{font-size:clamp(34px,3.3vw,58px);line-height:1.08;letter-spacing:-.035em}
.vende .frase time{display:inline-block;min-width:3.6em;margin-right:.35em;font:500 .42em/1 var(--mono);letter-spacing:.04em;vertical-align:.32em;-webkit-text-fill-color:var(--ciano);color:var(--ciano)}
.vende .frase .mk + .mk:before{content:none}
html:not(.im,.empe) .vende .frase .mk{display:block}
html:not(.im,.empe) .vende .frase .pi{font-size:clamp(24px,2.6vw,36px)}

/* a régua da home que o base.css comum não traz: corpo, títulos soltos e o que só esta página usa */
:root{--claro-2:oklch(0.8 0.02 245);--t-corpo:17px}
@supports (transition-timing-function:linear(0,1)){
  :root{--saida:linear(0,.055,.173,.31,.442,.559,.657,.737,.801,.85,.888,.917,.939,.955,.967,.976,.983,.987,.991,.993,1)}
}
@media (max-width:599px){:root{--t-corpo:16px}}
body{letter-spacing:-.005em}
h1,h2{font-weight:500;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:var(--t-h1);letter-spacing:normal}
h2{font-size:var(--t-h2)}
h3{font-weight:500;letter-spacing:-.022em;line-height:1.12}
.cria h1{margin:0 auto;max-width:11.5em}
.im .cria h1{max-width:none}
.im .cria h1 span{display:block}
.cria .apoio{font-size:var(--t-apoio);font-weight:500;letter-spacing:-.015em;line-height:1.45}
.im .cria h1{font-size:64px}
.im .cria .apoio{font-size:23px}
@media (max-width:599px){.cria h1{line-height:1.08}}

/* régua por dentro da página, medida na home: título de seção 48 (32 no celular), apoio e texto de cartão 17 (16)
   em peso médio, título de cartão 28, rótulo e horário em mono 12, link 16. As frases da história são títulos de
   seção e seguem o mesmo corpo e peso */
.ps-t h2,.vende .tj-esq h2,.im .vende .tj-esq h2,.pg-tit,
.vende .pi,.im .vende .pal:not(.frase) .pi,.im .vende .frase .pi{font-size:var(--t-h2);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.ps-t p,.vende .pal-tx,.im .vende .pal .pal-tx,.vende .tj-lead,.im .vende .tj-lead,
.ia .apoio,.pg .apoio,.planos-cab .apoio,.fecho .apoio{font-size:var(--t-corpo);font-weight:500;line-height:1.45}
.rot,.ps-t .n,.vende .n,.plano .quem{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.vende .frase time{min-width:4.6em;margin-right:1em;font:500 12px/1 var(--mono);letter-spacing:.08em;vertical-align:.9em}
.lk,.ps-t .lk,.vende .lk,.ia .lk{font-size:16px;font-weight:600}
.tj-fr .pi,.im .vende .tj-fr .pi{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.vende .tj-it b,.im .vende .tj-it b{font-size:15px;font-weight:600}
.im .vende .tj-it span{font-size:15px}
.plano h3{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.plano p:not([class]){font-size:var(--t-corpo);font-weight:500;line-height:1.45}
.ia-nota,.planos-nota{font-size:14px;line-height:1.5}

/* o span.btn das maquetes de site dentro da cena também pega esta casca; o a.btn de verdade vem do base.css */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font-weight:600;font-size:var(--t-btn);letter-spacing:-.015em;white-space:nowrap;transition:transform .12s ease-out,filter .25s,background-color .25s,box-shadow .25s}
@media (prefers-reduced-transparency:reduce){.btn.fan{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (max-width:599px){
  .cria .btns{flex-direction:column;align-items:stretch;gap:4px;width:100%;max-width:420px;margin-inline:auto}
  .cria .btn.fan{min-height:40px;box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* perguntas e rodapé usam os arquivos da home; aqui só as cores que eles esperam e o que o base.css comum põe a mais */
.s9{--tinta:oklch(0.22 0.025 250);--tinta-2:oklch(0.43 0.03 250);padding-block:clamp(96px,14vh,168px)}
.s9{background:linear-gradient(180deg,oklch(0.995 0.002 240) 0,var(--nevoa) 320px)}
.s9 .fale9 .lk{margin-top:6px}
.s9 .fale9 .lk span{box-shadow:none}
.pe{position:static;overflow:visible;box-shadow:none;color:inherit}
.pe-in{max-width:none;margin:0}
.pe-leg{max-width:none;padding-top:0;box-shadow:none}
.pe .marca img:first-child{width:30px;height:auto}
.pe .marca img + img{width:auto;height:26px}