/* ==========================================================================
   Revele · Funil Fabi Feitosa
   ========================================================================== */

:root {
  --cream: #F6F2EC;
  --cream-deep: #EFE8DE;
  --ink: #2B211B;
  --ink-2: #5A4A3F;
  --ink-3: #75655A;
  --caramel: #B08A5B;
  --caramel-ink: #80592F;
  --caramel-soft: #F3E8D9;
  --line: #E8E0D5;
  --card: #FFFFFF;
  --wood: #2B211B;
  --wood-2: #3A2D24;
  --on-wood: #F6F2EC;
  --on-wood-2: #D8C9B6;

  /* cartela: tons usados no progresso e na espera */
  --sw-1: #2B211B;
  --sw-2: #6E4B35;
  --sw-3: #B08A5B;
  --sw-4: #C99A8C;
  --sw-5: #7C7A57;
  --sw-6: #D8BE9C;
  --sw-7: #8E5A4E;

  /* EB Garamond nos títulos: a Cormorant desenha os acentos minúsculos soltos, acima da letra */
  --serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --brand: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-lg: 16px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --shadow-soft: 0 10px 30px -12px rgba(43, 33, 27, .22), 0 2px 6px -2px rgba(43, 33, 27, .08);
  --shadow-video: 0 22px 44px -18px rgba(43, 33, 27, .45), 0 4px 12px -4px rgba(43, 33, 27, .18);

  --gutter: 20px;
  --col: 460px;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--caramel) var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  /* altura da barra fixa de compra enquanto ela está visível (definida no app.js) */
  padding-bottom: var(--sticky-h, 0px);
}

::selection { background: var(--caramel); color: var(--cream); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--caramel); }

h1, h2, h3, p { margin: 0; }

h1, h2, h3, .fb-text, .loading-title, .close-line, .brand {
  font-feature-settings: "kern" 1;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

em { font-style: italic; }

:focus-visible {
  outline: 2px solid var(--caramel-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
[tabindex="-1"]:focus { outline: none; }

[hidden] { display: none !important; }

/* ==========================================================================
   Topo
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  max-width: var(--col);
  margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) 12px 0;
  height: 52px;
  box-sizing: content-box;
}

.brand {
  grid-column: 2;
  text-align: center;
  font-family: var(--brand);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--ink);
}

.topbar-back {
  grid-column: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease-out), background-color .2s, color .2s;
}
.topbar-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-back:hover { background: var(--cream-deep); color: var(--ink); }

body[data-screen="question"] .topbar-back { opacity: 1; visibility: visible; }

/* ==========================================================================
   Progresso · cartela de 5 amostras
   ========================================================================== */

.progress {
  max-width: var(--col);
  margin: 0 auto;
  padding: 4px var(--gutter) 0;
  display: none;
}
body[data-screen="question"] .progress,
body[data-screen="feedback"] .progress { display: block; }

.progress-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.swatches li {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.swatches li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.swatches li:nth-child(1)::after { background: var(--sw-1); }
.swatches li:nth-child(2)::after { background: var(--sw-2); }
.swatches li:nth-child(3)::after { background: var(--sw-3); }
.swatches li:nth-child(4)::after { background: var(--sw-4); }
.swatches li:nth-child(5)::after { background: var(--sw-5); }
.swatches li.is-filled::after { transform: scaleX(1); }
.swatches li.is-current { background: #DDD2C4; }

/* ==========================================================================
   Telas
   ========================================================================== */

#stage {
  position: relative;
}

.screen {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.screen.is-entering { animation: screen-in .6s var(--ease-out) both; }
.screen.is-leaving { animation: screen-out .2s var(--ease-in) both; pointer-events: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes screen-out {
  to { opacity: 0; transform: translateY(-8px); }
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.975); }

.btn-primary {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 10px 24px -12px rgba(43, 33, 27, .6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(43, 33, 27, .7); }
.btn-primary:active { transform: scale(.975); }

.btn-arrow {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--ease-out);
}
.btn-primary:hover .btn-arrow { transform: translateX(3px); }
.btn-primary span { text-wrap: balance; }
.btn-stack { display: grid; gap: 2px; text-align: center; }
.btn-stack-main { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.btn-stack-sub { font-size: 13px; font-weight: 400; color: #E3D5C3; }
.btn-primary:has(.btn-stack) { min-height: 64px; padding-block: 11px; }
@media (max-width: 400px) {
  .btn-primary { font-size: 15.5px; padding-inline: 18px; }
  .btn-primary .btn-arrow { display: none; }
}


/* ==========================================================================
   TELA 1 · Abertura
   ========================================================================== */

.screen-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(20px, 6vh, 56px);
  padding-bottom: 40px;
}

.portrait {
  position: relative;
  flex: none;
  border-radius: 50%;
  background: var(--wood);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait::after {
  /* aro fino em caramelo, como a borda de uma medalha */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(176, 138, 91, .55);
  pointer-events: none;
}
.portrait-mono {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  color: var(--caramel);
  letter-spacing: .02em;
  line-height: 1;
}
.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.portrait-lg {
  width: 116px;
  height: 116px;
  outline: 1px solid rgba(176, 138, 91, .6);
  outline-offset: 6px;
  margin: 8px 0 30px;
}
.portrait-lg .portrait-mono { font-size: 44px; }

.intro-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 9.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 12ch;
}
.intro-title em {
  font-weight: 400;
  color: var(--caramel-ink);
}

.intro-text {
  margin: 18px 0 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 36ch;
  text-wrap: pretty;
}

.intro-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
  text-align: left;
  max-width: 300px;
}
.portrait-xs {
  width: 40px;
  height: 40px;
}
.portrait-xs .portrait-mono { font-size: 15px; }

/* ==========================================================================
   Pergunta
   ========================================================================== */

.screen-question { padding-top: 26px; padding-bottom: 40px; }

.q-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 7.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin-bottom: 24px;
}

.options { display: grid; gap: 10px; }

.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15.5px;
  line-height: 1.38;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, background-color .25s, transform .25s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: option-in .55s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
  touch-action: manipulation;
}
.option:hover {
  border-color: #D6C8B6;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(43, 33, 27, .35);
}
.option:active { transform: scale(.985); }

.option-dot {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #CDBFAE;
  display: grid;
  place-items: center;
  transition: border-color .2s, background-color .2s;
}
.option-dot svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s, transform .35s var(--ease-out);
}

.option.is-selected {
  background: var(--caramel-soft);
  border-color: var(--caramel);
  box-shadow: inset 0 0 0 1px var(--caramel);
}
.option.is-selected .option-dot { background: var(--caramel); border-color: var(--caramel); }
.option.is-selected .option-dot svg { opacity: 1; transform: none; }

.options.is-locked .option:not(.is-selected) { opacity: .5; transition: opacity .3s; }
.options.is-locked .option { pointer-events: none; }

@keyframes option-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Devolutiva · bilhete da Fabi
   ========================================================================== */

.screen-feedback { padding-top: 24px; padding-bottom: 40px; }

/* a resposta dela, devolvida antes do bilhete */
.fb-answer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--caramel-soft);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
}
.fb-answer-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--caramel);
}
.fb-answer-check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* o bilhete: campo madeira da capa, com luz quente vindo do canto */
.fb-note {
  position: relative;
  margin: 0;
  padding: 26px 24px 22px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 85% at 100% 0%, rgba(176, 138, 91, .26), rgba(176, 138, 91, 0) 62%),
    var(--wood);
  color: var(--on-wood);
  box-shadow: var(--shadow-video);
  overflow: hidden;
}

.fb-quote {
  display: block;
  height: 38px;
  margin: 0 0 4px -4px;
  font-family: var(--serif);
  font-size: 96px;
  line-height: .9;
  color: var(--caramel);
}

.fb-text {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 6.1vw, 26px);
  line-height: 1.3;
  letter-spacing: -.003em;
  color: var(--on-wood);
  text-wrap: pretty;
}
.fb-text em {
  font-style: italic;
  font-weight: 500;
  color: #E4C397;
}

.fb-sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(176, 138, 91, .28);
}
.portrait-sign {
  width: 42px;
  height: 42px;
  background: var(--wood-2);
  outline: 1px solid rgba(176, 138, 91, .55);
  outline-offset: 3px;
}
.portrait-sign .portrait-mono { font-size: 16px; }
.fb-sign-text { display: grid; gap: 1px; }
.fb-sign-name {
  font-family: var(--brand);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .03em;
  color: var(--on-wood);
}
.fb-sign-role {
  font-size: 12.5px;
  color: var(--on-wood-2);
}

/* tempo de leitura: linha fina na base do bilhete */
.fb-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(246, 242, 236, .08);
}
.fb-timer span {
  display: block;
  height: 100%;
  background: var(--caramel);
  transform-origin: left;
  transform: scaleX(0);
}
.fb-timer span.is-running {
  animation: fb-timer var(--fb-dur, 2500ms) linear both;
}
@keyframes fb-timer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.btn-next {
  margin-top: 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(43, 33, 27, .22);
  font-weight: 500;
}
.btn-next:hover { background: var(--cream-deep); border-color: rgba(43, 33, 27, .45); }
.btn-next:hover .btn-arrow { transform: translateX(3px); }

/* entrada orquestrada: resposta, bilhete, aspas, texto, assinatura */
.screen-feedback.is-entering .fb-answer { animation: fb-rise .5s var(--ease-out) both; }
.screen-feedback.is-entering .fb-note { animation: fb-note-in .7s var(--ease-out) both .08s; }
.screen-feedback.is-entering .fb-quote { animation: fb-fade .6s var(--ease-out) both .3s; }
.screen-feedback.is-entering .fb-text { animation: fb-text-in .8s var(--ease-out) both .38s; }
.screen-feedback.is-entering .fb-sign { animation: fb-rise .6s var(--ease-out) both .62s; }
.screen-feedback.is-entering .btn-next { animation: fb-fade .5s var(--ease-out) both .7s; }

@keyframes fb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fb-note-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes fb-text-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  to { opacity: 1; filter: none; transform: none; }
}
@keyframes fb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Transição · leque de amostras
   ========================================================================== */

.screen-loading {
  min-height: calc(100dvh - 140px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 60px;
}

.fan {
  position: relative;
  width: 200px;
  height: 150px;
  margin-bottom: 30px;
}
.fan span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 38px;
  height: 128px;
  margin-left: -19px;
  border-radius: 7px;
  transform-origin: 50% 112px;
  box-shadow: 0 6px 14px -8px rgba(43, 33, 27, .5);
  animation: fan 2.1s var(--ease-out) infinite alternate;
}
.fan span::after {
  /* ilhós do leque */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: rgba(246, 242, 236, .75);
}
.fan span:nth-child(1) { background: var(--sw-6); --a: -54deg; }
.fan span:nth-child(2) { background: var(--sw-4); --a: -36deg; }
.fan span:nth-child(3) { background: var(--sw-3); --a: -18deg; }
.fan span:nth-child(4) { background: var(--sw-7); --a: 0deg; }
.fan span:nth-child(5) { background: var(--sw-5); --a: 18deg; }
.fan span:nth-child(6) { background: var(--sw-2); --a: 36deg; }
.fan span:nth-child(7) { background: var(--sw-1); --a: 54deg; }

@keyframes fan {
  0%, 12% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(var(--a)); }
}

.loading-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
}
.dots i {
  font-style: normal;
  animation: dot 1.2s infinite both;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot {
  0%, 100% { opacity: .2; }
  40% { opacity: 1; }
}
.loading-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-3);
}

/* ==========================================================================
   Resultado + VSL
   ========================================================================== */

.screen-result {
  max-width: 720px;
  padding-top: 4px;
  padding-bottom: 0;
}

.result-head {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

/* diagnóstico: o bloqueio que ela escolheu, entre dois fios */
.r-diag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--caramel-ink);
}
.r-diag::before,
.r-diag::after {
  content: "";
  flex: 0 1 28px;
  height: 1px;
  background: var(--caramel);
  opacity: .55;
}
.r-diag-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.3;
}
.r-diag-text em { font-weight: 500; }

.r-title {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.r-title .sent { display: inline-block; text-wrap: balance; }

.r-bridge {
  margin: 8px auto 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.vsl { margin-top: 16px; }

.vsl-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--wood);
  box-shadow: var(--shadow-video);
  isolation: isolate;
}
@supports not (aspect-ratio: 1) {
  .vsl-frame { height: 0; padding-top: 56.25%; }
}

#yt-player, .vsl-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vsl-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.vsl-hit:disabled { cursor: default; }
.vsl-hit:disabled .vsl-play,
.vsl-hit:disabled .vsl-start-sub { display: none; }
.vsl-hit:disabled .vsl-start { padding: 12px 20px; max-width: 86%; }
.vsl-hit:disabled .vsl-cta { text-align: center; line-height: 1.4; }
.vsl-hit:focus-visible { outline-offset: -4px; outline-color: var(--cream); }

.vsl-poster,
.vsl-paused,
.vsl-spinner {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}

/* idle: capa */
.vsl-poster {
  /* o bloco de play mora no canto inferior: o rosto da Fabi fica livre */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 12px 12px;
  background: var(--wood);
}
.vsl-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.2s var(--ease-out);
}
.vsl-hit:hover .vsl-thumb { transform: scale(1.035); }
.vsl-poster::before {
  /* só o necessário para o play e a legenda lerem: base escura, topo limpo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30, 22, 17, .45), rgba(30, 22, 17, 0) 55%);
}

.vsl-play {
  position: relative;
  z-index: 1;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55);
  transition: transform .35s var(--ease-out);
}
.vsl-play::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(246, 242, 236, .5);
  animation: ring 2.8s var(--ease-out) infinite;
}
.vsl-play svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.vsl-hit:hover .vsl-play { transform: scale(1.05); }

@keyframes ring {
  0% { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* bloco de início: play + texto num só cartão escuro, legível sobre qualquer quadro */
.vsl-start {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  background: rgba(32, 24, 19, .72);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(246, 242, 236, .12);
  text-align: left;
  transition: transform .35s var(--ease-out), background-color .25s;
}
.vsl-hit:hover .vsl-start { transform: translateY(-2px); background: rgba(32, 24, 19, .82); }
.vsl-start-text { display: grid; gap: 1px; }
@media (min-width: 560px) {
  .vsl-poster { padding: 0 20px 20px; }
}
.vsl-cta {
  color: var(--cream);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}
.vsl-start-sub {
  font-size: 12.5px;
  color: rgba(246, 242, 236, .72);
  font-variant-numeric: tabular-nums;
}


/* pausado / fim */
.vsl-paused {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(43, 33, 27, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cream);
}
.vsl-play-sm { width: 58px; height: 58px; flex: none; }
.vsl-play-sm::before { display: none; }
.vsl-play-sm svg { width: 24px; height: 24px; }
.vsl-paused-text { font-size: 14px; font-weight: 600; }

/* carregando */
.vsl-spinner {
  display: grid;
  place-items: center;
  background: rgba(43, 33, 27, .35);
}
.vsl-spinner::after {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(246, 242, 236, .25);
  border-top-color: var(--cream);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.vsl-frame[data-state="idle"] .vsl-poster,
.vsl-frame[data-state="paused"] .vsl-paused,
.vsl-frame[data-state="ended"] .vsl-paused,
.vsl-frame[data-state="loading"] .vsl-spinner {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s var(--ease-out), visibility 0s;
}
.vsl-frame[data-state="loading"] .vsl-poster { opacity: 1; visibility: visible; }
.vsl-frame[data-state="loading"] .vsl-poster .vsl-start { opacity: 0; }

/* progresso fake */
.vsl-bar {
  position: relative;
  height: 3px;
  margin: 12px 0 0;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.vsl-bar span {
  position: absolute;
  inset: 0;
  background: var(--caramel);
  border-radius: inherit;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s linear;
}

.vsl-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.vsl-note svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Oferta
   ========================================================================== */

.offer {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 40px;
}
.offer.is-revealing > * {
  animation: offer-in .9s var(--ease-out) both;
}
.offer.is-revealing > *:nth-child(2) { animation-delay: .12s; }
.offer.is-revealing > *:nth-child(3) { animation-delay: .22s; }
.offer.is-revealing > *:nth-child(n+4) { animation-delay: .3s; }
@keyframes offer-in {
  from { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 30% 0 round 16px); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); }
}

.offer-lead { text-align: center; }
.offer-kicker-line {
  width: 1px;
  height: 36px;
  margin: 0 auto 18px;
  background: linear-gradient(var(--line), var(--caramel));
}
.offer-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 7.8vw, 38px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin-bottom: 22px;
}
.offer-title em { color: var(--caramel-ink); font-weight: 500; }

.btn-buy {
  flex-direction: column;
  gap: 3px;
  min-height: 72px;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 16px 30px -14px rgba(43, 33, 27, .7);
  animation: pulse 4s var(--ease-out) infinite 1.2s;
}
.btn-buy:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(43, 33, 27, .8); }
.btn-buy:active { transform: scale(.975); }
.btn-buy-main {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.btn-buy-sub {
  font-size: 13.5px;
  font-weight: 400;
  color: #E3D5C3;
  letter-spacing: .01em;
}
@keyframes pulse {
  0% { box-shadow: 0 16px 30px -14px rgba(43, 33, 27, .7), 0 0 0 0 rgba(176, 138, 91, .55); scale: 1; }
  7% { scale: 1.025; }
  14% { scale: 1; }
  24% { box-shadow: 0 16px 30px -14px rgba(43, 33, 27, .7), 0 0 0 14px rgba(176, 138, 91, 0); }
  100% { box-shadow: 0 16px 30px -14px rgba(43, 33, 27, .7), 0 0 0 0 rgba(176, 138, 91, 0); }
}

.secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-3);
}
.secure svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.block { margin-top: 52px; }
.block-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin-bottom: 18px;
}

.gets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.gets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.5;
}
.gets-mark {
  position: relative;
  width: 14px;
  height: 14px;
  margin: 5px 0 0 4px;
  transform: rotate(45deg);
  border: 1.5px solid var(--caramel);
}
.gets-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--caramel);
}

/* garantia */
.guarantee {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.g-seal { width: 96px; height: 96px; color: var(--caramel-ink); }
.g-seal svg { width: 100%; height: 100%; overflow: visible; }
.g-seal .g-ring { animation: seal-spin 40s linear infinite; transform-origin: 50% 50%; }
@keyframes seal-spin { to { transform: rotate(360deg); } }
.g-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 4px;
}
.g-text { font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* sobre · campo madeira */
.about {
  margin: 52px calc(var(--gutter) * -1) 0;
  padding: 44px var(--gutter) 46px;
  background: var(--wood);
  color: var(--on-wood-2);
  position: relative;
}
.about p {
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 62ch;
}
.about p + p { margin-top: 14px; }
.about strong { color: var(--on-wood); font-weight: 500; }

.portrait-md {
  width: 88px;
  height: 88px;
  outline: 1px solid rgba(176, 138, 91, .6);
  outline-offset: 5px;
  margin: 0 0 22px 5px;
  background: var(--wood-2);
}
.portrait-md .portrait-mono { font-size: 34px; }

.about-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  color: var(--on-wood);
  margin-bottom: 18px;
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}
.faq-q:hover { color: var(--caramel-ink); }
.faq-icon {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: background-color .25s, border-color .25s;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.5px;
  margin: -.75px 0 0 -5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .35s var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 44px 18px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }

.offer-close {
  margin-top: 52px;
  text-align: center;
}
.close-line {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 20px;
}

/* rodapé */
.footer {
  margin-top: 56px;
  padding: 24px 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* ==========================================================================
   Barra fixa de compra
   ========================================================================== */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 242, 236, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-top: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .35s;
}
.sticky.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), visibility 0s;
}
.btn-buy-sticky {
  max-width: 520px;
  margin: 0 auto;
  min-height: 58px;
  padding: 9px 16px;
  animation: none;
}
.btn-buy-sticky .btn-buy-main { font-size: 15px; }
.btn-buy-sticky .btn-buy-sub { font-size: 12.5px; }

.noscript { padding: 40px 20px; text-align: center; }

/* ==========================================================================
   Telas maiores
   ========================================================================== */

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .topbar { height: 64px; }
  .brand { font-size: 19px; }
  .screen-intro { padding-top: 64px; }
  .btn { width: auto; min-width: 320px; margin-inline: auto; }
  .screen-feedback .btn-next { width: 100%; }
  .r-title { font-size: 36px; margin-top: 14px; }
  .r-title .sent { display: inline-block; text-wrap: balance; }

.r-bridge { font-size: 17px; }
  .vsl { margin-top: 26px; }
  .btn-buy { width: 100%; }
  .about { margin-inline: 0; border-radius: var(--radius-lg); padding: 48px 44px; }
  .guarantee { grid-template-columns: 110px 1fr; padding: 24px 28px; }
  .g-seal { width: 110px; height: 110px; }
}

@media (min-width: 720px) and (max-height: 820px) {
  .screen-result { max-width: 640px; }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .fan span { transform: rotate(var(--a)); }
  .fb-timer { display: none; }
  .fb-text { filter: none !important; }
}