/* ============================================
   HOME PAGE - DESIGN PREMIUM NOTA 10
   ============================================ */

/* ===== HERO SECTION PREMIUM ===== */
.heroSection {
    background: var(--gradient-hero);
    padding: var(--space-20) 0 var(--space-16);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Estrela Decorativa */
.decorativeStar {
    position: absolute;
    top: -50px;
    right: -80px;
    width: 220px;
    height: auto;
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)) drop-shadow(0 5px 15px rgba(219, 39, 119, 0.4));
    animation: float 6s ease-in-out infinite;
    opacity: 0.7;
}

.decorativeStarLeft {
    position: absolute;
    bottom: 70px;
    left: -150px;
    width: 320px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3)) drop-shadow(0 5px 15px rgba(219, 39, 119, 0.4));
    animation: float 6s ease-in-out infinite;
    opacity: 0.7;
}

@media (max-width: 768px) {

    .decorativeStar,
    .decorativeStarLeft {
        display: none;
    }
}

/* Floating Orbs */
.floatingOrb {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.15) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: floatSlow 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Gradient Mesh Background */
.gradientMesh {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-mesh-2);
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

.heroSection::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    transform: rotate(45deg);
    z-index: 0;
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
}

.heroSection::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: float 25s ease-in-out infinite reverse;
}

.heroTitle {
    font-family: var(--font-family-display);
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--space-12);
    margin-top: 0;
    position: relative;
    z-index: 1;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeInDown 0.8s ease-out, gradientShift 5s ease infinite;
}

@media (max-width: 600px) {
    .heroTitle {
        margin-top: 0px;
    }
}


.heroGrid {
    display: grid;
    grid-template-columns: 1.8fr 1.8fr 0.5fr;
    gap: var(--space-8);
    align-items: center;
    position: relative;
    z-index: 1;
    animation: fadeIn var(--transition-slow) ease-out 0.2s both;
    width: 100%;
    max-width: 100%;
}

.heroTextContent {
    text-align: left;
    max-width: 100%;
    animation: slideUp var(--transition-slow) ease-out 0.3s both;
}

.heroDescription {
    font-size: clamp(1.125rem, 2vw, 1.4rem);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
}

.heroButton {
    margin-top: var(--space-10);
    padding: var(--space-5) var(--space-12);
    font-size: var(--font-size-xl);
    font-family: var(--font-family-display);
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    color: var(--text-white);
    font-weight: var(--font-weight-extrabold);
    box-shadow: var(--shadow-primary-xl);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
    transition: all var(--transition-smooth);
    transform-style: preserve-3d;
    border: 3px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.heroButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left var(--transition-slower);
}

.heroButton::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: scale(0);
    transition: transform var(--transition-smooth);
}

.heroButton:hover {
    transform: translateY(-6px) translateZ(20px) scale(1.05);
    box-shadow: var(--shadow-primary-xl), var(--shadow-glow-lg);
    border-color: rgba(255, 255, 255, 0.4);
}

.heroButton:hover::before {
    left: 100%;
}

.heroButton:hover::after {
    transform: scale(1);
}

.heroButton:active {
    transform: translateY(-2px) translateZ(10px) scale(1.02);
}

.heroButtonIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.heroImageWrapper {
    position: relative;
    z-index: 1;
    animation: slideUp var(--transition-slow) ease-out 0.4s both;
}

.heroCarImage {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.2));
    animation: float 6s ease-in-out infinite;
    transform-origin: center;
}

.heroStatsContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    animation: slideUp var(--transition-slow) ease-out 0.5s both;
}

.heroStatsBadge {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: var(--glass-blur-xl);
    -webkit-backdrop-filter: var(--glass-blur-xl);
    padding: var(--space-4);
    border-radius: var(--radius-2xl);
    box-shadow: none;
    min-width: 280px;
    width: 100%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    animation: scaleInBounce 0.8s ease-out 0.8s backwards;
}

.heroStatsBadge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-smooth);
    animation: gradientShift 5s ease infinite;
}

.heroStatsBadge:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: none;
    border-color: var(--primary-color);
}

.heroStatsBadge:hover::before {
    transform: scaleX(1);
}

.badgePulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.1) 0%, transparent 70%);
    animation: ripple 3s ease-out infinite;
    pointer-events: none;
}

.badgeTitle {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-3);
    line-height: var(--line-height-tight);
    animation: gradientShift 5s ease infinite;
    position: relative;
    z-index: 1;
}

.badgeSubtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-5);
    font-weight: var(--font-weight-semibold);
    position: relative;
    z-index: 1;
}

.badgeSparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.sparkle {
    position: absolute;
    font-size: var(--font-size-xl);
    animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
    opacity: 0.6;
}

.sparkle:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    top: 20%;
    right: 15%;
    animation-delay: 1s;
}

.sparkle:nth-child(3) {
    bottom: 15%;
    left: 20%;
    animation-delay: 2s;
}

.badgeAvatars {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid transparent;
    background: var(--gradient-primary) padding-box, var(--gradient-holographic) border-box;
    margin-left: -14px;
    object-fit: cover;
    transition: all var(--transition-smooth);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
}

.avatar:first-child {
    margin-left: 0;
}

.avatar:hover {
    transform: scale(1.2) translateY(-6px);
    z-index: 10;
    box-shadow: var(--shadow-2xl), var(--shadow-glow);
    animation: pulse 1s ease-in-out;
}

.avatarPlus {
    background: var(--gradient-primary);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
    cursor: pointer;
    animation: pulseGlow 2s ease-in-out infinite;
}

.avatarPlus span {
    animation: wiggle 2s ease-in-out infinite;
}

/* ===== PARTNERS SECTION ===== */
.partnersSection {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    width: 100%;
    position: relative;
    overflow-x: hidden;
}

.partnersTitle {
    font-family: var(--font-family-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--font-weight-black);
    text-align: center;
    margin-bottom: var(--space-8);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
}

.partnersTitleText {
    color: var(--primary-color);
    margin-top: 10px;
}

.partnersTitleHighlight {
    color: var(--primary-color);
    position: relative;
}

.partnersSliderWrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-left: calc(-1 * var(--space-6));
    margin-right: calc(-1 * var(--space-6));
    padding: var(--space-6) 0 var(--space-4) 0;
    min-height: 140px;
    background: linear-gradient(180deg, rgba(253, 242, 248, 0.6) 0%, rgba(255, 255, 255, 0.9) 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 5%, black 10%, black 90%, rgba(0, 0, 0, 0.3) 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 5%, black 10%, black 90%, rgba(0, 0, 0, 0.3) 95%, transparent 100%);
}

.partnersSlider {
    display: flex;
    gap: var(--space-16);
    padding: var(--space-4) 0;
    animation: scroll-infinite 60s linear infinite;
    width: fit-content;
    animation-play-state: running !important;
    will-change: transform;
    /* Garantir que a animação não seja pausada */
    pointer-events: none;
    align-items: center;
}

/* Permitir interação nos logos individuais */
.partnersSlider>* {
    pointer-events: auto;
}

@keyframes scroll-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.partnerLogo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    height: 120px;
}

.partnerLogoInner {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-smooth);
    backdrop-filter: var(--glass-blur-lg);
    -webkit-backdrop-filter: var(--glass-blur-lg);
    border: 2px solid rgba(255, 255, 255, 0.7);
    overflow: hidden;
    transform-style: preserve-3d;
}

.partnerLogoInner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transition: left var(--transition-slower);
}

.partnerSpotlight {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.1) 0%, transparent 70%);
    transition: transform var(--transition-smooth);
    pointer-events: none;
}

.partnerLogoInner:hover {
    transform: translateY(-16px) scale(1.08) rotateX(5deg);
    box-shadow: var(--shadow-3xl), var(--shadow-primary-lg);
    background: rgba(255, 255, 255, 1);
    border-color: var(--primary-color);
}

.partnerLogoInner:hover::before {
    left: 100%;
}

.partnerLogoInner:hover .partnerSpotlight {
    transform: translate(-50%, -50%) scale(1);
}

.partnerLogo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(40%) brightness(0.9);
    transition: all var(--transition-smooth);
    position: relative;
    z-index: 1;
}

.partnerLogoLarge img {
    max-width: 140%;
    max-height: 140%;
    object-fit: contain;
}

/* Garantir que imagens grandes não ultrapassem os limites do container */
.partnerLogoLarge .partnerLogoInner {
    max-height: 100%;
}

.partnerLogoInner:hover img {
    filter: grayscale(0%) brightness(1.1) contrast(1.1);
    transform: scale(1.15) translateZ(10px);
}

.partnerLogoLarge .partnerLogoInner:hover img {
    transform: scale(1.0) translateZ(10px);
}

/* ===== SECTIONS GLOBAIS PREMIUM ===== */
.homeContainer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    padding-top: 50px;
    /* Compensar header fixo */
}

.section {
    padding: var(--space-24) 0;
    position: relative;
}

.sectionTitle {
    font-family: var(--font-family-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: var(--font-weight-black);
    text-align: center;
    margin-bottom: var(--space-20);
    position: relative;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

.sectionTitleMain {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.sectionTitleHighlight {
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 5s ease infinite;
    position: relative;
}

.sectionTitleHighlight::after {
    content: '';
    position: absolute;
    bottom: -var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-primary);
}

.card {
    background: var(--bg-white);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-smooth);
    border: 2px solid rgba(219, 39, 119, 0.08);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-smooth);
}

.card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-3xl), var(--shadow-primary);
    border-color: var(--primary-color);
}

.card:hover::before {
    transform: scaleX(1);
}

/* Tilt Card 3D */
.tiltCard {
    will-change: transform;
    transform-style: preserve-3d;
}

.cardVisible {
    animation: scaleInBounce 0.8s ease-out backwards;
}

/* Service Card Styles */
.serviceIconWrapper {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-6);
    transform: translateZ(30px);
}

.serviceIconBg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    background: var(--gradient-aurora);
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.6;
    animation: pulse 3s ease-in-out infinite;
}

.serviceIcon {
    font-size: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: var(--gradient-mesh-1), var(--bg-white);
    border-radius: 50%;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-smooth);
    position: relative;
    z-index: 1;
    animation: float 6s ease-in-out infinite;
    border: 3px solid rgba(219, 39, 119, 0.1);
}

.serviceIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.tiltCard:hover .serviceIcon {
    transform: scale(1.15) rotateY(10deg);
    box-shadow: var(--shadow-2xl), var(--shadow-glow);
    border-color: var(--primary-color);
    animation: bounce 0.6s ease-in-out;
}

.serviceTitle {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
    transform: translateZ(20px);
    position: relative;
}

.serviceDescription {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-lg);
    transform: translateZ(10px);
}

.serviceGlow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: radial-gradient(circle at bottom, rgba(219, 39, 119, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

.tiltCard:hover .serviceGlow {
    opacity: 1;
}

/* ===== PRODUCTS SECTION PREMIUM ===== */
.productSection {
    position: relative;
    z-index: 1;
}

.productSectionVisible {
    animation: fadeInUp 0.8s ease-out;
}

.productContent {
    position: relative;
}

.productBadge {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: var(--gradient-primary);
    color: var(--text-white);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-primary);
    animation: pulse 2s ease-in-out infinite;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.productTitle {
    font-family: var(--font-family-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-black);
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-6);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    animation: gradientShift 5s ease infinite;
}

.productDescription {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-8);
}

.productDescription p {
    margin-bottom: var(--space-4);
}

.productButton {
    padding: var(--space-4) var(--space-8);
    background: var(--gradient-primary);
    color: var(--text-white);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    transition: all var(--transition-smooth);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.productButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left var(--transition-slower);
}

.productButton:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-primary-xl);
    border-color: rgba(255, 255, 255, 0.3);
}

.productButton:hover::before {
    left: 100%;
}

.productButton svg {
    transition: transform var(--transition-smooth);
}

.productButton:hover svg {
    transform: translateX(4px);
}

.productImageContainer {
    position: relative;
    perspective: var(--perspective-xl);
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.productImage {
    width: 100%;
    height: 100%;
    min-height: 400px;
    object-fit: cover;
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-2xl);
    transition: all var(--transition-smooth);
    will-change: transform;
}

.productImageContainer:hover .productImage {
    box-shadow: var(--shadow-3xl), var(--shadow-primary-lg);
}

/* ===== PHILANTHROPY SECTION PREMIUM ===== */
.philanthropySubtitle {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}

.badgesContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-16);
    max-width: 900px;
}

.philanthropyBadge {
    background: var(--gradient-primary);
    color: var(--text-white);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-primary);
    transition: all var(--transition-smooth);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
    animation: scaleIn 0.6s ease-out backwards;
}

.philanthropyBadge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-holographic);
    opacity: 0;
    transition: opacity var(--transition-smooth);
}

.philanthropyBadge:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: var(--shadow-primary-xl), var(--shadow-glow);
    border-color: rgba(255, 255, 255, 0.4);
}

.philanthropyBadge:hover::before {
    opacity: 1;
}

.badgeIcon {
    font-size: var(--font-size-xl);
    animation: bounce 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.badgeText {
    position: relative;
    z-index: 1;
}

.badgeRipple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    border-radius: var(--radius-full);
    animation: ripple 0.6s ease-out;
}

.philanthropyImageContainer {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-16);
}

.philanthropyImageWrapper {
    position: relative;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: var(--glass-blur-xl);
    -webkit-backdrop-filter: var(--glass-blur-xl);
    border-radius: 50%;
    box-shadow: var(--shadow-3xl);
    border: 5px solid rgba(255, 255, 255, 0.9);
    display: inline-block;
    transition: all var(--transition-smooth);
    animation: scaleInBounce 0.8s ease-out 0.3s backwards;
}

.philanthropyImageWrapper:hover {
    transform: scale(1.05) rotateZ(-5deg);
    box-shadow: var(--shadow-3xl), var(--shadow-primary-lg);
    border-color: var(--primary-color);
}

.philanthropyImage {
    max-width: 400px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    transition: all var(--transition-smooth);
    display: block;
}

.philanthropyImageContainer:hover .philanthropyImage {
    filter: drop-shadow(0 30px 60px rgba(219, 39, 119, 0.3));
    transform: scale(1.05);
}

.philanthropyImageGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.2) 0%, transparent 70%);
    filter: blur(40px);
    animation: pulse 3s ease-in-out infinite;
    pointer-events: none;
}

.philanthropyImageRing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    border: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: pulseGlow 2s ease-in-out infinite;
    opacity: 0.4;
}

.philanthropyFloatingHeart {
    position: absolute;
    font-size: var(--font-size-3xl);
    animation: floatUp 4s ease-in-out infinite;
    opacity: 0;
}

.philanthropyFloatingHeart:nth-child(4) {
    top: 20%;
    left: 10%;
}

.philanthropyFloatingHeart:nth-child(5) {
    top: 30%;
    right: 15%;
}

.philanthropyFloatingHeart:nth-child(6) {
    bottom: 20%;
    left: 15%;
}

@keyframes floatUp {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-30px);
    }
}

/* ===== COURSES SECTION PREMIUM ===== */
.courseCardContainer {
    flex: 1;
    min-width: 320px;
    min-height: 550px;
}

.courseCardInner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 550px;
}

.courseCardFace {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 550px;
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-2xl);
    border: 2px solid rgba(219, 39, 119, 0.1);
    transition: all var(--transition-smooth);
    overflow: hidden;
    box-sizing: border-box;
}

.courseHighlighted .courseCardFace {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-3xl), var(--shadow-primary-lg);
}

.coursePopularBadge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--text-white);
    color: var(--primary-color);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-black);
    box-shadow: var(--shadow-lg);
    animation: pulseGlow 2s ease-in-out infinite;
    z-index: 10;
    letter-spacing: 0.1em;
}

.courseSparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.courseSparkle {
    position: absolute;
    font-size: var(--font-size-2xl);
    animation: float 3s ease-in-out infinite, pulse 2s ease-in-out infinite;
    opacity: 0.7;
}

.courseSparkle:nth-child(1) {
    top: 15%;
    left: 15%;
    animation-delay: 0s;
}

.courseSparkle:nth-child(2) {
    top: 20%;
    right: 20%;
    animation-delay: 0.7s;
}

.courseSparkle:nth-child(3) {
    bottom: 25%;
    left: 20%;
    animation-delay: 1.4s;
}

.courseSparkle:nth-child(4) {
    bottom: 20%;
    right: 15%;
    animation-delay: 2.1s;
}

.courseImageWrapper {
    margin-bottom: var(--space-5);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 180px;
    flex-shrink: 0;
}

.courseHighlighted .courseImageWrapper {
    background: rgba(255, 255, 255, 0.25);
}

.courseImage {
    max-height: 170px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.courseTitle {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.courseDesc {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.courseButton {
    margin-top: auto;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    width: 100%;
    box-shadow: var(--shadow-primary);
    transition: all var(--transition-smooth);
    position: relative;
    z-index: 2;
    border: 2px solid transparent;
    flex-shrink: 0;
}

.courseButton:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-primary-xl);
}

/* ===== TEAM SECTION PREMIUM ===== */
.teamCard {
    position: relative;
    overflow: visible;
}

.teamAvatarContainer {
    position: relative;
    margin-bottom: var(--space-6);
    transform: translateZ(40px);
}

.teamAvatarGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.2) 0%, transparent 70%);
    filter: blur(40px);
    animation: pulse 3s ease-in-out infinite;
    pointer-events: none;
}

.teamAvatarWrapper {
    position: relative;
    padding: var(--space-2);
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    border-radius: 50%;
    display: inline-block;
    transition: all var(--transition-smooth);
    animation: gradientShift 5s ease infinite;
}

.teamCard:hover .teamAvatarWrapper {
    transform: scale(1.08) rotateZ(5deg);
    box-shadow: var(--shadow-2xl), var(--shadow-glow-lg);
}

.teamAvatar {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid var(--bg-white);
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-smooth);
    display: block;
}

.teamCard:hover .teamAvatar {
    border-color: rgba(255, 255, 255, 0.9);
}

.teamVerifiedBadge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    border: 3px solid var(--bg-white);
    animation: pulseGlow 2s ease-in-out infinite;
}

.teamVerifiedBadge span {
    color: var(--text-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-black);
}

.teamParticles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.1) 20%, transparent 20%),
        radial-gradient(circle, rgba(168, 85, 247, 0.1) 20%, transparent 20%);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    animation: particlesMove 20s linear infinite;
    pointer-events: none;
}

@keyframes particlesMove {
    0% {
        background-position: 0 0, 20px 20px;
    }

    100% {
        background-position: 40px 40px, 60px 60px;
    }
}

.teamName {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
    animation: gradientShift 5s ease infinite;
    transform: translateZ(20px);
}

.teamRole {
    color: var(--primary-color);
    margin-bottom: var(--space-4);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    transform: translateZ(15px);
}

.teamDescription {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-6);
    transform: translateZ(10px);
}

.teamSocialLinks {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
    opacity: 0;
    transform: translateY(20px) translateZ(30px);
    transition: all var(--transition-smooth);
}

.teamSocialVisible {
    opacity: 1;
    transform: translateY(0) translateZ(30px);
}

.teamSocialLink {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-primary);
    transition: all var(--transition-smooth);
    border: 2px solid transparent;
    animation: scaleIn 0.4s ease-out backwards;
}

.teamSocialLink:nth-child(1) {
    animation-delay: 0.1s;
}

.teamSocialLink:nth-child(2) {
    animation-delay: 0.2s;
}

.teamSocialLink:nth-child(3) {
    animation-delay: 0.3s;
}

.teamSocialLink:hover {
    transform: translateY(-6px) scale(1.15);
    box-shadow: var(--shadow-primary-xl), var(--shadow-glow);
    border-color: rgba(255, 255, 255, 0.4);
    animation: bounce 0.6s ease-in-out;
}

/* ===== FOOTER/CONTACT SECTION PREMIUM ===== */
.footerSection {
    position: relative;
}

.footerTopGlow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    box-shadow: 0 0 20px var(--primary-color);
}

.footerFloatingOrb {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: floatSlow 15s ease-in-out infinite;
    pointer-events: none;
}

.contactForm {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: var(--glass-blur-xl);
    -webkit-backdrop-filter: var(--glass-blur-xl);
    padding: var(--space-12);
    border-radius: var(--radius-3xl);
    color: var(--text-primary);
    box-shadow: var(--shadow-3xl);
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.contactFormGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(219, 39, 119, 0.08) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events: none;
}

.contactFormTitle {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-8);
    font-weight: var(--font-weight-black);
    background: var(--gradient-holographic);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 5s ease infinite;
    position: relative;
    z-index: 1;
}

.formContainer {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: relative;
    z-index: 1;
}

.inputGroup {
    position: relative;
}

.formInput {
    padding: var(--space-5) var(--space-16) var(--space-5) var(--space-6);
    border-radius: var(--radius-xl);
    border: 3px solid var(--bg-gray-200);
    width: 100%;
    font-size: var(--font-size-base);
    font-family: inherit;
    transition: all var(--transition-smooth);
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.formTextarea {
    resize: vertical;
    min-height: 120px;
}

.formInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1), var(--shadow-lg);
    background: var(--bg-white);
    transform: translateY(-2px);
}

.formInputFocused {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1), var(--shadow-lg);
}

.inputIcon {
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xl);
    opacity: 0.5;
    transition: all var(--transition-smooth);
    pointer-events: none;
}

.inputIconTextarea {
    top: var(--space-5);
    transform: translateY(0);
}

.formInputFocused+.inputIcon {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    animation: bounce 0.6s ease-in-out;
}

.formButton {
    padding: var(--space-5) var(--space-10);
    border-radius: var(--radius-xl);
    background: var(--gradient-primary);
    color: var(--text-white);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--font-size-lg);
    margin-top: var(--space-4);
    box-shadow: var(--shadow-primary-xl);
    transition: all var(--transition-smooth);
    border: 3px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
}

.formButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left var(--transition-slower);
}

.formButton:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-primary-xl), var(--shadow-glow-lg);
    border-color: rgba(255, 255, 255, 0.3);
}

.formButton:hover::before {
    left: 100%;
}

.formButton:active {
    transform: translateY(-2px) scale(1);
}

.formButton svg {
    transition: transform var(--transition-smooth);
}

.formButton:hover svg {
    transform: translateX(6px);
}

/* ===== RESPONSIVIDADE PREMIUM ===== */

/* Desktop - Primeira dobra */
@media (min-width: 1025px) {
    .heroSection {
        padding: var(--space-20) 0 var(--space-10);
        /* Removido max-height para evitar cortes em telas com altura reduzida */
        min-height: 100vh;
    }

    .heroTitle {
        margin-bottom: var(--space-10);
        font-size: clamp(2.5rem, 7vw, 5rem);
    }

    .heroGrid {
        margin-bottom: var(--space-4);
    }

    .partnersSection {
        margin-top: var(--space-6);
        padding-top: var(--space-4);
    }

    .partnersTitle {
        margin-bottom: var(--space-4);
        font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    }

    .partnersSliderWrapper {
        padding: var(--space-6) 0 var(--space-4) 0;
        margin-left: calc(-1 * var(--space-12));
        margin-right: calc(-1 * var(--space-12));
        min-height: 130px;
    }
}

/* Tablets médios - ajuste de margin para padding do container */
@media (min-width: 640px) and (max-width: 768px) {
    .partnersSliderWrapper {
        margin-left: calc(-1 * var(--space-8));
        margin-right: calc(-1 * var(--space-8));
    }
}

/* Notebooks - ajuste específico (cobre resolução 1124x799) */
@media (min-width: 769px) and (max-width: 1024px) {
    .partnersSliderWrapper {
        margin-left: calc(-1 * var(--space-8));
        margin-right: calc(-1 * var(--space-8));
        padding: var(--space-6) 0 var(--space-4) 0;
        min-height: 120px;
    }

    .partnersSlider {
        padding: var(--space-6) 0;
    }
}

/* Tablets e acima */
@media (max-width: 1024px) {
    .heroGrid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }

    .heroTextContent {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }

    .heroImageWrapper {
        order: 2;
    }

    .heroStatsContent {
        order: 3;
        align-items: center;
    }

    .heroStatsBadge {
        min-width: 100%;
        max-width: 400px;
        padding: var(--space-5);
        text-align: center;
    }

    .badgeTitle {
        font-size: clamp(1.75rem, 4vw, 2.25rem);
        margin-bottom: var(--space-2);
    }

    .badgeSubtitle {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-4);
    }

    .badgeAvatars {
        justify-content: center;
    }

    /* Products Section */
    .productSection {
        flex-direction: column !important;
        text-align: center;
    }

    .productContent {
        order: 2;
    }

    .productImageContainer {
        order: 1;
    }

    /* Team Cards */
    .teamAvatar {
        width: 180px;
        height: 180px;
    }

    /* Course Cards */
    .courseCardContainer {
        height: auto;
        min-height: 500px;
    }
}

/* Mobile Grande */
@media (max-width: 768px) {

    /* Reduzir animações pesadas em mobile */
    .floatingOrb,
    .footerFloatingOrb,
    .gradientMesh {
        display: none;
    }

    /* Hero Section */
    .heroSection {
        min-height: auto;
        padding: var(--space-12) 0 var(--space-16);
        overflow: hidden;
    }

    /* Slider de Parceiros - Simplificado no Mobile */
    .partnersSection {
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        width: calc(100% + var(--space-8));
    }

    .partnersSliderWrapper {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        mask-image: none;
        -webkit-mask-image: none;
        background: transparent;
        padding: var(--space-4) 0 var(--space-3) 0;
        min-height: 110px;
    }

    .heroTitle {
        margin-bottom: var(--space-10);
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .heroGrid {
        margin-top: var(--space-8);
        gap: var(--space-8);
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
    }

    .heroTextContent {
        text-align: center;
        order: 1;
        padding: 0 var(--space-4);
    }

    .heroButton {
        width: 100%;
        justify-content: center;
        padding: var(--space-4) var(--space-6);
        margin-top: var(--space-6);
        /* Reduzir sombra em mobile se necessário */
        box-shadow: 0 10px 25px -5px rgba(219, 39, 119, 0.3);
    }

    .heroImageWrapper {
        max-width: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 var(--space-4);
        overflow: visible;
        order: 2;
        margin: var(--space-4) auto;
    }

    .heroCarImage {
        animation: none;
        max-width: 100%;
        width: 100%;
        max-height: 220px;
        height: auto;
        object-fit: contain;
        object-position: center;
        filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
        display: block;
        margin: 0 auto;
    }

    .heroStatsContent {
        order: 3;
        width: 100%;
        align-items: center;
        padding: 0 var(--space-2);
    }

    /* Partners Section */
    .partnersSlider {
        gap: var(--space-8) !important;
        animation: scroll-infinite 40s linear infinite !important;
        animation-play-state: running !important;
        width: fit-content !important;
        will-change: transform !important;
        pointer-events: none !important;
        padding: var(--space-6) 0 !important;
    }

    .partnersSlider>* {
        pointer-events: auto !important;
    }

    .partnerLogo {
        min-width: 180px !important;
        width: 180px !important;
        height: 100px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    .partnerLogoLarge {
        min-width: 180px !important;
        width: 180px !important;
        height: 100px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    .partnerLogoLarge .partnerLogoInner {
        padding: var(--space-8);
    }

    .partnerLogo .partnerLogoInner {
        padding: var(--space-5);
    }

    .partnerLogo img {
        max-width: 110%;
        max-height: 110%;
        width: auto;
        height: auto;
        min-width: 70px;
        min-height: 35px;
    }

    .partnerLogoLarge img {
        max-width: 120%;
        max-height: 120%;
        width: auto;
        height: auto;
    }

    /* Sections */
    .section {
        padding: var(--space-16) 0;
    }

    .sectionTitle {
        margin-bottom: var(--space-12);
    }

    /* Service Cards - desabilitar tilt em mobile */
    .tiltCard {
        transform: none !important;
    }

    .serviceIcon {
        font-size: 4rem;
        animation: none;
    }

    /* Product Section */
    .productImageWrapper {
        transform: none !important;
    }

    .productImage {
        max-height: 350px;
    }

    /* Philanthropy */
    .philanthropyImage {
        max-width: 220px;
    }

    .philanthropyBadge {
        font-size: var(--font-size-sm);
        padding: var(--space-3) var(--space-4);
    }

    /* Courses */
    .courseCardContainer {
        min-height: 450px;
    }

    .courseCardContainer:hover .courseCardInner {
        transform: none;
    }

    /* Team */
    .teamAvatar {
        width: 160px;
        height: 160px;
    }

    .teamCard {
        transform: none !important;
    }

    .teamSocialLinks {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }

    /* Footer/Contact */
    .contactForm {
        padding: var(--space-8);
    }

    .formInput {
        padding: var(--space-4);
    }
}

/* Mobile Pequeno */
@media (max-width: 640px) {

    /* Hero Section */
    .heroSection {
        padding: var(--space-10) 0 var(--space-12);
        overflow-x: hidden;
    }

    /* Slider de Parceiros - Ainda mais simplificado em telas pequenas */
    .partnersSection {
        margin-left: calc(-1 * var(--space-4));
        margin-right: calc(-1 * var(--space-4));
        width: calc(100% + var(--space-8));
    }

    .partnersSliderWrapper {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        mask-image: none;
        -webkit-mask-image: none;
        background: transparent;
        padding: var(--space-4) 0 var(--space-3) 0;
        min-height: 100px;
    }

    .heroTitle {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
    }

    .heroImageWrapper {
        padding: 0 var(--space-2);
        max-width: 100%;
    }

    .heroCarImage {
        max-width: 100%;
        width: 100%;
        max-height: 200px;
        height: auto;
        object-fit: contain;
        object-position: center;
    }

    .heroStatsContent {
        align-items: center;
        padding: 0 var(--space-2);
    }

    .heroStatsBadge {
        padding: var(--space-6);
        min-width: auto;
        max-width: 100%;
        text-align: center;
    }

    .badgeTitle {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: var(--space-2);
        line-height: 1.2;
    }

    .badgeSubtitle {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-4);
    }

    .badgeAvatars {
        justify-content: center;
        margin-top: var(--space-2);
    }

    .avatar {
        width: 44px;
        height: 44px;
        border-width: 3px;
        margin-left: -10px;
    }

    .avatar:first-child {
        margin-left: 0;
    }

    .sparkle {
        font-size: var(--font-size-lg);
        opacity: 0.5;
    }

    /* Partners */
    .partnersSlider {
        gap: var(--space-6) !important;
        animation: scroll-infinite 35s linear infinite !important;
        animation-play-state: running !important;
        width: fit-content !important;
        will-change: transform !important;
        pointer-events: none !important;
        padding: var(--space-4) 0 !important;
    }

    .partnersSlider>* {
        pointer-events: auto !important;
    }

    .partnerLogo {
        min-width: 160px !important;
        width: 160px !important;
        height: 90px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    .partnerLogoLarge {
        min-width: 160px !important;
        width: 160px !important;
        height: 90px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }

    .partnerLogoLarge .partnerLogoInner {
        padding: var(--space-8);
    }

    .partnerLogo .partnerLogoInner {
        padding: var(--space-4);
    }

    .partnerLogo img {
        max-width: 115%;
        max-height: 115%;
        width: auto;
        height: auto;
        min-width: 65px;
        min-height: 32px;
    }

    .partnerLogoLarge img {
        max-width: 130%;
        max-height: 130%;
        width: auto;
        height: auto;
    }

    .partnersTitle {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    /* Sections */
    .section {
        padding: var(--space-12) 0;
    }

    .sectionTitle {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        margin-bottom: var(--space-10);
    }

    /* Service Cards */
    .serviceIconWrapper {
        margin-bottom: var(--space-4);
    }

    .serviceIcon {
        width: 100px;
        height: 100px;
        font-size: 3.5rem;
    }

    .serviceTitle {
        font-size: var(--font-size-xl);
    }

    /* Product */
    .productButton {
        width: 100%;
    }

    .productImageWrapper {
        padding: var(--space-6);
    }

    /* Philanthropy */
    .philanthropyImageContainer {
        margin-bottom: var(--space-10);
    }

    /* Courses */
    .courseTitle {
        font-size: var(--font-size-xl);
    }

    .courseImageWrapper {
        padding: var(--space-3);
    }

    .courseImage {
        height: 140px;
    }

    /* Team */
    .teamAvatar {
        width: 140px;
        height: 140px;
    }

    .teamName {
        font-size: var(--font-size-2xl);
    }

    .teamSocialLink {
        width: 42px;
        height: 42px;
        font-size: var(--font-size-base);
    }

    /* Footer/Contact */
    .contactFormTitle {
        font-size: var(--font-size-xl);
    }

    .formButton {
        width: 100%;
        padding: var(--space-4);
    }
}

/* Mobile Extra Pequeno */
@media (max-width: 480px) {

    /* Desabilitar animações complexas completamente */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Manter apenas animações essenciais */
    .heroButton,
    .productButton,
    .courseButton,
    .formButton,
    .ctaButton {
        animation: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Hero */
    .heroTitle {
        font-size: clamp(1.5rem, 12vw, 2rem);
        margin-bottom: var(--space-8);
    }

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

    .heroButton {
        font-size: var(--font-size-base);
        padding: var(--space-3) var(--space-5);
    }

    .heroImageWrapper {
        max-width: 100%;
        width: 100%;
        padding: 0 var(--space-2);
        margin: var(--space-3) auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .heroCarImage {
        max-width: 100%;
        width: 100%;
        max-height: 180px;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
        margin: 0 auto;
    }

    .heroTitle {
        font-size: clamp(1.75rem, 10vw, 2.25rem);
        line-height: 1.2;
    }

    .heroDescription {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    /* Sections */
    .section {
        padding: var(--space-10) 0;
    }

    /* Cards */
    .card {
        padding: var(--space-6);
    }

    /* Badges e Avatares menores */
    .philanthropyBadge {
        font-size: var(--font-size-xs);
        padding: var(--space-2) var(--space-3);
    }

    .badgeIcon {
        font-size: var(--font-size-lg);
    }
}

/* ===== ESTILOS ADICIONAIS PARA COMPONENTES ===== */

/* Service Icons */
.service-icon {
    transition: transform var(--transition-base);
}

.card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Product Images */
.product-image-wrapper {
    transition: all var(--transition-base);
}

.product-image-wrapper:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-2xl);
}

.product-image-wrapper:hover .product-image {
    transform: scale(1.05);
}

/* Beneficiary Badges */
.beneficiary-badge:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Philanthropy Image */
.philanthropy-image:hover {
    transform: scale(1.05);
}

/* Course Cards */
.course-image-wrapper:hover {
    transform: scale(1.1) rotate(5deg);
}

.course-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

.course-button:active {
    transform: translateY(0);
}

/* Team Cards */
.team-avatar-wrapper:hover {
    transform: scale(1.05);
}

.team-avatar-wrapper:hover .team-avatar {
    transform: scale(1.05);
    box-shadow: var(--shadow-2xl);
}

/* Form Inputs */
.form-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.1);
    outline: none;
}

.form-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary-lg);
}

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

/* Social Links */
.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: var(--primary-light);
    color: var(--primary-light);
}

/* Footer Links */
.footer-link:hover {
    color: var(--primary-light);
    padding-left: var(--space-6);
}

.footer-link:hover .footer-link-icon {
    opacity: 1;
    left: var(--space-2);
}

/* Scroll Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== SOCIAL MEDIA SECTION PREMIUM ===== */
.socialContainer {
    background: var(--gradient-hero);
    border-radius: var(--radius-2xl);
    padding: var(--space-8) var(--space-6);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(219, 39, 119, 0.08);
}

.socialContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.socialContainer:hover::before {
    transform: scaleX(1);
}

.socialContainerHeader {
    text-align: center;
    margin-bottom: var(--space-6);
}

.socialContainerSubtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-top: -70px;
    font-weight: var(--font-weight-medium);
}

@media (max-width: 600px) {
    .socialContainerSubtitle {
        margin-top: 0;
    }
}

.socialIconsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    max-width: 600px;
    margin: 0 auto;
}

.socialIconsGridGroups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    max-width: 400px;
    margin: 0 auto;
}

.socialIconLink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
}

.socialIconLink:hover {
    transform: translateY(-4px);
}

.socialIconCircle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.socialIconCircle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: transform var(--transition-smooth);
}

.socialIconLink:hover .socialIconCircle {
    transform: scale(1.1);
}

.socialIconLink:hover .socialIconCircle::before {
    transform: translate(-50%, -50%) scale(1);
}

.socialIconLink svg {
    position: relative;
    z-index: 1;
    transition: transform var(--transition-smooth);
}

.socialIconLink:hover svg {
    transform: scale(1.15);
}

.socialIconName {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-align: center;
    transition: all var(--transition-smooth);
    letter-spacing: 0.01em;
}

.socialIconLink:hover .socialIconName {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .socialContainer {
        padding: var(--space-6) var(--space-5);
    }

    .socialContainerHeader {
        margin-bottom: var(--space-5);
    }

    .socialIconsGrid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-3);
        max-width: 100%;
    }

    .socialIconsGridGroups {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        max-width: 100%;
    }

    .socialIconCircle {
        width: 48px;
        height: 48px;
    }

    .socialIconLink svg {
        width: 18px;
        height: 18px;
    }

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

@media (max-width: 480px) {
    .socialContainer {
        padding: var(--space-5) var(--space-4);
    }

    .socialContainerHeader {
        margin-bottom: var(--space-4);
    }

    .socialIconsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4) var(--space-3);
    }

    .socialIconsGridGroups {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        max-width: 100%;
    }

    .socialIconCircle {
        width: 44px;
        height: 44px;
    }

    .socialIconLink svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== SOCIAL CTA CONTAINER ===== */
.socialCTAContainer {
    background: var(--gradient-hero);
    border-radius: var(--radius-2xl);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(219, 39, 119, 0.08);
}

.socialCTAContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.socialCTAContainer:hover::before {
    transform: scaleX(1);
}

.socialCTAContent {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    position: relative;
    z-index: 1;
}

.socialCTAText {
    flex: 1;
}

.socialCTATitle {
    font-family: var(--font-family-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    line-height: var(--line-height-tight);
}

.socialCTASubtitle {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: var(--font-weight-semibold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.socialCTADescription {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    max-width: 600px;
}

.socialCTAContacts {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.socialCTAWhatsApp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.socialCTAWhatsAppIcon {
    width: 80px;
    height: 80px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
    transition: all var(--transition-smooth);
    animation: float 6s ease-in-out infinite;
}

.socialCTAContainer:hover .socialCTAWhatsAppIcon {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
}

.socialCTAPhone {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-decoration: none;
    transition: all var(--transition-smooth);
    display: block;
}

.socialCTAPhone:hover {
    color: var(--primary-color);
    transform: translateX(4px);
}

.socialCTAEmail {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-smooth);
    display: block;
    margin-bottom: var(--space-4);
}

.socialCTAEmail:hover {
    color: var(--primary-color);
}

.socialCTAContactButton {
    padding: var(--space-4) var(--space-8);
    background: var(--gradient-primary);
    color: var(--text-white);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    transition: all var(--transition-smooth);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.socialCTAContactButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left var(--transition-slow);
}

.socialCTAContactButton:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-primary-xl);
    border-color: rgba(255, 255, 255, 0.3);
}

.socialCTAContactButton:hover::before {
    left: 100%;
}

.socialCTAContactButton svg {
    transition: transform var(--transition-smooth);
}

.socialCTAContactButton:hover svg {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .socialCTAContainer {
        padding: var(--space-8) var(--space-6);
    }

    .socialCTAContent {
        flex-direction: column;
        gap: var(--space-8);
        text-align: center;
    }

    .socialCTAText {
        order: 1;
    }

    .socialCTAContacts {
        order: 2;
    }

    .socialCTADescription {
        max-width: 100%;
    }

    .socialCTAWhatsAppIcon {
        width: 70px;
        height: 70px;
    }

    .socialCTAWhatsAppIcon svg {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .socialCTAContainer {
        padding: var(--space-6) var(--space-4);
    }

    .socialCTAContent {
        gap: var(--space-6);
    }

    .socialCTAWhatsAppIcon {
        width: 60px;
        height: 60px;
    }

    .socialCTAWhatsAppIcon svg {
        width: 32px;
        height: 32px;
    }

    .socialCTAPhone {
        font-size: var(--font-size-lg);
    }
}