/* Página /taf: preparação para o teste de aptidão física. */

.tf-hero .hero-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.tf-hero .hero-sub { max-width: 52ch; }
.tf-sec { scroll-margin-top: 84px; }
.tf-intro { color: var(--texto-2); font-size: 18px; max-width: 60ch; margin-bottom: 28px; margin-top: -12px; }

/* duas colunas: texto + destaque */
.tf-duas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: start; }
.tf-texto { display: grid; gap: 16px; }
.tf-texto p { color: var(--texto-2); font-size: 18px; max-width: 56ch; }
.tf-texto strong { color: var(--texto); }
.tf-destaque {
  display: grid; gap: 16px; justify-items: start; padding: 32px; border-radius: var(--raio);
  background: var(--cartao); border: 1px solid var(--linha);
  background-image: linear-gradient(120deg, rgba(8, 253, 2, .08), transparent 60%);
}
.tf-destaque > .ph { font-size: 40px; color: var(--verde); }
.tf-destaque p { font: 800 clamp(24px, 2.4vw, 30px)/1.1 var(--display); text-transform: uppercase; }

/* cartões de prova */
.tf-provas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tf-prova { background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.tf-prova > .ph { font-size: 34px; color: var(--verde); }
.tf-prova h3 { font: 800 24px/1.05 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.tf-prova p { color: var(--texto-2); font-size: 15px; }
.tf-prova p span { display: block; font: 700 12px/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--verde); margin-bottom: 6px; }
.tf-aviso {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 20px 22px; border-radius: 16px;
  border: 1px solid rgba(255, 196, 0, .4); background: rgba(255, 196, 0, .06);
}
.tf-aviso > .ph { font-size: 28px; color: #ffd34d; flex: none; }
.tf-aviso p { color: var(--texto-2); font-size: 17px; }
.tf-aviso strong { color: var(--texto); }

/* passos */
.tf-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: none; }
.tf-passo { position: relative; background: var(--fundo-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.tf-passo > .ph { font-size: 32px; color: var(--verde); }
.tf-passo h3 { font: 800 24px/1.05 var(--display); text-transform: uppercase; }
.tf-passo p { color: var(--texto-2); font-size: 15px; }
.tf-num { position: absolute; top: 18px; right: 20px; font: italic 800 34px/1 var(--display); color: var(--linha); }
.tf-nota { margin-top: 24px; color: var(--texto-3); font-size: 15px; }

/* simulador */
.dica { color: var(--texto-3); font-size: 14px; }
.tf-sim-nota { color: var(--texto-2); font-size: 15px; margin-top: 18px; }
#tafSim .calc-saida { min-height: 0; }
#tafSim .calc-vazio { min-height: 220px; }
#tafSim .prev-grade { grid-template-columns: repeat(2, 1fr); }
#tafSim .prev { min-width: 0; }
#tafSim .prev strong { overflow-wrap: anywhere; }
#tafSim input[type=number]::-webkit-outer-spin-button, #tafSim input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#tafSim input[type=number] { -moz-appearance: textfield; font: 800 30px/1 var(--display); }

/* formulário */
#quero-treinar .form-lado p { margin-bottom: 18px; }
input[type=date] { min-height: 50px; color-scheme: dark; }

/* depoimentos (só existem quando o painel tiver itens) */
.tf-deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.tf-dep { margin: 0; background: var(--cartao); border-radius: var(--raio); padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tf-dep-foto { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; border: 2px solid var(--verde); }
.tf-dep blockquote { margin: 0; font-size: 17px; line-height: 1.5; flex: 1; }
.tf-dep figcaption { font-size: 14px; color: var(--texto-3); }
.tf-dep figcaption strong { color: var(--verde); font-weight: 600; }

/* fecho */
.tf-fim .titulo { max-width: 18ch; }
.tf-fim .tf-intro { margin-top: 0; }

@media (max-width: 1100px) {
  .tf-provas { grid-template-columns: repeat(2, 1fr); }
  .tf-passos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .tf-duas { grid-template-columns: 1fr; gap: 28px; }
  .tf-sec { scroll-margin-top: 70px; }
  .tf-hero .hero-ctas .btn { width: 100%; white-space: normal; text-align: center; justify-content: center; }
  .tf-fim .btn { width: 100%; white-space: normal; justify-content: center; text-align: center; }
  .tf-destaque .btn { width: 100%; white-space: normal; justify-content: center; }
}
@media (max-width: 560px) {
  .tf-provas, .tf-passos { grid-template-columns: 1fr; }
  #tafSim .prev-grade { grid-template-columns: 1fr; }
  .tf-aviso { flex-direction: column; gap: 8px; }
}