@import "../paginas/base.css";
@import "../home-nova-2-apple/rodape.css";

.hz{height:1px;max-width:1400px;margin:0 auto;background:linear-gradient(90deg,rgba(235,244,255,0) 0%,rgba(235,244,255,.5) 25%,#fff 50%,rgba(235,244,255,.5) 75%,rgba(235,244,255,0) 100%);box-shadow:0 0 24px 2px rgba(170,215,255,.3)}
.js .hz{transform:scaleX(0);transition:transform 1.4s var(--saida)}
.js .hz.on{transform:none}

[data-cena]{position:relative}
.pula{display:none}
.im [data-cena]{height:calc(100vh + var(--rola,100vh))}
.im .presa{position:sticky;top:0;height:100vh;overflow:hidden}
.im .pula{position:absolute;right:var(--gut);bottom:14px;z-index:5;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--apoio-2);transition:color .25s}
.im .pula:hover,.im .pula:focus-visible{color:#fff}

/* Tema por bloco: data-tema na seção, com as cores da home. Sem o atributo, o bloco segue o :root da página. */
[data-tema]{background:var(--chao);color:var(--tinta)}
[data-tema="escuro"]{
  --chao:oklch(0.135 0.02 255);
  --tinta:oklch(0.97 0.006 240);
  --apoio:oklch(0.8 0.02 245);
  --apoio-2:oklch(0.62 0.02 250);
  --ciano:#7FE6FF;
  --linha:rgba(255,255,255,.08);
  --relevo:linear-gradient(180deg,#1B1C1F 0%,#111214 100%);
  --relevo-borda:0 0 0 1px rgba(0,0,0,.6),inset 0 1.5px 0 rgba(255,255,255,.09);
}
[data-tema="claro"]{
  --chao:oklch(0.965 0.008 240);
  --tinta:oklch(0.22 0.025 250);
  --apoio:oklch(0.43 0.03 250);
  --apoio-2:oklch(0.5 0.03 250);
  --ciano:oklch(0.43 0.03 250);
  --linha:oklch(0.22 0.025 250/.1);
  --relevo:linear-gradient(180deg,oklch(0.995 0.003 240) 0%,oklch(0.955 0.008 240) 100%);
  --relevo-borda:0 0 0 1px oklch(0.22 0.025 250/.09),inset 0 1.5px 0 oklch(0.995 0.003 240),0 10px 24px -18px oklch(0.22 0.025 250/.35);
}
/* a emenda de dois blocos em meio pixel deixa um fio escuro; um pixel de sobreposição esconde */
[data-tema] + [data-tema]{margin-top:-1px}
.sec[data-tema="claro"] + .sec[data-tema="escuro"]:not([data-vira]),.sec[data-tema="escuro"] + .sec[data-tema="claro"]:not([data-vira]){padding-top:clamp(72px,11vh,128px)}

[data-tema="claro"] :focus-visible{outline-color:var(--tinta)}
[data-tema="claro"] .prata{background-image:linear-gradient(180deg,#1A2330 0%,#2C3746 60%,#4A586B 100%)}
[data-tema="claro"] .simbolo{background-image:linear-gradient(100deg,#5FD8FF 0%,#1FB0FF 45%,#0090F0 100%)}
[data-tema="claro"] .rot,[data-tema="claro"] .msg small{color:#0369A1}
[data-tema="claro"] .lead{color:#3A4656}
[data-tema="claro"] .tbd{background:#FBE7C6;color:#7A4A00}
[data-tema="claro"] .em-breve,[data-tema="claro"] .selo{background:#D9E8FF;color:#0B3E8A}
[data-tema="claro"] .painel{background:linear-gradient(180deg,oklch(0.995 0.003 240) 0%,oklch(0.96 0.008 240) 100%);box-shadow:0 0 0 1px rgba(26,35,48,.08),inset 0 1.5px 0 oklch(0.995 0.003 240),0 40px 70px -50px rgba(26,35,48,.5)}
[data-tema="claro"] .hz{background:linear-gradient(90deg,rgba(26,35,48,0) 0%,rgba(26,35,48,.16) 25%,rgba(26,35,48,.3) 50%,rgba(26,35,48,.16) 75%,rgba(26,35,48,0) 100%);box-shadow:0 10px 24px 0 rgba(0,156,255,.12)}
[data-tema="claro"] .chat-cab{color:var(--apoio)}
[data-tema="claro"] .chat-cab b,[data-tema="claro"] .sys b,[data-tema="claro"] .ct b,[data-tema="claro"] .etapas b,[data-tema="claro"] .trilha .ac{color:var(--tinta)}
[data-tema="claro"] .av{background:#E3E6EA;color:var(--apoio)}
[data-tema="claro"] .chip{background:oklch(0.995 0.003 240);box-shadow:inset 0 0 0 1px rgba(26,35,48,.14);color:var(--tinta)}
[data-tema="claro"] .msg{color:var(--tinta)}
[data-tema="claro"] .msg.eu{background:linear-gradient(180deg,#EAF5FF,#DCEEFF);box-shadow:0 0 0 1px rgba(0,156,255,.22),inset 0 1.5px 0 #fff}
[data-tema="claro"] .msg.gente{background:linear-gradient(180deg,#F1F3F6,#E6E9ED);box-shadow:var(--relevo-borda)}
[data-tema="claro"] .msg.gente small,[data-tema="claro"] .ct small{color:var(--apoio)}
[data-tema="claro"] .sys{background:#EEF1F4;box-shadow:inset 0 0 0 1px rgba(26,35,48,.1)}
[data-tema="claro"] .kv,[data-tema="claro"] .rasc{background:#EEF1F4}
[data-tema="claro"] .etapas:before,[data-tema="claro"] .trilha:before{background:rgba(26,35,48,.12)}
[data-tema="claro"] .etapas li:before{box-shadow:0 0 0 5px var(--chao)}
.js [data-tema="claro"] [data-rv]:not(.on) .etapas li:before{background:#C9CED4}
[data-tema="claro"] .trilha li:before{background:#C9CED4;box-shadow:0 0 0 5px var(--chao)}
[data-tema="claro"] .trilha .ac:before{background:var(--azul)}
[data-tema="claro"] .janela{box-shadow:0 0 0 1px rgba(26,35,48,.1),0 50px 90px -50px rgba(26,35,48,.55),0 0 120px -50px rgba(0,156,255,.35)}
[data-tema="claro"] .fim:before{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,156,255,.14) 0%,rgba(0,156,255,.04) 45%,rgba(0,156,255,0) 70%)}
[data-tema="claro"] .pula:hover,[data-tema="claro"] .pula:focus-visible{color:var(--tinta)}

/* bloco escuro dentro de um claro: devolve o que as regras do claro trocaram */
[data-tema="escuro"] .prata{background-image:linear-gradient(180deg,#FFFFFF 0%,#E6EBF0 50%,#98A2AE 100%)}
[data-tema="escuro"] .simbolo{background-image:linear-gradient(100deg,#7FE6FF 0%,#38BDFF 45%,#009CFF 100%)}
[data-tema="escuro"] .rot{color:var(--ciano)}
[data-tema="escuro"] .lead{color:var(--apoio)}
[data-tema="escuro"] .tbd{background:rgba(251,191,36,.14);color:#FCD34D}
[data-tema="escuro"] .em-breve,[data-tema="escuro"] .selo{background:rgba(127,230,255,.12);color:var(--ciano)}
[data-tema="escuro"] .fim:before{background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(56,189,255,.22) 0%,rgba(0,156,255,.06) 45%,rgba(0,156,255,0) 70%)}

/* O menu fica fora dos blocos: o base.js põe .claro nele quando o bloco que passa embaixo é claro. */
.topo nav{transition:background-color .4s,box-shadow .4s}
.topo.claro nav{background:oklch(0.99 0.004 240/.84);box-shadow:0 0 0 1px rgba(26,35,48,.1),0 14px 30px -20px rgba(26,35,48,.4)}
.topo.claro .marca img + img{filter:brightness(0);opacity:.86}
.topo.claro .links{color:oklch(0.43 0.03 250)}
.topo.claro .links > a:hover,.topo.claro .links .mn-b:hover,.topo.claro .links .mn-b[aria-expanded="true"]{color:oklch(0.22 0.025 250)}
.topo.claro .chev{color:oklch(0.43 0.03 250)}
.topo.claro .mn .et{background:#D9E8FF;color:#0B3E8A}
.topo.claro .mn-p{background:oklch(0.995 0.003 240);box-shadow:0 0 0 1px rgba(26,35,48,.1),0 30px 60px -24px rgba(26,35,48,.45)}
.topo.claro .mn-p a{color:oklch(0.22 0.025 250)}
.topo.claro .mn-p a small{color:oklch(0.43 0.03 250)}
.topo.claro .mn-p a:hover,.topo.claro .mn-p a:focus-visible{background:#EEF1F4}
.topo.claro .mn-p a[aria-current]{color:#0B3E8A}
.topo.claro .entrar .mn-b{background:linear-gradient(180deg,#2C3746,#1A2330);color:oklch(0.97 0.006 240);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px -14px rgba(26,35,48,.7)}
.topo.claro .entrar .chev{color:oklch(0.97 0.006 240)}
.topo.claro .hamb{background:#E6EAEE;color:oklch(0.22 0.025 250)}
@media (max-width:980px){
  .topo.claro .links{background:oklch(0.995 0.003 240);box-shadow:0 0 0 1px rgba(26,35,48,.1),0 24px 50px -8px rgba(26,35,48,.45)}
  .topo.claro .links > a,.topo.claro .links .mn-b{color:oklch(0.22 0.025 250)}
  .topo.claro .links .mn-b{color:oklch(0.5 0.03 250)}
}

/* A virada entre claro e escuro, ligada a um fato da cena, passa por um trecho de céu (azul acinzentado no alto,
   azul bem claro embaixo) em vez de cortar. Na cena presa é uma folha de três telas que desce (noite) ou sobe (manhã):
   a página leva --v de 0 a 1, parando em 0.5 com o céu na tela, e no fim sobra só o terço de cor cheia.
   Na página empilhada o bloco marcado com data-vira abre com esse céu, da altura de --pausa, mais curta na tela estreita. */
.virada{display:none}
.im .virada{display:block;position:absolute;left:0;right:0;height:300%;pointer-events:none;will-change:transform}
.virada.noite{top:0;transform:translateY(calc((var(--v,0) - 1) * 100%));background:linear-gradient(180deg,oklch(0.115 0.02 252) 0,oklch(0.135 0.02 255) 33.4%,oklch(0.27 0.045 248) 39%,oklch(0.42 0.07 244) 45%,oklch(0.62 0.08 238) 52%,oklch(0.8 0.055 237) 66%,oklch(0.9 0.035 240) 80%,oklch(0.965 0.008 240/0) 100%)}
.virada.manha{bottom:0;transform:translateY(calc((1 - var(--v,0)) * 100%));background:linear-gradient(0deg,oklch(0.965 0.008 240) 0,oklch(0.965 0.008 240) 33.4%,oklch(0.9 0.035 240) 46%,oklch(0.8 0.055 237) 60%,oklch(0.62 0.08 238) 80%,oklch(0.42 0.07 244) 88%,oklch(0.27 0.045 248) 94%,oklch(0.135 0.02 255/0) 100%)}
[data-tema][data-vira]{--pausa:clamp(260px,46vh,440px);padding-top:calc(var(--pausa) + clamp(56px,9vh,104px))}
[data-tema="escuro"][data-vira]{background:linear-gradient(180deg,oklch(0.965 0.008 240) 0,oklch(0.9 0.035 240) calc(var(--pausa) * .14),oklch(0.8 0.055 237) calc(var(--pausa) * .36),oklch(0.62 0.08 238) calc(var(--pausa) * .6),oklch(0.42 0.07 244) calc(var(--pausa) * .8),oklch(0.27 0.045 248) calc(var(--pausa) * .94),var(--chao) calc(var(--pausa) * 1.1))}
[data-tema="claro"][data-vira]{background:linear-gradient(180deg,oklch(0.135 0.02 255) 0,oklch(0.27 0.045 248) calc(var(--pausa) * .07),oklch(0.42 0.07 244) calc(var(--pausa) * .15),oklch(0.62 0.08 238) calc(var(--pausa) * .28),oklch(0.8 0.055 237) calc(var(--pausa) * .54),oklch(0.9 0.035 240) calc(var(--pausa) * .8),var(--chao) calc(var(--pausa) * 1.08))}
@media (max-width:980px){
  [data-tema][data-vira]{--pausa:clamp(140px,21vh,190px)}
}

/* A régua de texto, os botões e o fundo da abertura são os da home (home-nova-2-apple/apple.css). Vêm copiados, não
   importados: lá eles moram junto das seções da própria home (.sec, .s1, h1 e h2 soltos), que remontariam estas páginas. */
:root{
  --t-h1:clamp(38.4px,9vw,64px);--t-h2:clamp(38.4px,6.4vw,48px);--t-apoio:clamp(17px,min(2.6vw,2.6svh),26px);--t-corpo:15px;--t-btn:17px;
  --claro:oklch(0.97 0.006 240);
  --nevoa:oklch(0.965 0.008 240);
  --abertura:radial-gradient(ellipse 80% 50% at 50% 100%,oklch(0.3 0.06 245/.55),transparent 70%),oklch(0.11 0.012 255);
}
@media (max-width:599px){
  :root{--t-h1:40px;--t-h2:32px;--t-apoio:16px;--t-btn:16px}
}
.t1,.t2{font-weight:500;line-height:1.1}
.t1,.fim .t2{font-size:var(--t-h1);letter-spacing:normal;line-height:1.1}
.t2{font-size:var(--t-h2);letter-spacing:-.02em}
.lead{font-size:17px;font-weight:500;line-height:1.45;letter-spacing:-.005em}
.abre .lead,.abre-tx .lead{font-size:var(--t-apoio);letter-spacing:-.015em}
.etapas li,.papel p{font-size:var(--t-corpo)}
.rot,.trilha li{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.08em}
.lk{letter-spacing:-.005em}
.plano h3{font-size:30px;font-weight:500;line-height:1.12;letter-spacing:-.03em}
.faq summary{font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
.faq details p{font-size:17px;font-weight:500;line-height:1.5;letter-spacing:-.005em}
@media (max-width:599px){
  .lead{font-size:16px}
  .plano h3{font-size:22px}
  .faq summary{font-size:17px}
  .faq details p{font-size:16px}
}

.hero.abre{background:var(--abertura)}
.hero.abre:before{content:none}

/* a.btn: as maquetes de site dentro das cenas têm o próprio span.btn, que não é botão da página */
a.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;-webkit-user-select:none;user-select:none;transition:transform .12s ease-out,filter .25s,background-color .25s,box-shadow .25s}
a.btn:active{transform:scale(.97);transition-duration:.08s}
.btn.pri{background:oklch(0.975 0.004 250);color:oklch(0.16 0.01 250);box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 5px oklch(1 0 0/.16),0 12px 26px -14px oklch(0 0 0/.55)}
.btn.fan{background:color-mix(in oklch,currentColor 9%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 color-mix(in oklch,currentColor 22%,transparent),inset 0 0 0 1px color-mix(in oklch,currentColor 14%,transparent)}
.btn.fan:active{background:oklch(0.975 0.004 250);color:oklch(0.16 0.01 250);box-shadow:inset 0 1px 0 oklch(1 0 0)}
.lk{gap:8px;font-weight:600;font-size:16px;color:oklch(0.8 0.02 245);transition:color .25s}
.lk:after{content:"";width:7px;height:7px;border:solid currentColor;border-width:1.8px 1.8px 0 0;transform:rotate(45deg);transition:transform .35s var(--saida)}
[data-tema="claro"] .btn.pri{box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 1px oklch(0.2 0.02 250/.1),0 0 0 5px oklch(0.2 0.02 250/.05),0 12px 26px -14px oklch(0.2 0.03 250/.45)}
[data-tema="claro"] .lk{color:oklch(0.52 0.19 254)}
[data-tema="escuro"] .btn.pri{box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 5px oklch(1 0 0/.16),0 12px 26px -14px oklch(0 0 0/.55)}
[data-tema="escuro"] .lk{color:oklch(0.8 0.02 245)}
@media (hover:hover) and (pointer:fine){
  a.btn:hover{filter:brightness(1.08)}
  .btn.fan:hover{box-shadow:inset 0 1px 0 color-mix(in oklch,currentColor 30%,transparent),inset 0 0 0 1px color-mix(in oklch,currentColor 24%,transparent)}
  .lk:hover{color:var(--claro)}
  .lk:hover:after{transform:translateX(4px) rotate(45deg)}
  [data-tema="claro"] .lk:hover{color:oklch(0.52 0.19 254);text-decoration:underline;text-underline-offset:4px}
  [data-tema="escuro"] .lk:hover{color:var(--claro);text-decoration:none}
}
@media (max-width:859px){
  .btns .btn{flex:1 1 auto}
}