/* ============================================================
   Modelo de demo — Lucas Lima® · Web Designer
   NÃO edite este arquivo por prospect. Tudo muda em dados.js.
   Três temas via [data-tema]; a cor de destaque vem de --destaque.
   ============================================================ */

:root {
  --destaque: #e50914;
  --faisca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 4.8 10.8 12 12-7.2 1.2-11.4 5.4-12 12-.6-6.6-4.8-10.8-12-12C7.2 10.8 11.4 6.6 12 0z'/%3E%3C/svg%3E");
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1080px;
  --raio: 14px;
}

body[data-tema='escuro'] {
  --fundo: #0d0d0f; --fundo-alt: #131316; --card: #17171b;
  --linha: rgba(255,255,255,.10); --tinta: #f4f4f6; --tinta-fraca: #a3a3ad;
  --sombra: 0 18px 50px rgba(0,0,0,.55); --veu: rgba(13,13,15,.72);
}
body[data-tema='claro'] {
  --fundo: #fbfaf8; --fundo-alt: #f2f0ec; --card: #ffffff;
  --linha: rgba(0,0,0,.10); --tinta: #16150f; --tinta-fraca: #6a6862;
  --sombra: 0 16px 44px rgba(0,0,0,.10); --veu: rgba(251,250,248,.82);
}
body[data-tema='quente'] {
  --fundo: #1a1512; --fundo-alt: #211a16; --card: #261e19;
  --linha: rgba(255,240,225,.12); --tinta: #f6efe6; --tinta-fraca: #b8a695;
  --sombra: 0 18px 50px rgba(0,0,0,.5); --veu: rgba(26,21,18,.70);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, iframe { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 600; line-height: 1.1;
  margin: 0; letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 4.4vw, 2.2rem); margin-bottom: 1.6rem; }
h3 { font-size: 1.08rem; letter-spacing: 0; }
em { font-style: italic; color: var(--destaque); }
p { margin: 0 0 1rem; }

.dentro { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.estreito { max-width: 720px; }
.secao { padding: clamp(56px, 11vw, 104px) 0; }
.secao-alt { background: var(--fundo-alt); }

/* ---- topo ---- */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; background: var(--veu); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha);
}
.marca {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  text-decoration: none; color: var(--destaque); letter-spacing: -.01em;
}

/* ---- botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  background: var(--destaque); color: #fff; border: 1px solid transparent;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-grande { padding: 15px 30px; font-size: 1rem; }
.btn-largo { width: 100%; margin-top: 28px; }
@media (min-width: 720px) { .btn-largo { width: auto; } }
.btn-vazio { background: transparent; color: var(--tinta); border-color: var(--linha); }

/* No celular o cabeçalho fica só com o nome — quem chama é o botão flutuante.
   Tem que vir DEPOIS de .btn: mesma especificidade, ganha quem vem por último. */
.btn-topo { display: none; }
@media (min-width: 720px) { .btn-topo { display: inline-flex; } }

/* ---- capa ---- */
.capa { position: relative; isolation: isolate; overflow: hidden; }
.capa-fundo {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.capa::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--veu) 0%, var(--fundo) 96%);
}
body[data-tema='claro'] .capa::after {
  background: linear-gradient(180deg, rgba(251,250,248,.55) 0%, var(--fundo) 96%);
}
.capa.sem-foto::after { background: var(--fundo); }
.capa-dentro { padding-top: clamp(48px, 10vw, 96px); padding-bottom: clamp(48px, 10vw, 96px); }

/* capa 'lado': foto numa moldura ao lado do texto. O texto fica sobre o fundo
   liso, então nunca lava — é o que salva prospect de ateliê e de vitrine. */
.capa[data-estilo='lado']::after { background: none; }
.capa[data-estilo='lado'] {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--destaque) 9%, var(--fundo)) 0%, var(--fundo) 70%);
}
.capa[data-estilo='lado'] .capa-dentro {
  display: grid; gap: clamp(28px, 5vw, 56px); align-items: center;
}
@media (min-width: 880px) {
  .capa[data-estilo='lado'] .capa-dentro { grid-template-columns: 1.05fr .95fr; }
}
.capa-moldura {
  margin: 0; border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra); border: 1px solid var(--linha);
  background: var(--card);
}
.capa-moldura img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 880px) { .capa-moldura img { aspect-ratio: 4 / 4.6; } }
/* na capa com foto de fundo, o texto ocupa a largura toda como antes */
.capa[data-estilo='fundo'] .capa-dentro,
.capa[data-estilo='sem-foto'] .capa-dentro { padding-top: clamp(64px, 14vw, 130px); }
.etiqueta {
  text-transform: uppercase; letter-spacing: .16em; font-size: .72rem;
  font-weight: 600; color: var(--destaque); margin-bottom: 1rem;
}
.linha-fina {
  color: var(--tinta-fraca); font-size: 1.05rem; max-width: 46ch; margin-top: 1.2rem;
}
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ---- cards ---- */
.grade { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grade { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--card); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 26px 24px 24px;
}
/* foto opcional no card: sangra até a borda, o padding do card não a segura */
.card-foto {
  width: calc(100% + 48px); max-width: none;
  margin: -26px -24px 18px;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--fundo-alt);
}
.card .num {
  display: block; font-family: var(--serif); font-size: .8rem;
  color: var(--destaque); margin-bottom: 10px; letter-spacing: .08em;
}
.card p { color: var(--tinta-fraca); font-size: .95rem; margin: .55rem 0 0; }

.texto-grande { font-size: 1.1rem; color: var(--tinta-fraca); }

/* ---- galeria ---- */
.galeria { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
.foto-galeria {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--raio); border: 1px solid var(--linha);
  background: var(--fundo-alt);
}
/* A primeira ocupa 2×2 — quebra a monotonia da grade. Ela CONTINUA 1/1: dois
   quadrados mais o vão dão a mesma medida na largura e na altura, então as
   linhas fecham certinho. Trocar por `height:100%` estica a grade inteira. */
@media (min-width: 720px) {
  .foto-galeria:first-child { grid-column: span 2; grid-row: span 2; }
}

/* ---- passos ---- */
.passos {
  list-style: none; counter-reset: passo; margin: 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passo {
  counter-increment: passo; position: relative;
  padding: 26px 22px 22px; border-radius: var(--raio);
  background: var(--card); border: 1px solid var(--linha);
}
.passo::before {
  content: counter(passo); display: block;
  font-family: var(--serif); font-size: 2rem; line-height: 1;
  color: var(--destaque); opacity: .35; margin-bottom: 12px;
}
.passo p { color: var(--tinta-fraca); font-size: .95rem; margin: .5rem 0 0; }

/* ---- sobre com retrato ---- */
.sobre-grid { display: grid; gap: clamp(24px, 5vw, 48px); align-items: center; }
@media (min-width: 860px) { .sobre-grid { grid-template-columns: .8fr 1.2fr; } }
.retrato {
  margin: 0; border-radius: var(--raio); overflow: hidden;
  border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.retrato img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---- regras ---- */
.intro-regras { margin: -.6rem 0 2.2rem; max-width: 58ch; }
.regras { display: grid; gap: 0; }
.regra {
  padding: 22px 0; border-top: 1px solid var(--linha);
  display: grid; gap: 4px;
}
@media (min-width: 780px) { .regra { grid-template-columns: 1fr 2fr; gap: 24px; } }
.regra:last-child { border-bottom: 1px solid var(--linha); }
.regra h3 { color: var(--destaque); }
.regra p { color: var(--tinta-fraca); font-size: .97rem; margin: 0; }

/* ---- contato ---- */
.contato { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .contato { grid-template-columns: 1fr 1.15fr; align-items: start; } }
/* sem endereço o mapa some: a lista ocupa a linha inteira em vez de metade */
.contato:not(:has(.mapa)) { grid-template-columns: 1fr; }
.dados { list-style: none; margin: 0; padding: 0; }
.dados li {
  padding: 16px 0; border-bottom: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 3px;
}
.dados li:first-child { padding-top: 0; }
.rotulo {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .68rem; font-weight: 600; color: var(--tinta-fraca);
}
.dados a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--destaque); width: fit-content; }
.mapa {
  border-radius: var(--raio); overflow: hidden;
  border: 1px solid var(--linha); box-shadow: var(--sombra); background: var(--card);
}
.mapa iframe { width: 100%; height: 340px; border: 0; filter: grayscale(.25); }

/* ---- rodapé e flutuante ---- */
.rodape {
  padding: 40px 0 96px; border-top: 1px solid var(--linha);
  color: var(--tinta-fraca); font-size: .88rem;
}
.rodape p { margin: 0 0 6px; }
.creditos a { color: var(--tinta-fraca); }

.flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.flutuante svg { width: 30px; height: 30px; fill: #fff; }

.selo-demo {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 45;
  margin: 0; padding: 7px 16px; border-radius: 999px;
  background: var(--veu); backdrop-filter: blur(10px); border: 1px solid var(--linha);
  color: var(--tinta-fraca); font-size: .72rem; letter-spacing: .04em; white-space: nowrap;
}
@media (max-width: 560px) { .selo-demo { display: none; } }

/* ---- movimento de scroll (animacao.js) ----
   O estado escondido só existe quando o JS marcou o <html> com .anima.
   Sem JS, ou no HTML estático sem o script, tudo aparece normalmente. */
.anima .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,.7,.2,1) var(--atraso, 0ms),
              transform .75s cubic-bezier(.22,.7,.2,1) var(--atraso, 0ms);
  will-change: opacity, transform;
}
.anima .revelar.visivel { opacity: 1; transform: none; }

.anima .capa-fundo { will-change: transform; }

.topo { transition: box-shadow .3s ease, border-color .3s ease; }
.topo.rolou { box-shadow: 0 8px 30px rgba(0,0,0,.18); border-bottom-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .anima .revelar { opacity: 1; transform: none; }
}

/* ---- brilho da capa ----------------------------------------------------
   Aurora de luz na cor de destaque atravessando o topo. Três manchas
   radiais borradas, cada uma com seu ritmo — nunca voltam ao mesmo lugar,
   então não dá aquela sensação de GIF em loop curto. Sem biblioteca.
   Liga com `brilho: true` no dados.js.                                    */
.capa .brilho {
  position: absolute; inset: -20% -10%; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.capa .brilho i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    var(--destaque) 0%,
    var(--destaque) 26%,
    color-mix(in srgb, var(--destaque) 55%, transparent) 52%,
    transparent 76%);
  filter: blur(48px); will-change: transform;
}
.capa .brilho i:nth-child(1) {
  width: 58vw; height: 58vw; left: -18vw; top: -8vw; opacity: .62;
  animation: brilho-a 26s ease-in-out infinite alternate;
}
.capa .brilho i:nth-child(2) {
  width: 46vw; height: 46vw; right: -14vw; top: 6%; opacity: .5;
  animation: brilho-b 34s ease-in-out infinite alternate;
}
.capa .brilho i:nth-child(3) {
  width: 40vw; height: 40vw; left: 32%; bottom: -20vw; opacity: .4;
  animation: brilho-c 42s ease-in-out infinite alternate;
}
/* no tema claro a mesma luz lava o texto: segura a mão */
body[data-tema='claro'] .capa .brilho i { opacity: .72; }
body[data-tema='claro'] .capa .brilho i:nth-child(3) { opacity: .5; }

@keyframes brilho-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(16vw, 7vh, 0) scale(1.18); }
}
@keyframes brilho-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-14vw, -6vh, 0) scale(.88); }
}
@keyframes brilho-c {
  from { transform: translate3d(0, 0, 0) scale(.9); }
  to   { transform: translate3d(10vw, -9vh, 0) scale(1.2); }
}
/* celular: mancha grande + blur pesado derruba o frame rate */
@media (max-width: 700px) {
  .capa .brilho i { filter: blur(42px); }
  .capa .brilho i:nth-child(3) { display: none; }
}

/* ---- materiais (e-book, catálogo, cardápio) ---- */
.grade-materiais { align-items: start; }
.card-material { display: flex; flex-direction: column; }
.capa-material {
  margin: -26px -24px 18px; border-radius: var(--raio) var(--raio) 0 0;
  overflow: hidden; background: var(--fundo-alt);
}
.capa-material img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
}
.link-material {
  margin-top: auto; padding-top: 14px; align-self: flex-start;
  color: var(--destaque); font-weight: 600; font-size: .92rem;
  text-decoration: none; border-bottom: 1px solid currentColor;
}

/* ---- perguntas frequentes (details nativo) ---- */
.perguntas { display: grid; gap: 0; }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta:last-child { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  list-style: none; cursor: pointer; padding: 20px 34px 20px 0;
  position: relative; font-family: var(--serif); font-weight: 600;
  font-size: 1.05rem; line-height: 1.35;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--destaque);
  font-size: 1.5rem; line-height: 1; font-family: var(--sans);
  transition: transform .2s ease;
}
.pergunta[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.pergunta p {
  margin: -4px 0 22px; color: var(--tinta-fraca);
  font-size: .97rem; max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .capa .brilho i { animation: none; }
}


/* ---- faíscas e halo (andam junto com `brilho: true`) -------------------
   As faíscas são o mesmo desenho em SVG mascarado na cor de destaque — não
   emoji, então saem iguais em qualquer navegador. Cada uma recebe posição,
   tamanho, ritmo e atraso próprios no animacao.js: sem isso, 30 estrelas
   piscando no mesmo compasso viram pisca-pisca de Natal.                   */
.capa .faiscas {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.capa .faiscas span {
  position: absolute; display: block;
  background-color: var(--destaque);
  -webkit-mask: var(--faisca) center / contain no-repeat;
  mask: var(--faisca) center / contain no-repeat;
  opacity: var(--o, .4);
  animation:
    flutuar var(--dur, 14s) ease-in-out infinite alternate,
    cintilar var(--pulso, 4s) ease-in-out infinite;
  animation-delay: var(--atraso-f, 0s), var(--atraso-p, 0s);
  will-change: transform, opacity;
}
@keyframes flutuar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 12px), var(--dy, -46px), 0); }
}
@keyframes cintilar {
  0%, 100% { opacity: var(--o, .4); }
  50%      { opacity: calc(var(--o, .4) * .22); }
}

/* halo pulsando atrás do retrato. Mora fora da moldura de propósito: a
   moldura tem overflow:hidden e comeria o brilho. */
.capa-foto-caixa { position: relative; }
.capa-foto-caixa .capa-moldura { position: relative; z-index: 1; }
.capa-foto-caixa .halo {
  position: absolute; inset: -20%; z-index: 0; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    var(--destaque) 0%,
    color-mix(in srgb, var(--destaque) 78%, transparent) 38%,
    color-mix(in srgb, var(--destaque) 30%, transparent) 62%,
    transparent 78%);
  filter: blur(34px);
  animation: pulsar-halo 7s ease-in-out infinite;
}
@keyframes pulsar-halo {
  0%, 100% { transform: scale(.94); opacity: .72; }
  50%      { transform: scale(1.1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .capa .faiscas span, .capa-foto-caixa .halo { animation: none; }
}

/* ============================================================
   SUELY — paleta e ajustes pedidos por ela (03/09/2026)
   Daqui pra baixo é só desta cliente. O modelo acima segue intacto.
   Pedido: "o site está muito sem cor, deixe sempre na nossa paleta".
   ============================================================ */

:root {
  --creme:   #F5EDE4;
  --pessego: #F3DFD2;
  --lilas:   #C9AEDD;
  --roxo:    #6E3F96;
  --marrom:  #8A6A55;
}

/* a base deixa de ser cinza-clarinho e passa a ser creme */
body[data-tema='claro'] {
  --fundo: #FDF9F4;
  --fundo-alt: var(--creme);
  --tinta: #2C1B3D;
  --tinta-fraca: #6B5A72;
  --linha: rgba(110, 63, 150, .16);
}

/* cada faixa com a sua cor — é o que tira a sensação de site branco */
#itens  { background: linear-gradient(180deg, var(--fundo) 0%, #FBF3EC 100%); }
#passos { background: linear-gradient(140deg, var(--pessego) 0%, #E9D8EC 100%); }
#perguntas { background: var(--fundo); }
#contato { background: var(--creme); }
.rodape { background: var(--creme); }

/* ---- serviços: card branco com fio lilás e título roxo ---- */
#itens .card {
  border-color: rgba(201, 174, 221, .55);
  box-shadow: 0 10px 30px rgba(110, 63, 150, .07);
}
#itens .card h3 { color: var(--roxo); }

/* botão de agendar "delicado": link de texto com seta, não bloco de cor */
.link-agendar {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding-bottom: 2px;
  font-size: .9rem; font-weight: 600; color: var(--roxo);
  text-decoration: none; border-bottom: 1px solid rgba(110, 63, 150, .35);
  transition: gap .18s ease, border-color .18s ease;
}
.link-agendar::after { content: '→'; font-weight: 400; }
.link-agendar:hover { gap: 11px; border-bottom-color: var(--roxo); }

/* ---- balão da capa ---- */
.balao {
  position: relative; margin-top: 2rem; max-width: 34ch;
  padding: 16px 20px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(110, 63, 150, .22);
  box-shadow: 0 12px 30px rgba(110, 63, 150, .12);
}
/* o rabinho: um quadrado girado, com a mesma borda só nos dois lados que aparecem */
.balao::after {
  content: ''; position: absolute; left: 30px; bottom: -8px;
  width: 15px; height: 15px; background: #fff;
  border-right: 1px solid rgba(110, 63, 150, .22);
  border-bottom: 1px solid rgba(110, 63, 150, .22);
  transform: rotate(45deg);
}
.balao p {
  margin: 0; font-family: var(--serif); font-size: 1.06rem;
  line-height: 1.35; color: var(--roxo); font-weight: 600;
}
.balao-linha {
  display: block; margin-top: 6px;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--marrom);
}

/* ---- botões de WhatsApp menores (ela pediu duas vezes) ---- */
.btn { padding: 9px 16px; font-size: .84rem; }
.btn-grande { padding: 11px 20px; font-size: .88rem; }
.btn-largo { width: auto; }
.flutuante { width: 44px; height: 44px; right: 16px; bottom: 16px; }
.flutuante svg { width: 23px; height: 23px; }

/* ---- "E agora?" mais enxuto: três colunas baixas, número discreto ---- */
#passos { padding: clamp(40px, 7vw, 64px) 0; }
#passos h2 { margin-bottom: 1.1rem; }
@media (min-width: 720px) { .passos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passo {
  padding: 18px 20px; background: rgba(255, 255, 255, .78);
  border-color: rgba(110, 63, 150, .18);
}
.passo::before {
  font-size: .95rem; opacity: 1; color: var(--roxo);
  margin-bottom: 4px; letter-spacing: .1em;
}
.passo h3 { color: var(--roxo); }
.passo p { margin-top: .3rem; font-size: .92rem; }

/* ---- depoimentos: carrossel que anda sozinho ---- */
.secao-lilas {
  background: linear-gradient(160deg, #E4D3EE 0%, var(--pessego) 100%);
}
.carrossel { position: relative; }
/* flex, não grid: `grid-auto-columns: minmax(0, …)` deixa a coluna encolher
   até zero e os oito cards se espremem lado a lado em vez de rolar.
   Com flex-shrink 0 cada card mantém a largura e o trilho passa a rolar. */
.trilho {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; outline: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.trilho::-webkit-scrollbar { display: none; }
.depoimento { flex: 0 0 85%; }
@media (min-width: 700px)  { .depoimento { flex-basis: calc(50% - 8px); } }
@media (min-width: 1000px) { .depoimento { flex-basis: calc(33.333% - 11px); } }
.depoimento {
  scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; border: 1px solid rgba(110, 63, 150, .16);
  border-radius: var(--raio); padding: 26px 24px 22px;
  box-shadow: 0 12px 32px rgba(110, 63, 150, .10);
}
.depoimento blockquote {
  margin: 0; font-size: .97rem; line-height: 1.65; color: var(--tinta);
}
/* as aspas gordas em lilás dão o ar de depoimento sem precisar de foto */
.depoimento blockquote::before {
  content: '“'; display: block; font-family: var(--serif);
  font-size: 2.6rem; line-height: .6; color: var(--lilas); margin-bottom: 10px;
}
.depoimento figcaption {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(110, 63, 150, .14);
  display: flex; flex-direction: column; gap: 1px;
}
.depoimento figcaption strong { color: var(--roxo); font-size: .95rem; }
.depoimento figcaption span {
  font-size: .8rem; letter-spacing: .04em; color: var(--marrom);
}
/* são 24 depoimentos: sem o wrap a fila de bolinhas estoura a tela do celular */
.bolinhas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 22px;
}

/* ---- setas do carrossel ----
   No desktop elas ficam nas laterais, na altura do meio dos cards. No celular
   descem para a linha das bolinhas: sobrando por cima do card, tapariam texto. */
.seta {
  position: absolute; z-index: 2;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; border: 1px solid rgba(110, 63, 150, .22);
  box-shadow: 0 8px 22px rgba(110, 63, 150, .16);
  transition: transform .18s ease, background .18s ease;
}
.seta svg {
  width: 19px; height: 19px; fill: none;
  stroke: var(--roxo); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.seta:hover { background: var(--roxo); transform: scale(1.06); }
.seta:hover svg { stroke: #fff; }
/* Padrão: na linha das bolinhas. Encostada na lateral do card ela tapa o
   texto do depoimento — só sobe para o meio quando existe margem de sobra
   fora da coluna de 1080px, o que começa por volta de 1180px de tela. */
.seta-ant, .seta-prox { bottom: -4px; }
.seta-ant  { left: 0; }
.seta-prox { right: 0; }
.bolinhas { padding: 0 52px; }
@media (min-width: 1180px) {
  /* a metade da altura desconta a faixa das bolinhas, senão a seta desce demais */
  .seta-ant, .seta-prox {
    top: calc(50% - 24px); bottom: auto; transform: translateY(-50%);
  }
  .seta-ant:hover, .seta-prox:hover { transform: translateY(-50%) scale(1.06); }
  .seta-ant  { left: -50px; }
  .seta-prox { right: -50px; }
  .bolinhas { padding: 0; }
}
.bolinha {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(110, 63, 150, .28); cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.bolinha.ativa { width: 22px; border-radius: 999px; background: var(--roxo); }

/* ---- cursos: a faixa roxa que ela pediu ---- */
.secao-roxa {
  background: linear-gradient(155deg, var(--roxo) 0%, #4E2A6E 100%);
  color: var(--creme);
}
.secao-roxa h2 { color: #fff; }
.secao-roxa .intro-regras { color: rgba(255, 255, 255, .82); }
.secao-roxa .regra { border-top-color: rgba(255, 255, 255, .20); }
.secao-roxa .regra:last-child { border-bottom-color: rgba(255, 255, 255, .20); }
/* lilás puro sobre o roxo fica com pouco contraste — clareia só aqui */
.secao-roxa .regra h3 { color: #E7D6F2; }
.secao-roxa .regra p { color: rgba(255, 255, 255, .86); }

/* ---- materiais: faixa pêssego ---- */
.secao-pessego { background: linear-gradient(180deg, var(--pessego) 0%, #F7E8DC 100%); }
.secao-pessego .card {
  border-color: rgba(138, 106, 85, .28);
  box-shadow: 0 10px 28px rgba(138, 106, 85, .12);
}
.secao-pessego .card h3 { color: var(--roxo); }
.link-material { color: var(--roxo); font-weight: 600; }

/* ---- os botõezinhos do fim do site, centralizados ---- */
.rodape { text-align: center; }
.rodape-sociais {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0 0 22px;
}
/* flex-basis fixo: sem ele o pai flex comprime a largura e o círculo vira ovo */
.social {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--roxo); border: 0;
  transition: transform .18s ease, filter .18s ease;
}
.social svg { width: 20px; height: 20px; fill: #fff; }
.social:hover { transform: translateY(-2px); filter: brightness(1.12); }
/* cada rede na cor dela; telefone e Instagram ficam no roxo da casa */
.social-whats { background: #25D366; }
.social-tube  { background: #C4302B; }

@media (prefers-reduced-motion: reduce) {
  .trilho { scroll-behavior: auto; }
}

/* ---- botões de ação dos cursos (pedido dela por mensagem, 03/09) ---- */
.acoes-regra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
/* a .regra é grid de 2 colunas no desktop; sem isso os botões caem embaixo
   do título, na coluna errada */
@media (min-width: 780px) { .acoes-regra { grid-column: 2; } }
.btn-curso {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .45); color: #fff;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.btn-curso:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .14); }
/* o "quero comprar" é o cheio: é a ação que ela quer que ganhe o clique */
.btn-curso-cheio {
  background: var(--creme); color: var(--roxo); border-color: var(--creme);
}
.btn-curso-cheio:hover { background: #fff; color: var(--roxo); }

/* ---- ajustes de celular ----
   A capa empurrava a foto muito abaixo da dobra: o título e o subtítulo
   sozinhos comiam a tela inteira num aparelho de 390px. */
@media (max-width: 560px) {
  h1 { font-size: clamp(1.75rem, 8.4vw, 2.2rem); }
  h2 { font-size: 1.45rem; margin-bottom: 1.2rem; }
  body { font-size: 16px; }
  .linha-fina { font-size: .97rem; line-height: 1.6; margin-top: 1rem; }
  .capa-dentro { padding-top: 30px; padding-bottom: 34px; }
  .secao { padding: 48px 0; }
  .acoes { margin-top: 1.5rem; gap: 10px; }
  .acoes .btn { flex: 1 1 auto; justify-content: center; }
  .balao { margin-top: 1.5rem; max-width: none; padding: 14px 16px; }
  .balao p { font-size: .99rem; }
  .balao-linha { font-size: .74rem; }
  .card { padding: 22px 20px 20px; }
  .card-foto { width: calc(100% + 40px); margin: -22px -20px 16px; }
  .texto-grande { font-size: 1rem; }
  .depoimento { padding: 22px 20px 20px; }
  .btn-curso { padding: 10px 16px; font-size: .82rem; }
  .acoes-regra .btn-curso { flex: 1 1 auto; justify-content: center; }
}

/* ---- contador do carrossel: só no celular, no lugar das bolinhas ---- */
.contador { display: none; }
@media (max-width: 700px) {
  .bolinhas { display: none; }
  .contador {
    display: block; margin: 22px 0 0; text-align: center;
    font-size: .85rem; font-weight: 600; letter-spacing: .06em;
    color: var(--roxo);
  }
  /* sem as bolinhas, as setas se apoiam na linha do contador */
  .seta-ant, .seta-prox { bottom: 2px; }
}

/* ---- menu do topo ----
   O cabeçalho é sticky: sem scroll-margin o título da seção para embaixo dele
   quando a pessoa clica no link. */
section[id] { scroll-margin-top: 74px; }

.topo { gap: 12px; }
.topo-direita { display: flex; align-items: center; gap: 10px; }

.menu { display: flex; align-items: center; gap: 4px; }
.menu a {
  padding: 7px 11px; border-radius: 999px; text-decoration: none;
  font-size: .87rem; font-weight: 500; color: var(--tinta);
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.menu a:hover { background: rgba(110, 63, 150, .10); color: var(--roxo); }

/* o botão de sanduíche só existe no celular */
.sanduiche {
  display: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(110, 63, 150, .22); border-radius: 12px;
  background: #fff; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.sanduiche span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--roxo);
}

/* Abaixo de 900px o menu vira painel: em linha ele espremeria o nome dela
   e os links quebrariam em duas fileiras dentro do cabeçalho fixo. */
@media (max-width: 899px) {
  .sanduiche { display: flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 14px 14px;
    background: var(--fundo); border-bottom: 1px solid var(--linha);
    box-shadow: 0 14px 30px rgba(110, 63, 150, .12);
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 12px 10px; font-size: .95rem; border-radius: 10px; }
}

/* ---- materiais: os três "Baixar grátis" na mesma linha ----
   O modelo usa `align-items: start`, então cada card fica só com a altura do
   próprio texto — e o `margin-top: auto` do link não tem folga para empurrar.
   Com stretch os três cards ficam da mesma altura e os links se alinham. */
.grade-materiais { align-items: stretch; }

/* ---- capas dos e-books com o mesmo contorno ----
   As de Comandos e Simpatias são a arte cheia, com fundo escuro chegando na
   beirada — isso já parecia uma borda. A de Salmos é foto do livro em 3D sobre
   fundo cinza claro, então não tinha contorno nenhum. Este fio interno dá a
   mesma moldura às três sem mexer na arte de nenhuma. */
.capa-material { position: relative; }
.capa-material::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(44, 27, 61, .22);
  border-radius: var(--raio) var(--raio) 0 0;
}

/* ---- carrossel: fora as bolinhas, fica o contador ----
   Vinte e quatro bolinhas nunca couberam numa linha só: no celular quebravam
   em duas fileiras e no desktop viravam uma régua ilegível, sem dizer em qual
   depoimento a pessoa está. O contador diz isso em qualquer largura, e quem
   navega são as setas. */
.bolinhas { display: none; }
.contador { display: block; }
@media (max-width: 1179px) {
  .seta-ant, .seta-prox { bottom: 2px; }
}