/* ─────────────────────────────────────────────────────────────────────────
   sections.css — uma seção por bloco, na ordem da página.
   As media queries de cada seção ficam junto dela, não num bloco no fim.
   Faixas do contrato: >= 769px (desktop) · 450-768px · <= 449px.
   ───────────────────────────────────────────────────────────────────────── */

/* ── header: barra-pílula flutuante ─────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--gap-4);
  padding-bottom: var(--gap-2);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.header-bar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--gap-6);
  min-width: 0;
  padding: var(--gap-2) var(--gap-2) var(--gap-2) var(--gap-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.brand { white-space: nowrap; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  flex: none;
  text-decoration: none;
}

.brand__icon { width: 22px; height: 21px; }

.brand__name {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  margin-left: auto;
  min-width: 0;
}

.nav-desktop a { white-space: nowrap; }

.nav-desktop a {
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-small);
  text-decoration: none;
  transition: background-color var(--dur-hover) ease-out, color var(--dur-hover) ease-out;
}

.nav-desktop a:hover {
  background-color: var(--color-hover-soft);
  color: var(--color-heading);
}

.btn-header {
  flex: none;
  min-height: 40px;
  padding: var(--gap-2) var(--gap-4);
  font-size: var(--text-small);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: background-color var(--dur-hover) ease-out;
}

.nav-toggle:hover { background-color: var(--color-hover-soft); }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav-panel {
  width: min(100% - (var(--gutter) * 2), 320px);
  margin: var(--gap-2) 0 0 auto;
  margin-right: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  padding: var(--gap-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-card);
}

.nav-panel[hidden] { display: none; }

.nav-panel nav { display: flex; flex-direction: column; }

/* O seletor .nav-panel a tem especificidade maior que .btn-dark: o CTA do
   painel precisa recuperar o texto claro sobre o fundo preto. */
.nav-panel .nav-panel__cta { color: var(--btn-dark-text); }

.nav-panel nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--gap-3);
  border-radius: var(--radius-xs);
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color var(--dur-hover) ease-out;
}

.nav-panel nav a:hover { background-color: var(--color-hover-soft); }

.nav-panel__cta {
  width: 100%;
  margin-top: var(--gap-3);
}

@media (max-width: 1023px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-bar { justify-content: space-between; }
  .btn-header { margin-left: auto; }
}

.btn-header__short { display: none; }

/* Abaixo de 450px a pílula não comporta marca + CTA longo + botão de menu:
   o CTA encolhe para uma palavra e a marca fica só no letreiro. Sem isso o
   botão desliza para debaixo do botão de menu e some. */
@media (max-width: 449px) {
  .btn-header { padding: var(--gap-2) var(--gap-3); }
  .btn-header__full { display: none; }
  .btn-header__short { display: inline; }
  .brand__icon { display: none; }
  .header-bar { gap: var(--gap-2); padding-left: var(--gap-3); padding-right: var(--gap-1); }
  .nav-panel { width: calc(100% - (var(--gutter) * 2)); margin-inline: var(--gutter); }
}

@media (min-width: 1024px) {
  .nav-panel { display: none; }
}

/* ── hero ───────────────────────────────────────────────────────────────── */

[data-section="hero"] {
  padding-top: clamp(3rem, 1rem + 6vw, 5rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 3rem);
  overflow-x: clip;
}

/* fundo de pontos: recriação em CSS do canvas medido no hero da referência,
   com a paleta travada em vez do lilás da origem */
.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at center, var(--dot-accent) 1.5px, transparent 1.6px),
    radial-gradient(circle at center, var(--dot) 1.5px, transparent 1.6px),
    var(--fade-bottom);
  background-size: 96px 96px, 24px 24px, 100% 100%;
  background-position: 12px 12px, 0 0, 0 0;
  pointer-events: none;
}

.hero__icon {
  width: 88px;
  height: 84px;
  margin-bottom: var(--gap-8);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100% - (var(--gutter) * 2), var(--wrap-sm));
  margin-inline: auto;
  text-align: center;
}

[data-section="hero"] h1 { max-width: 15ch; }

.hero__lead {
  max-width: 52ch;
  margin-top: var(--gap-6);
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.hero__lead--tight {
  margin-top: var(--gap-3);
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}

.hero__cta { margin-top: var(--gap-3); }

.hero__note {
  margin-top: var(--gap-4);
  color: var(--color-muted);
  font-size: var(--text-small);
}

.tool-row {
  margin-top: var(--gap-12);
  width: 100%;
}

.tool-row__label {
  color: var(--color-muted);
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
}

.tool-row__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-3) var(--gap-6);
  margin-top: var(--gap-4);
}

.tool-row__list .tool-chip { white-space: nowrap; }

.tool-row__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  min-width: 0;
  padding: var(--gap-2) var(--gap-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-small);
}

.tool-row__list img { width: 20px; height: 20px; }

@media (max-width: 449px) {
  .tool-row { margin-top: var(--gap-8); }
  .tool-row__list { gap: var(--gap-2); }
  .tool-row__list li { padding: var(--gap-1) var(--gap-3); }
}

/* ── showcase: mídia de página inteira com entrada em escala ────────────── */

[data-section="showcase"] { padding-bottom: var(--space-section); }

.showcase {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  transform-origin: 50% 0;
}

.showcase__img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top center;
}

.showcase__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background-image: var(--fade-bottom);
  pointer-events: none;
}

.showcase__caption {
  margin-top: var(--gap-6);
  color: var(--color-muted);
  font-size: var(--text-small);
  text-align: center;
}

@media (max-width: 768px) {
  .showcase { border-radius: var(--radius-card); }
}

/* ── problema ───────────────────────────────────────────────────────────── */

.problem { text-align: center; }

.problem p {
  margin-top: var(--gap-6);
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.problem h2 { margin-bottom: var(--gap-8); }

.problem__turn {
  color: var(--color-heading);
  font-weight: var(--weight-medium);
}

/* ── comparação e público ───────────────────────────────────────────────── */

.comparison {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.comparison__card { padding: var(--gap-8); }

.comparison__title { margin-bottom: var(--gap-1); }

.comparison__sub {
  margin-bottom: var(--gap-6);
  color: var(--color-muted);
  font-size: var(--text-small);
}

.card--dark .comparison__sub { color: var(--color-on-surface-muted); }

.audience {
  display: grid;
  gap: var(--gap-8) var(--gap-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  margin-top: var(--gap-12);
  max-width: var(--wrap);
}

.audience__col { min-width: 0; }

.audience__label {
  margin-bottom: var(--gap-4);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
}

.audience .check-list li {
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: var(--leading-lead);
}

/* ── como funciona ──────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.step__icon {
  display: inline-flex;
  margin-bottom: var(--gap-6);
  color: var(--color-heading);
}

.step__icon .icon { width: 28px; height: 28px; }

.step__label {
  margin-bottom: var(--gap-2);
  color: var(--color-muted);
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
}

@media (min-width: 769px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── o que você recebe: bento ───────────────────────────────────────────── */

.bento {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.bento__item { justify-content: flex-start; }

.bento__item--wide { gap: var(--gap-8); }

.bento__body { min-width: 0; }

.bento__media {
  width: 100%;
  max-width: 320px;
  margin-top: auto;
  margin-inline: auto;
}

@media (min-width: 769px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento__item--wide {
    grid-column: span 2;
    grid-row: span 2;
    flex-direction: row;
    align-items: center;
  }
  .bento__media { margin-top: 0; max-width: 260px; }
}

@media (max-width: 768px) {
  .bento__media { max-width: 220px; margin-top: var(--gap-6); }
}

.entrega__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-6);
  margin-top: var(--gap-12);
  text-align: center;
}

.entrega__foot p {
  color: var(--color-muted);
  font-size: var(--text-lead);
}

/* ── vantagens ──────────────────────────────────────────────────────────── */

.benefits {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.benefit__icon {
  display: inline-flex;
  margin-bottom: var(--gap-6);
  color: var(--color-heading);
}

.benefit__icon .icon { width: 28px; height: 28px; }

@media (min-width: 769px) {
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 450px) and (max-width: 768px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── o diferencial: a única seção escura (tom medido na referência) ─────── */

[data-section="differential"] {
  background-color: var(--color-surface);
  color: var(--color-on-surface-muted);
}

[data-section="differential"] h2,
[data-section="differential"] h3 { color: var(--color-on-surface); }

[data-section="differential"] .eyebrow {
  background-color: var(--color-on-surface-soft);
  color: var(--color-on-surface-muted);
}

[data-section="differential"] .section-lead { color: var(--color-on-surface-muted); }

.title-accent { color: var(--color-accent); display: block; }

.layers {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: var(--gap-8);
  border: 1px solid var(--color-on-surface-border);
  border-radius: var(--radius-card);
  background-color: var(--color-on-surface-soft);
  text-align: center;
}

/* caixa de proporção fixa: as três ilustrações têm alturas diferentes e,
   sem ela, os títulos dos cartões param em linhas diferentes */
.layer img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.layer__title { margin-top: var(--gap-6); }

.layer__text {
  margin-top: var(--gap-3);
  color: var(--color-on-surface-muted);
}

.chips {
  margin-top: var(--gap-12);
  text-align: center;
}

.chips__title {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
}

[data-section="differential"] .chips__title { color: var(--color-on-surface); }

.chips__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-2);
  margin-top: var(--gap-4);
}

.chips__list li {
  padding: var(--gap-2) var(--gap-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-small);
}

[data-section="differential"] .chips__list li {
  border-color: var(--color-on-surface-border);
  color: var(--color-on-surface-muted);
}

.chips__list--quiet + .btn-cta { margin-top: var(--gap-8); }

@media (min-width: 769px) {
  .layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── portfólio ──────────────────────────────────────────────────────────── */

.portfolio {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.portfolio__card { padding: var(--gap-4) var(--gap-4) var(--gap-8); }

.portfolio__shot {
  width: 100%;
  aspect-ratio: 8 / 5;
  margin-bottom: var(--gap-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: top center;
}

.portfolio__card .card__title,
.portfolio__card .card__text { padding-inline: var(--gap-4); }

@media (min-width: 769px) {
  .portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── prova e autoridade: dois blocos lado a lado ────────────────────────── */

.duo {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.duo__card { gap: var(--gap-6); }

.duo__avatar {
  width: 96px;
  height: 105px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.duo__body { min-width: 0; }

/* ── módulos ────────────────────────────────────────────────────────────── */

.modules {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.module {
  min-width: 0;
  padding-block: var(--gap-6);
  border-top: 1px solid var(--color-border);
}

.module__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
}

.module__text {
  margin-top: var(--gap-2);
  color: var(--color-muted);
  font-size: var(--text-small);
  line-height: var(--leading-lead);
}

@media (min-width: 769px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-12); }
}

/* ── citação ────────────────────────────────────────────────────────────── */

.quote { text-align: center; }

.quote__mark {
  width: 40px;
  height: 40px;
  margin-inline: auto;
  color: var(--color-border);
}

.quote p {
  margin-top: var(--gap-6);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-body);
  line-height: 1.45;
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
}

/* ── oferta ─────────────────────────────────────────────────────────────── */

.pricing {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.pricing__card { padding: var(--gap-8); }

.pricing__name {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  letter-spacing: normal;
}

.pricing__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}

.pricing__value {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
  line-height: 1;
}

.card--dark .pricing__value { color: var(--color-on-surface); }

.pricing__unit {
  color: var(--color-muted);
  font-size: var(--text-small);
}

.card--dark .pricing__unit { color: var(--color-on-surface-muted); }

.pricing__desc {
  margin-top: var(--gap-4);
  margin-bottom: var(--gap-8);
  color: var(--color-muted);
}

.card--dark .pricing__desc { color: var(--color-on-surface-muted); }

.pricing__browsers {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  margin-top: auto;
  padding-top: var(--gap-8);
  color: var(--color-muted);
  font-size: var(--text-small);
}

.pricing__browsers img { width: 18px; height: 18px; }

.tag-soon { white-space: nowrap; }

.tag-soon {
  display: inline-block;
  padding: 1px var(--gap-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-tag-bg);
  color: var(--color-muted);
  font-size: var(--text-badge);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
}

.card--dark .tag-soon {
  background-color: var(--color-on-surface-soft);
  color: var(--color-on-surface-muted);
}

.offer__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-4);
  margin-top: var(--gap-12);
  text-align: center;
}

.offer__note {
  color: var(--color-muted);
  font-size: var(--text-small);
}

@media (min-width: 769px) {
  .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── dúvidas ────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.faq__item {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  transition: border-color var(--dur-hover) ease-out;
}

.faq__item:hover { border-color: var(--color-border-hover); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  min-height: 44px;
  padding: var(--gap-6) var(--gap-8);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  flex: none;
  font-size: var(--text-h3);
  font-weight: var(--weight-body);
  line-height: 1;
  color: var(--color-muted);
}

.faq__item[open] summary::after { content: "\2212"; }

.faq__answer { padding: 0 var(--gap-8) var(--gap-8); }

.faq__answer p {
  color: var(--color-muted);
  line-height: var(--leading-lead);
}

.faq__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-6);
  margin-top: var(--gap-12);
  text-align: center;
}

.faq__foot p {
  color: var(--color-muted);
  font-size: var(--text-lead);
}

@media (min-width: 769px) {
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 449px) {
  .faq__item summary { padding: var(--gap-4) var(--gap-6); font-size: var(--text-body); }
  .faq__answer { padding: 0 var(--gap-6) var(--gap-6); }
}

/* ── fechamento ─────────────────────────────────────────────────────────── */

[data-section="contact"] {
  border-top: 1px solid var(--color-border);
}

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.closing__seal {
  width: 96px;
  height: 96px;
  margin-bottom: var(--gap-8);
  border-radius: var(--radius-pill);
}

.closing__text {
  max-width: 52ch;
  margin-top: var(--gap-6);
  margin-bottom: var(--gap-8);
  color: var(--color-muted);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.closing__note {
  margin-top: var(--gap-4);
  color: var(--color-muted);
  font-size: var(--text-small);
}

/* ── rodapé ─────────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: var(--gap-12);
  border-top: 1px solid var(--color-border);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-6);
}

.site-footer__brand { white-space: nowrap; }

.site-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-title);
  color: var(--color-heading);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2) var(--gap-6);
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-muted);
  font-size: var(--text-small);
  text-decoration: none;
  transition: color var(--dur-hover) ease-out;
}

.site-footer__nav a:hover { color: var(--color-heading); }

@media (max-width: 768px) {
  .site-footer__inner { justify-content: flex-start; }
}