/* ================================================================
   1. Fontes locais
   ================================================================ */
@font-face {
  font-family: "Inter Local";
  src: url("/assets/fonts/inter-lat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Local";
  src: url("/assets/fonts/inter-lat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Local";
  src: url("/assets/fonts/bodoni-moda-lat.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   2. Variáveis
   ================================================================ */
:root {
  --fol-papel: #f6f5f0;
  --fol-placa: #ffffff;
  --fol-tinta: #292a2c;
  --fol-tinta-viva: #000000;
  --fol-tinta-fraca: #55565a;
  --fol-zebra: #efede5;
  --fol-serif: "Bodoni Local", ui-serif, Georgia, "Times New Roman", serif;
  --fol-sans: "Inter Local", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --fol-passo: 6px;
  --fol-ar-1: 12px;
  --fol-ar-2: 24px;
  --fol-ar-3: 36px;
  --fol-ar-4: 56px;
  --fol-ar-5: 88px;
  --fol-ar-6: 120px;
  --fol-medida: 43rem;
  --fol-cinta: 68rem;
  --fol-cinta-larga: 80rem;
}

/* ================================================================
   3. Base e reposição
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fol-papel);
  color: var(--fol-tinta);
  font-family: var(--fol-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.85;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
a { color: var(--fol-tinta-viva); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fol-tinta-viva);
  outline-offset: 3px;
}
.fol-salto {
  position: absolute;
  left: -9999px;
  top: 0;
}
.fol-salto:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--fol-tinta-viva);
  color: var(--fol-papel);
  padding: 12px 20px;
  text-decoration: none;
}
.fol-corpo { outline: none; }
.fol-ponto { color: var(--fol-tinta-fraca); }

/* ================================================================
   4. Tipografia
   ================================================================ */
.fol-nome {
  font-family: var(--fol-serif);
  font-weight: 400;
  color: var(--fol-tinta-viva);
  font-size: clamp(42px, 10vw, 116px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0 0 var(--fol-ar-2);
  text-align: center;
}
.fol-nome--caderno { font-size: clamp(36px, 7.2vw, 82px); }
.fol-nome--ficha { font-size: clamp(32px, 5vw, 56px); line-height: 1.06; text-align: left; }
.fol-rubrica {
  font-family: var(--fol-serif);
  font-weight: 400;
  color: var(--fol-tinta-viva);
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 var(--fol-ar-2);
}
.fol-rubrica--miuda { font-size: clamp(20px, 2.6vw, 27px); line-height: 1.25; }
.fol-sobrescrito {
  margin: 0 0 var(--fol-ar-1);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fol-tinta-fraca);
  text-align: center;
}
.fol-prosa { margin: 0 0 var(--fol-ar-2); max-width: var(--fol-medida); }
.fol-prosa--intro { font-size: 19px; }
.fol-entrada { max-width: var(--fol-medida); }
.fol-entrada p { margin: 0 0 var(--fol-ar-2); font-size: 19px; line-height: 1.9; }
.fol-entrada--esq { margin-left: 0; }
.fol-prosa a, .fol-entrada a, .fol-legenda a, .fol-juridico a, .fol-aviso__elo, .fol-nota a {
  color: var(--fol-tinta-viva);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fol-rol { list-style: none; margin: 0 0 var(--fol-ar-2); max-width: var(--fol-medida); }
.fol-rol li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.fol-rol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 12px;
  height: 1px;
  background: var(--fol-tinta-fraca);
}
.fol-datada {
  margin: 0 0 var(--fol-ar-2);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--fol-tinta-fraca);
  text-align: center;
}

/* ================================================================
   5. Cintas e cadernos
   ================================================================ */
.fol-cinta {
  width: 100%;
  max-width: var(--fol-cinta);
  margin-inline: auto;
  padding-inline: 22px;
}
.fol-cinta--estreita { max-width: 48rem; }
.fol-cinta--larga { max-width: var(--fol-cinta-larga); }
.fol-caderno { padding-block: var(--fol-ar-5); }
.fol-caderno--cerrado { padding-block: var(--fol-ar-4); }
.fol-caderno--largo { padding-block: var(--fol-ar-6); }
.fol-caderno--texto { padding-block: var(--fol-ar-3); }
.fol-caderno--prancha { padding-block: var(--fol-ar-2); }
.fol-caderno--remate { padding-block: var(--fol-ar-5) var(--fol-ar-6); }
.fol-pilha { display: grid; gap: 64px; margin-top: var(--fol-ar-3); }

/* ================================================================
   6. Abertura
   ================================================================ */
.fol-abertura { padding-block: var(--fol-ar-4) var(--fol-ar-3); }
.fol-abertura--caderno { padding-block: var(--fol-ar-4) var(--fol-ar-2); }
.fol-abertura--ficha .fol-sobrescrito { text-align: left; }
.fol-abertura__teclas {
  margin: var(--fol-ar-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.fol-cabecalho { display: grid; gap: var(--fol-ar-2); }
.fol-cabecalho__prancha img { width: 148px; height: auto; background: var(--fol-placa); }

/* ================================================================
   7. Mostra de fichas
   ================================================================ */
.fol-mostra__cinta { margin-top: var(--fol-ar-4); }
.fol-mostra__rotulo {
  margin: 0 0 var(--fol-ar-2);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fol-tinta-fraca);
  text-align: center;
}
.fol-mostra {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 26px;
}
.fol-mostra__elo {
  display: block;
  width: 108px;
  text-align: center;
  text-decoration: none;
  color: var(--fol-tinta);
  padding-bottom: 6px;
}
.fol-mostra__elo img {
  width: 86px;
  height: 86px;
  margin: 0 auto 10px;
  background: var(--fol-placa);
}
.fol-mostra__nome { display: block; font-size: 12px; line-height: 1.4; }
.fol-mostra__elo:hover .fol-mostra__nome { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   8. Lâminas em ziguezague
   ================================================================ */
.fol-lamina { display: grid; gap: var(--fol-ar-2); align-items: start; }
.fol-lamina__prancha img { width: 100%; background: var(--fol-placa); }
.fol-lamina:not(.fol-lamina--figura) .fol-lamina__prancha img { max-width: 300px; }
.fol-lamina__titulo {
  font-family: var(--fol-serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.14;
  margin: 0 0 10px;
}
.fol-lamina__titulo a { color: var(--fol-tinta-viva); text-decoration: none; }
.fol-lamina__titulo a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fol-lamina__meta {
  margin: 0 0 var(--fol-ar-1);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fol-tinta-fraca);
}
.fol-lamina__acao { margin: var(--fol-ar-1) 0 0; }
.fol-legenda { font-size: 15px; line-height: 1.7; color: var(--fol-tinta-fraca); }

/* ================================================================
   9. Grelhas
   ================================================================ */
.fol-grelha { display: grid; gap: var(--fol-ar-3); list-style: none; }
.fol-grelha--dupla { margin-top: var(--fol-ar-3); }
.fol-grelha--generos { margin-top: var(--fol-ar-3); }
.fol-porta { background: var(--fol-placa); padding: 32px 28px; }
.fol-porta__titulo { font-family: var(--fol-serif); font-weight: 400; font-size: 30px; line-height: 1.12; margin: 0 0 var(--fol-ar-1); }
.fol-porta__titulo a { color: var(--fol-tinta-viva); text-decoration: none; }
.fol-porta__titulo a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fol-porta__conta { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fol-tinta-fraca); }
.fol-genero { background: var(--fol-placa); padding: 30px 26px; }
.fol-genero__sinal { width: 28px; height: 28px; color: var(--fol-tinta); margin-bottom: 14px; }
.fol-genero__titulo { font-family: var(--fol-serif); font-weight: 400; font-size: 25px; line-height: 1.2; margin: 0 0 10px; }
.fol-genero__acao { margin: 0; font-size: 15px; }

/* ================================================================
   10. Quadros comparativos
   ================================================================ */
.fol-quadro { overflow-x: auto; margin: var(--fol-ar-3) 0 var(--fol-ar-1); }
.fol-quadro:focus-visible { outline: 2px solid var(--fol-tinta-viva); outline-offset: 4px; }
.fol-tabela { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 16px; line-height: 1.6; }
.fol-tabela__legenda {
  caption-side: top;
  text-align: left;
  font-family: var(--fol-serif);
  font-size: 21px;
  line-height: 1.3;
  color: var(--fol-tinta-viva);
  padding-bottom: 16px;
}
.fol-tabela th, .fol-tabela td { padding: 13px 16px; text-align: left; vertical-align: top; }
.fol-tabela thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fol-tinta);
  border-bottom: 1px solid var(--fol-tinta);
}
.fol-tabela tbody tr:nth-child(odd) { background: var(--fol-zebra); }
.fol-tabela tbody th { font-weight: 600; color: var(--fol-tinta-viva); }
.fol-nota { margin: 0; font-size: 15px; line-height: 1.7; color: var(--fol-tinta-fraca); max-width: var(--fol-medida); }

/* ================================================================
   11. Blocos editoriais
   ================================================================ */
.fol-citacao { margin: var(--fol-ar-3) 0; padding: 0; }
.fol-citacao p {
  margin: 0;
  font-family: var(--fol-serif);
  font-size: clamp(23px, 3.6vw, 38px);
  line-height: 1.22;
  color: var(--fol-tinta-viva);
  max-width: 34rem;
}
.fol-passos { list-style: none; display: grid; gap: var(--fol-ar-3); margin-top: var(--fol-ar-3); }
.fol-passo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; }
.fol-passo__numero {
  grid-row: 1 / span 2;
  font-family: var(--fol-serif);
  font-size: 58px;
  line-height: 0.86;
  color: var(--fol-tinta-fraca);
}
.fol-passo__titulo { font-family: var(--fol-serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0; }
.fol-passo .fol-prosa { margin: 0; }
.fol-prancha__legenda { margin-top: var(--fol-ar-1); font-size: 15px; line-height: 1.7; color: var(--fol-tinta-fraca); max-width: var(--fol-medida); }
.fol-ficha__lista { margin: var(--fol-ar-2) 0 0; }
.fol-verbete { display: grid; gap: 2px; padding: 12px 16px; }
.fol-verbete:nth-child(odd) { background: var(--fol-zebra); }
.fol-verbete dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fol-tinta-fraca); }
.fol-verbete dd { margin: 0; font-size: 17px; line-height: 1.6; }
.fol-balanco { display: grid; gap: var(--fol-ar-2); margin-top: var(--fol-ar-2); }
.fol-listra { background: var(--fol-placa); padding: 28px 26px; }
.fol-listra__titulo { font-family: var(--fol-serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 var(--fol-ar-1); }
.fol-listra .fol-rol { margin-bottom: 0; }
.fol-remate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 var(--fol-ar-2); }
.fol-remate__valor { font-family: var(--fol-serif); font-size: clamp(52px, 8vw, 78px); line-height: 0.9; color: var(--fol-tinta-viva); }
.fol-remate__escala { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fol-tinta-fraca); }
.fol-elos__rol, .fol-indice { list-style: none; display: grid; gap: 3px; margin-top: var(--fol-ar-2); margin-bottom: var(--fol-ar-3); }
.fol-elos__rol .fol-elo, .fol-indice .fol-elo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 18px;
  min-height: 48px;
  padding: 12px 18px;
  background: var(--fol-placa);
  color: var(--fol-tinta-viva);
  text-decoration: none;
  font-size: 17px;
}
.fol-elos__rol .fol-elo:hover, .fol-indice .fol-elo:hover { background: var(--fol-tinta-viva); color: var(--fol-papel); }
.fol-elos__rol .fol-elo:hover .fol-elo__cauda, .fol-indice .fol-elo:hover .fol-elo__cauda { color: var(--fol-papel); }
.fol-elo__cauda { font-size: 13px; color: var(--fol-tinta-fraca); }
.fol-genero__acao .fol-elo { color: var(--fol-tinta-viva); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   12. Teclas
   ================================================================ */
.fol-tecla {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0 8px 8px 0;
  padding: 12px 24px;
  font-family: var(--fol-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--fol-tinta-viva);
  background: var(--fol-papel);
  border: 1px solid var(--fol-tinta-viva);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
/* offset contour instead of a rounded rectangle — the whole site uses this one shape */
.fol-tecla::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--fol-tinta-viva);
  transform: translate(7px, 7px);
  transition: transform 0.18s ease;
  pointer-events: none;
}
.fol-tecla__sinal { width: 18px; height: 18px; flex: none; }
.fol-tecla:hover { background: var(--fol-tinta-viva); color: var(--fol-papel); }
.fol-tecla:hover::after { transform: translate(0, 0); }
.fol-tecla:active { transform: translate(3px, 3px); }
.fol-tecla:active::after { transform: translate(0, 0); }
.fol-tecla:focus-visible { outline: 2px solid var(--fol-tinta-viva); outline-offset: 5px; }
.fol-tecla--cheia { background: var(--fol-tinta-viva); color: var(--fol-papel); }
.fol-tecla--cheia:hover { background: var(--fol-papel); color: var(--fol-tinta-viva); }

/* ================================================================
   13. Topo e leme
   ================================================================ */
.fol-topo { position: sticky; top: 0; z-index: 40; background: var(--fol-papel); }
.fol-topo__faixa {
  max-width: var(--fol-cinta-larga);
  margin-inline: auto;
  padding: 10px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.fol-marca {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--fol-serif);
  font-size: 23px;
  letter-spacing: 0.01em;
  color: var(--fol-tinta-viva);
  text-decoration: none;
}
.fol-marca__dois { font-style: italic; color: var(--fol-tinta); }
.fol-marca:hover { text-decoration: underline; text-underline-offset: 6px; }
.fol-gatilho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  font-family: var(--fol-sans);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fol-tinta-viva);
  background: transparent;
  border: 1px solid var(--fol-tinta-viva);
  border-radius: 0;
  cursor: pointer;
}
.fol-gatilho__sinal { width: 20px; height: 20px; }
.fol-gatilho[aria-expanded="true"] { background: var(--fol-tinta-viva); color: var(--fol-papel); }
.fol-leme__lista { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.fol-leme__elo {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 15px;
  color: var(--fol-tinta-viva);
  text-decoration: none;
}
.fol-leme__elo:hover { text-decoration: underline; text-underline-offset: 7px; }
.fol-leme__elo--aqui { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }

/* ================================================================
   14. Trilho
   ================================================================ */
.fol-trilho { margin-bottom: var(--fol-ar-2); }
.fol-trilho__lista { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--fol-tinta-fraca); }
.fol-trilho__passo { display: inline-flex; align-items: center; }
.fol-trilho__passo + .fol-trilho__passo::before { content: "\2014"; margin-right: 10px; color: var(--fol-tinta-fraca); }
.fol-trilho a { color: var(--fol-tinta); text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   15. Rodapé
   ================================================================ */
.fol-rodape { background: var(--fol-papel); padding: var(--fol-ar-5) 0 var(--fol-ar-3); }
.fol-rodape__faixa {
  max-width: var(--fol-cinta-larga);
  margin-inline: auto;
  padding-inline: 22px;
  display: grid;
  gap: var(--fol-ar-3);
}
.fol-rodape__marca { margin: 0 0 var(--fol-ar-1); font-family: var(--fol-serif); font-size: 26px; color: var(--fol-tinta-viva); }
.fol-rodape__titulo { margin: 0 0 var(--fol-ar-1); font-family: var(--fol-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fol-tinta-fraca); }
.fol-rodape__linha { margin: 0 0 var(--fol-ar-1); font-size: 15px; line-height: 1.75; }
.fol-rodape__rol { list-style: none; display: grid; gap: 0; }
.fol-rodape__rol a, .fol-correio { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--fol-tinta-viva); text-decoration: underline; text-underline-offset: 3px; }
.fol-rodape__nota {
  max-width: var(--fol-cinta-larga);
  margin: var(--fol-ar-3) auto 0;
  padding-inline: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fol-tinta-fraca);
}

/* ================================================================
   16. Aviso de rodapé
   ================================================================ */
.fol-aviso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--fol-placa); }
.fol-aviso__faixa {
  max-width: var(--fol-cinta-larga);
  margin-inline: auto;
  padding: 18px 22px;
  display: grid;
  gap: 14px;
}
.fol-aviso__titulo { margin: 0 0 6px; font-family: var(--fol-serif); font-size: 20px; line-height: 1.2; color: var(--fol-tinta-viva); }
.fol-aviso__linha { margin: 0; font-size: 14px; line-height: 1.7; }
.fol-aviso__teclas { display: flex; flex-wrap: wrap; gap: 10px; }
.fol-aviso .fol-tecla { font-size: 14px; padding: 11px 18px; }

/* ================================================================
   17. Páginas jurídicas
   ================================================================ */
.fol-juridico .fol-artigo { margin-bottom: var(--fol-ar-4); }
.fol-rubrica--numerada { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; font-size: clamp(22px, 3vw, 30px); }
.fol-artigo__num { font-family: var(--fol-serif); color: var(--fol-tinta-fraca); }
.fol-juridico .fol-prosa, .fol-juridico .fol-rol { max-width: var(--fol-medida); }

/* ================================================================
   18. Ecrãs largos
   ================================================================ */
@media (min-width: 700px) {
  .fol-grelha--generos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fol-verbete { grid-template-columns: 15rem minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
  .fol-aviso__faixa { padding: 20px 26px; }
}
@media (min-width: 820px) {
  .fol-grelha--dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fol-balanco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fol-ar-3); }
  .fol-cabecalho { grid-template-columns: 148px minmax(0, 1fr); gap: var(--fol-ar-3); align-items: start; }
}
@media (min-width: 880px) {
  .fol-lamina { gap: var(--fol-ar-3); align-items: center; }
  .fol-lamina--impar { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .fol-lamina--par { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .fol-lamina--impar .fol-lamina__prancha { grid-column: 1; grid-row: 1; }
  .fol-lamina--impar .fol-lamina__prosa { grid-column: 2; grid-row: 1; }
  .fol-lamina--par .fol-lamina__prancha { grid-column: 2; grid-row: 1; }
  .fol-lamina--par .fol-lamina__prosa { grid-column: 1; grid-row: 1; }
  .fol-lamina--figura.fol-lamina--impar { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .fol-lamina--figura.fol-lamina--par { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .fol-rodape__faixa { grid-template-columns: 1.5fr 1fr 1.3fr; gap: var(--fol-ar-4); }
  .fol-passo { grid-template-columns: 5rem minmax(0, 1fr); }
  .fol-passo__numero { font-size: 72px; }
}
@media (min-width: 1000px) {
  .fol-grelha--generos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fol-gatilho { display: none; }
  .fol-topo__faixa { padding: 8px 30px; }
  .fol-aviso__faixa { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--fol-ar-3); }
}
@media (max-width: 999px) {
  .fol-leme { display: none; width: 100%; }
  .fol-leme--aberto { display: block; }
  .fol-leme__lista { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .fol-leme__elo { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fol-tecla, .fol-tecla::after { transition: none; }
}