/**
 * Main CSS - Isaac Treinos Ar Livre
 * Sistema de design consolidado
 */

/* =====================================================
   DESIGN TOKENS - Natural & Outdoor
   ===================================================== */
:root {
    /* Cores Primárias */
    --color-primary: #2A9D8F;
    --color-primary-dark: #264653;
    --color-primary-light: #3DB5A5;
    
    /* Cores Accent */
    --color-accent: #E76F51;
    --color-accent-dark: #D55E44;
    --color-accent-light: #F4A261;
    
    /* Neutrals */
    --color-white: #FFFFFF;
    --color-gray-50: #F8F9FA;
    --color-gray-100: #E9ECEF;
    --color-gray-200: #DEE2E6;
    --color-gray-300: #CED4DA;
    --color-gray-700: #495057;
    --color-gray-900: #212529;
    
    /* Semantic Colors */
    --color-bg-light: #F9FAFB;
    --color-text-medium: #6B7280;
    
    /* Typography */
    --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 16px;
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-size-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --font-size-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing - Mobile First */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 2.5rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: clamp(1rem, 3vw, 1.5rem);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(42, 157, 143, 0.08);
    --shadow-md: 0 4px 16px rgba(42, 157, 143, 0.12);
    --shadow-lg: 0 8px 32px rgba(42, 157, 143, 0.16);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #2A9D8F 0%, #264653 100%);
    --gradient-accent: linear-gradient(135deg, #E76F51 0%, #F4A261 100%);
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: var(--font-size-base);
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    line-height: var(--line-height-normal);
    color: var(--color-gray-900);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    padding-top: 110px; /* Compensar header fixo em desktop */
}

/* Ajuste mobile - manter valor original */
@media (max-width: 768px) {
    body {
        padding-top: 73px !important;
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* =====================================================
   UTILITIES
   ===================================================== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.section {
    padding: var(--space-2xl) 0;
    overflow-x: hidden;
}

.section--back-link {
    padding-top: var(--space-lg);
}

.section--pricing {
    padding-top: 0;
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    margin-bottom: var(--space-2xl);
    color: var(--color-primary-dark);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    text-align: center;
    color: var(--color-gray-700);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

/* Icon Helper */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

.icon svg {
    width: 100%;
    height: 100%;
}

/* =====================================================
   WHATSAPP FLOAT BUTTON - Destaque Marketing
   ===================================================== */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
}

.whatsapp-float__btn {
    width: 64px;
    height: 64px;
    background: #25D366;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
    transition: var(--transition-normal);
    animation: whatsapp-pulse 2s ease-in-out infinite;
    position: relative;
}

/* Indicador de notificação */
.whatsapp-float__btn::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: #FF3B30;
    border-radius: 50%;
    border: 2px solid white;
    animation: notification-ping 1.5s ease-in-out infinite;
}

.whatsapp-float__btn:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.7);
    animation: none;
}

.whatsapp-float__icon {
    font-size: 2.2rem;
    color: white;
}

@keyframes whatsapp-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 32px rgba(37, 211, 102, 0.8), 0 0 20px rgba(37, 211, 102, 0.4);
        transform: scale(1.05);
    }
}

@keyframes notification-ping {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

/* Desktop - Espaçamentos maiores */
@media (min-width: 769px) {
    :root {
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --space-3xl: 5rem;
        --space-4xl: 6rem;
    }
    
    .section {
        padding: var(--space-2xl) 0;
    }
}

/* Tablet e Mobile - Espaçamentos reduzidos */
@media (max-width: 768px) {
    :root {
        --space-xl: 2rem;
        --space-2xl: 2.5rem;
        --space-3xl: 3.5rem;
        --space-4xl: 4.5rem;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .section {
        padding: var(--space-lg) 0;
    }
}

@media (max-width: 480px) {
    :root {
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --space-3xl: 2.5rem;
        --space-4xl: 3.5rem;
    }
    
    .section {
        padding: var(--space-md) 0;
    }
    
    .container {
        padding: 0 0.75rem;
    }
}