/* INOVE — layout INOVE (SITE-PROD-01 T-8). Escopo: body.pg-inove.
   Fonte: research/ux-design/DESIGN_DIRECTION.md rev 3 (§3 tokens, §4 tipografia, §5 home, §6 a11y, §7 componentes).
   Tema claro fixo (<meta name="color-scheme" content="light">): os papéis escuros de site.css são sobrescritos aqui.
   IDENT-1: nenhuma regra com seletor de tipo img; nenhum filtro/opacidade/transform sobre master. */

.pg-inove{
  --i-red:#C91119; --i-red-dark:#9C0D14; --i-ink:#141A1F; --i-gray:#6B7280;
  --i-concrete:#E9ECEF; --i-line:#E2E5E8; --i-white:#FFFFFF;
  --i-font:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --i-hdr-h:60px; --i-pad:44px; --i-gutter:20px;
  --fundo:var(--i-white); --superficie:var(--i-white); --superficie-2:var(--i-concrete);
  --texto:var(--i-ink); --texto-2:var(--i-gray); --acento:var(--i-red); --acento-forte:var(--i-red-dark);
  --borda:var(--i-line); --link:var(--i-ink); --sobre-acento:var(--i-white);
  color-scheme:light;
  margin:0; background:var(--i-white); color:var(--i-ink);
  font-family:var(--i-font); font-weight:400; font-size:16px; line-height:26px;
}
@media (min-width:480px){ .pg-inove{ --i-gutter:24px } }
@media (min-width:768px){ .pg-inove{ --i-hdr-h:64px; --i-pad:56px; --i-gutter:40px; font-size:17px; line-height:27px } }
@media (min-width:1024px){ .pg-inove{ --i-hdr-h:72px; --i-pad:72px; --i-gutter:64px; font-size:18px; line-height:28px } }
html.hdr-locked{ overflow:hidden }
/* RW-4: páginas curtas (404, privacidade) — o rodapé fecha a janela; sem faixa branca abaixo dele */
.pg-inove{ display:flex; flex-direction:column; min-height:100vh }
.pg-inove > main{ flex:1 0 auto }
.pg-inove > .hdr, .pg-inove > .ftr{ flex:none }

.pg-inove a{ color:var(--i-ink) }
.pg-inove :focus-visible{ outline:3px solid var(--i-ink); outline-offset:2px }
.pg-inove .hero :focus-visible, .pg-inove .ftr :focus-visible{ outline-color:var(--i-white) }
.pg-inove p{ max-width:none; margin:0 }
.pg-inove h1, .pg-inove h2, .pg-inove h3{ font-family:var(--i-font); font-weight:700; letter-spacing:-.01em; margin:0 }
.pg-inove ul{ list-style:none; margin:0; padding:0 }
.pg-inove .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--i-ink); color:var(--i-white); padding:12px 16px; font-weight:500 }
.pg-inove .skip:focus{ left:8px; top:8px; outline-color:var(--i-white) }
/* texto só para leitor de tela ancorado à esquerda do link: fora disso, o intervalo de texto (nowrap) passava da viewport a 360 px */
.pg-inove a{ position:relative }
.pg-inove .vh{ left:0; top:0 }
.pg-inove .sprite{ position:absolute; width:0; height:0; overflow:hidden }
.pg-inove .ico{ width:20px; height:20px; flex:none; display:inline-block; vertical-align:middle }

.pg-inove .wrap{ width:100%; max-width:calc(1200px + 2 * var(--i-gutter)); margin-inline:auto; padding-inline:var(--i-gutter) }

/* ------------------------------------------------------------------ botões (DD §7.2) */
.pg-inove .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 24px; border:2px solid transparent; border-radius:0;
  font-family:var(--i-font); font-size:16px; line-height:20px; font-weight:500; text-decoration:none;
  cursor:pointer; white-space:nowrap;
}
.pg-inove .btn--red{ background:var(--i-red); border-color:var(--i-red); color:var(--i-white) }
.pg-inove .btn--red:hover{ background:var(--i-red-dark); border-color:var(--i-red-dark) }
.pg-inove .btn--ink{ background:var(--i-ink); border-color:var(--i-ink); color:var(--i-white) }
.pg-inove .btn--ink:hover{ background:#000; border-color:#000 }
.pg-inove .btn--outline-light{ background:transparent; border-color:var(--i-white); color:var(--i-white) }
.pg-inove .btn--outline-light:hover{ background:var(--i-white); color:var(--i-ink) }

/* --------------------------------------------------------------- cabeçalho (DD §5.1, §7.2) */
.pg-inove .hdr{ position:sticky; top:0; z-index:50; background:var(--i-white); border-bottom:1px solid var(--i-line) }
.pg-inove .hdr__bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--i-hdr-h) }
.pg-inove .hdr__brand{ display:block; flex:none }
.pg-inove .hdr__lockup{ width:144px }
.pg-inove .hdr__toggle{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; margin-right:-12px;
  background:transparent; border:0; color:var(--i-ink); cursor:pointer; padding:0;
}
.pg-inove .hdr__toggle .ico{ width:24px; height:24px }
/* REWORK T-8C: ícone WhatsApp compacto, sempre visível abaixo de 1200 px (Owner: OWNER_DECISION_WHATSAPP_HEADER.md).
   margin-left:auto absorve o espaço livre do hdr__bar (flex) e empurra este item + o hdr__toggle para a direita,
   mantendo espaçamento fixo (gap do container) entre os dois — sem sobrepor o logo nem o botão de menu. */
.pg-inove .hdr__wa-icon{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-left:auto;
  flex:none; color:var(--i-ink);
}
.pg-inove .hdr__wa-icon .ico{ width:24px; height:24px }
.pg-inove .hdr__toggle .ico--close, .pg-inove .hdr.is-open .hdr__toggle .ico--open{ display:none }
.pg-inove .hdr.is-open .hdr__toggle .ico--close{ display:inline-block }

/* painel móvel: branco, sob o cabeçalho, sem master */
.pg-inove .hdr__panel{
  display:none; position:absolute; top:100%; left:0; right:0; height:calc(100vh - var(--i-hdr-h));
  overflow-y:auto; background:var(--i-white); border-top:1px solid var(--i-line);
  padding:8px var(--i-gutter) 32px;
}
.pg-inove .hdr.is-open .hdr__panel{ display:block }
.pg-inove .hdr__link{
  display:flex; align-items:center; min-height:56px; border-bottom:1px solid var(--i-line);
  font-size:20px; line-height:28px; font-weight:500; text-decoration:none; color:var(--i-ink);
}
.pg-inove .hdr__link[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px }
.pg-inove .hdr__wa{ display:flex; width:100%; margin-top:24px }
.pg-inove .hdr__social{ display:flex; gap:8px; margin-top:16px }
.pg-inove .hdr__soc{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--i-ink) }
.pg-inove .hdr__soc .ico{ width:24px; height:24px }

/* EP-3: 4 itens + CTA só cabem numa linha a partir de 1200 px (a 1024 os rótulos quebravam); abaixo disso, painel. */
.pg-inove .hdr__link, .pg-inove .hdr__wa{ white-space:nowrap }
@media (min-width:1024px){ .pg-inove .hdr__lockup{ width:168px } }
@media (min-width:1200px){
  .pg-inove .hdr__toggle{ display:none }
  .pg-inove .hdr__wa-icon{ display:none }
  .pg-inove .hdr__panel{
    display:flex; align-items:center; gap:32px; position:static; height:auto; overflow:visible;
    padding:0; border:0; background:transparent;
  }
  .pg-inove .hdr__list{ display:flex; gap:28px }
  .pg-inove .hdr__link{ min-height:44px; border:0; font-size:16px; line-height:24px }
  .pg-inove .hdr__link:hover{ text-decoration:underline; text-underline-offset:6px }
  .pg-inove .hdr__wa{ display:inline-flex; width:auto; margin:0; padding:0 20px }
  .pg-inove .hdr__social{ display:none }
}

/* -------------------------------------------------------------------- hero (DD §5.2) */
/* EP-1: site.css (legado) define .hero__media como grade centrada com aspect-ratio 16/6, borda e margin-bottom:-40px, e
   .hero com padding-top 64px e grade de fundo — o <picture> ficava centrado com altura natural e não cobria o hero.
   Aqui o invólucro é neutralizado e o <picture> ocupa o hero inteiro (inset 0, object-fit cover). */
.pg-inove .hero{ position:relative; display:flex; align-items:center; min-height:520px; padding:0; color:var(--i-white); background:var(--i-ink); isolation:isolate }
.pg-inove .hero__media{ position:absolute; inset:0; z-index:-1; display:block; overflow:hidden; aspect-ratio:auto; margin:0; border:0; background:var(--i-ink); max-width:none }
.pg-inove .hero__media picture{ position:absolute; inset:0; display:block }
/* véu grafite da esquerda para a direita: forte atrás da coluna de texto, leve à direita (DD §3) */
/* SITE-PROD-01D T-3 (CREATIVE_DIRECTION §2 item 1, "Indústria à noite"): < 1024 px o texto fica centrado na altura do
   hero, então o véu vertical começa em .72 (piso de contraste do próprio §2: texto branco só sobre ≥ .72 de grafite),
   não em .55 — desvio declarado; só grafite, sem sombra de texto. */
.pg-inove .hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,26,31,.72) 0%, rgba(20,26,31,.82) 45%, rgba(20,26,31,.90) 100%) }
.pg-inove .hero__img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:62% 60% }
.pg-inove .hero__credit{
  position:absolute; right:0; bottom:0; z-index:1; margin:0; padding:4px 10px;
  background:var(--i-ink); color:var(--i-concrete); font-size:12px; line-height:16px;
}
.pg-inove .hero__inner{ padding-top:64px; padding-bottom:72px }
.pg-inove .hero__h1{ font-size:clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem); line-height:1.2; max-width:18ch; color:var(--i-white) }
.pg-inove .hero__lead{ margin-top:20px; max-width:40rem; font-size:18px; line-height:28px; color:var(--i-concrete) }
.pg-inove .hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
@media (max-width:479px){ .pg-inove .hero__ctas .btn{ width:100% } }
@media (min-width:768px){
  .pg-inove .hero{ min-height:560px }
  .pg-inove .hero__lead{ font-size:20px; line-height:30px }
}
@media (min-width:1024px){
  .pg-inove .hero{ min-height:max(600px, calc(82vh - var(--i-hdr-h))) }
  /* SITE-PROD-01D T-3 (CREATIVE_DIRECTION §2 item 1): .86 → .74 → .30, só grafite. A parada .74 fica no FIM da coluna
     de texto (borda esquerda do .wrap + gutter + 40rem do lead + 24px), não em 45% fixos: a 1024 px o texto vai até
     ≈ 69% da largura e uma parada a 45% deixaria o fim do lead sobre < .72 (piso do §2). A 1440 a parada cai em ≈ 54%
     e a cena (chaminés ao centro-direita) abre para .30. */
  .pg-inove .hero__media::after{ background:linear-gradient(90deg, rgba(20,26,31,.86) 0%, rgba(20,26,31,.74) calc(max(0px, (100% - 1200px - 2 * var(--i-gutter)) / 2) + var(--i-gutter) + 40rem + 24px), rgba(20,26,31,.30) 100%) }
  .pg-inove .hero__img{ object-position:60% 55% }   /* CREATIVE_DIRECTION §2 item 2: chaminés à direita da coluna de texto */
  .pg-inove .hero__inner{ padding-top:96px; padding-bottom:96px }
}

/* SITE-PROD-01D T-4D REWORK-OF #151 (OWNER_VISUAL_RECOVERY.md): one full-bleed hero shared by /tecnologia/,
   /construtora/, /empresa/, /contato/, reusing .hero/.hero__media/.hero__inner from the HOME hero grammar above
   (same height, same véu grafite, same h1/lead/CTA rules) — only the photo and copy are route-specific. Each
   route's photo is its own art-directed crop (not the home chimney shot), so object-position resets to center
   instead of the home-tuned 62%/60% → 60%/55%. */
.pg-inove .hero--int .hero__img{ object-position:50% 50% }
/* V-2 (OPERATOR_REWORK_T-4D_R2.md): /contato/'s swapped route is mirrored so the subject sits to the right of the
   copy column — desktop crop keeps the subject at ~70% from the left (matches the desktop gradient's text-safe
   zone, which clears by 66%); mobile crop is already art-directed centred, so no override below 768. */
@media (min-width:768px){
  .pg-inove .hero--int-contato .hero__img{ object-position:70% 50% }
}
/* SITE-PROD-01D T-4F F-1 (OPERATOR_STAGED.md "SWAP 2"): /construtora/'s hero is now px5-heronight-01 (industrial
   process plant facade at dusk, not mirrored — no PPE subject to keep right of the copy). The lit boiler/tank core
   sits left-of-centre in the 16:9 crop; nudge it right of the text column so the brightest structure reads clear
   of the gradient's text-safe zone (clears by 66% at this width), without pushing the frame edge into view. */
@media (min-width:768px){
  .pg-inove .hero--int-construtora .hero__img{ object-position:65% 60% }
}
/* SITE-PROD-01D T-4D rework cycle 2 (OPERATOR_REWORK_T-4D_R2.md V-1; VISUAL_FREEZE_REVIEW_BRAND.md F-1/F-2): the
   4 internal heroes no longer inherit the HOME véu (mobile .72→.90 vertical = a uniform dark veil under ~85% of
   the hero height; desktop stops at .30, matching HOME exactly). Route-scoped modifier, higher specificity than
   .hero__media::after above so it wins at every width regardless of source order: mobile keeps the lower ~45% of
   the hero (where the text sits) on a graduated ramp that still shows texture, desktop opens up earlier (.28 at
   50%, clear by 66%) so more of the photo reads. */
/* SITE-PROD-01D T-4E (OPERATOR_TASK_T-4E.md M-1/M-2, < 768 only; desktop rule below is the T-4D rev 3 accepted
   state, untouched): T-4D's mobile text block was vertically centered (.hero{align-items:center}, inherited from
   HOME), which put /construtora/'s title over the engineer's face and /empresa/ + /tecnologia/'s lead over the
   bright upper photo (Owner §13 — never over faces/helmets/focal points; weak contrast). The veil below is
   retuned so its ≥.60 band starts earlier (42% instead of 55%) to cover the bottom-anchored text block (see the
   .hero--int layout override further down) at every in-scope width (360/390/430), including /contato/'s longer
   lead-dominant text — MEASURED against the tallest text block (empresa ≈313px, contato ≈354px) against a
   640–660px hero so the title+lead+CTA stay inside the ≥.60 zone while the photo subject reads clearly above it. */
.pg-inove .hero--int .hero__media::after{ background:linear-gradient(180deg, rgba(20,26,31,0) 0%, rgba(20,26,31,.14) 22%, rgba(20,26,31,.60) 42%, rgba(20,26,31,.87) 68%, rgba(20,26,31,.94) 100%) }
@media (min-width:768px){
  .pg-inove .hero--int .hero__media::after{ background:linear-gradient(90deg, rgba(20,26,31,.88) 0%, rgba(20,26,31,.70) 30%, rgba(20,26,31,.28) 50%, rgba(20,26,31,0) 66%) }
}
/* SITE-PROD-01D T-4G (OPERATOR_TASK_T-4G.md C-1; brand-guardian VISUAL_FREEZE_REVIEW_BRAND_R3 BLOCKER): /contato/'s
   mobile veil shared the T-4E .hero--int ramp above (.60 at 42%, near-opaque by 68%), which the operator measured
   as leaving the workers+machinery scene only ~35% legible on this route's photo. Route-scoped, mobile-only
   (<768) override, placed after the shared rule so it wins at equal specificity (2 classes + pseudo-element):
   stays <=.20 through the upper ~55% of the frame (workers + machinery stay visible) and only reaches ~.88-.92
   behind the bottom-anchored text block (title eyebrow + lead headline + CTA). Desktop (>=768) keeps the T-4D
   rev 3 accepted side-veil (.hero--int rule above), untouched. */
@media (max-width:767px){
  .pg-inove .hero--int-contato .hero__media::after{ background:linear-gradient(180deg, rgba(20,26,31,0) 0%, rgba(20,26,31,.12) 45%, rgba(20,26,31,.62) 66%, rgba(20,26,31,.88) 82%, rgba(20,26,31,.92) 100%) }
}
/* SITE-PROD-01D T-4E (M-1/M-2, < 768 only): anchor the hero--int text block to the bottom of the hero (flex
   cross-axis flush to the end — .hero's only in-flow child is .hero__inner, .hero__media is position:absolute) so
   title + lead + CTA sit in the lower ~45–55% where the retuned véu above is ≥.60, leaving the photo subject clear
   in the upper half (M-3: the per-route mobile crops are already art-directed centred — OPERATOR_STAGED.md — so
   object-position:50% 50% from the block above keeps faces/helmets there without an extra override). min-height
   650px sits inside Owner §13's 560–680px band. This block is scoped to max-width:767px only; ≥768 keeps the
   T-4D rev 3 center-aligned, side-veil accepted layout untouched. */
@media (max-width:767px){
  .pg-inove .hero--int{ min-height:650px; align-items:flex-end }
  .pg-inove .hero--int .hero__inner{ padding-top:0; padding-bottom:32px }
}
/* /contato/ (Owner §8: title line = the existing approved lead "Fale com quem executa."): lead-dominant swap —
   h1 becomes a small eyebrow label, lead becomes the large headline (same approved copy, no new text), matching
   the .phd--p9 lead-dominant treatment it replaces. */
.pg-inove .hero--int-lead .hero__h1{ font-size:14px; line-height:20px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; max-width:none; color:var(--i-concrete) }
.pg-inove .hero--int-lead .hero__lead{ margin-top:12px; font-size:clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height:1.25; font-weight:600; max-width:28ch; color:var(--i-white) }

/* ACT 3 (Owner §10): the real-INOVE proof photos that used to live inside the panel's small inset thumbnail now
   sit visible in their own strip right below the hero, same captions/alt verbatim. Responsive grid; 2-col under
   768 (figures stay legible at mobile widths), 3-col from 768 up (matches the largest strip, /empresa/'s 3
   photos; 1-2 photo routes just leave the remaining column empty rather than stretch). */
.pg-inove .proof-row{ padding-top:40px; padding-bottom:40px }
.pg-inove .proof-row__list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; list-style:none; padding:0; margin:0 }
.pg-inove .proof-row__item{ margin:0 }
.pg-inove .proof-row__fig{ margin:0 }
.pg-inove .proof-row__img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border:1px solid var(--i-line) }
@media (min-width:768px){
  .pg-inove .proof-row__list{ grid-template-columns:repeat(3, 1fr); gap:20px }
}
/* SITE-PROD-01E T-3 A2/A3 (CORRECTION_DIRECTION §2/§3): /construtora/ pair (2 real photos, 3:2, 2 x 50% up to
   1023, 2 x 520 px left-aligned with 24 px gap >= 1024) and /contato/ duo (editorial left + real right, 3:2,
   2 x 50% < 768, each <= 420 px >= 768). Grid-level modifiers only; no new primitive. */
.pg-inove .proof-row__list--pair .proof-row__img,
.pg-inove .proof-row__list--duo .proof-row__img{ aspect-ratio:3 / 2 }
.pg-inove .proof-row__item--ed .proof-row__img{ object-position:40% 45% }
@media (min-width:768px){
  .pg-inove .proof-row__list--pair{ grid-template-columns:repeat(2, 1fr); gap:24px }
  .pg-inove .proof-row__list--duo{ grid-template-columns:repeat(2, minmax(0, 420px)); gap:24px }
}
@media (min-width:1024px){
  .pg-inove .proof-row__list--pair{ grid-template-columns:repeat(2, minmax(0, 520px)) }
}
/* SITE-PROD-01E T-3 B1 (CORRECTION_DIRECTION §5): rack-corridor hero keeps the overhead trays in frame. */
@media (min-width:768px){
  .pg-inove .hero--int-tecnologia .hero__img{ object-position:50% 30% }
}

/* ---------------------------------------------------------------- seções (DD §4, §5.3) */
.pg-inove .sec{ padding-block:var(--i-pad) }
.pg-inove .sec--white{ background:var(--i-white) }
.pg-inove .sec--concrete{ background:var(--i-concrete) }
.pg-inove .sec__label{ display:flex; align-items:baseline; gap:8px; font-size:14px; line-height:20px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--i-ink) }
.pg-inove .sec__h2{ margin-top:12px; font-size:28px; line-height:34px; max-width:24ch }
.pg-inove .sec__lead{ margin-top:16px; max-width:46rem; font-size:18px; line-height:28px; color:var(--i-ink) }
@media (min-width:768px){ .pg-inove .sec__h2{ font-size:32px; line-height:40px } }
@media (min-width:1024px){
  .pg-inove .sec__h2{ font-size:36px; line-height:44px }
  .pg-inove .sec__lead{ font-size:20px; line-height:30px }
}

/* Duas frentes */
.pg-inove .fronts{ display:grid; gap:40px; margin-top:40px }
.pg-inove .front{ display:flex; flex-direction:column; border:1px solid var(--i-line); background:var(--i-white) }
.pg-inove .front__fig{ margin:0 }
.pg-inove .front__img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover }
.pg-inove .front__credit{ padding:6px 16px 0; font-size:13px; line-height:18px; color:var(--i-gray) }
/* SITE-PROD-01E T-3 A1 (CORRECTION_DIRECTION §1): editorial image (16:9, full card width, alt="", no caption)
   dominant on top; the real proof below at 50% card width with its caption (beside it >= 768, below < 768). */
.pg-inove .front__ed{ margin:0 }
.pg-inove .front__ed-img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover }
.pg-inove .front:nth-child(1) .front__ed-img{ object-position:45% 60% }
.pg-inove .front:nth-child(2) .front__ed-img{ object-position:70% 40% }
.pg-inove .front__fig--proof{ padding:16px 16px 0 }
.pg-inove .front__fig--proof > picture{ display:block; width:50% }
.pg-inove .front__fig--proof .front__img{ width:100% }
.pg-inove .front__fig--proof .front__credit{ padding:6px 0 0; font-size:12px; line-height:16px }
@media (min-width:768px){
  .pg-inove .front__fig--proof{ display:flex; align-items:flex-end; gap:16px; padding:20px 20px 0 }
  .pg-inove .front__fig--proof > picture{ flex:0 0 50%; width:auto }
  .pg-inove .front__fig--proof .front__credit{ flex:1; padding:0; font-size:13px; line-height:18px }
}
.pg-inove .front__body{ display:flex; flex-direction:column; gap:12px; padding:16px 20px 24px; flex:1 }
.pg-inove .front__h3{ font-size:20px; line-height:26px }
.pg-inove .front__text{ flex:1 }
.pg-inove .front__link{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; min-height:44px; font-weight:500; text-decoration:underline; text-underline-offset:4px }
@media (min-width:768px){ .pg-inove .fronts{ grid-template-columns:1fr 1fr; gap:24px } }
@media (min-width:1024px){
  .pg-inove .fronts{ gap:32px; margin-top:56px }
  .pg-inove .front__h3{ font-size:22px; line-height:28px }
  .pg-inove .front__body{ padding:20px 28px 28px }
}

/* Ambientes */
.pg-inove .envs{ display:grid; gap:12px; margin-top:32px }
.pg-inove .env{ background:var(--i-white); border:1px solid var(--i-line) }
.pg-inove .env__fig{ margin:0; overflow:hidden; background:var(--i-ink) }
.pg-inove .env__img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover }
/* SITE-PROD-01D T-4 rework (REWORK-OF #70 F-2): var(--i-concrete)=#E9ECEF (o próprio tom de fundo claro das
   seções) era usado como cor de texto sobre .env branco (#FFFFFF) — contraste ~1.2:1, abaixo de 4.5:1
   (WCAG 1.4.3 AA). var(--i-gray)=#6B7280 sobre branco mede ~4.84:1 e é a mesma família de cinza já usada nas
   outras legendas de foto real que passam em contraste (.front__credit, .phd__credit, .blk__credit). */
.pg-inove .env__credit{ margin:0; font-size:11px; line-height:14px; color:var(--i-gray) }
.pg-inove .env__ico{ width:24px; height:24px }
.pg-inove .env__t{ font-size:20px; line-height:26px; font-weight:700 }
/* SITE-PROD-01B T-4 rev 2 (COPY_PACK_ADDENDUM CG-5): linha factual abaixo do rótulo; ícone+rótulo seguem na 1ª linha */
.pg-inove .env__d{ margin:0; color:var(--i-ink) }
/* SITE-PROD-01D T-4 (OPERATOR_NOTE_T-4_MIDWAY M-1 + CREATIVE_DIRECTION §3 P-4): < 768 forma compacta — miniatura
   88 px, ícone+título ao lado, descrição abaixo, legenda de prova sob o texto (nunca sobre a miniatura, onde ficava
   ilegível). >= 768 forma P-4: imagem 3:2 no topo em toda a largura do cartão, depois ícone + título + descrição. */
@media (max-width:767px){
  .pg-inove .env{ display:grid; grid-template-columns:88px auto 1fr; column-gap:12px; row-gap:6px; align-items:center; min-height:72px; padding:16px 20px }
  .pg-inove .env__fig{ display:contents }
  .pg-inove .env__fig picture{ display:block; grid-column:1; grid-row:1 }
  .pg-inove .env__credit{ grid-column:1 / -1; grid-row:3 }
  .pg-inove .env__ico{ grid-column:2; grid-row:1 }
  .pg-inove .env__t{ grid-column:3; grid-row:1 }
  .pg-inove .env__d{ grid-column:1 / -1; grid-row:2 }
}
@media (min-width:768px){
  .pg-inove .envs{ grid-template-columns:repeat(3, 1fr); gap:24px }
  .pg-inove .env{ display:grid; grid-template-columns:24px 1fr; grid-template-rows:auto auto auto auto; column-gap:12px; row-gap:8px; padding:20px }
  .pg-inove .env__fig{ display:contents }
  .pg-inove .env__fig picture{ display:block; grid-column:1 / -1; grid-row:1 }
  .pg-inove .env__credit{ grid-column:1 / -1; grid-row:2 }
  .pg-inove .env__ico{ grid-column:1; grid-row:3; align-self:start }
  .pg-inove .env__t{ grid-column:2; grid-row:3; align-self:start }
  .pg-inove .env__d{ grid-column:1 / -1; grid-row:4; margin-top:4px }
}
@media (min-width:1024px){ .pg-inove .envs{ margin-top:48px } .pg-inove .env{ padding:28px } .pg-inove .env__t{ font-size:22px; line-height:28px } }

/* Cases em destaque (DD §7.3): cards tipográficos, sem link */
.pg-inove .cases{ display:grid; gap:16px; margin-top:32px }
.pg-inove .case{ padding:24px; background:var(--i-white); border:1px solid var(--i-line) }
.pg-inove .case__fig{ margin:-24px -24px 16px; overflow:hidden; background:var(--i-ink) }
.pg-inove .case__img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover }
.pg-inove .case__sector{ font-size:14px; line-height:20px; font-weight:500; color:var(--i-gray) }
.pg-inove .case__h3{ margin-top:8px; font-size:20px; line-height:28px }
.pg-inove .case__p{ margin-top:12px; color:var(--i-ink) } /* SITE-PROD-01B COPY_PACK §8: introdução de card (corpo herdado de .pg-inove) */
@media (min-width:768px){ .pg-inove .cases{ grid-template-columns:1fr 1fr; gap:24px } }
@media (min-width:1024px){ .pg-inove .cases{ grid-template-columns:repeat(3, 1fr); margin-top:48px } }

/* Como executamos (DD §5.2). SITE-PROD-01B DESIGN_DELTA_SPEC §2: numeral decorativo removido; a ordem de leitura fica no <ol>. */
.pg-inove .steps{ display:grid; gap:32px; margin:32px 0 0; padding:0; list-style:none }
.pg-inove .step__h3{ margin-top:0; font-size:20px; line-height:28px }
/* RW-6: descrição da etapa é texto de corpo — herda 16/17/18 px do .pg-inove e fica em grafite (site.css › .steps p
   aplicava .93rem e --texto-2 cinza). */
.pg-inove .step__p{ margin-top:8px; font-size:inherit; line-height:inherit; color:var(--i-ink) }
@media (min-width:1024px){ .pg-inove .steps{ grid-template-columns:repeat(3, 1fr); gap:40px; margin-top:48px } }

/* Faixa CTA final (DD §3, §7.2): grafite, filete --c-red-on-dark, botão branco */
.pg-inove .ctab{ background:var(--i-ink); color:var(--i-white); padding-block:var(--i-pad) }
.pg-inove .ctab :focus-visible{ outline-color:var(--i-white) }
.pg-inove .ctab__h2{ font-size:28px; line-height:34px; color:var(--i-white); max-width:24ch }
.pg-inove .ctab__h2::before{ content:""; display:block; width:32px; height:3px; margin-bottom:16px; background:#E84A50 }
.pg-inove .ctab__lead{ margin-top:16px; max-width:40rem; font-size:18px; line-height:28px; color:var(--i-concrete) }
.pg-inove .ctab__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.pg-inove .btn--white{ background:var(--i-white); border-color:var(--i-white); color:var(--i-ink) }
.pg-inove .btn--white:hover{ background:var(--i-concrete); border-color:var(--i-concrete) }
@media (max-width:479px){ .pg-inove .ctab__ctas .btn{ width:100% } }
@media (min-width:1024px){ .pg-inove .ctab__h2{ font-size:36px; line-height:44px } .pg-inove .ctab__lead{ font-size:20px; line-height:30px } }

/* Páginas internas (DD §5.4): cabeçalho de página + blocos */
.pg-inove .phd{ background:var(--i-concrete); padding-block:48px }
.pg-inove .phd__h1{ font-size:clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height:1.2; max-width:22ch }
.pg-inove .phd .sec__label{ margin-bottom:12px } /* rótulo acima do H1 (404, privacidade): sem colisão com a caixa de glifos do H1 */
.pg-inove .phd__lead{ margin-top:16px; max-width:44rem; font-size:18px; line-height:28px }
@media (min-width:1024px){ .pg-inove .phd{ padding-block:80px } .pg-inove .phd__lead{ font-size:20px; line-height:30px } }
/* RW-2: painel fotográfico de abertura (DD §7.1): empilhado 16:9 abaixo de 1024 px; 7/12 texto + 5/12 foto 3:2 acima. */
.pg-inove .phd__fig{ margin:32px 0 0 }
.pg-inove .phd__img{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; object-position:50% 30% }
.pg-inove .phd__credit{ padding-top:6px; font-size:13px; line-height:18px; color:#4B5563 }
@media (min-width:1024px){
  .pg-inove .phd__grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:center }
  .pg-inove .phd__text{ grid-column:1 / span 7 }
  .pg-inove .phd__fig{ grid-column:8 / span 5; margin:0 }
  .pg-inove .phd__img{ aspect-ratio:3 / 2; object-position:50% 50% }
}

/* SITE-PROD-01D T-4C Phase A (OWNER_FIRST_VIEWPORT_REWORK.md; FIRST_VIEWPORT_OPENERS.md §1 pattern P-9): abertura
   de /construtora/ e /tecnologia/ — imagem primária + inset de prova, em vez do painel de uma foto só (.phd--media
   acima, que fica intocado para qualquer rota futura que ainda o use). Só tokens/grades já existentes (--i-gutter,
   .wrap 1200px, degradê já aprovado CD:121). Mobile-first: <1024 banda cheia com H1+lead sobre o degradê (texto
   nunca escondido antes do scroll — OWNER:55); >=1024 coluna 44/56 sem overlay (0%), legenda visível, inset em
   cartão sobreposto ao canto inferior-esquerdo da imagem primária (nunca >25% dela, OWNER §1). */
.pg-inove .phd--p9{ padding-block:0 }
.pg-inove .phd--p9 .phd__grid{ position:relative }
.pg-inove .phd--p9 .wrap.phd__grid{ padding-inline:0 }
.pg-inove .phd--p9 .phd__media{ position:relative; overflow:hidden; background:var(--i-ink) }
.pg-inove .phd--p9 .phd__fig{ margin:0 }
.pg-inove .phd--p9 .phd__fig--primary{ position:relative; min-height:clamp(320px, 46vh, 420px) }
.pg-inove .phd--p9 .phd__fig--primary .phd__img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50% }
.pg-inove .phd--p9 .phd__fig--primary::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,26,31,0) 35%, rgba(20,26,31,.86) 70%, rgba(20,26,31,.92) 100%) }
.pg-inove .phd--p9 .phd__fig--primary .phd__credit{ display:none }
.pg-inove .phd--p9 .phd__fig--inset{ position:absolute; top:12px; right:12px; width:72px; height:72px; border:2px solid var(--i-white); box-shadow:0 2px 8px rgba(20,26,31,.45); overflow:hidden; background:var(--i-ink); z-index:2 }
.pg-inove .phd--p9 .phd__fig--inset .phd__img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50% }
.pg-inove .phd--p9 .phd__fig--inset .phd__credit{ display:none }
/* Fixed per-image focal points (CSP style-src 'self' forbids inline style=; IDENT-1 gate, MEASURED). */
.pg-inove .phd--p9 .phd__fig--focal-tec-primary .phd__img{ object-position:50% 35% }
.pg-inove .phd--p9 .phd__fig--focal-tec-inset .phd__img{ object-position:55% 50% }
.pg-inove .phd--p9 .phd__fig--focal-con-primary .phd__img{ object-position:50% 45% }
.pg-inove .phd--p9 .phd__text{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0 var(--i-gutter) 24px; color:var(--i-white) }
.pg-inove .phd--p9 .phd__text .phd__h1,
.pg-inove .phd--p9 .phd__text .phd__lead{ color:var(--i-white) }
/* T-4C R1 rework (D-3, OPERATOR_REWORK_T-4C_R1.md): /contato/'s "Fale com quem executa." must be the dominant
   (H1-weight) line at EVERY width, not only >=1024 — the previous rule lived only inside the >=1024 media query
   below, so <1024 still rendered "Contato" large and the lead small. Moved to the unconditional (mobile-first)
   scope; CSS only, no copy reopened, same two strings as before. */
.pg-inove .phd--p9 .phd__text--lead-dominant .phd__h1{ font-size:14px; line-height:20px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; max-width:none }
.pg-inove .phd--p9 .phd__text--lead-dominant .phd__lead{ margin-top:12px; font-size:clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height:1.25; font-weight:600; max-width:28ch }
/* SITE-PROD-01D T-4C Phase B (OWNER_FIRST_VIEWPORT_REWORK.md rollout): panel chips/proofs/CTA exist in every P-9
   route's markup from < 1024, but the compact full-bleed banner has no room for them there (text itself is only
   shown over the image gradient); they appear only once the panel becomes its own graphite column, >= 1024. */
.pg-inove .phd--p9 .phd__caps,
.pg-inove .phd--p9 .phd__proofs,
.pg-inove .phd--p9 .phd__cta{ display:none }
@media (min-width:768px) and (max-width:1023px){
  .pg-inove .phd--p9 .wrap.phd__grid{ padding-inline:var(--i-gutter) }
  .pg-inove .phd--p9 .phd__fig--primary{ min-height:0; aspect-ratio:16 / 9 }
}
/* SITE-PROD-01D T-4C rev 2 (OPERATOR_REWORK_T-4C_R2.md F-1/F-2, cycle 2 LAST): on /empresa/ and /construtora/
   only (.phd--p9-fv2, set by build.js only for those two keys — /tecnologia/ and /contato/ keep the hide rule
   above byte-identical), < 1024 the CTA (and, on empresa, the 3-up real-proof strip) must be visible inside the
   first viewport at 768/430/390/360 (FV_FINAL_REVIEW_UX.md §17 F-1/F-2). The <1024 text-over-photo overlay above
   has no room for them, so the opener becomes photo band (capped ≈16:9, ≤ ~38% of the viewport height) → text
   → CTA/proof-strip in normal flow instead, same images/alt/captions/CTA labels, no new copy (§'s own "composition
   only" instruction). Higher specificity than `.phd--p9 .phd__caps/.phd__proofs/.phd__cta{ display:none }` above
   (.phd--p9.phd--p9-fv2 beats .phd--p9) wins without editing that rule. */
@media (max-width:1023px){
  .pg-inove .phd--p9.phd--p9-fv2 .phd__fig--primary{ min-height:0; height:34vh; max-height:260px; aspect-ratio:auto }
  /* Text no longer overlays the photo (it moves to normal flow below), so the heavy bottom-darken gradient built
     for white overlay text is replaced by a light frame vignette — same token, no new color. */
  .pg-inove .phd--p9.phd--p9-fv2 .phd__fig--primary::after{ background:linear-gradient(180deg, rgba(20,26,31,0) 72%, rgba(20,26,31,.28) 100%) }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__text{
    position:static; display:flex; flex-direction:column; padding:20px var(--i-gutter) 28px;
    background:var(--i-white); color:var(--i-ink);
  }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__text .phd__h1,
  .pg-inove .phd--p9.phd--p9-fv2 .phd__text .phd__lead{ color:var(--i-ink) }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__h1{ margin-top:0 }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__lead{ margin-top:8px }
  /* Compact rhythm (margins/line-height only, same copy): CTA directly under the paragraph on both routes; on
     empresa the proof strip sits between lead and CTA (DOM order already lead→proofs→cta, so the `order` tie
     with cta below resolves to that sequence); on construtora the chips move after the CTA instead of before it
     (OPERATOR_REWORK_T-4C_R2.md F-2 "CTA ahead of the 4 capability chips") via `order`, without changing DOM/tab
     order at >=1024 (this whole block is <1024-scoped, so the unconditional/>=1024 flex layout is untouched). */
  .pg-inove .phd--p9.phd--p9-fv2 .phd__caps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; order:4 }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__cap{ display:inline-flex; padding:6px 12px; border:1px solid var(--i-line); border-radius:999px; font-size:12px; line-height:16px; color:var(--i-ink) }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__cap:hover{ border-color:var(--i-ink); background:var(--i-concrete) }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__proofs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:16px; order:3 }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__proof{ margin:0 }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__proof-img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border:1px solid var(--i-line) }
  .pg-inove .phd--p9.phd--p9-fv2 .phd__cta{ display:block; margin-top:16px; order:3 }
}
/* SITE-PROD-01D T-4C Phase B (OWNER_FIRST_VIEWPORT_REWORK.md >=1024 rework, OPERATOR_FV_PILOT_RESULT.md FIX-1,
   piloted on tecnologia/construtora first and reviewed before the empresa/contato rollout): the panel becomes a
   filled graphite column (.phd__text, 38/62 split, no column-gap — .wrap's own left gutter is the panel's only
   inset) and the primary image breaks .wrap's max-width to reach the viewport's right edge (the section itself
   already spans full width; removing .wrap's max-width/right padding here is enough — no negative-margin hack).
   Overlay drops from the <1024 full-height gradient to a small bottom scrim that only keeps the (optional)
   caption legible; the inset proof card is unchanged (bottom-left corner bleed, OWNER §1, never >25% of the
   primary). */
@media (min-width:1024px){
  .pg-inove .phd--p9{ padding-block:0 }
  .pg-inove .phd--p9 .wrap.phd__grid{ padding-inline:var(--i-gutter) 0; max-width:none; display:grid; grid-template-columns:minmax(0, 38fr) minmax(0, 62fr); column-gap:0; align-items:stretch; position:static }
  /* T-4C R1 rework (D-1, OPERATOR_REWORK_T-4C_R1.md): CSS Grid auto-placement (sparse packing) advances the row
     cursor past column 1 once .phd__media (DOM-first, explicit grid-column:2) is placed in row 1 — the next item,
     .phd__text (explicit grid-column:1, column-start BEFORE the cursor), is then pushed to a new row by the spec's
     own cursor rule, producing the measured "panel in a second row" bug even though both columns were already
     correctly 38/62. grid-row:1 on both items removes the ambiguity the auto-placement cursor was resolving. */
  .pg-inove .phd--p9 .phd__text{ position:static; grid-column:1; grid-row:1; display:flex; flex-direction:column; justify-content:center; padding:64px calc(var(--i-gutter) * 1.5) 64px 0; background:var(--i-ink); color:var(--i-white) }
  .pg-inove .phd--p9 .phd__text .phd__h1,
  .pg-inove .phd--p9 .phd__text .phd__lead{ color:var(--i-white) }
  .pg-inove .phd--p9 .phd__media{ grid-column:2; grid-row:1; overflow:visible }
  .pg-inove .phd--p9 .phd__fig--primary{ position:relative; height:100%; min-height:clamp(460px, 64vh, 640px); aspect-ratio:auto }
  .pg-inove .phd--p9 .phd__fig--primary .phd__img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover }
  /* 0% overlay except a small bottom scrim (OWNER §1 "0% overlay, legenda visível") — only needed so the credit
     (when the slot has one) stays legible over a photo; harmless where a slot has no caption (empresa/construtora
     primary). */
  .pg-inove .phd--p9 .phd__fig--primary::after{ content:""; position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(180deg, rgba(20,26,31,0) 0%, rgba(20,26,31,.78) 100%) }
  .pg-inove .phd--p9 .phd__fig--primary .phd__credit{ display:block; position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 24px; color:var(--i-white) }
  /* layout-check text-collision/text-occluded (T-4C self-check, MEASURED): when the primary HAS a caption (tecnologia)
     AND an inset proof card is present, the inset's own bottom-left corner bleed (below) sits over the same bottom
     band as the full-width primary caption bar. Push the caption text clear of the inset's footprint (180px max-width
     + gutter) instead of touching the inset's position/bleed (OWNER §1 "bottom-left corner bleed" is unchanged). */
  .pg-inove .phd--p9 .phd__media:has(.phd__fig--inset) .phd__fig--primary .phd__credit{ padding-left:204px }
  .pg-inove .phd--p9 .phd__fig--inset{
    top:auto; right:auto; left:-12px; bottom:-12px; width:34%; max-width:180px; height:auto;
    border:2px solid var(--i-white); background:var(--i-white); box-shadow:0 4px 16px rgba(20,26,31,.35);
    display:flex; flex-direction:column; z-index:3;
  }
  .pg-inove .phd--p9 .phd__fig--inset .phd__img{ position:static; flex:0 0 auto; width:100%; height:auto; aspect-ratio:1 / 1; min-height:0 }
  .pg-inove .phd--p9 .phd__fig--inset .phd__credit{ display:block; position:static; font-size:11px; line-height:14px; padding:4px 6px; color:var(--i-ink) }

  .pg-inove .phd--p9 .phd__caps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; list-style:none; padding:0 }
  .pg-inove .phd--p9 .phd__cap{ display:inline-flex; padding:6px 14px; border:1px solid rgba(255,255,255,.4); border-radius:999px; font-size:13px; line-height:18px; color:var(--i-white) }
  .pg-inove .phd--p9 .phd__cap:hover{ border-color:var(--i-white); background:rgba(255,255,255,.08) }

  .pg-inove .phd--p9 .phd__proofs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:24px; list-style:none; padding:0 }
  .pg-inove .phd--p9 .phd__proof{ margin:0 }
  .pg-inove .phd--p9 .phd__proof-img{ display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border:1px solid rgba(255,255,255,.25) }

  .pg-inove .phd--p9 .phd__cta{ display:block; margin-top:32px }
  /* T-4C R1 (D-3): .phd__text--lead-dominant rules moved to the unconditional scope above (apply at every width). */
}

.pg-inove .blk + .blk{ margin-top:40px }
.pg-inove .blk__h2{ font-size:24px; line-height:32px }
.pg-inove .blk__p{ margin-top:12px; max-width:46rem }
@media (min-width:1024px){ .pg-inove .blk__h2{ font-size:28px; line-height:36px } }
.pg-inove .blk__p--lg{ font-size:20px; line-height:30px; font-weight:500 }
.pg-inove .blk__list{ display:grid; gap:8px; margin-top:16px }
.pg-inove .blk__links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
@media (max-width:479px){ .pg-inove .blk__links li, .pg-inove .blk__links .btn{ width:100% } }

/* T4C-2 (MATERIAL DE OBRAS, §0a): imagem(ns) de bloco `.blk--media` — coluna 5/12 ao lado do texto (>=1024px, mesmo
   lado do painel de abertura .phd__fig, col 8/span 5); empilhada abaixo do texto em telas menores; par sempre lado a
   lado 50/50, em qualquer largura (§0a Cycle-2 mobile decision). */
.pg-inove .blk__media{ margin-top:24px }
.pg-inove .blk__media--pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.pg-inove .blk__fig{ margin:0 }
.pg-inove .blk__img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover }
.pg-inove .blk__credit{ padding-top:6px; font-size:13px; line-height:18px; color:#4B5563 }
@media (min-width:1024px){
  .pg-inove .blk--media{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:24px; align-items:start }
  .pg-inove .blk--media .blk__text{ grid-column:1 / span 7 }
  .pg-inove .blk--media .blk__media{ grid-column:8 / span 5; margin-top:0 }
}

/* SITE-PROD-01D T-3 retrabalho — P-3R "painel de contexto + faixa de prova" (CREATIVE_DIRECTION rev 3 §3, §5).
   Só tokens existentes: grafite --i-ink (rgba 20,26,31), branco, filete #E84A50 (o mesmo da faixa CTA .ctab__h2).
   >= 1024: imagem 8/12 + painel grafite 4/12, sem vão; a linha da grade estica e imagem e painel terminam na mesma
   base (a imagem é absoluta dentro de uma caixa com piso 16:9, então cresce com o painel e nunca deixa campo claro).
   768–1023: coluna única, título + corpo sobre a metade inferior da imagem (degradê grafite).
   < 768: faixa 16:9 de borda a borda com n + título sobre o terço inferior; corpo logo abaixo no fluxo normal.
   Desvio declarado (§3 "raise the stop, never add a text shadow"): os degradês sobem as paradas para que todo pixel
   sob texto tenha ≥ .58 de grafite (piso 4,5:1 para texto branco sobre pixel branco) — medido nas capturas. */
.pg-inove .blk.p3r{ margin-top:56px }
.pg-inove .blk.p3r:first-child{ margin-top:0 }
/* SITE-PROD-01D T-4 (OPERATOR_NOTE_T-4_MIDWAY M-2, CREATIVE_DIRECTION §5 fallback): < 768 reduz o espaçamento
   entre blocos e a faixa de contexto vira 21:9 (em vez de 16:9) para conter o crescimento da página. */
@media (max-width:767px){
  .pg-inove .blk.p3r{ margin-top:40px }
}
.pg-inove .p3r__row{ display:grid; grid-template-columns:minmax(0, 1fr) }
.pg-inove .p3r__media{ position:relative; grid-area:1 / 1; align-self:stretch; overflow:hidden; background:var(--i-ink) }
.pg-inove .p3r__media::before{ content:""; display:block; padding-top:56.25% }   /* piso 16:9 */
.pg-inove .p3r__media picture{ position:absolute; inset:0; display:block }
.pg-inove .p3r__img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50% }
.pg-inove .p3r--focal-low .p3r__img{ object-position:50% 65% }   /* ctx-monitoramento: mesas e painéis de parede, teto aparado */
.pg-inove .p3r__media::after{ content:""; position:absolute; inset:0 }
.pg-inove .p3r__n{ display:flex; align-items:center; gap:10px; font-size:14px; line-height:20px; font-weight:500; letter-spacing:.06em; color:var(--i-white) }
.pg-inove .p3r__n::before{ content:""; display:block; width:24px; height:3px; background:#E84A50 }
.pg-inove .p3r__h2{ margin-top:8px; color:var(--i-white) }
.pg-inove .p3r__proof{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:16px }
.pg-inove .p3r__proof .blk__fig{ margin:0 }
.pg-inove .p3r__proof .blk__credit{ margin-top:6px; padding:0 0 0 8px; border-left:var(--inove-traco, 2px) solid var(--i-red) }   /* P-8: só em foto real INOVE */
@media (max-width:767px){
  .pg-inove .p3r__row{ margin-inline:calc(-1 * var(--i-gutter)) }
  .pg-inove .p3r__media::before{ padding-top:42.857% }   /* fallback §5: 21:9 em vez de 16:9 para conter a altura mobile */
  .pg-inove .p3r__media::after{ background:linear-gradient(180deg, rgba(20,26,31,.10) 0%, rgba(20,26,31,.62) 40%, rgba(20,26,31,.88) 68%, rgba(20,26,31,.92) 100%) }
  .pg-inove .p3r__panel{ display:contents }
  .pg-inove .p3r__head{ grid-area:1 / 1; align-self:end; position:relative; z-index:1; padding:0 var(--i-gutter) 16px }
  .pg-inove .p3r__p{ grid-area:2 / 1; margin-top:12px; padding-inline:var(--i-gutter) }
  .pg-inove .p3r__proof{ margin-top:12px }
}
@media (min-width:768px){
  .pg-inove .p3r__proof{ grid-template-columns:repeat(2, minmax(0, 420px)); gap:24px; margin-top:24px }
}
@media (min-width:768px) and (max-width:1023px){
  .pg-inove .p3r__media::after{ background:linear-gradient(180deg, rgba(20,26,31,0) 25%, rgba(20,26,31,.72) 50%, rgba(20,26,31,.88) 72%, rgba(20,26,31,.92) 100%) }
  .pg-inove .p3r__panel{ grid-area:1 / 1; align-self:end; position:relative; z-index:1; padding:24px 32px 28px; color:var(--i-white) }
  .pg-inove .p3r__p{ color:var(--i-white) }
}
@media (min-width:1024px){
  .pg-inove .blk.p3r{ margin-top:72px }
  .pg-inove .p3r__row{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) }
  .pg-inove .p3r--img-right .p3r__row{ grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) }
  .pg-inove .p3r--img-right.p3r--cap .p3r__row{ grid-template-columns:minmax(0, 1fr) minmax(0, min(774px, 66.667%)) }
  .pg-inove .p3r__media{ grid-area:1 / 1 }
  .pg-inove .p3r__panel{ grid-area:1 / 2; display:flex; flex-direction:column; justify-content:center; padding:32px; background:var(--i-ink); color:var(--i-white) }
  .pg-inove .p3r--img-right .p3r__media{ grid-area:1 / 2 }
  .pg-inove .p3r--img-right .p3r__panel{ grid-area:1 / 1 }
  .pg-inove .p3r__p{ color:var(--i-white) }
}
@media (min-width:1440px){ .pg-inove .p3r__panel{ padding:48px } }
/* T-3 rev 3 RW3-2 (CF-4): foto de prova única = largura da coluna da imagem de contexto, recorte 2:1 (cover, foco no
   poste/câmeras); a faixa de duas fotos não muda. Vem depois das regras acima para vencer a cascata. */
.pg-inove .p3r__proof--single{ grid-template-columns:minmax(0, 1fr) }
.pg-inove .p3r__proof--single .blk__img{ aspect-ratio:2 / 1; object-position:50% 40% }
@media (min-width:768px){ .pg-inove .p3r__proof--single{ grid-template-columns:minmax(0, 1fr) } }
@media (min-width:1024px){
  .pg-inove .p3r__proof--single{ column-gap:0 }   /* sem vão: as trilhas casam com as de .p3r__row */
  .pg-inove .p3r--img-left .p3r__proof--single{ grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) }
  .pg-inove .p3r--img-right .p3r__proof--single{ grid-template-columns:minmax(0, 1fr) minmax(0, 2fr) }
  .pg-inove .p3r--img-right.p3r--cap .p3r__proof--single{ grid-template-columns:minmax(0, 1fr) minmax(0, min(774px, 66.667%)) }
  .pg-inove .p3r--img-left .p3r__proof--single .blk__fig{ grid-column:1 }
  .pg-inove .p3r--img-right .p3r__proof--single .blk__fig{ grid-column:2 }
}
.pg-inove .dl{ display:grid; gap:4px 24px; margin-top:16px }
.pg-inove .dl dt{ font-weight:700 }
.pg-inove .dl dd{ margin:0 0 12px }

/* SITE-PROD-01D T-4 (OPERATOR_TASK_T-4.md R-1, CREATIVE_DIRECTION rev 3 §4.1): índice de capacidades de /tecnologia/,
   cinco miniaturas 3:2 das mesmas imagens de CONTEXTO dos blocos P-3R. Só tokens existentes. */
.pg-inove .capidx{ padding-block:32px; background:var(--i-concrete) }
.pg-inove .capidx__list{ display:grid; gap:16px; grid-template-columns:repeat(2, 1fr) }
.pg-inove .capidx__item{ min-width:0 }
.pg-inove .capidx__link{ color:var(--i-ink); text-decoration:none }
.pg-inove .capidx__thumb{ display:block; overflow:hidden; background:var(--i-ink) }
.pg-inove .capidx__t{ font-size:14px; line-height:20px; font-weight:500 }
/* SITE-PROD-01D T-4 (OPERATOR_NOTE_T-4_MIDWAY M-2 + CREATIVE_DIRECTION §5): < 768 ladrilho compacto —
   miniatura 56 px ao lado do título (alvo de toque >= 44 px); >= 768 forma original (miniatura 3:2 no topo). */
@media (max-width:767px){
  .pg-inove .capidx__link{ display:flex; align-items:center; gap:12px; min-height:44px }
  .pg-inove .capidx__thumb{ flex:none; width:56px; height:56px }
  .pg-inove .capidx__img{ display:block; width:56px; height:56px; aspect-ratio:1 / 1; object-fit:cover }
  .pg-inove .capidx__t{ min-width:0; overflow-wrap:break-word }
}
/* SITE-PROD-01E T-3 rev 2 (F-1): < 420 px a grade de 2 colunas deixava ~84 px para o rótulo e quebrava palavras
   no meio ("Infraestrutur|a", "multidiscipli|nar"); uma coluna dá largura inteira ao rótulo. 430+ inalterado. */
@media (max-width:419px){
  .pg-inove .capidx__list{ grid-template-columns:1fr }
}
@media (min-width:768px){
  .pg-inove .capidx__list{ grid-template-columns:repeat(3, 1fr); gap:24px }
  .pg-inove .capidx__link{ display:flex; flex-direction:column; gap:8px }
  .pg-inove .capidx__img{ display:block; width:100%; height:100%; aspect-ratio:3 / 2; object-fit:cover }
}
@media (min-width:1024px){ .pg-inove .capidx{ padding-block:40px } .pg-inove .capidx__list{ grid-template-columns:repeat(5, 1fr) } }

/* SITE-PROD-01D T-4 (R-4 P-2): faixa de contexto de /empresa/, ctx-corporativo-banda com véu grafite >= .80
   (mesmo var(--i-ink) rgba já usado em .hero__media::after) sobre o texto existente de P.band (sem copy nova). */
.pg-inove .ctxband{ position:relative; overflow:hidden; background:var(--i-ink); min-height:280px; display:flex; align-items:center }
.pg-inove .ctxband__media{ position:absolute; inset:0; z-index:0 }
.pg-inove .ctxband__media picture{ position:absolute; inset:0; display:block; width:100%; height:100% }
.pg-inove .ctxband__img{ display:block; width:100%; height:100%; object-fit:cover }
.pg-inove .ctxband__media::after{ content:""; position:absolute; inset:0; background:rgba(20,26,31,.85) }
.pg-inove .ctxband > .wrap{ position:relative; z-index:1; padding-block:40px }
.pg-inove .ctxband__h2{ color:var(--i-white) }
.pg-inove .ctxband__p{ color:var(--i-concrete); max-width:44rem }
@media (min-width:1024px){ .pg-inove .ctxband{ min-height:360px } .pg-inove .ctxband > .wrap{ padding-block:64px } }

/* SITE-PROD-01D T-4 (R-4 P-6): seis competências de /empresa/ como miniaturas de prova real, reusando derivados
   já publicados em /construtora/ e /tecnologia/ (sem novo recorte/conversão — P-037). Item 06 é CONTEXTO (sem legenda). */
.pg-inove .procom__list{ display:grid; gap:16px; margin-top:24px; grid-template-columns:repeat(2, minmax(0, 1fr)) }
.pg-inove .procom__link{ color:var(--i-ink); text-decoration:none }
.pg-inove .procom__fig{ margin:0 }
.pg-inove .procom__t{ display:block; font-size:14px; line-height:20px; font-weight:500; overflow-wrap:anywhere }
/* RW4-3 (final rendered marketing review F-1): item 03 (tec-cftv) sub-escalava a câmera sob o céu de tempestade
   com o enquadramento centralizado padrão (50% 50%). Reusa o recorte mais apertado já aprovado da mesma foto
   em /tecnologia/ (.p3r__proof--single .blk__img, object-position:50% 40%) — mesmo arquivo, só CSS. */
.pg-inove .procom__img--cftv{ object-position:50% 40% }
/* SITE-PROD-01D T-4 (OPERATOR_NOTE_T-4_MIDWAY M-2 + CREATIVE_DIRECTION §5 P-6): < 768 miniatura 72x72 ao
   lado do título (P-6 "72x72 on mobile"); >= 768 forma original (miniatura 3:2, grade 3 colunas).
   SITE-PROD-01D T-4 rework (REWORK-OF #70 F-1): 1 coluna < 768 (era 2) — a 2ª coluna deixava ~78px para o
   título e quebrava palavras no meio (overflow-wrap:anywhere sem espaço); miniatura 72x72 inalterada.
   SITE-PROD-01D T-4 rework R2 (RW4-1, final rendered UX review F-1): legenda ("Execução real INOVE — …")
   ocupava uma 2ª linha de largura total ABAIXO da miniatura+título, empurrando a altura de cada item para
   ~116-128px (6 itens ≈ empresa@390 4607 px vs. baseline 3727). P-6 pede "caption kept under the text":
   legenda agora só na coluna 2 (mesma coluna do título, grid-row 2), não mais 1/-1 — título+legenda juntos
   (20 + 4 + ~42px) ficam dentro dos 72px da miniatura (grid-row:1/span 2), sem linha extra; miniatura e
   fonte da legenda inalteradas (nenhum recorte novo, nenhum tamanho de fonte novo). */
@media (max-width:767px){
  .pg-inove .procom__list{ grid-template-columns:1fr; gap:12px 16px }
  .pg-inove .procom__link{ display:grid; grid-template-columns:72px minmax(0, 1fr); column-gap:10px; row-gap:4px; align-items:start }
  .pg-inove .procom__fig{ display:contents }
  .pg-inove .procom__fig picture{ display:block; grid-column:1; grid-row:1 / span 2; width:72px; height:72px }
  .pg-inove .procom__img{ display:block; width:72px; height:72px; aspect-ratio:1 / 1; object-fit:cover }
  .pg-inove .procom__link .blk__credit{ grid-column:2; grid-row:2; margin:0 }
  .pg-inove .procom__t{ grid-column:2; grid-row:1; margin-top:0 }
}
@media (min-width:768px){
  .pg-inove .procom__list{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px }
  .pg-inove .procom__link{ display:block }
  .pg-inove .procom__img{ display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover }
  .pg-inove .procom__t{ margin-top:8px }
}

/* -------------------------------------------------------------------- rodapé (DD §2.3) */
.pg-inove .ftr{ background:var(--i-ink); color:var(--i-concrete); padding-block:64px 48px; font-size:16px; line-height:24px }
.pg-inove .ftr a{ color:var(--i-concrete); text-decoration:none }
.pg-inove .ftr a:hover{ text-decoration:underline; text-underline-offset:4px }
.pg-inove .ftr__grid{ display:grid; gap:40px }
/* RW-4: o DARK_MASTER é opaco e tem fundo texturizado próprio — nunca some no grafite liso. Ele é apresentado como
   placa intencional: largura fixa (148 px), filete de 1 px em concreto a 24% contornando exatamente a placa, topo
   alinhado aos títulos das colunas. Nenhum filtro/opacidade/transform no logo (IDENT-1): o filete é do link. */
.pg-inove .ftr__home{ display:inline-block; border:1px solid rgba(233,236,239,.24) }
/* SITE-PROD-01E T-3 A4 (CORRECTION_DIRECTION §4): moderate brand-scale increase 210 -> 220 (<768, max 70vw) /
   240 (768-1023) / 260 (>=1024). Literal widths mirrored in build.js LOCKUP_SIZES.dark. Slogan: same font/size/
   colour, 12 px below the lockup, max-width = lockup width, left edge aligned with the lockup. */
.pg-inove .ftr__lockup{ width:220px; max-width:70vw }
@media (min-width:768px){ .pg-inove .ftr__lockup{ width:240px } }
@media (min-width:1024px){ .pg-inove .ftr__lockup{ width:260px } }
/* RW-5: slogan em IBM Plex Sans 500 (DD §4.2); site.css › .slogan usava a fonte de dado (mono) com espaçamento */
.pg-inove .ftr__slogan{ margin-top:12px; max-width:min(220px, 70vw); color:var(--i-concrete); font-family:var(--i-font); font-weight:500; letter-spacing:normal; text-transform:none }
@media (min-width:768px){ .pg-inove .ftr__slogan{ max-width:240px } }
@media (min-width:1024px){ .pg-inove .ftr__slogan{ max-width:260px } }
.pg-inove .ftr__h{ font-size:14px; line-height:20px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--i-white) }
.pg-inove .ftr__list{ margin-top:12px }
.pg-inove .ftr__list a, .pg-inove .ftr__city{ display:inline-flex; align-items:center; gap:10px; min-height:44px }
.pg-inove .ftr__list span{ white-space:nowrap }   /* EP-3: o telefone nunca quebra no meio do número */
/* EP-2: o master escuro do rodapé sai com loading="lazy" (IDENT-1); assets/inove.js o antecipa (img.loading='eager'); o invólucro tem largura explícita */
.pg-inove .ftr__home{ line-height:0 }
.pg-inove .ftr__legal{ margin-top:16px; font-size:14px; line-height:20px; color:var(--i-concrete) }
@media (min-width:768px){ .pg-inove .ftr__grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .pg-inove .ftr__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px } .pg-inove .ftr{ padding-block:80px 56px } }

/* SITE-CHIEF-01 (Owner 2026-10-02) — capacidade operacional em /empresa/ e formulário de escopo em /contato/.
   Só componentes existentes (.blk, .field, .btn): grade de itens e formulário em duas colunas no desktop. */
.pg-inove .blk--cap .blk__list{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin-top:20px }
.pg-inove .blk--cap .blk__list li{ background:var(--i-concrete); border-left:3px solid var(--i-ink); padding:14px 16px; font-weight:500; line-height:22px }
.pg-inove .ftr__legal span{ display:block }
.pg-inove .scope-form{ max-width:880px; margin-top:24px }
@media (min-width:768px){
  .pg-inove .scope-form{ display:grid; grid-template-columns:1fr 1fr; column-gap:24px }
  .pg-inove .scope-form .field--wide,.pg-inove .scope-form .field--check,.pg-inove .scope-form > p,.pg-inove .scope-form .hp{ grid-column:1 / -1 }
}

/* SITE-CHIEF-01 r5 (Owner 2026-10-02: "espaços brancos grandes demais") — ritmo vertical mais curto: --i-pad 96→72 (desktop),
   72→56 (tablet), 56→44 (mobile); seções consecutivas da mesma superfície não somam dois paddings. */
.pg-inove .sec--white + .sec--white,
.pg-inove .sec--concrete + .sec--concrete{ padding-top:0 }
.pg-inove .act2 .blk__p--lg{ max-width:62ch }
@media (min-width:768px){ .pg-inove .hero__ctas .btn + .btn{ margin-left:12px } }

/* SITE-CHIEF-01 r6 (Owner 2026-10-02: "Fale com quem executa" seco demais) — parágrafo de acolhimento sob o título do hero. */
.pg-inove .hero__sub{ max-width:36rem; margin-top:16px; color:rgba(255,255,255,.86); font-size:17px; line-height:27px }
@media (min-width:1024px){ .pg-inove .hero__sub{ font-size:19px; line-height:30px } }
.pg-inove .hero__sub + .hero__ctas{ margin-top:28px }
@media (max-width:767px){
  .pg-inove .hero--int.hero--int-contato .hero__media::after{ background:linear-gradient(180deg, rgba(20,26,31,0) 0%, rgba(20,26,31,.30) 22%, rgba(20,26,31,.88) 38%, rgba(20,26,31,.97) 52%, rgba(20,26,31,.98) 100%) }
  .pg-inove .hero__ctas .btn + .btn{ margin-top:12px }
}