/* =========================================================
   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: #ffffff;

    --surface: #ffffff;
    --surface-2: #f5f5f8;

    --text: #17171c;
    --text-soft: #555761;
    --muted: #777982;

    --pink: #ff3f88;
    --pink-light: #e84b88;

    --purple: #9147ff;
    --purple-light: #8b55d8;

    --red: #ff3b5f;

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


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

html {

    width: 100%;

    min-height: 100%;

    background: #f7f7f9;

    scroll-behavior: auto;

    overflow-x: hidden;
}


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

body {

    width: 100%;

    min-height: 100vh;

    margin: 0;

    margin: 5%;

    width: 90%;

    background: #f7f7f9;

    color: #17171c;

    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,
            #ffffff,
            #f1f1f5
        );

    

    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(145, 71, 255, .07),
            transparent 70%
        );

    pointer-events: none;
}


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

.card h1,
.card h2,
.card h3 {

    position: relative;

    z-index: 1;

    color: #17171c;
}


.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: #17171c;

    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(0, 0, 0, .10);

    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, .20),
        0 4px 15px
        rgba(0, 0, 0, .12);

    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: #777982;

    font-size: 12px;

    line-height: 1.8;
}


.footer p {

    margin: 10px 0;
}


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

::selection {

    background:
        rgba(255, 63, 136, .20);

    color: #17171c;
}


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

::-webkit-scrollbar {

    width: 6px;
}


::-webkit-scrollbar-track {

    background: #eeeeF2;
}


::-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) {

    * {

        animation-name: none !important;
    }
}