/* ==========================================================================
   SONAR24 — CSS (passado a limpo)
   - Unifica variáveis
   - Remove duplicidades (root/body/navbar/hero/card/pill/list/logo/ring)
   - Mantém seu visual “premium claro” + SONAR24 metal/3D + animações
   ========================================================================== */

/* =========================
   1) VARIÁVEIS / BASE
   ========================= */
:root{
  /* Paleta base */
  --ink:#0b1220;                 /* texto principal */
  --muted:#4b5563;               /* texto secundário */
  --line:rgba(15,23,42,.12);     /* bordas */
  --bg:#f6f8fb;                  /* fundo */
  --card:#ffffff;                /* cartões */
  --soft:rgba(11,59,140,.08);    /* badge/pills suaves */

  /* Branding */
  --brand:#0b3b8c;               /* azul institucional */
  --brand-2:#0ea5e9;             /* acento */

  /* Sombras */
  --shadow: 0 18px 60px rgba(2,6,23,.10);
  --shadow-2: 0 10px 28px rgba(2,6,23,.08);

  /* Layout */
  --navbar-h: 92px;              /* usado no scroll-padding-top */
}

html, body{ height:100%; }

/* Âncoras (#secao) com navbar fixed-top */
html{ scroll-padding-top: var(--navbar-h); }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin-top: 40px;
}

a{ text-decoration:none; }

/* =========================
   2) NAVBAR / BADGE / LINKS
   ========================= */
.navbar{
  background: rgba(255,255,255,.90);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(12px);
}

.navbar .nav-link{
  color: var(--ink);
  opacity:.86;
}
.navbar .nav-link:hover{ opacity:1; }

.brand-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.28rem .65rem;
  border-radius:999px;
  background: var(--soft);
  border:1px solid rgba(11,59,140,.14);
  color: var(--brand);
  font-weight:800;
  font-size:.86rem;
  white-space:nowrap;
}

/* Oculta o badge no mobile */
@media (max-width: 767.98px){
  .brand-badge{ display:none !important; }
}

/* =========================
   3) HERO / TIPOGRAFIA
   ========================= */
.hero{
  position:relative;
  overflow:hidden;
  padding: 72px 0 44px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.92), rgba(247,249,252,.50)),
    url("../img/hero.png") center/cover no-repeat;
  border-bottom: 1px solid var(--line);
}

.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(14,165,233,.18), transparent 65%),
    radial-gradient(560px 280px at 75% 25%, rgba(11,59,140,.14), transparent 68%),
    radial-gradient(540px 280px at 60% 85%, rgba(14,165,233,.12), transparent 66%);
  pointer-events:none;
}

.hero > .container{ position:relative; z-index:1; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.4rem .75rem;
  border-radius:999px;
  background: rgba(11,59,140,.08);
  border:1px solid rgba(11,59,140,.14);
  color: var(--brand);
  font-weight:600;
  font-size:.92rem;
}

.hero h1{ letter-spacing:-.03em; }

.lead{
  color: var(--muted) !important;
  max-width: 58ch;
}

/* Ajuste de espaçamento do hero no tablet */
@media (max-width: 991px){
  .hero{ padding: 52px 0 30px; }
}

/* =========================
   4) COMPONENTES “PREMIUM”
   ========================= */
.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-2);
}

.section-title{ letter-spacing:-.02em; }
.subtle{ color: var(--muted); }

.icon-pill{
  width:44px; height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,233,.22), rgba(11,59,140,.10));
  border:1px solid rgba(11,59,140,.14);
  color: var(--brand);
  flex:0 0 auto;
}

/* Lista “limpa” (mantém a sua indentação original) */
.list-clean{
  margin:0;
  padding-left: 1.1rem;
  color: var(--muted);
}

/* Pills gerais */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow: 0 8px 18px rgba(2,6,23,.04);
  color: var(--ink);
  font-size:.92rem;
}

/* Botão primário (Bootstrap) */
.btn-primary{
  background: var(--brand);
  border-color: var(--brand);
}
.btn-primary:hover{
  background: #083170;
  border-color: #083170;
}

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  background: #fff;
}

/* Tabela “dark” com aparência clara */
.table-dark{
  --bs-table-bg: #fff;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
}
.table-dark.table-striped > tbody > tr:nth-of-type(odd) > *{
  --bs-table-accent-bg: #f8fafc;
}

/* =========================
   5) LOGO MARK (SVG) + ANEL
   ========================= */
.logo-mark{
  width:38px;
  height:38px;
  display:inline-block;
  vertical-align:middle;
  filter: drop-shadow(0 10px 20px rgba(2,6,23,.10));
}

.sonar-ring{
  transform-origin: 50% 50%;
  animation: ring 3.2s ease-in-out infinite;
  opacity:.95;
}
.sonar-ring.r2{ animation-delay:.22s; opacity:.70; }
.sonar-ring.r3{ animation-delay:.44s; opacity:.50; }

@keyframes ring{
  0%{ transform:scale(.92); opacity:.22; }
  55%{ transform:scale(1.02); opacity:.95; }
  100%{ transform:scale(.92); opacity:.22; }
}

/* =========================
   6) SONAR24® — LOGOTIPO
   (metal + 3D + shimmer)
   ========================= */
.sonar24{
  display:inline-flex;
  align-items:baseline;
  line-height:1;
}

/* Palavra SONAR — metalizado com recorte/volume */
.sonar24__word{
  position:relative;
  display:inline-block;

  font-weight:900;
  letter-spacing:-0.03em;
  font-size: clamp(1.35rem, 2.4vw, 2.25rem);

  /* metal */
  background: linear-gradient(
    180deg,
    #f9fbff 0%,
    #c7d2fe 18%,
    #8fa2c6 38%,
    #ffffff 52%,
    #8fa2c6 70%,
    #eef2ff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;

  /* borda/volume (3D sem blur pesado) */
  text-shadow:
    0 -1px 0 rgba(255,255,255,.35),
    0 0 1px rgba(2,6,23,.55),
    0 1px 0 rgba(2,6,23,.22),
    0 2px 0 rgba(2,6,23,.18),
    0 3px 0 rgba(2,6,23,.14),
    0 14px 34px rgba(2,6,23,.55);

  /* destaque frio */
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.14))
    drop-shadow(0 0 14px rgba(56,189,248,.22))
    drop-shadow(0 10px 22px rgba(2,6,23,.28));

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Shimmer + escovado sutil */
.sonar24__word::before{
  content:"";
  position:absolute;
  inset:-8px -16px;
  pointer-events:none;
  z-index:0;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0) 34%,
      rgba(255,255,255,.72) 48%,
      rgba(255,255,255,0) 62%,
      transparent 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    );

  mix-blend-mode: overlay;
  transform: translateX(-55%) skewX(-10deg);
  opacity:.62;

  animation: sonar_shimmer 2.6s ease-in-out infinite;
}

/* Contorno 3D real (stroke + sombra curta)
   OBS: depende do texto fixo “SONAR” */
.sonar24__word::after{
  content:"SONAR";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;

  font: inherit;
  letter-spacing: inherit;

  color: transparent;
  -webkit-text-stroke: 2px rgba(2,6,23,.38);

  filter:
    drop-shadow(0 2px 0 rgba(2,6,23,.28))
    drop-shadow(0 8px 18px rgba(2,6,23,.28));
}

/* Mantém ® e 24 acima do brilho */
.sonar24__reg,
.sonar24__tag{
  position:relative;
  z-index:2;
}

/* ® com contorno + volume (mesmo estilo do SONAR) */
.sonar24__reg{
  font-weight:900;
  font-size:.55em;
  vertical-align: super;
  margin-left:.08em;
  opacity:.98;

  -webkit-text-stroke: 1.4px rgba(2,6,23,.38);

  text-shadow:
    0 -1px 0 rgba(255,255,255,.28),
    0 0 1px rgba(2,6,23,.55),
    0 1px 0 rgba(2,6,23,.20),
    0 2px 0 rgba(2,6,23,.16),
    0 8px 18px rgba(2,6,23,.40);

  filter:
    drop-shadow(0 0 8px rgba(56,189,248,.16))
    drop-shadow(0 6px 14px rgba(2,6,23,.18));
}

/* 24h manuscrito — sobre o “AR” */
.sonar24__tag{
  position:absolute;
  right:0;
  top: 90%;
  transform: translate(40%, 0) rotate(-9deg);
  transform-origin: left center;

  font-family: "Bradley Hand", "Segoe Script", "Lucida Handwriting",
               "Comic Sans MS", "Apple Chancery", cursive;

  font-weight:500;
  font-size:.66em;
  letter-spacing:-0.02em;

  color:#ff2d55;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 8px 18px rgba(255,45,85,.25),
    0 16px 38px rgba(2,6,23,.35);

  -webkit-text-stroke: .18px rgba(255,45,85,.55);

  pointer-events:none;
  user-select:none;

  animation: sonar_tag_float 2.2s ease-in-out infinite;
}

@keyframes sonar_shimmer{
  0%   { transform: translateX(-60%) skewX(-10deg); opacity:.35; }
  45%  { opacity:.60; }
  100% { transform: translateX(60%)  skewX(-10deg); opacity:.35; }
}

@keyframes sonar_tag_float{
  0%,100% { transform: translate(40%, 0) rotate(-9deg); }
  50%     { transform: translate(40%, -2px) rotate(-11deg); }
}

/* =========================
   7) UTILITÁRIOS (OPCIONAIS)
   ========================= */
.reveal{ opacity:0; transform: translateY(12px); transition: all .65s ease; }
.reveal.is-in{ opacity:1; transform:none; }

.stat{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.stat .n{ font-size:1.6rem; font-weight:800; line-height:1; color:var(--brand); letter-spacing:-.02em; }
.stat .t{ font-weight:700; }
.stat .d{ color:var(--muted); font-size:.92rem; }

/* CTA band */
.cta-band{
  background: linear-gradient(110deg, rgba(11,59,140,.92), rgba(14,165,233,.84));
  color:#fff;
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.cta-band::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(520px 260px at 15% 35%, rgba(255,255,255,.22), transparent 65%),
    radial-gradient(500px 250px at 85% 35%, rgba(255,255,255,.16), transparent 70%);
  pointer-events:none;
}
.cta-band .inner{ position:relative; z-index:1; }

.badge-soft{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  font-weight:600;
}

/* =========================
   8) ACESSIBILIDADE / MOBILE
   ========================= */
@media (prefers-reduced-motion: reduce){
  .sonar24__word::before,
  .sonar24__tag,
  .sonar-ring{ animation:none !important; }

  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
}

/* Mobile: mantém SONAR + ® consistente entre browsers */
@media (max-width: 420px){
  /* trava o SONAR */
  .sonar24__word{ font-size: 1.25rem; }

  /* trava o ® em px */
  .sonar24__reg{
    font-size: 10px;     /* 9px ~ 11px */
    margin-left: 2px;

    -webkit-text-stroke: 1.0px rgba(2,6,23,.38);
    text-shadow:
      0 -1px 0 rgba(255,255,255,.24),
      0 0 1px rgba(2,6,23,.50),
      0 1px 0 rgba(2,6,23,.18),
      0 6px 14px rgba(2,6,23,.34);
    filter:
      drop-shadow(0 0 7px rgba(56,189,248,.14))
      drop-shadow(0 5px 12px rgba(2,6,23,.16));
  }

  /* seu ajuste do 24h no mobile */
  .sonar24__tag{ transform: translate(28%, 0) rotate(-9deg); }
}