/* TODO: remove */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); */

@font-face {
    font-family: 'Poppins';
    src: url("../../vendor/Poppins.79ac58feed17.ttf") format('woff2 supports variations'),
        url("../../vendor/Poppins.79ac58feed17.ttf") format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* Base font size */

    /* EXPERIMENTAL */
    --font-size-base: 16;
    --rem: calc(1px * var(--font-size-base));

    --font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* Standard line-height */
    --rhythm: 1.3;
    --border-radius: 16px;

    /* Layout */

    /* EXPERIMENTAL - MIGHT CHANGE */
    --fluid-text-min-vw: 360;
    --fluid-text-max-vw: 1024;

    --container-width: clamp(720px, 80vw, 1200px);
    --readable-container-width: 40rem;

    --color-title-values: 36, 7, 57;
    --color-body-values: 92, 75, 102;
    --color-label-values: 132, 110, 145;
    --color-placeholder-values: 170, 150, 181;
    --color-line-values: 227, 217, 233;
    --color-input-background-values: 244, 242, 244;
    --color-background-values: 249, 249, 250;
    --color-elevation-values: 255, 255, 255;
    --color-primary-light-values: 190, 102, 255;
    --color-primary-base-values: 157, 0, 255;
    --color-primary-dark-values: 104, 17, 242;
    --color-primary-on-background-values: 157, 0, 255;
    --color-primary-on-background-contrast-values: 157, 0, 255;
    --color-primary-on-transparent-values: 157, 0, 255;
    --color-primary-on-transparent-contrast-values: 70, 20, 237;
    --color-primary-in-light-values: 255, 255, 255;
    --color-primary-in-light-contrast-values: 36, 7, 57;
    --color-primary-in-base-values: 255, 255, 255;
    --color-primary-in-base-contrast-values: 255, 255, 255;
    --color-primary-in-dark-values: 255, 255, 255;
    --color-primary-in-dark-contrast-values: 255, 255, 255;
    --color-secondary-light-values: 0, 156, 255;
    --color-secondary-base-values: 0, 121, 255;
    --color-secondary-dark-values: 33, 68, 205;
    --color-secondary-on-background-values: 0, 121, 255;
    --color-secondary-on-background-contrast-values: 20, 103, 236;
    --color-secondary-on-transparent-values: 20, 103, 236;
    --color-secondary-on-transparent-contrast-values: 33, 68, 205;
    --color-secondary-in-light-values: 0, 21, 69;
    --color-secondary-in-light-contrast-values: 0, 21, 69;
    --color-secondary-in-base-values: 255, 255, 255;
    --color-secondary-in-base-contrast-values: 0, 21, 69;
    --color-secondary-in-dark-values: 255, 255, 255;
    --color-secondary-in-dark-contrast-values: 255, 255, 255;
    --color-accent-light-values: 255, 211, 77;
    --color-accent-base-values: 255, 191, 0;
    --color-accent-dark-values: 255, 158, 0;
    --color-accent-on-background-values: 242, 98, 0;
    --color-accent-on-background-contrast-values: 203, 65, 0;
    --color-accent-on-transparent-values: 226, 85, 0;
    --color-accent-on-transparent-contrast-values: 187, 51, 0;
    --color-accent-in-light-values: 43, 18, 0;
    --color-accent-in-light-contrast-values: 43, 18, 0;
    --color-accent-in-base-values: 43, 18, 0;
    --color-accent-in-base-contrast-values: 43, 18, 0;
    --color-accent-in-dark-values: 43, 18, 0;
    --color-accent-in-dark-contrast-values: 43, 18, 0;
    --color-success-light-values: 168, 225, 206;
    --color-success-base-values: 0, 186, 143;
    --color-success-dark-values: 0, 153, 101;
    --color-success-on-background-values: 0, 153, 101;
    --color-success-on-background-contrast-values: 0, 124, 74;
    --color-success-on-transparent-values: 0, 140, 89;
    --color-success-on-transparent-contrast-values: 0, 108, 61;
    --color-success-in-light-values: 0, 34, 6;
    --color-success-in-light-contrast-values: 0, 34, 6;
    --color-success-in-base-values: 0, 34, 6;
    --color-success-in-base-contrast-values: 0, 34, 6;
    --color-success-in-dark-values: 255, 255, 255;
    --color-success-in-dark-contrast-values: 0, 34, 6;
    --color-warning-light-values: 255, 181, 78;
    --color-warning-base-values: 255, 149, 11;
    --color-warning-dark-values: 245, 121, 11;
    --color-warning-on-background-values: 229, 78, 9;
    --color-warning-on-background-contrast-values: 207, 59, 0;
    --color-warning-on-transparent-values: 229, 78, 9;
    --color-warning-on-transparent-contrast-values: 183, 36, 0;
    --color-warning-in-light-values: 50, 11, 0;
    --color-warning-in-light-contrast-values: 50, 11, 0;
    --color-warning-in-base-values: 50, 11, 0;
    --color-warning-in-base-contrast-values: 50, 11, 0;
    --color-warning-in-dark-values: 50, 11, 0;
    --color-warning-in-dark-contrast-values: 50, 11, 0;
    --color-error-light-values: 255, 64, 91;
    --color-error-base-values: 255, 0, 64;
    --color-error-dark-values: 224, 0, 49;
    --color-error-on-background-values: 255, 0, 64;
    --color-error-on-background-contrast-values: 224, 0, 49;
    --color-error-on-transparent-values: 224, 0, 49;
    --color-error-on-transparent-contrast-values: 170, 0, 8;
    --color-error-in-light-values: 255, 255, 255;
    --color-error-in-light-contrast-values: 61, 0, 0;
    --color-error-in-base-values: 255, 255, 255;
    --color-error-in-base-contrast-values: 61, 0, 0;
    --color-error-in-dark-values: 255, 255, 255;
    --color-error-in-dark-contrast-values: 255, 255, 255;

    /* Overrides */
    --h1-font-weight: 600;
    --h1-font-size: 3.75rem;
    --h1-letter-spacing: -1px;

    --h2-font-weight: 600;
    --h2-font-size: 3rem;
    --h2-letter-spacing: -1px;

    --density: 1;
    --border-radius: clamp(8px, calc(8px * var(--density) + 4px), 24px);

    --a-hover-background-color: transparent;
    --a-hover-color: var(--color-secondary-on-background-contrast);

    font-feature-settings: 'ss02' on;
}

/** Blog post card **/
.blog-post-card {
    border-radius: var(--border-radius);
    overflow: hidden;
    font-size: 0.9em;
    text-decoration: none;
    color: inherit;
    display: block;

    background-color: var(--color-elevation);
    --box-shadow-color-values: var(--color-title-values);
    box-shadow:
        0px 0.7px 1.9px rgba(var(--box-shadow-color-values), 0.014),
        0px 1.8px 4.7px rgba(var(--box-shadow-color-values), 0.02),
        0px 3.4px 8.8px rgba(var(--box-shadow-color-values), 0.025),
        0px 6px 15.6px rgba(var(--box-shadow-color-values), 0.03),
        0px 11.3px 29.2px rgba(var(--box-shadow-color-values), 0.036),
        0px 27px 70px rgba(var(--box-shadow-color-values), 0.05);
    transition: box-shadow 250ms ease-in-out;
}

.blog-post-card:hover {
    color: inherit;
    background-color: var(--color-elevation);
}

.blog-post-card .blog-post-card-body {
    padding: 0.5em 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.blog-post-card .blog-post-card-body p {
    margin: 0;
}

.blog-post-card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-card .og-image {
    object-fit: cover;
    aspect-ratio: 1200 / 630;
    width: 100%;
}

.blog-post-card h1 {
    font-size: 1.2em;
    font-weight: bold;
    line-height: normal;
    margin: 0;
    font-stretch: normal;
    letter-spacing: normal;
}

.blog-post-card .tagline {
    font-size: 0.85em;
}

/* Cards and wrappers */

.benefit-card {
        padding: 1rem 1.5rem;

        --box-shadow-color-values: var(--color-title-values);
        box-shadow:
            0px 0.7px 1.9px rgba(var(--box-shadow-color-values), 0.014),
            0px 1.8px 4.7px rgba(var(--box-shadow-color-values), 0.02),
            0px 3.4px 8.8px rgba(var(--box-shadow-color-values), 0.025),
            0px 6px 15.6px rgba(var(--box-shadow-color-values), 0.03),
            0px 11.3px 29.2px rgba(var(--box-shadow-color-values), 0.036),
            0px 27px 70px rgba(var(--box-shadow-color-values), 0.05);
    }

.benefit-card i {
    font-size: 3rem;
    color: var(--color-title);
}

.benefit-card span {
    font-size: 1.125em;
    line-height: 1.5em;
    color: var(--color-title);
    font-weight: 500;
}

.media-wrapper {
    position: relative;
    align-self: center;
    justify-self: center;
}

.media-wrapper img {
    border-radius: 16px;
}

.media-frame {
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
    background: rgba(var(--color-secondary-light-values), 0.05);
    border-radius: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(var(--color-secondary-light-values), 0.15);
    z-index: -1;
}

/* UI pijadas */

#ui-demo {
    width: 360px;
    aspect-ratio: 9/16;
    justify-self: center;
    position: relative;
}

#ui-demo .iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    border-radius: 24px;
    outline: 1px solid rgba(203, 215, 255, 0.35);
    overflow: hidden;
    background-color: white;
}

#ui-demo .phone-frame {
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -16px;
    right: -16px;
    background: rgba(var(--color-secondary-light-values), 0.05);
    border-radius: 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(var(--color-secondary-light-values), 0.15);
    z-index: -1;
}

#ui-demo .decorative-circle {
    background: linear-gradient(180deg, var(--top-color, #00B5FF) 0%, var(--bottom-color, #0079FF) 100%);
    aspect-ratio: 1;
    border-radius: 100%;
    position: absolute;
    z-index: -2;
}

#ui-demo .decorative-circle.big {
    width: 180px;
    offset-path: path("M2.59057 81.763C41.313 -116.311 342.674 111.774 393.182 115.776C443.689 119.777 386.447 11.7366 322.471 81.763C258.495 151.789 44.6801 595.956 12.6921 551.939C-19.296 507.923 138.961 459.905 393.182 531.932C647.402 603.959 -36.1318 279.837 2.59057 81.763Z");
    animation: decorative-ball-anim 100s infinite alternate linear;
}

#ui-demo .decorative-circle.small {
    width: 120px;
    --top-color: var(--color-primary-base);
    --bottom-color: var(--color-secondary-base);
    offset-path: path("M13.9999 380C13.9999 464 434.149 688.84 440 604C452 430 -26.0001 692 1.99991 628C29.9999 564 280 466 244 366C208 266 31.9999 -82 1.99991 20C-28.0001 122 508 242 416 296C324 350 13.9999 288 13.9999 380Z");
    animation: decorative-ball-anim 80s infinite alternate linear;
}