/* Agenda da Dra. Rafaela Bergamin — identidade tirada do logo (fundo rosa, tinta rosé, Gilda Display + Raleway) */
/* Fontes no próprio servidor (M1 do gate): nenhuma visita passa pelo Google. Licença OFL em projetos/dra-rafaela/marca/fontes-OFL.txt */
@font-face { font-family: 'Gilda Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('gilda-400.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('raleway.woff2') format('woff2'); }

:root {
  --rosa: #F2E1DB;       /* fundo do logo, medido no arquivo */
  --creme: #FBF6F3;      /* base clara das seções */
  --tinta: #6F4642;      /* texto corrido: 6,3:1 sobre o rosa */
  --titulo: #7A4F4B;     /* tinta do logo escurecida para passar 4,5:1 */
  --linha: #DCC3BA;      /* fios decorativos */
  --borda: #9C7A73;      /* borda de campo: 3:1 sobre o creme */
  --erro: #8A2B22;
  --branco: #FFFFFF;
  --raio: 3px;
  --serifa: 'Gilda Display', Georgia, 'Times New Roman', serif;
  --sans: 'Raleway', 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;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tinta); text-underline-offset: 3px; }
a:hover { color: var(--titulo); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.pular { position: absolute; left: var(--e4); top: -60px; background: var(--tinta); color: var(--branco); padding: var(--e2) var(--e4); z-index: 10; }
.pular:focus { top: var(--e2); color: var(--branco); }

/* topo */
.topo { background: var(--rosa); display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: var(--e3) var(--e4); }
.topo-marca img { width: 168px; }
.topo-whats { font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: var(--e3) var(--e2); min-height: 44px; display: inline-flex; align-items: center; }

/* abertura */
.abre { background: var(--rosa); display: grid; gap: var(--e6); padding: var(--e5) var(--e4) var(--e7); }
.abre h1 { font-family: var(--serifa); font-weight: 400; color: var(--titulo); font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: 1.02; margin: 0 0 var(--e4); }
.abre p { margin: 0 0 var(--e5); max-width: 34ch; font-size: 1.05rem; }
.abre-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }
.abre-foto { margin: 0; justify-self: center; width: min(100%, 360px); }
/* sem-plastico-ignore: raio-uniforme — o arco é a moldura da foto, recorte de imagem e não raio de componente */
.abre-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 45% 18%; border-radius: 999px 999px 0 0; }

/* fio com o dente, o separador do logo */
.fio { display: flex; align-items: center; gap: var(--e3); max-width: 420px; margin: var(--e7) auto var(--e5); padding: 0 var(--e4); color: var(--titulo); }
.fio span { flex: 1; height: 1px; background: var(--titulo); opacity: .55; }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--e3) var(--e5); border: 1px solid var(--tinta); border-radius: var(--raio); background: var(--tinta); color: var(--branco); font: 600 .86rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.botao:hover { background: #573532; color: var(--branco); }
.botao--linha { background: transparent; color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--branco); }
.botao--largo { width: 100%; }
.botao[disabled] { opacity: .6; cursor: progress; }

/* agendamento */
.agendar { max-width: 720px; margin: 0 auto; padding: 0 var(--e4) var(--e9); }
.agendar > h2, .pronto h2 { font-family: var(--serifa); font-weight: 400; color: var(--titulo); font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; text-align: center; margin: 0 0 var(--e7); }

.passo { border: 0; margin: 0 0 var(--e7); padding: 0; min-width: 0; }
.passo[disabled] { opacity: .45; }
.passo legend { display: flex; align-items: baseline; gap: var(--e3); padding: 0; margin-bottom: var(--e4); font-size: .82rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.passo-n { font-family: var(--serifa); font-size: 1.6rem; letter-spacing: 0; color: var(--titulo); }

.escolha { position: relative; }
.escolha input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* serviço e cidade: lista editorial */
.opcoes { border-top: 1px solid var(--linha); }
.opcoes .escolha label { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); min-height: 56px; padding: var(--e3) var(--e2); border-bottom: 1px solid var(--linha); cursor: pointer; font-size: 1.08rem; transition: background-color .2s ease, color .2s ease, padding .2s ease; }
.opcoes .escolha small { font-size: .82rem; letter-spacing: .04em; }
.opcoes .escolha label:hover { background: var(--rosa); }
.opcoes .escolha input:checked + label { background: var(--tinta); color: var(--branco); padding-left: var(--e4); }
.escolha input:focus-visible + label { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* dias: faixa que rola de lado */
.dias { display: flex; gap: var(--e2); overflow-x: auto; padding: var(--e1) var(--e1) var(--e3); scroll-snap-type: x proximity; }
.dias .escolha { flex: 0 0 auto; scroll-snap-align: start; }
.dias .escolha label { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; min-height: 84px; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; background: var(--creme); }
.dias .sem { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.dias .num { font-family: var(--serifa); font-size: 1.7rem; line-height: 1.1; }
.dias .mes { font-size: .74rem; }
.dias .escolha input:checked + label, .horas .escolha input:checked + label { background: var(--tinta); border-color: var(--tinta); color: var(--branco); }

/* horários */
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--e2); }
.horas .escolha label { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums; }
.dias .escolha label:hover, .horas .escolha label:hover { background: var(--rosa); }

/* dados */
.resumo { background: var(--rosa); padding: var(--e3) var(--e4); margin: 0 0 var(--e5); border-radius: var(--raio); }
.resumo:empty { display: none; }
.campo { margin-bottom: var(--e4); }
.campo label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: var(--e1); }
.campo input { width: 100%; min-height: 50px; padding: var(--e3) var(--e4); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); color: var(--tinta); font: 1rem var(--sans); }
.campo input[aria-invalid="true"] { border-color: var(--erro); }
.erro { color: var(--erro); font-size: .9rem; margin: var(--e1) 0 0; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ciencia { display: flex; gap: var(--e3); align-items: flex-start; margin: var(--e5) 0 var(--e2); font-size: .92rem; }
.ciencia input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--tinta); }
.aviso { font-size: .9rem; margin: var(--e3) 0 0; text-align: center; }
.aviso:empty { display: none; }
.vazio { padding: var(--e4) 0; }

/* pedido recebido */
.pronto { text-align: center; }
.pronto h2 { margin-bottom: var(--e3); }
.pronto-sub { margin: 0 auto var(--e6); max-width: 36ch; }
.pronto-dados { margin: 0 0 var(--e6); border-top: 1px solid var(--linha); text-align: left; }
.pronto-dados div { display: flex; justify-content: space-between; gap: var(--e4); padding: var(--e3) var(--e1); border-bottom: 1px solid var(--linha); }
.pronto-dados dt { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.pronto-dados dd { margin: 0; text-align: right; }

/* rodapé */
.rodape { background: var(--rosa); padding: var(--e7) var(--e4); text-align: center; font-size: .92rem; }
.rodape img { width: 220px; margin: 0 auto var(--e4); }
.rodape p { margin: 0 0 var(--e2); }

@media (min-width: 900px) {
  .topo { padding: var(--e4) var(--e7); }
  .topo-marca img { width: 210px; }
  .abre { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--e8); padding: var(--e5) var(--e7) var(--e8); max-width: none; }
  .abre-texto { justify-self: end; max-width: 520px; }
  .abre p { font-size: 1.12rem; }
  .abre-foto { justify-self: start; width: min(100%, 440px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- acréscimos da versão do sistema ---------- */
[hidden] { display: none !important; }

/* carga, falha de rede e avisos de envio */
.carga { text-align: center; margin-bottom: var(--e7); }
.acoes-aviso { display: grid; gap: var(--e3); max-width: 420px; margin: var(--e4) auto 0; }
.aviso--erro { color: var(--erro); font-weight: 600; }
#envio-whats { margin-top: var(--e3); }

/* 409: horário tomado ou limite do número; fica entre o passo 4 e o passo 5 */
.troca { background: var(--rosa); border-left: 3px solid var(--erro); border-radius: var(--raio); padding: var(--e3) var(--e4); margin: 0 0 var(--e7); }
.troca:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* política de privacidade */
.politica { max-width: 720px; margin: 0 auto; padding: var(--e7) var(--e4) var(--e9); }
.politica h1 { font-family: var(--serifa); font-weight: 400; color: var(--titulo); font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.1; margin: 0 0 var(--e3); }
.politica h2 { font-family: var(--serifa); font-weight: 400; color: var(--titulo); font-size: clamp(1.4rem, 4vw, 1.75rem); line-height: 1.2; margin: var(--e7) 0 var(--e3); }
.politica p, .politica li { max-width: 64ch; }
.politica p { margin: 0 0 var(--e3); }
.politica ul { margin: 0 0 var(--e3); padding-left: 1.25em; }
.politica li { margin-bottom: var(--e2); }
.politica .atualizado { font-size: .9rem; margin-bottom: var(--e5); }
.politica .voltar { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--e4); font-weight: 600; }
.politica .fecho { margin-top: var(--e7); }