/* =====================================================================
   MUSICALISA — site.css  (depende de tokens.css)
   Mobile primeiro. Um breakpoint forte em 960px, ajustes em 640px.
   ===================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--fs-texto);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
strong { font-weight: 700; color: var(--tinta-forte); }
figure { margin: 0; }
address { font-style: normal; }
h1, h2, h3 { margin: 0; font-weight: 700; }
ul[role="list"], ol { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--parafuso); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sol); color: var(--tinta-forte); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--tinta-forte); color: #fff; padding: .7rem 1rem; border-radius: var(--r-sm); text-decoration: none;
}
.pular:focus { top: .75rem; }

.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.container--estreito { max-width: 820px; }

/* ---------- tipografia de marca ---------- */
.titulo {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  line-height: .98;
  letter-spacing: .01em;
  color: var(--framboesa);
  text-wrap: balance;
  margin-bottom: var(--s-5);
}
.titulo--claro { color: #fff; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--s-3);
}
.etiqueta::before {
  content: ""; width: 1.6em; height: .5em; border-radius: 99px;
  background: linear-gradient(90deg, var(--tecla-azul) 0 20%, var(--tecla-lima) 20% 40%, var(--tecla-amarela) 40% 60%, var(--tecla-laranja) 60% 80%, var(--tecla-framboesa) 80%);
}
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.texto-corrido p { max-width: var(--largura-texto); }
.destaque { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.05; color: var(--framboesa-no-ceu); }

/* ---------- botões: teclas que afundam ---------- */
.btn {
  --fundo: var(--sol); --texto: var(--tinta-forte); --sombra: var(--sol-sombra);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3.25rem; padding: .8rem 1.5rem;
  border-radius: 99px; border: 0;
  background: var(--fundo); color: var(--texto);
  font: 700 1.02rem/1.2 var(--f-texto); letter-spacing: .005em; text-decoration: none; text-align: center;
  box-shadow: 0 5px 0 var(--sombra), 0 12px 22px -12px rgba(43,36,32,.45);
  transform: translateY(0);
  transition: transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease), background-color var(--t-rapido);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--sombra), 0 16px 26px -12px rgba(43,36,32,.45); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sombra), 0 4px 10px -6px rgba(43,36,32,.4); }
.btn--whats { --fundo: var(--whatsapp); --texto: #fff; --sombra: #0B5F32; }
.btn--linha {
  --fundo: transparent; --texto: var(--tinta-forte);
  box-shadow: inset 0 0 0 2px var(--tinta-forte);
}
.btn--linha:hover, .btn--linha:active { box-shadow: inset 0 0 0 2px var(--tinta-forte); background: rgba(43,36,32,.06); }
.btn--linha-clara { --fundo: transparent; --texto: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.btn--linha-clara:hover, .btn--linha-clara:active { box-shadow: inset 0 0 0 2px #fff; background: rgba(255,255,255,.1); }
.btn--compacto { min-height: 2.6rem; padding: .5rem 1rem; font-size: .95rem; box-shadow: 0 3px 0 var(--sombra); }
.btn--compacto:hover { box-shadow: 0 5px 0 var(--sombra); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--areia) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow var(--t-medio) var(--ease);
}
.topo.is-rolado { box-shadow: 0 1px 0 var(--linha), 0 10px 30px -18px rgba(58,50,46,.35); }
.topo__barra { display: flex; align-items: center; gap: var(--s-4); min-height: 4.5rem; }
.topo__marca { flex: none; display: block; margin-right: auto; }
.topo__marca img { width: 96px; height: auto; }
.topo__acoes { display: flex; align-items: center; gap: var(--s-2); }
.topo__insta { display: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--tinta-forte); place-items: center; transition: background-color var(--t-rapido); }
.topo__insta svg { width: 1.3rem; height: 1.3rem; }
.topo__insta:hover { background: rgba(43,36,32,.08); }
.topo__menu {
  display: grid; place-content: center; gap: 6px;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; color: var(--tinta-forte);
}
.topo__menu i { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform var(--t-rapido) var(--ease); }
.topo__menu[aria-expanded="true"] i:first-of-type { transform: translateY(4.25px) rotate(45deg); }
.topo__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4.25px) rotate(-45deg); }

.topo__nav {
  position: absolute; inset: 100% 0 auto 0;
  display: grid; gap: .25rem; padding: var(--s-3) var(--gutter) var(--s-5);
  background: var(--areia); border-bottom: 1px solid var(--linha);
  box-shadow: 0 24px 40px -24px rgba(58,50,46,.4);
  transform-origin: top; transform: scaleY(.96); opacity: 0; visibility: hidden;
  transition: opacity var(--t-rapido), transform var(--t-rapido) var(--ease), visibility 0s linear var(--t-rapido);
}
.topo__nav.is-aberto { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.topo__nav a {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem .25rem; border-bottom: 1px solid var(--linha);
  font-family: var(--f-display); font-size: 2rem; line-height: 1; text-decoration: none; color: var(--tinta-forte);
}
.topo__nav a:hover { color: var(--framboesa-texto); }
.topo__nav .topo__nav-whats { border: 0; margin-top: var(--s-3); font-family: var(--f-texto); font-size: 1.05rem; font-weight: 700; color: var(--whatsapp); }
.topo__nav .topo__nav-whats svg { width: 1.4rem; height: 1.4rem; }
/* sem JS o menu não abre: mostra os links em linha abaixo da barra */
html:not(.js) .topo__nav { position: static; opacity: 1; visibility: visible; transform: none; display: flex; flex-wrap: wrap; gap: 0 1rem; box-shadow: none; padding-block: 0 .5rem; }
html:not(.js) .topo__nav a { font-size: 1.5rem; border: 0; padding: .3rem 0; }
html:not(.js) .topo__menu { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(1.5rem, 1rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; }
.hero::before { /* sol quente atrás da foto */
  content: ""; position: absolute; width: min(60vmax, 880px); height: min(60vmax, 880px); right: max(-22vmax, -320px); top: max(-18vmax, -260px);
  background: radial-gradient(closest-side, rgba(245,207,77,.35), rgba(245,207,77,0));
  pointer-events: none;
}
.hero__grade { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
.fita {
  display: inline-block; margin-bottom: var(--s-4);
  padding: .1em .45em .05em;
  background: var(--framboesa-fundo); color: #fff;
  font-family: var(--f-display); font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); line-height: 1.1; letter-spacing: .02em;
  border-radius: 4px;
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 var(--sol);
}
.hero__titulo {
  font-family: var(--f-display); font-size: var(--fs-display); line-height: .92; letter-spacing: .005em;
  color: var(--tinta-forte); text-wrap: balance; margin-bottom: var(--s-5);
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 34rem; margin-bottom: var(--s-6); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-6); }
.hero__acoes .btn--sol { flex: 1 1 100%; }
.hero__acoes .btn--linha { flex: 1 1 100%; }
.hero__selos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--fs-pequeno); font-weight: 600; color: var(--tinta); }
.hero__selos li { display: inline-flex; align-items: center; gap: .5rem; }
.ponto { width: .7rem; height: .7rem; border-radius: 50%; background: var(--cor); box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); }

.hero__midia { position: relative; width: min(calc(100% - 28px), 520px); margin-inline: auto; padding-bottom: 2.2rem; }
.tecla-moldura { border-radius: var(--r-tecla); overflow: hidden; background: var(--creme); isolation: isolate; }
.hero__midia .tecla-moldura { aspect-ratio: 4 / 5; box-shadow: 0 0 0 10px var(--papel), var(--sombra-cartao); }
.hero__midia .tecla-moldura img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero__teclas { position: absolute; width: 38%; left: -4%; bottom: 0; filter: drop-shadow(0 10px 14px rgba(58,50,46,.25)); }
.hero__joaninha { position: absolute; width: 2.6rem; right: 8%; top: 14%; transform: rotate(18deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }

/* ---------- faixa das 5 teclas ---------- */
.faixa-teclas { display: grid; grid-template-columns: repeat(5, 1fr); height: 10px; }
.faixa-teclas i:nth-child(1) { background: var(--tecla-azul); }
.faixa-teclas i:nth-child(2) { background: var(--tecla-lima); }
.faixa-teclas i:nth-child(3) { background: var(--tecla-amarela); }
.faixa-teclas i:nth-child(4) { background: var(--tecla-laranja); }
.faixa-teclas i:nth-child(5) { background: var(--tecla-framboesa); }

/* ---------- seções ---------- */
.secao { padding-block: var(--secao); position: relative; }
.secao--areia { background: var(--areia); }
.secao--creme { background: var(--creme); }
.secao--ceu { background: var(--ceu); color: var(--tinta-forte); }
.secao--ceu .titulo { color: var(--framboesa-no-ceu); }
.secao--ceu .etiqueta { color: var(--tinta-forte); }
.secao--framboesa { background: var(--framboesa-fundo); color: #fff; }
.secao--framboesa .titulo { color: #fff; }
.secao--framboesa strong { color: #fff; }
.secao--framboesa .etiqueta { color: rgba(255,255,255,.9); }

.cabeca { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cabeca--centro { text-align: center; max-width: 46rem; margin-inline: auto; }
.cabeca--centro .etiqueta { justify-content: center; }
.cabeca .titulo { margin-bottom: var(--s-4); }
.cabeca__sub { font-size: var(--fs-lead); line-height: 1.5; margin: 0 auto; max-width: 36rem; }

/* duas colunas: mídia + texto */
.dupla { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
.dupla__midia { width: min(100%, 480px); margin-inline: auto; }
.dupla__midia img { width: 100%; filter: drop-shadow(0 24px 30px rgba(43,36,32,.18)); }
.dupla__texto .btn, .dupla__texto .acoes { margin-top: var(--s-4); }

/* ---------- para quem ---------- */
.publico { display: grid; gap: var(--s-4); }
.publico__item {
  display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  background: var(--papel); border-radius: 99px 24px 24px 99px;
  box-shadow: var(--sombra-suave);
}
.publico__foto {
  width: calc(5rem - 16px); height: calc(5rem - 16px); border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 4px var(--papel), 0 0 0 8px var(--cor);
  margin: 8px;
}
.publico__item p { margin: 0; line-height: 1.45; font-size: 1rem; }
.chamada {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center;
}
.chamada p { margin: 0; font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.05; color: var(--tinta-forte); text-wrap: balance; }

/* ---------- método: trilha ---------- */
.trilha-bloco { background: var(--papel); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--sombra-cartao); }
.trilha__intro { font-size: var(--fs-lead); line-height: 1.4; margin-bottom: var(--s-5); }
.trilha { counter-reset: passo; display: grid; gap: var(--s-4); }
.trilha li {
  counter-increment: passo; position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) 4.25rem;
  background: color-mix(in srgb, var(--cor) 18%, var(--papel));
  border-radius: 999px var(--r-md) var(--r-md) 999px;
  line-height: 1.45;
}
.trilha li::before {
  content: counter(passo);
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cor); color: var(--tinta-forte);
  font-family: var(--f-display); font-size: 1.9rem; line-height: 1;
}
.trilha__passo { display: block; font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: .15rem; }

/* ---------- turmas ---------- */
.turmas { display: grid; gap: var(--s-5); }
.turma {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel);
  border-radius: 50% 50% var(--r-md) var(--r-md) / 88px 88px var(--r-md) var(--r-md); /* arco achatado: a tecla sem roubar espaço do texto */
  padding: clamp(3.25rem, 2.5rem + 2vw, 4rem) clamp(1.4rem, 1rem + 1.5vw, 2rem) clamp(1.5rem, 1.2rem + 1vw, 2rem);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
}
.turma::before { /* o "parafuso" da tecla */
  content: ""; position: absolute; top: 1.4rem; left: 50%; width: 1rem; height: 1rem; transform: translateX(-50%);
  background: var(--parafuso); border-radius: 2px;
}
.turma::after { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--cor); }
.turma__idade {
  align-self: center; margin-bottom: var(--s-2);
  padding: .05em .6em; border-radius: 6px;
  background: var(--cor); color: var(--tinta-forte);
  font-family: var(--f-display); font-size: 1.9rem; line-height: 1.15; text-transform: uppercase;
}
.turma__nome { text-align: center; font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1; color: var(--framboesa-texto); margin-bottom: var(--s-4); }
.turma p { font-size: 1rem; }
.turma__cta, .aula__cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 0; font-weight: 700; color: var(--whatsapp); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--whatsapp) 35%, transparent);
  transition: gap var(--t-rapido) var(--ease), border-color var(--t-rapido);
}
.turma__cta svg, .aula__cta svg { width: 1.1rem; height: 1.1rem; }
.turma__cta:hover, .aula__cta:hover { gap: .8rem; border-color: var(--whatsapp); }

/* ---------- outras aulas ---------- */
.aulas { display: grid; gap: var(--s-6); }
.aula {
  position: relative; display: flex; flex-direction: column;
  background: var(--papel); border-radius: var(--r-lg); overflow: visible;
  box-shadow: var(--sombra-cartao);
}
.aula__foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 8px solid var(--cor); }
.aula__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.aula:hover .aula__foto img { transform: scale(1.04); }
.aula__corpo { display: flex; flex-direction: column; flex: 1; padding: var(--s-5) clamp(1.25rem, 1rem + 1vw, 1.75rem) var(--s-5); }
.aula__nome { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1; color: var(--framboesa-texto); margin-bottom: var(--s-3); }
.aula p { font-size: 1rem; }
.aula::after { /* dobra de fita no canto, herança do site antigo */
  content: ""; position: absolute; left: 0; bottom: -14px; width: 0; height: 0;
  border-top: 14px solid color-mix(in srgb, var(--cor) 70%, #000 12%); border-left: 18px solid transparent;
}
.aula { border-bottom-left-radius: 0; }

/* ---------- espaço ---------- */
.endereco {
  display: flex; gap: .75rem; align-items: flex-start;
  margin: var(--s-5) 0 var(--s-2); padding: var(--s-4) var(--s-5);
  background: rgba(255,255,255,.12); border-radius: var(--r-md);
  line-height: 1.5; max-width: var(--largura-texto);
}
.endereco svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: .1rem; color: var(--sol); }

/* ---------- equipe ---------- */
.equipe { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3rem); }
.pessoa { text-align: center; max-width: 380px; margin-inline: auto; }
.pessoa__foto { aspect-ratio: 1; margin: 0 auto var(--s-5); width: min(100%, 320px); box-shadow: 0 0 0 8px var(--papel), 0 0 0 12px var(--cor), var(--sombra-cartao); }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; }
.pessoa__nome { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1; color: var(--framboesa-texto); margin-bottom: var(--s-3); }
.pessoa__cargo { font-weight: 700; color: var(--tinta-forte); line-height: 1.45; }
.pessoa p { font-size: 1rem; }

/* ---------- depoimentos ---------- */
.depoimentos { display: grid; gap: var(--s-5); align-items: start; }
.depoimento {
  position: relative; background: var(--papel); border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); padding-top: 3.25rem;
  box-shadow: inset 8px 0 0 var(--cor), var(--sombra-cartao);
}
.depoimento__aspas { position: absolute; top: 1.25rem; left: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); width: 2.4rem; height: 2rem; color: var(--framboesa); }
.depoimento blockquote { margin: 0 0 var(--s-4); }
.depoimento blockquote p { margin: 0; font-size: 1.04rem; line-height: 1.6; }
.depoimento figcaption { font-size: var(--fs-pequeno); color: var(--tinta-suave); }
.depoimento figcaption strong { font-family: var(--f-display); font-size: 1.7rem; font-weight: 700; color: var(--framboesa-texto); margin-right: .15rem; }

/* ---------- perguntas ---------- */
.perguntas { display: grid; gap: var(--s-3); }
.perguntas details { background: var(--papel); border-radius: var(--r-md); box-shadow: var(--sombra-suave); }
.perguntas summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.15rem 3.5rem 1.15rem 1.4rem;
  font-weight: 700; font-size: 1.08rem; line-height: 1.35; color: var(--tinta-forte);
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; position: absolute; right: 1.25rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem;
  border-radius: 50%; background: var(--sol) no-repeat center / .8rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%232B2420' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform var(--t-rapido) var(--ease);
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { margin: 0; padding: 0 1.4rem 1.3rem; }
.perguntas a { color: var(--whatsapp); font-weight: 700; }

/* ---------- chamada final ---------- */
.final { background: var(--framboesa-fundo); color: #fff; padding-block: var(--secao); position: relative; overflow: hidden; }
.final__grade { display: grid; gap: var(--s-6); align-items: center; }
.final__teclas { width: 9rem; margin-bottom: var(--s-4); }
.final__texto p { font-size: var(--fs-lead); max-width: 30rem; margin: 0; }
.final__texto .titulo { margin-bottom: var(--s-4); }
.final__opcoes { display: grid; gap: var(--s-3); }
.opcao {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--s-4);
  padding: 1rem 1.25rem 1rem 1.5rem; border-radius: 999px var(--r-md) var(--r-md) 999px;
  background: var(--papel); color: var(--tinta-forte); text-decoration: none;
  box-shadow: inset 10px 0 0 var(--cor), 0 5px 0 rgba(0,0,0,.18);
  transition: transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.opcao:hover { transform: translateY(-2px); box-shadow: inset 10px 0 0 var(--cor), 0 7px 0 rgba(0,0,0,.18); }
.opcao:active { transform: translateY(4px); box-shadow: inset 10px 0 0 var(--cor), 0 1px 0 rgba(0,0,0,.18); }
.opcao__idade { grid-column: 1; font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); padding-left: .5rem; }
.opcao__nome { grid-column: 1; font-family: var(--f-display); font-size: 2rem; line-height: 1.05; padding-left: .5rem; }
.opcao svg { grid-column: 2; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 50%; background: var(--whatsapp); color: #fff; }

/* ---------- rodapé ---------- */
.rodape { background: var(--creme); color: var(--tinta); font-size: var(--fs-pequeno); }
.rodape__grade { display: grid; gap: var(--s-6); padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem) var(--s-6); }
.rodape__marca img { width: 150px; margin-bottom: var(--s-3); }
.rodape__marca p { max-width: 20rem; }
.rodape__titulo { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: var(--s-3); }
.rodape ul li + li { margin-top: .5rem; }
.rodape a { text-decoration: none; font-weight: 600; color: var(--tinta-forte); }
.rodape a:hover { color: var(--framboesa-texto); }
.rodape ul a { display: inline-flex; align-items: center; gap: .55rem; }
.rodape ul svg { width: 1.2rem; height: 1.2rem; color: var(--whatsapp); }
.rodape ul li:nth-child(2) svg { color: var(--framboesa-texto); }
.rodape__bloco p a { text-decoration: underline; text-underline-offset: 3px; }
.rodape__legal { border-top: 1px solid var(--linha); padding-block: var(--s-5) calc(var(--s-6) + 4.5rem); margin: 0 auto; font-size: .85rem; color: var(--tinta-suave); }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante {
  position: fixed; z-index: 40; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.2rem .7rem .75rem; border-radius: 99px;
  background: var(--whatsapp); color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 0 #0B5F32, 0 14px 30px -10px rgba(0,0,0,.45);
  transition: transform var(--t-medio) var(--ease), opacity var(--t-medio) var(--ease), box-shadow var(--t-rapido);
}
.whats-flutuante svg { width: 1.9rem; height: 1.9rem; }
.whats-flutuante:hover { transform: translateY(-2px); }
.whats-flutuante.is-oculto { transform: translateY(160%); opacity: 0; pointer-events: none; }

/* ---------- revelação suave (só quando o JS confirma que dá) ---------- */
.revelar-pendente { opacity: 0; transform: translateY(18px); }
.revelar-pendente.is-visivel { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* =====================================================================
   ≥ 640px
   ===================================================================== */
@media (min-width: 640px) {
  .hero__acoes .btn--sol, .hero__acoes .btn--linha { flex: 0 1 auto; }
  .publico { grid-template-columns: repeat(2, 1fr); }
  .aulas, .equipe, .depoimentos { grid-template-columns: repeat(2, 1fr); }
  .final__opcoes { grid-template-columns: repeat(2, 1fr); }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
  .topo__insta { display: grid; }
}

/* =====================================================================
   ≥ 960px — desktop
   ===================================================================== */
@media (min-width: 960px) {
  html { scroll-padding-top: 6rem; }
  .topo__barra { min-height: 5.25rem; gap: var(--s-6); }
  .topo__marca { margin-right: 0; }
  .topo__marca img { width: 116px; }
  .topo__menu { display: none; }
  .topo__nav, html:not(.js) .topo__nav {
    position: static; display: flex; gap: clamp(1rem, .2rem + 1.6vw, 2rem); margin-right: auto;
    padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
  }
  .topo__nav a, html:not(.js) .topo__nav a {
    position: relative; padding: .4rem 0; border: 0;
    font-size: 1.7rem; letter-spacing: .02em;
  }
  .topo__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 3px; border-radius: 3px;
    background: var(--framboesa); transform: scaleX(0); transform-origin: left; transition: transform var(--t-rapido) var(--ease);
  }
  .topo__nav a:hover::after, .topo__nav a.is-ativo::after { transform: scaleX(1); }
  .topo__nav a.is-ativo { color: var(--framboesa-texto); }
  .topo__nav .topo__nav-whats { display: none; }

  .hero__grade { grid-template-columns: 1.08fr .92fr; }
  .hero__midia { margin-right: 0; }

  .dupla { grid-template-columns: 1fr 1fr; }
  .dupla__midia { margin-inline: 0 auto; }
  .dupla--invertida .dupla__midia { margin-inline: auto 0; }
  .dupla--metodo { grid-template-columns: 1.05fr .95fr; align-items: start; }
  .dupla--metodo .trilha-bloco { margin-top: 5.5rem; }

  .publico { grid-template-columns: repeat(3, 1fr); gap: var(--s-7) var(--s-6); }
  .publico__item { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 0; background: none; box-shadow: none; border-radius: 0; gap: var(--s-4); }
  .publico__foto { width: 8.5rem; height: 8.5rem; margin: 8px; }
  .publico__item p { font-size: 1.04rem; max-width: 17rem; }

  .turmas, .aulas, .equipe, .depoimentos { grid-template-columns: repeat(3, 1fr); }
  .turmas { gap: var(--s-6); }
  .depoimentos .depoimento:nth-child(2) { margin-top: var(--s-7); }

  .final__grade { grid-template-columns: .9fr 1.1fr; gap: var(--s-8); }
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .rodape__legal { padding-bottom: var(--s-6); }
  .whats-flutuante { padding: .8rem; }
  .whats-flutuante__rotulo {
    max-width: 0; overflow: hidden; white-space: nowrap;
    transition: max-width var(--t-medio) var(--ease), margin var(--t-medio) var(--ease);
  }
  .whats-flutuante svg { width: 2.1rem; height: 2.1rem; }
  .whats-flutuante:hover .whats-flutuante__rotulo, .whats-flutuante:focus-visible .whats-flutuante__rotulo { max-width: 16rem; margin-right: .5rem; }
}

/* =====================================================================
   PÁGINAS INTERNAS — aulas, escola, perguntas e guia para famílias
   ===================================================================== */
.topo__nav a[aria-current="page"] { color: var(--framboesa-texto); }

.migalhas { font-size: var(--fs-pequeno); color: var(--tinta-suave); margin-bottom: var(--s-4); }
.migalhas ol { display: flex; flex-wrap: wrap; gap: .2rem .5rem; list-style: none; margin: 0; padding: 0; }
.migalhas li + li::before { content: "›"; margin-right: .5rem; color: var(--tinta-suave); }
.migalhas a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.migalhas a:hover { color: var(--framboesa-texto); text-decoration: underline; }

.pagina-topo { position: relative; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.pagina-topo__grade { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
.pagina-topo h1 {
  font-family: var(--f-display); font-size: clamp(2.9rem, 1.9rem + 4.2vw, 5rem); line-height: .95;
  color: var(--tinta-forte); text-wrap: balance; margin-bottom: var(--s-4);
}
.pagina-topo__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 36rem; margin-bottom: var(--s-5); }
.pagina-topo__midia { width: min(calc(100% - 28px), 420px); margin-inline: auto; }
.pagina-topo__midia .tecla-moldura { aspect-ratio: 1; box-shadow: 0 0 0 10px var(--papel), var(--sombra-cartao); }
.pagina-topo__midia img { width: 100%; height: 100%; object-fit: cover; }
.guia-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--fs-pequeno); color: var(--tinta-suave); margin-top: var(--s-4); }

/* "Em poucas palavras": a resposta direta que buscadores e IAs citam */
.resposta {
  position: relative; background: var(--papel); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.4rem, 1.1rem + 1.5vw, 2.25rem);
  box-shadow: inset 8px 0 0 var(--tecla-framboesa), var(--sombra-suave);
  margin-bottom: var(--s-7);
}
.resposta__rotulo { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: var(--s-2); }
.resposta p:last-child { margin: 0; }
.resposta p { font-size: 1.08rem; line-height: 1.6; }

.conteudo { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: start; }
.lateral { display: grid; gap: var(--s-5); }
.lateral__caixa { background: var(--papel); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sombra-suave); }
.lateral__caixa h2 { font-family: var(--f-display); font-size: 1.9rem; line-height: 1; color: var(--framboesa-texto); margin-bottom: var(--s-3); }
.lateral__caixa p { font-size: var(--fs-pequeno); }
.lateral__caixa .btn { width: 100%; }
.indice ol { counter-reset: item; list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.indice li { counter-increment: item; display: grid; grid-template-columns: 1.6rem 1fr; font-size: var(--fs-pequeno); line-height: 1.35; }
.indice li::before { content: counter(item) "."; color: var(--tinta-suave); font-weight: 700; }
.indice a { color: var(--tinta-forte); text-decoration: none; }
.indice a:hover { color: var(--framboesa-texto); text-decoration: underline; }

/* prosa longa */
.prosa { max-width: 46rem; }
.prosa > * { margin-block: 0; }
.prosa > * + * { margin-top: 1.05em; }
.prosa h2 {
  font-family: var(--f-display); font-size: clamp(2.3rem, 1.8rem + 2vw, 3.2rem); line-height: 1;
  color: var(--framboesa); text-wrap: balance; margin-top: 2.2em; margin-bottom: .1em; scroll-margin-top: 6rem;
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 {
  font-size: 1.28rem; line-height: 1.3; color: var(--tinta-forte); margin-top: 1.8em; scroll-margin-top: 6rem;
  display: flex; align-items: center; gap: .6rem;
}
.prosa h3 .etiqueta-idade {
  font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; text-transform: uppercase; line-height: 1.1;
  padding: .02em .5em; border-radius: 6px; background: var(--cor, var(--sol)); color: var(--tinta-forte);
}
.prosa ul, .prosa ol:not(.trilha) { padding-left: 0; list-style: none; display: grid; gap: .55rem; }
.prosa ul li, .prosa ol:not(.trilha) li { position: relative; padding-left: 1.6rem; }
.prosa ul li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .6rem; height: .6rem; border-radius: 50%; background: var(--tecla-framboesa); }
.prosa ul li:nth-child(5n+2)::before { background: var(--tecla-azul); }
.prosa ul li:nth-child(5n+3)::before { background: var(--tecla-lima); }
.prosa ul li:nth-child(5n+4)::before { background: var(--tecla-laranja); }
.prosa ul li:nth-child(5n+5)::before { background: var(--madeira); }
.prosa ol:not(.trilha) { counter-reset: n; }
.prosa ol:not(.trilha) li { counter-increment: n; padding-left: 2.2rem; }
.prosa ol:not(.trilha) li::before { content: counter(n); position: absolute; left: 0; top: .05em; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--sol); font-weight: 700; font-size: .9rem; color: var(--tinta-forte); }
.prosa blockquote { margin: 1.6em 0; padding: 1.25rem 1.5rem; background: var(--papel); border-radius: var(--r-md); box-shadow: inset 6px 0 0 var(--tecla-azul); }
.prosa blockquote p { font-size: 1.05rem; }
.prosa blockquote footer { margin-top: .6rem; font-size: var(--fs-pequeno); color: var(--tinta-suave); }
.prosa a:not(.btn) { color: var(--framboesa-texto); font-weight: 600; text-underline-offset: 3px; }
.prosa .trilha { margin-top: 1.4em; }
.prosa .perguntas { margin-top: 1.2em; }
.prosa .pessoas-mini { margin-top: 1.4em; }

.nota { background: color-mix(in srgb, var(--tecla-azul) 16%, var(--papel)); border-radius: var(--r-md); padding: 1rem 1.25rem; font-size: 1rem; }
.nota strong { color: var(--tinta-forte); }

.cta-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: 1.4em; padding: 1.1rem 1.25rem; background: var(--papel); border-radius: var(--r-md); box-shadow: var(--sombra-suave); }
.cta-inline p { flex: 1 1 16rem; margin: 0; font-weight: 600; color: var(--tinta-forte); }

.fatos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--s-3); list-style: none; padding: 0; margin: 1.4em 0 0; }
.fatos li { padding: 1rem 1.1rem !important; background: var(--papel); border-radius: var(--r-md); box-shadow: inset 0 5px 0 var(--cor, var(--tecla-azul)), var(--sombra-suave); }
.fatos li::before { display: none; }
.fatos strong { display: block; font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--framboesa-texto); margin-bottom: .25rem; }
.fatos span { font-size: var(--fs-pequeno); line-height: 1.35; display: block; }

.pessoas-mini { display: grid; gap: var(--s-4); }
.pessoa-mini { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-4); align-items: center; background: var(--papel); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--sombra-suave); }
.pessoa-mini img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 999px 999px 12px 12px; }
.pessoa-mini h3 { margin: 0 0 .2rem !important; font-size: 1.1rem !important; }
.pessoa-mini p { font-size: var(--fs-pequeno); line-height: 1.4; margin: 0; }

.relacionados { display: grid; gap: var(--s-4); }
.cartao-link {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1.35rem 3.2rem 1.35rem 1.4rem; border-radius: var(--r-md);
  background: var(--papel); color: var(--tinta); text-decoration: none;
  box-shadow: inset 0 6px 0 var(--cor, var(--tecla-azul)), var(--sombra-suave);
  transition: transform var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.cartao-link:hover { transform: translateY(-3px); box-shadow: inset 0 6px 0 var(--cor, var(--tecla-azul)), var(--sombra-cartao); }
.cartao-link__tipo { font-size: var(--fs-etiqueta); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.cartao-link__titulo { font-family: var(--f-display); font-size: 1.95rem; line-height: 1.02; color: var(--tinta-forte); }
.cartao-link__texto { font-size: var(--fs-pequeno); line-height: 1.45; }
.cartao-link svg { position: absolute; right: 1.2rem; top: 50%; width: 1.3rem; height: 1.3rem; margin-top: -.65rem; color: var(--framboesa-texto); transition: transform var(--t-rapido) var(--ease); }
.cartao-link:hover svg { transform: translateX(4px); }

.aula__links, .turma__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: auto; }
.aula__links .aula__cta, .turma__links .turma__cta { margin-top: 0; }
.link-saiba { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 0; font-weight: 700; color: var(--framboesa-texto); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--framboesa-texto) 30%, transparent); }
.link-saiba:hover { border-color: var(--framboesa-texto); }
.link-saiba svg { width: 1.05rem; height: 1.05rem; }
.cabeca__rodape { text-align: center; margin-top: var(--s-6); }

.rodape__links li + li { margin-top: .45rem !important; }
.rodape__links a { font-weight: 500 !important; color: var(--tinta) !important; }
.rodape__links a:hover { color: var(--framboesa-texto) !important; text-decoration: underline; }
.rodape__contato { margin-top: var(--s-4); }

@media (min-width: 640px) {
  .relacionados { grid-template-columns: repeat(2, 1fr); }
  .pessoas-mini { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .pagina-topo__grade { grid-template-columns: 1.15fr .85fr; }
  .pagina-topo__grade--sem-midia { grid-template-columns: 1fr; max-width: 52rem; }
  .pagina-topo__midia { margin-right: 0; }
  .conteudo { grid-template-columns: minmax(0, 1fr) 19rem; }
  .lateral { position: sticky; top: 6.5rem; }
  .relacionados { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .revelar-pendente { opacity: 1; transform: none; }
}

/* ---------- impressão ---------- */
@media print {
  .topo, .whats-flutuante, .final__opcoes, .hero__acoes { display: none !important; }
  body { background: #fff; }
}