:root {
  --nexa-purple: #7C3AED;
  --nexa-purple-glow: rgba(124, 58, 237, 0.35);
  --nexa-purple-hover: #6D28D9;
  --nexa-red: #7C3AED; /* Fallback alias */
  --nexa-red-glow: rgba(124, 58, 237, 0.35);
  --nexa-red-hover: #6D28D9;
  --nexa-dark: #0B0B0E;
}

html,
body,
body * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  box-sizing: border-box;
}

/* Mantém o peso tipográfico regular em todo o site. */
body * {
  font-weight: 400 !important;
}

html {
  scroll-behavior: smooth;
  background-color: #0B0B0E;
  color: #111827;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Banner de lançamento e header com transição suave durante a rolagem. */
.launch-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .55rem 1rem;
  background: #111827;
  color: #F8FAFC;
  font-size: .78rem;
  letter-spacing: .01em;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.launch-banner strong {
  color: #C4B5FD;
  font-weight: 800;
}

.launch-banner__dot {
  width: .45rem;
  height: .45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #A78BFA;
  box-shadow: 0 0 0 .25rem rgba(167, 139, 250, .14);
}

.site-header {
  top: 3.15rem !important;
  transition: top .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1);
}

.site-header.header-scrolled {
  top: .75rem !important;
}

.site-header.header-scrolled .nav-floating-bar {
  transform: scale(1);
  transform-origin: top center;
}

.launch-banner.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* Expansão visual do header ao entrar na rolagem. */
.site-header .nav-floating-bar {
  max-width: 1120px;
  transition: max-width .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s ease,
              background-color .45s ease;
}

.site-header.header-scrolled .nav-floating-bar {
  max-width: 1240px;
  box-shadow:
    0 18px 42px -12px rgba(124, 58, 237, .25),
    0 8px 20px -8px rgba(15, 23, 42, .16),
    0 0 0 1px rgba(124, 58, 237, .14);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0B0B0E;
}
::-webkit-scrollbar-thumb {
  background: #2a2a30;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7C3AED;
}

/* Hero Background & Interactive Canvas */
.hero-bg-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #111827;
}

.hero-bg-container::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 15, 0.62) 0%, rgba(5, 8, 15, 0.30) 42%, rgba(5, 8, 15, 0.04) 78%),
    linear-gradient(0deg, rgba(5, 8, 15, 0.58) 0%, rgba(5, 8, 15, 0.08) 32%, rgba(5, 8, 15, 0.12) 100%);
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.42) contrast(1.02);
  transform: none;
  object-position: center top;
}

/* Movimento sutil da imagem principal do hero da página inicial. */
.hero-bg-image--floating {
  animation: index-hero-image-float 12s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes index-hero-image-float {
  0%, 100% { transform: scale(1.035) translate3d(0, 0, 0); }
  50% { transform: scale(1.045) translate3d(0, -0.35%, 0); }
}

/* CTA final minimalista: mantém o foco no texto e nas ações. */
.minimal-cta > div > div {
  background: #7c3aed !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  background-image: none !important;
}

.minimal-cta .absolute,
.minimal-cta > div > div > svg {
  display: none !important;
}

.minimal-cta .inline-flex.items-center.justify-center.w-14 {
  display: none !important;
}

.minimal-cta h2 {
  color: #ffffff !important;
}

.minimal-cta h2 span {
  color: #ffffff !important;
}

.minimal-cta p {
  color: #ede9fe !important;
}

.minimal-cta a:first-child {
  background: #ffffff !important;
  color: #7c3aed !important;
  box-shadow: none !important;
}

.minimal-cta a:last-child {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

/* Produtos com a mesma linguagem minimalista do CTA. */
.minimal-products {
  background: #ffffff !important;
}

.minimal-products > .absolute {
  display: none !important;
}

.minimal-products .group.relative.flex.flex-col {
  background: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transform: none !important;
}

.minimal-products .group.relative.flex.flex-col:hover {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.minimal-products .group.relative.flex.flex-col .text-white,
.minimal-products .group.relative.flex.flex-col .text-slate-300 {
  color: #0f172a !important;
}

.minimal-products .group.relative.flex.flex-col .border-white\/10 {
  border-color: #e2e8f0 !important;
}

.minimal-products .group.relative.flex.flex-col[style*="background"] a {
  background: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* O antigo card escuro precisa perder também as cores translúcidas internas. */
.minimal-products .group.relative.flex.flex-col[style*="background"] .w-12.h-12 {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
}

.minimal-products .group.relative.flex.flex-col[style*="background"] [class~="bg-white/10"] {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.minimal-products .group.relative.flex.flex-col[style*="background"] [class~="bg-[#7C3AED]/40"] {
  background: #f5f3ff !important;
  border-color: #ddd6fe !important;
}

.minimal-products .group.relative.flex.flex-col[style*="background"] [class~="text-purple-200"] {
  color: #475569 !important;
}

.minimal-products .group.relative.flex.flex-col[style*="background"] [class~="text-purple-300/70"] {
  color: #94a3b8 !important;
}

.minimal-products .group.relative.flex.flex-col[style*="background"] [class~="text-purple-400/50"] {
  color: #cbd5e1 !important;
}

/* Benefícios com cartões simples e consistentes. */
.minimal-benefits {
  background: #ffffff !important;
}

.minimal-benefits article {
  min-height: 0 !important;
  padding: 2rem !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color 160ms ease !important;
}

.minimal-benefits article:hover {
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.minimal-benefits article > div:first-child {
  width: 3rem !important;
  height: 3rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 0.75rem !important;
  background: #faf5ff !important;
}

.minimal-benefits article h3 {
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
}

.minimal-benefits article p {
  margin-top: 0.75rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
}

.minimal-support-card {
  padding: 2rem !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color 160ms ease !important;
}

.minimal-support-card:hover {
  border-color: #cbd5e1 !important;
}

.minimal-support-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.25rem;
}

.minimal-support-card h3 {
  color: #0f172a;
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
}

.minimal-support-card p {
  margin-top: 0.75rem;
  color: #64748b;
  font-size: 0.9375rem;
  line-height: 1.65;
}

@keyframes heroKenBurns {
  0% { transform: scale(1.05) translate(0, 0); }
  50% { transform: scale(1.10) translate(-1%, -1%); }
  100% { transform: scale(1.06) translate(1%, 0.5%); }
}

#matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Dark Vignette Overlay for maximum typography readability in Hero */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: 
    linear-gradient(90deg, rgba(8, 8, 11, 0.94) 0%, rgba(8, 8, 11, 0.72) 45%, rgba(8, 8, 11, 0.35) 75%, rgba(8, 8, 11, 0.55) 100%),
    linear-gradient(180deg, rgba(8, 8, 11, 0.75) 0%, rgba(8, 8, 11, 0.15) 30%, rgba(8, 8, 11, 0.45) 70%, rgba(8, 8, 11, 0.98) 100%);
  pointer-events: none;
}

/* ========================================================================= */
/* APPLE macOS INSPIRED FLOATING NAVBAR & DROPDOWNS (WHITE & PURPLE)         */
/* ========================================================================= */
.nav-floating-bar {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 32px -4px rgba(124, 58, 237, 0.10),
    0 2px 10px -2px rgba(15, 23, 42, 0.04),
    inset 0 1px 0.5px rgba(255, 255, 255, 1),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-floating-bar.nav-scrolled {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 
    0 14px 40px -6px rgba(124, 58, 237, 0.16),
    0 4px 16px -2px rgba(15, 23, 42, 0.06),
    inset 0 1px 0.5px rgba(255, 255, 255, 1),
    0 0 0 1px rgba(124, 58, 237, 0.12);
}

/* Nav Item Button - Apple macOS Menu pill */
.dropdown-parent {
  padding-block: 0;
  margin-bottom: 0;
  align-self: center;
}

.nav-pill-btn {
  color: #334155;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  padding: 6px 14px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  position: relative;
  top: auto;
}

.nav-pill-btn:hover,
.dropdown-parent:hover .nav-pill-btn,
.dropdown-parent.is-open .nav-pill-btn {
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.08);
}

/* Dropdown Menu Popovers - Apple macOS Window Style */
.dropdown-menu-container {
  top: calc(100% + 28px) !important;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 22px;
  box-shadow: 
    0 24px 50px -12px rgba(124, 58, 237, 0.16),
    0 10px 24px -4px rgba(15, 23, 42, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 1),
    0 0 0 1px rgba(124, 58, 237, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
  pointer-events: none;
}

/* Invisible bridge preventing hover flickering across gap */
.dropdown-menu-container::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  height: 28px;
  background: transparent;
  pointer-events: auto;
}

/* Seta visual conectando o dropdown ao item do header */
.dropdown-menu-container::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 56px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff;
  filter: drop-shadow(0 -1px 0 rgba(226, 232, 240, 0.9));
  pointer-events: none;
}

.dropdown-parent:hover .dropdown-menu-container,
.dropdown-parent:focus-within .dropdown-menu-container,
.dropdown-parent.is-open .dropdown-menu-container,
.dropdown-menu-container.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dropdown-arrow {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
}

.dropdown-parent:hover .dropdown-arrow,
.dropdown-parent.is-open .dropdown-arrow {
  transform: rotate(180deg);
  color: #7C3AED;
}

/* macOS Icon Badge in Dropdown */
.mac-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(139, 92, 246, 0.14) 100%);
  border: 1px solid rgba(124, 58, 237, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7C3AED;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mac-menu-item:hover .mac-icon-badge {
  background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
  color: #FFFFFF;
  border-color: transparent;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
}

/* Apple CTA Button in Navbar */
.mac-cta-purple {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  border: 1px solid rgba(124, 58, 237, 0.4);
  box-shadow: 
    0 4px 14px -2px rgba(124, 58, 237, 0.4),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.mac-cta-purple:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  box-shadow: 
    0 6px 20px -2px rgba(124, 58, 237, 0.55),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.mac-cta-purple:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

/* Marquee / Infinite Brand Carousel */
.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Button CTA Split with icon */
.btn-nexa-split {
  display: inline-flex;
  align-items: stretch;
  background-color: var(--nexa-purple);
  color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.35);
}

.btn-nexa-split:hover {
  background-color: var(--nexa-purple-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.55);
}

.btn-nexa-split .btn-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease;
}

.btn-nexa-split:hover .btn-icon-box {
  background: rgba(0, 0, 0, 0.22);
}

/* ========================================================================= */
/* WHITE PORTFOLIO SECTION & LUXURY LIGHT CARDS                              */
/* ========================================================================= */
.section-portfolio-white {
  background-color: #FFFFFF;
  color: #111827;
  border-top: 1px solid #E5E7EB;
  position: relative;
}

/* Hide ugly horizontal scrollbars */
#portfolio-slider-track::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#portfolio-slider-track {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Luxury Light Card Container (Legacy) */
.card-infra-luxury {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  padding: 24px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.card-infra-luxury:hover {
  transform: translateY(-8px);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 
    0 24px 48px -12px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(124, 58, 237, 0.15);
}

/* Dedicated Hardware Showcase Frame */
.hardware-showcase-frame {
  height: 200px;
  width: 100%;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 30%, #202127 0%, #0E0F13 100%);
  border: 1px solid #23252E;
  position: relative;
  overflow: hidden;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hardware-showcase-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-infra-luxury:hover .hardware-showcase-frame img {
  transform: scale(1.08);
}

/* Glass reflection overlay on hardware */
.hardware-glass-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

/* Action button inside card */
.card-btn-action-light {
  background-color: #111827;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.card-infra-luxury:hover .card-btn-action-light {
  background-color: var(--nexa-purple);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

/* ========================================================================= */
/* APPLE MINIMALIST PRODUCT CARDS (CLEAN, ELEVATED, ESSENTIAL)              */
/* ========================================================================= */
.card-product-friendly {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 6px 16px -4px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  width: 290px;
  min-width: 280px;
  flex-shrink: 0;
}

.card-product-friendly:hover {
  transform: translateY(-4px);
  border-color: #DDD6FE;
  box-shadow: 0 12px 28px -6px rgba(124, 58, 237, 0.09), 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* Featured / Mais Popular Card */
.card-product-friendly.featured {
  border: 1.5px solid #7C3AED;
  box-shadow: 0 8px 24px -4px rgba(124, 58, 237, 0.12), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.card-product-friendly.featured:hover {
  transform: translateY(-4px);
  border-color: #6D28D9;
  box-shadow: 0 16px 36px -6px rgba(124, 58, 237, 0.18);
}

/* Floating Popular Badge - Minimal Apple Pill */
.badge-popular-floating {
  position: absolute;
  top: -11px;
  left: 20px;
  background: #7C3AED;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  white-space: nowrap;
  z-index: 10;
}

/* Minimal Icon Container */
.product-icon-squircle {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #F5F3FF;
  color: #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.card-product-friendly:hover .product-icon-squircle {
  background: #EDE9FE;
  transform: scale(1.05);
}

.card-product-friendly.featured .product-icon-squircle {
  background: #7C3AED;
  color: #FFFFFF;
}

/* Apple Pill Action Button */
.btn-product-action {
  width: 100%;
  padding: 10px 16px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  color: #1E293B;
  background: #F1F5F9;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.btn-product-action:hover {
  background: #7C3AED;
  color: #FFFFFF;
}

.card-product-friendly.featured .btn-product-action {
  background: #7C3AED;
  color: #FFFFFF;
}

.card-product-friendly.featured .btn-product-action:hover {
  background: #6D28D9;
}

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

/* Video Pill Button */
.hero-video-pill {
  background: rgba(24, 24, 28, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.hero-video-pill:hover {
  background: rgba(36, 36, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.04);
}

/* Modal styling */
.modal-backdrop {
  background: rgba(5, 5, 8, 0.88);
  backdrop-filter: blur(10px);
}


/* =========================================================================
   Showcase de Infraestrutura no Brasil (Estilo Branco com Roxo)
   ========================================================================= */
.ec-br-map path.ec-state {
  fill: #E2E8F0;
  stroke: #FFFFFF;
  stroke-width: 0.6px;
  transition: fill 0.2s;
}
.ec-br-map path.ec-state:hover {
  fill: #CBD5E1;
}
.ec-br-map path.ec-state-active {
  fill: #7C3AED !important;
  stroke: #6D28D9;
  stroke-width: 1px;
  filter: drop-shadow(0 2px 8px rgba(124, 58, 237, 0.45));
}

.ec-geo-map .ec-municipality {
  fill: #F1F5F9;
  stroke: #CBD5E1;
  stroke-width: 0.8px;
  transition: fill 0.2s, stroke 0.2s;
}
.ec-geo-map .ec-municipality:hover {
  fill: #E2E8F0;
}
.ec-geo-map .ec-municipality--cirion {
  fill: rgba(124, 58, 237, 0.16) !important;
  stroke: #7C3AED !important;
  stroke-width: 1.8px !important;
}
.ec-geo-map .ec-municipality--ascenty {
  fill: rgba(147, 51, 234, 0.18) !important;
  stroke: #9333EA !important;
  stroke-width: 1.8px !important;
}

.ec-geo-map .ec-pin-halo {
  animation: pulse-halo-purple 2s infinite ease-in-out;
}
@keyframes pulse-halo-purple {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.8; }
}

.ec-geo-map .ec-map-pin--cirion .ec-pin-halo {
  fill: rgba(124, 58, 237, 0.2);
  transform-origin: 225.8px 289.7px;
}
.ec-geo-map .ec-map-pin--cirion .ec-pin-ring {
  fill: rgba(124, 58, 237, 0.35);
}
.ec-geo-map .ec-map-pin--cirion .ec-pin-core {
  fill: #7C3AED;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.5));
}

.ec-geo-map .ec-map-pin--ascenty .ec-pin-halo {
  fill: rgba(147, 51, 234, 0.2);
  transform-origin: 356.9px 166.5px;
}
.ec-geo-map .ec-map-pin--ascenty .ec-pin-ring {
  fill: rgba(147, 51, 234, 0.35);
}
.ec-geo-map .ec-map-pin--ascenty .ec-pin-core {
  fill: #9333EA;
  filter: drop-shadow(0 2px 6px rgba(147, 51, 234, 0.5));
}

.ec-geo-map .ec-pin-number {
  fill: #FFFFFF;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
}
.ec-geo-map .ec-pin-label {
  fill: #3B1C78;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1.5px;
  font-family: inherit;
}
.ec-geo-map .ec-neighbor-label {
  fill: #94A3B8;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  font-family: inherit;
}
.ec-geo-map .ec-map-north path {
  stroke: #94A3B8;
  stroke-width: 2px;
}
.ec-geo-map .ec-map-north text {
  fill: #94A3B8;
  font-weight: 800;
  font-family: inherit;
}


.ec-br-map {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.ec-geo-map {
  width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
}


/* Map Overrides - Força preenchimentos corretos no tema branco + roxo */
.ec-br-map path.ec-state {
  fill: #E2E8F0 !important;
  stroke: #FFFFFF !important;
  stroke-width: 0.6px !important;
}
.ec-br-map path.ec-state-active {
  fill: #7C3AED !important;
  stroke: #6D28D9 !important;
  stroke-width: 1.2px !important;
}
.ec-geo-map rect:first-of-type {
  fill: #F8FAFC !important;
}
.ec-geo-map path.ec-municipality {
  fill: #F1F5F9 !important;
  stroke: #CBD5E1 !important;
  stroke-width: 0.8px !important;
}
.ec-geo-map path.ec-municipality--cirion {
  fill: rgba(124, 58, 237, 0.18) !important;
  stroke: #7C3AED !important;
  stroke-width: 2px !important;
}
.ec-geo-map path.ec-municipality--ascenty {
  fill: rgba(147, 51, 234, 0.22) !important;
  stroke: #9333EA !important;
  stroke-width: 2px !important;
}


/* =========================================================================
   Mapa Regional Minimalista & Elegante (Kronic Host)
   ========================================================= */
#unit-card-cotia:hover #pin-cotia,
#unit-card-osasco:hover #pin-osasco {
  transform: scale(1.15);
}

/* Ajuste visual dos marcadores do mapa: mais contraste, menos ruído. */
.ec-geo-map .ec-pin-halo {
  animation: none !important;
  opacity: 0.28 !important;
}

.ec-geo-map .ec-pin-ring {
  opacity: 0.55 !important;
}

.ec-geo-map .ec-pin-core {
  filter: none !important;
}

.ec-geo-map #pin-osasco text:last-child {
  transform: translate(-12px, -28px);
  fill: #1e1b4b !important;
  paint-order: stroke;
  stroke: #F8FAFC;
  stroke-width: 12px;
  stroke-linejoin: round;
}

.ec-geo-map #pin-osasco .ec-pin-halo,
.ec-geo-map #pin-osasco .ec-pin-ring {
  display: none !important;
}

.ec-geo-map #pin-osasco .ec-pin-core {
  fill: #7c3aed !important;
  opacity: 0.92;
}

.ec-geo-map #map-osasco-poly {
  stroke: #ddd6fe !important;
  stroke-width: 1px !important;
}

.footer-logo {
  filter: brightness(0) invert(1);
  opacity: .94;
}

/* Footer institucional minimalista, compartilhado por todas as páginas. */
.site-footer-minimal {
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #64748B;
}

.site-footer-minimal__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 2rem;
  text-align: left;
}

.site-footer-minimal__legacy-content,
.site-footer-minimal__legacy-bottom {
  display: none;
}

.site-footer-minimal__brand {
  justify-self: start;
  text-align: left;
}

.site-footer-minimal__logo {
  width: auto;
  height: 3.9rem;
  margin-left: -1.25rem;
  display: block;
  object-fit: contain;
}

.site-footer-minimal__company {
  margin-top: .55rem;
  color: #334155;
  font-size: .88rem;
}

.site-footer-minimal__legal,
.site-footer-minimal__copyright {
  margin-top: .35rem;
  color: #94A3B8;
  font-size: .78rem;
}

.site-footer-minimal__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem 1.5rem;
  margin-top: 0;
}

.site-footer-minimal__links a {
  color: #64748B;
  font-size: .8rem;
  transition: color .2s ease;
}

.site-footer-minimal__links a:hover {
  color: #7C3AED;
}

.site-footer-minimal__copyright {
  margin-top: 1rem;
  text-align: right;
}

.site-footer-minimal__actions {
  text-align: right;
}

@media (max-width: 700px) {
  .site-footer-minimal__inner {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
  }

  .site-footer-minimal__brand {
    width: 100%;
  }

  .site-footer-minimal__logo {
    margin-left: -1.25rem;
  }

  .site-footer-minimal__actions {
    width: 100%;
    text-align: left;
  }

  .site-footer-minimal__links {
    justify-content: flex-start;
  }

  .site-footer-minimal__copyright {
    text-align: left;
  }
}

/* Elementos entram e saem suavemente conforme atravessam a área visível. */
.reveal-on-scroll {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              translate .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Mantém o efeito ativo em todas as variações das páginas VPS. */
.vps-page .reveal-on-scroll:not(.is-visible),
.vps-document .reveal-on-scroll:not(.is-visible) {
  opacity: 0 !important;
  translate: 0 1.5rem !important;
}

.vps-page .reveal-on-scroll.is-visible,
.vps-document .reveal-on-scroll.is-visible {
  opacity: 1 !important;
  translate: 0 0 !important;
}

/* =========================================================================
   VPS Brasil — área de recursos (classes exclusivas da página)
   ========================================================================= */
.vps-recursos-section {
  position: relative;
  overflow: hidden;
}

.vps-recursos-section::before {
  content: '';
  position: absolute;
  width: 26rem;
  height: 26rem;
  top: -12rem;
  right: -9rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(124, 58, 237, .09), rgba(124, 58, 237, 0) 68%);
  pointer-events: none;
}

.vps-recursos-heading,
.vps-recursos-grid {
  position: relative;
  z-index: 1;
}

.vps-page .vps-recursos-heading {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.vps-recurso-card {
  position: relative;
  min-height: 248px;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, #FFFFFF 0%, #FCFAFF 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .025), 0 10px 25px -14px rgba(124, 58, 237, .28);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .3s ease;
}

.vps-recurso-card::after {
  content: '';
  position: absolute;
  width: 8rem;
  height: 8rem;
  right: -3.25rem;
  bottom: -4rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, .08);
  transition: transform .35s ease;
}

.vps-recurso-card:hover {
  transform: translateY(-6px);
  border-color: #C4B5FD;
  box-shadow: 0 18px 36px -16px rgba(124, 58, 237, .32), 0 3px 8px rgba(15, 23, 42, .04);
}

.vps-recurso-card:hover::after {
  transform: scale(1.35);
}

.vps-recurso-card__topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vps-recurso-card__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: .85rem;
  color: #7C3AED;
  background: #F3E8FF;
}

.vps-recurso-card__icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.vps-recurso-card__index {
  color: #A78BFA;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.vps-recurso-card h3,
.vps-recurso-card p {
  position: relative;
  z-index: 1;
}

.vps-recurso-card h3 {
  margin-top: 2rem;
  color: #0F172A;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.vps-recurso-card p {
  margin-top: .7rem;
  color: #64748B;
  font-size: .875rem;
  line-height: 1.65;
}

/* =========================================================================
   VPS Brasil — tabela de preços (classes exclusivas da página)
   ========================================================================= */
.vps-planos-section {
  position: relative;
  overflow: hidden;
}

.vps-planos-heading,
.vps-planos-group {
  position: relative;
  z-index: 1;
}

.vps-planos-cards-legacy {
  display: none;
}

.vps-planos-table-wrap {
  display: none;
}

.vps-planos-slider {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 1.25rem;
  overflow-x: auto;
  padding: .6rem .25rem 1.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #A78BFA transparent;
  isolation: isolate;
  box-shadow: inset -24px 0 30px -34px rgba(124, 58, 237, .9);
}

.vps-planos-slider::before,
.vps-planos-slider::after {
  display: none;
}

.vps-planos-slider:focus-visible {
  outline: 3px solid rgba(124, 58, 237, .25);
  outline-offset: 4px;
}

.vps-planos-slider::-webkit-scrollbar {
  height: 7px;
}

.vps-planos-slider::-webkit-scrollbar-track {
  background: rgba(124, 58, 237, .06);
  border-radius: 999px;
}

.vps-planos-slider::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #C4B5FD, #7C3AED);
  border-radius: 999px;
}

.vps-plano-slider-card {
  position: relative;
  display: flex;
  flex: 0 0 340px;
  min-height: 570px;
  flex-direction: column;
  padding: 1.75rem;
  overflow: hidden;
  border: 1px solid #DCE3EC;
  border-radius: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0 8px 25px -20px rgba(15, 23, 42, .4);
  scroll-snap-align: start;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .3s ease;
}

.vps-plano-slider-card:hover {
  transform: translateY(-5px);
  border-color: #C4B5FD;
  box-shadow: 0 22px 42px -22px rgba(124, 58, 237, .3);
}

/* O layout flex do card não pode exibir planos ocultados pelo alternador. */
.vps-plano-slider-card[hidden] {
  display: none !important;
}

.vps-plano-slider-card::after {
  content: '';
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  border-radius: 999px;
  background: rgba(124, 58, 237, .07);
  filter: blur(1px);
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}

.vps-plano-slider-card:hover::after {
  transform: scale(1.25);
  opacity: .9;
}

.vps-plano-slider-card__ribbon {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: .7rem 1rem;
  color: #FFFFFF;
  background: #64748B;
  font-size: .9rem;
  font-weight: 800;
  text-align: center;
}

.vps-plano-slider-card--recommended {
  border: 1.5px solid #7C3AED;
  box-shadow: 0 18px 38px -20px rgba(124, 58, 237, .3);
}

.vps-plano-slider-card--recommended .vps-plano-slider-card__ribbon {
  background: #7C3AED;
}

.vps-plano-slider-card {
  padding-top: 4.75rem;
}

.vps-plano-slider-card__ribbon + .vps-plano-slider-card__head {
  margin-top: 0;
}

.vps-plano-slider-card__head strong,
.vps-plano-slider-card__price,
.vps-plano-slider-card__price small,
.vps-plano-slider-card__price em,
.vps-plano-slider-card__contact {
  color: #7C3AED;
}

.vps-plano-slider-card__cta {
  background: #7C3AED;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .16);
}

.vps-plano-slider-card__cta:hover {
  background: #6D28D9;
}

.vps-plano-slider-card--recommended .vps-plano-slider-card__cta {
  color: #FFFFFF;
  background: #7C3AED !important;
}

.vps-plano-slider-card--recommended .vps-plano-slider-card__cta:hover {
  background: #6D28D9 !important;
}

.vps-plano-slider-card__cta,
.vps-plano-slider-card__cta:hover {
  background: #7C3AED !important;
}

.vps-planos-slider {
  overflow-y: visible;
}

/* Header das páginas VPS: mesma geometria do index, sem depender apenas do Tailwind. */
.site-header .nav-floating-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.35rem;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 1rem;
}

.site-header .nav-floating-bar > a:first-child,
.site-header .nav-floating-bar > div:last-child {
  display: flex;
  align-items: center;
}

.site-header nav {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-inline: auto;
}

.site-header .nav-pill-btn {
  top: auto;
}

.site-header .nav-floating-bar > div:last-child {
  gap: 1rem;
}

.site-header #mobile-menu-btn {
  display: inline-flex;
}

@media (min-width: 1280px) {
  .site-header .nav-floating-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .site-header .nav-floating-bar > a:first-child {
    justify-self: start;
  }

  .site-header nav {
    display: flex;
    justify-self: center;
    margin-inline: 0;
  }

  .site-header .nav-floating-bar > div:last-child {
    justify-self: end;
  }

  .site-header #mobile-menu-btn {
    display: none;
  }
}

.vps-plano-slider-card__head span {
  display: block;
  color: #8B5CF6;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vps-plano-slider-card__head strong {
  display: block;
  margin-top: .25rem;
  color: #172554;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.045em;
}

.vps-plano-slider-card__discount {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 1.8rem;
  border-radius: 999px;
  padding: .35rem .7rem;
  color: #166534;
  background: #D1FAE5;
  font-size: .72rem;
  font-weight: 800;
}

.vps-plano-slider-card del {
  margin-top: .7rem;
  color: #475569;
  font-size: .9rem;
}

.vps-plano-slider-card__price {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin-top: .2rem;
  color: #2563EB;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -.07em;
}

.vps-plano-slider-card__price small {
  color: #2563EB;
  font-size: 1rem;
  letter-spacing: 0;
}

.vps-plano-slider-card__price em {
  color: #2563EB;
  font-size: .9rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.vps-plano-slider-card__note {
  min-height: 1.35rem;
  margin-top: .1rem;
  color: #475569;
  font-size: .82rem;
}

.vps-plano-slider-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  border-radius: .8rem;
  padding: .95rem 1.1rem;
  color: #FFFFFF;
  background: #2563EB;
  font-size: .9rem;
  font-weight: 800;
  transition: background .2s ease, transform .2s ease;
}

.vps-plano-slider-card__cta:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}

.vps-plano-slider-card--recommended .vps-plano-slider-card__cta {
  color: #172554;
  background: #FACC15;
}

.vps-plano-slider-card--recommended .vps-plano-slider-card__cta:hover {
  background: #EAB308;
}

.vps-plano-slider-card__contact {
  margin: 1.25rem 0 1.1rem;
  color: #2563EB;
  font-size: .85rem;
  font-weight: 800;
  text-align: center;
}

.vps-plano-slider-card ul {
  display: grid;
  gap: .8rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #F1F5F9;
  color: #334155;
  font-size: .83rem;
  line-height: 1.35;
}

.vps-plano-slider-card li {
  position: relative;
  padding-left: 1.35rem;
}

.vps-plano-slider-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #22B573;
  font-weight: 900;
}

.vps-plano-slider-card li b {
  color: #172554;
}

.vps-planos-table-wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0 12px 30px -20px rgba(15, 23, 42, .3);
  scrollbar-color: #C4B5FD #F8FAFC;
}

.vps-planos-table-wrap:focus-visible {
  outline: 3px solid rgba(124, 58, 237, .25);
  outline-offset: 4px;
}

.vps-planos-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: separate;
  border-spacing: 0;
  color: #475569;
  font-size: .82rem;
  text-align: center;
}

.vps-planos-table th,
.vps-planos-table td {
  padding: 1rem .75rem;
  border-bottom: 1px solid #F1F5F9;
  border-right: 1px solid #F1F5F9;
  white-space: nowrap;
}

.vps-planos-table thead th {
  position: relative;
  min-width: 140px;
  padding: 1.35rem .75rem 1rem;
  color: #0F172A;
  background: #FFFFFF;
  vertical-align: top;
}

.vps-planos-table thead th:first-child,
.vps-planos-table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 145px;
  color: #334155;
  background: #FFFFFF;
  text-align: left;
}

.vps-planos-table thead th:first-child {
  z-index: 3;
  color: #64748B;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.vps-planos-table thead th > span {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.vps-planos-table thead th > strong {
  display: block;
  margin-top: .55rem;
  color: #7C3AED;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -.04em;
}

.vps-planos-table thead th > strong small {
  margin-left: .12rem;
  color: #64748B;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: 0;
}

.vps-planos-table thead th > a {
  display: block;
  margin-top: .8rem;
  border-radius: .6rem;
  padding: .55rem .45rem;
  color: #FFFFFF;
  background: #0F172A;
  font-size: .7rem;
  font-weight: 800;
  transition: background .2s ease;
}

.vps-planos-table thead th > a:hover {
  background: #7C3AED;
}

.vps-planos-table thead th > em {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -1px);
  border-radius: 0 0 .55rem .55rem;
  padding: .28rem .55rem;
  color: #FFFFFF;
  background: #7C3AED;
  font-size: .58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vps-planos-table tbody tr:last-child th,
.vps-planos-table tbody tr:last-child td {
  border-bottom: 0;
}

.vps-planos-table th:last-child,
.vps-planos-table td:last-child {
  border-right: 0;
}

.vps-planos-table tbody th {
  font-weight: 700;
}

.vps-planos-table tbody tr:first-child th,
.vps-planos-table tbody tr:first-child td {
  color: #7C3AED;
  background: #FAF5FF;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vps-planos-table__featured {
  background: #FCFAFF !important;
  box-shadow: inset 1px 0 #C4B5FD, inset -1px 0 #C4B5FD;
}

/* Refinamento visual da tabela horizontal */
.vps-planos-table-wrap {
  border: 0;
  border-radius: 1.5rem;
  background: #FFFFFF;
  box-shadow: 0 20px 50px -28px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .035);
}

.vps-planos-table {
  min-width: 1120px;
  color: #64748B;
  font-size: .78rem;
}

.vps-planos-table th,
.vps-planos-table td {
  border-right: 0;
  border-bottom: 1px solid #F1F5F9;
  padding: .95rem .85rem;
}

.vps-planos-table thead th {
  min-width: 148px;
  padding: 1.65rem .85rem 1.25rem;
  background: #FFFFFF;
}

.vps-planos-table thead th:first-child {
  min-width: 165px;
  padding-left: 1.5rem;
  color: #94A3B8;
  background: #FFFFFF;
}

.vps-planos-table thead th > span {
  color: #1E293B;
  font-size: .9rem;
  letter-spacing: -.01em;
}

.vps-planos-table thead th > strong {
  margin-top: .7rem;
  color: #0F172A;
  font-size: 1.18rem;
  letter-spacing: -.045em;
}

.vps-planos-table thead th > strong small {
  color: #94A3B8;
}

.vps-planos-table thead th > a {
  margin-top: 1rem;
  border: 1px solid #E2E8F0;
  border-radius: .7rem;
  padding: .58rem .45rem;
  color: #475569;
  background: #FFFFFF;
  font-size: .68rem;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.vps-planos-table thead th > a:hover {
  border-color: #A78BFA;
  color: #FFFFFF;
  background: #7C3AED;
}

.vps-planos-table thead th > em {
  top: .65rem;
  border-radius: 999px;
  padding: .28rem .58rem;
  color: #6D28D9;
  background: #F3E8FF;
  font-size: .55rem;
  letter-spacing: .06em;
}

.vps-planos-table tbody th,
.vps-planos-table tbody td {
  background: #FFFFFF;
}

.vps-planos-table tbody th {
  padding-left: 1.5rem;
  color: #475569;
  font-size: .75rem;
  font-weight: 700;
}

.vps-planos-table tbody td {
  color: #64748B;
  font-size: .75rem;
}

.vps-planos-table tbody tr:hover th,
.vps-planos-table tbody tr:hover td {
  background: #FCFAFF;
}

.vps-planos-table tbody tr:first-child th,
.vps-planos-table tbody tr:first-child td {
  border-top: 1px solid #F1F5F9;
  color: #8B5CF6;
  background: #FAF5FF;
  font-size: .65rem;
}

.vps-planos-table tbody tr:last-child th,
.vps-planos-table tbody tr:last-child td {
  padding-bottom: 1.25rem;
}

.vps-planos-table tbody .vps-planos-table__featured,
.vps-planos-table thead .vps-planos-table__featured {
  background: #FCFAFF !important;
  box-shadow: inset 1px 0 #DDD6FE, inset -1px 0 #DDD6FE;
}

.vps-planos-table tbody tr:hover .vps-planos-table__featured {
  background: #F8F3FF !important;
}

.vps-planos-group__label {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #475569;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vps-planos-group__label::before {
  content: '';
  width: 1.8rem;
  height: 2px;
  border-radius: 99px;
  background: #7C3AED;
}

.vps-plano-card {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .025), 0 12px 28px -18px rgba(15, 23, 42, .22);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .3s ease;
}

.vps-plano-card:hover {
  transform: translateY(-6px);
  border-color: #C4B5FD;
  box-shadow: 0 18px 36px -18px rgba(124, 58, 237, .3), 0 4px 10px rgba(15, 23, 42, .04);
}

.vps-plano-card--featured {
  border: 1.5px solid #A78BFA;
  box-shadow: 0 14px 30px -16px rgba(124, 58, 237, .28);
}

.vps-plano-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: .4rem .75rem;
  border-radius: 0 1.25rem 0 .8rem;
  color: #FFFFFF;
  background: #7C3AED;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.vps-plano-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.vps-plano-card__eyebrow {
  color: #8B5CF6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vps-plano-card h3 {
  margin-top: .25rem;
  color: #0F172A;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

.vps-plano-card__discount {
  flex-shrink: 0;
  border-radius: 999px;
  padding: .35rem .55rem;
  color: #6D28D9;
  background: #F3E8FF;
  font-size: .65rem;
  font-weight: 800;
}

.vps-plano-card__position {
  margin-top: 1rem;
  color: #64748B;
  font-size: .8rem;
  font-weight: 600;
}

.vps-plano-card__price {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  margin-top: .65rem;
  color: #0F172A;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -.055em;
}

.vps-plano-card__price span {
  align-self: flex-start;
  margin-top: .38rem;
  color: #7C3AED;
  font-size: .9rem;
  letter-spacing: 0;
}

.vps-plano-card__price small {
  color: #64748B;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0;
}

.vps-plano-card__old-price {
  margin-top: .15rem;
  color: #94A3B8;
  font-size: .72rem;
  text-decoration: line-through;
}

.vps-plano-card__features {
  display: grid;
  gap: .65rem;
  margin: 1.5rem 0 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #F1F5F9;
  color: #475569;
  font-size: .82rem;
  line-height: 1.35;
}

.vps-plano-card__features li {
  position: relative;
  padding-left: 1.2rem;
}

.vps-plano-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #7C3AED;
  font-weight: 900;
}

.vps-plano-card__features strong {
  color: #0F172A;
}

.vps-plano-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: auto;
  border-radius: .75rem;
  padding: .8rem 1rem;
  color: #FFFFFF;
  background: #0F172A;
  font-size: .82rem;
  font-weight: 800;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.vps-plano-card__cta:hover {
  background: #7C3AED;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .25);
}

.vps-plano-card--featured .vps-plano-card__cta {
  background: #7C3AED;
}

.vps-plano-card--featured .vps-plano-card__cta:hover {
  background: #6D28D9;
}

@media (max-width: 639px) {
  .vps-recurso-card {
    min-height: 226px;
  }

}

/* Ajustes finais do carrossel de planos: glass bloom e identidade roxa. */
.vps-page .vps-planos-slider::before {
  display: none !important;
}

.vps-page .vps-planos-slider::after {
  content: '';
  display: block !important;
  position: absolute;
  top: .25rem;
  right: 0;
  bottom: 1.65rem;
  width: 5.25rem;
  z-index: 5;
  pointer-events: none;
  border-left: 1px solid rgba(196, 181, 253, .32);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(248, 250, 252, .78) 55%, rgba(248, 250, 252, .96));
  box-shadow: -16px 0 32px rgba(124, 58, 237, .12);
  -webkit-backdrop-filter: blur(8px) saturate(135%);
  backdrop-filter: blur(8px) saturate(135%);
}

.vps-page .vps-plano-slider-card__ribbon {
  background: #7C3AED !important;
}

.vps-page .vps-plano-slider-card__price,
.vps-page .vps-plano-slider-card__price small,
.vps-page .vps-plano-slider-card__price em,
.vps-page .vps-plano-slider-card__cta,
.vps-page .vps-plano-slider-card__cta:hover {
  color: #7C3AED !important;
}

.vps-page .vps-plano-slider-card__cta,
.vps-page .vps-plano-slider-card__cta:hover,
.vps-page .vps-plano-slider-card--recommended .vps-plano-slider-card__cta,
.vps-page .vps-plano-slider-card--recommended .vps-plano-slider-card__cta:hover {
  color: #FFFFFF !important;
  background: #7C3AED !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .24);
}

.vps-page .vps-plano-slider-card__cta:hover,
.vps-page .vps-plano-slider-card--recommended .vps-plano-slider-card__cta:hover {
  background: #6D28D9 !important;
}

/* Scrollbar exclusiva da página VPS. */
.vps-document {
  scrollbar-width: thin;
  scrollbar-color: #A78BFA #F8FAFC;
}

.vps-document::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.vps-document::-webkit-scrollbar-track {
  background: #F8FAFC;
}

.vps-document::-webkit-scrollbar-thumb {
  border: 3px solid #F8FAFC;
  border-radius: 999px;
  background: #A78BFA;
}

.vps-document::-webkit-scrollbar-thumb:hover {
  background: #7C3AED;
}

/* Benefícios exclusivos da página VPS n8n. */
.n8n-beneficios-section {
  border-top-color: #E2E8F0;
}

.n8n-beneficios-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.n8n-beneficio-item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.n8n-beneficio-item__icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  place-items: center;
  border-radius: 999px;
  color: #7C3AED;
  background: #F5F3FF;
}

.n8n-beneficio-item__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.n8n-beneficio-item h2 {
  margin-top: .15rem;
  color: #1E293B;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.n8n-beneficio-item--principal h2 {
  font-size: 1.14rem;
  max-width: 17rem;
}

.n8n-beneficio-item p {
  margin-top: .75rem;
  color: #475569;
  font-size: .95rem;
  line-height: 1.55;
}

/* Alinhamento exclusivo dos benefícios da hospedagem de sites. */
.hosting-beneficios-grid {
  width: min(calc(100% - 2.5rem), 1180px);
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0;
}

.hosting-beneficios-grid .n8n-beneficio-item {
  min-width: 0;
}

.hosting-beneficios-grid .n8n-beneficio-item h2 {
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  margin-top: .15rem !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: flex-start;
  font-size: 1.2rem !important;
  line-height: 1.25 !important;
}

.hosting-beneficios-grid .n8n-beneficio-item p {
  margin-top: .75rem !important;
}

/* A hospedagem usa os três planos próprios do código de origem. */
.hosting-planos-section .vps-planos-switch,
.hosting-planos-section .vps-planos-table-wrap,
.hosting-planos-section .vps-planos-cards-legacy,
.hosting-planos-section .vps-plano-view-alto {
  display: none !important;
}

@media (max-width: 900px) {
  .hosting-beneficios-grid {
    width: min(calc(100% - 2.5rem), 42rem);
  }
}

@media (max-width: 900px) {
  .n8n-beneficios-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 42rem;
  }
}

/* Controle de retorno ao topo, compartilhado entre as páginas. */
.back-to-top {
  position: fixed;
  z-index: 80;
  bottom: 1.25rem;
  left: 50%;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, .22);
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(124, 58, 237, .9);
  box-shadow: 0 10px 24px rgba(124, 58, 237, .22);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-50%) scale(.86);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  background: #6D28D9;
  transform: translateX(-50%) scale(1.06);
}

.back-to-top:focus-visible {
  outline: 3px solid rgba(196, 181, 253, .8);
  outline-offset: 3px;
}

.back-to-top svg {
  width: 1.15rem;
  height: 1.15rem;
}

@media (max-width: 640px) {
  .back-to-top {
    bottom: 1rem;
  }

  .back-to-top:not([hidden]),
  .back-to-top:hover {
    transform: translateX(-50%) scale(1);
  }
}

/* Banner de garantia — componente exclusivo da página VPS Brasil. */
.vps-garantia-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto 5rem;
  padding: 2rem 2.25rem;
  overflow: hidden;
  border: 1px solid rgba(196, 181, 253, .55);
  border-radius: 1.5rem;
  color: #FFFFFF;
  background: linear-gradient(115deg, #5B21B6 0%, #7C3AED 52%, #6D28D9 100%);
  box-shadow: 0 22px 48px -24px rgba(124, 58, 237, .55);
}

.vps-garantia-banner__glow {
  position: absolute;
  top: -7rem;
  right: 12%;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  filter: blur(28px);
  pointer-events: none;
}

.vps-garantia-banner__icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 1rem;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
}

.vps-garantia-banner__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.vps-garantia-banner__content {
  position: relative;
  z-index: 1;
  flex: 1;
}

.vps-garantia-banner__content > span {
  color: #DDD6FE;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vps-garantia-banner__content h2 {
  margin-top: .3rem;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -.035em;
}

.vps-garantia-banner__content p {
  max-width: 48rem;
  margin-top: .45rem;
  color: #EDE9FE;
  font-size: .88rem;
  line-height: 1.55;
}

.vps-garantia-banner__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
  border-radius: .8rem;
  padding: .85rem 1.1rem;
  color: #5B21B6;
  background: #FFFFFF;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(46, 16, 101, .2);
  transition: transform .2s ease, background .2s ease;
}

.vps-garantia-banner__cta:hover {
  transform: translateY(-2px);
  background: #F5F3FF;
}

@media (max-width: 760px) {
  .vps-garantia-banner {
    display: block;
    margin: 0 1.25rem 4rem;
    padding: 1.5rem;
  }

  .vps-garantia-banner__content {
    margin-top: 1.1rem;
  }

  .vps-garantia-banner__cta {
    width: 100%;
    justify-content: center;
    margin-top: 1.25rem;
  }
}

/* =========================================================================
   Interação do mapa de data centers
   ========================================================================= */
#pin-cotia .ec-pin-core,
#pin-osasco .ec-pin-core {
  animation: ec-datacenter-pulse 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

#pin-osasco .ec-pin-core { animation-delay: .55s; }

@keyframes ec-datacenter-pulse {
  0%, 100% {
    opacity: .82;
    filter: drop-shadow(0 2px 4px rgba(124, 58, 237, .28));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, .78));
  }
}

#map-cotia-poly,
#map-osasco-poly {
  transition: fill .28s ease, filter .28s ease, stroke-width .28s ease;
}

#map-cotia-poly.is-highlighted,
#map-osasco-poly.is-highlighted {
  filter: drop-shadow(0 4px 12px rgba(124, 58, 237, .42));
  stroke-width: 2.6;
}

#unit-card-cotia,
#unit-card-osasco {
  transition: background-color .25s ease, box-shadow .25s ease;
}

#unit-card-cotia.is-map-active,
#unit-card-osasco.is-map-active {
  background-color: #FAF5FF;
  box-shadow: inset 3px 0 0 #7C3AED;
}

@media (prefers-reduced-motion: reduce) {
  #pin-cotia .ec-pin-core,
  #pin-osasco .ec-pin-core {
    animation: none;
  }
}

/* CTA global do header: contorno luminoso percorrendo o botão. */
.site-header .mac-cta-purple,
#mobile-drawer .mac-cta-purple {
  --ec-card-angle: 0deg;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, #FFFFFF 0%, #FAF5FF 100%) padding-box,
    conic-gradient(
      from var(--ec-card-angle),
      rgba(124, 58, 237, .28) 0deg 296deg,
      rgba(167, 139, 250, .78) 314deg,
      #7C3AED 336deg,
      #A855F7 350deg,
      rgba(124, 58, 237, .28) 360deg
    ) border-box;
  color: #7C3AED;
  box-shadow:
    0 4px 14px -2px rgba(124, 58, 237, .4),
    0 0 0 1px rgba(124, 58, 237, .08),
    inset 0 1px .5px rgba(124, 58, 237, .08);
  animation: ec-card-orbit 4.4s linear infinite;
}

.site-header .mac-cta-purple:hover,
#mobile-drawer .mac-cta-purple:hover {
  background:
    linear-gradient(135deg, #FAF5FF 0%, #FFFFFF 100%) padding-box,
    conic-gradient(
      from var(--ec-card-angle),
      rgba(124, 58, 237, .38) 0deg 296deg,
      #A78BFA 314deg,
      #6D28D9 336deg,
      #C4B5FD 350deg,
      rgba(124, 58, 237, .38) 360deg
    ) border-box;
  color: #6D28D9;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .mac-cta-purple,
  #mobile-drawer .mac-cta-purple {
    animation: none;
  }
}

/* Tipografia editorial da página VPS: títulos leves e consistentes. */
.vps-page h1,
.vps-page h2,
.vps-page h3 {
  font-weight: 500 !important;
}

/* Chamada para os depoimentos, exclusiva da página VPS. */
.vps-depoimentos-teaser {
  padding: 5.5rem 1.25rem 6rem;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
}

.vps-depoimentos-teaser__inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.vps-depoimentos-teaser__eyebrow {
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vps-depoimentos-teaser h2 {
  margin-top: .75rem;
  color: #172554;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -.035em;
}

.vps-depoimentos-teaser p {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: #64748B;
  font-size: .95rem;
  line-height: 1.7;
}

.vps-depoimentos-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.75rem;
  padding: .85rem 1.2rem;
  border: 1px solid #7C3AED;
  border-radius: .8rem;
  color: #7C3AED;
  font-size: .9rem;
  font-weight: 500;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.vps-depoimentos-teaser__cta:hover {
  color: #FFFFFF;
  background: #7C3AED;
  transform: translateY(-2px);
}

/* FAQ SEO/GEO da página VPS. */
.vps-faq-section {
  padding: 6rem 1.25rem 6.5rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.vps-faq-section__inner {
  max-width: 54rem;
  margin: 0 auto;
}

.vps-faq-heading {
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.vps-faq-heading > span {
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vps-faq-heading h2 {
  margin-top: .7rem;
  color: #172554;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.16;
  letter-spacing: -.035em;
}

.vps-faq-heading p {
  margin-top: .9rem;
  color: #64748B;
  font-size: .95rem;
  line-height: 1.7;
}

.vps-faq-list {
  display: grid;
  gap: .75rem;
}

.vps-faq-item {
  border: 1px solid #E2E8F0;
  border-radius: .95rem;
  background: #FFFFFF;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.vps-faq-item[open] {
  border-color: #C4B5FD;
  box-shadow: 0 12px 28px -24px rgba(124, 58, 237, .5);
}

.vps-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  color: #172554;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 500;
  list-style: none;
}

.vps-faq-item summary::-webkit-details-marker {
  display: none;
}

.vps-faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  color: #7C3AED;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}

.vps-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.vps-faq-item p {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  max-width: 47rem;
  padding: 0 1.3rem;
  color: #64748B;
  font-size: .9rem;
  line-height: 1.7;
  opacity: 0;
  transition: max-height .36s ease, opacity .24s ease, padding-bottom .36s ease;
}

.vps-faq-item[open] p {
  max-height: 20rem;
  padding-bottom: 1.25rem;
  opacity: 1;
}

/* Faixa de números institucionais com contagem progressiva. */
.vps-metricas-section {
  padding: 2.75rem 1.25rem;
  border-bottom: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.vps-metricas-grid {
  display: grid;
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vps-metrica-item {
  display: flex;
  min-height: 7rem;
  padding: 0 1.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.vps-metrica-item + .vps-metrica-item {
  border-left: 1px solid #E2E8F0;
}

.vps-metrica-item__number {
  color: #172554;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.vps-metrica-item > span {
  margin-top: .65rem;
  color: #94A3B8;
  font-size: .85rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .vps-faq-section {
    padding: 4.5rem 1rem 5rem;
  }

  .vps-faq-item summary,
  .vps-faq-item p {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .vps-metricas-section {
    padding: 1.5rem 1rem;
  }

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

  .vps-metrica-item {
    min-height: 6rem;
    padding: 1rem .5rem;
  }

  .vps-metrica-item:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #E2E8F0;
  }

  .vps-metrica-item:nth-child(4) {
    border-top: 1px solid #E2E8F0;
  }
}

/* Mantém a prova social antes das dúvidas, sem alterar a ordem do restante da página. */
.vps-page > main {
  display: flex;
  flex-direction: column;
}

.vps-page > main > .vps-depoimentos-teaser {
  order: 8;
}

.vps-page > main > .vps-faq-section {
  order: 9;
}

.vps-page > main > .vps-hero {
  order: 1;
}

/* Na página de depoimentos, o conteúdo social vem depois do hero. */
.testimonials-page > main > .testimonials-section {
  order: 3;
}

.testimonials-page > main > .testimonials-metrics {
  order: 2;
}

.testimonials-page > main > .testimonials-benefits {
  order: 3;
}

.testimonials-page > main > .testimonials-section {
  order: 4;
}

.testimonials-benefits {
  padding: 5rem 1.25rem 1rem;
  background: #F8FAFC;
}

.testimonials-benefits__inner { width: min(100%, 1180px); margin: 0 auto; }
.testimonials-benefits__heading { max-width: 680px; margin-bottom: 2rem; }
.testimonials-benefits__heading span { color: #7C3AED; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.testimonials-benefits__heading h2 { margin-top: .7rem; color: #0F172A; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.1; }
.testimonials-benefits__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.testimonials-benefit-card { padding: 1.5rem; border: 1px solid #E2E8F0; border-radius: 1.15rem; background: #FFFFFF; }
.testimonials-benefit-card__icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .8rem; color: #7C3AED; background: #F3E8FF; font-size: 1.25rem; font-weight: 800; }
.testimonials-benefit-card h3 { margin-top: 1.25rem; color: #0F172A; font-size: 1rem; font-weight: 700; }
.testimonials-benefit-card p { margin-top: .5rem; color: #64748B; font-size: .85rem; line-height: 1.65; }

/* Surgimento e saída dos elementos da página de depoimentos. */
.testimonials-page .reveal-on-scroll {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}

.testimonials-page .reveal-on-scroll.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (max-width: 800px) {
  .testimonials-benefits__grid { grid-template-columns: 1fr; }
}

.vps-page > main > .vps-metricas-section {
  order: 2;
}

.vps-page > main > #vps-beneficios {
  order: 3;
}

.vps-page > main > #vps-recursos {
  order: 4;
}

.vps-page > main > #planos {
  order: 5;
}

/* A seção de proteção pertence ao fluxo após os planos. O fallback de
   visibilidade evita uma tela em branco caso a animação JS seja bloqueada. */
.vps-page > main > .dedicado-antiddos-section {
  order: 6;
}

.dc-details-section {
  padding: 5.5rem 1.25rem 6rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.dc-details-section__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.dc-details-heading {
  max-width: 780px;
  margin: 0 auto 3rem;
  text-align: center;
}

.dc-details-heading > span {
  color: #7C3AED;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.dc-details-heading h2 {
  margin-top: .8rem;
  color: #0F172A;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1.08;
}

.dc-details-heading p {
  margin: 1rem auto 0;
  max-width: 680px;
  color: #64748B;
  font-size: 1rem;
  line-height: 1.7;
}

.dc-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.dc-details-card {
  padding: 2rem;
  border: 1px solid #D8DFC9;
  border-radius: 1rem;
  background: #FAFBF4;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .04);
}

.dc-details-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dc-details-card__eyebrow {
  color: #9A3412;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.dc-details-card__badge {
  padding: .5rem .7rem;
  border: 1px solid #CBD5B9;
  border-radius: .3rem;
  color: #3F4D37;
  background: #F0F4E8;
  font-size: .65rem;
  white-space: nowrap;
}

.dc-details-card h3 {
  margin-top: 1.5rem;
  color: #252A24;
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 650;
  letter-spacing: -.06em;
}

.dc-details-card__location,
.dc-details-card__intro,
.dc-details-specs dd {
  color: #53604D;
}

.dc-details-card__location {
  margin-top: .45rem;
  font-size: .8rem;
}

.dc-details-card__intro {
  min-height: 3.5rem;
  margin-top: 1.35rem;
  font-size: .88rem;
  line-height: 1.55;
}

.dc-details-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
  padding: 1.5rem 0;
  border-top: 1px solid #D8DFC9;
  border-bottom: 1px solid #D8DFC9;
}

.dc-details-metrics strong {
  display: block;
  color: #293326;
  font-size: 1.55rem;
  letter-spacing: -.04em;
}

.dc-details-metrics span {
  display: block;
  margin-top: .35rem;
  color: #53604D;
  font-size: .68rem;
  line-height: 1.35;
}

.dc-details-specs > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid #D8DFC9;
}

.dc-details-specs dt {
  color: #3F4D37;
  font-size: .72rem;
  font-weight: 700;
}

.dc-details-specs dd {
  margin: 0;
  font-size: .72rem;
  line-height: 1.65;
}

.dc-details-tags {
  padding-top: 1.35rem;
}

.dc-details-tags h4 {
  margin: 0 0 .7rem;
  color: #293326;
  font-size: .9rem;
  font-weight: 700;
}

.dc-details-tags h4:not(:first-child) {
  margin-top: 1.4rem;
}

.dc-details-tags > div {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.dc-details-tags span {
  padding: .4rem .55rem;
  border: 1px solid #DDBEA9;
  border-radius: .25rem;
  color: #7C3418;
  background: #FFF8F1;
  font-size: .62rem;
}

.dc-details-tags .dc-details-tags--green span {
  border-color: #CBD5B9;
  color: #46543D;
  background: #EEF3E8;
}

@media (max-width: 850px) {
  .dc-details-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .dc-details-section { padding: 4rem 1rem; }
  .dc-details-card { padding: 1.35rem; }
  .dc-details-card__top { flex-direction: column; }
  .dc-details-card__intro { min-height: 0; }
  .dc-details-metrics { gap: .6rem; }
  .dc-details-metrics strong { font-size: 1.2rem; }
  .dc-details-specs > div { grid-template-columns: 1fr; gap: .35rem; }
}

/* Página de data centers: hero primeiro e detalhes logo abaixo, em formato compacto. */
.data-centers-page > main > .vps-hero { order: 1; }
.data-centers-page > main > .dc-details-section { order: 2; }
.data-centers-page > main > .dc-pillars-section { order: 3; }
.data-centers-page > main > .dc-ddos-section { order: 4; }

.data-centers-page .dc-details-section {
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}

.data-centers-page .dc-details-heading {
  margin-bottom: 2rem;
}

.data-centers-page .dc-details-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.data-centers-page .dc-details-heading p {
  font-size: .9rem;
}

.data-centers-page .dc-details-grid {
  gap: 1rem;
}

.data-centers-page .dc-details-card {
  padding: 1.15rem;
  border-radius: .85rem;
}

.data-centers-page .dc-details-card h3 {
  margin-top: .8rem;
  font-size: 1.65rem;
}

.data-centers-page .dc-details-card__intro {
  min-height: 0;
  margin-top: .9rem;
  font-size: .8rem;
}

.data-centers-page .dc-details-metrics {
  margin-top: .9rem;
  padding: .75rem 0;
}

.data-centers-page .dc-details-metrics strong {
  font-size: 1.1rem;
}

.data-centers-page .dc-details-specs > div {
  grid-template-columns: 5.8rem 1fr;
  padding: .48rem 0;
}

.data-centers-page .dc-details-specs dd {
  font-size: .68rem;
}

.data-centers-page .dc-details-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.2rem;
}

.data-centers-page .dc-details-specs > div {
  align-content: start;
}

.data-centers-page .dc-details-tags {
  padding-top: 1rem;
}

.data-centers-page .dc-details-tags h4 {
  font-size: .8rem;
}

.data-centers-page .dc-details-tags span {
  padding: .3rem .45rem;
  font-size: .58rem;
}

@media (max-width: 850px) {
  .data-centers-page .dc-details-specs {
    grid-template-columns: 1fr;
  }
}

/* Visual minimalista no padrão dos cards da página VPS Brasil. */
.data-centers-page .dc-details-section {
  padding: 5rem 1.25rem 5.5rem;
  background: #FFFFFF;
}

.data-centers-page .dc-details-heading {
  display: block;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.data-centers-page .dc-details-heading h2 {
  max-width: 820px;
  margin-inline: auto;
  font-size: clamp(2rem, 4vw, 3rem);
}

.data-centers-page .dc-details-heading p {
  max-width: 700px;
  margin: 1rem auto 0;
  font-size: .95rem;
}

@media (max-width: 800px) {
  .data-centers-page .dc-details-heading {
    display: block;
  }

  .data-centers-page .dc-details-heading p {
    margin-top: 1rem;
  }
}

.testimonials-section {
  padding: 5.5rem 1.25rem 6rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.testimonials-section__inner { width: min(100%, 1180px); margin: 0 auto; }
.testimonials-heading { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.testimonials-heading span { color: #7C3AED; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.testimonials-heading h2 { margin-top: .8rem; color: #0F172A; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.08; }
.testimonials-heading p { max-width: 650px; margin: 1rem auto 0; color: #64748B; font-size: .95rem; line-height: 1.7; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.testimonial-card { display: flex; min-height: 300px; flex-direction: column; padding: 1.75rem; border: 1px solid #E2E8F0; border-radius: 1.25rem; background: #FFFFFF; box-shadow: 0 12px 30px rgba(15, 23, 42, .035); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.testimonial-card:hover { border-color: #C4B5FD; box-shadow: 0 18px 38px rgba(124, 58, 237, .08); transform: translateY(-3px); }
.testimonial-card--featured { border-color: #C4B5FD; background: linear-gradient(145deg, #FFFFFF, #FAF5FF); }
.testimonial-card__quote { color: #7C3AED; font-size: 3.5rem; font-weight: 700; line-height: .7; }
.testimonial-card > p { margin-top: 1.25rem; color: #475569; font-size: .95rem; line-height: 1.75; }
.testimonial-card__author { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1.5rem; }
.testimonial-card__author > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; color: #7C3AED; background: #F3E8FF; font-size: .75rem; font-weight: 700; }
.testimonial-card__author strong, .testimonial-card__author small { display: block; }
.testimonial-card__author strong { color: #0F172A; font-size: .78rem; font-weight: 650; }
.testimonial-card__author small { margin-top: .2rem; color: #94A3B8; font-size: .7rem; }
.testimonials-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.25rem; padding: 1.35rem 1.5rem; border: 1px solid #DDD6FE; border-radius: 1rem; background: #FFFFFF; }
.testimonials-cta > div strong, .testimonials-cta > div span { display: block; }
.testimonials-cta strong { color: #0F172A; font-size: .95rem; }
.testimonials-cta span { margin-top: .3rem; color: #64748B; font-size: .8rem; }
.testimonials-cta a { display: inline-flex; align-items: center; gap: .5rem; flex: 0 0 auto; color: #7C3AED; font-size: .85rem; font-weight: 700; }
.testimonials-cta a span { display: inline; }

@media (max-width: 800px) {
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-cta { align-items: flex-start; flex-direction: column; }
}

.data-centers-page .dc-details-grid {
  gap: 1.25rem;
}

.data-centers-page .dc-details-card {
  min-height: 0;
  padding: 1.75rem;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.data-centers-page .dc-details-card:hover {
  border-color: #C4B5FD;
  box-shadow: 0 18px 38px rgba(124, 58, 237, .09);
  transform: translateY(-3px);
}

.data-centers-page .dc-details-card__eyebrow {
  color: #7C3AED;
  font-size: .68rem;
}

.data-centers-page .dc-details-card__badge {
  border-color: #DDD6FE;
  border-radius: 999px;
  color: #7C3AED;
  background: #FAF5FF;
  font-size: .62rem;
}

.data-centers-page .dc-details-card h3 {
  margin-top: 1.35rem;
  color: #0F172A;
  font-size: 1.65rem;
  letter-spacing: -.045em;
}

.data-centers-page .dc-details-card__location,
.data-centers-page .dc-details-card__intro {
  color: #64748B;
}

.data-centers-page .dc-details-card__intro {
  margin-top: 1rem;
  min-height: 2.5rem;
  font-size: .88rem;
}

.data-centers-page .dc-details-metrics {
  margin-top: 1.5rem;
  padding: 1.15rem 0 0;
  border-top: 1px solid #E2E8F0;
  border-bottom: 0;
}

.data-centers-page .dc-details-metrics strong {
  color: #172554;
  font-size: 1.5rem;
  font-weight: 600;
}

.data-centers-page .dc-details-metrics span {
  color: #94A3B8;
  font-size: .68rem;
}

.data-centers-page .dc-details-specs,
.data-centers-page .dc-details-tags {
  display: none;
}

.dc-pillars-section {
  padding: 5.5rem 1.25rem 6rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.dc-pillars-section__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.dc-pillars-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.dc-pillars-heading > div { max-width: 760px; }
.dc-pillars-heading span { color: #7C3AED; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dc-pillars-heading h2 { margin-top: .8rem; color: #0F172A; font-size: clamp(2.1rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.05; }
.dc-pillars-heading p { max-width: 25rem; color: #64748B; font-size: .95rem; line-height: 1.7; }

.dc-pillars-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.dc-pillar__icon { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: 1rem; color: #7C3AED; background: #F3E8FF; }
.dc-pillar__icon svg { width: 1.65rem; height: 1.65rem; }
.dc-pillar h3 { margin-top: 1.5rem; color: #0F172A; font-size: 1.25rem; font-weight: 650; letter-spacing: -.035em; }
.dc-pillar p { max-width: 21rem; margin-top: .65rem; color: #64748B; font-size: .9rem; line-height: 1.65; }

@media (max-width: 800px) {
  .dc-pillars-heading { display: block; margin-bottom: 2.5rem; }
  .dc-pillars-heading p { margin-top: 1rem; }
  .dc-pillars-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.dc-ddos-section {
  padding: 5.5rem 1.25rem 6rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.dc-ddos-section__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.dc-ddos-heading {
  display: block;
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
  text-align: center;
}

.dc-ddos-heading > div { max-width: 760px; }
.dc-ddos-heading span { color: #7C3AED; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.dc-ddos-heading h2 { max-width: 820px; margin: .8rem auto 0; color: #0F172A; font-size: clamp(2.1rem, 4vw, 3.6rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.05; }
.dc-ddos-heading p { max-width: 700px; margin: 1rem auto 0; color: #64748B; font-size: .95rem; line-height: 1.7; }

.dc-ddos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.dc-ddos-item {
  padding-top: 1.6rem;
  border-top: 1px solid #CBD5E1;
}

.dc-ddos-item h3 { color: #0F172A; font-size: 1.25rem; font-weight: 650; letter-spacing: -.035em; }
.dc-ddos-item p { max-width: 22rem; margin-top: .7rem; color: #64748B; font-size: .9rem; line-height: 1.65; }

.dc-ddos-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 3rem;
  color: #7C3AED;
  font-size: .9rem;
  font-weight: 700;
  transition: gap .2s ease, color .2s ease;
}

.dc-ddos-cta:hover { gap: 1rem; color: #6D28D9; }

@media (max-width: 800px) {
  .dc-ddos-heading { display: block; margin-bottom: 2.5rem; }
  .dc-ddos-heading p { margin-top: 1rem; }
  .dc-ddos-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.vps-page > main > .vps-sistemas-section {
  order: 7;
}

.vps-page > main > .n8n-integracoes-section {
  order: 6;
}

.vps-page > main > .vps-shared-datacenter-section {
  order: 7;
}

.vps-page > main > .vps-diferenciais-section {
  order: 8;
}

.vps-page > main > .vps-final-cta {
  order: 10;
}

.story-page > main > .vps-hero {
  order: 1;
}

.story-page > main > #historia-inicio {
  order: 2;
}

.story-page > main > #fundador {
  order: 3;
}

.story-page > main > #quem-somos {
  order: 4;
}

.story-page > main > .vps-final-cta {
  order: 5;
}

/* Arco decorativo fino atravessando o hero. */
.vps-page .vps-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vps-page .vps-hero-arc {
  position: absolute;
  z-index: 0;
  top: 78%;
  left: -15%;
  width: 130%;
  height: 10rem;
  pointer-events: none;
}

.vps-page .vps-hero-arc svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vps-page .vps-hero-arc__line {
  fill: none;
  stroke: rgba(124, 58, 237, .2);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.vps-page .vps-hero-arc__pulse {
  fill: none;
  stroke: #C4B5FD;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 90 910;
  stroke-dashoffset: 0;
  opacity: .78;
  filter: drop-shadow(0 0 4px rgba(124, 58, 237, .28));
  animation: vps-hero-arc-flow 4.2s linear infinite;
  vector-effect: non-scaling-stroke;
}

@keyframes vps-hero-arc-flow {
  to { stroke-dashoffset: -1000; }
}

.vps-page .vps-hero > div:not(.vps-hero-arc) {
  position: relative;
  z-index: 1;
}

/* Flutuação discreta das ilustrações de VPS, sem interferir no scale responsivo da imagem. */
.vps-page .vps-hero-image-float {
  animation: vps-hero-image-float 8s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes vps-hero-image-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-image--floating,
  .vps-page .vps-hero-image-float {
    animation: none;
  }
}

@media (max-width: 640px) {
  .vps-page .vps-hero-arc {
    top: 80%;
    left: -35%;
    width: 170%;
    height: 8rem;
    border-color: rgba(124, 58, 237, .16);
  }
}

/* Versão editorial e minimalista do aviso de garantia. */
.vps-page .vps-garantia-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #7C3AED;
  border-radius: 1rem;
  color: #0F172A;
  background: #FFFFFF;
  box-shadow: 0 10px 26px -22px rgba(15, 23, 42, .32);
}

.vps-page .vps-garantia-banner__glow {
  display: none;
}

.vps-page .vps-garantia-banner__icon {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid #DDD6FE;
  border-radius: .8rem;
  color: #7C3AED;
  background: #FAF5FF;
  backdrop-filter: none;
}

.vps-page .vps-garantia-banner__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.vps-page .vps-garantia-banner__content > span {
  color: #7C3AED;
  font-size: .68rem;
  letter-spacing: .1em;
}

.vps-page .vps-garantia-banner__content h2 {
  margin-top: .15rem;
  color: #0F172A;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: -.025em;
}

.vps-page .vps-garantia-banner__content p {
  max-width: 52rem;
  margin-top: .25rem;
  color: #64748B;
  font-size: .78rem;
  line-height: 1.45;
}

.vps-page .vps-garantia-banner__cta {
  border: 1px solid #7C3AED;
  border-radius: .7rem;
  padding: .7rem .9rem;
  color: #FFFFFF;
  background: #7C3AED;
  font-size: .76rem;
  white-space: nowrap;
  box-shadow: none;
}

.vps-page .vps-garantia-banner__cta:hover {
  color: #FFFFFF;
  background: #6D28D9;
}

.vps-page .vps-garantia-banner {
  max-width: 1180px;
  margin: 4rem auto 0;
  border: 0;
  border-radius: 1.25rem;
  color: #FFFFFF;
  background: #7C3AED;
  box-shadow: 0 18px 34px -22px rgba(124, 58, 237, .65);
}

.vps-page .vps-garantia-banner__icon {
  border-color: rgba(255, 255, 255, .28);
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
}

.vps-page .vps-garantia-banner__content > span {
  color: #E9D5FF;
  font-weight: 500;
}

.vps-page .vps-garantia-banner__content h2 {
  color: #FFFFFF;
  font-weight: 500;
}

.vps-page .vps-garantia-banner__content p {
  color: #EDE9FE;
  font-weight: 400;
}

.vps-page .vps-garantia-banner__cta {
  border-color: #FFFFFF;
  color: #6D28D9;
  background: #FFFFFF;
  font-weight: 500;
}

.vps-page .vps-garantia-banner__cta:hover {
  color: #5B21B6;
  background: #F5F3FF;
}

/* Sistemas operacionais suportados — seção exclusiva da página VPS Brasil. */
.vps-sistemas-section {
  padding: 5rem 0 6rem;
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.vps-sistemas-heading {
  max-width: 43rem;
  margin: 0 auto;
  text-align: center;
}

.vps-sistemas-heading > span {
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.vps-sistemas-heading h2 {
  margin-top: .55rem;
  color: #0F172A;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.vps-sistemas-heading p {
  margin-top: .8rem;
  color: #64748B;
  font-size: .95rem;
  line-height: 1.6;
}

.vps-sistemas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  max-width: 58rem;
  margin: 2rem auto 0;
}

.vps-sistema-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 4.4rem;
  padding: .85rem 1rem;
  border: 1px solid #E2E8F0;
  border-radius: .9rem;
  background: #FFFFFF;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  text-align: center;
}

.vps-sistema-item:hover {
  transform: translateY(-3px);
  border-color: #C4B5FD;
  box-shadow: 0 12px 24px -18px rgba(124, 58, 237, .38);
}

.vps-sistema-item img,
.vps-sistema-item__logo,
.vps-sistema-item__more-mark {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: .7rem;
  color: #7C3AED;
  background: #F3E8FF;
  font-size: 1rem;
  font-weight: 800;
}

.vps-sistema-item img {
  padding: .48rem;
  object-fit: contain;
}

.vps-sistema-item__logo {
  padding: .48rem;
}

.vps-sistema-item strong,
.vps-sistema-item small {
  display: block;
}

.vps-sistema-item strong {
  color: #1E293B;
  font-size: .88rem;
  font-weight: 700;
}

.vps-sistema-item small {
  margin-top: .15rem;
  color: #94A3B8;
  font-size: .7rem;
}

.vps-sistema-item--more {
  border-style: dashed;
  background: #FAF5FF;
}

.vps-sistemas-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #F1F5F9;
  text-align: center;
}

.vps-sistemas-contact p {
  color: #64748B;
  font-size: .85rem;
}

.vps-sistemas-contact a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #7C3AED;
  font-size: .85rem;
  font-weight: 700;
}

.vps-sistemas-contact a:hover {
  color: #6D28D9;
}

@media (max-width: 760px) {
  .vps-sistemas-section {
    padding: 4rem 0 4.5rem;
  }

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

  .vps-sistemas-contact {
    display: block;
  }

  .vps-sistemas-contact a {
    margin-top: .65rem;
  }
}

@media (max-width: 440px) {
  .vps-sistemas-grid {
    grid-template-columns: 1fr;
  }
}

/* Integrações populares do n8n — seção exclusiva da página VPS n8n. */
.n8n-integracoes-section {
  padding: 5rem 0 6rem;
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.n8n-integracoes-heading {
  max-width: 43rem;
  margin: 0 auto;
  text-align: center;
}

.n8n-integracoes-heading > span {
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.n8n-integracoes-heading h2 {
  margin-top: .55rem;
  color: #0F172A;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.n8n-integracoes-heading p {
  margin-top: .8rem;
  color: #64748B;
  font-size: .95rem;
  line-height: 1.6;
}

.n8n-integracoes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  max-width: 62rem;
  margin: 2rem auto 0;
}

.n8n-integracao-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 5.8rem;
  padding: 1rem .8rem;
  border: 1px solid #E2E8F0;
  border-radius: .9rem;
  background: #FFFFFF;
  text-align: center;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.n8n-integracao-item:hover {
  transform: translateY(-3px);
  border-color: #C4B5FD;
  box-shadow: 0 12px 24px -18px rgba(124, 58, 237, .38);
}

.n8n-integracao-item img,
.n8n-integracao-item__more-mark {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: .7rem;
  color: #7C3AED;
  background: #F3E8FF;
  font-size: 1rem;
  font-weight: 800;
}

.n8n-integracao-item img {
  padding: .48rem;
  object-fit: contain;
}

.n8n-integracao-item__inline-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: .7rem;
  color: #7C3AED;
  background: #F3E8FF;
}

.n8n-integracao-item__inline-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.n8n-integracao-item strong,
.n8n-integracao-item small {
  display: block;
}

.n8n-integracao-item strong {
  color: #1E293B;
  font-size: .88rem;
  font-weight: 500;
}

.n8n-integracao-item small {
  margin-top: .15rem;
  color: #94A3B8;
  font-size: .7rem;
}

.n8n-integracao-item--more {
  border-style: dashed;
  background: #FAF5FF;
}

.n8n-integracoes-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #F1F5F9;
  text-align: center;
}

/* Border orbital completo para cards de sistemas e integrações. */
@property --ec-card-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.vps-sistema-item,
.n8n-integracao-item {
  position: relative;
  isolation: isolate;
  overflow: visible;
  --ec-card-surface: #FFFFFF;
  --ec-card-angle: 0deg;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ec-card-surface), var(--ec-card-surface)) padding-box,
    conic-gradient(
      from var(--ec-card-angle),
      #E2E8F0 0deg 296deg,
      rgba(216, 180, 254, .42) 314deg,
      #A78BFA 330deg,
      #7C3AED 342deg,
      rgba(216, 180, 254, .68) 354deg,
      #E2E8F0 360deg
    ) border-box;
  animation: ec-card-orbit 5.2s linear infinite;
}

.vps-sistema-item::before,
.n8n-integracao-item::before {
  display: none;
}

.vps-sistema-item > *,
.n8n-integracao-item > * {
  position: relative;
  z-index: 1;
}

@keyframes ec-card-orbit {
  to { --ec-card-angle: 360deg; }
}

.vps-sistema-item--more,
.n8n-integracao-item--more {
  --ec-card-surface: #FAF5FF;
}

/* O mesmo acabamento orbital no CTA de contato da seção. */
.vps-sistemas-contact,
.n8n-integracoes-contact {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    conic-gradient(
      from var(--ec-card-angle),
      #E2E8F0 0deg 296deg,
      rgba(216, 180, 254, .42) 314deg,
      #A78BFA 330deg,
      #7C3AED 342deg,
      rgba(216, 180, 254, .68) 354deg,
      #E2E8F0 360deg
    ) border-box;
  animation: ec-card-orbit 5.2s linear infinite;
}

.vps-sistemas-contact > *,
.n8n-integracoes-contact > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vps-sistema-item::before,
  .n8n-integracao-item::before {
    display: none;
  }

  .vps-sistema-item,
  .n8n-integracao-item,
  .vps-sistemas-contact,
  .n8n-integracoes-contact {
    animation: none;
  }
}

.n8n-integracoes-contact p {
  color: #64748B;
  font-size: .85rem;
}

.n8n-integracoes-contact a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #7C3AED;
  font-size: .85rem;
  font-weight: 500;
}

.n8n-integracoes-contact a:hover {
  color: #6D28D9;
}

@media (max-width: 760px) {
  .n8n-integracoes-section {
    padding: 4rem 0 4.5rem;
  }

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

  .n8n-integracoes-contact {
    display: block;
  }

  .n8n-integracoes-contact a {
    margin-top: .65rem;
  }
}

@media (max-width: 440px) {
  .n8n-integracoes-grid {
    grid-template-columns: 1fr;
  }
}

/* Diferenciais da VPS Brasil — seção editorial otimizada para SEO local. */
.vps-diferenciais-section {
  padding: 6rem 0 7rem;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.vps-diferenciais-heading {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.vps-page .vps-diferenciais-heading--left {
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

.vps-page .vps-diferenciais-heading--left p {
  margin-left: 0;
}

.vps-diferenciais-heading > span {
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.vps-diferenciais-heading h2 {
  margin-top: .6rem;
  color: #172554;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.12;
}

.vps-diferenciais-heading p {
  max-width: 42rem;
  margin: .85rem auto 0;
  color: #64748B;
  font-size: .88rem;
  line-height: 1.65;
}

.vps-diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 2.5rem auto 0;
}

.vps-diferencial-card {
  min-height: 18rem;
  padding: 2rem 1.75rem;
  border: 1px solid #E2E8F0;
  border-radius: 1.1rem;
  background: #FFFFFF;
  box-shadow: 0 8px 22px -22px rgba(15, 23, 42, .35);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.vps-diferencial-card:hover {
  transform: translateY(-4px);
  border-color: #C4B5FD;
  box-shadow: 0 18px 32px -22px rgba(124, 58, 237, .36);
}

.vps-diferencial-card__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 999px;
  color: #FFFFFF;
  background: #7C3AED;
  box-shadow: 0 0 0 .55rem #F5F3FF;
}

.vps-diferencial-card__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.vps-diferencial-card h3 {
  margin-top: 2rem;
  color: #1E293B;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.vps-diferencial-card p {
  margin-top: .8rem;
  color: #64748B;
  font-size: .9rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .vps-diferenciais-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .vps-diferenciais-section {
    padding: 4.5rem 0 5rem;
  }

  .vps-diferenciais-grid {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }
}

/* Diferenciais da VPS Brasil — seção editorial otimizada para SEO local. */
.vps-diferenciais-section {
  padding: 6rem 0 7rem;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.vps-diferenciais-heading {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.vps-diferenciais-heading > span {
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.vps-diferenciais-heading h2 {
  margin-top: .6rem;
  color: #172554;
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.12;
}

.vps-diferenciais-heading p {
  max-width: 42rem;
  margin: .85rem auto 0;
  color: #64748B;
  font-size: .88rem;
  line-height: 1.65;
}

.vps-diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 2.5rem auto 0;
}

.vps-diferencial-card {
  min-height: 18rem;
  padding: 2rem 1.75rem;
  border: 1px solid #E2E8F0;
  border-radius: 1.1rem;
  background: #FFFFFF;
  box-shadow: 0 8px 22px -22px rgba(15, 23, 42, .35);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.vps-diferencial-card:hover {
  transform: translateY(-4px);
  border-color: #C4B5FD;
  box-shadow: 0 18px 32px -22px rgba(124, 58, 237, .36);
}

.vps-diferencial-card__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 999px;
  color: #FFFFFF;
  background: #7C3AED;
  box-shadow: 0 0 0 .55rem #F5F3FF;
}

.vps-diferencial-card__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.vps-diferencial-card h3 {
  margin-top: 2rem;
  color: #1E293B;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.vps-diferencial-card p {
  margin-top: .8rem;
  color: #64748B;
  font-size: .9rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .vps-diferenciais-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .vps-diferenciais-section {
    padding: 4.5rem 0 5rem;
  }

  .vps-diferenciais-grid {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }
}

@media (max-width: 760px) {
  .vps-page .vps-garantia-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    margin: 1rem 1.25rem 4rem;
    padding: 1.15rem;
  }

  .vps-page .vps-garantia-banner__content {
    margin-top: 0;
  }

  .vps-page .vps-garantia-banner__cta {
    grid-column: 1 / -1;
    width: auto;
    margin-top: .25rem;
    justify-content: center;
  }
}

/* O sistema por categoria não usa camada de bloom nem rolagem lateral. */
.vps-page .vps-planos-slider {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible !important;
  box-shadow: none !important;
}

.vps-page .vps-planos-slider::before,
.vps-page .vps-planos-slider::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 1023px) {
  .vps-page .vps-planos-slider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .vps-page .vps-planos-slider {
    grid-template-columns: 1fr;
  }
}

/* Alternador de desempenho: substitui o carrossel por uma grade estável. */
.vps-page .vps-planos-switch {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  border: 1px solid #DDD6FE;
  border-radius: 999px;
  background: #FAF5FF;
}

.vps-page .vps-planos-switch__button {
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.15rem;
  color: #6B7280;
  background: transparent;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.vps-page .vps-planos-switch__button:hover,
.vps-page .vps-planos-switch__button.is-active {
  color: #FFFFFF;
  background: #7C3AED;
  box-shadow: 0 5px 14px rgba(124, 58, 237, .22);
}

.vps-page .vps-planos-switch__button:disabled {
  cursor: wait;
  opacity: .72;
}

.vps-page .vps-planos-skeleton {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.vps-page .vps-planos-skeleton[hidden] {
  display: none;
}

.vps-page .vps-planos-skeleton__card {
  display: flex;
  min-height: 570px;
  flex-direction: column;
  gap: .85rem;
  padding: 4.75rem 1.75rem 1.75rem;
  border: 1px solid #E9D5FF;
  border-radius: 1.25rem;
  background: linear-gradient(110deg, #FAF5FF 8%, #FFFFFF 18%, #FAF5FF 33%);
  background-size: 220% 100%;
  animation: vps-planos-skeleton-shimmer 1.15s linear infinite;
}

.vps-page .vps-planos-skeleton__card span,
.vps-page .vps-planos-skeleton__card i {
  display: block;
  border-radius: .55rem;
  background: rgba(196, 181, 253, .38);
}

.vps-page .vps-planos-skeleton__card span:nth-child(1) {
  width: 4rem;
  height: .8rem;
}

.vps-page .vps-planos-skeleton__card span:nth-child(2) {
  width: 62%;
  height: 2rem;
  margin-top: .25rem;
}

.vps-page .vps-planos-skeleton__card span:nth-child(3) {
  width: 5rem;
  height: 1.6rem;
  margin-top: 1.2rem;
}

.vps-page .vps-planos-skeleton__card span:nth-child(4) {
  width: 48%;
  height: 3rem;
}

.vps-page .vps-planos-skeleton__card i {
  width: 86%;
  height: .85rem;
}

.vps-page .vps-planos-skeleton__card i:first-of-type {
  margin-top: auto;
}

@keyframes vps-planos-skeleton-shimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

@media (max-width: 1023px) {
  .vps-page .vps-planos-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .vps-page .vps-planos-skeleton {
    grid-template-columns: 1fr;
  }
}

/* Skeleton refinado e entrada escalonada dos planos. */
.vps-page .vps-planos-skeleton__card {
  position: relative;
  gap: 1rem;
  border-color: #E9D5FF;
  background: #FFFFFF;
  box-shadow: 0 12px 28px -22px rgba(124, 58, 237, .45);
  overflow: hidden;
  animation: vps-planos-skeleton-pulse 1.5s ease-in-out infinite;
}

.vps-page .vps-planos-skeleton__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4.15rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(196, 181, 253, .02));
  border-bottom: 1px solid rgba(221, 214, 254, .65);
}

.vps-page .vps-planos-skeleton__card::after {
  content: '';
  position: absolute;
  top: -4rem;
  right: -3rem;
  width: 10rem;
  height: 10rem;
  border-radius: 999px;
  background: rgba(196, 181, 253, .18);
  filter: blur(18px);
}

.vps-page .vps-planos-skeleton__card span,
.vps-page .vps-planos-skeleton__card i {
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #F3E8FF 25%, #E9D5FF 50%, #F3E8FF 75%);
  background-size: 220% 100%;
  animation: vps-planos-skeleton-shimmer 1.25s ease-in-out infinite;
}

.vps-page .vps-planos-skeleton__card span:nth-child(1) {
  margin-top: .1rem;
  width: 3.2rem;
  height: .7rem;
}

.vps-page .vps-planos-skeleton__card span:nth-child(2) {
  width: 58%;
  height: 1.8rem;
}

.vps-page .vps-planos-skeleton__card span:nth-child(3) {
  width: 4.6rem;
  height: 1.45rem;
  margin-top: 1rem;
  border-radius: 999px;
}

.vps-page .vps-planos-skeleton__card span:nth-child(4) {
  width: 52%;
  height: 2.8rem;
  margin-top: -.15rem;
}

.vps-page .vps-planos-skeleton__card i {
  width: 88%;
  height: .72rem;
}

.vps-page .vps-planos-skeleton__card i:first-of-type {
  margin-top: auto;
}

.vps-page .vps-planos-card-enter {
  animation: vps-planos-card-rise .58s cubic-bezier(.22, 1, .36, 1) var(--plan-delay, 0ms) both;
}

@keyframes vps-planos-skeleton-pulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

@keyframes vps-planos-card-rise {
  from { opacity: 0; transform: translateY(1rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vps-page .vps-planos-slider {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  gap: 1.25rem;
  overflow: visible !important;
  padding: .25rem 0 1rem;
  box-shadow: none;
  scrollbar-width: auto;
  isolation: auto;
}

.vps-page .vps-planos-slider::before,
.vps-page .vps-planos-slider::after {
  display: none !important;
  content: none !important;
}

.vps-page .vps-plano-slider-card {
  width: auto;
  min-width: 0;
  flex: initial;
  min-height: 570px;
}

@media (max-width: 1023px) {
  .vps-page .vps-planos-slider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .vps-page .vps-planos-switch {
    display: flex;
    width: 100%;
  }

  .vps-page .vps-planos-switch__button {
    flex: 1;
    padding-inline: .6rem;
    font-size: .72rem;
  }

  .vps-page .vps-planos-slider {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Consentimento de cookies — visual minimalista e responsivo
   ========================================================================= */
.cookie-consent {
  position: fixed;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem 1.35rem;
  color: #172033;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18), 0 4px 18px rgba(124, 58, 237, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: cookie-slide-up .55s cubic-bezier(.22, 1, .36, 1) both;
}

.cookie-consent[hidden],
.cookie-modal[hidden],
.cookie-settings-trigger[hidden] {
  display: none !important;
}

.cookie-consent__copy {
  max-width: 650px;
}

.cookie-consent__eyebrow {
  display: inline-block;
  margin-bottom: .35rem;
  color: #7C3AED;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.cookie-consent h2,
.cookie-modal h2 {
  margin: 0;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.cookie-consent p,
.cookie-modal p {
  margin: .45rem 0 0;
  color: #64748B;
  font-size: .82rem;
  line-height: 1.5;
}

.cookie-consent__link {
  margin-top: .6rem;
  padding: 0;
  color: #6D28D9;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.cookie-consent__link:hover {
  text-decoration: underline;
}

.cookie-consent__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
}

.cookie-btn {
  min-height: 2.65rem;
  padding: .7rem 1rem;
  border-radius: .75rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.cookie-btn:hover {
  transform: translateY(-1px);
}

.cookie-btn--primary {
  color: #fff;
  background: #7C3AED;
  border: 1px solid #7C3AED;
  box-shadow: 0 8px 18px rgba(124, 58, 237, .2);
}

.cookie-btn--primary:hover {
  background: #6D28D9;
  box-shadow: 0 10px 22px rgba(124, 58, 237, .28);
}

.cookie-btn--secondary {
  color: #475569;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

.cookie-btn--secondary:hover {
  background: #F1F5F9;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.cookie-modal__panel {
  position: relative;
  width: min(100%, 560px);
  max-height: min(90vh, 700px);
  overflow-y: auto;
  padding: 1.5rem;
  color: #172033;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 1.35rem;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .25);
  animation: cookie-modal-in .35s cubic-bezier(.22, 1, .36, 1) both;
}

.cookie-modal__close {
  position: absolute;
  top: .8rem;
  right: .9rem;
  width: 2rem;
  height: 2rem;
  color: #64748B;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-modal__intro {
  max-width: 45rem;
  padding-right: 1.5rem;
}

.cookie-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  padding: .9rem 0;
  border-top: 1px solid #F1F5F9;
}

.cookie-option strong {
  color: #1E293B;
  font-size: .84rem;
}

.cookie-option p {
  margin-top: .25rem;
  font-size: .76rem;
}

.cookie-option__status {
  flex: 0 0 auto;
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 800;
}

.cookie-option--toggle {
  cursor: pointer;
}

.cookie-option--toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 1.5rem;
  background: #E2E8F0;
  border-radius: 999px;
  transition: background-color .2s ease;
}

.cookie-switch::after {
  content: '';
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.1rem;
  height: 1.1rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .2);
  transition: transform .2s ease;
}

.cookie-option--toggle input:checked + .cookie-switch {
  background: #7C3AED;
}

.cookie-option--toggle input:checked + .cookie-switch::after {
  transform: translateX(1.15rem);
}

.cookie-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  padding-top: 1rem;
  border-top: 1px solid #E2E8F0;
}

.cookie-modal__footer span {
  color: #64748B;
  font-size: .72rem;
  line-height: 1.4;
}

.cookie-settings-trigger {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .75rem;
  color: #475569;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #E2E8F0;
  border-radius: .7rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  font: inherit;
  font-size: .7rem;
  font-weight: 800;
  cursor: pointer;
}

.cookie-settings-trigger svg {
  width: .9rem;
  height: .9rem;
  fill: #7C3AED;
}

@keyframes cookie-slide-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cookie-modal-in {
  from { opacity: 0; transform: translateY(.75rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  .cookie-consent {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    display: block;
    padding: 1rem;
  }

  .cookie-consent__actions {
    margin-top: .9rem;
  }

  .cookie-btn {
    flex: 1;
    padding-inline: .65rem;
    font-size: .72rem;
  }

  .cookie-modal__panel {
    padding: 1.25rem;
  }

  .cookie-modal__footer {
    display: block;
  }

  .cookie-modal__footer .cookie-btn {
    width: 100%;
    margin-top: .75rem;
  }
}

/* Prioridade final do carrossel VPS: glass bloom somente à direita. */
.vps-page .vps-planos-slider::before {
  display: none !important;
}

.vps-page .vps-planos-slider::after {
  content: '';
  display: none !important;
  position: absolute;
  top: .25rem;
  right: 0;
  bottom: 1.65rem;
  width: 5.25rem;
  z-index: 5;
  pointer-events: none;
  border-left: 1px solid rgba(196, 181, 253, .32);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(248, 250, 252, .78) 55%, rgba(248, 250, 252, .96));
  box-shadow: -16px 0 32px rgba(124, 58, 237, .12);
  -webkit-backdrop-filter: blur(8px) saturate(135%);
  backdrop-filter: blur(8px) saturate(135%);
}

.vps-page .vps-plano-slider-card__ribbon {
  background: #7C3AED !important;
}

.vps-page .vps-plano-slider-card__price,
.vps-page .vps-plano-slider-card__price small,
.vps-page .vps-plano-slider-card__price em {
  color: #7C3AED !important;
}

.vps-page .vps-plano-slider-card__cta,
.vps-page .vps-plano-slider-card__cta:hover,
.vps-page .vps-plano-slider-card--recommended .vps-plano-slider-card__cta,
.vps-page .vps-plano-slider-card--recommended .vps-plano-slider-card__cta:hover {
  color: #FFFFFF !important;
  background: #7C3AED !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, .24);
}

.vps-page .vps-plano-slider-card__cta:hover,
.vps-page .vps-plano-slider-card--recommended .vps-plano-slider-card__cta:hover {
  background: #6D28D9 !important;
}
/* =========================================================================
   VPS n8n — recursos orientados a automação
   Mantém a linguagem visual do site, com conteúdo e identidade próprios.
   ========================================================================= */
.n8n-recursos-section {
  position: relative;
  overflow: hidden;
}

.n8n-recursos-section::before {
  content: '';
  position: absolute;
  top: -12rem;
  right: -8rem;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .08), rgba(124, 58, 237, 0) 70%);
  pointer-events: none;
}

.n8n-recursos-heading {
  position: relative;
  z-index: 1;
  margin-inline: auto;
  text-align: center;
}

.n8n-recursos-heading > span {
  color: #7C3AED;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.n8n-recursos-heading h2 {
  margin-top: .75rem;
  color: #0F172A;
  font-size: clamp(2rem, 3.1vw, 3rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.n8n-recursos-heading p {
  max-width: 43rem;
  margin: 1rem auto 0;
  color: #64748B;
  font-size: 1rem;
  line-height: 1.65;
}

.n8n-recursos-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.n8n-recurso-card {
  position: relative;
  min-height: 248px;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, #FFFFFF 0%, #FCFAFF 100%);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .025), 0 10px 25px -14px rgba(124, 58, 237, .28);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease, box-shadow .3s ease;
}

.n8n-recurso-card::after {
  content: '';
  position: absolute;
  right: -3.25rem;
  bottom: -4rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(124, 58, 237, .08);
  transition: transform .35s ease;
}

.n8n-recurso-card:hover {
  transform: translateY(-6px);
  border-color: #C4B5FD;
  box-shadow: 0 18px 36px -16px rgba(124, 58, 237, .32), 0 3px 8px rgba(15, 23, 42, .04);
}

.n8n-recurso-card:hover::after {
  transform: scale(1.35);
}

.n8n-recurso-card__topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.n8n-recurso-card__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: .85rem;
  color: #7C3AED;
  background: #F3E8FF;
}

.n8n-recurso-card__icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.n8n-recurso-card__topline > span {
  color: #A78BFA;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.n8n-recurso-card h3,
.n8n-recurso-card p {
  position: relative;
  z-index: 1;
}

.n8n-recurso-card h3 {
  margin-top: 2rem;
  color: #0F172A;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.n8n-recurso-card p {
  margin-top: .7rem;
  color: #64748B;
  font-size: .95rem;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .n8n-recursos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .n8n-recursos-grid {
    grid-template-columns: 1fr;
  }

  .n8n-recursos-heading h2 {
    font-size: 2rem;
  }
}

/* Nomes de planos com peso visual mais leve nas tabelas e cards. */
.vps-planos-table thead th > span,
.vps-plano-slider-card__head strong,
.vps-plano-card h3 {
  font-weight: 500;
}

/* Showcase de data center compartilhado pelas páginas VPS. */
.vps-datacenter-section {
  position: relative;
  padding: 5rem 1.25rem;
  overflow: hidden;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.vps-datacenter-section__inner {
  width: min(1200px, 100%);
  margin-inline: auto;
}

.vps-datacenter-section__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}

.vps-datacenter-section__heading > div > span,
.vps-datacenter-locations > span,
.vps-datacenter-presence > span {
  display: block;
  color: #7C3AED;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vps-datacenter-section__heading h2 {
  margin-top: .75rem;
  color: #0F172A;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.05;
}

.vps-datacenter-section__heading h2 em {
  color: #7C3AED;
  font-style: normal;
}

.vps-datacenter-section__heading > p {
  max-width: 28rem;
  color: #64748B;
  font-size: .95rem;
  line-height: 1.65;
}

.vps-datacenter-showcase {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0 18px 45px -28px rgba(15, 23, 42, .25);
}

.vps-datacenter-presence {
  padding: 2rem;
  border-right: 1px solid #E2E8F0;
}

.vps-datacenter-presence > span,
.vps-datacenter-locations > span {
  color: #94A3B8;
  font-size: .65rem;
}

.vps-datacenter-map {
  position: relative;
  height: 215px;
  margin: 1.5rem auto 1rem;
}

.vps-datacenter-map__outline {
  position: absolute;
  top: 9%;
  left: 24%;
  width: 52%;
  height: 82%;
  border: 2px solid #DDD6FE;
  border-radius: 58% 42% 52% 48% / 42% 49% 51% 58%;
  background: linear-gradient(145deg, #F5F3FF, #FFFFFF);
  transform: rotate(18deg) skewY(-8deg);
  box-shadow: inset -12px -8px 0 rgba(124, 58, 237, .04);
}

.vps-datacenter-map__pin {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  color: #FFFFFF;
  background: #7C3AED;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .35);
  font-size: .6rem;
  font-style: normal;
  font-weight: 700;
}

.vps-datacenter-map__pin--one { top: 43%; left: 38%; }
.vps-datacenter-map__pin--two { top: 31%; left: 59%; background: #9333EA; }

.vps-datacenter-presence__caption {
  display: grid;
  gap: .25rem;
}

.vps-datacenter-presence__caption strong {
  color: #0F172A;
  font-size: 1rem;
  font-weight: 600;
}

.vps-datacenter-presence__caption small {
  color: #64748B;
  font-size: .75rem;
}

.vps-datacenter-locations {
  padding: 2rem;
  background: #F8FAFC;
}

.vps-datacenter-location-list {
  display: grid;
  margin-top: 1.25rem;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  overflow: hidden;
  background: #FFFFFF;
}

.vps-datacenter-location-list article {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  transition: background .2s ease;
}

.vps-datacenter-location-list article + article { border-top: 1px solid #E2E8F0; }
.vps-datacenter-location-list article:hover { background: #FAF5FF; }

.vps-datacenter-location-list article > b {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #DDD6FE;
  border-radius: .75rem;
  color: #7C3AED;
  background: #F5F3FF;
  font-size: .75rem;
}

.vps-datacenter-location-list article > div { flex: 1; }
.vps-datacenter-location-list small { color: #7C3AED; font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.vps-datacenter-location-list h3 { margin-top: .25rem; color: #0F172A; font-size: 1rem; font-weight: 500; }
.vps-datacenter-location-list p { margin-top: .25rem; color: #64748B; font-size: .8rem; line-height: 1.45; }
.vps-datacenter-location-list article > strong { color: #CBD5E1; font-size: 1.25rem; font-weight: 400; transition: color .2s ease, transform .2s ease; }
.vps-datacenter-location-list article:hover > strong { color: #7C3AED; transform: translateX(3px); }

.vps-datacenter-section__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  color: #94A3B8;
  font-size: .7rem;
}

.dedicado-datacenter-badge {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  width: fit-content;
  margin-inline: auto;
  padding: .55rem .85rem;
  border: 1px solid #E9D5FF;
  border-radius: .9rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(124, 58, 237, .06);
}

.dedicado-datacenter-badge__dot {
  width: .45rem;
  height: .45rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #22C55E;
  box-shadow: 0 0 0 .2rem rgba(34, 197, 94, .1);
}

.dedicado-datacenter-badge__content {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.dedicado-datacenter-badge strong {
  color: #64748B;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dedicado-datacenter-badge b {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #1E293B;
  font-size: .82rem;
  font-weight: 600;
}

.dedicado-datacenter-badge i {
  color: #A78BFA;
  font-style: normal;
}

.dedicated-planos-section .vps-plano-view-alto,
.dedicated-planos-section .vps-planos-cards-legacy {
  display: none;
}

.dedicated-planos-section .vps-planos-table thead th:nth-child(n + 5),
.dedicated-planos-section .vps-planos-table tbody td:nth-child(n + 5) {
  display: none;
}

.dedicated-planos-section .vps-planos-table tbody td small {
  color: #64748B;
  font-size: .78em;
}

/* Hospedagem de sites: painel de controle */
.hospedagem-painel-section {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 1.25rem 7rem;
  border-top: 1px solid #F1F5F9;
  background: #FDFCFF;
}

.hospedagem-painel__inner {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.hospedagem-painel__heading {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}

.hospedagem-painel__heading > span {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid #D8B4FE;
  border-radius: 999px;
  color: #7C3AED;
  background: #FAF5FF;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.hospedagem-painel__heading h2 {
  margin: .9rem 0 0;
  color: #0F172A;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1.08;
}

.hospedagem-painel__heading h2 em {
  color: #7C3AED;
  font-style: normal;
}

.hospedagem-painel__heading p {
  max-width: 44rem;
  margin: 1rem auto 0;
  color: #64748B;
  font-size: 1rem;
  line-height: 1.7;
}

.hospedagem-painel__visual {
  position: relative;
  max-width: 72rem;
  margin: 3rem auto 0;
}

.hospedagem-painel__visual::before {
  position: absolute;
  inset: 12% 8% 2%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, .15), rgba(124, 58, 237, 0) 68%);
  filter: blur(1.5rem);
}

.hospedagem-painel__visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  filter: drop-shadow(0 1.75rem 2.5rem rgba(15, 23, 42, .14));
  animation: hospedagem-painel-pulse 4.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

@keyframes hospedagem-painel-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025) translateY(-4px);
    filter: drop-shadow(0 2rem 3rem rgba(124, 58, 237, .18));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hospedagem-painel__visual img {
    animation: none;
  }
}

@media (max-width: 760px) {
  .dedicado-datacenter-badge {
    align-items: flex-start;
    border-radius: 1rem;
  }
  .dedicado-datacenter-badge__content {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }
  .hospedagem-painel-section { padding: 4.5rem 1.25rem 5rem; }
  .hospedagem-painel__heading h2 { font-size: 2rem; }
  .hospedagem-painel__heading p { font-size: .95rem; }
  .hospedagem-painel__visual { margin-top: 2rem; }
  .hospedagem-painel__visual img { border-radius: 1rem; }
  .vps-datacenter-section { padding: 4rem 1.25rem; }
  .vps-datacenter-section__heading { display: block; margin-bottom: 2rem; }
  .vps-datacenter-section__heading > p { margin-top: 1rem; }
  .vps-datacenter-showcase { grid-template-columns: 1fr; }
  .vps-datacenter-presence { border-right: 0; border-bottom: 1px solid #E2E8F0; }
  .vps-datacenter-map { max-width: 17rem; }
  .vps-datacenter-section__footer { flex-direction: column; }
}