/*--------------------------------------------------------------
# RESPONSIVE.CSS - CORREÇÕES PARA MOBILE E TABLET
--------------------------------------------------------------*/

/* ========================================
   TABLET (768px - 1024px)
======================================== */

@media (max-width: 1024px) and (min-width: 769px) {
    /* Navbar */
    .nav-link {
        font-size: 0.85rem;
        margin: 0 8px;
    }
    
    /* Carousel */
    .slide-title {
        font-size: 2.5rem;
    }
    
    .slide-subtitle {
        font-size: 1.2rem;
    }
    
    /* Projetos */
    .project-card {
        height: 350px;
    }
    
    /* Manter animações no tablet */
    .section-title,
    .section-badge,
    .project-card {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .section-title.animate-in,
    .section-badge.animate-in,
    .project-card.animate-in {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   MOBILE (até 768px)
======================================== */

@media (max-width: 768px) {
    /* FALLBACK: Conteúdo sempre visível por padrão */
    .section-title,
    .section-badge {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Só aplicar animação SE JavaScript estiver ativo */
    body.js-loaded .section-title:not(.animate-in),
    body.js-loaded .section-badge:not(.animate-in) {
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition: opacity 0.6s ease, transform 0.6s ease !important;
    }
    
    body.js-loaded .section-title.animate-in,
    body.js-loaded .section-badge.animate-in {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Cards sempre visíveis no mobile */
    .project-card {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Animação de pulso mais suave */
    @keyframes subtle-pulse {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-3px); }
        100% { transform: translateY(0px); }
    }
    
    /* Navbar */
    .main-navbar {
        padding: 10px 0;
    }
    
    .navbar-brand-text {
        font-size: 1.2rem;
    }
    
    /* Carousel */
    .hero-carousel {
        margin-top: 50px;
        height: calc(100vh - 50px);
    }
    
    .carousel-content {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .slide-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }
    
    .slide-subtitle {
        font-size: clamp(0.9rem, 4vw, 1.2rem);
    }
    
    .discover-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }
    
    /* Projetos */
    .planos-section {
        padding: 60px 0 40px;
    }
    
    .section-title {
        margin-bottom: 40px;
    }
    
    .section-title h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    .section-title p {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .project-card {
        height: 300px;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    
    /* Botões flutuantes */
    .floating-btn {
        transform: scale(0.9);
    }
    
    #whatsapp-btn {
        bottom: 20px;
        right: 20px;
    }
    
    #back-to-top {
        bottom: 90px;
        right: 20px;
    }
    
    /* Footer */
    .footer {
        padding: 3rem 0 1.5rem;
    }
    
    .footer-col {
        margin-bottom: 30px;
        text-align: left !important;
    }
}

/* ========================================
   MOBILE PEQUENO (até 576px)
======================================== */

@media (max-width: 576px) {
    /* Garantir visibilidade do conteúdo */
    .section-title,
    .section-badge,
    .project-card {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    
    /* Carousel */
    .hero-carousel {
        margin-top: 45px;
        height: calc(100vh - 45px);
    }
    
    .slide-title {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    
    .slide-subtitle {
        font-size: clamp(0.85rem, 3.5vw, 1rem);
    }
    
    /* Projetos */
    .project-card {
        height: 280px;
    }
    
    .section-badge {
        font-size: 0.8rem;
        padding: 8px 20px;
    }
    
    .section-title h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }
    
    .section-title p {
        font-size: 0.9rem;
    }
    
    /* Botão fullscreen */
    .project-fullscreen-btn {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
    
    .project-fullscreen-btn i {
        font-size: 1.5rem;
    }
}

/* ========================================
   LANDSCAPE MOBILE (orientação paisagem)
======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-carousel {
        height: 100vh;
    }
    
    .carousel-content {
        padding: 20px 5%;
    }
    
    .slide-title {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .slide-subtitle {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Conteúdo sempre visível em landscape */
    .section-title,
    .section-badge,
    .project-card {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ========================================
   MODO SEGURO (caso JS falhe)
======================================== */

/* Keyframe FORA do media query */
@keyframes forceVisible {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

@media (max-width: 768px) {
    /* Após 2 segundos, forçar visibilidade se JS não carregar */
    body:not(.js-loaded) .section-title,
    body:not(.js-loaded) .section-badge,
    body:not(.js-loaded) .project-card {
        animation: forceVisible 0.5s ease forwards;
        animation-delay: 2s;
    }
}