/* =============================== */
        /* VARIÁVEIS GLOBAIS              */
        /* =============================== */
        :root {
            --primary-color: #ff0000;   /* Cor principal do botão YouTube */
            --insta-color: #e1306c;     /* Cor do botão Instagram */
            --location-color: #4274e0;  /* Cor do botão de localização */
            --button-size: 56px;        /* Tamanho dos botões flutuantes */
            --shadow: 0 2px 8px rgba(255, 255, 255, 0.3); /* Sombra padrão dos elementos */
        }

        /* =============================== */
        /* ESTILO GERAL DO BODY            */
        /* =============================== */
        body {
            font-family: "Open Sans", sans-serif; /* Fonte padrão do site */
            margin: 0;                             /* Sem margem */
            padding: 0;                            /* Sem padding */
            background-image: linear-gradient(#191B49, #191b49); /* Fundo em degradê */
            display: flex;                         /* Flexbox para centralizar conteúdo */
            justify-content: center;               /* Centraliza horizontalmente */
            min-height: 100vh;                     /* Ocupa altura total da tela */
        }
        .luz img {
            position: fixed;
            top: 0px;
            left: 0;
            width: 100%;
            z-index: -1; /* Coloca a imagem atrás do conteúdo */
            opacity: 0.9; /* Ajusta a opacidade para um efeito sutil */
        }
        .LuzInferior img {
            position: fixed;
            bottom: 0px;
            left: 0;
            width: 100%;
            z-index: -1; /* Coloca a imagem atrás do conteúdo */
            opacity: 0.9; /* Ajusta a opacidade para um efeito sutil */
        }

        /* =============================== */
        /* CONTAINER PRINCIPAL             */
        /* =============================== */
        .container {
            max-width: 414px;              /* Largura máxima do iPhone SE */
            width: 100vw;                  /* Ocupa largura total da viewport */
            min-height: 100vh;             /* Altura mínima igual a tela */
            padding: 24px;                 /* Espaçamento interno */
            box-sizing: border-box;        /* Inclui padding na largura/altura */
            display: flex;                 /* Flexbox para organização vertical */
            flex-direction: column;        /* Coloca itens em coluna */
            align-items: center;           /* Centraliza horizontalmente */
        }

        /* =============================== */
        /* IMAGEM DE PERFIL / CAPA         */
        /* =============================== */
        .profile-pic{
            width: 100%;                   /* Ocupa 100% da largura do container */
            height: 210px;                 /* Altura fixa da seção de perfil */
            align-content: center;
            text-align: center;            /* Centraliza conteúdo dentro da div */
            margin-bottom: 2px;            /* Espaço abaixo */
            padding-bottom: 2px;           /* Pequeno padding inferior */
        }

        #Logo {
            width: 80%;                     /* Logo ocupa 80% da largura da seção */
            height: auto;                   /* Mantém proporção da imagem */
            margin-bottom: 10px;            /* Espaço abaixo do logo */
        }

        /* =============================== */
        /* NOME / TÍTULO (opcional)        */
        /* =============================== */
        .name {
            text-align: center;             /* Centraliza texto */
            width: 150px;                   /* Largura fixa do container do nome */
            margin-bottom: 1px;             /* Pequeno espaçamento */
            font-size: 1.5rem;              /* Tamanho da fonte */
            font-weight: bold;              /* Negrito */
        }

        /* =============================== */
        /* DESCRIÇÃO E VERSÍCULO           */
        /* =============================== */
        .description {
            font-family: Arial, Helvetica, sans-serif; /* Fonte alternativa */
            font-size: 13px;                             /* Tamanho da fonte */
            color: #ffffff;                              /* Cor do texto */
            text-align: center;                          /* Centraliza texto */
            margin-bottom: 0px;                          /* Sem margem inferior */
            margin-top: 2px;                             /* Pequena margem superior */
            padding: 1px;                                /* Pequeno padding interno */
        }

        .verso {
            color: #f1bcfc;      /* Cor do verso bíblico */
            font-style: italic;   /* Texto em itálico */
        }

        /* =============================== */
        /* SEÇÃO DE VÍDEO EMBED            */
        /* =============================== */
        .video-section {
            width: 86%;                /* Largura do container do vídeo */
            height: 180px;             /* Altura fixa */
            display: flex;             /* Flexbox para centralizar */
            justify-content: center;
            margin-bottom: 18px;       /* Espaço abaixo da seção */
        }

        iframe {
            width: 300px;              /* Largura do iframe */
            height: 169px;             /* Altura do iframe */
            max-width: 350px;          /* Largura máxima */
            border-radius: 16px;       /* Bordas arredondadas */
            box-shadow: var(--shadow); /* Sombra do vídeo */
            outline: none;             /* Remove contorno ao focar */
            background: #000;          /* Fundo preto */
        }

        /* =============================== */
        /* BOTÕES FLUTUANTES LATERAIS      */
        /* =============================== */
        .floating-buttons {
            position: fixed;           /* Fixo na tela */
            right: 20px;               /* Distância da borda direita */
            bottom: 20px;              /* Distância da borda inferior */
            display: flex;             /* Flexbox em coluna */
            flex-direction: column;
            gap: 16px;                 /* Espaçamento entre botões */
            z-index: 999;              /* Sempre acima de outros elementos */
        }

        .floating-buttons a {
            width: var(--button-size); /* Largura do botão */
            height: var(--button-size);/* Altura do botão */
            border-radius: 50%;        /* Botão circular */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: var(--shadow); /* Sombra do botão */
            transition: transform 0.2s, box-shadow 0.2s, opacity 0.3s; /* Animação hover */
            color: #fff;
            text-decoration: none;
            opacity: 0.6;              /* Transparência inicial */
        }

        .floating-buttons a:hover {
            transform: translateY(-4px); /* Levanta botão ao passar mouse */
            box-shadow: 0 4px 12px rgba(0,0,0,0.4); /* Sombra maior */
            opacity: 1;                   /* Fica totalmente visível */
        }

        /* Cores específicas para cada botão */
        .yt-btn { background: var(--primary-color); }
        .insta-btn { background: var(--insta-color); }
        .location-btn { background: var(--location-color); }

        /* Ícones dentro dos botões */
        .floating-buttons svg, .floating-buttons img {
            width: 25px;
            height: 25px;
        }

        /* =============================== */
        /* SEÇÃO DE AÇÃO / LINKS           */
        /* =============================== */
        .action {
            width: 100%;                  /* Ocupa 100% do container */
            display: flex;                /* Flexbox vertical */
            flex-direction: column;
            gap: 16px;                    /* Espaçamento entre botões */
            align-items: center;          /* Centraliza horizontalmente */
            margin-bottom: 20px;          /* Espaço abaixo */
        }

        .saiba-mais {
            display: flex;
            align-items: center;
            gap: 8px;                     /* Espaçamento entre ícone e texto */
            padding: 10px 24px;           /* Padding interno do botão */
            border: none;                 /* Sem borda */
            border-radius: 50px;          /* Botão arredondado */
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;        /* Remove sublinhado */
            box-shadow: var(--shadow);    /* Sombra do botão */
            color: #013a63;               /* Cor do texto */
            background-color: #f1bcf1;   /* Cor de fundo */
        }

        .saiba-mais:hover {
            background-color: #f796f7;   /* Cor de fundo ao passar mouse */
        }

        h1 {
            color: #ffffff;
            margin-top: 2px;
            margin-bottom: 2px;
            font-size: 13px;
            }
            #radio {
            width: 60%;
            max-width: 400px;
            height: 40px;
            margin: 10px auto;
            display: block;
            background: transparent;
            object-fit: none;
            opacity: 0;
            }
            #playBtn {
            padding: 10px;
            font-size: 13px;
            background: #f1bcf1;
            color: #013a63;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: 0.3s;
            }
            #playBtn:hover {
            background: #f796f7;
        }
        p {
            color: #ffffff;
        }
        /* =============================== */
        /* RESPONSIVIDADE                  */
        /* =============================== */
        @media (min-width: 1440px) {
            .container {
                width: calc(50vw - 10px);   /* Ajuste proporcional em telas maiores */
            }
            .video-section iframe {
                max-width: 60vw;            /* Aumenta tamanho do vídeo */
            }
        }