/* Marca e Vem · molde das LPs. Uma pele por página: body[data-tema]. Contraste AA conferido para cada par de texto. */
:root { --verde: #0E3B34; --lima: #C8F169; --verde-texto: #1F7A5C; --menta: #F2F7F2; --raio: 16px; --max: 1160px;
  --fonte-titulo: "Manrope", system-ui, sans-serif; --fonte-texto: "Inter", system-ui, sans-serif; }
body[data-tema="home"] { --fundo: #F2F7F2; --fundo-alt: #FFFFFF; --titulo: #0E3B34; --texto: #3F5A53; --rotulo: #1F7A5C;
  --borda: #DCE7DF; --btn-fundo: #0E3B34; --btn-texto: #F2F7F2; --cartao: #FFFFFF; }
body[data-tema="barbearia"] { --fundo: #0F1714; --fundo-alt: #0E3B34; --titulo: #F1EADF; --texto: #B9B1A4; --rotulo: #C98A4B;
  --borda: #24302B; --btn-fundo: #C8F169; --btn-texto: #0E3B34; --cartao: #16201C; }
body[data-tema="salao"] { --fundo: #FBF7F4; --fundo-alt: #F3DDD6; --titulo: #0E3B34; --texto: #4E5A56; --rotulo: #8C6A2F;
  --borda: #EFE4DD; --btn-fundo: #0E3B34; --btn-texto: #FBF7F4; --cartao: #FFFFFF; }
/* Regra do spec: o rótulo cobre/dourado só sobre o fundo principal; na seção alternativa ele usa a cor do título. */
.secao-alt .rotulo { color: var(--titulo); }
/* Link do salão sobre o rosé: o verde texto dá só 4,03:1; usa a cor do título. */
body[data-tema="salao"] .secao-alt a:not(.btn) { color: var(--titulo); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: 64px; background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto);
  font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4, .titulo-cartao { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -0.02em; color: var(--titulo);
  line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 7.4vw, 3.5rem); text-wrap: balance; }
h2 { font-size: clamp(1.65rem, 5.4vw, 2.5rem); }
h3, h4, .titulo-cartao { font-size: 1.2rem; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--verde-texto); }
body[data-tema="barbearia"] a { color: var(--lima); }
body[data-tema="salao"] h1 em, body[data-tema="salao"] h2 em { font-family: "Fraunces", serif; font-style: italic; font-weight: 600; }
:focus-visible { outline: 3px solid var(--btn-fundo); outline-offset: 3px; }
body[data-tema="barbearia"] .secao-alt :focus-visible { outline-color: var(--lima); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.lead { font-size: 1.125rem; max-width: 62ch; }
.centro { text-align: center; }
.centro .lead { margin-left: auto; margin-right: auto; }
.miudo { font-size: .875rem; }

/* Topo fixo */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; background: var(--fundo);
  border-bottom: 1px solid var(--borda); }
.topo-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; }
.topo-logo { display: inline-flex; align-items: center; min-height: 44px; }
.topo-logo img { height: 36px; width: auto; }
@media (min-width: 960px) { .topo-logo img { height: 44px; } }
.topo-nav { display: none; gap: 24px; }
.topo .topo-nav a { color: var(--texto); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 10px 0; }
.topo .topo-nav a:hover { color: var(--titulo); }
.topo .btn { padding: 8px 14px; font-size: .9rem; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 12px; background: var(--btn-fundo); color: var(--btn-texto);
  font: 600 1rem/1.2 var(--fonte-texto); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s, box-shadow .15s; }
body[data-tema="barbearia"] .btn { color: var(--btn-texto); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 1.05rem; }
.btn-sec { background: transparent; color: var(--titulo); border-color: var(--titulo); }
body[data-tema="barbearia"] .btn-sec { color: var(--titulo); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.acoes .btn { flex: 1 1 220px; }

/* Rótulo */
.rotulo { display: inline-block; margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rotulo); }

/* Seções */
.hero { padding: 40px 0 48px; }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.secao { padding: 56px 0; background: var(--fundo); }
.secao-alt { background: var(--fundo-alt); }
.secao-cab { max-width: 720px; margin: 0 0 32px; }
.centro.secao-cab, .secao-cab.centro { margin-left: auto; margin-right: auto; }

/* Grades */
.grade-2, .grade-3, .grade-4 { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grade-2 { grid-template-columns: repeat(2, 1fr); }
  .grade-3, .grade-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
@media (min-width: 960px) {
  .grade-3 { grid-template-columns: repeat(3, 1fr); }
  .grade-4 { grid-template-columns: repeat(4, 1fr); }
  .topo-nav { display: flex; }
  .secao { padding: 80px 0; }
  .hero { padding: 64px 0 72px; }
}

/* Cartão e variações */
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.cartao > :last-child, .dor > :last-child, .passo > :last-child, .recurso > :last-child { margin-bottom: 0; }
.dor { background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--rotulo);
  border-radius: var(--raio); padding: 20px 22px; }
.secao-alt .dor { border-left-color: var(--titulo); }
.dor h3 { margin-bottom: .35em; }
.passo { position: relative; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.passo .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px;
  border-radius: 50%; background: var(--lima); color: var(--verde); font: 800 1.1rem var(--fonte-titulo); }
.recurso { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio); }
.recurso [data-icon], .recurso .icone, .cartao > [data-icon] { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: var(--lima); color: var(--verde); margin-bottom: 8px; }
.recurso h3 { margin: 0; }
.recurso p { margin: 0; }

/* Linha do tempo */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--borda); }
.linha-tempo li { position: relative; padding: 0 0 26px 20px; }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before { content: ""; position: absolute; left: -37px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--lima); border: 3px solid var(--verde); }
.linha-tempo .hora { display: block; margin-bottom: 2px; font: 800 1.25rem var(--fonte-titulo); color: var(--titulo); }
.linha-tempo p { margin: 0; }

/* Celular com conversa */
.celular { width: 300px; max-width: 100%; min-height: 560px; margin: 0 auto; background: #ECE5DD; color: #1B2A26;
  border: 10px solid #1B2A26; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .22); }
.celular-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #0E3B34; color: #F2F7F2;
  font: 700 .95rem var(--fonte-texto); }
.celular-topo::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--lima); flex: none; }
.celular-corpo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; }
.bolha { max-width: 82%; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: #FFFFFF; color: #1B2A26;
  font-size: .9rem; line-height: 1.4; align-self: flex-start; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.bolha.env, .bolha-env { align-self: flex-end; background: #D9FDD3; border-radius: 14px 4px 14px 14px; }
.bolha .hora-msg { display: block; margin-top: 2px; font-size: .7rem; color: #5B6B66; text-align: right; }

/* Selo de confirmado */
.selo-ok { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: var(--cartao); border: 1px solid var(--borda); color: var(--titulo); font-weight: 600; font-size: .9rem; }
.selo-ok::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: #C8F169; color: #0E3B34; font-weight: 800; font-size: .85rem; }

/* Moldura de imagem e prints */
.moldura { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--cartao);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14); }
.moldura img { width: 100%; }
.foto { border-radius: var(--raio); width: 100%; object-fit: cover; }

/* Planos */
.planos { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .planos { grid-template-columns: repeat(3, 1fr); } }
.plano { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 28px 24px; background: var(--cartao);
  border: 1px solid var(--borda); border-radius: var(--raio); }
.plano h3, .plano h4 { margin: 0; }
.plano .preco { font: 800 2.4rem/1.1 var(--fonte-titulo); letter-spacing: -0.02em; color: var(--titulo); margin: 8px 0 0; }
.plano .preco small { font: 500 1rem var(--fonte-texto); color: var(--texto); }
.plano .dia { margin: 0 0 12px; font-size: .9rem; }
.plano ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.plano li { position: relative; padding: 4px 0 4px 28px; }
.plano li::before { content: "\2713"; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: #C8F169; color: #0E3B34; font-weight: 800; font-size: .72rem; line-height: 20px; text-align: center; }
.plano .btn { width: 100%; }
.plano-destaque { border: 2px solid var(--btn-fundo); padding-top: 38px; }
body[data-tema="barbearia"] .secao-alt .plano-destaque { border-color: var(--lima); }
.plano-destaque::before { content: "Mais escolhido"; position: absolute; top: -2px; left: 50%; transform: translate(-50%, -50%);
  padding: 4px 14px; border-radius: 999px; background: var(--btn-fundo); color: var(--btn-texto); font-weight: 700;
  font-size: .78rem; letter-spacing: .04em; white-space: nowrap; }

/* FAQ */
.faq { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0;
  font: 700 1.05rem var(--fonte-titulo); color: var(--titulo); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 500; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > :not(summary) { margin: 0 0 16px; }

/* Fechamento */
.fechamento { padding: 64px 0; background: var(--verde); color: #D5E3DD; text-align: center; border-top: 1px solid var(--borda); }
.fechamento h2 { color: #F2F7F2; }
body[data-tema="barbearia"] .fechamento h2 { color: #F1EADF; }
body[data-tema="salao"] .fechamento h2 em { color: #C8F169; }
.fechamento .btn { background: #C8F169; color: #0E3B34; }
.fechamento .btn-sec { background: transparent; color: #F2F7F2; border-color: #F2F7F2; }
.fechamento :focus-visible { outline-color: #C8F169; }
.fechamento .acoes { justify-content: center; }
.fechamento .acoes .btn { flex: 0 1 280px; }

/* Rodapé */
.rodape { padding: 32px 0; background: var(--fundo); color: var(--texto); font-size: .9rem; border-top: 1px solid var(--borda); }
.rodape .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.rodape img { height: 32px; width: auto; }
@media (min-width: 960px) { .rodape img { height: 36px; } }

/* Pop-up de teste grátis: caixa clara em todas as peles */
#popup { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .6); overflow-y: auto; }
#popup[hidden] { display: none; }
.popup-caixa { position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; padding: 28px 24px;
  background: #FFFFFF; color: #1B2A26; border-radius: 20px; }
.popup-caixa h2, .popup-caixa h3 { color: #0E3B34; font-size: 1.5rem; }
.popup-caixa p { color: #3F5A53; }
.popup-fechar { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #1B2A26; cursor: pointer; }
#popup .popup-caixa .btn { width: 100%; background: #0E3B34; color: #F2F7F2; }
.popup-caixa :focus-visible { outline-color: #0E3B34; }
.campo { display: block; margin: 0 0 14px; }
.campo label, .campo > span { display: block; margin-bottom: 4px; font-weight: 600; font-size: .9rem; color: #1B2A26; }
.campo input, .campo select { display: block; width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #7A8F87;
  border-radius: 10px; background: #FFFFFF; color: #1B2A26; font: 1rem var(--fonte-texto); }
.campo input:focus, .campo select:focus { outline: 3px solid #0E3B34; outline-offset: 1px; border-color: #0E3B34; }
[aria-invalid="true"] { border-color: #B42318 !important; }
.erro { margin: 4px 0 0; font-size: .85rem; color: #B42318; }
#popup-success { text-align: center; }

/* Revelar na rolagem (a classe só entra quando o JS roda) */
.revelar { opacity: 0; transform: translateY(24px); transition: .6s; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* Topo da Home: celular e cartão da agenda empilhados */
.hero-visual { display: grid; gap: 20px; justify-items: center; }
.hero-visual .celular { min-height: 0; }
.hero-visual .cartao { width: 100%; max-width: 340px; padding: 18px 20px; }
.hero-visual .cartao h3, .hero-visual .titulo-cartao { margin-bottom: 12px; }
.hero-visual .linha-tempo li { padding-bottom: 14px; }
.hero-visual .linha-tempo .hora { font-size: 1.05rem; }
.hero .selo-ok { margin-top: 20px; }
/* Bloco "Incluso em todos os planos": respiro entre os cartões de plano, a lista e a frase final */
#planos .planos + .secao-cab, #planos .grade-3 + .secao-cab { margin-top: 48px; }

/* Print do agendamento mobile sem o título cortado no alto nem o rodapé com o nome antigo */
.recorte-print { aspect-ratio: 739 / 1410; object-fit: cover; object-position: 50% 16%; }

/* Utilitários de layout das LPs de nicho: pilha de cartões, alinhamento ao topo e proporção das fotos */
.pilha { display: grid; gap: 20px; }
.alinha-inicio { align-items: start; }
.foto-16-10 { aspect-ratio: 16 / 10; }
.foto-4-3 { aspect-ratio: 4 / 3; }
.foto-hero { max-width: 520px; }

/* Telas de exemplo montadas em HTML: página de agendamento no celular e agenda do dia */
.celular-tela { min-height: 0; }
.celular-tela .celular-corpo { gap: 10px; padding: 16px 14px 18px; }
.tela-titulo { margin: 0 0 2px; font: 700 .95rem var(--fonte-titulo); color: #1B2A26; }
.servico { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FFFFFF; color: #1B2A26;
  border: 1.5px solid #D8D0C6; border-radius: 12px; }
.servico::before { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid #9DB0A8; border-radius: 6px; }
.servico.marcado { background: #F2F7F2; border-color: #0E3B34; }
.servico.marcado::before { content: "\2713"; background: #0E3B34; border-color: #0E3B34; color: #F2F7F2; font-size: .8rem;
  font-weight: 800; line-height: 18px; text-align: center; }
.servico-nome { flex: 1; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.servico-nome small { display: block; font-weight: 400; font-size: .78rem; color: #5B6B66; }
.servico-preco { font-weight: 700; font-size: .92rem; }
.celular .btn { margin-top: 6px; pointer-events: none; }
.agenda-dia h3 { margin-bottom: 8px; }
.agenda-prof { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 4px 12px; padding: 10px 0;
  border-top: 1px solid var(--borda); color: var(--titulo); }
.agenda-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; background: #F2F7F2;
  color: #1B2A26; border-left: 4px solid #1F7A5C; border-radius: 8px; font-size: .95rem; }
.agenda-hora { font-weight: 800; font-variant-numeric: tabular-nums; }
.etiqueta { padding: 2px 10px; border-radius: 999px; background: #C8F169; color: #0E3B34; font-weight: 700; font-size: .78rem; }

/* Base de movimento (marcaevem-motion.js): camada de cenas atrás do conteúdo (z-index -1: o fundo do body vai para o canvas e fica abaixo dela) e trilho de progresso, só decorativos */
#mev-layer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mev-scene { position: absolute; inset: 0; opacity: 0; }
.mev-scene > * { position: absolute; will-change: transform; }
.mev-rail { display: none; }
@media (min-width: 1024px) { .mev-rail { display: block; position: fixed; right: 22px; top: 14vh; bottom: 14vh; width: 2px; z-index: 40; pointer-events: none; } }