/* ============================================================
   Ongrowing — site.css
   Mobile-first. Tokens + chrome (nav, topbar, drawer, footer, WA).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand palette */
  --og-petroleo-profundo: #012E40;
  --og-petroleo-medio:    #044159;
  --og-acinzentado:       #7698A6;
  --og-verde-agua:        #79D9C7;
  --og-verde-claro:       #D8F2EB;

  --og-deep-900: #021821;
  --og-deep-800: #012E40;
  --og-deep-700: #033549;
  --og-deep-600: #044159;
  --og-deep-500: #0a587a;
  --og-deep-400: #2a7193;

  --og-mist-700: #4F7080;
  --og-mist-600: #607F8E;
  --og-mist-500: #7698A6;
  --og-mist-400: #95B1BC;
  --og-mist-300: #B6C9D1;
  --og-mist-200: #D6E0E5;
  --og-mist-100: #ECF1F4;

  --og-mint-700: #3DAD96;
  --og-mint-600: #5BC4AE;
  --og-mint-500: #79D9C7;
  --og-mint-400: #98E3D6;
  --og-mint-300: #B6ECE2;
  --og-mint-200: #D8F2EB;
  --og-mint-100: #ECF9F5;

  --og-paper: #FAFCFC;
  --og-white: #FFFFFF;
  --og-ink:   #021821;

  /* Semantic */
  --bg:           var(--og-paper);
  --bg-elevated:  var(--og-white);
  --bg-sunken:    var(--og-mist-100);
  --bg-brand:     var(--og-deep-800);
  --bg-brand-2:   var(--og-deep-600);
  --bg-accent:    var(--og-mint-200);

  --fg:           var(--og-deep-800);
  --fg-muted:     var(--og-mist-700);
  --fg-subtle:    var(--og-mist-500);
  --fg-on-brand:  var(--og-white);
  --fg-on-accent: var(--og-deep-800);

  --accent:        var(--og-mint-500);
  --accent-strong: var(--og-mint-700);
  --accent-soft:   var(--og-mint-200);

  --border:        var(--og-mist-200);
  --border-strong: var(--og-mist-400);
  --border-on-brand: rgba(255,255,255,0.10);

  --success: #3DAD96;
  --warning: #D9A24A;
  --danger:  #C95757;

  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-text:    'Raleway', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 12px;   --fs-sm: 14px;  --fs-base: 16px;
  --fs-md: 18px;   --fs-lg: 20px;  --fs-xl: 24px;
  --fs-2xl: 30px;  --fs-3xl: 38px; --fs-4xl: 48px;
  --fs-5xl: 64px;  --fs-6xl: 84px;

  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -0.02em; --ls-display: -0.015em; --ls-wide: 0.04em; --ls-eyebrow: 0.18em;

  --sp-1: 4px; --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(1,46,64,.06);
  --shadow-sm: 0 2px 6px rgba(1,46,64,.06), 0 1px 2px rgba(1,46,64,.04);
  --shadow-md: 0 6px 18px rgba(1,46,64,.08), 0 2px 4px rgba(1,46,64,.04);
  --shadow-lg: 0 16px 40px rgba(1,46,64,.10), 0 4px 8px rgba(1,46,64,.05);
  --shadow-xl: 0 28px 64px rgba(1,46,64,.14), 0 8px 16px rgba(1,46,64,.06);
  --shadow-glow: 0 0 0 6px rgba(121,217,199,.18);

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-slower: 640ms;

  --nav-w: 240px;
  --gutter: var(--sp-6);  /* page side padding — scales with viewport */
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
::selection { background: var(--og-mint-200); color: var(--og-deep-800); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--r-sm);
}

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

/* ============================================================
   ICONS
   ============================================================ */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ============================================================
   TOPBAR (sempre visível — padrão em todas as páginas)
   ============================================================ */
.topbar {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 95;
  height: 64px;
  padding: 0 var(--gutter);
  background: var(--og-deep-800);
  border-bottom: 1px solid rgba(121,217,199,.08);
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.topbar-brand { display: flex; align-items: center; text-decoration: none; gap: var(--sp-3); }
.topbar-brand img { height: 22px; width: auto; display: block; }
@media (min-width: 768px) { .topbar-brand img { height: 24px; } }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* PT/EN switcher in topbar */
.lang-switch {
  display: inline-flex;
  background: rgba(255,255,255,.04);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  height: 36px;
}
.lang-switch a {
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lang-switch a:hover { color: rgba(255,255,255,.9); }
.lang-switch a.active {
  color: var(--accent);
  background: rgba(121,217,199,.1);
}
.topbar-hamburger {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar-hamburger:hover {
  background: rgba(121,217,199,.1);
  border-color: rgba(121,217,199,.25);
  color: #fff;
}
.topbar-hamburger:active { transform: translateY(1px); }
.topbar-hamburger .icon { font-size: 20px; }

/* ============================================================
   NAV — drawer slide-in from RIGHT (sempre)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; right: 0; left: auto;
  width: 86vw;
  max-width: 360px;
  height: 100vh;
  background: var(--og-deep-800);
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) 0 var(--sp-6);
  z-index: 99;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: -12px 0 40px rgba(1,46,64,.25);
}
.nav.open { transform: translateX(0); }
.nav-close {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  z-index: 2;
}
.nav-close:hover { color: #fff; background: rgba(121,217,199,.1); border-color: rgba(121,217,199,.25); }
.nav-close .icon { font-size: 16px; }

/* Backdrop */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 24, 33, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav-overlay.show { opacity: 1; pointer-events: auto; }

.nav-logo {
  padding: var(--sp-6) calc(var(--sp-6) + 48px) var(--sp-6) var(--sp-6);
  border-bottom: 1px solid rgba(121,217,199,.12);
  margin-bottom: var(--sp-4);
}
.nav-logo a { text-decoration: none; display: block; }
.nav-logo img { height: 26px; width: auto; display: block; }

.nav-section-label {
  font-family: var(--font-display);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,.22);
  font-weight: 700;
  padding: 0 var(--sp-6);
  margin: var(--sp-2) 0 var(--sp-2);
}
.nav ul { list-style: none; padding: 0 12px; }
.nav li { margin-bottom: 1px; }
.nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  letter-spacing: .3px;
  text-transform: uppercase;
  line-height: 1.4;
}
.nav a .num {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  min-width: 16px;
  opacity: .55;
  letter-spacing: 1px;
}
.nav a .icon { font-size: 14px; color: var(--accent); opacity: .55; }
.nav a:hover { background: rgba(121,217,199,.08); color: #fff; }
.nav a:hover .num, .nav a:hover .icon { opacity: 1; }
.nav a.active { background: rgba(121,217,199,.1); color: #fff; }
.nav a.active .num, .nav a.active .icon { opacity: 1; }
.nav-divider { height: 1px; background: rgba(121,217,199,.08); margin: var(--sp-3) var(--sp-4); }
.nav-footer {
  padding: var(--sp-5) var(--sp-6) 0;
  border-top: 1px solid rgba(121,217,199,.08);
  font-family: var(--font-text);
  font-size: 10px;
  color: rgba(255,255,255,.28);
  letter-spacing: .5px;
  line-height: 1.8;
  margin-top: auto;
}
/* (legacy .nav-lang — PT/EN agora vive no topbar; mantido como fallback) */
.nav-lang { display: none; }

/* ============================================================
   MAIN content — no offset (drawer pattern em todas as páginas)
   ============================================================ */
.main { margin-left: 0; min-height: 100vh; }

/* Section padding scales with viewport */
@media (min-width: 768px) { :root { --gutter: var(--sp-10); } }
@media (min-width: 1024px) { :root { --gutter: var(--sp-16); } }
@media (min-width: 1280px) { :root { --gutter: var(--sp-20); } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--og-deep-900);
  padding: var(--sp-10) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6);
  border-top: 1px solid rgba(121,217,199,.06);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-3); }
.footer-brand img { height: 22px; width: auto; display: block; }
.footer-brand .tagline {
  font-family: var(--font-display);
  font-size: 10px;
  color: rgba(255,255,255,.32);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-left: var(--sp-4);
  border-left: 1px solid rgba(255,255,255,.1);
}
.footer-legal {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.footer-legal a {
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(255,255,255,.32);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
  letter-spacing: .2px;
}
.footer-legal a:hover { color: rgba(255,255,255,.75); }
.footer-copy {
  flex-basis: 100%;
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(255,255,255,.32);
  letter-spacing: .8px;
  text-align: center;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: var(--sp-2);
}

/* ============================================================
   WhatsApp floating button
   ============================================================ */
.wa-btn {
  position: fixed;
  bottom: var(--sp-5); right: var(--sp-5);
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.3), 0 1px 4px rgba(1,46,64,.1);
  cursor: pointer;
  z-index: 90;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  opacity: 0;
  animation: waIn .5s var(--ease-out) 2.5s forwards;
}
@media (min-width: 768px) {
  .wa-btn { bottom: var(--sp-8); right: var(--sp-8); width: 56px; height: 56px; }
}
@keyframes waIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.wa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37,211,102,.4), 0 2px 6px rgba(1,46,64,.12);
}
.wa-btn:active { transform: translateY(1px); box-shadow: 0 4px 16px rgba(37,211,102,.3); }
.wa-btn svg { width: 24px; height: 24px; fill: #fff; }

/* ============================================================
   BUTTONS (shared)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-mint {
  background: var(--accent);
  color: var(--og-deep-800);
}
.btn-mint:hover { filter: brightness(1.06); }
.btn-mint:active { transform: translateY(1px); filter: brightness(0.98); }
.btn-petroleum {
  background: var(--og-deep-800);
  color: #fff;
}
.btn-petroleum:hover { background: var(--og-deep-700); }
.btn-petroleum:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--og-deep-800); background: var(--bg-elevated); }

/* ============================================================
   Section header pattern — always stacked (mirrors hero)
   ============================================================ */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  margin-bottom: var(--sp-10);
}
@media (min-width: 768px) { .section-header { gap: var(--sp-6); margin-bottom: var(--sp-12); } }
@media (min-width: 1024px) { .section-header { margin-bottom: var(--sp-16); } }
.section-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: 0;
}
.section-num::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent-strong);
  opacity: .7;
}
.section-title-group h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: var(--ls-display);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.section-title-group h2 em { font-style: italic; color: var(--accent-strong); font-weight: 700; }
.section-title-group .lead {
  font-family: var(--font-text);
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--fg-muted);
  font-weight: 400;
  max-width: 620px;
  line-height: 1.7;
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
  opacity: .7;
}

/* Shared icon sprite (always present) */
.icon-sprite { display: none; }

/* ============================================================
   LEGAL PAGE pattern (privacidade, termos, cookies, direitos)
   ============================================================ */
.legal-header {
  background: var(--og-deep-800);
  padding: var(--sp-12) var(--gutter) var(--sp-10);
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .legal-header { padding: var(--sp-16) var(--gutter) var(--sp-12); } }
@media (min-width: 1024px) { .legal-header { padding: var(--sp-20) var(--gutter) var(--sp-12); } }
.legal-header::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(121,217,199,.07) 0%, transparent 65%);
  pointer-events: none;
}
.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  margin-bottom: var(--sp-6);
}
.legal-breadcrumb a { color: rgba(255,255,255,.35); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.legal-breadcrumb a:hover { color: rgba(255,255,255,.7); }
.legal-breadcrumb .sep { opacity: .4; }
.legal-breadcrumb .current { color: var(--accent); opacity: .85; }
.legal-header h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1.08;
  margin-bottom: var(--sp-4);
  text-wrap: balance;
  max-width: 760px;
}
.legal-updated {
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-weight: 600;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.legal-updated::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: .7;
}

.legal-article {
  padding: var(--sp-10) var(--gutter) var(--sp-16);
  max-width: 820px;
  margin: 0 auto;
}
@media (min-width: 768px) { .legal-article { padding: var(--sp-12) var(--gutter) var(--sp-20); } }
.legal-article .prose {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.78;
  color: var(--fg);
}
@media (min-width: 768px) { .legal-article .prose { font-size: 17px; line-height: 1.82; } }
.legal-article .prose p {
  margin: 0 0 var(--sp-5);
  color: var(--fg);
  text-wrap: pretty;
}
.legal-article .prose .lead-graf {
  font-size: 18px;
  color: var(--fg-muted);
  font-weight: 400;
  margin-bottom: var(--sp-8);
}
@media (min-width: 768px) { .legal-article .prose .lead-graf { font-size: 19px; } }
.legal-article .prose h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: var(--sp-10) 0 var(--sp-4);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.legal-article .prose h2 .num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 2px;
  flex-shrink: 0;
}
.legal-article .prose h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.1px;
  margin: var(--sp-6) 0 var(--sp-3);
}
.legal-article .prose strong { color: var(--fg); font-weight: 700; }
.legal-article .prose ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.legal-article .prose ul li {
  padding-left: var(--sp-5);
  position: relative;
  line-height: 1.65;
}
.legal-article .prose ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-strong);
  font-weight: 700;
}
.legal-article .prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: rgba(121,217,199,.5);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.legal-article .prose a:hover { text-decoration-color: var(--accent-strong); }
.legal-article .prose .legal-contact {
  margin: var(--sp-10) 0 0;
  padding: var(--sp-6) var(--sp-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.legal-article .prose .legal-contact h3 { margin-top: 0; }
.legal-article .prose .legal-contact p:last-child { margin-bottom: 0; }