:root {
    --fator-dark: 1;
    --bg-desafio: #eaf1f8;
    --text-desafio: #2d4161;
    --link-desafio: #b9568c;
}

body.portfolio {
    background-color: #05142b88;
    color: #d9e4ee;
}

.chart-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    height: 400px;
    max-height: 50vh;
}

.active-case {
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border-color: #3b82f6;
}

section {
    text-align: center;
    background-color: #071a2fe4;
    position: relative;
}

section:first-of-type {
    background: transparent url("../site/assets/tip-go-down.svg") no-repeat center calc(100% - 1em);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    gap: 1rem;
    min-height: 75vh;
}

.portfolio section:first-of-type {
    background-color: #071a2fe4;
    padding-top: 5em;
}

div.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: -1;
}

.color1 {
    color: #97d2da;
}

.color2 {
    color: #edb0e4;
}

section:first-of-type h1 {
    font-size: clamp(1rem, 0.75rem + 4vw, 3.5rem);
    font-weight: 800;
    max-width: clamp(40rem, calc(38rem + 10%), 90%);
}

section:first-of-type p {
    font-size: clamp(0.875rem, 0.75rem + 1vw, 1.25rem);
    max-width: clamp(36rem, calc(30rem + 10%), 90%);
}

.emblema-ciclos-de-ux {
    width: calc(6rem + 12vw);
    height: calc(6rem + 12vw);
    margin: -2rem;
}

.padrao {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.padrao h2 {
    font-size: clamp(1rem, 0.85rem + 2vw, 2.5rem);
    color: #90e0ff;
    font-weight: 800;
}

.padrao>ul {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.padrao>ul li {
    list-style: none;
    flex: 1 1 calc(20% - 0.4rem);
    background-color: #23477660;
    border-radius: 0.5em;
    padding: 1rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    position: relative;
}

.padrao#cases>ul li {
    flex: 0 0 calc(33.333% - 1.333rem);
    overflow: hidden;
}

@media (max-width: 768px) {
    body.desafio .padrao li,
    .padrao#cases>ul li {
        flex-basis: calc(50% - 1rem);
    }
}

@media (max-width: 540px) {
    body.desafio .padrao li,
    .padrao#cases>ul li {
        flex-basis: 100%;
    }
}

.padrao li strong {
    font-size: 2.5rem;
    font-weight: 900;
    color: #dda6de;
}

.padrao li h4 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #a1ebf5;
}

.emoji {
    font-size: 3rem;
    display: block;
    text-align: center;
}

.padrao li:hover>.emoji {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.padrao li>img {
    width: calc(100% + 2rem);
    height: 10
    

    
    
    em;
    object-fit: cover;
    margin: -1rem -1rem 1rem -1rem;
    border-radius: 0.5em 0.5em 0 0;
    opacity: 0.85;
}

.padrao li:hover>img {
    opacity: 1;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.padrao ul li svg,
.padrao ul li img[src*=".svg"] {
    width: 6rem;
    height: 6rem;
    margin: 0 auto;
    color: #dda6de;
}

.padrao details {
    color: #ffffffc5;
    max-width: 42rem;
}

.padrao details::details-content {
    opacity: 0;
    transition: opacity .5s ease;
    font-weight: 300;
}

.padrao details[open]::details-content {
    opacity: 1;
}

.padrao li p {
    font-size: 0.96rem;
    line-height: 1.3;
}

.padrao details p {
    margin: 0.75em 0;
}

.padrao summary {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    list-style: none;
    cursor: pointer;
}

.padrao summary::marker {
    display: none;
}

.padrao details summary::after {
    content: 'Saiba mais ▾';
    font-size: 1rem;
    font-weight: 700;
    color: #a1ebf5;
    display: block;
    background-color: #90e0ff;
    color: #05142b;
    width: fit-content;
    padding: 0.35rem 1.5rem;
    border-radius: 10em;
    margin: 0 auto 0 auto;
    opacity: 0;
    max-height: 0;
    transition: all 0.3s ease;
}

.padrao details:not([open]) summary::after {
    content: 'Saiba mais ▾';
    font-size: 1rem;
    font-weight: 700;
    color: #a1ebf5;
    display: block;
    background-color: #90e0ff;
    color: #05142b;
    width: fit-content;
    padding: 0.35rem 1.5rem;
    border-radius: 10em;
    margin: 1rem auto 0 auto;
    opacity: 0.6;
    max-height: 2em;
    transition: all 0.3s ease;
}

.padrao details:not([open]) summary:hover::after {
    opacity: 1;
    transition: all 0.3s ease;
}

.padrao details ul {
    margin-left: 1.5rem;
    display: inline-block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}

.padrao details ul li {
    display: list-item;
    margin-bottom: 0.5rem;
    text-align: left;
}

.project-tags {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    width: 100%;
    height: 5em;
    background: linear-gradient(180deg, #060c1961, transparent);
    align-items: flex-start;
    padding: 0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tag {
    background-color: #014487;
    color: #e7f0f4;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 0.4em;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
}

.tag+.tag {
    background-color: #162636;
    font-weight: 300;
    font-style: italic;
}

#cases li {
    text-align: left;
}

#cases a.button {
    margin-top: auto;
    border-radius: 0.25em;
}

dl {
    font-size: 0.9rem;
    margin: 0.5em 0;
}

dt {
    font-weight: 600;
    color: #90e0ffa2;
}

dd {
    margin: 0.25rem 0 0.75rem 0;
    font-weight: 300;
    color: #ffffff;
}

.button:hover {
    background-color: #b91589;
    transition: all 0.3s ease;
}

ul.breadcrumb {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 1rem 0 0 1rem;
    font-size: 0.85rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25em;
}

ul.breadcrumb li {
    display: flex;
    align-items: center;
}

ul.breadcrumb li:not(:last-child)::after {
    content: '›';
    margin: 0 0 0 0.5rem;
    opacity: 0.75;
}

ul.breadcrumb a {
    color: #90e0ff;
    text-decoration: none;
}


body.desafio {
    background-color: var(--bg-desafio);
}

body.desafio section {
    background-color: transparent;
    color: var(--text-desafio);
}

section.capa {
    height: auto;
    justify-content: flex-start;
    padding-top: 6rem;
    z-index: 0;
    min-height: 60vh;
    border-bottom: var(--link-desafio) 4px solid;
}

section.capa::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, var(--bg-desafio), hsl(from var(--bg-desafio) h s l / 0.4));
    z-index: -1;
}

.imagem-principal {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
    z-index: -2;
    mix-blend-mode: multiply;
    opacity: 0.75;
    filter: blur(2px) brightness(0.75);
}

body.desafio>header nav img {
    filter: brightness(0.75) contrast(1.25);
}

body.desafio>header a {
    color: #05142b;
}

body.desafio ul.breadcrumb {
    margin-bottom: 2rem;
}

body.desafio ul.breadcrumb a {
    color: var(--link-desafio);
}

body.desafio section.capa h1 {
    color: hsl(from var(--text-desafio) h calc(s + 20) calc(l + 5) / 1);
}

body.desafio section.capa p {
    background-color: hsl(from var(--link-desafio) h calc(s + 5) calc(l - 10) / 1);
    color: var(--bg-desafio);
    border-radius: 0.5em;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

body.desafio section.capa .tag {
    background-color: #1352b7;
    color: #e7f0f4;
    font-weight: 600;
}

body.desafio .padrao h2 {
    color: var(--link-desafio);
    margin: 0 auto;
    flex: 1 0 100%;
}

body.desafio .padrao h3 {
    flex: 1 0 100%;
    text-align: left;
}

body.desafio details {
    color: var(--text-desafio);
}

body.desafio .padrao li {
    background-color: hsl(from var(--bg-desafio) h s calc(l - 5) / 1);
}

body.desafio .padrao li strong {
    color: var(--link-desafio);
}

body.desafio .padrao li h4 {
    color: hsl(from var(--text-desafio) h 45 40 / 1)
}

body.desafio dl {
    text-align: left;
}

body.desafio dt {
    color: hsl(from var(--link-desafio) h calc(s - 10) calc(l + 5) / 1);
}

body.desafio dd {
    color: hsl(from var(--text-desafio) h s calc(l - 5) / 1);
    font-size: 1rem;
}

#equipe {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem 3rem;
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    justify-content: flex-start;
    background-color: hsl(from var(--bg-desafio) h s calc(l - 5) / 1);
}

#equipe dl {
    flex: 1;
}

#o-processo>ul {
    flex-flow: column nowrap;
}

ul.personas {
    margin: 0 auto;
    gap: 1rem;
    justify-content: center;
}

ul.personas li {
    flex: 0 1 30%;
}

.padrao .personas img {
    width: calc(10% + 5rem);
    height: auto;
    margin: 0 auto 0.5em auto;
    border-radius: 30rem;
    box-shadow: 0 0 0 0.5rem var(--bg-desafio);
}

.personas b {
    color: hsl(from var(--text-desafio) h calc(s + 10) calc(l + 20) / 1);
}

.personas p {
    color: hsl(from var(--text-desafio) h s calc(l + 25) / 1);
    font-weight: 500;
}

blockquote {
    font-size: 1.75em;
    font-weight: 300;
    font-style: italic;
    max-width: 48rem;
    margin: 2rem auto;
    color: hsl(from var(--text-desafio) h calc(s + 10) calc(l + 20) / 1);
    padding: 1rem 2rem;
}

blockquote::before {
    content: '“';
    font-size: 3rem;
    font-weight: 700;
    line-height: 1rem;
    vertical-align: middle;
    margin-right: 0.25rem;
    color: hsl(from var(--link-desafio) h calc(s + 10) calc(l + 5) / 1);
}

blockquote::after {
    content: '”';
    font-size: 3rem;
    font-weight: 700;
    line-height: 1rem;
    vertical-align: bottom;
    margin-left: 0.25rem;
    color: hsl(from var(--link-desafio) h calc(s + 10) calc(l + 5) / 1);
}

#navegacao {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 2rem 0;
    font-size: 0.7em;
    padding-top: 0rem;
    margin-top: 0rem;
}

#navegacao a.button {
    display: flex;
    gap: 0.5rem;
}

iframe {
    border: none;
    width: 100%;
    height: 60vh;
    max-height: 80vh;
    border-radius: 0.5em;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

figure.galeria {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}

figure.galeria img {
    flex: 0 0 16em;
    width: 16em;
    height: 10em;
    border-radius: 0.25em;
}
figure.blocos {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 0;
}
figure.blocos img {
    flex: 1 1 20em;
    width: 20%;
    height: auto;
    border-radius: 0.25em;
}
figure.blocos img:nth-child(1) {
    flex: 2 1 40em;
}