/* PJ Minuto — site em formato de livro */

:root {
  --y: #FBC751;
  --yd: #EDB43E;
  --r: #E5342C;
  --r-text: #C22A21;
  --r-btn: #D02B23;
  --k: #1D1D1B;
  --paper: #FBF6EA;
  --paper-hi: #FFFDF7;
  --line: #D9CCB0;
  --muted: #4A463E;
  --ink-soft: #6F6553;
  --desk: #151412;
  --desk-line: #2A2824;
  --desk-text: #F3EEE3;
  --desk-muted: #A49B88;
  --flip: 1100ms;
  --open: 1400ms;
  --ease-page: cubic-bezier(.42, .08, .28, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-cond: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Source Serif 4', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--desk-text);
  font-family: var(--f-cond);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; }
a { color: var(--r-text); }
a:hover { color: #8F1C15; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #2F6FEB;
  outline-offset: 2px;
}
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
[hidden] { display: none !important; }

.site {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- barra superior ---------- */
.topbar {
  position: relative; z-index: 50; flex: 0 0 auto;
  height: 60px; display: flex; align-items: center; gap: 20px;
  padding: 0 24px; background: var(--desk); border-bottom: 1px solid var(--desk-line);
}
.brand {
  display: flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 4px; border: 0; background: none; color: var(--desk-text); cursor: pointer;
}
.b-pj { font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.b-min { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--r); }
.b-by {
  margin-left: 10px; padding-left: 10px; border-left: 1px solid #3A3731;
  font-weight: 600; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--desk-muted); white-space: nowrap;
}
.chapters { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; gap: 2px; }
.chap {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font-weight: 600; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #CFC7B6; transition: color .2s;
}
.chap-n { font-family: var(--f-display); font-weight: 500; font-size: 11px; letter-spacing: .04em; color: var(--y); }
.chap::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
  background: var(--r); transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-out);
}
.chap:hover { color: #fff; }
.chap:hover::after { transform: scaleX(.35); }
.chap.on { color: #fff; }
.chap.on::after { transform: scaleX(1); }
.cta-top {
  flex: 0 0 auto; height: 44px; padding: 0 18px; border: 0; border-radius: 2px; cursor: pointer;
  white-space: nowrap; background: var(--y); color: var(--k);
  font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.cta-top:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--r); }
.cta-top:active { transform: scale(.97); box-shadow: none; }
.toc-btn {
  display: none; margin-left: auto; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 1.5px solid #3A3731; border-radius: 2px; background: transparent; color: var(--desk-text);
  cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 1420px) { .b-by { display: none; } }
@media (max-width: 1300px) { .chapters .chap-n { display: none; } .chap { padding: 0 9px; } }
@media (max-width: 1120px) { .cta-top { display: none; } }
.is-narrow .chapters, .is-narrow .cta-top, .is-narrow .b-by { display: none; }
.is-narrow .toc-btn { display: flex; }
.is-narrow .topbar { padding: 0 14px; }

.toc {
  position: absolute; top: 60px; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column; padding: 6px 16px 14px;
  background: #1D1B18; border-bottom: 1px solid var(--desk-line);
  box-shadow: 0 24px 40px rgba(0,0,0,.55);
  animation: tocIn .3s var(--ease-out) both;
}
.toc .chap { height: 52px; font-size: 16px; justify-content: flex-start; border-bottom: 1px solid var(--desk-line); }
.toc .chap::after { display: none; }
.toc .chap.on { color: var(--y); }
.toc { max-height: calc(100% - 60px); overflow-y: auto; overscroll-behavior: contain; }
.toc .chap { flex: none; }
@keyframes tocIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- palco + livro ---------- */
.stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  container-type: size;
  background: radial-gradient(ellipse at 50% 46%, #2B2722 0%, var(--desk) 64%);
}
.book-wrap { position: relative; margin-top: -34px; animation: bookIn 1.1s var(--ease-out) both; }
@keyframes bookIn { from { opacity: 0; transform: translateY(48px) scale(.93); } to { opacity: 1; transform: none; } }
/* 20% mais largo que na proporção 1.36 (e nunca mais alto que ela). Altura = palco - 82px:
   com o margin-top de -34px sobram 24px em cima (capa dura + 12 livres) e 58px embaixo (fita + dica) */
.book {
  position: relative;
  width: min(calc(100cqw - 72px), calc((100cqh - 100px) * 1.36 * 1.2));
  height: min(calc((100cqw - 72px) / 1.36), calc(100cqh - 82px));
  /* perspectiva = 4x a largura do livro e olho um pouco acima do centro: a capa abrindo
     e a folha virando não passam por trás da barra superior */
  perspective: 2600px;
  perspective: calc(min(100cqw - 72px, (100cqh - 100px) * 1.632) * 4);
  perspective-origin: 50% 30%;
  transition: transform var(--open) cubic-bezier(.55,.06,.25,1);
}
.book.st-closed { transform: translateX(-25%); }
.is-narrow .book-wrap { margin-top: 0; }
.is-narrow .book {
  width: min(calc(100cqw - 36px), calc((100cqh - 44px) * .78));
  height: calc(100cqh - 44px);
  perspective: 2600px; perspective-origin: 50% 50%;
}
.is-narrow .book.st-closed { transform: none; }
/* celular deitado: a página não fica estreita (a altura não manda na largura) */
@media (max-width: 899px) and (max-height: 500px) {
  .is-narrow .book { width: min(calc(100cqw - 36px), 600px); }
  .is-narrow .center { --mb-h: min(25.65em, 100cqw, calc(100cqh - 2em)); }
}

.board {
  position: absolute; top: -12px; bottom: -12px; z-index: 0; background: var(--yd);
  box-shadow: 0 30px 50px -18px rgba(0,0,0,.75), 0 6px 14px rgba(0,0,0,.35);
}
.board-l { left: -12px; right: 50%; border-radius: 7px 0 0 7px; }
.board-r { left: 50%; right: -12px; border-radius: 0 7px 7px 0; }
.book.st-closed .board-l, .book.st-opening .board-l { visibility: hidden; }
.is-narrow .board-l { display: none; }
.is-narrow .board-r { left: -8px; right: -8px; top: -8px; bottom: -8px; border-radius: 7px; }

.page { position: absolute; top: 0; bottom: 0; z-index: 1; }
.side-l { left: 0; right: 50%; box-shadow: -1px 0 0 #EFE6D2, -2px 0 0 #CBBD9D, -3px 0 0 #EFE6D2, -4px 0 0 #CBBD9D, -5px 0 0 #E6DCC4; }
.side-r { left: 50%; right: 0; box-shadow: 1px 0 0 #EFE6D2, 2px 0 0 #CBBD9D, 3px 0 0 #EFE6D2, 4px 0 0 #CBBD9D, 5px 0 0 #E6DCC4; }
.book.st-closed .side-l, .book.st-opening .side-l { visibility: hidden; }
.is-narrow .side-l { display: none; }
.is-narrow .side-r { left: 0; }

.face {
  position: absolute; inset: 0; overflow: hidden; background: var(--paper);
  container-type: size;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.face.tone-y { background: var(--y); }
.face::after { content: ""; position: absolute; top: 0; bottom: 0; width: 11%; z-index: 4; pointer-events: none; }
.face.pg-l::after { right: 0; background: linear-gradient(to left, rgba(80,58,24,.26), rgba(80,58,24,.07) 40%, rgba(80,58,24,0)); }
.face.pg-r::after { left: 0; background: linear-gradient(to right, rgba(80,58,24,.26), rgba(80,58,24,.07) 40%, rgba(80,58,24,0)); }
.face.pg-n::after { left: 0; width: 5%; background: linear-gradient(to right, rgba(80,58,24,.22), rgba(80,58,24,0)); }
/* a fonte segue também a altura da página: página mais larga não estoura */
.face-inner { position: absolute; inset: 0; font-size: clamp(10.5px, min(2.6cqw, 1.9cqh), 20px); }
.is-narrow .face-inner { font-size: 15px; }
.face-scroll {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; padding: 1.7em 3.3em 1.6em;
  scrollbar-width: thin; scrollbar-color: #D6C9AB transparent;
  -webkit-overflow-scrolling: touch;
}
.pg-l .face-scroll { padding-right: 3.9em; }
.pg-r .face-scroll { padding-left: 3.9em; }
.pg-n .face-scroll { padding: 1.3em 1.3em 1.4em 1.8em; }
.runhead { flex: 0 0 auto; min-height: 1.4em; margin-bottom: 1.5em; display: flex; }
.runhead span { font-family: var(--f-cond); font-weight: 700; font-size: .66em; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.pg-r .runhead { justify-content: flex-end; }
.sheets { flex: 1 0 auto; }
.pg-n .sheet + .sheet { margin-top: 2.4em; padding-top: 2.4em; border-top: 1px solid var(--line); }
.folio { flex: 0 0 auto; margin-top: 1.4em; font-family: var(--f-display); font-weight: 500; font-size: .82em; letter-spacing: .06em; color: var(--ink-soft); }
.pg-r .folio { text-align: right; }
.pg-n .folio { text-align: center; }

/* sombra projetada sobre a página de baixo */
.cast { position: absolute; inset: 0; z-index: 6; pointer-events: none; animation: castFade var(--flip) ease-out forwards; }
.cast-r { background: linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 80%); }
.cast-l { background: linear-gradient(to left, rgba(0,0,0,.42), rgba(0,0,0,.12) 45%, rgba(0,0,0,0) 80%); }
@keyframes castFade { 0% { opacity: .9; } 60% { opacity: .35; } 100% { opacity: 0; } }

/* ---------- folha virando ---------- */
.leaf { position: absolute; top: 0; bottom: 0; z-index: 20; pointer-events: none; transform-style: preserve-3d; will-change: transform; }
.lf-fwd { left: 50%; right: 0; transform-origin: 0 50%; animation: flipFwd var(--flip) var(--ease-page) forwards; }
.lf-back { left: 0; right: 50%; transform-origin: 100% 50%; animation: flipBack var(--flip) var(--ease-page) forwards; }
.lf-nfwd { left: 0; right: 0; transform-origin: 0 50%; animation: flipFwd var(--flip) var(--ease-page) forwards, fadeLate var(--flip) linear forwards; }
.lf-nback { left: 0; right: 0; transform-origin: 0 50%; animation: flipNBack var(--flip) var(--ease-page) forwards, fadeEarly var(--flip) linear forwards; }
@keyframes flipFwd { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes flipBack { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes flipNBack { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
@keyframes fadeLate { 0%, 50% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes fadeEarly { 0%, 15% { opacity: 0; } 50%, 100% { opacity: 1; } }
.leaf .face { box-shadow: 0 0 28px rgba(0,0,0,.2); }
.leaf .back { transform: rotateY(180deg); }
.shade { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.lf-fwd .front .shade, .lf-nfwd .front .shade { background: linear-gradient(to left, rgba(0,0,0,.32), rgba(0,0,0,.05)); animation: shadeIn var(--flip) ease forwards; }
.lf-back .front .shade { background: linear-gradient(to right, rgba(0,0,0,.32), rgba(0,0,0,.05)); animation: shadeIn var(--flip) ease forwards; }
.lf-nback .front .shade { background: linear-gradient(to left, rgba(0,0,0,.32), rgba(0,0,0,.05)); animation: shadeOut var(--flip) ease forwards; }
.lf-fwd .back .shade { background: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,.04)); animation: shadeOut var(--flip) ease forwards; }
.lf-back .back .shade { background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,.04)); animation: shadeOut var(--flip) ease forwards; }
@keyframes shadeIn { 0% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes shadeOut { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- capa ---------- */
.cover {
  position: absolute; top: -12px; bottom: -12px; left: 50%; right: -12px; z-index: 30;
  transform-style: preserve-3d; transform-origin: 0 50%; container-type: size;
  transition: transform .6s var(--ease-out);
}
.cover.st-closed:hover { transform: rotateY(-14deg); }
.cover.st-opening { pointer-events: none; animation: coverOpen var(--open) cubic-bezier(.55,.06,.25,1) forwards; }
@keyframes coverOpen { from { transform: rotateY(var(--start, 0deg)); } to { transform: rotateY(-180deg); } }
.is-narrow .cover { left: -8px; right: -8px; top: -8px; bottom: -8px; }
.is-narrow .cover.st-opening .cface { animation: fadeLate var(--open) linear forwards; }
.cface { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* a arte mantém a proporção do livro (16 x 23) e fica centralizada na capa (mais larga no desktop, mais alta no celular) */
.cfront { padding: max(0px, calc(50cqh - 71.88cqw)) max(0px, calc(50cqw - 34.78cqh)); background: var(--y); border-radius: 0 7px 7px 0; container-type: inline-size; box-shadow: inset 16px 0 18px -16px rgba(0,0,0,.4); }
.is-narrow .cfront { border-radius: 7px; }
.cfront::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 30%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.38), rgba(255,255,255,0));
  transform: skewX(-12deg); pointer-events: none;
  animation: sheen 3.4s 1.4s ease-in-out infinite;
}
@keyframes sheen { 0% { left: -45%; } 45%, 100% { left: 130%; } }
.cback { transform: rotateY(180deg); background: var(--yd); border-radius: 7px 0 0 7px; }
.cback-page { position: absolute; top: 12px; bottom: 12px; left: 12px; right: 0; }
.is-narrow .cback-page { top: 8px; bottom: 8px; left: 8px; right: 8px; }
.cover-hit { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; background: transparent; cursor: pointer; }

/* medidas tiradas da arte oficial da capa (557 x 800 px; 1cqw = 1% da largura da arte) */
.cart {
  position: relative; height: 100%; display: flex; flex-direction: column;
  padding: 7cqw 9.5cqw 7.57cqw 11.5cqw; color: var(--k); font-family: var(--f-cond);
}
.c-top {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 2.15cqw 0; border-top: .36cqw solid var(--k); border-bottom: .36cqw solid var(--k);
  font-weight: 700; font-size: 2.15cqw; text-transform: uppercase; white-space: nowrap;
}
.c-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.08cqw; height: .22cqw; background: var(--r); }
.c-red { color: var(--r); }
.c-mid { padding: .8cqw 2.1cqw; margin-left: .9cqw; border-left: .36cqw solid var(--k); border-right: .36cqw solid var(--k); }
.c-mid i { display: inline-block; width: 1.1cqw; height: 1.1cqw; margin: 0 .7cqw; border-radius: 50%; background: var(--r); vertical-align: middle; }
.c-pj { margin: 6.66cqw 0 0 -4.52cqw; font-weight: 900; font-size: 82.46cqw; line-height: .74; transform: scaleX(1.089); transform-origin: 0 0; }
.c-minuto { margin: 0 0 8.58cqw -1.65cqw; font-family: var(--f-display); font-weight: 600; font-size: 25.72cqw; line-height: .72; letter-spacing: -.005em; color: var(--r); transform: scale(1.03, 1.18); transform-origin: 0 0; }
.c-rule { height: .22cqw; background: var(--k); }
.c-sub { padding: 1.99cqw 0 1.92cqw; font-weight: 700; font-size: 5.16cqw; line-height: 1.218; letter-spacing: .01em; text-transform: uppercase; }
.c-author { margin-top: auto; padding-top: 3cqw; text-align: center; font-weight: 600; font-size: 4.55cqw; line-height: 1; letter-spacing: .164em; text-transform: uppercase; }

/* ---------- fita, cantos, dicas ---------- */
.ribbon {
  position: absolute; bottom: -30px; left: calc(50% + 26px); z-index: -1; width: 18px; height: 66px;
  background: var(--r); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  transform-origin: 50% 0; animation: sway 5s ease-in-out infinite;
}
.is-narrow .ribbon { left: 28px; }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
.corner { position: absolute; bottom: 0; z-index: 10; width: 76px; height: 76px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.corner-r { right: 0; }
.corner-l { left: 0; }
.curl { position: absolute; bottom: 0; width: 26px; height: 26px; transition: width .3s var(--ease-out), height .3s var(--ease-out); }
.corner-r .curl { right: 0; background: linear-gradient(to top left, #D4C6A7 0 50%, #FFFAF0 50% 100%); filter: drop-shadow(-3px -3px 4px rgba(0,0,0,.2)); animation: nudge 4.5s 2.6s ease-in-out infinite; }
.corner-l .curl { left: 0; background: linear-gradient(to top right, #D4C6A7 0 50%, #FFFAF0 50% 100%); filter: drop-shadow(3px -3px 4px rgba(0,0,0,.2)); }
.corner:hover .curl { width: 60px; height: 60px; animation: none; }
@keyframes nudge { 0%, 78%, 100% { width: 26px; height: 26px; } 86% { width: 42px; height: 42px; } }
.clabel { position: absolute; bottom: 22px; font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; opacity: 0; transition: opacity .25s; }
.corner-r .clabel { right: 70px; }
.corner-l .clabel { left: 70px; }
.corner:hover .clabel { opacity: 1; }
.hint {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center;
  font-weight: 600; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--desk-muted); animation: fadeIn .8s 1.2s both;
}
.is-narrow .hint { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- paginação no celular ---------- */
.pager {
  flex: 0 0 auto; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; background: var(--desk); border-top: 1px solid var(--desk-line);
}
.pg-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #3A3731; background: transparent; color: var(--desk-text); cursor: pointer; }
.pg-btn:disabled { opacity: .35; cursor: default; }
.pg-label { text-align: center; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #CFC7B6; }

/* ---------- WhatsApp flutuante ---------- */
/* padrão: o livro encosta nas laterais (janela estreita, tablet deitado), então o botão fica pequeno
   na faixa livre embaixo do livro; com sobra lateral (palco >= 17:10) ele cresce no canto */
.wa-float {
  position: absolute; right: 12px; bottom: 5px; z-index: 40;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: transform .2s var(--ease-out), background .2s;
}
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: waPulse 4s 3s ease-out infinite; pointer-events: none; }
.wa-float svg { width: 55%; height: 55%; }
.wa-float:hover { color: #fff; background: #1EBE5D; transform: translateY(-2px); }
.wa-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 10px; border-radius: 2px;
  background: var(--paper); color: var(--k); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .2s, transform .2s var(--ease-out);
}
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip { opacity: 1; transform: translate(0, -50%); }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 30%, 100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
@container (min-aspect-ratio: 17 / 10) { .wa-float { right: 24px; bottom: 24px; width: 50px; height: 50px; } }
.is-narrow .wa-float { right: 14px; bottom: 14px; width: 47px; height: 47px; }
.is-narrow .wa-tip { display: none; }
/* celular: o fim da página rola para cima do botão */
.is-narrow .face-scroll { padding-bottom: calc(1.4em + 60px); }

/* janela do WhatsApp: mensagem livre, atalhos ou a mensagem padrão (SITE.textos.whatsappPadrao) */
.wa-dialog {
  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 4px;
  background: var(--paper); color: var(--k); box-shadow: 0 30px 80px rgba(0,0,0,.6); font-size: 15px;
}
.wa-dialog[open] { animation: dlgIn .3s var(--ease-out) both; }
.wa-dialog::backdrop { background: rgba(10,9,8,.62); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.wa-box { position: relative; display: grid; gap: .85em; padding: 1.5em 1.5em 1.3em; border-top: 5px solid #25D366; }
.wa-box .kicker { margin: 0; }
.wa-x { position: absolute; top: .3em; right: .3em; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--k); cursor: pointer; }
.wa-title { margin: -.4em 2em 0 0; font-family: var(--f-display); font-weight: 700; font-size: 1.6em; line-height: 1.1; text-transform: uppercase; }
.wa-help, .wa-note { margin: 0; font-family: var(--f-body); font-size: .88em; color: var(--muted); }
.wa-box .wa-chips { margin: 0; }
.wa-chips .chip { min-height: 36px; background: none; color: var(--k); cursor: pointer; transition: background .15s, color .15s; }
.wa-chips .chip:hover { background: var(--k); color: var(--paper); }
.wa-send { gap: .6em; width: 100%; background: #25D366; color: var(--k); }
.wa-send:hover { color: var(--k); transform: translateY(-2px); box-shadow: 0 5px 0 var(--k); }
.wa-send svg { width: 1.35em; height: 1.35em; }
.wa-note a { font-weight: 600; color: var(--r-text); }

/* ---------- selo Start Digital Web (código padrão da agência) ---------- */
.sdw-credit{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:13.5px;font-weight:500;color:#8a8f99;line-height:1;padding:7px 12px;border-radius:999px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.sdw-credit img{display:block;flex-shrink:0;border:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.sdw-credit b{font-weight:700;background:linear-gradient(90deg,#EC1C7D,#1BA5DD);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.sdw-credit:hover{transform:translateY(-1px);background:rgba(236,28,125,.07);box-shadow:0 4px 16px rgba(236,28,125,.14)}
.sdw-credit.on-dark{color:#9fb0c9}
.sdw-credit.on-dark:hover{background:rgba(255,255,255,.05)}
/* no site, bem discreto: canto esquerdo da mesa no desktop; no celular, fim do último capítulo */
.stage > .sdw-credit { position: absolute; left: 14px; bottom: 9px; z-index: 5; gap: 6px; padding: 5px 9px; font-size: 11.5px; opacity: .55; transition: opacity .2s, transform .2s ease, background .2s ease; }
.stage > .sdw-credit img { width: 16px; height: 16px; }
.stage > .sdw-credit:hover, .stage > .sdw-credit:focus-visible { opacity: 1; }
.is-narrow .stage > .sdw-credit, .colofao { display: none; }
.is-narrow .colofao { display: block; margin-top: 1.6em; text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 88px; z-index: 100; transform: translateX(-50%);
  padding: 12px 18px; border-radius: 3px; background: var(--y); color: var(--k);
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastIn .3s var(--ease-out) both;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* =========================================================
   Conteúdo das páginas (tudo em em — escala com a página)
   ========================================================= */
.pg { font-family: var(--f-body); color: var(--k); line-height: 1.5; }
:where(.pg) :where(p, h1, h2, h3, ul) { margin: 0; }
.kicker { margin-bottom: .9em; font-family: var(--f-cond); font-weight: 700; font-size: .74em; letter-spacing: .18em; text-transform: uppercase; color: var(--r-text); }
.h1 { margin-bottom: .55em; font-family: var(--f-display); font-weight: 700; font-size: 2.35em; line-height: 1.18; text-transform: uppercase; text-wrap: balance; }
.h2 { margin-bottom: .45em; font-family: var(--f-display); font-weight: 700; font-size: 2.3em; line-height: 1.12; text-transform: uppercase; text-wrap: balance; }
.h2.sm { margin-bottom: .55em; font-size: 1.85em; line-height: 1.16; }
.h3 { font-family: var(--f-cond); font-weight: 800; font-size: 1.02em; letter-spacing: .04em; text-transform: uppercase; }
.lead { margin-bottom: 1.2em; font-size: 1.05em; }
.label { margin-bottom: .6em; font-family: var(--f-cond); font-weight: 800; font-size: .8em; letter-spacing: .13em; text-transform: uppercase; }
.small { font-size: .86em; color: var(--muted); }
.red { color: var(--r); }
.mt { margin-top: 1.2em; }

.hl {
  background-image: linear-gradient(var(--y), var(--y)); background-repeat: no-repeat;
  background-position: 0 88%; background-size: 100% 40%;
}
.rule { height: 3px; margin: 1.6em 0 1.1em; background: var(--k); transform-origin: left center; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.4em; padding: 0 1.5em;
  border: 2px solid transparent; border-radius: 2px; cursor: pointer; text-decoration: none;
  font-family: var(--f-cond); font-weight: 800; font-size: .9em; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.btn-primary { background: var(--r-btn); color: #fff; }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--k); }
.btn-ghost { background: transparent; border-color: var(--k); color: var(--k); }
.btn-ghost:hover { color: var(--k); transform: translateY(-2px); box-shadow: 0 5px 0 var(--r); }
.btn-ghost.on-dark { border-color: var(--y); color: var(--y); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }

/* 01 · guarda amarela */
.guard { display: flex; flex-direction: column; gap: 1.1em; }
.guard-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5em .8em;
  padding: .65em 0; border-top: 3px solid var(--k); border-bottom: 3px solid var(--k);
  font-family: var(--f-cond); font-weight: 700; font-size: .7em; letter-spacing: .14em; text-transform: uppercase;
}
.guard-top .dk { color: #9E1F18; }
.guard-pre { margin-top: 1.6em; font-family: var(--f-display); font-weight: 600; font-size: 1.45em; line-height: 1.05; text-transform: uppercase; }
.guard-big { font-family: var(--f-display); font-weight: 700; font-size: 4em; line-height: 1.04; text-transform: uppercase; color: #B3241C; text-wrap: balance; }
.guard .rule { margin: 0; }
.guard-quote { font-style: italic; font-size: 1.2em; line-height: 1.4; }
.guard-sign { font-family: var(--f-cond); font-weight: 700; font-size: .85em; letter-spacing: .32em; text-transform: uppercase; }
.is-narrow .guard-top span:nth-child(2) { display: none; }
/* página baixa: a guarda aperta para o cartão de lançamento caber inteiro */
@container (max-height: 475px) { .guard { gap: .8em; } .guard-pre { margin-top: .6em; } .guard-big { font-size: 3.2em; } }
.launch {
  display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 1.1em; align-items: center;
  margin-top: .8em; padding: 1em 1.1em; border-radius: 3px; background: var(--k); color: var(--paper);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.6);
}
.launch img { display: block; width: 100%; height: auto; border-radius: 1px 3px 3px 1px; box-shadow: 0 5px 12px rgba(0,0,0,.45); }
.launch .kicker { margin-bottom: .3em; color: var(--y); }
.launch-t { font-family: var(--f-display); font-weight: 700; font-size: 1.4em; line-height: 1.05; text-transform: uppercase; }
.launch-d { margin: .3em 0 .85em; font-size: .86em; color: #D8D0BF; }
.launch .btn { text-align: center; }
.launch .btn-primary:hover { box-shadow: 0 5px 0 var(--y); }
.is-narrow .launch { grid-template-columns: 4.6em minmax(0, 1fr); gap: .9em; padding: .9em 1em; }
.is-narrow .launch .btn { padding: 0 1em; }

/* 01 · hero */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 1.4em; }
.feat-t { font-family: var(--f-display); font-weight: 600; font-size: 1.05em; text-transform: uppercase; }
.feat-t span { color: var(--r-text); }
.feat-d { margin-top: .2em; font-size: .88em; color: var(--muted); }

/* 02 · livro 3D — a frente é a arte oficial da capa (16 x 23 x 1 cm) */
/* altura cheia = +70% do livrinho antigo; em página baixa cede o que o resto da página (~28em) precisa,
   sem ficar menor que o livrinho antigo (15.4em) */
.center { --mb-h: max(15.4em, min(25.65em, calc(100cqh - 28em))); display: flex; flex-direction: column; align-items: center; text-align: center; }
.is-narrow .center { --mb-h: min(25.65em, 100cqw); }
.mini-stage { padding: .6em 0 2.4em; perspective: 1600px; }
.mini-book {
  --t: calc(var(--mb-h) * .0217);
  position: relative; height: var(--mb-h); aspect-ratio: 16 / 23;
  transform: rotateY(-26deg) rotateX(6deg); transform-style: preserve-3d; animation: float3d 7s ease-in-out infinite;
}
@keyframes float3d { 0%, 100% { transform: rotateY(-26deg) rotateX(6deg) translateY(0); } 50% { transform: rotateY(-15deg) rotateX(3deg) translateY(-.6em); } }
.mb-front { position: absolute; inset: 0; overflow: hidden; transform: translateZ(var(--t)); border-radius: 0 3px 3px 0; background: var(--y); }
.mb-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0) 4%, rgba(255,255,255,.14) 5.5%, rgba(255,255,255,0) 11%);
}
.mb-back { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(var(--t)); background: var(--yd); border-radius: 3px 0 0 3px; }
.mb-edge { position: absolute; top: .25em; bottom: .25em; left: calc(100% - var(--t)); width: calc(var(--t) * 2); transform: rotateY(90deg); background: repeating-linear-gradient(to right, #F7F0DF 0 2px, #D9CCB0 2px 3px); }
.mini-shadow { width: calc(var(--mb-h) * .6); height: calc(var(--mb-h) * .065); margin: calc(var(--mb-h) * -.095) 0 1.6em; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.3), rgba(0,0,0,0)); }
.book-title { font-family: var(--f-display); font-weight: 700; font-size: 2.6em; line-height: 1; text-transform: uppercase; }
.book-sub { margin: .45em 0 .2em; font-family: var(--f-cond); font-weight: 700; font-size: 1.05em; letter-spacing: .04em; text-transform: uppercase; }
.center .btn-row { justify-content: center; margin-top: 1.3em; }

.dots { display: grid; gap: .3em; margin-bottom: 1.1em; padding: 0; list-style: none; font-size: .95em; }
.dots li { display: flex; gap: .7em; align-items: flex-start; }
.dot { flex: 0 0 auto; width: .5em; height: .5em; margin-top: .5em; border-radius: 50%; background: var(--r); }
.dark-note { padding: .9em 1em; border-radius: 3px; background: var(--k); color: var(--paper); font-style: italic; font-size: .95em; }

/* 03 · método */
.chain { display: flex; flex-wrap: wrap; gap: .3em .5em; margin-bottom: 1.2em; font-family: var(--f-cond); font-weight: 700; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; }
.chain i { font-style: normal; color: var(--r-text); }
.p-item { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: .2em 1em; align-items: start; padding: .9em 0; border-top: 1px solid var(--line); }
.p-item:last-child { border-bottom: 1px solid var(--line); }
.p-item.first { padding-top: 0; border-top: 0; }
.p-num { font-family: var(--f-display); font-weight: 700; font-size: 2em; line-height: 1; color: var(--r); }
.p-item .h3 { margin-bottom: .3em; font-size: 1.05em; }
.p-item p { font-size: .95em; }
.funnel { display: flex; flex-direction: column; gap: .3em; }
.bar {
  width: var(--w); min-width: 10em; padding: .34em .7em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: 2px; background: var(--k); color: var(--paper);
  font-family: var(--f-cond); font-weight: 700; font-size: .74em; letter-spacing: .08em; text-transform: uppercase;
}
.bar.t2 { background: #3A3630; }
.bar.t3 { background: #57514A; }
.bar.t4 { background: var(--r-btn); color: #fff; }
.loop { display: flex; align-items: center; gap: .5em; margin-top: .9em; font-family: var(--f-cond); font-weight: 700; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: var(--r-text); }

/* 04 · curso */
.steps { display: grid; gap: .75em; margin-bottom: 1.3em; }
.step { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: .8em; align-items: start; }
.step-n { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--k); color: var(--y); font-family: var(--f-display); font-weight: 600; }
.step-n.hot { background: var(--r); color: #fff; }
.step .h3 { margin-bottom: .15em; font-size: 1em; }
.step p { font-size: .92em; }
.box { padding: 1em 1.1em; border: 2px solid var(--k); border-radius: 3px; background: var(--paper-hi); }
.box-t { margin-bottom: .5em; font-family: var(--f-display); font-weight: 700; font-size: 1.35em; line-height: 1.05; text-transform: uppercase; }
.box .kicker { margin-bottom: .2em; font-size: .72em; }
.weeks { display: grid; gap: .35em; font-size: .92em; }
.week { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: .6em; align-items: baseline; }
.week b { font-family: var(--f-cond); font-weight: 800; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--r-text); }
.offers { display: grid; gap: .5em; margin-bottom: 1.3em; }
.offer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2em 1em; align-items: center;
  padding: .7em .9em; border: 1.5px solid var(--k); border-radius: 3px;
  transition: transform .25s var(--ease-out);
}
.offer:hover { transform: translateX(.35em); }
.offer-n { font-family: var(--f-cond); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.offer-d { font-size: .85em; color: var(--muted); }
.offer-p { font-family: var(--f-display); font-weight: 600; font-size: 1.05em; text-transform: uppercase; text-align: right; }
.offer-p.free { color: var(--r-text); }
.offer.featured { padding: .8em .9em; background: var(--k); color: var(--paper); }
.offer.featured .offer-d { color: #D8D0BF; }
.offer.featured .offer-p { color: var(--y); }
.offer.dashed { border-style: dashed; }
.tag { display: inline-block; margin-bottom: .35em; padding: .15em .5em; background: var(--y); color: var(--k); font-family: var(--f-cond); font-weight: 800; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; }

/* 05 · público */
.persona { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: .9em; padding: .8em 0; border-top: 1px solid var(--line); }
.persona:last-child { border-bottom: 1px solid var(--line); }
.persona-n { font-family: var(--f-display); font-weight: 700; font-size: 1.6em; line-height: 1; color: var(--r); }
.persona .h3 { margin-bottom: .15em; }
.persona p { font-size: .93em; }
.pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7em; margin-bottom: 1.4em; }
.pain {
  padding: .9em .9em 1em; border: 1.5px solid var(--k); border-radius: 3px; background: var(--paper-hi);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.pain:hover { transform: rotate(-1deg) translateY(-2px); box-shadow: 0 6px 0 var(--k); }
.pain-t { margin-bottom: .35em; font-family: var(--f-display); font-weight: 700; font-size: 1.12em; line-height: 1.05; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: 1.4em; }
.chip { padding: .3em .8em; border: 1.5px solid var(--k); border-radius: 99px; font-family: var(--f-cond); font-weight: 600; font-size: .8em; }
.chip.dark { background: var(--k); color: var(--paper); }
.closing { font-family: var(--f-display); font-weight: 700; font-size: 1.45em; line-height: 1.12; text-transform: uppercase; }

/* 06 · autor */
.author-head { display: grid; grid-template-columns: 50% minmax(0, 1fr); gap: 1.8em; align-items: end; margin: .2em 0 2em; }
.photo { position: relative; margin-right: 1.1em; }
.photo::before { content: ""; position: absolute; top: 1.1em; left: 1.1em; right: -1.1em; bottom: -1.1em; border-radius: 3px; background: var(--r); }
.photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 247 / 280; object-fit: cover; border-radius: 3px; }
.contacts { display: grid; justify-items: start; margin-top: .35em; }
.contact {
  display: inline-flex; align-items: center; gap: .45em; min-height: 2.4em;
  font-family: var(--f-cond); font-weight: 800; font-size: .92em; letter-spacing: .04em; text-decoration: none; color: var(--r-text);
}
.contact svg { flex: none; }
.contact:hover span:first-of-type { text-decoration: underline; text-underline-offset: .2em; }
.is-narrow .contact { min-height: 44px; }
.is-narrow .author-head { grid-template-columns: 42% minmax(0, 1fr); gap: 1.3em; }
.is-narrow .author-head .h2 { font-size: 2.1em !important; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; margin-top: 1em; }
.stat { padding-top: .5em; border-top: 3px solid var(--k); }
.stat.hot { border-color: var(--r); }
.stat-v { font-family: var(--f-display); font-weight: 700; font-size: 1.7em; line-height: 1; text-transform: uppercase; }
.stat-l { margin-top: .25em; font-size: .82em; color: var(--muted); }
.pg p + p.para { margin-top: .9em; }
.also { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 1em; align-items: center; margin: 1.2em 0 1.4em; padding: .9em 1em; border: 2px solid var(--k); border-radius: 3px; background: var(--paper-hi); }
.also-cv { display: block; width: 100%; height: auto; border-radius: 1px 3px 3px 1px; box-shadow: 0 5px 12px rgba(0,0,0,.35); }
.also .btn { margin-top: .7em; }
.is-narrow .also { grid-template-columns: 4.6em minmax(0, 1fr); gap: .9em; }
.is-narrow .also .btn { padding: 0 1em; }
.also-t { margin: .1em 0 .15em; font-family: var(--f-display); font-weight: 700; font-size: 1.2em; text-transform: uppercase; }
.also .kicker { margin-bottom: 0; font-size: .7em; }
.motto { font-family: var(--f-display); font-weight: 600; font-size: 1.35em; line-height: 1.15; text-transform: uppercase; }
.motto span { color: var(--r-text); }
.pg .rule.tight { margin: 0 0 1em; }

/* 07 · planner */
.lead-form { display: grid; gap: .8em; }
.field textarea { min-height: 6.4em; resize: vertical; }
.field { display: grid; gap: .3em; }
.field span { font-family: var(--f-cond); font-weight: 700; font-size: .74em; letter-spacing: .12em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.1em; padding: .6em .8em; border: 1.5px solid var(--k); border-radius: 2px;
  background: var(--paper-hi); color: var(--k); font-family: var(--f-body); font-size: 1em;
}
.lead-form .btn { margin-top: .3em; }
.legal { font-size: .74em; color: var(--muted); }
.legal a { color: var(--muted); }
.done { display: none; padding: 1.4em 1.3em; border-radius: 3px; background: var(--k); color: var(--paper); }
.done-t { margin-bottom: .3em; font-family: var(--f-display); font-weight: 700; font-size: 1.6em; text-transform: uppercase; color: var(--y); }
.done p + p { margin-bottom: 1.1em; }
.lead-box.is-sent .lead-form { display: none; }
.lead-box.is-sent .done { display: block; }
.lead-form .btn[disabled] { opacity: .6; cursor: progress; }
.kicker.live { display: flex; align-items: center; gap: .6em; }
.live-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--r); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(229,52,44,.55); } 70%, 100% { box-shadow: 0 0 0 .55em rgba(229,52,44,0); } }
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.2em; margin-top: 1.6em; padding-top: 1em; border-top: 1px solid var(--line); font-family: var(--f-cond); font-weight: 700; font-size: .8em; letter-spacing: .1em; text-transform: uppercase; }
.socials a { display: inline-flex; align-items: center; min-height: 2.8em; color: var(--k); }
.is-narrow .socials a, .is-narrow .back-home { min-height: 44px; }
.back-home { margin-left: auto; min-height: 2.8em; padding: 0 .2em; border: 0; background: transparent; color: var(--r-text); cursor: pointer; font-family: var(--f-cond); font-weight: 800; font-size: 1em; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- animações que tocam quando a página assenta ---------- */
@keyframes hlIn { from { background-size: 0% 40%; } to { background-size: 100% 40%; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes barIn { from { max-width: 12%; } to { max-width: 100%; } }
@keyframes dotIn { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
.fx-anim .hl { animation: hlIn .9s .45s var(--ease-out) both; }
.fx-anim .rule { animation: drawX .8s .2s var(--ease-out) both; }
.fx-anim .bar { animation: barIn .8s var(--ease-out) both; animation-delay: calc(.2s + var(--i, 0) * .08s); }
.fx-anim .dot { animation: dotIn .45s ease both; animation-delay: calc(.3s + var(--i, 0) * .06s); }
.fx-inicial .hl { background-size: 0% 40%; }
.fx-inicial .rule { transform: scaleX(0); }
.fx-inicial .bar { max-width: 12%; }
.fx-inicial .dot { transform: scale(0); }

@media (prefers-reduced-motion: reduce) {
  .mini-book, .ribbon, .live-dot, .corner-r .curl, .cfront::after, .book-wrap, .hint, .wa-float::after, .wa-dialog[open] { animation: none !important; }
  .fx-anim .hl, .fx-anim .rule, .fx-anim .bar, .fx-anim .dot { animation: none !important; }
}