/* =====================================================================
   STYLE.CSS — Bruna Zucateli / violino online
   Violino ao CENTRO e ao FUNDO. Textos colados à esquerda e à direita.
   Fundo preto. Sem serifa. Sem caixas/divisórias. Surge no scroll.
   ===================================================================== */

:root {
  --preto:     #000000;
  --luz:       #F4F1EA;
  --luz-70:    rgba(244, 241, 234, 0.72);
  --luz-45:    rgba(244, 241, 234, 0.45);
  --luz-20:    rgba(244, 241, 234, 0.20);
  --luz-10:    rgba(244, 241, 234, 0.10);

  --madeira:   #C39A63;
  --esmeralda: #17614A;
  --brilho:    #3FA37C;

  --fonte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Vidro "vitral" — padrão dos depoimentos, reaproveitado no site todo */
  --vidro-bg:    rgba(8, 8, 6, 0.42);
  --vidro-borda: rgba(195, 154, 99, 0.30);
  --vidro-blur:  14px;

  --t-display: clamp(1.82rem, 4.55vw, 4.2rem);  /* -30% */
  --t-titulo:  clamp(1.9rem, 4vw, 3.25rem);
  --t-sub:     clamp(1.05rem, 1.5vw, 1.3rem);
  --t-corpo:   clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
  --t-mini:    0.78125rem;
  --t-num:     clamp(4rem, 13vw, 11rem);

  --gutter:    clamp(2rem, 6vw, 5.25rem);   /* laterais mais largas (~70–84px) */
  --respiro:   clamp(7rem, 20vh, 15rem);
  --lane:      clamp(180px, 26vw, 360px);   /* faixa central livre p/ o violino */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* ESCALA PARA TELAS GRANDES (monitor grande, TV 4K).
   Até 1600px nada muda (16px, o design aprovado em notebook). Acima disso a raiz
   cresce e TUDO que está em rem — fontes, larguras, respiros — cresce junto, então
   o site não vira uma ilhazinha de conteúdo no meio de uma TV. */
html { -webkit-text-size-adjust: 100%;
  font-size: clamp(16px, calc(16px + (100vw - 1600px) * 0.0056), 28px); }

body {
  /* Sem luz de fundo no cenário: preto puro, só o violino é iluminado */
  background: var(--preto);
  color: var(--luz);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Tipografia ---------- */
.display { font-weight: 600; font-size: var(--t-display); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.titulo  { font-weight: 600; font-size: var(--t-titulo); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.sub     { font-size: var(--t-sub); font-weight: 400; line-height: 1.5; color: var(--luz-70); }
.eyebrow { display: inline-block; font-size: var(--t-mini); font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--madeira); }
.corpo   { color: var(--luz-70); }
.acento  { color: var(--madeira); }

/* Número grande de seção */
.num {
  font-size: var(--t-num);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--luz-20);
}
.num b { -webkit-text-stroke: 1.5px var(--madeira); color: transparent; font-weight: 700; }

/* ---------- CTA ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap;
  padding: 0.75em 1.4em; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--luz);
  /* vidro vitral (mesmo padrão dos depoimentos) + fio dourado */
  background: var(--vidro-bg);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--madeira); border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cta:hover { background: var(--madeira); color: var(--preto); transform: translateY(-2px); }
.cta::after { content: "→"; transition: transform .3s var(--ease); }
.cta:hover::after { transform: translateX(4px); }
/* Palavra-chave em dourado ("ao vivo", "gratuita") onde quer que apareça */
.ouro { color: var(--madeira); font-weight: 600; }
.cta .ouro { color: var(--madeira); font-weight: 700; }
.cta:hover .ouro { color: inherit; }
/* no hover o botão fica dourado por dentro: o destaque acompanha o texto */
.voltar-site:hover .ouro, .voltar-site:focus-visible .ouro { color: inherit; }
/* Botão curto da hero: ícone de calendário + texto + seta */
.cta--curto svg { width: 1.15em; height: 1.15em; flex: none; }

.link-suave { display: inline-flex; align-items: center; gap: .5em; color: var(--luz); padding-bottom: 2px; border-bottom: 1px solid var(--luz-20); transition: border-color .3s var(--ease), color .3s var(--ease); }
.link-suave:hover { color: var(--madeira); border-color: var(--madeira); }

/* Variante do CTA (mantém texto branco, contorno dourado) */
.cta--ouro { color: var(--luz); }

/* Botão flutuante superior direito — vazado, contorno dourado, texto branco */
.flutuante {
  /* mesma margem do conteúdo (alinha com o texto da direita) */
  position: fixed; top: var(--gutter); right: var(--gutter);
  z-index: 60;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.7em 1.2em; font-size: 0.9rem; font-weight: 500;
  color: var(--luz); background: var(--vidro-bg);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--madeira); border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.flutuante:hover { background: var(--madeira); color: var(--preto); transform: translateY(-2px); }
.flutuante svg { width: 1.1em; height: 1.1em; flex: none; }

/* NO CELULAR o botão só existe depois que a pessoa começa a descer: parado no
   alto ele atrapalhava a hero e virava uma bolinha sem rótulo no canto. Ao rolar,
   entra como uma BARRA sólida centralizada no topo, com o texto sempre à mostra.
   No computador nada muda: ele segue discreto no canto desde o início. */
@media (max-width: 620px) {
  .flutuante {
    left: clamp(0.9rem, 4vw, 1.5rem); right: clamp(0.9rem, 4vw, 1.5rem);
    top: clamp(0.6rem, 1.8vh, 1.1rem);
    justify-content: center; padding: 0.85em 1em; font-size: 0.9rem;
    /* escondido enquanto a página está no topo */
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .flutuante--fixo {
    opacity: 1; visibility: visible; transform: translateY(0);
    background: var(--madeira); color: var(--preto); border-color: var(--madeira);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55); font-weight: 600;
  }
  .flutuante--fixo:hover { background: var(--madeira); transform: translateY(0); }
}

/* ---------- Violino fixo, centro e fundo ---------- */
#hero { position: fixed; inset: 0; z-index: 0; }
/* Sem filtro de matiz aqui: a cor é corrigida no material (não quebra o degradê) */
#violino-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  /* vira o verniz para o mel/âmbar por LUMINÂNCIA (degradê contínuo) */
  filter: sepia(0.58) saturate(1.32) brightness(1.04); }

/* Bloom quase imperceptível no topo: a névoa da luz que desce sobre o violino */
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  left: 50%; top: -16vh; transform: translateX(-50%);
  width: 72vw; height: 52vh;
  background: radial-gradient(ellipse at 50% 0%,
              rgba(255, 242, 224, 0.075) 0%,
              rgba(255, 240, 220, 0.028) 42%,
              rgba(0,0,0,0) 72%);
  filter: blur(34px);
}

.hero__texto {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: 1fr var(--lane) 1fr;
  align-items: center;
  /* padding lateral = gutter (alinha as bordas com os botões flutuantes);
     vão ENTRE as colunas menor, para as laterais ganharem largura */
  column-gap: clamp(1.5rem, 3.2vw, var(--gutter));
  row-gap: var(--gutter);
  padding: var(--gutter);
  transition: opacity .4s var(--ease);
}
/* min-width:0 = as colunas podem encolher; sem isso o texto da direita
   empurra a grade para fora e quebra a margem lateral em telas médias. */
.hero__esq { grid-column: 1; align-self: center; min-width: 0; }
/* grid-template-columns: minmax(0,1fr) prende a coluna interna à largura do
   container; com justify-items:end, a borda DIREITA dos textos e do botão
   fica travada na linha dos botões flutuantes (nunca vaza para fora dela). */
.hero__dir { grid-column: 3; align-self: center; text-align: right; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 1.5rem; justify-items: end; min-width: 0; }
/* CTA agora vive na coluna esquerda (swap): respiro do subtítulo acima */
.hero__esq .cta { margin-top: 2.25rem; }
.hero__esq .display {
  max-width: none;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  line-height: 1.12;
  white-space: pre-line;   /* respeita as quebras de linha do texto */
  text-wrap: initial;
}
/* Subheadline da direita: SECUNDÁRIA (menor e mais discreta), para não
   competir com o subtítulo da esquerda. Ela apenas apoia a box + botão. */
.hero__dir .sub { max-width: 34ch; white-space: pre-line; font-size: 0.92rem; line-height: 1.5; color: var(--luz-45); }
/* Formato / Nível / Idade dentro de uma box: fio dourado e cantos arredondados */
.hero__meta { display: flex; flex-wrap: nowrap; gap: clamp(1rem, 1.6vw, 1.5rem);
  justify-content: flex-end; text-align: right;
  border: 1px solid var(--vidro-borda); border-radius: 16px;
  padding: 1rem 1.25rem; color: var(--madeira); font-size: var(--t-mini);
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--vidro-bg); -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur)); }
.hero__meta > div { text-align: right; min-width: 0; }
.hero__meta b { display: block; margin-top: .35rem; font-size: 0.72rem; color: var(--luz); text-transform: none; letter-spacing: .01em; text-wrap: balance; line-height: 1.35; }

/* Subtítulo à esquerda, abaixo do título e acima das redes */
.hero__subtitulo { margin-top: 1.5rem; max-width: 30ch; }

/* Ícones sociais no hero (traço/linha, dourados) */
.hero__sociais { display: flex; gap: 1.1rem; margin-top: 1.75rem; align-items: flex-start; }
.hero__social { color: var(--madeira); display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
  transition: color .3s var(--ease), transform .3s var(--ease); }
.hero__social:hover { color: var(--brilho); transform: translateY(-2px); }
.hero__social svg { width: 24px; height: 24px; }
/* Número de seguidores: discreto, só aparece se preenchido na content.js */
.hero__social-num { font-size: .72rem; letter-spacing: .04em; color: var(--madeira); opacity: .85; white-space: nowrap; }
.hero__social:hover .hero__social-num { color: var(--brilho); opacity: 1; }

/* Rótulo de seção no centro, sobre o violino (fonte levemente maior) */
/* MÉTODO / SOBRE — em branco e um pouco maiores que os demais rótulos */
.rotulo-centro { font-size: 1.25rem; letter-spacing: 0.24em; text-align: center; color: var(--luz); }
/* valor MENOR que o rótulo (Formato/Nível/Idade), como pedido */
.hero__meta b { display: block; color: var(--luz); font-weight: 500; margin-top: .35rem; letter-spacing: .01em; text-transform: none; font-size: .72rem; line-height: 1.35; }
.hero__dir .cta { pointer-events: auto; }

/* Nome em destaque no hero, com avatar redondo à esquerda */
.hero__id { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 1.6rem; }
.hero__avatar {
  width: clamp(5rem, 7.5vw, 7rem); height: clamp(5rem, 7.5vw, 7rem);
  flex: none; overflow: hidden;
  border-radius: 50%; display: block;
  border: 1px solid var(--madeira); box-shadow: 0 0 0 5px rgba(195,154,99,0.10);
}
.hero__avatar img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  transform: scale(1.75); transform-origin: 50% 14%;
}
.hero__marca {
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--luz); line-height: 1.02;
}
/* Marca "Bruna Zucateli" — padrão do site: 1ª palavra leve, resto pesado,
   sempre em CAIXA ALTA e em duas linhas. Hero, página de links e rodapé. */
.marca__n1 { display: block; font-weight: 400; text-transform: uppercase; }
.marca__n2 { display: block; font-weight: 700; text-transform: uppercase; }

/* Zona de rolagem que dirige o giro */
#scroll-driver { height: 300vh; pointer-events: none; }

/* ---------- Conteúdo: transparente, violino aparece atrás ---------- */
#conteudo { position: relative; z-index: 2; }

.faixa {
  display: grid;
  grid-template-columns: 1fr var(--lane) 1fr;
  gap: var(--gutter);
  align-items: center;
  padding: var(--respiro) var(--gutter);
  max-width: 100rem; margin-inline: auto;
}
.faixa__esq { grid-column: 1; }
.faixa__dir { grid-column: 3; text-align: right; }
/* Rótulos "Nas redes sociais" / "Aulas de violino nos métodos" (dourado, palavra-chave) */
.faixa__label { font-size: 1rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--madeira); }
/* Cabeçalho padrão das seções pós-hero: rótulo + título grande, centralizado */
.faixa__cabeca { grid-column: 1 / -1; text-align: center; max-width: 46rem;
  margin: 0 auto clamp(2rem, 5vh, 3.5rem); padding-inline: var(--gutter); }
.faixa__centro { grid-column: 2; display: grid; place-items: center; }
.faixa__dir.pilha, .faixa__esq.pilha { display: grid; gap: 1.5rem; }
.faixa__dir.pilha { justify-items: end; }

/* dá legibilidade ao texto sobre o violino */
.faixa__esq > *, .faixa__dir > * { text-shadow: 0 2px 24px rgba(0,0,0,0.8); }

/* Locais (fluido, sem caixa) */
.locais { display: flex; flex-wrap: wrap; gap: 0.35em 1.1em; padding: 0; list-style: none; }
.faixa__dir .locais { justify-content: flex-end; }
.locais li { font-size: clamp(1rem, 1.8vw, 1.4rem); font-weight: 500; color: var(--luz); }

/* Alcance */
.alcance { display: flex; flex-wrap: wrap; gap: 1.75rem 2.75rem; padding: 0; list-style: none; }
.faixa__dir .alcance { justify-content: flex-end; }
.alcance__n { display: block; font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.alcance__r { color: var(--luz-45); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .14em; margin-top: .4rem; display: block; }

/* Métodos em destaque */
.metodos { display: flex; flex-wrap: wrap; gap: 0.4em 1.75rem; padding: 0; list-style: none; }
.faixa__dir .metodos { justify-content: flex-end; }
.metodos li { font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; }
.metodos li:nth-child(even) { color: var(--madeira); }

/* Blocos do Sobre */
.sobre__blocos p { font-size: var(--t-corpo); color: var(--luz-70); line-height: 1.6; }
.sobre__blocos p + p { margin-top: 1.15rem; }
/* 1º parágrafo em destaque: maior e mais claro, para o olho começar por ele */
.sobre__blocos .sobre__lead { font-size: var(--t-sub); color: var(--luz); line-height: 1.5; }
/* Palavras-chave em destaque dourado (autoridade e prova social saltam na leitura) */
.sobre__blocos strong { color: var(--madeira); font-weight: 600; }
/* Botão que fecha a seção Sobre, com respiro do texto acima */
[data-cta-sobre] { margin-top: 2.75rem; }
.sobre__acoes { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; margin-top: 2rem; }

/* Foto da Bruna — recorte retangular vertical 9:16 */
.sobre__foto { position: relative; }
.sobre__foto img {
  width: 100%; max-width: 22rem; margin-left: auto;
  aspect-ratio: 9 / 16; object-fit: cover; object-position: center;
  display: block; border-radius: 8px;
}
.faixa__dir .sobre__foto { display: flex; justify-content: flex-end; }

/* ---------- MAPA (vidro preto que desfoca o violino, sem caixa dura) ---------- */
.mapa-secao {
  position: relative; padding-block: var(--respiro);
  background: rgba(0, 0, 0, 0.30);
  -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
/* Mapa maior no desktop: usa a largura toda e encosta menos nas laterais */
.mapa-wrap { position: relative; width: 100%; max-width: 120rem; margin-inline: auto; padding-inline: clamp(1rem, 2.5vw, 2.5rem); }
.mapa-svg { width: 100%; height: auto; display: block; overflow: visible; transition: filter .4s var(--ease); }
.mapa-wrap:hover .mapa-svg { filter: brightness(1.28) drop-shadow(0 0 6px rgba(63,163,124,0.25)); }
.mapa-terra { fill: rgba(244, 241, 234, 0.24); }
.mapa-ponto { fill: var(--brilho); opacity: 0; transform-box: fill-box; transform-origin: center; }
.mapa-halo { fill: var(--brilho); opacity: 0; }
.mapa-rotulo { fill: var(--luz-70); font-family: var(--fonte); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: 0; }
.mapa-linha { stroke: var(--luz-20); stroke-width: 0.6; fill: none; opacity: 0; }
/* Nome completo do local, grande, ao passar o mouse */
/* Mesmo estilo dos rótulos MÉTODO / SOBRE */
.mapa-destaque {
  fill: var(--luz); font-family: var(--fonte); font-size: 17px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; pointer-events: none;
  transition: opacity .18s ease;
}
.mapa-legenda { text-align: center; margin-bottom: 2.5rem; padding-inline: var(--gutter); }
/* Lista de locais abaixo do mapa — só no celular (no desktop os rótulos do mapa bastam) */
.mapa-lista { display: none; }

/* Poeira: NA FRENTE do violino, mas SEMPRE ATRÁS do conteúdo (fotos e textos) */
#particulas { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

/* Controle de som — canto inferior esquerdo; barrinha aparece no hover */
.som-ctrl {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 60;
  display: flex; align-items: center; gap: 0.6rem;
}
.som {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  color: var(--luz-45); background: var(--vidro-bg);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--vidro-borda);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.som:hover { color: var(--luz); border-color: var(--luz-45); }
.som.ligado { color: var(--brilho); border-color: var(--brilho); }
.som svg { width: 20px; height: 20px; }

/* Barrinha de volume — some por padrão, aparece ao passar o mouse */
.som-slider {
  width: 0; opacity: 0; height: 4px; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--luz-20); border-radius: 999px; cursor: pointer;
  transition: width .3s var(--ease), opacity .3s var(--ease);
}
.som-ctrl:hover .som-slider, .som-slider:focus-visible { width: 90px; opacity: 1; }
.som-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brilho); cursor: pointer; }
.som-slider::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--brilho); cursor: pointer; }

/* WhatsApp flutuante — canto inferior direito */
.whats-float {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--luz); background: var(--vidro-bg);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--madeira);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.whats-float:hover { background: var(--madeira); color: var(--preto); transform: translateY(-2px); }
/* TELAS BAIXAS (notebook, janela restaurada): o respiro vertical da hero encolhe e
   os botões flutuantes descem, para o CTA nunca esbarrar no botão de som/WhatsApp.
   As margens laterais ficam intactas. */
@media (min-width: 1101px) and (max-height: 820px) {
  .hero__texto { padding-block: clamp(1.25rem, 3.5vh, 2.75rem); }
  .som-ctrl, .whats-float { bottom: clamp(0.9rem, 2.5vh, 1.75rem); }
  .flutuante { top: clamp(0.9rem, 2.5vh, 1.75rem); }
}
.whats-float svg { width: 22px; height: 22px; }

/* Carrossel de fotos (abaixo do Sobre) — looping contínuo */
.carrossel { position: relative; padding-block: clamp(3rem, 8vh, 6rem); }
/* Galeria arrastável: empurra para os lados e clica para ampliar */
.carrossel__trilho {
  display: flex; gap: 1rem; padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  cursor: grab; scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.carrossel__item {
  flex: none; scroll-snap-align: center; cursor: zoom-in;
  padding: 0; border: 0; background: none;
  height: clamp(13rem, 32vh, 21.25rem); border-radius: 10px; overflow: hidden;
  transition: transform .3s var(--ease);
}
.carrossel__item:hover { transform: translateY(-4px); }
.carrossel__item img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* No celular: uma foto centralizada por vez (encaixa no centro ao arrastar) */
@media (max-width: 760px) {
  .carrossel__trilho { scroll-snap-type: x mandatory; padding-inline: 11vw; gap: 0.75rem; }
  .carrossel__item { width: 78vw; height: auto; aspect-ratio: 3 / 2; }
  .carrossel__item img { width: 100%; height: 100%; }
}

/* ---------- Depoimentos (carrossel de cartões de vidro) ---------- */
.depo { position: relative; z-index: 2; padding-block: clamp(3rem, 8vh, 6rem); }
.depo__cabeca { text-align: center; padding-inline: var(--gutter); margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.depo__aviso { color: var(--luz-45); font-size: var(--t-mini); letter-spacing: .04em; margin-top: 0.85rem; }
.depo__trilho {
  display: flex; gap: 1.1rem; padding-inline: var(--gutter); padding-block: 0.5rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: none;
}
.depo__trilho::-webkit-scrollbar { display: none; }
.depo__trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
/* Cartão: vidro preto transparente com blur e fio dourado fino */
.depo__card {
  flex: none; scroll-snap-align: center; cursor: pointer; text-align: left;
  width: clamp(16.75rem, 80vw, 22.5rem); min-height: 14.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.7rem 1.6rem 1.45rem; border-radius: 16px;
  background: rgba(8, 8, 6, 0.42);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(195, 154, 99, 0.28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.depo__card:hover, .depo__card:focus-visible { border-color: var(--madeira); transform: translateY(-4px); background: rgba(13, 13, 10, 0.55); }
.depo__aspas { font-family: Georgia, "Times New Roman", serif; font-size: 2.6rem; line-height: 0.9; height: 1.1rem; color: var(--madeira); opacity: 0.55; }
.depo__resumo {
  color: var(--luz); font-size: 1.02rem; line-height: 1.5; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.depo__autor { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; }
.depo__nome { color: var(--madeira); font-weight: 600; letter-spacing: .01em; }
.depo__local { color: var(--luz-45); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .12em; }
/* Modal com o depoimento completo */
.depo-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem); background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.depo-modal[hidden] { display: none; }
.depo-modal__caixa {
  position: relative; max-width: 40rem; width: 100%; max-height: 82vh; overflow-y: auto;
  padding: clamp(1.9rem, 4vw, 3rem); border-radius: 18px;
  background: rgba(12, 12, 9, 0.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(195, 154, 99, 0.35);
}
.depo-modal__fechar { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; line-height: 1; color: var(--luz);
  background: rgba(11, 11, 9, 0.5); border: 1px solid var(--luz-20); cursor: pointer; }
.depo-modal__fechar:hover { border-color: var(--madeira); color: var(--madeira); }
.depo__aspas--g { font-size: 3.6rem; height: 1.6rem; }
.depo-modal__texto { color: var(--luz); line-height: 1.7; font-size: 1.05rem; }
.depo-modal__autor { margin-top: 1.5rem; }
.depo-modal__nome { color: var(--madeira); font-weight: 600; }
.depo-modal__local { color: var(--luz-45); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .12em; margin-left: 0.6rem; }

/* ---------- Perguntas frequentes (acordeão acessível) ---------- */
.faq { position: relative; z-index: 2; max-width: 52rem; margin-inline: auto;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(3rem, 8vh, 5rem); }
.faq__cabeca { text-align: center; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.faq__lista { display: grid; gap: 0.75rem; }
.faq__item { border: 1px solid var(--vidro-borda); border-radius: 14px;
  background: var(--vidro-bg); -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  transition: border-color .3s var(--ease), background .3s var(--ease); overflow: hidden; }
.faq__item[open] { border-color: var(--madeira); background: rgba(13,13,10,0.55); }
.faq__item:hover { border-color: var(--madeira); }
.faq__p { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; font-size: 1.05rem; font-weight: 600; color: var(--madeira); }
.faq__p::-webkit-details-marker { display: none; }
.faq__p::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; color: var(--madeira);
  transition: transform .3s var(--ease); line-height: 1; }
.faq__item[open] .faq__p::after { transform: rotate(45deg); }
.faq__r { padding: 0 1.35rem 1.25rem; }
.faq__r p { color: var(--luz); line-height: 1.65; max-width: 62ch; }
/* FAQ dentro do ebook: mesma identidade, sem largura extra */
.faq--eb { max-width: none; padding-inline: 0; }
.faq--eb .faq__lista { max-width: 52rem; margin-inline: auto; }
.faq--eb .faq__cabeca .titulo { font-size: var(--t-titulo); margin: 0.75rem 0 0; }

/* Rodapé — degradê suave para o preto (sem linha reta) */
.rodape {
  position: relative; z-index: 3; text-align: center;
  padding: 14rem var(--gutter) 5rem; margin-top: -9rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--preto) 45%);
  /* O rodapé sobe 9rem sobre o conteúdo para o degradê ficar suave. Sem isto
     ele engole os cliques do que está por baixo (o botão de compra do ebook). */
  pointer-events: none;
}
.rodape a, .rodape button { pointer-events: auto; }
.rodape__acao { margin-bottom: 2.5rem; }

/* =========================================================
   PÁGINA DE LINKS (links.html) — hub estilo "link na bio"
   ========================================================= */
/* Violino ao fundo da página de links (mesmo tom âmbar da home) */
#violino-links {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.62;
  filter: sepia(0.58) saturate(1.32) brightness(1.04);
}
/* No celular a coluna ocupa quase a tela toda: o violino recua mais um pouco */
@media (max-width: 760px) {
  #violino-links { opacity: 0.42; }
}

.lp {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.5rem; text-align: center;
  max-width: 30rem; margin-inline: auto;
  /* lateral com teto próprio: com o --gutter cheio, a coluna de links encolhia
     conforme a tela crescia e os títulos dos botões chegavam a cortar */
  padding: clamp(2.5rem, 8vh, 5rem) clamp(2rem, 6vw, 2.5rem) 3rem;
}
.lp__avatar {
  display: block; width: 104px; height: 104px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--madeira); box-shadow: 0 0 0 5px rgba(195,154,99,0.08);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* Avatar é um link para o site: dá um retorno visual ao passar o mouse/tocar */
a.lp__avatar:hover, a.lp__avatar:focus-visible {
  box-shadow: 0 0 0 5px rgba(195,154,99,0.22); transform: translateY(-2px);
}
.lp__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transform: scale(1.7); transform-origin: 50% 14%; }
/* Caminho claro para o site principal, no topo da lista */
/* Botão de navegação entre páginas (usado nos links e no ebook) */
.voltar-site {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.68em 1.25em; font-size: 0.9rem; font-weight: 500; letter-spacing: .01em;
  color: var(--luz); background: var(--vidro-bg);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  border: 1px solid var(--madeira); border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.voltar-site:hover, .voltar-site:focus-visible {
  background: var(--madeira); color: var(--preto); transform: translateY(-2px);
}
.voltar-site svg { width: 1.1em; height: 1.1em; flex: none; }
.lp__nome { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.lp__bio { color: var(--luz-70); max-width: 26ch; text-wrap: balance; }
.lp__sociais { display: flex; gap: 1.25rem; margin-top: .25rem; }
.lp__sociais a { color: var(--madeira); display: inline-flex; transition: color .3s var(--ease), transform .3s var(--ease); }
.lp__sociais a:hover { color: var(--brilho); transform: translateY(-2px); }
.lp__sociais svg { width: 26px; height: 26px; }

.lp__botoes { width: 100%; display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.75rem; }
.lp-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .85em;
  width: 100%; padding: 1em 1.25em; border-radius: 14px;
  font-weight: 500; font-size: clamp(0.85rem, 2.6vw, 1rem); white-space: nowrap; color: var(--luz);
  background: var(--vidro-bg); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
/* Selo de promoção: pílula dourada ao lado do título, no lugar da antiga faixa
   diagonal vermelha — nasce do próprio botão em vez de ser colada por cima */
.lp-btn__promo {
  justify-self: end; align-self: center;
  background: var(--madeira); color: var(--preto);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25em 0.7em; border-radius: 999px; white-space: nowrap;
  line-height: 1.5; pointer-events: none;
}
.lp-btn:hover { border-color: var(--madeira); transform: translateY(-2px); }
.lp-btn__ico { display: inline-flex; flex: none; color: var(--madeira); transition: color .3s var(--ease); }
.lp-btn__ico svg { width: 22px; height: 22px; }
.lp-btn__txt { text-align: left; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lp-btn__nota { margin-left: auto; padding-left: .9em; flex: none; }
/* Botão de produto: título + selo na primeira linha; preço à esquerda e "Comprar"
   à direita na segunda. O ícone acompanha as duas linhas. */
.lp-btn--selo {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  grid-template-areas: "ico txt promo" "ico preco nota";
  /* segunda linha com altura fixa: com ou sem preço os botões ficam do mesmo
     tamanho e o texto alinha na mesma altura entre eles */
  grid-template-rows: auto 1.5rem;
  align-content: center; column-gap: .85em; row-gap: .1em;
}
.lp-btn--selo .lp-btn__ico   { grid-area: ico; align-self: center; }
.lp-btn--selo .lp-btn__txt   { grid-area: txt; }
.lp-btn--selo .lp-btn__promo { grid-area: promo; }
.lp-btn--selo .lp-btn__preco { grid-area: preco; justify-self: start; align-self: center;
  font-size: .82rem; font-weight: 600; color: var(--luz); white-space: nowrap; }
/* Linha de apoio (ex.: "gravado, assista quantas vezes quiser") — ocupa o mesmo
   lugar do preço, para curso e ebook ficarem com a mesma estrutura */
.lp-btn--selo .lp-btn__sub { grid-area: preco; justify-self: stretch; align-self: center;
  text-align: left; font-size: .68rem; font-weight: 400; color: var(--luz-45); letter-spacing: .01em;
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* preço cheio riscado, discreto, antes do promocional */
.lp-btn--selo .lp-btn__preco s { color: var(--luz-45); font-weight: 400; font-size: .88em;
  text-decoration-thickness: 1px; margin-right: .15em; }
.lp-btn--selo .lp-btn__nota  { grid-area: nota; justify-self: end; align-self: center; margin: 0; padding: 0;
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .68rem; letter-spacing: .1em; }
.lp-btn--selo .lp-btn__nota svg { width: 13px; height: 13px; flex: none;
  transition: transform .3s var(--ease); }
.lp-btn--selo:hover .lp-btn__nota svg { transform: translateX(3px); }
.lp-btn--destaque:hover .lp-btn__ico { color: var(--preto); }
.lp-btn:hover { border-color: var(--madeira); transform: translateY(-2px); }
.lp-btn__nota { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--madeira); }
.lp-btn--destaque { background: transparent; border-color: var(--madeira); color: var(--luz); font-weight: 600; }
.lp-btn--destaque .ouro { color: var(--madeira); font-weight: 700; }
.lp-btn--destaque:hover { background: var(--madeira); color: var(--preto); }
.lp-btn--destaque:hover .ouro { color: inherit; }
.lp-btn--pendente { opacity: .55; }
.lp-btn--pendente .lp-btn__nota { color: var(--luz-45); }
/* Chip do cupom de desconto — clicável, copia o código */
.lp-cupom {
  width: 100%; margin-top: -0.35rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.72em 1.15em; border-radius: 12px; font-size: 0.9rem; color: var(--luz);
  background: rgba(195, 154, 99, 0.08); border: 1px dashed var(--madeira);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lp-cupom:hover { background: rgba(195, 154, 99, 0.16); }
.lp-cupom__txt strong { color: var(--madeira); letter-spacing: .08em; }
.lp-cupom__acao { display: inline-flex; align-items: center; gap: 0.4em; color: var(--madeira); font-size: 0.82rem; white-space: nowrap; }
.lp-cupom__acao svg { width: 1em; height: 1em; flex: none; }
.lp-cupom.copiado { border-style: solid; border-color: var(--brilho); background: rgba(63, 163, 124, 0.14); }
.lp-cupom.copiado .lp-cupom__acao { color: var(--brilho); }

.lp__voltar { margin-top: 1.5rem; color: var(--luz-45); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--luz-20); padding-bottom: 2px; }
.lp__voltar:hover { color: var(--luz); border-color: var(--luz-45); }

/* =========================================================
   PÁGINA DO EBOOK (ebook.html)
   ========================================================= */
/* Marca no topo esquerdo — o caminho de volta para o site principal */
/* Logo da Bruna no topo do ebook (avatar + nome) — leva ao site */
.eb__topo { max-width: 78rem; margin-inline: auto; padding: clamp(2rem, 5vh, 3.25rem) var(--gutter) 0; }
.eb__logo { display: inline-flex; align-items: center; gap: 0.9rem; transition: transform .3s var(--ease); }
.eb__logo-avatar {
  width: clamp(2.9rem, 5vw, 3.6rem); height: clamp(2.9rem, 5vw, 3.6rem);
  flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--madeira); box-shadow: 0 0 0 4px rgba(195,154,99,0.09);
  transition: box-shadow .3s var(--ease);
}
.eb__logo-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.7); transform-origin: 50% 14%; }
.eb__logo-nome { font-size: clamp(0.95rem, 1.6vw, 1.2rem); letter-spacing: 0.18em; color: var(--luz); line-height: 1.02; }
.eb__logo:hover .eb__logo-avatar, .eb__logo:focus-visible .eb__logo-avatar { box-shadow: 0 0 0 4px rgba(195,154,99,0.24); }
.eb__logo:hover { transform: translateX(-2px); }
/* clip (e não hidden) para o carrossel poder sangrar até a borda sem gerar
   rolagem horizontal na página por causa da largura da barra de rolagem */
.eb { position: relative; z-index: 2; overflow-x: clip; }
.eb__hero {
  max-width: 78rem; margin-inline: auto;
  padding: clamp(3.5rem, 9vh, 6rem) var(--gutter) clamp(3rem, 7vh, 5rem);
}
/* Cabeçalho do hero: rótulo + título + intro, centralizado (padrão da home) */
.eb__hero-cabeca { text-align: center; max-width: 52rem; margin: 0 auto clamp(2.25rem, 5vh, 3.25rem); }
/* Dupla: capa (âncora visual) à esquerda, cartão de oferta à direita */
.eb__hero-duo {
  display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; max-width: 62rem; margin-inline: auto;
}
.eb__capa img { width: 100%; max-width: 22.5rem; display: block; margin-inline: auto;
  border-radius: 16px;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.75)); }
.eb__titulo { font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin-top: 1rem; }
.eb__intro { color: var(--luz-70); max-width: 50ch; margin: 1.35rem auto 0; text-wrap: balance; }

/* Cartão de oferta */
.eb-card {
  position: relative; overflow: hidden;
  background: rgba(18,18,15,0.62); border: 1px solid var(--luz-20); border-radius: 18px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
/* Faixa diagonal do canto. A geometria só comporta rótulos CURTOS (~10 letras):
   nowrap + largura mínima garantem que o texto nunca seja cortado pela quina. */
.eb-card__selo {
  /* largura FIXA: com padding variável, cada rótulo caía num ponto diferente da
     diagonal e a quina do cartão comia as letras ("28 aulas" virava "ULAS") */
  position: absolute; top: 30px; right: -52px; width: 184px;
  transform: rotate(45deg);
  background: var(--madeira); color: var(--preto);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 0; text-align: center; white-space: nowrap; overflow: hidden;
}
.eb-card__nome { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.04em; }
.eb-card__autora { color: var(--luz-45); font-size: var(--t-mini); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 0.3rem; }
.eb-card__preco { display: flex; align-items: baseline; gap: 0.35rem; margin: 1.4rem 0 1.5rem; }
.eb-card__preco span { font-size: 1.1rem; color: var(--luz-70); }
.eb-card__preco strong { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.eb-card__rot { font-size: var(--t-mini); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--madeira); }
.eb-card__lista { list-style: none; padding: 0; margin: 0.9rem 0 1.6rem; }
.eb-card__lista li { display: flex; align-items: center; gap: 0.7em; padding: 0.6rem 0; border-bottom: 1px solid var(--luz-10); color: var(--luz-70); font-size: 0.95rem; }
.eb-card__lista li:last-child { border-bottom: 0; }
.eb-card__lista li::before { content: "✓"; color: var(--madeira); font-weight: 700; flex: none; }
.eb-card__nota { color: var(--luz-45); font-size: var(--t-mini); text-align: center; margin-top: 0.9rem; }
.eb-cta { width: 100%; justify-content: center; }

/* Seções */
.eb__secao { max-width: 72rem; margin-inline: auto; padding: clamp(3rem, 8vh, 5.5rem) var(--gutter); }
.eb__secao h2 { font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 1.5rem; }
/* Abertura de seção no padrão da home: rótulo dourado + título grande, centralizado */
.eb__cabeca { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 5vh, 3.25rem); }
.eb__cabeca .titulo { font-size: var(--t-titulo); margin: 0.75rem 0 0; }
.eb__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.eb__texto p { color: var(--luz-70); max-width: 50ch; text-wrap: pretty; }
.eb__texto p + p { margin-top: 1.1rem; }
.eb__texto strong { color: var(--madeira); font-weight: 600; }
/* "Sobre o e-book": corpo de texto à ESQUERDA, páginas em carrossel à DIREITA.
   O texto centraliza na vertical para não sobrar vazio ao lado das páginas altas. */
.eb__dupla--conteudo { align-items: center; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); }
.eb__dupla--conteudo .eb__texto p { max-width: 40ch; }
/* Páginas internas do ebook: carrossel horizontal em looping, arrastável + ampliar.
   Roda sem fim (sem "terminar") e nunca mostra a mesma página duas vezes ao mesmo tempo. */
.eb__paginas {
  display: flex; gap: clamp(1rem, 2vw, 1.5rem); padding-block: 0.4rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: none;
}
/* Na coluna da direita o carrossel sangra até a borda da tela: as páginas
   "saem" pela lateral em vez de ficarem cortadas com sobra de preto ao lado. */
.eb__dupla--conteudo .eb__paginas {
  /* min(...) trava a sangria: em telas muito largas ela não pode crescer a ponto
     de caber mais de 3 páginas na janela (só existem 3, apareceriam repetidas) */
  --sangra: min(max(var(--gutter), calc(50vw - 36rem + var(--gutter))), 10rem);
  margin-right: calc(-1 * var(--sangra));
  padding-right: var(--sangra);
}
.eb__paginas::-webkit-scrollbar { display: none; }
.eb__paginas.arrastando { cursor: grabbing; scroll-snap-type: none; }
.eb__pagina-item {
  flex: none; scroll-snap-align: center; cursor: zoom-in;
  width: clamp(15rem, 46%, 20.6rem);
  padding: 0; border: 0; background: none; border-radius: 10px; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.eb__pagina-item:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,0.6); }
.eb__pagina-item img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--luz-10);
  pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* Visualizador ampliado das páginas */
.zoom {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0,0,0,0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.zoom[hidden] { display: none; }
.zoom img { max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); }
.zoom__fechar {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
  color: var(--luz); background: rgba(11,11,9,0.5); border: 1px solid var(--luz-20);
}
.zoom__fechar:hover { border-color: var(--madeira); color: var(--madeira); }
.eb__lista { list-style: none; padding: 0; display: grid; gap: 0.9rem; max-width: 52ch; }
.eb__lista li { display: flex; gap: 0.75em; color: var(--luz); }
.eb__lista li::before { content: "✓"; color: var(--madeira); font-weight: 700; flex: none; }
.eb__autora { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Foto da autora — quadrada (1:1) */
.eb__autora-foto { width: clamp(190px, 26vw, 290px); aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; flex: none; }
.eb__autora-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Respiro extra no fim: o rodapé sobe 9rem, o botão não pode ficar embaixo dele */
.eb__fecho { text-align: center; padding-bottom: clamp(8rem, 14vh, 11rem);
  display: flex; flex-direction: column; align-items: center; gap: 2rem; }

/* Violino 3D em pose diagonal, ao lado de "Para quem é este e-book?" */
.eb__dupla--violino { align-items: center; grid-template-columns: 1fr 1.25fr; }
.eb__violino {
  position: relative; width: 100%;
  min-height: clamp(520px, 84vh, 900px);
  margin-right: calc(-1 * var(--gutter));   /* sangra até a borda */
}
/* mesmo tratamento de cor do violino da home (âmbar por luminância) */
.eb__violino canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  filter: sepia(0.58) saturate(1.32) brightness(1.04); }

/* Convite para as aulas de violino (leva ao site principal) */
.eb__aulas { text-align: center; }
.eb__aulas-txt { max-width: 44rem; margin: 0 auto clamp(1.75rem, 4vh, 2.5rem); color: var(--luz-70); }
.eb__aulas .cta { display: inline-flex; }

@media (max-width: 1100px) {
  .eb__hero-duo { grid-template-columns: 1fr; gap: 2.25rem; }
  .eb__capa { order: -1; }
  .eb__capa img { max-width: 100%; }
  .eb__dupla { grid-template-columns: 1fr; }
  /* Botões de produto no celular: título um toque menor, para caber inteiro ao
     lado do selo (com o tamanho cheio, "Ebook Como ler partitura" cortava) */
  .lp-btn--selo .lp-btn__txt { font-size: 0.94em; }
  .lp-btn--selo .lp-btn__sub { font-size: .63rem; }
  /* Páginas do ebook no celular: cards maiores (como já estava perfeito).
     Encostam na margem esquerda do texto (snap start), sem sobra da página
     anterior à esquerda; a sobra fica só à direita, indicando que há mais. */
  .eb__pagina-item { width: clamp(215px, 62vw, 290px); scroll-snap-align: start; }
  .eb__dupla--conteudo .eb__paginas { scroll-snap-type: x mandatory; scroll-padding-left: 0; }
  /* Foto da autora ocupa a largura toda do texto no celular */
  .eb__autora { grid-template-columns: 1fr; justify-items: stretch; }
  .eb__autora-foto { width: 100%; }
  /* Violino do ebook no celular: menor e sem sobra de espaço entre as seções */
  .eb__dupla--violino { gap: 0.5rem; }
  .eb__violino { min-height: clamp(260px, 40vh, 360px); margin-top: 0; margin-right: calc(-1 * var(--gutter)); }
  .eb__secao { padding-block: clamp(2.25rem, 6vh, 3.5rem); }
}
/* Marca do rodapé: avatar + nome em duas linhas (mesmo padrão do hero) */
.rodape__marca { display: inline-flex; align-items: center; gap: 1.1rem; text-align: left; }
.rodape__avatar {
  display: block; width: clamp(3.25rem, 6vw, 4.25rem); height: clamp(3.25rem, 6vw, 4.25rem);
  flex: none; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--madeira); box-shadow: 0 0 0 4px rgba(195,154,99,0.09);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
/* Clicável: volta ao topo (retorno visual ao passar o mouse/tocar) */
a.rodape__avatar:hover, a.rodape__avatar:focus-visible {
  box-shadow: 0 0 0 4px rgba(195,154,99,0.24); transform: translateY(-3px);
}
.rodape__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.7); transform-origin: 50% 14%; }
.rodape .nome { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; }
.rodape .assin { color: var(--luz-45); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; margin-top: 1rem; }

/* ---------- Dissolver + inércia ao rolar (aparece E some, com física) ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .95s cubic-bezier(0.34, 1.32, 0.44, 1);
  will-change: opacity, transform;
}
.reveal--esq { transform: translate(-16px, 22px); }
.reveal--dir { transform: translate(16px, 22px); }
.reveal.visivel { opacity: 1; transform: none; }

/* ---------- Acessibilidade ---------- */
:focus-visible { outline: 2px solid var(--brilho); outline-offset: 4px; border-radius: 4px; }
.pular { position: absolute; left: -9999px; top: 0; z-index: 100; background: #111; color: var(--luz); padding: .75em 1.25em; }
.pular:focus { left: 0; }
.sr-so { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .cta, .link-suave { transition: none; }
}

/* ---------- Responsivo ----------
   Colapsa em 1100px: o hero de 3 colunas (texto-violino-texto) precisa de
   largura; abaixo disso (meia-tela no PC, tablet, celular) empilha. */
@media (max-width: 1100px) {
  /* Mais respiro nas laterais no celular */
  :root { --gutter: 2.75rem; }
  #scroll-driver { height: 200vh; }
  /* No celular o violino vai para o canto (ver js/violino.js) e fica mais discreto */
  #violino-canvas { opacity: 0.45; }

  .hero__texto {
    /* alinhado ao TOPO (não centralizado): o avatar não sobe atrás do botão de som */
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
    gap: 0.6rem; text-align: left; overflow: hidden;
    /* topo reserva o espaço do som; base com folga p/ não encostar no WhatsApp */
    padding: clamp(6.5rem, 15vh, 8rem) var(--gutter) clamp(5.5rem, 13vh, 7rem);
  }
  /* Descrição secundária fica oculta no celular (a box já entrega os fatos) */
  .hero__dir .sub { display: none; }
  /* Vidro fosco atrás do conteúdo, aparecendo DEPOIS do título (como no mapa) */
  .hero__texto::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(5,5,4,0.32);
    -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 34%, #000 50%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0, transparent 34%, #000 50%, #000 100%);
  }

  /* Coluna única, tudo à esquerda, com hierarquia clara */
  .hero__esq, .hero__dir { display: contents; }
  .hero__texto > *, .hero__id, .hero__meta > div { text-align: left; }
  .hero__id           { order: 1; margin-bottom: 0.25rem; }
  .hero__esq .eyebrow { order: 2; }
  .hero__esq .display { order: 3; font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.1; margin: 0.15rem 0; }
  .hero__subtitulo    { order: 4; margin: 0; font-size: 1.05rem; color: var(--luz-70); }
  /* Ordem no celular: título > tagline > descrição > box de fatos > BOTÃO > redes.
     (o CTA agora vive na coluna esquerda; as redes, na direita — ver swap no HTML) */
  .hero__dir .sub     { order: 5; max-width: none; white-space: normal; text-align: left;
                        font-size: 0.95rem; line-height: 1.5; color: var(--luz-70); margin-top: 0.9rem; }
  .hero__meta         { order: 6; justify-content: flex-start; gap: 1.1rem; margin-top: 1rem; }
  .hero__esq .cta     { order: 7; align-self: stretch; justify-content: center; margin: 1.3rem 0 0; padding: 1.15em 1.3em; font-size: 0.9rem; }
  .hero__sociais      { order: 8; justify-content: flex-start; margin-top: 1.3rem; }

  /* Contraste só no que fica sobre o violino nítido (antes do vidro) */
  .hero__id, .hero__esq .eyebrow, .hero__esq .display, .hero__subtitulo {
    text-shadow: 0 2px 16px rgba(0,0,0,0.92);
  }

  /* Seções: rótulo (MÉTODO/SOBRE) no TOPO, tudo à esquerda.
     minmax(0,1fr) impede a foto de esticar a coluna e comer o padding direito. */
  .faixa { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; text-align: left; position: relative; z-index: 0; }
  /* Véu escuro atrás do conteúdo: o violino não atrapalha a leitura no celular */
  .faixa::before {
    content: ""; position: absolute; inset: -1px -0.5rem; z-index: -1; pointer-events: none;
    background: rgba(5, 5, 4, 0.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .faixa__esq, .faixa__dir { grid-column: 1; text-align: left; order: 1; }
  .faixa__centro { grid-column: 1; order: -1; place-items: start; text-align: left; }
  .faixa__centro .rotulo-centro { text-align: left; }
  /* Sobre no celular: rótulo SOBRE > FOTO da Bruna > texto > botão */
  .faixa--sobre .faixa__dir { order: 0; margin-bottom: 0.5rem; }
  .faixa--sobre .faixa__esq { order: 1; }
  .faixa__dir.pilha { justify-items: start; }
  .faixa__dir .locais, .faixa__dir .alcance, .faixa__dir .metodos { justify-content: flex-start; }
  .sobre__foto { justify-content: flex-start !important; }
  /* Foto da Bruna no Sobre: quadrada (1:1) no celular */
  .sobre__foto img { aspect-ratio: 1 / 1; max-width: 100%; margin-left: 0; }
  /* Cabeçalhos das seções ficam CENTRALIZADOS no celular (padrão dos depoimentos) */
  .mapa-legenda, .faixa__cabeca { text-align: center; }
  /* Título de seção: no máximo 2 linhas (menor e com quebra equilibrada) */
  .titulo { font-size: clamp(1.3rem, 5.3vw, 1.65rem); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
  .faixa__cabeca { max-width: 30rem; margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
  .depo__cabeca h2, .mapa-legenda h2, .faixa__cabeca h2 { max-width: 20ch; margin-inline: auto; }
  /* Rótulo de abertura (eyebrow) sempre em 1 linha */
  .mapa-legenda .eyebrow, .depo__cabeca .eyebrow, .faixa__cabeca .eyebrow, .faq__cabeca .eyebrow {
    white-space: nowrap; font-size: 0.68rem; letter-spacing: 0.12em;
  }
  .mapa-wrap { padding-inline: 0.25rem; }   /* mapa maior no celular */
  /* No celular o mapa mostra só os pontos; os nomes vão numa lista legível abaixo */
  .mapa-rotulo, .mapa-linha { display: none; }
  .mapa-ponto { r: 4.5; }
  .mapa-lista {
    display: grid; gap: 1.75rem; margin-top: 2.25rem;
    padding-inline: var(--gutter); text-align: left;
  }
  .mapa-lista .locais { margin-top: 0.6rem; gap: 0.3em 1.1em; }
  .mapa-lista .locais li { font-size: 1.05rem; font-weight: 500; }
  .reveal--esq, .reveal--dir { transform: translateY(26px); }
}

/* =====================================================================
   PÁGINA DO CURSO GRAVADO (curso.html)
   Reaproveita a estrutura do ebook (.eb__*) e acrescenta o que é só daqui:
   player do vídeo, selo de garantia em código e formas de pagamento.
   ===================================================================== */

/* Capa do curso: quadrada, cantos arredondados */
.cr__capa img { width: 100%; max-width: 24rem; display: block; margin-inline: auto;
  border-radius: 16px; filter: drop-shadow(0 28px 60px rgba(0,0,0,0.75)); }

/* Formas de pagamento logo no cartão de oferta (tira dúvida antes de virar objeção) */
.cr-pag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .45rem .7rem; margin-top: 1rem; }
.cr-pag__item { display: inline-flex; align-items: center; gap: .4em;
  font-size: .74rem; letter-spacing: .04em; color: var(--luz-70); }
.cr-pag__item svg { width: 15px; height: 15px; flex: none; color: var(--madeira); }
/* Caminho do desconto no Pix: é clicável e leva ao checkout com desconto.
   O [hidden] precisa vir explícito: sem ele, o display abaixo vence o atributo
   e o chip continua aparecendo mesmo desligado. */
.cr-pix[hidden] { display: none; }
.cr-pix { display: inline-flex; align-items: center; gap: .5em; margin-top: 1rem;
  padding: .5em 1em; border-radius: 999px;
  background: rgba(63,163,124,0.12); border: 1px solid rgba(63,163,124,0.42);
  color: var(--brilho); font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.cr-pix:hover, .cr-pix:focus-visible { background: rgba(63,163,124,0.2);
  border-color: var(--brilho); transform: translateY(-2px); }
.cr-pix__logo { height: .95rem; width: auto; flex: none; }
.cr-pix__seta { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease); }
.cr-pix:hover .cr-pix__seta { transform: translateX(3px); }

/* Vídeo de apresentação: capa leve + o YouTube só carrega no clique */
.cr__video { position: relative; width: 100%; max-width: 58rem; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--vidro-borda); background: #000; cursor: pointer; padding: 0;
  display: block; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.cr__video:hover { border-color: var(--madeira); transform: translateY(-2px); }
.cr__video img, .cr__video iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; }
.cr__video-play { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  transition: background .3s var(--ease); }
.cr__video:hover .cr__video-play { background: radial-gradient(ellipse at center, rgba(0,0,0,0.12), rgba(0,0,0,0.45)); }
.cr__video-bolha { width: clamp(4.2rem, 8vw, 5.6rem); height: clamp(4.2rem, 8vw, 5.6rem);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--vidro-bg); border: 1px solid var(--madeira);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  box-shadow: 0 0 0 10px rgba(195,154,99,0.10); transition: box-shadow .3s var(--ease); }
.cr__video:hover .cr__video-bolha { box-shadow: 0 0 0 16px rgba(195,154,99,0.16); }
.cr__video-bolha svg { width: 42%; height: 42%; color: var(--luz); margin-left: 6%; }

/* Garantia: tudo em coluna e centralizado (rótulo, título, selo, texto, botão) */
.cr__garantia { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.5rem, 4vh, 2.25rem); }
.cr-selo { width: clamp(10rem, 17vw, 14rem); height: auto; flex: none; display: block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55)); }
.cr__garantia .eb__texto { max-width: 44rem; }
.cr__garantia .eb__texto p { max-width: none; margin-inline: auto; }
.cr__garantia .cr__seguranca { justify-content: center; }

/* Fecho: a frase da professora */
.cr__fecho { text-align: center; }
.cr__frase { font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.01em;
  text-wrap: balance; max-width: 24ch; margin-inline: auto; }
.cr__assina { margin-top: 1rem; font-size: var(--t-mini); text-transform: uppercase;
  letter-spacing: .18em; color: var(--madeira); }

/* Selos de segurança perto do botão final (reduz o medo na hora do clique) */
.cr__seguranca { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  margin-top: 1.4rem; }
.cr__seguranca li { display: inline-flex; align-items: center; gap: .45em;
  font-size: .78rem; color: var(--luz-45); }
.cr__seguranca svg { width: 15px; height: 15px; flex: none; color: var(--brilho); }

@media (max-width: 1100px) {
  .cr__capa img { max-width: 100%; }
}

/* Parcelamento e "pagamento único" logo abaixo do preço */
.cr-parcela { font-size: .95rem; font-weight: 500; color: var(--luz); margin-top: -.6rem; }
.cr-unico { font-size: var(--t-mini); text-transform: uppercase; letter-spacing: .14em;
  color: var(--luz-45); margin-top: .45rem; }

/* Quem processa o pagamento (Hotmart), dito com todas as letras */
.cr-hot { display: flex; align-items: center; justify-content: center; gap: .5em;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--luz-10); }
.cr-hot svg { width: 15px; height: 15px; flex: none; color: var(--brilho); }
.cr-hot__txt { font-size: .78rem; color: var(--luz-45); }
.cr-hot__logo { height: 1.05rem; width: auto; display: block; opacity: .9; }
.cr-pag__logo { height: .95rem; width: auto; display: block; }

/* Módulos do curso */
.cr-mods { list-style: none; padding: 0; margin: clamp(2rem, 5vh, 3rem) auto 0;
  max-width: 60rem; display: grid; gap: .75rem; counter-reset: none; }
.cr-mod { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem 1.15rem;
  align-items: start; padding: 1.15rem 1.35rem; border-radius: 14px;
  background: var(--vidro-bg); border: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(var(--vidro-blur)); backdrop-filter: blur(var(--vidro-blur));
  transition: border-color .3s var(--ease), transform .3s var(--ease); }
.cr-mod:hover { border-color: rgba(195,154,99,0.55); transform: translateY(-2px); }
.cr-mod__n { font-size: 1.05rem; font-weight: 600; color: var(--madeira);
  letter-spacing: .02em; line-height: 1.3; }
.cr-mod__corpo { display: grid; gap: .25rem; min-width: 0; }
.cr-mod__t { font-size: 1.02rem; font-weight: 600; color: var(--luz); }
.cr-mod__d { font-size: .92rem; color: var(--luz-70); text-wrap: pretty; }

/* Repertório: as músicas que a pessoa vai tocar */
.cr-musicas { list-style: none; padding: 0; margin: clamp(2rem, 5vh, 3rem) auto 0;
  max-width: 60rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .7rem 1.5rem; }
.cr-musicas li { display: flex; align-items: center; gap: .75em; min-width: 0;
  padding: .7rem .95rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--luz-10);
  color: var(--luz); font-size: .95rem; transition: border-color .3s var(--ease); }
.cr-musicas li:hover { border-color: rgba(195,154,99,0.45); }
.cr-musicas svg { width: 17px; height: 17px; flex: none; color: var(--madeira); }

@media (max-width: 1100px) {
  .cr-mod { padding: 1rem 1.1rem; gap: .8rem .9rem; }
  .cr-musicas { grid-template-columns: 1fr; }
}