/* ==========================================================================
   Instituto UNA — Pré-inscrição TF-DBT
   Implementado a partir do Figma "LP Instituto Una (Copy)" (node 4:875).

   Tudo que é cor, raio, curva e escala vem dos tokens de styles.css. O Figma
   desta página traz uma paleta ligeiramente diferente (azul #2C2467, chumbo
   #313033); ela foi remapeada para a família do site — a diretriz da cliente
   é a matiz 230 do roxo #6b7fe3, e manter duas famílias de azul no mesmo site
   apareceria como sujeira.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Peças comuns da página
   -------------------------------------------------------------------------- */

/* Tag laranja — cabeçalho de quase toda dobra. */
.tf-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 8px 22px;
  border-radius: 60px;
  background: var(--g-pessego);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.tf-cabecalho { display: flex; flex-direction: column; gap: 20px; }
.tf-cabecalho--centro { align-items: center; text-align: center; }
.tf-cabecalho--centro .tf-tag { align-self: center; }

.tf-titulo {
  color: var(--c-tinta);
  font-size: clamp(1.75rem, 3.2vw, 2.8125rem);
  font-weight: 700;
  line-height: 1.13;
  text-wrap: balance;
}
.tf-titulo--esquerda { text-align: left; text-wrap: pretty; }

.tf-apoio {
  color: var(--c-texto);
  font-size: clamp(1.0625rem, 1.5vw, 1.5rem);
  line-height: 1.3;
}

/* Linha com selo de confirmação, usada no fim de duas dobras. */
.tf-linha-selo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--c-tinta);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
}
.tf-linha-selo img { flex: none; }
.tf-linha-selo--centro { justify-content: center; text-align: left; }

/* Variante do CTA com o gradiente profundo do design system. O botão pêssego
   continua sendo o CTA do site; aqui o desenho pede o roxo escuro, e ele já
   existe como token (--g-profundo), então não entra cor nova. */
.btn--profundo {
  background: var(--g-profundo);
  color: #fff;
}
.btn--profundo::before { background: var(--g-pessego); }
.btn--profundo:hover,
.btn--profundo:focus-visible { color: var(--c-tinta); }
/* O ícone acompanha o texto: branco sobre o roxo, escuro quando o botão vira
   pêssego no hover — o inverso da regra geral do `.btn`. */
.btn--profundo img { filter: brightness(0) invert(1); }
.btn--profundo:hover img,
.btn--profundo:focus-visible img { filter: none; }

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.tf-hero {
  position: relative;
  padding-top: 101px;          /* altura do cabeçalho no Figma */
  /* A arte da cena não é transparente do lado esquerdo: o esmaecimento foi
     achatado contra um branco #f9f9f9 dentro do próprio arquivo. O fundo da
     dobra precisa ser exatamente esse tom, senão a borda do arquivo aparece
     como um retângulo mais claro atrás do texto. Medido na arte entregue:
     54 mil pixels em #f9f9f9, de longe o tom dominante. */
  background-color: #f9f9f9;
}

/* O cabeçalho do site é translúcido sobre #f6f6f9, o cinza geral das outras
   páginas. Sobre a hero em #f9f9f9 isso desenhava uma faixa mais escura nos
   primeiros 101px, com a borda marcando a emenda. Esta folha só carrega
   aqui, então o ajuste não alcança o resto do site. */
.cabecalho {
  background: rgba(249, 249, 249, .92);
  border-bottom-color: transparent;
}

/* O palco é o quadro de 1920 × 867 do Figma. `container-type: inline-size`
   transforma a largura dele na unidade de medida de tudo que está dentro:
   `1cqi` = 1% do palco, e `--u` é 1px do desenho. Assim a dobra inteira é uma
   redução proporcional do Figma, em vez de um amontoado de clamps que se
   desencontram quando a janela muda. */
.tf-hero__palco {
  container-type: inline-size;
  position: relative;
  width: min(100%, 1920px);
  margin-inline: auto;
  aspect-ratio: 1920 / 867;
}
.tf-hero__palco > * { --u: 0.0520833cqi; }

/* A cena recorta: o retrato sangra pela base da dobra, como no desenho, mas a
   ficha do Bohus precisa escapar para baixo — por isso ela fica fora daqui. */
.tf-hero__cena { position: absolute; inset: 0; overflow: hidden; }

/* A arte é 1912 × 867 — a proporção do palco (1920 × 867). Por isso vai
   `100% 100%`: preenche a dobra exatamente como foi desenhada, sem corte e
   sem sobra. `cover` também serviria, mas voltaria a ampliar quando a janela
   fugir da proporção, e foi assim que a bolota apareceu cropada e o rosto
   maior que a headline. */
.tf-hero__arte {
  position: absolute;
  inset: 0;
  background: no-repeat center / 100% 100% url("../img/tfdbt-hero-bg.webp");
}

/* Figma: x 311, y 103 — o mesmo eixo da coluna de 1280 centrada no quadro. */
.tf-hero__texto {
  position: absolute;
  left: 16.2%;
  top: 11.88%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 34.4%;
}

.tf-hero__sobretitulo {
  color: var(--c-tinta);
  font-size: calc(30 * var(--u));
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.tf-hero__sigla {
  margin-top: calc(4 * var(--u));
  background: linear-gradient(90deg, #f6af83 0%, #eb834b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: calc(196.536 * var(--u));
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .86;
  /* A sigla é a peça mais larga da coluna: sem isto ela quebra em duas linhas
     assim que a tela fica um fio mais estreita que o quadro do Figma. */
  white-space: nowrap;
}

/* As quebras que a cliente marcou valem só no palco do desktop, onde a coluna
   de texto tem largura fixa. Empilhado, o texto se vira sozinho. */
.tf-quebra { display: none; }
@media (min-width: 1101px) { .tf-quebra { display: inline; } }

.tf-hero__titulo {
  margin-top: calc(14 * var(--u));
  color: var(--c-tinta);
  font-size: calc(41 * var(--u));
  font-weight: 500;
  line-height: 1.06;
}
.tf-hero__titulo strong { font-weight: 800; }

.tf-hero__apoio {
  margin-top: calc(20 * var(--u));
  color: var(--c-tinta);
  font-size: calc(24 * var(--u));
  font-weight: 800;
  line-height: 1.3;
}

.tf-hero__acoes {
  display: flex;
  gap: calc(15 * var(--u));
  margin-top: calc(40 * var(--u));
}
.tf-hero__acoes .btn {
  padding: calc(15 * var(--u)) calc(30 * var(--u));
  border-radius: 200px;
  font-size: calc(22 * var(--u));
  white-space: nowrap;
}
.tf-hero__acoes .btn--contorno {
  gap: calc(12 * var(--u));
  padding-right: calc(24 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 600;
}
.tf-hero__acoes .btn--contorno img { width: calc(18 * var(--u)); height: auto; }

.tf-ficha-rapida {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin: calc(40 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.tf-ficha-rapida li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: var(--c-tinta);
  font-size: calc(17 * var(--u));
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.1;
  text-transform: uppercase;
}
.tf-ficha-rapida img {
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

/* Figma: 460 × 490 em x 1391, y 556 do quadro — desce por cima da faixa de
   realização, e por isso fica fora do recorte da cena. */
.tf-cartao-bohus {
  position: absolute;
  left: 72.45%;
  top: 64.1%;
  z-index: 3;
  width: 23.96%;
  padding: calc(36 * var(--u));
  border-radius: calc(28 * var(--u));
  /* Figma: vidro — branco a 93% com um véu lilás na diagonal e desfoque do que
     passa por trás. */
  background:
    linear-gradient(119.7deg, rgba(201,188,245,.342) 8.4%, rgba(201,195,234,0) 88.3%),
    rgba(249, 249, 249, .93);
  -webkit-backdrop-filter: blur(5.7px);
  backdrop-filter: blur(5.7px);
}
.tf-cartao-bohus__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}
.tf-cartao-bohus__topo img { flex: none; width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.tf-cartao-bohus__nome {
  color: var(--c-tinta);
  font-size: calc(25 * var(--u));
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.tf-cartao-bohus__lista {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  margin: calc(28 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.tf-cartao-bohus__lista li {
  color: var(--c-tinta);
  font-size: calc(18 * var(--u));
  line-height: 1.35;
}
.tf-cartao-bohus__lista li + li { padding-top: calc(20 * var(--u)); border-top: 1px solid rgba(49, 48, 51, .18); }
.tf-cartao-bohus__lista strong { font-weight: 800; }

/* --------------------------------------------------------------------------
   3. Realização — as marcas do site em branco sobre o azul
   -------------------------------------------------------------------------- */
/* Figma: faixa de 254 de altura, rótulo em y 55 e marcas em y 104. A ficha do
   Bohus desce por cima do canto direito — por isso a grade de marcas para em
   1124, como no desenho, em vez de ocupar os 1280 da coluna. */
.tf-realizacao {
  background: linear-gradient(90deg, #241f52 0%, #3b3a8f 100%);
  color: #fff;
}
/* O contêiner de medida é o palco (travado em 1920), não a seção: a seção
   sangra na largura da janela, e `cqi` contado nela deixava as marcas 20%
   maiores que o desenho. Por isso o recuo mora no filho, não aqui. */
.tf-realizacao__palco {
  container-type: inline-size;
  width: min(100%, 1920px);
  margin-inline: auto;
}
.tf-realizacao__conteudo {
  --u: 0.0520833cqi;
  padding: calc(55 * var(--u)) calc(321 * var(--u)) calc(48 * var(--u));
}
.tf-realizacao__titulo {
  margin-bottom: calc(32 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Vãos medidos no Figma: 12 entre grupo e divisória, 64 entre as marcas da
   coalizão. Com vãos maiores a fila avançava para baixo da ficha do Bohus. */
.tf-marcas { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.tf-marcas__grupo { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.tf-marcas__rotulo {
  color: rgba(255,255,255,.78);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.tf-marcas__fila { display: flex; align-items: center; gap: calc(64 * var(--u)); min-height: calc(67 * var(--u)); }
.tf-marcas__fila img {
  width: calc(var(--larg) * var(--u));
  height: calc(var(--alt) * var(--u));
}
.tf-marcas__fila img[width="191"] { --larg: 191; --alt: 47; }
.tf-marcas__fila img[width="72"]  { --larg: 72;  --alt: 67; }
.tf-marcas__fila img[width="136"] { --larg: 136; --alt: 36; }
.tf-marcas__fila img[width="54"]  { --larg: 54;  --alt: 67; }
.tf-marcas__fila img[width="132"] { --larg: 132; --alt: 38; }
.tf-marcas__fila img[width="67"]  { --larg: 67;  --alt: 63; }
.tf-marcas__divisoria {
  flex: none;
  width: 1px;
  align-self: stretch;
  min-height: calc(102 * var(--u));
  background: rgba(255,255,255,.22);
}
/* As marcas do acervo são escuras sobre transparente; no azul elas precisam
   virar silhueta branca, que é como o Figma as mostra. */
.tf-marcas__fila img { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   4. Faixa laranja — carrossel infinito
   O trilho tem duas metades idênticas; andar -50% devolve a primeira metade
   exatamente onde a segunda estava, então o laço não tem emenda.
   -------------------------------------------------------------------------- */
.tf-faixa {
  overflow: hidden;
  padding: 19px 0;
  background: var(--g-pessego);
}
.tf-faixa__trilho {
  display: flex;
  width: max-content;
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.375rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  opacity: .85;
  white-space: nowrap;
  /* A duração acompanha o comprimento do trilho: com dez repetições por metade
     (necessárias para cada metade cobrir a tela e o laço não abrir uma fresta),
     44s deixaria o texto correndo rápido demais. */
  animation: tf-faixa-corre 150s linear infinite;
}
@keyframes tf-faixa-corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   5. Big numbers
   -------------------------------------------------------------------------- */
.tf-numeros { padding: var(--espaco-dobra) 0 0; }
.tf-numeros__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tf-numero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 189px;
  padding: 32px 28px;
  border: 1px solid #a9bdf7;
  border-radius: var(--raio);
  background: var(--brilho-a), var(--brilho-b), var(--c-fundo-lilas);
}
.tf-numero__valor {
  background: linear-gradient(153deg, #8e88c5 0%, #7c6fda 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.3;
}
.tf-numero__legenda { color: var(--c-texto); font-size: 18px; line-height: 1.3; }
.tf-numero__legenda strong { color: var(--c-tinta); font-weight: 800; }

/* --------------------------------------------------------------------------
   6. Para quem é
   -------------------------------------------------------------------------- */
.tf-publico { padding: var(--espaco-dobra) 0; }
.tf-publico .tf-cabecalho { margin-bottom: 60px; }

.tf-perfis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.tf-perfil { display: flex; flex-direction: column; gap: 14px; }
.tf-perfil__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-tinta);
  border-radius: 12px;
}
.tf-perfil h3 { color: var(--c-tinta); font-size: 22px; font-weight: 700; line-height: 1.3; }
.tf-perfil p { color: var(--c-texto); font-size: 20px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   7. Pré-requisitos
   -------------------------------------------------------------------------- */
.tf-requisitos { padding: 20px 0 80px; }
.tf-requisitos .tf-apoio { max-width: 1152px; }

.tf-requisito {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 20px;
  border: 1px solid rgba(36, 31, 82, .3);
  border-radius: 20px;
  background: #fff;
  color: var(--c-tinta);
  font-size: clamp(1.0625rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}
.tf-requisito img { flex: none; }

/* --------------------------------------------------------------------------
   8. Curso Fundamentos da DBT — tarja roxa
   -------------------------------------------------------------------------- */
.tf-gratuito { padding: 0 0 var(--espaco-dobra); }
.tf-gratuito__inner {
  display: grid;
  grid-template-columns: minmax(0, 502fr) minmax(0, 598fr);
  gap: 60px;
  align-items: center;
  padding: 50px 60px;
  border-radius: 20px;
  /* Figma: o mesmo azul profundo do box do ingresso, abrindo para o roxo. */
  background: linear-gradient(90deg, #241f52 0%, #5b4fd0 100%);
  color: #fff;
}
.tf-gratuito__chamada { display: flex; flex-direction: column; gap: 22px; }
.tf-gratuito__rotulo { font-size: 20px; font-weight: 700; line-height: 1.3; }
.tf-gratuito__titulo {
  font-size: clamp(1.375rem, 2.4vw, 2.25rem);
  font-weight: 400;
  line-height: 1.25;
}
.tf-gratuito__titulo strong { font-weight: 700; }
.tf-gratuito__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.tf-gratuito__corpo p { font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.45; }
.tf-gratuito__corpo p strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   9. A mente que molda o futuro
   -------------------------------------------------------------------------- */
.tf-mente { padding: 0 0 var(--espaco-dobra); }
.tf-mente__inner {
  display: grid;
  grid-template-columns: minmax(0, 570px) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.tf-mente__foto {
  width: 100%;
  height: auto;
  border-radius: 19px;
}
.tf-mente__texto { display: flex; flex-direction: column; gap: 20px; }
.tf-mente__titulo {
  color: var(--c-tinta);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
}
.tf-mente__titulo strong { font-weight: 800; }
.tf-mente__nome {
  background: linear-gradient(170deg, #888ec5 0%, #5d5d85 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
}
.tf-mente__texto p { color: var(--c-texto); font-size: clamp(1rem, 1.5vw, 1.5rem); line-height: 1.3; }
.tf-mente__texto p strong { color: var(--c-tinta); font-weight: 800; }
.tf-mente__destaque { color: var(--c-tinta) !important; font-weight: 800; }
.tf-mente__texto .btn { align-self: flex-start; margin-top: 10px; }

/* --------------------------------------------------------------------------
   10. O que é a TF-DBT — tarja rosa
   -------------------------------------------------------------------------- */
.tf-definicao { padding: 0 0 var(--espaco-dobra); }
.tf-definicao__caixa {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  border-radius: 20px;
  /* Figma: lavanda no canto superior esquerdo, rosa no meio, lavanda de novo
     à direita. */
  background: linear-gradient(118deg, #e2e0f7 0%, #f5e3e7 52%, #ece7fa 100%);
}
.tf-definicao__titulo {
  color: var(--c-tinta);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
}
.tf-definicao__texto { display: flex; flex-direction: column; gap: 18px; }
.tf-definicao__texto p {
  color: var(--c-texto);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   11. Metodologia — os dois momentos
   -------------------------------------------------------------------------- */
.tf-metodologia { padding: 0 0 var(--espaco-dobra); }
.tf-metodologia__topo {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 42px;
}
.tf-metodologia__topo .tf-titulo { flex: 1 1 520px; max-width: 660px; }
.tf-metodologia__sigla {
  background: var(--g-pessego);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.tf-metodologia__fotos {
  display: grid;
  grid-template-columns: minmax(0, 538fr) minmax(0, 727fr);
  gap: 20px;
}
.tf-metodologia__fotos img {
  width: 100%;
  height: 436px;
  border-radius: 14px;
  object-fit: cover;
}

.tf-metodologia__corpo { display: flex; flex-direction: column; gap: 20px; margin-top: 42px; }
.tf-metodologia__corpo p { color: var(--c-texto); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.45; }
.tf-metodologia__corpo strong { color: var(--c-tinta); font-weight: 700; }
.tf-metodologia__fecho strong { font-weight: 800; }

.tf-momentos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 56px;
}
.tf-momento {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-borda);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.tf-momento__rotulo {
  padding: 24px 36px;
  background: var(--g-pessego);
  color: #fff;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.tf-momento__corpo { padding: 30px 36px 36px; }
.tf-momento__data { color: var(--c-tinta); font-size: clamp(1.125rem, 1.8vw, 1.5rem); font-weight: 700; line-height: 1.3; }
.tf-momento__formato { margin-top: 10px; color: var(--c-texto); font-size: 16px; line-height: 1.4; }
.tf-momento__formato strong { color: var(--c-tinta); font-weight: 700; }
.tf-momento__divisoria { height: 1px; margin: 22px 0; border: 0; background: var(--c-borda); }
.tf-momento__subtitulo { color: var(--c-tinta); font-size: 17px; font-weight: 700; line-height: 1.3; }
.tf-momento__lista { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.tf-momento__lista li {
  position: relative;
  padding-left: 36px;
  color: var(--c-texto);
  font-size: 17px;
  line-height: 1.3;
}
/* O check entra como máscara, não como <img>: são 14 cópias do mesmo desenho
   por dobra, e a máscara ainda deixa a cor vir do CSS — o mesmo arquivo serve
   o check escuro daqui e o branco do box do ingresso. */
.tf-momento__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--c-tinta);
  -webkit-mask: no-repeat center/contain url("../icons/tf-check.svg");
  mask: no-repeat center/contain url("../icons/tf-check.svg");
}

.tf-metodologia__fecho {
  max-width: 925px;
  margin: 56px auto 0;
  color: var(--c-tinta);
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   12. Conteúdo programático
   -------------------------------------------------------------------------- */
.tf-conteudo { padding: 0 0 var(--espaco-dobra); }
.tf-conteudo .tf-cabecalho { margin-bottom: 60px; }

.tf-modulos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 60px;
  align-items: start;
}
.tf-modulo { display: flex; flex-direction: column; gap: 20px; }
.tf-modulo__cabecalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-borda);
  color: var(--c-tinta);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}
.tf-modulo__selo {
  flex: none;
  padding: 5px 14px;
  border-radius: 60px;
  background: var(--c-violeta);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.tf-modulo__dias { margin: 0; padding: 0; list-style: none; }
.tf-modulo__dias li {
  padding: 24px 0;
  border-bottom: 1px solid var(--c-borda);
  color: var(--c-tinta);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

/* Sanfona dos dias. O <summary> mantém exatamente o peso e o tamanho que o
   <li> tinha antes, para a dobra não mudar de aparência quando tudo está
   fechado — só ganha a seta e a área de clique. */
.tf-dia { border-bottom: 1px solid var(--c-borda); }
.tf-dia > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  color: var(--c-tinta);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
/* Safari/iOS desenham um triângulo próprio fora do fluxo do flex. */
.tf-dia > summary::-webkit-details-marker { display: none; }
.tf-dia > summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: 7px;
  border-right: 2px solid var(--c-violeta);
  border-bottom: 2px solid var(--c-violeta);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .25s ease;
}
.tf-dia[open] > summary::after { transform: rotate(-135deg); }
.tf-dia > summary:focus-visible {
  outline: 2px solid var(--c-violeta);
  outline-offset: 4px;
  border-radius: 4px;
}
.tf-dia > p {
  margin: 0;
  padding: 0 34px 24px 0;
  color: var(--c-texto);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

/* Nota do local, abaixo da linha da Parte 02 na agenda do ingresso. */
.tf-agenda__nota {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  /* a lista põe tudo em caixa-alta; a nota fica em caixa normal para se
     distinguir da linha principal, como no layout aprovado */
  text-transform: none;
  letter-spacing: 0;
  opacity: .72;
}

/* --------------------------------------------------------------------------
   13. Oferta — chamada + box do ingresso
   -------------------------------------------------------------------------- */
.tf-oferta {
  padding: var(--espaco-dobra) 0;
  background: linear-gradient(135deg, #e7e5fa 0%, #efeafb 45%, #e2e6fa 100%);
}
.tf-oferta__inner {
  display: grid;
  grid-template-columns: minmax(0, 651fr) minmax(0, 739fr);
  gap: 96px;
  align-items: start;
}

.tf-oferta__chamada { display: flex; flex-direction: column; gap: 22px; }
.tf-oferta__titulo {
  color: var(--c-tinta);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
.tf-oferta__apoio,
.tf-oferta__frase { color: var(--c-texto); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.45; }
.tf-oferta__frase { color: var(--c-tinta); font-weight: 600; }

.tf-agenda { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.tf-agenda li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--c-tinta);
  font-size: clamp(.9375rem, 1.2vw, 1.125rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tf-agenda img { flex: none; }
/* Os dois formatos ficam recuados sob o título da agenda, como no desenho. */
.tf-agenda__titulo + li,
.tf-agenda__titulo + li + li { padding-left: 40px; }
.tf-agenda--secundaria { margin-top: 24px; }

.tf-cupom {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding: 30px;
  border-radius: 16px;
  background: rgba(255,255,255,.45);
}
.tf-cupom__selo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  /* Gradiente no lugar do branco sólido. Ângulo e paradas foram ajustados
     contra oito pontos medidos na arte aprovada — erro médio de 4 em 255,
     abaixo do que o olho separa. Em CSS e não em PNG: fica nítido em tela
     retina e não custa uma requisição a mais. */
  background: linear-gradient(104deg, #c2cff9 0%, #f9f8fe 50%, #fbe5ea 100%);
}
.tf-cupom p { color: var(--c-tinta); font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.4; }
.tf-cupom p strong { font-weight: 800; }

.tf-ingresso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 56px;
  border-radius: 24px;
  background: var(--g-profundo);
  color: #fff;
}
.tf-ingresso__titulo { font-size: clamp(1.75rem, 3vw, 2.625rem); font-weight: 500; line-height: 1.2; }
.tf-ingresso__titulo strong { font-weight: 800; }
.tf-ingresso__apoio { font-size: clamp(.9375rem, 1.15vw, 1.125rem); line-height: 1.4; opacity: .88; }
.tf-ingresso__lista { width: 100%; margin: 0; padding: 0; list-style: none; }
.tf-ingresso__lista li {
  position: relative;
  padding: 16px 0 16px 38px;
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.4;
}
.tf-ingresso__lista li + li { border-top: 1px solid rgba(255,255,255,.18); }
.tf-ingresso__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 24px;
  height: 24px;
  background: #fff;
  -webkit-mask: no-repeat center/contain url("../icons/tf-check.svg");
  mask: no-repeat center/contain url("../icons/tf-check.svg");
}
.tf-ingresso__cta {
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   14. Suporte
   -------------------------------------------------------------------------- */
/* Figma: faixa lilás inteira, texto branco e uma onda decorativa saindo pelo
   canto superior direito. */
.tf-suporte {
  position: relative;
  overflow: hidden;
  padding: 116px 0 100px;
  background: linear-gradient(90deg, #bdb0d9 0%, #8d93d8 100%);
}
.tf-suporte::after {
  content: "";
  position: absolute;
  top: -240px;
  right: -70px;
  width: 891px;
  height: 903px;
  background: no-repeat center/contain url("../img/tf-onda-suporte.svg");
  pointer-events: none;
}
.tf-suporte .container { position: relative; z-index: 1; }
.tf-suporte__titulo {
  max-width: 880px;
  color: #fff;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
/* O CTA aqui não é o botão pêssego: o desenho usa uma pílula escura
   translúcida sobre o lilás. */
.tf-suporte__cta {
  margin-top: 32px;
  padding: 15px 30px;
  border-radius: 200px;
  background: rgba(36, 31, 82, .55);
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
}
.tf-suporte__cta::before { background: var(--c-tinta); }
.tf-suporte__cta:hover,
.tf-suporte__cta:focus-visible { color: #fff; }
.tf-suporte__cta img { filter: brightness(0) invert(1); }
.tf-suporte__cta:hover img,
.tf-suporte__cta:focus-visible img { filter: brightness(0) invert(1); }

/* --------------------------------------------------------------------------
   15. Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Abaixo do tablet o palco de 1920 deixa de fazer sentido: a dobra volta a
     ser fluxo normal, com a arte como atmosfera no topo e o retrato empilhado. */
  .tf-hero { padding-top: 80px; }
  /* Empilhado a ordem do desenho se inverte: quem chega primeiro é o texto,
     não o retrato. */
  .tf-hero__palco {
    container-type: normal;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    padding: 36px var(--gutter) 48px;
  }
  .tf-hero__texto { order: 1; }
  .tf-hero__cena { order: 2; }
  .tf-cartao-bohus { order: 3; }
  .tf-hero__palco > * { --u: 1px; }
  .tf-hero__cena { position: static; overflow: visible; }
  /* Empilhado, a arte desce como bloco próprio abaixo do texto, inteira e
     opaca. Sobrepor não serve mais: o esmaecimento do arquivo é horizontal,
     desenhado para o texto que fica à esquerda só no desktop. */
  /* A metade esquerda da arte é o vazio reservado ao texto no desktop. Inteira
     (`contain`), ela gastava a largura toda nesse vazio e o retrato ficava
     minúsculo. Empilhado o quadro fica mais alto e `cover` corta o vazio pela
     esquerda; o deslocamento horizontal centra o rosto no que sobra. */
  .tf-hero__arte {
    position: static;
    width: 100%;
    /* Mesmo teto do cartão do Bohus logo abaixo: sem ele, o quadro mais alto
       vira um bloco de 560px de altura já no tablet. */
    max-width: 460px;
    margin: 30px auto 0;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: 84% center;
    opacity: 1;
  }
  .tf-hero__texto {
    position: static;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
  .tf-hero__sobretitulo { font-size: 18px; }
  .tf-hero__sigla { font-size: clamp(3.25rem, 11vw, 5.5rem); }
  .tf-hero__titulo { font-size: clamp(1.5rem, 4.4vw, 2.25rem); }
  .tf-hero__apoio { font-size: clamp(1rem, 2.4vw, 1.25rem); }
  .tf-hero__acoes { flex-wrap: wrap; }
  .tf-hero__acoes .btn { padding: 15px 30px; font-size: 17px; }
  .tf-hero__acoes .btn--contorno { padding-right: 24px; font-size: 16px; }
  .tf-ficha-rapida li { align-items: flex-start; font-size: 14px; }
  .tf-cartao-bohus {
    position: static;
    width: 100%;
    max-width: 460px;
    margin: 36px auto -120px;
    padding: 30px;
  }
  .tf-cartao-bohus__nome { font-size: 20px; }
  .tf-cartao-bohus__lista li { font-size: 16px; }

  /* Empilhado a faixa volta a px: o quadro de 1920 encolheria as marcas a um
     tamanho ilegível no celular. */
  .tf-realizacao__palco { container-type: normal; width: 100%; }
  .tf-realizacao__conteudo { --u: 1px; padding: 150px var(--gutter) 48px; }
  .tf-marcas { flex-wrap: wrap; gap: 28px; }
  .tf-marcas__divisoria { display: none; }
  .tf-marcas__fila { flex-wrap: wrap; gap: 22px; }

  .tf-numeros__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-perfis { grid-template-columns: 1fr; gap: 32px; }
  .tf-gratuito__inner { grid-template-columns: 1fr; gap: 30px; padding: 36px; }
  .tf-mente__inner { grid-template-columns: 1fr; gap: 36px; }
  .tf-mente__foto { max-width: 460px; }
  .tf-metodologia__fotos { grid-template-columns: 1fr; }
  .tf-metodologia__fotos img { height: 300px; }
  .tf-momentos { grid-template-columns: 1fr; }
  .tf-modulos { grid-template-columns: 1fr; gap: 32px; }
  .tf-oferta__inner { grid-template-columns: 1fr; gap: 48px; }
  .tf-ingresso { padding: 36px; }
}

/* --------------------------------------------------------------------------
   16. Celular
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .tf-hero { padding-top: 70px; }
  .tf-hero__arte { margin-top: 24px; }
  .tf-hero__acoes { flex-direction: column; align-items: stretch; width: 100%; }
  .tf-hero__acoes .btn { justify-content: center; }
  .tf-ficha-rapida li { letter-spacing: .04em; }

  .tf-cartao-bohus { padding: 26px; }

  .tf-realizacao__conteudo { padding-top: 130px; }
  .tf-numeros__grade { grid-template-columns: 1fr; }
  .tf-numero { min-height: 0; padding: 26px 22px; }

  .tf-publico, .tf-requisitos, .tf-gratuito, .tf-mente, .tf-definicao,
  .tf-metodologia, .tf-conteudo { padding-bottom: 56px; }
  .tf-publico { padding-top: 56px; }

  .tf-perfil p { font-size: 17px; }
  .tf-definicao__caixa { padding: 26px; }
  .tf-momento__corpo { padding: 24px 22px 28px; }
  .tf-momento__rotulo { padding: 18px 22px; }
  .tf-modulo__dias li { font-size: 17px; padding: 18px 0; }
  .tf-dia > summary { font-size: 17px; padding: 18px 0; gap: 12px; }
  .tf-dia > summary::after { width: 9px; height: 9px; margin-top: 5px; }
  .tf-dia > p { padding: 0 0 18px; font-size: 16px; }

  .tf-oferta { padding: var(--espaco-dobra) 0; }
  .tf-agenda__titulo + li,
  .tf-agenda__titulo + li + li { padding-left: 0; }
  .tf-cupom { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .tf-ingresso { padding: 28px 24px; }
  .tf-suporte { padding: var(--espaco-dobra) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tf-faixa__trilho { animation: none; }
}