/* =========================================================================
   Desafio 21 Dias Jazz Femme
   Sistema visual da direcao montada no Figma (04 · Pagina) — set/2026.
   Tokens extraidos por get_design_context, nao estimados no olho.
   ========================================================================= */

/* ---------- reset minimo, nao opcional ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, video, svg { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

:root {
  /* ---------- 1. cor base (paleta crua, nunca usada direto no componente)
     valores lidos do Figma. O papel carrega o matiz quente da marca
     (hsl 30) e o cinza de corpo ja nasce rosado (hsl 352) — cinza vivo. */
  --base-ink:      #1c1c1c;
  --base-paper:    #f9f5f1;
  --base-accent:   #863c4d;
  --base-accent-d: #641b2c;
  --base-surface:  #ffffff;

  /* ---------- 2. cor semantica (o que o componente consome) */
  --tone-strong:  var(--base-ink);
  --tone-body:    #6c6465;
  --tone-muted:   color-mix(in srgb, var(--base-ink) 62%, transparent);
  --bg-base:      var(--base-paper);
  --bg-card:      var(--base-surface);
  --bg-placeholder: #d9d9d9;
  --border:       color-mix(in srgb, var(--base-ink) 12%, transparent);
  --accent:       var(--base-accent);

  /* ---------- 3. componente com estado */
  --cta-grad:       linear-gradient(90deg, var(--base-accent) 0%, var(--base-accent-d) 100%);
  --cta-grad-hover: linear-gradient(90deg, var(--base-accent-d) 0%, var(--base-accent) 100%);
  --cta-text:       #fff;

  /* ---------- tipografia */
  --font-body:   "Libre Franklin", system-ui, -apple-system, sans-serif;
  --font-acento: "PT Serif Caption", Georgia, serif;

  /* escala de 6 degraus, fluida de 375 a 1440, sem salto */
  --t-h1:   clamp(2rem,    1.20rem + 3.41vw, 3.5rem);     /* 32 -> 56 */
  --t-h2:   clamp(1.75rem, 1.28rem + 2.00vw, 2.625rem);   /* 28 -> 42 */
  --t-h3:   clamp(1.5rem,  1.23rem + 1.14vw, 2rem);       /* 24 -> 32 */
  --t-lead: clamp(1.1875rem, 1.02rem + 0.71vw, 1.5rem);   /* 19 -> 24 */
  --t-body: clamp(1.0625rem, 0.96rem + 0.43vw, 1.25rem);  /* 17 -> 20 */
  --t-sm:   clamp(0.9375rem, 0.87rem + 0.28vw, 1.125rem); /* 15 -> 18 */
  --t-eyebrow: clamp(0.8125rem, 0.71rem + 0.43vw, 1.125rem); /* 13 -> 18 */

  /* registro editorial: peso leve + tracking negativo (sistema-visual 2.4) */
  --track-h1: -0.04em;
  --track-h2: -0.04em;
  --track-h3: -0.04em;
  --track-eyebrow: 0.2em;

  --lh-h1:   1.25;
  --lh-h2:   1.45;   /* o Figma desenha 70/42 = 1.667; ver nota de rag abaixo */
  --lh-h3:   1.5;
  --lh-body: 1.45;
  --lh-lead: 1.5;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  /* ---------- espaco interno */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---------- respiro entre secoes
     17 dobras = landing longa, entao o default e o degrau medio (3.3) */
  --sec-s: clamp(2.5rem, 1.76rem + 3.15vw, 4rem);      /* 40 -> 64  */
  --sec-m: clamp(4rem,   2.77rem + 5.26vw, 7.5rem);    /* 64 -> 120 */
  --sec-l: clamp(5rem,   3.24rem + 7.51vw, 10rem);     /* 80 -> 160, virada de capitulo */

  /* ---------- grid: container 1236 = a largura da nav no frame de 1440 */
  --container: 1236px;
  --pad:    clamp(1.25rem, 0.986rem + 1.127vw, 2rem);  /* 20 -> 32, piso de 20 */
  --gutter: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);   /* 16 -> 24 */

  /* ---------- forma
     placeholder e caixa: canto reto. Controle: pilula. Decisao do Figma. */
  --r-quadrado: 0;
  --r-pill: 9999px;
  --r-midia: clamp(16px, 1.6vw, 24px);  /* video e prints (revisao V2) */
  --h-cta: 72px;
  --h-cta-sm: 56px;

  /* ---------- motion: tres duracoes, duas curvas */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.4, 0, .2, 1);
  --dur-micro:  .15s;
  --dur-ui:     .3s;
  --dur-reveal: .5s;
}

/* =========================================================================
   BASE
   ========================================================================= */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--tone-body);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

/* overflow-x: clip (nao hidden) permite que as luzes de fundo sangrem
   verticalmente entre secoes e sejam cortadas so nas laterais. */
main { position: relative; overflow-x: clip; }

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 1;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
}
.grid-12 > * { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .c-5 { grid-column: span 5; }
  .c-6 { grid-column: span 6; }
  .c-7 { grid-column: span 7; }
  .c-6-fim { grid-column: 7 / span 6; }
  .c-7-fim { grid-column: 6 / span 7; }
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--w-regular); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* o acento italico: a segunda voz do titulo. Uma voz por titulo —
   aqui a virada e italico + cor, que no Figma andam juntas e sao
   a assinatura da peca. */
.acento {
  font-family: var(--font-acento);
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

strong, .forte { font-weight: var(--w-semi); color: inherit; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* o link de pular navegacao tem que aparecer quando recebe o foco:
   escondido tambem no foco, ele deixa quem navega por teclado sem saber
   onde esta. */
.sr:focus {
  position: fixed;
  top: var(--s-4); left: var(--s-4);
  width: auto; height: auto;
  margin: 0; padding: var(--s-3) var(--s-5);
  overflow: visible; clip-path: none;
  background: var(--base-accent-d);
  color: #fff;
  border-radius: var(--r-pill);
  z-index: 60;
}

/* =========================================================================
   LUZ DE FUNDO — o gradiente radial branco
   No Figma sao 6 circulos brancos de 710px com blur de 100. Aqui viram
   radial-gradient por secao, alternando o lado, para escalar com o
   conteudo em vez de ficarem presos a um y absoluto de 8779px.
   ========================================================================= */

.secao { position: relative; padding-block-start: var(--sec-m); }
.secao--capitulo { padding-block-start: var(--sec-l); }

.secao::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 1110px;
  aspect-ratio: 1;
  max-width: none;
  top: 50%;
  translate: 0 -50%;
  background: radial-gradient(circle closest-side,
    #fff 0%, #fff 28%, rgba(255,255,255,.5) 64%, rgba(255,255,255,0) 100%);
}
.secao:nth-of-type(odd)::before  { left: -18%; }
.secao:nth-of-type(even)::before { right: -18%; }

@media (max-width: 899px) {
  .secao::before { width: 700px; }
}

/* =========================================================================
   BOTAO — pilula com gradiente vinho
   ========================================================================= */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-cta);
  padding-inline: var(--s-8);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cta-grad);
  color: var(--cta-text);
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  line-height: 1.25;
  letter-spacing: -0.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--base-accent-d) 45%, transparent);
  transition: transform var(--dur-micro) var(--ease-io),
              box-shadow var(--dur-micro) var(--ease-io);
}

/* o brilho que varre o botao de tempos em tempos: chama o olho sem
   piscar nem pular. Fica parado a maior parte do ciclo (0 -> 62%) e
   atravessa em ~1,2s. Some inteiro em prefers-reduced-motion. */
.cta::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: 38%;
  left: -55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, #fff 22%, transparent) 50%,
    transparent 100%);
  transform: skewX(-16deg);
  animation: cta-brilho 4.6s var(--ease-io) infinite;
}
@keyframes cta-brilho {
  0%, 62%   { left: -55%; }
  88%, 100% { left: 118%; }
}
.cta:hover::before, .cta:focus-visible::before { animation-play-state: paused; }

/* o hover troca o sentido do gradiente por opacidade de uma camada
   sobreposta: background-image nao transiciona. */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-grad-hover);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-io);
}

.cta:hover, .cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--base-accent-d) 48%, transparent);
}
.cta:hover::after, .cta:focus-visible::after { opacity: 1; }
.cta:active { transform: translateY(0); }

.cta--sm {
  min-height: var(--h-cta-sm);
  padding-inline: var(--s-6);
  font-size: var(--t-sm);
}

@media (max-width: 899px) {
  .cta { min-height: var(--h-cta-sm); padding-inline: var(--s-6); width: 100%; max-width: 420px; }
}

/* =========================================================================
   NAV
   ========================================================================= */

.nav {
  position: relative;
  z-index: 3;
  padding-block: var(--s-5);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.nav__marca { display: flex; align-items: center; min-height: 44px; color: var(--tone-strong); }
.nav__marca svg { width: clamp(160px, 19vw, 281px); height: auto; }
.nav__acoes { display: flex; align-items: center; gap: var(--s-7); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: -0.04em;
  color: var(--tone-strong);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-io);
}
.nav__link:hover { color: var(--accent); }

@media (max-width: 899px) {
  .nav__inner { justify-content: center; }
  .nav__acoes { display: none; }
}

/* =========================================================================
   HERO
   ========================================================================= */

.hero { position: relative; padding-block-start: clamp(var(--s-6), 4vw, 56px); }

.hero__grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

.hero__titulo {
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);  /* 36 -> 60, ver [01/out] abaixo */
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--tone-strong);
}
.hero__titulo .num { color: var(--accent); }

.hero__sub {
  margin-top: var(--s-6);
  max-width: 30em;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--tone-body);
}

.hero__cta { margin-top: var(--s-7); }

/* [01/out] a nota embaixo do botao saiu (repetia o fim do paragrafo novo);
   o destaque passou para o trecho do paragrafo, na italica do acento */
.hero__sub em { font-family: var(--font-acento); font-style: italic; color: var(--accent); }

/* REVISAO V2 [22/set] — o video da aula e a peca principal do hero.
   Texto centralizado em cima, video na largura do container embaixo,
   bordas arredondadas e nada por cima dele. */
.hero__grid { justify-items: center; text-align: center; gap: clamp(var(--s-7), 5vw, 72px); }
.hero__texto { display: flex; flex-direction: column; align-items: center; }
.hero__sub { max-width: 34em; }
.hero__arte { width: 100%; }
.hero__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-midia);
  background: var(--bg-placeholder);
}
.hero { padding-block-end: var(--sec-s); }

@media (max-width: 899px) {
  .hero__sub { max-width: 34ch; }
}

/* [01/out] promessa nova: o nome do desafio vira eyebrow em cima do titulo */
.hero__eyebrow { margin-bottom: var(--s-5); }

/* [01/out] promessa nova em duas linhas no desktop: a frase inteira em cima
   e "atraves da danca." 15% maior embaixo, fechando o titulo. Medido: a
   primeira linha ocupa ~15,4em; o 5.4vw garante que caiba de 900 a 1440.
   No celular, tres linhas fixas (br-m). Escolha do Henrique na rodada ?v (C). */
/* min(): em 360px o 1.15em estourava a linha; 10.6vw cabe em ~8.3em de largura */
.hero__titulo .acento { font-size: min(1.15em, 10.6vw); letter-spacing: -0.01em; }

/* [01/out] recorte pedido pela Yasmim ("para nao ocupar"): no desktop o
   video vira faixa larga, na proporcao do print dela (1600x620). Corta mais
   chao que teto. No celular fica 16:9; a faixa deixaria as alunas minusculas. */
@media (min-width: 900px) {
  .hero__video { aspect-ratio: 1600 / 620; object-position: 50% 30%; }
}

/* [01/out] selos embaixo do video do hero: faixa marsala colada no video,
   como legenda dele (rodada ?v, opcao A). O video perde o arredondado de
   baixo e a faixa assume. */
.hero__video { border-radius: var(--r-midia) var(--r-midia) 0 0; }
.selos {
  display: flex;
  justify-content: center;
  padding: var(--s-4) var(--s-6);
  list-style: none;
  background: linear-gradient(90deg, var(--base-accent) 0%, var(--base-accent-d) 100%);
  border-radius: 0 0 var(--r-midia) var(--r-midia);
}
.selos li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-6);
  font-size: var(--t-body);
  line-height: 1.3;
  color: color-mix(in srgb, #fff 86%, transparent);
  text-align: left;
}
.selos li + li { border-left: 1px solid color-mix(in srgb, #fff 28%, transparent); }
.selos b { font-weight: var(--w-medium); color: #fff; }
.selos__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 14%, transparent);
}
.selos__ic svg { display: block; width: 20px; height: 20px; color: #fff; }
@media (max-width: 899px) {
  .selos { flex-direction: column; padding: var(--s-3) var(--s-5); }
  .selos li { padding: var(--s-3) 0; font-size: var(--t-sm); }
  .selos li + li { border-left: 0; border-top: 1px solid color-mix(in srgb, #fff 22%, transparent); }
}

/* =========================================================================
   FAIXA — marquee em loop continuo
   ========================================================================= */

.faixa {
  position: relative;
  z-index: 2;
  background: var(--base-accent);
  padding-block: var(--s-4);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
/* o trilho tem duas metades identicas (montadas no JS): andar -50% cai
   exatamente no inicio da segunda, e o laco fecha sem salto */
.faixa__trilho {
  display: flex;
  align-items: center;
  width: max-content;
  animation: faixa-anda 40s linear infinite;
}
@keyframes faixa-anda { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .faixa__trilho { animation: none; } }
.faixa__item {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-inline: var(--s-5);
  color: #fff;
  white-space: nowrap;
}
.faixa__item svg { width: clamp(110px, 11vw, 165px); height: auto; color: #fff; }
.faixa__item span {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--t-sm);
  letter-spacing: var(--track-eyebrow);
}

/* =========================================================================
   CABECALHO DE SECAO — eyebrow + titulo
   ========================================================================= */

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent);
}

.cabeca { margin-bottom: var(--s-7); }
.cabeca .eyebrow { margin-bottom: var(--s-5); }
.cabeca h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  color: var(--tone-strong);
  max-width: 20em;
}
.cabeca--centro { text-align: center; }
.cabeca--centro h2 { margin-inline: auto; max-width: 24em; }

/* =========================================================================
   BLOCO DE CONTEUDO — imagem + texto lado a lado
   ========================================================================= */

.bloco {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .bloco { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
  .bloco__midia { grid-column: span 5; }
  .bloco__texto { grid-column: 7 / span 6; }
  .bloco--invertido .bloco__midia { grid-column: 8 / span 5; grid-row: 1; }
  .bloco--invertido .bloco__texto { grid-column: span 6; grid-row: 1; }
}

.prosa { display: flex; flex-direction: column; gap: var(--s-5); }
.prosa p { max-width: 58ch; font-size: var(--t-body); line-height: var(--lh-body); }
.prosa .cta { align-self: flex-start; margin-top: var(--s-5); }
@media (max-width: 899px) { .prosa .cta { align-self: stretch; } }

/* =========================================================================
   LISTAS COM ICONE
   ========================================================================= */

.lista { display: flex; flex-direction: column; gap: var(--s-5); }
.lista li {
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: var(--s-5);
  align-items: start;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
}
.lista svg { width: 21px; height: 21px; color: var(--accent); margin-top: .25em; flex: 0 0 21px; }

/* =========================================================================
   CAIXA DE DESTAQUE — o fundo branco que levanta a frase
   ========================================================================= */

/* Quatro tratamentos, trocaveis ao vivo por ?destaque=  (ver jazz.js).
   O atributo mora no <html>, entao a pagina inteira muda junto. */
.destaque {
  position: relative;
  border-radius: var(--r-quadrado);
  padding: var(--s-6) var(--s-7);
  font-size: var(--t-lead);
  line-height: 1.5;
}
.destaque b, .destaque strong { display: block; color: var(--accent); font-weight: var(--w-semi); }
.destaque strong.inline { display: inline; }

/* contorno tracejado vinho sobre o branco */
.destaque {
  background: var(--bg-card);
  border: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
}

/* =========================================================================
   IMAGENS DAS SECOES — fotos do acervo (filtro "papel quente" do Figma)
   ========================================================================= */

.foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  background: var(--bg-placeholder);
}
.foto--largo { aspect-ratio: 4 / 3; }
/* a arte do Sobre vem pronta, com fundo branco e proporcao propria: entra
   sem corte. O branco foi multiplicado pelo papel (#f9f5f1) no proprio
   arquivo: mix-blend-mode nao serve aqui, porque o reveal (.rv) isola o
   bloco e o multiply passa a enxergar fundo transparente */
.foto--sobre {
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
}

/* RODADA DE IMAGENS [28/set] — pedido do Henrique: prints em mockup e em
   conjunto, fotos da Yasmim cortando menos, texto centralizado onde a foto
   vem inteira. Material: referencias/greenn-prints e greenn-quadros.

   ─ MOCK: notebook e celular desenhados em CSS em volta dos prints reais da
     Greenn. Proporcoes em %, entao o aparelho escala com a coluna. */
.mock { position: relative; margin: 0; }
.mock__note { position: relative; }
.mock__tela {
  padding: 2.2% 2.2% 2.6%;
  background: #1b1b1d;
  border-radius: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) 3px 3px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 30px 60px -30px rgb(28 28 28 / .45);
}
.mock__tela img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border-radius: 2px;
  background: #17181a;
}
/* base do notebook: mais larga que a tela, com o recorte do dedo no meio */
.mock__base {
  position: relative;
  width: 108%;
  margin-left: -4%;
  aspect-ratio: 100 / 3.2;
  background: linear-gradient(#e4e0dc, #b8b3ae 70%, #9d9894);
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  box-shadow: 0 18px 30px -18px rgb(28 28 28 / .5);
}
.mock__base::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 15%; height: 42%;
  translate: -50% 0;
  background: #a9a39e;
  border-radius: 0 0 8px 8px;
}
.mock__cel {
  position: absolute;
  right: 0; bottom: -4%;
  width: 27%;
  aspect-ratio: 390 / 844;
  padding: 1.6%;
  background: #121214;
  border-radius: clamp(16px, 2.6vw, 32px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 26px 50px -20px rgb(28 28 28 / .55);
}
.mock__cel img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(11px, 1.9vw, 24px);
}
.mock__cel::after {             /* ilha dinamica */
  content: "";
  position: absolute;
  left: 50%; top: 3.2%;
  width: 30%; height: 2.6%;
  translate: -50% 0;
  background: #121214;
  border-radius: 99px;
}
/* no par, o notebook recua para o celular caber na frente sem cobrir a aula */
.mock--par { padding: 0 14% 6% 0; }
@media (min-width: 900px) {
  /* 6 + 5 colunas com uma vazia no meio: a base do notebook passa 4% da
     tela para cada lado e precisa desse respiro para nao encostar no texto */
  .bloco--mock .bloco__midia { grid-column: 1 / span 6; }
  .bloco--mock .bloco__texto { grid-column: 8 / span 5; }
  .bloco--invertido.bloco--mock .bloco__midia { grid-column: 7 / span 6; }
  .bloco--invertido.bloco--mock .bloco__texto { grid-column: 1 / span 5; }
}

/* ─ CELULAR COM VIDEO (Objecao): a aula basica tocando dentro do aparelho.
     O circulo com a seta de recomecar ilustra "Pode assistir novamente." e
     da uma volta cada vez que o video reinicia (classe posta no jazz.js). */
.cel-video {
  position: relative;
  width: min(100%, 300px);
  margin: 0 auto;
  aspect-ratio: 390 / 844;
  padding: 9px;
  background: #121214;
  border-radius: 44px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -26px rgb(28 28 28 / .55);
}
.cel-video video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 36px;
  background: #17181a;
}
.cel-video::after {             /* ilha dinamica */
  content: "";
  position: absolute;
  left: 50%; top: 20px;
  width: 88px; height: 24px;
  translate: -50% 0;
  background: #121214;
  border-radius: 99px;
}
.cel-video__recomeca {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  color: #fff;
  background: rgb(255 255 255 / .18);
  border: 1px solid rgb(255 255 255 / .45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgb(28 28 28 / .45);
}
.cel-video__recomeca svg { width: 28px; height: 28px; }
.cel-video__recomeca.volta svg { animation: recomeca .9s cubic-bezier(.4, 0, .2, 1); }
@keyframes recomeca { to { rotate: -360deg; } }
@media (prefers-reduced-motion: reduce) { .cel-video__recomeca.volta svg { animation: none; } }

/* ─ CELULAR + VOZES (Depois dos 21 dias): a lista de modulos da Greenn
     redesenhada, com as tres semanas concluidas, e tres alunas dizendo o que
     mudou. Desktop: celular a direita da coluna, vozes empilhadas a
     esquerda entrando so na borda dele. Celular: tudo empilhado. */
/* a abertura da copy ("Nao existe promessa...") sobe para baixo do titulo:
   a coluna do lado fica so com a lista, e cabe em 5 colunas */
.cabeca__desc { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.cabeca__desc p { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--tone-body); }
.cabeca__desc strong { color: var(--tone-strong); }
.cabeca--centro .cabeca__desc p { max-width: 44ch; margin-inline: auto; }
@media (min-width: 900px) {
  .bloco--depois .bloco__midia { grid-column: 1 / span 7; }
  .bloco--depois .bloco__texto { grid-column: 8 / span 5; }
  /* o celular recua 40px da borda da coluna: somado ao vao da grade, sobram
     ~64px ate os cartoes da lista */
  .bloco--depois .gr-cel { margin-right: 40px; }
}
.cel-vozes { position: relative; }
.gr-cel {
  position: relative;
  width: min(100%, 340px);
  margin: 0 auto;
  aspect-ratio: 390 / 844;
  padding: 10px;
  background: #121214;
  border-radius: 50px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -26px rgb(28 28 28 / .55);
}
.gr-cel::after {                /* ilha dinamica */
  content: "";
  position: absolute;
  left: 50%; top: 22px;
  width: 96px; height: 26px;
  translate: -50% 0;
  background: #000;
  border-radius: 99px;
}
/* a tela imita a Greenn (escura, sem serifa); a fonte e a do sistema de
   proposito: nao e a identidade da pagina, e a da plataforma */
.gr {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 64px 16px 20px;
  border-radius: 40px;
  background: #1b1c1f;
  color: #e9e9ea;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.gr__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gr__topo img { width: 32px; height: 32px; border-radius: 6px; }
.gr__topo span { width: 28px; height: 28px; border-radius: 50%; background: #3a3b40; }
.gr__aba {
  width: fit-content;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9e9ea;
  font-size: 12px;
  font-weight: 600;
}
.gr__mod, .gr__fim {
  display: grid;
  grid-template-columns: 58px 1fr 18px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: #232428;
}
.gr__mod img, .gr__fim img { width: 58px; height: 82px; object-fit: cover; border-radius: 7px; }
.gr__mod b, .gr__fim b { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; }
.gr__mod small { display: block; margin-top: 6px; font-size: 11px; color: #9a9ba1; }
.gr__barra { display: block; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: #3a3b40; }
.gr__barra span { display: block; width: 100%; height: 100%; border-radius: 3px; background: #e9e9ea; }
.gr__ok { width: 16px; height: 16px; color: #e9e9ea; }
.gr__fim {
  grid-template-columns: 58px 1fr;
  margin-top: auto;
  padding: 16px 14px;
  background: linear-gradient(135deg, var(--base-accent), #3b1019);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12);
}
.gr__fim b { font-size: 15px; line-height: 1.35; }

.vozes { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.vozes .comentario__foto { flex-basis: 52px; width: 52px; height: 52px; }
/* a escadinha dos comentarios do alto (.comentario:nth-child(even), mais
   abaixo no arquivo) nao vale aqui: o :nth-child(n) ganha no peso */
.vozes .comentario:nth-child(n) { margin-top: 0; }
@media (min-width: 900px) {
  .gr-cel { margin: 0 0 0 auto; }
  /* a coluna das vozes vai da borda esquerda ate 20px dentro do celular:
     encosta na moldura sem tapar as capas dos modulos */
  .vozes {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: calc(100% - min(100%, 340px) - 40px + 20px);
    z-index: 2;
    margin: 0;
    align-content: center;
    gap: var(--s-5);
  }
  .vozes .comentario__balao { box-shadow: 0 18px 40px -18px rgb(100 27 44 / .45); }
  /* a coluna e estreita: o avatar sai do lado e entra no canto do balao,
     ao lado do nome, e o texto ganha a largura toda */
  .vozes .comentario { display: block; }
  .vozes .comentario__foto {
    position: absolute;
    width: 36px; height: 36px;
    margin: var(--s-4) 0 0 var(--s-5);
    z-index: 1;
  }
  .vozes .comentario__balao { border-radius: 22px 22px 22px 6px; }
  .vozes .comentario__nome { display: flex; align-items: center; min-height: 36px; padding-left: 48px; margin-bottom: var(--s-2); }
  .vozes .comentario__balao p { font-size: 15px; line-height: 1.5; }
}

/* ─ FOTOS DA YASMIM: arquivo inteiro (2:3); o recorte sai do CSS e o --foco
     do <figure> mira a pose. Quadrada no desktop, 4:5 no celular. */
.foto-yas { margin: 0 auto clamp(var(--s-7), 5vw, var(--s-8)); max-width: 620px; }
.foto-yas img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center var(--foco, 50%);
  border-radius: var(--r-midia);
  background: var(--bg-placeholder);
}
@media (min-width: 900px) { .foto-yas img { aspect-ratio: 1; } }

/* ─ CENTRALIZADO (Por que Jazz Femme / Diferencial): a coluna de texto toda
     no eixo, inclusive destaque e botao */
.bloco--centro .bloco__texto { text-align: center; align-items: center; }
.bloco--centro .prosa p { margin-inline: auto; }
.bloco--centro .cabeca-interna { margin-inline: auto; }
.bloco--centro .destaque { width: 100%; max-width: 640px; }
.bloco--centro .prosa .cta { align-self: center; }

/* ─ PARA QUEM E: cada item vira cartao com o check num disco. */
.quem {
  display: grid;
  gap: 12px;
}
@media (min-width: 700px) { .quem { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .quem { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quem li {
  grid-template-columns: 36px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  background: var(--bg-card);
  border-radius: calc(var(--r-midia) * .7);
}
/* dentro de uma coluna de texto (Depois dos 21 dias): sempre uma coluna */
@media (min-width: 700px) { .quem.quem--coluna { grid-template-columns: 1fr; } }
.quem svg {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  margin: 0;
  padding: 9px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
}

/* bloco que perdeu a imagem para a faixa: o texto fica numa coluna so,
   centrada na grade */
@media (min-width: 900px) {
  .bloco--texto .bloco__texto { grid-column: 3 / span 8; }
}

/* COMENTARIOS — depoimento curto como comentario de Instagram:
   foto redonda + balao branco com o nome em cima. Quatro em grade 2x2 no
   desktop, empilhados no celular; a coluna da direita desce para dar ritmo. */
.secao--comentarios::before { display: none; }  /* balao branco sumiria na luz branca */
.comentarios {
  display: grid;
  gap: var(--s-5);
  max-width: 1000px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .comentarios { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
  .comentario:nth-child(even) { margin-top: var(--s-8); }
}
.comentario { display: flex; align-items: flex-end; gap: var(--s-3); }
.comentario__foto {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.comentario__balao {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-card);
  border-radius: 22px 22px 22px 6px;
  box-shadow: 0 10px 30px -18px rgba(100, 27, 44, .28);
}
.comentario__nome {
  display: block;
  margin-bottom: var(--s-1);
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--tone-strong);
}
.comentario__balao p { font-size: var(--t-body); line-height: 1.45; color: var(--tone-body); }
/* celular: empilhados, a foto alterna de lado (e o bico do balao junto)
   para a coluna nao ficar com todas as fotos na esquerda. Vale para os
   comentarios do alto e para as vozes do "Depois dos 21 dias" */
@media (max-width: 899px) {
  .comentario:nth-child(even) { flex-direction: row-reverse; }
  .comentario:nth-child(even) .comentario__balao { border-radius: 22px 22px 6px 22px; }
}

/* CAMINHO — "O que e o desafio": os 21 dias como UMA trilha continua.
   Serpentina de tres fileiras (ida, volta, ida), uma por semana; os pontos
   escurecem do dia 1 ao dia 21 e o ultimo ganha um anel de chegada.
   SVG com viewBox: escala inteira com o cartao, sem remontar no mobile.
   A cor do texto vem de `color` + fill: currentColor, para a varredura de
   contraste ler o valor certo. */
.caminho {
  aspect-ratio: 5 / 6;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(var(--s-4), 3vw, var(--s-7));
  background: var(--bg-card);
  border: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
  border-radius: var(--r-midia);
}
.caminho__svg { width: 100%; height: 100%; overflow: visible; }
.caminho__trilha {
  fill: none;
  stroke: color-mix(in srgb, var(--base-accent) 35%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
}
/* disco branco embaixo de cada ponto: sem ele a trilha aparece atraves dos pontos claros */
.caminho__base  { fill: var(--bg-card); }
.caminho__ponto { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }
.caminho__anel  { fill: none; stroke: color-mix(in srgb, var(--base-accent) 40%, transparent); stroke-width: 1.5; }
.caminho__semana {
  color: var(--accent);
  fill: currentColor;
  font-size: 14px;   /* 10,5px no mobile: abaixo disso a caixa alta espacada nao se le */
  font-weight: var(--w-semi);
  letter-spacing: 0.2em;
}
.caminho__nome {
  color: var(--tone-strong);
  fill: currentColor;
  font-family: var(--font-acento);
  font-style: italic;
  font-size: 30px;
  letter-spacing: -0.02em;
}
.caminho__dia {
  color: var(--tone-body);
  fill: currentColor;
  font-size: 15px;
}
.caminho__dia--fim { color: var(--accent); font-weight: var(--w-semi); }
/* onda do Dia 21: so existe na animacao (parada, fica invisivel) */
.caminho__onda { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }

/* Animacao de entrada (a classe --anima so entra com JS e sem movimento
   reduzido). A trilha tem pathLength="1": o dash de 1 cobre o caminho
   inteiro, e o offset de 1 a 0 desenha do Dia 1 ao Dia 21 em velocidade
   constante. Cada ponto e rotulo espera o seu --d, que e o instante em que
   a linha chega nele (2,8s de trilha). */
.caminho--anima { --caminho-ini: .3s; --caminho-dur: 2.8s; }
.caminho--anima .caminho__trilha { stroke-dasharray: 1; stroke-dashoffset: 1; }
.caminho--anima .caminho__ponto,
.caminho--anima .caminho__anel { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.caminho--anima text { opacity: 0; transform: translateY(6px); }
.caminho--anima .caminho__onda { transform-box: fill-box; transform-origin: center; }

.caminho.anda .caminho__trilha {
  animation: caminho-traca var(--caminho-dur) linear var(--caminho-ini) forwards;
}
.caminho.anda .caminho__ponto {
  animation: caminho-ponto .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--caminho-ini) + var(--d)) forwards;
}
.caminho.anda text {
  animation: caminho-texto .6s var(--ease-out) calc(var(--caminho-ini) + var(--d)) forwards;
}
.caminho.anda .caminho__anel {
  animation: caminho-ponto .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--caminho-ini) + var(--caminho-dur) + .1s) forwards;
}
.caminho.anda .caminho__onda {
  animation: caminho-onda 2.6s var(--ease-out) calc(var(--caminho-ini) + var(--caminho-dur) + .6s) infinite;
}
@keyframes caminho-traca { to { stroke-dashoffset: 0; } }
@keyframes caminho-ponto { to { transform: scale(1); } }
@keyframes caminho-texto { to { opacity: 1; transform: none; } }
@keyframes caminho-onda {
  0%   { transform: scale(.7); opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* =========================================================================
   SEMANAS — placeholder + cartao branco
   ========================================================================= */

.semanas { display: flex; flex-direction: column; gap: var(--s-5); }

.semana {
  display: grid;
  gap: var(--s-5);
  align-items: stretch;
}
@media (min-width: 900px) {
  .semana { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 15px; }
  .semana__capa { grid-column: span 3; }
  .semana__card { grid-column: span 9; }
}
/* capa do modulo na Greenn (320x480, a resolucao que a plataforma guarda).
   No celular ocupa a largura do cartao em recorte quadrado: o rosto fica
   entre 12% e 45% da altura e o titulo do modulo entre 64% e 85% nas tres
   capas, e a janela de 1:1 posicionada a 58% mostra de 19% a 86% */
.semana__capa { margin: 0; }
.semana__capa img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 58%;
  border-radius: calc(var(--r-midia) * .7);
  background: #17181a;
}
/* desktop: a capa ocupa a altura toda do cartao (cover corta so as laterais,
   o texto da capa fica no centro) */
@media (min-width: 900px) {
  .semana__capa { max-width: none; }
  .semana__capa img { aspect-ratio: auto; }
}

.semana__card {
  background: var(--bg-card);
  border-radius: var(--r-quadrado);
  padding: clamp(var(--s-6), 4vw, 51px) clamp(var(--s-5), 5vw, 67px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
}
.semana__topo { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.semana__chip {
  display: inline-flex;
  align-items: center;
  min-height: 41px;
  padding-inline: var(--s-5);
  background: var(--accent);
  color: #fff;
  font-size: var(--t-sm);
  line-height: 1;
}
.semana__nome {
  font-family: var(--font-acento);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
  color: var(--accent);
}
.semana__obj {
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--accent);
  max-width: 22ch;
}
.semana__txt { font-size: var(--t-sm); line-height: 1.4; }
.semana__foco { display: flex; flex-direction: column; gap: var(--s-2); }
/* o cartao ficou largo com a capa estreita: sem teto, as 4 tags caem 3 + 1.
   Com 560px quebram 2 + 2 nas tres semanas (maior par: 534px; menor trio: 721px) */
.semana__foco .tags { max-width: 560px; }
.semana__foco dt {
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.semana__foco dd { margin: 0; }

/* as etiquetas do "O foco": pilula fina, na familia do botao (redondo)
   e nao do placeholder (quadrado). */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags li {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--base-accent) 30%, transparent);
  background: color-mix(in srgb, var(--base-accent) 5%, transparent);
  font-size: var(--t-sm);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--accent);
}

/* =========================================================================
   BENTO — os 7 eixos em cartoes de larguras diferentes
   Seis colunas, tres linhas espelhadas: largo + pequeno / tres pequenos /
   pequeno + largo. A variacao vem da largura, nao de altura forcada: com
   row-span o cartao grande ficava com um vao vazio no meio, porque a copy
   de cada eixo e curta. Cada linha tem a altura do proprio conteudo.
   ========================================================================= */

.bento {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) and (max-width: 899px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__card--l { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento__card--l { grid-column: span 4; }
  .bento__card--p { grid-column: span 2; }
}

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--bg-card);
  border-radius: var(--r-quadrado);
  padding: clamp(var(--s-5), 2.6vw, var(--s-7));
  padding-inline-end: clamp(var(--s-7), 4vw, var(--s-8));  /* respiro do numero */
}

/* o numero fica na quina, discreto: quem organiza a leitura e o grid */
.bento__n {
  position: absolute;
  top: clamp(var(--s-4), 2vw, var(--s-5));
  right: clamp(var(--s-4), 2vw, var(--s-5));
  font-family: var(--font-acento);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1;
  /* cor cheia: a 55% dava 2,67:1. Discreto pelo tamanho, nao pelo apagado */
  color: var(--accent);
}

.bento__i {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.bento__t {
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--tone-strong);
}
.bento__d { font-size: var(--t-sm); line-height: 1.5; }

/* o largo: um degrau acima em tudo, e texto deitado ao lado do icone */
.bento__card--l .bento__i { width: 40px; height: 40px; }
.bento__card--l .bento__t { font-size: var(--t-h3); line-height: 1.25; letter-spacing: var(--track-h3); }
.bento__card--l .bento__d { font-size: var(--t-body); max-width: 40ch; }

/* =========================================================================
   PROVA SOCIAL
   ========================================================================= */

/* prints das alunas em mosaico parado. As tres colunas sao montadas no
   HTML para equilibrar as alturas (o print mais longo tem 2,4x o mais
   curto; columns do CSS empilharia os dois maiores na mesma coluna).
   Abaixo de 900px as colunas somem e vira carrossel de arrastar. */
.depos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}
.depos__col { display: grid; gap: var(--gutter); }

/* o print tem fundo transparente: o papel e o tracejado sao do cartao.
   O nome fica no topo do proprio print; a figcaption e so para leitor de tela. */
/* position: relative e obrigatorio: a figcaption .sr e absolute. Sem um pai
   posicionado dentro do carrossel, ela se ancora no .wrap, escapa do recorte
   do scroller (overflow nao recorta filho absolute de bloco externo) e
   alarga o conteudo em ~1400px; no iPhone o carrossel parou de arrastar. */
.depo {
  position: relative;
  margin: 0;
  background: var(--bg-base);
  border: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
}
.depo__print { display: block; width: 100%; height: auto; }

@media (max-width: 899px) {
  .depos {
    position: relative;  /* referencia do offsetLeft dos cartoes no JS */
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .depos::-webkit-scrollbar { display: none; }
  .depos__col { display: contents; }
  .depo { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; }
}

/* [01/out] bolinhas do carrossel: mostram que ha mais depoimentos e onde
   esta. A Yasmim nao percebia que dava pra passar ("nao rolam nem sozinhos
   nem na mao"). Montadas e acesas no JS; so existem abaixo de 900px. */
.depos__pontos { display: none; }
@media (max-width: 899px) {
  .depos__pontos {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-5);
  }
  .depos__pontos button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--base-accent) 25%, transparent);
    transition: width .3s ease, background-color .3s ease;
    cursor: pointer;
  }
  /* area de toque maior que a bolinha */
  .depos__pontos button { position: relative; }
  .depos__pontos button::after { content: ""; position: absolute; inset: -12px -6px; }
  .depos__pontos button[aria-current="true"] { width: 24px; background: var(--accent); }
}

/* [01/out] dois blocos na secao da plataforma (verbatim da Yasmim) */
.recursos {
  display: grid;
  gap: var(--gutter);
  margin-top: var(--s-8);
}
@media (min-width: 900px) { .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* cartao branco liso com sombra e o icone num circulo marsala (rodada ?v, B) */
.recurso {
  padding: clamp(var(--s-6), 4vw, var(--s-7));
  background: var(--bg-card);
  border-radius: var(--r-midia);
  box-shadow:
    0 30px 60px -40px color-mix(in srgb, var(--base-accent-d) 50%, transparent),
    0 0 0 1px var(--border);
}
.recurso__icone {
  display: block;
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 16px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  color: #fff;
  background: var(--cta-grad);
}
.recurso h3 {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);  /* 22 -> 30 */
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--tone-strong);
}
.recurso p {
  margin-top: var(--s-3);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--tone-body);
}

/* =========================================================================
   SOBRE A YASMIM — numeros e "onde ela ja esteve"
   ========================================================================= */

.numeros {
  display: grid;
  /* min-content, nao 0: "transformadas" nao cabe num terco de 335px e
     vazava da coluna. Assim a coluna cresce ate a palavra e as outras cedem */
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
  margin-top: var(--s-8);
  /* tracejado vinho, o mesmo filete das caixas de destaque e do caminho */
  border-block: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
}
.numeros__item {
  display: flex;
  flex-direction: column-reverse;   /* o numero em cima, o rotulo embaixo */
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-3);
}
.numeros__item + .numeros__item { border-left: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent); }
/* as pontas encostam na grade: no mobile cada px da ultima coluna conta */
.numeros__item:first-child { padding-inline-start: 0; }
.numeros__item:last-child  { padding-inline-end: 0; }
.numeros dd {
  margin: 0;   /* o navegador da 40px de recuo ao dd */
  font-size: clamp(1.625rem, 1.1rem + 2.6vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.numeros dt { font-size: var(--t-sm); line-height: 1.3; }
@media (min-width: 900px) {
  .numeros__item { padding: var(--s-7) var(--s-6); }
  .numeros__item:first-child { padding-inline-start: 0; }
  .numeros__item:last-child  { padding-inline-end: 0; }
}

.esteve { margin-top: var(--s-8); }
.esteve__titulo { margin-bottom: var(--s-6); }
.esteve__grade {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
@media (min-width: 640px) { .esteve__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .esteve__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.esteve__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--bg-card);
  padding: var(--s-3);
}
.esteve__card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-placeholder);
}
.esteve__card p {
  font-size: clamp(0.875rem, 0.84rem + 0.14vw, 0.9375rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* =========================================================================
   OFERTA
   ========================================================================= */

/* O unico bloco escuro da pagina: o cartao da oferta em marsala.
   Dois contornos — o filete claro colado na caixa e o anel vinho
   afastado 8px — para destacar sem engrossar a borda. */
.oferta {
  position: relative;
  background: linear-gradient(142deg, var(--base-accent-d) 0%, #4a1220 100%);
  color: color-mix(in srgb, #fff 88%, transparent);
  border: 1px solid color-mix(in srgb, #fff 24%, transparent);
  outline: 1px solid color-mix(in srgb, var(--base-accent) 32%, transparent);
  outline-offset: 8px;
  box-shadow: 0 34px 70px -46px color-mix(in srgb, var(--base-accent-d) 85%, transparent);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  display: grid;
  gap: var(--s-7);
}
@media (min-width: 900px) { .oferta { grid-template-columns: 1fr minmax(0, 26rem); gap: var(--s-8); } }
/* no mobile o cartao devolve 8px de cada lado: e o que faz a nota de
   pagamento caber numa linha a partir de 375 */
@media (max-width: 599px) { .oferta { padding-inline: var(--s-5); } }

.oferta .inclui li { color: #fff; }
.oferta .inclui svg { color: color-mix(in srgb, #fff 78%, transparent); }
.oferta .preco__rot, .oferta .preco__cond { color: color-mix(in srgb, #fff 88%, transparent); }
.oferta .preco__valor { color: #fff; }
.oferta .preco__nota { color: color-mix(in srgb, #fff 76%, transparent); }

/* no escuro o botao inverte: papel com texto marsala. E o brilho que
   varre vira escuro, senao some no claro. */
.oferta .cta {
  background: var(--base-paper);
  color: var(--base-accent-d);
  box-shadow: 0 2px 14px -4px rgba(0, 0, 0, .45);
}
.oferta .cta::after { background: #fff; }
.oferta .cta::before {
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--base-accent) 16%, transparent) 50%,
    transparent 100%);
}
.oferta .cta:hover, .oferta .cta:focus-visible {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .55);
}

/* a linha divisoria entre lista e preco, no desktop */
@media (min-width: 900px) {
  .oferta .preco {
    padding-left: var(--s-8);
    border-left: 1px solid color-mix(in srgb, #fff 18%, transparent);
  }
}

.inclui { display: flex; flex-direction: column; gap: var(--s-4); }
.inclui li { display: grid; grid-template-columns: 21px 1fr; gap: var(--s-4); align-items: start; font-size: var(--t-body); }
.inclui svg { width: 21px; height: 21px; color: var(--accent); margin-top: .2em; }

.preco { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; justify-content: center; }
.preco__rot { font-size: var(--t-body); color: var(--tone-body); }
.preco__valor {
  font-size: clamp(2.75rem, 2.0rem + 3.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--accent);
}
/* "12x de" menor e na linha de base: o número da parcela é o que pesa */
.preco__x { font-size: .38em; letter-spacing: -0.01em; vertical-align: baseline; margin-right: .1em; }
.preco__cond { font-size: var(--t-body); }
.preco .cta { align-self: stretch; margin-top: var(--s-3); padding-inline: var(--s-5); font-size: var(--t-body); }
/* uma linha so, ate no 375: fonte um degrau abaixo do --t-sm e cada item
   com nowrap. Se a tela for estreita demais, quebra entre os itens, nunca
   no meio de um. */
.preco__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-size: clamp(0.8125rem, 0.78rem + 0.14vw, 0.9375rem);  /* 13 -> 15 */
  letter-spacing: -0.01em;
  color: var(--tone-muted);
}
.preco__nota > span:not(.sr) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.preco__nota svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* =========================================================================
   GARANTIA
   ========================================================================= */

.garantia {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  background: var(--bg-card);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
}
@media (min-width: 900px) { .garantia { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-7); } }
@media (max-width: 899px) { .garantia { justify-items: center; text-align: center; } }
.garantia h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); color: var(--tone-strong); }
.garantia p { margin-top: var(--s-4); font-size: var(--t-body); max-width: 52ch; }

/* =========================================================================
   SELO DA GARANTIA — aro de texto girando
   Tres camadas: o aro tracejado (volta devagar no sentido contrario),
   o texto em textPath e o miolo com o 7. Decorativo: o prazo esta escrito
   no h3 ao lado, entao o selo inteiro e aria-hidden.
   ========================================================================= */

.selo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(136px, 16vw, 180px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.selo__aro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: selo-gira 26s linear infinite;
}
.selo__aro text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--w-semi);
  /* o fechamento do circulo e do textLength no HTML; o tracking daqui e
     so o ponto de partida, o navegador redistribui o espaco */
  letter-spacing: .18em;
  fill: var(--accent);
}
.selo__tracejado {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--base-accent) 42%, transparent);
  animation: selo-gira 44s linear infinite reverse;
}
.selo__miolo {
  position: relative;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cta-grad);
  color: #fff;
  font-family: var(--font-acento);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
}
@keyframes selo-gira { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .selo__aro, .selo__tracejado { animation: none; }
}

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .faq { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); } }
.faq__titulo { align-self: start; }
@media (min-width: 900px) { .faq__titulo { position: sticky; top: var(--s-7); } }

.faq__lista { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  min-height: 56px;
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  color: var(--tone-strong);
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 14px;
  width: 14px; height: 14px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate var(--dur-ui) var(--ease-io);
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq details p { padding-bottom: var(--s-5); max-width: 62ch; font-size: var(--t-body); }

/* =========================================================================
   FECHAMENTO + RODAPE
   ========================================================================= */

.fechamento { text-align: center; }
.fechamento .prosa { align-items: center; }
.fechamento .prosa p { max-width: 46ch; }
.fechamento .cta { align-self: center; }

/* o fechamento dentro de um cartao com o mesmo contorno tracejado das
   frases em destaque. Dentro da caixa o h2 desce um degrau (h3): a 42px
   a frase ocupava tres linhas largas e o cartao virava um bloco de titulo */
.fechamento__card {
  max-width: 60rem;
  margin-inline: auto;
  background: var(--bg-card);
  border: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
  padding: clamp(var(--s-7), 6vw, 88px) clamp(var(--s-5), 6vw, 96px);
}
.fechamento__card .cabeca { margin-bottom: var(--s-6); }
.fechamento__card .cabeca h2 {
  font-size: var(--t-h3);
  line-height: 1.35;
  letter-spacing: var(--track-h3);
  max-width: 28em;
  text-wrap: balance;
}
.fechamento__card .prosa { gap: var(--s-4); }
.fechamento__card .prosa p { text-wrap: pretty; }
.fechamento__remate { color: var(--tone-strong); }
.fechamento__card .cta { margin-top: var(--s-6); }
/* mobile: menos recuo lateral e titulo sem balance (em 290px o balance
   picotava a frase em 6 linhas curtas); o botao cabe em uma linha */
@media (max-width: 599px) {
  .fechamento__card { padding: var(--s-7) var(--s-4); }
  .fechamento__card .cabeca h2 { font-size: 1.375rem; text-wrap: pretty; }
  .fechamento__card .cta {
    align-self: stretch;
    padding-inline: var(--s-4);
    font-size: var(--t-body);
    white-space: nowrap;
  }
}
/* abaixo de 360 o texto (251px) nao cabe mais: volta a quebrar */
@media (max-width: 359px) { .fechamento__card .cta { white-space: normal; } }

.rodape {
  margin-top: var(--sec-m);
  padding-block: var(--s-7);
  border-top: 1px solid var(--border);
}
.rodape__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  font-size: var(--t-sm);
  color: var(--tone-muted);
}
.rodape svg { width: 180px; color: var(--tone-strong); }

/* =========================================================================
   NEVOA DO PE DA PAGINA
   Faixa fixa que desfoca o que passa por baixo. Mesma tecnica do site da
   Auth One. Precisa nascer fora do <main> (que tem overflow-x: clip, e
   clip vira bloco de conteudo para position: fixed) — quem cria e o JS,
   direto no <body>. Some quando a pagina chega ao fim.
   ========================================================================= */

.nevoa {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 120px;
  z-index: 30;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 22%, transparent 100%);
  transition: opacity var(--dur-ui) var(--ease-io);
}
.nevoa--fim { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .nevoa { display: none; } }

/* =========================================================================
   REVEAL — opacidade + deslocamento + desfoque que resolve
   Conteudo nasce visivel; o reveal melhora a entrada, nao a produz.
   ========================================================================= */

.rv { opacity: 1; }
.js .rv {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(32px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              filter var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.js .rv.dentro { opacity: 1; filter: blur(0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1; filter: none; transform: none; }
}

/* =========================================================================
   AUXILIARES DE COMPOSICAO
   ========================================================================= */

/* a quebra do titulo e decidida por nos, mas so vale onde ela cabe:
   no mobile o texto reflui sozinho. */
.br-d { display: none; }
@media (min-width: 900px) { .br-d { display: inline; } }
.br-m { display: inline; }
@media (min-width: 900px) { .br-m { display: none; } }

/* o titulo de dentro do bloco de texto — um degrau abaixo do h2 */
.cabeca-interna {
  font-size: var(--t-h3);
  line-height: 1.35;
  letter-spacing: var(--track-h3);
  color: var(--tone-strong);
  max-width: 22em;
}

/* centralizado so no mobile: no desktop a coluna de texto segue a
   esquerda, como o restante da pagina */
@media (max-width: 899px) {
  .prosa--centro { text-align: center; align-items: center; }
  .prosa--centro p { max-width: 42ch; }
}

.remate {
  margin-top: var(--s-7);
  font-size: var(--t-body);
  color: var(--tone-strong);
}
.remate strong { color: var(--accent); }

/* .cta e inline-flex: margin-inline auto nao centraliza. Vira flex de
   largura propria para poder ser centralizado de verdade. */
.cta--solto { margin-top: var(--s-7); }
.cta--centro { display: flex; width: fit-content; margin-inline: auto; }
@media (max-width: 899px) { .cta--centro { width: 100%; } }

.lista--quem li { font-size: var(--t-body); }

/* =========================================================================
   PAGINA DE OBRIGADO
   ========================================================================= */

.obrigado { min-height: 100svh; display: flex; flex-direction: column; }
.obrigado__corpo { flex: 1; padding-block: var(--sec-m); }
/* mesmo degrau e mesma tinta do titulo do hero da LP: "Pronto." no cinza
   do corpo ficava apagado ao lado do acento */
.obrigado__titulo {
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
  color: var(--tone-strong);
}

.passos { display: grid; gap: var(--s-5); margin-block: var(--s-7); }
@media (min-width: 900px) { .passos { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }

/* o tracejado vinho e o mesmo dos destaques, dos numeros e do fechamento da LP */
.passo {
  background: var(--bg-card);
  border: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.passo__n {
  font-family: var(--font-acento);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--accent);
}
.passo h2 {
  font-size: var(--t-lead);
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--tone-strong);
}
.passo p { font-size: var(--t-sm); line-height: 1.5; }

/* botao e nota num cartao so, como o "Para começar" da LP */
.obrigado__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  background: var(--bg-card);
  border: 1px dashed color-mix(in srgb, var(--base-accent) 45%, transparent);
  padding: var(--s-6);
}
@media (min-width: 900px) {
  .obrigado__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-6) var(--s-7);
  }
}
@media (max-width: 599px) {
  .obrigado__card { padding: var(--s-6) var(--s-4); }
  .obrigado__card .cta { align-self: stretch; padding-inline: var(--s-4); font-size: var(--t-body); }
}
.obrigado__nota { font-size: var(--t-sm); color: var(--tone-muted); }
.obrigado__nota a { color: var(--accent); }