/* Seções e componentes. Tokens em tokens.css, doutrina em DESIGN.md. */

/* ---------- Estruturas compartilhadas ---------- */

.wrap {
  width: min(100% - var(--gutter), var(--w-content));
  margin-inline: auto;
  /* Respeita cantos arredondados e notch em paisagem */
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}

.wrap--reading {
  width: min(100% - var(--gutter), var(--w-reading));
}

.section {
  padding-block: var(--space-section);
  position: relative;
}

.section--dark {
  color: var(--white);
  background-color: var(--brown-warm);
  background-size: cover;
  background-position: center;
}

/* A assinatura: duas linhas, Light sobre Bold */
.heading {
  display: grid;
  text-transform: uppercase;
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--track-headline);
  text-wrap: balance;
}

.heading span:first-child { font-weight: var(--fw-light); }
.heading span:last-child { font-weight: var(--fw-bold); }

.heading--center { justify-items: center; text-align: center; }

.lead {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-headline);
  max-width: 46ch;
}

.note {
  font-size: var(--fs-body);
  opacity: 0.85;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  font-family: var(--font);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.2;
  padding: 20px 46px;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, filter 0.3s ease-out;
}

.btn--primary {
  background: var(--grad-gold);
  color: var(--brown-deep);
  box-shadow: var(--glow-gold);
}

/* :hover fica na camada de ponteiro fino, no fim do arquivo */

.btn--whats {
  background: var(--whats-green);
  color: var(--brown-deep);
  font-weight: var(--fw-semi);
  text-align: left;
}

.btn--whats strong { font-weight: var(--fw-bold); }

.btn--whats svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active { transform: none; }
}

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

/* Base = retrato estreito. A foto vertical ocupa o topo e o card entra abaixo dela. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  padding-block: 62vw var(--space-block);
  padding-top: max(62vw, env(safe-area-inset-top));
  background-color: var(--brown-deep);
  background-image: url("../img/bg1-mobile-.webp");
  background-size: cover;
  background-position: center top;
  color: var(--white);
}

.hero__card {
  width: min(100%, 720px);
  margin-inline: auto;
  text-align: center;
  background: var(--glass-dark);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: var(--border-glass);
  border-radius: var(--r-xl);
  padding: var(--space-block) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  gap: var(--gap-md);
  justify-items: center;
}

.hero__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__sub {
  max-width: 42ch;
}

.hero__author {
  width: 100%;
  max-width: 420px;
  padding-block: var(--gap-xs);
  border-block: 1px solid rgba(250, 242, 235, 0.35);
  font-size: var(--fs-title);
}

.hero__when {
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-headline);
}

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

.audience {
  display: grid;
  gap: var(--space-block);
  align-items: start;
}

/* Duas colunas só quando o título de seção cabe sem quebrar feio.
   Em 768 a coluna do título teria ~320px para um texto de 46px. */
@media (min-width: 900px) {
  .audience { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); }
}

.audience__list {
  display: grid;
  gap: var(--gap-md);
}

.audience__list li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: start;
  max-width: 62ch;
}

.audience__list li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Formato ---------- */

.format {
  background-image: url("../img/bg4.webp");
}

/* bg4 é a foto mais clara do conjunto e era a única seção escura sem véu:
   sem ele, .note cai para 2.8:1 sobre os pixels claros do topo. Com 0.45
   — o mesmo nível de --glass-dark — o pior pixel dá 5.6:1. */
.format::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-dark);
  pointer-events: none;
}

.format > .wrap { position: relative; }

.format__grid {
  display: grid;
  gap: var(--gap-md);
  margin-block: var(--space-block);
}

@media (min-width: 768px) {
  .format__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* O quinto item centralizado é parte da assinatura da seção */
  .format__grid li:last-child { grid-column: 1 / -1; width: min(100%, 50%); justify-self: center; }
}

.pill {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  background: var(--taupe-text);
  border-radius: var(--r-md);
  padding: 18px 24px;
  font-size: var(--fs-body);
  min-height: 76px;
}

.pill svg { flex-shrink: 0; }

/* Um único momento autoral de movimento, e só aqui.
   Só esconde se o JS assumiu — sem script, o conteúdo nasce visível. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: var(--t-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- O que vai aprender ---------- */

.learn {
  background-color: var(--cream-bg);
  background-image: url("../img/bg2.webp");
  background-size: cover;
  background-position: center;
}

.learn__grid {
  display: grid;
  gap: var(--space-block);
  align-items: center;
}

@media (min-width: 900px) {
  .learn__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); }
}

.timeline {
  display: grid;
  gap: var(--gap-md);
  background: var(--cream-bg);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.timeline li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: var(--gap-sm);
  align-items: start;
  position: relative;
  font-weight: var(--fw-semi);
  max-width: 60ch;
}

.timeline li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--gold);
}

.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(0.42em + 14px);
  bottom: calc(var(--gap-md) * -1);
  width: 1px;
  background: var(--sand-line);
}

/* ---------- Sobre mim ---------- */

.about {
  background-color: var(--brown-deep);
  background-image: url("../img/bg3-.webp");
  background-position: center top;
}

/* A coluna de texto fica sobre a fotografia: escurece só o lado dela,
   sem véu sobre a imagem inteira. */
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Segura 0.5 até 45% porque a coluna de texto termina em ~39% da largura:
     com a parada antiga (0.45 em 34%, transparente em 58%) o véu já tinha caído
     para 0.36 sob o fim do texto e o pior pixel dava 3.4:1. */
  background: linear-gradient(90deg, rgba(21, 10, 3, 0.8) 0%, rgba(21, 10, 3, 0.5) 45%, transparent 72%);
  pointer-events: none;
}

.about > .wrap { position: relative; }

.about__intro .heading { font-size: clamp(2rem, 4.4vw, 3.1rem); }

.about__grid {
  display: grid;
  gap: var(--space-block);
  align-items: center;
}

@media (min-width: 1024px) {
  .about__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); }
}

.about__intro {
  display: grid;
  gap: var(--gap-md);
}

.credentials {
  display: grid;
  gap: var(--gap-sm);
  background: var(--glass-deep);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-sm);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.credentials li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: var(--gap-xs);
  align-items: start;
  font-weight: var(--fw-semi);
  max-width: 66ch;
}

.credentials li::before {
  content: "";
  width: 0;
  height: 0;
  margin-top: 0.5em;
  border-left: 9px solid var(--gold);
  border-block: 6px solid transparent;
}

.credentials small {
  font-size: 0.875em;
  font-weight: var(--fw-light);
}

/* ---------- Investimento ---------- */

.invest {
  background: var(--cream-bg);
  text-align: center;
}

.invest__offer {
  display: grid;
  gap: var(--gap-md);
  justify-items: center;
  margin-block: var(--space-block);
}

@media (min-width: 768px) {
  .invest__offer {
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }
}

.price {
  display: inline-flex;
  align-items: stretch;
  background: var(--sand-line);
  border-radius: var(--r-pill);
  padding: 8px;
  box-shadow: var(--glow-gold);
}

.price__label {
  display: flex;
  align-items: center;
  background: var(--white);
  color: var(--brown-deep);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  padding: 10px clamp(1rem, 3vw, 1.875rem);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
}

.price__value {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brown-warm);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: 10px clamp(1rem, 3vw, 1.875rem);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: var(--track-headline);
}

.price__times {
  font-size: 0.6rem;
  font-weight: var(--fw-semi);
  line-height: 1.1;
  text-align: right;
}

.price__cash {
  display: block;
  margin-top: var(--gap-xs);
  color: var(--brown-warm);
  font-size: var(--fs-label);
}

/* Só existe quando o JS não roda. Véu de areia para destacar sem borda. */
.fallback {
  width: min(100%, 46ch);
  margin: var(--gap-md) auto 0;
  background: var(--sand-tint);
  border-radius: var(--r-md);
  padding: var(--gap-sm) var(--gap-md);
  color: var(--brown-deep);
}

.fallback a {
  font-weight: var(--fw-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.invest__close {
  display: grid;
  gap: var(--space-block);
  align-items: center;
  justify-items: center;
  margin-top: var(--space-block);
  padding-top: var(--space-block);
  border-top: 1px solid var(--sand-line);
}

@media (min-width: 768px) {
  .invest__close {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    text-align: left;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.product {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-settle);
  width: min(100%, 460px);
  justify-self: center;
}

.product__body {
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.product__name {
  color: var(--brown-warm);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: var(--track-headline);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

.product__name span {
  display: block;
  color: var(--brown-warm);
  font-weight: var(--fw-semi);
  font-size: 0.75em;
}

.product__author {
  margin-top: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--sand-line);
  color: var(--brown-warm);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
}

.product__author strong { color: var(--brown-deep); }

.product__band {
  background: var(--brown-ink);
  color: var(--cream-bg);
  padding: 14px var(--gap-sm);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  letter-spacing: var(--track-headline);
  text-transform: uppercase;
  text-align: center;
}

.product__band span { color: var(--cream-soft); }

.invest__doubt {
  display: grid;
  gap: var(--gap-md);
}

/* Base = empilhado e centrado; a partir do tablet ganha eixo à esquerda. */
.invest__doubt { justify-items: center; text-align: center; }

@media (min-width: 768px) {
  .invest__doubt { justify-items: start; text-align: left; }
}

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

.footer {
  background: var(--grad-gold);
  color: var(--brown-deep);
  text-align: center;
  padding-top: var(--gap-sm);
  /* Não deixa o indicador de home do iPhone comer o rodapé */
  padding-bottom: max(var(--gap-sm), env(safe-area-inset-bottom));
  font-size: var(--fs-label);
  text-transform: uppercase;
  line-height: 1.5;
}

/* =========================================================
   Escala responsiva — mobile-first.
   O que está fora de media query É o retrato estreito.
   ========================================================= */

/* ---------- Base: retrato estreito (até 767px) ---------- */

:root {
  --space-section: 56px;
  --space-block: 32px;
}

/* bg3-mobile-.webp original traz o texto de autoridade queimado na imagem;
   esta versão foi recortada da bg3- limpa. */
.about {
  background-image: url("../img/bg3-mobile-clean.webp");
  background-position: center 22%;
}

/* Enquanto o layout está empilhado, o texto cobre a largura toda:
   o escurecimento tem que ser vertical, não lateral. */
.about::before {
  background: linear-gradient(180deg, rgba(21, 10, 3, 0.78) 0%, rgba(21, 10, 3, 0.55) 40%, rgba(21, 10, 3, 0.8) 100%);
}

.price { width: 100%; }
.price__label { flex: 1; justify-content: center; }
.btn { width: 100%; }

/* ---------- Tablet retrato (768px+) ---------- */

@media (min-width: 768px) {
  :root {
    --space-section: 72px;
    --space-block: 40px;
    --gutter: 4rem;
  }

  /* A foto panorâmica só funciona quando há largura para ela.
     Antes disso, segue a vertical. */
  .hero {
    background-image: url("../img/bg1-.webp");
    background-position: center top;
    align-items: end;
    min-height: min(94vh, 940px);
    padding-block: var(--space-section) var(--space-block);
    /* Reserva a faixa do rosto acima do card */
    padding-top: clamp(280px, 42vh, 460px);
  }

  .hero__card {
    width: min(100%, 640px);
  }

  .price { width: auto; }
  .price__label { flex: initial; }
  .btn { width: auto; }
}

/* ---------- Tablet largo / laptop pequeno (1024px+) ---------- */

@media (min-width: 1024px) {
  :root {
    --space-section: 80px;
    --space-block: 48px;
    --gutter: 2.5rem;
  }

  .hero__card { width: min(100%, 720px); }

  /* Só aqui o grid de Sobre mim vira duas colunas — a partir daqui a foto
     panorâmica tem largura para mostrar a figura ao lado do texto. */
  .about {
    background-image: url("../img/bg3-.webp");
    background-position: center top;
  }

  /* Segura 0.5 até 45% porque a coluna de texto termina em ~39% da largura:
     com a parada antiga (0.45 em 34%, transparente em 58%) o véu já tinha caído
     para 0.36 sob o fim do texto e o pior pixel dava 3.4:1. */
  .about::before {
    background: linear-gradient(90deg, rgba(21, 10, 3, 0.8) 0%, rgba(21, 10, 3, 0.5) 45%, transparent 72%);
  }
}

/* ---------- Paisagem baixa: telefone deitado ----------
   62vw de padding no hero viraria 400px+ de vazio antes do card.
   Aqui a foto vira moldura lateral e o card ocupa o centro.

   Vem DEPOIS dos blocos de largura de propósito: um telefone deitado casa
   com este e com o de 768px ao mesmo tempo (iPhone 14 é 844x390), e quem vem
   por último vence. Antes, o de 768px ganhava e jogava 280px de padding-top
   numa tela de 390px de altura. A guarda de max-width evita pegar janela
   de desktop baixa, que deve continuar com o layout de largura. */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  :root {
    --space-section: 48px;
    --space-block: 32px;
  }

  .hero {
    padding-block: var(--space-block);
    padding-top: max(var(--space-block), env(safe-area-inset-top));
    background-image: url("../img/bg1-.webp");
    /* Empurra a figura para a metade esquerda, que fica livre */
    background-position: 66% center;
    align-items: center;
    /* Anula a reserva de altura do bloco de 768px */
    min-height: auto;
  }

  /* Não há altura para empilhar foto sobre card: eles dividem a largura.
     A médica continua visível, que é o ponto do hero. */
  .hero > .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .hero__card {
    grid-column: 2;
    width: 100%;
    padding-block: var(--space-block);
    gap: var(--gap-sm);
  }

  .hero__title { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
  .hero__sub { font-size: 0.95rem; }
  .hero__author { font-size: 1rem; padding-block: 8px; }
}

/* ---------- Toque e ponteiro ----------
   Tamanho de alvo e feedback dependem do dedo, não da largura da tela. */

@media (pointer: coarse) {
  .btn {
    min-height: 56px;
    padding-block: 22px;
  }

  /* Mais respiro entre alvos vizinhos quando o dedo é o ponteiro */
  .invest__offer { gap: var(--gap-md); }
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 1.789px 5px 42px 0 rgba(222, 190, 115, 0.55);
  }

  .btn--whats:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
  }
}

/* Sem hover, o retorno vem no toque */
@media (hover: none) {
  .btn:active { transform: scale(0.98); }
}