#site-header[data-scrolled="true"] #menu-menu-esquerdo > li.menu-item:first-of-type:has(ul.sub-menu) {
    background-color: #FD000D;
    color: white;
}

#menu-menu-esquerdo > li.menu-item:first-of-type:has(ul.sub-menu) {
    background-color: white;
    padding: 10px 12px;
    border-radius: 4px !important;
    color: #FD000D;
}

#menu-menu-esquerdo > li.menu-item:first-of-type:has(ul.sub-menu) > a {
    padding-left: 26px;    
    position: relative;
}

#menu-menu-esquerdo > li.menu-item:first-of-type:has(ul.sub-menu) > a::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%; 
    top: 50%;
    left: 0;
    z-index: 10;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 5H2V3.5H17V5Z' fill='%23FD000D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 9.50024H2V8.00024H17V9.50024Z' fill='%23FD000D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 13.9998H2V12.4998H17V13.9998Z' fill='%23FD000D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

#site-header[data-scrolled="true"] #menu-menu-esquerdo > li.menu-item:first-of-type:has(ul.sub-menu) > a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 5H2V3.5H17V5Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 9.50024H2V8.00024H17V9.50024Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17 13.9998H2V12.4998H17V13.9998Z' fill='white'/%3E%3C/svg%3E");
}


.menu-header-mobile-tex > .menu-item > a {
    font-weight: 700;
    color: #FD000D;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; 
    letter-spacing: 0.4px;
}

.menu-header-mobile-tex > .menu-item .menu-item {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
    letter-spacing: 0.32px;
    color: #171717;
}


@media (min-width: 1024px) {


    .menu-header-tex > .menu-item-has-children > .sub-menu {
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        position: absolute;
        top: 100%;
        left: 0;
        flex-shrink: 0;
        background: white;
        border-radius: 8px; 
        padding: 16px;
        z-index: 100;
        flex-direction: column;
        transition: opacity 0.2s ease-out, visibility 0.2s ease-out, transform 0.2s ease-out; 
    }

    #site-header .menu-header-tex > .menu-item-has-children > .sub-menu {
        top: calc(100% + 16px);
    }

    #site-header .menu-header-tex > .menu-item-has-children > .sub-menu::before {
        content: "";
        height: 16px;
        width: 100%;
        position: absolute;
        top: -16px;
        left: 0;
        z-index: 10;
    }

    #site-header[data-scrolled="true"] .menu-header-tex > .menu-item-has-children > .sub-menu {
        top: calc(100% + 24px);
    }

    #site-header[data-scrolled="true"] .menu-header-tex > .menu-item-has-children > .sub-menu::before {
        height: 24px;
        top: -24px;
    }

    .menu-header-tex > .menu-item-has-children > .sub-menu:has(.menu-item > .sub-menu) {
        min-width: 320px;
        padding: 24px 0px 24px 16px;
        border-radius: 8px;
    }

    .menu-header-tex > .menu-item-has-children > .sub-menu:not(:has(.menu-item > .sub-menu)) li a {
        padding: 4px 8px;
    } 

    .menu-header-tex .menu-item {
        position: static; 
        display: flex;
        flex-shrink: 0;
    }

    #menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu) > .sub-menu li {
        min-width: 240px;
    }

    #menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu) > .sub-menu {
        display: none;
        position: absolute;
        left: 100%; 
        top: 0;
        min-height: 100%;

        background: white;
        border-radius: 0 8px 8px 0;
        padding: 24px 16px 24px 0px;
        width: auto;
        flex-shrink: 0;
        align-content: start;

    }

    /* 2. Mostra o sub-menu apenas no Hover do item pai */
    #menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu):hover > .sub-menu {
        display: grid; /* Aqui ele vira grid! */
        grid-template-columns: 1fr 1fr; 
    }

    #menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu) > .sub-menu .menu-item a {
        padding: 6px 8px;
        flex-shrink: 0;
    }


    .menu-header-tex > li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0); 
    }

    .menu-header-tex .sub-menu li a {
        display: flex;
        padding: 8px 12px;
        color: #171717;
        width: 100%;
        justify-content: space-between;
        text-wrap: nowrap;
        text-decoration: none;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.32px;
    }
    .menu-header-tex .sub-menu li:hover > a {
        color: #FD000D;
        background-color: rgba(255, 168, 177, 0.44);
        border-radius: 4px;
        font-weight: 700;
    }

    .menu-header-tex .sub-menu:has(.menu-item-has-children:hover) {
        border-radius: 8px 0px 0px 8px !important;
    }

    .menu-header-tex > .menu-item > .sub-menu:has(.sub-menu) > .menu-item {
        padding-right: 24px;
    }

    .menu-header-tex .sub-menu .menu-item .sub-menu > li:hover > a {
        background-color: #F3F3F3;
        color: #0A0A0A;
    }


    #menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu) > .sub-menu::after {
        content: "";
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        grid-column: 2;
        top: 24px;
        right: 16px;
        aspect-ratio: 1/1;
        margin-left: 24px;
        grid-row: 1 / span 10;
        min-height: 200px;
    }
}

#menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu) > a::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 10L5.5 5.5L1 1' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 7px;
    height: 11px;
    float: right;
    font-weight: bold;
    margin-left: 10px;
}

#menu-menu-esquerdo .sub-menu .menu-item:has(.sub-menu):hover > a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 10L5.5 5.5L1 1' stroke='%23FD000D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.menu-header-tex > .menu-item {
    position: relative;
    display: flex;
    align-items: center;
}

.menu-header-tex > .menu-item:not(:first-of-type):has(.sub-menu) > a {
    padding-right: 26px;    
    position:  relative;
}

.menu-header-tex > .menu-item:not(:first-of-type):has(.sub-menu) > a::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%; 
    top: 50%;
    right: 0;
    z-index: 10;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.9999 12.5438L16.0254 7.5L17 8.47809L10.9999 14.5L5 8.47809L5.97452 7.5L10.9999 12.5438Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

#site-header[data-scrolled="true"] .menu-header-tex > .menu-item:not(:first-of-type):has(.sub-menu) > a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.9999 12.5438L16.0254 7.5L17 8.47809L10.9999 14.5L5 8.47809L5.97452 7.5L10.9999 12.5438Z' fill='%234B4B4B'/%3E%3C/svg%3E");
}
    

/*FOOTER*/

.content_footer {
 position: relative;
}

.content_footer::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%; 
    top: 0;
    left: 0;
    z-index: 10;
    width: 100px;
    height: 202px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='202' viewBox='0 0 100 202' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-74.992 -178C-74.471 -178 -73.998 -177.982 -73.5171 -177.982L-32.8211 -34.7873H99.0862C99.4069 -33.7349 99.7115 -32.6642 100 -31.6209L-6.6817 56.8746L34.0223 199.923C33.2127 200.618 32.3791 201.341 31.5935 202L-53.8384 131.075V31.836H-18.3767V-8.69624H-131.615V31.836H-96.1536V131.075L-181.586 201.973C-182.347 201.295 -183.213 200.618 -184.014 199.923L-143.318 56.8746L-250 -31.6117C-249.687 -32.655 -249.423 -33.7258 -249.062 -34.7782H-117.219L-76.4829 -177.982C-75.9939 -177.982 -75.4729 -178 -74.992 -178Z' fill='%23FD000D'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
}
.content_footer::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%; 
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 263px;
    height: 297px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='263' height='297' viewBox='0 0 263 297' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M312.014 0C312.943 0 313.786 0.0355947 314.644 0.0355947L387.199 278.511H622.371C622.942 280.558 623.486 282.64 624 284.669L433.802 456.769L506.371 734.96C504.928 736.313 503.442 737.719 502.041 739L349.728 601.07V408.076H412.951V329.251H211.063V408.076H274.286V601.07L121.973 738.947C120.616 737.63 119.072 736.313 117.643 734.96L190.198 456.769L0 284.687C0.557347 282.658 1.02895 280.575 1.67204 278.529H236.73L309.356 0.0355947C310.228 0.0355947 311.157 0 312.014 0Z' fill='%23FD000D'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
    .content_footer::before {
        top: inherit;
        bottom: 0;
        left: 0;
        width: 274px;
        height: 240px;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='274' height='240' viewBox='0 0 274 240' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M-0.273621 0C0.54129 0 1.28098 0.0279178 2.03323 0.0279178L65.685 218.443H271.998C272.5 220.048 272.976 221.682 273.428 223.273L106.569 358.256L170.233 576.447C168.967 577.508 167.663 578.611 166.435 579.616L32.8123 471.435V320.064H88.2772V258.24H-88.837V320.064H-33.372V471.435L-166.994 579.574C-168.185 578.541 -169.539 577.508 -170.793 576.447L-107.141 358.256L-274 223.287C-273.511 221.696 -273.097 220.062 -272.533 218.457H-66.32L-2.60556 0.0279178C-1.84079 0.0279178 -1.02588 0 -0.273621 0Z' fill='%23FD000D'/%3E%3C/svg%3E");
    }

    .content_footer::after {
        top: 0;
        bottom: inherit;
        left: inherit;
        right: 0;
        width: 161px;
        height: 329px;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='161' height='329' viewBox='0 0 161 329' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M273.726 -251.044C274.541 -251.044 275.281 -251.016 276.033 -251.016L339.685 -32.601H545.998C546.5 -30.9957 546.976 -29.3625 547.428 -27.7712L380.569 107.212L444.233 325.403C442.967 326.464 441.663 327.567 440.435 328.572L306.812 220.39V69.0199H362.277V7.19586H185.163V69.0199H240.628V220.39L107.006 328.53C105.815 327.497 104.461 326.464 103.207 325.403L166.859 107.212L0 -27.7572C0.488954 -29.3486 0.902684 -30.9818 1.46686 -32.5871H207.68L271.394 -251.016C272.159 -251.016 272.974 -251.044 273.726 -251.044Z' fill='%23FD000D'/%3E%3C/svg%3E");

    }

}


.menu-footer-text > .menu-item > a{
    font-weight: bold;
}

.banner_principal a {
    height: 32px !important;
}
.wc-home-institucional a,
.banner_principal a,
.institucional_banner p a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px; 
    transition: all 300ms ease-out;
    border-radius: 4px;
    background-color: #FD000D; 
    color: #ffffff;
    text-align: center;

    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid transparent;
    height: 42px;
    padding: 0px 24px;

    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.28px;
}

.wc-home-institucional a:hover,
.banner_principal a:hover,
.institucional_banner p a:hover
 {
    color: #FD000D;
    background-color: transparent;
    border: 1px solid #FD000D;
}


@media (min-width: 768px) {
    .banner_principal a {
        height: 60px !important;
    }
    .wc-home-institucional a,
    .banner_principal a,
    .institucional_banner p a {
        height: 50px;
        font-size: 16px; 
        line-height: 24px;
        letter-spacing: 0.32px;
    }
}

@media (max-width: 1023px) {
    #instagram_post .instagram-item:last-child {
        padding-right: 16px;
    }
}



.spot-home .content_img::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%; 
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    aspect-ratio: 290/409;
    background-image: url("../imgs/fundo_desk_spot_home.png");
    background-repeat: no-repeat;
    transition: all 300ms ease-out;
}

.spot-home:hover .content_img::after {
    background-image: url("../imgs/hover_desk_spot_home.png");
}


#woo-category-select{
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99989 11.6162L14.558 7.05811L15.4419 7.94199L9.99989 13.3839L4.55798 7.94199L5.44187 7.05811L9.99989 11.6162Z" fill="%23FD000D"/></svg>');
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 30px;
}

.pagination-container .page-numbers {
    display: inline-flex;
    flex-direction: row;
    column-gap: 8px;
}


.pagination-container .page-numbers li a,
.pagination-container .page-numbers li span {
    display: flex;
    position: relative;
    min-width: 48px;
    height: 41px;
    justify-content: center;
    align-items: center;
}

.pagination-container .page-numbers li:not(:has(a.pagination-button, span.pagination-button)) a,
.pagination-container .page-numbers li:not(:has(a.pagination-button, span.pagination-button)) span{
    color: #FFF;
    background-color: #D0D3D4;
    font-size: 24px;
    font-weight: 900;
    line-height: 26px; 
    letter-spacing: 0.48px;
}

.pagination-container .page-numbers li:has(span.current) a,
.pagination-container .page-numbers li:has(span.current) span{
    background-color: #FD000D !important;
}

.jvm-tooltip {
    text-transform: uppercase !important;
    background-color: #FD000D !important;
}

.jvm-tooltip {
    text-transform: uppercase !important;
    background-color: #FD000D !important;
}

.institucional_banner p a {
    margin-top: 24px;
}

.page-template-catalog-categories {
  background-color: #f5f5f5;
}

.img_catalogo{
    transition: transform 0.5s ease;
}

.card_catalogo a:hover .img_catalogo{
    transform: scale(1.08);
}

.ver_catalogo{
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card_catalogo a:hover .ver_catalogo{
    background-color: #FD000D;
}

.card_catalogo a:hover .ver_catalogo span{
    color: #fff !important;
}

.card_catalogo a:hover .ver_catalogo svg path{
    fill: #fff;
}

.header_distribuidor{
    color: #fff;
}

.breadcrumb_distribuidores{
    font-weight: 400 !important;
    color: #0a0a0a;
}



@media (max-width: 1023px) {
    .single-distribuidor #site-header,
    .single-distribuidor #site-header nav {
        background: white !important;
    }

    .single-distribuidor #site-header button {
        color: #FD000D !important;
    }
    .content_mapa_pdp .texaco-container-principal {
        height: 624px !important;
    }
}

.first_section .about-star{
    position: absolute;
    z-index: -10;
}

.descricao-wrapper{
    display: flex;
    align-items: center;
    gap: 39px;
}

.barra-container{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.barra-vermelha{
    width: 7px;
    height: 64px;
    background: #FD000D;
}

.barra-cinza{
    width: 7px;
    height: 24px;
    background: #AAA;
}

.valor-card {
    background: #FFF;
    border-radius: 8px;
    box-shadow: 0 4px 16px 1px rgba(0, 0, 0, 0.06);
}

.brands-carousel {
  padding: 24px 0px;
  color: #FAFAFA;
}

@media (min-width: 1024px) {
    .brands-carousel {
        padding: 48px 0px;
        color: #FAFAFA;
    }
}

.brands-header {
  text-align: center;
  margin-bottom: 40px;
}

.brandsSwiper img {
  max-height: 80px;
  object-fit: contain;

  filter: grayscale(1);

  transition: .3s;
}

.brandsSwiper img:hover {
  filter: grayscale(0);

  transform: scale(1.05);
}

.certificacao{
    padding: 32px 48px;
}

.institucional,
.valores-section{
    padding: 0px 22px;
}

@media (min-width: 1280px) {
    .valores-section{
        padding: 0px 40px 80px 40px;
    }
    .institucional{
        padding: 0px;
    }
}

.km span{
    font-size: 54px;
}

.legenda{
    margin-top: 9px;
}

.ano{
    font-size: 48px;
    font-style: normal;
    line-height: 32px; 
    letter-spacing: 0.96px;
}

.anos{
    gap: 24px;
    padding: 0px 32px;
}

@media (min-width: 1024px) {
    .ano{
        font-size: 56px;
        letter-spacing: 1.12px;
    }

    .anos{
        gap: 25px;
        padding: 0px;
    }
}

.timeline-trigger {
    color: #A3A3A3;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.36px;
    transition: all .2s ease;
}

.timeline-trigger.active {
    color:  #FD000D;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; 
    letter-spacing: 0.48px;
}

.imagem_inst img{
    max-width: none;
}

.brands-carousel .swiper-wrapper{
    height: auto;
}

@media (min-width: 1280px) {
    .barra-mobile {
        display: none !important;
    }

    .descricao-wrapper{
        display: flex;
        align-items: start;
        gap: 16px;
    }
}

.swiper-brands-carousel .swiper-slide {
    width: 100px !important;
    height: 70px;
}

@media (min-width: 1024px) {
    .swiper-brands-carousel .swiper-slide {
        width: 150px !important;
        height: 115px;
    }
}

.carousel-certificacoes .swiper-slide {
    width: 253px !important;
}

.certificacoes{
    gap: 32px;
}

@media (min-width: 1281px) {
    .brands-carousel .swiper-wrapper {
        justify-content: center;
    }
}