/*
  Barbearia do Yuri

  As cores moram em tema.css; aqui só entram papéis (var(--fundo), var(--acento)…).
  Diagramação editorial, alinhada à esquerda, numa largura única (--largura).
  Títulos em Baskervville, a mesma família de letra do logo; texto em Hanken Grotesk. Espaços em múltiplos de 4.
  A peça de identidade é o poste de barbeiro: marca o andamento e fecha o rodapé.
  No celular as fotos ficam em cor; no computador, em preto e branco até serem apontadas ou escolhidas.
  As entradas coreografadas são do GSAP (movimento.js); o CSS cuida do primeiro quadro e dos estados simples.
*/

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

:root {
  --f-display: "Baskervville", Baskerville, "Baskerville Old Face", Georgia, serif;
  --f-texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;

  --r1: 4px;
  --r2: 6px;

  --largura: 1120px;
  --calha: 20px;
  --suave: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1rem/1.55 var(--f-texto);
}

/* Granulação de filme: uma camada fixa e parada por cima de tudo, para nada ficar chapado. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: var(--grao);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: var(--selecao); color: var(--texto); }

/* Barra de rolagem com as cores do tema. No celular fica a do sistema. */
@supports selector(::-webkit-scrollbar) {
  @media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: var(--barra-trilho); }
    ::-webkit-scrollbar-thumb { background: var(--barra); border: 3px solid var(--barra-trilho); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--barra-viva); }
  }
}
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--barra) var(--barra-trilho); }
}

/* Troca de página: o conteúdo cruza de um para o outro e o topo fica parado. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

html { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
img { max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; font-variant-numeric: lining-nums; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.pular { position: absolute; left: var(--e4); top: -80px; z-index: 10; padding: var(--e3) var(--e4); background: var(--inverso); color: var(--sobre-inverso); border-radius: var(--r1); }
.pular:focus { top: var(--e3); }

.faixa-demo { margin: 0; padding: var(--e2) var(--calha); background: var(--superficie); color: var(--texto-suave); font-size: .8125rem; }

/* Link de texto: fio fino que ganha a cor de acento. */
.elo { display: inline-block; padding: 10px 0; text-decoration: underline; text-decoration-color: var(--linha-forte); transition: text-decoration-color .15s; }
.elo:hover { text-decoration-color: var(--acento-vivo); }

/* ---------- Topo ---------- */

.topo { border-bottom: 1px solid var(--linha); view-transition-name: topo; }
.topo__barra { max-width: calc(var(--largura) + 2 * var(--calha)); margin: 0 auto; padding: var(--e3) var(--calha) 0; display: grid; grid-template-areas: "marca" "abas"; align-items: center; }
.topo__barra--so { padding-bottom: var(--e3); }

.marca { grid-area: marca; display: inline-flex; align-items: center; gap: var(--e3); min-height: 44px; text-decoration: none; }
.marca img { width: 40px; height: 40px; border-radius: 50%; display: block; }
/* O nome repete o lettering do logo: serifa em negrito, caixa-alta, letras afastadas. */
.marca__nome { font: 700 .875rem/1.1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }

/* Abas: a página atual leva o fio de acento. */
.abas-site { grid-area: abas; margin: var(--e2) calc(-1 * var(--calha)) -1px; }
.abas-site ul { list-style: none; margin: 0; padding: 0 var(--calha); display: flex; gap: var(--e5); }
.abas-site a { display: block; padding: var(--e3) 0 14px; border-bottom: 2px solid transparent; color: var(--texto-suave); font-size: .9375rem; line-height: 1.4; text-decoration: none; transition: color .15s; }
.abas-site a:hover { color: var(--texto); }
.abas-site a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--acento); }

/* ---------- Agendamento: moldura ---------- */

.palco { width: 100%; max-width: calc(var(--largura) + 2 * var(--calha)); margin: 0 auto; padding: var(--e4) var(--calha) var(--e9); }

.andamento__linha { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.voltar { min-height: 44px; padding-right: var(--e3); color: var(--texto-suave); font-size: .9375rem; }
.voltar:hover { color: var(--texto); }
.voltar.is-oculto { visibility: hidden; }
.andamento__etapa { margin: 0; color: var(--texto-suave); font-size: .9375rem; font-variant-numeric: tabular-nums; }

/* O poste de barbeiro: um tubo de vidro com tampas de metal; as listras avançam a cada etapa. */
.poste { display: flex; align-items: center; }
.poste__tampa { flex: none; width: 10px; height: 22px; border-radius: 3px; background: var(--poste-metal); }
.poste__trilho { position: relative; flex: 1; height: 12px; overflow: hidden; background: var(--superficie-2); }
.poste__trilho::after { content: ""; position: absolute; inset: 0; background: var(--poste-luz); pointer-events: none; }
.poste__listras { position: relative; display: block; height: 100%; width: 10%; overflow: hidden; transition: width .7s var(--suave); }
/* As listras andam por transform (um período de 56,57 px), sem repintar a página. */
.poste__listras::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -56.57px;
  right: 0;
  background-image: repeating-linear-gradient(-45deg, var(--poste-a) 0 10px, var(--poste-b) 10px 20px, var(--poste-c) 20px 30px, var(--poste-b) 30px 40px);
  background-size: 56.57px 56.57px;
  animation: girar 2.6s linear infinite;
}
@keyframes girar { to { transform: translateX(56.57px); } }

.palco__grade { margin-top: var(--e4); }

/* Seu horário: no celular, uma linha com o que já foi escolhido; no computador, um bilhete que vai sendo preenchido. */
.lado__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.resumo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.resumo li:not(.is-feito), .resumo__rotulo { display: none; }
.resumo button { min-height: 40px; padding: 6px var(--e3); border: 1px solid var(--linha); border-radius: var(--r1); color: var(--texto-suave); font-size: .8125rem; line-height: 1.4; transition: color .15s, border-color .15s; }
.resumo button:hover { color: var(--texto); border-color: var(--linha-forte); }

/* ---------- Etapas ---------- */

.etapa { margin-top: var(--e6); outline: none; }
/* Entrada simples, usada só enquanto o GSAP não chegou (ou se não chegar). */
.etapa.is-entrando > * { animation: surgir .26s ease both; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } }

.etapa__cab { margin: 0 0 var(--e6); }
.etapa h1, .pagina h1, .painel h1 { margin: 0; font: 500 clamp(2.125rem, 8.6vw, 3.5rem)/1.06 var(--f-display); letter-spacing: -.022em; outline: none; }
/* O título sobe de trás de uma máscara a cada troca de etapa. */
.etapa h1 { overflow: hidden; padding-bottom: .14em; }
.etapa h1 > span { display: block; }
.etapa__sub { max-width: 34rem; margin: var(--e2) 0 0; color: var(--texto-suave); font-size: 1.0625rem; }
.etapa__sub::first-letter { text-transform: uppercase; }

/* Grades: quantos por linha e o vão entre eles. */
.grade { --por-linha: 3; --vao: var(--e3); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--vao); }
.grade > li { flex: 0 0 calc((100% - (var(--por-linha) - 1) * var(--vao)) / var(--por-linha)); min-width: 0; }

/* Profissionais: retratos. */

.prof { width: 100%; display: block; }
.prof__foto { display: block; aspect-ratio: 4 / 5; margin-bottom: var(--e3); border-radius: var(--r2); overflow: hidden; background: var(--superficie-2); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.prof__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.prof__foto--sigla { display: grid; place-items: center; font: 500 clamp(3rem, 9vw, 5.5rem)/1 var(--f-display); color: var(--texto-suave); background: repeating-linear-gradient(-45deg, var(--superficie) 0 12px, var(--superficie-2) 12px 24px); }
.prof__nome { display: block; font: 600 1.0625rem/1.2 var(--f-display); letter-spacing: -.01em; }
.prof__cargo { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--texto-apagado); }
.prof__prox { display: block; margin-top: var(--e2); font-size: .8125rem; line-height: 1.4; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.prof__prox::first-letter { text-transform: uppercase; }
.prof__prox--espera { animation: pulsar 1.2s ease-in-out infinite alternate; }
@keyframes pulsar { to { opacity: .35; } }
.prof.is-escolhido .prof__foto { outline-color: var(--acento); }

/* Serviços: uma carta, com foto, nome, preço e duração por linha. */

.grade--serv { --por-linha: 1; --vao: 0px; border-bottom: 1px solid var(--linha); }
.grade--serv > li { border-top: 1px solid var(--linha); }
.serv { width: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: var(--e4); padding: var(--e3) 0; transition: background .15s; }
.serv__capa { display: block; aspect-ratio: 4 / 3; border-radius: var(--r1); overflow: hidden; background: var(--superficie-2); }
.serv__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.serv__nome { display: block; font: 600 1.1875rem/1.2 var(--f-display); letter-spacing: -.01em; }
.serv__desc { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--texto-suave); }
.serv__meta { text-align: right; white-space: nowrap; }
.serv__meta strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.serv__meta span { display: block; font-size: .8125rem; color: var(--texto-apagado); }
.serv.is-escolhido { box-shadow: inset 3px 0 var(--acento); padding-left: var(--e3); }

/* No toque, a peça afunda de leve: resposta imediata, antes de a etapa trocar. */
.prof:active .prof__foto, .serv:active .serv__capa, .dia:active:not(:disabled), .hora:active:not(:disabled), .botao:active:not(:disabled), .ficha:active { transform: scale(.97); }
.prof__foto, .serv__capa, .dia, .hora, .botao, .ficha { transition: transform .12s, background .15s, color .15s, outline-color .15s, border-color .15s; }

/* Dias */

.grade--dia { --por-linha: 4; --vao: var(--e2); }
.dia { width: 100%; display: flex; flex-direction: column; align-items: center; padding: var(--e3) var(--e1) 10px; border-radius: var(--r1); background: var(--superficie); transition: background .15s, color .15s; }
.dia:hover:not(:disabled) { background: var(--superficie-2); }
.dia__sem { font-size: .8125rem; line-height: 1.3; color: var(--texto-suave); }
.dia__sem--perto { color: var(--texto); font-weight: 600; }
.dia__num { font: 500 1.875rem/1.15 var(--f-display); font-variant-numeric: lining-nums; }
.dia__mes { font-size: .8125rem; line-height: 1.3; color: var(--texto-suave); }
.dia__vagas { min-height: 1.3em; margin-top: 6px; font-size: .6875rem; line-height: 1.3; color: var(--texto-apagado); }
.dia:disabled { opacity: .4; cursor: not-allowed; }
.dia.is-escolhido, .dia.is-escolhido:hover { background: var(--inverso); color: var(--sobre-inverso); }
.dia.is-escolhido span { color: inherit; }

/* Horários */

.turno { margin: var(--e6) 0 var(--e3); font: 500 1.25rem/1.2 var(--f-display); }
.etapa__cab + .turno, .aviso + .turno { margin-top: 0; }
.grade--hora { --por-linha: 4; --vao: var(--e2); }
.hora { width: 100%; padding: 14px 0; border-radius: var(--r1); background: var(--superficie); text-align: center; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.hora:hover:not(:disabled) { background: var(--superficie-2); }
.hora:disabled { color: var(--inativo); text-decoration: line-through; cursor: not-allowed; background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--ocupado) 6px 12px); }
.hora.is-escolhido { background: var(--inverso); color: var(--sobre-inverso); }

/* Formulário */

.form { display: grid; gap: var(--e4); max-width: 440px; }
.campo { display: grid; gap: var(--e2); }
.campo label { font-weight: 500; font-size: .9375rem; }
.campo input { width: 100%; min-height: 54px; padding: 0 var(--e4); font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--r1); }
.campo input::placeholder { color: var(--texto-apagado); }
.campo input:focus-visible { outline-offset: 1px; }
.campo__erro { margin: 0; font-size: .875rem; color: var(--erro); }
.campo.tem-erro input { border-color: var(--acento-vivo); }

.marcar { display: flex; align-items: center; gap: var(--e3); font-size: .9375rem; color: var(--texto-suave); }
.marcar input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }

.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { max-width: 440px; margin: 0 0 var(--e5); padding: var(--e3) var(--e4); border-left: 3px solid var(--aviso-linha); border-radius: var(--r1); background: var(--aviso-fundo); }
.form .aviso { margin-bottom: 0; }
.nota { max-width: 46ch; margin: 0; font-size: .875rem; color: var(--texto-suave); }
.nota a { color: var(--texto); }
.linha-acao { margin: 0; }
.nota + .linha-acao { margin-top: var(--e3); }

/* Botões */

.botao { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--r1); background: var(--acento); color: var(--sobre-acento); font: 600 1rem/1.2 var(--f-texto); text-align: center; text-decoration: none; transition: background .15s; }
.botao:hover { background: var(--acento-vivo); }
.botao:disabled { opacity: .6; cursor: progress; }
/* Reflexo que atravessa o botão cheio quando apontado. */
.botao::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, var(--reflexo), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.botao--linha::after, .botao--texto::after { content: none; }
.botao--cheio { width: 100%; }
.botao--linha { background: transparent; border-color: var(--linha-forte); color: var(--texto); }
.botao--linha:hover { background: var(--superficie-2); }
.botao--zap { background: var(--zap); }
.botao--zap:hover { background: var(--zap-vivo); }
.botao--texto { min-height: 44px; padding: 0; background: none; color: var(--texto-suave); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.botao--texto:hover { background: none; color: var(--texto); }

.acoes { display: grid; gap: var(--e3); max-width: 440px; margin: 0 0 var(--e5); }

/* Bilhete de confirmação */

.bilhete { max-width: 440px; margin: 0 0 var(--e5); border-radius: var(--r2); background: var(--superficie); box-shadow: var(--sombra-bilhete); }
.bilhete__quando { margin: 0; padding: var(--e5) var(--e5) var(--e4); font: 500 1.625rem/1.15 var(--f-display); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.bilhete__quando::first-letter { text-transform: uppercase; }
.bilhete__picote { position: relative; border-top: 1px dashed var(--linha-forte); }
.bilhete__picote::before, .bilhete__picote::after { content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--fundo); }
.bilhete__picote::before { left: -9px; }
.bilhete__picote::after { right: -9px; }
.bilhete dl { margin: 0; padding: var(--e4) var(--e5) var(--e5); display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e4); font-size: .9375rem; }
.bilhete dt { color: var(--texto-suave); }
.bilhete dd { margin: 0; text-align: right; }

/* ---------- Páginas de conteúdo: Barbearia, Loja, Dúvidas ---------- */

.pagina { width: 100%; max-width: calc(var(--largura) + 2 * var(--calha)); margin: 0 auto; padding: 0 var(--calha) var(--e9); }
.pagina__cab { padding: var(--e7) 0 var(--e6); }
.pagina__sub { max-width: 40ch; margin: var(--e4) 0 0; color: var(--texto-suave); font-size: 1.125rem; }
.pagina__cab + .linha-acao { margin-bottom: var(--e4); }

/* Abertura da aba Barbearia: a frase da casa e duas fotos sobrepostas. */
.capa { padding-top: var(--e7); }
.pagina .capa h1 { max-width: 13ch; font-size: clamp(2.75rem, 12.5vw, 5rem); line-height: 1; letter-spacing: -.03em; }
.aberta { display: flex; align-items: center; gap: var(--e2); margin: var(--e5) 0 0; font-size: .9375rem; }
.aberta::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-apagado); }
.aberta--sim::before { background: var(--zap-vivo); }
.capa__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e5); margin: var(--e5) 0 0; }
.capa__fotos { position: relative; max-width: 520px; aspect-ratio: 1 / 1.08; margin-top: var(--e7); }
.capa__foto { position: absolute; border-radius: var(--r2); overflow: hidden; background: var(--superficie-2); box-shadow: var(--sombra-foto); }
.capa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa__foto--a { top: 0; right: 0; width: 76%; aspect-ratio: 4 / 5; }
.capa__foto--b { left: 0; bottom: 0; width: 50%; aspect-ratio: 1; border: 6px solid var(--fundo); }

.bloco { margin-top: var(--e8); }
.bloco__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e5); margin-bottom: var(--e5); padding-bottom: var(--e4); border-bottom: 1px solid var(--linha); }
.bloco h2 { margin: 0; font: 500 clamp(1.75rem, 6vw, 2.5rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.bloco__cab p { margin: 0; color: var(--texto-suave); }

.pessoa__link { display: inline-block; margin-top: var(--e1); padding: 10px 0; font-size: .875rem; color: var(--texto-suave); }
.pessoa__link:hover { color: var(--texto); }

.mosaico { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.foto { overflow: hidden; border-radius: var(--r2); background: var(--superficie-2); }
.foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }

.bloco--duplo { display: grid; gap: var(--e8); }
.endereco { margin: 0 0 var(--e4); font-style: normal; font-size: 1.125rem; }
.funciona { display: inline-grid; grid-template-columns: auto auto; gap: 6px var(--e6); margin: 0; font-variant-numeric: tabular-nums; }
.funciona dt { color: var(--texto-suave); }
.funciona dd { margin: 0; }

/* Loja */

.prods { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--linha); }
.prod { display: grid; gap: var(--e5); padding: var(--e6) 0; border-top: 1px solid var(--linha); }
.prod__arte { aspect-ratio: 4 / 3; border-radius: var(--r2); overflow: hidden; background: var(--papel-foto); }
.prod__arte img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prod__marca { margin: 0; font-size: .875rem; color: var(--texto-apagado); }
.prod__nome { margin: 2px 0 0; font: 500 1.75rem/1.15 var(--f-display); letter-spacing: -.015em; }
.prod__emb { margin: var(--e1) 0 0; font-size: .9375rem; color: var(--texto-suave); }
.prod__desc { max-width: 46ch; margin: var(--e3) 0 var(--e5); }
.prod__rotulo { margin: 0 0 var(--e2); font-size: .875rem; color: var(--texto-suave); }
.fichas { list-style: none; margin: 0 0 var(--e5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.ficha { min-height: 44px; padding: 7px var(--e4); border: 1px solid var(--linha); border-radius: var(--r1); font-size: .875rem; line-height: 1.4; color: var(--texto-suave); transition: color .15s, border-color .15s, background .15s; }
.ficha:hover { color: var(--texto); border-color: var(--linha-forte); }
.ficha[aria-pressed="true"] { background: var(--inverso); border-color: var(--inverso); color: var(--sobre-inverso); }
.prods + .nota { margin-top: var(--e5); }

/* Dúvidas */

.colunas__lado .linha-acao { margin-top: var(--e5); }
.duvidas { margin-top: var(--e6); border-top: 1px solid var(--linha); }
.duvida { border-bottom: 1px solid var(--linha); interpolate-size: allow-keywords; }
.duvida summary { position: relative; padding: var(--e5) var(--e7) var(--e5) 0; font-weight: 500; font-size: 1.0625rem; line-height: 1.35; cursor: pointer; list-style: none; }
.duvida summary::-webkit-details-marker { display: none; }
/* Sinal de mais que vira menos ao abrir. */
.duvida summary::before, .duvida summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1.5px; margin-top: -1px; background: var(--texto-suave); transition: transform .3s var(--suave); }
.duvida summary::after { transform: rotate(90deg); }
.duvida[open] summary::after { transform: rotate(0deg); }
/* A resposta abre e fecha com altura animada, sem JavaScript, onde o navegador aceita. */
.duvida::details-content { block-size: 0; overflow: hidden; transition: block-size .32s var(--suave), content-visibility .32s allow-discrete; }
.duvida[open]::details-content { block-size: auto; }
.duvida__resp { max-width: 56ch; padding: 0 0 var(--e5); color: var(--texto-suave); }
.duvida__resp p { margin: 0; }
.duvida__resp .funciona { margin-bottom: var(--e3); color: var(--texto); }

/* ---------- Rodapé ---------- */

.rodape { margin-top: auto; color: var(--texto-suave); font-size: .9375rem; }
/* O poste, parado, fecha a página. */
.rodape__faixa { height: 6px; background: repeating-linear-gradient(-45deg, var(--poste-a) 0 10px, var(--poste-b) 10px 20px, var(--poste-c) 20px 30px, var(--poste-b) 30px 40px); }
.rodape__dentro { max-width: calc(var(--largura) + 2 * var(--calha)); margin: 0 auto; padding: var(--e7) var(--calha) calc(var(--e7) + env(safe-area-inset-bottom)); }
.rodape .rodape__marca { margin: 0 0 var(--e6); font: 700 clamp(1.5rem, 7vw, 2.5rem)/1.15 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); }
.rodape__marca span { display: block; }
.rodape__grade { display: grid; gap: var(--e5); }
.rodape h2 { margin: 0 0 var(--e1); font: 600 .875rem/1.4 var(--f-texto); color: var(--texto-apagado); }
.rodape p, .rodape address { margin: 0; font-style: normal; }
.rodape a { color: var(--texto); }
.rodape .funciona { gap: 2px var(--e5); color: var(--texto); }
.rodape .rodape__fim { margin-top: var(--e6); font-size: .8125rem; }
.rodape .rodape__fim a { color: var(--texto-suave); }

/* ---------- Painel dos profissionais ---------- */

.painel { width: 100%; max-width: calc(720px + 2 * var(--calha)); margin: 0 auto; padding: var(--e6) var(--calha) var(--e9); }
.painel__cab { margin-bottom: var(--e5); }
.painel h1 { font-size: clamp(1.875rem, 7vw, 2.75rem); }
.painel__sub { margin: var(--e2) 0 0; color: var(--texto-suave); }
.painel__sub::first-letter { text-transform: uppercase; }
.painel__acoes { display: flex; gap: var(--e2); margin-top: var(--e4); }

.abas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.aba { min-height: 44px; padding: 0 var(--e5); border-radius: var(--r1); background: var(--superficie); font-weight: 500; }
.aba.is-ativa { background: var(--inverso); color: var(--sobre-inverso); }

.faixa-dias { display: flex; gap: var(--e2); margin: 0 calc(-1 * var(--calha)) var(--e5); padding: 2px var(--calha) var(--e2); overflow-x: auto; scrollbar-width: thin; list-style: none; }
.faixa-dias li { flex: none; width: 78px; }

.mini { min-height: 40px; padding: 0 var(--e4); border: 1px solid var(--linha-forte); border-radius: var(--r1); font-size: .875rem; font-weight: 500; white-space: nowrap; }
.mini:hover { background: var(--superficie-2); }

.linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.linha { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--e3); min-height: 64px; padding: var(--e3) var(--e4); border-left: 3px solid var(--linha); border-radius: var(--r1); background: var(--superficie); }
.linha__hora { font-weight: 600; font-variant-numeric: tabular-nums; }
.linha__quem { min-width: 0; }
.linha__quem strong { display: block; font-weight: 600; overflow-wrap: anywhere; }
.linha__quem span { display: block; font-size: .875rem; color: var(--texto-suave); }
.linha__quem a { color: var(--texto); }
.linha.is-cliente { border-left-color: var(--acento); }
.linha.is-bloqueio { border-left-color: var(--foco); }
.linha.is-livre .linha__quem { color: var(--texto-apagado); }
.linha.is-passado { opacity: .5; }

.painel .form { margin-top: var(--e5); }
.vazio { margin: 0; color: var(--texto-suave); }

/* ---------- Telas maiores ---------- */

@media (min-width: 600px) {
  :root { --calha: 32px; }
  .grade { --vao: var(--e4); }
  .grade--dia { --por-linha: 7; --vao: var(--e2); }
  .grade--hora { --por-linha: 6; --vao: var(--e2); }
  .prof__nome { font-size: 1.375rem; }
  .serv { grid-template-columns: 116px minmax(0, 1fr) auto; gap: var(--e5); padding: var(--e4) 0; }
  .serv__nome { font-size: 1.3125rem; }
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); }
  .bloco { margin-top: var(--e9); }
  .bloco--duplo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--e7); padding: var(--e7) 0; align-items: start; }
  .prod__arte { aspect-ratio: 1; }
  .rodape__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e6); }
  .rodape__grade--so { grid-template-columns: minmax(0, 1fr); }
  .rodape__dentro { padding-bottom: var(--e7); }
}

@media (min-width: 860px) {
  :root { --calha: 40px; }
  .topo__barra { grid-template-columns: auto 1fr; grid-template-areas: "marca abas"; gap: var(--e5); padding-top: 0; }
  .topo__barra--so { padding: var(--e3) var(--calha); }
  .marca img { width: 44px; height: 44px; }
  .marca__nome { font-size: 1rem; }
  .abas-site { margin: 0 0 -1px; }
  .abas-site ul { justify-content: flex-end; gap: var(--e6); padding: 0; }
  .abas-site a { padding: 28px 0 26px; }

  .palco { padding-top: var(--e6); }
  .palco__grade { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--e8); align-items: start; margin-top: var(--e7); }
  .palco__grade:has(> .palco__lado[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .etapa { margin-top: 0; }
  .etapa__cab { margin-bottom: var(--e7); }

  /* O bilhete: uma linha por escolha, com picote entre elas. */
  .palco__lado { position: sticky; top: var(--e6); padding: var(--e5); border-radius: var(--r2); background: var(--superficie); box-shadow: var(--sombra-bilhete); }
  .lado__titulo { position: static; width: auto; height: auto; clip-path: none; margin: 0 0 var(--e3); font: 500 1.375rem/1.2 var(--f-display); letter-spacing: -.01em; }
  .resumo { display: block; }
  .resumo li, .resumo li:not(.is-feito) { display: block; padding: var(--e3) 0; border-top: 1px dashed var(--linha-forte); }
  .resumo__rotulo { display: block; font-size: .8125rem; color: var(--texto-apagado); }
  .resumo__vazio { display: block; min-height: 1.5em; color: var(--texto-apagado); }
  .resumo button { padding: 0; border: 0; color: var(--texto); font-size: 1rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--linha-forte); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .resumo button:hover { text-decoration-color: var(--acento-vivo); }
  .resumo .is-atual .resumo__rotulo { color: var(--texto); }

  .grade--prof { --vao: var(--e5); }
  .bloco .grade--prof { max-width: 780px; }
  .capa { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--e8); align-items: center; padding-top: var(--e8); }
  .capa__fotos { margin: 0 0 0 auto; width: 100%; }
  .pagina__cab { padding: var(--e8) 0 var(--e7); }
  .colunas { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--e9); align-items: start; }
  .colunas__lado { position: sticky; top: 0; }
  .colunas .duvidas { margin-top: var(--e8); }
}

/* No computador as fotos ficam em preto e branco e ganham cor em quem é apontado ou escolhido.
   No celular, onde não há ponteiro, ficam sempre em cor. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .prof .prof__foto img, .serv__capa img { filter: grayscale(1) contrast(1.05); transition: filter .3s, transform .8s var(--suave); }
  .prof:hover .prof__foto img, .prof:focus-visible .prof__foto img, .prof.is-escolhido .prof__foto img,
  .serv:hover .serv__capa img, .serv:focus-visible .serv__capa img, .serv.is-escolhido .serv__capa img { filter: none; }
}

/* Com ponteiro: a foto aproxima devagar e o reflexo cruza o botão. */
@media (hover: hover) and (pointer: fine) {
  .prof:hover .prof__foto img, .serv:hover .serv__capa img, .foto:hover img { transform: scale(1.04); }
  .foto img { transition: transform .8s var(--suave); }
  .serv:hover .serv__nome { text-decoration: underline; text-decoration-color: var(--acento-vivo); text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .botao:hover::after { transform: translateX(320%) skewX(-18deg); transition: transform .7s var(--suave); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .poste__listras::before, .prof__prox--espera, .etapa.is-entrando > * { animation: none; }
  .poste__listras, .prof__foto img, .serv__capa img, .foto img, .botao::after, .duvida::details-content, .duvida summary::after { transition: none; }
  .prof:active .prof__foto, .serv:active .serv__capa, .dia:active:not(:disabled), .hora:active:not(:disabled), .botao:active:not(:disabled), .ficha:active { transform: none; }
  .prof:hover .prof__foto img, .serv:hover .serv__capa img, .foto:hover img { transform: none; }
}

/* Algarismos alinhados nos títulos (o padrão da Baskervville é o de texto, com descendentes).
   Fica no fim porque a propriedade font, usada acima, zera esta. */
.etapa h1, .pagina h1, .pagina .capa h1, .painel h1, .bloco h2, .turno, .lado__titulo, .prod__nome { font-variant-numeric: lining-nums; }