/* ============================================
   RESPONSIVE FIXES - oCrisMiller Site
   Correções completas para mobile e tablet
   ============================================ */

/* Prevenir scrollbars duplicados e overflow horizontal */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* Prevenir scrollbars em todos os cards, seções e grids */
.card,
.card.secondary,
.card.primary,
.service-card,
.faq-card,
.metodologia-card,
.metodologia-single-card,
.section-pilares-1,
.section-pilares-2,
.section-pilares-mc,
.section-pilares-mc-image,
.section-pilares-cf,
.section-pilares-cf-image,
.home-services-grid,
.pilares-sections-grid,
.pilares-sections-grid-inverted-1,
.pilares-sections-grid-inverted-2,
.faq-cards-grid,
.metodologia-cards-grid {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
}

/* Garantir que cards não mostrem scrollbars e sempre sejam visíveis - SEM ANIMAÇÕES */
.card {
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  position: relative !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  opacity: 1 !important; /* Sempre visível */
  visibility: visible !important; /* Sempre visível */
  transform: none !important; /* Sem transformações */
  transition: none !important; /* Sem transições */
  animation: none !important; /* Sem animações */
}

/* Restaurar cor preta dos cards secondary */
.card.secondary {
  background-color: #000 !important;
  background: #000 !important;
}

/* ============================================
   HERO SECTION - Fix para ordem de elementos
   ============================================ */
.home-hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  padding: 2rem !important;
  position: relative !important;
}

/* Seção superior - Título e Subtítulo - Centralizada no meio */
.hero-top-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  width: 100% !important;
  padding-top: 3rem !important;
}

.hero-top-section .titulo {
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
  text-align: center !important;
  font-size: 85px !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  color: #fff !important;
}

.hero-top-section .hero-subtitle {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 130% !important;
  letter-spacing: 0% !important;
}

/* Seção inferior - Botão e Metodologia - Fixada no canto inferior */
.hero-bottom-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  padding-bottom: 2rem !important;
}

.hero-bottom-section .hero-button {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  flex: 0 0 auto !important;
  background-color: #FF3300 !important;
  color: #fff !important;
  border-radius: 30px !important;
  width: 500px !important;
  height: 55px !important;
  padding: 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  cursor: pointer !important;
  transition: none !important; /* Sem transições */
}

.hero-bottom-section .hero-test-text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
  font-size: 14px !important;
  color: #fff !important;
  text-align: center !important;
}

.hero-bottom-section .hero-button:hover {
  background-color: #e62e00 !important;
  transition: none !important; /* Sem transições */
}

.hero-top-section .titulo span {
  color: #FF3300 !important;
}

.home-hero-content .text-block-2 {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
  order: 2 !important;
  text-align: center !important;
  font-size: 20px !important;
  text-transform: capitalize !important;
  line-height: 1.5 !important;
  color: #fff !important;
}

/* Garantir que o fundo preto seja mantido */
.home-hero-image-wrapper {
  background-color: #000 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Vídeo de fundo - Otimizado para performance */
.hero-video-bg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  object-fit: cover !important;
  /* Otimizações de performance */
  will-change: transform !important;
  transform-origin: center center !important;
  /* Reduzir qualidade de renderização para melhor performance */
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  /* Prevenir repaint desnecessário */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  perspective: 1000px !important;
  -webkit-perspective: 1000px !important;
}

/* Overlay preto com 50% de opacidade */
.hero-video-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
  z-index: 2 !important;
}

/* Garantir que o conteúdo não seja afetado pelo mix-blend-mode */
.home-hero-content {
  mix-blend-mode: normal !important;
  color: #fff !important;
  position: relative !important;
  z-index: 3 !important;
}

.home-hero-content .button-2 {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto !important;
  order: 3 !important;
  text-align: center !important;
}

.home-hero-content .button-2 .button {
  text-transform: none !important;
}

.home-hero-content .button-2 .button-inner-text,
.home-hero-content .button-2 .button-inner-text-hover {
  text-transform: none !important;
}

.home-hero-content .metodologia-text {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
  display: block !important;
  width: 100%;
  text-align: center !important;
  flex: 0 0 auto !important;
  order: 4 !important;
  color: #fff !important;
}

/* ============================================
   TABLET (max-width: 991px)
   ============================================ */
@media screen and (max-width: 991px) {
  /* Hero Section - Ajustes */
  .home-hero-image-wrapper {
    height: 60vh !important;
    min-height: 400px;
  }
  
  .titulo {
    font-size: 2.5rem !important;
    line-height: 110% !important;
    padding: 0 1rem;
  }
  
  .home-hero-content {
    padding: 2rem !important;
  }
  
  .text-block-2 {
    font-size: 0.9rem !important;
    padding-top: 1.5rem !important;
  }
  
  /* Navbar - Melhorias */
  .navbar-wrapper {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Cards - Ajustes */
  .card {
    border-radius: 1.5rem !important;
  }
  
  /* Grids - Melhorias */
  .home-services-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.5rem !important;
  }
  
  .home-news-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: 1.5rem !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: 2rem !important;
  }
  
  .about-team-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: 1.5rem !important;
  }
  
  .blog-posts-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: 1.5rem !important;
  }
  
  /* Process Grid - Ajustes */
  .home-process-grid {
    flex-direction: column !important;
  }
  
  .home-process-grid-right {
    position: static !important;
    margin-top: 2rem;
  }
  
  /* Services Nav - Ajustes */
  .services-nav {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1rem !important;
  }
  
  .services-nav-item {
    width: 100%;
    justify-content: center;
  }
  
  /* About Hero Grid */
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.5rem !important;
  }
  
  /* Project Preview */
  .project-preview {
    height: 50vh !important;
    min-height: 300px;
  }
  
  /* Button Wrapper */
  .button-wrapper-full {
    width: 100%;
  }
  
  .button-wrapper-full .button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   MOBILE LANDSCAPE (max-width: 767px)
   ============================================ */
@media screen and (max-width: 767px) {
  /* Global Padding já está definido no sistema responsivo acima */
  
  /* Hero Section - Mobile */
  .home-hero-image-wrapper {
    height: 50vh !important;
    min-height: 350px;
    border-radius: 1rem !important;
  }
  
  .home-hero-content {
    padding: 1.5rem !important;
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    right: 1rem !important;
    bottom: auto !important;
  }
  
  .titulo {
    font-size: 1.75rem !important;
    line-height: 110% !important;
    margin-bottom: 1rem !important;
  }
  
  .text-block-2 {
    font-size: 0.875rem !important;
    padding-top: 1rem !important;
    line-height: 140% !important;
  }
  
  .button-2 {
    padding: 0.875rem 1.25rem !important;
    font-size: 12px !important;
    margin-top: 1rem !important;
  }
  
  /* Navbar - Mobile */
  .navbar-wrapper {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 1rem !important;
  }
  
  .navbar-inner {
    padding: 0.5rem !important;
  }
  
  /* Cards - Mobile */
  .card {
    border-radius: 1.25rem !important;
  }
  
  .sesh2 {
    padding: 1.5rem !important;
  }
  
  .sesh2.medium {
    padding: 1.5rem !important;
  }
  
  /* Grids - Mobile */
  .home-services-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.25rem !important;
  }
  
  .home-news-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.25rem !important;
  }
  
  .footer-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 2rem !important;
  }
  
  .about-team-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.25rem !important;
  }
  
  .blog-posts-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.25rem !important;
  }
  
  .home-process-grid {
    flex-direction: column !important;
  }
  
  .home-process-grid-left {
    margin-bottom: 1.5rem;
  }
  
  .home-process-grid-right {
    position: static !important;
  }
  
  /* Services */
  .services-nav {
    grid-template-columns: 1fr !important;
    grid-row-gap: 0.75rem !important;
  }
  
  .services-architecture-grid,
  .services-interior-grid,
  .services-rendering-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.25rem !important;
  }
  
  /* About */
  .about-hero-grid {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1.25rem !important;
  }
  
  /* Project Preview */
  .project-preview {
    height: 40vh !important;
    min-height: 250px;
  }
  
  .project-preview-content-top,
  .project-preview-content-bottom {
    padding: 1rem !important;
  }
  
  /* Buttons */
  .button {
    padding: 0.875rem 1.125rem !important;
    font-size: 12px !important;
  }
  
  .button.large {
    padding: 1rem 1.25rem !important;
    font-size: 13px !important;
  }
  
  .button-wrapper-full .button {
    width: 100%;
  }
  
  /* Footer */
  .footer-bottom-grid {
    flex-direction: column !important;
    text-align: center !important;
    grid-row-gap: 1rem !important;
  }
  
  .cta-contact-social-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-row-gap: 0.5rem !important;
  }
  
  /* Images Responsivas */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Text Sizes */
  .text-size-medium {
    font-size: 0.5875rem !important; /* Reduzido 5px de 0.9rem (14.4px -> 9.4px) */
  }
  
  .text-size-large {
    font-size: 1rem !important;
  }
}

/* ============================================
   MOBILE PORTRAIT (max-width: 479px)
   ============================================ */
@media screen and (max-width: 479px) {
  /* Global Padding - Mobile Portrait (sobrescrito pelo sistema responsivo acima) */
  
  /* Hero Section - Mobile Portrait */
  .home-hero-image-wrapper {
    height: 45vh !important;
    min-height: 300px;
    border-radius: 0.875rem !important;
  }
  
  .home-hero-content {
    padding: 1rem !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
  }
  
  .titulo {
    font-size: 1.5rem !important;
    line-height: 110% !important;
    margin-bottom: 0.75rem !important;
  }
  
  .text-block-2 {
    font-size: 0.8125rem !important;
    padding-top: 0.75rem !important;
    line-height: 135% !important;
  }
  
  .button-2 {
    padding: 0.75rem 1rem !important;
    font-size: 11px !important;
    margin-top: 0.75rem !important;
  }
  
  /* Navbar - Mobile Portrait */
  .navbar-wrapper {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.875rem !important;
  }
  
  .navbar-inner {
    padding: 0.5rem !important;
  }
  
  /* Cards - Mobile Portrait */
  .card {
    border-radius: 1rem !important;
  }
  
  .sesh2 {
    padding: 1.25rem !important;
  }
  
  .sesh2.medium {
    padding: 1.25rem !important;
  }
  
  .sesh2.small {
    padding: 1rem !important;
  }
  
  /* Grids - Mobile Portrait */
  .home-services-grid {
    grid-row-gap: 1rem !important;
  }
  
  .home-news-grid {
    grid-row-gap: 1rem !important;
  }
  
  .footer-grid {
    grid-row-gap: 1.5rem !important;
  }
  
  .about-team-grid {
    grid-row-gap: 1rem !important;
  }
  
  .blog-posts-grid {
    grid-row-gap: 1rem !important;
  }
  
  /* Services */
  .services-nav {
    grid-row-gap: 0.5rem !important;
  }
  
  .services-nav-item {
    padding: 0.875rem 1rem !important;
    font-size: 12px !important;
  }
  
  /* Project Preview */
  .project-preview {
    height: 35vh !important;
    min-height: 200px;
  }
  
  /* Buttons */
  .button {
    padding: 0.75rem 1rem !important;
    font-size: 11px !important;
  }
  
  .button.large {
    padding: 0.875rem 1.125rem !important;
    font-size: 12px !important;
  }
  
  /* Images - Ajustes finos */
  .image-2,
  .image-3,
  .image-4,
  .image-5,
  .image-6 {
    max-width: 100%;
    height: auto;
  }
  
  /* Text Block 3 - Ajustes para carrossel */
  .text-block-3 {
    font-size: 0.75rem !important;
    padding: 0.5rem !important;
  }
  
  /* Heading Styles */
  .heading-style-h1 {
    font-size: 1.75rem !important;
    line-height: 120% !important;
  }
  
  .heading-style-h2 {
    font-size: 1.5rem !important;
    line-height: 120% !important;
  }
  
  .heading-style-h3 {
    font-size: 1.25rem !important;
    line-height: 130% !important;
  }
  
  /* Margin/Padding Ajustes */
  .margin-small {
    margin: 0.75rem !important;
  }
  
  .margin-medium {
    margin: 1rem !important;
  }
  
  .padding-small {
    padding: 0.75rem !important;
  }
  
  .padding-medium {
    padding: 1rem !important;
  }
}

/* ============================================
   SISTEMA RESPONSIVO BASEADO EM 1536px
   ============================================ */

/* Base: 1536px - Tamanho de desenvolvimento */
.padding-global {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  max-width: 98% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 98% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  position: relative !important;
}

/* Wide Screen (acima de 1920px) - Expandir mantendo proporções */
@media screen and (min-width: 1920px) {
  .padding-global {
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Large Desktop (1600px - 1919px) - Ligeiramente maior que base */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
  .padding-global {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Desktop Base (1536px - 1599px) - Tamanho de desenvolvimento */
@media screen and (min-width: 1536px) and (max-width: 1599px) {
  .padding-global {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Medium Desktop (1280px - 1535px) - Reduzir padding */
@media screen and (min-width: 1280px) and (max-width: 1535px) {
  .padding-global {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Tablet Landscape / Small Desktop (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .padding-global {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .padding-global {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Mobile Landscape (480px - 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .padding-global {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 98%;
    width: 98%;
  }
}

/* Mobile Portrait (até 479px) */
@media screen and (max-width: 479px) {
  .padding-global {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 98%;
    width: 98%;
  }
}

/* ============================================
   RESPONSIVIDADE PARA GRIDS E SEÇÕES ESPECÍFICAS
   ============================================ */

/* Tablet e abaixo - Grids dos pilares em coluna única */
@media screen and (max-width: 1023px) {
  .pilares-sections-grid,
  .pilares-sections-grid-inverted-1,
  .pilares-sections-grid-inverted-2 {
    grid-template-columns: 1fr !important;
    grid-row-gap: 1rem !important;
  }
  
  .section-pilares-1,
  .section-pilares-2,
  .section-pilares-1-duplicate-1,
  .section-pilares-2-duplicate-1,
  .section-pilares-1-duplicate-2,
  .section-pilares-2-duplicate-2,
  .section-pilares-mc,
  .section-pilares-mc-image,
  .section-pilares-cf,
  .section-pilares-cf-image {
    height: auto !important;
    min-height: 600px !important;
  }
  
  .metodologia-grid-wrapper {
    flex-direction: column !important;
  }
  
  .metodologia-cards-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  
  .metodologia-single-card-wrapper {
    width: 100% !important;
  }
  
  .sobre-mim-grid {
    grid-template-columns: 1fr !important;
  }
  
  .section-sobre-mim,
  .section-sobre-mim-image {
    height: auto !important;
    min-height: 600px !important;
  }
}

/* Mobile - Ajustes adicionais */
@media screen and (max-width: 767px) {
  .section-pilares-1,
  .section-pilares-2,
  .section-pilares-1-duplicate-1,
  .section-pilares-2-duplicate-1,
  .section-pilares-1-duplicate-2,
  .section-pilares-2-duplicate-2,
  .section-pilares-mc,
  .section-pilares-mc-image,
  .section-pilares-cf,
  .section-pilares-cf-image {
    min-height: 500px !important;
  }
  
  .section-sobre-mim,
  .section-sobre-mim-image {
    min-height: 500px !important;
  }
  
  .metodologia-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .faq-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .footer-social-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Wide Screen - Ajustes para telas muito grandes */
@media screen and (min-width: 1920px) {
  .pilares-sections-grid,
  .pilares-sections-grid-inverted-1,
  .pilares-sections-grid-inverted-2 {
    grid-column-gap: 2rem !important;
  }
  
  .metodologia-grid-wrapper {
    gap: 2rem !important;
  }
  
  .metodologia-cards-grid {
    grid-column-gap: 2rem !important;
    grid-row-gap: 2rem !important;
  }
}

/* ============================================
   UTILITÁRIOS GERAIS
   ============================================ */

/* Garantir que imagens sejam responsivas - Ajustado para não quebrar layout */
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

picture {
  display: inline-block;
}

picture img {
  display: block;
}

/* Prevenir overflow horizontal e barras de scroll duplicadas - APENAS HTML TEM SCROLLBAR */
html {
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  scroll-padding-top: 20px !important; /* Espaçamento para scroll suave */
}

/* Melhorar suavidade do scroll em todos os navegadores */
* {
  -webkit-overflow-scrolling: touch !important;
}

/* Desabilitar scroll-behavior para elementos que não devem ter */
input,
textarea,
select {
  scroll-behavior: auto !important;
}

/* Garantir que body e wrappers NÃO tenham scrollbar próprio */
body,
.page-wrapper,
.main-wrapper {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Scroll suave para navegadores que não suportam scroll-behavior */
@supports not (scroll-behavior: smooth) {
  html {
    scroll-behavior: auto;
  }
}

/* Estilização da barra de scroll - Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

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

::-webkit-scrollbar-thumb {
  background: #FF3300;
  border-radius: 6px;
  border: 2px solid #f1f1f1;
}

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

/* Estilização da barra de scroll - Firefox (apenas no html) */
html {
  scrollbar-width: thin;
  scrollbar-color: #FF3300 #f1f1f1;
}

/* Offset para scroll suave nas âncoras */
#pilares-posicionamento-unico,
#pilares-mensagem-clara,
#pilares-comunidade-forte,
#typeform {
  scroll-margin-top: 20px;
}

body {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 100vh !important;
}

.page-wrapper {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.main-wrapper {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Ajustes finos para containers */
.container-default,
.container-xlarge,
.container-xsmall {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ============================================
   ANIMAÇÕES DE SCROLL - REMOVIDAS
   ============================================ */
/* Animações de scroll removidas - todas as cards sempre visíveis */

/* Garantir que seções com elementos animados não mostrem scrollbars horizontais */
.section-home-services,
.section-cta-construir-marca,
.section-faq,
.section-typeform,
.section-sobre-mim {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Prevenir scrollbars em grids que contêm elementos animados */
.home-services-grid,
.pilares-sections-grid,
.pilares-sections-grid-inverted-1,
.pilares-sections-grid-inverted-2,
.faq-cards-grid,
.metodologia-cards-grid,
.sobre-mim-grid {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Prevenir scrollbars em containers de padding durante animações */
.padding-global,
.margin-bottom {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================
   CARROSSEL INFINITO - Marca é reputação
   ============================================ */
.carousel-container {
  width: 100%;
  overflow: hidden !important;
  position: relative;
  /* Prevenir qualquer scroll ou movimento indesejado */
  touch-action: none;
  -webkit-overflow-scrolling: touch;
}

.carousel-container.sesh2 {
  padding: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Garantir que o container da régua preencha a largura sem espaçamento lateral */
.regua-home.carousel-container.sesh2 {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Infinite Marquee CSS Puro para .regua-home */
.regua-home .regua-marquee-wrapper {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.regua-home .regua-marquee-content {
  display: inline-flex !important;
  gap: 2rem !important;
  width: max-content !important;
  min-width: max-content !important;
  flex-shrink: 0 !important;
  animation: regua-marquee-scroll 30s linear infinite !important;
  will-change: transform !important;
}

/* Keyframes para animação do marquee */
@keyframes regua-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Garantir que os itens não encolham */
.regua-home .regua-marquee-content .carousel-item {
  flex-shrink: 0 !important;
  min-width: fit-content !important;
  width: auto !important;
}

/* Itens do carrossel */
.carousel-item {
  display: flex;
  align-items: center;
  gap: 2rem !important; /* Espaçamento padronizado entre TODOS os elementos */
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0;
  min-width: fit-content;
  width: auto;
}

/* Padronizar espaçamento entre todos os elementos dentro do item */
.carousel-item > * {
  margin: 0 !important; /* Remover margens individuais */
}

.carousel-item img,
.carousel-item picture {
  display: inline-block;
  max-height: 60px;
  width: auto;
  height: auto;
  flex-shrink: 0;
  margin: 0 !important; /* Garantir sem margem */
}

.carousel-item picture img {
  display: block;
  flex-shrink: 0;
  margin: 0 !important;
}

.carousel-item .text-block-3 {
  display: inline-block;
  margin: 0 !important; /* Remover margem, usar gap do flex */
  white-space: normal;
  flex-shrink: 0;
}

/* Garantir que a animação nunca resete - loop perfeito */
.regua-home .marquee-content {
  animation-iteration-count: infinite !important;
  animation-direction: normal !important;
  animation-play-state: running !important;
  animation-timing-function: linear !important;
}

/* Garantir que os itens não encolham */
.regua-home .carousel-item {
  flex-shrink: 0 !important;
  min-width: fit-content !important;
}

/* Track antigo (mantido para outras seções que possam usar) */
.carousel-track {
  display: flex;
  gap: 2rem !important; /* Espaçamento padronizado entre itens */
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
  /* Garantir que a largura seja sempre calculada corretamente */
  min-width: max-content;
  /* Forçar aceleração de hardware para animação suave */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Animação será aplicada via JavaScript */
}

/* Prevenir qualquer interrupção ou reset da animação - otimização de performance */
.carousel-container {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.carousel-track {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/* ============================================
   TERCEIRA SEÇÃO - O Problema e Heading
   ============================================ */
.text-block-4 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  width: 115px !important;
  height: 24px !important;
  border-radius: 30px !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  box-sizing: border-box !important;
  padding: calc(0.5rem + 1px) 0.75rem !important;
}

/* Padronizar padding da seção sesh4 - usar padding igual em todos os lados */
.sesh4 {
  border-radius: 30px !important;
  padding: 2.5rem !important;
}

/* Seção de Pilares - Fundo branco, letra preta */
.section-pilares {
  background-color: #fff !important;
  color: #000 !important;
  min-height: 400px !important;
}

.section-pilares-badge {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  position: absolute !important;
  top: 2rem !important;
  left: 2.5rem !important;
  padding: calc(0.5rem + 1px) 0.75rem !important;
  box-sizing: border-box !important;
}

.section-pilares-heading {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 51px !important; /* Reduzido 3px */
  line-height: 60px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  margin: 0 !important;
  margin-top: 4rem !important;
  position: relative !important;
  z-index: 1 !important;
}

.sesh4 .heading {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 200 !important;
  font-size: 56px !important; /* Reduzido 3px */
  line-height: 65px !important;
  letter-spacing: -0.05em !important;
}

/* ============================================
   SEÇÃO DE SERVIÇOS - Números, Títulos e Descrições
   ============================================ */
.home-services-grid {
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.service-card {
  width: 100% !important;
  max-width: 100% !important;
  height: 340px !important;
  border-radius: 30px !important;
  position: relative !important;
  padding: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


.service-item-number {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 45px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  vertical-align: bottom !important;
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.service-content-bottom {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  text-align: left !important;
  max-width: 70% !important;
}

.metodologia-description {
  text-align: left !important;
}

.service-item-title {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 21px !important; /* Reduzido 3px */
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}

/* ============================================
   BOTÃO DA SEÇÃO DE SERVIÇOS
   ============================================ */
.service-bottom-button {
  background-color: #FF3300 !important;
  color: #fff !important;
  border-radius: 30px !important;
  width: 100% !important;
  height: 55px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: none !important; /* Sem transições */
}

.service-bottom-button:hover {
  background-color: #e62e00 !important;
}

/* Animações de roll dos botões removidas */

/* ============================================
   SEÇÕES DOS PILARES - Duas seções lado a lado
   ============================================ */
.pilares-sections-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.section-pilares-1 {
  background-color: #fff !important;
  color: #000 !important;
  height: 780px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.section-pilares-2 {
  background-color: #fff !important;
  color: #000 !important;
  height: 780px !important;
  width: 100% !important;
  position: relative !important;
  background-image: url('/images/Banner PU.webp'), url('/images/Banner PU.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 780px !important;
  overflow: hidden !important;
}

.pilares-badge-p-wrapper {
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-u-wrapper {
  position: absolute !important;
  top: 2.5rem !important;
  left: 6.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-svg {
  width: auto !important;
  height: 55px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-p {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.pilares-badge-u {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.pilares-laranja {
  color: #FF3300 !important;
}

.section-pilares-1-content {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  max-width: 70% !important;
}

.section-pilares-1-text {
  font-size: 0.9375rem !important; /* Reduzido 5px de 1.25rem (20px -> 15px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin-top: 1rem !important;
}

.section-pilares-2-badge {
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

/* Seção MC - Imagem à esquerda, texto à direita */
.section-pilares-mc-image {
  background-image: url('/images/banner mc.webp'), url('/images/banner mc.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 780px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.section-pilares-mc {
  background-color: #fff !important;
  color: #000 !important;
  height: 780px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Seção MC - Badges M e C */
.pilares-badge-m-wrapper {
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-c-mc-wrapper {
  position: absolute !important;
  top: 2.5rem !important;
  left: 6.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-m {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.pilares-badge-c-mc {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

/* Seção CF - Badges C e F */
.pilares-badge-c-wrapper {
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-f-wrapper {
  position: absolute !important;
  top: 2.5rem !important;
  left: 6.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-c {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.pilares-badge-f {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.section-pilares-mc-content {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  max-width: 70% !important;
}

.section-pilares-mc-text {
  font-size: 0.9375rem !important; /* Reduzido 5px de 1.25rem (20px -> 15px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin-top: 1rem !important;
}

.section-pilares-mc-heading {
  color: #000 !important;
}

/* Seção CF - Texto à esquerda, imagem à direita */
.section-pilares-cf {
  background-color: #fff !important;
  color: #000 !important;
  height: 780px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.section-pilares-cf-image {
  background-image: url('/images/Banner CF.webp'), url('/images/Banner CF.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 780px !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.section-pilares-cf-content {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  max-width: 70% !important;
}

.section-pilares-cf-text {
  font-size: 0.9375rem !important; /* Reduzido 5px de 1.25rem (20px -> 15px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin-top: 1rem !important;
}

.section-pilares-cf-heading {
  color: #000 !important;
}

.section-pilares-1-heading,
.section-pilares-2-heading {
  color: #000 !important;
}

/* ============================================
   BOTÕES DOS PILARES
   ============================================ */
.pilares-buttons-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
}

.pilares-button {
  background-color: #FF3300 !important;
  color: #fff !important;
  border-radius: 30px !important;
  width: 100% !important;
  height: 55px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  text-align: left !important;
}

.pilares-button span {
  flex: 1 !important;
}

.pilares-button-icon {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  display: block !important;
}

.pilares-button:hover {
  background-color: #e62e00 !important;
}

/* ============================================
   REMOVER BOTÕES PADRÃO DO TEMA
   ============================================ */
.buy-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Garantir que grids não quebrem */
.home-services-grid,
.home-news-grid,
.footer-grid,
.about-team-grid,
.blog-posts-grid {
  width: 100%;
}

/* Ajustes para texto em cards */
.card .text-size-medium {
  line-height: 150%;
}

/* Melhorias de espaçamento em mobile */
@media screen and (max-width: 767px) {
  .margin-bottom.margin-small {
    margin-bottom: 1rem !important;
  }
  
  .margin-bottom.margin-medium {
    margin-bottom: 1.25rem !important;
  }
  
  .padding-top.padding-small {
    padding-top: 1rem !important;
  }
}

/* ============================================
   DUPLICATAS DA SEÇÃO POSICIONAMENTO ÚNICO
   ============================================ */

/* Grid invertido para primeira duplicata (imagem à esquerda, texto à direita) */
.pilares-sections-grid-inverted-1 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Primeira duplicata - Estilos para texto (direita) */
.section-pilares-1-duplicate-1 {
  background-color: #fff !important;
  color: #000 !important;
  height: 858px !important;
  width: 100% !important;
  position: relative !important;
}

.pilares-badge-p-wrapper-duplicate-1 {
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-u-wrapper-duplicate-1 {
  position: absolute !important;
  top: 2.5rem !important;
  left: 6.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-p-duplicate-1 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.pilares-badge-u-duplicate-1 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.section-pilares-1-content-duplicate-1 {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  max-width: 70% !important;
}

.section-pilares-1-text-duplicate-1 {
  font-size: 0.9375rem !important; /* Reduzido 5px de 1.25rem (20px -> 15px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin-top: 1rem !important;
}

.section-pilares-1-heading-duplicate-1 {
  color: #000 !important;
}

/* Primeira duplicata - Estilos para imagem (esquerda) */
.section-pilares-2-duplicate-1 {
  background-color: #fff !important;
  color: #000 !important;
  height: 858px !important;
  width: 100% !important;
  position: relative !important;
  background-image: url('/images/banner mc.webp'), url('/images/banner mc.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 858px !important;
  overflow: hidden !important;
}

/* Segunda duplicata - Estilos para texto (esquerda) */
.section-pilares-1-duplicate-2 {
  background-color: #fff !important;
  color: #000 !important;
  height: 858px !important;
  width: 100% !important;
  position: relative !important;
}

.pilares-badge-p-wrapper-duplicate-2 {
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-u-wrapper-duplicate-2 {
  position: absolute !important;
  top: 2.5rem !important;
  left: 6.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-p-duplicate-2 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.pilares-badge-u-duplicate-2 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.section-pilares-1-content-duplicate-2 {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  max-width: 70% !important;
}

.section-pilares-1-text-duplicate-2 {
  font-size: 0.9375rem !important; /* Reduzido 5px de 1.25rem (20px -> 15px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin-top: 1rem !important;
}

.section-pilares-1-heading-duplicate-2 {
  color: #000 !important;
}

/* Segunda duplicata - Estilos para imagem (esquerda) */
.section-pilares-2-duplicate-2 {
  background-color: #fff !important;
  color: #000 !important;
  height: 858px !important;
  width: 100% !important;
  position: relative !important;
  background-image: url('/images/Banner CF.webp'), url('/images/Banner CF.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 858px !important;
  overflow: hidden !important;
}

/* Grid invertido para terceira duplicata (imagem à esquerda, texto à direita) */
.pilares-sections-grid-inverted-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ============================================
   SEÇÃO METODOLOGIA
   ============================================ */
.section-metodologia {
  background-color: #fff !important;
  color: #000 !important;
  padding: 2.5rem !important;
  position: relative !important;
  min-height: 450px !important;
}

.section-metodologia-badge {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: calc(0.5rem + 1px) 0.75rem !important;
  width: fit-content !important;
  position: absolute !important;
  top: 2rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
}

.section-metodologia-heading {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 54px !important;
  line-height: 60px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  margin: 0 !important;
  margin-top: 4rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================
   GRID METODOLOGIA - 4 CARDS + 1 CARD GRANDE
   ============================================ */
.metodologia-grid-wrapper {
  display: flex !important;
  gap: 1rem !important;
  width: 100% !important;
}

.metodologia-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.metodologia-single-card-wrapper {
  width: 33% !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}

.metodologia-cards-grid {
  width: 67% !important;
}

.metodologia-single-card {
  height: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-self: stretch !important;
  padding: 17px !important;
  overflow: hidden !important;
}

.metodologia-card {
  height: 400px !important;
  min-height: 400px !important;
  padding: 2.5rem !important;
  overflow: hidden !important;
}

.service-card {
  padding: 2.5rem !important;
}

.faq-card {
  padding: 2.5rem !important;
}

.metodologia-cards-grid {
  align-self: stretch !important;
}

/* Card 04 com fundo laranja e letra branca */
.metodologia-card-04 {
  background-color: #FF3300 !important;
  color: #fff !important;
}

.metodologia-number-04 {
  color: #fff !important;
}

.metodologia-title-04 {
  color: #fff !important;
}

.metodologia-text-04 {
  color: #fff !important;
}

/* Card único - fundo preto, letra branca */
.metodologia-single-card {
  background-color: #000 !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
}

.metodologia-single-card-image-wrapper {
  width: 100% !important;
  margin-bottom: 0.5rem !important; /* Reduzido para aproximar mais do título */
  height: 400px !important; /* Altura aumentada de 350px para 400px */
  overflow: hidden !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.metodologia-single-card-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 30px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.metodologia-single-card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  align-items: center !important; /* Centralizar conteúdo */
}

.metodologia-single-card-title {
  color: #fff !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 25px !important; /* Reduzido 3px de 28px */
  line-height: 120% !important;
  letter-spacing: 0% !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  width: 100% !important; /* Largura total */
  text-align: left !important;
}

.metodologia-single-card-button {
  background-color: #FF3300 !important;
  color: #fff !important;
  border-radius: 30px !important;
  width: 100% !important; /* Largura total */
  height: 55px !important;
  padding: 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Centralizado */
  text-align: center !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  cursor: pointer !important;
  transition: none !important; /* Sem transições */
  margin: 0 auto !important; /* Centralizar botão */
}

.metodologia-single-card-button:hover {
  background-color: #e62e00 !important;
}

/* ============================================
   SECAO CAROUSEL EM BREVE
   ============================================ */
.section-carousel-soon {
  background-color: transparent !important;
  width: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.carousel-soon-card {
  background-color: #000 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 30px !important;
  padding: 2.5rem !important;
}

.carousel-soon-content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 1rem !important;
}

.carousel-soon-title {
  color: #fff !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-size: 35px !important;
  font-weight: 400 !important;
  line-height: 130% !important;
  text-align: center !important;
  margin: 0 !important;
}

.carousel-soon-subtitle {
  color: #fff !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ============================================
   DUPLICATA 3 DA SECAO POSICIONAMENTO UNICO
   ============================================ */
.section-pilares-1-duplicate-3 {
  background-color: #fff !important;
  color: #000 !important;
  height: 858px !important;
  width: 100% !important;
  position: relative !important;
}

.pilares-badge-p-wrapper-duplicate-3 {
  position: absolute !important;
  top: 2.5rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-u-wrapper-duplicate-3 {
  position: absolute !important;
  top: 2.5rem !important;
  left: 7.875rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-p-duplicate-3 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pilares-badge-u-duplicate-3 {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 70px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.section-pilares-1-content-duplicate-3 {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  max-width: 70% !important;
}

.section-pilares-1-text-duplicate-3 {
  font-size: 0.9375rem !important; /* Reduzido 5px de 1.25rem (20px -> 15px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin-top: 1rem !important;
}

.section-pilares-1-heading-duplicate-3 {
  color: #000 !important;
}

.section-pilares-2-duplicate-3 {
  background-color: #fff !important;
  color: #000 !important;
  height: 858px !important;
  width: 100% !important;
  position: relative !important;
  background-image: url('/images/Banner PU.webp'), url('/images/Banner PU.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 858px !important;
  overflow: hidden !important;
}

/* ============================================
   SECAO SOBRE MIM
   ============================================ */
.sobre-mim-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
}

.section-sobre-mim {
  background-color: #fff !important;
  color: #000 !important;
  height: 850px !important;
  width: 100% !important;
  position: relative !important;
  padding: 2.5rem !important;
}

.section-sobre-mim-badge {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: calc(0.5rem + 1px) 0.75rem !important;
  width: fit-content !important;
  position: absolute !important;
  top: 2rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
}

.section-sobre-mim-content {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  display: flex !important;
  max-width: 65% !important;
  width: 65% !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.section-sobre-mim-heading {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 53px !important; /* Reduzido 3px */
  line-height: 62px !important;
  letter-spacing: -0.05em !important;
  color: #000 !important;
  margin: 0 !important;
}

.section-sobre-mim-subtitle {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 23px !important; /* Reduzido 3px */
  line-height: 100% !important;
  color: #8A8A92 !important;
  margin: 0 !important;
}

.section-sobre-mim-text {
  font-size: 1.05rem !important; /* Restaurado tamanho original (16.8px) */
  line-height: 150% !important;
  color: #8a8a92 !important;
  margin: 0 !important;
}

.section-sobre-mim-image {
  background-color: #fff !important;
  color: #000 !important;
  height: 850px !important;
  width: 100% !important;
  position: relative !important;
  background-image: url('/images/Foto Perfil 1080x1080 1.webp'), url('/images/Foto Perfil 1080x1080 1.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 850px !important;
  overflow: hidden !important;
}

/* ============================================
   SECAO CTA CONSTRUIR MARCA
   ============================================ */
.section-cta-construir-marca {
  width: 100% !important;
}

.cta-construir-marca-card {
  background-color: #000 !important;
  border-radius: 30px !important;
  padding: 2.5rem !important;
}

.cta-construir-marca-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
  min-height: 90vh !important;
  position: relative !important;
  width: 100% !important;
}

.cta-construir-marca-logo {
  width: calc(100% - 0px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cta-construir-marca-logo-img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.cta-construir-marca-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
  gap: 1rem !important;
  flex: 1 !important;
}

.cta-construir-marca-title {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 51px !important; /* Reduzido 3px */
  line-height: 60px !important;
  letter-spacing: -0.05em !important;
  color: #FF3300 !important;
  margin: 0 !important;
  text-align: left !important;
}

.cta-construir-marca-title-white {
  color: #fff !important;
}

.cta-construir-marca-button {
  background-color: #FF3300 !important;
  color: #fff !important;
  border-radius: 30px !important;
  width: 100% !important;
  height: 55px !important;
  padding: 0 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  border: none !important;
  cursor: pointer !important;
  transition: none !important; /* Sem transições */
  margin-top: auto !important;
}

.cta-construir-marca-button:hover {
  background-color: #e62e00 !important;
}

/* ============================================
   SECAO FAQ
   ============================================ */
.section-faq {
  background-color: #FF3300 !important;
  color: #fff !important;
  padding: 2.5rem !important;
  position: relative !important;
  min-height: 350px !important;
}

.section-faq-badge {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  background-color: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: calc(0.5rem + 1px) 0.75rem !important;
  width: fit-content !important;
  position: absolute !important;
  top: 2rem !important;
  left: 2.5rem !important;
  margin: 0 !important;
}

.section-faq-heading {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 56px !important; /* Reduzido 3px */
  line-height: 65px !important;
  letter-spacing: -0.05em !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ============================================
   CARDS FAQ
   ============================================ */
.faq-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.faq-card {
  background-color: #fff !important;
  color: #000 !important;
  height: 400px !important;
  min-height: 400px !important;
  position: relative !important;
  border-radius: 30px !important;
  padding: 2.5rem !important;
  overflow: hidden !important;
}

.faq-title-wrapper {
  position: absolute !important;
  top: 2rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 70% !important;
}

.faq-content-bottom {
  position: absolute !important;
  bottom: 2.5rem !important;
  left: 2.5rem !important;
  right: 2.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  text-align: left !important;
  max-width: 70% !important;
}

.faq-title,
.faq-description {
  text-align: left !important;
}

.faq-title {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 29px !important; /* Reduzido 3px */
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: capitalize !important;
  color: #000 !important;
  margin: 0 !important;
  width: 100% !important;
}

.faq-description {
  width: 100% !important;
  text-align: left !important;
  color: #8a8a92 !important;
}

/* ============================================
   SECAO TYPEFORM
   ============================================ */
.section-typeform {
  width: 100% !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.typeform-card {
  background-color: #fff !important;
  border-radius: 30px !important;
  padding: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.typeform-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  position: relative !important;
}

.typeform-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 30px !important;
  display: block !important;
}

.typeform-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}

/* ============================================
   FOOTER
   ============================================ */
.footer-section {
  width: 100% !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.footer-social-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr !important;
  grid-column-gap: 1rem !important;
  grid-row-gap: 1rem !important;
  width: 100% !important;
}

.footer-social-card {
  background-color: #fff !important;
  border-radius: 30px !important;
  padding: 0.75rem 1.5rem !important;
  text-decoration: none !important;
  /* Animações removidas */
  min-height: auto !important;
  height: auto !important;
}

.footer-social-content {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

.footer-social-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

.footer-social-text {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 !important;
}

.footer-bottom-card {
  background-color: #fff !important;
  border-radius: 30px !important;
  padding: 1.5rem 3.875rem !important;
  min-height: auto !important;
  height: auto !important;
}

/* Garantir que cards do footer sejam brancos mesmo com classe secondary */
.card.secondary.footer-social-card,
.card.secondary.footer-bottom-card {
  background-color: #fff !important;
  background: #fff !important;
}

.footer-bottom-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.footer-logo-cris {
  height: 30px !important;
  width: auto !important;
  object-fit: contain !important;
}

.footer-dev-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.footer-dev-text {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 12px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.footer-logo-ailton-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  /* Animações removidas */
}

.footer-logo-ailton {
  height: 12px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ============================================
   BANNER FIXO DE DESENVOLVIMENTO - Discreto e fino
   ============================================ */
.dev-banner-fixed {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #FF3300 !important;
  color: #fff !important;
  z-index: 99998 !important;
  padding: 0.75rem 1.5rem !important;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05) !important;
  opacity: 0.95 !important;
}

.dev-banner-content {
  max-width: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin: 0 auto !important;
}

.dev-banner-text {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #fff !important;
  margin: 0 !important;
  flex: 1 !important;
  opacity: 0.9 !important;
}

.dev-banner-logo-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: opacity 0.2s ease !important;
  background-color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
}

.dev-banner-logo-link:hover {
  opacity: 0.9 !important;
}

.dev-banner-logo {
  height: 14px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsividade do banner de desenvolvimento */
@media screen and (max-width: 767px) {
  .dev-banner-fixed {
    padding: 0.6rem 1rem !important;
  }
  
  .dev-banner-content {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  
  .dev-banner-text {
    font-size: 10px !important;
    width: auto !important;
  }
  
  .dev-banner-logo {
    height: 12px !important;
  }
  
  .dev-banner-logo-link {
    padding: 0.2rem 0.4rem !important;
  }
}

/* Ajustar padding do body para não sobrepor o banner fixo */
body {
  padding-bottom: 50px !important;
}

@media screen and (max-width: 767px) {
  body {
    padding-bottom: 55px !important;
  }
}

/* ============================================
   OVERLAY MOBILE - Mensagem para usar desktop
   ============================================ */
.mobile-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: #FF3300 !important;
  z-index: 999999 !important;
  overflow: hidden !important;
}

/* Mostrar overlay apenas em dispositivos móveis */
@media screen and (max-width: 767px) {
  .mobile-overlay {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
  }
}

.mobile-overlay-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  max-width: 90% !important;
  width: 100% !important;
  gap: 2rem !important;
}

.mobile-overlay-logo {
  width: 60% !important;
  max-width: 300px !important;
  margin-bottom: 1rem !important;
}

.mobile-overlay-logo-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.mobile-overlay-title {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.mobile-overlay-text {
  font-family: 'Space Grotesk', 'SpaceGrotesk Variablefont Wght', Arial, sans-serif !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #fff !important;
  margin: 0 !important;
  max-width: 500px !important;
}

/* Esconder conteúdo do site quando overlay mobile estiver visível */
@media screen and (max-width: 767px) {
  .mobile-overlay:not([style*="display: none"]) ~ .loader-wrapper,
  .mobile-overlay:not([style*="display: none"]) ~ .page-wrapper {
    display: none !important;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
/* Image optimization - Removido para evitar conflitos */

/* Lazy loading images - Removido content-visibility que pode quebrar layout */

/* Font loading optimization */
@font-face {
  font-display: swap;
}

/* Reduce layout shift - Removido aspect-ratio com attr() que não funciona */

/* Critical CSS - Above the fold optimization - Removido content-visibility que pode quebrar layout */

/* Reduce repaints - Removido will-change global que pode causar problemas */

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   RESPONSIVIDADE COMPLETA - TODOS OS DISPOSITIVOS
   ============================================ */

/* Mobile Portrait (320px - 479px) */
@media screen and (max-width: 479px) {
  /* Hero Section */
  .hero-top-section .titulo {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }
  
  .hero-top-section .hero-subtitle {
    font-size: 1rem !important;
  }
  
  /* Cards */
  .card {
    padding: 1.5rem !important;
  }
  
  /* Grids */
  .faq-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .footer-social-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .metodologia-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .pilares-sections-grid {
    grid-template-columns: 1fr !important;
  }
  
  .sobre-mim-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Typography - Removido para manter estilos originais */
  
  /* Spacing */
  .padding-global {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  .section-pilares-1,
  .section-pilares-2 {
    height: auto !important;
    min-height: 400px !important;
  }
  
  .section-sobre-mim {
    height: auto !important;
    min-height: 600px !important;
  }
  
  .typeform-card {
    height: 80vh !important;
    min-height: 80vh !important;
  }
}

/* Mobile Landscape (480px - 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .hero-top-section .titulo {
    font-size: 3rem !important;
  }
  
  .faq-cards-grid {
    grid-template-columns: 1fr !important;
  }
  
  .footer-social-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .metodologia-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .pilares-sections-grid {
    grid-template-columns: 1fr !important;
  }
  
  .sobre-mim-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet Portrait (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-top-section .titulo {
    font-size: 4rem !important;
  }
  
  .faq-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .footer-social-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .metodologia-cards-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .pilares-sections-grid {
    grid-template-columns: 1fr !important;
  }
  
  .sobre-mim-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet Landscape (992px - 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .faq-cards-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  
  .footer-social-cards-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
  }
}

/* ============================================
   SISTEMA RESPONSIVO BASEADO EM 1528x738.40
   ============================================ */

/* Base de referência: 1528px x 738.40px */
/* Proporção: ~2.07:1 (largura:altura) */

/* Desktop Large (1528px+) - Tamanho padrão de referência */
@media screen and (min-width: 1528px) {
  .padding-global {
    max-width: 98% !important;
    width: 98% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin: 0 auto !important;
  }
  
  /* Garantir que elementos mantenham proporções */
  .hero-top-section .titulo {
    font-size: clamp(3.5rem, 5.3vw, 5.3rem) !important;
  }
  
  .section-pilares-1,
  .section-pilares-2,
  .section-pilares-mc,
  .section-pilares-cf {
    height: clamp(1100px, 77vh, 1326px) !important;
    min-height: clamp(1100px, 77vh, 1326px) !important;
  }
  
}

/* Desktop Medium (1432px - 1527px) - Intervalo abaixo da referência */
@media screen and (min-width: 1432px) and (max-width: 1527px) {
  .padding-global {
    max-width: 98% !important;
    width: 98% !important;
    padding-left: clamp(1.5rem, 2vw, 2rem) !important;
    padding-right: clamp(1.5rem, 2vw, 2rem) !important;
    margin: 0 auto !important;
  }
  
  /* Ajustar tipografia proporcionalmente */
  .hero-top-section .titulo {
    font-size: clamp(3rem, 4.8vw, 5rem) !important;
    line-height: 1.05 !important;
  }
  
  .hero-top-section .hero-subtitle {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
  }
  
  /* Ajustar alturas de seções proporcionalmente */
  .section-pilares-1,
  .section-pilares-2,
  .section-pilares-1-duplicate-1,
  .section-pilares-2-duplicate-1,
  .section-pilares-1-duplicate-2,
  .section-pilares-2-duplicate-2,
  .section-pilares-1-duplicate-3,
  .section-pilares-2-duplicate-3,
  .section-pilares-mc,
  .section-pilares-mc-image,
  .section-pilares-cf,
  .section-pilares-cf-image {
    height: clamp(1100px, 75vh, 1326px) !important;
    min-height: clamp(1100px, 75vh, 1326px) !important;
    max-height: clamp(1100px, 75vh, 1326px) !important;
  }
  
  .section-sobre-mim,
  .section-sobre-mim-image {
    height: clamp(1200px, 85vh, 1445px) !important;
    min-height: clamp(1200px, 85vh, 1445px) !important;
  }
  
  .service-card,
  .metodologia-card,
  .faq-card,
  .metodologia-single-card {
    height: clamp(500px, 55vh, 680px) !important;
    min-height: clamp(500px, 55vh, 680px) !important;
  }
  
  /* Ajustar max-width de conteúdo interno */
  .service-content-bottom,
  .section-pilares-1-content,
  .section-pilares-mc-content,
  .section-pilares-cf-content,
  .faq-title-wrapper,
  .faq-content-bottom {
    max-width: clamp(60%, 63vw, 63%) !important;
  }
  
  .section-sobre-mim-content {
    max-width: clamp(60%, 65vw, 65%) !important;
  }
  
  /* Ajustar fontes proporcionalmente */
  .section-pilares-heading,
  .sesh4 .heading,
  .service-item-title,
  .section-sobre-mim-heading,
  .section-faq-heading {
    font-size: clamp(2.5rem, 3.2vw, 3.2rem) !important;
  }
  
  .text-size-medium,
  .section-pilares-1-text,
  .section-pilares-mc-text,
  .section-pilares-cf-text,
  .section-sobre-mim-text {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem) !important;
  }
  
  /* Ajustar grids para manter proporções */
  .pilares-sections-grid,
  .metodologia-cards-grid,
  .faq-cards-grid {
    gap: clamp(1rem, 1.5vw, 1.5rem) !important;
  }
  
  /* Ajustar padding de cards */
  .card {
    padding: clamp(1.5rem, 2vw, 2rem) !important;
  }
  
}

/* Desktop Small (1200px - 1431px) */
@media screen and (min-width: 1200px) and (max-width: 1431px) {
  .padding-global {
    max-width: 98% !important;
    width: 98% !important;
    padding-left: clamp(1.25rem, 1.8vw, 1.5rem) !important;
    padding-right: clamp(1.25rem, 1.8vw, 1.5rem) !important;
    margin: 0 auto !important;
  }
  
  .hero-top-section .titulo {
    font-size: clamp(2.5rem, 4.2vw, 4.5rem) !important;
  }
  
  .section-pilares-1,
  .section-pilares-2,
  .section-pilares-mc,
  .section-pilares-cf {
    height: clamp(900px, 70vh, 1200px) !important;
    min-height: clamp(900px, 70vh, 1200px) !important;
  }
  
  .section-sobre-mim,
  .section-sobre-mim-image {
    height: clamp(1000px, 80vh, 1300px) !important;
    min-height: clamp(1000px, 80vh, 1300px) !important;
  }
  
  .service-card,
  .metodologia-card,
  .faq-card,
  .metodologia-single-card {
    height: clamp(450px, 50vh, 600px) !important;
    min-height: clamp(450px, 50vh, 600px) !important;
  }
  
}

/* Desktop Base (1440px - 1527px) - Mantido para compatibilidade */
@media screen and (min-width: 1440px) and (max-width: 1527px) {
  .padding-global {
    max-width: 98% !important;
    width: 98% !important;
    margin: 0 auto !important;
  }
}

/* Altura de viewport pequena */
@media screen and (max-height: 600px) {
  .hero-top-section {
    padding-top: 1rem !important;
  }
  
  .section-home-hero {
    min-height: 100vh !important;
  }
}

/* ============================================
   AUMENTAR ALTURA EM 70% - Cards e Seções após carrossel
   ============================================ */
/* Cards com tags/badges - aumentar altura em 70% */
/* Ajustar tanto o card de fundo (preto) quanto o conteúdo interno (.sesh4) */

/* Card "O problema" - aumentar altura em 70% */
.card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) {
  min-height: 680px !important; /* Card de fundo preto */
  height: auto !important;
}

.card.secondary:has(.text-block-4:not(.section-pilares-badge):not(.section-metodologia-badge):not(.section-sobre-mim-badge):not(.section-faq-badge)) .sesh4 {
  min-height: 680px !important; /* Conteúdo interno que sobrepõe */
  height: 100% !important;
}

/* Card com badge "PU, MC & CF" */
.card.secondary:has(.section-pilares-badge) {
  min-height: 680px !important; /* Card de fundo preto */
  height: auto !important;
}

.card.secondary:has(.section-pilares-badge) .sesh4 {
  min-height: 680px !important; /* Conteúdo interno que sobrepõe */
  height: 100% !important;
}

/* Card com badge "Metodologia" - aumentar altura em 70% */
.card.secondary:has(.section-metodologia-badge),
.card.secondary:has(.section-metodologia) {
  min-height: 680px !important; /* Card de fundo preto */
  height: auto !important;
}

.card.secondary:has(.section-metodologia-badge) .sesh4,
.card.secondary:has(.section-metodologia) .sesh4 {
  min-height: 680px !important; /* Conteúdo interno que sobrepõe */
  height: 100% !important;
}

/* Card com badge "Sobre mim" - já está coberto por .section-sobre-mim */
/* Card com badge "FAQ" - aumentar altura em 70% */
.card.secondary:has(.section-faq-badge),
.card.secondary:has(.section-faq) {
  min-height: 680px !important; /* Card de fundo preto */
  height: auto !important;
}

.card.secondary:has(.section-faq-badge) .sesh4,
.card.secondary:has(.section-faq) .sesh4 {
  min-height: 680px !important; /* Conteúdo interno que sobrepõe */
  height: 100% !important;
}

/* Cards laranjas com tags - garantir que cards com elementos laranja (pilares-laranja) tenham altura aumentada */
.card.secondary:has(.pilares-laranja),
.card.secondary:has(.section-pilares-1),
.card.secondary:has(.section-pilares-2),
.card.secondary:has(.section-pilares-mc),
.card.secondary:has(.section-pilares-cf) {
  min-height: 1326px !important; /* Garantir que o card container tenha altura aumentada */
}

/* Cards de serviços */
.service-card {
  height: 578px !important; /* 340px * 1.7 = 578px */
  min-height: 578px !important;
}

/* Seção de pilares */
.section-pilares {
  min-height: 680px !important; /* 400px * 1.7 = 680px */
}

/* Seções de pilares individuais - TODAS COM MESMA ALTURA */
/* Posicionamento Único, Mensagem Clara e Comunidade Forte */
.section-pilares-1,
.section-pilares-2,
.section-pilares-1-duplicate-1,
.section-pilares-2-duplicate-1,
.section-pilares-1-duplicate-2,
.section-pilares-2-duplicate-2,
.section-pilares-1-duplicate-3,
.section-pilares-2-duplicate-3,
.section-pilares-mc,
.section-pilares-mc-image,
.section-pilares-cf,
.section-pilares-cf-image {
  height: 1326px !important; /* Altura padronizada: 780px * 1.7 = 1326px */
  min-height: 1326px !important;
  max-height: 1326px !important; /* Garantir altura exata */
}

/* Cards de metodologia */
.metodologia-card {
  height: 680px !important; /* 400px * 1.7 = 680px */
  min-height: 680px !important;
}

/* Card único - acompanhar altura das 4 seções à esquerda */
.metodologia-single-card {
  height: 680px !important; /* Mesma altura dos cards de metodologia */
  min-height: 680px !important;
}

.metodologia-single-card-wrapper {
  height: 680px !important; /* Acompanhar altura dos cards à esquerda */
  min-height: 680px !important;
}

.metodologia-single-card-image-wrapper {
  height: auto !important; /* Altura automática para se ajustar ao card */
  flex: 1 !important; /* Ocupar espaço disponível */
  min-height: 0 !important;
}

/* Card "carousel soon" - REVERTIDO */
.carousel-soon-card {
  height: 100vh !important; /* Revertido para altura original */
  min-height: 100vh !important;
}

/* Seção Sobre Mim */
.section-sobre-mim,
.section-sobre-mim-image {
  height: 1445px !important; /* 850px * 1.7 = 1445px */
  min-height: 1445px !important;
}

/* CTA Construir Marca - REVERTIDO */
.cta-construir-marca-wrapper {
  min-height: 90vh !important; /* Revertido para altura original */
}

/* Cards FAQ */
.faq-card {
  height: 680px !important; /* 400px * 1.7 = 680px */
  min-height: 680px !important;
}

/* Card Typeform - REVERTIDO */
.typeform-card {
  height: 100vh !important; /* Revertido para altura original */
  min-height: 100vh !important;
}

/* Ajustes responsivos para manter proporções */
@media screen and (max-width: 991px) {
  .section-pilares-1,
  .section-pilares-2,
  .section-pilares-1-duplicate-1,
  .section-pilares-2-duplicate-1,
  .section-pilares-1-duplicate-2,
  .section-pilares-2-duplicate-2,
  .section-pilares-1-duplicate-3,
  .section-pilares-2-duplicate-3,
  .section-pilares-mc,
  .section-pilares-mc-image,
  .section-pilares-cf,
  .section-pilares-cf-image {
    height: auto !important;
    min-height: 680px !important; /* 400px * 1.7 = 680px */
  }
  
  .section-sobre-mim,
  .section-sobre-mim-image {
    height: auto !important;
    min-height: 1020px !important; /* 600px * 1.7 = 1020px */
  }
  
  .typeform-card {
    height: 80vh !important; /* Revertido para altura original */
    min-height: 80vh !important;
  }
}

@media screen and (max-width: 767px) {
  .service-card,
  .metodologia-card,
  .faq-card {
    height: auto !important;
    min-height: 425px !important; /* 250px * 1.7 = 425px */
  }
  
  .metodologia-single-card-image-wrapper {
    height: 425px !important; /* 250px * 1.7 = 425px */
  }
  
  .carousel-soon-card {
    height: 80vh !important; /* Revertido para altura original */
    min-height: 80vh !important;
  }
  
  .cta-construir-marca-wrapper {
    min-height: 60vh !important; /* Revertido para altura original */
  }
}

/* ============================================
   LOADER - Cards Laranja e Preto
   ============================================ */
.loader-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  overflow: visible !important; /* Permitir que cards saiam da tela completamente */
}

/* ============================================
   LOADER - Nova animação: Fade up/down suave
   ============================================ */
.loader-card {
  position: absolute !important;
  width: 98vw !important;
  height: 98vh !important;
  border-radius: 30px !important;
  box-shadow: none !important;
}

/* Card laranja - Slide up (para cima) */
.loader-card-orange {
  background: linear-gradient(135deg, #FF3300 0%, #e62e00 100%) !important;
  z-index: 2 !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: transform 1.55s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Animação de saída aumentada em 1 segundo */
}

.loader-card-orange.fade-up {
  transform: translateY(-100vh) !important; /* Sair completamente da tela para cima */
}

/* Card preto - Slide up (para cima) */
.loader-card-black {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
  z-index: 1 !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transition: transform 1.55s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Mesma velocidade do card laranja */
}

.loader-card-black.fade-up {
  transform: translateY(-100vh) !important; /* Sair completamente da tela para cima */
}

/* Wrapper da logo com overflow para cortar logo abaixo */
.loader-logo-wrapper {
  position: absolute !important;
  bottom: 5% !important; /* 50% mais colado embaixo (era 10%, agora 5%) */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  width: 88% !important; /* Aumentado 10% (80% * 1.1 = 88%) */
  max-width: 88% !important;
  min-height: 250px !important; /* Altura mínima aumentada para monitores grandes */
  height: auto !important; /* Altura automática para se adaptar ao conteúdo */
  max-height: 400px !important; /* Altura máxima aumentada para monitores grandes */
  overflow: hidden !important; /* Cortar a logo quando ela desce */
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* Ajuste para monitores grandes */
@media screen and (min-width: 1920px) {
  .loader-logo-wrapper {
    min-height: 300px !important;
    max-height: 500px !important;
  }
}

@media screen and (min-width: 2560px) {
  .loader-logo-wrapper {
    min-height: 350px !important;
    max-height: 600px !important;
  }
}

/* Logo fixa acima dos cards */
.loader-logo {
  position: relative !important;
  width: 100% !important;
  height: auto !important; /* Altura automática para não cortar */
  min-height: 100% !important;
  transform: translateY(0) !important;
  z-index: 3 !important;
  opacity: 1 !important;
  filter: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  transition: transform 1.55s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Velocidade aumentada 5% (1.63s * 0.95) */
}

.loader-logo.slide-down {
  transform: translateY(100vh) !important; /* Slide down completo, mas cortado pelo wrapper */
}

.loader-logo-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-width: 100% !important;
  object-fit: contain !important; /* Garantir que a logo não seja cortada */
}

.loader-wrapper.hidden {
  display: none !important;
}

/* Esconder o site até o loader terminar */
.page-wrapper.loader-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Transição ainda mais rápida */
}

.page-wrapper.loader-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.44s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, visibility 0.44s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; /* Transição 10% mais lenta */
}

/* Responsivo para mobile */
@media screen and (max-width: 767px) {
  .loader-card {
    width: 98vw !important;
    height: 98vh !important;
    border-radius: 20px !important;
  }
  
  .loader-logo {
    width: 80% !important;
    max-width: 80% !important;
    bottom: 10% !important;
  }
  
  .loader-logo-img {
    width: 100% !important;
  }
}

/* Orientação Landscape em mobile */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .hero-top-section .titulo {
    font-size: 2rem !important;
  }
  
  .section-home-hero {
    min-height: auto !important;
  }
}