/* ==========================================================================
   SAFIRION — LP enxuta (hero + informações)
   --------------------------------------------------------------------------
   Direção: data-forward / terminal. Estética de mesa de operação — numerais em
   monoespaçada, hairlines de grade, rótulos em caixa alta pequena, alinhamento
   à esquerda, cantos vivos.

   O que ficou DE FORA, de propósito, por ser vocabulário genérico de template:
   pílula com bolinha pulsante, palavra colorida no meio da headline, emoji no
   CTA, ícone de traço em quadradinho arredondado, botão de raio 999px, glow
   radial atrás do hero, layout centralizado. Cada um desses foi um pedido
   explícito de remoção — não reintroduzir sem combinar.

   Tema: escuro fixo. Não existe `data-theme` nem alternância; as variáveis
   vivem em `:root` direto. Paleta copiada de css/theme-safirion.css.
   ========================================================================== */

@font-face{font-family:Mazzard;src:url(../fonts/673a124555e14a019ca9d904_MazzardM-Light_a105700f.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Mazzard;src:url(../fonts/673a12458783fc08bee4f989_MazzardM-Regular_e1823f3f.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Mazzard;src:url(../fonts/673a124558bce66fed4a97e8_MazzardM-Medium_3a7b8089.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Mazzard;src:url(../fonts/673a1245f6987d012be94150_MazzardM-SemiBold_e165a51c.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* superfícies */
  --bg:          #060B18;
  --surface:     #0A1120;
  --raised:      #111A2B;

  /* marca */
  --brand:       #2389E6;
  --brand-hover: #4BA3F0;
  --brand-soft:  rgba(35,137,230,.10);
  /* branco sobre #2389E6 dá 3.63:1 — abaixo do AA. Este tom sobe para ~4.6:1
     mantendo o matiz, e é usado só onde há texto por cima. */
  --brand-text:  #1B6FBF;

  /* texto */
  --text:        #FFFFFF;
  --muted:       #A1B8C3;
  --faint:       rgba(161,184,195,.55);

  /* linhas — a grade é o elemento estrutural desta direção, então há dois
     pesos: a hairline de tabela e a divisória de bloco */
  --line:        rgba(214,237,248,.09);
  --line-strong: rgba(214,237,248,.18);

  /* Mono do sistema, de propósito: nenhum arquivo baixado, e a fonte nativa de
     cada plataforma é o que dá a leitura de terminal de verdade. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono",
          "Roboto Mono", Consolas, monospace;

  --gutter: clamp(18px, 4.5vw, 56px);
  --maxw: 1240px;

  /* Equivalente ao `power2.out` do GSAP, que era o easing de todas as
     animações do site original. power2 = cúbica, e a saída cúbica em bezier
     é exatamente esta curva — o movimento sai rápido e assenta devagar. */
  --ease: cubic-bezier(.215,.61,.355,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--bg);
  -webkit-text-size-adjust:100%;   /* impede o zoom do iOS ao girar o aparelho */
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Mazzard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* filho que estoure a largura não vira scroll da página */
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--brand-hover);
  outline-offset:2px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* rótulo em caixa alta — o tipo de texto que amarra a linguagem da página */
.label{
  font-family:var(--mono);
  font-size:clamp(10px,2.7vw,11.5px);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}

/* numeral: mono + tabular-nums para as colunas ficarem alinhadas na vertical
   e o número não dançar durante a contagem */
.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.02em;
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA
   --------------------------------------------------------------------------
   Todo o estado inicial mora sob `.js-anim`, classe que js/lp.js adiciona ao
   <html>. Sem o script — falha de rede, JS desligado, `prefers-reduced-motion`
   — nada disto se aplica e a página aparece inteira. Esconder por CSS puro e
   contar com o JS para revelar é o que produz página em branco quando algo
   falha; aqui o padrão é o conteúdo visível.
   ========================================================================== */

.js-anim [data-anim]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js-anim [data-anim].is-in{
  opacity:1;
  transform:none;
  will-change:auto;   /* permanente segura camada de GPU viva à toa no celular */
}

/* --- revelação por palavra ----------------------------------------------
   O "blackout" do site original: as palavras entram apagadas e acendem em
   cascata. O --d de cada palavra vem do JS.

   Deslocamento pequeno (5px) de propósito: valores maiores deixavam as linhas
   visivelmente desalinhadas durante a cascata. */
.js-anim [data-split] .w{
  display:inline-block;
  color:var(--faint);
  opacity:.3;
  transform:translateY(5px);
  transition:color .55s var(--ease), opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:var(--d,0ms);
}
.js-anim [data-split].is-in .w{
  color:inherit;
  opacity:1;
  transform:none;
}

/* ==========================================================================
   1. HERO — com o CTA embutido
   ========================================================================== */

.hero{
  position:relative;
  isolation:isolate;   /* z-index negativo dos pseudo-elementos não vaza */
  display:flex;
  flex-direction:column;
  /* dvh acompanha a barra de endereço do mobile; svh é o fallback. min-height,
     não height: se a copy crescer, a seção cresce junto. */
  min-height:100svh;
  min-height:100dvh;
  overflow:hidden;
}

/* banner como pseudo-elemento: não entra no DOM como <img>, não conta como
   imagem para lazy-load e fica atrás sem mexer no z-index dos filhos.
   Opacidade bem mais baixa que a versão anterior — nesta direção a imagem é
   textura de fundo, não protagonista. */
/* Ordem das camadas do hero, do fundo para a frente:
     -3  ::before  banner de fundo
     -2  ::after   grade + véu
     -1  .hero__model
      0  texto e painel de métricas (fluxo normal)
   O ::after é gerado como ÚLTIMO filho, então empatado em z-index ele pintaria
   por cima da modelo — daí os níveis serem explicitamente distintos. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:image-set(
    url("../images/hero-bg.webp") type("image/webp"),
    url("../images/hero-bg.jpg")  type("image/jpeg")
  );
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  opacity:.22;
  pointer-events:none;
}

/* Grade de fundo + véu. A grade é o que assina a direção: hairlines de 88px
   somem para a esquerda, onde fica o texto, e ficam visíveis à direita.
   `mask` faz esse degradê sem precisar de um segundo elemento. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;   /* ver a ordem das camadas no comentário do ::before */
  pointer-events:none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(6,11,24,.92) 38%, rgba(6,11,24,.55) 100%),
    repeating-linear-gradient(90deg, rgba(214,237,248,.05) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,  rgba(214,237,248,.05) 0 1px, transparent 1px 88px);
}

/* --- modelo --------------------------------------------------------------
   Posicionada em absolute, ancorada à DIREITA e ao PÉ do hero — não entra no
   fluxo, então a coluna de texto continua começando na calha da esquerda em
   qualquer largura. Alinhar pelo pé (e não centralizar) é o que faz a figura
   nascer do painel de métricas em vez de flutuar no meio da tela. */
.hero__model{
  position:absolute;
  right:0;
  bottom:0;
  z-index:-1;                 /* atrás do texto, à frente da grade de fundo */
  height:100%;
  width:auto;
  pointer-events:none;
  /* A imagem tem fundo escuro próprio, não é recorte. A máscara dissolve as
     bordas esquerda e inferior no fundo da página — sem ela fica um retângulo
     de foto colado por cima do layout. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(0deg,  transparent 0%, #000 16%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(0deg,  transparent 0%, #000 16%);
  mask-composite:intersect;
}
.hero__model img{
  height:100%;
  width:auto;
  max-width:none;   /* neutraliza o max-width:100% global, que espremeria a foto */
  object-fit:contain;
}

/* --- corpo do hero ------------------------------------------------------- */

.hero__body{
  position:relative;   /* bloco de contenção da modelo */
  flex:1;
  display:flex;
  align-items:center;
  padding-block:clamp(40px,7vh,80px);
}
.hero__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(16px,2.4vw,22px);
  width:100%;
  /* o texto para antes da modelo: sem isso a subheadline passa por baixo da
     figura e some no meio da foto */
  max-width:min(100%, 640px);
}

.hero__title{
  margin:0;
  /* 17ch segura a headline em 3 linhas curtas e empilhadas — é a forma que dá
     o peso editorial. Solta, ela vira duas linhas largas e perde o impacto. */
  max-width:17ch;
  font-size:clamp(34px,7.4vw,72px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
}
/* segunda linha em tom menor: hierarquia dentro da própria headline, no lugar
   da palavra colorida no meio da frase */
.hero__title span{color:var(--muted)}

.hero__sub{
  margin:0;
  max-width:52ch;
  color:var(--muted);
  font-size:clamp(14.5px,3.7vw,17.5px);
  line-height:1.6;
  text-wrap:pretty;
}

/* --- CTA embutido -------------------------------------------------------- */

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  margin-top:clamp(4px,1.4vw,10px);
}

.btn{
  position:relative;
  overflow:hidden;             /* recorta o brilho que atravessa no hover */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;             /* alvo de toque confortável */
  padding:15px 32px;
  border:0;
  border-radius:3px;           /* canto vivo: o pill de 999px era um dos tiques */
  background:var(--brand-text);
  color:#fff;
  font-family:var(--mono);
  font-size:clamp(12.5px,3.2vw,13.5px);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  /* durações diferentes de propósito: a cor acompanha o cursor (.24s) e o
     deslocamento assenta depois (.4s), que é o que dá sensação de peso em vez
     de piscar de estado */
  transition:background .24s var(--ease),
             box-shadow .24s var(--ease),
             transform .4s var(--ease);
}
.btn > *{position:relative;z-index:1}

.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:55%;
  height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.20), transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.btn:hover::after{animation:sheen .7s var(--ease)}
@keyframes sheen{ to{ left:160% } }

.btn:hover{
  background:var(--brand);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -8px rgba(35,137,230,.55);
}
/* o clique responde na hora: manter os .4s aqui daria impressão de botão
   travado no instante em que o dedo encosta */
.btn:active{
  transform:translateY(0) scale(.99);
  transition-duration:.08s;
}

.btn--line{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--text);
}
.btn--line:hover{
  background:rgba(214,237,248,.05);
  border-color:var(--brand);
  box-shadow:none;
}

.hero__note{
  margin:0;
  color:var(--faint);
  font-size:clamp(11.5px,3vw,13px);
}

/* --- painel de métricas --------------------------------------------------
   Quatro colunas separadas por hairline, coladas ao pé do hero. É o elemento
   que carrega a direção: números grandes em mono sobre rótulo em caixa alta.
   `gap:0` + `border-left` é o que dá a divisória contínua de tabela; com gap
   as linhas ficariam soltas no meio do vão. */
.metrics{
  border-top:1px solid var(--line);
  margin:0;
  padding:0;
}
.metrics .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.metric{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:clamp(16px,3vw,26px) clamp(12px,2.4vw,26px);
  border-left:1px solid var(--line);
}
.metric:first-child{
  border-left:0;
  padding-left:0;
}
.metric__val{
  font-size:clamp(20px,4.6vw,34px);
  font-weight:600;
  line-height:1;
  color:var(--text);
}
.metric__val small{
  font-size:.5em;
  color:var(--muted);
  letter-spacing:0;
}

/* ==========================================================================
   2. INFORMAÇÕES IMPORTANTES
   ========================================================================== */

.info{
  padding-block:clamp(56px,9vw,110px);
  border-top:1px solid var(--line-strong);
}

.info__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(16px,3vw,48px);
  margin-bottom:clamp(28px,4.5vw,44px);
}
.info__title{
  margin:10px 0 0;
  max-width:18ch;
  font-size:clamp(24px,4.8vw,42px);
  line-height:1.08;
  letter-spacing:-.028em;
  font-weight:600;
}
.info__lead{
  margin:0;
  max-width:46ch;
  color:var(--muted);
  font-size:clamp(14px,3.5vw,16.5px);
  text-wrap:pretty;
}

/* --- tabela de especificação --------------------------------------------
   Substitui os quatro cartões com ícone. Cada linha é um registro: índice,
   título, descrição — separados por hairline, sem caixa em volta. É o formato
   que a direção pede, e de quebra encurta muito a altura no celular. */
.specs{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.spec{
  display:grid;
  /* 28ch cabe o título mais longo ("Saque instantâneo, sem teto") em uma linha;
     em 22ch todos os quatro quebravam em duas e a tabela perdia o alinhamento
     horizontal que é o ponto do formato */
  grid-template-columns:auto minmax(0,28ch) minmax(0,1fr);
  align-items:baseline;
  gap:clamp(14px,3vw,40px);
  padding:clamp(18px,3.2vw,26px) 0;
  border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
/* o realce sangra até a borda da calha para a linha inteira acender, não só a
   área do texto */
.spec:hover{
  background:linear-gradient(90deg, var(--brand-soft), transparent 70%);
}
.spec__idx{
  color:var(--faint);
  font-size:clamp(11px,2.8vw,12.5px);
}
.spec__title{
  margin:0;
  font-size:clamp(16px,4vw,20px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.015em;
}
.spec__text{
  margin:0;
  color:var(--muted);
  font-size:clamp(13.5px,3.4vw,15.5px);
  line-height:1.55;
  text-wrap:pretty;
}

/* --- fecho da seção ------------------------------------------------------ */

.info__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,32px);
  margin-top:clamp(30px,5vw,56px);
  padding:clamp(24px,4.4vw,40px);
  border:1px solid var(--line-strong);
  background:
    linear-gradient(120deg, rgba(35,137,230,.10) 0%, transparent 55%),
    var(--surface);
}
.info__foot p{
  margin:0;
  flex:1 1 320px;
  font-size:clamp(17px,4.2vw,24px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.02em;
  max-width:22ch;
}

/* ==========================================================================
   3. RODAPÉ MÍNIMO — só o aviso de risco e o legal
   ========================================================================== */

.foot{
  padding:clamp(22px,3.6vw,30px) 0 clamp(28px,4.5vw,42px);
  border-top:1px solid var(--line);
  color:var(--faint);
  font-size:clamp(11px,2.9vw,12.5px);
  line-height:1.6;
}
.foot .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px 32px;
  justify-content:space-between;
}
.foot p{margin:0;max-width:70ch}
.foot a:hover{color:var(--muted)}

/* ==========================================================================
   4. AJUSTES POR TELA
   ========================================================================== */

/* Tablet e abaixo: some a lógica de duas colunas. A foto vai para o TOPO, em
   destaque e sem transparência, e o texto desce para baixo dela.

   `position:static` é o que faz isso sem cálculo de padding: o hero já é um
   flex column, e a ordem no HTML (identificação → modelo → corpo → métricas)
   é exatamente a ordem desejada. Tirar a foto do absolute basta — ela vira um
   item de fluxo e empurra o texto para baixo sozinha. */
@media (max-width:899px){
  .hero__model{
    position:static;
    width:100%;
    height:clamp(300px, 48vh, 460px);
    opacity:1;
    /* uma máscara só, na base: a foto encontra o fundo da página sem costura,
       mas o rosto e a camisa ficam em opacidade cheia */
    -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 22%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(0deg, transparent 0%, #000 22%);
    mask-composite:add;
  }
  .hero__model img{
    width:100%;
    height:100%;
    object-fit:cover;
    /* 12% e não 50%: o recorte tem que cair no rosto, não no meio da camisa */
    object-position:50% 12%;
  }

  /* o corpo para de esticar para preencher a tela — quem manda na altura agora
     é a foto no topo. Vira coluna porque a modelo, saindo do absolute, passa a
     ser um item de fluxo e em `row` ficaria lado a lado com o texto.
     `padding-top:0` para a foto começar colada no topo da página. */
  .hero__body{
    flex:0 1 auto;
    flex-direction:column;
    align-items:stretch;
    padding:0 0 clamp(26px,4.5vh,44px);
  }
  .hero__inner{max-width:100%}
}

/* Tablet: a tabela perde a coluna do meio e o título passa a encabeçar a
   descrição, senão 22ch de título espremem a descrição a nada. */
@media (max-width:860px){
  .spec{
    grid-template-columns:auto minmax(0,1fr);
    row-gap:6px;
  }
  .spec__text{grid-column:2}

  .info__head{
    grid-template-columns:1fr;
    align-items:start;
  }
}

/* Celular */
@media (max-width:640px){
  /* 4 colunas de métrica viram 2×2; a hairline da 3ª coluna sai porque ela
     passa a ser a primeira da segunda fileira */
  .metrics .wrap{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(3){border-left:0;padding-left:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line)}

  .info__foot{flex-direction:column;align-items:stretch}
  /* em coluna o `flex-basis:320px` do parágrafo passa a valer como ALTURA e
     abre um vão morto antes do botão — aqui a altura volta a ser o conteúdo */
  .info__foot p{flex:0 0 auto;max-width:none}
  .info__foot .btn{width:100%}

  .hero__cta{gap:12px}
  .hero__cta .btn{width:100%}

  .foot .wrap{flex-direction:column}
}

/* Paisagem em celular baixo: 100dvh viraria uma tela sem espaço para o CTA.
   Solta a altura mínima e deixa o conteúdo mandar. */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__body{padding-block:40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn:hover{transform:none}
}