/* ============================================================
   ATLAS CONSULTORIA — sistema editorial técnico
   Bodoni Moda (display) · Archivo (corpo) · Space Mono (rótulos)
   ============================================================ */

:root{
  /* superfícies — paleta Astra: azul-marinho + neutros frios */
  --ink:        #06223F;
  --ink-2:      #0A2A49;
  --ink-3:      #123458;
  --paper:      #F4F6F8;
  --paper-2:    #E8EEF3;

  /* texto */
  --fg-dark:    #E7EEF6;          /* texto sobre marinho */
  --fg-paper:   #0C2640;          /* texto sobre claro  */
  --muted-dark: rgba(231,238,246,0.60);
  --muted-paper:rgba(12,38,64,0.62);

  /* linhas */
  --line-dark:  rgba(231,238,246,0.16);
  --line-paper: rgba(12,38,64,0.14);
  --grid-dark:  rgba(231,238,246,0.05);

  /* acento Astra — verde-lima (sobrescrito por Tweaks) */
  --accent:     #A6DF05;
  --accent-ink: #06223F;          /* texto sobre o acento */
  --accent-light:#A6DF05;         /* acento legível sobre escuro */
  --accent-dark: #0C2640;         /* rótulos sobre claro (marinho) */

  /* tipografia — geométrica (alinhada à Astra) */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-mono:    "Poppins", system-ui, sans-serif;

  --maxw: 1320px;
  --pad:  clamp(20px, 5vw, 92px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--fg-dark);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--accent-ink); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- estrutura ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }

.section--dark{  background:var(--ink);   color:var(--fg-dark); }
.section--ink2{  background:var(--ink-2); color:var(--fg-dark); }
.section--paper{ background:var(--paper); color:var(--fg-paper); }
.section--accent{ background:var(--accent); color:var(--accent-ink); }

.pad-y{ padding-top:clamp(86px,12vw,180px); padding-bottom:clamp(86px,12vw,180px); }

/* ---------- rótulos / eyebrow ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:14px;
  color:var(--accent);
  margin:0 0 28px;
}
.eyebrow .num{ color:inherit; opacity:0.9; }
.eyebrow .rule{ flex:0 0 46px; height:1px; background:currentColor; opacity:0.55; }
.section--paper .eyebrow{ color:var(--accent-dark); }
.section--paper .eyebrow .rule{ background:var(--accent); opacity:1; }
.section--accent .eyebrow{ color:var(--accent-ink); opacity:0.85; }

/* ---------- tipografia ---------- */
.display{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:600;
  line-height:1.0;
  letter-spacing:-0.02em;
  margin:0;
}
.display em{ font-style:normal; font-weight:inherit; color:var(--accent); }
.section--accent .display em{ color:var(--accent-ink); opacity:1; }

h1.hero-title{ font-size:clamp(44px, 8vw, 124px); font-weight:700; line-height:0.98; }
h2.sec-title{ font-size:clamp(32px, 5vw, 72px); font-weight:600; }
.lede{
  font-size:clamp(19px,2vw,24px);
  line-height:1.5;
  max-width:42ch;
  color:var(--muted-dark);
}
.section--paper .lede{ color:var(--muted-paper); }
.muted{ color:var(--muted-dark); }
.section--paper .muted{ color:var(--muted-paper); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono);
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:16px 26px;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .3s, color .3s, border-color .3s;
}
.btn .arrow{ transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arrow{ transform:translateX(6px); }
.btn--accent{ background:var(--accent); color:var(--accent-ink); }
.btn--accent:hover{ transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--fg-dark); border-color:var(--line-dark); }
.btn--ghost:hover{ border-color:var(--fg-dark); }
.section--paper .btn--ghost{ color:var(--fg-paper); border-color:var(--line-paper); }
.section--paper .btn--ghost:hover{ border-color:var(--fg-paper); }
.section--accent .btn--ghost{ color:var(--accent-ink); border-color:rgba(12,38,64,.35); }
.section--accent .btn--ghost:hover{ border-color:var(--accent-ink); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:22px var(--pad);
  transition:background .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(6,34,63,0.85);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-dark);
  padding-top:16px; padding-bottom:16px;
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .mark{
  font-family:var(--font-display);
  font-weight:700; font-size:25px; letter-spacing:-0.01em;
  line-height:1;
}
.brand .sub{
  font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--muted-dark);
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-family:var(--font-mono);
  font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted-dark);
  position:relative; padding:4px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--accent); transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover{ color:var(--fg-dark); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-family:var(--font-mono);
  font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--line-dark); padding:11px 20px; border-radius:999px;
  color:var(--fg-dark); transition:background .3s,color .3s,border-color .3s;
}
.nav-cta:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.nav-burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:140px; padding-bottom:clamp(40px,6vw,72px);
  overflow:hidden;
  background-image:
    radial-gradient(120% 95% at 88% 118%, rgba(166,223,5,0.16), transparent 52%),
    radial-gradient(95% 80% at 6% -12%, rgba(31,104,170,0.40), transparent 60%);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(90deg, var(--grid-dark) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 22%, #000 88%, transparent);
  pointer-events:none;
}
.hero-coord{
  position:absolute; top:118px; right:var(--pad); z-index:1;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em;
  color:var(--muted-dark); text-align:right; line-height:1.9;
}
.hero-inner{ position:relative; z-index:2; }
.hero-title{ max-width:16ch; margin:0 0 clamp(28px,4vw,46px); }
.hero-foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(28px,5vw,64px);
  margin-top:clamp(30px,4vw,48px);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-meta{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.08em;
  color:var(--muted-dark); text-transform:uppercase; line-height:1.8;
  text-align:right;
}
.scroll-cue{
  position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:2;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted-dark); display:flex; align-items:center; gap:10px;
  pointer-events:none; transition:opacity .4s ease;
}
.scroll-cue.hide{ opacity:0; }
.scroll-cue .bar{ display:inline-block; width:46px; height:1px; background:var(--accent);
  transform-origin:left; animation:cue 2.6s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:scaleX(.3); opacity:.5 } 50%{ transform:scaleX(1); opacity:1 } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto .display{
  font-size:clamp(28px,4.4vw,62px);
  font-weight:600; line-height:1.1; letter-spacing:-0.02em;
  max-width:20ch;
}
.manifesto .display .soft{ color:var(--muted-dark); }

/* ============================================================
   SERVIÇOS / O QUE FAZEMOS
   ============================================================ */
.grid-head{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px);
  align-items:end; margin-bottom:clamp(48px,6vw,84px);
}
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1px,0.1vw,1px); }
.pillar{
  padding:clamp(30px,3.4vw,52px) clamp(28px,3vw,46px);
  border-top:1px solid var(--line-paper);
  position:relative;
}
.pillar:nth-child(odd){ border-right:1px solid var(--line-paper); }
.pillar .pno{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--accent-dark); }
.pillar h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px,2.6vw,40px); line-height:1.06; letter-spacing:-0.02em;
  margin:18px 0 16px;
}
.pillar p{ margin:0; color:var(--muted-paper); font-size:17px; line-height:1.62; max-width:34ch; }

/* ============================================================
   BANNER DE IMAGEM
   ============================================================ */
.imgband{ position:relative; padding:0; }
.imgband image-slot{ width:100%; height:clamp(360px,56vw,640px); }
.imgband .cap{
  position:absolute; left:var(--pad); bottom:clamp(28px,4vw,52px); right:var(--pad); z-index:3;
  font-family:var(--font-display); font-style:normal; font-weight:600;
  font-size:clamp(22px,3vw,42px); line-height:1.12; letter-spacing:-0.02em; color:#fff;
  max-width:24ch; text-shadow:0 2px 30px rgba(0,0,0,.5);
  pointer-events:none;
}
.imgband .tag{
  position:absolute; top:clamp(20px,3vw,32px); left:var(--pad); z-index:3;
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,.9); pointer-events:none;
  background:rgba(6,34,63,.42); padding:7px 13px; border-radius:999px; backdrop-filter:blur(4px);
}

/* ============================================================
   EXPERTISE — lista numerada editorial
   ============================================================ */
.exp-head{ margin-bottom:clamp(40px,5vw,72px); max-width:30ch; }
.exp-list{ border-top:1px solid var(--line-dark); }
.exp-row{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,90px);
  align-items:start;
  padding:clamp(28px,3.6vw,52px) 0;
  border-bottom:1px solid var(--line-dark);
  transition:padding-left .45s cubic-bezier(.2,.7,.3,1);
}
.exp-row:hover{ padding-left:clamp(8px,1.4vw,24px); }
.exp-row .idx{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px,3.4vw,52px); line-height:1; color:var(--muted-dark);
  transition:color .4s;
}
.exp-row:hover .idx{ color:var(--accent); }
.exp-body{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(16px,3vw,56px); align-items:baseline; }
.exp-row h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(23px,2.4vw,36px); line-height:1.08; letter-spacing:-0.02em; margin:0;
}
.exp-row p{ margin:0; color:var(--muted-dark); font-size:16.5px; line-height:1.6; max-width:42ch; }

/* ============================================================
   PARA QUEM
   ============================================================ */
.audience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1px,0.1vw,1px); margin-top:clamp(46px,5vw,76px); }
.aud{
  padding:clamp(34px,3.6vw,60px) clamp(28px,3vw,52px);
  border-top:1px solid var(--line-paper);
}
.aud:first-child{ border-right:1px solid var(--line-paper); }
.aud .kicker{ font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent-dark); }
.aud h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(28px,3vw,46px); line-height:1.04; letter-spacing:-0.02em; margin:16px 0 18px;
}
.aud p{ margin:0 0 22px; color:var(--muted-paper); font-size:17px; line-height:1.62; max-width:38ch; }
.aud ul{ list-style:none; margin:0; padding:0; }
.aud li{
  display:flex; gap:14px; padding:12px 0; border-top:1px solid var(--line-paper);
  font-size:15.5px; color:var(--fg-paper);
}
.aud li::before{ content:"→"; color:var(--accent-dark); font-weight:700; }

/* ============================================================
   SOBRE
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px,6vw,96px); align-items:center; }
.about-copy .display{ font-size:clamp(30px,4vw,58px); max-width:16ch; margin-bottom:30px; }
.about-copy p{ color:var(--muted-dark); font-size:18px; line-height:1.66; max-width:46ch; margin:0 0 20px; }
.about-portrait{ position:relative; }
.about-portrait image-slot{ width:100%; height:clamp(380px,42vw,560px); }
.about-portrait .pt-tag{
  position:absolute; bottom:18px; left:18px; z-index:3;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:#fff; background:rgba(12,12,14,.45); padding:7px 12px; backdrop-filter:blur(4px); pointer-events:none;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta{ position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 120% at 92% 8%, rgba(166,223,5,0.14), transparent 55%);
}
.cta .wrap{ position:relative; z-index:1; }
.cta .display{ font-size:clamp(34px,5.6vw,86px); max-width:15ch; margin-bottom:clamp(36px,4vw,56px); }
.cta-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:36px; }
.cta-contacts{ display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,60px); }
.cta-contacts .ci .lbl{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:8px; }
.cta-contacts .ci a, .cta-contacts .ci span{ font-family:var(--font-display); font-size:clamp(19px,1.8vw,26px); font-weight:600; letter-spacing:-0.01em; }
.cta-contacts .ci a{ border-bottom:1px solid var(--line-dark); padding-bottom:2px; transition:border-color .3s; }
.cta-contacts .ci a:hover{ border-color:var(--accent); }
.cta-contacts .ci--wa .wa-link{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:none; padding:0; border-radius:50%; background:var(--accent); transition:transform .3s, filter .3s; }
.cta-contacts .ci--wa .wa-link:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.cta-contacts .ci--wa .wa-link svg{ width:26px; height:26px; fill:#fff; display:block; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; overflow:hidden; padding-top:clamp(56px,7vw,96px); padding-bottom:48px; border-top:1px solid var(--line-dark); }
.footer-atlas{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.footer-atlas .fa-img{
  position:absolute; inset:0;
  background:url('assets/atlas-statue.jpg') no-repeat center 4%;
  background-size:auto 132%;
  filter:grayscale(1) brightness(1.32) contrast(0.96);
  opacity:0.22;
}
.footer-atlas .fa-veil{
  position:absolute; inset:0;
  background:radial-gradient(58% 86% at 50% 44%, rgba(6,34,63,0) 0%, rgba(6,34,63,0) 26%, var(--ink) 82%);
}
.footer .wrap{ position:relative; z-index:1; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; align-items:flex-start; }
.footer .wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(56px,13vw,176px); line-height:0.82; letter-spacing:-0.04em;
}
.footer .wordmark .dot{ color:var(--accent); }
.footer-cols{ display:flex; flex-wrap:wrap; gap:clamp(36px,5vw,72px); }
.footer-col .lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-dark); margin-bottom:14px; }
.footer-col a, .footer-col span{ display:block; white-space:nowrap; font-size:15px; color:var(--fg-dark); line-height:1.9; }
.footer-col a:hover{ color:var(--accent); }
.footer-col .wa-link--footer{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--accent); margin:6px 0; transition:transform .3s, filter .3s; }
.footer-col .wa-link--footer:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.footer-col .wa-link--footer svg{ width:22px; height:22px; fill:#fff; display:block; }
.footer-bottom{
  margin-top:clamp(48px,6vw,80px); padding-top:24px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:0.04em; color:var(--muted-dark);
}

/* ============================================================
   REVELAÇÕES AO ROLAR
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue .bar{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .grid-head{ grid-template-columns:1fr; gap:18px; }
  .pillars{ grid-template-columns:1fr; }
  .pillar:nth-child(odd){ border-right:none; }
  .exp-body{ grid-template-columns:1fr; gap:12px; }
  .audience-grid{ grid-template-columns:1fr; }
  .aud:first-child{ border-right:none; }
  .about-grid{ grid-template-columns:1fr; }
  .about-portrait{ order:-1; }
  .hero-coord{ display:none; }
}
@media (max-width:560px){
  body{ font-size:16.5px; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .hero-meta{ text-align:left; }
  .scroll-cue{ display:none; }
  .exp-row{ grid-template-columns:1fr; gap:14px; }
  .footer-top{ flex-direction:column; }
}