/* ESGTrek — site
   Tokens e componentes extraídos do esgtrek-novo-design-system (assets/overview/index.html).
   Valores mantidos idênticos aos do DS; aqui só ganham nome. */

:root {
  /* Marca */
  --verde: #273D29;            /* Verde ESGTrek — títulos, rótulos, wordmark */
  --verde-80: #465541;         /* texto de apoio, ícones de destaque */
  --verde-60: #6A725E;
  --verde-40: #909481;
  --verde-escuro: #1F3121;
  --vermelho: #931C14;         /* semântica: erro / alerta */
  --amarelo: #F08416;          /* semântica: atenção */

  /* Superfícies */
  --bege: #ECE7DA;             /* fundo do body, moldura da shell */
  --cinza: #F2F1EC;            /* shell arredondada */
  --branco: #FFFFFF;

  /* Degradês */
  --grad-verde: linear-gradient(rgb(70, 85, 65) 0%, rgb(39, 61, 41) 55%);

  /* Bordas e sombras */
  --borda: 1px solid rgba(39, 61, 41, 0.08);
  --borda-forte: 1px solid rgba(39, 61, 41, 0.1);
  --sombra-capsula: rgba(255, 255, 255, 0.9) 0 1px 0 inset, rgba(39, 61, 41, 0.18) 0 10px 30px -14px;
  --sombra-capsula-scroll: rgba(255, 255, 255, 0.9) 0 1px 0 inset, rgba(39, 61, 41, 0.3) 0 20px 44px -16px;
  --sombra-tile: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 34px -16px rgba(39, 61, 41, 0.3);

  --ease-rise: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--bege);
  color: var(--verde);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Shell ---------- */
.shell {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background-color: var(--cinza);
}
@media (min-width: 640px) { .shell { border-radius: 40px; } }

/* ---------- Header (cápsula flutuante) ---------- */
/* a distância da cápsula até a borda da shell é igual à espessura da moldura bege (p-2 / sm:p-3 / lg:p-4) */
.nav {
  position: fixed;
  top: calc(0.5rem * 2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 2rem);
  max-width: 1240px;
}
@media (min-width: 640px)  { .nav { top: calc(0.75rem * 2); width: calc(100% - 3rem); } }
@media (min-width: 1024px) { .nav { top: calc(1rem * 2); width: calc(100% - 5rem); } }
@media (min-width: 1280px) { .nav { max-width: 1440px; } .nav-capsule { gap: 2rem; padding-left: 1.75rem; } }

.skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 60;
  padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--branco); color: var(--verde); font-size: 0.875rem;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.nav-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 36px;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: var(--borda);
  box-shadow: var(--sombra-capsula);
  transition: box-shadow 0.5s, background 0.5s;
}
.nav-capsule.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--sombra-capsula-scroll);
}

.nav-logo img { display: block; height: 26px; width: auto; }

.nav-link {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--verde-80);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
@media (min-width: 1280px) { .nav-link { font-size: 0.875rem; } }
.nav-link:hover { color: var(--verde); background: rgba(39, 61, 41, 0.04); }
.nav-link[aria-current="true"] { color: var(--verde); font-weight: 600; background: rgba(39, 61, 41, 0.07); }

.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: var(--borda-forte);
  color: var(--verde);
}

.nav-mobile {
  margin-top: 0.5rem;
  border-radius: 28px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: var(--borda);
  box-shadow: 0 20px 40px -16px rgba(39, 61, 41, 0.25);
}
.nav-mobile a:not(.btn) {
  border-radius: 999px;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--verde-80);
}
.nav-mobile a:not(.btn):hover { color: var(--verde); }
.nav-mobile-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.5rem; padding-top: 0.5rem;
  border-top: var(--borda);
}

/* seletor de idioma PT · EN */
.lang {
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(39, 61, 41, 0.05);
}
.lang a {
  border-radius: 999px;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.6875rem !important;
  font-weight: 500;
  color: var(--verde-40) !important;
  transition: color 0.2s, background 0.2s;
}
.lang a:hover { color: var(--verde) !important; }
.lang a[aria-current="true"] { color: var(--verde) !important; background: var(--branco); box-shadow: 0 1px 2px rgba(39, 61, 41, 0.12); }
.nav-mobile .lang { display: inline-flex; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, .nav-link:focus-visible, .nav-burger:focus-visible {
  outline: 2px solid var(--verde-80);
  outline-offset: 2px;
}
/* ícones: Phosphor (regular) — <i class="ph ph-nome"> */
.btn .ph { transition: transform 0.3s; }
.btn .ph:not(.hidden) { display: inline-block; }

.btn-primary {
  color: #fff;
  background: var(--grad-verde);
  box-shadow: rgba(255, 255, 255, 0.24) 0 1px 0 inset, rgba(0, 0, 0, 0.35) 0 -3px 8px inset, rgba(27, 43, 29, 0.55) 0 16px 30px -12px;
}
.btn-primary:hover .ph.go-right { transform: translateX(2px); }
.btn-primary:hover .ph.go-down { transform: translateY(2px); }

.btn-secondary {
  color: var(--verde);
  background: rgba(255, 255, 255, 0.85);
  border: var(--borda-forte);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 24px -12px rgba(39, 61, 41, 0.22);
}

.btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; gap: 0.375rem; }
.btn-sm.btn-primary {
  box-shadow: rgba(255, 255, 255, 0.22) 0 1px 0 inset, rgba(0, 0, 0, 0.35) 0 -2px 6px inset, rgba(27, 43, 29, 0.55) 0 12px 22px -10px;
}
.btn-lg { padding: 0.875rem 1.75rem; font-size: 0.875rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 8rem 1.25rem 4rem;
  display: flex;
  align-items: center;
}
@media (min-width: 640px) { .hero { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .hero { min-height: 100svh; padding: 8rem 4rem 5rem; } }

/* duas colunas: textos à esquerda, recorte da plataforma à direita */
.hero-grid {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem; }
}
.hero-copy { text-align: left; }

/* fundo vivo: névoa verde à esquerda, bloom que segue o ponteiro, haze no rodapé */
.hero-haze-left {
  left: -18%; top: 6%;
  width: 56vw; height: 56vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(circle at 42% 45%, rgba(39, 61, 41, 0.30) 0%, rgba(39, 61, 41, 0.12) 38%, transparent 68%);
  filter: blur(70px);
}
.hero-bloom {
  right: -14%; top: 14%;
  width: 52vw; height: 52vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle at 55% 45%, rgba(70, 85, 65, 0.42) 0%, rgba(39, 61, 41, 0.18) 40%, transparent 70%);
  filter: blur(60px);
  transition: transform 0.7s ease-out;
}
/* termina na cor da shell, para o hero emendar na seção seguinte sem corte */
.hero-floor {
  left: 0; right: 0; bottom: 0; height: 16rem;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.45) 55%, var(--cinza));
}
.hero-haze-left, .hero-bloom, .hero-floor { position: absolute; pointer-events: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--verde);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--borda);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 20px -10px rgba(39, 61, 41, 0.15);
}
.badge .ph { color: var(--verde-80); }

.hero-title {
  font-weight: 300;
  color: var(--verde);
  font-size: clamp(2.5rem, 4.8vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-title em { font-style: normal; font-weight: 500; color: var(--verde-80); }

.hero-lead {
  color: var(--verde-80);
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-reassure {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--verde-80);
}
.hero-reassure .ph { color: var(--verde-80); flex-shrink: 0; }

/* recorte da plataforma */
.hero-shot {
  position: relative;
  width: 100%;
  margin: 2.5rem 0 4rem; /* embaixo: espaço para o card que fica abaixo da animação */
}
@media (min-width: 1024px) { .hero-shot { margin: 0; } }
/* tablet: a animação não ocupa a largura toda, fica centralizada e menor */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero-shot { max-width: 30rem; margin-left: auto; margin-right: auto; }
  /* tablet: abertura toda centralizada */
  .hero-title, .hero-lead { text-align: center; justify-self: center; }
  .hero-lead { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-reassure { justify-self: center; }
}

/* abaixo de 1024px: título, subtítulo, imagem, botões e a linha de garantia.
   A coluna de texto se desfaz (display: contents) para a imagem entrar no meio dela. */
@media (max-width: 1023.98px) {
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-title   { order: 1; }
  .hero-lead    { order: 2; }
  .hero-shot    { order: 3; }
  .hero-actions { order: 4; margin-top: 0 !important; }
  .hero-reassure { order: 5; }
}

/* Animação do hero — pacote "ESGTrek-animacao-para-Claude" (animacao.css), sem alterações.
   Camada 1: símbolo atrás · Camada 2: notebook fixo a 12° · Camada 3: setas à frente.
   Símbolo e setas giram juntos, de 2° a 12°, em ciclo de 9 s. */
.esgtrek-animation {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1.13;
}
.esgtrek-animation__layer {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.esgtrek-animation__back,
.esgtrek-animation__front {
  width: 78%;
  left: 20%;
  top: 5%;
  transform-origin: 50% 50%;
  animation: esgtrek-sway 9s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}
.esgtrek-animation__back { z-index: 1; }
.esgtrek-animation__notebook {
  width: 98%;
  left: 0;
  top: 18%;
  z-index: 2;
  transform: rotate(12deg);
  transform-origin: 50% 50%;
}
.esgtrek-animation__front { z-index: 3; }
@keyframes esgtrek-sway {
  0%, 100% { transform: rotate(2deg); }
  50% { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .esgtrek-animation__back,
  .esgtrek-animation__front {
    animation: none;
    transform: rotate(7deg);
    will-change: auto;
  }
}

/* tiles flutuantes: fragmentos de interface sobre o recorte, com a deriva do DS.
   No celular e tablet ficam numa versão compacta; a partir de 1024px, no tamanho do DS. */
.tile {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  border-radius: 14px;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  text-align: left;
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: var(--sombra-tile);
}
.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 9px;
}
.tile-icon .ph { font-size: 14px !important; }
.tile-title { font-size: 0.625rem; font-weight: 500; color: var(--verde); line-height: 1.35; }
.tile-sub { font-size: 0.625rem; color: var(--verde-80); line-height: 1.35; }

@media (min-width: 1024px) {
  .tile { gap: 0.625rem; border-radius: 20px; padding: 0.875rem 1rem; }
  .tile-icon { width: 34px; height: 34px; border-radius: 12px; }
  .tile-icon .ph { font-size: 17px !important; }
  .tile-title, .tile-sub { font-size: 0.75rem; line-height: 1.5; }
}

/* posições em % do recorte, para acompanhar a escala da imagem,
   nas áreas livres da animação, sem cobrir as setas */
.tile[data-drift="1"] { right: 0; top: 0;   transform: rotate(-3deg); background: linear-gradient(180deg, #FFFFFF, #F2F1EC); border-color: rgba(39, 61, 41, 0.07); }
.tile[data-drift="2"] { left: 0;  top: 45%; transform: rotate(3deg);background: linear-gradient(180deg, #F2F1EC, #ECE7DA); }
.tile[data-drift="3"] { right: 0; top: 92%; transform: rotate(4deg);  background: linear-gradient(180deg, #F2F1EC, #E4E3D8); }
@media (min-width: 1024px) {
  .tile[data-drift="1"] { left: -4%;  right: auto; top: 10%; }
  .tile[data-drift="2"] { left: 0;    top: 80%; }
  .tile[data-drift="3"] { right: -4%; top: 54%; }
}

/* ---------- 3. Quem confia ---------- */
.proof { padding: 1rem 1.25rem 5rem; }
@media (min-width: 640px)  { .proof { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .proof { padding: 1rem 4rem 9rem; } }

.proof-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

/* título de seção do DS (Heading 2 · section): Poppins 300, clamp(2rem, 4.5vw, 3.5rem), lh 1.05 */
.proof-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.proof-label {
  max-width: 18ch;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--verde);
  text-wrap: balance;
}
/* mesmo destaque do título do hero */
.proof-label em { font-style: normal; font-weight: 500; color: var(--verde-80); }
/* Lead do DS: Poppins 400, 1rem → 1.125rem, lh 1.65 */
.proof-lead {
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--verde-80);
  text-wrap: pretty;
}
@media (min-width: 640px) { .proof-lead { font-size: 1.125rem; } }

/* painel branco com os logos (superfície "Branco" do DS, como as pílulas de prova) */
.logo-panel {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  border-radius: 28px;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -18px rgba(39, 61, 41, 0.25);
  padding: 0.5rem;
}
.logo-panel li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  padding: 0 1rem;
}
.logo-panel img {
  width: auto;
  height: auto;
  max-width: 104px;
  max-height: 44px;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}
.logo-panel li:hover img { filter: none; opacity: 1; }
/* 6 logos: 2 colunas no celular, 3 no tablet, 6 numa cápsula só no desktop */
@media (min-width: 640px) {
  .logo-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .logo-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 999px; padding: 0.5rem 1.5rem; }
  .logo-panel li + li { border-left: 1px solid rgba(39, 61, 41, 0.07); }
  .logo-panel img { max-width: 112px; max-height: 46px; }
}

.frameworks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
/* mesmo estilo dos títulos de card (.gain-title, .security-item h3): 1rem no celular, 1.125rem acima */
.frameworks-label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--verde);
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 768px) { .frameworks-label { font-size: 1.125rem; } }
.framework-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
/* etiquetas, não botões: sem preenchimento nem sombra, só um contorno fino, e cantos de 8px
   (as pílulas redondas com sombra são a linguagem dos botões do site) */
.fw {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  border-radius: 8px;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--verde-80);
  /* verde sutil: o mesmo tom translúcido dos ícones de check da lista de módulos */
  background: rgba(70, 85, 65, 0.08);
  border: 1px solid rgba(70, 85, 65, 0.1);
  cursor: default;
}
/* o que nenhum framework cobre: mesmo formato, com contorno tracejado (algo "a mais", que a empresa traz) */
.fw-own {
  color: var(--verde);
  background: none;
  border-style: dashed;
  border-color: rgba(70, 85, 65, 0.4);
}

/* ---------- Cabeçalho de seção: H2 (e subtítulo), alinhado à esquerda — sem etiqueta acima ---------- */
.section-head {
  max-width: 54rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.section-title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--verde);
  text-wrap: balance;
}
.section-title em { font-style: normal; font-weight: 500; color: var(--verde-80); }

/* ---------- 4. O que a empresa ganha ---------- */
.gains { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .gains { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .gains { padding: 0 4rem 9rem; } }

.gains-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 1024px) { .gains-inner { gap: 4rem; } }

.gains-grid {
  display: grid;
  gap: 1rem;
}
/* celular: empilhado · tablet (768–1279px): um card por linha, interface e texto lado a lado,
   alternando o lado · desktop (1280px+): 3 colunas */
@media (min-width: 640px) and (max-width: 767.98px) { .gains-grid { max-width: 34rem; } }
@media (min-width: 1280px) { .gains-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

/* card branco do DS (#services) */
.gain-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  padding: 0.75rem 0.75rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
  transition: transform 0.3s;
}
.gain-card:hover { transform: translateY(-4px); }

/* janela onde a interface da plataforma é recriada: fundo cinza da plataforma, um painel branco
   e, às vezes, um cartão flutuante tirado dos painéis (Painel Coleta / Painel Gestão) */
/* altura fixa (não proporção): o conteúdo recriado precisa da mesma altura em qualquer largura */
.gain-shot {
  position: relative;
  margin: 0 0 1.5rem;
  height: 17.5rem;
  max-width: 100%;
  overflow: hidden;
  border-radius: 16px;
  padding: 0.875rem 0.875rem 0;
  background: #E8E8E6;
  border: 1px solid rgba(39, 61, 41, 0.06);
}

.gain-title {
  padding: 0 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--verde);
}
.gain-text {
  margin-top: 0.5rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--verde-80);
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .gain-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 1.5rem;
    padding: 0.75rem;
  }
  .gain-shot  { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .gain-title { grid-column: 2; grid-row: 2; font-size: 1.125rem; }
  .gain-text  { grid-column: 2; grid-row: 3; font-size: 0.9375rem; max-width: 26rem; }
  /* alterna: no card do meio a interface vai para a direita */
  .gain-card:nth-child(even) .gain-shot { grid-column: 2; }
  .gain-card:nth-child(even) .gain-title,
  .gain-card:nth-child(even) .gain-text { grid-column: 1; padding-left: 1.25rem; }
}

/* ---- peças da plataforma (pf-), recriadas a partir dos prints: Poppins, tabelas com cabeçalho
   verde escuro, etiquetas de status com os nomes reais ---- */
.pf-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 12px 12px 0 0;
  padding: 0.75rem;
  background: #F2F1EC;
  font-size: 0.625rem;
  color: #3A3F36;
  box-shadow: 0 1px 2px rgba(39, 61, 41, 0.06);
}
.pf-count { color: var(--verde-40); }
.pf-count b { font-weight: 600; color: var(--verde); }
.pf-back { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--verde-60); }
.pf-back .ph { font-size: 10px; }
.pf-h { margin-top: -0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--verde); line-height: 1.25; }
.pf-meta { display: flex; align-items: center; gap: 0.375rem; margin-top: -0.25rem; color: var(--verde-40); }

.pf-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  background: var(--branco);
  font-size: 0.5625rem;
}
.pf-table th {
  padding: 0.375rem 0.5rem;
  text-align: left;
  font-weight: 600;
  color: #fff;
  background: var(--verde);
}
.pf-table td {
  padding: 0.4375rem 0.5rem;
  vertical-align: middle;
  line-height: 1.35;
  border-top: 1px solid rgba(39, 61, 41, 0.08);
}
.pf-table td b { display: block; font-weight: 600; color: var(--verde); }
.pf-table .r { text-align: right; }

/* etiquetas de status, como na plataforma */
.pill {
  display: inline-block;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.6;
}
.pill-sent     { color: #3A3F36; background: #B9BDB0; }
.pill-progress { color: var(--verde); border: 1px solid var(--verde); }
.pill-comment  { color: #A8531A; background: #FBE5D2; }
.pill-done     { color: #3F6B35; background: #E1EDD9; }

.pf-tabs { display: flex; gap: 0.75rem; border-bottom: 1px solid rgba(39, 61, 41, 0.12); color: var(--verde-60); }
.pf-tabs span { padding-bottom: 0.3125rem; }
.pf-tabs .on { color: var(--verde); font-weight: 500; box-shadow: inset 0 -2px 0 var(--verde); }

.pf-seg { display: flex; gap: 0.25rem; }
.pf-seg span { border-radius: 999px; padding: 0.1875rem 0.625rem; color: var(--verde-60); }
.pf-seg .on { color: #fff; font-weight: 500; background: var(--verde); }

.pf-comment {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.12);
}
.pf-comment-head { display: flex; justify-content: space-between; gap: 0.5rem; }
.pf-comment-head b { font-weight: 600; color: var(--verde); }
.pf-comment-head span { color: var(--verde-40); }

/* largura: cada botão no tamanho do próprio texto, numa linha só · altura: ~33px */
.pf-actions { display: flex; gap: 0.375rem; margin-top: auto; padding-bottom: 0.25rem; }
.pf-btn-o, .pf-btn {
  border-radius: 6px;
  padding: 0.5625rem 0.625rem;
  font-size: 0.5625rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.pf-btn-o { color: var(--verde); border: 1px solid var(--verde); background: var(--branco); }
.pf-btn   { color: #fff; background: var(--verde); border: 1px solid var(--verde); }

/* cartão flutuante tirado dos painéis */
.pf-float {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.08);
  box-shadow: 0 18px 32px -14px rgba(39, 61, 41, 0.42);
  transform: rotate(2deg);
}
.pf-float-title { font-size: 0.75rem; font-weight: 600; color: var(--verde); }
.pf-float-sub { font-size: 0.6875rem; color: var(--verde-40); }

/* medidor do Painel Coleta, compacto, no espaço livre abaixo da tabela */
.pf-gauge {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.625rem;
  padding: 0.5rem 0.875rem 0.5rem 0.625rem;
  bottom: 0.5rem;
}
.pf-gauge svg { display: block; grid-row: 1 / span 2; grid-column: 1; }
.pf-gauge .pf-float-title, .pf-gauge .pf-float-sub { grid-column: 2; }
.pf-gauge .g-track, .pf-gauge .g-value { fill: none; stroke-width: 7; stroke-linecap: round; }
.pf-gauge .g-track { stroke: #E4E3D8; }
.pf-gauge .g-value { stroke: var(--verde); }
.pf-gauge-n {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: end;
  justify-self: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--verde);
}

/* indicador do Painel Gestão, no canto livre ao lado do título do plano */
.pf-kpi {
  top: 0.625rem;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  border-left: 3px solid #3F6B35;
}
.pf-kpi-n { font-size: 1.875rem; font-weight: 300; line-height: 1; color: var(--verde); }

/* janela estreita (área útil < 290px: celular e tablet dividido): o indicador fica mais enxuto
   para não cobrir o título do plano */
.gain-shot { container-type: inline-size; }
@container (max-width: 290px) {
  .pf-kpi { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.5rem 0.875rem; }
  .pf-kpi-n { font-size: 1.625rem; }
  .pf-kpi .pf-float-sub { display: none; }
}

/* ---- animação dos cards (seção 4) ----
   Sem JS, ou com movimento reduzido, o card mostra o estado final (o que está no HTML).
   O site.js põe .anim no card (estado inicial) e .play quando ele aparece na tela; cada peça
   anima com o atraso --d. A entrada (linhas e comentário) tem efeito de mola; pop-ups e trocas
   de status são sutis. */
.gain-card { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* linhas das tabelas entram uma a uma, quicando */
.anim .pf-table tbody tr { opacity: 0; transform: translateY(10px); }
.anim.play .pf-table tbody tr { animation: row-in 0.6s var(--spring) forwards; }
.anim.play .pf-table tbody tr:nth-child(1) { animation-delay: 0.25s; }
.anim.play .pf-table tbody tr:nth-child(2) { animation-delay: 0.38s; }
.anim.play .pf-table tbody tr:nth-child(3) { animation-delay: 0.51s; }
@keyframes row-in { to { opacity: 1; transform: none; } }

/* cartões flutuantes (medidor, indicador): aparecem suaves, subindo alguns pixels */
.anim .pf-float { opacity: 0; transform: rotate(2deg) translateY(8px); }
.anim.play .pf-float { animation: float-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards; }
@keyframes float-in { to { opacity: 1; transform: rotate(2deg); } }

/* troca de status/número: as duas versões ocupam a mesma célula */
.swap { display: inline-grid; justify-items: start; vertical-align: middle; }
.r .swap { justify-items: end; }
.swap > * { grid-area: 1 / 1; }
.swap-from { visibility: hidden; }
.anim .swap-from { visibility: visible; }
.anim .swap-to { opacity: 0; }
/* a etiqueta antiga some em fade e a nova entra com um leve deslize */
.anim.play .swap-from { animation: swap-out 0.3s ease-in var(--d, 0s) forwards; }
.anim.play .swap-to { animation: swap-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) forwards; }
@keyframes swap-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes swap-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* número do indicador: rola de baixo para cima */
.swap-roll { overflow: hidden; }
.anim.play .swap-roll .swap-from { animation: roll-out 0.3s ease-in var(--d, 0s) forwards; }
.anim.play .swap-roll .swap-to { animation: roll-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0s) forwards; }
@keyframes roll-out { to { opacity: 0; transform: translateY(-100%); } }
@keyframes roll-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* card 1: o medidor enche (o número sobe junto, pelo site.js) e o número pulsa de leve no fim */
.anim .pf-gauge .g-value { stroke-dasharray: 0 100; }
.anim.play .pf-gauge .g-value { animation: gauge-fill 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards; }
/* --g: até onde o medidor enche (31 no card de Coleta; os outros passam o próprio valor no HTML) */
@keyframes gauge-fill { from { stroke-dasharray: 0 100; } to { stroke-dasharray: var(--g, 31) 100; } }
.anim.play .pf-gauge-n { animation: pop 0.5s ease-out 2.2s; }
@keyframes pop { 40% { transform: scale(1.1); } }

/* card 2: o comentário chega deslizando e quica; o Validar afunda de leve */
.anim .anim-in { opacity: 0; transform: translateY(16px); }
.anim.play .anim-in { animation: slide-in 0.8s linear 0.5s forwards; }
@keyframes slide-in {
  0%   { opacity: 0; transform: translateY(16px); }
  45%  { opacity: 1; transform: translateY(-5px); }
  65%  { transform: translateY(2px); }
  82%  { transform: translateY(-1px); }
  100% { opacity: 1; transform: none; }
}
.anim.play .anim-press { animation: press 0.4s ease-out 1.55s; }
@keyframes press { 40% { transform: scale(0.94); } }

@media (prefers-reduced-motion: reduce) { .gain-card:hover { transform: none; } }

/* ---------- 5. Módulos ---------- */
.mods { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .mods { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .mods { padding: 0 4rem 9rem; } }

.mods-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1024px) { .mods-inner { gap: 3rem; } }

.section-lead {
  max-width: 36rem;
  margin-top: -0.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--verde-80);
}
@media (min-width: 640px) { .section-lead { font-size: 1.125rem; } }

/* rádios: escondidos, mas focáveis (o foco aparece no indicador de posição do painel) */
.mod-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* relative: os rádios escondidos ficam dentro do carrossel (o foco neles não rola a página) */
.mods-carousel { position: relative; display: flex; flex-direction: column; gap: 1rem; }

/* painel do módulo: todos ocupam a mesma célula, então o carrossel fica com a altura do maior e não muda a cada troca; só o escolhido fica visível */
.mod-panels { display: grid; }
.mod-panel {
  display: grid;
  grid-area: 1 / 1;
  visibility: hidden;
  gap: 1.5rem;
  border-radius: 28px;
  padding: 0.75rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
@media (min-width: 768px) {
  .mod-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

.mod-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem 0.75rem 0.5rem;
}
@media (min-width: 768px) { .mod-copy { padding: 1.75rem 1.5rem 1.5rem; } }
.mod-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.mod-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 16px;
  font-size: 22px;
  color: var(--verde-80);
  background: var(--cinza);
  border: 1px solid rgba(39, 61, 41, 0.06);
}
.mod-name h3 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--verde);
}

/* símbolo do módulo no lugar do ícone (o GRC ainda usa o ícone) */
.mod-icon-simbolo { background: none; border: 0; }
.mod-icon-simbolo img { display: block; width: 100%; height: 100%; }
/* símbolos menores que a caixa do ícone */
.mod-name .mod-icon-simbolo { width: 32px; height: 32px; }

/* celular: carrossel de arrastar para o lado. Todos os cards aparecem lado a lado, cada um com ~90%
   da largura, então um pedaço do próximo fica à mostra; ao soltar, o card encaixa (scroll-snap).
   Sem setas: navega-se arrastando. Funciona sem JavaScript. */
@media (max-width: 767.98px) {
  .mods-carousel .mod-panels {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* os cards correm até a borda da shell; o primeiro alinha com o texto da seção */
    margin: 0 -1.25rem;
    padding: 0.25rem 1.25rem 1.5rem;
    scroll-padding-inline: 1.25rem;
  }
  .mods-carousel .mod-panels::-webkit-scrollbar { display: none; }
  .mods-carousel .mod-panels .mod-panel {
    display: grid;
    /* no desktop os painéis ficam empilhados e só o escolhido aparece; aqui todos ficam lado a lado e visíveis */
    grid-area: auto;
    visibility: visible;
    flex: 0 0 90%;
    /* ancoragem: os do meio centralizam na tela; o primeiro encaixa no início e o último no fim */
    scroll-snap-align: center;
    animation: none;
  }
  .mods-carousel .mod-panels .mod-panel:first-child { scroll-snap-align: start; }
  .mods-carousel .mod-panels .mod-panel:last-child { scroll-snap-align: end; }
  .mod-panel .mod-arrows { display: none; }
  /* espaço da imagem com a mesma altura em todos os cards; o texto fica com o que sobra */
  .mods-carousel .mod-panels .mod-panel { grid-template-rows: 1fr auto; }
  .mod-visual { min-height: 0; height: 14rem; }
  /* "Ver todos os módulos" e "Agendar demonstração" centralizados, um embaixo do outro */
  .mods-foot { flex-direction: column; justify-content: center; }
  /* símbolos menores no celular */
  .mod-name .mod-icon { width: 34px; height: 34px; }
  .mod-name .mod-icon-simbolo { width: 26px; height: 26px; }
}
@media (min-width: 640px) and (max-width: 767.98px) {
  .mods-carousel .mod-panels { margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem; scroll-padding-inline: 2rem; }
  .mods-carousel .mod-panels .mod-panel { flex-basis: 75%; }
}

.mod-body { display: flex; flex-direction: column; gap: 1rem; }
.mod-frase { font-size: 1.125rem; line-height: 1.5; color: var(--verde); }
.mod-frase-pending { color: var(--verde-40); }
.mod-list { display: flex; flex-direction: column; gap: 0.625rem; }
.mod-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--verde-80);
}
.mod-list .ph {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px;
  color: var(--verde);
  background: rgba(70, 85, 65, 0.1);
}

.mod-arrows { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.mod-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  color: var(--verde);
  background: var(--branco);
  border: var(--borda-forte);
  box-shadow: 0 8px 18px -12px rgba(39, 61, 41, 0.3);
  transition: transform 0.2s, background 0.2s;
}
.mod-arrow:hover { transform: translateY(-2px); background: var(--cinza); }

/* indicador de posição: mostra que há mais módulos e onde se está; não é clicável (as setas navegam) */
.mod-dots { display: inline-flex; align-items: center; gap: 0.3125rem; margin-left: 0.75rem; border-radius: 999px; }
.mod-dots i { width: 5px; height: 5px; border-radius: 999px; background: rgba(39, 61, 41, 0.18); }
.mod-dots i.on { width: 18px; background: var(--verde); }
.mod-radio:focus-visible ~ .mod-panels .mod-dots { outline: 2px solid var(--verde-80); outline-offset: 4px; }

/* tablet e desktop sem JavaScript: as setas de cada painel ficam nas laterais do card, na altura do meio,
   metade para fora; o indicador fica centralizado logo abaixo do card.
   translate (e não transform) centraliza, para o hover das setas continuar funcionando */
@media (min-width: 768px) {
  .mods-carousel { padding-bottom: 1.75rem; }
  .mod-panel { position: relative; }
  .mod-arrows { margin: 0; padding: 0; }
  .mod-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
  .mod-arrow:first-child { left: -22px; }
  .mod-arrow:nth-child(2) { right: -22px; }
  .mod-dots { position: absolute; top: calc(100% + 1.25rem); left: 50%; translate: -50% 0; margin: 0; }
}

/* com JavaScript (classe has-ctrl): o card branco fica parado e só o conteúdo desliza por dentro dele,
   recortado nas bordas do card. Por isso setas e pontos saem dos painéis e viram um controle único
   (.mod-ctrl, criado pelo JS) sobre o card */
@media (min-width: 768px) {
  .mods-carousel.has-ctrl .mod-panel .mod-arrows { display: none; }
  .mods-carousel.has-ctrl .mod-panels {
    overflow: clip;
    border-radius: 28px;
    background: var(--branco);
    border: 1px solid rgba(39, 61, 41, 0.06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
  }
  .mods-carousel.has-ctrl .mod-panel { background: none; border-color: transparent; box-shadow: none; }
  .mod-ctrl { position: absolute; inset: 0 0 1.75rem; pointer-events: none; }
  .mod-ctrl .mod-arrow { pointer-events: auto; }
  .mod-ctrl .mod-prev { left: -22px; }
  .mod-ctrl .mod-next { right: -22px; }
  .mod-radio:focus-visible ~ .mod-ctrl .mod-dots { outline: 2px solid var(--verde-80); outline-offset: 4px; }
}
@media (max-width: 767.98px) { .mod-ctrl { display: none; } }

/* avanço automático (classe is-auto posta pelo JS): o traço do módulo atual enche em 8s;
   quando termina, o carrossel passa para o próximo. Com is-paused (mouse em cima etc.) a barra para */
.mod-dots i { position: relative; overflow: hidden; }
.mods-carousel.is-auto .mod-ctrl .mod-dots i.on { background: rgba(39, 61, 41, 0.18); }
.mods-carousel.is-auto .mod-ctrl .mod-dots i.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--verde);
  transform-origin: left;
  animation: mod-progress 8s linear forwards;
}
.mods-carousel.is-auto.is-paused .mod-ctrl .mod-dots i.on::after { animation-play-state: paused; }
@keyframes mod-progress { from { transform: scaleX(0); } }

/* troca de módulo: o conteúdo desliza dentro do card (classes postas pelo JS).
   --mod-dx: largura do card, com sinal (positivo = avançando, o novo entra pela direita) */
.mod-panel.is-entering { animation: mod-slide-in 0.7s cubic-bezier(0.65, 0, 0.35, 1) both; }
.mod-panel.is-leaving { visibility: visible; animation: mod-slide-out 0.7s cubic-bezier(0.65, 0, 0.35, 1) both; pointer-events: none; }
@keyframes mod-slide-in { from { translate: var(--mod-dx) 0; } to { translate: 0 0; } }
@keyframes mod-slide-out { from { translate: 0 0; } to { translate: calc(var(--mod-dx) * -1) 0; } }

/* imagem do módulo: espaço reservado até chegarem os prints */
.mod-visual {
  position: relative;
  margin: 0;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  border-radius: 20px;
  background: #E8E8E6;
  border: 1px solid rgba(39, 61, 41, 0.06);
}
@media (min-width: 768px) { .mod-visual { min-height: 22rem; } }
.mod-visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 22px;
  font-size: 34px;
  color: var(--verde-80);
  background: var(--branco);
  box-shadow: 0 14px 28px -16px rgba(39, 61, 41, 0.35);
}
.mod-visual-note {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--verde);
}
.mod-visual-desc { max-width: 18rem; font-size: 0.75rem; line-height: 1.5; color: var(--verde-40); }

/* ---- telas recriadas nos cards de módulo (mesmas peças pf- da seção 4) ---- */
.mod-ui {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
  overflow: hidden;
  padding: 0.875rem 0.875rem 0;
  text-align: left;
  container-type: inline-size;
}
.mod-ui .pf-panel { height: 100%; }

/* Implantação: matriz de riscos 5×5, cores das faixas como na plataforma */
.pf-matrix {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 0.25rem 0.375rem;
  padding-bottom: 0.5rem;
}
.mx-axis { font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-40); }
.mx-axis-y { writing-mode: vertical-rl; rotate: 180deg; align-self: center; }
.mx-axis-x { grid-column: 2; text-align: center; }
.mx-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0.25rem; }
.mx {
  --c: var(--verde);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0;
  border-radius: 5px;
  border: 1px solid var(--c);
  background: var(--branco);
  line-height: 1;
}
.mx b { font-size: 0.75rem; font-weight: 300; color: #9A9C93; }
.mx small { margin-top: 0.125rem; font-size: 0.375rem; letter-spacing: 0.06em; text-transform: uppercase; color: #B4B5AD; }
.mx-moderado { --c: #F2A65A; }
.mx-alto     { --c: #D9772E; }
.mx-critico  { --c: #B0362C; }
/* célula com riscos: preenchida com a cor da faixa */
.mx-on, .mx-hot { background: var(--c); }
.mx-on b, .mx-on small, .mx-hot b, .mx-hot small { color: #fff; }
.mx-baixo.mx-on { --c: #4E7A43; }
.mx-moderado.mx-on b, .mx-moderado.mx-on small { color: #5A3410; }
.mx-hot { background: #B9541C; border-color: #B9541C; }
@container (max-width: 340px) { .mx small { display: none; } }

/* cartão flutuante: comparativo por tema (Benchmarking) */
.pf-compare { width: min(13.5rem, 62%); padding: 0.625rem 0.75rem; }
.pf-compare .pf-float-title { margin-bottom: 0.375rem; font-size: 0.6875rem; }
.cmp-row { display: grid; grid-template-columns: 3.75rem 1fr; align-items: center; gap: 0.5rem; margin-top: 0.3125rem; font-size: 0.5625rem; color: var(--verde-80); }
.cmp-bar { display: flex; height: 0.4375rem; overflow: hidden; border-radius: 999px; background: #E4E3D8; }
.cmp-bar i { display: block; height: 100%; transform-origin: left center; }
.cmp-yes { background: var(--verde); }
.cmp-gap { background: #F08416; }
.cmp-wip { background: #B9BBAE; }
.cmp-legend { display: flex; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.5rem; color: var(--verde-40); }
.cmp-legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
.cmp-legend i { width: 0.4375rem; height: 0.4375rem; border-radius: 2px; }
/* card estreito (celular): o comparativo fica enxuto, sem legenda, para não cobrir a matriz */
@container (max-width: 320px) {
  .pf-compare { width: 52%; padding: 0.5rem 0.625rem; right: 0.375rem; bottom: 0.375rem; }
  .pf-compare .pf-float-title { margin-bottom: 0.125rem; font-size: 0.5625rem; white-space: nowrap; }
  .cmp-row { grid-template-columns: 3.25rem 1fr; gap: 0.375rem; margin-top: 0.25rem; font-size: 0.5rem; }
  .cmp-legend { display: none; }
}

/* animação (site.js põe .anim e depois .play quando o card aparece): as células entram uma a uma,
   o risco acende na faixa Alto e as barras do comparativo enchem */
.anim .mx { opacity: 0; scale: 0.85; }
.anim.play .mx { animation: mx-in 0.45s var(--spring) calc(0.15s + var(--i) * 0.025s) forwards; }
@keyframes mx-in { to { opacity: 1; scale: 1; } }
.anim .mx-hot { background: var(--branco); border-color: #D9772E; }
.anim .mx-hot b, .anim .mx-hot small { color: #9A9C93; }
.anim.play .mx-hot { animation: mx-in 0.45s var(--spring) calc(0.15s + var(--i) * 0.025s) forwards, mx-hot 0.6s ease-out 1.6s forwards; }
.anim.play .mx-hot b, .anim.play .mx-hot small { animation: mx-hot-text 0.6s ease-out 1.6s forwards; }
@keyframes mx-hot { to { background: #B9541C; border-color: #B9541C; } }
@keyframes mx-hot-text { to { color: #fff; } }
.anim .cmp-bar i { transform: scaleX(0); }
.anim.play .cmp-bar i { animation: cmp-fill 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 1.3s forwards; }
.anim.play .cmp-row:nth-of-type(3) .cmp-bar i { animation-delay: 1.42s; }
.anim.play .cmp-row:nth-of-type(4) .cmp-bar i { animation-delay: 1.54s; }
@keyframes cmp-fill { to { transform: scaleX(1); } }

/* Implantação com mockup: o tablet aparece inteiro, sem a caixa cinza do card, e a matriz e o comparativo
   ficam em volta dele. Tudo mede em relação à largura do tablet (1em = 1/30 dela), então os cartões
   crescem e encolhem junto com ele e nunca ficam maiores que o aparelho. */
.mod-ui:has(.mod-device-box) {
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  container-type: inline-size;
  /* altura do espaço da imagem (14rem no celular, 22rem a partir do tablet): limita o tamanho do tablet */
  --fig-h: 14rem;
}
@media (min-width: 768px) { .mod-ui:has(.mod-device-box) { --fig-h: 22rem; } }
.mod-device-box {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(80cqw, var(--fig-h) * 0.8 * 1.309);
  aspect-ratio: 1200 / 917;
  container-type: inline-size;
}
.mod-device {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.2rem 1.6rem rgba(39, 61, 41, 0.25));
}

/* os cartões: tamanho em em, com 1em = 1/30 da largura do tablet */
.mod-device-box .pf-float {
  font-size: calc(100cqw / 30);
  padding: 0.75em 0.9em;
  border-radius: 1em;
  box-shadow: 0 1.4em 2.6em -1.2em rgba(39, 61, 41, 0.42);
}
.mod-device-box .pf-float-title { margin-bottom: 0.5em; font-size: 1em; }

/* matriz: sai pelo canto de baixo à esquerda do tablet */
.mod-device-box .pf-matrix-card {
  left: -2.2em; right: auto; top: auto; bottom: -2.4em;
  width: 13.5em;
  transform: rotate(-2deg);
}
.mod-device-box .pf-matrix { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0.25em 0.35em; padding-bottom: 0; }
.mod-device-box .mx-grid { grid-column: 2; gap: 0.25em; }
.mod-device-box .mx { aspect-ratio: 1.2; border-radius: 0.35em; }
.mod-device-box .mx b { font-size: 0.8em; }
.mod-device-box .mx small { display: none; }
.mod-device-box .mx-axis { display: block; font-size: 0.55em; }

/* comparativo: sai pelo canto de cima à direita do tablet */
.mod-device-box .pf-compare { top: -2em; bottom: auto; right: -2.2em; left: auto; width: 12.5em; }
.mod-device-box .cmp-row { grid-template-columns: 5.8em 1fr; gap: 0.5em; margin-top: 0.45em; font-size: 0.8em; }
.mod-device-box .cmp-bar { height: 0.65em; }
.mod-device-box .cmp-legend { display: flex; gap: 1em; margin-top: 0.6em; font-size: 0.7em; }
.mod-device-box .cmp-legend i { width: 0.8em; height: 0.8em; }

.anim .mod-device-box .pf-matrix-card { transform: rotate(-2deg) translateY(8px); }
.anim.play .mod-device-box .pf-matrix-card { animation: float-in-l 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards; }
@keyframes float-in-l { to { opacity: 1; transform: rotate(-2deg); } }

/* Pilares: Compromissos (embaixo à esquerda) e Cobertura por indicador (em cima à direita), em em como os de Implantação */
.mod-device-box .pf-commit {
  left: -2.2em; right: auto; top: auto; bottom: -2.4em;
  width: 14.5em;
  transform: rotate(-2deg);
}
.pf-commit ul { display: flex; flex-direction: column; gap: 0.45em; }
.cmt-row { display: flex; align-items: flex-start; gap: 0.55em; padding-top: 0.45em; border-top: 1px solid rgba(39, 61, 41, 0.08); font-size: 0.78em; line-height: 1.3; }
.cmt-row:first-child { padding-top: 0; border-top: 0; }
.cmt-code { flex: none; padding: 0.15em 0.45em; border-radius: 0.4em; font-size: 0.85em; font-weight: 600; color: var(--verde); background: #EEEDE6; }
.cmt-row b { display: block; font-weight: 600; color: var(--verde); }
.cmt-row span:last-child { color: var(--verde-40); }

.mod-device-box .pf-cover {
  top: -2em; bottom: auto; right: -2.2em; left: auto;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 0.7em;
  padding: 0.7em 1em 0.7em 0.8em;
}
.mod-device-box .pf-cover svg { width: 5.2em; height: auto; }
.mod-device-box .pf-cover .pf-gauge-n { font-size: 1.05em; }
.mod-device-box .pf-cover .pf-float-title { margin: 0; font-size: 0.85em; white-space: nowrap; }
.mod-device-box .pf-cover .pf-float-sub { font-size: 0.75em; white-space: nowrap; }

/* entrada: o cartão de compromissos chega pela esquerda e as linhas entram uma a uma */
.anim .mod-device-box .pf-commit { transform: rotate(-2deg) translateY(8px); }
.anim.play .mod-device-box .pf-commit { animation: float-in-l 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards; }
.anim .cmt-row { opacity: 0; transform: translateY(6px); }
.anim.play .cmt-row { animation: row-in 0.6s var(--spring) forwards; }
.anim.play .cmt-row:nth-child(1) { animation-delay: 0.9s; }
.anim.play .cmt-row:nth-child(2) { animation-delay: 1.05s; }
.anim.play .cmt-row:nth-child(3) { animation-delay: 1.2s; }

/* Gestão: Conclusão por área (embaixo à esquerda) e Lembrete enviado (em cima à direita) */
.mod-device-box .pf-areas {
  left: -2.2em; right: auto; top: auto; bottom: -2.4em;
  width: 15em;
  transform: rotate(-2deg);
}
.pf-areas .pf-gauge { all: unset; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.pf-areas .area { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf-areas svg { width: 3.8em; height: auto; display: block; } /* mesmo tamanho nos três, seja qual for o rótulo */
.pf-areas .g-track, .pf-areas .g-value { fill: none; stroke-width: 7; stroke-linecap: round; }
.pf-areas .g-track { stroke: #E4E3D8; }
.pf-areas .g-value { stroke: var(--verde); }
.pf-areas .area b { margin-top: -0.75em; font-size: 0.95em; font-weight: 500; color: var(--verde); }
.pf-areas .area span { margin-top: 0.2em; font-size: 0.68em; color: var(--verde-60); }

.mod-device-box .pf-remind {
  top: -2em; bottom: auto; right: -2.2em; left: auto;
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.7em 1em 0.7em 0.75em;
  border-left: 0.25em solid #F08416;
}
.remind-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3em; height: 2.3em;
  border-radius: 50%;
  font-size: 1em;
  color: #B9541C;
  background: #FCEBDC;
}
.mod-device-box .pf-remind .pf-float-title { margin: 0; font-size: 0.9em; white-space: nowrap; }
.mod-device-box .pf-remind .pf-float-sub { font-size: 0.75em; white-space: nowrap; }

.anim .mod-device-box .pf-areas { transform: rotate(-2deg) translateY(8px); }
.anim.play .mod-device-box .pf-areas { animation: float-in-l 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards; }
.anim .pf-areas .g-value { stroke-dasharray: 0 100; }
.anim.play .pf-areas .g-value { animation: gauge-fill 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards; }
.anim.play .pf-areas .area:nth-child(2) .g-value { animation-delay: 1.05s; }
.anim.play .pf-areas .area:nth-child(3) .g-value { animation-delay: 1.2s; }
.anim.play .pf-remind .remind-icon { animation: pop 0.5s ease-out 1.6s; }

/* Relatório: Coletas por status (embaixo à esquerda) e Evidência anexada (em cima à direita) */
.mod-device-box .pf-status {
  left: -2.2em; right: auto; top: auto; bottom: -2.4em;
  width: 15em;
  transform: rotate(-2deg);
}
.st-bars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 0.55em; height: 7.2em; }
.st-bars li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.st-bars b { font-size: 0.7em; font-weight: 600; color: var(--verde); line-height: 1.4; }
.st-bars i { display: block; width: 100%; height: var(--bh); /* em: a barra mais alta (25 coletas) tem 4,6em. (--h já é usado no hover das telas) */ min-height: 0.25em; border-radius: 0.3em 0.3em 0 0; background: var(--c); transform-origin: bottom; }
.st-bars span { margin-top: 0.35em; font-size: 0.5em; line-height: 1.15; text-align: center; color: var(--verde-60); white-space: nowrap; }

.mod-device-box .pf-evid {
  top: -2em; bottom: auto; right: -2.2em; left: auto;
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.7em 0.9em 0.7em 0.75em;
}
.evid-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3em; height: 2.3em;
  border-radius: 0.7em;
  font-size: 1em;
  color: var(--verde);
  background: #EEEDE6;
}
.mod-device-box .pf-evid .pf-float-title { margin: 0; font-size: 0.9em; white-space: nowrap; }
.mod-device-box .pf-evid .pf-float-sub { font-size: 0.75em; white-space: nowrap; }
.evid-ok { font-size: 1.3em; color: #3F6B35; }

.anim .mod-device-box .pf-status { transform: rotate(-2deg) translateY(8px); }
.anim.play .mod-device-box .pf-status { animation: float-in-l 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards; }
.anim .st-bars i { transform: scaleY(0); }
.anim .st-bars b { opacity: 0; }
.anim.play .st-bars i { animation: bar-grow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.9s + var(--i) * 0.12s) forwards; }
.anim.play .st-bars b { animation: fade-in 0.4s ease-out calc(1.4s + var(--i) * 0.12s) forwards; }
@keyframes bar-grow { to { transform: scaleY(1); } }
@keyframes fade-in { to { opacity: 1; } }
.anim .evid-ok { opacity: 0; transform: scale(0.6); }
.anim.play .evid-ok { animation: evid-ok 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards; }
@keyframes evid-ok { to { opacity: 1; transform: scale(1); } }

/* Inventário GEE: rosca Por escopo (embaixo à esquerda) e Memória de cálculo (em cima à direita) */
.mod-device-box .pf-scope {
  left: -2.2em; right: auto; top: auto; bottom: -2.4em;
  width: 15em;
  transform: rotate(-2deg);
}
.scope-body { display: flex; align-items: center; gap: 0.8em; }
.scope-donut { position: relative; flex: none; width: 5.6em; }
.scope-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.d-track, .d-seg { fill: none; stroke-width: 5.5; }
.d-track { stroke: #E4E3D8; }
.d-seg { stroke: var(--c); stroke-dashoffset: var(--o); }
.scope-donut p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.scope-donut b { font-size: 1.05em; font-weight: 400; color: var(--verde); }
.scope-donut span { font-size: 0.55em; color: var(--verde-40); }
.scope-legend { display: flex; flex-direction: column; gap: 0.45em; flex: 1; min-width: 0; }
.scope-legend li { display: flex; align-items: center; gap: 0.4em; font-size: 0.72em; color: var(--verde-80); white-space: nowrap; }
.scope-legend i { width: 0.75em; height: 0.75em; border-radius: 0.2em; background: var(--c); flex: none; }
.scope-legend b { margin-left: auto; font-weight: 600; color: var(--verde); }

.mod-device-box .pf-factor {
  top: -2em; bottom: auto; right: -2.2em; left: auto;
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.7em 1em 0.7em 0.75em;
}
.factor-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3em; height: 2.3em;
  border-radius: 0.7em;
  font-size: 1em;
  color: var(--verde);
  background: #EEEDE6;
}
.mod-device-box .pf-factor .pf-float-title { margin: 0; font-size: 0.9em; white-space: nowrap; }
.mod-device-box .pf-factor .pf-float-sub { font-size: 0.75em; white-space: nowrap; }

.anim .mod-device-box .pf-scope { transform: rotate(-2deg) translateY(8px); }
.anim.play .mod-device-box .pf-scope { animation: float-in-l 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards; }
.anim .d-seg { stroke-dasharray: 0 100; }
.anim.play .d-seg { animation: gauge-fill 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.9s + var(--i) * 0.5s) forwards; }
.anim.play .pf-factor .factor-icon { animation: pop 0.5s ease-out 1.6s; }

.mods-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mods-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--verde);
}
.mods-all .ph { transition: transform 0.3s; }
.mods-all:hover .ph { transform: translateX(3px); }
.mods-all:focus-visible, .mod-arrow:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mods-carousel .mod-panels .mod-panel { animation: none !important; }
  .mod-arrow:hover { transform: none; }
}

/* estado do carrossel: qual painel aparece (gerado a partir da lista de módulos) */
#mod-implantacao:checked ~ .mod-panels #painel-implantacao { visibility: visible; }
#mod-pilares:checked ~ .mod-panels #painel-pilares { visibility: visible; }
#mod-gestao:checked ~ .mod-panels #painel-gestao { visibility: visible; }
#mod-qualificacao:checked ~ .mod-panels #painel-qualificacao { visibility: visible; }
#mod-inventario-gee:checked ~ .mod-panels #painel-inventario-gee { visibility: visible; }
#mod-relatorio:checked ~ .mod-panels #painel-relatorio { visibility: visible; }
#mod-grc:checked ~ .mod-panels #painel-grc { visibility: visible; }
#mod-assessment:checked ~ .mod-panels #painel-assessment { visibility: visible; }
#mod-mentoria:checked ~ .mod-panels #painel-mentoria { visibility: visible; }

/* ---------- 6. Para quem ---------- */
/* faixa verde escura (superfície "Verde ESGTrek escuro" do DS), só com tipografia */
.who { padding: 0 0.5rem 5rem; }
@media (min-width: 640px)  { .who { padding: 0 1rem 6rem; } }
@media (min-width: 1024px) { .who { padding: 0 2rem 7rem; } }

.who-band {
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 3.5rem 1.5rem;
  color: var(--bege);
  background:
    radial-gradient(circle at 85% 0%, rgba(106, 114, 94, 0.35), transparent 55%),
    var(--verde-escuro);
  box-shadow: rgba(255, 255, 255, 0.08) 0 1px 0 inset, rgba(27, 43, 29, 0.45) 0 30px 60px -30px;
}
@media (min-width: 640px)  { .who-band { padding: 4.5rem 3rem; border-radius: 36px; } }
@media (min-width: 1024px) { .who-band { padding: 6rem 4rem; } }

.who-title {
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bege);
  text-wrap: balance;
}
.who-title em { font-style: normal; font-weight: 500; color: #fff; }

.who-list {
  display: grid;
  margin-top: 3rem;
}
@media (min-width: 900px) {
  .who-list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 4.5rem; }
}

/* colunas separadas por linhas finas (no celular, linhas horizontais) */
.who-item {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(236, 231, 218, 0.16);
}
.who-item:last-child { padding-bottom: 0; }
/* tablet: cada perfil vira uma linha (ícone + cargo à esquerda, texto à direita), ocupando a largura toda */
@media (min-width: 640px) and (max-width: 899.98px) {
  .who-item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) minmax(0, 1.35fr);
    align-items: baseline;
    column-gap: 1.25rem;
    padding: 2rem 0;
  }
  .who-item:last-child { padding-bottom: 0; }
  .who-item .who-icon { align-self: start; translate: 0 0.2rem; }
  .who-item .who-text { max-width: none; }
}
@media (min-width: 900px) {
  .who-item { padding: 0 2rem; border-top: 0; border-left: 1px solid rgba(236, 231, 218, 0.16); }
  .who-item:first-child { padding-left: 0; border-left: 0; }
  .who-item:last-child { padding-right: 0; }
}

.who-icon { font-size: 22px; color: var(--verde-40); }
.who-role {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}
.who-text {
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(236, 231, 218, 0.72);
}

/* ---------- 7. Resultados ---------- */
/* faixa de números do DS (proof band): cápsulas brancas, uma em verde escuro em destaque */
.results { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .results { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .results { padding: 0 4rem 9rem; } }

.results-inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1024px) { .results-inner { gap: 3rem; } }

.stat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* todas as cápsulas com a mesma altura */
  gap: 0.75rem;
}
@media (min-width: 1024px) { .stat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-height: 9.5rem;
  border-radius: 28px;
  padding: 1.5rem 1.25rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -18px rgba(39, 61, 41, 0.25);
}
@media (min-width: 640px) { .stat { padding: 1.75rem 1.75rem; border-radius: 32px; } }
/* celular e tablet (2×2): altura fixa igual para as quatro, além do grid-auto-rows (garante em qualquer navegador) */
@media (max-width: 1023.98px) { .stat { min-height: 11.25rem; justify-content: flex-start; } }
/* o destaque escuro, como na faixa de números do DS */
.stat-dark {
  background: var(--verde-escuro);
  border-color: transparent;
  box-shadow: rgba(255, 255, 255, 0.14) 0 1px 0 inset, rgba(27, 43, 29, 0.5) 0 24px 44px -18px;
}

.stat-n {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--verde-80);
  text-wrap: pretty;
}
.stat-dark .stat-n { color: #fff; }
.stat-dark .stat-label { color: rgba(236, 231, 218, 0.75); }

/* hover: uma linha fina de luz (2px) percorre só a borda (stroke) dos cards de número e dos botões.
   conic-gradient com máscara que deixa visível apenas a moldura. Verde da paleta em fundo claro; branco em fundo escuro. */
@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.stat, .btn { position: relative; --glow: rgba(106, 114, 94, 0.55); --glow-hi: rgba(106, 114, 94, 0.95); }
.stat.stat-dark, .btn.btn-primary { --glow: rgba(255, 255, 255, 0.55); --glow-hi: #fff; }
.stat::before, .btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--glow-angle),
    transparent 0deg, transparent 250deg,
    var(--glow) 310deg, var(--glow-hi) 345deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 0.6s;
  animation: glow-spin 3.5s linear infinite paused;
}
/* botão é menor: a volta é mais curta, então dá a volta em menos tempo para a linha andar na mesma velocidade aparente */
.btn::before { animation-duration: 2.5s; }
@media (hover: hover) {
  .stat:hover::before, .btn:hover::before { opacity: 1; animation-play-state: running; }
}
@keyframes glow-spin { to { --glow-angle: 360deg; } }

/* números de exemplo (sem data-count): só aparecem com um fade suave */
.stat-n-fade { opacity: 0; translate: 0 6px; transition: opacity 1s var(--ease-rise), translate 1s var(--ease-rise); }
.stat-n-fade.stat-n-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .stat::before, .btn::before { animation: none; }
}

/* entrada (data-rise) — estado inicial aplicado via JS para não esconder conteúdo sem JS */
[data-rise].rise-init { opacity: 0; translate: 0 14px; }
[data-rise] { transition: opacity 0.8s var(--ease-rise), translate 0.8s var(--ease-rise); }
[data-rise].rise-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rise].rise-init { translate: none; }
  .btn:hover { transform: none; }
}

/* ---------- Entremeio: frase + 3 telas ---------- */
/* --p vai de 0 a 1 conforme a seção entra na tela (site.js); com movimento reduzido fica em 1 */
.interlude {
  --p: 0;
  position: relative;
  overflow: clip;
  padding: 1rem 1.25rem 6rem;
}
@media (min-width: 640px)  { .interlude { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .interlude { padding: 2rem 4rem 10rem; } }
.interlude-head { position: relative; z-index: 2; max-width: 52rem; margin: 0 auto; text-align: center; }
.interlude-head .section-lead { margin-inline: auto; }

/* palco das telas */
.interlude-stage {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 3rem auto 0;
  aspect-ratio: 4 / 3;
  perspective: 1800px;
}
@media (min-width: 768px) { .interlude-stage { aspect-ratio: 16 / 8; margin-top: 4rem; } }

.screen {
  position: absolute;
  top: 50%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -28px rgba(39, 61, 41, 0.45);
  will-change: transform;
}
.screen img { display: block; width: 100%; height: auto; }

/* principal: no centro, na frente das laterais */
.screen-center {
  z-index: 3;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%) scale(calc(0.95 + 0.05 * var(--p))) perspective(1400px) rotateX(var(--ty)) rotateY(var(--tx));
}
/* laterais em perspectiva: a borda de fora fica maior (mais perto) e a de dentro menor (mais longe).
   Começam afastadas e se aproximam até passar só um pouco por trás do notebook.
   No celular, como não cabe tudo, as laterais saem um pouco pelas bordas. */
.screen-left, .screen-right { z-index: 2; top: 52%; width: 56%; opacity: calc(0.4 + 0.6 * var(--p)); }
.screen-left {
  left: calc(50% - (58% - 8% * var(--p)));
  transform-origin: left center;
  transform: translate(-50%, -50%) perspective(1400px) rotateY(calc(40deg - 8deg * var(--p) - 18deg * var(--h) + var(--tx))) rotateX(var(--ty));
}
.screen-right {
  left: calc(50% + (58% - 8% * var(--p)));
  transform-origin: right center;
  transform: translate(-50%, -50%) perspective(1400px) rotateY(calc(-40deg + 8deg * var(--p) + 18deg * var(--h) + var(--tx))) rotateX(var(--ty));
}
/* o centro é um notebook recortado (PNG transparente): sem moldura de card, só uma sombra que segue o contorno */
.screen-device {
  border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none;
  width: 70%;
  filter: drop-shadow(0 28px 36px rgba(39, 61, 41, 0.28));
}
@media (min-width: 768px) {
  .screen-center { width: 56%; }
  .screen-device { width: 56%; }
  .screen-left, .screen-right { width: 46%; }
  .screen-left  { left: calc(50% - (47% - 8% * var(--p))); }
  .screen-right { left: calc(50% + (47% - 8% * var(--p))); }
}

/* flutuação: as três telas sobem e descem devagar, cada uma num tempo (propriedade translate, que soma ao transform) */
@keyframes screen-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.screen { animation: screen-float 6s ease-in-out infinite; }
.screen-left  { animation-duration: 6.8s; animation-delay: -1.2s; }
.screen-center { animation-duration: 7.4s; animation-delay: -3.4s; }
.screen-right { animation-duration: 6.2s; animation-delay: -4.6s; }

/* hover: a tela sob o mouse cresce um pouco e a sombra abre; as laterais também viram de frente (--h vai de 0 a 1)
   e passam para a frente do notebook enquanto o mouse está em cima */
@property --h { syntax: '<number>'; inherits: false; initial-value: 0; }
/* inclinação mínima seguindo o mouse (site.js define --tx / --ty, até ±4°, na tela sob o cursor) */
@property --tx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ty { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.screen { --h: 0; --tx: 0deg; --ty: 0deg; transition: --h 0.6s var(--ease-rise), --tx 0.35s ease-out, --ty 0.35s ease-out, scale 0.6s var(--ease-rise), box-shadow 0.6s, filter 0.6s; }
@media (hover: hover) {
  .screen:hover { --h: 1; scale: 1.04; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 44px 70px -28px rgba(39, 61, 41, 0.55); }
  .screen-left:hover, .screen-right:hover { z-index: 4; }
  .screen-device:hover { box-shadow: none; filter: drop-shadow(0 40px 44px rgba(39, 61, 41, 0.36)); }
}

@media (prefers-reduced-motion: reduce) {
  .interlude { --p: 1; }
  .screen { animation: none; }
}

/* ---------- 8. Casos e depoimentos ---------- */
/* uma faixa de depoimentos correndo devagar, com as bordas esfumaçadas para o fundo.
   A faixa tem a lista duas vezes e anda metade do comprimento: o loop fica sem emenda. */
.cases { padding: 0 0 5rem; overflow: clip; }
@media (min-width: 1024px) { .cases { padding: 0 0 9rem; } }
.cases-inner { display: flex; flex-direction: column; gap: 2.5rem; }
.cases-inner .section-head { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px)  { .cases-inner .section-head { padding: 0 2rem; } }
@media (min-width: 1024px) { .cases-inner { gap: 3rem; } .cases-inner .section-head { padding: 0; max-width: 1152px; } }

.case-marquee { display: flex; flex-direction: column; gap: 1rem; }
.case-row {
  overflow: hidden;
  padding: 0.75rem 0 1.75rem;
  margin-bottom: -1rem;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.case-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: case-scroll 120s linear infinite;
}
.case-row-rev .case-track { animation-direction: reverse; animation-duration: 80s; }
@keyframes case-scroll { to { transform: translateX(calc(-50% - 0.5rem)); } }
@media (hover: hover) { .case-row:hover .case-track { animation-play-state: paused; } }

.case {
  flex: none;
  width: 19rem;
  height: 17.75rem; /* todos os cards com a mesma altura, a do depoimento mais longo */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 24px;
  padding: 1.25rem 1.375rem 1.375rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.28);
}
@media (min-width: 640px) { .case { width: 23rem; height: 14.5rem; padding: 1.5rem 1.625rem 1.625rem; } }

.case-person { display: flex; align-items: center; gap: 0.75rem; }
.case-photo {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--verde-60);
  background: #ECEBE4;
}
.case-person p { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.75rem; line-height: 1.35; color: var(--verde-60); }
.case-person b { font-size: 0.8125rem; font-weight: 600; color: var(--verde); }
.case-quote { margin: 0; }
.case-quote p { font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--verde); }

/* destaque escuro, como a cápsula do meio de Resultados */
.case-dark {
  background: var(--verde-escuro);
  border-color: transparent;
  box-shadow: rgba(255, 255, 255, 0.14) 0 1px 0 inset, rgba(27, 43, 29, 0.45) 0 18px 32px -18px;
}
.case-dark .case-photo { color: rgba(236, 231, 218, 0.75); background: rgba(236, 231, 218, 0.12); }
.case-dark .case-person p { color: rgba(236, 231, 218, 0.7); }
.case-dark .case-person b, .case-dark .case-quote p { color: #fff; }

/* movimento reduzido: as faixas param e dá para arrastar de lado */
@media (prefers-reduced-motion: reduce) {
  .case-track { animation: none; }
  .case-row { overflow-x: auto; scrollbar-width: none; }
}

/* ---------- 9. Segurança ---------- */
/* painel branco: título e link à esquerda, os três itens à direita, separados por linhas finas.
   No celular e no tablet tudo empilha. */
.security { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .security { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .security { padding: 0 4rem 9rem; } }

.security-panel {
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  border-radius: 28px;
  padding: 2rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -28px rgba(39, 61, 41, 0.3);
}
@media (min-width: 640px)  { .security-panel { padding: 3rem 2.5rem; border-radius: 36px; } }
/* o link vem depois da lista: no celular e no tablet fica embaixo de tudo;
   em tela larga sobe para a coluna do título, alinhado ao pé do painel */
.security-link { justify-self: start; }
@media (min-width: 1024px) {
  .security-panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 4rem; padding: 4rem; }
  .security-head { grid-column: 1; grid-row: 1; }
  .security-list { grid-column: 2; grid-row: 1 / span 2; }
  .security-link { grid-column: 1; grid-row: 2; align-self: end; }
}

.security-item {
  display: flex;
  gap: 1rem;
  /* em cima um pouco mais que embaixo: a entrelinha do texto já deixa folga acima da linha,
     então assim o espaço fica igual dos dois lados da linha */
  padding: 1.75rem 0 1.25rem;
  border-top: 1px solid rgba(39, 61, 41, 0.1);
}
.security-item:first-child { padding-top: 0; border-top: 0; }
.security-item:last-child { padding-bottom: 0; }
.security-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  font-size: 22px;
  color: var(--verde);
  background: #EEEDE6;
}
.security-item h3 { font-size: 1.125rem; font-weight: 500; color: var(--verde); }
.security-item p { margin-top: 0.375rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.55; color: var(--verde-80); }

/* ---------- 10. Perguntas frequentes ---------- */
/* acordeão com <details>: cada pergunta é uma cápsula branca; abre uma por vez (name="faq").
   Em tela larga o título fica à esquerda e as perguntas à direita. */
.faq { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .faq { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .faq { padding: 0 4rem 9rem; } }

.faq-inner { max-width: 1152px; margin: 0 auto; display: grid; gap: 2.5rem; }
/* celular e tablet: título centralizado em cima das perguntas */
@media (max-width: 1023.98px) { .faq-head, .faq-head .section-title { text-align: center; margin-inline: auto; } }
@media (min-width: 1024px) {
  .faq-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .faq-head { position: sticky; top: 7rem; }
}

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  border-radius: 22px;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -20px rgba(39, 61, 41, 0.28);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.375rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--verde);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
@media (min-width: 640px) { .faq-item summary { padding: 1.375rem 1.75rem; font-size: 1.0625rem; } }
.faq-item summary .ph {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 16px;
  background: #EEEDE6;
  transition: transform 0.4s var(--ease-rise), background 0.3s, color 0.3s;
}
.faq-item[open] summary .ph { transform: rotate(45deg); color: #fff; background: var(--verde); }
.faq-item summary:focus-visible { outline: 2px solid var(--verde-80); outline-offset: -2px; border-radius: 22px; }
.faq-item p {
  padding: 0 1.375rem 1.375rem;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--verde-80);
}
@media (min-width: 640px) { .faq-item p { padding: 0 1.75rem 1.5rem; } }

/* abre e fecha suave nos navegadores que já animam o conteúdo do <details>; nos outros, abre direto */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height 0.4s var(--ease-rise), content-visibility 0.4s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
  .faq-item summary .ph { transition: none; }
}

/* ---------- 11. Fechamento ---------- */
/* faixa verde escura, como a de "Para quem", com título, texto e os dois caminhos lado a lado */
.closing { padding: 0 0.5rem 1rem; }
@media (min-width: 640px)  { .closing { padding: 0 1rem 1rem; } }
@media (min-width: 1024px) { .closing { padding: 0 1rem 1rem; } }

.closing-band {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 28px;
  padding: 4rem 1.5rem;
  color: var(--bege);
  background:
    radial-gradient(circle at 15% 0%, rgba(106, 114, 94, 0.4), transparent 55%),
    radial-gradient(circle at 90% 110%, rgba(106, 114, 94, 0.25), transparent 50%),
    var(--verde-escuro);
  box-shadow: rgba(255, 255, 255, 0.08) 0 1px 0 inset, rgba(27, 43, 29, 0.45) 0 30px 60px -30px;
}
@media (min-width: 640px)  { .closing-band { padding: 5rem 3rem; border-radius: 36px; } }
@media (min-width: 1024px) { .closing-band { padding: 7rem 4rem; } }

.closing-title {
  max-width: 22ch;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bege);
  text-wrap: balance;
}
.closing-title em { font-style: normal; font-weight: 500; color: #fff; }
.closing-text { max-width: 34rem; margin-top: 1.25rem; font-size: 1rem; line-height: 1.6; color: rgba(236, 231, 218, 0.75); }
@media (min-width: 640px) { .closing-text { font-size: 1.0625rem; } }

/* os dois botões com a mesma largura; no celular, um embaixo do outro ocupando a largura */
.closing-actions { display: grid; gap: 0.75rem; width: 100%; max-width: 22rem; margin-top: 2.25rem; }
@media (min-width: 640px) { .closing-actions { grid-template-columns: 1fr 1fr; width: auto; max-width: none; } }

.btn-light {
  color: var(--verde);
  background: var(--branco);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 30px -14px rgba(0, 0, 0, 0.45);
}
.btn-light:hover .ph.go-right { transform: translateX(2px); }
.btn-ghost-light {
  color: var(--bege);
  background: rgba(236, 231, 218, 0.06);
  border: 1px solid rgba(236, 231, 218, 0.35);
}
.btn.btn-light { --glow: rgba(106, 114, 94, 0.55); --glow-hi: rgba(106, 114, 94, 0.95); }
.btn.btn-ghost-light { --glow: rgba(255, 255, 255, 0.5); --glow-hi: #fff; }
.btn-light:focus-visible, .btn-ghost-light:focus-visible { outline-color: var(--bege); }

/* ---------- 12. Rodapé ---------- */
.footer { padding: 0 0.5rem 0.5rem; }
@media (min-width: 640px)  { .footer { padding: 0 1rem 1rem; } }

.footer-panel {
  max-width: 1280px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 3rem 1.5rem 1.75rem;
  color: rgba(236, 231, 218, 0.7);
  background: var(--verde-escuro);
}
@media (min-width: 640px)  { .footer-panel { padding: 3.5rem 3rem 2rem; border-radius: 36px; } }
@media (min-width: 1024px) { .footer-panel { padding: 4.5rem 4rem 2.25rem; } }

.footer-top { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .footer-top { grid-template-columns: minmax(0, 0.8fr) minmax(0, 3fr); gap: 3rem; } }
.footer-brand img { display: block; width: 92px; height: auto; }
.footer-brand p { margin-top: 1rem; max-width: 16rem; font-size: 0.9375rem; line-height: 1.5; color: var(--bege); }

.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-col-title { margin-bottom: 0.875rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bege); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-col a, .footer-contact a { font-size: 0.875rem; line-height: 1.4; color: rgba(236, 231, 218, 0.7); transition: color 0.2s; }
.footer-col a:hover, .footer-contact a:hover, .footer-social:hover { color: #fff; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(236, 231, 218, 0.14);
}
@media (min-width: 1024px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-contact { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; font-size: 0.875rem; }
.footer-contact li { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-contact .ph { font-size: 16px; color: rgba(236, 231, 218, 0.5); }
.footer-meta { display: flex; align-items: center; gap: 1rem; }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--bege);
  border: 1px solid rgba(236, 231, 218, 0.2);
  transition: color 0.2s, border-color 0.2s;
}
.footer-social:hover { border-color: rgba(236, 231, 218, 0.5); }

.lang-dark { display: inline-flex; background: rgba(236, 231, 218, 0.08); }
.lang-dark a { color: rgba(236, 231, 218, 0.6) !important; }
.lang-dark a:hover { color: #fff !important; }
.lang-dark a[aria-current="true"] { color: var(--verde) !important; background: var(--bege); box-shadow: none; }

.footer-legal { margin-top: 1.5rem; font-size: 0.75rem; color: rgba(236, 231, 218, 0.45); }

/* celular e tablet: logo, frase, contatos, redes/idioma e a linha legal centralizados */
@media (max-width: 1023.98px) {
  .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-brand p { margin-inline: auto; }
  .footer-bottom { align-items: center; text-align: center; }
  .footer-contact { justify-content: center; }
  .footer-meta { justify-content: center; }
  .footer-legal { text-align: center; }
}
/* celular e tablet: a frase do rodapé usa a largura toda (numa linha só quando cabe) */
@media (max-width: 1023.98px) { .footer-brand p { max-width: none; } }

/* celular: os depoimentos viram um carrossel de arrastar, como o dos módulos (cards a 90%, sem rolagem automática).
   A cópia da faixa (aria-hidden, usada só no loop do desktop) some. */
@media (max-width: 767.98px) {
  .case-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.25rem 1.25rem 1.5rem;
    margin-bottom: 0;
    scroll-padding-inline: 1.25rem;
    -webkit-mask: none;
    mask: none;
  }
  .case-row::-webkit-scrollbar { display: none; }
  .case-track { width: auto; gap: 0.75rem; animation: none; }
  .case-track > .case[aria-hidden="true"] { display: none; }
  .case-track > .case { flex: 0 0 90%; width: auto; scroll-snap-align: center; }
  /* o primeiro encaixa no início e o último (o que vem antes da cópia) no fim */
  .case-track > .case:first-child { scroll-snap-align: start; }
  .case-track > .case:has(+ .case[aria-hidden="true"]) { scroll-snap-align: end; }
}

/* =====================================================================
   Página Segurança e LGPD (seguranca.html)
   Reaproveita da home: hero-title/lead e o fundo do hero, security-icon,
   section-head, peças pf- (telas recriadas), faq e closing.
   ===================================================================== */

/* ---------- 1. Abertura: só texto, centralizado, com o mesmo fundo vivo do hero ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 9rem 1.25rem 4rem;
}
@media (min-width: 640px)  { .page-hero { padding: 10rem 2rem 5rem; } }
@media (min-width: 1024px) { .page-hero { padding: 12rem 4rem 6rem; } }
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-hero-title { max-width: 22ch; }
.page-hero-title em { display: block; }
.page-hero-lead { max-width: 40rem; margin-top: 1.75rem; font-size: 1rem; }
@media (min-width: 640px) { .page-hero-lead { font-size: 1.125rem; } }

/* ---------- 2. Pilares: três cards brancos ---------- */
.pillars { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .pillars { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .pillars { padding: 0 4rem 8rem; } }
.pillar-grid { max-width: 1152px; margin: 0 auto; display: grid; gap: 1rem; }
@media (min-width: 900px) { .pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.pillar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 24px;
  padding: 1.75rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
}
@media (min-width: 640px) { .pillar { padding: 2rem 1.875rem; } }
.pillar .security-icon { margin-bottom: 0.5rem; }
.pillar-title { font-size: 1.25rem; font-weight: 500; color: var(--verde); }
.pillar-text { font-size: 0.9375rem; line-height: 1.6; color: var(--verde-80); text-wrap: pretty; }

/* ---------- 3. Detalhes: texto e tela recriada lado a lado, alternando o lado ---------- */
.details { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .details { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .details { padding: 0 4rem 9rem; } }
.details-inner { max-width: 1152px; margin: 0 auto; display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .details-inner { gap: 6rem; } }

.detail { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 4rem; }
  .detail-flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .detail-flip .detail-copy { order: 2; }
}
.detail-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--verde);
  text-wrap: balance;
}
.detail-text { max-width: 30rem; margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: var(--verde-80); text-wrap: pretty; }
@media (min-width: 640px) { .detail-text { font-size: 1.0625rem; } }

/* moldura cinza da plataforma, como os cards da home, só que maior e com o texto da tela legível */
.detail-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  padding: 1rem 1rem 0;
  background: #E8E8E6;
  border: 1px solid rgba(39, 61, 41, 0.06);
}
@media (min-width: 640px) { .detail-shot { padding: 1.5rem 1.5rem 0; border-radius: 24px; } }
.detail-shot .pf-panel { height: auto; min-height: 15rem; gap: 0.625rem; padding: 1rem 1rem 1.25rem; font-size: 0.6875rem; }
.detail-shot .pf-h { font-size: 0.9375rem; }
.detail-shot .pf-table { font-size: 0.6875rem; }
.detail-shot .pf-table th, .detail-shot .pf-table td { padding: 0.5rem 0.625rem; }
.detail-shot .pill { font-size: 0.625rem; }
.detail-shot .pf-old { color: var(--verde-40); text-decoration: line-through; text-decoration-color: rgba(39, 61, 41, 0.3); }
.detail-shot .pf-table td b { word-break: break-word; }
@media (min-width: 640px) {
  .detail-shot .pf-panel { min-height: 17rem; padding: 1.25rem 1.25rem 1.5rem; font-size: 0.75rem; }
  .detail-shot .pf-table { font-size: 0.75rem; }
}
/* celular: a coluna Autor sai da tabela do histórico, para caber sem rolar de lado */
@media (max-width: 479.98px) {
  .detail-shot { padding: 0.75rem 0.75rem 0; }
  .detail-shot .pf-panel { padding: 0.875rem 0.75rem 1rem; }
  .detail-shot .pf-table { font-size: 0.625rem; }
  .detail-shot .pf-table th, .detail-shot .pf-table td { padding: 0.4375rem 0.3125rem; }
  .detail-shot .pill { font-size: 0.5625rem; padding: 0.0625rem 0.375rem; }
  .detail-shot .pf-area { display: none; }
  .detail-shot .pf-tabs { gap: 0.5rem; font-size: 0.5625rem; white-space: nowrap; }
  .detail-shot .pf-table th:nth-child(2):nth-last-child(4),
  .detail-shot .pf-table td:nth-child(2):nth-last-child(4) { display: none; }
}
.pill-off { color: var(--verde-60); background: #E4E3DC; }

.detail-float { display: flex; align-items: center; gap: 0.625rem; right: 0.875rem; bottom: 0.875rem; }
@media (min-width: 640px) { .detail-float { right: 1.25rem; bottom: 1.25rem; } }
/* espaço embaixo da tabela para o cartão flutuante não cobrir a última linha */
@media (min-width: 480px) { .detail-shot:has(.detail-float) .pf-panel { padding-bottom: 5rem; } }
.detail-float-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--verde-80);
  background: #EEEDE6;
}
@media (max-width: 479.98px) { .detail-float { position: relative; right: auto; bottom: auto; margin: -0.5rem 0 1rem auto; width: max-content; } }

/* ---------- 4. Documentos: 8 links, 1 coluna no celular, 2 no tablet, 4 no computador ---------- */
.docs { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .docs { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .docs { padding: 0 4rem 9rem; } }
.docs-inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .docs-inner { gap: 3rem; } }

.doc-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .doc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.doc {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 22px;
  padding: 1.375rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -20px rgba(39, 61, 41, 0.28);
  transition: transform 0.3s, box-shadow 0.3s;
}
.doc:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 34px -18px rgba(39, 61, 41, 0.34); }
.doc:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 2px; }
.doc-icon { font-size: 22px; color: var(--verde-60); }
.doc-name { font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--verde); text-wrap: pretty; }
.doc-read { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; font-size: 0.875rem; font-weight: 500; color: var(--verde-80); }
.doc-read .ph { transition: transform 0.3s; }
.doc:hover .doc-read .ph { transform: translateX(3px); }
@media (min-width: 1100px) { .doc { min-height: 11rem; } }
@media (prefers-reduced-motion: reduce) { .doc:hover { transform: none; } }

/* link dentro da resposta do FAQ */
.faq-item p a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }

/* aba Identificação da coleta (Segurança, bloco 1): quadros brancos com rótulo em caixa alta e campos em grade, como na plataforma */
.pf-box {
  border-radius: 8px;
  padding: 0.625rem 0.75rem 0.75rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.1);
}
.pf-box-title { margin-bottom: 0.375rem; font-size: 0.85em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-60); }
.pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.pf-fields-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pf-fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-fields .pf-wide { grid-column: 1 / -1; }
.pf-fields dt { font-weight: 600; color: var(--verde); }
.pf-fields dd { margin: 0.125rem 0 0; color: #3A3F36; }
/* a linha do tempo é o que o texto do bloco fala: ganha um contorno verde */
.pf-box-on { border-color: var(--verde-60); box-shadow: 0 0 0 3px rgba(106, 114, 94, 0.14); }

/* tela Usuários (Segurança, bloco 2) */
.pf-bar { border-radius: 8px; padding: 0.5rem 0.625rem; background: #E8E8E6; color: var(--verde-40); }
.pf-bar b { font-weight: 600; color: var(--verde); }
.pf-user { display: inline-flex; align-items: center; gap: 0.4375rem; }
.pf-user b { display: inline !important; }
.pf-avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em;
  border-radius: 50%;
  font-weight: 600;
  color: var(--verde);
  background: #ECEBE4;
  border: 1px solid rgba(39, 61, 41, 0.12);
}
.pill-scope { color: #3F6B35; background: #E1EDD9; }
.pf-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em;
  border-radius: 6px;
  font-size: 1.1em;
  color: var(--verde);
  border: 1px solid var(--verde);
}
@media (max-width: 479.98px) { .detail-shot .pf-hide-sm, .detail-shot .pf-avatar { display: none; } .detail-shot .pf-user b { white-space: nowrap; } }

/* recorte das Autorizações de um perfil: quadro dentro do painel, abaixo da tabela de Usuários (Segurança, bloco 2) */
.pf-perms-sub { margin-top: -0.125rem; color: var(--verde-40); }
.pf-perms ul { margin-top: 0.5rem; display: flex; flex-direction: column; }
.pf-perms li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 7rem;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0;
  color: #3A3F36;
  border-top: 1px solid rgba(39, 61, 41, 0.08);
}
.pf-see { border-radius: 999px; padding: 0.0625rem 0.4375rem; font-size: 0.5625rem; font-weight: 600; color: var(--verde); border: 1px dashed rgba(39, 61, 41, 0.35); white-space: nowrap; }
.pf-see.on { border-style: solid; color: #3F6B35; background: #E1EDD9; border-color: transparent; }
.pf-select {
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 6px;
  padding: 0.25rem 0.375rem 0.25rem 0.5rem;
  font-size: 0.625rem;
  color: #3A3F36;
  border: 1px solid rgba(39, 61, 41, 0.25);
}
.pf-select .ph { font-size: 10px; }
@media (max-width: 479.98px) { .pf-perms li { grid-template-columns: minmax(0, 1fr) auto 5.25rem; gap: 0.375rem; } }
/* o cartão fica embaixo à direita: o painel ganha espaço no pé para ele não cobrir a tabela */
/* hierarquia das autorizações: menu principal em negrito; subnível recuado, com a seta de "segue o de cima" */
.pf-perms .pf-lv1 > span:first-child { font-weight: 600; color: var(--verde); }
.pf-perms .pf-lv2 > span:first-child { padding-left: 0.875rem; position: relative; color: var(--verde-60); }
.pf-perms .pf-lv2 > span:first-child::before { content: ""; position: absolute; left: 0.125rem; top: 0.1em; width: 0.4375rem; height: 0.5em; border-left: 1px solid rgba(39, 61, 41, 0.3); border-bottom: 1px solid rgba(39, 61, 41, 0.3); border-bottom-left-radius: 3px; }
.pf-perms .pf-lv2 { border-top-style: dashed; }

/* bloco 2 com duas telas: Usuários atrás (em cima, à esquerda) e Perfis de usuários na frente (embaixo, à direita),
   como duas janelas sobrepostas, cada uma com o próprio título */
.detail-shot-duo { padding-bottom: 1rem; }
@media (min-width: 640px) { .detail-shot-duo { padding-bottom: 1.5rem; } }
.detail-shot-duo .pf-panel { min-height: 0; border-radius: 12px; }
.detail-shot-duo .pf-panel:first-child { margin-right: 14%; }
.detail-shot-duo .pf-panel-front {
  position: relative;
  margin: -6.25rem 0 0 20%;
  transform: rotate(2deg);
  transform-origin: 30% 0;
  padding-bottom: 0.875rem;
  background: #F7F6F2;
  border: 1px solid rgba(39, 61, 41, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 26px 44px -20px rgba(39, 61, 41, 0.45);
}
.pf-perms { border-radius: 8px; padding: 0.625rem 0.75rem 0.25rem; background: var(--branco); border: 1px solid rgba(39, 61, 41, 0.1); }
.pf-perms-title { font-weight: 600; color: var(--verde); }
@media (max-width: 479.98px) {
  .detail-shot-duo .pf-panel:first-child { margin-right: 0; }
  .detail-shot-duo .pf-panel-front { margin: -4.75rem 0 0 8%; transform: rotate(1.25deg); }
}

/* ---- Detalhes, versão final: sem a moldura cinza; as telas ficam direto no fundo da página,
   com borda leve e sombra. As duas imagens têm o mesmo tamanho no computador (--shot-h). ---- */
.detail-shot { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.detail-shot .pf-panel {
  border-radius: 16px;
  background: #F8F7F3;
  border: 1px solid rgba(39, 61, 41, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 44px -26px rgba(39, 61, 41, 0.35);
}
@media (max-width: 479.98px) { .detail-shot { padding: 0; } }
.detail-shot-duo { padding-bottom: 0; }
/* computador: as duas imagens com a mesma altura. No bloco 2 a tela de Perfis fica presa no canto de baixo,
   deixando à vista as duas primeiras linhas da tabela de Usuários */
@media (min-width: 900px) {
  .detail-shot { height: 32.5rem; }
  .detail-shot > .pf-panel:only-child { height: 100%; }
  /* bloco 1: o espaço que sobra vai para os quadros, em vez de ficar vazio no pé do painel */
  .detail-shot > .pf-panel:only-child { gap: 0.875rem; }
  .detail-shot > .pf-panel:only-child .pf-box { padding: 0.875rem 1rem 1rem; }
  .detail-shot-duo { position: relative; }
  .detail-shot-duo .pf-panel-front { position: absolute; right: 0; bottom: 0; width: 80%; margin: 0; }
}

/* =====================================================================
   Página Módulos (modulos.html)
   Reaproveita da home: page-hero, section-head, mod-list, mod-visual (com o tablet e os
   fragmentos animados do carrossel) e closing. Cada bloco de módulo tem o mesmo padrão:
   nome, título, texto, funcionalidades, "no fim do ciclo", "conecta com" e imagem.
   ===================================================================== */

/* âncoras: o bloco não fica escondido atrás da cápsula do topo */
.modblock, .modpending-card, #ligacoes, #por-onde-comecar { scroll-margin-top: 6.5rem; }
html:has(.modblocks) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.modblocks) { scroll-behavior: auto; } }

/* ---------- 1. Abertura: atalhos para cada módulo (cápsulas como as abas do carrossel) ---------- */
.jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 44rem;
  margin-top: 2.25rem;
}
.jump a {
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--verde-80);
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 20px -16px rgba(39, 61, 41, 0.3);
  transition: color 0.2s, background 0.2s, transform 0.2s;
}
.jump a:hover { color: #fff; background: var(--verde); transform: translateY(-1px); }
.jump a:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 2px; }

/* ---------- 2. Como os módulos se ligam ---------- */
.flow { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .flow { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .flow { padding: 0 4rem 8rem; } }
.flow-inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
.flow .section-lead { max-width: 44rem; }
/* cabeçalho dividido: título à esquerda e texto auxiliar à direita, alinhados pelo topo (a partir de 1024px) */
@media (min-width: 1024px) {
  .section-head-split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 4rem;
  }
  .section-head-split .section-lead { margin-top: 0; padding-top: 0.625rem; max-width: 28rem; justify-self: end; }
}

/* diagrama das passagens: cards de módulo com um recorte da tela, ligados por linhas com o que passa entre eles.
   Celular e tablet: de cima para baixo, com uma seta e o rótulo entre os cards.
   Computador (a partir de 1240px): palco de 400px de altura, da esquerda para a direita; as linhas são SVG
   com a mesma medida do palco (140 × 400), então as curvas saem do meio de cada card e chegam no meio da Gestão. */
.fl {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  padding: 1.25rem;
  background-color: var(--branco);
  /* pontilhado leve de fundo, como uma prancheta */
  background-image: radial-gradient(rgba(39, 61, 41, 0.09) 1px, transparent 1.2px);
  background-size: 18px 18px;
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
@media (min-width: 640px) { .fl { padding: 2rem; } }
@media (min-width: 1240px) { .fl { padding: 3rem 2.5rem; } }

.fl-stage { display: flex; flex-direction: column; align-items: stretch; max-width: 30rem; margin: 0 auto; }
.fl-src { display: flex; flex-direction: column; }
/* celular: um "+" entre Implantação e Pilares, para mostrar que as duas seguem juntas para a Gestão */
.fl-plus {
  align-self: center;
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin: -0.5rem 0;
  border-radius: 50%;
  font-size: 14px;
  color: var(--verde);
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.18);
  box-shadow: 0 6px 14px -8px rgba(39, 61, 41, 0.4);
}

/* card de módulo */
.fl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border-radius: 20px;
  padding: 1rem 1.125rem 0.875rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 30px -20px rgba(39, 61, 41, 0.4);
  transition: transform 0.3s, box-shadow 0.3s;
}
.fl-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 36px -18px rgba(39, 61, 41, 0.45); }
.fl-card:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 3px; }
.fl-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 500; color: var(--verde); }
.fl-head img { width: 22px; height: 22px; }

/* recorte da tela dentro do card: quadro cinza da plataforma */
.fl-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-radius: 12px;
  padding: 0.75rem 0.8rem;
  background: #F4F3EF;
  border: 1px solid rgba(39, 61, 41, 0.07);
}
.fl-k { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-60); }
.fl-title { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--verde); }
.fl-meter { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #E4E3D8; }
.fl-meter i { display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--verde); transform-origin: left center; }
.fl-meta { display: flex; align-items: baseline; gap: 0.375rem; font-size: 0.6875rem; color: var(--verde-60); }
.fl-meta b { font-size: 0.875rem; font-weight: 600; color: var(--verde); }
.fl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: #3A3F36; }
.fl-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-row + .fl-row { padding-top: 0.4rem; border-top: 1px solid rgba(39, 61, 41, 0.08); }
.fl-row-box { margin-top: 0.25rem; border-radius: 8px; padding: 0.4rem 0.5rem; background: var(--branco); border: 1px solid rgba(39, 61, 41, 0.1); }
.fl-pill {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.25rem;
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 600;
  color: var(--verde-80);
  background: #E8E7E0;
}
.fl-pill-ok { color: #3F6B35; background: #E1EDD9; }
.fl-pill-in { color: #9A4A12; background: #FCEBDC; }
.fl-file { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--verde-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-file .ph { flex: none; color: var(--verde-80); }
/* o que o card manda adiante */
.fl-out { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 500; color: var(--verde-80); }
.fl-out .ph { font-size: 14px; color: #D9772E; }

/* a Gestão é o centro: contorno verde e um pouco maior */
.fl-hub { border-color: var(--verde-60); box-shadow: 0 0 0 4px rgba(106, 114, 94, 0.12), 0 22px 40px -20px rgba(39, 61, 41, 0.45); }
.fl-hub .fl-head { font-size: 1.0625rem; }

/* ligações. Celular/tablet: linha tracejada vertical entre os cards, com o ponto laranja descendo por ela
   e o rótulo em cima da linha; o SVG do computador fica escondido */
.fl-wire { position: relative; display: flex; align-items: center; justify-content: center; height: 5rem; }
.fl-svg, .fl-tag { display: none; }
.fl-line { position: absolute; left: 50%; top: 0; bottom: 0; translate: -50% 0; border-left: 1.5px dashed rgba(39, 61, 41, 0.35); }
/* pontinha de seta no fim da linha, encostando no card de baixo */
.fl-line::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  translate: calc(-50% - 0.75px) 0;
  border: 5px solid transparent;
  border-top: 7px solid rgba(39, 61, 41, 0.45);
  border-bottom-width: 0;
}
.fl-drop {
  position: absolute;
  left: 50%; top: 0;
  width: 8px; height: 8px;
  translate: calc(-50% - 0.75px) -50%;
  border-radius: 50%;
  background: #F08416;
  animation: fl-drop 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes fl-drop {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 8px); opacity: 0; }
}
.fl-mob {
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 0.375rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--verde-80);
  background: var(--branco);
  border: 1px dashed rgba(39, 61, 41, 0.3);
}
.fl-mob .ph { color: #D9772E; }

/* tablet: Implantação e Pilares lado a lado; das duas saem linhas que se juntam (um colchete) e descem até a Gestão */
@media (min-width: 640px) and (max-width: 1239.98px) {
  .fl-stage { max-width: 46rem; }
  .fl-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .fl-plus { display: none; }
  .fl-wire-in { height: 6.5rem; }
  .fl-wire-in::before {
    content: "";
    position: absolute;
    top: 0; left: 25%; right: 25%;
    height: 50%;
    border: 1.5px dashed rgba(39, 61, 41, 0.35);
    border-top: 0;
    border-radius: 0 0 18px 18px;
  }
  .fl-wire-in .fl-line { top: 50%; }
}

/* computador: o palco vira uma linha de 5 colunas (origens, ligação, Gestão, ligação, Relatório) */
@media (min-width: 1240px) {
  .fl-stage {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.1fr) 140px minmax(0, 1fr);
    align-items: center;
    height: 400px;
  }
  .fl-src { height: 100%; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
  .fl-plus { display: none; }
  .fl-src .fl-card { justify-content: space-between; }
  .fl-wire { height: 100%; padding: 0; display: block; }
  .fl-mob, .fl-line { display: none; }
  .fl-svg { display: block; width: 140px; height: 400px; overflow: visible; }
  .fl-path { fill: none; stroke: rgba(39, 61, 41, 0.35); stroke-width: 1.5; stroke-dasharray: 4 5; }
  .fl-dot { fill: #F08416; }
  /* rótulo em cima da linha, no meio da curva */
  .fl-tag {
    display: block;
    position: absolute;
    left: 50%;
    translate: -50% -50%;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--verde-80);
    background: var(--branco);
    border: 1px solid rgba(39, 61, 41, 0.14);
    box-shadow: 0 6px 14px -10px rgba(39, 61, 41, 0.4);
  }
  .fl-tag-a { top: 143px; }
  .fl-tag-b { top: 257px; }
  .fl-tag-c { top: 170px; }
  /* chegada: uma pontinha de seta na borda do card de destino */
  .fl-wire::after {
    content: "";
    position: absolute;
    right: 0; top: 200px;
    translate: 0 -50%;
    border: 5px solid transparent;
    border-left: 7px solid rgba(39, 61, 41, 0.45);
    border-right-width: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-dot, .fl-drop { display: none; }
  .fl-card:hover { transform: none; }
}

/* ---------- 3. Blocos dos módulos: texto e imagem lado a lado, alternando o lado ---------- */
.modblocks { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .modblocks { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .modblocks { padding: 0 4rem 8rem; } }
.modblocks-inner { max-width: 1152px; margin: 0 auto; display: grid; gap: 1rem; }
@media (min-width: 1024px) { .modblocks-inner { gap: 1.5rem; } }

/* cada módulo num card branco, como os painéis do carrossel da home */
.modblock {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  border-radius: 28px;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
@media (min-width: 640px)  { .modblock { padding: 2.25rem 2rem 2rem; border-radius: 32px; } }
@media (min-width: 1024px) { .modblock { padding: 3rem; } }
@media (min-width: 900px) {
  .modblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; }
  .modblock-flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .modblock-flip .modblock-copy { order: 2; }
}

.modblock-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--verde);
}
.modblock-name img { flex: none; width: 36px; height: 36px; }
.modblock-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 16px;
  font-size: 22px;
  color: var(--verde-80);
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
}
.modblock-title { margin-top: 1.25rem; font-size: 1.25rem; font-weight: 500; line-height: 1.35; color: var(--verde); text-wrap: balance; }
@media (min-width: 640px) { .modblock-title { font-size: 1.375rem; } }
.modblock-text { max-width: 34rem; margin-top: 0.875rem; font-size: 1rem; line-height: 1.65; color: var(--verde-80); text-wrap: pretty; }
@media (min-width: 640px) { .modblock-text { font-size: 1.0625rem; } }

/* funcionalidades: a lista do carrossel, com linhas que quebram */
.modblock-list { margin-top: 1.5rem; gap: 0.75rem; }
.modblock-list li { align-items: flex-start; line-height: 1.5; text-wrap: pretty; }
.modblock-list li .ph { margin-top: 0.0625rem; }

/* no fim do ciclo / conecta com: rótulo pequeno em cima, texto embaixo, separados por uma linha fina */
.modblock-facts { display: grid; gap: 1rem; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: var(--borda-forte); }
@media (min-width: 640px) { .modblock-facts:has(> div + div) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.modblock-facts dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-60); }
.modblock-facts dd { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--verde-80); text-wrap: pretty; }
.modblock-facts a { color: var(--verde); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(39, 61, 41, 0.3); text-underline-offset: 3px; }
.modblock-facts a:hover { text-decoration-color: var(--verde); }

.modblock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--verde-80);
  background: #E4E3DC;
}

/* imagem: a mesma do carrossel, num espaço maior. --fig-h limita o tamanho do tablet */
.modblock-visual { min-height: 17rem; }
.modblock .mod-ui:has(.mod-device-box) { --fig-h: 17rem; }
@media (min-width: 640px) {
  .modblock-visual { min-height: 24rem; }
  .modblock .mod-ui:has(.mod-device-box) { --fig-h: 24rem; }
}
@media (min-width: 900px) {
  .modblock-visual { min-height: 27rem; }
  .modblock .mod-ui:has(.mod-device-box) { --fig-h: 27rem; }
}
/* espaço reservado (Qualificação, GRC): mesma altura das imagens prontas */
.modblock-visual:not(.mod-ui) { border-radius: 24px; }

/* Assessment e Mentoria: dois cards brancos, lado a lado a partir do tablet */
.modpending { display: grid; gap: 1rem; }
@media (min-width: 768px) { .modpending { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.modpending-card {
  border-radius: 24px;
  padding: 1.75rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
}
@media (min-width: 640px) { .modpending-card { padding: 2rem 1.875rem; } }
.modpending-card .modblock-name { font-size: clamp(1.625rem, 2.6vw, 2rem); }
.modpending-card .modblock-name img { width: 30px; height: 30px; }
.modpending-text { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--verde-40); }

/* ---------- 4. Por onde começar: um card por situação, com o módulo indicado no pé ---------- */
.start { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .start { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .start { padding: 0 4rem 8rem; } }
.start-inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
.start-list { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .start-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1024px) { .start-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.start-row {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  border-radius: 24px;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -20px rgba(39, 61, 41, 0.28);
  transition: transform 0.3s, box-shadow 0.3s;
}
@media (min-width: 1024px) { .start-row { min-height: 12.5rem; padding: 1.75rem 1.75rem 1.5rem; } }
.start-row:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 34px -18px rgba(39, 61, 41, 0.34); }
/* a situação, na voz de quem procura: o centro do card */
.start-case { font-size: 1.1875rem; font-weight: 300; line-height: 1.35; letter-spacing: -0.01em; color: var(--verde); text-wrap: balance; }
@media (min-width: 1024px) { .start-case { font-size: 1.3125rem; } }
/* pé do card: "Comece por" e o módulo, com a seta na ponta direita */
.start-foot { margin-top: auto; padding-top: 1rem; border-top: var(--borda-forte); }
.start-label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-60); }
.start-mod {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--verde);
}
.start-mod img { flex: none; width: 24px; height: 24px; }
.start-mod .ph {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--verde);
  background: var(--cinza);
  transition: transform 0.3s, background 0.3s, color 0.3s;
}
.start-row:hover .start-mod .ph { transform: translateX(3px); color: #fff; background: var(--verde); }
@media (prefers-reduced-motion: reduce) { .start-row:hover, .start-row:hover .start-mod .ph { transform: none; } }
.start-row:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jump a:hover { transform: none; } }

/* =====================================================================
   Página Sobre (sobre.html)
   Reaproveita: page-hero, detail (história), results/stat (números), pillar (como trabalhamos),
   security-icon e closing. Novos aqui: espaço de foto (placeholder) e o painel de contato.
   ===================================================================== */

/* espaço reservado para foto: some quando a foto real entrar (trocar a figure por <img>) */
.photo-slot {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 16rem;
  border-radius: 24px;
  padding: 1.5rem;
  text-align: center;
  color: var(--verde-60);
  background: #E4E3DC;
  border: 1px solid rgba(39, 61, 41, 0.08);
}
.photo-slot .ph { font-size: 32px; color: var(--verde-40); }
.photo-slot figcaption { font-size: 0.875rem; }

/* 4. título acima dos cards */
.pillars-inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .pillars-inner { gap: 3rem; } }

/* 2. história: ilustração antes e depois, desenhada em HTML (peças pf- reaproveitadas no "depois") */
.story-art {
  margin: 0;
  display: grid;
  /* os quadros "antes" e "depois" sempre com a mesma largura */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}
.story-before, .story-after {
  height: 100%;
  display: flex; flex-direction: column;
  border-radius: 20px;
  padding: 1rem;
  background: #E8E8E6;
  border: 1px solid rgba(39, 61, 41, 0.06);
}
@media (min-width: 640px) { .story-before, .story-after { border-radius: 24px; padding: 1.25rem; } }
.story-tag { margin-bottom: 0.875rem; font-size: 0.75rem; font-weight: 500; color: var(--verde-60); }

/* antes: planilha, e-mail e lembrete, soltos e tortos */
.story-before { gap: 0; }
.story-sheet, .story-mail, .story-note {
  border-radius: 10px;
  font-size: 0.6875rem;
  box-shadow: 0 10px 22px -14px rgba(39, 61, 41, 0.4);
}
.story-sheet { padding: 0.625rem; background: var(--branco); transform: rotate(-2.5deg); }
.story-file { display: flex; align-items: center; gap: 0.3125rem; margin-bottom: 0.5rem; font-weight: 500; color: var(--verde); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.story-file .ph { flex: none; font-size: 14px; color: #3F6B35; }
.story-grid { display: grid; grid-template-columns: 1.25rem 1.3fr 1fr 0.7fr; border-top: 1px solid #DCDCD6; border-left: 1px solid #DCDCD6; font-size: 0.625rem; color: #3A3F36; }
.story-grid span { min-height: 1.25rem; padding: 0.125rem 0.3125rem; border-right: 1px solid #DCDCD6; border-bottom: 1px solid #DCDCD6; white-space: nowrap; overflow: hidden; }
.story-grid .h { text-align: center; color: var(--verde-40); background: #F4F4F1; }
.story-grid .err { color: var(--vermelho); font-weight: 600; background: rgba(147, 28, 20, 0.06); }
.story-mail { position: relative; z-index: 1; margin: -0.5rem 0 0 1.5rem; padding: 0.625rem 0.75rem; color: #3A3F36; line-height: 1.45; background: var(--branco); transform: rotate(2deg); }
.story-mail-head { display: flex; align-items: center; gap: 0.3125rem; margin-bottom: 0.25rem; }
.story-mail-head b { font-weight: 600; color: var(--verde); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.story-mail-head .ph { flex: none; font-size: 13px; color: var(--verde-60); }
.story-note { position: relative; z-index: 2; align-self: flex-end; max-width: 11rem; margin: -0.375rem 0.25rem 0 0; padding: 0.625rem 0.75rem; line-height: 1.4; color: #6B4A12; background: #F6E7C1; transform: rotate(-3deg); }

/* seta entre os dois */
.story-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  font-size: 16px; color: var(--bege);
  background: var(--grad-verde);
  box-shadow: 0 10px 20px -10px rgba(27, 43, 29, 0.6);
}

/* depois: a tela da plataforma */
.story-after .pf-panel { height: auto; flex: 1; border-radius: 12px; padding: 0.875rem; font-size: 0.6875rem; }
.story-after .pf-h { font-size: 0.875rem; }
.story-after .pf-table { font-size: 0.6875rem; }
.story-after .pf-table th, .story-after .pf-table td { padding: 0.4375rem 0.5rem; }
.story-after .pill { font-size: 0.5625rem; }
.story-ev { display: inline-flex; align-items: center; gap: 0.1875rem; margin-top: 0.125rem; font-size: 0.5625rem; color: var(--verde-40); white-space: nowrap; }
.story-ev .ph { font-size: 10px; }


/* abaixo de 1280px: um embaixo do outro, com a seta para baixo (lado a lado, a tabela do "depois"
   não caberia no quadro) */
@media (max-width: 1279.98px) {
  .story-art { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .story-arrow { justify-self: center; transform: rotate(90deg); }
}
/* tabela do "depois" compacta, para caber no quadro (que tem a mesma largura do "antes") */
.story-after .pf-panel { padding: 0.75rem 0.5rem; }
.story-after .pf-table { font-size: 0.625rem; }
.story-after .pf-table th, .story-after .pf-table td { padding: 0.4375rem 0.3125rem; }
.story-after .pill { padding: 0.0625rem 0.3125rem; }

/* títulos de "Como trabalhamos" e "Fale com a gente" centralizados em todas as telas, como o do FAQ */
.pillars-inner .section-head, .about-contact-inner .section-head { align-items: center; margin-inline: auto; text-align: center; }
/* celular e tablet (texto e ilustração empilhados): título e texto da história centralizados */
@media (max-width: 899.98px) {
  .about-story .detail-copy { text-align: center; }
  .about-story .detail-text { margin-inline: auto; }
  .story-tag { text-align: center; }
}

/* 5. contato: painel branco com e-mail, telefone e endereço; lado a lado no computador, empilhados no celular */
.about-contact { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .about-contact { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .about-contact { padding: 0 4rem 9rem; } }
.about-contact-inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .about-contact-inner { gap: 3rem; } }

.contact-panel {
  display: grid;
  gap: 2rem;
  border-radius: 28px;
  padding: 2rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -28px rgba(39, 61, 41, 0.3);
}
@media (min-width: 640px)  { .contact-panel { padding: 3rem 2.5rem; border-radius: 36px; } }
/* três colunas com a mesma largura a partir de 1280px (abaixo disso, um embaixo do outro): o endereço
   tem linhas que não quebram, e a primeira ("Largo do Arouche, 270, conj. 63") só cabe a partir daí */
@media (min-width: 1280px) {
  .contact-panel { padding: 3rem 1.75rem; }
  .contact-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-list .contact-item { padding: 0 1.25rem; border-top: 0; border-left: 1px solid rgba(39, 61, 41, 0.1); }
  .contact-list .contact-item:first-child { padding-left: 0; border-left: 0; }
  .contact-list .contact-item:last-child { padding-right: 0; }
}

.contact-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid rgba(39, 61, 41, 0.1); }
.contact-item:first-child { padding-top: 0; border-top: 0; }
.contact-item:last-child { padding-bottom: 0; }
.contact-label { font-size: 0.8125rem; color: var(--verde-60); }
.contact-value { display: block; margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--verde); overflow-wrap: anywhere; }
/* endereço sempre em três linhas fixas: rua · bairro e cidade · CEP (cada linha não quebra) */
.contact-address span { display: block; white-space: nowrap; }
/* celular: o ícone vai para cima do texto (libera a largura para a linha da rua) e o valor encolhe
   um pouco nas telas bem estreitas */
@media (max-width: 479.98px) {
  .contact-item { flex-direction: column; gap: 0.75rem; }
  .contact-value { font-size: clamp(0.8125rem, 4.2vw, 1.0625rem); }
}
a.contact-value:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   Blog (blog.html) e matéria aberta (confiabilidade-dados-esg.html)
   Reaproveita: page-hero, photo-slot, security-icon, detail-title/text e btn.
   ===================================================================== */

/* ---------- Lista de artigos: cards brancos com imagem, data, título, começo do texto e "Leia mais" ---------- */
.posts { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .posts { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .posts { padding: 0 4rem 8rem; } }
.post-grid { max-width: 1152px; margin: 0 auto; display: grid; gap: 1.25rem; }
@media (min-width: 700px)  { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.post-grid > li { display: flex; }
.post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 40px -20px rgba(39, 61, 41, 0.32); }
.post-card-img { display: block; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #E4E3DC; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-rise); }
.post-card:hover .post-card-img img { transform: scale(1.03); }
.post-card-img.photo-slot { min-height: 0; padding: 0; border: 0; border-radius: 0; }
.post-card-body { display: flex; flex-direction: column; flex: 1; gap: 0.75rem; padding: 1.5rem 1.5rem 1.75rem; }
.post-date { font-size: 0.8125rem; color: var(--verde-60); }
.post-card-title { font-size: 1.1875rem; font-weight: 500; line-height: 1.3; color: var(--verde); text-wrap: balance; }
.post-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-card-text {
  font-size: 0.9375rem; line-height: 1.6; color: var(--verde-80);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.post-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: auto; padding-top: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--verde); }
.post-more .ph { transition: transform 0.3s; }
.post-more:hover .ph { transform: translateX(3px); }
.post-card-title a:focus-visible, .post-more:focus-visible, .post-back:focus-visible, .post-share-list a:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 3px; border-radius: 6px; }

/* ---------- Material por e-mail: painel branco, texto à esquerda e o formulário à direita ----------
   Campos e botão no padrão "Email capture" do design system: pílula branca com borda leve e sombra, botão primário. */
.lead-material { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .lead-material { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .lead-material { padding: 0 4rem 8rem; } }
.lead-panel {
  max-width: 1152px; margin: 0 auto;
  display: grid; gap: 2rem;
  border-radius: 28px; padding: 2rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -28px rgba(39, 61, 41, 0.3);
}
@media (min-width: 640px)  { .lead-panel { padding: 3rem 2.5rem; border-radius: 36px; } }
@media (min-width: 1024px) { .lead-panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; padding: 3.5rem; align-items: center; } }
.lead-copy .detail-title em { font-style: normal; font-weight: 500; color: var(--verde-80); }
.lead-fields { display: flex; flex-direction: column; gap: 1rem; }
.lead-fields[hidden] { display: none; }
.lead-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .lead-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead-input {
  width: 100%; min-width: 0;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  font: inherit; font-size: 0.875rem; color: var(--verde);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(39, 61, 41, 0.1);
  box-shadow: 0 8px 20px -14px rgba(39, 61, 41, 0.25);
  outline: none;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.lead-input::placeholder { color: var(--verde-60); }
.lead-input:focus { border-color: rgba(39, 61, 41, 0.25); box-shadow: 0 10px 15px -3px rgba(39, 61, 41, 0.12), 0 4px 6px -4px rgba(39, 61, 41, 0.12); }
.lead-input[aria-invalid="true"] { border-color: var(--vermelho); }
.lead-submit { align-self: stretch; margin-top: 0.25rem; }
.lead-note { font-size: 0.8125rem; line-height: 1.5; color: var(--verde-60); }
.lead-note a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
/* depois do envio o formulário guarda a altura que tinha, e a confirmação fica no meio desse espaço */
.lead-form { display: flex; flex-direction: column; justify-content: center; }
.lead-done { display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; font-size: 1rem; font-weight: 500; color: var(--verde); }
.lead-done[hidden] { display: none; }
.lead-done .ph { font-size: 22px; }

/* ---------- Matéria aberta: coluna de leitura ---------- */
.post { padding: 8.5rem 1.25rem 5rem; }
@media (min-width: 640px)  { .post { padding: 10rem 2rem 6rem; } }
@media (min-width: 1024px) { .post { padding: 11rem 4rem 8rem; } }
.post-head, .post-body, .post-cta, .post-share { max-width: 44rem; margin-left: auto; margin-right: auto; }
.post-back { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--verde-60); }
.post-back:hover { color: var(--verde); }
.post-title {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 300; line-height: 1.08; letter-spacing: -0.02em;
  color: var(--verde); text-wrap: balance;
}
.post-head .post-date { display: block; margin-top: 1.25rem; font-size: 0.875rem; }
.post-cover { max-width: 60rem; margin: 2.5rem auto 0; overflow: hidden; border-radius: 24px; aspect-ratio: 16 / 9; background: #E4E3DC; }
@media (min-width: 640px) { .post-cover { margin-top: 3rem; border-radius: 32px; } }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }

.post-body { margin-top: 3rem; font-size: 1.0625rem; line-height: 1.75; color: var(--verde-80); }
@media (min-width: 640px) { .post-body { margin-top: 3.5rem; font-size: 1.125rem; } }
.post-body > * + * { margin-top: 1.25rem; }
.post-body h2 {
  margin-top: 3rem;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.015em;
  color: var(--verde); text-wrap: balance;
}
.post-body h3 { margin-top: 2rem; font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: var(--verde); text-wrap: balance; }
.post-body h2 + *, .post-body h3 + * { margin-top: 1rem; }
.post-body h2 + h3 { margin-top: 1.25rem; }
.post-body ul { padding-left: 1.25rem; list-style: disc; }
.post-body li + li { margin-top: 0.5rem; }
.post-body li::marker { color: var(--verde-40); }

.post-cta { margin-top: 2.5rem; }
.post-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 3.5rem; padding-top: 2rem;
  border-top: 1px solid rgba(39, 61, 41, 0.1);
}
.post-share-label { font-size: 0.9375rem; font-weight: 500; color: var(--verde); }
.post-share-list { display: flex; gap: 0.5rem; }
.post-share-list a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  font-size: 20px; color: var(--verde);
  background: var(--branco); border: var(--borda-forte);
  transition: transform 0.3s, background 0.3s, color 0.3s;
}
.post-share-list a:hover { transform: translateY(-2px); background: var(--verde); color: var(--bege); }

/* card inteiro clicável: o link do título se estica sobre o card (o "Leia mais" é só texto) */
.post-card { position: relative; }
.post-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.post-card-title a:hover { text-decoration: none; }
.post-card:hover .post-card-title a { text-decoration: underline; text-underline-offset: 3px; }
.post-card:hover .post-more .ph { transform: translateX(3px); }
.post-card:has(a:focus-visible) { outline: 2px solid var(--verde-80); outline-offset: 3px; }
.post-card-title a:focus-visible { outline: none; }
.post-card-img.photo-slot { display: flex; }

/* =====================================================================
   Solicitar proposta (solicitar-proposta.html)
   Coluna lateral com título e índice das etapas; à direita, o formulário num painel branco.
   Reaproveita: lead-input (campos em pílula do blog), btn, detail-text, security-icon.
   ===================================================================== */
.proposal { padding: 8rem 1.25rem 5rem; }
@media (min-width: 640px)  { .proposal { padding: 9rem 2rem 6rem; } }
@media (min-width: 1024px) { .proposal { padding: 10rem 4rem 8rem; } }
.proposal-inner { max-width: 1152px; margin: 0 auto; display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .proposal-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
  .proposal-aside { position: sticky; top: 7.5rem; }
}

/* ---------- Coluna lateral ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--verde-60); }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--verde-40); }
.crumbs a:hover { color: var(--verde); }
.crumbs [aria-current] { color: var(--verde); }
.proposal-title {
  margin-top: 1.25rem;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--verde); text-wrap: balance;
}
.proposal-title em { font-style: normal; font-weight: 500; color: var(--verde-80); }
.proposal-aside .detail-text { max-width: 28rem; }

/* índice das etapas: número, nome e o estado (atual, feita, a fazer) */
.steps { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.step-link {
  display: flex; align-items: center; gap: 0.875rem;
  width: 100%; padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: 999px;
  font-size: 0.9375rem; text-align: left; color: var(--verde-60);
  transition: background 0.3s, color 0.3s;
}
.step-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--verde-80); background: #E6E4DB;
  transition: background 0.3s, color 0.3s;
}
.step-n .ph { display: none; font-size: 15px; }
.step-link[aria-current="step"] { color: var(--verde); font-weight: 500; background: var(--branco); box-shadow: 0 10px 22px -16px rgba(39, 61, 41, 0.35); }
.step-link[aria-current="step"] .step-n { color: var(--bege); background: var(--grad-verde); }
.step.is-done .step-link { color: var(--verde-80); }
.step.is-done .step-n { color: var(--verde); background: rgba(39, 61, 41, 0.1); }
.step.is-done .step-n .ph { display: inline-block; }
.step.is-done .step-n span { display: none; }
.step-link:not([aria-disabled="true"]):not([aria-current]):hover { color: var(--verde); background: rgba(255, 255, 255, 0.6); }
.step-link[aria-disabled="true"] { cursor: default; }
.step-link:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 2px; }

/* no celular o índice vira uma fila só de números, sempre numa linha; o nome da etapa já aparece no título do formulário */
@media (max-width: 1023.98px) {
  .steps { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.5rem; margin-top: 1.75rem; }
  .step-link { width: auto; padding: 0; }
  .step-link[aria-current="step"] { background: none; box-shadow: none; }
  .step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* celular: números das etapas centralizados; o link da demonstração vai para baixo do formulário */
.proposal-demo-bottom { display: none; }
@media (max-width: 639.98px) {
  .steps { justify-content: center; }
  .proposal-demo { text-align: center; }
  .proposal-demo-side { display: none; }
  .proposal-demo-bottom { display: block; margin-top: 0; }
}
/* tablet: cabe o nome da etapa atual numa pílula, ainda numa linha só */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .step-link { gap: 0.625rem; }
  .step-link[aria-current="step"] { padding: 0.25rem 1rem 0.25rem 0.25rem; background: var(--branco); box-shadow: 0 10px 22px -16px rgba(39, 61, 41, 0.35); }
  .step.is-current .step-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* celular e tablet: título, texto, etapas e link da demonstração centralizados */
@media (max-width: 1023.98px) {
  .proposal-title, .proposal-demo { text-align: center; }
  .proposal-aside .detail-text { margin-inline: auto; text-align: center; }
  .steps { justify-content: center; }
}

.proposal-demo { margin-top: 2rem; font-size: 0.9375rem; line-height: 1.5; color: var(--verde-80); }
.proposal-demo a { font-weight: 500; color: var(--verde); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.proposal-demo a .ph { display: inline-block; vertical-align: -2px; transition: transform 0.3s; }
.proposal-demo a:hover .ph { transform: translateX(2px); }

/* ---------- Painel do formulário ---------- */
.proposal-panel {
  border-radius: 28px; padding: 2rem 1.25rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -28px rgba(39, 61, 41, 0.3);
}
@media (min-width: 640px)  { .proposal-panel { padding: 2.75rem 2.5rem; border-radius: 36px; } }
@media (min-width: 1024px) { .proposal-panel { padding: 3rem; } }
.form-note { font-size: 0.8125rem; color: var(--verde-60); }
/* o campo que recebe o foco num erro não fica escondido atrás do topo fixo */
.proposal-form input, .proposal-form textarea { scroll-margin-top: 8rem; }

.form-step { border-top: 1px solid rgba(39, 61, 41, 0.1); padding-top: 2rem; margin-top: 2rem; }
.form-step:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.form-step-title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; color: var(--verde); }
.form-step-title:focus { outline: none; }
.form-step-body { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 1.5rem; }
/* com JavaScript as etapas aparecem uma por vez (sem ele, ficam todas abertas, uma embaixo da outra) */
.is-stepped .form-step { border-top: 0; padding-top: 0; margin-top: 1.5rem; }
.form-step[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.field-grid { display: grid; gap: 1.75rem; }
@media (min-width: 640px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  /* rótulo, campo e erro em linhas comuns aos dois lados: um rótulo que quebra não desalinha o campo vizinho */
  .field-grid > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.625rem; align-content: start; }
  .field-grid > .field > .field-label { align-self: end; }
}
.field-label { font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--verde); }
.field-label .req { color: var(--verde-60); font-weight: 400; }
.field-help { font-size: 0.8125rem; color: var(--verde-60); }
.field-error { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--vermelho); }
.field-error[hidden] { display: none; }
.field-error .ph { font-size: 15px; flex: none; }
fieldset.field { border: 0; min-inline-size: 0; }
fieldset.field legend { margin-bottom: 0.625rem; }

.lead-input.field-textarea { min-height: 8.5rem; padding: 1rem 1.25rem; border-radius: 22px; line-height: 1.55; resize: vertical; }
.lead-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.lead-input[type="number"]::-webkit-inner-spin-button, .lead-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* opções em pílula (rádio ou caixa): o input fica por cima, invisível, e a pílula mostra o estado */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  font-size: 0.875rem; line-height: 1.35; color: var(--verde-80);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(39, 61, 41, 0.12);
  box-shadow: 0 8px 20px -16px rgba(39, 61, 41, 0.3);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  pointer-events: none;
}
.choice span::before {
  content: ''; flex: none;
  width: 0.875rem; height: 0.875rem; border-radius: 999px;
  border: 1.5px solid rgba(39, 61, 41, 0.3);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.choice input[type="checkbox"] + span::before { border-radius: 4px; }
.choice:hover span { border-color: rgba(39, 61, 41, 0.28); color: var(--verde); }
.choice input:checked + span { color: var(--verde); background: rgba(39, 61, 41, 0.06); border-color: var(--verde-80); }
.choice input:checked + span::before { border-color: var(--verde); background: var(--verde); box-shadow: inset 0 0 0 2px var(--branco); }
.choice input:focus-visible + span { outline: 2px solid var(--verde-80); outline-offset: 2px; }
[aria-invalid="true"] .choice span { border-color: rgba(147, 28, 20, 0.45); }

/* opções curtas que devem caber numa linha só no desktop (número de colaboradores);
   abaixo de 1280px o painel é estreito demais e elas quebram em duas linhas */
@media (min-width: 1280px) {
  .choices-row { flex-wrap: nowrap; gap: 0.375rem; }
  .choices-row .choice { flex: 1 1 auto; }
  .choices-row .choice span { width: 100%; justify-content: center; gap: 0.375rem; padding: 0.625rem 0.625rem; font-size: 0.8125rem; white-space: nowrap; }
}

/* opções longas: uma por linha, ocupando a largura */
.choices-stack { flex-direction: column; }
.choices-stack .choice span { width: 100%; padding: 0.875rem 1.25rem; border-radius: 18px; }

.field-other[hidden] { display: none; }

/* envio de arquivo */
.dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 1.75rem 1.25rem;
  border-radius: 22px;
  text-align: center; font-size: 0.875rem; color: var(--verde-80);
  background: #F7F6F2;
  border: 1.5px dashed rgba(39, 61, 41, 0.22);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.dropzone[hidden] { display: none; }
.dropzone .ph { font-size: 26px; color: var(--verde-60); }
.dropzone strong { font-weight: 500; color: var(--verde); }
.dropzone small { font-size: 0.8125rem; color: var(--verde-60); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:hover, .dropzone.is-over { border-color: var(--verde-80); background: var(--cinza); }
.dropzone:focus-within { outline: 2px solid var(--verde-80); outline-offset: 2px; }
.dropzone:has(input[aria-invalid="true"]) { border-color: var(--vermelho); }
.file-chosen { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1.125rem; border-radius: 999px; font-size: 0.875rem; color: var(--verde); background: #F7F6F2; border: 1px solid rgba(39, 61, 41, 0.1); }
.file-chosen[hidden] { display: none; }
.file-chosen .ph-file-text { font-size: 18px; color: var(--verde-60); flex: none; }
.file-chosen-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-remove { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; color: var(--verde-80); flex: none; }
.file-remove:hover { color: var(--verde); background: rgba(39, 61, 41, 0.08); }
.file-remove:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 2px; }

/* botões: Voltar / Continuar entre etapas; Solicitar proposta no fim */
.form-actions { display: flex; flex-direction: column-reverse; gap: 0.75rem; margin-top: 2.5rem; }
.form-actions .btn { width: 100%; }
@media (min-width: 640px) {
  .form-actions { flex-direction: row; align-items: center; }
  .form-actions .btn { width: auto; }
  .form-actions [data-next], .form-actions [data-submit] { margin-left: auto; }
}
.form-actions [hidden] { display: none; }
.form-legal { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--verde-60); }
.form-legal a { color: var(--verde); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 640px) { .form-legal { text-align: right; } }
.form-legal[hidden] { display: none; }
.send-error { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1.25rem; padding: 0.875rem 1.125rem; border-radius: 18px; font-size: 0.875rem; color: var(--vermelho); background: rgba(147, 28, 20, 0.06); }
.send-error[hidden] { display: none; }
.send-error .ph { font-size: 18px; flex: none; }

/* depois do envio */
.proposal-done { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1rem 0; }
.proposal-done[hidden] { display: none; }
.proposal-done .security-icon { margin-bottom: 0.5rem; }
.proposal-done-title { font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--verde); }
.proposal-done-title:focus { outline: none; }
.proposal-done .detail-text { margin-top: 0; }
.proposal-done .btn { margin-top: 1rem; }

/* =====================================================================
   Menu suspenso de "Módulos" na navegação (todas as páginas)
   Abre com o mouse sobre "Módulos" ou com o foco do teclado dentro dele.
   A página geral (modulos.html) foi removida: cada item do menu leva à página do módulo.
   ===================================================================== */
.nav-item { position: relative; }
.nav-link-drop { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-link-drop .ph { font-size: 11px; transition: transform 0.25s; }
.has-drop:hover .nav-link-drop .ph,
.has-drop:focus-within .nav-link-drop .ph { transform: rotate(180deg); }
.has-drop:hover .nav-link-drop { color: var(--verde); background: rgba(39, 61, 41, 0.04); }

/* o padding-top é a "ponte" entre o botão e o painel: o mouse atravessa sem o menu fechar */
.nav-drop {
  position: absolute;
  top: 100%;
  left: 0; /* borda esquerda do painel alinhada com a do botão "Módulos" */
  z-index: 5;
  padding-top: 1.1rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity 0.2s, translate 0.25s var(--ease-rise), visibility 0s 0.25s;
}
.has-drop:hover .nav-drop,
.has-drop:focus-within .nav-drop { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.2s, translate 0.25s var(--ease-rise), visibility 0s; }
/* Esc fecha o menu mesmo com o mouse ou o foco ainda nele (site.js põe .is-closed) */
.has-drop.is-closed .nav-drop { opacity: 0; visibility: hidden; }
.has-drop.is-closed .nav-link-drop .ph { transform: none; }

.nav-drop-panel {
  width: 30rem;
  padding: 0.75rem;
  border-radius: 26px;
  /* fundo sólido: dentro da cápsula (que já tem desfoque) um segundo desfoque não funciona e o texto de trás aparecia */
  background: var(--branco);
  border: var(--borda);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 48px -18px rgba(39, 61, 41, 0.32);
}
.nav-drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.nav-drop-grid a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 16px;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--verde-80);
  transition: color 0.2s, background 0.2s;
}
.nav-drop-grid a img, .nav-drop-grid .mod-sym-icon { flex: none; width: 26px; height: 26px; }
.nav-drop-grid a:hover { color: var(--verde); background: rgba(39, 61, 41, 0.05); }
.nav-drop-grid a[aria-current="page"] { color: var(--verde); font-weight: 600; background: rgba(39, 61, 41, 0.07); }
.nav-drop-grid a:focus-visible, .nav-drop-all:focus-visible { outline: 2px solid var(--verde-80); outline-offset: -2px; }
.nav-drop-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  border-radius: 16px;
  padding: 0.7rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--verde);
  background: var(--cinza);
  transition: background 0.2s;
}
.nav-drop-all:hover { background: #E9E7DF; }
.nav-drop-all .ph { transition: transform 0.3s; }
.nav-drop-all:hover .ph { transform: translateX(3px); }

/* GRC ainda não tem símbolo: ícone numa caixinha do mesmo tamanho */
.mod-sym-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 15px;
  color: var(--verde-80);
  background: var(--cinza);
  border: 1px solid rgba(39, 61, 41, 0.08);
}

/* menu do celular: os módulos ficam logo abaixo de "Módulos", em duas colunas */
.nav-mobile-sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.125rem 0.25rem;
  margin: 0 0 0.25rem 1rem;
  padding-left: 0.5rem;
  border-left: var(--borda-forte);
}
.nav-mobile .nav-mobile-sub a:not(.btn) { padding: 0.375rem 0.75rem; font-size: 0.8125rem; color: var(--verde-60); }
.nav-mobile .nav-mobile-sub a[aria-current="page"] { color: var(--verde); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .nav-drop, .nav-link-drop .ph { transition: none !important; }
}

/* =====================================================================
   Página geral de módulos (modulos.html): carrossel com link para cada página
   ===================================================================== */
/* "Conhecer o módulo": fica no pé do texto do card, com a mesma distância da borda de baixo que o nome tem da de cima */
.mod-more { margin-top: auto; padding-top: 0.75rem; align-self: flex-start; }
.mod-more .ph { font-size: 15px; }
@media (min-width: 768px) { .mod-copy:has(.mod-more) { padding-bottom: 1.75rem; } }

/* =====================================================================
   Página de cada módulo (modulo-*.html)
   Abertura com texto e mockup lado a lado (colunas iguais), o que o módulo faz,
   as telas, os outros módulos e o fechamento.
   ===================================================================== */
.mp-inner { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) { .mp-inner { gap: 3rem; } }

/* ---------- 1. Abertura ---------- */
.mp-hero { padding-bottom: 4rem; }
@media (min-width: 1024px) { .mp-hero { padding: 10rem 4rem 7rem; } }
.mp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1152px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) { .mp-hero-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.mp-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.mp-name {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--verde);
}
.mp-name img { flex: none; width: clamp(40px, 4vw, 52px); height: auto; }
.mp-name .mod-sym-icon { flex: none; width: clamp(40px, 4vw, 52px); height: clamp(40px, 4vw, 52px); border-radius: 14px; font-size: clamp(20px, 2vw, 26px); background: var(--branco); }
.mp-title {
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--verde-80);
  text-wrap: balance;
}
.mp-lead { max-width: 34rem; margin-top: 1.125rem; font-size: 1rem; line-height: 1.65; color: var(--verde-80); text-wrap: pretty; }
@media (min-width: 640px) { .mp-lead { font-size: 1.0625rem; } }
.mp-hero .modblock-status { margin-top: 1.25rem; }
.mp-actions { display: grid; gap: 0.625rem; width: 100%; margin-top: 2rem; }
@media (min-width: 640px) { .mp-actions { display: flex; flex-wrap: wrap; width: auto; } }
.mp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--verde-80);
}
.mp-back:hover { color: var(--verde); }
.mp-back .ph { transition: transform 0.3s; }
.mp-back:hover .ph { transform: translateX(-3px); }
.mp-back:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 3px; border-radius: 4px; }

/* mockup: o mesmo tablet com cartões animados da home, num espaço maior */
.mp-hero-media { min-width: 0; }
.mp-hero-visual { min-height: 18rem; }
.mp-hero .mod-ui:has(.mod-device-box) { --fig-h: 18rem; }
@media (min-width: 640px) {
  .mp-hero-visual { min-height: 26rem; }
  .mp-hero .mod-ui:has(.mod-device-box) { --fig-h: 26rem; }
}
@media (min-width: 1024px) {
  .mp-hero-visual { min-height: 30rem; }
  .mp-hero .mod-ui:has(.mod-device-box) { --fig-h: 30rem; }
}
.mp-hero-visual:not(.mod-ui) { border-radius: 28px; }

/* ---------- 2. O que o módulo faz ---------- */
.mp-feats, .mp-shots, .mp-others { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .mp-feats, .mp-shots, .mp-others { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .mp-feats, .mp-shots, .mp-others { padding: 0 4rem 8rem; } }

.mp-feat-card {
  border-radius: 28px;
  padding: 1.75rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
@media (min-width: 640px)  { .mp-feat-card { padding: 2.5rem 2.25rem; border-radius: 32px; } }
@media (min-width: 1024px) { .mp-feat-card { padding: 3rem; } }
.mp-feat-list { display: grid; gap: 1rem; }
@media (min-width: 768px) { .mp-feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 3rem; } }
.mp-feat-list li { align-items: flex-start; font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
@media (min-width: 640px) { .mp-feat-list li { font-size: 1.0625rem; } }
.mp-feat-list li .ph { margin-top: 0.125rem; }

/* no fim do ciclo / conecta com: dois cards com a mesma largura */
.mp-facts { display: grid; gap: 1rem; margin: -1.25rem 0 0; }
@media (min-width: 768px) { .mp-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (min-width: 1024px) { .mp-facts { margin-top: -1.75rem; } }
.mp-fact {
  border-radius: 24px;
  padding: 1.5rem;
  background: #E9E8E1;
  border: 1px solid rgba(39, 61, 41, 0.05);
}
@media (min-width: 640px) { .mp-fact { padding: 1.75rem 2rem; } }
.mp-fact dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-60); }
.mp-fact dd { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--verde-80); text-wrap: pretty; }
.mp-fact a { color: var(--verde); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(39, 61, 41, 0.3); text-underline-offset: 3px; }
.mp-fact a:hover { text-decoration-color: var(--verde); }

/* ---------- 3. Telas do módulo ---------- */
.mp-shot-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .mp-shot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .mp-shot-wide { grid-column: 1 / -1; }
}
.mp-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  padding: 0.75rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
.mp-shot-img {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: #E8E8E6;
  border: 1px solid rgba(39, 61, 41, 0.06);
}
.mp-shot-img img { display: block; width: 100%; height: auto; transition: transform 0.6s var(--ease-rise); }
@media (hover: hover) { .mp-shot-img:hover img { transform: scale(1.02); } }
.mp-shot-img:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 3px; }
/* notebook já vem com o aparelho em fundo branco: sem moldura, com respiro em volta */
.mp-shot-device .mp-shot-img { padding: 1.5rem 1rem 0.5rem; background: var(--branco); border: 0; }
@media (min-width: 1024px) { .mp-shot-device.mp-shot-wide .mp-shot-img { padding: 2.5rem 6rem 1rem; } }
.mp-shot figcaption { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0.75rem 0.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--verde-80); text-wrap: pretty; }
@media (min-width: 640px) { .mp-shot figcaption { padding: 1.25rem 1rem 0.75rem; } }
.mp-shot figcaption b { font-size: 1.0625rem; font-weight: 500; color: var(--verde); }

/* ---------- 4. Outros módulos ---------- */
.mp-other-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .mp-other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mp-other-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.mp-other {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  height: 100%;
  border-radius: 24px;
  padding: 1.25rem 3.25rem 1.25rem 1.25rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
  transition: transform 0.3s var(--ease-rise), box-shadow 0.3s;
}
.mp-other:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 34px -18px rgba(39, 61, 41, 0.34); }
.mp-other:focus-visible { outline: 2px solid var(--verde-80); outline-offset: 3px; }
.mp-other-name { display: flex; align-items: center; gap: 0.625rem; font-size: 1.125rem; font-weight: 500; color: var(--verde); }
.mp-other-name img, .mp-other-name .mod-sym-icon { flex: none; width: 28px; height: 28px; }
.mp-other-frase { font-size: 0.875rem; line-height: 1.5; color: var(--verde-80); text-wrap: pretty; }
.mp-other-pending .mp-other-frase { color: var(--verde-40); }
.mp-other > .ph {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--verde);
  background: var(--cinza);
  transition: transform 0.3s, color 0.3s, background 0.3s;
}
.mp-other:hover > .ph { transform: translateX(3px); color: #fff; background: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  .mp-other, .mp-other > .ph, .mp-shot-img img { transition: none; }
  .mp-other:hover, .mp-other:hover > .ph, .mp-shot-img:hover img { transform: none; }
}

/* =====================================================================
   Página-modelo de módulo (modulo-inventario-gee.html)
   Seções novas: problema, etapas, linhas texto + tela, escopos, cálculos,
   segurança, relato, consultoria. Todas as colunas lado a lado têm a mesma largura.
   ===================================================================== */
.mp-sec { padding: 0 1.25rem 5rem; }
@media (min-width: 640px)  { .mp-sec { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .mp-sec { padding: 0 4rem 8rem; } }

/* título comum das linhas e cards: menor que o título de seção */
.mp-row-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--verde);
  text-wrap: balance;
}
.mp-row-title em { font-style: normal; font-weight: 500; color: var(--verde-80); }

/* ---------- problema: título à esquerda, texto à direita ---------- */
.mp-why-text { display: flex; flex-direction: column; gap: 1rem; font-size: 1rem; line-height: 1.65; color: var(--verde-80); text-wrap: pretty; }
@media (min-width: 640px) { .mp-why-text { font-size: 1.0625rem; } }
@media (min-width: 1024px) {
  .mp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-why-text { padding-top: 0.625rem; }
}

/* ---------- etapas: cinco cards numerados, mesma largura ---------- */
.mp-steps { display: grid; gap: 0.75rem; counter-reset: none; }
@media (min-width: 640px)  { .mp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }
.mp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-radius: 24px;
  padding: 1.5rem 1.375rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
}
.mp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--verde);
}
.mp-step h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--verde); }
.mp-step p { font-size: 0.875rem; line-height: 1.55; color: var(--verde-80); text-wrap: pretty; }
/* no computador, uma linha fina liga os números */
@media (min-width: 1100px) {
  .mp-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(1.5rem + 1.125rem);
    left: calc(1.375rem + 2.25rem + 0.5rem);
    right: calc(-1rem - 1px);
    height: 1px;
    background: rgba(39, 61, 41, 0.14);
  }
}
.mp-note { margin-top: -1.5rem; font-size: 0.8125rem; color: var(--verde-60); }

/* ---------- linhas texto + tela, alternando o lado ---------- */
.mp-rows { gap: 1rem; }
@media (min-width: 1024px) { .mp-rows { gap: 1.5rem; } }
.mp-row {
  display: grid;
  gap: 1.75rem;
  align-items: center;
  border-radius: 28px;
  padding: 1.75rem 1.25rem 1.25rem;
  background: #E9E8E1;
  border: 1px solid rgba(39, 61, 41, 0.05);
}
@media (min-width: 640px) { .mp-row { padding: 2.25rem 2rem 2rem; border-radius: 32px; } }
@media (min-width: 1024px) {
  .mp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; padding: 3rem; }
  .mp-row-flip .mp-row-copy { order: 2; }
}
.mp-row-copy { display: flex; flex-direction: column; gap: 1rem; }
.mp-row-copy > p, .mp-split-card p, .mp-consult-text p { font-size: 1rem; line-height: 1.65; color: var(--verde-80); text-wrap: pretty; }
.mp-row-copy .mp-row-title { margin-bottom: 0.25rem; }
.mp-row-list { gap: 0.625rem; }
.mp-row-list li { align-items: flex-start; line-height: 1.5; text-wrap: pretty; }
.mp-row-list li .ph { margin-top: 0.0625rem; }
.mp-row-small { font-size: 0.875rem !important; color: var(--verde-60) !important; }
.mp-row-media { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -22px rgba(39, 61, 41, 0.3); }

/* legenda das situações da coleta, com as mesmas cores da tela */
.mp-status { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }
.mp-status li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--verde-80);
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.08);
}
.mp-status i { width: 0.75rem; height: 0.75rem; border-radius: 4px; }
.st-none  { background: var(--branco); border: 1px solid rgba(39, 61, 41, 0.3); }
.st-draft { background: #DAD9D1; }
.st-sent  { background: var(--amarelo); }
.st-back  { background: var(--vermelho); }
.st-ok    { background: var(--verde); }
.st-late  { background: var(--branco); border: 1.5px solid var(--vermelho); }

/* ---------- escopos ---------- */
.mp-scopes { display: grid; gap: 0.75rem; }
@media (min-width: 900px) { .mp-scopes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.mp-scope {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-radius: 28px;
  padding: 1.75rem 1.5rem;
  color: #fff;
  background: var(--grad-verde);
  box-shadow: 0 18px 34px -20px rgba(39, 61, 41, 0.45);
}
@media (min-width: 640px) { .mp-scope { padding: 2rem 1.875rem; } }
.mp-scope-tag {
  align-self: flex-start;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--verde);
  background: #DCE4D6;
}
.mp-scope h3 { font-size: 1.375rem; font-weight: 400; letter-spacing: -0.01em; }
.mp-scope p { font-size: 0.9375rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }

/* dois blocos lado a lado, mesma largura */
.mp-duo { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .mp-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.mp-duo-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 24px;
  padding: 1.5rem;
  background: #E9E8E1;
  border: 1px solid rgba(39, 61, 41, 0.05);
}
@media (min-width: 640px) { .mp-duo-item { padding: 1.75rem 2rem; } }
.mp-duo-item h3 { font-size: 1.125rem; font-weight: 500; color: var(--verde); }
.mp-duo-item p { font-size: 0.9375rem; line-height: 1.6; color: var(--verde-80); text-wrap: pretty; }
.mp-duo-white .mp-duo-item {
  gap: 0.625rem;
  padding: 1.75rem 1.5rem;
  background: var(--branco);
  border-color: rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
}
@media (min-width: 640px) { .mp-duo-white .mp-duo-item { padding: 2.25rem 2.25rem; } }
.mp-duo-white .security-icon { margin-bottom: 0.5rem; }

/* ---------- cálculos: card branco com texto e lista, mesma largura ---------- */
.mp-split-card {
  display: grid;
  gap: 1.75rem;
  border-radius: 28px;
  padding: 1.75rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
.mp-split-card > div { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px)  { .mp-split-card { padding: 2.5rem 2.25rem; border-radius: 32px; } }
@media (min-width: 1024px) { .mp-split-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; padding: 3rem; align-items: center; } }

/* ---------- segurança: quatro cards e a integração embaixo ---------- */
.mp-cards { display: grid; gap: 0.75rem; }
@media (min-width: 640px)  { .mp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.mp-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 24px;
  padding: 1.5rem 1.375rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 28px -18px rgba(39, 61, 41, 0.25);
}
.mp-card .security-icon { margin-bottom: 0.75rem; }
.mp-card h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--verde); }
.mp-card p { font-size: 0.875rem; line-height: 1.55; color: var(--verde-80); text-wrap: pretty; }
.mp-api {
  display: grid;
  gap: 1rem;
  border-radius: 24px;
  padding: 1.5rem;
  background: #E9E8E1;
  border: 1px solid rgba(39, 61, 41, 0.05);
}
@media (min-width: 640px) { .mp-api { padding: 1.75rem 2rem; } }
@media (min-width: 900px) { .mp-api { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; } }
.mp-api h3 { font-size: 1.125rem; font-weight: 500; color: var(--verde); }
.mp-api p { margin-top: 0.375rem; max-width: 46rem; font-size: 0.9375rem; line-height: 1.6; color: var(--verde-80); text-wrap: pretty; }
.mp-api .security-icon { background: var(--branco); }
.mp-api .mods-all { white-space: nowrap; }

/* ---------- consultoria: card claro, título à esquerda e texto à direita ---------- */
.mp-consult {
  display: grid;
  gap: 1.5rem;
  border-radius: 28px;
  padding: 2rem 1.5rem;
  background: var(--branco);
  border: 1px solid rgba(39, 61, 41, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 34px -20px rgba(39, 61, 41, 0.28);
}
@media (min-width: 640px)  { .mp-consult { padding: 2.75rem 2.5rem; border-radius: 32px; } }
@media (min-width: 1024px) { .mp-consult { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; padding: 3.5rem; } }
.mp-consult-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.mp-consult-text .btn { margin-top: 0.75rem; }

/* ---------- telas ampliadas (site.js abre a imagem do link [data-zoom] neste diálogo) ---------- */
.mp-zoom {
  width: min(96vw, 1600px);
  max-width: none;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--branco);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.mp-zoom::backdrop { background: rgba(31, 49, 33, 0.72); backdrop-filter: blur(4px); }
.mp-zoom-body { position: relative; max-height: 94vh; overflow: auto; padding: 0.75rem; }
.mp-zoom img { display: block; width: 100%; height: auto; border-radius: 16px; }
.mp-zoom-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  margin: 0 0 -2.75rem;
  border-radius: 999px;
  font-size: 18px;
  color: #fff;
  background: var(--verde);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
}
.mp-zoom-close:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.mp-shot-img[data-zoom] { cursor: zoom-in; }