/* Bíblia em Shorts store page: the series look (series/STANDARD.md) on the web. */
:root {
  --chao: #F3F7FF; --card: #FFFFFF; --lav: #E6EAFB; --tinta: #17171B; --texto: #45454A; --sombra: #D5DAE8;
  --roxo: #9782D7; --roxo-l: #CFC4F2; --coral: #F2645D; --amarelo: #FFD34D; --amarelo-l: #FFEAA8;
  --mao: "Caveat", "Ink Free", "Segoe Print", cursive;
  --corpo: "Nunito", "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--chao); color: var(--texto); font: 17px/1.6 var(--corpo); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--roxo); outline-offset: 3px; }
h1, h2 { color: var(--tinta); font-weight: 900; line-height: 1.1; margin: 0 0 .6em; }
h2 { font-size: 1.75rem; }
main { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
section { margin: 0 0 72px; }

.top { max-width: 1040px; margin: 0 auto; padding: 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.marca img { border-radius: 50%; border: 2px solid var(--tinta); }

/* hero: the cover as a sticker over a starburst is the one loud thing on the page */
.hero { display: grid; gap: 32px; align-items: center; padding-top: 8px; }
h1 { font-size: clamp(2.4rem, 8vw, 4rem); }
.mao { display: block; font-family: var(--mao); font-weight: 700; color: var(--roxo); font-size: 1.5em; line-height: .9;
  text-decoration: underline var(--amarelo) .16em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.sub { font-size: 1.15rem; max-width: 34ch; margin: 0 0 24px; }
.capa { position: relative; justify-self: center; width: min(78vw, 360px); }
.capa::before { content: ""; position: absolute; inset: -14%; z-index: 0; background: var(--amarelo); border: 3px solid var(--tinta);
  clip-path: polygon(50% 0, 59% 15%, 75% 7%, 76% 24%, 93% 25%, 85% 40%, 100% 50%, 85% 60%, 93% 75%, 76% 76%, 75% 93%, 59% 85%, 50% 100%, 41% 85%, 25% 93%, 24% 76%, 7% 75%, 15% 60%, 0 50%, 15% 40%, 7% 25%, 24% 24%, 25% 7%, 41% 15%); }
.capa img { position: relative; z-index: 1; border: 3px solid var(--tinta); border-radius: 10px; box-shadow: 10px 12px 0 var(--tinta); transform: rotate(-4deg); }

.compra { background: var(--card); border: 2.5px solid var(--tinta); border-radius: 22px; box-shadow: 7px 8px 0 var(--sombra); padding: 20px; max-width: 440px; }
.preco { margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.preco strong { font-size: 2.2rem; font-weight: 900; color: var(--tinta); }
.comprar { margin: 0; }
button { font: 900 1.15rem var(--corpo); color: var(--tinta); background: var(--coral); border: 2.5px solid var(--tinta); border-radius: 999px;
  box-shadow: 4px 5px 0 var(--tinta); padding: 14px 28px; width: 100%; cursor: pointer; transition: transform .08s, box-shadow .08s; }
button:hover { background: #F57E78; }
button:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--tinta); }
button:disabled { opacity: .7; cursor: progress; }
.nota { font-size: .92rem; margin: 14px 0 0; }
.erro { color: #B3261E; font-weight: 700; margin: 10px 0 0; }

.dentro ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.dentro li { background: var(--card); border: 2px solid var(--tinta); border-radius: 18px; padding: 16px 18px; }
.dentro li:nth-child(1) { background: var(--lav); }
.dentro li:nth-child(3) { background: var(--amarelo-l); }
.dentro b { display: block; color: var(--tinta); font-weight: 800; font-size: 1.08rem; margin-bottom: 2px; }

.paginas { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; margin: 0 -16px; padding-inline: 16px; }
.paginas img { flex: 0 0 72%; max-width: 300px; scroll-snap-align: center; border: 2px solid var(--tinta); border-radius: 6px; box-shadow: 6px 7px 0 var(--sombra); background: #fff; }

.historias ol { margin: 0; padding: 0 0 0 1.6em; columns: 1; font-weight: 600; color: var(--tinta); }
.historias li { padding: 3px 0; break-inside: avoid; }
.historias li::marker { color: var(--roxo); font-weight: 900; }

.faq details { background: var(--card); border: 2px solid var(--tinta); border-radius: 16px; margin: 0 0 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 800; color: var(--tinta); padding: 14px 0; }
.faq details p { margin: 0 0 16px; }

.fim { text-align: center; background: var(--lav); border: 2.5px solid var(--tinta); border-radius: 26px; padding: 32px 20px; }
.fim img { margin: 0 auto 8px; border-radius: 50%; border: 2px solid var(--tinta); }
.fim p { font-family: var(--mao); font-size: 1.8rem; line-height: 1.2; color: var(--tinta); margin: 0 auto 18px; max-width: 22ch; }
.fim .comprar { max-width: 360px; margin: 0 auto; }
.fim .erro { font: 700 1rem var(--corpo); color: #B3261E; }

footer { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; font-size: .9rem; }
footer p { margin: 0 0 6px; }

@media (min-width: 760px) {
  .hero { grid-template-columns: 1.1fr .9fr; gap: 48px; padding-top: 32px; }
  .dentro ul { grid-template-columns: 1fr 1fr; }
  .paginas { overflow: visible; margin: 0; padding-inline: 4px; }
  .paginas img { flex: 1 1 0; min-width: 0; max-width: none; }
  .historias ol { columns: 3; column-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } }