/* ============================================================================
   ORAHTEC — sistema visual do site institucional
   Extraído da logo: azul-escuro profundo, azul elétrico, dourado, folha, traço
   de circuito. Identidade da EMPRESA — deliberadamente diferente do verde
   #2D4029 do ORAH Gestão, que é a identidade do PRODUTO.
   Tema único (escuro), pintado explicitamente. Não herda tema de host.
   ========================================================================== */

:root{
  /* ---- fundo, medido nos cantos da logo nova (#010616) ---- */
  --tinta-900:#010616;
  --tinta-850:#04091A;
  --tinta-800:#061024;
  --tinta-700:#0A1832;
  --tinta-600:#0E2145;
  --tinta-500:#143060;

  --linha:rgba(125,170,235,.15);
  --linha-forte:rgba(125,170,235,.30);
  --vidro:rgba(14,33,69,.55);

  /* ---- azul eletrico, medido no anel da logo ---- */
  --azul-300:#7FB8FC;
  --azul-400:#3D92FA;
  --azul-500:#0070F8;   /* anel — cor principal da marca */
  --azul-600:#0052C4;
  --azul-700:#0038A0;
  --aco-400:#3D92FA;
  --ciano-400:#5AA8FF;

  /* ---- DESTAQUE: a marca nova NAO tem dourado. O acento quente saiu e o
     lugar dele e ocupado por branco-gelo, que e a outra cor do logotipo.
     Os nomes --ouro-* ficam por enquanto porque 11 usos no HTML dependem
     deles; renomear e tarefa separada, sem valor visual. ---- */
  --ouro-300:#FFFFFF;
  --ouro-400:#F2F6FB;
  --ouro-500:#D6E2F0;

  /* ---- verde: NAO e cor de marca, e cor SEMANTICA de estado.
     "Em operacao" precisa de um sinal que nao se confunda com o azul. ---- */
  --folha-400:#3DD68C;
  --folha-500:#2BB273;
  --folha-600:#1F8A59;

  /* ---- branco do logotipo ---- */
  --prata-050:#FBFBFC;
  --prata-100:#E4EAF2;
  --prata-200:#C6D2E2;
  --prata-300:#9FB0C6;
  --prata-400:#74869E;
  --prata-500:#53657C;

  --raio:14px; --raio-sm:9px; --raio-lg:22px; --larg:1160px; --larg-texto:74ch;
  --fonte-display:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fonte-texto:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --sombra:0 20px 60px -22px rgba(0,0,0,.9);
  --brilho-azul:0 0 0 1px rgba(0,112,248,.35),0 12px 40px -14px rgba(0,112,248,.55);
  --brilho-logo:drop-shadow(0 14px 34px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(0,112,248,.35));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--tinta-900);
  background-image:radial-gradient(ellipse 120% 85% at 50% 0%,#0E2145 0%,var(--tinta-900) 64%);
  background-attachment:fixed;
  color:var(--prata-100);
  font-family:var(--fonte-texto);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--fonte-display);line-height:1.14;letter-spacing:-.02em;margin:0 0 .6em;color:var(--prata-050);font-weight:600}
h1{font-size:clamp(2.1rem,1.35rem + 3.2vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.65rem,1.2rem + 1.9vw,2.6rem);letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.42rem)}
h4{font-size:1.02rem;letter-spacing:.01em}
p{margin:0 0 1.1em;max-width:var(--larg-texto)}
a{color:var(--azul-400);text-decoration:none}
a:hover{color:var(--azul-500)}
strong{color:var(--prata-050);font-weight:600}
img,svg{max-width:100%;height:auto;display:block}
::selection{background:rgba(0,112,248,.3);color:#fff}
:focus-visible{outline:2px solid var(--azul-400);outline-offset:3px;border-radius:4px}

.env{width:100%;max-width:var(--larg);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.secao{padding-block:clamp(3.6rem,8vw,7rem);position:relative}
.secao--fina{padding-block:clamp(2.6rem,5vw,4.2rem)}
.pular{position:absolute;left:-9999px}
.pular:focus{left:1rem;top:1rem;z-index:200;background:var(--azul-500);color:#010616;padding:.7rem 1.1rem;border-radius:var(--raio-sm);font-weight:600}

/* ---------- malha de circuito (fundo) ---------------------------------- */
.malha{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.malha::before{
  content:'';position:absolute;inset:-20%;
  background-image:
    linear-gradient(rgba(0,112,248,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,112,248,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 42%,#000 0%,transparent 78%);
}
.aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.aura--azul{background:rgba(0,56,160,.30)}
.aura--ouro{background:rgba(242,246,251,.16)}
.aura--folha{background:rgba(43,178,115,.16)}

/* ---------- cabeçalho --------------------------------------------------- */
.topo{position:sticky;top:0;z-index:60;background:rgba(1,6,22,.80);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo__env{display:flex;align-items:center;gap:1.4rem;min-height:72px}
.marca{display:flex;align-items:center;gap:.62rem;flex-shrink:0}
.marca svg{width:34px;height:34px}
.marca__txt{display:flex;flex-direction:column;line-height:1}
/* Reproduz o tratamento do logotipo: ORAH cromado, TEC azul, TECNOLOGIA dourado.
   Usado onde a imagem seria pesada demais (header, rodape). A imagem propria
   entra no heroi e no card social. */
.marca__nome{font-family:var(--fonte-display);font-weight:700;font-size:1.2rem;letter-spacing:.075em;
  background:linear-gradient(180deg,#FFFFFF 20%,#DDE7F3 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.marca__nome i{font-style:normal}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .marca__nome{color:var(--azul-400);-webkit-text-fill-color:currentColor}
}
.marca__sub{font-size:.555rem;letter-spacing:.235em;text-transform:uppercase;color:var(--ouro-500);margin-top:.26rem}
.marca img,.marca svg{filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}

/* ---------- assinatura da marca em destaque (heroi) --------------------- */
.assinatura{display:grid;justify-items:center;text-align:center}
/* Tres tetos, e vence o menor: a largura da coluna, um maximo em px e um teto
   por altura de janela. O teto em vh e o que impede o selo de nascer cortado —
   travar so em px conserta a tela que eu testei, travar em vh conserta
   qualquer altura. Conferido numa janela util de 640px: base do selo a 614px,
   folga de 26px ate a borda. */
.assinatura picture,.assinatura img{width:min(100%,540px,79vh);height:auto;display:block}
.assinatura img{filter:var(--brilho-logo)}
.assinatura__lema{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55rem .9rem;
  margin-top:1.15rem;padding-top:1.05rem;border-top:1px solid var(--linha);width:min(100%,470px);
  font-family:var(--fonte-display);font-size:.68rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--prata-300)}
.assinatura__lema b{font-weight:500;color:var(--prata-300)}
.assinatura__lema span{width:5px;height:5px;border-radius:50%;background:var(--azul-500);box-shadow:0 0 9px var(--ciano-400)}
@media (max-width:420px){.assinatura__lema{font-size:.6rem;letter-spacing:.22em}}

.nav{margin-left:auto;display:flex;align-items:center;gap:.3rem}
/* :not(.btn) e a correcao de um defeito real: `.nav a` tem especificidade
   (0,1,1) e vencia `.btn--ouro` (0,1,0), sobrescrevendo a cor do texto do botao
   por prata claro. Sobre o dourado isso dava 1,12:1 de contraste — texto
   invisivel. Excluir .btn resolve para qualquer botao que venha a existir no
   menu, e nao so para o "Falar com a gente". */
.nav a:not(.btn){color:var(--prata-300);font-size:.925rem;font-weight:500;padding:.5rem .78rem;border-radius:var(--raio-sm);transition:color .18s,background .18s}
.nav a:not(.btn):hover{color:var(--prata-050);background:rgba(0,112,248,.09)}
.nav a:not(.btn)[aria-current="page"]{color:var(--prata-050);background:rgba(0,112,248,.13)}
.nav__cta{margin-left:.5rem}

.hamb{display:none;margin-left:auto;background:transparent;border:1px solid var(--linha-forte);border-radius:var(--raio-sm);width:42px;height:42px;cursor:pointer;color:var(--prata-100);align-items:center;justify-content:center}
.hamb span{display:block;width:17px;height:1.6px;background:currentColor;position:relative;transition:background .18s}
.hamb span::before,.hamb span::after{content:'';position:absolute;left:0;width:17px;height:1.6px;background:currentColor;transition:transform .22s}
.hamb span::before{top:-5.5px}.hamb span::after{top:5.5px}
.hamb[aria-expanded="true"] span{background:transparent}
.hamb[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:900px){
  .hamb{display:flex}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:.15rem;background:rgba(4,9,26,.985);backdrop-filter:blur(16px);border-bottom:1px solid var(--linha);padding:.9rem clamp(1.1rem,4vw,2rem) 1.5rem;margin:0;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;max-height:calc(100dvh - 72px);overflow-y:auto}
  .nav[data-aberto="true"]{opacity:1;visibility:visible;transform:none}
  .nav a:not(.btn){padding:.82rem .7rem;font-size:1.02rem;border-bottom:1px solid rgba(125,170,235,.08)}
  .nav__cta{margin:.7rem 0 0;text-align:center}
}

/* ---------- botões ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--fonte-display);font-weight:600;font-size:.94rem;letter-spacing:.005em;padding:.78rem 1.35rem;border-radius:var(--raio-sm);border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;text-align:center}
.btn:hover{transform:translateY(-1.5px)}
.btn svg{width:17px;height:17px;flex-shrink:0}
/* Preto puro, medido: 8,44:1 sobre o tom mais escuro do degrade (AAA).
   O preto-quente anterior dava 6,97:1 — passava, mas menos. */
.btn--ouro{background:linear-gradient(135deg,var(--ouro-400),var(--ouro-500));color:#000;box-shadow:0 10px 30px -12px rgba(242,246,251,.65)}
.btn--ouro:hover{color:#000;box-shadow:0 16px 40px -14px rgba(242,246,251,.8)}
.btn--azul{background:linear-gradient(135deg,var(--azul-500),var(--azul-700));color:#F2F8FD;box-shadow:0 10px 30px -12px rgba(0,112,248,.6)}
.btn--azul:hover{color:#fff}
.btn--linha{border-color:var(--linha-forte);color:var(--prata-100);background:rgba(14,33,69,.5)}
.btn--linha:hover{border-color:var(--azul-500);color:var(--prata-050);background:rgba(0,112,248,.1)}
.btn--bloco{width:100%}
.acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* ---------- etiquetas --------------------------------------------------- */
.etiq{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fonte-display);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.42rem .82rem;border-radius:100px;border:1px solid var(--linha-forte);background:rgba(14,33,69,.6);color:var(--prata-300);margin-bottom:1.5rem}
.etiq::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--azul-500);box-shadow:0 0 10px var(--azul-500)}
.etiq--ouro::before{background:var(--ouro-500);box-shadow:0 0 10px var(--ouro-500)}
.etiq--folha::before{background:var(--folha-500);box-shadow:0 0 10px var(--folha-500)}

.pilula{display:inline-flex;align-items:center;gap:.42rem;font-size:.755rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .68rem;border-radius:100px;border:1px solid var(--linha-forte);color:var(--prata-300);background:rgba(14,33,69,.5)}
.pilula--viva{color:var(--folha-400);border-color:rgba(61,214,140,.4);background:rgba(43,178,115,.1)}
.pilula--estudo{color:var(--prata-400)}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(3.5rem,9vw,7.5rem);overflow:hidden;border-bottom:1px solid var(--linha);background:radial-gradient(ellipse 100% 80% at 50% 0%,var(--tinta-700) 0%,var(--tinta-900) 68%)}
.hero__env{position:relative;z-index:2}
.hero__grade{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
/* O selo avanca sobre a margem da pagina, a direita, em vez de roubar largura
   da coluna de texto — que roubaria corpo do titulo em troca de nada na tela
   de 768px, onde quem limita e a ALTURA da janela, nao a largura.
   O max() e o freio: no maximo 4rem de avanco, e em tela estreita o calc
   vira positivo sozinho e nao ha avanco nenhum. Sem estouro horizontal. */
@media (min-width:941px){
  .hero__arte{margin-right:max(-4rem,calc((100vw - 1160px) / -2 + 1.5rem))}
}
/* O selo desce ate a altura do <h1>, e nao ate a da etiqueta acima dele. */
.hero__arte{margin-top:clamp(0rem,1.5vh,1.5rem)}
@media (max-width:940px){.hero__grade{grid-template-columns:1fr;gap:2.4rem}.hero__arte{order:-1;max-width:400px;margin-inline:auto}}
@media (max-height:780px) and (min-width:941px){.hero{padding-block:clamp(1.5rem,4vh,3rem)}}
@media (max-width:940px){.hero__arte{margin-top:0}}
.hero__titulo strong{background:linear-gradient(120deg,var(--azul-400),var(--azul-500) 45%,var(--ouro-400));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.hero__linha{font-size:clamp(1.02rem,.97rem + .4vw,1.22rem);color:var(--prata-300);max-width:56ch}
.hero__selos{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.1rem;padding-top:1.6rem;border-top:1px solid var(--linha)}

/* ---------- cartões ----------------------------------------------------- */
.grade{display:grid;gap:1.1rem}
.grade--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grade--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grade--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}

.cartao{position:relative;background:linear-gradient(160deg,rgba(20,48,96,.75),rgba(6,16,36,.75));border:1px solid var(--linha);border-radius:var(--raio);padding:1.6rem 1.5rem;transition:border-color .22s,transform .22s,box-shadow .22s;overflow:hidden}
.cartao::before{content:'';position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:linear-gradient(90deg,transparent,rgba(0,112,248,.5),transparent);opacity:0;transition:opacity .22s}
.cartao:hover{border-color:var(--linha-forte);transform:translateY(-3px);box-shadow:var(--sombra)}
.cartao:hover::before{opacity:1}
.cartao h3{margin-bottom:.55rem}
.cartao p{color:var(--prata-300);font-size:.955rem;margin-bottom:0}
.cartao__num{font-family:var(--fonte-display);font-size:.75rem;font-weight:700;letter-spacing:.16em;color:var(--azul-500);display:block;margin-bottom:.9rem}
a.cartao{display:block;color:inherit}
a.cartao:hover{color:inherit}

.icone{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:1.15rem;border:1px solid var(--linha-forte);background:rgba(0,112,248,.09);color:var(--azul-400)}
.icone svg{width:21px;height:21px}
.icone--ouro{background:rgba(242,246,251,.1);color:var(--ouro-400)}
.icone--folha{background:rgba(43,178,115,.1);color:var(--folha-400)}

/* valor / princípio */
.valor{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;padding:1.5rem 0;border-bottom:1px solid var(--linha)}
.valor:last-child{border-bottom:0}
.valor__n{font-family:var(--fonte-display);font-size:.8rem;font-weight:700;color:var(--azul-500);letter-spacing:.1em;padding-top:.35rem;min-width:2.2rem}
.valor h3{margin-bottom:.4rem}
.valor p{color:var(--prata-300);margin-bottom:0;font-size:.97rem}
.valor p + p{margin-top:.7rem}

/* destaque / citação */
.destaque{border-left:2px solid var(--ouro-500);padding:.2rem 0 .2rem 1.35rem;margin:2.2rem 0;max-width:62ch}
.destaque p{font-family:var(--fonte-display);font-size:clamp(1.08rem,1rem + .55vw,1.4rem);line-height:1.5;color:var(--prata-050);margin:0;letter-spacing:-.015em}
.destaque cite{display:block;font-family:var(--fonte-texto);font-style:normal;font-size:.86rem;color:var(--prata-400);margin-top:.85rem;letter-spacing:.02em}

/* painel */
.painel{background:linear-gradient(150deg,rgba(20,48,96,.8),rgba(1,6,22,.92));border:1px solid var(--linha);border-radius:var(--raio-lg);padding:clamp(1.7rem,4vw,3rem);position:relative;overflow:hidden}
.painel--ouro{border-color:rgba(242,246,251,.26)}

/* lista com marcador */
.lista{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.72rem}
.lista li{position:relative;padding-left:1.7rem;color:var(--prata-300);font-size:.96rem}
.lista li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--azul-500);transform:rotate(45deg)}
.lista--ouro li::before{background:var(--ouro-500)}
.lista--folha li::before{background:var(--folha-500)}
.lista strong{display:block;color:var(--prata-050);margin-bottom:.12rem;font-weight:600}

/* tabela */
.tab-env{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:rgba(6,16,36,.55);margin-bottom:1.4rem}
table{width:100%;border-collapse:collapse;font-size:.925rem;min-width:520px}
th,td{text-align:left;padding:.85rem 1.15rem;border-bottom:1px solid var(--linha)}
th{font-family:var(--fonte-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--prata-400);font-weight:600;background:rgba(14,33,69,.5)}
td{color:var(--prata-300)}
tr:last-child td{border-bottom:0}
td strong{color:var(--prata-050)}

/* nota / aviso honesto */
.nota{font-size:.855rem;color:var(--prata-400);border-left:1px solid var(--linha-forte);padding-left:.95rem;max-width:66ch}
.nota strong{color:var(--prata-300)}

/* passos */
.passos{counter-reset:p;display:grid;gap:1.1rem;margin:0;padding:0;list-style:none}
.passos li{counter-increment:p;position:relative;padding-left:3.2rem}
.passos li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:-.1rem;font-family:var(--fonte-display);font-size:.85rem;font-weight:700;color:var(--azul-500);border:1px solid var(--linha-forte);border-radius:9px;width:2.3rem;height:2.3rem;display:grid;place-items:center;background:rgba(0,112,248,.07)}
.passos h4{margin-bottom:.25rem;color:var(--prata-050)}
.passos p{color:var(--prata-300);font-size:.95rem;margin:0}

/* chamada final */
.chamada{position:relative;overflow:hidden;border-top:1px solid var(--linha);background:radial-gradient(ellipse 90% 120% at 50% 100%,var(--tinta-600) 0%,var(--tinta-900) 65%)}
.chamada__env{position:relative;z-index:2;text-align:center;display:grid;justify-items:center}
.chamada p{margin-inline:auto}
.chamada .acoes{justify-content:center}

/* formulário */
.form{display:grid;gap:1.05rem}
.campo{display:grid;gap:.4rem}
.campo label{font-family:var(--fonte-display);font-size:.775rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--prata-400)}
.campo input,.campo select,.campo textarea{
  font-family:inherit;font-size:.97rem;color:var(--prata-050);
  background:rgba(1,6,22,.78);border:1px solid var(--linha-forte);border-radius:var(--raio-sm);
  padding:.78rem .95rem;width:100%;transition:border-color .18s,box-shadow .18s}
.campo textarea{resize:vertical;min-height:130px;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul-500);box-shadow:0 0 0 3px rgba(0,112,248,.16)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--prata-500)}
.campo select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8DA5' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .85rem center;background-size:17px;padding-right:2.6rem}
.form__dupla{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:560px){.form__dupla{grid-template-columns:1fr}}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--prata-400);line-height:1.55}
.consent input{width:17px;height:17px;margin-top:.18rem;accent-color:var(--azul-500);flex-shrink:0}

/* canais de contato */
.canal-item{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 0;border-bottom:1px solid var(--linha)}
.canal-item:last-child{border-bottom:0}
.canal-item .icone{margin-bottom:0;width:38px;height:38px;flex-shrink:0}
.canal-item .icone svg{width:18px;height:18px}
.canal-item h4{margin-bottom:.1rem}
.canal-item p{margin:0;font-size:.9rem;color:var(--prata-400)}

/* rodapé */
.rodape{border-top:1px solid var(--linha);background:var(--tinta-850);padding-block:clamp(2.6rem,5vw,3.8rem) 0}
.rodape__grade{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.2rem}
@media (max-width:860px){.rodape__grade{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:520px){.rodape__grade{grid-template-columns:1fr}}
.rodape h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--prata-400);margin-bottom:1rem}
.rodape ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.rodape a{color:var(--prata-300);font-size:.92rem}
.rodape a:hover{color:var(--azul-400)}
.rodape p{font-size:.9rem;color:var(--prata-400);max-width:38ch}
.rodape__base{margin-top:2.6rem;padding-block:1.4rem;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between}
.rodape__base small{font-size:.815rem;color:var(--prata-500);line-height:1.6}

/* revelar ao rolar.
   Esconde APENAS quando o script inline marcou <html class="js">. Sem JS, com o
   site.js fora do ar ou se ele demorar demais, o conteudo aparece inteiro:
   texto escondido que depende de script para existir e uma regra que se viola
   em silencio. */
.js [data-revelar]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.js [data-revelar].visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-revelar]{opacity:1;transform:none;transition:none}
  .btn:hover,.cartao:hover{transform:none}
  .pulso{animation:none !important}
}
.pulso{animation:pulso 3.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.55}50%{opacity:1}}

.centro{text-align:center;margin-inline:auto}
.centro p{margin-inline:auto}
.mb0{margin-bottom:0}
.mt2{margin-top:2rem}

/* ============================================================================
   CAMADA DINAMICA — 09/09/2026
   Menu transparente que solidifica ao rolar, heroi de sangria total, molduras
   de tela, secoes numeradas e revelacao por rolagem.
   ========================================================================== */

/* ---------- menu transparente sobre o heroi ---------------------------- */
/* Transparente DE VERDADE: a regra base .topo aplica backdrop-filter:blur(14px),
   e sem desliga-lo a cor some mas o desfoque fica -- a faixa do menu aparece
   como uma tira borrada sobre a foto. O blur volta so quando solidifica. */
.topo--flutuante{position:fixed;top:0;left:0;right:0;background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.topo--flutuante.solido{background:rgba(1,6,22,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--linha)}
body.tem-topo-flutuante{padding-top:0}

/* ---------- heroi de sangria total -------------------------------------- */
.palco{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 15%,#0A1832 0%,var(--tinta-900) 62%)}
.palco__fundo{position:absolute;inset:0;z-index:0;pointer-events:none}
.palco__env{position:relative;z-index:3;padding-block:clamp(6rem,14vh,9rem) clamp(3rem,8vh,5rem)}
.palco h1{font-size:clamp(2.4rem,1.4rem + 4vw,5rem);letter-spacing:-.04em;margin-bottom:.5em}
.palco__linha{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);color:var(--prata-300);max-width:52ch}

/* orbes de luz em movimento lento */
.orbe{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:vagar 22s ease-in-out infinite}
.orbe--a{width:46vw;height:46vw;background:rgba(0,112,248,.42);top:-14%;left:-10%}
.orbe--b{width:34vw;height:34vw;background:rgba(242,246,251,.20);bottom:-12%;right:-6%;animation-delay:-8s}
.orbe--c{width:28vw;height:28vw;background:rgba(61,214,140,.22);top:38%;right:24%;animation-delay:-15s}
@keyframes vagar{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4%,-6%) scale(1.09)}
  66%{transform:translate(-5%,4%) scale(.94)}}

/* grade de circuito que desliza */
.palco__grade{position:absolute;inset:-50%;opacity:.5;
  background-image:linear-gradient(rgba(0,112,248,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,112,248,.09) 1px,transparent 1px);
  background-size:72px 72px;animation:desliza 60s linear infinite;
  mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000 0%,transparent 75%)}
@keyframes desliza{to{transform:translate(72px,72px)}}

/* seta de rolagem */
.rolar{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:4;
  display:grid;justify-items:center;gap:.5rem;color:var(--prata-400);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;animation:pular 2.4s ease-in-out infinite}
.rolar svg{width:20px;height:20px}
@keyframes pular{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ---------- moldura de tela do produto ---------------------------------- */
.moldura{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--linha-forte);
  background:var(--tinta-700);box-shadow:0 30px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.moldura::before{content:'';display:block;height:26px;background:linear-gradient(var(--tinta-600),var(--tinta-700));
  border-bottom:1px solid var(--linha)}
.moldura::after{content:'';position:absolute;top:9px;left:12px;width:8px;height:8px;border-radius:50%;
  background:#F0554A;box-shadow:14px 0 0 #F2F6FB,28px 0 0 #3DD68C}
.moldura img{display:block;width:100%}
.moldura:hover{transform:translateY(-5px);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,112,248,.35)}
.moldura--larga{max-width:1100px;margin-inline:auto}

/* ---------- secao numerada ---------------------------------------------- */
.num{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.num__d{font-family:var(--fonte-display);font-size:.78rem;font-weight:700;letter-spacing:.22em;color:var(--azul-500)}
.num__l{flex:1;height:1px;background:linear-gradient(90deg,var(--linha-forte),transparent)}

/* ---------- vitrine de telas -------------------------------------------- */
.vitrine{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.6rem}
.vitrine__item{display:grid;gap:1rem}
.vitrine__item h3{margin:0;font-size:1.12rem}
.vitrine__item p{margin:0;color:var(--prata-400);font-size:.93rem}

/* ---------- faixa de metrica -------------------------------------------- */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.metrica{background:var(--tinta-800);padding:1.6rem 1.3rem;text-align:center}
.metrica b{display:block;font-family:var(--fonte-display);font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);
  font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(160deg,#FFFFFF,var(--azul-400));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.metrica span{display:block;margin-top:.35rem;font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--prata-400)}

/* ---------- cartao clicavel de pilar ------------------------------------ */
.pilar{position:relative;display:block;color:inherit;border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.7rem 1.5rem;background:linear-gradient(160deg,rgba(20,48,96,.6),rgba(6,16,36,.6));
  overflow:hidden;transition:border-color .3s,transform .3s}
.pilar::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),
  rgba(0,112,248,.16),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.pilar:hover{border-color:var(--linha-forte);transform:translateY(-3px);color:inherit}
.pilar:hover::after{opacity:1}
.pilar__mais{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.85rem;
  font-weight:600;color:var(--azul-400)}

@media (prefers-reduced-motion:reduce){
  .orbe,.palco__grade,.rolar{animation:none}
  .moldura:hover,.pilar:hover{transform:none}
}

/* ---------- ilustracoes de secao ---------------------------------------- */
.ilustra{display:block;width:100%;height:auto}
.ilustra--faixa{max-width:760px;margin-inline:auto}
.ilustra__caixa{border:1px solid var(--linha);border-radius:var(--raio);padding:1.6rem 1.4rem;
  background:linear-gradient(160deg,rgba(20,48,96,.45),rgba(6,16,36,.45))}

/* ---------- sanfona: texto que so abre se a pessoa quiser --------------- */
.sanfona{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:rgba(6,16,36,.5)}
.sanfona + .sanfona{margin-top:.6rem}
.sanfona summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;display:flex;align-items:center;gap:.8rem;
  font-family:var(--fonte-display);font-weight:600;font-size:.98rem;color:var(--prata-100);
  transition:background .2s}
.sanfona summary::-webkit-details-marker{display:none}
.sanfona summary:hover{background:rgba(0,112,248,.07)}
.sanfona summary::after{content:'';margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--azul-400);border-bottom:2px solid var(--azul-400);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s}
.sanfona[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.sanfona__corpo{padding:0 1.2rem 1.15rem;color:var(--prata-400);font-size:.94rem;line-height:1.65}
.sanfona__corpo p{margin:0 0 .7rem;max-width:none}
.sanfona__corpo p:last-child{margin-bottom:0}
.sanfona__n{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--azul-500);flex-shrink:0}

/* ============================================================================
   CAMADA DE ACABAMENTO — 10/09/2026
   Quatro correcoes pedidas: profundidade, hierarquia tipografica, ritmo entre
   secoes, e cartoes que flutuam como na referencia de agencia.
   ========================================================================== */

/* ---------- 1. HIERARQUIA TIPOGRAFICA -----------------------------------
   O problema nao era tamanho, era CONTRASTE: titulo, subtitulo e corpo
   ficavam perto demais. Agora a escala abre e o peso acompanha.           */
h1{font-size:clamp(2.5rem,1.5rem + 4.2vw,5.2rem);letter-spacing:-.045em;font-weight:700;line-height:1.04}
h2{font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem);letter-spacing:-.038em;font-weight:700;line-height:1.08}
h3{font-size:clamp(1.18rem,1.06rem + .55vw,1.5rem);letter-spacing:-.02em;font-weight:600}
h4{font-size:1.0rem;letter-spacing:-.005em;font-weight:600}

/* texto de abertura de secao: maior que o corpo, menor que o titulo */
.abre{font-size:clamp(1.1rem,1rem + .65vw,1.42rem);line-height:1.55;color:var(--prata-300);
  font-weight:400;letter-spacing:-.012em;max-width:46ch}
.corpo-min{font-size:.92rem;line-height:1.62;color:var(--prata-400)}

/* olho editorial: numero grande e fino, como marcador de secao */
.olho{font-family:var(--fonte-display);font-size:clamp(3.5rem,2rem + 6vw,7rem);font-weight:700;
  line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(125,170,235,.22);
  display:block;margin-bottom:-.15em;pointer-events:none;user-select:none}

/* ---------- 2. PROFUNDIDADE E CAMADAS ----------------------------------- */
.vidro{position:relative;border-radius:18px;
  background:linear-gradient(155deg,rgba(30,90,190,.18),rgba(6,16,36,.55));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(125,170,235,.16);
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset,
             0 18px 40px -18px rgba(0,0,0,.9),
             0 60px 120px -60px rgba(0,0,0,1);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .45s}
.vidro::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),transparent 42%)}
.vidro:hover{transform:translateY(-7px);border-color:rgba(125,170,235,.32);
  box-shadow:0 2px 0 rgba(255,255,255,.07) inset,
             0 30px 60px -20px rgba(0,0,0,.95),
             0 80px 150px -60px rgba(0,0,0,1),
             0 0 90px -30px rgba(0,112,248,.5)}

/* halo atras de um elemento em destaque */
.halo{position:relative}
.halo::after{content:'';position:absolute;left:50%;top:55%;translate:-50% -50%;z-index:-1;
  width:120%;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.5;
  background:radial-gradient(circle,rgba(0,112,248,.55),transparent 62%)}
.halo--ouro::after{background:radial-gradient(circle,rgba(242,246,251,.4),transparent 62%)}

/* elemento que rompe a grade — quebra a monotonia */
.rompe{margin-inline:calc(clamp(1.1rem,4vw,2rem) * -1)}
@media (min-width:941px){.rompe{margin-inline:-3.5rem}}

/* ---------- 3. RITMO ENTRE SECOES --------------------------------------
   Antes toda secao tinha o mesmo tratamento. Agora alternam.            */
.secao--escura{background:
  radial-gradient(ellipse 70% 50% at 20% 0%,rgba(0,112,248,.12),transparent 60%),
  var(--tinta-850);border-block:1px solid var(--linha)}
.secao--luz{background:
  radial-gradient(ellipse 60% 60% at 80% 40%,rgba(242,246,251,.07),transparent 60%),
  linear-gradient(180deg,transparent,rgba(22,40,61,.55),transparent)}
.secao--divisa{position:relative}
.secao--divisa::before{content:'';position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(92%,var(--larg));height:1px;
  background:linear-gradient(90deg,transparent,var(--linha-forte),transparent)}

/* grade dividida: texto de um lado, peca do outro, com deslocamento */
.divide{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.divide--invertida > :first-child{order:2}
@media (max-width:940px){.divide{grid-template-columns:1fr;gap:2.2rem}
  .divide--invertida > :first-child{order:0}}
.desloca{transform:translateY(clamp(0px,2vw,32px))}
@media (max-width:940px){.desloca{transform:none}}

@media (prefers-reduced-motion:reduce){.vidro:hover{transform:none}}

/* ============================================================================
   HEROI COM FOTO DE AMBIENTE — 11/09/2026
   Menu transparente sobre a foto, texto em HTML por cima (nao dentro da
   imagem), para continuar legivel no celular e para o buscador.
   ========================================================================== */

.palco--foto{min-height:100svh;display:grid;align-items:center;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 110% 80% at 25% 40%,#0A1832 0%,var(--tinta-900) 70%)}

/* a foto e o ambiente inteiro, de borda a borda, como no modelo */
.palco__foto{position:absolute;inset:0;z-index:0;display:block}
.palco__foto img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:940px){
  .palco__foto img{object-position:68% center}
}

/* veu: escurece a esquerda para o texto e deixa a cena aparecer a direita */
.palco__veu{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(1,6,22,.90) 0%,rgba(1,6,22,.76) 34%,rgba(1,6,22,.44) 60%,rgba(1,6,22,.14) 84%,rgba(1,6,22,.05) 100%)}
@media (max-width:940px){
  .palco__veu{background:linear-gradient(180deg,rgba(1,6,22,.88) 0%,rgba(1,6,22,.78) 45%,rgba(1,6,22,.96) 100%)}
}

.palco--foto .palco__env{position:relative;z-index:3;padding-block:clamp(7rem,16vh,10rem) clamp(3rem,8vh,5rem)}
.palco__texto{max-width:min(100%,640px)}
.palco--foto h1{font-size:clamp(2.3rem,1.3rem + 3.9vw,4.4rem);line-height:1.06;letter-spacing:-.042em;margin-bottom:.6rem}

/* regua azul sob a manchete, como no modelo */
.regua{width:82px;height:3px;border-radius:2px;margin:0 0 1.5rem;
  background:linear-gradient(90deg,var(--azul-500),var(--azul-300))}

.palco--foto .palco__linha{font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.72;
  color:var(--prata-300);max-width:54ch}
.palco--foto .palco__linha strong{color:var(--prata-050);font-weight:600}

/* quatro pilares do metodo, em linha */
.pilares{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:1.4rem 1.2rem}
.pilares li{display:grid;gap:.15rem;color:var(--prata-300);font-size:.85rem;line-height:1.4}
.pilares svg{width:26px;height:26px;color:var(--azul-400);margin-bottom:.6rem}
.pilares b{font-family:var(--fonte-display);font-size:.98rem;font-weight:600;color:var(--prata-050);letter-spacing:-.01em}

/* botao principal da marca: azul eletrico com brilho */
.btn--marca{background:linear-gradient(140deg,var(--azul-400),var(--azul-600));color:#fff;
  box-shadow:0 10px 34px -10px rgba(0,112,248,.75),0 0 0 1px rgba(125,170,235,.25) inset;
  padding:.9rem 1.7rem;border-radius:100px;font-size:.97rem}
.btn--marca:hover{color:#fff;box-shadow:0 16px 46px -12px rgba(0,112,248,.95),0 0 0 1px rgba(125,170,235,.4) inset}

/* elo de texto sublinhado, como no modelo */
.elo{display:inline-flex;align-items:center;gap:.5rem;color:var(--prata-100);font-weight:500;
  font-size:.95rem;padding:.9rem 0;border-bottom:1px solid var(--linha-forte);transition:color .2s,border-color .2s}
.elo:hover{color:var(--azul-300);border-bottom-color:var(--azul-500)}
.elo svg{width:16px;height:16px;transition:transform .25s}
.elo:hover svg{transform:translateX(4px)}

/* logotipo horizontal no cabecalho, no lugar do selo + texto */
.marca--logotipo img{width:auto;height:clamp(30px,3vw,40px);max-width:62vw;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.marca--logotipo .marca__txt{display:none}

@media (prefers-reduced-motion:reduce){.elo:hover svg{transform:none}}

/* ---------- WhatsApp flutuante, canto inferior direito ------------------- */
/* z-index 55 e DELIBERADO: fica ABAIXO do .topo (60) porque no celular o menu
   aberto ocupa a tela toda, e um botao flutuando sobre ele seria defeito. Os
   dois nunca se cruzam no espaco — o menu abre no topo, o botao vive embaixo.

   Cor: verde #25D366 do WhatsApp, que e o que o visitante procura com o olho.
   O glifo e ESCURO, nao branco: branco sobre esse verde da 1,99:1 e reprovaria
   a WCAG 1.4.11, que pede 3:1 para icone de controle. Escuro #04140C sobre o
   mesmo verde da 10,2:1. Medido, nao estimado. */
.zap{position:fixed;
  /* env() protege do recorte no celular: barra do navegador embaixo e o
     indicador de home do iPhone comem o rodape da janela, e `position:fixed`
     se ancora na janela de LAYOUT, que e maior que a area visivel. Medido em
     27/09/2026: layout 391x845, visivel 375x812 — 17px do botao ficavam fora.
     O fallback 0px mantem o comportamento em quem nao tem area segura. */
  right:calc(clamp(1rem,2.5vw,1.6rem) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(1rem,2.5vw,1.6rem) + env(safe-area-inset-bottom,0px));
  z-index:55;width:56px;height:56px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#25D366;color:#04140C;border:1px solid rgba(1,6,22,.35);
  box-shadow:0 14px 34px -10px rgba(37,211,102,.55),0 4px 12px -4px rgba(0,0,0,.7);
  transition:transform .18s,box-shadow .18s}
.zap svg{width:30px;height:30px;display:block}
.zap:hover{color:#04140C;transform:translateY(-2px);
  box-shadow:0 20px 44px -10px rgba(37,211,102,.72),0 6px 16px -4px rgba(0,0,0,.75)}
.zap:focus-visible{outline:3px solid var(--prata-050);outline-offset:3px}
@media (max-width:600px){.zap{width:52px;height:52px}.zap svg{width:27px;height:27px}}
@media (prefers-reduced-motion:reduce){.zap{transition:none}.zap:hover{transform:none}}
@media print{.zap{display:none}}