/* ------------------ RESPONSIVIDADE ------------------ */

/* Tablets (até 1024px) */
@media (max-width: 1024px) {
    
 
   .section-padrao:not(#BoasVindas) {
        min-height: auto; /* Remove a altura mínima de 100vh */
        padding: 4rem 0;  /* Adiciona um espaçamento vertical entre as seções */
    }
    /* Estrutura em coluna */
    #HomePG2 .linha,
    #HomePG5 .linha,
    .qrcode-section .qrcode-linha {
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* height: auto; <- Esta linha que você adicionou não é mais necessária */
    }

    /* Imagens sobem */
    /* Imagens sobem */
#HomePG2 .linha .img,  /* <-- MUDEI AQUI (de 'img' para '.img') */
#HomePG5 .linha .img /* <-- MUDEI AQUI (de 'img' para '.img') */
 {
    order: -1;
    margin-bottom: 2rem;
}

    /* Títulos */
    .itens-esquerda h1,
    #HomePG5 .itens-direita h1,
    #HomePG3 h1,
    #HomePG4 h1,
    #HomePG6 .linha h1 {
        font-size: 2.2rem;
    }
    #HomePG5 .linha .img{
        width: 100%;
    }

    /* Vídeos */
    #HomePG3 #video,
    iframe {
        width: 100%;
        height: 50vh;
        /* Define uma altura controlada (50% da tela) */
        box-shadow: none !important;
    }

    /* Removendo sombras */
    .card,
    .btn,
    .qrcode-container,
    img {
        box-shadow: none !important;
    }
}

/* Celulares (até 768px) */
@media (max-width: 768px) {
    .video-responsive-container {
    position: relative;
    overflow: hidden;
    width: 100%; /* Ocupa 100% do espaço disponível */

    /* --- ESTA É A LINHA ESSENCIAL QUE FALTAVA --- */
    /* Define a altura como 56.25% da largura (proporção 16:9) */
    padding-top: 56.25%; 

    /* Limita o tamanho MÁXIMO (no PC) */
    
    /* Centra no PC e adiciona margens */
    border-radius: 8px; /* Teus cantos arredondados */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.video-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Remove a borda padrão do iframe */
}


    /* Ajuste de padding para celulares */
    .section-padrao {
        padding: 3rem 0;
    }

    /* Títulos */
    .itens-esquerda h1,
    #HomePG5 .itens-direita h1 {
        font-size: 2.5rem;
    }

    #HomePG2 .linha {
        gap: 10px;
    }

    .calendario-grid {
        /* Em celulares, vira uma única coluna */
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .dia-header {
        text-align: left;
    }

    /* Textos */
    #HomePG3 p,
    #HomePG4 p,
    .qrcode-texto p,
    #Sacramentos p {
        font-size: 1rem;
    }

    .links-sociais {
        flex-direction: row;
        gap: 10px;
    }

    .links-sociais a {
        width: 100%;
        text-align: center;
    }

    #fachada {
        width: 100%;
    }
    .img, iframe {
        width: 100%;
        height: auto;
    }

    /* QRCode */
    .qrcode-img img {
        width: 80%;
    }

    /* Eventos */
    .eventos {
        flex-direction: column;
    }

    .card {
        flex: 1 1 100%;
        box-shadow: none !important;
    }
}

/* Celulares pequenos (até 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.9rem;
    }

    .btn {
        width: 100%;
        font-size: 1rem;
        box-shadow: none !important;
    }

    .qrcode-texto h2 {
        font-size: 1.5rem;
    }

    .icon {
        width: 12%;
    }
}