/* ==========================================================
   Obrevo: página de vendas (site-v1)
   Design system: OBREVO/LOGOS/obrevo-design-system.md (tokens da seção 13).
   Todas as cores, medidas e efeitos vêm dos tokens abaixo. Não criar token novo sem decisão do responsável.
   ========================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ob-ink: #170b46;
  --ob-primary: #7956d8;
  --ob-lilac: #b8a5f4;
  --ob-canvas: #f3efff;
  --ob-surface: #ffffff;
  --ob-text: var(--ob-ink);
  --ob-text-secondary: #625a75;
  --ob-border: #ddd5eb;
  --ob-control-border: #8b7da5;
  --ob-primary-hover: #6543bf;
  --ob-primary-active: #5535a7;
  --ob-success: #176447;
  --ob-success-bg: #eaf7f0;
  --ob-font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ob-space-1: .25rem;
  --ob-space-2: .5rem;
  --ob-space-3: .75rem;
  --ob-space-4: 1rem;
  --ob-space-6: 1.5rem;
  --ob-space-8: 2rem;
  --ob-space-12: 3rem;
  --ob-space-16: 4rem;
  --ob-space-20: 5rem;
  --ob-space-24: 6rem;

  --ob-radius-control: .75rem;
  --ob-radius-card: 1.25rem;
  --ob-radius-hero: 1.75rem;
  --ob-radius-pill: 999px;

  --ob-shadow-card: 0 4px 20px rgb(23 11 70 / 6%);
  --ob-shadow-raised: 0 16px 48px rgb(23 11 70 / 12%);
  --ob-gloss: linear-gradient(180deg, #7956d8, #6543bf);
  --ob-ease: cubic-bezier(.2, .8, .2, 1);
  --ob-duration-fast: 160ms;
  --ob-duration-panel: 240ms;
  --ob-container: 75rem;
  --ob-z-header: 20;

  /* Margem lateral e espaço entre seções: 20/32/48 px e 64/96 px (ajustados nos breakpoints) */
  --ob-gutter: 1.25rem;
  --ob-section: var(--ob-space-16);
}

@media (min-width: 640px)  { :root { --ob-gutter: 2rem; } }
@media (min-width: 1024px) { :root { --ob-gutter: 3rem; --ob-section: var(--ob-space-24); } }

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ob-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ob-text);
  background: var(--ob-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ob-primary-hover); }
strong { font-weight: 700; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ob-ink);
  outline-offset: 3px;
}

.ob-container {
  width: 100%;
  max-width: var(--ob-container);
  margin: 0 auto;
  padding: 0 var(--ob-gutter);
}

.ob-skip {
  position: absolute;
  left: var(--ob-space-4);
  top: -4rem;
  z-index: 60;
  padding: var(--ob-space-3) var(--ob-space-4);
  border-radius: var(--ob-radius-control);
  background: var(--ob-ink);
  color: #fff;
}
.ob-skip:focus { top: var(--ob-space-4); }

/* ---------- Tipografia (seção 5) ---------- */

.ob-display {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* Mobile: headline do hero menor, em 3 linhas */
@media (max-width: 639px) {
  .ob-hero .ob-display { font-size: clamp(1.25rem, 6.2vw, 1.75rem); }
}

.ob-title {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.ob-card-title {
  font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
}

.ob-intro {
  max-width: 40rem;
  font-size: clamp(1rem, .955rem + .2vw, 1.125rem);
  line-height: 1.55;
  color: var(--ob-text-secondary);
}

.ob-help { font-size: .875rem; line-height: 1.5; color: var(--ob-text-secondary); }

.ob-label {
  display: inline-block;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ob-primary-hover);
}

.ob-price { font-variant-numeric: tabular-nums; }

/* ---------- Botões (seção 8.1) ---------- */

.ob-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ob-space-2);
  min-height: 3.25rem; /* CTA de vendas: 52 px */
  padding: .75rem 1.5rem;
  border: 1px solid var(--ob-primary-hover);
  border-radius: var(--ob-radius-control);
  font: 600 1rem/1.4 var(--ob-font);
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: var(--ob-gloss);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 4px 12px rgb(23 11 70 / 14%);
  cursor: pointer;
  transition: transform var(--ob-duration-fast) var(--ob-ease);
}

.ob-button-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ob-primary-hover);
  transform: translateY(-1px);
}

.ob-button-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ob-primary-active);
  transform: translateY(0);
}

.ob-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .5rem 1.25rem;
  border: 1px solid var(--ob-control-border);
  border-radius: var(--ob-radius-control);
  font: 600 .9375rem/1.4 var(--ob-font);
  text-decoration: none;
  color: var(--ob-ink);
  background: var(--ob-surface);
  transition: background var(--ob-duration-fast) var(--ob-ease);
}
.ob-button-secondary:hover { background: var(--ob-canvas); }

.ob-button-block { width: 100%; }

/* ---------- Estrutura de seção ---------- */

.ob-section { padding: var(--ob-section) 0 0; }
.ob-section--canvas {
  margin-top: var(--ob-section);
  padding: var(--ob-section) 0;
  background: var(--ob-canvas);
}

.ob-heading { display: grid; gap: var(--ob-space-3); justify-items: center; text-align: center; }
.ob-heading--center { justify-items: center; text-align: center; }
.ob-heading .ob-title, .ob-heading .ob-intro { max-width: 40rem; }

/* ---------- Cabeçalho ---------- */

.ob-header {
  position: relative;
  z-index: var(--ob-z-header);
  background: var(--ob-surface);
  border-bottom: 1px solid var(--ob-border);
}

.ob-header .ob-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-space-4);
  min-height: 4rem;
}

.ob-logo { display: block; width: fit-content; margin: 0 auto; line-height: 0; border-radius: var(--ob-radius-control); }
.ob-logo img { width: auto; height: 2.5rem; }

/* ---------- Hero ---------- */

.ob-hero {
  padding: var(--ob-space-6) 0 0;
  background: radial-gradient(60rem 28rem at 85% 20%, var(--ob-canvas), rgb(255 255 255 / 0) 70%);
}

.ob-hero-grid { display: grid; gap: var(--ob-space-12); align-items: center; margin-top: var(--ob-space-12); }

.ob-hero-text { display: grid; gap: var(--ob-space-6); justify-items: center; text-align: center; max-width: 48rem; margin: 0 auto; }

.ob-hero-text .ob-button-primary { width: 100%; max-width: 22rem; }

.ob-hero-price { display: grid; gap: var(--ob-space-1); }
.ob-hero-price strong { font-size: 1.125rem; }
.ob-hero-price strong { white-space: nowrap; }
@media (max-width: 639px) { .ob-hero-price strong { font-size: clamp(.6875rem, 3.45vw, .9375rem); } }

/* Peça visual de destaque (glossy alta): o ícone da marca sobre um painel lavanda.
   Substituir pela demonstração real do construtor quando houver print ou vídeo. */
.ob-hero-visual {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 34rem;
  padding: var(--ob-space-6) var(--ob-space-3);
  margin: 0 auto;
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-hero);
  background:
    radial-gradient(22rem 16rem at 50% 45%, rgb(184 165 244 / 55%), rgb(184 165 244 / 0) 70%),
    var(--ob-canvas);
  box-shadow: var(--ob-shadow-raised);
}

/* Demonstração do construtor em vídeo (gravação real), dentro do painel lavanda. */
.ob-video {
  position: relative;
  width: min(100%, 17rem);
  border-radius: var(--ob-radius-card);
  overflow: hidden;
  box-shadow: var(--ob-shadow-raised);
  background: var(--ob-ink);
}
.ob-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }

.ob-video-sound {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-2);
  width: max-content;
  white-space: nowrap;
  padding: var(--ob-space-4) var(--ob-space-6);
  border: 0;
  border-radius: var(--ob-radius-pill);
  background: var(--ob-gloss);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  animation: ob-sound-pulse 1.8s var(--ob-ease) infinite;
}
.ob-video-sound svg { flex: none; }
.ob-video-sound:hover { background: var(--ob-primary-hover); }
.ob-video-sound[hidden] { display: none; }

@keyframes ob-sound-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 rgb(184 165 244 / 80%); }
  60%  { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 1.1rem rgb(184 165 244 / 0%); }
  100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 rgb(184 165 244 / 0%); }
}
@media (prefers-reduced-motion: reduce) { .ob-video-sound { animation: none; } }

.ob-video-toggle {
  position: absolute;
  right: var(--ob-space-3);
  bottom: var(--ob-space-3);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--ob-radius-pill);
  background: rgb(23 11 70 / 75%);
  color: #fff;
  cursor: pointer;
}
.ob-video-toggle:hover { background: var(--ob-ink); }
.ob-video-toggle .ob-video-play { display: none; }
.ob-video-toggle[aria-pressed="true"] .ob-video-pause { display: none; }
.ob-video-toggle[aria-pressed="true"] .ob-video-play { display: block; }

@media (min-width: 1024px) {
  .ob-hero { padding-top: var(--ob-space-8); }
  .ob-hero-grid { margin-top: var(--ob-space-16); }
}

/* ---------- Antes x Depois ---------- */

.ob-compare { display: grid; gap: var(--ob-space-6); margin-top: var(--ob-space-12); }

.ob-compare-col {
  padding: var(--ob-space-6);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  background: var(--ob-surface);
}

.ob-compare-after {
  border: 2px solid var(--ob-primary);
  background: linear-gradient(180deg, var(--ob-canvas), var(--ob-surface) 60%);
  box-shadow: var(--ob-shadow-raised);
}

.ob-compare-tag {
  display: inline-block;
  margin: 0 0 var(--ob-space-4);
  padding: var(--ob-space-1) var(--ob-space-3);
  border-radius: var(--ob-radius-pill);
  background: var(--ob-canvas);
  color: var(--ob-text-secondary);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.ob-compare-after .ob-compare-tag { background: var(--ob-primary); color: #fff; }

.ob-compare ul { display: grid; gap: var(--ob-space-4); }
.ob-compare li { display: flex; gap: var(--ob-space-3); align-items: flex-start; }
.ob-compare li svg { flex: none; margin-top: .15rem; }
.ob-compare-before li { color: var(--ob-text-secondary); }
.ob-compare-before li svg { color: var(--ob-control-border); }
.ob-compare-after li svg { color: var(--ob-success); }
.ob-compare-after li span { font-weight: 600; }

.ob-compare-cta { display: grid; gap: var(--ob-space-3); justify-items: center; margin-top: var(--ob-space-12); text-align: center; }
.ob-compare-cta .ob-button-primary { width: 100%; max-width: 22rem; }

@media (min-width: 768px) { .ob-compare { grid-template-columns: repeat(2, 1fr); align-items: start; } }
@media (min-width: 1024px) { .ob-compare-col { padding: var(--ob-space-8); } .ob-compare { gap: var(--ob-space-8); } }

/* ---------- Como funciona ---------- */

.ob-steps { display: grid; gap: var(--ob-space-6); margin-top: var(--ob-space-12); counter-reset: etapa; }

.ob-step {
  position: relative;
  padding: var(--ob-space-6);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  background: var(--ob-surface);
  box-shadow: var(--ob-shadow-card);
}

.ob-step-number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--ob-space-4);
  border-radius: var(--ob-radius-control);
  background: var(--ob-canvas);
  color: var(--ob-primary-hover);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ob-step p { margin-top: var(--ob-space-2); color: var(--ob-text-secondary); }

@media (min-width: 640px)  { .ob-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ob-step { padding: var(--ob-space-8); } .ob-steps { gap: var(--ob-space-8); } }

/* ---------- Para quem é ---------- */

.ob-segments {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ob-space-3);
  margin-top: var(--ob-space-12);
}

.ob-segment {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: var(--ob-space-4);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  background: var(--ob-ink);
  box-shadow: var(--ob-shadow-card);
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
}

.ob-segment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ob-segment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(23 11 70 / 0%) 55%, rgb(23 11 70 / 80%)); }
.ob-segment span { position: relative; z-index: 1; }

@media (min-width: 768px)  { .ob-segments { grid-template-columns: repeat(3, 1fr); gap: var(--ob-space-4); } }
@media (min-width: 1024px) { .ob-segment { font-size: 1.125rem; padding: var(--ob-space-6); } .ob-segments { gap: var(--ob-space-6); } }

/* ---------- Oferta ---------- */

.ob-offer {
  max-width: 34rem;
  margin: var(--ob-space-12) auto 0;
  padding: var(--ob-space-6);
  border: 2px solid var(--ob-primary);
  border-radius: var(--ob-radius-hero);
  background: linear-gradient(180deg, var(--ob-canvas), var(--ob-surface) 45%);
  box-shadow: var(--ob-shadow-raised);
}

@media (min-width: 1024px) { .ob-offer { padding: var(--ob-space-8); } }

.ob-offer-head { display: grid; gap: var(--ob-space-1); text-align: center; }
.ob-offer-name { font-size: 1.5rem; }
.ob-offer-head .ob-help { margin: 0; }

.ob-offer-pricebox {
  display: grid;
  justify-items: center;
  gap: var(--ob-space-2);
  margin-top: var(--ob-space-6);
  padding: var(--ob-space-6) var(--ob-space-4);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  background: var(--ob-surface);
  box-shadow: var(--ob-shadow-card);
  text-align: center;
}

/* R$ e 10 no mesmo tamanho, centralizados */
.ob-offer-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--ob-space-2);
  font-size: clamp(3.25rem, 2.6rem + 2.8vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.ob-offer-price span, .ob-offer-price strong { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: var(--ob-text); }
.ob-offer-terms { font-weight: 700; color: var(--ob-primary-hover); }

.ob-checklist {
  display: grid;
  margin: var(--ob-space-6) 0;
}
.ob-checklist li {
  display: flex;
  gap: var(--ob-space-4);
  align-items: flex-start;
  padding: var(--ob-space-4) 0;
  border-bottom: 1px solid var(--ob-border);
}
.ob-checklist li:first-child { padding-top: 0; }
.ob-checklist li:last-child { border-bottom: 0; padding-bottom: 0; }

.ob-check-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ob-radius-control);
  background: var(--ob-success-bg);
  color: var(--ob-success);
}
.ob-check-icon svg { width: 1.5rem; height: 1.5rem; }

.ob-check-text { display: block; padding-top: .3rem; line-height: 1.4; }
.ob-check-text strong { font-weight: 700; }

.ob-domain {
  display: block;
  width: fit-content;
  margin-top: var(--ob-space-2);
  padding: var(--ob-space-1) var(--ob-space-3);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-pill);
  background: var(--ob-canvas);
  color: var(--ob-primary-hover);
  font-size: .875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ob-offer .ob-help { margin-top: var(--ob-space-3); text-align: center; }
.ob-offer-head .ob-help { margin-top: 0; }

/* ---------- FAQ ---------- */

.ob-faq { max-width: 48rem; margin: var(--ob-space-12) auto 0; }
.ob-faq details { border-bottom: 1px solid var(--ob-border); }
.ob-faq details:first-child { border-top: 1px solid var(--ob-border); }

.ob-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-space-4);
  min-height: 3.5rem;
  padding: var(--ob-space-4) 0;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ob-faq summary::-webkit-details-marker { display: none; }
.ob-faq summary svg {
  flex: none;
  color: var(--ob-primary);
  transition: transform var(--ob-duration-panel) var(--ob-ease);
}
.ob-faq details[open] summary svg { transform: rotate(180deg); }
.ob-faq details p { max-width: 65ch; padding: 0 0 var(--ob-space-6); color: var(--ob-text-secondary); }

/* ---------- CTA final ---------- */

.ob-final { display: grid; gap: var(--ob-space-6); justify-items: center; text-align: center; }

/* ---------- Rodapé ---------- */

.ob-footer {
  margin-top: var(--ob-section);
  padding: var(--ob-space-12) 0;
  border-top: 1px solid var(--ob-border);
  text-align: center;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--ob-text-secondary);
}
.ob-footer p + p { margin-top: var(--ob-space-1); }

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ob-button-primary, .ob-faq summary svg { transition: none; }
  .ob-button-primary:hover { transform: none; }
}