/* ================================================================
   JJPI-01 — Theme
   Mesmo design system do JJVP-PRO, paleta ciano/azul
   ================================================================ */

:root {
    --jjpi-bg:       #05090b;
    --jjpi-surface:  #0b171a;
    --jjpi-border:   rgba(0, 216, 255, 0.2);
    --jjpi-accent:   #00D8FF;
    --jjpi-accent2:  #2F6FED;
    --jjpi-text:     #dff9ff;
    --jjpi-muted:    rgba(223, 249, 255, 0.5);
    --navbar-size:   106px;
}

/* ── Base overrides ───────────────────────────────────────────── */

body {
    background-color: var(--jjpi-bg);
    color: var(--jjpi-text);
}

a {
    color: var(--jjpi-accent);
}

a:hover {
    color: #fff;
}

/* ── Navbar ───────────────────────────────────────────────────── */

.navbar {
    border-bottom: 1px solid var(--jjpi-border);
    background: rgba(5, 9, 11, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.navbar-nav .nav-link {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 1.25rem !important;
    color: var(--jjpi-muted) !important;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #fff !important;
}

/* ── Entrance ─────────────────────────────────────────────────── */

.entrance {
    overflow: hidden;
}

/* Replace tileable pattern with animated gradient */
.entrance::before {
    background:
        linear-gradient(135deg,
            rgba(0, 216, 255, 0.18) 0%,
            rgba(47, 111, 237, 0.08) 50%,
            rgba(5, 9, 11, 0) 100%),
        radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0, 216, 255, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 60%, rgba(47, 111, 237, 0.1) 0%, transparent 70%),
        var(--jjpi-bg);
    animation: jjpi-entrance-shift 12s ease-in-out infinite alternate;
}

@keyframes jjpi-entrance-shift {
    0%   { opacity: 1; filter: hue-rotate(0deg); }
    100% { opacity: 0.85; filter: hue-rotate(-15deg); }
}

/* Entrance: media left, text right (desktop) — text top, media bottom (mobile) */
.entrance .row > div.col-lg-6:first-child { /* text col */
    order: 1; /* top on mobile */
}
.entrance .row > div.col-lg-6:last-child { /* media col */
    order: 2; /* bottom on mobile */
}

@media (min-width: 992px) {
    .entrance .row > div.col-lg-6:first-child { /* text col → right */
        order: 2;
    }
    .entrance .row > div.col-lg-6:last-child { /* media col → left */
        order: 1;
    }
}

/* ── Seções agrupadas: Modos Inclusos + Recursos PRO ──────────── */

#modos {
    background: var(--jjpi-surface);
    border-top: 1px solid var(--jjpi-border);
}

#pro {
    background: var(--jjpi-surface);
    border-bottom: 1px solid var(--jjpi-border);
}

/* ── Section02 cards — tema ciano ─────────────────────────────── */

.s02-card {
    border-color: var(--jjpi-border);
    background: rgba(0, 216, 255, 0.04);
}

.s02-card:hover {
    border-color: rgba(0, 216, 255, 0.45);
    background: rgba(0, 216, 255, 0.1);
}

.s02-card-icon {
    color: var(--jjpi-accent);
}

/* Placeholder border accent */
.entrance-media-placeholder {
    border-color: var(--jjpi-border);
    background: rgba(0, 216, 255, 0.04);
    color: var(--jjpi-muted);
}

/* Titles */
.entrance-title {
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, #fff 30%, var(--jjpi-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.entrance-text {
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    color: var(--jjpi-muted);
    line-height: 1.6;
}

/* ── Entrance eyebrow ─────────────────────────────────────────── */

.entrance-eyebrow {
    font-size: clamp(0.85rem, 2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff 30%, var(--jjpi-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    margin-bottom: 0.15rem;
}

/* ── Entrance CTA button ──────────────────────────────────────── */

.entrance-cta {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    background: var(--jjpi-accent);
    color: #fff !important;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-shadow: none;
    -webkit-text-fill-color: #fff;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-shadow: 0 0 24px rgba(0, 216, 255, 0.35);
    animation: jjpi-cta-pulse 2.5s ease-in-out infinite;
}

.entrance-cta:hover {
    background: #5BE7FF;
    box-shadow: 0 0 40px rgba(0, 216, 255, 0.7);
    transform: translateY(-1px);
    color: #fff !important;
    animation: none;
}

@keyframes jjpi-cta-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 216, 255, 0.3); }
    50%       { box-shadow: 0 0 42px rgba(0, 216, 255, 0.65); }
}

/* ── Badges (trilhos / conectividade / grátis+pro) ────────────── */

.jjpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 1.5rem;
    margin-right: 0.5rem;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--jjpi-accent);
    color: var(--jjpi-accent);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 216, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 216, 255, 0.15);
}

/* SVG inside badge: override inline style, keep flex centering */
.jjpi-badge svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
    margin-right: 0 !important;
    vertical-align: unset !important;
}

/* ── CTA Banner — tema ciano ───────────────────────────────────── */

.cta-banner {
    background: linear-gradient(135deg,
        rgba(0, 216, 255, 0.1) 0%,
        rgba(47, 111, 237, 0.05) 100%);
    border-top: 1px solid var(--jjpi-border);
    border-bottom: 1px solid var(--jjpi-border);
}

.cta-banner-hero {
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 216, 255, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 80% 70%, rgba(47, 111, 237, 0.08) 0%, transparent 60%),
        var(--jjpi-bg);
    border-top: 1px solid var(--jjpi-border);
    border-bottom: 1px solid var(--jjpi-border);
}

.cta-hero-title {
    color: #fff;
}

.cta-hero-btn {
    background: var(--jjpi-accent);
    color: #fff;
    box-shadow: 0 0 32px rgba(0, 216, 255, 0.4);
}

.cta-hero-btn:hover {
    background: #5BE7FF;
    color: #fff;
    box-shadow: 0 0 52px rgba(0, 216, 255, 0.65);
    opacity: 1;
}

.cta-banner-btn {
    background: var(--jjpi-accent);
    color: #fff;
    box-shadow: 0 0 24px rgba(0, 216, 255, 0.35);
}

.cta-banner-btn:hover {
    color: #fff;
    box-shadow: 0 0 40px rgba(0, 216, 255, 0.6);
    opacity: 1;
    background: #5BE7FF;
}

/* ── Downloads hero — tema ciano ───────────────────────────────── */

.dl-hero {
    background: linear-gradient(135deg,
        rgba(0, 216, 255, 0.1) 0%,
        rgba(47, 111, 237, 0.05) 100%);
    border: 1px solid var(--jjpi-border);
    box-shadow: 0 0 80px rgba(0, 216, 255, 0.08);
}

.dl-hero-version-badge {
    border-color: var(--jjpi-border);
    color: var(--jjpi-accent);
    opacity: 1 !important;
}

.dl-btn-primary {
    background: var(--jjpi-accent);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 216, 255, 0.3);
}

.dl-btn-primary:hover {
    background: #5BE7FF;
    color: #fff;
    box-shadow: 0 0 32px rgba(0, 216, 255, 0.55);
}

.dl-btn-secondary {
    border-color: var(--jjpi-border);
    color: var(--jjpi-accent);
}

.dl-btn-secondary:hover {
    background: rgba(0, 216, 255, 0.1);
    color: #fff;
}

/* JJManager logo — mesmo "selo" branco circular do JJVP-PRO */
#compativel img {
    background-color: #fff;
    border-radius: 50%;
    padding: 1.5rem;
    box-shadow: 0 0 40px rgba(0, 216, 255, 0.15);
}

/* ── Section01 content alignment ─────────────────────────────── */

/* Fix: span#entrance-text wraps block <p> elements — force block context */
#entrance-text {
    display: block;
}

/* Ensure title, description stay left-aligned in section01 */
#o-que-e #entrance-title,
#o-que-e #entrance-text {
    text-align: left;
}

/* ── Section01 image circles ──────────────────────────────────── */

img[style*="border-radius:50%"],
img[style*="border-radius: 50%"] {
    background-color: var(--jjpi-surface) !important;
    border: 1px solid var(--jjpi-border);
    box-shadow: 0 0 40px rgba(0, 216, 255, 0.1);
}

/* ── Headings ─────────────────────────────────────────────────── */

h1.title,
h1#entrance-title {
    color: #fff;
}

.title {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Section titles accent underline */
h1.title::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0.75rem auto 0;
    background: linear-gradient(90deg, var(--jjpi-accent), var(--jjpi-accent2));
    border-radius: 2px;
}

h1#entrance-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    color: #fff;
    -webkit-text-fill-color: unset;
    background: none;
    text-shadow: none;
}

/* ── CTA Button (Section01 link) ──────────────────────────────── */

.btn-primary {
    background: var(--jjpi-accent);
    border-color: var(--jjpi-accent);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #5BE7FF;
    border-color: #5BE7FF;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 216, 255, 0.4);
}

/* ── Footer ───────────────────────────────────────────────────── */

footer {
    border-top: 1px solid var(--jjpi-border);
    background: var(--jjpi-surface);
}

/* ── Scrollbar ────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--jjpi-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--jjpi-accent);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #5BE7FF;
}

/* ── Language Switcher ────────────────────────────────────────── */

.lang-switcher {
    position: fixed;
    top: 0;
    right: 1.5rem;
    height: var(--navbar-size);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    z-index: 1031;
}

.lang-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    border: 1px solid transparent;
    color: var(--jjpi-muted);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-transform: uppercase;
    text-shadow: none;
}

.lang-btn:hover {
    color: #fff;
    background: rgba(0, 216, 255, 0.12);
    border-color: var(--jjpi-border);
}

.lang-btn.active {
    color: var(--jjpi-accent);
    border-color: var(--jjpi-accent);
    background: rgba(0, 216, 255, 0.1);
}

/* ── Responsive ───────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    /* Bootstrap's .container has fixed max-width per breakpoint and centers
       itself with auto margins, so the toggler's distance from the viewport
       edge jumps around at each breakpoint. Force the navbar container edge
       to edge here so that distance becomes constant and the lang-switcher
       can reserve a fixed, always-safe gap next to the toggler. */
    .navbar > .container {
        max-width: 100%;
    }

    .lang-switcher {
        right: 76px; /* clears the toggler (~56px) + its container padding */
        gap: 0.2rem;
    }
    .lang-btn {
        padding: 0.15rem 0.4rem;
        font-size: 0.65rem;
    }
}

@media (max-width: 991.98px) {
    .entrance .row > div.col-lg-6:first-child {
        padding: 0 1.5rem;
        text-align: center !important;
    }

    .entrance-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }
}