/* ==========================================================================
   HIFY · home nova · FUNDAÇÃO
   Tokens, reset, grade, tipografia e componentes compartilhados.
   As seções usam SÓ o que está aqui + o próprio css/NN-nome.css com prefixo
   exclusivo. Nenhuma cor, fonte, raio ou curva fora destes tokens.
   Fonte da verdade: /marca (manual de marca). Direção: brief/direcao.md
   ========================================================================== */

/* ---------- 1. Fontes (locais, sem CDN) ---------- */
@font-face{font-family:"Geist";src:url(../fonts/geist-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url(../fonts/geist-700.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  /* Cor · paleta fechada do manual. Laranja é a única cor cromática; todo cinza tem R=G=B. */
  --c-preto:#0A0A0A;
  --c-sup-1:#141414;
  --c-sup-2:#1F1F1F;
  --c-linha:#2A2A2A;
  --c-texto-2-claro:#484848;
  --c-cinza:#8A8A8A;
  --c-texto-2-escuro:#B8B8B8;
  --c-linha-clara:#D6D6D6;
  --c-papel:#F5F5F5;
  --c-branco:#FFFFFF;
  --c-laranja:#FF4000;        /* preenchimentos, sinal */
  --c-laranja-claro:#FF794D;  /* realce, texto e foco sobre preto */
  --c-laranja-texto:#B52D00;  /* texto laranja e foco sobre branco */
  --c-laranja-hover:#E63A00;  /* hover do primário sobre branco */

  /* Tipo */
  --f-sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --t-display:clamp(2.5rem,9.1vw,8.25rem);   /* 40–132 · só hero e fechamento */
  --t-numero:clamp(4rem,11vw,10rem);         /* 64–160 · um número por seção, no máximo */
  --t-h2:clamp(2.125rem,4.6vw,4.125rem);     /* 34–66 */
  --t-h3:clamp(1.375rem,1.9vw,1.6875rem);    /* 22–27 */
  --t-lead:clamp(1.125rem,1.45vw,1.3125rem); /* 18–21 */
  --t-corpo:1rem;                            /* 16 */
  --t-pequeno:.875rem;                       /* 14 */
  --t-legenda:.75rem;                        /* 12 · piso para informação essencial */
  --t-rotulo:.75rem;                         /* 12 · mono, caixa alta */

  /* Espaço · múltiplos de 4 */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-6:24px;--e-8:32px;--e-12:48px;--e-16:64px;--e-24:96px;
  --secao-y:clamp(4.5rem,10vw,9rem);         /* respiro vertical de seção: 72–144 */
  --margem:clamp(16px,3.334vw,48px);         /* margem lateral da página: 16–48 */
  --largura:1344px;                          /* largura máxima do conteúdo */
  --calha:clamp(16px,1.667vw,24px);          /* distância entre colunas */
  --cabecalho-h:64px;

  /* Raio */
  --r-etiqueta:4px;--r-controle:6px;--r-moldura:8px;--r-superficie:12px;

  /* Movimento · manual, seção 08 */
  --dur-micro:120ms;--dur-entrada:240ms;--dur-saida:160ms;--dur-tela:400ms;--dur-logo:700ms;
  --curva-entrada:cubic-bezier(.2,0,0,1);
  --curva-saida:cubic-bezier(.4,0,1,1);
  --curva-tela:cubic-bezier(.65,0,.35,1);
  --inclinacao:15deg;      /* o único ângulo da marca */
  --tan15:.2679;           /* deslocamento horizontal por unidade de altura */
}

/* ---------- 3. Temas de seção: .fundo-escuro · .fundo-claro · .fundo-laranja ----------
   Cada utilitário define os tokens semânticos (--fundo, --texto…) e pinta o bloco.
   Componentes leem só os semânticos, então funcionam nos três fundos e podem ser
   aninhados (ex.: um cartão .fundo-escuro dentro de uma seção .fundo-laranja).
   Laranja chapado: só no fechamento (seção 11). */
:root,.fundo-escuro{
  --fundo:var(--c-preto);--sup:var(--c-sup-1);--sup-2:var(--c-sup-2);
  --linha:var(--c-linha);--borda-controle:var(--c-cinza);
  --texto:var(--c-branco);--texto-2:var(--c-texto-2-escuro);--texto-3:var(--c-cinza);
  --acento:var(--c-laranja-claro);          /* texto e traço de realce */
  --marca:var(--c-laranja);--marca-hover:var(--c-laranja-claro);--sobre-marca:var(--c-preto);
  --foco:var(--c-laranja-claro);
}
.fundo-claro{
  --fundo:var(--c-branco);--sup:var(--c-papel);--sup-2:var(--c-branco);
  --linha:var(--c-linha-clara);--borda-controle:var(--c-cinza);
  --texto:var(--c-preto);--texto-2:var(--c-texto-2-claro);--texto-3:var(--c-texto-2-claro);
  --acento:var(--c-laranja-texto);
  --marca:var(--c-laranja);--marca-hover:var(--c-laranja-hover);--sobre-marca:var(--c-preto);
  --foco:var(--c-laranja-texto);
}
.fundo-laranja{
  --fundo:var(--c-laranja);--sup:var(--c-preto);--sup-2:var(--c-sup-1);
  --linha:var(--c-preto);--borda-controle:var(--c-preto);
  --texto:var(--c-preto);--texto-2:var(--c-preto);--texto-3:var(--c-preto);
  --acento:var(--c-preto);
  --marca:var(--c-preto);--marca-hover:var(--c-sup-2);--sobre-marca:var(--c-branco);
  --foco:var(--c-preto);
}
.fundo-escuro,.fundo-claro,.fundo-laranja{background:var(--fundo);color:var(--texto-2)}

/* ---------- 4. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cabecalho-h) + 16px)}
body{margin:0;background:var(--c-preto);color:var(--texto-2);font:400 var(--t-corpo)/1.55 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
strong,b{font-weight:700}
[hidden]{display:none!important}
::selection{background:var(--c-laranja);color:var(--c-preto)}

/* Foco: anel de 2 px a 3 px do elemento, em todo elemento interativo. Nunca remover. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:2px}

/* ---------- 5. Grade e contêiner ----------
   .conteiner  centraliza e aplica a margem lateral fluida (16–48 px).
   .grade      12 colunas no desktop, 4 no celular (< 720 px). Posicione com grid-column
               no CSS da seção. Filhos têm min-width:0 para nunca estourar. */
.conteiner{width:100%;max-width:calc(var(--largura) + 2*var(--margem));margin-inline:auto;padding-inline:var(--margem)}
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--calha)}
.grade>*{min-width:0}
@media (max-width:719px){.grade{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* .secao  respiro vertical padrão de seção. Use com um utilitário de fundo. */
.secao{position:relative;padding-block:var(--secao-y)}

/* .secao-cab  abertura padrão de seção, igual em toda a página:
   fio de 1 px no topo, rótulo mono à esquerda (colunas 1–3), título e lead à direita (4–11).
   <header class="secao-cab conteiner"><p class="rotulo">[02] Cadência</p>
     <div><h2 class="t-h2">…</h2><p class="t-lead">…</p></div></header> */
.secao-cab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--calha);row-gap:var(--e-6);margin-bottom:clamp(40px,6vw,88px)}
.secao-cab::before{content:"";grid-column:1/-1;height:1px;background:var(--linha);margin-bottom:var(--e-2)}
.secao-cab>.rotulo{grid-column:1/span 3;padding-top:.9em}
.secao-cab>div{grid-column:4/span 8}
.secao-cab .t-lead{margin-top:var(--e-6);max-width:38em}
@media (max-width:899px){.secao-cab>.rotulo,.secao-cab>div{grid-column:1/-1}.secao-cab>.rotulo{padding-top:0}}

/* ---------- 6. Tipografia ----------
   .t-display  caixa alta itálica pesada. SÓ no h1 do hero e na chamada de fechamento, até duas
               linhas no desktop. Qualquer outro título é Geist Bold em caixa normal.
   .t-h2       título de seção: frase completa, com verbo e ponto final.
   .t-h3       título de bloco.   .t-lead  parágrafo de abertura.   .t-pequeno / .t-legenda
   .t-numero   número de exibição (um por seção, com a unidade e a fonte ao lado).
   O itálico de .t-display é sintetizado de propósito (font-synthesis:style): não há corte itálico
   da Geist em fonts/. Quando houver, declare o @font-face itálico e nada mais muda. */
.t-display{font:italic 800 var(--t-display)/.9 var(--f-sans);font-synthesis:style;letter-spacing:-.045em;text-transform:uppercase;color:var(--texto);-webkit-text-stroke:.012em currentColor;text-wrap:balance}
.t-h2{font:700 var(--t-h2)/1.04 var(--f-sans);letter-spacing:-.045em;color:var(--texto);text-wrap:balance}
.t-h3{font:700 var(--t-h3)/1.2 var(--f-sans);letter-spacing:-.03em;color:var(--texto)}
.t-lead{font:400 var(--t-lead)/1.5 var(--f-sans);color:var(--texto-2);text-wrap:pretty}
.t-corpo{font-size:var(--t-corpo);line-height:1.55;max-width:70ch}
.t-pequeno{font-size:var(--t-pequeno);line-height:1.5}
.t-legenda{font-size:var(--t-legenda);line-height:1.5;color:var(--texto-3)}
.t-numero{font:700 var(--t-numero)/.86 var(--f-sans);letter-spacing:-.06em;color:var(--texto);font-variant-numeric:tabular-nums}
.t-forte{color:var(--texto);font-weight:700}
.mono{font-family:var(--f-mono);font-size:.92em;letter-spacing:0}

/* ---------- 7. Componentes ---------- */

/* RÓTULO MONO · marca, não explica. Curto, caixa alta, acima de títulos e em índices.
   .rotulo-acento usa o laranja de texto do tema (um por composição). */
.rotulo{font:400 var(--t-rotulo)/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}
.rotulo-acento{color:var(--acento)}
.rotulo b{font-weight:400;color:var(--texto)}

/* BOTÕES · 48 px de altura, raio 6, Geist Bold 14. Verbo + objeto.
   .btn-primario   laranja com texto preto. Um por tela. Texto fixo: "Agendar demonstração".
   .btn-secundario contorno neutro de 1 px. Nunca leva laranja.
   .btn-texto      só o rótulo com linha fina; área clicável mantém 48 px.
   .btn-compacto   36 px, só no cabeçalho e só onde há mouse.
   .btn-seta       seta opcional; avança 3 px no hover. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-controle);font:700 var(--t-pequeno)/1 var(--f-sans);letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background-color var(--dur-micro) var(--curva-entrada),border-color var(--dur-micro) var(--curva-entrada),color var(--dur-micro) var(--curva-entrada)}
.btn-primario{background:var(--marca);color:var(--sobre-marca)}
.btn-primario:hover{background:var(--marca-hover)}
.btn-secundario{border-color:var(--borda-controle);color:var(--texto)}
.btn-secundario:hover{border-color:var(--texto)}
.btn-texto{padding:0;border-radius:2px;color:var(--texto);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--borda-controle)}
.btn-texto:hover{text-decoration-color:var(--texto)}
.btn-compacto{min-height:36px;padding:0 14px;font-size:.8125rem}
.btn-seta{display:inline-block;transition:transform var(--dur-micro) var(--curva-entrada)}
.btn:hover .btn-seta{transform:translateX(3px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn[aria-busy="true"]{opacity:.7}  /* enviando: o rótulo continua legível */
.btn-bloco{width:100%}

/* LINK · em texto corrido. Sublinhado fino; a cor não muda (não existe azul de link). */
.link{color:var(--texto);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--borda-controle);transition:text-decoration-color var(--dur-micro) var(--curva-entrada)}
.link:hover{text-decoration-color:var(--texto)}

/* ETIQUETA · 24 px, texto 12, raio 4. Estado e severidade sempre escritos.
   Severidade é escada de peso, não semáforo: quanto mais grave, mais preenchida.
   .etiqueta-critica é o único uso de laranja na escala. */
.etiqueta{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--borda-controle);border-radius:var(--r-etiqueta);font:400 var(--t-legenda)/1 var(--f-sans);color:var(--texto-2);white-space:nowrap}
.etiqueta-critica{background:var(--c-laranja);border-color:var(--c-laranja);color:var(--c-preto);font-weight:700}
.etiqueta-alta{background:var(--texto);border-color:var(--texto);color:var(--fundo);font-weight:700}
.etiqueta-media{border-color:var(--texto);color:var(--texto);font-weight:700}
.etiqueta-baixa{border-color:var(--borda-controle);color:var(--texto-2)}
.etiqueta-info{border-style:dashed;color:var(--texto-2)}
.etiqueta-mono{font-family:var(--f-mono);font-size:var(--t-legenda);letter-spacing:.04em;text-transform:uppercase}
/* marcador quadrado de 6 px (estado ativo, erro, item que pede ação) */
.ponto{display:inline-block;flex:none;width:6px;height:6px;background:var(--marca)}

/* DIVISOR · fio neutro de 1 px. .divisor-15 é o mesmo fio na inclinação da marca
   (dê altura ao elemento; ele se inclina para a direita, como o símbolo). */
.divisor{border:0;height:1px;margin:0;background:var(--linha)}
.divisor-15{display:block;width:1px;background:var(--linha);transform:skewX(calc(-1*var(--inclinacao)));transform-origin:bottom left}

/* LISTA DE LINHAS · "linhas finas e rótulos mono": itens separados por fio, índice mono à esquerda.
   <ol class="linhas"><li><span class="rotulo">01</span><span>Texto</span></li>…</ol> */
.linhas>li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--e-4);align-items:baseline;padding:14px 0;border-top:1px solid var(--linha);color:var(--texto)}
.linhas>li:last-child{border-bottom:1px solid var(--linha)}

/* CARTÃO · quando o conteúdo é lido como unidade. Borda fina, raio 12, sem sombra.
   Ordem interna: rótulo mono, título em bold, texto, ações. */
.cartao{border:1px solid var(--linha);border-radius:var(--r-superficie);padding:var(--e-6);background:var(--sup)}
.cartao>*+*{margin-top:var(--e-3)}

/* MOLDURA DE PRODUTO · toda tela do produto na página usa esta moldura: linha de 1 px,
   raio 8, sem botões de janela, sem sombra, sem perspectiva. O conteúdo é HTML/CSS de verdade.
   .moldura-barra  faixa superior (caminho da tela à esquerda, estado/ação à direita)
   .moldura-nota   rodapé opcional da moldura */
.moldura{border:1px solid var(--linha);border-radius:var(--r-moldura);background:var(--sup);color:var(--texto-2);overflow:hidden}
.moldura-barra{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);min-height:48px;padding:0 var(--e-4);border-bottom:1px solid var(--linha);font-size:.8125rem}
.moldura-caminho{font-family:var(--f-mono);font-size:var(--t-legenda);color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moldura-caminho b{font-weight:400;color:var(--texto)}
.moldura-nota{display:flex;justify-content:space-between;gap:var(--e-4);padding:10px var(--e-4);border-top:1px solid var(--linha);font:400 var(--t-legenda)/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}

/* CAMPOS · rótulo sempre visível acima; 48 px; texto 16 também no celular.
   Erro é dito por mensagem escrita (.campo-erro), não só pela borda.
   <div class="campo"><label for="x">Empresa</label><input id="x"><p class="campo-ajuda">…</p></div>
   Estado de erro: acrescente .tem-erro ao .campo e aria-invalid="true" ao controle. */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo>label{font:700 .8125rem/1.4 var(--f-sans);color:var(--texto)}
.campo-opcional{font-weight:400;color:var(--texto-3)}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--borda-controle);border-radius:var(--r-controle);background:transparent;color:var(--texto);font:400 1rem/1.4 var(--f-sans);appearance:none;-webkit-appearance:none;transition:border-color var(--dur-micro) var(--curva-entrada)}
.campo textarea{padding-block:12px;min-height:120px;resize:vertical}
.campo select{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(-45deg,transparent 50%,currentColor 50%);background-size:6px 6px;background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-repeat:no-repeat}
.campo select option{background:var(--fundo);color:var(--texto)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--texto)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-3)}
.campo-ajuda{font-size:.8125rem;line-height:1.4;color:var(--texto-3)}
.campo-erro{display:none;align-items:baseline;gap:8px;font-size:.8125rem;line-height:1.4;color:var(--acento)}
.campo-erro::before{content:"";flex:none;width:6px;height:6px;background:var(--acento);transform:translateY(-1px)}
.campo.tem-erro .campo-erro{display:flex}
.campo.tem-erro input,.campo.tem-erro select,.campo.tem-erro textarea{border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}

/* ÍCONES · copie o SVG de assets/icons/ inline (stroke="currentColor"). Só 16, 20, 24 e 32 px.
   Neutros; laranja em um ícone ativo por grupo (.icone-ativo). Nunca inclinados, nunca acima de 32. */
.icone{flex:none;width:24px;height:24px;color:inherit}
.icone-16{width:16px;height:16px}.icone-20{width:20px;height:20px}.icone-32{width:32px;height:32px}
.icone-ativo{color:var(--acento)}

/* CARREGAMENTO "DEGRAU" · único movimento contínuo permitido, sempre com texto ao lado.
   Cinco hastes acendem em ordem, ciclo de 1200 ms, quatro ciclos (4,8 s) e para: movimento
   que passa de 5 s precisa de controle de pausa. Onde esse controle existe (registro do hero),
   a seção pode repetir o ciclo com animation-iteration-count no próprio CSS.
   <span class="degrau" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span> em andamento */
.degrau{display:inline-flex;align-items:flex-end;gap:2px;height:10px;transform:skewX(calc(-1*var(--inclinacao)))}
.degrau>i{width:3px;height:100%;background:var(--texto-3)}
.degrau>i:nth-child(1){height:40%}.degrau>i:nth-child(2){height:55%}.degrau>i:nth-child(3){height:70%}.degrau>i:nth-child(4){height:85%}
.degrau.ativo>i{animation:degrau-acende 1200ms steps(1,end) 4}
.degrau.ativo>i:nth-child(2){animation-delay:200ms}.degrau.ativo>i:nth-child(3){animation-delay:400ms}.degrau.ativo>i:nth-child(4){animation-delay:600ms}.degrau.ativo>i:nth-child(5){animation-delay:800ms}
@keyframes degrau-acende{0%{background:var(--marca)}34%{background:var(--texto-3)}100%{background:var(--texto-3)}}

/* ---------- 8. Utilitários ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.pular{position:absolute;left:var(--margem);top:8px;z-index:200;transform:translateY(-200%);background:var(--c-laranja);color:var(--c-preto);font:700 var(--t-pequeno)/1 var(--f-sans);padding:15px 16px;border-radius:var(--r-controle)}
.pular:focus{transform:none;outline-color:var(--c-branco)}
#conteudo:focus{outline:none}  /* alvo do link de pular (tabindex="-1"): recebe o foco, sem anel na página inteira */
.acento{color:var(--acento)}
.sem-quebra{white-space:nowrap}

/* ENTRADA NA ROLAGEM · js/00-base.js acrescenta .visivel quando o elemento entra na tela.
   O estado final é o padrão. Quem esconde é o mesmo arquivo que revela: js/00-base.js põe
   .entra-pronta no <html> antes de observar. Se esse script não rodar, nada fica escondido.
   Sobe 12 px pela diagonal (para a direita e para cima) em 240 ms; filhos em sequência com
   style="--i:1", "--i:2"… (40 ms entre itens, no máximo seis). */
@media (prefers-reduced-motion:no-preference){
  .entra-pronta [data-entra]{opacity:0;transform:translate(-3.2px,12px);transition:opacity var(--dur-entrada) var(--curva-entrada),transform var(--dur-entrada) var(--curva-entrada);transition-delay:calc(var(--i,0)*40ms)}
  .entra-pronta [data-entra].visivel{opacity:1;transform:none}
}
@media print{[data-entra]{opacity:1!important;transform:none!important}}

/* MOVIMENTO REDUZIDO · regra obrigatória do manual. Tudo aparece pronto, no estado final. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}