/* ========================================
  JumpAds - Components
  ======================================== */

/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-6);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: 1;
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
cursor: pointer;
text-decoration: none;
}

.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

.btn-primary {
background-color: var(--color-primary);
color: var(--color-secondary);
}

.btn-primary:hover {
background-color: var(--color-primary-light);
box-shadow: var(--shadow-glow);
transform: translateY(-2px);
}

.btn-secondary {
background-color: var(--color-secondary-light);
color: var(--color-white);
border: 1px solid var(--color-gray-700);
}

.btn-secondary:hover {
background-color: var(--color-gray-700);
border-color: var(--color-gray-600);
}

.btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
}

.btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-secondary);
}

.btn-lg {
padding: var(--spacing-4) var(--spacing-8);
font-size: var(--font-size-lg);
}

.btn-sm {
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--font-size-sm);
}

/* ===== HEADER ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
background-color: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-gray-800);
z-index: 1000;
}

.header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--spacing-6);
}

.logo {
flex-shrink: 0;
}

.logo img {
height: 40px;
width: auto;
}

/* Navigation */
.nav {
flex: 1;
display: flex;
justify-content: center;
}

.nav-list {
display: flex;
gap: var(--spacing-6);
}

.nav-link {
color: var(--color-gray-300);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: color var(--transition-fast);
white-space: nowrap;
}

.nav-link:hover,
.nav-link:focus {
color: var(--color-primary);
}

/* CTA Button */
.btn-cta {
flex-shrink: 0;
font-size: var(--font-size-xs);
padding: var(--spacing-3) var(--spacing-5);
white-space: nowrap;
}

/* Mobile Toggle Button */
.nav-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: var(--spacing-2);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-white);
transition: all var(--transition-fast);
}

.nav-toggle-icon {
position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
content: '';
position: absolute;
left: 0;
}

.nav-toggle-icon::before {
top: -8px;
}

.nav-toggle-icon::after {
top: 8px;
}

/* Toggle Active State */
.nav-toggle.active .nav-toggle-icon {
background-color: transparent;
}

.nav-toggle.active .nav-toggle-icon::before {
top: 0;
transform: rotate(45deg);
}

.nav-toggle.active .nav-toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
background-color: var(--color-secondary);
border-bottom: 1px solid var(--color-gray-800);
padding: var(--spacing-6);
transform: translateY(-100%);
opacity: 0;
transition: all var(--transition-normal);
}

.mobile-menu.active {
transform: translateY(0);
opacity: 1;
}

.mobile-nav-list {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
margin-bottom: var(--spacing-6);
}

.mobile-nav-link {
color: var(--color-gray-300);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
padding: var(--spacing-2) 0;
transition: color var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
color: var(--color-primary);
}

.btn-mobile-cta {
width: 100%;
text-align: center;
}

/* ===== HERO SECTION ===== */
.section-hero.section {
padding-top: 20px;
padding-bottom: 0px;
}

.section-hero {
position: relative;
display: flex;
flex-direction: column;
background-color: #040903;
}

.section-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../images/Banner-Bg.png');
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: 0;
}

.section-hero > * {
position: relative;
z-index: 1;
}

/* Banner Subtitle */
.banner-subtitle-wrapper {
display: none;
justify-content: flex-start;
}

.banner-subtitle-single {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 4px 20px 4px 5px;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.17);
border-top-color: rgba(255, 255, 255, 0.12);
border-radius: 100px;
backdrop-filter: blur(42.9px);
-webkit-backdrop-filter: blur(42.9px);
}

.banner-subtitle-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
}

.banner-subtitle-icon {
width: 16px;
height: 16px;
filter: brightness(0);
}

.banner-subtitle {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--white-100);
white-space: nowrap;
}

.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-12);
align-items: top;
padding: var(--spacing-12) 0;
}

.hero-content {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
margin-top: 60px;
}

.hero-title {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
color: var(--color-white);
margin: 0;
text-transform: uppercase;
}

.hero-title .text-highlight {
color: var(--color-primary);
}

.hero-subtitle {
font-size: var(--font-size-lg);
color: var(--color-gray-400);
line-height: var(--line-height-tight);
max-width: 540px;
margin: 0;
}

.hero-cta-label {
font-size: var(--font-size-base);
color: var(--color-gray-300);
font-weight: var(--font-weight-medium);
margin: var(--spacing-4) 0 0 0;
}

.hero-content .cta-container {
margin-top: var(--spacing-2);
padding: 0;
}

.hero-visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
aspect-ratio: 1 / 1;
contain: layout style;
}

/* Hero Visual Mobile - escondido no desktop */
.hero-visual-mobile {
display: none;
}

/* Banner Image Card Wrapper */
.banner-image-card-wrapper {
position: relative;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 483px;
aspect-ratio: 1 / 1;
}

.hero-image {
position: relative;
z-index: 2;
min-width: 720px;
height: auto;
max-width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
}

.banner-card-shape {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(157, 255, 117, 0.15) 0%, transparent 70%);
border-radius: 50%;
z-index: 1;
filter: blur(40px);
}

.banner-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 530px;
height: auto;
z-index: 0;
opacity: 0.5;
animation: rotateCircle 30s linear infinite;
will-change: transform;
}

@keyframes rotateCircle {
from {
  transform: translate(-50%, -50%) rotate(0deg);
}
to {
  transform: translate(-50%, -50%) rotate(360deg);
}
}

/* Floating Icon - Cursor/Pointer Animation */
.floating-icon {
position: absolute;
right: -20px;
top: 40%;
width: 90px;
height: auto;
z-index: 3;
animation: cursorMove 6s ease-in-out infinite;
filter: drop-shadow(0 0 15px rgba(157, 255, 117, 0.6)) drop-shadow(0 0 30px rgba(157, 255, 117, 0.4)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
will-change: transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.banner-circle,
.floating-icon {
  animation: none;
}
}

@keyframes cursorMove {
0% {
  transform: translate(0, 0) rotate(-5deg);
  opacity: 1;
}
15% {
  transform: translate(-60px, 40px) rotate(0deg);
}
30% {
  transform: translate(-40px, 80px) rotate(5deg);
}
45% {
  transform: translate(-100px, 50px) rotate(-3deg);
}
60% {
  transform: translate(-70px, 100px) rotate(8deg);
  opacity: 1;
}
70% {
  transform: translate(-50px, 70px) rotate(0deg);
}
85% {
  transform: translate(-20px, 30px) rotate(-5deg);
}
100% {
  transform: translate(0, 0) rotate(-5deg);
  opacity: 1;
}
}

/* Legacy hero styles */
.hero {
display: flex;
align-items: center;
padding-top: var(--header-height);
text-align: center;
background: radial-gradient(ellipse at center top, var(--color-secondary-light) 0%, var(--color-secondary) 70%);
}

.hero-cta {
display: flex;
gap: var(--spacing-4);
justify-content: center;
flex-wrap: wrap;
}

/* ===== CARDS ===== */
.card {
background-color: var(--color-secondary-light);
border: 1px solid var(--color-gray-800);
border-radius: var(--radius-xl);
padding: var(--spacing-8);
transition: all var(--transition-normal);
}

.card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-glow);
transform: translateY(-4px);
}

.card-title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-3);
}

.card-text {
color: var(--color-gray-400);
}

/* ===== FOOTER ===== */
.footer {
padding: var(--spacing-8) 0;
border-top: 1px solid var(--color-gray-800);
text-align: center;
color: var(--color-gray-500);
}

/* ===== GLOWBOX BUTTON ===== */
@keyframes borderTurn {
to {
  transform: rotate(360deg);
}
}

.cta-container {
margin-top: 2rem;
width: 100%;
max-width: 36rem;
padding: 0 1rem;
position: relative;
z-index: 1;
}

.glowbox {
--animation-speed: 2s;
isolation: isolate;
overflow: hidden;
border-radius: 999px;
display: inline-block;
position: relative;
}

.glowbox-link {
display: block;
cursor: pointer;
width: 100%;
height: 100%;
text-decoration: none;
}

.glowbox-animations {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
pointer-events: none;
opacity: 1;
}

.glowbox-glow {
position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 700px;
margin-left: -350px;
margin-top: -350px;
animation: borderTurn var(--animation-speed) infinite linear;
background-image: conic-gradient(
  from 0deg at 50% 50%,
  var(--color-primary) 0deg,
  rgba(255, 255, 255, 0) 60deg,
  rgba(255, 255, 255, 0) 300deg,
  var(--color-primary) 360deg
);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(12px);
opacity: 0.4;
}

.glowbox-stars-masker {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
mask: url("data:image/svg+xml,%3Csvg width='28' height='24' viewBox='0 0 28 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0534 15.732C13.8444 15.283 14.2848 14.8489 14.7326 15.051C14.8296 15.0959 14.9043 15.1707 14.949 15.268C15.1506 15.717 14.7177 16.1511 14.2698 15.949C14.1728 15.9041 14.0982 15.8293 14.0534 15.732Z' fill='black'/%3E%3Cpath d='M18.8001 13.5093C19.0016 13.0603 18.5687 12.6263 18.1209 12.8283C18.0239 12.8732 17.9492 12.9481 17.9045 13.0453C17.6955 13.4944 18.1358 13.9284 18.5837 13.7264C18.6807 13.6815 18.7553 13.6066 18.8001 13.5093Z' fill='black'/%3E%3Cpath d='M0.949043 2.732C1.15057 2.28297 0.717663 1.84891 0.269836 2.05097C0.172806 2.09587 0.098162 2.17071 0.0533793 2.268C-0.155607 2.71703 0.284759 3.15109 0.732587 2.94903C0.829616 2.90413 0.90426 2.82929 0.949043 2.732Z' fill='black'/%3E%3Cpath d='M26.9489 7.732C27.151 7.28297 26.7169 6.84891 26.2679 7.05097C26.1706 7.09587 26.0958 7.17071 26.0508 7.268C25.8488 7.71703 26.2828 8.15109 26.7319 7.94903C26.8292 7.90413 26.904 7.82929 26.9489 7.732Z' fill='black'/%3E%3Cpath d='M13.0534 5.732C12.8444 5.28297 13.2848 4.84891 13.7326 5.05097C13.8296 5.09587 13.9043 5.17071 13.949 5.268C14.1506 5.71703 13.7177 6.15109 13.2698 5.94903C13.1728 5.90413 13.0982 5.82929 13.0534 5.732Z' fill='black'/%3E%3Cpath d='M10.0534 17.732C9.84439 17.283 10.2848 16.8489 10.7326 17.051C10.8296 17.0959 10.9043 17.1707 10.949 17.268C11.1506 17.717 10.7177 18.1511 10.2698 17.949C10.1728 17.9041 10.0982 17.8293 10.0534 17.732Z' fill='black'/%3E%3Cpath d='M15.0534 21.732C14.8444 21.283 15.2848 20.8489 15.7326 21.051C15.8296 21.0959 15.9043 21.1707 15.949 21.268C16.1506 21.717 15.7177 22.1511 15.2698 21.949C15.1728 21.9041 15.0982 21.8293 15.0534 21.732Z' fill='black'/%3E%3C/svg%3E%0A");
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
-webkit-mask-size: auto;
mask-size: auto;
}

.glowbox-stars {
position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 700px;
margin-left: -350px;
margin-top: -350px;
animation: borderTurn var(--animation-speed) infinite linear;
background-image: conic-gradient(
  from 0deg at 50% 50%,
  var(--color-primary) 0deg,
  var(--color-primary-dark) 30deg,
  rgba(255, 255, 255, 0) 60deg,
  rgba(255, 255, 255, 0) 300deg,
  var(--color-primary-dark) 330deg,
  var(--color-primary) 360deg
);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.glowbox-borders-masker {
border-radius: 999px;
height: 100%;
inset: 0;
left: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
opacity: 1;
}

.glowbox-borders {
position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 700px;
margin-left: -350px;
margin-top: -350px;
animation: borderTurn var(--animation-speed) infinite linear;
background-image: conic-gradient(
  from 0deg at 50% 50%,
  var(--color-primary) 0deg,
  rgba(255, 255, 255, 0) 60deg,
  rgba(255, 255, 255, 0) 300deg,
  var(--color-primary) 360deg
);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.glowbox-button {
cursor: pointer;
display: flex;
width: 100%;
gap: 12px;
align-items: center;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.01em;
background-color: rgba(255, 255, 255, 0.034);
border: 1px solid var(--color-primary-20);
border-radius: 999px;
padding: 6px;
position: relative;
z-index: 1;
}

.glowbox-inner {
font-size: 14px;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
padding: 14px 28px;
justify-content: center;
align-items: center;
gap: 0px;
flex: 1 0 0;
border-radius: 72px;
overflow: hidden;
z-index: 4;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
color: var(--black-100);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
}

.glowbox-inner:hover {
background: linear-gradient(135deg, var(--color-primary) 0%, #e8ffe0 100%);
box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.6);
}

.btn-content {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}

.btn-content svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.btn-cta {
  font-size: 0.65rem;
  padding: var(--spacing-2) var(--spacing-4);
}

.nav-list {
  gap: var(--spacing-4);
}

.nav-link {
  font-size: var(--font-size-xs);
}

.hero-grid {
  gap: var(--spacing-8);
}

.hero-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
}

/* Disable heavy animations on mobile for better performance */
@media (max-width: 768px) {
/* Disable glowbox animations */
.glowbox-glow,
.glowbox-stars-masker,
.glowbox-stars,
.glowbox-borders-masker,
.glowbox-borders {
  display: none !important;
}

/* Disable spin animations */
.spin,
.spin-blur,
.spin-intense,
.spin-inside {
  display: none !important;
}

/* Disable blob animations */
.blob,
.blob-bg {
  display: none !important;
}

/* Simplify banner decorations */
.banner-card-shape,
.banner-circle,
.floating-icon {
  display: none !important;
}
}

@media (max-width: 768px) {
.nav {
  display: none;
}

.btn-cta {
  display: none;
}

.nav-toggle {
  display: flex;
}

.mobile-menu {
  display: block;
}

/* Prevent horizontal overflow on mobile */
.section,
main,
.container {
  overflow-x: hidden;
}

.hero-grid {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 20px 0 20px 0;
}
.section-hero.section{
  padding-top: 8px;
  padding-bottom: 210px;
}

.hero-content {
  align-items: center;
  order: 2;
  gap: 0;
  margin-top: 0;
}

.hero-content .hero-title {
  margin-bottom: 0;
}

.hero-content .hero-subtitle {
  margin-top: var(--spacing-4);
}

/* Banner Subtitle Responsive */
.banner-subtitle-wrapper {
  justify-content: center;
  width: 100%;
}

.banner-subtitle-single {
  max-width: 100%;
  padding: 4px 12px 4px 5px;
}

.banner-subtitle {
  white-space: normal;
  text-align: center;
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.hero-subtitle {
  max-width: 100%;
}

.hero-visual {
  display: none;
}

.hero-visual-mobile {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--spacing-6) 0;
  min-height: 280px;
  aspect-ratio: 1 / 1;
  contain: layout style;
}

.hero-visual-mobile .hero-image {
  max-width: 100%;
  width: 100%;
  height: auto;
  min-width: unset;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.hero-visual-mobile .banner-image-card-wrapper {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.hero-visual-mobile .banner-circle {
  min-width: unset;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
}

.hero-visual-mobile .banner-card-shape {
  width: 90%;
  height: 90%;
}

/* CTA Mobile - Centralizado e respeitando padding do container */
.cta-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.cta-container .glowbox {
  max-width: calc(100% - 12px);
}

.cta-container .glowbox-link {
  max-width: 100%;
}

.cta-container .glowbox-button {
  max-width: 100%;
  padding: 4px;
}

.cta-container .glowbox-inner {
  padding: 18px 24px;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

.cta-container .btn-content {
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
}

@media (max-width: 480px) {
.hero-title {
  font-size: 1.5rem;
}

.hero-content .cta-container {
margin-top: 0;
padding: 0;
}
.hero-subtitle {
  font-size: var(--font-size-base);
}

.hero-visual-mobile {
  margin: var(--spacing-4) 0;
}


.hero-visual-mobile .banner-circle {
  max-width: 250px;
}

.cta-container .glowbox-inner {
  padding: 20px 16px;
}

.cta-container .btn-content {
  font-size: 0.6rem;
  gap: 0.4rem;
}

.cta-container .btn-content svg {
  width: 16px;
  height: 16px;
}
}


/* ===== FORM SECTION (DIAGNÓSTICO) ===== */
.section.section-diagnostico {
position: relative;
padding-top: var(--spacing-24);
padding-bottom: var(--spacing-24);
content-visibility: auto;
contain-intrinsic-size: auto 800px;
}

.section.section-diagnostico::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../images/bg-grid.png');
background-repeat: repeat;
background-position: bottom;
background-size: auto;
opacity: 0.5;
z-index: 0;
}

.section-diagnostico .client-overlay {
background-image: linear-gradient(#01071900, var(--color-black) 83.81%);
width: 100%;
max-width: 100%;
height: 410px;
position: absolute;
inset: 0 0% auto;
transform: rotate(180deg);
z-index: 0;
}


.section-diagnostico .container {
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-2xl);
padding: var(--spacing-12);
overflow: hidden;
background-color: #00000036;
backdrop-filter: blur(50px);
}

.form-section-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-12);
align-items: flex-start;
}

/* Form Steps Column */
.form-steps-column {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}

.form-section-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: var(--font-weight-bold);
color: var(--color-white);
line-height: var(--line-height-tight);
margin: 0 0 var(--spacing-4) 0;
}

.text-gradient-highlight {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

/* Form Step */
.form-step {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}

.form-step-header {
display: flex;
align-items: center;
gap: var(--spacing-4);
}

.form-step-divider {
width: 40px;
height: 2px;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
border-radius: 2px;
}

.form-step-number {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 1px;
}

.form-step-content {
display: flex;
align-items: flex-start;
gap: var(--spacing-4);
}

.form-step-icon {
flex-shrink: 0;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(157, 255, 117, 0.1) 0%, rgba(157, 255, 117, 0.05) 100%);
border: 1px solid var(--color-primary-20);
border-radius: var(--radius-xl);
color: var(--color-primary);
}

.form-step-text {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}

.form-step-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
margin: 0;
}

.form-step-description {
font-size: var(--font-size-sm);
color: var(--color-gray-400);
line-height: var(--line-height-relaxed);
margin: 0;
}

/* Form Column */
.form-column {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
}

/* ===== ANIMATED CARD (Uiverse.io) ===== */
.card-container {
position: relative;
width: 100%;
max-width: 480px;
border-radius: 1.5em;
}

.card-border {
position: absolute;
inset: 0;
background: #0005;
border-radius: inherit;
}

.card-container .card {
position: relative;
border-radius: calc(1.5em - 0.125em);
background: #ffffff;
display: flex;
flex-direction: column;
color: var(--color-secondary);
overflow: hidden;
padding: var(--spacing-8);
border: none;
transition: none;
transform: none;
}

.card-container .card:hover {
border-color: transparent;
box-shadow: none;
transform: none;
}

.backdrop {
position: absolute;
inset: -100%;
background: radial-gradient(circle at 50% 50%, #0000 0, #0000 20%, #11111128 50%);
background-size: 3px 3px;
z-index: -1;
}

.spin {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}

.spin-blur {
filter: blur(3em);
}

.spin-intense {
inset: -0.125em;
filter: blur(0.5em);
border-radius: calc(1.5em - 0.125em);
}

.spin-inside {
inset: -2px;
border-radius: inherit;
filter: blur(2px);
z-index: 0;
}

.spin::before {
content: "";
position: absolute;
inset: -30%;
}

.spin-blur::before {
background: linear-gradient(-45deg, var(--color-primary) 0%, #0000 46% 54%, #eaffe1);
opacity: 0.6;
}

.spin-intense::before {
background: linear-gradient(-45deg, var(--color-primary-light) 0%, #0000 35% 65%, #adff99);
opacity: 0.5;
}

.spin-inside::before {
background: linear-gradient(-45deg, #d4ffbf 0%, #0000 35% 65%, #cef);
opacity: 0.4;
}

/* Contact Form */
.contact-form {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}

.form-group {
width: 100%;
}

.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: #616161;
margin-bottom: var(--spacing-2);
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.form-input,
.form-select {
width: 100%;
padding: var(--spacing-4);
font-size: var(--font-size-base);
font-family: var(--font-family);
color: var(--color-secondary);
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: var(--radius-2xl);
transition: all var(--transition-fast);
outline: none;
}

.form-input::placeholder {
color: #9e9e9e;
}

.form-input:hover,
.form-select:hover {
border-color: #bdbdbd;
background-color: #fafafa;
}

.form-input:focus,
.form-select:focus {
border-color: var(--color-primary);
background-color: #ffffff;
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* Select Wrapper */
.form-select-wrapper {
position: relative;
width: 100%;
}

.form-select {
appearance: none;
cursor: pointer;
padding-right: var(--spacing-10);
}

.form-select option {
background-color: #ffffff;
color: var(--color-secondary);
padding: var(--spacing-2);
}

.form-select-icon {
position: absolute;
right: var(--spacing-4);
top: 50%;
transform: translateY(-50%);
color: #757575;
pointer-events: none;
transition: color var(--transition-fast);
}

.form-select:focus + .form-select-icon {
color: var(--color-primary);
}

/* Submit Button */
.form-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
width: 100%;
padding: var(--spacing-4) var(--spacing-6);
margin-top: var(--spacing-2);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
font-family: var(--font-family);
color: var(--black-100);
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
border: none;
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

.form-submit-btn:hover {
background: linear-gradient(135deg, var(--color-primary) 0%, #e8ffe0 100%);
box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5);
transform: translateY(-2px);
}

.form-submit-btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

.form-submit-btn:active {
transform: translateY(0);
}

.form-submit-btn svg {
flex-shrink: 0;
}

/* Form Responsive */
@media (max-width: 1024px) {
.form-section-grid {
  gap: var(--spacing-8);
}

.form-step-icon {
  width: 64px;
  height: 64px;
}

.form-step-icon svg {
  width: 32px;
  height: 32px;
}

.card-container {
  max-width: 420px;
}

.card {
  padding: var(--spacing-6);
}
}

@media (max-width: 768px) {
.section-diagnostico {
  padding: var(--spacing-12) 0;
}

.section-diagnostico .container {
  padding: var(--spacing-6);
}

.form-section-grid {
  grid-template-columns: 1fr;
  gap: var(--spacing-10);
}

.form-section-title {
  text-align: center;
}

.form-steps-column {
  gap: var(--spacing-6);
}

.form-column {
  justify-content: center;
}

.card-container {
  max-width: 100%;
}

.card {
  padding: var(--spacing-6);
}
}

@media (max-width: 480px) {
.form-step-content {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--spacing-3);
}

.form-step-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
}

.form-step-icon svg {
  width: 28px;
  height: 28px;
}

.form-step-header {
  justify-content: flex-start;
}

.form-input,
.form-select {
  padding: var(--spacing-3);
  font-size: var(--font-size-sm);
}

.form-submit-btn {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.card {
  padding: var(--spacing-4);
}

.card-container {
  border-radius: 1em;
}

.card {
  border-radius: calc(1em - 0.125em);
}
}


/* ===== CLIENTES MARQUEE SECTION ===== */
.section.section-clientes {
margin-top: -160px;
padding: var(--spacing-16) 0;
padding-top: calc(var(--spacing-16) + 60px);
background-color: var(--color-black);
}

/* Clientes Label - Hover Effect */
.clientes-container {
text-align: center;
margin-bottom: var(--spacing-8);
position: relative;
z-index: 10;
}

.clientes-label-hover {
display: inline-block;
padding: var(--spacing-2) var(--spacing-6);
border-radius: 999px;
background: linear-gradient(135deg, rgba(19, 19, 19, 0.377) 0%, rgb(156, 255, 117) 100%);
font-size: clamp(0.725rem, 3vw, 0.725rem);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
color: #ffffff;
}

.clientes-label-hover .text-highlight {
color: var(--color-primary);
}

/* Sponsors Ticker */
.sponsors-ticker {
padding: 10px;
background-color: var(--color-black);
position: relative;
width: 100%;
overflow: hidden;
}

.sponsors-ticker::before,
.sponsors-ticker::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 250px;
z-index: 2;
pointer-events: none;
}

.sponsors-ticker::before {
left: 0;
background: linear-gradient(90deg, var(--color-black) 0%, transparent 100%);
}

.sponsors-ticker::after {
right: 0;
background: linear-gradient(270deg, var(--color-black) 0%, transparent 100%);
}

.ticker {
display: flex;
width: max-content;
animation: ticker-scroll 25s linear infinite;
}

.ticker:hover {
animation-play-state: paused;
}

.inner-ticker-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-12);
padding: 0 var(--spacing-6);
transform-style: preserve-3d;
will-change: transform;
}

.single-sponsor-img {
height: 80px;
width: 120px;
max-width: 220px;
object-fit: contain;
opacity: 0.6;
filter: grayscale(100%) brightness(1.5);
transition: all var(--transition-fast);
flex-shrink: 0;
aspect-ratio: 3 / 1;
}

.single-sponsor-img:hover {
opacity: 1;
filter: grayscale(0%) brightness(1);
}

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

/* Ticker Responsive */
@media (max-width: 768px) {
.section.section-clientes {
  padding: var(--spacing-12) 0;
}

.clientes-label {
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-6);
}

.sponsors-ticker::before,
.sponsors-ticker::after {
  width: 80px;
}

.inner-ticker-wrapper {
  gap: var(--spacing-8);
}

.single-sponsor-img {
  height: 50px;
  max-width: 140px;
}
}

@media (max-width: 480px) {
.sponsors-ticker::before,
.sponsors-ticker::after {
  width: 40px;
}

.inner-ticker-wrapper {
  gap: var(--spacing-6);
}

.single-sponsor-img {
  height: 40px;
  max-width: 110px;
}
}


/* ===== WHY CHOOSE US SECTION ===== */
.section.section-why-choose-us {
padding: var(--spacing-24) 0;
background-color: #ffffff;
position: relative;
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}

.why-choose-us-header {
text-align: center;
margin-bottom: var(--spacing-12);
}

/* Section Top Icon - 3D Spin Animation (like Bemine) */
.section-top-icon {
display: block;
width: 55px;
height: auto;
margin: 0 auto var(--spacing-6);
animation: iconSpin3D 4s ease-in-out infinite;
transform-style: preserve-3d;
will-change: transform;
}

@keyframes iconSpin3D {
0% {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity: 1;
}
15% {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  opacity: 1;
}
25% {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  opacity: 0.4;
}
40% {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  opacity: 1;
}
50% {
  transform: translate3d(0px, 0px, 0px) scale3d(1.15, 1.15, 1) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  opacity: 1;
}
75% {
  transform: translate3d(0px, 0px, 0px) scale3d(1.15, 1.15, 1) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  opacity: 1;
}
100% {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  opacity: 1;
}
}

.why-choose-us-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
line-height: var(--line-height-tight);
margin: 0 0 var(--spacing-4) 0;
}

.why-choose-us-title .text-highlight {
color: var(--color-primary-dark);
}

.why-choose-us-subtitle {
font-size: var(--font-size-lg);
color: #666666;
max-width: 630px;
margin: 0 auto;
line-height: var(--line-height-relaxed);
}

/* ===== SERVICE SLIDER ===== */
.slider.service {
position: relative;
z-index: 1;
width: 100%;
}

.service-slider-mask {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
width: 100%;
}

.single-service-slide {
display: flex;
width: 100%;
}

.single-service-wrap {
background: #ffffff;
background-clip: padding-box;
border: 1px solid var(--color-primary-light);
border-radius: 2rem;
padding: 1.5rem;
display: flex;
flex-direction: column;
width: 100%;
}

/* ===== BLOB CARD EFFECT (Uiverse.io by dylanharriscameron) ===== */
.single-service-wrap.blob-card {
position: relative;
border-radius: 14px;
z-index: 1;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 20px 20px 60px #2a441f47, -20px -20px 60px #ffffff;
padding: 0;
background: transparent;
}

.blob-bg {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(24px);
border-radius: 10px;
overflow: hidden;
outline: 2px solid rgba(0, 0, 0, 0.15);
background-image: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), linear-gradient(135deg, var(--color-primary) 0%, #000000 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
}

.blob {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #9dff75;
opacity: 1;
filter: blur(12px);
animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
0% {
  top: 0;
  left: 0;
}
25% {
  top: 0;
  left: calc(100% - 150px);
}
50% {
  top: calc(100% - 150px);
  left: calc(100% - 150px);
}
75% {
  top: calc(100% - 150px);
  left: 0;
}
100% {
  top: 0;
  left: 0;
}
}

.blob-card .service-content-wrap {
position: relative;
z-index: 3;
padding: 1.5rem;
}

/* Blob animation delays */
.blob.blob-delay-1 {
animation-delay: 0s;
}

.blob.blob-delay-2 {
animation-delay: -1.67s;
}

.blob.blob-delay-3 {
animation-delay: -3.33s;
}

.service-content-wrap {
display: flex;
flex-direction: column;
flex: 1;
}

.service-details {
font-size: var(--font-size-base);
color: #666666;
line-height: 1.6;
margin: 0 0 1.5rem 0;
flex: 1;
}

.service-image-wrap {
display: block;
border-radius: 1rem;
overflow: hidden;
transition: transform var(--transition-normal);
margin-top: auto;
}

.service-icon-wrap {
background-image: linear-gradient(#2b2e27, #0c0c0ce1);
border: 1px solid rgba(227, 239, 38, 0.1);
border-radius: 1.375rem;
justify-content: center;
align-items: center;
width: 5rem;
height: 5rem;
margin-bottom: 1.5rem;
display: flex;
overflow: hidden;
}

.service-icon {
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}

.service-title-wrap {
text-decoration: none;
display: block;
margin-bottom: 1rem;
}

.service-title {
font-size: 1.5rem;
font-weight: var(--font-weight-semibold);
color: var(--color-secondary);
margin: 0;
line-height: 1.3;
transition: color var(--transition-fast);
}

.service-title .text-highlight {
color: var(--color-primary-dark);
}

.service-title-wrap:hover .service-title {
color: var(--color-primary);
}

.service-divider {
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
}

.service-image-wrap:hover {
transform: scale(1.02);
}

.service-image {
width: 100%;
height: auto;
display: block;
border-radius: 1rem;
}

/* Slider Arrows */
.slider-arrows-wrapper {
display: none;
position: absolute;
top: 40%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}

.slider-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
position: absolute;
pointer-events: auto;
}

.slider-arrow.left {
left: -12px;
}

.slider-arrow.right {
right: -12px;
}

.slider-arrow:hover {
background: var(--color-primary);
border-color: var(--color-primary);
}

.slider-arrow:hover .service-slide-icon {
color: var(--color-black);
}

.slider-arrow:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

.service-slide-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
}

.service-slide-icon {
width: 24px;
height: 24px;
color: var(--color-secondary);
transition: color 0.3s ease;
}

/* Slider Dots */
.w-slider-nav {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 2rem;
}

.w-slider-dot {
width: 0.75rem;
height: 0.75rem;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
transition: all var(--transition-fast);
}

.w-slider-dot.w-active {
background-color: var(--color-primary-dark);
}

.w-slider-dot:hover {
background-color: rgba(0, 0, 0, 0.4);
}

.display-none {
display: none;
}

/* Why Choose Us Footer */
.why-choose-us-footer {
margin-top: var(--spacing-12);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}

.why-choose-us-footer .cta-container {
margin-top: var(--spacing-8);
}

.why-choose-us-closing {
font-size: var(--font-size-xl);
color: #666666;
line-height: var(--line-height-relaxed);
max-width: 900px;
margin: 0 auto;
padding: var(--spacing-8);
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--radius-xl);
}

.why-choose-us-closing .text-highlight {
color: var(--color-primary-dark);
font-weight: var(--font-weight-semibold);
}

/* Why Choose Us / Service Slider Responsive */
@media (max-width: 1024px) {
.service-slider-mask {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.service-title {
  font-size: 1.25rem;
}
}

@media (max-width: 768px) {
.section.section-why-choose-us {
  padding: var(--spacing-16) 0;
}

/* Mobile Slider Mode */
.slider.service {
  overflow: visible;
}

.service-slider-mask {
  display: flex;
  overflow: visible;
  gap: 0;
}

.single-service-slide {
  flex: 0 0 calc(100% - 2rem);
  max-width: calc(100% - 2rem);
  margin-right: 1rem;
  transition: transform 0.4s ease;
}

.single-service-wrap {
  min-height: auto;
}

/* Show slider arrows on mobile */
.slider.service {
  position: relative;
}

.slider.service .slider-arrows-wrapper {
  display: block;
}

.service-title {
  font-size: 1.25rem;
}

.service-icon-wrap {
  width: 4rem;
  height: 4rem;
}

/* Mobile Slider Dots */
.slider.service .mobile-slider-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.slider.service .mobile-slider-dot {
  width: 0.625rem;
  height: 0.625rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  padding: 0;
}

.slider.service .mobile-slider-dot.active {
  background-color: var(--color-primary);
  transform: scale(1.2);
}

.slider.service .mobile-slider-dot:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
}

@media (max-width: 480px) {
.single-service-slide {
  flex: 0 0 calc(100% - 1rem);
  max-width: calc(100% - 1rem);
  margin-right: 0.5rem;
}

.single-service-wrap {
  padding: 1rem;
}

.service-title {
  font-size: 1.125rem;
}

.service-details {
  font-size: var(--font-size-sm);
}
}


/* ===== WORKING PROCESS SECTION ===== */
.section.section-process {
padding-top: 8.75rem;
padding-bottom: 8.75rem;
background-color: #ffffff;
position: relative;
overflow-x: hidden;
}

/* Section Title Wrapper */
.section-title-wrapper {
text-align: center;
flex-direction: column;
justify-content: flex-start;
align-items: center;
display: flex;
}

.section-title-label {
margin-bottom: 1.25rem;
}

.section-label-wrap {
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
border: 1px solid rgba(211, 255, 85, 0.2);
border-radius: 6.25rem;
padding: 0.5rem 1.25rem;
display: inline-block;
}

.section-label-text {
color: var(--color-black);
letter-spacing: 0.02em;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5;
}

.section-title {
color: var(--color-secondary);
margin-top: 0;
margin-bottom: 0;
font-family: 'Sora', sans-serif;
font-size: 3rem;
font-weight: 600;
line-height: 1.2;
}

.section-process .section-title {
color: var(--color-secondary);
}

/* Process Image Wrapper */
.process-image-wrap {
z-index: 1;
justify-content: center;
align-items: center;
max-width: 43%;
margin-left: auto;
margin-right: auto;
display: flex;
position: relative;
overflow: visible;
}

.process-center-logo {
position: absolute;
z-index: 3;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
width: 340px;
height: auto;
animation: logoPulse 5s ease-in-out infinite;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 50%, black 70%, black 100%);
mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, black 70%, black 100%);
}

@keyframes logoPulse {
0% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
20% {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 0.8;
}
60% {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 0.8;
}
80% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
100% {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
}

.process-image {
z-index: 2;
border-radius: 1.5rem;
width: 100%;
max-width: none;
position: relative;
animation: imagePulse 5s ease-in-out infinite;
}

@keyframes imagePulse {
0% {
  transform: scale(1);
}
20% {
  transform: scale(1.03);
}
60% {
  transform: scale(1.03);
}
80% {
  transform: scale(1);
}
100% {
  transform: scale(1);
}
}

.process-border {
z-index: -1;
width: 62.7vw;
max-width: 57.6rem;
margin-top: -2rem;
margin-left: -50%;
margin-right: -50%;
position: absolute;
}

/* Process Section Responsive */
@media (max-width: 768px) {
.process-center-logo {
  width: 265px;
}
}

/* Hero Highlight Effect */
.hero-highlight {
position: absolute;
z-index: 0;
left: 50%;
bottom: 90px;
transform: translateX(-50%);
width: 60%;
height: 200px;
filter: blur(80px);
background-color: rgba(157, 255, 117, 0.3);
display: flex;
justify-content: center;
align-items: flex-end;
pointer-events: none;
}

.hero-brand-shadow {
background-color: var(--color-primary);
opacity: 0.5;
filter: blur(60px);
width: 80%;
height: 120px;
position: absolute;
bottom: 0;
}

/* Working Process Steps Wrapper */
.working-process-wrap {
grid-column-gap: 2rem;
grid-row-gap: 1rem;
justify-content: center;
align-items: flex-start;
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
display: flex;
}

/* Single Process Step */
.single-process-wrap {
text-align: center;
width: 19rem;
flex: 0 0 19rem;
position: relative;
}

.single-process-wrap._1 {
margin-top: -10rem;
}

.single-process-wrap._2 {
margin-top: 0rem;
}

.single-process-wrap._3 {
margin-top: 0rem;
}

.single-process-wrap._4 {
margin-top: -10rem;
}

/* Process Icon Border Wrap */
.process-icon-border-wrap {
background-image: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
border-radius: 50%;
justify-content: center;
align-items: center;
width: 6.25rem;
height: 6.25rem;
margin-bottom: 1.5rem;
margin-left: auto;
margin-right: auto;
padding: 0.375rem;
display: flex;
}

.process-icon-wrap {
background-color: var(--color-black);
border: 1px solid rgba(157, 255, 117, 0.3);
border-radius: 50%;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: flex;
}

.process-icon {
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}

/* Process Title */
.process-title {
color: var(--color-secondary);
margin-top: 0;
margin-bottom: 0.75rem;
font-family: 'Sora', sans-serif;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
}

/* Process Details */
.process-details {
color: #666666;
margin-bottom: 0;
font-size: 1rem;
line-height: 1.6;
}

/* Process Number */
.process-number {
color: rgba(0, 0, 0, 0.06);
margin-top: 1rem;
font-family: 'Sora', sans-serif;
font-size: 6.25rem;
font-weight: 600;
line-height: 1;
}

/* Process CTA Container */
.process-cta-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 4rem;
}

.process-cta-text {
color: var(--color-secondary);
font-size: 1.25rem;
font-weight: 500;
text-align: center;
max-width: 700px;
margin-bottom: 2rem;
line-height: 1.6;
}

.process-cta-text .text-highlight {
color: var(--color-primary-dark);
font-weight: 600;
}

/* Process Connect Line */
.process-connect-line-wrap {
justify-content: center;
margin-bottom: -3px;
display: flex;
}

.process-connect-line {
width: auto;
height: auto;
}

.process-connect-line {
width: auto;
height: auto;
}

/* Working Process Responsive */
@media screen and (max-width: 991px) {
.section.section-process {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.section-title {
  font-size: 2.5rem;
}

.process-image-wrap {
  max-width: 60%;
  margin-bottom: 3rem;
}

.working-process-wrap {
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.single-process-wrap {
  max-width: 45%;
}

.single-process-wrap._1,
.single-process-wrap._2,
.single-process-wrap._3,
.single-process-wrap._4 {
  margin-top: 0;
}

.process-connect-line-wrap {
  display: none;
}

.process-number {
  font-size: 4rem;
}
}

@media screen and (max-width: 767px) {
.section.section-process {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section-title-wrapper {
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.75rem;
}

.process-image-wrap {
  max-width: 80%;
  margin-bottom: 1.5rem;
}

/* Lista responsiva para mobile - compacta */
.working-process-wrap {
  display: block;
  padding: 0;
  counter-reset: process-step;
}

.single-process-wrap {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.75rem;
  padding: 0.75rem 0;
  padding-left: 2rem;
  border-bottom: 1px solid rgba(157, 255, 117, 0.12);
  position: relative;
}

.single-process-wrap:last-child {
  border-bottom: none;
}

/* Número do passo */
.single-process-wrap::before {
  content: counter(process-step);
  counter-increment: process-step;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-black);
}

.process-icon-border-wrap {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0.1875rem;
}

.process-icon {
  width: 1rem;
  height: 1rem;
}

.process-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
}

.process-title {
  font-size: 0.875rem;
  margin-bottom: 0;
  line-height: 1.3;
}

.process-details {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--color-gray-400);
  margin-bottom: 0;
}

.process-number {
  display: none;
}

.process-connect-line-wrap {
  display: none;
}

.process-cta-container {
  margin-top: 1.5rem;
}

.process-cta-text {
  font-size: 0.9375rem;
  padding: 0 0.5rem;
  margin-bottom: 1.25rem;
}
}

@media screen and (max-width: 479px) {
.section-title {
  font-size: 1.5rem;
}

.process-image-wrap {
  max-width: 95%;
}

.process-border {
  display: none;
}

.working-process-wrap {
  padding: 0;
}

.single-process-wrap {
  padding: 0.625rem 0;
  padding-left: 1.75rem;
  gap: 0.5rem;
}

.single-process-wrap::before {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.5625rem;
}

.process-icon-border-wrap {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
}

.process-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.process-title {
  font-size: 0.8125rem;
}

.process-details {
  font-size: 0.6875rem;
}

.process-cta-text {
  font-size: 0.8125rem;
}
}


/* ===== RESULTADOS REAIS SECTION ===== */
.section.section-resultados {
padding: var(--spacing-24) 0;
background-color: var(--color-black);
position: relative;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: auto 700px;
}

.section-resultados::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../images/bg-grid.png');
background-position: center;
background-repeat: repeat;
background-size: auto;
opacity: 0.5;
pointer-events: none;
}

.section-resultados::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
pointer-events: none;
}

/* Header */
.resultados-header {
text-align: center;
margin-bottom: var(--spacing-12);
position: relative;
z-index: 1;
}

.resultados-header .resultados-logo {
display: block;
width: 48px;
height: 48px;
margin: 0 auto var(--spacing-6) auto;
transform-style: preserve-3d;
animation: logoRotate3D 4s ease-in-out infinite;
will-change: transform;
}

@keyframes logoRotate3D {
0% {
  transform: rotateY(0deg);
}
50% {
  transform: rotateY(180deg);
}
100% {
  transform: rotateY(360deg);
}
}

.resultados-header .section-label-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
background: rgba(157, 255, 117, 0.1);
border: 1px solid var(--color-primary-20);
border-radius: var(--radius-full);
margin-bottom: var(--spacing-6);
}

.resultados-header .section-label-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}

.resultados-header .section-label-text {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 1.5px;
}

.resultados-title {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: var(--font-weight-bold);
color: var(--color-white);
line-height: var(--line-height-tight);
margin: 0 0 var(--spacing-4) 0;
}

.resultados-title .text-highlight {
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-white) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: var(--font-weight-extrabold);
}

.resultados-subtitle {
font-size: var(--font-size-xl);
color: var(--color-gray-400);
margin: 0;
}

.resultados-subtitle .text-highlight {
background-color: var(--color-primary);
color: var(--color-black);
padding: 0.1em 0.4em;
border-radius: 4px;
font-weight: var(--font-weight-semibold);
}

/* Carousel Container */
.resultados-carousel {
position: relative;
z-index: 1;
overflow: hidden;
padding: 0 var(--spacing-12);
}

.resultados-carousel-track {
display: flex;
gap: var(--spacing-6);
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Result Card Base */
.resultado-card {
flex: 0 0 calc(33.333% - var(--spacing-4));
min-width: 300px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-2xl);
overflow: hidden;
transition: all var(--transition-normal);
}

.resultado-card:hover {
border-color: var(--color-primary-20);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(157, 255, 117, 0.1);
}

/* Print Card */
.resultado-card--print .resultado-card-image {
aspect-ratio: 4/3;
background: linear-gradient(135deg, rgba(157, 255, 117, 0.05) 0%, rgba(157, 255, 117, 0.02) 100%);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
}

.resultado-card--print .resultado-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.resultado-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-3);
color: var(--color-gray-500);
}

.resultado-placeholder svg {
opacity: 0.5;
}

.resultado-placeholder span {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}

.resultado-card--print .resultado-card-content {
padding: var(--spacing-6);
}

.resultado-tag {
display: inline-block;
padding: var(--spacing-1) var(--spacing-3);
background: var(--color-primary-20);
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
margin-bottom: var(--spacing-3);
}

.resultado-description {
font-size: var(--font-size-sm);
color: var(--color-gray-400);
line-height: var(--line-height-relaxed);
margin: 0;
}

/* Depoimento Card */
.resultado-card--depoimento {
display: flex;
flex-direction: column;
padding: var(--spacing-6);
background: linear-gradient(135deg, rgba(157, 255, 117, 0.08) 0%, rgba(157, 255, 117, 0.02) 100%);
}

.resultado-card-quote {
margin-bottom: var(--spacing-4);
}

.quote-icon {
color: var(--color-primary);
opacity: 0.6;
}

.resultado-card--depoimento .resultado-card-content {
flex: 1;
display: flex;
flex-direction: column;
}

.resultado-testimonial {
font-size: var(--font-size-base);
color: var(--color-gray-300);
line-height: var(--line-height-relaxed);
font-style: italic;
margin: 0 0 auto 0;
padding-bottom: var(--spacing-6);
}

.resultado-author {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding-top: var(--spacing-4);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.resultado-author-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(157, 255, 117, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
overflow: hidden;
}

.resultado-author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.resultado-author-info {
display: flex;
flex-direction: column;
gap: 2px;
}

.resultado-author-name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
}

.resultado-author-store {
font-size: var(--font-size-xs);
color: var(--color-gray-500);
}

/* Carousel Arrows */
.resultados-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-normal);
z-index: 10;
}

.resultados-carousel-arrow:hover {
background: var(--color-primary-20);
border-color: var(--color-primary);
color: var(--color-primary);
}

.resultados-carousel-arrow:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

.resultados-carousel-arrow--prev {
left: 0;
}

.resultados-carousel-arrow--next {
right: 0;
}

.resultados-carousel-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}

/* Carousel Dots */
.resultados-carousel-dots {
display: flex;
justify-content: center;
gap: var(--spacing-2);
margin-top: var(--spacing-8);
}

.resultados-carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: none;
cursor: pointer;
transition: all var(--transition-normal);
padding: 0;
}

.resultados-carousel-dot:hover {
background: rgba(255, 255, 255, 0.4);
}

.resultados-carousel-dot.active {
background: var(--color-primary);
width: 28px;
border-radius: 5px;
}

.resultados-carousel-dot:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

/* CTA */
.resultados-cta {
display: flex;
justify-content: center;
margin-top: var(--spacing-12);
position: relative;
z-index: 1;
}

/* Responsive */
@media (max-width: 1024px) {
.resultado-card {
  flex: 0 0 calc(50% - var(--spacing-3));
}

.resultados-carousel {
  padding: 0 var(--spacing-10);
}
}

@media (max-width: 768px) {
.section.section-resultados {
  padding: var(--spacing-16) 0;
}


.resultados-header {
  margin-bottom: var(--spacing-10);
}

.resultado-card {
  flex: 0 0 calc(100% - var(--spacing-2));
  min-width: 280px;
}

.resultados-carousel {
  padding: 0 var(--spacing-8);
}

.resultados-carousel-arrow {
  width: 40px;
  height: 40px;
}

.resultado-card--print .resultado-card-image {
  aspect-ratio: 16/9;
}
}

@media (max-width: 480px) {
.resultados-title {
  font-size: 1.5rem;
}

.resultados-subtitle {
  font-size: var(--font-size-base);
}

.resultado-card--depoimento {
  padding: var(--spacing-4);
}

.resultado-card--print .resultado-card-content {
  padding: var(--spacing-4);
}

.resultados-carousel {
  padding: 0 var(--spacing-6);
}

.resultados-carousel-arrow {
  width: 36px;
  height: 36px;
}

.resultados-carousel-arrow svg {
  width: 18px;
  height: 18px;
}
}

/* ===== VIDEO DESTAQUE ===== */
.resultados-video-destaque {
position: relative;
z-index: 1;
max-width: 400px;
margin: 0 auto var(--spacing-12);
}

.video-wrapper {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(157, 255, 117, 0.1);
}

/* Video Card in Carousel */
.depoimento-card--video {
position: relative;
}

.depoimento-card-video {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: var(--radius-xl);
background: #000;
/* Ensure controls stay within this container */
isolation: isolate;
}

.depoimento-card-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.depoimento-card-image,
.depoimento-card-video {
aspect-ratio: 9/16;
}

.depoimento-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

/* Custom Video Controls */
.video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-4);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
opacity: 1;
visibility: visible;
transition: opacity var(--transition-normal);
z-index: 10;
pointer-events: auto;
}

/* Ensure controls are always visible on mobile */
@media (max-width: 768px) {
  .video-controls {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }
}

/* Hide native video controls */
.depoimento-video::-webkit-media-controls {
  display: none !important;
}

.depoimento-video::-webkit-media-controls-enclosure {
  display: none !important;
}

.depoimento-video::-webkit-media-controls-panel {
  display: none !important;
}

.video-control-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(157, 255, 117, 0.2);
color: var(--color-primary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}

.video-control-btn:hover {
background: var(--color-primary);
color: var(--black-100);
}

.video-control-btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

/* Progress Bar */
.video-progress-wrapper {
flex: 1;
padding: var(--spacing-2) 0;
cursor: pointer;
}

.video-progress {
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
overflow: hidden;
position: relative;
}

.video-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary), #d4ffbf);
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}

.video-progress-wrapper:hover .video-progress {
height: 6px;
}

/* Play Overlay */
.video-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--black-100);
transition: all var(--transition-normal);
box-shadow: 0 0 40px rgba(157, 255, 117, 0.5);
z-index: 2;
}

.video-play-overlay:hover {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 0 60px rgba(157, 255, 117, 0.7);
}

.video-play-overlay:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
}

/* ===== DEPOIMENTOS CAROUSEL ===== */
.depoimentos-carousel {
position: relative;
z-index: 1;
overflow: hidden;
padding: 0 var(--spacing-16);
margin-bottom: var(--spacing-8);
}

.depoimentos-carousel-track {
display: flex;
gap: var(--spacing-4);
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.depoimento-card {
flex: 0 0 calc(33.333% - var(--spacing-3));
min-width: 200px;
aspect-ratio: 9/16;
background: var(--color-black);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
overflow: hidden;
transition: all var(--transition-normal);
}

.depoimento-card:hover {
border-color: var(--color-primary-20);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(157, 255, 117, 0.1);
}

.depoimento-card-image {
width: 100%;
height: 100%;
overflow: hidden;
}

.depoimento-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--transition-slow);
}

.depoimento-card:hover .depoimento-card-image img {
transform: scale(1.05);
}

/* Carousel Arrows */
.depoimentos-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(157, 255, 117, 0.1);
border: 1px solid var(--color-primary-20);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-normal);
z-index: 10;
}

.depoimentos-carousel-arrow:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--black-100);
}

.depoimentos-carousel-arrow:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

.depoimentos-carousel-arrow--prev {
left: 0;
}

.depoimentos-carousel-arrow--next {
right: 0;
}

.depoimentos-carousel-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}

/* Carousel Dots */
.depoimentos-carousel-dots {
display: flex;
justify-content: center;
gap: var(--spacing-2);
margin-top: var(--spacing-6);
}

.depoimentos-carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(157, 255, 117, 0.2);
border: none;
cursor: pointer;
transition: all var(--transition-normal);
padding: 0;
}

.depoimentos-carousel-dot:hover {
background: rgba(157, 255, 117, 0.4);
}

.depoimentos-carousel-dot.active {
background: var(--color-primary);
width: 28px;
border-radius: 5px;
}

.depoimentos-carousel-dot:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

/* CTA Button Resultados */
.resultados-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-3);
padding: var(--spacing-4) var(--spacing-8);
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
color: var(--black-100);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
text-decoration: none;
border-radius: var(--radius-full);
transition: all var(--transition-normal);
box-shadow: 0 0 20px rgba(157, 255, 117, 0.3);
}

.resultados-cta-btn:hover {
background: linear-gradient(135deg, var(--color-primary) 0%, #e8ffe0 100%);
box-shadow: 0 0 40px rgba(157, 255, 117, 0.5);
transform: translateY(-2px);
}

.resultados-cta-btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
}

/* Responsive Video e Carousel */
@media (max-width: 1024px) {
.depoimento-card {
  flex: 0 0 calc(33.333% - var(--spacing-3));
}

.depoimentos-carousel {
  padding: 0 var(--spacing-14);
}

.video-control-btn {
  width: 36px;
  height: 36px;
}
}

@media (max-width: 768px) {
.resultados-video-destaque {
  margin-bottom: var(--spacing-8);
}

.depoimento-card {
  flex: 0 0 calc(50% - var(--spacing-2));
  min-width: 150px;
}

.depoimentos-carousel {
  padding: 0 var(--spacing-12);
}

.depoimentos-carousel-arrow {
  width: 40px;
  height: 40px;
}

.video-play-overlay {
  width: 70px;
  height: 70px;
}

.video-play-overlay svg {
  width: 40px;
  height: 40px;
}

.resultados-cta-btn {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--font-size-sm);
}

.video-controls {
  padding: var(--spacing-3);
  gap: var(--spacing-2);
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.video-control-btn {
  width: 32px;
  height: 32px;
}

.video-control-btn svg {
  width: 16px;
  height: 16px;
}
}

@media (max-width: 480px) {
.depoimento-card {
  flex: 0 0 calc(100% - var(--spacing-2));
  min-width: 250px;
}

.depoimentos-carousel {
  padding: 0 var(--spacing-10);
}

.depoimentos-carousel-arrow {
  width: 36px;
  height: 36px;
}

.video-play-overlay {
  width: 56px;
  height: 56px;
}

.video-play-overlay svg {
  width: 32px;
  height: 32px;
}

.video-controls {
  padding: var(--spacing-2);
  gap: var(--spacing-1);
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}

.video-control-btn {
  width: 28px;
  height: 28px;
}

.video-control-btn svg {
  width: 14px;
  height: 14px;
}

.video-progress-wrapper {
  padding: var(--spacing-1) 0;
}
}

/* ===== FOOTER ===== */
.footer {
background-color: var(--color-black);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--spacing-12) 0 var(--spacing-8);
}

.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: var(--spacing-10);
padding-bottom: var(--spacing-8);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
align-items: flex-start;
text-align: left;
}

.footer-col-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-white);
margin: 0 0 var(--spacing-2) 0;
}

.footer-brand {
max-width: 350px;
}

.footer-logo {
height: 40px;
width: auto;
object-fit: contain;
}

.footer-tagline {
font-size: var(--font-size-sm);
color: var(--color-gray-400);
line-height: var(--line-height-relaxed);
margin: 0;
}

.footer-nav {
display: flex;
flex-direction: column;
}

.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}

.footer-link {
font-size: var(--font-size-sm);
color: var(--color-gray-400);
text-decoration: none;
transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus {
color: var(--color-primary);
}

.footer-contact {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
}

.footer-contact-item {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: var(--font-size-sm);
color: var(--color-gray-400);
}

.footer-contact-item svg {
color: var(--color-primary);
flex-shrink: 0;
}

.footer-contact-item a {
color: var(--color-gray-400);
text-decoration: none;
transition: color var(--transition-fast);
}

.footer-contact-item a:hover,
.footer-contact-item a:focus {
color: var(--color-primary);
}

.footer-bottom {
padding-top: var(--spacing-6);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-4);
}

.footer-bottom-logo-wrapper {
position: relative;
width: 100%;
}

.footer-bottom-logo-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to bottom, var(--color-black), transparent);
pointer-events: none;
z-index: 1;
}

.footer-bottom-logo {
width: 100%;
height: auto;
display: block;
filter: saturate(0);
opacity: 0.03;
}

.footer-copyright {
font-size: var(--font-size-sm);
color: var(--color-gray-500);
margin: 0;
}

/* Footer Responsive */
@media (max-width: 768px) {
.footer {
  padding: var(--spacing-10) 0 var(--spacing-6);
}

.footer-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

.footer-brand {
  grid-column: 1 / -1;
  max-width: 100%;
}
}

@media (max-width: 480px) {
.footer-grid {
  grid-template-columns: 1fr;
}

.footer-brand {
  text-align: left;
  align-items: flex-start;
}
}


/* ===== QUEM SOMOS / CTA SECTION ===== */
.section.section-quem-somos {
position: relative;
padding: var(--spacing-24) 0;
background-color: var(--color-black);
overflow: hidden;
}

.section-quem-somos::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../images/bg-grid.png');
background-position: center;
background-repeat: repeat;
background-size: auto;
opacity: 0.5;
pointer-events: none;
}

.section-quem-somos::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center bottom, rgba(157, 255, 117, 0.08) 0%, transparent 60%);
pointer-events: none;
}

.section-quem-somos .container {
position: relative;
z-index: 1;
}

/* CTA Wrapper */
.cta-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-12);
align-items: center;
border: 1px solid rgba(157, 255, 117, 0.15);
border-radius: var(--radius-2xl);
backdrop-filter: blur(20px);
overflow: hidden;
}

/* CTA Content */
.cta-content-wrapper {
display: flex;
flex-direction: column;
padding: 40px 20px 40px 40px;
}

.cta-content-holder {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}

.quem-somos-header-wrapper {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}

.quem-somos-label {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
padding: var(--spacing-2) var(--spacing-4);
background: rgba(157, 255, 117, 0.1);
border: 1px solid rgba(157, 255, 117, 0.2);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
width: fit-content;
text-transform: uppercase;
letter-spacing: 1px;
}

.quem-somos-title {
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: var(--font-weight-extrabold);
line-height: var(--line-height-tight);
color: var(--color-white);
margin: 0;
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-white) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.quem-somos-title .text-highlight {
color: var(--color-primary);
}

.quem-somos-subtitle {
font-size: var(--font-size-xl);
color: var(--color-gray-300);
line-height: var(--line-height-tight);
margin: 0;
max-width: 540px;
}

.quem-somos-text {
font-size: var(--font-size-base);
color: var(--color-gray-400);
line-height: var(--line-height-relaxed);
margin: 0;
max-width: 540px;
}

.quem-somos-subtitle .text-highlight,
.quem-somos-text .text-highlight {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}

/* CTA Buttons */
.cta-button-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-4);
}

.cta-dark-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-3);
padding: var(--spacing-4) var(--spacing-6);
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, #d4ffbf 100%);
border: none;
border-radius: var(--radius-lg);
color: var(--black-100);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
text-decoration: none;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
position: relative;
overflow: hidden;
}

.cta-dark-button:hover {
background: linear-gradient(135deg, var(--color-primary) 0%, #e8ffe0 100%);
box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5);
transform: translateY(-2px);
}

.cta-dark-button:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}

.cta-dark-button--secondary {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--color-white);
box-shadow: none;
}

.cta-dark-button--secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-primary);
box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.2);
}

.cta-button-text-holder {
display: flex;
align-items: center;
}

.cta-button-text {
white-space: nowrap;
}

.cta-button-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

/* CTA Card / Images */
.quem-somos-visual {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.quem-somos-image-wrapper {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

.quem-somos-image {
width: 100%;
max-width: 600px;
height: auto;
object-fit: contain;
object-position: center;
border-radius: var(--radius-xl);
transition: transform var(--transition-normal);
}

.quem-somos-image-wrapper:hover .quem-somos-image {
transform: scale(1.02);
}

/* Phones Grid Behind Image - Parallax on Scroll */
.cta-phones-holder {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
-webkit-mask-image: linear-gradient(to right, #0000 10%, #000 65%);
mask-image: linear-gradient(to right, #0000 10%, #000 65%);
}

.cta-phones-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
width: 180%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-38deg);
}

.cta-phones-column {
display: flex;
flex-direction: column;
gap: 20px;
will-change: transform;
}

.cta-phones-column--up {
/* Moves up on scroll - controlled by JS */
transform: translateY(0);
}

.cta-phones-column--down {
/* Moves down on scroll - controlled by JS */
transform: translateY(0);
}

.cta-phone-item {
flex-shrink: 0;
}

.cta-phone-img {
width: 100%;
height: auto;
border-radius: var(--radius-xl);
object-fit: cover;
}

.cta-side-images-holder {
width: 100%;
height: 100%;
}

.cta-grid-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-4);
height: 100%;
}

.cta-side-images-column {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}

.cta-side-images-column--up {
animation: scrollUp 20s linear infinite;
}

.cta-side-images-column--down {
animation: scrollDown 20s linear infinite;
}

@keyframes scrollUp {
0% {
  transform: translateY(0);
}
100% {
  transform: translateY(-50%);
}
}

@keyframes scrollDown {
0% {
  transform: translateY(-50%);
}
100% {
  transform: translateY(0);
}
}

.cta-image-holder {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-6);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
}

.cta-image-holder:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(157, 255, 117, 0.2);
}

.cta-client-image {
width: 100%;
max-width: 120px;
height: auto;
object-fit: contain;
filter: grayscale(100%) brightness(0.8);
opacity: 0.7;
transition: all var(--transition-normal);
}

.cta-image-holder:hover .cta-client-image {
filter: grayscale(0%) brightness(1);
opacity: 1;
}

/* Quem Somos Responsive */
@media (max-width: 1024px) {
.cta-wrapper {
  gap: var(--spacing-8);
}

.cta-content-wrapper {
  padding: var(--spacing-8);
}

.hero-highlight{
  width: 49%;
  bottom: 23px;
}
.quem-somos-title {
  font-size: clamp(2.25rem, 2.5vw, 2rem);
}

.quem-somos-subtitle {
  font-size: var(--font-size-base);
}

.cta-card-image-holder {
  height: 350px;
}
}

@media (max-width: 768px) {
.section.section-quem-somos {
  padding: var(--spacing-16) 0;
}

.cta-wrapper {
  grid-template-columns: 1fr;
  gap: var(--spacing-10);
  text-align: center;
}

.cta-phones-holder {
  -webkit-mask-image: linear-gradient(to bottom, #0000 0%, #000 50%);
  mask-image: linear-gradient(to bottom, #0000 0%, #000 50%);
}

.cta-content-wrapper {
  padding: var(--spacing-8);
}

.quem-somos-header-wrapper {
  align-items: center;
}

.quem-somos-subtitle {
  max-width: 100%;
}

.cta-button-wrapper {
  justify-content: center;
  flex-direction: row;
  align-items: center;
}

.cta-dark-button {
  width: auto;
  max-width: none;
}

.cta-card-wrapper {
  order: -1;
}

.quem-somos-visual {
  order: -1;
  min-height: 300px;
}

.quem-somos-image-wrapper {
  display: flex;
}

.quem-somos-image {
  max-width: 100%;
}

.cta-card-image-holder {
  height: 280px;
  max-width: 100%;
}
}

@media (max-width: 480px) {
.cta-content-wrapper {
  padding: var(--spacing-6);
}

.cta-dark-button {
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
}

.cta-card-image-holder {
  height: 220px;
}

.cta-image-holder {
  padding: var(--spacing-4);
}

.cta-client-image {
  max-width: 80px;
}
}


/* Form Submit Button Loading Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.form-submit-btn .animate-spin {
  animation: spin 1s linear infinite;
}

.form-submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}