/* ============================================================
   ROTA DIRETA TRANSPORTES — Landing Page Premium 2026
   Azul escuro #071A2B · Verde #0E7A4A · Amarelo #F5C542
   Off-white #F6F4EF · Cinza #E5E7EB
   ============================================================ */

/* ---------- Fonte ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --navy-950: #040F1C;
  --navy-900: #071A2B;
  --navy-800: #0B2438;
  --navy-700: #123249;
  /* Verde da identidade — substitui o antigo vermelho como cor de destaque */
  --green: #0E7A4A;
  --green-deep: #0A5E39;
  --green-bright: #14975C;
  /* aliases legados: todo uso de var(--red) passa a renderizar verde */
  --red: var(--green);
  --red-deep: var(--green-deep);
  --amber: #F5C542;
  --amber-strong: #E9B422;
  --amber-soft: #F8D05E;
  --cream: #F6F4EF;
  --cream-2: #EFECE3;
  --gray: #E5E7EB;
  --ink: #0C2233;
  --ink-2: #40566B;
  --ink-3: #64748B;
  --cream-muted: rgba(246, 244, 239, .66);
  --cream-faint: rgba(246, 244, 239, .38);

  --r-panel: clamp(26px, 3.2vw, 44px);
  --r-card: clamp(18px, 2vw, 26px);
  --shell: min(1340px, 100% - clamp(20px, 4vw, 52px));
  --pad-panel: clamp(28px, 5vw, 72px);
  --header-gap: clamp(10px, 1.8vh, 18px);
  --pill-h: 64px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
html:focus-within { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100svh;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; overflow-wrap: initial; }
p { text-wrap: pretty; }

::selection { background: var(--amber); color: var(--navy-950); }

/* Grão de filme sutil sobre toda a página */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 160px;
}

/* ---------- Acessibilidade ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 3000;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--navy-950);
  font-weight: 700;
  font-size: 14px;
  transform: translateY(-260%);
  transition: transform .3s var(--ease);
}
.skip-link:focus-visible { transform: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.panel--light :focus-visible, .final :focus-visible { outline-color: var(--red); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--sm { padding: 11px 18px; font-size: 13.5px; }
.btn--lg { padding: 18px 34px; font-size: 16.5px; }
.btn--amber {
  background: var(--amber);
  color: #20180A;
  box-shadow: 0 14px 34px -16px rgba(245, 197, 66, .55);
}
.btn--amber:hover { background: var(--amber-soft); transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(245, 197, 66, .6); }
.btn--dark { background: var(--navy-900); color: var(--cream); box-shadow: 0 14px 34px -18px rgba(7, 26, 43, .55); }
.btn--dark:hover { background: var(--navy-800); transform: translateY(-2px); }
.btn--ghost-light { border: 1px solid rgba(246, 244, 239, .28); color: var(--cream); }
.btn--ghost-light:hover { background: rgba(246, 244, 239, .08); border-color: rgba(246, 244, 239, .45); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.wa-ico { width: 18px !important; height: 18px !important; }

/* ---------- Header pílula ---------- */
.site-header {
  position: fixed;
  top: var(--header-gap);
  left: 0; right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding-inline: clamp(10px, 3vw, 44px);
  pointer-events: none;
}
.pill {
  pointer-events: auto;
  width: min(100%, 1560px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  height: var(--pill-h);
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(7, 26, 43, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid rgba(246, 244, 239, .09);
  box-shadow: 0 24px 50px -28px rgba(2, 10, 18, .8);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header.is-scrolled .pill {
  height: 58px;
  background: rgba(6, 21, 36, .82);
  box-shadow: 0 18px 42px -24px rgba(2, 10, 18, .9);
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__hex { fill: var(--navy-800); stroke: var(--red); stroke-width: 2.6; }
.brand__route { fill: none; stroke: var(--cream); stroke-width: 3; stroke-linecap: round; }
.brand__dot--a { fill: var(--red); }
.brand__dot--b { fill: var(--amber); }
.brand__text {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 16.5px;
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--cream);
  white-space: nowrap;
}
.brand__sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 3px;
}

.pill__nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.pill__nav a {
  position: relative;
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-muted);
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.pill__nav a:hover { color: var(--cream); background: rgba(246, 244, 239, .07); }
.pill__nav a.is-active { color: var(--cream); }
.pill__nav a.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateX(-50%);
}

.pill__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* Toggle mobile */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(246, 244, 239, .22);
  color: var(--cream);
  font-weight: 700;
  font-size: 13.5px;
  transition: background-color .3s var(--ease);
}
.nav-toggle:hover { background: rgba(246, 244, 239, .08); }
.nav-toggle__icon { display: inline-flex; flex-direction: column; gap: 5px; width: 18px; }
.nav-toggle__icon i {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease), width .35s var(--ease);
}
.nav-toggle__icon i:last-child { width: 70%; align-self: flex-end; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon i:last-child { width: 100%; transform: translateY(-3.5px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu {
  pointer-events: auto;
  position: absolute;
  top: calc(var(--header-gap) + var(--pill-h) + 10px);
  left: clamp(10px, 3vw, 44px);
  right: clamp(10px, 3vw, 44px);
  border-radius: 28px;
  background: rgba(6, 20, 34, .92);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(246, 244, 239, .1);
  box-shadow: 0 40px 80px -30px rgba(2, 10, 18, .9);
  padding: 14px;
  opacity: 0;
  transform: translateY(-10px) scale(.985);
  transform-origin: top center;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  max-height: calc(100dvh - var(--header-gap) - var(--pill-h) - 24px);
  overflow: auto;
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu nav:focus { outline: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 14px;
  border-radius: 16px;
  font-size: 19px;
  font-weight: 700;
  color: var(--cream);
  transition: background-color .25s var(--ease);
}
.mobile-menu nav a:hover { background: rgba(246, 244, 239, .06); }
.mobile-menu nav a + a { border-top: 1px solid rgba(246, 244, 239, .06); }
.mobile-menu nav a small {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: .08em;
}
.mobile-menu__foot { padding: 14px 6px 8px; }
.mobile-menu__foot .btn { width: 100%; }

/* ---------- Shell das seções / painéis ---------- */
.section { width: var(--shell); margin-inline: auto; scroll-margin-top: calc(var(--header-gap) + var(--pill-h) + 22px); }
.panel {
  position: relative;
  margin-block: clamp(14px, 2vw, 24px);
  border-radius: var(--r-panel);
  overflow: clip;
  isolation: isolate;
}
.panel__pad { padding: clamp(30px, 5vw, 68px) var(--pad-panel); position: relative; z-index: 1; }
.panel--light { background: var(--cream); color: var(--ink); border: 1px solid rgba(7, 26, 43, .07); }
.panel--dark {
  background: linear-gradient(175deg, #0C2539 0%, var(--navy-900) 58%, #061626 100%);
  border: 1px solid rgba(246, 244, 239, .08);
}

/* Cabeçalhos de seção */
.sec-head { max-width: 780px; margin-bottom: clamp(30px, 4.5vw, 54px); }
.sec-head h2 { font-size: clamp(29px, 4vw, 50px); }
.sec-head .lead { margin-top: 16px; }
.split-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 56px;
  flex-wrap: wrap;
}
.sec-head__note { max-width: 340px; color: var(--ink-2); font-size: 16px; font-weight: 500; }
.sec-head--center { margin-inline: auto; text-align: center; }
.lead { font-size: clamp(15.5px, 1.35vw, 18px); color: var(--ink-2); max-width: 56ch; }
.panel--dark .lead { color: var(--cream-muted); }
.lead strong { color: inherit; }
.lead--ink { color: var(--ink-2); }
.lead--center { margin-inline: auto; }
.panel--dark .sec-head h2, .final h2 { color: var(--cream); }

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.kicker i { width: 22px; height: 2px; background: currentColor; border-radius: 2px; flex: none; }
.kicker--amber { color: var(--amber); }
.kicker--ink { color: #7A5E00; }
.kicker--cream { color: rgba(246, 244, 239, .85); }
.kicker--center { justify-content: center; }

/* ---------- Reveal on scroll ---------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }

/* ---------- HERO ---------- */
.hero { padding-top: calc(var(--header-gap) + var(--pill-h) + 16px); }
.hero__banner {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  height: clamp(520px, 72vh, 700px);
  border-radius: var(--r-panel);
  overflow: clip;
  isolation: isolate;
  background: var(--navy-900);
  border: 1px solid rgba(246, 244, 239, .08);
  box-shadow: 0 40px 90px -40px rgba(2, 10, 18, .9);
}
.hero__track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.15s var(--ease), visibility 0s linear 1.15s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.15s var(--ease); z-index: 1; }

.hero-slide__media {
  position: absolute;
  inset: 0;
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  transform: scale(1.015);
}
.hero-slide__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-slide__media img.is-loaded { opacity: 1; }
.hero-slide.is-active .hero-slide__media img { animation: heroZoom 8.5s var(--ease) both; }
@keyframes heroZoom { from { transform: scale(1.065); } to { transform: scale(1); } }

.hero-slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(76deg, rgba(4, 13, 23, .9) 4%, rgba(4, 14, 25, .62) 38%, rgba(4, 14, 25, .14) 70%, rgba(4, 14, 25, .38) 100%),
    linear-gradient(180deg, rgba(4, 14, 25, .3) 0%, rgba(4, 14, 25, 0) 30%, rgba(4, 14, 25, .55) 100%);
}
.hero-slide__content {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 5vw, 68px);
  right: clamp(22px, 5vw, 68px);
  bottom: clamp(88px, 13vh, 118px);
  max-width: 620px;
}
.hero-slide__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.hero-slide__eyebrow span { color: var(--cream-faint); letter-spacing: .1em; }
.hero-slide__eyebrow i { width: 26px; height: 2px; background: var(--red); border-radius: 2px; }
.hero-slide h1, .hero-slide h2 {
  color: var(--cream);
  font-size: clamp(30px, 4.7vw, 58px);
  line-height: 1.02;
  max-width: 18ch;
}
.hero-slide__lead {
  margin-top: 18px;
  color: rgba(246, 244, 239, .78);
  font-size: clamp(15px, 1.4vw, 17.5px);
  max-width: 50ch;
}
.hero-slide__cta { margin-top: 28px; }

/* entrada do texto a cada slide */
.is-active .hero-slide__eyebrow,
.is-active .hero-slide h1, .is-active .hero-slide h2,
.is-active .hero-slide__lead,
.is-active .hero-slide__cta {
  animation: riseIn .95s var(--ease) both;
}
.is-active .hero-slide h1, .is-active .hero-slide h2 { animation-delay: .12s; }
.is-active .hero-slide__lead { animation-delay: .24s; }
.is-active .hero-slide__cta { animation-delay: .36s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* UI do carrossel */
.hero__ui {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 5vw, 68px);
  right: clamp(22px, 5vw, 68px);
  bottom: clamp(24px, 4.5vh, 40px);
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero__progress { display: flex; gap: 8px; }
.hero__progress button { padding: 8px 0; border-radius: 99px; }
.bar {
  display: block;
  width: 46px; height: 3px;
  border-radius: 99px;
  background: rgba(246, 244, 239, .24);
  overflow: hidden;
}
.bar__fill {
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__count { font-size: 13px; font-weight: 700; color: var(--cream-faint); letter-spacing: .06em; }
.hero__count b { color: var(--cream); font-weight: 800; }
.hero__count span { margin-inline: 5px; }
.hero__arrows { display: flex; gap: 8px; margin-left: auto; }
.hero__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(246, 244, 239, .28);
  color: var(--cream);
  display: grid;
  place-items: center;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.hero__arrow svg { width: 17px; height: 17px; }
.hero__arrow:hover { background: rgba(246, 244, 239, .1); border-color: rgba(246, 244, 239, .5); transform: translateY(-1px); }

/* ---------- Trustbar marquee ---------- */
.trustbar {
  width: 100%;
  overflow: hidden;
  padding-block: clamp(18px, 3vw, 30px) clamp(8px, 1.5vw, 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.trustbar__track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.trustbar__track span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream-faint);
  white-space: nowrap;
}
.trustbar__track i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red);
  opacity: .8;
  flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- SOLUÇÕES — bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "assess assess assess assess assess assess assess antt antt antt antt antt"
    "assess assess assess assess assess assess assess multas multas multas multas multas"
    "cert cert cert cert mei mei mei mei cta cta cta cta";
  gap: clamp(12px, 1.6vw, 18px);
}
.b-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid rgba(7, 26, 43, .09);
  overflow: clip;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.b-card:hover {
  transform: translateY(-5px);
  border-color: rgba(14, 122, 74, .32);
  box-shadow: 0 30px 54px -34px rgba(7, 26, 43, .35);
}
.b-card h3 { font-size: clamp(19px, 1.7vw, 23px); color: var(--ink); }
.b-card p { color: var(--ink-2); font-size: 15px; max-width: 44ch; }
.b-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.b-card__num {
  font-size: 13px;
  font-weight: 800;
  color: rgba(7, 26, 43, .28);
  letter-spacing: .08em;
}
.b-card__go {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(7, 26, 43, .05);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.b-card__go svg { width: 15px; height: 15px; }
.b-card:hover .b-card__go { opacity: 1; transform: none; background: var(--red); color: #fff; }
.b-card__link {
  margin-top: auto;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}
.b-card__link::after {
  content: "";
  width: 16px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .35s var(--ease);
}
.b-card__link:hover::after { width: 26px; }

.b-ico {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(14, 122, 74, .09);
  color: var(--red);
  transition: transform .45s var(--ease), background-color .45s var(--ease);
}
.b-ico svg { width: 23px; height: 23px; }
.b-card:hover .b-ico { transform: translateY(-3px); background: rgba(14, 122, 74, .14); }
.b-ico--dark { background: rgba(245, 197, 66, .14); color: var(--amber); }

.b-card--hero { grid-area: assess; background: var(--navy-900); border-color: rgba(246, 244, 239, .08); padding-bottom: 0; }
.b-card--hero h3 { color: var(--cream); }
.b-card--hero p { color: var(--cream-muted); }
.b-card--hero .b-card__num { color: rgba(246, 244, 239, .3); }
.b-card--hero .b-card__link { color: var(--amber); }
.b-card--hero:hover { border-color: rgba(245, 197, 66, .35); box-shadow: 0 34px 60px -36px rgba(2, 10, 18, .9); }
.b-card--hero .b-ico { background: rgba(245, 197, 66, .12); color: var(--amber); }
.b-card--hero .b-card__go { background: rgba(246, 244, 239, .08); color: var(--cream); }
.b-card--hero:hover .b-card__go { background: var(--amber); color: var(--navy-950); }
.b-card__media {
  position: relative;
  margin: 18px calc(clamp(22px, 2.6vw, 32px) * -1) 0;
  height: clamp(180px, 22vw, 280px);
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
}
.b-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--navy-900) 0%, rgba(7, 26, 43, 0) 42%);
}
.b-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease, transform .8s var(--ease);
}
.b-card__media img.is-loaded { opacity: 1; }
.b-card--hero:hover .b-card__media img { transform: scale(1.03); }

.b-card--antt { grid-area: antt; }
.b-card--multas { grid-area: multas; }
.b-card--cert { grid-area: cert; }
.b-card--mei { grid-area: mei; }

/* ---- cards compactos 02–05: sistema editorial ---- */
.b-card--compact { display: flex; padding: clamp(24px, 2.6vw, 34px); }
.b-card__ghost {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  stroke: rgba(14, 122, 74, .11);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .7s var(--ease);
}
.b-card--compact:hover .b-card__ghost { transform: rotate(4deg) scale(1.05); }

/* variações de composição (mesmo sistema, ângulos diferentes) */
.b-card--antt .b-card__ghost { width: 176px; height: 176px; top: -46px; right: -42px; stroke: rgba(7, 26, 43, .09); }
.b-card--multas .b-card__ghost { width: 200px; height: 200px; bottom: -64px; right: -38px; }
.b-card--cert .b-card__ghost { width: 128px; height: 128px; top: -30px; right: 64px; }
.b-card--mei .b-card__ghost { width: 156px; height: 156px; top: -40px; left: -34px; stroke: rgba(7, 26, 43, .08); }

.b-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.b-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.b-card--compact .b-card__num { font-size: 13px; letter-spacing: .08em; color: rgba(7, 26, 43, .32); }
.b-card__rule { width: 26px; height: 1px; background: rgba(7, 26, 43, .2); }
.b-card--compact h3 { font-size: clamp(20px, 1.9vw, 24px); max-width: 15ch; }
.b-card--compact p { font-size: 15px; max-width: 40ch; }
.b-card--cert h3 { font-size: clamp(24px, 2.2vw, 30px); max-width: 12ch; }

/* CTA pill com seta em círculo */
.b-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 7px 7px 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(7, 26, 43, .16);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.b-card__btn-ico {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: var(--cream);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.b-card__btn-ico svg { width: 14px; height: 14px; }
.b-card__btn:hover {
  border-color: rgba(7, 26, 43, .42);
  background: rgba(7, 26, 43, .045);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -20px rgba(7, 26, 43, .5);
}
.b-card__btn:hover .b-card__btn-ico { background: var(--red); transform: translateX(3px); }
.b-card__btn:active { transform: translateY(0); }

.b-card--cta {
  grid-area: cta;
  background: linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  border-color: rgba(14, 122, 74, .45);
  color: var(--cream);
  justify-content: center;
  gap: 14px;
}
.b-card--cta h3 { color: var(--cream); font-size: clamp(20px, 1.8vw, 24px); }
.b-card--cta:hover { border-color: rgba(14, 122, 74, .6); box-shadow: 0 30px 60px -30px rgba(10, 94, 57, .65); }
.b-card p.b-card__cta-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0A0A0A;
}
.b-card--cta .btn { align-self: flex-start; border-color: rgba(246, 244, 239, .35); }

/* ---------- FRETES / OPERAÇÃO ---------- */
.panel__routes {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
}
.route-anim {
  fill: none;
  stroke: rgba(246, 244, 239, .14);
  stroke-width: 1.6;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
  animation: dashMove 26s linear infinite;
}
.route-anim--2 { stroke: rgba(14, 122, 74, .3); animation-duration: 34s; animation-direction: reverse; }
@keyframes dashMove { to { stroke-dashoffset: -320; } }
.route-node { fill: var(--amber); opacity: .9; animation: nodePulse 3.2s ease-in-out infinite; }
.route-node--amber { fill: var(--red); animation-delay: 1.4s; }
.route-node--cream { fill: rgba(246, 244, 239, .8); }
@keyframes nodePulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.operacao__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: clip;
  height: clamp(220px, 34vw, 380px);
  border: 1px solid rgba(246, 244, 239, .1);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.media-cover {
  position: absolute;
  inset: 0;
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
}
.media-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.media-cover img.is-loaded { opacity: 1; }
.operacao__media img { height: 118%; will-change: transform; }
.operacao__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 14, 25, .12), rgba(4, 14, 25, .34));
}
.operacao__media figcaption {
  position: absolute;
  z-index: 1;
  left: 20px; bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, .75);
}

.operacao__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.op-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-card);
  background: rgba(246, 244, 239, .045);
  border: 1px solid rgba(246, 244, 239, .1);
  transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.op-card:hover {
  transform: translateY(-4px);
  background: rgba(246, 244, 239, .07);
  border-color: rgba(245, 197, 66, .3);
}
.op-card h3 { color: var(--cream); font-size: clamp(20px, 1.8vw, 24px); }
.op-card p { color: var(--cream-muted); font-size: 15px; max-width: 46ch; }
.op-card .btn { margin-top: 8px; }

/* ---------- DOCUMENTAÇÃO ---------- */
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}
.doc-grid .sec-head { margin-bottom: 30px; }
.steps { display: flex; flex-direction: column; }
.steps li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(7, 26, 43, .1);
}
.steps li:last-child { border-bottom: 1px solid rgba(7, 26, 43, .1); }
.steps__num {
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: .06em;
  padding-top: 2px;
  flex: none;
}
.steps h3 { font-size: 17.5px; color: var(--ink); }
.steps p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.doc-grid .btn { margin-top: 26px; }

.doc-grid__media { position: relative; }
.doc-grid__photo {
  position: relative;
  border-radius: var(--r-card);
  overflow: clip;
  aspect-ratio: 4 / 4.6;
  border: 1px solid rgba(7, 26, 43, .12);
  box-shadow: 0 40px 70px -46px rgba(7, 26, 43, .55);
}
.doc-grid__photo img { transition: transform .9s var(--ease), opacity .9s ease; }
.doc-grid__photo:hover img { transform: scale(1.03); }
.doc-grid__float {
  position: absolute;
  left: clamp(-14px, -2vw, -20px);
  bottom: 26px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: min(360px, 86%);
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(7, 26, 43, .08);
  box-shadow: 0 30px 60px -30px rgba(7, 26, 43, .45);
}
.doc-grid__float h3 { font-size: 16px; color: var(--ink); }
.doc-grid__float p { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.doc-grid__float .b-ico { width: 40px; height: 40px; border-radius: 12px; }
.doc-grid__float .b-ico svg { width: 20px; height: 20px; }

/* ---------- TRANSIÇÃO CÍRCULO ---------- */
.circle-zone { position: relative; height: 240vh; }
.circle-zone__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: clip;
  background: var(--navy-950);
  --p: 0;
}
.circle-zone__disc {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 44%, var(--amber-soft) 0%, var(--amber) 55%, var(--amber-strong) 100%);
  clip-path: circle(var(--r, 6px) at 50% 50%);
  will-change: clip-path;
}
.circle-zone__label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  opacity: clamp(0, calc((var(--p) - .52) / .2), 1);
}
.circle-zone__label small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(12, 34, 51, .6);
}
.circle-zone__label strong { font-size: clamp(19px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.circle-zone__label svg { width: 20px; height: 20px; margin-top: 8px; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- CAPACITAÇÃO — scroll horizontal ---------- */
.panel--amber {
  background:
    radial-gradient(90% 60% at 85% -10%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(168deg, var(--amber-soft) 0%, var(--amber) 42%, var(--amber-strong) 100%);
  color: var(--ink);
  border: 1px solid rgba(122, 94, 0, .18);
}
.hscroll { position: relative; }
.hscroll__stage { position: relative; }
.hscroll__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
  padding-bottom: 0;
}
.hscroll__title { max-width: 640px; }
.hscroll__title h2 { font-size: clamp(29px, 4vw, 50px); }
.hscroll__title .lead { margin-top: 14px; }
.hscroll__meter { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 6px; }
.hscroll__count { font-size: 13px; font-weight: 700; color: rgba(12, 34, 51, .55); letter-spacing: .06em; }
.hscroll__count b { color: var(--ink); font-weight: 800; }
.hscroll__count span { margin-inline: 5px; }
.hscroll__progress {
  width: 130px; height: 3px;
  border-radius: 99px;
  background: rgba(12, 34, 51, .16);
  overflow: hidden;
}
.hscroll__progress span {
  display: block;
  width: 100%; height: 100%;
  background: var(--navy-900);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
}

/* Modo padrão (mobile / no-JS / reduced-motion): trilho com swipe nativo */
.hscroll__viewport { overflow: visible; }
.hscroll__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  padding: clamp(28px, 4vw, 52px) var(--pad-panel) clamp(34px, 4.5vw, 60px);
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hscroll__track::-webkit-scrollbar { display: none; }
.hscroll--pinned .hscroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.hscroll--pinned .hscroll__track {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}
.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: none;
  scroll-snap-align: center;
  width: clamp(300px, 26vw, 400px);
  min-height: 380px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-card);
  background: var(--cream);
  border: 1px solid rgba(7, 26, 43, .08);
  box-shadow: 0 26px 50px -36px rgba(66, 50, 2, .5);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.course-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}
.course-card:hover { transform: translateY(-6px); box-shadow: 0 40px 64px -36px rgba(66, 50, 2, .6); }
.course-card:hover::before { transform: scaleX(1); }
.course-card__num {
  position: absolute;
  top: 18px; right: 22px;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: rgba(7, 26, 43, .1);
  line-height: 1;
}
.course-card h3 { font-size: clamp(21px, 2vw, 26px); color: var(--ink); max-width: 12ch; margin-top: 14px; }
.course-card p { color: var(--ink-2); font-size: 15px; max-width: 34ch; }
.course-card .b-ico { width: 52px; height: 52px; border-radius: 16px; }
.course-card .b-ico svg { width: 26px; height: 26px; }
.course-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--red);
  width: fit-content;
}
.course-card__link::after {
  content: "";
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width .35s var(--ease);
}
.course-card__link:hover::after { width: 30px; }

.course-card--cta {
  background: var(--navy-900);
  border-color: rgba(246, 244, 239, .1);
  justify-content: center;
  gap: 14px;
  min-height: 320px;
  align-self: stretch;
}
.course-card--cta h3 { color: var(--cream); max-width: 16ch; margin-top: 0; }
.course-card--cta p { color: var(--cream-muted); }
.course-card--cta .btn { margin-top: 10px; }

/* ---------- ANTT ---------- */
.antt-grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.antt-grid .sec-head { margin-bottom: 26px; }
.antt-roles { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.antt-roles li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(246, 244, 239, .045);
  border: 1px solid rgba(246, 244, 239, .1);
}
.antt-roles i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(14, 122, 74, .18);
  margin-top: 7px;
  flex: none;
}
.antt-roles li:last-child i { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 197, 66, .16); }
.antt-roles strong { display: block; color: var(--cream); font-size: 15.5px; }
.antt-roles span { display: block; color: var(--cream-faint); font-size: 13.5px; margin-top: 2px; }

.antt-grid__visual { position: relative; padding: clamp(6px, 2vw, 26px); }
.antt-grid__tech {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: rgba(246, 244, 239, .12);
  pointer-events: none;
}
.antt-grid__tech line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 6; }
.doc-sheet {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 20px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgba(7, 26, 43, .1);
  box-shadow: 0 50px 90px -50px rgba(2, 10, 18, .95);
  transform: rotate(-1.6deg);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.doc-sheet:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 60px 100px -50px rgba(2, 10, 18, 1); }
.doc-sheet__head { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px dashed rgba(7, 26, 43, .18); }
.doc-sheet__mark { width: 40px; height: 40px; flex: none; }
.doc-sheet__head strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.doc-sheet__head span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; max-width: 30ch; }
.doc-sheet__lines { display: flex; flex-direction: column; gap: 11px; padding: 22px 0; }
.doc-sheet__lines span {
  height: 9px;
  width: var(--w, 80%);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(7, 26, 43, .13), rgba(7, 26, 43, .07));
}
.doc-sheet__lines span:nth-child(2n) { background: linear-gradient(90deg, rgba(14, 122, 74, .18), rgba(14, 122, 74, .07)); }
.doc-sheet__foot { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-sheet__chip {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(7, 26, 43, .2);
  color: var(--ink-2);
}
.doc-sheet__chip--amber { background: rgba(245, 197, 66, .22); border-color: rgba(180, 130, 0, .35); color: #6d5200; }
.doc-sheet__stamp {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: clamp(96px, 10vw, 128px);
  color: var(--red);
  transform: rotate(9deg);
  filter: drop-shadow(0 14px 20px rgba(120, 10, 10, .25));
}
.doc-sheet__stamp text {
  font-size: 10.2px;
  font-weight: 700;
  letter-spacing: .3em;
  fill: currentColor;
  font-family: var(--font);
}
.doc-sheet__stamp svg { animation: stampSpin 26s linear infinite; }
@keyframes stampSpin { to { transform: rotate(360deg); } }

/* ---------- COMO PODEMOS AJUDAR ---------- */
.help-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto clamp(22px, 3vw, 32px);
}
.chip {
  padding: 13px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(7, 26, 43, .14);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover { transform: translateY(-2px); border-color: rgba(7, 26, 43, .34); box-shadow: 0 14px 26px -18px rgba(7, 26, 43, .4); }
.chip[aria-pressed="true"] {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--cream);
  box-shadow: 0 16px 30px -18px rgba(7, 26, 43, .55);
}

.help-cta {
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: clamp(28px, 4vw, 42px);
  border-radius: var(--r-card);
  background: var(--navy-900);
  color: var(--cream);
  border: 1px solid rgba(7, 26, 43, .2);
  box-shadow: 0 40px 70px -44px rgba(7, 26, 43, .8);
}
.help-cta.is-ready { background: linear-gradient(160deg, #0D2A42, var(--navy-900)); animation: ctaIn .5s var(--ease); }
@keyframes ctaIn { from { transform: scale(.985); opacity: .6; } to { transform: none; opacity: 1; } }
.help-cta__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
}
.help-cta__title { font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -.015em; max-width: 30ch; }
.help-cta .btn { margin-top: 14px; }
.help-cta__note { font-size: 12.5px; color: var(--cream-faint); margin-top: 12px; }

/* ---------- CTA FINAL ---------- */
.final {
  position: relative;
  margin-block: clamp(14px, 2vw, 24px);
  border-radius: var(--r-panel);
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(100% 130% at 18% -20%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(160deg, var(--green-bright) 0%, var(--green) 44%, var(--green-deep) 100%);
  border: 1px solid rgba(210, 255, 232, .18);
  text-align: center;
}
.final__routes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; z-index: 0; }
.final__inner {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 10vw, 120px) var(--pad-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 860px;
  margin-inline: auto;
}
.final h2 { color: var(--cream); font-size: clamp(32px, 5vw, 60px); max-width: 17ch; }
.final p:not(.kicker) { color: rgba(246, 244, 239, .88); font-size: clamp(15.5px, 1.4vw, 18px); max-width: 46ch; }
.final .btn { margin-top: 14px; box-shadow: 0 20px 44px -18px rgba(20, 8, 4, .55); }

/* ---------- FOOTER ---------- */
.footer {
  width: var(--shell);
  margin: clamp(20px, 3vw, 34px) auto 0;
  padding: clamp(34px, 4.5vw, 56px) 0 26px;
  border-top: 1px solid rgba(246, 244, 239, .09);
}

/* topo: marca à esquerda, mapa do site à direita */
.footer__top {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2.15fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

.footer__tagline {
  color: var(--cream-faint);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 16px;
  max-width: 34ch;
}

/* bloco de WhatsApp com o número visível */
.footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: rgba(34, 193, 94, .1);
  border: 1px solid rgba(34, 193, 94, .28);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.footer__wa .wa-ico { width: 22px; height: 22px; color: #2CD36A; flex: none; }
.footer__wa span { display: grid; gap: 1px; }
.footer__wa small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-faint);
}
.footer__wa strong {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.footer__wa:hover {
  background: rgba(34, 193, 94, .16);
  border-color: rgba(34, 193, 94, .5);
  transform: translateY(-2px);
}

/* mapa do site em colunas */
.footer__sitemap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px clamp(16px, 2vw, 30px);
}
.footer__col ul { display: grid; gap: 2px; }
.footer__col li { list-style: none; }
.footer__col a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cream-muted);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer__col a:hover { color: var(--amber); transform: translateX(3px); }

.footer__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 12px;
}
.footer__label a { color: var(--cream); font-size: inherit; letter-spacing: inherit; padding: 0; }
.footer__label a:hover { color: var(--amber); transform: none; }

.footer__base {
  margin-top: clamp(28px, 4vw, 46px);
  padding-top: 22px;
  border-top: 1px solid rgba(246, 244, 239, .07);
  display: grid;
  gap: 10px;
}
.footer__base p { font-size: 12.5px; color: var(--cream-faint); }
.footer__disclaimer { max-width: 92ch; line-height: 1.6; opacity: .8; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: relative;
  width: 58px; height: 58px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* verde do WhatsApp com leve profundidade, em vez de chapado */
  background: linear-gradient(160deg, #2CD36A 0%, #22C15E 46%, #17A94F 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 2px 4px rgba(6, 78, 40, .28),
    0 14px 30px -10px rgba(18, 140, 70, .62),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              box-shadow .35s var(--ease), filter .35s var(--ease);
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* glifo oficial, ligeiramente compensado para ficar óptico ao centro */
.wa-float__glyph {
  position: relative;
  z-index: 2;
  width: 30px; height: 30px;
  transform: translateY(.5px);
  filter: drop-shadow(0 1px 1px rgba(6, 78, 40, .28));
  transition: transform .4s var(--ease);
}

/* anel que pulsa devagar, chamando atenção sem incomodar */
.wa-float__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(44, 211, 106, .55);
  opacity: 0;
  animation: waRing 3.4s var(--ease) infinite;
  pointer-events: none;
}
.wa-float.is-visible .wa-float__ring { animation-play-state: running; }

@keyframes waRing {
  0%   { transform: scale(1);    opacity: .65; }
  55%  { transform: scale(1.62); opacity: 0; }
  100% { transform: scale(1.62); opacity: 0; }
}

.wa-float:hover {
  filter: brightness(1.06);
  box-shadow:
    0 2px 4px rgba(6, 78, 40, .3),
    0 20px 42px -12px rgba(18, 140, 70, .74),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}
.wa-float:hover .wa-float__glyph { transform: translateY(.5px) scale(1.08); }
.wa-float:active .wa-float__glyph { transform: translateY(.5px) scale(.96); }
.wa-float:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .wa-float__ring { animation: none; }
  .wa-float__glyph { transition: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
  .pill__nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .pill__actions .btn { display: none; }
  .pill { justify-content: space-between; padding-left: 12px; }
  .bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "assess assess assess assess assess assess"
      "antt antt antt multas multas multas"
      "cert cert cert mei mei mei"
      "cta cta cta cta cta cta";
  }
  .doc-grid, .antt-grid { grid-template-columns: 1fr; }
  .doc-grid__media { order: -1; max-width: 560px; }
  .antt-grid__visual { max-width: 560px; }
  .doc-grid__float { left: 12px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --pill-h: 56px; }
  body { font-size: 15px; }
  .hero { padding-top: calc(var(--header-gap) + var(--pill-h) + 12px); }
  .hero__banner { height: min(76vh, 640px); height: min(76svh, 640px); }
  .hero-slide__content { bottom: 96px; }
  .hero-slide h1, .hero-slide h2 { font-size: clamp(28px, 8.4vw, 40px); }
  .hero-slide__lead { font-size: 15px; }
  .hero__ui { left: 18px; right: 18px; bottom: 20px; }
  .bar { width: 34px; }
  .hero__arrow { width: 40px; height: 40px; }
  .hero-slide__cta .btn { width: 100%; max-width: 340px; }

  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "assess" "antt" "multas" "cert" "mei" "cta";
  }
  .b-card__media { height: 200px; }

  /* Capacitação: cards dimensionados para o swipe nativo */
  .course-card {
    width: min(84vw, 360px);
    min-height: 340px;
  }
  .course-card--cta { min-height: 260px; }
  .hscroll__head { padding-bottom: 0; }
  .hscroll__meter { align-items: flex-start; }

  .steps li { gap: 14px; }
  .doc-grid__float { position: static; width: 100%; margin-top: 14px; }
  .doc-sheet__stamp { right: -8px; bottom: -22px; }
  .antt-grid__visual { padding: 10px 0 30px; }

  .final__inner { padding-block: 68px; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }
  .footer__sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
  .chip { padding: 12px 18px; font-size: 13.5px; }
  .wa-float { width: 52px; height: 52px; }
}

@media (max-width: 420px) {
  .brand__text { font-size: 15px; }
  .brand__sub { font-size: 8.5px; letter-spacing: .28em; }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding: 0 13px; }
}

/* ============================================================
   REDUÇÃO DE MOTION / DESEMPENHO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .trustbar__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; row-gap: 10px; }
  .hero-slide.is-active .hero-slide__media img { animation: none; }
  .circle-zone { display: none; }
  .wa-float { transition: none; }
}

/* classe aplicada via JS (dispositivos de baixo desempenho) */
html.perf-lite .circle-zone { display: none; }
html.perf-lite .route-anim, html.perf-lite .route-node, html.perf-lite .doc-sheet__stamp svg { animation: none; }
html.perf-lite .panel__routes, html.perf-lite .final__routes { display: none; }
html.perf-lite .hero-slide.is-active .hero-slide__media img { animation: none; }

/* ============================================================
   ATUALIZAÇÃO 2026 — ANTT/RNTRC · Cursos · Outros serviços
   Acréscimos ao final para não alterar as regras já aprovadas.
   ============================================================ */

/* ---------- Kicker verde (destaque de identidade) ---------- */
.kicker--green { color: var(--green); }
.panel--dark .kicker--green,
.panel--cred .kicker--green { color: var(--green-bright); }

/* ---------- Painel Credenciamento ----------
   Variante escura com um véu verde sutil, para diferenciar
   visualmente do painel "Outros serviços" logo abaixo.        */
.panel--cred {
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(14, 122, 74, .22) 0%, rgba(14, 122, 74, 0) 58%),
    linear-gradient(175deg, #0C2539 0%, var(--navy-900) 58%, #061626 100%);
  border: 1px solid rgba(20, 151, 92, .22);
  color: var(--cream);
}
.panel--cred .sec-head h2,
.panel--cred h2, .panel--cred h3 { color: var(--cream); }
.panel--cred .lead { color: var(--cream-muted); }
.panel--cred .antt-roles li strong { color: var(--cream); }

/* ---------- Bento com 4 cards (ANTT) ---------- */
.bento--antt {
  grid-template-areas:
    "cadastro cadastro cadastro cadastro cadastro cadastro cadastro incluir incluir incluir incluir incluir"
    "cadastro cadastro cadastro cadastro cadastro cadastro cadastro revalida revalida revalida revalida revalida"
    "cta cta cta cta cta cta cta revalida revalida revalida revalida revalida";
}
.bento--antt .b-card--hero    { grid-area: cadastro; }
.bento--antt .b-card--antt    { grid-area: incluir; }
.bento--antt .b-card--multas  { grid-area: revalida; }
.bento--antt .b-card--cta     { grid-area: cta; }

/* ---------- Outros serviços (grade compacta, peso secundário) ---------- */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(10px, 1.3vw, 16px);
}
.mini-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2.1vw, 24px);
  border-radius: var(--r-card);
  background: rgba(246, 244, 239, .04);
  border: 1px solid rgba(246, 244, 239, .09);
  transition: transform .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease);
}
.mini-card:hover {
  transform: translateY(-3px);
  background: rgba(246, 244, 239, .07);
  border-color: rgba(20, 151, 92, .4);
}
.mini-card__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  background: rgba(20, 151, 92, .16);
  color: var(--green-bright);
  transition: background-color .45s var(--ease), transform .45s var(--ease);
}
.mini-card__ico svg { width: 21px; height: 21px; }
.mini-card:hover .mini-card__ico { background: rgba(20, 151, 92, .26); transform: translateY(-2px); }
.mini-card h3 { font-size: clamp(16px, 1.35vw, 18px); color: var(--cream); margin-bottom: 3px; }
.mini-card p  { font-size: 14px; color: var(--cream-muted); line-height: 1.5; max-width: 40ch; }
.mini-card__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(246, 244, 239, .16);
  color: var(--cream);
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.mini-card__link svg { width: 18px; height: 18px; flex: none; }
.mini-card__link-txt { display: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.mini-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mini-card:hover .mini-card__link,
.mini-card__link:focus-visible {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy-950);
  transform: translateX(3px);
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .bento--antt {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "cadastro cadastro cadastro cadastro cadastro cadastro"
      "incluir incluir incluir revalida revalida revalida"
      "cta cta cta cta cta cta";
  }
}
@media (max-width: 760px) {
  .bento--antt {
    grid-template-columns: 1fr;
    grid-template-areas: "cadastro" "incluir" "revalida" "cta";
  }
  .mini-card { grid-template-columns: auto 1fr; gap: 12px; }
  .mini-card__link {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0 18px;
    height: 40px;
    gap: 8px;
    margin-top: 4px;
    background: rgba(20, 151, 92, .16);
    border-color: rgba(20, 151, 92, .34);
    color: var(--cream);
  }
  .mini-card__link-txt { display: inline; }
  .mini-card__link::after { content: none; }
}

/* ---------- Logo oficial (bitmap com transparência) ---------- */
.brand__logo {
  height: 34px;
  width: auto;
  flex: none;
  object-fit: contain;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.brand:hover .brand__logo { opacity: .88; }
.footer__brand .brand__logo { height: 40px; }
@media (max-width: 760px) {
  .brand__logo { height: 28px; }
  .footer__brand .brand__logo { height: 34px; }
}
.doc-sheet__mark { height: 26px; width: auto; object-fit: contain; }

/* ============================================================
   WHATSAPP — DOCK + BALÃO DE CONVERSA (microinteração)
   ============================================================ */

/* Dock: ancora o botão e o balão no canto inferior direito.
   O botão mantém tamanho/posição de antes; o balão cresce à esquerda. */
.wa-dock {
  position: fixed;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(14px, 2.4vw, 26px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  pointer-events: none;      /* só os filhos recebem clique */
}
.wa-dock > * { pointer-events: auto; }

/* ---------- Balão ---------- */
.wa-tip {
  position: relative;
  display: flex;
  align-items: flex-start;
  max-width: min(268px, calc(100vw - 110px));
  padding: 14px 16px;
  border-radius: 16px 16px 6px 16px;   /* canto inferior direito "aponta" ao botão */
  background: #fff;
  border: 1px solid rgba(7, 26, 43, .07);
  box-shadow:
    0 2px 6px -2px rgba(7, 26, 43, .10),
    0 18px 40px -18px rgba(7, 26, 43, .30);
  /* estado oculto: sem salto, apenas um deslize curto */
  opacity: 0;
  transform: translateX(8px) scale(.98);
  transform-origin: 100% 100%;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.wa-tip.is-open { opacity: 1; transform: none; }

/* bico discreto apontando para o botão */
.wa-tip::after {
  content: "";
  position: absolute;
  right: -5px; bottom: 14px;
  width: 11px; height: 11px;
  background: #fff;
  border-right: 1px solid rgba(7, 26, 43, .07);
  border-bottom: 1px solid rgba(7, 26, 43, .07);
  transform: rotate(-45deg);
  border-radius: 0 0 3px 0;
}

.wa-tip__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 16px;
  min-width: 0;
}
.wa-tip__title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
}
.wa-tip__text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}
/* sublinhado sutil no hover — sinaliza que o balão também é clicável */
.wa-tip__link:hover .wa-tip__title { color: var(--green); }
.wa-tip:hover { box-shadow: 0 2px 6px -2px rgba(7,26,43,.10), 0 22px 46px -18px rgba(7,26,43,.36); }

/* botão fechar */
.wa-tip__close {
  position: absolute;
  top: 6px; right: 6px;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.wa-tip__close svg { width: 13px; height: 13px; }
.wa-tip:hover .wa-tip__close,
.wa-tip__close:focus-visible { opacity: 1; }
.wa-tip__close:hover { background: rgba(7, 26, 43, .07); color: var(--ink); }

/* ---------- Mobile: balão menor, sem bloquear o conteúdo ---------- */
@media (max-width: 760px) {
  .wa-dock { gap: 10px; }
  .wa-tip {
    max-width: min(210px, calc(100vw - 96px));
    padding: 11px 13px;
    border-radius: 14px 14px 5px 14px;
  }
  .wa-tip__title { font-size: 13px; }
  .wa-tip__text  { font-size: 11.5px; }
  .wa-tip__link  { padding-right: 6px; gap: 2px; }
  /* no toque não há hover: o "x" fica sempre discretamente visível */
  .wa-tip__close { opacity: .55; top: 4px; right: 4px; width: 22px; height: 22px; }
}
@media (max-width: 380px) {
  .wa-tip__text { display: none; }   /* só a chamada principal em telas muito estreitas */
}

/* ---------- Acessibilidade / desempenho ---------- */
@media (prefers-reduced-motion: reduce) {
  .wa-tip { transition: opacity .01ms; transform: none; }
  .wa-tip.is-open { transform: none; }
}
html.perf-lite .wa-tip { transition: opacity .3s linear; }

/* ============================================================
   PÁGINAS INTERNAS — banner 50vh, breadcrumb, conteúdo, relacionados
   Reutiliza tokens, botões, painéis e reveals já existentes.
   ============================================================ */

/* ---------- Banner interno (50% da viewport) ---------- */
.pg-hero { padding-top: calc(var(--header-gap) + var(--pill-h) + 16px); }
.pg-hero__banner {
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  height: 50vh;
  height: 50svh;
  min-height: 400px;
  max-height: 620px;
  border-radius: var(--r-panel);
  overflow: clip;
  isolation: isolate;
  background: var(--navy-900);
  border: 1px solid rgba(246, 244, 239, .08);
  box-shadow: 0 40px 90px -40px rgba(2, 10, 18, .9);
}
.pg-hero__media { position: absolute; inset: 0; }
.pg-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 1s ease, transform 1.6s var(--ease);
}
.pg-hero__media img.is-loaded { opacity: 1; transform: scale(1); }
.pg-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(76deg, rgba(4, 13, 23, .93) 4%, rgba(4, 14, 25, .7) 40%, rgba(4, 14, 25, .22) 74%, rgba(4, 14, 25, .42) 100%),
    linear-gradient(180deg, rgba(4, 14, 25, .34) 0%, rgba(4, 14, 25, 0) 32%, rgba(4, 14, 25, .58) 100%);
}
.pg-hero__content {
  position: absolute;
  z-index: 2;
  left: clamp(22px, 5vw, 68px);
  right: clamp(22px, 5vw, 68px);
  bottom: clamp(28px, 5vh, 52px);
  max-width: 680px;
}
.pg-hero__content h1 {
  font-size: clamp(30px, 4.4vw, 54px);
  color: var(--cream);
  margin-bottom: 12px;
}
.pg-hero__lead {
  color: rgba(246, 244, 239, .84);
  font-size: clamp(15px, 1.45vw, 18px);
  max-width: 52ch;
  margin-bottom: 22px;
}

/* ---------- Breadcrumb ---------- */
.crumb {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 3.4vh, 34px);
  left: clamp(22px, 5vw, 68px);
  right: clamp(22px, 5vw, 68px);
}
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  letter-spacing: .04em;
}
.crumb li { display: flex; align-items: center; gap: 7px; color: rgba(246, 244, 239, .62); }
.crumb a { color: rgba(246, 244, 239, .78); transition: color .3s var(--ease); }
.crumb a:hover { color: var(--amber); }
.crumb li[aria-current] { color: var(--amber); font-weight: 700; }
.crumb__sep { opacity: .42; }

/* ---------- Conteúdo das páginas ---------- */
.pg-body { max-width: 780px; }
.pg-body > * + * { margin-top: 18px; }
.pg-body h2 {
  font-size: clamp(23px, 2.5vw, 33px);
  margin-top: clamp(34px, 4vw, 48px);
}
.pg-body h3 { font-size: clamp(17px, 1.6vw, 20px); margin-top: 26px; }
.pg-body p { color: var(--ink-2); font-size: clamp(15px, 1.35vw, 16.5px); }
.panel--dark .pg-body p, .panel--cred .pg-body p { color: var(--cream-muted); }
.pg-body strong { color: var(--ink); }
.panel--dark .pg-body strong { color: var(--cream); }

/* lista com marcador verde da identidade */
.pg-list { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }
.pg-list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-2);
  font-size: clamp(14.5px, 1.3vw, 16px);
  line-height: 1.6;
}
.pg-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: .58em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(14, 122, 74, .14);
}
.panel--dark .pg-list li { color: var(--cream-muted); }
.panel--dark .pg-list li::before { background: var(--green-bright); box-shadow: 0 0 0 4px rgba(20, 151, 92, .18); }

/* grade de destaques (quadro de requisitos, etapas etc.) */
.pg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: clamp(26px, 3vw, 36px);
}
.pg-fact {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid rgba(7, 26, 43, .09);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pg-fact:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 122, 74, .32);
  box-shadow: 0 26px 48px -30px rgba(7, 26, 43, .34);
}
.pg-fact__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: rgba(14, 122, 74, .1);
  color: var(--green);
  margin-bottom: 14px;
}
.pg-fact__ico svg { width: 21px; height: 21px; }
.pg-fact h3 { font-size: clamp(16px, 1.4vw, 18.5px); color: var(--ink); margin-bottom: 6px; }
.pg-fact p  { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* aviso de validação (quando falta info oficial da empresa) */
.pg-note {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-top: clamp(26px, 3vw, 34px);
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(14, 122, 74, .06);
  border: 1px solid rgba(14, 122, 74, .2);
  border-left: 3px solid var(--green);
}
.pg-note svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 2px; }
.pg-note p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* ---------- Relacionados ---------- */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}
.rel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(22px, 2.5vw, 28px);
  border-radius: var(--r-card);
  background: rgba(246, 244, 239, .045);
  border: 1px solid rgba(246, 244, 239, .1);
  transition: transform .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}
.rel-card:hover {
  transform: translateY(-4px);
  background: rgba(246, 244, 239, .075);
  border-color: rgba(20, 151, 92, .4);
}
.rel-card__tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-bright);
}
.rel-card h3 { font-size: clamp(17px, 1.5vw, 20px); color: var(--cream); }
.rel-card p  { font-size: 14.5px; color: var(--cream-muted); line-height: 1.55; }
.rel-card__go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 10px;
  font-size: 14px; font-weight: 700; color: var(--amber);
}
.rel-card__go svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.rel-card:hover .rel-card__go svg { transform: translateX(4px); }
.rel-card__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Responsivo ---------- */
@media (max-width: 760px) {
  .pg-hero__banner { height: 50svh; min-height: 340px; border-radius: clamp(20px, 4vw, 30px); }
  .pg-hero__content { bottom: clamp(20px, 3.4vh, 30px); }
  .pg-hero__content h1 { font-size: clamp(25px, 7vw, 34px); }
  .pg-hero__lead { font-size: 14.5px; margin-bottom: 18px; -webkit-line-clamp: 3; }
  .crumb { top: 16px; }
  .crumb ol { font-size: 11.5px; gap: 5px; }
  .pg-body h2 { margin-top: 30px; }
  .pg-note { padding: 15px 16px; }
}
@media (max-width: 420px) {
  /* encurta o caminho longo, mantendo início e página atual */
  .crumb li.crumb--mid { display: none; }
  .crumb li.crumb--mid + li .crumb__sep::before { content: "…"; margin-right: 5px; opacity: .5; }
}

/* ============================================================
   NAVEGAÇÃO COM CATEGORIAS (dropdown)
   Reutiliza o visual do .pill__nav; o painel herda o
   arredondamento e a sombra dos cards existentes.
   ============================================================ */
.pill__nav .nav-item { position: relative; display: flex; }

.pill__nav .nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pill__nav .nav-item > a .nav-caret {
  width: 11px; height: 11px;
  flex: none;
  opacity: .7;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.pill__nav .nav-item:hover > a .nav-caret,
.pill__nav .nav-item:focus-within > a .nav-caret { transform: rotate(180deg); opacity: 1; }

.nav-drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 254px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(4, 20, 34, .96);
  border: 1px solid rgba(246, 244, 239, .1);
  box-shadow: 0 24px 60px rgba(2, 12, 22, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index: 40;
}
.nav-drop::before {
  /* ponte invisível para o mouse não “cair” no vão */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -12px;
  height: 12px;
}
.pill__nav .nav-item:hover .nav-drop,
.pill__nav .nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-drop__list { display: grid; }
.nav-drop a {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cream-muted);
  white-space: nowrap;
  transition: color .24s var(--ease), background-color .24s var(--ease), transform .24s var(--ease);
}
.nav-drop a:hover,
.nav-drop a:focus-visible { color: var(--cream); background: rgba(246, 244, 239, .08); transform: translateX(3px); }
.nav-drop a.is-current { color: var(--amber); }
.nav-drop__all {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(246, 244, 239, .08);
}
.nav-drop__all a { color: var(--amber); font-size: 12.5px; letter-spacing: .01em; }

/* ---------- Foto fixa ao lado da lista (telas grandes) ----------
   Uma imagem por categoria, coerente com o tema do menu.
   Escondida abaixo de 1280px para não espremer a lista. */
.nav-drop__media { display: none; }

@media (min-width: 1280px) {
  .nav-drop {
    display: grid;
    grid-template-columns: minmax(220px, auto) 268px;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    min-width: 0;
  }
  .nav-drop__list {
    display: flex;
    flex-direction: column;
    min-width: 216px;
  }
  /* empurra o "Ver todos" para a base, alinhando com o pé da foto */
  .nav-drop__list .nav-drop__all { margin-top: auto; }

  .nav-drop__media {
    position: relative;
    display: block;
    align-self: stretch;
    min-height: 100%;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--navy-950);
    isolation: isolate;
  }
  .nav-drop__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* entra com um leve zoom-out quando o menu abre */
    transform: scale(1.06);
    transition: transform .7s var(--ease);
  }
  .pill__nav .nav-item:hover .nav-drop__media img,
  .pill__nav .nav-item:focus-within .nav-drop__media img { transform: scale(1); }

  .nav-drop__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 12, 22, .92) 8%, rgba(2, 12, 22, .42) 46%, rgba(2, 12, 22, .12) 100%);
    z-index: 1;
  }
  .nav-drop__media figcaption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    gap: 5px;
    padding: 14px 15px 15px;
  }
  .nav-drop__kicker {
    font-size: 10px;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber);
  }
  .nav-drop__phrase {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--cream);
    text-wrap: balance;
  }
}

/* a lista mais longa (Cursos) define a altura; as demais acompanham */
@media (min-width: 1280px) {
  .nav-drop { min-height: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop__media img { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop { transition: opacity .01s, visibility .01s; transform: translate(-50%, 0); }
  .pill__nav .nav-item > a .nav-caret { transition: none; }
  .nav-drop a:hover { transform: none; }
}

/* --- Acordeão do menu mobile --- */
.m-group { border-top: 1px solid rgba(246, 244, 239, .06); }
.mobile-menu nav > a:first-child { border-top: 0; }
.m-group__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 6px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: background-color .24s var(--ease);
}
.m-group__btn:hover { background: rgba(246, 244, 239, .06); }
.m-group__btn small {
  font-size: 11px;
  font-weight: 700;
  color: var(--amber);
  letter-spacing: .1em;
  flex: none;
}
.m-group__btn .nav-caret {
  width: 14px; height: 14px;
  margin-left: auto;
  flex: none;
  opacity: .65;
  transition: transform .3s var(--ease);
}
.m-group__btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); opacity: 1; }

.m-group__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.m-group__btn[aria-expanded="true"] + .m-group__panel { grid-template-rows: 1fr; }
.m-group__panel > div { overflow: hidden; }
.m-group__panel a {
  display: block;
  padding: 11px 6px 11px 34px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cream-muted);
  border-top: 1px solid rgba(246, 244, 239, .05);
  transition: color .24s var(--ease), background-color .24s var(--ease);
}
.m-group__panel a:hover { color: var(--cream); background: rgba(246, 244, 239, .05); }

@media (prefers-reduced-motion: reduce) {
  .m-group__panel { transition: none; }
  .m-group__btn .nav-caret { transition: none; }
}

/* --- mini-card sobre painel claro (Autorizações na Home) --- */
.mini-grid--light .mini-card {
  background: #fff;
  border-color: rgba(7, 26, 43, .1);
  box-shadow: 0 8px 24px rgba(7, 26, 43, .05);
}
.mini-grid--light .mini-card:hover {
  background: #fff;
  border-color: rgba(14, 122, 74, .34);
  box-shadow: 0 16px 40px rgba(7, 26, 43, .1);
}
.mini-grid--light .mini-card h3 { color: var(--ink); }
.mini-grid--light .mini-card p  { color: var(--ink-2); }
.mini-grid--light .mini-card__ico { background: rgba(14, 122, 74, .1); color: var(--green); }
.mini-grid--light .mini-card:hover .mini-card__ico { background: rgba(14, 122, 74, .16); }
.mini-grid--light .mini-card__link { border-color: rgba(12, 34, 51, .18); color: var(--ink); }
.mini-grid--light .mini-card:hover .mini-card__link,
.mini-grid--light .mini-card__link:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.nav-drop__arrow { width: 13px; height: 13px; flex: none; vertical-align: -2px; margin-left: 3px; }
.nav-drop__all a { display: inline-flex; align-items: center; }

/* numeração no lugar da tag repetida, nas páginas de categoria */
.rel-card__tag--num {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--amber);
}

/* Em telas largas os cards de destaque ficam numa única linha,
   acompanhando a coluna de leitura em vez de quebrar em órfãos. */
@media (min-width: 860px) {
  .pg-facts {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-columns: none;
  }
}