/* =====================================================================
   Testes passo a passo (/f/...)
   Vem DEPOIS do estilo.css e reaproveita os tokens dele (cores, raios,
   elevacao, fontes) — as duas folhas carregam e a mesma identidade do site
   vale aqui sem copiar valor nenhum.

   Publico da clinica e majoritariamente idoso: texto grande, alvos de toque
   de pelo menos 56px, contraste alto e nada que dependa de precisar acertar
   um alvo pequeno.
   ===================================================================== */
[hidden]{display:none!important}

body.tt{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--menta-clara)}
.tt-coluna{width:100%;max-width:calc(720px + 2*var(--calha));margin-inline:auto;padding-inline:var(--calha)}
.tt-so{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- topo e progresso ---------- */
.tt-progresso{position:fixed;inset:0 0 auto;z-index:30;height:4px;background:var(--linha)}
.tt-progresso i{display:block;height:100%;width:0;background:var(--verde);transition:width .4s ease}
.tt-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 4px}
.tt-logo{width:clamp(118px,30vw,150px);height:auto}
.tt-contagem{font-size:.8125rem;font-weight:600;color:var(--tinta-suave);font-variant-numeric:tabular-nums}

/* ---------- palco ---------- */
.tt-palco{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(22px,5vh,56px)}
.tt-tela{width:100%}
@keyframes tt-f{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes tt-b{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.tt-f{animation:tt-f .38s cubic-bezier(.2,.7,.2,1) both}
.tt-b{animation:tt-b .38s cubic-bezier(.2,.7,.2,1) both}

/* ---------- abertura ---------- */
.tt-h1{margin:0 0 20px;font-size:clamp(2rem,6.6vw,3.25rem);line-height:1.1}
.tt-h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(188,211,116,.8) 62%);padding:0 .08em}
.tt-lead{margin:0 0 20px;max-width:58ch;font-size:1.0625rem;line-height:1.7;color:var(--tinta-media)}
.tt-citacao{margin:0 0 22px;max-width:58ch;padding:16px 18px;border-left:4px solid var(--verde);border-radius:0 var(--r-md) var(--r-md) 0;background:rgba(140,169,47,.12);font-family:var(--display);font-style:italic;font-size:1.125rem;line-height:1.55;color:var(--azul-900)}
.tt-como{margin:0;font-size:.9375rem;font-weight:600;color:var(--azul-800)}
.tt-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.tt-comecar{min-height:58px;padding-inline:32px;font-size:1.0625rem}
.tt-link{font-size:.9375rem;font-weight:600;color:var(--azul-800);text-decoration:underline;text-underline-offset:3px}
.tt-link:hover{color:var(--verde-escuro)}
.tt-noscript{margin:0;font-size:1rem;color:var(--tinta-media)}

/* dica de teclado: so onde existe teclado de verdade */
.tt-dica{display:none;font-size:.8125rem;color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.tt-dica{display:inline}}

/* ---------- pergunta ---------- */
.tt-pnum{margin:0 0 14px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-escuro)}
.tt-q{margin:0;font-size:clamp(1.5rem,4.8vw,2.25rem);line-height:1.22}
.tt-q:focus,.tt-res-t:focus{outline:none}
.tt-sub{margin:14px 0 0;max-width:52ch;font-size:1.0625rem;line-height:1.6;color:var(--tinta-suave)}
.tt-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.tt-op{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 22px;border:2px solid var(--linha-forte);border-radius:var(--r-md);background:var(--branco);color:var(--azul-900);font:700 1.1875rem/1 var(--fonte);text-align:left;cursor:pointer;box-shadow:var(--elev-1);transition:border-color .15s,background .15s,color .15s,transform .15s,box-shadow .15s}
.tt-op:hover{border-color:var(--azul-700);box-shadow:var(--elev-2);transform:translateY(-1px)}
.tt-op[aria-pressed="true"]{border-color:var(--azul-800);background:var(--azul-800);color:#fff}
.tt-tecla{display:none;place-items:center;width:28px;height:28px;border:1px solid currentColor;border-radius:6px;font-size:.75rem;font-weight:700;opacity:.6}
@media (hover:hover) and (pointer:fine){.tt-tecla{display:grid}}
.tt-conversar{margin:28px 0 0;font-size:.9375rem;color:var(--tinta-suave)}
@media (max-width:520px){.tt-opcoes{grid-template-columns:1fr}}

/* barra de baixo: voltar / continuar. Sticky para nao sumir em tela pequena
   e respeitando a area segura do iPhone */
.tt-nav{position:sticky;bottom:0;z-index:20;background:var(--menta-clara);border-top:1px solid var(--linha);padding-block:10px calc(10px + env(safe-area-inset-bottom))}
.tt-nav-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tt-voltar{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 8px;border:0;background:none;color:var(--azul-800);font:600 .9375rem var(--fonte);cursor:pointer}
.tt-voltar:hover{color:var(--verde-escuro)}
.tt-voltar svg{width:18px;height:18px;transform:scaleX(-1)}
.tt-proxima{min-height:48px;padding:10px 22px}

/* ---------- resultado ---------- */
.tt-res{display:grid;gap:20px;padding:clamp(24px,5vw,40px);border-radius:var(--r-lg);background:var(--azul-900);color:#fff;box-shadow:var(--elev-3)}
.tt-placar{display:flex;align-items:baseline;gap:14px;color:var(--verde-claro)}
.tt-placar b{font-family:var(--display);font-size:clamp(3.5rem,11vw,4.75rem);font-weight:500;line-height:1}
.tt-placar span{font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tt-res-t{font-size:clamp(1.6rem,5vw,2.25rem);line-height:1.15;color:#fff}
.tt-res-x{margin:0;max-width:60ch;line-height:1.7;color:rgba(255,255,255,.88)}
.tt-lista-t{margin:6px 0 -8px;font:700 .75rem/1.4 var(--fonte);letter-spacing:.14em;text-transform:uppercase;color:var(--verde-claro)}
.tt-lista{display:grid;gap:12px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);background:rgba(255,255,255,.07)}
.tt-item{font-size:.9375rem;line-height:1.45;color:#fff}
.tt-lista-escada .tt-item{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:center}
.tt-marca{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.8125rem;font-weight:800}
.tt-etq{padding:3px 10px;border-radius:99px;font-size:.6875rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tt-item.feito{color:rgba(255,255,255,.72)}
.tt-item.feito .tt-marca{background:var(--verde-claro);color:var(--azul-900)}
.tt-item.feito .tt-etq{color:var(--verde-claro)}
.tt-item.falta .tt-marca{border:2px solid rgba(255,255,255,.5)}
.tt-item.falta .tt-etq{background:rgba(188,211,116,.18);color:#e6efb9}
.tt-lista-pontos .tt-item{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.tt-lista-pontos .tt-item::before{content:"";width:10px;height:10px;margin:6px 0 0 6px;border-radius:50%;background:var(--verde-claro)}
.tt-lista-pontos.tt-vazia .tt-item::before{background:rgba(255,255,255,.4)}

.tt-anote{padding:14px 18px;border-radius:var(--r-md);background:rgba(255,255,255,.07)}
.tt-anote summary{cursor:pointer;font-size:.9375rem;font-weight:700;color:#fff}
.tt-anote ul{display:grid;gap:6px;margin:14px 0 0;padding-left:20px;list-style:disc;font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.88)}

.tt-zap{width:100%;min-height:60px;font-size:1.0625rem}
.tt-zap svg{width:24px;height:24px}
.tt-fone{margin:0;text-align:center;font-size:.875rem;color:rgba(255,255,255,.78)}
.tt-fone a{font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px;font-variant-numeric:tabular-nums}
.tt-refazer{justify-self:center;padding:10px;border:0;background:none;color:rgba(255,255,255,.82);font:600 .875rem var(--fonte);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tt-refazer:hover{color:#fff}

/* ---------- rodape (abertura e resultado) ---------- */
.tt-rodape{padding-block:26px 40px;font-size:.8125rem;line-height:1.55;color:var(--tinta-suave)}
.tt-assina{margin:0 0 8px;font-weight:600;color:var(--azul-900)}
.tt-aviso{margin:0;max-width:64ch}
body[data-tela="pergunta"] .tt-rodape{display:none}

@media (prefers-reduced-motion:reduce){
  .tt-f,.tt-b{animation:none}
  .tt-progresso i,.tt-op{transition:none}
  .tt-op:hover{transform:none}
}
@media print{
  .tt-progresso,.tt-nav,.tt-zap,.tt-refazer{display:none!important}
}

/* ---------- captura (antes do resultado) ---------- */
.tt-form{display:grid;gap:18px;margin-top:28px}
.tt-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tt-campo-email,.tt-campo-phone{grid-column:1/-1}
.tt-campo label{display:block;margin:0 0 6px;font-size:.9375rem;font-weight:700;color:var(--azul-900)}
.tt-campo input[type=text],.tt-campo input[type=email],.tt-campo input[type=tel]{width:100%;min-height:56px;padding:14px 16px;border:2px solid var(--linha-forte);border-radius:var(--r-md);background:var(--branco);color:var(--tinta);font:500 1.0625rem var(--fonte);transition:border-color .15s}
.tt-campo input:hover{border-color:#b4c8c1}
.tt-campo input:focus-visible{outline:none;border-color:var(--azul-700);box-shadow:0 0 0 3px rgba(6,74,118,.15)}
.tt-campo input[aria-invalid="true"]{border-color:#b3261e}
.tt-campo input::placeholder{color:#7e919b}
.tt-dica-campo{margin:6px 0 0;font-size:.8125rem;color:var(--tinta-suave)}
.tt-erro{margin:6px 0 0;font-size:.875rem;font-weight:600;color:#b3261e}

/* consentimento: caixa grande (alvo de toque) e texto inteiro, sem letra miuda */
.tt-consent{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;padding:16px;border:1px solid var(--linha);border-radius:var(--r-md);background:var(--branco)}
.tt-consent input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--azul-800);cursor:pointer}
.tt-consent label{margin:0;font-size:.9375rem;font-weight:500;line-height:1.55;color:var(--tinta-media);cursor:pointer}
.tt-consent .tt-erro{grid-column:2}

.tt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tt-enviar{min-height:60px;font-size:1.0625rem}
.tt-enviar:disabled{opacity:.7;cursor:progress}
.tt-aviso-form{margin:0;padding:12px 14px;border-radius:var(--r-sm);background:#fdf3e1;color:#7a4b00;font-size:.9375rem}

/* faixa do resultado: confirma o envio do e-mail (ou avisa que falhou) */
.tt-envio{margin:0 0 18px;padding:14px 16px;border-radius:var(--r-md);font-size:.9375rem;line-height:1.55}
.tt-envio-ok{background:rgba(140,169,47,.14);color:var(--azul-900)}
.tt-envio-falhou{background:#fdf3e1;color:#7a4b00}

body[data-tela="captura"] .tt-rodape{display:none}
@media (max-width:520px){.tt-campos{grid-template-columns:1fr}}
/* na captura a barra de baixo NAO fica fixa: com o teclado do celular aberto
   ela subiria junto e cobriria o campo que a pessoa esta digitando */
body[data-tela="captura"] .tt-nav{position:static}