/* ========================================
   MOBILE RESPONSIVE - DESIGN ELEGANTE
   ======================================== */

/* ===== NAVBAR MOBILE ===== */
@media (max-width: 1023px) {
    .navbar {
        height: auto;
        min-height: 64px;
    }
    
    .navbar .flex {
        padding: 0.75rem 1rem;
    }
    
    .logo-img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .logo-text {
        font-size: 1.25rem !important;
    }
    
    /* Botões de ação menores */
    .navbar button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .navbar button svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

@media (max-width: 639px) {
    .logo-text {
        font-size: 1.1rem !important;
    }
    
    .navbar button span {
        display: none;
    }
    
    .navbar button {
        padding: 0.5rem !important;
    }
}

/* ===== HERO SECTION MOBILE ===== */
@media (max-width: 767px) {
    .hero {
        min-height: 100vh !important;
        padding: 6rem 1.5rem 4rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .hero-content {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .hero-logo {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 1.5rem !important;
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6)) !important;
    }
    
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        letter-spacing: 1px !important;
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.5) !important;
    }
    
    .hero p,
    .hero .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin: 1.25rem auto !important;
        max-width: 90% !important;
        opacity: 0.9 !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 2rem auto 0 !important;
        gap: 1rem !important;
    }
    
    .hero-buttons .btn,
    .hero-buttons button,
    .hero-buttons a {
        width: 100% !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 479px) {
    .hero {
        padding: 5rem 1rem 3rem !important;
    }
    
    .hero-logo {
        width: 80px !important;
        height: 80px !important;
    }
    
    .hero h1 {
        font-size: 1.75rem !important;
    }
    
    .hero p {
        font-size: 0.9rem !important;
        font-size: 1.5rem !important;
    }
    
    .hero .max-w-4xl {
        padding: 0 1rem;
    }
}

/* ===== GALLERY MOBILE ===== */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        padding: 0.75rem !important;
    }
    
    .gallery-item {
        max-width: 100%;
    }
    
    .gallery-image-wrapper {
        height: 280px !important;
    }
    
    .gallery-item-title {
        font-size: 1.1rem !important;
    }
    
    .gallery-item-desc {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 479px) {
    .gallery-image-wrapper {
        height: 240px !important;
    }
}

/* ===== PLANS MOBILE ===== */
@media (max-width: 767px) {
    .plans-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 0.75rem !important;
    }
    
    .plan-card {
        padding: 1.75rem 1.25rem !important;
    }
    
    .plan-title {
        font-size: 1.5rem !important;
    }
    
    .icon {
        width: 60px !important;
        height: 60px !important;
    }
    
    .price {
        font-size: 2rem !important;
    }
    
    .period {
        font-size: 0.9rem !important;
    }
    
    .features li {
        font-size: 0.9rem !important;
        padding: 0.6rem 0 !important;
    }
    
    .subscribe-btn {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
}

/* ===== APPOINTMENT FORM MOBILE ===== */
@media (max-width: 767px) {
    .appointment-form {
        padding: 1.5rem 1rem !important;
        border-radius: 16px !important;
    }
    
    .form-section-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .form-group label {
        font-size: 0.85rem !important;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .btn-submit {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
}

/* ===== PROFESSIONALS MOBILE ===== */
@media (max-width: 767px) {
    .professionals-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .professional-card {
        padding: 1.5rem 1.25rem !important;
    }
    
    .professional-image {
        width: 100px !important;
        height: 100px !important;
    }
    
    .professional-name {
        font-size: 1.3rem !important;
    }
    
    .professional-role {
        font-size: 0.85rem !important;
    }
    
    .professional-bio {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .skill-tag {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.75rem !important;
    }
}

/* ===== AMENITIES MOBILE ===== */
@media (max-width: 767px) {
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .amenity-card {
        padding: 1.5rem 1rem !important;
    }
    
    .amenity-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .amenity-name {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 479px) {
    .amenities-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===== BENEFITS MOBILE ===== */
@media (max-width: 767px) {
    .benefits-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        max-width: 400px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
    }
    
    .benefit-card {
        padding: 1.5rem 1.25rem !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    .benefit-icon {
        font-size: 2rem !important;
    }
    
    .benefit-card h3 {
        font-size: 1.15rem !important;
    }
    
    .benefit-card p {
        font-size: 0.85rem !important;
    }
}

/* ===== EXTRA SERVICES MOBILE ===== */
@media (max-width: 767px) {
    .extra-services-notice {
        padding: 1.25rem !important;
        margin: 1.5rem auto !important;
    }
    
    .notice-icon {
        font-size: 2rem !important;
    }
    
    .notice-title {
        font-size: 1.2rem !important;
    }
    
    .notice-text {
        font-size: 0.9rem !important;
    }
    
    .extra-services-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .extra-service-card {
        padding: 1.5rem 1.25rem !important;
    }
    
    .extra-service-icon {
        font-size: 2.25rem !important;
    }
    
    .extra-service-title {
        font-size: 1.2rem !important;
    }
    
    .extra-service-description {
        font-size: 0.85rem !important;
    }
    
    .example-tag {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.875rem !important;
    }
    
    .extra-services-warning {
        padding: 1.25rem !important;
    }
    
    .warning-icon {
        font-size: 2rem !important;
    }
    
    .warning-text h4 {
        font-size: 1.1rem !important;
    }
    
    .warning-text p {
        font-size: 0.85rem !important;
    }
}

/* ===== CONTACTS MOBILE ===== */
@media (max-width: 767px) {
    .contacts-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .contact-card {
        padding: 1.75rem 1.5rem !important;
    }
    
    .contact-icon {
        width: 52px !important;
        height: 52px !important;
    }
    
    .contact-title {
        font-size: 1.3rem !important;
    }
    
    .contact-info {
        font-size: 1rem !important;
    }
    
    .contact-description {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 479px) {
    .contact-card {
        padding: 1.5rem 1.25rem !important;
    }
    
    .contact-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .contact-title {
        font-size: 1.2rem !important;
    }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 767px) {
    .footer-main {
        flex-direction: column !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .footer-left,
    .footer-right {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .footer-left p {
        max-width: 100% !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
    
    .footer-bottom {
        flex-direction: column !important;
        gap: 1rem !important;
        text-align: center !important;
    }
    
    .footer-copyright,
    .footer-credits {
        font-size: 0.85rem !important;
    }
}

/* ===== MODAL LOGIN/REGISTER MOBILE ===== */
@media (max-width: 767px) {
    #loginModal .relative {
        max-width: 95% !important;
        margin: 1rem !important;
    }
    
    .modal-content {
        padding: 1.5rem 1rem !important;
    }
    
    .modal-title {
        font-size: 1.5rem !important;
    }
    
    .tab-button {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .form-input {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .btn-primary {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
}

/* ===== SECTION HEADERS MOBILE ===== */
@media (max-width: 767px) {
    .section-header {
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
    }
    
    .section-title {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    .section-subtitle {
        font-size: 0.85rem !important;
    }
    
    .gallery-title,
    .amenities-title {
        font-size: 1.75rem !important;
    }
    
    .gallery-subtitle,
    .amenities-subtitle {
        font-size: 0.85rem !important;
    }
    
    .title-decoration {
        width: 50px !important;
        margin: 0.5rem auto !important;
    }
}

@media (max-width: 479px) {
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .gallery-title,
    .amenities-title {
        font-size: 1.5rem !important;
    }
}

/* ===== ANIMATIONS MOBILE (REDUZIDAS) ===== */
@media (max-width: 767px) {
    .animate-fade-in,
    .animate-slide-up {
        animation-duration: 0.4s !important;
    }
    
    /* Reduzir hover effects em mobile */
    .gallery-item:hover,
    .plan-card:hover,
    .benefit-card:hover,
    .amenity-card:hover,
    .contact-card:hover {
        transform: translateY(-3px) !important;
    }
}

/* ===== SCROLL BEHAVIOR MOBILE ===== */
@media (max-width: 767px) {
    html {
        scroll-padding-top: 64px !important;
    }
    
    section {
        scroll-margin-top: 64px !important;
    }
}

/* ===== CONTAINER MOBILE ===== */
@media (max-width: 767px) {
    .container {
        padding: 0 1rem !important;
    }
}

@media (max-width: 479px) {
    .container {
        padding: 0 0.75rem !important;
    }
}

/* ===== BUTTONS MOBILE ===== */
@media (max-width: 767px) {
    button,
    .btn,
    a.btn {
        font-size: 0.9rem !important;
        padding: 0.75rem 1.25rem !important;
    }
    
    button svg,
    .btn svg {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* ===== SPACING MOBILE ===== */
@media (max-width: 767px) {
    section.min-h-screen {
        min-height: auto !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-12 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
}

/* ===== TYPOGRAPHY MOBILE ===== */
@media (max-width: 767px) {
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    
    p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
}

/* ===== IMAGES MOBILE ===== */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ===== ADMIN DASHBOARD MOBILE ===== */
@media (max-width: 767px) {
    .admin-dashboard-content {
        padding: 1rem !important;
    }
    
    .admin-header {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .admin-title {
        font-size: 1.5rem !important;
    }
    
    .stat-card {
        padding: 1.25rem 1rem !important;
    }
    
    .stat-value {
        font-size: 1.75rem !important;
    }
    
    .stat-label {
        font-size: 0.85rem !important;
    }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (max-width: 767px) {
    /* Aumentar área de toque */
    a, button, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remover hover effects em touch devices */
    @media (hover: none) {
        *:hover {
            transform: none !important;
        }
    }
}

/* ===== PERFORMANCE MOBILE ===== */
@media (max-width: 767px) {
    /* Reduzir blur effects para melhor performance */
    .backdrop-blur-md {
        backdrop-filter: blur(8px) !important;
    }
    
    /* Simplificar sombras */
    .shadow-lg {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
}