/* Paifer Academy: cores do brandbook (Deep Bloom, Honey Rise, Cloud Whisper, Sugar Pop, Lavender Light, Blue Focus)
   + tons de apoio da prévia aprovada (lilás, rosa e verde do WhatsApp) para garantir contraste. */
:root {
  --roxo: #482d7e;
  --roxo-escuro: #2e1450;
  --lilas: #dcd3f6;
  --lavanda: #9d8afd;
  --mel: #ffb53c;
  --rosa: #b04b9e;
  --rosa-escuro: #8f3a80;
  --sugar: #f49dfb;
  --azul: #296dca;
  --creme: #f4f2ed;
  --branco: #ffffff;
  --texto: #2a1a40;
  --texto-suave: #4d4160;
  --kicker: #8a3a7c;
  --borda: #e2dcec;
  --wa: #1f7a4d;
  --wa-escuro: #17603c;
  --raio: 28px;
  --modulo: var(--creme);
  --modulo-borda: rgba(72, 45, 126, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: var(--creme); color: var(--texto); font-family: 'Poppins', system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--roxo); }
a:hover { color: var(--roxo-escuro); }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wrap-estreito { max-width: 860px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.secao { padding-top: 96px; padding-bottom: 72px; }
.secao-sem-topo { padding-bottom: 96px; }
.centro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 16px/1.2 inherit; font-family: inherit; text-decoration: none; border: 0; cursor: pointer; text-align: center; transition: background .15s, color .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--mel); outline-offset: 3px; }
.btn-sm { min-height: 34px; padding: 0 16px; font-size: 14px; }
.btn-lg { min-height: 56px; font-size: 17px; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-escuro); color: #fff; }
.btn-rosa { background: var(--rosa); color: #fff; }
.btn-rosa:hover { background: var(--rosa-escuro); color: #fff; }
.btn-roxo { background: var(--roxo); color: #fff; }
.btn-roxo:hover { background: var(--roxo-escuro); color: #fff; }
.btn-contorno { background: transparent; color: var(--roxo); box-shadow: inset 0 0 0 2px var(--roxo); }
.btn-contorno:hover { background: var(--roxo); color: #fff; }
.auto { align-self: flex-start; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Faixa de aviso e topo */
.aviso { background: var(--mel); color: var(--texto); text-align: center; padding: 10px 16px; font-size: 14px; font-weight: 600; }
.aviso a { color: var(--texto); }
.topo { position: sticky; top: 0; z-index: 10; background: rgba(244, 242, 237, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 6px; padding-bottom: 6px; }
.marca img { height: 28px; width: auto; }
.nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--mel); }

/* Hero */
.hero { position: relative; color: #fff; background: var(--roxo); }
.hero-in { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 44px; padding-bottom: 36px; }
.hero-txt { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -1px; }
.lead { font-size: 19px; color: #e9e3f7; max-width: 560px; }
.selo { align-self: flex-start; background: var(--mel); color: var(--texto); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
.acoes { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 8px; }
.centro .acoes { justify-content: center; }
.hero-foto { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; position: relative; }
.foto-arco { width: 100%; max-width: 310px; aspect-ratio: 4 / 5; border-radius: 200px 200px 28px 28px; border: 10px solid var(--creme); overflow: hidden; box-shadow: 0 18px 40px rgba(20, 8, 50, .35); }
/* Arco amarelo deslocado atrás da foto (a sombra acompanha o formato do arco) */
.foto-arco.arco-amarelo { box-shadow: 14px 14px 0 var(--mel), 0 18px 40px rgba(20, 8, 50, .3); }
.foto-arco img { width: 100%; height: 100%; object-fit: cover; }
/* Selo P* no canto inferior esquerdo do arco */
.hero-sticker { position: absolute; bottom: -12px; left: calc(50% - 155px - 36px); width: 72px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--creme); border-radius: 50%; padding: 13px; transform: rotate(-10deg); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
/* Etiqueta com o nome: post-it amarelo colado na diagonal no canto inferior direito do arco, com a ponta dobrada */
.foto-nome { --postit: #ffe27a; --dobra: 12px; position: absolute; bottom: 4px; right: calc(50% - 155px - 34px); transform: rotate(-5deg); display: flex; flex-direction: column; align-items: center; padding: 6px 18px 7px; background: linear-gradient(315deg, transparent calc(var(--dobra) * .7071), var(--postit) calc(var(--dobra) * .7071)); color: var(--roxo); font-size: 12px; line-height: 1.25; white-space: nowrap; filter: drop-shadow(0 5px 6px rgba(20, 8, 50, .3)); }
.foto-nome strong { font-size: 14px; font-weight: 700; }
.foto-nome::after { content: ""; position: absolute; right: 0; bottom: 0; width: var(--dobra); height: var(--dobra); background: linear-gradient(315deg, transparent 50%, #e2be4a 50%); }
/* O símbolo fica numa imagem à parte: o recorte redondo direto na imagem cortava o asterisco do canto. */
.hero-sticker img { display: block; width: 100%; height: auto; }
.placeholder { background: var(--lilas); color: var(--roxo); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 28px; }
.numeros { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding-bottom: 44px; }
.numeros div { background: var(--modulo); border: 1.5px solid var(--modulo-borda); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; }
.numeros strong { color: var(--roxo); font-size: 28px; font-weight: 700; line-height: 1.25; }
.numeros span { font-size: 14px; color: var(--texto-suave); }

/* Cabeçalho das seções */
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: 40px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--kicker); }
.kicker-escuro { color: #6b2c60; }
.kicker-mel { color: var(--kicker); }
h2 { font-size: 40px; font-weight: 700; color: var(--roxo); }
.sec-head p { font-size: 17px; color: var(--texto-suave); }
.ast { color: var(--mel); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; align-items: stretch; }
.card { background: var(--modulo); border: 1.5px solid var(--modulo-borda); border-radius: var(--raio); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.card h3 { font-size: 24px; font-weight: 700; color: var(--roxo); }
.card p, .card ul { font-size: 15px; color: var(--texto-suave); }
.card ul { margin: 0; padding-left: 20px; line-height: 1.85; }
.card .btn { margin-top: auto; }

/* Caminhos */
.caminho > p:not(.tag) { font-size: 16px; }
.caminho-ilustra { height: 190px; border-radius: 22px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; margin-bottom: 4px; }
.caminho-ilustra img { height: 175px; width: auto; }
.c-roxo { background: var(--lavanda); }
.c-mel { background: var(--mel); }
.c-rosa { background: var(--sugar); }
.tag { font-size: 13px !important; font-weight: 600; color: var(--kicker) !important; text-transform: uppercase; letter-spacing: 1px; margin-top: -8px !important; }

/* Como funciona */
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.split-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.split-txt p { font-size: 17px; color: var(--texto-suave); }
.split-txt .destaque { color: var(--texto); font-weight: 600; }
.split-txt .menor { font-size: 15px; }
.grid-dif { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dif { background: var(--modulo); border: 1.5px solid var(--modulo-borda); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.dif span { font-size: 32px; font-weight: 800; color: var(--mel); line-height: 1.1; }
.dif h3 { font-size: 18px; font-weight: 700; color: var(--roxo); }
.dif p { font-size: 15px; color: var(--texto-suave); }

/* Aulas extras */
.extras { background: var(--modulo); border-radius: 32px; padding: 44px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; border: 2px solid var(--mel); }
.extras-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.extras-txt h2 { font-size: 36px; }
.extras-txt p { font-size: 17px; color: var(--texto-suave); }
.extras-grid { flex: 1 1 360px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.extra { min-height: 200px; border-radius: 22px; background: var(--lilas) center / cover no-repeat; display: flex; align-items: flex-end; padding: 14px; }
/* Ícone desenhado com o traço da marca, acima do nome da atividade */
.extra-icone { background-size: auto 52%; background-position: center 16%; }
.extra h3 { text-align: center; background: var(--modulo); color: var(--roxo); font-size: 16px; font-weight: 700; padding: 10px 14px; border-radius: 14px; width: 100%; }

/* Investimento */
.faixa-lilas { background: transparent; }
.faixa-lilas .sec-head p { color: #3a2d4d; }
.plano { position: relative; }
.plano-destaque { box-shadow: 0 0 0 3px var(--roxo); }
.plano-selo { position: absolute; top: -16px; left: 28px; background: var(--mel); color: var(--texto); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preco span { font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.preco strong { font-size: 38px; font-weight: 800; color: var(--texto); letter-spacing: -1px; line-height: 1.1; }
.avista { font-size: 14px !important; margin-top: -8px !important; }

/* Passos */
.passos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.passos li { background: var(--modulo); display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 22px; border: 1.5px dashed #b9aed6; }
.passos li > span { width: 44px; height: 44px; border-radius: 999px; background: var(--roxo); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.passos li > span.mel { background: var(--mel); color: var(--texto); }
.passos h3 { font-size: 18px; font-weight: 700; color: var(--roxo); }
.passos p { font-size: 15px; color: var(--texto-suave); }

/* Depoimentos */
.depo { margin: 0; background: var(--modulo); border: 1.5px solid var(--modulo-borda); border-radius: 26px; padding: 34px; display: flex; flex-direction: column; gap: 18px; }
.aspas { font-size: 64px; line-height: .6; font-weight: 800; color: var(--mel); }
.aspas-rosa { color: var(--rosa); }
.depo blockquote { margin: 0; font-size: 16px; line-height: 1.75; color: var(--texto-suave); }
.depo figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.depo figcaption strong { color: var(--roxo); }
.depo figcaption span { font-size: 14px; color: #6b5f7e; }

/* Quem somos */
.faixa-roxa { position: relative; }
.faixa-roxa h2 { font-size: 44px; line-height: 1.1; }
.faixa-roxa .secao { position: relative; padding-bottom: 96px; }
.tagline { font-size: 26px !important; line-height: 1.3; font-weight: 700; color: var(--rosa) !important; margin-top: 12px; }
.tagline em { font-style: normal; color: var(--roxo); }
.quem-txt { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.75; color: var(--texto-suave); }
.quem-txt strong { color: var(--texto); font-weight: 600; }
.quem-txt strong.mel { color: var(--rosa); }
.mel { color: var(--mel); }

/* Teachers */
.faixa-branca { background: transparent; }
.teacher { background: var(--modulo); border: 1.5px solid var(--modulo-borda); border-radius: var(--raio); padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.teacher p { font-size: 16px; line-height: 1.7; color: var(--texto-suave); }
.foto-redonda { width: 160px; height: 160px; border-radius: 999px; font-size: 13px; overflow: hidden; }
.foto-redonda.placeholder { padding: 20px; }
.foto-redonda img { width: 100%; height: 100%; object-fit: cover; }
.sombra-mel { box-shadow: 10px 10px 0 var(--mel); }
.sombra-rosa { box-shadow: 10px 10px 0 var(--rosa); }
.assinatura { display: flex; flex-direction: column; line-height: 1; margin-top: 8px; }
.assinatura span { font-size: 15px; font-weight: 600; letter-spacing: 6px; color: var(--azul); }
.assinatura strong { font-size: 44px; font-weight: 800; color: var(--roxo); letter-spacing: -1px; }
.teacher .cargo { font-size: 14px; font-weight: 600; color: var(--kicker); margin-top: -6px; }
.placeholder-txt { font-style: italic; }


/* FAQ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--modulo); border: 1.5px solid var(--modulo-borda); border-radius: 18px; padding: 22px 24px; }
.faq summary { cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: var(--roxo); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--rosa); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--texto-suave); }

/* CTA final e rodapé */
/* Final: roxo que escurece até o rodapé */
.cta-final { color: #fff; background: var(--roxo); }
.cta-final .secao { padding-top: 56px; padding-bottom: 56px; gap: 18px; }
.cta-final h2 { color: #fff; font-size: 36px; max-width: 720px; }
.cta-final p { font-size: 17px; color: #e9e3f7; max-width: 560px; }
.rodape { background: linear-gradient(180deg, var(--roxo) 0, var(--roxo-escuro) 100%); color: var(--lilas); font-size: 14px; }
.rodape-in { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.rodape-in img { height: 48px; width: auto; }
.rodape-tag { font-weight: 600; color: var(--sugar); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 24px; }
.rodape a { color: var(--lilas); }
.rodape a:hover { color: #fff; }

.wa-flutuante { position: fixed; right: 20px; bottom: 20px; width: 62px; height: 62px; border-radius: 999px; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(31, 122, 77, .45); z-index: 20; }
.wa-flutuante:hover { background: var(--wa-escuro); color: #fff; }
.wa-flutuante .ico { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .nav { display: none; }
}
@media (max-width: 760px) {
  .cta-final .secao { padding-top: 48px; padding-bottom: 48px; }
  .secao { padding-top: 64px; padding-bottom: 56px; }
  .hero-in { padding-top: 48px; gap: 40px; }
  .hero h1 { font-size: 36px; }
  .lead { font-size: 17px; }
  h2, .faixa-roxa h2, .cta-final h2 { font-size: 30px; }
  .extras-txt h2 { font-size: 28px; }
  .extras, .card, .teacher { padding: 24px; }
  .marca img { height: 24px; }
  .topo .btn-sm span { display: none; }
  .topo .btn-sm { width: 34px; padding: 0; }
  .hero-sticker { left: calc(50% - 155px - 33px); width: 66px; padding: 12px; }
  .numeros strong { font-size: 24px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .faq summary::after { transition: none; }
}

/* Bloco liso, da cor do fundo, atrás dos textos corridos: as linhas passam por trás sem atrapalhar a leitura */
.texto-fundo { background: var(--creme); padding: 14px 16px; margin-left: -16px; margin-right: -16px; border-radius: 14px; }
div.texto-fundo:not(.quem-txt) { display: flex; flex-direction: column; gap: 14px; }

/* Fundo fixo com as linhas desenhadas na rolagem (assets/js/linhas.js) */
/* 100lvh: altura da tela com a barra do navegador recolhida, para não sobrar faixa sem linhas no celular */
.linhas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; opacity: .4; }
.linhas path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.bio { display: flex; flex-direction: column; gap: 16px; }

/* ===== Celular: menu ☰, bolinha do WhatsApp, topo enxuto, cartões deslizantes, preços em abas,
   "ler mais" e entrada suave (comportamento em assets/js/celular.js) ===== */
.menu-btn, .pontos, .abas, .ler-mais { display: none; }

@media (max-width: 900px) {
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; margin-right: -10px; padding: 0 10px; background: none; border: 0; cursor: pointer; }
  .menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--roxo); transition: transform .2s, opacity .2s; }
  .menu-aberto .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-aberto .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-aberto .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Sem o desfoque: com ele o topo vira a "moldura" do menu fixo e o menu fica preso dentro do topo. */
  .topo.menu-aberto { backdrop-filter: none; background: var(--creme); }
  .menu-aberto .nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: column; padding: 16px 24px; background: var(--creme); overflow-y: auto; }
  .menu-aberto .nav a { font-size: 24px; font-weight: 600; padding: 16px 0; border-bottom: 1.5px solid var(--modulo-borda); }
  .sem-rolagem { overflow: hidden; }
  .topo-in { gap: 12px; }
  .topo .btn-sm { margin-left: auto; }
}

@media (max-width: 760px) {
  .topo .btn-sm { display: none; }

  /* Bolinha do WhatsApp menor e mais perto do canto */
  .wa-flutuante { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; box-shadow: 0 6px 18px rgba(31, 122, 77, .4); }
  .wa-flutuante .ico { width: 24px; height: 24px; }
  .sem-rolagem .wa-flutuante { display: none; }

  /* Topo enxuto */
  .hero-in { padding-top: 32px; padding-bottom: 28px; gap: 28px; }
  .hero-txt { gap: 16px; }
  .hero h1 { font-size: 32px; }
  .lead { font-size: 16px; }
  .acoes { flex-wrap: nowrap; gap: 10px; padding-top: 4px; }
  .acoes .btn { flex: 1; min-height: 48px; padding: 0 12px; font-size: 15px; }
  .foto-arco { max-width: 220px; border-width: 8px; }
  .foto-arco.arco-amarelo { box-shadow: 10px 10px 0 var(--mel), 0 14px 30px rgba(20, 8, 50, .3); }
  .hero-sticker { left: calc(50% - 110px - 28px); width: 56px; padding: 10px; bottom: -6px; }
  .foto-nome { --dobra: 8px; bottom: 0; right: calc(50% - 110px - 16px); padding: 3px 11px 4px; font-size: 9px; }
  .foto-nome strong { font-size: 10.5px; }
  .numeros { grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 36px; }
  .numeros div { padding: 12px 14px; border-radius: 14px; }
  .numeros strong { font-size: 17px; }
  .numeros span { font-size: 12px; line-height: 1.35; }

  /* Cartões deslizantes */
  .carrossel { display: flex; position: relative; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -24px; margin-right: -24px; padding: 4px 24px 8px; scroll-padding: 0 24px; scrollbar-width: none; }
  .carrossel::-webkit-scrollbar { display: none; }
  .carrossel > * { flex: 0 0 84%; scroll-snap-align: center; }
  .grid-dif.carrossel { flex: none; width: calc(100% + 48px); }
  .grid-dif.carrossel > * { flex-basis: 76%; }
  .pontos { display: flex; justify-content: center; gap: 2px; width: 100%; margin-top: 6px; }
  .pontos button { box-sizing: content-box; width: 8px; height: 8px; padding: 10px 4px; border: 0; border-radius: 99px; background: #cfc6e3; background-clip: content-box; cursor: pointer; transition: width .2s; }
  .pontos button[aria-current="true"] { width: 22px; background-color: var(--roxo); }

  /* Preços em abas */
  .abas { display: flex; gap: 6px; overflow-x: auto; margin: 0 -24px 22px; padding: 0 24px; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  .abas button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--modulo-borda); background: var(--creme); color: var(--roxo); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
  .abas button[aria-selected="true"] { background: var(--roxo); border-color: var(--roxo); color: #fff; }
  .planos { padding-top: 16px; }
  .planos .plano { display: none; }
  .planos .plano.ativo { display: flex; }

  /* "Ler mais" */
  .recolher:not(.aberto) { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .bio.recolher:not(.aberto) { max-height: 11em; }
  .ler-mais { display: inline-flex; align-items: center; align-self: flex-start; min-height: 40px; padding: 0; margin-top: -8px; background: none; border: 0; color: var(--rosa); font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  .ler-mais[hidden] { display: none; }

  /* Proporções */
  .secao { padding-top: 52px; padding-bottom: 44px; }
  .secao-sem-topo { padding-bottom: 52px; }
  .sec-head { margin-bottom: 24px; gap: 10px; }
  h2, .faixa-roxa h2, .cta-final h2 { font-size: 28px; }
  .sec-head p, .split-txt p { font-size: 16px; }
  .card { padding: 22px; gap: 12px; }
  .card h3 { font-size: 21px; }
  .caminho-ilustra { height: 150px; }
  .caminho-ilustra img { height: 138px; }
  .dif { padding: 20px; }
  .extras { padding: 22px; gap: 24px; }
  .extra { min-height: 140px; }
  .extra-icone { background-size: auto 44%; background-position: center 12%; }
  .split { gap: 28px; }
  .preco strong { font-size: 32px; }
  .passos li { padding: 20px; }
  .depo { padding: 24px; }
  .teacher { padding: 24px; }
  .foto-redonda { width: 120px; height: 120px; }
  .assinatura strong { font-size: 36px; }
  .quem-txt { font-size: 16px; gap: 16px; }
  .tagline { font-size: 22px !important; }
  .faq details { padding: 18px; }
  .faq summary { font-size: 16px; }
  /* Final roxo enxuto: chamada com botões lado a lado e rodapé compacto */
  .cta-final .secao { padding-top: 40px; padding-bottom: 40px; gap: 14px; }
  .cta-final h2 { font-size: 24px; }
  .cta-final p { font-size: 15px; }
  .cta-final .acoes { flex-wrap: nowrap; gap: 10px; width: 100%; }
  .cta-final .acoes .btn { flex: 1; min-height: 48px; padding: 0 12px; font-size: 14px; }
  .rodape-in { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 24px; padding-bottom: 24px; font-size: 13px; }
  .rodape-in img { height: 40px; }
  .rodape-links { justify-content: center; gap: 4px 16px; }
}

/* Entrada suave (só no celular, e só para quem não pediu menos movimento) */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .js .surge { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .surge.visivel { opacity: 1; transform: none; }
}