/* Saldo Claro · estilo do projeto (sobre o tema DevBook, 3rd Wave Media)
   Fontes: Archivo = títulos · Instrument Sans = texto e botões · IBM Plex Mono = só etiquetas curtas */

/* ===== Tokens ===== */
:root {
  --red: #b52218; --red-dark: #8f1a12; --ink: #231f1c; --text: #4a4540; --muted: #6f6861;
  --soft: #f5efe6; --paper: #fbf8f3; --line: #e4dccf;
  --camada-1: #b52218; --camada-2: #3a3431; --camada-3: #2f3b30;
}

/* ===== Base: sem zoom por toque duplo, sem rolagem animada, sem salto da barra de rolagem ===== */
:root { scroll-behavior: auto !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; scrollbar-gutter: stable; }
body { background: var(--paper); color: var(--text); font-family: 'Instrument Sans', sans-serif; }

/* ===== Tipografia ===== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 90%; letter-spacing: -.01em; color: var(--ink); }
.section-heading { font-size: clamp(1.625rem, 4.2vw, 2.375rem); line-height: 1.08; }
.section-intro { color: var(--muted); }
.brand-kicker { font-family: 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.microcopy { font-size: .8125rem; color: var(--muted); }

/* ===== Ícones (sprite SVG no topo do index.html) ===== */
.ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex-shrink: 0; }

/* ===== Botões ===== */
.btn { font-family: 'Instrument Sans', sans-serif; font-weight: 700; letter-spacing: .01em; transition: background-color .15s, color .15s, border-color .15s; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--red-dark); }
.btn:focus-visible, .quiz-opt:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ===== Faixa de topo e cabeçalho ===== */
.topbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .875rem; background: var(--red); color: #fff; font-size: .875rem; text-align: center; padding: .5rem 1rem; }
.topbar-relogio { display: inline-flex; align-items: center; gap: .5rem; }
/* Números de largura fixa: o relógio muda a cada segundo sem mexer o resto da faixa */
.relogio { display: inline-block; min-width: 10.5ch; padding: .125rem .5rem; border-radius: .375rem; background: rgba(0,0,0,.22); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.header .logo-full { height: 36px; width: auto; display: block; }

/* ===== Primeira dobra: livro à esquerda, texto à direita (também no celular) ===== */
.hero-section { background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: 18px 16px; align-items: center; padding-top: 20px; padding-bottom: 36px; }
.hero-book { display: flex; flex-direction: column; align-items: center; }
.hero-copy { min-width: 0; }
.hero-copy .brand-kicker { margin: 0 0 .5rem; font-size: .6875rem; }
.hero-section .headline { font-size: clamp(1.625rem, 7vw, 3.5rem); line-height: .98; font-stretch: 86%; letter-spacing: -.015em; margin: 0 0 .625rem; }
.hero-section .headline .hl { color: var(--red); }
.hero-section .subheadline { font-size: clamp(.9375rem, 2.4vw, 1.125rem); line-height: 1.45; color: var(--text); margin: 0 0 1rem; }
.hero-ctas { display: flex; flex-direction: column; gap: 10px; }
.hero-ctas .btn { min-height: 46px; padding: .625rem 1rem; font-size: .9375rem; display: inline-flex; align-items: center; justify-content: center; }
.hero-copy .microcopy { margin: .625rem 0 0; font-size: .75rem; }
/* Fatos: ícone | descrição | valor. Os valores formam uma coluna reta (subgrid) */
.hero-facts { grid-column: 1 / -1; margin: 0; padding: 1rem 1.125rem; display: grid; grid-template-columns: auto 1fr auto; column-gap: .625rem; row-gap: 0; align-items: baseline; font-size: .9375rem; border-left: 4px solid var(--red); background: var(--soft); }
.hero-facts li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: .625rem 0; }
.hero-facts li + li { border-top: 1px solid var(--line); }
.hero-facts .ico { color: var(--red); align-self: start; margin-top: .2em; }
.hero-facts .fact-no .ico { color: var(--ink); }
.hero-facts .fact-label { color: var(--text); line-height: 1.35; }
.hero-facts .fact-value { font-weight: 700; color: var(--ink); white-space: nowrap; text-align: left; font-variant-numeric: tabular-nums; }

/* ===== Livro 3D (as faces são vetor: ver livro.css). O tamanho acompanha a moldura ===== */
.book-frame { container-type: inline-size; width: 100%; max-width: 340px; aspect-ratio: 3 / 4; padding: clamp(6px, 3.5cqi, 12px); border-radius: clamp(12px, 5cqi, 18px); background: #2a1816; box-shadow: 0 0 0 1px #a68b4b, 0 14px 32px rgba(0,0,0,.24); }
.book-frame__glass { width: 100%; height: 100%; overflow: hidden; border-radius: clamp(7px, 3cqi, 10px); background: linear-gradient(180deg, #f7f3ec 0%, #ece5d9 70%, #e2d9cb 100%); }
.book-showcase { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 2.55cqi; user-select: none; -webkit-user-select: none; cursor: grab; touch-action: pan-y; }
.book-showcase.dragging { cursor: grabbing; }
.book-showcase:focus-visible { outline: 3px solid var(--red); outline-offset: -4px; border-radius: 8px; }
.book-wrap { perspective: 90em; position: relative; z-index: 1; margin-top: -3em; }
.book { --w: 27.0625em; --h: 40.5em; --t: 3.72em; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(4deg) rotateY(28deg); }
.book .face { position: absolute; top: 0; left: 50%; height: var(--h); backface-visibility: hidden; }
.book .front, .book .back, .book .side { container-type: size; overflow: hidden; }
.book .front, .book .back { width: var(--w); margin-left: calc(var(--w) / -2); }
.book .front { transform: translateZ(calc(var(--t) / 2)); border-radius: 0 .2em .2em 0; }
.book .front::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset .3em 0 .45em -.2em rgba(0,0,0,.35); }
.book .back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); border-radius: .2em 0 0 .2em; }
.book .side, .book .pages { width: var(--t); margin-left: calc(var(--t) / -2); }
.book .side { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.book .pages { background: repeating-linear-gradient(90deg, #efe9de 0 .08em, #fbf8f2 .08em .22em); box-shadow: inset 0 0 .45em rgba(0,0,0,.18); transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - .15em)); }
.book .top, .book .bottom { width: var(--w); height: var(--t); margin-left: calc(var(--w) / -2); background: repeating-linear-gradient(0deg, #efe9de 0 .08em, #fbf8f2 .08em .22em); }
.book .top { top: calc(var(--t) / -2); transform: rotateX(90deg) translateZ(calc(var(--t) / 2)); }
.book .bottom { top: calc(var(--h) - var(--t) / 2); transform: rotateX(-90deg) translateZ(calc(var(--t) / 2)); }
.book-shadow { position: absolute; left: 50%; bottom: 7%; width: 30em; height: 4.5em; margin-left: -15em; border-radius: 50%; background: radial-gradient(closest-side, rgba(42,24,22,.38), rgba(42,24,22,0)); transform: scaleX(var(--sx, .85)); pointer-events: none; }
.book-hint { font: 500 .625rem 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ===== Quiz em tela cheia antes da página ===== */
.quiz-gate { position: fixed; inset: 0; z-index: 1050; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--soft); }
.quiz-gate[hidden] { display: none; }
body.gate-open { overflow: hidden; }
.gate-top { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: #fff; border-bottom: 3px solid var(--red); }
.gate-top .gate-brand { height: 32px; width: auto; display: block; }
.gate-skip { background: none; border: 0; color: var(--muted); font-weight: 600; padding: .5rem .25rem; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.gate-skip:hover { color: var(--ink); }
.gate-skip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.gate-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 2rem; padding-bottom: 1.5rem; }
.gate-title { font-size: clamp(1.625rem, 6vw, 2rem); }
.gate-title span { color: var(--red); }
.gate-sub { color: var(--muted); font-size: 1.0625rem; }
.gate-foot { font-size: .75rem; color: var(--muted); padding: 0 1rem 1rem; margin: 0; }
.quiz-card { width: 100%; max-width: 560px; background: #fff; border-radius: 1rem; box-shadow: 0 20px 50px -25px rgba(0,0,0,.25); }
.quiz-progress { display: flex; gap: 6px; }
.quiz-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.quiz-progress span.on { background: var(--red); }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-q { font-size: 1.375rem; margin-bottom: 1.25rem; }
.quiz-hint { font-size: .875rem; color: var(--muted); margin-top: -.75rem; margin-bottom: 1rem; }
.quiz-opt { display: block; width: 100%; min-height: 56px; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: .75rem; padding: .875rem 1.25rem; margin-bottom: .75rem; font-weight: 600; color: var(--ink); transition: border-color .15s, background-color .15s; }
.quiz-opt:hover { border-color: var(--red); }
.quiz-opt:active { background: #f6e3df; }
.quiz-back { background: none; border: 0; color: var(--muted); font-size: .875rem; padding: .5rem 0; min-height: 44px; }
.quiz-back:hover { color: var(--ink); text-decoration: underline; }
.result-title { font-size: 1.5rem; }
.result-lead { font-weight: 700; color: var(--red); font-size: 1.125rem; }
.result-list { padding-left: 1.1rem; }
.result-list li { margin-bottom: .4rem; }
.result-extra { font-size: .9375rem; background: var(--soft); border-radius: .5rem; padding: .75rem 1rem; }
.result-help { font-size: .875rem; color: var(--muted); }
.link-lead { color: var(--ink); font-weight: 600; }

/* ===== O que você recebe / Para quem é ===== */
.benefits-section .item-icon, .audience-section .item-icon { color: var(--red); }
.benefits-section .item-icon .ico { width: 2.5rem; height: 2.5rem; }

/* ===== O que tem dentro: uma camada por cartão ===== */
/* Celular: os 3 cartões lado a lado, deslizando para o lado (o próximo aparece na borda) */
.toc { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; max-width: 1000px; margin: 0 calc(var(--bs-gutter-x, 1.5rem) * -.5); padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); overscroll-behavior-x: contain; scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc-card { scroll-snap-align: start; }
.toc-hint { margin: .75rem 0 0; text-align: center; font-size: .8125rem; color: var(--muted); }
.toc-card { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--camada-1); border-radius: .75rem; padding: 1.25rem 1.25rem 1rem; }
.toc-2 { border-top-color: var(--camada-2); }
.toc-3 { border-top-color: var(--camada-3); }
.toc-label { margin: 0 0 .25rem; font: 700 .75rem 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--camada-1); }
.toc-2 .toc-label { color: var(--camada-2); }
.toc-3 .toc-label { color: var(--camada-3); }
.toc-title { font-size: 1.25rem; margin: 0 0 .125rem; }
.toc-when { margin: 0 0 .875rem; font-size: .875rem; color: var(--muted); }
.toc-list { margin: 0; padding: .75rem 0 0 1.75rem; border-top: 1px solid var(--line); }
.toc-list li { margin-bottom: .5rem; padding-left: .25rem; }
.toc-list li::marker { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.toc-extra { max-width: 760px; margin: 1.25rem auto 1.75rem; text-align: center; font-size: .9375rem; color: var(--muted); }
@media (min-width: 768px) {
  .toc { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0 auto; padding: 0; overflow: visible; }
  .toc-hint { display: none; }
}

/* ===== Preço ===== */
.offer-card { max-width: 480px; border: 3px solid var(--red); border-radius: 1rem; background: #fff; }
.offer-price { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 90%; color: var(--ink); line-height: 1; }
.offer-price .cur { font-size: 1.5rem; vertical-align: top; }
.offer-price .val { font-size: 4rem; }
.offer-price .cents { font-size: 1.75rem; vertical-align: top; }
.offer-badge { display: inline-block; margin: 0 0 .75rem; padding: .3rem .75rem; border-radius: 2rem; background: var(--red); color: #fff; font: 700 .8125rem 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.offer-was { margin: 0 0 .25rem; color: var(--muted); font-size: .9375rem; }
.offer-was s { text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.offer-save { display: inline-block; margin: .25rem 0 1rem; padding: .25rem .625rem; border-radius: .375rem; background: #e7f2e8; color: #1f5f2a; font-weight: 700; font-size: .9375rem; }
.offer-list { max-width: 340px; }
.offer-list li, .isnot li { display: flex; align-items: flex-start; gap: .125rem; margin-bottom: .5rem; }
.offer-list .ico, .isnot .ico { margin-top: .25em; }
.offer-list .ico { color: var(--red); }

/* ===== O kit é / não é ===== */
.isnot .col-box { border-radius: .75rem; height: 100%; }
.isnot .is { background: #fff; border: 2px solid var(--line); }
.isnot .is .ico { color: var(--red); }
.isnot .not { background: var(--ink); color: #eaeaea; }
.isnot .not h3 { color: #fff; }

/* ===== Perguntas frequentes (details nativo, sem JavaScript) ===== */
.faq-list { display: grid; gap: .5rem; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: .75rem; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: .875rem 1.125rem; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 700 1.25rem 'Archivo', sans-serif; color: var(--red); }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { color: var(--red); }
.faq-item p { margin: 0; padding: 0 1.125rem 1rem; }

/* ===== Rodapé ===== */
.footer { background: var(--ink); color: #bdb5ac; }
.footer .disclaimer { font-size: .875rem; max-width: 760px; }
.footer a.theme-link { color: #fff; }

/* ===== Telas maiores ===== */
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 56px; padding-top: 56px; padding-bottom: 72px; }
  .hero-book { grid-row: span 2; }
  .hero-copy { align-self: end; }
  .hero-facts { grid-column: 2; align-self: start; padding: 1.25rem 1.5rem; column-gap: 1rem; font-size: 1rem; }
  .hero-copy .brand-kicker { font-size: .75rem; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .hero-ctas .btn { padding: .75rem 1.75rem; font-size: 1rem; }
  .book-hint { font-size: .6875rem; }
}
@media (max-width: 575.98px) {
  .gate-body { justify-content: flex-start; padding-top: 1.25rem; }
  .quiz-card { border-radius: .75rem; }
  .offer-price .val { font-size: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .quiz-opt { transition: none; }
}