/* ══════════════════════════════════════════════════════════
   PrasiTec · TelaCut — estilo do site
   Identidade: navy, azul Prasi, vermelho Tec.
   Space Grotesk (títulos) + IBM Plex Sans (corpo).
   ══════════════════════════════════════════════════════════ */

/* ── fontes ─────────────────────────────────────────────── */
@font-face{font-family:'Space Grotesk';src:url('fontes/SpaceGrotesk-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fontes/SpaceGrotesk-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fontes/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fontes/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

/* ── variáveis ──────────────────────────────────────────── */
:root{
    --navy:        #0B1B2F;
    --navy-fundo:  #071220;
    --navy-claro:  #12233B;
    --navy-borda:  #1E3350;
    --azul:        #0057A8;
    --azul-hover:  #0065C4;
    --azul-claro:  #72A2DC;
    --azul-vivo:   #2E86E6;
    --vermelho:    #DE3C37;

    --fundo:       #FBFCFD;
    --painel:      #FFFFFF;
    --alt:         #EFF2F6;

    --texto:       #0F1216;
    --texto-2:     #2A2E33;
    --apagado:     #6E7277;
    --borda:       #DCDEE1;

    --claro-1:     rgba(255,255,255,.95);
    --claro-2:     rgba(225,235,246,.84);
    --claro-3:     rgba(196,215,235,.76);

    --titulo: 'Space Grotesk','Segoe UI',sans-serif;
    --corpo:  'IBM Plex Sans','Segoe UI',sans-serif;

    --largura: 1180px;
    --lado: clamp(20px,5vw,56px);
    --suave: cubic-bezier(.22,.61,.24,1);
}

/* ── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{
    margin:0;background:var(--fundo);color:var(--texto-2);
    font-family:var(--corpo);font-size:16.5px;line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--azul);text-decoration:none}
a:hover{color:var(--azul-hover)}
::selection{background:var(--azul);color:#fff}
:focus-visible{outline:2px solid var(--azul-vivo);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--titulo);font-weight:700;color:var(--texto);letter-spacing:-.028em;line-height:1.08;margin:0 0 18px}
h1{font-size:clamp(2.15rem,4.4vw,3.5rem);letter-spacing:-.038em;line-height:1.04}
h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.032em}
h3{font-size:1.16rem;letter-spacing:-.018em;margin-bottom:9px}
h4{font-size:.82rem;letter-spacing:.02em;margin-bottom:12px}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
strong{color:var(--texto);font-weight:600}
em{font-style:italic}

.container{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--lado);position:relative;z-index:2}
section{padding:clamp(64px,8vw,104px) 0;position:relative}
section.alt{background:var(--alt)}
section.escura{background:var(--navy);color:var(--claro-2);overflow:hidden}
section.escura h1,section.escura h2,section.escura h3,section.escura h4{color:#fff}
section.escura strong{color:#fff}
section.escura a{color:var(--azul-claro)}

.rotulo{
    font-family:var(--titulo);font-weight:500;font-size:.85rem;letter-spacing:.01em;
    color:var(--azul);margin-bottom:14px;
    display:flex;align-items:center;gap:11px;
}
.rotulo::before{content:"";width:20px;height:1px;background:var(--vermelho);flex:0 0 auto}
section.escura .rotulo{color:var(--azul-claro)}

.chamada{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.6;color:var(--texto-2);max-width:64ch}
section.escura .chamada{color:var(--claro-2)}

.par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.par.texto-estreito{grid-template-columns:1.14fr .86fr}
.par.texto-estreito>div:first-child{max-width:38rem}

/* ── botões ─────────────────────────────────────────────── */
.botao{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--corpo);font-weight:600;font-size:.96rem;line-height:1;
    padding:1em 1.55em;border-radius:4px;border:1px solid transparent;cursor:pointer;
    background:var(--azul);color:#fff;
    transition:background .3s var(--suave),transform .3s var(--suave),border-color .3s,color .3s;
}
.botao:hover{background:var(--azul-hover);color:#fff;transform:translateY(-2px)}
.botao.secundario{background:transparent;border-color:var(--borda);color:var(--texto)}
.botao.secundario:hover{background:transparent;border-color:var(--azul);color:var(--azul)}
section.escura .botao.secundario{border-color:rgba(160,190,220,.34);color:#fff}
section.escura .botao.secundario:hover{border-color:rgba(160,190,220,.75);color:#fff}
.acoes{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.selo{margin-top:18px;font-size:.85rem;color:var(--apagado)}

/* ── cabeçalho ──────────────────────────────────────────── */
header{position:fixed;inset:0 0 auto;z-index:90;transition:background .45s var(--suave),backdrop-filter .45s}
header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(148,175,205,.2);opacity:0;transition:opacity .45s}
header.fixo{background:rgba(7,18,32,.82);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
header.fixo::after{opacity:1}
header .container{display:flex;align-items:center;gap:clamp(14px,3vw,40px);height:clamp(62px,6.4vw,78px);z-index:3}
.marca{display:flex;align-items:center;gap:11px;flex:0 0 auto;color:#fff}
.marca:hover{color:#fff}
.marca .nome{font-family:var(--titulo);font-weight:700;font-size:1.12rem;letter-spacing:-.025em}
header nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px);margin-left:auto}
header nav a{font-size:.92rem;color:var(--claro-2);position:relative}
header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--azul-vivo);transition:right .4s var(--suave)}
header nav a:hover{color:#fff}
header nav a:hover::after{right:0}
header nav a.ativo{color:#fff}
header nav a.ativo::after{right:0;background:var(--vermelho)}
header nav a.destaque{
    background:var(--azul);color:#fff;padding:.72em 1.1em;border-radius:4px;font-weight:600;
    transition:background .3s var(--suave),transform .3s var(--suave);
}
header nav a.destaque::after{display:none}
header nav a.destaque:hover{background:var(--azul-hover);transform:translateY(-2px)}
header nav a.destaque.ativo{background:var(--azul-hover)}
.rotulo-curto{display:none}

/* páginas com abertura clara precisam do topo escuro atrás do menu */
body.topo-claro header{background:rgba(7,18,32,.92)}

/* ── abertura escura ────────────────────────────────────── */
.abertura{
    position:relative;isolation:isolate;overflow:hidden;color:var(--claro-1);
    padding:clamp(112px,13vw,158px) 0 clamp(64px,8vw,96px);
    background:
      radial-gradient(115% 78% at 80% 12%,rgba(0,87,168,.34),transparent 60%),
      radial-gradient(85% 65% at 2% 96%,rgba(19,42,69,.82),transparent 66%),
      linear-gradient(180deg,#06111E 0%,#0B1B2F 48%,#071322 100%);
}
.abertura h1,.abertura h2,.abertura h3{color:#fff}
.abertura h1{font-size:clamp(1.72rem,3.5vw,2.7rem)}
.abertura .chamada{color:var(--claro-2)}
.abertura .rotulo{color:var(--azul-claro)}
.abertura .selo{color:var(--claro-3)}
.abertura .chamada{max-width:54ch}
.abertura .botao.secundario{border-color:rgba(160,190,220,.34);color:#fff}
.abertura .botao.secundario:hover{border-color:rgba(160,190,220,.75);color:#fff}
.abertura a{color:var(--azul-claro)}
/* CTAs sobre fundos escuros mantêm texto branco, sem herdar a cor dos links. */
.abertura .botao,section.escura .botao{color:#fff}
.abertura .botao:hover,section.escura .botao:hover{color:#fff}

.camada{position:absolute;inset:0;pointer-events:none;will-change:transform;z-index:0}
.malha{position:absolute;inset:-12% -6%}
.brilho{position:absolute;border-radius:50%;filter:blur(90px)}

/* revelação do título linha a linha */
.linha{display:block;overflow:hidden;padding-bottom:.06em}
.linha>span{display:block;white-space:nowrap}
.js .linha>span{transform:translateY(105%)}
.pronto .linha>span{animation:sobe 1.05s var(--suave) forwards}
.pronto .linha:nth-child(2)>span{animation-delay:.09s}
.pronto .linha:nth-child(3)>span{animation-delay:.18s}
.pronto .linha:nth-child(4)>span{animation-delay:.27s}
@keyframes sobe{from{transform:translateY(105%)}to{transform:translateY(0)}}
.entra{opacity:1;transform:none}
.js .entra{opacity:0;transform:translateY(15px)}
.pronto .entra{animation:surge .9s var(--suave) forwards}
.pronto .e2{animation-delay:.42s}
.pronto .e3{animation-delay:.52s}
.pronto .e4{animation-delay:.62s}
@keyframes surge{to{opacity:1;transform:none}}

/* ── moldura de imagem com profundidade ─────────────────── */
.moldura{
    position:relative;border-radius:9px;padding:clamp(9px,1vw,14px);
    background:linear-gradient(158deg,rgba(21,45,74,.9),rgba(7,18,32,.86));
    border:1px solid rgba(140,175,215,.2);
    box-shadow:0 44px 100px -46px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.06) inset;
}
.moldura img{width:100%;height:auto;border-radius:5px;display:block}
.abertura .moldura{opacity:1;transform:none}
.js .abertura .moldura{opacity:0;transform:translateY(22px)}
.pronto .moldura{animation:surge 1.1s var(--suave) .2s forwards}

.figura{
    position:relative;border:1px solid var(--borda);border-radius:11px;overflow:hidden;
    background:var(--painel);box-shadow:0 30px 64px -40px rgba(11,27,47,.4);
}
.figura img{width:100%;height:auto;display:block}
section.escura .figura{border-color:var(--navy-borda);background:var(--navy-claro)}

/* etiqueta flutuante (camada mais próxima) */
.etiqueta{
    position:absolute;z-index:4;display:inline-flex;align-items:center;gap:9px;
    padding:.58em .85em;border-radius:4px;font-size:.76rem;color:var(--claro-2);
    background:rgba(7,18,32,.94);border:1px solid rgba(140,175,215,.28);
    box-shadow:0 18px 40px -20px rgba(0,0,0,.9);white-space:nowrap;
    opacity:1;
}
.js .etiqueta{opacity:0}
.pronto .etiqueta{animation:surge .8s var(--suave) 1.4s forwards}
.etiqueta i{width:8px;height:8px;border-radius:1px;background:var(--azul-vivo);display:block;flex:0 0 auto}

/* ── grade de cartões ───────────────────────────────────── */
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,22px);margin-top:34px}
.cartao{
    position:relative;background:var(--painel);border:1px solid var(--borda);
    border-radius:9px;padding:clamp(20px,2.2vw,28px);
    transition:transform .4s var(--suave),box-shadow .4s var(--suave),border-color .4s;
}
.cartao::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:9px 9px 0 0;
    background:linear-gradient(90deg,var(--azul),transparent 80%);opacity:.75}
.cartao h3{margin-bottom:8px}
.cartao p{font-size:.95rem;color:var(--apagado);margin:0}
section.escura .cartao{background:var(--navy-claro);border-color:var(--navy-borda)}
section.escura .cartao p{color:var(--claro-2)}
section.escura .cartao::after{background:linear-gradient(90deg,var(--azul-vivo),transparent 80%)}
section.alt .cartao{background:var(--painel)}

/* ── números ────────────────────────────────────────────── */
.numeros{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px;margin-top:20px}
.valor{font-family:var(--titulo);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.15rem);
    letter-spacing:-.035em;line-height:1;color:var(--texto);font-variant-numeric:tabular-nums}
.rotulo-num{font-size:.82rem;color:var(--apagado);margin-top:6px}
section.escura .valor{color:#fff}
section.escura .rotulo-num{color:var(--claro-3)}

/* ── formulário ─────────────────────────────────────────── */
.formulario{max-width:620px;background:var(--painel);border:1px solid var(--borda);
    border-radius:11px;padding:clamp(24px,3vw,38px);box-shadow:0 30px 64px -44px rgba(11,27,47,.45)}
.formulario label{display:block;font-weight:600;font-size:.9rem;color:var(--texto);margin:0 0 7px}
.formulario input[type=text],.formulario input[type=email],.formulario input[type=tel],.formulario textarea{
    width:100%;font-family:var(--corpo);font-size:.98rem;color:var(--texto);
    padding:.78em .9em;border:1px solid var(--borda);border-radius:5px;background:var(--fundo);
    margin-bottom:20px;transition:border-color .3s,box-shadow .3s;
}
.formulario input:focus,.formulario textarea:focus{
    outline:0;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,87,168,.14);background:#fff}
.formulario textarea{min-height:130px;resize:vertical;line-height:1.6}
.formulario .botao{width:100%;margin-top:6px}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consentimento{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
    font-size:.9rem;color:var(--apagado);margin-bottom:8px;line-height:1.55}
.consentimento input{margin-top:4px;width:17px;height:17px;accent-color:var(--azul)}

.aviso{border-left:3px solid var(--azul);background:var(--alt);padding:14px 18px;border-radius:0 6px 6px 0}
.erro{border-left-color:var(--vermelho)}
.sucesso{border-left-color:#2E7D32}

/* ── páginas legais ─────────────────────────────────────── */
.legal{max-width:760px}
.legal h2{font-size:1.3rem;margin:38px 0 12px}
.legal ul{padding-left:20px;margin:0 0 15px}
.legal li{margin-bottom:6px}
.atualizado{color:var(--apagado);font-size:.9rem;margin-bottom:8px}

/* ── rodapé ─────────────────────────────────────────────── */
footer{background:var(--navy-fundo);color:var(--claro-3);padding:clamp(48px,6vw,72px) 0 30px;position:relative;overflow:hidden}
footer a{color:var(--claro-2)}
footer a:hover{color:#fff}
.footer-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,50px)}
.footer-grade h4{color:#fff;font-family:var(--titulo);font-weight:500;font-size:.8rem;
    letter-spacing:.06em;text-transform:uppercase}
.footer-grade ul{list-style:none;margin:0;padding:0}
.footer-grade li{margin-bottom:8px;font-size:.9rem}
.footer-grade p{font-size:.86rem;color:var(--claro-3)}
.footer-fim{margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid rgba(140,175,215,.15);
    font-size:.82rem;color:var(--claro-3)}

/* ── revelação por rolagem ──────────────────────────────── */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.dentro{opacity:1;transform:none;transition:opacity .72s var(--suave),transform .82s var(--suave)}

/* ── responsivo ─────────────────────────────────────────── */
@media (max-width:900px){
    .par,.par.texto-estreito{grid-template-columns:1fr}
    .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-grade{grid-template-columns:1fr 1fr}
    .duas-colunas{grid-template-columns:1fr !important}
    .duas-colunas img{width:150px !important;height:150px !important}
    .numeros{grid-template-columns:1fr 1fr}
    .abertura{padding-top:clamp(104px,20vw,140px)}
}
@media (max-width:760px){
    .abertura h1 .linha{overflow:visible;padding-bottom:0}
    .abertura h1 .linha>span{white-space:normal}
    .js .abertura h1 .linha>span{transform:none;opacity:0}
    .pronto .abertura h1 .linha>span,.pronto h1 .linha>span{animation:surge .85s var(--suave) forwards}
    .pronto h1 .linha:nth-child(2)>span{animation-delay:.07s}
    .pronto h1 .linha:nth-child(3)>span{animation-delay:.14s}
}
@media (max-width:620px){
    .grade{grid-template-columns:1fr}
    .footer-grade{grid-template-columns:1fr;gap:30px}
    .rotulo-longo{display:none}
    .rotulo-curto{display:inline}
    header nav{gap:14px}
    header nav a.destaque{padding:.66em .9em}
    .etiqueta{display:none}
    .acoes .botao{width:100%}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
    .linha>span,.entra,.moldura,.etiqueta,.rv{opacity:1!important;transform:none!important}
}


/* ── refinamentos de robustez e apresentação ───────────── */
.abertura-home .hero-grade{
    grid-template-columns:minmax(0,1fr) minmax(500px,1.08fr);
    gap:clamp(34px,5vw,72px);
}
/* O título da home pode quebrar de forma natural em larguras intermediárias,
   evitando corte de texto quando a imagem do produto ganha mais espaço. */
.abertura-home .linha>span{white-space:normal}
.abertura-home .hero-produto{position:relative}
.abertura-home .moldura-destaque{
    border-color:rgba(140,175,215,.30);
    box-shadow:0 52px 120px -48px rgba(0,0,0,.96),0 1px 0 rgba(255,255,255,.08) inset;
}
.abertura-home .moldura-destaque::after{
    content:"";position:absolute;inset:auto 8% -16px 8%;height:30px;
    background:rgba(0,87,168,.30);filter:blur(26px);z-index:-1;pointer-events:none;
}
.case-produto{
    background:var(--painel);border:1px solid var(--borda);border-radius:14px;
    padding:clamp(24px,3vw,40px);margin-top:32px;gap:clamp(30px,5vw,58px);
    align-items:stretch;box-shadow:0 34px 72px -48px rgba(11,27,47,.48);overflow:hidden;
}
.case-produto>div:first-child{display:flex;flex-direction:column;justify-content:center}
.case-metricas{
    position:relative;border-left:2px solid var(--borda);padding-left:clamp(22px,3vw,38px);
}
.case-metricas::before{
    content:"";position:absolute;inset:-40px -48px -40px 0;z-index:-1;pointer-events:none;
    background:radial-gradient(70% 80% at 78% 30%,rgba(0,87,168,.08),transparent 72%);
}
.case-produto .valor{font-size:clamp(1.85rem,2.8vw,2.35rem)}
.produto-demo{box-shadow:0 44px 96px -46px rgba(11,27,47,.55)}

.badge-gratis{
    display:inline-flex;align-items:center;gap:8px;
    padding:.48em .78em;border-radius:999px;font-size:14px;font-weight:600;
    color:var(--claro-1);background:rgba(255,255,255,.08);
    border:1px solid rgba(190,215,240,.24);
    box-shadow:0 8px 24px -18px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05) inset;
}
.badge-gratis::before{
    content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:.88;
    box-shadow:0 0 0 4px rgba(255,255,255,.07);
}

/* Evita custo de renderização desnecessário nas seções fora da tela sem alterar o layout. */
@supports (content-visibility:auto){
    main>section:not(.abertura), body>section:not(.abertura){content-visibility:auto;contain-intrinsic-size:auto 760px}
}

@media (max-width:1020px){
    .abertura-home .hero-grade{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:900px){
    .abertura-home .hero-grade{grid-template-columns:1fr}
    .abertura-home .hero-produto{max-width:760px;width:100%;margin-top:8px}
    .case-produto{align-items:start}
    .case-metricas{border-left:0;border-top:2px solid var(--borda);padding:24px 0 0}
}
@media (max-width:400px){
    header nav .inicio{display:none}
    header nav{gap:12px}
}

@media (prefers-reduced-motion:reduce){
    .js .linha>span,.js .entra,.js .abertura .moldura,.js .etiqueta,.js .rv{opacity:1!important;transform:none!important}
}

.status-formulario{margin:14px 0 0;font-size:.9rem;color:var(--apagado)}
.status-formulario.erro-texto{color:#B3261E}
.botao:disabled{opacity:.68;cursor:wait;transform:none}

/* Páginas legais: leitura estática, sem animações ou parallax. */
.pagina-legal .linha>span,
.pagina-legal .entra,
.pagina-legal .rv{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important;
}

/* Home: a abertura ocupa ao menos toda a altura visível da janela.
   A próxima seção só aparece após a rolagem, independentemente da altura da tela. */
.abertura-home{
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    display:flex;
    align-items:center;
}