/* Fix hidden attribute + pricing toggle class — must come first */
[hidden] { display: none !important; }
.price--hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   ANTI-OVERFLOW GLOBAL — prova de falhas em qualquer viewport
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe, svg { max-width: 100%; display: block; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); box-sizing: border-box; }


/*
 * Ecotrainer LP — CSS não-crítico
 * Produzido por: Carlos Código | Squad: landing-page-studio
 * Mobile-first: base 375px → 768px → 1200px
 * Exclusivamente CSS custom properties do design system — zero valores hardcoded
 */

/* ═══════════════════════════════════════════════════════════
   UTILITÁRIOS GLOBAIS
════════════════════════════════════════════════════════════ */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
strong { font-weight: var(--weight-semibold); }

.section {
  padding: var(--space-12) 0;
}
.section__tag {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  text-align: center;
}
.section__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--leading-snug);
  text-align: center;
  margin-bottom: var(--space-4);
  max-width: var(--container-text);
  margin-left: auto;
  margin-right: auto;
}
.section__title--display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.section__sub {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: var(--container-text);
  margin-left: auto;
  margin-right: auto;
}
.section__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: var(--container-text);
  margin: 0 auto var(--space-8);
  text-align: center;
}
.container--narrow {
  max-width: var(--container-narrow);
}

/* ═══════════════════════════════════════════════════════════
   BOTÕES — tamanhos adicionais
════════════════════════════════════════════════════════════ */
.btn-primary--lg,
.btn-ghost--lg {
  padding: 18px 40px;
  font-size: var(--text-body);
}

/* ═══════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero__visual {
  margin-top: var(--space-6);
}
.hero__screenshot {
  width: 100%;
  max-width: 680px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card), var(--shadow-glow-lg);
}
.hero-product {
  position: relative;
  overflow: visible;
  padding: 62px 18px 18px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(241, 206, 118, 0.20), rgba(8, 11, 20, 0.94) 34%, rgba(16, 19, 28, 0.98)),
    var(--color-bg-elevated, var(--color-bg-secondary));
  border: 1px solid rgba(241, 206, 118, 0.18);
  box-shadow: var(--shadow-card), 0 32px 120px rgba(206, 170, 68, 0.12);
  transform-style: preserve-3d;
}
.hero-product::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(560px circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%), rgba(241, 206, 118, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%);
  opacity: 0.72;
  z-index: 0;
}
.hero-product__scene {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(8, 11, 20, 0.24), rgba(8, 11, 20, 0.92)),
    url("assets/bg-gym.jpg") center / cover;
  opacity: 0.18;
  z-index: 0;
}
.hero-product__chrome {
  position: absolute;
  top: 20px;
  left: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: rgba(8, 11, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
}
.hero-product__chrome span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  opacity: 0.72;
}
.hero-product .hero__screenshot {
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1920 / 957;
  object-fit: contain;
  background: #f3f6f9;
  border-radius: var(--radius-sm);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
}
.hero-product__phone {
  position: absolute;
  right: -20px;
  bottom: -38px;
  z-index: 3;
  width: clamp(120px, 24vw, 178px);
  padding: 8px;
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(241, 206, 118, 0.30), rgba(8, 11, 20, 0.96) 42%);
  border: 1px solid rgba(241, 206, 118, 0.24);
  box-shadow: 0 24px 64px rgba(0,0,0,0.56), var(--shadow-glow-accent);
}
.hero-product__phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 867;
  object-fit: contain;
  border-radius: 20px;
  border: 0;
  box-shadow: none;
}
.hero-product__signal {
  position: absolute;
  z-index: 4;
  min-width: 168px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(8, 11, 20, 0.76);
  border: 1px solid rgba(241, 206, 118, 0.18);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}
.hero-product__signal span {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.hero-product__signal strong {
  display: block;
  margin-top: 2px;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}
.hero-product__signal--time {
  left: -18px;
  bottom: 34px;
}
.hero-product__signal--retention {
  right: 34px;
  top: 74px;
}
[data-tilt-card] {
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateZ(0);
  transition: transform 220ms ease-out;
  will-change: transform;
}

@media (min-width: 1200px) {
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-4) var(--space-8);
    align-items: center;
  }
  .hero__tag      { grid-column: 1; grid-row: 1; }
  .hero__headline { grid-column: 1; grid-row: 2; }
  .hero__sub      { grid-column: 1; grid-row: 3; }
  .hero__ctas     { grid-column: 1; grid-row: 4; }
  .hero__social-proof { grid-column: 1; grid-row: 5; }
  .hero__visual   { grid-column: 2; grid-row: 1 / 6; margin-top: 0; }
  .hero__screenshot { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   PROBLEMA
════════════════════════════════════════════════════════════ */
.section--problem {
  background: var(--color-bg-secondary);
}
.section--problem .section__title {
  text-align: left;
  margin-left: 0;
}
.problem-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: var(--container-text);
}
.problem-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.problem-item__icon {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: var(--weight-heading);
  flex-shrink: 0;
  line-height: 1.55;
}
.problem-item strong {
  color: var(--color-text-primary);
}
.problem-transition {
  font-size: var(--text-h3);
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: var(--leading-snug);
  max-width: var(--container-text);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════
   TRAÇÃO
════════════════════════════════════════════════════════════ */
.section--traction {
  padding: var(--space-8) 0;
  text-align: center;
}
.traction__claim {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}
.traction__claim strong { color: var(--color-text-primary); }
.traction__rating { display: inline-block; margin-left: var(--space-2); }
.traction__stars { color: var(--color-accent); }


/* ═══════════════════════════════════════════════════════════
   SOLUÇÃO
════════════════════════════════════════════════════════════ */
.section--solution {
  background: var(--color-bg-secondary);
}
.solution-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  max-width: var(--container-max);
  margin: 0 auto;
}
.solution-module {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.solution-module:hover {
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
}
.solution-module__icon {
  display: block;
  width: 36px; height: 36px;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}
.solution-module__icon svg { width: 36px; height: 36px; }
.solution-module h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.solution-module p {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .solution-modules { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   FLUXO OPERACIONAL
════════════════════════════════════════════════════════════ */
.section--workflow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 85% 40%, rgba(206,170,68,0.08), transparent 62%),
    var(--color-bg-primary);
}
.workflow-shell {
  display: grid;
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-8);
}
.workflow-steps {
  display: grid;
  gap: var(--space-2);
}
.workflow-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-2);
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(16, 19, 28, 0.74);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.workflow-step:hover,
.workflow-step--active {
  border-color: var(--color-border-accent);
  background: rgba(206, 170, 68, 0.08);
  transform: translateY(-2px);
}
.workflow-step span {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--color-accent);
}
.workflow-step strong {
  font-size: var(--text-body-sm);
}
.workflow-step small {
  font-size: var(--text-caption);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.workflow-preview {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(241,206,118,0.18), rgba(8,11,20,0.96) 36%),
    var(--color-bg-secondary);
  border: 1px solid rgba(241,206,118,0.16);
  box-shadow: var(--shadow-card), var(--shadow-glow-lg);
}
.workflow-preview::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.workflow-panel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.workflow-panel--active {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.workflow-panel img {
  max-height: 460px;
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 70px rgba(0,0,0,0.48);
}
.workflow-showcase {
  position: relative;
  width: 100%;
  min-height: 390px;
  display: grid;
  place-items: center;
}
.workflow-browser {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  padding: 28px 10px 10px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(241,206,118,0.14), rgba(8,11,20,0.94) 32%),
    var(--color-bg-primary);
  border: 1px solid rgba(241,206,118,0.16);
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
}
.workflow-browser__bar {
  position: absolute;
  top: 9px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  height: 14px;
  align-items: center;
}
.workflow-browser__bar span {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  opacity: 0.8;
}
.workflow-panel .workflow-browser img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 1920 / 957;
  object-fit: contain;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  background: #f3f6f9;
}
.workflow-phone-card {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: -10px;
  width: clamp(116px, 19vw, 166px);
  padding: 7px;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(241,206,118,0.28), rgba(8,11,20,0.96) 44%);
  border: 1px solid rgba(241,206,118,0.24);
  box-shadow: 0 22px 58px rgba(0,0,0,0.56), var(--shadow-glow-accent);
}
.workflow-panel .workflow-phone-card img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}
.workflow-showcase--phone-focus {
  grid-template-columns: 0.82fr 1.18fr;
  gap: var(--space-3);
}
.workflow-showcase--phone-focus .workflow-phone-card--large {
  position: relative;
  inset: auto;
  width: clamp(166px, 26vw, 242px);
  justify-self: end;
}
.workflow-showcase--phone-focus .workflow-browser--ghost {
  width: min(100%, 430px);
  justify-self: start;
  opacity: 0.62;
  transform: translateX(-10px) scale(0.92);
}
.workflow-showcase--assessment .workflow-browser img {
  object-position: center top;
}
@media (min-width: 1024px) {
  .workflow-shell {
    grid-template-columns: minmax(320px, 0.78fr) 1.22fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   BENEFÍCIOS
════════════════════════════════════════════════════════════ */
.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}
.benefit:last-child { border-bottom: none; margin-bottom: 0; }
.benefit__number {
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--color-accent);
  opacity: 0.4;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.benefit__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-heading);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.benefit__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}
.benefit__result {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-2);
  line-height: var(--leading-snug);
}
.benefit__result strong { color: var(--color-accent); }
.benefit__visual img {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  width: 100%;
}
.phone-mockup {
  position: relative;
  width: min(100%, 318px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(241, 206, 118, 0.34), rgba(8, 8, 32, 0.88) 34%, rgba(32, 32, 32, 0.96)),
    var(--color-bg-elevated);
  border: 1px solid rgba(241, 206, 118, 0.28);
  box-shadow: var(--shadow-card), var(--shadow-glow-accent);
}
.phone-mockup::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 2;
  width: 88px;
  height: 20px;
  border-radius: 0 0 14px 14px;
  background: #080820;
  transform: translateX(-50%);
  box-shadow: inset 0 -1px 0 rgba(241, 206, 118, 0.12);
}
.phone-mockup__screen {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: #ece7dc;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.benefit__visual .benefit__image--phone {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border: 0;
  border-radius: 30px;
  box-shadow: none;
}
.desktop-mockup {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto 18px;
  padding: 10px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(241, 206, 118, 0.26), rgba(8, 8, 32, 0.92) 30%, rgba(32, 32, 32, 0.98)),
    var(--color-bg-elevated);
  border: 1px solid rgba(241, 206, 118, 0.2);
  box-shadow: var(--shadow-card), var(--shadow-glow-lg);
}
.desktop-mockup::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -15px;
  height: 16px;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, rgba(36, 36, 46, 0.96), rgba(8, 8, 32, 0.98));
  border: 1px solid rgba(241, 206, 118, 0.12);
  border-top: 0;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32);
}
.desktop-mockup__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border-radius: 16px 16px 0 0;
  background: rgba(8, 8, 32, 0.94);
  border-bottom: 1px solid rgba(241, 206, 118, 0.1);
}
.desktop-mockup__bar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent);
  opacity: 0.75;
}
.desktop-mockup__screen {
  overflow: hidden;
  border-radius: 0 0 16px 16px;
  background: #f2f5f8;
}
.benefit__visual .benefit__image--desktop {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: none;
}

@media (min-width: 1200px) {
  .benefit {
    flex-direction: row;
    align-items: center;
    gap: var(--space-12);
  }
  .benefit--reversed { flex-direction: row-reverse; }
  .benefit__text { flex: 1; }
  .benefit__visual { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════
   DEMO
════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   EXPERIÊNCIA DO ALUNO
════════════════════════════════════════════════════════════ */
.section--student {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 70% at 20% 50%, rgba(206,170,68,0.08), transparent 64%),
    var(--color-bg-secondary);
}
.student-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.student-copy .section__tag,
.student-copy .section__title,
.student-copy .section__body {
  text-align: left;
  margin-left: 0;
}
.student-points {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.student-point {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(8, 11, 20, 0.46);
}
.student-point strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}
.student-point span {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}
.student-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}
.student-visual::before {
  content: "";
  position: absolute;
  width: min(76vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(241,206,118,0.14), rgba(206,170,68,0.02) 48%, transparent 70%);
  filter: blur(2px);
}
.student-phone {
  position: absolute;
  width: min(58vw, 252px);
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(241,206,118,0.30), rgba(8,11,20,0.96) 42%);
  border: 1px solid rgba(241,206,118,0.22);
  box-shadow: 0 28px 80px rgba(0,0,0,0.52), var(--shadow-glow-accent);
}
.student-phone img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 24px;
  border: 0;
  box-shadow: none;
}
.student-phone--front {
  z-index: 2;
  width: min(58vw, 246px);
  transform: translateX(-58px) rotate(-4deg);
}
.student-phone--back {
  z-index: 1;
  width: min(58vw, 238px);
  opacity: 0.82;
  transform: translateX(104px) translateY(28px) rotate(6deg) scale(0.94);
}
.student-phone--back::after {
  content: "";
  position: absolute;
  top: 11.8%;
  left: 26%;
  right: 18%;
  height: 3.2%;
  border-radius: 999px;
  background: rgba(45, 35, 18, 0.78);
  backdrop-filter: blur(8px);
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .student-grid {
    grid-template-columns: 0.95fr 1.05fr;
  }
}

.section--demo {
  background:
    linear-gradient(180deg, var(--color-bg-primary), var(--color-bg-secondary));
  text-align: center;
}
.demo-cinema {
  position: relative;
  margin-top: var(--space-8);
  padding: var(--space-2);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(241,206,118,0.20), rgba(8,11,20,0.96) 34%),
    var(--color-bg-primary);
  border: 1px solid rgba(241,206,118,0.18);
  box-shadow: var(--shadow-card), 0 40px 140px rgba(0,0,0,0.42);
}
.demo-cinema__media {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #05070d;
  aspect-ratio: 3 / 2;
}
.demo__img {
  width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.demo__tour {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  background: #050402;
  box-shadow: none;
}
.demo-cinema__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,11,20,0.12), transparent 32%, rgba(206,170,68,0.10) 62%, transparent),
    radial-gradient(ellipse 72% 50% at 50% 100%, rgba(206,170,68,0.12), transparent 70%);
}
.demo-cinema__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.demo-cinema__play span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(8,11,20,0.62);
  border: 1px solid rgba(241,206,118,0.32);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-glow-accent);
  position: relative;
}
.demo-cinema__play span::after {
  content: "";
  position: absolute;
  left: 31px;
  top: 24px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 19px solid var(--color-accent);
}
.demo-cinema__timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1) 0;
}
.demo-cinema__timeline span {
  position: relative;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-align: center;
  padding-top: var(--space-2);
}
.demo-cinema__timeline span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(206,170,68,0.12), var(--color-accent), rgba(206,170,68,0.12));
}

/* ═══════════════════════════════════════════════════════════
   DEPOIMENTOS EM VÍDEO
════════════════════════════════════════════════════════════ */
.video-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (min-width: 640px) {
  .video-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .video-testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

.video-testimonial {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.video-testimonial:hover,
.video-testimonial:focus-within {
  border-color: var(--color-border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  outline: none;
}
.video-testimonial:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Thumbnail + play overlay */
.video-testimonial__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-tertiary);
}
.video-testimonial__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
.video-testimonial:hover .video-testimonial__thumb img {
  transform: scale(1.04);
}
.video-testimonial__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}
.video-testimonial:hover .video-testimonial__play svg circle {
  fill: rgba(0,0,0,0.75);
}
.video-testimonial__duration {
  position: absolute;
  bottom: 8px; right: 10px;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
}

/* Info abaixo do thumb */
.video-testimonial__info {
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.video-testimonial__name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
}
.video-testimonial__role {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.video-testimonial__result {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.video-testimonial__result strong { color: var(--color-accent); }

/* Modal de vídeo */
.video-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.video-modal[hidden] { display: none; }
.video-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.video-modal__content {
  position: relative;
  width: 90vw;
  max-width: 900px;
  z-index: 1;
}
.video-modal__close {
  position: absolute;
  top: -44px; right: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.video-modal__close:hover { color: var(--color-accent); border-color: var(--color-border-accent); }
.video-modal__iframe-wrap {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
}
.video-modal__iframe-wrap iframe {
  width: 100%; height: 100%; display: block; border: none;
}

/* ═══════════════════════════════════════════════════════════
   FEATURES
════════════════════════════════════════════════════════════ */
.section--features {
  background: var(--color-bg-secondary);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}
.feature-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.feature-card:hover {
  border-color: var(--color-border-accent);
  transform: translateY(-2px);
}
.feature-card__icon {
  display: block;
  width: 32px; height: 32px;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}
.feature-card__icon svg { width: 32px; height: 32px; }
.feature-card__title {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}
.feature-card__desc {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   PRICING TOGGLE (Mensal / Anual) — centralizado e limpo
════════════════════════════════════════════════════════════ */
.section--pricing {
  padding-top: var(--space-10);
}

.section--pricing .section__tag {
  margin-bottom: var(--space-1);
}

.section--pricing .section__title {
  margin-bottom: var(--space-3);
}

.section--pricing .section__sub {
  margin-bottom: var(--space-5);
}

.pricing-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
}
.pricing-toggle__row {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 66px;
}
.pricing-toggle__pill {
  display: inline-flex;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.pricing-toggle__btn {
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  padding: 9px 22px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.pricing-toggle__btn--active {
  background: var(--gradient-cta);
  color: var(--color-text-on-accent);
  font-weight: var(--weight-semibold);
}
.pricing-annual-hint {
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  width: 188px;
  min-height: 58px;
  transform: translateY(-50%);
  color: var(--color-accent);
  pointer-events: none;
}
.pricing-annual-hint__arrow {
  position: absolute;
  left: -112px;
  top: 25px;
  width: 132px;
  height: 54px;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.36));
}
.pricing-annual-hint__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
}
.pricing-annual-hint__line {
  stroke-dasharray: 2.5 6;
}
.pricing-annual-hint__head {
  stroke-dasharray: none;
}
.pricing-annual-hint__dot {
  fill: currentColor;
  opacity: 0.88;
}
.pricing-annual-hint__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(217, 170, 58, 0.32);
  background:
    linear-gradient(180deg, rgba(217, 170, 58, 0.14), rgba(217, 170, 58, 0.055)),
    rgba(8, 11, 20, 0.82);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: 1;
  white-space: nowrap;
}
.pricing-annual-hint__copy strong {
  color: var(--color-accent);
  font-weight: var(--weight-heading);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-annual-hint.is-visible .pricing-annual-hint__copy {
  border-color: var(--color-border-accent);
  background: var(--gradient-cta);
  color: var(--color-text-on-accent);
}
.pricing-annual-hint.is-visible .pricing-annual-hint__copy strong {
  color: var(--color-text-on-accent);
}
.pricing-annual-hint.is-visible .pricing-annual-hint__arrow {
  color: rgba(255, 247, 226, 0.92);
}
.pricing-guarantee--toggle {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: var(--container-text);
  margin: 0 auto var(--space-8);
  line-height: var(--leading-relaxed);
  display: none;
}
/* Mostrado apenas quando anual está ativo — via JS add/remove class */
.pricing-guarantee--toggle.is-visible { display: block; }

/* Price switching — JS toggle 'hidden' attribute */
.pricing-card__price-wrap { margin: var(--space-1) 0; }
.pricing-card__cents {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  vertical-align: super;
  line-height: 1;
}
.pricing-card__annual-bonus {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-accent);
  background: var(--gradient-cta);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-top: 4px;
}

/* Pricing free tier note */
.pricing-free {
  text-align: center;
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.pricing-free p {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}
.pricing-roi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  max-width: 920px;
  margin: 0 auto var(--space-3);
}
.pricing-roi div {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent),
    rgba(8, 11, 20, 0.46);
}
.pricing-roi span {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.pricing-roi strong {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .pricing-roi { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   PREÇOS
════════════════════════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.pricing-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}
.pricing-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow-accent);
}
.pricing-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-cta);
  color: var(--color-text-on-accent);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pricing-card__plan {
  font-weight: var(--weight-heading);
  font-size: var(--text-h3);
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}
.pricing-card__currency {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  align-self: flex-start;
  margin-top: 6px;
}
.pricing-card__value {
  font-size: var(--text-h1);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-tight);
}
.pricing-card__period {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}
.pricing-card__desc {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}
.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.pricing-card__features li {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.pricing-card__features li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.pricing-card .btn-primary,
.pricing-card .btn-ghost {
  width: 100%;
  justify-content: center;
}
.pricing-guarantee {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: var(--container-text);
  margin: 0 auto;
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   FAQ / OBJEÇÕES
════════════════════════════════════════════════════════════ */
.section--faq { background: var(--color-bg-secondary); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
}
.faq-card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--transition-fast);
}
.faq-card:hover { border-color: var(--color-border-accent); }
.faq-card__question {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
}
.faq-card__answer {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════
   CTA FINAL
════════════════════════════════════════════════════════════ */
.section--cta-final {
  text-align: center;
  background: var(--color-bg-secondary);
  position: relative;
  overflow: hidden;
}
.section--cta-final::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    rgba(206, 170, 68, 0.08),
    transparent
  );
}
.cta-final__title {
  margin-bottom: var(--space-4);
}
.cta-final__sub {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}
.cta-final__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-4);
}
@media (min-width: 480px) {
  .cta-final__actions { flex-direction: row; justify-content: center; }
}
.cta-final__guarantee {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.footer {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.footer__logo img { opacity: 0.6; transition: opacity var(--transition-fast); }
.footer__logo:hover img { opacity: 1; }
.footer__copy {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}
.footer__links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.footer__links a {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer__links a:hover { color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════════
   ANIMAÇÕES — Estados CSS
   (JS em animations.js gerencia as classes)
════════════════════════════════════════════════════════════ */

/* Page load (hero) */
.animate-load {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.animate-load.is-loaded { opacity: 1; transform: translateY(0); }

/* Scroll-triggered */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-enter), transform var(--transition-enter);
}
.animate-on-scroll[data-anim-dir] {
  transform: translateX(var(--anim-from-x, 0)) translateY(24px);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* Reveal dramático — fade + translate (sem clip-path que cria gaps visuais) */
.reveal-dramatic {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-dramatic.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax */
.has-parallax {
  transform: translateY(calc(var(--scroll-y, 0px) * calc(var(--parallax-factor, 0.1) * -1)));
  will-change: transform;
}
@media (max-width: 767px) {
  .has-parallax { transform: none !important; }
}

/* prefers-reduced-motion — respeito incondicional */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll, .animate-load, .reveal-dramatic, .has-parallax {
    transition: none !important; animation: none !important;
    transform: none !important; opacity: 1 !important; clip-path: none !important;
  }
  .hero::after { display: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════
   HERO — fundo com textura dourada suave
════════════════════════════════════════════════════════════ */
.hero {
  background:
    radial-gradient(ellipse 70% 50% at 75% 50%, rgba(206,170,68,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 15% 30%, rgba(206,170,68,0.04) 0%, transparent 60%),
    var(--color-bg-primary);
}

/* Seção problema — foto real de personal trainer como background */
.section--problem {
  position: relative;
  background-color: var(--color-bg-primary);
  overflow: hidden;
}
.section--problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/bg-gym.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  opacity: 0.12;
  z-index: 0;
}
.section--problem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 11, 20, 0.85) 0%,
    rgba(16, 19, 28, 0.75) 50%,
    rgba(8, 11, 20, 0.90) 100%
  );
  z-index: 0;
}
.section--problem .container { position: relative; z-index: 1; }

/* CTA final — glow dourado de profundidade */
.section--cta-final {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(206,170,68,0.08) 0%, transparent 70%),
    var(--color-bg-secondary);
}

/* ═══════════════════════════════════════════════════════════
   HERO TITLE — tamanho ajustado
════════════════════════════════════════════════════════════ */
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: var(--container-narrow);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════
   HERO — fundo com textura dourada suave
════════════════════════════════════════════════════════════ */
.hero {
  background:
    radial-gradient(ellipse 70% 50% at 75% 50%, rgba(206,170,68,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 80% at 15% 30%, rgba(206,170,68,0.04) 0%, transparent 60%),
    var(--color-bg-primary);
}
.section--cta-final {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(206,170,68,0.08) 0%, transparent 70%),
    var(--color-bg-secondary);
}

/* ═══════════════════════════════════════════════════════════
   PRICING TOGGLE NOTE
════════════════════════════════════════════════════════════ */
.pricing-guarantee--toggle {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  max-width: var(--container-text);
  margin: 0 auto var(--space-8);
  line-height: var(--leading-relaxed);
  display: none;
}
.pricing-guarantee--toggle.is-visible { display: block; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE — PROVA DE FALHAS
   Estratégia: force column em tudo abaixo de 1024px
   Anti-overflow em cada elemento
════════════════════════════════════════════════════════════ */

/* ── Força hero em coluna abaixo de 1024px ── */
@media (max-width: 1023px) {
  .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .hero__visual { order: 1; width: 100%; }
  .hero__screenshot { max-width: 100%; height: auto; }
  .hero-product { margin-bottom: var(--space-5, 40px); }
  .hero-product__phone { right: 8px; bottom: -32px; }
  .hero-product__signal--time { left: 10px; bottom: 18px; }
  .hero-product__signal--retention { right: 18px; top: 62px; }
}

/* ── Benefícios em coluna abaixo de 1024px ── */
@media (max-width: 1023px) {
  .benefit, .benefit--reversed {
    flex-direction: column !important;
    gap: var(--space-4) !important;
  }
  .benefit__visual { order: -1 !important; width: 100%; }
  .benefit__visual img { width: 100%; height: auto; border-radius: var(--radius-md); }
  .benefit__visual .benefit__image--phone {
    width: 100%;
    border: 0;
    border-radius: 30px;
    box-shadow: none;
  }
  .benefit__visual .benefit__image--desktop {
    border: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: none;
  }
}

/* ── Pricing em 1 coluna abaixo de 1024px ── */
@media (max-width: 1023px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing-card--featured { order: -1; }
}

/* ── Tablet — 768px a 1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { padding: 96px var(--space-4) var(--space-10); }
  .hero__headline { font-size: clamp(2rem, 3.5vw, 2.8rem); }
  .section__title { font-size: clamp(1.5rem, 3vw, 2rem); }
  .video-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile — até 767px ── */
@media (max-width: 767px) {
  /* Globals */
  .section { padding: var(--space-8) 0; }
  .container { padding: 0 var(--space-2); }
  .section__title { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .section__title--display { font-size: clamp(1.5rem, 6vw, 2rem); }
  .section__sub { font-size: var(--text-body-sm); padding: 0 var(--space-1); }
  .section__body { font-size: var(--text-body-sm); }

  /* Navbar — não deixa overflow */
  .navbar { padding: var(--space-2) var(--space-2); gap: var(--space-1); }
  .navbar__logo img { height: 26px; }
  .navbar__actions { gap: var(--space-1); }
  .btn-ghost { padding: 9px 12px; font-size: 0.78rem; white-space: nowrap; }
  .btn-primary { padding: 9px 14px; font-size: 0.78rem; white-space: nowrap; }

  /* Hero */
  .hero { padding: 76px var(--space-2) var(--space-8); }
  .hero__tag { font-size: 0.7rem; }
  .hero__headline { font-size: clamp(1.6rem, 7vw, 2.2rem); max-width: 100%; }
  .hero__sub { font-size: var(--text-body-sm); max-width: 100%; }
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn-primary,
  .hero__ctas .btn-ghost { width: 100%; justify-content: center; font-size: var(--text-body-sm); }
  .hero__social-proof { flex-wrap: wrap; font-size: 0.78rem; }

  /* Seção problema */
  .section--problem .section__title { text-align: left; font-size: 1.2rem; }
  .problem-item { gap: var(--space-2); font-size: var(--text-body-sm); }
  .problem-transition { font-size: var(--text-body-sm); }

  /* Solução */
  .solution-modules { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .solution-module { padding: var(--space-2); }
  .solution-module h3 { font-size: var(--text-body-sm); }
  .solution-module p { font-size: var(--text-caption); }

  /* Benefícios */
  .benefit { margin-bottom: var(--space-6); padding-bottom: var(--space-6); }
  .benefit__number { font-size: 3rem; }
  .benefit__title { font-size: 1.2rem; }
  .benefit__body { font-size: var(--text-body-sm); }
  .benefit__result { font-size: var(--text-caption); }

  /* Demo */
  .demo__img { border-radius: var(--radius-md); }
  .demo-cinema { border-radius: var(--radius-lg); padding: 8px; }
  .demo-cinema__media { aspect-ratio: 9 / 13; min-height: 520px; }
  .demo-cinema__media,
  .demo__img,
  .demo__tour { border-radius: var(--radius-md); }
  .demo-cinema__timeline { display: none; }

  /* Fluxo e app do aluno */
  .workflow-step { padding: var(--space-2); }
  .workflow-preview { min-height: 330px; padding: var(--space-2); border-radius: var(--radius-lg); }
  .workflow-panel img { max-height: 340px; }
  .workflow-showcase { min-height: 300px; }
  .workflow-browser {
    width: 100%;
    padding: 24px 8px 8px;
    border-radius: var(--radius-md);
  }
  .workflow-phone-card {
    width: 104px;
    right: 4px;
    bottom: -12px;
    padding: 5px;
    border-radius: 20px;
  }
  .workflow-panel .workflow-phone-card img {
    border-radius: 14px;
  }
  .workflow-showcase--phone-focus {
    grid-template-columns: 1fr;
    min-height: 330px;
  }
  .workflow-showcase--phone-focus .workflow-phone-card--large {
    justify-self: center;
    width: 150px;
  }
  .workflow-showcase--phone-focus .workflow-browser--ghost {
    position: absolute;
    width: 88%;
    opacity: 0.42;
    transform: translateY(10px) scale(0.92);
  }
  .student-copy .section__tag,
  .student-copy .section__title,
  .student-copy .section__body { text-align: center; margin-left: auto; }
  .student-visual { min-height: 430px; }
  .student-phone { width: min(52vw, 188px); }
  .student-phone--front { width: min(52vw, 182px); transform: translateX(-36px) rotate(-4deg); }
  .student-phone--back { width: min(52vw, 176px); transform: translateX(62px) translateY(18px) rotate(6deg) scale(0.92); }

  /* Hero produto */
  .hero-product {
    padding: 50px 10px 48px;
    border-radius: var(--radius-lg);
  }
  .hero-product__chrome { top: 14px; left: 10px; right: 10px; }
  .hero-product__phone {
    width: 118px;
    right: 10px;
    bottom: -22px;
    border-radius: 24px;
  }
  .hero-product__phone img { border-radius: 17px; }
  .hero-product__signal { display: none; }

  /* Depoimentos vídeo */
  .video-testimonials-grid { grid-template-columns: 1fr; gap: var(--space-2); }

  /* Features */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .feature-card { padding: var(--space-2); }
  .feature-card__icon {
  display: block;
  width: 32px; height: 32px;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}
.feature-card__icon svg { width: 32px; height: 32px; }
  .feature-card__title { font-size: var(--text-body-sm); }
  .feature-card__desc { font-size: var(--text-caption); }

  /* Pricing */
  .section--pricing {
    overflow-x: hidden;
  }
  .section--pricing .section__title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .pricing-free .btn-ghost {
    width: min(100%, 320px);
    line-height: 1.35;
  }
  .pricing-roi,
  .pricing-grid {
    width: 100%;
    max-width: 100%;
  }
  .section--pricing .pricing-grid {
    width: calc(100% - 16px);
  }
  .pricing-card {
    min-width: 0;
    width: min(342px, 100%);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  .pricing-card__desc {
    overflow-wrap: break-word;
  }
  .pricing-card .btn-primary,
  .pricing-card .btn-ghost {
    white-space: normal;
  }
  .pricing-toggle__row {
    min-height: auto;
    flex-direction: column;
    gap: var(--space-2);
  }
  .pricing-annual-hint {
    position: static;
    width: auto;
    min-height: auto;
    transform: none;
  }
  .pricing-annual-hint__arrow {
    display: none;
  }
  .pricing-annual-hint__copy {
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  .pricing-toggle__btn { padding: 8px 16px; font-size: var(--text-body-sm); }
  .pricing-card { padding: var(--space-3); }
  .pricing-card--featured {
    padding-top: calc(var(--space-3) + 28px);
  }
  .pricing-card--featured .pricing-card__badge {
    top: 12px;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pricing-card__value { font-size: var(--text-h2); }
  .pricing-card .btn-primary,
  .pricing-card .btn-ghost { font-size: var(--text-body-sm); }
  .pricing-free .btn-ghost { font-size: var(--text-body-sm); text-align: center; white-space: normal; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .faq-card__question { font-size: var(--text-body-sm); }
  .faq-card__answer { font-size: var(--text-caption); }

  /* CTA Final */
  .cta-final__title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .cta-final__sub { font-size: var(--text-body-sm); }
  .cta-final__actions { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .cta-final__actions .btn-primary,
  .cta-final__actions .btn-ghost { width: 100%; justify-content: center; }

  /* Footer */
  .footer__inner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
  .footer__links { justify-content: center; gap: var(--space-2); }

  /* Video modal */
  .video-modal__content { width: 95vw; }
  .video-modal__close { top: -38px; }
}

@media (max-width: 520px) {
  .navbar { padding-right: var(--space-4); }
  .navbar__actions .btn-ghost { display: none; }
  .navbar__actions .btn-primary { padding: 9px 12px; font-size: 0; }
  .navbar__actions .btn-primary::after {
    content: "Criar";
    font-size: 0.78rem;
  }
  .navbar__logo img { height: 24px; }
}

/* ── Extra small — até 390px ── */
@media (max-width: 390px) {
  .navbar__actions .btn-ghost { display: none; } /* Esconde "Entrar" em telas muito pequenas */
  .hero__headline { font-size: 1.5rem; }
  .section__title { font-size: 1.2rem; }
}