:root {
  --blue: #1460b8;
  --blue-light: #2f7fe0;
  --dark: #050814;
  --text-main: #0f172a;
  --bb-header-height: 84px;
  --bb-dark-ratio: 0.4;
  --bb-vh: 100vh;
  --fluid-min-width: 320;
  --fluid-max-width: 1360;
  --fluid-progress: clamp(
    0,
    calc(
      (100vw - (var(--fluid-min-width) * 1px)) /
        ((var(--fluid-max-width) - var(--fluid-min-width)) * 1px)
    ),
    1
  );
  --fluid-font-scale-min: 0.95;
  --fluid-font-scale-max: 1;
  --fluid-font-scale: calc(
    var(--fluid-font-scale-min) +
      (var(--fluid-font-scale-max) - var(--fluid-font-scale-min)) *
        var(--fluid-progress)
  );
  --fluid-layout-scale-min: 0.9;
  --fluid-layout-scale-max: 1;
  --fluid-layout-scale: calc(
    var(--fluid-layout-scale-min) +
      (var(--fluid-layout-scale-max) - var(--fluid-layout-scale-min)) *
        var(--fluid-progress)
  );
  --fs-base-min: 0.86rem;
  --fs-base-max: 1rem;
  --fs-base: calc(
    (
      var(--fs-base-min) +
        (var(--fs-base-max) - var(--fs-base-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-kicker-min: 0.54rem;
  --fs-kicker-max: 0.8rem;
  --fs-kicker: calc(
    (
      var(--fs-kicker-min) +
        (var(--fs-kicker-max) - var(--fs-kicker-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-hero-title-min: 1.44rem;
  --fs-hero-title-max: 2.75rem;
  --fs-hero-title: calc(
    (
      var(--fs-hero-title-min) +
        (var(--fs-hero-title-max) - var(--fs-hero-title-min)) *
          var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-hero-body-min: 0.86rem;
  --fs-hero-body-max: 1.08rem;
  --fs-hero-body: calc(
    (
      var(--fs-hero-body-min) +
        (var(--fs-hero-body-max) - var(--fs-hero-body-min)) *
          var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-card-title-min: 1.26rem;
  --fs-card-title-max: 2.18rem;
  --fs-card-title: calc(
    (
      var(--fs-card-title-min) +
        (var(--fs-card-title-max) - var(--fs-card-title-min)) *
          var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-card-body-min: 0.84rem;
  --fs-card-body-max: 1.03rem;
  --fs-card-body: calc(
    (
      var(--fs-card-body-min) +
        (var(--fs-card-body-max) - var(--fs-card-body-min)) *
          var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-btn-min: 0.8rem;
  --fs-btn-max: 0.94rem;
  --fs-btn: calc(
    (
      var(--fs-btn-min) +
        (var(--fs-btn-max) - var(--fs-btn-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-nav-min: 0.76rem;
  --fs-nav-max: 0.9rem;
  --fs-nav: calc(
    (
      var(--fs-nav-min) +
        (var(--fs-nav-max) - var(--fs-nav-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-small-min: 0.64rem;
  --fs-small-max: 0.82rem;
  --fs-small: calc(
    (
      var(--fs-small-min) +
        (var(--fs-small-max) - var(--fs-small-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-section-title-min: 1.5rem;
  --fs-section-title-max: 2.08rem;
  --fs-section-title: calc(
    (
      var(--fs-section-title-min) +
        (var(--fs-section-title-max) - var(--fs-section-title-min)) *
          var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-section-lead-min: 0.84rem;
  --fs-section-lead-max: 1rem;
  --fs-section-lead: calc(
    (
      var(--fs-section-lead-min) +
        (var(--fs-section-lead-max) - var(--fs-section-lead-min)) *
          var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-heading-sm-min: 0.92rem;
  --fs-heading-sm-max: 1.07rem;
  --fs-heading-sm: calc(
    (
      var(--fs-heading-sm-min) +
        (var(--fs-heading-sm-max) - var(--fs-heading-sm-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-label-min: 0.62rem;
  --fs-label-max: 0.76rem;
  --fs-label: calc(
    (
      var(--fs-label-min) +
        (var(--fs-label-max) - var(--fs-label-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --fs-icon-min: 0.92rem;
  --fs-icon-max: 1.2rem;
  --fs-icon: calc(
    (
      var(--fs-icon-min) +
        (var(--fs-icon-max) - var(--fs-icon-min)) * var(--fluid-progress)
    ) * var(--fluid-font-scale)
  );
  --lh-body: 1.6;
  --lh-tight: 1.2;
  --measure: 62ch;
  --container-max: clamp(920px, 92vw, 1180px);
  --gutter: calc(clamp(0.82rem, 2.85vw, 1.28rem) * var(--fluid-layout-scale));
  --space-1: calc(clamp(0.28rem, 0.25rem + 0.15vw, 0.48rem) * var(--fluid-layout-scale));
  --space-2: calc(clamp(0.46rem, 0.41rem + 0.22vw, 0.7rem) * var(--fluid-layout-scale));
  --space-3: calc(clamp(0.64rem, 0.57rem + 0.3vw, 0.96rem) * var(--fluid-layout-scale));
  --space-4: calc(clamp(0.86rem, 0.75rem + 0.42vw, 1.24rem) * var(--fluid-layout-scale));
  --space-5: calc(clamp(1.05rem, 0.92rem + 0.55vw, 1.62rem) * var(--fluid-layout-scale));
  --space-6: calc(clamp(1.28rem, 1.06rem + 0.78vw, 2.08rem) * var(--fluid-layout-scale));
  --tap-min: 2.45rem;
  --btn-pad-y: calc(clamp(0.55rem, 0.45rem + 0.3vw, 0.75rem) * var(--fluid-layout-scale));
  --btn-pad-x: calc(clamp(1rem, 0.9rem + 0.6vw, 1.6rem) * var(--fluid-layout-scale));
  --hero-min-h: calc(clamp(12.5rem, calc(var(--bb-vh) * 0.29), 21rem) * var(--fluid-layout-scale));
  --carousel-card-min-h: calc(clamp(12.5rem, calc(var(--bb-vh) * 0.31), 23rem) * var(--fluid-layout-scale));
  --carousel-content-pad: calc(clamp(1.4rem, 1.1rem + 0.9vw, 2.4rem) * var(--fluid-layout-scale));
  --carousel-content-gap: calc(clamp(0.6rem, 0.45rem + 0.4vw, 0.9rem) * var(--fluid-layout-scale));
  --section-pad-y: calc(clamp(2.1rem, 4.4vw, 3.9rem) * var(--fluid-layout-scale));
  --section-pad-y-compact: calc(clamp(1.72rem, 3.05vw, 2.75rem) * var(--fluid-layout-scale));
  --panel-pad-y: calc(clamp(1rem, 2.1vw, 1.58rem) * var(--fluid-layout-scale));
  --panel-pad-x: calc(clamp(0.9rem, 2.1vw, 1.82rem) * var(--fluid-layout-scale));
}

@supports (height: 100svh) {
  :root {
    --bb-vh: 100svh;
  }
}

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

html {
  scroll-behavior: smooth;
  font-size: var(--fs-base);
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: var(--lh-body);
  color: var(--text-main);
  background: radial-gradient(circle at top, #f9fafb 0, #eef2ff 55%, #e5e7eb 100%);
  opacity: 1;
  transition: opacity 0.4s ease;
}

body.is-loading {
  overflow: hidden;
  pointer-events: none;
}

body.is-loading > *:not(.page-preloader) {
  opacity: 0;
  visibility: hidden;
}

.page-preloader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #05060b;
  color: #e2e8f0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

body.is-loading .page-preloader {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.page-preloader .spinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(226, 232, 240, 0.2);
  border-top-color: #38bdf8;
  animation: preloader-spin 0.9s linear infinite;
}

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

section[id] {
  scroll-margin-top: calc(var(--bb-header-height) + 24px);
}

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

/* Scrollbar minimalista (preto e branco) */

/* Navegadores webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f9fafb;
}

::-webkit-scrollbar-thumb {
  background: #111827;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #020617;
}

/* Firefox */
body {
  scrollbar-width: thin;
  scrollbar-color: #111827 #f9fafb;
}

/* HEADER */
.bb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #05060b;
  color: #f8fafc;
  box-shadow: 0 18px 32px rgba(3, 8, 20, 0.55);
  overflow: hidden;
  isolation: isolate;
}

.bb-header::before {
  content: "";
  position: absolute;
  inset: -60% 0;
  background: radial-gradient(
    circle at top left,
    rgba(59, 130, 246, 0.25),
    transparent 60%
  );
  opacity: 0.35;
  animation: header-glow 6s ease-in-out infinite;
}

.bb-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.bb-header-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
  min-height: clamp(64px, 8vh, 84px);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.bb-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}

.bb-brand-mark {
  width: clamp(72px, 10vw, 90px);
  height: clamp(34px, 5vw, 46px);
  border-radius: 14px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.bb-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.bb-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.bb-brand-title {
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: var(--fs-nav);
  text-transform: uppercase;
  color: #f8fafc;
}

.bb-brand-subtitle {
  font-size: var(--fs-small);
  color: #94a3b8;
}

.bb-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  font-size: var(--fs-nav);
  font-weight: 500;
}

.bb-nav a {
  text-decoration: none;
  color: #e2e8f0;
  position: relative;
  transition: color 0.2s ease;
}

.bb-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #2563eb);
  transition: width 0.2s ease;
}

.bb-nav a:hover {
  color: #ffffff;
}

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

.bb-nav a.active {
  color: #ffffff;
}

.bb-nav a.active::after {
  width: 100%;
}

.header-btn {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #f8fafc;
  border: 1px solid rgba(59, 130, 246, 0.6);
  box-shadow: none;
}

.header-btn .fa-whatsapp {
  margin-left: var(--space-1);
  margin-right: 0;
}

.header-btn:hover {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn.cssbuttons-io {
  position: relative;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--fs-btn);
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(59, 130, 246, 0.6);
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #f8fafc;
  overflow: hidden;
  padding: 0;
  min-height: var(--tap-min);
  box-shadow: none;
}

.btn.cssbuttons-io span {
  position: relative;
  z-index: 1;
  transition: color 0.4s;
  display: inline-flex;
  align-items: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  gap: 0.35em;
}

.btn.cssbuttons-io .fa-whatsapp {
  margin: 0;
}

.btn.cssbuttons-io::before,
.btn.cssbuttons-io::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.btn.cssbuttons-io::before {
  background: #ffffff;
  width: 120%;
  left: -10%;
  transform: translate3d(-120%, 0, 0) skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.btn.cssbuttons-io:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #1e40af;
  box-shadow: none;
}

.btn.cssbuttons-io:hover::before {
  transform: translate3d(0, 0, 0) skew(30deg);
}

.btn.cssbuttons-io.neon {
  transition: transform 0.15s ease, box-shadow 0.4s cubic-bezier(0.3, 1, 0.8, 1),
    background 0.15s ease;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.18), 0 0 20px rgba(59, 130, 246, 0.1);
}

.btn.cssbuttons-io.neon:hover {
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.45), 0 0 48px rgba(59, 130, 246, 0.28);
}

.btn.cssbuttons-io:active {
  transform: scale(0.95);
}

@keyframes header-glow {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (max-width: 900px) {
  .bb-header-inner {
    gap: var(--space-2);
    padding: calc(var(--space-2) - 0.1rem) var(--gutter);
  }

  .bb-brand-title {
    font-size: var(--fs-nav);
  }

  .bb-brand-subtitle {
    font-size: var(--fs-small);
  }

  .bb-nav {
    display: none;
  }

  .header-btn {
    font-size: var(--fs-btn);
    padding: var(--btn-pad-y) var(--btn-pad-x);
  }
}

/* BOTAO WHATSAPP FLUTUANTE */

.whatsapp-float {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-icon);
  box-shadow: 0 18px 40px rgba(22, 163, 74, 0.55);
  text-decoration: none;
  z-index: 60;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 24px 60px rgba(22, 163, 74, 0.7);
  background: linear-gradient(135deg, #16a34a, #15803d);
}

.whatsapp-float i {
  line-height: 1;
}

@media (max-width: 768px) {
  .whatsapp-float {
    right: 1rem;
    bottom: 1.1rem;
    width: 52px;
    height: 52px;
  }
}


/* 
 * ============================================================================
 * HERO SLIDES CONTAINER
 * ============================================================================
 * Container principal que une a seção hero primária (escura) e a seção de
 * carrossel (clara). Ocupa 100% da altura disponível (menos o header),
 * dividindo o espaço 50/50 entre as duas seções usando flexbox.
 */
.hero-slides-container {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--bb-vh) - var(--bb-header-height));
  height: auto;
  overflow: visible;
}

/* 
 * ============================================================================
 * HERO SECTION PRIMARY (Seção Escura)
 * ============================================================================
 * Primeira metade da hero com background escuro. Contém o conteúdo textual
 * (título, descrição, botões) e a imagem gráfica com badge sobreposto.
 */
.hero-section-primary {
  position: relative;
  background: #05060b;
  color: #f8fafc;
  padding-top: 0;
  z-index: 0;
  overflow: visible;
  isolation: isolate;
  flex: 1 1 50%;
  min-height: var(--hero-min-h);
  display: flex;
  align-items: center;
}

/* Wrapper interno que contém e organiza o conteúdo da hero em grid de 2 colunas */
.hero-section-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max); /* Mesma largura máxima do resto do site */
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); /* Texto: 43% | Imagem: 57% */
  align-items: center;
  justify-items: stretch;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-top: clamp(var(--space-3), calc(var(--bb-vh) * 0.08), var(--space-5));
  padding-bottom: clamp(var(--space-2), calc(var(--bb-vh) * 0.06), var(--space-4));
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Efeito de gradiente radial no background da seção hero primária */
.hero-section-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at top left,
      rgba(37, 99, 235, 0.25),
      transparent 60%
    ),
    radial-gradient(circle at 80% 30%, rgba(14, 165, 233, 0.2), transparent 55%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}




/* Container da imagem gráfica (lado direito da hero) */
.hero-graphic-container {
  position: relative;
  --hero-graphic-scale: 1; /* Variável para controle de escala (útil em responsivo) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: clamp(200px, calc(var(--bb-vh) * 0.3), 420px);
  height: auto;
  padding: 0;
  overflow: visible;
}

/* Imagem gráfica principal da hero (logo/ilustração) */
.hero-graphic-image {
  object-fit: contain;
  object-position: center;
  display: block;
  width: 100%;
  height: auto;
  max-width: 92%;
  max-height: 100%;
  margin: 0 auto;
  padding: 0;
  transform-origin: 50% 50%;
  animation: hero-graphic-float 4.2s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
  flex: 1 1 auto;
}

.hero-graphic-text {
  object-fit: contain;
  object-position: center top;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: clamp(-18px, -2vw, -10px) 0 0;
  pointer-events: none;
}

@keyframes hero-graphic-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.95) rotate(-0.12deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) scale(0.95) rotate(0.12deg);
  }
}

/* Container do conteúdo textual (lado esquerdo da hero) */
.hero-content-text {
  position: relative;
  z-index: 1;
  max-width: min(var(--measure), 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: center;
  justify-self: start;
}

/* Label superior pequeno (kicker) acima do título principal */
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-kicker);
  color: #93c5fd;
  font-weight: 600;
}

/* Título principal da hero */
.hero-section-primary h1 {
  margin: 0;
  font-size: var(--fs-hero-title);
  line-height: var(--lh-tight);
  color: #ffffff;
}

/* Parágrafo de descrição da hero */
.hero-section-primary p {
  margin: 0;
  color: #cbd5f5;
  font-size: var(--fs-hero-body);
  line-height: var(--lh-body);
}

/* Container dos botões de ação da hero */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0;
}

/* Botão primário da hero (azul com gradiente) */
.hero-btn-primary {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #f8fafc;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.6);
  box-shadow: none;
  font-weight: 600;
}

.hero-btn-primary:hover {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  box-shadow: none;
  transform: translateY(-1px);
}

/* Botão secundário da hero (transparente com borda) */
.hero-btn-secondary {
  background: transparent;
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: none;
  font-weight: 600;
}

.hero-btn-secondary:hover {
  background: rgba(148, 163, 184, 0.15);
  transform: translateY(-1px);
}

/* ============================================================================
   RESPONSIVO - HERO SECTION PRIMARY
   ============================================================================ */

@media (max-width: 900px) {
  /* Em tablets e menores, empilha conteúdo verticalmente */
  .hero-section-wrapper {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* Ajusta altura do container gráfico em telas menores */
  .hero-graphic-container {
    min-height: clamp(200px, calc(var(--bb-vh) * 0.32), 360px);
    height: auto;
    --hero-graphic-scale: 1;
    padding: 0;
  }

}

@media (max-width: 768px) {
  /* Em mobile, permite scroll vertical normal */
  .hero-slides-container {
    flex-direction: column;
    min-height: calc(var(--bb-vh) - var(--bb-header-height));
    height: auto;
  }

  /* Ajustes da seção hero primária em mobile */
  .hero-section-primary {
    padding-top: 0;
    flex: 1 1 50%;
    min-height: auto;
  }

  .hero-section-wrapper {
    min-height: auto;
    padding: var(--space-4) var(--gutter) var(--space-5);
  }

  /* Ajustes da seção de carrossel em mobile */
  .hero-carousel-section {
    flex: 1 1 50%;
    min-height: auto;
  }

  .mini-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .mini-hero-media {
    min-height: clamp(200px, 55vw, 320px);
    overflow: hidden;
    padding: 0;
  }

  .mini-hero-logo {
    height: auto;
    width: 100%;
  }
}

/* BOTÕES */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  border: none;
  font-size: var(--fs-btn);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: var(--tap-min);
}

.btn.primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: #f9fafb;
  box-shadow: 0 0 26px rgba(37, 99, 235, 0.55);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(37, 99, 235, 0.78);
}

/* 
 * ============================================================================
 * HERO CAROUSEL SECTION (Seção Clara com Carrossel)
 * ============================================================================
 * Segunda metade da hero com background claro, contendo carrossel horizontal
 * de cards com soluções. Ocupa 50% da altura do container pai.
 */
.hero-carousel-section {
  position: relative;
  isolation: isolate;
  padding: 0;
  flex: 1 1 50%;
  /* Nunca fica menor que o próprio carrossel (card + padding), evitando corte de conteúdo */
  min-height: calc(var(--carousel-card-min-h) + (2 * var(--carousel-viewport-pad-y, 0px)));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tokens do carrossel (mantém visual, centraliza configuração) */
  --carousel-duration: 600ms;
  --carousel-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Espaçamento entre slides (para não “encostar” e evitar sensação de corte) */
  --carousel-slide-gap: clamp(28px, 3.6vw, 56px);
  /* Sombras mais “seguras” para não serem cortadas pelo viewport do carrossel */
  --carousel-card-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
  --carousel-card-shadow-active: 0 20px 52px rgba(37, 99, 235, 0.18);
  --carousel-card-overlap: clamp(14px, 3.6vw, 36px); /* Sobreposição do conteúdo sobre a mídia */
  /* Padding do viewport do carrossel (usado também no cálculo de min-height acima) */
  --carousel-viewport-pad-y: clamp(10px, calc(var(--bb-vh) * 0.028), 28px);
  --carousel-viewport-pad-x: clamp(10px, 2.4vw, 28px);
  background: #ffffff;
  scroll-margin-top: calc(var(--bb-header-height) + 24px);
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Fundo full-bleed (100vw) atrás do carrossel: evita “corte” lateral quando o conteúdo
   interno está dentro de `.container` com max-width. */
.hero-carousel-section::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 0;
  pointer-events: none;
}

.hero-carousel-section > * {
  position: relative;
  z-index: 1;
}

/* Container interno do carrossel com largura máxima limitada */
.hero-carousel-section .container {
  width: 100%;
  /* O carrossel (conteúdo) segue a largura padrão do site */
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: auto;
  display: flex;
  align-items: center;
  background: transparent;
}

/* ============================================
  CARROSSEL (Hero - 2ª metade)
  - Estrutura BEM: .carousel, .carousel__track, .carousel__nav
  - 1 slide por vez (sem previews nas laterais)
  ============================================ */

.carousel {
  position: relative;
  /* Viewport do slide: recorta os cards fora de tela (sem “previews” laterais) */
  overflow: hidden;
  /* Respiro para evitar “corte” visual do card ativo (sombra/borda) */
  padding: var(--carousel-viewport-pad-y) var(--carousel-viewport-pad-x);
  background: transparent;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__track {
  /* Offset do slide controlado pelo JS via CSS var (ex.: 0%, -100%, -200%...) */
  --slide-offset: 0px;
  display: flex;
  align-items: stretch;
  /* Slide 1-por-vez: cada card ocupa 100% e a navegação é por translateX em px (JS) */
  gap: var(--carousel-slide-gap);
  width: 100%;
  min-width: 0;
  will-change: transform;
  transform: translate3d(var(--slide-offset), 0, 0);
  transition: transform var(--carousel-duration) var(--carousel-ease);
}

/* Snap invisível (usado só ao sair/entrar em clones no loop infinito) */
.carousel__track.is-snapping {
  transition: none !important;
}

/* Nota: não desligamos a transição do carrossel em reduce-motion, porque aqui
   isso vira "troca instantânea" e piora a UX do slide. Em vez disso, encurtamos. */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-section {
    --carousel-duration: 420ms;
    --carousel-ease: linear;
  }
}

/* ============================================
   CARROSSEL - CARDS (estado base/ativo)
   ============================================ */
.carousel-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "media content";
  align-items: stretch;
  /* Um card por vez: o card ativo ocupa toda a largura disponível do carrossel */
  width: 100%;
  max-width: 100%;
  min-height: var(--carousel-card-min-h);
  height: auto;
  background: #ffffff;
  border-radius: 1.6rem;
  border: 1px solid rgba(226, 232, 240, 0.9);
  overflow: hidden;
  box-shadow: var(--carousel-card-shadow);
  /* Agora o “sem preview” é garantido pelo overflow do .carousel.
     Mantemos todos no fluxo para o slide ser fluido e simples. */
  opacity: 1;
  visibility: visible;
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 180ms ease;
  transform: translate3d(0, 0, 0);
}

.carousel-card.is-active {
  pointer-events: auto;
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: var(--carousel-card-shadow-active);
}

/* Inativos: evita interação e foco acidental em elementos fora de tela */
.carousel-card[aria-hidden="true"] {
  pointer-events: none;
}

/* Transição sem animação extra: apenas o track se move (JS). */

/* ============================================
   CARROSSEL - BOTÕES DE NAVEGAÇÃO
   ============================================ */

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(226, 232, 240, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: rgba(248, 250, 252, 0.92);
  box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  opacity: 0;
  pointer-events: none;
}

.carousel__nav:hover {
  background: rgba(2, 6, 23, 0.72);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 18px 44px rgba(2, 6, 23, 0.35);
}

.carousel__nav:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel__nav:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.55);
  outline-offset: 2px;
}

/* Mostra as setas apenas no hover/foco do carrossel */
.carousel:hover .carousel__nav,
.carousel__nav:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Em dispositivos touch (sem hover), mantém setas visíveis */
@media (hover: none) {
  .carousel .carousel__nav {
    opacity: 1;
    pointer-events: auto;
  }
}

.carousel__nav--prev {
  left: clamp(1rem, 3vw, 2rem);
}

.carousel__nav--next {
  right: clamp(1rem, 3vw, 2rem);
}

/* Efeito de elevação quando hover
   - Mantém o destaque mesmo quando o mouse está sobre as setas (que ficam por cima do card) */
.carousel-card:hover,
.carousel:hover .carousel-card.is-active {
  position: relative;
  z-index: 10;
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.16),
    0 18px 40px rgba(15, 23, 42, 0.08);
  /* Evita “corte” nas bordas do viewport (overflow:hidden) */
  transform: translateY(-4px);
}

/* Desabilita interação em cards clonados (para animação infinita) */
.carousel-card[data-clone="true"][aria-hidden="true"] a,
.carousel-card[data-clone="true"][aria-hidden="true"] button,
.carousel-card[data-clone="true"][aria-hidden="true"] input,
.carousel-card[data-clone="true"][aria-hidden="true"] select,
.carousel-card[data-clone="true"][aria-hidden="true"] textarea {
  pointer-events: none;
}

/* Área de conteúdo textual do card (lado direito) */
.carousel-card-content {
  grid-area: content;
  padding: var(--carousel-content-pad);
  display: flex;
  flex-direction: column;
  gap: var(--carousel-content-gap);
  height: 100%;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0 1.25rem 1.25rem 0;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
  width: 100%;
  justify-self: end;
  position: relative;
  z-index: 2;
  margin-left: calc(-1 * var(--carousel-card-overlap)); /* Sobreposição sobre a mídia */
}

/* Label pequeno acima do título (kicker) */
.carousel-card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-small);
  color: #6b7280;
  font-weight: 600;
}

/* Títulos dos cards do carrossel */
.carousel-card h1,
.carousel-card h2 {
  margin: 0;
  font-size: var(--fs-card-title);
  line-height: var(--lh-tight);
  color: #111827;
}

/* Span destacado dentro dos títulos */
.carousel-card h1 span,
.carousel-card h2 span {
  color: var(--blue-light);
}

/* Parágrafos descritivos dos cards */
.carousel-card-lead {
  margin: 0;
  color: #4b5563;
  font-size: var(--fs-card-body);
  line-height: var(--lh-body);
}

/* Container dos botões de ação do card */
.carousel-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

/* Botão primário dos cards do carrossel */
.btn.carousel-btn-primary {
  background: #0b0f1a;
  color: #ffffff;
  border-radius: 0.85rem;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
}

.btn.carousel-btn-primary:hover {
  background: #020617;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.32);
}

/* Botão secundário dos cards do carrossel */
.btn.carousel-btn-secondary {
  background: #f8fafc;
  color: #111827;
  border: 1px solid #cbd5f5;
  border-radius: 0.85rem;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.btn.carousel-btn-secondary:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* Área de mídia do card (imagem, lado esquerdo) */
.carousel-card-media {
  grid-area: media;
  position: relative;
  height: 100%;
  background: #0f172a;
  overflow: hidden;
}

/* Imagem dentro do card do carrossel */
.carousel-card-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #0f172a;
}

/* ============================================================================
   RESPONSIVO - HERO CAROUSEL SECTION
   ============================================================================ */

@media (max-width: 768px) {
  /* Ajustes gerais da seção de carrossel em mobile */
  .hero-carousel-section {
    min-height: auto;
    padding: 0;
    --carousel-card-min-h: 0px;
    --carousel-card-overlap: 0px;
    --carousel-slide-gap: 20px;
    --carousel-viewport-pad-y: clamp(10px, calc(var(--bb-vh) * 0.028), 22px);
    --carousel-viewport-pad-x: clamp(10px, 3vw, 40px);
  }

  .hero-carousel-section .container {
    padding-top: var(--carousel-viewport-pad-y);
    padding-bottom: var(--carousel-viewport-pad-y);
  }

  /* Carrossel (mobile) */
  .carousel {
    min-height: auto;
    padding: var(--carousel-viewport-pad-y) var(--carousel-viewport-pad-x);
  }

  /* Cards empilham verticalmente em mobile (mídia em cima, conteúdo embaixo) */
  .carousel-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "content";
  }

  .carousel-card-content {
    padding: var(--carousel-content-pad);
    width: 100%;
    margin: 0;
    border-radius: 0 1rem 1rem 0;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  }

  .carousel-card-actions {
    width: 100%;
  }

  .carousel-card-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .carousel-card-media {
    min-height: clamp(180px, 45vmin, 320px);
    height: auto;
  }

  /* Em mobile seguimos o mesmo modelo: todos os slides no fluxo, recortados pelo viewport do .carousel */
}

/* LAYOUT GERAL */

main {
  background: transparent;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.bb-surface--soft {
  position: relative;
  background: #05060b;
  color: #f8fafc;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--bb-surface-pad);
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --bb-surface-pad: clamp(2.6rem, 5vw, 3.6rem);
  --bb-card-bg: rgba(15, 23, 42, 0.55);
  --bb-card-border: rgba(148, 163, 184, 0.18);
  --bb-card-shadow: 0 22px 60px rgba(2, 6, 23, 0.55);
  --bb-card-shadow-hover: 0 30px 80px rgba(2, 6, 23, 0.7);
}

.bb-surface--soft::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at top left,
      rgba(37, 99, 235, 0.25),
      transparent 60%
    ),
    radial-gradient(circle at 80% 30%, rgba(14, 165, 233, 0.2), transparent 55%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.bb-surface--soft > * {
  position: relative;
  z-index: 1;
}

.bb-surface--soft .section-header {
  margin: 0 auto var(--space-6);
  max-width: min(760px, 100%);
  padding: 0 var(--space-1);
}

.bb-surface--soft .section-header h2 {
  font-size: var(--fs-section-title);
  letter-spacing: -0.02em;
  color: #f8fafc;
}

.bb-surface--soft .section-header p {
  max-width: 56ch;
  margin: var(--space-1) auto 0;
  color: #cbd5f5;
}

.bb-surface--soft .solutions,
.bb-surface--soft .process {
  background: transparent;
}

.section-header {
  text-align: center;
  margin: var(--space-6) auto var(--space-5);
  max-width: min(640px, 100%);
}

.section-header h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-section-title);
  color: #0f172a;
}

.section-header p {
  margin: 0;
  color: #6b7280;
  font-size: var(--fs-section-lead);
}

/* SOLUÇÕES */


/* SOLUÇÕES – REFINO VISUAL */

.solutions {
  position: relative;
  padding: 0 0 var(--space-5);
  background: transparent;
}

.solutions::before,
.solutions::after {
  content: none;
}

.solutions-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
  margin-top: var(--space-5);
}

.solutions-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.solutions-tabs::before {
  content: none;
}

.solutions-tab {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--bb-card-border);
  background: var(--bb-card-bg);
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  cursor: pointer;
  color: #e2e8f0;
  box-shadow: none;
  transition: transform 0.15s ease, border-color 0.18s ease,
    background 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
  justify-content: flex-start;
  width: 100%;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.solutions-tab::before {
  content: none;
}

.solutions-tab .tab-icon {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.55);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
  flex-shrink: 0;
}

.solutions-tab span:last-child {
  font-weight: 600;
}

.solutions-tab:hover {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(30, 41, 59, 0.55);
  transform: translateY(-1px);
}

.solutions-tab:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 3px;
}

.solutions-tab.active {
  border-color: rgba(59, 130, 246, 0.55);
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.24),
    rgba(56, 189, 248, 0.12)
  );
  box-shadow: 0 18px 48px rgba(37, 99, 235, 0.18);
  transform: translateY(-1px);
}

.solutions-tab.active .tab-icon {
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

.solutions-panels {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.solution-panel {
  display: none;
  position: relative;
  border-radius: 1.6rem;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.65),
    rgba(2, 6, 23, 0.45)
  );
  border: 1px solid var(--bb-card-border);
  box-shadow: var(--bb-card-shadow);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  overflow: hidden;
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.solution-panel.active {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  align-content: start;
  animation: solution-panel-in 0.24s ease-out;
}

.solution-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--bb-card-shadow-hover);
}

.solution-panel::before,
.solution-panel::after {
  content: none;
}

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

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

.solution-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.solution-content {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: var(--space-5);
  align-items: start;
}

.solution-content > div:first-child {
  padding-right: calc(var(--space-1) - 0.15rem);
}

@media (min-width: 769px) {
  .solution-panel--terrestre .solution-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-panel--terrestre .solution-content > div:first-child {
    padding-right: 0;
  }

  .solution-panel--terrestre .check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .solution-panel--terrestre .solution-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 44rem);
    justify-self: center;
  }

  .solution-panel--armazenagem .solution-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-panel--armazenagem .solution-content > div:first-child {
    padding-right: 0;
  }

  .solution-panel--armazenagem .check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .solution-panel--armazenagem .solution-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 44rem);
    justify-self: center;
  }

  .solution-panel--maritimo .solution-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-panel--maritimo .solution-content > div:first-child {
    padding-right: 0;
  }

  .solution-panel--maritimo .check-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .solution-panel--maritimo .solution-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 44rem);
    justify-self: center;
  }
}

.bb-surface--soft .solution-heading h3 {
  color: #f8fafc;
}

.bb-surface--soft .solution-heading p {
  color: #cbd5f5;
}

.bb-surface--soft .solution-content h4 {
  color: #94a3b8;
}

/* SOLUÇÕES - POLIMENTO (DARK) */
.bb-surface--soft .solution-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bb-surface--soft .solution-heading h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  letter-spacing: -0.01em;
}

.bb-surface--soft .solution-heading p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
  max-width: 76ch;
}

.bb-surface--soft .solution-content h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.bb-surface--soft .check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.bb-surface--soft .check-list li {
  color: #e2e8f0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.55;
}

.bb-surface--soft .check-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.bb-surface--soft .check-icon::before {
  content: "✓";
  color: #34d399;
  font-weight: 800;
  font-size: var(--fs-small);
}

.bb-surface--soft .solution-meta {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.bb-surface--soft .meta-item {
  padding: var(--space-3) var(--space-4);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid var(--bb-card-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bb-surface--soft .meta-label {
  color: #94a3b8;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bb-surface--soft .meta-value {
  color: #f8fafc;
  font-weight: 600;
}

@media (min-width: 769px) {
  .solutions-panels {
    display: flex;
    align-items: stretch;
  }

  .solution-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .solution-main {
    flex: 1;
    min-height: 0;
  }

  .solution-content {
    flex: 1;
    min-height: 0;
    align-content: center;
    align-items: stretch;
  }

  .bb-surface--soft .solution-meta {
    align-content: center;
  }
}

/* PROCESSO LOGÍSTICO */

.process {
  padding: var(--space-1) 0 0;
  margin-top: 0;
  background: transparent;
}

.process-inner {
  position: relative;
}

.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.6rem);
  grid-auto-rows: 1fr;
  align-items: stretch;
  margin-top: var(--space-3);
}

.process-step {
  position: relative;
  border-radius: 1.5rem;
  background: var(--bb-card-bg);
  border: 1px solid var(--bb-card-border);
  padding: var(--space-5);
  box-shadow: var(--bb-card-shadow);
  text-align: left;
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.process-step:hover {
  transform: translateY(-4px);
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: var(--bb-card-shadow-hover);
}

.process-step-hero {
  position: absolute;
  top: 1.9rem;
  right: 1.7rem;
  width: 32px;
  height: 32px;
  margin: 0;
  pointer-events: none;
}

.process-step-badge {
  position: static;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-label);
  font-weight: 700;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.35);
  border: 1px solid rgba(147, 197, 253, 0.35);
}

.process-step h3 {
  margin: 0 0 var(--space-2);
  padding-right: var(--space-6);
  font-size: var(--fs-heading-sm);
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.process-step p {
  margin: 0 0 var(--space-3);
  color: #cbd5f5;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.process-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-base);
  color: #e2e8f0;
}

/* Alinhamento e ícone dos bullets */
.process-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.process-list li::before {
  content: "✓";
  color: #34d399;
  font-weight: 800;
  flex-shrink: 0;
}

/* Fixes de ícones (evita problemas de encoding) */
/* CONTATO */

.contact {
  padding: var(--section-pad-y) 0;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  inset: -20% 45% -10% -15%;
  background: radial-gradient(
    circle at top left,
    rgba(37, 99, 235, 0.12),
    transparent 60%
  );
  pointer-events: none;
}

.contact::after {
  content: "";
  position: absolute;
  inset: auto -10% -20% 30%;
  height: 55%;
  background: radial-gradient(
    circle at bottom,
    rgba(56, 189, 248, 0.14),
    transparent 62%
  );
  pointer-events: none;
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  align-items: stretch;
}

.contact-copy {
  max-width: min(560px, 100%);
  background: linear-gradient(160deg, #0b1224 0%, #111827 60%, #0b1220 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 1.6rem;
  padding: var(--panel-pad-y) var(--panel-pad-x);
  box-shadow: 0 26px 60px rgba(2, 6, 23, 0.45);
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.contact-copy::before {
  content: "";
  position: absolute;
  inset: -35% 45% -10% -15%;
  background: radial-gradient(
    circle at top left,
    rgba(37, 99, 235, 0.35),
    transparent 60%
  );
  opacity: 0.7;
  pointer-events: none;
}

.contact-copy::after {
  content: "";
  position: absolute;
  inset: auto -30% -55% 35%;
  height: 60%;
  background: radial-gradient(
    circle at bottom right,
    rgba(14, 165, 233, 0.25),
    transparent 65%
  );
  pointer-events: none;
}

.contact-copy > * {
  position: relative;
  z-index: 1;
}

.contact-copy h2 {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.8rem, 2.6vw, 2.35rem);
  line-height: 1.2;
  color: #f8fafc;
}

.contact-copy h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: var(--space-2);
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.contact-copy p {
  margin: 0 0 var(--space-4);
  color: #cbd5f5;
  line-height: 1.6;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #e2e8f0;
  font-size: var(--fs-base);
}

.contact-list li {
  position: relative;
  padding-left: var(--space-5);
  line-height: 1.55;
}

.contact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-2);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.contact-list li + li {
  margin-top: var(--space-2);
}

.contact-form {
  background: #ffffff;
  border-radius: 1.6rem;
  padding: var(--panel-pad-y) var(--panel-pad-x);
  border: 1px solid #e2e8f0;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  /* Precisa permitir que o dropdown do `.bb-select` expanda sem ser cortado */
  overflow: visible;
}

.contact-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-heading-sm);
  color: #0f172a;
}

.contact-form-subtitle {
  margin: 0 0 var(--space-4);
  color: #64748b;
  font-size: var(--fs-base);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.form-field label {
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.form-field input,
.form-field select,
.form-field textarea {
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: #111827;
  background: #f8fafc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* ============================================================================
   CUSTOM SELECT (bb-select)
   - Corrige o “select bugado” no formulário: não mostra o select nativo nem as opções abertas sempre.
   - JS controla a classe `.is-open` e os estados aria.
   ============================================================================ */

.bb-select[data-select] {
  position: relative;
}

/* Mantém o select nativo apenas para envio/validação do form (não aparece na UI). */
.bb-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  pointer-events: none;
}

.bb-select-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  cursor: pointer;
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: #111827;
  background: #f8fafc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bb-select-trigger:hover {
  background: #ffffff;
}

.bb-select-trigger:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.bb-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-select-icon {
  width: 10px;
  height: 10px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: -2px;
}

.bb-select.is-open .bb-select-icon {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.bb-select-options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: min(260px, 40vh);
  overflow: auto;

  /* Fechado por padrão */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

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

.bb-select-option {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #0f172a;
  font: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 0.85rem;
  padding: var(--space-2) var(--space-3);
}

.bb-select-option:hover {
  background: #f1f5f9;
}

.bb-select-option[aria-selected="true"],
.bb-select-option.is-selected {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
}

.bb-select-option.is-placeholder {
  color: #64748b;
}

.bb-select.is-invalid .bb-select-trigger {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.contact-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: auto;
}

.contact-cta-note {
  color: #cbd5f5;
  font-size: var(--fs-base);
  text-align: center;
}

.contact-submit {
  margin-top: var(--space-2);
  width: 100%;
}

.contact-whatsapp {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  border: 1px solid rgba(22, 163, 74, 0.4);
  box-shadow: none;
  width: 100%;
  justify-content: center;
}

.contact-whatsapp:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: none;
  transform: translateY(-1px);
}


.contact-submit.cssbuttons-io {
  box-shadow: none;
}

.contact-submit.cssbuttons-io:hover {
  color: #1e3a8a;
  box-shadow: none;
}

.contact-submit.cssbuttons-io::before {
  background: #ffffff;
}

.contact-whatsapp.cssbuttons-io {
  border: 1px solid rgba(22, 163, 74, 0.4);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #ffffff;
  box-shadow: none;
}

.contact-whatsapp.cssbuttons-io::before {
  background: #ffffff;
}

.contact-whatsapp.cssbuttons-io:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #14532d;
  box-shadow: none;
}

/* LOCALIZAÇÃO */

.location {
  padding: var(--section-pad-y) 0;
  background-color: #ffffff;
  color: #0f172a;
  position: relative;
  overflow: hidden;
}

.location-inner {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
  gap: 0;
  align-items: stretch;
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.6rem;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.location::before {
  content: "";
  position: absolute;
  display: none;
}

.location-info {
  position: relative;
  background: #0b0f17;
  border-radius: 0;
  padding: var(--panel-pad-y) var(--panel-pad-x);
  box-shadow: none;
  border: none;
}

.location-info h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-section-title);
  color: #f9fafb;
}

.location-info p {
  margin: 0 0 var(--space-2);
  color: #cbd5f5;
  font-size: var(--fs-base);
}

.location-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  color: #e5e7eb;
  font-size: var(--fs-base);
}

.location-list li {
  display: flex;
  align-items: flex-start;
}

.location-list li::before {
  content: "•";
  color: #60a5fa;
  font-weight: 700;
  margin-right: calc(var(--space-1) - 0.15rem);
}

.location-list li + li {
  margin-top: calc(var(--space-1) - 0.05rem);
}

.location-note {
  margin: 0;
  font-size: var(--fs-small);
  color: #9ca3af;
}

.location-map {
  background: #f8fafc;
  padding: 0;
  border-left: none;
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border-radius: 0 1rem 1rem 0;
  border: none;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/* RESPONSIVO – LAPTOPS MÉDIOS (até 15") */

@media (max-width: 1200px) {
  .solution-panel {
    padding: var(--panel-pad-y) var(--panel-pad-x);
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* RESPONSIVO – TABLETS E TELEFONES */

@media (max-width: 768px) {
  .bb-surface--soft {
    --bb-surface-pad: 2.2rem;
  }

  .solutions-layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-5);
  }

  .solutions-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    min-height: auto !important;
  }

  .solutions-tab {
    display: flex;
    width: 100%;
    white-space: normal;
    min-width: auto;
    min-height: auto;
    padding-inline: 1rem;
  }

  .solutions-panels {
    margin-top: var(--space-1);
    min-height: auto !important;
  }

  .solution-panel.active {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .solution-panel {
    padding: var(--space-5) var(--space-4);
    min-height: auto !important;
  }

  .process {
    padding: var(--space-4) 0 0;
  }

  .process-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .process-step {
    padding: var(--space-5) var(--space-4) var(--space-5);
  }

  .process-step-hero {
    top: 1.6rem;
    right: 1.4rem;
  }


  .contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-copy {
    padding: var(--space-5) var(--space-4);
  }

  .contact-form {
    padding: var(--space-4);
  }

  .contact-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-cta .contact-whatsapp {
    width: 100%;
    justify-content: center;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .location {
    padding: var(--section-pad-y-compact) 0;
  }

  .location-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .location-map iframe {
    height: clamp(220px, 30vw, 420px);
  }

  .location-map {
    border-left: none;
    border-top: none;
    padding: 0;
  }

}
/* SOBRE NÓS */

.about {
  padding: var(--section-pad-y) 0;
  background: #05060b;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at top left,
      rgba(37, 99, 235, 0.25),
      transparent 60%
    ),
    radial-gradient(circle at 80% 30%, rgba(14, 165, 233, 0.2), transparent 55%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.about > * {
  position: relative;
  z-index: 1;
}

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
  max-width: min(1080px, 100%);
  margin-inline: auto;
}

/* Coluna da foto / fundador */

.about-photo-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.about-photo-card {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.82),
    rgba(2, 6, 23, 0.62)
  );
  border-radius: 1.5rem;
  padding: var(--space-4) var(--space-4) var(--space-4);
  box-shadow: var(--bb-card-shadow);
  border: 1px solid var(--bb-card-border);
  width: 100%;
  max-width: 1040px;
  height: auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.about-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.about-photo-card::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  top: 0.75rem;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.32), transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}

.about-photo-frame {
  position: relative;
  border-radius: 1.15rem;
  padding: calc(var(--space-1) - 0.2rem);
  margin-bottom: 0;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 320px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.about-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  object-fit: cover;
}

.about-owner-info h3 {
  margin: 0 0 calc(var(--space-1) - 0.2rem);
  font-size: var(--fs-heading-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f8fafc;
}

.about-owner-role {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: calc(var(--space-1) - 0.15rem) calc(var(--space-2) - 0.05rem);
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #bfdbfe;
}
.about-owner-info p {
  margin: 0;
  color: #cbd5f5;
  font-size: var(--fs-base);
  line-height: 1.65;
  max-width: 62ch;
}

@media (max-width: 560px) {
  .about-photo-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .about-photo-frame {
    max-height: 260px;
  }
}

/* Garante que o bloco "Sobre a BLACK & BLUE" dentro do card branco
   use as mesmas cores de texto do parágrafo acima */
.about-photo-card .about-header h2 {
  color: #0f172a;
}

.about-photo-card .about-header p,
.about-photo-card .about-body p {
  color: #4b5563;
}

.about-stats {
  background: #f8fafc;
  border-radius: 1rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.about-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.about-stat {
  position: relative;
  padding: var(--space-1) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: auto;
  border-bottom: 1px solid #e2e8f0;
}

.about-stat::before {
  content: none;
}

.about-stat-label {
  display: inline-block;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-right: var(--space-2);
}

.about-stat-value {
  font-size: var(--fs-base);
  font-weight: 600;
  color: #0f172a;
}

/* Coluna de texto */

.about-header {
  text-align: center;
  margin: 0 auto var(--space-3);
  width: 100%;
  max-width: 100%;
}

.about-header h2 {
  font-size: var(--fs-section-title);
  letter-spacing: 0.02em;
  color: #f8fafc;
}

.about-header p {
  font-size: var(--fs-section-lead);
  color: #cbd5f5;
  width: 100%;
  max-width: 100%;
  margin: var(--space-2) auto 0;
}

.about-body p {
  margin: 0;
  color: #cbd5f5;
  font-size: var(--fs-base);
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
}

.about-body {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

.about-lead {
  color: #e2e8f0;
  font-size: var(--fs-base);
  line-height: 1.65;
}

.about-sublead {
  color: #cbd5f5;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-3), 2.4vw, var(--space-5));
  grid-auto-rows: 1fr;
  align-items: stretch;
  margin-top: calc(var(--space-6) + var(--space-4));
}

.about-pill {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1rem;
  padding: var(--space-3);
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.35);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.about-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 22px 46px rgba(2, 6, 23, 0.4);
}

.about-pill h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-heading-sm);
  color: #f8fafc;
}

.about-pill p {
  margin: 0;
  font-size: var(--fs-base);
  color: #cbd5f5;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .about-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.about-services h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

.about-services {
  padding: var(--space-3) var(--space-4);
  border-radius: 0.95rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.45);
}

.about-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--fs-base);
  color: #e2e8f0;
}

.about-list li::before {
  content: "•";
  color: var(--blue-light);
  font-weight: 700;
  margin-right: var(--space-1);
}

.about-quote {
  border-radius: 1.1rem;
  background: rgba(15, 23, 42, 0.75);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--blue-light);
  box-shadow: 0 16px 40px rgba(2, 6, 23, 0.35);
  text-align: center;
}

.about-quote p {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  color: #e2e8f0;
}

/* Equipa abaixo do fundador */


.about-photo-card:hover,
.contact-form:hover {
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

/* RESPONSIVO – SOBRE NÓS */

@media (max-width: 768px) {
  .about {
    padding: clamp(3rem, 6vw, 4rem) 0;
  }

  .about-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .about-photo-area {
    justify-content: center;
    height: auto;
  }

  .about-photo-card {
    height: auto;
    max-width: none;
    grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }

  .about-photo-frame {
    max-height: 220px;
  }

  .about-header {
    text-align: left;
  }

  .about-pillars {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* FOOTER */

.bb-footer {
  background: #020617;
  color: #e5e7eb;
  padding: var(--space-6) 0 var(--space-5);
  border-top: 1px solid #111827;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: flex-start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(55, 65, 81, 0.7);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-logo-mark {
  width: 80px;
  height: 38px;
  border-radius: 0.9rem;
  overflow: hidden;
}

.footer-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer-logo-title {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f9fafb;
}

.footer-logo-subtitle {
  font-size: var(--fs-label);
  color: #9ca3af;
}

.footer-description {
  margin: 0;
  font-size: var(--fs-base);
  color: #9ca3af;
  max-width: min(420px, 100%);
}

.footer-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.footer-contact-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: start;
}

.footer-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #60a5fa;
}

.footer-icon-symbol {
  font-size: var(--fs-icon);
}

.footer-contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: clamp(0.18rem, 0.16rem + 0.2vw, 0.3rem);
}

.footer-contact-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  line-height: 1.2;
}

.footer-contact-link {
  font-size: var(--fs-base);
  color: #e5e7eb;
  text-decoration: none;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.footer-contact-link:hover {
  color: #bfdbfe;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--fs-small);
  color: #9ca3af;
}

.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) - 0.15rem);
}

.footer-copy {
  margin: 0;
}

.footer-meta {
  margin: 0;
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-social-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

.footer-social-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.footer-social-link {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  color: #e5e7eb;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.1s ease;
}

.footer-social-link:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .bb-footer {
    padding: var(--space-5) 0 var(--space-5);
  }

  .footer-top {
    gap: var(--space-6);
    padding-bottom: var(--space-4);
  }

  .footer-contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}