@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;
        }

        ul, li {
            list-style: none;
        }

        @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 15px 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: 16px;
            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: 16px;
        }

        #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:900;
            margin-bottom:30px;
            font-size: 28px;
            margin-top: 0;
        }

        

        

        .quienes-somos-agencia{
padding:90px 0;
}

/* TITULOS */

.pretitulo{
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:#888;
display:block;
margin-bottom:10px;
}

.titulo-seccion{
color:var(--primary);
font-weight:900;
margin-bottom:30px;
line-height:1.2;
}

/* TEXTO */

.quienes-somos-agencia p{
font-size:16px;
line-height:1.7;
color:#333;
margin-bottom:15px;
}

/* IMAGENES */

.img-agencia{
border-radius:30px;
margin-bottom:25px;
width:100%;
object-fit:cover;
}

.img-agencia.grande{
height:420px;
}

.img-agencia.chica{
height:195px;
}

.img-rounded {
    border-radius: 30px!important;
}

.wrapper-image-rounded {
    overflow: hidden;
    max-height: 450px;
    border-radius: 30px!important;
}

/* RESPONSIVE */

@media (max-width:991px){



.img-agencia.grande,
.img-agencia.chica{
height:auto;
}

}

@media (max-width:767px){

.img-agencia{
margin-top:20px;
}

}




        /* QUE HACEMOS */

      .que-hacemos{
        padding:90px 0;
      }

      .pretitulo{
        font-size:12px;
        letter-spacing:2px;
        text-transform:uppercase;
        color:#888;
        display:block;
        margin-bottom:10px;
      }

      .que-hacemos .titulo-seccion{
        color:var(--primary);
        font-weight:900;
        margin-bottom:30px;
        position:relative;
      }

      .que-hacemos p{
        font-size:16px;
        line-height:1.7;
        color:#555;
      }

      .grid-imagenes img{
        margin-bottom:25px;
        border-radius:16px;
      }



      /* CARDS EVENTOS */

      .servicios-eventos{
        padding:70px 0;
      }

      .evento-card{
        background:#fff;
        border-radius:30px;
        overflow:hidden;
        box-shadow:0 12px 30px rgba(0,0,0,0.08);
      }

      .evento-card-image {
        height: 250px;
      }

      .evento-card img{
        width:100%;
      }

      .evento-contenido{
        display:flex;
        flex-direction: column;
        gap:20px;
        padding:35px;
        align-items:flex-start;
      }

      /*.evento-titulo {
            display: flex;
            align-items: center;
            gap: 20px;
        }*/

      .numero{
        font-size:36px;
        font-weight:900;
        color:#c9c0c8;
        width: 40px;
      }

      .evento-contenido h3{
        font-size:24px;
        color:var(--primary);
        margin-top:0;
        margin-bottom:0px;
        font-weight:900;
      }

      .evento-contenido p{
        font-size:16px;
        color:#333;
      }

      .evento-contenido ul {
        /*padding-left: 60px!important;*/
        padding-left: 0px!important;
      }
      .evento-contenido ul li {
        display: flex; 
        gap: 10px;
      }
      .evento-contenido ul li span {
        color: var(--primary);
      }



      /* RESPONSIVE */

      @media (max-width:991px){

        

        .que-hacemos .titulo-seccion:after{
          margin-left:auto;
          margin-right:auto;
        }

        .grid-imagenes{
          margin-top:40px;
        }

      }


      @media (max-width:767px){

        .evento-contenido{
          flex-direction:column;
        }

        .numero{
          font-size:26px;
        }

      }

      @media (min-width:768px){

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

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

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

    }

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




/*** 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;
        }

.contacto {
    padding-bottom: 50px;
}