/*
Theme Name: Agência Zealot
Theme URI: https://agenciazealot.com.br
Description: Agência especializada em criação de sites de alta performance
Author: Vitor Hugo
Author URI: https://agenciazealot.com.br
Template: hello-elementor
Version: 1.0.1
Text Domain: agencia-zealot
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =====================================================
GOOGLE FONTS
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Poppins:wght@500;600;700&display=swap');


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

html{
box-sizing:border-box!important;
font-size:16px!important;
}

*,*:before,*:after{
box-sizing:inherit!important;
}

body{
margin:0!important;
line-height:1.6!important;
font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif!important;
color:#222!important;
background:#fff!important;
}

/* =====================================================
IMAGES RESPONSIVE
===================================================== */

img{
max-width:100%!important;
height:auto!important;
display:block!important;
}

/* =====================================================
FLUID CONTAINER SYSTEM
===================================================== */

.container{
width:100%!important;
margin-inline:auto!important;
padding-inline:20px!important;
max-width:1200px!important;
}

/* FULL WIDTH SECTIONS */

.section{
padding-block:clamp(50px,6vw,120px)!important;
}

/* =====================================================
TYPOGRAPHY SYSTEM
===================================================== */

/* evita conflitos com elementor */

.elementor-widget-heading,
.elementor-widget-text-editor{
font-size:inherit!important;
font-family:inherit!important;
}

/* TITLES */

body h1,
.elementor-widget-heading h1{
font-family:'Poppins',sans-serif!important;
font-weight:700!important;
font-size:clamp(28px,4vw,56px)!important;
line-height:1.2!important;
letter-spacing:-0.02em!important;
}

body h2,
.elementor-widget-heading h2{
font-family:'Poppins',sans-serif!important;
font-weight:600!important;
font-size:clamp(24px,3vw,40px)!important;
line-height:1.3!important;
letter-spacing:-0.01em!important;
}

body h3,
.elementor-widget-heading h3{
font-family:'Poppins',sans-serif!important;
font-weight:600!important;
font-size:clamp(20px,2vw,28px)!important;
}

/* PARAGRAPH */

body p,
.elementor-widget-text-editor p{
font-family:'Inter',sans-serif!important;
font-size:clamp(16px,1.2vw,18px)!important;
line-height:1.6!important;
color:#444!important;
}

/* limita largura para leitura */

p{
max-width:75ch!important;
}

/* =====================================================
BUTTON STYLE (bom para afiliados)
===================================================== */

button,
.elementor-button{

font-family:'Inter',sans-serif!important;
font-weight:600!important;
letter-spacing:0.02em!important;

}

/* =====================================================
FLEX GRID SYSTEM
===================================================== */

.grid{
display:flex!important;
flex-wrap:wrap!important;
gap:30px!important;
}

.grid-3 > *{
flex:1 1 calc(33.333% - 30px)!important;
}

.grid-2 > *{
flex:1 1 calc(50% - 30px)!important;
}

/* =====================================================
BREAKPOINTS
===================================================== */

/* MOBILE SMALL */

@media (max-width:480px){

.container{
padding-inline:15px!important;
}

}

/* MOBILE */

@media (max-width:767px){

.grid-3 > *,
.grid-2 > *{
flex:1 1 100%!important;
}

}

/* MOBILE LANDSCAPE / SMALL TABLET */

@media (max-width:880px){

.container{
max-width:720px!important;
}

}

/* TABLET */

@media (max-width:1024px){

.container{
max-width:900px!important;
}

.grid-3 > *{
flex:1 1 calc(50% - 30px)!important;
}

}

/* LAPTOP */

@media (max-width:1200px){

.container{
max-width:1000px!important;
}

}

/* NOTEBOOK 1366 */

@media (max-width:1366px){

.container{
max-width:1100px!important;
}

}

/* =====================================================
LARGE SCREENS
===================================================== */

@media (min-width:1600px){

.container{
max-width:1300px!important;
}

}

/* =====================================================
ULTRAWIDE
===================================================== */

@media (min-width:1920px){

.container{
max-width:1400px!important;
}

.section{
padding-block:clamp(80px,6vw,140px)!important;
}

}

@media (min-width:2200px){

.container{
max-width:1500px!important;
}

body{
font-size:18px!important;
}

}

/* =====================================================
ELEMENTOR WIDTH CONTROL
===================================================== */

.elementor-section.elementor-section-boxed > .elementor-container{
max-width:1400px!important;
margin-inline:auto!important;
}