/* =========================================================
   +MARGEM — Refinamento tipográfico e camada de movimento
   Carregado por último: sobrepõe assets/style.css
   ========================================================= */

/* ---------------------------------------------------------
   1. TIPOGRAFIA
   --------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  font-variant-ligatures:common-ligatures contextual;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
}

/* Títulos: quebra equilibrada e kerning fechado do Playfair */
h1,h2,h3,h4{
  text-wrap:balance;
  font-feature-settings:"kern" 1,"liga" 1,"dlig" 1;
}
h1{letter-spacing:-.021em}
h2{letter-spacing:-.017em}
h3,h4{letter-spacing:-.011em}
.hero h1{letter-spacing:-.024em;word-spacing:.012em}

/* Texto corrido: evita linha órfã curta no fim do parágrafo */
p,li,figcaption,.desc{text-wrap:pretty}
.lead{hanging-punctuation:first allow-end}

/* Números sempre alinhados em colunas */
.num,.num-sm,.pillar-list .n,.maar-item .letter,
.snapshot li span:last-child,.footer-bottom,
.pc-index,.pc-formula b,.pc-cenario b{
  font-variant-numeric:lining-nums tabular-nums;
}

/* Aspas tipográficas e ênfase serifada */
.serif-note{font-feature-settings:"kern" 1,"liga" 1;letter-spacing:-.008em}
strong,b{font-weight:600;letter-spacing:-.002em}

/* Rótulos em caixa-alta: tracking proporcional ao corpo */
.eyebrow,.deliver-list .label,.contact-label,
.site-footer h4,.hero-tag,.pillar-list strong{
  font-feature-settings:"kern" 1,"case" 1;
}

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

:focus-visible{outline:2px solid var(--copper-light);outline-offset:3px}
.dark :focus-visible,.page-hero :focus-visible,
.cta-band :focus-visible,.site-header :focus-visible{outline-color:var(--copper-light)}


/* ---------------------------------------------------------
   2. CAMADA WEBGL
   --------------------------------------------------------- */
.hero,.page-hero{position:relative;overflow:hidden;isolation:isolate}
.page-hero .wrap{position:relative;z-index:2}

.gl-bg{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;
}
.gl-bg.gl-ready{opacity:1}

/* Com o shader ativo, o brilho estático do CSS recua */
.hero.gl-on::after{opacity:.05}


/* ---------------------------------------------------------
   3. MOVIMENTO
   --------------------------------------------------------- */

/* Barra de progresso da leitura */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;
  background:var(--copper);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* Header que compacta ao rolar */
.site-header{transition:background .3s ease,box-shadow .3s ease}
.nav{transition:height .32s cubic-bezier(.2,.7,.3,1)}
.brand img{transition:height .32s cubic-bezier(.2,.7,.3,1)}
.site-header.scrolled{
  background:rgba(14,32,56,.99);
  box-shadow:0 10px 34px rgba(8,21,39,.24);
}
.site-header.scrolled .nav{height:64px}
.site-header.scrolled .brand img{height:27px}

/* Revelação por rolagem */
.has-motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity .78s cubic-bezier(.22,.68,.28,1),
    transform .78s cubic-bezier(.22,.68,.28,1);
  transition-delay:var(--d,0ms);
}
.has-motion [data-reveal].is-in{opacity:1;transform:none}

/* Entrada do hero: percurso maior, mesma curva */
.has-motion [data-hero-in]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:
    opacity .95s cubic-bezier(.22,.68,.28,1),
    transform .95s cubic-bezier(.22,.68,.28,1);
  transition-delay:var(--d,0ms);
}
.has-motion [data-hero-in].is-in{opacity:1;transform:none}

/* A régua de cobre desenha-se em vez de aparecer */
.has-motion .hero .rule[data-hero-in]{
  transform:none;transform-origin:0 50%;
  transition:opacity .5s ease,clip-path .9s cubic-bezier(.22,.68,.28,1);
  clip-path:inset(0 100% 0 0);
}
.has-motion .hero .rule[data-hero-in].is-in{clip-path:inset(0 0 0 0)}

/* Micro-interações */
@media (hover:hover){
  .card{transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s ease}
  .light .card:hover,.white .card:hover{transform:translateY(-3px);border-color:rgba(193,112,63,.42)}
  .btn{transition:.22s,transform .22s cubic-bezier(.2,.7,.3,1)}
  .btn-primary:hover,.btn-outline:hover{transform:translateY(-1px)}
  .wa-float{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
  .wa-float:hover{transform:translateY(-3px) scale(1.04)}
  .scope-list li,.pillar-list li{transition:color .25s ease}
}

/* ---------------------------------------------------------
   4. VÍDEO DE FUNDO — Hero com camada de vídeo
   --------------------------------------------------------- */
.hero-video-bg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;overflow:hidden;
}

.hero-video-bg video{
  width:100%;height:100%;object-fit:cover;display:block;
}

.hero-video-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(14,32,56,.64) 0%,rgba(193,112,63,.18) 100%);
  z-index:2;pointer-events:none;
}

.hero .wrap{position:relative;z-index:3}


/* ---------------------------------------------------------
   5. MOVIMENTO REDUZIDO — tudo visível, nada anima
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .has-motion [data-reveal],
  .has-motion [data-hero-in]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .gl-bg{display:none}
  .hero-video-bg{display:none}
  .scroll-progress{display:none}
  .nav,.brand img,.card,.btn,.wa-float{transition:none}
}