@charset "utf-8";

/*==================================================
FONTES
==================================================*/
@font-face{font-family: "Montserrat"; src: url("../font/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;}
@font-face{font-family: "Montserrat"; src: url("../font/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap;}
@font-face{font-family: "Montserrat"; src: url("../font/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;}
@font-face{font-family: "Kalam"; src: url("../font/Kalam-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap;}

/*==================================================
ROOT
==================================================*/
:root{--white: #fff; --soft-white: #f4f4f4; --orange: #f57a00; --orange-dark: #d96500; --lime-light: #ccff33; --lime: #99bf26; --lime-dark: #94c812; --ink: #222; --ink-muted: #4c4c4c; --background: #fcf8f0; --radius: 22px; --shadow: 0 12px 24px rgba(243, 107, 0, 0.22); --transition: 160ms ease; --wrapper-width: 81.375rem;}

/*==================================================
RESET
==================================================*/
*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{margin: 0; background: var(--background); color: var(--ink); font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: 100%; font-weight: 400; font-style: normal; font-optical-sizing: auto; line-height: 1.45; letter-spacing: 0.4px;}
h1, h2, h3, h4, h5, h6{text-align: initial;}
h1, h2{font-size: 30px; margin-block-start: 0;}
a{color: inherit; text-decoration: none; transition: color var(--transition), transform var(--transition);}
img{display: block; max-inline-size: 100%; block-size: auto;}
ul, ol{margin: 0; padding: 0; list-style: none;}
button, input, textarea, select{font: inherit;}
button{cursor: pointer;}
figure{margin-block-start: auto; margin-block-end: auto; margin-inline-start: auto; margin-inline-end: auto;}
figcaption{font-size: 12px; margin-inline-start: 1rem; font-style: italic;}
:focus-visible{outline: 2px solid var(--orange); outline-offset: 3px;}
hr.hr-premium{border: none; position: relative; height: 1px; background: #e6ddd1; margin: 16px auto; overflow: visible;}
hr.hr-premium::after {content: "🐾"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--background); padding: 0 16px; font-size: 18px;}
input, select{block-size: 34px; inline-size: 100%;}
input[type="checkbox"]{block-size: 22px; inline-size: auto; vertical-align: bottom; margin-right: 16px;}
textarea{inline-size: 100%;}


/*==================================================
ESTRUTURA
==================================================*/
.wrapper{position: relative; inline-size: 95%; max-inline-size: var(--wrapper-width); margin-inline: auto; padding-inline: 2.5%; text-align: left;}
#outer-header{margin-block-end: 22px; text-align: center; position: relative; z-index: 500;}
#outer-main{text-align: center;}
#outer-benefits{background: var(--lime-light); text-align: center;}
#outer-footer{background: var(--orange); color: var(--white); text-align: center;}
#outer-rights{background: var(--soft-white); text-align: center;}
#conteiner{line-height: 1.7; margin-block-end: 2rem; text-align: justify;}

/*==================================================
TIPOGRAFIA
==================================================*/
.eyebrow{color: var(--lime); font-size: 12px; font-weight: 600; text-transform: uppercase;}
.center{text-align: center;}

/*==================================================
BOTÕES
==================================================*/
.btn{display: inline-flex; align-items: center; justify-content: center; min-block-size: 42px; padding-inline: 20px; border: none; border-radius: var(--radius); font-size: 12px; font-weight: 700; letter-spacing: 0; text-align: center; text-transform: uppercase; transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);}
.btn:hover{transform: translateY(-2px);}
.btn-primary{background: var(--orange); color: var(--white);}
.btn-primary:hover{background: var(--orange-dark); color: var(--white);}
.btn-outline{border: 2px solid var(--lime-dark); background: var(--white); color: var(--lime);}
.btn-outline:hover{background: var(--lime-dark); color: var(--white);}
.btn-lime{background: var(--lime-dark); color: var(--white);}
.btn-lime:hover{background: var(--lime); color: var(--white);}

/*==================================================
UTILITÁRIOS
==================================================*/
.actions{display: flex; flex-wrap: wrap; gap: 14px;}
.shadow{box-shadow: var(--shadow);}
.radius{border-radius: var(--radius);}
.content-img{border-radius: var(--radius);}
.img-cover{inline-size: 100%; block-size: 100%; object-fit: cover;}
.hide{display: none;}

/*==================================================
BREADCRUMBS
==================================================*/
#breadcrumbs{margin-block: 1rem;}
.breadcrumbs{color: var(--ink-muted); font-size: 10px;}

/*==================================================
ANIMAÇÕES
==================================================*/
.fade-up{opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s ease;}
.fade-up.show{opacity: 1; transform: none;}

/*==================================================
768px
==================================================*/
@media only screen and (min-width:768px){
    .wrapper{inline-size: 97.6%; padding-inline: 1.2%;}
}

/*==================================================
1280px
==================================================*/
@media only screen and (min-width:1280px){
    
}