/* Cliente Marca · folha própria da landing (design, 05/11/2026). O app continua no estilo.css do kit.
   Direção: o salão de quem atende com hora marcada. Ameixa fundo (esmalte escuro), rosé de cartão de horário,
   pêssego de destaque. Sem nada de fora: fontes em /fontes/ (OFL), sem script, sem estilo inline (CSP). */

@font-face { font-family: "Gloock"; src: url("/fontes/gloock-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fontes/hanken-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fontes/hanken-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional; }

:root {
  --ameixa: #7a2e5c;      /* cor do produto (produto.json) */
  --ameixa-2: #5e2247;    /* passar o mouse e pressionado */
  --noite: #4a1838;       /* fundo do topo e da chamada final */
  --rose: #fbf2f6;        /* fundo claro */
  --rose-2: #f3e0e9;      /* faixa alternada (o tom claro de ameixa pedido no REVISAO, item 4) */
  --linha: #e4c9d6;
  --tinta: #26121d;
  --tinta-2: #5f4655;
  --pessego: #f6c9b8;     /* destaque sobre o fundo escuro, sempre com texto ameixa-noite */
  --claro: #fff7fa;
  --claro-2: #ecd3df;
  --titulo: "Gloock", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 72rem;
  --sombra: 0 24px 48px -20px rgba(20, 4, 14, .55);
  --sai: cubic-bezier(.2, .7, .2, 1);
  --respiro: 3.5rem;      /* respiro vertical de toda seção: 3,5rem no celular, 5,5rem a partir de 60rem */
  --tinta-caneta: #2b3a7a; /* caneta azul do cartãozinho de papel */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--sans); color: var(--tinta); background: var(--rose); }
::selection { background: var(--pessego); color: var(--noite); }
svg { display: block; }
a { color: var(--ameixa); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ameixa-2); text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--ameixa); outline-offset: 3px; border-radius: .25rem; }
.cabeca a:focus-visible, .topo a:focus-visible, .final a:focus-visible, .confianca a:focus-visible { outline-color: var(--pessego); }
h1, h2 { font-family: var(--titulo); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
.grade-larga { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.5rem;
  font: 700 1.05rem/1.2 var(--sans); color: var(--noite); background: var(--pessego); border: 2px solid var(--pessego);
  border-radius: .8rem; text-decoration: none; cursor: pointer;
  transition: background-color .16s var(--sai), border-color .16s var(--sai), transform .16s var(--sai); }
.botao:hover { color: var(--noite); background: #fbdccf; border-color: #fbdccf; }
.botao:active { transform: translateY(2px) scale(.99); }
/* um só botão cheio no primeiro ecrã: o do cabeçalho é contorno e só enche ao passar o mouse */
.botao-curto { min-height: 44px; padding: .45rem 1rem; font-size: .95rem; color: var(--claro); background: transparent; }

/* Topo escuro */
.cabeca, .topo { background: var(--noite); color: var(--claro); }  /* sem wrapper: um <main> só com todo o conteúdo */
.cabeca { padding: .75rem 0; }
.cabeca-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; color: var(--claro); font: 400 1.35rem/1 var(--titulo); text-decoration: none; }
.marca:hover { color: var(--claro); }
/* .faixa: o montar.mjs gera <p class="faixa"> no  quando há aviso (linha 57); não apagar */
.faixa { max-width: var(--largura); margin: 0 auto 1rem; padding: .7rem 1.25rem; background: #fff3cf; border-block: 1px solid #e5c75c; color: var(--tinta); }
.faixa a { color: var(--tinta); }
.aviso { max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; font-weight: 700; color: var(--claro); }
.topo { padding: 1.75rem 0 var(--respiro); }
.topo-grade { display: grid; gap: 2.75rem; }
.topo h1 { font-size: clamp(2.15rem, 1.4rem + 3vw, 3.4rem); }
.frase { font-size: 1.12rem; color: var(--claro-2); margin: 1.2rem 0 1.7rem; max-width: 34em; }
.nota { font-size: .92rem; color: var(--claro-2); margin-top: 1rem; max-width: 36em; }

/* Prova: o cartãozinho de papel do salão, a página real do link que fica no lugar dele e o lembrete do painel */
.prova { position: relative; margin: 0; }
.papel { position: relative; width: 12.5rem; margin: 0 .25rem -1rem auto; padding: .8rem 1rem 1rem; background: #fffdf8; color: var(--tinta);
  border-radius: .35rem; transform: rotate(5deg); box-shadow: 0 14px 28px -14px rgba(20, 4, 14, .6); }
.papel-topo { display: flex; align-items: center; gap: .45rem; font: 700 .72rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ameixa);
  padding-bottom: .5rem; margin-bottom: .2rem; border-bottom: 1px solid #ead8c9; }
.papel-esmalte { flex: none; }
.papel-linha { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0 .1rem; border-bottom: 1px dotted #c9b4a6; font-size: .78rem; color: #6b5a52; }
.papel-linha b { flex: 1; font: 400 1.05rem/1.1 var(--titulo); color: var(--tinta-caneta); transform: rotate(-1.5deg); }
.celular { position: relative; z-index: 1; margin-left: 0; width: min(18.5rem, 88%); padding: .65rem; background: #1a0712; border-radius: 2.4rem; box-shadow: var(--sombra);
  border: 1px solid rgba(255, 255, 255, .12); }
.celular-tela { background: #fff; color: #1b1f24; border-radius: 1.85rem; padding: 1.5rem 1.1rem 5.5rem;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.app-titulo { font-size: 1.45rem; font-weight: 700; line-height: 1.2; margin-bottom: .4rem; }
.app-legenda { font-weight: 700; margin: .8rem 0 .3rem; }
.app-opcao { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; }
.app-radio { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #5a6270; flex: none; }
.app-radio-on { border-color: #7a2e5c; background: radial-gradient(circle, #7a2e5c 0 42%, #fff 46%); }
.app-campo { border: 1px solid #d8dde3; border-radius: .5rem; padding: .5rem .65rem; }
.app-horarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.app-horarios span { text-align: center; padding: .45rem 0; border: 2px solid #7a2e5c; border-radius: .5rem; color: #7a2e5c; font-weight: 600; }
.app-horarios .app-tocado { background: #7a2e5c; color: #fff; }

.balao-card { position: relative; z-index: 2; width: min(18rem, 86%); margin: -5.4rem 0 0 auto; padding: .9rem 1rem 1rem;
  background: var(--rose); color: var(--tinta); border-radius: 1.1rem; box-shadow: var(--sombra); }
.balao-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.selo { padding: .15rem .55rem; border-radius: 999px; background: var(--ameixa); color: #fff; font-size: .78rem; letter-spacing: .03em; }
.balao { position: relative; padding: .7rem .8rem; background: #fff; border-radius: .9rem .9rem .9rem .25rem; font-size: .9rem; line-height: 1.45;
  border: 1px solid var(--linha); overflow-wrap: anywhere; }
.balao-acao { margin-top: .7rem; text-align: center; padding: .55rem; border-radius: .6rem; background: var(--ameixa); color: #fff; font-weight: 700; font-size: .95rem; }
.prova figcaption { margin-top: 1.2rem; font-size: .88rem; color: var(--claro-2); max-width: 32em; }

/* Animação de assinatura: o horário tocado vira pedido confirmado e o lembrete aparece pronto. Uma vez, 1,2 s.
   Regra de contraste (v9, lição do iPad): nenhum elemento com letra interpola cor, fundo ou opacidade. A cor troca de uma vez
   (step-end, os dois lados do par letra/fundo juntos) e o resto é só transform e clip-path (a letra aparece inteira ou não aparece).
   Assim todo quadro, mesmo parado no meio, tem o contraste do estado inicial ou do final (>= 4,5:1). */
@media (prefers-reduced-motion: no-preference) {
  .app-horarios .app-tocado { animation: toque .35s var(--sai) .15s both, toque-cor .35s linear .15s both; }
  .balao-card { animation: sobe .5s var(--sai) .55s both; }
  .selo { animation: selo .3s var(--sai) .9s both; }
  @keyframes toque { 0% { transform: none; } 45% { transform: scale(.92); } 100% { transform: none; } }
  @keyframes toque-cor { 0% { background: #fff; color: #7a2e5c; animation-timing-function: step-end; } 50%, 100% { background: #7a2e5c; color: #fff; } }
  @keyframes sobe { from { clip-path: inset(-1rem -3rem 100% -3rem); transform: translateY(1.2rem); } to { clip-path: inset(-1rem -3rem -4rem -3rem); transform: none; } }
  @keyframes selo { from { clip-path: inset(0 100% 0 0); transform: scale(.7); } to { clip-path: inset(0); transform: none; } }
}
/* No celular o aparelho fica abaixo da dobra: a animação acompanha a rolagem e acontece quando ele entra na tela.
   Todos os intervalos acabam em "entry 100%": com o elemento inteiro na tela (iPad, onde o celular já aparece ao abrir) a animação está no fim. */
@media (prefers-reduced-motion: no-preference) and (max-width: 59.99rem) {
  @supports (animation-timeline: view()) {
    .app-horarios .app-tocado { animation-timeline: view(), view(); animation-range: entry 20% entry 100%; animation-delay: 0s; }
    .balao-card { animation-timeline: view(); animation-range: entry 0% entry 100%; animation-delay: 0s; }
    .selo { animation-timeline: view(); animation-range: entry 0% entry 100%; animation-delay: 0s; }
  }
}

/* Isso acontece com você? */
.dor { padding: var(--respiro) 0; }
.dor h2, .como h2, .perguntas h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.3rem); }
.dor-grade { display: grid; gap: 1.6rem; }
.dor-eco { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.dor-eco span { padding: .35rem .75rem; border-radius: .9rem .9rem .9rem .25rem; background: #fff; border: 1px solid var(--linha); color: var(--tinta-2); font-size: .92rem; }
/* o eco esmaece pela cor, não pela opacidade: o axe da bateria mede o texto mesmo com aria-hidden (05/11, 5,73:1 e 5,09:1 no branco) */
.dor-eco span:nth-child(2) { color: #76606d; border-color: #ebd6e0; } .dor-eco span:nth-child(3) { color: #7e6875; border-color: #f1e2e9; }
.dor-lista { list-style: none; margin: 0; padding: 0; }
.dor-lista li { position: relative; padding: 1rem 0 1rem 2.4rem; border-top: 1px solid var(--linha); font-size: 1.12rem; max-width: 36em; }
.dor-lista li:last-child { border-bottom: 1px solid var(--linha); }
.dor-lista li::before { content: ""; position: absolute; left: .2rem; top: 1.35rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  border: 2px solid var(--ameixa); background: linear-gradient(135deg, transparent 45%, var(--ameixa) 45% 57%, transparent 57%); }

/* Como funciona */
.como { background: var(--rose-2); padding: var(--respiro) 0; }
.passos { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.passo { display: grid; grid-template-columns: 2.6rem 1fr; gap: .5rem 1rem; align-items: start; }
.passo-num { grid-row: span 2; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .8rem; background: var(--ameixa); color: #fff; font: 400 1.35rem/1 var(--titulo); }
.passo-texto { font-size: 1.06rem; padding-top: .3rem; max-width: 34em; }
.recorte { margin-top: .4rem; padding: .85rem 1rem; background: #fff; border-radius: 1rem; border: 1px solid var(--linha);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1b1f24; display: grid; gap: .5rem; }
.recorte-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding-bottom: .45rem; border-bottom: 1px solid #ece3e8; }
.recorte-linha span, .recorte-linha b { white-space: nowrap; }  /* sem quebra no meio: se não couber, o valor desce inteiro (v9, fino do rev-design) */
/* endereço: só quebra entre o domínio e o caminho, nunca no hífen (v9, fino do rev-design) */
.host, .caminho { white-space: nowrap; overflow-wrap: normal; }
.recorte-dias { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.recorte-dias span { padding: .15rem .5rem; border-radius: .4rem; background: #7a2e5c; color: #fff; font-size: .85rem; font-weight: 600; }
.recorte-dias em { font-style: normal; color: #5a6270; }
.bio { display: flex; gap: .7rem; align-items: center; }
.bio-foto { flex: none; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--pessego); color: var(--noite);
  font: 400 1.3rem/1 var(--titulo); }
.bio-nome { font-weight: 700; }
.bio-texto { font-size: .85rem; color: #5a6270; line-height: 1.35; }
.recorte-link { padding: .45rem .7rem; border-radius: 999px; background: var(--rose); color: #7a2e5c; font-weight: 600; overflow-wrap: anywhere; }
.recorte-horarios, .recorte-botoes { display: flex; flex-wrap: wrap; gap: .4rem; }
.recorte-horarios span, .recorte-botoes span { padding: .35rem .7rem; border: 2px solid #7a2e5c; border-radius: .5rem; color: #7a2e5c; font-weight: 600; }
.recorte-horarios .on, .recorte-botoes .on { background: #7a2e5c; color: #fff; }
.como-nota { margin-top: 2rem; padding: 1rem 1.2rem; border: 1px solid var(--linha); background: var(--rose); border-radius: .8rem; max-width: 36em; }

/* Confiança: um fato grande e dois curtos, em coluna única (não repete a dor nem as perguntas) */
.confianca { background: var(--noite); color: var(--claro); padding: var(--respiro) 0; }
.confianca h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.7rem); max-width: 20em; color: var(--pessego); }
.confianca-lista { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; max-width: 52rem; }
.confianca-lista li { padding-top: .9rem; border-top: 1px solid rgba(255, 247, 250, .22); color: var(--claro-2); font-size: 1.08rem; max-width: 30em; }

/* Preço: o grátis na frente, com ação; o preço de fundador em segundo plano */
.preco { padding: var(--respiro) 0; }
.preco-grade { display: grid; gap: 1.6rem; width: calc(100% - 2.5rem); margin: 0 auto; padding: 2rem 1.5rem; background: #fff; border-radius: 1.5rem; border: 1px solid var(--linha); }
.preco h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); max-width: 12em; color: var(--ameixa); }
.preco-sub { margin: .8rem 0 1.4rem; color: var(--tinta-2); font-size: 1.08rem; }
.botao-ameixa { color: #fff; background: var(--ameixa); border-color: var(--ameixa); }
.botao-ameixa:hover { color: #fff; background: var(--ameixa-2); border-color: var(--ameixa-2); }
.preco-texto { display: grid; gap: .8rem; align-content: center; max-width: 36em; color: var(--tinta-2); font-size: .98rem; }
.preco-fundador { color: var(--tinta); }
.preco-fundador b { font: 400 1.3rem/1.2 var(--titulo); color: var(--ameixa); }

/* Perguntas */
.perguntas { background: var(--rose-2); padding: var(--respiro) 0; }
.perguntas-grade { display: grid; gap: 1.5rem; }
.perguntas-lista { border-top: 1px solid var(--linha); }
details { border-bottom: 1px solid var(--linha); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 56px; padding: .8rem 0; font-weight: 700; font-size: 1.1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: .65rem; height: .65rem; margin-right: .4rem; border-right: 2px solid var(--ameixa); border-bottom: 2px solid var(--ameixa);
  transform: rotate(45deg); transition: transform .2s var(--sai); }
details[open] summary::after { transform: rotate(225deg); }
summary:hover { color: var(--ameixa-2); }
details p { padding: 0 0 1.1rem; max-width: 40em; color: var(--tinta-2); }
.mais { margin-top: .6rem; }
.mais a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* Chamada final */
.final { background: var(--noite); color: var(--claro); padding: var(--respiro) 0; }
.final-grade { display: grid; justify-items: start; gap: 1.4rem; }
.final h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); max-width: 18em; }

/* Rodapé */
.rodape { padding: 1.5rem 0 2rem; }
.rodape-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.rodape-marca { font: 400 1.1rem/1 var(--titulo); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.rodape nav a { min-height: 48px; min-width: 44px; display: inline-flex; align-items: center; color: var(--tinta-2); }
.rodape nav a:hover { color: var(--ameixa-2); }

/* Telas largas */
@media (min-width: 60rem) {
  :root { --respiro: 5.5rem; }
  /* as 3 etiquetas em escadinha, uma por linha: nada de 2 + 1 (v9, fino do rev-design) */
  .dor-eco { flex-direction: column; align-items: flex-start; }
  .dor-eco span:nth-child(2) { margin-left: 1.2rem; } .dor-eco span:nth-child(3) { margin-left: 2.4rem; }
  .grade-larga { padding: 0 2rem; }
  .topo { padding-top: 3.5rem; }
  .topo-grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; align-items: center; }
  .prova { padding-left: 2rem; }
  .celular { margin-left: 1rem; }
  .balao-card { margin-top: -6.2rem; margin-right: 0; }
  .dor-grade { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
  /* perguntas com outra composição que a da dor: título em cima e 3 colunas, cada pergunta sob um fio ameixa */
  .perguntas-grade { gap: 2rem; }
  .perguntas-lista { border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: start; }
  .perguntas-lista details { border-top: 2px solid var(--ameixa); border-bottom: 0; }
  .perguntas-lista summary { align-items: flex-start; }
  .perguntas-lista summary::after { margin-top: .45rem; }
  .mais { margin-top: 0; padding-top: .55rem; border-top: 2px solid var(--linha); }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 2rem; }
  .passo { grid-template-columns: 1fr; grid-row: span 3; grid-template-rows: subgrid; row-gap: .6rem; align-items: stretch; }
  .recorte { align-content: start; }
  .passo-num { grid-row: auto; }
  .confianca-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .preco-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; padding: 3rem; align-items: center; width: min(100% - 4rem, var(--largura) - 4rem); }
  .final-grade { grid-template-columns: 1fr auto; align-items: center; column-gap: 3rem; }
}

/* 1280 px ou mais: o cartãozinho de papel fica à esquerda, atrás do celular; da esquerda para a direita, papel, link e lembrete */
@media (min-width: 80rem) {
  .prova { padding-left: 0; }
  .papel { position: absolute; top: 3rem; left: 0; margin: 0; width: 11.5rem; transform: rotate(-6deg); }
  .celular { margin-left: 10rem; }
}

/* Só para gerar o og.png (1200 × 630): a classe "og" é posta pelo script de prints, nunca no site. */
html.og .topo { padding: 1rem 0 0; }
html.og .topo h1 { margin-bottom: 1.75rem; }
html.og .frase, html.og .nota, html.og .prova figcaption { display: none; }
html.og .topo { padding-bottom: 0; }