@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: 'Eudora';
  src: url('./assets/Eudora.ttf');
}
@font-face {
  font-family: 'Monthoers';
  src: url('./assets/Monthoers.ttf');
}
:root{
  --vermelho: #7E160E;
  --vermelho50: rgba(126, 22, 14, 0.5);
  --terracota: #954D15;
  --terracota50: rgba(149, 77, 21, 0.5);
  --creme: #FFF5D9;
  --creme50: rgba(255, 245, 217, 0.5);
  --branco: #FFF;
  --branco50: rgba(255, 255, 255, 0.5);
  --preto: #000;
  --cinza50: #F8F9FA;
  --cinza100: #F1F3F5;
  --cinza200: #E9ECEF;
  --cinza300: #DEE2E6;
  --cinza400: #CED4DA;
  --cinza500: #ADB5BD;
  --cinza600: #868E96;
  --cinza700: #495057;
  --cinza800: #343A40;
}

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

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

h1{font-size:48px;}
h2{font-size:40px;}
h3{font-size:32px;}
h4{font-size:24px;}
h5{font-size:16px;}
@media screen and (max-width: 450px) {
  h1{font-size:40px;}
  h2{font-size:32px;}
  h3{font-size:24px;}
  h4{font-size:20px;}
  h5{font-size:16px;}
}

.branco{color: var(--branco);}
.preto{color: var(--preto);}
.vermelho{color: var(--vermelho);}
.terracota{color: var(--terracota);}
.creme{color: var(--creme);}
.bg-branco{background-color: var(--branco);}
.bg-branco50{background-color: var(--branco50);}
.bg-preto{background-color: var(--preto);}
.bg-vermelho{background-color: var(--vermelho);}
.bg-vermelho50{background-color: var(--vermelho50);}
.bg-terracota{background-color: var(--terracota);}
.bg-terracota50{background-color: var(--terracota50);}
.bg-creme{background-color: var(--creme);}

p{font-weight: 400;font-size: 14px;}
.bigger{font-weight: 400;font-size: 18px;}
.big{font-weight: 400;font-size: 16px;}
.small{font-weight: 400;font-size: 12px;}
.bold{font-weight:700;}
.light{font-weight:lighter;}
.regular{font-weight:400;}

.eudora{font-family: 'Eudora', 'Monthoers', Arial;}
.fs-48{font-size: 48px;}
.fs-40{font-size: 40px;}
.fs-32{font-size: 32px;}
.fs-24{font-size: 24px;}
.fs-18{font-size: 18px;}
.fs-16{font-size: 16px;}
.fs-14{font-size: 14px;}
.fs-12{font-size: 12px;}
@media screen and (max-width: 450px) {
  .fs-48{font-size: 40px;}
  .fs-40{font-size: 32px;}
  .fs-32{font-size: 24px;}
  .fs-24{font-size: 20px;}
}

a{text-decoration: none;}
.ts-none{text-decoration: none !important;}

.full-height{height: 100vh;}
.full-width{max-width: 100vw;}
.w100{width: 100%;}

.center{text-align: center;}

.flex{display: flex;}
.fx-wrap{flex-wrap: wrap;}
.fx-column{flex-direction: column;}
.fx-between{justify-content: space-between;}
.fx-around{justify-content: space-around;}
.fx-evenly{justify-content: space-evenly;}
.fx-align-center{align-items: center;}
.fx-align-start{align-items: flex-start;}

.block{display:block;}

.btn{
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
}

.padding-h5{padding-left:5%;padding-right:5%;}
.padding-h32{padding-left:32px;padding-right:32px;}
.padding-v0{padding-top:0;padding-bottom:0;}
.padding-v20{padding-top:20px;padding-bottom:20px;}
.padding-v32{padding-top:32px;padding-bottom:32px;}
.padding-v68{padding-top:68px;padding-bottom:68px;}
.padding20{padding:20px}

/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------- */
nav{
  width: 100vw;
  background-color: var(--creme50);
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.sobre nav{
  background-color: var(--creme);
}
nav .agrupador-links{
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.hamburger {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
  position: fixed;
  z-index: 9;
  top: 32px;
  right: 32px;
  transition: all ease .2s;
}
.compacted .hamburger {
  top: 8px;
  transition: all ease .2s;
}
.line {
  fill: none;
  stroke: var(--vermelho);
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

nav a:first-child{
  flex-grow: 1;
}
nav a:hover{
  text-decoration: underline;
}
.logo img{
  max-width: 200px;
}

header{
  background-image: url('./assets/background-header.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.container-header{
  display: flex;
  align-items: center;
}
.container-header h3{
  max-width: 466px;
}
@media screen and (max-width: 1024px){
  header{
    background-image: url('./assets/background-header.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: unset;
    background-position-y: center;
    background-position-x: 70%;
  }
  .container-header{
    align-items: flex-start;
    padding-top: 120px;
  }
  .container-header h3{
    max-width: 100%;
  }
}

.franquias header{
  background-image: url('./assets/copos-drink.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
}
.franquias header .container-header h1{
  max-width: 500px;
}
@media screen and (max-width: 1024px){
  .franquias .container-header{
    align-items: center;
    flex-direction: column-reverse;
  }
  .franquias header .container-header h1{
    max-width: 100%;
  }
  .franquias header .container-header .contato{
    width: 100%;
  }
}

.sobre header{
  background-image: url('./assets/background-header-sobre.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  height: 90vh;
}
.sobre header .container-header{
  height: 100%;
}
.sobre header .container-header img{
  max-width: 440px;
  width: 100%;
}
@media screen and (max-width: 1024px){
  .sobre .container-header{
    align-items: center;
  }
}
@media screen and (max-width: 768px){
  .sobre header{
    height: 50vh;
  }
}

main{position: relative;}

.contato{
  position: absolute;
  width: 560px;
  border-radius: 12px;
  left: 5%;
  top: 0;
  transform: translateY(-50%);
  padding: 36px 44px 60px;
  gap: 36px;
}
.contato .texto{
  gap: 20px;
  max-width: 360px;
}
.contato form{
  row-gap: 32px;
}
.contato .input{
  width: 45%;
  row-gap: 4px;
}
.contato .input input{
  outline: none;
  border: none;
  border-radius: 12px;
  padding: 8px;
}
.franquias .contato{
  position: relative;
  width: 560px;
  border-radius: 12px;
  left: 0;
  top: 0;
  transform: translateY(0%);
  padding: 36px 44px 60px;
  gap: 36px;
}
.contato .loading{
  display: none;
  width: 80px;
  height: 80px;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contato .loading:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid var(--vermelho);
  border-color: var(--vermelho) transparent var(--vermelho) transparent;
  animation: loading 1.2s linear infinite;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.contato form.loading .loading{
  display: inline-block;
}
@media screen and (max-width: 990px){
  .contato{
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
    margin-top: -20px;
    margin-bottom: -20px;
    width: 100%;
  }
  .contato .texto{
    max-width: 100%;
  }
}
@media screen and (max-width: 660px){
  .franquias .container-header{
    gap: 32px;
    height: max-content;
    min-height: 100vh;
  }
  .franquias .contato{
    position: static;
    margin: 0;
  }
}

.container-argumentos-venda{
  background: url('./assets/separador-1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16/8;
}
.argumentos-venda, .tipos-servicos{
  gap: 40px;
}
.argumentos-venda > div,
.tipos-servicos > div{
  width: 100%;
}
.argumentos-venda > div div,
.tipos-servicos > div div{
  gap: 8px;
}
.tipos-servicos .servico{
  border-radius: 12px;
  height: 148px;
  width: 175px;
}
@media screen and (max-width: 1366px){
  .container-argumentos-venda{
    aspect-ratio: 16/10;
  }
}
@media screen and (max-width: 1132px){
  .container-argumentos-venda{
    aspect-ratio: 16/12;
  }
}
@media screen and (max-width: 844px){
  .argumentos-venda > div,
  .tipos-servicos > div{
    flex-wrap: wrap;
    row-gap: 40px;
    column-gap: 20px;
  }
  .argumentos-venda > div div,
  .tipos-servicos > div div{
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 768px){
  .container-argumentos-venda{
    aspect-ratio: unset;
    padding-top: 120px;
  }
}

@media screen and (max-width: 488px){
  .argumentos-venda > div,
  .tipos-servicos > div{
    flex-wrap: wrap;
    row-gap: 40px;
    column-gap: 20px;
  }
  .argumentos-venda > div div,
  .tipos-servicos > div div{
    width: 100%;
  }
}

.container-call-to-action-about{
  background: url('./assets/brinde-cerveja.jpg');
  align-items: center;
  justify-content: flex-end;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
}
.call-to-action-about{
  width: 560px;
  background: #ffffffb3;
  gap: 16px;
  padding: 44px 36px 16px;
  border-radius: 12px;
}
.call-to-action-about img{
  max-width: 150px;
  margin-bottom: 8px;
}
.call-to-action-about a{
  margin-top: 40px;
}

.faq h2{
  text-decoration: underline;
  margin-bottom: 32px;
}
.faq .btn{
  width: max-content;
  margin-top: 32px;
}
details{
  border-bottom: var(--vermelho) solid 1px;
  display: block;
  width: 100%;
  padding-right: 32px;
}
summary{
  list-style: none;
  position: relative;
}
details[open] > summary{
  margin-bottom: 8px;
}
summary::after {
  content: '';
  width: 24px;
  height: 13px;
  background: url('./assets/chevron.png');
  transition: 0.2s;
  display: block;
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}
details[open] > summary::after {
  transform: rotate(180deg) translateY(40%);
}
summary::-webkit-details-marker{
  display: none;
}
details ol{
  padding-left: 20px;
}

.container-por-que-ser-franqueado{
  height: 500px;
  background-image: url('./assets/background-padrao.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.por-que-ser-franqueado{
  gap: 32px;
  border-radius: 12px;
  transform: translateY(-60px);
}
.por-que-ser-franqueado .beneficios{
  width: 100%;
}
.por-que-ser-franqueado .beneficios .separador{
  display: block;
  width: 1px;
  height: 32px;
  background-color: var(--creme);
}
@media screen and (max-width: 1232px){
  .por-que-ser-franqueado .beneficios{
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .por-que-ser-franqueado .beneficios .separador{
    width: 68px;
    height: 1px;
    background-color: var(--creme);
  }
}
@media screen and (max-width: 1024px){
  .container-por-que-ser-franqueado{
    height: unset;
    padding: 68px 5%;
  }
  .por-que-ser-franqueado{
    transform: none;
  }
}

.container-cards{
  gap: 32px;
}
.sobre .container-cards{
  overflow: hidden;
}
.cards{
  width: 100%;
}
.sobre .cards{
  gap: 20px;
}
.card{
  width: 24%;
  aspect-ratio: 3 / 4;
  position: relative;
  justify-content: flex-end;
  border-radius: 12px;
}
.sobre .card{
  width: 332px;
}
.card img{
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 0;
  border-radius: 12px;
}
.card .nome-card{
  position: relative;
  z-index: 2;
  width: 100%;
  justify-content: flex-start;
  height: 32%;
  border-radius: 12px;
  gap: 4px;
}
@media screen and (max-width: 1200px){
  .card .nome-card{
    height: 138px;
  }
}
@media screen and (max-width: 1032px){
  .franquias .cards{
    flex-wrap: wrap;
    gap: 20px;
  }
  .franquias .card{
    width: calc(50% - 10px);
  }
  .card .nome-card{
    height: 152px;
  }
}
@media screen and (max-width: 600px){
  .franquias .card{
    width: 100%;
  }
}

.investimento{
  gap: 20px;
  border-radius: 12px;
}
.investimento .btn{
  flex-shrink: 0;
}
@media screen and (max-width: 768px){
  .investimento{
    flex-direction: column;
  } 
  .investimento .btn{
    text-align: center;
  }
}

.descricao{
  gap: 32px;
  background-image: url("./assets/background-padrao.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.descricao .content{
  width: 500px;
}
.descricao .content h3{
  margin-bottom: 32px;
}
.descricao img{
  border-radius: 12px;
  max-width: 332px;
}
@media screen and (max-width: 768px){
  .descricao{
    flex-direction: column;
  }
  .descricao .content{
    width: 100%;
  }
  .descricao img{
    width: 332px;
    max-width: 100%;
  }
}

.quote{
  position: relative;
  padding: 68px 140px;
}
.decoration{
  position: absolute;
  top: 0;
  left: 0;
}
.decoration.end{
  top: unset;
  left: unset;
  bottom: 0;
  right: 0;
}
.quote .decoration svg{
  width: 140px;
  height: 120px;
}
@media screen and (max-width: 768px){
  .quote{
    padding: 68px 20px;
  }
  .quote p{
    font-size: 24px;
  }
  .quote .decoration svg{
    width: 70px;
    height: 60px;
  }
}

footer{
  gap: 32px;
}
footer .social{
  gap: 20px;
}

@media screen and (max-width: 800px){
  nav{
    background-color: var(--creme);
  }
  nav .agrupador-links{
    position: fixed;
    flex-direction: column;
    top: -100%;
    width: 100vw;
    height: max-content;
    background: var(--creme);
    left: 0;
    justify-content: flex-start;
    padding: 32px;
    gap: 32px;
    transition: all ease .3s;
  }
  nav .agrupador-links.opened{
    top: 0;
    transition: all ease .3s;
  }
  nav .agrupador-links a{
    flex-grow: 0;
    font-size: 24px;
  }
  .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }
  .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  .hamburger{
    display: flex;
  }
}