/* ==================================================
   PÁGINA ATORES
   8 por linha no computador → 6 → 4 → 3 no celular
================================================== */
.atores {
    --cor: var(--atForte, #B583FF);
    display: flex;
    flex-direction: column;
    gap: 34px;
    margin: 8px 0 56px;
}

/* ---------- LETRAS ---------- */
.atores-letras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
    padding: 6px;
    border: 1px solid #1A202B;
    border-radius: 14px;
    background: #090D13;
}

.atores-letras a,
.atores-letras span {
    display: grid;
    place-items: center;
    height: 36px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.atores-letras span {
    color: #3A4250;
}

.atores-letras a {
    color: #C9D0DA;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.atores-letras a:hover {
    background: linear-gradient(180deg, #222B3B, #171E2A);
    color: var(--cor);
    transform: translateY(-2px);
}

/* A letra aberta salta */
.atores-letras a.ativa {
    background: linear-gradient(180deg, #222B3B, #171E2A);
    color: var(--cor);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .5);
}

.atores-letras a:focus-visible,
.ator-link:focus-visible,
.ator-novaAba:focus-visible {
    outline: 2px solid #F4F6FA;
    outline-offset: 2px;
}

/* ---------- TÍTULO DE CADA SEÇÃO ---------- */
.atores-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    color: #FFFFFF;
    font-size: 1.15rem;
}

.atores-titulo::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--cor);
}

.atores-titulo::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #2A3140, transparent);
}

.atores-total {
    margin: 0 0 -18px;
    color: #6F7988;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    scroll-margin-top: 100px;
}

/* ---------- GRADE ---------- */
.atores-grade {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

.ator-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #1E2531;
    border-radius: 14px;
    background: #111723;
    color: #E8ECF2;
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.ator-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.ator-foto {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #0B0F16;
}

.ator-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;            /* o rosto costuma estar em cima */
    transition: transform .4s ease;
}

.ator-nome {
    overflow: hidden;
    padding: 9px 10px 10px;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ator-card:hover {
    border-color: var(--cor);
    transform: translateY(-4px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .5);
}

.ator-card:hover .ator-foto img {
    transform: scale(1.06);
}

.ator-card:hover .ator-nome {
    color: #FFFFFF;
}

/* ---------- BOTÃO "ABRIR EM NOVA ABA" (canto da foto, aparece ao passar o mouse) ---------- */
.ator-novaAba {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    background: rgba(13, 18, 26, .75);
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
    backdrop-filter: blur(4px);
}

.ator-novaAba svg {
    width: 15px;
    height: 15px;
}

.ator-card:hover .ator-novaAba,
.ator-novaAba:focus-visible {
    opacity: 1;
    transform: none;
}

.ator-novaAba:hover {
    border-color: var(--cor);
    background: var(--cor);
    color: #0D121A;
}

/* Celular/tablet (sem mouse): o botão fica sempre visível */
@media (hover: none) {
    .ator-novaAba {
        opacity: 1;
        transform: none;
    }
}

/* ---------- TELAS MENORES ---------- */
@media (max-width: 1200px) {
    .atores-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .atores-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .atores { gap: 26px; }
    .atores-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .ator-nome { padding: 7px 6px 8px; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ator-card,
    .ator-foto img,
    .ator-novaAba {
        transition: none;
    }
}


/* ---------- TOP ATORES (em cima, na página da letra) ---------- */
.atores-titulo-top::before {
    background: #D4AF37;                     /* faixa dourada no lugar da cor dos atores */
}

.atores-secao {
    scroll-margin-top: 100px;                /* a paginação desce até a lista, sem ficar atrás do topo */
}


/* ==================================================
   PÁGINA DO ATOR: CARTÃO DO PERFIL
================================================== */
.perfil-ator {
    --cor: var(--atForte, #B583FF);
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);       /* foto pequena: é só o rosto */
    align-items: center;
    gap: 22px;
    margin: 0 0 18px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid #232A36;
    border-radius: 20px;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cor) 16%, transparent), transparent 55%),
        linear-gradient(180deg, #151B27, #10151F);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

/* Foto com moldura na cor dos atores */
.perfil-foto {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
    border-radius: 14px;
    background: #0B0F16;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 24px color-mix(in srgb, var(--cor) 14%, transparent);
}

.perfil-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.perfil-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---- Linha 1: estrelas, ativo/inativo, Top ---- */
.perfil-selos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.perfil-estrelas {
    display: inline-flex;
    gap: 3px;
}

.perfil-estrelas svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.perfil-estrelas .cheia {
    fill: #E9CF74;
    stroke: #E9CF74;
    filter: drop-shadow(0 0 6px rgba(233, 207, 116, .35));
}

.perfil-estrelas .vazia {
    fill: none;
    stroke: #3A4250;
}

.perfil-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.perfil-selo i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.selo-ativo {
    border: 1px solid rgba(63, 208, 182, .4);
    background: rgba(63, 208, 182, .1);
    color: #3FD0B6;
}

.selo-ativo i {
    box-shadow: 0 0 8px #3FD0B6;               /* a bolinha "acesa" */
}

.selo-inativo {
    border: 1px solid #2C3546;
    background: rgba(255, 255, 255, .04);
    color: #8B95A5;
}

.selo-top {
    border: 1px solid rgba(212, 175, 55, .5);
    background: linear-gradient(135deg, #2A2414, #151B26);
    color: #F7E7A6;
}

/* ---- Linha 2: apelidos ---- */
.perfil-apelidos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #8B95A5;
    font-size: .82rem;
}

.perfil-apelidos span {
    margin-right: 4px;
}

.perfil-apelidos em {
    padding: 3px 10px;
    border: 1px solid #232A36;
    border-radius: 999px;
    background: rgba(8, 11, 17, .55);
    color: #E8ECF2;
    font-style: normal;
    font-weight: 600;
}

/* ---- Linha 3: país (ou origem), cenas, filmes ---- */
.perfil-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.perfil-dados div {
    min-width: 92px;
    padding: 9px 16px;
    border: 1px solid #1E2531;
    border-radius: 12px;
    background: rgba(8, 11, 17, .55);
}

.perfil-dados .dado-gevi {
    cursor: help;                              /* o mouse vira "?" e mostra a fonte */
}

.perfil-dados dt {
    color: #6F7988;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.perfil-dados dd {
    margin: 3px 0 0;
    color: #FFFFFF;
    font-size: .98rem;
    font-weight: 700;
}

.perfil-fonte {
    margin: -4px 0 0;
    color: #4C5563;
    font-size: .68rem;
}

/* O filtro Todos | Cenas | Filmes (mesmo visual da página do site) */
.site-tipos {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 16px;
    padding: 5px;
    border: 1px solid #1A202B;
    border-radius: 14px;
    background: #090D13;
}

.site-tipo {
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #8B95A5;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.site-tipo:hover {
    color: #FFFFFF;
}

.site-tipo.ativo {
    border-color: #2C3546;
    background: linear-gradient(180deg, #222B3B, #171E2A);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .5);
}

.site-tipo:focus-visible {
    outline: 2px solid #F4F6FA;
    outline-offset: 2px;
}

/* ---- Celular: foto pequena em cima, tudo centralizado ---- */
@media (max-width: 640px) {
    .perfil-ator {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px;
        text-align: center;
    }

    .perfil-foto {
        width: 96px;
        margin: 0 auto;
    }

    .perfil-selos,
    .perfil-apelidos,
    .perfil-dados {
        justify-content: center;
    }

    /* As 3 caixinhas (país, cenas, filmes) cabem lado a lado */
    .perfil-dados {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .perfil-dados div {
        flex: 1;
        min-width: 0;
        padding: 9px 8px;
    }

    .site-tipos {
        display: flex;
        justify-content: center;
    }
}


/* ==================================================
   SINGLE: ATORES NESTE VÍDEO
   Centralizados; se não couberem, a faixa rola para o lado
================================================== */
.atores-do-post {
    --cor: var(--atForte, #B583FF);
    margin: 34px 0 10px;
}

.atores-do-post .atores-titulo {
    justify-content: center;
}

.atores-do-post .atores-titulo::after {
    display: none;                              /* sem a linha comprida: o título fica no centro */
}

/* A faixa: rola para o lado só quando precisar */
.atores-faixa {
    overflow-x: auto;
    padding: 6px 2px 14px;                      /* espaço para o card "subir" no hover sem cortar */
    scrollbar-width: thin;
    scrollbar-color: #2A3140 transparent;
}

.atores-faixa::-webkit-scrollbar {
    height: 8px;
}

.atores-faixa::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #2A3140;
}

/* Por dentro: do tamanho dos cards. Cabe? fica no centro. Não cabe? começa na esquerda e rola */
.atores-faixa-dentro {
    display: flex;
    gap: 14px;
    width: max-content;
    margin: 0 auto;
}

.atores-faixa .ator-card {
    flex: none;
    width: 128px;
}

@media (max-width: 600px) {
    .atores-faixa .ator-card {
        width: 104px;
    }

    .atores-faixa-dentro {
        gap: 10px;
    }
}


/* "Indefinido" no single: sem link, mais apagado */
.ator-indefinido {
    opacity: .6;
    cursor: default;
}

.ator-indefinido:hover {
    border-color: #1E2531;
    transform: none;
    box-shadow: none;
}

.ator-indefinido .ator-nome {
    color: #8B95A5;
    font-style: italic;
}