/* Estilos da Home. Fonte: home/styles.css */
/* ========== ARCA — Site ========== */
:root {
  --blue: #188BC9;
  --blue-deep: #1568A0;
  --blue-dark: #0F4C7A;
  --ink: #323332;
  --ink-soft: #5D5D5D;
  --ink-faint: #6B6B6B;
  --bg: #F9F9F9;
  --bg-soft: #EFEFEF;
  --line: #D9D9D9;
  --white: #FFFFFF;
  --black: #151515;

  --font: 'Montserrat', system-ui, sans-serif;
  --letter-tight: -0.04em;
  --letter-display: -0.06em;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.18);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }

/* ========== HEADER GLASS ========== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 64px;
  display: flex; align-items: center; justify-content: space-between;
  transition: padding 360ms var(--ease-soft), background 360ms var(--ease-soft), backdrop-filter 360ms var(--ease-soft), box-shadow 360ms var(--ease-soft);
}
.header.scrolled {
  padding: 12px 64px;
  background: rgba(15, 38, 60, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header .logo { height: 74px; transition: height 360ms var(--ease-soft); }
.header.scrolled .logo { height: 56px; }
.header .main-nav {
  display: flex; align-items: center; gap: 36px;
  font-size: 15px; letter-spacing: var(--letter-tight);
}
.header .main-nav > a,
.header .nav-trigger {
  position: relative;
  color: rgba(255,255,255,0.74);
  transition: color 200ms var(--ease-soft);
  padding: 4px 0;
}
/* coluna: ghost (negrito, altura 0) reserva a largura → bold no hover sem deslocar o menu */
.header .main-nav > a,
.header .nav-label { display: flex; flex-direction: column; align-items: center; }
.header .main-nav > a::before,
.header .nav-label::before {
  content: attr(data-text);
  font-weight: 700; height: 0; overflow: hidden; visibility: hidden;
  pointer-events: none;
}
.header .main-nav > a:hover,
.header .nav-group:hover .nav-trigger,
.header .nav-group.open .nav-trigger { color: #fff; font-weight: 700; }
.header .main-nav > a::after,
.header .nav-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px;
  /* gradiente da marca: azul-escuro → azul → verde Arca */
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 52%, #23A849 100%);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease-out);
}
.header .main-nav > a:hover::after,
.header .nav-group:hover .nav-trigger::after,
.header .nav-group.open .nav-trigger::after { transform: scaleX(1); }

/* ===== Item do menu com submenu (Soluções, Conteúdo) =====
   Abre ao passar o mouse ou ao clicar. O painel segue o desenho do menu de
   idiomas (vidro escuro), nas duas variantes do cabeçalho. */
.nav-group { position: relative; display: flex; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; letter-spacing: inherit; cursor: pointer;
}
.nav-trigger svg { flex: none; transition: transform 220ms var(--ease-soft); }
.nav-group.open .nav-trigger svg { transform: rotate(180deg); }
/* a área transparente acima do painel (padding) mantém o submenu aberto
   enquanto o mouse desce do item até ele */
.nav-sub {
  position: absolute; top: 100%; left: 50%; z-index: 5;
  padding-top: 16px; transform: translateX(-50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--ease-soft), visibility 0s linear 200ms;
}
.nav-sub-panel {
  min-width: 228px;
  display: flex; flex-direction: column; padding: 6px;
  background: rgba(15, 38, 60, 0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.3);
  transform: translateY(-6px);
  transition: transform 240ms var(--ease-out);
}
.nav-sub-panel a {
  padding: 11px 14px; border-radius: 10px;
  color: rgba(255,255,255,0.86);
  font-size: 14px; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap;
  transition: background 160ms, color 160ms;
}
.nav-sub-panel a:hover,
.nav-sub-panel a:focus-visible { background: rgba(255,255,255,0.12); color: #fff; outline: none; }
.nav-group.open .nav-sub {
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
.nav-group.open .nav-sub-panel { transform: none; }
@media (hover: hover) {
  .nav-group:hover .nav-trigger svg { transform: rotate(180deg); }
  .nav-group:hover .nav-sub { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-group:hover .nav-sub-panel { transform: none; }
}

.header-right { display: flex; align-items: center; gap: 18px; }
.lang-pill {
  position: relative;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff; font-size: 12px; letter-spacing: 0.12em;
  padding: 8px 14px 8px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 200ms var(--ease-soft), border-color 200ms;
}
.lang-pill:hover { background: rgba(255,255,255,0.22); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(15, 38, 60, 0.85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; overflow: hidden; min-width: 130px;
  display: flex; flex-direction: column; padding: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
  transition: opacity 200ms var(--ease-soft), transform 200ms var(--ease-soft);
}
.lang-pill.open .lang-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lang-menu button {
  padding: 10px 14px; text-align: left; color: #fff;
  font-size: 13px; letter-spacing: 0.04em; border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  transition: background 160ms;
}
.lang-menu button:hover { background: rgba(255,255,255,0.1); }
.lang-menu button.active { background: var(--blue); color: #fff; }
.lang-menu .flag { width: 18px; font-size: 16px; line-height: 1; }

.login-btn {
  background: rgba(255,255,255,0.92);
  color: var(--ink); padding: 8px 22px; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.02em; font-weight: 500;
  transition: background 200ms, transform 200ms;
}
.login-btn:hover { background: #fff; transform: translateY(-1px); }

/* ===== Hamburger + mobile slide-in menu (hidden on desktop) ===== */
.hamburger {
  display: none;
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 4px; line-height: 0;
}
.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100vh; height: 100dvh; z-index: 2000;
  background: var(--esg-blue);
  display: flex; flex-direction: column;
  padding: 88px 34px 44px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 380ms var(--ease-out);
  visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu-close {
  position: absolute; top: 22px; right: 22px;
  background: none; border: none; color: #fff; cursor: pointer; padding: 6px; line-height: 0;
}
.mobile-nav { display: flex; flex-direction: column; margin-top: 24px; }
.mobile-nav a {
  color: #fff; font-family: var(--font); font-weight: 400;
  font-size: 22px; letter-spacing: var(--letter-tight);
  padding: 16px 2px; border-bottom: 1px solid rgba(255,255,255,0.18);
}
.mobile-nav > a:last-of-type { border-bottom: none; }
/* grupo com subitens (Soluções, Conteúdo): abre e fecha ao toque */
.mobile-group { border-bottom: 1px solid rgba(255,255,255,0.18); }
.mobile-group-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #fff; font-family: var(--font); font-weight: 400;
  font-size: 22px; letter-spacing: var(--letter-tight); text-align: left;
  padding: 16px 2px;
}
.mobile-group-trigger svg { width: 16px; height: 16px; flex: none; transition: transform 260ms var(--ease-soft); }
.mobile-group.open .mobile-group-trigger svg { transform: rotate(180deg); }
.mobile-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.mobile-group.open .mobile-sub { grid-template-rows: 1fr; }
.mobile-sub > div { overflow: hidden; display: flex; flex-direction: column; }
.mobile-nav .mobile-sub a {
  font-size: 17px; padding: 9px 2px 9px 18px; border-bottom: none;
  color: rgba(255,255,255,0.9);
}
.mobile-nav .mobile-sub a:last-child { padding-bottom: 20px; }
.mobile-login {
  margin-top: 34px; align-self: flex-start;
  background: #fff; color: var(--esg-blue) !important;
  padding: 15px 48px !important; border-radius: 999px;
  border-bottom: none !important; font-weight: 600 !important;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.4);
}

/* ========== HERO ========== */
.hero {
  position: relative;
  /* taller than the viewport like the Figma, but not too much. Content sits in
     the upper area (align-start + top padding clearing the header) so the extra
     breathing room falls BELOW the text — matching the reference */
  /* encurtado p/ caber em laptop 12"; +30px de altura (linha desce mais um pouco) */
  min-height: calc(clamp(560px, 78vh, 720px) + 30px);
  display: flex; align-items: center; justify-content: flex-start;
  /* texto começa em 16% da largura */
  padding: clamp(80px, 7.5vw, 112px) max(64px, calc((100% - 1220px) / 2)) 56px 16%;
  color: #fff; overflow: hidden;
  background: var(--bg); /* fallback claro: evita emenda escura no encontro com a seção de logos */
}
/* container do parallax: overscan (12% acima/abaixo) p/ a mídia poder transladar sem revelar borda */
.hero-parallax {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  overflow: hidden; z-index: 0;
  will-change: transform;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url("../img/hero-poster.jpg?v=5c5521a4") center/cover no-repeat;
  /* sem filtro: o vídeo/poster já vêm com o filtro embutido */
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* sem filtro: o vídeo já tem o filtro embutido */
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: none; /* desktop: SEM gradiente — o vídeo já vem com filtro próprio */
  background:
    linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 80%, rgba(0,0,0,0.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0.14) 70%, rgba(0,0,0,0.42) 100%);
}
/* bottom wave — curve from figma, photo ends in a wave going down */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -2px;
  width: 100%; height: 160px;
  z-index: 3;
  pointer-events: none;
}
.hero-wave svg { width: 100%; height: 100%; display: block; }
.hero-wave svg.hero-wave-mobile { display: none; } /* desktop usa o wave original; mobile usa o suave */
.hero-content {
  position: relative; z-index: 2; max-width: 860px;
  margin: 0; text-align: left;
}
.hero h1 {
  font-family: var(--font); font-weight: 300;
  /* Figma: 99px */
  /* título do hero = 70px (cap) */
  font-size: clamp(44px, 6.5vw, 70px);
  line-height: 0.94; letter-spacing: -0.07em;
  margin-bottom: 28px;
  color: #fff;
}
.hero h1 span { display: block; }
.hero h1 .hero-esg { display: inline; } /* desktop: "Jornada ESG" na mesma linha */
.hero p.lede.lede-mobile { display: none; } /* desktop usa a lede normal; mobile usa a de quebras próprias */
.hero p.lede {
  /* parágrafo do hero = 20px (cap), entrelinha 1.5 */
  max-width: 560px; margin: 0; font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5; letter-spacing: -0.07em;
  color: rgba(255,255,255,0.94); font-weight: 300;
  white-space: pre-line; /* respeita as quebras manuais (\n) do i18n no desktop */
}
.scroll-cue {
  position: absolute; bottom: 88px; left: 50%;
  color: rgba(255,255,255,0.78); font-size: 11px;
  letter-spacing: 0.32em; writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex; align-items: center; gap: 14px;
  z-index: 4;
  animation: scrollPulse 2.4s var(--ease-soft) infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.78; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}
.scroll-cue::after { content: ""; width: 1px; height: 44px; background: rgba(255,255,255,0.78); }

/* ========== PARTNERS ========== */
.partners {
  padding: 50px max(64px, calc((100% - 1220px) / 2));
  text-align: center;
  background: var(--bg);
  position: relative;
}
.partners h2 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 400; letter-spacing: var(--letter-display);
  line-height: 1.15; color: var(--ink); margin-bottom: 35px;
  white-space: pre-line; /* respeita a quebra manual "Desde 2013 fortalecendo / estratégias ESG" */
  max-width: 720px; margin-inline: auto;
}
.marquee {
  display: flex; flex-direction: column; gap: 28px;
  overflow: hidden; /* clip the wide rows so they don't create page-wide horizontal scroll */
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-row {
  display: flex; gap: 24px; width: max-content;
}
.marquee-row.left { animation: marqueeLeft 90s linear infinite; }
.marquee-row.right { animation: marqueeRight 104s linear infinite; }
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.partner-tile {
  /* caixa fixa de 144×36 (40% menor que 240×60) */
  width: 144px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1); opacity: 0.7;
  transition: filter 240ms, opacity 240ms, transform 240ms;
  flex-shrink: 0;
}
.partner-tile img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.partner-tile:hover { filter: none; opacity: 1; transform: scale(1.06); }
/* logos um pouco grandes — reduzir ~18% p/ uniformizar */
.p-dasa img, .p-gol img, .p-rumo img, .p-vedacit img, .p-riachuelo img,
.p-cmoc img, .p-cba img, .p-caoa-2 img, .p-teltelecom img, .p-sanofi img {
  transform: scale(0.82);
}

/* ========== CORES DA FAIXA AZUL (usadas também no menu do celular) ========== */
:root {
  --esg-blue: #188BC9;
  --esg-blue-deep: #1670A6;
}

/* sobretítulo com a linha em degradê da marca (o mesmo das páginas internas) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: ""; width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 52%, #23A849 100%);
}
.eyebrow-white { color: #fff; }
/* sobre o azul a linha vai do branco ao verde (o azul-escuro sumiria no fundo) */
.eyebrow-white::before { background: linear-gradient(90deg, #fff 0%, #7FE0A0 100%); }

/* ========== ONDE ATUAMOS (faixa azul com curvas + 4 cards) ========== */
.atuamos {
  position: relative; color: var(--esg-blue);
  /* em volta das curvas: em cima a cor da dobra dos logos e embaixo o branco
     de "Como trabalhamos" — a troca fica escondida atrás da faixa azul */
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 50%, var(--white) 50%, var(--white) 100%);
}
.atuamos-wave { display: block; width: 100%; }
.atuamos-wave-top { height: clamp(46px, 10.1vw, 146px); margin-bottom: -1px; }
.atuamos-wave-bottom { height: clamp(32px, 6.7vw, 97px); margin-top: -1px; }
.atuamos-body {
  background: var(--esg-blue); color: #fff;
  padding: 30px max(64px, calc((100% - 1220px) / 2)) 60px;
}
.atuamos-head { max-width: 780px; margin: 0 auto; text-align: center; }
.atuamos-head h2 {
  margin-top: 16px;
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 400; line-height: 1.05;
  letter-spacing: var(--letter-display); color: #fff;
  text-wrap: balance;
}
/* mesma largura da grade de Cases, logo abaixo */
.atuamos-grid {
  max-width: 1100px; margin: 54px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.atuamos-grid > div { display: flex; }
/* cards brancos com texto azul sobre a faixa azul: contraste alto para a leitura */
.atuamos-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 50px -24px rgba(6, 40, 70, 0.45);
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
}
.atuamos-card { isolation: isolate; }
.atuamos-card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -24px rgba(6, 40, 70, 0.6); }
.atuamos-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.atuamos-photo { position: relative; z-index: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.atuamos-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease-out); }
.atuamos-card:hover .atuamos-photo img { transform: scale(1.06); }
/* base da foto em curva (mesma cor do card) */
.atuamos-photo::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -2px; height: 36px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C90 36 210 36 400 0 L400 34 L0 34 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C90 36 210 36 400 0 L400 34 L0 34 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* card do Sistema: o mockup do painel sobre o degradê azul/verde da marca */
.atuamos-photo-mockup {
  background:
    radial-gradient(circle at 82% 12%, rgba(44, 186, 73, 0.75) 0%, rgba(44, 186, 73, 0) 55%),
    linear-gradient(140deg, #0F4C7A 0%, #188BC9 70%);
}
/* o arquivo tem margem transparente em volta do painel: a imagem entra
   ampliada para o painel ocupar bem o card (e um pouco mais no hover, como as fotos) */
.atuamos-photo-mockup img { object-fit: contain; padding: 6px 8px 24px; transform: translateY(3%) scale(1.32); filter: drop-shadow(0 14px 22px rgba(4, 30, 50, 0.35)); }
.atuamos-card:hover .atuamos-photo-mockup img { transform: translateY(3%) scale(1.38); }
/* o texto sobe 2px por cima da foto: durante o zoom do hover, a última linha da
   foto aparecia como um risco fino entre a curva branca e o texto */
.atuamos-text { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; margin-top: -2px; padding: 18px 24px 26px; background: #fff; text-align: left; }
.atuamos-text h3 { font-size: 23px; font-weight: 400; letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 10px; color: var(--blue); }
.atuamos-text p { font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--blue-deep); letter-spacing: -0.02em; }
.atuamos-more {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--blue); letter-spacing: -0.03em;
}
.atuamos-more svg { width: 15px; height: 15px; transition: transform 260ms var(--ease-out); }
.atuamos-card:hover .atuamos-more svg { transform: translateX(4px); }

/* ========== COMO TRABALHAMOS (logotipo do Sistema + painel + 3 etapas) ========== */
.metodo {
  background: var(--white);
  padding: 100px max(64px, calc((100% - 1220px) / 2)) 70px;
}
.metodo-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center;
}
/* a imagem é mais larga que a coluna (112%) no desktop; o logotipo usa a mesma
   largura de referência para ficar centralizado sobre ela, e não sobre a coluna */
.metodo-visual { position: relative; min-width: 0; --metodo-largura: 112%; }
.metodo-logo-box { width: var(--metodo-largura); display: flex; justify-content: center; margin-bottom: 34px; }
/* logotipo acima da imagem; em inglês o lockup "ARCA SYSTEM" é mais largo e
   baixo, por isso ganha 20% (mesma regra do topo da página do Sistema) */
.metodo-logo { width: clamp(220px, 22vw, 310px); height: auto; }
.metodo-logo--en { width: clamp(264px, 26.4vw, 372px); }
.metodo-mockup { position: relative; }
.metodo-blob {
  position: absolute; inset: 6% 8% 4% -4%; z-index: 0;
  border-radius: 46% 54% 58% 42% / 44% 40% 60% 56%;
  background: linear-gradient(217deg, rgba(44,186,73,0.55) 0%, rgba(52,130,179,0.35) 45%, rgba(255,255,255,0) 90%);
  filter: blur(34px);
}
.metodo-mockup img {
  position: relative; z-index: 1; width: var(--metodo-largura); max-width: none; height: auto;
  filter: drop-shadow(0 24px 50px rgba(20, 60, 90, 0.18));
}
.metodo-text { min-width: 0; text-align: left; }
/* duas frases, uma em cada linha (a quebra vem do "\n" no i18n). O tamanho
   acompanha a largura da coluna para a primeira frase caber inteira em uma linha */
.metodo-text h2 {
  margin: 16px 0 36px;
  font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.1;
  letter-spacing: var(--letter-display); color: var(--ink);
  white-space: pre-line;
}
.metodo-steps { list-style: none; display: flex; flex-direction: column; gap: 26px; margin-bottom: 40px; }
.metodo-step { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 20px; }
.metodo-step:not(:last-child)::before {
  content: ""; position: absolute; left: 26px; top: 58px; bottom: -22px; width: 2px;
  background: repeating-linear-gradient(180deg, #CFE3EF 0 6px, transparent 6px 12px);
}
.metodo-step-num {
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: var(--blue);
  background: #fff; box-shadow: inset 0 0 0 1.5px #CFE3EF;
  transition: background 260ms, color 260ms, box-shadow 260ms;
}
.metodo-step:hover .metodo-step-num { background: #23A849; color: #fff; box-shadow: inset 0 0 0 1.5px #23A849; }
.metodo-step h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.04em; margin: 4px 0 6px; color: var(--ink); }
.metodo-step p { font-size: 16px; line-height: 1.5; font-weight: 300; color: var(--ink-soft); letter-spacing: -0.02em; }
.metodo-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 38px; border-radius: 999px;
  font-size: 17px; font-weight: 500; line-height: 1.1; letter-spacing: var(--letter-tight);
  color: var(--blue); box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background 220ms, color 220ms, transform 220ms var(--ease-out), box-shadow 220ms;
}
.metodo-cta:hover { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 1.5px var(--blue); transform: translateY(-2px); }

/* ========== CASES ========== */
.cases {
  padding: 50px max(64px, calc((100% - 1220px) / 2));
  background: var(--white);
  text-align: center;
}
.cases h2 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 400; letter-spacing: var(--letter-display);
  color: var(--ink); margin-bottom: 15px;
}
.cases .sub {
  font-size: 17px; color: var(--ink-soft); letter-spacing: var(--letter-tight);
  margin-bottom: 30px; font-weight: 300;
}
.case-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; max-width: 1100px; margin: 0 auto 40px;
}
.case-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}
.case-card {
  cursor: pointer;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.15);
  transition: transform 320ms var(--ease-out), box-shadow 320ms;
  display: flex; flex-direction: column; /* equal-height cards in a row */
}
.case-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.25); }
/* Cartão igual ao dos cases da página A ARCA: foto 16:10 que dá zoom no hover,
   categoria, título, resumo e "Ler artigo" alinhado na base de todos os cards */
.case-img {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #DDE4E8;
}
.case-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--ease-out);
}
.case-card:hover .case-img img { transform: scale(1.05); }
.case-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4));
}
.case-body {
  padding: 20px 22px 24px; text-align: left; background: var(--bg-soft); flex: 1;
  display: flex; flex-direction: column;
}
.case-label {
  font-size: 12px; font-weight: 700; letter-spacing: var(--letter-tight);
  color: var(--blue); margin-bottom: 8px;
}
.case-more {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--blue); letter-spacing: var(--letter-tight);
}
.case-more svg { width: 14px; height: 14px; transition: transform 260ms var(--ease-out); }
.case-card:hover .case-more svg { transform: translateX(4px); }
.case-date { font-size: 12px; font-weight: 700; letter-spacing: var(--letter-tight); margin-bottom: 8px; }
.case-title { font-size: 14px; line-height: 1.4; color: var(--ink); letter-spacing: var(--letter-tight); }
.blog-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.case-desc {
  margin-top: 10px;
  font-size: 13px; line-height: 1.5; font-weight: 300;
  color: var(--ink-soft); letter-spacing: var(--letter-tight);
}

.carousel-controls {
  display: inline-flex; gap: 12px; margin-top: 16px;
}
.carousel-controls button {
  width: 44px; height: 44px; border-radius: 50%; background: var(--line);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background 200ms, transform 200ms;
}
.carousel-controls button:hover { background: var(--blue); transform: scale(1.06); }

/* ========== NEWSLETTER ========== */
.newsletter {
  position: relative; padding: 0; overflow: hidden;
  /* a imagem tem os cantos transparentes acima e abaixo das curvas: em cima
     continua o cinza da faixa Afiliações; embaixo, o branco da dobra seguinte.
     (No WordPress a imagem do desktop é um JPG com essas mesmas cores:
     site-home-publicar/assets/img/camada-contato.jpg.) */
  background: linear-gradient(to bottom, var(--bg) 50%, var(--white) 50%);
  /* a seção assume a PROPORÇÃO ORIGINAL do arquivo (1400×840) → a imagem
     aparece sem distorção, com todas as curvas. Conteúdo centralizado. */
  aspect-ratio: 1400 / 840;
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.newsletter-bg {
  position: absolute; inset: 0;
  /* preenche a seção (que já está na proporção da imagem) → 1:1, sem esticar */
  background: url("../img/camada-contato.jpg?v=c2df8bff") center / 100% 100% no-repeat;
}
/* organic light waves cutting into the green photo, top & bottom */
.news-wave {
  position: absolute; left: 0; right: 0; width: 100%;
  z-index: 1; pointer-events: none; line-height: 0;
}
.news-wave svg { width: 100%; height: 100%; display: block; }
.news-wave-top    { top: -1px;    height: clamp(110px, 15vw, 210px); }
.news-wave-bottom { bottom: -1px; height: clamp(110px, 15vw, 210px); }

.newsletter-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 80px 80px;
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: 30px; align-items: center; color: #fff;
}
.newsletter h2 {
  font-size: clamp(36px, 4vw, 51px);
  font-weight: 400; letter-spacing: var(--letter-display); line-height: 1.05;
  margin-bottom: 15px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5); /* legibilidade do "Assine" sobre a folha */
}
.newsletter p {
  font-size: 18px; letter-spacing: var(--letter-tight);
  line-height: 1.4; color: rgba(255,255,255,0.88); font-weight: 300;
  white-space: pre-line; /* respeita as quebras manuais (\n) do i18n no desktop */
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.newsletter-form {
  display: flex; flex-direction: column; gap: 14px;
}
.newsletter-form input {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.5); color: #fff;
  padding: 16px 26px; border-radius: 999px;
  font-size: 17px; letter-spacing: var(--letter-tight);
  transition: border-color 220ms, background 220ms;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.7); }
.newsletter-form input:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,0.05); }
.consent {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: rgba(255,255,255,0.88); letter-spacing: var(--letter-tight);
  margin-top: 4px;
}
.consent input { width: 16px; height: 16px; accent-color: var(--blue); }
.newsletter-btn {
  align-self: flex-start;
  background: var(--blue); color: #fff;
  border: none; outline: none; -webkit-appearance: none; appearance: none;
  cursor: pointer;
  padding: 15px 54px; border-radius: 999px; font-size: 18px;
  font-weight: 500; letter-spacing: var(--letter-tight);
  transition: background 220ms, transform 220ms, box-shadow 220ms;
  box-shadow: 0 10px 30px -10px rgba(24,139,201,0.7);
  margin-top: 8px;
}
.newsletter-btn:hover { background: var(--blue-deep); transform: translateY(-2px); }
.newsletter-btn:focus, .newsletter-btn:focus-visible { outline: none; }
.newsletter-btn:disabled { opacity: 0.7; cursor: default; transform: none; }
/* envio do formulário: link da política, aviso de erro e confirmação */
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent a:hover { color: #fff; }
.newsletter-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.newsletter-form .newsletter-error {
  margin: 0; padding: 11px 18px; border-radius: 16px;
  font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: var(--letter-tight);
  color: #fff; background: rgba(176, 38, 38, 0.82);
  white-space: normal; text-shadow: none;
}
.newsletter-done {
  align-items: flex-start; gap: 12px;
  padding: 36px 38px; border-radius: 30px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(6, 24, 14, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; text-align: left;
}
.newsletter-done-icon {
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #23A849; color: #fff;
}
.newsletter-done strong { font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: var(--letter-display); }
.newsletter-done span:last-child { font-size: 16px; line-height: 1.5; font-weight: 300; letter-spacing: var(--letter-tight); color: rgba(255,255,255,0.9); }

/* ========== AFILIAÇÕES (faixa de logotipos entre o Blog e a newsletter) ========== */
.afiliacoes {
  background: var(--bg);
  padding: 54px max(64px, calc((100% - 1220px) / 2));
  display: flex; align-items: center; justify-content: center;
  gap: clamp(40px, 6vw, 88px);
}
.afiliacoes-label {
  font-size: clamp(16px, 1.55vw, 22px); font-weight: 300; line-height: 1.2;
  letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
}
.afiliacoes-logos {
  list-style: none; display: flex; align-items: center;
  gap: clamp(36px, 5vw, 72px);
}
.afiliacoes-logos img { width: auto; }
/* alturas diferentes para os dois logotipos terem o mesmo peso visual */
.afiliacao--cebds { height: 56px; }
.afiliacao--pacto { height: 84px; }

/* ========== SPECIALISTS CTA ========== */
.specialists {
  padding: 50px max(64px, calc((100% - 1220px) / 2)) 0;
  /* branca para continuar a quebra das dobras */
  background: var(--white);
  text-align: center;
}
.specialists h2 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 400; letter-spacing: var(--letter-display);
  color: var(--ink); margin-bottom: 15px;
}
.specialists p {
  max-width: 680px; margin: 0 auto 30px;
  font-size: 18px; line-height: 1.5; color: var(--ink);
  letter-spacing: var(--letter-tight); font-weight: 300;
}
.specialists .cta {
  background: var(--blue); color: #fff;
  /* −20% no tamanho do botão, −2px no texto */
  padding: 16px 45px; border-radius: 999px;
  font-size: 18px; font-weight: 500; letter-spacing: var(--letter-tight);
  display: inline-flex; align-items: center; gap: 11px;
  transition: background 220ms, transform 220ms, box-shadow 220ms;
  box-shadow: 0 12px 32px -10px rgba(24,139,201,0.6);
  /* bridge the button onto the fold between this section and the footer */
  position: relative; z-index: 5;
  margin-bottom: -33px;
}
.specialists .cta:hover { background: var(--blue-deep); transform: translateY(-2px); }

/* ========== FOOTER ========== */
.footer {
  background: var(--bg-soft);
  padding: 80px max(64px, calc((100% - 1220px) / 2)) 50px;
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.footer-logo { height: 64px; width: auto; opacity: 0.95; }
.footer-row {
  position: relative; width: 100%; max-width: 980px;
  display: flex; align-items: center; justify-content: center;
}
.footer nav {
  display: flex; gap: 40px; flex-wrap: wrap; justify-content: center;
  font-size: 14px; letter-spacing: var(--letter-tight); color: var(--ink-soft);
}
.footer nav a { transition: color 200ms; }
.footer nav a:hover { color: var(--blue); }
.footer-row .social-icons { position: absolute; right: 0; }
.footer-divider {
  width: 100%; max-width: 980px; height: 1px; background: #B6B6B6;
}
.footer-bottom {
  width: 100%; display: flex; flex-direction: column; gap: 12px;
  justify-content: center; align-items: center; text-align: center;
  font-size: 14px; color: var(--ink-soft); letter-spacing: var(--letter-tight);
  max-width: 980px;
}
.footer-legal { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; }
.footer-legal a { color: var(--ink-soft); transition: color 200ms; }
.footer-legal a:hover { color: var(--blue); }
.social-icons { display: flex; gap: 20px; align-items: center; color: var(--ink-soft); }
.social-icons a { transition: color 200ms, transform 200ms; }
.social-icons a:hover { color: var(--blue); transform: translateY(-2px); }

/* reveal on scroll */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 800ms var(--ease-soft), transform 800ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* seis itens no menu não cabem abaixo de ~1080px: vira hambúrguer
   (mesmo ponto de troca do cabeçalho das páginas internas) */
@media (max-width: 1080px) {
  .header .main-nav { display: none; }
  .hamburger { display: inline-flex; }
  .atuamos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — MOBILE (<= 820px)
   No celular as dobras empilham em fluxo normal.
   ============================================================ */
@media (max-width: 820px) {
  /* quebras manuais (\n) só valem no desktop; no mobile o texto quebra naturalmente */
  .hero p.lede, .newsletter p { white-space: normal; }
  .partners h2 { white-space: normal; } /* "Desde 2013…" pode quebrar no mobile */
  .header { padding: 14px 20px; }
  .header.scrolled { padding: 10px 20px; }
  .header .main-nav { display: none; }
  .header .logo { height: 44px; }
  .header-right { gap: 10px; }
  /* mobile: keep only language + hamburger; Login moves into the menu */
  .login-btn { display: none; }
  .hamburger { display: inline-flex; }
  .lang-pill { padding: 7px 10px; }

  .hero { padding: 0 24px; min-height: 76vh; align-items: center; }
  /* overlay escuro p/ leitura (estilo do print, ~50% mais fraco) — degradê uniforme vertical */
  .hero-overlay { display: block; opacity: 1; background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.34) 100%); }
  .hero-bg { background-image: url("../img/hero-mobile.jpg?v=cfc55ea5"); filter: brightness(0.92) saturate(0.95); } /* foto do rio (mobile) levemente escurecida */
  .hero-wave { height: 90px; } /* curva mais suave no mobile */
  .hero-wave svg.hero-wave-desktop { display: none; }
  .hero-wave svg.hero-wave-mobile { display: block; }
  .hero h1 .hero-esg { display: block; } /* mobile: "Jornada" e "ESG" em linhas separadas */
  /* mobile: show only the poster image, never download the video */
  .hero-video { display: none; }
  .hero-content { margin-left: 0; width: 100%; max-width: 100%; text-align: center; } /* mobile: hero centralizado (largura total p/ o texto centrar no viewport) */
  .hero h1 { font-size: 45px; margin-bottom: 18px; }
  .hero p.lede { font-size: 18px; max-width: 100%; }
  .hero p.lede.lede-desktop { display: none; }
  .hero p.lede.lede-mobile { display: block; white-space: pre-line; } /* mantém as quebras próprias do mobile */

  .partners { padding: 80px 24px 56px; }
  .partners h2 { font-size: 35px; margin-bottom: 40px; }
  .marquee-row { gap: 36px; }
  .partner-tile { height: 56px; width: 120px; }

  /* ---------- Onde atuamos: um card por linha ---------- */
  .atuamos-body { padding: 20px 24px 40px; }
  .atuamos-head h2 { font-size: 35px; }
  .atuamos-grid { grid-template-columns: 1fr; max-width: 480px; margin-top: 36px; gap: 20px; }

  /* ---------- Como trabalhamos: empilhado ---------- */
  .metodo { padding: 70px 24px 40px; }
  .metodo-grid { grid-template-columns: 1fr; gap: 34px; }
  .metodo-visual { --metodo-largura: 100%; }
  .metodo-logo-box { margin-bottom: 22px; }
  .metodo-logo { width: 230px; }
  .metodo-logo--en { width: 276px; max-width: 100%; }
  .metodo-text h2 { font-size: 28px; margin-bottom: 30px; text-wrap: balance; }
  .metodo-cta { width: 100%; }

  /* ---------- rest ---------- */
  .cases { padding: 35px 24px 70px; }
  .cases h2 { font-size: 35px; }
  .specialists h2 { font-size: 35px; }
  .case-grid { grid-template-columns: 1fr; }
  /* Cases (2-col on desktop) also stacks one-per-row on mobile, like the Blog */
  .case-grid.cols-2 { grid-template-columns: 1fr; max-width: 480px; }
  .newsletter { aspect-ratio: auto; display: block; }
  /* folha vertical do mobile: preenche a seção mostrando as curvas próprias da imagem (sem cortar no cover) */
  .newsletter-bg { background-image: url("../img/newsletter-mobile.png?v=aec29575"); background-size: 100% 100%; background-position: center; }
  .newsletter-inner { grid-template-columns: 1fr; padding: 120px 28px 130px; gap: 36px; text-align: center; }
  .newsletter-form { text-align: left; } /* mantém o consentimento alinhado à esquerda */
  .newsletter-btn { align-self: stretch; }
  .newsletter-done { padding: 30px 26px; }
  /* portrait shows the photo's full height incl. its gray top — darken it as
     green so the white heading stays legible (the horizontal desktop gradient
     leaves the top too light on mobile) */
  .newsletter-overlay {
    background: linear-gradient(180deg, rgba(6,22,10,0.74) 0%, rgba(6,22,10,0.5) 26%, rgba(6,22,10,0.24) 55%, rgba(6,22,10,0.36) 100%);
  }
  .afiliacoes { flex-direction: column; gap: 26px; padding: 44px 24px; }
  .afiliacoes-label { font-size: 15px; }
  .afiliacoes-logos { gap: 32px; flex-wrap: wrap; justify-content: center; }
  .afiliacao--cebds { height: 42px; }
  .afiliacao--pacto { height: 64px; }
  .specialists { padding: 80px 24px 0; }
  .footer { padding: 60px 24px 44px; }
  .footer-row { flex-direction: column; gap: 22px; }
  .footer-row .social-icons { position: static; }
  .footer nav { gap: 22px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* link "Preferências de cookies" no rodapé (acrescentado para o WordPress) */
.footer-legal .footer-cookies { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; transition: color 200ms; }
.footer-legal .footer-cookies:hover { color: var(--blue); }
/* barra do WordPress (usuário logado) não cobre o menu fixo */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }