﻿:root {
    --bs-font-sans-serif: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --bs-primary: #f58221;
    --pr-fondo-primary: antiquewhite;
    --pr-fondo-secondary: #f1f1f1;
    --pr-fondo-cabecera: white; /*#f4cdab;*/
    --pr-texto-secondary: #f58221; /*white;*/

    --carousel-indicator-width: 10px; /*30px;*/
    --carousel-indicator-height: 10px; /*3px;*/
    --carousel-indicator-hit-area-height: 10px; /*10px;*/
    --carousel-indicator-spacer: 3px; /*3px;*/
    --carousel-indicator-opacity: .5; /*.5;*/
    --carousel-indicator-active-bg: #FFF; /*$white;*/
    --carousel-indicator-active-opacity: 1; /*1;*/
    --carousel-indicator-transition: opacity .6s ease; /*opacity .6s ease;*/
}

.pr-text-primary {
    color: var(--bs-primary);
}
.p-fondo-primary {
    background-color: var(--bs-primary);
}

.p-fondo-secondary {
    background-color: #fcfcfc;
}

.p-fondo-light {
    background-color: var(--pr-fondo-secondary);
}

.pr-tamaño-tabuladores, .pr-tamaño-adaptado, .pr-tamaño-xsm, .pr-tamaño-sm, .pr-tamaño-md, .pr-tamaño-lg {
    font-size: 1rem;
}

@media screen and (max-width: 1200px) {
    .pr-tamaño-lg {
        font-size: 0.875rem;
    }
}
@media screen and (max-width: 992px) {
    .pr-tamaño-lg {
        font-size: 1rem;
    }
    .pr-tamaño-adaptado, .pr-tamaño-md {
        font-size: 0.875rem;
    }
}
@media screen and (max-width: 768px) {
    .pr-tamaño-md {
        font-size: 1rem;
    }
    .pr-tamaño-sm, .pr-tamaño-tabuladores {
        font-size: 0.875rem;
    }
}
@media screen and (max-width: 576px) {
    .pr-tamaño-sm {
        font-size: 1rem;
    }
    .pr-tamaño-xsm {
        font-size: 0.875rem;
    }
    .pr-tamaño-tabuladores {
        font-size: 0.75rem;
    }
}
@media screen and (max-width: 400px) {
    .pr-tamaño-tabuladores {
        font-size: 0.65rem;
    }
}

/*-----------------------------------------------------*/
/*------------ Inicio Faldón de la Cabecera -----------*/
/*-----------------------------------------------------*/
#Cabecera {
    background-color: var(--pr-fondo-cabecera);
    color: var(--pr-texto-secondary);
    font-weight: bold;
}

    #Cabecera img {
        width: 100%;
    }

    .link-dark, .link-dark:visited {
        color: var(--pr-texto-secondary) !important; /*var(--bs-primary) !important;*/
    }

    /*Inicio efecto subrayado de la cabecera*/
    #ulCabecera a::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, var(--bs-primary), var(--bs-primary), var(--bs-primary), var(--bs-primary), var(--bs-primary));
        z-index: 1;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease-in-out;
    }

    #ulCabecera a:hover::before {
        transform: scaleX(1);
    }

    #ulCabecera a {
        position: relative;
        color: var(--pr-texto-secondary) !important; /*var(--bs-primary) !important;*/
    }
    /*Fin efecto subrayado de la cabecera*/
    /* Inicio visibilidad botones menu */
    #liResidencial, #liComercial, #liOficinas, #liOtros, #liPromysa, #liComercial {
        visibility: visible;
    }

    #mnuCabecera {
        visibility: hidden;
        display: none;
    }
    /* Fin visibilidad botones menu */

    /* Añade los nuevos estilos */
        #mnuCabecera .dropdown-item, #mnuCabeceraIdioma .dropdown-item {
            cursor: pointer;
        }

            #mnuCabecera .dropdown-item.disabled,, #mnuCabeceraIdioma .dropdown-item.disabled {
                color: var(--bs-primary) !important;
                background-color: var(--pr-fondo-primary) !important;
                cursor: not-allowed;
            }
                #mnuCabecera .dropdown-item.disabled:hover, #mnuCabeceraIdioma .dropdown-item.disabled:hover {
                    color: var(--bs-primary) !important;
                    background-color: var(--pr-fondo-primary) !important;
                }
        #mnuCabeceraIdioma button {
            color: var(--bs-primary);
            border-color: var(--bs-primary);
            border-width: 2px;
            background-color: var(--pr-fondo-cabecera);
            font-weight: bold;
            font-size: 0.90rem;
        }

        #mnuCabeceraIdioma ul {
            font-size: 0.90rem;
            background-color: var(--pr-fondo-cabecera);
            border: 2px solid var(--bs-primary);
        }

        #mnuCabeceraIdioma a {
            color: var(--bs-primary) !important;
            font-weight: normal;
        }
            #mnuCabeceraIdioma a.dropdown-item.disabled, #mnuCabecera a.dropdown-item.disabled {
                background-color: var(--pr-fondo-primary) !important;
            }
            #mnuCabeceraIdioma a:hover {
                background-color: var(--bs-primary);
                color: var(--pr-fondo-primary) !important;
            }

    /* Fin Añade los nuevos estilos */


    @media screen and (max-width: 1262px) {
        /*1008*/
        #Cabecera, #btnContacto > a {
            font-size: 0.95rem;
            font-weight: bold;
        }
    }

    @media screen and (max-width: 1050px) {
        /*991*/
        #Cabecera, #btnContacto > a {
            font-size: 0.90rem;
            font-weight: bold;
        }

            #Cabecera button {
                font-size: 0.80rem;
            }

        #mnuCabeceraIdioma {
            display: none;
            visibility: hidden;
        }

        #mnuCabecera {
            visibility: visible;
            display: block;
        }

            #mnuCabecera ul {
                font-size: 0.90rem;
                background-color: var(--pr-fondo-cabecera);
                border: 2px solid var(--bs-primary); 
            }

            #mnuCabecera a {
                color: var(--bs-primary) !important;
                font-weight: normal;
            }

                #mnuCabecera a:hover {
                    background-color: var(--bs-primary);
                    color: var(--pr-fondo-primary) !important;
                }

            #mnuCabecera button {
                color: var(--bs-primary);
                border-color: var(--bs-primary);
                border-width: 2px;
                background-color: var(--pr-fondo-cabecera);
                font-weight: bold;
            }
            #mnuCabecera hr {
                font-size: 0.90rem;
                border: 1px solid var(--bs-primary); 
            }

        #liPromysa, #liOtros {
            display: none;
            visibility: hidden;
        }

        #mnuItemResidencial, #mnuItemComercial, #mnuItemOficinas, #mnuItemContacto {
            display: none;
            visibility: hidden;
        }
    }

    @media screen and (max-width: 768px) {
        #Cabecera button {
            font-size: 0.80rem;
            font-weight: normal;
        }

        #mnuCabecera button {
            font-weight: bold;
        }

        #liOficinas {
            display: none;
            visibility: hidden;
        }

        #mnuItemOficinas {
            display: block;
            visibility: visible;
        }
    }

    @media screen and (max-width: 578px) {
        #Cabecera img {
            width: 100px;
            /*max-width: 100px;*/ /* Ancho máximo */
            /*min-width: 50px;*/ /* Ancho mínimo (ajústalo según tus necesidades) */
        }
        /*    #Cabecera button,
    #mnuCabecera button {
        font-size: 0.75rem;
    }
*/
        #liComercial {
            display: none;
            visibility: hidden;
        }

        #mnuItemComercial {
            display: block;
            visibility: visible;
        }
    }

    @media screen and (max-width: 480px) {
        #btnContacto {
            display: none;
            visibility: hidden;
        }

        #mnuItemContacto {
            display: block;
            visibility: visible;
        }
    }

    @media screen and (max-width: 362px) {
        #liResidencial {
            display: none;
            visibility: hidden;
        }

        #mnuItemResidencial {
            display: block;
            visibility: visible;
        }
    }
    /*-----------------------------------------------------*/
    /*------------- Fin Faldón de la Cabecera -------------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*------------- Inicio Faldón de Contacto -------------*/
    /*-----------------------------------------------------*/
    #divContactoTexto {
    }

    @media screen and (max-width: 992px) {
        #divContactoTexto.h1 {
            font-size: 1.75rem;
        }

        #divContactoIconos {
            font-size: 0.80rem;
        }
    }

    @media screen and (max-width: 768px) {
        #divContactoTexto.h1 {
            font-size: 1.50rem;
        }
    }
    /*-----------------------------------------------------*/
    /*--------------- Fin Faldón de Contacto --------------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*------- Inicio Contenido Página Index.html ----------*/
    /*-----------------------------------------------------*/

    .divAcordeonHeader button {
        color: var(--bs-primary) !important;
        background-color: white !important;
        border: 1px solid var(--bs-primary) !important;
        border-radius: 0 !important; /* Elimina el redondeo de los bordes */
        font-weight: bold;
    }

        .divAcordeonHeader button:hover,
        .divAcordeonHeader button:focus,
        .divAcordeonHeader button:active,
        .divAcordeonHeader .accordion-button:not(.collapsed) {
            color: var(--pr-fondo-cabecera) !important;
            background-color: var(--bs-primary) !important;
            border: 0px solid var(--bs-primary) !important;
            border-radius: 0px !important; /* Elimina el redondeo de los bordes */
        }

    /*-----------------------------------------------------*/
    /*--------- Fin Contenido Página Index.html  -----------*/
    /*-----------------------------------------------------*/
    /*-----------------------------------------------------*/
    /*--------- Inicio Contenido Página Contacto ----------*/
    /*-----------------------------------------------------*/
    .frmContacto {
        background-color: var(--pr-fondo-primary);
        background-color: var(--pr-fondo-primary);
    }

        .frmContacto button {
            color: var(--pr-fondo-cabecera) !important;
            background-color: var(--bs-primary) !important;
            border: 2px solid var(--bs-primary) !important;
            border-radius: 0 !important; /* Elimina el redondeo de los bordes */
        }

            .frmContacto button:hover {
                color: var(--bs-primary) !important;
                background-color: white !important;
                border: 2px solid var(--bs-primary) !important;
                border-radius: 0 !important; /* Elimina el redondeo de los bordes */
            }

    .divEsloganFicha {
        position: relative;
        z-index: 1;
        /*background-color: var(--bs-primary);*/
    }

        .divEsloganFicha:before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: .7;
            z-index: -1;
            background: var(--bs-primary);
        }

    @media screen and (max-width: 992px) {
        .divEsloganFicha {
            font-size: 1.00rem;
        }
    }

    @media screen and (max-width: 768px) {
        .divEsloganFicha {
            font-size: 1.50rem;
        }
    }
    /*@media screen and (max-width: 576px) {
    .divEsloganFicha {
        background: rgba(245, 130, 33, 0.5);*/ /* #f58221 con opacidad del 50% */
    /*}
}*/

    .divEsloganFlotante {
        position: relative;
        z-index: 1;
        /*background-color: var(--bs-primary);*/
    }

        .divEsloganFlotante:before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: .7;
            z-index: -1;
            background: var(--bs-primary);
        }

    @media screen and (max-width: 992px) {
        .divEsloganFlotante {
            font-size: 1.75rem;
        }
    }

    @media screen and (max-width: 768px) {
        .divEsloganFlotante {
            font-size: 1.50rem;
        }
    }

    /*@media screen and (max-width: 576px) {
    .divEsloganFlotante {
        background: rgba(245, 130, 33, 0.5);*/ /* #f58221 con opacidad del 50% */
    /*}
}*/
    /*-----------------------------------------------------*/
    /*---------- Fin Contenido Página Contacto ------------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*----------- Inicio Contenido Página Otros -----------*/
    /*-----------------------------------------------------*/
    .divOtrosEslogan {
        background-color: var(--bs-primary);
    }

        .divOtrosEslogan a {
            color: var(--bs-primary);
            border-color: var(--bs-primary);
            border-width: 2px;
            background-color: var(--pr-fondo-cabecera);
            font-weight: bold;
        }

            .divOtrosEslogan a:hover {
                color: white;
                border-color: white;
                border-width: 2px;
                background-color: var(--bs-primary);
                font-weight: bold;
            }

    .lstGimnasios {
        list-style: none; /* Elimina el marcador de lista predeterminado */
        padding-left: 0; /* Elimina el espacio izquierdo predeterminado de la lista */
        color: var(--bs-primary) !important;
    }

        .lstGimnasios li::before {
            content: ""; /* Agrega un contenido antes de cada elemento de lista */
            display: inline-block; /* Hace que el contenido se muestre como un bloque en línea */
            width: 10px; /* Ancho del icono (ajusta según tus necesidades) */
            height: 10px; /* Alto del icono (ajusta según tus necesidades) */
            background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23f58221' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' /></svg>");
            background-size: contain; /* Ajusta el tamaño del icono para que quepa dentro del espacio especificado */
            margin-right: 5px; /* Espacio entre el icono y el texto del elemento de lista */
        }

    .divInfoGimnasios a {
        color: var(--pr-fondo-cabecera) !important;
        background-color: var(--bs-primary) !important;
        border: 2px solid var(--bs-primary) !important;
        border-radius: 0; /* Elimina el redondeo de los bordes */
    }

        .divInfoGimnasios a:hover {
            color: var(--bs-primary) !important;
            background-color: white !important;
            border: 2px solid var(--bs-primary) !important;
            border-radius: 0; /* Elimina el redondeo de los bordes */
        }

    @media screen and (max-width: 992px) {
        .divOtrosEslogan {
            font-size: 1.75rem;
        }
    }

    @media screen and (max-width: 768px) {
        .divOtrosEslogan {
            font-size: 1.50rem;
        }

            .divOtrosEslogan a {
                font-size: 0.9rem;
            }
    }

    @media screen and (max-width: 650px) {
        .divOtrosEslogan {
            font-size: 1.35rem;
        }

            .divOtrosEslogan a {
                font-size: 0.8rem;
            }
    }

    @media screen and (max-width: 576px) {
        .divOtrosEslogan {
            background: rgba(245, 130, 33, 0.25); /* #f58221 con opacidad del 50% */
            font-size: 1.50rem;
        }

            .divOtrosEslogan a {
                font-size: 0.9rem;
            }
    }
    /*-----------------------------------------------------*/
    /*------------ Fin Contenido Página Otros -------------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*--------- Inicio Contenido Página Oficinas ----------*/
    /*-----------------------------------------------------*/
    .divFaldonOficinas {
        margin-top: -1.5rem;
    }

    .divTabs li > button {
        color: var(--bs-primary) !important;
        background-color: white !important;
        border: 2px solid var(--bs-primary) !important;
        border-radius: 0 !important; /* Elimina el redondeo de los bordes */
    }

        .divTabs li > button:hover, li > button.active {
            color: var(--pr-fondo-cabecera) !important;
            background-color: var(--bs-primary) !important;
            border: 2px solid var(--bs-primary) !important;
            border-radius: 0 !important; /* Elimina el redondeo de los bordes */
        }

    .divTabs a {
        color: var(--pr-fondo-cabecera) !important;
        background-color: var(--bs-primary) !important;
        border: 2px solid var(--bs-primary) !important;
        border-radius: 0; /* Elimina el redondeo de los bordes */
    }

        .divTabs a:hover {
            color: var(--bs-primary) !important;
            background-color: white !important;
            border: 2px solid var(--bs-primary) !important;
            border-radius: 0; /* Elimina el redondeo de los bordes */
        }

    /*-----------------------------------------------------*/
    /*----------- Fin Contenido Página Oficinas -----------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*---------- Inicio Contenido Página Vivero -----------*/
    /*-----------------------------------------------------*/
    .divViveroDark {
        background-color: var(--bs-primary);
    }

    .lstViveroDark {
        list-style: none; /* Elimina el marcador de lista predeterminado */
        padding-left: 0; /* Elimina el espacio izquierdo predeterminado de la lista */
        color: white !important;
    }

        .lstViveroDark li::before {
            content: ""; /* Agrega un contenido antes de cada elemento de lista */
            display: inline-block; /* Hace que el contenido se muestre como un bloque en línea */
            width: 10px; /* Ancho del icono (ajusta según tus necesidades) */
            height: 10px; /* Alto del icono (ajusta según tus necesidades) */
            background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' /></svg>");
            background-size: contain; /* Ajusta el tamaño del icono para que quepa dentro del espacio especificado */
            margin-right: 5px; /* Espacio entre el icono y el texto del elemento de lista */
        }

    .divViveroLight a {
        color: var(--pr-fondo-cabecera) !important;
        background-color: var(--bs-primary) !important;
        border: 2px solid var(--bs-primary) !important;
        border-radius: 0; /* Elimina el redondeo de los bordes */
    }

        .divViveroLight a:hover {
            color: var(--bs-primary) !important;
            background-color: white !important;
            border: 2px solid var(--bs-primary) !important;
            border-radius: 0; /* Elimina el redondeo de los bordes */
        }
    /*-----------------------------------------------------*/
    /*------------ Fin Contenido Página Vivero ------------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*------ Inicio Faldón de los iconos de eslógan -------*/
    /*-----------------------------------------------------*/
    #FooterIconos {
        color: var(--bs-primary);
        font-size: 1.5rem;
        font-weight: bold;
        padding: 60px 50px !important;
        background-color: var(--pr-fondo-primary);
    }

    @media screen and (max-width: 992px) {
        #FooterIconos {
            padding: 30px 10px !important;
            font-size: 1.25rem;
            font-weight: bold;
        }
    }

    @media screen and (max-width: 767px) {
        #FooterIconos {
            padding: 30px 20px !important;
            font-size: 1.5rem;
            font-weight: bold;
        }
    }

    @media screen and (max-width: 575px) {
        #FooterIconos {
            font-size: 1.25rem;
            font-weight: bold;
        }
    }


    /*-----------------------------------------------------*/
    /*------- Fin Faldón de los iconos de eslógan ---------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*----------- Inicio Faldón Footer Resumen ------------*/
    /*-----------------------------------------------------*/
    #FooterResumen {
        background-color: var(--pr-fondo-secondary);
    }

        #FooterResumen span {
            font-weight: bold;
        }

        #FooterResumen .footerTitulo {
            color: var(--bs-primary);
            font-weight: bold;
        }

        #FooterResumen .footerTexto {
            font-size: 0.95rem;
        }
    /*-----------------------------------------------------*/
    /*------------ Fin Faldón Footer Resumen --------------*/
    /*-----------------------------------------------------*/

    /*-----------------------------------------------------*/
    /*------------- Inicio Faldón Aviso legal -------------*/
    /*-----------------------------------------------------*/
    #Footer {
        background-color: var(--bs-primary);
        color: white;
        height: 60px;
    }

        #Footer a {
            color: white !important;
            text-decoration-line: none;
        }

            #Footer a:hover {
                text-decoration-line: underline;
            }

    @media screen and (max-width: 575px) {
        #Footer {
            font-size: 0.85rem;
        }
    }
    /*-----------------------------------------------------*/
    /*-------------- Fin Faldón Aviso legal ---------------*/
    /*-----------------------------------------------------*/
