:root {
  /* Visual acolhedor e sempre claro (mesmo com o celular no modo escuro): fundo rosado suave, cartões brancos, botão em degradê */
  --fundo: #fdf5f2;
  --fundo-2: #f9eff8;
  --superficie: #ffffff;
  --papel: #fffdf9;
  --linha-papel: #f1e2ea;
  --texto: #3b1d30;
  --suave: #7d6474;
  --borda: #f0dfe7;
  --destaque: #e8457a;
  --destaque-escuro: #d12e64;
  --destaque-2: #f4866a;
  --destaque-claro: #fde8ef;
  --ouro: #f6b73c;
  --ok: #1f8a5b;
  --erro-fundo: #fde3e3;
  --erro-texto: #8a1c1c;
  --raio: 20px;
  --sombra: 0 2px 6px rgba(160, 60, 100, .06), 0 14px 34px -14px rgba(160, 60, 100, .28);
  --sombra-leve: 0 1px 3px rgba(160, 60, 100, .08), 0 6px 18px -10px rgba(160, 60, 100, .22);
  --fonte: 'Nunito', system-ui, sans-serif;
  --titulo: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --mao: 'Caveat', 'Segoe Script', cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texto);
  background: var(--fundo) linear-gradient(180deg, var(--fundo) 0%, var(--fundo-2) 100%) fixed;
  font-family: var(--fonte); font-size: 17px; line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 7vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }

.envoltorio { width: min(1080px, 100% - 32px); margin-inline: auto; }
.estreito { width: min(640px, 100% - 32px); margin-inline: auto; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
.marca { font-family: var(--titulo); font-weight: 600; font-size: 1.2rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.marca svg { width: 40px; height: 40px; flex: none; }
.marca-texto { font-family: var(--titulo); font-weight: 600; font-size: .95rem; line-height: 1.02; color: var(--texto); max-width: 7.5em; }
.marca-texto b { font-weight: 600; color: #d12e64; display: block; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 1.02rem; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, var(--destaque), var(--destaque-2)); color: #fff; border: 0; border-radius: 999px;
  padding: 15px 28px; min-height: 54px; transition: filter .15s, transform .1s; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--destaque) 70%, transparent);
}
.botao:hover { filter: brightness(1.05) saturate(1.1); }
.botao:active { transform: scale(.98); }
.botao[disabled] { opacity: .45; cursor: not-allowed; }
.botao.secundario { background: var(--superficie); color: var(--texto); box-shadow: inset 0 0 0 2px var(--borda); }
.botao.secundario:hover { box-shadow: inset 0 0 0 2px var(--texto); }
.botao.pequeno { padding: 9px 18px; min-height: 40px; font-size: .95rem; }
.botao.largo { width: 100%; }

.campo { display: block; margin-bottom: 18px; }
.campo span { display: block; font-weight: 650; margin-bottom: 6px; }
.campo small { display: block; color: var(--suave); margin-top: 6px; font-size: .88rem; }
input[type=text], input[type=tel], input[type=email], input[type=password], textarea {
  width: 100%; font: inherit; color: var(--texto); background: var(--superficie);
  border: 2px solid var(--borda); border-radius: 16px; padding: 15px 18px; box-shadow: var(--sombra-leve);
}
input:focus, textarea:focus { outline: none; border-color: var(--destaque); }
textarea { min-height: 150px; resize: vertical; }

.aviso { padding: 14px 16px; border-radius: 16px; background: var(--destaque-claro); color: var(--texto); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro-texto); }

/* Folha de letra: o elemento que dá identidade ao site */
.folha {
  background: var(--papel); border-radius: 6px 6px 18px 6px; box-shadow: var(--sombra);
  padding: 28px 26px 30px 44px; position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--linha-papel) 33px 34px);
  background-position: 0 58px;
}
.folha::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--destaque) 35%, transparent); }
.folha .dedicatoria { font-family: var(--mao); font-size: 2.3rem; line-height: 1; color: var(--destaque); margin: 0 0 12px; min-height: 1em; }
.folha .verso { font-family: var(--mao); font-size: 1.55rem; line-height: 34px; margin: 0; white-space: pre-line; }

.carregando { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 48px 0; }
.ondas { display: flex; gap: 6px; height: 44px; align-items: center; }
.ondas i { width: 7px; height: 100%; border-radius: 4px; background: var(--destaque); animation: onda 1s ease-in-out infinite; }
.ondas i:nth-child(2) { animation-delay: .12s; } .ondas i:nth-child(3) { animation-delay: .24s; }
.ondas i:nth-child(4) { animation-delay: .36s; } .ondas i:nth-child(5) { animation-delay: .48s; }
@keyframes onda { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ondas i { animation: none; transform: scaleY(.6); } * { scroll-behavior: auto !important; } }

.oculto { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cartões "Continuar a música de X" (pedidos lembrados neste aparelho) */
.continuar { display: grid; gap: 10px; }
.continuar-titulo { margin: 0; font-weight: 800; }
.continuar-pedido { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); background: var(--superficie); border-radius: 18px; padding: 14px 16px; box-shadow: inset 0 0 0 2px var(--destaque-claro), var(--sombra-leve); }
.continuar-pedido:hover { box-shadow: inset 0 0 0 2px var(--destaque), var(--sombra-leve); }
.continuar-ic { font-size: 1.5rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--destaque-claro); flex: none; }
.continuar-texto { display: grid; flex: 1; min-width: 0; }
.continuar-texto small { color: var(--suave); }
.continuar-seta { font-size: 1.8rem; color: var(--destaque); line-height: 1; }

/* Rodapé com as informações que a lei pede (empresa, CNPJ, termos, privacidade, reembolso) */
footer.rodape { padding: 28px 0 44px; color: var(--suave); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--borda); margin-top: 24px; }
footer.rodape .rodape-marca { display: grid; gap: 4px; }
footer.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer.rodape a { color: var(--suave); font-weight: 700; }
footer.rodape a:hover { color: var(--destaque-escuro); }

/* Páginas legais */
main.legal { padding: 8px 0 40px; max-width: 70ch; }
main.legal h1 { font-size: clamp(1.9rem, 6vw, 2.5rem); margin-bottom: 4px; }
main.legal h2 { font-size: 1.25rem; margin: 30px 0 8px; }
main.legal p, main.legal li { line-height: 1.6; }
main.legal ul, main.legal ol { padding-left: 1.3em; display: grid; gap: 6px; }
main.legal .atualizado { color: var(--suave); font-size: .9rem; margin: 0 0 18px; }
main.legal .resumo { background: var(--destaque-claro); border-radius: var(--raio); padding: 14px 18px; margin: 8px 0 6px; }
main.legal .resumo p { margin: 0; }
main.legal .contatos { list-style: none; padding: 0; }
main.legal a { color: var(--destaque-escuro); font-weight: 700; }