:root{
    /* Variáveis de cor reutilizáveis */
    --bg:#141414; /* cor principal de fundo */
    --surface:#1f1f1f; /* cor de superfícies/espaços internos */
    --accent:#e50914; /* cor de destaque (vermelho Netflix) */
    --brand-dark: #8b0000; /* cor vermelha escura para o nome Netflix */
    --muted:#8c8c8c; /* tom acinzentado para textos secundários */
    --text:#e6e6e6; /* cor principal do texto */
}

/* Tema claro: substitui as variáveis quando data-theme="light" estiver presente no html */
[data-theme="light"]{
    --bg: #ffffff; /* fundo claro (branco) */
    --surface: #ffffff; /* superfícies claras */
    --accent: #e50914; /* mantém destaque vermelho */
    --muted: #4b4b4b; /* texto secundário mais escuro em tema claro */
    --text: #111111; /* texto principal escuro */
}

*{
    box-sizing:border-box; /* faz padding/border contar dentro da largura/altura */
}

html, body{
    height:100%; /* garante que a altura ocupe toda a viewport */
}

body{
    margin:0; /* reseta margem padrão do navegador */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; /* pilha de fontes legível */
    background:linear-gradient(180deg,var(--bg) 0%, #0f0f0f 100%); /* gradiente sutil de fundo */
    color:var(--text); /* cor principal do texto */
    min-height:100vh; /* assegura altura mínima de tela inteira */
    display:flex; /* define um layout flex para alinhar conteúdo verticalmente */
    flex-direction:column; /* empilha elementos verticalmente */
    align-items:center; /* centraliza horizontalmente o conteúdo */
}

header{
    width:100%; /* header ocupa toda a largura */
    padding:24px 32px; /* espaçamento interno superior/inferior e laterais */
    position:relative; /* permite posicionar o botão de tema dentro do header */
}

header h1{
    margin:0; /* remove margem padrão do h1 */
    color:var(--brand-dark); /* nome Netflix em vermelho escuro */
    font-weight:700; /* aumenta a ênfase do título */
    letter-spacing:1px; /* espaçamento entre letras para estilo */
}

/* botão de alternância de tema */
.theme-controls{
    position:absolute; /* posicionado dentro do header */
    right:32px; /* alinhar com o padding do header */
    top:24px; /* alinhar com o padding superior */
    display:flex; /* alinhamento horizontal dos botões */
    gap:8px; /* espaço entre botões */
}

.theme-toggle{
    background:transparent; /* sem fundo para combinar com header */
    border:1px solid rgba(255,255,255,0.08); /* leve contorno */
    color:var(--text); /* usa cor do tema */
    padding:6px 10px; /* espaçamento interno */
    border-radius:8px; /* cantos arredondados */
    cursor:pointer; /* indica clicável */
    font-size:1rem; /* tamanho legível */
}

.theme-toggle:focus-visible{outline:2px solid rgba(229,9,20,0.25)}

main{
    width:100%; /* ocupa toda a largura disponível */
    max-width:960px; /* limita largura máxima para leitura */
    padding:40px 24px; /* espaçamento interno */
    display:flex; /* usa flex para estrutura simples */
    flex-direction:column; /* empilha conteúdo principal */
    align-items:center; /* centraliza conteúdo dentro do main */
}

h2#who-heading{
    margin:0 0 24px 0; /* margem inferior para separar do conteúdo */
    font-size:2rem; /* tamanho grande para hierarquia */
    text-align:center; /* centraliza o título secundário */
}

.profiles{
    list-style:none; /* remove marcadores da lista */
    padding:0; /* remove padding padrão */
    margin:0; /* remove margem padrão */
    width:100%; /* ocupa largura disponível do main */
    display:flex; /* exibe os perfis em linha (lado a lado) */
    gap:22px; /* espaçamento entre os itens */
    flex-wrap:nowrap; /* mantém todos os perfis na mesma linha */
    justify-content:center; /* centraliza os itens horizontalmente */
    align-items:flex-start; /* alinha topo dos itens uniformemente */
    overflow-x:auto; /* permite scroll horizontal em telas pequenas */
}

/* remove marcadores e espaçamentos da lista ordenada aninhada */
.profile-order{
    list-style:none; /* esconde números visíveis da lista ordenada */
    padding:0; /* remove padding padrão */
    margin:0; /* remove margem padrão */
    width:100%;
}

.profile-order > li{
    width:100%; /* garante que o conteúdo interno ocupe toda a largura */
}

.profile{
    width:100%; /* permite que o item cresça conforme necessário */
    max-width:160px; /* limita largura máxima do perfil */
}

.profile-button{
    background:transparent; /* botão sem fundo para parecer apenas um clique */
    border:0; /* remove borda padrão do botão */
    padding:0; /* remove padding para controlar via figure */
    cursor:pointer; /* cursor indicador de clicável */
    width:100%; /* botão ocupa largura do contêiner do perfil */
    text-align:center; /* centraliza conteúdo dentro do botão */
}

.profile-button:focus-visible{
    outline:3px solid rgba(229,9,20,0.25); /* destaque visível ao focar (acessibilidade) */
    border-radius:12px; /* arredonda o contorno do foco */
}

.figure-container, figure{
    margin:0; /* remove margem padrão do figure */
    display:flex; /* usa flex para empilhar imagem e legenda */
    flex-direction:column; /* coloca a imagem acima da legenda */
    align-items:center; /* centraliza horizontalmente conteúdo do figure */
    gap:10px; /* espaçamento entre imagem e legenda */
    border-radius:12px; /* arredonda cantos do contêiner */
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); /* leve textura de fundo */
    padding:8px; /* espaçamento interno ao redor da imagem */
}

/* aplicar hover/foco apenas na imagem (quadrado) */
.profile img{
    width:120px; /* largura fixa da imagem do perfil */
    height:120px; /* altura fixa para manter proporção quadrada */
    object-fit:cover; /* garante corte adequado da imagem */
    display:block; /* remove espaçamento inline de imagens */
    border-radius:10px; /* cantos arredondados da imagem */
    transition:transform .18s ease, box-shadow .18s ease; /* animação apenas da imagem */
}

.profile-button:hover img,
.profile-button:focus img{
    transform:translateY(-6px) scale(1.02); /* eleva e amplia apenas a imagem */
    box-shadow:0 10px 30px rgba(0,0,0,0.6); /* sombra aplicada somente ao quadrado da imagem */
}

/* estilo para o perfil ativo/selecionado */
.profile-button.selected{
    border-radius:12px;
    outline:3px solid rgba(229,9,20,0.22);
}

.profile-button.selected img{
    transform:translateY(-8px) scale(1.04);
    box-shadow:0 14px 40px rgba(0,0,0,0.65);
}

figcaption{
    margin-top:10px; /* separação entre imagem e legenda */
    color:var(--muted); /* cor secundária para legendas */
    font-size:0.95rem; /* tamanho adequado para leitura de legenda */
    font-weight:700; /* deixa o nome em negrito */
}

footer{
    width:100%; /* footer ocupa largura total */
    padding:20px 0 36px 0; /* espaçamento interno do footer */
    text-align:center; /* centro do texto do footer */
    color:var(--muted); /* cor mais suave para texto de rodapé */
}

@media (max-width:420px){
    /* ajustes para telas muito pequenas (celulares) */
    figure{width:80px;height:80px;border-radius:10px} /* figura menor para caber melhor */
    .profile img{width:80px;height:80px} /* reduz imagem em celulares */
    h2#who-heading{font-size:1.25rem} /* título menor em telas pequenas */
    .profiles{gap:12px} /* menos espaçamento entre perfis */
}

@media (max-width:768px){
    /* tablet / celulares grandes: permite quebra de linha para manter tudo visível */
    header{padding:16px 20px}
    main{padding:28px 16px}
    .profiles{flex-wrap:wrap; overflow-x:visible; gap:16px} /* permite múltiplas linhas */
    .profile{max-width:140px}
    .profile img{width:96px;height:96px} /* tamanho intermediário */
    figure{padding:6px}
    h2#who-heading{font-size:1.6rem}
}

@media (max-width:1024px){
    /* ajustes para notebooks / small desktops */
    main{max-width:760px;padding:32px 20px}
    .profiles{gap:18px}
    .profile img{width:clamp(96px, 14vw, 110px); height:clamp(96px,14vw,110px)}
}

@media (prefers-reduced-motion:reduce){
    .profile-button, figure, .profile img{transition:none} /* remove animações para usuários que preferem menos movimento */
}

/* Em telas maiores que 900px, garantir que os perfis fiquem horizontalmente em uma única linha */
@media (min-width:900px){
    .profiles{
        flex-wrap:nowrap; /* força uma única linha */
        overflow-x:visible; /* evita scroll horizontal desnecessário */
        justify-content:center; /* centraliza os perfis */
    }

    .profile img{
        width:130px; /* imagens ligeiramente maiores em telas maiores */
        height:130px;
    }
}