/* Variables */

:root{

    --main-color: #FD131A;
    --bright-accent-color: #000000;
    --dark-accent-color: #000000;

}

/* Fonts */

@font-face{

    src: url("../src/fonts/Akrobat/Akrobat-Black.otf");
    font-family: 'Akrobat';
    font-weight: 900;

}

/* Imports */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&family=Titan+One&display=swap");

/* Default Behaviour */

body, html{scroll-behavior: smooth;}

h3{font-size: 3rem; text-transform: uppercase; font-weight: 900; color: var(--dark-accent-color);}
h4{color: #4e4d4d; font-size: 1.25rem;}
h4 strong{font-weight: 900;}

a{color: inherit; text-decoration: none;}
img, svg{max-width: 100%; vertical-align: bottom;}

*{margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Montserrat, "Open Sans", "Helvetica Neue", sans-serif;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

.row,
.column{display: flex; gap: inherit; align-items: inherit;}
.row{flex-direction: row;}
.column{flex-direction: column;}

/* Pulsate */

@keyframes pulsate{

    0%{transform: scale(1);}
    45%{transform: scale(1.05);}
    55%{transform: scale(1.05);}
    100%{transform: scale(1);}

}

a, button{animation: pulsate 1s ease infinite;}

/* Cookie Alert */

#cookies-alert{top: 0; left: 0; width: 100%; background-color: #243563; color: #fff; font-size: 14px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 50px; border-bottom: 1px solid #fff;}
#cookies-alert .buttons button{border: none; outline: unset; cursor: pointer; font-size: 14px; border-radius: 10px;}
#cookies-alert .buttons .btn-accept{position: relative; background-color: #fff; color: #243563; padding: 10px 20px; font-weight: 600; -webkit-transition: 0.3s; transition: 0.3s;}
#cookies-alert .buttons .btn-accept:hover{-webkit-transform: scale(1.05); transform: scale(1.05);}
#cookies-alert .buttons .btn-decline{background-color: #243563; color: #fff; padding: 9px 18px; border: 2px solid #fff;}

/* Header */

header#mainHeader{padding: 15px 0; background-color: var(--main-color);}
header#mainHeader .content{align-items: center; display: grid; grid-template-areas: "logo nav phone"; grid-template-columns: 1fr repeat(2, max-content); gap: 50px;}
header#mainHeader .content > .column{text-transform: uppercase; color: #fff; align-items: center; gap: 5px 10px; margin-left: auto;}
header#mainHeader .content > .column strong{font-size: 2rem;}
header#mainHeader .content > .column a.row{align-items: center; gap: 5px; padding: 10px 20px; border: 2px solid;border-radius: 25px;}
header#mainHeader .content > .column a.row span{font-size: 3rem; font-weight: 900; font-family: 'Akrobat';}
header#mainHeader .content > .column:nth-child(2) .ligarnophone i{font-size: 45px; height: 45px;}
header#mainHeader .content nav{gap: 20px; text-transform: uppercase; color: #fff; font-weight: bold;}
header#mainHeader img.logo{width: 130px;}
header#mainHeader .content .title-loja{margin-right: auto; grid-area: logo;}
header#mainHeader .content .title-loja h1{display: block;font-weight: 600;font-size: 1rem;color: #fff;text-align: center;padding-top: 5px;}

/* Products Article */

section#products{padding: 50px 0;}
section#products .content{flex-wrap: wrap; gap: 50px;}

section#products wm-slider{--row-count: 2;}

section#products article{color: #fff; text-transform: uppercase; font-weight: 900; gap: 10px; flex: 0 0 calc(25% - 50px*3/4);}
section#products article > .column{gap: 10px; align-items: center; background-image: linear-gradient(180deg, transparent 30%, var(--main-color) 70%, var(--main-color)); padding: 0 20px; border-bottom-right-radius: 80px;}
section#products article header{position: relative;}
section#products article header .column{position: absolute; top: 9.6%; right: -18%; left: 80%; bottom: 32.4%; justify-content: space-between;}
section#products article h5{font-size: 2.25rem; background-color: var(--bright-accent-color); padding: 5px 0; text-align: center; font-family: 'Akrobat';}
section#products article strong{font-size: 8rem; font-family: Akrobat; color: #ffffff;}
section#products article strong:after{content: ',00'; font-size: 1.7rem;}
section#products article a{background-color: #46c036; padding: 10px 0; text-align: center; border-top-right-radius: 20px; font-size: 1.25rem; position: relative;}
section#products article a:before,
section#products article a:after{content: ''; position: absolute; top: 0; left: 6%; width: 44%; height: 90%; background-color: rgba(0 0 0 / 30%); filter: blur(5px); transform-origin: top right; transform: skewY(-7deg); z-index: -1;}
section#products article a:after{transform-origin: top left; left: 50%; transform: skewY(7deg);}

@media(min-width: 516px){

    section#products wm-slider{--row-count: 8; overflow: visible; pointer-events: none;}
    section#products wm-slider wm-slider-mat{flex-wrap: wrap; gap: 50px; cursor: initial;}
    section#products wm-slider wm-slider-row{flex: 0 0 calc(25% - 50px*3/4);}
    section#products article a{pointer-events: initial;}

}

/* UX */

section#ux{background-color: var(--bright-accent-color); padding: 40px 0 50px; position: relative;}
section#ux .content{gap: 50px;}
section#ux header{gap: 0;}
section#ux h3 {display: flex; align-items: center; gap: 1em; color: #fff;}
section#ux h3 img { width: 300px; filter: drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff); user-select: none;}
section#ux h4{color: #fff;}
section#ux wm-slider{--row-count: 3.3; position: relative;}
section#ux wm-slider wm-slider-mat{margin: 0 20px;}
section#ux wm-slider wm-slider-row{padding: 0 15px;}
section#ux wm-slider wm-slider-controls{position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; right: 0; pointer-events: none;}
section#ux wm-slider wm-slider-trigger{height: 100%; display: flex; align-items: center; justify-content: center; width: 30px; background-color: var(--bright-accent-color); color: #fff; user-select: none; pointer-events: all;}

section#ux article{padding: 10px 15px; background-color: #e9e9e9; border-radius: 10px; border: 2px solid #fff; display: grid; grid-template-areas: "img name" "img rating" "text text"; grid-template-columns: min-content 1fr; gap: 5px 20px; width: clamp(0px, 370px, 100%); margin: auto;}
section#ux article img{grid-area: img;}
section#ux article h5{grid-area: name; font-size: 1.125rem;}
section#ux article p{grid-area: text; padding-top: 10px; border-top: 1px solid;}
section#ux article .rating{grid-area: rating; color: #efcb2e;}

/* Specialized */

section#specialized{padding: 40px 0 60px; background-color: var(--main-color); position: relative;}
section#specialized .content{gap: 20px; margin-bottom: 50px;}
section#specialized .content > p{color: #fff; font-size: 1.25rem;}
section#specialized .row{align-items: stretch;}
section#specialized header{gap: 0;}
section#specialized header :is(h3, h4){color: #fff;}
section#specialized article{border-radius: 25px; overflow: hidden; gap: 0; flex: 0 1 100%;}
section#specialized article h5{background-color: var(--dark-accent-color); color: #fff; text-transform: uppercase; font-weight: 900; font-size: 1.25rem; text-align: center; padding: 5px 0;}
section#specialized article img{height: 220px; object-fit: cover;}
section#specialized article p{padding: 20px 25px; background-color: #fff; line-height: 1.5em; color: #393939; flex: 1 1 auto; display: flex; align-items: center;}

section#specialized img.flare{margin: 50px 0;}

/* Services */

section#services header :is(h3, h4){color: #fff;}
section#services .content{gap: 50px;}
section#services .grid{display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; color: #fff; font-size: 1.125rem; gap: 15px;}
section#services .grid p.row{gap: 5px; align-items: center;}

/* Closest */

section#closest{padding: 50px 0; background-color: #fff;}
section#closest .content{gap: 50px;}
section#closest h3{color: var(--bright-accent-color);}
section#closest h3 span{color: var(--main-color);}
section#closest a{cursor: pointer;}

section#closest dialog#locationsModalTemplate[open]{width: 90vw; max-width: 1000px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; padding: 45px 30px 30px; background-color: var(--main-color); display: flex; flex-direction: column; gap: 30px; text-align: center; max-height: 80vh; overflow: auto; color: var(--dark-accent-color);}
section#closest dialog#locationsModalTemplate[open] a[data-dialog]{position: absolute; width: 30px; height: 30px; top: 20px; right: 10px;}
section#closest dialog#locationsModalTemplate[open] a[data-dialog]:before,
section#closest dialog#locationsModalTemplate[open] a[data-dialog]:after{content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 2px; height: 2px; background-color: var(--dark-accent-color); transform: rotate(45deg); z-index: 10;}
section#closest dialog#locationsModalTemplate[open] a[data-dialog]:after{transform: rotate(-45deg);}
section#closest dialog#locationsModalTemplate::backdrop{background-color: rgba(0 0 0 / 70%); cursor: pointer;}
section#closest dialog#locationsModalTemplate h5{font-size: 1.5rem; text-transform: uppercase;}
section#closest dialog#locationsModalTemplate a{font-size: 1.125rem; text-align: left; gap: 5px; align-items: initial;}
section#closest dialog#locationsModalTemplate a img{width: 300px; aspect-ratio: 4/2; background-color: #ddd; border-radius: 5px;}
section#closest .grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; align-items: flex-start; gap: 5px 20px;}
section#closest .grid section a{font-size: 1.125rem; display: flex; text-align: left; padding: 12px 24px; color: #fff; align-items: center; gap: 6px; justify-content: center; background-color: #25D366; line-height: 1; border-radius: 6px; margin: 10px auto;}
section#closest .grid section a i{height: 18px;}
section#closest .grid section iframe{aspect-ratio: 3/2; width: 100%; border: 0;}

/* Footer */

footer#mainFooter{padding: 40px 0 20px; display: grid; grid-template-columns: 1fr 2fr; align-items: center;}
footer#mainFooter p{justify-self: center;}
footer#mainFooter .row{padding: 10px 0; background-color: var(--main-color); color: #26439a; font-weight: 700; justify-content: center; gap: 40px; align-items: center;}
footer#mainFooter a{animation: initial;}

/* Floating Menu */

section#floatingMenu{position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; background-color: var(--main-color); padding: 10px; display: grid; grid-template-columns: repeat(3, 100px); gap: 5px; align-items: center; justify-content: center; font-weight: 900; color: var(--dark-accent-color); text-align: center; font-size: .8rem;}
section#floatingMenu a i{width: 30px; height: 30px; display: flex; place: center;}

/* Responsive */

@media(min-width: 516px){

    .mobile{display: none !important;}

}

@media(max-width: 515px){

    .desktop{display: none !important;}

    #cookies-alert{padding: 10px; flex-direction: column; gap: 10px;}

    h3{font-size: 1.9rem;}
    h4{font-size: 1.3rem;}

    header#mainHeader{padding: 20px 0;}
    header#mainHeader .content{grid-template-areas: "logo phone""logo zap"; grid-template-columns: 1fr 1.2fr; gap: 20px;}
    header#mainHeader img.logo{grid-area: logo; width: 100%; margin: auto;}
    header#mainHeader .content .zap{grid-area: zap; font-size: 0.7rem; gap: 10px; justify-content: center; margin: auto;}
    header#mainHeader .content .phone{grid-area: phone; margin-left: initial; gap: 0;}
    header#mainHeader .content .phone a.row i{width: 20px;}
    header#mainHeader .content > .column:nth-child(2) .ligarnophone i{font-size: 20px; height: 20px;}
    header#mainHeader .content > .column strong{font-size: 0.7rem;}
    header#mainHeader .content > .column a.row{padding: 10px;}
    header#mainHeader .content > .column a.row span{font-size: 1.3rem;}

    section#products .content{gap: 50px 20px;}
    section#products article{flex: 0 0 calc(50% - 10px);}
    section#products article header h5{font-size: 1.25rem;}
    section#products article strong{font-size: 4rem;}
    section#products article > .column{border-bottom-right-radius: 60px; padding: 0 10px;}
    section#products article a{font-size: 0.7rem;}

    section#ux header h3{font-size: 1.4rem;}
    section#ux header h3 img{width: 180px;}
    section#ux header h4{font-size: 0.7rem;}
    section#ux{padding: 20px 0 30px;}
    section#ux .content{gap: 30px;}
    section#ux wm-slider {--row-count: 1.3;}

    section#specialized header{gap: 0; text-align: center;}
    section#specialized .content{text-align: center;}
    section#specialized .content > p{font-size: 1rem;}
    section#specialized > .content > .row{flex-direction: column;}

    section#services header h4 strong{display: block;}
    section#services .grid{grid-auto-flow: row; gap: 10px;}

    section#closest h3{text-align: center;}
    section#closest dialog#locationsModalTemplate[open]{padding: 45px 15px 15px;}
    section#closest .grid{grid-template-columns: minmax(0, 1fr); gap: 20px;}
    section#closest .grid section{gap: 5px;}

    footer#mainFooter{font-size: .5rem; padding: 0px}

}

.hide-cookies-alert {
    display: none !important;
}