/* ==========================================================================
   BASE & RESET
   ========================================================================== */
:root {
  --bg-main: hsl(0, 0%, 100%);
  --bg-alt: hsl(213, 58%, 92%); /* Azul Gélido #E1EBF7 */
  --bg-card: hsla(0, 0%, 100%, 0.75);
  --text-primary: hsl(231, 85%, 10%); /* Azul Marinho #040B30 */
  --text-secondary: hsl(222, 30%, 30%);
  --text-muted: hsl(222, 18%, 42%);
  /* Paleta oficial (tema Light): Azul Marinho #040B30 (base), Roxo Elétrico #31008E (impacto),
     Pervinca #7289DA (apoio/destaque), Azul Gélido #E1EBF7 (suporte) */
  --accent-blue: hsl(227, 58%, 44%); /* Pervinca #7289DA escurecida p/ contraste sobre fundos claros */
  --accent-green: hsl(227, 58%, 44%); /* alias de apoio (antes verde; atualizado à paleta) */
  --card-border: rgba(4, 11, 48, 0.1);
  --header-height: 6.5rem;
  /* altura total do header fixo: nav 4.5rem + padding 2×1rem = 104px */
  --font-sans: 'Sansation', system-ui, -apple-system, sans-serif;
  --font-mono: 'Sansation', ui-monospace, monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   LAYOUT & CONTAINERS
   ========================================================================== */
.container {
  margin: 0 auto;
  width: 100%;
  position: relative;
}

.container-sm {
  max-width: 48rem;
}


.container-lg {
  max-width: 64rem;
}

.container-xl {
  max-width: 72rem;
}


.section-wrapper {
  padding: 6rem 1rem;
  scroll-margin-top: 7rem;
}

@media (min-width: 640px) {
  .section-wrapper {
    padding: 6rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .section-wrapper {
    padding: 6rem 2rem;
  }
}

.section-alt-bg {
  background-color: var(--bg-alt);
  border-top: 1px solid rgba(4, 11, 48, 0.06);
  border-bottom: 1px solid rgba(4, 11, 48, 0.06);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.text-gradient {
  /* Tema Light: pervinca → roxo escurecidos p/ legibilidade sobre fundos claros */
  background: linear-gradient(to right, hsl(227, 58%, 45%), hsl(263, 85%, 42%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* No Hero (composição escura sobre a foto) o gradiente claro original é mantido */
.hero-wrapper .text-gradient {
  background-image: linear-gradient(to right, hsl(227, 58%, 72%), hsl(266, 75%, 70%));
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header.left {
  text-align: left;
  margin-bottom: 2.5rem;
}

.section-subtitle {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent-blue);
  margin-bottom: 0.75rem;
}

.section-subtitle.green {
  color: var(--accent-green);
}

.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .section-title {
    font-size: 2.25rem;
  }
}

.section-title-sm {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.desc-text {
  font-size: 14px;
  line-height: 1.625;
  color: var(--text-secondary);
  max-width: 65ch;
}

.desc-text-lg {
  font-size: 15px;
  line-height: 1.625;
  color: var(--text-secondary);
  max-width: 62ch;
}


/* ==========================================================================
   COMPONENTS
   ========================================================================== */
/* Glass Card */
.glass-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  background-color: var(--bg-card);
  box-shadow: 0 16px 48px -16px rgba(4, 11, 48, 0.12);
}

.glass-card-top-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(114, 137, 218, 0.45), transparent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0.5rem;
  height: 3rem;
  padding: 0 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary {
  background: linear-gradient(135deg, hsl(261, 100%, 34%), hsl(261, 100%, 24%));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 15px -3px hsla(261, 100%, 28%, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 25px -4px hsla(261, 100%, 28%, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px -2px hsla(261, 100%, 28%, 0.45);
}

.btn-outline {
  background-color: hsla(0, 0%, 100%, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(4, 11, 48, 0.25);
  color: var(--text-primary);
}

.btn-outline:hover {
  background-color: hsla(213, 58%, 92%, 0.9);
  border-color: rgba(4, 11, 48, 0.45);
  transform: translateY(-2px);
  color: var(--text-primary);
}

.btn-outline:active {
  transform: translateY(0);
}

/* Tema Light: sobre a imagem do Hero o outline preserva o tratamento escuro */
.hero-wrapper .btn-outline {
  background-color: hsla(231, 50%, 15%, 0.3);
  border-color: hsla(213, 52%, 93%, 0.15);
  color: hsl(213, 52%, 93%);
}

.hero-wrapper .btn-outline:hover {
  background-color: hsla(231, 50%, 25%, 0.4);
  border-color: hsla(213, 52%, 93%, 0.3);
  color: #fff;
}

/* Botão CTA Integrado no Header */
.btn-header-cta {
  display: none;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 1.5rem;
  font-size: 14px;
  font-weight: 600;
  border-radius: 2rem;
  background: linear-gradient(135deg, hsla(227, 58%, 50%, 0.14), hsla(261, 100%, 45%, 0.14));
  color: var(--text-primary);
  border: 1px solid rgba(4, 11, 48, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .btn-header-cta {
    display: inline-flex;
  }
}

.btn-header-cta:hover {
  background: linear-gradient(135deg, hsl(261, 100%, 34%), hsl(261, 100%, 24%));
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px hsla(261, 100%, 28%, 0.45);
  color: #fff;
}

/* SVG Icons Helpers */
.icon-md {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}

.icon-lg {
  height: 20px;
  width: 20px;
}

.icon-xl {
  height: 24px;
  width: 24px;
}

.icon-blue {
  color: var(--accent-blue);
}

.icon-green {
  color: var(--accent-green);
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid rgba(4, 11, 48, 0.12);
}

.icon-box-purple {
  background: linear-gradient(to bottom right, hsla(227, 58%, 65%, 0.2), hsla(261, 100%, 45%, 0.2));
}

.icon-box-green {
  background-color: hsla(227, 58%, 65%, 0.15);
}

/* ==========================================================================
   SECTIONS & BLOCKS
   ========================================================================== */

/* Header Dinâmico (Topo vs Flutuante) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 1rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-nav {
  width: 100%;
  max-width: var(--max-width-7xl);
  border: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-container {
  margin: 0 auto;
  display: flex;
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1rem;
}

@media (min-width: 1024px) {
  .nav-container {
    padding: 0 1.5rem;
  }
}

/* Estado Scrolled (Floating Island) */
.site-header.scrolled {
  top: 1.25rem;
  padding: 0 1rem;
}

.site-header.scrolled .main-nav {
  max-width: var(--max-width-6xl);
  border: 1px solid var(--card-border);
  border-radius: 4rem;
  background-color: hsla(213, 58%, 97%, 0.72);
  backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 8px 32px -8px rgba(4, 11, 48, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.brand-logo:hover {
  transform: scale(1.02);
}

.brand-logo img {
  height: 32px;
  width: auto;
}

/* Tema Light: usa a logo colorida (Azul Marinho) sobre o header claro */
.brand-logo-light {
  display: none;
}

.brand-logo-color {
  display: block;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
}

/* Micro-interação de sublinhado moderno */
.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.8;
  padding: 0.5rem 0;
  transition: opacity 0.3s;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(to right, hsl(227, 58%, 45%), hsl(263, 85%, 42%));
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}

.nav-link:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mobile-menu-toggle {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: background-color 0.3s;
}

.mobile-menu-toggle:hover {
  background-color: rgba(4, 11, 48, 0.07);
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* O main começa abaixo do header fixo, evitando que o banner fique atrás dele */
#main-content {
  padding-top: var(--header-height);
}

/* Header sem cortes em resoluções intermediárias (1024–1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-container {
    gap: 1rem;
    padding: 0 1rem;
  }

  .nav-links {
    gap: 1.25rem;
  }

  .btn-header-cta {
    padding: 0 1.25rem;
  }
}


/* Hero - Immersive & Asymmetrical (2026 Trend) */
.hero-wrapper {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  /* ocupa apenas a área abaixo do header fixo */
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}

/* O banner configurado como background cover fixo usando a nova imagem */
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-image: url('../img/hero/banner.jpg');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: -2;
  animation: heroBgZoom 20s ease-out forwards;
}

@keyframes heroBgZoom {
  0% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* Overlay refinado: transição mais suave da imagem para o fundo escuro */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tema Light: o Hero permanece composição escura sobre a foto — fades fixos
     em tom marinho (não dependem mais do --bg-main claro) */
  background: linear-gradient(90deg, hsla(231, 74%, 6%, 0) 0%, hsla(231, 74%, 6%, 0.55) 40%, hsla(231, 74%, 6%, 0.88) 88%),
    linear-gradient(to top, hsla(231, 74%, 6%, 1) 0%, transparent 15%);
}

.hero-container {
  width: 100%;
  max-width: 110rem;
  display: flex;
  justify-content: flex-end;
  /* Joga o cartão para a direita, ancorado mesmo em telas grandes */
  align-items: center;
  /* Impede que o cartão estique na vertical */
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem;
  /* respiro lateral; a altura da seção se mantém */
}

/* Painel de conteúdo: sem card, texto direto sobre o banner */
.hero-content {
  /* Limita a no máximo 50% do container pai, com teto de 45rem (metade de 90rem) */
  max-width: clamp(36rem, 50%, 45rem);
  width: 100%;
  text-align: left;
  padding: clamp(1.5rem, 3vw, 3rem);
  opacity: 0;
  transform: translateY(20px);
  animation: heroContentFade 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes heroContentFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-heading {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: clamp(0.875rem, 2vh, 1.25rem);
}

.hero-description {
  font-size: clamp(1.125rem, 1.2vw, 1.375rem);
  line-height: 1.6;
  color: hsl(222, 26%, 85%);
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
  max-width: 44rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
}

/* Botão com brilho pulsante sutil */
.btn-glow {
  box-shadow: 0 0 20px hsla(261, 100%, 28%, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.btn-glow:hover {
  box-shadow: 0 0 30px hsla(261, 100%, 28%, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.scroll-down {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: hsl(222, 26%, 62%);
  transition: color 0.3s;
}

.scroll-down:hover {
  color: hsl(213, 52%, 90%);
}

/* Ajustes Mobile: Traz o texto para o centro e escurece mais o fundo */
@media (max-width: 1023px) {
  .hero-bg-overlay {
    background: linear-gradient(to bottom, hsla(231, 74%, 6%, 0.4) 0%, hsla(231, 74%, 6%, 0.9) 60%, hsla(231, 74%, 6%, 1) 100%);
  }

  .hero-container {
    justify-content: center;
    padding: 2.5rem 1rem;
  }

  .hero-content {
    text-align: center;
    background: transparent;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 1rem;
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }
}

/* Viewports de altura reduzida (ex.: 1366×768) — encolhe o cartão para ele nunca invadir a faixa do "Role para conhecer" */
@media (max-height: 760px) {
  .hero-container {
    padding: 1.5rem 2vw;

  }

  .hero-content {
    max-width: clamp(38rem, 48vw, 44rem);
    padding: 1.5rem 2rem;
  }

  .hero-heading {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin-bottom: 0.75rem;
  }

  .hero-description {
    margin-bottom: 1.25rem;
    max-width: 100%;
    font-size: 1.125rem;
  }
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-content {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-bg-image {
    animation: none;
  }
}

/* Quem Somos */
.about-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.about-image {
  position: relative;
  aspect-ratio: 16/10;
}

@media (min-width: 768px) {
  .about-image {
    grid-column: span 2 / span 2;
    aspect-ratio: auto;
    height: 100%;
  }
}

.about-image img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.about-image-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsla(231, 60%, 7%, 0.55), transparent);
}

@media (min-width: 768px) {
  .about-image-gradient {
    background: linear-gradient(to right, hsla(231, 60%, 7%, 0.55), transparent);
  }
}

.about-content {
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .about-content {
    padding: 2rem;
  }
}

@media (min-width: 768px) {
  .about-content {
    grid-column: span 3 / span 3;
  }
}

.about-text {
  margin-top: 0.75rem;
}


/* ==========================================================================
   SIMULADOR DE CÂMBIO (RK GROUP)
   ========================================================================== */
.calc-section {
  position: relative;
  z-index: 5;
}

.calc-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .calc-grid {
    grid-template-columns: 1fr 480px;
    gap: 4.5rem;
  }
}

/* Tipografia de Contexto */
.calc-desc {
  margin-bottom: 2.5rem;
  max-width: 42ch;
}

.calc-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.calc-features li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 14.5px;
  color: var(--text-secondary);
}

.calc-feature-icon {
  height: 2rem;
  width: 2rem;
  color: var(--accent-blue);
  flex-shrink: 0;
  border-radius: 0.5rem;
}

.calc-cta-wrapper {
  padding-top: 2rem;
  border-top: 1px solid var(--card-border);
}

.calc-cta-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* O Cartão Financeiro Premium */
.calc-card {
  /* Tema Light: superfície clara (branco → Azul Gélido translúcido) */
  background: linear-gradient(160deg, hsla(0, 0%, 100%, 0.9), hsla(213, 58%, 94%, 0.92));
  border-radius: 1.5rem;
  padding: 2rem;
  position: relative;
  overflow: visible;
}

@media (max-width: 639px) {
  .calc-card {
    padding: 1.5rem;
  }
}

/* Header de Cotação */
.calc-rate-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--card-border);
}

.calc-rate-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-blue);
}

.calc-rate-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0.9;
}

/* Inputs e Seletores */
.calc-field-group {
  position: relative;
  background: hsla(213, 58%, 92%, 0.45);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 0.875rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.3s, background-color 0.3s;
}

.calc-field-group:focus-within {
  border-color: hsla(227, 58%, 44%, 0.6);
  background: hsla(213, 58%, 92%, 0.75);
}

.calc-field-readonly {
  background: hsla(213, 58%, 92%, 0.25);
}

.calc-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

.calc-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.calc-currency-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0;
  border-right: 1px solid rgba(4, 11, 48, 0.18);
  color: var(--text-secondary);
  transition: color 0.3s, opacity 0.3s;
}

.calc-currency-selector:hover,
.calc-currency-selector[aria-expanded="true"] {
  color: var(--text-primary);
  opacity: 1;
}

.calc-flag {
  font-size: 18px;
  line-height: 1;
}

.calc-code {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.calc-input, .calc-output {
  background: transparent;
  border: none;
  width: 100%;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  outline: none;
}

.calc-output {
  color: var(--accent-green);
}

.calc-input::placeholder {
  color: rgba(4, 11, 48, 0.35);
}

/* Botão Inverter */
.calc-swap-wrapper {
  display: flex;
  justify-content: center;
  margin: -0.75rem 0;
  position: relative;
  z-index: 10;
}

.calc-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid rgba(4, 11, 48, 0.14);
  color: var(--accent-blue);
  box-shadow: 0 4px 12px rgba(4, 11, 48, 0.16);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s, color 0.3s;
}

.calc-swap-btn:hover {
  background: hsla(227, 58%, 50%, 0.14);
  color: hsl(227, 58%, 38%);
  transform: rotate(180deg);
}

/* Dropdown Personalizado */
.calc-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: hsla(0, 0%, 100%, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(4, 11, 48, 0.12);
  border-radius: 1rem;
  box-shadow: 0 16px 48px -12px rgba(4, 11, 48, 0.2);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.calc-dropdown-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.calc-dropdown-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid rgba(4, 11, 48, 0.05);
}

.calc-dropdown-item:last-child {
  border-bottom: none;
}

.calc-dropdown-item:hover,
.calc-dropdown-item:focus-visible {
  background-color: hsla(227, 58%, 50%, 0.1);
  outline: none;
}

.calc-dropdown-item .item-flag {
  font-size: 16px;
}

.calc-dropdown-item .item-code {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 14px;
}

.calc-dropdown-item .item-name {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Scrollbar invisível elegante para o dropdown */
.calc-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.calc-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.calc-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(4, 11, 48, 0.2);
  border-radius: 10px;
}

/* Botão de Ação */
.calc-btn-submit {
  width: 100%;
  margin-top: 1.5rem;
}

/* Texto Legal */
.calc-disclaimer {
  margin-top: 1.25rem;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* Loading & Erros */
.calc-loader-overlay {
  position: absolute;
  inset: 0;
  background: hsla(213, 58%, 97%, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

.calc-loader-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.calc-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(4, 11, 48, 0.12);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: calc-spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes calc-spin {
  to {
    transform: rotate(360deg);
  }
}

.calc-loader-overlay p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.calc-error-msg {
  display: none;
  background: hsla(0, 70%, 50%, 0.08);
  border: 1px solid hsla(0, 70%, 50%, 0.35);
  color: hsl(0, 70%, 34%);
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 13px;
  margin-bottom: 1.25rem;
  text-align: center;
}

/* Agronegocio */
/* Agronegocio */
.agro-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 40% at 82% 8%, hsla(227, 58%, 65%, 0.08) 0%, transparent 62%);
}

/* Alterado de max-width: 46rem para 100% */
.agro-intro {
  max-width: 100%;
}

/* Vertical Tabs — Segmented Content Switcher */
.agro-tabs {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.agro-tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-right: 1px solid rgba(4, 11, 48, 0.08);
}

/* Controles da faixa horizontal: só existem até 1023px (ver media query abaixo)
   e aparecem apenas quando a faixa realmente tem rolagem (.is-scrollable). */
.agro-tabs-controls {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Setas reaproveitam a base .nav-arrow (mesmo padrão do carrossel dos depoimentos) */
.agro-tabs-arrow {
  background-color: hsla(213, 58%, 96%, 0.85);
}

.agro-tabs-arrow:hover:not(:disabled) {
  border-color: hsla(227, 58%, 44%, 0.5);
  background-color: hsla(261, 100%, 45%, 0.12);
  color: #31008e;
}

.agro-tabs-arrow:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.agro-tabs-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.agro-tabs-panels {
  position: relative;
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .agro-tabs-panels {
    padding: 2rem 2.25rem;
  }
}

@media (max-width: 1023px) {
  .agro-tabs {
    grid-template-columns: 1fr;
  }

  /* Setas só aparecem quando a faixa tem o que rolar */
  .agro-tabs.is-scrollable .agro-tabs-controls {
    display: flex;
    padding: 0.875rem 0.75rem 0.25rem;
  }

  .agro-tabs-nav {
    flex-direction: row;
    align-items: stretch;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid rgba(4, 11, 48, 0.08);
    /* Rolagem horizontal usável: barra visível + snap + roda/setas via JS */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.75rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: hsla(227, 58%, 65%, 0.45) transparent;
  }

  .agro-tabs-nav::-webkit-scrollbar {
    height: 6px;
  }

  .agro-tabs-nav::-webkit-scrollbar-track {
    background: rgba(4, 11, 48, 0.04);
  }

  .agro-tabs-nav::-webkit-scrollbar-thumb {
    background: hsla(227, 58%, 65%, 0.45);
    border-radius: 10px;
  }

  /* Fades de borda: a mask fica presa ao box do container, então o conteúdo
     "some" nas extremidades conforme rola — indica que há mais opções. */
  .agro-tabs.is-scrollable .agro-tabs-nav {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%);
  }

  .agro-tabs.is-scrollable.is-at-start .agro-tabs-nav {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
  }

  .agro-tabs.is-scrollable.is-at-end .agro-tabs-nav {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2.25rem, #000 100%);
  }

  .agro-tabs-nav.is-dragging {
    scroll-snap-type: none;
    user-select: none;
  }

  /* Roda do mouse: snap desligado durante o giro e religado já alinhado à aba */
  .agro-tabs-nav.is-scrolling {
    scroll-snap-type: none;
  }

  /* Especificidade acima de `.agro-tab` (a base declara width: 100%): sem isto
     cada aba ocupava a largura total e só uma opção ficava visível por vez. */
  .agro-tabs-nav .agro-tab {
    width: auto;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* Arraste com mouse: só onde a faixa horizontal existe (touch segue nativo) */
@media (max-width: 1023px) and (hover: hover) and (pointer: fine) {
  .agro-tabs-nav {
    cursor: grab;
  }

  .agro-tabs-nav.is-dragging {
    cursor: grabbing;
  }
}

.agro-tab {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1rem;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  color: var(--text-muted);
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.agro-tab:hover {
  background-color: hsla(227, 58%, 50%, 0.07);
  color: var(--text-primary);
}

.agro-tab.is-active {
  background-color: hsla(227, 58%, 50%, 0.12);
  border-color: rgba(4, 11, 48, 0.14);
  color: var(--text-primary);
}

.agro-tab-index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: hsla(231, 85%, 10%, 0.4);
}

.agro-tab.is-active .agro-tab-index {
  color: var(--accent-green);
}

.agro-tab-icon {
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  border-radius: 0.625rem;
}

.agro-tab-label {
  font-weight: 600;
  line-height: 1.35;
}

.agro-panel[hidden] {
  display: none;
}

.agro-panel.is-active {
  animation: agro-panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes agro-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agro-panel.is-active {
    animation: none;
  }
}

.agro-panel-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.agro-panel-desc {
  margin-top: 0.75rem;
  max-width: 40rem;
}

.agro-panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.agro-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid hsla(227, 58%, 45%, 0.35);
  background-color: hsla(227, 58%, 50%, 0.1);
  color: var(--accent-green);
}














.agro-highlight {
  font-weight: 600;
  color: hsl(222, 30%, 22%);
}







/* Produtos */
/* ==========================================================================
   TABELA DE PRODUTOS E SERVIÇOS (RK GROUP)
   Desktop: tabela editorial de 3 colunas.
   Tablet (768-1023px): tabela comprimida, sem rolagem lateral.
   Mobile (ate 767px): cada linha vira um card empilhado, sem rolagem lateral.
   ========================================================================== */

/* Container da Tabela */
.services-table-wrapper {
  position: relative;
  overflow: hidden; /* Mantém as bordas arredondadas do cartão */
}

/* Área da Tabela (rede de segurança contra estouro lateral) */
.services-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: hsla(227, 58%, 65%, 0.4) transparent;
}

/* Scrollbar Personalizada para Webkit */
.services-table-scroll::-webkit-scrollbar {
  height: 6px;
}
.services-table-scroll::-webkit-scrollbar-track {
  background: rgba(4, 11, 48, 0.04);
}
.services-table-scroll::-webkit-scrollbar-thumb {
  background: hsla(227, 58%, 65%, 0.4);
  border-radius: 10px;
}

/* Tabela Editorial */
.services-table {
  width: 100%;
  min-width: 860px; /* Referência do layout editorial de 3 colunas (>=1024px) */
  border-collapse: collapse;
  text-align: left;
  overflow-wrap: anywhere; /* Impede que um token longo estoure a largura do container */
}

/* Larguras Proporcionais das Colunas */
.services-table th:nth-child(1) { width: 28%; }
.services-table th:nth-child(2) { width: 34%; }
.services-table th:nth-child(3) { width: 38%; }

/* Cabeçalho (Headers) */
.services-table th {
  padding: 1.25rem 1.75rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-blue); /* Acento de apoio Pervinca (subtítulos RK Group) */
  border-bottom: 1px solid rgba(4, 11, 48, 0.12);
  background: hsla(213, 58%, 92%, 0.5);
  white-space: nowrap;
}

/* Células e Alinhamentos */
.services-table td {
  padding: 1.75rem;
  border-bottom: 1px solid rgba(4, 11, 48, 0.06);
  vertical-align: middle;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.services-table tbody tr:last-child td {
  border-bottom: none;
}

/* Microinteração Premium nas Linhas */
.services-table tbody tr {
  transition: background-color 0.3s ease;
}

.services-table th:not(:last-child) {
  border-right: 1px solid var(--card-border);
}

.services-table td:not(:last-child) {
  border-right: 1px solid rgba(4, 11, 48, 0.06);
}

@media (hover: hover) {
  .services-table tbody tr:hover td {
    background-color: hsla(227, 58%, 50%, 0.07);
  }
  
  /* Indicador sutil de leitura na borda lateral esquerda */
  .services-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--accent-blue);
  }
  
  /* Interação do Ícone */
  .services-table tbody tr:hover .st-title-icon {
    opacity: 1;
    transform: scale(1.1);
    color: hsl(227, 58%, 38%);
  }
}

/* Tipografia Interna */
.st-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.st-title-icon {
  color: var(--accent-blue);
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.st-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 44ch; /* Trava natural para manter leitura confortável */
}

/* Tablet (768-1023px): tabela comprimida — mantém as 3 colunas sem rolagem lateral */
@media (min-width: 768px) and (max-width: 1023px) {
  .services-table {
    min-width: 100%; /* anula o min-width de 860px do desktop */
    table-layout: fixed;
  }

  .services-table th {
    padding: 1rem;
    white-space: normal; /* libera o nowrap do desktop para o cabeçalho quebrar */
  }

  .services-table td {
    padding: 1.25rem 1rem;
  }

  .services-table th:nth-child(1) { width: 32%; }
  .services-table th:nth-child(2) { width: 33%; }
  .services-table th:nth-child(3) { width: 35%; }

  .st-text {
    max-width: none; /* os 44ch não fazem sentido em colunas estreitas */
  }
}

/* Mobile (até 767px): cada linha vira um card empilhado — sem rolagem lateral.
   O cabeçalho de colunas é omitido e cada célula ganha um rótulo (data-label). */
@media (max-width: 767px) {
  .services-table-scroll {
    overflow-x: visible; /* não há mais o que deslizar: o conteúdo reflui */
  }

  .services-table {
    min-width: 100%; /* anula o min-width de 860px do desktop */
    display: block;
  }

  /* As roles ARIA do <table> mantêm os cabeçalhos para leitores de tela */
  .services-table thead {
    display: none;
  }

  .services-table tbody,
  .services-table tr,
  .services-table td {
    display: block;
    width: auto;
  }

  .services-table tbody tr {
    padding: 1.375rem 1.25rem;
    border-bottom: 1px solid rgba(4, 11, 48, 0.06);
  }

  .services-table tbody tr:last-child {
    border-bottom: none;
  }

  /* Zera paddings e réguas do modo tabela */
  .services-table td,
  .services-table td:not(:last-child) {
    padding: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .services-table td + td {
    margin-top: 1rem;
  }

  /* Rótulo de bloco (gerado por CSS: não duplica a leitura do leitor de tela) */
  .services-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.3rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-blue);
  }

  .st-text {
    max-width: none;
    font-size: 14px;
  }

  .st-title-icon {
    opacity: 1; /* sem hover no toque: ícone já em destaque */
  }
}

/* Adaptação para telas de notebook (viewport baixo, ex.: 1366×768, 1024×768):
   reduz a altura das linhas sem afetar monitores 1080p+ */
@media (min-width: 1024px) and (max-height: 900px) {
  .services-table th {
    padding: 0.875rem 1.25rem;
  }

  .services-table td {
    padding: 1rem 1.25rem;
  }

  .st-text {
    line-height: 1.5;
  }
}

/* ==========================================================================
   ÚLTIMAS NOTÍCIAS (LAYOUT EDITORIAL)
   ========================================================================== */
.news-editorial-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .news-editorial-grid {
    grid-template-columns: 1.25fr 1fr; /* Coluna de destaque levemente mais larga */
    gap: 4rem;
  }
}

/* Tag de Fonte / Categoria */
.news-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-blue); /* Acento institucional Pervinca */
  margin-bottom: 0.875rem;
}

/* -----------------------------------
   Matéria Principal (Destaque)
-------------------------------------- */
.news-featured {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 28rem;
  padding: 2rem;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--card-border);
}

@media (min-width: 640px) {
  .news-featured {
    padding: 3rem;
    min-height: 32rem;
  }
}

.news-featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.news-featured-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: Zoom ultra-suave na imagem de fundo */
@media (hover: hover) {
  .news-featured:hover .news-featured-bg img {
    transform: scale(1.05);
  }
}

/* Overlay dramático para legibilidade editorial */
.news-featured-overlay {
  position: absolute;
  inset: 0;
  /* Camada base escura + gradiente vertical: garante contraste do texto
     mesmo sobre imagens claras */
  background-color: hsla(231, 74%, 6%, 0.45);
  background-image: linear-gradient(
    to top,
    hsla(231, 74%, 6%, 0.98) 0%,
    hsla(231, 74%, 6%, 0.78) 50%,
    hsla(231, 74%, 6%, 0.45) 100%
  );
}

.news-featured-content {
  position: relative;
  z-index: 1;
  max-width: 38ch;
}

.news-featured-title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: hsl(213, 52%, 96%);
  margin-bottom: 1rem;
}

.news-featured-desc {
  font-size: 15px;
  line-height: 1.6;
  color: hsl(222, 26%, 80%);
  margin-bottom: 2rem;
}

/* Link Direto Elegante */
.news-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 600;
  color: hsl(213, 52%, 96%);
  transition: color 0.3s;
}

.news-read-more svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .news-read-more:hover {
    color: hsl(227, 58%, 75%);
  }
  .news-read-more:hover svg {
    transform: translateX(4px);
  }
}

/* -----------------------------------
   Matérias Secundárias (Lista)
-------------------------------------- */
.news-secondary-list {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centraliza verticalmente com o card principal no grid desktop */
}

.news-secondary-item {
  padding: 1.75rem 0;
  transition: transform 0.3s ease;
}

.news-secondary-item:first-child {
  padding-top: 0;
}

.news-secondary-item:last-child {
  padding-bottom: 0;
}

.news-secondary-title {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}

.news-secondary-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Divisor sutil */
.news-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(4, 11, 48, 0.12), rgba(4, 11, 48, 0.02));
}

/* Interação sutil nas secundárias (apenas indicação visual) */
@media (hover: hover) {
  .news-secondary-item:hover .news-secondary-title {
    color: var(--accent-green);
  }
}

/* ==========================================================================
   DEPOIMENTOS — REDESIGN 2026
   ========================================================================== */
.testimonials-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.testimonials-nav {
  display: flex;
  gap: 0.5rem;
}

/* Base .nav-arrow mantida para reuso no footer (ícones sociais) */
.nav-arrow {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(4, 11, 48, 0.12);
  color: var(--text-secondary);
  transition: all 0.3s;
}

.nav-arrow:hover {
  border-color: hsla(227, 58%, 44%, 0.45);
  color: var(--text-primary);
}

/* Refinamento das setas apenas nesta seção */
.testimonials-nav .nav-arrow {
  background-color: hsla(213, 58%, 96%, 0.85);
}

.testimonials-nav .nav-arrow:hover:not(:disabled) {
  border-color: hsla(227, 58%, 44%, 0.5);
  background-color: hsla(261, 100%, 45%, 0.12);
  color: #31008E;
  transform: translateY(-1px);
}

.testimonials-nav .nav-arrow:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.testimonials-nav .nav-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Carrossel */
.rkl-scroll {
  /* Respiro vertical: quando overflow-x é rolável, overflow-y computa para
     auto — sem este padding, o card é cortado em cima/baixo no hover */
  margin-top: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  margin-bottom: -1.25rem;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.rkl-scroll::-webkit-scrollbar {
  display: none;
}

.rkl-scroll.is-dragging {
  scroll-snap-type: none;
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .rkl-scroll {
    cursor: grab;
  }
  .rkl-scroll.is-dragging {
    cursor: grabbing;
  }
}

/* Fade lateral indicando continuidade do carrossel */
.testimonials-viewport {
  position: relative;
}

.testimonials-viewport::before,
.testimonials-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 5vw, 3.5rem);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.testimonials-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-main) 15%, transparent);
}

.testimonials-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-main) 15%, transparent);
}

.testimonials-viewport.is-at-start::before {
  opacity: 0;
}

.testimonials-viewport.is-at-end::after {
  opacity: 0;
}

/* Indicador de foco apenas para navegação por TECLADO (Tab) —
   cliques de mouse não acionam :focus-visible, então arrastar
   o carrossel não exibe borda. */
.testimonials-viewport:has(.rkl-scroll:focus-visible) {
  outline: 2px solid hsla(227, 58%, 44%, 0.55);
  outline-offset: 4px;
  border-radius: 1rem;
}

/* Evita anel duplo: o anel fica só no viewport externo */
.rkl-scroll:focus-visible {
  outline: none;
}

/* Paginação (dots) */
.testimonials-dots {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.testimonial-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 9999px;
  background-color: rgba(4, 11, 48, 0.18);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-dot:hover {
  background-color: rgba(4, 11, 48, 0.34);
}

.testimonial-dot.is-active {
  width: 1.75rem;
  background: linear-gradient(90deg, hsl(227, 58%, 50%), hsl(263, 85%, 48%));
  box-shadow: 0 0 12px hsla(227, 58%, 50%, 0.45);
}

.testimonials-dots:empty {
  display: none;
}

.testimonial-dot:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  width: 85%;
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 1.75rem;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .testimonial-card {
    width: 420px;
    padding: 2rem;
  }
}

/* Aspas decorativas em marca-d'água */
.testimonial-card::after {
  content: "\201C";
  position: absolute;
  top: 0.75rem;
  right: 1.375rem;
  z-index: 0;
  font-size: 6.5rem;
  line-height: 1;
  font-weight: 700;
  color: hsla(227, 58%, 50%, 0.1);
  pointer-events: none;
  user-select: none;
}

.testimonial-stars,
.testimonial-quote,
.testimonial-author {
  position: relative;
  z-index: 1;
}

.testimonial-stars {
  display: flex;
  gap: 0.375rem;
}

.star-icon {
  height: 1rem;
  width: 1rem;
  fill: currentColor;
  color: hsl(38, 92%, 45%);
  filter: drop-shadow(0 0 5px hsla(38, 92%, 45%, 0.3));
}

.testimonial-quote {
  margin-top: 1.25rem;
  flex: 1;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: hsl(222, 26%, 26%);
}

@media (min-width: 640px) {
  .testimonial-quote {
    font-size: 16px;
  }
}

.testimonial-author {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(4, 11, 48, 0.08);
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.testimonial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, hsl(261, 100%, 34%), hsl(261, 100%, 24%));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.28), 0 6px 16px -6px hsla(261, 100%, 28%, 0.5);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Alternância de marca (roxo → pervinca), dualidade usada no mapa global */
.testimonial-card:nth-child(even) .testimonial-avatar {
  background: linear-gradient(135deg, hsl(227, 58%, 52%), hsl(264, 65%, 40%));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.28), 0 6px 16px -6px hsla(227, 58%, 55%, 0.5);
}

.testimonial-author-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.testimonial-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.testimonial-author-role {
  margin-top: 0.125rem;
  font-size: 12px;
  color: var(--text-muted);
}

/* Micro-interações do card */
@media (hover: hover) {
  .testimonial-card:hover {
    transform: translateY(-4px);
    border-color: hsla(227, 58%, 44%, 0.35);
    box-shadow: 0 24px 56px -20px rgba(4, 11, 48, 0.16), 0 0 32px -12px hsla(227, 58%, 50%, 0.25);
  }
  .testimonial-card:hover .glass-card-top-glow {
    background: linear-gradient(to right, transparent, hsla(227, 58%, 50%, 0.5), transparent);
  }
}

/* --- Reveal on scroll (mesmo padrão das demais seções) --- */
html.reveal-hidden #depoimentos [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.reveal-hidden #depoimentos [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Accessibility: prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  html.reveal-hidden #depoimentos [data-reveal],
  html.reveal-hidden #depoimentos [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .testimonials-viewport::before,
  .testimonials-viewport::after,
  .testimonial-card,
  .testimonial-dot {
    transition: none;
  }
}

/* --- Modo compacto: notebooks / viewports baixos (ex.: 1366×768) ---
   Ativa apenas quando a altura da viewport é pequena; 1080p sem zoom
   (viewport ~940px) permanece com o layout padrão. */
@media (max-height: 820px) and (min-width: 640px) {
  #depoimentos.section-wrapper {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .rkl-scroll {
    margin-top: 1.25rem;
    gap: 1rem;
  }

  .testimonial-card {
    width: 380px;
    padding: 1.5rem;
  }

  /* Aspas decorativas proporcionais ao card compacto */
  .testimonial-card::after {
    top: 0.5rem;
    right: 1rem;
    font-size: 5rem;
  }

  .star-icon {
    height: 0.875rem;
    width: 0.875rem;
  }

  .testimonial-quote {
    margin-top: 1rem;
    font-size: 14px;
    line-height: 1.6;
  }

  .testimonial-author {
    margin-top: 1.25rem;
    padding-top: 1rem;
    gap: 0.75rem;
  }

  .testimonial-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
  }

  .testimonial-author-name {
    font-size: 13px;
  }

  .testimonial-author-role {
    font-size: 11px;
  }

  .testimonials-dots {
    margin-top: 1rem;
  }
}

/* ==========================================================================
   FALE CONOSCO (PREMIUM DESK SHOWCASE - ULTRA COMPACTO)
   ========================================================================== */
.cp-section {
  position: relative;
  isolation: isolate;
  background-color: var(--bg-alt);
  border-top: 1px solid rgba(4, 11, 48, 0.06);
  /* Altamente compacto para telas de notebook */
  padding: 4rem 1rem;
}

@media (min-width: 640px) {
  .cp-section {
    padding: 4.5rem 1.5rem;
  }
}

/* Background Imersivo */
.cp-bg-elements {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}

.cp-glow-left {
  width: 40rem;
  height: 40rem;
  left: -10rem;
  bottom: -10rem;
  background: radial-gradient(circle, hsl(261, 100%, 50%), transparent 70%);
}

.cp-glow-right {
  width: 35rem;
  height: 35rem;
  right: -5rem;
  top: -5rem;
  background: radial-gradient(circle, hsl(227, 58%, 55%), transparent 70%);
}

.cp-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(4,11,48,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(4,11,48,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.cp-container {
  position: relative;
  z-index: 10;
}

/* Header Editorial Compacto */
.cp-header {
  text-align: center;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cp-header {
    text-align: left;
  }
}


.cp-lead {
  margin-top: 0.75rem;
  font-size: 14px;
  max-width: 60ch;
}

@media (max-width: 767px) {
  .cp-lead { margin-inline: auto; }
}

/* Painel de Controle Principal */
.cp-showcase {
  padding: 0; 
  box-shadow: 0 24px 64px -16px rgba(4, 11, 48, 0.14);
}

.cp-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .cp-grid {
    grid-template-columns: 1fr 1fr; /* Colunas simétricas para o mapa preencher bem */
  }
}

.cp-col {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {
  .cp-col {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .cp-col-comms {
    border-right: 1px solid rgba(4, 11, 48, 0.08);
  }
}

@media (max-width: 1023px) {
  .cp-col-hq {
    border-top: 1px solid rgba(4, 11, 48, 0.08);
  }
}

/* Headers das Colunas Internas */
.cp-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.cp-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

/* Status Pill Inteligente (Mini) */
.cp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 2rem;
  background: hsla(227, 58%, 50%, 0.1);
  border: 1px solid hsla(227, 58%, 44%, 0.35);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-green);
  transition: all 0.3s ease;
}

.cp-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: hsl(227, 58%, 55%);
  box-shadow: 0 0 8px hsl(227, 58%, 55%);
  animation: cp-pulse 2s infinite;
}

.cp-status-pill.is-closed {
  background: hsla(222, 18%, 45%, 0.12);
  border-color: rgba(4, 11, 48, 0.14);
  color: var(--text-muted);
}

.cp-status-pill.is-closed .cp-status-dot {
  background-color: var(--text-muted);
  box-shadow: none;
  animation: none;
}

@keyframes cp-pulse {
  0% { box-shadow: 0 0 0 0 hsla(227, 58%, 55%, 0.6); }
  70% { box-shadow: 0 0 0 6px hsla(227, 58%, 55%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(227, 58%, 55%, 0); }
}

/* WhatsApp Card - Horizontal e Compacto */
.cp-wa-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, hsla(227, 58%, 50%, 0.14), hsla(261, 100%, 45%, 0.14));
  border: 1px solid hsla(227, 58%, 45%, 0.35);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 1.25rem;
}

.cp-wa-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 50%, hsla(227, 58%, 65%, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cp-wa-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  /* Verde característico do WhatsApp (#25D366) para o selo do canal */
  background: linear-gradient(135deg, hsl(145, 63%, 49%), hsl(152, 68%, 33%));
  color: #fff;
  box-shadow: 0 8px 20px -6px hsla(145, 63%, 35%, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.cp-wa-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cp-wa-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cp-wa-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.cp-wa-number {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  opacity: 0.8;
  margin-top: 0.125rem;
}

.cp-wa-arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: hsla(213, 58%, 92%, 0.8);
  border: 1px solid rgba(4, 11, 48, 0.14);
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .cp-wa-card:hover {
    transform: translateY(-2px);
    border-color: hsla(227, 58%, 44%, 0.5);
    box-shadow: 0 12px 32px -10px hsla(261, 100%, 28%, 0.25);
  }
  .cp-wa-card:hover .cp-wa-bg { opacity: 1; }
  .cp-wa-card:hover .cp-wa-arrow {
    background: hsl(261, 100%, 34%);
    border-color: transparent;
    color: #fff;
    transform: translateX(4px);
  }
}

/* Links Secundários Compactos */
.cp-secondary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cp-sec-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.25s ease;
}

.cp-sec-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsla(213, 58%, 92%, 0.8);
  color: var(--accent-blue);
  border: 1px solid rgba(4, 11, 48, 0.08);
  transition: all 0.25s ease;
}

.cp-sec-data {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cp-sec-label {
  font-size: 11px;
  color: var(--text-muted);
}

.cp-sec-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.25s ease;
}

@media (hover: hover) {
  .cp-sec-item:hover {
    background: hsla(213, 58%, 92%, 0.6);
    border-color: rgba(4, 11, 48, 0.08);
    transform: translateX(4px);
  }
  .cp-sec-item:hover .cp-sec-icon {
    background: var(--bg-alt);
    color: hsl(227, 58%, 38%);
  }
  .cp-sec-item:hover .cp-sec-value {
    color: hsl(227, 58%, 40%);
  }
}

/* -----------------------------------
   Integração do Mapa Dark Mode 
-------------------------------------- */
.cp-map-wrapper {
  position: relative;
  flex: 1; /* Preenche elegantemente a altura restante da coluna pareando com o lado esquerdo */
  width: 100%;
  min-height: 180px; /* Garantia para mobile */
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(4,11,48,0.1);
  background: var(--bg-main);
  margin-bottom: 1.5rem;
}

.cp-map-iframe {
  width: 100%;
  height: 100%;
  min-height: 180px; /* Failsafe */
  border: none;
  /* Tema Light: mapa nativo claro, sem o filtro de inversão do tema escuro */
  filter: none;
}

.cp-map-overlay {
  position: absolute;
  inset: 0;
  background: hsla(213, 58%, 92%, 0.3); /* Tintura de integração ao layout */
  pointer-events: none; /* Permite arrastar o mapa por baixo */
}

/* Link Direto Maps */
.cp-hq-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
  transition: color 0.3s;
}

.cp-hq-link svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .cp-hq-link:hover { color: hsl(227, 58%, 38%); }
  .cp-hq-link:hover svg { transform: translate(2px, -2px); }
}

/* Área Legal Horizontal */
.cp-hq-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cp-address {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.cp-legal-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(4, 11, 48, 0.08);
}

.cp-legal-logo {
  height: 18px;
  width: auto;
  /* Tema Light: logo branca convertida em silhueta escura (detalhes preservados) */
  filter: grayscale(100%) invert(1);
  opacity: 0.55;
  transition: all 0.3s ease;
}

.cp-legal-cnpj {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

@media (hover: hover) {
  .cp-legal-box:hover .cp-legal-logo {
    opacity: 0.95;
    filter: grayscale(0%) invert(1);
  }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .cp-wa-card, .cp-wa-bg, .cp-wa-arrow, .cp-sec-item, .cp-sec-icon, .cp-sec-value, .cp-legal-logo, .cp-hq-link svg {
    transition: none;
  }
  .cp-status-dot {
    animation: none;
  }
}

/* ==========================================================================
   FOOTER (MINIMALISTA & SÓBRIO)
   ========================================================================== */
.site-footer {
  border-top: 1px solid transparent;
  padding: 4rem 1rem 3rem;
  /* Destaque no tema claro: Pervinca escurecida (--accent-blue), a cor de
     destaque da própria página clara. Só existe no claro (styles-light). */
  background-color: var(--accent-blue);
}

@media (min-width: 640px) {
  .site-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .site-footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.footer-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer-main {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }
}

/* Tratamento Premium do Logo */
.footer-logo {
  height: 22px;
  width: auto;
  opacity: 0.85;
  /* Sobre o rodapé azul do tema claro: logo branca nativa (sem inverter) */
  filter: none;
  transition: all 0.4s ease;
}

@media (hover: hover) {
  .footer-logo:hover {
    opacity: 1;
    filter: none;
  }
}

.footer-address {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* Linha de Fechamento (Copyright & Links) */
.footer-meta {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (min-width: 768px) {
  .footer-meta {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-link {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .footer-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Foco por teclado precisa de contraste sobre o azul do rodapé */
.footer-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.footer-separator {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   AFINAMENTO VERTICAL DO FOOTER (08/2026)
   Redução sóbria do respiro vertical, sem mudar o layout.
   --------------------------------------------------------------------------- */
.site-footer {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.footer-content {
  gap: 2rem;
}

.footer-main {
  gap: 1.25rem;
}

.footer-meta {
  gap: 1rem;
  padding-top: 1.125rem;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .footer-logo, .footer-link {
    transition: none;
  }
}

/* FAB */
.fab-whatsapp {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid hsla(152, 55%, 38%, 0.5);
  background-color: hsla(0, 0%, 100%, 0.88);
  color: hsl(152, 60%, 30%);
  box-shadow: 0 8px 24px rgba(4, 11, 48, 0.18);
  backdrop-filter: blur(12px);
  transition: all 0.3s;
}

.fab-whatsapp:hover {
  transform: scale(1.05);
  color: hsl(152, 65%, 36%);
  box-shadow: 0 0 24px hsla(152, 55%, 40%, 0.3);
}

/* Animations */
.rkl-cue-chevron {
  animation: rkl-cue 2.4s ease-in-out infinite;
}

@keyframes rkl-cue {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }

  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

.rkl-caret {
  animation: rkl-blink 1.1s steps(2, jump-none) infinite;
  display: inline-block;
  height: 0.72em;
  width: 3px;
  transform: translateY(0.06em);
  border-radius: 9999px;
  background-color: hsl(252, 90%, 74%);
  margin-left: 2px;
}

@keyframes rkl-blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rkl-cue-chevron, .rkl-caret {
    animation: none;
  }
}

/* ==========================================================================
   QUEM SOMOS — REDESIGN 2026
   ========================================================================== */

/* Auréolas ambiente (decorativas) */
.quem-somos-section {
  position: relative;
}

.quem-somos-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 40% at 8% 8%, hsla(261, 100%, 50%, 0.12) 0%, transparent 62%),
    radial-gradient(30% 28% at 92% 90%, hsla(227, 58%, 72%, 0.1) 0%, transparent 60%);
}

/* Card principal: painel assimétrico com moldura */
.about-card {
  padding: 1rem;
  border-radius: 1.5rem;
  box-shadow: 0 28px 72px -24px rgba(4, 11, 48, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 640px) {
  .about-card {
    padding: 1.25rem;
    border-radius: 1.75rem;
  }
}

.about-card:hover {
  border-color: rgba(4, 11, 48, 0.16);
}

/* Imagem: enquadrada, com zoom lento no hover */
.about-image {
  overflow: hidden;
  border-radius: 1rem;
}

@media (min-width: 768px) {
  .about-image {
    min-height: 26rem;
  }
}

.about-image img {
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-card:hover .about-image img {
  transform: scale(1.04);
}


/* Conteúdo: hierarquia editorial */
.about-content {
  align-self: center;
}

/* Blocos com mini-ícone */
.about-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.about-block+.about-block {
  margin-top: 1.5rem;
}

.about-block-icon {
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.875rem;
}

.about-block .about-text {
  margin-top: 0.375rem;
  max-width: 52ch;
}

/* Faixa de pilares */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(4, 11, 48, 0.09);
}

@media (min-width: 640px) {
  .about-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.about-pillar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(4, 11, 48, 0.12);
  background: hsla(213, 58%, 92%, 0.55);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: hsl(222, 30%, 28%);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-pillar:hover {
  border-color: rgba(4, 11, 48, 0.28);
  background: hsla(213, 58%, 89%, 0.85);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.about-pillar-icon {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
  color: var(--accent-blue);
}


/* Reveal on scroll (acessível: sem JS ou reduced-motion mantém o conteúdo visível) */
.reveal-hidden .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-hidden .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-hidden .reveal, .reveal-hidden .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-height: 900px) and (min-width: 1200px) {
  .hero-content {
    /* Crava o tamanho máximo na exata metade do container para não invadir a logo */
    max-width: 45rem;
    padding: 3.5rem 3rem;
  }

  .hero-heading {
    /* Leve ajuste no teto da fonte para manter a quebra de linha harmoniosa na nova largura */
    font-size: clamp(3.5rem, 4.2vw, 4.75rem);
    margin-bottom: 1.5rem;
  }

  .hero-description {
    font-size: 1.375rem;
    max-width: 100%;
    /* Permite usar toda a largura disponível dos 45rem */
    margin-bottom: 2.5rem;
  }

  .hero-actions {
    gap: 1.5rem;
  }

  /* Aumenta também os botões para manter a hierarquia com o container gigante */
  .hero-actions .btn {
    height: 3.5rem;
    font-size: 1.125rem;
    padding: 0 2.5rem;
  }
}

/* ==========================================================================
   BEM-VINDO (WELCOME) - REDESIGN 2026
   Scoped to #conheca (welcome-* classes). No impact on other sections.
   ========================================================================== */
.welcome-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1rem, 4vw, 3rem);
}

/* --- Decoration: top hairline --- */
.welcome-hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, hsla(227, 58%, 45%, 0.55) 28%, transparent 82%);
  pointer-events: none;
}

/* --- Decoration: ambient aurora (slow drifting color glows) --- */
.welcome-aurora,
.welcome-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.welcome-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

.welcome-glow-a {
  width: 44rem;
  height: 44rem;
  left: -15rem;
  top: -17rem;
  /* Tema Light: auroras mais suaves p/ equivalência visual sobre fundo claro */
  background: radial-gradient(circle, hsla(261, 100%, 50%, 0.16), transparent 66%);
  animation: welcomeDriftA 16s ease-in-out infinite alternate;
}

.welcome-glow-b {
  width: 40rem;
  height: 40rem;
  right: -13rem;
  bottom: -15rem;
  background: radial-gradient(circle, hsla(227, 58%, 55%, 0.14), transparent 66%);
  animation: welcomeDriftB 20s ease-in-out infinite alternate;
}

.welcome-glow-c {
  width: 28rem;
  height: 28rem;
  left: 44%;
  top: 12%;
  background: radial-gradient(circle, hsla(227, 58%, 60%, 0.1), transparent 66%);
  opacity: 0.7;
  animation: welcomeDriftC 24s ease-in-out infinite alternate;
}

@keyframes welcomeDriftA {
  to {
    transform: translate3d(2.75rem, 2rem, 0) scale(1.08);
  }
}

@keyframes welcomeDriftB {
  to {
    transform: translate3d(-3rem, -1.75rem, 0) scale(1.12);
  }
}

@keyframes welcomeDriftC {
  to {
    transform: translate3d(-1.5rem, 2.5rem, 0) scale(0.94);
  }
}

/* --- Decoration: subtle technical grid --- */
.welcome-grid-bg {
  background-image:
    linear-gradient(to right, hsla(227, 58%, 40%, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(227, 58%, 40%, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(62% 72% at 50% 42%, #000 0%, transparent 100%);
  mask-image: radial-gradient(62% 72% at 50% 42%, #000 0%, transparent 100%);
}

/* --- Content --- */
.welcome-container {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0.5rem;
}

/* Title */
.welcome-title {
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-left: auto;
  margin-right: auto;
  max-width: 22ch;
}

/* Body text */
.welcome-lead,
.welcome-copy {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.welcome-lead {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 36rem;
  margin-top: 1.75rem;
}

.welcome-lead strong {
  color: hsl(227, 58%, 40%);
  font-weight: 600;
}

.welcome-copy {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 38rem;
  margin-top: 1rem;
}

.welcome-copy strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Ornamental divider */




/* Value chips */




/* ==========================================================================
   BEM-VINDO — Entrada cinematográfica (primeira exibição da seção)
   Coreografia em camadas disparada UMA única vez: um IntersectionObserver
   dedicado adiciona .is-revealed em #conheca quando o conteúdo entra na
   viewport. Oculto apenas quando <html> tem .reveal-hidden (JS ativo) —
   sem JS ou com prefers-reduced-motion o conteúdo fica visível.
   Timeline: hairline 0ms · aurora 100ms · grid 150ms · título 200ms ·
   lead 520ms · copy 660ms · shimmer 1.1s (total ~1.6s).
   ========================================================================== */

/* --- Estado inicial: palco apagado --- */
html.reveal-hidden #conheca .welcome-hairline {
  transform: scaleX(0);
}

html.reveal-hidden #conheca .welcome-aurora {
  opacity: 0;
  transform: scale(1.05);
}

html.reveal-hidden #conheca .welcome-grid-bg {
  opacity: 0;
}

html.reveal-hidden #conheca .welcome-title {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
}

html.reveal-hidden #conheca .welcome-lead,
html.reveal-hidden #conheca .welcome-copy {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(3px);
}

/* Shimmer único no gradiente do título: highlight que varre o texto após o
   "arrive". O layer base permanece intacto — visual final idêntico ao
   .text-gradient original (banda descansa fora da área visível). */
html.reveal-hidden #conheca .welcome-title .text-gradient {
  background-image: linear-gradient(115deg, transparent 44%, hsla(0, 0%, 100%, 0.4) 50%, transparent 56%), linear-gradient(to right, hsl(227, 58%, 45%), hsl(263, 85%, 42%));
  background-size: 260% 100%, 100% 100%;
  background-position: -20% 0, 0 0;
  background-repeat: no-repeat;
}

/* --- Estado final: coreografia em cascata --- */
html.reveal-hidden #conheca.is-revealed .welcome-hairline {
  transform: scaleX(1);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

html.reveal-hidden #conheca.is-revealed .welcome-aurora {
  opacity: 1;
  transform: scale(1);
  transition: opacity 2s cubic-bezier(0.33, 1, 0.68, 1) 0.1s, transform 2s cubic-bezier(0.33, 1, 0.68, 1) 0.1s;
}

html.reveal-hidden #conheca.is-revealed .welcome-grid-bg {
  opacity: 1;
  transition: opacity 1.6s cubic-bezier(0.33, 1, 0.68, 1) 0.15s;
}

html.reveal-hidden #conheca.is-revealed .welcome-title {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, filter 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

html.reveal-hidden #conheca.is-revealed .welcome-lead {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.52s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.52s, filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.52s;
}

html.reveal-hidden #conheca.is-revealed .welcome-copy {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.66s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.66s, filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.66s;
}

html.reveal-hidden #conheca.is-revealed .welcome-title .text-gradient {
  animation: welcomeShimmer 1.3s cubic-bezier(0.45, 0, 0.2, 1) 1.1s 1 both;
}

/* Varredura esquerda→direita (sentido de leitura): a banda entra pela
   esquerda e sai pela direita, sem tocar o estado final do gradiente. */
@keyframes welcomeShimmer {
  from {
    background-position: 120% 0, 0 0;
  }

  to {
    background-position: -20% 0, 0 0;
  }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .welcome-section {
    padding: 4.5rem 1.25rem;
  }

  .welcome-glow {
    filter: blur(48px);
    opacity: 0.55;
  }

  .welcome-glow-c {
    display: none;
  }
}

@media (max-width: 480px) {


  .welcome-lead {
    margin-top: 1.5rem;
  }
}

/* --- Accessibility: prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .welcome-glow {
    animation: none;
    opacity: 0.3;
  }

  /* Entrada cinematográfica: tudo visível e estático (seletores em par
     para vencer a especificidade dos estados .is-revealed) */
  html.reveal-hidden #conheca .welcome-hairline,
  html.reveal-hidden #conheca.is-revealed .welcome-hairline,
  html.reveal-hidden #conheca .welcome-aurora,
  html.reveal-hidden #conheca.is-revealed .welcome-aurora,
  html.reveal-hidden #conheca .welcome-grid-bg,
  html.reveal-hidden #conheca.is-revealed .welcome-grid-bg,
  html.reveal-hidden #conheca .welcome-title,
  html.reveal-hidden #conheca.is-revealed .welcome-title,
  html.reveal-hidden #conheca .welcome-lead,
  html.reveal-hidden #conheca.is-revealed .welcome-lead,
  html.reveal-hidden #conheca .welcome-copy,
  html.reveal-hidden #conheca.is-revealed .welcome-copy,
  html.reveal-hidden #conheca .welcome-title .text-gradient,
  html.reveal-hidden #conheca.is-revealed .welcome-title .text-gradient {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
}

/* ==========================================================================
   PILARES (MVV) - REDESIGN 2026
   Ledger editorial full-width escopado em #pilares (classes pillars-*).
   Substitui o antigo grid de 3 cards .mvv-* (regras removidas).
   ========================================================================== */
.pillars-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 6vw, 5.5rem) clamp(1rem, 4vw, 2rem);
  scroll-margin-top: 7rem;
}

/* --- Decoration: hairline superior em gradiente --- */
.pillars-hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, transparent, hsla(227, 58%, 45%, 0.55) 28%, transparent 82%);
  pointer-events: none;
}

/* --- Decoration: auroras ambiente (drift lento, transform-only) --- */
.pillars-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.pillars-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

.pillars-glow-a {
  width: 38rem;
  height: 38rem;
  left: -14rem;
  top: -16rem;
  background: radial-gradient(circle, hsla(261, 100%, 50%, 0.14), transparent 66%);
  animation: pillarsDriftA 18s ease-in-out infinite alternate;
}

.pillars-glow-b {
  width: 34rem;
  height: 34rem;
  right: -12rem;
  bottom: -14rem;
  background: radial-gradient(circle, hsla(227, 58%, 55%, 0.12), transparent 66%);
  animation: pillarsDriftB 22s ease-in-out infinite alternate;
}

@keyframes pillarsDriftA {
  to {
    transform: translate3d(2.5rem, 1.75rem, 0) scale(1.1);
  }
}

@keyframes pillarsDriftB {
  to {
    transform: translate3d(-2.5rem, -1.5rem, 0) scale(0.94);
  }
}

/* --- Content --- */
.pillars-container {
  position: relative;
  z-index: 1;
}

/* Cabeçalho split: copy à esquerda, contador editorial à direita */
.pillars-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.pillars-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-blue);
}

.pillars-eyebrow::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, hsl(261, 100%, 50%), transparent);
}

.pillars-title {
  margin-top: 1.125rem;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 18ch;
}

/* Grid horizontal de slabs — acento por pilar: Missão violeta, Visão azul, Valores verde */
.pillars-grid {
  display: grid;
  gap: 1.25rem;
}

/* Slot: item do grid e alvo do reveal. O card por dentro transiciona o
   hover de forma independente (não herda o transition-delay do reveal) */
.pillars-slot {
  display: flex;
}

.pillars-card {
  --pillar-accent: var(--accent-blue);
  --pillar-wash: hsla(227, 58%, 50%, 0.12);
  --pillar-glow: hsla(227, 58%, 50%, 0.45);
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.625rem 1.375rem 1.875rem;
  border-radius: 1.25rem;
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.85), hsla(213, 58%, 95%, 0.75));
  box-shadow: 0 16px 48px -16px rgba(4, 11, 48, 0.12);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillars-blue {
  --pillar-accent: var(--accent-blue);
  --pillar-wash: hsla(227, 58%, 50%, 0.12);
  --pillar-glow: hsla(227, 58%, 50%, 0.45);
}

.pillars-green {
  --pillar-accent: var(--accent-blue);
  --pillar-wash: hsla(227, 58%, 50%, 0.12);
  --pillar-glow: hsla(227, 58%, 50%, 0.45);
}

/* Topo do slab: índice à esquerda, ícone à direita */
.pillars-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pillars-index {
  font-family: var(--font-mono);
  font-size: clamp(1.625rem, 2vw, 1.875rem);
  font-weight: 700;
  line-height: 1;
  color: var(--pillar-accent);
  opacity: 0.55;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillars-icon {
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  border-radius: 0.875rem;
  color: var(--pillar-accent);
  background: var(--pillar-wash);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillars-icon svg {
  height: 22px;
  width: 22px;
  flex-shrink: 0;
}

.pillars-title-sm {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
}

.pillars-desc {
  margin-top: 0.625rem;
  font-size: clamp(0.9375rem, 1vw, 1rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Barra de acento na base: identidade permanente do pilar, completa no hover */
.pillars-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pillar-accent), transparent 88%);
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.6;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  pointer-events: none;
}

/* Slabs lado a lado a partir de 768px */
@media (min-width: 768px) {
  .pillars-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .pillars-card {
    padding: 1.75rem 1.625rem 2rem;
  }
}

/* Hover honesto: apenas realce (sem affordance de "abrir") */
@media (hover: hover) {
  .pillars-card:hover {
    transform: translateY(-4px);
    border-color: rgba(4, 11, 48, 0.18);
    box-shadow: 0 24px 56px -18px rgba(4, 11, 48, 0.16);
  }

  .pillars-card:hover .pillars-index {
    opacity: 1;
  }

  .pillars-card:hover .pillars-icon {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 12px 32px -12px var(--pillar-glow);
  }

  .pillars-card:hover .pillars-rail {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Mobile: auroras mais leves, header empilhado */
@media (max-width: 767px) {
  .pillars-glow {
    filter: blur(48px);
    opacity: 0.55;
  }

  .pillars-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* Reveal on scroll — mesmo mecanismo [data-reveal] do site
   (escondido só quando o JS adiciona .reveal-hidden ao <html>) */
html.reveal-hidden #pilares [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.reveal-hidden #pilares [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .pillars-glow {
    animation: none;
    opacity: 0.3;
  }

  html.reveal-hidden #pilares [data-reveal],
  html.reveal-hidden #pilares [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   MENU MOBILE (HAMBURGER)
   ========================================================================== */
.main-nav {
  position: relative;
}

.mobile-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid rgba(4, 11, 48, 0.12);
  border-radius: 1.5rem;
  background-color: hsla(213, 58%, 98%, 0.9);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 24px 48px -16px rgba(4, 11, 48, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Nunca exibe o painel no layout desktop */
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

.mobile-menu-link {
  display: flex;
  align-items: center;
  padding: 0.9rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0.85;
  transition: background-color 0.25s, opacity 0.25s, color 0.25s;
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  background-color: rgba(4, 11, 48, 0.06);
  opacity: 1;
}

.mobile-menu-link:focus-visible {
  outline: 2px solid #31008E;
  outline-offset: 2px;
}

.mobile-menu-divider {
  height: 1px;
  margin: 0.5rem 0.75rem;
  background: linear-gradient(to right, transparent, rgba(4, 11, 48, 0.14), transparent);
}

.mobile-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  margin-top: 0.5rem;
  flex-shrink: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  border: 1px solid rgba(4, 11, 48, 0.22);
  border-radius: 2rem;
  background: linear-gradient(135deg, hsla(227, 58%, 50%, 0.14), hsla(261, 100%, 45%, 0.14));
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-cta:hover,
.mobile-menu-cta:focus-visible {
  background: linear-gradient(135deg, hsl(261, 100%, 34%), hsl(261, 100%, 24%));
  border-color: transparent;
  box-shadow: 0 4px 15px hsla(261, 100%, 28%, 0.45);
  color: #fff;
}

.mobile-menu-cta:focus-visible {
  outline: 2px solid #31008E;
  outline-offset: 2px;
}

/* Alterna os ícones do botão (hamburger ⇄ X) */
.mobile-menu-toggle .icon-close {
  display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-burger {
  display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Acessibilidade: sem animações para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {

  .mobile-menu,
  .mobile-menu-link,
  .mobile-menu-cta {
    transition: none;
  }
}

/* ==========================================================================
   SELETOR DE IDIOMA (HEADER DESKTOP + MENU MOBILE)
   ========================================================================== */

/* --- Botão do seletor (visível apenas no layout desktop) --- */
.lang-switch {
  position: relative;
  display: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .lang-switch {
    display: block;
  }
}

.lang-switch-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.875rem;
  border-radius: 2rem;
  border: 1px solid rgba(4, 11, 48, 0.2);
  background-color: hsla(0, 0%, 100%, 0.5);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-switch-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.lang-switch-button:hover {
  background-color: rgba(4, 11, 48, 0.07);
  border-color: rgba(4, 11, 48, 0.35);
  color: var(--text-primary);
}

.lang-switch-button:focus-visible {
  outline: 2px solid #31008E;
  outline-offset: 2px;
}

.lang-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-switch-button[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

/* Faixa intermediária: aperta o espaçamento como no restante do header */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lang-switch-button {
    gap: 0.375rem;
    padding: 0 0.75rem;
  }
}

/* --- Dropdown de idiomas --- */
.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 70;
  /* Largura pelo conteúdo (o painel mostra só bandeiras): os 14rem existiam
     para caber o nome + o código de cada idioma, que agora estão em .sr-only */
  width: max-content;
  padding: 0.375rem;
  border: 1px solid rgba(4, 11, 48, 0.12);
  border-radius: 1rem;
  background-color: hsla(213, 58%, 98%, 0.92);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: 0 24px 48px -16px rgba(4, 11, 48, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem;
  border-radius: 0.625rem;
  color: var(--text-secondary);
  text-align: left;
  transition: background-color 0.25s, color 0.25s;
}

.lang-option:hover,
.lang-option:focus-visible {
  background-color: rgba(4, 11, 48, 0.06);
  color: var(--text-primary);
}

.lang-option:focus-visible {
  outline: 2px solid #31008E;
  outline-offset: 2px;
}

.lang-option.is-active {
  color: var(--text-primary);
}

.lang-option-check {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent-green);
}

.lang-option.is-active .lang-option-check {
  display: block;
}

/* --- Seletor segmentado dentro do menu mobile --- */
.mobile-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding: 0.25rem;
  border-radius: 2rem;
  border: 1px solid rgba(4, 11, 48, 0.12);
  background-color: hsla(213, 58%, 92%, 0.7);
}

.mobile-lang-option {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 2rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: background-color 0.25s, color 0.25s;
}

.mobile-lang-option:hover,
.mobile-lang-option:focus-visible {
  background-color: rgba(4, 11, 48, 0.06);
  color: var(--text-primary);
}

.mobile-lang-option:focus-visible {
  outline: 2px solid #31008E;
  outline-offset: 2px;
}

.mobile-lang-option.is-active {
  background: linear-gradient(135deg, hsla(227, 58%, 50%, 0.18), hsla(261, 100%, 45%, 0.18));
  color: var(--text-primary);
}

/* --- Bandeiras do seletor de idioma (o seletor mostra SÓ a bandeira; o nome
   do idioma continua no aria-label/title e no texto .sr-only das opções) --- */
.lang-switch-flag,
.lang-option-flag,
.mobile-lang-flag {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(4, 11, 48, 0.2);
}

.lang-switch-flag {
  width: 18px;
  height: 18px;
}

.lang-option-flag {
  width: 20px;
  height: 20px;
}

.mobile-lang-flag {
  width: 18px;
  height: 18px;
}

/* Bandeira do idioma ativo: anel de destaque (mesmo azul de acento do tema) */
.lang-option.is-active .lang-option-flag,
.mobile-lang-option.is-active .mobile-lang-flag {
  box-shadow: 0 0 0 2px var(--accent-blue);
}

/* Acessibilidade: sem animações para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {

  .lang-menu,
  .lang-chevron,
  .lang-switch-button,
  .lang-option,
  .mobile-lang-option {
    transition: none;
  }
}

/* ==========================================================================
   FONTES — CLASSES UTILITÁRIAS SANSATION
   ========================================================================== */
.sansation-light {
  font-family: 'Sansation', sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sansation-regular {
  font-family: 'Sansation', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sansation-bold {
  font-family: 'Sansation', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sansation-light-italic {
  font-family: 'Sansation', sans-serif;
  font-weight: 300;
  font-style: italic;
}

.sansation-regular-italic {
  font-family: 'Sansation', sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sansation-bold-italic {
  font-family: 'Sansation', sans-serif;
  font-weight: 700;
  font-style: italic;
}


.network-section {
  position: relative;
  isolation: isolate;
  /* Tema Light: profundidade suave — brilho pervinca central sobre o
     gradiente claro original (adaptação do novo tratamento do tema escuro) */
  background:
    radial-gradient(ellipse 72% 58% at 50% 42%, hsla(227, 72%, 84%, 0.35) 0%, transparent 72%),
    radial-gradient(circle at center, hsl(213, 58%, 98%) 0%, hsl(213, 58%, 93%) 100%);
  padding: 4rem 1rem;
  display: flex;
  flex-direction: column;
  /* Header acima do mapa */
  align-items: center;
  overflow: hidden;
}

/* Luzes de canto: lavandas pastéis sobre o fundo claro (com isolation +
   z-index -1, pintam acima do gradiente base e abaixo do conteúdo) */
.network-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 30% at 6% 6%, hsla(263, 85%, 90%, 0.55) 0%, transparent 72%),
    radial-gradient(40% 26% at 96% 12%, hsla(227, 72%, 88%, 0.45) 0%, transparent 72%),
    radial-gradient(44% 30% at 92% 92%, hsla(227, 65%, 89%, 0.4) 0%, transparent 72%),
    radial-gradient(36% 26% at 4% 88%, hsla(263, 75%, 92%, 0.35) 0%, transparent 72%);
  pointer-events: none;
}

.network-header {
  max-width: 46rem;
  /* Limita a largura do título para boa leitura */
}

/* ==========================================================================
   NÚMEROS / CONTADORES (faixa dentro da seção do mapa — #rede-global)
   ========================================================================== */
.stats-container {
  width: 100%;
  max-width: 1000px;
  /* alinha com a largura do .map-wrapper */
  margin-top: 2.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* No HTML o <dt> (label) precede o <dd> (valor) por semântica;
   as linhas fixas do grid garantem o valor sempre no topo (alinhado
   entre as colunas, mesmo quando um label quebra em duas linhas) */
.stats-item {
  display: grid;
  gap: 0.5rem;
  padding: 1.75rem 1.25rem;
  text-align: center;
}

.stats-item dd {
  grid-row: 1;
}

.stats-item dt {
  grid-row: 2;
}

/* Divisórias internas do container único (apenas no layout de 4 colunas) */
@media (min-width: 1024px) {
  .stats-item+.stats-item {
    border-left: 1px solid var(--card-border);
  }
}

.stats-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  /* evita "tremulação" durante a contagem */
}

.stats-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-wrap: balance;
  /* quebra longa em 2 linhas equilibradas */
}

/* --- Reveal on scroll (works with existing [data-reveal] JS) ---
   Hidden only when <html> has .reveal-hidden (JS active). Without JS or
   with prefers-reduced-motion the content stays visible. */
html.reveal-hidden .stats-container[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

html.reveal-hidden .stats-container[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Accessibility: prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {

  html.reveal-hidden .stats-container[data-reveal],
  html.reveal-hidden .stats-container[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 640px) {
  .network-section {
    padding: 4.5rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .network-section {
    padding: 5rem 2rem;
  }
}

.map-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 126 / 60;
  /* Mesma proporção do viewBox do world-dots.svg (elimina o letterbox) */
}

/* Halo de luz atrás do mapa (adaptação light do glow do tema escuro):
   pervinca bem suave, pintado antes do mapa pontilhado (::before é o
   primeiro filho), sem alterar estrutura ou tamanho */
.map-wrapper::before {
  content: "";
  position: absolute;
  inset: -16% -12%;
  z-index: 0;
  background: radial-gradient(
    52% 52% at 50% 48%,
    hsla(227, 85%, 78%, 0.3) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Fundo do mapa pontilhado - Adicione o link da sua imagem SVG/PNG aqui */
.dotted-map-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/mapa/world-dots.svg');
  background-size: 100% 100%;
  /* Mapeia 1:1 com o viewBox: % do wrapper = % do mapa */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.45;
  /* Tema Light: escurece os pontos cianos do SVG p/ visibilidade sobre fundo claro */
  filter: brightness(0.4) saturate(1.8);
}

.connections-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Caminhos (Linhas) SVG — sólidas, finas e com glow bem sutil (sem tracejado) */
.connection-path {
  fill: none;
  stroke: rgba(114, 137, 218, 0.55);
  /* pervinca, mais visível sobre fundo claro */
  stroke-width: 1.2;
  filter: drop-shadow(0 0 3px rgba(114, 137, 218, 0.4));
}

/* Transações (símbolo da moeda) pelas rotas (criadas/destruídas em runtime pelo JS).
   A opacidade no <g> vale para circle E text: bolinha e símbolo ficam
   levemente translúcidos (0.8) para se integrarem ao mapa sem perder a
   legibilidade do símbolo. A transition é o fade de entrada/saída que o JS
   dispara ao spawnar/remover cada transação. */
.route-traveler {
  opacity: 0.8;
  transition: opacity 0.3s linear;
}

/* O `font-size` abaixo é só o padrão de desktop: o JS define o tamanho no
   atributo inline (ROUTE_FONT), encolhendo a bolinha junto com o mapa em
   telas menores. */
.route-traveler text {
  font-family: 'Sansation', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  fill: #0a0812;
}

/* Acessibilidade: congela as animações CSS da seção para quem prefere
   movimento reduzido. As bolinhas viajantes (SMIL animateMotion/mpath) seguem
   SEMPRE ativas — NÃO pausar a timeline do SVG (svg.pauseAnimations()
   congelava as bolinhas e foi removido de propósito, fix v3.1). */
@media (prefers-reduced-motion: reduce) {

  .connection-path,
  .dot,
  .hub .pulse {
    animation: none;
  }
}

/* Marcadores (Nós) */
/* A âncora (top/left) é o CENTRO do marcador (dot/pulse), não do bloco: a
   legenda é posicionada de forma absoluta, sai do fluxo e não desloca a âncora
   (por isso os percentuais `top/left` das praças seguem válidos). */
.map-node {
  --marker-size: 20px;
  /* metade da altura do marcador, explícita por breakpoint: o centro da
     bolinha cai exatamente no top/left do nó (sem cálculo em runtime) */
  --marker-offset: 10px;
  --label-gap: 7px;
  /* Anel + brilho da bolinha (box-shadow). Ficam em variáveis porque encolhem
     junto com o marcador no mobile — bolinha pequena com halo grande fica sujo. */
  --ring-w: 2px;
  --ring-glow: 12px;
  --ring-halo: 6px;
  --hub-glow: 16px;
  --hub-ripple: 20px;
  position: absolute;
  transform: translate(-50%, calc(-1 * var(--marker-offset)));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* O hub usa um marcador maior (26px): a âncora acompanha o novo tamanho */
.map-node.hub {
  --marker-size: 26px;
  --marker-offset: 13px;
}

/* Bolinha-bandeira do destino: bandeira circular com anel pervinca (via
   box-shadow, para o layout ficar exatamente 20px) + anel luminoso pulsante */
.dot {
  display: block;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 var(--ring-w) #7289DA, 0 0 var(--ring-glow) rgba(114, 137, 218, 0.55);
  animation: pointPulse 2.8s ease-in-out infinite;
}

/* Pulso suave do anel (mesma pervinca da paleta light) */
@keyframes pointPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 var(--ring-w) #7289DA,
      0 0 var(--ring-glow) rgba(114, 137, 218, 0.55),
      0 0 var(--ring-halo) 1px rgba(190, 220, 255, 0.5);
  }

  50% {
    box-shadow:
      0 0 0 var(--ring-w) #7289DA,
      0 0 calc(var(--ring-glow) * 1.5) rgba(114, 137, 218, 0.75),
      0 0 calc(var(--ring-halo) * 2) 3px rgba(190, 220, 255, 0.7);
  }
}

/* Bolinha-bandeira do hub: bandeira circular com anel roxo (no keyframe) + pulso */
.hub .pulse {
  display: block;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  object-fit: cover;
  animation: pulseAnim 2s infinite;
}

@keyframes pulseAnim {
  0% {
    box-shadow: 0 0 0 var(--ring-w) #a87ffb, 0 0 var(--hub-glow) rgba(168, 127, 251, 0.6), 0 0 0 0 rgba(168, 127, 251, 0.7);
  }

  70% {
    box-shadow: 0 0 0 var(--ring-w) #a87ffb, 0 0 var(--hub-glow) rgba(168, 127, 251, 0.6), 0 0 0 var(--hub-ripple) rgba(168, 127, 251, 0);
  }

  100% {
    box-shadow: 0 0 0 var(--ring-w) #a87ffb, 0 0 var(--hub-glow) rgba(168, 127, 251, 0.6), 0 0 0 0 rgba(168, 127, 251, 0);
  }
}

/* Legenda: apenas texto (sem badge/fundo/contorno), com sombra sutil p/
   legibilidade. O JS (`layoutMapLabels`) decide se ela fica abaixo (padrão) ou
   acima da bolinha (.label-above), evitando sobreposição. */
.node-label {
  position: absolute;
  top: calc(100% + var(--label-gap));
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85);
}

/* Legenda acima da bolinha (aplicado pelo JS quando há bolinha vizinha abaixo) */
.map-node.label-above .node-label {
  top: auto;
  bottom: calc(100% + var(--label-gap));
}

/* Legenda SEMPRE abaixo da bolinha — posição fixa do nó da Suíça (Europa
   densa: o slot acima já é do "GBP" e o JS subiria o "CHF" por proximidade de
   Lisboa). Declarada DEPOIS de .label-above de propósito: mesma
   especificidade, então esta vence mesmo quando o JS aplica .label-above. */
.map-node.label-below .node-label {
  top: calc(100% + var(--label-gap));
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

.hub .node-label {
  color: hsl(263, 75%, 42%);
  font-weight: 700;
}

/* ==========================================================================
   TOOLTIP (card flutuante) das bolinhas-bandeira do mapa — TEMA CLARO
   Espelho do bloco do tema escuro com cores próprias do claro (vidro branco,
   sombra suave em azul-marinho, fio de luz pervinca). Mesma animação e mesmos
   tokens tipográficos.
   ========================================================================== */
.map-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  /* Acima das bolinhas (z-index 2) e das linhas SVG (z-index 1) */
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  border: 1px solid var(--card-border);
  background-color: hsla(213, 58%, 98%, 0.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 16px 36px -14px rgba(4, 11, 48, 0.2),
    0 0 0 1px hsla(227, 58%, 44%, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fio de luz no topo (mesma linguagem do .glass-card-top-glow) */
.map-tooltip::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(114, 137, 218, 0.45), transparent);
  pointer-events: none;
}

.map-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 1ª linha — código da moeda em destaque */
.map-tooltip-code {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* 2ª linha — conceito (CORE, LIQUIDITY...), em destaque */
.map-tooltip-concept {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-blue);
}

/* 3ª linha — descrição, discreta e menor */
.map-tooltip-desc {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* Acessibilidade: sem deslocamento para quem prefere movimento reduzido
   (mantém só um fade curto) */
@media (prefers-reduced-motion: reduce) {
  .map-tooltip {
    transform: none;
    transition: opacity 0.15s ease;
  }

  .map-tooltip.is-visible {
    transform: none;
  }
}

/* Mobile: bolinhas menores (mapa mais limpo, menos sobreposição) e legendas
   proporcionais — as legendas seguem visíveis em todas as larguras */
@media (max-width: 640px) {
  /* Mapa "full-bleed": ignora o padding lateral da .network-section (1rem de
     cada lado) para o mapa ocupar a largura toda — fica maior e as legendas
     europeias (GBP × CHF) ganham folga, já que marcadores/legendas são em px
     fixos e o mapa cresce também em altura (aspect-ratio). Só o mapa muda:
     header e stats mantêm a margem da seção. A margem negativa é exatamente
     igual ao padding, então não há overflow (a seção tem overflow: hidden). */
  .map-wrapper {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }

  .map-node {
    --marker-size: 15px;
    --marker-offset: 7.5px;
    --label-gap: 6px;
    /* bolinha menor ⇒ anel e brilho proporcionalmente menores */
    --ring-w: 1.5px;
    --ring-glow: 9px;
    --ring-halo: 4px;
    --hub-glow: 11px;
    --hub-ripple: 14px;
  }

  .map-node.hub {
    --marker-size: 19px;
    --marker-offset: 9.5px;
  }

  .node-label {
    font-size: 0.62rem;
  }
}

@media (max-width: 480px) {
  .map-node {
    --marker-size: 12px;
    --marker-offset: 6px;
    --label-gap: 6px;
    /* bolinha menor ⇒ anel e brilho proporcionalmente menores */
    --ring-w: 1px;
    --ring-glow: 7px;
    --ring-halo: 3px;
    --hub-glow: 8px;
    --hub-ripple: 11px;
  }

  .map-node.hub {
    --marker-size: 16px;
    --marker-offset: 8px;
  }

  .node-label {
    font-size: 0.40rem;
  }
}

/* ==========================================================================
   QUEM SOMOS — ajustes (compacto ~40% menor: cabe na tela, 768p incluída)
   Overrides escopados em .quem-somos-section (vencem as cópias duplicadas
   por especificidade). Mesma estrutura/proporção; tudo reduzido ~40%.
   ========================================================================== */
.quem-somos-section .container {
  max-width: min(88%, 1080px);
}

.quem-somos-section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.quem-somos-section .section-header {
  margin-bottom: 0.6rem;
}

.quem-somos-section .section-title {
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Imagem colada ao card no topo/esquerda/base — o overflow:hidden do
   .glass-card recorta os cantos com o raio da própria moldura.
   A altura do card é definida pela coluna de conteúdo (a imagem estica). */
@media (min-width: 768px) {
  .quem-somos-section .about-card {
    padding: 0;
  }

  .quem-somos-section .about-image {
    border-radius: 0;
    min-height: 11rem;
    /* piso — a altura real acompanha o conteúdo */
  }
}

.quem-somos-section .about-grid {
  gap: 0.9rem;
}

.quem-somos-section .about-content {
  padding: 0.875rem 1.125rem;
}

.quem-somos-section .section-title-sm {
  font-size: 0.875rem;
}

.quem-somos-section .about-text {
  font-size: 12px;
}

.quem-somos-section .about-block {
  gap: 0.5rem;
}

.quem-somos-section .about-block+.about-block {
  margin-top: 0.55rem;
}

.quem-somos-section .about-block-icon {
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 0.45rem;
}

.quem-somos-section .about-block-icon .icon-md {
  height: 13px;
  width: 13px;
}

.quem-somos-section .about-block .about-text {
  margin-top: 0.25rem;
}

.quem-somos-section .about-pillars {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  gap: 0.4rem;
}

.quem-somos-section .about-pillar {
  padding: 0.3rem 0.5rem;
  font-size: 10.5px;
}

.quem-somos-section .about-pillar-icon {
  height: 12px;
  width: 12px;
}

@media (min-height: 900px) and (min-width: 1200px) {

  /* =========================================
     BEM-VINDO - Ajuste de escala e respiro
     ========================================= */
  .welcome-section {
    display: flex;
    align-items: center;
    min-height: 90vh;
  }

  .welcome-container {
    width: 100%;
    max-width: 1200px;
  }

  .welcome-title {
    font-size: clamp(3.5rem, 5vw, 4.75rem);
    max-width: 26ch;
  }

  .welcome-lead {
    font-size: clamp(1.375rem, 1.8vw, 1.625rem);
    max-width: 44rem;
    margin-top: 2.25rem;
  }

  .welcome-copy {
    font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
    max-width: 48rem;
    margin-top: 1.25rem;
  }




  /* =========================================
     QUEM SOMOS - Restauração de escala natural
     ========================================= */
  .quem-somos-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90vh;
  }

  /* Sobrescreve as regras de redução de 40% para usar melhor as telas grandes */
  .quem-somos-section .container {
    max-width: min(90%, 1280px);
  }

  .quem-somos-section .section-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
  }

  .quem-somos-section .section-title-sm {
    font-size: 1.25rem;
  }

  .quem-somos-section .about-image {
    min-height: 32rem;
  }

  .quem-somos-section .about-grid {
    gap: 2rem;
  }

  .quem-somos-section .about-content {
    padding: 3rem;
  }

  .quem-somos-section .about-text {
    font-size: 15px;
    line-height: 1.65;
    margin-top: 0.75rem;
  }

  .quem-somos-section .about-block {
    gap: 1.25rem;
  }

  .quem-somos-section .about-block+.about-block {
    margin-top: 2rem;
  }

  .quem-somos-section .about-block-icon {
    height: 3rem;
    width: 3rem;
    border-radius: 0.875rem;
  }

  .quem-somos-section .about-block-icon .icon-md {
    height: 18px;
    width: 18px;
  }

  .quem-somos-section .about-pillars {
    margin-top: 2.5rem;
    padding-top: 2rem;
    gap: 0.875rem;
  }

  .quem-somos-section .about-pillar {
    padding: 0.875rem 1.25rem;
    font-size: 13.5px;
  }

  .quem-somos-section .about-pillar-icon {
    height: 18px;
    width: 18px;
  }

  /* =========================================
     PILARES - Escala ampliada
     ========================================= */
  .pillars-section .container {
    max-width: 76rem;
  }

  .pillars-title {
    font-size: clamp(2.75rem, 3.5vw, 4.25rem);
    max-width: 20ch;
  }

  .pillars-card {
    padding: 2.25rem 2rem 2.5rem;
  }

  .pillars-icon {
    height: 3.5rem;
    width: 3.5rem;
  }

  .pillars-icon svg {
    height: 26px;
    width: 26px;
  }

  .pillars-title-sm {
    font-size: 1.625rem;
  }

  .pillars-desc {
    font-size: 1.0625rem;
  }
}