/* ========================================
   RESET E VARIÁVEIS CSS
   ======================================== */

/* 📌 * (asterisco universal): Seleciona TODOS os elementos da página */
* {
    margin: 0;
    /* Remove margem padrão dos navegadores */
    padding: 0;
    /* Remove preenchimento padrão dos navegadores */
    box-sizing: border-box;
    /* Garante que padding/border não aumentam o tamanho total do elemento */
}

/* 📌 :root: Define variáveis CSS globais que podem ser usadas em toda a página */
/* Uso: var(--nome-da-variavel) */
:root {
    --netflix-red: #E50914;
    /* Vermelho característico da Netflix (hexadecimal) */
    --netflix-black: #141414;
    /* Preto profundo (fundo principal) */
    --netflix-dark-gray: #2F2F2F;
    /* Cinza escuro (elementos secundários) */
    --netflix-gray: #808080;
    /* Cinza médio */
    --netflix-light-gray: #B3B3B3;
    /* Cinza claro (textos secundários) */
    --netflix-white: #FFFFFF;
    /* Branco puro (textos principais) */
    --transition: all 0.3s ease;
    /* Animação suave para transições */
}

/* ========================================
   ESTILOS BASE
   ======================================== */

/* 📌 body: Estilos do corpo (fundo) da página */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Fonte limpa e comum */
    background-color: var(--netflix-black);
    /* Fundo preto sólido */
    color: var(--netflix-white);
    /* Cor padrão do texto (branco) */
    min-height: 100vh;
    /* Altura mínima = 100% da altura da tela (viewport height) */
    display: flex;
    /* Ativa Flexbox (layout moderno) */
    align-items: center;
    /* Centraliza itens verticalmente */
    justify-content: center;
    /* Centraliza itens horizontalmente */
    padding: 2rem;
    /* Espaçamento interno (afastamento das bordas) */
}

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 999;
    padding: 0.85rem 1.1rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: var(--netflix-white);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

body.light-mode {
    background-color: #f1f3f5;
    color: #111111;
}

body.light-mode .theme-toggle {
    background: rgba(20, 20, 20, 0.85);
    color: #ffffff;
}

body.light-mode h1,
body.light-mode .subtitle,
body.light-mode .welcome-copy,
body.light-mode .login-tag,
body.light-mode .login-note,
body.light-mode .profile figcaption {
    color: #2b2b2b;
}

body.light-mode .welcome-panel,
body.light-mode .login-panel,
body.light-mode .profiles,
body.light-mode .profile,
body.light-mode .login-bar {
    background: rgba(255, 255, 255, 0.9);
    color: #111111;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

body.light-mode .login-form input {
    background: #ffffff;
    border-color: #d1d5db;
    color: #111111;
}

body.light-mode .login-form input::placeholder {
    color: #6b7280;
}

body.light-mode .login-form button,
body.light-mode .welcome-button {
    background: #111111;
    color: #ffffff;
}

body.light-mode .profile img {
    border-color: #e5e7eb;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.light-mode .profile:hover img {
    border-color: var(--netflix-red);
    box-shadow: 0 16px 48px rgba(229, 9, 20, 0.25);
}

body.light-mode .subtitle,
body.light-mode .login-tag,
body.light-mode .login-note {
    color: #4b5563;
}

body.light-mode .page-logo,
body.light-mode .netflix-logo {
    color: var(--netflix-red);
}

/* 📌 main: Estilos do conteúdo principal */
main {
    max-width: 1200px;
    /* Largura máxima do container (responsividade) */
    width: 100%;
    /* Ocupa 100% da largura disponível */
    text-align: center;
    /* Alinha textos ao centro */
}

/* ========================================
   HEADER (CABEÇALHO) E LOGO
   ======================================== */

/* 📌 header: Estilos do cabeçalho */
header {
    margin-bottom: 3rem;
    /* Espaçamento inferior (afastamento do conteúdo abaixo) */
    animation: slideDown 0.8s ease-out;
    /* Animação de deslize suave */
    position: relative;
    /* Para posicionamento interno absoluto do logo */
    text-align: center;
    /* Mantém título centralizado */
}

/* ============================
   BARRA DE LOGIN NO TOPO
   ============================ */
.login-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
    margin-bottom: 2rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.netflix-logo,
.page-logo {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.35rem;
    color: var(--netflix-red);
    text-transform: uppercase;
}

.page-logo {
    display: block;
    font-size: 1rem;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.profile-brand {
    display: flex;
    align-items: center;
}

.profile-brand .page-logo {
    margin-right: 0.5rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.login-form input {
    min-width: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: var(--netflix-white);
    padding: 1rem 1.1rem;
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
}

.login-form input:focus {
    border-color: var(--netflix-red);
    box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.12);
}

.login-form button {
    width: 100%;
    padding: 1rem 1.4rem;
    background: var(--netflix-red);
    border: none;
    border-radius: 14px;
    color: var(--netflix-white);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.login-form button:hover {
    background: #ff1a2a;
    transform: translateY(-1px);
}

.login-tag {
    font-size: 0.95rem;
    color: var(--netflix-light-gray);
}

.welcome-screen {
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0 4rem;
    background: linear-gradient(180deg, #0b0b0b 0%, #111 100%);
}

.welcome-panel {
    width: 100%;
    max-width: 640px;
    padding: 2.5rem 2.2rem;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.welcome-logo {
    display: inline-block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.45rem;
    color: var(--netflix-red);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
}

.welcome-panel h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: var(--netflix-white);
}

.welcome-copy {
    font-size: 1rem;
    color: var(--netflix-light-gray);
    margin-bottom: 2rem;
}

.welcome-button {
    width: 100%;
    padding: 1rem 1.4rem;
    background: var(--netflix-red);
    border: none;
    border-radius: 14px;
    color: var(--netflix-white);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.welcome-button:hover {
    background: #ff1a2a;
    transform: translateY(-1px);
}

.login-screen {
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0 4rem;
    background-image:
        radial-gradient(circle at top right, rgba(229, 9, 20, 0.2), transparent 30%),
        radial-gradient(circle at left center, rgba(255, 255, 255, 0.08), transparent 20%),
        linear-gradient(180deg, #090909 0%, #111 100%);
}

.login-panel {
    width: 100%;
    max-width: 640px;
    padding: 2.4rem 2.2rem;
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    box-shadow: 0 36px 100px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}

.login-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 35%);
    opacity: 0.55;
    pointer-events: none;
}

.login-panel>* {
    position: relative;
    z-index: 1;
}

.login-note {
    display: block;
    margin-top: 0.45rem;
    color: var(--netflix-light-gray);
    font-size: 0.95rem;
    line-height: 1.5;
}

.profile-page {
    display: none;
}

.profile-page.active {
    display: block;
}

.hidden {
    display: none !important;
}

/* 📌 .logo: Estilo da imagem da logo Netflix */
.logo {
    height: 40px;
    /* Altura da logo em pixels */
    width: auto;
    /* Largura automática (mantém proporção) */
    object-fit: contain;
    /* Contém a imagem sem distorcer */
    filter: drop-shadow(0 4px 12px rgba(229, 9, 20, 0.4));
    /* Sombra vermelha da Netflix */
    transition: all 0.3s ease;
    /* Animação ao interagir */
}

/* 📌 Logo com efeito ao passar mouse */
.logo:hover {
    filter: drop-shadow(0 8px 20px rgba(229, 9, 20, 0.6));
    /* Sombra mais forte */
    transform: scale(1.02);
    /* Aumenta levemente */
}

/* 📌 h1: Estilos do título principal */
h1 {
    font-size: 3.5rem;
    /* Tamanho da fonte em relação à raiz (rem = 16px por padrão) */
    font-weight: 600;
    /* Peso da fonte mais pesado para profissionalismo */
    letter-spacing: -0.02em;
    /* Espaço entre letras (negativo = mais próximas) */
    margin-bottom: 0.8rem;
    /* Espaço abaixo do título */
    color: var(--netflix-white);
    /* Cor do texto */
}

/* 📌 .subtitle: Estilo do subtítulo profissional */
.subtitle {
    font-size: 1rem;
    /* Tamanho padrão */
    color: var(--netflix-light-gray);
    /* Cinza claro para destacar menos */
    font-weight: 300;
    /* Peso leve para elegância */
    letter-spacing: 0.05em;
    /* Espaço entre letras aumentado */
    margin-top: 0.5rem;
    /* Pequeno espaço acima */
    margin-bottom: 0;
    /* Sem espaço abaixo */
}

/* ========================================
   SEÇÃO DE PERFIS (GALERIA)
   ======================================== */

/* 📌 .profiles: Container que organiza os perfis em uma linha horizontal com efeito profissional */
.profiles {
    display: flex;
    /* Ativa Flexbox para linha horizontal */
    flex-wrap: nowrap;
    /* Mantém todos os perfis em uma linha */
    justify-content: center;
    /* Centraliza os perfis horizontalmente */
    align-items: center;
    /* Alinha os perfis pelo centro verticalmente */
    gap: 2.5rem;
    /* Espaçamento entre os perfis */
    width: min(100%, 980px);
    /* Limita a largura do bloco de perfis */
    max-width: 980px;
    /* Largura máxima da grade */
    margin: 3rem auto 0;
    /* Espaço topo e centraliza o bloco */
    padding: 2.5rem;
    /* Espaçamento interno */
    border-radius: 16px;
    /* Bordas arredondadas */
    background: linear-gradient(135deg, rgba(47, 47, 47, 0.25) 0%, rgba(20, 20, 20, 0.05) 100%);
    /* Efeito glassmorphism */
    backdrop-filter: blur(12px);
    /* Desfoca o fundo através do container */
    list-style: none;
    list-style-type: none;
    overflow-x: auto;
    /* Permite scroll horizontal se necessário */
    animation: fadeIn 0.8s ease-out 0.2s both;
    /* Animação com delay */
}

.profiles li {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* ========================================
   PERFIL INDIVIDUAL
   ======================================== */

/* 📌 .profile: Estilos de cada card de perfil */
.profile {
    cursor: pointer;
    /* Muda cursor para 'mão' indicando que é clicável */
    transition: var(--transition);
    /* Aplica animação suave em mudanças (0.3s) */
    position: relative;
    /* Contexto de posicionamento para elementos filhos */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

}

/* 📌 .profile:hover: Estilos quando o mouse passa sobre o perfil */
.profile:hover {
    transform: scale(1.05);
    /* Aumenta o perfil em 5% quando mouse passa (zoom) */
}

/* 📌 .profile figure: Estilo da figura (imagem + legenda) */
.profile figure {
    display: flex;
    /* Ativa Flexbox */
    flex-direction: column;
    /* Organiza items em coluna (vertical) */
    align-items: center;
    /* Centraliza items horizontalmente */
    gap: 1rem;
    /* Espaço entre itens (imagem e texto) */
}

/* 📌 .profile img: Estilos da imagem do perfil com design moderno */
.profile img {
    width: 170px;
    /* Largura aumentada para design profissional */
    height: 170px;
    /* Altura aumentada */
    border-radius: 12px;
    /* Borda menos redonda, mais moderna e profissional */
    object-fit: cover;
    /* Corta a imagem para caber perfeitamente */
    border: 2px solid var(--netflix-dark-gray);
    /* Borda cinza discreta */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Animação suave profissional */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    /* Sombra mais profunda e elegante */
}

/* 📌 .profile:hover img: Estilo da imagem ao passar o mouse */
.profile:hover img {
    border-color: var(--netflix-red);
    /* Muda borda para vermelho Netflix */
    box-shadow: 0 16px 48px rgba(229, 9, 20, 0.4);
    /* Sombra vermelha intensa e elegante */
    transform: translateY(-8px) scale(1.05);
    /* Levanta e aumenta a imagem suavemente */
}

/* 📌 .profile figcaption: Estilos do nome do perfil */
.profile figcaption {
    font-size: 1.2rem;
    /* Tamanho da fonte (1.2x o tamanho padrão 16px = ~19px) */
    font-weight: 400;
    /* Peso normal */
    color: var(--netflix-light-gray);
    /* Cor cinza claro */
    transition: var(--transition);
    /* Animação suave */
    text-align: center;
    /* Centraliza o texto */
}

/* 📌 .profile:hover figcaption: Estilo do nome ao passar o mouse */
.profile:hover figcaption {
    color: var(--netflix-white);
    /* Muda cor para branco */
    font-weight: 500;
    /* Deixa o texto um pouco mais grosso (semi-bold) */
}

/* ========================================
   ACESSIBILIDADE (Foco no teclado)
   ======================================== */

/* 📌 .profile:focus: Estilos quando perfil recebe foco (navegação com Tab) */
.profile:focus {
    outline: 2px solid var(--netflix-red);
    /* Borda vermelha ao focar -->
    outline-offset: 4px;  /* Deslocamento da borda para fora do elemento */
}

/* ========================================
   RESPONSIVIDADE (Mobile & Tablets)
   ======================================== */

/* 📌 @media (max-width: 1024px): Estilos para TABLETS GRANDES (até 1024px de largura) */
@media (max-width: 1024px) {
    body {
        padding: 1.5rem;
    }

    main {
        max-width: 100%;
    }

    h1 {
        font-size: 3rem;
    }

    .subtitle {
        font-size: 0.95rem;
    }

    .welcome-panel,
    .login-panel {
        max-width: 580px;
        padding: 2.2rem 2rem;
    }

    .welcome-logo {
        font-size: 1.9rem;
    }

    .welcome-panel h1 {
        font-size: 2.5rem;
    }

    .login-bar {
        flex-direction: column;
        gap: 1.2rem;
    }

    .login-brand {
        width: 100%;
    }

    .login-form {
        width: 100%;
    }

    .profiles {
        gap: 2rem;
        padding: 2rem;
    }

    .profile img {
        width: 160px;
        height: 160px;
    }

    .profile figcaption {
        font-size: 1.1rem;
    }
}

/* 📌 @media (max-width: 768px): Estilos para TABLETS (601px - 768px) */
@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    main {
        max-width: 100%;
    }

    h1 {
        font-size: 2.3rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    .welcome-panel,
    .login-panel {
        max-width: 520px;
        padding: 2rem 1.5rem;
        border-radius: 24px;
    }

    .welcome-logo {
        font-size: 1.75rem;
        margin-bottom: 1.2rem;
    }

    .welcome-panel h1 {
        font-size: 2.1rem;
        margin-bottom: 0.8rem;
    }

    .welcome-copy {
        font-size: 0.95rem;
        margin-bottom: 1.8rem;
    }

    .welcome-button,
    .login-form button {
        padding: 0.9rem 1.2rem;
        font-size: 0.95rem;
    }

    .login-form input {
        padding: 0.9rem 1rem;
        font-size: 0.95rem;
    }

    .login-bar {
        flex-direction: column;
        gap: 1rem;
        padding: 0.9rem 1.2rem;
        border-radius: 12px;
    }

    .login-brand {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .netflix-logo {
        font-size: 1.2rem;
    }

    .page-logo {
        font-size: 1rem;
    }

    .profile-header {
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    .login-form {
        width: 100%;
    }

    .login-tag {
        font-size: 0.9rem;
    }

    .login-note {
        font-size: 0.9rem;
    }

    .profiles {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
        margin: 2rem auto 0;
        padding: 1.8rem;
        border-radius: 16px;
    }

    .profile {
        width: auto;
        min-width: 140px;
    }

    .profile img {
        width: 140px;
        height: 140px;
        border-radius: 10px;
    }

    .profile figcaption {
        font-size: 0.95rem;
    }

    .logo {
        height: 32px;
    }
}

/* 📌 @media (max-width: 600px): Estilos para CELULARES GRANDES (481px - 600px) */
@media (max-width: 600px) {
    body {
        padding: 0.8rem;
        min-height: 100vh;
    }

    main {
        max-width: 100%;
    }

    h1 {
        font-size: 2rem;
        margin-bottom: 0.6rem;
    }

    .subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .welcome-screen {
        min-height: calc(100vh - 2rem);
        padding: 2rem 0 2rem;
    }

    .login-screen {
        min-height: calc(100vh - 2rem);
        padding: 2rem 0 2rem;
    }

    .welcome-panel,
    .login-panel {
        max-width: 100%;
        width: 96%;
        padding: 1.8rem 1.2rem;
        border-radius: 20px;
    }

    .welcome-logo {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .welcome-panel h1 {
        font-size: 1.85rem;
        margin-bottom: 0.7rem;
    }

    .welcome-copy {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        line-height: 1.4;
    }

    .welcome-button,
    .login-form button {
        width: 100%;
        padding: 0.85rem 1rem;
        font-size: 0.9rem;
        border-radius: 12px;
    }

    .login-form {
        gap: 0.8rem;
    }

    .login-form input {
        width: 100%;
        padding: 0.85rem 0.9rem;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    .login-bar {
        flex-direction: column;
        gap: 0.8rem;
        padding: 0.8rem 1rem;
        border-radius: 10px;
        width: 96%;
        margin: 1rem auto 1.5rem;
    }

    .login-brand {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .netflix-logo {
        font-size: 1.1rem;
        letter-spacing: 0.3rem;
    }

    .page-logo {
        font-size: 0.95rem;
    }

    .profile-header {
        flex-direction: column;
        gap: 0.7rem;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .login-tag {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .login-note {
        font-size: 0.85rem;
        margin-top: 0.35rem;
    }

    .profiles {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 1.2rem;
        width: 96%;
        max-width: 100%;
        margin: 1.5rem auto 0;
        padding: 1.5rem 1rem;
        border-radius: 14px;
    }

    .profile {
        width: auto;
        min-width: 110px;
    }

    .profile:hover {
        transform: scale(1.03);
    }

    .profile figure {
        gap: 0.7rem;
    }

    .profile img {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }

    .profile:hover img {
        box-shadow: 0 12px 32px rgba(229, 9, 20, 0.35);
        transform: translateY(-6px) scale(1.04);
    }

    .profile figcaption {
        font-size: 0.85rem;
    }

    .logo {
        height: 28px;
    }
}

/* 📌 @media (max-width: 480px): Estilos para CELULARES PEQUENOS (até 480px) */
@media (max-width: 480px) {
    body {
        padding: 0.5rem;
    }

    main {
        max-width: 100%;
    }

    h1 {
        font-size: 1.7rem;
        margin-bottom: 0.5rem;
    }

    .subtitle {
        font-size: 0.8rem;
        margin-bottom: 1.2rem;
    }

    .welcome-screen,
    .login-screen {
        min-height: calc(100vh - 1rem);
        padding: 1.5rem 0;
    }

    .welcome-panel,
    .login-panel {
        max-width: 100%;
        width: 98%;
        padding: 1.6rem 1rem;
        border-radius: 18px;
        margin: 0 auto;
    }

    .welcome-logo {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
        letter-spacing: 0.3rem;
    }

    .welcome-panel h1 {
        font-size: 1.65rem;
        margin-bottom: 0.6rem;
    }

    .welcome-copy {
        font-size: 0.85rem;
        margin-bottom: 1.2rem;
        line-height: 1.3;
    }

    .welcome-button,
    .login-form button {
        width: 100%;
        padding: 0.8rem 0.9rem;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    .login-form {
        gap: 0.7rem;
        margin-top: 1.2rem;
    }

    .login-form input {
        width: 100%;
        padding: 0.8rem 0.85rem;
        font-size: 0.85rem;
        border-radius: 8px;
    }

    .login-bar {
        gap: 0.6rem;
        padding: 0.7rem 0.9rem;
        border-radius: 8px;
        width: 98%;
        margin: 0.8rem auto 1.2rem;
        flex-direction: column;
    }

    .login-brand {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .netflix-logo {
        font-size: 1rem;
        letter-spacing: 0.25rem;
    }

    .page-logo {
        font-size: 0.9rem;
    }

    .profile-header {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        margin-bottom: 1.2rem;
    }

    .login-tag {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .login-note {
        font-size: 0.8rem;
        margin-top: 0.3rem;
    }

    .profiles {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        width: 98%;
        max-width: 100%;
        margin: 1.2rem auto 0;
        padding: 1.2rem 0.8rem;
        border-radius: 12px;
    }

    .profile {
        width: 100%;
        max-width: 320px;
    }

    .profile:hover {
        transform: scale(1.02);
    }

    .profile figure {
        gap: 0.6rem;
    }

    .profile img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .profile:hover img {
        box-shadow: 0 8px 24px rgba(229, 9, 20, 0.3);
        transform: translateY(-4px) scale(1.03);
    }

    .profile figcaption {
        font-size: 0.8rem;
    }

    .logo {
        height: 24px;
    }
}

/* ========================================
   ANIMAÇÕES
   ======================================== */

/* 📌 @keyframes fadeIn: Define uma animação personalizada chamada 'fadeIn' */
@keyframes fadeIn {
    from {
        /* Estado INICIAL da animação */
        opacity: 0;
        /* Elemento invisível (0% visível) */
        transform: translateY(20px);
        /* Começa 20px abaixo */
    }

    to {
        /* Estado FINAL da animação */
        opacity: 1;
        /* Elemento visível (100%) */
        transform: translateY(0);
        /* Volta para posição normal */
    }
}

/* 📌 @keyframes slideDown: Animação de deslize suave para logo e header */
@keyframes slideDown {
    from {
        /* Estado INICIAL: elemento vem de cima */
        opacity: 0;
        /* Inicia invisível */
        transform: translateY(-40px);
        /* Começa 40px acima */
    }

    to {
        /* Estado FINAL: elemento em posição normal */
        opacity: 1;
        /* Elemento visível */
        transform: translateY(0);
        /* Desceu para posição correta */
    }
}

/* 📌 main: Animação ao carregar a página */
main {
    animation: fadeIn 0.8s ease-out;
    /* 0.8s = duração, ease-out = começa rápido e desacelera */
}

/* 📌 .profile: Cada perfil recebe a animação fadeIn */
.profile {
    animation: fadeIn 0.8s ease-out;
}

/* 📌 .profile:nth-child(1): Primeiro perfil começa DEPOIS de 0.1s */
.profile:nth-child(1) {
    animation-delay: 0.1s;
    /* Atraso da animação (efeito em cascata) */
}

/* 📌 .profile:nth-child(2): Segundo perfil começa DEPOIS de 0.2s */
.profile:nth-child(2) {
    animation-delay: 0.2s;
    /* Cada perfil aparece em sequência */
}