@charset "utf-8";

/* *********************************** */
/*      RESETS E ESTILOS PADRAO        */
/* *********************************** */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6{ margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; }
ul { list-style-type: disc; list-style-position: inside; }
ol { list-style-type: decimal; list-style-position: inside; }
button, input, select, textarea{ margin: 0; }
img, embed, iframe, object, video{ height: auto; max-width: 100%; border: 0; margin: 0; padding: 0; }
audio { max-width: 100%; }
iframe { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; text-align: left; }
html { font-size: 62.5%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; min-width: 300px; overflow-x: hidden; text-rendering: optimizeLegibility; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
article, aside, figure, footer, header, hgroup, section{ display: block; }
body, button, input, select, textarea{ font-family: var(--font-1); }
code, pre{ -moz-osx-font-smoothing: auto; -webkit-font-smoothing: auto; font-family: monospace; }
body { color: var(--base-800); background-color: white; font-size: 1.5rem; font-weight: 400; line-height: 1.5; -webkit-overflow-scrolling: touch; margin: 0; }
a { cursor: pointer; text-decoration: none; color: inherit; }
a strong { color: currentColor; }
a:hover{ color: inherit; }
/* code { background-color: whitesmoke; color: #ff3860; font-size: 0.875em; font-weight: normal; padding: 0.25em 0.5em 0.25em; } */
hr { background-color: whitesmoke; border: none; display: block; height: .2rem; margin: 1.5rem 0; }
input[type="checkbox"], input[type="radio"] { vertical-align: baseline; }
small { font-size: 0.875em; }
span { font-style: inherit; font-weight: inherit; }
strong { font-weight: bolder; }
fieldset { border: none; }
/* pre { -webkit-overflow-scrolling: touch; background-color: whitesmoke; color: #4a4a4a; font-size: 0.875em; overflow-x: auto; padding: 1.25rem 1.5rem; white-space: pre; word-wrap: normal; } */
pre code { background-color: transparent; color: currentColor; font-size: 1em; padding: 0; } */
table td, table th { text-align: left; vertical-align: middle; }

::-moz-selection { background: cornflowerblue; }
::selection { background: cornflowerblue; }

.centralizador { margin: 0 auto; }
@media screen and (min-width: 1280px) {
    .centralizador { width: 130rem; min-width: 95%; }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    .centralizador { width: 95%; }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .centralizador { width: 95%; }
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    .centralizador { width: 95%; }
}

.aesquerda { float:left; }
.adireita  { float:right; }
.center    { margin-right: auto; margin-left: auto; }

.thin      { font-weight: 100; }
.extralight{ font-weight: 200; }
.light     { font-weight: 300; }
.regular   { font-weight: 400; }
.medium    { font-weight: 500; }
.semibold  { font-weight: 600; }
.bold      { font-weight: 700; }
.extrabold { font-weight: 800; }
.black     { font-weight: 900; }
.italic    { font-style: italic; }

.capitalize { text-transform: capitalize; }
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }

.ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.row    { display: flex; flex-wrap: wrap; }

.left{ margin-right: .6rem; }
.right{ margin-left: .6rem; }



/* SCROLLBAR */
*::-webkit-scrollbar { height: .8rem; width: .8rem; }
*::-webkit-scrollbar-track { border-radius: var(--radius); background-color: transparent; }
*::-webkit-scrollbar-track:hover { background-color: transparent; }
*::-webkit-scrollbar-track:active { background-color: transparent; }
*::-webkit-scrollbar-thumb { border-radius: var(--radius); background-color: var(--base-400); transition: var(--smooth); }
*::-webkit-scrollbar-thumb:hover { background-color: var(--base-500); }
*::-webkit-scrollbar-thumb:active { background-color: var(--base-500); }

/* ICONES */
svg.iconify{ color: var(--base-600); font-size: 2.4rem; }
svg.iconify path{ stroke-width: .2rem; }

/* BUTTONS */
.btn,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{ display: inline-flex; justify-content: center; align-items: center; column-gap: calc(var(--gap) / 3); height: 4.8rem; width: auto; font-size: 1.6rem; color: var(--white); background-color: var(--base-500); line-height: 1.1; border: 0; outline: 0; border-radius: var(--radius); padding: .3rem 2.4rem; cursor: pointer; transition: var(--smooth); }
.btn:hover{ background-color: var(--base-600); }
.btn:active{ background-color: var(--base-700); }
.btn:disabled,
.btn-disabled{ background-color: var(--base-100); color: var(--base-400); opacity: .5; }
.btn svg{ color: inherit; font-size: inherit; }

.btn-user{ background-color: var(--user-500); color: var(--white); }
.btn-user:hover{ background-color: var(--user-600); color: var(--white); }
.btn-user:active{ background-color: var(--user-700); color: var(--white); }
.btn-user:disabled,
.btn-user-disabled{ background-color: var(--user-200); color: var(--base-700); opacity: .5; }

.btn-apoio,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{ background-color: var(--apoio); color: var(--white); }
.btn-apoio:hover{ background-color: var(--apoio-dark); color: var(--white); }
.btn-apoio:active{ background-color: var(--apoio-dark); color: var(--white); }
.btn-apoio:disabled,
.btn-apoio-disabled{ background-color: var(--apoio-dark); color: var(--apoio); opacity: .5; }

.btn-apoio-white,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button{ background-color: var(--white); color: var(--apoio); }
.btn-apoio-white:hover{ background-color: var(--apoio); color: var(--white); }
.btn-apoio-white:active{ background-color: var(--apoio-dark); color: var(--white); }
.btn-apoio-white:disabled,
.btn-apoio-white-disabled{ background-color: var(--white); color: var(--apoio); opacity: .5; }

.btn-white{ background-color: var(--white); color: var(--user-500); }
.btn-white:hover{ background-color: var(--user-100); }
.btn-white:active{ background-color: var(--user-200); }
.btn-white:disabled,
.btn-white-disabled{ background-color: var(--white); color: var(--base-400); opacity: .5; }

.btn-light{ background-color: var(--base-200); color: var(--base-700); }
.btn-light:hover{ background-color: var(--base-300); }
.btn-light:active{ background-color: var(--base-400); }
.btn-light:disabled,
.btn-light-disabled{ background-color: var(--base-200); color: var(--base-500); opacity: .5; }

.btn-info{ background-color: var(--info-alt); color: var(--info); }
.btn-info:hover{ background-color: var(--info); color: var(--info-alt); }
.btn-info:active{ background-color: var(--info); }
.btn-info:disabled,
.btn-info-disabled{ background-color: var(--info-alt); color: var(--info); opacity: .5; }

.btn-success{ background-color: var(--success-alt); color: var(--success); }
.btn-success:hover{ background-color: var(--success); color: var(--success-alt); }
.btn-success:active{ background-color: var(--success); }
.btn-success:disabled,
.btn-success-disabled{ background-color: var(--success-alt); color: var(--success); opacity: .5; }

.btn-warning{ background-color: var(--warning-alt); color: var(--warning); }
.btn-warning:hover{ background-color: var(--warning); color: var(--warning-alt); }
.btn-warning:active{ background-color: var(--warning); }
.btn-warning:disabled,
.btn-warning-disabled{ background-color: var(--warning-alt); color: var(--warning); opacity: .5; }

.btn-erro{ background-color: var(--erro-alt); color: var(--erro); }
.btn-erro:hover{ background-color: var(--erro); color: var(--erro-alt); }
.btn-erro:active{ background-color: var(--erro); }
.btn-erro:disabled,
.btn-erro-disabled{ background-color: var(--erro-alt); color: var(--erro); opacity: .5; }

.btn-tip{ background-color: var(--tip-alt); color: var(--tip); }
.btn-tip:hover{ background-color: var(--tip); color: var(--tip-alt); }
.btn-tip:active{ background-color: var(--tip); }
.btn-tip:disabled,
.btn-tip-disabled{ background-color: var(--tip-alt); color: var(--tip); opacity: .5; }

.btn-whatsapp{ background-color: var(--whatsapp); color: var(--white); }
.btn-whatsapp:hover{ background-color: var(--whatsapp-alt); color: var(--whatsapp); }
.btn-whatsapp:active{ background-color: var(--whatsapp-alt); }
.btn-whatsapp:disabled,
.btn-whatsapp-disabled{ background-color: var(--whatsapp); color: var(--whatsapp-alt); opacity: .5; }

.btn-whatsapp-light{ background-color: var(--white); color: var(--whatsapp); }
.btn-whatsapp-light:hover{ background-color: var(--whatsapp); color: var(--white); }
.btn-whatsapp-light:active{ background-color: var(--whatsapp); }
.btn-whatsapp-light:disabled,
.btn-whatsapp-light-disabled{ background-color: var(--base-200); color: var(--whatsapp); opacity: .5; }

.btn-icon{ aspect-ratio: 1/1; padding: 0 !important; }
.btn-icon svg{ font-size: 2.4rem; color: inherit; }

.btn-outlined-light{ outline: .1rem solid var(--white); color: var(--white); outline-offset: -.1rem; background-color: transparent; }
.btn-outlined-light:hover{ outline-color: var(--white); color: var(--user-500); background-color: var(--white); }

.btn-outlined-dark{ outline: .1rem solid var(--black); color: var(--black); outline-offset: -.1rem; background-color: transparent; }
.btn-outlined-dark:hover{ outline-color: var(--black); color: var(--user-500); background-color: var(--black); }

.btn-outlined-user{ outline: .1rem solid var(--primary); color: var(--primary); outline-offset: -.1rem; background-color: transparent; }
.btn-outlined-user:hover{ outline-color: var(--primary); color: var(--white); background-color: var(--primary); }

/* Tamanhos */
.btn-xs{ height: 3.2rem; font-size: 1.25rem; padding: .3rem 1.4rem; }
.btn-xs svg{ font-size: 1.4rem; }
.btn-icon.btn-xs svg{ font-size: 1.6rem; }

.btn-sm{ height: 4rem; font-size: 1.4rem; padding: .3rem 1.8rem; }
.btn-sm svg{ font-size: 1.6rem; }
.btn-icon.btn-sm svg{ font-size: 2rem; }

.btn-md{ height: 5.8rem; font-size: 1.8rem; padding: .3rem 2.8rem; }
.btn-md svg{ font-size: 2rem; }
.btn-icon.btn-md svg{ font-size: 2.8rem; }

.btn-lg{ height: 6.8rem; font-size: 2.2rem; padding: .3rem 3.2rem; }
.btn-lg svg{ font-size: 2.4rem; }
.btn-icon.btn-lg svg{ font-size: 3.6rem; }
/* Tamanhos */



/* ICONES SOCIAIS */
svg[data-icon*="facebook"]:not(.btn svg) { color: var(--facebook); }
svg[data-icon*="twitter"]:not(.btn svg)  { color: var(--twitter); }
svg[data-icon*="linkedin"]:not(.btn svg) { color: var(--linkedin); }
svg[data-icon*="youtube"]:not(.btn svg)  { color: var(--youtube); }
svg[data-icon*="instagram"]:not(.btn svg){ color: var(--instagram); }
svg[data-icon*="pinterest"]:not(.btn svg){ color: var(--pinterest); }
svg[data-icon*="behance"]:not(.btn svg)  { color: var(--behance); }
svg[data-icon*="skype"]:not(.btn svg)    { color: var(--skype); }
svg[data-icon*="twitch"]:not(.btn svg)   { color: var(--twitch); }
svg[data-icon*="spotify"]:not(.btn svg)  { color: var(--spotify); }
svg[data-icon*="whatsapp"]:not(.btn svg) { color: var(--whatsapp); }
svg[data-icon*="tiktok"]:not(.btn svg)   { color: var(--tiktok); }
svg[data-icon*="telegram"]:not(.btn svg) { color: var(--telegram); }

/* LINKS */
.a-link{ font-size: inherit; color: var(--user-400); text-decoration: underline; display: inline-flex; align-items: center; gap: calc(var(--mr) / 2 - .2rem); }
.a-link:visited{ color: var(--user-400);}
.a-link:hover,
.a-link:visited:hover{ color: var(--user-500); }
.a-link svg{ color: inherit; transition: inherit; font-size: inherit; }

/* TIPS */
.tip{ display: block; width: 100%; padding: .8rem 1.2rem; margin-top: .2rem; border-radius: var(--radius); background: var(--base-200); color: var(--base-500); font-size: 1.4rem; font-weight: 500; line-height: 1.5; }
.tip svg{ color: inherit; font-size: 1.5rem; display: inline-block; vertical-align: middle; margin-right: .6rem; position: relative; top: -.1rem; }
.tip.info   { color: var(--info); background-color: var(--info-alt); }
.tip.success{ color: var(--success); background-color: var(--success-alt); }
.tip.warning{ color: var(--warning); background-color: var(--warning-alt); }
.tip.erro   { color: var(--erro); background-color: var(--erro-alt); }
.tip.tips   { color: var(--tip); background-color: var(--tip-alt); }
.tip em{ display: inline-block; background-color: var(--base-600); border-radius: .3rem; padding: .1rem .6rem; color: var(--white); }
.tip a{ color: inherit; font-style: italic; font-weight: 500; text-decoration: underline; }
.tip a:hover{ color: var(--base-700); }

/* FONTES */
h1{ font-size: 2.6rem; font-weight: bold; line-height: 1.1; }
h1:has(+ h2){ margin-bottom: .4rem; }
h2{ font-size: 1.6rem; font-weight: normal; line-height: 1.3; }
h2:has(+ h3){ margin-bottom: .4rem; }
h3{ font-size: 1.3rem; font-weight: normal; line-height: 1.4; opacity: .8; }
h4{ font-size: 1.1rem; font-weight: 500; line-height: 1.4; opacity: .8; }
/* p{ display: inline; } */
:is(h1, h2, h3, h4, h5, h6, p, ul li, ol li, label, th, td, legend) svg.iconify{ vertical-align: middle; font-size: inherit; color: inherit; position: relative; top: -.1rem; }
h1 svg.iconify{ position: relative; top: -.2rem !important; }

/* FORM */
.box{ display: flex; flex-direction: column; }
.grid{ display: grid; }

.item{ width: 100%; padding: calc(var(--gap) / 2) 0; }
.item label{ display: inline-block; padding-left: .4rem; font-size: 1.3rem; font-weight: 500; }
.item label:has(+ .item-field :is(input, select, textarea):required)::before{ content: '•'; color: var(--erro); font-size: inherit; margin-right: 4px; }
.item:has( > .grid){ padding: 0; }
.item-field{ position: relative; width: inherit; height: 4rem; font-size: 0; background-color: var(--base-100); border-radius: var(--radius); border: .1rem solid var(--base-300); }
.item-field-btn{ width: inherit; font-size: 0; }
.item-field-img{ width: inherit; font-size: 0; }
.item-field :is(input, select, textarea){ appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 100%; border: 0; background-color: transparent; border-radius: var(--radius); }
.item-field :is(input, select, textarea)::placeholder{ font-style: oblique; color: var(--base-400); }
.item-field input{ padding: 0 1.2rem; }
.item-field select{ padding: 0 4rem 0 1.2rem; }
.item-field :is(textarea){ padding: 1.2rem; height: 10rem; min-height: 4rem; width: 100%; min-width: 100%; }
.item-field:has(textarea){ height: auto; }
.item-field:has(:is(input, select, textarea):focus){ border-color: rgba(var(--user-700-rgb), .35); }
.item-field :is(input:focus, select:focus, textarea:focus),
:not(.item.switch) :is(input[type="checkbox"]:focus, input[type="radio"]:focus),
:not(.item.switch) :is(input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); }

/* Iconify form fields */
.item-field svg.iconify{ color: var(--user-400); font-weight: normal; font-size: 1.8rem; margin-right: 1.4rem; position: absolute; top: 50%; right: 0; pointer-events: none; transform: translateY(-50%); }
.item-field svg.iconify path{ stroke-width: .2rem; }

.item-field::before{ color: var(--user-400); font-family: var(--font-fa); font-weight: normal; font-size: 1.5rem; margin-right: 1.4rem; position: absolute; top: 50%; right: 0; pointer-events: none; transform: translateY(-50%); }

.item-field :is(input[type="color"]){ padding: .6rem 4.2rem .6rem 1.2rem; }

.item-field :is(input[type="range"]){ accent-color: var(--user-500); }
.item-field :is(input[type="range"])::-webkit-slider-runnable-track{ background-color: var(--user-400); height: .8rem; border-radius: .5rem; width: calc(100% - 2.4rem); }
.item-field :is(input[type="range"])::-webkit-slider-thumb{ cursor: pointer; position: relative; top: -.4rem; }

.item-field :is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-inner-spin-button,
.item-field :is(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator{ opacity: 0; -webkit-appearance: none; }

.item-field input[type="number"]::-webkit-outer-spin-button,
.item-field input[type="number"]::-webkit-inner-spin-button{ opacity: 0; z-index: 1; }
.item-field input[type="number"]{ appearance: textfield; -moz-appearance: textfield; }

.item-field :is(input[type="search"])::-webkit-search-cancel-button{ appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 1.5rem; width: 1.5rem; cursor: pointer; }

.item-field :is(input[type="time"])::-webkit-calendar-picker-indicator{ background: none; }

.item-field input[type="file"]{ padding-left: .2rem; color: var(--base-400); }
.item-field input[type="file"]::file-selector-button,
.item-field input[type="file"]::-webkit-file-upload-button{ margin: .2rem 1rem .2rem 0; height: calc(100% - .4rem); color: var(--white); font-size: 1rem; font-weight: 600; text-transform: uppercase; border-radius: calc(var(--radius) - .2rem); }
.item-field input[type="file"]::file-selector-button:hover,
.item-field input[type="file"]::-webkit-file-upload-button:hover{ opacity: .75; }

.item-field input[type="button"]{ padding-left: .2rem; color: var(--base-400); }

/* Variação switch */
.item.switch{ display: flex; justify-content: space-between; align-items: center; }
.item.switch h4{ display: inline-block; padding-right: 0.4rem; font-size: 1.3rem; font-weight: 500; }
.item.switch label{ position: relative; height: 2.8rem; width: 4.8rem; min-width: 4.8rem; background-color: var(--base-200); border: .1rem solid var(--base-300); border-radius: 1.4rem; transition: var(--smooth); cursor: pointer; }
.item.switch label input{ appearance: none; }
.item.switch label::before{ content: ''; position: absolute; top: .3rem; left: .3rem; display: flex; align-items: center; justify-content: center; border-radius: 1rem; height: 2rem; width: 2rem; background-color: var(--white); transition: 200ms all ease-out; }
.item.switch label:active::before{ width: 2.6rem; }
.item.switch label:active:has(input:checked)::before{ margin-left: 1.4rem; }
.item.switch label:has(input:checked){ background-color: var(--user-400); border-color: var(--white); }
.item.switch label:has(input:checked)::before{ margin-left: 2rem; transition: 200ms all ease-out; }
.item.switch label:has(input:focus),
.item.switch label:has(input:focus-visible){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); }
.item.switch label:has(input:focus) input:focus{ box-shadow: none; }

/* Checkbox */
.item:not(.switch):has(.item-field-checkbox){ display: flex; align-items: center; gap: calc(var(--gap) / 2); }
.item:not(.switch) .item-field-checkbox{ font-size: 0; }
.item:not(.switch) .item-field-checkbox input{ position: relative; appearance: none; -webkit-appearance: none; height: 2.4rem; aspect-ratio: 1/1; border-radius: calc(var(--radius) - .2rem); background-color: var(--base-200); border: .1rem solid var(--base-300); transition: var(--smooth); cursor: pointer; }
.item:not(.switch) .item-field-checkbox input:checked{ background-color: var(--user-400); border-color: var(--white); }
.item:not(.switch) .item-field-checkbox input::before{ content: ''; opacity: 0; height: 1rem; width: .6rem; border: .2rem solid var(--white); border-top: 0; border-left: 0; display: block; position: absolute; top: 1rem; left: 1.1rem; transform: translate(-50%, -50%) rotate(45deg); transition: var(--smooth); }
.item:not(.switch) .item-field-checkbox input:checked:before{ opacity: 1; }
.item:not(.switch) .item-field-checkbox input:active{ background-color: var(--user-500); }

/* Radio */
.item:not(.switch):has(.item-field-radio){ display: flex; align-items: center; gap: calc(var(--gap) / 2); }
.item:not(.switch) .item-field-radio{ font-size: 0; }
.item:not(.switch) .item-field-radio input{ position: relative; appearance: none; -webkit-appearance: none; height: 2.4rem; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--base-200); border: .1rem solid var(--base-300); transition: var(--smooth); cursor: pointer; }
.item:not(.switch) .item-field-radio input:checked{ background-color: var(--user-400); border-color: var(--white); }
.item:not(.switch) .item-field-radio input::before{ content: ''; opacity: 0; height: 1rem; width: .6rem; border: .2rem solid var(--white); border-top: 0; border-left: 0; display: block; position: absolute; top: 1rem; left: 1.1rem; transform: translate(-50%, -50%) rotate(45deg); transition: var(--smooth); }
.item:not(.switch) .item-field-radio input:checked:before{ opacity: 1; }
.item:not(.switch) .item-field-radio input:active{ background-color: var(--user-500); }

/* Variação social media */
.item-social{ display: flex; width: 100%; border-radius: var(--radius); }
.item-social label{ display: flex; align-items: center; justify-content: center; height: 4rem; width: 4rem; padding: 0; border-radius: var(--radius) 0 0 var(--radius);  border: .1rem solid var(--base-300); border-right: 0; transition: var(--smooth); }
.item-social label svg{ font-size: 1.6rem; transition: var(--smooth); }
.item-social .item-field{ border-radius: 0 var(--radius) var(--radius) 0; }
.item-social .item-field :is(input:focus, select:focus, textarea:focus){ box-shadow: none; }
.item-social .item-field:has(:is(input, select, textarea):focus){ border-color: rgba(var(--user-700-rgb), .35); }
.item-social:has(.item-field :is(input, select, textarea):focus) label{ border-color: rgba(var(--user-700-rgb), .35); background-color: var(--user-400); }
.item-social:has(.item-field :is(input, select, textarea):focus) label svg{ color: var(--white); }
.item-social:has(.item-field :is(input, select, textarea):focus){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); }

/* Variação Composto */
.item-comp{ display: flex; width: 100%; border-radius: var(--radius); }
.item-comp label{ display: flex; align-items: center; justify-content: center; width: auto; padding: 0 1rem; border: .1rem solid var(--base-300); transition: var(--smooth); }
.item-comp label svg{ font-size: 1.6rem; transition: var(--smooth); }
.item-comp :first-child{ border-radius: var(--radius) 0 0 var(--radius); border-right: 0; }
.item-comp :last-child{ border-radius: 0 var(--radius) var(--radius) 0; }
.item-comp .item-field[data-input="select"],
.item-comp .item-field[data-input="select"] select{ width: auto; }.item-comp .item-field :is(input:focus, select:focus, textarea:focus){ box-shadow: none; }
.item-comp .item-field:has(:is(input, select, textarea):focus){ border-color: rgba(var(--user-700-rgb), .35); }
.item-comp:has(.item-field :is(input, select, textarea):focus) label{ border-color: rgba(var(--user-700-rgb), .35); background-color: var(--user-400); }
.item-comp:has(.item-field :is(input, select, textarea):focus) label svg{ color: var(--white); }
.item-comp:has(.item-field :is(input, select, textarea):focus){ outline: none; box-shadow: 0 0 0 .4rem rgba(var(--user-500-rgb), .25); }

fieldset{ background-color: var(--white); border: .1rem solid var(--base-300); padding: var(--gap); margin: var(--gap) 0; border-radius: var(--radius); }
fieldset legend{ font-size: 1.2rem; text-transform: uppercase; font-weight: bolder; letter-spacing: .05rem; padding: 0 .6rem; }
fieldset.ft{ background-color: var(--base-100); }
fieldset.ft > legend{ background-color: var(--white); border-radius: var(--radius); border: .1rem solid var(--base-300); }
fieldset.ft :is(.item-field, .item.capsule, .item.switch.capsule, .box){ background-color: var(--white); }
fieldset.dropdown legend{ position: relative; }
fieldset.dropdown legend .dropdown-button{ position: absolute; top: -0.9rem; right: 0; margin-right: -5rem; height: 3.4rem; width: 3.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; cursor: pointer; transition: var(--smooth); }
fieldset.dropdown legend .dropdown-button svg{ width: 2rem; font-size: 2.3rem; color: inherit; transition: var(--smooth); }
fieldset.dropdown fieldset legend .dropdown-button{ display: none; }
fieldset.dropdown .dropdown-content{ display: none; }
fieldset.dropdown.fieldset-open .dropdown-button{ background-color: var(--erro-alt); color: var(--erro); }

.capsule{ padding: var(--gap); margin: calc(var(--gap) / 2) 0; border: .1rem solid var(--base-300); border-radius: var(--radius); }

table{ 
    --table-bg: var(--white);
    --table-fg: var(--base-900);
    --table-bg-alt: rgba(var(--base-500-rgb), .1);
    --table-bg-hover: rgba(var(--base-900-rgb), .1);
    --table-border-width: .1rem;
    --table-border-style: solid;
    --table-border-color: var(--base-300);
    color: var(--table-fg);
    width: 100%;
}
table{ background-color: var(--table-bg); }
table :is(th, td){ padding: calc(var(--gap) / 2); }

.table-bd-bottom :is(th, td){ border-bottom: var(--table-border-width) var(--table-border-style) var(--table-border-color); }
thead.table-bd-bottom-head{ border-bottom: calc(var(--table-border-width) + .1rem) var(--table-border-style) var(--table-fg); }
.table-bd > :is(thead, tbody) > tr > :is(td, th){ border: var(--table-border-width) var(--table-border-style) var(--table-border-color); }

.table-striped-rows > tbody > tr:nth-of-type(odd) > *{ background-color: var(--table-bg-alt); }
.table-striped-cols > :not(caption) > tr > :nth-child(2n){ background-color: var(--table-bg-alt); }

.table-info,
:is(table, thead, tboby, tr, th, td).table-info{ background-color: var(--info-alt); color: var(--info); border-color: rgba(var(--info-rgb), .3); }
.table-info th,
.table-info td{ border-color: rgba(var(--info-rgb), .3); }

.table-success,
:is(table, thead, tboby, tr, th, td).table-success{ background-color: var(--success-alt); color: var(--success); border-color: rgba(var(--success-rgb), .3); }
.table-success th,
.table-success td{ border-color: rgba(var(--success-rgb), .3); }

.table-warning,
:is(table, thead, tboby, tr, th, td).table-warning{ background-color: var(--warning-alt); color: var(--warning); border-color: rgba(var(--warning-rgb), .3); }
.table-warning th,
.table-warning td{ border-color: rgba(var(--warning-rgb), .3); }

.table-erro,
:is(table, thead, tboby, tr, th, td).table-erro{ background-color: var(--erro-alt); color: var(--erro); border-color: rgba(var(--erro-rgb), .3); }
.table-erro th,
.table-erro td{ border-color: rgba(var(--erro-rgb), .3); }

.table-tip,
:is(table, thead, tboby, tr, th, td).table-tip{ background-color: var(--tip-alt); color: var(--tip); border-color: rgba(var(--tip-rgb), .3); }
.table-tip th,
.table-tip td{ border-color: rgba(var(--tip-rgb), .3); }

.table-dark,
:is(table, thead, tboby, tr, th, td).table-dark{ background-color: var(--base-700); color: var(--base-100); border-color: rgba(var(--base-800-rgb), .3); }
table.table-dark thead,
thead.table-dark{ background-color: var(--base-800); }
.table-dark th,
.table-dark td{ border-color: rgba(var(--base-800-rgb), .3); }

.table-light,
:is(table, thead, tboby, tr, th, td).table-light{ background-color: var(--base-200); color: var(--base-500); border-color: rgba(var(--base-500-rgb), .3); }
table.table-light thead,
thead.table-light{ background-color: var(--base-300); }
.table-light th,
.table-light td{ border-color: rgba(var(--base-500-rgb), .3); }

.table-active{ background-color: var(--table-bg-alt) !important; }
:is(table, thead, tboby, tr, th, td).table-active{ background-color: var(--table-bg-alt) !important; }

.table-hover-rows > tbody > tr:hover > *{ background-color: var(--table-bg-hover); }

.table-scroll-container{ overflow-y: auto; --tf-height: 4.4rem; }
.table-scroll-container table{ width: calc(100% - .1rem); }
.table-scroll-container [class^=".table-scroll-"]{ width: calc(100% - .1rem); }
.table-scroll-container:has(.table-scroll-1x){ max-height: var(--tf-height); }
.table-scroll-container:has(.table-scroll-2x){ max-height: calc(var(--tf-height) * 2); }
.table-scroll-container:has(.table-scroll-3x){ max-height: calc(var(--tf-height) * 3); }
.table-scroll-container:has(.table-scroll-4x){ max-height: calc(var(--tf-height) * 4); }
.table-scroll-container:has(.table-scroll-5x){ max-height: calc(var(--tf-height) * 5); }
.table-scroll-container:has(.table-scroll-6x){ max-height: calc(var(--tf-height) * 6); }
.table-scroll-container:has(.table-scroll-7x){ max-height: calc(var(--tf-height) * 7); }
.table-scroll-container:has(.table-scroll-8x){ max-height: calc(var(--tf-height) * 8); }
.table-scroll-container:has(.table-scroll-9x){ max-height: calc(var(--tf-height) * 9); }
.table-scroll-container:has(.table-scroll-10x){ max-height: calc(var(--tf-height) * 10); }
.table-scroll-container:has(.table-scroll-11x){ max-height: calc(var(--tf-height) * 11); }
.table-scroll-container:has(.table-scroll-12x){ max-height: calc(var(--tf-height) * 12); }
.table-scroll-container:has(.table-scroll-13x){ max-height: calc(var(--tf-height) * 13); }
.table-scroll-container:has(.table-scroll-14x){ max-height: calc(var(--tf-height) * 14); }
.table-scroll-container:has(.table-scroll-15x){ max-height: calc(var(--tf-height) * 15); }

/* Tamanho da grade */
.g-1 { grid-template-columns: repeat(1, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }
.g-7 { grid-template-columns: repeat(7, 1fr); }
.g-8 { grid-template-columns: repeat(8, 1fr); }
.g-9 { grid-template-columns: repeat(9, 1fr); }
.g-10{ grid-template-columns: repeat(10, 1fr); }
.g-11{ grid-template-columns: repeat(11, 1fr); }
.g-12{ grid-template-columns: repeat(12, 1fr); }

/* Tamanho dos itens da grade */
.i-1 { grid-column: span 1; }
.i-2 { grid-column: span 2; }
.i-3 { grid-column: span 3; }
.i-4 { grid-column: span 4; }
.i-5 { grid-column: span 5; }
.i-6 { grid-column: span 6; }
.i-7 { grid-column: span 7; }
.i-8 { grid-column: span 8; }
.i-9 { grid-column: span 9; }
.i-10{ grid-column: span 10; }
.i-11{ grid-column: span 11; }
.i-12{ grid-column: span 12; }

/* Posição inicial e final de colunas */
.i-col-start-1 { grid-column-start: 1; }
.i-col-start-2 { grid-column-start: 2; }
.i-col-start-3 { grid-column-start: 3; }
.i-col-start-4 { grid-column-start: 4; }
.i-col-start-5 { grid-column-start: 5; }
.i-col-start-6 { grid-column-start: 6; }
.i-col-start-7 { grid-column-start: 7; }
.i-col-start-8 { grid-column-start: 8; }
.i-col-start-9 { grid-column-start: 9; }
.i-col-start-10{ grid-column-start: 10; }
.i-col-start-11{ grid-column-start: 11; }
.i-col-start-12{ grid-column-start: 12; }

.i-col-end-1 { grid-column-end: 1; }
.i-col-end-2 { grid-column-end: 2; }
.i-col-end-3 { grid-column-end: 3; }
.i-col-end-4 { grid-column-end: 4; }
.i-col-end-5 { grid-column-end: 5; }
.i-col-end-6 { grid-column-end: 6; }
.i-col-end-7 { grid-column-end: 7; }
.i-col-end-8 { grid-column-end: 8; }
.i-col-end-9 { grid-column-end: 9; }
.i-col-end-10{ grid-column-end: 10; }
.i-col-end-11{ grid-column-end: 11; }
.i-col-end-12{ grid-column-end: 12; }
.i-col-end   { grid-column-end: -1; }

/* Posição inicial e final de linhas */
.i-row-start-1 { grid-row-start: 1; }
.i-row-start-2 { grid-row-start: 2; }
.i-row-start-3 { grid-row-start: 3; }
.i-row-start-4 { grid-row-start: 4; }
.i-row-start-5 { grid-row-start: 5; }
.i-row-start-6 { grid-row-start: 6; }
.i-row-start-7 { grid-row-start: 7; }
.i-row-start-8 { grid-row-start: 8; }
.i-row-start-9 { grid-row-start: 9; }
.i-row-start-10{ grid-row-start: 10; }
.i-row-start-11{ grid-row-start: 11; }
.i-row-start-12{ grid-row-start: 12; }

.i-row-end-1 { grid-row-end: 1; }
.i-row-end-2 { grid-row-end: 2; }
.i-row-end-3 { grid-row-end: 3; }
.i-row-end-4 { grid-row-end: 4; }
.i-row-end-5 { grid-row-end: 5; }
.i-row-end-6 { grid-row-end: 6; }
.i-row-end-7 { grid-row-end: 7; }
.i-row-end-8 { grid-row-end: 8; }
.i-row-end-9 { grid-row-end: 9; }
.i-row-end-10{ grid-row-end: 10; }
.i-row-end-11{ grid-row-end: 11; }
.i-row-end-12{ grid-row-end: 12; }



@media screen and (min-width: 1280px) {
    .g-f-1{ grid-template-columns: repeat(1, 1fr); }
    .g-f-2{ grid-template-columns: repeat(2, 1fr); }
    .g-f-3{ grid-template-columns: repeat(3, 1fr); }
    .g-f-4{ grid-template-columns: repeat(4, 1fr); }
    .g-f-5{ grid-template-columns: repeat(5, 1fr); }
    .g-f-6{ grid-template-columns: repeat(6, 1fr); }
    .g-f-7{ grid-template-columns: repeat(7, 1fr); }
    .g-f-8{ grid-template-columns: repeat(8, 1fr); }
    .g-f-9{ grid-template-columns: repeat(9, 1fr); }
    .g-f-10{ grid-template-columns: repeat(10, 1fr); }
    .g-f-11{ grid-template-columns: repeat(11, 1fr); }
    .g-f-12{ grid-template-columns: repeat(12, 1fr); }

    .i-f-1 { grid-column: span 1; }
    .i-f-2 { grid-column: span 2; }
    .i-f-3 { grid-column: span 3; }
    .i-f-4 { grid-column: span 4; }
    .i-f-5 { grid-column: span 5; }
    .i-f-6 { grid-column: span 6; }
    .i-f-7 { grid-column: span 7; }
    .i-f-8 { grid-column: span 8; }
    .i-f-9 { grid-column: span 9; }
    .i-f-10{ grid-column: span 10; }
    .i-f-11{ grid-column: span 11; }
    .i-f-12{ grid-column: span 12; }

    /* Posição inicial e final de colunas */
    .i-f-col-start-1 { grid-column-start: 1; }
    .i-f-col-start-2 { grid-column-start: 2; }
    .i-f-col-start-3 { grid-column-start: 3; }
    .i-f-col-start-4 { grid-column-start: 4; }
    .i-f-col-start-5 { grid-column-start: 5; }
    .i-f-col-start-6 { grid-column-start: 6; }
    .i-f-col-start-7 { grid-column-start: 7; }
    .i-f-col-start-8 { grid-column-start: 8; }
    .i-f-col-start-9 { grid-column-start: 9; }
    .i-f-col-start-10{ grid-column-start: 10; }
    .i-f-col-start-11{ grid-column-start: 11; }
    .i-f-col-start-12{ grid-column-start: 12; }

    .i-f-col-end-1 { grid-column-end: 1; }
    .i-f-col-end-2 { grid-column-end: 2; }
    .i-f-col-end-3 { grid-column-end: 3; }
    .i-f-col-end-4 { grid-column-end: 4; }
    .i-f-col-end-5 { grid-column-end: 5; }
    .i-f-col-end-6 { grid-column-end: 6; }
    .i-f-col-end-7 { grid-column-end: 7; }
    .i-f-col-end-8 { grid-column-end: 8; }
    .i-f-col-end-9 { grid-column-end: 9; }
    .i-f-col-end-10{ grid-column-end: 10; }
    .i-f-col-end-11{ grid-column-end: 11; }
    .i-f-col-end-12{ grid-column-end: 12; }
    .i-f-col-end   { grid-column-end: -1; }

    /* Posição inicial e final de linhas */
    .i-f-row-start-1 { grid-row-start: 1; }
    .i-f-row-start-2 { grid-row-start: 2; }
    .i-f-row-start-3 { grid-row-start: 3; }
    .i-f-row-start-4 { grid-row-start: 4; }
    .i-f-row-start-5 { grid-row-start: 5; }
    .i-f-row-start-6 { grid-row-start: 6; }
    .i-f-row-start-7 { grid-row-start: 7; }
    .i-f-row-start-8 { grid-row-start: 8; }
    .i-f-row-start-9 { grid-row-start: 9; }
    .i-f-row-start-10{ grid-row-start: 10; }
    .i-f-row-start-11{ grid-row-start: 11; }
    .i-f-row-start-12{ grid-row-start: 12; }

    .i-f-row-end-1 { grid-row-end: 1; }
    .i-f-row-end-2 { grid-row-end: 2; }
    .i-f-row-end-3 { grid-row-end: 3; }
    .i-f-row-end-4 { grid-row-end: 4; }
    .i-f-row-end-5 { grid-row-end: 5; }
    .i-f-row-end-6 { grid-row-end: 6; }
    .i-f-row-end-7 { grid-row-end: 7; }
    .i-f-row-end-8 { grid-row-end: 8; }
    .i-f-row-end-9 { grid-row-end: 9; }
    .i-f-row-end-10{ grid-row-end: 10; }
    .i-f-row-end-11{ grid-row-end: 11; }
    .i-f-row-end-12{ grid-row-end: 12; }
    .i-f-row-end   { grid-row-end: -1; }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    .g-d-1{ grid-template-columns: repeat(1, 1fr); }
    .g-d-2{ grid-template-columns: repeat(2, 1fr); }
    .g-d-3{ grid-template-columns: repeat(3, 1fr); }
    .g-d-4{ grid-template-columns: repeat(4, 1fr); }
    .g-d-5{ grid-template-columns: repeat(5, 1fr); }
    .g-d-6{ grid-template-columns: repeat(6, 1fr); }
    .g-d-7{ grid-template-columns: repeat(7, 1fr); }
    .g-d-8{ grid-template-columns: repeat(8, 1fr); }
    .g-d-9{ grid-template-columns: repeat(9, 1fr); }
    .g-d-10{ grid-template-columns: repeat(10, 1fr); }
    .g-d-11{ grid-template-columns: repeat(11, 1fr); }
    .g-d-12{ grid-template-columns: repeat(12, 1fr); }

    .i-d-1 { grid-column: span 1; }
    .i-d-2 { grid-column: span 2; }
    .i-d-3 { grid-column: span 3; }
    .i-d-4 { grid-column: span 4; }
    .i-d-5 { grid-column: span 5; }
    .i-d-6 { grid-column: span 6; }
    .i-d-7 { grid-column: span 7; }
    .i-d-8 { grid-column: span 8; }
    .i-d-9 { grid-column: span 9; }
    .i-d-10{ grid-column: span 10; }
    .i-d-11{ grid-column: span 11; }
    .i-d-12{ grid-column: span 12; }

    /* Posição inicial e final de colunas */
    .i-d-col-start-1 { grid-column-start: 1; }
    .i-d-col-start-2 { grid-column-start: 2; }
    .i-d-col-start-3 { grid-column-start: 3; }
    .i-d-col-start-4 { grid-column-start: 4; }
    .i-d-col-start-5 { grid-column-start: 5; }
    .i-d-col-start-6 { grid-column-start: 6; }
    .i-d-col-start-7 { grid-column-start: 7; }
    .i-d-col-start-8 { grid-column-start: 8; }
    .i-d-col-start-9 { grid-column-start: 9; }
    .i-d-col-start-10{ grid-column-start: 10; }
    .i-d-col-start-11{ grid-column-start: 11; }
    .i-d-col-start-12{ grid-column-start: 12; }

    .i-d-col-end-1 { grid-column-end: 1; }
    .i-d-col-end-2 { grid-column-end: 2; }
    .i-d-col-end-3 { grid-column-end: 3; }
    .i-d-col-end-4 { grid-column-end: 4; }
    .i-d-col-end-5 { grid-column-end: 5; }
    .i-d-col-end-6 { grid-column-end: 6; }
    .i-d-col-end-7 { grid-column-end: 7; }
    .i-d-col-end-8 { grid-column-end: 8; }
    .i-d-col-end-9 { grid-column-end: 9; }
    .i-d-col-end-10{ grid-column-end: 10; }
    .i-d-col-end-11{ grid-column-end: 11; }
    .i-d-col-end-12{ grid-column-end: 12; }
    .i-d-col-end   { grid-column-end: -1; }

    /* Posição inicial e final de linhas */
    .i-d-row-start-1 { grid-row-start: 1; }
    .i-d-row-start-2 { grid-row-start: 2; }
    .i-d-row-start-3 { grid-row-start: 3; }
    .i-d-row-start-4 { grid-row-start: 4; }
    .i-d-row-start-5 { grid-row-start: 5; }
    .i-d-row-start-6 { grid-row-start: 6; }
    .i-d-row-start-7 { grid-row-start: 7; }
    .i-d-row-start-8 { grid-row-start: 8; }
    .i-d-row-start-9 { grid-row-start: 9; }
    .i-d-row-start-10{ grid-row-start: 10; }
    .i-d-row-start-11{ grid-row-start: 11; }
    .i-d-row-start-12{ grid-row-start: 12; }

    .i-d-row-end-1 { grid-row-end: 1; }
    .i-d-row-end-2 { grid-row-end: 2; }
    .i-d-row-end-3 { grid-row-end: 3; }
    .i-d-row-end-4 { grid-row-end: 4; }
    .i-d-row-end-5 { grid-row-end: 5; }
    .i-d-row-end-6 { grid-row-end: 6; }
    .i-d-row-end-7 { grid-row-end: 7; }
    .i-d-row-end-8 { grid-row-end: 8; }
    .i-d-row-end-9 { grid-row-end: 9; }
    .i-d-row-end-10{ grid-row-end: 10; }
    .i-d-row-end-11{ grid-row-end: 11; }
    .i-d-row-end-12{ grid-row-end: 12; }
    .i-d-row-end   { grid-row-end: -1; }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .g-t-1{ grid-template-columns: repeat(1, 1fr); }
    .g-t-2{ grid-template-columns: repeat(2, 1fr); }
    .g-t-3{ grid-template-columns: repeat(3, 1fr); }
    .g-t-4{ grid-template-columns: repeat(4, 1fr); }
    .g-t-5{ grid-template-columns: repeat(5, 1fr); }
    .g-t-6{ grid-template-columns: repeat(6, 1fr); }
    .g-t-7{ grid-template-columns: repeat(7, 1fr); }
    .g-t-8{ grid-template-columns: repeat(8, 1fr); }
    .g-t-9{ grid-template-columns: repeat(9, 1fr); }
    .g-t-10{ grid-template-columns: repeat(10, 1fr); }
    .g-t-11{ grid-template-columns: repeat(11, 1fr); }
    .g-t-12{ grid-template-columns: repeat(12, 1fr); }

    .i-t-1 { grid-column: span 1; }
    .i-t-2 { grid-column: span 2; }
    .i-t-3 { grid-column: span 3; }
    .i-t-4 { grid-column: span 4; }
    .i-t-5 { grid-column: span 5; }
    .i-t-6 { grid-column: span 6; }
    .i-t-7 { grid-column: span 7; }
    .i-t-8 { grid-column: span 8; }
    .i-t-9 { grid-column: span 9; }
    .i-t-10{ grid-column: span 10; }
    .i-t-11{ grid-column: span 11; }
    .i-t-12{ grid-column: span 12; }

    /* Posição inicial e final de colunas */
    .i-t-col-start-1 { grid-column-start: 1; }
    .i-t-col-start-2 { grid-column-start: 2; }
    .i-t-col-start-3 { grid-column-start: 3; }
    .i-t-col-start-4 { grid-column-start: 4; }
    .i-t-col-start-5 { grid-column-start: 5; }
    .i-t-col-start-6 { grid-column-start: 6; }
    .i-t-col-start-7 { grid-column-start: 7; }
    .i-t-col-start-8 { grid-column-start: 8; }
    .i-t-col-start-9 { grid-column-start: 9; }
    .i-t-col-start-10{ grid-column-start: 10; }
    .i-t-col-start-11{ grid-column-start: 11; }
    .i-t-col-start-12{ grid-column-start: 12; }

    .i-t-col-end-1 { grid-column-end: 1; }
    .i-t-col-end-2 { grid-column-end: 2; }
    .i-t-col-end-3 { grid-column-end: 3; }
    .i-t-col-end-4 { grid-column-end: 4; }
    .i-t-col-end-5 { grid-column-end: 5; }
    .i-t-col-end-6 { grid-column-end: 6; }
    .i-t-col-end-7 { grid-column-end: 7; }
    .i-t-col-end-8 { grid-column-end: 8; }
    .i-t-col-end-9 { grid-column-end: 9; }
    .i-t-col-end-10{ grid-column-end: 10; }
    .i-t-col-end-11{ grid-column-end: 11; }
    .i-t-col-end-12{ grid-column-end: 12; }
    .i-t-col-end   { grid-column-end: -1; }

    /* Posição inicial e final de linhas */
    .i-t-row-start-1 { grid-row-start: 1; }
    .i-t-row-start-2 { grid-row-start: 2; }
    .i-t-row-start-3 { grid-row-start: 3; }
    .i-t-row-start-4 { grid-row-start: 4; }
    .i-t-row-start-5 { grid-row-start: 5; }
    .i-t-row-start-6 { grid-row-start: 6; }
    .i-t-row-start-7 { grid-row-start: 7; }
    .i-t-row-start-8 { grid-row-start: 8; }
    .i-t-row-start-9 { grid-row-start: 9; }
    .i-t-row-start-10{ grid-row-start: 10; }
    .i-t-row-start-11{ grid-row-start: 11; }
    .i-t-row-start-12{ grid-row-start: 12; }

    .i-t-row-end-1 { grid-row-end: 1; }
    .i-t-row-end-2 { grid-row-end: 2; }
    .i-t-row-end-3 { grid-row-end: 3; }
    .i-t-row-end-4 { grid-row-end: 4; }
    .i-t-row-end-5 { grid-row-end: 5; }
    .i-t-row-end-6 { grid-row-end: 6; }
    .i-t-row-end-7 { grid-row-end: 7; }
    .i-t-row-end-8 { grid-row-end: 8; }
    .i-t-row-end-9 { grid-row-end: 9; }
    .i-t-row-end-10{ grid-row-end: 10; }
    .i-t-row-end-11{ grid-row-end: 11; }
    .i-t-row-end-12{ grid-row-end: 12; }
    .i-t-row-end   { grid-row-end: -1; }
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    .g-m-1{ grid-template-columns: repeat(1, 1fr); }
    .g-m-2{ grid-template-columns: repeat(2, 1fr); }
    .g-m-3{ grid-template-columns: repeat(3, 1fr); }
    .g-m-4{ grid-template-columns: repeat(4, 1fr); }
    .g-m-5{ grid-template-columns: repeat(5, 1fr); }
    .g-m-6{ grid-template-columns: repeat(6, 1fr); }
    .g-m-7{ grid-template-columns: repeat(7, 1fr); }
    .g-m-8{ grid-template-columns: repeat(8, 1fr); }
    .g-m-9{ grid-template-columns: repeat(9, 1fr); }
    .g-m-10{ grid-template-columns: repeat(10, 1fr); }
    .g-m-11{ grid-template-columns: repeat(11, 1fr); }
    .g-m-12{ grid-template-columns: repeat(12, 1fr); }

    .i-m-1 { grid-column: span 1; }
    .i-m-2 { grid-column: span 2; }
    .i-m-3 { grid-column: span 3; }
    .i-m-4 { grid-column: span 4; }
    .i-m-5 { grid-column: span 5; }
    .i-m-6 { grid-column: span 6; }
    .i-m-7 { grid-column: span 7; }
    .i-m-8 { grid-column: span 8; }
    .i-m-9 { grid-column: span 9; }
    .i-m-10{ grid-column: span 10; }
    .i-m-11{ grid-column: span 11; }
    .i-m-12{ grid-column: span 12; }

    /* Posição inicial e final de colunas */
    .i-m-col-start-1 { grid-column-start: 1; }
    .i-m-col-start-2 { grid-column-start: 2; }
    .i-m-col-start-3 { grid-column-start: 3; }
    .i-m-col-start-4 { grid-column-start: 4; }
    .i-m-col-start-5 { grid-column-start: 5; }
    .i-m-col-start-6 { grid-column-start: 6; }
    .i-m-col-start-7 { grid-column-start: 7; }
    .i-m-col-start-8 { grid-column-start: 8; }
    .i-m-col-start-9 { grid-column-start: 9; }
    .i-m-col-start-10{ grid-column-start: 10; }
    .i-m-col-start-11{ grid-column-start: 11; }
    .i-m-col-start-12{ grid-column-start: 12; }

    .i-m-col-end-1 { grid-column-end: 1; }
    .i-m-col-end-2 { grid-column-end: 2; }
    .i-m-col-end-3 { grid-column-end: 3; }
    .i-m-col-end-4 { grid-column-end: 4; }
    .i-m-col-end-5 { grid-column-end: 5; }
    .i-m-col-end-6 { grid-column-end: 6; }
    .i-m-col-end-7 { grid-column-end: 7; }
    .i-m-col-end-8 { grid-column-end: 8; }
    .i-m-col-end-9 { grid-column-end: 9; }
    .i-m-col-end-10{ grid-column-end: 10; }
    .i-m-col-end-11{ grid-column-end: 11; }
    .i-m-col-end-12{ grid-column-end: 12; }
    .i-m-col-end   { grid-column-end: -1; }

    /* Posição inicial e final de linhas */
    .i-m-row-start-1 { grid-row-start: 1; }
    .i-m-row-start-2 { grid-row-start: 2; }
    .i-m-row-start-3 { grid-row-start: 3; }
    .i-m-row-start-4 { grid-row-start: 4; }
    .i-m-row-start-5 { grid-row-start: 5; }
    .i-m-row-start-6 { grid-row-start: 6; }
    .i-m-row-start-7 { grid-row-start: 7; }
    .i-m-row-start-8 { grid-row-start: 8; }
    .i-m-row-start-9 { grid-row-start: 9; }
    .i-m-row-start-10{ grid-row-start: 10; }
    .i-m-row-start-11{ grid-row-start: 11; }
    .i-m-row-start-12{ grid-row-start: 12; }

    .i-m-row-end-1 { grid-row-end: 1; }
    .i-m-row-end-2 { grid-row-end: 2; }
    .i-m-row-end-3 { grid-row-end: 3; }
    .i-m-row-end-4 { grid-row-end: 4; }
    .i-m-row-end-5 { grid-row-end: 5; }
    .i-m-row-end-6 { grid-row-end: 6; }
    .i-m-row-end-7 { grid-row-end: 7; }
    .i-m-row-end-8 { grid-row-end: 8; }
    .i-m-row-end-9 { grid-row-end: 9; }
    .i-m-row-end-10{ grid-row-end: 10; }
    .i-m-row-end-11{ grid-row-end: 11; }
    .i-m-row-end-12{ grid-row-end: 12; }
    .i-m-row-end   { grid-row-end: -1; }
}

/* ELEMENTOS DE TEXTO */
.no-list-style *{ list-style: none; }


/* SOMBRAS */
.shadow-sm{ box-shadow: var(--shadow-sm); }
.shadow{ box-shadow: var(--shadow); }
.shadow-lg{ box-shadow: var(--shadow-lg); }


/* CONTROLE DE ALINHAMENTO */
.txt-left, .txt-left *{ text-align: left; }
.txt-center, .txt-center *{ text-align: center; }
.txt-right, .txt-right *{ text-align: right; }
.txt-justify, .txt-justify *{ text-align: justify; }

.v-align-top{ vertical-align: top; }
.v-align-middle{ vertical-align: middle; }
.v-align-bottom{ vertical-align: bottom; }

.flex             { display: flex; }
.inline-flex      { display: inline-flex; }
.flex-wrap        { flex-wrap: wrap; }
.justify-center   { justify-content: center; }
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-around   { justify-content: space-around; }
.justify-evenly   { justify-content: space-evenly; }
.align-start      { align-items: flex-start; }
.align-center     { align-items: center; }
.align-end        { align-items: flex-end; }
.align-stretch    { align-items: stretch; }
.direction-col    { flex-direction: column; }
.direction-row    { flex-direction: row; }


/* CONTROLE DE ESPAÇAMENTOS */
.gap    { gap: var(--gap); }
.row-gap{ row-gap: var(--gap); }
.col-gap{ column-gap: var(--gap); }

.pd    { padding: var(--pd); }
.pd-t  { padding-top: var(--pd); }
.pd-b  { padding-bottom: var(--pd); }
.pd-l  { padding-left: var(--pd); }
.pd-r  { padding-right: var(--pd); }
.pd-0  { padding: 0; }
.pd-t-0{ padding-top: 0; }
.pd-b-0{ padding-bottom: 0; }
.pd-l-0{ padding-left: 0; }
.pd-r-0{ padding-right: 0; }

.mr    { margin: var(--mr); }
.mr-t  { margin-top: var(--mr); }
.mr-b  { margin-bottom: var(--mr); }
.mr-l  { margin-left: var(--mr); }
.mr-r  { margin-right: var(--mr); }
.mr-0  { margin: 0; }
.mr-t-0{ margin-top: 0; }
.mr-b-0{ margin-bottom: 0; }
.mr-l-0{ margin-left: 0; }
.mr-r-0{ margin-right: 0; }

.left { margin-right: calc(var(--mr) / 2 - .2rem); }
.right{ margin-left: calc(var(--mr) / 2 - .2rem); }

.space-sm{ height: var(--space-sm); }
.space   { height: var(--space); }
.space-md{ height: var(--space-md); }
.space-lg{ height: var(--space-lg); }
.space-xl{ height: var(--space-xl); }


/* CONTROLE DE LARGURA POR PORCENTAGEM */
.cl     { --pd-cl: calc(var(--pd) / 2); padding: 0 var(--pd-cl); }
.cl-100 { width: 100%;     }
.cl-90  { width: 90%;      }
.cl-80  { width: 80%;      }
.cl-70  { width: 70%;      }
.cl-75  { width: 75%;      }
.cl-66  { width: 66.666%;  }
.cl-60  { width: 60%;      }
.cl-50  { width: 50%;      }
.cl-40  { width: 40%;      }
.cl-33  { width: 33.333%;  }
.cl-30  { width: 30%;      }
.cl-25  { width: 25%;      }
.cl-20  { width: 20%;      }
.cl-10  { width: 10%;      }

@media screen and (min-width: 1280px) {
    .cl-f     { padding: 0 var(--pd-cl); }
    .cl-f-100 { width: 100%;     }
    .cl-f-90  { width: 90%;      }
    .cl-f-80  { width: 80%;      }
    .cl-f-70  { width: 70%;      }
    .cl-f-75  { width: 75%;      }
    .cl-f-66  { width: 66.666%;  }
    .cl-f-60  { width: 60%;      }
    .cl-f-50  { width: 50%;      }
    .cl-f-40  { width: 40%;      }
    .cl-f-33  { width: 33.333%;  }
    .cl-f-30  { width: 30%;      }
    .cl-f-25  { width: 25%;      }
    .cl-f-20  { width: 20%;      }
    .cl-f-10  { width: 10%;      }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    .cl-d     { padding: 0 var(--pd-cl); }
    .cl-d-100 { width: 100%;     }
    .cl-d-90  { width: 90%;      }
    .cl-d-80  { width: 80%;      }
    .cl-d-70  { width: 70%;      }
    .cl-d-75  { width: 75%;      }
    .cl-d-66  { width: 66.666%;  }
    .cl-d-60  { width: 60%;      }
    .cl-d-50  { width: 50%;      }
    .cl-d-40  { width: 40%;      }
    .cl-d-33  { width: 33.333%;  }
    .cl-d-30  { width: 30%;      }
    .cl-d-25  { width: 25%;      }
    .cl-d-20  { width: 20%;      }
    .cl-d-10  { width: 10%;      }

}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .cl-t     { padding: 0 var(--pd-cl); }
    .cl-t-100 { width: 100%;     }
    .cl-t-90  { width: 90%;      }
    .cl-t-80  { width: 80%;      }
    .cl-t-70  { width: 70%;      }
    .cl-t-75  { width: 75%;      }
    .cl-t-66  { width: 66.666%;  }
    .cl-t-60  { width: 60%;      }
    .cl-t-50  { width: 50%;      }
    .cl-t-40  { width: 40%;      }
    .cl-t-33  { width: 33.333%;  }
    .cl-t-30  { width: 30%;      }
    .cl-t-25  { width: 25%;      }
    .cl-t-20  { width: 20%;      }
    .cl-t-10  { width: 10%;      }
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    .cl-m     { padding: 0 var(--pd-cl); }
    .cl-m-100 { width: 100%;     }
    .cl-m-90  { width: 90%;      }
    .cl-m-80  { width: 80%;      }
    .cl-m-70  { width: 70%;      }
    .cl-m-75  { width: 75%;      }
    .cl-m-66  { width: 66.666%;  }
    .cl-m-60  { width: 60%;      }
    .cl-m-50  { width: 50%;      }
    .cl-m-40  { width: 40%;      }
    .cl-m-33  { width: 33.333%;  }
    .cl-m-30  { width: 30%;      }
    .cl-m-25  { width: 25%;      }
    .cl-m-20  { width: 20%;      }
    .cl-m-10  { width: 10%;      }
}   

/* CSS PROJETO */
.popup{ display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 78rem; height: auto; max-height: 90%; background-color: var(--white); border-radius: var(--radius); padding: 4rem; box-shadow: var(--shadow-lg); z-index: 11; }
.popup > .btn{ position: absolute; top: 0; right: 0; margin-top: 1rem; margin-right: 1rem; }
.popup .content{ height: 100%; max-height: 70rem; overflow: auto; }
.popup .content h2{ font: 1.8rem; font-weight: 700; text-transform: uppercase; margin-bottom: 1.8rem; line-height: 1.1; }
.popup .content ul li:hover{ color: var(--primary); }
.popup .content h3{ margin-top: 1.8rem; }
.popup .content .btn-whatsapp{ margin-top: 1.8rem; }
.backdrop-overlay{ display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(var(--white-rgb), 0.55); backdrop-filter: blur(.4rem); -webkit-backdrop-filter: blur(.4rem); z-index: 10; }

ul.redes-sociais{ margin-top: 4rem; display: flex; align-items: center; justify-content: center; gap: var(--gap); }
ul.redes-sociais li{ list-style-type: none; }
ul.redes-sociais li .btn{ color: var(--base-200); background-color: transparent; border: .1rem solid var(--base-200); border-radius: 50%; }
ul.redes-sociais li .btn:has(svg[data-icon*="instagram"]):hover{ background-color: var(--instagram); color: var(--white); border-color: var(--instagram); }
ul.redes-sociais li .btn:has(svg[data-icon*="facebook"]):hover{ background-color: var(--facebook); color: var(--white); border-color: var(--facebook); }
ul.redes-sociais li .btn:has(svg[data-icon*="twitter"]):hover{ background-color: var(--twitter); color: var(--white); border-color: var(--twitter); }
ul.redes-sociais li .btn:has(svg[data-icon*="youtube"]):hover{ background-color: var(--youtube); color: var(--white); border-color: var(--youtube); }

header.w3-header{ position: fixed; top: 0; left: 0; width: 100%; transition: var(--smooth); z-index: 3; background-color: var(--white); }
.w3-topo-conteudo{ display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; transition: var(--smooth); }
.w3-topo-conteudo .logo svg{ height: 4.5rem; position: relative; top: .5rem; }
.w3-topo-conteudo .logo svg :is(.logo_symbol, .logo_letter){ /* fill: var(--white); */ transition: var(--smooth); }
nav.w3-menu{ flex-grow: 1; padding-left: 3rem; }
nav.w3-menu ul{ display: flex; align-items: center; gap: calc(var(--gap) / 2); }
nav.w3-menu ul li{ list-style-type: none; }
nav.w3-menu ul li a{ display: flex; align-items: center; justify-content: center; height: 5rem; padding: 0 1rem; font-size: 1.6rem; transition: var(--smooth); }
nav.w3-menu ul li a{ border-radius: var(--radius); }
nav.w3-menu ul li a:hover{ color: var(--primary); background-color: var(--user-100); }
.w3-topo-conteudo .btn:has(svg[data-icon*="instagram"]){ background-color: var(--white); color: var(--instagram); border: .1rem solid var(--instagram); }
.w3-topo-conteudo .btn:has(svg[data-icon*="instagram"]):hover{ background-color: var(--instagram); color: var(--white); border-color: var(--instagram); }
.topo-float{ box-shadow: var(--shadow-lg); background: rgba(var(--white-rgb), 0.85); backdrop-filter: blur(.4rem); -webkit-backdrop-filter: blur(.4rem); }
.topo-float .w3-topo-conteudo{ padding: 1.5rem 0; }

section.w3-cta-topo{ background: url('../img/header_bg.jpg') no-repeat center; background-size: cover; width: 100%; height: 100%; position: relative; }
section.w3-cta-topo .overlay{ background-color: var(--black); display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .75; }
.w3-cta-topo .centralizador{ height: 100%; z-index: 1; position: relative; }
.w3-cta-topo-conteudo{ width: 100%; height: 100%; }
.w3-cta-topo-conteudo .text{ text-align: center; max-width: 84rem; }
.w3-cta-topo-conteudo .text h1{ margin-bottom: 4rem; line-height: 1.2; font-size: clamp(2rem, 1.5rem + 3.6873vw, 5.5rem); color: var(--primary); }
.w3-cta-topo-conteudo .text h1 b{ color: var(--apoio); }
.w3-cta-topo-conteudo .text h2{ margin-bottom: 4rem; line-height: 1.5; color: var(--white); }
.w3-cta-topo-conteudo ul.redes-sociais{ margin-top: 4rem; }
.w3-cta-topo-conteudo .text .logo_topo{ display: initial; max-width: 40rem; margin: 5rem 0; }

@media (orientation: landscape){
    section.w3-cta-topo{ height: 100vh; }
}
@media (orientation: portrait){
    section.w3-cta-topo{ height: 100%; min-height: 55rem; }
}

section.w3-20{ padding: 16rem 0 8rem; background: url('../img/bg_20.png') no-repeat top right; background-size: contain; }
section.w3-20 img{ height: 10rem; }
section.w3-20 h1{ max-width: 84rem; margin-top: 2rem; }
section.w3-20 h1 b{ color: var(--primary); }
section.w3-20 .text{ max-width: 84rem; margin-left: auto; margin-right: auto; }
section.w3-20 .gallery{ margin-top: 6rem; }
section.w3-20 .gallery .final-tiles-gallery .tile{ border-radius: var(--radius); }
section.w3-20 .gallery .final-tiles-gallery .tile img.item{ padding: 0; }

section.w3-sobre{ padding: 8rem 0; }
.w3-sobre-conteudo .img{ border-radius: var(--radius); text-align: center; overflow: hidden; font-size: 0; box-shadow: var(--shadow-theme); }
.w3-sobre-conteudo .img img{ height: 100%; width: 100%; object-fit: cover; }
.w3-sobre-conteudo .text{ padding: 0 6rem; }
.w3-sobre-conteudo .text h1{ font-size: 2.4rem; font-weight: 800; }
.w3-sobre-conteudo .text h2{ font-size: 1.6rem; font-weight: 400; color: var(--base-400); line-height: 1.8; margin-top: 2rem; }
.w3-sobre-conteudo .text em{ font-size: 1.4rem; font-weight: 500; color: var(--apoio-dark); background-color: var(--apoio-light); display: inline-block; max-width: 40rem; margin-top: 2rem; padding: 2rem; border-radius: var(--radius); }

.w3-features-conteudo{ padding: 6rem 0; }
.w3-features-conteudo .header{ text-align: center; margin-bottom: 6rem; }
.w3-features-conteudo .header h1{ font-size: 2.4rem; font-weight: 800; }
.w3-features-conteudo .header h2{ font-size: 1.6rem; font-weight: 500; color: var(--base-400); margin-top: 2rem; }
.w3-features-conteudo .body .box{ padding: 3rem 2rem; border: .2rem solid var(--primary); border-radius: var(--radius); }
.w3-features-conteudo .body .box .icon{ height: auto; width: 12rem; aspect-ratio: 1/1; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: linear-gradient(0deg, rgba(var(--white-rgb), 0) 0%, rgba(var(--base-100-rgb), 1) 100%); margin-bottom: 2rem; }
.w3-features-conteudo .body .box .icon svg{ font-size: 7rem; color: var(--apoio); }
.w3-features-conteudo .body .box .text{ text-align: center; }
.w3-features-conteudo .body .box .text h3{ font-size: 1.8rem; font-weight: 600; line-height: 1.6; }
.w3-features-conteudo .body .box .text h4{ font-size: 1.4rem; font-weight: 500; line-height: 1.8; color: var(--base-400); margin-top: 2rem; }

section.w3-contato-cta{ position: relative; margin-top: 4rem; background: url('../img/contato_cta_bg.jpg') no-repeat center; background-attachment: fixed; background-size: cover; }
section.w3-contato-cta .overlay{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--primary); opacity: .85; }
.w3-contato-cta-conteudo{ padding: 6rem 0 14rem; position: relative; }
.w3-contato-cta-conteudo .form{ position: absolute; left: 0; margin-left: 10%; padding: 5rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); background-color: var(--white); }
.w3-contato-cta-conteudo .text{ margin-left: calc(40% + 5rem); }
.w3-contato-cta-conteudo .text h1{ font-size: 2.4rem; font-weight: 800; line-height: 1.6; color: var(--white); }
.w3-contato-cta-conteudo .text h2{ font-size: 1.6rem; font-weight: 500; line-height: 1.8; color: var(--base-100); margin-top: 2rem; }

section.w3-depoimentos{ padding: 0rem 0 6rem; }
.w3-depoimentos-conteudo .text{ padding-top: 4rem; }
.w3-depoimentos-conteudo .text h2{ font-size: 1.6rem; font-weight: 500; color: var(--base-400); margin-bottom: 2rem; }
.w3-depoimentos-conteudo .text h1{ font-size: 2.4rem; font-weight: 800; }
.w3-depoimentos-conteudo .cards{ position: relative; }
.w3-depoimentos-conteudo .cards .card{ background-color: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4rem 4rem 4rem 6rem; max-width: 48rem; position: relative; }
.w3-depoimentos-conteudo .cards .card:nth-child(2){ position: relative; top: 0; left: 0; margin-top: 5rem; margin-left: -50%; z-index: 2; }
.w3-depoimentos-conteudo .cards .card blockquote{ font-weight: 500; line-height: 1.8; color: var(--base-500); }
.w3-depoimentos-conteudo .cards .card cite{ position: relative; left: 0; margin-left: -3.3rem; font-weight: 600; font-style: normal; margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.w3-depoimentos-conteudo .cards .card cite svg{ color: var(--base-300); }
.w3-depoimentos-conteudo .cards .card:nth-child(1)::after{
    content: '';
    display: inline-block;
    width: 25rem;
    height: 25rem;
    --quote-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292m-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292'/%3E%3C/svg%3E");
    background-color: var(--base-300);
    -webkit-mask-image: var(--quote-right);
    mask-image: var(--quote-right);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -16rem;
    margin-bottom: -16rem;
    z-index: -1;
}
.w3-depoimentos-clientes{ margin-top: 6rem; }
.w3-depoimentos-clientes .swiper-slide{ text-align: center; }
.w3-depoimentos-clientes .swiper-slide a{ font-size: 0; }
.w3-depoimentos-clientes .swiper-slide .cliente-img{ height: 16rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.w3-depoimentos-clientes .swiper-slide .cliente-img img{ height: 100%; width: 100%; object-fit: contain; }

section.w3-contato{ position: relative; padding: 5rem 0 10rem 0; }
.w3-contato-bg{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 50%; background: linear-gradient(90deg, var(--apoio), var(--apoio-light)); border-radius: 0 8rem 8rem 0; z-index: -1; }
.w3-contato-conteudo form{ width: 100%; max-width: 64rem; }
.w3-contato-conteudo .grid{ border-radius: var(--radius); box-shadow: var(--shadow-lg); background-color: var(--white); padding: 4rem; width: 100%; }
.w3-contato-conteudo .grid h1{ font-size: 2.4rem; font-weight: 800; line-height: 1.6; }
.w3-contato-conteudo .grid h2{ font-size: 1.6rem; font-weight: 500; line-height: 1.8; color: var(--base-500); margin-top: 2rem; margin-bottom: 2rem; }
.w3-contato-conteudo .grid p{ white-space: nowrap; }
.w3-contato-conteudo .grid .btn{ width: 50%; }

.whatsapp-btn{ position: fixed; right: 3%; bottom: 5%; z-index: 9; }
.whatsapp-btn img{ height: 6rem; filter: drop-shadow(5px 5px 15px rgba(var(--black-rgb), .4)); }

footer.w3-rodape{ padding: 12rem 0 10rem; }
.w3-rodape-conteudo .logo{ height: 18rem; }
.w3-rodape-conteudo .logo img{ height: 100%; }
.w3-rodape-conteudo ul{ list-style-type: none; }
.w3-rodape-conteudo ul.redes-sociais li .btn{ color: var(--base-700); background-color: transparent; border: .1rem solid var(--base-700); }
.w3-rodape-copyright{ margin-top: 2rem; }

@media screen and (min-width: 1280px) {
    .w3-menu-btn-mobile,
    .w3-menu-btn-mobile-close{ display: none; }
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    .w3-menu-btn-mobile,
    .w3-menu-btn-mobile-close{ display: none; }

    nav.w3-menu{ padding-left: 2rem; }
    nav.w3-menu ul{ gap: .5rem; }
    nav.w3-menu ul li a{ padding: 0 1rem; font-size: 1.3rem; }

    .w3-cta-topo-conteudo .text h1{ line-height: 1.1; font-size: clamp(2rem, 1rem + 3vw, 4.5rem); }
    @media (orientation: landscape) {
        section.w3-cta-topo {
            height: auto;
            padding: 12rem 0 6rem;
        }
    }

    .w3-features-conteudo .destaques .destaque:first-child{ margin-bottom: 4rem; }

    .w3-contato-cta-conteudo .form{ padding: 3rem; }

    .w3-planos-conteudo .body{ row-gap: 4rem; }

    .w3-depoimentos-conteudo .cards .card:nth-child(1)::after{ margin-right: -12%; }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    .w3-topo-conteudo > .btn:not(.btn-icon){ display: none; }

    .w3-cta-topo-conteudo .text .logo_topo{ display: none; }

    /* .w3-sobre-conteudo .img img{ max-width: 32rem; } */

    
}   
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {
    .w3-topo-conteudo{ position: relative; }
    .w3-topo-conteudo .logo{ flex-grow: 1; }
    .w3-topo-conteudo > .btn{ margin-right: 1.5rem; }

    .w3-menu-btn-mobile{ order: 1; }

    nav.w3-menu{ padding: 5rem; position: fixed; top: 0; right: -100%; height: 100vh; width: 75%;  background: rgba(var(--white-rgb), 0.85); backdrop-filter: blur(.4rem); -webkit-backdrop-filter: blur(.4rem); z-index: 3; box-shadow: none; transition: var(--smooth); opacity: 0; }
    nav.w3-menu ul{ margin-top: 2rem; gap: 1.5rem; flex-direction: column; align-items: flex-end; }
    nav.w3-menu ul li a{ font-size: 2.4rem; font-weight: 600; }
    nav.w3-menu.open{ right: 0; box-shadow: var(--shadow-lg); opacity: 1; }

    .w3-cta-topo-conteudo{ flex-direction: column; padding-top: 15rem; }
    .w3-cta-topo-conteudo .text{ text-align: center; display: flex; flex-direction: column; align-items: center; }
    .w3-cta-topo-conteudo .text h1{ line-height: 1.1; font-size: clamp(2rem, 1rem + 3vw, 4.5rem); }
    .w3-cta-topo-conteudo .img{ width: 100%; margin: 2rem 0 4rem; }
    
    .w3-sobre-conteudo .img{ margin-bottom: 4rem; order: 0; }
    .w3-sobre-conteudo .text{ text-align: center; order: 1; padding: 0 4rem; }
    .w3-sobre-conteudo .text > *{ text-align: center; }

    .w3-features-conteudo .body .box{ padding: 10%; }

    .w3-features-conteudo .destaques .destaque{ flex-direction: column; }
    .w3-features-conteudo .destaques .destaque:first-child{ margin-bottom: 4rem; }
    .w3-features-conteudo .destaques .destaque:first-child .img{ margin-bottom: 2rem; }
    .w3-features-conteudo .destaques .destaque:last-child .img{ margin-top: 2rem; }
    .w3-features-conteudo .destaques .destaque .img{ min-width: 0; }
    .w3-features-conteudo .destaques .destaque .img img{ max-width: 32rem; }

    .w3-contato-cta-conteudo .form{ padding: 3rem; position: relative; margin: 4rem 0 -20rem; order: 1; }
    .w3-contato-cta-conteudo .text{ margin-left: 0; text-align: center; }
    
    .w3-planos-conteudo .body{ row-gap: 4rem; }
    .w3-planos-conteudo .body .box .header{ padding: 4rem 1rem; }
    .w3-planos-conteudo .body .box .header h2{ font-size: 1.4rem; }
    .w3-planos-conteudo .body .box .body{ padding: 0 1rem 4rem; }
    .w3-planos-conteudo .body .box.custom .body .price p{ font-size: 1.8rem; }

    .w3-depoimentos-conteudo .cards{ margin-top: 4rem; }
    .w3-depoimentos-conteudo .cards .card{ width: 80%; }
    .w3-depoimentos-conteudo .cards .card:nth-child(1)::after{ margin-right: 36%; margin-bottom: -63%; }
    .w3-depoimentos-conteudo .cards .card:nth-child(2){ margin-left: 20%; }

    .w3-contato-conteudo .grid .i-2:last-of-type{ flex-direction: column; }
    .w3-contato-conteudo .grid .i-2:last-of-type .btn{ width: 100%; }
}
/* Breakpoint especial */
/* CSS PROJETO */