/* ============================================================
   SPEEDINFO
   GLOBAL CSS
   ============================================================ */


/* ============================================================
   IMPORTS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;700&family=Roboto:wght@300;400;500;700;900&display=swap');


/* ============================================================
   ROOT / VARIÁVEIS
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Cores
     ---------------------------------------------------------- */

  --background: #e0e0e0;

  --primary: #277f9d;
  --primary-plus: #236c85;

  --secondary: #fbae2f;

  --primary-dark: #05313f67;
  --primary-light: #27809d67;

  --secondary-light: #fbad2fd3;

  --text-color: #030202;

  --links: #07789e67;
  --links-hover: #011e2767;


  /* ----------------------------------------------------------
     Tipografia
     ---------------------------------------------------------- */

  --font-size-xs:
    clamp(0.75rem, 0.70rem + 0.20vw, 0.85rem);

  --font-size-sm:
    clamp(0.875rem, 0.80rem + 0.30vw, 1rem);

  --font-size-base:
    clamp(1rem, 0.20rem + 0.40vw, 1.12rem);

  --font-size-lg:
    clamp(1.25rem, 1.10rem + 0.50vw, 1.5rem);

  --font-size-xl:
    clamp(1.5rem, 1.30rem + 0.60vw, 2rem);

  --font-size-x2:
    clamp(2rem, 1.90rem + 0.70vw, 2.3rem);

  --font-size-2xl:
    clamp(2rem, 1.70rem + 0.80vw, 2.5rem);

  --font-size-3xl:
    clamp(2.5rem, 2.20rem + 1vw, 3.5rem);

  --font-size-4xl:
    clamp(3.5rem, 3.20rem + 1vw, 4rem);


  /* ----------------------------------------------------------
     Containers
     ---------------------------------------------------------- */

  --max-width: 1280px;

  --container-padding: 1rem;


  /* ----------------------------------------------------------
     Espaçamentos
     ---------------------------------------------------------- */

  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;


  /* ----------------------------------------------------------
     Bordas
     ---------------------------------------------------------- */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;


  /* ----------------------------------------------------------
     Sombras
     ---------------------------------------------------------- */

  --shadow-sm:
    0 4px 12px rgba(0, 0, 0, 0.08);

  --shadow-md:
    0 8px 24px rgba(0, 0, 0, 0.12);

  --shadow-lg:
    0 16px 40px rgba(0, 0, 0, 0.16);


  /* ----------------------------------------------------------
     Transições
     ---------------------------------------------------------- */

  --transition-fast:
    0.2s ease;

  --transition-normal:
    0.3s ease;

  --transition-slow:
    0.5s ease;

}


/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}


body {

  width: 100%;
  min-height: 100vh;

  font-family: 'IBM Plex Sans', sans-serif;

  font-size: var(--font-size-base);

  line-height: 1.6;

  color: var(--text-color);

  background-color: var(--background);

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}


/* ============================================================
   ELEMENTOS BASE
   ============================================================ */

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}


img {
  height: auto;
}


video {
  max-width: 100%;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  border: 0;
  cursor: pointer;
}


ul,
ol {
  list-style: none;
}


/* ============================================================
   TIPOGRAFIA
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: 'Roboto', sans-serif;

  font-weight: 700;

  line-height: 1.2;

}


h1 {
  font-size: var(--font-size-3xl);
}


h2 {
  font-size: var(--font-size-2xl);
}


h3 {
  font-size: var(--font-size-xl);
}


h4 {
  font-size: var(--font-size-lg);
}


h5 {
  font-size: var(--font-size-base);
}


h6 {
  font-size: var(--font-size-sm);
}


p,
li,
a,
span {

  font-size: var(--font-size-base);

  line-height: 1.7;

  font-weight: 300;

}


strong,
b {
  font-weight: 700;
}


/* ============================================================
   LINKS
   ============================================================ */

a {

  color: inherit;

  text-decoration: none;

  transition:
    color var(--transition-normal),
    opacity var(--transition-normal);

}


a:hover {

  color: var(--links-hover);

}


a:focus-visible {

  outline: 3px solid var(--secondary);

  outline-offset: 3px;

}


/* ============================================================
   BOTÕES
   ============================================================ */

button {

  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

}


button:focus-visible {

  outline: 3px solid var(--secondary);

  outline-offset: 3px;

}


/* ============================================================
   FOOTER
   ============================================================ */

footer a {

  color: var(--text-color);

  font-size: var(--font-size-sm);

}


footer a:hover {

  text-decoration: underline;

  color: var(--links-hover);

}


/* ============================================================
   CONTAINER
   ============================================================ */

.container {

  width: 100%;


  margin-left: auto;
  margin-right: auto;

  padding-left: var(--container-padding);
  padding-right: var(--container-padding);

}


/* ============================================================
   BACKGROUND GRADIENT
   ============================================================ */

.gradient {

  background:
    linear-gradient(300deg,
      var(--primary-dark),
      var(--primary-dark),
      var(--primary),
      var(--primary));

  background-size: 240% 240%;

}


@keyframes gradient-animation {

  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }

}


/* ============================================================
   HOME SHOW / CAROUSEL
   Estrutura preparada para imagens + vídeos
   ============================================================ */

.home-section {

  position: relative;

  width: 100%;

  /*
   * Altura responsiva.
   *
   * Evita que o banner fique pequeno
   * em telas grandes ou gigante no celular.
   */

  min-height: min(760px, 88svh);

  max-height: 820px;

  overflow: hidden;

  isolation: isolate;

}


/* ============================================================
   SLIDESHOW
   ============================================================ */

.homeSlideshow {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

}


/* ============================================================
   SLIDES
   ============================================================ */

.homeSlideshow .slide {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  will-change:
    opacity,
    transform;

}


/* ============================================================
   IMAGENS DO HOME SHOW
   ============================================================ */

.slide-1 {

  background-image:
    url('../img/setembro-desktop.jpeg');

  background-position: center center;

}


.slide-2 {

  background-image:
    url('../img/setembro-desktop.jpeg');

  background-position: center center;

}


.slide-3 {

  background-image:
    url('../img/1366x768-2.jpeg');

  background-position: center center;

}


/* ============================================================
   VÍDEOS DO HOME SHOW
   ============================================================ */

.homeSlideshow video {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  /*
   * Faz o vídeo preencher
   * completamente o banner.
   */

  object-fit: cover;

  object-position: center center;

  /*
   * Impede que o vídeo interfira
   * nos botões do carousel.
   */

  pointer-events: none;

}


/* ============================================================
   OVERLAY DO HOME SHOW
   Melhora contraste dos textos
   ============================================================ */

.homeSlideshow::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:

    linear-gradient(180deg,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.03) 42%,
      rgba(0, 0, 0, 0.50) 100%);

}


/* ============================================================
   CONTEÚDO DO HOME SHOW
   ============================================================ */

.home-section>.container,
.home-section .home-content,
.home-section .slide-content {

  position: relative;

  z-index: 4;

}


/* ============================================================
   CONTAINER DO HOME SHOW
   ============================================================ */

.home-section>.container {

  min-height: min(760px, 88svh);

  display: flex;

  align-items: center;

}


/* ============================================================
   CONTROLES DO CAROUSEL
   ============================================================ */

.homeSlideshow button,
.homeSlideshow .carousel-control,
.homeSlideshow .carousel-indicators,
.homeSlideshow .dots,
.homeSlideshow .indicators {

  z-index: 10;

}


/* ============================================================
   ANIMAÇÕES
   ============================================================ */

@keyframes slideInFromTop {

  from {

    opacity: 0;

    transform:
      translateY(-20px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


@keyframes fadeIn {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}


@keyframes float {

  0%,
  100% {

    transform:
      translateY(0) rotate(0deg);

  }

  50% {

    transform:
      translateY(-100px) rotate(10deg);

  }

}


@keyframes floatLogo {

  0% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-20px);

  }

  100% {

    transform:
      translateY(0);

  }

}


/* ============================================================
   ANIMAÇÃO FLOAT
   ============================================================ */

.float {

  animation:
    float 3s ease-in-out infinite;

}


/* ============================================================
   HELPERS DE ANIMAÇÃO
   ============================================================ */

.animate {

  opacity: 1;

  transform:
    translateY(0);

  transition: none;

}


.animate.start {

  opacity: 0;

  transform:
    translateY(20px);

  transition:
    all 1s ease-in-out;

}


.animate.start.visible {

  opacity: 1;

  transform:
    translateY(0);

}


.fadeIn {

  animation:
    fadeIn 1s ease-in-out;

}


.fadeInSlow {

  animation:
    fadeIn 2.5s ease-in-out;

}


/* ============================================================
   FAVICONS FLUTUANTES
   ============================================================ */

.favicon-float {

  position: absolute;

  background:
    url('../img/favicon.ico') no-repeat center / contain;

  opacity: 0.15;

  z-index: 0;

  animation:
    float 20s infinite ease-in-out;

}


.favicon1 {

  top: 10%;
  left: 55%;

  width: 60px;
  height: 60px;

  animation-duration: 22s;

}


.favicon2 {

  top: 15%;
  left: 70%;

  width: 40px;
  height: 40px;

  animation-duration: 18s;

}


.favicon3 {

  top: 25%;
  left: 30%;

  width: 50px;
  height: 50px;

  animation-duration: 24s;

}


.favicon4 {

  top: 20%;
  left: 50%;

  width: 45px;
  height: 45px;

  animation-duration: 20s;

}


.favicon5 {

  top: 45%;
  left: 80%;

  width: 35px;
  height: 35px;

  animation-duration: 26s;

}


/* ============================================================
   TABLETS
   <= 1024px
   ============================================================ */

@media (max-width: 1024px) {


  /* ----------------------------------------------------------
     Tipografia
     ---------------------------------------------------------- */

  h1 {

    font-size:
      var(--font-size-2xl);

  }


  h2 {

    font-size:
      var(--font-size-xl);

  }


  /* ----------------------------------------------------------
     Container
     ---------------------------------------------------------- */

  .container {

    padding-left: 1rem;
    padding-right: 1rem;

  }


  /* ----------------------------------------------------------
     Home Show
     ---------------------------------------------------------- */

  .home-section {

    min-height: 72svh;

    height: auto;

    max-height: 780px;

  }


  .homeSlideshow {

    min-height: 72svh;

  }


  .homeSlideshow .slide {

    background-size: cover;

    background-position: center center;

  }


  .home-section>.container {

    min-height: 72svh;

    padding-top: 80px;

    padding-bottom: 50px;

  }


  /* ----------------------------------------------------------
     Imagens mobile/tablet
     ---------------------------------------------------------- */

  .slide-1 {

    background-image:
      url('../img/setembro-mobile.jpeg');

    background-position:
      center center;

  }


  .slide-2 {

    background-image:
      url('../img/setembro-mobile.jpeg');

    background-position:
      center center;

  }


  .slide-3 {

    background-image:
      url('../img/1366x768-3.jpeg');

    background-position:
      center center;

  }

}


/* ============================================================
   SMARTPHONES
   <= 768px
   ============================================================ */

@media (max-width: 768px) {


  /* ----------------------------------------------------------
     Tipografia
     ---------------------------------------------------------- */

  h1 {

    font-size:
      var(--font-size-xl);

  }


  h2 {

    font-size:
      var(--font-size-lg);

  }


  h3 {

    font-size:
      var(--font-size-lg);

  }


  p {

    font-size:
      var(--font-size-sm);

  }


  /* ----------------------------------------------------------
     Home Show
     ---------------------------------------------------------- */

  .home-section {

    min-height: 74svh;

    height: auto;

    max-height: 780px;

  }


  .homeSlideshow {

    min-height: 74svh;

  }


  .homeSlideshow .slide {

    background-size: cover;

    background-position: center top;

  }


  .home-section>.container {

    min-height: 74svh;

    padding-top: 70px;

    padding-bottom: 55px;

  }


  /* ----------------------------------------------------------
     Imagens mobile
     ---------------------------------------------------------- */

  .slide-1 {

    background-image:
      url('../img/setembro-mobile.jpeg');

    background-position:
      center top;

  }


  .slide-2 {

    background-image:
      url('../img/setembro-mobile.jpeg');

    background-position:
      center top;

  }


  .slide-3 {

    background-image:
      url('../img/saojoao-celular.jpeg');

    background-position:
      center top;

  }


  /* ----------------------------------------------------------
     Overlay mais forte no celular
     ---------------------------------------------------------- */

  .homeSlideshow::after {

    background:

      linear-gradient(180deg,
        rgba(0, 0, 0, 0.22) 0%,
        rgba(0, 0, 0, 0.06) 38%,
        rgba(0, 0, 0, 0.58) 100%);

  }


  /* ----------------------------------------------------------
     Indicadores
     ---------------------------------------------------------- */

  .homeSlideshow .dots,
  .homeSlideshow .indicators,
  .homeSlideshow .carousel-indicators {

    bottom: 18px;

  }

}


/* ============================================================
   SMARTPHONES PEQUENOS
   <= 480px
   ============================================================ */

@media (max-width: 480px) {


  /* ----------------------------------------------------------
     Tipografia
     ---------------------------------------------------------- */

  h1 {

    font-size:
      var(--font-size-lg);

  }


  h2 {

    font-size:
      var(--font-size-base);

  }


  h3 {

    font-size:
      var(--font-size-base);

  }


  p {

    font-size:
      var(--font-size-sm);

  }


  footer a {

    font-size:
      var(--font-size-xs);

  }


  /* ----------------------------------------------------------
     Home Show
     ---------------------------------------------------------- */

  .home-section {

    min-height: 70svh;

    max-height: 720px;

  }


  .homeSlideshow {

    min-height: 70svh;

  }


  .home-section>.container {

    min-height: 70svh;

    padding:
      65px 0.85rem 45px;

  }


  .homeSlideshow .slide {

    background-position:
      center top;

  }

}


/* ============================================================
   CELULAR EM LANDSCAPE
   ============================================================ */

@media (max-width: 900px) and (orientation: landscape) {


  .home-section {

    min-height: 100svh;

    max-height: none;

  }


  .homeSlideshow {

    min-height: 100svh;

  }


  .home-section>.container {

    min-height: 100svh;

  }


  .homeSlideshow .slide {

    background-position:
      center center;

  }

}


/* ============================================================
   REDUÇÃO DE MOVIMENTO
   Acessibilidade
   ============================================================ */

@media (prefers-reduced-motion: reduce) {


  html {

    scroll-behavior: auto;

  }


  *,
  *::before,
  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }


  .homeSlideshow .slide {

    transition: none !important;

    animation: none !important;

  }

}


/* ============================================================
   FIM
   ============================================================ */