/* =========================================================
   Temp Air — Folha de estilos da landing page
   ========================================================= */

/* =========================================================
   DESIGN TOKENS (Design System Temp Air)
   ========================================================= */
:root {
  /* Paleta principal */
  --blue-deep: #034077;        /* Cor secundária (navy) — títulos/links */
  --blue-light-bg: #E4F3F8;    /* Fundo suave (teal claro) */
  --white: #FFFFFF;            /* Main Background White */
  --text-gray: #616161;        /* Secondary Text — corpo de texto */

  /* Componentes / Ações */
  --btn-action-start: #2596BE; /* Cor principal (teal) */
  --btn-action-end: #7FD3E8;   /* Teal claro */
  --blue-icon: #2596BE;        /* Ícones / detalhes (teal) */

  /* Estados e acentos */
  --green: #4CAF50;            /* Success Green */
  --green-accessible: #2E7D32; /* Variação para texto branco (WCAG AA) */
  --green-deep: #1B5E20;
  --orange: #FF9800;           /* Alert Orange */
  --purple: #673AB7;           /* Optional Accent */

  /* Gradientes */
  --grad-brand: linear-gradient(135deg, #034077 0%, #2596BE 100%);
  --grad-btn: linear-gradient(135deg, #034077 0%, #2596BE 100%); /* navy → teal, texto branco */
  --grad-soft: linear-gradient(160deg, #E4F3F8 0%, #FFFFFF 100%);
  --grad-dark: linear-gradient(135deg, #022B50 0%, #034077 60%, #2596BE 130%);
  --grad-whats: linear-gradient(135deg, #43A047 0%, #2E7D32 100%);

  /* Tipografia */
  --font-heading: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Roboto', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Espaçamento — grade base 8px */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Raio de borda */
  --radius-section: 28px; /* grandes seções e cards (24–32px) */
  --radius-control: 14px; /* botões e inputs (12–16px) */

  /* Sombras (Soft Depth) */
  --shadow-card: 0px 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-strong: 0px 12px 32px rgba(37, 150, 190, 0.28);

  --header-h: 72px;
  --maxw: 1180px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;          /* Corpo de texto — Roboto Regular 16px */
  line-height: 1.65;
  color: var(--text-gray);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* evita rolagem horizontal sem virar contêiner de scroll */
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--blue-deep);
  line-height: 1.18;
  margin: 0;
}

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-deep); text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* Foco visível para navegação por teclado */
:focus-visible {
  outline: 3px solid var(--btn-action-start);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Link "pular para conteúdo" — acessibilidade */
.skip-link {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 1100;
  background: var(--blue-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-control);
  font-family: var(--font-heading);
  font-weight: 600;
  transition: top .25s ease;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;            /* área de toque ≥ 44px */
  padding: 14px 30px;
  font-family: var(--font-heading);
  font-size: 16px;            /* Texto de botão — Poppins Medium 16px Caps */
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .15s ease;
  text-align: center;
}
.btn-icon { flex-shrink: 0; } /* ícone (ex.: WhatsApp) não encolhe no botão */
.btn-primary {
  background-image: var(--grad-btn);
  color: #fff;
  box-shadow: var(--shadow-strong);
}
.btn-primary:hover {
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0px 16px 38px rgba(37, 150, 190, 0.38);
  transform: translateY(-2px);
}
.btn-primary:active { opacity: .9; transform: translateY(0); }

.btn-whatsapp {
  background-image: var(--grad-whats);
  color: #fff;
}
.btn-whatsapp:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}
.btn-whatsapp:active { opacity: .9; transform: translateY(0); }

.btn-light {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: var(--shadow-card);
}
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.btn-light:active { opacity: .9; transform: translateY(0); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--blue-light-bg);
}
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-img {
  height: 37px;
  width: auto;
  max-width: 64vw;          /* nunca estoura a largura no mobile */
  object-fit: contain;
  display: block;
}
.brand-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background-image: var(--grad-brand);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--blue-deep);
}
.brand-tagline {
  font-size: 11px;
  letter-spacing: .4px;
  color: var(--text-gray);
  text-transform: none;
}

/* Navegação */
.main-nav ul {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.main-nav a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-gray);
  padding: 8px 4px;
  position: relative;
  transition: color .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  border-radius: 3px;
  background-image: var(--grad-btn);
  transition: width .25s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--blue-deep); }
.main-nav a:hover::after { width: 100%; }

.header-cta { flex-shrink: 0; }
.header-cta .btn { min-height: 46px; padding: 11px 20px; font-size: 14px; }

/* ≤1169px: WhatsApp do header vira só ícone (evita quebra de layout) */
@media (max-width: 1169px) {
  .header-cta .btn-label { display: none; }
  .header-cta .btn-whatsapp {
    gap: 0;
    width: 46px;
    min-width: 46px;
    padding: 0;
    border-radius: 50%;     /* botão circular só com o ícone */
  }
}

/* ≥1170px: WhatsApp do header 15% menor (estava muito extenso) */
@media (min-width: 1170px) {
  .header-cta .btn { min-height: 40px; padding: 9px 17px; font-size: 12px; gap: 8px; }
  .header-cta .btn-icon { width: 17px; height: 17px; }
}

/* 768–887px: oculta "Contato" do menu horizontal
   (ele volta ao virar menu hambúrguer, abaixo de 768px) */
@media (min-width: 768px) and (max-width: 887px) {
  .nav-contato { display: none; }
}

/* Botão hambúrguer (mobile) */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: var(--blue-deep);   /* azul escuro */
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-toggle svg { width: 22px; height: 22px; stroke: #fff; }   /* barras brancas */

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin-top: calc(-1 * var(--header-h));   /* a Hero ocupa a tela; o header fica por cima */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fff;   /* mesmo branco do fundo do vídeo, para fundir */
  padding: calc(var(--header-h) + var(--sp-6)) var(--sp-3) clamp(160px, 28vh, 360px);
}
/* Vídeo de fundo no rodapé da Hero. Sem breakpoint: encolhe sozinho pelo vw
   conforme a resolução diminui (cheio no desktop, menor em telas pequenas). */
.hero-video {
  position: absolute;
  left: 50%;
  bottom: 20px;   /* sobe 20px em todos os dispositivos */
  --vid-x: -25px;   /* deslocamento horizontal (usado no translate e na compensação do zoom) */
  transform: translateX(calc(-50% + var(--vid-x)));
  transform-origin: calc(50% - var(--vid-x)) center;   /* zoom pivota no centro da tela, não no centro deslocado */
  width: min(92vw, 1550px);   /* maior no desktop; ainda encolhe pelo vw nas telas menores */
  height: auto;
  z-index: 0;
  pointer-events: none;
  /* suaviza só a borda esquerda do vídeo (a direita fica sólida) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
}
/* Vídeo inline (só aparece no mobile, ver media query) */
.hero-video-mob { display: none; }

/* ≥1515px: empurra o vídeo de fundo mais para a esquerda */
@media (min-width: 1515px) {
  .hero-video { --vid-x: -55px; }
}
/* Gradiente branco por cima do vídeo: funde o topo e mantém o texto legível */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* transição mais curta/concentrada (menos dispersa) */
  background: linear-gradient(180deg, #fff 0%, #fff 37%, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0) 51%);
}

/* ===== Animação de entrada da Hero (uma vez, no carregamento) =====
   1) Vídeo: fade in 70px acima; após 0,5s desce até a posição (acelera e freia no fim, ~1,2s).
   2) Depois (~1,3s): menu (fade) + H1/subtítulo/faixa (fade + descem do topo)
      + gradiente/botão/prova (só fade). */
@keyframes hero-in-up {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-video-drop {   /* desce de 70px acima até a posição */
  from { translate: 0 -70px; }
  to   { translate: 0 0; }
}
.hero-video,
.hero-video-mob     { animation: hero-fade 0.5s ease 0s both,
                                  hero-video-drop 0.7s cubic-bezier(.5, 0, .2, 1) 1.0s both; }   /* fade 70px acima; segura e após 1s desce (acelera e freia no fim) */
.site-header        { animation: hero-fade  0.7s ease 1.80s both; }   /* menu */
.hero h1            { animation: hero-in-up 0.7s ease 1.90s both; }   /* H1 (fade + desce do topo) */
.hero .hero-sub     { animation: hero-in-up 0.7s ease 2.05s both; }   /* subtítulo */
.hero .hero-strip   { animation: hero-in-up 0.7s ease 2.20s both; }   /* faixa de tópicos */
.hero::after        { animation: hero-fade  0.7s ease 1.90s both; }   /* gradiente: só fade, junto do grupo */
.hero .hero-actions { animation: hero-fade  0.7s ease 2.20s both; }   /* botão: só fade, junto do grupo */
.hero .hero-proof   { animation: hero-fade  0.7s ease 2.30s both; }   /* prova: só fade, junto do grupo */
@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-video-mob,
  .hero h1, .hero .hero-sub, .hero .hero-strip, .hero::after,
  .hero .hero-actions, .hero .hero-proof, .site-header { animation: none !important; }
}
/* Mobile: desativar animações da hero (manter no desktop) */
@media (max-width: 767px) {
  .hero-video, .hero-video-mob,
  .hero h1, .hero .hero-sub, .hero .hero-strip, .hero::after,
  .hero .hero-actions, .hero .hero-proof, .site-header,
  .hero-blob { animation: none !important; opacity: 1 !important; }
}
/* Até 769px, o gradiente branco desce mais 25% (cobre mais o vídeo) */
@media (max-width: 769px) {
  .hero::after {
    background: linear-gradient(180deg, #fff 0%, #fff 37.5%, rgba(255, 255, 255, 0.75) 56.25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 93.75%);
  }
}
/* Até 843px, a Hero deixa de ser tela cheia e fica só com a altura necessária */
@media (max-width: 843px) {
  .hero { min-height: auto; }
}
/* Até 463px, o vídeo bem maior e pode vazar para fora (cortado pelas laterais) */
@media (max-width: 463px) {
  .hero-video { width: 116.9vw; }
}
.hero .snow { display: none; }   /* sem flocos na nova Hero */
/* Flocos de neve decorativos (profundidade de marca) */
.snow {
  position: absolute;
  color: var(--blue-icon);
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}
.snow--1 { top: 8%; right: 6%; width: 120px; filter: blur(2px); opacity: .22; }
.snow--2 { bottom: 10%; left: 4%; width: 70px; filter: blur(5px); color: var(--purple); opacity: .14; }
.snow--3 { top: 45%; right: 22%; width: 46px; opacity: .16; }

/* ===== Formas líquidas desfocadas nos cantos da Hero ===== */
.hero-blob {
  position: absolute;
  z-index: 2;                 /* acima do gradiente branco, abaixo do conteúdo (z-index 3) */
  pointer-events: none;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(58px);
  opacity: 1;
  will-change: transform, border-radius;
  animation: blob-morph 16s ease-in-out infinite,
             blob-drift 22s ease-in-out infinite,
             blob-in 0.8s ease 1.85s both;   /* fade-in único (de cima) junto dos textos */
}
.hero-blob--tl {
  top: clamp(-170px, -9vw, -100px);
  left: clamp(-170px, -9vw, -100px);
  width: clamp(220px, 30vw, 520px);
  height: clamp(220px, 30vw, 520px);
  background: radial-gradient(circle at 32% 32%, #034077 0%, #034077 50%, rgba(3,64,119,0) 86%);
}
.hero-blob--br {
  right: clamp(-200px, -11vw, -120px);
  bottom: clamp(-350px, calc(-11vw - 150px), -270px);
  width: clamp(260px, 36vw, 620px);
  height: clamp(260px, 36vw, 620px);
  background: radial-gradient(circle at 66% 66%, #2596be 0%, #2596be 50%, rgba(37,150,190,0) 86%);
  animation-duration: 19s, 26s, 0.8s;
  animation-delay: -6s, -9s, 2.25s;   /* fade-in da de baixo, depois da de cima */
}
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  25%      { border-radius: 58% 42% 38% 62% / 63% 37% 63% 37%; }
  50%      { border-radius: 38% 62% 56% 44% / 49% 60% 40% 51%; }
  75%      { border-radius: 50% 50% 33% 67% / 55% 38% 62% 45%; }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(16px, -12px) rotate(7deg) scale(1.06); }
  66%      { transform: translate(-12px, 14px) rotate(-6deg) scale(0.96); }
}
@keyframes blob-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Mobile: blobs menores, mais sutis e mais leves para o desempenho */
@media (max-width: 600px) {
  .hero-blob { filter: blur(46px); opacity: 1; }
  .hero-blob--tl { width: 210px; height: 210px; top: -50px; left: -150px; }
  .hero-blob--br { width: 250px; height: 250px; right: -155px; bottom: -120px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob { animation: none; }
}

/* ===== Conteúdo central da Hero ===== */
.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

/* Selo de prova social (avatares + estrelas) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue-deep);
  margin-bottom: var(--sp-4);
}
.hero-avatars { display: inline-flex; }
.hero-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-image: var(--grad-brand);
  background-size: cover;
  background-position: center;
  margin-left: -10px;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-badge .stars { font-size: 13px; }

.hero h1 {
  font-size: clamp(38px, 7.5vw, 68px);   /* H1 grande */
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
}
.hero h1 .hl { color: var(--btn-action-start); }   /* destaque teal */
.hero .hero-sub {
  font-size: clamp(16px, 2.2vw, 19px);
  margin: var(--sp-3) auto 0;
  max-width: 660px;
  color: #2b3440;   /* subtítulo mais escuro */
}

/* Faixa horizontal de tópicos (substitui o card de diferenciais) */
.hero-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 12px 8px;
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin: var(--sp-4) auto var(--sp-6);
}
.hero-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);   /* legibilidade do branco sobre o fundo */
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-strip-item:first-child { border-left: none; }
.hero-strip-item svg {
  width: 18px; height: 18px;
  color: var(--btn-action-start);
  background: #fff;              /* fundo branco no ícone */
  border-radius: 50%;
  padding: 6px;
  box-sizing: content-box;      /* mantém o ícone em 18px + respiro do badge */
  flex-shrink: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}
/* botão da Hero: gradiente da paleta nova (navy → teal) */
.hero-actions .btn-primary {
  background-image: linear-gradient(135deg, #034077 0%, #2596BE 100%);
}
.hero-proof {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #fff;   /* branco fixo */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 18px rgba(0, 0, 0, 0.7), 0 0 34px rgba(0, 0, 0, 0.55);   /* sombra forte e espalhada */
  font-weight: 500;
}
.stars { color: var(--orange); letter-spacing: 2px; font-size: 16px; }


/* =========================================================
   SEÇÕES GERAIS
   ========================================================= */
.section { padding-block: var(--sp-12); }
.section--soft { background: var(--blue-light-bg); }
.section--gradient { background-image: var(--grad-soft); } /* azul suave → branco */

.section-head {
  max-width: 760px;
  margin: 0 auto var(--sp-8);
  text-align: center;
}
.section-head h2 {
  font-size: clamp(28px, 4.5vw, 40px);  /* H2 32–40px */
  font-weight: 600;
}
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: none;
  color: var(--btn-action-start);
  background: var(--white);
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-2);
}
.section--soft .eyebrow { background: #fff; }

/* =========================================================
   SERVIÇOS (cards)
   ========================================================= */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.card {
  background: #fff;
  border-radius: var(--radius-section);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  border: 1px solid #eef4fb;
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 18px 36px rgba(37, 150, 190, 0.16);
}
.card-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background-image: var(--grad-soft);
  border: 1px solid var(--blue-light-bg);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-3);
}
.card-icon svg { width: 34px; height: 34px; stroke: var(--blue-icon); }
.card h3 {
  font-family: var(--font-heading);
  font-size: 21px;            /* H3 20–24px */
  font-weight: 600;
  margin-bottom: 12px;
}
.card p { font-size: 15px; }  /* Texto de card 14–16px */

/* ============================================================
   ÁREA DE ATUAÇÃO — modelo reformulado (.ta-wrap)
   Mapa: reaproveita a imagem br.png (sem o SVG do modelo)
   ============================================================ */
.ta-wrap {
  --navy-900:#072b52; --navy-800:#0a3461; --navy-700:#0e3d72; --navy-600:#11497f;
  --line:rgba(255,255,255,.10); --ink:#ffffff; --muted:#9db6d4; --muted-2:#7c98ba;
  --accent:#2e97d4; --accent-bright:#4cb6ef;
  background:
    radial-gradient(120% 90% at 80% 10%, #0d3f76 0%, rgba(13,63,118,0) 55%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  padding: 84px 28px 72px;
  line-height: 1.55;
  position: relative;
  overflow: hidden;   /* contém os flocos */
}
.ta-wrap * { box-sizing: border-box; }
.ta-inner { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }

/* Flocos de neve decorativos no fundo (SVG branco, levemente desfocados) */
.ta-snow {
  position: absolute;
  z-index: 0;
  background-image: url("midias/snowflake-icon.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: ta-snow-float 13s ease-in-out infinite;
}
.ta-snow--1 { top: 12%;   left: 6%;   width: 70px; height: 70px; opacity: .14; filter: blur(1.5px); animation-duration: 13s; }
.ta-snow--2 { top: 30%;   right: 9%;  width: 50px; height: 50px; opacity: .11; filter: blur(2px);   animation-duration: 11s; animation-delay: -3s; }
.ta-snow--3 { bottom: 18%; left: 13%; width: 58px; height: 58px; opacity: .10; filter: blur(2.5px); animation-duration: 15s; animation-delay: -6s; }
.ta-snow--4 { bottom: 14%; right: 7%; width: 44px; height: 44px; opacity: .16; filter: blur(1.5px); animation-duration: 12s; animation-delay: -2s; }
.ta-snow--5 { top: 55%;   left: 48%; width: 38px; height: 38px; opacity: .09; filter: blur(2px);   animation-duration: 14s; animation-delay: -8s; }
@keyframes ta-snow-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(12px, 18px) rotate(14deg); }
}
.ta-head { text-align: center; max-width: 760px; margin: 0 auto; }
.ta-wrap .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Sora'; font-weight: 700; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-bright);
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.ta-wrap .eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--accent-bright); }
h2.ta-title {
  font-family: 'Sora'; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(34px,5vw,52px); line-height: 1.05; margin: 22px 0 18px;
  color: #fff;
}
.ta-lead { color: var(--muted); font-size: clamp(15px,1.6vw,17px); margin: 0 auto; max-width: 620px; }
.ta-lead b { color: #cfe0f2; font-weight: 600; }

.ta-wrap .stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; margin: 48px auto 0; max-width: 920px;
}
.ta-wrap .stat {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  padding: 22px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.ta-wrap .stat .n { font-family: 'Sora'; font-weight: 700; font-size: clamp(22px,3vw,30px); line-height: 1; color: #fff; }
.ta-wrap .stat .n span { color: var(--accent-bright); }   /* dígitos em azul-claro */
.ta-wrap .stat .l {
  margin-top: 10px; font-size: 12.5px; color: var(--muted-2); letter-spacing: .02em;
  line-height: 1.35; min-height: 2.7em;   /* reserva 2 linhas → cards na mesma altura */
  display: flex; align-items: center; justify-content: center;   /* rótulo centrado na altura reservada */
}

.band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-areas:
    "title map"
    "text  map";
  column-gap: 48px;
  row-gap: 0;
  align-items: center;
  margin-top: 64px;
}
.band-title { grid-area: title; }
.band-text  { grid-area: text; }
.map-wrap   { grid-area: map; }
.band h3 { font-family: 'Sora'; font-weight: 700; font-size: clamp(24px,3.2vw,32px); letter-spacing: -.01em; line-height: 1.12; margin: 0 0 8px; color: #fff; }
.band .sub { color: var(--muted); font-size: 15px; margin: 0 0 26px; max-width: 420px; }

.uf-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.uf-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255,255,255,.03); cursor: default;
  transition: border-color .25s, background .25s, transform .25s;
}
.uf-item:hover, .uf-item:focus-visible, .uf-item.active {
  border-color: rgba(76,182,239,.55); background: rgba(46,151,212,.12); transform: translateX(4px); outline: none;
}
.uf-pin {
  flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(46,151,212,.14); color: var(--accent-bright); transition: background .25s, color .25s;
}
.uf-item:hover .uf-pin, .uf-item.active .uf-pin { background: var(--accent); color: #fff; }
.uf-pin svg { width: 16px; height: 16px; }
.uf-name { font-family: 'Sora'; font-weight: 600; font-size: 16px; letter-spacing: .005em; }
.uf-tag { margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }

.closing { margin-top: 28px; padding: 16px 18px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 14.5px; background: rgba(255,255,255,.025); border-radius: 0 10px 10px 0; }
.closing b { color: #cfe0f2; font-weight: 600; }

.map-wrap { position: relative; }
.map-wrap .ta-map-img { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }

.ta-wrap .fade { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.ta-wrap .fade.in { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .ta-wrap { padding: 56px 18px 52px; }
  .ta-wrap .stats { grid-template-columns: repeat(2,1fr); }
  .band {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "map"
      "text";
    row-gap: var(--sp-3);
  }
  .map-wrap { max-width: 380px; margin: 0 auto; }   /* mapa entre o título e o subtítulo */
}
@media (prefers-reduced-motion: reduce) {
  .ta-wrap .fade { opacity: 1; transform: none; }
}
/* flocos de neve decorativos (SVG branco), desfocados e flutuando devagar */
.sobre-snow {
  position: absolute;
  z-index: 0;
  background-image: url("midias/snowflake-icon.svg");   /* SVG já é branco */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  animation: sobre-snow-float 12s ease-in-out infinite;
}
.sobre-snow--1 { top: 9%;    left: 5%;   width: 84px; height: 84px; opacity: .16; filter: blur(1px);   animation-duration: 13s; }
.sobre-snow--2 { top: 24%;   right: 7%;  width: 58px; height: 58px; opacity: .13; filter: blur(1.5px); animation-duration: 10s; animation-delay: -3s; }
.sobre-snow--3 { bottom: 16%; left: 11%; width: 68px; height: 68px; opacity: .12; filter: blur(2px);   animation-duration: 15s; animation-delay: -6s; }
.sobre-snow--4 { bottom: 22%; right: 13%; width: 48px; height: 48px; opacity: .18; filter: blur(1px);   animation-duration: 11s; animation-delay: -2s; }
.sobre-snow--5 { top: 50%;   left: 47%;  width: 40px; height: 40px; opacity: .10; filter: blur(1px);   animation-duration: 14s; animation-delay: -8s; }
@keyframes sobre-snow-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(14px, 22px) rotate(16deg); }
}
#sobre .section-head h2,
#sobre .sobre-intro,
#sobre .atuacao-title,
#sobre .atuacao-list li {
  color: #fff;
}
#sobre .atuacao-note { color: rgba(255, 255, 255, 0.85); }
#sobre .atuacao-list li::before { background-color: #fff; }   /* pins brancos no fundo escuro */

#servicos { padding-top: var(--sp-8); }   /* respiro no topo da seção */
.about-grid--servicos { margin-bottom: var(--sp-8); }   /* separa os cards de "Como trabalhamos" */

/* "Por que escolher a Temp Air": fundo azul forte + foto fundo2.jpg a 20% por cima, título branco (cards seguem brancos) */
#diferenciais {
  position: relative;
  background-color: var(--blue-deep);
  overflow: hidden;
}
#diferenciais::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("midias/fundo2.jpg") center / cover no-repeat;
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}
#diferenciais > .container { position: relative; z-index: 1; }
#diferenciais .section-head h2 { color: #fff; }

/* =========================================================
   PROCESSO EM 3 ETAPAS (traçado animado pelo scroll)
   ========================================================= */
.process-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  color: var(--blue-deep);
  margin-top: var(--sp-8);        /* respiro abaixo da faixa de números */
  margin-bottom: var(--sp-6);
}
/* Cabeçalho dos cards de serviço (agrupa e dá um ar mais profissional) */
.cards-head { text-align: center; margin-bottom: var(--sp-6); }
.cards-head-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  color: var(--blue-deep);
}
.cards-head-sub {
  max-width: 620px;
  margin: 12px auto 0;
  color: var(--text-gray);
  font-size: clamp(15px, 2vw, 17px);
}
.process {
  --progress: 0;                 /* 0–1, atualizado pelo scroll via JS */
  position: relative;
  max-width: 560px;
  margin: 0 auto var(--sp-8);
}
.process-steps {
  display: flex;
  flex-direction: column;        /* mobile: linha do tempo vertical */
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;                    /* remove o recuo padrão do <ol> */
}
.process-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-3);
  align-items: start;
  text-align: left;
}

/* Trilho (faixa de fundo) e preenchimento animado */
.process-rail,
.process-fill {
  position: absolute;
  left: 34px;                    /* centro do ícone (col 72px → 36) */
  top: 36px;
  bottom: 36px;
  width: 4px;
  border-radius: 999px;
  z-index: 0;
}
.process-rail { background: var(--blue-light-bg); }
.process-fill {
  background-image: var(--grad-btn);
  transform: scaleY(var(--progress));
  transform-origin: top center;
  transition: transform .12s linear;
}

/* Ícone (nó) de cada etapa */
.process-icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--blue-light-bg);
  transition: transform .4s ease, background-color .4s ease, border-color .4s ease;
}
.process-icon svg { width: 32px; height: 32px; stroke: var(--blue-icon); transition: stroke .4s ease; }
.process-num {
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue-icon);
  color: var(--blue-deep);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.process-text h3 {
  font-family: var(--font-heading);
  font-size: 19px;               /* H3 20–24px */
  font-weight: 600;
  margin-bottom: 6px;
}
.process-text p { font-size: 14px; }

/* Estado ativo (quando o traçado alcança a etapa) */
.process-step.is-active .process-icon {
  background-image: linear-gradient(135deg, #2596BE 0%, #034077 100%);
  border-color: transparent;
}
/* Anel pulsante: borda circular que emana e some (transform/opacity, sem box-shadow → círculo perfeito) */
.process-step.is-active .process-icon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--btn-action-start);
  pointer-events: none;
  animation: process-pulse 2s ease-out infinite;
}
.process-step.is-active .process-icon svg { stroke: #fff; }
.process-step.is-active .process-num {
  background: var(--blue-deep);
  border-color: #fff;
  color: #fff;
}

/* Anel pulsante (ondinha que emana da borda) */
@keyframes process-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* =========================================================
   DIFERENCIAIS
   ========================================================= */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.feature {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-section);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: 0px 16px 32px rgba(37,150,190,.14); }
.feature-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.feature-body { padding: var(--sp-4); }
.feature h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
.feature p { font-size: 15px; }

/* =========================================================
   ÁREA DE ATUAÇÃO (sobre) + EQUIPE TÉCNICA
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.about-list { margin-top: 14px; display: grid; gap: 10px; }
.about-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
}
.about-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--btn-action-start);
  font-weight: 700;
}

/* ===== Área de atuação: mapa do Brasil + estados atendidos ===== */
.atuacao-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: 0;   /* mapa é o último item do "Quem somos" — sem vão extra */
}
.atuacao-map-fig { margin: 0; }
.atuacao-map-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}
.atuacao-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 740px;
  margin: 0 auto var(--sp-6);
}
.atuacao-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.atuacao-list li {
  position: relative;
  padding-left: 30px;
  font-weight: 600;
  font-size: 17px;
  color: var(--blue-deep);
}
.atuacao-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  background-color: var(--btn-action-start);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.atuacao-note {
  margin-top: var(--sp-4);
  color: var(--text-gray);
  font-size: 15px;
  max-width: 480px;
}
@media (min-width: 768px) {
  .atuacao-map {
    grid-template-columns: auto auto;   /* colunas do tamanho do conteúdo */
    justify-content: center;            /* conjunto centralizado */
    gap: var(--sp-3);                   /* mapa e textos bem juntos */
    align-items: end;                   /* texto alinhado à base do mapa */
  }
  .atuacao-map-info { order: 1; }   /* lista à esquerda */
  .atuacao-map-fig { order: 2; }    /* mapa à direita */
  .atuacao-map-img { max-width: 450px; }   /* mapa um pouco menor no pc */
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.team-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #eef4fb;
  border-radius: var(--radius-section);
  padding: var(--sp-3);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0px 16px 32px rgba(37,150,190,.14); }
.team-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background-image: var(--grad-btn);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  flex-shrink: 0;
}
.team-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: 4px;
}
.team-card p { font-size: 14px; }

@media (min-width: 768px) {
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  /* 5 membros em 3 colunas: centraliza os dois últimos (grid de 6 col, cada card ocupa 2) */
  .team-grid { grid-template-columns: repeat(6, 1fr); }
  .team-card { grid-column: span 2; }
  .team-card:nth-child(4) { grid-column: 2 / span 2; }
  .team-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* =========================================================
   INSTALAÇÕES RECENTES + AVALIAÇÕES (carrossel horizontal)
   ========================================================= */
.installs-wrap { position: relative; }

.installs-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 26px 16px 34px 8px;       /* 1º card encostado à esquerda; espião do próximo à direita */
  scroll-padding-left: 8px;
  scrollbar-color: #9CCFE0 transparent;
}
.installs-track::-webkit-scrollbar { height: 8px; }
.installs-track::-webkit-scrollbar-thumb { background: #9CCFE0; border-radius: 999px; }
.installs-track::-webkit-scrollbar-track { background: transparent; }

.install-card {
  flex: 0 0 350px;
  max-width: 82vw;
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--radius-section);
  box-shadow: var(--shadow-card);
  border: 1px solid #eef4fb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Capa: funciona como placeholder (div) ou foto real (img.install-cover) */
.install-cover {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: grid;
  place-items: center;
  background-image: var(--grad-brand);
  color: #fff;
  position: relative;
}
.install-cover > svg { width: 54px; height: 54px; opacity: .92; }
/* Capa com foto: degradê escuro na base p/ o selo ficar legível */
.install-cover--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 55%);
  z-index: 1;
}
.cover-badge { z-index: 2; }
/* Vídeo de capa: preenche toda a capa, atrás do selo/overlay */
.install-cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Slideshow de capa: fotos em loop com crossfade */
.cover-slides { position: absolute; inset: 0; z-index: 0; }
.cover-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .4s ease;
}
.cover-slide.is-active { opacity: 1; z-index: 1; }
.cover-badge {
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 12px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.install-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.install-body .stars { color: var(--orange); letter-spacing: 2px; font-size: 16px; }
.install-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-deep);
  line-height: 1.3;
  margin: 2px 0 4px;
}
.install-desc {
  font-size: 14px;
  color: var(--text-gray);
  /* limita a altura do card (mantém o carrossel uniforme) */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Card de projeto em destaque (dourado): cores do texto */
.install-card--featured .install-title { color: #4a3c14; }
.install-card--featured .install-desc { color: #5b4a1f; }
.install-quote {
  font-size: 15px;
  color: var(--text-gray);
  font-style: italic;
  margin: 0;
  flex: 1;
}
.install-author { display: flex; align-items: center; gap: 12px; }
.install-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background-image: var(--grad-btn);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
.install-author-info { display: flex; flex-direction: column; line-height: 1.3; }
.install-author-info strong {
  color: var(--blue-deep);
  font-family: var(--font-heading);
  font-size: 15px;
}
.install-author-info span { font-size: 13px; color: var(--text-gray); }

/* ===== Avaliação em destaque (layout premium dourado) ===== */
.install-card--featured {
  position: relative;
  border: none;
  background-image: linear-gradient(160deg, #fffdf5 0%, #fbf1d4 55%, #f6e6bf 100%);
  box-shadow: 0 2px 18px rgba(184, 134, 11, 0.30);
  animation: featured-glow 3.6s ease-in-out infinite;   /* esfumaçado dourado suave */
}
@keyframes featured-glow {
  0%, 100% { box-shadow: 0 2px 16px rgba(184, 134, 11, 0.30); }
  50%      { box-shadow: 0 4px 26px rgba(212, 175, 55, 0.52); }
}

/* Borda dourada com um brilho branco percorrendo a borda (bem suave) */
@property --featured-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.install-card--featured::before {
  --featured-angle: 0deg;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;                       /* espessura da borda */
  background: conic-gradient(from var(--featured-angle),
    #b8860b 0deg, #e7c873 60deg, #ffffff 110deg, #ffffff 150deg, #f7e3a1 200deg, #b8860b 300deg, #b8860b 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;    /* mostra só o anel da borda */
  pointer-events: none;
  z-index: 3;
  animation: featured-border 6s linear infinite;
}
@keyframes featured-border { to { --featured-angle: 360deg; } }

/* Acentos dourados do card em destaque */
.install-card--featured .install-cover { background-image: linear-gradient(145deg, #d4af37 0%, #f3d27a 45%, #b8860b 100%); }
.install-card--featured .install-quote { color: #5b4a1f; }
.install-card--featured .install-author-info strong { color: #4a3c14; }
.install-card--featured .install-avatar { background-image: linear-gradient(135deg, #e0bb53, #a9810f); }

/* Selo "Destaque" */
.featured-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: none;
  color: #5b4a1f;
  background: linear-gradient(135deg, #f7e3a1, #e6c76e);
  border: 1px solid rgba(184, 134, 11, 0.55);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(184, 134, 11, 0.28);
}

/* Botões de navegação do carrossel (desktop) */
.installs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;          /* discreta, não atrapalha o card */
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--text-gray);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 99;   /* acima da borda animada do card em destaque */
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.installs-nav svg { width: 24px; height: 24px; stroke: currentColor; }
.installs-nav:hover { background: var(--text-gray); color: #fff; box-shadow: var(--shadow-strong); opacity: 1; }
.installs-nav:active { transform: translateY(-50%) scale(.94); }
.installs-nav--prev { left: 18px; }
.installs-nav--next { right: 18px; }

.scroll-hint {
  text-align: center;
  font-size: 14px;
  color: var(--text-gray);
  margin-top: var(--sp-1);
}

/* =========================================================
   FAIXA DE NÚMEROS (contadores)
   ========================================================= */
.stats-band {
  background-image:
    radial-gradient(120% 90% at 80% 10%, #0d3f76 0%, rgba(13,63,118,0) 55%),
    linear-gradient(180deg, #0a3461 0%, #072b52 100%);   /* mesmo fundo da seção do mapa */
  color: #fff;
  padding-block: var(--sp-8);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;                       /* bold */
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1;
  letter-spacing: -1px;
}
.stat-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   FAIXA DE CONVERSÃO (CTA intermediário)
   ========================================================= */


.cta-band {
  position: relative;
  background-image: var(--grad-dark);
  color: #fff;
  text-align: center;
  padding-block: var(--sp-12);
  overflow: hidden;
}
.cta-band .snow { opacity: .12; color: #fff; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  max-width: 860px;
  margin-inline: auto;
}
.cta-band p {
  color: rgba(255,255,255,.92);
  font-size: 18px;
  max-width: 680px;
  margin: var(--sp-3) auto var(--sp-6);
}
.cta-band h1 {
  color: rgba(255,255,255,.92);
  font-size: 38px;
  max-width: 680px;
  margin: var(--sp-3) auto var(--sp-6);
}

/* =========================================================
   MARCAS
   ========================================================= */
.brands {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.brand-logo {
  background: #fff;
  border: 1px solid var(--blue-light-bg);
  border-radius: 18px;
  padding: 22px 12px;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .5px;
  color: var(--blue-deep);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
  min-height: 84px;
}
.brand-logo:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  color: var(--btn-action-start);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: #023056;
  color: #cfe0f3;
  padding-block: var(--sp-8) var(--sp-4);
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-family: var(--font-heading);
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-logo { width: 46px; height: auto; display: block; flex-shrink: 0; }
.footer-about h2 { font-size: 22px; margin: 0; line-height: 1; }
.footer-about p { max-width: 42ch; margin: 0; line-height: 1.65; }
.footer-col h3 { font-size: 16px; margin-bottom: 18px; text-transform: none; letter-spacing: .5px; }
.footer-col p, .footer-col li { margin-bottom: 12px; color: #cfe0f3; line-height: 1.55; }
.footer-col p:last-child { margin-bottom: 0; }
.footer-col a { color: #cfe0f3; transition: color .2s ease; }
.footer-col a:hover, .footer-col a:focus-visible { color: #7FD3E8; }
.contact-line { display: flex; align-items: flex-start; gap: 10px; }
.contact-line svg { width: 20px; height: 20px; stroke: var(--blue-icon); flex-shrink: 0; margin-top: 3px; }

.social-links { display: flex; gap: 12px; margin-top: var(--sp-1); }
.social-links a {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.social-links a:hover { background: var(--btn-action-start); transform: translateY(-3px); }
.social-links svg { width: 22px; height: 22px; fill: #fff; }

.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-size: 14px;
  color: #9fb6d1;
}

/* =========================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================= */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  width: 60px; height: 60px;
  border-radius: 50%;
  background-image: var(--grad-whats);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);   /* sombra neutra (sem o glow verde) */
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.whatsapp-float svg { width: 32px; height: 32px; fill: #fff; }
/* No mobile: entra só depois que os textos da Hero terminam (~3s) */
@keyframes wa-float-in {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: 1; scale: 1; }
}
@media (max-width: 767px) {
  .whatsapp-float { animation: wa-float-in 0.45s cubic-bezier(.34, 1.56, .64, 1) 3s both; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float { animation: none; }
}

/* (Animação de nevasca de entrada removida — demais animações mantidas) */

/* =========================================================
   ANIMAÇÕES SUTIS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.snow--1 { animation: floaty 7s ease-in-out infinite; }
.snow--3 { animation: floaty 5s ease-in-out infinite; }

/* =========================================================
   BREAKPOINTS — Tablet (≥768px)
   ========================================================= */
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; column-gap: var(--sp-8); }
  .hero-actions { align-items: center; }
  /* Remove o WhatsApp duplicado do menu (mantém apenas o CTA à direita) */
  .nav-whatsapp { display: none; }

  /* Processo: layout horizontal (etapas lado a lado) */
  .process { max-width: 900px; }
  .process-steps { flex-direction: row; align-items: flex-start; gap: 0; }
  .process-step {
    flex: 1;
    grid-template-columns: 1fr;   /* ícone sobre o texto */
    justify-items: center;
    text-align: center;
    gap: var(--sp-2);
  }
  .process-text { max-width: 240px; }
  /* Trilho/preenchimento na horizontal, ligando o centro dos ícones */
  .process-rail,
  .process-fill {
    left: 16.666%;
    right: auto;
    top: 36px;
    bottom: auto;
    width: 66.666%;
    height: 4px;
  }
  .process-fill {
    transform: scaleX(var(--progress));
    transform-origin: left center;
  }
}

/* Desktop (≥992px) */
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .brands { grid-template-columns: repeat(4, 1fr); }
  .installs-nav { display: inline-flex; opacity: 0.85; }
}

/* =========================================================
   MOBILE (<768px) — menu colapsável
   ========================================================= */
@media (max-width: 767px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .brand-img { height: 30px; }

  /* Faixa de números no telefone: textos maiores */
  .stat-num { font-size: 54px; }
  .stat-label { font-size: 18px; }

  .main-nav {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--blue-light-bg);
    box-shadow: var(--shadow-card);
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .main-nav.open { max-height: 420px; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
  }
  .main-nav a {
    padding: 14px 4px;
    font-size: 17px;
    border-bottom: 1px solid #f0f5fb;
  }
  .main-nav a::after { display: none; }
  .main-nav .nav-whatsapp {
    margin-top: var(--sp-2);
    border-bottom: none;
  }
  .main-nav .nav-whatsapp a { color: #fff; }   /* texto branco no botão do WhatsApp */
  .main-nav .btn { width: 100%; }

  .hero { padding: calc(var(--header-h) + var(--sp-4)) var(--sp-3) var(--sp-6); }
  /* Reordena a Hero: o vídeo entra no lugar da faixa; a faixa desce p/ baixo da prova social */
  .hero-inner { display: flex; flex-direction: column; align-items: center; }
  .hero-video { display: none; }            /* esconde o vídeo de fundo no mobile */
  .hero-video-mob {
    display: block;
    width: 100%;
    height: auto;
    margin: var(--sp-3) auto var(--sp-2);   /* ocupa o espaço onde ficava a faixa */
    transform: translateX(-20px);           /* 20px para a esquerda no mobile */
    transform-origin: calc(50% + 20px) center;   /* zoom pivota no centro (compensa o deslocamento) */
  }
  .hero-badge { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
  .hero-strip {
    order: 1;                                /* vai para o fim, abaixo do "Atendimento ágil…" */
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin: var(--sp-2) auto 0;              /* sem aquele vão grande em cima/embaixo */
  }
  .hero-proof {
    color: #2b3440;                          /* mesmo tom escuro do subtítulo */
    text-shadow: none;                       /* sem sombra no mobile */
    margin-top: var(--sp-2);                 /* menos espaço acima */
  }
  .hero-strip-item {
    border-left: none;
    border-top: 1px solid rgba(3, 64, 119, 0.12);
    padding: 10px 12px;
    justify-content: center;
    color: var(--blue-deep);     /* azul escuro no mobile */
    text-shadow: none;           /* sem sombra no mobile */
  }
  .hero-strip-item:first-child { border-top: none; }
  .section { padding-block: var(--sp-8); }
  .cta-band { padding-block: var(--sp-8); }
  .hero-actions { width: 100%; }            /* mantém o botão full-width no flex column */
  .hero-actions .btn { width: 100%; }
  .sobre-intro { text-align: left; }        /* "Somos uma empresa…" à esquerda no mobile */
  .atuacao-map { gap: var(--sp-2); }        /* mapa mais perto da lista de estados */
  .atuacao-list { margin-top: var(--sp-1); }
  /* Projetos: equilibra o espaço acima/abaixo do parágrafo (era ~16px x ~90px) */
  #instalacoes .section-head { margin-bottom: 0; }
  #instalacoes .installs-track { padding-top: 22px; }   /* +20% sobre 18px */
}

/* Até 485px, puxa o vídeo 10px para a direita e suaviza a borda esquerda */
@media (max-width: 485px) {
  .hero-video-mob {
    transform: translateX(-10px);
    transform-origin: calc(50% + 10px) center;   /* zoom pivota no centro (compensa o deslocamento) */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 100%);
  }
}

/* Até 540px: tópicos bem compactos (gap vertical -80%) e Hero só com o necessário */
@media (max-width: 540px) {
  .hero-strip-item { padding-top: 2px; padding-bottom: 2px; }   /* era 10px → -80% */
  .hero-strip { padding-top: 2px; padding-bottom: 2px; }        /* iguala topo/base ao gap interno */
  .hero {
    padding-top: calc(var(--header-h) + var(--sp-2));
    padding-bottom: var(--sp-3);
  }
}

/* Respeita preferência de redução de movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   SEÇÃO — POR QUE CONTRATAR UMA FIRMA DE ENGENHARIA
   ========================================================= */
/* ===== SEÇÃO ENGENHARIA — redesign moderno ===== */
.erros-section {
  background: linear-gradient(175deg, #f8fbfd 0%, #e9f4f9 100%);
  position: relative;
  overflow: hidden;
}
.erros-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(37, 150, 190, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.erros-section .section-head h2 {
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 800;
  color: var(--blue-deep);
  max-width: 800px;
  margin-inline: auto;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.erros-lead {
  margin-top: var(--sp-3);
  font-size: clamp(15px, 1.8vw, 17px);
  color: var(--text-gray);
  max-width: 660px;
  margin-inline: auto;
  line-height: 1.7;
}

/* Bloco introdutório: texto + alerta */
.erros-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  max-width: 860px;
  margin: 0 auto var(--sp-8);
}
.erros-intro-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.erros-intro-text p {
  font-size: 15px;
  color: var(--text-gray);
  line-height: 1.75;
}
.erros-alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(3, 64, 119, 0.12);
  border-left: 4px solid #c0392b;
  border-radius: 16px;
  padding: var(--sp-3);
  box-shadow: 0 4px 20px rgba(3, 64, 119, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.erros-alerta svg {
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: #c0392b;
  margin-top: 1px;
}
.erros-alerta div {
  font-size: 14px;
  color: var(--text-gray);
  line-height: 1.6;
}
.erros-alerta strong {
  color: var(--blue-deep);
  font-family: var(--font-heading);
}

@media (min-width: 768px) {
  .erros-intro {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Grade de fotos de exemplos ruins */
.erros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}
.erro-item {
  margin: 0;
  padding: 0;
}
.erro-img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(3, 26, 51, 0.12);
  aspect-ratio: 4 / 3;
  background: #c8dce8;
}
.erro-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.25, .46, .45, .94);
}
.erro-item:hover .erro-img-wrap img {
  transform: scale(1.06);
}
/* Overlay vermelho gradiente indicando algo negativo */
.erro-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(180, 30, 30, 0.72) 0%, rgba(140, 20, 20, 0.35) 40%, rgba(80, 10, 10, 0) 70%);
  pointer-events: none;
  transition: opacity .3s ease;
}
.erro-item:hover .erro-img-wrap::after {
  opacity: 0.85;
}
.erro-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.35);
}

@media (min-width: 640px) {
  .erros-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
}
@media (min-width: 992px) {
  .erros-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* CTA de encerramento — "Não arrisque o seu investimento" (destaque premium) */
.erros-cta {
  position: relative;
  text-align: center;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  background: linear-gradient(145deg, #022b50 0%, #034077 45%, #0a5a8c 100%);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(3, 40, 77, 0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.erros-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37, 150, 190, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.erros-cta::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: -30px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(37, 150, 190, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.erros-cta p {
  position: relative;
  z-index: 1;
  font-size: clamp(25px, 2.2vw, 20px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--sp-4);
  line-height: 1.6;
  margin-inline: auto;
}
.erros-cta .btn-primary {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--blue-deep);
  font-weight: 700;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  display: inline-block;
}
.erros-cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}
/* Sub-texto do CTA */
.erros-cta-sub {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-2);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}