/*
Theme Name: Softfocus
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Soluções
--------------------------------------------
*/


section.solucoes { margin-bottom: calc(var(--espaco) * 2); }

section.solucoes a[data-ancora] { position: absolute; display: block; height: 1px; }

section.solucoes header h3 {
    font-size: var(--fs-500);
    font-weight: var(--fw-light);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: calc(var(--espaco) * 1.3);
}

section.solucoes .swiper.lista { 
    margin: 0 auto; 
    margin-bottom: calc(var(--espaco) * 1.4); 
    overflow: visible; 
}
section.solucoes .swiper.lista .swiper-wrapper { justify-content: space-between; }
section.solucoes .swiper.lista.centralizar { width: auto; }
section.solucoes .swiper.lista.centralizar .swiper-wrapper { justify-content: center; }
section.solucoes .swiper.lista .swiper-slide { cursor: pointer; }
section.solucoes .swiper.lista.centralizar .swiper-slide { padding: 0 calc(var(--espaco) * .5); }
section.solucoes .swiper.lista .swiper-slide img { height: 20px; cursor: pointer; }
section.solucoes .swiper.lista .swiper-slide-thumb-active:before { position: absolute; bottom: calc(var(--espaco) * -.2); left: 50%; width: 7px; height: 7px; margin: -3px; border-radius: 100%; background-color: var(--cor-100a); content: ""; }

section.solucoes .swiper.detalhes a.swiper-slide { display: flex; flex-direction: column; justify-content: space-between; width: 333px; height: 500px; padding: 200px 40px 40px; color: var(--cor-900); border-top: 7px solid var(--cor-fundo-claro); background-color: rgba(0,0,0,.08); background-size: 0; transition-property: background-color, padding-top; transition-duration: 200ms; transition-timing-function: ease-in-out; }
section.solucoes .swiper.detalhes a.swiper-slide:before { position: absolute; top: -7px; left: 20px; width: 14px; height: 14px; border-radius: 100%; background-color: var(--cor-900); content: ""; }
section.solucoes .swiper.detalhes a.swiper-slide-active { background-color: rgba(0,0,0,.12); }
section.solucoes .swiper.detalhes a.swiper-slide:hover,
section.solucoes .swiper.detalhes a.swiper-slide:focus { padding-top: 150px; background-color: rgba(0,0,0,.12); }
section.solucoes .swiper.detalhes .logotipo img { left: -90px; height: 60px; pointer-events: none; }
section.solucoes .swiper.detalhes a.swiper-slide .logotipo:before { position: absolute; top: -60px; left: -120px; width: 180px; height: 180px; border-radius: 100%; background-color: var(--cor-200); content: ""; transform: scale(0.001); transition: transform 200ms ease-in-out; }
section.solucoes .swiper.detalhes a.swiper-slide:hover .logotipo:before,
section.solucoes .swiper.detalhes a.swiper-slide:focus .logotipo:before { transform: scale(1); }
section.solucoes .swiper.detalhes .logotipo span { top: -24px; left: 15px; font-size: var(--fs-050); font-weight: var(--fw-semibold); opacity: 0; transition: opacity 200ms ease-in-out; }
/*section.solucoes .swiper.detalhes a.swiper-slide:hover .logotipo span,
section.solucoes .swiper.detalhes a.swiper-slide:focus .logotipo span { opacity: 1; }*/
section.solucoes .swiper.detalhes h4 { display: flex; align-items: flex-end; font-size: var(--fs-800); line-height: .9em; margin-bottom: 0; opacity: .5; transition: opacity 200ms ease-in-out; }
section.solucoes .swiper.detalhes a.swiper-slide-active h4,
section.solucoes .swiper.detalhes a.swiper-slide:hover h4,
section.solucoes .swiper.detalhes a.swiper-slide:focus h4 { opacity: 1; }
section.solucoes .swiper.detalhes h4 .destaque { margin-right: 10px; }
section.solucoes .swiper.detalhes h4 .destaque strong { font-weight: var(--fw-bold); }
section.solucoes .swiper.detalhes h4 .destaque span { font-weight: var(--fw-light); }
section.solucoes .swiper.detalhes h4 .complemento { font-size: var(--fs-050); font-weight: var(--fw-medium); line-height: 1.15em; }
section.solucoes .swiper.detalhes .cronometro { position: absolute; top: calc(var(--espaco) * .7); right: calc(var(--espaco) * .7); width: 30px; opacity: 0; transition: opacity 200ms ease-in-out; }
section.solucoes .swiper.detalhes .swiper-slide-active .cronometro { opacity: 1; }
section.solucoes .swiper.detalhes .cronometro svg { display: block; }
section.solucoes .swiper.detalhes .cronometro path { position: absolute; top: 0; left: 0; stroke-width: 4; stroke: var(--cor-900); fill: none; stroke-linecap: square; stroke-dasharray: 0, 100; transition: stroke-dasharray 1000ms linear; }
section.solucoes .swiper.detalhes .cronometro.concluida path { stroke: transparent; }
section.solucoes .swiper.detalhes .cronometro circle { stroke-width: .3; stroke: var(--cor-400); fill: none; }


@media screen and (min-width: 1024px) and (max-height: 790px) {

    /*section.solucoes a[data-ancora] { top: calc((var(--espaco) * 2.7) + 40px); }*/

    section.solucoes .swiper.detalhes a.swiper-slide { width: 290px; height: 400px; padding-top: 150px; }
    section.solucoes .swiper.detalhes a.swiper-slide:hover,
    section.solucoes .swiper.detalhes a.swiper-slide:focus { padding-top: 120px; }
    section.solucoes .swiper.detalhes .logotipo img { height: auto; }
    section.solucoes .swiper.detalhes h4 { flex-direction: column; align-items: flex-start; }
    section.solucoes .swiper.detalhes h4 .destaque { margin-right: 0; margin-bottom: 10px; }

}


@media screen and (min-width: 1024px) and (max-width: 1200px) {

    section.solucoes header h3 { margin-bottom: var(--espaco); }

    /*section.solucoes .swiper.lista { --limite: 100vw; width: calc(var(--limite) - (var(--espaco) * 3)); }
    section.solucoes .swiper.lista .swiper-slide img { height: 17px; }*/

}


@media screen and (min-width: 768px) {

    section.solucoes .swiper.lista .swiper-slide { width: auto !important; }

}


@media screen and (max-width: 767px) {

    section.solucoes a[data-ancora] { /*top: 20px;*/ }

    section.solucoes .swiper.lista { width: 50%; max-width: 360px; overflow: visible; }
    section.solucoes .swiper.lista .swiper-slide img { margin: 0 auto; }

    section.solucoes .swiper.detalhes { overflow: visible; }

    section.solucoes .swiper.detalhes a.swiper-slide { height: 350px; padding: 40px; }
    section.solucoes .swiper.detalhes a.swiper-slide:before { display: none; }
    section.solucoes .swiper.detalhes a.swiper-slide-active { background-color: rgba(0,0,0,.08); }
    section.solucoes .swiper.detalhes .logotipo img { left: auto; margin: 0 auto; }
    section.solucoes .swiper.detalhes a.swiper-slide .logotipo:before { left: 50%; margin-left: -90px; transform: scale(1); }

    section.solucoes .swiper.detalhes h4 { --fs-800: 48px; flex-direction: column; align-items: center; }
    section.solucoes .swiper.detalhes h4 .destaque { margin-right: 0px; margin-bottom: 10px; }
    section.solucoes .swiper.detalhes h4 .complemento { --fs-050: 14px; text-align: center; }

}