/* ===== Colores de la app CineGo (res/values/colors.xml) ===== */
:root {
    --negro: #0D0D0D;
    --superficie: #1C1C1E;
    --superficie-2: #2C2C2E;
    --borde: #3A3A3C;
    --texto: #F2F2F2;
    --texto-2: #B0B0B3;
    --rojo: #E1261C;
    --rojo-claro: #FF5A4D;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--negro);
    color: var(--texto);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ===== Pagina unica de descarga, centrada ===== */
.descarga {
    position: relative;
    width: min(480px, 100% - 32px);
    margin-inline: auto;
    padding: 64px 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.brillo {
    position: absolute; top: 0; left: 50%; z-index: -1;
    width: 360px; height: 360px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(225,38,28,.32), transparent 65%);
    filter: blur(24px);
}
.logo { border-radius: 28px; box-shadow: 0 16px 48px rgba(0,0,0,.55); }
h1 { margin: 24px 0 0; font-size: 2.6rem; font-weight: 800; letter-spacing: .06em; }
.bajada { margin: 8px 0 32px; color: var(--texto-2); font-size: 1.05rem; }

/* ===== Boton de descarga ===== */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 56px; padding: 0 28px; border-radius: 999px;
    background: var(--rojo); color: #fff; font-size: 1.05rem; font-weight: 600; text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(225,38,28,.3);
    transition: transform .15s ease, background .15s ease;
}
.boton:hover { background: var(--rojo-claro); transform: translateY(-1px); }
.boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.boton--deshabilitado { background: var(--superficie-2); color: var(--texto-2); box-shadow: none; cursor: not-allowed; }
.boton--deshabilitado:hover { transform: none; background: var(--superficie-2); }

.datos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
    padding: 0; margin: 16px 0 0; list-style: none; color: var(--texto-2); font-size: .9rem;
}
.datos li + li::before { content: "·"; margin-right: 16px; color: var(--borde); }

/* ===== Pasos de instalacion ===== */
.instalar {
    width: 100%; margin-top: 48px; padding: 24px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px;
    text-align: left;
}
.instalar h2 { margin: 0 0 16px; font-size: 1.1rem; }
.instalar ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--texto-2); }
.instalar strong { color: var(--texto); }

.nota { margin-top: 32px; color: var(--texto-2); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
    .boton { transition: none; }
}