/* CF Com - Premium Design System & Modern CSS Framework */

:root {
  /* Brand Color Tokens */
  --background: #f2f2f2;
  --foreground: #262626;
  --card: #ffffff;
  --primary: #262626;
  --primary-light: #404040;
  --secondary: #e6e6e6;
  --border: #d9d9d9;
  
  /* Accent Minimalist / Monochrome Dark */
  --accent: #262626;
  --accent-rgb: 38, 38, 38;
  --accent-light: #404040;
  --accent-dark: #111111;
  
  /* System States */
  --success: #10b981;
  --error: #ef4444;
  --whatsapp: #25d366;
  --whatsapp-rgb: 37, 211, 102;
  
  /* Keyword Highlight Color (Requested: #cbd537) */
  --highlight-keyword: #cbd537;
  --highlight-keyword-rgb: 203, 213, 55;
  
  /* Fonts */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Amasis MT Pro', 'Amasis', serif;
  
  /* Spacing */
  --container-max: 1280px;
  --radius-lg: 2rem;
  --radius-md: 1rem;
  --radius-sm: 0.5rem;
  
  /* Fluid Physics Transitions */
  --transition-fluid: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-magnetic: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

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

::selection {
  background-color: #cbd537;
  color: #404040;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fluid Layout & Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Typography & Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--primary);
  line-height: 1.15;
  text-wrap: balance;
}

p {
  color: #525252;
  text-wrap: pretty;
  font-size: 1rem;
}

.text-accent {
  color: var(--accent);
}

/* Eyebrow / Label Badge */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  background: rgba(var(--accent-rgb), 0.05);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(var(--accent-rgb), 0.15);
}

/* Sections - Generous Whitespace (Rhythm) */
section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

@media (min-width: 1024px) {
  section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* Header & Standard 100% Fixed Width */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10010; /* Aumentado para ficar acima de .mobile-overlay (10005) */
  pointer-events: auto;
  background-color: #1f1f21; /* Premium dark charcoal gray background */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Sophisticated dark border */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: padding 0.4s ease, background-color 0.4s ease;
}

.header-island {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.55rem 2rem; /* Expanded top bar padding for a more majestic and premium presence */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  transition: padding 0.4s ease;
}

/* Esconde o fundo quando o menu mobile estiver aberto (mantido para compatibilidade, sem efeito indesejado) */
header:has(.menu-toggle.active) .header-island {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Scrolled state */
header.scrolled {
  background-color: #141415; /* Deeper black/charcoal on scroll */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

header.scrolled .header-island {
  padding: 1.05rem 2rem; /* Adjusted scrolled padding to balance the new expanded height */
}

.logo {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff; /* Ultra high contrast white text for logo against dark background */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-fast);
}

.logo::after {
  content: '.';
  color: #cbd537; /* Premium signature brand green dot */
  margin-left: -0.25rem;
}

.logo .logo-dot {
  color: #cbd537; /* Brand green */
  font-weight: 900;
}

/* Nav Menu Desktop */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}

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

.nav-link {
  font-family: var(--font-heading);
  font-size: 0.9375rem; /* Increased font size for superior readability and authority */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7); /* Sleek translucent white for non-active links */
  text-decoration: none;
  transition: var(--transition-fast);
  position: relative;
  padding: 0.25rem 0;
  display: inline-flex;
  align-items: center;
  line-height: 1.2; /* Ensures perfect optical vertical alignment across all browsers */
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #cbd537; /* Clean green underline for interactive states */
  transition: var(--transition-fast);
}

.nav-link:hover {
  color: #cbd537; /* Smooth fade into brand green */
}

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

.nav-link.active {
  color: #cbd537; /* Vibrant active state in the brand's premium green */
  font-weight: 600;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.35rem; /* Proportional padding adjusted to complement the larger font size */
  font-family: var(--font-heading);
  font-size: 0.9375rem; /* Increased font size matching other navigation links */
  font-weight: 600;
  color: #1a1a1a; /* Ultra dark text over green background for absolute legibility */
  background: #cbd537; /* Beautiful premium brand green */
  border-radius: 9999px;
  text-decoration: none;
  transition: var(--transition-fast);
  line-height: 1.2; /* Matches the vertical sizing box of other nav links */
}

.nav-cta:hover {
  background: #dce73c; /* Brighter high-contrast green hover */
  color: #111111;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(203, 213, 55, 0.35); /* Subtle glow effect */
}

/* Hamburger Icon & Morph */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10010; /* Aumentado para ficar acima de .mobile-overlay (10005) */
}

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

.menu-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: #ffffff; /* Outstanding white bars for crisp visibility on dark island */
  transition: var(--transition-fast);
  transform-origin: center;
}

.menu-toggle:hover span {
  background-color: #cbd537; /* Subtle interactive color shift on hover */
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Menu Fullscreen Overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.98); /* Deep charcoal gray background to match the dark header language */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10005; /* Elevado para ficar acima de cookies (9999) e modal privacidade (10000) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-fluid);
  overflow-y: auto; /* Permite scroll se os links transbordarem verticalmente */
  padding: 6rem 2rem 3rem 2rem; /* Margem interna para evitar corte de conteúdo */
}

@media (max-height: 580px) {
  .mobile-overlay {
    justify-content: flex-start; /* Evita corte superior de links em telas pequenas/paisagem */
  }
}

.mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.nav-mobile .nav-link {
  font-size: 1.5rem;
  font-family: var(--font-heading);
  transform: translateY(20px);
  opacity: 0;
  transition: var(--transition-fluid);
}

.mobile-overlay.active .nav-mobile .nav-link {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger delay for mobile nav reveal */
.mobile-overlay.active .nav-mobile .nav-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-overlay.active .nav-mobile .nav-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-overlay.active .nav-mobile .nav-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-overlay.active .nav-mobile .nav-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-overlay.active .nav-mobile .nav-link:nth-child(5) { transition-delay: 0.3s; }
.mobile-overlay.active .nav-mobile .nav-link:nth-child(6) { transition-delay: 0.35s; }

/* Premium CTA Button (Button-in-Button) */
.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 1.75rem 0.65rem 1.75rem;
  background: var(--primary);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition-magnetic);
  cursor: pointer;
}

.btn-premium-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  margin-right: -1rem;
  transition: var(--transition-magnetic);
}

.btn-premium-inner svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: var(--transition-magnetic);
}

.btn-premium:hover {
  background: var(--primary-light);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}

.btn-premium:hover .btn-premium-inner {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(3px) rotate(45deg);
}

.btn-premium:active {
  transform: scale(0.98);
}

/* Secondary ghost/outline button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  background: transparent;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  transition: var(--transition-fast);
}

.btn-outline:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Double-Bezel (Doppelrand) Card Architecture */
.double-bezel {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-lg);
  padding: 0.375rem;
  transition: var(--transition-fluid);
  height: 100%;
}

.double-bezel-inner {
  background-color: var(--card);
  border-radius: calc(var(--radius-lg) - 0.375rem);
  padding: 2.5rem 2rem;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.01);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-fluid);
}

.double-bezel:hover {
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.12);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -15px rgba(var(--accent-rgb), 0.08);
}

.double-bezel:hover .double-bezel-inner {
  border-color: rgba(255, 255, 255, 1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1), 0 15px 30px -10px rgba(0, 0, 0, 0.02);
}

/* Asymmetric Bezel Variation 1 (Diagonal Left Heavy: Top-Left & Bottom-Right Rounded, Top-Right & Bottom-Left Sharp) */
/* Symmetrical Bezel Variation 1 (Restored to Elegant Symmetrical Rounded Corners) */
.double-bezel.asym-1 {
  border-radius: var(--radius-lg);
}
.double-bezel.asym-1 .double-bezel-inner {
  border-radius: calc(var(--radius-lg) - 0.375rem);
}

/* Symmetrical Bezel Variation 2 (Restored to Elegant Symmetrical Rounded Corners) */
.double-bezel.asym-2 {
  border-radius: var(--radius-lg);
}
.double-bezel.asym-2 .double-bezel-inner {
  border-radius: calc(var(--radius-lg) - 0.375rem);
}

/* Symmetrical Bezel Variation 3 (Restored to Elegant Symmetrical Rounded Corners) */
.double-bezel.asym-3 {
  border-radius: var(--radius-lg);
}
.double-bezel.asym-3 .double-bezel-inner {
  border-radius: calc(var(--radius-lg) - 0.375rem);
}

/* Symmetrical Bezel Variation 4 (Restored to Elegant Symmetrical Rounded Corners) */
.double-bezel.asym-4 {
  border-radius: var(--radius-lg);
}
.double-bezel.asym-4 .double-bezel-inner {
  border-radius: calc(var(--radius-lg) - 0.375rem);
}

/* Symmetrical Bezel Variation 5 (Restored to Elegant Symmetrical Rounded Corners) */
.double-bezel.asym-5 {
  border-radius: var(--radius-lg);
  transform: none;
}
.double-bezel.asym-5 .double-bezel-inner {
  border-radius: calc(var(--radius-lg) - 0.375rem);
  transform: none;
}
.double-bezel.asym-5:hover {
  transform: translateY(-6px) scale(1.01);
}
.double-bezel.asym-5:hover .double-bezel-inner {
  transform: none;
}

/* Symmetrical Layout - Grid offsets disabled for perfectly balanced alignments (Desktop Only) */
@media (min-width: 1024px) {
  .grid-asym-offset-up {
    transform: translateY(0);
  }
  .grid-asym-offset-down {
    transform: translateY(0);
  }
  /* Ensure parent containers have enough vertical clearance to accommodate staggered offsets */
  .grid-3.asym-stagger {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Grid layout rules */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* PREMIUM HERO SLIDER (Rotative Banner) */
.slider-container {
  position: relative;
  width: 100%;
  height: 65dvh;
  min-height: 480px;
  overflow: hidden;
  background-color: var(--background); /* Changed from var(--primary) for light theme */
}

.slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 6.5rem; /* Pushed down slightly for 100% fixed header */
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Static centralized hero header (for "Em que acreditamos") defined symmetrically & responsively */
.static-hero-header {
  position: absolute;
  top: 9.5rem;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 20;
  pointer-events: none;
}

.static-hero-header span {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--primary); /* Changed to primary/charcoal for light theme */
  opacity: 0.65;
}

@media (max-width: 1100px) {
  .static-hero-header {
    top: 6.0rem;
  }
  .slide {
    padding-top: 5rem;
    align-items: center; /* Centered vertically on mobile/tablet */
  }
  .slide-grid {
    gap: 1.5rem !important; /* Reduz o gap para otimizar espaço vertical no mobile/tablet */
  }
  .hero-title {
    font-size: clamp(1.75rem, 4vw, 2.15rem) !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    text-align: center;
  }
  .slide .hero-title {
    font-size: clamp(1.15rem, 3.5vw, 1.45rem) !important;
    font-weight: 400 !important;
  }
  .hero-blocks {
    margin-bottom: 1.25rem !important;
    gap: 1rem !important;
  }
  .hero-block p {
    font-size: 0.875rem !important;
  }
  .hero-actions {
    gap: 1rem !important;
  }
}

@media (max-width: 767px) {
  .static-hero-header {
    top: 5.5rem; /* Ajuste sutil de top no mobile para equilíbrio simétrico */
  }
  .slide {
    padding-top: 6rem;
    align-items: center; /* Centered vertically on mobile devices */
  }
}

@media (max-width: 420px) {
  .static-hero-header {
    top: 7.2rem; /* Empurra o texto "Em que acreditamos" mais para baixo no mobile de 420px ou menos */
  }
}

.slide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (min-width: 1101px) {
  .slide-grid {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Animations for slide content (Staggered Entry Reveal) */
.slide .eyebrow,
.slide .hero-title,
.slide .hero-blocks,
.slide .hero-actions {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-image-box {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1100px) {
  .slide-image-box {
    max-width: 350px !important; /* Foto do banner compacta de forma elegante no tablet/celular */
    margin: 0 auto 5.5rem auto !important; /* Empurra a imagem para cima e deixa os dots e abas 100% livres */
  }
}

@media (max-width: 767px) {
  .slide-image-box {
    max-width: 200px !important; /* Foto mais compacta para celulares para garantir que os dots fiquem 100% livres */
    margin: 0.5rem auto 7.5rem auto !important; /* Margem ajustada para liberar espaço para os dots elevados */
  }
}

@media (max-width: 450px) {
  .slide-image-box {
    max-width: 170px !important; /* Foto compactada proporcionalmente para telas pequenas, sem ocupar espaço excessivo */
    margin: 0.5rem auto 3.5rem auto !important; /* Margem reduzida, pois os dots estão ocultos nessa resolução */
  }
}

/* Active slide trigger classes */
.slide.active .eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.slide.active .hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.slide.active .hero-blocks {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.slide.active .hero-actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* Hero Text Content & Spacing Refinements */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.slide .eyebrow {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
  border-color: rgba(var(--accent-rgb), 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  text-shadow: none;
}

.slide .hero-title {
  color: var(--foreground);
  text-shadow: none;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.25;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  font-weight: 400;
  font-family: var(--font-body);
}

/* Specific high-contrast design for italicized keywords inside slides */
.slide .hero-title em,
.slide .hero-title strong {
  color: #111111 !important;
  font-style: italic;
  font-weight: inherit;
  border-bottom: none;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 2.25rem; /* Generous spacing below heading */
  line-height: 1.15;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-blocks {
  margin-bottom: 2.5rem; /* Generous spacing below text blocks before CTA buttons */
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-block {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.slide .hero-block-rule {
  background: var(--highlight-keyword);
  box-shadow: 0 0 8px rgba(var(--highlight-keyword-rgb), 0.4);
}

.hero-block-rule {
  width: 24px;
  height: 1px;
  background: var(--accent);
  margin-top: 0.85rem;
  flex-shrink: 0;
}

.slide .hero-block p {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-style: italic;
}

.hero-block p {
  color: #525252;
  font-size: 1rem;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* Spacious spacing between CTA buttons */
}

/* White/Solid Slide Button Theme overrides */
.slide .btn-premium {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
}

.slide .btn-premium .btn-premium-inner {
  background: rgba(38, 38, 38, 0.08);
  color: var(--primary);
}

.slide .btn-premium:hover {
  background: var(--highlight-keyword);
  border-color: var(--highlight-keyword);
  color: var(--primary);
  box-shadow: 0 10px 25px -5px rgba(203, 213, 55, 0.35);
}

.slide .btn-outline {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.slide .btn-outline:hover {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
}

.slide.active .slide-image-box {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.35s;
}

.slide-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  mix-blend-mode: normal;
}

/* Slider dots and navigation */
.slider-nav {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.85rem;
  z-index: 85;
  background: rgb(232 232 232);
  padding: 0.65rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .slider-nav {
    bottom: 5.5rem; /* Posiciona os dots acima da barra de abas mobile no celular */
  }
}

@media (max-width: 450px) {
  .slider-nav {
    display: none !important; /* Esconde os dots do banner em telas de 450px ou menos */
  }
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(38, 38, 38, 0.25); /* Darker translucent grey for light background */
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.slider-dot:hover {
  background: rgba(248, 67, 129, 0.5);
}

.slider-dot.active {
  background: #f84381;
  transform: scale(1.35);
  box-shadow: 0 0 10px rgba(248, 67, 129, 0.6);
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75); /* High-contrast white translucent for light theme */
  border: 1px solid rgba(0, 0, 0, 0.08); /* Clean dark border */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Premium soft shadow */
  color: var(--primary); /* Dark arrow icon */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 85;
  transition: var(--transition-fast);
  outline: none;
}

.slider-arrow svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.slider-arrow:hover {
  background: var(--highlight-keyword);
  border-color: var(--highlight-keyword);
  color: var(--primary);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 15px 35px rgba(203, 213, 55, 0.3);
}

.slider-arrow-prev {
  left: 2rem;
}

.slider-arrow-next {
  right: 2rem;
}

@media (max-width: 1200px) {
  .slider-arrow {
    display: none; /* Hide arrows on touch and tablet/small laptop screens */
  }
}

/* Service Detail Header banner */
.service-header {
  background: var(--secondary);
  padding: 8rem 0 4rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.service-header-layout {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.service-header-layout h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.service-header-layout p {
  font-size: 1.15rem;
  color: #666;
}

/* Back Link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: var(--transition-fast);
}

.back-link:hover {
  transform: translateX(-4px);
}

/* Section Header Typography */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem auto;
}

.section-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.05rem;
  color: #666;
}

/* Service Card List (Grid-3) styling details */
.service-icon-box {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--accent);
  margin: 0 auto 2rem auto; /* Centered icon boxes horizontally inside cards */
  transition: var(--transition-fluid);
}

.double-bezel:hover .service-icon-box {
  background: var(--accent);
  color: #fff;
  transform: scale(1.05);
}

.service-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 1rem;
  text-align: center;
  text-transform: uppercase;
}

.service-card-desc {
  font-size: 0.9375rem;
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: var(--transition-fast);
  margin-top: auto;
}

.service-card-link svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  transition: var(--transition-fast);
}

.service-card-link:hover {
  color: var(--accent);
}

.service-card-link:hover svg {
  transform: translateX(4px);
}

/* About Us Layout (Asymmetric split) */
.about-section {
  background-color: var(--card);
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .about-layout {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
}

.about-content h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: 2rem;
}

.about-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #525252;
}

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

.quote-container {
  background: var(--secondary);
  border-left: 3px solid var(--accent);
  padding: 2.5rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}

.quote-text {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--primary);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.quote-author {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.quote-author span {
  display: block;
  font-weight: 400;
  color: #737373;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Call to Action Section (CTA) */
.cta-section {
  background-color: var(--primary);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.cta-section .container {
  max-width: 800px;
  position: relative;
  z-index: 3;
}

.cta-section h2 {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

.cta-section p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.15rem;
  margin-bottom: 3rem;
  line-height: 1.7;
}

.cta-section .btn-premium {
  background: #fff;
  color: var(--primary);
}

.cta-section .btn-premium:hover {
  background: var(--accent);
  color: #fff;
}

/* Footers */
footer {
  background-color: var(--primary);
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-top {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

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

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

.footer-brand h3 {
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9375rem;
  max-width: 280px;
  line-height: 1.6;
}

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

.footer-column h4 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.875rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--highlight-keyword);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  transition: var(--transition-fast);
}

.footer-contact-item:hover {
  color: var(--highlight-keyword);
}

.footer-contact-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--highlight-keyword);
  flex-shrink: 0;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: var(--transition-fast);
}

.footer-social-link:hover {
  background: var(--highlight-keyword);
  color: #404040;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 2rem 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Rodapé Mobile Exclusivo */
.footer-mobile {
  display: none;
  background-color: var(--primary);
  color: rgba(255, 255, 255, 0.7);
  padding: 3rem 1.5rem 7rem 1.5rem; /* Large bottom padding because of sticky action bar */
  text-align: center;
}

.footer-mobile-brand {
  margin-bottom: 2rem;
}

.footer-mobile-brand h3 {
  color: #fff;
  margin-bottom: 0.5rem;
}

.footer-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.footer-mobile-nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-mobile-contact {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-mobile-bottom {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Mobile Quick-Action Tab Bar */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4.25rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -5px 25px rgba(0,0,0,0.03);
  z-index: 90;
}

.mobile-tab-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
  align-items: center;
}

.mobile-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #737373;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  gap: 0.25rem;
}

button.mobile-tab-item {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-tab-item.active {
  color: var(--accent);
}

.mobile-tab-item svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* High visibility tab item for WhatsApp */
.mobile-tab-whatsapp {
  color: #25d366;
}

.mobile-tab-whatsapp svg {
  fill: #25d366;
}

/* Hide desktop parts and show mobile parts on media query */
@media (max-width: 767px) {
  footer.desktop-footer {
    display: none;
  }
  .footer-mobile {
    display: block;
  }
  .mobile-tab-bar {
    display: block;
  }
}

/* Floating Actions: Back to Top & WhatsApp */
.floating-actions {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  pointer-events: none;
}

/* Back to Top Button */
.back-to-top {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition-fluid);
  pointer-events: auto;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.back-to-top:hover {
  background: var(--primary);
  color: #fff;
}

/* WhatsApp Floating Button */
.whatsapp-float {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--whatsapp);
  box-shadow: 0 10px 30px rgba(var(--whatsapp-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fluid);
  pointer-events: auto;
  position: relative;
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  opacity: 0.5;
  animation: pulse-ring 2s infinite;
}

.whatsapp-float svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Hide floating actions on mobile because of the sticky tab bar to avoid clutter */
@media (max-width: 767px) {
  .floating-actions {
    display: none !important;
  }
}

/* IntersectionObserver Scroll Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(2px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger delay classes */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }

/* Institucional Page layout styles */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.institucional-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.sticky-column {
  position: relative;
  top: auto;
}

@media (min-width: 1024px) {
  .institucional-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
  }
  
  .sticky-column {
    position: sticky;
    top: 7rem;
  }
}

/* Clientes Page layout (highly optimized and refined) */
.clients-container {
  padding-top: 8rem;
  padding-bottom: 6rem;
}

.clients-layout-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .clients-layout-main {
    grid-template-columns: 280px 1fr;
    gap: 4rem;
  }
}

/* Sticky Segment Sidebar for Desktop */
.segment-sidebar {
  position: sticky;
  top: 7rem;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  padding-right: 1.5rem;
  border-right: 1px solid var(--border);
  display: none;
}

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

.segment-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.segment-menu-link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #737373;
  text-decoration: none;
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.segment-menu-link:hover, .segment-menu-link.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}

/* Responsive Horizontal Scrolling Nav for Mobile/Tablet */
.segment-scroll-nav {
  display: block;
  position: sticky;
  top: 5rem;
  z-index: 50;
  background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 0.75rem 1.5rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .segment-scroll-nav {
    display: none;
  }
}

.segment-scroll-list {
  display: flex;
  gap: 0.75rem;
  list-style: none;
}

.segment-scroll-link {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #737373;
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: var(--card);
  border: 1px solid var(--border);
  transition: var(--transition-fast);
  display: inline-block;
}

.segment-scroll-link.active, .segment-scroll-link:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.25);
}

/* Segment Section Styles */
.segment-block {
  margin-bottom: 4rem;
  scroll-margin-top: 10rem;
}

.segment-title-header {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* Logos Grid styling */
.logos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 480px) {
  .logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .logos-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1200px) {
  .logos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Elite Stylized Placeholder Logo Card */
.logo-card {
  aspect-ratio: 16 / 9;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: var(--transition-fluid);
  position: relative;
  overflow: hidden;
}

.logo-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #737373;
  text-transform: uppercase;
  text-align: center;
  transition: var(--transition-fast);
}

/* Elite Real Logo Image Support */
.logo-card img.logo-img {
  max-width: 90%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  transition: var(--transition-fluid);
}

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

.logo-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: var(--transition-fast);
}

.logo-card:hover {
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.03);
}

.logo-card:hover .logo-text {
  color: var(--accent);
}

.logo-card:hover::after {
  transform: scaleX(1);
}

/* Custom tooltip overlay para exibir os nomes dos clientes no hover */
.logo-card[data-brand] {
  position: relative;
}

.logo-card[data-brand]::before {
  content: attr(data-brand);
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.98); /* Fundo branco refinado e quase opaco */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-heading); /* Poppins para leitura nítida */
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary); /* Cinza escuro premium (#262626) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(10px);
  z-index: 5;
}

/* Ativação do overlay de texto no Hover */
.logo-card[data-brand]:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* Transição de profundidade na imagem da marca no Hover */
.logo-card[data-brand]:hover img.logo-img {
  opacity: 0.12;
  transform: scale(0.95);
}

/* Contato Form Styles */
.contact-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (min-width: 992px) {
  .contact-layout {
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 4rem;
    align-items: center;
  }
  .contact-layout > .reveal {
    margin: 0 !important;
  }
}

.contact-image-wrapper {
  width: 100%;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}

.contact-image-wrapper:hover {
  transform: translateY(-8px);
}

.contact-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-image-wrapper:hover img {
  transform: scale(1.03);
}

.contact-info-block {
  margin-bottom: 2.5rem;
}

.contact-info-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.contact-info-link {
  font-size: 1.125rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: #525252;
  text-decoration: none;
  transition: var(--transition-fast);
  letter-spacing: -0.01em;
}

.contact-info-link:hover {
  color: var(--accent);
}

/* Interactive Form inputs */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.02);
}

.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-input {
  width: 100%;
  background: var(--secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--foreground);
  transition: var(--transition-fast);
}

.form-input:focus {
  outline: none;
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

textarea.form-input {
  resize: none;
  min-height: 140px;
}

/* AJAX Success/Error Toasts */
.toast-container {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .toast-container {
    left: auto;
    right: 2rem;
    transform: none;
  }
}

.toast {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.5rem;
  box-shadow: 0 15px 35px -5px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(20px);
  opacity: 0;
  transition: var(--transition-fluid);
  pointer-events: auto;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.toast.success .toast-icon {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.toast.error .toast-icon {
  background: rgba(239, 68, 116, 0.1);
  color: var(--error);
}

.toast-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary);
}

/* Service Detail Pages Typography Styles */
.service-content-layout {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 4rem;
  padding-bottom: 6rem;
}

.service-intro-block {
  margin-bottom: 4rem;
}

.service-section-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

.service-list {
  margin: 1.5rem 0 2.5rem 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-list-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 1rem;
  align-items: start;
}

.service-list-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent);
  margin-top: 0.6rem;
}

.service-num-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}

@media (min-width: 640px) {
  .service-num-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-num-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 2rem;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.01);
}

.service-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.service-num-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

/* 404 Page Custom */
.not-found-layout {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.not-found-code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 15vw, 8rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.not-found-title {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.not-found-desc {
  font-size: 1rem;
  color: #666;
  margin-bottom: 2.5rem;
  max-width: 480px;
}

/* ==========================================================================
   PREMIUM SECURITY & PRIVACY CUSTOM CSS
   ========================================================================== */

/* 1. Cookie Consent Banner (LGPD) */
.cookie-consent-banner {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: calc(100% - 4rem);
  max-width: 450px;
  background-color: var(--primary);
  color: #ffffff;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9999;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.cookie-consent-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cookie-consent-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cookie-consent-actions {
  display: flex;
  justify-content: flex-end;
}

/* 2. Privacy & Data Protection Modal */
.privacy-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.privacy-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.privacy-modal {
  background-color: var(--card);
  width: 90%;
  max-width: 650px;
  max-height: 80vh;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(15px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.privacy-modal-overlay.show .privacy-modal {
  transform: scale(1) translateY(0);
}

.privacy-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.privacy-modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.privacy-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: #737373;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}

.privacy-modal-close:hover {
  color: var(--primary);
  transform: rotate(90deg);
}

.privacy-modal-body {
  padding: 2.5rem 2rem;
  overflow-y: auto;
  flex-grow: 1;
}

.privacy-modal-body::-webkit-scrollbar {
  width: 6px;
}

.privacy-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.privacy-modal-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.privacy-modal-footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Bottom footer link hover effect */
.footer-bottom-link:hover {
  color: #ffffff !important;
  opacity: 1;
}

/* Responsiveness adjustments */
@media (max-width: 768px) {
  .cookie-consent-banner {
    bottom: 5.5rem; /* Fica acima da barra flutuante mobile do polegar */
    left: 1rem;
    width: calc(100% - 2rem);
    padding: 1.25rem;
  }
  
  .privacy-modal {
    max-height: 90vh;
    border-radius: var(--radius-md);
  }
  
}

/* ==========================================================================
   ROTEIRO DE ENTREGA SECTION (Interactive Distribution Chart)
   ========================================================================== */
.roteiro-entrega-section {
  background-color: var(--background);
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
}

.roteiro-layout {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
  width: 100%;
}

@media (max-width: 1024px) {
  .roteiro-layout {
    gap: 4rem;
  }
}

.roteiro-content {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.roteiro-content .eyebrow,
.roteiro-content h2,
.roteiro-content p {
  text-align: center;
}

.roteiro-content p {
  max-width: 800px;
  margin: 0 auto;
}

/* Stepper items stacked horizontally above chart */
.roteiro-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  width: 100%;
  margin-top: 3.5rem;
}

.roteiro-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  position: relative;
  width: 100%;
}

/* Horizontal connecting lines between steps on desktop */
@media (min-width: 1025px) {
  .roteiro-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: calc(50% + 1.25rem);
    width: calc(100% - 2.5rem);
    height: 1px;
    background-color: var(--border);
    transition: var(--transition-fast);
  }
}

.roteiro-step-num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  flex-shrink: 0;
  z-index: 2;
  transition: var(--transition-fast);
}

.roteiro-step:hover .roteiro-step-num {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--card);
}

.roteiro-step-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.roteiro-step-info h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.5rem;
}

.roteiro-step-info p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666666;
  margin: 0;
  max-width: 280px;
}

@media (max-width: 1024px) {
  .roteiro-stepper {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }
  
  .roteiro-step::after {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .roteiro-stepper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Chart Widget on the bottom */
.roteiro-chart-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.roteiro-chart-widget {
  background-color: var(--card);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 576px) {
  .roteiro-chart-widget {
    padding: 1.5rem;
  }
}

.roteiro-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--secondary);
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.roteiro-tabs::-webkit-scrollbar {
  display: none;
}

.roteiro-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #737373;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.roteiro-tab-btn:hover {
  color: var(--primary);
  background-color: rgba(0, 0, 0, 0.03);
}

.roteiro-tab-btn.active {
  color: var(--primary);
  background-color: var(--background);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* Tab panes (Cards) */
.roteiro-chart-card {
  display: none;
  flex-direction: column;
  gap: 1.75rem;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.roteiro-chart-card.active {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.roteiro-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.roteiro-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--foreground);
}

.roteiro-card-badge {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--highlight-keyword);
  background: rgba(var(--highlight-keyword-rgb), 0.1);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  letter-spacing: -0.01em;
}

.roteiro-card-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: #666666;
  margin: 0;
}

/* X/Y Interactive Chart Styles */
.roteiro-xy-chart-wrapper {
  margin-top: 1.5rem;
  border-top: 1px solid var(--secondary);
  padding-top: 1.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.roteiro-xy-chart {
  width: 100%;
  position: relative;
}

.roteiro-xy-chart svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.chart-axis {
  stroke: var(--border);
  stroke-width: 1.5;
}

.chart-grid-line {
  stroke: var(--secondary);
  stroke-width: 1;
  stroke-dasharray: 4, 4;
}

.chart-axis-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  fill: #8c8c8c;
  font-weight: 500;
}

.chart-x-label {
  font-family: var(--font-heading);
  font-size: 0.725rem;
  fill: var(--foreground);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.chart-active-line {
  stroke: var(--highlight-keyword);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0px 3px 6px rgba(203, 213, 55, 0.35));
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1), d 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-active-area {
  fill: url(#chart-area-grad);
  opacity: 0.8;
  transition: d 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-point-group {
  cursor: pointer;
}

.chart-point {
  fill: var(--card);
  stroke: var(--highlight-keyword);
  stroke-width: 2.5;
  transition: r 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-point-group:hover .chart-point {
  r: 7.5;
  stroke-width: 4;
}

.chart-point-val {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  fill: var(--foreground);
  text-anchor: middle;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Always show value labels slightly transparent, and full opacity on hover */
.chart-point-val.always-show {
  opacity: 0.85;
  transform: translateY(0);
  fill: var(--primary-light);
}

.chart-point-group:hover .chart-point-val {
  opacity: 1;
  transform: translateY(-2px);
  fill: var(--foreground);
}

@media (max-width: 576px) {
  .chart-x-label {
    font-size: 0.6rem;
  }
  .chart-axis-label {
    font-size: 0.65rem;
  }
}

/* Linear Grid Overlay for beautiful background depth */
.roteiro-linear-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

/* Statistics Section & Grid (Premium Symmetrical Wireframe - Taste Skill) */
.stats-section-wrapper {
  width: 100%;
  padding-top: 4rem;
  margin-top: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 1rem;
  overflow: hidden;
  width: 100%;
}

.stat-card {
  background-color: var(--card);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 155px;
  position: relative;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card.featured {
  grid-column: span 2;
  background-color: rgba(var(--accent-rgb), 0.015);
}

.stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.stat-number {
  font-family: 'Geist Mono', 'Satoshi Mono', 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: clamp(1.85rem, 2.5vw, 2.35rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card.featured .stat-number {
  font-size: clamp(2.35rem, 3.5vw, 3rem);
  color: var(--accent-dark, #111111);
}

.stat-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: #525252;
  margin: 0;
  font-weight: 500;
  text-align: left;
  max-width: 100%;
  letter-spacing: -0.01em;
  transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-wrap: balance;
}

.stat-card.featured .stat-label {
  font-size: 0.9rem;
  color: #404040;
  max-width: 85%;
}

/* High-end minimalist hover effect: invert to dark background with white text */
.stat-card:hover {
  background-color: var(--accent);
}

.stat-card:hover .stat-number {
  color: #ffffff;
}

.stat-card:hover .stat-label {
  color: rgba(255, 255, 255, 0.85);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .stat-card {
    padding: 1.85rem 1.65rem;
    min-height: 145px;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card.featured {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
    border-radius: 0.75rem;
  }
  .stat-card.featured {
    grid-column: span 1;
  }
  .stat-card {
    padding: 1.5rem 1.25rem;
    min-height: auto;
    gap: 0.75rem;
  }
  .stat-card-content {
    justify-content: flex-start;
    gap: 0.5rem;
  }
}


/* ==========================================================================
   FEEDBACK SECTION (Testimonials)
   ========================================================================== */
.feedback-section {
  background-color: var(--background); /* Standardized light gray background */
  position: relative;
  overflow: hidden;
}

.feedback-slider-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  padding: 1.5rem 0;
}

.feedback-slider-wrapper {
  display: flex;
  width: 300%; /* For 3 feedbacks */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.feedback-slide {
  width: 33.3333%;
  flex-shrink: 0;
  padding: 0 1rem;
}

.feedback-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--card); /* Standardized white background for clean card depth */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.05);
  transition: var(--transition-fluid);
}

.feedback-text {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: var(--primary-light);
  margin-bottom: 2rem;
  font-style: italic;
  font-weight: 400;
  text-wrap: pretty;
}

.feedback-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.feedback-author strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
}

.feedback-author span {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #737373;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Slider Controls & Nav */
.feedback-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
}

.feedback-arrow {
  background: var(--card);
  border: 1px solid var(--border);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--primary);
}

.feedback-arrow:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.feedback-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.feedback-dots {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.feedback-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}

.feedback-dot:hover {
  background: rgba(250, 136, 254, 0.5);
}

.feedback-dot.active {
  background: #fa88fe;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(250, 136, 254, 0.6);
}

/* ==========================================================================
   CLIENTS SHOWCASE (Home Logo Wall)
   ========================================================================== */
.home-clients-section {
  background-color: var(--background);
  padding-top: 4rem;
  padding-bottom: 4ch;
  overflow: hidden;
}

.home-clients-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 3rem;
}

/* Infinite Scrolling Ticker */
.logo-ticker {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0.75rem 0;
  pointer-events: auto;
}

/* Fade effects on the left and right borders of the ticker */
.logo-ticker::before,
.logo-ticker::after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 20%;
  max-width: 250px;
  z-index: 2;
  pointer-events: none;
}

.logo-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--background) 0%, rgba(242, 242, 242, 0) 100%);
}

.logo-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--background) 0%, rgba(242, 242, 242, 0) 100%);
}

.logo-ticker-track {
  display: flex;
  width: max-content;
  animation: scrollTicker 40s linear infinite;
}

.logo-ticker-track-left {
  display: flex;
  width: max-content;
  animation: scrollTickerLeft 45s linear infinite;
}

.logo-ticker-track-right {
  display: flex;
  width: max-content;
  animation: scrollTickerRight 45s linear infinite;
}

.logo-ticker-track:hover,
.logo-ticker-track-left:hover,
.logo-ticker-track-right:hover {
  animation-play-state: paused;
}

.logo-ticker-group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem; /* Ensure perfect gap between track repetitions */
  flex-shrink: 0;
}

.logo-ticker-group .logo-card {
  width: 240px; /* Larger desktop card width for improved prominence */
  height: 120px; /* Larger desktop card height for improved prominence */
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  transition: var(--transition-fluid);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}

/* Enforce perfect unified size & premium styling for logos inside ticker and grids */
.logo-ticker-group .logo-card img.logo-img,
.logos-grid .logo-card img.logo-img {
  height: 48px !important; /* Perfect visual uniformity */
  max-height: 48px !important;
  width: auto !important;
  max-width: 82% !important;
  object-fit: contain !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: scale(1) translateZ(0);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.logo-ticker-group .logo-card:hover img.logo-img,
.logos-grid .logo-card:hover img.logo-img {
  transform: scale(1.05) translateZ(0);
}

.logo-ticker-group .logo-card[data-brand]:hover img.logo-img,
.logos-grid .logo-card[data-brand]:hover img.logo-img {
  opacity: 0.12 !important;
  transform: scale(0.95) translateZ(0) !important;
}

/* Dynamic Aspect Ratio Balancing (Symbol/Square vs Wordmark) */
.logo-ticker-group .logo-card[data-logo-shape="symbol"] img.logo-img,
.logos-grid .logo-card[data-logo-shape="symbol"] img.logo-img {
  height: 64px !important;
  max-height: 64px !important;
  transform: scale(var(--logo-scale, 1.05)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="symbol"]:hover img.logo-img,
.logos-grid .logo-card[data-logo-shape="symbol"]:hover img.logo-img {
  transform: scale(calc(var(--logo-scale, 1.05) * 1.05)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="symbol"][data-brand]:hover img.logo-img,
.logos-grid .logo-card[data-logo-shape="symbol"][data-brand]:hover img.logo-img {
  opacity: 0.12 !important;
  transform: scale(calc(var(--logo-scale, 1.05) * 0.95)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="padded-symbol"] img.logo-img,
.logos-grid .logo-card[data-logo-shape="padded-symbol"] img.logo-img {
  height: 44px !important;
  max-height: 44px !important;
  transform: scale(var(--logo-scale, 2.1)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="padded-symbol"]:hover img.logo-img,
.logos-grid .logo-card[data-logo-shape="padded-symbol"]:hover img.logo-img {
  transform: scale(calc(var(--logo-scale, 2.1) * 1.05)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="padded-symbol"][data-brand]:hover img.logo-img,
.logos-grid .logo-card[data-logo-shape="padded-symbol"][data-brand]:hover img.logo-img {
  opacity: 0.12 !important;
  transform: scale(calc(var(--logo-scale, 2.1) * 0.95)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="wordmark"] img.logo-img,
.logos-grid .logo-card[data-logo-shape="wordmark"] img.logo-img {
  height: 48px !important;
  max-height: 48px !important;
  transform: scale(var(--logo-scale, 1.0)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="wordmark"]:hover img.logo-img,
.logos-grid .logo-card[data-logo-shape="wordmark"]:hover img.logo-img {
  transform: scale(calc(var(--logo-scale, 1.0) * 1.05)) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape="wordmark"][data-brand]:hover img.logo-img,
.logos-grid .logo-card[data-logo-shape="wordmark"][data-brand]:hover img.logo-img {
  opacity: 0.12 !important;
  transform: scale(calc(var(--logo-scale, 1.0) * 0.95)) translateZ(0) !important;
}

/* Precise Visual Weight Adjustments (Base & Hover states to balance logo sizes) */
.logo-ticker-group .logo-card img.logo-img[alt="PlayStation"],
.logo-ticker-group .logo-card img.logo-img[alt="Playstation"],
.logos-grid .logo-card img.logo-img[alt="PlayStation"],
.logos-grid .logo-card img.logo-img[alt="Playstation"] {
  transform: scale(1.1) translateZ(0) !important; /* Compensate for margins & make it look beautifully proportionate */
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="PlayStation"],
.logo-ticker-group .logo-card:hover img.logo-img[alt="Playstation"],
.logos-grid .logo-card:hover img.logo-img[alt="PlayStation"],
.logos-grid .logo-card:hover img.logo-img[alt="Playstation"] {
  transform: scale(1.15) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Google"],
.logos-grid .logo-card img.logo-img[alt="Google"] {
  transform: scale(1.15) translateZ(0) !important; /* Scale up to match other brand weights */
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Google"],
.logos-grid .logo-card:hover img.logo-img[alt="Google"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Accenture"],
.logos-grid .logo-card img.logo-img[alt="Accenture"] {
  transform: scale(1.2) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Accenture"],
.logos-grid .logo-card:hover img.logo-img[alt="Accenture"] {
  transform: scale(1.26) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Vivo"],
.logos-grid .logo-card img.logo-img[alt="Vivo"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Vivo"],
.logos-grid .logo-card:hover img.logo-img[alt="Vivo"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="J.P. Morgan"],
.logo-ticker-group .logo-card img.logo-img[alt="J. P. Morgan"],
.logo-ticker-group .logo-card img.logo-img[alt="J.P. Morgan's"],
.logo-ticker-group .logo-card img.logo-img[alt="J.P.Morgan"],
.logos-grid .logo-card img.logo-img[alt="J.P. Morgan"],
.logos-grid .logo-card img.logo-img[alt="J. P. Morgan"],
.logos-grid .logo-card img.logo-img[alt="J.P. Morgan's"],
.logos-grid .logo-card img.logo-img[alt="J.P.Morgan"] {
  transform: scale(1.25) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="J.P. Morgan"],
.logo-ticker-group .logo-card:hover img.logo-img[alt="J. P. Morgan"],
.logo-ticker-group .logo-card:hover img.logo-img[alt="J.P.Morgan"],
.logos-grid .logo-card:hover img.logo-img[alt="J.P. Morgan"],
.logos-grid .logo-card:hover img.logo-img[alt="J. P. Morgan"],
.logos-grid .logo-card:hover img.logo-img[alt="J.P.Morgan"] {
  transform: scale(1.31) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Oracle"],
.logos-grid .logo-card img.logo-img[alt="Oracle"] {
  transform: scale(0.95) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Oracle"],
.logos-grid .logo-card:hover img.logo-img[alt="Oracle"] {
  transform: scale(1.0) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Unilever"],
.logos-grid .logo-card img.logo-img[alt="Unilever"] {
  height: 90px !important; /* Overrides the general 48px limit to compensate for extreme transparent margins */
  max-height: 90px !important;
  transform: scale(1.65) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Unilever"],
.logos-grid .logo-card:hover img.logo-img[alt="Unilever"] {
  transform: scale(1.72) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Nestlé"],
.logo-ticker-group .logo-card img.logo-img[alt="Nestle"],
.logos-grid .logo-card img.logo-img[alt="Nestlé"],
.logos-grid .logo-card img.logo-img[alt="Nestle"] {
  height: 65px !important; /* Overrides the general 48px limit for Nestlé */
  max-height: 65px !important;
  transform: scale(1.32) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Nestlé"],
.logo-ticker-group .logo-card:hover img.logo-img[alt="Nestle"],
.logos-grid .logo-card:hover img.logo-img[alt="Nestlé"],
.logos-grid .logo-card:hover img.logo-img[alt="Nestle"] {
  transform: scale(1.38) translateZ(0) !important;
}

/* Additional brand overrides for perfect optical weight */
.logos-grid .logo-card img.logo-img[alt="MAC"] {
  transform: scale(1.4) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="MAC"] {
  transform: scale(1.47) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Aspen"],
.logos-grid .logo-card img.logo-img[alt="Aspen"] {
  transform: scale(1.4) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Aspen"],
.logos-grid .logo-card:hover img.logo-img[alt="Aspen"] {
  transform: scale(1.47) translateZ(0) !important;
}

.logo-ticker-group .logo-card img.logo-img[alt="Sanofi"],
.logos-grid .logo-card img.logo-img[alt="Sanofi"] {
  transform: scale(1.5) translateZ(0) !important;
}
.logo-ticker-group .logo-card:hover img.logo-img[alt="Sanofi"],
.logos-grid .logo-card:hover img.logo-img[alt="Sanofi"] {
  transform: scale(1.57) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Natura"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Natura"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="L'Oréal"],
.logos-grid .logo-card img.logo-img[alt="L'Oreal"],
.logos-grid .logo-card img.logo-img[alt="Loreal"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="L'Oréal"],
.logos-grid .logo-card:hover img.logo-img[alt="L'Oreal"],
.logos-grid .logo-card:hover img.logo-img[alt="Loreal"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="Aegea"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="AEGEA"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="aegea"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="Aegea"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="AEGEA"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="aegea"] {
  transform: scale(0.5) translateZ(0) !important;
}
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="Aegea"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="AEGEA"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="aegea"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="Aegea"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="AEGEA"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="aegea"] {
  transform: scale(0.55) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="Abbott"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="ABBOTT"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="abbott"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="Abbott"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="ABBOTT"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="abbott"] {
  transform: scale(0.7) translateZ(0) !important;
}
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="Abbott"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="ABBOTT"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="abbott"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="Abbott"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="ABBOTT"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="abbott"] {
  transform: scale(0.74) translateZ(0) !important;
}

.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="Aché"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="ACHÉ"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="aché"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="Ache"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="ACHE"],
.logo-ticker-group .logo-card[data-logo-shape] img.logo-img[alt="ache"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="Aché"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="ACHÉ"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="aché"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="Ache"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="ACHE"],
.logos-grid .logo-card[data-logo-shape] img.logo-img[alt="ache"] {
  transform: scale(0.7) translateZ(0) !important;
}
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="Aché"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="ACHÉ"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="aché"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="Ache"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="ACHE"],
.logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img[alt="ache"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="Aché"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="ACHÉ"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="aché"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="Ache"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="ACHE"],
.logos-grid .logo-card[data-logo-shape]:hover img.logo-img[alt="ache"] {
  transform: scale(0.74) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Ambev"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Ambev"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Arcos Dourados"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Arcos Dourados"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Aliansce Sonae"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Aliansce Sonae"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Boa Compra"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Boa Compra"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Grupo Pão de Açúcar"],
.logos-grid .logo-card img.logo-img[alt="Grupo Pao de Acucar"] {
  transform: scale(1.2) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Grupo Pão de Açúcar"],
.logos-grid .logo-card:hover img.logo-img[alt="Grupo Pao de Acucar"] {
  transform: scale(1.26) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Marisa"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Marisa"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Riachuelo"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Riachuelo"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Cisco"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Cisco"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="TIM"],
.logos-grid .logo-card img.logo-img[alt="Tim"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="TIM"],
.logos-grid .logo-card:hover img.logo-img[alt="Tim"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="ACSP"] {
  transform: scale(1.2) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="ACSP"] {
  transform: scale(1.26) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Sesi"],
.logos-grid .logo-card img.logo-img[alt="SESI"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Sesi"],
.logos-grid .logo-card:hover img.logo-img[alt="SESI"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Agro Bayer"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Agro Bayer"] {
  transform: scale(1.21) translateZ(0) !important;
}

.logos-grid .logo-card img.logo-img[alt="Philip Morris"] {
  transform: scale(1.15) translateZ(0) !important;
}
.logos-grid .logo-card:hover img.logo-img[alt="Philip Morris"] {
  transform: scale(1.21) translateZ(0) !important;
}

/* Mobile optimizations for ticker and grid */
@media (max-width: 768px) {
  .logo-ticker-group .logo-card {
    width: 175px; /* Proportional mobile card width (was 155px) */
    height: 90px; /* Proportional mobile card height (was 78px) */
    padding: 0.95rem;
  }
  .logo-ticker-group .logo-card img.logo-img,
  .logos-grid .logo-card img.logo-img {
    height: 34px !important; /* Proportional uniform height on mobile */
    max-height: 34px !important;
  }
  .logo-ticker-group {
    gap: 1.5rem;
    padding-right: 1.5rem;
  }
  .logo-ticker::before,
  .logo-ticker::after {
    width: 12%;
  }
}

@keyframes scrollTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollTickerLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollTickerRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* ==========================================================================
   LINEAR DIAGONAL LINES SYSTEM (Premium Brand Identity)
   ========================================================================== */
.linear-diagonal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* Behind all content */
}

.linear-diagonal-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ensure the parent sections are relative so absolute positioning works perfectly */
.slider-container,
.services-section,
.about-section,
.cta-section {
  position: relative;
}

.services-section {
  padding-top: 3.5rem;
}

/* ==========================================================================
   FULL-SCREEN BANNER BACKGROUNDS WITH TEXT OVERLAYS
   ========================================================================== */
.slide-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.slide-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.03) saturate(1.1); /* Slightly brighter photos as requested, optimized dark rendering for readability */
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide.active .slide-bg-image img {
  transform: scale(1.05); /* Smooth subtle ken-burns zoom */
}

.slide-bg-overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to right, rgba(17, 17, 17, 0.92) 0%, rgba(17, 17, 17, 0.45) 50%, rgba(17, 17, 17, 0.15) 100%),
              linear-gradient(to top, rgba(17, 17, 17, 0.75) 0%, transparent 40%),
              linear-gradient(to bottom, rgba(17, 17, 17, 0.5) 0%, transparent 30%); */
  z-index: 2;
}

@media (max-width: 1100px) {
  .slide-bg-overlay {
    /* background: linear-gradient(to bottom, rgba(17, 17, 17, 0.92) 0%, rgba(17, 17, 17, 0.75) 60%, rgba(17, 17, 17, 0.5) 100%); Full height safety overlay with subtle color fade-through */
  }
}

/* Centraliza os assuntos das fotos no mobile, pois no original estão do lado direito */
@media (max-width: 768px) {
  .slide-bg-image img {
    object-position: right center !important;
    filter: grayscale(100%) brightness(0.32) contrast(1.1) !important; /* Taste Skill: Brilho reduzido de 0.55 para 0.32 para contraste superior da tipografia branca no mobile */
  }
}

.slide .hero-content {
  max-width: 1200px; /* Constrains line length for premium readability */
  position: relative;
  z-index: 10;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   ASYMMETRIC DESIGN LINES MODULE (Taste Skill - Anti-Slop Premium)
   ========================================================================== */
.asym-lines-wrapper {
  display: none !important; /* Hidden to restore absolute symmetry and clean minimalist layout */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* Above backgrounds, below text */
}

/* Line Base Styles */
.asym-line {
  position: absolute;
  pointer-events: none;
  background-color: transparent;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Theme Adaptability */
.asym-line-light {
  border-color: rgba(38, 38, 38, 0.08);
}
.asym-line-light .asym-node {
  background-color: rgba(38, 38, 38, 0.25);
}
.asym-line-light .asym-tag {
  color: rgba(38, 38, 38, 0.35);
}

.asym-line-dark {
  border-color: rgba(255, 255, 255, 0.06);
}
.asym-line-dark .asym-node {
  background-color: rgba(255, 255, 255, 0.25);
}
.asym-line-dark .asym-tag {
  color: rgba(255, 255, 255, 0.35);
}

/* Horizontal Variations (Non-crossing / Asymmetric) */
.asym-h-left {
  left: 0;
  width: 32vw;
  height: 1px;
  border-top-width: 1px;
  border-top-style: solid;
}

.asym-h-right {
  right: 0;
  width: 38vw;
  height: 1px;
  border-top-width: 1px;
  border-top-style: solid;
}

.asym-h-left-fade {
  left: 0;
  width: 45vw;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0) 100%);
}

.asym-line-dark .asym-h-left-fade {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

.asym-h-right-fade {
  right: 0;
  width: 45vw;
  height: 1px;
  background: linear-gradient(-90deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0) 100%);
}

.asym-line-dark .asym-h-right-fade {
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
}

.asym-h-mid {
  left: calc((100vw - var(--container-max)) / 2 + 1.5rem);
  width: 250px;
  height: 1px;
  border-top-width: 1px;
  border-top-style: solid;
}

@media (max-width: 1280px) {
  .asym-h-mid {
    left: 1.5rem;
  }
}

/* Vertical Variations (Asymmetric Gutter/Margins) */
.asym-v-left {
  left: calc((100vw - var(--container-max)) / 2 + 1.5rem);
  width: 1px;
  height: 350px;
  border-left-width: 1px;
  border-left-style: solid;
}

.asym-v-right {
  right: calc((100vw - var(--container-max)) / 2 + 1.5rem);
  width: 1px;
  height: 280px;
  border-left-width: 1px;
  border-left-style: solid;
}

@media (max-width: 1280px) {
  .asym-v-left {
    left: 1.5rem;
  }
  .asym-v-right {
    right: 1.5rem;
  }
}

.asym-v-side-left {
  left: 6vw;
  width: 1px;
  height: 450px;
  border-left-width: 1px;
  border-left-style: solid;
}

.asym-v-side-right {
  right: 8vw;
  width: 1px;
  height: 400px;
  border-left-width: 1px;
  border-left-style: solid;
}

/* Gutter dividers for asymmetric split layout columns */
.asym-column-divider {
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 50%;
  width: 1px;
  border-left-width: 1px;
  border-left-style: solid;
  transform: translateX(-50%);
  display: none;
}

@media (min-width: 1024px) {
  .asym-column-divider {
    display: block;
  }
}

/* Aesthetic Nodes and Tags */
.asym-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 0; /* Square node for technical blueprint look */
  transform: translate(-50%, -50%);
}

.asym-h-left .asym-node {
  left: 100%;
  top: 50%;
}

.asym-h-right .asym-node {
  left: 0;
  top: 50%;
}

.asym-h-mid .asym-node {
  left: 100%;
  top: 50%;
}

.asym-v-left .asym-node {
  left: 50%;
  top: 100%;
}

.asym-v-right .asym-node {
  left: 50%;
  top: 100%;
}

.asym-v-side-left .asym-node {
  left: 50%;
  top: 100%;
}

.asym-v-side-right .asym-node {
  left: 50%;
  top: 0;
}

.asym-tag {
  position: absolute;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.asym-h-left .asym-tag {
  left: 102%;
  top: -12px;
}

.asym-h-right .asym-tag {
  right: 102%;
  top: -12px;
}

.asym-v-left .asym-tag {
  left: 10px;
  top: 100%;
  transform: translateY(-50%);
}

.asym-v-right .asym-tag {
  right: 10px;
  top: 100%;
  transform: translateY(-50%);
}

/* Mobile hiding for lines that may clutter smaller viewports */
@media (max-width: 768px) {
  .asym-line {
    opacity: 0.4; /* Soften instead of fully hiding to keep the aesthetic but avoid clutter */
  }
  .asym-v-side-left, .asym-v-side-right, .asym-h-right, .asym-h-left {
    display: none; /* Hide extreme viewport lines on mobile */
  }
}

/* ==========================================================================
   ADVANCED ASYMMETRIC LAYOUT DESIGN ELEMENTS
   ========================================================================== */

/* Giant Asymmetric Background Watermark Typography */
.asym-bg-watermark {
  position: absolute;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 12vw, 15rem);
  font-weight: 900;
  color: transparent !important;
  -webkit-text-stroke: 1px var(--border) !important;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 0.8;
  letter-spacing: -0.04em;
  opacity: 1 !important;
}

.asym-line-dark .asym-bg-watermark {
  color: transparent !important;
  -webkit-text-stroke: 1px #333333 !important;
}

.asym-watermark-tr {
  top: -1rem;
  right: -2vw;
  transform: rotate(3deg);
}

.asym-watermark-bl {
  bottom: -3rem;
  left: -2vw;
  transform: rotate(-2deg);
}

.asym-watermark-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-size: clamp(8rem, 20vw, 24rem);
  color: transparent !important;
  -webkit-text-stroke: 1px var(--border) !important;
}

.asym-line-dark .asym-watermark-center {
  color: transparent !important;
  -webkit-text-stroke: 1px #333333 !important;
}

/* Asymmetric Side Badge / Vertical Text Ribbon */
.asym-side-badge {
  position: absolute;
  top: 50%;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(var(--accent-rgb), 0.25);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

.asym-line-dark .asym-side-badge {
  color: rgba(255, 255, 255, 0.25);
}

.asym-side-badge-left {
  left: -4rem;
}

.asym-side-badge-right {
  right: -4rem;
}

@media (max-width: 1400px) {
  .asym-side-badge {
    display: none; /* Hide when viewport is too narrow to avoid clipping outside screen edges */
  }
}

/* Asymmetric Geometric Background Accents */
.asym-bg-block {
  position: absolute;
  background: rgba(var(--accent-rgb), 0.015);
  pointer-events: none;
  z-index: 0;
  transition: var(--transition-fluid);
}

.asym-line-dark .asym-bg-block {
  background: rgba(255, 255, 255, 0.01);
}

.asym-block-1 {
  top: 15%;
  right: 5%;
  width: 18rem;
  height: 28rem;
  border-radius: var(--radius-lg) 0 12rem 0;
  transform: rotate(3deg);
}

.asym-block-2 {
  bottom: 8%;
  left: 3%;
  width: 24rem;
  height: 18rem;
  border-radius: 0 var(--radius-lg) 0 10rem;
  transform: rotate(-2deg);
}

/* Asymmetric Tech Corner Brackets */
.asym-corner-bracket {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.1);
  z-index: 2;
  transition: var(--transition-fluid);
}

.asym-line-dark .asym-corner-bracket {
  border-color: rgba(255, 255, 255, 0.08);
}

.asym-bracket-top-left {
  top: 3rem;
  left: 3rem;
  border-width: 1.5px 0 0 1.5px;
}

.asym-bracket-bottom-right {
  bottom: 3rem;
  right: 3rem;
  border-width: 0 1.5px 1.5px 0;
}

.asym-bracket-top-right {
  top: 3rem;
  right: 3rem;
  border-width: 1.5px 1.5px 0 0;
}

.asym-bracket-bottom-left {
  bottom: 3rem;
  left: 3rem;
  border-width: 0 0 1.5px 1.5px;
}

/* High-contrast Technical Crosshairs */
.asym-tech-cross {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 2;
}

.asym-tech-cross::before,
.asym-tech-cross::after {
  content: '';
  position: absolute;
  background: rgba(var(--accent-rgb), 0.15);
}

.asym-line-dark .asym-tech-cross::before,
.asym-line-dark .asym-tech-cross::after {
  background: rgba(255, 255, 255, 0.12);
}

.asym-tech-cross::before {
  top: 9px;
  left: 0;
  width: 20px;
  height: 1px;
}

.asym-tech-cross::after {
  top: 0;
  left: 9px;
  width: 1px;
  height: 20px;
}

/* ==========================================================================
   SISTEMA DE DESTAQUE DE PALAVRAS-CHAVE (Solicitação do Cliente: #cbd537)
   ========================================================================== */

/* Destaque global de cor para palavras-chave (tags 'em' e 'strong') em todo o site */
em, strong, .highlight-keyword, .keyword-highlight {
  color: var(--highlight-keyword) !important;
}

/* Preserva o estilo itálico específico para a tag 'em' */
em {
  font-style: italic;
  font-weight: inherit;
}

/* Preserva e garante o peso em negrito para a tag 'strong' */
strong {
  font-weight: 700;
}

/* Garante que títulos com a tag 'em' tenham destaque fantástico */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.hero-title em, .slide .hero-title em,
.service-section-title em, .asym-tag em {
  color: var(--highlight-keyword) !important;
  font-style: italic;
}

/* ==========================================================================
   CATÁLOGO DE SERVIÇOS (5 CARDS / DESIGN TASTE SKILL)
   ========================================================================== */

.services-flex-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 2.5rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Centered Grid variation for exactly 5 cards (3 on top, 2 centered below) */
@media (min-width: 1024px) {
  .services-flex-container.services-grid-centered {
    grid-template-columns: repeat(6, 1fr);
  }
  .services-flex-container.services-grid-centered > :nth-child(1),
  .services-flex-container.services-grid-centered > :nth-child(2),
  .services-flex-container.services-grid-centered > :nth-child(3) {
    grid-column: span 2;
  }
  .services-flex-container.services-grid-centered > :nth-child(4) {
    grid-column: 2 / span 2;
  }
  .services-flex-container.services-grid-centered > :nth-child(5) {
    grid-column: 4 / span 2;
  }
}

.services-flex-container .double-bezel {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  min-height: 460px;
  transition: var(--transition-fluid);
}

.services-flex-container .double-bezel-inner {
  flex: 1;
}

/* Destaque para Estratégia de Comunicação */
.double-bezel.card-featured {
  background: rgba(var(--accent-rgb), 0.03);
  border-color: rgba(var(--accent-rgb), 0.1);
}

.double-bezel.card-featured .double-bezel-inner {
  background: #fafafa;
}

@media (max-width: 1023px) {
  .services-flex-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  
  /* Tablet centering layout for exactly 5 cards (2 + 2 + 1 centered) */
  .services-flex-container.services-grid-centered {
    grid-template-columns: repeat(4, 1fr);
  }
  .services-flex-container.services-grid-centered > :nth-child(1),
  .services-flex-container.services-grid-centered > :nth-child(2),
  .services-flex-container.services-grid-centered > :nth-child(3),
  .services-flex-container.services-grid-centered > :nth-child(4) {
    grid-column: span 2;
  }
  .services-flex-container.services-grid-centered > :nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 767px) {
  .services-flex-container,
  .services-flex-container.services-grid-centered {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .services-flex-container.services-grid-centered > * {
    grid-column: auto !important;
  }
}

/* Lista de marcadores premium */
.service-bullet-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 1.25rem;
}

.service-bullet-list li {
  font-family: var(--font-body);
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.4;
  transition: var(--transition-fast);
  text-transform: lowercase;
}

.service-bullet-list li:hover {
  color: var(--primary);
  transform: translateX(4px);
}

.service-bullet-marker {
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background-color: var(--accent);
  transition: var(--transition-fast);
}

.service-bullet-list li:hover .service-bullet-marker {
  background-color: var(--highlight-keyword);
  transform: scale(1.3);
}

/* Badge Executivo */
.badge-premium {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  vertical-align: middle;
}

..service-card-disclaimer {
  font-size: 0.72rem;
  color: #a3a3a3;
  font-style: italic;
  margin-top: 1.25rem;
  line-height: 1.35;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
  padding-top: 0.75rem;
}

/* ==========================================================================
   CENTERED SCROLL-DRIVEN TIMELINE SYSTEM (Taste Skill Redesign)
   ========================================================================== */

.timeline-container {
  position: relative;
  width: 100%;
  margin: 4rem auto 0 auto;
  padding: 2rem 0;
}

.timeline-track-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--border);
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0.6;
}

.timeline-progress-line {
  position: absolute;
  left: 50%;
  top: 0;
  height: 0%;
  width: 2px;
  background-color: var(--accent);
  transform: translateX(-50%);
  z-index: 2;
  transition: height 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-row {
  display: flex;
  width: 100%;
  margin-bottom: 7rem;
  position: relative;
  z-index: 3;
}

.timeline-row:last-child {
  margin-bottom: 0;
}

.timeline-left {
  justify-content: flex-start;
}

.timeline-right {
  justify-content: flex-end;
}

.timeline-card-wrapper {
  width: calc(50% - 60px);
  position: relative;
  transition: var(--transition-fluid);
}

/* Horizontal connector lines for professional technical feeling */
.timeline-card-wrapper::after {
  content: "";
  position: absolute;
  top: 4rem;
  width: 30px;
  height: 1px;
  border-top: 1px dashed var(--border);
  z-index: -1;
  transition: var(--transition-fluid);
}

.timeline-left .timeline-card-wrapper::after {
  right: -40px;
}

.timeline-right .timeline-card-wrapper::after {
  left: -40px;
}

.timeline-row.active-timeline .timeline-card-wrapper::after {
  border-top-color: var(--accent);
  border-top-style: solid;
}

.timeline-node {
  position: absolute;
  left: 50%;
  top: 4rem;
  width: 22px;
  height: 22px;
  background-color: var(--card);
  border: 2px solid var(--border);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fluid);
}

.timeline-node-inner {
  display: block;
  width: 8px;
  height: 8px;
  background-color: transparent;
  border-radius: 50%;
  transition: var(--transition-fluid);
}

/* Light up active states on scroll */
.timeline-row.active-timeline .timeline-node {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.08);
  transform: translate(-50%, -50%) scale(1.15);
}

.timeline-row.active-timeline .timeline-node-inner {
  background-color: var(--accent);
}

/* Date Tag placed outside for elegant asymmetric alignment (Taste Skill) */
.timeline-date-tag {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.timeline-left .timeline-date-tag {
  align-items: flex-start;
}

.timeline-right .timeline-date-tag {
  align-items: flex-start;
}

.timeline-year {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
}

.timeline-loc {
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.8;
  margin-top: 0.35rem;
}

/* Responsive Overrides (Taste Skill Layout Discipline) */
@media (max-width: 991px) {
  .timeline-card-wrapper {
    width: calc(50% - 40px);
  }
  .timeline-left .timeline-card-wrapper::after {
    right: -25px;
    width: 15px;
  }
  .timeline-right .timeline-card-wrapper::after {
    left: -25px;
    width: 15px;
  }
}

@media (max-width: 767px) {
  .timeline-track-line,
  .timeline-progress-line {
    left: 20px;
    transform: none;
  }
  
  .timeline-row {
    justify-content: flex-end;
    margin-bottom: 5rem;
  }
  
  .timeline-card-wrapper {
    width: calc(100% - 50px);
  }
  
  /* Remove dashed connector lines on mobile */
  .timeline-card-wrapper::after {
    display: none !important;
  }
  
  .timeline-node {
    left: 20px;
    top: 4rem;
    transform: translate(-50%, -50%);
  }
  
  .timeline-left,
  .timeline-right {
    justify-content: flex-end;
  }
  
  .timeline-left .timeline-date-tag,
  .timeline-right .timeline-date-tag {
    align-items: flex-start;
  }
  
  .timeline-section {
    padding: 4rem 0 !important;
  }
}

/* ==========================================================================
   MINIMALIST UNIFORM STANDARDIZATION FOR BOTH INDEX.PHP & CLIENTS.PHP LOGOS
   ========================================================================== */
html body .logos-grid .logo-card img.logo-img,
html body .logos-grid .logo-card[data-logo-shape] img.logo-img,
html body .logos-grid .logo-card img.logo-img[alt],
html body .logos-grid .logo-card img.logo-img[class],
html body .logo-ticker-group .logo-card img.logo-img,
html body .logo-ticker-group .logo-card[data-logo-shape] img.logo-img,
html body .logo-ticker-group .logo-card img.logo-img[alt],
html body .logo-ticker-group .logo-card img.logo-img[class] {
  height: 56px !important;
  max-height: 56px !important;
  width: auto !important;
  max-width: 85% !important;
  object-fit: contain !important;
  transform: scale(1) translateZ(0) !important;
  opacity: 1 !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Perfect uniform hover behavior specifically on both grid and ticker cards */
html body .logos-grid .logo-card:hover img.logo-img,
html body .logos-grid .logo-card[data-logo-shape]:hover img.logo-img,
html body .logos-grid .logo-card:hover img.logo-img[alt],
html body .logos-grid .logo-card:hover img.logo-img[class],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img,
html body .logos-grid .logo-card[data-logo-shape][data-brand]:hover img.logo-img,
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[class],
html body .logo-ticker-group .logo-card:hover img.logo-img,
html body .logo-ticker-group .logo-card[data-logo-shape]:hover img.logo-img,
html body .logo-ticker-group .logo-card:hover img.logo-img[alt],
html body .logo-ticker-group .logo-card:hover img.logo-img[class],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img,
html body .logo-ticker-group .logo-card[data-logo-shape][data-brand]:hover img.logo-img,
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[class] {
  opacity: 0.12 !important;
  transform: scale(0.95) translateZ(0) !important;
}

/* Responsive Overrides for standardized grid and ticker logos on tablet & mobile */
@media (max-width: 768px) {
  html body .logos-grid .logo-card img.logo-img,
  html body .logos-grid .logo-card[data-logo-shape] img.logo-img,
  html body .logos-grid .logo-card img.logo-img[alt],
  html body .logos-grid .logo-card img.logo-img[class],
  html body .logo-ticker-group .logo-card img.logo-img,
  html body .logo-ticker-group .logo-card[data-logo-shape] img.logo-img,
  html body .logo-ticker-group .logo-card img.logo-img[alt],
  html body .logo-ticker-group .logo-card img.logo-img[class] {
    height: 42px !important;
    max-height: 42px !important;
    max-width: 88% !important;
  }
}

/* Specific brand overrides with ultra-high specificity to prevent overrides (Taste Skill) */
html body .logos-grid .logo-card img.logo-img[alt="J&J"],
html body .logos-grid .logo-card img.logo-img[alt="Johnson&Johnson"],
html body .logos-grid .logo-card img.logo-img[alt="Johnson & Johnson"],
html body .logos-grid .logo-card img.logo-img[alt="Johnson"],
html body .logos-grid .logo-card img.logo-img[alt="johnson"],
html body .logo-ticker-group .logo-card img.logo-img[alt="J&J"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Johnson&Johnson"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Johnson & Johnson"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Johnson"],
html body .logo-ticker-group .logo-card img.logo-img[alt="johnson"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="J&J"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Johnson&Johnson"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Johnson & Johnson"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Johnson"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="johnson"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="J&J"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Johnson&Johnson"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Johnson & Johnson"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Johnson"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="johnson"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Libbs"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Libbs"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Libbs"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Libbs"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Roche"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Roche"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Roche"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Roche"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Poupacred"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Poupacred"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Poupacred"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Poupacred"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Arcelor Mittal"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Arcelor Mittal"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Arcelor Mittal"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Arcelor Mittal"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Futura Collective"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Futura Collective"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Futura Collective"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Futura Collective"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Inc"],
html body .logos-grid .logo-card img.logo-img[alt="INC"],
html body .logos-grid .logo-card img.logo-img[alt="INC."],
html body .logo-ticker-group .logo-card img.logo-img[alt="Inc"],
html body .logo-ticker-group .logo-card img.logo-img[alt="INC"],
html body .logo-ticker-group .logo-card img.logo-img[alt="INC."] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Inc"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="INC"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="INC."],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Inc"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="INC"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="INC."] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="3M"],
html body .logo-ticker-group .logo-card img.logo-img[alt="3M"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="3M"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="3M"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="ADP"],
html body .logo-ticker-group .logo-card img.logo-img[alt="ADP"] {
  transform: scale(0.72) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="ADP"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="ADP"] {
  opacity: 0.12 !important;
  transform: scale(0.68) translateZ(0) !important;
}

/* Custom Specfic Brand overrides for PagSeguro, RD Station and Boa Compra (Taste Skill) */
html body .logos-grid .logo-card img.logo-img[alt="PagSeguro"],
html body .logos-grid .logo-card img.logo-img[alt="Pagseguro"],
html body .logo-ticker-group .logo-card img.logo-img[alt="PagSeguro"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Pagseguro"] {
  transform: scale(2.05) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="PagSeguro"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Pagseguro"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="PagSeguro"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Pagseguro"] {
  opacity: 0.12 !important;
  transform: scale(1.98) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="RD Station"],
html body .logos-grid .logo-card img.logo-img[alt="Rd Station"],
html body .logos-grid .logo-card img.logo-img[alt="rdstation"],
html body .logo-ticker-group .logo-card img.logo-img[alt="RD Station"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Rd Station"],
html body .logo-ticker-group .logo-card img.logo-img[alt="rdstation"] {
  transform: scale(1.85) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="RD Station"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Rd Station"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="rdstation"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="RD Station"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Rd Station"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="rdstation"] {
  opacity: 0.12 !important;
  transform: scale(1.78) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Boa Compra"],
html body .logos-grid .logo-card img.logo-img[alt="Boa compra"],
html body .logos-grid .logo-card img.logo-img[alt="boacompra"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Boa Compra"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Boa compra"],
html body .logo-ticker-group .logo-card img.logo-img[alt="boacompra"] {
  transform: scale(1.6) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Boa Compra"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Boa compra"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="boacompra"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Boa Compra"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Boa compra"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="boacompra"] {
  opacity: 0.12 !important;
  transform: scale(1.53) translateZ(0) !important;
}

/* Specific overrides for small SVG logos Agromy, TJI and Carrefour (Taste Skill) */
html body .logos-grid .logo-card img.logo-img[alt="Agromy"],
html body .logos-grid .logo-card img.logo-img[alt="AGROMY"],
html body .logos-grid .logo-card img.logo-img[alt="agromy"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Agromy"],
html body .logo-ticker-group .logo-card img.logo-img[alt="AGROMY"],
html body .logo-ticker-group .logo-card img.logo-img[alt="agromy"] {
  transform: scale(1.45) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Agromy"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="AGROMY"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="agromy"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Agromy"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="AGROMY"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="agromy"] {
  opacity: 0.12 !important;
  transform: scale(1.38) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="TJI"],
html body .logos-grid .logo-card img.logo-img[alt="Tji"],
html body .logos-grid .logo-card img.logo-img[alt="tji"],
html body .logo-ticker-group .logo-card img.logo-img[alt="TJI"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Tji"],
html body .logo-ticker-group .logo-card img.logo-img[alt="tji"] {
  transform: scale(1.5) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="TJI"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Tji"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="tji"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="TJI"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Tji"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="tji"] {
  opacity: 0.12 !important;
  transform: scale(1.43) translateZ(0) !important;
}

html body .logos-grid .logo-card img.logo-img[alt="Carrefour"],
html body .logos-grid .logo-card img.logo-img[alt="carrefour"],
html body .logo-ticker-group .logo-card img.logo-img[alt="Carrefour"],
html body .logo-ticker-group .logo-card img.logo-img[alt="carrefour"] {
  transform: scale(1.55) translateZ(0) !important;
}
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="Carrefour"],
html body .logos-grid .logo-card[data-brand]:hover img.logo-img[alt="carrefour"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="Carrefour"],
html body .logo-ticker-group .logo-card[data-brand]:hover img.logo-img[alt="carrefour"] {
  opacity: 0.12 !important;
  transform: scale(1.48) translateZ(0) !important;
}

/* Custom Header Alignment & Language Flags (Client Request) */
@media (min-width: 1101px) {
  .header-island .logo {
    margin-left: calc(50% - 232px - 2rem) !important;
  }
}

.lang-selector {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 0.5rem;
}

.flag-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  opacity: 0.75;
}

.flag-link:hover {
  transform: scale(1.2) translateY(-1px);
  opacity: 1;
}

.flag-icon {
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.05);
}