/**
 * ================================================
 * Módulo: Descargas
 * Ruta: /descargas/assets/css/descargas.css
 * Archivo: descargas.css
 * Creado: 2026-09-13
 * Modificado: 2026-09-13
 * Autor: AdminX IPTV
 * Descripción: Estilos de la página pública de
 * descargas y acceso a Viva Player.
 * ================================================
 */

:root {
    --bg: #070b13;
    --bg-deep: #050810;
    --bg-soft: #0b111c;

    --surface: #0e1623;
    --surface-hover: #121d2d;
    --surface-strong: #172438;

    --text: #f3f6fb;
    --muted: #8d9bad;

    --accent: #3f8cff;
    --accent-hover: #63a2ff;
    --accent-soft: rgba(63, 140, 255, 0.12);

    --secondary: #7068d9;
    --cyan: #45b7d8;

    --border: rgba(151, 177, 211, 0.13);
    --border-strong: rgba(90, 151, 235, 0.28);

    --shadow:
        0 28px 80px rgba(0, 0, 0, 0.30);

    --shadow-blue:
        0 22px 65px rgba(32, 93, 180, 0.13);

    --radius: 24px;
    --radius-small: 16px;
    --max-width: 1180px;
}


/* ======================================================
   BASE
   ====================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 13% 5%,
            rgba(39, 103, 194, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 28%,
            rgba(91, 74, 177, 0.09),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #070b13 0%,
            #080d16 45%,
            #060a11 100%
        );

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

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

button {
    font: inherit;
}

.page-shell {
    width: min(
        calc(100% - 32px),
        var(--max-width)
    );

    margin: 0 auto;
}


/* ======================================================
   HEADER
   ====================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom:
        1px solid transparent;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        backdrop-filter 0.2s ease;
}

.site-header.is-scrolled {
    background:
        rgba(6, 10, 17, 0.86);

    border-bottom-color:
        var(--border);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header-inner {
    min-height: 74px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
}

.brand-logo {
    display: block;

    width: 58px;
    height: 58px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 16px
            rgba(50, 115, 210, 0.18)
        );
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}

.header-link {
    color: var(--muted);

    text-decoration: none;

    font-size: 0.92rem;
    font-weight: 700;

    transition:
        color 0.2s ease;
}

.header-link:hover {
    color: var(--text);
}

.theme-toggle {
    width: 42px;
    height: 42px;

    display: inline-grid;
    place-items: center;

    padding: 0;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--text);

    font-size: 1.05rem;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);

    background: var(--surface-hover);

    border-color:
        var(--border-strong);
}


/* ======================================================
   HERO
   ====================================================== */

.hero {
    position: relative;

    padding:
        92px 0
        64px;

    text-align: center;

    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -260px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(42, 107, 200, 0.08);

    filter: blur(20px);

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    top: 40px;

    border-radius: 50%;

    background:
        rgba(104, 84, 190, 0.055);

    filter: blur(25px);

    pointer-events: none;
}

.hero .page-shell {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding:
        8px 14px;

    border:
        1px solid
        rgba(80, 150, 241, 0.27);

    border-radius: 999px;

    background:
        rgba(63, 140, 255, 0.075);

    color: #70adff;

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 880px;

    margin: 0 auto;

    font-size:
        clamp(2.6rem, 7vw, 5.7rem);

    line-height: 0.98;

    letter-spacing: -0.065em;
}

.hero h1 span {
    background:
        linear-gradient(
            105deg,
            #62a7ff 0%,
            #3f8cff 43%,
            #7c78df 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.hero-text {
    max-width: 720px;

    margin:
        28px auto
        0;

    color: var(--muted);

    font-size:
        clamp(1rem, 2vw, 1.18rem);
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}


/* ======================================================
   BUTTONS
   ====================================================== */

.btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding:
        0 22px;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.035);

    color: var(--text);

    text-decoration: none;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);

    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.btn:hover {
    transform: translateY(-2px);

    background: var(--surface-hover);

    border-color:
        var(--border-strong);
}

.btn-primary {
    border-color:
        rgba(102, 167, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            #367fe5,
            #4b91ef
        );

    color: #ffffff;

    box-shadow:
        0 10px 30px
        rgba(42, 110, 210, 0.20);
}

.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #438cef,
            #60a1f7
        );

    border-color:
        rgba(130, 188, 255, 0.75);

    box-shadow:
        0 13px 35px
        rgba(42, 110, 210, 0.27);
}

.btn-small {
    min-height: 42px;

    padding:
        0 16px;

    font-size: 0.88rem;
}


/* ======================================================
   BENEFITS
   ====================================================== */

.benefits {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin:
        0 0
        82px;
}

.benefit {
    padding: 22px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent
        ),
        var(--surface);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.benefit:hover {
    transform: translateY(-3px);

    border-color:
        rgba(81, 149, 239, 0.23);

    background: var(--surface-hover);
}

.benefit-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin-bottom: 16px;

    border:
        1px solid
        rgba(82, 148, 239, 0.14);

    border-radius: 12px;

    background:
        var(--accent-soft);

    color: #6baaff;

    font-size: 1.25rem;
}

.benefit strong {
    display: block;

    margin-bottom: 5px;

    font-size: 1rem;
}

.benefit span {
    color: var(--muted);

    font-size: 0.9rem;
}


/* ======================================================
   SECTIONS
   ====================================================== */

.section {
    padding:
        24px 0
        82px;
}

.section-heading {
    max-width: 720px;

    margin-bottom: 30px;
}

.section-eyebrow {
    margin-bottom: 8px;

    color: #68a9ff;

    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0;

    font-size:
        clamp(2rem, 4vw, 3.3rem);

    line-height: 1.05;

    letter-spacing: -0.045em;
}

.section-heading p {
    margin:
        14px 0
        0;

    color: var(--muted);
}


/* ======================================================
   ROKU FEATURE
   ====================================================== */

.roku-feature {
    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns:
        1.3fr
        0.7fr;

    gap: 30px;

    align-items: center;

    margin-bottom: 22px;

    padding:
        clamp(28px, 5vw, 52px);

    border:
        1px solid
        rgba(80, 148, 239, 0.28);

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            135deg,
            rgba(49, 111, 199, 0.13),
            rgba(104, 83, 185, 0.055) 55%,
            rgba(255, 255, 255, 0.018)
        ),
        var(--surface);

    box-shadow:
        var(--shadow-blue);
}

.roku-feature::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(105, 169, 255, 0.48),
            transparent
        );
}

.roku-feature::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(68, 133, 220, 0.18),
            rgba(101, 82, 185, 0.055) 48%,
            transparent 70%
        );
}

.roku-content {
    position: relative;
    z-index: 2;
}

.roku-label {
    color: #70adff;

    font-size: 0.8rem;
    font-weight: 900;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roku-feature h3 {
    margin:
        8px 0
        12px;

    font-size:
        clamp(2rem, 5vw, 3.5rem);

    line-height: 1;

    letter-spacing: -0.05em;
}

.roku-feature p {
    max-width: 620px;

    margin:
        0 0
        24px;

    color: var(--muted);
}

.roku-platform-icon {
    position: relative;
    z-index: 2;

    width: 170px;
    height: 170px;

    display: grid;
    place-items: center;

    justify-self: center;

    padding: 18px;

    border:
        1px solid
        rgba(94, 151, 229, 0.12);

    border-radius: 28px;

    background:
        rgba(255, 255, 255, 0.025);
}

.roku-platform-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ======================================================
   PLATFORM GRID
   ====================================================== */

.platform-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}

.platform-card {
    position: relative;

    min-height: 230px;

    display: flex;
    flex-direction: column;

    padding: 22px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent
        ),
        var(--surface);

    overflow: hidden;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.platform-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(78, 147, 239, 0.32),
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.2s ease;
}

.platform-card:hover {
    transform: translateY(-4px);

    background: var(--surface-hover);

    border-color:
        rgba(81, 149, 239, 0.24);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.17);
}

.platform-card:hover::before {
    opacity: 1;
}

.platform-icon {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    margin-bottom: 18px;

    padding: 10px;

    overflow: hidden;

    border:
        1px solid
        rgba(82, 148, 239, 0.13);

    border-radius: 15px;

    background:
        rgba(63, 140, 255, 0.065);

    color: #6baaff;

    font-size: 1.35rem;
}

.platform-icon img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.platform-card h3 {
    margin:
        0 0
        5px;

    font-size: 1.05rem;
}

.platform-card p {
    flex: 1;

    margin:
        0 0
        18px;

    color: var(--muted);

    font-size: 0.88rem;
}

.platform-card .btn {
    align-self: flex-start;
}


/* ======================================================
   SMART TV
   ====================================================== */

.tv-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;
}

.tv-card {
    padding: 24px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-small);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent
        ),
        var(--surface);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease;
}

.tv-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(81, 149, 239, 0.23);

    background: var(--surface-hover);
}

.tv-card .platform-icon {
    margin-bottom: 18px;
}

.tv-card h3 {
    margin:
        0 0
        8px;
}

.tv-card p {
    margin:
        0 0
        18px;

    color: var(--muted);

    font-size: 0.9rem;
}


/* ======================================================
   ALTERNATIVE PLAYERS
   ====================================================== */

.alternative-box {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 34px;

    padding:
        clamp(26px, 5vw, 48px);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            135deg,
            rgba(48, 111, 198, 0.065),
            transparent 48%
        ),
        var(--bg-soft);

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.10);
}

.alternative-box h2 {
    margin:
        0 0
        12px;

    font-size:
        clamp(1.7rem, 4vw, 2.6rem);

    letter-spacing: -0.04em;
}

.alternative-box p {
    color: var(--muted);
}

.credentials {
    display: grid;

    gap: 10px;

    align-content: center;
}

.credential-row {
    display: grid;

    grid-template-columns:
        110px 1fr;

    gap: 12px;

    padding:
        13px 15px;

    border:
        1px solid var(--border);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.025);
}

.credential-label {
    color: var(--muted);

    font-size: 0.85rem;
    font-weight: 700;
}

.credential-value {
    min-width: 0;

    overflow-wrap: anywhere;

    color: var(--text);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-size: 0.88rem;
}

.player-list {
    margin:
        18px 0
        0;

    padding-left: 20px;

    color: var(--muted);
}


/* ======================================================
   HELP / ACCORDION
   ====================================================== */

.help-list {
    display: grid;

    gap: 10px;
}

.help-item {
    overflow: hidden;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background:
        var(--surface);
}

.help-button {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        18px 20px;

    border: 0;

    background: transparent;

    color: var(--text);

    font: inherit;
    font-weight: 800;

    text-align: left;

    cursor: pointer;
}

.help-button span:last-child {
    color: #69a9ff;

    transition:
        transform 0.2s ease;
}

.help-item.is-open .help-button span:last-child {
    transform: rotate(45deg);
}

.help-content {
    display: none;

    padding:
        0 20px
        20px;

    color: var(--muted);

    font-size: 0.92rem;
}

.help-item.is-open .help-content {
    display: block;
}

.help-content p:first-child {
    margin-top: 0;
}

.help-content p:last-child {
    margin-bottom: 0;
}


/* ======================================================
   FOOTER
   ====================================================== */

.site-footer {
    padding:
        28px 0
        44px;

    border-top:
        1px solid var(--border);

    background:
        rgba(3, 7, 13, 0.25);

    color: var(--muted);

    font-size: 0.84rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;

    gap: 20px;
}

.footer-inner a {
    color: var(--text);

    text-decoration: none;
}


/* ======================================================
   TEMA CLARO
   ====================================================== */

body.light-theme {
    --bg: #f4f7fb;
    --bg-deep: #edf2f8;
    --bg-soft: #ffffff;

    --surface: #ffffff;
    --surface-hover: #f8fafd;
    --surface-strong: #eef3f9;

    --text: #172232;
    --muted: #68788c;

    --accent: #347bd8;
    --accent-hover: #286dc5;

    --accent-soft:
        rgba(52, 123, 216, 0.09);

    --border:
        rgba(39, 66, 101, 0.12);

    --border-strong:
        rgba(52, 123, 216, 0.23);

    --shadow:
        0 25px 70px
        rgba(35, 62, 96, 0.10);

    --shadow-blue:
        0 20px 55px
        rgba(42, 103, 182, 0.09);

    background:
        radial-gradient(
            circle at 12% 7%,
            rgba(52, 123, 216, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 25%,
            rgba(98, 91, 185, 0.06),
            transparent 28%
        ),
        #f4f7fb;
}

body.light-theme .site-header.is-scrolled {
    background:
        rgba(247, 249, 252, 0.90);
}

body.light-theme .theme-toggle,
body.light-theme .btn:not(.btn-primary) {
    background:
        rgba(255, 255, 255, 0.78);
}

body.light-theme .benefit,
body.light-theme .platform-card,
body.light-theme .tv-card {
    background:
        linear-gradient(
            145deg,
            rgba(52, 123, 216, 0.025),
            transparent
        ),
        #ffffff;
}

body.light-theme .roku-feature {
    background:
        linear-gradient(
            135deg,
            rgba(52, 123, 216, 0.07),
            rgba(98, 91, 185, 0.035) 55%,
            #ffffff
        );
}

body.light-theme .alternative-box {
    background:
        linear-gradient(
            135deg,
            rgba(52, 123, 216, 0.045),
            transparent 48%
        ),
        #ffffff;
}

body.light-theme .credential-row {
    background:
        rgba(31, 65, 105, 0.025);
}

body.light-theme .platform-icon {
    background:
        rgba(52, 123, 216, 0.055);
}

body.light-theme .help-item {
    background: #ffffff;
}

body.light-theme .site-footer {
    background:
        rgba(230, 237, 246, 0.35);
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 900px) {

    .benefits,
    .platform-grid,
    .tv-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .roku-feature,
    .alternative-box {
        grid-template-columns: 1fr;
    }

    .roku-platform-icon {
        justify-self: start;
    }

}


@media (max-width: 640px) {

    .page-shell {
        width:
            min(
                calc(100% - 22px),
                var(--max-width)
            );
    }

    .header-inner {
        min-height: 64px;
    }

    .brand-logo {
        width: 50px;
        height: 50px;
    }

    .header-link {
        display: none;
    }

    .hero {
        padding:
            66px 0
            48px;
    }

    .hero h1 {
        font-size:
            clamp(2.5rem, 15vw, 4rem);
    }

    .hero-actions {
        display: grid;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .benefits,
    .platform-grid,
    .tv-grid {
        grid-template-columns: 1fr;
    }

    .benefits {
        margin-bottom: 58px;
    }

    .section {
        padding-bottom: 60px;
    }

    .roku-feature {
        padding:
            26px 22px;
    }

    .roku-platform-icon {
        width: 120px;
        height: 120px;

        padding: 12px;
    }

    .platform-card {
        min-height: 0;
    }

    .alternative-box {
        gap: 20px;

        padding:
            24px 20px;
    }

    .credential-row {
        grid-template-columns: 1fr;

        gap: 2px;
    }

    .footer-inner {
        flex-direction: column;
    }

}