/*
 * Quiz de hosting (Juankerman → Quiz). Copia literal del CSS de la plantilla del tema
 * template-quiz-hosting.php para que la página se vea igual. Clases propias: jk-*, quiz-*, result-*, seo-*.
 */
html,
    body,
    #page,
    #content,
    .site-content,
    .ast-container,
    .entry-content,
    .content-area,
    .site-main {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #0b0f19 !important;
        color: #d1d5db !important;
        box-sizing: border-box !important;
    }

    .ast-container,
    .entry-content,
    .site-main {
        display: block !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        text-size-adjust: 100%;
    }

    body {
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
        line-height: 1.5;
        overflow-x: hidden;
    }

    img,
    svg {
        max-width: 100%;
        height: auto;
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    button {
        font: inherit;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    :root {
        --bg: #0b0f19;
        --bg-soft: #101624;
        --card: #151a28;
        --card-2: #111827;
        --border: #263047;
        --border-strong: #374151;
        --text: #d1d5db;
        --muted: #9ca3af;
        --white: #ffffff;
        --cyan: #22d3ee;
        --purple: #a855f7;
        --orange: #f97316;
        --red: #ef4444;
        --green: #22c55e;
        --yellow: #eab308;
        --shadow: 0 24px 80px rgba(0, 0, 0, .45);
        --radius-xl: 28px;
        --radius-lg: 20px;
        --radius-md: 14px;
    }

    .jk-page {
        min-height: 100vh;
        color: var(--text);
        background:
            radial-gradient(circle at 18% 8%, rgba(168, 85, 247, .20), transparent 32rem),
            radial-gradient(circle at 82% 22%, rgba(34, 211, 238, .16), transparent 30rem),
            radial-gradient(circle at 50% 100%, rgba(249, 115, 22, .13), transparent 34rem),
            linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
            var(--bg);
        background-size: auto, auto, auto, 42px 42px, 42px 42px, auto;
    }

    .jk-shell {
        width: min(1160px, calc(100% - 32px));
        margin: 0 auto;
    }

    .jk-topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid rgba(38, 48, 71, .82);
        background: rgba(11, 15, 25, .82);
        backdrop-filter: blur(14px);
    }

    .jk-topbar-inner {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .jk-brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-weight: 900;
        letter-spacing: -.03em;
        color: var(--white);
    }

    .jk-brand-mark {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--red), var(--orange));
        box-shadow: 0 0 32px rgba(249, 115, 22, .34);
    }

    .jk-brand small {
        display: block;
        margin-top: 1px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .jk-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 12px 18px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-weight: 850;
        line-height: 1;
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }

    .jk-btn:hover,
    .jk-btn:focus-visible {
        transform: translateY(-2px);
    }

    .jk-btn:focus-visible,
    .quiz-option:focus-visible {
        outline: 3px solid rgba(34, 211, 238, .55);
        outline-offset: 3px;
    }

    .jk-btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--red), var(--orange));
        box-shadow: 0 14px 36px rgba(249, 115, 22, .24);
        animation: jkPulse 2.6s ease-in-out infinite;
    }

    .jk-btn-primary:hover {
        box-shadow: 0 18px 44px rgba(249, 115, 22, .36);
    }

    .jk-btn-secondary {
        color: var(--white);
        border-color: rgba(168, 85, 247, .55);
        background: rgba(168, 85, 247, .10);
    }

    .jk-btn-secondary:hover {
        border-color: rgba(168, 85, 247, .9);
        box-shadow: 0 16px 36px rgba(168, 85, 247, .18);
    }

    .jk-btn-youtube {
        color: #fff;
        background: linear-gradient(135deg, #ff0033, #991b1b);
        box-shadow: 0 16px 42px rgba(239, 68, 68, .24);
    }

    @keyframes jkPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(249, 115, 22, .34), 0 14px 36px rgba(249, 115, 22, .24);
        }

        50% {
            box-shadow: 0 0 0 10px rgba(249, 115, 22, 0), 0 18px 48px rgba(249, 115, 22, .34);
        }
    }

    .jk-hero {
        padding: 72px 0 34px;
        text-align: center;
    }

    .jk-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
        padding: 8px 13px;
        border: 1px solid rgba(34, 211, 238, .28);
        border-radius: 999px;
        background: rgba(34, 211, 238, .08);
        color: #a5f3fc;
        font-size: 14px;
        font-weight: 800;
    }

    .jk-title {
        max-width: 920px;
        margin: 0 auto;
        color: var(--white);
        font-size: clamp(38px, 7vw, 78px);
        line-height: .94;
        letter-spacing: -.07em;
        font-weight: 950;
    }

    .jk-gradient-text {
        background: linear-gradient(135deg, #fff, #22d3ee 32%, #a855f7 68%, #f97316);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .jk-hero-text {
        max-width: 760px;
        margin: 22px auto 0;
        color: var(--muted);
        font-size: clamp(16px, 2.2vw, 20px);
    }

    .jk-hero-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        max-width: 840px;
        margin: 30px auto 0;
    }

    .jk-mini-card {
        padding: 16px;
        border: 1px solid rgba(38, 48, 71, .92);
        border-radius: var(--radius-md);
        background: rgba(21, 26, 40, .72);
        box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
    }

    .jk-mini-card strong {
        display: block;
        color: var(--white);
        font-size: 15px;
    }

    .jk-mini-card span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 13px;
    }

    .quiz-container {
        margin: 26px auto 72px;
        padding: clamp(20px, 4vw, 42px);
        border: 1px solid rgba(38, 48, 71, .96);
        border-radius: var(--radius-xl);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)),
            rgba(15, 20, 33, .92);
        box-shadow: var(--shadow);
    }

    .quiz-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 22px;
    }

    .quiz-step-label {
        color: var(--muted);
        font-size: 14px;
        font-weight: 800;
    }

    .progress {
        position: relative;
        width: min(360px, 48%);
        height: 10px;
        overflow: hidden;
        border-radius: 999px;
        background: #1f2937;
        border: 1px solid rgba(55, 65, 81, .85);
    }

    .progress-bar {
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--cyan), var(--purple), var(--orange));
        transition: width .28s ease;
    }

    .quiz-step {
        animation: jkFade .24s ease both;
    }

    .hidden {
        display: none !important;
    }

    @keyframes jkFade {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .quiz-heading {
        margin: 0 0 8px;
        color: var(--white);
        font-size: clamp(25px, 4vw, 38px);
        line-height: 1.08;
        letter-spacing: -.045em;
        font-weight: 930;
        text-align: center;
    }

    .quiz-subtitle {
        max-width: 680px;
        margin: 0 auto 28px;
        color: var(--muted);
        text-align: center;
    }

    .grid {
        display: grid;
        gap: 14px;
    }

    .grid-games {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid-players {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .grid-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quiz-option {
        min-height: 116px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 18px 14px;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, .055), transparent 55%),
            rgba(21, 26, 40, .86);
        color: var(--text);
        text-align: center;
        cursor: pointer;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
        transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .quiz-option:hover {
        transform: translateY(-3px);
        border-color: rgba(34, 211, 238, .62);
        box-shadow: 0 18px 44px rgba(34, 211, 238, .10);
    }

    .quiz-option.selected {
        border-color: rgba(34, 211, 238, .88);
        background:
            radial-gradient(circle at top, rgba(34, 211, 238, .18), transparent 58%),
            rgba(21, 26, 40, .94);
    }

    .game-badge {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, .08);
        color: #fff;
        font-weight: 950;
        font-size: 15px;
        letter-spacing: -.04em;
        background: linear-gradient(135deg, #1f2937, #111827);
    }

    .badge-purple {
        background: linear-gradient(135deg, #4c1d95, #a855f7);
    }

    .badge-green {
        background: linear-gradient(135deg, #14532d, #22c55e);
    }

    .badge-yellow {
        background: linear-gradient(135deg, #713f12, #eab308);
    }

    .badge-cyan {
        background: linear-gradient(135deg, #164e63, #22d3ee);
    }

    .badge-gray {
        background: linear-gradient(135deg, #374151, #111827);
    }

    .badge-orange {
        background: linear-gradient(135deg, #7c2d12, #f97316);
    }

    .badge-red {
        background: linear-gradient(135deg, #7f1d1d, #ef4444);
    }

    .badge-blue {
        background: linear-gradient(135deg, #1e3a8a, #38bdf8);
    }

    .quiz-option strong {
        color: var(--white);
        font-size: 16px;
    }

    .quiz-option p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

    .quiz-option .big {
        color: var(--white);
        font-size: 32px;
        line-height: 1;
        font-weight: 950;
        letter-spacing: -.04em;
    }

    .other-games {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid rgba(38, 48, 71, .88);
    }

    .other-games-title {
        margin: 0 0 14px;
        color: var(--white);
        text-align: center;
        font-size: 16px;
        font-weight: 850;
    }

    .dynamic-link-area {
        margin: 0 0 22px;
    }

    .comparison-link {
        display: block;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid rgba(34, 211, 238, .32);
        background: linear-gradient(135deg, rgba(34, 211, 238, .10), rgba(168, 85, 247, .10));
        color: var(--white);
        text-align: center;
        font-weight: 900;
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .comparison-link:hover {
        transform: translateY(-2px);
        border-color: rgba(34, 211, 238, .75);
        box-shadow: 0 18px 44px rgba(34, 211, 238, .12);
    }

    .results {
        text-align: center;
    }

    .results-title {
        margin: 0 0 10px;
        color: var(--white);
        font-size: clamp(28px, 5vw, 46px);
        line-height: 1;
        letter-spacing: -.055em;
        font-weight: 950;
    }

    .results-copy {
        max-width: 720px;
        margin: 0 auto 28px;
        color: var(--muted);
    }

    .result-card {
        min-height: 292px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px;
        border: 1px solid rgba(38, 48, 71, .96);
        border-radius: var(--radius-lg);
        background:
            radial-gradient(circle at top, rgba(168, 85, 247, .10), transparent 55%),
            var(--card);
        box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .result-card:hover {
        transform: translateY(-4px);
        border-color: rgba(168, 85, 247, .65);
        box-shadow: 0 26px 58px rgba(168, 85, 247, .14);
    }

    .result-card.featured {
        border-color: rgba(34, 211, 238, .66);
        box-shadow: 0 26px 68px rgba(34, 211, 238, .13);
    }

    .result-rank {
        color: #c4b5fd;
        font-size: 13px;
        font-weight: 950;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .result-card h3 {
        margin: 10px 0 8px;
        color: var(--white);
        font-size: 24px;
        line-height: 1.08;
        letter-spacing: -.035em;
        font-weight: 920;
    }

    .result-card p {
        margin: 0 0 18px;
        color: var(--muted);
        font-size: 15px;
    }

    .result-card .jk-btn {
        margin-top: auto;
        width: 100%;
    }

    .video-links {
        width: 100%;
        display: grid;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(55, 65, 81, .75);
    }

    .video-links a {
        color: #c4b5fd;
        font-size: 14px;
        font-weight: 750;
    }

    .video-links a:hover {
        color: #fff;
        text-decoration: underline;
    }

    .results-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        margin-top: 28px;
    }

    .results-actions-row {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        width: 100%;
    }

    .seo-block {
        padding: 0 0 72px;
    }

    .seo-card {
        padding: clamp(22px, 4vw, 36px);
        border: 1px solid rgba(38, 48, 71, .92);
        border-radius: var(--radius-xl);
        background: rgba(15, 20, 33, .70);
        box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    }

    .seo-card h2 {
        margin: 0 0 12px;
        color: var(--white);
        font-size: clamp(25px, 4vw, 38px);
        line-height: 1.08;
        letter-spacing: -.05em;
        font-weight: 930;
    }

    .seo-card p {
        margin: 0 0 16px;
        color: var(--muted);
    }

    .seo-columns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-top: 22px;
    }

    .seo-item {
        padding: 18px;
        border: 1px solid rgba(38, 48, 71, .92);
        border-radius: var(--radius-md);
        background: rgba(21, 26, 40, .72);
    }

    .seo-item strong {
        display: block;
        color: var(--white);
        margin-bottom: 6px;
    }

    .seo-item span {
        color: var(--muted);
        font-size: 14px;
    }

    .faq {
        display: grid;
        gap: 10px;
        margin-top: 22px;
    }

    details {
        border: 1px solid rgba(38, 48, 71, .92);
        border-radius: 16px;
        background: rgba(21, 26, 40, .72);
    }

    summary {
        padding: 16px 18px;
        cursor: pointer;
        color: var(--white);
        font-weight: 850;
    }

    details p {
        padding: 0 18px 18px;
    }

    @media (max-width: 900px) {
        .grid-games,
        .grid-players,
        .grid-three,
        .grid-results,
        .seo-columns {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .jk-hero-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 640px) {
        .jk-shell {
            width: min(100% - 22px, 1160px);
        }

        .jk-topbar-inner {
            min-height: 66px;
        }

        .jk-brand small {
            display: none;
        }

        .jk-brand-mark {
            width: 36px;
            height: 36px;
        }

        .jk-btn {
            min-height: 44px;
            padding: 11px 14px;
            font-size: 14px;
        }

        .jk-hero {
            padding: 44px 0 18px;
        }

        .quiz-container {
            margin-bottom: 46px;
            border-radius: 22px;
        }

        .quiz-top {
            align-items: flex-start;
            flex-direction: column;
        }

        .progress {
            width: 100%;
        }

        .grid-games,
        .grid-players,
        .grid-three,
        .grid-results,
        .seo-columns {
            grid-template-columns: 1fr;
        }

        .quiz-option {
            min-height: 92px;
        }

        .game-badge {
            width: 50px;
            height: 50px;
            border-radius: 15px;
        }

        .results-actions-row,
        .results-actions-row .jk-btn {
            width: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important;
        }
    }

/* ---- Extras opcionales del plugin (solo si se activan en Juankerman → Quiz) ---- */
.jkq-byline { margin: 10px auto 0; color: var(--muted); font-size: 14px; text-align: center; }
.jkq-disclosure { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.jkq-table-block { padding-bottom: 0; }
.jkq-table-wrap { overflow-x: auto; margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.jkq-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.jkq-table th, .jkq-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.jkq-table thead th { color: var(--white); background: var(--card-2); font-weight: 700; }
.jkq-table tbody th { color: var(--white); font-weight: 600; }
.jkq-table tbody tr:last-child th, .jkq-table tbody tr:last-child td { border-bottom: 0; }
.jkq-table a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* 0.14.0: preguntas configurables, zonas y consejo de ubicación */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.quiz-step[data-multi="1"] .quiz-option.selected { box-shadow: 0 0 0 2px rgba(34, 211, 238, .55), 0 18px 44px rgba(34, 211, 238, .10); }
.quiz-step[data-multi="1"] .quiz-option.selected::after { content: "✓"; position: absolute; top: 10px; right: 14px; color: var(--cyan); font-weight: 800; }
.quiz-step[data-multi="1"] .quiz-option { position: relative; }
.jkq-detected { margin: 14px 0 0; color: var(--muted); font-size: 14px; text-align: center; }
.jkq-next-row { margin: 22px 0 0; text-align: center; }
.jkq-next-row .jk-btn[disabled] { opacity: .45; cursor: not-allowed; }
.result-card .jkq-tip { margin: 4px 0 14px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .28); color: var(--white); font-size: 14px; line-height: 1.5; }
.result-card .jkq-note { margin: 4px 0 10px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(234, 179, 8, .08); border: 1px solid rgba(234, 179, 8, .3); color: #fde68a; font-size: 14px; line-height: 1.5; }
.result-card .jkq-far { margin: -6px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) { .grid-auto { grid-template-columns: 1fr; } }