/* ============================================================
   AZVEN — camada 2: BASE
   Reset, tipografia e o esqueleto do documento.
   ============================================================ */

/* Regra de autor vence o user-agent: sem isto, um [hidden] em
   elemento display:inline-flex continua aparecendo. */
[hidden]{display:none !important}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  /* overflow-x no html, não só no body: menu fora da tela estica a página */
  overflow-x:hidden;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-md);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{list-style:none}

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

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- TIPOGRAFIA ---------- */

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  line-height:var(--lh-title);
  letter-spacing:var(--tr-tight);
  text-wrap:balance;
}

h1{font-size:var(--t-3xl);line-height:var(--lh-tight)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg);letter-spacing:-.015em}
h4{font-size:var(--t-md);letter-spacing:-.01em}
h5{font-size:var(--t-sm);letter-spacing:-.005em}

p{text-wrap:pretty}

strong,b{font-weight:600;color:var(--fg)}

/* Grifo do título: cor da marca sem trocar o peso */
h1 em,h2 em,h3 em{
  font-style:normal;
  color:var(--accent);
}

/* ---------- ESQUELETO ---------- */

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

.secao{
  position:relative;
  background:var(--bg);
  color:var(--fg);
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}

/* Grão sobre as seções escuras: textura de impresso, quase invisível,
   num azulejo de 160px que o navegador rasteriza uma vez só. */
.secao.is-dark::before,.rodape::before{
  content:'';position:absolute;inset:0;z-index:0;
  pointer-events:none;
  opacity:var(--grao-opacidade);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size:160px 160px;
}
.secao.is-dark > .wrap,.rodape > .wrap{position:relative;z-index:1}

/* Um fio entre seções do mesmo tom, para a página não virar sopa */
.secao + .secao:not(.is-dark):not(.sem-fio){border-top:1px solid var(--line)}

.secao--curta{
  padding-top:calc(var(--sec-y) * .58);
  padding-bottom:calc(var(--sec-y) * .58);
}

.medida{max-width:62ch}
.medida-curta{max-width:46ch}

/* Rolagem suave (Lenis) é opcional e vem de CDN: estas três regras só
   fazem efeito se ela carregar. */
html.lenis,html.lenis body{height:auto}
/* Com a Lenis ativa o scroll-behavior nativo tem de sair sempre, não só
   durante a rolagem: os dois juntos travam a página no topo. */
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

.sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}