/* bestbitcoincasinosportugal.com — tema «Ficha».
 *
 * As cores vêm da bandeira e têm cada uma um trabalho: o verde escuro é o
 * chão, o verde vivo marca o que está lido, o amarelo marca o que está
 * escrito em número e o vermelho é a saída. Nada mais usa vermelho.
 *
 * O corpo do texto é serifado de propósito: a página é um registo para ler,
 * não um cartaz. Os títulos e os números são de haste grossa para que a
 * diferença entre ler e contar se veja sem pensar.
 */

:root {
  --chao: #0d1b13;      /* o fundo de tudo */
  --topo: #0a150e;      /* cabeçalho e rodapé */
  --painel: #12241a;    /* caixas */
  --painel2: #16301f;   /* caixas dentro de caixas */
  --linha: #23422e;
  --linha2: #1a3324;
  --tx: #e9efe9;
  --tx2: #a9bfae;
  --tx3: #7c9384;
  --verde: #1faa52;     /* lido */
  --verde-e: #0f7d3c;
  --amarelo: #f0c020;   /* escrito em número */
  --vermelho: #d4212c;  /* a saída */
  --disp: Archivo, system-ui, sans-serif;
  --corpo: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --larg: 1220px;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--chao); color: var(--tx);
  font: 400 17px/1.66 var(--corpo);
  font-synthesis-weight: none;
}
img { max-width: 100%; height: auto }
a { color: var(--verde); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px }

.lp-wrap { max-width: var(--larg); margin: 0 auto; padding: 0 20px }
.lp-salto {
  position: absolute; left: -9999px; background: var(--amarelo); color: #1a1205;
  padding: 10px 16px; z-index: 40;
}
.lp-salto:focus { left: 12px; top: 12px }

/* a barra tricolor — o único sítio onde as três cores se tocam */
.lp-tri { height: 4px; background: linear-gradient(90deg,
  var(--verde-e) 0 40%, var(--amarelo) 40% 42%, var(--vermelho) 42% 100%) }

/* ------------------------------------------------------------ topo --- */
.lp-top { background: var(--topo) }
.lp-top-i { display: flex; align-items: center; gap: 24px;
  justify-content: space-between; min-height: 72px; flex-wrap: wrap }
.lp-marca { color: var(--tx); display: block }
.lp-marca:hover { text-decoration: none }
.lp-marca b { display: block; font: 800 27px/1 var(--disp); letter-spacing: -.015em }
.lp-marca i { font-style: normal; color: var(--verde) }
.lp-marca em { font-style: normal; color: var(--tx) }
.lp-marca u { text-decoration: none; color: var(--vermelho) }
.lp-marca span { display: block; margin-top: 5px; font: 500 10.5px/1 var(--mono);
  letter-spacing: .14em; color: var(--tx3) }
.lp-top-f { display: flex; gap: 22px; margin: 0; font: 400 12.5px/1.3 var(--corpo);
  color: var(--tx3) }
.lp-top-f span { display: flex; flex-direction: column }
.lp-top-f b { font: 700 19px/1 var(--disp); color: var(--amarelo);
  font-variant-numeric: tabular-nums }

/* ------------------------------------------------------------ menu --- */
.lp-menu { background: var(--painel); border-bottom: 1px solid var(--linha) }
.lp-menu-i { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none }
.lp-menu-i::-webkit-scrollbar { display: none }
.lp-menu a {
  color: var(--tx2); white-space: nowrap; padding: 13px 15px;
  font: 600 13px/1 var(--disp); letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.lp-menu a:hover { color: var(--tx); text-decoration: none; background: var(--painel2) }
.lp-menu a[aria-current] { color: var(--tx); border-bottom-color: var(--verde) }

/* ----------------------------------------------------------- herói --- */
.lp-hero { background: var(--painel); border-bottom: 1px solid var(--linha);
  padding: 30px 0 32px }
.lp-migalhas { margin: 0 0 12px; font-size: 13.5px; color: var(--tx3) }
.lp-migalhas a { color: var(--tx2) }
.lp-sobre { margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--amarelo) }
.lp-hero h1 { margin: 13px 0 0; font: 800 clamp(31px, 5vw, 50px)/1.06 var(--disp);
  letter-spacing: -.022em; text-wrap: balance; max-width: 19ch }
.lp-lede { margin: 16px 0 0; font-size: 18.5px; line-height: 1.6; color: var(--tx2);
  max-width: 66ch }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.lp-chip { font: 500 12px/1 var(--mono); color: var(--tx2);
  border: 1px solid var(--linha); padding: 7px 10px }
.lp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px }
.lp-bt { padding: 11px 19px; font: 700 14.5px/1 var(--disp) }
.lp-bt-a { background: var(--verde); color: #04170c }
.lp-bt-b { border: 1px solid var(--linha); color: var(--tx) }
.lp-bt:hover { text-decoration: none; filter: brightness(1.08) }

/* as duas saídas do primeiro ecrã: cor forte, um brilho que passa, e um
 * pequeno salto ao passar o rato. Tudo pára com prefers-reduced-motion. */
.lp-bt-go { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: 12px 21px; font-weight: 800;
  box-shadow: 0 4px 0 0 rgba(0,0,0,.3), 0 0 0 0 var(--brilho);
  animation: lp-pulso 2.8s ease-in-out infinite;
  transition: transform .14s ease, box-shadow .14s ease }
.lp-bt-go > span { position: relative; z-index: 2 }
.lp-bt-go > i { position: absolute; z-index: 1; top: -60%; bottom: -60%; width: 36%;
  left: -45%; transform: skewX(-18deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  animation: lp-brilho 3.6s ease-in-out infinite }
.lp-bt-go:hover { filter: none; transform: translateY(-2px);
  box-shadow: 0 6px 0 0 rgba(0,0,0,.3), 0 0 22px 2px var(--brilho) }
.lp-bt-go:active { transform: translateY(1px) }
.lp-go-rtp { --brilho: rgba(212,33,44,.55);
  background: linear-gradient(120deg, #ff6a2a, var(--vermelho) 58%, #96101f) }
.lp-go-bonus { --brilho: rgba(240,192,32,.6); color: #221803;
  background: linear-gradient(120deg, #ffe07a, var(--amarelo) 50%, #c98a12);
  animation-delay: 1.4s }
.lp-go-bonus > i { animation-delay: 1.4s;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent) }
@keyframes lp-pulso {
  0%, 100% { box-shadow: 0 4px 0 0 rgba(0,0,0,.3), 0 0 0 0 var(--brilho) }
  50% { box-shadow: 0 4px 0 0 rgba(0,0,0,.3), 0 0 18px 1px var(--brilho) } }
@keyframes lp-brilho { 0% { left: -45% } 30%, 100% { left: 118% } }

/* ----------------------------------------------------------- faixa --- */
.lp-faixa { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  margin: 24px 0 8px }
.lp-f { background: var(--painel); border: 1px solid var(--linha); padding: 16px 10px;
  text-align: center }
.lp-f svg { display: block; margin: 0 auto 8px; width: 30px; height: 30px; color: var(--verde) }
.lp-f b { display: block; font: 700 31px/1 var(--disp); font-variant-numeric: tabular-nums }
.lp-f span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.3;
  color: var(--tx3) }
.lp-faixa-f { margin: 10px 0 22px; font-size: 13.5px; color: var(--tx3); max-width: 96ch }

/* ---------------------------------------------------------- grelha --- */
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 40px;
  padding-bottom: 46px; align-items: start }
.lp-grid-1 { grid-template-columns: minmax(0, 1fr) }
main { min-width: 0 }

.lp-indice { background: var(--painel); border: 1px solid var(--linha);
  padding: 16px 18px; margin: 0 0 28px }
.lp-indice b { display: block; font: 600 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 10px }
.lp-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: i;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 3px 18px }
.lp-indice li { counter-increment: i; font-size: 14.5px }
.lp-indice li::before { content: counter(i, decimal-leading-zero) " ";
  font: 500 12px var(--mono); color: var(--amarelo) }
.lp-indice a { color: var(--tx2) }

/* --------------------------------------------------------- secções --- */
.lp-sec { margin: 0 0 40px; scroll-margin-top: 16px }
.lp-sec-t { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--linha); padding-bottom: 11px; margin-bottom: 22px }
.lp-sec-n { font: 500 13px/1 var(--mono); color: var(--amarelo);
  border: 1px solid var(--linha); padding: 6px 8px }
.lp-sec h2 { margin: 0; font: 800 clamp(23px, 3vw, 31px)/1.16 var(--disp);
  letter-spacing: -.018em; text-wrap: balance }
.lp-sec-s { margin-left: auto; font: 500 11.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx3) }
.lp-sec-c > *:first-child { margin-top: 0 }
.lp-sec-c h3 { margin: 30px 0 10px; font: 700 20px/1.3 var(--disp) }
.lp-sec-c p { margin: 0 0 16px; max-width: 74ch }
.lp-sec-c ul, .lp-sec-c ol { margin: 0 0 18px; padding-left: 22px; max-width: 74ch }
.lp-sec-c li { margin-bottom: 8px }
.lp-fina { font-size: 14px; color: var(--tx3); max-width: 84ch }
.lp-nota { background: var(--painel); border-left: 3px solid var(--amarelo);
  padding: 15px 18px; margin: 0 0 20px; font-size: 15.5px; color: var(--tx2) }

/* ----------------------------------------------------------- ficha --- */
.lp-lista { display: grid; gap: 14px; margin: 0 0 22px }
.lp-ficha { display: grid; grid-template-columns: 96px 168px minmax(0, 1fr);
  gap: 18px; background: var(--painel); border: 1px solid var(--linha);
  padding: 16px; align-items: start }
.lp-ficha-1 { border-color: var(--verde); box-shadow: inset 3px 0 0 0 var(--verde) }
.lp-ord { text-align: center; background: var(--painel2); padding: 12px 6px }
.lp-ord i { display: block; font: 500 10px/1 var(--mono); letter-spacing: .12em;
  color: var(--tx3); font-style: normal }
.lp-ord b { display: block; font: 800 38px/1 var(--disp); margin: 2px 0 8px;
  font-variant-numeric: tabular-nums }
.lp-ilp { display: block; font: 700 21px/1 var(--disp); color: var(--amarelo);
  font-variant-numeric: tabular-nums }
.lp-ilp em { font-style: normal; font-size: 12px; color: var(--tx3) }
.lp-ilp-l { display: block; margin-top: 4px; font: 500 9.5px/1 var(--mono);
  letter-spacing: .14em; color: var(--tx3) }
.lp-placa { aspect-ratio: 3/2; display: grid; place-items: center;
  font: 800 22px var(--disp); color: #08150d;
  background: linear-gradient(135deg, var(--tom), #0d1b13) }
.tem-logo { background: var(--painel2); position: relative; overflow: hidden;
  padding: 9px 12px 9px 15px }
.tem-logo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--tom) }
.tem-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain }
.tem-logo.claro { background: #f1f4f1 }
.lp-corpo h3 { margin: 0 0 6px; font: 700 21px/1.2 var(--disp) }
.lp-corpo h3 a { color: var(--tx) }
.lp-corpo h3 span { font: 500 12px var(--mono); color: var(--tx3); white-space: nowrap }
.lp-linha { margin: 0 0 11px; font-size: 15.5px; color: var(--tx2) }
.lp-marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px }
.lp-marca { font: 500 11.5px/1 var(--mono); color: var(--tx2);
  border: 1px solid var(--linha); padding: 6px 8px }
.lp-marca.q { background: var(--amarelo); color: #221803; border-color: var(--amarelo) }

.lp-barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 13px }
.lp-barra i { display: block; font: 500 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tx3); font-style: normal; margin-bottom: 5px }
.lp-barra u { display: block; text-decoration: none; height: 7px;
  background: var(--linha2); overflow: hidden }
.lp-barra s { display: block; height: 100%; text-decoration: none; background: var(--verde) }
.lp-barra.cheia s { background: var(--amarelo) }
.lp-barra.vazia u { background: #2a1416 }
.lp-barra b { display: block; margin-top: 4px; font: 700 13px/1 var(--disp);
  font-variant-numeric: tabular-nums }
.lp-barra em { font-style: normal; font-size: 10.5px; color: var(--tx3) }

.lp-vol { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 13px; padding: 9px 12px; background: var(--painel2);
  border-left: 3px solid var(--amarelo) }
.lp-vol i { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tx3); font-style: normal }
.lp-vol b { font: 800 22px/1 var(--disp); color: var(--amarelo);
  font-variant-numeric: tabular-nums }
.lp-vol span { font-size: 13px; color: var(--tx3) }
.lp-vol-vazio { border-left-color: var(--linha) }
.lp-vol-vazio b { color: var(--tx3) }

.lp-saidas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.lp-go { background: var(--vermelho); color: #fff; font: 700 14px/1 var(--disp);
  padding: 11px 20px }
.lp-go:hover { text-decoration: none; filter: brightness(1.1) }
.lp-ler { font-size: 14px; color: var(--tx2); border-bottom: 1px solid var(--linha) }
.lp-ler:hover { color: var(--verde) }

/* --------------------------------------------------------- cartões --- */
.lp-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px; margin: 0 0 22px }
.lp-cartao { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px;
  align-items: center; background: var(--painel); border: 1px solid var(--linha);
  padding: 13px }
.lp-cartao:hover { text-decoration: none; border-color: var(--verde) }
.lp-cartao-p { aspect-ratio: 1; display: grid; place-items: center;
  font: 800 15px var(--disp); color: #08150d;
  background: linear-gradient(135deg, var(--tom), #0d1b13) }
.lp-cartao-t b { display: block; font: 700 15.5px/1.2 var(--disp); color: var(--tx) }
.lp-cartao-t span { display: block; margin-top: 4px; font-size: 13px; color: var(--tx3) }

/* --------------------------------------------------------- números --- */
.lp-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin: 0 0 22px }
.lp-numeros > div { background: var(--painel); border-top: 3px solid var(--verde);
  padding: 15px }
.lp-numeros b { display: block; font: 800 33px/1 var(--disp); color: var(--amarelo);
  font-variant-numeric: tabular-nums }
.lp-numeros span { display: block; margin-top: 6px; font-size: 14px; color: var(--tx2) }
.lp-numeros i { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal;
  color: var(--tx3) }

/* --------------------------------------------------------- tabelas --- */
.lp-tabwrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--linha) }
.lp-tab { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px }
.lp-tab th, .lp-tab td { padding: 10px 13px; border-bottom: 1px solid var(--linha2);
  text-align: left }
.lp-tab thead th { background: var(--painel2); font: 600 11.5px/1.3 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx3);
  position: sticky; top: 0 }
.lp-tab tbody th { font-weight: 600; color: var(--tx) }
.lp-tab td.num { font-family: var(--mono); font-size: 13px; color: var(--tx2);
  font-variant-numeric: tabular-nums }
.lp-tab .q { color: var(--amarelo) }
.lp-tab tbody tr:nth-child(odd) { background: rgba(255,255,255,.015) }

/* ----------------------------------------------------------- conta --- */
.lp-conta { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: c }
.lp-conta li { counter-increment: c; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline;
  padding: 13px 15px; background: var(--painel); border-left: 3px solid var(--verde);
  margin-bottom: 6px }
.lp-conta li:last-child { border-left-color: var(--amarelo) }
.lp-conta b { font: 700 16px/1.3 var(--disp) }
.lp-conta-n { font: 800 22px/1 var(--disp); color: var(--amarelo); text-align: right;
  font-variant-numeric: tabular-nums }
.lp-conta-x { grid-column: 1 / -1; font-size: 13.5px; color: var(--tx3) }

/* ---------------------------------------------------------- passos --- */
.lp-passos { list-style: none; margin: 0 0 22px; padding: 0 }
.lp-passos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--linha2) }
.lp-passos i { font: 500 13px/1 var(--mono); color: var(--amarelo); font-style: normal;
  padding-top: 4px }
.lp-passos b { display: block; font: 700 16px/1.3 var(--disp); margin-bottom: 4px }
.lp-passos span { font-size: 15px; color: var(--tx2) }

/* --------------------------------------------------------- figuras --- */
.lp-fig, .lp-img { margin: 0 0 24px; background: var(--painel);
  border: 1px solid var(--linha) }
.lp-fig svg { display: block; width: 100%; height: auto }
.lp-img img { display: block; width: 100%; height: auto }
.lp-img.alta img { max-height: 520px; object-fit: cover; object-position: center }
.lp-fig figcaption, .lp-img figcaption { padding: 12px 15px; font-size: 13.5px;
  color: var(--tx3); border-top: 1px solid var(--linha2) }

/* --------------------------------------------------------- moedas ---- */
.lp-moedas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px }
.lp-moeda { font: 500 12px/1 var(--mono); color: var(--tx2);
  border: 1px solid var(--linha); padding: 7px 9px }

/* ---------------------------------------------------------- saída ---- */
.lp-saida { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  justify-content: space-between; background: var(--painel2);
  border: 1px solid var(--linha); border-left: 3px solid var(--vermelho);
  padding: 17px 19px; margin: 0 0 24px }
.lp-saida b { display: block; font: 700 17px/1.3 var(--disp) }
.lp-saida span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--tx2) }
.lp-saida-go { background: var(--vermelho); color: #fff; font: 700 14.5px/1 var(--disp);
  padding: 12px 22px; white-space: nowrap }
.lp-saida-go:hover { text-decoration: none; filter: brightness(1.1) }

/* ------------------------------------------------------------ faq ---- */
.lp-faq details { border-bottom: 1px solid var(--linha2) }
.lp-faq summary { cursor: pointer; padding: 15px 0; font: 700 16.5px/1.4 var(--disp);
  list-style: none }
.lp-faq summary::-webkit-details-marker { display: none }
.lp-faq summary::before { content: "+"; display: inline-block; width: 22px;
  color: var(--amarelo); font-family: var(--mono) }
.lp-faq details[open] summary::before { content: "–" }
.lp-faq details > div { padding: 0 0 16px 22px; color: var(--tx2); max-width: 74ch }

/* --------------------------------------------------------- lateral --- */
.lp-lat { position: sticky; top: 14px }
.lp-lat-h { margin: 0 0 0; font: 700 12px/1 var(--disp); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx3); padding-bottom: 9px;
  border-bottom: 2px solid var(--linha) }
.lp-lat-c { margin: 0 0 28px }
.lp-lat-l { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 11px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linha2) }
.lp-lat-so { grid-template-columns: minmax(0, 1fr) }
.lp-lat-l:last-child { border-bottom: 0 }
.lp-lat-p { aspect-ratio: 3/2; display: grid; place-items: center;
  font: 800 15px var(--disp); color: #08150d;
  background: linear-gradient(135deg, var(--tom), #0d1b13) }
.lp-lat-p.tem-logo { padding: 5px 7px 5px 10px }
.lp-lat-p.tem-logo::before { width: 2px }
.lp-lat-l b { display: block; font: 700 15px/1.2 var(--disp) }
.lp-lat-l b a { color: var(--tx) }
.lp-lat-i { display: block; margin: 4px 0 6px; font-size: 13px; color: var(--tx3) }
.lp-lat-so .lp-lat-i { margin-bottom: 0 }
.lp-lat-s { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.lp-lat-go { background: var(--vermelho); color: #fff; font: 700 11.5px/1 var(--disp);
  padding: 5px 12px; white-space: nowrap }
.lp-lat-go:hover { text-decoration: none; filter: brightness(1.1) }
.lp-lat-ler { font: 500 11.5px/1 var(--mono); color: var(--tx3);
  border-bottom: 1px solid var(--linha) }
.lp-lat-f { margin: 10px 0 0; font-size: 13px; color: var(--tx3) }

/* --------------------------------------------------------- seguir ---- */
.lp-seg { background: var(--painel); border: 1px solid var(--linha); padding: 18px 20px }
.lp-seg p { margin: 0 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx3) }
.lp-seg ul { margin: 0; padding-left: 20px }
.lp-seg li { margin-bottom: 6px }

/* ---------------------------------------------------------- rodapé --- */
.lp-foot { background: var(--topo); color: var(--tx3); padding: 0 0 86px;
  font-size: 14px }
.lp-foot .lp-wrap { padding-top: 28px }
.lp-foot-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px }
.lp-foot h4 { margin: 0 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tx2) }
.lp-foot ul { margin: 0; padding: 0; list-style: none }
.lp-foot li { margin-bottom: 6px }
.lp-foot a { color: var(--tx3) }
.lp-foot a:hover { color: var(--verde) }
.lp-foot-l { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--linha2);
  font-size: 12.5px; line-height: 1.6; max-width: 110ch }

/* ------------------------------------------------------------ doca --- */
.lp-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--topo); border-top: 1px solid var(--linha);
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px)); text-align: center }
.lp-dock a { display: inline-block; background: var(--vermelho); color: #fff;
  font: 700 14.5px/1 var(--disp); padding: 12px 26px }
.lp-dock a:hover { text-decoration: none; filter: brightness(1.1) }

/* ---------------------------------------------------------- estreito - */
@media (max-width: 1080px) {
  .lp-grid { grid-template-columns: minmax(0, 1fr); gap: 34px }
  .lp-lat { position: static }
  .lp-faixa { grid-template-columns: repeat(3, 1fr) }
  .lp-top-f { display: none }
}
@media (max-width: 760px) {
  body { font-size: 16.5px }
  .lp-ficha { grid-template-columns: 72px minmax(0, 1fr); gap: 13px }
  .lp-placa { grid-column: 2; max-width: 150px }
  .lp-corpo { grid-column: 1 / -1 }
  .lp-ord b { font-size: 31px }
  .lp-barras { grid-template-columns: repeat(2, 1fr) }
  .lp-faixa { grid-template-columns: repeat(2, 1fr) }
  .lp-sec-s { margin-left: 0; width: 100% }
  .lp-hero h1 { max-width: none }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
}

/* ------------------------------------------------- os rolos do herói --- */
/* Três rolos que rodam e param, rodam e param. Nenhum JavaScript: a fita
 * desloca-se exactamente seis alturas de célula, que é o comprimento do
 * conjunto de símbolos, por isso o fim de cada volta cai em cima do mesmo
 * desenho por onde começou e a repetição não tem costura.
 *
 * O estado parado é o que está escrito fora da animação: com
 * prefers-reduced-motion a folha inteira desliga `animation`, e o que fica
 * tem de ser um painel com três símbolos à vista, não uma caixa vazia. */
.lp-hero-2 { display: grid; gap: 34px; align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 360px) }
.lp-maq { --cel: 74px; border: 1px solid var(--linha); background: var(--chao);
  box-shadow: 0 18px 40px -26px #000 }
.lp-maq-tampa { display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--linha) }
.lp-maq-tampa .lp-tri { flex: 1 }
.lp-maq-nome { font: 500 11px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx3) }
.lp-maq-vidro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  padding: 7px; background:
    linear-gradient(180deg, rgba(0,0,0,.55), transparent 22%, transparent 78%, rgba(0,0,0,.55)) }
.lp-maq-rolo { height: calc(var(--cel) * 3); overflow: hidden;
  background: #101f16; border: 1px solid var(--linha2) }
.lp-maq-fita { display: block }
.lp-maq-cel { display: grid; place-items: center; height: var(--cel) }
.lp-maq-cel svg { width: 42px; height: 42px }
.lp-s-moeda { color: var(--amarelo) }
.lp-s-sete { color: var(--vermelho) }
.lp-s-diamante { color: #55d6f0 }
.lp-s-sino { color: #f0a020 }
.lp-s-ferradura { color: var(--tx2) }
.lp-s-estrela { color: var(--verde) }
.lp-go-maq { --brilho: rgba(31,170,82,.6); display: block; margin: 12px;
  text-align: center; color: #04170c;
  background: linear-gradient(120deg, #6ee89a, var(--verde) 52%, #0c6b33) }
.lp-go-maq > i { animation-delay: .7s }
.lp-maq-pe { margin: 0 12px 13px; font-size: 12.5px; line-height: 1.5; color: var(--tx3) }

@media (prefers-reduced-motion: no-preference) {
  .lp-maq-f1 { animation: lp-rolo1 7.4s infinite }
  .lp-maq-f2 { animation: lp-rolo2 7.4s infinite }
  .lp-maq-f3 { animation: lp-rolo3 7.4s infinite }
}
/* A curva vive dentro dos fotogramas: a fita arranca, ganha velocidade e
 * trava; depois fica quieta o resto da volta. Uma curva única para toda a
 * animação faria o descanso arrastar-se em câmara lenta. */
@keyframes lp-rolo1 {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  46%, 100% { transform: translateY(calc(var(--cel) * -6)) }
}
@keyframes lp-rolo2 {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  58%, 100% { transform: translateY(calc(var(--cel) * -6)) }
}
@keyframes lp-rolo3 {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.05,.2,1) }
  70%, 100% { transform: translateY(calc(var(--cel) * -6)) }
}

@media (max-width: 900px) {
  .lp-hero-2 { grid-template-columns: minmax(0, 1fr) }
  .lp-maq { --cel: 62px; max-width: 420px }
  .lp-maq-cel svg { width: 36px; height: 36px }
}

/* ------------------------------------------------- troca de língua ----- */
/* Empurrada para o fim da barra e marcada com as três cores: é a única
 * entrada do menu que não leva a uma secção do registo, e misturá-la com
 * as outras faria o leitor entrar noutra língua a pensar que mudava de
 * assunto. */
.lp-menu a.lp-lingua { margin-left: auto; color: var(--tx);
  border-bottom-color: var(--amarelo) }
.lp-menu a.lp-lingua::before { content: ""; display: inline-block;
  width: 15px; height: 10px; margin-right: 8px; vertical-align: -1px;
  background: linear-gradient(90deg, var(--verde) 0 40%, var(--vermelho) 40% 100%) }
@media (max-width: 720px) { .lp-menu a.lp-lingua { margin-left: 0 } }