/* =============================================================
   ConnectVia · base: reset, tipografia, grid, micro-grafismos
   ============================================================= */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* grão de papel: o gesto material que faz a tela parecer impressa */
body::after{
  content:"";
  position:fixed;inset:0;z-index:400;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}

p{margin:0;max-width:var(--measure)}
ul,ol{margin:0;padding:0}

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){outline:none}

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

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

/* salto para o conteúdo — primeiro elemento focável da página */
.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:600;
  background:var(--cv-champagne);color:var(--cv-espresso);
  padding:12px 20px;border-radius:var(--r-sm);
  font-weight:var(--fw-strong);font-size:14.5px;text-decoration:none;
  transition:top var(--t-base) var(--ease);
}
.skip:focus{top:var(--s4)}

/* =============================================================
   TIPOGRAFIA
   ============================================================= */

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;                 /* 400 apenas: 600+ em serifada quebra o premium */
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  line-height:var(--lh-display);
  margin:0;
  text-wrap:balance;
}
h1,.h-hero{font-size:var(--fs-hero);letter-spacing:var(--ls-hero)}
h2,.h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
h3,.h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.14}
em{font-style:italic}

/* medida da manchete em ch, nunca em px — é o que sobrevive à troca de idioma */
h1,h2{max-width:var(--measure-display)}
.h-wide{max-width:22ch}

.lede{
  font-size:var(--fs-lede);
  line-height:var(--lh-lede);
  color:var(--ink-2);
  max-width:52ch;
  margin:0;
}
.small{font-size:var(--fs-small);line-height:1.6;color:var(--ink-2);margin:0}
.caption{font-size:13px;line-height:1.55;color:var(--ink-3);margin:0;max-width:60ch}

.label{
  display:block;
  font-family:var(--font-ui);
  font-weight:var(--fw-medium);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.label--quiet{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}

/* =============================================================
   GRID — 12 colunas, quatro trilhos, alternância obrigatória
   ============================================================= */

.section{
  padding:var(--sec-y) var(--pad-x);
  background:var(--ground);
  color:var(--ink);
  position:relative;
}
.section__inner{max-width:var(--content);margin:0 auto;position:relative}

.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--col-gap);
}
/* filhos de grid não encolhem abaixo do conteúdo sem isto, e uma tabela
   larga passa a empurrar a página inteira para o lado */
.grid>*{min-width:0}

/* trilho A · prosa à esquerda */
.t-a{grid-column:1/8}
.t-a-aside{grid-column:9/13}
/* trilho B · peso à direita */
.t-b{grid-column:5/13}
.t-b-aside{grid-column:1/5}
/* trilho C · sangria total */
.t-c{grid-column:1/13}
/* variações de apoio */
.t-half-l{grid-column:1/6}
.t-half-r{grid-column:7/13}
.t-third{grid-column:1/5}
.t-two-third{grid-column:6/13}

@media (max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .t-a,.t-a-aside,.t-b,.t-b-aside,.t-c,
  .t-half-l,.t-half-r,.t-third,.t-two-third{grid-column:1/-1}
}

/* ritmo vertical fixo em todo o site */
.stack{display:flex;flex-direction:column}
.stack--label{gap:var(--s5)}   /* rótulo → título */
.stack--title{gap:var(--s6)}   /* título → lede   */
.stack--lede{gap:var(--s7)}    /* lede → conteúdo */
.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)}
.mt-8{margin-top:var(--s8)} .mt-9{margin-top:var(--s9)}

/* =============================================================
   MICRO-GRAFISMOS — a diagonal do símbolo, sistematizada
   ============================================================= */

/* 01 · fio diagonal: assinatura silenciosa da seção escura */
.diag-hair{position:absolute;top:-4%;right:7%;width:1px;height:72%;
  transform:rotate(45deg);transform-origin:top center;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--accent-gfx) 24%,var(--accent-gfx) 76%,transparent);
  opacity:.3}

/* 02 · barra separadora */
.slash{display:inline-block;width:1.5px;height:.8em;background:var(--signal);
  transform:rotate(45deg);margin:0 .5em;vertical-align:-.05em}
.slash--quiet{background:var(--accent-gfx);opacity:.7}

/* 04 · arco marca-d'água: uma aparição por página, sempre cortado */
.arc{position:absolute;pointer-events:none;opacity:.09;color:var(--accent-gfx)}

/* 05 · fio com ponta acesa */
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--lit{position:relative;height:1px;background:var(--line);border:0;margin:0}
.rule--lit::before{content:"";position:absolute;left:0;top:0;width:18px;height:1px;
  background:var(--accent-gfx)}

/* 06 · marcador de lista: o grafismo mais frequente do sistema */
.list{list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;
  font-size:15.5px;line-height:1.6;max-width:60ch}
.list li::before{content:"";width:1.5px;height:9px;background:var(--accent-gfx);
  transform:rotate(45deg);margin-top:.58em;justify-self:center}
.list b{font-weight:var(--fw-strong)}
.list--loose{gap:var(--s5)}

/* 03 · corte de página: ângulo raso na web, descendo da direita para a
   esquerda como no símbolo. O 45° só funciona em formato vertical. */
.cut{position:absolute;left:0;right:0;top:0;height:9vw;
  background:var(--cv-champagne);
  clip-path:polygon(0 0,100% 0,0 100%);
  pointer-events:none}