/* --- IMPORTAÇÃO DAS FONTES LOCAIS --- */
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* --- VARIÁVEIS DE COR E FONTE --- */
:root {
  --bg-dark: #0a0a0a;
  --bg-darker: #050505;
  --text-light: #ffffff;
  --text-gray: #b3b3b3;
  --accent-cyan: #03FAD5;
  --font-main: 'DM Sans', sans-serif;
}

/* --- RESET BÁSICO --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* --- A TRAVA MESTRA DO ESPAÇO BRANCO --- */
html,
body {
  max-width: 100%;
  /* MÁGICA: Mudamos de hidden para clip. Isso corta o vazamento sem quebrar a "cola" do scroll! */
  overflow-x: clip;
}

body {
  font-family: var(--font-main);
  background-color: #f4f4f4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: var(--text-light);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* --- TOP BAR --- */
.siteHeader {
  position: relative;
  z-index: 999;
}

.topBar {
  background-color: var(--bg-darker);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px 0;
}

.topBarLinks {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

.topBarLinks li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-gray);
  transition: color 0.3s ease;
}

.topBarLinks li a:hover {
  color: var(--text-light);
  /* O texto fica 100% branco */
}

.topBarLinks img {
  width: 14px;
  opacity: 0.6;
  /* Baixei um pouco para combinar perfeitamente com o texto cinza inativo */
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
  /* Adicionamos a mesma suavidade do texto no ícone */
}

/* O SEGREDO: Quando passar o mouse no link, o ícone acende junto! */
.topBarLinks li a:hover img {
  opacity: 1;
  /* O ícone fica 100% branco e brilhante */
}

/* --- SELETOR DE IDIOMAS --- */
.langSelector {
  position: relative;
  cursor: pointer;
}

.langDropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px;
  border-radius: 4px;
  list-style: none;
  gap: 8px;
  flex-direction: column;
  min-width: 110px;
  /* Estado inicial escondido */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  display: flex;
}

/* O HOVER: Mostra a lista suavemente quando passa o mouse */
.langSelector:hover .langDropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.langDropdown li a {
  color: #b3b3b3 !important;
  font-size: 13px;
  transition: color 0.3s ease;
  display: block;
  padding: 4px 8px;
}

.langDropdown li:hover a {
  color: #03FAD5 !important;
}

/* --- MAIN HEADER --- */
.mainHeader {
  background-color: var(--bg-dark);
  padding: 22px 0;
  position: relative;
  width: 100%;
  /* Transição sedosa para o encolhimento do padding e para o sumiço do header */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}

/* ESTADO FIXO: Quando rola a página, ele desgruda e gruda na tela */
.mainHeader.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 0;
  /* Encolhe levemente para não roubar muito espaço de leitura */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
  /* Sombra elegante no fundo do site */
}

/* ESTADO OCULTO: Quando entra nos serviços, ele sobe e some */
.mainHeader.is-hidden {
  transform: translateY(-100%);
  /* Mantenha o movimento para cima */
  opacity: 0;
  /* ADICIONADO: Fica 100% transparente */
  visibility: hidden;
  /* ADICIONADO: Impede que cliques "batam" nele */
  pointer-events: none;
  /* ADICIONADO: Garante que o mouse passe direto */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0s 0.4s;
}

.mainHeaderFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 32px;
}

/* --- NAVEGAÇÃO PRINCIPAL --- */
.mainNav ul {
  list-style: none;
  display: flex;
  gap: 45px;
}

.mainNav ul li a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2px;
  transition: color 0.3s ease;
}

.mainNav ul li a:hover {
  color: var(--accent-cyan);
}

.setinha {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  /* Adicionamos o stroke na transição para a cor mudar suavemente */
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
  stroke: #ffffff;
  /* Força o branco padrão (ignora o currentColor do HTML) */
}

/* Quando o menu abre, gira e fica com o seu azul */
.hasDropdown.open .setinha {
  transform: rotate(180deg);
  stroke: #03FAD5;
}

/* O texto fica azul quando aberto */
.hasDropdown.open>a {
  color: #03FAD5;
}

/* BÔNUS: Garante que a setinha acompanhe o azul do texto ao passar o mouse! */
.mainNav ul li a:hover .setinha {
  stroke: #03FAD5;
}

.hasDropdown.open>a {
  color: #03FAD5;
}

/* --- BARRA DE PESQUISA BLINDADA (GLOBAL SPOTLIGHT) --- */
.globalSpotlight {
  display: flex;
  align-items: center;
  gap: 12px;
}

.globalSpotlight input {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  height: 46px;
  width: 280px;
  padding: 0 16px;
  color: var(--text-light);
  font-family: var(--font-main);
  font-size: 15px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.globalSpotlight input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

.globalSpotlight input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.globalSpotlight button {
  background: linear-gradient(to bottom, #03FAD5, #06C5A9);
  border: none;
  border-radius: 10px;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.globalSpotlight button img {
  width: 22px;
}

.globalSpotlight button:hover {
  opacity: 0.8;
}

/* No estado do Painel Aberto, encolhe a caixa de pesquisa principal */
.headerSearchActive .globalSpotlight input {
  width: 0;
  padding: 0;
  opacity: 0;
  border-color: transparent;
}

/* --- PAINEL DE PESQUISA (OVERLAY) --- */
.searchOverlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--bg-dark);
  /* Fundo preto idêntico ao cabeçalho */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /* Linha divisória sutil */
  padding: 40px 0 60px 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  /* Sombra forte para o modo dark */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  z-index: 100;
}

.searchOverlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.headerSearchActive .searchBox input {
  width: 0;
  padding: 0;
  opacity: 0;
  border-color: transparent;
}

/* --- INPUT DO PAINEL --- */
.panelSearchWrapper {
  position: relative;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.panelSearchWrapper input {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Borda clara visível no fundo escuro */
  background: transparent;
  padding: 0 20px;
  font-size: 18px;
  color: var(--text-light);
  /* O texto digitado agora é branco */
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.3s ease;
}

.panelSearchWrapper input:focus {
  border-color: var(--accent-cyan);
}

/* Estilo do placeholder animado com baixa opacidade */
.panelSearchWrapper input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.panelSearchIcon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  filter: brightness(0) invert(1);
  /* A lupa agora fica 100% branca */
}

/* --- CAROUSEL E CARDS --- */
.searchSuggestions h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-light);
  /* Título agora é branco */
  margin-bottom: 20px;
}

.carouselContainer {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-top: 10px;
  padding-bottom: 20px;
  scroll-behavior: smooth;
  scrollbar-width: none;

  /* --- O TRUQUE DA NETFLIX (Full Width) --- */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  /* Espaçamento padrão para telas menores */
  padding-left: 40px;
  padding-right: 40px;
}

/* Calcula o espaço extra em telas grandes para alinhar o primeiro card com o input */
@media (min-width: 1400px) {
  .carouselContainer {
    /* 1320px é o tamanho útil do seu container (1400 - 80 de padding) */
    padding-left: calc((100vw - 1320px) / 2);
    padding-right: calc((100vw - 1320px) / 2);
  }
}

.carouselContainer::-webkit-scrollbar {
  display: none;
}

.searchCard {
  min-width: 260px;
  /* Aumentamos a largura */
  height: 320px;
  /* Aumentamos a altura */
  background-color: #cccccc;
  /* Área reservada para as futuras imagens */
  border-radius: 16px;
  /* Borda um pouco mais arredondada */
  display: flex;
  align-items: flex-end;
  opacity: 0.4;
  transition: opacity 0.4s ease, transform 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  /* Garante que o gradiente não vaze pelas bordas arredondadas */
}

.searchCard .cardContent {
  /* Trocamos o cinza chapado pelo gradiente chumbo (de baixo para cima) */
  background: linear-gradient(to top, #111111, #2b2b2b);
  width: 100%;
  padding: 20px 15px;
  color: var(--text-gray);
  font-weight: 500;
  font-size: 15px;
  transition: all 0.4s ease;
  border-radius: 16px 16px 0px 0px;
}

.searchCard.active {
  opacity: 1;
}

.searchCard.active .cardContent,
.searchCard:hover .cardContent {
  background: linear-gradient(to top, #06C5A9, #03FAD5);
  color: #000000;
}

.carouselContainer.hoverMode .searchCard {
  opacity: 1;
}

.searchCard:hover {
  transform: translateY(-5px);
}

/* --- COMPORTAMENTO DO DROPDOWN (MEGA MENU) --- */
.hasDropdown {}

.megaMenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #2D2D2D;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}

.hasDropdown.open .megaMenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* --- ESTRUTURA INTERNA (SIDEBAR E PAINEL) --- */
.megaMenuContainer {
  display: flex;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 40px;
}

.megaMenuSidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 320px;
  flex-shrink: 0;
}

.megaTab {
  background-color: #0F0F0F;
  color: #b3b3b3;
  border: none;
  padding: 16px 20px;
  text-align: left;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 15px);
}

.megaTab:hover {
  color: #ffffff;
}

.megaTab.active {
  color: #03FAD5;
  background-color: #0F0F0F;
  border-left: 3px solid #03FAD5;
  width: 100%;
}

.megaMenuContent {
  background-color: #0F0F0F;
  flex-grow: 1;
  position: relative;
  padding: 30px;
  min-height: 280px;
  overflow: hidden;
}

.megaPane {
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  opacity: 0;
  pointer-events: none;
  /* Inativo por padrão */
  transform: translateX(40px);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.megaPane.active {
  opacity: 1;
  /* Removemos o pointer-events: auto que ficava aqui! */
  transform: translateX(0);
  transition-delay: 0.05s;
}

/* A MÁGICA: O painel só fica clicável se o menu estiver de fato ABERTO */
.hasDropdown.open .megaPane.active {
  pointer-events: auto;
}

.paneGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 30px;
}

.paneGrid a {
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;
  display: block;
}

.paneGrid a:hover {
  color: #03FAD5;
  transform: translateX(6px);
}

/* =========================================
   ESTRUTURA DA PÁGINA (MAIN)
========================================= */

/* =========================================
   SEÇÃO 1: HERO
========================================= */
.heroSection {
  width: 100%;
  height: 100vh;
  background-color: #0a0a0a;
  position: relative;

  /* Flexbox para centralizar o texto no meio exato da tela */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* O Vídeo vai para o fundo (z-index: 1) */
.heroVideo {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 00px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* A Película Escura (z-index: 2) */
.heroOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Escurece 65% do vídeo para dar um contraste perfeito com o texto branco */
  background: rgba(0, 0, 0, 0.65);
  z-index: 2;
}

/* O Texto (z-index: 3) */
.heroContent {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 800px;
  /* Limita a largura para o parágrafo quebrar bonito */
  padding: 0 30px;
  /* Joga o bloco de texto um pouquinho para baixo do centro exato (igual a Deloitte) */
  margin-top: 0px;
}

.heroContent h1 {
  /* Título usa um peso médio (400) para ficar elegante e não "gritar" */
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 400;
  color: #ffffff;
  margin-top: 300px;
  margin-bottom: 23px;
  letter-spacing: -0.5px;
}

.heroContent p {
  /* O parágrafo fica com um cinza clarinho (e0e0e0) e peso leve (300) */
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  color: #e0e0e0;
  line-height: 1.6;
}

/* =========================================
   SEÇÃO 2: INSIGHTS / BLOG (HOME)
========================================= */
.homeBlogSection {
  padding: 120px 0;
  background-color: #f8f8f8;
  /* Fundo levemente cinza para destacar o branco dos cartões */
}

.blogHeader {
  text-align: center;
  margin-bottom: 64px;
}

.blogHeader h2 {
  font-size: clamp(32px, 3.5vw, 44px);
  color: #111111;
  margin-bottom: 16px;
  font-weight: 700;
  letter-spacing: -1px;
}

.blogHeader p {
  font-size: 18px;
  color: #555555;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* =========================================
   O MOTOR DO CARROSSEL INFINITO
========================================= */
.blogGrid {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  /* Fundamental: Libera o scroll nativo e trackpad */
  scrollbar-width: none;
  padding: 20px 0 60px 0;
}

.blogGrid::-webkit-scrollbar {
  display: none;
  /* Esconde a barra feia no Chrome/Safari */
}

.blogTrack {
  display: flex;
  gap: 40px;
  width: max-content;
  padding-right: 40px;
  /* AS ANIMAÇÕES CSS FORAM TOTALMENTE REMOVIDAS DAQUI! */
}

/* Quando o mouse entra na área, o carrossel pausa! */
.blogGrid:hover .blogTrack {
  animation-play-state: paused;
}

/* O Teletransporte Invisível */
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }

  /* O track anda exatamente -50% (5 cartões originais + gaps) e volta pro 0 sem ninguém piscar */
  100% {
    transform: translateX(-50%);
  }
}


/* O CARD PREMIUM */
.blogCard {
  width: 420px;
  min-width: 420px;
  height: 520px;

  background: #ffffff;
  border-radius: 24px;
  /* overflow: hidden; <--- VOCÊ VAI APAGAR ISSO AQUI! */
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.blogCard:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

/* =========================================
   O CONTEÚDO INTERNO DO CARD (FOTOS E TEXTOS)
========================================= */
.blogImageWrapper {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background-color: #e0e0e0;
  /* A MÁGICA PARA A FOTO NÃO FICAR QUADRADA: */
  border-radius: 24px 24px 0 0;
}

.blogImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blogCard:hover .blogImg {
  transform: scale(1.05);
  /* A foto dá o zoom no hover */
}

.blogContent {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blogCategory {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #077867;
  /* O seu verde/ciano escuro */
  margin-bottom: 16px;
}

.blogContent h3 {
  font-size: 22px;
  color: #111111;
  /* Volta a ser escuro! */
  margin-bottom: 16px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  font-weight: 700;
  transition: color 0.3s ease;
}

.blogCard:hover .blogContent h3 {
  color: #077867;
}

.blogContent p {
  font-size: 16px;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 32px;
  flex-grow: 1;
}

.blogReadMore {
  font-size: 16px;
  font-weight: 600;
  color: #111111;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
}

/* =========================================
   REFLEXO 2D PREMIUM (ESTÁVEL E SEM SOMBRA)
========================================= */

/* 1. O respiro exato para o reflexo aparecer */
.homeBlogSection .blogGrid {
  padding-bottom: 120px;
}

/* 2. O Card blindado (Sem sombra, apenas com a borda sutil) */
.homeBlogSection .blogCard {
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.05);

}

/* 3. Garante que a sombra não vai tentar "brotar" quando você passar o mouse */
.homeBlogSection .blogCard:hover {
  box-shadow: none !important;
}



/* 4. A Física do Hover: Quando o card sobe, a sombra se afasta e borra mais! */
.homeBlogSection .blogCard:hover::before {
  transform: perspective(600px) rotateX(65deg) translateY(15px) scale(0.95);
  filter: blur(4px);
  opacity: 0.6;
}


/* =========================================
   BLINDAGEM DO ARRASTE (UX)
========================================= */
.blogGrid.is-dragging {
  user-select: none;
  /* Impede o texto de ficar azul */
  -webkit-user-select: none;
}

.blogGrid.is-dragging .blogCard {
  pointer-events: none;
  /* Impede que o hover da foto fique piscando loucamente ao arrastar */
}


/* =========================================
   SEÇÃO 3: WRAPPER HORIZONTAL (STICKY)
========================================= */

/* 1. A pista invisível que permite rolar para baixo */
.stickyScrollSpace {
  height: 300vh;
  /* 4 Seções = 4 telas de rolagem vertical */
  position: relative;
}

/* 2. O Wrapper agora "gruda" no teto da tela */
.servicesHorizontalWrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  /* Cola no teto enquanto houver pista */
  overflow: hidden;
  /* Cortamos a barra, o JS fará o movimento! */
  will-change: scroll-position;
}

/* Mantenha o seu .premiumServiceSection igual está... */
.premiumServiceSection {
  min-width: 100%;
  height: 100vh;
  flex-shrink: 0;
  position: relative;
  background-color: #111111;
  display: flex;
  align-items: center;
}

.premiumBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  background-color: #2b2b2b;
}

.premiumOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 40%);
}

.premiumContainer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  /* 1. Igualamos as margens de segurança do teto e do chão */
  padding-top: 12vh;
  padding-bottom: 10vh;
  display: flex;
  flex-direction: column;

  /* 2. A MÁGICA DO CENTRO: Empacota o texto e os cards juntos no meio exato da tela! */
  justify-content: center;

  /* 3. Aumentei levemente o gap para manter a separação elegante já que agora eles estão centralizados */
  gap: 60px;
}

/* --- Linha de Cima: Textos e Controles --- */
.premiumTopRow {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.premiumInfoLeft {
  max-width: 600px;
}

.dynTitle {
  font-size: clamp(32px, 3.5vw, 37px);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
  transition: opacity 0.4s ease;
}

.dynDesc {
  font-size: clamp(15px, 1.2vw, 18px);
  color: #cccccc;
  line-height: 1.6;
  margin-bottom: 32px;
  transition: opacity 0.4s ease;
}

/* --- Área Única de Controles --- */
.premiumActionArea {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 50px;
}

.hidden {
  display: none !important;
}

.dynBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #03FAD5, #06C5A9);
  color: #000000;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;

  /* NOVAS PROPRIEDADES PARA A ANIMAÇÃO SUAVE */
  max-width: 300px;
  /* Espaço de sobra para o texto caber */
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 0;
  /* Transição sedosa para acompanhar a velocidade de expansão dos cards */
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dynBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 250, 213, 0.2);
}

/* A MÁGICA: Substituímos o efeito da classe .hidden apenas para o botão */
a.dynBtn.hidden {
  display: inline-flex !important;
  /* Impede que o botão "suma" secamente */
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  /* Anula o gap de 30px da área para as setas deslizarem perfeitamente pro canto! */
  margin-right: -30px;
  pointer-events: none;
}

.premiumControls {
  display: flex;
  gap: 12px;
}

.premiumControls button {
  width: 48px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.premiumControls button svg {
  width: 20px;
  height: 20px;
  stroke: #03FAD5;
}

.premiumControls button:hover {
  background-color: rgba(3, 250, 213, 0.1);
  border-color: #03FAD5;
}

/* --- Linha de Baixo: Os Cards --- */
.premiumThumbsWrapper {
  width: 100%;
  /* Removemos o max-width: 1070px daqui. O JS vai assumir o controle! */
  overflow: hidden;
  /* A máscara agora tem transição para crescer e encolher junto com o card ativo */
  transition: max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.premiumThumbsTrack {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  min-height: 340px;
  /* Removemos o overflow-x: auto pois o JS vai controlar o slide */
  overflow: visible;
  padding-bottom: 20px;
  /* A MÁGICA: Transição suave de movimento */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.premiumThumbsTrack::-webkit-scrollbar {
  display: none;
}

.pThumb {
  width: 190px;
  /* O SEGREDO 2: Mais estreito para garantir o formato "Retrato" */
  min-width: 190px;
  height: 270px;
  /* Altura padrão dos inativos */
  border-radius: 12px;
  background-color: #4a4a4a;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px 16px;
  opacity: 0.6;
  /* Transição ultra suave para o card não "pular" quando crescer */
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;

  background-size: cover;
  background-position: center;
}

.pThumb:hover {
  opacity: 0.9;
}

/* O SEGREDO 3: O Cartão Ativo Ganha "Massa" (Fica maior) */
.pThumb.active {
  opacity: 1;
  width: 230px;
  /* Fica mais largo */
  min-width: 230px;
  height: 320px;
  /* Fica mais alto */

  /* A MÁGICA: top(24px) right(20px) bottom(40px) left(20px) */
  padding: 24px 20px 40px 20px;

  box-shadow: inset 0 0 0 2px #03FAD5;
  background-color: #333333;
}

.pThumbOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
  z-index: 1;
}

.pThumb h4 {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* O texto do card ativo fica 1px maior para acompanhar a proporção */
.pThumb.active h4 {
  font-size: 16px;
}

/* =========================================
   O "SMOOTHZINHO" (EFEITO CASCATA / STAGGER)
========================================= */

/* 1. Desacelera o slide da seção inteira para um movimento mais majestoso (0.9s) */
.premiumServiceSection {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. ESTADO INATIVO: Prepara cada elemento individualmente nas sombras */
.premiumServiceSection .dynTitle,
.premiumServiceSection .dynDesc,
.premiumServiceSection .premiumActionArea,
.premiumServiceSection .premiumBottomRow {
  opacity: 0;
  transform: translateY(40px);
  /* Apaga tudo quase instantaneamente quando você rola para fora da tela */
  transition: opacity 0.2s ease, transform 0s 0.2s;
}

/* 3. ESTADO ATIVO: Restaura a opacidade e a posição para o estado visível */
.premiumServiceSection.is-active .dynTitle,
.premiumServiceSection.is-active .dynDesc,
.premiumServiceSection.is-active .premiumActionArea,
.premiumServiceSection.is-active .premiumBottomRow {
  opacity: 1;
  transform: translateY(0);
}

/* 4. A MÁGICA DA CASCATA: Cada elemento ganha um "delay" matematicamente calculado para nascer */
.premiumServiceSection.is-active .dynTitle {
  /* Título nasce primeiro (aos 0.4s) */
  transition: opacity 0.6s ease 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.premiumServiceSection.is-active .dynDesc {
  /* Descrição nasce logo em seguida (aos 0.55s) */
  transition: opacity 0.6s ease 0.55s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}

.premiumServiceSection.is-active .premiumActionArea {
  /* Área dos botões e setas nasce depois (aos 0.7s) */
  transition: opacity 0.6s ease 0.7s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}

.premiumServiceSection.is-active .premiumBottomRow {
  /* Os cards nascem por último para fechar a cortina (aos 0.85s) */
  transition: opacity 0.6s ease 0.85s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.85s;
}

/* =========================================
   SEÇÃO 4: CTA FINAL / VISÃO INTEGRADA
========================================= */
.finalCtaSection {
  background-color: #ffffff;
  /* Fundo branco para dar o respiro visual */
  padding: clamp(80px, 10vw, 140px) 0;
  /* Padding responsivo gigante para luxo */
}

.finalCtaContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Divide exatamente ao meio */
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}


.ctaImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Mantém o formato quadrado perfeito */
  border-radius: 4px;
  /* Cantos levemente arredondados */
  object-fit: cover;
  /* ESSENCIAL: Garante que a foto preencha o quadrado sem achatar! */
}


.ctaTextBlock {
  max-width: 540px;
}

.ctaTextBlock h2 {
  font-size: clamp(32px, 3.5vw, 42px);
  color: #111111;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.ctaTextBlock p {
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  color: #313131;
  line-height: 1.6;
  margin-bottom: 40px;
}

.btnCta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--accent-cyan);
  color: #000000;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.btnCta:hover {
  background-color: #06C5A9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 250, 213, 0.2);
}

.arrowIcon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.btnCta:hover .arrowIcon {
  transform: translateX(4px);
  /* A setinha dá um 'pulinho' pra frente no hover */
}



/* =========================================
   RODAPÉ (FOOTER PREMIUM)
========================================= */
.siteFooter {
  background-color: var(--bg-darker);
  padding: 80px 0 30px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footerTop {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  /* Proporção das colunas */
  gap: 40px;
  margin-bottom: 80px;
}

.footerBrand .footerLogo {
  height: 28px;
  margin-bottom: 24px;
}

.footerBrand p {
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}

.footerLinksGroup h4,
.footerContact h4 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}

.footerLinksGroup ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footerLinksGroup ul li a {
  color: var(--text-gray);
  font-size: 14px;
  transition: color 0.3s ease;
}

.footerLinksGroup ul li a:hover {
  color: var(--accent-cyan);
}

.footerContact p {
  color: var(--text-gray);
  font-size: 14px;
  margin-bottom: 12px;
}

.contactEmail {
  color: #ffffff !important;
  font-weight: 500;
}

.socialLinks {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.socialLinks a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.socialLinks a:hover {
  background-color: var(--accent-cyan);
  color: #000000;
  transform: translateY(-3px);
}

.footerBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footerBottom p {
  color: #777777;
  font-size: 13px;
}

.footerLegal {
  display: flex;
  gap: 24px;
}

.footerLegal a {
  color: #777777;
  font-size: 13px;
  transition: color 0.3s ease;
}

.footerLegal a:hover {
  color: #ffffff;
}

/* =========================================
   MODAL GLASSMORPHISM & TYPEFORM STYLE
========================================= */

/* O Fundo Desfocado (Vidro Fosco) */
.glassModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  /* Preto transparente leve */
  backdrop-filter: blur(12px);
  /* A MÁGICA: Borra o site lá atrás! */
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.glassModal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* A Caixa Escura Flutuante */
.glassModalContent {
  background: #131313;
  /* PRETO ABSOLUTO COMO PEDIDO */
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Borda mais sutil */
  border-radius: 20px;
  width: 100%;
  max-width: 650px;
  padding: 50px;

  margin-top: -50px;

  position: relative;
  transform: translateY(30px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.glassModal.is-open .glassModalContent {
  transform: translateY(0);
}

/* Botão de Fechar no canto */
.closeModalBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: #888;
  font-size: 28px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.closeModalBtn:hover {
  color: #fff;
}

/* Barra de Progresso do Typeform (Efeito Lava Respirando) */
.formProgress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  /* Fundo mais discreto para destacar a luz */
  border-radius: 2px;
  margin-bottom: 40px;
}

.progressBar {
  height: 100%;
  width: 33.33%;

  /* 1. O Gradiente Lava Ultra Smooth: Bordas bem escuras e o centro claro suave */
  background: linear-gradient(90deg, #014d42 0%, #014d42 20%, #00ffd9 50%, #09ddbd 80%, #014d42 100%);
  background-size: 200% 100%;
  /* Esticado em 200% para o loop ser perfeito */

  /* Mantemos o arredondamento natural da ponta da barra! */
  border-radius: 4px;
  transition: width 0.9s ease;

  /* 2. O Motor Duplo chamando as Keyframes */
  animation:
    lavaFlow 8s linear infinite,
    breathingLight 8s ease-in-out infinite alternate;
}

/* ==========================================
   AS KEYFRAMES
========================================== */

/* Ajustamos a matemática para a luz dar a volta sem NENHUM corte seco */
@keyframes lavaFlow {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes breathingLight {
  0% {
    filter: brightness(0.6);
    box-shadow: 0 0 2px rgba(3, 250, 213, 0.356);
  }

  100% {
    filter: brightness(1.3);
    box-shadow: 0 0 14px rgba(3, 250, 213, 0.9);
  }
}

/* O fluxo de Etapas */
.formStep {
  display: none;
  animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.formStep.active {
  display: block;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.formStep h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 30px;
  line-height: 1.3;
}

.btnCyan {
  background: linear-gradient(to right, #03FAD5, #06C5A9);
  color: #000000;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btnCyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 250, 213, 0.2);
}

/* Design dos Campos de Input Premium */
.inputGroup {
  margin-bottom: 24px;
}

.inputGroup label {
  display: block;
  color: #b3b3b3;
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 500;
}

.inputGroup input,
.inputGroup select,
.inputGroup textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 24px;
  /* FONTE GIGANTE PARA DAR FOCO */
  font-family: var(--font-main);
  padding: 15px 0;
  /* Mais respiro */
  outline: none;
  transition: border-color 0.3s ease;
}

.inputGroup input:focus,
.inputGroup select:focus,
.inputGroup textarea:focus {
  border-bottom-color: #03FAD5;
}

.inputGroup input::placeholder,
.inputGroup textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

/* Customização do Select */
.selectWrapper {
  position: relative;
}

.selectWrapper::after {
  content: '▼';
  position: absolute;
  right: 10px;
  top: 15px;
  color: #03FAD5;
  font-size: 12px;
  pointer-events: none;
}

.inputGroup select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.inputGroup select option {
  background: #111;
  color: #fff;
}

/* Botões do Formulário */
.stepActions {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.btnBack {
  background: transparent;
  color: #888;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s;
}

.btnBack:hover {
  color: #fff;
}

/* Tela de Sucesso */
.successStep {
  text-align: center;
}

.successStep svg {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.successStep h3 {
  margin-bottom: 15px;
}

.successStep p {
  color: #b3b3b3;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ==========================================
   DROPDOWN CUSTOMIZADO (PREMIUM)
========================================== */
.customDropdown {
  position: relative;
  width: 100%;
  font-family: var(--font-main);
  user-select: none;
}

.dropdownHeader {
  width: 100%;
  background: transparent;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
  /* Fica apagadinho igual placeholder */
  font-size: 24px;
  padding: 15px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.3s ease, color 0.3s ease;
}

/* Quando tem valor, ele acende pra branco */
.dropdownHeader.has-value {
  color: #fff;
}

.dropdownHeader:hover {
  border-bottom-color: #03FAD5;
}

.dropdownHeader .arrow {
  font-size: 14px;
  color: #03FAD5;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.customDropdown.is-open .dropdownHeader .arrow {
  transform: rotate(180deg);
}

.dropdownList {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-top: 10px;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-15px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
}

.customDropdown.is-open .dropdownList {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdownList li {
  padding: 16px 20px;
  font-size: 18px;
  color: #b3b3b3;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdownList li:last-child {
  border-bottom: none;
}

/* O efeitinho de deslizar para a direita quando passa o mouse */
.dropdownList li:hover {
  background: rgba(3, 250, 213, 0.08);
  color: #03FAD5;
  padding-left: 28px;
}

/* ==========================================
   ESTILIZAÇÃO DO SCROLLBAR DO DROPDOWN
========================================== */
.dropdownList::-webkit-scrollbar {
  width: 8px;
}

.dropdownList::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  margin: 5px 0;
}

.dropdownList::-webkit-scrollbar-thumb {
  background: #03FAD5;
  /* O Ciano Premium */
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(3, 250, 213, 0.6);
  /* Brilho Neon */
}

.dropdownList::-webkit-scrollbar-thumb:hover {
  background: #02d4b5;
  box-shadow: 0 0 15px rgba(3, 250, 213, 0.9);
}

/* DESIGN DOS NOVOS CAMPOS DO FORMULÁRIO INTELIGENTE */
.fieldLabel {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #03FAD5;
  margin-bottom: 8px;
  text-align: left;
}

/* Grid Cinematográfica para Escolha dos Anos */
.yearsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.yearCheckboxLabel {
  display: block;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 14px;
  font-size: 1rem;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  transition: all 0.25s ease;
  user-select: none;
}

.yearCheckboxLabel input[type="checkbox"] {
  display: none;
  /* Esconde o check quadrado feio do navegador */
}

.yearCheckboxLabel:has(input:checked) {
  background: rgba(3, 250, 213, 0.1);
  border-color: #03FAD5;
  color: #03FAD5;
  box-shadow: 0 0 15px rgba(3, 250, 213, 0.15);
}

.yearCheckboxLabel:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Textarea Premium (Agora mais alto para caber 2 ou 3 parágrafos) */
.typeformStyle textarea {
  width: 100%;
  min-height: 140px;
  /* Aumenta a caixa para caber bastante texto */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 15px;
  color: #ffffff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: all 0.3s ease;
}

.typeformStyle textarea:focus {
  border-color: #03FAD5;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 10px rgba(3, 250, 213, 0.1);
}

/* ==========================================
   ESTILIZAÇÃO DO SCROLLBAR DO TEXTAREA
========================================== */
/* Largura da barra de rolagem */
.typeformStyle textarea::-webkit-scrollbar {
  width: 8px;
}

/* O "trilho" por onde a barra corre (fundo escuro sutil) */
.typeformStyle textarea::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  margin: 5px 0;
  /* Dá um respiro nas pontas */
}

/* O "Thumb" (o retângulo de pontas arredondadas que você arrasta) */
.typeformStyle textarea::-webkit-scrollbar-thumb {
  background: #03FAD5;
  /* A cor Ciano da barra de progresso */
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(3, 250, 213, 0.6);
  /* O efeito de brilho Neon! */
}

/* Efeito quando passa o mouse em cima da barrinha */
.typeformStyle textarea::-webkit-scrollbar-thumb:hover {
  background: #02d4b5;
  box-shadow: 0 0 15px rgba(3, 250, 213, 0.9);
}

/* ==========================================
   CUSTOM DROPDOWN INTELIGENTE (MODAL)
========================================== */
.customDropdown {
  position: relative;
  width: 100%;
}

.dropdownHeader {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #b3b3b3;
  padding: 12px 0;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

/* Quando passa o mouse ou quando está aberto, acende em Ciano */
.dropdownHeader:hover,
.customDropdown.is-open .dropdownHeader {
  border-color: #03FAD5;
  color: #ffffff;
}

/* Mantém o texto branco depois que escolheu uma opção */
.dropdownHeader.has-value {
  color: #ffffff;
}

/* A setinha verde */
.dropdownHeader .arrow {
  font-size: 0.8rem;
  color: #03FAD5;
  transition: transform 0.3s ease;
}

/* Gira a setinha quando abre */
.customDropdown.is-open .dropdownHeader .arrow {
  transform: rotate(180deg);
}

.dropdownList {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-top: 5px;
  padding: 0;
  list-style: none;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

/* A MÁGICA: O que acontece quando o JS injeta a classe is-open */
.customDropdown.is-open .dropdownList {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Design dos itens da lista */
.dropdownList li {
  padding: 14px 16px;
  color: #cccccc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.95rem;
}

.dropdownList li:last-child {
  border-bottom: none;
}

/* Efeito de Hover nas opções da lista */
.dropdownList li:hover {
  background: rgba(3, 250, 213, 0.1);
  color: #03FAD5;
}

/* Responsividade do Grid de Anos para Smartphones */
@media (max-width: 480px) {
  .yearsGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ==========================================
   PRELOADER PREMIUM (TELA DE ENTRADA)
========================================== */
.premiumPreloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 1. O NOVO FUNDO GRADIENTE DA FIGMA (#222222 para #151515) */
  background: linear-gradient(90deg, #151515 0%, #222 100%);
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.premiumPreloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloaderContent {
  width: 90%;
  max-width: 1712px;
  /* A largura exata do seu Figma! */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloaderLogo {
  height: 90px;
  /* 3. LOGO GIGANTE: Dobramos o tamanho da logo */
  margin-bottom: 120px;
  /* Um pouco mais de distância para a barra não sufocar */
}

.preloaderInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--font-main);
  color: var(--text-light);
  font-size: 40px;
  /* Aumentei a fonte para combinar com a escala */
  font-weight: 300;
  letter-spacing: 0.5px;
}

.preloaderPercent {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.preloaderText,
.preloaderPercent {
  position: relative;
}

/* Criamos um "clone fantasma" dos textos */
.preloaderText::after,
.preloaderPercent::after {
  position: absolute;
  top: 155px;
  /* Distância exata para passar da barra e bater no chão */
  transform: scaleY(-1);
  /* Vira o texto de ponta cabeça (Efeito Espelho) */
  filter: blur(3px);
  /* Embaça levemente como o vidro do chão */
  opacity: 0.35;
  /* Fica sutil, menos brilhante que o texto real */
  pointer-events: none;

  /* Degradê que faz a parte de baixo do reflexo sumir no escuro */
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
}

.preloaderText::after {
  content: 'Carregando...';
  left: 0;
}

.preloaderPercent::after {
  content: attr(data-percent);
  /* Puxa aquele número do JavaScript em tempo real! */
  right: 0;
}

/* --- KEYFRAME: A RESPIRAÇÃO DO REFLEXO DOS TEXTOS --- */
@keyframes textReflectionBreathe {
  0% {
    opacity: 0.15;
    /* Mais apagadinho */
  }

  100% {
    opacity: 0.60;
    /* Brilha mais forte */
  }
}

.preloaderTrack {
  width: 100%;
  height: 24px;
  /* Barra com 24px */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  /* Arredondamento perfeito para 24px (metade) */
  position: relative;
  overflow: visible;
}

.preloaderBar {
  height: 100%;
  width: 0%;
  /* Começa zerado, o JS vai preencher */
  border-radius: 12px;
  /* Acompanha o track */

  /* O Gradiente da Lava na cor principal */
  background: linear-gradient(90deg, #014d42 0%, #03FAD5 50%, #06C5A9 80%, #014d42 100%);
  background-size: 200% 100%;
  animation: lavaFlow 2s linear infinite;

  position: relative;
  transition: width 0.1s linear;
}

/* O Efeito de Reflexo no Chão (Espelhado) */
.preloaderBar::after {
  content: '';
  position: absolute;
  top: 36px;
  /* Empurra o reflexo exatos 12px para baixo da barra */
  left: 0;
  width: 100%;
  height: 24px;
  /* Reflexo agora tem a mesma grossura de 24px da barra */
  background: inherit;
  filter: blur(14px);
  /* Blur maior para espalhar a luz no chão polido */
  opacity: 0.6;
}

/* ==========================================
   TRAVA DE DESENVOLVIMENTO (BLOG E PESQUISA)
   Bloqueia os cliques e avisa sobre o WordPress
========================================== */
.homeBlogSection,
.searchSuggestions {
  position: relative;
}

/* 1. O Vidro Fosco (Cobre a seção inteira e bloqueia cliques) */
.homeBlogSection::before,
.searchSuggestions::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(04px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  cursor: not-allowed;
}

/* Ajuste de iluminação: Fundo claro no Blog, escuro na Pesquisa */
.homeBlogSection::before {
  background: rgba(244, 244, 244, 0.4);
}

.searchSuggestions::before {
  background: rgba(10, 10, 10, 0.7);
  /* A MÁGICA: Forçamos o vidro a furar o limite e ocupar 100% da largura da tela */
  width: 100vw;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* 2. A Caixa de Mensagem Premium injetada via CSS */
.homeBlogSection::after,
.searchSuggestions::after {
  /* O \A faz a quebra de linha no CSS! */
  content: attr(data-dev-msg);
  white-space: pre-wrap;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;

  background: #111111;
  color: #b3b3b3;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.6;
  text-align: center;
  padding: 35px 40px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid #03FAD5;
  /* A linha Ciano Premium no topo */
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);

  width: 90%;
  max-width: 420px;
  pointer-events: auto;
  /* Permite selecionar o texto do aviso */
}

.btnMenuMobile,
.menuMobileOverlay {
  display: none;
}



/* ========================================================
   RESPONSIVO E MENU MOBILE (PREMIUM MAXX)
======================================================== */
@media (max-width: 1024px) {

  .btnMenuMobile {
    display: flex;
  }

  .menuMobileOverlay {
    display: block;
  }

  /* 1. Esconde a navegação, topbar e a barra de pesquisa de Desktop */
  .mainNav,
  .globalSpotlight,
  .topBar {
    display: none !important;
  }

  .logo {
    width: 360px;
    position: relative;
    z-index: 2001;
  }

  /* 2. O BOTÃO HAMBÚRGUER "ESCADINHA" */
  .btnMenuMobile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Alinha os palitos à direita formando a escadinha */
    gap: 6px;
    width: 32px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2000;
    /* Sempre no topo */
  }

  .palito {
    height: 2px;
    background-color: #ffffff;
    /* Cor branca do Premium Maxx */
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
  }

  /* Larguras decrescentes conforme o seu print */
  .palito:nth-child(1) {
    width: 100%;
  }

  .palito:nth-child(2) {
    width: 75%;
  }

  .palito:nth-child(3) {
    width: 50%;
  }

  /* ANIMAÇÃO PARA O "X" QUANDO ABRE O MENU */
  .btnMenuMobile.ativo .palito {
    width: 100%;
  }

  /* Iguala o tamanho de todos para o X ficar perfeito */
  .btnMenuMobile.ativo .palito:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .btnMenuMobile.ativo .palito:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .btnMenuMobile.ativo .palito:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 3. OVERLAY PRINCIPAL ESCURO */
  .menuMobileOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0a0a0a;
    /* Fundo idêntico ao da Premium Maxx */
    z-index: 2000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  .menuMobileOverlay.ativo {
    opacity: 1;
    visibility: visible;
  }

  /* 4. AS GAVETAS DESLIZANTES */
  .menuPainel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 100px 20px 40px;
    /* Padding top compensa a altura do cabeçalho */
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .menuPainel.ativo {
    transform: translateX(0);
  }

  .menuPainel.escondido-esquerda {
    transform: translateX(-100%);
  }

  /* 5. ESTILIZAÇÃO DOS LINKS (LISTAS) */
  .menuMobileItens,
  .menuMobileLinksFinais {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menuMobileItens li,
  .menuMobileLinksFinais li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .menuMobileItens li a,
  .menuMobileItens li.abre-submenu,
  .menuMobileLinksFinais li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.3s ease;
    text-decoration: none;
  }

  .menuMobileLinksFinais li a {
    font-size: 1.05rem;
    font-weight: 400;
    color: #b3b3b3;
  }

  .menuMobileItens li.abre-submenu:hover,
  .menuMobileLinksFinais li a:hover {
    color: var(--accent-cyan, #03FAD5);
  }

  .menuMobileItens .seta {
    width: 20px;
    height: 20px;
    color: var(--accent-cyan, #03FAD5);
  }

  /* ========================================================
       DIVISÃO DE ÁREAS DE CLIQUE (LINK VS GAVETA) - PREMIUM MAXX
    ======================================================== */
  .menuMobileItens li.item-dividido {
    display: flex !important;
    flex-direction: row !important;
    /* Força a ficar na mesma linha */
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Linha divisória fina */
  }

  .item-dividido .link-categoria {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 24px 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .item-dividido .hitbox-seta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 60px;
    flex-shrink: 0;
    /* IMPEDE A SETA DE SER ESMAGADA PRA BAIXO */
    cursor: pointer;
  }

  .item-dividido .link-categoria:hover,
  .item-dividido .hitbox-seta:hover .seta {
    color: var(--accent-cyan, #03FAD5);
  }

  /* 6. TOPO DA GAVETA SECUNDÁRIA (BOTÃO VOLTAR) */
  .topoPainel {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .topoPainel.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tituloPainel {
    font-size: 0.9rem;
    color: #b3b3b3;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
  }

  .btnVoltarPequeno {
    background: transparent;
    border: none;
    color: var(--accent-cyan, #03FAD5);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .iconeVoltar {
    width: 16px;
    height: 16px;
  }

  /* 7. BOTÃO CTA FINAL DENTRO DO MOBILE */
  .menuMobileCta {
    margin-top: 40px;
  }

  .menuMobileCta .btnCyan {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 16px 0;
    text-decoration: none;
  }

  /* ========================================================
     BOTÕES SECUNDÁRIOS MOBILE (TOP BAR NO MENU)
  ======================================================== */
  .menuMobileSecondary {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Linha separadora elegante */
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px; /* Dá um respiro para quem fizer scroll até ao fundo */
  }

  .menuMobileSecondary a, .langActiveMobile {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b3b3b3;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    text-transform: none; /* Garante que não fica tudo em maiúsculas */
  }

  .menuMobileSecondary img {
    width: 18px;
    opacity: 0.6;
    filter: brightness(0) invert(1);
  }

  /* ========================================================
     SELETOR DE IDIOMAS MOBILE (ESTILO APP NATIVO)
  ======================================================== */
  .langSelectorMobile {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre o título e as opções */
  }

  .langLabelMobile {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #b3b3b3;
    font-size: 1rem;
  }

  .langLabelMobile img {
    width: 18px;
    opacity: 0.6;
    filter: brightness(0) invert(1);
  }

  .langOptionsMobile {
    display: flex;
    gap: 16px;
    padding-left: 30px; /* Alinha os idiomas com o texto de cima */
    align-items: center;
  }

  /* O IDIOMA INATIVO (Apagado e sem bandeira) */
  .lang-opt {
    color: #555555;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .lang-opt .flag-icon {
    display: none; /* Esconde a bandeira por padrão */
    font-size: 1.1rem;

    filter: none !important; /* Arranca a tinta branca */
    opacity: 1 !important;
  }

  /* O IDIOMA ATIVO (Aceso e com bandeira) */
  .lang-opt.active {
    color: #ffffff;
    font-weight: 600;
  }

  .lang-opt.active .flag-icon {
    display: inline-block; /* A Mágica: Mostra a bandeira só no selecionado! */
  }

  /* ---------------------------------------------------
     CABEÇALHO MOBILE: A BLINDAGEM DEFINITIVA (Z-INDEX)
  --------------------------------------------------- */
  .siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
  }

  /* 1. Tiramos o fundo do "Pai", senão a gaveta sobrepõe-se a ele */
  .mainHeader {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* 2. O fundo PRETO e a Borda vêm para o "Filho" (que é irmão da gaveta) */
  .mainHeaderFlex {
    background-color: #0a0a0a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 20px !important; /* Dá o respiro e alinha o conteúdo no telemóvel */
    position: relative;
    /* A MÁGICA REAL: Tem que ser MAIOR que os 2000 da gaveta! */
    z-index: 2010 !important; 
  }

  /* 3. A sombra entra no bloco certo quando fizer scroll no site */
  .mainHeader.is-fixed .mainHeaderFlex {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7) !important;
  }
}

/* ========================================================
   AJUSTES RESPONSIVOS: HERO E BLOG (CELULARES)
======================================================== */
@media (max-width: 768px) {

  

  /* --- 1. SEÇÃO HERO (VÍDEO DE FUNDO) --- */
  .heroContent h1 {
    margin-top: 80px;
    /* Remove o empurrão gigante de 300px do desktop */
    font-size: 32px;
    /* Garante um tamanho seguro para não quebrar muitas linhas */
  }

  .heroContent p {
    font-size: 16px;
  }

  /* --- 2. SEÇÃO DE MATÉRIAS (CARROSSEL INFINITO) --- */
  .homeBlogSection {
    padding: 80px 0;
    /* Reduz o espaço em branco exagerado no mobile */
  }

  .blogHeader {
    margin-bottom: 40px;
    padding: 0 20px;
    /* Protege o texto de encostar na borda do vidro da tela */
  }

  /* O grande truque: Reduzimos o cartão de 420px para 300px. 
       Assim o usuário consegue ver que tem "mais um cartão" cortado na direita e entende que deve arrastar! */
  .blogCard {
    width: 300px;
    min-width: 300px;
    height: 460px;
  }

  .blogImageWrapper {
    height: 200px;
    /* Achata levemente a imagem para sobrar espaço pro texto */
  }

  .blogContent {
    padding: 24px;
    /* Diminui o respiro interno do cartão */
  }

  .blogContent h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .blogContent p {
    font-size: 15px;
    margin-bottom: 24px;
  }

  /* --- 3. SEÇÃO DE SERVIÇOS (O TRUQUE DA ESCALA CORRIGIDO E BLINDADO) --- */

  /* 1. A TRAVA MESTRA: Impede que os cartões gigantes alarguém a tela e quebrem o scroll! */
  .premiumServiceSection {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .premiumContainer {
    padding-top: 10px;
    /* Descola do teto para o cabeçalho respirar */
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: center;
    /* MÁGICA: Traz o bloco inteiro de volta pro meio da tela! */
    gap: 30px;
    /* Distância perfeita e controlada entre as setas e os cartões */
  }

  .premiumTopRow {
    width: 100%;
    margin-bottom: 0;
    /* Zeramos aqui pois o gap do container já faz o distanciamento */
    position: relative;
    z-index: 5;
  }

  .premiumInfoLeft {
    width: 100%;
    max-width: 100%;
  }

  .dynTitle {
    font-size: 28px;
    margin-bottom: 12px;
    line-height: 1.2;
    white-space: normal;
    max-width: 100%;
  }

  .dynDesc {
    font-size: 15px;
    margin-bottom: 20px;
    display: block;
    white-space: normal;
    max-width: 100%;
    color: #cccccc;
  }

  .premiumActionArea {
    gap: 15px;
  }

  .dynBtn {
    font-size: 13px;
    padding: 10px 18px;
  }

  .premiumControls button {
    width: 40px;
    height: 40px;
  }

  /* A MÁGICA DA ESCALA SEM BURACO */
  .premiumBottomRow {
    width: 133%;
    transform-origin: left top;
    transform: scale(0.75);
    margin-bottom: -85px;
  }

  /* ... (aqui em cima termina o código da premiumBottomRow) ... */

  /* --- 4. SEÇÃO CTA FINAL --- */
  .finalCtaSection {
    padding: 60px 0;
  }

  .finalCtaContainer {
    grid-template-columns: 1fr;
    /* Quebra as 2 colunas do desktop em 1 só */
    gap: 40px;
    text-align: center;
    /* Centraliza tudo */
  }

  .ctaImageBlock {
    max-width: 350px;
    /* Evita que a foto fique gigante na tela do celular */
    margin: 0 auto;
  }

  .ctaTextBlock {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza o botão do Fale Conosco */
  }

  .ctaTextBlock h2 {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .ctaTextBlock p {
    font-size: 15px;
    margin-bottom: 30px;
  }


  /* --- 5. RODAPÉ (FOOTER) --- */
  .siteFooter {
    padding: 60px 0 30px 0;
  }

  .footerTop {
    grid-template-columns: 1fr;
    /* Empilha todas as 4 colunas em 1 */
    gap: 40px;
    text-align: center;
  }

  .footerBrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza a Logo e o texto */
  }

  .socialLinks {
    justify-content: center;
    /* Centraliza as bolinhas das redes sociais */
  }

  .footerBottom {
    flex-direction: column-reverse;
    /* Coloca o Copyright por baixo dos links legais */
    gap: 20px;
    text-align: center;
  }

  .footerLegal {
    justify-content: center;
    /* Centraliza os links de Política e Termos */
  }

  /* ========================================================
   AJUSTES RESPONSIVOS: PRELOADER (CELULARES)
  ======================================================== */

  .premiumPreloader {
    height: 100dvh;
    /* Usa a altura dinâmica real do telemóvel */
    min-height: -webkit-fill-available;
    /* Blindagem extra exclusiva para a Apple */
    bottom: 0;
  }

  .preloaderLogo {
    height: 40px;
    /* Reduz a altura imponente para o padrão mobile */
    max-width: 90vw;
    /* Impede categoricamente que a logo vaze da tela */
    object-fit: contain;
    margin-bottom: 70px;
    /* Diminui o buraco negro entre a logo e a barra */
  }

  .preloaderInfo {
    font-size: 22px;
    /* Adequa o texto "Carregando... 37%" para a tela estreita */
    margin-bottom: 12px;
  }

  .preloaderTrack {
    height: 16px;
    /* Deixa a barra de loading mais fina e elegante no celular */
  }

  /* --- RECALCULANDO A MATEMÁTICA DOS REFLEXOS PARA O MOBILE --- */

  .preloaderText::after,
  .preloaderPercent::after {
    top: 90px;
    /* Sobe o reflexo fantasma do texto para acompanhar a nova escala */
  }

  .preloaderBar::after {
    top: 24px;
    /* Sobe o reflexo de chão da barra de progresso */
    height: 16px;
    /* Deixa o reflexo com a mesma finura da barra principal */
  }

  /* --- 6. MODAL DE CONTATO (TYPEFORM STYLE) --- */
    .glassModalContent {
        padding: 40px 24px 30px; /* Reduz o respiro gigante das laterais */
        width: 92%; /* Garante que a caixa não encoste nos vidros do celular */
        height: 750px;
        max-height: 90vh; /* Impede que o modal fique maior que a tela */
        overflow-y: auto; /* Permite rolar o conteúdo interno se a tela for muito pequena */
    }

    .formStep h3 {
        font-size: 20px; /* Reduz a pergunta gigante de 24px */
        margin-bottom: 20px;
    }

    .inputGroup input, 
    .inputGroup select, 
    .inputGroup textarea,
    .dropdownHeader {
        font-size: 18px !important; /* Reduz a fonte de digitação para não quebrar quebrar o layout */
        padding: 10px 0;
    }

    .dropdownList li {
        font-size: 15px; 
        padding: 12px 16px;
        z-index: 1000; /* Garante que a lista fique acima de outros elementos */
    }

    /* Ajuste da grade de Anos (2 colunas invés de 3) */
    .yearsGrid {
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
    }

    .yearCheckboxLabel {
        padding: 10px;
        font-size: 14px;
    }

    /* Empilha os botões para facilitar o clique com o dedão */
    .stepActions {
        flex-direction: column-reverse; /* Coloca o "Voltar" embaixo do "Continuar" */
        gap: 12px;
        margin-top: 25px;
    }

    .btnCyan, .btnBack {
        width: 100%; /* Botões esticados de ponta a ponta */
        justify-content: center;
        padding: 14px;
    }
    
    .typeformStyle textarea {
        min-height: 110px; /* Diminui a altura da caixa de texto no mobile */
    }

    .customDropdown .dropdownList {
            max-height: 400px; /* Trava a altura para caber umas 3.5 opções na tela */
            overflow-y: auto; /* Cria o scroll magnético por dentro da listinha */
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch; /* Deixa o arrastar macio no iPhone */
        }

}