/* Container que agrupa o texto e a imagem */
.container-sinopse {
    display: flex;
    justify-content: space-between; /* Empurra o texto para a esquerda e a imagem para a direita */
    align-items: center;           /* Alinha verticalmente o texto e a imagem no centro */
    max-width: 1200px;             /* Define uma largura máxima para o conteúdo */
    margin: 50px auto;             /* Centraliza o bloco na tela e adiciona espaço após o banner */
    padding: 0 20px;               /* Margem de segurança interna nas laterais */
    gap: 40px;                     /* Espaçamento interno entre o texto e a imagem */
}

/* Bloco de Texto (ocupa mais espaço proporcional) */
.sinopse {
    flex: 1.2;                     /* Faz o texto ocupar um pouco mais de espaço horizontal */
}

.sinopse h2 {
    font-size: 30px;
    font-family: 'Courier New', Courier, monospace;
    color: #1072e2;                /* Cor azulada parecida com a da imagem */
    margin-bottom: 10px;
    margin-left: auto;
    margin-top: -60px;
}

.sinopse .subtitulo {
    font-size: 20px;
    color: #000000;
    margin-bottom: 20px;
    margin-left: auto;
    text-align: left;
    text-indent: 20px;
}

/* Bloco da Imagem */
.posterOficial {
    flex: 1;                       /* Espaço proporcional da imagem */
    display: flex;
    justify-content: flex-end;     /* Garante que a imagem encoste totalmente na direita */
}

.posterOficial img {
    margin-top: -10px;
    margin-right: auto;
    max-width: 80%;               /* Impede que a imagem ultrapasse o limite da div */
    height: auto;                  /* Mantém a proporção original da imagem */
    border-radius: 8px;            /* Opcional: deixa as bordas levemente arredondadas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.30); /* Opcional: sombra suave igual à da imagem enviada */
}

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .container-sinopse {
        flex-direction: column;    /* Em telas pequenas, o texto fica em cima e a imagem embaixo */
        text-align: center;        /* Centraliza o texto no mobile */
    }
    
    .posterOficial {
        justify-content: center;   /* Centraliza a imagem no mobile */
    }
}