/* =============================
   ABA – Infraestrutura
   ============================= */

:root {
  --bg: #0e1116;                /* fundo principal (dark elegante) */
  --bg-alt: #0f1319;
  --surface: #131821;           /* cartões vidro escuro */
  --glass: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --text: #e9eef7;
  --muted: #a8b2c3;
  --brand: #3aa6ff;             /* azul técnico */
  --brand-2: #4df2c9;           /* ciano sutil */
  --good: #3ad29f;
  --warning: #ffcc66;
  --danger: #ff6b6b;

  /* Mapa (substitua por seu asset) */
  --map-src: url('/assets/imgs/mapa-brasil.svg');
}

:root {
  --body-font: ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "SF Pro Text","SF Pro Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --heading-font: var(--body-font);
  --body-color: #555855;
  --text-heading-color: #0A215C;
  --text-white: rgba(255, 255, 255, 0.9); /* Elegância e leveza */
  --bg-white: #FFFFFF;
  --primary-color-1: #ef7d00; /* Cor Primária (ícones, botoes, destaques */
  --color-1: #0A215C; /* Cor Secundária (textos, escuro) */
  --color-2: #FDF6EF;
  --color-3: #EBEBEB;
  --color-4: #F5A63D;
  --color-5: #4B4A4A;
  --color-6: #CCCCCC;
  --color-7: #313131;
  --color-8: #282828;
  --border-color-1: #EEEDE8;
  --border-color-2: #CDD0CD;
  --border-color-3: #474644;
}

/* Dados técnicos (telemetria/estatísticas) */
.data, time, .stat, .odometer{
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Headings – peso/kerning já ok; só tamanhos/line-height */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 .5em 0;
  color: var(--text-heading-color);
  font-family: var(--heading-font);
}

/* Mantém seus máximos: 84 / 56 / 36 / 28 / 22 / 18 */
h1 { font-size: clamp(2.25rem, 1.50rem + 3.5vw, 5.25rem); line-height: 1.15; } /* 36→84px */
h2 { font-size: clamp(2.00rem, 1.20rem + 2.2vw, 3.50rem); line-height: 1.18; } /* 32→56px */
h3 { font-size: clamp(1.50rem, 1.10rem + 1.2vw, 2.25rem); line-height: 1.20; } /* 24→36px */
h4 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.22; } /* 20→28px */
h5 { font-size: clamp(1.125rem, 1.00rem + 0.4vw, 1.375rem); line-height: 1.25; } /* 18→22px */
h6 { font-size: clamp(1.00rem, 0.95rem + 0.2vw, 1.125rem); line-height: 1.28; } /* 16→18px */

/* Corpo – mantém sua intenção de 18px no desktop, fluindo no mobile */
p {
  font-size: clamp(1rem, 0.98rem + 0.20vw, 1.125rem); /* 16→18px */
  line-height: 1.66;
  color: var(--body-color);
  font-family: var(--body-font);
}

.eyebrow {
  margin-bottom: 12px;
}

/* =============================
   HERO / INTRO — Infraestrutura (ABA)
   Escopo exclusivo de .infra-hero
   ============================= */

.infra-hero{
  --brand: var(--primary-color-1);         /* #ef7d00 */
  --ink: var(--color-1);                   /* #0A215C */
  --paper: #fff;
  --line: color-mix(in oklab, var(--ink) 14%, transparent);
  position: relative;
  overflow: clip;
}

/* Grid principal */
.infra-hero .hero-grid{
  display:grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 4vw, 56px); align-items:center;
}

/* Eyebrow */
.infra-hero .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding:6px 10px; border-radius:999px; margin-bottom:12px;
}

/* Título e texto */
.infra-hero #infra-hero-title{
  color: var(--text-heading-color);
  text-wrap: balance;
}
.infra-hero .hero-copy p{ margin: 4px 0 0; max-width: 70ch; }

/* Métricas */
.infra-hero .hero-metrics{
  display:grid; grid-template-columns: repeat(4, minmax(160px,1fr));
  gap: clamp(12px, 2vw, 20px); padding: 28px 0 0; margin:0; list-style:none;
}
.infra-hero .hero-metrics li{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding: clamp(14px, 1.8vw, 18px);
  background: color-mix(in oklab, #fff 86%, var(--ink) 14%);
  border:1px solid var(--line); border-radius: 14px; min-height: 120px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.infra-hero .hero-metrics li::after{
  content:""; position:absolute; inset:auto 12px 12px auto; width:38%;
  height:6px; border-radius:8px;
  background: linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 55%, #b65800));
  opacity:.18;
}
.infra-hero .hero-metrics li:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: color-mix(in oklab, var(--ink) 26%, transparent);
}

/* Ícone da métrica */
.infra-hero .metric-icon {
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px; margin-bottom:8px;
  color:#fff; background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 68%, #b65800));
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 32%, transparent);
}

/* Números + labels */
.infra-hero .hero-metrics .num{
  display:block; margin:6px 0 4px; font-weight:800; letter-spacing:-0.01em;
  color: var(--ink); font-size: clamp(22px, 2.6vw, 28px); line-height:1;
}
/* Texto das métricas (somente o label) */
.infra-hero .hero-metrics li > span:not(.metric-icon){
  display:block;
  font-size:15px;
  line-height:1.45;
  color:#555;
  text-wrap:balance;
}

/* Arte editorial à direita */
.infra-hero .hero-art{ position:relative; min-height: 340px; }
.infra-hero .glass-orb{
  position:absolute; inset: 0 0 20% 20%;
  background:
    radial-gradient(720px 320px at 18% 22%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 58%),
    radial-gradient(520px 280px at 74% 50%, color-mix(in oklab, var(--ink) 16%, transparent), transparent 64%);
  filter: blur(18px); pointer-events:none; z-index:0;
}
.infra-hero .gridlines{
  position:absolute; inset:0;
  background:
    linear-gradient(transparent 96%, color-mix(in oklab, var(--ink) 10%, transparent) 96%),
    linear-gradient(90deg, transparent 96%, color-mix(in oklab, var(--ink) 10%, transparent) 96%);
  background-size: 100% 28px, 28px 100%;
  opacity:.5; mix-blend-mode:multiply; pointer-events:none; z-index:0;
}

/* Chips flutuantes */
.infra-hero .art-chips{
  position:absolute; inset:auto 10px 10px auto; display:flex; flex-wrap:wrap; gap:8px; z-index:1;
}
.infra-hero .art-chips .chip{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  color:#0c0f14; background: color-mix(in oklab, var(--brand) 78%, #ffd5a6);
  border:1px solid color-mix(in oklab, var(--brand) 60%, transparent);
  padding:6px 10px; border-radius:999px;
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 32%, transparent);
  animation: chipFloat 7s ease-in-out infinite;
}
.infra-hero .art-chips .chip:nth-child(2){ animation-delay:.8s; }
.infra-hero .art-chips .chip:nth-child(3){ animation-delay:1.4s; }

/* Marcador */
.infra-hero .nav-dot{
  position:absolute; left:18%; top:70%; width:10px; height:10px; border-radius:50%;
  background: var(--ink); box-shadow: 0 0 0 6px color-mix(in oklab, var(--ink) 18%, transparent);
  opacity:.9;
}

/* Responsividade */
@media (max-width: 1100px){
  .infra-hero .hero-grid{ grid-template-columns:1fr; }
  .infra-hero .hero-art{ min-height:220px; }
}
@media (max-width: 991px){
  .infra-hero .hero-metrics{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 640px){
  .infra-hero .hero-metrics{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .infra-hero .hero-metrics li{ min-height: unset; }
}

/* Micro-animações */
@keyframes chipFloat{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } }

/* =============================
   BLOCO 1 — Equipe (ABA)
   Escopo exclusivo da seção #equipe
   ============================= */

#equipe{
  --brand: var(--primary-color-1);         /* #ef7d00 */
  --ink: var(--color-1);                   /* #0A215C */
  --paper: #fff;
  --line: color-mix(in oklab, var(--ink) 14%, transparent);
}

/* Cabeçalho */
#equipe .section-head{
  display:grid; grid-template-columns: 1fr auto;
  gap: clamp(16px, 3vw, 36px); align-items:end; margin-bottom: clamp(18px,3vw,28px);
}
#equipe .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding:6px 10px; border-radius:999px;
}
#equipe .section-head h2{ max-width: 28ch; color: var(--text-heading-color);}
#equipe .section-head p{ margin:0; max-width: 70ch; }

/* Toolbar (busca + filtros) */
#equipe .role-toolbar{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; display: none;}
#equipe .search{
  display:inline-flex; align-items:center; gap:8px;
  background: color-mix(in oklab, #fff 90%, var(--ink) 10%);
  border:1px solid var(--line);
  padding:10px 12px; border-radius:14px; min-width: clamp(280px, 38vw, 520px);
}
#equipe .search i{ color: var(--brand); }
#equipe .search input{
  background:transparent; border:0; outline:0; flex:1 1 auto;
  color: var(--ink); font-weight:600; letter-spacing:.01em;
}
#equipe .search input::placeholder{ color: color-mix(in oklab, var(--ink) 55%, #999); font-weight:500; }
#equipe .search .clear{
  display:none; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:transparent;
  color: color-mix(in oklab, var(--ink) 70%, #888); cursor:pointer;
}
#equipe .search.has-value .clear{ display:inline-flex; }

#equipe .quick-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;
}
#equipe .quick-filters .qf{
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700; font-size:12px;
  color: var(--ink); background: color-mix(in oklab, #fff 92%, var(--ink) 8%); border:1px dashed var(--line);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#equipe .quick-filters .qf:hover{ transform: translateY(-1px); }
#equipe .quick-filters .qf.is-active{
  background: color-mix(in oklab, var(--brand) 20%, #fff);
  border-color: color-mix(in oklab, var(--brand) 60%, transparent);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 22%, transparent);
}

/* GRID */
#equipe .role-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 22px); margin-top: clamp(18px, 3vw, 28px);
}

/* Card com glass/blueprint sutil */
#equipe .role-card{
  position:relative; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  border:1px solid var(--line); border-radius:18px; padding: 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#equipe .role-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:18px;
  background:
    repeating-linear-gradient(to right, color-mix(in oklab, var(--ink) 6%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, color-mix(in oklab, var(--ink) 6%, transparent) 0 1px, transparent 1px 26px);
  opacity:.06; mix-blend-mode:multiply;
}
#equipe .role-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
}

/* Ícone / header do card */
#equipe .role-ico{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px; margin-bottom:8px;
  color:#fff; background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 68%, #b65800));
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 32%, transparent);
}
#equipe .role-card h3{
  font-size: clamp(17px, 1.6vw, 20px); margin: 18px 0 8px; color: var(--text-heading-color); font-weight:700;
}
#equipe .role-card p{ font-size: 15px; line-height: 1.6; color: #555; }

/* Pills */
#equipe .pill-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; padding:0; }
#equipe .pill-list li{
  list-style:none; font-size:12px; font-weight:700; color: var(--ink);
  border:1px solid var(--line); background: color-mix(in oklab, #fff 92%, var(--ink) 8%);
  padding:6px 10px; border-radius:999px;
}

/* Sem resultados */
#equipe .no-results{ margin-top: 10px; font-weight:700; color: var(--ink); }

/* Responsividade */
@media (max-width: 991px){
  #equipe .section-head{ grid-template-columns: 1fr; align-items:start; }
  #equipe .role-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #equipe .role-grid{ grid-template-columns: 1fr; }
}

/* força ícone branco só neste bloco (se preferir essa classe) */
.hero-copy [data-lucide], .art-chips [data-lucide] { stroke:#fff;}

/* ============================
   TOAST INSTITUCIONAL (INFRA)
   ============================ */

/* estado inicial + transições (entrada suave) */
.note-callout.note-toast{
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px 14px;
  max-width: min(680px, 86vw);
  padding: 16px 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary-color-1) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary-color-1) 18%, transparent);
  box-shadow: 0 12px 42px rgba(10,33,92,.12), 0 2px 0 rgba(255,255,255,.7) inset;
  backdrop-filter: saturate(1.05) blur(6px);

  /* animação base */
  opacity: 0;
  transform: translateY(16px) scale(.98);
  filter: blur(6px);
  pointer-events: none;

  /* transitions para ENTRADA */
  transition:
    opacity   .48s cubic-bezier(.16,1,.3,1),
    transform .48s cubic-bezier(.16,1,.3,1),
    filter    .48s cubic-bezier(.16,1,.3,1);
}

/* ENTRADA (apresentado) */
.note-callout.note-toast.show{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* SAÍDA (recolhe suave) – usa easing diferente */
.note-callout.note-toast.hide{
  opacity: 0;
  transform: translateY(12px) scale(.96);
  filter: blur(4px);
  pointer-events: none;

  transition:
    opacity   .38s cubic-bezier(.7,0,.84,0),
    transform .38s cubic-bezier(.7,0,.84,0),
    filter    .38s cubic-bezier(.7,0,.84,0);
}

/* conteúdo interno com leve atraso após a entrada */
.note-callout .note-icon,
.note-callout .note-content,
.note-callout .note-close{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .40s ease, transform .40s ease;
}
.note-callout.show .note-icon,
.note-callout.show .note-content,
.note-callout.show .note-close{
  opacity: 1;
  transform: translateY(0);
  transition-delay: .08s; /* entra logo após o container */
}

/* ícone — branco garantido, coerente com sua identidade */
.note-callout .note-icon{
  display:grid; place-items:center;
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--primary-color-1);
  color: #fff;
  flex: 0 0 auto;
}
.note-callout .note-icon i{
  stroke: currentColor !important;
  color:  currentColor !important;
}

/* conteúdo tipográfico */
.note-callout .note-content h4{
  margin: 0 0 2px;
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading-color);
}
.note-callout .note-content p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--body-color);
}

/* botão fechar */
.note-callout .note-close{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--body-color);
  opacity: .7;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
}
.note-callout .note-close:hover{ opacity: 1; }
.note-callout .note-close i{ stroke: currentColor !important; }

/* mobile: vira banner “footer” */
@media (max-width: 640px){
  .note-callout.note-toast{
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
    border-radius: 14px;
  }
}

/* acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .note-callout.note-toast{
    transition: none;
    filter: none;
  }
  .note-callout .note-icon,
  .note-callout .note-content,
  .note-callout .note-close{
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ============================
   VARIANTE INLINE (#equipe)
   ============================ */
#equipe .note-callout{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin: 50px auto 0;
  max-width:72ch;
  background: var(--color-2);
  border:1px solid color-mix(in srgb, var(--primary-color-1) 18%, transparent);
  border-radius:18px;
  padding:18px 22px;
  box-shadow:0 6px 18px rgba(10,33,92,.04);
}

#equipe .note-icon {
  flex:0 0 auto;
  display:grid; place-items:center;
  width:36px; height:36px;
  border-radius:12px;
  background:var(--primary-color-1);
  color:#fff;
}

#equipe .note-content h4{
  font-family:var(--heading-font);
  font-size:1rem;
  font-weight:600;
  margin:0 0 2px;
  color:var(--text-heading-color);
}
#equipe .note-content p{
  margin:0;
  font-size:.95rem;
  line-height:1.5;
  color:var(--body-color);
}

/* Responsividade da grade local (se existir) */
@media (max-width: 991px) {
  #equipe .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #equipe .section-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  #equipe .role-grid { grid-template-columns: 1fr; }
}

/* força ícone branco só neste bloco (se preferir essa classe) */
.role-ico [data-lucide] { stroke:#fff;}

/* =============================
   BLOCO 2 — Atendimento In Loco
   Somente estilos desta seção
   (escopados por #inloco)
   ============================= */

#inloco{
  /* Tokens locais (derivados da sua ID visual) */
  --brand: var(--primary-color-1);          /* #ef7d00 */
}

/* Fundo alternado da seção */
#inloco.alt {
  background: var(--color-1);
}

/* Eyebrow */
#inloco .eyebrow {
  display:inline-block;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding:6px 10px; border-radius:999px;
}

/* Cabeçalho da seção */
#inloco .section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

#inloco .section-head h2 {
  color: var(--text-white);
}

#inloco .section-head p {
  color: var(--text-white);
  margin-bottom: 0;
}

/* =============================
   LISTA DE CHECAGEM PREMIUM — Infraestrutura
   ============================= */

#inloco .check-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px 14px;
  margin-top:24px;
  padding:0;
}

#inloco .check-list li{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--text-white);

  /* Cápsula */
  padding:8px 14px;
  border-radius:999px;
  background: color-mix(in oklab, var(--primary-color-1) 12%, var(--color-1) 88%);
  border:1px solid color-mix(in oklab, var(--primary-color-1) 24%, transparent);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px) saturate(120%);

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

#inloco .check-list li i{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  stroke-width:2.2;
  color:var(--primary-color-1);
  background:rgba(255,255,255,0.06);
  border-radius:50%;
  padding:3px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset;
}

/* Hover refinado */
#inloco .check-list li:hover{
  transform:translateY(-2px);
  background: color-mix(in oklab, var(--primary-color-1) 18%, var(--color-1) 82%);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ===========================
   MAPA INTERATIVO — FINAL
   =========================== */

/* Wrapper */
#inloco .map-wrap {
  margin-top: clamp(18px, 3vw, 28px);
  margin-inline: auto;
}

/* Canvas do mapa */
#inloco .map {
  position: relative;
  width: 100%;
  aspect-ratio: var(--map-ar, 1.157);  /* fallback 1.157 p/ o SVG que gerei */
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(58, 166, 255, 0.07), transparent 55%),
    radial-gradient(900px 600px at 80% 50%, rgba(77, 242, 201, 0.06), transparent 60%),
    #0c0f14;
  /* refinamentos */
  box-shadow:
    0 10px 30px rgba(0,0,0,.04),
    0 8px 30px rgba(255,255,255,.02) inset;
  backdrop-filter: saturate(1.02);
}

/* padding interno do conteúdo do mapa (ajuste como quiser) */
#inloco .map{
  /* largura e altura internas “livres” = 100% - 2*pad  */
  --pad-x: 8%;    /* respiro nas laterais */
  --pad-y: 9%;    /* respiro em cima/baixo */
}

/* o SVG de fundo respeita o mesmo padding (não encosta na borda) */
#inloco .map::before{
  content:"";
  position:absolute;
  top: var(--pad-y); bottom: var(--pad-y);
  left: var(--pad-x); right: var(--pad-x);
  background-image: var(--map-src);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity:.9;
  /*filter: drop-shadow(0 0 20px rgba(58,166,255,.08));*/
  z-index:0;
}

/* pinos menores (ajuste o base) */
#inloco .pin{ --pin-size: 10px; }            /* antes era 12px */
@media (max-width: 768px){ #inloco .pin{ --pin-size: 9px; } }
@media (max-width: 480px){ #inloco .pin{ --pin-size: 8px; } }

/* Grain leve para evitar banding em telas grandes */
#inloco .map::after {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .018 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.30;
  z-index: 1;
}

/* ===== Pins ===== */
#inloco .pin {
  --pin-size: 8px;
  position: absolute;
  width: var(--pin-size);
  height: var(--pin-size);
  border-radius: 999px;
  background: var(--brand);
  border: 2px solid #0b0e13;
  box-shadow: 0 8px 18px rgba(58, 166, 255, 0.35);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  z-index: 2;
}

/* Halo premium (estático) */
#inloco .pin::before {
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:999px;
  box-shadow:
    0 0 0 2px #0b0e13,
    0 0 14px 2px rgba(58,166,255,.25);
}

/* Pulso elegante (animação suave) */
#inloco .pin::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-width: 2px;  
  border-radius: 999px;
  border: 2px solid rgba(77, 242, 201, 0.55);
  opacity: .7;
  animation: pinPulse 2.6s ease-out infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(.75); opacity:.7; }
  80%  { transform: scale(1.25); opacity:0; }
  100% { opacity:0; }
}

@media (max-width: 768px){ #inloco .pin{ --pin-size: 7px; } }
@media (max-width: 480px){ #inloco .pin{ --pin-size: 6px; } }

/* Hover/foco */
#inloco .pin:hover {
  background: var(--brand-2);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 10px 22px rgba(77, 242, 201, 0.35);
}
#inloco .pin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== Tooltip ===== */
#inloco .tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px)) scale(.98);
  background: rgba(15, 19, 25, 0.96);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--text-white);
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity .18s ease, transform .18s cubic-bezier(.16,1,.3,1);
  min-width: 160px;
  text-align: center;
  z-index: 3;
}
#inloco .tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(15, 19, 25, 0.96);
  filter: drop-shadow(0 -1px 0 var(--line));
}
#inloco .tooltip.visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 12px)) scale(1);
}

/* ===== Legenda ===== */
#inloco .map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  color: color-mix(in srgb, var(--muted) 90%, #0000);
  margin-top: 10px;
}
#inloco .map-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  margin-right: 6px;
  box-shadow: 0 0 0 2px #0b0e13;
}

/* ===== Responsividade ===== */
@media (max-width: 768px){
  #inloco .tooltip { font-size: 12px; padding: 8px 10px; min-width: 140px; }
  #inloco .pin { --pin-size: 11px; }
}
@media (max-width: 480px){
  #inloco .pin { --pin-size: 10px; }
}

/* ===== Responsividade específica da seção ===== */
@media (max-width: 991px) {
  #inloco .section-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Overlay SVG (fica entre o fundo e os pins) */
#inloco .map .map-overlay {
  position: absolute;
  inset: 0;
  z-index: 1; /* abaixo dos .pin (z=2) e acima da silhueta (z=0) */
  pointer-events: none;
}

/* Estilo da região MATOPIBA */
#inloco .map .region-matopiba {
  fill: rgba(77, 242, 201, 0.14);
  stroke: rgba(77, 242, 201, 0.85);
  stroke-width: .8;
  filter: drop-shadow(0 6px 16px rgba(77,242,201,.25));
}

/* Glow opcional extra, bem sutil */
#inloco .map .region-matopiba--halo {
  fill: rgba(77, 242, 201, 0.10);
  filter: blur(10px);
}

/* Overlay SVG (entre fundo e pinos), respeita o mesmo padding do mapa */
#inloco .map .map-overlay{
  position:absolute;
  top: var(--pad-y); bottom: var(--pad-y);
  left: var(--pad-x); right: var(--pad-x);
  z-index: 1;             /* abaixo dos .pin (z=2) e acima da silhueta (z=0) */
  pointer-events: none;
}

/* Estilo do MATOPIBA (você já tinha algo assim) */
#inloco .map .region-matopiba{
  fill: rgba(77, 242, 201, 0.14);
  stroke: rgba(77, 242, 201, 0.85);
  stroke-width: .8;
  filter: drop-shadow(0 6px 16px rgba(77,242,201,.25));
}
/* Halo opcional (duplicar o path) */
#inloco .map .region-matopiba--halo{
  fill: rgba(77, 242, 201, 0.10);
  filter: blur(10px);
}

/* ===== SPLIT VIEW ===== */
#inloco .infra-grid{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,0.9fr);
  gap: clamp(16px, 3vw, 36px);
  align-items:start;
}
@media (max-width: 1024px){
  #inloco .infra-grid{ grid-template-columns: 1fr; }
  #inloco .col-info{ order:2; }
  #inloco .col-map{ order:1; }
}

/* chips (substitui a UL de checklist por pílulas) */
#inloco .check-chips{
  display:flex; flex-wrap:wrap; gap:10px 12px; margin: 6px 0 18px; padding:0; list-style:none;
}
#inloco .check-chips li{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: color-mix(in oklab, var(--line) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--line) 70%, transparent);
  color: var(--text-white);
  font-size: 13px;
}

/* KPIs */
#inloco .kpi-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 16px; }
#inloco .kpi{
  flex:1 1 120px; padding:12px 14px; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
  border:1px solid color-mix(in oklab, var(--line) 75%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.18) inset;
}
#inloco .kpi strong{ display:block; font-size:18px; line-height:1.2; color:var(--text-white); }
#inloco .kpi span{ font-size:12px; color: color-mix(in srgb, var(--muted) 90%, #0000); }

/* Painel vivo (sticky) */
#inloco .col-info{ position:relative; }
#inloco .info-card{
  position: sticky; top: 96px;
  padding: 18px 18px;
  border-radius: 16px;
  background: rgba(12,15,20,.72);
  border:1px solid color-mix(in oklab, var(--line) 75%, transparent);
  backdrop-filter: blur(6px) saturate(1.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
#inloco .info-card .badge{
  display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px;
  background: color-mix(in oklab, var(--brand) 16%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 50%, var(--line) 50%);
  margin-bottom:10px;
}
#inloco .info-card h3{ margin:0 0 8px; color:var(--text-white); }
#inloco .info-card .specs{ display:grid; gap:10px; margin: 12px 0 16px; }
#inloco .info-card dt{ font-size:12px; color: color-mix(in srgb, var(--muted) 85%, #0000); }
#inloco .info-card dd{ margin:2px 0 0; color: var(--text-white); }
#inloco .btn-ghost{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--brand) 50%, var(--line) 50%);
  color: var(--text-white); text-decoration:none;
}

/* ===== Zoom sutil (lens) no mapa ===== */
#inloco .map{
  --map-scale: 1;
  --map-ox: 50%;
  --map-oy: 50%;
  transform-origin: var(--map-ox) var(--map-oy);
  transform: translateZ(0) scale(var(--map-scale));
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce){
  #inloco .map{ transition: none; }
}

/* (mantém seu CSS do mapa, pins, tooltip, overlay — nada foi removido) */

/* =============================
   BLOCO 3 — Hangares Especializados (ABA)
   Escopo exclusivo da seção #hangares
   ============================= */

#hangares{
  /* Tokens locais alinhados à ID */
  --brand: var(--primary-color-1);        /* #ef7d00 */
  --ink: var(--color-1);                  /* #0A215C */
  --paper: #fff;
  --line-soft: color-mix(in oklab, var(--ink) 14%, transparent);
  --chip: color-mix(in oklab, var(--brand) 8%, #fff);
}

/* Cabeçalho */
#hangares .section-head{
  display:grid; grid-template-columns:1fr auto;
  gap: clamp(16px,3vw,36px); align-items:end; margin-bottom: clamp(18px,3vw,28px);
}
#hangares .eyebrow{
  display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand); background: color-mix(in oklab, var(--brand) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding:6px 10px; border-radius:999px;
}
#hangares h2{
  color: var(--text-heading-color);
  font-weight:700;
}
#hangares .section-head p{ margin:0; }

/* Toggle Foto/Planta */
#hangares .view-switch{ display:flex; gap:8px; }
#hangares .vs{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:999px; border:1px dashed var(--line-soft); background: var(--chip);
  color: var(--ink); font-weight:700; cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#hangares .vs:hover{ transform: translateY(-1px); }
#hangares .vs.is-active{
  background: color-mix(in oklab, var(--brand) 20%, #fff);
  border-color: color-mix(in oklab, var(--brand) 60%, transparent);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 22%, transparent);
}

/* GRID */
#hangares .hangar-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap: clamp(14px,2.2vw,22px);
}

/* Card */
#hangares .hangar-card{
  background: linear-gradient(180deg, #fff, color-mix(in oklab, #fff 90%, var(--ink) 10%));
  border:1px solid var(--line-soft); border-radius:18px; padding:14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex; flex-direction:column; gap:10px;
}
#hangares .hangar-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06);
}

/* Mídia com blueprint/overlay */
#hangares .card-media{
  position:relative; overflow:hidden; border-radius:14px; aspect-ratio: 16/9; background:#f2f5f8;
}
#hangares .card-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; transform: scale(1.01);
  filter: saturate(.98) contrast(1.02);
}
#hangares .card-media .media-overlay{
  pointer-events:none; position:absolute; inset:0;
  background:
    radial-gradient(900px 400px at 85% 12%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 62%),
    repeating-linear-gradient(to right, color-mix(in oklab, var(--ink) 7%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, color-mix(in oklab, var(--ink) 7%, transparent) 0 1px, transparent 1px 26px);
  opacity:.32; mix-blend-mode:multiply;
}
/* Planta: surge um desenho técnico sutil */
#hangares .card-media .plan-overlay{
  pointer-events:none; position:absolute; inset:8px; border-radius:10px;
  border:2px dashed color-mix(in oklab, var(--ink) 36%, transparent);
  background:
    linear-gradient(to right, transparent 0 calc(60% - 1px), color-mix(in oklab, var(--ink) 36%, transparent) calc(60% - 1px) calc(60% + 1px), transparent calc(60% + 1px)),
    linear-gradient(to bottom, transparent 0 calc(40% - 1px), color-mix(in oklab, var(--ink) 36%, transparent) calc(40% - 1px) calc(40% + 1px), transparent calc(40% + 1px));
  opacity:0; transform: scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
/* Ativa plano quando raiz recebe .is-plan */
#hangares.is-plan .card-media img{ filter: saturate(.8) contrast(.98) brightness(.96); }
#hangares.is-plan .card-media .plan-overlay{ opacity:.9; transform: scale(1); }

/* Badge da mídia */
#hangares .badge{
  position:absolute; left:10px; top:10px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:#0c0f14;
  background: color-mix(in oklab, var(--brand) 78%, #ffd5a6);
  border:1px solid color-mix(in oklab, var(--brand) 60%, transparent);
  padding:6px 10px; border-radius:999px;
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 32%, transparent);
}

/* Header do card */
#hangares .hangar-card header{ display:flex; align-items:center; gap:10px; margin:0; }
#hangares .hangar-card .icon{
  display:inline-grid; place-items:center; width:36px; height:36px; flex:0 0 auto; border-radius:10px;
  color:#fff; background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 68%, #b65800));
  box-shadow: 0 10px 22px color-mix(in oklab, var(--brand) 32%, transparent);
}
#hangares .hangar-card h3{
  margin:0; color: var(--text-heading-color); font-size: clamp(17px,1.6vw,20px); line-height:1.2; font-weight:700;
}

/* Lista de specs */
#hangares .specs{ display:grid; gap:8px; margin-top:6px; padding:0; }
#hangares .specs li{
  list-style:none; display:flex; gap:8px; align-items:center;
  font-size:15px;
}
#hangares .specs li i{ color: var(--brand); }
#hangares .specs strong{ color: var(--ink); }

/* Nota */
#hangares .note{
  display:flex; gap:10px; align-items:flex-start; margin-top:18px;
  color: #6b7280; background: rgba(0,0,0,.03); border:1px dashed var(--line-soft);
  padding:12px 14px; border-radius:12px;
}
#hangares .note i{ color: var(--brand); }

#hangares .note p {
  margin: 0;
}

/* Assimetria leve para dinamismo 
#hangares .hangar-card:nth-child(1){ transform: translateY(6px); }
#hangares .hangar-card:nth-child(2){ transform: translateY(-4px); }
#hangares .hangar-card:nth-child(3){ transform: translateY(10px); }
#hangares .hangar-card:hover{ transform: translateY(0); }
*/

/* Responsividade */
@media (max-width: 991px){
  #hangares .section-head{ grid-template-columns:1fr; align-items:start; }
  #hangares .hangar-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  #hangares .hangar-card:nth-child(n){ transform:none; }
}
@media (max-width: 640px){
  #hangares .hangar-grid{ grid-template-columns:1fr; }
}

.note-icon [data-lucide] { stroke:#fff;}

/* =============================
   BLOCO 4 — Certificações & Prêmios (ABA)
   Escopo exclusivo da seção #certificacoes
   ============================= */

#certificacoes{
  /* Tokens locais (derivados da sua ID visual) */
  --brand: var(--primary-color-1);          /* #ef7d00 */
  --ink: var(--text-white);                 /* rgba(255,255,255,.9) */
  --ink-weak: rgba(255,255,255,.72);
  --ink-dim: rgba(255,255,255,.55);
  --deep-1: color-mix(in oklab, var(--color-1) 86%, #000);
  --deep-2: color-mix(in oklab, var(--color-1) 70%, #000);
  --line: color-mix(in oklab, #fff 14%, transparent);
}

/* Fundo alt: gradiente + blueprint sutil */
#certificacoes.alt{
  background:
    radial-gradient(900px 400px at 16% 14%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 60%),
    radial-gradient(1100px 500px at 80% 86%, color-mix(in oklab, var(--color-1) 22%, transparent), transparent 62%),
    linear-gradient(180deg, var(--deep-1), var(--deep-2));
  position: relative;
  isolation: isolate;
}
#certificacoes.alt::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 1px, transparent 1px 26px);
  opacity:.06; pointer-events:none; mix-blend-mode: soft-light;
}

/* Cabeçalho */
#certificacoes .section-head{
  display:grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(16px, 3vw, 36px);
  align-items:end;
  margin-bottom: clamp(18px, 3.6vw, 32px);
}
#certificacoes .eyebrow{
  display:inline-block;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding:6px 10px; border-radius:999px;
}
#certificacoes h2{
  color:#fff;
}
#certificacoes .section-head p{ color:var(--ink-weak); max-width:62ch; margin:0; }

/* Toolbar (busca + filtros) */
#certificacoes .toolbar{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
#certificacoes .search{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:10px 12px; border-radius:14px;
  min-width: clamp(260px, 38vw, 520px);
  backdrop-filter: blur(6px);
}
#certificacoes .search i{ color: var(--brand); }
#certificacoes .search input{
  background:transparent; border:0; outline:0; flex:1 1 auto;
  color:#fff; font-weight:600; letter-spacing:.01em;
}
#certificacoes .search input::placeholder{ color:var(--ink-dim); font-weight:500; }
#certificacoes .search .clear{
  display:none; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:transparent;
  color:var(--ink-weak); cursor:pointer;
}
#certificacoes .search.has-value .clear{ display:inline-flex; }

#certificacoes .quick-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;
}
#certificacoes .quick-filters .qf{
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700; font-size:12px;
  color:var(--ink); background: rgba(255,255,255,.06); border:1px dashed var(--line);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#certificacoes .quick-filters .qf:hover{ transform: translateY(-1px); }
#certificacoes .quick-filters .qf.is-active{
  background: color-mix(in oklab, var(--brand) 20%, rgba(255,255,255,.08));
  border-color: color-mix(in oklab, var(--brand) 60%, transparent);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 20%, transparent);
}

/* Grid dos cards */
#certificacoes .certs-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2.2vw, 22px);
}

/* Card */
#certificacoes .cert-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  color: var(--ink-weak);
}
#certificacoes .cert-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 4px 14px rgba(0,0,0,.18);
}

#certificacoes .cc-head{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
#certificacoes .cc-head .icon{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  color:#fff;
  background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 68%, #b65800));
  box-shadow: 0 10px 24px color-mix(in oklab, var(--brand) 36%, transparent);
}
#certificacoes .cc-head h3{
  margin:0; font-size: clamp(16px, 1.6vw, 18px); line-height:1.2; color:#fff; font-weight:700;
}

#certificacoes .cert-card p{ margin:14px 0 10px; color:var(--ink); line-height:1.6; }

/* Tags */
#certificacoes .tags{ display:flex; flex-wrap:wrap; gap:6px; margin:15px 0; padding:0; }
#certificacoes .tags li{
  list-style:none; font-size:12px; font-weight:700; color:var(--ink);
  border:1px solid var(--line);
  background: rgba(255,255,255,.06); border-radius:999px; padding:6px 10px;
}

/* Ações */
#certificacoes .cc-actions{ display:flex; gap:10px; margin-top:8px; }
#certificacoes .btn.btn-ghost{
  color:#fff; font-weight:700;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
}
#certificacoes .btn.btn-ghost i{ color:var(--brand); }

/* Sem resultados */
#certificacoes .no-results{
  color: var(--ink); margin-top: 10px; font-weight:700;
}

/* Nota */
#certificacoes .note{
  display:flex; gap:10px; align-items:flex-start;
  margin-top: 18px; color: var(--ink);
  background: rgba(255,255,255,.06);
  border: 1px dashed var(--line);
  padding: 12px 14px; border-radius: 12px;
}
#certificacoes .note i{ color:var(--brand); }

#certificacoes .note p {
  margin: 0;
}

/* Responsividade */
@media (max-width: 1200px){
  #certificacoes .section-head{ grid-template-columns: 1fr; align-items:start; }
  #certificacoes .toolbar{ align-items:flex-start; }
}
@media (max-width: 991px){
  #certificacoes .certs-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  #certificacoes .certs-grid{ grid-template-columns: 1fr; }
  #certificacoes .search{ min-width: 100%; }
}

/* Micro-animação (ícones respiram levemente no hover do card) */
#certificacoes .cert-card:hover .icon{ transform: translateY(-1px); }

article span.icon [data-lucide] {
  stroke: var(--text-white);
}

/* =============================
   BLOCO 5 — Centro de Treinamento Integrado (ABA Training)
   Escopo exclusivo da seção #training
   ============================= */

#training {
  /* Tokens locais derivados da sua ID */
  --ink: var(--color-1);                         /* #0A215C */
  --brand: var(--primary-color-1);               /* #ef7d00 */
  --paper: #ffffff;
  --line-soft: color-mix(in oklab, var(--ink) 10%, transparent);
  --glass: color-mix(in oklab, var(--ink) 3%, #fff);
}

/* Cabeçalho da seção (duas colunas com painel visual) */
#training .section-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: end;
  margin-bottom: clamp(18px, 4vw, 36px);
}

#training .section-head .eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding: 6px 10px;
  border-radius: 999px;

}

#training .section-head p {
  max-width: 62ch;
  margin: 0 0 16px 0;
}

/* Chips de trilha */
#training .training-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
}
#training .training-tags .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  border: 1px dashed color-mix(in oklab, var(--ink) 18%, transparent);
  background: color-mix(in oklab, var(--brand) 6%, #fff);
  padding: 8px 12px;
  border-radius: 999px;
}
#training .training-tags .tag i { color: var(--brand); }

/* Painel visual editorial (efeito blueprint + orbes) */
#training .training-visual {
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  overflow: hidden;
  min-height: clamp(180px, 28vw, 320px);
  background:
    radial-gradient(1200px 600px at 85% 20%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(700px 400px at 20% 90%, color-mix(in oklab, var(--ink) 12%, transparent), transparent 60%),
    var(--paper);
  border: 1px solid var(--line-soft);
}

#training .training-visual picture,
#training .training-visual img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  filter: saturate(0.95) contrast(1.04);
}

#training .training-visual .visual-overlay {
  pointer-events: none;
  position: absolute; inset: 0;
  /* grade blueprint sutil */
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 1px,
      transparent 1px 24px
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklab, var(--ink) 6%, transparent) 0 1px,
      transparent 1px 24px
    );
  opacity: .45;
  mix-blend-mode: multiply;
}

/* Chips flutuantes no painel visual */
#training .kpi-chips {
  position: absolute; inset: auto auto 12px 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
  z-index: 2;
}
#training .kpi-chips .kpi {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  color: var(--ink);
  background: color-mix(in oklab, #fff 85%, var(--brand) 15%);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  animation: trainingFloat 7s ease-in-out infinite;
}
#training .kpi-chips .kpi:nth-child(2){ animation-delay: .8s; }
#training .kpi-chips .kpi:nth-child(3){ animation-delay: 1.4s; }
#training .kpi-chips .kpi i{ color: var(--brand); }

/* Layout geral após o cabeçalho */
#training .training-layout {
  margin-top: clamp(14px, 2.5vw, 22px);
}

/* GRID dos cards (masonry sutil) */
#training .training-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
}

/* Cartão base */
#training .training-card {
  background: linear-gradient(180deg, #fff, color-mix(in oklab, #fff 88%, var(--ink) 12%));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 14px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column; gap: 10px;
}
#training .training-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08), 0 3px 12px rgba(0,0,0,.06);
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
}

/* Mídia no topo do card (opcional, já no HTML) */
#training .training-card .card-media {
  position: relative; overflow: hidden; border-radius: 12px;
  aspect-ratio: 16 / 9; background: #f4f6f8;
}
#training .training-card .card-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.98) contrast(1.02);
  transform: scale(1.01);
}

/* Cabeçalho dos cards */
#training .training-card header {
  display: flex; align-items: center; gap: 10px; margin: 0;
}
#training .training-card header .icon {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  color: #fff; background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 60%, #b65800));
  box-shadow: 0 8px 18px color-mix(in oklab, var(--brand) 30%, transparent);
  flex: 0 0 auto;
}
#training .training-card h3 {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.2;
  margin: 0;
  color: var(--text-heading-color);
}

/* Lista com bullets custom */
#training .bullet-list {
  display: grid; gap: 6px; margin: 0; padding: 0;
}
#training .bullet-list li {
  list-style: none; position: relative; padding-left: 18px;
}
#training .bullet-list li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent);
}

/* Assimetria leve para dinamismo 
#training .training-card:nth-child(1){ transform: translateY(6px); }
#training .training-card:nth-child(2){ transform: translateY(-4px); }
#training .training-card:nth-child(3){ transform: translateY(10px); }
*/

/* CTA */
#training .cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(16px, 3vw, 24px);
}
#training .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 50px 50px 50px 50px; border: 0;
  color: var(--color-1); font-weight: 700; text-decoration: none;
  background: linear-gradient(180deg, var(--brand), color-mix(in oklab, var(--brand) 72%, #b65800));
  box-shadow: 0 12px 24px color-mix(in oklab, var(--brand) 32%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
#training .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px color-mix(in oklab, var(--brand) 45%, transparent); }

#training .btn-ghost {
  color: var(--color-1); background: color-mix(in oklab, #fff 94%, var(--ink) 6%);
  border: 1px solid var(--line-soft); box-shadow: none; font-weight: 700;
}

/* Responsividade */
@media (max-width: 1200px){
  #training .section-head { grid-template-columns: 1fr; align-items: start; }
  #training .training-visual { order: 2; min-height: 260px; }
}

@media (max-width: 991px){
  #training .training-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  #training .training-card:nth-child(n){ transform: none; }
}

@media (max-width: 640px){
  #training .training-grid { grid-template-columns: 1fr; }
  #training .cta-row { flex-direction: column; }
}

/* Micro-anim */
@keyframes trainingFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

#training .cta-row a:nth-child(1) > svg {
  stroke: var(--text-white);
}

/* Nota (ícone + texto alinhados) */
.note{
  display:flex;
  align-items:center;      /* centraliza verticalmente */
  gap:10px;
  margin-top:18px;
  color:var(--muted);
  background:rgba(255,255,255,0.03);
  border:1px dashed var(--line);
  padding:12px 14px;
  border-radius:12px;
}

.note i{
  flex:0 0 auto;
  display:flex;            /* garante centralização do SVG */
  align-items:center;
  justify-content:center;
  line-height:0;           /* remove altura fantasma */
  opacity:.9;
}

.note p{
  margin:0;                /* zera espaçamento padrão */
  line-height:1.5;
}