:root {

            --dark-1: #12151c;
            --dark-2: #1b212c;
            --dark-3: #242c39;

            --teal: #3fd0c9;
            --teal-dim: #2a8f8a;

            --blue: #3d7bfb;
            --blue-dim: #2a56c4;

            --light: #f2f5f7;

            --white: #ffffff;

            --ink: #12151c;

            --muted: #6b7684;

            --muted-light: #aeb8c2;

            --line: #e3e8ec;

            --radius: 18px;

        }


        /* =====================================================
           RESET
        ===================================================== */

        * {

            margin: 0;
            padding: 0;

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            font-family: "Inter", sans-serif;

            background: var(--light);

            color: var(--ink);

            overflow-x: hidden;

        }


        h1,
        h2,
        h3,
        h4 {

            font-family: "Rajdhani", sans-serif;

            font-weight: 700;

        }


        a {

            text-decoration: none;

            color: inherit;

        }


        img {

            max-width: 100%;

            display: block;

        }


        .wrap {

            width: min(1180px, calc(100% - 40px));

            margin: auto;

        }


        /* =====================================================
           BOTONES
        ===================================================== */

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            padding: 14px 28px;

            border-radius: 10px;

            font-family: "Rajdhani", sans-serif;

            font-size: 16px;

            font-weight: 700;

            text-transform: uppercase;

            cursor: pointer;

            transition: .3s;

        }


        .btn-primary {

            background: linear-gradient(120deg,
                    var(--teal),
                    var(--blue));

            color: white;

        }


        .btn-primary:hover {

            transform: translateY(-4px);

            box-shadow: 0 15px 30px rgba(63, 208, 201, .35);

        }


        .btn-dark {

            border: 2px solid var(--dark-1);

        }


        .btn-dark:hover {

            background: var(--dark-1);

            color: white;

        }


        /* =====================================================
   HEADER MOTOPANNIER PREMIUM
===================================================== */

header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 18px 0;

    transition:
        padding .4s ease,
        background .4s ease,
        box-shadow .4s ease,
        backdrop-filter .4s ease;

}


/* =====================================================
   HEADER SCROLL
===================================================== */

header.scrolled {

    padding: 10px 0;

    background:
        rgba(7, 11, 13, .88);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(63,208,201,.12);

    box-shadow:
        0 10px 40px rgba(0,0,0,.25);

}


/* =====================================================
   NAV
===================================================== */

.main-nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

}


/* =====================================================
   LOGO
===================================================== */

.logo {

    position: relative;

    display: flex;

    align-items: center;

    text-decoration: none;

    flex-shrink: 0;

}


.logo::after {

    content: "";

    position: absolute;

    bottom: -6px;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--teal);

    box-shadow:
        0 0 10px rgba(63,208,201,.7);

    transition: .4s;

}


.logo:hover::after {

    width: 100%;

}


.logo img {

    width: 75px;

    height: auto;

    display: block;

    object-fit: contain;

    transition: .4s;

}


header.scrolled .logo img {

    width: 68px;

}


.logo:hover img {

    transform: scale(1.05);

}


/* =====================================================
   NAV LINKS
===================================================== */

.nav-links {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-left: auto;

}


/* =====================================================
   DROPDOWN BUTTON
===================================================== */

.nav-dropdown {

    position: relative;

}


.nav-dropdown-btn {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 13px;

    border: 0;

    background: transparent;

    color: white;

    cursor: pointer;

    font-family: "Rajdhani", sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;

    transition: .3s;

}


.nav-dropdown-btn::after {

    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 2px;

    background: var(--teal);

    transform: scaleX(0);

    transform-origin: center;

    transition: .3s;

}


.nav-dropdown:hover
.nav-dropdown-btn::after {

    transform: scaleX(1);

}


.nav-dropdown-btn > i:first-child {

    color: var(--teal);

    font-size: 13px;

}


.dropdown-arrow {

    font-size: 8px !important;

    color: #8d979c !important;

    transition: .3s;

}


.nav-dropdown:hover .dropdown-arrow {

    transform: rotate(180deg);

    color: var(--teal) !important;

}


/* =====================================================
   SIMPLE LINKS
===================================================== */

.nav-simple {

    position: relative;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 12px 13px;

    color: white;

    text-decoration: none;

    font-family: "Rajdhani", sans-serif;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;

    transition: .3s;

}


.nav-simple::after {

    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 2px;

    background: var(--teal);

    transform: scaleX(0);

    transition: .3s;

}


.nav-simple:hover {

    color: var(--teal);

}


.nav-simple:hover::after {

    transform: scaleX(1);

}


.nav-simple i {

    color: var(--teal);

    font-size: 12px;

}


/* =====================================================
   DROPDOWN
===================================================== */

.dropdown-menu {

    position: absolute;

    top: calc(100% + 18px);

    left: 50%;

    width: 330px;

    transform:
        translateX(-50%)
        translateY(15px);

    padding: 10px;

    background:
        rgba(9,13,15,.98);

    border:
        1px solid rgba(63,208,201,.15);

    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 35px rgba(63,208,201,.05);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s;

}


.dropdown-menu::before {

    content: "";

    position: absolute;

    top: -5px;
    left: 50%;

    width: 10px;
    height: 10px;

    background: #090d0f;

    border-left:
        1px solid rgba(63,208,201,.15);

    border-top:
        1px solid rgba(63,208,201,.15);

    transform: translateX(-50%) rotate(45deg);

}


.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =====================================================
   DROPDOWN HEADER
===================================================== */

.dropdown-header {

    padding: 13px 13px 15px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

}


.dropdown-header span {

    display: block;

    color: var(--teal);

    font-family: "Rajdhani", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.dropdown-header small {

    display: block;

    margin-top: 4px;

    color: #667176;

    font-size: 10px;

}


/* =====================================================
   DROPDOWN ITEMS
===================================================== */

.dropdown-menu > a {

    position: relative;

    display: grid;

    grid-template-columns:
        42px 1fr 15px;

    align-items: center;

    gap: 12px;

    padding: 12px;

    color: white;

    text-decoration: none;

    border-bottom:
        1px solid rgba(255,255,255,.04);

    transition: .3s;

}


.dropdown-menu > a:hover {

    background:
        rgba(63,208,201,.07);

    transform: translateX(4px);

}


.dropdown-icon {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(63,208,201,.13);

    background:
        rgba(63,208,201,.04);

    color: var(--teal);

    transition: .3s;

}


.dropdown-menu > a:hover .dropdown-icon {

    background: var(--teal);

    color: #081011;

    transform:
        rotate(-5deg)
        scale(1.05);

}


.dropdown-menu > a strong {

    display: block;

    font-family: "Rajdhani", sans-serif;

    font-size: 14px;

    letter-spacing: .5px;

}


.dropdown-menu > a small {

    display: block;

    margin-top: 2px;

    color: #697378;

    font-size: 9px;

}


.dropdown-menu > a > i:last-child {

    color: #526066;

    font-size: 9px;

    transition: .3s;

}


.dropdown-menu > a:hover > i:last-child {

    color: var(--teal);

    transform: translateX(4px);

}


/* =====================================================
   DROPDOWN FOOTER
===================================================== */

.dropdown-footer {

    padding: 10px 5px 3px;

}


.dropdown-footer a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px;

    background:
        rgba(226,28,70,.08);

    color: #e21c46;

    text-decoration: none;

    font-family: "Rajdhani", sans-serif;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

    transition: .3s;

}


.dropdown-footer a:hover {

    background: #e21c46;

    color: white;

}


.dropdown-footer i {

    font-size: 9px;

}


/* =====================================================
   NAV ACTIONS
===================================================== */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =====================================================
   ACTION ICON
===================================================== */

.nav-action {

    position: relative;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: white;

    border:
        1px solid rgba(255,255,255,.10);

    text-decoration: none;

    transition: .3s;

}


.nav-action:hover {

    color: var(--teal);

    border-color:
        rgba(63,208,201,.4);

    transform: translateY(-3px);

}


.action-tooltip {

    position: absolute;

    top: calc(100% + 9px);

    left: 50%;

    padding: 5px 8px;

    background: #090d0f;

    color: white;

    font-size: 8px;

    white-space: nowrap;

    transform:
        translateX(-50%)
        translateY(-5px);

    opacity: 0;

    pointer-events: none;

    transition: .25s;

}


.nav-action:hover .action-tooltip {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);

}


/* =====================================================
   CART COUNT
===================================================== */

.cart-count {

    position: absolute;

    top: -5px;
    right: -5px;

    width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #e21c46;

    border-radius: 50%;

    color: white;

    font-size: 8px;

    font-weight: 800;

    border: 2px solid #101519;

}


/* =====================================================
   WHATSAPP HEADER
===================================================== */

.header-whatsapp {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 17px;

    background: #25d366;

    color: #07100b;

    text-decoration: none;

    font-family: "Rajdhani", sans-serif;

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;

    transition: .35s;

}


.header-whatsapp:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(37,211,102,.22);

}


.header-whatsapp i {

    font-size: 17px;

}


/* =====================================================
   BURGER
===================================================== */

.burger {

    display: none;

    width: 43px;
    height: 43px;

    background: transparent;

    border:
        1px solid rgba(255,255,255,.12);

    cursor: pointer;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

}


.burger span {

    width: 22px;
    height: 2px;

    background: white;

    transition: .3s;

}


.burger.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.burger.active span:nth-child(2) {

    opacity: 0;

}


.burger.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu {

    position: fixed;

    top: 0;
    right: 0;

    width: min(390px, 90%);

    height: 100vh;

    padding: 25px;

    background:
        linear-gradient(
            145deg,
            #0c1114,
            #080b0d
        );

    border-left:
        1px solid rgba(63,208,201,.15);

    box-shadow:
        -20px 0 60px rgba(0,0,0,.45);

    z-index: 2000;

    transform: translateX(100%);

    transition:
        transform .45s cubic-bezier(.77,0,.18,1);

    overflow-y: auto;

}


.mobile-menu.active {

    transform: translateX(0);

}


/* =====================================================
   MOBILE HEAD
===================================================== */

.mobile-menu-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 25px;

    margin-bottom: 15px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

}


.mobile-menu-head span {

    color: var(--teal);

    font-family: "Rajdhani", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

}


.mobile-menu-head button {

    width: 38px;
    height: 38px;

    border:
        1px solid rgba(255,255,255,.1);

    background: transparent;

    color: white;

    cursor: pointer;

}


/* =====================================================
   MOBILE LINKS
===================================================== */

.mobile-menu > a {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px 8px;

    color: white;

    text-decoration: none;

    border-bottom:
        1px solid rgba(255,255,255,.06);

    font-family: "Rajdhani", sans-serif;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

}


.mobile-menu > a i {

    color: var(--teal);

    width: 20px;

}


.mobile-menu > a:hover {

    color: var(--teal);

}


/* =====================================================
   MOBILE DROPDOWN
===================================================== */

.mobile-dropdown {

    border-bottom:
        1px solid rgba(255,255,255,.06);

}


.mobile-dropdown-btn {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 8px;

    border: 0;

    background: transparent;

    color: white;

    font-family: "Rajdhani", sans-serif;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    cursor: pointer;

}


.mobile-dropdown-btn > span {

    display: flex;

    align-items: center;

    gap: 13px;

}


.mobile-dropdown-btn span i {

    color: var(--teal);

    width: 20px;

}


.mobile-dropdown-btn > i {

    font-size: 10px;

    color: #667176;

    transition: .3s;

}


.mobile-dropdown.open
.mobile-dropdown-btn > i {

    transform: rotate(180deg);

    color: var(--teal);

}


.mobile-submenu {

    max-height: 0;

    overflow: hidden;

    transition: max-height .4s ease;

}


.mobile-dropdown.open
.mobile-submenu {

    max-height: 300px;

}


.mobile-submenu a {

    display: block;

    padding: 12px 15px 12px 42px;

    color: #7d888d;

    text-decoration: none;

    font-family: "Rajdhani", sans-serif;

    font-size: 13px;

    transition: .3s;

}


.mobile-submenu a::before {

    content: "→";

    color: var(--teal);

    margin-right: 8px;

}


.mobile-submenu a:hover {

    color: white;

    transform: translateX(5px);

}


/* =====================================================
   MOBILE WHATSAPP
===================================================== */

.mobile-whatsapp {

    margin-top: 25px;

    justify-content: center;

    background: #25d366;

    color: #07100b !important;

    border: 0 !important;

}


.mobile-whatsapp i {

    color: #07100b !important;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .nav-links {

        gap: 0;

    }

    .nav-dropdown-btn,
    .nav-simple {

        padding-left: 8px;
        padding-right: 8px;

        font-size: 13px;

    }

    .header-whatsapp span {

        display: none;

    }

    .header-whatsapp {

        width: 40px;
        height: 40px;

        padding: 0;

        justify-content: center;

    }

}


@media (max-width: 900px) {

    .nav-links,
    .nav-actions {

        display: none;

    }

    .burger {

        display: flex;

    }

    .logo img {

        width: 65px;

    }

}


@media (max-width: 480px) {

    header {

        padding: 13px 0;

    }

    .logo img {

        width: 58px;

    }

    .mobile-menu {

        width: 92%;

        padding: 20px;

    }

}

        /* =====================================================
           HERO
        ===================================================== */

        .hero {

            min-height: 100vh;

            display: flex;

            align-items: center;

            padding: 150px 0 90px;

            background:

                radial-gradient(circle at 80% 20%,
                    #263246 0%,
                    var(--dark-1) 55%);

            color: white;

            overflow: hidden;

            position: relative;

        }


        .hero::before {

            content: "";

            position: absolute;

            width: 600px;

            height: 600px;

            border-radius: 50%;

            border: 1px solid rgba(63, 208, 201, .15);

            right: -200px;

            top: 50%;

            transform: translateY(-50%);

        }


        .hero-grid {

            display: grid;

            grid-template-columns: 1fr 1fr;

            align-items: center;

            gap: 60px;

            position: relative;

            z-index: 2;

        }


        .eyebrow {

            color: var(--teal);

            font-family: "Rajdhani", sans-serif;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 3px;

            margin-bottom: 15px;

        }


        .hero h1 {

            font-size: clamp(45px, 6vw, 76px);

            line-height: 1;

            text-transform: uppercase;

        }


        .hero h1 span {

            color: var(--teal);

        }


        .hero p {

            max-width: 520px;

            color: var(--muted-light);

            font-size: 17px;

            line-height: 1.7;

            margin: 25px 0 35px;

        }


        .hero-buttons {

            display: flex;

            flex-wrap: wrap;

            gap: 15px;

        }


        /* =====================================================
           IMAGEN PRINCIPAL CASCO
        ===================================================== */

        .hero-image {

            position: relative;

            display: flex;

            justify-content: center;

            align-items: center;

        }


        .helmet-circle {

            position: absolute;

            width: 430px;

            height: 430px;

            border-radius: 50%;

            border: 2px dashed rgba(63, 208, 201, .35);

            animation: rotate 25s linear infinite;

        }


        .helmet-circle-two {

            position: absolute;

            width: 330px;

            height: 330px;

            border-radius: 50%;

            border: 1px solid rgba(61, 123, 251, .35);

        }


        .hero-image img {

            width: min(430px, 90%);

            position: relative;

            z-index: 2;

            object-fit: contain;

            animation: floating 4s ease-in-out infinite;

        }


        @keyframes floating {

            0%,
            100% {

                transform: translateY(0);

            }

            50% {

                transform: translateY(-15px);

            }

        }


        @keyframes rotate {

            to {

                transform: rotate(360deg);

            }

        }


        /* =====================================================
           BANDA
        ===================================================== */

        .marquee {

            background:

                linear-gradient(90deg,
                    var(--blue-dim),
                    var(--teal-dim));

            overflow: hidden;

            padding: 16px 0;

        }


        .marquee-track {

            display: flex;

            width: max-content;

            animation: marqueeMove 25s linear infinite;

        }


        .marquee span {

            color: white;

            font-family: "Rajdhani", sans-serif;

            font-size: 16px;

            font-weight: 700;

            letter-spacing: 2px;

            text-transform: uppercase;

            white-space: nowrap;

            padding: 0 30px;

        }


        @keyframes marqueeMove {

            from {

                transform: translateX(0);

            }

            to {

                transform: translateX(-50%);

            }

        }


        /* =====================================================
           SECCIONES
        ===================================================== */

        section {

            padding: 110px 0;

        }


        .section-title {

            text-align: center;

            max-width: 700px;

            margin: 0 auto 55px;

        }


        .section-title h2 {

            font-size: clamp(34px, 4vw, 52px);

            text-transform: uppercase;

            line-height: 1;

        }


        .section-title p {

            color: var(--muted);

            margin-top: 15px;

            line-height: 1.7;

        }


        /* =====================================================
           CATEGORIAS DE CASCOS
        ===================================================== */
/* =====================================================
   CATEGORÍAS DE CASCOS
===================================================== */

.helmet-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 70px;
}


/* =====================================================
   TARJETA CATEGORÍA
===================================================== */

.helmet-category {
    background: white;
    border-radius: 20px;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: .35s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.helmet-category:hover {
    transform: translateY(-8px);
}

.helmet-category.active {
    border-color: var(--teal);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(63, 208, 201, .2);
}


/* =====================================================
   IMAGEN DE CATEGORÍA
===================================================== */

.category-image {
    height: 230px;
    background: #eef2f5;

    padding: 0;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =====================================================
   IMAGEN
===================================================== */

.category-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform .4s ease;
}


/* =====================================================
   HOVER IMAGEN
===================================================== */

.helmet-category:hover .category-image img {
    transform: scale(1.06);
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.category-info {
    padding: 22px;
    text-align: center;
}

.category-info h3 {
    font-size: 25px;
    text-transform: uppercase;
}

.category-info p {
    color: var(--muted);
    font-size: 14px;
    margin-top: 6px;
}


       /* =====================================================
   PRODUCTOS
===================================================== */

.products-title {
    text-align: center;
    margin-bottom: 35px;
}

.products-title h3 {
    font-size: 35px;
    text-transform: uppercase;
}


/* =====================================================
   GRID
===================================================== */

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* =====================================================
   TARJETA
===================================================== */

.product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    transition: .35s ease;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, .12);
}


/* =====================================================
   IMAGEN
===================================================== */

.product-image {
    height: 480px;
    background: #f3f5f6;
    padding: 0; /* IMPORTANTE: quitamos el espacio */
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    display: block;

    /* Rellena toda la tarjeta sin deformarse */
    object-fit: cover;

    /* Centra la parte importante de la imagen */
    object-position: center;

    transition: transform .4s ease;
}


/* =====================================================
   HOVER IMAGEN
===================================================== */

.product-card:hover .product-image img {
    transform: scale(1.06);
}


/* =====================================================
   INFORMACIÓN
===================================================== */

.product-info {
    padding: 20px;
}

.product-brand {
    color: var(--teal-dim);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-info h4 {
    font-size: 21px;
    margin: 6px 0 12px;
    text-transform: uppercase;
}

.product-price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 18px;
}

.product-card .btn {
    width: 100%;
    padding: 11px;
    font-size: 14px;
}


      /* =====================================================
   MAYORISTAS / DISTRIBUIDORES
===================================================== */

.wholesale {

    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(63, 208, 201, .10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #080a0e,
            #111720,
            #080a0e
        );

    color: white;

}


/* =====================================================
   FONDO ANIMADO
===================================================== */

.wholesale-bg {

    position: absolute;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    border: 1px solid rgba(63, 208, 201, .08);

    animation: wholesaleRotate 20s linear infinite;

}


.wholesale-bg::before {

    content: "";

    position: absolute;

    inset: 60px;

    border-radius: 50%;

    border: 1px dashed rgba(61, 123, 251, .12);

    animation: wholesaleRotateReverse 14s linear infinite;

}


.wholesale-bg::after {

    content: "";

    position: absolute;

    inset: 150px;

    border-radius: 50%;

    border: 1px solid rgba(63, 208, 201, .08);

}


/* =====================================================
   LÍNEAS DE VELOCIDAD
===================================================== */

.wholesale-lines {

    position: absolute;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--teal),
        transparent
    );

    opacity: .35;

    transform: rotate(-25deg);

}


.wholesale-line-1 {

    width: 500px;

    left: -150px;

    top: 25%;

    animation: wholesaleSpeed 5s linear infinite;

}


.wholesale-line-2 {

    width: 350px;

    right: -100px;

    top: 65%;

    animation: wholesaleSpeed 4s linear infinite reverse;

}


.wholesale-line-3 {

    width: 250px;

    left: 20%;

    bottom: 15%;

    animation: wholesaleSpeed 6s linear infinite;

}


/* =====================================================
   CONTENIDO
===================================================== */

.wholesale-content {

    position: relative;

    z-index: 5;

    max-width: 850px;

    margin: auto;

    text-align: center;

    padding: 100px 20px;

}


/* =====================================================
   BADGE
===================================================== */

.wholesale-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 18px;

    border: 1px solid rgba(63, 208, 201, .35);

    border-radius: 50px;

    background: rgba(63, 208, 201, .06);

    color: var(--teal);

    font-family: "Rajdhani", sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    opacity: 0;

    transform: translateY(25px);

    animation:
        wholesaleReveal .8s ease forwards;

}


.pulse-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--teal);

    box-shadow:
        0 0 8px var(--teal),
        0 0 18px var(--teal);

    animation: pulseDot 1.5s ease-in-out infinite;

}


/* =====================================================
   TITULO
===================================================== */

.wholesale h2 {

    margin-top: 25px;

    font-size: clamp(42px, 6vw, 72px);

    line-height: .95;

    letter-spacing: -1px;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(35px);

    animation:
        wholesaleReveal .9s ease .2s forwards;

}


.wholesale h2 span {

    color: var(--teal);

    text-shadow:
        0 0 20px rgba(63, 208, 201, .25);

}


/* =====================================================
   DESCRIPCIÓN
===================================================== */

.wholesale-description {

    max-width: 650px;

    margin: 30px auto 0;

    color: var(--muted-light);

    font-size: 17px;

    line-height: 1.7;

    opacity: 0;

    transform: translateY(25px);

    animation:
        wholesaleReveal .9s ease .4s forwards;

}


.wholesale-description strong {

    color: white;

}


/* =====================================================
   SUBTEXTO
===================================================== */

.wholesale-subtext {

    margin-top: 18px;

    color: white;

    font-family: "Rajdhani", sans-serif;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 1px;

    opacity: 0;

    animation:
        wholesaleReveal .9s ease .6s forwards;

}


/* =====================================================
   BOTÓN WHATSAPP
===================================================== */

.wholesale-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin-top: 35px;

    padding: 17px 28px;

    border-radius: 12px;

    background: #25D366;

    color: white;

    font-family: "Rajdhani", sans-serif;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: 1px;

    text-decoration: none;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(37, 211, 102, .22);

    opacity: 0;

    transform: translateY(25px) scale(.95);

    animation:
        wholesaleButton .9s ease .8s forwards;

    transition: .35s ease;

}


.wholesale-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 70%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transform: skewX(-20deg);

    animation: whatsappShine 3s ease-in-out infinite;

}


.wholesale-btn:hover {

    transform: translateY(-5px) scale(1.03);

    box-shadow:
        0 18px 45px rgba(37, 211, 102, .38);

}


.whatsapp-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 24px;

}


.wholesale-btn > i {

    transition: .3s;

}


.wholesale-btn:hover > i {

    transform: translateX(6px);

}


/* =====================================================
   INFORMACIÓN
===================================================== */

.wholesale-info {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 35px;

    margin-top: 45px;

    opacity: 0;

    animation:
        wholesaleReveal .9s ease 1s forwards;

}


.wholesale-info div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--muted-light);

    font-family: "Rajdhani", sans-serif;

    font-size: 14px;

    font-weight: 600;

}


.wholesale-info i {

    color: var(--teal);

    font-size: 16px;

}


/* =====================================================
   ANIMACIONES
===================================================== */

@keyframes wholesaleReveal {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes wholesaleButton {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(.95);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes pulseDot {

    0%,
    100% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.5);

        opacity: .5;

    }

}


@keyframes wholesaleRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


@keyframes wholesaleRotateReverse {

    from {

        transform: rotate(360deg);

    }

    to {

        transform: rotate(0deg);

    }

}


@keyframes wholesaleSpeed {

    0% {

        transform:
            translateX(-400px)
            rotate(-25deg);

        opacity: 0;

    }

    30% {

        opacity: .5;

    }

    70% {

        opacity: .5;

    }

    100% {

        transform:
            translateX(1000px)
            rotate(-25deg);

        opacity: 0;

    }

}


@keyframes whatsappShine {

    0% {

        left: -100%;

    }

    45%,
    100% {

        left: 150%;

    }

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 700px) {

    .wholesale {

        min-height: 620px;

    }

    .wholesale-content {

        padding: 80px 18px;

    }

    .wholesale h2 {

        font-size: 43px;

    }

    .wholesale-description {

        font-size: 15px;

    }

    .wholesale-subtext {

        font-size: 15px;

    }

    .wholesale-btn {

        width: 100%;

        max-width: 340px;

        padding: 16px 18px;

        font-size: 14px;

    }

    .wholesale-info {

        flex-direction: column;

        gap: 16px;

        align-items: center;

    }

    .wholesale-bg {

        width: 450px;

        height: 450px;

    }

}


        /* =====================================================
           POR QUE NOSOTROS
        ===================================================== */

        .why-grid {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            gap: 25px;

        }


        .why-card {

            background: white;

            padding: 30px;

            border-radius: 16px;

        }


        .why-number {

            color: var(--teal-dim);

            font-family: "Rajdhani", sans-serif;

            font-size: 18px;

            font-weight: 700;

        }


        .why-card h3 {

            font-size: 22px;

            margin: 10px 0;

            text-transform: uppercase;

        }


        .why-card p {

            color: var(--muted);

            font-size: 14px;

            line-height: 1.6;

        }


        /* =====================================================
           CTA
        ===================================================== */

        .cta {

            padding-top: 0;

        }


        .cta-box {

            background:

                linear-gradient(120deg,
                    var(--blue),
                    var(--teal));

            padding: 65px;

            border-radius: 25px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 30px;

            color: white;

        }


        .cta-box h2 {

            font-size: 42px;

            text-transform: uppercase;

        }


        .cta-box p {

            margin-top: 10px;

        }


        .cta-box .btn {

            background: white;

            color: var(--dark-1);

            white-space: nowrap;

        }


        /* =====================================================
           FOOTER
        ===================================================== */

        footer {

            background: var(--dark-1);

            color: var(--muted-light);

            padding: 70px 0 25px;

        }


        .footer-grid {

            display: grid;

            grid-template-columns: 1.5fr 1fr 1fr;

            gap: 50px;

            padding-bottom: 50px;

        }


        footer h3 {

            color: white;

            font-size: 20px;

            text-transform: uppercase;

            margin-bottom: 20px;

        }


        footer p {

            line-height: 1.7;

            font-size: 14px;

        }


        footer ul {

            list-style: none;

        }


        footer li {

            margin-bottom: 12px;

            font-size: 14px;

        }


        .footer-bottom {

            border-top: 1px solid rgba(255, 255, 255, .1);

            padding-top: 25px;

            text-align: center;

            font-size: 13px;

        }


        /* =====================================================
           WHATSAPP
        ===================================================== */

        .whatsapp {

            position: fixed;

            bottom: 25px;

            right: 25px;

            width: 62px;

            height: 62px;

            border-radius: 50%;

            background: #25d366;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            font-size: 30px;

            z-index: 2000;

            box-shadow: 0 10px 30px rgba(37, 211, 102, .45);

            transition: .3s;

        }


        .whatsapp:hover {

            transform: scale(1.1);

        }


        /* =====================================================
           RESPONSIVE TABLET
        ===================================================== */

        @media(max-width: 1000px) {

            .hero-grid {

                grid-template-columns: 1fr;

                text-align: center;

            }


            .hero p {

                margin-left: auto;

                margin-right: auto;

            }


            .hero-buttons {

                justify-content: center;

            }


            .hero-image {

                order: -1;

            }


            .products-grid {

                grid-template-columns: repeat(2, 1fr);

            }


            .why-grid {

                grid-template-columns: repeat(2, 1fr);

            }


            .cta-box {

                flex-direction: column;

                text-align: center;

            }

        }


        /* =====================================================
           RESPONSIVE MOVIL
        ===================================================== */

        @media(max-width: 700px) {

            .wrap {

                width: min(100% - 28px, 1180px);

            }


            .nav-links,

            nav>.btn {

                display: none;

            }


            .burger {

                display: flex;

            }


            .hero {

                padding-top: 120px;

            }


            .hero h1 {

                font-size: 48px;

            }


            .helmet-circle {

                width: 280px;

                height: 280px;

            }


            .helmet-circle-two {

                width: 220px;

                height: 220px;

            }


            .hero-image img {

                width: 280px;

            }


            .helmet-categories {

                grid-template-columns: 1fr;

            }


            .products-grid {

                grid-template-columns: repeat(2, 1fr);

                gap: 12px;

            }


            .product-image {

                height: 180px;

                padding: 10px;

            }


            .product-info {

                padding: 14px;

            }


            .product-info h4 {

                font-size: 17px;

            }


            .product-price {

                font-size: 16px;

            }


            .accessories-grid {

                grid-template-columns: 1fr;

            }


            .why-grid {

                grid-template-columns: 1fr;

            }


            .footer-grid {

                grid-template-columns: 1fr;

                gap: 30px;

            }


            .cta-box {

                padding: 40px 25px;

            }


            .cta-box h2 {

                font-size: 32px;

            }


            section {

                padding: 75px 0;

            }

        }


        /* =====================================================
           MENU MOVIL
        ===================================================== */

        .mobile-menu {

            position: fixed;

            inset: 0;

            background: var(--dark-1);

            z-index: 999;

            display: none;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            gap: 30px;

        }


        .mobile-menu.active {

            display: flex;

        }


        .mobile-menu a {

            color: white;

            font-family: "Rajdhani", sans-serif;

            font-size: 30px;

            font-weight: 700;

            text-transform: uppercase;

        }

 /* =====================================================
   PROMOCIONES
===================================================== */

.promo-section {
    padding: 90px 0;
    background: #f4f4f4;
}

.promo-grid {
    display: grid;
    grid-template-columns: 1.5fr .72fr .72fr;
    gap: 16px;
}

.promo-column {
    display: grid;
    gap: 16px;
}

.promo-card {
    position: relative;
    display: block;
    min-height: 255px;
    overflow: hidden;
    isolation: isolate;
    background: #111;
}

.promo-big {
    min-height: 526px;
}

.promo-card img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.promo-card:hover img {
    transform: scale(1.08);
}

.promo-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.65)
        );
    z-index: 1;
}

.promo-content {
    position: absolute;
    z-index: 2;
    top: 30px;
    left: 30px;
    color: white;
}

.promo-center {
    width: 100%;
    text-align: center;
    left: 0;
}

.promo-content span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.promo-content h3 {
    margin-top: 5px;
    font-size: 22px;
    max-width: 220px;
    line-height: 1.05;
}

.promo-center h3 {
    margin: 5px auto;
}

.promo-content h3 strong {
    display: block;
    font-size: 34px;
}

.promo-button {
    position: absolute;
    z-index: 3;
    bottom: 28px;
    width: 100%;
    text-align: center;
    color: white;
    font-weight: 800;
    font-size: 22px;
    transition: .3s;
}

.promo-card:hover .promo-button {
    letter-spacing: 2px;
    transform: translateY(-4px);
}

.orange .promo-overlay {
    background:
        linear-gradient(
          
        );
}

.blue {
    background:
        linear-gradient(
           
        );
}

.purple .promo-overlay {
    background:
        linear-gradient(
           
        );
}

.shape-one,
.shape-two {
    position: absolute;
    border-radius: 50%;
    background: rgba(94,154,255,.5);
}

.shape-one {
    width: 180px;
    height: 180px;
    top: -80px;
    right: -50px;
}

.shape-two {
    width: 100px;
    height: 100px;
    bottom: -30px;
    left: -20px;
}

.promo-finance {
    width: 100%;
    left: 0;
    text-align: center;
    top: 35px;
}

.promo-finance h2 {
    font-size: 60px;
    margin: 25px 0 50px;
}

.promo-finance strong {
    font-size: 18px;
}


/* =====================================================
   ELIGE TU ESTILO
===================================================== */

.style-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    color: white;
    background:
        linear-gradient(
            110deg,
            #101416,
            #24292c,
            #111517
        );
}

.style-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(255,255,255,.015) 1px,
            transparent 1px
        );

    background-size: 100% 5px;

    opacity: .5;
}

.urban-lights {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .16;
    pointer-events: none;
}

.light-1 {
    background: #ff004c;
    top: 0;
    left: 10%;
}

.light-2 {
    background: #00c2ff;
    right: 10%;
    bottom: 0;
}

.light-3 {
    background: #ffffff;
    top: 40%;
    left: 45%;
    width: 150px;
    height: 150px;
}

.style-heading {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.style-heading h2 {
    font-size: clamp(45px, 7vw, 80px);
    font-weight: 900;
    letter-spacing: -2px;
}

.style-heading h2 span {
    color: white;
}

.style-heading h2 {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.65);
}

.style-heading h2 span {
    color: white;
    -webkit-text-stroke: 0;
}

.style-tabs {
    position: relative;
    display: flex;
    gap: 35px;
    margin-bottom: 45px;
}

.style-tab {
    position: relative;
    border: none;
    background: transparent;
    color: rgba(255,255,255,.8);
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    padding-bottom: 12px;
    transition: .3s;
}

.style-tab::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: #e21c46;
    bottom: 0;
    left: 0;
    transition: .35s;
}

.style-tab:hover,
.style-tab.active {
    color: white;
}

.style-tab.active::after {
    width: 100%;
}

.style-content {
    display: none;
    animation: styleFade .6s ease;
}

.style-content.active {
    display: block;
}

.style-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px;
}

.style-image {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #222;
    box-shadow: 0 15px 40px rgba(0,0,0,.3);
    cursor: pointer;
}

.style-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            transparent 50%,
            rgba(0,0,0,.6)
        );
    opacity: 0;
    transition: .4s;
}

.style-image:hover::after {
    opacity: 1;
}

.style-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}

.style-image:hover img {
    transform: scale(1.1);
}

.style-label {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 18px;
    opacity: 0;
    transform: translateY(20px);
    transition: .4s;
}

.style-image:hover .style-label {
    opacity: 1;
    transform: translateY(0);
}


/* =====================================================
   COMPRA POR TIPO DE CASCO
===================================================== */

.helmet-types {
    padding: 100px 0;
    background: #f5f5f5;
}

.helmet-type-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 65px;
}

.helmet-type-top h2 {
    font-size: clamp(30px, 4vw, 48px);
}

.helmet-type-top a {
    color: #202020;
    font-size: 17px;
    font-weight: 600;
}

.helmet-type-top a i {
    color: #c82042;
    margin-right: 5px;
}

.helmet-type-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.helmet-type-card {
    text-align: center;
    color: #222;
}

.helmet-icon {
    width: 125px;
    height: 125px;
    margin: auto;
    border-radius: 50%;
    background: #e5e6e8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
    overflow: hidden;
}

.helmet-icon img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    transition: .4s;
}

.helmet-type-card:hover .helmet-icon {
    background: #222;
    transform: translateY(-10px) rotate(-4deg);
    box-shadow: 0 20px 35px rgba(0,0,0,.2);
}

.helmet-type-card:hover img {
    transform: scale(1.15);
}

.helmet-type-card h3 {
    margin-top: 22px;
    font-size: 15px;
    font-family: "Inter", sans-serif;
}

/* =====================================================
   FOOTER MOTOPANNIER PREMIUM
===================================================== */

.main-footer {

    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(25, 205, 196, .08),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(226, 28, 70, .10),
            transparent 35%
        ),
        #080b0d;

    color: #fff;

    padding: 80px 0 25px;

}


/* =====================================================
   GLOWS
===================================================== */

.footer-glow {

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(150px);

    pointer-events: none;

}


.footer-glow-1 {

    top: -250px;
    right: -150px;

    background: #e21c46;

    opacity: .10;

}


.footer-glow-2 {

    bottom: -250px;
    left: -200px;

    background: #3fd0c9;

    opacity: .07;

}


/* =====================================================
   SPEED LINES
===================================================== */

.footer-speed-line {

    position: absolute;

    width: 500px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(63,208,201,.25),
            transparent
        );

    transform: rotate(-25deg);

    pointer-events: none;

}


.footer-speed-1 {

    top: 130px;
    left: -180px;

    animation: footerSpeed 7s linear infinite;

}


.footer-speed-2 {

    top: 300px;
    right: -250px;

    animation: footerSpeed 9s linear infinite reverse;

}


.footer-speed-3 {

    bottom: 180px;
    left: 20%;

    opacity: .4;

}


@keyframes footerSpeed {

    0% {
        transform: translateX(-150px) rotate(-25deg);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: .6;
    }

    100% {
        transform: translateX(250px) rotate(-25deg);
        opacity: 0;
    }

}


/* =====================================================
   TOP
===================================================== */

.footer-top {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 65px;

    font-family: "Rajdhani", sans-serif;

}


.footer-top-line {

    width: 55px;
    height: 2px;

    background: #3fd0c9;

    box-shadow:
        0 0 15px rgba(63,208,201,.6);

}


.footer-top span {

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 4px;

    color: #fff;

}


.footer-top p {

    margin: 0;

    font-size: 11px;

    letter-spacing: 3px;

    color: #697277;

}


/* =====================================================
   MAIN GRID
===================================================== */

.footer-main {

    position: relative;

    display: grid;

    grid-template-columns:
        1.6fr
        .8fr
        .9fr
        1.1fr;

    gap: 55px;

    padding-bottom: 70px;

}


/* =====================================================
   BRAND
===================================================== */

.footer-brand {

    min-width: 0;

}


.footer-logo {

    display: inline-flex;

    align-items: center;

    margin-bottom: 25px;

}


.footer-logo img {

    width: 190px;

    height: auto;

    object-fit: contain;

    display: block;

}


.footer-description {

    max-width: 370px;

    color: #8d979c;

    font-size: 14px;

    line-height: 1.8;

    margin: 0 0 25px;

}


/* =====================================================
   WHATSAPP
===================================================== */

.footer-whatsapp {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 12px 18px 12px 12px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.025);

    color: #fff;

    text-decoration: none;

    transition: .35s;

    overflow: hidden;

}


.footer-whatsapp::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 30%,
            rgba(255,255,255,.08),
            transparent 70%
        );

    transform: translateX(-100%);

    transition: .6s;

}


.footer-whatsapp:hover::before {

    transform: translateX(100%);

}


.footer-whatsapp:hover {

    border-color: #25d366;

    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(37,211,102,.15);

}


.whatsapp-circle {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #25d366;

    border-radius: 50%;

    font-size: 21px;

}


.footer-whatsapp small {

    display: block;

    color: #70797e;

    font-size: 8px;

    letter-spacing: 1.5px;

    margin-bottom: 3px;

}


.footer-whatsapp strong {

    display: block;

    font-size: 12px;

    letter-spacing: .4px;

}


.footer-whatsapp > i {

    color: #697277;

    font-size: 11px;

    margin-left: 5px;

}


/* =====================================================
   SOCIAL
===================================================== */

.social-title {

    margin-top: 30px;
    margin-bottom: 12px;

    font-size: 9px;

    letter-spacing: 2px;

    color: #666f74;

}


.social-links {

    display: flex;

    gap: 9px;

}


.social-links a {

    position: relative;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.10);

    color: #8b959a;

    text-decoration: none;

    transition: .35s;

    overflow: hidden;

}


.social-links a::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #3fd0c9;

    transform: translateY(100%);

    transition: .3s;

    z-index: 0;

}


.social-links a i {

    position: relative;

    z-index: 1;

}


.social-links a:hover::before {

    transform: translateY(0);

}


.social-links a:hover {

    color: #071011;

    border-color: #3fd0c9;

    transform: translateY(-5px);

}


/* =====================================================
   COLUMNS
===================================================== */

.footer-column {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


.footer-column-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

}


.footer-column-title span {

    color: #3fd0c9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

}


.footer-column-title h3 {

    margin: 0;

    font-family: "Rajdhani", sans-serif;

    font-size: 19px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.footer-column > a {

    display: flex;

    align-items: center;

    gap: 9px;

    width: fit-content;

    color: #858f94;

    text-decoration: none;

    font-size: 13px;

    transition: .3s;

}


.footer-column > a i {

    color: #3fd0c9;

    font-size: 8px;

    opacity: 0;

    transform: translateX(-5px);

    transition: .3s;

}


.footer-column > a:hover {

    color: #fff;

    transform: translateX(5px);

}


.footer-column > a:hover i {

    opacity: 1;

    transform: translateX(0);

}


/* =====================================================
   CONTACT
===================================================== */

.footer-contact .contact-item {

    display: flex;

    align-items: center;

    gap: 13px;

    text-decoration: none;

    color: inherit;

    margin-bottom: 10px;

}


.contact-icon {

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(63,208,201,.16);

    background: rgba(63,208,201,.035);

    color: #3fd0c9;

    transition: .3s;

}


.contact-item:hover .contact-icon {

    background: #3fd0c9;

    color: #071011;

    transform: rotate(-5deg);

}


.contact-item small {

    display: block;

    color: #626b70;

    font-size: 8px;

    letter-spacing: 1.5px;

    margin-bottom: 4px;

}


.contact-item strong {

    display: block;

    color: #dfe3e5;

    font-size: 12px;

    font-weight: 600;

}


/* =====================================================
   CTA
===================================================== */

.footer-cta {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 38px 42px;

    background:
        linear-gradient(
            115deg,
            #151b1f,
            #0d1113
        );

    border: 1px solid rgba(255,255,255,.08);

    overflow: hidden;

}


.footer-cta::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #3fd0c9;

    box-shadow:
        0 0 25px rgba(63,208,201,.7);

}


.cta-decoration {

    position: absolute;

    width: 250px;
    height: 250px;

    right: -100px;
    top: -120px;

    border-radius: 50%;

    border: 1px solid rgba(63,208,201,.10);

    box-shadow:
        0 0 0 35px rgba(63,208,201,.025),
        0 0 0 70px rgba(63,208,201,.018);

}


.footer-cta-content {

    position: relative;

    z-index: 2;

}


.footer-cta-content > span {

    display: block;

    color: #3fd0c9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.footer-cta-content > span i {

    margin-right: 5px;

}


.footer-cta h3 {

    margin: 8px 0 5px;

    font-family: "Rajdhani", sans-serif;

    font-size: 29px;

    line-height: 1.05;

    letter-spacing: .5px;

}


.footer-cta h3 strong {

    color: #e21c46;

}


.footer-cta p {

    margin: 0;

    color: #737d82;

    font-size: 12px;

}


/* =====================================================
   CTA BUTTON
===================================================== */

.footer-cta-btn {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 16px 20px;

    background: #e21c46;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .7px;

    transition: .35s;

    overflow: hidden;

}


.footer-cta-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transition: .5s;

}


.footer-cta-btn:hover::before {

    left: 100%;

}


.footer-cta-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(226,28,70,.25);

}


.footer-cta-btn > span {

    display: flex;

    align-items: center;

    gap: 8px;

}


.footer-cta-btn > span i {

    font-size: 18px;

}


.footer-cta-btn > i {

    transition: .3s;

}


.footer-cta-btn:hover > i {

    transform: translateX(5px);

}


/* =====================================================
   MOTO PHRASE
===================================================== */

.footer-moto-phrase {

    display: flex;

    align-items: center;

    gap: 20px;

    justify-content: center;

    margin: 45px 0 25px;

}


.footer-moto-phrase span {

    width: 70px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(63,208,201,.35)
        );

}


.footer-moto-phrase span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(63,208,201,.35),
            transparent
        );

}


.footer-moto-phrase p {

    margin: 0;

    color: #626c71;

    font-family: "Rajdhani", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    text-align: center;

}


.footer-moto-phrase strong {

    color: #c7cdd0;

}


/* =====================================================
   BOTTOM
===================================================== */

.footer-bottom-new {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 23px;

    border-top: 1px solid rgba(255,255,255,.07);

    color: #535c60;

    font-size: 10px;

}


.footer-bottom-new p {

    margin: 0;

}


.footer-bottom-new strong {

    color: #899297;

}


.footer-bottom-new div {

    display: flex;

    gap: 22px;

}


.footer-bottom-new a {

    color: #596267;

    text-decoration: none;

    transition: .3s;

}


.footer-bottom-new a:hover {

    color: #fff;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1100px) {

    .footer-main {

        grid-template-columns:
            1.4fr
            1fr
            1fr;

        gap: 45px;

    }

    .footer-contact {

        grid-column: span 1;

    }

}


@media (max-width: 800px) {

    .main-footer {

        padding-top: 65px;

    }

    .footer-top {

        margin-bottom: 45px;

    }

    .footer-main {

        grid-template-columns: 1fr 1fr;

        gap: 45px 30px;

    }

    .footer-brand {

        grid-column: span 2;

    }

    .footer-cta {

        align-items: flex-start;

        flex-direction: column;

        padding: 30px;

    }

    .footer-cta-btn {

        width: 100%;

        justify-content: space-between;

    }

}


@media (max-width: 550px) {

    .main-footer {

        padding: 55px 0 20px;

    }

    .footer-top {

        gap: 10px;

        margin-bottom: 40px;

    }

    .footer-top-line {

        width: 35px;

    }

    .footer-top span {

        font-size: 11px;

        letter-spacing: 2px;

    }

    .footer-top p {

        display: none;

    }


    .footer-main {

        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 45px;

    }

    .footer-brand {

        grid-column: auto;

    }


    .footer-logo img {

        width: 155px;

    }


    .footer-description {

        font-size: 13px;

        max-width: 100%;

    }


    .footer-whatsapp {

        width: 100%;

        box-sizing: border-box;

    }


    .social-links {

        margin-top: 5px;

    }


    .footer-column {

        gap: 12px;

    }


    .footer-cta {

        padding: 25px 22px;

    }


    .footer-cta h3 {

        font-size: 25px;

    }


    .footer-cta p {

        line-height: 1.6;

    }


    .footer-cta-btn {

        padding: 15px;

        font-size: 10px;

    }


    .footer-moto-phrase {

        gap: 10px;

        margin: 35px 0 20px;

    }


    .footer-moto-phrase span {

        width: 25px;

    }


    .footer-moto-phrase p {

        font-size: 8px;

        letter-spacing: 1.5px;

    }


    .footer-bottom-new {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

        line-height: 1.7;

    }


    .footer-bottom-new div {

        flex-wrap: wrap;

        gap: 10px 18px;

    }

}














/* =====================================================
   INTRO MOTOPANNIER
===================================================== */

#motoIntro {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    background:
        radial-gradient(
            circle at center,
            #202936 0%,
            #0b0e13 45%,
            #050608 100%
        );

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    animation: introExit 1s cubic-bezier(.77,0,.18,1) 2.7s forwards;
}


/* LÍNEAS DE CARRETERA */

.intro-road {

    position: absolute;

    bottom: 16%;

    left: 50%;

    width: 2px;

    height: 55%;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(63,208,201,.8),
        transparent
    );

    transform:
        translateX(-50%)
        perspective(400px)
        rotateX(65deg);

    filter: blur(.5px);

    opacity: 0;

    animation: roadAppear 1.2s ease .2s forwards;

}


/* LUCES DE VELOCIDAD */

.intro-speed {

    position: absolute;

    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--teal),
        white,
        transparent
    );

    filter: blur(1px);

    opacity: 0;

}


.speed-1 {

    width: 280px;

    top: 25%;

    left: -300px;

    animation: speedLine 1.4s linear .4s forwards;

}

.speed-2 {

    width: 420px;

    top: 52%;

    left: -450px;

    animation: speedLine 1.1s linear .8s forwards;

}

.speed-3 {

    width: 200px;

    top: 72%;

    left: -250px;

    animation: speedLine 1.6s linear .5s forwards;

}


/* CONTENIDO */

.intro-content {

    position: relative;

    z-index: 5;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* LÍNEA SUPERIOR */

.intro-line {

    width: 0;

    height: 2px;

    background: var(--teal);

    margin-bottom: 28px;

    box-shadow:
        0 0 10px var(--teal),
        0 0 25px var(--teal);

    animation: lineGrow .8s ease .3s forwards;

}


/* LOGO */

.intro-logo {

    width: 230px;

    max-width: 70vw;

    height: auto;

    opacity: 0;

    transform:
        translateY(35px)
        scale(.75);

    filter:
        drop-shadow(0 0 0 transparent);

    animation: logoEnter 1s cubic-bezier(.16,1,.3,1) .55s forwards;

}


/* SUBTÍTULO */

.intro-subtitle {

    margin-top: 22px;

    color: white;

    font-family: "Rajdhani", sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 5px;

    opacity: 0;

    transform: translateY(15px);

    animation: subtitleEnter .8s ease 1.2s forwards;

}


.intro-subtitle span {

    color: var(--teal);

    margin: 0 8px;

}


/* PREPARA TU RUTA */

.intro-start {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 45px;

    color: var(--muted-light);

    font-family: "Rajdhani", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    opacity: 0;

    animation:
        startEnter .8s ease 1.6s forwards,
        startPulse 1.5s ease-in-out 2s infinite;

}


.intro-start span {

    width: 35px;

    height: 1px;

    background: var(--teal);

    box-shadow: 0 0 8px var(--teal);

}


/* DESTELLO */

.intro-light {

    position: absolute;

    top: 0;

    left: -30%;

    width: 25%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transform: skewX(-20deg);

    animation: lightSweep 1.3s ease 1.5s forwards;

}


/* =====================================================
   ANIMACIONES
===================================================== */


@keyframes lineGrow {

    from {
        width: 0;
    }

    to {
        width: 180px;
    }

}


@keyframes logoEnter {

    0% {

        opacity: 0;

        transform:
            translateY(35px)
            scale(.75);

    }

    60% {

        opacity: 1;

        transform:
            translateY(-5px)
            scale(1.05);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            drop-shadow(0 0 10px rgba(63,208,201,.3));

    }

}


@keyframes subtitleEnter {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes startEnter {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


@keyframes startPulse {

    0%,
    100% {

        opacity: .5;

    }

    50% {

        opacity: 1;

    }

}


@keyframes roadAppear {

    0% {

        opacity: 0;

        transform:
            translateX(-50%)
            perspective(400px)
            rotateX(65deg)
            scaleY(.2);

    }

    100% {

        opacity: .5;

        transform:
            translateX(-50%)
            perspective(400px)
            rotateX(65deg)
            scaleY(1);

    }

}


@keyframes speedLine {

    0% {

        opacity: 0;

        transform: translateX(0);

    }

    15% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform: translateX(140vw);

    }

}


@keyframes lightSweep {

    0% {

        left: -30%;

    }

    100% {

        left: 130%;

    }

}


@keyframes introExit {

    0% {

        opacity: 1;

        transform: scale(1);

    }

    60% {

        opacity: 1;

        transform: scale(1.03);

    }

    100% {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: scale(1.08);

    }

}


/* =====================================================
   REDUCIR ANIMACIONES SI EL USUARIO LO PREFIERE
===================================================== */

@media (prefers-reduced-motion: reduce) {

    #motoIntro {

        animation: none;

        display: none;

    }

}





/* =====================================================
   UBICACIÓN MOTOPANNIER
===================================================== */

.location-section {

    position: relative;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(63,208,201,.08),
            transparent 30%
        ),
        var(--light);

    overflow: hidden;

}


/* =====================================================
   BRILLO DE FONDO
===================================================== */

.location-glow {

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border: 1px solid rgba(63,208,201,.08);

    animation:
        locationRotate 18s linear infinite;

}


.location-glow::before {

    content: "";

    position: absolute;

    inset: 60px;

    border-radius: 50%;

    border: 1px dashed rgba(61,123,251,.08);

    animation:
        locationRotateReverse 12s linear infinite;

}


/* =====================================================
   TITULO
===================================================== */

.location-title {

    position: relative;

    z-index: 2;

}


.location-title h2 span {

    color: var(--teal);

}


/* =====================================================
   CONTENEDOR
===================================================== */

.location-wrapper {

    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns: 1.35fr .85fr;

    min-height: 520px;

    border-radius: 24px;

    overflow: hidden;

    background: var(--dark-1);

    box-shadow:
        0 25px 70px rgba(0,0,0,.16);

}


/* =====================================================
   MAPA
===================================================== */

.location-map {

    position: relative;

    min-height: 520px;

    overflow: hidden;

}


.location-map iframe {

    width: 100%;

    height: 100%;

    min-height: 520px;

    border: 0;

    display: block;

    filter:
        grayscale(.85)
        contrast(1.1);

    transition: .6s ease;

}


.location-map:hover iframe {

    filter:
        grayscale(.2)
        contrast(1.05);

    transform: scale(1.02);

}


/* =====================================================
   OVERLAY MAPA
===================================================== */

.map-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(18,21,28,.05),
            transparent 60%,
            rgba(18,21,28,.35)
        );

}


/* =====================================================
   ESCANEO
===================================================== */

.map-overlay::after {

    content: "";

    position: absolute;

    left: 0;

    top: -10%;

    width: 100%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--teal),
            transparent
        );

    box-shadow:
        0 0 15px var(--teal),
        0 0 30px rgba(63,208,201,.4);

    animation:
        mapScan 5s linear infinite;

}


/* =====================================================
   ETIQUETA MAPA
===================================================== */

.map-label {

    position: absolute;

    z-index: 5;

    left: 25px;

    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 16px;

    border-radius: 8px;

    background: rgba(8,10,14,.88);

    backdrop-filter: blur(10px);

    color: white;

    font-family: "Rajdhani", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

}


.map-pulse {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--teal);

    box-shadow:
        0 0 8px var(--teal),
        0 0 18px var(--teal);

    animation:
        mapPulse 1.5s infinite;

}


/* =====================================================
   INFORMACIÓN
===================================================== */

.location-info {

    position: relative;

    padding: 55px 45px;

    color: white;

    background:
        linear-gradient(
            145deg,
            var(--dark-1),
            #0d1219
        );

}


/* línea decorativa */

.location-info::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 3px;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--teal),
            transparent
        );

}


/* =====================================================
   PARTE SUPERIOR
===================================================== */

.location-top {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

}


.location-number {

    color: var(--teal);

    font-family: "Rajdhani", sans-serif;

    font-size: 13px;

    font-weight: 800;

}


.location-line {

    width: 35px;

    height: 1px;

    background: var(--teal);

}


.location-label {

    color: var(--muted-light);

    font-family: "Rajdhani", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =====================================================
   TITULO
===================================================== */

.location-info h3 {

    font-size: 48px;

    line-height: .95;

    text-transform: uppercase;

}


.location-info h3 span {

    color: var(--teal);

}


/* =====================================================
   TEXTO
===================================================== */

.location-text {

    margin-top: 22px;

    color: var(--muted-light);

    font-size: 14px;

    line-height: 1.7;

    max-width: 430px;

}


/* =====================================================
   DETALLES
===================================================== */

.location-detail {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

}


.detail-icon {

    flex-shrink: 0;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(63,208,201,.08);

    border: 1px solid rgba(63,208,201,.18);

    color: var(--teal);

}


.location-detail span {

    display: block;

    margin-bottom: 3px;

    color: var(--muted-light);

    font-family: "Rajdhani", sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}


.location-detail strong {

    display: block;

    color: white;

    font-family: "Rajdhani", sans-serif;

    font-size: 16px;

}


.location-detail p {

    margin-top: 2px;

    color: var(--muted-light);

    font-size: 12px;

}


/* =====================================================
   BOTONES
===================================================== */

.location-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.location-map-btn,
.location-whatsapp {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 13px 19px;

    border-radius: 9px;

    font-family: "Rajdhani", sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: .3s ease;

}


.location-map-btn {

    background: var(--teal);

    color: var(--dark-1);

}


.location-map-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 12px 25px rgba(63,208,201,.25);

}


.location-whatsapp {

    border: 1px solid rgba(255,255,255,.15);

    color: white;

}


.location-whatsapp i {

    color: #25D366;

    font-size: 18px;

}


.location-whatsapp:hover {

    transform: translateY(-4px);

    border-color: #25D366;

}


/* =====================================================
   ANIMACIONES
===================================================== */

@keyframes mapScan {

    0% {

        top: -5%;

        opacity: 0;

    }

    15% {

        opacity: 1;

    }

    85% {

        opacity: 1;

    }

    100% {

        top: 105%;

        opacity: 0;

    }

}


@keyframes mapPulse {

    0%,
    100% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.7);

        opacity: .5;

    }

}


@keyframes locationRotate {

    from {

        transform:
            translateY(-50%)
            rotate(0deg);

    }

    to {

        transform:
            translateY(-50%)
            rotate(360deg);

    }

}


@keyframes locationRotateReverse {

    from {

        transform: rotate(360deg);

    }

    to {

        transform: rotate(0deg);

    }

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .location-wrapper {

        grid-template-columns: 1fr;

    }

    .location-map {

        min-height: 400px;

    }

    .location-map iframe {

        min-height: 400px;

    }

    .location-info {

        padding: 45px 35px;

    }

}


@media (max-width: 600px) {

    .location-section {

        padding: 75px 0;

    }

    .location-wrapper {

        border-radius: 18px;

    }

    .location-map {

        min-height: 330px;

    }

    .location-map iframe {

        min-height: 330px;

    }

    .location-info {

        padding: 40px 25px;

    }

    .location-info h3 {

        font-size: 40px;

    }

    .location-buttons {

        flex-direction: column;

    }

    .location-map-btn,
    .location-whatsapp {

        width: 100%;

    }

}