/* ==== COMPONENTS ==== */
.logo
{
    --width: 300;
    --height: 86;
    aspect-ratio: var(--width) / var(--height);
}

.img-cover picture
{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}

.img-cover img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--base-size) * 2);
    position: absolute;
    opacity: 0;
    transition: opacity .5s var(--base-easing);
}

.img-cover::before,
.cover::after
{
    content: '';
    border-radius: calc(var(--base-size) * 2);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    mask-image: linear-gradient(60deg, rgba(0,0,0,.2), rgba(0,0,0,.2), rgba(0,0,0,.05), rgba(0,0,0,.2), rgba(0,0,0,.2));
    mask-size: 100vw 100%;
    mask-position: 100% 50%;
    background-color: var(--text-color);
    animation: img-cover-loader 3s linear forwards infinite;
   -webkit-animation: img-cover-loader 3s linear forwards infinite;
    z-index: -1;
}

.cover::after
{
    border-radius: 0;
}

.img-cover.loaded img
{
    opacity: 1;
}
.img-cover.loaded::before,
.cover.loaded::after
{
    animation: unset;
    display: none;
}

.cover.loaded.masked::after
{
    display: block;
    z-index: 0;
    mask-image: unset;
    background-color: unset;
    background-image: linear-gradient(60deg, var(--purple), var(--red), var(--blue));
    mask-image: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0));
    mask-repeat: no-repeat;
    mask-size: 100vw 100%;
    mask-position: center bottom;
}

.cover.loaded.masked *
{
    z-index: 1;
}

@keyframes img-cover-loader {
    0% { mask-position: 0vw 50%; }
    100% { mask-position: 100vw 50%; }
}
@-webkit-keyframes img-cover-loader {
    0% { mask-position: 0vw 50%; }
    100% { mask-position: 100vw 50%; }
}

.logo img
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.logo::after
{
    --size: 2;
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--base-size) * var(--size));
    aspect-ratio: 1;
    border-top: 2px solid var(--emphasis-color);
    border-left: 2px solid var(--emphasis-color);
    border-right: 2px solid var(--soft-shadow);
    border-bottom: 2px solid var(--soft-shadow);
    border-radius: 50%;
    animation: rotate 2s linear infinite forwards;
    transition: opacity .5s var(--base-easing);
}

@keyframes rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@-webkit-keyframes rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.logo:not(:has(img))
{
    --color: var(--text-color);
    --width: 300;
    --height: 135;
    --url: none;
}

.logo:not(:has(img))::before
{
    content: '';
    display: block;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background-color: var(--color);
    width: 100%;
    aspect-ratio: var(--width) / var(--height);
    opacity: 0;
}

.logo.loaded:not(:has(img))::before
{
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    opacity: 1;
}

.logo.loaded::after
{
    opacity: 0;
}


.logo.growthpath
{
    --url: url('../../img/elements/growthpath-preto.svg');
}

.card-dial
{
    --padding: 1.33333333334;

    --hardlight-opacity: .75;
    border-radius: calc(var(--base-size) * 2);
    padding: calc(var(--base-size) * var(--padding));
    padding-top: calc(var(--base-size) * 4);
    padding-bottom: calc(var(--base-size) * 2);
    background-color: var(--hardlight);
    display: flex;
    gap: calc(var(--base-size) * 2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    flex-direction: column;
}

header:has(.animated-counter)
{
    display: flex;
    align-items: center;
}

header:has(.animated-counter)::before
{
    --font-size: calc(var(--base-size) * 2);
    content: '+';
    font-size: var(--adjusted-font-size);
    line-height: var(--font-size);
}


@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --float {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.animated-counter
{
    --duration: 4s;

    align-items: center;
    counter-set: num var(--num);
    transition-property: --num;
    transition-duration: var(--duration);
    transition-timing-function: var(--base-easing);
}

.animated-counter.float
{
    counter-set: num var(--num) float var(--float);
}


.animated-counter.play
{
    --num: var(--maxvalue);
}

.animated-counter.float.play
{
    animation-name: float;
    animation-duration: calc(var(--duration) / var(--maxvalue));
    animation-iteration-count: calc(var(--maxvalue) - 1);
    animation-timing-function: var(--base-easing); 
    -webkit-animation-name: float;
    -webkit-animation-duration: calc(var(--duration) / var(--maxvalue));
    -webkit-animation-iteration-count: calc(var(--maxvalue) - 1);
    -webkit-animation-timing-function: var(--base-easing);
}

.animated-counter::before
{
    content: counter(num);
}

.animated-counter.float::before
{
    content: counter(num) '.' counter(float);
}

@keyframes float
{
    0%
    {
        --float: 0;
    }
    100%
    {
        --float: 99;
    }
}
@-webkit-keyframes float
{
    0%
    {
        --float: 0;
    }
    100%
    {
        --float: 99;
    }
}


.solution-card
{
    --gap: var(--column-gap);
    color: var(--background);
    aspect-ratio: 1 / 2;
    padding: var(--gap);
    background-color: var(--emphasis-color);
    border-radius: calc(var(--base-size) * 2);
    display: grid;
    grid-template-rows: auto 2fr 1fr auto;
    align-items: end;
    overflow: hidden;
    transition: all .5s var(--base-easing);
}

.solution-card > * + *:not(a)
{
    margin-top: var(--gap);
}

.solution-card div
{
    align-self: start;
}

.solution-card p.prph,
.solution-card .title
{
    color: unset;
}

.solution-card::before
{
    --font-size: var(--gap);
    content: var(--icon, 'a');
    display: block;
    font-family: var(--pulse);
    font-size: var(--font-size);
    line-height: var(--font-size);
    color: unset;
}

.solution-card.svg::before
{
    content: '';    
    height: var(--font-size);
    background-color: var(--background);
    mask-image: var(--icon);
    mask-size: contain;
    mask-position: left center;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon);
    -webkit-mask-size: contain;
    -webkit-mask-position: left center;
    -webkit-mask-repeat: no-repeat;
}

.solution-card a
{
    display: block;
    transition: inherit;
    max-height: 0;
    overflow: hidden;
}

.solution-card a > span
{
    display: none;
}

.solution-card a::before
{
    --font-size: var(--gap);
    content: '\2197';
    display: block;
    font-size: var(--adjusted-font-size);
    line-height: var(--font-size);
    color: unset;
    font-weight: 100;
    margin-top: var(--gap);
}

.solution-card:hover,
.solution-card:focus-within
{
    background-color: var(--title-color);
}

.solution-card:hover > a,
.solution-card:focus-within > a:focus-within
{
    max-height: calc(var(--gap) * 2);
}

.graph-list
{
    --grow: 1.33333334;
    display: grid;
    grid-auto-rows: auto;
}

.graph-list > *
{
    grid-row: span 1;
}

.graph-list > ul
{
    display: grid;
    grid-auto-rows: auto;
}

.graph-list > * + ul
{
    margin-top: var(--row-gap);
}

.graph-list > ul > li
{
    --font-size: calc(var(--base-size) * var(--grow));
    color: var(--text-color);
    display: grid;
    grid-template-rows: 1fr;
    grid-row: span 1;
}

.graph-list > ul > li::before
{
    content: '';
    border-bottom: 1px solid var(--text-color);
    display: block;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

.graph-list ul li:first-of-type::before
{
    border-top: 1px solid var(--text-color);
}

.graph-list ul li > span
{
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    display: block;
    padding: calc(var(--font-size) * 1.5) 0;
}

.graph-list.marker
{
    --grow-arrow: 3;
}

.graph-list.marker > ul > li::after
{
    --font-size: calc(var(--base-size) * var(--grow-arrow));
    content: '\2192';
    grid-row: 1 / span 1;
    grid-column: pos-middle / pre-division;
    font-size: var(--adjusted-font-size);
    line-height: var(--font-size);
    font-weight: 100;
    align-self: center;
}

.basic-box
{
    --gap: calc(var(--base-size) * 2);
    --hardlight-opacity: .75;
    --radius: calc(var(--base-size) * 2);
    background-color: var(--hardlight);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: calc(var(--base-size) * 2);
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.basic-box.numered
{
    --grow-counter: 1.333334;
    --radius: calc(var(--base-size) * var(--grow-counter) * 1.5 + var(--gap));
    counter-increment: numered;
    border-radius: var(--radius);
    padding-bottom: var(--radius);
}

.basic-box.numered::before
{
    --font-size: calc(var(--base-size) * var(--grow-counter));
    content: counter(numered, decimal-leading-zero);
    font-size: var(--adjusted-font-size);
    line-height: var(--font-size);
    color: var(--background);
    background-color: var(--emphasis-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--font-size) * 3);
    aspect-ratio: 1;
    border-radius: 100vh;
    margin-bottom: var(--row-gap);
}

.basic-box > figure:first-child
{
    aspect-ratio: 4 / 2;
    margin: calc(var(--gap) * -1);
    margin-bottom: unset;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
}

.basic-box > figure:first-child img,
.basic-box > figure:first-child::before
{
    border-radius: var(--radius) var(--radius) 0 0;
}

.simple-graph-list
{
    --grow: 1;
    --padding: calc(var(--font-size) * .5);
}

.simple-graph-list.done
{
    --icon: '\76';
}

.simple-graph-list > li
{
    --font-size: calc(var(--base-size) * var(--grow));
    padding: var(--padding) 0;
    display: flex;
    gap: calc(var(--gap) * .5);
    align-items: flex-start;
    color: var(--field-color);
}

.simple-graph-list > li::after
{
    content: '';
    opacity: .4;
    border-bottom: 1px solid var(--background);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.simple-graph-list > li::before
{
    --mark-size: calc(var(--font-size) * .666667);
    content: var(--icon, '\25');
    font-size: var(--mark-size);
    font-family:var(--vg-ns);
    width: calc(var(--mark-size) * 2);
    margin: calc(var(--mark-size) * .5) 0;
    aspect-ratio: 1;
    background-color: var(--background);
    color: var(--text-color);
    display: inline-flex;
    line-height: var(--font-size);
    align-items: center;
    justify-content: center;
    border-radius: var(--font-size);
    flex-shrink: 0;
}

.simple-graph-list > li:last-of-type::after
{
    display: none;
}


.bubble-list
{
    --grow: 1.33333334;
    gap: var(--gap);
    padding: var(--padding);
    display: flex;
    flex-wrap: wrap;
    gap: var(--base-size);
    justify-content: center;
}

.bubble-list > li
{
    --font-size: calc(var(--base-size) * var(--grow));
    line-height: calc(var(--line-height) * 2);
    background-color: var(--hardlight);
    padding: 0 calc(var(--font-size) * 2.5);
    display: block;
    border-radius: 100vw;
    flex-shrink: 0;
    color: var(--text-color);
}

input[type=text], input[type=email], textarea
{
    background-color: var(--hardlight);
    border-radius: calc(var(--base-size) * 1.5);
    font-weight: var(--f-medium);
    padding: calc(var(--base-size) * .5) calc(var(--base-size) * 2);
    width: 100%;
    box-sizing: border-box;
}

.form-message
{
    background-color: var(--background);
    color: var(--text-color);
    line-height: calc(var(--line-height) * 1.5);
    padding: 0 var(--base-size);
    border-radius: var(--base-size);
    margin-bottom: calc(var(--base-size) * -2);
    max-height: 0;
    transition: all .5s var(--base-easing);
}

.form-message.show
{
    margin-bottom: 0;
    max-height: 100px;
}


/* ==== TEXT ==== */
.p02
{
    --grow: 1.33333334;
}

.t01
{
    --grow: 8;
    font-weight: var(--f-light);
}

.t02
{
    --grow: 5.33333;
    --text-color: var(--title-color);
    font-weight: var(--f-light);
}

.t03
{
    --grow: 2;
}

.t04
{
    --grow: 1.33334334;
    font-weight: var(--f-semibold);
}

.disp-01
{
    --grow: 5.33333;
    --text-color: var(--title-color);
    font-weight: 100;
}

.disp-02
{
    --grow: 2;
    font-weight: var(--f-regular);
}

.disp-03
{
    font-weight: var(--f-light);
    --grow: 2;
}

.underline{
    text-decoration: underline;
}

.tagimage
{
    display: inline-block;
    aspect-ratio: 3 / 1;
    height: calc(var(--font-size) + 4px);
    object-fit: cover;
    border-radius: 100vw;
    margin-bottom: -2px;
}

/* ==== STRUCTURES ==== */

body
{
    background-color: var(--background);
}


.button.whatsapp
{
    position: fixed;
    z-index: 100;
    bottom: var(--row-gap);
    right: var(--row-gap);
}


@media (max-width: 1280px) {
    .t01
    {
        --grow: 5.33333;
    }
    
    .t02
    {
        --grow: 4;

    }
    
    .disp-01
    {
        --grow: 4;
    }
    
    .disp-03
    {
        --grow: 1.33333334;
    }

    .numered-box
    {
        --num-size: 1;
        --padding: 1;
    }
}

@media (max-width: 960px) {
    .t01
    {
        --grow: 4;
    }   

    .t02
    {
        --grow: 2.66666667;
    }

    .disp-01
    {
        --grow: 2.66666667;
    }

    .disp-02
    {
        --grow: 1.33333334;
    }

    .solution-card::before
    {
        --font-size: calc(var(--gap) * 2);
    }

    .graph-list.marker > ul > li::after
    {
        display: none;
    }
}

@media (max-width: 480px) {
    .t01
    {
        --grow: 2.66666667;
    }

    .card-dial
    {
        --text-opacity: .2;
        background-color: var(--text-color);
    }

    .card-dial p
    {
        --text-color: var(--background);
        --text-opacity: 1;
    }
}