/*
 * E-BOOKS E LIVROS INFANTIS, PÁGINA DE VENDA (2026-10-12). Escopo: body.loja-produto-livros (loja/livros.html).
 *
 * Vem DEPOIS de css/spi-venda.css, que traz o topo escuro e dourado, as linhas de produto (.spi-dif),
 * a lista com visto (.spi-pontos), os passos, a faixa de números e o fecho. Aqui só entra o que é desta
 * página: as capas creme dos dois guias (desenhadas em CSS, para ficarem nítidas), a arte do kit, os
 * painéis de papel creme (o toque acolhedor, para famílias) e o bloco de compra de cada produto.
 *
 * Cor nova nenhuma além do creme das capas, que é o das capas reais: o resto vem dos tokens --sv-*.
 */
.loja-produto-livros {
  --lv-creme: #f0e8d8;
  --lv-creme-2: #e9dfca;
  --lv-ouro-capa: #a8955e;
  --lv-ouro-capa-2: #bba97a;
  --lv-tinta: #2b2418;
  --lv-tinta-2: #5b5140;
  --lv-serif: "Lora", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------ as capas (só CSS) */
/*
 * Capa tipográfica creme, moldura dourada fina e cantoneiras, como nas capas reais dos dois guias.
 * Tudo em cqw (largura da própria capa), então o tamanho do texto acompanha a capa em qualquer lugar:
 * no leque do topo, na linha de cada guia e no combo.
 */
.lv-capa {
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 660 / 940;
  margin: 0;
  background: var(--lv-creme);
  color: var(--lv-tinta);
  font-family: var(--lv-serif);
  border-radius: .25rem;
  box-shadow: 0 22px 46px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(168, 149, 94, .35);
}
/* o miolo é filho do container, por isso o padding dele pode usar cqw (o do próprio container, não) */
.lv-capa-in {
  position: absolute; inset: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 31cqw 9cqw 13cqw;
}
.lv-capa::before, .lv-capa::after { content: ""; position: absolute; pointer-events: none; }
.lv-capa::before { inset: 5.2cqw; border: .45cqw solid var(--lv-ouro-capa); }
.lv-capa::after { inset: 7.1cqw; border: .25cqw solid var(--lv-ouro-capa-2); }
.lv-capa > i {
  position: absolute; width: 6.7cqw; height: 6.7cqw; pointer-events: none;
  border: 0 solid var(--lv-ouro-capa);
}
.lv-capa > i:nth-of-type(1) { top: 3cqw; left: 3cqw; border-top-width: .45cqw; border-left-width: .45cqw; }
.lv-capa > i:nth-of-type(2) { top: 3cqw; right: 3cqw; border-top-width: .45cqw; border-right-width: .45cqw; }
.lv-capa > i:nth-of-type(3) { bottom: 3cqw; left: 3cqw; border-bottom-width: .45cqw; border-left-width: .45cqw; }
.lv-capa > i:nth-of-type(4) { bottom: 3cqw; right: 3cqw; border-bottom-width: .45cqw; border-right-width: .45cqw; }
.lv-capa-sobre { margin: 0; color: var(--lv-ouro-capa); font-size: 2.5cqw; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.lv-capa-fio { display: block; width: 23cqw; height: .3cqw; margin: 4.4cqw auto; background: var(--lv-ouro-capa); }
.lv-capa-titulo { margin: 0; color: var(--lv-tinta); font-family: var(--lv-serif); font-size: 7.4cqw; font-weight: 500; line-height: 1.26; letter-spacing: 0; }
.lv-capa-sub { margin: 3.4cqw 0 0; color: var(--lv-tinta-2); font-size: 3cqw; font-style: italic; line-height: 1.55; }
.lv-capa-passos { margin: 0; color: var(--lv-ouro-capa); font-size: 2cqw; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.lv-capa-autor { margin: auto 0 0; color: var(--lv-tinta); font-size: 3.5cqw; }
.lv-capa-area { margin: 1.8cqw 0 0; color: var(--lv-ouro-capa); font-size: 1.9cqw; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.lv-capa-arroba { margin: 3.2cqw 0 0; color: var(--lv-ouro-capa-2); font-size: 1.7cqw; letter-spacing: .18em; }

/* ------------------------------------------------------------------------ topo: o leque */
.lv-hero-vis { display: flex; flex-direction: column; align-items: center; }
.lv-leque {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 480px; padding: .6rem 0 .4rem;
}
.lv-leque > .lv-capa { flex: 0 0 40%; width: 40%; }
.lv-leque > .lv-capa:first-child { transform: rotate(-5deg); }
.lv-leque > .lv-capa:last-child { transform: rotate(5deg); }
.lv-leque-kit {
  position: relative; z-index: 2; flex: 0 0 44%; width: 44%; margin: 0 -12%;
  border: 2px solid var(--sv-borda); border-radius: 1rem; overflow: hidden;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .85), 0 0 50px -10px rgba(241, 207, 107, .35);
}
.lv-leque-kit img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.lv-hero-vis .spi-nota { max-width: 26rem; }

/* o autor, em miniatura, logo abaixo do texto de abertura */
.lv-assina { display: flex; align-items: center; gap: .85rem; margin: 1.25rem 0 0; }
.lv-assina img {
  flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--sv-borda); box-shadow: 0 0 0 4px rgba(241, 207, 107, .12);
}
.lv-assina p { margin: 0; color: rgba(252, 244, 232, .86); font-size: .92rem; line-height: 1.4; }
.lv-assina strong { display: block; color: #fff; font-size: 1rem; }

/* ------------------------------------------------------------------ produtos */
.lv-produto { scroll-margin-top: 1rem; }
.lv-produto .spi-dif { padding-bottom: clamp(1.4rem, 4vw, 2.2rem); }
.lv-produto .spi-dif-vis { display: flex; justify-content: center; }
.lv-produto .spi-dif-vis .lv-capa { width: min(72vw, 300px); }
.spi-dif > .lv-pts { grid-area: pts; min-width: 0; }
.lv-sub { margin: 0 0 .8rem; color: var(--sv-claro); font-size: 1.02rem; font-weight: 800; letter-spacing: .02em; line-height: 1.35; }
.lv-arte {
  width: min(88vw, 440px); margin: 0;
  border: 2px solid var(--sv-borda); border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 28px 56px -16px rgba(0, 0, 0, .9), 0 0 60px -12px rgba(241, 207, 107, .3);
}
.lv-arte img { display: block; width: 100%; height: auto; }
.lv-passos-capa { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.lv-passos-capa li {
  padding: .4rem .85rem; border: 1px solid rgba(241, 207, 107, .45); border-radius: 999px;
  color: var(--sv-claro); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* o bloco de compra de cada produto */
.lv-compra {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem;
  margin-top: 1.5rem; padding: 1rem 1.15rem;
  background: var(--sv-painel); border: 1px solid rgba(241, 207, 107, .35); border-radius: 1.1rem;
}
.lv-compra-preco { display: grid; gap: .1rem; }
.lv-compra-preco span { color: var(--sv-mudo); font-size: .8rem; line-height: 1.3; }
.lv-compra-preco strong { color: #fff; font-size: clamp(1.7rem, 6vw, 2.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.lv-compra .btn-cta-primary { flex: 1 1 11rem; text-align: center; }
.lv-compra-nota { flex-basis: 100%; margin: 0; color: var(--sv-mudo); font-size: .82rem; line-height: 1.45; }

/* ------------------------------------------------------- o que vem depois (extras do produto) */
.lv-extra { display: grid; gap: 1.1rem; margin-top: .4rem; }
.lv-citacao {
  margin: 0; padding: 1.2rem 1.3rem 1.2rem 1.5rem;
  border-left: 3px solid var(--sv-borda); background: rgba(241, 207, 107, .06); border-radius: 0 1rem 1rem 0;
}
.lv-citacao p {
  margin: 0; color: #fff; font-family: var(--lv-serif); font-size: clamp(1.25rem, 4.6vw, 1.7rem);
  font-style: italic; line-height: 1.4;
}
.lv-citacao p + p { margin-top: .7rem; color: rgba(252, 244, 232, .86); font-size: clamp(1rem, 3.5vw, 1.15rem); }
.lv-porque { margin: 0; color: rgba(252, 244, 232, .86); font-size: 1.02rem; line-height: 1.6; max-width: 46rem; }
.lv-porque strong { color: #fff; }
.lv-extra .spi-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.lv-extra .spi-passos li { padding: 1rem; }
@media (min-width: 760px) { .lv-extra .spi-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* painéis de papel creme: o lado acolhedor da página */
.lv-duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.lv-papel {
  position: relative; padding: 1.3rem 1.35rem 1.4rem;
  background: var(--lv-creme); color: var(--lv-tinta); border-radius: 1rem;
  box-shadow: inset 0 0 0 1px rgba(168, 149, 94, .55), inset 0 0 0 5px var(--lv-creme), inset 0 0 0 6px rgba(168, 149, 94, .4);
}
.lv-papel h4 {
  margin: 0 0 .8rem; color: var(--lv-tinta); font-family: var(--lv-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.25;
}
.lv-papel ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.lv-papel li { position: relative; padding-left: 1.2rem; color: var(--lv-tinta-2); font-size: .98rem; line-height: 1.55; }
.lv-papel li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: 1px; background: var(--lv-ouro-capa); box-shadow: 0 0 0 .5px var(--lv-ouro-capa); }
.lv-papel p { margin: .9rem 0 0; color: var(--lv-tinta); font-family: var(--lv-serif); font-size: 1.02rem; font-style: italic; line-height: 1.5; }
.lv-papel-nao li::before { height: 1px; }
.lv-aviso { margin: 0; color: var(--sv-mudo); font-size: .86rem; line-height: 1.5; }

/* os seis temas do kit */
.lv-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.lv-temas li {
  padding: .75rem .9rem; background: var(--lv-creme); color: var(--lv-tinta); border-radius: .8rem;
  font-family: var(--lv-serif); font-size: 1rem; line-height: 1.3; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(168, 149, 94, .6);
}

/* ------------------------------------------------------------------------------- combo */
.lv-combo {
  position: relative; overflow: hidden;
  display: grid; gap: 1.8rem; align-items: center;
  padding: clamp(1.4rem, 5vw, 3rem);
  border: 2px solid var(--sv-borda); border-radius: 1.6rem;
  background:
    radial-gradient(70% 70% at 90% 0%, rgba(241, 207, 107, .2), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(240, 232, 216, .08), transparent 65%),
    linear-gradient(165deg, #1d1b16 0%, #0d0c0a 100%);
  box-shadow: 0 0 0 1px rgba(241, 207, 107, .22), 0 30px 70px rgba(0, 0, 0, .6);
}
.lv-combo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ouro-grad); }
.lv-combo-vis { display: flex; align-items: center; justify-content: center; min-width: 0; }
.lv-combo-vis .lv-capa { flex: 0 0 38%; width: 38%; transform: rotate(-4deg); z-index: 1; }
.lv-combo-vis .lv-arte { flex: 0 0 62%; width: 62%; margin-left: -8%; transform: rotate(2.5deg); z-index: 2; border-radius: .9rem; }
.lv-combo-tx { min-width: 0; }
.lv-combo-tx h2 { margin: .45rem 0 .8rem; color: #fff; font-size: clamp(1.8rem, 6.4vw, 2.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.022em; }
.lv-combo-tx > p:not(.loja-rx-kicker) { margin: 0 0 .8rem; color: rgba(252, 244, 232, .86); font-size: clamp(1rem, 3.5vw, 1.12rem); line-height: 1.6; }
.lv-combo-tx strong { color: #fff; }
.lv-conta { display: grid; gap: .55rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.lv-conta li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem .9rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--sv-fio); border-radius: .8rem;
  color: rgba(252, 244, 232, .86); font-size: .95rem;
}
.lv-conta li b { color: #fff; font-weight: 700; white-space: nowrap; }
.lv-combo-preco { display: grid; gap: .15rem; margin: 1.3rem 0 0; }
.lv-combo-preco > span { color: var(--sv-mudo); font-size: .86rem; }
.lv-combo-preco strong { color: var(--sv-claro); font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.lv-combo-preco em { color: rgba(252, 244, 232, .86); font-size: 1rem; font-style: normal; }
.lv-combo-tx .btn-cta-primary { margin-top: 1.2rem; display: block; text-align: center; }
.lv-combo-nota { margin: .8rem 0 0 !important; color: var(--sv-mudo) !important; font-size: .86rem !important; text-align: center; }

/* ----------------------------------------------------------------------------- garantia */
.lv-garantia {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: center; text-align: center;
  padding: clamp(1.5rem, 5vw, 2.4rem) 1.4rem; background: var(--lv-creme); color: var(--lv-tinta); border-radius: 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(168, 149, 94, .6), inset 0 0 0 7px var(--lv-creme), inset 0 0 0 8px rgba(168, 149, 94, .45);
}
.lv-garantia svg { width: 3.4rem; height: 3.4rem; color: var(--lv-tinta); }
.spi-venda .lv-garantia h2 { max-width: none; margin: 0; color: var(--lv-tinta); font-family: var(--lv-serif); font-size: clamp(1.5rem, 5.4vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.spi-venda .lv-garantia h2 b { font-weight: 700; }
.lv-garantia p { margin: 0; max-width: 34rem; color: var(--lv-tinta-2); font-family: var(--lv-serif); font-size: 1.12rem; font-style: italic; line-height: 1.5; }
.lv-garantia p strong { color: var(--lv-tinta); }
.lv-garantia .lv-garantia-seguro { font-size: .98rem; font-style: normal; font-family: inherit; }

/* ------------------------------------------------------------------------ quem escreveu */
.lv-autor { display: grid; gap: 1.6rem; align-items: center; margin-top: 1.4rem; }
.lv-autor-foto {
  width: min(70vw, 280px); margin: 0 auto;
  border: 2px solid var(--sv-borda); border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 26px 50px -16px rgba(0, 0, 0, .9), 0 0 50px -12px rgba(241, 207, 107, .25);
}
.lv-autor-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.lv-autor-tx { min-width: 0; }
.lv-autor-tx p { margin: 0 0 .9rem; max-width: 40rem; color: rgba(252, 244, 232, .88); font-family: var(--lv-serif); font-size: clamp(1.02rem, 3.6vw, 1.15rem); font-style: italic; line-height: 1.75; }
.lv-autor-tx p strong { color: #fff; font-style: normal; }
.lv-autor-tx .lv-autor-reg { color: var(--sv-mudo); font-family: inherit; font-size: .86rem; font-style: normal; letter-spacing: .04em; }

/* ------------------------------------------------------------------------ tablet e PC */
@media (min-width: 620px) {
  .lv-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .loja-produto-livros .spi-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lv-hero-vis .lv-leque { max-width: 540px; }
  .lv-combo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .lv-produto .spi-dif-vis .lv-capa { width: 320px; }
  .lv-autor { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
  .lv-autor-foto { margin: 0; width: 100%; }
  .lv-garantia { grid-template-columns: auto minmax(0, 1fr); text-align: left; justify-items: start; align-items: center; gap: 1.6rem; padding-inline: 2.4rem; }
  .lv-garantia svg { width: 4.4rem; height: 4.4rem; }
}
@media (max-width: 380px) {
  .lv-leque > .lv-capa { flex-basis: 38%; width: 38%; }
  .lv-compra { padding: .9rem; }
  .lv-temas li { font-size: .92rem; padding: .65rem .6rem; }
}

/* painel sozinho ocupa a largura toda; o fim de cada produto respira antes da linha do próximo */
.lv-duas > .lv-papel:only-child { grid-column: 1 / -1; }
.lv-produto .lv-extra { padding-bottom: clamp(1.6rem, 5vw, 2.6rem); }