/*
 * 63-area-membros.css — /area-de-membros/ com a Área ABERTA para os três planos (r58.73, inc/area-landing.php).
 * Dono: o topo novo da landing (hero com arte, números, as cinco abas, comparação dos planos). Sem @layer (INF-005).
 * Só carrega em template-area-vip.php (mapa de carregar_scripts_rotina), depois do 40-vip. Painéis escuros com arte e dourado
 * (a identidade do Salão), legíveis no tema claro e no escuro do site. Primeira tela = hero: mudou → regerar o crítico (vip).
 */
.aml-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.aml-kicker {
    margin: 0 0 10px;
    color: var(--re-ouro-claro);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── hero ── */
.aml-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 520px;
    margin: 8px 0 16px;
    overflow: hidden;
    border: 1px solid var(--re-borda);
    border-radius: 18px;
    background: var(--re-noite);
    box-shadow: var(--re-sombra);
}

.aml-hero__arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
}

.aml-hero__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 9, 7, 0.1) 0%, rgba(11, 9, 7, 0.7) 42%, rgba(11, 9, 7, 0.96) 100%);
}

.aml-hero__corpo {
    position: relative;
    max-width: 660px;
    padding: 28px 20px;
    color: var(--re-perg);
}

.aml-hero__titulo {
    margin: 0 0 14px;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 6vw, 3.3rem);
    line-height: 1.08;
}

.aml-hero__titulo em {
    color: var(--re-ouro-claro);
    font-style: normal;
}

.aml-hero__texto {
    margin: 0 0 22px;
    color: rgba(243, 230, 200, 0.9);
    font-size: 1.04rem;
    line-height: 1.6;
}

.aml-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.aml-hero__aviso {
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--re-borda);
    border-radius: 12px;
    background: rgba(11, 9, 7, 0.55);
    color: rgba(243, 230, 200, 0.92);
    font-size: 0.92rem;
    line-height: 1.5;
}

.aml-hero__aviso a {
    color: var(--re-ouro-claro);
    font-weight: 700;
}

@media (min-width: 992px) {
    .aml-hero {
        align-items: center;
        min-height: 540px;
    }

    .aml-hero__veu {
        background: linear-gradient(90deg, rgba(11, 9, 7, 0.97) 0%, rgba(11, 9, 7, 0.85) 38%, rgba(11, 9, 7, 0.2) 72%, rgba(11, 9, 7, 0.05) 100%);
    }

    .aml-hero__corpo {
        padding: 48px 56px;
    }
}

/* ── botões ── */
.aml-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

.aml-btn--ouro {
    background: linear-gradient(180deg, var(--re-ouro-claro), var(--re-ouro));
    color: var(--re-noite);
}

.aml-btn--ouro:hover,
.aml-btn--ouro:focus-visible {
    background: linear-gradient(180deg, var(--re-ouro-hover), var(--re-ouro-claro));
    color: var(--re-noite);
}

.aml-btn--linha {
    border-color: var(--re-borda);
    background: rgba(11, 9, 7, 0.45);
    color: var(--re-perg);
}

.aml-btn--linha:hover,
.aml-btn--linha:focus-visible {
    border-color: var(--re-ouro-claro);
    color: #fff;
}

/* ── números ── */
.aml-numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}

.aml-numeros li {
    padding: 14px 16px;
    border: 1px solid var(--re-borda);
    border-radius: 14px;
    background: #120e0b;
    color: rgba(243, 230, 200, 0.82);
    font-size: 0.86rem;
    line-height: 1.35;
}

.aml-numeros li:last-child:nth-child(odd) {
    grid-column: span 2;
}

.aml-numeros strong {
    display: block;
    color: var(--re-ouro-claro);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .aml-numeros {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .aml-numeros li:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ── seções ── */
.aml-secao {
    margin: 0 0 40px;
}

.aml-titulo {
    margin: 0 0 18px;
    color: var(--vip-text-main, #1f2937);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.55rem, 3.6vw, 2.25rem);
    line-height: 1.15;
}

/* ── as cinco abas ── */
.aml-abas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* 768+: duas colunas (a 5ª aba, sozinha, ocupa a linha); 1100+ com 5 abas: 2 grandes em cima + 3 embaixo; com 4: 2×2 */
@media (min-width: 768px) {
    .aml-abas {
        grid-template-columns: repeat(2, 1fr);
    }

    .aml-abas--5 .aml-aba:last-child {
        grid-column: span 2;
    }

    .aml-aba {
        min-height: 300px;
    }
}

@media (min-width: 1100px) {
    .aml-abas--5 {
        grid-template-columns: repeat(6, 1fr);
    }

    .aml-abas--5 .aml-aba {
        grid-column: span 2;
    }

    .aml-abas--5 .aml-aba:nth-child(-n+2) {
        grid-column: span 3;
    }

    .aml-abas--4 .aml-aba {
        min-height: 320px;
    }
}

.aml-aba {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 270px;
    overflow: hidden;
    border: 1px solid var(--re-borda);
    border-radius: 16px;
    background: var(--re-noite);
    box-shadow: var(--re-sombra);
}

.aml-aba__arte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aml-aba__veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 9, 7, 0.05) 15%, rgba(11, 9, 7, 0.78) 55%, rgba(11, 9, 7, 0.97) 100%);
}

.aml-aba__corpo {
    position: relative;
    padding: 18px;
    color: var(--re-perg);
}

.aml-aba__corpo h3 {
    margin: 8px 0 6px;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.4rem;
}

.aml-aba__corpo p {
    margin: 0;
    color: rgba(243, 230, 200, 0.88);
    font-size: 0.92rem;
    line-height: 1.5;
}

.aml-selo {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--re-borda);
    border-radius: 999px;
    background: rgba(201, 162, 39, 0.18);
    color: var(--re-ouro-claro);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── comparação dos planos ── */
.aml-tabela-caixa {
    overflow: hidden;
    border: 1px solid var(--re-borda);
    border-radius: 16px;
    background: var(--re-noite);
    box-shadow: var(--re-sombra);
}

.aml-tabela {
    width: 100%;
    border-collapse: collapse;
    color: var(--re-perg);
    font-size: 0.9rem;
}

.aml-tabela th,
.aml-tabela td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.15);
    text-align: center;
    vertical-align: middle;
}

.aml-tabela tbody tr:last-child th,
.aml-tabela tbody tr:last-child td {
    border-bottom: 0;
}

.aml-tabela thead th {
    background: #16110d;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.2;
}

.aml-tabela thead small {
    display: block;
    margin-top: 4px;
    color: var(--re-ouro-claro);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
}

.aml-tabela tbody th {
    color: rgba(243, 230, 200, 0.92);
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

.aml-tabela .aml-destaque {
    background: rgba(201, 162, 39, 0.08);
}

.aml-sim {
    color: var(--re-ouro-claro);
    font-size: 1.1rem;
    font-weight: 700;
}

.aml-nome-curto {
    display: none;
}

.aml-nao {
    color: rgba(243, 230, 200, 0.35);
}

@media (max-width: 599px) {
    .aml-tabela {
        font-size: 0.82rem;
    }

    .aml-tabela th,
    .aml-tabela td {
        padding: 10px 6px;
    }

    .aml-tabela thead th {
        font-size: 0.8rem;
    }

    .aml-tabela thead small {
        font-size: 0.68rem;
    }

    .aml-nome-longo {
        display: none;
    }

    .aml-nome-curto {
        display: inline;
    }
}

.aml-nota {
    margin: 10px 0 0;
    color: var(--vip-text-muted, #6b7280);
    font-size: 0.86rem;
}