/* CSS específico para resolução 360x740 */

@media screen and (width: 360px),
       screen and (min-width: 359px) and (max-width: 361px) {
    html, body {
        width: 360px;
        max-width: 360px;
        overflow-x: hidden;
    }
    
    .container {
        width: 100%;
        max-width: 360px;
        padding: 6px;
        margin: 0;
    }
    
    .content {
        width: 100%;
        padding: 0;
    }
    
    .hero {
        padding: 5px 0;
        margin-bottom: 12px;
    }
    
    .hero h1 {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }
    
    .hero p {
        font-size: 0.85rem;
    }
    
    .row-top,
    .row-bottom {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
        margin: 0 0 10px 0;
    }
    
    .main-link-item {
        width: 100%;
        height: auto;
        padding: 8px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    
    .main-icon-container,
    .qrcode-container {
        width: 32px;
        height: 32px;
        margin: 0 10px 0 0;
    }
    
    .main-link-item span {
        font-size: 0.9rem;
    }
    
    .social-footer {
        padding: 10px 0;
    }
    
    .social-links-footer {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .social-icon-footer {
        width: 28px;
        height: 28px;
    }
    
    .copyright {
        font-size: 0.8rem;
        padding: 8px 0;
    }
}