/* starlightprincess.cl

   Правка курса: было «светлые карточки со скруглением и мягкой тенью на
   пастельном градиенте» — ровно то, чем выглядит любая сгенерированная
   страница. Здесь другое:
   · тёплая бумага поверх холодного неба — две температуры, а не одна;
   · чернильная рамка в 1.5px и СПЛОШНАЯ смещённая тень вместо размытой;
   · серифный дисплей (Fraunces) против гротеска в тексте — так выглядит
     разбор, а не витрина казино;
   · цифры моноширинные: их сверяют, а не читают. */

:root{
  --paper:#fffcf6;
  --paper-2:#f7f2e9;
  --sky:#e9f1fc;
  --sky-2:#dae7f9;
  --ink:#161d38;
  --ink-2:#414d72;
  --muted:#78859f;
  --violet:#5a3ff0;
  --violet-pale:#eee9ff;
  --rose:#ff4f93;
  --gold:#f0a92e;
  --mint:#0f9e7c;
  --linea:rgba(22,29,56,.16);
  --linea-fuerte:rgba(22,29,56,.42);
  --sombra:4px 4px 0 rgba(22,29,56,.09);
  --sombra-fuerte:5px 5px 0 var(--ink);
  --radio:14px;
  --radio-sm:9px;
  --space-xs:.55rem;
  --space-sm:.9rem;
  --space-md:1.5rem;
  --space-lg:2.6rem;
  --space-xl:4.2rem;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Space Grotesk",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;
  /* Небо + едва заметная звёздная сетка: фон перестаёт быть плоской заливкой,
     но не спорит с текстом. */
  background:
    radial-gradient(circle at 50% 50%, rgba(90,63,240,.14) 0 1.1px, transparent 1.4px) 0 0/26px 26px,
    radial-gradient(760px 420px at 6% -8%, rgba(90,63,240,.10), transparent 62%),
    radial-gradient(680px 400px at 96% 0%, rgba(255,79,147,.09), transparent 64%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 55%, var(--sky) 100%);
  background-attachment:scroll,fixed,fixed,fixed;
  color:var(--ink);font:400 17px/1.68 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--font-mono);font-size:.92em;background:var(--violet-pale);
  border-radius:5px;padding:.1em .4em;color:#3b23bd}

.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(--ink);margin:0 0 .5em;
  font-variation-settings:"SOFT" 0,"WONK" 1;letter-spacing:-.015em}
h1{font-weight:900;font-size:clamp(2.05rem,4.6vw,3.25rem);line-height:1.08}
h2{font-weight:800;font-size:clamp(1.5rem,2.8vw,2.15rem);line-height:1.15;
  margin-top:var(--space-lg)}
/* Звезда перед разделом — метка навигации, а не украшение: глаз цепляется
   за начало блока в длинной странице. */
h2::before{content:"✦";color:var(--gold);font-family:var(--font-body);
  font-size:.62em;vertical-align:.28em;margin-right:.45em}
h3{font-weight:700;font-size:1.18rem;margin-top:var(--space-md)}
p{margin:0 0 1em}
strong{font-weight:700}

/* ── шапка ───────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:60;background:rgba(255,252,246,.92);
  backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink)}
.bar-in{display:flex;align-items:center;gap:var(--space-sm);padding:.55rem 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:1rem;line-height:1.05;
  color:var(--ink);white-space:nowrap}
.brand span{display:block;font:700 .56rem/1 var(--font-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.bar nav{display:flex;gap:.15rem;margin-left:auto;flex-wrap:nowrap}
.bar nav a{padding:.42rem .6rem;border-radius:7px;font-size:.9rem;font-weight:500;color:var(--ink-2)}
.bar nav a:hover{background:var(--violet-pale);color:var(--violet);text-decoration:none}
.bar nav a[aria-current]{color:var(--violet);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--violet);border-radius:0}
.nav-cta{flex-shrink:0}
.burger{display:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:7px;
  color:var(--ink);font-size:1.05rem;padding:.28rem .55rem;cursor:pointer}

/* ── кнопки: сплошная тень и сдвиг при нажатии, без «стеклянного» блеска ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.66rem 1.25rem;border-radius:var(--radio-sm);font-family:var(--font-body);
  font-weight:700;font-size:.98rem;line-height:1.25;border:1.5px solid var(--ink);
  cursor:pointer;background:var(--violet);color:#fff;box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{text-decoration:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink)}

/* ── герой ───────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(2.6rem,5vw,4.4rem) 0 clamp(3.4rem,7vw,6rem);
  border-bottom:1.5px solid var(--ink)}
/* Картинка и вуаль — на разных псевдоэлементах: только так каждой можно
   задать свою маску. Вуаль идёт слева направо, текст остаётся тёмным по
   светлому, арт открыт справа; обе гаснут книзу — стыка не видно. */
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.4) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.4) 86%,transparent 100%)}
.hero::before{z-index:-2;background:var(--hero-img,url(../img/hero-fondo.webp)) var(--hero-pos,50% 14%)/cover no-repeat}
.hero::after{z-index:-1;background:
  linear-gradient(97deg,
    rgba(255,252,246,.98) 0%, rgba(255,252,246,.96) 34%, rgba(255,252,246,.80) 48%,
    rgba(255,252,246,.34) 63%, rgba(255,252,246,.05) 77%, rgba(255,252,246,0) 88%),
  var(--hero-tint,transparent)}
/* Подстраницы: заголовок короче и колонка уже, поэтому вуаль здесь заметно
   легче — иначе пейзаж под ней просто не виден, и фон опять «градиент». */
.hero[style]::before{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)}
.hero[style]::after{background:
  linear-gradient(97deg,
    rgba(255,252,246,.96) 0%, rgba(255,252,246,.90) 28%, rgba(255,252,246,.52) 46%,
    rgba(255,252,246,.12) 66%, rgba(255,252,246,0) 80%),
  var(--hero-tint,transparent)}
.hero-in{position:relative}
.hero-texto{max-width:min(580px,54%)}
.hero-logo{width:min(390px,84%);margin-bottom:var(--space-sm);
  filter:drop-shadow(0 8px 18px rgba(22,29,56,.24))}
.hero h1{margin-bottom:.4em}
.hero p{font-size:1.08rem;color:var(--ink-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(--paper);border:1.5px solid var(--ink);
  border-radius:999px;padding:.28rem .8rem;font-size:.84rem;color:var(--ink-2)}
.hero-cifras b{font-family:var(--font-mono);font-weight:700;color:var(--violet)}
/* Принцесса в герое подстраниц — своя у каждой версии. */
.hero-texto{position:relative;z-index:1}
.hero-panel{display:contents}
.hero-fig{position:absolute;right:0;bottom:calc(-1 * clamp(3.4rem,7vw,6rem));
  width:min(340px,34%);z-index:0;pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(22,29,56,.26))}

/* Арт-полоса под героем: на десктопе не нужна — там картинка живёт в самом
   герое. Появляется только на телефоне, где ландшафтный кадр внутри героя
   либо прятал лицо под кнопками, либо оставлял пустое место. */
.franja{display:none}

/* ── сравнитель: ядро сайта ──────────────────────────────── */
.comp{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radio);
  box-shadow:var(--sombra-fuerte);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:.65rem .6rem;border:1.5px solid var(--linea);
  border-radius:var(--radio-sm);background:var(--paper-2);cursor:pointer;
  transition:border-color .14s ease,background .14s ease,transform .14s ease}
.comp-tab img{height:40px;width:auto}
.comp-tab b{font-family:var(--font-body);font-weight:700;font-size:.9rem;color:var(--ink-2)}
.comp-tab:hover{border-color:var(--linea-fuerte)}
.comp-tab[aria-selected="true"]{border-color:var(--ink);background:var(--paper);
  box-shadow:3px 3px 0 var(--violet)}
.comp-tab[aria-selected="true"] b{color:var(--violet)}
/* Уголок под активной вкладкой: видно, к какой панели она относится. */
.comp-tab[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-9px;
  width:12px;height:12px;background:var(--paper);border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:translateX(-50%) rotate(45deg)}

.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(--paper-2);border:1.5px solid var(--linea);
  border-radius:var(--radio-sm);padding:.55rem .75rem}
.comp-dato b{display:block;font-family:var(--font-mono);font-weight:700;font-size:1.22rem;
  color:var(--ink);letter-spacing:-.03em}
.comp-dato span{font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-family:var(--font-body)}
.comp-dato.destacado{background:var(--violet-pale);border-color:var(--violet)}
.comp-dato.destacado b{color:var(--violet)}
.comp-nota{grid-column:1/-1;font-size:.88rem;color:var(--ink-2);margin:0}

/* демо: тяжёлый iframe грузим по клику, а не на входе */
.demo-caja{position:relative;border-radius:var(--radio-sm);overflow:hidden;
  border:1.5px solid var(--ink);background:#0e1630;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(.7)}
.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:.8rem;font-family:var(--font-mono);color:#e3ebfb;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* ── таблицы ─────────────────────────────────────────────── */
.tabla-wrap{overflow-x:auto;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:var(--radio);box-shadow:var(--sombra);margin:var(--space-sm) 0}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
caption{caption-side:top;text-align:left;font-size:.82rem;color:var(--muted);
  padding:.75rem .95rem .35rem;font-family:var(--font-mono);line-height:1.5}
th,td{padding:.6rem .95rem;text-align:left;border-bottom:1px solid var(--linea)}
thead th{font-family:var(--font-body);font-weight:700;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);background:var(--paper-2);
  border-bottom:1.5px solid var(--ink)}
tbody th{font-weight:700;color:var(--ink)}
tbody td{font-family:var(--font-mono);font-size:.9rem}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
.fila-mejor td,.fila-mejor th{background:rgba(15,158,124,.09)}
.fila-peor td,.fila-peor th{background:rgba(255,79,147,.08)}

/* ── прочие блоки ────────────────────────────────────────── */
.toc{background:var(--paper);border:1.5px solid var(--ink);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:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.toc ol{margin:.5rem 0 0;padding-left:1.2rem;columns:2;column-gap:var(--space-md)}
.toc li{margin:.22rem 0;font-size:.93rem}
.firma{font-family:var(--font-mono);font-size:.78rem;line-height:1.6;color:var(--muted);
  border-left:2px solid var(--gold);padding-left:.8rem;margin-bottom:var(--space-md)}
.nota{font-size:.86rem;color:var(--muted)}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  flex-wrap:wrap;background:var(--violet-pale);border:1.5px solid var(--ink);
  border-radius:var(--radio);box-shadow:var(--sombra);
  padding:var(--space-sm) var(--space-md);margin:var(--space-md) 0}
.cta-band b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.14rem}
.cta-band span{font-size:.9rem;color:var(--ink-2)}
.legal{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radio);
  padding:var(--space-sm) var(--space-md);font-size:.84rem;color:var(--ink-2);
  margin-top:var(--space-md)}
.edad{display:inline-block;background:var(--rose);color:#fff;font-weight:700;
  border:1.5px solid var(--ink);border-radius:999px;padding:.02rem .5rem;
  font-size:.76rem;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(--paper);
  border:1.5px solid var(--ink);border-radius:var(--radio);padding:var(--space-sm);
  box-shadow:var(--sombra)}
.op-logo{background:var(--paper-2);border:1.5px 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:800;font-size:1.08rem}
.op-badge{font-size:.6rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  font-family:var(--font-mono);background:var(--gold);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:999px;padding:.08rem .5rem}
.op-info{background:var(--paper-2);border:1.5px solid var(--linea);border-radius:var(--radio-sm);
  padding:.55rem .7rem;font-size:.9rem;color:var(--ink-2);flex:1}
.op-label{display:block;font-size:.6rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);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(--paper);border:1.5px solid var(--ink);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.55rem;color:var(--violet);
  line-height:1.1;letter-spacing:-.04em}
.ver b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  margin:.2rem 0 .35rem}
.ver p{font-size:.92rem;color:var(--ink-2);margin:0}
.ver-para{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:.45rem;font-family:var(--font-mono)}

/* ── вынос: одна мысль, которую нельзя пролистать ────────── */
.destaque{background:var(--violet-pale);border:1.5px solid var(--ink);
  border-left:6px solid var(--violet);border-radius:var(--radio);
  padding:var(--space-md);margin:var(--space-md) 0;box-shadow:var(--sombra)}
.destaque p{margin:0}
.destaque p + p{margin-top:.7rem}
.destaque strong{color:#3b23bd}

/* ── иллюстрации ─────────────────────────────────────────── */
.figura{margin:var(--space-md) 0;background:var(--paper);border:1.5px solid var(--ink);
  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:.76rem;line-height:1.55;
  color:var(--muted);padding:.55rem .45rem .25rem}
.con-figura{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--space-md);align-items:start}
.con-figura .figura{margin-top:0}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item{background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radio);
  padding:var(--space-sm) var(--space-md);margin:.6rem 0;box-shadow:var(--sombra)}
.faq-item h3{margin:0 0 .3rem;font-size:1.06rem}
.faq-item p{margin:0;color:var(--ink-2);font-size:.95rem}
.bloque-cab{margin-bottom:var(--space-sm)}
.bloque-cab p{color:var(--ink-2);margin:0}

/* ── подвал ──────────────────────────────────────────────── */
footer{border-top:1.5px solid var(--ink);background:var(--paper);
  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:800;font-size:1rem;margin:0 0 .4rem}
.foot-links{display:flex;flex-direction:column;gap:.3rem}
.foot-links a{font-size:.92rem;color:var(--ink-2)}
footer p{font-size:.89rem;color:var(--ink-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(--paper);border-bottom:1.5px solid var(--ink);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:.86rem;padding:.48rem .85rem}
  .toc ol{columns:1}

  /* Ландшафтный арт в портретном экране при cover превращается в случайный
     вертикальный столбик. Поэтому здесь он не растянут на весь герой, а лежит
     полосой по низу фиксированной высоты и проявляется маской. Текст и кнопки
     стоят выше полосы — они больше не лежат на картинке. */
  /* Телефон: герой САМ становится блоком с картинкой. Арт лежит сверху в
     полную силу, в родной пропорции (175% по ширине — высота выходит ≈99.5vw),
     а заголовок с абзацем сидят в карточке, наползающей на его низ. Так текст
     стоит на изображении, а не на выбеленном призраке.
     Гашение задаём ДЛИНАМИ, а не процентами: процент считался бы от высоты
     героя, а край картинки привязан к ширине экрана. */
  /* Без логотипа карточка садится прямо на padding-top, поэтому он и задаёт
     видимую часть арта. На главной оставляем лицо и плечи, дальше — карточка.
     На подстранице отступ больше: там сверху стоят логотип версии и фигура. */
  .hero{padding-top:38vw;padding-bottom:clamp(1.9rem,6vw,2.8rem)}
  .hero:has(.hero-fig){padding-top:46vw}
  .hero::before{inset:0;height:auto;
    background:var(--hero-img-sm,url(../img/hero-fondo-md.webp)) 58% top/175% auto no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(99.5vw - 80px),transparent 99.5vw);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(99.5vw - 80px),transparent 99.5vw)}
  .hero::after{display:none}
  .hero-logo{margin-bottom:var(--space-md)}
  /* На подстранице логотип уходит влево и сужается, а фигура версии встаёт
     справа: обе внутри арт-блока, ногами на его нижнем крае (99.5vw − 46vw
     отступа сверху = 53.5vw доступной высоты). */
  .hero:has(.hero-fig) .hero-logo{width:min(210px,54%)}
  .hero-fig{display:block;position:absolute;right:0;top:0;
    height:53.5vw;width:auto;max-width:44%;object-fit:contain;object-position:bottom}
  .hero-panel{display:block;background:rgba(255,252,246,.90);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1.5px solid var(--ink);border-radius:var(--radio);
    box-shadow:var(--sombra);padding:var(--space-md) var(--space-md) .4rem}
  .hero-panel h1{margin-bottom:.35em}
  /* Кнопки в столбик одной ширины: вразнобой они и выглядели криво. */
  .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%}
  .comp-tab[aria-selected="true"]::after{display:none}
  /* Таблица шире экрана нечитаема — разбираем её в карточки по строкам. */
  .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}
  /* caption при table{display:block} схлопывается в колонку из одного слова */
  .tabla-wrap caption{display:block;padding:.55rem .5rem .2rem}
  .tabla-wrap tr{border:1.5px solid var(--linea);border-radius:var(--radio-sm);
    margin:.5rem 0;padding:.7rem .9rem;background:var(--paper-2)}
  .tabla-wrap th[scope="row"]{font-family:var(--font-display);font-weight:800;
    font-size:1.02rem;padding:0 0 .45rem;border:0}
  .tabla-wrap td{display:flex;justify-content:space-between;align-items:baseline;
    gap:1rem;padding:.24rem 0;border:0;text-align:right}
  .tabla-wrap td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-family:var(--font-body)}
}