/* Hero Section Styles */
.hero-section {
    background: linear-gradient(135deg, #7390A8 0%, #304378 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

/* Ícones flutuantes de serviços */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        /* Barbeiro */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.1"><path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2M21 9V7L15 1H9L3 7V9H21M3 19C3 20.1 3.9 21 5 21V19H3M21 19C21 20.1 20.1 21 19 21V19H21M5 19V21H19V19H5Z"/></svg>'),
        /* Salão de beleza */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.08"><path d="M12,2A2,2 0 0,1 14,4A2,2 0 0,1 12,6A2,2 0 0,1 10,4A2,2 0 0,1 12,2M12,8.5C13.25,8.5 14.42,8.69 15.5,9.04L16.07,6.27C15.5,6.1 14.77,6 14,6H10C9.23,6 8.5,6.1 7.93,6.27L8.5,9.04C9.58,8.69 10.75,8.5 12,8.5M7,10V22H9V16H15V22H17V10C15.58,10.35 14.06,10.5 12.5,10.5C10.94,10.5 9.42,10.35 8,10H7Z"/></svg>'),
        /* Manicure */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.09"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,11.5 18.97,12 18.9,12.5C20.61,14.19 21.49,16.38 21.49,18.7C21.49,19.68 21.08,20.58 20.39,21.39L19,20C19.39,19.61 19.61,19.07 19.61,18.5C19.61,16.96 19,15.5 17.9,14.4C17.44,13.94 16.97,13.53 16.47,13.17C15.97,12.81 15.44,12.5 14.88,12.26C14.32,12.03 13.73,11.86 13.12,11.77C12.75,11.71 12.38,11.68 12,11.68C11.62,11.68 11.25,11.71 10.88,11.77C10.27,11.86 9.68,12.03 9.12,12.26C8.56,12.5 8.03,12.81 7.53,13.17C7.03,13.53 6.56,13.94 6.1,14.4C5,15.5 4.39,16.96 4.39,18.5C4.39,19.07 4.61,19.61 5,20L3.61,21.39C2.92,20.58 2.51,19.68 2.51,18.7C2.51,16.38 3.39,14.19 5.1,12.5C5.03,12 5,11.5 5,11H7V5A5,5 0 0,1 12,0A5,5 0 0,1 17,5V11H19Z"/></svg>'),
        /* Dentista */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.07"><path d="M12,2A7,7 0 0,0 5,9V15A1,1 0 0,0 6,16H8A1,1 0 0,0 9,15V11A1,1 0 0,0 8,10H7V9A5,5 0 0,1 12,4A5,5 0 0,1 17,9V10H16A1,1 0 0,0 15,11V15A1,1 0 0,0 16,16H18A1,1 0 0,0 19,15V9A7,7 0 0,0 12,2M12,6A3,3 0 0,0 9,9V10H15V9A3,3 0 0,0 12,6M10,18V22H14V18H10Z"/></svg>'),
        /* Médico */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.06"><path d="M12,2A3,3 0 0,1 15,5V7A3,3 0 0,1 12,10A3,3 0 0,1 9,7V5A3,3 0 0,1 12,2M12,11C14.67,11 20,12.33 20,15V20H4V15C4,12.33 9.33,11 12,11M18,7H16V9H14V7H12V5H14V3H16V5H18V7Z"/></svg>'),
        /* Eletricista */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.08"><path d="M11,4H13V16L18,12H15V8H17L12,2L7,8H9V12H6L11,16V4Z"/></svg>'),
        /* Encanador */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.09"><path d="M16.84,2.73C16.45,2.73 16.07,2.88 15.77,3.17L13.65,5.29C13.06,5.88 13.06,6.82 13.65,7.41L16.59,10.35C17.18,10.94 18.12,10.94 18.71,10.35L20.83,8.23C21.42,7.64 21.42,6.7 20.83,6.11L17.89,3.17C17.6,2.88 17.22,2.73 16.84,2.73M9.12,6.03L6.91,8.24L8.32,9.65L10.53,7.44L9.12,6.03M14.24,11.15L11.83,13.56L13.24,14.97L15.65,12.56L14.24,11.15M8.32,12.03L3.68,16.67C3.29,17.06 3.29,17.71 3.68,18.1L5.9,20.32C6.29,20.71 6.94,20.71 7.33,20.32L12,15.65L8.32,12.03Z"/></svg>'),
        /* Faxineira */
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff" opacity="0.07"><path d="M19.36,2.72L20.78,4.14L15.06,9.85C16.13,11.39 16.28,13.24 15.38,14.44L9.06,8.12C10.26,7.22 12.11,7.37 13.65,8.44L19.36,2.72M5.93,17.57C3.92,15.56 2.69,13.16 2.35,10.92L7.23,8.83L14.67,16.27L12.58,21.15C10.34,20.81 7.94,19.58 5.93,17.57Z"/></svg>');
    background-size: 60px 60px, 50px 50px, 45px 45px, 55px 55px, 65px 65px, 40px 40px, 48px 48px, 52px 52px;
    background-position: 
        10% 20%, 85% 15%, 20% 80%, 90% 70%, 
        15% 50%, 75% 85%, 5% 75%, 95% 40%;
    background-repeat: no-repeat;
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
}

/* Animação de flutuação */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(2deg);
    }
    50% {
        transform: translateY(-5px) rotate(-1deg);
    }
    75% {
        transform: translateY(-15px) rotate(1deg);
    }
}

/* Garantir que o conteúdo fique acima dos ícones */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-content h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #F5A818;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    font-weight: 600;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    line-height: 1.6;
}

/* Seção de funcionalidades */
.hero-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-width: 120px;
}

.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.feature-item span:last-child {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.hero-logo {
    width: 350px;
    height: auto;
    margin-bottom: 2rem;
    max-width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem;
}

.hero-btn-primary {
    background-color: #F5A818;
    color: #000000;
}

.hero-btn-primary:hover {
    background-color: #e09615;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(245, 168, 24, 0.4);
}

.hero-btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.hero-btn-secondary:hover {
    background-color: white;
    color: #304378;
    transform: translateY(-3px);
}

.hero-btn-tertiary {
    background-color: #7390A8;
    color: white;
}

.hero-btn-tertiary:hover {
    background-color: #5f7a94;
    border-color: #5f7a94;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(115, 144, 168, 0.4);
}

.hero-btn-tertiary:hover {
    background-color: #1e2a4a;
    border-color: #1e2a4a;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(48, 67, 120, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    .hero-features {
        gap: 1rem;
    }
    
    .feature-item {
        min-width: 100px;
        padding: 0.8rem;
    }
    
    .feature-icon {
        font-size: 1.5rem;
    }
    
    .feature-item span:last-child {
        font-size: 0.8rem;
    }
    
    .hero-logo {
        width: 280px;
        margin-bottom: 1.5rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-btn {
        width: 250px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    .hero-content h2 {
        font-size: 1.8rem;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    
    .hero-features {
        gap: 0.5rem;
    }
    
    .feature-item {
        min-width: 80px;
        padding: 0.6rem;
    }
    
    .feature-icon {
        font-size: 1.5rem;
    }
    
    .feature-item span:last-child {
        font-size: 0.8rem;
    }
    
    .hero-logo {
        width: 220px;
        margin-bottom: 1rem;
    }
}