:root {

    /* ==========================================
       CORES OFICIAIS - CINERAPLAY
       ========================================== */

    --bg-main: #050816;
    --bg-secondary: #0a0f21;
    --bg-card: #10172b;

    --purple: #8a2cff;
    --pink: #d93cff;
    --blue: #167cff;
    --cyan: #39d5ff;

    --text-main: #f5f7ff;
    --text-secondary: #aeb8d3;
    --text-muted: #75809c;

    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    --border: rgba(255,255,255,0.08);

    /* ==========================================
       AJUSTES GERAIS
       MUDE AQUI PARA AJUSTAR O SITE
       ========================================== */

    /* largura máxima do conteúdo */
    --site-width: 1200px;

    /* aumenta/diminui tudo proporcionalmente */
    --site-scale: 1;

    /* ==========================================
       LOGO
       ========================================== */

    /* largura da logo */
    --logo-width: 180px;

    /* mover horizontalmente
       negativo = esquerda
       positivo = direita */
    --logo-x: 0px;

    /* mover verticalmente
       negativo = sobe
       positivo = desce */
    --logo-y: 0px;

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

    --header-height: 78px;

    /* mover menu para esquerda/direita */
    --menu-x: 0px;

    /* mover menu para cima/baixo */
    --menu-y: 0px;

    /* espaço entre opções */
    --menu-gap: 32px;

    /* ==========================================
       BANNER PRINCIPAL
       ========================================== */

    /* altura do banner */
    --hero-height: 630px;

    /* conteúdo do banner esquerda/direita */
    --hero-x: 0px;

    /* conteúdo do banner cima/baixo */
    --hero-y: 0px;

    /* tamanho do título */
    --hero-title-size: 58px;

    /* largura máxima do texto */
    --hero-text-width: 620px;

    /* ==========================================
       CARDS
       ========================================== */

    --card-radius: 18px;
    --card-padding: 24px;

    /* distância entre cards */
    --card-gap: 20px;
}


/* ==============================================
   BASE DO SITE
   ============================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 70% 0%, rgba(62,44,255,.10), transparent 30%),
        var(--bg-main);

    color: var(--text-main);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    transform-origin: top center;
}

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

.container {
    width: min(
        calc(100% - 40px),
        var(--site-width)
    );

    margin: auto;
}


/* ==============================================
   BOTÕES PADRÃO
   ============================================== */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 0 24px;

    border: 0;
    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--blue)
        );

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;

    box-shadow:
        0 8px 30px rgba(69,71,255,.20);
}

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

    box-shadow:
        0 12px 35px rgba(83,72,255,.30);
}


/* ==============================================
   CARD PADRÃO
   ============================================== */

.card {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.01)
        ),
        var(--bg-card);

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

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

    padding:
        var(--card-padding);
}


/* ==============================================
   CLASSES DE AJUSTE MANUAL

   Você poderá usar essas classes quando quiser.
   ============================================== */


/* -------- SUBIR -------- */

.subir-5 {
    transform: translateY(-5px);
}

.subir-10 {
    transform: translateY(-10px);
}

.subir-20 {
    transform: translateY(-20px);
}


/* -------- DESCER -------- */

.descer-5 {
    transform: translateY(5px);
}

.descer-10 {
    transform: translateY(10px);
}

.descer-20 {
    transform: translateY(20px);
}


/* -------- ESQUERDA -------- */

.esquerda-5 {
    transform: translateX(-5px);
}

.esquerda-10 {
    transform: translateX(-10px);
}

.esquerda-20 {
    transform: translateX(-20px);
}


/* -------- DIREITA -------- */

.direita-5 {
    transform: translateX(5px);
}

.direita-10 {
    transform: translateX(10px);
}

.direita-20 {
    transform: translateX(20px);
}


/* -------- AUMENTAR -------- */

.aumentar-5 {
    scale: 1.05;
}

.aumentar-10 {
    scale: 1.10;
}

.aumentar-20 {
    scale: 1.20;
}


/* -------- DIMINUIR -------- */

.diminuir-5 {
    scale: .95;
}

.diminuir-10 {
    scale: .90;
}

.diminuir-20 {
    scale: .80;
}


/* ==============================================
   MOBILE
   ============================================== */

@media (max-width: 768px) {

    :root {
        --site-width: 100%;
        --hero-title-size: 38px;
        --logo-width: 145px;
        --menu-gap: 15px;
    }

    .container {
        width: calc(100% - 28px);
    }
}