/* ==========================================================================
   CarOffice: moldura das páginas internas do site institucional

   Capa, kit de blocos (painel, painel de dados, passos, aviso,
   especificações, bloco dividido, fita), "Continue por aqui", chamada final,
   movimento por rolagem e responsivo. Marcação em site/fonte/internas.php.
   Cores só por token (tokens.css); .em-papel reescreve os tokens.
   As regras de cartão valem só nas internas: main:has(> .capa).
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Capa: a primeira dobra de toda pagina interna
   -------------------------------------------------------------------------- */
.capa {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--esp-secao-curta) var(--esp-secao);
  background: var(--base-pagina);

  --divisa-topo: inset 0 0 0 0 transparent;
  --divisa-base: inset 0 0 0 0 transparent;
  box-shadow: var(--divisa-topo), var(--divisa-base);
}

.capa:has(+ .em-papel) {
  --divisa-base: inset 0 calc(var(--divisa-altura) * -1)
    calc(var(--divisa-altura) * 0.82) calc(var(--divisa-altura) * -0.72)
    var(--divisa-cor);
}

/* --- Atmosfera ---------------------------------------------------------- */
.capa-atmosfera {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.capa-halo {
  position: absolute;
  top: calc(var(--e9) * -1);
  right: calc(var(--e7) * -1);
  width: min(720px, 72%);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(circle, var(--brilho-acento), transparent 68%);
  opacity: 0.85;
}

.capa-grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--borda) 1px, transparent 1px),
    linear-gradient(90deg, var(--borda) 1px, transparent 1px);
  background-size: 72px 72px;

  mask-image: radial-gradient(
    120% 100% at 8% 0%,
    color-mix(in srgb, var(--preto) 50%, transparent),
    transparent 62%
  );
  opacity: 0.55;
}

.capa-orbita {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(660px, 64%);
  aspect-ratio: 1;

  translate: 12% -54%;
  border-radius: var(--r-full);
  background: conic-gradient(
    from 205deg,
    transparent 0 40%,
    var(--acento-linha) 58%,
    color-mix(in srgb, var(--acento-brilho) 55%, transparent) 72%,
    transparent 88%
  );

  mask: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2px),
    var(--preto) calc(100% - 2px)
  );
}

.capa-orbita--interna {
  width: min(412px, 41%);
  --mov-giro: -15deg;
  background: conic-gradient(
    from 35deg,
    transparent 0 56%,
    var(--acento-linha) 76%,
    transparent 92%
  );
}

.capa-brasa {
  position: absolute;
  bottom: calc(var(--e8) * -1);
  left: calc(var(--e7) * -1);
  width: min(560px, 60%);
  aspect-ratio: 1.4;
  border-radius: var(--r-full);
  background: radial-gradient(
    ellipse at center,
    var(--acento-vidro),
    transparent 70%
  );
  --mov-forca: 8%;
}

/* --- Corpo --------------------------------------------------------------- */

.capa-interna {
  display: grid;
  gap: var(--esp-bloco);
}

.capa-corpo {
  display: grid;
  gap: var(--esp-grid);
  align-items: center;
}

.capa--dividida .capa-corpo {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
}

.capa-texto {
  display: grid;
  justify-items: start;
  gap: var(--e5);
  max-width: 62ch;
}

.capa-sobre {
  color: var(--acento);
}

.capa h1 > .capa-sobre {
  margin-bottom: var(--e5);
  font-family: var(--fonte);
  font-style: normal;
  text-wrap: wrap;
}

.capa-h1-frase {
  display: block;
}

.capa h1 {
  margin: 0;
  max-width: 24ch;
  font-size: var(--t2);
  line-height: 1.04;
  letter-spacing: var(--tk1);
}

.capa h1 em {
  font-style: normal;
  color: var(--acento);
}

.capa:not(.capa--dividida) .capa-texto {
  max-width: none;
}

.capa:not(.capa--dividida) .capa-lead,
.capa:not(.capa--dividida) .capa-nota {
  max-width: 62ch;
}

.capa-lead {
  margin: 0;
  max-width: 58ch;
  font-size: var(--c1);
  line-height: 1.65;
  color: var(--suave);
}

.capa-lead strong {
  color: var(--texto);
  font-weight: var(--p-medio);
}

.capa-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

/* --- Selos -------------------------------------------------------------- */
.capa-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.capa-selos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-size: var(--c4);
  line-height: 1.5;
  color: var(--suave);
}

.capa-selos .icone {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--acento);
}

.capa-nota {
  margin: 0;
  max-width: 54ch;
}

/* --- Figura ------------------------------------------------------------- */
.capa-figura {
  margin: 0;
  display: grid;
  gap: var(--e3);
}

.capa-moldura {
  position: relative;

  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-3);
}

.capa-moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--base-pagina),
    transparent 46%
  );
  opacity: 0.55;
}

.capa-moldura img {
  display: block;
  width: 100%;
  height: auto;
}

.capa-figura figcaption {
  font-size: var(--c5);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

/* --- Painel ------------------------------------------------------------- */
.capa-painel {
  position: relative;
  padding: var(--e5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}

/* --- Variantes ----------------------------------------------------------- */

.capa--compacta {
  padding-block: var(--esp-secao-curta);
}

.capa--compacta h1 {
  font-size: var(--t3);
}

.capa--centro .capa-texto {
  justify-items: center;
  max-width: none;
  text-align: center;
}

.capa--centro .capa-corpo {
  justify-items: center;
}

.capa--centro .capa-acoes,
.capa--centro .capa-selos {
  justify-content: center;
}

.capa--centro .capa-lead {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   05. Blocos de conteudo
   -------------------------------------------------------------------------- */

/* --- 5.0 Ritmo entre blocos irmaos -------------------------------------- */
.secao .container
  > :is(.painel, .painel-dados, .grade, .passos, .aviso, .nota, .especificacoes,
        .dupla, .fita, .acordeao, .cartao-link)
  + :is(.painel, .painel-dados, .grade, .passos, .aviso, .nota, .especificacoes,
        .dupla, .fita, .acordeao, .cartao-link) {
  margin-top: var(--esp-bloco);
}


/* --- 5.0.1 Painel ------------------------------------------------------- */
.painel {
  display: grid;
  align-content: start;
  gap: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-1);
}

.painel-titulo {
  margin: 0;
  color: var(--acento);
  font-family: var(--fonte);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

/* --- 5.0b Cartao nas internas ------------------------------------------- */
main:has(> .capa) .cartao {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--e3);
}

main:has(> .capa) .cartao h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  letter-spacing: var(--tk3);
}

main:has(> .capa) .cartao p:not([class]) {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.68;
  color: var(--suave);
}

main:has(> .capa) .cartao > .cartao-icone {
  margin-bottom: var(--e1);
}

/* --- 5.1 Painel de dados ------------------------------------------------ */
.painel-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--e5);
  padding: var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background: var(--sup-1);
}

.dado {
  display: grid;
  gap: var(--e2);
  align-content: start;
}

.dado-numero {
  font-family: var(--fonte);
  font-size: var(--t4);
  font-weight: var(--p-max);
  line-height: 1;
  letter-spacing: var(--tk2);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.dado-rotulo {
  font-size: var(--c4);
  line-height: 1.5;
  color: var(--suave);
}

.dado-rotulo strong {
  display: block;
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- 5.2 Passos --------------------------------------------------------- */
.passos {
  display: grid;
  gap: var(--e6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  counter-increment: passo;
}

.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  background: var(--sup-1);
  font-family: var(--fonte);
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-micro);
  color: var(--acento);
}

.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 22px;
  bottom: calc(var(--e6) * -1);
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--borda-forte),
    transparent
  );
}

.passo-corpo {
  display: grid;
  align-content: start;
  gap: var(--e2);
  padding-top: var(--e2);
}

.passo-corpo h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.passo-corpo p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

.passo-corpo > :is(.link-seta, .botao, .fita, .selo, .painel-titulo) {
  justify-self: start;
}

.passos--duplo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-bloco) var(--esp-grid);
}

.passos--duplo .passo:not(:last-child)::after {
  content: none;
}

.passos--duplo .passo:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.passos--linha {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--esp-grid);
}

.passos--linha .passo {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e3);
}

.passos--linha .passo:not(:last-child)::after {
  display: none;
}

.passos--linha .passo-corpo {
  padding-top: 0;
}

/* --- 5.5 Aviso ---------------------------------------------------------- */
.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-left: 2px solid var(--acento);
  border-radius: var(--r-md);
  background: var(--sup-1);
}

.aviso .icone {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--acento);
}

.aviso > :not(.icone) {
  grid-column: 2;
}

.aviso p {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

.aviso p + p {
  margin-top: var(--e3);
}

.aviso strong {
  color: var(--texto);
  font-weight: var(--p-medio);
}

/* --- 5.6 Especificacoes ------------------------------------------------- */
.especificacoes {
  display: grid;
  gap: 0;
  margin: 0;

  container-type: inline-size;
  container-name: especificacoes;
}

.especificacoes div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--e3) var(--e5);
  padding-block: var(--e4);
  border-bottom: 1px solid transparent;
}

.especificacoes div::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: var(--borda);
  transform-origin: left center;
}

.especificacoes div:first-child {
  padding-top: 0;
}

.especificacoes div:last-child {
  border-bottom: 0;
}

.especificacoes div:last-child::after {
  content: none;
}

.especificacoes dt {
  font-size: var(--c4);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--texto);
}

.especificacoes dd {
  margin: 0;
  font-size: var(--c3);
  line-height: 1.7;
  color: var(--suave);
}

@container especificacoes (max-width: 520px) {
  .especificacoes div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
  }
}

/* --- 5.7 Bloco dividido ------------------------------------------------- */
.dupla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: center;
}

.dupla--texto-maior {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.dupla--apoio-maior {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.dupla--topo {
  align-items: start;
}

.dupla > [data-lado="fim"] {
  order: 1;
}

.dupla-texto {
  display: grid;
  justify-items: start;
  gap: var(--e4);
  max-width: 56ch;
}

.dupla-texto h2 {
  margin: 0;
  font-size: var(--t4);
  line-height: 1.1;
  letter-spacing: var(--tk2);
}

.dupla-texto h3 {
  margin: 0;
  font-size: var(--c1);
  line-height: 1.3;
  color: var(--texto);
}

.dupla-texto p:not([class]) {
  margin: 0;
  font-size: var(--c2);
  line-height: 1.75;
  color: var(--suave);
}

/* --- 5.10 Fita de itens ------------------------------------------------- */
.fita {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fita li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  font-size: var(--c4);
  line-height: 1.4;
  color: var(--suave);
}

.fita .icone {
  width: 15px;
  height: 15px;
  color: var(--acento);
}

/* --- 5.11 Cartao de recurso -------------------------------------------- */
.cartao-link {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding-right: var(--e6);
}

.cartao-link .cartao-seta {
  position: absolute;
  top: var(--e5);
  right: var(--e5);
  font-style: normal;
  font-size: var(--c3);
  color: var(--tenue);
  transition:
    color var(--dur-1) var(--ease),
    translate var(--dur-2) var(--ease-solto);
}

.cartao-link:hover .cartao-seta {
  color: var(--acento);
  translate: 2px -2px;
}

/* --------------------------------------------------------------------------
   06. Relacionadas
   -------------------------------------------------------------------------- */
.bloco-relacionadas .sobretitulo {
  display: block;
  margin: 0 0 var(--e5);
  color: var(--tenue);
}

.relacionadas-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e4);
}

.relacionada {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  padding: var(--e5);
  padding-right: var(--e7);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-1);
  transition:
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    translate var(--dur-2) var(--ease-solto);
}

.relacionada:hover {
  border-color: var(--borda-forte);
  background: var(--sup-2);
  translate: 0 -3px;
}

.relacionada strong {
  font-family: var(--fonte);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  line-height: 1.3;
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.relacionada p {
  margin: 0;
  font-size: var(--c4);
  line-height: 1.6;
  color: var(--suave);
}

.relacionada-seta {
  position: absolute;
  top: var(--e5);
  right: var(--e5);
  font-size: var(--c3);
  color: var(--tenue);
  transition:
    color var(--dur-1) var(--ease),
    translate var(--dur-2) var(--ease-solto);
}

.relacionada:hover .relacionada-seta {
  color: var(--acento);
  translate: 2px -2px;
}

/* --------------------------------------------------------------------------
   07. Chamada final
   -------------------------------------------------------------------------- */
.chamada-final {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--base-pagina);
}

.chamada-atmosfera {
  position: absolute;
  inset: auto -10% -40% 30%;
  z-index: -1;
  aspect-ratio: 2.4;
  border-radius: var(--r-full);
  background: radial-gradient(
    ellipse at center,
    var(--brilho-acento),
    transparent 68%
  );
  pointer-events: none;
  --mov-forca: 6%;
}

.chamada-interna {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--esp-grid);
  align-items: center;
}

.chamada-texto {
  display: grid;
  justify-items: start;
  gap: var(--e4);
}

.chamada-texto h2 {
  margin: 0;
  max-width: 18ch;
  font-size: var(--t3);
  line-height: 1.06;
  letter-spacing: var(--tk2);
}

.chamada-texto h2 em {
  font-style: normal;
  color: var(--acento);
}

.chamada-texto p {
  margin: 0;
  max-width: 54ch;
  font-size: var(--c2);
  line-height: 1.75;
  color: var(--suave);
}

.chamada-acao {
  display: grid;
  justify-items: start;
  gap: var(--e4);
  padding: var(--e6);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--superficie);
  box-shadow: var(--sombra-3);
}

.chamada-acao .nota {
  margin: 0;
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   08. Movimento das internas
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* --- 8.1 Profundidade do bloco dividido ------------------------------ */
    main:has(> .capa) .dupla > :not(.dupla-texto) {
      --mov-forca: 1.1%;
      animation: mov-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* --- 8.2 O fio dos passos se desenha --------------------------------- */
    .passo:not(:last-child)::after {
      transform-origin: center top;
      scale: 1 0;
      animation: passo-fio linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 30%;
    }

    @keyframes passo-fio {
      to {
        scale: 1 1;
      }
    }

    /* --- 8.3 A lista de especificacoes se escreve ------------------------ */
    .especificacoes div::after {
      animation: mov-fio linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 25%;
    }

    /* --- 8.4 As relacionadas chegam em cascata --------------------------- */
    .relacionadas-grade > .relacionada {
      --mov-empurra: 28px;
      animation: mov-empurrar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    .relacionadas-grade > .relacionada:nth-child(2) {
      animation-range: entry 16% cover 34%;
    }

    .relacionadas-grade > .relacionada:nth-child(3) {
      animation-range: entry 22% cover 38%;
    }

    .relacionadas-grade > .relacionada:nth-child(4) {
      animation-range: entry 28% cover 42%;
    }

  }
}

/* --------------------------------------------------------------------------
   09. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .capa--dividida .capa-corpo {
    gap: var(--esp-bloco);
  }
}

@media (max-width: 980px) {
  .capa--dividida .capa-corpo,
  .dupla,
  .dupla--texto-maior,
  .dupla--apoio-maior,
  .chamada-interna {
    grid-template-columns: minmax(0, 1fr);
  }

  .dupla > [data-lado="fim"] {
    order: 0;
  }

  .capa h1 {
    font-size: var(--t3);
  }

  .chamada-texto h2 {
    max-width: 24ch;
  }

  .especificacoes div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
  }
}

@media (max-width: 680px) {
  .capa {
    padding-block: var(--e6) var(--esp-secao-curta);
  }

  .capa h1 {
    font-size: var(--t4);
  }

  .capa--compacta h1 {
    font-size: var(--t5);
  }

  .capa-texto {
    max-width: none;
  }

  .capa-acoes {
    width: 100%;
  }

  .capa-acoes .botao {
    flex: 1 1 100%;
    justify-content: center;
  }

  .capa-grade {
    background-size: 54px 54px;
  }

  .painel-dados,
  .chamada-acao,
  .capa-painel {
    padding: var(--e5);
  }

  .passo {
    gap: var(--e3);
  }

  .passos--duplo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--esp-bloco);
  }

  .relacionada {
    padding-right: var(--e6);
  }
}

@media (max-width: 380px) {
  .painel-dados {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
  }

  .dado-numero {
    font-size: var(--t5);
  }

  .passo {
    grid-template-columns: minmax(0, 1fr);
  }

  .passo:not(:last-child)::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10. Complementos do CarOffice
   -------------------------------------------------------------------------- */

/* Título de painel com ícone à frente. */
.painel-titulo:has(> .icone) {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.painel-titulo > .icone {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Lista marcada dentro de painel: um pouco mais compacta. */
.painel .lista-marcada {
  gap: var(--e3);
}

/* Nota com ícone (roteiro, aviso curto). */
.nota:has(> .icone) {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
}

.nota > .icone {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--acento);
}

/* Link de seção sob a grade. */
.secao .container > .secao-acao {
  margin-top: var(--esp-bloco);
}

/* Dados de privacidade e afins: rótulo pequeno, valor em destaque. */
dl.painel {
  margin: 0;
}

dl.painel > div {
  display: grid;
  gap: var(--e1);
}

dl.painel dt {
  color: var(--tenue);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
}

dl.painel dd {
  display: grid;
  gap: var(--e1);
  margin: 0;
  color: var(--texto);
  font-size: var(--c2);
  overflow-wrap: anywhere;
}

dl.painel dd span {
  color: var(--suave);
  font-size: var(--c3);
}