﻿/*!
Theme Name: Zaffari
Theme URI: https://www.zaffari.com.br/
Author: HUBOX
Author URI: https://www.zaffari.com.br/
Description: zaffari


Version: 1.0
License:  Hubox
License URI: https://hubox.online/
Tags: Zaffari
Text Domain: Hubox


*/



*, 
*::before, 
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   overflow-x: clip;
}

body {
   margin: 0;
   background: #EAEAEA;
   color: #1E1E1E;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   line-height: 1.4;
   overflow-x: clip;
}

img {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
   text-decoration: none;
}

h1,
h2,
h3,
h4,
p {
   margin: 0;
}

ul {
   margin: 0;
}


/* =========================================================
ESTRUTURA / CENTRALIZAÇÃO
========================================================= */

.stage {
   width: 100%;
   margin: 0 auto;
   position: relative;
   background: #EAEAEA;
}

.wrap {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}

.section {
   padding: 80px 0;
}


/* =========================================================
TIPOGRAFIA
========================================================= */

.font-barlow {
   font-family: 'Barlow', sans-serif;
}

.title-gold {
   font-family: 'Inter', sans-serif;
   color: #AA7320;
   font-weight: 700;
   letter-spacing: -.8px;
   line-height: 1.2;
}


/* =========================================================
HEADER
========================================================= */

.site-header {
   background: #FFFFFF;
   height: 97px;
   display: flex;
   align-items: center;
   position: relative !important;
   top: 0;
   z-index: 100;
   box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

.site-header .wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

.logo-img {
   height: 54px;
   width: auto;
   display: block;
}

.nav-desk {
   display: flex;
   gap: 26px;
   align-items: center;
}

.nav-desk a {
   font-weight: 600;
   font-size: 15px;
   color: #1E1E1E;
   opacity: .85;
   transition: .2s;
}

.nav-desk a:hover {
   opacity: 1;
   color: #AA7320;
}

.nav-desk .btn-mini {
   background: #AA7320;
   color: #fff;
   padding: 9px 18px;
   border-radius: 6px;
   opacity: 1;
   font-family: 'Barlow';
   font-weight: 700;
   text-transform: uppercase;
   font-size: 13px;
   letter-spacing: .3px;
}

.nav-desk .btn-mini:hover {
   background: #946015;
   color: #fff;
}

.nav-mobile {
   display: none;
}

.hamburger {
   display: none;
   background: none;
   border: 0;
   cursor: pointer;
   padding: 6px;
}

.hamburger span {
   display: block;
   width: 26px;
   height: 3px;
   background: #1E1E1E;
   margin: 5px 0;
   border-radius: 2px;
   transition: .3s;
}


/* =========================================================
home destaque
========================================================= */

.hero {
   position: relative;
   background: #EAEAEA;
   min-height: 390px;
   display: flex;
   align-items: center;
   z-index: 1111;
}

.hero .wrap {
   display: flex;
   align-items: center;
   gap: 40px;
   width: 100%;
   position: relative;
   z-index: 2;
}

.hero-copy {
   flex: 1 1 55%;
   padding: 56px 0;
}

.titulo {
   max-width: 55%;
}

.titulo h1 {
   color: #AA7320;
   font-size: 55px;
   font-style: normal;
   font-weight: 700;
   line-height: 1;
   letter-spacing: -1.1px;
   margin: 0px 0px 10px 0px;
}

.titulo p {
   color: #000103;
   font-size: 28px;
   font-style: normal;
   font-weight: 500;
   line-height: 1.4;
   letter-spacing: -0.56px;
}

.hero-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   margin-top: 28px;
}

.tag {
   border: 1.5px solid #1E1E1E;
   border-radius: 10px;
   padding: 10px 15px;
   font-weight: 600;
   font-size: 18px;
   color: #1E1E1E;
   background: transparent;
   cursor: pointer;
   transition: .2s;
   line-height: 1.1;
}

.tag:hover {
   background: #1E1E1E;
   color: #fff;
}


.hero-photo {
   text-align: center;
   position: absolute;
   right: 5%;
   z-index: 999999;
   margin-top: 3%;
}

.hero-photo  img {
   margin: auto;
   display: inline-block;
}




/* =========================================================
trabalhar
========================================================= */


section.trabalhar {
   width: 100%;
   padding: 110px 0px 90px 0px;
}

section.trabalhar.dois {
   width: 100%;
   padding: 110px 0px 140px 0px;
}

.band {
   position: relative;
   border-top-left-radius: 48px;
}

.band-gold {
   background: #AA7320;
   color: #F8F5F0;
}

.band-dark {
   background: #1E1E1E;
   color: #F8F5F0;
}

.band-white {
   background: #FFFFFF;
}

.band-tr {
   border-top-left-radius: 0;
   border-top-right-radius: 48px;
}

.band-tl {
   border-top-left-radius: 48px;
   border-top-right-radius: 0;
}



.overlap-tr {
   border-top-right-radius: 48px;

   position: relative;
   z-index: 2;
}

.overlap-tl {
   border-top-left-radius: 48px;
   margin-top: -48px;
   position: relative;
   z-index: 2;
}


.band-gold h2 {
   font-size: 40px;
   font-weight: 700;
   letter-spacing: -.8px;
   color: #F8F5F0;
   line-height: 1.2;
}

.band-gold .body {
   font-family: 'Barlow';
   font-size: 18px;
   line-height: 1.5;
   margin-top: 22px;
   max-width: 1070px;
}

.band-gold .body strong {
   font-weight: 700;
}

.band-gold .strong-line {
   font-family: 'Barlow';
   font-weight: 600;
   font-size: 20px;
   margin-top: 22px;
}




/* =========================================================
POR QUE TRABALHAR
========================================================= */

.why h2 {
   margin-bottom: 40px;
}

.why-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px 48px;
   max-width: 1000px;
}

.why-item {
   display: grid;
   grid-template-columns: 28px 92%;
   font-family: 'Barlow';
   font-size: 17px;
   line-height: 1.4;
}

.why-item .chk {
   display: flex;
   align-items: center;
}

.why-item .chk img {
   width: 20px;
   height: 20px;
}

.badge-sticker {
   display: inline-block;
   margin-top: 30px;
   background: #F8F5F0;
   color: #1E1E1E;
   border-radius: 12px;
   padding: 12px 20px;
   font-family: 'Barlow';
   font-weight: 700;
   font-size: 16px;
   box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.logos-row {
   margin-top: 60px;
   text-align: center;
}

.logos-row img {
   display: inline-block;
}

.brands-img {
   width: 100%;
   max-width: 1000px;
   height: auto;
   display: block;
}


/* =========================================================
MISSÃO / VALORES + DEPOIMENTO
========================================================= */

.missao-visao {
   background: #EAEAEA;
   padding: 80px 0px 50px 0px;
}

.quote-sec {
   background: #EAEAEA;

       border-top-right-radius: 48px !important;
    margin: -48px 0px 0px 0px;
    padding: 120px 0px 80px 0px;

}

.mission-sec h2 {
   color: #AA7320;
   font-size: 36px;
   font-weight: 700;
   letter-spacing: -.8px;
   max-width: 520px;
   line-height: 1.1;
   margin: 0px 0px 20px 0px;
}

.mission-box-home {
   display: grid;
   grid-template-columns: 40% 55%;
   gap: 0px 5%;
   align-items: center;
}

.mission-box-home .mission-gridss {
   padding: 0px !important;
}

.mission-box-home .quote-card blockquote {
   font-size: 16px;
}

.mission-box-home .slick-dots {
   margin: 10px 0px 0px 0px;
}

.mission-gridss {
/*   display: flex;
gap: 56px;
align-items: center; */
padding: 0px 5%;
display: block !important;
}

/* .mission-left {
flex: 1 1 46%;
} */

.mission-left h3 {
   color: #000103;
   font-family: Inter;
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%;
   margin: 0px 0px 5px 0px;
   letter-spacing: -0.07px;
}

.mission-left p {
   color: #000103;
   font-family: Barlow;
   font-size: 17px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
   letter-spacing: -0.09px;
   margin: 0px 0px 20px 0px;
}


/* =========================================================
CARD DEPOIMENTO
========================================================= */

.quote-card {
   background: #1E1E1E;
   color: #fff;
   border-radius: 16px;
   border-top-right-radius: 48px;
   padding: 36px 33px;
   position: relative;
   flex: 1 1 54%;
}

.quote-card .qmark {
   font-family: 'Barlow';
   font-weight: 700;
   font-size: 60px;
   line-height: .6;
   color: #AA7320;
}

.quote-card blockquote {
   font-family: 'Barlow';
   font-weight: 400;
   font-size: 18px;
   line-height: 1.5;
   margin: 20px 0px 30px 0px;
}

.quote-card .who {
   display: flex;
   align-items: center;
   gap: 20px;
}

.quote-card .who img {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   object-fit: cover;
}

.quote-card .who span {
   font-family: 'Barlow';
   font-weight: 600;
   font-size: 18px;
}

/* .qc-dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 20px;
}

.qc-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,.28);
}

.qc-dots span.on {
background: #AA7320;
}
*/






/* =========================================================
TRILHAS & OPERAÇÕES
========================================================= */

.trilhas {
   background: #EAEAEA;
   text-align: center;
   position: relative;
   overflow: clip;
   padding: 250px 0px 65px 0px;
}

.picker h2 {
   color: #AA7320;
   font-size: 40px;
   font-weight: 700;
   letter-spacing: -.8px;
   margin-bottom: 34px;
}


/* Retrato decorativo atrás do título */

.deco-portrait {
   position: absolute;
   top: 6px;
   left: 50%;
   transform: translateX(-50%);
   width: auto;
   z-index: 0;
   pointer-events: none;
   user-select: none;
}

.deco-portrait img {
   width: 100%;
   height: auto;
   display: block;

   -webkit-mask-image: linear-gradient(180deg,#000 55%,transparent 100%);
   mask-image: linear-gradient(180deg,#000 55%,transparent 100%);
}

.ops-band .deco-portrait {
   top: 0;
   width: 240px;
}


/* Título em caixa branca translúcida */

.picker-head {
   position: relative;
   z-index: 3;
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
}

.picker-head h2 {
   background: rgba(255, 255, 255, .57);
   border-radius: 16px;
   padding: 16px 40px;
   margin: 0;
   color: #000103;
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: 22px;
   letter-spacing: -.48px;
   text-align: center;
   max-width: 720px;
   box-shadow: 0 8px 26px rgba(0, 0, 0, .08);
}


/* Colunas trilhas */

.trilha-cols {
   position: relative;
   z-index: 2;
   display: flex;
   gap: 18px;
   align-items: flex-start;
   justify-content: center;
   flex-wrap: wrap;
}

.tcol {
   display: flex;
   flex-direction: column;
   gap: 9px;
   width: 356px;
   max-width: 100%;
}

.tcol:nth-child(1) {
   width: 340px;
}

.tcol:nth-child(2) {
   width: 366px;
}

.tcol:nth-child(3) {
   width: 366px;
}


/* Accordion */

.acc {
   background: #C5242A;
   border-radius: 16px;
   overflow: hidden;
   text-align: left;
   transition: box-shadow .35s ease, transform .2s ease;
   box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.acc.bordeaux {
   background: #7F222A;
}

.acc.open {
   box-shadow: 0 16px 36px rgba(0,0,0,.20);
}

.acc-head {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: 17px 26px;
   background: none;
   border: 0;
   cursor: pointer;
   color: #F8F5F0;
   font: inherit;
   text-align: left;
}

.acc-title {
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: 20px;
   letter-spacing: -.4px;
   line-height: 1.2;
}

.acc-ic {
   flex: 0 0 26px;
   width: 26px;
   height: 26px;
   border: 2px solid currentColor;
   border-radius: 50%;
   position: relative;
   transition: transform .3s ease;
}

.acc-ic::before,
.acc-ic::after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   background: currentColor;
   border-radius: 2px;
   transform: translate(-50%,-50%);
}

.acc-ic::before {
   width: 11px;
   height: 2.2px;
}

.acc-ic::after {
   width: 2.2px;
   height: 11px;
   transition: opacity .25s ease, transform .3s ease;
}

.acc.open .acc-ic {
   transform: rotate(180deg);
}

.acc.open .acc-ic::after {
   opacity: 0;
}

.acc-body {
   display: none;
   padding: 0 26px 22px;
}

.acc-body .bandeiras {
   margin: 22px 0px;
   text-align: center;
}

.acc-body .bandeiras img {
   display: inline-block;
}

.acc-body p {
   font-family: 'Barlow', sans-serif;
   font-size: 14.5px;
   line-height: 1.5;
   color: #fff;
   margin: 0 0 16px;
   letter-spacing: -.07px;
}

.acc-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #F8F5F0;
   border-radius: 6px;
   padding: 11px 30px;
   font-family: 'Barlow', sans-serif;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: .4px;
   text-transform: uppercase;
   color: #F8F5F0;
   transition: .22s ease;
}

.acc-btn:hover {
   background: #F8F5F0;
   color: #C5242A;
   transform: translateY(-1px);
}

.acc.bordeaux .acc-btn:hover {
   color: #7F222A;
}


/* Pills */

.pills {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   justify-content: center;
   max-width: 1080px;
   margin: 0 auto;
}

.pill {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
   background: #C5242A;
   color: #F8F5F0;
   border-radius: 16px;
   padding: 18px 26px;
   font-weight: 400;
   font-size: 20px;
   letter-spacing: -.4px;
   min-width: 340px;
   flex: 0 1 340px;
   cursor: pointer;
   transition: .2s;
}

.pill:nth-child(even) {
   background: #7F222A;
}

.pill:hover {
   transform: translateY(-2px);
   filter: brightness(1.08);
   box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.pill .plus {
   flex: 0 0 26px;
   width: 26px;
   height: 26px;
}

.pill .plus svg {
   width: 26px;
   height: 26px;
   stroke: #F8F5F0;
}


/* =========================================================
OPERAÇÕES
========================================================= */

.operacoes {
   background: #1E1E1E;
   position: relative;
   overflow: visible;
   border-top-right-radius: 48px;
   padding: 185px 0px 130px 0px;
   margin-top: 70px;
}


.ops-band.ops-plain {
   border-radius: 0;
   margin-top: 0;
   padding: 44px 0 56px;
   overflow: clip;
}









/* =========================================================
OPERAÇÕES (continuação)
========================================================= */

.ops-plain-title {
   color: #F8F5F0;
   text-align: center;
   font-family: 'Barlow', sans-serif;
   font-weight: 700;
   font-size: 21px;
   letter-spacing: -.1px;
   line-height: 1.4;
   margin: 0 auto 35px;
}

.ops-band .wrap {
   position: relative;
   z-index: 2;
}

/* figura: círculo dourado + pessoa saindo pelo topo */

.ops-figure {
   position: absolute;
   top: -95px;
   left: 50%;
   transform: translateX(-50%);
   width: auto;
   height: auto;
   z-index: 1;
   pointer-events: none;
}

.ops-gold-circle {
   position: absolute;
   left: 50%;
   bottom: 8px;
   transform: translateX(-50%);
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: #AA7320;
}

.ops-person {
   position: absolute;
   left: 50%;
   bottom: -6px;
   transform: translateX(-50%);
   width: 184px;
   height: auto;
   max-width: none;
}

.ops-heading {
   position: relative;
   z-index: 3;
   background: rgba(255, 255, 255, .8);
   color: #1e1e1e;
   border-radius: 16px;
   padding: 16px 40px;
   margin: 0 auto 20px auto;
   max-width: 660px;
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 20px;
   line-height: 1.35;
   text-align: center;
   box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.ops-grid {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 14px;
   max-width: 1090px;
   margin: 0 auto;
}

.ops-grid .pill {
   min-width: 0;
   flex: none;
   width: 100%;
}


/* =========================================================
NOSSOS NÚMEROS
========================================================= */

.numbers {
   background: #EAEAEA;
   text-align: center;
   padding: 80px 0px 0px 0px;
}

.numbers.overlap-tl {
   background: #EAEAEA;
}

.numbers h2 {
   color: #AA7320;
   text-align: center;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
   letter-spacing: -0.64px;
   margin: 0px 0px 30px 0px;
}

.num-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 18px;
}

.num-card {
   width: 26%;
   background: #FFFFFF;
   border-radius: 16px;
   box-shadow: 0 8px 22px rgba(0,0,0,.05);
   padding: 30px 25px;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.num-card .ico {
   width: 36px;
   height: 36px;
   margin: 0 auto 16px;
   color: #AA7320;
}

.num-card .ico svg {
   width: 36px;
   height: 36px;
   stroke: #AA7320;
}

.num-card .val {
   font-weight: 700;
   font-size: 26px;
   color: #C5242A;
   letter-spacing: -.5px;
   line-height: 1.15;
}

.num-card .lbl {
   font-family: 'Barlow';
   font-weight: 500;
   font-size: 18px;
   color: #1E1E1E;
   margin-top: 8px;
   line-height: 1.35;
}


/* =========================================================
UMA EMPRESA, MUITOS CAMINHOS + VÍDEOS
========================================================= */

.paths {
   background: #EAEAEA;
}

.paths h2 {
   color: #AA7320;
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -.8px;
   margin: 0px 0px 10px 0px;
}

.paths-grid {
   display: flex;
   gap: 100px;
   align-items: center;
}

.paths-text {
   flex: 1 1 45%;
}

.paths-text p {
   color: #000103;
   font-family: Barlow;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 140%;
   letter-spacing: -0.09px;
   margin: 0px 0px 15px 0px;
}

.paths-text .hl {
   color: #AA7320;
   font-weight: 700;
   font-size: 19px;
   margin-top: 18px;
}

.video-thumb {
   flex: 1 1 46%;
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   cursor: pointer;

}

.video-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.video-thumb .play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
}

.video-thumb .play img {
   width: 70px;
   height: 70px;
}

/* .video-thumb .play span {
width: 74px;
height: 74px;
border-radius: 50%;
background: rgba(255,255,255,.9);
display: flex;
align-items: center;
justify-content: center;
transition: .2s;
} */

.video-thumb:hover .play span {
   transform: scale(1.08);
   background: #fff;
}

.video-thumb .play span::after {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border-left: 22px solid #AA7320;
   border-top: 14px solid transparent;
   border-bottom: 14px solid transparent;
   margin-left: 6px;
}


/* =========================================================
CTA FINAL DARK
========================================================= */

.cta-band {
   background: #1E1E1E;
   color: #fff;
   border-top-right-radius: 48px;
}

.cta-grid {
   display: flex;
   gap: 48px;
   align-items: center;
}

.cta-copy {
   flex: 1 1 50%;
}

.cta-copy h2 {
   font-size: 35px;
   font-weight: 700;
   letter-spacing: -.8px;
   line-height: 1.2;
}

.cta-copy p {
   font-family: 'Barlow';
   font-size: 17px;
   margin: 16px 0 26px;
   opacity: .9;
}

.cta-grid .video-thumb {
   flex: 1 1 48%;
}


/* =========================================================
BOTÃO DOURADO PADRÃO
========================================================= */

.btn-gold {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #AA7320;
   color: #fff;
   border: 0;
   cursor: pointer;
   font-family: 'Barlow';
   font-weight: 700;
   text-transform: uppercase;
   font-size: 15px;
   letter-spacing: .2px;
   padding: 16px 32px;
   border-radius: 6px;
   transition: .2s;
}

.btn-gold:hover {
   background: #946015;
   box-shadow: 0 8px 20px rgba(170,115,32,.35);
}


/* =========================================================
TRILHA — ESPECÍFICOS
========================================================= */

.selection {
   background: #FFFFFF;
   text-align: center;
}

.selection.dark {
   background: #1E1E1E;
   margin: -43px 0px 0px 0px;
}

.dark .selection {
   background: #1E1E1E !important;
}

.dark .selection .flow2 {
   color: #F8F5F0 !important;
}

.dark .selection h2 {
   color: #F8F5F0 !important;
   font-size: 40px;
   font-weight: 700;
   letter-spacing: -.8px;
   margin-bottom: 30px !important;
}

.selecao {
   padding: 80px 0px;
}


.selecao h2 {
   color: #AA7320;
   font-size: 40px;
   font-weight: 700;
   letter-spacing: -.8px;
   margin-bottom: 30px;
}


/* Fluxo zigue-zague */

.flow2 {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   color: #1E1E1E;
}

.selection.dark .flow2 {
   color: #F8F5F0;
}











/* =========================================================
FLUXO
========================================================= */

.flow2 .fcol {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   min-width: 150px;
   max-width: 240px;
}

.flow2 .fstep {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: 24px;
   letter-spacing: -.48px;
   line-height: 1.2;
   text-align: center;
   margin: 0;
}

.flow2 .fchev {
   width: 20px;
   height: 11px;
   flex: 0 0 auto;
}

.flow2 .felbow {
   width: 61px;
   height: 108px;
   flex: 0 0 auto;
   align-self: center;
   margin-top: 14px;
}

.flow2 .felbow.short {
   height: 73px;
   margin-top: 0;
}

.flow2 .ffinal {
   justify-content: center;
}


.tipbox {
   background: #6B252F;
   color: #F8F5F0;
   border-top-right-radius: 60px;
   padding: 40px 64px;
   font-family: 'Barlow';
   font-weight: 700;
   font-size: 18px;
   line-height: 1.5;
   max-width: 1082px;
   margin: 0 auto;
}


/* =========================================================
CONQUISTAS
========================================================= */

.achv {
   background: #EAEAEA;
   text-align: center;
   padding: 80px 0px 150px 0px;
}

.achv2 {
   padding: 80px 0px 80px 0px !important;
}

.achv h2 {
   color: #AA7320;
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -.64px;
}

.achv .sub {
   font-family: 'Barlow';
   font-size: 18px;
   max-width: 713px;
   margin: 10px auto 40px;
   line-height: 1.4;
}

.achv .wrap {
   max-width: 1160px;
}

.achv-cards {
   display: flex;
   gap: 40px;
   justify-content: center;
   flex-wrap: wrap;
   max-width: 1072px;
   margin: 0 auto;
}

.achv-card {
   background: #C5242A;
   color: #fff;
   border-radius: 16px;
   padding: 30px 12px;
   width: 175px;
   min-height: 198px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.achv-card:nth-child(even) {
   background: #6B252F;
}

.achv-card .big {
   font-weight: 700;
   font-size: 48px;
   letter-spacing: -.96px;
   line-height: 1.1;
}

.achv-card .small {
   font-family: 'Barlow';
   font-weight: 500;
   font-size: 18px;
   margin-top: 8px;
   line-height: 1.4;
}


/* =========================================================
BENEFÍCIOS
========================================================= */

.benefits {
   background: #1E1E1E;
   color: #fff;
   border-top-right-radius: 48px;
}

.benefits .wrap {
   display: flex;
   gap: 48px;
   align-items: center;
}

.benefits .col-text {
   flex: 1 1 55%;
}

.benefits h2 {
   font-size: 40px;
   font-weight: 700;
   letter-spacing: -.8px;
   line-height: 1.2;
   max-width: 495px;
}

.benefits ul {
   list-style: disc;
   margin: 26px 0 0;
   padding-left: 22px;
   font-family: 'Barlow';
   font-weight: 600;
   font-size: 24px;
   letter-spacing: -.12px;
}

.benefits ul li {
   margin-bottom: 6px;
   line-height: 1.4;
   font-size: 20px;
}

.benefits .btn-gold {
   margin-top: 28px;
}

.benefits .col-photo {
   flex: 0 0 470px;
   display: flex;
   justify-content: center;
}

.benefits .col-photo .portrait {
   width: 470px;
   height: 470px;
}

.benefits .circle {
   margin: -200px 0px 0px 0px;
   display: block;
}


/* variação unidade */

.benefits.unit .wrap {
   justify-content: space-between;
}

.benefits.unit .col-a {
   flex: 1 1 46%;
}

.benefits.unit .col-b {
   flex: 1 1 46%;
}


/* =========================================================
FOOTER
========================================================= */

.site-footer {
   background: #AA7320;
   color: #fff;
   padding: 44px 0 40px;
   position: relative;
}

.site-footer .wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
}

.foot-social {
   display: flex;
   gap: 14px;
}

.foot-social a {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   transition: .2s;
}

.foot-social a img {
   width: 27px;
   height: 27px;
}

.foot-logo-img {
   height: 48px;
   width: auto;
   display: block;
}

.foot-link {
   font-family: 'Barlow';
   font-weight: 700;
   text-transform: uppercase;
   font-size: 11px;
   text-decoration: underline;
   color: #fff;
}


/* =========================================================
BOTÃO VOLTAR AO TOPO
========================================================= */

.to-top {
   position: fixed;
    right: 20px;
    bottom: 84px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   padding: 0px;
   color: #fff;
   border: 0;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 999;
   display: block;
}

.to-top.top1 {
   bottom: 100px;
}

.to-top.show {
   display: flex;
}

.to-top svg {
   width: 22px;
   height: 22px;
   stroke: #fff;
}


/* =========================================================
WHATSAPP FLUTUANTE
========================================================= */

.wa-float {
   position: fixed;
   right: 0;
   bottom: 0;
   z-index: 120;
   background: #0DA94B;
   color: #F8F5F0;
   border-top-left-radius: 12px;
   padding: 16px 46px 16px 26px;
   display: flex;
   align-items: center;
   gap: 20px;
   box-shadow: 0 4px 8px rgba(0,0,0,.25);
   max-width: 480px;
}

.wa-float svg {
   width: 34px;
   height: 34px;
   flex: 0 0 34px;
   fill: #F8F5F0;
}

.wa-float b {
   font-family: 'Barlow';
   font-weight: 700;
   font-size: 18px;
   display: block;
   line-height: 1.3;
}

.wa-float small {
   font-family: 'Barlow';
   font-size: 13px;
}

.wa-float .close {
   position: absolute;
   top: 8px;
   right: 12px;
   cursor: pointer;
   font-size: 16px;
   opacity: .8;
}


.selecao-intro {
   background: #fff;
   padding: 0px;
}


.outros-botoes {
   background: #1E1E1E;
}


/* Container dos dots */
.slick-dots {
   display: flex !important;
   justify-content: center;
   align-items: center;
   gap: 10px;
   margin: 30px 0 0;
   padding: 0;
   list-style: none;
}

/* Cada item do dot */
.slick-dots li {
   width: 12px;
   height: 12px;
   margin: 0;
}

/* Botão do dot */
.slick-dots li button {
   width: 12px;
   height: 12px;
   padding: 0;
   border: none;
   border-radius: 50%;
   background: #ccc;
   font-size: 0;
   cursor: pointer;
   transition: all 0.3s ease;
}

/* Dot ativo */
.slick-dots li.slick-active button {
   background: #C5242A;
   transform: scale(1.2);
}

/* Remove o texto padrão do Slick */
.slick-dots li button:before {
   display: none;
}


@media (min-width: 768px) {
   .mobile {
      display: none !important;
   }

   .why-item {
      grid-template-columns: 36px 92% !important;
   }

   .why-grid {
      display: grid;
      grid-template-columns: 43% 47%;
      gap: 18px 10%;
   }
}




@media (max-width: 768px) {

   .idiomas-header .idiomas {
       position: absolute;
       left: 38px !important;
       top: -32px !important;
       z-index: 9999;
   }

   .wa-float {
      border-radius: 0px !important;
   }

   .mission-gridss {
      padding: 0px;
   }

   .quote-card {
    padding: 36px 24px;
 }


   .hero {
      min-height: 170px;
   }

   .hero .titulo {
      max-width: 61%;
      margin: 42px 0px 50px 0px;
      position: relative;
      z-index: 99999999;
      padding: 20px;
      border-radius: 16px;
      background: rgba(248, 245, 240, 0.88);
   }

   .hero-photo {
      text-align: center;
      position: absolute;
      right: -7%;
      z-index: 999999;
      margin-top: 0;
      top: -93px;
      width: 64%;
   }

   .titulo h1 {
      color: #AA7320;
              margin: 0px;
      font-size: 23px;
   }

   .titulo p {
      color: #000103;
      font-size: 15px;
   }

   .band-gold h2 {
      font-size: 25px;
      margin-left: 40px;
      margin-right: 16px;
      margin-bottom: 11px;
   }


   section.trabalhar {
      width: 100%;
      padding: 75px 0px 90px 0px;
   }

   .why-item {
      font-size: 16px;
      line-height: 1.2;
      margin: 16px 0px;
      gap: 10px;
   }

   .mission-sec h2 {
      font-size: 32px;
   }

   .picker-head h2 {
      padding: 16px 25px;
      font-size: 18px;
      line-height: 1.1;
   }

   .acc-title {
      font-size: 17px;
   }

   .acc-head {
      padding: 17px 19px;
   }



   .tcol:nth-child(1) {
      width: 100%;
   }

   .ops-grid {
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
   }

   .ops-heading {
      padding: 16px 25px;
      font-size: 18px;
      line-height: 1.1;
   }

   .trilhas {
      padding: 237px 0px 65px 0px;
   }

   .operacoes {
      padding: 167px 0px 130px 0px;
   }

   .pill {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: left;
      background: #C5242A;
      color: #F8F5F0;
      border-radius: 16px;
      padding: 14px 12px;
      font-weight: 400;
      text-align: left;
      font-size: 15px;
      letter-spacing: -.4px;
      min-width: 340px;
      flex: 0 1 340px;
      cursor: pointer;
      transition: .2s;
   }

   .num-card {
      width: 100%;
   }

   .paths-grid {
      display: block;
      margin-top: 0;
   }

   .paths h2 {
      line-height: 1.2;
   }

   .paths-text p br {
      display: none !important;
   }


   .cta-grid {
      display: block;
   }

   .cta-band {
      padding: 60px 0px;
   }

   .cta-copy h2 {
      font-size: 25px;
   }

   br {
      display: none;
   }

   .video-thumb {
      margin: 40px 0px 0px 0px;
   }

   .foot-logo-img {
      margin: 20px 0px;
   }

   .why-grid {
      display: block;
   }

   .logo-img {
      height: 54px;
      width: 180px;
      display: block;
      margin-top: -20px;
   }

   .mobile {
      display: inline-block !important;
   }

   .desktop {
      display: none !important;
   }

   .missao-visao {
      background: #EAEAEA;
      padding: 60px 0px 50px 0px;
   }

   .quote-card {
      margin: 50px 0px 0px;
   }


   .btn-gold {
      padding: 11px 32px;
   }

   .band {
      position: relative;
      border-top-left-radius: 0px;
   }

   .botaox {
      text-align: center;
      margin: 40px 0px 0px 0px;
   }

   .site-footer .wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
   }

   .wrap {
      padding: 0 15px;
   }

   .to-top {
      position: fixed;
      right: 15px;
      bottom: 15px;
      width: 40px;
      height: 40px;
      display: block;
   }


   .hero-photo img {
        margin: auto -81px auto 0px;
        max-width: 221px;
   }


   .home-photo .hero-photo img {
      margin: auto;
      max-width: 240px;
   }

   .deco-portrait {
      width: 100%;
   }

   .deco-portrait img {
      width: 280px;
      margin: auto;
   }


   .ops-figure {
      width: 100%;
   }

   .ops-figure img {
      width: 280px;
      margin: auto;
   }




   .benefits .wrap {
       display: block !important;
   }

   .achv-cards {
      gap: 15px !important;
   }

   .flow2 {
      display: block !important;
      text-align: center;
   }

   .flow2 .fcol {
      max-width: 100%;
   }

   .flow2 .felbow {
      width: 32px !important;
      transform: rotate(90deg) !important;
   }


   .trabalhar h2 {
      font-size: 25px;
      margin-left: 0 !important;
   }

   .trabalhar-home h2 {
      margin-left: 40px !important;
   }


   .tag {
       padding: 10px 12px !important;
       font-size: 14px !important;
   }


   .mission-box-home {
       display: block;
   }


   .benefits .circle {
       margin: 40px 0px 0px 0px !important;
       display: block;
   }

   .benefits .col-photo .portrait {
      height: auto;
   }


   .tipbox {
       padding: 40px 35px;
    }


    .hero-tags {
      display: none;
    }


    .flow2 .fstep {
       margin: 13px;
   }


   .benefits {
      position: relative;
   }

   .benefits .col-text {
       flex: 1 1 55%;
       margin: 300px 0px 0px 0px;
   }


   .benefits .col-photo {
       flex: 0 0 470px;
       display: flex;
       justify-content: center;
       position: absolute;
       top: -145px;
       z-index: 11;
       width: 100%;
       left: 0;
       padding: 0px 13%;
   }

   .benefits .col-photo img {
      max-width: 300px;
   }

}



.cta-band {
       border-top-left-radius: 0;
}


a.glink {
    text-decoration: none;
    display: inline-block;
    margin: 0px 6px;
}

.glink img {
    vertical-align: middle !important;
    display: inline !important;
        border: 1px solid #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.3 !important;
    margin-right: 0px !important;
    border-radius: 25px !important;
    height: 20px !important;
    width: 20px !important;
    object-fit: cover !important;
}

.glink.gt-current-lang img {
    opacity: 0.9 !important;
}


.slick-next.slick-arrow {
    position: absolute;
    right: 0;
    top: 45%;
    background-image: url(..../../assets/img/right.svg);
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.slick-prev.slick-arrow {
    position: absolute;
    left: 0;
    top: 45%;
    background-image: url(..../../assets/img/left.svg);
    background-position: center;
    background-size: 10px;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
}


.fancybox-slide>* {
    display: inline-block;
    position: relative;
    padding: 0 !important;
    margin: 0px 0 !important;
    border-width: 0;
    vertical-align: middle;
    text-align: left;
    background-color: transparent !important;
        overflow: hidden !important;
    box-sizing: border-box;
    height: 100%;
}

.fancybox-close-small:after {
    background-color: #fff !important;
}

.fancybox-stage video {
   width: 100%;
    height: 90% !important;
    margin-top: 3% !important;
   overflow: hidden;
}

.fancybox-close-small {
    position: absolute;
    top: 33px !important;
 }



.idiomas-header .wrap {
   position: relative;
}

.idiomas-header .idiomas {
    position: absolute;
    right: 0;
    top: -60px;
    z-index: 9999;
}