:root{
    --linho:#F4EFE6; --linho-2:#EDE4D7; --argila:#E4D6C4;
    --cobre:#B4694A; --cobre-cl:#D08D6C; --cobre-tx:#8A452B; --casca:#6B4029;
    --mata:#232B21; --mata-2:#1A2018; --folha:#5D6B4D; --rosa:#C99C93;
    --tinta:#38322B; --tinta-2:#6B6257;
  }
  html{scroll-behavior:smooth; scroll-padding-top:92px}
  body{background:var(--linho); color:var(--tinta); -webkit-font-smoothing:antialiased; overflow-x:hidden}

  /* Bodoni Moda: o didone do catalogo dela, com optical sizing automatico */
  .display{font-family:'Bodoni Moda',Georgia,serif; font-optical-sizing:auto; letter-spacing:-.012em; line-height:1.06}
  .display-sm{font-family:'Bodoni Moda',Georgia,serif; font-optical-sizing:auto; letter-spacing:0; line-height:1.2}
  /* Sem terceira familia: o rotulo e a propria Hanken em caixa alta, bem aberta */
  .rotulo{font-weight:600; letter-spacing:.24em; text-transform:uppercase; font-size:10.5px; line-height:1.6}
  .dado{font-variant-numeric:tabular-nums; letter-spacing:.02em}

  ::selection{background:var(--cobre); color:var(--linho)}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
  summary:focus-visible{outline:2px solid var(--cobre); outline-offset:3px; border-radius:3px}
  input[type=radio]:focus-visible + span,
  input[type=checkbox]:focus-visible + span{outline:2px solid var(--cobre); outline-offset:3px}

  /* ── GRADUACAO ───────────────────────────────────────────────────────
     A marca de medida da regua vira o divisor de secao do site inteiro. */
  .graduacao{height:9px; position:relative}
  .graduacao::before{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:.18}
  .graduacao::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px; opacity:.22;
    background:repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 14px)}

  /* ── A REGUA DA VISITA — elemento-assinatura ────────────────────────
     80 minutos de pegada mapeados em 0-100%. Os 60 do meio sao da cliente. */
  .regua-eixo{position:relative; height:58px}
  .regua-tracos{position:absolute; left:0; right:0; bottom:0; height:10px; opacity:.28;
    background:repeating-linear-gradient(90deg,#F4EFE6 0 1px,transparent 1px 6.25%)}
  .regua-base{position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(244,239,230,.28)}
  /* A faixa nasce cheia: se o JS ou a transicao falharem, a regua ainda
     se explica. O JS e que a zera para depois deixa-la correr. */
  .regua-faixa{position:absolute; bottom:0; left:12.5%; width:75%; height:3px;
    background:linear-gradient(90deg,var(--cobre),var(--cobre-cl) 58%,var(--rosa));
    transform-origin:left center}
  .regua-faixa.zerada{transform:scaleX(0)}
  .regua-faixa.zerada.corre{transform:scaleX(1); transition:transform 1.8s cubic-bezier(.16,.84,.28,1) .1s}
  .regua-marca{position:absolute; bottom:0; width:1px; height:20px; background:rgba(244,239,230,.7); translate:-.5px 0}
  .regua-num{position:absolute; bottom:28px; translate:-50% 0; font-size:11px; letter-spacing:.12em;
    font-variant-numeric:tabular-nums; color:rgba(244,239,230,.68); white-space:nowrap}
  .regua-num b{color:var(--cobre-cl); font-weight:600; letter-spacing:.1em}
  @media (max-width:639px){
    .regua-num{font-size:10px; letter-spacing:.06em; bottom:24px}
    .regua-eixo{height:50px}
  }

  /* Tudo nasce visivel. So esconde para animar quando a classe .anima
     entra no <html> — um script no <head> que so roda se o JS estiver
     vivo e a pessoa nao pedir menos movimento. Sem JS, sem animacao
     bloqueada, sem texto invisivel. */
  .anima .reveal{opacity:0; transform:translateY(24px)}

  /* Entrada do hero: uma escada so, na carga da pagina */
  @keyframes sobe{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
  .anima [data-h]{opacity:0; animation:sobe .95s cubic-bezier(.2,.82,.3,1) forwards}
  .anima [data-h="1"]{animation-delay:.10s}
  .anima [data-h="2"]{animation-delay:.20s}
  .anima [data-h="3"]{animation-delay:.34s}
  .anima [data-h="4"]{animation-delay:.46s}
  .anima [data-h="5"]{animation-delay:.58s}

  /* ── FICHA DE SAUDE ────────────────────────────────────────────────── */
  .campo{width:100%; background:#FFFDF9; border:1px solid rgba(56,50,43,.16); border-radius:4px;
    padding:11px 13px; font-size:15px; color:var(--tinta); transition:border-color .18s, box-shadow .18s}
  .campo::placeholder{color:#A9A093}
  .campo:hover{border-color:rgba(56,50,43,.3)}
  .campo:focus{border-color:var(--cobre); box-shadow:0 0 0 3px rgba(180,105,74,.14); outline:none}
  .campo[aria-invalid="true"]{border-color:#A93B25; box-shadow:0 0 0 3px rgba(169,59,37,.12)}
  .etiqueta{display:block; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--casca); margin-bottom:6px}
  .erro{display:none; font-size:12px; color:#A93B25; margin-top:5px}
  .erro.mostra{display:block}

  /* Sim/Nao: par de pilulas segmentadas */
  .simnao{display:inline-flex; border:1px solid rgba(56,50,43,.18); border-radius:999px; padding:2px; background:#FFFDF9}
  .simnao label{margin:0; cursor:pointer}
  .simnao input{position:absolute; opacity:0; width:1px; height:1px}
  .simnao span{display:block; min-width:62px; text-align:center; padding:6px 16px; border-radius:999px;
    font-size:13.5px; font-weight:600; color:var(--tinta-2); transition:background .18s, color .18s}
  .simnao input:checked + span{background:var(--casca); color:var(--linho)}
  .simnao label:hover span{color:var(--casca)}
  .simnao input:checked + span:hover{color:var(--linho)}

  .extra{display:none; margin-top:12px}
  .extra.abre{display:block}

  /* Autorizacao de imagem e declaracoes: caixas com area de clique inteira */
  .opcao{display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:5px;
    border:1px solid rgba(56,50,43,.16); background:#FFFDF9; cursor:pointer; transition:border-color .18s, background .18s}
  .opcao:hover{border-color:rgba(107,64,41,.45)}
  .opcao input{margin-top:2px; accent-color:var(--casca); width:17px; height:17px; flex:none}
  .opcao:has(input:checked){border-color:var(--casca); background:#FBF6EE}

  details.duvida summary::-webkit-details-marker{display:none}
  details.duvida summary{list-style:none; cursor:pointer}
  details.duvida[open] .seta{transform:rotate(180deg)}

  @media (prefers-reduced-motion: reduce){
    .regua-faixa.zerada{transform:scaleX(1); transition:none}
    .anima .reveal{opacity:1; transform:none}
    .anima [data-h]{opacity:1; animation:none}
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  }