@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
    /*overflow-x: hidden;*/
}

.header {
  /* SEU GRADIENTE PRINCIPAL DO HEADER (INTOÇADO) */
  background: linear-gradient(to bottom, rgb(130, 0, 170), rgb(19, 0, 20)); /* Degradê vertical: roxo claro para roxo escuro */
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
  position: relative; /* ESSENCIAL para o pseudo-elemento */
  padding: 0 5%;
  overflow: hidden; /* Adicionado para conter o efeito */
}

.header::before {
  content: ''; /* Essencial para pseudo-elementos */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Fica acima do background original do header, mas abaixo do conteúdo */
  pointer-events: none; /* Garante que o pseudo-elemento não interfira com cliques */

  /* Quadriculado de 50x50 */
  background-image:
    linear-gradient(to right, rgba(108, 0, 138, 0.15) 1px, transparent 1px), /* Linhas verticais */
    linear-gradient(to bottom, rgba(108, 0, 138, 0.15) 1px, transparent 1px); /* Linhas horizontais */
  background-size: 60px 60px; /* Tamanho das células */
  background-repeat: repeat; /* Para o quadriculado se repetir */
  background-position: 0 0; /* Posição do quadriculado */

  /* MODO DE BLEND para o QUADRICULADO */
  /* 'overlay' é um bom ponto de partida. 'soft-light' também pode funcionar. */
  background-blend-mode: soft-light;
}

/* Garante que o conteúdo do header (textos, etc.) fique acima do quadriculado */
.header > * {
  position: relative;
  z-index: 2; /* Acima do pseudo-elemento */
}

/* Container para o efeito holográfico */
.header-image-container {
    position: relative;
    height: 65vh;
    max-width: 35%;
    cursor: pointer;
    background: transparent;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.base-image {
    width: auto;
    height: 65vh;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 15px rgba(156, 39, 176, 0.6)); /* Sombra roxa neon */
    transition: all 0.3s ease;
}

/* Adicionar brilhos de neon simples */
.neon-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Atrás da imagem principal */
    background: radial-gradient(circle at center, rgba(156, 39, 176, 0.6) 0%, rgba(156, 39, 176, 0) 70%);
    filter: blur(20px);
    opacity: 0.8;
    transform: scale(1.1);
    -webkit-mask-image: url('./assets/images/1.png');
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('./assets/images/1.png');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    transition: all 0.3s ease;
}

/* Efeito de hover - apenas aumenta e intensifica o brilho */
.header-image-container:hover {
    transform: scale(1.05); /* Aumenta o container inteiro */
}

.header-image-container:hover .base-image {
    filter: drop-shadow(0 0 25px rgba(156, 39, 176, 0.8)); /* Sombra neon mais intensa */
}

.header-image-container:hover .neon-glow {
    opacity: 1;
    filter: blur(15px);
    transform: scale(1.15); /* Expande um pouco mais o brilho */
}

.holo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Aumentar para ficar na frente */
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
}

.holo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: color-dodge; /* Alterado para efeito mais intenso */
    filter: hue-rotate(0deg) brightness(0.1) contrast(0.1) saturate(0.1);
    animation: hue-rotate 15s linear infinite;
}

/* Adicionar brilhos extras na frente */
.sparkle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-image: 
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 5%),
        radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 5%),
        radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 5%),
        radial-gradient(circle at 60% 80%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 5%);
    pointer-events: none;
    mix-blend-mode: overlay;
    -webkit-mask-image: url('./assets/images/1.png');
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('./assets/images/1.png');
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
}

.header-image-container:hover .holo-overlay {
    opacity: 1; /* Completamente visível no hover */
}

.header-image-container:hover .sparkle-overlay {
    opacity: 1;
    animation: sparkle 2s infinite;
}



@keyframes hue-rotate {
    0% { filter: hue-rotate(0deg) brightness(1.7) contrast(1.5) saturate(1.5); }
    50% { filter: hue-rotate(180deg) brightness(1.7) contrast(1.5) saturate(2); }
    100% { filter: hue-rotate(360deg) brightness(1.7) contrast(1.5) saturate(1.5); }
}

@keyframes sparkle {
    0%, 100% { background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%; }
    50% { background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%; }
}

.main {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 50%;
}

.main b{
    margin-bottom: 50px;
}

.description{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.card{
    margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.644);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: auto;
    padding: 15px;
    border-radius: 10px;
    flex-direction: column;
    transition: 0.3s ease-in-out;
    /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.295);*/
    line-height: 1.5rem;
}

.card:hover{
    background-color: red;
    cursor: pointer;
}

.bigger{
    font-size: 2.2rem;
}

.title{
    font-size: 3.5rem;
}

.social {
    display: flex;
}

/* Faixa de estatísticas */
.stats-banner {
    background-color: #9c27b0;
    color: white;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    height: auto;
}

.stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
    transition: 0.3s ease-in-out;
}

/* Ajuste para stats */
.stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: -5px;  /* Isso aproxima o YouTube do texto acima */
}

.stats-item .bigger {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.stats-item h1 {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1;
}

.stats-item .social {
    margin-top: 0.3rem;  /* Reduzido para aproximar do texto acima */
    display: flex;
    align-items: center;
}

.stats-item .social svg {
    margin-right: 0.5rem;
}

.stats-item .social p {
    font-size: 1rem;
    font-weight: 600;
}

/* Para manter o efeito hover */
.stats-item:hover {
    transform: scale(1.05);
}

/* Navbar styles */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: rgba(19, 0, 20, 0.9);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: 0.3s;
}

.nav-links a:hover {
    color: #9c27b0;
}

/* Videos section */
.videos {
    padding: 4rem 10%;
    background-color: #180024;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: rgb(173, 0, 226);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(400px, 320px)); /* 3 colunas com largura limitada */
    gap: 2rem;
    justify-content: center; /* Centraliza a grid horizontalmente */
}

.video-card {
    background: transparent; /* Remover o fundo branco do card */
    border-radius: 12px;
    overflow: visible; /* Permitir que o conteúdo extravase */
    box-shadow: none; /* Remover a sombra do card */
    transition: transform 0.3s ease;
    
    
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.thumbnail {
    position: relative;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Mover a sombra para a thumbnail */
    transition: box-shadow 0.3s ease;
}

.thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom; /* Isso pode ajudar a eliminar pequenos gaps */
}

/* Área de texto com fundo branco separado */
.video-info {
    background: rgb(255, 217, 255);
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: -2px; /* Sobreposição negativa para eliminar qualquer linha entre a imagem e o texto */
    height: 200px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    opacity: 0.8;
    transition: 0.3s;
}

.video-card:hover .play-button {
    opacity: 1;
}

.video-card h3 {
    padding: 1rem 1rem 0.5rem;
}

.video-card p {
    padding: 0 1rem 1rem;
    color: #666;
}

/* Adicione após o CSS da classe .description */

.user-count {
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    background: rgba(30, 0, 40, 0.3); /* Fundo escuro translúcido com tom roxo */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;
    padding: 1.2rem 1.8rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
}

/* Efeito de borda iluminada */
.user-count::before {
    content: "";
    position: absolute;
    inset: -1px; /* Ligeiramente maior que o container */
    padding: 1px; /* Espessura da borda */
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        #ff00ff 0%, /* Rosa intenso */
        #9c27b0 25%, /* Roxo */
        rgba(156, 39, 176, 0) 50%,
        rgba(156, 39, 176, 0) 75%,
        #9c27b0 90%, /* Roxo */
        #ff00ff 100% /* Rosa intenso */
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: borderRotate 6s linear infinite;
}

/* Efeito de brilho nas quinas */
.user-count::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 0, 255, 0.5) 0%,
        rgba(156, 39, 176, 0) 20%,
        rgba(156, 39, 176, 0) 80%,
        rgba(255, 0, 255, 0.5) 100%
    );
    border-radius: 16px;
    z-index: -1;
    opacity: 0.2;
    filter: blur(4px);
}

.user-count:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Quinas iluminadas nos quatro cantos */
.user-count .corner-top-left,
.user-count .corner-top-right,
.user-count .corner-bottom-left,
.user-count .corner-bottom-right {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: -1;
}

.user-count .corner-top-left {
    top: -3px;
    left: -3px;
    background: radial-gradient(circle at top left, rgba(255, 0, 255, 0.9), rgba(255, 0, 255, 0) 70%);
    filter: blur(3px);
}

.user-count .corner-top-right {
    top: -3px;
    right: -3px;
    background: radial-gradient(circle at top right, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0) 70%);
    filter: blur(3px);
}

.user-count .corner-bottom-left {
    bottom: -3px;
    left: -3px;
    background: radial-gradient(circle at bottom left, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0) 70%);
    filter: blur(3px);
}

.user-count .corner-bottom-right {
    bottom: -3px;
    right: -3px;
    background: radial-gradient(circle at bottom right, rgba(255, 0, 255, 0.9), rgba(255, 0, 255, 0) 70%);
    filter: blur(3px);
}

/* Ajustando o texto para melhor contraste com o fundo vidro */
.user-text h2 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9); /* Melhorar visibilidade */
}


.user-icon {
    color: #9c27b0;
    margin-right: 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.6);
}

.user-text {
    display: flex;
    flex-direction: column;
}

.user-text h2 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
}

.user-text h1 {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.2;
}

.count-highlight {
    color: #ff00ff; /* Cor mais vibrante */
    font-weight: 700;
    font-size: 1.8rem;
    padding: 0.1rem 0.5rem;
    border-radius: 8px;
    margin-right: 0.3rem;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
    display: inline-block;
    position: relative;
}

.count-highlight::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ff00ff;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}


.userlogo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin-right: 1.2rem;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.7);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 5px;
    object-fit: cover !important;
    display: block;
    flex-shrink: 0;
    box-sizing: content-box;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Borda sutil para o logo */
}



/* FOOTER*/

.footer {
    background-color: #13001A;
    color: white;
    padding: 4rem 0 1rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.footer-logo-img {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    background-color: white;
    padding: 0.5rem;
    border-radius: 50%;
}

.footer-logo h2 {
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(45deg, #9c27b0, #673ab7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-column h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: #9c27b0;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: #9c27b0;
}

.social-icons {
    display: flex;
    gap: 1rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: 0.4s ease-in-out;
}


.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: #999;
}

/* Responsividade */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-column {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-icons {
        justify-content: center;
    }
}

/* Seção Sobre - Novo layout com flexbox */
.sobre {
    padding: 6rem 0;
    background:linear-gradient(45deg, rgb(19, 0, 20), rgb(87, 0, 114));
    color: white;
}

.sobre-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sobre-flex-container {
    display: flex;
    gap: 4rem;
    margin-top: 3rem;
    align-items: flex-start; /* Alinha ao topo, não ao centro */
}

.sobre-texto {
    flex: 1;
}

.sobre-texto h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #9c27b0;
}

.sobre-texto p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* YouTube Membership CTA - Ajustado para card lateral */
.youtube-membership {
    flex: 0 0 350px; /* Largura fixa para o card */
    background: rgba(30, 0, 40, 0.3);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    align-self: stretch; /* Faz o card ter a mesma altura que o conteúdo */
    border: 1px solid rgba(156, 39, 176, 0.5); /* Borda sutil roxa */
    transition: transform 0.4s ease, box-shadow 0.4s ease-in-out;
}

/* Efeito de brilho sutil */
.youtube-membership::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    background: linear-gradient(
        135deg,
        #ff00ff 0%, /* Rosa intenso */
        #9c27b0 25%, /* Roxo */
        rgba(156, 39, 176, 0) 50%,
        rgba(156, 39, 176, 0) 75%,
        #9c27b0 90%, /* Roxo */
        #ff00ff 100% /* Rosa intenso */
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: borderRotate 6s linear infinite;
    transition: 0.4s ease-in-out;

}


/* Ajuste dos brilhos nos cantos com transições corretas */
.youtube-membership .corner-top-left,
.youtube-membership .corner-top-right,
.youtube-membership .corner-bottom-left,
.youtube-membership .corner-bottom-right {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: -1;

    filter: blur(3px);
    transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.youtube-membership .corner-top-left {
    top: -3px;
    left: -3px;
    background: radial-gradient(circle at top left, rgba(255, 0, 255, 0.9), rgba(255, 0, 255, 0) 70%);
    transition: 0.5s ease-in-out; 
}

.youtube-membership .corner-top-right {
    top: -3px;
    right: -3px;
    background: radial-gradient(circle at top right, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0) 70%);
    transition: 0.5s ease-in-out; 
}

.youtube-membership .corner-bottom-left {
    bottom: -3px;
    left: -3px;
    background: radial-gradient(circle at bottom left, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0) 70%);
    transition: 0.5s ease-in-out; 
}

.youtube-membership .corner-bottom-right {
    bottom: -3px;
    right: -3px;
    background: radial-gradient(circle at bottom right, rgba(255, 0, 255, 0.9), rgba(255, 0, 255, 0) 70%);
    transition: 0.5s ease-in-out; 
}

/* Efeito de hover para intensificar os brilhos */
.youtube-membership:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(156, 39, 176, 0.3);
    transition: 0.5s ease-in-out; 
}

.youtube-membership:hover .corner-top-left,
.youtube-membership:hover .corner-top-right,
.youtube-membership:hover .corner-bottom-left,
.youtube-membership:hover .corner-bottom-right {
    opacity: 1; /* Use 1 em vez de 1.2 para evitar problemas de transição */
    filter: blur(5px);
    transform: scale(1.2); /* Adicionei scale para um efeito mais visível */
    transition: 0.5s ease-in-out; /* Aumentei a duração da transição para 0.5s */
}

/* Adicionar animação da borda caso não exista */
@keyframes borderRotate {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 130% 0%;
    }
}


.yt-membership-content {
    position: relative;
    z-index: 2;
}

.yt-icon {
    background: linear-gradient(45deg, #ff0077, #9900ff);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.3);
    margin-top: 50px;
}

.youtube-membership h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.highlight {
    color: #9c27b0;
    display: block;
    margin-top: 0.3rem;
    position: relative;
}

.highlight::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #9c27b0;
}

.youtube-membership p {
    font-size: 1rem;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
    opacity: 0.9;
}

.membership-perks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.perk {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0.5rem;
    border-radius: 5px;
    width: 100%;
}

.perk svg {
    color: #9c27b0;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.yt-membership-btn {
    display: inline-block;
    background: linear-gradient(45deg, #ff0077, #9900ff);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

.yt-membership-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4);
}

/* Responsividade */
@media (max-width: 992px) {
    .sobre-flex-container {
        flex-direction: column;
    }
    
    .youtube-membership {
        width: 100%;
        flex-basis: auto;
    }
}

/* ========================================= */
/* MEDIA QUERIES PARA RESPONSIVIDADE   */
/* ========================================= */

/* Ajustes para telas menores (smartphones e tablets em modo retrato) */
@media (max-width: 768px) {
    /* --- Global / Body --- */
    body {
        font-size: 14px; /* Tamanho de fonte base um pouco menor */
    }

    /* --- Navbar --- */
    .navbar {
        flex-direction: column; /* Empilha logo e links */
        align-items: center;
        padding: 1rem 2%; /* Diminui o padding horizontal */
    }

    .nav-links {
        margin-top: 1rem;
        flex-wrap: wrap; /* Permite que os links quebrem linha */
        justify-content: center;
        width: 100%; /* Ocupa a largura total */
    }

    .nav-links li {
        margin: 0.5rem 1rem; /* Espaçamento entre os links empilhados */
    }

    .logo {
        font-size: 1.2rem; /* Logo um pouco menor */
    }

    /* --- Header (Seção Principal) --- */
    .header {
        flex-direction: column; /* Empilha o conteúdo principal e a imagem */
        height: auto; /* Altura automática para se ajustar ao conteúdo */
        min-height: 80vh; /* Garante uma altura mínima em telas menores */
        padding: 2rem 5%; /* Ajusta o padding */
        gap: 2rem; /* Reduz o espaçamento entre os elementos */
        justify-content: flex-start; /* Alinha o conteúdo ao topo */
    }

    .main {
        max-width: 100%; /* Permite que o conteúdo ocupe toda a largura */
        text-align: center; /* Centraliza o texto */
        padding-top: 2rem; /* Adiciona um pouco de padding no topo */
    }

    .title {
        font-size: 2.5rem; /* Título menor */
    }

    .description p {
        font-size: 0.9rem; /* Texto de descrição menor */
    }

    .user-count {
        flex-direction: column; /* Empilha o logo e o texto no card */
        padding: 1rem;
        margin-top: 1rem;
        width: auto; /* Ajusta largura */
        align-items: center; /* Centraliza o conteúdo do card */
    }

    .userlogo {
        margin-right: 0; /* Remove margem lateral */
        margin-bottom: 0.8rem; /* Adiciona margem inferior */
    }

    .user-text {
        align-items: center; /* Centraliza o texto do card */
    }

    /* Ajustes para o quadriculado do header */
    .header::before {
        background-size: 40px 40px; /* Quadrados menores no quadriculado */
        /* mask-image pode precisar de ajuste fino se o efeito não for o mesmo */
        mask-image: radial-gradient(ellipse 50% 65% at 50% 0%, #000 20%, transparent 100%);
    }

    /* --- Imagem do Header (Celular) --- */
    .header-image-container {
        height: 40vh; /* Altura menor para a imagem */
        max-width: 80%; /* Ocupa mais largura */
        margin-bottom: 1rem; /* Espaço abaixo da imagem */
    }

    .base-image {
        height: 40vh; /* Mantém a altura da imagem consistente com o container */
    }

    /* --- Stats Banner --- */
    .stats-banner {
        flex-direction: column; /* Empilha os itens de estatística */
        padding: 1rem 5%;
        height: auto;
    }

    .stats-item {
        padding: 1rem 0; /* Mais padding vertical */
    }

    .stats-item .bigger {
        font-size: 2rem; /* Menor */
    }

    .stats-item h1 {
        font-size: 1.2rem; /* Menor */
    }

    /* --- Vídeos --- */
    .videos {
        padding: 2rem 5%; /* Padding reduzido */
    }

    .section-title {
        font-size: 2rem; /* Título de seção menor */
        margin-bottom: 2rem;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 1 ou 2 colunas flexíveis */
        gap: 1.5rem; /* Gap menor */
    }

    .video-info {
        height: auto; /* Altura automática para o texto do vídeo */
    }

    /* --- Seção Sobre --- */
    .sobre-flex-container {
        flex-direction: column; /* Empilha texto e card */
        gap: 2rem; /* Reduz o espaçamento */
    }

    .sobre-texto h3 {
        font-size: 1.5rem; /* Título do texto menor */
    }

    .sobre-texto p {
        font-size: 1rem; /* Texto menor */
    }

    .youtube-membership {
        flex-basis: auto; /* Remove largura fixa, ocupa o que puder */
        width: 100%; /* Ocupa toda a largura disponível */
        padding: 1.5rem; /* Padding menor */
    }
    
    .yt-icon {
        margin-top: 20px; /* Ajusta margem do ícone do YT */
    }

    .youtube-membership h2 {
        font-size: 1.5rem; /* Título menor */
    }

    .membership-perks {
        align-items: center; /* Centraliza os perks */
    }

    /* --- Footer --- */
    .footer-links {
        flex-direction: column; /* Empilha as colunas do footer */
        align-items: center;
        text-align: center;
    }

    .footer-column {
        min-width: unset; /* Remove min-width */
        width: 100%; /* Ocupa toda a largura */
        padding: 0 0; /* Remove padding lateral */
    }

    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%); /* Centraliza o underline do título */
    }

    .social-icons {
        justify-content: center; /* Centraliza ícones sociais */
    }
}

/* Ajustes para celulares ainda menores (largura máxima de 480px) */
@media (max-width: 480px) {

    /* Primeiro, garantir que não haja overflow no body e html */
    html, body {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }

    .header {
        padding: 1.5rem 3%;
        min-height: 70vh;
    }

    .title {
        font-size: 2rem;
    }

    .user-text h1 {
        font-size: 1.2rem;
    }

    .user-count {
        padding: 0.8rem;
    }

    .userlogo {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .header-image-container {
        height: 35vh;
    }

    .base-image {
        height: 35vh;
    }

    .stats-item .bigger {
        font-size: 2rem;
    }

    .stats-item h1 {
        font-size: 1rem;
    }

    .video-grid {
        grid-template-columns: 1fr; /* Apenas 1 coluna para celulares muito pequenos */
    }

    .video-info {
        padding: 0.8rem;
    }

    
    .youtube-membership {
        flex: 0 0 auto;
        background: rgba(30, 0, 40, 0.3);
        border-radius: 15px;
        padding: 1.5rem 1rem; /* Aumentado padding vertical */
        text-align: center;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(156, 39, 176, 0.5);
        position: relative;
        overflow: visible;
        align-self: stretch;
        transition: transform 0.4s ease, box-shadow 0.4s ease-in-out;
        height: auto;
        width: 85%; /* Reduzido de 100% para 90% */
        margin: 0 auto 1rem;
        max-width: 320px; /* Reduzido um pouco para melhor encaixe */
    }

    /* Ajuste de conteúdo interno para evitar corte */
    .yt-membership-content {
        padding: 0 0.5rem; /* Adiciona um pequeno padding interno */
    }

    /* Ajuste da altura dos ícones */
    .yt-icon {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    /* Ajuste de fontes para melhor encaixe */
    .youtube-membership h2 {
        font-size: 1.2rem; /* Reduzido de 1.3rem */
        margin-bottom: 0.8rem;
        word-wrap: break-word; /* Permite quebra de palavras */
    }

    .youtube-membership p {
        font-size: 0.9rem; /* Texto mais compacto */
        line-height: 1.4;
    }

    .membership-perks {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    /* Garantir que o texto nos perks não seja cortado */
    .perk {
        padding: 0.3rem;
        font-size: 0.9rem;
    }

    .perk span {
        line-height: 1.3;
    }
    
    /* Garantir que o botão de membership esteja visível e centralizado */
    .yt-membership-btn {
        padding: 0.6rem 1.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        display: inline-block;
        width: auto; /* Garante que não ultrapasse os limites */
    }

    .sobre-flex-container{
        overflow: hidden;
    }

    /* Reordena os elementos no header para mobile */
    .header {
        padding: 1.5rem 3%;
        min-height: 70vh;
        flex-direction: column;
    }

    /* Colocando a imagem primeiro */
    .header-image-container {
        height: 35vh;
        order: 1; /* Isso coloca a imagem primeiro na ordem */
        margin-bottom: 1.5rem;
        max-width: 90%;
        overflow: hidden;
    }

    /* Colocando o conteúdo principal depois */
    .main {
        order: 2;
        max-width: 100%; /* Ocupa toda largura disponível */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -5rem;
    }

    .title {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .description {
        width: 100%;
    }

    /* Ajuste no card de usuários (vidro) */
    .user-count {
        padding: 0.8rem;
        margin-top: 1rem;
        flex-direction: row; /* Mantém na horizontal */
        width: 90%;
        max-width: 320px;
    }

    /* Garantindo que tudo seja visível */
    .base-image {
        height: 35vh;
        object-fit: contain;
    }

    .userlogo {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        margin-right: 0.8rem; /* Um pouco menor no mobile */
    }
}