@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary-color: #FC6218;
  --secondary-color: #FFCC40;
  --tertiary-color: #DB3512;
  --quarternary-color: #111827;
  --quinary-color: #303030;
}

html {
  scroll-behavior: smooth;
}

html, body { background-color: #FFF; height: 100%; margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-size: 15px; color: #404040; }

@media (min-width: 992px) { 
  html, body { font-size: 17px; }
}

.banner { background-color: var(--primary-color); }

.hero { position: relative; background-image: url(../assets/images/background.jpg); background-repeat: no-repeat; background-position: center right; background-size: cover; color: white; overflow: hidden; min-height: 680px; }
.hero h1 { font-size: 2.4rem; font-family: 'Cooper'; color: white; text-align: center; }
.hero h1 span { text-transform: uppercase; font-size: 4.2rem; line-height: 3.5rem; color: white; font-family: 'Alberto'; }
.hero .brand { position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 100px), -50%); display: none; }

.img-brand-desktop { max-width: 325px; }
.img-brand { max-width: 180px; }

@media (min-width: 992px) { 
  .hero { background-position: center; }
  .hero h1 { font-size: 2.8rem; }
  .hero h1 span { font-size: 4.8rem; }
  .hero .brand { display: block; }
}

.historia { position: relative; overflow: hidden; background: url(../assets/images/bg-historia.webp) no-repeat center; background-size: cover; color: white; }
.historia h2 { font-size: 2.3rem; color: #FFF; border-bottom: 12px solid rgba(255,204,64,0.2); font-family: 'Cooper'; }
.historia h2 span { font-size: 5rem; line-height:4.5rem; text-transform: uppercase; color: var(--secondary-color); font-family: 'Alberto'; }
.historia .video { position: relative;  }
.historia p b { color: var(--secondary-color); }
.historia .video::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--secondary-color); border-radius: 10px; z-index: 1; transform: rotate(-183deg); }
.historia .ratio { position: relative; z-index: 2; }
.historia .ratio iframe { border-radius: 10px; }

.resenha { position: relative; overflow: hidden; background: url(../assets/images/bg-resenha.jpg) no-repeat center; background-size: cover; font-size: 1.1rem; }
.resenha p b { color: var(--tertiary-color); }

.resenha .video::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--secondary-color); border-radius: 10px; z-index: 1; transform: rotate(-183deg); }
.resenha .ratio { position: relative; z-index: 2; }
.resenha .ratio iframe { border-radius: 10px; }
.resenha .video { position: relative;  }
.resenha h2 { color: var(--tertiary-color); font-size: 1.2rem; font-weight: bold; font-style: italic; }
.resenha h3 { color: var(--tertiary-color); text-transform: uppercase; font-size: 4.2rem; line-height: 3.5rem; font-family: 'Alberto'; }
.resenha h3 .cedilha::after { color: var(--tertiary-color); }
.resenha h4 { color: var(--primary-color); font-size: 2.4rem; font-family: 'Cooper'; }


.produtos { position: relative; overflow: hidden; background: url(../assets/images/bg-produtos.jpg) no-repeat center fixed; background-size: cover; }
.produtos h2 { color: var(--tertiary-color); font-size: 1.2rem; font-family: "Montserrat", sans-serif; font-weight: 700; font-style: italic;  }
.produtos h3 { color: #444444; font-size: 2rem; font-family: 'Cooper'; } 
.produtos h3 span { display: block; color: var(--tertiary-color); font-family: 'Alberto'; font-size: 3.5rem; line-height: 3rem; }

@media (min-width: 992px) { 
  .produtos h3 { font-size: 2.6rem; }
  .produtos h3 span { font-size: 4.5rem; line-height: 4rem; }
}

.futebol { position: relative; overflow: hidden; background: url(../assets/images/bg-futebol.webp) no-repeat center fixed; background-size: cover; }
.futebol h2 { color: var(--secondary-color); font-size: 1.2rem; font-weight: 600;  }
.futebol h3 { color: white; font-size: 2.5rem; font-family: 'Cooper'; line-height: 2rem; }
.futebol h3 span { color: white; display: block; font-size: 5rem; line-height: 5rem; letter-spacing: 0.5rem; font-family: 'Alberto'; }
.futebol h3 span b { color: var(--secondary-color); }
.futebol .card {  background-color: transparent; border: none; }
.futebol .card .img { position: relative; transform-style: preserve-3d; transform: perspective(300px) rotateX(0deg) rotateY(0deg); }
.futebol .card .img .brand { position: absolute; bottom: 22%; left: 50%; transform: translateZ(50px) translateX(-50%); width: 130px; }
.futebol .card span { color: #FFF; font-size: 1rem; font-weight: 600; text-align: center; border-bottom: 4px solid var(--secondary-color); }


.embaixador { position: relative; background: url(../assets/images/bg-embaixador.webp) no-repeat center; background-size: cover; color: white; overflow: hidden; } 
.embaixador h2 { color: var(--secondary-color); font-size: 1.2rem; font-weight: bold; font-style: italic; }
.embaixador h3 { color: white; text-transform: uppercase; font-size: 3rem; line-height: 2.5rem; font-family: 'Alberto'; }
.embaixador h3 span { color: var(--secondary-color); }
.embaixador h4 { font-size: 1.8rem; color: white; font-family: 'Cooper'; }
.embaixador .box { position: relative; width: 100%; height: 400px; background: url(../assets/images/bg-ney.webp) no-repeat center; background-size: cover; border-radius: 20px; border: 3px solid var(--secondary-color); transform-style: preserve-3d; transform-style: preserve-3d; transform: perspective(300px) rotateX(0deg) rotateY(0deg);  box-shadow: 0px 25px 25px 10px rgba(0,0,0,0.2); }
.embaixador .foto { position: absolute; background: url(../assets/images/neymar.webp) no-repeat center; background-size: contain; bottom: 10px; left: 50%; width: 100%; height: 100%; transform: translateZ(100px) translateX(-50%); }


@media (min-width: 992px) { 
  .embaixador h3 { font-size: 4.5rem; line-height: 3.5rem; }
  .embaixador h4 { font-size: 2.2rem; }
}

.rede { position: relative; background: url(../assets/images/bg-rede.jpg) no-repeat center bottom var(--secondary-color); }
.rede::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; display: block; background: linear-gradient(90deg,rgba(219, 53, 18, 0.2) 0%, rgba(255, 255, 255, 0.0) 100%); pointer-events: none; z-index: 10; }
.rede::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; display: block; background: linear-gradient(-90deg,rgba(219, 53, 18, 0.2) 0%, rgba(255, 255, 255, 0.0) 100%); pointer-events: none; z-index: 10; }

.rede h2 { color: var(--tertiary-color); font-size: 1.2rem; font-weight: bold; font-style: italic; }
.rede h3 { color: var(--tertiary-color); text-transform: uppercase; font-size: 4.6rem; line-height: 4rem; font-family: 'Alberto'; }
.rede h3 .cedilha::after { color: var(--tertiary-color); }
.rede h4 { color: var(--primary-color); font-size: 2.4rem; line-height: 2rem; font-family: 'Cooper'; border-bottom: 12px solid rgba(219, 53, 18, 0.2); }
.rede .container { position: relative; z-index: 100; }

.rede .btn-instagram { position: relative; display: block; width: 100%; min-height: 150px; background-color: var(--secondary-color); border:2px solid var(--primary-color); border-radius: 12px; overflow: hidden; transition: 0.5s; } 
.rede .btn-instagram .img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: 0.5s; background-position: center; background-size: cover; }
.rede .btn-instagram:hover .img { transform: scale(1.1); transition: 0.5s; }

.rede .btn-instagram::after { content: ''; position: absolute; width: 100px; height: 40px; transition: 0.8s; display: block; background: url(../assets/images/hover.png) no-repeat center transparent; background-size: contain; top: 50%; left: 50%; margin: -20px 0 0 -50px; z-index: 50; opacity: 0; }
.rede .btn-instagram:hover::after { opacity: 1; }

@media (min-width: 992px) { 
  .rede .btn-instagram { min-height: 280px; }
}

footer { background-color: var(--primary-color); color: #FFF; font-size: 1.2rem; }
footer a { color: #FFF; text-decoration: none; font-weight: 100; }
footer a:hover { color: var(--secondary-color); }
footer h3 { color: #FFF; font-size: 1.8rem; font-family: 'Cooper'; }
footer .share { margin: 0; padding: 0; list-style: none; }
footer .share li { display: inline-block; }
footer .share li a { display: block; border-radius: 5px; transition: 0.5s; } 
footer .share li a:hover { transform: scale(1.1); }

.swiper-button-next, .swiper-button-prev { color: var(--primary-color); width: 20%; height: 100%; background-color: #FFF; top: 0; outline: none; }
.swiper-button-prev { left: 0; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%); }
.swiper-button-next { right: 0; background: linear-gradient(-90deg,rgba(255,255,255, 1) 20%, rgba(255,255,255, 0) 100%); }

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-button-prev:after { font-size: 1.5rem; }

.swiper { width: 100%; }
.swiper-slide { background-position: center; background-size: cover; width: 350px; height: 350px; }
.swiper-slide img { display: block; width: 80%; margin: 0 auto; }
.swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right { background-image: none; }

@media (min-width: 992px) { 
  .swiper-slide img { width: 100%; }
}

.btn-primary { background-color: var(--tertiary-color); color: white; border: none; font-size: 0.9rem; padding: 0.3rem 1.5rem; }
.btn-primary { padding: 0.5rem 1rem; font-family: "Montserrat", sans-serif; font-weight: bold; }
.btn-primary:hover { background-color: var(--quinary-color); }
.btn-primary img { margin-top: -3px; margin-left: 0.2rem; }

.cedilha { position: relative; }
.cedilha::after { content: ','; position: absolute; bottom: 0.4rem; left: 50%; margin-left: -0.35rem; font-size: 4rem; }