:root {
    --backdrop: hsl(0 0% 60% / 0.12);
    --radius: 8;
    --border: 3;
    --border-mad: 3;
    --backup-border: var(--backdrop);
    --size: 200;
}

article:first-of-type {
    --base: 80;
    --spread: 500;
    --outer: 1;
}

article:last-of-type {
    --outer: 1;
    --base: 220;
    --spread: 200;
}








article {
    aspect-ratio: 4 / 4;
    border-radius: calc(var(--radius) * 1px);
    /*width: 260px;*/
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    box-shadow: 0 1rem 2rem -1rem black;
    padding: 1rem;
    display: grid;
    gap: 10px;
    backdrop-filter: blur(calc(var(--cardblur, 5) * 1px));
    position: relative;
}

@media screen and (max-width: 920px) {
    article {
        width: 200px;
        margin: 0 auto;
    }
}


/* Glow specific styles */
[data-glow] {
    --border-size: calc(var(--border, 2) * 1px);
    --spotlight-size: calc(var(--size, 150) * 1px);
    /*--hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));*/
    background-image: radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
            hsl(var(--hue, 86) calc(var(--saturation, 54) * 1%) calc(var(--lightness, 50.2%) * 1%) / var(--bg-spot-opacity, 0.1)), transparent);


    background-color: var(--backdrop, transparent);
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-position: 50% 50%;
    background-attachment: fixed;
    border: var(--border-size) solid var(--backup-border);
    position: relative;
    touch-action: none;
}

[data-glow]::before,
[data-glow]::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: calc(var(--radius) * 1px);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
}

/* This is the emphasis light */
[data-glow]::before {
    background-image: radial-gradient(calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
            hsl(var(--hue, 120) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100%);
    filter: brightness(2);
}

/* This is the spotlight */
[data-glow]::after {
    background-image: radial-gradient(calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
            hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%);
}

[data-glow] [data-glow] {
    position: absolute;
    inset: 0;
    will-change: filter;
    opacity: var(--outer, 1);
}

[data-glow]>[data-glow] {
    border-radius: calc(var(--radius) * 1px);
    border-width: calc(var(--border-size) * 20);
    filter: blur(calc(var(--border-size) * 10));
    background: none;
    pointer-events: none;
    position: relative;
}

[data-glow]>[data-glow]::before {
    inset: -10px;
    border-width: 10px;
}

[data-glow] [data-glow] {
    border: none;
}

[data-glow] :is(a, button) {
    border-radius: calc(var(--radius) * 1px);
    border: var(--border-size) solid transparent;
}

[data-glow] :is(a, button) [data-glow] {
    background: none;
}

[data-glow] :is(a, button) [data-glow]::before {
    inset: calc(var(--border-size) * -1);
    border-width: calc(var(--border-size) * 1);
}
.solucoes .itens .item {    
    border-radius: 8px;
    display: flex;
    width: 100%;
    height: 100%;    
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    gap: 20px;    
}
.solucoes .itens .item h3 {
    color: #ffffff;
    font-size: var(--size-h3-title);
    text-align: center;  
}









/* Mandala */

article.mand {    
    /*border-radius: calc(var(--radius) * 1px);*/
    border-radius: 50%;
    width: 516px; 
    
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* box-shadow: 0 1rem 2rem -1rem black; */
    box-shadow: none;
    padding: 1rem;
    display: grid;
    gap: 10px;
    backdrop-filter: blur(calc(var(--cardblur, 5) * 1px));
    position: relative;
}





/* Glow specific styles */
[data-glow-mand] {
    --border-size: calc(var(--border-mad, 2) * 1px);
    --spotlight-size: calc(var(--size, 150) * 1px);
    /*--hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));*/
    background-image: radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
            hsl(var(--hue, 86) calc(var(--saturation, 54) * 1%) calc(var(--lightness, 50.2%) * 1%) / var(--bg-spot-opacity, 0.1)), transparent);


    background-color: var(--backdrop, transparent);
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-position: 50% 50%;
    background-attachment: fixed;
    border: var(--border-size) solid var(--backup-border);
    position: relative;
    touch-action: none;
}

[data-glow-mand]::before,
[data-glow-mand]::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: calc(var(--border-size) * -1);
    border: var(--border-size) solid transparent;
    border-radius: calc(var(--radius) * 50px);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
}

/* This is the emphasis light */
[data-glow-mand]::before {
    background-image: radial-gradient(calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
            hsl(var(--hue, 120) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100%);
    filter: brightness(2);
}

/* This is the spotlight */
[data-glow-mand]::after {
    background-image: radial-gradient(calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
            hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%);
}

[data-glow-mand] [data-glow-mand] {
    position: absolute;
    inset: 0;
    will-change: filter;
    opacity: var(--outer, 1);
}

[data-glow-mand]>[data-glow-mand] {
    border-radius: calc(var(--radius) * 1px);
    border-width: calc(var(--border-size) * 20);
    filter: blur(calc(var(--border-size) * 10));
    background: none;
    pointer-events: none;
    position: relative;
}

[data-glow-mand]>[data-glow-mand]::before {
    inset: -10px;
    border-width: 10px;
}

[data-glow-mand] [data-glow-mand] {
    border: none;
}

[data-glow-mand] :is(a, button) {
    border-radius: calc(var(--radius) * 1px);
    border: var(--border-size) solid transparent;
}

[data-glow-mand] :is(a, button) [data-glow-mand] {
    background: none;
}

[data-glow-mand] :is(a, button) [data-glow-mand]::before {
    inset: calc(var(--border-size) * -1);
    border-width: calc(var(--border-size) * 1);
}




.area_mandala {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 516px; 
    height: 516px;
    border-radius: 50%;
}
.area_mandala .linhas {
    position: absolute;
    width: 508px; 
    height: 507px;
    border-radius: 50%;
    top: 3.7px;
    left: 4px;
    z-index: 1;
    animation: expand 4s infinite ease-in-out;
    background: radial-gradient(circle at center, rgba(42, 247, 23, 0.856) 10%,  rgba(252, 255, 252, 0.856) 60%,  rgba(42, 247, 23, 0.856) 100%, transparent 200%);
}
.area_mandala .mandala {
    position: absolute;
    width: 510px; 
    height: 510px;
    top: 3px;
    left: 3px;
    z-index: 2;
}
.area_mandala .mandala img {
    max-width: 100%;
}
.area_mandala .central {
    position: absolute;
    width: 516px; 
    height: 516px;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.area_mandala .central img {
    width: 178px;
}

@keyframes expand {
  0%   { 
    transform: scale(0); opacity: 0.7;
    
 }
  50%  { 
    transform: scale(1); opacity: 1;
    
 }
  100% { opacity: 0; }
}



@media screen and (max-width: 920px) {
    article.mand{
        width: 300px;
    }
    .area_mandala {
        width: 303px;
        height: 303px;
    }
    .area_mandala .mandala {
        width: 295px;        
        top: 4.4px;
        left: 4px;
    }
    .area_mandala .linhas
    {
        width: 296px;
        height: 296px;
    }
    .area_mandala .central {
        width: 300px;
        height: 300px;
        top: 1px;
        left:2px;
    }
    .area_mandala .central img {
        max-width: 34%;
    }

    .area_mandala .linhas {
        width: 293px;
        height: 293px;
        top: 4px;
        left: 5px;
    }
}