*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --cor-primaria:   #4a2c2a;
    --cor-acento:     #c9956a;
    --cor-fundo:      #fdf8f3;
    --cor-texto:      #2d2020;
    --cor-suave:      #f0e6d8;
    --fonte-titulo:   'Playfair Display', serif;
    --fonte-corpo:    'Inter', sans-serif;
    --max-width:      900px;
}

body {
    font-family: var(--fonte-corpo);
    background: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.7;
}

/* HERO */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 4rem 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
    flex-wrap: wrap;
}

.hero-texto { flex: 1; min-width: 280px; }
.hero-texto h1 {
    font-family: var(--fonte-titulo);
    font-size: 2.4rem;
    color: var(--cor-primaria);
    margin-bottom: .5rem;
}
.hero-texto .subtitulo {
    font-size: 1.1rem;
    color: var(--cor-acento);
    margin-bottom: 1rem;
    font-style: italic;
}
.hero-texto .descricao { margin-bottom: 2rem; }
.hero-texto small { display: block; color: #888; font-size: .8rem; margin-top: .5rem; }

.hero-capa img {
    width: 260px;
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* SEÇÕES */
.secao {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem;
    border-top: 1px solid var(--cor-suave);
}
.secao h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}
.secao h3 {
    font-size: 1.1rem;
    margin: 1.5rem 0 .5rem;
    color: var(--cor-primaria);
}
.secao ul { padding-left: 1.5rem; }
.secao ul li { margin-bottom: .5rem; }
.secao p { margin-bottom: 1rem; }

.secao-destaque { background: var(--cor-suave); border-radius: 12px; }

/* AUTORA */
.autora {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.autora img {
    width: 180px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* FAQ */
.faq details {
    border: 1px solid var(--cor-suave);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-bottom: .8rem;
}
.faq summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--cor-primaria);
}
.faq details[open] summary { margin-bottom: .8rem; }

/* CTA */
.cta-final { text-align: center; }
.cta-final small { display: block; color: #888; margin-top: .5rem; font-size: .8rem; }

/* BOTÃO */
.btn-principal {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    padding: .85rem 2.2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: background .2s;
}
.btn-principal:hover { background: var(--cor-acento); }

/* FOOTER */
.site-footer {
    text-align: center;
    padding: 2rem;
    font-size: .85rem;
    color: #999;
    border-top: 1px solid var(--cor-suave);
    margin-top: 2rem;
}

/* RESPONSIVO */
@media (max-width: 600px) {
    .hero { flex-direction: column; text-align: center; }
    .autora { flex-direction: column; align-items: center; text-align: center; }
    .hero-texto h1 { font-size: 1.8rem; }
}

/* ============================================================
   CSS COMPLEMENTAR — RESPONSIVIDADE COMPLETA DA HOME
   ============================================================ */

/* Telas médias: tablets em modo retrato (até 768px) */
@media (max-width: 768px) {

    .hero {
        padding: 2.5rem 1.5rem;
        gap: 2rem;
    }

    .hero-capa img {
        width: 200px;
    }

    .secao {
        padding: 2rem 1.5rem;
    }

    .secao h2 {
        font-size: 1.5rem;
    }

    .autora {
        gap: 1.5rem;
    }

    .autora img {
        width: 140px;
    }

    .faq details {
        padding: .85rem 1rem;
    }

    .btn-principal {
        padding: .8rem 1.8rem;
        font-size: .95rem;
    }
}

/* Telas pequenas: celulares (até 600px) — reforço do que já existe */
@media (max-width: 600px) {

    .hero {
        padding: 2rem 1.2rem;
    }

    .hero-texto h1 {
        font-size: 1.7rem;
        line-height: 1.3;
    }

    .hero-texto .subtitulo {
        font-size: 1rem;
    }

    .hero-texto .descricao {
        font-size: .95rem;
    }

    .hero-capa img {
        width: 180px;
    }

    .secao {
        padding: 1.8rem 1.2rem;
    }

    .secao h2 {
        font-size: 1.35rem;
    }

    .secao ul {
        padding-left: 1.2rem;
    }

    .secao ul li {
        font-size: .95rem;
        margin-bottom: .6rem;
    }

    .secao-destaque {
        border-radius: 8px;
        padding: 1.5rem 1.2rem;
    }

    .autora img {
        width: 120px;
    }

    .faq details {
        padding: .75rem .9rem;
        font-size: .95rem;
    }

    .faq summary {
        font-size: .95rem;
        line-height: 1.4;
    }

    /* Botão ocupa largura total no celular */
    .btn-principal {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem;
        font-size: 1rem;
    }

    .cta-final {
        padding: 2rem 1.2rem;
    }

    .cta-final small {
        font-size: .78rem;
    }

    .site-footer {
        padding: 1.5rem 1.2rem;
        font-size: .8rem;
    }
}

/* Telas muito pequenas: celulares antigos (até 360px) */
@media (max-width: 360px) {

    .hero-texto h1 {
        font-size: 1.45rem;
    }

    .hero-texto .subtitulo {
        font-size: .92rem;
    }

    .secao h2 {
        font-size: 1.2rem;
    }

    .hero-capa img {
        width: 150px;
    }
}

/* Preferência de sistema: modo escuro */
/* color-scheme: light only; */
@media (prefers-color-scheme: light only) {
    :root {
        --cor-fundo:  #1e1410;
        --cor-texto:  #f0e6d8;
        --cor-suave:  #2d1f1a;
    }

    .faq details {
        border-color: #3a2a24;
    }

    .site-footer {
        color: #7a6a62;
    }
}

/* Acessibilidade: foco visível para navegação por teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--cor-acento);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Acessibilidade: respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .btn-principal {
        transition: none;
    }
}

/* ============================================================
   PÁGINA DE COMPRA
   ============================================================ */

.comprar-wrap {
    display: flex;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.2rem;
    align-items: flex-start;
}

/* ── Lateral (capa + resumo) ── */
.comprar-lateral {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 1.5rem;
}

.comprar-capa {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.15);
    margin-bottom: 1.2rem;
}

.comprar-capa-placeholder {
    background: var(--cor-suave);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.2rem;
}

.comprar-livro-info h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    color: var(--cor-primaria);
    margin-bottom: .3rem;
}

.comprar-autor { color: #888; font-size: .9rem; margin-bottom: .6rem; }

/* Badges de estoque */
.badge {
    display: inline-block;
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.badge-ok     { background: #e6f4ea; color: #2d6a3f; }
.badge-aviso  { background: #fff8e1; color: #a05a00; }
.badge-erro   { background: #fdecea; color: #b71c1c; }

/* Resumo */
.comprar-resumo {
    background: var(--cor-suave);
    border-radius: 10px;
    padding: 1.2rem;
    margin-top: 1rem;
}
.comprar-resumo h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-bottom: .8rem;
}
.resumo-linha {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    margin-bottom: .5rem;
}
.resumo-total {
    border-top: 1px solid #d4c5b5;
    padding-top: .6rem;
    margin-top: .3rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--cor-primaria);
}
.resumo-pagamentos {
    display: flex;
    gap: .6rem;
    margin-top: .8rem;
    font-size: .85rem;
}
.resumo-obs {
    font-size: .78rem;
    color: #888;
    margin-top: .6rem;
}

/* ── Área do formulário ── */
.comprar-form-area { flex: 1; min-width: 0; }

.form-secao {
    background: #fff;
    border: 1px solid var(--cor-suave);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.2rem;
}

.form-secao h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.2rem;
    color: var(--cor-primaria);
    margin-bottom: 1rem;
}

.form-secao h3 {
    font-size: .95rem;
    color: var(--cor-primaria);
    margin: 1.2rem 0 .6rem;
}

/* Formato cards */
.formato-cards { display: flex; gap: 1rem; flex-wrap: wrap; }

.formato-card {
    flex: 1;
    min-width: 140px;
    border: 2px solid var(--cor-suave);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    transition: border-color .2s, background .2s;
}

.formato-card input[type="radio"] { display: none; }

.formato-card.selecionado {
    border-color: var(--cor-primaria);
    background: #fdf3ec;
}

.formato-icone { font-size: 1.6rem; }

.formato-card strong { display: block; font-size: .95rem; color: var(--cor-primaria); }
.formato-card span   { display: block; font-size: .8rem; color: #888; }
.formato-card em     { display: block; font-size: 1rem; font-style: normal;
                        font-weight: 700; color: var(--cor-acento); margin-top: .3rem; }

/* Quantidade */
.quantidade-ctrl {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .4rem;
}

.quantidade-ctrl button {
    width: 36px; height: 36px;
    border: 1px solid var(--cor-suave);
    background: #fff;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--cor-primaria);
    transition: background .2s;
}
.quantidade-ctrl button:hover { background: var(--cor-suave); }

#qtd-display {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.qtd-preco { font-size: .9rem; color: #666; }

/* Entrega cards */
.entrega-opcoes { display: flex; flex-direction: column; gap: .8rem; }

.entrega-card {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    border: 2px solid var(--cor-suave);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color .2s;
}
.entrega-card input[type="radio"] { display: none; }
.entrega-card.selecionada { border-color: var(--cor-primaria); background: #fdf3ec; }
.entrega-icone { font-size: 1.5rem; }
.entrega-card strong { display: block; font-size: .95rem; color: var(--cor-primaria); margin-bottom: .2rem; }
.entrega-card span   { display: block; font-size: .82rem; color: #666; }

/* Campos do formulário */
.form-grupo {
    border: none;
    padding: 0;
    margin-bottom: 1rem;
}
.form-grupo legend {
    font-weight: 600;
    font-size: .95rem;
    color: var(--cor-primaria);
    margin-bottom: .8rem;
}

.campo { margin-bottom: .9rem; }
.campo label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: .3rem;
    color: #555;
}
.campo input,
.campo select {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: .95rem;
    font-family: var(--fonte-corpo);
    transition: border-color .2s;
}
.campo input:focus,
.campo select:focus {
    outline: none;
    border-color: var(--cor-primaria);
}

.campo-grupo {
    display: flex;
    gap: .8rem;
    margin-bottom: .9rem;
}
.campo-grupo .campo { margin-bottom: 0; flex: 1; }
.campo-num  { max-width: 100px; }
.campo-uf   { max-width: 80px; }

.campo-cep { position: relative; }
.link-cep {
    font-size: .78rem;
    color: var(--cor-acento);
    display: inline-block;
    margin-top: .3rem;
}

/* OTP */
.otp-recuperar {
    margin-bottom: 1.2rem;
    border: 1px dashed var(--cor-suave);
    border-radius: 8px;
    padding: .8rem 1rem;
}
.otp-recuperar summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--cor-primaria);
}
.otp-form {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-top: .8rem;
    flex-wrap: wrap;
}
.otp-form input[type="email"],
.otp-form input[type="text"] {
    flex: 1;
    min-width: 160px;
    padding: .6rem .9rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: .9rem;
}
.otp-input {
    letter-spacing: .4rem;
    font-size: 1.3rem;
    text-align: center;
    max-width: 160px;
}
.link-reenviar { font-size: .83rem; color: var(--cor-acento); margin-top: .5rem; display: block; }

.otp-verificar {
    background: #fffde7;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.2rem;
}

/* Alertas */
.alerta {
    border-radius: 8px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.alerta-ok   { background: #e6f4ea; color: #2d6a3f; border: 1px solid #a5d6a7; }
.alerta-erro { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }

.link-limpar {
    margin-left: .5rem;
    font-size: .82rem;
    color: var(--cor-acento);
}

/* Submit */
.form-submit { text-align: center; padding-top: .5rem; }
.form-submit small { display: block; color: #888; font-size: .8rem; margin-top: .5rem; }
.btn-comprar { font-size: 1.05rem; padding: 1rem 2.5rem; }

.btn-secundario {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--cor-primaria);
    color: var(--cor-primaria);
    padding: .6rem 1.2rem;
    border-radius: 50px;
    font-size: .9rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.btn-secundario:hover { background: var(--cor-primaria); color: #fff; }

/* Esgotado */
.esgotado-box {
    text-align: center;
    padding: 3rem 2rem;
}
.esgotado-box h2 { font-family: var(--fonte-titulo); color: var(--cor-primaria); margin-bottom: .8rem; }
.esgotado-box p  { margin-bottom: .5rem; color: #666; }
.esgotado-box .btn-principal { margin-top: 1.2rem; }

/* Voltar */
.comprar-voltar {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .9rem;
}
.comprar-voltar a { color: var(--cor-acento); }

/* ── Responsivo comprar ── */
@media (max-width: 768px) {
    .comprar-wrap {
        flex-direction: column;
    }
    .comprar-lateral {
        width: 100%;
        position: static;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .comprar-capa  { width: 120px; flex-shrink: 0; }
    .comprar-resumo { flex: 1; margin-top: 0; }
    .comprar-livro-info { flex: 1; }
}

@media (max-width: 480px) {
    .comprar-lateral { flex-direction: column; }
    .comprar-capa    { width: 100%; max-width: 200px; margin: 0 auto; }
    .formato-cards   { flex-direction: column; }
    .campo-grupo     { flex-direction: column; }
    .campo-num, .campo-uf { max-width: 100%; }
    .otp-form        { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   AUTENTICAÇÃO
   ============================================================ */

.auth-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.2rem;
}

.auth-box {
    background: #fff;
    border: 1px solid var(--cor-suave);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

.auth-box-lg { max-width: 560px; }

.auth-header { text-align: center; margin-bottom: 1.8rem; }
.auth-header h1 {
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    color: var(--cor-primaria);
    margin-bottom: .4rem;
}
.auth-header p { color: #888; font-size: .9rem; }

.auth-esqueci {
    text-align: right;
    margin: -.3rem 0 1rem;
    font-size: .83rem;
}
.auth-esqueci a { color: var(--cor-acento); }

.btn-auth {
    width: 100%;
    text-align: center;
    margin-top: .5rem;
    padding: .9rem;
}

.auth-rodape {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .88rem;
    color: #888;
}
.auth-rodape a { color: var(--cor-acento); font-weight: 500; }

/* Campo senha com botão de ver */
.campo-senha {
    position: relative;
    display: flex;
    align-items: center;
}
.campo-senha input { padding-right: 2.8rem; flex: 1; }
.btn-ver-senha {
    position: absolute;
    right: .6rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: .2rem;
    color: #888;
}

/* Força da senha */
.forca-senha {
    font-size: .8rem;
    margin-top: .4rem;
    min-height: 1.2rem;
}

/* ── Biblioteca ── */
.biblioteca-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.2rem;
}

.biblioteca-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--cor-suave);
}

.biblioteca-header h1 {
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-bottom: .3rem;
}

.biblioteca-acoes { display: flex; gap: .8rem; align-items: center; }

.btn-logout {
    color: #b71c1c;
    font-size: .88rem;
    text-decoration: none;
    padding: .4rem .8rem;
    border: 1px solid #ef9a9a;
    border-radius: 50px;
    transition: background .2s;
}
.btn-logout:hover { background: #fdecea; }

/* Biblioteca vazia */
.biblioteca-vazia {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--cor-suave);
    border-radius: 16px;
}
.vazia-icone   { font-size: 3rem; margin-bottom: 1rem; }
.biblioteca-vazia h2 { font-family: var(--fonte-titulo); color: var(--cor-primaria); margin-bottom: .6rem; }
.biblioteca-vazia p  { color: #666; margin-bottom: 1.5rem; }

/* Grid de livros */
.livros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.livro-card {
    background: #fff;
    border: 1px solid var(--cor-suave);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.livro-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); }
.livro-card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}
.livro-card-info { padding: 1rem; }
.livro-card-info h3 {
    font-family: var(--fonte-titulo);
    font-size: 1rem;
    color: var(--cor-primaria);
    margin-bottom: .3rem;
}
.livro-card-info p    { font-size: .85rem; color: #888; margin-bottom: .3rem; }
.livro-card-info small { display: block; font-size: .78rem; color: #aaa; margin-bottom: .8rem; }
.btn-ler { display: block; text-align: center; font-size: .9rem; padding: .6rem; }

/* Responsivo auth */
@media (max-width: 480px) {
    .auth-box { padding: 1.8rem 1.2rem; }
    .auth-header h1 { font-size: 1.35rem; }
    .biblioteca-header { flex-direction: column; }
    .livros-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ============================================================
   PÁGINAS DE RETORNO DO PAGAMENTO
   ============================================================ */

.pagamento-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.2rem;
}

.pagamento-box {
    background: #fff;
    border-radius: 16px;
    padding: 3rem 2rem;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    border-top: 5px solid var(--cor-primaria);
}

.pagamento-sucesso { border-top-color: #43a047; }
.pagamento-pendente { border-top-color: #fb8c00; }
.pagamento-falhou   { border-top-color: #e53935; }

.pagamento-icone {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.pagamento-box h1 {
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-bottom: .8rem;
}

.pagamento-box p {
    color: #555;
    margin-bottom: .6rem;
    line-height: 1.6;
}

.pagamento-detalhe {
    background: var(--cor-suave);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.2rem 0;
    text-align: left;
}

.pagamento-aviso {
    background: #e8f5e9;
    border-radius: 8px;
    padding: 1.2rem;
    margin-top: 1.5rem;
}

.pagamento-falhou .pagamento-aviso {
    background: #fdecea;
}

.pagamento-acoes {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

@media (max-width: 480px) {
    .pagamento-box { padding: 2rem 1.2rem; }
    .pagamento-box h1 { font-size: 1.4rem; }
    .pagamento-acoes { flex-direction: column; }
    .pagamento-acoes .btn-principal,
    .pagamento-acoes .btn-secundario { width: 100%; text-align: center; }
}