/* ==========================================================================
   PR Gestão Empresarial — SISTEMA DE PÁGINAS INTERNAS (Corte 7)
   --------------------------------------------------------------------------
   Folha exclusiva das páginas internas. Não duplica nada da Home: reutiliza
   tokens.css, base.css (.container, .section, .section--muted/--dark/--graphite)
   e components.css (.eyebrow, .btn, .section-heading, .link-arrow).

   A Home NÃO carrega este arquivo — ele entra pela seção "Head" do layout,
   declarada apenas pelas páginas internas.

   Ordem das regras: breadcrumb · hero interno (3 variantes) · blocos
   editoriais · listas · navegação relacionada · CTA final.
   ========================================================================== */

/* ==========================================================================
   1. BREADCRUMB
   Discreto por decisão de arquitetura: uma linha em corpo micro, dentro do
   Hero e acima do eyebrow. Nunca vira elemento visual grande.
   ========================================================================== */
.breadcrumb {
  margin-bottom: var(--space-6);
  font-size: var(--fs-micro);
  color: var(--text-on-dark-subtle);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.breadcrumb__sep { opacity: .5; }
.breadcrumb__link {
  color: var(--text-on-dark-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.breadcrumb__link:hover {
  color: var(--pr-white);
  border-bottom-color: currentColor;
}
.breadcrumb__current { color: var(--text-on-dark); }

/* ==========================================================================
   2. HERO INTERNO
   Sempre em superfície escura: o header do site é transparente até o scroll e
   precisa de contraste. Nunca ocupa uma viewport inteira, nunca tem slider e
   nunca repete o par de CTAs do Hero da Home.
   ========================================================================== */
.ihero {
  position: relative;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  overflow: hidden;
}
/* Halo estático discreto — evita o preto chapado sem repetir a iluminação
   reativa do Hero da Home (que é exclusiva dela). */
.ihero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 76% 22%, rgba(255, 255, 255, .05), transparent 58%);
}
/* Fio prateado de fechamento: mesmo vocabulário metálico da marca. */
.ihero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(196, 200, 204, .16) 12%,
    rgba(206, 211, 216, .42) 50%,
    rgba(196, 200, 204, .16) 88%,
    transparent 100%
  );
}

.ihero__inner {
  position: relative;
  z-index: var(--z-base);
  padding-top: calc(var(--header-h) + var(--space-8));
  padding-bottom: var(--space-9);
}

/* O Hero interno é escuro mas não usa .section--dark: precisa declarar o
   contraste do eyebrow e do anel de foco por conta própria. */
.ihero .eyebrow { color: var(--text-on-dark-muted); }
.ihero :focus-visible { outline-color: var(--accent-on-dark); }

.ihero__eyebrow { margin-bottom: var(--space-4); }

.ihero__title {
  /* Deliberadamente MENOR que o H1 da Home (--fs-h1 chega a 4,25rem):
     o Hero interno não pode competir com o Hero da Home. */
  font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  max-width: 18ch;
  text-wrap: balance;
}

.ihero__text {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-on-dark-muted);
  max-width: 54ch;
}

.ihero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--text-on-dark-muted);
}
.ihero__meta-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pr-platinum);
}

/* --- Variante SIDE — institucional ---------------------------------------
   Texto à esquerda, fotografia vertical à direita. A moldura recebe uma
   hairline deslocada, no lugar de sombra: acabamento editorial, não card. */
/* A foto se funde ao fundo preto do Hero — mesmo mecanismo de máscara do
   Hero da Home (.hero__figure): sem caixa, sem borda, sem raio. A imagem
   dissolve nas próprias bordas em vez de ficar "colada" sobre a superfície
   escura. Em mobile, sangra até a borda do container e desvanece em cima e
   embaixo; a partir de 900px, sangra até a borda da viewport à direita e
   ganha um segundo desvanecimento pela esquerda, onde encontra o texto. */
/* Preto puro (não --pr-ink) — a foto termina em preto puro no próprio
   degradê embutido, e o fundo por trás dela precisa ser exatamente a mesma
   cor para não deixar costura entre a imagem e a superfície. */
.ihero--side .ihero__inner {
  background: #000;
  padding-bottom: 0;
}
/* A foto encosta no limite inferior do Hero — nenhuma faixa de fundo sobra
   entre ela e a borda da seção, o que também eliminaria a costura. */
.ihero--side .ihero__visual {
  margin-top: var(--space-7);
  margin-inline: calc(var(--gutter) * -1);
}
.ihero__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  /* CORTE 12 — o desvanecimento de topo foi encurtado de 14% para 7%. Em
     retratos e cenas com pessoas em pé, 14% comia a cabeça do assunto. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 92%, transparent 100%);
}
/* CORTE 12 — proporção da moldura ajustável por página, e SÓ em tela estreita.
   Um retrato não cabe em 16/10: para preencher a moldura, o recorte come o
   busto e sobra o rosto. Acima de 640 px a moldura já é larga o bastante para
   o enquadramento padrão funcionar, e a partir de 900 px a coluna tem altura
   própria — por isso a variável vive nesta faixa e só nela. */
@media (max-width: 639px) {
  .ihero__figure { aspect-ratio: var(--ihero-ratio, 16 / 10); }
}
.ihero__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* CORTE 11 — enquadramento ajustável por página (--ihero-pos). Sem a
     variável, o valor calibrado no Corte 7 continua valendo. */
  object-position: var(--ihero-pos, 74% 20%);
  filter: saturate(.92) contrast(1.03);
}
@media (min-width: 900px) {
  .ihero--side .ihero__inner {
    --edge: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    max-width: none;
    padding-left: var(--edge);
    padding-right: 0;
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    grid-template-areas:
      "crumb  crumb"
      "lead   visual";
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: stretch;
  }
  .ihero--side .breadcrumb { grid-area: crumb; }
  /* O respiro que antes era padding-bottom do container passa a ser só do
     texto: assim a coluna da foto pode encostar no limite da seção sem
     mexer no espaçamento do lado esquerdo. */
  .ihero--side .ihero__lead {
    grid-area: lead;
    align-self: center;
    padding-bottom: var(--space-10);
  }
  .ihero--side .ihero__visual {
    grid-area: visual;
    margin-top: 0;
    margin-inline: 0;
    min-height: min(58vh, 520px);
  }
  .ihero--side .ihero__figure {
    aspect-ratio: auto;
    height: 100%;
    /* Duas máscaras combinadas por interseção: uma dissolve o topo/base,
       outra dissolve a lateral esquerda — onde a foto encontra o texto. */
    /* CORTE 12 — as duas máscaras foram encurtadas (topo 22%→12%, lateral
       24%→15%). Elas existiam para costurar a foto ao preto, e continuam
       fazendo isso; mas nas fotos com pessoas em pé, a extensão anterior
       apagava justamente a cabeça do assunto. */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .45) 4%, #000 12%, #000 100%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .5) 4%, #000 15%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .45) 4%, #000 12%, #000 100%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .5) 4%, #000 15%, #000 100%);
    mask-composite: intersect;
  }
  .ihero--side .ihero__figure img { object-position: var(--ihero-pos, 80% 18%); }
}

/* --- Variante BAND — serviço ---------------------------------------------
   Coluna única de texto e faixa fotográfica larga sangrando até as bordas.
   A faixa é o que separa o hero de serviço do institucional. */
.ihero--band .ihero__title { max-width: 26ch; }
.ihero--band .ihero__inner { padding-bottom: var(--space-8); }
.ihero__band {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  height: clamp(180px, 26vw, 360px);
  overflow: hidden;
}
.ihero__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ihero-pos, 50% 30%);
  filter: saturate(.88) contrast(1.04);
}
/* A faixa se dissolve no preto pelo topo, para pertencer ao hero em vez de
   ficar apoiada sobre ele.

   CORTE 12 — o degradê anterior ia de opaco a transparente em 58% e deixava
   COSTURA VISÍVEL: o preto chapado do bloco de texto encontrava a foto num
   ponto em que ela ainda estava clara demais. A transição agora começa 100%
   opaca, cede devagar e só termina em 78% da altura — o encontro deixou de
   ter borda. */
.ihero__band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--pr-ink) 0%,
    rgba(12, 13, 15, .92) 6%,
    rgba(12, 13, 15, .48) 24%,
    rgba(12, 13, 15, .14) 46%,
    transparent 66%);
}

/* --- Variante TYPOGRAPHIC — estratégica -----------------------------------
   Sem fotografia: tipografia maior, lead deslocado para a coluna da direita e
   marca-d'água discreta. Densidade e ritmo diferentes das outras duas. */
.ihero--type .ihero__inner {
  position: relative;
  padding-top: calc(var(--header-h) + var(--space-10));
  padding-bottom: var(--space-11);
}
/* --- Fotografia de fundo do Hero tipográfico (.ihero--backdrop) -----------
   CORTE 12. Nasceu no Corte 7 como textura de UMA página (Consultoria
   Empresarial), com o arquivo escrito no seletor. Na revisão visual o
   planejador estendeu o tratamento a outras páginas, e um seletor por página
   não escala: o arquivo passou a vir da view, em `--ihero-backdrop`.

   O QUE MUDOU NA INTENSIDADE. Antes, o arquivo já era gravado em P&B e
   escurecido (~92%) e ainda recebia um degradê quase opaco por cima — o
   resultado era grão na escuridão, e a fotografia não se lia. Agora os
   arquivos são gravados com EXPOSIÇÃO NATURAL e todo o escurecimento vive
   aqui, onde pode ser calibrado sem reprocessar imagem. A máscara ficou mais
   leve a pedido do planejador: a cena é reconhecível, sem virar conteúdo.

   O degradê é angulado de propósito. Ele é mais denso no canto superior
   esquerdo — exatamente onde moram o breadcrumb, o eyebrow e o H1 — e cede no
   meio-direita, onde não há texto. É isso que permite mostrar mais imagem sem
   perder contraste onde ele importa. */
.ihero--type.ihero--backdrop .ihero__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(165deg, rgba(12, 13, 15, .80) 0%, rgba(12, 13, 15, .55) 46%, rgba(12, 13, 15, .88) 100%),
    var(--ihero-backdrop);
  background-size: cover;
  background-position: var(--ihero-backdrop-pos, center 42%);
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  opacity: .88;
}
/* CORTE 12 (revisão) — sobre fotografia, o cinza de apoio perde a briga.
   `--text-on-dark-muted` (#a6acb5) foi calibrado para o preto chapado do Hero
   sem imagem; sobre uma cena, ele some no meio-tom. Aqui o lead, o eyebrow, a
   linha de meta e os degraus do breadcrumb sobem para `--text-on-dark`, o
   mesmo branco do H1 — o que separa hierarquia passa a ser o corpo e o peso,
   não a cor. Vale SÓ nas páginas com fundo fotográfico: onde o Hero é preto
   chapado, o cinza continua correto e continua valendo. */
.ihero--backdrop .ihero__text,
.ihero--backdrop .ihero__meta,
.ihero--backdrop .eyebrow,
.ihero--backdrop .breadcrumb__link { color: var(--text-on-dark); }
.ihero--backdrop .breadcrumb__sep { opacity: .65; }

/* A coluna de texto recebe um segundo véu, curto e só à esquerda: é o que
   garante o contraste do H1 mesmo quando a fotografia tem uma área clara
   justamente ali (parede, quadro branco, camisa). Ele não escurece a metade
   direita, então a imagem continua visível. */
.ihero--type.ihero--backdrop .ihero__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(12, 13, 15, .55) 0%,
    rgba(12, 13, 15, .28) 34%,
    rgba(12, 13, 15, 0) 62%);
}
.ihero--type .breadcrumb,
.ihero--type .ihero__lead {
  position: relative;
  z-index: 1;
}
.ihero--type .ihero__title {
  /* A variante estratégica compensa a ausência de fotografia com tipografia
     maior — ainda abaixo do H1 da Home. */
  font-size: clamp(2.25rem, 1.55rem + 3vw, 4rem);
  letter-spacing: var(--tracking-mega);
  max-width: 14ch;
}
.ihero--type .ihero__text { max-width: 46ch; }
.ihero--type::before {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, .06), transparent 54%),
    radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .035), transparent 46%);
}
@media (min-width: 900px) {
  .ihero--type .ihero__lead {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .ihero--type .ihero__eyebrow,
  .ihero--type .ihero__title { grid-column: 1; }
  .ihero--type .ihero__text {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    padding-bottom: var(--space-2);
  }
  /* A linha de meta acompanha o lead na coluna da direita, em vez de cair
     solta sob o título. Hoje só a página-índice de Serviços a utiliza nesta
     variante. */
  .ihero--type .ihero__meta {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--space-6);
  }
}

/* --- Intensificador de superfície (Corte 8) --------------------------------
   NÃO é uma quarta variante: é a mesma composição tipográfica com mais respiro
   vertical e o halo vindo do lado oposto. Existe porque três páginas passaram
   a usar o Hero tipográfico e elas não podem abrir exatamente iguais.

   AJUSTE PÓS-CORTE 8: este modificador não tem mais nada a ver com textura.
   Ele intensifica a superfície só com o que já é próprio da variante —
   proporção e iluminação. */
/* Título curto não pode encolher o Hero: sem isto, "BPO Financeiro" (uma
   linha) produziria uma faixa muito mais baixa que a das páginas vizinhas e a
   superfície "mais forte" apareceria como menos superfície, não mais. */
.ihero--type.ihero--strong .ihero__inner {
  padding-top: calc(var(--header-h) + var(--space-11));
  padding-bottom: var(--space-12);
}
/* O enquadramento do fundo em páginas `Strong` é informado por página, em
   `--ihero-backdrop-pos`: não existe mais uma regra de posição escrita aqui
   para uma página específica (Corte 12). */
.ihero--strong::before {
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .07), transparent 52%),
    radial-gradient(circle at 88% 86%, rgba(255, 255, 255, .04), transparent 46%);
}

/* ==========================================================================
   3. BLOCO EDITORIAL DE TEXTO (.iprose)
   Título à esquerda, corpo à direita. É o módulo mais reutilizado do sistema.
   ========================================================================== */
.iprose__grid { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .iprose__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}
.iprose__title {
  font-size: var(--fs-h2);
  max-width: 18ch;
  text-wrap: balance;
}
.iprose__body { display: grid; gap: var(--space-5); }
.iprose__body p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 62ch;
}

/* ==========================================================================
   4. BLOCO EDITORIAL COM FOTOGRAFIA (.imedia)
   Duas composições: coluna lateral e faixa larga sobre superfície escura.
   ========================================================================== */
.imedia__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); align-items: center; }

.imedia__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: var(--imedia-ratio, 3 / 2);
  background: var(--surface-muted);
}
.imedia__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--imedia-pos, 50% 50%);
}

.imedia__body > * + * { margin-top: var(--space-4); }
.imedia__title {
  font-size: var(--fs-h2);
  max-width: 20ch;
  text-wrap: balance;
}
.imedia__text {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 58ch;
}

@media (min-width: 860px) {
  .imedia .imedia__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .imedia--reverse .imedia__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .imedia--reverse .imedia__figure { order: 2; }
}

/* Faixa larga: a fotografia ocupa a linha inteira e o texto vem abaixo,
   centralizado em largura editorial. */
.imedia--band .imedia__grid { grid-template-columns: minmax(0, 1fr); }
.imedia--band .imedia__figure { aspect-ratio: var(--imedia-ratio, 21 / 9); }
.imedia--band .imedia__body { max-width: 66ch; }

.imedia--dark {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}
.imedia--dark .imedia__text { color: var(--text-on-dark-muted); }
.imedia--dark .imedia__figure { background: var(--pr-graphite); }

/* ==========================================================================
   5. PILARES (Quem Somos)
   Não são cards com ícone: são colunas tipográficas com filete superior,
   no mesmo vocabulário dos atributos da Home, em corpo maior.
   ========================================================================== */
.ipillars__grid { display: grid; gap: var(--space-7); }
@media (min-width: 760px) {
  .ipillars__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2.4vw, 3rem); }
}
.ipillar {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-strong);
}
.ipillar__title {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
}
.ipillar__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* CORTE 9 — o módulo sobre superfície escura. A página /servicos perdeu o
   bloco das "frentes sem página", que era a única pontuação escura do miolo;
   sem ela, a lista de dez serviços ficava seguida de duas superfícies claras
   quase idênticas. Só as duas cores que dependem da superfície mudam — filete
   e texto de apoio. Nenhuma métrica, nenhum espaçamento, nenhuma outra página
   é afetada: quem não pede .section--dark continua exatamente como estava. */
.section--dark .ipillar,
.section--graphite .ipillar { border-top-color: var(--line-on-dark-strong); }
.section--dark .ipillar__desc,
.section--graphite .ipillar__desc { color: var(--text-on-dark-muted); }

/* ==========================================================================
   6. ATUAÇÃO PRESENCIAL E REMOTA (Quem Somos)
   ========================================================================== */
.ireach__grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .ireach__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}
.ireach__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h2);
  max-width: 16ch;
  text-wrap: balance;
}
.ireach__list { border-top: 1px solid var(--line-on-dark); }
.ireach__item { padding-block: var(--space-6); border-bottom: 1px solid var(--line-on-dark); }
.ireach__label {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pr-platinum);
}
.ireach__desc {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  max-width: 56ch;
}

/* ==========================================================================
   7. FRENTES DO SERVIÇO (Contabilidade Empresarial)
   Lista numerada editorial — não é grade de cards iguais.
   ========================================================================== */
.ifrentes__list { display: grid; gap: 0; }
@media (min-width: 820px) {
  .ifrentes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}
.ifrente {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  /* O ícone é uma caixa e alinha pelo topo; o número, uma letra, alinhava
     pela linha de base. `start` serve aos dois. */
  align-items: start;
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}
/* CORTE 12 — o número saiu e entrou o ícone. Regra do planejador: numerar
   uma lista que não tem ordem sugere limite e cria hierarquia inexistente.
   O ícone identifica o assunto sem ordenar nada.

   `.ifrente__num` continua definido logo abaixo porque TRÊS páginas usam este
   mesmo módulo para uma sequência de verdade (Abertura, Migração e Imposto de
   Renda descrevem etapas) — ali o número permanece. */
.ifrente__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ifrente__icon svg { width: 1.25rem; height: 1.25rem; }
.ifrente:hover .ifrente__icon { color: var(--text); border-color: var(--text-subtle); }
/* Sobre superfície escura, o filete e o traço precisam do par invertido. */
.section--dark .ifrente__icon,
.section--graphite .ifrente__icon {
  border-color: var(--line-on-dark-strong);
  color: var(--text-on-dark-muted);
}
.section--dark .ifrente:hover .ifrente__icon,
.section--graphite .ifrente:hover .ifrente__icon { color: var(--text-on-dark); }

.ifrente__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--pr-silver);
  min-width: 2.2ch;
}
.ifrente__body { min-width: 0; }
.ifrente__title { font-size: var(--fs-h4); }
.ifrente__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ==========================================================================
   8. PARA QUEM FAZ SENTIDO (Contabilidade Empresarial)
   ========================================================================== */
.iaudience__grid { display: grid; gap: var(--space-6); }
@media (min-width: 720px) {
  .iaudience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
}
.iaudience__item {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out);
}
.iaudience__item:hover { border-color: var(--line-strong); }
.iaudience__title { font-size: var(--fs-h4); }
.iaudience__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.iaudience__note {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-subtle);
}

/* ==========================================================================
   9. QUANDO A CONSULTORIA FAZ SENTIDO
   Superfície grafite, blocos tipográficos com filete — sem ícone e sem card.
   ========================================================================== */
.icases__list { display: grid; gap: var(--space-7); }
@media (min-width: 760px) {
  .icases__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}
.icase { padding-top: var(--space-5); border-top: 1px solid var(--line-on-dark-strong); }
.icase__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  max-width: 26ch;
}
.icase__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  max-width: 48ch;
}

/* ==========================================================================
   10. COMO A PR ATUA (Consultoria Empresarial)
   Fotografia lateral + etapas. A imagem aparece como CONTEXTO de atendimento,
   nunca legendada como equipe da PR.
   ========================================================================== */
.isteps__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 900px) {
  .isteps__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}
.isteps__figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  background: var(--surface-muted);
}
.isteps__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 40%;
}
.isteps__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h2);
  max-width: 18ch;
  text-wrap: balance;
}
.isteps__list { margin-top: var(--space-7); border-top: 1px solid var(--line); }
.istep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.istep__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--pr-silver);
  min-width: 2.2ch;
}
.istep__content { min-width: 0; }
.istep__title { font-size: var(--fs-h4); }
.istep__desc {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 56ch;
}

/* ==========================================================================
   11. DELIMITAÇÃO ENTRE FRENTES (.idistinct)
   Lista editorial de delimitação, usada pelas quatro páginas do núcleo de
   Soluções e por duas páginas de serviço.

   CORTE 10 — o bloco deixou de ser inteiramente não clicável no núcleo de
   Soluções: as quatro frentes passaram a ter rota e o NOME de cada uma vira
   link (ver `.idistinct__link`). O resto do bloco continua texto, e nas
   páginas de serviço que o usam para papéis sem rota nada mudou — sem `Url`,
   o item continua sendo texto puro.
   ========================================================================== */
.idistinct__list { border-top: 1px solid var(--line-on-dark); }
.idistinct__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line-on-dark);
}
@media (min-width: 760px) {
  .idistinct__item {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: baseline;
  }
}
.idistinct__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.idistinct__desc {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  max-width: 58ch;
}
.idistinct__tag {
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: var(--radius-pill);
  color: var(--pr-platinum);
}
.idistinct__item--current .idistinct__desc { color: var(--text-on-dark); }

/* CORTE 10 — o NOME vira link quando a frente citada tem rota real.
   O bloco continua sendo delimitação editorial, não uma grade de navegação:
   nada além do nome é clicável, a composição não mudou e, EM REPOUSO, o link
   é tipograficamente idêntico ao texto que estava ali antes (`a { color:
   inherit; text-decoration: none }` em base.css). O sublinhado só aparece na
   interação — é o que permite ligar as quatro frentes sem redesenhar o bloco
   já aprovado da Consultoria Empresarial.

   O item da página atual NUNCA é link: ele carrega a marca "Esta página". */
.idistinct__link {
  transition: color var(--dur) var(--ease-out);
}
.idistinct__link:hover {
  color: var(--pr-platinum);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   11.1 ÍNDICE DE SERVIÇOS (.iservices) — Corte 8
   Lista editorial CLICÁVEL da página /servicos. É o oposto de .ifrentes: lá a
   lista numerada é conteúdo, aqui ela é navegação. Cada linha inteira é o
   link, e só entram serviços cuja rota existe. Nenhum card: linhas com filete,
   para não repetir a grade de cards da Home.
   ========================================================================== */
.iservices__list { display: grid; }
@media (min-width: 900px) {
  .iservices__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
  }
}
/* O link vive no título e é esticado sobre a linha inteira pelo ::after —
   mesmo mecanismo já usado nos cards de serviço da Home (.svc__link). Assim a
   estrutura de headings continua correta e a área clicável é a linha toda. */
/* CORTE 12 — a coluna do número deixou de existir: a lista de dez serviços
   não é uma sequência, e numerá-la sugeria um percurso que ela não tem. */
.iservice {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line-strong);
}
.iservice__body { min-width: 0; }
.iservice__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h4);
}
.iservice__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.iservice__arrow {
  flex: none;
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.iservice__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 46ch;
}
.iservice:hover .iservice__arrow { color: var(--text); }
.iservice:hover .iservice__arrow { transform: translateX(4px); }
.iservice:hover .iservice__link { text-decoration: underline; text-underline-offset: .18em; }

/* ==========================================================================
   11.2 NOTA DE MÓDULO (.imodule-note) — Corte 8
   Linha factual de fechamento de um módulo, com um destino real. Usada para
   remeter aos planos da Home sem transformar a página de serviço em tabela de
   preço. Mesmo tratamento tipográfico de .iaudience__note.
   ========================================================================== */
.imodule-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-subtle);
}
.imodule-note a {
  font-weight: var(--weight-semibold);
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease-out);
}
.imodule-note a:hover { border-bottom-color: currentColor; }

/* Encaminhamento do bloco de escopo: as frentes sem página não são links, mas
   o bloco não pode terminar sem saída — o visitante vai ao contato. */
.idistinct__foot { margin-top: var(--space-8); }

/* ==========================================================================
   11.3 ÍNDICE DE SOLUÇÕES (.isolutions) — Corte 10
   Lista editorial CLICÁVEL da página /solucoes. Existe em vez de reaproveitar
   `.iservices` porque os dois objetos são diferentes: lá são dez frentes que o
   visitante percorre procurando a sua; aqui são quatro frentes que ele precisa
   COMPARAR antes de escolher. Por isso a linha começa pela pergunta que a
   solução responde, o nome vem em corpo maior (h3, não h4) e a grade é de duas
   colunas em duas fileiras — nunca uma lista longa.

   Também não é `.related-card`: os relacionados desta mesma página são cartões
   com moldura, e repetir a caixa aqui faria a página ter dois blocos de
   navegação com a mesma aparência. Este módulo usa filete, como `.ipillar` e
   `.icase`, e a linha inteira é clicável pelo ::after do link — o mesmo
   mecanismo de `.iservice`.
   ========================================================================== */
.isolutions__grid { display: grid; gap: var(--space-8); }
@media (min-width: 800px) {
  .isolutions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(2.5rem, 2rem + 2vw, 3.75rem);
  }
}
.isolution {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-strong);
}
/* A pergunta é conteúdo, não legenda: usa --text-muted (5,67:1 sobre a
   superfície muted, AA) e não --text-subtle, que ficaria em 3,51:1. O número
   Nota do Corte 12: a numeração ornamental saiu do site inteiro; a pergunta
   ficou sozinha na linha, que é onde ela sempre foi o conteúdo. */
.isolution__question {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.isolution__name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
}
.isolution__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.isolution__arrow {
  flex: none;
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.isolution__desc {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 46ch;
}
.isolution:hover .isolution__arrow { color: var(--text); }
.isolution:hover .isolution__arrow { transform: translateX(4px); }
.isolution:hover .isolution__link { text-decoration: underline; text-underline-offset: .18em; }

/* ==========================================================================
   12. NAVEGAÇÃO RELACIONADA
   Só recebe conteúdos cuja rota EXISTE — nunca card inativo ou "em breve".
   ========================================================================== */
.related__head { margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.related__title { margin-top: var(--space-4); font-size: var(--fs-h2); max-width: 20ch; }

.related__grid { display: grid; gap: var(--space-5); }
@media (min-width: 720px) {
  .related__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

.related-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.related-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.related-card__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.related-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
}
.related-card__desc {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.related-card__arrow {
  margin-top: var(--space-4);
  color: var(--text);
  transition: transform var(--dur) var(--ease-out);
}
.related-card:hover .related-card__arrow { transform: translateX(4px); }

/* Retorno discreto ao hub de Serviços (Corte 8). Só existe nas páginas que
   informam BackLabel e BackUrl — as três do Corte 7 não informam. */
.related__back { margin-top: var(--space-8); }

/* ==========================================================================
   13. CTA COMERCIAL FINAL
   Componente compartilhado pelas três páginas. Um botão principal (WhatsApp,
   com mensagem contextualizada) e um link para os canais reais da Home.
   ========================================================================== */
.final-cta {
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}
.final-cta__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) {
  .final-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
}
.final-cta__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h2);
  max-width: 20ch;
  text-wrap: balance;
}
.final-cta__text {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-on-dark-muted);
  max-width: 52ch;
}
.final-cta .eyebrow { color: var(--text-on-dark-muted); }
.final-cta :focus-visible { outline-color: var(--accent-on-dark); }

.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 900px) {
  .final-cta__actions { justify-content: flex-end; }
}

/* ==========================================================================
   14. PERGUNTAS FREQUENTES (.ifaq) — Corte 11
   Accordion da página /faq. Sem biblioteca: o gatilho é um <button> real e o
   painel usa o atributo `hidden`, então fechado ele sai da árvore de
   acessibilidade em vez de ficar invisível e focável.

   Não reaproveita `.iservices` nem `.isolutions`: os dois são NAVEGAÇÃO — a
   linha inteira é clicável e leva a outra página. Aqui a linha inteira também
   é clicável, mas para revelar conteúdo no mesmo documento. Um módulo que
   parece navegação e não navega é exatamente o defeito que o sistema evita
   desde o Corte 8, por isso a seta é um chevron que gira, e não a seta
   horizontal que o site usa para "ir para".

   Sem JavaScript, o <noscript> da página abre todos os painéis: o conteúdo
   nunca depende do script.
   ========================================================================== */
.ifaq__group { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); }

/* Rótulo do bloco: mesmo tratamento do eyebrow, mas é um heading de verdade —
   a hierarquia da página precisa dele para não saltar de h2 para h4. */
.ifaq__group-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.ifaq__list {
  margin-top: var(--space-5);
  border-top: 1px solid var(--line-strong);
}
.ifaq__item { border-bottom: 1px solid var(--line-strong); }
.ifaq__question { margin: 0; }

.ifaq__trigger {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
  /* padding-inline zerado: o <button> traz 6px de padding do agente do
     usuário, e sem isto a pergunta ficaria desalinhada do rótulo do bloco e
     do texto da resposta. */
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
}
.ifaq__trigger:hover .ifaq__trigger-label {
  text-decoration: underline;
  text-underline-offset: .18em;
}
.ifaq__trigger-icon {
  flex: none;
  align-self: center;
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ifaq__trigger:hover .ifaq__trigger-icon { color: var(--text); }
.ifaq__trigger[aria-expanded="true"] .ifaq__trigger-icon { transform: rotate(180deg); }

.ifaq__panel {
  padding-bottom: var(--space-6);
  max-width: 68ch;
}
.ifaq__answer {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.ifaq__answer + .ifaq__answer { margin-top: var(--space-4); }
.ifaq__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-5) 0 0;
  font-size: var(--fs-micro);
}

/* Entrada curta e discreta do painel. Desligada em prefers-reduced-motion —
   e a ausência dela não muda nada no resultado final. */
@media (prefers-reduced-motion: no-preference) {
  .ifaq__panel.is-entering { animation: ifaq-in var(--dur) var(--ease-out) both; }
}
@keyframes ifaq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. CANAIS DE CONTATO (.ichannels) — Corte 11
   Grade da página /contato. Cada item é um canal REAL — WhatsApp, discagem e
   e-mail — e a linha inteira é clicável pelo ::after do link, o mesmo
   mecanismo de `.iservice` e `.isolution`.

   Não reaproveita `.related-card`: aquele é navegação interna e leva a outra
   página do site; estes três saem do site (wa.me, tel:, mailto:). O valor vem
   em corpo grande porque é ele que o visitante procura — e a nota abaixo é a
   única linha de texto de apoio que cada canal recebe.
   ========================================================================== */
.ichannels__grid { display: grid; gap: var(--space-5); margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
@media (min-width: 720px) {
  .ichannels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.4vw, 2rem); }
}

.ichannel {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.ichannel:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.ichannel__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ichannel__value {
  font-family: var(--font-display);
  /* Um corpo abaixo de .related-card__name: o e-mail comercial tem 36
     caracteres e, em --fs-h4, não caberia numa coluna de três. */
  font-size: var(--fs-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-heading);
  /* O e-mail é longo e não pode estourar a coluna em 360px. */
  overflow-wrap: anywhere;
}
.ichannel__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ichannel:hover .ichannel__link { text-decoration: underline; text-underline-offset: .18em; }
.ichannel__note {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.ichannel__arrow {
  margin-top: var(--space-4);
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.ichannel:hover .ichannel__arrow { transform: translateX(4px); color: var(--text); }

/* ==========================================================================
   16. ENDEREÇO E HORÁRIOS (.ivisit) — Corte 11
   Duas colunas de dado confirmado na página /contato. Não é `.ireach`: ali as
   linhas são rótulo + descrição editorial; aqui são endereço e tabela de
   horário, e o horário precisa de <dl> com par dia/faixa.
   ========================================================================== */
.ivisit__grid {
  display: grid;
  gap: var(--space-8);
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}
@media (min-width: 720px) {
  .ivisit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}
.ivisit__col { padding-top: var(--space-5); border-top: 1px solid var(--line-strong); }
.ivisit__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ivisit__address {
  margin-top: var(--space-4);
  font-style: normal;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text);
}
.ivisit__hours { margin-top: var(--space-4); }
.ivisit__hour {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.ivisit__hour:last-child { border-bottom: 0; }
.ivisit__hour dt { color: var(--text-muted); }
.ivisit__hour dd { margin: 0; font-weight: var(--weight-semibold); color: var(--text); }

/* ==========================================================================
   17. FORMULÁRIO DA PÁGINA DE CONTATO (.iform) — Corte 12
   Duas colunas: à esquerda o que o formulário é e o que ele faz; à direita o
   formulário. A explicação fica FORA do card de propósito — quem já entendeu
   passa direto para os campos, e quem não entendeu não precisa clicar em nada
   para descobrir que o envio acontece pelo WhatsApp.
   ========================================================================== */
.iform__grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
  .iform__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}
.iform__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h2);
  max-width: 18ch;
}
.iform__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 46ch;
}
.iform__body {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   18. FAIXA FOTOGRÁFICA DE RESPIRO (.mstrip) — Corte 12
   Largura total, altura contida, sem texto por cima. Existe porque várias
   páginas eram inteiramente tipográficas do Hero ao CTA — a faixa é a pausa
   entre dois blocos de leitura, e ilustra a seção que vem a seguir.

   Ela sangra até as bordas de propósito: uma imagem dentro do container leria
   como card, e card é objeto clicável no vocabulário deste site.
   ========================================================================== */
.mstrip {
  margin: 0;
  width: 100%;
  height: clamp(180px, 24vw, 340px);
  overflow: hidden;
  background: var(--pr-ink);
}
.mstrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mstrip-pos, 50% 50%);
  filter: saturate(.9) contrast(1.02);
}

/* --- Fotografia na coluna do cabeçalho de `.ireach` (Corte 12, ajuste) -----
   A coluna da esquerda deste módulo termina no título, e ao lado de uma lista
   de quatro itens ela deixa um vazio alto. A fotografia preenche esse espaço e
   fica junto do assunto que ilustra — foi para cá que o planejador a moveu,
   depois de ela ter nascido como faixa antes da seção.

   Só existe a partir de 900 px, que é onde as duas colunas existem: abaixo
   disso não há vazio para preencher, e a imagem só aumentaria a rolagem. */
.ireach__media { display: none; }
@media (min-width: 900px) {
  /* A fotografia fecha a coluna EXATAMENTE na altura em que a lista da direita
     termina — no filete que vem depois do último item. Para isso, três peças:

       1. a grade deixa de alinhar pelo topo e passa a esticar as duas colunas
          à altura da linha (só nesta variante, por isso o modificador);
       2. o cabeçalho vira coluna flex, para poder distribuir a altura;
       3. a figura ocupa o que sobrar (`flex: 1`), em vez de ter proporção
          fixa — a altura dela passa a ser consequência da coluna vizinha.

     O modificador existe para não mexer nos outros blocos `.ireach` do site,
     que não têm fotografia e continuam alinhados pelo topo. */
  .ireach--media .ireach__grid { align-items: stretch; }
  .ireach--media .ireach__head { display: flex; flex-direction: column; }

  /* O <dl> da lista traz margem vertical do agente do usuário. A de baixo
     empurrava o fim da linha da grade 17 px além do último filete — e a foto,
     que fecha na linha, terminava 17 px abaixo dele. Só a de baixo sai: a de
     cima é o respiro que alinha a lista ao título. */
  .ireach--media .ireach__list { margin-bottom: 0; }

  .ireach__media {
    display: block;
    /* base ZERO, não `auto`: com base automática a figura entraria na conta da
       coluna já com a altura proporcional da imagem (~400 px), a coluna da
       esquerda passaria a ser a mais alta e seria ELA a definir a linha — a
       foto ultrapassaria a lista em vez de fechar com ela. Com base zero, quem
       define a altura da linha é a lista, e a figura ocupa o que sobra. */
    flex: 1 1 0;
    /* Piso: se a lista da direita for curta, a foto não achata a ponto de
       virar tarja. Passando disso, a linha da grade cresce. */
    min-height: 200px;
    margin: var(--space-8) 0 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  /* Absoluta para que a imagem não devolva altura própria à figura — é o que
     mantém a base zero funcionando. */
  .ireach__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.02);
  }
}

/* --- Fotografia na coluna do cabeçalho de `.iprose` (Corte 12, revisão) ----
   Mesmo mecanismo do `.ireach__media`: a coluna da esquerda termina no título
   e deixa um vazio alto ao lado dos parágrafos; a fotografia preenche esse
   espaço e fecha na altura em que o texto da direita termina.

   As três peças que fazem o fim das duas colunas coincidir estão comentadas em
   `.ireach__media`, e valem igual aqui: grade que estica, cabeçalho em coluna
   flex e figura com base ZERO — com base `auto` a figura entraria na conta já
   com a altura proporcional da imagem, viraria a coluna mais alta e passaria a
   definir a linha em vez de obedecê-la.

   Só existe a partir de 900 px, que é onde as duas colunas existem. */
.iprose__media { display: none; }
@media (min-width: 900px) {
  .iprose--media .iprose__grid { align-items: stretch; }
  .iprose--media .iprose__head { display: flex; flex-direction: column; }

  .iprose__media {
    display: block;
    flex: 1 1 0;
    min-height: 200px;
    margin: var(--space-8) 0 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .iprose__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.02);
  }
}