@import url('./variables.css');

        :root{
            --primary:#90278e;
            --negro: #000000;
        }

        #error404 {
            margin-top: -35px;
            margin-bottom: -30px;
        }

        html {
            scroll-behavior: smooth!important;
        }

        body {
            font-family: 'Montserrat', sans-serif!important;
            overflow-x: hidden;
            font-size: 16px;
        }

        a, a:hover, a:focus {
            text-decoration: none!important;
        }

        @media (min-width: 1024px) {
            .container-plus {
                width: 95%;
                max-width: 1400px;
            }
        }

        /*** HEADER ***/

        /*HEADER*/

        #header-TRAVELTIPS .pre-header {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 0;
        }

        #header-TRAVELTIPS .pre-header a {
            color: var(--gris);
        }

        #header-TRAVELTIPS .pre-header i {
            color: var(--primary);
        }

        .contacto-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-right: 20px;
            font-weight: 500;
            font-size: 16px;
        }

        .redes-header a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center; 
        }

        .redes-header a i {
            color: #ffffff!important;
            font-size: 18px;
        }

        .redes-header {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            color: #ffffff;
        }

        #header-TRAVELTIPS {
            padding: 15px 0 0; 
            width: 100%;
            background-color: #FFFFFF;
        }

        #header-TRAVELTIPS .header-row {
            display: flex;
            align-items: center;
        }

        #header-TRAVELTIPS .navbar-default .navbar-toggle .icon-bar {
            background-color: var(--gris);
        }
        .navbar-default .navbar-toggle {
            border-color: var(--gris);
        }

        #header-TRAVELTIPS .navbar-default .navbar-toggle,
        #header-TRAVELTIPS .navbar-default .navbar-toggle:hover {
            background-color: transparent!important;
        }

        #header-TRAVELTIPS .navbar-default {
        background-color: transparent;
        border:none;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
        margin-top: 18px;
        }
        #header-TRAVELTIPS .navbar-default a.btn-invert {
            color: #ffffff !important;
            background-color: var(--primary);
            border-radius: 50px;
            font-weight: 700 !important;
        }

        #header-TRAVELTIPS .wrapper-botonera {
            background-color: var(--negro);
            margin-top: 15px;
            height: 40px;
        }

        @media(min-width: 769px) {
            .navbar-collapse.collapse, .wrapper-nav {
                padding: 0!important;
            }
            #header-TRAVELTIPS .navbar-default a.btn-invert {
                margin-left: 20px;
            }
        }

        @media (max-width:768px) {
            #header-TRAVELTIPS .navbar-default {
                display: block;
                margin-top: 5px;
            }
            #header-TRAVELTIPS {
                padding: 5px 0 10px 0;
            }
            #slidesup .carousel-caption h1 {
                font-size: 28px!important;
            }
            #slidesup .carousel-caption h3 {
                font-size: 21px!important;
            }
            .navbar-default .navbar-collapse {
                background-color: #22222290;
                margin-top: 20px;
            }
            #header-TRAVELTIPS .navbar-default a {
                color: #ffffff!important;
            }
        }

        #header-TRAVELTIPS .navbar-default a {
            color: var(--gris);
            font-weight: 400;
            font-size: 14px;
            padding: 10px 15px;
        }

        #header-TRAVELTIPS .navbar-default a:hover {
            color:var(--primary)
        }

        #header-TRAVELTIPS .navbar-default .dropdown-menu>li>a {
            background-color: var(--secondary);
            padding: 7px 15px;
            color:white!important;
        }
        #header-TRAVELTIPS .navbar-default .dropdown-menu>li>a:hover {
            background-color: #1b9ca1;
            color:white;
        }

        #header-TRAVELTIPS .navbar-default .navbar-nav>.active>a,
        #header-TRAVELTIPS .navbar-default .dropdown-menu,
        #header-TRAVELTIPS .navbar-default .navbar-nav>.open>a {
            background: transparent;
            border:none;
            box-shadow: none;
            color: var(--secondary)
        }

        #header-TRAVELTIPS .navbar-default a {
            color: var(--gris);
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
            font-size: 14px;
        }

        #header-TRAVELTIPS .navbar-default .dropdown-menu a:hover {
            background-color: transparent;
            color: var(--secondary);
            display: flex;
            justify-content: flex-end;
        }

        #header-TRAVELTIPS .navbar-default .dropdown.open > a {
            border-bottom: none;
        }

        /*** BOTONERA LANDINGS ***/

        .botonera {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .botonera li a {
            display: flex;
            align-items: center;
            color: #ffffff;
            padding-top: 9px;
            padding-bottom: 0px;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 16px;
            font-weight: 700;
        }
        .botonera li a span {
            color: var(--primary);
            font-size: 21px;
            font-weight: 400!important;
        }
        .botonera li a:hover {
            background-color: rgba(0, 0, 0, 0.2);
        }


        /* TITULOS */

        .titulo-seccion{
            color:var(--primary);
            font-weight:700;
            margin-bottom:50px;
            font-size: 36px;
        }

        /* QUIENES SOMOS */

        .bloques-info{
            margin-top:30px;
        }

        .info-item{
            display:flex;
            flex-direction: column;
            gap:15px;
            margin-bottom:25px;
        }

        .info-item .icono{
            color:var(--primary);
            font-size:48px;
            margin-bottom: 0;
        }

        .info-item h4{
            color:var(--primary);
            font-weight:700;
            font-size: 18px;
            margin-top:0;
            color: #333333;
        }

        .info-item p{
            font-size:16px;
            line-height:1.6;
            margin-top: 20px;
        }

        /* SERVICIOS */

        .quienes-somos, .nuestros-servicios{
            padding: 70px 0;
        }

        .servicio-card{
            background:#fff;
            border-radius:16px;
            padding:30px 20px;
            text-align:center;
            box-shadow:0 10px 25px rgba(0,0,0,0.08);
            margin-bottom:30px;
            transition:all .3s ease;
            position: relative;
            z-index: 1;
        }

        .servicio-card span {
            font-size: 36px;
        }

        .servicio-card:hover{
            transform:translateY(-5px);
        }

        .icono{
            font-size:36px;
            color:var(--primary);
            margin-bottom:10px;
        }

        /* VALOR AGREGADO */

        .titulo-agregado {
            color: #ffffff;
            font-size: 36px;
            font-weight: 700;
            margin-bottom:25px;
        }

        .valor-agregado{
            padding:120px 0;
            background:url("../images/corpo-03.jpg") center/cover no-repeat;
            position:relative;
            color:#fff;
            margin-top: -140px;
        }

        .valor-agregado:before{
            content:"";
            position:absolute;
            inset:0;
            background:rgba(0,0,0,0.55);
        }

        .valor-agregado .container{
            position:relative;
        }

        .valor-item{
            text-align:center;
        }

        .col-md-3.col-sm-6.wrapper-valor-item {
            border-right: solid 1px #ffffff;
        }
        .col-md-3.col-sm-6.wrapper-valor-item:last-child {
            border-right: none!important;
        }


        .valor-item .icono{
            color:#fff;
            font-size:36px;
        }

        .valor-item p{
            font-size:16px;
            line-height:1.6;
        }

        /* RESPONSIVE */

        @media (max-width:991px){

            .quienes-somos{
                text-align:center;
            }

            .bloques-info{
                margin-top:30px;
            }

        }

        @media (max-width:767px){

            .titulo-seccion{
                text-align:center;
            }

        }

      @media (min-width:768px){

      .row-flex{
        display:flex;
        flex-wrap:wrap;
      }

      .row-flex > [class*='col-']{
        display:flex;
      }

      .row-flex > [class*='col-'] > *{
        width:100%;
      }

    }

    .servicio-card,
    .evento-card{
      height:100%;
      display:flex;
      flex-direction:column;
    }

    /* ATENCION EMPRESAS */

.atencion-empresas{
padding:80px 0;
}

.empresa-card{
background:#fff;
border-radius:16px;
padding:30px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
height:100%;
margin-bottom: 30px;
transition:all .3s ease;
}

.empresa-card:hover{
    transform:translateY(-5px);
}

.empresa-card h4{
font-weight:700;
margin-bottom:20px;
}

.empresa-card ul{
list-style:none;
padding:0;
margin:0;
}

.empresa-card li{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:12px;
font-size:16px;
color:#666;
}

.empresa-card li span,
.beneficios li span {
    color: var(--primary);
}

.TRAVELTIPS{
color:var(--primary);
}



/* AUTOGESTION */

.autogestion{
padding:80px 0;
}

.subtitulo{
font-weight:700;
margin-top:20px;
margin-bottom:15px;
}

.beneficios{
list-style:none;
padding:0;
}

.beneficios li{
display:flex;
gap:10px;
margin-bottom:12px;
font-size:16px;
color:#666;
}

.img-autogestion{
border-radius:20px;
}



/* RESPONSIVE */

@media (max-width:991px){

.autogestion{
text-align:center;
}

.beneficios li{
justify-content:center;
}

.img-autogestion{
margin-top:40px;
}

.titulo-agregado {
    text-align: center;
}

}

.turismo {
    margin-top: 0!important;
    padding: 70px 0 120px 0!important;
    background:url("../images/turismo.jpg") center/cover no-repeat;
}
.turismo-servicios {
    padding-bottom: 70px;
    margin-top: -70px;
}

.contacto {
    padding: 0 0 70px 0;
}


/*** footer ***/

#footer-TRAVELTIPS {
    padding: 50px 0;
    background-color: #f6f6f6;
}

#footer-TRAVELTIPS li,
#footer-TRAVELTIPS a,
#footer-TRAVELTIPS p {
    font-size: 15px;
    color: #333333;
}

#footer-TRAVELTIPS li a i {
    color: var(--primary);
}



#footer-TRAVELTIPS h3 {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 30px;
    font-size: 16px;
}

.redes-footer a {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center; 
        }

        .redes-footer a i {
            color: #ffffff!important;
            font-size: 18px;
        }

        .redes-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            color: #ffffff;
            margin-top: 50px;
        }

#consultar {
    background: #131313;
    padding: 10px 0;
    font-size: 15px;
}

#consultar a {
    color:#FFFFFF;
}

#formConsulta .list-group-item {
                border: none!important;
                background-color: transparent!important;
            }
        #formConsulta .panel, #formConsulta .panel-default {
                border: none!important;
                background-color: transparent!important;
        }
        #formConsulta .form-control {
            border-radius: 10px;
            height: 40px;
        }

        #formConsulta .btn-default {
            height: 40px;
            border-radius: 10px;
            background-color: var(--primary);
            color: #ffffff;
            font-weight: 700;
            font-size: 16px;
            width: 100%;
            border: none;
        }

        #formConsulta .list-group-item {
            padding: 0 15px!important;
        }

        #formConsulta textarea.form-control {
            height: 80px!important;
            resize:none;
        }