/* RESET GLOBAL: remove margem e padding padrão e faz box-sizing incluir border/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY: fundo escuro gradiente, fonte e centraliza lógica do layout */
body {
    background: linear-gradient(135deg, #0b0b0b 0%, #1a1a1a 100%); /* gradiente com estilo "Netflix" */
    color: #ffffff; /* cor do texto clara para contraste */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* fonte legível */
    min-height: 100vh; /* garante altura mínima para ocupar a tela toda */
    display: flex; /* utiliza flex para centralizar conteúdo */
    align-items: center; /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
}

/* Tema claro */
body.light-mode {
    background: linear-gradient(135deg, #f2f2f2 0%, #e6e6e6 100%);
    color: #1a1a1a;
}

body.light-mode h1 {
    color:  #E50914;
    text-shadow: 0 4px 20px rgba(5, 5, 5, 0.3); /* sombra vermelha suave */
}

body.light-mode h2 {
    color: #000000;
}

body.light-mode figure img {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.light-mode figcaption {
    color: #333333;
}

body.light-mode .profile:hover::before {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
}

.footer-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 100;
    flex-wrap: wrap;
    max-width: 200px;
}

.theme-toggle, .add-profile, .manage-profiles {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.theme-toggle:hover, .add-profile:hover, .manage-profiles:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

body.light-mode .theme-toggle, body.light-mode .add-profile, body.light-mode .manage-profiles {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.85);
    color: #1a1a1a;
}


/* MAIN: define largura máxima, padding e centralização de texto */
main {
    width: 100%;
    max-width: 1200px; /* limite de layout para não esticar demais */
    padding: 40px 20px; /* espaçamento interno */
    text-align: center; /* centraliza os elementos textuais */
}

/* HEADER: espaçamento inferior do título */
header {
    margin-bottom: 60px;
}

/* TÍTULO: tamanho grande, negrito e sombra por destaque */

h1 {
    font-size: 3.5rem; /* tamanho de fonte grande */
    font-weight: 700; /* peso negrito */
    letter-spacing: 2px; /* espaçamento entre letras */
    margin-bottom: 20px; /* espaçamento abaixo do título */
    color: #E50914; /* vermelho para contraste */
    text-shadow: 0 4px 20px rgba(245, 242, 242, 0.3); /* sombra vermelha suave */
}

h2 {
    font-size: 2.5rem; /* tamanho de fonte grande */
    font-weight: 700; /* peso negrito */
    letter-spacing: 2px; /* espaçamento entre letras */
    margin-bottom: 40px; /* espaçamento abaixo do título */
    color: #ffffff; /* branco para contraste */
    text-shadow: 0 4px 20px rgba(229, 9, 20, 0.3); /* sombra vermelha suave */
}

/* SEÇÃO DE PERFIS: lista horizontal sem marcador e responsiva */
/* SEÇÃO DE PERFIS: lista horizontal sem marcador e responsiva */
section.profiles .profiles-list {
    list-style: none;
    list-style-type: none;
    margin: 0; /* remove margin padrão */
    padding: 0; /* remove padding padrão */
    display: flex; /* layout em linha adaptável */
    flex-wrap: wrap; /* permitir quebra de linha em telas pequenas */
    justify-content: center; /* centralizar itens no eixo principal */
    gap: 70px; /* espaço entre perfil e perfil */
}

section.profiles .profiles-list li {
    list-style: none;
    list-style-type: none;
}

/* Remove numeração da lista ordenada de perfis */
section.profiles ol {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 70px;
}

section.profiles ol li {
    list-style: none;
    list-style-type: none;
}

/* PERFIL: cada li.profile é um cartão clicável */
.profile {
    position: relative; /* se torna contexto para pseudo-elemento overlay */
    cursor: pointer; /* indica que é clicável */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* animação suave de hover */
}

/* HOVER NO PERFIL: aumenta o tamanho para feedback de interação */
.profile:hover {
    transform: scale(1.1);
}

/* HOVER NO PERFIL: leve aumento para interação */
.profile:hover {
    transform: scale(1.1); /* zoom do cartão ao passar mouse */
}

/* FIGURE: posição para overlay e inline-block para dimensionamento */
figure {
    position: relative; /* necessário para pseudo-elemento absoluto */
    display: inline-block; /* mantém dimensão de conteúdo */
}

/* IMAGEM: tamanho, borda arredondada, e efeito de sombra */
figure img {
    width: 150px;
    height: 150px;
    border-radius: 8px; /* cantos arredondados */
    object-fit: cover; /* ajusta imagem à área sem distorcer */
    border: 3px solid transparent; /* borda inicial invisível */
    transition: all 0.3s ease; /* transição suave ao hover */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); /* sombra escura */
}

/* HOVER IMAGEM: borda e sombra de destaque com cor Netflix */
.profile:hover figure img {
    border-color: #E50914;
    box-shadow: 0 8px 32px rgba(229, 9, 20, 0.5); /* tom vermelho mais forte */
}

/* LEGEND A IMAGEM: espaçamento e estilo de texto */
figcaption {
    margin-top: 15px; /* distância entre imagem e legenda */
    font-size: 1.2rem; /* tamanho do texto */
    font-weight: 500; /* peso médio */
    color: #cccccc; /* cinza claro */
    transition: all 0.3s ease; /* transição suave ao hover */
}

/* HOVER LEGEND: destaque com cor vermelha e fonte mais pesada */
.profile:hover figcaption {
    color: #E50914;
    font-weight: 600;
}

/* PSEUDO-OVERLAY: detalhamento de lighting no perfil */
.profile::before {
    content: '';
    position: absolute; /* absoluto relativo ao figure */
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(229, 9, 20, 0.1) 0%, transparent 70%); /* efeito glow */
    border-radius: 8px; /* mesma borda da imagem */
    opacity: 0; /* invisível até hover */
    transition: opacity 0.3s ease; /* fade-in */
    pointer-events: none; /* não impede clique no conteúdo */
}

/* HOVER OVERLAY: mostra levemente o brilho */
.profile:hover::before {
    opacity: 1;
}

/* RESPONSIVIDADE TABLET: ajustes de tamanhos e espaçamento */
/* Desktop grande - acima de 1024px */
@media (min-width: 1024px) {
    h2 {
        font-size: 2.8rem;
    }
}

/* Tablet - entre 768px e 1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.4rem;
        letter-spacing: 1.5px;
    }

    h2 {
        font-size: 2rem;
    }

    section.profiles .profiles-list {
        gap: 40px;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    section.profiles ol {
        gap: 40px;
        flex-wrap: wrap;
    }

    section.profiles .profiles-list .profile {
        flex: 1 1 calc(50% - 40px);
        max-width: calc(50% - 40px);
    }

    section.profiles ol .profile {
        flex: 1 1 calc(50% - 40px);
        max-width: calc(50% - 40px);
    }

    figure img {
        width: 140px;
        height: 140px;
    }

    .profile::before {
        width: 140px;
        height: 140px;
    }

    figcaption {
        font-size: 1rem;
    }
}

/* Tablet pequeno/landscape - entre 600px e 768px */
@media (min-width: 600px) and (max-width: 767px) {
    h1 {
        font-size: 2rem;
        letter-spacing: 1px;
    }

    h2 {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

    main {
        padding: 30px 15px;
    }

    header {
        margin-bottom: 30px;
    }

    section.profiles .profiles-list {
        gap: 30px;
        flex-wrap: wrap;
    }

    section.profiles ol {
        gap: 30px;
        flex-wrap: wrap;
    }

    section.profiles .profiles-list .profile {
        flex: 1 1 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }

    section.profiles ol .profile {
        flex: 1 1 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }

    figure img {
        width: 120px;
        height: 120px;
    }

    .profile::before {
        width: 120px;
        height: 120px;
    }

    figcaption {
        font-size: 0.95rem;
    }
}

/* Mobile médio - entre 480px e 599px */
@media (min-width: 480px) and (max-width: 599px) {
    h1 {
        font-size: 1.8rem;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 1.3rem;
        margin-bottom: 25px;
    }

    main {
        padding: 20px 15px;
    }

    header {
        margin-bottom: 30px;
    }

    section.profiles .profiles-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
        padding: 0;
    }

    section.profiles ol {
        flex-wrap: wrap;
        justify-content: center;
        gap: 25px;
        padding: 0;
    }

    section.profiles .profiles-list .profile {
        flex: 1 1 calc(50% - 25px);
        max-width: calc(50% - 25px);
    }

    section.profiles ol .profile {
        flex: 1 1 calc(50% - 25px);
        max-width: calc(50% - 25px);
    }

    figure img {
        width: 115px;
        height: 115px;
    }

    .profile::before {
        width: 115px;
        height: 115px;
    }

    figcaption {
        font-size: 0.9rem;
    }

    .footer-buttons {
        bottom: 15px;
        right: 15px;
        gap: 8px;
    }
}

/* Mobile pequeno - abaixo de 480px */
@media (max-width: 479px) {
    h1 {
        font-size: 1.5rem;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    main {
        padding: 15px 10px;
    }

    header {
        margin-bottom: 25px;
    }

    section.profiles .profiles-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0;
    }

    section.profiles ol {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        padding: 0;
    }

    section.profiles .profiles-list .profile {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    section.profiles ol .profile {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }

    figure img {
        width: 95px;
        height: 95px;
    }

    .profile::before {
        width: 95px;
        height: 95px;
    }

    figcaption {
        font-size: 0.8rem;
        margin-top: 10px;
    }

    .footer-buttons {
        bottom: 12px;
        right: 12px;
        gap: 6px;
        flex-direction: column;
    }

    .theme-toggle, .add-profile, .manage-profiles {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* Extra small - para dispositivos com menos de 360px */
@media (max-width: 359px) {
    h1 {
        font-size: 1.3rem;
    }

    h2 {
        font-size: 0.95rem;
    }

    section.profiles .profiles-list {
        gap: 15px;
    }

    section.profiles ol {
        gap: 15px;
    }

    figure img {
        width: 85px;
        height: 85px;
    }

    .profile::before {
        width: 85px;
        height: 85px;
    }

    figcaption {
        font-size: 0.75rem;
    }
}

/* Gerenciar perfis - texto simples com borda */
.profile-management {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 28px;
    display: inline-block;
    background: rgba(0,0,0,0.3);
}

body.light-mode .profile-management {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(255,255,255,0.85);
    color: #1a1a1a;
}