/* Página de vendas · MasterClass Faça e Venda. Base + seções, na ordem da página.
   Valores vêm do tokens.css (central de ajustes). */

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { font: 400 var(--t-texto)/1.6 var(--fonte-texto); color: var(--tinta); background: var(--creme-fio); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--mel); color: var(--tinta); }

h1, h2 { font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
/* frases de destaque: serifa itálica (v2) */
h1 em, h2 em, .bordao, .frase-final, .rolo, .parcela strong, .gabi__frase, .citacao blockquote {
  font-family: var(--fonte-destaque); font-style: italic; font-weight: 500;
  letter-spacing: -.01em; font-variation-settings: "opsz" 60; text-wrap: balance;
}
h1 em, h2 em { color: var(--terracota-escuro); }
.escura h2 em { color: var(--mel); }
.bordao, .frase-final, .rolo, .gabi__frase, .citacao blockquote { line-height: 1.1; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font: 700 var(--t-h3)/1.3 var(--fonte-texto); }
p, li { text-wrap: pretty; }
.tc { color: var(--terracota); }
.mel { color: var(--mel); }
.centro { text-align: center; margin-inline: auto; }
.lead { font-size: var(--t-lead); color: var(--tinta-apagada); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteudo { width: min(100% - 2 * var(--lateral), var(--largura)); margin-inline: auto; }
.secao { position: relative; padding-block: var(--secao-y); }
.topo-secao { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); display: grid; gap: var(--e-2); }
.topo-secao.centro { justify-items: center; text-align: center; }

.ic { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* cartões (referência: raio 22, contorno interno fino, sem sombra) */
.cartao { position: relative; background: var(--branco); border-radius: var(--raio-cartao); box-shadow: var(--linha-claro); padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); transition: transform var(--medio) var(--curva-saida), box-shadow var(--medio) var(--curva); }
.cartao-escuro { position: relative; background: var(--noite-cartao); border-radius: var(--raio-cartao); box-shadow: var(--linha-escuro); padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); transition: transform var(--medio) var(--curva-saida), box-shadow var(--medio) var(--curva); }
.cartao .ic { color: var(--terracota); }
.cartao-escuro .ic { color: var(--mel); }
/* hover autoral: o contorno vira fio terracota (claro) ou mel (escuro) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cartao:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--terracota); }
  .cartao-escuro:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mel) 70%, transparent); }
}

/* foto que ainda falta (opção B da copy): moldura lilás com o aviso */
.foto-pendente { aspect-ratio: 4 / 3; border-radius: calc(var(--raio-cartao) - 8px); display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; padding: 1rem;
  background: repeating-linear-gradient(135deg, var(--creme-papel) 0 10px, color-mix(in srgb, var(--terracota) 14%, var(--creme-papel)) 10px 20px);
  color: var(--terracota-escuro); font: 600 var(--t-rotulo)/1.3 var(--fonte-texto); }
.foto-pendente .ic { width: 2rem; height: 2rem; color: var(--terracota-escuro); }

/* ================= BOTÃO DE COMPRA =================
   v2: terracota escuro no claro, mel no escuro. Ícone encaixado numa peça clara.
   Hover: sobe 2px, sombra curta e o carrinho dá um tranco para a frente. */
.botao { display: inline-flex; align-items: center; gap: .9rem; max-width: 100%;
  padding: .5rem .5rem .5rem 1.4rem; border-radius: var(--raio); border: 0; cursor: pointer;
  font: 700 var(--t-botao)/1.25 var(--fonte-texto); text-align: left;
  transition: translate var(--medio) var(--curva-saida), box-shadow var(--medio) var(--curva-saida), background-color var(--rapido) var(--curva); }
.botao--compra { background: var(--terracota-escuro); color: var(--branco); }
.botao__icone { display: grid; place-items: center; flex: none; width: 2.9rem; height: 2.9rem; border-radius: calc(var(--raio) - 5px); background: var(--creme-fio); color: var(--terracota-escuro); transition: background-color var(--rapido) var(--curva); }
.botao__icone .ic { width: 1.35rem; height: 1.35rem; transition: translate var(--medio) var(--curva-saida); }
.botao:hover, .botao:focus-visible { translate: 0 -2px; box-shadow: var(--sombra-1); }
.botao:hover .botao__icone { background: var(--mel); }
.botao:hover .botao__icone .ic { translate: 3px 0; }
.botao:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; }
.botao:active { translate: 0 0; box-shadow: none; }

/* ================= 0 · TARJA ================= */
.faixa { background: var(--noite); color: var(--creme-fio); overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--mel) 45%, transparent); }
.faixa__trilho { display: flex; align-items: center; gap: 1.6rem; width: max-content; padding-block: .6rem; animation: corre 38s linear infinite; }
.faixa span { font: 600 var(--t-rotulo)/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.faixa i { width: 1px; height: .9em; background: var(--mel); }
@keyframes corre { to { transform: translateX(-50%); } }

/* ================= 1 · HERO ================= */
.hero { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2.5rem, 2rem + 3vw, 4rem); }
.hero__grade { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.hero__texto { display: grid; gap: var(--e-3); justify-items: start; }
.hero__logo { width: clamp(11rem, 8rem + 9vw, 15rem); height: auto; }
.hero h1 { max-width: 19ch; }
/* telas baixas: o botão tem que aparecer na primeira tela */
@media (max-height: 820px) and (min-width: 900px) { .hero h1 { font-size: clamp(2.3rem, 1.2rem + 3vw, 3.9rem); } .hero__texto { gap: var(--e-2); } .hero { padding-top: 1.1rem; } }
@media (max-height: 700px) and (max-width: 899px) { .hero h1 { font-size: 2.05rem; } .hero__mesmo { font-size: 1rem; } }
.preco-destaque { color: var(--terracota); white-space: nowrap; }
.hero__mesmo { font-size: var(--t-lead); color: var(--tinta-apagada); max-width: 34rem; margin-top: -.4rem; }
/* v2: uma caixinha por benefício */
.beneficios { display: grid; gap: .7rem; width: 100%; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.beneficios li { display: grid; gap: .7rem; align-content: start; padding: 1rem 1.05rem 1.1rem; border-radius: 18px; background: var(--branco); box-shadow: var(--linha-claro); font: 600 .97rem/1.4 var(--fonte-texto); text-wrap: balance; }
.beneficios .ic { width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 12px; background: color-mix(in srgb, var(--terracota) 13%, var(--creme-fio)); color: var(--terracota-escuro); }
/* celular: caixinha baixa, ícone ao lado, para o botão caber na primeira tela */
@media (max-width: 899px) {
  .hero__texto { gap: var(--e-2); }
  .beneficios { gap: .45rem; }
  .beneficios li { grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .55rem .8rem .55rem .55rem; border-radius: 14px; font-size: .9rem; line-height: 1.3; text-wrap: pretty; }
  .beneficios .ic { width: 2rem; height: 2rem; padding: .45rem; border-radius: 10px; }
  .hero__logo { width: 9.5rem; }
}

.ver-de-perto { display: inline-flex; align-items: center; gap: .75rem; font: 700 var(--t-botao)/1 var(--fonte-texto); color: var(--tinta); padding: .35rem .35rem .35rem 1.1rem; border-radius: var(--raio); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 18%, transparent); transition: box-shadow var(--rapido) var(--curva); }
.ver-de-perto__ic { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: calc(var(--raio) - 5px); background: var(--terracota); color: var(--branco); overflow: hidden; }
.ver-de-perto__ic .ic { width: 1.15rem; height: 1.15rem; }
.ver-de-perto:hover { box-shadow: inset 0 0 0 1px var(--terracota); }
@media (prefers-reduced-motion: no-preference) {
  .ver-de-perto__ic .ic { animation: desce 2.4s var(--curva) infinite; }
}
@keyframes desce { 0%, 55% { translate: 0 0; opacity: 1; } 75% { translate: 0 120%; opacity: 0; } 76% { translate: 0 -120%; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }

.hero__midia { position: relative; justify-self: center; width: min(100%, 30rem); padding: 0 0 2.6rem 0; }
.moldura { position: relative; border-radius: var(--raio-foto); overflow: hidden; box-shadow: var(--linha-claro); }
.moldura img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto { aspect-ratio: 4 / 5; width: 82%; margin-left: auto; }
.hero__foto img { object-position: 50% 20%; }
.hero__kit { position: absolute; left: 0; bottom: 0; width: 56%; background: var(--branco); border-radius: var(--raio-cartao); padding: .5rem .5rem .75rem; box-shadow: var(--linha-claro), var(--sombra-1); rotate: -3deg; }
.hero__kit img { border-radius: calc(var(--raio-cartao) - 8px); aspect-ratio: 3 / 2; object-fit: cover; }
.hero__kit figcaption { font: 700 var(--t-rotulo)/1.25 var(--fonte-texto); padding: .55rem .3rem 0; display: grid; }
.hero__kit figcaption span { font-weight: 500; color: var(--tinta-apagada); }
/* etiqueta kraft pendurada (o tema: a etiqueta da peça) */
.etiqueta-preco { position: absolute; top: 8%; left: 4%; padding: 1.4rem 1rem .8rem; background: var(--mel); color: var(--tinta); border-radius: 6px 6px 10px 10px; clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); font: italic 600 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1 var(--fonte-destaque); text-align: center; rotate: 6deg; transform-origin: 50% 0; }
.etiqueta-preco::before { content: ""; position: absolute; top: .45rem; left: 50%; width: .5rem; height: .5rem; margin-left: -.25rem; border-radius: 50%; background: var(--creme-fio); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 35%, transparent); }
.etiqueta-preco small { display: block; font: 600 .62rem/1 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
@media (prefers-reduced-motion: no-preference) {
  .etiqueta-preco { animation: balanca 5s ease-in-out infinite; }
}
@keyframes balanca { 0%, 100% { rotate: 6deg; } 50% { rotate: 1deg; } }

.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--fio-claro); }
.selos li { display: flex; align-items: center; gap: .5rem; font: 600 var(--t-rotulo)/1.2 var(--fonte-texto); }
.selos .ic { color: var(--terracota); width: 1.3rem; height: 1.3rem; }

@media (min-width: 900px) {
  .hero__grade { grid-template-columns: 1.3fr .7fr; }
  .hero__midia { width: 100%; max-width: 29rem; justify-self: end; }
  .hero__foto { max-height: min(64svh, 34rem); }
}

/* ================= 2 · VEJA DE PERTO =================
   v2: sálvia clara (fio verde da logo) no lugar do lilás */
.perto { background: var(--salvia-clara); }
.perto__grade { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
.perto__cartao { display: grid; gap: .55rem; align-content: start; }
.perto__cartao .foto-pendente { margin-bottom: .45rem; }
.perto__cartao p { color: var(--tinta-apagada); }
.perto__cartao .foto-pendente { aspect-ratio: 16 / 9; }
@media (min-width: 560px) { .perto__grade { grid-template-columns: 1fr 1fr; } .perto__cartao .foto-pendente { aspect-ratio: 4 / 3; } }
@media (min-width: 1000px) { .perto__grade { grid-template-columns: repeat(4, 1fr); } }
.citacao { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; display: grid; gap: .6rem; }
.citacao blockquote { font-size: var(--t-frase); color: var(--terracota-escuro); }
.citacao figcaption { font: 600 var(--t-rotulo)/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-apagada); }

/* ================= SEÇÕES ESCURAS ================= */
.escura { background: var(--noite); color: var(--creme-fio); }
.escura h2 { color: var(--creme-fio); }

/* ================= TRANSIÇÕES · BICO DE CROCHÊ (v2) =================
   a seção de baixo sobe sobre a de cima com a borda em bico (picô),
   e uma carreira de pontos logo abaixo. Ao entrar na tela o bico "cresce". */
.bico { --bico: 15px; }
.bico::before, .bico::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.bico::before { top: calc(-1 * var(--bico) + 1px); height: var(--bico);
  background: radial-gradient(circle var(--bico) at 50% 100%, var(--bico-cor) 96%, transparent 100%) 0 0 / calc(var(--bico) * 2) var(--bico) repeat-x;
  transform-origin: bottom; }
.bico::after { top: 12px; height: 3px; opacity: .35;
  background: repeating-linear-gradient(90deg, var(--bico-ponto, var(--terracota)) 0 9px, transparent 9px 15px); }
.anim-pronta .bico::before { scale: 1 0; transition: scale .9s var(--curva-saida); }
.anim-pronta .bico::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--curva) .2s; }
.anim-pronta .bico.visivel::before { scale: 1 1; }
.anim-pronta .bico.visivel::after { clip-path: inset(0 0 0 0); }
.perto { --bico-cor: var(--salvia-clara); }
.dor, .recebe, .gabi { --bico-cor: var(--noite); --bico-ponto: var(--mel); }
.ponte, .aulas, .opcoes, .faq, .preco { --bico-cor: var(--creme-fio); }
.quem { --bico-cor: var(--creme-papel); }

/* ================= 3 · DOR ================= */
/* v2: em vez de cartões, uma sequência de cenas em linhas, como um diário.
   A frase dita é grande, em itálico; o fio mel desce marcando cada cena. */
.dor__titulo { max-width: 18ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.dor__grade { position: relative; max-width: 64rem; margin-inline: auto; counter-reset: cena; }
.dor__grade::before { content: ""; position: absolute; left: .55rem; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--mel) 55%, transparent); transform-origin: top; scale: 1 var(--progresso, 1); }
.dor__grade li { position: relative; display: grid; gap: .35rem 2rem; padding: clamp(1.1rem, .9rem + 1vw, 1.8rem) 0 clamp(1.1rem, .9rem + 1vw, 1.8rem) 2.6rem; border-bottom: 1px solid var(--fio-escuro); counter-increment: cena; transition: background-color var(--medio) var(--curva); }
.dor__grade li::before { content: ""; position: absolute; left: .2rem; top: calc(clamp(1.1rem, .9rem + 1vw, 1.8rem) + .55em); width: .8rem; height: .8rem; border-radius: 50%; background: var(--noite); box-shadow: inset 0 0 0 2px var(--mel); }
.dor__grade li::after { content: counter(cena, decimal-leading-zero); position: absolute; right: 0; top: clamp(1.1rem, .9rem + 1vw, 1.8rem); font: 600 var(--t-rotulo)/1 var(--fonte-texto); letter-spacing: .1em; color: var(--creme-apagado); opacity: .6; }
.dor__grade h3 { font: italic 500 clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem)/1.1 var(--fonte-destaque); color: var(--creme-fio); letter-spacing: -.01em; padding-right: 2.5rem; transition: translate var(--medio) var(--curva-saida), color var(--rapido) var(--curva); }
.dor__grade p { color: var(--creme-apagado); max-width: 30rem; font-size: clamp(1rem, .96rem + .2vw, 1.12rem); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dor__grade li:hover h3 { translate: .5rem 0; color: var(--mel); }
}
@media (min-width: 800px) { .dor__grade li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; padding-right: 3rem; } .dor__grade h3 { padding-right: 0; } }
.dor__fecho { display: grid; gap: var(--e-3); max-width: 46rem; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; text-align: center; }
.dor__fecho p { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.45; }
.dor__fecho q { color: var(--mel); quotes: "\201C" "\201D"; }

/* ================= 4 · PONTE ================= */
.ponte h2 { max-width: 24ch; }
.ponte__grade { display: grid; gap: var(--e-3); }
.ponte__cartoes { display: grid; gap: var(--e-2); }
.ponte__cartoes .cartao { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1rem, .6rem + 1.2vw, 1.6rem); row-gap: .2rem; align-items: center; overflow: hidden; }
/* v2: números grandes em itálico, saindo do cartão */
.ponte__cartoes .num { grid-row: span 2; font: italic 500 clamp(4.2rem, 3rem + 4vw, 6.2rem)/.8 var(--fonte-destaque); color: var(--terracota); letter-spacing: -.04em; min-width: 1.3ch; margin-block: -.1em; font-variation-settings: "opsz" 60; }
.ponte__cartoes h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
.ponte__cartoes .ic { display: none; }
.ponte__cartoes p { color: var(--tinta-apagada); grid-column: 2; }
.teste { background: var(--creme-papel); border-radius: var(--raio-cartao); box-shadow: var(--linha-claro); padding: clamp(.9rem, .7rem + .6vw, 1.2rem); display: grid; gap: var(--e-3); }
.teste__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: calc(var(--raio-cartao) - 8px); overflow: hidden; }
.teste__fotos .foto-pendente { border-radius: 0; aspect-ratio: 1; }
.foto-pendente--limpa { background: repeating-linear-gradient(135deg, var(--creme-fio) 0 10px, color-mix(in srgb, var(--salvia) 22%, var(--creme-fio)) 10px 20px); color: var(--tinta); }
.foto-pendente--limpa .ic { color: var(--tinta); }
.teste__texto { display: grid; gap: .6rem; padding: 0 .4rem .4rem; }
.teste__texto h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.teste__solucao { font-weight: 600; color: var(--terracota-escuro); }
@media (min-width: 900px) { .ponte__grade { grid-template-columns: .9fr 1.1fr; align-items: stretch; } .teste { grid-template-columns: 1fr 1fr; align-items: center; } }
.bordao { font-size: var(--t-bordao); color: var(--terracota); text-align: center; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); line-height: 1; }

/* ================= 4B · O QUE MUDA =================
   transição: o fio do novelo atravessa a divisa e se desenha ao entrar */
.muda { background: var(--mel-claro); padding-top: calc(var(--secao-y) + 2rem); }
.fio-passagem { position: absolute; top: -45px; left: 0; width: 100%; height: 90px; overflow: visible; pointer-events: none; }
.fio-passagem path { fill: none; stroke: var(--fio-cor); stroke-width: var(--fio-larg); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.muda__grade { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.muda__texto { display: grid; gap: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.muda h2 { max-width: 22ch; }
.muda h2 em { white-space: nowrap; }
.muda__frase { font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem); line-height: 1.45; max-width: 34rem; padding-left: 1.1rem; border-left: 2px solid var(--terracota); }
@media (min-width: 900px) { .muda__grade { grid-template-columns: 1.15fr .85fr; } }

.conversa { justify-self: center; width: min(100%, 22rem); background: var(--branco); border-radius: 26px; box-shadow: var(--linha-claro), var(--sombra-1); overflow: hidden; rotate: 2deg; }
.conversa__topo { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; background: var(--creme-papel); }
.conversa__topo div { display: grid; line-height: 1.2; }
.conversa__topo small { color: var(--tinta-apagada); font-size: .78rem; }
.conversa__avatar { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--salvia); }
.conversa__corpo { display: grid; gap: .55rem; padding: 1.1rem 1rem; background: var(--creme-fio); }
.msg { max-width: 82%; padding: .6rem .85rem; border-radius: 16px; font-size: .95rem; line-height: 1.4; }
.msg--ela { background: var(--branco); box-shadow: var(--linha-claro); border-bottom-left-radius: 4px; }
.msg--tu { justify-self: end; background: color-mix(in srgb, var(--salvia) 30%, var(--branco)); border-bottom-right-radius: 4px; }
.conversa__nota { display: block; padding: .45rem 1rem .6rem; font-size: .72rem; color: var(--tinta-apagada); background: var(--creme-fio); text-align: center; }

/* ================= 5 · AULAS ================= */
.selo-canhota { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: 999px; background: var(--creme-papel); box-shadow: var(--linha-claro); font: 700 var(--t-rotulo)/1 var(--fonte-texto); }
.selo-canhota .ic { width: 1.15rem; height: 1.15rem; color: var(--terracota); transform: scaleX(-1); }
.aulas__grade { display: grid; gap: var(--e-5); }
.aula { display: grid; gap: var(--e-2); align-content: start; }
.aula__foto { border-radius: var(--raio-cartao); overflow: hidden; aspect-ratio: 5 / 2; box-shadow: var(--linha-claro); }
.aula__foto img { width: 100%; height: 100%; object-fit: cover; }
.aula__nome { font: 600 var(--t-rotulo)/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--terracota-escuro); }
.aula__nome strong { font-weight: 800; }
/* linha do tempo: o fio terracota desce ligando os passos */
.linha { position: relative; display: grid; gap: 1.1rem; padding-left: 3.1rem; }
.linha::before { content: ""; position: absolute; left: 1.05rem; top: .6rem; bottom: .6rem; width: var(--fio-larg); background: var(--fio-cor); border-radius: 2px; transform-origin: top; scale: 1 var(--progresso, 1); }
.linha li { position: relative; }
.linha__n { position: absolute; left: -3.1rem; top: -.15rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--creme-fio); box-shadow: inset 0 0 0 var(--fio-larg) var(--terracota); font: italic 600 1.15rem/1 var(--fonte-destaque); color: var(--terracota-escuro); }
.linha h3 { margin-bottom: .15rem; }
.linha p { color: var(--tinta-apagada); }
.aula__resultado { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--raio-cartao); background: var(--creme-papel); font-weight: 600; }
.aula__resultado .ic { color: var(--terracota); }
.aulas__nota { display: grid; gap: .5rem; max-width: 46rem; margin: var(--e-5) auto 0; text-align: center; color: var(--tinta-apagada); }
@media (min-width: 900px) { .aulas__grade { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 1rem + 3vw, 4rem); } }

/* ================= 6 · TUDO QUE TU RECEBE =================
   v2: grade de 3 colunas (o cartão principal ocupa 2 linhas, sem buraco no fim);
   valor grande em itálico, sempre no pé do cartão. */
.recebe h2 { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.recebe__grade { display: grid; gap: .8rem; }
.recebe__grade .cartao-escuro { display: flex; flex-direction: column; gap: .45rem; }
.recebe__grade p { color: var(--creme-apagado); }
.recebe__grade .valor { margin-top: auto; padding-top: .9rem; font: italic 600 clamp(1.35rem, 1.1rem + .9vw, 1.9rem)/1.15 var(--fonte-destaque); color: var(--mel); letter-spacing: -.01em; }
.recebe__grade .valor small { display: block; font: 600 var(--t-rotulo)/1 var(--fonte-texto); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--creme-apagado); margin-bottom: .35rem; }
.recebe__principal { background: color-mix(in srgb, var(--terracota-escuro) 55%, var(--noite)); justify-content: center; }
.recebe__principal h3 { display: flex; gap: .6rem; align-items: center; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.recebe__principal div { display: grid; gap: .45rem; }
.recebe__principal .valor { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.recebe__logo { width: 9rem; height: auto; margin-bottom: .6rem; }
@media (min-width: 640px) { .recebe__grade { grid-template-columns: 1fr 1fr; } .recebe__principal { grid-column: span 2; } }
@media (min-width: 1000px) {
  .recebe__grade { grid-template-columns: repeat(3, 1fr); }
  .recebe__principal { grid-column: auto; grid-row: span 2; }
  .recebe__logo { width: 13rem; }
  .recebe__largo { grid-column: span 2; }
}
.recebe__duplo { gap: 1.1rem !important; }
.recebe__duplo div { display: grid; gap: .45rem; }
.recebe__duplo div + div { padding-top: 1.1rem; border-top: 1px solid var(--fio-escuro); }

/* ================= 7 · PRA QUEM É ================= */
.quem { background: var(--creme-papel); }
.quem__grade { display: grid; gap: var(--e-3); }
.quem__coluna { border-radius: var(--raio-cartao); padding: clamp(1.3rem, 1rem + 1.2vw, 2.2rem); }
.quem__coluna h2 { margin-bottom: var(--e-3); }
.quem__coluna ul { display: grid; gap: .9rem; }
.quem__coluna li { display: flex; gap: .75rem; align-items: flex-start; }
.quem__sim { background: var(--branco); box-shadow: var(--linha-claro); }
.quem__sim li { font-weight: 600; }
.quem__sim .ic { color: var(--terracota); }
.quem__nao { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 18%, transparent); color: var(--tinta-apagada); }
.quem__nao h2 { color: var(--tinta-apagada); }
.quem__nao .ic { color: var(--tinta-apagada); }
@media (min-width: 900px) { .quem__grade { grid-template-columns: 1.1fr .9fr; } }

/* ================= 8 · PREÇO (ingresso, como na referência) =================
   v2: claro, nas cores do topo (creme, branco e terracota). */
.preco { background: var(--creme-fio); }
.ingresso { display: grid; border-radius: var(--raio-cartao); background: var(--branco); box-shadow: var(--linha-claro), var(--sombra-1); overflow: hidden; }
.ingresso__corpo { padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); display: grid; gap: var(--e-3); align-content: start; }
.recap { display: grid; gap: .7rem; }
.recap li { display: flex; align-items: baseline; gap: .5rem; }
.recap span { flex: 0 1 auto; }
.recap i { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted color-mix(in srgb, var(--tinta) 25%, transparent); translate: 0 -.3em; }
.recap b { font-weight: 600; white-space: nowrap; max-width: 48%; text-align: right; color: var(--terracota-escuro); }
.recap__total { padding-top: var(--e-2); border-top: 1px solid var(--fio-claro); color: var(--tinta-apagada); }
.recap__total s { color: var(--tinta-apagada); text-decoration-thickness: 2px; }
.ingresso__canhoto { position: relative; padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); background: var(--creme-papel); display: grid; gap: .8rem; justify-items: center; text-align: center; border-top: 2px dashed color-mix(in srgb, var(--tinta) 20%, transparent); }
/* picotes do ingresso */
.ingresso__canhoto::before, .ingresso__canhoto::after { content: ""; position: absolute; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--creme-fio); top: -.8rem; }
.ingresso__canhoto::before { left: -.8rem; } .ingresso__canhoto::after { right: -.8rem; }
.hoje { font: 600 var(--t-rotulo)/1 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-apagada); }
.parcela { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; justify-content: center; line-height: 1; }
.parcela__x { font: 600 clamp(1.1rem, 1rem + .6vw, 1.5rem)/1 var(--fonte-texto); }
.parcela strong { font-size: var(--t-preco); font-weight: 600; color: var(--terracota); letter-spacing: -.03em; }
.avista { font-weight: 500; color: var(--tinta-apagada); }
.material { display: flex; gap: .6rem; align-items: flex-start; text-align: left; max-width: 26rem; padding: .8rem 1rem; border-radius: var(--raio); background: var(--branco); box-shadow: var(--linha-claro); font-size: .92rem; }
.material .ic { color: var(--terracota); width: 1.3rem; height: 1.3rem; }
.ingresso .botao { width: min(100%, 28rem); justify-content: space-between; }
.pagamento { display: flex; gap: .45rem; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .85rem; color: var(--tinta-apagada); }
.pagamento .ic { width: 1rem; height: 1rem; }
.garantia { display: flex; gap: .7rem; align-items: flex-start; text-align: left; max-width: 28rem; font-size: .92rem; }
.garantia .ic { color: var(--salvia); width: 2rem; height: 2rem; stroke-width: 1.3; }
.garantia strong { font-weight: 700; }
.rolo { margin-top: var(--e-4); text-align: center; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); color: var(--terracota-escuro); }
@media (min-width: 900px) {
  .ingresso { grid-template-columns: 1.15fr .85fr; }
  .ingresso__canhoto { border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--tinta) 20%, transparent); align-content: center; }
  .ingresso__canhoto::before { top: -.8rem; left: -.8rem; } .ingresso__canhoto::after { top: auto; bottom: -.8rem; right: auto; left: -.8rem; }
}

/* ================= 9 · DUAS OPÇÕES ================= */
.opcoes h2 { max-width: 26ch; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.opcoes__grade { display: grid; gap: var(--e-2); }
.opcao { border-radius: var(--raio-cartao); padding: clamp(1.3rem, 1rem + 1.2vw, 2rem); display: grid; gap: var(--e-2); align-content: start; }
.opcao ul { display: grid; gap: .7rem; }
.opcao li { padding-left: 1.1rem; position: relative; }
.opcao li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .6; }
.opcao h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); }
.opcao--fechar { background: var(--creme-papel); color: var(--tinta-apagada); box-shadow: var(--linha-claro); }
.opcao--fazer { background: var(--terracota-escuro); color: var(--branco); }
@media (min-width: 800px) { .opcoes__grade { grid-template-columns: 1fr 1fr; } }
.frase-final { font-size: var(--t-frase); text-align: center; max-width: 24ch; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; }

/* ================= 10 · QUEM ENSINA ================= */
.gabi__grade { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.gabi__foto { aspect-ratio: 4 / 5; max-height: 36rem; width: min(100%, 26rem); justify-self: center; box-shadow: var(--linha-escuro); }
.gabi__foto img { object-position: 50% 25%; }
.gabi__texto { display: grid; gap: var(--e-2); max-width: 36rem; }
.gabi__texto h2 { margin-bottom: .3rem; }
.gabi__texto h2 .mel { display: block; font-size: .62em; margin-top: .2em; }
.gabi__texto p { color: var(--creme-apagado); }
.gabi__frase { font-size: var(--t-frase); color: var(--mel) !important; margin-block: .4rem; }
.parceira { display: inline-flex; gap: .55rem; align-items: center; justify-self: start; padding: .5rem .9rem; border-radius: 999px; box-shadow: var(--linha-escuro); font: 600 var(--t-rotulo)/1.25 var(--fonte-texto); color: var(--creme-fio) !important; }
.parceira .ic { color: var(--mel); width: 1.15rem; height: 1.15rem; }
@media (min-width: 900px) { .gabi__grade { grid-template-columns: .85fr 1.15fr; } }

/* ================= 11 · FAQ ================= */
.faq__coluna { max-width: 48rem; }
.faq h2 { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.faq__lista { border-top: 1px solid var(--fio-claro); }
.faq details { border-bottom: 1px solid var(--fio-claro); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem .2rem; cursor: pointer; list-style: none; font: 600 var(--t-h3)/1.35 var(--fonte-texto); transition: padding var(--medio) var(--curva-saida), color var(--rapido) var(--curva); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--terracota); transition: rotate var(--medio) var(--curva-saida); }
.faq summary:hover { padding-left: .6rem; color: var(--terracota-escuro); }
.faq details[open] summary .ic { rotate: 45deg; }
.faq details p { padding: 0 .2rem 1.2rem; color: var(--tinta-apagada); max-width: 40rem; }
.faq .pendente { color: var(--terracota-escuro); font-weight: 600; }
.faq summary:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; border-radius: 6px; }
.faq__cta { display: grid; gap: .8rem; justify-items: center; margin-top: var(--e-5); }

/* ================= 12 · RODAPÉ ================= */
.rodape { background: var(--noite); color: var(--creme-fio); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; border-radius: var(--raio-secao) var(--raio-secao) 0 0; }
.rodape__grade { display: grid; gap: var(--e-4); align-items: center; }
.rodape__logo { width: clamp(14rem, 10rem + 16vw, 26rem); height: auto; }
.rodape__info { display: grid; gap: .9rem; font-size: .95rem; color: var(--creme-apagado); }
.rodape__info strong { color: var(--creme-fio); }
.rodape__contato { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border-radius: var(--raio); box-shadow: var(--linha-escuro); transition: box-shadow var(--rapido) var(--curva), background-color var(--rapido) var(--curva); }
.rodape__contato span { display: grid; color: var(--creme-fio); font-weight: 600; }
.rodape__contato small { font-weight: 400; color: var(--creme-apagado); }
.rodape__contato .ic { color: var(--mel); }
.rodape__contato:hover { box-shadow: inset 0 0 0 1px var(--mel); background: color-mix(in srgb, var(--mel) 8%, transparent); }
.rodape__pag { display: flex; gap: .5rem; align-items: center; }
.rodape__pag .ic { width: 1.1rem; height: 1.1rem; color: var(--mel); }
.rodape__links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.rodape__links a { transition: color var(--rapido) var(--curva); }
.rodape__links a:hover { color: var(--mel); }
.rodape__copy { font-size: .8rem; }
@media (min-width: 900px) { .rodape__grade { grid-template-columns: 1.2fr .8fr; } }

/* ================= ENTRADAS AO ROLAR (só com JS) ================= */
.anim-pronta .surge { opacity: 0; translate: 0 18px; transition: opacity .7s var(--curva), translate .9s var(--curva-saida), transform var(--medio) var(--curva-saida), box-shadow var(--medio) var(--curva); transition-delay: calc(var(--i, 0) * 80ms); }
.anim-pronta .surge.visivel { opacity: 1; translate: 0 0; }
.anim-pronta .msg.surge { translate: 0 10px; scale: .96; transform-origin: left bottom; }
.anim-pronta .msg--tu.surge { transform-origin: right bottom; }
.anim-pronta .msg.surge.visivel { scale: 1; }
.anim-pronta .fio-desenha { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--curva); }
.anim-pronta .fio-desenha.visivel { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}