/* ===================================================================
   Capiflix — folha de estilo (identidade visual estilo Netflix brand)
   Paleta oficial: Netflix Red #E50914, Dark Red #B20710,
                   fundo near-black #141414, preto #000, branco #fff
   Tipografia livre aproximando Netflix Sans:
                   Archivo (display) + Inter (corpo/UI)
   =================================================================== */

:root {
    --red:        #e50914;
    --red-dark:   #b20710;
    --red-hi:     #f6121d;
    --bg:         #141414;   /* fundo near-black da Netflix */
    --black:      #000000;
    --panel:      #181818;   /* cartões/linhas */
    --panel-hi:   #232323;
    --panel-2:    #2a2a2a;
    --line:       #2f2f2f;
    --white:      #ffffff;
    --gray:       #b3b3b3;   /* texto secundário Netflix */
    --gray-dim:   #808080;
    --gray-dark:  #555555;
    --green:      #46d369;   /* verde "match" da Netflix */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--white);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* tipografia utilitária */
.display {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------- logo SVG ---------- */
svg.logo-marca {
    height: 28px;
    width: auto;
    display: block;
    fill: var(--red);
}
svg.logo-grande {
    height: 46px;
    width: auto;
    display: block;
    fill: var(--red);
}

/* ---------- botão vermelho Netflix ---------- */
.btn-red {
    background: var(--red);
    color: var(--white);
    border: none;
    border-radius: 4px;
    padding: 14px 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btn-red:hover { background: var(--red-hi); }
.btn-red:active { background: var(--red-dark); }

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