/* ==========================================================================
   Sabrina Branding — sistema visual
   Estrutura e ritmo: referência monopo saigon (monocromático, 0px/75px,
   easing lento). Cor: paleta da marca, usada apenas na mídia do hero.

   ABISSAL        #0C1A18   Pantone 5463 C   fundo do hero
   PETRÓLEO       #1E4440   Pantone 560 C    massa principal
   PEDRA DO MAR   #527870   Pantone 5555 C   meio-tom
   NEBLINA        #DCE6E0   Pantone 621 C    luz fria
   PERGAMINHO     #F0EAE0   Pantone 663 C    luz quente
   BRANCO         #FFFFFF                    texto sobre escuro
   PRETO          #000000   Pantone Black C  texto e faixas escuras

   Tipografia — Public Sans
   600 SemiBold   títulos
   300 Light      subtítulos e linhas de apoio (nunca itálico)
   400 Regular    corpo de texto
   500 Medium     labels funcionais (metadados), tracking mínimo
   ========================================================================== */

/* --------------------------------------------------------------------------
   Public Sans hospedada aqui mesmo (SIL Open Font License — ver
   assets/fonts/LICENSE-public-sans.txt). Sem depender do Google Fonts: o site
   não faz requisição a terceiros e a tipografia da marca aparece já no
   primeiro quadro, mesmo em rede que bloqueie fontes externas.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/public-sans-300.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/public-sans-400.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/public-sans-500.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/public-sans-600.woff2") format("woff2")}

:root{
  /* Paleta da marca */
  --abissal:#0C1A18;
  --petroleo:#1E4440;
  --pedra-do-mar:#527870;
  --neblina:#DCE6E0;
  --pergaminho:#F0EAE0;

  --obsidian:#000000;
  --paper:#ffffff;
  --inkstone:#181818;
  --felt-gray:#6d6d6d;
  --slate-pill:#636363;
  --ash-mist:#9a9a9a;
  --pewter:#808080;

  /* Tipografia da marca — Public Sans
     600 título · 300 subtítulo · 400 corpo · 500 label funcional */
  --font-brand:'Public Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tracking-label:.05em;

  --text-caption:12px;  --leading-caption:1.19;
  --text-body-sm:16px;  --leading-body-sm:1.15;
  --text-body:18px;     --leading-body:1.21;

  --w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600;

  --sp-8:8px; --sp-12:12px; --sp-28:28px; --sp-40:40px;
  --sp-48:48px; --sp-64:64px; --sp-68:68px; --sp-152:152px;

  --page-max-width:1078px;
  --section-gap:46px;
  --card-padding:34px;
  --element-gap:14px;

  --radius-buttons:75px;
  --radius-cards:0px;

  --ease-monopo:cubic-bezier(0.19,1,0.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font-brand);
  background:var(--paper);
  color:var(--obsidian);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--obsidian);color:var(--paper)}

.wrap{max-width:var(--page-max-width);margin:0 auto;padding:0 28px}

/* ---------------- HEADER ---------------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:82px;display:flex;align-items:center;
  background:transparent;
  transition:background .8s var(--ease-monopo),border-color .8s var(--ease-monopo);
  border-bottom:1px solid transparent;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
/* Logotipo da barra fixa — vetor, recompondo o lockup horizontal.
   A cor segue o contexto: Pergaminho sobre o hero, Abissal sobre fundo claro. */
.logo{display:flex;align-items:center;color:var(--pergaminho);--fundo-marca:transparent}
.logo-lockup{display:block}
.logo-lockup svg{height:46px;width:auto;display:block;overflow:visible}
.locale{display:flex;gap:14px;font-weight:var(--w-medium);letter-spacing:var(--tracking-label);font-size:var(--text-caption);line-height:var(--leading-caption);color:#fff;transition:color .8s var(--ease-monopo)}
.locale span{opacity:.45}
.locale span.active{opacity:1}
.locale a{color:inherit;text-decoration:none;opacity:.45;transition:opacity .8s var(--ease-monopo)}
.locale a.active,.locale a:hover{opacity:1}
nav.menu{display:flex;gap:28px}
nav.menu a{
  font-size:11px;line-height:1.36;letter-spacing:var(--tracking-label);text-transform:uppercase;
  font-weight:var(--w-medium);color:#fff;position:relative;
  transition:color .8s var(--ease-monopo),opacity .8s var(--ease-monopo);
}
nav.menu a::after{
  content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:currentColor;transition:width 1.25s var(--ease-monopo);
}
nav.menu a:hover::after,nav.menu a[aria-current="page"]::after{width:100%}

/* estado sobre fundo claro — aplicado ao rolar, ou desde o topo em páginas internas */
header[data-hero-logo="true"]:not(.scrolled) .logo{opacity:0;pointer-events:none}
.logo{transition:opacity .8s var(--ease-monopo)}
header.on-light,header.scrolled{background:var(--paper);border-bottom-color:rgba(0,0,0,.12)}
header.on-light .logo,header.scrolled .logo{color:var(--abissal);--fundo-marca:var(--paper)}
header.on-light nav.menu a,header.scrolled nav.menu a,
header.on-light .locale,header.scrolled .locale{color:var(--obsidian)}

.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:inherit}
.menu-toggle span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0;transition:transform .8s var(--ease-monopo),opacity .4s ease}


/* ---------------- ABERTURA ----------------
   Cortina cheia em Abissal: cada linha da frase sobe de trás de uma máscara,
   a frase se firma e a cortina inteira desliza para cima revelando o hero —
   o mesmo gesto lento da referência. Tudo em CSS: sem JavaScript o site abre
   igual, só sem a memória de "já vi". */
.intro{
  position:fixed;inset:0;z-index:300;background:var(--abissal);
  display:grid;place-items:center;text-align:center;padding:28px;
  animation:intro-cortina 1s var(--ease-monopo) 1.5s forwards;
}
.intro.pular{display:none}
.intro-frase{
  font-size:clamp(28px,5vw,72px);font-weight:var(--w-semibold);
  line-height:1.08;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--pergaminho);
}
/* a máscara: a linha nasce escondida abaixo do próprio bloco e sobe */
.intro-frase .linha{display:block;overflow:hidden}
.intro-frase .linha > span{
  display:block;transform:translateY(110%);
  animation:intro-linha .95s var(--ease-monopo) forwards;
}
.intro-frase .linha:nth-child(1) > span{animation-delay:.15s}
.intro-frase .linha:nth-child(2) > span{animation-delay:.29s}
@keyframes intro-linha{to{transform:translateY(0)}}
@keyframes intro-cortina{to{transform:translateY(-101%);visibility:hidden}}

/* o hero espera a cortina: sem isso ele terminaria de animar escondido */
.com-intro .hero-wordmark{animation-delay:1.95s}
.com-intro .hero .kicker{animation-delay:2s}
.com-intro .hero h1{animation-delay:2.15s}
.com-intro .hero .hero-sub{animation-delay:2.4s}
.com-intro .hero .hero-cta{animation-delay:2.55s}

/* o aviso de cookies espera a cortina — durante a abertura ele só polui */
.com-intro .cookie{opacity:0;pointer-events:none;
  animation:cookie-entra .8s var(--ease-monopo) 2.7s forwards}
@keyframes cookie-entra{to{opacity:1;pointer-events:auto}}
.sem-abertura .cookie{opacity:1;pointer-events:auto;animation:none}

/* visita seguinte na mesma aba: o hero nasce pronto, sem a entrada escalonada */
.sem-abertura .hero-wordmark,.sem-abertura .hero .kicker,.sem-abertura .hero h1,
.sem-abertura .hero .hero-sub,.sem-abertura .hero .hero-cta{
  animation:none;opacity:1;transform:none}

/* ---------------- BOTÕES ---------------- */
.btn{
  display:inline-block;background:transparent;
  border-radius:var(--radius-buttons);
  padding:11px 33px;
  font-size:var(--text-body-sm);font-weight:var(--w-regular);line-height:var(--leading-body-sm);
  cursor:pointer;font-family:inherit;
  transition:border-color .8s var(--ease-monopo),letter-spacing .8s var(--ease-monopo),color .8s var(--ease-monopo),opacity .4s ease;
}
.btn-dark{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn-dark:hover{border-color:rgba(255,255,255,.9);letter-spacing:.06em}
.btn-light{border:1px solid var(--obsidian);color:var(--obsidian)}
.btn-brand{border:1px solid var(--petroleo);color:var(--petroleo)}
.btn-brand:hover{letter-spacing:.06em;background:var(--petroleo);color:var(--pergaminho)}
.btn-light:hover{letter-spacing:.06em}
.btn:disabled{opacity:.3;cursor:not-allowed}

/* ---------------- HERO ---------------- */
/* Fundo líquido com a paleta da marca: abissal · petróleo · pedra do mar
   · neblina · pergaminho. Cada massa deriva num tempo diferente, então o
   desenho nunca se repete de forma perceptível. */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;background:var(--abissal);
}
.hero.compact{min-height:66svh}

/* vídeo de fundo — as massas em CSS ficam atrás, como reserva caso ele falhe */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;pointer-events:none;
  /* o mesmo grau de desfoque das massas em CSS; a ampliação evita que o
     desfoque escureça as bordas do quadro */
  filter:blur(26px);transform:scale(1.09);
  opacity:0;transition:opacity 1.6s var(--ease-monopo);
}
.hero-video.pronto{opacity:1}
.hero-scrim,.hero-grain{z-index:2}
.hero-inner,.hero-cta,.scroll-arrow{z-index:3}
.hero:has(.scroll-arrow) .hero-cta{z-index:4}

.hero-media{position:absolute;inset:0;z-index:0;animation:swell 44s ease-in-out infinite alternate}
.hero-media span{position:absolute;border-radius:50%;filter:blur(150px);will-change:transform;display:block}

.hero-media .m1{
  width:88vw;height:88vw;left:-18vw;top:-26vw;
  background:radial-gradient(circle at 40% 40%,rgba(30,68,64,.98),rgba(30,68,64,0) 66%);
  animation:drift1 26s var(--ease-monopo) infinite alternate;
}
.hero-media .m2{
  width:76vw;height:76vw;right:-14vw;top:-16vw;
  background:radial-gradient(circle at 55% 45%,rgba(82,120,112,1),rgba(82,120,112,0) 62%);
  animation:drift2 34s var(--ease-monopo) infinite alternate;
}
.hero-media .m3{
  width:58vw;height:58vw;right:-4vw;bottom:-26vh;
  background:radial-gradient(circle at 50% 50%,rgba(220,230,224,.95),rgba(220,230,224,0) 60%);
  animation:drift3 29s var(--ease-monopo) infinite alternate;
}
.hero-media .m4{
  width:46vw;height:46vw;left:-6vw;bottom:-22vh;
  background:radial-gradient(circle at 50% 50%,rgba(240,234,224,.85),rgba(240,234,224,0) 58%);
  animation:drift4 38s var(--ease-monopo) infinite alternate;
}
.hero-media .m5{
  width:66vw;height:66vw;left:14vw;top:-30vh;
  background:radial-gradient(circle at 50% 50%,rgba(12,26,24,.95),rgba(12,26,24,0) 60%);
  animation:drift5 31s var(--ease-monopo) infinite alternate;
}
.hero-media .m6{
  width:44vw;height:44vw;left:34vw;bottom:-34vh;
  background:radial-gradient(circle at 50% 50%,rgba(30,68,64,1),rgba(30,68,64,0) 58%);
  animation:drift6 24s var(--ease-monopo) infinite alternate;
}

/* Véu que garante contraste do texto branco sobre as áreas claras */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 34% at 50% 44%,rgba(12,26,24,.62),rgba(12,26,24,0) 72%),
    linear-gradient(180deg,rgba(12,26,24,.45) 0%,rgba(12,26,24,0) 26%,rgba(12,26,24,0) 62%,rgba(12,26,24,.42) 100%);
}
.hero-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes swell{
  0%{transform:scale(1) rotate(0deg)}
  100%{transform:scale(1.12) rotate(6deg)}
}
@keyframes drift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(16vw,12vh,0) scale(1.28)}}
@keyframes drift2{0%{transform:translate3d(0,0,0) scale(1.12)}100%{transform:translate3d(-14vw,16vh,0) scale(.88)}}
@keyframes drift3{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-12vw,-16vh,0) scale(1.3)}}
@keyframes drift4{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(14vw,-12vh,0) scale(.85)}}
@keyframes drift5{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-10vw,16vh,0) scale(1.35)}}
@keyframes drift6{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(18vw,-14vh,0) scale(1.4)}}

/* Bloco de conteúdo do hero — alinhado à esquerda, terço superior */
.hero-inner{position:relative;z-index:2;width:100%;padding:0}
.hero:has(.scroll-arrow) .hero-inner{padding-bottom:clamp(40px,7vh,90px)}
.hero-wrap{
  max-width:min(1440px,94vw);margin:0 auto;padding:0 28px;
  display:flex;flex-direction:column;align-items:flex-start;
}
.hero.compact .hero-inner{padding:120px 0 100px}
.hero.compact .hero-inner .wrap{padding:0 28px}


/* o tamanho responde à largura e também à altura da tela, para não
   dominar a composição em telas baixas */
.hero-wordmark svg{width:clamp(190px,min(28vw,38vh),430px);height:auto;display:block;overflow:visible}
.hero-wordmark{
  color:var(--pergaminho);--fundo-marca:transparent;margin-bottom:clamp(46px,8.5vh,112px);
  opacity:0;transform:translateY(24px);
  animation:rise 1.25s var(--ease-monopo) .1s forwards;
}
.hero h1{
  font-size:clamp(31px,5.4vw,78px);
  font-weight:var(--w-semibold);line-height:1.08;letter-spacing:-.02em;
  color:var(--pergaminho);text-transform:uppercase;
  opacity:0;transform:translateY(32px);
  animation:rise 1.25s var(--ease-monopo) .3s forwards;
}
.hero.compact h1{font-size:clamp(34px,6vw,80px);line-height:.98;letter-spacing:-.02em;color:#fff;text-transform:uppercase}
/* título que ocupa sozinho o bloco, sem linha de apoio embaixo */
.hero.compact h1.grande{font-size:clamp(27px,4.3vw,58px);line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.hero .kicker{
  display:block;font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;
  font-weight:var(--w-medium);color:rgba(255,255,255,.6);margin-bottom:var(--sp-28);
  opacity:0;animation:fade 1.25s var(--ease-monopo) .15s forwards;
}
.hero .hero-sub{
  max-width:58ch;color:rgba(255,255,255,.9);font-size:var(--text-body);
  font-weight:var(--w-light);line-height:1.5;
  margin-top:var(--sp-12);
  opacity:0;animation:fade 1.25s var(--ease-monopo) .55s forwards;
}
.hero.compact .hero-sub{margin-top:var(--sp-40);color:rgba(255,255,255,.8)}
.hero-cta{
  margin-top:var(--sp-48);
  opacity:0;animation:fade 1.25s var(--ease-monopo) .8s forwards;
}
/* Quando existe a seta de rolagem (home), o botão vai para o canto oposto,
   na mesma linha de base — assim os dois não disputam o mesmo espaço. */
.hero:has(.scroll-arrow) .hero-cta{
  position:absolute;z-index:3;margin-top:0;
  right:max(30px,calc((100vw - min(1440px,94vw))/2 + 14px));
  bottom:64px;
}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* Seta de rolagem — leva à próxima seção */
.scroll-arrow{
  position:absolute;left:max(30px,calc((100vw - min(1440px,94vw))/2 + 14px));bottom:44px;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:10px 14px 4px;
  color:rgba(255,255,255,.7);
  transition:color .8s var(--ease-monopo),transform .8s var(--ease-monopo);
}
.scroll-arrow-label{
  font-size:11px;line-height:1.36;letter-spacing:var(--tracking-label);
  font-weight:var(--w-medium);text-transform:uppercase;
}
.scroll-arrow svg{
  width:24px;height:58px;overflow:visible;
  animation:arrow-bob 2.6s var(--ease-monopo) infinite;
}
.scroll-arrow svg line,.scroll-arrow svg polyline{
  fill:none;stroke:currentColor;stroke-width:1;
  stroke-linecap:square;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}
.scroll-arrow:hover{color:#fff}
.scroll-arrow:hover svg{animation-play-state:paused;transform:translateY(6px)}
.scroll-arrow:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:6px;border-radius:2px}
@keyframes arrow-bob{
  0%{transform:translateY(0)}
  45%{transform:translateY(9px)}
  100%{transform:translateY(0)}
}

/* ---------------- SEÇÕES ---------------- */
section.band{padding:var(--sp-152) 0}
section.band.tight{padding:var(--sp-68) 0}
section.dark{background:var(--obsidian);color:var(--paper)}
section.dark .eyebrow{color:rgba(255,255,255,.5)}

.eyebrow{
  font-size:11px;line-height:1.36;letter-spacing:var(--tracking-label);text-transform:uppercase;
  font-weight:var(--w-medium);color:var(--felt-gray);margin-bottom:var(--sp-40);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}

h2.whisper{font-size:clamp(32px,5.6vw,68px);font-weight:var(--w-semibold);line-height:1.08;letter-spacing:-.015em}
h2.caps{text-transform:uppercase;letter-spacing:-.02em}
h2.anchor{font-size:clamp(36px,6.6vw,82px);font-weight:var(--w-semibold);line-height:.86;text-transform:uppercase;letter-spacing:-.015em}
h3.sub{font-size:clamp(24px,3.2vw,40px);font-weight:var(--w-semibold);line-height:1.12;letter-spacing:-.01em}
h3.sub.caixa-alta{text-transform:uppercase;letter-spacing:-.015em}
/* Destaque de marca dentro de um título */
.link-brand{
  color:var(--petroleo);position:relative;white-space:nowrap;
  transition:color .8s var(--ease-monopo);
}
.link-brand::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 1.25s var(--ease-monopo);
}
.link-brand:hover::after{transform:scaleX(1)}

/* Manifesto — mesmo tratamento da headline da Home */
.manifesto{
  font-size:clamp(27px,4.3vw,58px);
  font-weight:var(--w-semibold);line-height:1.06;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--abissal);
  margin-top:var(--sp-28);
}
.manifesto .destaque{color:var(--petroleo)}

/* Frase-manifesto ao lado da descrição */
.statement{
  font-size:clamp(19px,1.8vw,24px);font-weight:var(--w-semibold);
  line-height:1.3;letter-spacing:-.01em;color:var(--obsidian);
}
.statement.abissal{color:var(--abissal)}
section.dark .statement{color:var(--paper)}

p.lead{font-size:var(--text-body);font-weight:var(--w-light);line-height:1.58;color:var(--felt-gray);max-width:52ch}
section.dark p.lead{color:rgba(255,255,255,.62)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-68);align-items:start;margin-top:var(--section-gap)}
.split.reverse .col-a{order:2}
/* coluna da direita alinhada ao meio do bloco de texto da esquerda */
.split.centrado{align-items:center}
.stack{display:flex;flex-direction:column;gap:var(--element-gap)}
.mt-28{margin-top:var(--sp-28)}
.mt-40{margin-top:var(--sp-40)}
.mt-68{margin-top:var(--sp-68)}
.mt-152{margin-top:clamp(60px,9vh,110px)}

.quote{
  border-left:1px solid currentColor;padding-left:var(--sp-28);
  font-size:clamp(21px,2.4vw,32px);font-weight:var(--w-light);line-height:1.3;
}

/* Linhas editoriais em coluna única */
.rows{margin-top:var(--sp-68);border-top:1px solid rgba(0,0,0,.18)}
.rows.no-top{margin-top:0;border-top:0}

/* Linha que aponta para uma reportagem externa */
.row-link{display:block;transition:color .8s var(--ease-monopo)}
.row-link .ttl{display:inline}
.row-link .ttl::after{
  content:"\2197";font-size:.82em;opacity:.5;margin-left:8px;
  display:inline-block;
  transition:transform .8s var(--ease-monopo),opacity .8s var(--ease-monopo);
}
.row-link .src{
  display:block;font-size:11px;line-height:1.36;letter-spacing:var(--tracking-label);
  font-weight:var(--w-medium);text-transform:uppercase;opacity:.42;margin-top:8px;
}
.row:hover .row-link .ttl::after{transform:translate(3px,-3px);opacity:1}
.row:hover .row-link .ttl{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
section.dark .rows{border-top-color:rgba(255,255,255,.18)}
.row{
  display:grid;grid-template-columns:88px 1fr 1.1fr;gap:var(--sp-28);
  padding:var(--sp-40) 0;border-bottom:1px solid rgba(0,0,0,.18);align-items:baseline;
  transition:padding-left 1.25s var(--ease-monopo);
}
section.dark .row{border-bottom-color:rgba(255,255,255,.18)}
.row:hover{padding-left:14px}
.row .num{font-size:11px;letter-spacing:var(--tracking-label);font-weight:var(--w-medium);opacity:.5}
.row h4{font-size:clamp(20px,2.4vw,32px);font-weight:var(--w-semibold);line-height:1.15;letter-spacing:-.01em}
.row p{font-size:var(--text-body-sm);font-weight:var(--w-regular);line-height:1.58;color:var(--felt-gray)}
section.dark .row p{color:rgba(255,255,255,.6)}

/* Etapas do método (bloco grande numerado) */
.step{
  display:grid;grid-template-columns:140px 1fr;gap:var(--sp-40);
  padding:var(--sp-68) 0;border-bottom:1px solid rgba(0,0,0,.18);
}
section.dark .step{border-bottom-color:rgba(255,255,255,.18)}
.step:first-of-type{border-top:1px solid rgba(0,0,0,.18)}
section.dark .step:first-of-type{border-top-color:rgba(255,255,255,.18)}
/* Número e símbolo da fase, empilhados na mesma coluna.
   A pilha é flex para o espaço entre os dois ser sempre o mesmo, e os
   algarismos são tabulares para que 01, 02, 03 e 04 tenham largura idêntica —
   sem isso a coluna dança de uma etapa para a outra. */
.step .step-num{
  font-size:clamp(38px,4.6vw,66px);font-weight:var(--w-semibold);line-height:.9;
  font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2vw,28px);
  opacity:1;color:rgba(12,26,24,.26);
}
/* caixa quadrada e igual para os quatro símbolos: mesma escala, mesmo eixo */
.step-icon{display:block;line-height:0}
/* overflow escondido de propósito: o arquivo traz os quatro símbolos lado a
   lado e o viewBox recorta o desta fase — liberar o overflow faria os
   outros três vazarem para fora da caixa */
.step-icon svg{width:clamp(58px,6.2vw,86px);height:auto;display:block;overflow:hidden}
.step .step-num .step-icon{color:var(--abissal)}
.step h3{font-size:clamp(26px,3.6vw,46px);font-weight:var(--w-semibold);line-height:1.06;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:var(--sp-28)}
.step p{font-size:var(--text-body);font-weight:var(--w-regular);line-height:1.58;color:var(--felt-gray);max-width:60ch}
section.dark .step p{color:rgba(255,255,255,.62)}
.step ul{list-style:none;margin-top:var(--sp-28);display:flex;flex-wrap:wrap;gap:10px}
.step ul li{
  font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;
  font-weight:var(--w-medium);border:1px solid currentColor;border-radius:var(--radius-buttons);
  padding:7px 18px;opacity:.65;
}

/* Tríade */
.triade{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.18);margin-top:var(--sp-68);border:1px solid rgba(255,255,255,.18)}
section:not(.dark) .triade{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.18)}
.triade > div{background:var(--obsidian);padding:var(--card-padding)}
section:not(.dark) .triade > div{background:var(--paper)}
.triade span{font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--w-medium);opacity:.5}
.triade h4{font-size:clamp(26px,3vw,38px);font-weight:var(--w-semibold);line-height:1.08;letter-spacing:-.01em;margin:var(--sp-12) 0}
.triade p{font-size:var(--text-body-sm);font-weight:var(--w-regular);line-height:1.58;opacity:.62}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);padding:var(--sp-40) 0}
.marquee div{display:inline-block;animation:slide 85s linear infinite}
.marquee span{font-size:clamp(36px,6.6vw,82px);font-weight:var(--w-semibold);letter-spacing:-.015em;line-height:.9;text-transform:uppercase;padding-right:.35em}
.marquee span.hollow{-webkit-text-stroke:1px var(--obsidian);color:transparent}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* CTA */
.cta .btn{margin-top:var(--sp-48)}

/* Faixa em Pergaminho — usada no questionário da página Contato.
   Os traços e bordas trocam de preto para Abissal, senão destoam do fundo quente. */
.band.pergaminho{background:var(--pergaminho);color:var(--abissal)}
.band.pergaminho .eyebrow{color:rgba(12,26,24,.55)}
.band.pergaminho p.lead,
.band.pergaminho .q .q-help,
.band.pergaminho .form-note,
.band.pergaminho .progress-label{color:rgba(12,26,24,.62)}
.band.pergaminho .q-title,
.band.pergaminho h3.sub{color:var(--abissal)}
.band.pergaminho .progress-track{background:rgba(12,26,24,.2)}
.band.pergaminho .progress-fill{background:var(--abissal)}
.band.pergaminho .q input[type=text],
.band.pergaminho .q input[type=email],
.band.pergaminho .q input[type=tel],
.band.pergaminho .q textarea,
.band.pergaminho .q select{color:var(--abissal);border-bottom-color:rgba(12,26,24,.28)}
.band.pergaminho .q input:focus,
.band.pergaminho .q textarea:focus,
.band.pergaminho .q select:focus{border-bottom-color:var(--abissal)}
.band.pergaminho .q .options label{border-color:rgba(12,26,24,.25)}
.band.pergaminho .q .options label:hover,
.band.pergaminho .q .options label:has(input:checked){border-color:var(--abissal)}
.band.pergaminho .q .options input{accent-color:#0C1A18}
.band.pergaminho .btn-light{border-color:var(--abissal);color:var(--abissal)}
.band.pergaminho .contact-list{border-top-color:rgba(12,26,24,.2)}
.band.pergaminho .contact-list a,
.band.pergaminho .contact-list p{color:rgba(12,26,24,.62)}
.band.pergaminho .contact-list a:hover{color:var(--abissal)}
.band.pergaminho .q select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230C1A18' stroke-width='1'/%3E%3C/svg%3E")}

/* Bloco de chamada — fundo Petróleo, texto Pergaminho */
.inicie{background:var(--petroleo);color:var(--pergaminho)}
.inicie .eyebrow{color:rgba(240,234,224,.6)}
.inicie h2{color:var(--pergaminho)}
.inicie p.lead{color:rgba(240,234,224,.75)}

/* Botão grande e pulsante */
.btn-pulse{
  position:relative;
  background:var(--pergaminho);color:var(--petroleo);
  border:1px solid var(--pergaminho);
  padding:20px 56px;text-align:center;
  font-size:clamp(15px,1.4vw,19px);
  font-weight:var(--w-medium);letter-spacing:.06em;text-transform:uppercase;
  animation:pulso 2.4s var(--ease-monopo) infinite;
}
.btn-pulse::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid var(--pergaminho);
  animation:halo 2.4s var(--ease-monopo) infinite;
  pointer-events:none;
}
.btn-pulse:hover{letter-spacing:.1em;animation-play-state:paused}
.btn-pulse:hover::after{animation-play-state:paused}
/* variante para fundo claro: preenchida em Petróleo */
.btn-pulse.petroleo{background:var(--petroleo);color:var(--pergaminho);border-color:var(--petroleo);
  transition:background .8s var(--ease-monopo),border-color .8s var(--ease-monopo),letter-spacing .8s var(--ease-monopo)}
.btn-pulse.petroleo::after{border-color:var(--petroleo)}
.btn-pulse.petroleo:hover{background:var(--abissal);border-color:var(--abissal);color:var(--pergaminho)}
@keyframes pulso{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
@keyframes halo{
  0%{transform:scale(1);opacity:.75}
  70%{transform:scale(1.22);opacity:0}
  100%{transform:scale(1.22);opacity:0}
}

/* Fechamento — assinatura da marca antes do rodapé */
.closing{
  background:var(--pergaminho);color:var(--abissal);
  --fundo-marca:var(--pergaminho);
  padding:clamp(90px,14vh,160px) 0 clamp(50px,7vh,80px);
}
.closing-lockup{display:flex;justify-content:flex-start}
.closing-lockup-svg svg{width:clamp(250px,42vw,620px);height:auto;display:block;overflow:visible}

/* ---------------- FORMULÁRIO MULTI-ETAPAS ---------------- */
.form-shell{margin-top:var(--sp-68);max-width:760px}
.progress{display:flex;align-items:center;gap:var(--sp-28);margin-bottom:var(--sp-48)}
.progress-track{flex:1;height:1px;background:rgba(0,0,0,.18);position:relative}
.progress-fill{position:absolute;left:0;top:0;height:1px;background:var(--obsidian);width:11%;transition:width 1.25s var(--ease-monopo)}
.progress-label{font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--w-medium);color:var(--felt-gray);white-space:nowrap}

.q{display:none;animation:qin .8s var(--ease-monopo)}
.q.active{display:block}
@keyframes qin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.q .q-title{display:block;font-size:clamp(22px,2.8vw,34px);font-weight:var(--w-semibold);line-height:1.15;letter-spacing:-.01em;margin-bottom:var(--sp-12)}
.q .q-title em{font-style:normal;color:var(--felt-gray)}
.field-error,.form-error{
  font-size:var(--text-body-sm);line-height:1.4;color:#8a1e1e;margin-top:var(--sp-12);
}
.form-error{margin-top:var(--sp-28)}
.form-error a{border-bottom:1px solid currentColor}
.q input[aria-invalid=true],.q textarea[aria-invalid=true],.q select[aria-invalid=true]{border-bottom-color:#8a1e1e}
.q .options[aria-invalid=true] label{border-color:#8a1e1e}
.q .q-help{font-size:var(--text-body-sm);font-weight:var(--w-light);color:var(--felt-gray);margin-bottom:var(--sp-40)}
.q input[type=text],.q input[type=email],.q input[type=tel],.q textarea,.q select{
  width:100%;font-family:inherit;font-size:var(--text-body);color:var(--obsidian);
  background:transparent;border:0;border-bottom:1px solid rgba(0,0,0,.25);
  border-radius:0;padding:14px 0;outline:none;
  transition:border-color .8s var(--ease-monopo);
}
/* A seta do campo de seleção precisa vir DEPOIS da regra acima: aquele
   `background:transparent` é um atalho e zera repeat/position — sem esta
   ordem o chevron se repete lado a lado por cima do texto. */
.q select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:12px 8px}
.q input:focus,.q textarea:focus,.q select:focus{border-bottom-color:var(--obsidian)}
.q textarea{resize:vertical;min-height:120px}
.q .options{display:flex;flex-direction:column;gap:10px}
.q .options label{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  border:1px solid rgba(0,0,0,.2);border-radius:var(--radius-buttons);
  padding:13px 26px;font-size:var(--text-body-sm);
  transition:border-color .8s var(--ease-monopo),letter-spacing .8s var(--ease-monopo);
}
.q .options label:hover{border-color:var(--obsidian)}
.q .options input{accent-color:#000}
.q .options input:checked + span{font-weight:var(--w-regular)}
.q .options label:has(input:checked){border-color:var(--obsidian)}

.form-nav{display:flex;gap:var(--sp-12);align-items:center;margin-top:var(--sp-48);flex-wrap:wrap}
.form-note{font-size:11px;line-height:1.36;font-weight:var(--w-medium);letter-spacing:var(--tracking-label);color:var(--felt-gray);margin-top:var(--sp-40)}
.form-done{display:none;animation:qin .8s var(--ease-monopo)}
.form-done.active{display:block}

/* Contatos diretos */
.contact-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-40);margin-top:var(--sp-68);border-top:1px solid rgba(0,0,0,.18);padding-top:var(--sp-40)}
.contact-list h5{font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--w-medium);margin-bottom:var(--sp-12)}
.contact-list a,.contact-list p{display:block;font-size:var(--text-body-sm);font-weight:var(--w-regular);color:var(--felt-gray);margin-top:var(--sp-8);transition:color .4s ease}
.contact-list a:hover{color:var(--obsidian)}

/* Editorial: texto largo */
.prose p{font-size:var(--text-body);font-weight:var(--w-regular);line-height:1.58;color:var(--felt-gray);max-width:62ch;margin-top:var(--sp-28)}
.prose p.big{font-size:clamp(21px,2.4vw,32px);font-weight:var(--w-light);line-height:1.35;color:var(--obsidian)}
section.dark .prose p{color:rgba(255,255,255,.62)}
section.dark .prose p.big{color:var(--paper)}

.draft-note strong{font-weight:var(--w-semibold)}
.draft-note{
  margin-top:var(--sp-40);border:1px dashed rgba(0,0,0,.3);
  padding:var(--card-padding);font-size:var(--text-body-sm);line-height:1.58;color:var(--felt-gray);
}

/* ---------------- FOOTER ---------------- */
footer{background:var(--pergaminho);color:var(--abissal);padding:0 0 var(--sp-40)}
.footer-mark{font-size:clamp(30px,6vw,76px);font-weight:var(--w-semibold);line-height:.92;letter-spacing:-.015em;margin-bottom:var(--sp-28)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-40);align-items:start}
.footer-grid h5{font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:var(--w-medium);margin-bottom:var(--sp-12);color:var(--abissal)}
.footer-grid p,.footer-grid a{display:block;font-size:11px;font-weight:var(--w-regular);line-height:1.36;color:rgba(12,26,24,.62);margin-top:var(--sp-8)}
.footer-grid a{transition:color .4s ease}
.footer-grid a:hover{color:var(--abissal)}
.footer-base{
  display:flex;justify-content:space-between;gap:20px;
  margin-top:var(--sp-64);padding-top:var(--sp-28);
  border-top:1px solid rgba(12,26,24,.18);font-size:11px;line-height:1.36;
  font-weight:var(--w-medium);letter-spacing:var(--tracking-label);color:rgba(12,26,24,.6);
}

/* Cookie */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(55,55,55,.78);backdrop-filter:blur(8px);color:#fff;padding:10px 28px;
  display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
  transition:transform 1.25s var(--ease-monopo),opacity .8s var(--ease-monopo);
}
.cookie p{font-family:var(--font-brand);font-weight:var(--w-regular);font-size:13px;line-height:1.32;max-width:60ch}
.cookie button{
  font-family:var(--font-brand);font-size:13px;color:#fff;background:transparent;
  border:1px solid #fff;border-radius:var(--radius-buttons);padding:8px 26px;cursor:pointer;
  transition:letter-spacing .8s var(--ease-monopo);
}
.cookie button:hover{letter-spacing:.06em}
.cookie.hidden{transform:translateY(120%);opacity:0;pointer-events:none}

/* Reveal */
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1.25s var(--ease-monopo),transform 1.25s var(--ease-monopo)}
.reveal.in{opacity:1;transform:none}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:900px){
  /* no celular as massas precisam ser maiores em relação à tela,
     senão a luz fica fora do quadro e o hero parece chapado */
  .hero-media span{filter:blur(100px)}
  .hero-media .m1{width:160vw;height:160vw;left:-46vw;top:-34vh}
  .hero-media .m2{width:140vw;height:140vw;right:-52vw;top:-10vh}
  .hero-media .m3{width:118vw;height:118vw;right:-30vw;bottom:-16vh}
  .hero-media .m4{width:100vw;height:100vw;left:-34vw;bottom:-12vh}
  .hero-media .m5{width:130vw;height:130vw;left:-14vw;top:-26vh}
  .hero-media .m6{width:96vw;height:96vw;left:10vw;bottom:-26vh}

  section.band{padding:var(--sp-68) 0}
  .split{grid-template-columns:1fr;gap:var(--sp-40)}
  .split.reverse .col-a{order:0}
  .btn-pulse{padding:18px 30px}
  .row{grid-template-columns:1fr;gap:var(--sp-12)}
  .step{grid-template-columns:1fr;gap:var(--sp-12);padding:var(--sp-40) 0}
  .triade{grid-template-columns:1fr}
  .contact-list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-28)}
  .hero-foot{flex-direction:column;align-items:flex-start;bottom:28px}
  .scroll-arrow{display:none}
  .hero:has(.scroll-arrow) .hero-cta{position:static;margin:var(--sp-48) 0 0;align-self:flex-start;margin-left:max(28px,calc((100vw - min(1440px,94vw))/2 + 28px))}
  /* no celular o seletor fica ao lado do menu, em corpo menor */
  .locale{gap:10px;font-size:10px;margin-left:auto;margin-right:14px}

  .menu-toggle{display:block;color:#fff}
  header.on-light .menu-toggle,header.scrolled .menu-toggle{color:var(--obsidian)}
  nav.menu{
    position:fixed;inset:82px 0 auto 0;background:var(--paper);
    flex-direction:column;gap:0;padding:var(--sp-28) 28px var(--sp-40);
    transform:translateY(-120%);transition:transform 1.25s var(--ease-monopo);
    border-bottom:1px solid rgba(0,0,0,.12);
  }
  nav.menu.open{transform:none}
  header:has(nav.menu.open){background:var(--paper);border-bottom-color:rgba(0,0,0,.12)}
  header[data-hero-logo="true"]:has(nav.menu.open) .logo{opacity:1;pointer-events:auto}
  header:has(nav.menu.open) .logo{color:var(--abissal);--fundo-marca:var(--paper)}
  header:has(nav.menu.open) .menu-toggle{color:var(--obsidian)}
  nav.menu a{color:var(--obsidian)!important;font-size:22px;letter-spacing:0;text-transform:none;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.08)}
  nav.menu a::after{display:none}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-base{flex-direction:column}
  .marquee span{padding-right:.25em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* sem animação, tudo que entrava animado precisa nascer no estado final —
     senão o hero abre vazio para quem pede menos movimento */
  .reveal{opacity:1;transform:none}
  .intro{display:none}
  .hero-wordmark,.hero h1,.hero .kicker,.hero .hero-sub,.hero-cta,
  .hero-video.pronto,.marquee span,.cookie{opacity:1;transform:none;pointer-events:auto}
}