/* ==================================================================
   Base da home: reset, caixa, CTA e acesso.

   Reset, CTA e acesso copiados de src-editorial/styles/base.css (v2), que
   continua intocado. Sem grade de calha: cada secao monta a propria grade
   dentro de .caixa.
   ================================================================== */

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

html{
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;
}

/* O CSS do Elementor liga a rolagem animada do navegador na pagina toda
   (html{scroll-behavior:smooth}) e carrega depois deste arquivo, por isso
   :root. Quem suaviza a rolagem aqui e o Lenis; sem ele (movimento
   reduzido, ?semlenis), saltos de ancora e rolagens do codigo sao
   imediatos, como no lab. */
:root{scroll-behavior:auto}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}

::selection{background:var(--red);color:#fff}

/* A caixa: largura maxima e margem do logo. Todas as secoes partem dela. */
.caixa{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--margem);
}

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

   Sem pilula. O gatilho e tipografico: a regua troca de cor e a seta anda.
   ------------------------------------------------------------------ */

.cta{
  display:inline-flex;
  align-items:baseline;
  gap:.6em;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg);
  position:relative;
  padding-bottom:.55em;
}
.cta::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  height:1px;
  width:100%;
  background:currentColor;
  transform-origin:left;
  transition:transform .5s var(--ease-out), background-color .3s;
}
.cta:hover::after,.cta:focus-visible::after{
  background:var(--accent);
  transform:scaleX(1);
}
/* Chevron (Material Symbols, ver icones.js), desenhado e nao caractere.
   A maiuscula da DM Mono mede .703em; o chevron tem 1.15 disso (.81em) e
   desce .054em abaixo da linha de base, para ficar centralizado nas
   maiusculas. */
.cta__seta{
  flex:none;
  position:relative;
  top:.054em;
  width:calc(.81em * 268.3 / 452.3);
  height:.81em;
  transition:transform .45s var(--ease-out);
  color:var(--accent);
}
.cta:hover .cta__seta,.cta:focus-visible .cta__seta{transform:translateX(.35em)}
.cta--grande{
  font-size:clamp(.8125rem,1.1vw,1rem);
  letter-spacing:.08em;
}

/* ------------------------------------------------------------------
   Acesso
   ------------------------------------------------------------------ */

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
/* Sobre navy o vermelho nao tem contraste para anel de foco; o laranja tem. */
.t-navy :focus-visible,.t-petrol :focus-visible{outline-color:var(--orange)}

.vis-oculto{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

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