/* ===================================
   OTIMIZAÇÕES PARA TABLETS - MODO RETRATO
   768px a 1400px - Cobre todos os tablets
   iPad, iPad Pro, Galaxy Tab S7/S8/S9/S10
   =================================== */

/* Tablets padrão: 768px a 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    /* 1. HERO - Reduzir espaço no topo */
    section#hero {
        min-height: auto !important;
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }
    
    /* 2. PREÇOS - Cards em coluna única */
    section#precos .max-w-7xl > .grid,
    section#precos div.grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 1.5rem !important;
        max-width: 550px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    section#precos .glass-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 3. VÍDEOS - Container responsivo */
    section#video-carousel .relative {
        height: auto !important;
        min-height: 350px !important;
    }
    
    div.video-item video,
    .video-item video {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
    }
    
    /* 4. FOOTER - Grid 2 colunas */
    footer .max-w-7xl > .grid,
    footer div.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 2rem 1.5rem !important;
    }
    
    footer .max-w-7xl {
        max-width: 100% !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        box-sizing: border-box !important;
    }
}

/* Tablets grandes: 1025px a 1400px (Galaxy Tab S10+, iPad Pro 12.9") */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
    
    /* 1. HERO */
    section#hero {
        min-height: auto !important;
        padding-top: 120px !important;
        padding-bottom: 50px !important;
    }
    
    /* 2. PREÇOS - 2 colunas para tablets grandes */
    section#precos .max-w-7xl > .grid,
    section#precos div.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 1.5rem !important;
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    section#precos .glass-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 3. VÍDEOS */
    div.video-item video,
    .video-item video {
        width: 100% !important;
        height: auto !important;
        max-height: 500px !important;
    }
    
    /* 4. FOOTER - 2 colunas */
    footer .max-w-7xl > .grid,
    footer div.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 2rem !important;
    }
    
    footer .max-w-7xl {
        max-width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        box-sizing: border-box !important;
    }
}

/* Geral - Overflow para todas as faixas */
@media screen and (min-width: 768px) and (max-width: 1400px) {
    html, body {
        overflow-x: hidden !important;
    }
    
    section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ===================================
   AJUSTES CAROUSEL DE VÍDEOS + MOLDURA - TABLET RETRATO
   =================================== */

/* Tablet Retrato (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    
    /* Altura do container do carousel */
    #video-carousel .relative.h-\[500px\],
    section#video-carousel .relative {
        height: 380px !important;
        min-height: 380px !important;
    }
    
    /* Vídeo central - tamanho menor para caber na moldura */
    .video-item.active {
        width: 520px !important;
        height: 260px !important;
    }
    
    /* Vídeos laterais proporcionais */
    .video-item:not(.active) {
        width: 400px !important;
        height: 200px !important;
    }
    
    /* Moldura notebook - ajustada para tablet retrato */
    #notebook-frame {
        width: 88% !important;
        height: 72% !important;
        top: 50% !important;
    }
}

/* Tablet Paisagem (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    
    /* Altura do container do carousel */
    #video-carousel .relative.h-\[500px\],
    section#video-carousel .relative {
        height: 420px !important;
        min-height: 420px !important;
    }
    
    /* Vídeo central */
    .video-item.active {
        width: 620px !important;
        height: 310px !important;
    }
    
    /* Vídeos laterais */
    .video-item:not(.active) {
        width: 480px !important;
        height: 240px !important;
    }
    
    /* Moldura notebook - ajustada para tablet paisagem */
    #notebook-frame {
        width: 78% !important;
        height: 88% !important;
        top: 54% !important;
    }
}

/* Tablets Grandes (1025px - 1200px) - ex: iPad Pro */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    
    /* Vídeo central um pouco menor que desktop */
    .video-item.active {
        width: 700px !important;
        height: 350px !important;
    }
    
    /* Moldura ajustada */
    #notebook-frame {
        width: 77% !important;
        height: 91% !important;
    }
}