/* Guía DaleWin: componentes de los textos sobre la base KTO (site.css). Sin bordes decorativos ni íconos de línea; bloques por tono. */

/* marca */
.dwmark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #2fbf68; color: #04170b;
  font: 800 1.15rem/1 var(--font-head); transform: skewX(-6deg); flex: none; }
.dwname { display: flex; flex-direction: column; gap: 3px; font: 800 1.12rem/1 var(--font-head); color: #fff; font-style: normal; letter-spacing: -.01em; }
.dwname small { font: 600 .66rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.art__mark.dwmark { width: 72px; height: 72px; font-size: 2.6rem; border-radius: 16px; transform: rotate(4deg); }
.dwmark--hub { width: 44px; height: 44px; font-size: 1.5rem; border-radius: 11px; }

/* герой: миниатюры квадратные */
.art__card img { aspect-ratio: 1; }
.hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.85rem); }
.ficha dd { white-space: normal; }

/* разделы */
.step__body > h2 { margin-bottom: 8px; }
.step__body .sub { color: var(--muted); margin: 0 0 var(--space-md); max-width: 68ch; }
.step__body .prose { max-width: 70ch; }
.step__body .prose ul, .step__body .prose ol { padding-left: 1.2em; }
.step__body .prose li { margin: .35em 0; }
.step__body .prose li::marker { color: var(--red-text); }
.step__body > * + .prose { margin-top: var(--space-sm); }

/* цифры внутри разделов */
.step__body .stats { display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: var(--space-md) 0; background: none; }
.step__body .stat { background: var(--surface); padding: 16px 18px 18px; }
.step__body .stat:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.step__body .stat:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.stat strong { display: block; font: 800 clamp(1.45rem, 1.2rem + 1vw, 1.95rem)/1.05 var(--font-head); color: var(--red-text); letter-spacing: -.02em; }
.stat span { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--muted); }

/* ficha (dl.facts) como líneas de fecha del KTO */
.facts { display: grid; gap: 3px; margin: var(--space-md) 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 14px; background: var(--surface); padding: 12px 16px; }
.facts > div:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.facts > div:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.facts dt { font: 700 .86rem/1.4 var(--font-head); color: var(--red-text); }
.facts dd { margin: 0; font-size: var(--text-sm); color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 30rem) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* tarjetas */
.grid, .items { display: grid; gap: 12px; margin: var(--space-md) 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .grid.c2, .grid.c3, .grid.c4, .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.items:has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.item, .grid .card { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.item h3, .grid .card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.item p, .grid .card p { margin: 0; font-size: var(--text-sm); color: var(--text); }
.item dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 10px; font-size: var(--text-sm); }
.item dt { color: var(--muted); }
.item dd { margin: 0; color: #fff; font-weight: 600; }

/* pros / contras con el cuadrado lleno del KTO */
.pc { display: grid; gap: 12px; margin: var(--space-md) 0; }
@media (min-width: 48rem) { .pc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pc .card { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; }
.pc .card h3 { font-size: 1.02rem; margin: 0 0 8px; }
.pc ul { list-style: none; margin: 0; padding: 0; }
.pc li { position: relative; padding: 10px 0 10px 36px; font-size: var(--text-sm); }
.pc li + li { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.pc li::before { position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 5px; font: 800 .8rem/22px var(--font-head); text-align: center; }
.pc .pro li::before { content: "✓"; background: var(--red); color: #fff; }
.pc .con li::before { content: "×"; background: var(--surface-2); color: #ff8a7a; font-size: 1rem; }

/* pasos */
.steps { list-style: none; counter-reset: s; margin: var(--space-md) 0; padding: 0; display: grid; gap: 3px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; background: var(--surface); padding: 14px 16px; align-items: start; }
.steps li:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.steps li:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 800 1.25rem/1.2 var(--font-head); color: var(--red-text); }
.steps b { display: block; color: #fff; font-family: var(--font-head); margin-bottom: 2px; }
.steps p { margin: 0; font-size: var(--text-sm); }

/* avisos */
.note, .warn, .unv { background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 20px; margin: var(--space-md) 0; box-shadow: inset 4px 0 0 var(--red); }
.warn { box-shadow: inset 4px 0 0 #e0544a; }
.unv { box-shadow: inset 4px 0 0 #e8b931; }
.note > :last-child, .warn > :last-child, .unv > :last-child { margin-bottom: 0; }
.tag { margin-bottom: 8px; }
.note .tag, .warn .tag, .unv .tag { display: inline-block; transform: none; padding: 3px 8px; border-radius: 4px; font: 800 .66rem/1.2 var(--font-head); letter-spacing: .1em; }
.warn .tag { background: #e0544a; }
.unv .tag { background: #e8b931; color: #1a1400; }

/* banda verde */
.cta { background: var(--red); border-radius: var(--radius); padding: 22px 24px; margin: var(--space-lg) 0 0; display: grid; gap: 14px; align-items: center; }
@media (min-width: 62rem) { .cta { grid-template-columns: minmax(0, 1fr) auto; } }
.cta h2 { color: #fff; font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); text-transform: uppercase; margin: 0 0 4px; }
.cta p { margin: 0; color: #dcfce7; }
.cta .btn, .cta .btn-p { background: #fff; color: var(--ink-paper); }
.cta .btn:hover, .cta .btn-p:hover { background: var(--paper-2); color: var(--ink-paper); }

/* «más» y relacionados */
.rel { display: grid; gap: 12px; margin: var(--space-md) 0 0; }
@media (min-width: 48rem) { .rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel a { display: block; background: var(--surface); box-shadow: inset 4px 0 0 var(--red); padding: 16px 20px; text-decoration: none; color: var(--text); }
.rel a:hover { background: var(--surface-2); }
.rel b { display: block; color: #fff; font: 800 .86rem/1.3 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
.rel span { font-size: var(--text-sm); color: var(--muted); }
.more--rel h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem); margin-bottom: 4px; }
.more--rel .sub { color: var(--muted); }

/* FAQ en la franja clara */
.paper h2 + .sub, .paper .sub { color: var(--text-paper); margin: 12px 0 6px; }
.paper .faq details { border-bottom: 1px solid rgba(10,10,10,.14); }
.paper .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 2px;
  font: 700 1rem/1.4 var(--font-head); color: var(--ink-paper); }
.paper .faq summary::-webkit-details-marker { display: none; }
.paper .faq summary::after { content: "+"; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--ink-paper); color: #fff; font: 700 1.05rem/30px var(--font-body); text-align: center; }
.paper .faq details[open] summary::after { content: "−"; background: var(--red); }
.paper .faq details > div { padding: 0 2px 18px; color: var(--text-paper); max-width: 72ch; }
.paper .faq details > div p { margin: 0 0 8px; }
.paper .note, .paper .warn, .paper .unv { background: var(--paper-2); color: var(--text-paper); }

/* juegos del lobby (cuadrados) y capturas */
.jogos { margin: var(--space-md) 0 6px; }
/* 4 columnas: 8 y 12 miniaturas llenan filas completas */
.jogo { display: block; text-decoration: none; color: inherit; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.jogo img { aspect-ratio: 1; object-fit: cover; transition: transform .25s var(--ease-out); }
.jogo:hover img { transform: scale(1.04); }
.jogo span { display: block; padding: 8px 10px 10px; font-size: var(--text-xs); color: var(--muted); line-height: 1.35; }
.jogo span b { display: block; color: #fff; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shots2 { display: grid; gap: 14px; margin: var(--space-md) 0; }
@media (min-width: 48rem) { .shots2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.shots2 .shot { margin: 0; }
.shot img { border-radius: var(--radius); }
.promo { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.promo img { width: 100%; aspect-ratio: 1600 / 512; object-fit: cover; }
.promo__btn { position: absolute; right: 14px; bottom: 14px; background: #fff; color: var(--ink-paper); font: 800 .78rem/1 var(--font-head);
  letter-spacing: .06em; text-transform: uppercase; padding: 11px 18px 11px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
@media (max-width: 30rem) { .promo__btn { right: 8px; bottom: 8px; padding: 8px 14px 8px 10px; font-size: .7rem; } }
.src { font-size: var(--text-xs); color: var(--muted); margin: 6px 0 0; }

/* botón flotante con regalo (inclinado como los botones del guía) */
@keyframes giftShake { 0%, 78%, 100% { transform: rotate(0) } 80% { transform: rotate(-14deg) } 84% { transform: rotate(12deg) } 88% { transform: rotate(-10deg) } 92% { transform: rotate(8deg) } 96% { transform: rotate(-4deg) } }
.gift { position: fixed; z-index: 45; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 12px; padding: 12px 26px 12px 16px;
  background: var(--red); color: #fff; text-decoration: none; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); }
.gift:hover { background: var(--red-hover); color: #fff; }
.gift .gi { font-size: 28px; line-height: 1; display: inline-block; transform-origin: 50% 80%; animation: giftShake 3.2s ease-in-out infinite; }
.gift b { display: block; font: 800 .92rem/1.15 var(--font-head); text-transform: uppercase; letter-spacing: .03em; }
.gift small { display: block; font: 600 .72rem/1.2 var(--font-body); opacity: .85; }
@media (max-width: 720px) { .gift { left: 0; right: 0; bottom: 0; justify-content: center; clip-path: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  body { padding-bottom: 74px; } }
@media (prefers-reduced-motion: reduce) { .gift .gi { animation: none; } }

/* Колесо бонуса (демонстрация) */
.wfab{position:fixed;z-index:41;left:22px;bottom:22px;width:64px;height:64px;border-radius:50%;border:0;padding:3px;cursor:pointer;background:var(--c-ink);box-shadow:0 10px 22px rgb(0 0 0 / .5)}
.wfab::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;background:var(--c-paper);box-shadow:0 0 0 3px var(--c-mint)}
.wfab svg{width:100%;height:100%;animation:wfabSpin 9s linear infinite}
.wfab:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:50%}
@keyframes wfabSpin{to{transform:rotate(360deg)}}
@media(max-width:720px){.wfab{left:auto;right:14px;bottom:calc(92px + env(safe-area-inset-bottom));width:56px;height:56px}}
.wdlg{border:0;padding:0;background:transparent;max-width:min(94vw,440px);width:100%;color:var(--c-ink)}
.wdlg::backdrop{background:rgb(0 0 0 / .66)}
.wbox{background:var(--c-paper-2);border-radius:20px;padding:22px 20px 20px;text-align:center;position:relative}
.wbox h2{font-size:22px;margin:0 30px 4px}
.wbox .wsub{color:var(--c-ink-2);font-size:14.5px;margin:0 0 14px}
.wclose{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:var(--c-sf);color:var(--c-ink);font:600 20px/1 var(--f-body);cursor:pointer}
.wstage{position:relative;width:min(78vw,320px);aspect-ratio:1;margin:0 auto 14px}
.wstage .wrot{width:100%;height:100%;transition:transform 4.2s cubic-bezier(.15,.85,.12,1)}
.wstage .wptr{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:28px;height:30px;background:var(--c-ink);clip-path:polygon(50% 100%,6% 22%,10% 8%,22% 2%,78% 2%,90% 8%,94% 22%);filter:drop-shadow(0 3px 4px rgb(0 0 0 / .45))}
.whub img{max-width:58%;max-height:74%;width:auto;height:auto;object-fit:contain}
.wstage .whub{position:absolute;inset:0;margin:auto;width:24%;height:24%;border-radius:50%;background:var(--c-paper);display:grid;place-items:center;font:800 12.5px/1.1 var(--f-display);color:var(--c-mint);box-shadow:0 0 0 3px var(--c-sf-3),0 6px 14px rgb(0 0 0 / .45);text-align:center;letter-spacing:.02em}
.wspin{min-width:200px}
.wres{display:none;background:var(--c-sf);border-radius:14px;padding:14px;margin-top:4px}
.wres b{display:block;font:800 19px/1.25 var(--f-display);color:var(--c-mint);margin-bottom:4px}
.wres p{margin:0 0 12px;color:var(--c-ink-2);font-size:14.5px}
.wnote{font-size:12px;color:var(--c-dim);margin:12px 0 0;line-height:1.45}
.wdlg.done .wspin{display:none}.wdlg.done .wres{display:block}
@media(prefers-reduced-motion:reduce){.wfab svg{animation:none}.wstage .wrot{transition:none}}

/* колесо: шрифты/кнопки KTO */
.wbox h2 { text-transform: uppercase; font-family: var(--font-head); }
.wspin { margin: 0 auto; }
.wdlg .btn, .wdlg .btn-p { min-height: 46px; }
@media (max-width: 720px) { .wfab { right: 14px; left: auto; bottom: calc(86px + env(safe-area-inset-bottom)); } }

.hero h1.h1--long { font-size: clamp(1.5rem, 1.05rem + 2vw, 2.35rem); }
@media (max-width: 30rem) { .hero h1 { font-size: 1.62rem; } .hero h1.h1--long { font-size: 1.42rem; } .strip { font-size: .72rem; } }
/* герой: значок D сверху справа, подпись под миниатюрами не перекрывается */
.art__mark.dwmark { top: -26px; bottom: auto; right: -10px; }