*{
 font-size: 18px;
}
html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/******** ANIMAÇÕES *******/
@keyframes bg-move-h {
    0%,
    100% {
        background-size: 166%;
        background-position: 0%;
    }
    50% {/* 
        background-size: 133%; */
        background-position: 100%;
    }
}
.bg-move-h{
    animation: bg-move-h 12s ease-in-out infinite;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-10-2 9:55:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in
 * ----------------------------------------
 */
 @-webkit-keyframes scale-in {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes scale-in {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;
    }
  }
  .scale-in {
	-webkit-animation: scale-in 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: scale-in 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
.scale-in-reverse {
	-webkit-animation: scale-in 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both reverse;
	        animation: scale-in 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both reverse;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-10-2 10:33:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  .slide-in-bottom {
	-webkit-animation: slide-in-bottom 1200ms cubic-bezier(0.860, 0.000, 0.070, 1.000) both;
	        animation: slide-in-bottom 1200ms cubic-bezier(0.860, 0.000, 0.070, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-10-7 14:54:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-bottom {
    0% {
      -webkit-transform: translateY(1000px);
              transform: translateY(1000px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  .slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-bottom 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in{
    animation: fade-in 200ms ease-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-10-21 15:32:16
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
 @-webkit-keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
              transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
              transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  .fade-in-bottom {
	-webkit-animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


:nth-child(25),
.a-delay-2400{
    animation-delay: 2400ms;
}

:nth-child(24),
.a-delay-2300{
    animation-delay: 2300ms;
}

:nth-child(23),
.a-delay-2200{
    animation-delay: 2200ms;
}

:nth-child(22),
.a-delay-2100{
    animation-delay: 2100ms;
}

:nth-child(21),
.a-delay-2000{
    animation-delay: 2000ms;
}

:nth-child(20),
.a-delay-1900{
    animation-delay: 1900ms;
}

:nth-child(19),
.a-delay-1800{
    animation-delay: 1800ms;
}

:nth-child(18),
.a-delay-1700{
    animation-delay: 1700ms;
}   

:nth-child(17),
.a-delay-1600{
    animation-delay: 1600ms;
}

:nth-child(16),
.a-delay-1500{
    animation-delay:  1500ms;
}   

:nth-child(15),
.a-delay-1400{
    animation-delay:  1400ms;
}

:nth-child(14),
.a-delay-1300{
    animation-delay:  1300ms;
}

:nth-child(13),
.a-delay-1200{
    animation-delay:  1200ms;
}

:nth-child(12),
.a-delay-1100{
    animation-delay:  1100ms;
}

:nth-child(11),
.a-delay-1000{
    animation-delay:  1000ms;
}

:nth-child(10),
.a-delay-900{
    animation-delay:  900ms;
}

:nth-child(9),
.a-delay-800{
    animation-delay:  800ms;
}

:nth-child(8),
.a-delay-700{
    animation-delay:  700ms;
}

:nth-child(7),
.a-delay-600{
    animation-delay:  600ms;
}

:nth-child(6),
.a-delay-500{
    animation-delay:  500ms;
}

:nth-child(5),
.a-delay-400{
    animation-delay:  400ms;
}

:nth-child(4),
.a-delay-300{
    animation-delay:  300ms;
}

:nth-child(3),
.a-delay-200{
    animation-delay:  200ms;
}

:nth-child(2),
.a-delay-100{
    animation-delay:  100ms;
}
.a-delay-000{
    animation-delay:  0s;
}

/**
 * ----------------------------------------
 * animation shake-fade-h
 * ----------------------------------------
 */

  @keyframes shake-fade-h {
    0% {
        transform: translateX(-8px);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateX(8px);
        opacity: 0;
    }
  }
  
.shake-fade-h {
	-webkit-animation: shake-fade-h 3s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite both;
	        animation: shake-fade-h 3s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite both;
}

@keyframes tooltip {
    0%{
        opacity: 0;
        scale: 0;
    }
    10% {
       opacity: 1; 
    }
    20% {
        scale: 1;
        background-position: 0% 0%;
    }
    40% {
        background-position: 100% 0%;
    }
    60% {
        background-position: 100% 100%;
    }
    80% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/****** FIM ANIMAÇÕES *****/

@font-face {
font-family: 'Acumin Pro Condensed';
    src: url('../fonts/acumin-pro-condensed.otf') format('opentype'),
        url('../fonts/acumin-pro-condensed.ttf') format('truetype'),
        url('../fonts/acumin-pro-condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Acumin Pro Condensed';
    src: url('../fonts/acumin-pro-condensed-bold.otf') format('opentype'),
        url('../fonts/acumin-pro-condensed-bold.ttf') format('truetype'),
        url('../fonts/acumin-pro-condensed-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Acumin Pro Condensed';
    src: url('../fonts/acumin-pro-condensed-black.otf') format('opentype'),
        url('../fonts/acumin-pro-condensed-black.ttf') format('truetype'),
        url('../fonts/acumin-pro-condensed-black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Big Shoulders Display';
    src: url('../fonts/BigShouldersDisplay-Bold.otf') format('opentype'),
        url('../fonts/BigShouldersDisplay-Bold.otf.ttf') format('truetype'),
        url('../fonts/BigShouldersDisplay-Bold.otf.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
body{
    font-family: Acumin Pro Condensed, sans-serif;
}

main{
    background-image: radial-gradient(circle at bottom right, #94C11F80 0%, transparent 30%),
    linear-gradient(120deg,  var(--bs-primary-2) 20%, var(--bs-quaternary) 70%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

details > summary::-webkit-details-marker,
summary::marker {
    content: '';
    display: none;
    opacity: 0;
    visibility: hidden;
}

.bg-primary-2{
    background: var(--bs-primary-2);
}

.navbar{
    transition: 300ms ease-out;
}

.navbar-brand,
.navbar>.container {
    justify-content: center;
}

.navbar-summary{
    margin-left: auto;
}

.navbar-menu,
.footer-menu {
    list-style: none;
}
.navbar-menu li{
    padding-top: 4px;
}
.btn-menu-open {
    box-sizing: border-box;
    width: 44px;
}
.footer-menu {
    font-family: Acumin Pro Condensed, sans-serif;
    font-weight: normal;
}
.btn-menu-close {
    width: 48px;
    height: 48px;
    display: none;
}

footer {
    background: linear-gradient(345deg, #f9f9f9bf, #ffffffed);
    border: solid 1px #fff;
    border-radius: 8px 8px 0px 0px;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-wa {
    bottom: 144px;
}

/****** COMPONENTES *****/

select{
    transition: 200ms ease-out;
    border: solid 2px white;
}

select:focus,
.filtersSelect1 select.focus {
    box-shadow: 0px 2px 16px #bfccf3aa;
    border: solid 2px var(--bs-quaternary);
}

dialog {
    overflow: visible;
    border: unset;
    box-shadow: -1px 1px 6px #000000bf;
}
dialog::backdrop{
    background-color: #000;
    opacity: .75;
}
.dialog-close{
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 100%;
    transform: translate(-66%, -34%);
    box-sizing: border-box;
}
.dialog-p{
    font-size: 48px;
}

/****** Cards *******/
.cards {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: visible;
    scrollbar-width: none;  /* Para Firefox */
    -ms-overflow-style: none;  /* Para Internet Explorer e Edge */
}
.cards::-webkit-scrollbar {
    display: none;  /* Para Chrome, Safari e Opera */
}
/***** Fim Cards *****/

.card,
.btn{
    transition: 200ms ease-out;/* 
    box-shadow: 0px 4px 8px #47268126, 0px 4px 16px #47268126; */
    border-radius: 28px;
}

/***** Botões *****/
:is(.btn, .card):hover,
:is(.btn, .card):focus{
    box-shadow: 0px 4px 8px #47268126, 0px 4px 16px #47268126, 0px 8px 32px #47268126;
}
:is(.btn, .card):active{
    transform: translateY(4px);
    box-shadow: 0px 4px 8px #47268126;
}

.card {
    background: linear-gradient(345deg, rgba(255, 255, 255, 0.75) 33%, rgba(255, 255, 255, 0.5) 100%);
    border: solid 1px #fff3;
    min-height: 90px;
    min-width: 92px;
    width: fit-content;
    height: auto;
    border-radius: 16px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.card:hover{
    transform: translateY(-8px);
    box-shadow: 0px 8px 8px #47268126, 0px 8px 16px #47268126, 0px 16px 32px #47268126;
}
.card-i-eixo {
    width: 54px;
    position: absolute;
    top: 4px;
    right: 8px;
}
.card-tag {
    text-transform: uppercase;
    position: relative;
    background: #00000060;
    color: #fff;
    padding: 4px;
    border: 1px solid #555;
    border-radius: 5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: 200ms ease-out;
    font-size: 12px;
    line-height: .6;
    padding-top: 6px;
}
.card-tag:active {
    background-color: #0009;
    top:1px;
}
.card-tag-eixo {
    width: 24px;
}
.card-tag-area {
    position: absolute;
    left: 10px;
    top: 60%;
}

.btn{
    color: var(--bs-gray-dark);
    border-radius: 40px;
    min-width: 216px;
    width: max-content;
    max-width: 100%;
}
.btn:hover{
    box-shadow: 0px 4px 8px #47268126, 0px 4px 16px #47268126, 0px 8px 32px #47268126;
}
.btn:active{
    transform: translateY(2px);
    box-shadow: 0px 4px 8px #47268126;
}

.btn-primary{/* 
    background-image: linear-gradient(106deg, rgba(115,67,199,1) 33%, rgba(233,101,25,1) 66%, rgba(148,193,31,1) 100%);
    border-image-slice: 1; */
    border: solid 2px var(--bs-primary-2);
    background-color: var(--bs-primary-2);
}
.btn-primary:hover,
.btn-primary:focus{
    background-size: 200%;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover{
    border-color: var(--bs-primary);
}
.btn-primary:active {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}
.btn-secondary,
.btn-tertiary{
    background-color: white;
    border: solid 2px;
}
.btn-secondary{
    border-color: var(--bs-primary-2);
}
.btn-secondary:active {
    border-color: var(--bs-secondary);
}
.btn-tertiary{
    border-color: white;
}
.btn-secondary:hover{
    color: var(--bs-primary);
}
.btn-secondary-label{
    font-family: Acumin Pro Condensed;
    color: var(--bs-primary-2)
}
.btn-secondary:active .btn-secondary-label{
    color: var(--bs-secondary);
}
.btn-quaternary{
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0;
    border: solid 2px white;
}
.btn-bg{
    width: 100%;
    height: 100%;
    min-height: 44px;
    border-radius: 40px;
    background-color: #fff;
    padding: 8px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border: unset;
    outline: unset;
}
.btn-quaternary-bg {/* 
    background: linear-gradient(5deg, #47268166, transparent);
    outline: solid 2px white;*/
    background-color: transparent;
}
.btn-quaternary:hover,
details[open] .summary-quaternary{
    background-color: white;
}
.btn-quaternary:hover .btn-label,
details[open] .summary-quaternary-label{
    color: var(--bs-primary-2);
}
.btn-primary-bg{
    background-color: transparent;
}
.btn-share-bg{
    padding: 0.6rem 0.65rem;
}
.btn-no-icon-bg{
    padding: 0.6rem;
}
.summary-i-seta-branca{
    position: relative;
    transform: rotate(-90deg);
}
.summary-i-seta-branca-path{
    fill: white;
}
details[open=""] .summary-i-seta-branca{
   transform: rotate(90deg);
}
details[open=""] .summary-i-seta-branca-path,
summary:hover .summary-i-seta-branca-path{
    fill: var(--bs-primary-2);
}
.btn-label{
    font-family: Acumin Pro Condensed, sans-serif;
    font-size: 1.12rem;
    font-weight: normal;
    word-break: keep-all;
    line-height: .8;
    padding-top: .2em;
}
.btn-tertiary-label{
    color: var(--bs-primary-2);
    font-weight: bold;
}
.btn-quaternary-label{
    /* font-weight: 500;
    text-shadow: -1px 1px 16px var(--bs-primary); */
    color: white;
} 
.btn-icon{
    min-width: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-icon-img {
    width: 24px;
}
.btn-share-bg {
    padding: .6em 0.7rem;
}
/****** Fim Botões *******/

/******* Slider ********/
.slider-container {
    max-width: 100%;
    position: relative;
    overflow-y: hidden;
}
.slider{
    display: flex;
    align-items: stretch;
    flex-direction: row;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    scrollbar-width: none;  /* Para Firefox */
    -ms-overflow-style: none;  /* Para Internet Explorer e Edge */
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;/* 
    min-height: 86vh; */
}
.slider::-webkit-scrollbar {
    display: none;  /* Para Chrome, Safari e Opera */
}
.slide {
    flex: none;
    flex-basis: 100%;
    max-width: 100%;
    height: 100%;
    scroll-snap-align: center;
}
.slider-indicators {
    position: relative;
    display: flex;
    gap: 8px;
    justify-content: center;
    bottom: 10%;
}
.indicator {
    width: 10px;
    height: 10px;
    border-radius: 4px;
    background-color: transparent;
    border: solid 1px #fff;
    cursor: pointer;
    transition: 300ms ease-out;
}
.indicator.active {
    background-color: #fff;
    width: 20px;
}
@media screen and (max-width: 430px) and (max-height: 932px) and (min-height: 510px){
    .slider-indicators {
        bottom: 16%;
    }
}
/***** Fim Slider ******/

/******* tooltip ******/
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-summary {
    list-style: none;
    pointer-events: none;
}
.btn-icon-tooltip {
    font-size: 14px;
    width: 20px;
    height: 22px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1pt solid transparent;
    /* Borda transparente para o gradiente */
    background-image: linear-gradient(#fafafa, #fafafa), radial-gradient(var(--bs-gray), var(--bs-gray));
    /* Gradiente */
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /* Para aplicar o gradiente na borda */
    outline: 2px solid transparent;
    /* Para criar espaço para a borda */
    outline-offset: -2px;
    /* Ajusta a posição do outline */
    transition: 200ms linear;
}
.tooltip.open .btn-icon-tooltip{
    background-image: linear-gradient(#fafafa, #fafafa), radial-gradient(circle at top left, var(--bs-primary-2) 0%, var(--bs-tertiary-2) 76%, var(--bs-secondary-2) 100%);
}

.tooltip-summary ::-webkit-details-marker {
    display: none;
}

.tooltip-box {
    display: none;
    position: absolute;
    right: 0;
    color: #fff;
    text-align: left;
    border-radius: 32px;
    padding: 4px 24px 6px;
    z-index: 1;
    width: 160px; 
    border: 2px solid #88a934;/* Borda transparente para o gradiente *
    background-image: linear-gradient(#fafafa, #fafafa), radial-gradient(circle at top left, var(--bs-primary-2) 0%, var(--bs-tertiary-2) 76%, var(--bs-secondary-2) 100%);/* Gradiente *
    background-origin: border-box;
    background-clip: padding-box, border-box;/* Para aplicar o gradiente na borda *
    outline: 2px solid transparent;/* Para criar espaço para a borda *
    outline-offset: -2px;/* Ajusta a posição do outline *
    background-size: 200% 200%; */
    background-color: #88a934;
    box-shadow: 0 2px 4px #0001, 0 4px 16px #47268126, 0 8px 24px #47268126;
    transform-origin: center left;
    animation: none;
}
/* A ponta do balão */
.tooltip-box::after {
    content: '';
    position: absolute;
    top: 50%; /* Centraliza verticalmente */
    right: 100%; /* Posiciona à esquerda do balão */
    margin-top: -5px; /* Ajusta a posição vertical da ponta para que sobreponha o balão */
    border-width: 8px 16px; /* Aumenta a largura da ponta na horizontal */
    border-style: solid;
    border-color: transparent #88a934 transparent transparent; /* Cores da ponta */
}
.tooltip.open .tooltip-box{
    animation: tooltip 1s ease-out 1 forwards;
    display: block;
}
.tooltip.closed .tooltip-box{
    animation: scale-in 200ms ease-out 1 reverse forwards;
    display: block;
}
/* .tooltip-bkg{
    width: 100%;
    height: 100%;
    background: #fff;
    background: linear-gradient(160deg, #fff 33%, #e0dbe9 100%);
    padding: 4px;
    box-sizing: border-box;
    border-radius: 4px;
} */
.tooltip-txt {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
}
/***** Fim Tooltip *****/

.footer-logo{
    width: 264px;
}

/******** LAYOUT *******/
.contained {
    max-width: 1170px;
}
.hidden{
    visibility: hidden;
}
@media screen and (max-width: 768px) {
    .d-sm-none{
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .d-lg-flex{
        display: flex;
    }
}
/******** FIM LAYOUT *******/

@media (pointer: fine) {
    .card-tag:hover {
        background-color: #0009;
    }
}

/********** TABLET *********/
@media screen and (min-width:992px) {
    .tooltip-box{
        left: 125%;
        right: unset;/* 
        transform-origin: bottom left; */
    }
}
/******** FIM TABLET *******/

/********** CELULAR PEQUENO *********/
@media screen and (max-width:374px) {
    .tooltip-box{
        width: 240px;
    }
    .card-tag-area {
        top: 55%;
    }
}
/******** FIM CELULAR PEQUENO *******/