/* ==========================================================================
   MJG Soluções Empresariais — Landing Page institucional
   Move Marketing Digital · 2026

   Função da página (definida no planejamento): currículo digital, enviada em
   proposta comercial e licitação. NÃO tem CTA de anúncio.

   Assinatura visual: a "ficha técnica" — cada obra do portfólio carrega uma
   linha de dados (cidade · equipamento · capacidade), no vocabulário que o
   próprio cliente usa. Autoridade aqui se prova com número, não com adjetivo.

   Mesma família tipográfica da LP de Segurança: é o mesmo grupo.
   ========================================================================== */

/* --- Fontes (self-hosted, sem CDN) ------------------------------------- */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/publicsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/publicsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/crimsonpro-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/crimsonpro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Azul da marca — ação e identidade */
  --azul: #043696;
  --azul-tinta: #0B52D0;

  /* Petróleo — o fundo frio. Vem do vocabulário da refrigeração, que é o
     que faz o site da referência "parecer climatização" e não azul corporativo. */
  --petroleo: #06272F;
  --petroleo-claro: #0B3B48;

  /* Verde do WhatsApp — só nos botões que abrem a conversa. */
  --zap: #0C7A3B;
  --zap-forte: #095F2E;

  /* Acento frio — rótulos técnicos, ícones, ficha */
  --frio: #0E86AE;
  --frio-claro: #7FD0E8;
  /* Mesmo tom, escurecido: --frio puro dá 4.17:1 sobre branco (abaixo do
     mínimo de 4.5:1 do WCAG AA para texto normal). Usar só em texto sobre
     fundo claro; ícone, borda e traço decorativo continuam com --frio. */
  --frio-texto: #0B6B8B;

  --gelo: #EAF3F6;          /* superfície fria */
  --branco: #FFFFFF;
  --grafite: #10141C;
  --aco: #5C6880;
  --linha: #D6E2E7;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --titulo: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --corpo: 'Public Sans', 'Segoe UI', system-ui, sans-serif;

  --max: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --secao: clamp(2.25rem, 4.5vw, 3.5rem);
  --raio: 4px;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titulo); font-weight: 500; line-height: 1.1;
  letter-spacing: 0; margin: 0; text-wrap: balance;
}
h2 + p { margin-top: 1rem; }
h1 { font-size: clamp(2.5rem, 5vw, 3.9rem); font-weight: 400; }
h2 { font-size: clamp(2.1rem, 4.3vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 600; }
h4 { font-weight: 600; }

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.env { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--display); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--azul);
  margin: 0 0 .875rem;
}

.lead { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--aco); max-width: 62ch; }

.pula-para { position: absolute; left: -9999px; background: var(--azul); color: var(--branco); padding: .75rem 1.25rem; z-index: 200; }
.pula-para:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--azul-tinta); outline-offset: 3px; }

/* --- Ficha técnica: a assinatura da página ------------------------------ */
/* Linha de dados no vocabulário do próprio cliente: cidade, equipamento,
   capacidade. Números alinhados com tabular-nums. */
.ficha {
  display: flex; flex-wrap: wrap; gap: .4rem .75rem;
  font-family: var(--display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--aco);
}
.ficha span { display: inline-flex; align-items: center; gap: .5rem; }
.ficha span + span::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.ficha strong { color: var(--frio-texto); font-weight: 700; }

/* --- Botões ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--display); font-size: .9375rem; font-weight: 700; line-height: 1;
  padding: 1.0625rem 1.75rem; border: 2px solid transparent; border-radius: var(--raio);
  cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--cheio { background: var(--azul); color: var(--branco); border-color: var(--azul); }
.btn--cheio:hover { background: var(--azul-tinta); border-color: var(--azul-tinta); }
.btn--claro { background: var(--branco); color: var(--azul); border-color: var(--branco); }
.btn--claro:hover { background: var(--gelo); border-color: var(--gelo); }
.btn--vazado { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.34); }
.btn--vazado:hover { border-color: var(--branco); background: rgba(255,255,255,.08); }
.btn--zap { background: var(--zap); color: var(--branco); border-color: var(--zap); }
.btn--zap:hover { background: var(--zap-forte); border-color: var(--zap-forte); }
.btn--linha { background: transparent; color: var(--azul); border-color: var(--linha); }
.btn--linha:hover { border-color: var(--azul); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* --- Cabeçalho ---------------------------------------------------------- */
:root { --topo-h: 96px; }
html { scroll-padding-top: var(--topo-h); }
/* Transparente por cima da foto do hero, letra solta na imagem. Só ganha fundo
   depois que a página rola, para o menu continuar legível sobre as seções claras. */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.topo--solido { background: var(--petroleo); border-bottom-color: rgba(255,255,255,.08); }
.topo__env { display: flex; align-items: center; gap: 1.5rem; min-height: var(--topo-h); }
.marca {
  display: inline-flex; align-items: center;
  background: var(--branco); padding: .375rem .625rem; border-radius: var(--raio);
}
.marca img { width: 128px; height: auto; display: block; }
.nav { display: flex; gap: 1.875rem; margin-left: auto; }
.nav a { font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: color .18s ease; color: var(--branco); }
.nav a:hover { color: var(--frio-claro); }
.topo .btn { padding: .875rem 1.375rem; font-size: .9375rem; }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--branco); }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; background: var(--petroleo); color: var(--branco); overflow: hidden; }
.hero__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 55%; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,22,52,.94) 0%, rgba(6,22,52,.8) 34%, rgba(6,22,52,.4) 68%, rgba(6,22,52,.18) 100%),
    linear-gradient(to bottom, rgba(4,18,44,.7) 0, transparent 180px),
    linear-gradient(to top, rgba(4,18,44,.85) 0%, transparent 38%);
}
.hero__env {
  position: relative; z-index: 2;
  display: block;
  padding-top: calc(var(--topo-h) + clamp(1.25rem, 3.5vw, 3rem));
  padding-bottom: clamp(5.5rem, 8vw, 7rem);
}
.hero__env > div { max-width: 46rem; }
.hero .eyebrow { color: var(--frio-claro); }
.hero h1 { color: var(--branco); }
.hero__sub { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: #AFC6CE; max-width: 58ch; margin: 1.25rem 0 1.875rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .875rem; }

/* --- Números ------------------------------------------------------------ */
/* Quatro cartões brancos que sobem sobre a borda do hero (o hero fica mais
   baixo, os números ganham corpo). O fundo gelo só começa depois da sobra. */
.numeros {
  --sobra: clamp(2.75rem, 5vw, 4rem);
  position: relative; z-index: 3;
  margin-top: calc(var(--sobra) * -1);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(to bottom, transparent var(--sobra), var(--gelo) var(--sobra));
}
.numeros__grade {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
}
.numero {
  background: var(--branco); border-radius: 1rem; text-align: center;
  padding: 1.75rem 1.25rem 1.625rem;
  box-shadow: 0 20px 44px -24px rgba(6, 39, 47, .5), 0 1px 2px rgba(6, 39, 47, .08);
}
.numero__v {
  font-family: var(--titulo); font-size: clamp(2.75rem, 5vw, 4rem); font-weight: 500;
  line-height: 1; letter-spacing: 0; color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.numero__r { font-size: 1rem; color: var(--aco); margin: .75rem auto 0; line-height: 1.4; max-width: 18ch; }

/* --- Blocos ------------------------------------------------------------- */
.bloco { padding-block: var(--secao); }
.bloco--gelo { background: var(--gelo); }
.bloco__cabeca { max-width: 48rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.bloco__cabeca p { margin-top: 1rem; }

/* --- Soluções: lista com ícones + galeria de obras ----------------------- */
/* Seção escura (mesma família do hero e da PMOC). Estampa de escamas bem
   suave por trás, só para não ficar um bloco chapado. */
.solucoes {
  color: var(--branco);
  background-color: var(--petroleo-claro);
  background-image:
    linear-gradient(to bottom, rgba(6,39,47,.35), rgba(6,39,47,.7)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1.5'%3E%3Ccircle cx='0' cy='0' r='30'/%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='60' cy='30' r='30'/%3E%3Ccircle cx='60' cy='30' r='20'/%3E%3Ccircle cx='120' cy='0' r='30'/%3E%3Ccircle cx='120' cy='0' r='20'/%3E%3Ccircle cx='0' cy='60' r='30'/%3E%3Ccircle cx='0' cy='60' r='20'/%3E%3Ccircle cx='120' cy='60' r='30'/%3E%3Ccircle cx='120' cy='60' r='20'/%3E%3C/g%3E%3C/svg%3E");
}
.solucoes h2 { color: var(--branco); }
.solucoes .eyebrow { color: var(--frio-claro); }
.solucoes__cabeca {
  max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center;
}
.solucoes__cabeca .lead { color: #BFD3DA; margin-inline: auto; }

.solucoes__grade {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.solucoes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.sol {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.125rem; align-items: start;
  padding: .875rem 1rem; border-radius: 1rem;
  transition: background-color .2s ease, box-shadow .2s ease;
}
/* role="button" só existe depois que o JS roda */
.sol[role="button"] { cursor: pointer; }
.sol[role="button"]:hover { background: rgba(255,255,255,.05); }
.sol--ativo, .sol--ativo:hover { background: rgba(255,255,255,.09) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.sol[role="button"]:focus-visible { outline: 3px solid var(--frio-claro); outline-offset: 2px; }
.sol__icone {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gelo); color: var(--petroleo);
  box-shadow: 0 0 0 5px rgba(255,255,255,.08);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.sol--ativo .sol__icone { background: var(--frio-claro); box-shadow: 0 0 0 5px rgba(127,208,232,.25); }
.sol__icone svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.sol h3 { font-size: 1.375rem; font-weight: 600; color: var(--branco); margin: .125rem 0 .25rem; }
.sol p { font-size: .9375rem; line-height: 1.55; color: #A9C3CB; }

.galeria { position: sticky; top: calc(var(--topo-h) + 1.5rem); }
.galeria__palco {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 1.125rem; background: var(--petroleo);
  box-shadow: 0 34px 60px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.1);
}
.galeria__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .6s ease; }
.galeria__slide--ativo { opacity: 1; }
.galeria__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--petroleo);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,.6);
  transition: background-color .16s ease;
}
.galeria__seta[hidden] { display: none; }
.galeria__seta:hover { background: var(--branco); }
.galeria__seta:focus-visible { outline: 3px solid var(--frio-claro); outline-offset: 2px; }
.galeria__seta svg { width: 18px; height: 18px; }
.galeria__seta--ant { left: .875rem; }
.galeria__seta--prox { right: .875rem; }

.galeria__legenda {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 4rem 1.5rem 1.375rem;
  background: linear-gradient(to top, rgba(4,18,44,.88) 0%, rgba(4,18,44,.5) 55%, transparent 100%);
  font-family: var(--titulo); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; line-height: 1.15;
  color: var(--branco);
}

/* --- PMOC --------------------------------------------------------------- */
.pmoc { position: relative; overflow: hidden; background: var(--petroleo-claro); color: var(--branco); }
.pmoc__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%; z-index: 0; opacity: .24;
}
.pmoc::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,59,72,.94), rgba(11,59,72,.98));
}
.pmoc .env { position: relative; z-index: 2; }
.pmoc__env { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.pmoc .eyebrow { color: var(--frio-claro); }
.pmoc h2 { color: var(--branco); }
.pmoc p { color: #AFC6CE; }
.pmoc__lei {
  display: inline-flex; align-items: center; gap: .625rem;
  margin-top: 1.75rem; padding: .8125rem 1.125rem;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--raio);
  font-family: var(--display); font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; color: var(--branco);
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
a.pmoc__lei:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
a.pmoc__lei:focus-visible { outline: 3px solid var(--frio-claro); outline-offset: 3px; }
.pmoc__ext { flex: none; opacity: .8; transition: transform .16s ease; }
a.pmoc__lei:hover .pmoc__ext { transform: translate(2px, -2px); opacity: 1; }
.pmoc__quando { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.125rem; }
.pmoc__quando li { display: flex; gap: .875rem; padding-bottom: 1.125rem; border-bottom: 1px solid rgba(255,255,255,.13); }
.pmoc__quando li:last-child { border-bottom: 0; padding-bottom: 0; }
.pmoc__quando svg { width: 20px; height: 20px; flex: none; color: var(--frio-claro); margin-top: 3px; }
.pmoc__quando strong { display: block; font-family: var(--display); margin-bottom: .1875rem; }
.pmoc__quando span { font-size: .9375rem; color: #9DB4BD; }

/* --- Documentação técnica ----------------------------------------------- */
.doc__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sobre__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sobre__foto, .doc__foto {
  border-radius: 1.125rem; overflow: hidden; margin: 0;
  box-shadow: 0 30px 60px -32px rgba(6,39,47,.55), 0 1px 2px rgba(6,39,47,.08);
}
.doc__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.processo__cabeca { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.doc__lista { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.doc__lista li { display: flex; gap: .875rem; align-items: flex-start; font-size: .9375rem; }
.doc__lista svg { width: 20px; height: 20px; flex: none; color: var(--azul); margin-top: 3px; }

/* --- Segmentos ---------------------------------------------------------- */
.segmentos__cabeca { max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); text-align: center; }
.segmentos__cabeca .lead { margin-inline: auto; margin-top: 1rem; }
/* 5 cartões em grade de 6: três de duas colunas e dois de três, sem sobra */
.seg__grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem; }
.seg {
  grid-column: span 2; display: flex; flex-direction: column;
  background: var(--branco); border-radius: 1.125rem;
  box-shadow: 0 20px 44px -28px rgba(6,39,47,.5), 0 1px 2px rgba(6,39,47,.08), 0 0 0 1px var(--linha);
  transition: transform .25s ease, box-shadow .25s ease;
}
.seg:nth-child(n+4) { grid-column: span 3; }
.seg:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -28px rgba(6,39,47,.6), 0 1px 2px rgba(6,39,47,.08), 0 0 0 1px var(--linha);
}
.seg__foto { position: relative; }
.seg__foto img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 1.125rem 1.125rem 0 0;
}
.seg:nth-child(n+4) .seg__foto img { aspect-ratio: 2.2 / 1; }
.seg__icone {
  position: absolute; left: 1.5rem; bottom: -1.625rem;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--branco);
  box-shadow: 0 0 0 5px var(--branco);
}
.seg__icone svg { width: 24px; height: 24px; }
.seg__corpo { padding: 2.5rem 1.5rem 1.625rem; display: flex; flex-direction: column; flex: 1; }
.seg h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: .5rem; }
.seg__corpo > p { font-size: .9375rem; line-height: 1.6; color: var(--aco); }
.seg .seg__rotulo {
  margin-top: auto; padding-top: 1.25rem;
  font-family: var(--display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--frio-texto);
  margin-bottom: .5rem;
}
.seg__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; }
.seg__chips li {
  padding: .375rem .6875rem; border-radius: 999px;
  background: var(--gelo); color: var(--petroleo);
  font-family: var(--display); font-size: .71875rem; font-weight: 600; letter-spacing: .03em;
}

/* --- Contato ------------------------------------------------------------ */
.contato { background: var(--petroleo); color: var(--branco); }
.contato__env { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.contato .eyebrow { color: var(--frio-claro); }
.contato h2 { color: var(--branco); }
.contato p { color: #AFC6CE; }
.contato .form p { color: var(--aco); }
.dados { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.dados li { display: flex; gap: .875rem; align-items: flex-start; }
.dados svg { width: 20px; height: 20px; flex: none; color: var(--frio-claro); margin-top: 3px; }
.dados strong { display: block; font-family: var(--display); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--frio-claro); margin-bottom: .1875rem; }
.dados span, .dados a { font-size: .9375rem; color: var(--branco); text-decoration: none; }
.dados a:hover { text-decoration: underline; }

.form { background: var(--branco); border-radius: var(--raio); padding: clamp(1.75rem, 3vw, 2.25rem); }
.form h3 { color: var(--grafite); margin-bottom: .375rem; }
.form__nota { font-size: .875rem; color: var(--aco); margin-bottom: 1.5rem; }
.campo { margin-bottom: 1.125rem; }
.campo label { display: block; font-family: var(--display); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aco); margin-bottom: .4375rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--corpo); font-size: 1rem; color: var(--grafite);
  padding: .8125rem .9375rem; border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--branco); transition: border-color .18s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); }
.campo textarea { resize: vertical; min-height: 5.5rem; }
.form .btn { width: 100%; }
.form__legal { font-size: .8125rem; color: var(--aco); margin-top: .875rem; text-align: center; }

/* --- Rodapé ------------------------------------------------------------- */
.rodape { background: #041A21; color: #8FA6B0; padding-block: clamp(3rem, 5vw, 4rem) 2rem; }
.rodape__topo { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.rodape__sobre { margin-top: 1.25rem; font-size: .9375rem; max-width: 36ch; }
.rodape h3 { font-family: var(--display); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--branco); margin-bottom: 1rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.rodape li, .rodape a { font-size: .9375rem; text-decoration: none; }
.rodape a:hover { color: var(--branco); text-decoration: underline; }
.rodape__base { padding-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8125rem; }
/* A logo é azul sobre fundo claro. No rodapé escuro ela vai sobre uma placa
   branca, para as cores saírem exatamente como no arquivo do cliente —
   nada de silhueta invertida. */
.rodape__placa {
  display: inline-block;
  background: var(--branco);
  border-radius: 10px;
  padding: .8125rem 1.0625rem;
}
.rodape__logo { width: 150px; height: auto; display: block; }

/* --- Entrada ------------------------------------------------------------ */
.sobe { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.sobe.visivel { opacity: 1; transform: none; }

/* --- Responsivo --------------------------------------------------------- */
@media (max-width: 980px) {
  .pmoc__env, .doc__grade, .sobre__grade, .contato__env { grid-template-columns: 1fr; }
  .numeros__grade { grid-template-columns: repeat(2, 1fr); }
  .rodape__topo { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --topo-h: 84px; }
  .marca img { width: 112px; }
  .hero__acoes .btn { width: 100%; }
}

/* O menu maior não cabe em uma linha abaixo de 1080 px: vira botão. */
@media (max-width: 1080px) {
  .nav { display: none; }
  .nav--aberta {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; inset: var(--topo-h) 0 auto 0; background: var(--branco);
    border-bottom: 1px solid var(--linha); padding: .5rem var(--gutter) 1.25rem;
  }
  .nav--aberta a { padding: .875rem 0; border-bottom: 1px solid var(--linha); color: var(--grafite); }
  .nav--aberta a:hover { color: var(--azul); }
  .menu-btn { display: block; }
  .topo .btn { display: none; }
}

@media (max-width: 520px) {
  .numero { padding: 1.375rem .875rem 1.25rem; }
  .numero__r { font-size: .9375rem; }
  .rodape__topo { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .sobe { opacity: 1; transform: none; }
  .obra:hover .obra__foto img { transform: none; }
}

/* ==========================================================================
   Componentes na pegada da referência (Armant): diferenciais em cards,
   parede de clientes e plantão em destaque.
   ========================================================================== */

/* --- Diferenciais ------------------------------------------------------- */
/* Mesma pegada da Armant: fundo azul-claro contínuo com a faixa de números,
   título centralizado e cards brancos com foto arredondada à esquerda. */
.numeros { border-bottom: 0; }
.escolha { padding-top: 0; }
.escolha__cabeca { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.escolha__cabeca .lead { margin-inline: auto; }
.dif__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dif {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.125rem; align-items: start;
  background: var(--branco); padding: 1rem; border-radius: 1rem;
}
.dif__foto {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  border-radius: 1.5rem; object-fit: cover; display: block;
}
.dif h3 { margin: .25rem 0 .5rem; }
.dif p { font-size: .875rem; line-height: 1.6; color: var(--aco); }
.dif--plantao { background: var(--petroleo-claro); color: var(--branco); }
.dif--plantao h3 { color: var(--branco); }
.dif--plantao p { color: #AFC6CE; }

/* --- Parede de clientes -------------------------------------------------- */
/* Sem logo de terceiro: quem tem obra documentada aparece com a foto da própria
   obra; quem não tem vira placa tipográfica. Nenhuma foto é atribuída a quem
   não a tem. */
.clientes { background: var(--gelo); }
.clientes__grade {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(14rem, 20vw, 17rem);
  gap: 1.25rem;
}
.cliente--grande { grid-column: span 2; }
.cliente {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 1rem; color: var(--branco);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 1.5rem 1.625rem;
  box-shadow: 0 20px 44px -26px rgba(6,39,47,.55), 0 1px 2px rgba(6,39,47,.08);
}
.cliente__corpo { display: flex; flex-direction: column; gap: .375rem; position: relative; z-index: 1; }
.cliente__nome {
  font-family: var(--titulo); font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 500;
  line-height: 1.05; color: var(--branco);
}
.cliente--grande .cliente__nome { font-size: clamp(2.25rem, 3.6vw, 3rem); }
.cliente__tipo {
  align-self: flex-start;
  font-family: var(--display); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--branco);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  padding: .3125rem .625rem; border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Foto da obra */
.cliente__img {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; transition: transform .6s ease;
}
/* letreiro do Pontal fica no alto da foto: não deixar o corte comer */
.cliente[data-cliente="pontal"] .cliente__img { object-position: 50% 0; }
.cliente--foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(4,18,44,.92) 0%, rgba(4,18,44,.55) 42%, rgba(4,18,44,.12) 100%);
}

/* Placa tipográfica (cliente sem obra documentada) */
.cliente--liso {
  background: linear-gradient(150deg, var(--petroleo-claro) 0%, var(--petroleo) 100%);
}
.cliente--liso::before {
  content: attr(data-inicial);
  position: absolute; right: 1.25rem; top: -.5rem; z-index: -1;
  font-family: var(--titulo); font-size: 11rem; font-weight: 500; line-height: 1;
  color: rgba(255,255,255,.07);
}
.cliente--liso .cliente__tipo { background: rgba(127,208,232,.14); border-color: rgba(127,208,232,.35); color: var(--frio-claro); }
.clientes__nota { margin-top: 1.75rem; font-size: 1rem; color: var(--aco); }

/* --- PMOC: sub-ofertas --------------------------------------------------- */
.pmoc__linha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px; background: rgba(255,255,255,.16);
  margin-top: 2.5rem; border: 1px solid rgba(255,255,255,.16);
}
.pmoc__oferta { background: var(--petroleo-claro); padding: 1.5rem 1.375rem; }
.pmoc__oferta h3 {
  font-size: 1.1875rem; color: var(--branco); margin-bottom: .375rem;
}
.pmoc__oferta p { font-size: .875rem; color: #9DB4BD; }

/* --- Faixa de plantão ---------------------------------------------------- */
.plantao {
  position: relative; overflow: hidden;
  background: var(--azul); color: var(--branco);
}
.plantao__fundo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%; z-index: 0;
}
.plantao::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(2, 20, 58, .87), rgba(2, 20, 58, .92));
}
.plantao__env {
  position: relative; z-index: 2;
  padding-block: clamp(2.25rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem;
}
.plantao h2 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); color: var(--branco); flex: 1 1 22rem; }
.plantao p { color: #C2D9E4; font-size: .9375rem; flex: 1 1 18rem; }

.plantao .btn { flex: none; }

@media (max-width: 980px) {
  .pmoc__linha { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OBRAS — grade de cards, cada card com seu próprio carrossel
   Uma obra por card. Arrastar o card para o lado mostra o resto das fotos
   daquele mesmo trabalho, não a próxima obra.
   A rolagem é nativa (scroll-snap): funciona no dedo, na roda e no teclado
   mesmo se o JS falhar. As setas só empurram o scroll.
   ========================================================================== */

.obras__dica {
  font-size: .9375rem;
  color: var(--aco);
  margin: -1rem auto 2.25rem;
  max-width: 42rem;
  text-align: center;
}

/* A resolução de origem é de foto de story: cada painel tem 450 px reais.
   Card de 27rem num monitor 2x pedia ~1180 px de imagem e virava borrão.
   Em 3 colunas o card fica em ~22rem, e aí a foto chega quase 1:1. */
.obras { background: var(--gelo); }
.obras .bloco__cabeca { margin-inline: auto; text-align: center; }
.obras .bloco__cabeca .lead { margin-inline: auto; }

.obras__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Cartão de obra: branco, cantos redondos, mesma família dos cartões de
   diferenciais e de clientes. */
.obra {
  display: flex; flex-direction: column;
  background: var(--branco); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 20px 44px -28px rgba(6,39,47,.5), 0 1px 2px rgba(6,39,47,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.obra:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -28px rgba(6,39,47,.6), 0 1px 2px rgba(6,39,47,.08);
}
.obra:hover .obra__foto img { transform: scale(1.03); }

/* --- Vitrine: a moldura da foto ---------------------------------------- */
.obra__vitrine {
  position: relative;
  overflow: hidden;
  background: var(--petroleo);
}

.obra__trilho {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.obra__trilho::-webkit-scrollbar { display: none; }
.obra__trilho:focus-visible { outline: 3px solid var(--frio-claro); outline-offset: -3px; }

.obra__foto {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
}
.obra__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s ease;
}

/* --- Setas: sobre a foto, com um véu para o ícone não sumir ------------- */
.obra__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--petroleo);
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease, background-color .18s ease;
  box-shadow: 0 2px 12px rgba(6, 39, 47, .28);
}
.obra__seta--ant  { left: .5rem; }
.obra__seta--prox { right: .5rem; }
.obra__seta svg { width: 17px; height: 17px; }

.obra__vitrine:hover .obra__seta,
.obra__vitrine:focus-within .obra__seta { opacity: 1; }
.obra__seta:focus-visible { opacity: 1; outline: 3px solid var(--frio-claro); outline-offset: 2px; }
.obra__seta:hover { background: var(--branco); }
.obra__seta[disabled] { opacity: 0 !important; pointer-events: none; }

/* No toque não existe hover: as setas ficam sempre visíveis. */
@media (hover: none) {
  .obra__seta { opacity: 1; }
}

/* --- Pontos e contador -------------------------------------------------- */
.obra__pontos {
  position: absolute;
  left: .875rem; bottom: .875rem;
  display: flex; gap: .375rem;
  margin: 0;
}
.obra__ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 1px 3px rgba(6, 39, 47, .4);
  transition: background-color .18s ease, transform .18s ease;
}
.obra__ponto.e-ativo { background: var(--branco); transform: scale(1.25); }

.obra__conta {
  position: absolute;
  right: .875rem; bottom: .75rem;
  margin: 0;
  font-family: var(--display);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .07em;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(6, 39, 47, .7);
}

/* --- Texto do card ------------------------------------------------------ */
.obra h3 {
  font-size: clamp(1.3125rem, 1.7vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 1.375rem 1.5rem .625rem;
}
.obra > p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--aco);
  margin: 0 1.5rem 1.125rem;
}
/* Ficha técnica em etiquetas: a primeira (cidade) em azul, o resto em gelo */
.obra .ficha {
  margin: auto 1.5rem 1.5rem;
  gap: .375rem;
}
.obra .ficha span {
  padding: .375rem .6875rem; border-radius: 999px;
  background: var(--gelo); color: var(--petroleo);
  font-size: .65625rem; letter-spacing: .04em;
}
.obra .ficha span + span::before { display: none; }
.obra .ficha span:first-child { background: var(--azul); color: var(--branco); }
.obra .ficha strong { color: inherit; }

/* Cartões largos (primeiro e último): ocupam duas colunas, foto panorâmica em
   cima. 10 obras = 3 colunas com dois cartões de duas colunas -> 4 fileiras
   cheias. Com o filtro de cliente ligado, todos voltam ao tamanho normal. */
@media (min-width: 641px) {
  .obras__grade:not(:has(.obra[hidden])) .obra--larga { grid-column: span 2; }
  .obras__grade:not(:has(.obra[hidden])) .obra--larga .obra__foto img { aspect-ratio: 2 / 1; }
  .obras__grade:not(:has(.obra[hidden])) .obra--larga > h3 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); }
}

@media (max-width: 1080px) {
  .obras__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .obras__grade { grid-template-columns: 1fr; gap: 1.5rem; }
  .obra__seta { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .obra__trilho { scroll-behavior: auto; }
  .obra__ponto { transition: none; }
}

/* ==========================================================================
   CLIENTE CLICÁVEL → FILTRO DE OBRAS
   Só vira link o cliente que tem obra documentada. Quem não tem foto fica
   como está: sem link e sem promessa. Sem JS o link ainda leva às obras.
   ========================================================================== */

.cliente--obra {
  text-decoration: none;
  color: var(--branco);
}
.cliente--obra:hover .cliente__img { transform: scale(1.05); }
.cliente--obra:focus-visible {
  outline: 3px solid var(--frio-claro);
  outline-offset: 3px;
}

/* "Ver a obra": pílula branca no canto superior esquerdo do cartão (o direito e o
   centro costumam ter o letreiro do cliente na foto) */
.cliente__ver {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem .875rem; border-radius: 999px;
  background: var(--branco); color: var(--azul);
  font-family: var(--display); font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
  transition: background-color .16s ease, color .16s ease;
}
.cliente__seta {
  width: 15px; height: 15px;
  transition: transform .16s ease;
}
.cliente--obra:hover .cliente__ver { background: var(--azul); color: var(--branco); }
.cliente--obra:hover .cliente__seta { transform: translateX(3px); }

/* --- Aviso de grade filtrada -------------------------------------------- */
.obras__filtro {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin: -1rem 0 2.25rem;
  font-size: .9375rem;
  color: var(--grafite);
}
.obras__filtro[hidden] { display: none; }
.obras__filtro strong { color: var(--azul); }

.obras__limpar {
  font-family: var(--display); font-size: .75rem; font-weight: 700;
  letter-spacing: .05em;
  padding: .4rem .875rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--branco);
  color: var(--azul);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.obras__limpar:hover { border-color: var(--azul); background: var(--azul); color: var(--branco); }

.obras__dica[hidden] { display: none; }
.obra[hidden] { display: none; }

/* --- Serviço escolhido: o destaque azul segue o clique ------------------- */
/* role="button" só existe depois que o JS roda: sem JS o card não finge
   ser clicável. */
.dif[role="button"] {
  cursor: pointer;
  transition: background-color .16s ease;
}
.dif[role="button"]:not(.dif--plantao):hover { background: #F4F9FB; }
.dif[role="button"]:focus-visible { outline: 3px solid var(--azul-tinta); outline-offset: -3px; }
.dif--plantao { transition: background-color .16s ease; }

/* ==========================================================================
   PROCESSO — a numeração aqui é sequência de verdade (visita, projeto, obra,
   entrega), não enfeite. Por isso ela aparece.
   ========================================================================== */
.passos__grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 1.25rem; padding-top: 1.5rem;
}
.passo {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border-radius: 1.125rem;
  padding: 2.5rem 1.5rem 1.5rem;
  box-shadow: 0 20px 44px -28px rgba(6,39,47,.5), 0 1px 2px rgba(6,39,47,.08);
}
/* a numeração é sequência de verdade: círculo numerado ligado ao próximo */
.passo .passo__n {
  position: absolute; top: -1.375rem; left: 1.5rem; z-index: 1;
  width: 2.75rem; height: 2.75rem; margin: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--branco);
  font-family: var(--display); font-size: .9375rem; font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--gelo);
}
.passo__icone {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 28px; height: 28px;
  fill: none; stroke: var(--frio); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.passo h3 { font-size: 1.4375rem; font-weight: 600; margin: .5rem 0 .625rem; padding-right: 1.5rem; }
.passo > p:not(.passo__n):not(.passo__saida) { font-size: .9375rem; line-height: 1.6; color: var(--aco); margin-bottom: 1.25rem; }
.passo .passo__saida {
  margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: .25rem;
  font-family: var(--display); font-size: .9375rem; font-weight: 700; color: var(--petroleo);
}
.passo__saida span {
  font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--frio-texto);
}
@media (min-width: 1081px) {
  .passo:not(:last-child)::after {
    content: ''; position: absolute; top: 0; z-index: 0;
    left: calc(1.5rem + 2.75rem + 10px); right: calc(-1.25rem - 1.5rem + 10px);
    border-top: 2px dashed rgba(4,54,150,.32);
  }
}
@media (max-width: 1080px) {
  .passos__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .passos__grade { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .seg__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg, .seg:nth-child(n+4) { grid-column: auto; }
  .seg:nth-child(n+4) .seg__foto img { aspect-ratio: 16 / 10; }
  .seg:last-child .seg__foto img { aspect-ratio: 16 / 7; }
  .seg:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .seg__grade { grid-template-columns: 1fr; gap: 1.5rem; }
  .seg:last-child { grid-column: auto; }
}

/* ==========================================================================
   DÚVIDAS TÉCNICAS
   ========================================================================== */
.faq__lista { max-width: 52rem; border-top: 1px solid var(--linha); }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 0;
  background: none; border: none;
  font-family: var(--display); font-size: 1.0625rem; font-weight: 600;
  color: var(--grafite); text-align: left; cursor: pointer;
  transition: color .18s ease;
}
.faq__q:hover { color: var(--azul); }
.faq__sinal { flex: none; width: 20px; height: 20px; color: var(--azul); transition: transform .22s ease; }
.faq__q[aria-expanded='true'] .faq__sinal { transform: rotate(45deg); }
.faq__r { display: none; padding-bottom: 1.5rem; color: var(--aco); max-width: 62ch; }
.faq__q[aria-expanded='true'] + .faq__r { display: block; }

/* ==========================================================================
   DEPOIMENTOS — só aparece quando houver depoimento real no CONFIG
   ========================================================================== */
.depoimentos[hidden] { display: none; }
.depo__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.75rem;
}
.depo {
  margin: 0;
  background: var(--gelo);
  border-left: 3px solid var(--frio);
  padding: 1.75rem;
}
.depo blockquote { margin: 0 0 1.125rem; font-size: 1rem; color: var(--grafite); }
.depo figcaption { font-family: var(--display); font-size: .8125rem; }
.depo__autor { display: block; font-weight: 700; color: var(--grafite); }
.depo__papel { display: block; color: var(--aco); margin-top: .1875rem; }


/* Clientes: 5 cartões (o Carrefour ocupa duas colunas, fechando 6) -> 3 / 2 / 1
   colunas. Soluções: lista + galeria lado a lado, empilhadas (galeria em cima)
   abaixo de 900px. */
@media (max-width: 900px) {
  .solucoes__grade { grid-template-columns: 1fr; }
  .galeria { position: static; order: -1; }
}
@media (max-width: 860px) {
  .clientes__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 14rem; }
}
@media (max-width: 560px) {
  .clientes__grade { grid-template-columns: 1fr; }
  .clientes__grade > .cliente--grande { grid-column: auto; }
}

@media (max-width: 1080px) { .dif__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .dif__grade { grid-template-columns: 1fr; }
  .dif { grid-template-columns: 5.75rem minmax(0, 1fr); gap: .875rem; }
  .dif__foto { border-radius: 1.125rem; }
}

/* ==========================================================================
   Páginas legais — Política de Privacidade e Termos de Uso
   Sem foto de hero atrás do cabeçalho, então ele precisa nascer sólido (não dá
   pra esperar o scroll) e o miolo precisa de respiro pro cabeçalho fixo.
   ========================================================================== */
.pagina-simples .topo { background: var(--petroleo); border-bottom-color: rgba(255,255,255,.08); }
.pagina-simples main { padding-top: var(--topo-h); }
.legal { padding-block: var(--secao); }
.legal__env { max-width: 66ch; }
.legal__voltar {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 700; font-size: .875rem;
  color: var(--azul); text-decoration: none; margin-bottom: 2.5rem;
}
.legal__voltar:hover { text-decoration: underline; }
.legal__data { color: var(--aco); font-size: .9375rem; margin: .5rem 0 2.5rem; }
.legal h1 { margin-bottom: 0; }
.legal h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: 0;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  margin: 2.75rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--linha);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .5rem; color: var(--grafite); }
.legal li:last-child { margin-bottom: 0; }
.legal a { color: var(--azul); text-decoration: underline; text-underline-offset: .15em; }
.legal a:hover { color: var(--azul-tinta); }
.legal__aviso {
  background: var(--gelo); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.25rem 1.5rem; margin-top: 2.5rem; font-size: .9375rem; color: var(--aco);
}
.legal__aviso a { color: var(--azul); }
.rodape__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rodape__legal a { text-decoration: underline; text-underline-offset: .15em; }