/*body {
    background-color: #fff;
    margin-top: 130px;
}

@media only screen and (max-width: 600px) {
    body {
        margin-top: 80px;
    }
}*/
/* Color del “flash” al tocar enlaces en iOS/Android (Safari/Chrome) */
html {
    -webkit-tap-highlight-color: rgba(255,221,5,.35);
}
/* o transparent */

:root {
    /*--selection-bg: #e9dfca;*/ /* color de fondo de la selección */
    --selection-bg: #ff8720; /* color de fondo de la selección */
    --selection-fg: #111111; /* color del texto seleccionado */
}

/* Navegadores modernos */
::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

/* Firefox */
::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

/* Campos de texto (por compatibilidad) */
input::selection,
textarea::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

/* Opcional: cambia el color del cursor de texto */
input, textarea, body {
    caret-color: var(--selection-bg);
}

.bg-basecolor {
    background-color: #F7F0E6;
}


.accordion-item {
    border: none !important;
}

.accordion-button {
    padding: 10px 0px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #fff !important;
}

.accordion-body {
    padding: 10px 0px !important;
}
/*html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}*/
.top-delivery {
    font-weight: bold;
    font-size: small;
    color: #fff;
    height: 30px;
}

.top-brand {
    height: 80px;
}

.top-menu {
    height: 50px;
    align-items: center;
}


.bg-theme1 {
    /*Nuevo*/
    background-color: #000;
}

.bg-theme2 {
    /*background-color: #00CAC7;*/
    /*Sorpresa*/
    /*background-color: #7E41D6;*/
    /*iNexus*/
    /*background-color: #199BF1;*/
    /*Sorpresa*/
    background-color: #E7E7E7;
}

.bg-theme3 {
    /*Sorpresa*/
    background-color: #FFDD05;
    /*iNexus*/
    /*background-color: #01BEF6;*/
}
/*.bg-themebase {*/
/*background-color: #FF9386;*/
/*background-color: #253745;
}*/
.bg-theme4 {
    /*Sorpresa*/
    background-color: #6A715B;
    /*iNexus*/
    /*background-color: #01BEF6;*/
}

.bg-theme5 {
    /*Sorpresa*/
    background-color: #EDDCC8;
    /*iNexus*/
    /*background-color: #01BEF6;*/
}


.bg-theme-gradient {
    /*background: rgb(84,93,206);
    background: linear-gradient(45deg, rgba(84,93,206,1) 30%, rgba(126,65,214,1) 100%);*/
    background: rgb(243,144,42);
    background: linear-gradient(94deg, rgba(243,144,42,1) 0%, rgba(239,107,66,1) 50%, rgba(233,70,70,1) 100%);
}
/*.bg-gold {
    background-color: #B28B4D;
}*/
/*.producto{
    padding: 10px;
    border : 1px solid #f1f1f1;
    border-radius: 20px 20px;
}*/
.bg-search-rounded {
    background-color: #E7E7E7;
}

    .bg-search-rounded:focus {
        background-color: #E7E7E7;
    }

.btn-search-front {
    position: relative;
    top: 8px;
    height: 58px;
    color: #fff;
    width: 100%;
    background-color: #000;
}

    .btn-search-front:hover {
        background-color: #FFDD05;
        color: #000;
    }





.text-theme1 {
    color: #000;
}

.text-theme2 {
    color: #E7E7E7;
}

.text-theme3 {
    color: #FFDD05;
}

.text-theme4 {
    color: #6A715B;
}



.border-theme1 {
    border: 1px solid #000;
}

.border-theme2 {
    border: 1px solid #E7E7E7;
}

.border-theme3 {
    border: 1px solid #FFDD05;
}


.border-smoke {
    border: 1px solid #f4f4f4;
}

.text-gray {
    color: #666 !important;
}

.text-smoke {
    color: #888EA8 !important;
}

.text-cyan {
    color: #1ABC9C !important;
}

.text-brown {
    color: #705A29 !important;
}

.text-green {
    color: #0A3622 !important;
}

.text-orange {
    color: #ff7d00 !important;
}

/*.btn-addtocart {
    border-radius: 0px 0px 5px 5px;
    box-shadow: none !important;
    outline: none !important;
    border-color: red;
}*/

.bg-discount-text {
    border-radius: 30px;
    /*border: 2px solid black;*/
    background-color: #EB5757;
    color: #fff;
    padding: 2px 10px;
    font-size: 11px;
    /*font-weight: bold;*/
    cursor: pointer;
}

.bg-discount-porcent {
    border-radius: 30px;
    /*border: 2px solid black;*/
    background-color: #F8D7DA;
    color: #E43B3B;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
}

.btn-addtocart {
    border-radius: 14px;
    /*border: 2px solid black;*/
    background-color: #fff;
    color: #CB8261;
    /*padding: 14px 28px;*/
    /*font-size: 16px;*/
    cursor: pointer;
}

    .btn-addtocart:hover {
        /*border-color: #CB8261;*/
        background-color: #CB8261;
        color: #fff;
    }

    .btn-addtocart:focus {
        /*border-color: #CB8261;*/
        background-color: #CB8261;
        color: #fff;
    }

    .btn-addtocart:visited {
        /*border-color: #CB8261;*/
        background-color: #CB8261;
        color: #fff;
    }


.icon-addtocart {
    width: 35px;
    height: 35px;
    font-size: small;
}


.button:focus {
    box-shadow: none !important;
    outline: none !important;
}


.btn-top-main {
    /*background-color: transparent;*/
    /*color: #fff;*/
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
}



.btn-search-circle {
    /*background-color: #CB8261;*/
    background-color: #000;
    margin: 0px;
    width: 35px !important;
    height: 35px !important;
    color: #fff;
    font-size: 13px;
    border-radius: 50%;
    border: none;
    text-align: center;
}

    .btn-search-circle:hover {
        background-color: #FFDD05;
        color: #000;
    }

.button-float {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 45px;
    box-shadow: rgba(0,0,0,0.2) 5px 5px 10px;
    z-index: 100;
}

/*.owl-nav .owl-prev, .owl-next {
    background-color: red !important;
    border-radius: 50%;
    color: #fff !important;
}*/

.single-line {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.form-control:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    /*// dont forget this one as it is the one which shows that blue shadow when typing*/
}

.btn-owlnav {
    background-color: #000;
    border: 0px;
    color: #fff;
    width: 30px;
    height: 30px;
    padding: 6px 6px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

    .btn-owlnav:hover {
        background-color: #FFDD05;
        color: #000;
    }




.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.panel-search-front {
    max-width: 1300px;
    padding: 20px 30px 20px 30px;
    box-shadow: rgba(0,0,0,0.4) 10px 10px;
    border-radius: 25px;
    background-color: #fff;
}

.panel-banners {
    padding-top: 150px;
    z-index: -1;
}

.category-base {
    width: 100px;
    height: 100px;
    background-color: #f1f1f1;
    border-radius: 50%;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .category-base {
        width: 100px;
        height: 100px;
        background-color: #EFEFEF;
        border-radius: 50%;
        text-align: center;
    }
}

.category-icon {
    width: 50px;
    height: 50px;
}

@media only screen and (max-width: 600px) {
    .category-icon {
        width: 60px;
        height: 60px;
    }
}

/*.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}*/






/*.nav-pills .nav-link.active {
    background-color: #E96751 !important;
    color: #fff !important;
}*/

/*.carousel-control-prev-icon, .carousel-control-next-icon {
    height: 40px;
    width: 40px;*/
/*outline: black;*/
/*background-color: #E96751;*/
/*background-size: 60%, 60%;
    border-radius: 50%;
    opacity: 1 !important;*/
/*border: 1px solid red;*/
/*}*/
.btn-slide-prev, .btn-slide-next {
    height: 50px;
    width: 50px;
    color: #fff;
    /*outline: black;*/
    /*background-color: #E96751;*/
    background-size: 60%, 60%;
    border-radius: 50%;
    opacity: 1 !important;
    align-items: center;
    vertical-align: middle;
    padding: 13px;
}



.img-categ {
    /*position: relative;*/ /* Se usa para que no se salga la imagen de la caja, ya que la imagen tiene position absolute */
    width: 180px;
    height: 180px;
}



/*.form-control {
    border: 0;
    box-shadow: none;
}*/
.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.text-banner {
    text-shadow: 1px 1px 5px #424242;
    color: #fff;
}

.bg-img-portada {
    background-image: url('../img/logo/road-sunset-bg04.jpg');
    /*background-image: url('../img/logo/road-way01-b.jpg');*/
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 550px;
    width: 100%;
}

.bg-content-dark {
    padding-top: 150px;
    background-color: rgba(0, 0, 0, 0.4);
    height: 550px;
}

.bg-content-panel {
    max-width: 1200px;
}
/*.img-slide {
    width: 100%;*/
/*min-height: 320px;
    max-height: 320px;*/
/*background-size: cover;
    background-position: center bottom;*/
/*min-height: 180px;*/
/*height: 100%;*/
/*background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;*/
/*}*/
.img-slide {
    width: 100%;
    min-height: 320px;
    max-height: 320px;
    background-size: cover;
    background-position: center bottom;
    min-height: 180px;
    height: 450px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
}

/*@media (max-width: 576px) {
    .slick-prev, .slick-next {
        width: 81px !important;
        z-index: 1;
        color: blue !important;
    }
}*/




@media (min-width: 576px) {
    .img-slide {
        min-height: 320px;
        max-height: 320px;
        background-size: cover;
        background-position: right bottom;
        min-height: 180px;
        height: 450px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
    }
}

/*@media (min-width: 768px) {
    .sc-img-slide {
        min-height: 490px;
        max-height: 490px;
        background-size: cover;
        min-height: 450px;
        max-height: 450px;
        height: 450px;
        background-size: contain;
    }

    .slick-prev, .slick-next {
        width: 22px;
    }
}*/

@media (min-width: 992px) {
    .img-slide {
        min-height: 383px;
        max-height: 383px;
        /*background-size: contain;*/
        min-height: 450px;
        max-height: 450px;
        background-size: contain;
    }
    /*
    .slick-prev, .slick-next {
        width: 22px;
    }*/
}

@media (min-width: 1200px) {
    .img-slide {
        /*min-height: 453px;
        max-height: 453px;*/
        /*background-size: contain;*/
        min-height: 540px;
        max-height: 540px;
        background-size: cover;
        background-position: center center;
    }
}

@media (min-width: 1440px) {
    .img-slide {
        min-height: 680px;
        max-height: 680px;
        background-size: cover;
        min-height: 735px;
        max-height: 735px;
        /*background-size: contain;*/
    }
}

@media (min-width: 2000px) {
    .img-slide {
        /*min-height: 680px;
        max-height: 680px;*/
        /*background-size: cover;*/
        min-height: 950px;
        max-height: 950px;
        background-position: center center;
        background-size: cover;
    }
}


.bg-slide-marcas {
    height: 160px !important;
}




.no-image {
    width: 100%;
    height: 200px;
    background-color: #F1f1f1;
    /*background-image: url('../img/prod/no-image.png');*/
    background-repeat: no-repeat;
    background-position: center center;
    /*background-size: cover;*/
    /*border-radius: 5px 5px 0px 0px;*/
}

.img-prod {
    overflow: hidden;
    width: 100%;
    height: 200px;
    background-color: #F1f1f1;
    /*background-image: url('../img/prod/no-image.png');*/
    /*background-repeat: no-repeat;
    background-position: center center;*/
    /*background-size: cover;*/
    border-radius: 5px 5px 0px 0px;
}

.item-prod {
    transition: transform .5s;
}

    .item-prod:hover {
        transform: scale(1.02);
    }



/*.icon-float {
    margin-top: 0px;
}*/

/*.owl-carousel .active span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: red !important;
    display: block;
    -webkit-backface-visibility: visible;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    -o-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}*/


.section-categories {
    /*height:350px;*/
}

.section-infopage {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
    /*background-color: #E96751;*/
    color: #fff;
}

.section-footer {
    padding-top: 40px;
    padding-bottom: 40px;
    /*background-color: #333333;*/
    color: #fff;
}


/* Style the buttons */
.btn-area {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
}

    .btn-area:hover {
        background-color: #ddd;
    }

    .btn-area.active {
        background-color: #666;
        color: white;
    }







.image-container {
    width: 100%;
    height: 550px;
    /*max-width: 520px;*/ /* o el ancho deseado */
    /*aspect-ratio: 16 / 9;*/ /* opcional: para mantener relación */
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.image-container:hover .zoom-image {
    transform: scale(1.1); /* zoom al 110% */
}

.bike-section {
    text-align: center;
    font-family: sans-serif;
    /*background: #fef6ec;*/
    /*padding: 2rem;*/
}

.bike-description {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.main-image-container {
    max-width: 500px;
    margin: 0 auto 2rem;
    cursor: pointer;
}

    .main-image-container:hover .zoom-image {
        transform: scale(1.1); /* zoom al 110% */
    }




/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .bike-description {
        margin: 0rem 1.7rem;
        /*margin-bottom: 1.5rem;*/
        font-size: 0.75rem;
    }

    .image-container {
        width: 100%;
        height: 450px;
    }

    .main-image-container {
        max-width: 380px;
        margin: 0 auto 2rem;
    }

        .main-image-container:hover .zoom-image {
            transform: scale(1.02); /* zoom al 110% */
        }
}

@media (max-width: 576px) {
    .main-image-container {
        margin: 0;
    }

        .main-image-container:hover .zoom-image {
            transform: scale(1.05); /* zoom al 110% */
        }

    .image-container {
        height: auto;
    }

    .zoom-image {
        object-fit: contain;
    }
}

/* Contenedor principal */
.battery-frame-section {
    height: 100vh;
    text-align: center;
    /*padding: 40px 20px;*/
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Contenedor de características */
.features {
    display: flex;
    justify-content: center;
    gap: 40px;
    /*flex-wrap: wrap;*/
    margin-top: 40px;
}

/*.feature {
    max-width: 600px;
}*/

.feature img {
    width: 100%;
    max-height: 550px;
    min-height: 400px;
    /*height: 400px;*/
    /*object-fit: contain;*/
}

.feature .text {
    font-size: 1.1rem
}
/*@media (min-width: 576px) {
    .feature img {
        object-fit: contain !important;
    }
}*/
.main-image-feature {
    max-width: 500px;
    margin: 0 auto 2rem;
    cursor: pointer;
}

    .main-image-feature:hover .zoom-image {
        transform: scale(1.1); /* zoom al 110% */
    }

.thumbnail-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    flex-direction: row;
}

.thumb {
    width: 100px;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: transform 0.7s, border-color 0.2s;
}

    .thumb:hover {
        transform: scale(1.1);
    }
/*.thumb.active {
        border-color: orange;
    }*/






/* Imagen flotante lateral izquierda */
.floating-contact {
    background-color: #E9DFCA;
    border-radius: 0px 8px 10px 0px;
    position: fixed;
    left: 0px;
    top: 40%;
    z-index: 1000;
    text-align: center;
    display: flex;
    /*flex-direction: column;*/
    width: 130px;
    align-items: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: 0;
}

    .floating-contact a {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .floating-contact img {
        width: 80%;
    }

    .floating-contact label {
        background: black;
        color: white;
        border: 0;
        border-radius: 0px 0px 8px 0px;
        padding: 8px 12px;
        font-style: italic;
        font-weight: bold;
        cursor: pointer;
        /*margin-top: 25px;*/
        width: 100%;
        font-size: 1rem;
    }

/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {

    .feature img {
        max-height: 350px;
        min-height: 280px;
    }

    .feature h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .feature .text {
        font-size: 0.8rem
    }

    .main-image-feature {
        max-width: 400px;
    }


    .floating-contact {
        width: 100px;
    }

        .floating-contact label {
            padding: 5px 8px;
            font-size: .8rem;
        }
}

@media (max-width: 576px) {
    .bike-description {
        margin-bottom: 1.5rem;
        font-size: 0.8rem;
    }

    .feature img {
        width: 250px;
        max-height: auto;
        min-height: auto;
    }

    .feature h3 {
        font-size: 18px;
    }

    .feature .text {
        margin-top: .8rem;
        font-size: .8rem;
    }

    .thumbnail-row {
        gap: 0;
    }
}




.scroll-strip {
    height: 11vh;
    background-color: #e9dfca;
    overflow: hidden;
    position: relative;
}

.strip-content {
    display: flex;
    width: 200%; /* para que quepan ambas copias */
    animation: scroll-left 50s linear infinite;
}

.marquee {
    display: flex;
    gap: 80px;
    white-space: nowrap;
    align-items: center;
    height: 100%;
    font-size: 7vh;
    font-style: italic;
    font-weight: bold;
    color: white;
    /*background-color: #d7c6a6;*/
    padding: 0 20px;
    margin: 0;
}

    .marquee span {
        padding: 0 20px;
    }

@media (max-width: 576px) {
    .marquee {
        gap: 5px;
        font-size: 3vh;
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}






/* Pantalla dividida */
.split-screen {
    display: flex;
    height: 100vh;
    /*width: 100%;*/
}

/* Lado izquierdo */
.left-content {
    width: 50%;
    /*height: 100vh;*/
    background-color: #f7f0e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 0px;
}

    .left-content .bike-img {
        max-width: 300px;
        /*margin-bottom: 30px;*/
    }

    .left-content h2 {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .left-content p {
        max-width: 500px;
        font-size: 16px;
        /*margin-bottom: 30px;*/
        line-height: 1.5;
    }

/* Lado derecho con imagen y zoom-in */
.split-screen .right-image {
    width: 50%;
    height: 100vh;
    background-image: url('../img/sections/protection.png');
    /*    background-image: url('../img/prod/person-bike01.jpg');*/
    background-size: cover;
    background-position: center;
    /*animation: zoomIn 20s ease-in-out infinite;*/
}



.dealer-button {
    background-color: black;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
    padding: 12px 24px;
    transition: background-color 0.3s ease;
}

    .dealer-button:hover {
        background-color: #333;
    }
/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .left-content h2 {
        font-size: 20px;
    }

    .left-content p {
        max-width: auto;
        font-size: 12px;
    }

    .dealer-button {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {

    .left-content {
        width: 100%;
        padding: 20px;
    }

        .left-content h2 {
            font-size: 22px;
        }

        .left-content p {
            max-width: auto;
            font-size: 12px;
        }

    .dealer-button {
        padding: 10px 15px;
        font-size: 12px;
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }
}

/* cambia el 0–1 a tu gusto */
.img-alpha {
    opacity: .2; /* 0 = invisible, 1 = opaco */
    transition: opacity .25s ease;
}

/*.img-alpha:hover {
        opacity: 1;
    }*/
/* opcional: sin transparencia al pasar el mouse */


.section-portada {
    background-image: url('../img/banner/bannerx.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-espec {
    background-image: url('../img/banner/bg-v7.png');
    /*background-image: url('../img/banner/bannerx.jpg');*/
    background-size: cover;
    background-position: center;
    /*background-color: #f9f2e8;*/
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate; /* importante para controlar capas internas */
}

/* Ticker / franja inferior (opcional) */
.ticker {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(56px, 12vh, 120px);
    display: flex;
    align-items: center;
    z-index: 2; /* por debajo de la moto */
    /* background: rgba(0,0,0,0.03);  si necesitas base */
}




/* Ajusta aquí el espacio entre h3 y h2 */
.heading-tight {
    --gap: -0.5rem; /* cambia este valor: .2rem, 0, -.2rem, etc. */
    margin-bottom: 90px;
}

@media (max-width: 576px) {
    .ticker {
        height: clamp(56px, 8vh, 120px);
        position: unset;
    }

    .heading-tight {
        margin-top: 90px;
        --gap: 0.5rem;
    }
}

.logo-front {
    height: auto !important;
    width: 250px !important;
}

/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .img-alpha {
        height: 240px;
    }

    .logo-front {
        width: 180px !important;
    }
}
/* Ajustes móviles */
@media (max-width: 576px) {
    .logo-front {
        width: 150px !important;
    }
}

/* Quita márgenes por defecto y usa tu gap */
.heading-tight h3 {
    margin: 0 0 var(--gap);
    line-height: 1.1; /* opcional: más compacto */
}

.heading-tight h2 {
    margin: 0; /* evita colapso de márgenes */
    line-height: 1.05; /* opcional: más compacto */
}

.bt-text-front h2, h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}

.bt-text-front h2 {
    font-size: 90px;
}

.bt-text-front h3 {
    font-size: 35px;
}

/* >>> LA MOTO ARRIBA DE TODO <<< */
.portada-bike {
    position: absolute;
    left: 50%;
    bottom: -2vh; /* sobresale y pisa el ticker */
    transform: translateX(-50%);
    z-index: 10; /* más alto que logo, título y ticker */
    pointer-events: none; /* no bloquea clicks del botón/links */
}

    .portada-bike img {
        display: block;
        width: min(66vw, 800px); /* escala responsiva */
        height: auto;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,.18)); /* realce */
    }


/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .bt-text-front h2 {
        font-size: 50px !important;
    }

    .bt-text-front h3 {
        font-size: 21px !important;
    }

    .portada-bike img {
        width: auto !important;
        height: 450px;
    }

    .heading-tight h3 {
        line-height: 1.5; /* opcional: más compacto */
    }
}
/* Ajustes móviles */
@media (max-width: 576px) {
    .portada-bike {
        bottom: 15vh; /* sobresale y pisa el ticker */
    }

        .portada-bike img {
            width: auto !important;
            height: 320px;
        }

    .bt-text-front h2 {
        font-size: 50px !important;
    }

    .bt-text-front h3 {
        font-size: 20px !important;
    }
}




/*.section-intro {
    background-image: url('../img/sections/intro-video.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    .section-intro {
        background-size: contain;
        height: 70vh;
        height: auto;
        width: 100vw;
    }
}*/

.section-intro {
    background-image: url('../img/sections/intro-video.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*position: relative;*/
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

    /* Imagen de fondo */
    .section-intro .intro-img {
        width: 100%;
        object-fit: cover;
        display: block;
    }



/* Solo móviles/tablets */
@media (max-width: 576px) {
    /* v3/v4: .fp-section y su celda interna */
    #section-youtube { /* .fp-overflow se usa en versiones nuevas */
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    #section-bloggers {
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    #section-dots {
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    #section-mnf { /* .fp-overflow se usa en versiones nuevas */
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    .section-manufacturer {
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    .fullimage-dot-section {
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 60vh !important;
    }

    .split-screen {
        /*display: flex;*/
        height: 70vh !important;
        /*width: 100%;*/
    }

    #section-distributor { /* .fp-overflow se usa en versiones nuevas */
        height: 70vh !important;
        min-height: 70vh !important;
        max-height: 70vh !important;
    }

    #section-whyus { /* .fp-overflow se usa en versiones nuevas */
        height: 100% !important;
        min-height: auto !important;
        max-height: auto !important;
    }

    #section-components {
        /*padding: 30px 0px;*/
        height: auto;
    }
    /*.fp-overflow {
        min-height: auto !important;
        max-height: auto !important;
    }*/
    .section {
        height: auto !important;
    }
}



.section-manufacturer {
    background-image: url('../img/sections/section-prod.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Botón para abrir modal */
/*.open-modal {
    display: block;
    margin: 100px auto;
    padding: 12px 24px;
    background-color: #ED6D00;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}
*/
/*.play-button {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.7s ease;
    z-index: 999;
}*/
.play-button {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: transform 0.3s ease, background-color 0.7s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

    .play-button:hover {
        /*transform: scale(1.1);*/
        background-color: #ED6D00;
    }

.modal-video {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    border: 0;
}

/*    .modal.show {
        display: flex;
    }*/
/* .modal::backdrop {
        background-color: rgb(0, 0, 0, 0.30);
    }*/

.modal-video-content {
    width: 720px;
    /*max-width: 640px;*/
    height: 405px;
    /*    640x360*/
    position: relative;
    border: 0;
}

    .modal-video-content iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

.close-video-button {
    position: absolute;
    top: -20px;
    right: -20px;
    background-color: black;
    color: white;
    border: solid 2px #fff;
    border-radius: 50%;
    padding: 0px;
    width: 36px;
    height: 36px;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
}

.shadow-text {
    text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5);
}

.shadow-text-sm {
    text-shadow: 4px 2px 4px rgba(0, 0, 0, 0.5);
}


/*.bt_textdots{
    font-weight: bold;
    font-size:0.5rem;
}*/


.bt-text-front-ws h2 {
    font-size: 64px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}


.bt-text-button a {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 13px 30px;
    font-size: 24px;
    font-weight: bold;
    transition: all .5s ease-out 0s;
    text-transform: uppercase;
}

.bt_textdots h2 {
    font-size: 45px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
}

@media (max-width: 576px) {
    .bt-text-button a {
        font-size: 16px;
    }

    .bt_textdots h2 {
        font-size: 25px;
    }
}






.fullimage-dot-section {
    /*background-image: url('../img/sections/fullimg-dots.png');*/
    background-image: url('../img/sections/fullimage-dots3.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 100;
}
/*
.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
*/

.header-text {
    position: absolute;
    top: 40px;
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 5px black;
    font-size: 24px;
    font-weight: bold;
}
/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .header-text h2 {
        font-size: 2.1rem;
    }
}

/*.tooltip {
    position: absolute;
    top: -10px;
    left: 30px;
    width: 250px;
    background: white;
    color: black;
    padding: 15px;
    border-radius: 3px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    visibility: visible;
    transition: opacity 0.3s ease;
    z-index: 9999;
    pointer-events: none;
}
*/
/* .tooltip.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }*/


/* Versión a la izquierda (cuando hay poco espacio) */
/*.tooltip.left {
        left: auto;
        right: 30px;
    }

        .tooltip.left .tooltip-arrow {
            left: auto;
            right: -8px;
            border-right: none;
            border-left: 8px solid white;
        }




.dot {
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 2;*/ /* menor que tooltip */
/*}*/

/* Elemento visual animado */
/*.dot-pulse {
    width: 100%;
    height: 100%;
    background-color: white;
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: breathe 2s ease-in-out infinite;
    pointer-events: none;
    position: relative;
    z-index: 3;
}*/

/* Punto central negro */
/*.dot-pulse::before {
        content: "";
        width: 4px;
        height: 4px;
        background-color: black;
        border-radius: 50%;
    }*/

/* Respiración */
/*@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.dot:hover .tooltip {
    display: block;
}*/

/* Posiciones de los puntos (ajustadas visualmente) */
/*.dot-brakes {
    top: 80%;
    left: 30%;
}

.dot-rearfender {
    top: 55%;
    left: 35%;
}

.dot-footrest {
    top: 72%;
    left: 42%;
}

.dot-motor {
    top: 70%;
    left: 47%;
}

.dot-battery {
    top: 65%;
    left: 57%;
}

.dot-frame {
    top: 58%;
    left: 65%;
}

.dot-frontforks {
    top: 70%;
    left: 68%;
}

.dot-tires {
    top: 69%;
    left: 76%;
}*/


.hotspots { /* asegura posicionamiento absoluto de puntos */
    position: relative;
}

/*.dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;*/ /* aro blanco */
/*background: #000;*/ /* centro negro */
/*border-radius: 50%;
    transform: translate(-50%, -50%);*/ /* centra por top/left */
/*box-shadow: 0 2px 8px rgba(0,0,0,.35);
    cursor: pointer;
    outline: none;
}

    .dot:focus-visible {
        box-shadow: 0 0 0 4px rgba(255,221,5,.65);
    }

    .dot::after {*/ /* pequeño punto blanco interior */
/*content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 6px;
        height: 6px;
        background: #fff;
        border-radius: 50%;
    }*/





.dot {
    position: relative;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    border: 2px solid black;
    z-index: 5;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
    animation: pulse 2s infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dot::after {
        content: '';
        width: 6px;
        height: 6px;
        background: black;
        border-radius: 50%;
        z-index: 6;
    }


@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/*.tooltip {
    position: absolute;
    top: -10px;
    left: 30px;
    background: white;
    color: black;
    padding: 15px;
    border-radius: 6px;
    width: 300px;
    max-width: 90vw;
    box-shadow: 0 2px 15px rgba(0,0,0,0.2);
    display: none;
    z-index: 9999;
}



.tooltip::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 15px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid white;
}

.tooltip.left {
    left: auto;
    right: 30px;
}

    .tooltip.left::before {
        left: auto;
        right: -8px;
        border-right: none;
        border-left: 8px solid white;
    }

.tooltip.top {
    top: auto;
    bottom: -10px;
}

    .tooltip.top::before {
        top: auto;
        bottom: 15px;
    }*/








/************************************/
/*Estilos para la sección defs blog*/
/************************************/









.blog-section {
    display: flex;
    height: 100vh;
}

.blog-links {
    height: 100vh;
    width: 50%;
    background: #f8f1e7;
    padding: 80px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .blog-links h2 {
        font-size: 32px;
    }

    .blog-links .blog-item {
        margin-top: 20px;
    }

        .blog-links .blog-item span {
            font-size: 15px;
        }

        .blog-links .blog-item h4 {
            cursor: pointer;
            color: black;
            text-decoration: none;
            transition: color 0.4s ease;
        }

            .blog-links .blog-item h4:hover {
                color: #ED6D00;
            }

.blog-image {
    width: 50%;
    overflow: hidden;
    position: relative;
}

.image-zoom {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.blog-image:hover .image-zoom {
    transform: scale(1.1);
}

.view-all {
    margin-top: 30px;
    padding: 10px 20px;
    font-weight: bold;
    background: black;
    color: white;
    border: none;
    cursor: pointer;
    max-width: 150px;
}
/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .blog-links h2 {
        font-size: 1.6rem;
    }

    .blog-links .blog-item .date {
        font-size: 0.75rem;
    }

    .blog-links .blog-item h4 {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {

    .blog-section {
        text-align: start !important;
    }

    .blog-links {
        padding: 80px 30px;
        width: 100%;
    }

        .blog-links .blog-item .date {
            color: #666;
            font-size: 12px;
        }

        .blog-links h2 {
            font-size: 20px;
        }

        .blog-links .blog-item h4 {
            font-size: 16px;
        }
}

/************************************/



/*LOGOS DE MARCAS*/
/* Contenedor general */
/*LOGOS DE MARCAS*/
/* Contenedor general */
.section-intop { /* O reemplaza con tu clase fullpage */
    position: relative;
    /*margin: 0;*/
    /*padding: 0;*/
    /*height: 100vh;*/
    flex-direction: unset;
}

.images-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f7f7f7;
    overflow: hidden;
}

/* Carrusel de Owl */
.owl-carousel .images-carousel {
    width: 100%;
}

/* Tarjeta de logo */
.owlimage-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0;
}

/* Círculo del logo */
/*.logo-container {
    width: 100px;
    height: 100px;
    border-radius: 10%;*/
/*background: #ffffff;*/
/*display: flex;
    align-items: center;
    justify-content: center;*/
/*box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);*/
/*margin-bottom: 0.5rem;
    transition: background 0.3s ease;
    padding: 20px;
}*/

/* Imagen del logo */
/*.logo-container img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.9;
        transition: all 0.3s ease;
    }*/

/* Hover en el círculo */
/*.logo-container:hover {
        background: #eeeeee;
    }

        .logo-container:hover img {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.05);
        }*/

/* Texto debajo */
/*.logo-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
}*/





footer {
    background: #1d1d1d;
    color: #fff;
    padding: 30px 0;
}

    footer ul li a {
        color: #fff;
        font-size: 18px;
        transition: all .5s ease-out 0s;
    }

.fa-youtube:before {
    font-size: 26px;
}

.fa-facebook-f:before, .fa-facebook:before {
    font-size: 26px;
}

footer .footer-menu ul li a {
    display: block;
    line-height: 35px;
}

footer ul li a:hover {
    color: #FD6316
}

footer h3 {
    font-weight: bold;
    font-style: italic;
    margin-bottom: 20px;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-top .col-md-3 {
    width: 20%;
}

.footer-top {
    margin-bottom: 40px;
}

.footer-copy {
    font-size: 11px;
}


.tnp-subscription form {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

    .tnp-subscription form input {
        background: none;
        border: 1px solid #fff;
        width: 100%;
        outline: none;
    }

.tnp-field-button {
    width: 32%;
}

.tnp-field-email {
    width: 65%;
}

.footer-newsletter {
    text-align: center;
}

    .footer-newsletter h3 {
        font-style: italic;
    }

.footer-social ul {
    display: flex;
}

    .footer-social ul li {
        margin-right: 10px
    }

.footer_text p {
    /*padding-left: 35px;*/
}

    .footer_text p:nth-child(2) {
        /*background: url(images/tel.png) left center no-repeat;*/
    }

    .footer_text p:nth-child(3) {
        /* background: url(images/email.png) left center no-repeat;*/
    }

    .footer_text p:nth-child(4) {
        /* background: url(images/address.png) left center no-repeat;*/
    }




.scroll-down {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 10;
}

    .scroll-down span {
        display: block;
        width: 40px;
        height: 40px;
        border-bottom: 5px solid white;
        border-right: 5px solid white;
        transform: rotate(45deg);
        animation: scroll-down 1.5s infinite;
    }

@keyframes scroll-down {
    0% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 1;
    }

    50% {
        transform: rotate(45deg) translate(20px, 20px);
        opacity: 0.5;
    }

    100% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 1;
    }
}

/* ===== HD / Laptops (1280px – 1919.98px) ===== */
@media (min-width: 1280px) and (max-width: 1919.98px) {
    .footer-top p {
        font-size: 0.8rem
    }
    .footer-copy {
        font-size: 0.8rem;
    }
}



    /* Usa el mismo fondo del modal para los inputs */
    .espec-modal {
        --contact-bg: #F7EFE3;
    }


    /* Usa el mismo fondo del modal para los inputs */
    .contact-modal {
        --contact-bg: #F7EFE3;
    }

        /* Input/textarea normales y en focus */
        .contact-modal .form-control,
        .contact-modal .form-control:focus,
        .contact-modal .form-control:active,
        .contact-modal .contact-input,
        .contact-modal .contact-input:focus,
        .contact-modal .contact-textarea,
        .contact-modal .contact-textarea:focus {
            background-color: var(--contact-bg) !important; /* o 'transparent' si prefieres ver el fondo del modal */
            box-shadow: none !important; /* sin halo azul de Bootstrap */
        }

        /* Corrige el amarillo del autocompletado de Chrome */
        .contact-modal input:-webkit-autofill,
        .contact-modal input:-webkit-autofill:hover,
        .contact-modal input:-webkit-autofill:focus,
        .contact-modal textarea:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px var(--contact-bg) inset !important;
            -webkit-text-fill-color: #333 !important;
            caret-color: #333;
        }
    /* Fondo crema y look minimal */
    .contact-modal {
        background: #F7EFE3; /* tono crema */
        border: 0;
        padding: 1.25rem 1.25rem .2rem;
        position: relative;
    }

    /* Botón cerrar circular en esquina */
    .contact-close {
        position: absolute;
        top: -.35rem;
        right: -.35rem;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #222 !important;
        opacity: 1;
        filter: none;
        border: 1px solid white;
    }

        .contact-close:hover {
            background: #000 !important;
            opacity: 1;
        }


    /* Botón cerrar circular en esquina */
    .espec-close {
        position: absolute;
        top: -.55rem;
        right: -.55rem;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #222 !important;
        opacity: 1;
        filter: none;
        border: 2px solid white;
    }

        .espec-close:hover {
            background: #000 !important;
            opacity: 1;
        }

    .form-label {
        color: #6B5F52;
        font-weight: 500;
        margin-bottom: .15rem;
    }

    .asterisk {
        color: #c0392b;
    }

    /* Inputs tipo “línea” */
    .contact-input, .contact-textarea {
        background: transparent;
        border: none;
        border-bottom: 1px solid #D4C6B8;
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
    }

        .contact-input:focus, .contact-textarea:focus {
            border-bottom-color: #333;
            outline: none;
        }

        .contact-input::placeholder, .contact-textarea::placeholder {
            color: #9d907f;
        }

    /* Botón submit oscuro centrado */
    .btn-contact-submit {
        background: #2E2E2E !important;
        color: #fff !important;
        border-radius: 0.25rem;
        letter-spacing: .06em;
    }

        .btn-contact-submit:hover {
            background: #1d1d1d !important;
            color: #fff !important;
        }

    .social-icons {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

        .social-icons a {
            color: #ccc;
            font-size: 20px;
            margin-right: 10px;
            transition: color 0.3s;
        }

            .social-icons a:hover {
                color: #fff;
            }





    .btn-icon-header {
        position: relative;
        /*color: white !important;*/
        /*background: none;*/
        border: none;
        cursor: pointer;
        /*padding: 8px;*/
    }

        .btn-icon-header:hover {
            color: #FFDD05;
        }

    /*Tooltip*/
    /*.btn-icon-header::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #000;
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 100;
    }*/

    /*Flechita del tooltip*/
    /*.btn-icon-header::before {
        content: "";
        position: absolute;*/
    /*bottom: -10px;*/
    /*bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #fff;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 9999;
    }*/

    /*.btn-icon-header:hover::after,
    .btn-icon-header:hover::before {
        opacity: 1;
    }*/


    .custom-tooltip {
        position: absolute;
        top: 250%; /*AHORA se muestra debajo del botón */
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        background: #fff;
        color: #000;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        padding: 10px;
        font-size: 13px;
        font-weight: 400;
        display: none;
        z-index: 9999;
    }

    .btn-icon-header:hover .custom-tooltip {
        display: block;
    }

    /*Flecha ahora en la parte superior*/
    .tooltip-arrow {
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
    }

    /*Contenido*/
    .tooltip-content h6 {
        margin: 0 0 5px;
        font-size: 14px;
        font-weight: 600;
    }

    .tooltip-content img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 6px;
    }

    .tooltip-content p {
        margin: 0;
        font-size: 12px;
        color: #444;
    }