/* ==========================================================================
   TMI v2 · tmi.css (cópia para o site, proposta v8)
   Origem: tmi/identidade-v2/00-fundacao/tmi.css. Fonte normativa: DESIGN.md
   da identidade v2. Diferença única em relação ao original: sem @font-face.
   O site já auto-aloja a Montserrat em assets/fonts/ (styles.css declara as
   faces), por isso aqui não se repete nenhuma fonte.
   Não editar à mão para acertar o site: os ajustes do site vivem no v8.css.
   ========================================================================== */


/* 2. Tokens fixos: cor, geometria, movimento ----------------------------- */

:root {
  /* Paleta de marca */
  --tmi-charcoal: #181818;
  --tmi-branco:   #FFFFFF;
  --tmi-nevoa:    #E5E5E5;
  --tmi-camel:    #C19D86;   /* só o Ponto; nunca texto sobre claro (2,5:1) */

  /* Tons funcionais (leitura, não marca) */
  --tmi-grafite:       #5C5C5C;  /* texto secundário sobre branco 6,7:1 e névoa 5,3:1 */
  --tmi-cinza:         #9A9A9A;  /* texto secundário sobre charcoal 6,3:1 */
  --tmi-linha-escura:  #333333;  /* fios decorativos sobre charcoal */

  /* Papéis semânticos (invertem dentro de .tmi-escuro) */
  --tmi-fundo:        var(--tmi-branco);
  --tmi-superficie:   var(--tmi-nevoa);
  --tmi-texto:        var(--tmi-charcoal);
  --tmi-texto-forte:  var(--tmi-charcoal);
  --tmi-texto-2:      var(--tmi-grafite);
  --tmi-linha:        var(--tmi-nevoa);
  --tmi-botao-fundo:  var(--tmi-charcoal);
  --tmi-botao-texto:  var(--tmi-branco);

  /* Geometria do logo */
  --tmi-diagonal:           0.51;    /* dx por dy do corte do M */
  --tmi-diagonal-inversa:   1.96;    /* dy por dx (1 / 0,51) */
  --tmi-diagonal-skew:     -27deg;   /* skewX que desenha a barra inclinada para a direita */
  --tmi-diagonal-gradiente: 117deg;  /* ângulo de gradiente cujo bordo fica a 63 graus */
  --tmi-canto-proporcao:    0.545;   /* largura por altura do T: 448 / 822 */

  /* Traços */
  --tmi-fio:   1px;
  --tmi-traco: 2px;

  /* Tipografia */
  --tmi-fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Movimento: durações múltiplas de 160 ms (a haste mede cerca de 160 unidades) */
  --tmi-dur-instante: 160ms;
  --tmi-dur-curto:    320ms;
  --tmi-dur-medio:    480ms;
  --tmi-dur-longo:    800ms;
  --tmi-pausa-ponto:  320ms;
  --tmi-curva-decisao: cubic-bezier(0.2, 0, 0, 1);    /* entradas */
  --tmi-curva-corte:   cubic-bezier(0.7, 0, 0.2, 1);  /* varrimentos e transições */
  --tmi-curva-saida:   cubic-bezier(0.4, 0, 1, 1);    /* saídas */
  --tmi-mov-d: 24px;  /* deslocamento vertical de entrada; o horizontal é 0,51 disto */

  /* Grelha */
  --tmi-colunas: 12;
  --tmi-contentor-max: 1280px;
}


/* 3. Tokens escaláveis: tudo em múltiplos do ponto ---------------------------
   O ponto é o diâmetro do Ponto do logo, levado a 16px no ecrã.
   Para escalar uma peça inteira (um post a 1080 px, uma capa de deck),
   põe a classe .tmi-escala no elemento raiz da peça e muda só --tmi-ponto.
   Exemplo: <section class="tmi-escala" style="--tmi-ponto: 24px">.
   ------------------------------------------------------------------------- */

:root,
.tmi-escala {
  --tmi-ponto: 16px;

  /* Espaçamento */
  --tmi-s-quarto: calc(var(--tmi-ponto) * 0.25);  /*   4 */
  --tmi-s-meio:   calc(var(--tmi-ponto) * 0.5);   /*   8 */
  --tmi-s-1:      calc(var(--tmi-ponto) * 1);     /*  16 */
  --tmi-s-1-5:    calc(var(--tmi-ponto) * 1.5);   /*  24 */
  --tmi-s-2:      calc(var(--tmi-ponto) * 2);     /*  32 */
  --tmi-s-3:      calc(var(--tmi-ponto) * 3);     /*  48 */
  --tmi-s-4:      calc(var(--tmi-ponto) * 4);     /*  64 */
  --tmi-s-5:      calc(var(--tmi-ponto) * 5);     /*  80, altura de um logo de referência */
  --tmi-s-6:      calc(var(--tmi-ponto) * 6);     /*  96 */
  --tmi-s-8:      calc(var(--tmi-ponto) * 8);     /* 128 */
  --tmi-s-10:     calc(var(--tmi-ponto) * 10);    /* 160 */

  /* Escala tipográfica, também em pontos */
  --tmi-t-display-xl:  calc(var(--tmi-ponto) * 8);      /* 128 */
  --tmi-t-display:     calc(var(--tmi-ponto) * 6);      /*  96 */
  --tmi-t-headline-lg: calc(var(--tmi-ponto) * 4);      /*  64 */
  --tmi-t-headline-md: calc(var(--tmi-ponto) * 3);      /*  48 */
  --tmi-t-headline-sm: calc(var(--tmi-ponto) * 2);      /*  32 */
  --tmi-t-titulo:      calc(var(--tmi-ponto) * 1.25);   /*  20 */
  --tmi-t-lead:        calc(var(--tmi-ponto) * 1.25);   /*  20 */
  --tmi-t-corpo-lg:    calc(var(--tmi-ponto) * 1.125);  /*  18 */
  --tmi-t-corpo:       calc(var(--tmi-ponto) * 1);      /*  16 */
  --tmi-t-corpo-sm:    calc(var(--tmi-ponto) * 0.875);  /*  14 */
  --tmi-t-citacao:     calc(var(--tmi-ponto) * 1.25);   /*  20 */
  --tmi-t-label:       calc(var(--tmi-ponto) * 0.8125); /*  13 */
  --tmi-t-eyebrow:     calc(var(--tmi-ponto) * 0.75);   /*  12 */
  --tmi-t-legenda:     calc(var(--tmi-ponto) * 0.75);   /*  12 */

  /* Grelha */
  --tmi-medianiz: calc(var(--tmi-ponto) * 1.5);  /* 24 */
  --tmi-margem:   calc(var(--tmi-ponto) * 4);    /* 64 */
}


/* 4. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-corpo);
  font-weight: 400;
  line-height: 1.6;
  color: var(--tmi-texto);
  background: var(--tmi-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: var(--tmi-traco) solid var(--tmi-texto);
  outline-offset: 3px;
}

::selection { background: var(--tmi-charcoal); color: var(--tmi-branco); }


/* 5. Superfícies ------------------------------------------------------------ */

.tmi-claro {
  --tmi-fundo: var(--tmi-branco);
  background: var(--tmi-fundo);
  color: var(--tmi-texto);
}

.tmi-nevoa {
  --tmi-fundo: var(--tmi-nevoa);
  --tmi-superficie: var(--tmi-branco);
  --tmi-linha: #D0D0D0;
  background: var(--tmi-fundo);
  color: var(--tmi-texto);
}

.tmi-escuro {
  --tmi-fundo:       var(--tmi-charcoal);
  --tmi-superficie:  var(--tmi-linha-escura);
  --tmi-texto:       var(--tmi-nevoa);
  --tmi-texto-forte: var(--tmi-branco);
  --tmi-texto-2:     var(--tmi-cinza);
  --tmi-linha:       var(--tmi-linha-escura);
  --tmi-botao-fundo: var(--tmi-nevoa);
  --tmi-botao-texto: var(--tmi-charcoal);
  background: var(--tmi-fundo);
  color: var(--tmi-texto);
}
.tmi-escuro ::selection { background: var(--tmi-nevoa); color: var(--tmi-charcoal); }


/* 6. Layout: contentor, grelha, pilha ---------------------------------------- */

.tmi-contentor {
  width: 100%;
  max-width: calc(var(--tmi-contentor-max) + 2 * var(--tmi-margem));
  margin-inline: auto;
  padding-inline: var(--tmi-margem);
}

.tmi-grelha {
  display: grid;
  grid-template-columns: repeat(var(--tmi-colunas), minmax(0, 1fr));
  column-gap: var(--tmi-medianiz);
}
.tmi-grelha--6 { --tmi-colunas: 6; }

.tmi-span-1  { grid-column: span 1; }
.tmi-span-2  { grid-column: span 2; }
.tmi-span-3  { grid-column: span 3; }
.tmi-span-4  { grid-column: span 4; }
.tmi-span-5  { grid-column: span 5; }
.tmi-span-6  { grid-column: span 6; }
.tmi-span-7  { grid-column: span 7; }
.tmi-span-8  { grid-column: span 8; }
.tmi-span-9  { grid-column: span 9; }
.tmi-span-10 { grid-column: span 10; }
.tmi-span-11 { grid-column: span 11; }
.tmi-span-12 { grid-column: 1 / -1; }

.tmi-pilha {
  display: flex;
  flex-direction: column;
  gap: var(--tmi-pilha-espaco, var(--tmi-s-1));
}

@media (max-width: 767px) {
  :root { --tmi-margem: 16px; --tmi-medianiz: 16px; }
  .tmi-grelha { --tmi-colunas: 4; }
  .tmi-grelha > [class*="tmi-span-"] { grid-column: 1 / -1; }
}


/* 7. Tipografia: os três registos e o apoio ---------------------------------- */

.tmi-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tmi-texto-2);
}

/* Registo 1: headline fina */
.tmi-headline {
  margin: 0;
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-headline-md);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--tmi-texto-forte);
  text-wrap: balance;
}
.tmi-headline--xl { font-size: var(--tmi-t-display-xl);  font-weight: 200; line-height: 0.95; letter-spacing: -0.045em; }
.tmi-headline--display { font-size: var(--tmi-t-display); font-weight: 200; line-height: 1;    letter-spacing: -0.04em; }
.tmi-headline--lg { font-size: var(--tmi-t-headline-lg); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; }
.tmi-headline--md { font-size: var(--tmi-t-headline-md); }
.tmi-headline--sm { font-size: var(--tmi-t-headline-sm); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; }
.tmi-headline strong,
.tmi-headline b { font-weight: 700; }

/* Registo 2: palavra de força (uma palavra ou um número) */
.tmi-forca {
  margin: 0;
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-headline-lg);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--tmi-texto-forte);
  font-variant-numeric: tabular-nums;
}
.tmi-forca--xl { font-size: var(--tmi-t-display-xl); line-height: 0.9; letter-spacing: -0.05em; }
.tmi-forca--lg { font-size: var(--tmi-t-headline-lg); }
.tmi-forca--md { font-size: var(--tmi-t-headline-sm); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }

/* Registo 3: citação em maiúsculas com tracking largo */
.tmi-citacao {
  margin: 0;
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-citacao);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tmi-texto-forte);
}
.tmi-citacao strong,
.tmi-citacao b { font-weight: 700; }
.tmi-citacao__autor {
  display: block;
  margin-top: var(--tmi-s-1-5);
  font-size: var(--tmi-t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--tmi-texto-2);
}

/* Apoio */
.tmi-titulo {
  margin: 0;
  font-size: var(--tmi-t-titulo);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--tmi-texto-forte);
}
.tmi-lead {
  margin: 0;
  font-size: var(--tmi-t-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--tmi-texto);
  max-width: 38em;
}
.tmi-corpo {
  margin: 0;
  font-size: var(--tmi-t-corpo);
  font-weight: 400;
  line-height: 1.6;
  max-width: 66ch;
}
.tmi-corpo--sm { font-size: var(--tmi-t-corpo-sm); line-height: 1.55; }
.tmi-legenda {
  margin: 0;
  font-size: var(--tmi-t-legenda);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--tmi-texto-2);
}
.tmi-numero { font-variant-numeric: tabular-nums; }
.tmi-secundario { color: var(--tmi-texto-2); }

/* Assinatura: Think · Make · Impact */
.tmi-assinatura {
  font-size: var(--tmi-t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tmi-texto-2);
}


/* 8. Elemento: o Ponto --------------------------------------------------------
   O círculo do logo, em camel. Um só por peça. Pousa na linha de base.
   Tamanho no texto: 0,14em (0,70 de altura de maiúscula x 0,19 do logo),
   nunca abaixo de 5px para não se perder em texto pequeno.
   Uso: Agenda cheia<span class="tmi-ponto" aria-hidden="true"></span>
   ------------------------------------------------------------------------- */

.tmi-ponto {
  display: inline-block;
  width: var(--tmi-ponto-tamanho, max(0.14em, 5px));
  height: var(--tmi-ponto-tamanho, max(0.14em, 5px));
  margin-left: var(--tmi-ponto-folga, 0.07em);
  border-radius: 50%;
  background: var(--tmi-camel);
  vertical-align: baseline;
  flex: none;
}
/* Ponto solto, como elemento gráfico: múltiplos inteiros do ponto */
.tmi-ponto--solto { --tmi-ponto-tamanho: var(--tmi-s-1); --tmi-ponto-folga: 0; display: block; }
.tmi-ponto--2 { --tmi-ponto-tamanho: var(--tmi-s-2); }
.tmi-ponto--3 { --tmi-ponto-tamanho: var(--tmi-s-3); }
.tmi-ponto--6 { --tmi-ponto-tamanho: var(--tmi-s-6); }
/* Social a 1080 px: o Ponto nunca fica abaixo de 14 px */
.tmi-ponto--social { --tmi-ponto-tamanho: max(0.14em, 14px); }


/* 9. Elemento: a Diagonal ---------------------------------------------------
   O corte do M, a 63 graus da horizontal. Três formas:
   .tmi-diagonal        degrau inclinado entre secções (clip-path, altura fixa)
   .tmi-traco-diagonal  barra inclinada como grafismo (a perna do M)
   .tmi-fio-diagonal    fio fino inclinado, separador em linha
   ------------------------------------------------------------------------- */

/* Degrau: coloca-se imediatamente antes de uma secção da mesma cor.
   A parte cheia fica à direita de uma linha que sobe a 63 graus. */
.tmi-diagonal {
  --tmi-diagonal-altura: var(--tmi-s-5);
  --tmi-diagonal-posicao: 40%;
  display: block;
  width: 100%;
  height: var(--tmi-diagonal-altura);
  background: var(--tmi-diagonal-cor, var(--tmi-charcoal));
  clip-path: polygon(
    var(--tmi-diagonal-posicao) 100%,
    calc(var(--tmi-diagonal-posicao) + var(--tmi-diagonal-altura) * 0.51) 0,
    100% 0,
    100% 100%
  );
}
/* Degrau de saída: coloca-se imediatamente depois de uma secção da mesma cor */
.tmi-diagonal--baixo {
  clip-path: polygon(
    0 0,
    calc(var(--tmi-diagonal-posicao) + var(--tmi-diagonal-altura) * 0.51) 0,
    var(--tmi-diagonal-posicao) 100%,
    0 100%
  );
}

/* Barra inclinada: a perna do M como grafismo.
   --tmi-traco-altura é a altura; --tmi-traco-espessura a largura horizontal.
   Usar sempre comprimentos (px, pontos), nunca percentagens: a largura é
   calculada a partir da altura e uma percentagem estraga o ângulo. */
.tmi-traco-diagonal {
  --tmi-traco-altura: var(--tmi-s-10);
  --tmi-traco-espessura: var(--tmi-s-2);
  display: block;
  height: var(--tmi-traco-altura);
  width: calc(var(--tmi-traco-altura) * 0.51 + var(--tmi-traco-espessura));
  background: var(--tmi-traco-cor, currentColor);
  clip-path: polygon(
    calc(100% - var(--tmi-traco-espessura)) 0,
    100% 0,
    var(--tmi-traco-espessura) 100%,
    0 100%
  );
}

/* Fio inclinado em linha, com a altura do texto */
.tmi-fio-diagonal {
  display: inline-block;
  width: var(--tmi-traco);
  height: 1.1em;
  margin-inline: 0.6em;
  background: currentColor;
  transform: skewX(var(--tmi-diagonal-skew));
  vertical-align: -0.2em;
}


/* 10. Elemento: o Canto ------------------------------------------------------
   O ângulo reto do T, com as proporções exatas do logo
   (barra 448 x 150, haste 171 x 822).
   .tmi-canto    glifo do T, marcador de título ou eyebrow
   .tmi-moldura  dois Cantos em diagonal oposta à volta de foto ou citação
   ------------------------------------------------------------------------- */

.tmi-canto {
  display: inline-block;
  flex: none;
  height: var(--tmi-canto-altura, 1.4em);
  width: calc(var(--tmi-canto-altura, 1.4em) * 0.545);
  background: var(--tmi-canto-cor, currentColor);
  /* pontos do T: 277/448 = 61,83%, 150/822 = 18,25% */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 61.83% 100%, 61.83% 18.25%, 0 18.25%);
  vertical-align: top;
}
.tmi-eyebrow .tmi-canto { --tmi-canto-altura: 1.7em; color: var(--tmi-texto-forte); }

/* Canto em esquina: o T rodado 90 graus, com o braço longo na horizontal
   (o mesmo desenho do canto superior esquerdo de .tmi-moldura).
   É a forma certa para marcar um eyebrow ou uma âncora: o glifo do T
   sozinho ao lado de um título lê-se como o algarismo 1. */
.tmi-canto--esquina {
  height: var(--tmi-canto-altura, 1em);
  width: calc(var(--tmi-canto-altura, 1em) / 0.545);
  clip-path: polygon(0 0, 100% 0, 100% 38.17%, 18.25% 38.17%, 18.25% 100%, 0 100%);
}
.tmi-eyebrow .tmi-canto--esquina {
  --tmi-canto-altura: 0.95em;
  align-self: flex-start;
  transform: translateY(-0.3em);
}

.tmi-moldura {
  --tmi-moldura-tamanho: var(--tmi-s-3);   /* braço longo do Canto */
  --tmi-moldura-folga: var(--tmi-s-1);     /* distância ao conteúdo */
  position: relative;
  display: block;
}
.tmi-moldura::before,
.tmi-moldura::after {
  content: "";
  position: absolute;
  width: var(--tmi-moldura-tamanho);
  height: calc(var(--tmi-moldura-tamanho) * 0.545);
  background: var(--tmi-moldura-cor, var(--tmi-texto-forte));
  pointer-events: none;
}
/* Canto superior esquerdo: o T rodado 90 graus (braço longo na horizontal).
   Espessuras: haste 171/448 = 38,17% da altura; barra 150/822 = 18,25% da largura. */
.tmi-moldura::before {
  top: calc(var(--tmi-moldura-folga) * -1);
  left: calc(var(--tmi-moldura-folga) * -1);
  clip-path: polygon(0 0, 100% 0, 100% 38.17%, 18.25% 38.17%, 18.25% 100%, 0 100%);
}
/* Canto inferior direito: o mesmo, rodado 180 graus */
.tmi-moldura::after {
  right: calc(var(--tmi-moldura-folga) * -1);
  bottom: calc(var(--tmi-moldura-folga) * -1);
  clip-path: polygon(81.75% 0, 100% 0, 100% 100%, 0 100%, 0 61.83%, 81.75% 61.83%);
}


/* 11. Fotografia ------------------------------------------------------------
   Sempre a preto e branco, cantos retos. Aplica-se diretamente ao <img>.
   ------------------------------------------------------------------------- */

.tmi-foto {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--tmi-foto-foco, 50% 30%);
  aspect-ratio: var(--tmi-foto-r, auto);
  filter: grayscale(1) contrast(1.02);
  background: var(--tmi-nevoa);
}
.tmi-foto--1x1  { --tmi-foto-r: 1; }
.tmi-foto--4x5  { --tmi-foto-r: 0.8; }
.tmi-foto--3x4  { --tmi-foto-r: 0.75; }
.tmi-foto--3x2  { --tmi-foto-r: 1.5; }
.tmi-foto--16x9 { --tmi-foto-r: 1.7778; }

/* Canto superior esquerdo cortado pela Diagonal (63 graus exatos, qualquer tamanho) */
.tmi-foto--corte {
  --tmi-foto-corte: var(--tmi-s-6);
  clip-path: polygon(
    var(--tmi-foto-corte) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 calc(var(--tmi-foto-corte) * 1.96)
  );
}
/* Canto inferior direito cortado pela Diagonal */
.tmi-foto--corte-baixo {
  --tmi-foto-corte: var(--tmi-s-6);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--tmi-foto-corte) * 1.96),
    calc(100% - var(--tmi-foto-corte)) 100%,
    0 100%
  );
}
/* Painel: o lado esquerdo inteiro é a Diagonal. Precisa de proporção definida
   (usar com --16x9 ou --3x2; em fotos verticais o corte fica largo demais). */
.tmi-foto--painel {
  clip-path: polygon(
    calc(51% / var(--tmi-foto-r, 1.7778)) 0,
    100% 0,
    100% 100%,
    0 100%
  );
}


/* 12. Componentes --------------------------------------------------------- */

/* Seta: horizontal, clara à primeira (revisão 4: a seta da Diagonal lia-se como um 7). Herda a cor do texto. */
.tmi-seta {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h18M13.5 5.5 20 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h18M13.5 5.5 20 12l-6.5 6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--tmi-dur-instante) var(--tmi-curva-decisao);
}

/* Botões */
.tmi-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  min-height: var(--tmi-s-3);          /* 48 px, alvo tocável confortável */
  padding: 0 var(--tmi-s-1-5);
  border: var(--tmi-traco) solid var(--tmi-botao-fundo);
  border-radius: 0;
  background: var(--tmi-botao-fundo);
  color: var(--tmi-botao-texto);
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--tmi-dur-instante) var(--tmi-curva-decisao),
    color var(--tmi-dur-instante) var(--tmi-curva-decisao),
    border-color var(--tmi-dur-instante) var(--tmi-curva-decisao);
}
.tmi-botao .tmi-seta { font-size: 1.25em; }
.tmi-botao:hover .tmi-seta,
.tmi-botao:focus-visible .tmi-seta {
  transform: translateX(0.2em);  /* avança no hover */
}
.tmi-botao:focus-visible { outline-color: var(--tmi-texto); }

.tmi-botao--secundario {
  background: transparent;
  color: var(--tmi-texto-forte);
  border-color: var(--tmi-texto-forte);
}
.tmi-botao--secundario:hover {
  background: var(--tmi-texto-forte);
  color: var(--tmi-fundo);
}

.tmi-botao[disabled],
.tmi-botao[aria-disabled="true"] {
  background: transparent;
  color: var(--tmi-texto-2);
  border-color: var(--tmi-linha);
  cursor: not-allowed;
}

/* Link de texto */
.tmi-link {
  color: var(--tmi-texto-forte);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: var(--tmi-fio);
  text-underline-offset: 0.3em;
  transition: text-decoration-thickness var(--tmi-dur-instante) var(--tmi-curva-decisao);
}
.tmi-link:hover { text-decoration-thickness: var(--tmi-traco); }

/* Etiqueta */
.tmi-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.85em;
  border: var(--tmi-fio) solid currentColor;
  border-radius: 0;
  font-family: var(--tmi-fonte);
  font-size: var(--tmi-t-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tmi-texto-forte);
  white-space: nowrap;
}
.tmi-etiqueta--cheia {
  background: var(--tmi-texto-forte);
  border-color: var(--tmi-texto-forte);
  color: var(--tmi-fundo);
}
.tmi-etiqueta--suave {
  border-color: var(--tmi-linha);
  color: var(--tmi-texto-2);
}

/* Cartão */
.tmi-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--tmi-s-1);
  padding: var(--tmi-s-2);
  background: var(--tmi-fundo);
  border: var(--tmi-fio) solid var(--tmi-linha);
  border-radius: 0;
  color: var(--tmi-texto);
  transition: border-color var(--tmi-dur-instante) var(--tmi-curva-decisao);
}
a.tmi-cartao { text-decoration: none; }
a.tmi-cartao:hover { border-color: var(--tmi-texto-forte); }
.tmi-cartao--nevoa {
  --tmi-fundo: var(--tmi-nevoa);
  --tmi-linha: var(--tmi-nevoa);
  background: var(--tmi-nevoa);
}
.tmi-cartao--escuro {
  --tmi-fundo: var(--tmi-charcoal);
  --tmi-texto: var(--tmi-nevoa);
  --tmi-texto-forte: var(--tmi-branco);
  --tmi-texto-2: var(--tmi-cinza);
  --tmi-linha: var(--tmi-charcoal);
  background: var(--tmi-charcoal);
  color: var(--tmi-nevoa);
}
.tmi-cartao__numero {
  font-size: var(--tmi-t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tmi-texto-2);
  font-variant-numeric: tabular-nums;
}
.tmi-cartao__titulo {
  margin: 0;
  font-size: var(--tmi-t-headline-sm);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tmi-texto-forte);
}
.tmi-cartao__texto {
  margin: 0;
  font-size: var(--tmi-t-corpo-sm);
  line-height: 1.6;
  color: var(--tmi-texto-2);
}
.tmi-cartao__rodape {
  margin-top: auto;
  padding-top: var(--tmi-s-1);
}

/* Campo de formulário */
.tmi-campo {
  display: flex;
  flex-direction: column;
  gap: var(--tmi-s-meio);
}
.tmi-campo__rotulo {
  font-size: var(--tmi-t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tmi-texto-forte);
}
.tmi-campo__entrada {
  min-height: var(--tmi-s-3);
  padding: 0 var(--tmi-s-1);
  border: var(--tmi-fio) solid var(--tmi-texto-2);
  border-radius: 0;
  background: var(--tmi-fundo);
  color: var(--tmi-texto-forte);
  font: 400 var(--tmi-t-corpo) / 1.4 var(--tmi-fonte);
}
.tmi-campo__entrada:focus { outline: none; border-color: var(--tmi-texto-forte); box-shadow: inset 0 0 0 1px var(--tmi-texto-forte); }
.tmi-campo__ajuda { font-size: var(--tmi-t-corpo-sm); color: var(--tmi-texto-2); }
.tmi-campo--erro .tmi-campo__entrada { border-width: var(--tmi-traco); border-color: var(--tmi-texto-forte); }
.tmi-campo--erro .tmi-campo__ajuda { color: var(--tmi-texto-forte); font-weight: 600; }

/* Fio horizontal */
.tmi-regra {
  height: var(--tmi-fio);
  margin: 0;
  border: 0;
  background: var(--tmi-linha);
}

/* Logo em <img>: a altura manda, a largura segue */
.tmi-logo {
  display: block;
  height: var(--tmi-logo-altura, 40px);
  width: auto;
}


/* 13. Movimento -------------------------------------------------------------
   Direção: a da Diagonal, de baixo à esquerda para cima à direita.
   Ordem: estrutura, ação, pausa, Ponto.
   ------------------------------------------------------------------------- */

@keyframes tmi-entra {
  from {
    opacity: 0;
    transform: translate(calc(var(--tmi-mov-d) * -0.51), var(--tmi-mov-d));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tmi-pousa {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes tmi-revela {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}
@keyframes tmi-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tmi-entra {
  animation: tmi-entra var(--tmi-dur-curto) var(--tmi-curva-decisao) both;
  animation-delay: var(--tmi-atraso, 0ms);
}
.tmi-entra--medio { animation-duration: var(--tmi-dur-medio); }

/* O Ponto pousa depois de tudo, com a pausa de 320 ms */
.tmi-ponto--pousa {
  animation: tmi-pousa var(--tmi-dur-curto) var(--tmi-curva-decisao) both;
  animation-delay: calc(var(--tmi-atraso, 0ms) + var(--tmi-pausa-ponto));
  transform-origin: 50% 100%;
}

/* Revelação por varrimento com bordo a 63 graus (fotos, painéis) */
.tmi-revela {
  -webkit-mask-image: linear-gradient(var(--tmi-diagonal-gradiente), #000 47%, transparent 53%);
          mask-image: linear-gradient(var(--tmi-diagonal-gradiente), #000 47%, transparent 53%);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: tmi-revela var(--tmi-dur-medio) var(--tmi-curva-corte) both;
  animation-delay: var(--tmi-atraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .tmi-entra,
  .tmi-ponto--pousa,
  .tmi-revela {
    animation: tmi-aparece var(--tmi-dur-instante) linear both;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .tmi-seta,
  .tmi-botao,
  .tmi-cartao { transition: none; }
}

/* Revisão 4 (2026-10-01): botões sem seta. O rótulo diz a ação; a seta lia-se como "sai daqui". */
.tmi-botao .tmi-seta { display: none; }