/* ============================================================
   TOP8BIT — "Arcade Cabinet 1987"
   Pixel fonts self-hosted (OFL). Acento por sistema via data-sys.
   ============================================================ */

@font-face {
    font-family: 'Press Start 2P';
    src: url('../fonts/press-start-2p.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'VT323';
    src: url('../fonts/vt323.ttf') format('truetype');
    font-display: swap;
}

:root {
    --t8-bg: #07090f;
    --t8-panel: #12151f;
    --t8-panel2: #0d1017;
    --t8-ink: #f2f4fb;
    --t8-dim: #8e97ab;
    --t8-line: #232a3d;
    --t8-coin: #ffd23f;
    --t8-red: #ff3b30;
    --t8-accent: #ff3b30;
    --t8-accent2: var(--t8-coin);
    --t8-sys: var(--t8-coin);           /* override por consola */
    --t8-pixel: 'Press Start 2P', 'Courier New', monospace;
    --t8-mono: 'VT323', 'Courier New', ui-monospace, monospace;
    --t8-font: var(--t8-mono);          /* alias legado */
    --t8-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Acento por consola (body.sistema-* o [data-sys]) */
[data-sys="nes"],           .sistema-nes           { --t8-sys: #ff3b30; }
[data-sys="gb"],            .sistema-gb            { --t8-sys: #8bac0f; }
[data-sys="atari-2600"],    .sistema-atari-2600    { --t8-sys: #e08a3c; }
[data-sys="pc-engine"],     .sistema-pc-engine     { --t8-sys: #ff8c1a; }
[data-sys="atari-7800"],    .sistema-atari-7800    { --t8-sys: #4f7cff; }
[data-sys="atari-lynx"],    .sistema-atari-lynx    { --t8-sys: #00b8cc; }
[data-sys="colecovision"],  .sistema-colecovision  { --t8-sys: #ffb400; }

html { background: var(--t8-bg); }
body {
    background: var(--t8-bg);
    color: var(--t8-ink);
    font-family: var(--t8-sans);
}
a { color: var(--t8-ink); }
img { max-width: 100%; }

/* GP: sin sidebar en T8 — .site-content flex reparte los .container en columnas */
.site-content { display: block; }
#content.site-content, .inside-site-content { display: block; }

/* CRT: scanlines + viñeta (sutiles, no bloquean) */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
    opacity: .55;
}
body::after {
    content: ''; position: fixed; inset: 0; z-index: 9991; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.38) 100%);
}

/* ==================== HEADER ==================== */
.site-header {
    background: var(--t8-panel2);
    border-bottom: 1px solid var(--t8-line);
    position: relative;
}
/* tira multicolor de consolas — firma visual */
.site-header::after {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg,
        #ff3b30 0 14.3%, #8bac0f 14.3% 28.6%, #e08a3c 28.6% 42.9%,
        #4f7cff 42.9% 57.2%, #00b8cc 57.2% 71.5%, #ff8c1a 71.5% 85.8%, #ffb400 85.8%);
}
.inside-header { background: transparent; }
.main-navigation, .inside-navigation, .main-navigation .inside-navigation { background: transparent; }
.main-navigation ul { background: transparent; }
.main-navigation li, .main-navigation .menu-bar-items { background: transparent; }
.main-title {
    font-family: var(--t8-pixel);
    font-size: 1.05rem;
    letter-spacing: .02em;
}
.main-title a { color: var(--t8-coin); text-decoration: none; text-shadow: 0 0 14px rgba(255,210,63,.35); }
.main-title a:hover { color: #fff; }
.main-title a::before {
    content: ''; display: inline-block; width: 22px; height: 22px; margin-right: .55rem;
    vertical-align: -5px;
    background: url('../img/favicon-32.png') center/contain no-repeat;
    image-rendering: pixelated;
}
.main-navigation a, .main-navigation .menu-item > a {
    font-family: var(--t8-mono); font-size: 1.15rem; letter-spacing: .12em;
    color: var(--t8-dim); text-transform: uppercase;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a {
    color: var(--t8-coin);
}
.menu-toggle { font-family: var(--t8-mono); color: var(--t8-ink); }
.navigation-search input { font-family: var(--t8-mono); }

/* ==================== HERO (front-page) ==================== */
.t8-hero { padding: 0 1rem; }
.t8-marquee {
    overflow: hidden; border-block: 1px solid var(--t8-line);
    background: var(--t8-panel2); margin: 0 -1rem 2.5rem;
}
.t8-marquee span {
    display: inline-block; white-space: nowrap; padding: .5rem 0;
    font-family: var(--t8-mono); font-size: 1.05rem; letter-spacing: .22em;
    color: var(--t8-dim);
    animation: t8marquee 28s linear infinite;
}
.t8-marquee b { color: var(--t8-coin); font-weight: 400; }
@keyframes t8marquee { to { transform: translateX(-50%); } }

.t8-hero h1 {
    font-family: var(--t8-pixel);
    font-size: clamp(1.35rem, 4.6vw, 2.4rem);
    line-height: 1.65; margin: 0 0 1.4rem;
    color: #fff;
    text-shadow: 3px 0 0 rgba(255,59,48,.55), -3px 0 0 rgba(0,184,204,.5);
}
.t8-hero h1 .bit { color: var(--t8-coin); }
.t8-cursor {
    display: inline-block; margin-left: .35em;
    color: var(--t8-coin); animation: t8blink 1s steps(2) infinite;
}
.t8-hero-sub {
    font-family: var(--t8-mono); font-size: 1.35rem; line-height: 1.45;
    color: var(--t8-dim); margin: 0 0 1.6rem; max-width: 52ch;
}
.t8-hero-stats {
    display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem; margin-bottom: 2.2rem;
}
.t8-stat { display: flex; flex-direction: column; gap: .3rem; }
.t8-stat b {
    font-family: var(--t8-pixel); font-size: 1.3rem; font-weight: 400; color: var(--t8-coin);
}
.t8-stat i { font-style: normal; font-family: var(--t8-mono); font-size: .95rem; letter-spacing: .18em; color: var(--t8-dim); }

.t8-hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
.t8-chip {
    --t8-sys: var(--t8-coin);
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .14em;
    color: var(--t8-ink); text-decoration: none; text-transform: uppercase;
    background: var(--t8-panel); border: 1px solid var(--t8-line);
    padding: .45rem .8rem .45rem .55rem;
    transition: border-color .15s, transform .15s;
}
.t8-chip::before { content: ''; width: 8px; height: 18px; background: var(--t8-sys); }
.t8-chip:hover { border-color: var(--t8-sys); transform: translateY(-2px); color: #fff; }

/* ==================== HUBS por sistema ==================== */
.t8-hub { margin-bottom: 2.8rem; }
.t8-hub-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    border-bottom: 1px solid var(--t8-line); padding-bottom: .55rem; margin-bottom: 1.1rem;
}
.t8-hub-head h2 { font-family: var(--t8-pixel); font-size: .95rem; margin: 0; }
.t8-hub-head h2 a { text-decoration: none; color: var(--t8-sys); }
.t8-hub-head h2 a:hover { color: #fff; }
.t8-hub-head h2 a::before { content: '► '; font-size: .75em; }
.t8-hub-all {
    font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .1em;
    color: var(--t8-dim); text-decoration: none; white-space: nowrap; text-transform: uppercase;
}
.t8-hub-all:hover { color: var(--t8-sys); }

/* ==================== GRID + CARDS ==================== */
.t8-grid { display: grid; gap: .8rem; }
.t8-grid-6, .t8-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
    .t8-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .t8-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
    .t8-grid-6 { grid-template-columns: repeat(6, 1fr); }
    .t8-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.t8-card {
    position: relative; display: block;
    background: var(--t8-panel); border: 1px solid var(--t8-line);
    overflow: hidden; text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.t8-card::before {
    content: ''; display: block; height: 3px; background: var(--t8-sys);
}
.t8-card:hover {
    transform: translateY(-4px);
    border-color: var(--t8-sys);
    box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--t8-sys) 55%, transparent);
}
.t8-card-img { display: block; aspect-ratio: 4/3; background: #000; }
.t8-card-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    image-rendering: pixelated;
    transition: transform .25s ease, filter .25s ease;
}
.t8-card:hover .t8-card-img img { transform: scale(1.04); filter: brightness(1.12) saturate(1.15); }
.t8-card-nothumb {
    display: flex; align-items: center; justify-content: center; height: 100%;
    font-family: var(--t8-pixel); color: var(--t8-line); font-size: .9rem;
}
.t8-card-title {
    display: block; padding: .5rem .6rem .15rem;
    font-family: var(--t8-mono); font-size: 1.15rem; line-height: 1.15;
    color: var(--t8-ink);
}
.t8-card-meta {
    display: flex; gap: .5rem; padding: 0 .6rem .55rem;
    font-family: var(--t8-mono); font-size: .92rem; letter-spacing: .08em;
    color: var(--t8-dim); text-transform: uppercase;
}
.t8-card-meta span:first-child { color: var(--t8-sys); }

/* ==================== BREADCRUMB ==================== */
.t8-breadcrumb { padding: .85rem 1rem .6rem; }
.t8-breadcrumb nav, .t8-breadcrumb {
    font-family: var(--t8-mono); font-size: 1.05rem; letter-spacing: .12em;
    color: var(--t8-line);
}
.t8-breadcrumb .path-link { color: var(--t8-dim); text-decoration: none; }
.t8-breadcrumb .path-link:hover { color: var(--t8-sys); }
.t8-breadcrumb .active-node { color: var(--t8-coin); }

/* ==================== SHELL / PRELAUNCH ==================== */
.t8-game-shell {
    position: relative; background: #000;
    border-top: 1px solid var(--t8-line); border-bottom: 1px solid var(--t8-line);
    box-shadow: inset 0 0 80px rgba(0,0,0,.55);
}
.t8-game-prelaunch {
    position: relative; min-height: 340px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.t8-prelaunch-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .22; filter: blur(3px); image-rendering: pixelated;
}
.t8-prelaunch-placeholder {
    background: repeating-linear-gradient(0deg, #111 0 2px, #0a0a0a 2px 4px);
    display: flex; align-items: center; justify-content: center;
    color: #333; font-family: var(--t8-mono);
}
.t8-prelaunch-overlay { position: relative; text-align: center; padding: 2rem 1rem 3.5rem; max-width: 640px; }
.t8-prelaunch-meta { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.t8-badge {
    font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase;
    padding: .2rem .65rem; border: 1px solid var(--t8-line);
    background: rgba(0,0,0,.55); text-decoration: none; display: inline-block;
}
.t8-badge-sys { color: var(--t8-sys); border-color: var(--t8-sys); }
.t8-badge-year, .t8-badge-genre { color: var(--t8-dim); }
.t8-prelaunch-title {
    font-family: var(--t8-pixel); font-size: clamp(1.05rem, 4.5vw, 1.7rem);
    line-height: 1.5; margin: 0 0 1.5rem; color: #fff;
    text-shadow: 2px 0 0 rgba(255,59,48,.5), -2px 0 0 rgba(0,184,204,.45);
}
.t8-btn-retro {
    font-family: var(--t8-pixel); font-size: .85rem; letter-spacing: .06em;
    padding: 1rem 2.2rem;
    background: var(--t8-sys); color: #111;
    border: 0; cursor: pointer;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--t8-sys) 45%, #000);
    transition: transform .06s ease, box-shadow .06s ease;
}
.t8-btn-retro:hover { filter: brightness(1.1); }
.t8-btn-retro:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--t8-sys) 45%, #000);
}
.t8-launch-hint { margin-top: 1rem; font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .1em; color: var(--t8-dim); }
.t8-broken-notice { background: rgba(255,59,48,.12); border: 1px solid var(--t8-red); padding: 1rem; font-size: .9rem; }
.t8-shell-statusbar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; padding: .4rem .8rem;
    font-family: var(--t8-mono); font-size: .95rem; letter-spacing: .14em;
    color: var(--t8-dim); background: rgba(0,0,0,.55); text-transform: uppercase;
}
.status-blink { color: #4ade80; animation: t8blink 1.4s steps(2) infinite; }
@keyframes t8blink { 50% { opacity: .2; } }

/* Canvas */
.t8-game-canvas-wrap { width: 100%; background: #000; }
.t8-ejs-canvas { width: 100%; aspect-ratio: 4/3; max-height: 78vh; }
.t8-load-progress {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .9rem;
    background: rgba(0,0,0,.72); z-index: 5;
}
.t8-progress-bar { width: min(80%, 380px); height: 12px; background: var(--t8-line); }
.t8-progress-fill { height: 100%; width: 12%; background: var(--t8-sys); animation: t8load 1.6s ease-in-out infinite alternate; }
@keyframes t8load { to { width: 88%; } }
.t8-progress-text { font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .16em; color: var(--t8-dim); text-transform: uppercase; }
.t8-canvas-controls { display: flex; gap: .5rem; justify-content: flex-end; padding: .5rem .8rem; background: var(--t8-panel); }
.t8-ctrl-btn {
    font-family: var(--t8-mono); font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
    padding: .45rem .8rem; background: var(--t8-line); color: var(--t8-ink); border: 0; cursor: pointer;
}
.t8-ctrl-btn:hover { background: var(--t8-sys); color: #111; }
.t8-pseudo-fs { position: fixed !important; inset: 0; z-index: 99999; }
.t8-pseudo-fs .t8-ejs-canvas { height: 100%; max-height: none; }

/* Toast */
.t8-toast {
    position: fixed; left: 50%; bottom: 1.2rem;
    transform: translateX(-50%) translateY(200%);
    background: var(--t8-coin); color: #111;
    font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .1em;
    padding: .7rem 1.3rem; z-index: 9999; transition: transform .25s;
}
.t8-toast.visible { transform: translateX(-50%) translateY(0); }

/* ==================== FICHA ==================== */
.t8-fiche-grid { padding-bottom: 1rem; }
.t8-fiche-main { padding: 1.2rem 0; }
.t8-fiche-main h1 {
    font-family: var(--t8-pixel); font-size: clamp(1.1rem, 4vw, 1.6rem);
    line-height: 1.55; margin: .4rem 0 1rem;
}
.t8-game-description { font-size: .95rem; line-height: 1.75; color: var(--t8-ink); max-width: 75ch; }
.t8-game-description p:first-child::first-letter {
    font-family: var(--t8-pixel); font-size: 1.5em; color: var(--t8-sys);
}
.t8-game-controls { margin: 2.2rem 0; }
.t8-game-controls h2, .t8-related h2 {
    font-family: var(--t8-pixel); font-size: .8rem; margin: 0 0 1rem;
    color: var(--t8-ink);
}
.t8-controls-table { width: 100%; max-width: 480px; border-collapse: collapse; font-size: .9rem; }
.t8-controls-table th {
    text-align: left; padding: .45rem .8rem .45rem 0;
    color: var(--t8-dim); font-weight: 500;
    font-family: var(--t8-mono); letter-spacing: .1em; text-transform: uppercase;
}
.t8-controls-table td { padding: .45rem 0; }
.t8-controls-table tr { border-bottom: 1px solid var(--t8-line); }
.t8-controls-table kbd {
    font-family: var(--t8-mono); font-size: .95rem;
    background: var(--t8-panel); border: 1px solid var(--t8-line);
    border-bottom-width: 3px; padding: .15rem .5rem;
}
.t8-controls-note { font-family: var(--t8-mono); font-size: 1rem; color: var(--t8-dim); margin-top: .9rem; }
.t8-related { margin: 2.2rem 0; }
.t8-viewall {
    display: inline-block; margin-top: 1rem;
    font-family: var(--t8-mono); font-size: 1.05rem; letter-spacing: .12em;
    color: var(--t8-sys); text-decoration: none; text-transform: uppercase;
}
.t8-viewall:hover { color: #fff; }

/* ==================== PILLAR / PAGE ==================== */
.t8-pillar h1 {
    font-family: var(--t8-pixel); font-size: clamp(1.1rem, 4.5vw, 1.7rem);
    line-height: 1.6; color: var(--t8-sys); margin: .4rem 0 1.2rem;
}
.t8-pillar-intro { color: var(--t8-dim); line-height: 1.75; max-width: 75ch; margin-bottom: 1.8rem; }
.t8-page { padding: 2rem 1rem; }
.t8-page h1 { font-family: var(--t8-pixel); font-size: clamp(1.05rem, 4vw, 1.5rem); line-height: 1.6; }
.t8-page-content { line-height: 1.75; color: var(--t8-ink); max-width: 75ch; }
.t8-page-content h2, .t8-page-content h3 { font-family: var(--t8-mono); letter-spacing: .06em; color: var(--t8-coin); }
.t8-page-content a { color: var(--t8-coin); }

/* ==================== PAGINATION / SEARCH / 404 ==================== */
.pagination { margin: 1.8rem 0; font-family: var(--t8-mono); font-size: 1.1rem; letter-spacing: .1em; }
.pagination a, .pagination span {
    padding: .35rem .75rem; border: 1px solid var(--t8-line);
    text-decoration: none; margin-right: .3rem; text-transform: uppercase;
}
.pagination a:hover { border-color: var(--t8-sys); color: var(--t8-sys); }
.pagination .current { background: var(--t8-sys); border-color: var(--t8-sys); color: #111; }

.t8-search-form { display: flex; gap: .5rem; margin: 1.5rem 0; }
.t8-search-form input {
    flex: 1; max-width: 420px; background: var(--t8-panel); color: var(--t8-ink);
    border: 1px solid var(--t8-line); padding: .6rem .8rem; font-family: var(--t8-mono); font-size: 1.05rem;
}
.t8-search-form input:focus { outline: none; border-color: var(--t8-sys); }

/* ==================== FOOTER ==================== */
.site-footer { background: var(--t8-panel2); border-top: 1px solid var(--t8-line); }
.site-footer::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg,
        #ffb400 0 14.3%, #ff8c1a 14.3% 28.6%, #00b8cc 28.6% 42.9%,
        #4f7cff 42.9% 57.2%, #e08a3c 57.2% 71.5%, #8bac0f 71.5% 85.8%, #ff3b30 85.8%);
}
.site-info, .copyright-bar {
    font-family: var(--t8-mono); font-size: 1rem; letter-spacing: .14em;
    color: var(--t8-dim); text-transform: uppercase;
    background: var(--t8-bg-deep);
}
.site-info a { color: var(--t8-coin); text-decoration: none; }
.t8-footer-legal { display: block; padding: .9rem 1rem 0; }
.t8-footer-legal ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center;
}
.t8-footer-legal a {
    font-family: var(--t8-mono); font-size: .95rem; letter-spacing: .14em;
    color: var(--t8-dim); text-decoration: none; text-transform: uppercase;
}
.t8-footer-legal a:hover { color: var(--t8-coin); }

/* Ads wrappers */
.t8-ad-wrapper { display: flex; justify-content: center; margin: 1rem auto; min-height: 0; }

/* ---------------------------------------------------------------
   PIXEL EXTRAS — esquinas stepped, rank badges, power bar, share
   --------------------------------------------------------------- */

/* Esquina 8-bit: dos escalones de 3px por vértice */
:root {
    --t8-pxcut: polygon(
        6px 0, calc(100% - 6px) 0,
        calc(100% - 6px) 3px, calc(100% - 3px) 3px,
        calc(100% - 3px) 6px, 100% 6px,
        100% calc(100% - 6px),
        calc(100% - 3px) calc(100% - 6px),
        calc(100% - 3px) calc(100% - 3px),
        calc(100% - 6px) calc(100% - 3px),
        calc(100% - 6px) 100%, 6px 100%,
        6px calc(100% - 3px), 3px calc(100% - 3px),
        3px calc(100% - 6px), 0 calc(100% - 6px),
        0 6px, 3px 6px, 3px 3px, 6px 3px
    );
}
.t8-chip, .t8-share-btn, .t8-controls-table { clip-path: var(--t8-pxcut); }
.t8-card-img { position: relative; }

/* Rank badge (#1, #2…) sobre el boxart */
.t8-rank {
    position: absolute; top: 0; left: 0; z-index: 2;
    font-family: var(--t8-pixel); font-size: .62rem;
    color: #0b0d12; background: var(--t8-sys, var(--t8-coin));
    padding: .35rem .45rem .3rem;
    clip-path: var(--t8-pxcut);
    text-shadow: none;
}

/* Power bar del hero (segmentos) */
.t8-stat-power { justify-content: flex-start; }
.t8-power {
    display: block; width: 84px; height: 18px; margin-top: 2px;
    border: 2px solid var(--t8-line); padding: 2px; background: var(--t8-panel2);
}
.t8-power i {
    display: block; height: 100%; width: 100%;
    background: repeating-linear-gradient(90deg,
        var(--t8-coin) 0 8px, transparent 8px 11px);
    animation: t8power 1.6s steps(8) both;
}
@keyframes t8power { from { width: 0; } to { width: 100%; } }

/* Divisor pixel entre hubs */
.t8-hub { position: relative; padding-bottom: 2.6rem; }
.t8-hub::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: .6rem;
    height: 4px; opacity: .5;
    background: repeating-linear-gradient(90deg,
        var(--t8-sys, var(--t8-line)) 0 10px, transparent 10px 22px);
}
.t8-hub:last-child::after { display: none; }

/* Share bar */
.t8-share {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin: 1.6rem 0 .4rem; padding: .8rem 0 0;
    border-top: 2px solid var(--t8-line);
}
.t8-share-label {
    font-family: var(--t8-pixel); font-size: .6rem;
    color: var(--t8-dim); letter-spacing: .1em; margin-right: .3rem;
}
.t8-share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 .65rem;
    font-family: var(--t8-pixel); font-size: .58rem; text-decoration: none;
    color: var(--t8-dim); background: var(--t8-panel);
    border: none; border-bottom: 4px solid var(--t8-line);
    cursor: pointer; transition: transform .06s ease, filter .12s ease, color .12s ease;
}
.t8-share-btn:hover { color: #fff; transform: translateY(-2px); }
.t8-share-btn:active { transform: translateY(1px); }
.t8-share-btn[data-net="fb"]:hover { border-bottom-color: #1877f2; }
.t8-share-btn[data-net="x"]:hover { border-bottom-color: #e7e9ea; }
.t8-share-btn[data-net="wa"]:hover { border-bottom-color: #25d366; }
.t8-share-btn[data-net="tg"]:hover { border-bottom-color: #229ed9; }
.t8-share-btn[data-net="rd"]:hover { border-bottom-color: #ff4500; }
.t8-share-btn[data-net="copy"]:hover, .t8-share-native:hover { border-bottom-color: var(--t8-sys, var(--t8-coin)); }

/* Tap targets / latencia táctil */
a, button, .t8-chip, .t8-card { touch-action: manipulation; }

/* Mobile tweaks */
@media (max-width: 640px) {
    .t8-hero h1 { line-height: 1.75; }
    .t8-card-title { font-size: 1.05rem; }
    .site-header::after { height: 2px; }
    .t8-chip { min-height: 42px; display: inline-flex; align-items: center; }
    .t8-share-btn { min-width: 46px; height: 46px; }
    .t8-power { width: 72px; }
}