/* =========================================================================
   Lunettic — Looney Club
   =========================================================================
   Carregado so nesta pagina. Ela e a unica do site com arte fotografica de
   sangria e texto por cima, entao vale um arquivo proprio em vez de engordar
   o paginas.css que toda pagina baixa.
   ========================================================================= */


/* =========================================================================
   VANTAGENS SOBRE A ARTE
   A imagem e irma do texto, nao background: assim ela aceita srcset e o
   navegador escolhe o peso certo no celular. O escurecimento fica numa
   camada propria — sem ele o contraste dependeria de qual trecho da arte
   calhasse de ficar atras da palavra, e a arte tem rosa claro e ciano.
   ========================================================================= */

/* Altura vem do CONTEUDO, nao da janela.

   Tinha min-height: 60vh aqui, e era erro: numa tela alta a secao esticava
   junto e sobravam centenas de pixels de arte vazia embaixo do texto. Altura
   em vh so faz sentido quando a secao deve preencher a tela; esta tem uma
   lista de cinco itens e acaba onde a lista acaba. O object-fit: cover da
   imagem cobre a altura que o texto pedir. */
.club-vantagens {
    position: relative;
    isolation: isolate;
    margin-block: var(--e-secao);
    display: grid;
    align-items: center;
}

.club-vantagens__arte {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-vantagens::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.42);
}

.club-vantagens__conteudo {
    padding-block: var(--e-7);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
    color: var(--branco);
}

.club-vantagens__titulo {
    font-size: var(--t-2xl);
    color: var(--branco);
    max-width: 12ch;
}

@media (min-width: 900px) {
    .club-vantagens__conteudo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: var(--e-8);
        align-items: start;
    }
}


/* =========================================================================
   LISTAS
   ========================================================================= */

.club-lista {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    font-size: var(--t-md);
    line-height: 1.45;
}

.club-lista li {
    padding-left: var(--e-5);
    position: relative;
}

/* Quadrado, nao bolinha: o sistema nao tem raio em lugar nenhum. */
.club-lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    background: var(--rosa);
}

.club-lista--simples {
    font-size: var(--t-base);
    color: var(--texto-suave);
    gap: var(--e-3);
}


/* =========================================================================
   E MAIS + PRECO
   ========================================================================= */

.club-mais {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
    padding-block: var(--e-secao);
    border-top: 1px solid var(--borda);
}

.club-mais__titulo { font-size: var(--t-xl); }

.club-mais__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
}

.club-preco {
    font-family: var(--fonte-titulo);
    font-weight: var(--peso-black);
    font-size: var(--t-2xl);
    line-height: 1;
    text-transform: uppercase;
}

.club-preco__nota {
    font-size: var(--t-sm);
    color: var(--texto-fraco);
    margin-top: calc(var(--e-3) * -1);
}

@media (min-width: 900px) {
    .club-mais {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        gap: var(--e-8);
    }
}


/* =========================================================================
   FAIXA DE LARGURA TOTAL
   ========================================================================= */

/* Mesmo motivo do bloco de vantagens: sem min-height em vh. Aqui o efeito
   era pior — com a faixa esticada pela altura da janela, a chamada centrada
   ia parar bem abaixo da dobra, e quem abrisse a pagina via so a arte. */
.club-faixa {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: calc(var(--e-secao) * 1.5) var(--gutter);
    text-align: center;
    overflow: hidden;
}

.club-faixa__arte {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club-faixa::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.30);
}

.club-faixa__conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}

.club-faixa__titulo {
    font-size: var(--t-hero);
    color: var(--branco);
    margin: 0;
}

.club-faixa__chamada {
    font-size: var(--t-md);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--branco);
}


/* =========================================================================
   BLOCOS DE TEXTO
   Titulo a esquerda, corpo a direita — o mesmo par do mockup.
   ========================================================================= */

.club-bloco {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-4);
    padding-block: var(--e-7);
    border-top: 1px solid var(--borda);
}

.club-bloco__titulo {
    font-size: var(--t-xl);
    max-width: 16ch;
}

.club-bloco__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    font-size: var(--t-base);
    color: var(--texto-suave);
    max-width: var(--largura-texto);
}

.club-bloco__sub {
    font-family: var(--fonte-corpo);
    font-weight: var(--peso-forte);
    font-size: var(--t-lg);
    text-transform: none;
    color: var(--texto);
}

.club-bloco__lide {
    font-size: var(--t-md);
    font-weight: var(--peso-medio);
    color: var(--texto);
}

.club-bloco__nota {
    font-size: var(--t-sm);
    color: var(--texto-fraco);
}

@media (min-width: 900px) {
    .club-bloco {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        gap: var(--e-8);
    }
}


/* =========================================================================
   FAQ
   <dl> de verdade: pergunta e resposta tem relacao semantica, e leitor de
   tela anuncia o par. Sem accordion — o mockup mostra tudo aberto, e sao
   quatro perguntas curtas que nao justificam esconder nada atras de clique.
   ========================================================================= */

.club-faq {
    padding-block: var(--e-secao);
    border-top: 1px solid var(--borda);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
}

.club-faq__titulo { font-size: var(--t-xl); }

.club-faq__lista {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-5);
}

.club-faq__item dt {
    font-weight: var(--peso-forte);
    margin-bottom: var(--e-2);
}

.club-faq__item dd {
    margin: 0;
    color: var(--texto-suave);
    max-width: 60ch;
}

@media (min-width: 900px) {
    .club-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--e-8); }
    .club-faq__lista { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); }
}