@import url('/assets/css/tokens.css');

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* nunca overflow-x:hidden no body: cria contêiner de scroll e mata o sticky */
  overflow-x: clip;
  scroll-behavior: smooth;          /* nativo, sem momentum */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--font-texto);
  font-size: var(--t-base);
  line-height: var(--leading-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* height:auto é obrigatório: width/height no HTML entram como presentational
   hint e vencem o aspect-ratio do CSS */
img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

::selection { background: var(--terracota-500); color: var(--areia-100); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--secao-y); }
.secao--escura { background: var(--bg-dark); color: var(--texto-inverso); }
.secao--alt   { background: var(--bg-alt); }

.pular {
  position: absolute; left: -9999px;
  background: var(--petroleo-700); color: var(--areia-100);
  padding: var(--e-3) var(--e-5); z-index: 999;
}
.pular:focus { left: var(--e-4); top: var(--e-4); }

/* ==========================================================================
   TIPOGRAFIA
   ========================================================================== */
.olho {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--e-5);
}
.olho::before {
  content: ''; inline-size: 28px; block-size: 2px;
  background: var(--acento); flex: none;
}
.secao--escura .olho { color: var(--areia-400); }
.secao--escura .olho::before { background: var(--terracota-500); }

.titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: var(--leading-titulo);
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  text-wrap: balance;
}
.titulo--grande { font-size: var(--t-4xl); }

.apoio {
  margin-top: var(--e-5);
  max-width: var(--maxw-texto);
  font-size: var(--t-lg);
  color: var(--texto-suave);
}
.secao--escura .apoio { color: var(--texto-inverso-suave); }

.cabecalho-secao { margin-bottom: var(--e-9); }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: var(--e-3);
  padding: 17px var(--e-6);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--track-botao); text-transform: uppercase;
  border-radius: var(--raio);
  transition: background var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease),
              border-color var(--dur-rapida) var(--ease);
}
.btn svg { flex: none; transition: transform var(--dur-media) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primario {
  background: var(--terracota-500);
  color: var(--areia-100);          /* 5.55:1 — areia-300 aqui reprovaria AA */
}
.btn--primario:hover { background: var(--terracota-600); }

.btn--linha {
  border: 1px solid currentColor;
  color: var(--texto);
}
.btn--linha:hover { background: var(--petroleo-700); color: var(--areia-100); border-color: var(--petroleo-700); }

.secao--escura .btn--linha,
.hero .btn--linha,
.capa .btn--linha,
.cookies .btn--linha { color: var(--areia-300); }
.secao--escura .btn--linha:hover,
.hero .btn--linha:hover,
.capa .btn--linha:hover,
.cookies .btn--linha:hover { background: var(--areia-300); color: var(--petroleo-900); border-color: var(--areia-300); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.acoes--afastadas { margin-block-start: var(--e-8); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.cabecalho {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background var(--dur-media) var(--ease),
              border-color var(--dur-media) var(--ease);
  border-bottom: 1px solid transparent;
}
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-6); min-block-size: 84px;
}
.cabecalho.is-solido {
  background: rgba(7, 31, 39, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linha-inversa);
}
.marca img { inline-size: clamp(148px, 17vw, 196px); }
.marca__claro { display: block; }
.marca__cor { display: none; }

.nav { display: flex; align-items: center; gap: var(--e-7); }
.nav__lista { display: flex; gap: var(--e-6); }
.nav__lista a {
  position: relative;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--areia-300);
  padding-block: var(--e-2);
}
.nav__lista a::after {
  content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 2px; background: var(--terracota-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-media) var(--ease);
}
.nav__lista a:hover::after, .nav__lista a:focus-visible::after { transform: scaleX(1); }

.hamburguer { display: none; padding: var(--e-3); margin-inline-end: calc(var(--e-3) * -1); }
.hamburguer span {
  display: block; inline-size: 26px; block-size: 2px; background: var(--areia-300);
  transition: transform var(--dur-media) var(--ease), opacity var(--dur-rapida) var(--ease);
}
.hamburguer span + span { margin-block-start: 6px; }
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--texto-inverso);
  isolation: isolate;
  overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: -2; display: block; }
.hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(7,31,39,.94) 0%, rgba(7,31,39,.62) 46%, rgba(7,31,39,.44) 100%);
}
.hero__conteudo { padding-block: 132px var(--e-7); }
.hero__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-5xl); line-height: var(--leading-tight);
  text-transform: uppercase; text-wrap: balance;
  letter-spacing: var(--track-hero);
  max-inline-size: 19ch;
}
.hero__sub {
  margin-block-start: var(--e-5);
  max-inline-size: 56ch;
  font-size: var(--t-lg);
  color: var(--texto-inverso-suave);
}
.hero__acoes { margin-block-start: var(--e-6); }

/* faixa de autoridade, ainda dentro da superfície do hero */
.autoridade {
  border-block-start: 1px solid var(--linha-inversa);
  background: rgba(7, 31, 39, .55);
  backdrop-filter: blur(6px);
}
.autoridade__grade {
  display: grid; grid-template-columns: repeat(2, minmax(0, 260px));
  gap: clamp(24px, 6vw, 88px);
  padding-block: var(--e-5);
}
.autoridade__item { display: flex; flex-direction: column; gap: 2px; }
.autoridade__numero {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-2xl); line-height: 1;
  color: var(--areia-300);
}
.autoridade__rotulo {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--texto-inverso-suave);
}
.autoridade__nota {
  padding-block-end: var(--e-5);
  font-size: var(--t-sm); color: var(--texto-inverso-suave);
}

/* ==========================================================================
   §2 SERVIÇOS — lista editorial com imagem que troca
   ========================================================================== */
.escopo__corpo {
  display: grid; grid-template-columns: 1fr minmax(0, 520px);
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.escopo__lista { border-block-start: 1px solid var(--linha); }
.escopo__item { border-block-end: 1px solid var(--linha); }
.escopo__botao {
  inline-size: 100%; text-align: start;
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-5);
  align-items: baseline;
  padding-block: var(--e-6);
  transition: padding-inline-start var(--dur-media) var(--ease);
}
.escopo__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); color: var(--areia-500);
  transition: color var(--dur-rapida) var(--ease);
}
.escopo__nome {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-2xl); line-height: 1.1; text-transform: uppercase;
  transition: color var(--dur-rapida) var(--ease);
}
.escopo__texto {
  grid-column: 2; margin-block-start: var(--e-3);
  font-size: var(--t-base); color: var(--texto-suave);
  max-inline-size: 46ch;
}
.escopo__item.is-ativo .escopo__botao { padding-inline-start: var(--e-4); }
.escopo__item.is-ativo .escopo__nome,
.escopo__item.is-ativo .escopo__num { color: var(--acento); }

.escopo__palco {
  position: sticky; inset-block-start: 124px;
  display: block; aspect-ratio: 4 / 3; overflow: clip;
  isolation: isolate;
  background: var(--petroleo-800);
}
.escopo__palco img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--dur-lenta) var(--ease);
}
.escopo__palco img.is-ativa { opacity: 1; }

/* ==========================================================================
   §3 CONTRATAÇÃO — comparativa de duas colunas
   ========================================================================== */
.modelos {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--linha-inversa);
  margin-block-start: var(--e-8);
}
.modelo { padding: clamp(32px, 4vw, 56px); background: var(--petroleo-800); }
.modelo--destaque { background: var(--petroleo-900); position: relative; }
.modelo--destaque::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: var(--barra); background: var(--terracota-500);
}
.modelo__selo {
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--areia-500);
}
.modelo__nome {
  margin-block-start: var(--e-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-2xl); text-transform: uppercase; line-height: 1.1;
  color: var(--areia-300);
}
.modelo__perfil {
  margin-block-start: var(--e-4); font-size: var(--t-lg); font-weight: 500;
  color: var(--areia-400);
}
.modelo__lista { margin-block-start: var(--e-6); display: grid; gap: var(--e-4); }
.modelo__lista li {
  position: relative; padding-inline-start: var(--e-5);
  color: var(--texto-inverso-suave); font-size: var(--t-base);
}
.modelo__lista li::before {
  content: ''; position: absolute; inset-block-start: .62em; inset-inline-start: 0;
  inline-size: 10px; block-size: 2px; background: var(--terracota-500);
}
.modelo__lista strong { color: var(--areia-300); font-weight: 600; }

.resultado {
  margin-block-start: var(--e-8);
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--linha-inversa);
}
.resultado__numero {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-4xl); line-height: 1; color: var(--areia-300);
  white-space: nowrap;
}
.resultado__texto { color: var(--texto-inverso-suave); max-inline-size: 58ch; }

/* ==========================================================================
   §4 ROTINA — faixa escura, tipográfica, sem cards
   ========================================================================== */
.rotina { position: relative; overflow: clip; }
.secao--fundo { background: var(--petroleo-900); }
.rotina__corpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(40px, 6vw, 80px); align-items: start;
}
.rotina__linhas { border-block-start: 1px solid var(--linha-inversa); }
.rotina__linha {
  padding-block: var(--e-6);
  border-block-end: 1px solid var(--linha-inversa);
  display: grid; grid-template-columns: 44px 1fr; gap: var(--e-5);
}
.rotina__indice {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); color: var(--terracota-500);
  padding-block-start: .35em;
}
.rotina__frase {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-xl); text-transform: uppercase; line-height: 1.15;
  color: var(--areia-300);
}
.rotina__frase em { font-style: normal; text-decoration: line-through; text-decoration-color: var(--terracota-500); text-decoration-thickness: 3px; }
.rotina__detalhe { margin-block-start: var(--e-3); color: var(--texto-inverso-suave); max-inline-size: 52ch; }
.rotina__figura { position: relative; display: block; overflow: clip; aspect-ratio: 3 / 4; }
.rotina__figura img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ==========================================================================
   §5 PORTFÓLIO
   ========================================================================== */
.obras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--e-5);
  margin-block-start: var(--e-8);
}
.obra {
  position: relative; display: flex; flex-direction: column;
  background: var(--areia-200);
  transition: transform var(--dur-media) var(--ease);
}
.obra__media {
  position: relative; display: block; overflow: clip;
  aspect-ratio: 4 / 3; background: var(--petroleo-800);
}
/* a imagem sai do fluxo: em fluxo normal ela infla a caixa e o aspect-ratio
   deixa de valer (o height:100% resolve para auto contra altura indefinida) */
.obra__media img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease);
}
.obra:hover .obra__media img { transform: scale(1.06); }
.obra__corpo { padding: var(--e-5) var(--e-5) var(--e-6); flex: 1; display: flex; flex-direction: column; }
.obra__local {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--acento);
}
.obra__nome {
  margin-block-start: var(--e-3);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); text-transform: uppercase; line-height: 1.2;
}
.obra__dados { margin-block-start: var(--e-3); font-size: var(--t-sm); color: var(--texto-suave); }
.obra__contagem {
  margin-block-start: auto; padding-block-start: var(--e-5);
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--texto-suave);
}
/* botão de rótulo curto esticado sobre o card: nunca flow content dentro de <button> */
.obra__gatilho { position: static; }
.obra__gatilho::after { content: ''; position: absolute; inset: 0; }
.obra__gatilho:focus-visible { outline: none; }
.obra__gatilho:focus-visible::after { outline: 2px solid var(--foco); outline-offset: -3px; }

/* card só de texto, para obra sem foto */
.obra--texto { background: var(--petroleo-700); color: var(--texto-inverso); }
.obra--texto .obra__corpo { padding-block: clamp(40px, 6vw, 72px); }
.obra--texto .obra__nome { color: var(--areia-300); }
.obra--texto .obra__local { color: var(--areia-400); }
.obra--texto .obra__dados,
.obra--texto .obra__contagem { color: var(--texto-inverso-suave); }
.obra--texto .obra__marca {
  display: block; inline-size: 54px; block-size: var(--barra);
  background: var(--terracota-500); margin-block-end: var(--e-6);
}

/* ==========================================================================
   §6 QUEM ASSINA
   ========================================================================== */
.assina__corpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.assina__figura { position: relative; display: block; overflow: clip; aspect-ratio: 4 / 3; }
.assina__figura img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.assina__texto > p + p { margin-block-start: var(--e-5); }
.assina__abre { margin-block-start: var(--e-6); }
.assina__texto > p { color: var(--texto-suave); font-size: var(--t-lg); }
.assina__texto strong { color: var(--texto); font-weight: 600; }
.assina__dupla {
  margin-block-start: var(--e-7);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-6);
  padding-block-start: var(--e-6); border-block-start: 1px solid var(--linha);
}
.assina__papel { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); text-transform: uppercase; }
.assina__papel span { display: block; margin-block-start: var(--e-2); font-family: var(--font-texto); font-size: var(--t-sm); font-weight: 400; text-transform: none; color: var(--texto-suave); }

/* ==========================================================================
   §7 DEPOIMENTOS
   ========================================================================== */
.vozes {
  margin-block-start: var(--e-8);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--e-6) clamp(32px, 5vw, 72px);
}
.voz { padding-block-start: var(--e-6); border-block-start: 2px solid var(--terracota-500); }
.voz:nth-child(even) { margin-block-start: var(--e-8); }
.voz__texto {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-xl); line-height: 1.35;
  color: var(--texto);
}
.voz__autor {
  margin-block-start: var(--e-5);
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--texto-suave);
}

/* ==========================================================================
   §8 FAQ
   ========================================================================== */
.faq { margin-block-start: var(--e-8); border-block-start: 1px solid var(--linha); }
.faq__item { border-block-end: 1px solid var(--linha); }
.faq__pergunta {
  inline-size: 100%; text-align: start;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  padding-block: var(--e-6);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); text-transform: uppercase; line-height: 1.25;
}
.faq__sinal { position: relative; inline-size: 16px; block-size: 16px; flex: none; }
.faq__sinal::before, .faq__sinal::after {
  content: ''; position: absolute; inset-block-start: 7px; inset-inline-start: 0;
  inline-size: 16px; block-size: 2px; background: var(--acento);
  transition: transform var(--dur-media) var(--ease);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__pergunta[aria-expanded="true"] .faq__sinal::after { transform: rotate(0deg); }
.faq__resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-media) var(--ease); }
.faq__resposta > div { overflow: hidden; }
.faq__item.is-aberto .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta p { padding-block-end: var(--e-6); color: var(--texto-suave); max-inline-size: var(--maxw-texto); }

/* ==========================================================================
   §9 CTA FINAL — passo a passo
   ========================================================================== */
.passos {
  margin-block: var(--e-8);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  position: relative;
}
.passo { position: relative; padding-inline-start: var(--e-6); }
.passo__trilho {
  position: absolute; inset-block: 4px auto; inset-inline-start: 0;
  inline-size: 2px; block-size: 100%;
  background: var(--linha-inversa);
}
.passo__trilho::before {
  content: ''; position: absolute; inset: 0;
  background: var(--terracota-500);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-lenta) var(--ease);
}
.passo.is-visivel .passo__trilho::before { transform: scaleY(1); }
.passo__num { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); color: var(--terracota-500); }
.passo__titulo {
  margin-block-start: var(--e-3);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); text-transform: uppercase; color: var(--areia-300);
}
.passo__texto { margin-block-start: var(--e-3); color: var(--texto-inverso-suave); font-size: var(--t-base); }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape { background: var(--petroleo-900); color: var(--texto-inverso); padding-block: var(--e-9) var(--e-6); }
.rodape__grade {
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px);
}
.rodape__logo { inline-size: 168px; margin-block-end: var(--e-5); }
.rodape p, .rodape li { color: var(--texto-inverso-suave); font-size: var(--t-sm); }
.rodape__titulo {
  font-size: var(--t-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--areia-300);
  margin-block-end: var(--e-4);
}
.rodape__links { display: grid; gap: var(--e-3); }
.rodape__titulo--afastado { margin-block-start: var(--e-6); }
.rodape__links a:hover { color: var(--areia-300); }
.rodape__base {
  margin-block-start: var(--e-8); padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linha-inversa);
  display: flex; flex-wrap: wrap; gap: var(--e-4) var(--e-6);
  justify-content: space-between;
  font-size: var(--t-xs); color: var(--texto-inverso-suave);
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(7, 31, 39, .97);
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[open], .lightbox.is-aberto { display: flex; }
.lightbox__figura { display: block; max-block-size: 100%; }
.lightbox__figura img {
  max-block-size: calc(100svh - 190px); max-inline-size: 100%;
  inline-size: auto; margin-inline: auto; object-fit: contain;
}
.lightbox__legenda {
  margin-block-start: var(--e-4); text-align: center;
  color: var(--texto-inverso-suave); font-size: var(--t-sm);
}
.lightbox__fechar { position: absolute; inset-block-start: 20px; inset-inline-end: 20px; padding: var(--e-3); color: var(--areia-300); }
.lightbox__nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  padding: var(--e-4); color: var(--areia-300);
  background: rgba(7, 31, 39, .6);
}
.lightbox__nav--ant { inset-inline-start: 12px; }
.lightbox__nav--prox { inset-inline-end: 12px; }
.lightbox__contador {
  position: absolute; inset-block-end: 24px; inset-inline: 0;
  text-align: center; color: var(--texto-inverso-suave);
  font-size: var(--t-xs); letter-spacing: var(--track-eyebrow);
}
body.is-travado { overflow: hidden; }

/* ==========================================================================
   BANNER DE COOKIES — SEMPRE à ESQUERDA (o canto direito é do CTA flutuante)
   ========================================================================== */
.cookies {
  position: fixed; inset-block-end: 20px; inset-inline-start: 20px;
  z-index: 150; max-inline-size: 392px;
  padding: var(--e-5);
  background: var(--petroleo-900); color: var(--texto-inverso);
  border-inline-start: var(--barra) solid var(--terracota-500);
  box-shadow: var(--sombra-3);
  transform: translateY(calc(100% + 40px));
  transition: transform var(--dur-lenta) var(--ease);
}
.cookies.is-visivel { transform: translateY(0); }
.cookies p { font-size: var(--t-sm); color: var(--texto-inverso-suave); }
.cookies a { color: var(--areia-300); text-decoration: underline; }
.cookies__acoes { margin-block-start: var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-3); }
.cookies .btn { padding: 11px var(--e-5); }
.cookies p { line-height: 1.5; }

/* ==========================================================================
   CTA FLUTUANTE (canto inferior direito)
   ========================================================================== */
.flutuante {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 140;
  display: inline-flex; align-items: center; gap: var(--e-3);
  padding: 15px var(--e-5);
  background: var(--terracota-500); color: var(--areia-100);
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--track-botao); text-transform: uppercase;
  box-shadow: var(--sombra-2);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-media) var(--ease),
              transform var(--dur-media) var(--ease),
              visibility var(--dur-media);
}
.flutuante.is-visivel { opacity: 1; visibility: visible; transform: translateY(0); }
/* em telas estreitas o banner vira full-width e disputaria o canto do CTA;
   enquanto a decisão de cookies não for tomada, o botão flutuante recolhe */
@media (max-width: 640px) {
  body.com-cookies .flutuante { opacity: 0; visibility: hidden; pointer-events: none; }
}
.flutuante:hover { background: var(--terracota-600); }

/* ==========================================================================
   REVEAL (baseline — a camada rica é da etapa 7)
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-lenta) var(--ease), transform var(--dur-lenta) var(--ease);
}
[data-reveal].is-visivel { opacity: 1; transform: none; }
/* elemento sticky nunca anima transform: salta ao colar */
[data-reveal="opacidade"] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */
.capa {
  background: var(--petroleo-700); color: var(--texto-inverso);
  padding-block: 176px var(--secao-y);
}
.capa .titulo { color: var(--areia-300); }
.capa .apoio { color: var(--texto-inverso-suave); }

.prosa { max-inline-size: var(--maxw-texto); }
.prosa h2 {
  margin-block: var(--e-8) var(--e-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-xl); text-transform: uppercase;
}
.prosa h2:first-child { margin-block-start: 0; }
.prosa p, .prosa li { color: var(--texto-suave); }
.prosa p + p { margin-block-start: var(--e-4); }
.prosa ul { margin-block-start: var(--e-4); display: grid; gap: var(--e-3); }
.prosa li { position: relative; padding-inline-start: var(--e-5); }
.prosa li::before {
  content: ''; position: absolute; inset-block-start: .62em; inset-inline-start: 0;
  inline-size: 10px; block-size: 2px; background: var(--terracota-500);
}
.prosa a { color: var(--acento); text-decoration: underline; }

/* formulários institucionais (Fornecedores / Trabalhe Conosco) */
.formulario { display: grid; gap: var(--e-5); max-inline-size: 620px; margin-block-start: var(--e-7); }
.campo { display: grid; gap: var(--e-2); }
.campo label { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-eyebrow); }
.campo input, .campo textarea, .campo select {
  inline-size: 100%;
  padding: 14px var(--e-4);
  font: inherit; font-size: var(--t-base);
  color: var(--texto);
  background: var(--areia-100);
  border: 1px solid var(--linha);
  border-radius: var(--raio-suave);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); outline: none; }
.campo textarea { min-block-size: 148px; resize: vertical; }
.campo--consentimento { grid-template-columns: auto 1fr; align-items: start; gap: var(--e-3); }
.campo--consentimento input { inline-size: 18px; block-size: 18px; margin-block-start: 3px; }
.campo--consentimento label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-sm); color: var(--texto-suave); }
.campo--armadilha { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-aviso { font-size: var(--t-sm); padding: var(--e-4); border-inline-start: var(--barra) solid var(--terracota-500); background: var(--areia-200); }


/* ==========================================================================
   §5 PRESENÇA — bento assimétrico (retrato alto + texto + faixa larga)
   ========================================================================== */
.presenca {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.presenca__retrato,
.presenca__larga {
  position: relative; display: block; overflow: clip;
  background: var(--petroleo-800);
}
.presenca__retrato { aspect-ratio: 3 / 4; }
.presenca__larga { aspect-ratio: 16 / 9; grid-column: 1 / -1; }
.presenca__retrato img,
.presenca__larga img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
}
.presenca__texto > p { color: var(--texto-suave); font-size: var(--t-lg); }
/* filho direto só: sem o '>', a margem alcançava os <p> dos sócios dentro de
   .assina__dupla e empurrava o segundo 24px para baixo, desalinhando a dupla */
.presenca__texto > p + p { margin-block-start: var(--e-5); }
.presenca__abre { margin-block-start: 0; }
.presenca__texto .assina__dupla { margin-block-start: var(--e-7); }

/* ==========================================================================
   §7 DEPOIS DA ENTREGA — faixa full-bleed com substância, não slogan
   ========================================================================== */
.entrega {
  position: relative;
  padding-block: clamp(88px, 11vw, 168px);
  color: var(--texto-inverso);
  isolation: isolate;
  overflow: clip;
}
.entrega__fundo { position: absolute; inset: -8% 0; z-index: -2; display: block; }
.entrega__fundo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.entrega::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(7,31,39,.96) 0%, rgba(7,31,39,.88) 46%, rgba(7,31,39,.55) 100%);
}
.entrega__conteudo {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.entrega__cartao .apoio { color: var(--texto-inverso-suave); }
.entrega__cartao .olho { color: var(--areia-400); }
.entrega__cartao .olho::before { background: var(--terracota-500); }
.entrega__cartao .titulo { color: var(--areia-300); }

.entrega__itens {
  margin-block-start: var(--e-8);
  display: grid; gap: var(--e-5);
}
.entrega__itens li {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: var(--e-5); align-items: baseline;
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linha-inversa);
}
.entrega__itens li:first-child { border-block-start: 0; padding-block-start: 0; }
.entrega__rotulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: var(--track-botao); color: var(--areia-300);
}
.entrega__detalhe { color: var(--texto-inverso-suave); font-size: var(--t-base); }

.entrega__recorte {
  position: relative; display: block; overflow: clip;
  aspect-ratio: 4 / 3;
  border-inline-start: var(--barra) solid var(--terracota-500);
}
.entrega__recorte img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%; object-fit: cover;
}


/* ==========================================================================
   TAMBÉM ENTREGUES — obras nomeadas ainda sem acervo fotográfico.
   Lista tipográfica de propósito: card sem imagem parece card quebrado, e
   emprestar a foto de outra obra seria atribuir imagem que não é dela.
   ========================================================================== */
.tambem {
  margin-block-start: var(--e-9);
  padding-block-start: var(--e-7);
  border-block-start: 1px solid var(--linha);
}
.tambem__titulo {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-xl); text-transform: uppercase; letter-spacing: var(--track-titulo);
}
.tambem__nota { margin-block-start: var(--e-3); color: var(--texto-suave); font-size: var(--t-sm); }
.tambem__lista { margin-block-start: var(--e-6); display: grid; }
.tambem__lista li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto;
  gap: var(--e-5);
  align-items: baseline;
  padding-block: var(--e-5);
  border-block-end: 1px solid var(--linha);
}
.tambem__lista li:first-child { border-block-start: 1px solid var(--linha); }
.tambem__nome {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-lg); text-transform: uppercase; line-height: 1.2;
}
.tambem__dados { color: var(--texto-suave); font-size: var(--t-base); }
.tambem__ano {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--acento);
  white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1000px) {
  .escopo__corpo { grid-template-columns: 1fr; }
  .escopo__palco { position: relative; inset-block-start: auto; aspect-ratio: 16 / 10; order: -1; margin-block-end: var(--e-6); }
  .rotina__corpo { grid-template-columns: 1fr; }
  .rotina__figura { aspect-ratio: 16 / 10; }
  .assina__corpo { grid-template-columns: 1fr; }
  .presenca { grid-template-columns: 1fr; }
  .presenca__retrato { aspect-ratio: 16 / 10; }
  .entrega__conteudo { grid-template-columns: 1fr; }
  .entrega__recorte { aspect-ratio: 16 / 10; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__grade > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .hamburguer { display: block; }
  .nav {
    position: fixed; inset-block-start: 0; inset-inline-end: 0;
    inline-size: min(85vw, 380px); block-size: 100svh;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--e-7);
    padding: var(--e-8) var(--gutter);
    background: var(--petroleo-900);
    transform: translateX(100%);
    transition: transform var(--dur-media) var(--ease);
    z-index: 110;
  }
  .nav.is-aberto { transform: translateX(0); }
  .nav__lista { flex-direction: column; gap: var(--e-5); }
  .nav__lista a { font-size: var(--t-xl); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
  .cabecalho { background: rgba(7, 31, 39, .94); backdrop-filter: blur(10px); border-bottom-color: var(--linha-inversa); }

  .obras { grid-template-columns: repeat(2, 1fr); }
  /* contagem ímpar deixaria 1 órfão em 2 colunas: pula direto para 1 */
  .obras--impar { grid-template-columns: 1fr; }
  .modelos { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; gap: var(--e-6); }
  .vozes { grid-template-columns: 1fr; }
  .voz:nth-child(even) { margin-block-start: 0; }
  .resultado { grid-template-columns: 1fr; gap: var(--e-5); }
}

@media (max-width: 640px) {
  .autoridade__grade { grid-template-columns: 1fr; gap: var(--e-5); }
  .obras { grid-template-columns: 1fr; }
  .assina__dupla { grid-template-columns: 1fr; gap: var(--e-5); }
  .tambem__lista li { grid-template-columns: 1fr; gap: var(--e-2); }
  .entrega__itens li { grid-template-columns: 1fr; gap: var(--e-2); }
  .rodape__grade { grid-template-columns: 1fr; }
  .escopo__botao { grid-template-columns: 1fr; row-gap: var(--e-2); }
  .escopo__texto { grid-column: 1; }
  .rotina__linha { grid-template-columns: 1fr; gap: var(--e-2); }
  .hero__conteudo { padding-block-start: 132px; }
  .cookies {
    inset-inline: 12px; inset-block-end: 12px;
    max-inline-size: none;
  }
  .cookies__acoes .btn { flex: 1 1 100%; justify-content: center; }
  .flutuante { inset-block-end: 14px; inset-inline-end: 14px; padding: 13px var(--e-4); font-size: var(--t-xs); }
  .lightbox__nav { padding: var(--e-3); }
}