/* gatesofolympussuperscatter.cl

   Своя тема, не повтор Starlight и не повтор остальной сетки:
   · там небесно-голубое и серифный Fraunces — здесь ТЁПЛЫЙ МРАМОР и Cinzel,
     римская капитель, потому что тема буквально греческий храм;
   · фон бумаги мраморный, панели с золотой каймой, цифры моноширинные;
   · тёмный ночной пурпур приходит только в герое и демо — там, где стоит
     сам арт игры, и спорить с ним светлой плашкой было бы глупо. */

:root{
  /* Тёмный космос — третья тема сетки. Имена унаследованы от донора,
     значения перевёрнуты: «marmol» здесь не бумага, а глубокий фиолет. */
  --marmol:#150a2e; --marmol-2:#1c0f3d; --marmol-3:#241552;
  --noche:#f3efff; --noche-2:#cfc3f5;
  --tinta:#f5f1ff; --tinta-2:#c9bcee; --gris:#a99ed0;
  --oro:#a78bfa; --oro-claro:#c4b5fd; --oro-pale:#2a1a5e;
  --rayo:#22d3ee; --rojo:#f43f5e; --verde:#34d399;
  --linea:rgba(196,181,253,.22); --linea-oro:rgba(167,139,250,.45);
  --sombra:0 2px 0 rgba(167,139,250,.22), 0 10px 26px rgba(0,0,0,.45);
  --sombra-alta:0 3px 0 var(--oro), 0 18px 40px rgba(0,0,0,.55);
  --radio:14px; --radio-sm:10px;
  --space-xs:.55rem; --space-sm:.9rem; --space-md:1.5rem;
  --space-lg:2.6rem; --space-xl:4.2rem;
  --font-display:"Chakra Petch",system-ui,-apple-system,sans-serif;
  --font-body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  /* Вариант B «Чистая глубина»: без крошки — только крупные мягкие
     световые пятна, как в ключ-арте самой игры. */
  background:
    radial-gradient(1100px 680px at 12% -10%, rgba(124,79,240,.30), transparent 60%),
    radial-gradient(900px 560px at 92% 6%, rgba(236,72,153,.14), transparent 62%),
    radial-gradient(700px 700px at 50% 108%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #170b32 0%, #1d1040 46%, #140828 100%);
  background-attachment:fixed,fixed,fixed,fixed;
  color:var(--tinta);font:400 17px/1.68 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--noche-2);text-decoration:underline;text-decoration-color:var(--linea-oro);
  text-underline-offset:3px}
a:hover{color:var(--oro);text-decoration-color:var(--oro)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--oro-pale);
  border:1px solid var(--linea-oro);border-radius:3px;padding:.08em .38em;color:#8a5f06}

.wrap{width:min(1180px,94vw);margin-inline:auto}
.narrow{width:min(1040px,94vw);margin-inline:auto}
section{padding:var(--space-lg) 0}
section + section{padding-top:0}
.narrow > h2:first-child,.wrap > h2:first-child{margin-top:0}

h1,h2,h3{font-family:var(--font-display);color:var(--tinta);margin:0 0 .5em;
  letter-spacing:.005em}
h1{font-weight:900;font-size:clamp(1.85rem,4.1vw,2.9rem);line-height:1.14}
h2{font-weight:700;font-size:clamp(1.35rem,2.5vw,1.95rem);line-height:1.22;
  margin-top:var(--space-lg);padding-bottom:.3em;
  border-bottom:2px solid var(--linea-oro)}
h3{font-weight:700;font-size:1.12rem;margin-top:var(--space-md)}
p{margin:0 0 1em}
strong{font-weight:600;color:var(--noche-2)}

/* ── шапка ───────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:60;background:rgba(21,10,46,.92);
  backdrop-filter:blur(10px);border-bottom:2px solid var(--oro)}
.bar-in{display:flex;align-items:center;gap:var(--space-sm);padding:.5rem 0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.brand img{height:34px;width:auto}
.brand b{font-family:var(--font-display);font-weight:900;font-size:.92rem;line-height:1.1;
  color:var(--tinta);white-space:nowrap;letter-spacing:.02em}
.brand span{display:block;font:400 .55rem/1 var(--font-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin-top:.22rem}
.bar nav{display:flex;gap:.1rem;margin-left:auto;flex-wrap:nowrap}
.bar nav a{padding:.4rem .58rem;border-radius:3px;font-size:.88rem;font-weight:500;
  color:var(--tinta-2);text-decoration:none}
.bar nav a:hover{background:var(--oro-pale);color:#8a5f06}
.bar nav a[aria-current]{color:#8a5f06;font-weight:600;box-shadow:inset 0 -2px 0 var(--oro)}
.nav-cta{flex-shrink:0}
.burger{display:none;background:var(--marmol);border:2px solid var(--oro);border-radius:3px;
  color:var(--tinta);font-size:1.05rem;padding:.24rem .55rem;cursor:pointer}

/* ── кнопки: золотая кайма и «выбитая» подложка ─────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.66rem 1.3rem;border-radius:var(--radio-sm);font-family:var(--font-body);
  font-weight:600;font-size:.97rem;line-height:1.25;cursor:pointer;text-decoration:none;
  border:2px solid var(--oro);
  background:linear-gradient(180deg,var(--noche-2),var(--noche));color:var(--oro-claro);
  box-shadow:0 3px 0 var(--oro);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--oro);color:#fff;
  text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--oro)}
.btn-ghost{background:var(--marmol);color:var(--noche-2)}
.btn-ghost:hover{background:var(--oro-pale);color:#8a5f06}

/* ── герой ───────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(2.4rem,4.6vw,4rem) 0 clamp(3rem,6vw,5rem);
  border-bottom:2px solid var(--oro)}
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.4) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.4) 88%,transparent 100%)}
.hero::before{z-index:-2;background:var(--hero-img,url(../img/hero-fondo.webp)) var(--hero-pos,50% 42%)/cover no-repeat}
.hero::after{z-index:-1;background:
  linear-gradient(96deg,
    rgba(248,245,238,.97) 0%, rgba(248,245,238,.94) 32%, rgba(248,245,238,.76) 47%,
    rgba(248,245,238,.30) 64%, rgba(248,245,238,.04) 79%, rgba(248,245,238,0) 90%),
  var(--hero-tint,transparent)}
.hero-in{position:relative}
.hero-texto{position:relative;z-index:1;max-width:min(600px,55%)}
.hero-panel{display:contents}
.hero-logo{width:min(360px,80%);margin-bottom:var(--space-sm);
  filter:drop-shadow(0 8px 18px rgba(36,26,61,.3))}
.hero h1{margin-bottom:.4em}
.hero p{font-size:1.06rem;color:var(--tinta-2)}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-md)}
.hero-cifras{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:var(--space-md);padding:0;list-style:none}
.hero-cifras li{background:var(--marmol);border:1px solid var(--oro);
  border-radius:var(--radio-sm);padding:.26rem .75rem;font-size:.83rem;color:var(--tinta-2)}
.hero-cifras b{font-family:var(--font-mono);font-weight:700;color:#8a5f06}
.hero-fig{position:absolute;right:0;bottom:calc(-1 * clamp(3rem,6vw,5rem));
  width:min(380px,37%);z-index:0;pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(36,26,61,.34))}

/* ── сравнитель ──────────────────────────────────────────── */
.comp{background:var(--marmol);border:2px solid var(--oro);border-radius:var(--radio);
  box-shadow:var(--sombra-alta);padding:var(--space-md);margin:var(--space-md) 0}
.comp-tabs{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:var(--space-md)}
.comp-tab{position:relative;flex:1 1 190px;display:flex;flex-direction:column;
  align-items:center;gap:.3rem;padding:.6rem;border:1px solid var(--linea);
  border-radius:var(--radio-sm);background:var(--marmol-2);cursor:pointer;
  transition:border-color .14s ease,background .14s ease}
.comp-tab img{height:38px;width:auto}
.comp-tab b{font-family:var(--font-display);font-weight:700;font-size:.84rem;
  color:var(--tinta-2);letter-spacing:.02em}
.comp-tab:hover{border-color:var(--oro)}
.comp-tab[aria-selected="true"]{border-color:var(--oro);background:var(--oro-pale);
  box-shadow:inset 0 -3px 0 var(--oro)}
.comp-tab[aria-selected="true"] b{color:#8a5f06}

.comp-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-items:start}
.comp-datos{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.comp-dato{background:var(--marmol-2);border:1px solid var(--linea);
  border-radius:var(--radio-sm);padding:.55rem .7rem}
.comp-dato b{display:block;font-family:var(--font-mono);font-weight:700;font-size:1.2rem;
  color:var(--tinta);letter-spacing:-.02em}
.comp-dato span{font-size:.64rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris)}
.comp-dato.destacado{background:var(--oro-pale);border-color:var(--oro)}
.comp-dato.destacado b{color:#8a5f06}
.comp-nota{grid-column:1/-1;font-size:.87rem;color:var(--tinta-2);margin:0}

.demo-caja{position:relative;border-radius:var(--radio-sm);overflow:hidden;
  border:2px solid var(--oro);background:var(--noche);aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center}
.demo-caja img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(3px) brightness(.62)}
.demo-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.demo-play{position:relative;z-index:2;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.demo-play span{font-size:.78rem;font-family:var(--font-mono);color:var(--oro-claro);
  text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* ── таблицы ─────────────────────────────────────────────── */
.tabla-wrap{overflow-x:auto;background:var(--marmol);border:2px solid var(--oro);
  border-radius:var(--radio);box-shadow:var(--sombra);margin:var(--space-sm) 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
caption{caption-side:top;text-align:left;font-size:.8rem;color:var(--gris);
  padding:.75rem .95rem .35rem;font-family:var(--font-mono);line-height:1.55}
th,td{padding:.58rem .95rem;text-align:left;border-bottom:1px solid var(--linea)}
thead th{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8a5f06;background:var(--oro-pale);
  border-bottom:2px solid var(--oro)}
tbody th{font-weight:600;color:var(--tinta)}
tbody td{font-family:var(--font-mono);font-size:.88rem}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.fila-mejor td,.fila-mejor th{background:rgba(19,122,82,.08)}
.fila-peor td,.fila-peor th{background:rgba(198,47,42,.07)}

/* ── прочие блоки ────────────────────────────────────────── */
.toc{background:var(--marmol);border:1px solid var(--oro);border-radius:var(--radio);
  padding:var(--space-sm) var(--space-md);box-shadow:var(--sombra);margin:var(--space-md) 0}
.toc b{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.toc ol{margin:.5rem 0 0;padding-left:1.2rem;columns:2;column-gap:var(--space-md)}
.toc li{margin:.22rem 0;font-size:.92rem}
.firma{font-family:var(--font-mono);font-size:.76rem;line-height:1.6;color:var(--gris);
  border-left:3px solid var(--oro);padding-left:.8rem;margin-bottom:var(--space-md)}
.nota{font-size:.85rem;color:var(--gris)}
.legal{background:var(--marmol);border:1px solid var(--linea);border-radius:var(--radio);
  padding:var(--space-sm) var(--space-md);font-size:.83rem;color:var(--tinta-2);
  margin-top:var(--space-md)}
.edad{display:inline-block;background:var(--rojo);color:#fff;font-weight:700;
  border-radius:3px;padding:.02rem .45rem;font-size:.74rem;margin-right:.35rem;
  font-family:var(--font-mono)}

/* ── витрина операторов ──────────────────────────────────── */
.ops{display:grid;gap:var(--space-sm);grid-template-columns:repeat(3,1fr);align-items:stretch}
.op{display:flex;flex-direction:column;gap:.7rem;background:var(--marmol);
  border:2px solid var(--oro);border-radius:var(--radio);padding:var(--space-sm);
  box-shadow:var(--sombra)}
.op-logo{background:var(--marmol-2);border:1px solid var(--linea);border-radius:var(--radio-sm);
  height:76px;display:flex;align-items:center;justify-content:center;padding:.5rem .9rem}
.op-logo img{max-height:50px;width:auto}
.op-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.op-head b{font-family:var(--font-display);font-weight:700;font-size:1.02rem}
.op-badge{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--font-mono);background:var(--oro);color:var(--noche);
  border-radius:3px;padding:.08rem .45rem}
.op-info{background:var(--marmol-2);border:1px solid var(--linea);border-radius:var(--radio-sm);
  padding:.55rem .7rem;font-size:.88rem;color:var(--tinta-2);flex:1}
.op-label{display:block;font-size:.58rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);font-family:var(--font-mono);margin-bottom:.2rem}
.op-btn{width:100%}

/* ── вердикты и выносы ───────────────────────────────────── */
.veredictos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);
  margin:var(--space-md) 0}
.ver{background:var(--marmol);border:1px solid var(--oro);border-radius:var(--radio);
  padding:var(--space-sm) var(--space-md);box-shadow:var(--sombra)}
.ver-tope{font-family:var(--font-mono);font-weight:700;font-size:1.5rem;color:#8a5f06;
  line-height:1.1;letter-spacing:-.03em}
.ver b{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;
  margin:.2rem 0 .35rem}
.ver p{font-size:.9rem;color:var(--tinta-2);margin:0}
.ver-para{font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);display:block;margin-bottom:.4rem;font-family:var(--font-mono)}

.destaque{background:linear-gradient(180deg,var(--noche-2),var(--noche));
  border:2px solid var(--oro);border-radius:var(--radio);color:#efe8ff;
  padding:var(--space-md);margin:var(--space-md) 0;box-shadow:var(--sombra-alta)}
.destaque p{margin:0}
.destaque p + p{margin-top:.7rem}
.destaque strong{color:var(--oro-claro)}
.destaque a{color:var(--oro-claro);text-decoration-color:var(--oro)}

.figura{margin:var(--space-md) 0;background:var(--marmol);border:2px solid var(--oro);
  border-radius:var(--radio);padding:.5rem;box-shadow:var(--sombra)}
.figura img{border-radius:var(--radio-sm);width:100%}
.figura figcaption{font-family:var(--font-mono);font-size:.73rem;line-height:1.6;
  color:var(--gris);padding:.55rem .45rem .25rem}
.con-figura{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-md);align-items:start}
.con-figura .figura{margin-top:0}

.faq-item{background:var(--marmol);border:1px solid var(--linea);border-radius:var(--radio);
  padding:var(--space-sm) var(--space-md);margin:.55rem 0;box-shadow:var(--sombra)}
.faq-item h3{margin:0 0 .3rem;font-size:1.02rem}
.faq-item p{margin:0;color:var(--tinta-2);font-size:.93rem}
.bloque-cab{margin-bottom:var(--space-sm)}
.bloque-cab p{color:var(--tinta-2);margin:0}

/* ── подвал ──────────────────────────────────────────────── */
footer{border-top:2px solid var(--oro);background:var(--marmol);
  margin-top:var(--space-xl);padding:var(--space-lg) 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-md)}
footer h4{font-family:var(--font-display);font-weight:700;font-size:.96rem;margin:0 0 .4rem}
.foot-links{display:flex;flex-direction:column;gap:.3rem}
.foot-links a{font-size:.9rem;color:var(--tinta-2)}
footer p{font-size:.87rem;color:var(--tinta-2)}

/* ── адаптив ─────────────────────────────────────────────── */
@media (max-width:980px){
  .hero-texto{max-width:100%}
  .hero-fig{display:none}
  .comp-body{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ops{grid-template-columns:repeat(2,1fr)}
  .veredictos{grid-template-columns:1fr}
  .con-figura{grid-template-columns:1fr}
}
@media (max-width:820px){
  .bar nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--marmol);border-bottom:2px solid var(--oro);padding:.5rem 4vw .8rem}
  .bar nav.open{display:flex}
  .bar nav a{padding:.6rem .5rem;border-bottom:1px solid var(--linea);border-radius:0}
  .burger{display:block;order:3}
  .nav-cta{margin-left:auto;order:2;font-size:.84rem;padding:.46rem .8rem}
  .toc ol{columns:1}

  /* Тот же приём, что на Starlight: ландшафт при cover в портретном экране
     режется в столбик, поэтому арт лежит сверху в родной пропорции, а текст
     сидит в карточке поверх него. Гашение — ДЛИНАМИ: край картинки привязан
     к ширине экрана, а не к высоте героя. */
  .hero{padding-top:36vw;padding-bottom:clamp(1.9rem,6vw,2.8rem)}
  .hero:has(.hero-fig){padding-top:44vw}
  .hero::before{background:var(--hero-img-sm,url(../img/hero-fondo-sm.webp)) 52% top/168% auto no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(53vw - 60px),transparent 53vw);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(53vw - 60px),transparent 53vw)}
  .hero::after{display:none}
  .hero-panel{display:block;background:rgba(28,15,61,.93);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:2px solid var(--oro);border-radius:var(--radio);
    box-shadow:var(--sombra);padding:var(--space-md) var(--space-md) .4rem}
  .hero-panel h1{margin-bottom:.35em}
  .hero-logo{width:min(260px,64%)}
  .hero:has(.hero-fig) .hero-logo{width:min(190px,50%)}
  .hero-fig{display:block;position:absolute;right:0;top:0;
    height:44vw;width:auto;max-width:42%;object-fit:contain;object-position:bottom}
  .hero-cta{flex-direction:column;align-items:stretch;gap:.55rem}
  .hero-cta .btn{width:100%}
  .hero-cifras{justify-content:flex-start}
}
@media (max-width:620px){
  body{font-size:16px}
  .ops,.foot-grid{grid-template-columns:1fr}
  .comp-datos{grid-template-columns:1fr 1fr}
  .comp-tab{flex:1 1 100%}
  .hero::before{background-image:var(--hero-img-sm,url(../img/hero-fondo-sm.webp));
    background-size:182% auto}
  .tabla-wrap{overflow-x:visible;padding:.35rem}
  .tabla-wrap table,.tabla-wrap tbody,.tabla-wrap tr,.tabla-wrap th,.tabla-wrap td{
    display:block;width:auto;min-width:0}
  .tabla-wrap thead{display:none}
  .tabla-wrap caption{display:block;padding:.55rem .5rem .2rem}
  .tabla-wrap tr{border:1px solid var(--linea);border-radius:var(--radio-sm);
    margin:.5rem 0;padding:.7rem .9rem;background:var(--marmol-2)}
  .tabla-wrap th[scope="row"]{font-family:var(--font-display);font-weight:700;
    font-size:1rem;padding:0 0 .45rem;border:0}
  /* Блочно, а не флексом: во флексе вложенный <strong>/<code> становится
     ОТДЕЛЬНЫМ элементом и уезжает в свою колонку — ячейка со смешанным
     содержимым разваливалась. Подпись сверху, значение снизу. */
  .tabla-wrap td{display:block;padding:.28rem 0;border:0;text-align:left}
  .tabla-wrap td::before{content:attr(data-label);display:block;
    font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted,#666);margin-bottom:.1rem}
  .tabla-wrap td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gris);font-family:var(--font-body)}
}

/* ══ Тема Spaceman: дописано в конец, чтобы ничего не вырезать ══ */

/* Фон героя — космос из кита владельца. Вуаль слева под текст. */
.hero::before{background:url(../img/hero-fondo.webp) 58% center/cover no-repeat}
.hero::after{background:linear-gradient(97deg,
  rgba(21,10,46,.96) 0%, rgba(21,10,46,.90) 30%, rgba(21,10,46,.60) 52%,
  rgba(21,10,46,.26) 72%, rgba(21,10,46,.08) 100%)}

/* Раскладка героя: фигура крупная, но текст важнее — держим её долю. */
.hero-in{position:relative;display:grid;grid-template-columns:1fr auto;
  gap:var(--space-md);align-items:end}
.hero-texto{max-width:min(620px,100%);position:relative;z-index:1}
.hero-fig{width:min(300px,30%);justify-self:end;align-self:end;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));pointer-events:none}
.hero-logo{width:min(230px,60%);margin-bottom:var(--space-sm)}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:var(--space-md)}
.hero-cta .btn{flex:0 0 auto}
.hero-cifras{display:flex;gap:.5rem;flex-wrap:wrap;margin:var(--space-md) 0 0;padding:0;list-style:none}
.hero-cifras li{background:rgba(45,27,99,.72);border:1px solid var(--linea);
  border-radius:999px;padding:.34rem .9rem;font-size:.88rem;color:var(--tinta-2);
  backdrop-filter:blur(4px)}
.hero-cifras b{font-family:var(--font-display);color:var(--oro-claro)}

/* Кнопки: донорский стиль был под светлую бумагу и здесь не читался. */
.btn{background:linear-gradient(180deg,var(--oro),#7c4ff0);color:#fff;
  border-color:transparent;box-shadow:0 3px 0 #5b32c2}
.btn:hover{color:#fff;box-shadow:0 5px 0 #5b32c2, 0 0 30px rgba(167,139,250,.45)}
.btn:active{box-shadow:0 0 0 #5b32c2}
.btn-ghost{background:transparent;color:var(--oro-claro);
  border:2px solid var(--linea-oro);box-shadow:none}
.btn-ghost:hover{background:rgba(167,139,250,.12);color:#fff;box-shadow:none}

/* Меню донора давало 3,3:1 на тёмном — ниже минимума AA. */
.bar nav a{color:var(--tinta-2)}
.bar nav a:hover{background:rgba(167,139,250,.14);color:#fff}
.bar nav a[aria-current]{color:var(--oro-claro);box-shadow:inset 0 -2px 0 var(--oro)}

/* Логотипы операторов нарисованы под светлую карточку: на тёмной
   часть из них исчезает. Даём им собственную светлую подложку. */
.op-logo{background:#f6f3ff;border:1px solid var(--linea)}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr}
  .hero-fig{position:absolute;right:-4%;bottom:0;width:42%;opacity:.5;z-index:0}
  .hero-texto{max-width:100%}
}
@media (max-width:620px){
  .hero-fig{width:54%;opacity:.32;right:-10%}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}

/* Фигура на мобильном уезжала за правый край: страница не прокручивалась
   (герой обрезает), но элемент торчал. Держим внутри и обрезаем явно. */
.hero{overflow:hidden}
@media (max-width:980px){ .hero-fig{right:0} }
@media (max-width:620px){ .hero-fig{right:0;width:50%} }

/* ══ Правки после первого показа ══════════════════════════ */

/* Шрифты: Chakra Petch + Rubik читались как «ещё один шаблон».
   Exo 2 даёт космическую пластику без клише Orbitron, Archivo —
   характерный гротеск, Share Tech Mono — терминальные цифры. */
:root{
  --font-display:"Exo 2",system-ui,-apple-system,sans-serif;
  --font-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
h1,h2,h3{letter-spacing:-.01em}
h1{font-weight:800;line-height:1.08}

/* 🔴 Выноска досталась от светлой темы: светлый градиент под светлым
   текстом — читать было нечем. Здесь это тёмная панель с неоновым кантом. */
.destaque{background:linear-gradient(135deg, rgba(45,27,99,.92), rgba(28,15,61,.92));
  border:1px solid var(--linea-oro);border-left:4px solid var(--oro);
  color:var(--tinta);box-shadow:inset 0 1px 0 rgba(196,181,253,.14), var(--sombra)}
.destaque p{color:var(--tinta)}
.destaque strong{color:var(--oro-claro)}

/* Ховер меню был как на прошлых сайтах — плашка-подложка.
   Здесь линия, которая прочерчивается под словом. */
.bar nav a{position:relative;background:none !important;transition:color .16s ease}
.bar nav a::after{content:"";position:absolute;left:.58rem;right:.58rem;bottom:.15rem;
  height:2px;background:linear-gradient(90deg,var(--oro),var(--rayo));
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;border-radius:2px}
.bar nav a:hover{background:none;color:#fff}
.bar nav a:hover::after{transform:scaleX(1)}
.bar nav a[aria-current]{color:var(--oro-claro);box-shadow:none}
.bar nav a[aria-current]::after{transform:scaleX(1)}

/* Вордмарк — только буквы, без плашки. */
.hero-logo{width:min(300px,72%);margin-bottom:var(--space-md);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}
.brand img{width:92px;height:auto}

/* ── Персонаж по странице ─────────────────────────────────
   Раскладка задана владельцем в именах файлов: сбоку от текста,
   над блоком казино, в конце страницы. Всё декоративное — alt пустой,
   на узких экранах прячем, чтобы не съедало колонку. */
.con-astro{display:grid;grid-template-columns:1fr 200px;gap:var(--space-md);
  align-items:center}
.con-astro .astro{width:100%;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.astro-sobre{display:block;width:150px;margin:0 auto -14px;position:relative;z-index:1;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
.astro-final{display:block;width:190px;margin:var(--space-lg) auto 0;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.cierre{text-align:center;padding:var(--space-md) 0 0}
@media (max-width:820px){
  .con-astro{grid-template-columns:1fr}
  .con-astro .astro{display:none}
  .astro-sobre{width:110px}
  .astro-final{width:140px}
}

/* Логотип-картинка убран из героя: название несёт текст.
   Надстрочка называет игру и провайдера одной строкой. */
.kicker{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:0 0 var(--space-sm);font-family:var(--font-display)}
.kicker b{font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff 10%,var(--oro-claro) 55%,#7c4ff0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(167,139,250,.35)}
.kicker span{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
/* Иконка в шапке — круглая, с неоновым ободком. */
.brand img{width:40px;height:40px;border-radius:50%;
  box-shadow:0 0 0 1px var(--linea-oro), 0 0 18px rgba(167,139,250,.28)}

/* ══ Убираем «полоски» и добавляем воздух ═══════════════════
   Линия под каждым h2 и подчёркивание на ховере — приём донора,
   он читается шаблонно. Вместо линий — светящаяся метка и место. */

h2{border-bottom:none;padding-bottom:0;position:relative;
  margin-top:calc(var(--space-xl) * 1.05);padding-left:1.55rem}
h2::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  border-radius:50%;background:var(--oro);
  box-shadow:0 0 0 4px rgba(167,139,250,.16), 0 0 16px 2px rgba(167,139,250,.55)}
h3{margin-top:var(--space-lg)}

/* Ховер в меню: без линии — свечение и сдвиг цвета. */
.bar nav a::after{display:none}
.bar nav a{border-radius:8px;padding:.42rem .62rem;transition:color .16s ease,background .16s ease}
.bar nav a:hover{color:#fff;background:rgba(167,139,250,.10);
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.22)}
.bar nav a[aria-current]{color:var(--oro-claro);
  background:rgba(167,139,250,.12);box-shadow:inset 0 0 0 1px var(--linea-oro)}

/* Бренд не должен подчёркиваться целиком при наведении. */
.brand,.brand:hover{text-decoration:none}
.brand b{line-height:1.15}
.bar-in{gap:var(--space-md)}

/* Воздух: у донора блоки стояли вплотную. */
section{padding:calc(var(--space-xl) * .9) 0}
section + section{padding-top:0}
.narrow > h2:first-child,.wrap > h2:first-child{margin-top:0}
p{margin:0 0 1.15em}
.tabla-wrap,.destaque,.figura,.veredictos{margin-block:var(--space-lg)}
.con-figura,.con-astro{gap:var(--space-lg);margin-block:var(--space-lg)}
.toc{margin-block:var(--space-lg)}
.hero{padding-block:clamp(3rem,6vw,5.5rem) clamp(3.4rem,7vw,6rem)}

/* Персонаж переехал из отдельной полосы в подвал: стоит сбоку,
   не занимает собственный экран и не создаёт пустоты. */
footer{position:relative;overflow:hidden}
.astro-footer{position:absolute;right:3%;bottom:0;width:150px;opacity:.92;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));pointer-events:none}
.foot-grid{position:relative;z-index:1}
@media (max-width:900px){ .astro-footer{width:104px;right:1%;opacity:.5} }
@media (max-width:620px){ .astro-footer{display:none} }


/* Персонаж в подвале — отдельная колонка сетки, а не абсолют:
   так он не наезжает на ссылки и не создаёт пустого блока. */
.foot-grid{grid-template-columns:1.6fr 1fr 1fr auto;align-items:start}
.astro-footer{position:static;width:160px;justify-self:end;align-self:center;
  opacity:.95;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));pointer-events:none}
@media (max-width:1100px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr} .astro-footer{display:none} }

/* ── Редакционная подпись ──────────────────────────────────
   Была моноширинной с полосой слева — читалась как комментарий в коде.
   Здесь обычный шрифт, без рамок: строка авторства и отдельной строкой
   то, ради чего её вообще читают — как проверены цифры. */
.firma{font-family:var(--font-body);font-size:.84rem;line-height:1.5;
  color:var(--tinta-2);border:0;padding:0;
  display:flex;align-items:center;flex-wrap:wrap;gap:.1rem .7rem;
  margin:0 0 var(--space-lg)}
.firma-quien{font-weight:600;color:var(--tinta)}
.firma-sep{width:4px;height:4px;border-radius:50%;background:var(--oro);
  box-shadow:0 0 10px 1px rgba(167,139,250,.7);flex:0 0 auto}
.firma-fecha{color:var(--gris)}
.firma-check{flex-basis:100%;font-size:.8rem;color:var(--gris);
  display:flex;align-items:baseline;gap:.45rem;margin-top:.15rem}
.firma-check::before{content:"✓";color:var(--verde);font-weight:700;flex:0 0 auto}

/* Воздуха вокруг подписи: секция после героя шла с нулевым верхом,
   и подпись прилипала к шапке. */
section + section{padding-top:var(--space-lg)}
.firma{margin:var(--space-sm) 0 calc(var(--space-xl) * .75);gap:.35rem .8rem}
.firma-check{margin-top:.4rem}
.toc{margin-block:0 var(--space-xl)}

/* ── Мобильный герой ──────────────────────────────────────
   Кнопки шли во всю ширину и ложились поверх астронавта, а сверху
   оставалась пустая полоса. Поджимаем верх, сужаем кнопки под
   фигуру и поднимаем её из-под них. */
@media (max-width:620px){
  .hero{padding-block:1.4rem 2.2rem}
  .kicker{margin-bottom:.5rem}
  .hero h1{margin-bottom:.5em}
  .hero-cta{flex-direction:column;align-items:flex-start;gap:.55rem}
  .hero-cta .btn{width:auto;max-width:74%;justify-content:center}
  .hero-fig{width:46%;right:-2%;bottom:auto;top:46%;opacity:.5}
  .hero-cifras{gap:.4rem}
  .hero-cifras li{font-size:.82rem;padding:.3rem .7rem}
}
@media (max-width:400px){
  .hero-cta .btn{max-width:100%;width:100%}
  .hero-fig{opacity:.32}
}

/* Поджатие верха героя действовало только до 620px, а на планшетных
   ширинах сверху оставалась пустая полоса. Распространяем до 980px. */
@media (max-width:980px){
  .hero{padding-block:1.5rem 2.4rem}
  .kicker{margin-bottom:.5rem}
  .hero h1{margin-bottom:.5em}
}

/* 🔴 Донор резервировал 44vw сверху под фигуру, которая у него на мобильном
   стояла НАД текстом. У нас она сбоку — резерв только гнал пустоту.
   Специфичность :has() перебивала обычные правила, поэтому гасим адресно. */
@media (max-width:980px){
  .hero:has(.hero-fig){padding-top:1.5rem}
}

/* Иконка игры в строке сравнения — сразу видно, о ком речь. */
.ico-juego{display:inline-block;vertical-align:-6px;margin-right:.4rem;
  border-radius:50%;box-shadow:0 0 0 1px var(--linea-oro)}

/* ── Персонажи на телефоне ─────────────────────────────────
   Прятал их целиком — на узком экране сайт становился безликим.
   Возвращаем сильно уменьшенными. */
@media (max-width:900px){ .astro-footer{display:block} }
@media (max-width:620px){
  .astro-footer{display:block;width:78px;opacity:.85;justify-self:end;align-self:center}
  .foot-grid{grid-template-columns:1fr auto;gap:var(--space-md)}
  .foot-grid > div:nth-child(2),.foot-grid > div:nth-child(3){grid-column:auto}
  .con-astro{grid-template-columns:1fr auto}
  .con-astro .astro{display:block;width:86px;align-self:end}
  .astro-sobre{display:block;width:76px;margin-bottom:-8px}
}

/* ── Таблица сравнения компактнее на телефоне ──────────────
   В карточном режиме каждая ячейка шла отдельным блоком с подписью —
   карточка вырастала на пол-экрана. Короткие значения ставим в строку. */
@media (max-width:620px){
  .tabla-wrap{padding:.35rem}
  .tabla-wrap tr{margin:.45rem 0;padding:.6rem .75rem}
  .tabla-wrap th[scope="row"]{font-size:.98rem;padding:0 0 .35rem}
  .tabla-wrap th[scope="row"] .nota{font-size:.76rem}
  .tabla-wrap td{display:flex;gap:.6rem;align-items:baseline;padding:.2rem 0;
    font-size:.88rem;line-height:1.4}
  .tabla-wrap td::before{flex:0 0 34%;font-size:.64rem;margin:0;
    letter-spacing:.06em;opacity:.85}
  /* длинное пояснение — на всю ширину, подпись сверху */
  .tabla-wrap td[data-label="Qué significa para ti"],
  .tabla-wrap td[data-label="Qué significa"],
  .tabla-wrap td[data-label="Qué mirar"],
  .tabla-wrap td[data-label="En realidad"],
  .tabla-wrap td[data-label="Ejemplos"],
  .tabla-wrap td[data-label="Qué implica"]{display:block}
  .tabla-wrap td[data-label="Qué significa para ti"]::before,
  .tabla-wrap td[data-label="Qué significa"]::before,
  .tabla-wrap td[data-label="Qué mirar"]::before,
  .tabla-wrap td[data-label="En realidad"]::before,
  .tabla-wrap td[data-label="Ejemplos"]::before,
  .tabla-wrap td[data-label="Qué implica"]::before{display:block;margin-bottom:.12rem}
  caption{font-size:.78rem;padding:.5rem .6rem .25rem}
}

/* Иконки игр разной формы (квадрат, вытянутый вордмарк) — выравниваем
   по общей коробке, чтобы строки таблицы не прыгали. */
.ico-juego{width:26px;height:26px;object-fit:contain;border-radius:6px;
  box-shadow:none;background:rgba(255,255,255,.06);padding:2px}

/* ── Карточки таблицы на телефоне: плотная версия ──────────
   Было: подпись в треть ширины, значение у правого края, провайдер
   отдельной строкой, крупные отступы. Стало: шапка одной строкой,
   пары «подпись — значение» вплотную, мелкая подпись над значением
   только там, где текст длинный. */
@media (max-width:620px){
  .tabla-wrap tr{margin:.4rem 0;padding:.55rem .7rem;border-radius:12px}
  /* шапка карточки: иконка, имя и провайдер в один блок */
  .tabla-wrap th[scope="row"]{display:flex;align-items:center;flex-wrap:wrap;
    gap:.1rem .45rem;padding:0 0 .3rem;font-size:.95rem;line-height:1.25}
  .tabla-wrap th[scope="row"] br{display:none}
  .tabla-wrap th[scope="row"] .nota{font-size:.72rem;font-weight:400;opacity:.75}
  .ico-juego{width:22px;height:22px;margin-right:.15rem}
  /* короткие пары — в одну строку, подпись не шире необходимого */
  .tabla-wrap td{display:flex;gap:.5rem;align-items:baseline;
    padding:.16rem 0;font-size:.85rem;line-height:1.35}
  .tabla-wrap td::before{flex:0 0 auto;min-width:6.2em;font-size:.6rem;
    letter-spacing:.05em;opacity:.7}
  .tabla-wrap td code{font-size:.82rem;padding:.04em .3em}
  /* длинное пояснение — без подписи вовсе, оно и так понятно по месту */
  .tabla-wrap td[data-label="Qué significa para ti"],
  .tabla-wrap td[data-label="Qué significa"]{display:block;padding-top:.3rem;
    font-size:.83rem;color:var(--tinta-2)}
  .tabla-wrap td[data-label="Qué significa para ti"]::before,
  .tabla-wrap td[data-label="Qué significa"]::before{display:none}
  caption{font-size:.75rem;padding:.45rem .55rem .2rem;line-height:1.4}
}

/* ── Карточка оператора: без рамки в рамке ─────────────────
   Было: карточка с бордюром, внутри ещё одна коробка с подписью,
   и одинаковый текст у всех трёх. Стало: плоско, платёжки чипами,
   отметка о проверке только там, где она правдива. */
.op{border:1px solid var(--linea);border-radius:var(--radio);
  padding:var(--space-sm);gap:.55rem;background:rgba(36,21,82,.5)}
.op-logo{border-radius:10px;padding:.5rem .6rem;background:#f6f3ff;border:0}
.op-logo img{max-height:38px}
.op-head b{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.01em}
.op-info{background:none;border:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.op-moneda{font-size:.82rem;color:var(--tinta-2)}
.op-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.op-chip{font-size:.72rem;line-height:1;padding:.32rem .55rem;border-radius:999px;
  background:rgba(167,139,250,.12);border:1px solid var(--linea);color:var(--tinta-2)}
.op-sello{display:inline-flex;align-items:baseline;gap:.35rem;font-size:.72rem;
  color:var(--verde)}
.op-sello::before{content:"✓";font-weight:700}
.op-btn{margin-top:.15rem}

/* Персонажи на телефоне были слишком мелкими. */
@media (max-width:620px){
  .con-astro .astro{width:118px}
  .astro-footer{width:112px}
  .astro-sobre{width:96px}
}

/* ── Карточка характеристик под героем ─────────────────────
   Быстрый ответ на «что это вообще»: восемь фактов, каждый из леджера.
   Тёмная панель, чтобы не спорить с космосом, и моноширинные числа. */
.ficha-wrap{padding-block:0 var(--space-lg)}
.ficha{background:linear-gradient(160deg, rgba(45,27,99,.72), rgba(28,15,61,.82));
  border:1px solid var(--linea-oro);border-radius:var(--radio);
  padding:var(--space-md);box-shadow:var(--sombra)}
.ficha-cab{display:flex;align-items:center;gap:.65rem;margin-bottom:var(--space-md);
  padding-bottom:.8rem;border-bottom:1px solid var(--linea)}
.ficha-cab img{border-radius:50%;box-shadow:0 0 0 1px var(--linea-oro)}
.ficha-cab b{display:block;font-family:var(--font-display);font-size:1.12rem;
  letter-spacing:.02em}
.ficha-cab span{font-size:.78rem;color:var(--gris);letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--font-mono)}
.ficha-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md) var(--space-sm);
  margin:0}
.ficha-grid dt{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);margin-bottom:.24rem}
.ficha-grid dd{margin:0;font-size:.96rem;color:var(--tinta);font-weight:500}
.ficha-grid code{font-size:.92rem}
@media (max-width:820px){ .ficha-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .ficha{padding:var(--space-sm)} .ficha-grid{gap:var(--space-sm)} }

/* ── Главные CTA ───────────────────────────────────────────
   Первая пара — действие, вторая — разделы сайта. Разная весомость,
   чтобы не превращать герой в стену одинаковых кнопок. */
.btn-cta{background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#2a1a05;
  border-color:transparent;box-shadow:0 3px 0 #b45309, 0 0 26px rgba(251,191,36,.3);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.95rem}
.btn-cta:hover{color:#2a1a05;box-shadow:0 5px 0 #b45309, 0 0 34px rgba(251,191,36,.45)}
.btn-cta:active{box-shadow:0 0 0 #b45309}
.btn-bono{background:rgba(236,72,153,.14);color:#fbcfe8;
  border:2px solid rgba(236,72,153,.5);box-shadow:none;
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.9rem}
.btn-bono:hover{background:rgba(236,72,153,.22);color:#fff;box-shadow:none}
.regalo{flex:0 0 auto;transform-origin:50% 70%;animation:tiembla 2.6s ease-in-out infinite}
@keyframes tiembla{
  0%,72%,100%{transform:rotate(0) scale(1)}
  76%{transform:rotate(-11deg) scale(1.06)}
  80%{transform:rotate(9deg) scale(1.06)}
  84%{transform:rotate(-7deg) scale(1.04)}
  88%{transform:rotate(5deg) scale(1.02)}
  92%{transform:rotate(-2deg) scale(1)}
}
/* Тряску отключаем тем, кто просил меньше движения. */
@media (prefers-reduced-motion: reduce){ .regalo{animation:none} }
.hero-cta-2{margin-top:.55rem}
.hero-cta-2 .btn{font-size:.88rem;padding:.5rem 1rem}

/* Бонус в карточке оператора: цифра заметна, условия рядом мелким.
   Там, где бонус не проверен, честная строка вместо выдумки. */
.op-bono{margin:0;font-family:var(--font-display);font-size:1.02rem;
  font-weight:700;color:var(--oro-claro);line-height:1.25}
.op-bono-det{font-size:.72rem;color:var(--gris);line-height:1.4}
.op-sindatos{font-size:.72rem;color:var(--gris);font-style:italic}

/* ── Карточка характеристик: правка подачи ─────────────────
   Значения были в рамках-плашках жёлтым моноширинным — читались
   как теги и спорили с кнопкой CTA. Здесь просто крупная цифра
   в акцентном цвете: рамка не нужна, её роль выполняет сетка. */
.ficha-wrap{padding-block:var(--space-lg) var(--space-lg)}
.ficha-grid dd{font-family:var(--font-display);font-size:1.14rem;font-weight:700;
  color:var(--tinta);letter-spacing:.01em}
.ficha-grid code{background:none;border:0;padding:0;border-radius:0;
  font-family:var(--font-display);font-size:1.14rem;font-weight:700;
  color:var(--oro-claro);letter-spacing:.01em}
.ficha-grid > div{padding-left:.7rem;border-left:2px solid var(--linea-suave,rgba(196,181,253,.16))}
.ficha-grid > div:hover{border-left-color:var(--oro)}

/* ── Числа в тексте: без рамок ─────────────────────────────
   Были плашки с оранжевым кантом — читались как теги и спорили
   с жёлтой кнопкой CTA. Цифра и так заметна: достаточно цвета,
   начертания и лёгкой подложки без границы. */
code{background:none;border:0;padding:0;border-radius:0;
  font-family:var(--font-display);font-weight:700;font-size:1em;
  color:var(--oro-claro);letter-spacing:.01em;white-space:nowrap}
/* В таблицах даём числу лёгкий фон, чтобы колонка читалась как колонка. */
.tabla-wrap code{background:rgba(167,139,250,.10);padding:.08em .42em;
  border-radius:6px}

/* ── Блок сравнения: шире и без рамки в рамке ──────────────
   Внешняя рамка обёртки + рамка каждой строки давали «коробку
   в коробке». Оставляем одну. */
.tabla-wrap{background:none;border:0;box-shadow:none;padding:0}
.tabla-wrap table{background:rgba(36,21,82,.42);border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden}
.tabla-wrap caption{padding:.9rem 1rem .2rem;font-family:var(--font-body);
  font-size:.84rem;color:var(--gris);line-height:1.5;text-align:left}
@media (min-width:981px){
  /* На широких экранах таблица выходит за колонку текста: сравнение
     из четырёх столбцов в узкой колонке читать неудобно. */
  .narrow .tabla-wrap{width:min(1180px,94vw);margin-inline:calc(50% - min(590px,47vw))}
}
@media (max-width:620px){
  .tabla-wrap table{background:none;border:0;border-radius:0}
  .tabla-wrap tr{background:rgba(36,21,82,.5);border:1px solid var(--linea)}
  .tabla-wrap caption{padding:0 0 .6rem}
}

/* В карточке на телефоне значение прижимаем к правому краю:
   подпись слева, число справа — глаз находит цифры одной колонкой. */
@media (max-width:620px){
  .tabla-wrap td{justify-content:space-between;gap:1rem}
  .tabla-wrap td::before{min-width:0}
  .tabla-wrap td > *,.tabla-wrap td code{text-align:right}
}