@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-700); background-color: #f4f4f4; 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: var(--base-300); 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; }
.oculto{ display: none; }

@media screen and (min-width: 1440px) {
    .centralizador { width: 130rem; }
    .esconde-desktop,
    .hide-desktop{ display:none; }
    .exibe-desktop,
    .show-desktop{ display:block; }

}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .centralizador { width: 95%; max-width: 130rem; }
    .esconde-desktop,
    .hide-desktop{ display:none; }
    .exibe-desktop,
    .show-desktop{ display:block; }    
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    .centralizador { width: 95%; }
    .esconde-desktop,
    .hide-desktop{ display:none; }
    .exibe-desktop,
    .show-desktop{ display:block; }        
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .centralizador { width: 95%; }
    .esconde-celular,
    .hide-mobile{ display:none; }
    .exibe-celular,
    .show-mobile{ display:block; }
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    .centralizador { width: 95%; }
    .esconde-celular,
    .hide-mobile{ display:none; }
    .exibe-celular,
    .show-mobile{ display:block; }    
}

.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(--apoio-dark); color: var(--white); }
.btn-user:active{ background-color: var(--apoio-dark); 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-light{ background-color: var(--apoio-light); color: var(--white); }
.btn-apoio-light:hover{ background-color: var(--apoio); color: var(--white); }
.btn-apoio-light:active{ background-color: var(--apoio); color: var(--white); }
.btn-apoio-light:disabled,
.btn-apoio-light-disabled{ background-color: var(--apoio); color: var(--apoio-light); opacity: .5; }

.btn-apoio-white{ 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: 5rem; font-size: 0; background-color: var(--base-100); border-radius: var(--radius); border: .1rem solid var(--base-500); }
.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); font-size: 1.8rem; }
.item-field :is(input, select, textarea)::placeholder{ font-style: normal; color: var(--apoio-dark); font-weight: 400; }
.item-field input{ padding: 0 2.5rem; }
.item-field select{ padding: 0 4rem 0 2.5rem; }
.item-field :is(textarea){ padding: 2.5rem; 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(--primary); 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 */
body{ margin-top: 11.6rem; }

.btn-rounded{ border-radius: 4rem; }
.btn-outlined-user{ outline: .3rem solid var(--primary); }

.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: 100; }

.title h1{ font-size: var(--clamp-title); color: var(--apoio-dark); text-align: center; line-height: 1.2; }
.title h1 b{ color: var(--primary); }
.title h2{ font-size: var(--clamp-subtitle); color: var(--primary); text-align: center; line-height: 1.2; margin-top: 1rem; }

.swiper{ height: 100%; width: 100%; }
.swiper .swiper-button-next,
.swiper .swiper-button-prev{ width: 5rem; height: 5rem; background-color: rgba(var(--white-rgb), .5); border-radius: 50%; }
.swiper .swiper-button-next:after,
.swiper .swiper-button-prev:after{ font-size: 2rem; }

.w3-social{ display: flex; gap: var(--gap); align-items: center; }
.w3-social li a{ height: 5rem; width: 5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--primary); transition: var(--smooth); }
.w3-social li a:hover{ background-color: var(--apoio-dark); }
.w3-social li a svg{ font-size: 1.8rem; color: var(--white) !important; }

/* POPUP ************************************************************** */
section.w3-popup{
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--white); padding: 4rem 0 0; border-radius: var(--radius); z-index: 101; box-shadow: var(--shadow-lg); max-width: 40rem; width: 100%; min-height: 50%;

    .popup-inner{
        padding: 4rem;

        .popup-header{
            margin-bottom: 2rem;

            .popup-close{
                position: absolute; top: 0; right: 0; margin-top: 1rem; margin-right: 1rem; cursor: pointer; transition: var(--smooth);

                svg{ transition: var(--smooth); }
                svg{ font-size: 2rem; color: var(--base-700); }
                &:hover{ 
                    svg{ color: var(--apoio); }
                }
            }
        }
    }
}

/* POPUP ************************************************************** */

/* HEADER ************************************************************** */
header.w3-header{ position: fixed; top: 0; left: 0; width: 100%; transition: var(--smooth); z-index: 11; background-color: var(--white); }
.w3-topo-conteudo{ display: flex; align-items: center; justify-content: space-between; padding: 3.3rem 0; transition: var(--smooth); }
.w3-topo-conteudo .logo img{ height: 4rem; }
nav.w3-menu{ flex-grow: 1; padding-left: 3rem; display: flex; justify-content: flex-end; }
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; text-align: center; height: 5rem; padding: 0 1rem; font-size: 1.4rem; line-height: 1; font-weight: 500; text-transform: uppercase; color: var(--primary); transition: var(--smooth); letter-spacing: 0.067em; border-radius: var(--radius); }
nav.w3-menu ul li a p{ position: relative; }
nav.w3-menu ul li a p::after{ content: ''; display: block; height: .2rem; width: 0; background-color: var(--apoio); position: absolute; left: 0; top: 100%; transition: var(--smooth); }
nav.w3-menu ul li a:hover p::after{ width: 100%; }
nav.w3-menu ul li a.btn{ color: var(--white); height: 3.5rem; font-size: 1.3rem; }
nav.w3-menu ul li:has(ul.sub-list){ position: relative; }
nav.w3-menu ul li:has(ul.sub-list:hover) > a{ color: var(--white); background-color: var(--primary); }
nav.w3-menu ul li:hover ul.sub-list{ opacity: 1; transform: translateX(0); pointer-events: initial; }
nav.w3-menu ul li ul.sub-list{ min-width: 25rem; position: absolute; left: 0; background-color: var(--white); padding: 1rem; border-radius: var(--radius); box-shadow: var(--shadow); flex-direction: column; align-items: flex-start; opacity: 0; transform: translateX(-1rem); pointer-events: none; transition: var(--smooth); }
nav.w3-menu ul li ul.sub-list li{ width: 100%; }
nav.w3-menu ul li ul.sub-list li a{ color: var(--base-700); text-wrap: auto; justify-content: flex-start; height: auto; line-height: 1.2; padding: .5rem 1rem; text-wrap: auto; min-height: 4rem; }
nav.w3-menu ul li ul.sub-list li a:hover{ color: var(--primary); }
.topo-float{ box-shadow: var(--shadow-lg); background-color: var(--white) !important; }
.topo-float .w3-topo-conteudo{ padding: 1.5rem 0; }

@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: .2; }
    nav.w3-menu ul li a{ padding: 0 .5rem; 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;
        }
    }
}
@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; }
}   
/* 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{ flex-direction: column; align-items: baseline; padding: 5rem 5rem 5rem 2rem; position: fixed; top: 0; right: -100%; height: 100dvh; width: 75%;  background-color: var(--white); z-index: 3; box-shadow: none; transition: var(--smooth); opacity: 0; }
    nav.w3-menu ul{ margin-top: 2rem; gap: .5rem; flex-direction: column; align-items: flex-end; overflow-y: auto; }
    nav.w3-menu ul li a{ text-align: right; font-size: 1.6rem; font-weight: 600; color: var(--apoio); justify-content: flex-end; height: auto; padding: .5rem 1rem; min-height: 4rem; }
    nav.w3-menu.open{ right: 0; box-shadow: var(--shadow-lg); opacity: 1; }

    nav.w3-menu ul li ul.sub-list{ position: relative; background-color: var(--base-200); box-shadow: none; align-items: flex-end; opacity: 1; transform: translateX(0); pointer-events: initial; margin-top: .2rem; }
    nav.w3-menu ul li ul.sub-list li a{ font-size: 1.4rem; padding: .5rem 1rem; height: auto; justify-content: flex-end; text-align: right; min-height: 3rem; }
    nav.w3-menu ul li ul.sub-list::after { content: ''; position: absolute; top: -.9rem; right: 1rem; transform: translateX(-50%); border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1rem solid var(--base-200); }
}
/* Breakpoint especial */
/* HEADER ************************************************************** */


/* HOME ************************************************************** */
section.w3-home-banner{ width: 100%; }
section.w3-home-banner .swiper{ padding-bottom: 3rem; }
section.w3-home-banner .swiper-slide{ font-size: 0; text-align: center; }
section.w3-home-banner .swiper-horizontal>.swiper-pagination-bullets, 
section.w3-home-banner .swiper-pagination-bullets.swiper-pagination-horizontal, 
section.w3-home-banner .swiper-pagination-custom, 
section.w3-home-banner .swiper-pagination-fraction{ bottom: 0; }
section.w3-home-banner .swiper-pagination-bullet,
section.w3-home-banner .swiper-pagination-bullet-active{ background-color: var(--apoio-dark); }

section.w3-home-cta{ padding: 4rem 0 0; }
section.w3-home-cta .box-item{ display: flex; align-items: center; position: relative; }

/* section.w3-home-cta .box-item .img{ width: clamp(26rem, -2.636rem + 38.18vw, 51.5rem); position: absolute; }
section.w3-home-cta .box-item .txt{ flex-grow: 1; margin-left: 19%; max-width: 70%; }
section.w3-home-cta .box-item .txt h2{ background-color: var(--apoio-light); color: var(--apoio-dark); font-weight: 500; font-style: italic; font-family: var(--font-2); font-size: clamp(2.4rem, -0.5rem + 3.9063vw, 7.5rem); line-height: 1; text-align: center; padding: 2.5rem; border-top-right-radius: 5rem; }
section.w3-home-cta .box-item .txt h2 span{ color: var(--white); font-size: clamp(3rem, -0.5rem + 3.9063vw, 11rem); display: block; }
section.w3-home-cta .box-item:last-of-type .txt h2{ font-size: clamp(2rem, -0.5rem + 3.9063vw, 6rem); }
section.w3-home-cta .box-item:last-of-type .txt h2 span{ font-size: clamp(2.4rem, -0.5rem + 3.9063vw, 10.9rem); }
section.w3-home-cta .box-item .txt button{ color: var(--white); font-size: clamp(2rem, -0.5rem + 3.9063vw, 3.5rem); font-weight: 500; text-align: center; display: flex; align-items: center; justify-content: center; background-color: var(--apoio); min-height: 6.8rem; border: 0; width: 100%; cursor: pointer; transition: var(--smooth); }
section.w3-home-cta .box-item .txt button:hover{ background-color: var(--apoio-dark); }
section.w3-home-cta .box-item .txt h2,
section.w3-home-cta .box-item .txt button{ padding-left: 18%; } */

section.w3-home-lojas{ padding: 6rem 0; }
section.w3-home-lojas .content{ margin-top: 5rem; position: relative; --arrow-size: 5rem; padding: 0 var(--arrow-size); }
section.w3-home-lojas .content .swiper-button-prev,
section.w3-home-lojas .content .swiper-button-next{ background-color: var(--apoio); height: var(--arrow-size); width: var(--arrow-size); transform: translateY(-50%); }
section.w3-home-lojas .content .swiper-button-prev svg,
section.w3-home-lojas .content .swiper-button-next svg{ color: var(--white); font-size: 3rem; }
section.w3-home-lojas .content .swiper-button-prev{ left: 0; }
section.w3-home-lojas .content .swiper-button-next{ right: 0; }
section.w3-home-lojas .content .swiper-button-next:after,
section.w3-home-lojas .content .swiper-button-prev:after{ display: none; }
section.w3-home-lojas .content .swiper-slide{ height: auto; }
.loja{ border-radius: 4rem; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; }
.loja .img{ width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.loja .img img{ height: 100%; width: 100%; object-fit: cover; transition: var(--smooth); }
.loja .img:hover .img-overlay{ opacity: 1; }
.loja .img:hover img{ transform: scale(1.1); }
.loja .txt{ padding: 2rem; flex-grow: 1; background-color: var(--apoio-light); color: var(--white); text-align: center; display: flex; flex-direction: column; }
.loja .txt h2{ font-size: 2.4rem; font-weight: 500; text-transform: uppercase; }
.loja .txt h2::after{ content: ''; display: block; height: .1rem; width: min(90%, 20rem); background-color: var(--white); margin: 1.5rem auto; }
.loja .txt ul{ font-size: 1.6rem; line-height: 1.3; flex-grow: 1; }
.loja .txt ul li.tel{ margin: 2rem 0; }
.loja .txt ul li a{ transition: var(--smooth); }
.loja .txt ul li a:hover{ color: var(--apoio-dark); }

section.w3-home-app{ padding: 4rem 0; position: relative; }
section.w3-home-app .txt{ max-width: 48rem; }
section.w3-home-app .txt h1{ font-family: var(--font-2); font-style: italic; font-weight: 600; letter-spacing: -.5rem; font-size: clamp(4.4rem, -0.5rem + 3.9063vw, 6.4rem); color: var(--apoio-light); line-height: 1.2; margin-bottom: 1rem; }
section.w3-home-app .txt > img{ width: min(100%, 48rem); margin: 1.5rem 0; }
/* section.w3-home-app .img{ position: absolute; top: 50%; left: 50%; transform: translateY(-50%); } */

section.w3-home-sobre{ padding: 6rem 0; margin: 6rem 0; background-color: var(--white); }
section.w3-home-sobre .content{ gap: 5rem; }
section.w3-home-sobre .content .txt p{ font-size: 2.2rem; text-align: justify; margin: 5rem 0 4rem; }
section.w3-home-sobre .content .img{ overflow: hidden; font-size: 0; border-radius: 5rem; aspect-ratio: 16/10; box-shadow: var(--shadow-lg); }
section.w3-home-sobre .content .img img{ height: 100%; width: 100%; object-fit: cover; }

section.w3-home-blog{ padding: 4rem 0; }
section.w3-home-blog .content{ margin-top: 4rem; }
section.w3-home-blog .content .swiper{ padding-bottom: 3rem; }
section.w3-home-blog .postagem{ box-shadow: var(--shadow); overflow: hidden; border-radius: 5rem; background-color: var(--white); }
section.w3-home-blog .postagem .img{ width: 100%; aspect-ratio: 16/10; overflow: hidden; }
section.w3-home-blog .postagem .img img{ height: 100%; width: 100%; object-fit: cover; }
section.w3-home-blog .postagem .txt h1{ font-size: clamp(2rem, -0.5rem + 3.9063vw, 2.4rem); letter-spacing: .5rem; margin: 3rem 0; padding: 0 1rem; }
section.w3-home-blog .postagem .txt a{ background-color: var(--apoio-light); color: white; font-size: 1.6rem; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; line-height: 1; transition: var(--smooth); }
section.w3-home-blog .postagem .txt a svg{ color: white; font-size: 2.4rem; transition: var(--smooth); }
section.w3-home-blog .postagem .txt a:hover{ color: white; background-color: var(--apoio-dark); }

section.w3-home-cadastro{ background-color: var(--apoio-light); padding: 6rem 0; margin: 4rem 0; }
section.w3-home-cadastro .content{ gap: 10rem; }
section.w3-home-cadastro .img{ aspect-ratio: 16/10; border-radius: 5rem 0 5rem 0; overflow: hidden; max-width: 56rem; margin: 0 auto; }
section.w3-home-cadastro .img img{ height: 100%; width: 100%; object-fit: cover; }
section.w3-home-cadastro .txt h2{ font-size: clamp(4rem, -0.5rem + 3.9063vw, 4.4rem); color: var(--white); font-family: var(--font-2); line-height: 1; letter-spacing: -.4rem; text-align: center; font-style: italic; margin: 2.5rem 0 4.5rem; }

section.w3-home-contato{ padding: 10rem 0; }
section.w3-home-contato .img img{ max-width: 35rem; }
section.w3-home-contato .img .redes-sociais{ margin-top: 3.5rem; }
section.w3-home-contato .form{ max-width: 48rem; }
section.w3-home-contato .form h1{ font-size: 3.5rem; text-transform: uppercase; color: var(--primary); letter-spacing: .067em; margin-bottom: 2.5rem; }



@media screen and (min-width: 1280px) {
    
}
@media screen and (min-width: 769px) and (max-width: 1279px) {
    /* section.w3-home-cta .box-item:not(:last-of-type){ margin-bottom: 14rem; } */

    section.w3-home-app .txt> img { width: min(100%, 40rem); }

    section.w3-home-sobre .content .img{ aspect-ratio: 1/1; }
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    
}   
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {
    /* section.w3-home-cta{ padding: 0 0 0; }
    section.w3-home-cta .box-item{ flex-direction: column; }
    section.w3-home-cta .box-item:not(:last-of-type){ margin-bottom: 0rem; }
    section.w3-home-cta .box-item .img{ position: relative; bottom: -5rem; }
    section.w3-home-cta .box-item .txt{ margin-left: 0; }
    section.w3-home-cta .box-item .txt h2{ padding-left: 2.5rem; padding-top: 5rem; }
    section.w3-home-cta .box-item .txt a{ padding-left: 0; border-bottom-left-radius: 5rem; }
    section.w3-home-cta .box-item .txt h2 span{ top: 0; } */

    section.w3-home-lojas .content{ --arrow-size: 5.5rem; }

    section.w3-home-app .txt{ margin: 0 auto; text-align: center; }

    section.w3-home-sobre .content .txt{ text-align: center; }

    section.w3-home-cadastro .content{ gap: 5rem; }
    section.w3-home-cadastro .txt h2{ margin: 1.5rem 0 2.5rem; }
}
/* Breakpoint especial */
/* HOME ************************************************************** */

/* PAGES PATTERN ************************************************************** */
section.w3-pages-header{ background-color: var(--apoio-dark); padding: 4rem 0; }
section.w3-pages-header .title h1{ color: var(--white); text-align: center; }
section.w3-pages-header .title h2{ text-align: center; }
.title.has-after h1::after{ content: ''; display: block; height: .4rem; width: 5rem; background-color: var(--apoio); margin: .5rem auto 0; }

.section-title h1{ font-size: var(--clamp-title); color: var(--apoio-light); text-transform: uppercase; letter-spacing: 1rem; }

section.w3-pages-content{ padding: 9rem 0; }
/* PAGES PATTERN ************************************************************** */

/* SOBRE ************************************************************** */
section.w3-sobre-empresa{ padding: 8rem 0; }
section.w3-sobre-empresa .content{ gap: 4rem; max-width: 86rem; margin: 0 auto; }
section.w3-sobre-empresa .content .video{ width: 100%; font-size: 0; aspect-ratio: 16/9; overflow: hidden; box-shadow: var(--shadow-lg); border-radius: var(--radius); margin-bottom: 8rem; }
section.w3-sobre-empresa .content .video iframe{ width: 100%; height: 100%; object-fit: cover; }
section.w3-sobre-empresa .content .txt h1{ text-align: left; margin-bottom: 3rem; }
section.w3-sobre-empresa .content .txt p{ text-align: justify; font-size: 1.8rem; font-weight: 300; margin-top: 2.14em; margin-bottom: -.46em; word-break: break-word; }

section.w3-sobre-galeria .content{ position: relative; --arrow-galeria-size: 6rem; padding: 0 var(--arrow-galeria-size); }
section.w3-sobre-galeria .content .swiper-button-next,
section.w3-sobre-galeria .content .swiper-button-prev{ width: var(--arrow-galeria-size); height: var(--arrow-galeria-size); display: grid; place-items: center; }
section.w3-sobre-galeria .content .swiper-button-next{ right: 0; }
section.w3-sobre-galeria .content .swiper-button-prev{ left: 0; }
section.w3-sobre-galeria .content .swiper-button-next svg,
section.w3-sobre-galeria .content .swiper-button-prev svg{ font-size: 4rem; color: var(--apoio-light); }
section.w3-sobre-galeria .content .swiper-button-next::after, 
section.w3-sobre-galeria .content .swiper-button-prev::after{ content: none; }

@media screen and (min-width: 1280px) {
    
}
@media screen and (min-width: 769px) and (max-width: 1279px) {

}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    .w3-sobre-clientes section.w3-home-clientes{ margin-bottom: 0; }
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
    section.w3-sobre-missao .content .txt ul{ margin-bottom: 2rem; }
    section.w3-sobre-missao .content .txt ul li img{ width: 5rem; }
}   
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {

}
/* SOBRE ************************************************************** */


/* TRABALHE CONOSCO ************************************************************** */
section.w3-trabalhe-conosco .content{ gap: calc(var(--gap) * 4); }
section.w3-trabalhe-conosco .content img{ max-width: 35rem; }
section.w3-trabalhe-conosco .content .txt{ margin-bottom: 6rem; }
section.w3-trabalhe-conosco .content .txt p{ text-align: justify; font-size: 1.8rem; line-height: 2; font-weight: 300; margin-top: 2.14em; margin-bottom: -.46em; word-break: break-word; }

section.w3-trabalhe-conosco .form h1{ font-size: 3.5rem; text-transform: uppercase; color: var(--primary); letter-spacing: .067em; margin-bottom: 2.5rem; }
section.w3-trabalhe-conosco .form fieldset{ background-color: transparent; border-color: transparent; margin: calc(var(--gap) / 2) 0; }
section.w3-trabalhe-conosco .form fieldset .capsule{ border-color: var(--base-500); }

@media screen and (min-width: 1280px) {
    
}
@media screen and (min-width: 769px) and (max-width: 1279px) {

}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  
}
@media only screen and (min-width: 0px) and (max-width: 480px) {

}   
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {

}
/* TRABALHE CONOSCO ************************************************************** */

/* TABLOIDES ************************************************************** */
section.w3-tabloides .content-item{ font-size: 0; background-color: var(--primary); overflow: hidden; }
section.w3-tabloides .content-item a img{ transition: var(--smooth); height: 100%; width: 100%; object-fit: cover; }
section.w3-tabloides .content-item a:hover img{ opacity: .5; }

/* TABLOIDES ************************************************************** */


/* CONTATO ************************************************************** */
section.w3-contato-info{ margin: 4rem 0 0; }
section.w3-contato-info .map h2{ text-align: left; margin-bottom: 2rem; }
section.w3-contato-info .map iframe{ aspect-ratio: 2/1; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
section.w3-contato-info .info h2{ text-align: left; }
section.w3-contato-info .info p{ text-align: justify; margin: 2rem 0; font-size: 1.5rem; }
section.w3-contato-info .info ul li{ margin-bottom: 1rem; }
section.w3-contato-info .info ul li a{ transition: var(--smooth);}
section.w3-contato-info .info ul li a:hover{ color: var(--primary); }
section.w3-contato-info .info ul li svg{ margin-right: 1rem; }
section.w3-contato-info .info ul li svg:not([data-icon*="whatsapp"]){ color: var(--apoio); }

section.w3-contato-form{ position: relative; padding: 5rem 0 10rem 0; margin: 8rem 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 h2{ margin-bottom: 2rem; }
.w3-contato-conteudo .grid p{ font-size: 1.5rem; }
.w3-contato-conteudo .grid .btn{ width: 50%; }
.w3-contato-conteudo .grid .btn + p{ text-wrap: nowrap; }

@media screen and (min-width: 1280px) {
    
}
@media screen and (min-width: 769px) and (max-width: 1279px) {

}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  
}
@media only screen and (min-width: 0px) and (max-width: 480px) {

}   
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {

}
/* CONTATO ************************************************************** */

/* RODAPÉ ************************************************************** */
.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: 6rem 0; background-color: var(--primary); }
.w3-rodape-copyright{ color: var(--white); font-size: 2rem; text-align: center; }

@media screen and (min-width: 1280px) {
    
}
@media screen and (min-width: 769px) and (max-width: 1279px) {

}
@media only screen and (min-width: 481px) and (max-width: 768px) {
    
}
@media only screen and (min-width: 0px) and (max-width: 480px) {

}   
/* Breakpoint especial */
@media only screen and (min-width: 0px) and (max-width: 768px) {

}
/* RODAPÉ ************************************************************** */

/*************************************** COMEÇO DO BLOG ***************************************/
.w3-blog{ margin-top: 8rem; padding-top: 6rem;
    --color-client1: var(--primary);
    --color-client2: var(--apoio);
}
.w3-blog > h1{ margin-bottom: 35px; }
.w3-blog > h1 em{ font-size: 35px; font-style: normal; font-weight: 600; color: var(--color-client1); }

.w3-blog-conteudo-timeline{ width: calc(100% - 27rem); padding-right: 2rem; }
section.w3-blog-conteudo-timeline-post{ margin-bottom: 4rem; padding-bottom: 2rem; border-bottom: thin solid rgba(0, 0, 0, 0.1); }
.w3-blog-conteudo-timeline-post-data{ width: 10rem; }
.w3-blog-conteudo-timeline-post-data-dia{ padding: 0 .8rem; text-transform: lowercase; }
.w3-blog-conteudo-timeline-post-data-ano{ transform: rotate(-90deg); position: relative; top: 7.5rem; left: -1.6rem; line-height: 1; font-size: 60px; font-weight: 600; color: var(--color-client1); }
.w3-blog-conteudo-timeline-post-txt{ width: calc(100% - 10rem); }
.w3-blog-conteudo-timeline-post-txt-img{ width: 100%; height: 32rem; margin-bottom: 2rem; overflow: hidden; border-radius: var(--radius); transition: .3s; }
.w3-blog-conteudo-timeline-post-txt-img a{ width: 100%; height: 100%; }
.w3-blog-conteudo-timeline-post-txt-img:hover{ transform: scale(0.99); transition: .3s; box-shadow: none; }
.w3-blog-conteudo-timeline-post-txt-img a img{ width: 100%; height: auto; max-width: none; }
.w3-blog-conteudo-timeline-post-txt-tag{ margin: .5rem 0 1rem; }
.w3-blog-conteudo-timeline-post-txt-tag a{ font-weight: 600; color: var(--color-client1); }
.w3-blog-conteudo-timeline-post-txt-noticia{ line-height: 1.8; min-height: 8rem; }
.w3-blog-conteudo-timeline-post-txt-noticia .js-shave-char{ display: inline-block !important; }

aside.w3-blog-conteudo-arquivo{ width: 27rem; padding: 0 1rem; }
.w3-blog-conteudo-arquivo-box{ margin-bottom: 4rem; }
.w3-blog-conteudo-arquivo-box-titulo{ border-bottom: thin solid rgba(0, 0, 0, .1); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.w3-blog-conteudo-arquivo-box-titulo h2::after{ content: ''; display: block; height: .1rem; width: 4rem; background-color: #333; position: relative; top: 1.6rem; }
.w3-blog-conteudo-arquivo-box-corpo ul li{ margin-bottom: 1rem; }
.w3-blog-conteudo-arquivo-box-corpo ul li i{ display: flex; align-items: center; font-size: 8px; color: var(--color-client1); margin-right: 1rem; }
.w3-blog-conteudo-arquivo-box-corpo ul li a:hover{ text-decoration: underline; }

.blog-arquivo-popular{ margin-bottom: 1.5rem; }
.blog-arquivo-popular-img{ width: 5rem; height: 5rem; overflow: hidden; font-size: 0; border-radius: var(--radius); }
.blog-arquivo-popular-img img{ height: 100%; width: 100%; object-fit: cover; }
.blog-arquivo-popular-txt{ width: calc(100% - 4rem); padding-left: 1.5rem; line-height: 1; transition: var(--smooth); }
.blog-arquivo-popular-txt:hover{ color: var(--color-client2); }

.blog-arquivo-instagram a{ height: auto; width: 33.333%; font-size: 0; padding: .4rem; border: thin solid transparent; transition: .3s; }
.blog-arquivo-instagram a:hover{ border: thin solid #3c88b5; transition: .3s; }

.blog-form-box{ height: 4rem; }
.blog-form-box input{ background: var(--color2); height: 100%; width: calc(100% - 4rem); padding: 0 1rem; border: 0; }
.blog-form-box input:focus,
.blog-form-box button:focus{ outline: 0; }
.blog-form-box button{ background: var(--white); color: var(--color3); height: 100%; width: 4rem; border: 0; cursor: pointer; transition: var(--smooth); }
.blog-form-box button:hover{ background: var(--white); }
.blog-form-box button svg{ color: var(--colorclient1); }

.blog-arquivo-tag{ border: thin solid rgba(0, 0, 0, .1); border-radius: var(--radius); display: inline-block; padding: .5rem 1rem; margin-bottom: .4rem; }

.w3-blog-paginacao ul{ list-style: none; }
.w3-blog-paginacao ul li{ margin: .2rem; height: 4rem; width: 4rem; }
.w3-blog-paginacao ul li a{ height: 4rem; width: 4rem; border: thin solid rgba(0, 0, 0, .1); border-radius: var(--radius); }
.w3-blog-paginacao ul li.paginacao-prev a,
.w3-blog-paginacao ul li.paginacao-next a,
.w3-blog-paginacao ul li.paginacao-ellipsis{ border: none; }
.paginacao-ativo{ background-color: #3c88b5; color: #FFF; }
.paginacao-ativo:hover{ background-color: #3c88b5; color: #FFF; }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {

    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .w3-blog-conteudo-timeline-post-txt-img{ height: 25rem; }
}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .w3-blog-conteudo{ flex-wrap: wrap; }
    .w3-blog-conteudo-timeline{ width: 100%; padding-left: 2rem; }
    .w3-blog-conteudo-timeline-post-txt-img{ height: 20rem; }

    aside.w3-blog-conteudo-arquivo{ width: 100%; padding: 2rem; margin-top: 6rem; display: flex; flex-wrap: wrap; }

}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .w3-blog-conteudo{ flex-wrap: wrap; }
    .w3-blog-conteudo-timeline{ width: 100%; padding-left: 2rem; }
    .w3-blog-conteudo-timeline-post-data{ width: 8rem; }
    .w3-blog-conteudo-timeline-post-data-ano{ left: -.5rem; top: 9.5rem; }
    .w3-blog-conteudo-timeline-post-txt{ width: calc(100% - 8rem); min-height: 20rem; }
    .w3-blog-conteudo-timeline-post-txt-img{ height: 10rem; }
    .w3-blog-conteudo-timeline-post-txt-titulo{ font-size: 1.8rem; }
    .w3-blog-conteudo-timeline-post-txt-noticia{ margin-top: 1rem; }

    aside.w3-blog-conteudo-arquivo{ width: 100%; padding: 2rem; margin-top: 6rem; display: flex; flex-wrap: wrap; }
}
/*************************************** FIM DO BLOG ***************************************/


/*************************************** COMEÇO DA POSTAGEM ***************************************/
.w3-postagem{ min-height: 100vh; border-bottom: thin solid rgba(0, 0, 0, .1); }
.w3-postagem-img{ width: 40%; overflow: hidden; }
.w3-postagem-img img{ height: 100%; width: auto; max-width: none; position: fixed; }
.parallax-window{ height: 100% !important; background: cover; }

.w3-postagem-conteudo{ width: 60%; margin-top: 0; padding: 8rem 5%; }

.w3-postagem-conteudo-txt-titulo{ margin: .5rem 0 1rem; }
.w3-postagem-conteudo-txt-titulo h1{ font-size: 25px; color: var(--color-client1); font-weight: 600; }
.w3-postagem-conteudo-txt-data{ margin-bottom: 2rem; }
.w3-postagem-conteudo-txt-compartilhar{ margin-bottom: 4rem; }
.w3-postagem-conteudo-txt-compartilhar::before{ content: ''; display: block; visibility: visible; height: .1rem; width: 50%; background: -webkit-linear-gradient(0deg, #FFFFFF, #D8D8D8, #FFFFFF); margin: 1rem auto; }
.w3-postagem-conteudo-txt-compartilhar h3{ margin-bottom: 1rem; letter-spacing: .1rem; text-align: center; }
.w3-postagem-conteudo-txt-compartilhar ul{ width: 100%; list-style: none; }
.w3-postagem-conteudo-txt-compartilhar ul li{ margin: 0 .3rem; }
.w3-postagem-conteudo-txt-compartilhar ul li a{ display: flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; }
.w3-postagem-conteudo-txt-compartilhar ul li a svg{ font-size: 14px; }
.w3-postagem-conteudo-txt-texto strong{ font-weight: 700; }
.w3-postagem-conteudo-txt-texto{ line-height: 1.6; font-weight: 400; font-size: 22px; }
.w3-postagem-conteudo-txt-texto h2,
.w3-postagem-conteudo-txt-texto h3,
.w3-postagem-conteudo-txt-texto h4,
.w3-postagem-conteudo-txt-texto h5,
.w3-postagem-conteudo-txt-texto h6{ font-weight: bolder; }
.w3-postagem-conteudo-txt-texto ol,
.w3-postagem-conteudo-txt-texto ul{ list-style-position: inside; }
.w3-postagem-conteudo-txt-texto p{ line-height: 1.8; }
.w3-postagem-conteudo-txt-texto p a{ color: #3c88b5; }
.w3-postagem-conteudo-txt-texto p a:hover{ text-decoration: underline; }
.w3-postagem-conteudo-txt-texto blockquote::before,
.w3-postagem-conteudo-txt-texto blockquote::after{ content: ''; display: block; width: 100%; height: .1rem; background: -webkit-linear-gradient(0deg, #FFFFFF, #D8D8D8, #FFFFFF); margin: 2rem 0; }
.w3-postagem-conteudo-txt-texto blockquote{ text-align: center; font-family: 'Libre Baskerville', serif; color: #333; font-style: italic; font-size: 3rem; }
.w3-postagem-conteudo-txt-texto cite{ text-align: center; font-size: 1.6rem; font-style: initial; margin-top: 1rem; display: block; color: #D8D8D8; font-family: 'Work Sans', 'Helvetica', 'Arial', sans-serif; }
.w3-postagem-conteudo-txt-texto img{ margin: 2rem 0; width: 100%; padding: 0 5%; }
.w3-postagem-conteudo-txt-texto iframe{ margin: 2rem 0; width: 100%; padding: 0 5%; }
.w3-postagem-conteudo-txt-assinatura{ margin-top: 6rem; margin-bottom: 4rem; }
/* .w3-postagem-conteudo-txt-assinatura::after{ content: ''; height: .1rem; width: 25rem; background: -webkit-linear-gradient(0deg, #FFFFFF, #D8D8D8, #FFFFFF); visibility: initial; position: absolute; margin-top: 5rem; } */
.w3-postagem-conteudo-txt-assinatura-img{ height: 4.5rem; width: 4.5rem; border-radius: 50%; border: thin solid rgba(0, 0, 0, .05); overflow: hidden; margin-right: 1.5rem; }
.w3-postagem-conteudo-txt-assinatura-img img{ height: 100%; width: auto; max-width: none;  }

.w3-postagem-conteudo-relacionados{ margin-top: 12rem; padding-top: 6rem; border-top: thin solid rgba(0, 0, 0, .1); }
.w3-postagem-conteudo-relacionados h2{ letter-spacing: .3rem; margin-bottom: 4rem; }
.w3-postagem-conteudo-relacionados-individual{ margin: 2rem 0; }
.w3-postagem-conteudo-relacionados-individual-img{ height: 10rem; width: 10rem; overflow: hidden; border-radius: var(--radius); }
.w3-postagem-conteudo-relacionados-individual-img img{ height: 100%; width: auto; max-width: none; }
.w3-postagem-conteudo-relacionados-individual-txt{ width: calc(100% - 10rem); padding-left: 2rem; }
.w3-postagem-conteudo-relacionados-individual-txt-tag{ margin-bottom: 1rem; }

.w3-postagem-conteudo-comentarios{ margin-top: 12rem; padding-top: 6rem; border-top: thin solid rgba(0, 0, 0, .1); }
.w3-postagem-conteudo-comentarios h2{ letter-spacing: .3rem; margin-bottom: 4rem; }
.w3-postagem-conteudo-comentarios-individual{ margin: 2rem 0; }
.w3-postagem-conteudo-comentarios-individual-img{ height: 5rem; width: 5rem; overflow: hidden; border-radius: 50%; }
.w3-postagem-conteudo-comentarios-individual-img img{ height: 100%; width: auto; max-width: none; }
.w3-postagem-conteudo-comentarios-individual-txt{ width: calc(100% - 5rem); padding-left: 2rem; }
.w3-postagem-conteudo-comentarios-individual-txt-info{ margin-bottom: .5rem; }
.w3-postagem-conteudo-comentarios-individual-txt-info span.comentario-info-nome{ margin-right: .5rem; }
.w3-postagem-conteudo-comentarios-individual-txt-info span.comentario-info-data i{ margin-right: .5rem; }

.w3-postagem-conteudo-comentarios-individual-resposta{ width: calc(100% - 8.5rem); margin-left: 8.5rem; }
.w3-postagem-conteudo-comentarios-individual-resposta::before{ content: ''; display: block; width: 4.5rem; height: 3.5rem; border-left: thin solid rgba(0, 0, 0, .1); border-bottom: thin solid rgba(0, 0, 0, .1); position: absolute; margin-top: -1rem; margin-left: -6rem; }

.w3-postagem-conteudo-comentarios-form{ margin-top: 6rem; }
.w3-postagem-conteudo-comentarios-form h3{ margin-bottom: 2rem; }
.comentarios-form-box{ height: 4rem; margin-bottom: 1.6rem; border: thin solid rgba(0, 0, 0, .1); border-radius: .5rem; }
.comentarios-form-box input{ background: transparent; height: 100%; width: 100%; max-width: 100%; max-height: 100%; padding: 0 1.5rem; }
.comentarios-form-box-textarea{ height: 14rem; margin-bottom: 1.6rem; border: thin solid rgba(0, 0, 0, .1); border-radius: .5rem; }
.comentarios-form-box-textarea textarea{ background: transparent; height: 100%; width: 100%; max-width: 100%; max-height: 100%; min-width: 100%; min-height: 100%; padding: 1.5rem; }
.comentarios-form-box button{ background: transparent; height: 100%; width: 100%; padding: 0 1.5rem; }
.comentarios-form-box a{ height: 100%; width: 100%; border-radius: .4rem; }

.w3-obrigado-text{ margin-top: 100px; }
.w3-obrigado-text .text{ margin: 20px 10px 50px 10px; font-size: 16px; line-height: 1.5; }
.w3-obrigado-text .w3-btn{ margin: 20px 0;  }

/* ******************* */
/*    DESKTOP LARGE    */
/* ******************* */
@media screen and (min-width: 1320px) {

    
}

/* ******************* */
/*        DESKTOP      */
/* ******************* */
@media screen and (min-width: 1024px) and (max-width: 1319px) {
    .w3-postagem{ border-bottom: none; }
    .w3-postagem-img{ display: none; }
    .w3-postagem-conteudo{ width: 100%; }
}

/* ******************* */
/*       TABLET        */
/* ******************* */
@media only screen and (min-width: 641px) and (max-width: 1023px) {
    .w3-postagem{ border-bottom: none; }
    .w3-postagem-img{ display: none; }
    .w3-postagem-conteudo{ width: 100%; }
}

/* ******************* */
/*       CELULAR       */
/* ******************* */
@media only screen and (max-width: 640px) {
    .w3-postagem{ border-bottom: none; }
    .w3-postagem-img{ display: none; }
    .w3-postagem-conteudo{ width: 100%; }

    .w3-postagem-conteudo-relacionados-individual-img{ height: 5rem; width: 5rem; }
    .w3-postagem-conteudo-relacionados-individual-txt{ width: calc(100% - 5rem); padding-left: 1.5rem; }
    .w3-postagem-conteudo-relacionados-individual-txt-tag{ font-size: 1.4rem; margin-bottom: .5rem; }
    .w3-postagem-conteudo-relacionados-individual-txt-titulo{ font-size: 1.4rem; }

    .w3-postagem-conteudo-comentarios{ margin-top: 6rem; }
    .w3-postagem-conteudo-comentarios-individual-txt{ padding-left: 1rem; }
    .comentario-info-nome{ font-size: 1.4rem; }
    .comentario-info-data{ font-size: 1.2rem; }
    .comentario-info-data i{ font-size: 1rem; }
    .w3-postagem-conteudo-comentarios-individual-txt-texto{ font-size: 1.4rem; }
    .w3-postagem-conteudo-comentarios-individual-resposta{ width: calc(100% - 5.5rem); margin-left: 5.5rem; }
    .w3-postagem-conteudo-comentarios-individual-resposta::before{ width: 2.5rem; margin-left: -3.2rem; }
}
/*************************************** FIM DA POSTAGEM ***************************************/


/* CSS PROJETO */