@charset "UTF-8";
:root {
  --vw: 320;
  --primary: #DF5F0B;
}

/*
    # Sobre o font-size clamp()

    O clamp() é uma função do CSS que calcula de forma automática o
    melhor tamanho de fonte de acordo com o tamanho da viewport (tela).
    Para usá-lo, usamos 3 parêmetros:
        - valor mínimo
        - valor relativa a tela (vw)
        - valor máximo

    ## Exemplo de uso:

    Temos um <h1> que no design está com um font-size de 45px e queremos
    que no mobile, ele tenha um tamanho mínimo de 30px. Logo sabemos que:

    clamp(min, relativo, max);

    min = 30px
    max = 45px
    relativo = existe uma formula https://stackoverflow.com/questions/74102304/css-clamp-function-formula-for-font-size

    Mas para fins de economia de tempo e practicidade, vamos usar a seguinte
    ferramenta:
    https://clamp.font-size.app/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjM3NXB4IiwibWF4V2lkdGgiOiI4NDBweCIsIm1pbkZvbnRTaXplIjoicHgiLCJtYXhGb250U2l6ZSI6InB4In0%3D

    E ao preencher os valos citados, temos: 

    h1 {
        font-size: clamp(1.875rem, 1.6475rem + 0.9709vw, 2.8125rem);
    }

*/
body {
  font-family: "Montserrat", sans-serif;
}

.hero {
  --hero-font-size: clamp(20px, 0.998rem + 1.0753vw, 25px);
  --hero-color: #FFF;
  --hero-font-weight: 400;
  --hero-background-color: #000;
/*  --hero-background-image: url("../images/bg-hero.webp");*/
  --hero-background-size: cover;
  --hero-background-postion: center top;
  /* DESKTOP*/
  --hero-desktop-padding-top: 73px;
  --hero-desktop-padding-bottom: 0;
  /*MOBILE*/
  --hero-desktop-padding-top: 80px;
  --hero-desktop-padding-bottom: 0;
  /*=================================================
  <h1> e <h2> size: min(30) max(50)
  =================================================*/
  --hero-h1-color: inherit;
  --hero-h1-margin-bottom: 20px;
  --hero-h1-font-weight: 700;
  --hero-h1-font-size: clamp(30px, 0.8669rem + 4.3011vw, 50px);
  /*====================================
  BTN
  ======================================*/
  --hero-btn-border-color: #DF5F0B;
  --hero-btn-color: #DF5F0B;
  --hero-btn-border-width: 2px;
  --hero-btn-padding-y: 12px;
  --hero-btn-padding-x: 17px;
  --hero-btn-font-weight: 700;
  --hero-btn-font-size: 18px;
  --hero-btn-hover-color: #FFF;
  --hero-btn-hover-bg: #DF5F0B;
}

.section--1 {
  --section-padding-top: 70px;
  --section-padding-bottom: 80px;
  --section-color: #FFF;
  --section-font-size: clamp(16px, 0.6976rem + 1.2903vw, 22px);
  --section-bg-color: #000;
  --section-bg-image: none;
  --section-bg-position: center top;
  --section-bg-size: cover;
  --section-h2-font-size: 40px;
  --section-h2-font-weight: 700;
  --section-h2-color: #FFF;
}

.section--2 {
  --section-padding-top: 0;
  --section-padding-bottom: 0;
  --section-color: #FFF;
  --section-font-size: clamp(16px, 0.6976rem + 1.2903vw, 22px);
  --section-bg-color: rgba(223, 95, 11, 0.9);
  --section-bg-image: none;
  --section-bg-position: center top;
  --section-bg-size: cover;
  --section-h2-font-size: clamp(30px, 1.371rem + 2.1505vw, 35px);
  --section-h2-font-weight: 700;
  --section-h2-color: #FFF;
  /*BTN*/
  --section-btn-border-width: 2px;
  --section-btn-padding-x: 18px;
  --section-btn-padding-y: 12px;
  --section-btn-font-weight: 700;
  --section-btn-font-size: 18px;
  --section-btn-color: #000;
  --section-btn-border-color: #000;
  --section-btn-bg: transparent;
  --section-btn-hover-border-color: #000;
  --section-btn-hover-color: #FFF;
  --section-btn-hover-bg: #000;
  --editor__content-margin-bottom: 0;
}

.section--3 {
  --section-padding-top: 105px;
  --section-padding-bottom: 136px;
  --section-bg-color: #000;
  --section-color: #FFF;
  --section-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --section-h2-margin-bottom: 45px;
}

.card__plataforma {
  --card__plataforma-bg-color: #090708;
  --card__plataforma-color: #FFF;
  --card__plataforma-font-size: clamp(18px, 0.8226rem + 1.2903vw, 24px);
  --card__plataforma-box-shadow: 0px 0px 50px 20px #DF5F0B;
  --card__plataforma-border-radius: 15px;
  --card__plataforma-title-font-size: clamp(20px, -0.1613rem + 6.0215vw, 48px);
  --card__plataforma-title-color: #DF5F0B;
  --card__plataforma-title-font-weight: 700;
}

.section--4 {
  --section-padding-top: 0;
  --section-padding-bottom: 0;
  --section-color: #FFF;
  --section-bg-color: #000;
  --section-h2-color: #DF5F0B;
  --section-h2-font-weight: 700;
  --section-h2-font-size: 30px;
  /*BTN*/
  --section-btn-border-color: #DF5F0B;
  --section-btn-color: #DF5F0B;
  --section-btn-bg: transparent;
  --section-btn-hover-bg: #DF5F0B;
  --section-btn-hover-color: #FFF;
  --section-btn-border-width: 2px;
  --section-btn-font-size: 18px;
  --section-btn-padding-y: 12px;
  --section-btn-padding-x: 18px;
  --section-btn-font-weight: 700;
}

.depoimento {
  /* .depoimento__text */
  --depoimento__text-color: #FFF;
  --depoimento__text-font-size: 18px;
  --depoimento__text-font-weight: 400;
  --depoimento__text-bg: #070707;
  --depoimento__text-padding: 107px 10px 53px 10px;
  --depoimento__text-border-radius: 10px;
  /* .depoimento__autor */
  --depoimento__autor-font-size: 16px;
  --depoimento__autor-font-weight: 16px;
  --depoimento__autor-color: #FFF;
}

.section--5 {
  --section-bg-color: #000;
  --section-color: #FFF;
  --section-h2-color: #FFF;
  --section-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --section-h2-text-align: center;
  --section-h2-strong-color: #DF5F0B;
}

.owl-depoimentos {
  --owl-carousel-nav-bg: #DF5F0B;
  --owl-carousel-nav-color: #FFF;
  --owl-carousel-nav-radius: 4px;
  --owl-carousel-nav-hover-bg: #bd5109;
  --owl-carousel-nav-hover-color: #FFF;
  --owl-carousel-dot-size: 16px;
  --owl-carousel-dot-bg: #DF5F0B;
  --owl-carousel-dot-hover-bg: #fff;
  --owl-carousel-dot-radius: 50%;
}

.section--6 {
  --section-bg-color: #000;
  --section-color: #FFF;
  --section-padding-top: 120px;
  --section-padding-bottom: 120px;
  --section-h2-text-align: center;
  --section-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --section-h2-strong-color: #DF5F0B;
  --section-h2-margin-bottom: 110px;
}

.cases {
  --cases__nav-bg: #000;
  /* .case__nav__link */
  --case__nav__link-color: #FFF;
  --case__nav__link-bg: #1E1E1E;
  --case__nav__link-radius: 4px;
  --case__nav__link-font-size: 18px;
  --case__nav__link-font-weight: 700;
  --case__nav__link-active-color: #fff;
  --case__nav__link-active-bg: #DF5F0B;
}

.section--7 {
  --section-bg-color: #000;
  --section-color: #FFF;
  --section-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --section-h2-text-align: center;
  --section-h2-strong-color: #DF5F0B;
}

.section--8 {
  --section-bg-color: #000;
  --section-color: #FFF;
  --section-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --section-h2-strong-color: #DF5F0B;
}

.accordion__faq {
  --faq-btn-bg: #FFF;
  --faq-btn-color: #000;
  --faq-btn-font-weight: 700;
  --faq-btn-active-bg: #DF5F0B;
  --faq-btn-active-color: #FFF;
  --faq-icon: url("../images/faq-icon.webp");
  --faq-active-icon: url("../images/faq-icon-active.webp");
  --faq-radius: 0;
  --faq-border-width: 0;
  --faq-accordion-collapse-bg: #FFF;
  --faq-accordion-collapse-color: #000;
}

.section--9 {
  --section-bg-color: #000;
  --section-color: #FFF;
  --section-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --section-h2-color: #DF5F0B;
  --section-h2-font-weight: 700;
}

.rodape {
  --rodape-color: #FFF;
  --rodape-background-color: #2D241A;
  --rodape-padding-top: 92px;
  --rodape-padding-bottom: 36px;
  --rodape-background-size: cover;
  --rodape-background-position: center top;
  --rodape-link-color: inherit;
  --rodape-link-hover-color: #DF5F0B;
  /*=================================================== 
  .rodape__text--1
  =================================================== */
  --rodape__text--1-font-size: clamp(20px, 0.998rem + 1.0753vw, 25px);
  --rodape__text--1-color: #FFF;
  --rodape__text--1-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --rodape__text--1-h2-font-weight: 700;
  --rodape__text--1-h2-color: #FFF;
  --rodape__text--1-h2-margin-bottom: 16px;
  --rodape__text--1-strong-color: #DF5F0B;
  /*=================================================== 
  .rodape__text--2
  =================================================== */
  --rodape__text--2-font-size: clamp(20px, 0.998rem + 1.0753vw, 25px);
  --rodape__text--2-color: #FFF;
  --rodape__text--2-h2-font-size: clamp(25px, 1.0585rem + 2.1505vw, 35px);
  --rodape__text--2-h2-color: #FFF;
  --rodape__text--2-h2-font-weight: 700;
  --rodape__text--2-h2-margin-bottom: 16px;
  --rodape__text--2-strong-color: #DF5F0B;
  /*=================================================
  ÍCONES em SVG
  ===================================================*/
  --rodape-svg-color: #DF5F0B;
  /*=================================================
  BTN ENVIAR
  ===================================================*/
  --rodape-btn-enviar-border-color: #FFF;
  --rodape-btn-enviar-border-width: 2px;
  --rodape-btn-enviar-font-size: 18px;
  --rodape-btn-enviar-color: #FFF;
  --rodape-btn-enviar-font-weight: 400;
  --rodape-btn-enviar-padding-y: 12px;
  --rodape-btn-enviar-padding-x: 17px;
  --rodape-btn-enviar-hover-bg: #DF5F0B;
  --rodape-btn-enviar-hover-color: #FFF;
  --rodape-btn-enviar-hover-border-color: #DF5F0B;
  /*=================================================
  .creditos
  ===================================================*/
  --creditos-font-size: 14px;
  --creditos-color: #FFF;
  --creditos-link-color: #FFF;
  --creditos-link-hover-color: #DF5F0B;
}