/* ==========================================================================
   LAVYTIER — email.css

   Página do E-mail Profissional. Herda a gramática do Vanguard: faixas
   alternando preto e branco, célula cercada por fios, número grande e
   sozinho. O que muda é a escala — esta página é objetiva e tem metade das
   seções.

   O instrumento do hero é a caixa que recebe: um campo circular em canvas,
   irmão do núcleo protegido do Vanguard e com a mesma geometria — quadrado,
   46% da largura, centrado na altura do hero e mascarado em diagonal para
   nascer do fundo em vez de terminar numa borda. É a máscara que deixa a
   peça sobrepor o texto sem colidir com ele.

   Regras da casa: tokens do core; reset em :where() para não competir com
   regra de componente; anima-se transform e opacity e nada mais; conteúdo
   nasce visível; o canvas para durante a rolagem e fora da tela (email.js).
   ========================================================================== */

.ttn-root {
  --e-tx:   #FFFFFF;
  --e-soft: #A0A0A0;
  --e-mute: #646464;
  --e-ln:   rgba(255, 255, 255, .12);

  font-family: var(--font);
  color: var(--graphite);
  background: var(--paper);
  line-height: 1.55;
}

.ttn-root > section {
  position: relative;
  contain: layout paint style;
  padding-block: 132px;
}
@media (max-width: 1024px) { .ttn-root > section { padding-block: 88px; } }
@media (max-width: 768px)  { .ttn-root > section { padding-block: 64px; } }

/* Reset em :where() — especificidade zero, para nunca vencer a regra de
   componente. É a armadilha nº 1 deste projeto. */
.ttn-root :where(h1, h2, h3) { margin: 0; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.ttn-root :where(p)          { margin: 0; max-width: 62ch; }
.ttn-root :where(ul, ol)     { margin: 0; padding: 0; list-style: none; }
.ttn-root :where(a)          { text-decoration: none; color: inherit; }

.ttn-wrap {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}

.ttn-eyebrow {
  display: block; margin-bottom: 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate);
}

/* ==========================================================================
   BOTÕES — mesma peça do Vanguard, prefixo próprio.
   ========================================================================== */

.ttn-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }

.ttn-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 26px;
  border: 1px solid transparent; border-radius: var(--r-2);
  font: 600 13.5px/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: transform var(--t-tap) var(--ease),
              background-color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease),
              color var(--t-state) var(--ease);
}
.ttn-btn:hover { transform: translateY(-2px); }
.ttn-btn-claro { background: var(--paper); color: var(--ink); }
.ttn-btn-claro:hover { background: var(--cloud); }

/* Sobre preto o contorno inverte — escrito por contexto, para a marcação
   não precisar saber em que fundo está. */
.ttn-hero .ttn-btn-linha,
.ttn-investimento .ttn-btn-linha,
.ttn-fecho .ttn-btn-linha { color: var(--e-tx); border-color: rgba(255, 255, 255, .34); }
.ttn-hero .ttn-btn-linha:hover,
.ttn-investimento .ttn-btn-linha:hover,
.ttn-fecho .ttn-btn-linha:hover { border-color: var(--e-tx); background: rgba(255, 255, 255, .08); }

.ttn-micro { margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--slate); }

/* ==========================================================================
   HERO
   Texto à esquerda, instrumento à direita — a mesma arquitetura do Vanguard,
   do Orys e do Studio.
   ========================================================================== */

.ttn-root .ttn-hero {
  display: flex; align-items: center;
  min-height: 92svh;
  padding: calc(var(--nav-h) + 104px) 0 104px;
  overflow: hidden;
  background: var(--ink); color: var(--e-tx);
}

/* Mesma caixa do .ttn-wrap — largura do shell, centrada, com o recuo lateral
   da casa. O espaço do instrumento sai de um padding à direita, e não de uma
   margem calculada com 100vw: 100vw inclui a barra de rolagem e o wrap não,
   então centrar de dois jeitos nunca coincide. */
.ttn-hero-texto {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: max(var(--gutter), 42%);
}

.ttn-hero .ttn-eyebrow { color: var(--e-mute); }
.ttn-hero h1 {
  font-size: clamp(34px, 4.9vw, 60px); line-height: 1.04;
  letter-spacing: -.042em; color: var(--e-tx); text-wrap: balance;
}
/* A segunda frase recua em tom, não em corpo nem em família. */
.ttn-hero h1 em { display: block; margin-top: .14em; font-style: normal; color: var(--e-mute); }

.ttn-lead {
  margin-top: 32px; max-width: 52ch;
  font-size: 16.5px; line-height: 1.78; font-weight: 300; color: var(--e-soft);
  text-wrap: pretty;
}
.ttn-hero .ttn-micro { color: rgba(255, 255, 255, .48); }

/* O instrumento. Máscara em gradiente para ele nascer do fundo em vez de
   terminar numa borda — é ela que permite a peça sobrepor a coluna de texto
   sem disputar com a leitura. Medido no Vanguard: a arte invade 105px do
   texto e ninguém percebe, porque ali ela já é transparente.

   O instrumento fecha na mesma borda direita do conteúdo, a coluna que todas
   as seções usam. A largura sai do menor entre a altura útil e a largura
   livre à direita, para o círculo nunca estourar verticalmente. */
.ttn-hero-art {
  position: absolute; z-index: 0;
  right: max(calc((100% - var(--shell)) / 2 + var(--gutter)), var(--gutter));
  top: 50%; transform: translateY(-50%);
  width: min(76svh, 46%); max-width: 720px;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
}
.ttn-hero-art canvas { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   RÉGUA DE FATOS
   Quatro números em células cercadas por fios — a mesma moldura da régua do
   Vanguard. É o único lugar da página onde eles aparecem.
   ========================================================================== */

.ttn-regua {
  background: var(--ink); color: var(--e-tx);
  border-top: 1px solid var(--e-ln);
}
/* minmax(0, 1fr) e não 1fr: o piso de `1fr` é o conteúdo mínimo, e a palavra
   "Ilimitados" em 34px empurrava a coluna dela para 185px contra 150px da
   vizinha. Medido em 375px — a grade nascia torta. */
.ttn-regua-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .ttn-regua-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ttn-regua-item {
  padding: 34px 30px 34px 30px;
  border-left: 1px solid var(--e-ln);
}
.ttn-regua-item:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 860px) {
  .ttn-regua-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .ttn-regua-item:nth-child(1), .ttn-regua-item:nth-child(2) { border-bottom: 1px solid var(--e-ln); }
}
.ttn-regua-item b {
  display: block; margin-bottom: 10px;
  font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: -.045em;
  color: var(--e-tx); font-variant-numeric: tabular-nums;
}
.ttn-regua-item span {
  display: block; max-width: 26ch;
  font-size: 13px; line-height: 1.5; font-weight: 300; color: var(--e-soft);
}

/* Este bloco mora DEPOIS da regra que ele corrige, e não junto da grade lá em
   cima: mesma especificidade decide por ordem, e escrito antes ele nunca
   valia (armadilha nº 12). Com duas colunas a célula fica com 168px, e
   "Ilimitados" em 34px pede ~190 — ele pintava por cima da célula vizinha. */
@media (max-width: 860px) {
  .ttn-regua-item b { font-size: 26px; letter-spacing: -.04em; }
}

/* ==========================================================================
   O QUE ESTÁ INCLUSO — placas de especificação

   Quatorze itens em lista corrida é catálogo, não página. Em três placas,
   cada uma com suas células cercadas por fios, o conteúdo passa a ter
   construção — é a mesma linguagem do escopo do Vanguard.

   O numeral em marca d'água NÃO é ordem: os três grupos não são etapas, e
   numerá-los 01·02·03 inventaria uma sequência que não existe. Ele é a
   contagem de recursos do grupo — mesma peça no desenho, com informação
   verdadeira dentro.

   As três contagens são pares (6, 4, 4), o que faz a grade de duas colunas
   fechar sem célula órfã em nenhuma placa.
   ========================================================================== */

.ttn-escopo { background: var(--paper); }

.ttn-cabeca { max-width: 52ch; margin-bottom: clamp(48px, 5vw, 72px); }
.ttn-cabeca h2 {
  font-size: clamp(28px, 3.5vw, 46px); line-height: 1.12;
  letter-spacing: -.034em; text-wrap: balance;
}
.ttn-cabeca p {
  margin-top: 26px;
  font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--slate);
  text-wrap: pretty;
}


/* ---------- as quatro peças ----------
   Catorze itens com peso igual não deixam nada na memória — era o mesmo
   defeito do rodapé de quatro colunas. Quatro ganham tamanho e um desenho
   que MOSTRA o mecanismo; os outros dez descem para a régua abaixo, sem
   sumir. Quem vende seleção não entrega ficha técnica. */

.ttn-quatro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .ttn-quatro { grid-template-columns: 1fr; gap: 20px; } }

.ttn-peca {
  display: flex; flex-direction: column;
  border: 1px solid var(--cloud); border-radius: var(--r-4);
  overflow: hidden; background: var(--paper);
}
.ttn-peca:nth-child(2) { transition-delay: .07s; }
.ttn-peca:nth-child(3) { transition-delay: .14s; }
.ttn-peca:nth-child(4) { transition-delay: .21s; }

/* O desenho ocupa a metade de cima, sobre um papel levemente rebaixado — é
   o que separa a demonstração da leitura sem precisar de moldura interna. */
.ttn-desenho {
  border-bottom: 1px solid var(--cloud);
  background: #FAFAFA;
  padding: clamp(18px, 2vw, 26px);
}
.ttn-desenho svg { display: block; width: 100%; height: auto; }

.ttn-peca-txt { padding: clamp(24px, 2.4vw, 34px); }
.ttn-peca h3 {
  margin-bottom: 10px;
  font-size: clamp(19px, 1.8vw, 23px); line-height: 1.18; letter-spacing: -.03em;
}
.ttn-peca p { font-size: 14px; line-height: 1.7; font-weight: 300; color: var(--slate); }

/* ---------- a linguagem dos desenhos ----------
   Todos falam a mesma língua: traço de 1,5, tinta preta em opacidades, e
   nenhuma cor. O que se move são pontos — e só transform e opacity, como no
   resto do site. */
.ttn-d-rail  { stroke: rgba(0,0,0,.14); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.ttn-d-forte { stroke: rgba(0,0,0,.62); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.ttn-d-fina  { stroke: rgba(0,0,0,.24); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.ttn-d-caixa { stroke: rgba(0,0,0,.5);  stroke-width: 1.5; fill: none; }
.ttn-d-ponto { fill: rgba(0,0,0,.78); }
.ttn-d-fraco { fill: rgba(0,0,0,.28); }
.ttn-d-lab   { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; fill: rgba(0,0,0,.34); text-transform: uppercase; }

/* 1 · ida e volta — a mensagem sai, o aviso de leitura volta */
.ttn-a-ida   { animation: ttn-ida 7s var(--ease) infinite; }
.ttn-a-volta { animation: ttn-volta 7s var(--ease) infinite; }
/* `scale` num elemento SVG precisa de caixa de referência própria: sem
   transform-box a origem é a do SVG inteiro e o anel cresce para o canto. */
.ttn-a-abriu {
  transform-box: fill-box; transform-origin: center;
  animation: ttn-abriu 7s var(--ease) infinite;
}
@keyframes ttn-ida {
  0%, 4%    { opacity: 0; transform: translateX(0); }
  10%       { opacity: 1; transform: translateX(0); }
  34%       { opacity: 1; transform: translateX(352px); }
  40%, 100% { opacity: 0; transform: translateX(352px); }
}
@keyframes ttn-abriu {
  0%, 36%   { opacity: 0; transform: scale(.6); }
  44%       { opacity: 1; transform: scale(1); }
  56%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes ttn-volta {
  0%, 46%   { opacity: 0; transform: translateX(0); }
  52%       { opacity: 1; transform: translateX(0); }
  78%       { opacity: 1; transform: translateX(-352px); }
  86%, 100% { opacity: 0; transform: translateX(-352px); }
}

/* 2 · a seleção — muitas chegam, duas passam */
.ttn-a-passa { animation: ttn-passa 7s var(--ease) infinite; }
.ttn-a-para  { animation: ttn-para  7s var(--ease) infinite; }
@keyframes ttn-passa {
  0%, 10%   { opacity: 0; transform: translateX(-30px); }
  26%, 74%  { opacity: 1; transform: translateX(0); }
  88%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes ttn-para {
  0%, 6%    { opacity: 0; transform: translateX(-30px); }
  22%, 70%  { opacity: .5; transform: translateX(0); }
  84%, 100% { opacity: 0; transform: translateX(0); }
}

/* 3 · o tempo — a mensagem espera e parte na hora marcada */
.ttn-a-espera { animation: ttn-espera 7s var(--ease) infinite; }
@keyframes ttn-espera {
  0%, 8%    { opacity: 0; transform: translateX(0); }
  16%, 40%  { opacity: 1; transform: translateX(0); }
  62%, 86%  { opacity: 1; transform: translateX(268px); }
  96%, 100% { opacity: 0; transform: translateX(268px); }
}

/* 4 · a virada — a mensagem desce e vira item de lista */
.ttn-a-vira  { animation: ttn-vira 7s var(--ease) infinite; }
.ttn-a-marca { animation: ttn-marca 7s var(--ease) infinite; }
@keyframes ttn-vira {
  0%, 12%   { opacity: 0; transform: translateY(-14px); }
  30%, 88%  { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes ttn-marca {
  0%, 40%   { opacity: 0; }
  52%, 88%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

/* ---------- e mais dez ----------
   Não é rodapé de seção nem letra miúda: é a prova de que o plano é um só.
   Células cercadas por fios, a mesma moldura da régua. */
.ttn-mais { margin-top: clamp(40px, 4vw, 64px); }
.ttn-mais-lab {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slate);
}
.ttn-mais-lab::after { content: ''; flex: 1; height: 1px; background: var(--cloud); }

.ttn-mais-grade { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .ttn-mais-grade { grid-template-columns: 1fr; } }

.ttn-mais-grade li { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--cloud); }
.ttn-mais-grade li:nth-child(odd) { border-right: 1px solid var(--cloud); padding-right: 32px; }
.ttn-mais-grade li:nth-child(even) { padding-left: 32px; }
.ttn-mais-grade li:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 720px) {
  .ttn-mais-grade li { padding: 18px 0; border-right: 0 !important; padding-left: 0 !important; }
  .ttn-mais-grade li:nth-last-child(-n+2) { border-bottom: 1px solid var(--cloud); }
  .ttn-mais-grade li:last-child { border-bottom: 0; }
}
.ttn-mais-grade b {
  display: block; margin-bottom: 5px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.018em; color: var(--ink);
}
.ttn-mais-grade span {
  display: block;
  font-size: 13px; line-height: 1.6; font-weight: 300; color: var(--slate);
}

@media (prefers-reduced-motion: reduce) {
  .ttn-a-ida, .ttn-a-volta, .ttn-a-abriu,
  .ttn-a-passa, .ttn-a-para, .ttn-a-espera,
  .ttn-a-vira, .ttn-a-marca { animation: none; opacity: 1; transform: none; }
  .ttn-a-abriu { opacity: 0; }
}

/* Variantes do cabeçalho de seção. Precisam vir DEPOIS de `.ttn-cabeca h2`:
   as duas regras têm a mesma especificidade (0,1,1), então quem decide é a
   ordem. Inverter deixa o título preto sobre preto — é a armadilha nº 1. */
.ttn-cabeca--centro { max-width: 42ch; margin-inline: auto; text-align: center; }
.ttn-cabeca--centro p { margin-inline: auto; }
.ttn-cabeca--claro h2 { color: var(--e-tx); }
.ttn-cabeca--claro p  { color: var(--e-soft); }
.ttn-cabeca--claro .ttn-eyebrow { color: var(--e-mute); }

/* ==========================================================================
   INVESTIMENTO

   Um plano só não precisa de grade. Sem abas de período — não existem
   períodos —, sem tabela comparativa e sem ancoragem: o número aparece
   grande e sozinho, e as três condições embaixo respondem o que se pergunta
   antes de assinar. Nada além disso.
   ========================================================================== */

.ttn-investimento { background: var(--ink); color: var(--e-tx); }
.ttn-investimento .ttn-cabeca { margin-bottom: 56px; }

.ttn-oferta {
  max-width: 760px; margin-inline: auto;
  padding: clamp(34px, 4vw, 60px) clamp(28px, 4vw, 60px) clamp(28px, 3vw, 44px);
  border: 1px solid var(--e-ln); border-radius: var(--r-4);
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

.ttn-preco {
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
  max-width: none;
}
.ttn-preco-cifra {
  align-self: flex-start; padding-top: .6em;
  font-size: 20px; font-weight: 300; color: var(--e-soft);
}
.ttn-preco b {
  font-size: clamp(56px, 7vw, 82px); font-weight: 300;
  letter-spacing: -.05em; line-height: .9; color: var(--e-tx);
  font-variant-numeric: tabular-nums;
}
.ttn-preco-por { font-size: 16px; font-weight: 300; color: var(--e-soft); }

.ttn-preco-nota {
  max-width: none; margin-top: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--e-mute);
}
.ttn-oferta .ttn-acoes { margin-top: 40px; justify-content: center; }

/* As três condições, em células cercadas por fios — a mesma moldura da régua
   e das placas. */
.ttn-condicoes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 52px;
  border-top: 1px solid var(--e-ln);
  text-align: left;
}
@media (max-width: 760px) { .ttn-condicoes { grid-template-columns: 1fr; } }

.ttn-condicoes li { padding: 30px 26px 4px; border-left: 1px solid var(--e-ln); }
.ttn-condicoes li:first-child { border-left: 0; padding-left: 0; }
.ttn-condicoes li:last-child { padding-right: 0; }
@media (max-width: 760px) {
  .ttn-condicoes li { border-left: 0; padding: 26px 0 0; border-top: 1px solid var(--e-ln); }
  .ttn-condicoes li:first-child { border-top: 0; }
}
.ttn-condicoes span {
  display: block; margin-bottom: 10px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; color: var(--e-tx);
}
.ttn-condicoes p { font-size: 12.5px; line-height: 1.65; font-weight: 300; color: var(--e-soft); }

/* ==========================================================================
   ECOSSISTEMA — faixa clara
   ========================================================================== */

.ttn-eco { background: var(--paper); }

.ttn-portas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .ttn-portas { grid-template-columns: 1fr; } }

.ttn-porta {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(28px, 2.8vw, 38px);
  border: 1px solid var(--cloud); border-radius: var(--r-3);
  background: var(--paper);
  transition: border-color var(--t-state) var(--ease);
}
.ttn-porta:hover { border-color: var(--slate); }
.ttn-porta:nth-child(2) { transition-delay: .07s; }
.ttn-porta:nth-child(3) { transition-delay: .14s; }

.ttn-porta-nome { font-size: 22px; font-weight: 700; letter-spacing: -.032em; color: var(--ink); }
.ttn-porta-desc { font-size: 14px; line-height: 1.7; font-weight: 300; color: var(--slate); }
.ttn-porta-ir {
  margin-top: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
  transition: transform var(--t-state) var(--ease);
}
.ttn-porta:hover .ttn-porta-ir { transform: translateX(5px); }

/* ==========================================================================
   FECHO
   ========================================================================== */

.ttn-fecho { background: var(--ink); color: var(--e-tx); }
.ttn-fecho-inner { max-width: 46ch; margin-inline: auto; text-align: center; }
.ttn-fecho .ttn-eyebrow { color: var(--e-mute); }
.ttn-fecho h2 {
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.038em;
  color: var(--e-tx); text-wrap: balance;
}
.ttn-fecho p {
  margin: 26px auto 0;
  font-size: 15.5px; line-height: 1.78; font-weight: 300; color: var(--e-soft);
  text-wrap: pretty;
}
.ttn-fecho .ttn-acoes { justify-content: center; }

/* ---------- entrada das seções ----------
   O bloco NASCE VISÍVEL. A ocultação só passa a valer quando o script assume
   o controle, e tem rede de segurança por tempo. Animação é acréscimo, nunca
   condição para o conteúdo existir — escrever opacity:0 direto no seletor já
   deixou a página do Vanguard inteira em branco uma vez (armadilha nº 9). */
.ttn-root.ttn-anima [data-ttn-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.ttn-root.ttn-anima [data-ttn-reveal].ttn-visto { opacity: 1; transform: none; }

/* ==========================================================================
   DISPOSITIVOS

   A cascata é a mesma do Vanguard, peça por peça: ela já foi medida em
   aparelho real e resolve os quatro casos que quebram um hero de duas
   colunas. O empilhamento mora só aqui — duas fontes de verdade para a
   mesma peça é como bug nasce.
   ========================================================================== */

/* ---- tablet em pé (até 1024px) ----
   O hero deixa de ser duas colunas. Em pé, o instrumento comprimido ficava
   do tamanho de um ícone ao lado de um texto espremido — empilhado, e acima
   do texto, ele volta a ser a peça que é. Sem máscara: ali ela não sobrepõe
   nada, e o gradiente só comeria o lado esquerdo do círculo. */
@media (max-width: 1024px) {
  .ttn-root .ttn-hero {
    min-height: 0; flex-direction: column; align-items: stretch;
    padding: calc(var(--nav-h) + 44px) 0 56px;
  }
  .ttn-hero-texto { max-width: 100%; padding-right: var(--gutter); }
  .ttn-hero-art {
    position: relative; order: -1; right: auto; top: auto; transform: none;
    width: 100%; max-width: 300px; margin: 0 auto 30px;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* ---- deitado e baixo (tablet na horizontal, notebook curto) ----
   A primeira dobra tem de caber inteira na tela: é ela que decide se alguém
   continua rolando. O que cede é o respiro e o corpo do título. */
@media (orientation: landscape) and (max-height: 880px) and (min-width: 1025px) {
  .ttn-root .ttn-hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 60px);
    padding-bottom: 60px;
  }
  .ttn-hero h1 { font-size: clamp(30px, 3.9vw, 48px); }
  .ttn-lead { margin-top: 24px; font-size: 15.5px; }
  .ttn-hero .ttn-acoes { margin-top: 28px; }
  .ttn-hero-art { width: min(70svh, 48%); }
}

/* ---- telas curtas e deitadas ----
   Celular na horizontal tem ~360px de altura. Empilhar joga o botão para
   fora da tela, e ninguém rola um hero para achar a ação. Aqui as duas
   colunas voltam e o instrumento encolhe. */
@media (max-height: 620px) and (orientation: landscape) {
  .ttn-root .ttn-hero {
    flex-direction: row; align-items: center;
    min-height: 0;
    padding: calc(var(--nav-h) + 28px) 0 36px;
  }
  .ttn-hero-texto { max-width: 62%; padding-right: var(--gutter); }
  .ttn-hero-art {
    position: relative; order: 0; width: 38%; max-width: none; margin: 0 0 0 auto;
  }
  .ttn-hero h1 { font-size: clamp(26px, 3.4vw, 38px); }
  .ttn-lead { margin-top: 18px; font-size: 15px; }
  .ttn-hero .ttn-acoes { margin-top: 22px; }
  .ttn-hero .ttn-micro { margin-top: 14px; }
}

/* ---- celular (até 620px) ----
   O instrumento é a assinatura da página: encolhido demais vira um selo
   perdido no meio do preto. Ocupa a largura útil, com teto para não empurrar
   o botão para fora da primeira dobra. */
@media (max-width: 620px) {
  .ttn-root .ttn-hero {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 44px;
  }
  .ttn-hero-art { width: min(78vw, 320px); max-width: none; margin-bottom: 18px; }
  .ttn-hero h1 { font-size: clamp(28px, 8vw, 36px); letter-spacing: -.036em; }
  .ttn-hero h1 em { margin-top: .2em; }
  .ttn-lead { font-size: 15px; line-height: 1.72; margin-top: 22px; }
  .ttn-hero .ttn-acoes { margin-top: 26px; }
  .ttn-hero .ttn-micro { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ttn-btn { transition: none; }
  .ttn-btn:hover { transform: none; }
}