/* ==========================================================
   TABELA DE PELÍCULAS
   DESIGN SYSTEM V1
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================================
   VARIÁVEIS
   ========================================================== */

:root{

    --bg:#07111F;

    --bg-soft:#101C2C;

    --card:#18283E;

    --card-hover:#223551;

    --primary:#2563EB;

    --primary-hover:#3B82F6;

    --success:#10B981;

    --danger:#EF4444;

    --warning:#F4B400;

    --text:#FFFFFF;

    --text-soft:#AEB8C5;

    --border:#24364D;

    --shadow:0 15px 35px rgba(0,0,0,.35);

    --radius:18px;

    --transition:.25s ease;

}

/* ==========================================================
   RESET
   ========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ==========================================================
   HTML
   ========================================================== */

html{

    scroll-behavior:smooth;

}

/* ==========================================================
   BODY
   ========================================================== */

body{

    background:var(--bg);

    color:var(--text);

    font-family:'Inter',sans-serif;

    font-size:15px;

    line-height:1.6;

    min-height:100vh;

}

/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

/* ==========================================================
   IMAGENS
   ========================================================== */

img{

    display:block;

    max-width:100%;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:min(1280px,92%);

    margin:auto;

}

/* ==========================================================
   TÍTULOS
   ========================================================== */

h1{

    font-size:44px;

    font-weight:800;

    line-height:1.15;

}

h2{

    font-size:34px;

    font-weight:700;

}

h3{

    font-size:24px;

    font-weight:700;

}

h4{

    font-size:18px;

    font-weight:600;

}

p{

    color:var(--text-soft);

}

/* ==========================================================
   ESPAÇAMENTOS
   ========================================================== */

.section{

    padding:90px 0;

}

/* ==========================================================
   SELOS
   ========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(37,99,235,.15);

    color:var(--primary);

    font-weight:700;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* ==========================================================
   PREMIUM
   ========================================================== */

.badge-premium{

    background:rgba(244,180,0,.14);

    color:var(--warning);

}

/* ==========================================================
   DIVISOR
   ========================================================== */

hr{

    border:none;

    height:1px;

    background:var(--border);

    margin:30px 0;

}

/* ==========================================================
   SELEÇÃO
   ========================================================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* ==========================================================
   SCROLL
   ========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#08121d;

}

::-webkit-scrollbar-thumb{

    background:#284668;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#3B82F6;

}