body {
    overflow-x: hidden;
}

main#landPrincipal div,
main#landPrincipal span,
main#landPrincipal applet,
main#landPrincipal object,
main#landPrincipal iframe,
main#landPrincipal h1,
main#landPrincipal h2,
main#landPrincipal h3,
main#landPrincipal h4,
main#landPrincipal h5,
main#landPrincipal h6,
main#landPrincipal p,
main#landPrincipal blockquote,
main#landPrincipal pre,
main#landPrincipal a,
main#landPrincipal abbr,
main#landPrincipal acronym,
main#landPrincipal address,
main#landPrincipal big,
main#landPrincipal cite,
main#landPrincipal code,
main#landPrincipal del,
main#landPrincipal dfn,
main#landPrincipal em,
main#landPrincipal img,
main#landPrincipal ins,
main#landPrincipal kbd,
main#landPrincipal q,
main#landPrincipal s,
main#landPrincipal samp,
main#landPrincipal small,
main#landPrincipal strike,
main#landPrincipal strong,
main#landPrincipal sub,
main#landPrincipal sup,
main#landPrincipal tt,
main#landPrincipal var,
main#landPrincipal b,
main#landPrincipal u,
main#landPrincipal i,
main#landPrincipal center,
main#landPrincipal dl,
main#landPrincipal dt,
main#landPrincipal dd,
main#landPrincipal ol,
main#landPrincipal ul,
main#landPrincipal li,
main#landPrincipal fieldset,
main#landPrincipal form,
main#landPrincipal label,
main#landPrincipal legend,
main#landPrincipal table,
main#landPrincipal caption,
main#landPrincipal tbody,
main#landPrincipal tfoot,
main#landPrincipal thead,
main#landPrincipal tr,
main#landPrincipal th,
main#landPrincipal td,
main#landPrincipal article,
main#landPrincipal aside,
main#landPrincipal canvas,
main#landPrincipal details,
main#landPrincipal embed,
main#landPrincipal figure,
main#landPrincipal figcaption,
main#landPrincipal footer,
main#landPrincipal header,
main#landPrincipal hgroup,
main#landPrincipal menu,
main#landPrincipal nav,
main#landPrincipal output,
main#landPrincipal ruby,
main#landPrincipal section,
main#landPrincipal summary,
main#landPrincipal time,
main#landPrincipal mark,
main#landPrincipal audio,
main#landPrincipal video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */
main#landPrincipal article,
main#landPrincipal aside,
main#landPrincipal details,
main#landPrincipal figcaption,
main#landPrincipal figure,
main#landPrincipal footer,
main#landPrincipal header,
main#landPrincipal hgroup,
main#landPrincipal menu,
main#landPrincipal nav,
main#landPrincipal section {
    display: block;
}

main#landPrincipal blockquote,
main#landPrincipal q {
    quotes: none;
}

main#landPrincipal blockquote:before,
main#landPrincipal blockquote:after,
main#landPrincipal q:before,
main#landPrincipal q:after {
    content: '';
    content: none;
}

main#landPrincipal table {
    border-collapse: collapse;
    border-spacing: 0;
}

main#landPrincipal a {
    color: inherit;
    text-decoration: none;
}

/***************** CLASSES E IDS GERAIS ******************/

main#landPrincipal {
    width: 100%;
    position: relative;
    display: block;
    font-size: 16px;
    font-family: "Netshoes Ritmo Text Regular", sans-serif;
}

main#landPrincipal .container {
    width: 1306px;
    margin: auto;
    padding: 0px 20px;
    box-sizing: border-box;
}


main#landPrincipal img {
    display: block;
    max-width: 100%;
}



@media screen and (max-width: 1305px) {

    main#landPrincipal .container {
        width: 930px;
        margin: auto;
        box-sizing: border-box;
        padding: 0px 15px;
    }
}

@media screen and (max-width: 930px) {

    main#landPrincipal .container {
        width: 100%;
        margin: auto;
        box-sizing: border-box;
        padding: 0px 15px;
    }
}

@media screen and (max-width: 767px) {

    main#landPrincipal .container {
        width: 100%;
        margin: auto;
        box-sizing: border-box;
        padding: 0px 15px;
    }
}






/*Media Queries resoluções tela cheia a partir de 930 pra cima*/

@media (min-width: 930px) and (max-width: 1000px) {
    main#landPrincipal section.container-dois {
        width: 1000px;
        position: relative;
        left: 50%;
        margin-left: -500px;
        float: left;
        clear: both;
    }
}

@media (min-width: 1001px) and (max-width: 1050px) {
    main#landPrincipal section.container-dois {
        width: 1050px;
        position: relative;
        left: 50%;
        margin-left: -525px;
        float: left;
        clear: both;
    }
}

@media (min-width: 1051px) and (max-width: 1150px) {
    main#landPrincipal section.container-dois {
        width: 1100px;
        position: relative;
        left: 50%;
        margin-left: -550px;
        float: left;
        clear: both;
    }
}

@media (min-width: 1101px) and (max-width: 1150px) {
    main#landPrincipal section.container-dois {
        width: 1150px;
        position: relative;
        left: 50%;
        margin-left: -575px;
        float: left;
        clear: both;
    }
}

@media (min-width: 1151px) and (max-width: 1200px) {
    main#landPrincipal section.container-dois {
        width: 1200px;
        position: relative;
        left: 50%;
        margin-left: -600px;
        float: left;
        clear: both;
    }
}

@media (min-width: 1201px) and (max-width: 1250px) {
    main#landPrincipal section.container-dois {
        width: 1250px;
        position: relative;
        left: 50%;
        margin-left: -625px;
        float: left;
        clear: both;
    }
}

@media (min-width: 1251px) and (max-width: 1300px) {
    main#landPrincipal section.container-dois {
        width: 1300px;
        position: relative;
        left: 50%;
        margin-left: -650px;
        float: left;
        clear: both;
    }
}

/* Responsavel pelo layout pegar tela inteira a partir de 1300px quando o site coloca um breakpoint */
@media (min-width: 1301px) {
    main#landPrincipal section.container-dois {
        width: 100vw;
        position: relative;
        left: 50%;
        margin-left: -50vw;
        float: left;
        clear: both;
    }
}

/***************** E-SPORTS SPECIFIC STYLES ******************/

main#landPrincipal .es-hero {
    width: 100%;
    position: relative;
}

main#landPrincipal .es-hero a {
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}

main#landPrincipal .es-hero a:hover {
    opacity: 0.95;
}

main#landPrincipal .es-hero a:focus-visible {
    outline: 4px solid #ccff00;
    outline-offset: -4px;
}

main#landPrincipal .es-hero img {
    width: 100%;
    display: block;
}

/* Custom Hero Dots */
main#landPrincipal .es-hero .owl-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

main#landPrincipal .es-hero .owl-dot span {
    width: 12px !important;
    height: 12px !important;
    margin: 5px 7px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    display: block;
    border-radius: 50%;
    transition: all 0.3s ease;
}

main#landPrincipal .es-hero .owl-dot.active span,
main#landPrincipal .es-hero .owl-dot:hover span {
    background: #8201ff !important;
    transform: scale(1.2);
}

main#landPrincipal .es-section-title {
    font-family: "Netshoes Ritmo Text semibold", sans-serif;
    color: #8201ff;
    font-size: 1.8rem;
    text-align: center;
    margin: 40px 0 30px 0;
    text-transform: lowercase;
}

/* Categories Grid */
main#landPrincipal .es-categories-grid {
    width: 100%;
    position: relative;
}

main#landPrincipal .es-categories-grid .owl-stage {
    display: flex;
    align-items: flex-end;
}

@media (min-width: 930px) {
    main#landPrincipal .es-categories-grid .owl-stage {
        left: 15%;
    }
}

main#landPrincipal .es-category-card {
    position: relative;
    width: 300px;
    text-align: center;
    padding-bottom: 20px;
    transition: transform 0.3s ease;
}

main#landPrincipal .es-category-card:hover {
    transform: scale(1.05);
    z-index: 5;
}

main#landPrincipal .es-category-card img {
    width: 100%;
    margin-bottom: -20px;
}

main#landPrincipal .es-btn-yellow {
    background-color: #ccff00;
    color: #8201ff;
    padding: 4px 40px;
    border-radius: 0;
    font-family: "Netshoes Ritmo Text Medium", sans-serif;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
    display: inline-block;
    border: 2px solid #ccff00;
    transition: all 0.3s ease;
    top: 10px;
}

main#landPrincipal .es-btn-yellow:hover {
    background-color: #8201ff;
    color: #ccff00;
    border-color: #8201ff;
}

/* Product Carousel Placeholder */
main#landPrincipal .es-product-carousel {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
}

main#landPrincipal .es-product-card {
    min-width: 250px;
    background: #fff;
    padding: 10px;
    border: 1px solid #f0f0f0;
}

/* Brands Section */
main#landPrincipal .es-brands-section {
    background-color: #f2f2f2;
    padding: 40px 0;
}

main#landPrincipal .es-brands-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 8%;
}

main#landPrincipal .es-brands-flex {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

main#landPrincipal .es-brands-track {
    display: flex;
    width: max-content;
    gap: 60px;
    animation: marquee 40s linear infinite;
}

main#landPrincipal .es-brands-track img {
    max-height: 40px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Highlights Grid */
main#landPrincipal .es-highlights-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Alinhada a base */
}

main#landPrincipal .es-highlight-card {
    width: calc(33.33% - 14px);
    position: relative;
    text-align: center;
    padding-bottom: 30px;
    transition: transform 0.3s ease;
}

main#landPrincipal .es-highlight-card:hover {
    transform: scale(1.05);
    z-index: 5;
}

main#landPrincipal .es-highlight-card img {
    width: 100%;
}

main#landPrincipal .es-btn-purple {
    background-color: #8201ff;
    color: #fff;
    padding: 6px 72px;
    border-radius: 0;
    font-family: "Netshoes Ritmo Text Medium", sans-serif;
    font-size: 1.1rem;
    display: inline-block;
    margin-top: -40px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    top: -25px;
}

main#landPrincipal .es-btn-purple:hover {
    background-color: #ccff00;
    color: #8201ff;
}

main#landPrincipal .es-product-types {
    padding: 40px 0;
}

/* Product Types Grid */
main#landPrincipal .es-types-grid {
    width: 100%;
    position: relative;
    overflow: hidden;
}

main#landPrincipal .es-types-grid .owl-stage {
    display: flex;
    align-items: flex-end;
}

@media (min-width: 930px) {
    main#landPrincipal .es-types-grid .owl-stage {
        left: 15%;
    }
}

main#landPrincipal .es-type-card {
    width: 300px;
    text-align: center;
    padding-bottom: 20px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

main#landPrincipal .es-type-card:hover {
    transform: scale(1.05);
    z-index: 5;
}

main#landPrincipal .es-type-card img {
    width: 100%;
}

main#landPrincipal .es-btn-purple-sm {
    background-color: #8201ff;
    color: #fff;
    padding: 8px 60px;
    border-radius: 0;
    font-family: "Netshoes Ritmo Text Medium", sans-serif;
    font-size: 1rem;
    display: inline-block;
    position: relative;
    z-index: 2;
    top: -10px;
    border: 2px solid #8201ff;
    transition: all 0.3s ease;
}

main#landPrincipal .es-btn-purple-sm:hover {
    background-color: #ccff00;
    color: #8201ff;
    border-color: #ccff00;
}

/* Carousel Navigation */
main#landPrincipal .es-types-grid .owl-nav,
main#landPrincipal .es-categories-grid .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

main#landPrincipal .es-types-grid .owl-nav button,
main#landPrincipal .es-categories-grid .owl-nav button {
    background: #fff !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

main#landPrincipal .es-types-grid .owl-nav button:hover,
main#landPrincipal .es-categories-grid .owl-nav button:hover {
    background: #8201ff !important;
}

main#landPrincipal .es-types-grid .owl-nav button:hover svg,
main#landPrincipal .es-categories-grid .owl-nav button:hover svg {
    stroke: #fff;
}

/* App Banner */
main#landPrincipal .es-app-banner img {
    width: 100%;
}

@media screen and (max-width: 767px) {
    main#landPrincipal .es-highlight-card {
        min-width: 100%;
    }

    main#landPrincipal .es-brands-flex {
        gap: 30px;
    }
}