/* ============================================================
   RP7 Instalações — V2
   Novos componentes: navegação multipágina, transição
   "energizando", páginas de serviço e trabalho de mobile.
   Depende dos tokens de /css/rp7.css.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1 · TRANSIÇÃO DE PÁGINA — "acende"
   Cross-document View Transitions onde houver suporte;
   fallback por overlay (.energize) em todo o resto.
   ══════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: rp-power-down 180ms cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: rp-power-up 520ms cubic-bezier(.16,.84,.44,1) both;
}

@keyframes rp-power-down {
  0%   { opacity: 1; filter: brightness(1); }
  55%  { opacity: .9; filter: brightness(1.35) saturate(1.2); }
  100% { opacity: 0; filter: brightness(.15) saturate(.4); }
}
@keyframes rp-power-up {
  0%   { opacity: 0; filter: brightness(.2) saturate(.5); }
  22%  { opacity: 1; filter: brightness(1.5) saturate(1.25); }
  34%  { filter: brightness(.75); }
  48%  { filter: brightness(1.18); }
  100% { opacity: 1; filter: brightness(1) saturate(1); }
}

/* overlay: filamento de luz que varre a tela ao entrar,
   e apagão curto ao sair (fallback + camada extra de brilho) */
.energize {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: 0;
}
.energize::before {
  /* varredura horizontal de luz */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      transparent 0%,
      rgba(255,102,51,0) 34%,
      rgba(255,140,92,0.55) 47%,
      rgba(255,225,200,0.95) 50%,
      rgba(255,140,92,0.55) 53%,
      rgba(255,102,51,0) 66%,
      transparent 100%);
  transform: translateX(-100%);
  mix-blend-mode: screen;
}
.energize::after {
  /* pulso radial que "carrega" o centro */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(closest-side at 50% 45%,
    rgba(255,102,51,0.35) 0%, rgba(255,102,51,0.10) 45%, transparent 72%);
  opacity: 0;
}
body.rp-entering .energize { opacity: 1; }
body.rp-entering .energize::before { animation: rp-sweep 620ms cubic-bezier(.2,.7,.3,1) both; }
body.rp-entering .energize::after  { animation: rp-charge 620ms ease-out both; }

body.rp-leaving .energize { opacity: 1; background: rgba(6,5,4,0.001); animation: rp-blackout 190ms ease-in both; }

@keyframes rp-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes rp-charge {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rp-blackout {
  0%   { background: rgba(6,5,4,0); }
  100% { background: rgba(6,5,4,0.92); }
}

/* O conteúdo da primeira seção "energiza" ao entrar.
   IMPORTANTE: esta animação nunca mexe em opacity nem em visibilidade.
   A versão anterior começava em opacity 0 e, quando o evento de entrada
   demorava a disparar, o hero inteiro ficava invisível. Brilho só. */
body.rp-entering main > .section:first-child .wrap > * {
  animation: rp-lightup 620ms cubic-bezier(.16,.84,.44,1) both;
}
@keyframes rp-lightup {
  0%   { filter: brightness(1.75) saturate(1.15); text-shadow: 0 0 26px rgba(255,140,92,0.7); }
  45%  { filter: brightness(.92); }
  100% { filter: none; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .energize { display: none; }
  body.rp-entering main > .section:first-child .wrap > * { animation: none; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════
   1.5 · QUEBRA DE TÍTULO
   Palavra longa ("comissionamento", "equipotencialização")
   deixava linha órfã e título encavalado. `balance` distribui
   as linhas; `break-word` impede que uma palavra estoure a
   caixa no celular.
   ══════════════════════════════════════════════════════════ */
h1, h2, h3,
.display, .h-sec, .svc-hero h1, .case-card h3, .deliver .d h3, .syscard h3 {
  text-wrap: balance;
  /* NÃO usar overflow-wrap: break-word aqui. Junto com `balance` ele
     autoriza o navegador a partir palavra no meio para equilibrar as
     linhas — foi assim que "Acompanhamento" virou "Acompanhamen/to". */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.lede, .body-lg, .body, .body-sm { text-wrap: pretty; overflow-wrap: normal; }

/* Nada de `hyphens: auto` aqui, nem no mobile: com `text-wrap: balance`
   o navegador hifeniza para equilibrar as linhas mesmo quando a palavra
   caberia inteira ("Acompanha-mento", "en-tram"). Palavra longa que não
   couber deve encolher a fonte do bloco, não ser partida. */

/* ══════════════════════════════════════════════════════════
   2 · NAVEGAÇÃO
   ══════════════════════════════════════════════════════════ */

/* --- desktop: dropdown de serviços ---------------------------------- */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-item > a svg { width: 15px; height: 15px; transition: transform .2s ease; }
.nav-item:hover > a svg { transform: rotate(180deg); }

.nav-drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  width: 306px; padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,21,17,0.99), rgba(10,9,7,0.99));
  border: 1px solid rgba(255,140,92,0.22);
  box-shadow: 0 28px 70px rgba(0,0,0,0.62);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-drop::before {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.nav-drop a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; min-height: 46px;
  font-size: 15px; font-weight: 500; color: var(--d-text-2); line-height: 1.25;
  border: 1px solid transparent; transition: background .16s, color .16s, border-color .16s;
}
.nav-drop a b { font-weight: 600; }
.nav-drop a:hover { background: rgba(255,102,51,0.10); color: var(--d-text-1); border-color: rgba(255,140,92,0.28); }
.nav-drop a.is-active { color: var(--rp-orange); }
.nav-drop .di {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,102,51,0.12); border: 1px solid rgba(255,102,51,0.34);
  color: var(--rp-orange);
}
.nav-drop .di svg { width: 16px; height: 16px; }
.nav a.is-active { color: var(--rp-orange); }

/* --- mobile: drawer ------------------------------------------------- */
.drawer {
  position: fixed; inset: 0; z-index: 8000;
  display: flex; flex-direction: column;
  background: linear-gradient(170deg, #14100D 0%, #0A0907 55%);
  transform: translateY(-100%);
  transition: transform .38s cubic-bezier(.16,.84,.44,1);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
body.drawer-open { overflow: hidden; }

.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-x); min-height: var(--header-h);
  border-bottom: 1px solid var(--d-border);
  position: sticky; top: 0; z-index: 2;
  background: rgba(10,9,7,0.92); backdrop-filter: blur(10px);
}
.drawer-top img { height: 28px; }
.drawer-close {
  width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: var(--d-text-1); cursor: pointer;
}
.drawer-close svg { width: 22px; height: 22px; }

.drawer-body { padding: 26px var(--pad-x) 40px; display: flex; flex-direction: column; gap: 30px; }
.drawer h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rp-orange); margin: 0 0 14px;
}
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 0; min-height: 56px;
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--d-text-1); text-decoration: none;
  border-bottom: 1px solid var(--d-border);
}
.drawer-links a svg { width: 18px; height: 18px; color: var(--rp-orange); flex: 0 0 18px; }
.drawer-links a:active { color: var(--rp-orange); }

.drawer-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-svc a {
  display: flex; flex-direction: column; gap: 10px; min-height: 96px;
  padding: 15px 14px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--d-border);
  color: var(--d-text-1); font-size: 14.5px; font-weight: 600; line-height: 1.25;
}
.drawer-svc a .di {
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,102,51,0.12); border: 1px solid rgba(255,102,51,0.34); color: var(--rp-orange);
}
.drawer-svc a .di svg { width: 17px; height: 17px; }
.drawer-svc a:active { border-color: rgba(255,140,92,0.5); background: rgba(255,102,51,0.08); }

.drawer-cta { display: flex; flex-direction: column; gap: 12px; }
.drawer-cta .btn { justify-content: center; width: 100%; min-height: 54px; }
.drawer-foot {
  border-top: 1px solid var(--d-border); padding-top: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--d-text-2);
}
.drawer-foot a { color: var(--d-text-2); text-decoration: none; }
.drawer-foot .mono { font-size: 11px; color: var(--d-text-3); letter-spacing: .1em; }

/* ══════════════════════════════════════════════════════════
   2.5 · HERO DA HOME — texto à esquerda, foto à direita
   O hero das páginas de serviço é foto full-bleed; aqui é
   composição, para a home não parecer uma delas.
   ══════════════════════════════════════════════════════════ */
.hero-split {
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 76px));
  padding-bottom: clamp(48px, 6vw, 88px);
  /* precisa conter: o glow do .hero-fig e o .ambient são posicionados
     para fora da caixa e, com overflow visible, faziam a página inteira
     rolar na horizontal (1570px num viewport de 1440px). */
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(34px, 4.6vw, 76px); align-items: center;
}

/* A primeira dobra não pode depender do JS de scroll-reveal: sem isso o
   hero levava ~3s para aparecer (e sumia de vez se o JS falhasse). */
.hero-split .reveal { opacity: 1; transform: none; }

/* o hero antigo era centralizado; aqui tudo alinha à esquerda */
/* o hero antigo era todo centralizado */
.hero-split .hero-txt { text-align: left; }
.hero-split .hero-tags { justify-content: flex-start; margin: 0 0 26px; }
/* a .display foi dimensionada para largura cheia; na coluna ela precisa encolher */
.hero-split h1 {
  margin: 0; max-width: 17ch; text-align: left;
  font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04;
}
.hero-split .lede {
  margin: 24px 0 0; max-width: 46ch; text-align: left;
  font-size: clamp(16px, 1.25vw, 19px);
}
.hero-split .hero-cta { justify-content: flex-start; margin-top: 32px; gap: 12px; }
/* os dois CTAs precisam caber lado a lado na coluna */
.hero-split .hero-cta .btn-lg { padding-inline: 26px; font-size: 16px; }

.hero-selos {
  display: flex; flex-direction: column; gap: 11px; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid var(--d-border);
}
.hero-selos span {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--d-text-2);
}
.hero-selos svg { width: 17px; height: 17px; color: var(--rp-orange); flex: 0 0 17px; }

.hero-fig {
  position: relative; margin: 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,140,92,0.22);
  box-shadow: 0 34px 90px rgba(0,0,0,0.62);
  isolation: isolate;
}
/* brilho laranja atrás da foto, como se a obra estivesse energizada */
.hero-fig::before {
  content: ''; position: absolute; inset: -28% -18% -18% -28%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,102,51,0.42), rgba(255,102,51,0) 72%);
  filter: blur(12px); pointer-events: none;
}
.hero-fig img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5;
  animation: rp-hero-in 620ms cubic-bezier(.16,.84,.44,1) both;
}
/* leve escurecida embaixo para o selo não brigar com a foto */
.hero-fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(10,9,7,0.62) 100%);
}

.hero-badge {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 15px 20px; border-radius: 13px;
  background: rgba(12,10,8,0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,140,92,0.30);
}
.hero-badge .n {
  font-weight: 900; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.035em;
  background: linear-gradient(180deg, #FFD9A8, #FF6633);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-badge .l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--d-text-2);
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-split h1 { max-width: 15ch; }
  .hero-split .lede { max-width: none; }
  .hero-fig img { aspect-ratio: 5 / 4; }
  .hero-split .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-selos { gap: 9px; }
}

/* ══════════════════════════════════════════════════════════
   3 · CARD DE SISTEMA COM IMAGEM (home)
   ══════════════════════════════════════════════════════════ */
.sysgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.syscard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; padding: 22px; border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--d-text-1);
  border: 1px solid var(--d-border);
  background: #0F0C0A;
  transition: transform .28s cubic-bezier(.16,.84,.44,1), border-color .28s, box-shadow .28s;
}
.syscard img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .62; transition: transform .6s cubic-bezier(.16,.84,.44,1), opacity .35s;
}
.syscard .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,0.15) 0%, rgba(10,9,7,0.62) 48%, rgba(10,9,7,0.95) 100%);
}
.syscard > * { position: relative; z-index: 2; }
.syscard .n {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--d-text-3);
}
.syscard .ic {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,102,51,0.14); border: 1px solid rgba(255,102,51,0.42); color: var(--rp-orange);
  backdrop-filter: blur(4px);
}
.syscard .ic svg { width: 21px; height: 21px; }
.syscard h3 {
  margin: 0; font-weight: 700; font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: -0.02em; line-height: 1.15;
}
.syscard p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--d-text-2); }
.syscard .go {
  margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange-pale);
  display: inline-flex; align-items: center; gap: 7px;
  opacity: 0; transform: translateY(6px); transition: opacity .28s, transform .28s;
}
.syscard .go svg { width: 14px; height: 14px; }
.syscard:hover { transform: translateY(-5px); border-color: rgba(255,140,92,0.55);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,102,51,0.12); }
.syscard:hover img { transform: scale(1.06); opacity: .78; }
.syscard:hover .go { opacity: 1; transform: none; }

/* card destaque de segmentos, sem imagem */
.syscard--seg {
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,102,51,0.16), rgba(12,10,8,0.96));
}

/* ══════════════════════════════════════════════════════════
   4 · PÁGINA DE SERVIÇO
   ══════════════════════════════════════════════════════════ */

/* --- hero ----------------------------------------------------------- */
.svc-hero {
  position: relative; overflow: hidden;
  min-height: min(78vh, 720px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 60px); padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--deck-bg);
}
.svc-hero .bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 38%;
  z-index: 0;
  animation: rp-hero-in 620ms cubic-bezier(.16,.84,.44,1) both;
}
/* A foto do hero costuma ser o LCP da página: o fade parte de visível,
   nunca de opacity 0, para não atrasar a maior pintura. */
@keyframes rp-hero-in {
  0%   { transform: scale(1.05); opacity: .3; filter: brightness(.5); }
  100% { transform: none; opacity: 1; filter: none; }
}
.svc-hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,9,7,0.86) 0%, rgba(10,9,7,0.44) 32%, rgba(10,9,7,0.88) 78%, rgba(10,9,7,0.99) 100%),
    linear-gradient(90deg, rgba(10,9,7,0.92) 0%, rgba(10,9,7,0.35) 58%, rgba(10,9,7,0.1) 100%);
}
/* o hero é flex; sem width o .wrap encolhe no conteúdo e desalinha da página */
.svc-hero .wrap { position: relative; z-index: 2; width: 100%; }
.svc-hero .hero-inner { max-width: 620px; }

/* quando o sujeito da foto está à esquerda, o texto vai pra direita */
.svc-hero--right .hero-inner { margin-left: auto; }
.svc-hero--right .scrim {
  background:
    linear-gradient(180deg, rgba(10,9,7,0.42) 0%, rgba(10,9,7,0.10) 30%, rgba(10,9,7,0.62) 82%, rgba(10,9,7,0.96) 100%),
    linear-gradient(270deg, rgba(10,9,7,0.94) 0%, rgba(10,9,7,0.86) 32%, rgba(10,9,7,0.30) 66%, rgba(10,9,7,0) 100%);
}
.svc-hero h1 {
  margin: 18px 0 0; max-width: 15ch;
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
  font-size: clamp(34px, 4.4vw, 62px);
}
.svc-hero .lede { max-width: 56ch; margin-top: 22px; color: var(--d-text-2); }
.svc-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* trilha de migalhas */
.crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--d-text-3);
}
.crumbs a { color: var(--d-text-3); text-decoration: none; }
.crumbs a:hover { color: var(--rp-orange); }
.crumbs .sep { color: var(--rp-orange); }
.crumbs .cur { color: var(--orange-pale); }

/* faixa de números logo abaixo do hero */
.svc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--d-border); border-bottom: 1px solid var(--d-border);
  background: #070605;
}
.svc-stats .st {
  padding: 30px clamp(18px, 2.4vw, 34px);
  border-right: 1px solid var(--d-border);
  display: flex; flex-direction: column; gap: 7px;
}
.svc-stats .st:last-child { border-right: none; }
.svc-stats .n {
  font-weight: 900; font-size: clamp(30px, 3.4vw, 48px); line-height: .95; letter-spacing: -0.035em;
  background: linear-gradient(180deg, #FFD9A8 0%, #FF6633 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc-stats .l {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--d-text-3); line-height: 1.4;
}

/* --- bloco imagem + texto ------------------------------------------- */
.svc-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(36px, 5vw, 78px); align-items: center; }
.svc-split.rev .fig { order: -1; }
.svc-split .fig {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--d-border); background: #0F0C0A;
}
.svc-split .fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.svc-split .fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px;
  background: linear-gradient(180deg, transparent, rgba(10,9,7,0.92));
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-pale);
}
.s-light .svc-split .fig { border-color: var(--l-border); }

/* --- o que entregamos ----------------------------------------------- */
.deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.deliver .d {
  padding: 28px 26px; border-radius: 13px;
  border: 1px solid var(--d-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  display: flex; flex-direction: column; gap: 13px;
}
.s-light .deliver .d { background: #fff; border-color: var(--l-border); box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.05)); }
.deliver .d h3 { margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; letter-spacing: -0.015em; }
.deliver .d p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--d-text-2); }
.s-light .deliver .d p { color: var(--l-text-2); }

/* --- cases do serviço ------------------------------------------------ */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.case-card {
  position: relative; display: flex; flex-direction: column;
  min-height: 340px; border-radius: 14px; overflow: hidden; text-decoration: none;
  border: 1px solid var(--d-border); background: #0E0B09;
  color: var(--d-text-1);
  transition: transform .28s cubic-bezier(.16,.84,.44,1), border-color .28s, box-shadow .28s;
  cursor: pointer;
}
.case-card:hover { transform: translateY(-5px); border-color: rgba(255,140,92,0.5);
  box-shadow: 0 24px 56px rgba(0,0,0,0.48); }

/* variante com foto real da obra */
.case-card .ph { position: relative; height: 190px; overflow: hidden; flex: 0 0 190px; background: #0A0907; }
.case-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,.84,.44,1); }
.case-card:hover .ph img { transform: scale(1.06); }
.case-card .ph::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,7,0.1) 40%, rgba(10,9,7,0.9) 100%);
}
.case-card .bd { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.case-card .cat {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-pale);
}
.case-card h3 { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
.case-card .cli { font-size: 13.5px; color: var(--d-text-3); }
.case-card .kv { margin-top: auto; padding-top: 16px; display: flex; gap: 22px; flex-wrap: wrap; }
.case-card .kv div { display: flex; flex-direction: column; gap: 3px; }
.case-card .kv b {
  font-weight: 900; font-size: 24px; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg, #FFD9A8, #FF6633);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case-card .kv span { font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--d-text-3); }
.case-card .go {
  margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--d-text-3);
  display: inline-flex; align-items: center; gap: 7px; transition: color .22s;
}
.case-card .go svg { width: 13px; height: 13px; }
.case-card:hover .go { color: var(--rp-orange); }

/* variante sem foto: card de dados, no estilo dos slides */
.case-card--data { background: linear-gradient(160deg, #17120E 0%, #0C0A08 62%); }
.case-card--data .bd { padding-top: 26px; }
.case-card--data .big {
  font-weight: 900; font-size: clamp(52px, 5.4vw, 74px); line-height: .86; letter-spacing: -0.045em;
  background: linear-gradient(180deg, #FFD9A8 0%, #FF6633 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 4px;
}
.case-card--data .biglbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--d-text-2); margin-bottom: 14px;
}
.case-card--data .sym {
  position: absolute; right: -36px; bottom: -26px; width: 220px; opacity: .07; z-index: 0;
  pointer-events: none;
}
.case-card--data .bd { position: relative; z-index: 1; }

/* --- sistemas relacionados ------------------------------------------ */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.related a {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; min-height: 72px;
  border-radius: 12px; text-decoration: none;
  border: 1px solid var(--d-border);
  background: rgba(255,255,255,0.028);
  color: var(--d-text-1); font-weight: 600; font-size: 15.5px;
  transition: border-color .22s, background .22s, transform .22s;
}
.related a:hover { border-color: rgba(255,140,92,0.5); background: rgba(255,102,51,0.08); transform: translateY(-2px); }
.related .di {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,102,51,0.12); border: 1px solid rgba(255,102,51,0.34); color: var(--rp-orange);
}
.related .di svg { width: 18px; height: 18px; }
.related .ar { margin-left: auto; color: var(--d-text-3); }
.related .ar svg { width: 16px; height: 16px; }

/* --- lista de normas / técnica --------------------------------------- */
.normas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.norma {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(255,102,51,0.32); color: var(--orange-pale);
  background: rgba(255,102,51,0.07);
}
.s-light .norma {
  color: var(--rp-orange-700); background: #fff;
  border-color: rgba(224,74,26,0.30);
}

/* ══════════════════════════════════════════════════════════
   5 · MOBILE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .sysgrid { grid-template-columns: repeat(2, 1fr); }
  .deliver, .case-grid, .related { grid-template-columns: repeat(2, 1fr); }
  .svc-stats { grid-template-columns: repeat(2, 1fr); }
  .svc-stats .st:nth-child(2n) { border-right: none; }
  .svc-stats .st:nth-child(-n+2) { border-bottom: 1px solid var(--d-border); }
  .nav-drop { width: 520px; }
}

@media (max-width: 880px) {
  :root { --header-h: 68px; }

  /* minmax(0,1fr) + min-width:0 impedem que um filho largo (endereço, e-mail,
     título comprido) estique a coluna para além da tela. */
  .split, .form-split, .svc-split, .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .split > *, .form-split > *, .svc-split > *, .hero-grid > * { min-width: 0; }

  .svc-split, .svc-split.rev { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .svc-split.rev .fig { order: 0; }
  .svc-split .fig img { aspect-ratio: 3 / 2; }

  .deliver, .case-grid, .related { grid-template-columns: 1fr; }
  .case-card { min-height: 0; }
  .case-card .ph, .case-card .ph { height: 200px; flex-basis: 200px; }

  .svc-hero { min-height: 0; padding-top: calc(var(--header-h) + 132px); padding-bottom: 44px; }
  .svc-hero .bg { object-position: 30% 22%; }
  .svc-hero .hero-inner, .svc-hero--right .hero-inner { max-width: none; margin-left: 0; }
  .svc-hero h1 { max-width: 14ch; }
  /* no celular a foto aparece em cima e o texto sobe sobre a parte escura */
  .svc-hero .scrim, .svc-hero--right .scrim {
    background: linear-gradient(180deg,
      rgba(10,9,7,0.62) 0%, rgba(10,9,7,0.30) 22%, rgba(10,9,7,0.86) 58%,
      rgba(10,9,7,0.97) 78%, var(--deck-bg) 100%);
  }
  .svc-hero .hero-cta { gap: 10px; }
  .svc-hero .hero-cta .btn { flex: 1 1 100%; justify-content: center; }

  /* o header vira só marca + botão */
  .site-header .wrap { gap: 14px; }
  .brand img { height: 26px; }
}

/* O rodapé usava 1fr, que respeita a largura mínima do conteúdo: o e-mail
   comercial@… esticava a coluna dele e empurrava a vizinha para fora da tela.
   minmax(0,1fr) obriga as colunas a dividirem o espaço de verdade. */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  /* botão com texto longo não pode ultrapassar a tela */
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .btn-lg { padding-inline: 22px; }

  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-col a[href^="mailto"] { overflow-wrap: anywhere; }
  .sysgrid { grid-template-columns: 1fr; gap: 14px; }
  .syscard { min-height: 210px; }
  .drawer-svc { grid-template-columns: 1fr; }
  .drawer-svc a { flex-direction: row; align-items: center; min-height: 60px; gap: 13px; }
  .svc-stats { grid-template-columns: 1fr; }
  .svc-stats .st { border-right: none; border-bottom: 1px solid var(--d-border); padding: 22px var(--pad-x); }
  .svc-stats .st:last-child { border-bottom: none; }
  .case-card .kv { gap: 18px; }
  .crumbs { font-size: 10.5px; letter-spacing: .1em; }
}

/* toque confortável em qualquer tela pequena */
@media (hover: none) {
  .btn { min-height: 48px; }
  .syscard .go { opacity: 1; transform: none; }
  .nav-item:hover .nav-drop { opacity: 0; visibility: hidden; }
}