/* O cartao do In Move: marca e chamada a esquerda, experiencias a direita.

   Serve DUAS rotas - `/` e `/eventos/` -, e por isso o escopo e a classe
   `.inmove-cartao` e nao `.pagina-home`. O nome do arquivo ficou de quando ele
   era so da home; trocar custaria editar `docs/responsividade-mobile/
   MATRIZ-EFEITOS.md` e duas decisoes que descrevem estado historico, entao o
   nome fica e este paragrafo e que avisa.

   O brilho e um `box-shadow` de varias camadas, e nao um pseudo-elemento com
   `filter: blur()`. Duas razoes, e a primeira e um defeito que este arquivo ja
   teria: `.inmove-summary` e uma GRADE, e um `::before` nela vira uma celula -
   a terceira coluna que ninguem pediu. A segunda e a ordem de pintura: um filho
   de `z-index: -1` pinta ACIMA do fundo do proprio pai, ou seja o brilho
   apareceria por cima do cartao em vez de atras. `box-shadow` pinta fora da
   caixa de borda e atras do fundo, que e exatamente onde o brilho tem de estar.

   Nada aqui anima: o brilho e estatico, nao pulsa e nao segue rolagem nem
   cursor. E por isso que este arquivo nao tem bloco `prefers-reduced-motion` -
   a unica transicao da peca e a do `.botao`, que vem de `app.css` e ja esta
   coberta la. Se alguem animar o brilho, o bloco passa a ser obrigatorio.

   Cor: nenhum literal. A laranja e a opacidade saem de `--inmove-orange` com
   `color-mix`, como `--brilho-marca` faz em `app.css`.
   ========================================================================== */

/* Yellowtail — manuscrita da assinatura, auto-hospedada, subconjunto latin.
   =============================================================================
   Copyright (c) 2011 Brian J. Bonislawsky DBA Astigmatic (AOETI).
   Apache License 2.0 — o texto completo em `static/fonts/yellowtail-APACHE.txt`,
   ao lado do arquivo. NAO e OFL, ao contrario da Archivo e da Oswald.

   Um peso so (400): a familia nao tem outro, e pedir negrito produziria negrito
   SINTETICO, que engrossa o traco de forma desigual e estraga justamente as
   ligacoes entre as letras.

   O `@font-face` mora aqui, e nao em `app.css`, porque a fonte serve UMA linha
   de UM bloco de UMA pagina. Em `app.css` toda pagina do site analisaria uma
   declaracao que so a home usa. O download continua preguicoso nos dois casos.

   Nada sai do dominio: sem CDN, sem Google Fonts em tempo de execucao. Baixada
   uma vez de fonts.gstatic.com e versionada aqui. `font-display: swap` de
   proposito, como a Archivo: a assinatura aparece na fonte do sistema e troca
   quando o arquivo chega. */
@font-face {
  font-family: "Yellowtail";
  src: url("../../fonts/yellowtail-latin.5394bcfe7a18.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.inmove-cartao {
  padding-top: clamp(36px, 4.5vw, 64px);
  border-top: 1px solid var(--cor-borda, var(--inmove-pista));
}

/* O cartao.
   =============================================================================
   O fundo tem um degrade radial quente no canto superior esquerdo, e nao uma cor
   chapada: e o que liga o brilho de fora ao interior da caixa. Sem ele, a borda
   iluminada fica solta de um retangulo preto. */
.inmove-cartao .inmove-summary {
  --inmove-cartao-raio: clamp(18px, 1.8vw, 26px);

  position: relative;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: stretch;
  gap: clamp(32px, 4.6vw, 64px);
  margin-bottom: 0;
  padding: clamp(28px, 3.6vw, 54px);
  border: 1px solid color-mix(in srgb, var(--inmove-orange) 20%, transparent);
  border-radius: var(--inmove-cartao-raio);
  background:
    radial-gradient(118% 132% at 6% 0%,
      color-mix(in srgb, var(--inmove-orange) 7%, transparent) 0%,
      transparent 44%),
    var(--inmove-fundo);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--inmove-orange) 9%, transparent),
    -18px 0 56px -30px color-mix(in srgb, var(--inmove-orange) 62%, transparent),
    0 0 30px -6px color-mix(in srgb, var(--inmove-orange) 26%, transparent),
    0 0 78px -12px color-mix(in srgb, var(--inmove-orange) 20%, transparent),
    0 34px 96px -46px var(--inmove-sombra);
  scroll-margin-top: 130px;
}

.inmove-cartao .inmove-summary__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* A sobrancelha no ambar do site, e nao na laranja do programa.
   =============================================================================
   `--cor-texto-luz` e o mesmo token que `.sobrancelha` usa por padrao em
   `app.css`: sai de `--marca-luz`, e portanto de `--brand-secondary` do painel.
   E a cor de "ATENDIMENTO COM LPF+" e das demais sobrancelhas do site.

   Declarada, e nao herdada, por causa da rota `/eventos/`: ali `eventos.css`
   traz `.fx-eventos .sobrancelha { color: var(--marca) }`, de especificidade
   IGUAL a desta regra, e quem venceria passaria a depender da ordem em que as
   folhas entram - o tipo de empate que muda sozinho no dia em que alguem
   reordenar um `<link>`.

   O fio de `::before` acompanha por `currentColor`, e a largura de 1.75rem do
   padrao ja e a medida certa: nao ha o que sobrescrever. */
.inmove-cartao .sobrancelha {
  margin-bottom: 0;
  color: var(--cor-texto-luz);
  font-size: .75rem;
  letter-spacing: .16em;
}

.inmove-cartao .inmove-summary__logo {
  width: clamp(188px, 16.5vw, 236px);
  margin-block: 26px 22px;
}

.inmove-cartao .inmove-summary__logo img {
  mix-blend-mode: lighten;
}

/* A manchete, com a ultima palavra em laranja.
   =============================================================================
   `max-width` em `ch` e o que produz a quebra do mockup - "Movimento" numa
   linha, "que te conecta" na outra. `text-wrap: balance` fica de fora aqui de
   proposito: ele redistribuiria as duas linhas e desfaria essa quebra. */
.inmove-cartao .inmove-summary__slogan {
  max-width: 13ch;
  margin: 0;
  color: var(--inmove-paper);
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.045em;
}

/* O acento da manchete sai na TERRACOTA da marca, e nao na laranja do programa.
   =============================================================================
   `--marca`, e nao `--cor-texto-marca`: o Lucas pediu em 2026-09-22 que a
   palavra bata com o "treina." de "Historias de quem treina.", que sai de
   `--story-accent` (#e35336, o terracota puro). `--cor-texto-marca` clareia a
   marca com 20% de areia e produzia um salmao visivelmente diferente ao lado.

   Continua sendo camada semantica, e nao o primitivo `--terracota-500`:
   `--marca` atravessa ate `--brand-primary`, entao a palavra acompanha a cor
   que o painel definir em vez de congelar o valor.

   Contraste: terracota-500 sobre carvao-950 da 5,21:1, medido em
   `test_marca_bianca_ramiro`. Passa AA ate para texto normal, e esta manchete
   tem 40 a 60px, onde o minimo e 3:1. */
.inmove-cartao .inmove-summary__slogan-acento {
  color: var(--marca);
}

.inmove-cartao .descricao {
  max-width: 48ch;
  margin: var(--espaco-6) 0 0;
  color: var(--areia-300);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.inmove-cartao .descricao + .descricao {
  margin-top: var(--espaco-4);
}

/* A chamada ocupa a largura da coluna: e a acao principal do cartao, e no
   mockup ela e o unico bloco cheio de laranja. O raio e maior que o
   `--raio-md` do botao padrao para acompanhar o raio do cartao. */
.inmove-cartao .inmove-summary__action {
  align-self: stretch;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(28px, 3vw, 40px);
  min-height: 60px;
  padding: 16px 26px;
  border-radius: var(--raio-xl);
  font-size: .875rem;
  letter-spacing: .05em;
}

.inmove-cartao .inmove-summary__action svg {
  flex-shrink: 0;
}

.inmove-cartao .inmove-summary__tagline {
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: var(--inmove-texto-suave);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* A coluna das experiencias.
   =============================================================================
   `flex` em coluna para a assinatura poder ser empurrada para o pe da coluna com
   `margin-top: auto`, alinhada com o fim da coluna da esquerda.

   `overflow: clip`, e nao `hidden`: os dois aneis sao MAIORES que a coluna e
   precisam ser cortados por ela, mas `hidden` criaria um contentor de rolagem,
   e conteudo que transbordasse ficaria inalcancavel. `clip` corta sem isso.

   O fundo aqui sao dois banhos difusos, sem borda nenhuma. A versao anterior
   punha o preenchimento DENTRO do anel e o disco ganhava uma beirada dura que a
   referencia nao tem. A forma quem faz e o anel; o fundo so aquece. */
.inmove-cartao .inmove-summary__details {
  position: relative;
  /* Sem `isolation`, os pseudo-elementos de `z-index: -1` escapariam desta
     coluna e pintariam ATRAS do fundo do cartao, onde ninguem os veria. Com
     ela, o contexto de empilhamento e esta coluna: o ornamento fica acima do
     fundo do cartao e abaixo do texto da lista. */
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-left: clamp(28px, 3.4vw, 48px);
  border-left: 1px solid var(--cor-borda, var(--inmove-pista));
  background:
    radial-gradient(86% 58% at 78% 26%,
      color-mix(in srgb, var(--inmove-orange) 10%, transparent) 0%,
      transparent 70%),
    radial-gradient(76% 62% at 24% 88%,
      color-mix(in srgb, var(--inmove-orange) 7%, transparent) 0%,
      transparent 74%);
}

/* Os dois aneis atras das experiencias.
   =============================================================================
   NAO e o arco que a decisao 28 removeu. Aquele era lima, ornamento da marca
   PROPRIA do programa, e assentava sobre o degrade ameixa; os dois motivos do
   registro. Este e laranja - a cor que o cartao ja usa -, nasce como ornamento
   do SITE e assenta sobre o fundo do proprio cartao. A classe `in-move__arco`
   continua nao existindo, e os dois guardas que a vigiam seguem valendo.

   Como o aro e feito, e por que nao e um `radial-gradient` com faixa de cor:
   aquela faixa sai com opacidade IGUAL na volta inteira, e o resultado e um
   contorno vetorial duro. Aqui o disco e pintado com `conic-gradient` - a cor
   varia com o ANGULO, entao o brilho percorre a circunferencia e desaparece do
   outro lado - e so depois vira aro, recortado por `mask` radial. O `blur` de
   pouco mais de 1px tira o serrilhado e deixa a borda respirar.

   `mask` precisa de cor opaca para MANTER o pixel; `black` e so isso, e nao
   tinta - nada aqui pinta preto.

   O movimento tem TRES partes, e nenhuma sozinha bastava. Girar um circulo em
   torno do proprio centro nao muda nada de lugar: so leva o brilho do `conic`
   em volta, e de longe parece parado. Por isso cada anel tambem DERIVA -
   translada dezenas de pixels pela coluna, que e o que se enxerga como
   movimento.

   Os circulos ficam REDONDOS, sem inclinacao: houve uma versao inclinada em 3D
   em 2026-09-22 e o Lucas preferiu a redonda. A nota de desempenho junto dos
   `@keyframes` guarda o que aquela tentativa ensinou.

   O `mask` que faz o aro e aplicado no espaco 2D do proprio elemento, ANTES da
   transformacao 3D. E por isso que a espessura acompanha a inclinacao sozinha,
   como aconteceria com um aro de verdade visto de lado.

   Os dois percursos tem duracoes primas entre si (41s e 57s) e sentidos de giro
   opostos: assim a sobreposicao entre eles demora a se repetir, e o conjunto
   nao cai num compasso reconhecivel.

   Tudo em `transform`, que o compositor resolve sozinho - nenhuma propriedade
   aqui obriga o navegador a recalcular layout ou repintar a coluna.

   Nada de SVG nem de `<div>`: o ornamento nao tem significado nenhum e nao
   deveria existir na arvore de acessibilidade. */
.inmove-cartao .inmove-summary__details::before,
.inmove-cartao .inmove-summary__details::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  /* A suavidade da borda sai do PROPRIO `mask`, com rampa dos dois lados, e nao
     de `filter: blur()`. Medido em 2026-09-22: com o filtro, inclinar em 3D
     derrubou a home de 60,5 para 33,2 fps - a cada quadro a transformacao muda
     a escala de rasterizacao e o Firefox refaz o passe de desfoque da camada
     inteira. O mask e aplicado uma vez, na composicao, e nao por quadro.

     A rampa: 1.2px entrando, 1.1px de aro cheio, 1.3px saindo - medidas
     escolhidas para o aro pesar como a versao com `blur(1.3px)` pesava,
     que e a que o Lucas aprovou. */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.6px), black calc(100% - 2.4px), black calc(100% - 1.3px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 3.6px), black calc(100% - 2.4px), black calc(100% - 1.3px), transparent 100%);
  /* Promove a camada uma vez, em vez de o compositor redescobrir isso a cada
     quadro. Sao dois elementos, e o custo de memoria e desprezivel. */
  will-change: transform;
}

.inmove-cartao .inmove-summary__details::before {
  top: var(--inmove-anel-a-topo, -64px);
  right: var(--inmove-anel-a-lado, -140px);
  width: var(--inmove-anel-a, 420px);
  height: var(--inmove-anel-a, 420px);
  /* O piso nao vai a `transparent`, e a razao e um defeito que a primeira
     versao tinha: com o aro desaparecendo de vez num trecho, e girando, havia
     fases do ciclo em que a parte VISIVEL do circulo era justamente a apagada -
     o ornamento sumia e voltava sozinho. Indo de 22% a 62%, o circulo esta
     sempre la e o que gira e o realce. */
  background: conic-gradient(
    color-mix(in srgb, var(--inmove-orange) 62%, transparent) 0deg,
    color-mix(in srgb, var(--inmove-orange) 34%, transparent) 84deg,
    color-mix(in srgb, var(--inmove-orange) 22%, transparent) 168deg,
    color-mix(in srgb, var(--inmove-orange) 30%, transparent) 262deg,
    color-mix(in srgb, var(--inmove-orange) 62%, transparent) 360deg);
  animation: inmove-anel-a 41s ease-in-out infinite;
}

.inmove-cartao .inmove-summary__details::after {
  bottom: var(--inmove-anel-b-base, -170px);
  left: var(--inmove-anel-b-lado, -120px);
  width: var(--inmove-anel-b, 560px);
  height: var(--inmove-anel-b, 560px);
  background: conic-gradient(
    color-mix(in srgb, var(--inmove-orange) 18%, transparent) 0deg,
    color-mix(in srgb, var(--inmove-orange) 48%, transparent) 96deg,
    color-mix(in srgb, var(--inmove-orange) 24%, transparent) 204deg,
    color-mix(in srgb, var(--inmove-orange) 15%, transparent) 288deg,
    color-mix(in srgb, var(--inmove-orange) 18%, transparent) 360deg);
  animation: inmove-anel-b 57s ease-in-out infinite;
}

/* Nota de desempenho, guardada do dia em que estes aneis foram inclinados.
   =============================================================================
   Medido em 2026-09-22, na home, com a base da pagina em 60,8 fps: inclinacao
   variando (`rotateX` e `translateZ` animados) deu 33,2 fps; trocar
   `filter: blur()` por rampa no `mask` subiu para 42,6; fixar a inclinacao,
   54,2; tirar `perspective` do pai e usar a funcao dentro do `transform`,
   60,3. A inclinacao saiu depois, por gosto, mas as medidas continuam valendo
   para quem for animar qualquer coisa nesta coluna.

   A razao e a rasterizacao. Enquanto a inclinacao muda, a ESCALA PROJETADA do
   anel muda junto, e o navegador redesenha a textura da camada a cada quadro -
   uma camada de ate 560px, com `conic-gradient` e `mask`. Com a inclinacao
   fixa, o anel e redondo e portanto simetrico no proprio plano: girar em
   `rotateZ` nao altera a silhueta projetada, so leva o brilho do `conic` em
   volta. O compositor reaproveita a mesma textura e so muda a matriz.

   A licao que sobra, para a proxima vez: se alguem voltar a inclinar, a
   perspectiva tem de ser a FUNCAO `perspective()` dentro do `transform`, e
   nunca a propriedade `perspective` no pai. Com ela no pai o ponto de fuga e do
   contentor, e transladar o anel pela coluna muda a projecao - a textura tem de
   ser refeita a cada quadro. Foram 10 fps de diferenca.

   O que se perde e a respiracao de profundidade. O que fica - elipse inclinada,
   deriva pela coluna e brilho orbitando - e o que le como 3D, a 60 fps. */
@keyframes inmove-anel-a {
  0% { transform: translate(0, 0) rotateZ(0deg); }
  25% { transform: translate(-44px, 26px) rotateZ(90deg); }
  50% { transform: translate(-12px, 56px) rotateZ(180deg); }
  75% { transform: translate(36px, 22px) rotateZ(270deg); }
  100% { transform: translate(0, 0) rotateZ(360deg); }
}

@keyframes inmove-anel-b {
  0% { transform: translate(0, 0) rotateZ(0deg); }
  25% { transform: translate(40px, -32px) rotateZ(-90deg); }
  50% { transform: translate(-20px, -52px) rotateZ(-180deg); }
  75% { transform: translate(-52px, -14px) rotateZ(-270deg); }
  100% { transform: translate(0, 0) rotateZ(-360deg); }
}

/* As tres saidas, e as tres sao obrigatorias.
   =============================================================================
   1. `prefers-reduced-motion`, que o CLAUDE.md exige cobrir TODA animacao;
   2. `[data-effects="off"]`, a chave global que o resto do site ja respeita
      (ver `static/js/ritmo.js` e `static/js/depoimentos.js`);
   3. `forced-colors`, onde o sistema manda na paleta e um ornamento decorativo
      so atrapalharia - ele some inteiro, e nada de conteudo se perde.

   Sem animacao os aneis continuam la, parados. O ornamento nao depende do giro
   para fazer sentido. */
@media (prefers-reduced-motion: reduce) {
  .inmove-cartao .inmove-summary__details::before,
  .inmove-cartao .inmove-summary__details::after {
    animation: none;
  }

  /* Parada, a inclinacao fica: sem `transform`, `animation: none` devolveria um
     circulo chapado - outro desenho, e nao o mesmo desenho em repouso. */
  .inmove-cartao .inmove-summary__details::before {
    transform:;
  }

  .inmove-cartao .inmove-summary__details::after {
    transform:;
  }
}

:root[data-effects="off"] .inmove-cartao .inmove-summary__details::before,
:root[data-effects="off"] .inmove-cartao .inmove-summary__details::after {
  animation: none;
}

:root[data-effects="off"] .inmove-cartao .inmove-summary__details::before {
  transform:;
}

:root[data-effects="off"] .inmove-cartao .inmove-summary__details::after {
  transform:;
}

@media (forced-colors: active) {
  .inmove-cartao .inmove-summary__details {
    background: none;
  }

  .inmove-cartao .inmove-summary__details::before,
  .inmove-cartao .inmove-summary__details::after {
    display: none;
  }
}

.inmove-cartao .inmove-summary__activities-title {
  margin: 0;
  color: var(--inmove-paper);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Uma coluna so, como no mockup. Em duas colunas as sete experiencias ficavam
   seis emparelhadas e "Recreacao" sozinha atravessando a linha inteira - um
   orfao que a coluna unica resolve sem regra especial. */
.inmove-cartao .in-move__atividades {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
}

.inmove-cartao .in-move__atividades > li {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--cor-borda, var(--inmove-pista));
  border-radius: 0;
  background: transparent;
  color: var(--inmove-paper);
  font-size: 1rem;
  line-height: 1.45;
}

.inmove-cartao .in-move__atividades > li:last-child {
  border-bottom: 0;
}

.inmove-cartao .inmove-summary__activity-icon {
  flex-shrink: 0;
  color: var(--inmove-orange);
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A assinatura fecha a coluna. O fio vem de `::after` e nao de uma `<hr>`: e
   ornamento, e nada no conteudo muda de significado se ele nao pintar. */
.inmove-cartao .inmove-summary__signature {
  align-self: flex-end;
  max-width: 16ch;
  margin: auto 0 0;
  padding-top: clamp(22px, 2.6vw, 34px);
  color: var(--inmove-orange);
  font-family: "Yellowtail", cursive;
  font-size: clamp(1.5rem, 2vw, 1.875rem);
  font-weight: 400;
  /* `letter-spacing` fica em `normal`, e isso nao e preferencia: numa manuscrita
     LIGADA qualquer tracking positivo separa as letras e quebra as ligacoes,
     que e o unico motivo de existir uma manuscrita aqui. A regra anterior tinha
     `.005em` herdado do Archivo. */
  letter-spacing: normal;
  /* Yellowtail tem ascendentes e descendentes longos; 1.25 encavalava as duas
     linhas. */
  line-height: 1.45;
  text-align: right;
}

.inmove-cartao .inmove-summary__signature::after {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  margin: 14px 0 0 auto;
  background: currentColor;
}

@media (max-width: 980px) {
  .inmove-cartao .inmove-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 28px;
  }

  /* Os aneis encolhem com a coluna. Em medida fixa, 560px numa coluna de 276px
     viram um arco quase reto atravessando a lista - deixa de ler como circulo. */
  .inmove-cartao .inmove-summary__details {
    --inmove-anel-a: 320px;
    --inmove-anel-a-topo: -48px;
    --inmove-anel-a-lado: -108px;
    --inmove-anel-b: 420px;
    --inmove-anel-b-base: -128px;
    --inmove-anel-b-lado: -96px;
    padding-left: 24px;
  }

  .inmove-cartao .in-move__atividades > li {
    gap: 12px;
    min-height: 58px;
    font-size: .9375rem;
  }
}

@media (max-width: 760px) {
  .inmove-cartao .inmove-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Numa coluna a lista fica alta e estreita: os aneis passam a acompanhar a
     LARGURA, senao so se ve um pedaco reto de arco. */
  .inmove-cartao .inmove-summary__details {
    --inmove-anel-a: 300px;
    --inmove-anel-a-topo: -72px;
    --inmove-anel-a-lado: -96px;
    --inmove-anel-b: 380px;
    --inmove-anel-b-base: -150px;
    --inmove-anel-b-lado: -110px;
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid var(--cor-borda, var(--inmove-pista));
  }

  .inmove-cartao .inmove-summary__slogan {
    font-size: clamp(2.5rem, 8vw, 3.25rem);
  }

  .inmove-cartao .descricao {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* Numa coluna a assinatura nao tem pe de coluna para ocupar: ela passa a
     fechar a lista, e o `margin: auto` de cima deixaria de ter efeito util. */
  .inmove-cartao .inmove-summary__signature {
    margin-top: 0;
    padding-top: 26px;
  }
}

@media (max-width: 420px) {
  .inmove-cartao .inmove-summary {
    padding: 22px 18px;
  }

  .inmove-cartao .inmove-summary__action {
    gap: 16px;
    padding: 16px 18px;
  }

  .inmove-cartao .inmove-summary__tagline {
    letter-spacing: .16em;
  }
}