/* =====================================================================
   Ajuda do Alto — vitrine
   ---------------------------------------------------------------------
   Tema escuro por padrão: o conteúdo é consumido muito de noite (oração
   antes de dormir, salmos na madrugada) e é o que faz capa e banner
   saltarem da tela. As cores de marca vêm das Áreas da Vida, injetadas
   por --cor em cada item, então adicionar uma quinta área não exige
   tocar neste arquivo.
   ===================================================================== */

/* Paleta extraida da logo: o azul marinho do circulo, o royal do "Alto",
   o dourado do divisor e o branco da mao. O fundo nao e preto neutro e sim
   um marinho quase preto — e o que faz a marca parecer nativa da tela em vez
   de aplicada por cima dela. */
:root {
    --bg:        #05091c;   /* marinho quase preto */
    --bg-2:      #0a1130;
    --bg-3:      #111a44;
    --marinho:   #0e1e56;   /* "Ajuda do" da logo */
    --royal:     #2050e0;   /* "Alto" da logo */
    --royal-esc: #1a3fb0;
    --dourado:   #d9b45b;   /* divisor da logo */
    --texto:     #f3f6fd;
    --texto-2:   #98a4c8;
    --borda:     rgba(255, 255, 255, .10);
    --raio:      12px;
    --topo-h:    92px;
    --transicao: .28s cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, 'Noto Color Emoji';
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------
   Topo
   Fundo transparente sobre o hero e sólido depois do scroll — o truque
   que faz a home "abrir" na imagem em vez de numa barra.
   --------------------------------------------------------------------- */
.topo {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--topo-h);
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 clamp(16px, 4vw, 56px);
    z-index: 100;
    background: linear-gradient(180deg, rgba(5, 9, 28, .92) 0%, rgba(5, 9, 28, 0) 100%);
    transition: background var(--transicao);
}
.topo.solido,
.topo-sempre-solido .topo {
    background: rgba(5, 9, 28, .96);
    border-bottom: 1px solid var(--borda);
    backdrop-filter: blur(14px);
}

/* A marca nunca encolhe: com o menu cheio, o flex espremia a caixa dela e o
   "Ajuda do Alto" (que e nowrap) transbordava POR CIMA do primeiro item. */
.marca { flex-shrink: 0; }

.marca {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.4px;
    white-space: nowrap;
}
.marca-simbolo {
    width: 34px; height: 34px;
    /* O simbolo ja e circular e transparente; o brilho tenue o descola do
       fundo marinho sem precisar de moldura. */
    filter: drop-shadow(0 0 10px rgba(32, 80, 224, .45));
}
/* O logotipo deitado ocupa a altura do topo menos uma folga, e a largura
   sai da propria arte -- travar as duas medidas achataria um lockup que nao
   e quadrado. `max-width` porque logo de cliente vem em proporcao qualquer:
   um desenho muito comprido comeria o menu inteiro em vez de estourar. */
.marca-logo {
    /* A largura e o que o dono pediu, e ela nao se pede direto: o lockup e
       deitado, entao quem a controla e a ALTURA -- travar as duas achataria
       a arte. As duas medidas sao elasticas (clamp) porque entre 861px e
       1200px o menu inteiro ainda esta na tela: um logotipo fixo em 320px
       come as Areas da Vida ali, e o sintoma (item do menu que some) nao
       parece ter nada a ver com o tamanho da marca. */
    height: clamp(62px, 5.8vw, 74px);
    width: auto;
    max-width: clamp(220px, 27vw, 340px);
    object-fit: contain;
}
.marca-texto { white-space: nowrap; }
.marca em { color: var(--royal); font-style: normal; }

.menu { display: flex; align-items: center; gap: 18px; font-size: 14.5px; color: var(--texto-2); }
/* nowrap: a pastilha do Kids engordou a barra, e sem isso "Por onde
   comecar?" quebra em duas linhas e desalinha o topo inteiro. */
.menu a { transition: color .2s; white-space: nowrap; }
.menu a:hover, .menu a.ativo { color: var(--texto); }

/* Kids nao e mais um link como os outros: e o foco do produto, entao vira
   pastilha colorida no meio de uma barra de texto cinza. A cor sozinha ja
   destacaria, mas o formato e o que faz o olho ler "botao" e nao "menu". */
.menu a.menu-kids {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 17px; border-radius: 999px;
    background: linear-gradient(120deg, #4aa8ea, #7bc043 55%, #f2669b);
    color: #fff; font-weight: 800; font-size: 14px;
    box-shadow: 0 4px 14px rgba(74, 168, 234, .38);
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.menu a.menu-kids:hover, .menu a.menu-kids.ativo {
    color: #fff; filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 7px 20px rgba(242, 102, 155, .45);
}
.menu a.menu-kids i { font-size: 17px; }

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.busca-topo {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 7px 14px;
}
.busca-topo input {
    background: none; border: 0; outline: none;
    /* Encolhe antes de qualquer coisa do topo ser cortada: 150px e o
       conforto, 84px ainda cabe "Buscar" e uma palavra digitada. */
    color: var(--texto); width: clamp(84px, 8vw, 150px); font-size: 14px;
}
.busca-topo input::placeholder { color: var(--texto-2); }

.avatar {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--royal), var(--marinho));
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
}

/* Botões ------------------------------------------------------------- */
.bt {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px;
    border-radius: 9px;
    border: 0;
    font-weight: 650;
    font-size: 14.5px;
    transition: transform .15s, filter .2s, background .2s;
    white-space: nowrap;
}
.bt:hover { transform: translateY(-1px); }
.bt-primario  { background: var(--dourado); color: var(--marinho); }
.bt-primario:hover { filter: brightness(1.08); }
.bt-claro     { background: #fff; color: var(--marinho); }
.bt-fantasma  { background: rgba(255, 255, 255, .13); color: var(--texto); backdrop-filter: blur(6px); }
.bt-fantasma:hover { background: rgba(255, 255, 255, .2); }
.bt-contorno  { background: none; border: 1px solid var(--borda); color: var(--texto); }
.bt-azul      { background: var(--royal); color: #fff; }
.bt-azul:hover { background: var(--royal-esc); }
.bt-sm        { padding: 8px 15px; font-size: 13.5px; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: min(78vh, 620px);
    display: flex; align-items: flex-end;
    padding: 0 clamp(16px, 4vw, 56px) clamp(40px, 7vh, 84px);
    overflow: hidden;
}
.hero-fundo { position: absolute; inset: 0; z-index: 0; }
.hero-fundo img { width: 100%; height: 100%; object-fit: cover; }
/* Duplo gradiente: o vertical garante leitura do texto, o horizontal
   mantém a arte visível à direita em telas largas. */
.hero-fundo::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(5,9,28,.55) 0%, rgba(5,9,28,.1) 35%, rgba(5,9,28,.97) 100%),
        linear-gradient(90deg, rgba(5,9,28,.92) 0%, rgba(5,9,28,.35) 55%, rgba(5,9,28,.1) 100%);
}
.hero-corpo { position: relative; z-index: 1; width: 100%; }
.hero-conteudo { max-width: 620px; }

/* Hero COM ARTE ---------------------------------------------------------
   Quando o destaque tem banner, o hero deixa de ser "texto por cima da
   imagem" e vira duas colunas: texto à esquerda, a arte inteira à direita.
   O motivo é o acervo: estas artes trazem título, personagens e chamada
   DENTRO da imagem. Recortadas no formato panorâmico do hero sobrava o
   meio, e o gradiente de leitura apagava o resto -- o livro em destaque
   aparecia como um fundo escuro qualquer atrás de um bloco de texto.

   O fundo continua sendo a mesma arte, agora borrada e escurecida: ela dá
   a cor do livro sem disputar leitura com a cópia que está ao lado. */
.hero.com-arte { align-items: center; padding-top: clamp(90px, 12vh, 130px); }
.hero.com-arte .hero-fundo img {
    filter: blur(34px) brightness(.55) saturate(1.2);
    transform: scale(1.14);
}
.hero.com-arte .hero-fundo::after {
    background:
        linear-gradient(180deg, rgba(5,9,28,.6) 0%, rgba(5,9,28,.3) 40%, rgba(5,9,28,.95) 100%);
}
.hero.com-arte .hero-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
}
.hero.com-arte .hero-conteudo { max-width: 560px; }
/* O h1 encolhe no modo duas colunas: a arte já grita o título em letra
   garrafal, e dois títulos do mesmo tamanho lado a lado só brigam. */
.hero.com-arte h1 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -1.2px; }
.hero-arte {
    display: block; justify-self: center;
    max-width: min(620px, 100%);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .09);
    transition: transform .3s ease, box-shadow .3s ease;
}
.hero-arte img {
    display: block; width: 100%; height: auto;
    max-height: min(58vh, 460px); object-fit: contain;
}
.hero-arte:hover { transform: translateY(-4px); box-shadow: 0 32px 80px rgba(0, 0, 0, .7), 0 0 0 1px var(--dourado); }
.hero-etiqueta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--dourado);
    margin-bottom: 14px;
}
.hero h1 {
    font-size: clamp(34px, 5.6vw, 62px);
    line-height: 1.03;
    letter-spacing: -1.8px;
    margin: 0 0 14px;
    font-weight: 800;
}
.hero-sinopse {
    font-size: clamp(15px, 1.6vw, 17.5px);
    line-height: 1.6;
    color: #cdd6ee;
    margin: 0 0 10px;
    max-width: 540px;
}

/* A sinopse do destaque nasce cortada em duas linhas e cresce no clique.
   O texto completo está no HTML -- o corte é só de exibição, então
   expandir não busca nada e o Ctrl+F do navegador continua achando a
   frase inteira. `-webkit-line-clamp` é a única forma de cortar por
   LINHA (e não por altura fixa em px, que corta letra no meio quando a
   fonte muda); os prefixos -webkit são o padrão de fato.

   O corte mora em `.hero-resumo`, e NÃO em `.hero-sinopse`: a mesma
   classe de parágrafo veste os textos de abertura de login, cadastro,
   contato, sobre, área e perfil -- lá não há botão nenhum, e cortar em
   duas linhas sumiria com metade do texto sem forma de recuperá-lo. */
.hero-resumo { margin: 0 0 12px; max-width: 540px; }
.hero-resumo .hero-sinopse {
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.hero-resumo .hero-sinopse.aberta {
    display: block;
    /* Sinopse de 800 caracteres empurraria os botões para fora da tela:
       aberta ela rola dentro do próprio bloco. */
    max-height: min(34vh, 280px);
    overflow: auto;
    padding-right: 8px;
}
.hero-mais {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 2px 0;
    color: var(--dourado); font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer;
}
.hero-mais:hover { text-decoration: underline; }
.hero-mais i { font-size: 12px; transition: transform .2s; }
.hero-mais[aria-expanded="true"] i { transform: rotate(180deg); }
.hero-versiculo {
    font-style: italic; color: var(--dourado);
    font-size: 14.5px; margin: 0 0 26px;
}
.hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* Carrossel do hero ---------------------------------------------------
   Trilho de slides lado a lado, movido por transform: o navegador anima
   isso na GPU, e uma imagem de tela cheia trocando por `left` engasga.
   Cada slide continua sendo um `.hero` inteiro -- as regras acima valem
   sem alteração, e com um destaque só a página fica idêntica ao que era. */
.hero-carrossel { position: relative; overflow: hidden; }
.hero-trilho {
    display: flex;
    transition: transform .65s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.hero-trilho > .hero { flex: 0 0 100%; min-width: 100%; }

/* O texto entra depois da folha, e não junto: a troca fica legível em vez
   de tudo deslizar em bloco. Só o slide ativo anima -- animar os oito
   deixaria o carrossel piscando o tempo todo em segundo plano. */
.hero-carrossel[data-carrossel] .hero.ativo .hero-etiqueta,
.hero-carrossel[data-carrossel] .hero.ativo h1,
.hero-carrossel[data-carrossel] .hero.ativo .hero-resumo,
.hero-carrossel[data-carrossel] .hero.ativo .hero-versiculo,
.hero-carrossel[data-carrossel] .hero.ativo .hero-arte,
.hero-carrossel[data-carrossel] .hero.ativo .hero-acoes {
    animation: hero-entra .55s both;
}
.hero-carrossel[data-carrossel] .hero.ativo h1            { animation-delay: .06s; }
.hero-carrossel[data-carrossel] .hero.ativo .hero-resumo  { animation-delay: .12s; }
.hero-carrossel[data-carrossel] .hero.ativo .hero-versiculo { animation-delay: .16s; }
.hero-carrossel[data-carrossel] .hero.ativo .hero-acoes   { animation-delay: .2s; }
@keyframes hero-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hero-seta {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(5, 9, 28, .55);
    border: 1px solid var(--borda);
    color: var(--texto); font-size: 22px;
    opacity: 0; transition: opacity .2s, background .2s;
    cursor: pointer;
}
.hero-seta.esq { left: clamp(10px, 2vw, 22px); }
.hero-seta.dir { right: clamp(10px, 2vw, 22px); }
.hero-carrossel:hover .hero-seta,
.hero-seta:focus-visible { opacity: 1; }
.hero-seta:hover { background: rgba(5, 9, 28, .85); }

/* Os pontinhos ficam à direita, na altura dos botões: no canto de baixo
   à esquerda, onde mora o texto do slide, eles brigariam com o "Começar
   a ler" -- que é o clique que o hero existe para receber. */
.hero-pontos {
    position: absolute; z-index: 5;
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(40px, 7vh, 84px);
    display: flex; gap: 9px;
}
.hero-ponto {
    width: 9px; height: 9px; padding: 0;
    border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .32);
    transition: background .2s, width .25s;
}
.hero-ponto:hover { background: rgba(255, 255, 255, .6); }
.hero-ponto.ativo { background: var(--dourado); width: 26px; border-radius: 5px; }

/* ---------------------------------------------------------------------
   Prateleiras
   O scroll horizontal usa scroll-snap para o item sempre parar alinhado,
   e o overflow visível no eixo Y permite o item crescer no hover sem ser
   cortado pela faixa.
   --------------------------------------------------------------------- */
.prateleiras { padding: 8px 0 80px; margin-top: -60px; position: relative; z-index: 2; }

.prateleira { margin-bottom: 42px; }
.prateleira-topo {
    display: flex; align-items: baseline; gap: 12px;
    padding: 0 clamp(16px, 4vw, 56px);
    margin-bottom: 14px;
}
.prateleira-topo h2 {
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 700; letter-spacing: -.4px; margin: 0;
}
.prateleira-topo .sub { font-size: 13.5px; color: var(--texto-2); }
.prateleira-topo .mais {
    margin-left: auto; font-size: 13px; color: var(--texto-2);
    opacity: 0; transform: translateX(-6px);
    transition: opacity .2s, transform .2s;
}
.prateleira:hover .prateleira-topo .mais { opacity: 1; transform: none; }

.faixa-wrap { position: relative; }
.faixa {
    display: flex; gap: 12px;
    padding: 22px clamp(16px, 4vw, 56px);
    margin: -22px 0;
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.faixa::-webkit-scrollbar { display: none; }

.seta {
    position: absolute; top: 0; bottom: 0;
    width: 52px; z-index: 5;
    display: grid; place-items: center;
    background: linear-gradient(90deg, rgba(5,9,28,.95), rgba(5,9,28,0));
    border: 0; color: var(--texto); font-size: 26px;
    opacity: 0; transition: opacity .2s;
}
.seta.dir { right: 0; transform: scaleX(-1); }
.seta.esq { left: 0; }
.faixa-wrap:hover .seta { opacity: 1; }
.seta[hidden] { display: none; }

/* Card --------------------------------------------------------------- */
.item {
    flex: 0 0 auto;
    width: 168px;
    scroll-snap-align: start;
    transition: transform var(--transicao);
    position: relative;
}
.item:hover { transform: scale(1.07); z-index: 4; }

.item-capa {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--bg-3);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
.item-capa img { width: 100%; height: 100%; object-fit: cover; }

/* Capa gerada: usada enquanto não há arte enviada. O gradiente sai da
   cor da Área, então o catálogo inteiro já nasce coerente. */
.capa-gerada {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 14px;
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(160deg, var(--cor) 0%, rgba(0,0,0,.72) 100%);
}
.capa-gerada .cg-tipo {
    position: absolute; top: 12px; left: 13px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; opacity: .8;
}
.capa-gerada .cg-titulo {
    font-size: 15px; font-weight: 750; line-height: 1.2;
    letter-spacing: -.3px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.capa-gerada .cg-versiculo {
    font-size: 10.5px; opacity: .78; font-style: italic; margin-top: 5px;
}

/* Selos e barra de progresso ---------------------------------------- */
.selo {
    position: absolute; top: 9px; right: 9px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    backdrop-filter: blur(6px);
}
.selo-pago    { background: var(--dourado); color: var(--marinho); }
.selo-plano   { background: rgba(124, 58, 237, .92); color: #fff; }
.selo-livre   { background: rgba(5, 150, 105, .92); color: #fff; }

.barra-prog {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3.5px; background: rgba(255, 255, 255, .22);
}
.barra-prog span { display: block; height: 100%; background: var(--dourado); }

.item-info { padding: 9px 2px 0; }
.item-titulo {
    font-size: 13.5px; font-weight: 600; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-meta { font-size: 11.5px; color: var(--texto-2); margin-top: 3px; }

/* Variações de layout da prateleira ---------------------------------- */
.faixa.layout-banner   .item { width: 300px; }
.faixa.layout-banner   .item-capa { aspect-ratio: 16 / 9; }
.faixa.layout-destaque .item { width: 220px; }
.faixa.layout-circulo  .item { width: 124px; text-align: center; }
.faixa.layout-circulo  .item-capa { aspect-ratio: 1; border-radius: 50%; }
.faixa.layout-circulo  .capa-gerada { justify-content: center; align-items: center; text-align: center; padding: 10px; }
.faixa.layout-circulo  .cg-tipo { display: none; }
.faixa.layout-circulo  .cg-titulo { font-size: 12.5px; }
.faixa.layout-circulo  .cg-versiculo { display: none; }
.faixa.layout-circulo  .item-titulo { -webkit-line-clamp: 1; font-size: 12.5px; }

/* ---------------------------------------------------------------------
   Áreas da Vida — a faixa de navegação temática
   --------------------------------------------------------------------- */
.areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    padding: 0 clamp(16px, 4vw, 56px);
    margin-bottom: 46px;
}
.area-card {
    position: relative;
    border-radius: 14px;
    padding: 22px;
    min-height: 132px;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden;
    border: 1px solid var(--borda);
    background: linear-gradient(145deg, color-mix(in srgb, var(--cor) 55%, #0a0a10), #0a0a10);
    transition: transform var(--transicao), border-color .2s;
}
.area-card:hover { transform: translateY(-4px); border-color: var(--cor); }
.area-card i {
    position: absolute; top: -6px; right: 10px;
    font-size: 72px; opacity: .16;
}
.area-card h3 { margin: 0 0 4px; font-size: 17.5px; letter-spacing: -.3px; }
.area-card p  { margin: 0; font-size: 13px; color: #c4cfe8; }

/* ---------------------------------------------------------------------
   Página de detalhe
   --------------------------------------------------------------------- */
.detalhe { padding-top: var(--topo-h); }
.detalhe-hero {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    padding: 46px clamp(16px, 4vw, 56px);
    position: relative;
}
.detalhe-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--cor) 26%, transparent), transparent 65%);
    z-index: -1;
}
.detalhe-capa { border-radius: var(--raio); overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.6); aspect-ratio: 2/3; position: relative; }
.detalhe h1 { font-size: clamp(28px, 4vw, 44px); margin: 0 0 8px; letter-spacing: -1.2px; }
.detalhe-sub { color: var(--texto-2); font-size: 16px; margin: 0 0 18px; }
.detalhe-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
    padding: 5px 12px; border-radius: 999px;
    background: rgba(255,255,255,.07); border: 1px solid var(--borda);
    font-size: 12.5px; color: var(--texto-2);
}
/* O respiro mudou de dono junto com a ordem: as acoes e que separam agora,
   e a sinopse fechou a coluna. */
.detalhe-sinopse { font-size: 16px; line-height: 1.7; color: #cdd6ee; max-width: 660px; margin: 0; }
.detalhe-acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 24px; }

.corpo-texto {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px clamp(16px, 4vw, 56px) 90px;
    font-size: 18px; line-height: 1.85; color: #dde4f5;
    white-space: pre-line;
}

/* Bloqueio de conteúdo pago ------------------------------------------ */
.paywall {
    max-width: 680px; margin: 0 auto 90px;
    padding: 34px; border-radius: 16px;
    border: 1px solid var(--borda);
    background: linear-gradient(160deg, var(--bg-2), var(--bg));
    text-align: center;
}
.paywall h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.5px; }
.paywall p  { color: var(--texto-2); margin: 0 0 20px; font-size: 15px; }

/* Planos ------------------------------------------------------------- */
.planos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; max-width: 880px; margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 56px) 90px;
}
.plano {
    border: 1px solid var(--borda); border-radius: 16px;
    padding: 30px; background: var(--bg-2); position: relative;
}
.plano.destaque { border-color: var(--dourado); box-shadow: 0 0 0 1px var(--dourado), 0 18px 50px rgba(232,182,76,.1); }
.plano .fita {
    position: absolute; top: -11px; left: 30px;
    background: var(--dourado); color: var(--marinho);
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    padding: 4px 11px; border-radius: 6px; text-transform: uppercase;
}
.plano h3 { margin: 0 0 4px; font-size: 20px; }
.plano .chamada { color: var(--texto-2); font-size: 13.5px; margin-bottom: 18px; }
.plano .preco { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; }
.plano .preco small { font-size: 15px; font-weight: 500; color: var(--texto-2); letter-spacing: 0; }
.plano .equivale { font-size: 12.5px; color: var(--dourado); margin: 6px 0 20px; }
.plano ul { list-style: none; padding: 0; margin: 0 0 24px; }
.plano li { padding: 8px 0 8px 26px; position: relative; font-size: 14px; color: #cdd6ee; border-bottom: 1px solid var(--borda); }
.plano li::before { content: '✓'; position: absolute; left: 0; color: var(--dourado); font-weight: 700; }
.plano .bt { width: 100%; justify-content: center; }

/* Grade de busca / área ---------------------------------------------- */
.grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px 14px;
    padding: 0 clamp(16px, 4vw, 56px) 90px;
}
.grade .item { width: 100%; }

.cabecalho-secao { padding: calc(var(--topo-h) + 34px) clamp(16px, 4vw, 56px) 26px; }
.cabecalho-secao h1 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 8px; letter-spacing: -1.2px; }
.cabecalho-secao p  { color: var(--texto-2); margin: 0; max-width: 620px; line-height: 1.6; }

.vazio { padding: 60px clamp(16px, 4vw, 56px); color: var(--texto-2); text-align: center; }

/* Rodapé ------------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--borda);
    padding: 44px clamp(16px, 4vw, 56px) calc(44px + env(safe-area-inset-bottom));
    color: var(--texto-2); font-size: 13.5px;
    display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
}
.rodape .links { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Barra inferior — só no celular. É o que faz o PWA instalado parecer
   um app nativo em vez de um site dentro de uma janela.
   --------------------------------------------------------------------- */
.barra-app {
    display: none;
    position: fixed; inset: auto 0 0 0; z-index: 100;
    background: rgba(10, 10, 16, .97);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--borda);
    padding: 9px 0 calc(9px + env(safe-area-inset-bottom));
}
.barra-app a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; color: var(--texto-2);
}
.barra-app a.ativo { color: var(--dourado); }
.barra-app i { font-size: 20px; }

/* No celular a barra de baixo e o menu de verdade -- se Kids e o foco do
   site, precisa estar aqui, e colorido. Sao 6 itens: cabe, porque o rotulo
   ja e de 10.5px e o icone nao muda de tamanho. */
.barra-app a.kids { color: #7bc043; }
.barra-app a.kids i {
    background: linear-gradient(120deg, #4aa8ea, #7bc043 55%, #f2669b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.barra-app a.kids.ativo { color: var(--dourado); }

/* Abaixo de 1500px o topo nao cabe mais: a pastilha do Kids engordou a
   barra, e Kids e o foco -- entao quem sai sao os atalhos das quatro Areas
   da Vida, que continuam a um clique na home e no menu de qualquer area.
   Some primeiro a ultima area, depois a penultima, para o corte ser gradual
   em vez de a barra perder metade de uma vez. As posicoes contam os <a> do
   menu (1 = Inicio, 2..5 = as areas); o `.menu-area` junto garante que um
   dia, se a ordem mudar, isto some com uma AREA e nunca com outro item. */
@media (max-width: 1500px) { .menu a.menu-area:nth-child(5) { display: none; } }
@media (max-width: 1400px) { .menu a.menu-area:nth-child(4) { display: none; } }
@media (max-width: 1300px) { .menu a.menu-area { display: none; } }

/* Faixa de fim de teste. Fica abaixo do topo fixo e empurra o conteudo --
   sobrepor esconderia justamente o comeco da pagina. */
.faixa-teste {
    margin-top: var(--topo-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 11px clamp(16px, 4vw, 56px);
    background: linear-gradient(90deg, rgba(217, 180, 91, .18), rgba(32, 80, 224, .18));
    border-bottom: 1px solid var(--borda);
    font-size: 14.5px;
}
.faixa-teste i { color: var(--dourado); margin-right: 6px; }

/* O topo ja foi reservado pela faixa: quem vem depois nao reserva de novo,
   ou abre um buraco do tamanho do cabecalho. */
.faixa-teste + main .cabecalho-secao { padding-top: 34px; }
.faixa-teste + main .detalhe { padding-top: 0; }
.faixa-teste + main .hero { min-height: min(60vh, 520px); }

/* Num celular estreito o "Assinar" saia cortado pela borda -- o botao que
   fecha a venda, justamente. O simbolo continua levando para a home, entao
   o que sai e so o nome escrito ao lado dele. */
@media (max-width: 430px) {
    .marca-texto { display: none; }
    /* O logo nao some junto: ele E a marca inteira aqui (o nome esta
       desenhado dentro). O clamp acima nao serve neste ponto: aqui o
       vizinho e o botao "Assinar", e o que manda e o espaco que sobra, nao
       a largura da tela -- por isso a altura e fixa e o `max-width` e o
       freio de verdade, calculado sobre o que sobra depois de bandeira,
       "Entrar" e "Assinar" (medido em 360px, a tela estreita mais comum). */
    .marca-logo { height: 66px; max-width: 108px; }
}

/* O ponto em que a marca maior deixaria de caber.
   Medido: em 360px com a interface em INGLES ("Subscribe", que e 29px mais
   larga que "Assinar"), o botao que fecha a venda saia da tela. Quem cede
   nao e o logotipo -- e o respiro em volta dos dois botoes, que ninguem
   percebe apertado e ninguem clica errado por causa disso. Em portugues
   esta faixa nem chega a ser exercitada; ela existe para o idioma mais
   comprido, que e onde o problema aparece primeiro. */
@media (max-width: 400px) {
    .topo { gap: 10px; padding-left: 12px; padding-right: 12px; }
    .topo-dir { gap: 8px; }
    .topo-dir .bt-sm { padding: 8px 11px; font-size: 13px; }
}

@media (max-width: 860px) {
    .menu, .busca-topo { display: none; }
    .barra-app { display: flex; }
    body { padding-bottom: 72px; }
    .detalhe-hero { grid-template-columns: 1fr; gap: 24px; }
    .detalhe-capa { max-width: 190px; }
    .item { width: 132px; }
    .faixa.layout-banner .item { width: 240px; }
    .prateleiras { margin-top: -30px; }
    .hero { min-height: 66vh; }

    /* Duas colunas não cabem: a arte vai para cima e o texto para baixo,
       na ordem em que se olha. O hero passa a crescer com o conteúdo --
       preso em 66vh, ou a arte encolhia até virar uma tarja, ou os botões
       saíam da tela. */
    .hero.com-arte {
        min-height: 0;
        align-items: stretch;
        padding-top: clamp(76px, 14vh, 110px);
        padding-bottom: calc(clamp(40px, 7vh, 84px) + 30px);
    }
    .hero.com-arte .hero-corpo { grid-template-columns: 1fr; gap: 20px; }
    .hero.com-arte .hero-arte { order: -1; max-width: 100%; }
    .hero.com-arte .hero-arte img { max-height: 34vh; }

    /* No celular a virada e o dedo (arrasto), nao a seta: seta so aparece
       no hover, e num toque o hover ainda fica grudado depois do clique. */
    .hero-seta { display: none; }
    /* Centralizados embaixo, e nao ao lado dos botoes: em tela estreita o
       "Comecar a ler" e o "Mais informacoes" ja ocupam a largura inteira.
       A folga extra no hero e para eles nao ficarem embaixo da primeira
       fileira, que sobe 30px sobre o hero. */
    .hero-carrossel[data-carrossel] .hero { padding-bottom: calc(clamp(40px, 7vh, 84px) + 30px); }
    .hero-pontos {
        left: 0; right: 0; bottom: 44px;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
    .item:hover { transform: none; }
    /* A regra acima nao alcanca animation, e o hero e o unico lugar do site
       que tem uma. O carrossel tambem para de girar sozinho -- ver app.js. */
    .hero-carrossel .hero * { animation: none !important; }
}


/* ---------------------------------------------------------------------
   Avisos (Growl) e dialogos (Krajee) no tema escuro
   O Bootstrap so entra no projeto por causa deles, entao o ajuste fica
   restrito aqui — nenhuma outra regra da vitrine depende do framework.
   --------------------------------------------------------------------- */
[data-notify="container"] {
    background: var(--bg-2) !important;
    color: var(--texto) !important;
    border: 1px solid var(--borda) !important;
    border-left: 3px solid var(--royal) !important;
    border-radius: 10px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .55) !important;
    padding: 14px 42px 14px 16px !important;
    max-width: 380px;
    font-size: 14px;
}
[data-notify="container"].alert-success { border-left-color: #22c08a !important; }
[data-notify="container"].alert-danger  { border-left-color: #e0576b !important; }
[data-notify="container"].alert-warning { border-left-color: var(--dourado) !important; }
[data-notify="container"] .btn-close { filter: invert(1) opacity(.6); }
[data-notify="icon"] { margin-right: 6px; color: var(--royal); }

.modal-content {
    background: var(--bg-2);
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: 14px;
}
.modal-header, .modal-footer { border-color: var(--borda); }
.modal-header .btn-close { filter: invert(1) opacity(.6); }
.modal-body { font-size: 15px; line-height: 1.6; }
.modal-footer .btn-primary { background: var(--royal); border-color: var(--royal); }
.modal-footer .btn-secondary { background: transparent; border-color: var(--borda); color: var(--texto); }

/* ---------------------------------------------------------------------
   Perfilamento — quiz, resultado e acolhimento
   --------------------------------------------------------------------- */
.perfil-abertura {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--topo-h) + 30px) clamp(16px, 4vw, 56px) 70px;
    background:
        radial-gradient(60% 70% at 70% 15%, rgba(32, 80, 224, .22), transparent 70%),
        linear-gradient(160deg, #060b22, var(--bg));
}
.perfil-caixa { width: 100%; max-width: 640px; }
.perfil-caixa h1 {
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.1;
    letter-spacing: -1.4px;
    margin: 0 0 14px;
    font-weight: 800;
}

.perfil-caminhos { display: grid; gap: 14px; margin: 28px 0 22px; }
.perfil-caminho {
    display: grid;
    gap: 5px;
    padding: 22px;
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    transition: border-color .2s, transform .2s, background .2s;
}
.perfil-caminho:hover {
    border-color: var(--royal);
    background: rgba(32, 80, 224, .1);
    transform: translateY(-2px);
}
.perfil-caminho i { font-size: 24px; color: var(--dourado); }
.perfil-caminho strong { font-size: 17px; }
.perfil-caminho small { color: var(--texto-2); font-size: 13.5px; }
.perfil-caminho .bt { justify-self: start; margin-top: 10px; }

.perfil-rodape { font-size: 12.5px; color: var(--texto-2); }

/* Quiz --------------------------------------------------------------- */
.quiz-progresso {
    height: 4px;
    background: rgba(255, 255, 255, .12);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.quiz-progresso span {
    display: block;
    height: 100%;
    background: var(--dourado);
    transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.quiz-contador {
    font-size: 12px;
    color: var(--texto-2);
    letter-spacing: .6px;
    margin-bottom: 26px;
}

/* Um passo por vez: oito perguntas de uma vez viram formulario de
   cadastro, e formulario de cadastro nao convida ninguem a se abrir. */
.quiz-passo { display: none; border: 0; padding: 0; margin: 0; }
.quiz-passo.ativo { display: block; animation: quiz-entra .3s ease; }
@keyframes quiz-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.quiz-passo legend {
    font-size: clamp(21px, 2.8vw, 28px);
    font-weight: 700;
    letter-spacing: -.7px;
    line-height: 1.25;
    margin-bottom: 8px;
    float: none;
    width: auto;
}
.quiz-ajuda { color: var(--texto-2); font-size: 14.5px; margin: 0 0 20px; }

.quiz-opcoes { display: grid; gap: 10px; }
.quiz-opcao {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    font-size: 15.5px;
    transition: border-color .18s, background .18s;
}
.quiz-opcao:hover { border-color: var(--royal); background: rgba(32, 80, 224, .1); }
.quiz-opcao input { accent-color: var(--dourado); width: 18px; height: 18px; flex: 0 0 auto; }
.quiz-opcao:has(input:checked) {
    border-color: var(--dourado);
    background: rgba(217, 180, 91, .14);
}

.quiz-acoes { display: flex; gap: 12px; margin-top: 26px; }
.quiz-acoes #quiz-enviar { margin-left: auto; }

/* Itens velados no resultado ----------------------------------------- */
.item-velado .item-capa { filter: saturate(.4); }
.item-velado .capa-gerada { opacity: .5; }
.item-velado .velo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(5, 9, 28, .55);
    backdrop-filter: blur(3px);
    font-size: 22px;
    color: var(--dourado);
}

/* Acolhimento -------------------------------------------------------- */
.acolhimento { text-align: center; max-width: 560px; }
.acolhimento > i:first-child { font-size: 40px; color: #e0576b; }
.acolhimento h1 { margin-top: 16px; }
.acolhimento p { color: #cdd6ee; line-height: 1.7; font-size: 16px; }
.acolhimento-cvv {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    text-align: left;
    flex-wrap: wrap;
    padding: 20px 22px;
    margin: 26px 0 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--borda);
}
.acolhimento-cvv strong { display: block; font-size: 16px; }
.acolhimento-cvv small { color: var(--texto-2); }
.acolhimento-links { font-size: 14px; }
.acolhimento-links a, .acolhimento-fim a { color: var(--dourado); text-decoration: underline; }
.acolhimento hr { border-color: var(--borda); margin: 26px 0; }
.acolhimento-fim { font-size: 14.5px; color: var(--texto-2); }

/* ---------------------------------------------------------------------
   Consentimento
   O resumo fica sempre visível ao lado da caixa e o texto completo abre
   em um clique. Enterrar tudo atrás de "li e aceito" é o padrão que
   transforma consentimento em formalidade — e formalidade não protege
   ninguém, nem a pessoa nem o negócio.
   --------------------------------------------------------------------- */
.consentimento {
    margin: 22px 0 18px;
    padding: 18px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
}
.consentimento .form-check { margin: 0; }
.consentimento .form-check-input {
    width: 20px; height: 20px;
    margin-top: 2px;
    background-color: transparent;
    border-color: rgba(255, 255, 255, .35);
}
.consentimento .form-check-input:checked {
    background-color: var(--dourado);
    border-color: var(--dourado);
}
.consentimento .form-check-label {
    font-size: 14.5px;
    line-height: 1.5;
    padding-left: 8px;
    color: var(--texto);
}
.consentimento .invalid-feedback, .consentimento .help-block {
    color: #ff8b98;
    font-size: 13px;
}

.consentimento-abrir {
    background: none;
    border: 0;
    padding: 10px 0 0;
    color: var(--dourado);
    font-size: 13.5px;
    text-decoration: underline;
}

.consentimento-texto {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--borda);
}
.consentimento-bloco {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.consentimento-bloco i { color: var(--royal); font-size: 17px; margin-top: 2px; }
.consentimento-bloco strong { font-size: 14.5px; display: block; margin-bottom: 3px; }
.consentimento-bloco p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--texto-2);
}
.consentimento-versao {
    font-size: 12px;
    color: var(--texto-2);
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--borda);
}

/* Honeypot. Fora da tela em vez de display:none — leitor de tela ignora
   pelo aria-hidden, e robô que filtra "display:none" ainda cai nele. */
.campo-oculto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.aviso-risco {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.55;
    color: var(--texto-2);
    background: rgba(224, 87, 107, .1);
    border-left: 3px solid #e0576b;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 4px;
}
.aviso-risco i { color: #e0576b; font-size: 15px; margin-top: 1px; }

.captcha-linha { margin-bottom: 8px; }
.captcha-imagem {
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--borda);
    line-height: 0;
}
.captcha-linha .form-control,
.perfil-caixa .form-control {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--borda);
    color: var(--texto);
    border-radius: 10px;
    padding: 12px 14px;
}
.perfil-caixa .form-control:focus {
    background: rgba(255, 255, 255, .07);
    border-color: var(--royal);
    box-shadow: none;
    color: var(--texto);
}
.perfil-caixa .form-control::placeholder { color: var(--texto-2); }
.perfil-caixa .form-text, .perfil-caixa .hint-block {
    color: var(--texto-2);
    font-size: 12.5px;
}

.quiz-consentimento { animation: quiz-entra .3s ease; }

/* ---------------------------------------------------------------------
   Seletor de idioma
   --------------------------------------------------------------------- */
.idiomas { position: relative; }
.idiomas-atual {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 7px 12px;
    color: var(--texto);
    font-size: 13px;
}
.idiomas-atual .bi { font-size: 11px; opacity: .6; }
.idiomas-lista {
    position: absolute; top: calc(100% + 8px); right: 0;
    list-style: none; margin: 0; padding: 6px;
    min-width: 160px;
    background: var(--bg-2);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 120;
}
.idiomas:hover .idiomas-lista,
.idiomas:focus-within .idiomas-lista { opacity: 1; visibility: visible; transform: none; }
.idiomas-lista a {
    display: block; padding: 9px 12px; border-radius: 8px;
    font-size: 14px; color: var(--texto-2);
}
.idiomas-lista a:hover { background: rgba(255, 255, 255, .06); color: var(--texto); }
.idiomas-lista a.ativo { color: var(--dourado); }

@media (max-width: 860px) {
    .idiomas-atual span { display: none; }
}

/* Emoji na capa gerada (conteudo infantil sem arte). */
.cg-emoji { font-size: 44px; line-height: 1; margin-bottom: 6px; }

/* Convite ao acompanhamento pastoral (tela de resultado). */
.paywall.pastoral { border-color: rgba(217,180,91,.4); background: linear-gradient(160deg, rgba(217,180,91,.08), var(--bg)); }
.form-pastoral { max-width: 560px; margin: 0 auto; }
.pastoral-campos { display: grid; gap: 10px; margin-bottom: 14px; }
@media (min-width: 620px) { .pastoral-campos { grid-template-columns: 1fr 1fr 1fr; } }
.pastoral-aceite {
    display: flex; gap: 10px; align-items: flex-start; text-align: left;
    font-size: 13px; color: var(--texto-2); margin-bottom: 16px; line-height: 1.5;
}
.pastoral-aceite input { margin-top: 3px; accent-color: var(--dourado); width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Notificacoes — sininho e caixa de entrada
   --------------------------------------------------------------------- */
.sino { position: relative; font-size: 19px; color: var(--texto); display: inline-flex; }
.sino-contador {
    position: absolute; top: -6px; right: -8px;
    background: #e0576b; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; display: grid; place-items: center;
}

.notificacoes-lista { padding: 0 clamp(16px, 4vw, 56px) 80px; max-width: 760px; }
.notif-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--borda); border-radius: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, .03);
    transition: border-color .2s, background .2s;
}
.notif-item:hover { border-color: var(--royal); background: rgba(32, 80, 224, .07); }
.notif-item .notif-ponto {
    width: 9px; height: 9px; border-radius: 50%;
    background: transparent; margin-top: 6px; flex: 0 0 auto;
}
.notif-item.nao-lida .notif-ponto { background: var(--dourado); }
.notif-item.nao-lida { background: rgba(217, 180, 91, .06); border-color: rgba(217,180,91,.25); }
.notif-corpo { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.notif-corpo strong { font-size: 15px; }
.notif-texto { font-size: 13.5px; color: var(--texto-2); line-height: 1.5; }
.notif-data { font-size: 12px; color: var(--texto-2); margin-top: 3px; }
.notif-item > .bi { color: var(--texto-2); align-self: center; }

/* Pagina de erro ----------------------------------------------------- */
.erro-pagina { text-align: center; }
.erro-codigo {
    font-size: clamp(52px, 10vw, 92px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -3px;
    color: var(--royal);
    opacity: .9;
    margin-bottom: 6px;
}
.erro-detalhe {
    margin-top: 14px;
    font-size: 13px;
    color: var(--texto-2);
}
.erro-acoes { margin-top: 24px; }

/* Login / cadastro --------------------------------------------------- */
.auth-ajuda { font-size: 13px; color: var(--texto-2); margin-top: 4px; line-height: 1.8; }
.auth-ajuda a { color: var(--royal); }
.auth-alternar {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--borda);
    font-size: 14px;
    color: var(--texto-2);
    text-align: center;
}
.auth-alternar a { color: var(--royal); font-weight: 600; }

/* Aviso da tranca na tela de cadastro. So aparece enquanto o site esta em
   montagem, entao nao vale um componente novo -- veste o mesmo tom do
   .auth-ajuda, com a barra dourada que o olho ja associa a "atencao" no
   resto do site. */
/* Campo de senha com o olho de mostrar/ocultar.
   O botao fica DENTRO da caixa do campo, e o input ganha espaco a direita
   para o texto nao passar por baixo dele. */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 44px; }
.ver-senha {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--texto-2);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.ver-senha:hover { color: var(--texto); background: rgba(255,255,255,.06); }
.ver-senha:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }

/* Trilha "1 - 2 - 3" do cadastro em passos.
   O custo de um formulario em etapas e a pessoa nao saber quanto falta --
   e desistir no meio achando que nao acaba nunca. Tres bolinhas resolvem
   isso sem texto nenhum. */
.passos {
    display: flex;
    justify-content: center;
    gap: clamp(10px, 4vw, 34px);
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}
.passo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--texto-2);
    opacity: .5;
}
.passo-bolha {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--borda);
    font-weight: 700; font-size: 13px;
}
.passo.agora { opacity: 1; color: var(--texto); }
.passo.agora .passo-bolha {
    background: var(--royal);
    border-color: var(--royal);
    color: #fff;
}
.passo.feito { opacity: 1; }
.passo.feito .passo-bolha {
    background: rgba(217, 180, 91, .18);
    border-color: var(--dourado);
    color: var(--dourado);
}

.auth-aviso {
    margin-top: 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--dourado);
    background: rgba(217, 180, 91, .08);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--texto-2);
}

/* ---------------------------------------------------------------------
   Ambientes (o genérico)
   ---------------------------------------------------------------------
   O ambiente Kids tem arte própria (css/kids-area.css e os parciais
   `_hero_kids` / `_chamada_kids`). Estas regras são o que um ambiente
   NOVO recebe sem designer nenhum: um topo com a ilustração enviada, o
   nome e a chamada, e um cartaz na home com a cor dele.

   A cor entra por `--amb-cor`, definida no HTML a partir do dado — é o
   que permite dois ambientes coexistirem com cores diferentes sem uma
   regra CSS por ambiente.
   --------------------------------------------------------------------- */
.amb-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
    padding: clamp(24px, 5vw, 56px);
    border-radius: var(--raio);
    overflow: hidden;
    margin: 0 clamp(16px, 4vw, 56px) 28px;
    background: linear-gradient(120deg, var(--amb-cor, var(--royal)) 0%, var(--bg-2) 85%);
}
.amb-hero-arte {
    position: absolute;
    inset: 0 0 0 40%;
    background-size: cover;
    background-position: center right;
    /* A arte entra pela direita e some no gradiente: assim uma imagem
       qualquer -- e será uma imagem qualquer, enviada pelo cliente --
       não disputa legibilidade com o texto ao lado. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.amb-hero-conteudo { position: relative; max-width: 560px; }
.amb-hero-icone { font-size: 34px; opacity: .9; }
.amb-hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 8px 0 10px; letter-spacing: -.5px; }
.amb-hero p { color: var(--texto-2); margin-bottom: 18px; font-size: 16px; }

@media (max-width: 768px) {
    .amb-hero-arte { inset: 0; opacity: .25; -webkit-mask-image: none; mask-image: none; }
}

/* O cartaz do ambiente na home. */
.amb-chamada {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 clamp(16px, 4vw, 56px) 26px;
    padding: 18px 22px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: linear-gradient(100deg, color-mix(in srgb, var(--amb-cor, var(--royal)) 28%, var(--bg-2)), var(--bg-2));
    color: var(--texto);
    text-decoration: none;
}
.amb-chamada:hover { border-color: var(--amb-cor, var(--royal)); }
.amb-chamada > i:first-child { font-size: 30px; color: var(--amb-cor, var(--royal)); }
.amb-chamada span { display: flex; flex-direction: column; flex: 1; }
.amb-chamada strong { font-size: 17px; }
.amb-chamada small { color: var(--texto-2); }

/* O item de ambiente no menu do topo usa a cor dele. */
.menu-kids[style*="--amb-cor"] { color: var(--amb-cor); }