/* =============================================================================
   Etapa 3 — composições próprias por página (revisão de 24/09/2026)

   Base comum: tipografia e kicker de 09-etapa3.css, reveal/scene de
   internas.js, efeitos de 08-efeitos.css. Cada página tem estrutura, formato
   de banner e movimento próprios. Ver docs/PADROES-DE-COMPOSICAO.md.
   ========================================================================== */

/* --- comum: traço verde discreto sob títulos (família Advisory) ------------ */

.traco-marca::after {
  content: "";
  display: block;
  width: clamp(80px, 8vw, 150px);
  height: 3px;
  margin-top: .32em;
  background: linear-gradient(90deg, var(--cor-destaque), rgb(var(--cor-destaque-rgb) / 0));
  box-shadow: 0 0 18px rgb(var(--cor-destaque-rgb) / .333);
  transform-origin: left;
}
.ip-motion .traco-marca::after { animation: traco-desenha 1.1s cubic-bezier(.2, .7, .2, 1) .9s both; }
@keyframes traco-desenha { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* --- comum: CTA fino ------------------------------------------------------- */

.etapa3 .e3v-cta { padding-block: clamp(38px, 3.4vw, 56px); }
.e3v-cta .ip-cta__inner { align-items: center; }
.e3v-cta h2 { font-size: clamp(38px, 3.4vw, 62px) !important; margin: 0 !important; }
.e3v-cta .ip-cta__actions > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 30px; }
.e3v-cta__botao { background: var(--cor-destaque); color: var(--cor-fundo); }
.e3v-cta__botao:hover { color: var(--cor-fundo); }

/* ============================================================== ADVISORY === */

.adv { background: #1b1e21; }

.adv-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: 135px 0 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

/* a foto cobre a abertura inteira, inclusive a régua */
.adv-hero__foto { position: absolute; inset: 0 0 0 24%; z-index: -1; overflow: hidden; }
.adv-hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 28%;
  filter: grayscale(.8) contrast(1.05) brightness(.78);
}
.adv-hero__foto::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #1b1e21 0%, #1b1e21b0 18%, #1b1e2140 42%, #1b1e2100 70%),
    linear-gradient(0deg, #1b1e21 0%, #1b1e21d9 24%, transparent 55%),
    linear-gradient(180deg, #1b1e21aa 0%, transparent 22%);
}

.adv-hero__texto { position: relative; }
.adv-hero__texto h1 { max-width: 1180px !important; font-size: clamp(56px, 5vw, 96px) !important; }
.adv-hero__lead { font-size: clamp(18px, 1.25vw, 23px); line-height: 1.65; max-width: 560px; margin: 28px 0 0; }

/* régua única; o marco no meio é a contratação */
.adv-regua { position: relative; }
.adv-regua__titulo { color: #b2b5c0; margin-bottom: 46px; }

.adv-regua__trilho {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, #b2b5c066, #b2b5c099 50%, #b2b5c066);
}
.adv-regua__ponta {
  position: absolute; top: 18px; left: 0;
  font: 600 12px/1 var(--fonte-texto);
  letter-spacing: .14em; text-transform: uppercase; color: #b2b5c0;
}
.adv-regua__ponta::before {
  content: ""; position: absolute; left: 0; top: -24px;
  width: 1px; height: 14px; background: #b2b5c0;
}
.adv-regua__ponta--fim { left: auto; right: 0; }
.adv-regua__ponta--fim::before { left: auto; right: 0; }

.adv-regua__marco {
  position: absolute; left: 50%; top: 0;
  translate: -50% -50%;
  display: flex; flex-direction: column; align-items: center;
}
.adv-regua__marco b {
  width: 16px; height: 16px;
  background: #1b1e21;
  border: 2px solid var(--cor-destaque);
  rotate: 45deg;
  box-shadow: 0 0 0 6px #1b1e21, 0 0 22px rgb(var(--cor-destaque-rgb) / .4);
}
.adv-regua__marco em {
  position: absolute; bottom: 30px;
  white-space: nowrap;
  font: 700 clamp(18px, 1.3vw, 23px)/1 var(--fonte-titulo);
  letter-spacing: .06em; text-transform: uppercase; color: #fff !important;
}

/* a luz percorre a régua inteira; o marco pulsa quando ela passa por ele */
.adv-regua__luz {
  position: absolute; left: 0; top: -1px;
  width: 0; height: 4px;
  background: linear-gradient(90deg, rgb(var(--cor-destaque-rgb) / 0), var(--cor-destaque));
  box-shadow: 0 0 16px rgb(var(--cor-destaque-rgb) / .667);
}
.ip-motion .adv-regua.in-view .adv-regua__luz { animation: adv-percorre 9s cubic-bezier(.45, 0, .3, 1) .6s infinite; }
.ip-motion .adv-regua.in-view .adv-regua__marco b { animation: adv-marco 9s ease .6s infinite; }
@keyframes adv-percorre {
  0% { width: 0; opacity: 1; }
  82% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
@keyframes adv-marco {
  0%, 36% { background: #1b1e21; }
  41%, 88% { background: var(--cor-destaque); }
  100% { background: #1b1e21; }
}

.adv-regua__lados {
  list-style: none; margin: 58px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
}
/* cada metade se alinha ao centro do seu trecho de régua: do início ao marco,
   e do marco ao fim. Assim o bloco fica sob o meio da linha que descreve. */
.adv-lado { padding-inline: clamp(20px, 3vw, 60px); text-align: center; }
.adv-lado__fase {
  display: block;
  font: 600 12px/1.4 var(--fonte-texto);
  letter-spacing: .14em; text-transform: uppercase; color: #b2b5c0;
  margin-bottom: 12px;
}
.adv-lado__servico {
  display: inline-flex; gap: 14px;
  font: 700 clamp(30px, 2.5vw, 46px)/1 var(--fonte-titulo);
  text-transform: uppercase; color: #fff; text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid #b2b5c055;
  transition: border-color .3s, color .3s;
}
.adv-lado__servico:hover, .adv-lado__servico:focus-visible { border-color: var(--cor-destaque); color: #fff; }
.adv-lado__servico span { color: var(--cor-destaque); }
.adv-lado p { margin: 18px auto 0; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.65; max-width: 460px; color: #e6e7eb; }

/* o lado aceso acompanha a luz: primeiro antes, depois durante */
.ip-motion .adv-regua.in-view .adv-lado__fase { animation: adv-lado 9s ease .6s infinite; animation-delay: calc(.6s + var(--i) * 3.7s); }
@keyframes adv-lado { 0%, 40% { color: var(--cor-destaque); } 48%, 100% { color: #b2b5c0; } }

.adv-contexto { padding-block: clamp(80px, 7vw, 130px); background: linear-gradient(180deg, #1b1e21, #23272b); }
.adv-contexto__grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 130px); align-items: start; }
/* a divisória entre o título e o texto é a marcação verde desta seção */
.adv-contexto__texto { position: relative; padding-left: clamp(24px, 3vw, 50px); }
.adv-contexto__texto::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--cor-destaque), rgb(var(--cor-destaque-rgb) / .333) 55%, #03733d00);
  box-shadow: 0 0 20px rgb(var(--cor-destaque-rgb) / .251);
}

.adv .e3v-cta { background: linear-gradient(100deg, #2b2f33, var(--cor-fundo) 70%); color: #fff; border-top: 1px solid #b2b5c026; }

/* ========================================================= TRUST ADVISORY == */

.tru { background: var(--cor-fundo); }
.tru-hero { min-height: 760px; }
.tru-hero .ip-hero__photo { inset: 0 0 0 36%; }
.tru-hero .ip-hero__photo img { object-position: 58% 30%; filter: grayscale(.85) brightness(.82); }
.tru-hero .ip-hero__text { width: 58%; }
.tru-hero .ip-hero__lead { margin-top: 30px; }
.tru-hero .e3-jump { margin-top: 10px; border-color: var(--cor-destaque); }

/* argumento à esquerda, pergunta à direita */
.tru-pergunta { position: relative; isolation: isolate; padding-block: clamp(80px, 7vw, 130px); overflow: clip; }
.tru-pergunta::before {
  content: "";
  position: absolute; z-index: -1; inset: -20% 45% -30% -18%;
  background: radial-gradient(circle at 50% 50%, #03733d55, #03733d00 62%);
  transform: translateY(calc(var(--scene-progress, .5) * -40px));
}
.tru-pergunta__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 90px); align-items: center; }
.tru-pergunta h2 { margin: 0 !important; font-size: clamp(40px, 3.9vw, 72px) !important; max-width: none !important; }
.tru-pergunta__texto p { margin: 0 0 22px; max-width: 640px; }
.tru-pergunta__texto p:last-child { margin-bottom: 0; }

/* três réguas curtas: a de cima é a marcação verde da seção */
.tru-pergunta__reguas { display: flex; flex-direction: column; gap: 7px; margin-bottom: 30px; }
.tru-pergunta__reguas i { height: 3px; background: #b2b5c044; }
.tru-pergunta__reguas i:first-child { width: 96px; background: linear-gradient(90deg, var(--cor-destaque), rgb(var(--cor-destaque-rgb) / 0)); box-shadow: 0 0 16px rgb(var(--cor-destaque-rgb) / .333); }
.tru-pergunta__reguas i:nth-child(2) { width: 62px; }
.tru-pergunta__reguas i:last-child { width: 34px; }

.tru-fluxo { padding-block: clamp(70px, 6vw, 120px); background: linear-gradient(160deg, #2a2e32, var(--cor-fundo) 60%); border-top: 1px solid #b2b5c022; }
.tru-fluxo .e3-kicker { color: var(--cor-destaque); margin-bottom: 60px; }
.tru-fluxo__pista { position: relative; }
.tru-fluxo__etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.tru-etapa { padding-inline: clamp(10px, 1.2vw, 22px); }

/* trilho contínuo que liga os nós, e a luz que viaja de 1 a 4 */
.tru-fluxo__pista::before {
  content: "";
  position: absolute; top: 34px;
  left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2);
  height: 1px; background: #b2b5c055;
}
.tru-fluxo__luz {
  position: absolute; top: 29px; left: calc(100% / var(--n) / 2);
  width: 11px; height: 11px; margin-left: -5px;
  border-radius: 50%; background: var(--cor-destaque);
  box-shadow: 0 0 18px var(--cor-destaque), 0 0 44px rgb(var(--cor-destaque-rgb) / .4);
  opacity: 0; z-index: 0;
}
.ip-motion .tru-fluxo.in-view .tru-fluxo__luz { animation: tru-viaja 8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes tru-viaja {
  0% { transform: translateX(0); opacity: 0; }
  3% { opacity: 1; }
  17% { transform: translateX(0); }
  25%, 42% { transform: translateX(calc(100cqw / var(--n))); }
  50%, 67% { transform: translateX(calc(100cqw / var(--n) * 2)); }
  75% { transform: translateX(calc(100cqw / var(--n) * 3)); opacity: 1; }
  94% { transform: translateX(calc(100cqw / var(--n) * 3)); opacity: 1; }
  100% { transform: translateX(calc(100cqw / var(--n) * 3)); opacity: 0; }
}
.tru-fluxo__pista { container-type: inline-size; }

.tru-etapa { position: relative; text-align: center; }
.tru-etapa__no {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 auto 32px;
  background: var(--cor-fundo); border: 1px solid #b2b5c088;
  font: 700 22px/1 var(--fonte-titulo); color: #b2b5c0;
  transition: border-color .4s, color .4s, box-shadow .4s;
}
.tru-etapa__no b { font-weight: inherit; }
.ip-motion .tru-fluxo.in-view .tru-etapa__no { animation: tru-acende 8s ease infinite; animation-delay: calc(var(--i) * 2s - .1s); }
@keyframes tru-acende {
  0%, 20% { border-color: var(--cor-destaque); color: var(--cor-destaque); box-shadow: 0 0 0 5px rgb(var(--cor-destaque-rgb) / .078), 0 0 30px rgb(var(--cor-destaque-rgb) / .251); }
  28%, 100% { border-color: #b2b5c088; color: #b2b5c0; box-shadow: none; }
}
.tru-etapa h3 { font-size: clamp(24px, 1.9vw, 34px) !important; margin-bottom: 16px !important; }
.tru-etapa p { margin: 0 auto; max-width: 330px; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.65; color: #e6e7eb; }

.tru .e3v-cta { background: #b2b5c0; color: var(--cor-fundo); }

/* ===================================================== QUALITY ASSURANCE == */

.qa { background: var(--cor-fundo); }
.qa-hero { position: relative; padding: 145px 0 0; background: radial-gradient(ellipse at 80% 30%, #b2b5c01f, transparent 55%), var(--cor-fundo); }
.qa-hero__grade { display: grid; grid-template-columns: 1fr .95fr; gap: clamp(40px, 5vw, 100px); align-items: end; }
.qa-hero__texto { padding-bottom: clamp(60px, 6vw, 110px); }
.qa-hero__lead { font-size: clamp(18px, 1.25vw, 23px); line-height: 1.65; max-width: 560px; margin: 28px 0 30px; }

/* painel alto que avança sobre o contexto */
.qa-hero__painel { position: relative; z-index: 2; margin: 0 0 -160px; aspect-ratio: 4 / 5; max-height: 760px; }
.qa-hero__painel img {
  width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%;
  filter: grayscale(.55) contrast(1.05) brightness(.85);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 90%);
}
.qa-hero__painel::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
  border: 1px solid #b2b5c040;
}

/* quadro de verificações que se marcam em sequência */
.qa-quadro {
  position: absolute; left: -48px; bottom: 70px;
  display: grid; gap: 12px;
  min-width: 270px; padding: 24px 26px;
  background: rgb(var(--cor-fundo-rgb) / .933); border: 1px solid #b2b5c040; border-top: 2px solid var(--cor-destaque);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 60px #0006;
}
.qa-quadro__titulo { font: 600 11px/1.4 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: #b2b5c0; margin-bottom: 4px; }
.qa-quadro__item { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
.qa-quadro__item b { position: relative; width: 16px; height: 16px; border: 1px solid #b2b5c0; flex: none; }
.qa-quadro__item b::after {
  content: ""; position: absolute; left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid var(--cor-destaque); border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.ip-motion .qa-quadro__item b::after { opacity: 0; scale: .3; transition: opacity .35s, scale .35s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(1s + var(--i) * .7s); }
.ip-motion .qa-hero.in-view .qa-quadro__item b::after { opacity: 1; scale: 1; }
.ip-motion .qa-quadro__item b { transition: border-color .3s calc(1s + var(--i) * .7s); }
.ip-motion .qa-hero.in-view .qa-quadro__item b { border-color: var(--cor-destaque); }

/* seção mais baixa que a primeira versão: o texto sobe e a borda inferior
   encolhe. A luz vinda da base esquerda ocupa o vazio sob o título. */
.qa-contexto {
  position: relative; isolation: isolate;
  padding: clamp(70px, 6vw, 110px) 0 clamp(46px, 3.6vw, 66px);
  background: #b2b5c0; color: var(--cor-fundo);
}
.qa-contexto::before {
  content: "";
  position: absolute; z-index: -1; left: -10%; bottom: -30%; width: 68%; height: 130%;
  background: radial-gradient(circle at 34% 72%, #ffffff9c, #ffffff00 58%),
              radial-gradient(circle at 20% 92%, #03733d2e, #03733d00 62%);
}
.qa-contexto__grade { display: grid; grid-template-columns: 1fr .95fr; gap: clamp(30px, 4vw, 80px); }
.qa-contexto .ip-copy { padding-top: clamp(60px, 5.4vw, 104px); }
.qa-contexto h2 { max-width: 700px !important; margin-bottom: 0 !important; }

/* camadas de conhecimento: quatro lâminas empilhadas, a de cima acesa */
.qa-saber { display: block; margin-top: clamp(34px, 3.4vw, 58px); width: clamp(180px, 17vw, 260px); }
.qa-saber i {
  display: block; height: 11px; margin-bottom: 10px;
  background: rgb(var(--cor-fundo-rgb) / .129);
  border-left: 3px solid rgb(var(--cor-fundo-rgb) / .349);
  transform: skewX(-24deg);
  transform-origin: left;
}
.qa-saber i:nth-child(1) { width: 100%; background: linear-gradient(90deg, var(--cor-destaque), rgb(var(--cor-destaque-rgb) / 0) 88%); border-left-color: #03733d; }
.qa-saber i:nth-child(2) { width: 82%; }
.qa-saber i:nth-child(3) { width: 62%; }
.qa-saber i:nth-child(4) { width: 40%; margin-bottom: 0; }
.ip-motion .qa-saber i { opacity: 0; translate: -24px 0; transition: opacity .7s, translate .7s cubic-bezier(.2, .7, .2, 1); }
.ip-motion .qa-saber i:nth-child(2) { transition-delay: .12s; }
.ip-motion .qa-saber i:nth-child(3) { transition-delay: .24s; }
.ip-motion .qa-saber i:nth-child(4) { transition-delay: .36s; }
.ip-motion .qa-contexto.in-view .qa-saber i { opacity: 1; translate: 0 0; }

/* --- fluxograma ------------------------------------------------------------ */

.qa-fluxo { padding-block: clamp(80px, 7vw, 130px); background: linear-gradient(170deg, #2a2e32, var(--cor-fundo) 55%); }
.qa-fluxo__cabeca { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 64px; }
.qa-fluxo__cabeca .e3-kicker { color: var(--cor-destaque); }
.qa-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }

.qa-ator {
  display: inline-block; padding: 8px 13px;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  border: 1px solid #b2b5c0; color: #fff; background: var(--cor-fundo);
}
/* Intellevo aparece sempre em cores invertidas: fundo verde, texto no tom do
   fundo da seção. Vale na legenda e em cada nó do fluxo. */
.qa-ator--intellevo { border-color: var(--cor-destaque); background: var(--cor-destaque); color: var(--cor-fundo); box-shadow: 0 0 22px rgb(var(--cor-destaque-rgb) / .2); }
.qa-ator--cliente { border-color: #66a687; background: linear-gradient(#66a68726, #66a68726), var(--cor-fundo); }

.qa-mapa { --col: calc(100% / var(--fases)); position: relative; }
.qa-mapa__fases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--fases), 1fr); }

.qa-fase { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.qa-fase > :not(.qa-no) { padding-inline: 8px; }
.qa-fase__num { font: 700 15px/1 var(--fonte-titulo); color: #b2b5c0; letter-spacing: .08em; margin-bottom: 12px; }
.qa-fase h3 { font-size: clamp(16px, 1.15vw, 21px) !important; line-height: 1.12 !important; min-height: 3.4em; margin-bottom: 22px !important; }

.qa-no { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 124px; padding-top: 18px; justify-content: flex-start; }
.qa-no > * { position: relative; }
.qa-no__supervisao { padding: 5px 9px; background: var(--cor-destaque); color: var(--cor-fundo); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.qa-no__supervisao::before { content: "+ "; }

/* seta do caminho aprovado: de centro a centro, por trás dos nós; a ponta
   fica na divisa entre as fases. A luz corre cada trecho em sequência. */
.qa-fase:not(:last-child) .qa-no::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; right: -50%; top: 35px; height: 2px;
  background: linear-gradient(90deg, transparent 35%, #fff 50%, transparent 65%) no-repeat -40% 0 / 40% 100%, rgb(var(--cor-destaque-rgb) / .69);
  box-shadow: 0 0 10px rgb(var(--cor-destaque-rgb) / .333);
}
.qa-fase:not(:last-child) .qa-no::after {
  content: ""; position: absolute; z-index: -1;
  right: -6px; top: 30px;
  border: 5px solid transparent; border-left: 8px solid var(--cor-destaque); border-right: 0;
}
.ip-motion .qa-fluxo.in-view .qa-no::before { animation: qa-trecho 8.4s linear infinite; animation-delay: calc(1s + var(--i) * 1.2s); }
@keyframes qa-trecho { 0% { background-position: -40% 0, 0 0; } 14%, 100% { background-position: 140% 0, 0 0; } }
.qa-saida { margin-top: 16px; font-size: 13px; line-height: 1.35; color: var(--cor-destaque); font-weight: 600; max-width: 150px; }
.qa-retorno-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* laços de retorno, tracejados em Grey */
.qa-mapa__retornos { position: relative; height: 150px; margin-top: 18px; }
.qa-laco {
  position: absolute;
  left: calc(var(--col) * (var(--para) - .5));
  width: calc(var(--col) * (var(--de) - var(--para)));
  top: 0; height: calc(var(--linha) * 62px);
  border: 1px dashed #b2b5c0aa; border-top: 0;
}
.qa-laco::before {
  content: ""; position: absolute; left: -6px; top: -2px;
  border: 5px solid transparent; border-bottom: 8px solid #b2b5c0; border-top: 0;
}
.qa-laco em {
  position: absolute; left: 50%; bottom: -11px; translate: -50% 0;
  padding: 0 10px; background: #232629;
  font-size: 13px; font-style: normal; font-weight: 600; color: #b2b5c0 !important; white-space: nowrap;
}

.qa .e3v-cta { background: linear-gradient(100deg, #b2b5c0, #d2d4da); color: var(--cor-fundo); }

/* =========================================================== OUTSOURCING == */

/* A sobriedade cinza vale para o Advisory e suas duas verticais. Aqui a
   vertical é Evo: luz, diagonal e movimento, sem superfície chapada nem
   retângulo fechado. Decisão do Leonardo em 24/09/2026. */

.out { background: #14201a; }

.out-hero {
  position: relative; isolation: isolate;
  min-height: 94vh; padding: 150px 0 clamp(160px, 12vw, 230px);
  display: flex; align-items: flex-end;
  overflow: clip;
}
.out-hero__foto { position: absolute; inset: 0 0 6% 0; z-index: -1; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.out-hero__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 8%;
  transform: scaleX(-1) scale(1.02) translateY(calc(var(--scene-progress, .5) * -10px));
  filter: grayscale(.92) contrast(1.1) brightness(.82);
}
.out-hero__foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: #03733d; mix-blend-mode: color; opacity: .3;
}
.out-hero__foto::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 8% 88%, rgb(var(--cor-destaque-rgb) / .149), rgb(var(--cor-destaque-rgb) / 0) 46%),
    linear-gradient(14deg, #03733d 1%, #03733da6 22%, #03733d1f 50%, transparent 70%),
    linear-gradient(0deg, #14201a 1%, #14201ad0 22%, transparent 56%),
    linear-gradient(90deg, #14201ae0, #14201a30 42%, transparent 66%);
}

/* fio de luz correndo na diagonal inferior do banner */
.out-hero__risco {
  position: absolute; left: -4%; right: -4%; bottom: 4%; height: 2px; z-index: -1;
  background: linear-gradient(90deg, rgb(var(--cor-destaque-rgb) / 0), var(--cor-destaque) 42%, #66a687 70%, rgb(var(--cor-destaque-rgb) / 0));
  transform: rotate(-4.2deg); transform-origin: left;
  box-shadow: 0 0 26px rgb(var(--cor-destaque-rgb) / .4);
}
.ip-motion .out-hero__risco { animation: out-risco 9s ease-in-out infinite; }
@keyframes out-risco { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.out-hero__texto h1 { max-width: 1000px !important; }
.out-hero__lead { font-size: clamp(18px, 1.3vw, 24px); line-height: 1.6; max-width: 620px; margin: 26px 0 0; }

/* --- contexto: cartão com canto cortado, não retângulo ---------------------- */

.out-contexto { position: relative; z-index: 2; margin-top: clamp(-160px, -9.5vw, -100px); padding-bottom: clamp(70px, 6vw, 110px); }
.out-contexto__cartao {
  position: relative; isolation: isolate;
  margin-left: auto; width: min(100%, 1180px);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 4vw, 80px);
  padding: clamp(34px, 4vw, 70px);
  background:
    radial-gradient(circle at 12% 0%, rgb(var(--cor-destaque-rgb) / .122), rgb(var(--cor-destaque-rgb) / 0) 46%),
    linear-gradient(135deg, #1d4633, #16241d 62%, #101a15);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
  box-shadow: 0 40px 90px #00000075;
}
.out-contexto__cartao::before {
  content: ""; position: absolute; left: 0; top: 0; width: clamp(140px, 22%, 280px); height: 2px;
  background: linear-gradient(90deg, var(--cor-destaque), rgb(var(--cor-destaque-rgb) / 0));
  box-shadow: 0 0 18px rgb(var(--cor-destaque-rgb) / .4);
}
.out-contexto__cartao::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../img/marca-v2/laminas-transparente.webp') right center / cover; opacity: .06;
}
.out-contexto h2 { font-size: clamp(38px, 3.2vw, 60px) !important; }
.out-contexto .ip-copy p:last-child { margin-bottom: 0; }

/* --- frentes: cartões vivos, com brilho que segue o ponteiro ---------------- */

.out-frentes {
  position: relative; overflow: clip;
  padding-block: clamp(60px, 5vw, 100px) clamp(90px, 8vw, 150px);
  background:
    radial-gradient(ellipse at 12% 104%, #03733d80, transparent 58%),
    radial-gradient(ellipse at 88% -10%, #66a68733, transparent 52%),
    #14201a;
}
.out-frentes::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(118deg, #66a6870f 0 1px, transparent 1px 74px);
  transform: translateX(calc(var(--scene-progress, .5) * -60px));
}
.out-frentes .e3-kicker { color: #66a687; margin-bottom: 50px; }
.out-frentes__escada { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.6vw, 30px); align-items: start; }

.out-frente {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(var(--i) * clamp(28px, 3vw, 60px));
  padding: clamp(26px, 2.4vw, 42px);
  min-height: 330px;
  background: linear-gradient(160deg, #1d5c3e, #12382a 52%, #14201a);
  clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
  transform: translateY(calc((1 - var(--scene-progress, .5)) * var(--i) * 26px));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
/* a borda é um gradiente, não um traço fechado */
.out-frente::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 1px;
  background: linear-gradient(150deg, #66a687, #66a68722 45%, rgb(var(--cor-destaque-rgb) / .4));
  clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* o brilho acompanha o ponteiro (efeitos.js alimenta --mx/--my) */
.out-frente::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--cor-destaque-rgb) / .251), transparent 70%);
  transition: opacity .35s;
}
.out-frente:hover, .out-frente:focus-within { box-shadow: 0 26px 60px #03733d66; }
.out-frente:hover::after, .out-frente:focus-within::after { opacity: 1; }
.ip-motion .out-frente:hover { transform: translateY(calc((1 - var(--scene-progress, .5)) * var(--i) * 26px - 6px)); }

.out-frente__num {
  display: block; margin-bottom: 26px;
  font: 700 clamp(60px, 5vw, 96px)/.9 var(--fonte-titulo);
  color: transparent; -webkit-text-stroke: 1px #66a687cc;
  transition: color .4s, -webkit-text-stroke-color .4s;
}
.out-frente:hover .out-frente__num { color: rgb(var(--cor-destaque-rgb) / .141); -webkit-text-stroke-color: var(--cor-destaque); }
.out-frente h3 { font-size: clamp(26px, 2vw, 36px) !important; margin-bottom: 16px !important; }
.out-frente p { margin: 0; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.65; }

.out .e3v-cta { background: linear-gradient(100deg, #03733d, #0d3a26 60%, #14201a); color: #fff; }
.out .e3v-cta .ip-textlink { color: #fff; }

/* ============================================================== PRODUTOS == */

/* Vertical Light Green. O fundo é um tecido de código feito em CSS: linhas de
   comprimentos variados, discretas, com luz que segue o ponteiro e desloca no
   scroll. Chama atenção sem poluir. Decisão do Leonardo em 24/09/2026. */

.pro { --pro-cor: #66a687; --pro-sap: #0087cd; background: #101a16; }

.pro-hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; padding: 150px 0 80px;
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse 58% 70% at 84% 42%, #66a6874d, #66a68700 64%),
    radial-gradient(ellipse 56% 62% at 4% 96%, #03733d59, #03733d00 58%),
    linear-gradient(135deg, #0f1814, #0a0f0d 54%, #12241b);
}
/* o brilho do ponteiro (efeitos.js alimenta --mx/--my) */
.pro-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 45%), #66a6872e, transparent 68%);
  transition: background .2s linear;
}

/* Código de verdade em HTML/CSS, não imagem (snippet produtos-codigo, gerado
   por scripts/gerar-padrao-codigo.js). Alinhado à esquerda como num editor.
   - Rola sem fim: dois blocos idênticos sobem juntos meio rolo por ciclo.
   - Cada linha é digitada quando entra pela base, com cursor verde.
   - Lanterna: perto do ponteiro o código acende; longe, fica apagado.
   A conta do atraso casa a digitação com a rolagem: a linha i do segundo
   bloco cruza a altura --pc-v do rolo no início do seu ciclo. */
.pro-codigo {
  --pc-lh: 27px;
  --pc-t: 90s;
  --pc-v: .5;
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image:
    radial-gradient(520px circle at var(--mx, 26%) var(--my, 88%), #000 0%, #000000a8 52%, #0000004d 100%),
    linear-gradient(90deg, #000 0%, #000000e0 40%, #00000073 70%, transparent 97%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(520px circle at var(--mx, 26%) var(--my, 88%), #000 0%, #000000a8 52%, #0000004d 100%),
    linear-gradient(90deg, #000 0%, #000000e0 40%, #00000073 70%, transparent 97%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.pro-codigo__rolo {
  position: absolute; left: 0; top: 0; right: 0;
  padding-left: clamp(10px, 1.6vw, 34px);
  opacity: .44;
  filter: blur(.7px);
  will-change: transform;
}
.ip-motion .pro-codigo__rolo { animation: pro-rola var(--pc-t) linear infinite; }
@keyframes pro-rola { to { transform: translateY(-50%); } }

.pro-codigo__bloco {
  margin: 0; padding: 0; background: none; border: 0;
  font: 400 16px/var(--pc-lh) ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  color: #d5e0da; white-space: pre; tab-size: 4;
}
.pc-l { display: block; height: var(--pc-lh); }
.pc-l i { display: inline-block; width: 4ch; margin-right: 2.5ch; text-align: right; font-style: normal; color: #3a4a42; }
.pc-t { display: inline-block; vertical-align: top; overflow: hidden; white-space: pre; width: calc(var(--c) * 1ch); border-right: 2px solid transparent; }
.pc-t b { font-weight: inherit; }
.pc-t .k { color: var(--cor-destaque); }
.pc-t .s { color: #66a687; }
.pc-t .c { color: #5b6a62; }
.pc-t .n { color: #a9d7c1; }
.pc-t .t { color: #cdf3e0; }
.pc-t .d { color: #8fd3b2; }
.pc-t .p { color: #8fa39a; }

/* digitação: largura em passos de um caractere, com cursor verde que some
   quando a linha termina */
/* o cursor é uma animação à parte e sem preenchimento: durante a espera, as
   linhas ainda não digitadas não mostram cursor (senão viram um fio vertical) */
.ip-motion .pc-t {
  animation:
    pc-digita var(--pc-t) steps(var(--c), end) infinite backwards,
    pc-cursor var(--pc-t) linear infinite;
  animation-delay: calc((var(--i) / var(--pc-n) - var(--pc-v)) * var(--pc-t));
}
@keyframes pc-digita {
  0%   { width: 0; }
  1.3% { width: calc(var(--c) * 1ch); }
  100% { width: calc(var(--c) * 1ch); }
}
@keyframes pc-cursor {
  0%, 1.5% { border-right-color: var(--cor-destaque); }
  1.9%, 100% { border-right-color: transparent; }
}

.pro-hero__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.pro-hero__texto h1 { font-size: clamp(56px, 5.4vw, 104px) !important; }
.pro-hero__lead { font-size: clamp(18px, 1.25vw, 23px); line-height: 1.65; max-width: 580px; margin: 28px 0 30px; }
.pro-hero .e3-jump { border-color: var(--pro-cor); }
.pro .ip-breadcrumb { color: #cfd3d0; }

/* --- diagrama do ambiente SAP ---------------------------------------------- */

.pro-sap { position: relative; margin: 0; }
.pro-sap__rotulo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  font: 700 clamp(26px, 2.2vw, 40px)/1 var(--fonte-titulo);
  text-transform: uppercase; letter-spacing: .04em; color: #fff;
}
.pro-sap__rotulo img { width: clamp(78px, 6.6vw, 116px); height: auto; }
.pro-sap__total { display: block; margin-top: 16px; text-align: right; font: 600 13px/1.4 var(--fonte-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--cor-destaque); }

.pro-sap__caixa {
  position: relative; height: clamp(380px, 32vw, 540px);
  padding: 10px; display: flex; flex-direction: column; gap: 10px;
  border: 2px solid #ffffff5c;
  background: #101a1699;
  box-shadow: inset 0 0 60px #66a6871a;
}
.pro-sap__standard {
  flex: 0 0 calc(76% - 5px);
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 24px 26px;
  background: linear-gradient(180deg, #00b1eb, #0069b4);
  transform-origin: bottom;
}
.pro-sap__standard b { font: 700 clamp(28px, 2.4vw, 44px)/1 var(--fonte-titulo); text-transform: uppercase; color: #fff; }

.pro-sap__lacuna { position: relative; flex: 1; border: 1px dashed rgb(var(--cor-destaque-rgb) / .6); }
.pro-sap__falta {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; text-align: center;
  font-size: clamp(14px, 1vw, 17px); font-weight: 600; color: #b9f5d6;
}
.pro-sap__intellevo {
  position: absolute; inset: -1px;
  display: flex; justify-content: center; align-items: center; padding: 0 26px;
  background: linear-gradient(100deg, var(--cor-destaque), #66a687); color: var(--cor-fundo);
  box-shadow: 0 0 44px rgb(var(--cor-destaque-rgb) / .333);
}
.pro-sap__intellevo b { font: 700 clamp(26px, 2.1vw, 38px)/1 var(--fonte-titulo); text-transform: uppercase; }

/* montagem em quatro tempos: caixa, standard, lacuna, produtos */
.ip-motion .pro-sap__caixa { clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.2, .7, .2, 1) .3s; }
.ip-motion .pro-sap__standard { transform: scaleY(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) 1.2s; }
.ip-motion .pro-sap__standard > * { opacity: 0; transition: opacity .5s 2.1s; }
.ip-motion .pro-sap__lacuna { border-color: transparent; transition: border-color .5s 2.5s; }
.ip-motion .pro-sap__falta { opacity: 0; transition: opacity .6s 2.7s; }
.ip-motion .pro-sap__intellevo { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.6, 0, .2, 1) 4.4s; }
.ip-motion .pro-sap__total { opacity: 0; transition: opacity .6s 5.5s; }
.ip-motion .pro-hero.in-view .pro-sap__caixa { clip-path: inset(0 0 0 0); }
.ip-motion .pro-hero.in-view .pro-sap__standard { transform: none; }
.ip-motion .pro-hero.in-view .pro-sap__standard > *,
.ip-motion .pro-hero.in-view .pro-sap__falta,
.ip-motion .pro-hero.in-view .pro-sap__total { opacity: 1; }
.ip-motion .pro-hero.in-view .pro-sap__lacuna { border-color: rgb(var(--cor-destaque-rgb) / .6); }
.ip-motion .pro-hero.in-view .pro-sap__intellevo { clip-path: inset(0 0 0 0); }

/* --- portfólio -------------------------------------------------------------- */

.pro-portfolio { position: relative; padding-block: clamp(80px, 7vw, 130px); background: linear-gradient(180deg, #101a16, #131d18); }
.pro-portfolio .e3-kicker { color: var(--pro-cor); margin-bottom: 40px; }
.pro-portfolio__grade { display: grid; gap: 30px; }

.pro-produto {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(26px, 3.6vw, 70px);
  padding: clamp(32px, 3.4vw, 58px);
  color: #fff; text-decoration: none;
  border: 1px solid #66a68766;
  transition: border-color .35s, transform .35s, box-shadow .35s;
}
.pro-produto__marca { display: flex; align-items: center; gap: 22px; }
.pro-produto:hover { transform: translateY(-4px); color: #fff; }
.pro-produto p { margin: 0; font-size: clamp(18px, 1.25vw, 23px); line-height: 1.55; max-width: 560px; }
.pro-produto__ir { font-weight: 700; font-size: 16px; white-space: nowrap; }

.pro-produto--intax {
  --intax-green: oklch(86.55% .1895 162.1);
  --intax-bg: oklch(20.5% .008 250);
  background-color: var(--intax-bg);
  background-image:
    radial-gradient(circle at 85% 20%, color-mix(in oklch, var(--intax-green) 16%, transparent), transparent 40%),
    linear-gradient(90deg, color-mix(in oklch, var(--intax-green) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--intax-green) 12%, transparent) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  border-color: color-mix(in oklch, var(--intax-green) 45%, transparent);
}
.pro-produto--intax::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklch, var(--intax-green) 18%, transparent), transparent 70%);
  transition: opacity .35s;
}
.pro-produto--intax:hover::after { opacity: 1; }
.pro-produto--intax:hover { border-color: var(--intax-green); box-shadow: 0 26px 60px color-mix(in oklch, var(--intax-green) 18%, transparent); }
.pro-produto__icone { width: clamp(64px, 5vw, 88px); height: auto; aspect-ratio: 1; border-radius: 20%; }
.pro-produto__logo { width: clamp(180px, 16vw, 280px); height: auto; filter: drop-shadow(0 0 22px color-mix(in oklch, var(--intax-green) 20%, transparent)); }
.pro-produto--intax .pro-produto__ir { color: var(--intax-green); }

/* --- contexto: fotografia à esquerda, texto sobre a cor da vertical --------- */

.pro-contexto {
  position: relative; isolation: isolate;
  padding-block: clamp(90px, 8vw, 150px);
  background: #131d18;
}
.pro-contexto__foto {
  position: absolute; z-index: -1; left: 0; top: clamp(-130px, -9vw, -70px); bottom: clamp(-60px, -4vw, -30px);
  width: 52%; overflow: hidden;
  clip-path: polygon(0 0, 100% 7%, 100% 88%, 0 100%);
}
.pro-contexto__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  filter: grayscale(.35) brightness(.62) contrast(1.12);
  transform: scale(1.06) translateY(calc(var(--scene-progress, .5) * -26px));
}
.pro-contexto__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #131d18cc, #131d1844 42%, #131d18e6),
    linear-gradient(0deg, #131d18, transparent 34%),
    linear-gradient(180deg, #131d18, transparent 26%);
}
.pro-contexto__grade { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 110px); align-items: center; }
.pro-contexto h2 { font-size: clamp(40px, 3.6vw, 68px) !important; }
.pro-contexto__texto {
  position: relative;
  padding: clamp(30px, 3vw, 54px);
  color: #16261d;
  background: linear-gradient(135deg, #8cc3a5, #66a687 48%, #3f7d5f);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%);
}
.pro-contexto__texto::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 46%;
  background: linear-gradient(180deg, var(--cor-destaque), rgb(var(--cor-destaque-rgb) / 0));
}
.pro-contexto__texto p:last-child { margin-bottom: 0; }

.pro .e3v-cta { background: linear-gradient(100deg, #16261d, #101a16 70%); color: #fff; border-top: 1px solid #66a68740; }

/* ================================================================= INTAX == */

.itx {
  --intax-green: oklch(86.55% .1895 162.1);
  --intax-bg: oklch(20.5% .008 250);
  background: var(--intax-bg);
}
.itx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh; padding: 140px 0 80px;
  display: flex; align-items: center;
  background-color: var(--intax-bg);
  background-image:
    linear-gradient(90deg, color-mix(in oklch, var(--intax-green) 12%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in oklch, var(--intax-green) 12%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
}
.itx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 74% 44%, color-mix(in oklch, var(--intax-green) 16%, transparent), transparent 32%),
    linear-gradient(135deg, transparent 55%, color-mix(in oklch, var(--intax-green) 8%, transparent));
}
.itx-hero__icone {
  position: absolute; right: 7%; top: 50%; translate: 0 -46%; z-index: -1;
  width: clamp(280px, 30vw, 560px); height: auto; border-radius: 22%;
  opacity: .9;
  box-shadow: 0 0 120px color-mix(in oklch, var(--intax-green) 22%, transparent);
}
.ip-motion .itx-hero__icone { animation: itx-flutua 9s ease-in-out infinite; }
@keyframes itx-flutua { 50% { translate: 0 -50%; } }
.itx-hero__texto { max-width: 820px; }
.itx-hero__logo { display: block; width: min(80vw, 400px); height: auto; margin-bottom: 42px; filter: drop-shadow(0 0 28px color-mix(in oklch, var(--intax-green) 20%, transparent)); }
.itx-hero__texto h1 { font-size: clamp(48px, 4.6vw, 88px) !important; }
.itx-hero__lead { font-size: clamp(18px, 1.3vw, 24px); line-height: 1.6; max-width: 620px; margin: 28px 0 38px; }
.itx-botao {
  display: inline-flex; align-items: center; gap: 24px;
  padding: 18px 28px; border-radius: 2px;
  background: var(--intax-green); color: var(--intax-bg);
  font-size: 17px; font-weight: 700; text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.itx-botao:hover { color: var(--intax-bg); transform: translateY(-3px); box-shadow: 0 12px 36px color-mix(in oklch, var(--intax-green) 35%, transparent); }
.itx-botao span { font-size: 22px; }
.itx-hero__site { display: block; margin-top: 18px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--intax-green); }
.itx .ip-breadcrumb a:hover { color: var(--intax-green); }

/* ======================================================== telas menores == */

@media (max-width: 1100px) {
  .qa-fase h3 { font-size: 15px !important; }
  .qa-ator { font-size: 12px; padding: 6px 8px; }
  .out-frentes__escada { grid-template-columns: repeat(2, 1fr); }
  .out-frente { margin-top: calc(mod(var(--i), 2) * 50px); }
}

@media (max-width: 900px) {
  /* fluxograma vira lista vertical, com o retorno descrito em texto */
  .qa-mapa__fases { grid-template-columns: 1fr; gap: 0; }
  .qa-mapa__retornos { display: none; }
  .qa-fase .qa-no::before, .qa-fase .qa-no::after { display: none; }
  .qa-fase { display: grid; grid-template-columns: 44px 1fr; align-items: start; text-align: left; gap: 6px 16px; padding: 0 0 34px; }
  .qa-fase__num { grid-row: 1 / span 4; margin: 4px 0 0; font-size: 20px; color: var(--cor-destaque); }
  .qa-fase h3 { min-height: 0; margin: 0 !important; font-size: 22px !important; }
  .qa-no { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-height: 0; margin: 8px 0 0; }
  .qa-fase:not(:last-child)::after { content: ""; position: absolute; top: 30px; bottom: 6px; left: 12px; width: 2px; background: rgb(var(--cor-destaque-rgb) / .69); }
  .qa-fase > :not(.qa-no) { padding-inline: 0; }
  .qa-saida { margin-top: 6px; max-width: none; }
  .qa-retorno-texto { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: 13px; color: #b2b5c0; font-weight: 600; }
  .qa-retorno-texto::before { content: "↩ "; }
}

@media (max-width: 800px) {
  .adv-hero, .pro-hero, .itx-hero { min-height: 0; padding: 115px 0 50px; }
  .adv-hero { gap: 50px; }
  .adv-hero__foto img { object-position: 60% 20%; }
  .adv-hero__foto::after { background: linear-gradient(0deg, #1b1e21 0%, #1b1e21e0 45%, #1b1e2199 75%, #1b1e21cc 100%); }
  .adv-regua__marco em { font-size: 15px; bottom: 24px; }
  .adv-regua__ponta { font-size: 10px; }
  .adv-regua__lados { grid-template-columns: 1fr; gap: 36px; }
  .adv-lado, .adv-lado + .adv-lado { padding: 0; }
  .adv-contexto__grade, .tru-pergunta__grade, .qa-hero__grade, .qa-contexto__grade, .out-contexto__cartao, .pro-hero__grade, .pro-contexto__grade { grid-template-columns: 1fr; }
  .adv-contexto__texto { padding-left: 20px; }

  .tru-hero { min-height: 0; }
  .tru-hero .ip-hero__text { width: 100%; }
  .tru-pergunta__cabeca { order: -1; }
  .tru-fluxo__etapas { grid-template-columns: 1fr; gap: 40px; }
  .tru-fluxo__pista::before { top: 34px; bottom: 34px; left: 34px; right: auto; width: 1px; height: auto; }
  .tru-fluxo__luz { display: none; }
  .tru-etapa { display: grid; grid-template-columns: 68px 1fr; gap: 6px 22px; text-align: left; }
  .tru-etapa__no { grid-row: 1 / span 2; margin: 0; }
  .tru-etapa p { margin: 0; }

  .qa-hero { padding-top: 115px; }
  .qa-hero__texto { padding-bottom: 20px; }
  .qa-hero__painel { margin: 0 0 -90px; aspect-ratio: 4 / 3; }
  .qa-quadro { left: 12px; bottom: -40px; min-width: 0; padding: 18px; }
  .qa-contexto { padding-top: 150px; }
  .qa-contexto .ip-copy { padding-top: 0; }
  .qa-fluxo__cabeca { display: block; }
  .qa-legenda { margin-top: 24px; }

  .out-hero { min-height: 82vh; padding: 115px 0 120px; }
  .out-hero__foto img { object-position: 58% 4%; }
  .out-contexto { margin-top: -70px; }
  .out-frentes__escada { grid-template-columns: 1fr; }
  .out-frente { margin-top: 0; min-height: 0; transform: none; }
  .out-hero__risco { bottom: 3%; }

  .pro-sap { margin-top: 30px; }
  .pro-sap__caixa { height: 360px; }
  .pro-contexto { padding-block: clamp(70px, 9vw, 110px); }
  .pro-contexto__foto { position: relative; width: auto; height: 240px; top: 0; bottom: 0; margin: 0 0 30px; inset-inline: 0; clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%); }
  .pro-contexto__grade { margin-top: 0; }
  .pro-codigo { --pc-v: .72; }
  .pro-codigo__rolo { opacity: .36; }
  .pro-codigo__bloco { font-size: 13px; }
  .pro-produto { grid-template-columns: 1fr; }
  .pro-produto__icone { width: 64px; height: 64px; }

  .itx-hero { min-height: 100svh; }
  .itx-hero__icone { width: 220px; right: -40px; top: auto; bottom: 30px; translate: none; opacity: .16; }
  .ip-motion .itx-hero__icone { animation: none; }
  .itx-hero { background-size: 44px 44px; }

  .e3v-cta .ip-cta__actions > div { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .adv-regua__luz, .tru-fluxo__luz, .pro-hero::after, .out-frente::after { display: none; }
  .out-hero__foto img, .pro-contexto__foto img { transform: none; }
  .out-frente { transform: none; }
}

/* link de e-mail do CTA acompanha o fundo de cada página */
.adv .e3v-cta .ip-textlink, .pro .e3v-cta .ip-textlink { color: var(--cor-destaque); }
.tru .e3v-cta .ip-textlink, .qa .e3v-cta .ip-textlink { color: var(--cor-fundo); }
.adv .e3v-cta .ip-textlink:hover, .pro .e3v-cta .ip-textlink:hover { color: #fff; }
.tru .e3v-cta .ip-textlink:hover, .qa .e3v-cta .ip-textlink:hover { color: #03733d; }

/* --- Produtos, 30/09/2026: foto à esquerda, código à direita -------------
   O rack do escritório (já tratado em verde no arquivo) ocupa a metade
   esquerda, atrás do título; o código que roda passa para a metade direita.
   O código continua ocupando o banner inteiro (a lanterna do ponteiro segue
   o mesmo sistema de coordenadas); só o texto começa no meio. */
.pro-hero__foto { position: absolute; inset: 0 50% 0 0; z-index: -2; overflow: hidden; pointer-events: none; }
.pro-hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; opacity: .9; }
.pro-hero__foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #0a0f0d66 0%, #0a0f0d40 40%, #0a0f0dcc 82%, #0a0f0d 100%),
    linear-gradient(0deg, #0a0f0d 0%, transparent 28%),
    linear-gradient(180deg, #0a0f0d 0%, transparent 22%);
}
@media (min-width: 801px) {
  .pro-codigo__rolo { padding-left: 52%; }
  .pro-codigo {
    -webkit-mask-image:
      radial-gradient(520px circle at var(--mx, 74%) var(--my, 60%), #000 0%, #000000a8 52%, #0000004d 100%),
      linear-gradient(90deg, transparent 0%, transparent 48%, #000000e0 62%, #000 80%, transparent 99%),
      linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%);
    mask-image:
      radial-gradient(520px circle at var(--mx, 74%) var(--my, 60%), #000 0%, #000000a8 52%, #0000004d 100%),
      linear-gradient(90deg, transparent 0%, transparent 48%, #000000e0 62%, #000 80%, transparent 99%),
      linear-gradient(180deg, transparent 0, #000 16%, #000 82%, transparent 100%);
  }
}
@media (max-width: 800px) {
  .pro-hero__foto { inset: 0; }
  .pro-hero__foto img { opacity: .38; }
}