/* =========================================================
   SILEX — preto e azul
   Uma escala tipografica so. Nenhum tamanho fora dela.
   Preto e a superficie, azul e o unico acento.
   Todo par de texto e fundo passa de 4,5:1.
   ========================================================= */

:root{
  /* superficies */
  --ink:#0A0A0C; --ink-2:#111114; --ink-3:#17171B; --ink-4:#1D1D22;
  --fio:rgba(255,255,255,.09);
  --fio-forte:rgba(255,255,255,.22);

  /* azul — acento unico */
  --azul-900:#1E3157;
  --azul-700:#2F4E86;   /* fundo de botao — branco em cima da 8,2:1 */
  --azul-500:#4A6FA5;   /* hover de botao — branco em cima da 5,1:1 */
  --azul-300:#7E9AC2;   /* texto de acento — 6,9:1 sobre o preto */
  --azul-100:#C3D0E2;

  /* texto */
  --txt-hi:#F4F4F6;     /* 18,0:1 */
  --txt-mid:#B0B1B8;    /* 8,4:1  */
  --txt-low:#8A8B93;    /* 5,8:1  */

  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;

  /* ---- ESCALA TIPOGRAFICA — a unica fonte de tamanho ----
     Sete degraus. Nenhum valor de fonte fora daqui, em lugar nenhum. */
  --t-xl:clamp(40px,6.2vw,88px);   /* headline de abertura      */
  --t-l:clamp(30px,4vw,52px);      /* headline de secao         */
  --t-num:clamp(38px,4.2vw,56px);  /* numero grande             */
  --t-m:clamp(21px,2vw,28px);      /* titulo de card            */
  --t-corpo:clamp(18px,1.25vw,20px); /* TODO texto corrido      */
  --t-btn:15px;                    /* botao e menu              */
  --t-rotulo:13px;                 /* rotulo e miudo            */

  /* ritmo base 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --r-card:16px; --r-pill:999px;
  --margem:6vw; --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--body);font-weight:300;
  font-size:var(--t-corpo);line-height:1.6;
  color:var(--txt-mid);background:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}

/* ---------------- primitivas ---------------- */

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--margem);}
.secao{padding-block:var(--s7);position:relative;}
@media(max-width:760px){ .secao{padding-block:var(--s6);} }

/* Rotulo: tracking aberto cansa a leitura, entao ele nao desce de 13px
   e o tracking fica em .18em, nao .24em. */
.rotulo{
  font-family:var(--display);font-weight:500;
  font-size:var(--t-rotulo);letter-spacing:.18em;line-height:1.4;
  text-transform:lowercase;color:var(--azul-300);
}

.display-xl,.display-l,.titulo-m{
  font-family:var(--display);text-transform:uppercase;
  margin:0;color:var(--txt-hi);text-wrap:balance;
}
.display-xl{font-weight:400;font-size:var(--t-xl);line-height:.96;letter-spacing:-.03em;}
.display-l{font-weight:600;font-size:var(--t-l);line-height:1.06;letter-spacing:-.02em;}
.titulo-m{font-weight:500;font-size:var(--t-m);line-height:1.16;letter-spacing:-.01em;}
.forte{font-weight:700;}

/* Todo texto corrido usa o mesmo degrau. Muda a largura, nunca o corpo. */
.corpo,.lista p,.card p,.duas-colunas p,.numero p{
  font-size:var(--t-corpo);line-height:1.6;color:var(--txt-mid);
}
.corpo{max-width:46ch;}
.lista p{max-width:56ch;margin:0;}
.card p{margin:0;}
.duas-colunas p{max-width:46ch;margin:0;}
.numero p{max-width:34ch;margin:var(--s2) 0 0;}

/* Link dentro de texto corrido: nunca o azul/sublinhado padrao do navegador. */
.corpo a,.duas-colunas p a,.nota a,.aviso a{
  color:var(--azul-300);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(126,154,194,.45);
  transition:color .16s ease,text-decoration-color .16s ease;
}
.corpo a:hover,.corpo a:focus-visible,.duas-colunas p a:hover,.duas-colunas p a:focus-visible,
.nota a:hover,.nota a:focus-visible,.aviso a:hover,.aviso a:focus-visible{
  color:var(--txt-hi);text-decoration-color:var(--txt-hi);
}

/* Link de linha em .lista (titulo de artigo): mesma seta dos botoes no hover. */
.lista a{
  color:var(--txt-hi);text-decoration:none;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
  transition:color .16s ease;
}
.lista a::after{
  content:"\2192";font-size:.85em;opacity:0;
  transform:translateX(-4px);
  transition:opacity .16s ease,transform .16s ease;
}
.lista a:hover,.lista a:focus-visible{color:var(--azul-300);}
.lista a:hover::after,.lista a:focus-visible::after{opacity:1;transform:translateX(0);}

.nota,.aviso{
  font-size:var(--t-rotulo);line-height:1.6;color:var(--txt-low);
  letter-spacing:0;text-transform:none;font-family:var(--body);
}

/* ---------------- botoes ----------------
   Maiores e com menos tracking do que antes: 15px, .10em.
   Alvo de toque de 50px de altura, acima do minimo de 44px. */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:14px 28px;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--display);font-weight:500;
  font-size:var(--t-btn);letter-spacing:.12em;line-height:1;
  text-transform:uppercase;text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease;
}
.btn .seta{font-size:1em;line-height:1;transition:transform .18s ease;}
.btn:hover .seta{transform:translateX(4px);}

.btn--primario{background:var(--azul-700);color:#fff;}
.btn--primario:hover{background:var(--azul-500);}

.btn--fantasma{border-color:var(--fio-forte);color:var(--txt-hi);background:transparent;}
.btn--fantasma:hover{border-color:var(--azul-300);background:rgba(126,154,194,.10);}

.mt{margin-top:var(--s6);}

/* No celular o botao ocupa a largura toda: rotulo longo deixava de caber
   em telas de 320px e empurrava a pagina para o lado. De quebra vira um
   alvo de toque muito maior. */
@media(max-width:480px){
  .btn{width:100%;white-space:normal;text-align:center;padding-inline:20px;}
}

.regua{
  display:flex;justify-content:space-between;gap:var(--s3);
  border-top:1px solid var(--fio);
  padding-top:var(--s3);margin-top:var(--s6);
  color:var(--txt-low);
}
.regua span{color:var(--txt-low);}
@media(max-width:620px){ .regua{flex-direction:column;gap:var(--s1);} }

/* ---------------- topo ---------------- */

.topo{position:absolute;inset-inline:0;top:0;z-index:3;padding-block:var(--s4);}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
.marca{
  font-family:var(--display);font-weight:700;
  font-size:21px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--txt-hi);text-decoration:none;
}
.nav{display:flex;gap:var(--s4);align-items:center;}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;
  min-height:44px;                 /* alvo de toque, nao decoracao */
  font-family:var(--display);font-weight:500;
  font-size:var(--t-btn);letter-spacing:.10em;
  text-transform:lowercase;text-decoration:none;
  color:var(--txt-mid);
  transition:color .16s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:11px;
  height:1px;background:transparent;transition:background-color .16s ease;
}
.nav-link:hover{color:var(--txt-hi);}
.nav-link.e-ativo{color:var(--txt-hi);}
.nav-link.e-ativo::after{background:var(--azul-300);}
@media(max-width:560px){
  .topo{padding-block:var(--s3);}
  .nav{gap:var(--s3);}
  .nav-link{font-size:13px;letter-spacing:.06em;}
  .marca{font-size:18px;letter-spacing:.22em;}
}

/* Telas bem estreitas (iPhone SE e afins): o menu nao cabe ao lado da
   marca e estourava a tela. Ele desce para a propria linha. */
@media(max-width:400px){
  .topo .wrap{flex-wrap:wrap;gap:var(--s2);}
  .topo .nav{width:100%;justify-content:space-between;gap:var(--s1);}
  .topo .nav-link{min-height:44px;letter-spacing:.02em;}
  .hero{padding-top:calc(var(--s8) + var(--s6));}
  .hero--interna{padding-top:calc(var(--s8) + var(--s3));}
}

/* ---------------- hero ---------------- */

.hero{
  position:relative;overflow:hidden;background:var(--ink);
  padding-block:calc(var(--s8) + var(--s5)) var(--s8);
}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:100vw;height:74vw;max-width:1500px;max-height:960px;
  right:-26vw;top:-34vw;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(74,111,165,.34) 0%, rgba(47,78,134,.16) 40%, rgba(47,78,134,0) 70%);
}
.hero .wrap{position:relative;z-index:1;}
.hero .rotulo{margin:0 0 var(--s4);}
.hero .regua{margin:var(--s6) 0 0;}
.hero .corpo{margin:var(--s4) 0 var(--s6);}

.hero--interna{padding-block:calc(var(--s8) + var(--s2)) var(--s7);}
.hero--interna::before{width:74vw;height:56vw;right:-20vw;top:-28vw;}
.hero--interna .display-l{max-width:15ch;}
.hero--interna .corpo{margin-bottom:0;}
.hero--solida::before{opacity:.6;}

@media(max-width:760px){
  .hero{padding-block:calc(var(--s8) + var(--s1)) var(--s7);}
  .hero--interna{padding-block:var(--s8) var(--s6);}
}

/* ---------------- secoes tonais ---------------- */

.gargalo,.conduz{background:var(--ink-2);}
.frentes,.prova{background:var(--ink);}
.gargalo,.frentes,.prova,.conduz{border-top:1px solid var(--fio);}
.gargalo .rotulo,.frentes .rotulo,.prova .rotulo,.conduz .rotulo{margin:0 0 var(--s3);}
.gargalo .display-l,.frentes .display-l,.conduz .display-l{max-width:16ch;}

.duas-colunas{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s7);
  margin-top:var(--s5);
}
@media(max-width:860px){ .duas-colunas{grid-template-columns:1fr;gap:var(--s3);} }

.lista{list-style:none;margin:var(--s6) 0 0;padding:0;border-top:1px solid var(--fio);}
.lista li{
  display:grid;grid-template-columns:64px 1fr;gap:var(--s3);
  align-items:baseline;padding-block:var(--s4);
  border-bottom:1px solid var(--fio);
}
.lista .num{
  font-family:var(--display);font-weight:500;
  font-size:var(--t-rotulo);letter-spacing:.18em;color:var(--azul-300);
}
@media(max-width:560px){ .lista li{grid-template-columns:1fr;gap:var(--s1);} }

.cards{display:grid;gap:var(--s2);grid-template-columns:repeat(3,1fr);margin-top:var(--s6);}
@media(max-width:860px){ .cards{grid-template-columns:1fr;} }
.card{
  background:var(--ink-3);border:1px solid var(--fio);
  border-radius:var(--r-card);padding:var(--s5) var(--s4);
  transition:border-color .18s ease,background-color .18s ease;
}
.card:hover{border-color:var(--fio-forte);background:var(--ink-4);}
.card .rotulo{margin:0 0 var(--s3);}
.card .titulo-m{margin-bottom:var(--s2);}

.numeros{display:grid;gap:var(--s5);grid-template-columns:repeat(3,1fr);}
@media(max-width:860px){ .numeros{grid-template-columns:1fr;gap:var(--s4);} }
.numero{border-top:1px solid var(--fio);padding-top:var(--s3);}
.numero .valor{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-num);line-height:1;letter-spacing:-.03em;color:var(--txt-hi);
}
.nota{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--fio);max-width:62ch;}

/* ---------------- fecho e captura ---------------- */

.fecho,.captura{
  background:var(--ink-2);border-top:1px solid var(--fio);
  position:relative;overflow:hidden;
}
.fecho::before,.captura::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:84vw;height:62vw;max-width:960px;max-height:660px;
  left:50%;top:-26vw;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(74,111,165,.26) 0%, rgba(47,78,134,.10) 44%, rgba(47,78,134,0) 72%);
}
.fecho .wrap,.captura .wrap{position:relative;z-index:1;}
.fecho .rotulo,.captura .rotulo{margin:0 0 var(--s3);}
.fecho .display-l{max-width:15ch;}
.fecho .corpo{margin:var(--s4) 0 var(--s6);}

.grade-form{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s7);
  align-items:start;margin-top:var(--s6);
}
@media(max-width:860px){ .grade-form{grid-template-columns:1fr;gap:var(--s5);} }

.form{
  background:var(--ink-3);border:1px solid var(--fio);
  border-radius:var(--r-card);padding:var(--s5) var(--s4);
}
.campo{display:block;margin-bottom:var(--s4);}
.campo:last-of-type{margin-bottom:var(--s5);}
.campo .rotulo{display:block;color:var(--txt-low);margin:0 0 var(--s1);}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:52px;
  font-family:var(--body);font-weight:300;
  font-size:var(--t-corpo);color:var(--txt-hi);
  background:var(--ink);border:1px solid var(--fio);
  border-radius:10px;padding:14px;
  transition:border-color .16s ease;
}
.campo textarea{min-height:112px;resize:vertical;}
.campo input::placeholder,.campo textarea::placeholder{color:var(--txt-low);}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul-300);
}
.campo select{appearance:none;cursor:pointer;}
.campo select option{color:var(--txt-hi);background:var(--ink-3);}
.enviar{width:100%;}

/* ---------------- rodape ---------------- */

.rodape{background:var(--ink);border-top:1px solid var(--fio);padding-block:var(--s5);}
.rodape .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.rodape .marca{font-size:18px;}
/* O rodape tem quatro links; em tela estreita ele precisa quebrar linha,
   senao o ultimo empurra a pagina para o lado. */
.rodape .nav--rodape{flex-wrap:wrap;gap:var(--s1) var(--s3);}
.rodape .nav-link{color:var(--txt-low);}
.rodape .nav-link:hover{color:var(--txt-hi);}
.rodape .rotulo{color:var(--txt-low);text-transform:none;letter-spacing:.04em;}
@media(max-width:620px){
  .rodape .wrap{flex-direction:column;align-items:flex-start;gap:var(--s3);}
}

/* ---------------- acessibilidade ---------------- */

:focus-visible{outline:2px solid var(--azul-300);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}