/* ===================================================================
   COMPONENTES — Center Clean (Site Institucional)
   Mecânica técnica (grid vetorial, glow, spotlight, reveal, barra de
   progresso) reaproveitada do Template Design Premium — depende só das
   variáveis de tokens.css. Composição visual (seções 6-11) é exclusiva
   deste cliente — ver Composicao Visual - Center Clean.md (Fase 5).
   NÃO copiar as seções 6-11 para outro cliente sem derivar do brief dele.
   =================================================================== */

/* ---------- Barra de progresso de leitura ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad-accent);
  z-index: 200; transition: width 0.1s linear;
}

/* ---------- Botões ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.btn:active { transform: scale(0.97); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-premium); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { background: var(--grad-accent); color: var(--color-white); box-shadow: var(--shadow-md); }
.btn-primary:hover { box-shadow: var(--shadow-glow-brand); transform: translateY(-2px); }

.btn-wa { background: var(--color-wa); color: var(--color-white); box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35); }
.btn-wa:hover { box-shadow: 0 14px 36px rgba(37, 211, 102, 0.48); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--color-ink); border: 1.5px solid rgba(0, 16, 42, 0.2); }
.btn-ghost:hover { border-color: var(--color-brand); color: var(--color-brand); }

.btn-ghost-light { background: transparent; color: var(--color-white); border: 1.5px solid rgba(255,255,255,0.35); }
.btn-ghost-light:hover { border-color: var(--color-royal-soft); background: rgba(255,255,255,0.06); }

.btn-sm { padding: 10px 18px; font-size: var(--fs-small); }

/* ---------- Navegação (plana, sem mega-menu — Fase 4) ----------
   Header fixo desativado a pedido do usuário (2026-07-20): position
   estática, rola junto com a página em vez de ficar fixo no topo.
   Mantido: fundo com blur e borda inferior (visual do cabeçalho
   continua o mesmo, só não fica "colado" na tela durante o scroll). */
.nav {
  position: static;
  z-index: 100;
  background: rgba(247, 249, 252, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 16, 42, 0.06);
  transition: box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.nav.nav--scrolled { background: rgba(247, 249, 252, 0.97); box-shadow: var(--shadow-sm); }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; gap: 12px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--color-ink); letter-spacing: var(--tracking-tight); }
.nav-logo img { height: 36px; width: auto; display: block; }
.nav-logo b { color: var(--color-brand); }

.nav-links { display: none; gap: var(--space-md); align-items: center; font-weight: 600; font-size: var(--fs-small); }
.nav-links a { position: relative; color: var(--color-graphite); padding: 4px 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--color-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-premium);
}
.nav-links a:hover { color: var(--color-ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--color-ink); }

.nav-cta { display: none; }
.nav-burger { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-sm); border: var(--border-soft); background: var(--color-white); flex-shrink: 0; transition: border-color var(--dur-fast) ease; }
.nav-burger:hover { border-color: var(--color-brand); color: var(--color-brand); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}

.mobile-menu { display: none; flex-direction: column; gap: 4px; padding: var(--space-sm) var(--space-md) var(--space-md); background: var(--color-white); border-bottom: var(--border-soft); }
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 12px 10px; border-radius: var(--radius-sm); font-weight: 600; color: var(--color-graphite); }
.mobile-menu a:hover { background: var(--color-paper-2); color: var(--color-ink); }

/* ---------- Grid vetorial + glow (fundo escuro) ---------- */
.hero-shell,
footer.site-footer {
  position: relative;
  color: var(--color-white);
  background: var(--grad-hero);
  overflow: hidden;
}
.hero-shell::before,
footer.site-footer::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  opacity: 0.42;
  z-index: 0;
  animation: float-blob 15s var(--ease-premium) infinite alternate;
}
.glow-blob--brand { width: 380px; height: 380px; background: radial-gradient(circle, var(--color-brand) 0%, transparent 70%); top: -130px; right: -70px; }
.glow-blob--royal { width: 340px; height: 340px; background: radial-gradient(circle, var(--color-royal) 0%, transparent 70%); bottom: -150px; left: -90px; animation-delay: -6s; }

@keyframes float-blob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -16px) scale(1.06); }
}

/* Grid vetorial sutil em seções claras alternadas */
.section-alt { position: relative; overflow: hidden; }
.section-alt::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,16,42,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,16,42,0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 100%);
  pointer-events: none;
}
.section-alt > .container { position: relative; z-index: 1; }

/* ---------- Spotlight (glow que segue o cursor) ---------- */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(1, 66, 160, 0.14), transparent 62%);
  opacity: 0; transition: opacity var(--dur-fast) ease; pointer-events: none; z-index: 0;
}
[data-spotlight]:hover::before { opacity: 1; }
.spec-panel[data-spotlight]::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(108, 159, 224, 0.16), transparent 62%); }

/* ---------- Vídeo de fundo do hero (só Início — preparado, não obrigatório) ----------
   Slot vazio até o cliente enviar o vídeo real (mesma regra de imagem
   documental do workspace: nunca gerado por IA, precisa ser filmagem real
   de operação/equipe). O JS (main.js, initHeroVideo) só injeta o <video>
   se o arquivo existir e carregar — sem arquivo, o gradiente institucional
   continua aparecendo normalmente, sem estado quebrado. */
.hero-video-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(155deg, rgba(0,16,42,0.86) 0%, rgba(5,26,61,0.82) 55%, rgba(10,38,80,0.78) 100%);
  pointer-events: none;
}
.hero-shell.has-video .hero-video-overlay {
  background: linear-gradient(155deg, rgba(0,16,42,0.78) 0%, rgba(5,26,61,0.68) 55%, rgba(10,38,80,0.55) 100%);
}

/* ---------- Hero editorial (sem card, sem grid — Fase 3/5) ---------- */
.hero-grid { position: relative; z-index: 2; display: grid; gap: var(--space-xl); align-items: center; padding-top: 52px; padding-bottom: 60px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-2xl); padding-top: 96px; padding-bottom: 104px; } }
.hero-copy h1 { color: var(--color-white); margin: 18px 0 20px; }
/* Correção de bug (2026-07-20, auditoria pré-deploy): a regra ficava
   escopada a ".hero-copy p.lede", mas 8 das 10 páginas usam o texto de
   apoio do hero direto num <div style="max-width..."> sem o wrapper
   .hero-copy — nessas páginas o texto herdava a cor escura do body
   sobre o fundo escuro do .hero-shell, ficando quase ilegível. A regra
   passa a valer para qualquer ".lede" (todas as ocorrências do projeto
   estão dentro de .hero-shell/fundo escuro, nenhuma em seção clara). */
.lede { color: rgba(255,255,255,0.84); max-width: 48ch; margin-bottom: 30px; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.hero-cue { font-size: var(--fs-tiny); color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.02em; }

/* Bloco de imagem documental do hero — nunca decorativo puro, é prova real */
.hero-media-frame {
  position: relative; z-index: 2;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-lg);
  min-height: 320px;
}
.hero-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- .spec-panel — placa de identificação técnica (substitui .hero-panel genérico) ---------- */
.spec-panel {
  position: relative; z-index: 2;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
}
.spec-panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-royal-soft);
  margin-bottom: var(--space-sm);
  display: flex; align-items: center; gap: 8px;
}
.spec-panel-title::before { content: ""; width: 14px; height: 1.5px; background: var(--color-royal-soft); }
.spec-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.spec-row:last-child { border-bottom: none; }
.spec-label { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.spec-value { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--color-white); text-align: right; }

@media (max-width: 480px) {
  .spec-panel { padding: var(--space-sm); }
  .spec-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .spec-value { text-align: left; }
}

/* ---------- Split section ---------- */
.split-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
@media (min-width: 860px) { .split-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }

/* ---------- .sector-grid — grid denso de segmentos (substitui .card-grid.cols-3 genérico) ---------- */
.sector-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--border-soft);
}
@media (min-width: 640px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sector-grid { grid-template-columns: repeat(3, 1fr); } }

.sector-item {
  position: relative;
  padding: var(--space-md) var(--space-sm);
  border-bottom: var(--border-soft);
  border-right: var(--border-soft);
  transition: background var(--dur-fast) ease;
}
.sector-grid > .sector-item:nth-child(3n) { border-right: none; }
@media (max-width: 999px) {
  .sector-grid > .sector-item:nth-child(2n) { border-right: none; }
}
@media (max-width: 639px) {
  .sector-item { border-right: none !important; }
}
.sector-item:hover { background: rgba(1, 66, 160, 0.03); }
.sector-item .ico {
  width: 34px; height: 34px;
  color: var(--color-brand);
  margin-bottom: 14px;
}
.sector-item .ico .ic { width: 26px; height: 26px; }
.sector-item h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sector-item p { color: var(--color-gray); font-size: var(--fs-small); }
.sector-item a.sector-link {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 10px; font-size: var(--fs-tiny); font-weight: 700; color: var(--color-brand);
}

/* Item usado dentro do carrossel de segmentos (ícone + label, compacto) —
   antes era grid fixo (.sector-strip), convertido para .hcarousel-card no
   HTML (2026-07-20), mantendo só a aparência do item aqui.
   Correção de bug: quando combinado com .hcarousel-card (padding 30px +
   width 150px inline), o conteúdo ficava espremido — .sector-strip-item
   agora sobrescreve o padding do .hcarousel-card explicitamente. */
.sector-strip-item.hcarousel-card {
  padding: var(--space-sm) var(--space-xs);
  width: 138px;
}
.sector-strip-item {
  background: var(--color-white);
  border-radius: var(--radius);
  border: var(--border-soft);
  padding: var(--space-sm) var(--space-xs);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.sector-strip-item:hover { background: var(--color-paper-2); transform: translateY(-2px); }
.sector-strip-item .ico { width: 28px; height: 28px; color: var(--color-brand); }
.sector-strip-item .ico .ic { width: 22px; height: 22px; }
.sector-strip-item span { font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.02em; color: var(--color-graphite); }

/* ---------- .process-rail — trilho numerado do processo consultivo (novo, sem equivalente no template) ---------- */
.process-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 800px) {
  .process-rail { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
  .process-rail::before {
    content: "";
    position: absolute; top: 22px; left: 6%; right: 6%; height: 2px;
    background: linear-gradient(90deg, var(--color-brand), var(--color-royal));
    z-index: 0;
  }
}
.process-step { position: relative; z-index: 1; }
.process-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  margin-bottom: var(--space-sm);
}
.process-step h4 { font-size: 1.05rem; margin-bottom: 6px; }
.process-step p { color: var(--color-gray); font-size: var(--fs-small); }

/* ---------- .partner-lockup — bloco de linha de marca parceira (novo) ---------- */
.partner-lockup {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: var(--border-soft);
}
@media (min-width: 860px) { .partner-lockup { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } }
.partner-lockup--primary { padding-top: var(--space-xl); }
.partner-lockup--secondary { opacity: 0.94; }
.partner-lockup--secondary .partner-media { min-height: 220px; }
.partner-lockup--primary .partner-media { min-height: 320px; }

.partner-media {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.partner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.partner-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-tiny); font-weight: 800; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-brand); margin-bottom: var(--space-xs);
}
.partner-lockup--primary h2 { font-size: var(--fs-h1); }
.partner-lockup--secondary h3 { font-size: var(--fs-h2); font-family: var(--font-display); }
.partner-lockup p { color: var(--color-graphite); margin: var(--space-xs) 0 var(--space-sm); }

.partner-sublines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-xs); }
.partner-subline-chip {
  font-size: var(--fs-tiny); font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-paper-2); color: var(--color-graphite);
  border: var(--border-soft);
}

.partner-logo-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: flex-start;
  padding: var(--space-md) 0;
}
.partner-logo-grid img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.75); transition: filter var(--dur-fast) ease; }
.partner-logo-grid img:hover { filter: none; }

/* ---------- .timeline-rail — linha do tempo (marcadores discretos, Fase 5) ---------- */
.timeline-rail {
  position: relative;
  padding-left: 28px;
  border-left: 2px solid rgba(0, 16, 42, 0.12);
}
.timeline-item { position: relative; padding-bottom: var(--space-lg); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute; left: -34px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-brand);
  border: 3px solid var(--color-paper);
  box-shadow: 0 0 0 2px rgba(1, 66, 160, 0.25);
}
.timeline-year {
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  color: var(--color-brand); margin-bottom: 4px;
}
.timeline-item p { color: var(--color-graphite); max-width: 56ch; }

/* ---------- Bloco de encerramento de página (CTA fixo — Fase 4) ---------- */
.page-close {
  background: var(--color-royal);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--space-md);
  text-align: center;
}
@media (min-width: 700px) {
  .page-close { grid-template-columns: 1fr auto; text-align: left; align-items: center; }
}
.page-close h3 { color: var(--color-white); font-size: 1.4rem; margin-bottom: 8px; }
.page-close-info { display: flex; flex-wrap: wrap; gap: 18px; font-size: var(--fs-small); color: rgba(255,255,255,0.85); }
.page-close-info span { display: flex; align-items: center; gap: 7px; }
.page-close-info .ic { width: 16px; height: 16px; color: var(--color-royal-soft); }
.page-close-actions { display: flex; justify-content: center; }
@media (min-width: 700px) { .page-close-actions { justify-content: flex-end; } }

/* ---------- Mapa / localização ---------- */
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* ---------- FAQ ---------- */
details.faq { border: var(--border-soft); background: var(--color-white); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 10px; transition: box-shadow var(--dur-fast) ease; }
details.faq:hover { box-shadow: var(--shadow-sm); }
details.faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
.faq-toggle { position: relative; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--color-paper-2); }
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--color-brand);
  transition: transform var(--dur-fast) var(--ease-premium);
}
.faq-toggle::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
details.faq[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
details.faq p { margin-top: 14px; color: var(--color-gray); font-size: var(--fs-small); }

/* ---------- Imagem documental / ilustrativa (slots) ---------- */
.section-illustration {
  border-radius: var(--radius);
  background-size: cover; background-position: center;
  min-height: 260px; box-shadow: var(--shadow-sm); border: var(--border-soft);
  overflow: hidden;
}
.section-illustration img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder de imagem DOCUMENTAL pendente — nunca preencher com imagem
   gerada por IA sem rótulo explícito, ver geracao-imagens-design.md */
.img-placeholder {
  position: relative;
  background: var(--color-paper-2);
  background-image:
    linear-gradient(rgba(0,16,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,16,42,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 2px dashed rgba(0, 16, 42, 0.22);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  color: var(--color-gray); font-size: var(--fs-small); font-weight: 600; padding: var(--space-md);
  min-height: 240px;
}
.img-placeholder .ic { width: 30px; height: 30px; color: rgba(0, 16, 42, 0.32); }
.img-placeholder .ph-label { font-size: var(--fs-tiny); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-pending); }

/* ---------- Rodapé ---------- */
/* Rodapé compactado (2026-08-01): o topo era var(--space-2xl) fixo
   (128px) e somava com os 84px de margem do CTA acima, abrindo quase
   210px de respiro antes das colunas. Agora escala com a viewport. */
footer.site-footer { padding: clamp(52px, 6.5vw, 86px) 0 var(--space-md); }
footer.site-footer a { color: var(--color-white); }
/* A margem do CTA vem inline no HTML das 10 páginas, então só um
   !important a alcança daqui — preferível a editar as dez. */
footer.site-footer .page-close { margin-bottom: var(--space-lg) !important; }
/* Gap vertical menor que o horizontal: as colunas continuam separadas
   na horizontal, mas empilhadas no celular não abrem 52px entre blocos. */
.footer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-grid h4 { color: var(--color-white); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-xs); }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-grid p, .footer-grid li { font-size: var(--fs-small); color: rgba(255,255,255,0.7); }
.footer-grid li a:hover, .footer-grid p a:hover { color: var(--color-royal-soft); }
.footer-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-sm); font-size: var(--fs-tiny); color: rgba(255,255,255,0.55); display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }

/* ---------- Dock mobile ---------- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 90; display: flex; gap: 10px;
  background: rgba(0, 16, 42, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 10px;
  box-shadow: var(--shadow-lg);
}
.dock a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: var(--fs-small); padding: 14px 10px; border-radius: 14px; text-decoration: none; transition: transform var(--dur-fast) ease; }
.dock a:active { transform: scale(0.96); }
.dock .dock-wa { background: var(--color-wa); color: var(--color-white); }
.dock .dock-tel { background: rgba(255,255,255,0.1); color: var(--color-white); border: 1px solid rgba(255,255,255,0.18); }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- Faixa de aviso (dado a confirmar com o cliente) ---------- */
.dev-banner {
  background: var(--color-pending-bg);
  color: var(--color-pending);
  text-align: center;
  font-size: var(--fs-tiny);
  font-weight: 700;
  padding: 10px var(--space-md);
  border-bottom: 1px solid rgba(180, 83, 9, 0.25);
}

/* ---------- Reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(22px) scale(0.985); transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium); transition-delay: var(--rv-delay, 0s); }
.rv.on { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .section { padding: 108px 0; }
}

/* ===================================================================
   EXPANSÃO DE CONTEÚDO (2026-07-20) — componentes novos para densidade
   maior por página, mais o sistema de Blog. Todos exclusivos deste
   cliente, seguindo a mesma lógica sóbria/técnica da Fase 5.
   =================================================================== */

/* ---------- .stat-strip — faixa de números reais (nunca inventados) ----------
   Correção de bug (2026-07-20): sem position/z-index próprios, esta faixa
   ficava no mesmo nível de pintura do fluxo normal, ATRÁS do vídeo de
   fundo do hero (.hero-video-slot, z-index:0) e do overlay
   (.hero-video-overlay, z-index:1) — elementos posicionados com z-index,
   mesmo 0/1, pintam por cima de conteúdo não posicionado. Resultado
   visual: o texto piscava (aparecia por uma fração de segundo durante o
   reveal-on-scroll e era coberto de novo). Mesmo z-index do .hero-grid
   (já correto) resolve, mantendo a faixa sempre visível sobre o vídeo. */
.stat-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}
@media (min-width: 700px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-item { text-align: center; padding: 0 var(--space-xs); border-right: 1px solid rgba(255,255,255,0.14); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--color-white); line-height: 1; margin-bottom: 6px; }
.stat-item span { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.65); }
.stat-strip--light .stat-item { border-right: 1px solid rgba(0,16,42,0.1); }
.stat-strip--light .stat-num { color: var(--color-ink); }
.stat-strip--light .stat-item span { color: var(--color-gray); }

/* ---------- .product-carousel-card — carrossel arrastável de produto por linha
   (Tork/Oleak, página Linhas, 2026-07-23) ---------- */
/* Card compactado (2026-08-01): de 220px com padding de 20px para 164px
   com 12px. A imagem é `contain`, então o produto não distorce — só a
   caixa encolhe, e a altura do bloco cai cerca de 30%. */
.product-carousel-card.hcarousel-card {
  width: 164px;
  padding: 12px;
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
@media (min-width: 640px) {
  .product-carousel-card.hcarousel-card { width: 182px; }
}
.product-carousel-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}
.product-carousel-card .ph-product-name {
  font-size: var(--fs-tiny); font-weight: 700; color: var(--color-ink); text-align: center;
  line-height: 1.3;
}
/* Quando o card ainda não tem foto real (.product-media-slot combinado),
   reaproveita o mesmo estado tracejado já usado em outros slots do site. */
.product-carousel-card.product-media-slot {
  aspect-ratio: auto;
  padding: 12px;
}

/* A variante compacta do trilho (.hcarousel--tight) fica junto da
   definição de .hcarousel, mais abaixo neste arquivo: as duas têm a
   mesma especificidade e a ordem no arquivo decide quem vence. */

/* ---------- .client-logo-card — carrossel de empresas atendidas (2026-07-23) ----------
   Slot aguardando logo real de cada empresa-cliente citada pelo usuário.
   Nunca gerar logo por IA: enquanto o arquivo real não chega, mostra só o
   nome da empresa centralizado. Ao receber o arquivo, adicionar
   <img src="..." alt="Logo <Empresa>"> dentro do card — o CSS abaixo já
   trata os dois estados (com/sem imagem), mesma lógica do .product-media-slot. */
.client-logo-card.hcarousel-card {
  width: 200px;
  padding: var(--space-sm);
}
.client-logo-card {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-white);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  text-align: center;
}
.client-logo-card .ph-client-name {
  font-size: var(--fs-small); font-weight: 700; color: var(--color-graphite);
}
.client-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) opacity(0.75); transition: filter var(--dur-fast) ease; }
.client-logo-card:hover img { filter: none; }

/* ---------- .wedge-banner — achado central do diagnóstico de mercado ---------- */
.wedge-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--grad-accent);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  flex-wrap: wrap;
}
.wedge-banner .ico { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.16); border-radius: 50%; }
.wedge-banner .ico .ic { width: 24px; height: 24px; }
/* Variante 3D (badge-3d) some over the flat circle above — profundidade real com sombra em camadas */
.wedge-banner .ico.badge-3d { background: linear-gradient(155deg, rgba(255,255,255,0.28), rgba(255,255,255,0.1)); border-radius: 16px; }
.wedge-banner p { margin: 0; font-size: 1.02rem; font-weight: 600; max-width: 62ch; }
.wedge-banner strong { font-weight: 800; }

/* ---------- .content-block — texto institucional mais longo (parágrafos múltiplos) ---------- */
.content-block { max-width: 68ch; }
.content-block p { color: var(--color-graphite); margin-bottom: var(--space-sm); }
.content-block p:last-child { margin-bottom: 0; }
.content-block h3 { margin-top: var(--space-md); margin-bottom: 8px; }

/* ---------- .credential-grid — grid de credenciais/certificações/selos ---------- */
.credential-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
@media (min-width: 640px) { .credential-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .credential-grid { grid-template-columns: repeat(4, 1fr); } }
/* Correção de bug (2026-07-20): dentro da metade de um .split-grid (ex:
   "O que a Center Clean não é", Sobre), o breakpoint de 640px acima é
   medido pela largura da VIEWPORT, não do espaço real disponível —
   forçava 2 colunas mesmo com pouco espaço, espremendo o texto (ver
   print do usuário). Container query resolve isso medindo o espaço
   real do próprio .split-grid, não da tela inteira. */
.split-grid { container-type: inline-size; container-name: split; }
.split-grid .credential-grid { grid-template-columns: 1fr; }
@container split (min-width: 420px) {
  .split-grid .credential-grid { grid-template-columns: repeat(2, 1fr); }
}
.credential-item {
  background: var(--color-white);
  border: var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  display: flex; flex-direction: column; gap: 8px;
}
.credential-item .ico { width: 30px; height: 30px; color: var(--color-brand); }
.credential-item .ico .ic { width: 22px; height: 22px; }
.credential-item h4 { font-size: 0.98rem; }
.credential-item p { color: var(--color-gray); font-size: var(--fs-tiny); margin: 0; }

/* ---------- .comparison-table — distribuidora comum vs. Center Clean ---------- */
.comparison-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.comparison-table th, .comparison-table td { padding: 16px 20px; text-align: left; border-bottom: var(--border-soft); font-size: var(--fs-small); }
.comparison-table th { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; background: var(--color-paper-2); color: var(--color-ink); }
.comparison-table th.hl-col { background: var(--color-brand); color: var(--color-white); }
.comparison-table td.hl-col { background: rgba(1,66,160,0.04); font-weight: 700; color: var(--color-ink); }
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table .ic-yes { color: var(--color-brand); width: 18px; height: 18px; }
.comparison-table .ic-no { color: var(--color-gray-light); width: 18px; height: 18px; }

/* ---------- .quote-block — citação/afirmação de posicionamento ---------- */
.quote-block {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  border-left: 4px solid var(--color-brand);
  background: var(--color-paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.quote-block p { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--color-ink); line-height: 1.3; margin: 0; }
.quote-block cite { display: block; margin-top: 12px; font-size: var(--fs-small); font-weight: 700; color: var(--color-brand); font-style: normal; }

/* ---------- .segment-detail-card — cartão de aprofundamento por segmento (Segmentos) ---------- */
.segment-detail-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  background: var(--color-white);
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
@media (min-width: 760px) { .segment-detail-card { grid-template-columns: 220px 1fr; align-items: start; } }
.segment-detail-card .seg-icon-wrap { display: flex; align-items: center; gap: 12px; }
.segment-detail-card .seg-icon-wrap .ico { width: 46px; height: 46px; border-radius: 12px; background: var(--color-paper-2); color: var(--color-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.segment-detail-card .seg-icon-wrap .ico .ic { width: 26px; height: 26px; }
.segment-detail-card h4 { font-size: 1.1rem; }
.segment-detail-card ul { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.segment-detail-card li { font-size: var(--fs-small); color: var(--color-graphite); display: flex; gap: 8px; align-items: flex-start; }
.segment-detail-card li .ic { width: 14px; height: 14px; color: var(--color-brand); margin-top: 3px; flex-shrink: 0; }

/* ---------- BLOG — grid de artigos, card, página/seção de post ---------- */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .blog-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.blog-card-media { aspect-ratio: 16/10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-media.img-placeholder { min-height: 0; border-radius: 0; border-width: 1px; }
.blog-card-body { padding: var(--space-sm) var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-tag { font-size: var(--fs-tiny); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-brand); }
.blog-card-body h3 { font-size: 1.15rem; margin-top: 2px; }
.blog-card-body p { color: var(--color-gray); font-size: var(--fs-small); flex: 1; }
.blog-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-tiny); color: var(--color-gray-light); margin-top: 6px; padding-top: 10px; border-top: var(--border-soft); }
.blog-card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-brand); font-size: var(--fs-small); margin-top: 4px; }

/* Post de blog (artigo completo) */
.blog-post-header { max-width: 68ch; margin: 0 auto var(--space-lg); text-align: left; }
.blog-post-meta { display: flex; gap: 16px; align-items: center; font-size: var(--fs-tiny); color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-bottom: var(--space-xs); }
.blog-post-body { max-width: 68ch; margin: 0 auto; }
.blog-post-body p { color: var(--color-graphite); margin-bottom: var(--space-sm); font-size: 1.05rem; line-height: 1.75; }
.blog-post-body h2 { margin-top: var(--space-lg); }
.blog-post-body ul { margin: var(--space-xs) 0 var(--space-sm) 0; padding-left: 22px; }
.blog-post-body li { color: var(--color-graphite); margin-bottom: 6px; }
.blog-post-cta {
  margin-top: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.blog-post-cta p { margin: 0; font-weight: 700; color: var(--color-ink); }

/* ---------- .accordion-list — lista de perguntas mais extensa que FAQ padrão ---------- */
.section-divider { display: flex; align-items: center; gap: 14px; margin: var(--space-lg) 0; }
.section-divider::before, .section-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,16,42,0.1); }
.section-divider span { font-size: var(--fs-tiny); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gray); }

/* ===================================================================
   INTERATIVIDADE (2026-07-20) — elementos que respondem a ação real do
   usuário (clique/scroll), não só decoração de hover. Objetivo:
   elevar percepção de profissionalismo em desktop e mobile.
   =================================================================== */

/* ---------- Botão "voltar ao topo" (aparece após rolar, desktop e mobile) ---------- */
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 95;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-premium), background var(--dur-fast) ease;
}
.back-to-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { background: var(--color-brand); }
.back-to-top .ic { width: 18px; height: 18px; }
@media (min-width: 900px) { .back-to-top { right: 26px; bottom: 26px; } }
/* No mobile, o dock de WhatsApp/Ligar já ocupa a base da tela — subir o botão */
@media (max-width: 899px) { .back-to-top { bottom: 86px; } }

/* ---------- Toast de feedback (copiar telefone/endereço com 1 clique) ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--color-ink);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-premium);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { width: 16px; height: 16px; color: var(--color-royal-soft); }
@media (max-width: 899px) { .toast { bottom: 94px; } }

/* ---------- Elemento copiável (dado de contato) — sinaliza affordance de clique ---------- */
.copyable {
  cursor: pointer;
  border-bottom: 1px dashed rgba(1, 66, 160, 0.4);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.copyable:hover { color: var(--color-brand); border-color: var(--color-brand); }
.copyable .ic { width: 14px; height: 14px; opacity: 0.7; }
.copyable.on-dark { border-bottom-color: rgba(108, 159, 224, 0.5); }
.copyable.on-dark:hover { color: var(--color-royal-soft); border-color: var(--color-royal-soft); }

/* ---------- Destaque temporário de seção-alvo (chegada via âncora entre páginas) ---------- */
@keyframes anchor-flash {
  0% { box-shadow: 0 0 0 0 rgba(1, 66, 160, 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(1, 66, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 66, 160, 0); }
}
.anchor-target-flash { animation: anchor-flash 1.4s var(--ease-premium) 1; border-radius: var(--radius); }

/* ---------- Segmento ativo no seletor da tira/segmentos (feedback de clique) ---------- */
.sector-strip-item:active, .sector-item:active { transform: scale(0.97); }

/* ---------- WhatsApp CTA com indicador "ao vivo" (pulso sutil, respeita reduced-motion) ---------- */
.btn-wa .wa-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
.btn-wa .wa-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  animation: pulse-ring 2.4s var(--ease-premium) infinite;
}
@keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }

/* ---------- Tooltip simples (título nativo estilizado via atributo data-tip) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--fs-tiny);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
  z-index: 50;
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   REFINAMENTO 2026-07-20 — carrossel horizontal, elementos 3D (tilt de
   cursor + profundidade em camadas), CTA sticky mobile e ajustes de
   responsividade. Tudo respeitando prefers-reduced-motion.
   =================================================================== */

/* ---------- .hcarousel — carrossel horizontal com scroll-snap (touch-friendly) ---------- */
.hcarousel-wrap { position: relative; }
.hcarousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-md);
  /* Correção de bug (2026-07-20): padding vertical era 4px/20px — a sombra
     de elevação do hover (.card-3d, .hcarousel-card) chega a ~30px e era
     cortada pela borda do trilho de scroll, fazendo o efeito 3D parecer
     quebrado mesmo quando o CSS estava correto. */
  padding: 34px var(--space-md) 40px;
  margin: -30px calc(var(--space-md) * -1) -20px;
  -webkit-overflow-scrolling: touch;
  /* Barra de scroll ocultada (2026-07-20): já existem botões prev/next e
     dots como controle de navegação — a scrollbar nativa era redundante
     e quebrava a limpeza visual do carrossel. Scroll por toque/arraste
     continua funcionando normalmente, só a barra visual é removida. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hcarousel::-webkit-scrollbar { display: none; height: 0; }
.hcarousel > * { scroll-snap-align: start; flex-shrink: 0; }

/* ---------- .hcarousel--tight — trilho de produto com menos altura ----------
   O trilho padrão reserva 34px acima e 40px abaixo para a sombra do hover
   não ser cortada pelo overflow do scroll, sobrando 24px de altura real.
   Nos carrosséis de produto isso somava altura demais. Aqui o espaço da
   sombra continua existindo, só é reabsorvido por margem negativa maior:
   sobram 4px. Precisa vir DEPOIS de .hcarousel — mesma especificidade,
   quem decide é a ordem. */
.hcarousel--tight {
  padding: 30px var(--space-md) 34px;
  margin: -28px calc(var(--space-md) * -1) -32px;
}
.hcarousel--tight + .hcarousel-nav { margin-top: var(--space-xs); }

.hcarousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--space-sm);
}
/* Otimização mobile (2026-07-20): antes, botões prev/next E dots ficavam
   escondidos juntos abaixo de 700px — no mobile o usuário não tinha
   nenhum indicador de progresso do carrossel, só o swipe às escuras.
   Agora os dots (indicador de posição) ficam visíveis em qualquer
   largura; só os botões prev/next (redundantes com o gesto de swipe
   em touch) continuam reservados para desktop/mouse. */
.hcarousel-btn { display: none; }
@media (min-width: 700px) {
  .hcarousel-btn {
    display: flex;
    width: 42px; height: 42px; border-radius: 50%;
    border: var(--border-soft);
    background: var(--color-white);
    color: var(--color-ink);
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, opacity var(--dur-fast) ease;
  }
  .hcarousel-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
  .hcarousel-btn:disabled { opacity: 0.35; cursor: default; }
  .hcarousel-btn .ic { width: 18px; height: 18px; }
}
.hcarousel-dots { display: flex; gap: 6px; margin: 0 8px; }
.hcarousel-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(0,16,42,0.16);
  transition: background var(--dur-fast) ease, width var(--dur-fast) ease;
  cursor: pointer;
}
.hcarousel-dot.active { background: var(--color-brand); width: 18px; border-radius: 4px; }
/* Alvo de toque real maior que o ponto visual (acessibilidade mobile) —
   inset moderado para não sobrepor o dot vizinho (gap real é só 6px) */
.hcarousel-dot { position: relative; }
.hcarousel-dot::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: -3px; right: -3px; }

/* Card usado dentro do carrossel de segmentos/linhas/blog (largura fixa) */
.hcarousel-card {
  width: 260px;
  background: var(--color-white);
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
  /* Correção de bug (2026-07-20): todo .hcarousel-card recebe tilt 3D por
     padrão — antes só quem tinha .card-3d explícito no HTML funcionava,
     deixando cards idênticos visualmente "mortos" (sem efeito) ao lado
     de outros com efeito, dentro do mesmo carrossel e entre páginas. */
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
}
.hcarousel-card:hover {
  box-shadow: 0 24px 48px -10px rgba(0, 16, 42, 0.22), 0 0 0 1px rgba(1, 66, 160, 0.1);
}
@media (min-width: 640px) { .hcarousel-card { width: 300px; } }
.hcarousel-card .ico { width: 40px; height: 40px; color: var(--color-brand); margin-bottom: var(--space-sm); }
.hcarousel-card .ico .ic { width: 26px; height: 26px; }
.hcarousel-card h4 { font-size: 1.05rem; margin-bottom: 6px; }
.hcarousel-card p { color: var(--color-gray); font-size: var(--fs-small); }

/* Card de depoimento/citação técnica, mais largo, usado no carrossel do blog */
.hcarousel-card--wide { width: 320px; }
@media (min-width: 640px) { .hcarousel-card--wide { width: 380px; } }

/* ---------- Elementos 3D — tilt de cursor (profundidade real, não decoração plana) ---------- */
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform var(--dur-fast) var(--ease-premium);
  will-change: transform;
}
.tilt-3d-layer { transform: translateZ(0); transition: transform var(--dur-fast) var(--ease-premium); }

/* Painel institucional com profundidade (usado no spec-panel do hero) */
.depth-panel {
  position: relative;
  perspective: 1000px;
}
.depth-panel .spec-panel {
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.35s var(--ease-premium);
}

/* Ícone com camada flutuante (efeito de profundidade sutil no hover) */
.icon-3d {
  position: relative;
  display: inline-flex;
  transform-style: preserve-3d;
}
.icon-3d::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1,66,160,0.14), transparent 70%);
  transform: translateZ(-8px) scale(0.9);
  opacity: 0;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.credential-item:hover .icon-3d::before,
.sector-item:hover .icon-3d::before,
.hcarousel-card:hover .icon-3d::before { opacity: 1; transform: translateZ(-8px) scale(1.15); }

/* Camadas de profundidade no glow-blob (paralaxe leve com scroll, JS) */
.glow-blob { will-change: transform; }

/* Cartão com elevação 3D ao hover (sombra em camadas + leve rotação) */
.card-3d {
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium);
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
}
.card-3d:hover {
  box-shadow: 0 30px 60px -12px rgba(0, 16, 42, 0.28), 0 0 0 1px rgba(1, 66, 160, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .tilt-3d, .depth-panel .spec-panel, .card-3d { transform: none !important; transition: none !important; }
}

/* ---------- Selo/badge 3D (usado na ficha institucional e em números) ---------- */
.badge-3d {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  background: linear-gradient(155deg, var(--color-brand), var(--color-royal));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -3px 0 rgba(0,0,0,0.15) inset,
    0 14px 26px rgba(1,66,160,0.32);
  color: var(--color-white);
  transform: perspective(600px) rotateX(6deg);
}
.badge-3d .ic { width: 26px; height: 26px; }

/* ---------- Mid-CTA — chamada contextual entre seções (não é sticky,
   não compete com o dock mobile fixo já existente) ---------- */
.mid-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--color-paper-2);
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}
.mid-cta p { margin: 0; font-weight: 700; color: var(--color-ink); font-size: var(--fs-small); }
.mid-cta .btn-sm { flex-shrink: 0; }
@media (max-width: 480px) { .mid-cta { flex-direction: column; align-items: stretch; text-align: center; } }

/* ===================================================================
   ROADMAP SCROLL-DRIVEN (2026-07-20) — timeline da página Sobre com
   linha de progresso que preenche conforme o scroll e marcos que
   "acendem" ao entrar no centro da tela. Substitui o .timeline-rail
   estático anterior nesta seção específica (o .timeline-rail continua
   existindo no CSS para uso futuro em outro contexto, se necessário).
   =================================================================== */
.roadmap-section { position: relative; }
.roadmap-route { position: relative; isolation: isolate; }

/* Curva SVG dinâmica: o JS conecta o centro real dos quatro marcos.
   O traço base permanece discreto; o azul avança conforme a rolagem. */
.roadmap-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.roadmap-rail-base,
.roadmap-rail-fill {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.roadmap-rail-base { stroke: rgba(0, 16, 42, 0.10); }
.roadmap-rail-fill {
  stroke: var(--color-brand);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.12s linear;
}

.roadmap-track {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(4.5rem, 8vw, 7.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.roadmap-stop {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(10px, 1.5vw, 22px);
  min-height: 320px;
  padding-block: clamp(24px, 4vw, 52px);
}
.roadmap-stop-card {
  grid-row: 1;
  grid-column: 1 / 6;
  align-self: center;
  padding: var(--space-md) 0 0;
  border-top: 1px solid rgba(0, 16, 42, 0.16);
  max-width: 440px;
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease-premium), transform 0.55s var(--ease-premium), border-color 0.35s ease;
}
.roadmap-stop:nth-child(even) .roadmap-stop-card { grid-column: 8 / 13; }
.roadmap-stop-card h3 { margin-bottom: 10px; font-size: clamp(1.18rem, 2vw, 1.52rem); }
.roadmap-stop-card p { color: var(--color-graphite); margin: 0; }
.roadmap-stop-year {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-pill);
  background: rgba(1, 66, 160, 0.08);
  color: var(--color-brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.roadmap-stop-kicker {
  display: block;
  margin: -4px 0 10px;
  color: var(--color-brand);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Os nós alternam levemente entre as duas colunas centrais; o SVG usa
   essas coordenadas para formar a curva em S sem invadir o conteúdo. */
.roadmap-stop-dot {
  grid-row: 1;
  grid-column: 7;
  justify-self: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 3px solid rgba(1, 66, 160, 0.24);
  position: relative;
  z-index: 3;
  transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium), transform 0.4s var(--ease-premium), box-shadow 0.4s ease;
}
.roadmap-stop:nth-child(even) .roadmap-stop-dot { grid-column: 6; }
.roadmap-stop.is-active .roadmap-stop-dot {
  border-color: var(--color-brand);
  background: var(--color-brand);
  transform: scale(1.16);
  box-shadow: 0 0 0 7px rgba(1, 66, 160, 0.12);
}

/* Slots documentais orgânicos: mantêm a seção visual sem fingir que
   uma imagem de banco ou IA representa a operação real do cliente. */
.roadmap-stop-media {
  grid-row: 1;
  grid-column: 8 / 13;
  width: 100%;
  max-width: 430px;
  min-height: 250px;
  aspect-ratio: 4 / 3;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-gray);
  background:
    radial-gradient(circle at 28% 24%, rgba(108, 159, 224, 0.18), transparent 38%),
    var(--color-paper-2);
  border: 1px dashed rgba(1, 66, 160, 0.28);
  border-radius: 44px 14px 68px 20px;
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease-premium), transform 0.65s var(--ease-premium), border-color 0.35s ease;
}
.roadmap-stop:nth-child(even) .roadmap-stop-media {
  grid-column: 1 / 6;
  border-radius: 14px 62px 20px 48px;
}
.roadmap-stop-media .ic { width: 32px; height: 32px; color: var(--color-brand); }
.roadmap-stop-media .ph-label {
  color: var(--color-brand);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.roadmap-stop-media figcaption { max-width: 30ch; font-size: var(--fs-small); line-height: 1.5; }
.roadmap-stop--featured .roadmap-stop-card { border-top: 2px solid var(--color-brand); }
.roadmap-stop--featured .roadmap-stop-media {
  min-height: 280px;
  border-radius: 66px 18px 56px 24px;
  background:
    radial-gradient(circle at 72% 24%, rgba(1, 66, 160, 0.18), transparent 42%),
    var(--color-paper-2);
}

/* Conteúdo continua legível sem JS. A atenuação só entra depois que o
   caminho foi calculado, evitando uma seção apagada em caso de falha. */
.roadmap-section.roadmap-ready .roadmap-stop-card,
.roadmap-section.roadmap-ready .roadmap-stop-media {
  opacity: 0.62;
  transform: translateY(14px) scale(0.985);
}
.roadmap-section.roadmap-ready .roadmap-stop.is-active .roadmap-stop-card,
.roadmap-section.roadmap-ready .roadmap-stop.is-active .roadmap-stop-media {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.roadmap-stop.is-active .roadmap-stop-card { border-color: rgba(1, 66, 160, 0.48); }
.roadmap-stop.is-active .roadmap-stop-media { border-color: rgba(1, 66, 160, 0.48); }

@media (prefers-reduced-motion: reduce) {
  .roadmap-stop-card,
  .roadmap-stop-media,
  .roadmap-stop-dot,
  .roadmap-rail-fill { transition: none; }
  .roadmap-section.roadmap-ready .roadmap-stop-card,
  .roadmap-section.roadmap-ready .roadmap-stop-media { opacity: 1; transform: none; }
}

/* Mobile: percurso ondula apenas no corredor lateral; texto e imagem
   permanecem em uma coluna ampla, sem min-height baseado em viewport.
   Correção (auditoria pré-deploy 2026-07-20): breakpoint estendido de
   719px para 767px — na faixa 720-767px (tablets retrato pequenos,
   ex: 744px), o grid desktop de 12 colunas reservava só ~260px de
   largura para .roadmap-stop-media, que exige ~333px (aspect-ratio
   4/3 com min-height 250px), espremendo a imagem contra o texto. */
@media (max-width: 767px) {
  .roadmap-track { gap: clamp(3rem, 12vw, 4.75rem); }
  .roadmap-stop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    min-height: 0;
    padding: var(--space-sm) 0 var(--space-md) 64px;
  }
  .roadmap-stop-dot {
    position: absolute;
    left: 24px;
    top: 34px;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
  }
  .roadmap-stop:nth-child(even) .roadmap-stop-dot { left: 38px; }
  .roadmap-stop.is-active .roadmap-stop-dot { transform: translateX(-50%) scale(1.14); }
  .roadmap-stop-card,
  .roadmap-stop:nth-child(even) .roadmap-stop-card,
  .roadmap-stop-media,
  .roadmap-stop:nth-child(even) .roadmap-stop-media {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .roadmap-stop-card { padding-top: var(--space-sm); }
  .roadmap-stop-media { min-height: 190px; aspect-ratio: 4 / 3; padding: var(--space-sm); }
  .roadmap-stop--featured .roadmap-stop-media { min-height: 210px; aspect-ratio: 16 / 10; }
}

@media (max-width: 420px) {
  .roadmap-stop { padding-left: 54px; }
  .roadmap-stop-dot { left: 20px; }
  .roadmap-stop:nth-child(even) .roadmap-stop-dot { left: 30px; }
  .roadmap-stop-media figcaption { font-size: var(--fs-tiny); }
}

/* ===================================================================
   DIVERSIFICAÇÃO DE LAYOUT (2026-07-20) — mesma base de componentes
   (.credential-grid, .wedge-banner, .process-rail etc.), mas com
   variações de composição por página para não ler como "mesma caixa
   branca repetida". Nenhum componente novo — só variantes de layout.
   =================================================================== */

/* ---------- .credential-grid--featured — 1 item grande + resto compacto
   (grid assimétrico, quebra o padrão "N caixas iguais") ---------- */
.credential-grid--featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 720px) {
  .credential-grid--featured {
    grid-template-columns: 1.4fr 1fr;
    grid-auto-rows: auto;
  }
  .credential-grid--featured .credential-item--lead {
    grid-row: 1 / -1;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .credential-grid--featured .credential-item--lead .ico { width: 44px; height: 44px; margin-bottom: var(--space-sm); }
  .credential-grid--featured .credential-item--lead h4 { font-size: 1.25rem; margin-bottom: 8px; }
  .credential-grid--featured .credential-item--lead p { font-size: var(--fs-small); }
}

/* ---------- .num-bg-card — número grande de fundo, motivo gráfico sem foto ---------- */
.num-bg-card {
  position: relative;
  background: var(--color-white);
  border: var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
  overflow: hidden;
}
.num-bg-card::before {
  content: attr(data-num);
  position: absolute;
  top: -0.15em; right: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5rem;
  line-height: 1;
  color: rgba(1, 66, 160, 0.07);
  pointer-events: none;
  user-select: none;
}
.num-bg-card h4, .num-bg-card p { position: relative; z-index: 1; }

/* ---------- .stagger-row — linha de itens com alinhamento alternado
   (par à esquerda recuado, ímpar à direita — quebra grid uniforme) ---------- */
@media (min-width: 720px) {
  .stagger-row > *:nth-child(even) { transform: translateY(28px); }
}

/* ---------- .process-rail--compact — variante vertical em lista numerada
   (usada em Sobre, para não repetir o trilho horizontal já usado em Serviços) ---------- */
.process-rail--compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--border-soft);
}
.process-rail--compact .process-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--border-soft);
}
.process-rail--compact .process-num {
  margin-bottom: 0;
  flex-shrink: 0;
}
.process-rail--compact .process-step > div:last-child { flex: 1; }
.process-rail--compact .process-step h4 { margin-bottom: 2px; }

/* ---------- .wedge-banner--stack — variante vertical/centrada do wedge
   (o padrão horizontal já é usado 3x; esta quebra a repetição em 1 lugar) ---------- */
.wedge-banner--stack {
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: var(--space-lg) var(--space-md);
}
.wedge-banner--stack .ico { margin-bottom: var(--space-xs); }
.wedge-banner--stack p { max-width: 52ch; }

/* ---------- .quote-block--pull — citação maior, sem borda lateral,
   centrada (variante do quote-block padrão, usado em outro contexto) ---------- */
.quote-block--pull {
  border-left: none;
  background: transparent;
  border-radius: 0;
  text-align: center;
  padding: var(--space-md) 0;
}
.quote-block--pull p {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  max-width: 46ch;
  margin: 0 auto;
}
.quote-block--pull::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: rgba(1, 66, 160, 0.25);
  line-height: 1;
  margin-bottom: -10px;
}

/* ---------- .product-media-slot — espaço dedicado a foto real de produto
   (Linhas) — distinto do .img-placeholder genérico: já indica qual produto
   específico vai naquele slot, em grid 2-3 colunas para galeria futura ---------- */
.product-media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 560px) { .product-media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .product-media-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.product-media-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-paper-2);
  background-image:
    linear-gradient(rgba(0,16,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,16,42,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 2px dashed rgba(0, 16, 42, 0.2);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: var(--space-sm);
  color: var(--color-gray);
}
.product-media-slot .ic { width: 26px; height: 26px; color: rgba(0, 16, 42, 0.3); }
.product-media-slot .ph-product-label {
  font-size: var(--fs-tiny); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--color-pending);
}
.product-media-slot .ph-product-name {
  font-size: var(--fs-small); font-weight: 700; color: var(--color-ink);
  position: relative; z-index: 2;
}
.product-media-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; }
/* Estado com foto real: some com a moldura pontilhada e sobe a legenda como etiqueta */
.product-media-slot:has(img) {
  background: none; border: none; padding: 0;
}
.product-media-slot:has(img) .ph-product-name {
  position: absolute; left: var(--space-xs); bottom: var(--space-xs);
  background: rgba(0, 16, 42, 0.72); color: #fff;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-tiny);
}

/* ---------- Responsividade — reforço geral (mobile-first já era a base;
   estes ajustes cobrem gaps encontrados na auditoria 2026-07-20) ---------- */
@media (max-width: 480px) {
  .comparison-table th, .comparison-table td { padding: 12px 14px; font-size: var(--fs-tiny); }
  .wedge-banner { padding: var(--space-sm) var(--space-md); }
  .wedge-banner p { font-size: 0.95rem; }
  .quote-block p { font-size: 1.1rem; }
  .page-close { padding: var(--space-md); }
  .partner-sublines { gap: 6px; }
  /* .stat-strip/.stat-item em telas ≤480px: ver bloco consolidado em
     "@media (max-width: 699px)" mais abaixo neste arquivo — havia uma
     segunda definição aqui (auditoria pré-deploy 2026-07-20) que
     conflitava com a versão mais nova (grid 2x2 com borda superior),
     removida para manter uma única fonte de verdade. */
}
@media (max-width: 380px) {
  .nav-logo { font-size: 1.05rem; }
  .btn { padding: 13px 20px; font-size: var(--fs-small); }
}

/* ===================================================================
   REFINAMENTO FINAL — auditoria responsiva, estabilidade e vídeo real
   =================================================================== */
.hero-video-slot video {
  object-position: center center;
  filter: saturate(0.92) contrast(1.04);
}
.hero-shell.has-video .hero-video-overlay {
  background: linear-gradient(90deg, rgba(0,16,42,0.90) 0%, rgba(5,26,61,0.78) 48%, rgba(10,38,80,0.58) 100%);
}

@media (min-width: 900px) and (max-width: 1079px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 1080px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-burger { display: none; }
}

@media (min-width: 640px) and (max-width: 999px) {
  .sector-grid > .sector-item:nth-child(3n) { border-right: var(--border-soft); }
  .sector-grid > .sector-item:nth-child(2n) { border-right: none; }
}
.process-rail--compact::before { display: none !important; }

.blog-grid--two { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .blog-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hcarousel-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
}
.hcarousel-dot:focus-visible,
.copyable:focus-visible {
  outline: 3px solid rgba(1, 66, 160, 0.32);
  outline-offset: 4px;
}
.card-3d, .hcarousel-card { transform: none; }
.card-3d:hover, .hcarousel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(0, 16, 42, 0.24), 0 0 0 1px rgba(1, 66, 160, 0.10);
}

.roadmap-section.roadmap-ready .roadmap-stop-card,
.roadmap-section.roadmap-ready .roadmap-stop-media { opacity: 0.80; }

.footer-bottom {
  color: rgba(255,255,255,0.72);
  line-height: 1.55;
}

@media (max-width: 899px) {
  footer.site-footer { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
}
@media (max-width: 699px) {
  .stat-strip { gap: 0; }
  .stat-item {
    border-right: none;
    border-bottom: none;
    padding: var(--space-sm) var(--space-xs);
  }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.14); }
  .stat-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.14); }
  .stat-item:last-child:nth-child(odd) { border-right: none; }
  .stat-strip--light .stat-item:nth-child(odd) { border-right-color: rgba(0,16,42,0.1); }
  .stat-strip--light .stat-item:nth-child(n+3) { border-top-color: rgba(0,16,42,0.1); }
}

/* ===================================================================
   VÍDEO DE FUNDO FIXO — grupo de 3 seções (Serviços por segmento,
   Evento CCIH, Escopo do serviço) em servicos.html. O vídeo permanece
   travado no topo da viewport enquanto o usuário rola pelas 3 seções
   (técnica de "sticky pinned background": elemento sticky com altura
   100vh e margem inferior negativa equivalente, para as seções
   seguintes correrem por cima sem empurrar o vídeo). Ao final da
   última seção do grupo, o vídeo é liberado e o scroll normal retoma.
   Sem vídeo real ainda: mostra o mesmo gradiente escuro institucional
   do .hero-shell, sem estado quebrado (mesma regra do vídeo do hero). */
.sticky-video-group { position: relative; isolation: isolate; }
.sticky-video-bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  background: var(--grad-hero);
}
.sticky-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Opacidade baixa por pedido do cliente: o vídeo fica como uma camada
     discreta atrás dos cards de vidro, nunca competindo com eles. */
  opacity: 0.32;
  filter: saturate(1.1) contrast(1.05) brightness(0.95);
}
.sticky-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,16,42,0.90) 0%, rgba(5,26,61,0.84) 45%, rgba(0,16,42,0.92) 100%);
}
/* Com o vídeo já em baixa opacidade, o overlay precisa ser mais leve —
   senão o vídeo fica praticamente invisível atrás dele. */
.sticky-video-group.has-video .sticky-video-overlay {
  background: linear-gradient(180deg, rgba(0,16,42,0.55) 0%, rgba(5,26,61,0.42) 45%, rgba(0,16,42,0.62) 100%);
}

/* As seções ficam transparentes para o vídeo/gradiente aparecer por
   trás; título e texto usam a variante .on-dark já existente no
   projeto (mesmo padrão do hero) para manter contraste garantido. */
.sticky-video-group > section {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ---------- Cards "glass" azul (só dentro deste grupo) ----------
   Estilo vidro sobre o vídeo de fundo: gradiente translúcido em tons
   de azul da própria marca (--color-brand / --color-royal), borda
   luminosa fina e blur real do que passa por trás. Perspective no
   .hcarousel/.credential-grid (contêiner-pai) + rotateX/Y por JS no
   hover dá a profundidade 3D pedida, sem quebrar o hover normal do
   componente em outras páginas (regra isolada a .sticky-video-group). */
.sticky-video-group .hcarousel-wrap,
.sticky-video-group .credential-grid {
  perspective: 1200px;
}
.sticky-video-group .credential-item,
.sticky-video-group .hcarousel-card {
  position: relative;
  background: linear-gradient(155deg, rgba(1, 66, 160, 0.42) 0%, rgba(0, 52, 136, 0.28) 55%, rgba(0, 16, 42, 0.38) 100%);
  border: 1px solid rgba(108, 159, 224, 0.35);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 22px 40px -14px rgba(0, 16, 42, 0.55);
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform var(--dur-fast) var(--ease-premium), box-shadow var(--dur-fast) var(--ease-premium), border-color var(--dur-fast) ease;
  will-change: transform;
}
/* Brilho superior sutil (borda de luz), característico do estilo vidro */
.sticky-video-group .credential-item::before,
.sticky-video-group .hcarousel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,0.16) 0%, transparent 32%);
  pointer-events: none;
}
.sticky-video-group .credential-item:hover,
.sticky-video-group .hcarousel-card:hover {
  border-color: rgba(108, 159, 224, 0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 32px 56px -16px rgba(0, 16, 42, 0.65),
    0 0 0 1px rgba(108, 159, 224, 0.28);
}
.sticky-video-group .credential-item h4,
.sticky-video-group .hcarousel-card h4 { color: var(--color-white); }
.sticky-video-group .credential-item p,
.sticky-video-group .hcarousel-card p { color: rgba(255,255,255,0.78); }
.sticky-video-group .credential-item .ico,
.sticky-video-group .hcarousel-card .ico { color: var(--color-royal-soft); }

.sticky-video-group .img-placeholder {
  background: linear-gradient(155deg, rgba(1, 66, 160, 0.3) 0%, rgba(0, 16, 42, 0.42) 100%);
  border-color: rgba(108, 159, 224, 0.4);
  color: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.sticky-video-group .img-placeholder .ic { color: rgba(255,255,255,0.55); }
.sticky-video-group .img-placeholder .ph-label { color: var(--color-royal-soft); }
.sticky-video-group .hcarousel-btn {
  background: rgba(1, 66, 160, 0.32);
  border-color: rgba(108, 159, 224, 0.4);
  color: var(--color-white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sticky-video-group .hcarousel-btn:hover { border-color: var(--color-royal-soft); color: var(--color-royal-soft); }
.sticky-video-group .hcarousel-dot { background: rgba(255,255,255,0.32); }
.sticky-video-group .hcarousel-dot.active { background: var(--color-royal-soft); }

@media (prefers-reduced-motion: reduce) {
  .sticky-video-group .credential-item,
  .sticky-video-group .hcarousel-card { transition: none; }
}

/* Mobile/tablet retrato: o pin de vídeo com unidades de viewport é
   instável com a barra de endereço dinâmica do navegador — cada seção
   passa a usar o mesmo gradiente escuro do hero como fundo estático
   próprio, sem vídeo (o JS também não carrega o arquivo nesta faixa). */
@media (max-width: 899px) {
  .sticky-video-bg { display: none; }
  .sticky-video-group > section { background: var(--grad-hero); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-video-bg video { display: none; }
}

/* ===================================================================
   REFINAMENTO VISUAL 2026-07-22 — "PROTOCOLO AZUL"
   Sistema próprio Center Clean: placas técnicas, índice operacional,
   enquadramento de mídia e fundos fotográficos decorativos licenciados.
   =================================================================== */

/* Fundos por contexto — fotografias externas são somente decorativas,
   sempre sob overlay; nunca representam instalações/clientes reais. */
.page-about .hero-shell,
.page-contact .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.96), rgba(0,34,82,.84) 58%, rgba(0,52,136,.64)),
              url("../img/bg-corporativo-unsplash.jpg") center 52% / cover no-repeat;
}
.page-services .hero-shell,
.page-segments .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.97), rgba(0,34,82,.85) 58%, rgba(0,52,136,.64)),
              url("../img/bg-hospital-unsplash.jpg") center 58% / cover no-repeat;
}
.page-lines .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.97), rgba(0,34,82,.88) 60%, rgba(0,52,136,.70)),
              url("../img/produtos/dispenser-tork.webp") 82% 46% / min(48vw, 620px) auto no-repeat,
              var(--grad-hero);
}
.page-blog .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.96), rgba(0,34,82,.82) 62%, rgba(0,52,136,.58)),
              url("../img/blog/impacto-psicologico.png") center 48% / cover no-repeat;
}
.page-article-colors .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.97), rgba(0,34,82,.79) 62%, rgba(0,52,136,.55)),
              url("../img/blog/codigo-de-cores.png") center 48% / cover no-repeat;
}
.page-article-cross .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.97), rgba(0,34,82,.79) 62%, rgba(0,52,136,.55)),
              url("../img/blog/contaminacao-cruzada.png") center 42% / cover no-repeat;
}
.page-article-schedule .hero-shell {
  background: linear-gradient(90deg, rgba(0,16,42,.97), rgba(0,34,82,.79) 62%, rgba(0,52,136,.55)),
              url("../img/blog/cronograma-de-limpeza.png") center 46% / cover no-repeat;
}
.page-home #consultoria,
.page-contact main > .section-alt,
.page-blog main > .section {
  background-image: linear-gradient(rgba(247,249,252,.94), rgba(237,241,248,.96)),
                    url("../img/bg-corporativo-unsplash.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* Moldura documental: prova real, legenda explícita e crop controlado. */
.media-proof {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 42px 12px 42px 12px;
  background: var(--color-ink);
  box-shadow: 0 24px 56px -24px rgba(0,16,42,.42);
  border: 1px solid rgba(1,66,160,.22);
}
.media-proof::before {
  content: "REGISTRO DE CAMPO";
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 4px;
  background: rgba(0,16,42,.78);
  color: #fff;
  font: 800 .64rem/1 var(--font-body);
  letter-spacing: .09em;
}
.media-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .7s var(--ease-premium), filter .7s var(--ease-premium);
}
.media-proof:hover img { transform: scale(1.025); filter: contrast(1.03); }
.media-proof figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 30px 18px 14px;
  color: #fff;
  font-size: var(--fs-tiny);
  font-weight: 700;
  background: linear-gradient(transparent, rgba(0,16,42,.88));
}
.media-proof--square { aspect-ratio: 1 / 1; }
.page-about #frota .media-proof img { object-position: center 52%; }
.page-services #treinamento-hospitalar .media-proof img { object-position: center 48%; }
.page-segments .media-proof img { object-position: center 46%; }

/* Produto deve aparecer inteiro: embalagem é informação, não decoração. */
.partner-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: clamp(22px, 4vw, 48px);
  background:
    radial-gradient(circle at 78% 18%, rgba(108,159,224,.22), transparent 30%),
    linear-gradient(145deg, #fff, #e9eff8);
  border: 1px solid rgba(1,66,160,.12) !important;
  border-radius: 46px 14px 46px 14px;
}
.partner-media::after {
  content: "LINHA PROFISSIONAL";
  position: absolute;
  left: 16px; bottom: 14px;
  color: var(--color-brand);
  font: 800 .64rem/1 var(--font-body);
  letter-spacing: .11em;
}
.partner-media img {
  width: 100%; height: 100%;
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0,16,42,.17));
}
.product-media-grid { gap: clamp(14px, 2vw, 24px); }
.product-media-slot {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(1,66,160,.11) !important;
  border-radius: 28px 8px 28px 8px;
  background:
    radial-gradient(circle at 78% 16%, rgba(108,159,224,.20), transparent 26%),
    linear-gradient(145deg, #fff, #edf2f9) !important;
  box-shadow: 0 16px 36px -26px rgba(0,16,42,.48);
  overflow: hidden;
}
.product-media-slot img {
  inset: 18px 18px 54px;
  width: calc(100% - 36px);
  height: calc(100% - 72px);
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 14px 18px rgba(0,16,42,.15));
  transition: transform .45s var(--ease-premium);
}
.product-media-slot:hover img { transform: translateY(-4px) scale(1.025); }
.product-media-slot:has(img) .ph-product-name {
  left: 0; right: 0; bottom: 0;
  min-height: 46px;
  display: flex; align-items: center;
  border-radius: 0;
  padding: 10px 16px;
  background: var(--color-ink);
  letter-spacing: .035em;
}
.partner-logo-grid { gap: 16px; }
.partner-logo-grid img {
  width: 210px;
  height: 82px;
  padding: 18px 24px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(1,66,160,.11);
  border-radius: 18px 6px 18px 6px;
  filter: none;
  box-shadow: 0 12px 26px -22px rgba(0,16,42,.45);
}

/* Sistema de card próprio: ficha de inspeção com índice, recorte e trilho. */
.credential-grid { counter-reset: cc-credential; gap: 16px; }
.credential-item {
  counter-increment: cc-credential;
  position: relative;
  isolation: isolate;
  min-height: 188px;
  padding: 28px 22px 22px;
  overflow: hidden;
  border: 1px solid rgba(1,66,160,.13);
  border-radius: 28px 8px 28px 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,242,249,.94));
  box-shadow: 0 18px 38px -30px rgba(0,16,42,.48);
  transition: transform .35s var(--ease-premium), border-color .35s ease, box-shadow .35s ease;
}
.credential-item::before {
  content: "0" counter(cc-credential);
  position: absolute;
  top: 13px; right: 16px;
  color: rgba(1,66,160,.24);
  font: 900 .72rem/1 var(--font-display);
  letter-spacing: .08em;
}
.credential-item::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--color-brand), var(--color-royal-soft));
}
.credential-item:hover {
  transform: translateY(-5px);
  border-color: rgba(1,66,160,.30);
  box-shadow: 0 25px 48px -28px rgba(0,16,42,.42);
}
.credential-item .ico {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--color-brand), var(--color-royal));
  box-shadow: 0 10px 20px -12px rgba(1,66,160,.75);
}
.credential-item h4 { margin-top: 6px; }

.hcarousel-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(1,66,160,.13);
  border-radius: 30px 8px 30px 8px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,242,249,.92));
}
.hcarousel-card::after {
  content: "";
  position: absolute;
  right: -24px; top: -24px;
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 12px solid rgba(1,66,160,.07);
  pointer-events: none;
}
.hcarousel-card .ico {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 18px 5px 18px 5px;
  color: #fff;
  background: linear-gradient(145deg, var(--color-brand), var(--color-royal));
}
.sector-strip-item.hcarousel-card {
  min-height: 154px;
  justify-content: center;
  border-bottom: 3px solid var(--color-brand);
}

.sector-grid {
  counter-reset: cc-sector;
  border: 1px solid rgba(1,66,160,.12);
  border-radius: 34px 10px 34px 10px;
  overflow: hidden;
  background: rgba(255,255,255,.76);
  box-shadow: 0 22px 48px -38px rgba(0,16,42,.45);
}
.sector-item {
  counter-increment: cc-sector;
  position: relative;
  min-height: 212px;
  padding: 30px 24px 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,242,249,.72));
}
.sector-item::after {
  content: "0" counter(cc-sector);
  position: absolute;
  top: 18px; right: 18px;
  color: rgba(1,66,160,.22);
  font: 900 .72rem/1 var(--font-display);
}
.sector-item:hover { background: linear-gradient(145deg, #fff, rgba(108,159,224,.16)); }
.sector-item .ico {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 20px 6px 20px 6px;
  color: #fff;
  background: linear-gradient(145deg, var(--color-brand), var(--color-royal));
}

.segment-detail-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(1,66,160,.13);
  border-radius: 32px 8px 32px 8px;
  background: linear-gradient(100deg, rgba(1,66,160,.065), #fff 32%);
  box-shadow: 0 20px 40px -36px rgba(0,16,42,.5);
}
.segment-detail-card::after {
  content: "APLICAÇÃO TÉCNICA";
  position: absolute;
  right: 18px; top: 14px;
  color: rgba(1,66,160,.36);
  font: 800 .62rem/1 var(--font-body);
  letter-spacing: .09em;
}
.segment-detail-card .seg-icon-wrap .ico {
  width: 58px; height: 58px;
  border-radius: 22px 6px 22px 6px;
  color: #fff;
  background: linear-gradient(145deg, var(--color-brand), var(--color-royal));
}

/* Blog editorial: fotografia dominante, tag técnica e profundidade discreta. */
.blog-card {
  position: relative;
  border: 1px solid rgba(1,66,160,.12);
  border-radius: 34px 8px 34px 8px;
  box-shadow: 0 20px 42px -34px rgba(0,16,42,.52);
  background: linear-gradient(145deg, #fff, #f2f5fa);
}
.blog-card-media { aspect-ratio: 16 / 10; background: var(--color-ink); }
.blog-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .65s var(--ease-premium), filter .65s var(--ease-premium);
}
.blog-card:hover .blog-card-media img { transform: scale(1.045); filter: saturate(1.05) contrast(1.03); }
.blog-card-media img[src*="contaminacao"] { object-position: center 44%; }
.blog-card-media img[src*="cronograma"] { object-position: center 46%; }
.blog-card-media img[src*="recap"] { object-position: center 36%; }
.blog-card-body { position: relative; padding: 24px 24px 28px; }
.blog-card-tag {
  display: inline-flex;
  width: fit-content;
  margin-top: -38px;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 5px;
  color: #fff;
  background: var(--color-brand);
  box-shadow: 0 8px 18px -12px rgba(0,16,42,.8);
}
.blog-card-body h3 { font-size: 1.22rem; }
.section-illustration {
  aspect-ratio: 16 / 9;
  min-height: 0;
  border-radius: 42px 10px 42px 10px;
  box-shadow: 0 28px 54px -36px rgba(0,16,42,.55);
}
.section-illustration img { object-position: center; }

/* Blocos utilitários menos genéricos. */
.num-bg-card {
  border: 1px solid rgba(1,66,160,.13);
  border-radius: 28px 8px 28px 8px;
  background: linear-gradient(145deg, #fff, #edf2f9);
  box-shadow: 0 18px 38px -32px rgba(0,16,42,.48);
}
.num-bg-card::before { color: rgba(1,66,160,.11); }
details.faq {
  border: 0;
  border-left: 3px solid rgba(1,66,160,.28);
  border-radius: 0 18px 18px 0;
  background: rgba(255,255,255,.82);
  box-shadow: 0 10px 24px -24px rgba(0,16,42,.5);
}
details.faq[open] { border-left-color: var(--color-brand); box-shadow: 0 16px 30px -24px rgba(0,16,42,.45); }
.comparison-table {
  border: 1px solid rgba(1,66,160,.12);
  border-radius: 28px 8px 28px 8px;
  box-shadow: 0 24px 48px -36px rgba(0,16,42,.48);
}
.quote-block {
  border-left: 0;
  border-top: 3px solid var(--color-brand);
  border-radius: 8px 28px 8px 28px;
  background: linear-gradient(145deg, rgba(1,66,160,.08), rgba(255,255,255,.9));
}
.wedge-banner {
  position: relative;
  overflow: hidden;
  border-radius: 34px 8px 34px 8px;
  box-shadow: 0 24px 46px -26px rgba(0,16,42,.5);
}
.wedge-banner::after {
  content: "";
  position: absolute;
  right: -30px; top: -60px;
  width: 160px; height: 160px;
  border: 28px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

/* CTA final com imagem de ambiente limpa: decorativa, não prova de cliente. */
.page-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 38px 10px 38px 10px;
  background: linear-gradient(90deg, rgba(0,16,42,.95), rgba(0,52,136,.82)),
              url("../img/bg-corporativo-unsplash.jpg") center / cover no-repeat !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 28px 56px -30px rgba(0,0,0,.65);
}
.page-close::before {
  content: "CONSULTORIA · GRANDE SÃO LUÍS";
  position: absolute;
  right: 20px; top: 16px;
  z-index: 0;
  color: rgba(255,255,255,.15);
  font: 900 .64rem/1 var(--font-display);
  letter-spacing: .12em;
}
.page-close > * { position: relative; z-index: 1; }

.roadmap-stop-media--photo {
  position: relative;
  display: block;
  padding: 0;
  border-style: solid;
  background: var(--color-ink);
  box-shadow: 0 24px 48px -30px rgba(0,16,42,.52);
}
.roadmap-stop-media--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
.roadmap-stop-media--photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: none;
  padding: 28px 16px 14px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(transparent, rgba(0,16,42,.9));
}
/* Mantém o brilho glass específico do grupo sticky, sem o contador genérico. */
.sticky-video-group .credential-item::before {
  content: "";
  inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,.16), transparent 32%);
}

/* Placeholder documental continua explícito, mas com acabamento intencional. */
.img-placeholder,
.roadmap-stop-media:not(:has(img)) {
  border: 1px dashed rgba(1,66,160,.34);
  border-radius: 36px 10px 36px 10px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(1,66,160,.045) 49%, rgba(1,66,160,.045) 51%, transparent 52%),
    linear-gradient(145deg, #f8fafd, #eaf0f8);
  background-size: 28px 28px, auto;
}

@media (max-width: 899px) {
  .page-lines .hero-shell {
    background: linear-gradient(155deg, rgba(0,16,42,.97), rgba(5,26,61,.92)), var(--grad-hero);
  }
  .page-home #consultoria,
  .page-contact main > .section-alt,
  .page-blog main > .section { background-attachment: scroll; }
  .media-proof--square { aspect-ratio: 4 / 3; }
  /* O min-height anterior forçava a largura implícita do aspect-ratio
     além do container em celulares. A proporção agora governa o painel
     sem cortar nem empurrar a página horizontalmente. */
  .partner-media {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
  }
  .partner-media img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}
@media (max-width: 639px) {
  /* Em flex column, width:100% somava a largura do conteúdo ao recuo
     lateral do marco. O próprio marco e seus filhos ficam explicitamente
     limitados ao trilho para neutralizar também larguras intrínsecas. */
  .roadmap-stop {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .roadmap-stop-card,
  .roadmap-stop:nth-child(even) .roadmap-stop-card,
  .roadmap-stop-media,
  .roadmap-stop:nth-child(even) .roadmap-stop-media {
    width: auto;
    max-width: 100%;
    min-width: 0;
  }
  .product-media-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-media-slot img {
    inset: 12px 12px 48px;
    width: calc(100% - 24px);
    height: calc(100% - 60px);
  }
  .product-media-slot:has(img) .ph-product-name { min-height: 42px; padding: 8px 10px; }
  .partner-logo-grid img { width: calc(50% - 8px); height: 74px; padding: 16px; }
  .credential-item { min-height: 0; }
  .sector-item { min-height: 0; }
  .page-close::before { display: none; }
}