/* =========================================================
   FONTE
========================================================= */

@font-face {
    font-family: "Quicksand";
    src: url("font.ttf") format("truetype");
    font-display: swap;
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
        -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}


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

:root {
    --black: #000000;

    --surface: #0b0b0f;
    --surface-2: #101014;

    --text: #ffffff;
    --text-soft: #d7d7df;
    --muted: #858590;

    --pink: #ff3f88;
    --pink-light: #ff78aa;

    --purple: #9147ff;
    --purple-light: #b86aff;

    --red: #ff3b5f;

    --border: rgba(255, 255, 255, .08);
    --border-light: rgba(255, 255, 255, .12);
}


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

html {
    width: 100%;
    min-height: 100%;

    background: #000000;

    scroll-behavior: auto;

    overflow-x: hidden;
}


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

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;

    margin: 5%;

width: 90%;
    background: #000000;

    color: #ffffff;

    font-family:
        "Quicksand",
        Arial,
        sans-serif;

    overflow-x: hidden;

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


/* =========================================================
   ANIMAÇÃO
========================================================= */




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

.container {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}


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

.card {
    position: relative;

    width: 100%;

    margin: 0 auto 16px;

    padding:
        24px
        24px
        25px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #111116,
            #08080b
        );

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, .45);

    overflow: hidden;

    animation:
        fadeUp .55s ease both;
}


/* =========================================================
   BRILHO LATERAL
========================================================= */

.card::before {
    content: "";

    position: absolute;

    top: 20px;
    left: 0;

    width: 3px;
    height: 46px;

    border-radius:
        0 10px 10px 0;

    background:
        linear-gradient(
            180deg,
            var(--pink),
            var(--purple)
        );
}


/* =========================================================
   BRILHO INTERNO
========================================================= */

.card::after {
    content: "";

    position: absolute;

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

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(156, 77, 255, .08),
            transparent 70%
        );

    pointer-events: none;
}


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

.card h1,
.card h2,
.card h3 {
    position: relative;

    z-index: 1;

    color: #ffffff;
}


.card h1 {
    margin-bottom: 16px;

    font-size: 28px;

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -.6px;
}


.card h2 {
    margin-bottom: 17px;

    padding-left: 5px;

    color: var(--pink-light);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 900;

    letter-spacing: -.3px;
}


.card h3 {
    margin-top: 10px;
    margin-bottom: 8px;

    font-size: 16px;

    font-weight: 800;
}


/* =========================================================
   PARÁGRAFOS
========================================================= */

.card p {
    position: relative;

    z-index: 1;

    margin: 10px 0;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.85;
}


.card strong,
.card b {
    color: #ffffff;

    font-weight: 800;
}


/* =========================================================
   LISTAS
========================================================= */

.card ul {
    position: relative;

    z-index: 1;

    margin:
        12px 0
        8px;

    padding-left: 22px;
}


.card li {
    margin-bottom: 9px;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   BOTÃO FIXO
========================================================= */

.botao {
    position: fixed;

    z-index: 9999;

    left: 50%;
    bottom:
        calc(
            18px +
            env(safe-area-inset-bottom)
        );

    display: flex;

    align-items: center;
    justify-content: center;

    width: 60%;

    min-height: 5%;

    padding:
        15px 22px;

    transform:
        translateX(-50%);

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius: 999px;

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

    color: #ffffff;

    font-family:
        "Quicksand",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 900;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 12px 35px
        rgba(255, 63, 136, .28),
        0 4px 15px
        rgba(0, 0, 0, .5);

    outline: none;

    user-select: none;

    -webkit-user-select: none;

    -webkit-tap-highlight-color:
        transparent;

    appearance: none;

    -webkit-appearance: none;

    isolation: isolate;

    visibility: visible;

    opacity: 1;
}


/* =========================================================
   BOTÃO — HOVER
========================================================= */

.botao:hover {
    filter:
        brightness(1.08);
}


/* =========================================================
   BOTÃO — CLIQUE
========================================================= */

.botao:active {
    transform:
        translateX(-50%)
        scale(.96);

    filter:
        brightness(.95);
}


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

.footer {
    width: stretch;
    max-width: 850px;

    margin:
        35px auto 0;

    padding:
        20px
        8px
        20px;

    text-align: center;

    color: #6f6f79;

    font-size: 12px;

    line-height: 1.8;
}


.footer p {
    margin: 10px 0;
}


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

::selection {
    background:
        rgba(255, 63, 136, .30);

    color: #ffffff;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 6px;
}


::-webkit-scrollbar-track {
    background: #000000;
}


::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--pink),
            var(--purple)
        );
}






/* =========================================================
   WEBVIEW / ELEMENTOS PAI
========================================================= */

html,
body {
    transform: none !important;

    filter: none !important;

    perspective: none !important;
}

@media (prefers-reduced-motion: reduce) {
    /* Procura por QUALQUER elemento que use a sua animação e a desativa */

    * {
        animation-name: none !important;
    }
}