﻿.divContainer {
    background-color: #1e212b;
    /*margin: 0px;*/
    padding: 1%;
    margin-top: 9px;
    border: 1px solid #404146;
}


.horizontal-menu a:hover {
    color: #e37822;
}

/* Elemento activo */
.horizontal-menu a.active {
    position: relative;
    color: #e37822;
    text-decoration: none;
    padding-bottom: 6px; /* espacio para la línea */
}



/*.horizontal-menu a::after {
            content: '';
            position: absolute;
            left: 43%;
            width: 4%;
            height: 2px;
            background-color: #e37822;
            transition: all 0.3s ease;
            top: 216px;
        }*/


/* ===============================
        APARTADO MENÚ HORIZONTAL
        =============================== */

/* Laptops grandes y desktops medianos */
@media (min-width: 1200px) {
    .imgLogo {
        width: 100%;
    }

    .horizontal-menu {
        display: flex;
        justify-content: center; /* centra el menú */
        gap: 2rem; /* espacio entre links */
        flex-wrap: wrap; /* se adapta a móviles */
        background-color: #1e212b !important;
    }

        .horizontal-menu a {
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            padding: 0.3rem 0.6rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-family: Orbitron;
            letter-spacing: 1px;
        }
}

/* Tablets horizontales y laptops pequeñas */
@media (max-width: 992px) {
    .imgLogo {
        width: 80%;
    }

    .horizontal-menu {
        display: flex;
        justify-content: center; /* centra el menú */
        gap: 2rem; /* espacio entre links */
        flex-wrap: wrap; /* se adapta a móviles */
        background-color: #1e212b !important;
    }

        .horizontal-menu a {
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            padding: 0.3rem 0.6rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-family: Orbitron;
        }
}
/* Tablets verticales / móviles grandes */
/*@media (max-width: 768px) {
            .horizontal-menu {
               flex-direction: column !important;
                align-items: center !important;
                gap: 1rem !important;
                width: 80% !important;
                position: fixed !important;
                background-color: #1e212b !important;
                margin: 22px;
                top: 77px;
            }

                .horizontal-menu a {
                    color: #ffffff;
                    text-decoration: none;
                    font-weight: bold;
                    font-size: 10px;
                    padding: 0.3rem 0.6rem;
                    border-radius: 5px;
                    transition: all 0.3s ease;
                    font-family: Orbitron;
                }

            .imgLogo {
                width: 50% !important;
            }
        }*/


/*@media (max-width: 576px) {
            .horizontal-menu {
                flex-direction: column !important;
                align-items: center !important;
                gap: 1rem !important;
                width: 80% !important;
                position: fixed !important;
                background-color: #1e212b !important;
                margin: 22px;
                top: 77px;
            }

                .horizontal-menu a {
                    color: #ffffff;
                    text-decoration: none;
                    font-weight: bold;
                    font-size: 10px;
                    padding: 0.3rem 0.6rem;
                    border-radius: 5px;
                    transition: all 0.3s ease;
                    font-family: Orbitron;
                }

            .imgLogo {
                width: 50% !important;
            }
        }*/

/* Smartphones pequeños */
@media (max-width: 576px) {
    .horizontal-menu {
        /* flex-direction: column !important; */
        /* align-items: center !important; */
        /* gap: 1rem !important; */
        width: 100% !important;
        /* position: fixed !important; */
        background-color: #2b2e36 !important;
        text-decoration: none;
        padding: 23px 1px !important;
        /* top: 121px; */
        /* right: 0; */
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        border-radius: 35px;
    }

        .horizontal-menu a {
            padding: 0.3rem 0.6rem;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-family: Orbitron;
            color: #858c94;
            text-decoration: none;
            font-weight: 500;
            font-size: 12px;
            border-radius: 5px;
            transition: all 0.3s ease;
            font-family: Orbitron;
        }

    .imgLogo {
        width: 55% !important;
    }

    .imgIcono {
        position: fixed;
        right: 31px;
        top: 15%;
    }

    /*.horizontal-menu a::after {
                content: '';
                position: absolute;
                left: 15%;
                width: 21%;
                height: 2px;
                background-color: #e37822;
                transition: all 0.3s ease;
                top: 34px;
            }*/
    .BotonNaranjaG {
        background-color: #e37822;
        color: #ffffff;
        font-family: Inter;
        font-size: 11px;
        height: 50px;
        width: 100%;
        border-radius: 30px 0px 30px 0px;
        font-weight: 400;
        leading-trim: NONE;
        line-height: 15px;
        letter-spacing: -0.1px;
        text-align: center;
        margin-top: 7px;
    }

    .tituloBlanco {
        font-family: Orbitron;
        font-weight: 700;
        font-style: Bold;
        font-size: 36px;
        leading-trim: NONE;
        line-height: 44px;
        letter-spacing: -2%;
        text-align: center;
        color: var(--Background-Light-Base-Main, #FFFFFF);
    }

    .subTituloIni {
        font-family: Orbitron;
        font-weight: 700;
        font-style: Bold;
        font-size: 36px;
        leading-trim: NONE;
        line-height: 44px;
        letter-spacing: -2px;
        text-align: center;
        background: linear-gradient(90deg, #EE51D7 0%, rgba(251, 131, 0, 0.9) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        margin: 1px;
    }

    .letChiquitasIni {
        font-family: Inter;
        font-weight: 400;
        font-style: Regular;
        font-size: 10px;
        leading-trim: NONE;
        line-height: 15px;
        letter-spacing: -0.1px;
        text-align: center;
        color: #858C95;
    }

    .subGrisIni {
        font-family: Orbitron;
        font-weight: 500;
        font-style: Medium;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: -0.1px;
        text-align: center;
        opacity: 1;
        color: #858C95;
    }

    .subRosaini {
        font-family: Orbitron;
        font-weight: 500;
        font-style: Medium;
        font-size: 12px;
        leading-trim: NONE;
        line-height: 20px;
        letter-spacing: -0.1px;
        text-align: center;
        color: #EE51D7;
    }

    .cantRosaG {
        font-family: Orbitron;
        font-weight: 700;
        font-style: Bold;
        font-size: 36px;
        leading-trim: NONE;
        line-height: 44px;
        letter-spacing: -2%;
        text-align: center;
        color: #EE51D7;
    }

    .lineaGris {
        border: 2px solid;
        border-color: #212223;
        opacity: 1;
        border-width: 2px;
    }
    .divContainer1 {
        margin-top: 0px;
        padding: 5px 1px 5px 1px;
        border: 1px solid transparent; /* más grosor para que se note */
        /*border-radius: 12px;*/ /* importante si quieres bordes redondeados */
        background: linear-gradient(#1e212b, #1e212b) padding-box, linear-gradient(166deg, #ffb347, #e37822, #ff4500) border-box;
    }
    .pEstilo1 {
        color: #e37822;
        font-family: Orbitron;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.1px;
        padding: 6px 6px 4px 7px;
    }

    .pEstilo2 {
        color: #ffffff;
        font-family: Orbitron;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -1px;
        padding: 6px 6px 4px 7px;
    }

    .pEstilo3 {
        color: #2EBF43;
        font-family: Inter;
        font-size: 11px;
        line-height: 0px;
        letter-spacing: 1px;
        line-height: 15px;
        padding: 6px 6px 4px 7px;
    }
}
