/* ===================================================================
   Luz e Verdade — folha de estilo
   Serifa para a Palavra, sem serifa para a interface.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
    --tinta:        #1a1614;
    --tinta-suave:  #5c5148;
    --papel:        #fbf9f5;
    --papel-fundo:  #f2ede4;
    --papel-card:   #ffffff;
    --borda:        #e2dacb;
    --borda-forte:  #cdc0aa;
    --ouro:         #a8791f;
    --ouro-claro:   #d4af6a;
    --dourado-fundo: #fdf6e6;
    --sombra:       0 1px 2px rgba(26,22,20,.05), 0 8px 24px rgba(26,22,20,.06);
    --sombra-forte: 0 2px 4px rgba(26,22,20,.06), 0 16px 48px rgba(26,22,20,.12);

    --serifa: 'Spectral', Georgia, 'Times New Roman', serif;
    --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --raio:    10px;
    --raio-g: 16px;
    --largura: 1120px;
    --leitura: 40rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--tinta);
    background: var(--papel-fundo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Texto corrido do site, fora da leitura bíblica */
p { max-width: var(--leitura); }

/* ---------------------------------------------------------------- *
   Cabeçalho
   ---------------------------------------------------------------- */
.cabecalho {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251, 249, 245, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
}
.cabecalho-inner {
    max-width: var(--largura); margin: 0 auto;
    padding: 0 1.25rem; height: 66px;
    display: flex; align-items: center; gap: 1.5rem;
}
.marca {
    display: flex; align-items: baseline; gap: .6rem;
    text-decoration: none; color: var(--tinta);
    font-family: var(--serifa); font-size: 1.3rem;
    font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.marca .cruz { color: var(--ouro); font-size: 1.05rem; }
.marca small {
    font-family: var(--sans); font-size: .68rem; font-weight: 500;
    color: var(--tinta-suave); letter-spacing: .1em; text-transform: uppercase;
}

.menu-principal { display: flex; gap: .35rem; margin-left: auto; }
.menu-principal a {
    padding: .45rem .8rem; border-radius: 7px;
    color: var(--tinta-suave); text-decoration: none;
    font-size: .9rem; font-weight: 500; white-space: nowrap;
    transition: background .15s, color .15s;
}
.menu-principal a:hover { background: var(--dourado-fundo); color: var(--tinta); }
.menu-principal a.ativo { color: var(--ouro); background: var(--dourado-fundo); }

/* ---------------------------------------------------------------- *
   Seletor de tradução
   ---------------------------------------------------------------- */
.seletor-vrs { display: flex; align-items: center; }
.seletor-vrs select {
    font-family: var(--sans); font-size: .82rem;
    color: var(--tinta-suave);
    background: var(--papel-card);
    border: 1px solid var(--borda);
    border-radius: 7px;
    padding: .42rem 1.8rem .42rem .6rem;
    cursor: pointer; max-width: 15rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235c5148' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .6rem center;
}
.seletor-vrs select:hover { border-color: var(--borda-forte); }

/* ---------------------------------------------------------------- *
   Estrutura
   ---------------------------------------------------------------- */
.principal { max-width: var(--largura); margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
.principal > * + * { margin-top: 2rem; }

.caminho {
    font-size: .82rem; color: var(--tinta-suave);
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-bottom: 1.5rem;
}
.caminho a { color: var(--tinta-suave); text-decoration: none; }
.caminho a:hover { color: var(--ouro); text-decoration: underline; }
.caminho .sep { color: var(--borda-forte); }
.caminho .atual { color: var(--tinta); font-weight: 500; }

/* ---------------------------------------------------------------- *
   Capa
   ---------------------------------------------------------------- */
.capa { text-align: center; padding: 3rem 0 2rem; }
.capa .cruz-grande {
    font-size: 2rem; color: var(--ouro); display: block; margin-bottom: 1rem;
}
.capa h1 {
    font-family: var(--serifa); font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 .75rem; color: var(--tinta);
}
.capa p.subtitulo {
    font-size: 1.08rem; color: var(--tinta-suave);
    max-width: 34rem; margin: 0 auto 2rem;
}

/* ---------------------------------------------------------------- *
   Leitura do dia
   ---------------------------------------------------------------- */
.leitura-dia {
    background: var(--papel-card);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 2.5rem;
    position: relative; overflow: hidden;
    max-width: 46rem; margin: 0 auto;
}
.leitura-dia::before {
    content: '"';
    position: absolute; top: -2.2rem; left: 1rem;
    font-family: var(--serifa); font-size: 9rem;
    color: var(--dourado-fundo); line-height: 1; pointer-events: none;
}
.leitura-dia .rotulo {
    display: inline-block; font-size: .7rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ouro); margin-bottom: 1.25rem; position: relative;
}
.leitura-dia .texto {
    font-family: var(--serifa); font-size: 1.32rem; line-height: 1.75;
    color: var(--tinta); position: relative; margin: 0 0 1.25rem;
}
.leitura-dia .referencia {
    font-size: .88rem; color: var(--tinta-suave);
    border-top: 1px solid var(--borda); padding-top: 1rem; position: relative;
}
.leitura-dia .referencia strong { color: var(--tinta); font-weight: 600; }
.leitura-dia .referencia a { color: var(--tinta); text-decoration: none; }
.leitura-dia .referencia a:hover { color: var(--ouro); }

/* ---------------------------------------------------------------- *
   Leitura de capítulo
   ---------------------------------------------------------------- */
.cabecalho-leitura {
    text-align: center; margin-bottom: 2.5rem;
    padding-bottom: 1.75rem; border-bottom: 1px solid var(--borda);
}
.cabecalho-leitura h1 {
    font-family: var(--serifa); font-weight: 600;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    letter-spacing: -.015em; margin: 0 0 .4rem;
}
.cabecalho-leitura .traducao-atual {
    font-size: .84rem; color: var(--tinta-suave); font-style: italic;
}

.versiculos {
    font-family: var(--serifa);
    font-size: 1.16rem; line-height: 1.85;
    max-width: var(--leitura); margin: 0 auto;
    color: var(--tinta);
}
.versiculo {
    margin-bottom: 1.35rem;
    scroll-margin-top: 90px;
    position: relative;
}
.versiculo .num {
    font-family: var(--sans);
    font-size: .68rem; font-weight: 600;
    color: var(--ouro);
    vertical-align: super;
    margin-right: .3rem;
    user-select: none;
    letter-spacing: .04em;
}
.versiculo.destacado {
    background: var(--dourado-fundo);
    border-left: 3px solid var(--ouro-claro);
    padding: .7rem 1rem; border-radius: 0 var(--raio) var(--raio) 0;
}
.versiculo a.ancora {
    position: absolute; left: -1.1rem; top: .1rem;
    color: var(--borda-forte); text-decoration: none;
    opacity: 0; transition: opacity .15s; font-size: .8rem;
}
.versiculo:hover a.ancora { opacity: 1; }

/* ---------------------------------------------------------------- *
   Navegação entre capítulos
   ---------------------------------------------------------------- */
.navegacao-capitulo {
    max-width: var(--leitura); margin: 3rem auto 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    border-top: 1px solid var(--borda); padding-top: 2rem;
}
.nav-lado {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .9rem 1.1rem;
    background: var(--papel-card);
    border: 1px solid var(--borda); border-radius: var(--raio);
    text-decoration: none; color: var(--tinta);
    transition: border-color .15s, transform .15s;
}
.nav-lado:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.nav-lado .dir { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave); }
.nav-lado .alvo { font-family: var(--serifa); font-size: 1.05rem; font-weight: 600; }
.nav-lado.direita { text-align: right; align-items: flex-end; }
.vazio { visibility: hidden; }

/* ---------------------------------------------------------------- *
   Grade de livros
   ---------------------------------------------------------------- */
.secao-titulo {
    font-family: var(--serifa); font-size: 1.4rem; font-weight: 600;
    margin: 0 0 1.25rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--borda);
    display: flex; align-items: baseline; gap: .6rem;
}
.secao-titulo small { font-family: var(--sans); font-size: .75rem; color: var(--tinta-suave); font-weight: 400; }

.grade-livros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .6rem;
}
.cartao-livro {
    display: block; text-decoration: none; color: var(--tinta);
    background: var(--papel-card);
    border: 1px solid var(--borda); border-radius: var(--raio);
    padding: .85rem 1rem;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cartao-livro:hover {
    border-color: var(--ouro-claro); transform: translateY(-2px);
    box-shadow: var(--sombra);
}
.cartao-livro .nome { font-family: var(--serifa); font-size: 1rem; font-weight: 600; display: block; }
.cartao-livro .meta { font-size: .72rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- *
   Grade de capítulos
   ---------------------------------------------------------------- */
.grade-capitulos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: .5rem; max-width: 44rem; margin: 0 auto;
}
.cartao-capitulo {
    display: grid; place-items: center;
    aspect-ratio: 1; text-decoration: none;
    font-family: var(--serifa); font-size: 1.05rem; font-weight: 600;
    color: var(--tinta);
    background: var(--papel-card);
    border: 1px solid var(--borda); border-radius: var(--raio);
    transition: all .15s;
}
.cartao-capitulo:hover { background: var(--ouro); color: #fff; border-color: var(--ouro); transform: translateY(-2px); }
.cartao-capitulo.atual { background: var(--ouro); color: #fff; border-color: var(--ouro); }
.cartao-capitulo.indisponivel {
    color: var(--borda-forte); background: var(--papel-fundo);
    border-style: dashed; pointer-events: none;
}

/* ---------------------------------------------------------------- *
   Busca
   ---------------------------------------------------------------- */
.caixa-busca { max-width: 34rem; margin: 0 auto 2.5rem; }
.caixa-busca form { display: flex; gap: .6rem; }
.caixa-busca input[type=search] {
    flex: 1; font-family: var(--sans); font-size: 1rem;
    padding: .8rem 1rem;
    background: var(--papel-card);
    border: 1px solid var(--borda-forte); border-radius: var(--raio);
    color: var(--tinta);
}
.caixa-busca input[type=search]:focus {
    outline: none; border-color: var(--ouro);
    box-shadow: 0 0 0 3px rgba(168,121,31,.13);
}

.botao {
    font-family: var(--sans); font-size: .95rem; font-weight: 500;
    padding: .8rem 1.4rem; border-radius: var(--raio);
    border: 1px solid var(--ouro); background: var(--ouro); color: #fff;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s;
}
.botao:hover { background: #8f6417; border-color: #8f6417; }
.botao.secundario { background: transparent; color: var(--tinta); border-color: var(--borda-forte); }
.botao.secundario:hover { background: var(--papel-card); color: var(--tinta); }

.resultados { display: flex; flex-direction: column; gap: .75rem; max-width: var(--leitura); margin: 0 auto; }
.resultado {
    background: var(--papel-card); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 1.1rem 1.25rem;
    text-decoration: none; color: inherit; display: block;
    transition: border-color .15s;
}
.resultado:hover { border-color: var(--ouro-claro); }
.resultado .ref {
    font-size: .76rem; font-weight: 600; color: var(--ouro);
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: .4rem;
    display: block;
}
.resultado .txt { font-family: var(--serifa); font-size: 1.02rem; line-height: 1.65; }
.resultado mark { background: var(--dourado-fundo); color: var(--tinta); padding: 0 .15em; border-radius: 2px; }

.aviso {
    text-align: center; padding: 3rem 1rem; color: var(--tinta-suave);
    background: var(--papel-card); border: 1px dashed var(--borda-forte);
    border-radius: var(--raio); max-width: 34rem; margin: 0 auto;
}
.aviso strong { color: var(--tinta); display: block; margin-bottom: .4rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------- *
   Rodapé
   ---------------------------------------------------------------- */
.rodape {
    border-top: 1px solid var(--borda);
    background: var(--papel);
    margin-top: 4rem;
    padding: 2.5rem 1.25rem;
    text-align: center; color: var(--tinta-suave); font-size: .84rem;
}
.rodape .versiculo-rodape {
    font-family: var(--serifa); font-style: italic;
    font-size: 1rem; color: var(--tinta);
    max-width: 36rem; margin: 0 auto 1rem; line-height: 1.7;
}
.rodape .ref { color: var(--ouro); font-size: .78rem; font-weight: 600; }
.rodape .nota { margin-top: 1.25rem; font-size: .76rem; color: var(--tinta-suave); opacity: .8; }

/* ---------------------------------------------------------------- *
   Utilidades
   ---------------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.centrado { text-align: center; }
.silencioso { color: var(--tinta-suave); }

/* ---------------------------------------------------------------- *
   Responsivo
   ---------------------------------------------------------------- */
@media (max-width: 860px) {
    .cabecalho-inner { height: auto; padding: .7rem 1rem; flex-wrap: wrap; gap: .6rem; }
    .menu-principal { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: .2rem; }
    .menu-principal a { padding: .35rem .6rem; font-size: .85rem; }
    .seletor-vrs { margin-left: auto; }
    .seletor-vrs select { max-width: 9rem; }
    .marca small { display: none; }
    .leitura-dia { padding: 1.75rem 1.25rem; }
    .leitura-dia .texto { font-size: 1.15rem; }
    .versiculos { font-size: 1.08rem; }
    .navegacao-capitulo { grid-template-columns: 1fr; }
    .nav-lado.direita { text-align: left; align-items: flex-start; }
    .versiculo a.ancora { display: none; }
}

@media (max-width: 480px) {
    .principal { padding: 1.5rem 1rem 3rem; }
    .capa { padding: 2rem 0 1.5rem; }
    .grade-livros { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .grade-capitulos { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); }
}

@media print {
    .cabecalho, .rodape, .navegacao-capitulo, .versiculo a.ancora { display: none; }
    body { background: #fff; }
    .versiculos { font-size: 12pt; max-width: none; }
}