/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text&family=Raleway:wght@500&display=swap');

/* Variables */
:root {
    /* Colores */
    --titulo1: ;
    --color1: hsl(202, 71%, 66%);
    --color2: hsl(212, 47%, 56%);
    --color3: #CCF6FF;

    /* Fonts */
    --font-titulo: 'Raleway', sans-serif;
    --font-body: 'Golos Text', sans-serif;
    --body-size1: ;

}


/* Base */
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: var(--font-body);
}

html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-padding, 90px);
}
h1, h2, h3{
    font-family: var(--font-titulo);
}

p, a{
    font-family: var(--font-body);
}

ul{
    list-style: none;
}

a {
    text-decoration: none;
}



/* Animaciones */

.hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translatex(-100%);
    transition: all 1.2s;
}

.show{
    opacity: 1;
    filter: blur(0);
    transform: translatex(0);
}



/* Navbar */


.navbar{
    width: 100%;
    height: 80px;
    background-color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid whitesmoke;
    box-shadow: 5px 0 10px rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    z-index: 100;
}

.nav_logo{
    width: 50%;
    padding-left: 2%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav_logo img{
    width: 70px;
}

.nav_logo p{
    padding-left: 2%;
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    width: 190px;
}

.nav_logo a{
    color: black    ;
    font-size: 14px;
}


.nav_menu{
    display: flex;
    width: 80%;
    justify-content: end;
    padding-right: 30px;
}

.nav_menu li{
    padding-right: 10px;
}

.nav_menu li a{
    color: black;
    display: block;
    padding: 10px 8px 10px 8px;
    border-radius: 5px;
    transition: all 0.4s;
}

.nav_menu li a:hover {
    background-color: var(--color1);
}

.btn_menu {
    justify-content: end;
    margin-right: 5%;
    color: black;
    display: none;
}

ul.show {
    top: 65px;
}

/* Seccion 1 Inicio */

.hero{
    /* background-image: linear-gradient(120deg, rgba(93, 152, 192, 0.678) 0%, rgba(123, 206, 226, 0.671) 100%), url(../assets/hero-mapa.jpg); */
    width: 100%;
    height: 830px;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero h1{
    text-align: left;
    width: 100vw;
    font-size: 2.8em;
    color: black;
    font-weight: bolder;
    margin-top: 110px;
    margin-bottom: 30px;
    margin-left: 10vw;
}

.texto-hero{
    color: black;
    height: 750px;
    display: flex;
    /* justify-content: space-evenly; */
    align-items: top;
    width: 90%;
    gap: 6%;
    margin-inline: 10vw;
}

.hero-letras{
    width: 50%;
}

.hero-letras div{
    margin-bottom: 25px;
}

.texto-hero h2{
    margin-top: 30px;
    font-size: 2.2em;
    font-weight: bold;
    padding-bottom: 30px;
    /* text-align: justify; */
}


.texto-inicio p{
    width: 100%;
    font-size: 1.2em ;
    text-align: justify;
    margin-top: 20px;
}


.texto-hero a{
    display: inline-block;
    text-decoration: none;
    padding: 14px 16px;
    border-radius: 5px;
    border: 1px solid var(--color1);
    color: white;
    font-weight: bold;
    background-color: var(--color1);
    transition: .3s ease;
    /* margin-top: 40px; */
}

.texto-hero a:hover{
    background-color: var(--color2);
    border: 1px solid var(--color2);
}

.hero-foto{
    background-image: linear-gradient( hsl(24, 65%, 52%), hsl(27, 75%, 47%));
    transform: rotate(80deg);
    border-radius: 100px;
    width: 300px;
    height: 450px;
    /* border-radius: 30% 70% 53% 47% / 30% 39% 61% 70% ; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: 50px;
}
.hero-foto img{
    height: 490px;
    border-radius: 500px;
    transform: rotate(-80deg);
}

/* .texto-hero img::before{
    background-image: url(../assets/blob-haikei.svg);
    content: "";
    background-size: 100% 100%;
    display: inline-block;
  
    height: 250px;
    width:250px;
  
    position:absolute;
    top:50px;
} */

.svg-hero-bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Seccion 2 Tours Principales */

#tours1{
    background: var(--body-size1);
    background: linear-gradient(0deg, rgba(98, 163, 201, 0.908) 0%, rgb(171, 197, 218) 35%, var(--color1) 100%);
    height: auto;
    background-color: var(--color1);
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 20px; */
    padding-bottom: 200px;
    position: relative;
}

.tour-titulo{
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.1em;
    font-weight: bold;
    border-bottom: solid 1px;
    padding-inline: 30px;
    padding-bottom: 5px;
}

.tour-titulo h2::before{
    content: "01. Circuitos";
    color: white;
    font-size: .3em;
    display: block;
}

.tour{
    height: auto;
    width: 100%;
    padding-inline: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 60px;
}

.contenedor-textos-tour{
    height: auto;
    width: 50%;
}

.tour h2{
 font-size: 2.2em;
 font-weight: bold;
 padding-bottom: 10px;
}

.tour h3{
    font-size: 1.4em;
    font-weight: 200;
    text-align: justify;
    padding-bottom: 10px;
}

.tour p{
    font-size: 1.2em ;
    position: relative;
    text-align: justify;
    border-left: 2px solid; 
    padding-left: 15px; 
    padding-block: 5px;
}

.tour br, .texto-inicio br{
    display: block; 
    content: "";
    margin-top: 10px; 
}

.derecha{
    text-align: right;
    width: 100%;
    /* padding-right: 5%;
    padding-left: 0; */
}

.derecha h3{
    text-align: right;
}

.derecha p{
    border-right: 2px solid; 
    padding-right: 15px; 
    border-left: 0;
    padding-left: 0;
}

.tour img{
    width: 40%;
    height: 35%;
    border-radius: 10px;
}

.imagen-boton{
    width: 50px;
    translate: -150px 10px;
    animation: movimiento 9s ease infinite;
    transform: scaleX(-1); 
}

    @keyframes movimiento {
        0%  {transform: translateX(0) scaleX(-1);}
        30%  {transform: translateX(300px) scaleX(-1);}
        50% {transform: translateX(300px)}
        90%  {transform: translateX(0);}
        100% {transform: scaleX (1);}
}

.tours1 a{
    display: inline-block;
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 8px;
    /* color: var(--color1);
    background-color: white; */
    border: 2px white solid;
    color: white;

    transition: .3s ease;
}

.tours1 a:hover{
    color: var(--color1);
    background-color: white;
}

/* Seccion 3 Informacion de Contacto*/

#info{
    height: auto;
    width: 100%;
    color: var(--color1);
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding-bottom: 70px;
    color: black;
    padding-inline: 3%;
    }
    
#info br{
    display: block !important; 
    content: "" !important;
    margin-top: 15px !important; 
}

.contenedor-textos-info{
    align-items: center;
    justify-content: center;
    width: 55%;
    height: auto;
}

.contenedor-textos-info h1{
    font-size: 3em;
    font-weight: bold;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
    width: 450px;
}   

.contenedor-textos-info h1::before{
    content: "02. Nosotras";
    color: var(--color2);
    font-size: .3em;
    display: block;
}

.contenedor-textos-info p{
    font-size: 1.3em;
    padding-top: 20px;
    text-align: justify;
}

.contedor-cards{
    width: 40%;
    display: flex;
    justify-content: right;
    align-items: center;
}
.cards{  
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 15px;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4);
    transition: all .9s ease;
}

.cards img{
    height: 370px;
    width: 100%;
    border-radius: 15px 15px 0 0 ;
    object-fit: cover;
}
.contenedor-textos-cards{
    width: 95%;
    color: black;
    padding-block: 10px;
    text-align: center;
    display: flex;
    gap: 10%;
    justify-content: space-between;
}
.contenedor-textos-cards h2{
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 5px;
}

.contenedor-textos-cards h3{
    font-size: .8em;
    font-weight: 100;
}

.cards:hover{
    transform: translateY(-3%);
}


.svg-hero-top{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Seccion 4 Opiniones */

.opiniones{
    padding-block: 20px;
    height: auto;
    width: 100%;
    background-color: white;
}

.opiniones h1{
    text-align: center;
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 30px;
    width: auto;
    display: none;
}

.opiniones-contenedor{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 90%;
    margin-left: 5%;
    margin-block: 20px;
}

.opniones-box{
    width: 100%;
    margin-inline: 20px;
    padding-block: 40px;
    border-image: linear-gradient(var(--color1), #c4a80c) 30;
    border-width: 4px;
    border-radius: 10px;
    border-style: solid; 
    text-align: center;
    box-shadow: 10px 7px 7px rgba(0, 0, 0, 0.4);
    transition: .3s ease;
}

.opniones-box:hover{
    transform: translateY(-3%);
}

.grande{
    padding-block: 60px;
}

.opniones-box h3{
    color: var(--color1);
}


/* Seccion 5 Contacto */

.contacto{
    width: 100%;
    height: auto;
    padding: 30px;
    background-color: var(--color3);
    /* display: flex;
    justify-content: center; */
}

.contacto-box{
    display: flex;
    align-items: top;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    gap: 20px
}

form{
    width: 500px;
    display: flex;
    flex-flow: row wrap;
    column-gap: 30px;
}
.field {
    margin-bottom: 10px;
  }
  
  .field label {
    display: block;
    font-size: 1em;
    font-family: var(--font-body);
    margin-bottom: 5px;
    color: black;
  }
  
  .field input {
    display: block;
    width: 500px;
    line-height: 1.5;
    font-size: 14px;
    border: none;
    height: 30px;
    text-align: top;
    align-items: start;
    padding-left: 5px;
  }

  .field textarea{
    max-width: 500px;
    min-width: 500px;
    padding-left: 5px;
  }

#telefono, #email{
    width: 235px;
}

  
#button {
    display: block;
    padding: 6px 30px;
    font-size: 14px;
    background-color: transparent;
    color: black;
    border: 1px solid black;
    border-radius: 15px;
    transition: all .3s ease;
}

#button:hover{
    background-color: var(--color1);
    border: 1px solid var(--color1);
}



.contacto-texto{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin-left: 30px;
}

.contacto h2{
    font-size: 2.8em;
    border-bottom: 1px solid;
    
}

.contacto h2::before{
    content: "03. Contactanos";
    color: var(--color2);
    font-size: .3em;
    display: block;
    text-align: right;
}

.contacto-texto h3{
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: 100;
    text-align: right;
}

.contacto-texto ul{
    margin-top: 10px;
}

.contacto-texto li{
    text-align: right;
    color: var(--color1);
}

.contacto-box a{
    /* color: var(--color1); */
    color: black;
    font-size: 1.2em; 
  }

/* Seccion 5 Footer */

footer{
    height: auto;
    background-color: black;
    color: grey;
    padding-top: 25px;
    padding-bottom: 15px;
}

footer a{
    color: grey;
}

.contenedor-footer{
    display: flex;
    justify-content: space-around;

    align-items: center; 
    width: 90%;
    gap: 10%;
    margin-left: 5px;
}

.contenedor-footer div{
    padding: 10px;
}

.contenedor-footer p{
 padding-bottom: 5px;
 font-size: 1.1em;
}

.contenedor-footer a{
border-left: 1px solid;
padding-left: 9px;
}

.link2{
    text-align: center;
    margin-top: 10px;
}
.link2 a{
    color: white;
    text-decoration: underline;
}

/* Subpagina */
/* Seccion 1 SubInicio */

.subinicio{
    height: auto;
    width: 100%;
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* background-image: linear-gradient(120deg, rgba(246, 212, 101, 0.678) 0%, rgba(253, 159, 133, 0.671) 100%), url(../assets/inicio-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; */
}

.subinicio-contenedor{
    padding-block: 200px;
    width: 90%;
    z-index: 3;
    margin-bottom: 20px;
}

.subinicio-textos{
    width: 50%;
}

.subinicio-textos h1{
    font-size: 4em;
}

.subinicio-textos p{
    padding-top: 20px;
    font-size: 1.2em;
}

.subinicio-botones{
    padding-top: 40px;
}

.subinicio-botones a{
    background-color: transparent;
    border: 1px solid var(--color1);
    color: var(--color1);
    border-radius: 7px;
    padding: 10px;
    transition: all .3s;
}

.subinicio-botones a:hover{
    color: white;
    background-color: var(--color2);
    border: 1px solid var(--color2);
}

#a1{
    background-color: var(--color1);
    color: white;
}

#a1:hover{
    background-color: rgb(83, 128, 212);
}

.subinicio img{
    position: absolute;
    right: 0;
    width: 70%;
    z-index: 2;
    transform: translateX(50%);
    color: black;
}

/* Seccion 1.5 */ 

.circuitos-short{
    display: flex;
    gap: 2%;
    background-color: rgb(252, 249, 249);

}

.circuitos-short div{
    width: 25%;
    height: 120px;
    text-align: center  ;
    transition: all .3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    font-weight: bold;
    color: white;
    border-radius: 100px ;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.4);
}

.circuitos-short div a{
    color: white;
    padding-inline: 90px;
    padding-block: 40px;
}

#c1{
   color: black;
   font-weight: bold;
   font-size: 1.8em;
   background-color: rgb(252, 249, 249);
   box-shadow: none;
   padding-left: 3%;
}

#c2{
    background-color: hsl(44, 77%, 62%);
}


#c2:hover{
    background-color: hsl(44, 72%, 44%);
}

#c3{
    background-color: hsl(140, 62%, 42%);
}

#c3:hover{
    background-color: hsl(140, 61%, 35%);
}

#c4{
    background-color: hsl(199, 73%, 42%);
}

#c4:hover{
    background-color: hsl(199, 78%, 37%);
}

/* Seccion 2 */

.wrapper{
    max-width: 100%;
    background-color: rgb(252, 249, 249);
    position: relative;
    padding-bottom: 150px;
    
  }
  .gallery{
    display: flex;
    flex-wrap: wrap;
    margin-inline: 5%;
  }
  .gallery .image{
    padding: 7px;
    width: calc(100% / 4);
    cursor: pointer;
  }
  .gallery .image span{
    display: flex;
    width: 100%;
    overflow: hidden;
  }
  .gallery .image img{
    width: 100%;
    vertical-align: middle;
    transition: all 0.3s ease;
  }
  .gallery .image:hover img{
    transform: scale(1.1);
  }
  .preview-box{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #fff;
    max-width: 600px;
    width: 100%;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    border-radius: 3px;
    padding: 0 5px 5px 5px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  }
  .preview-box.show{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.3s ease;
  }
  .preview-box .details{
    display: flex;
    align-items: center;
    padding: 12px 15px 12px 10px;
    justify-content: space-between;
  }
  .preview-box .details .title{
    display: flex;
    font-size: 18px;
    font-weight: 400;
  }
  .details .title p{
    margin: 0 5px;
  }
  .details .title p.current-img{
    font-weight: 500;
  }
  .details .icon{
    color: #007bff;
    font-size: 20px;
    cursor: pointer;
  }
  .preview-box .image-box{
    display: flex;
    width: 100%;
    position: relative;
  }
  .image-box .slide{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    height: 50px;
    width: 60px;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
  }
  .slide.prev{
    left: 0px;
  }
  .slide.next{
    right: 0px;
  }
  .image-box img{
    width: 100%;
    border-radius: 0 0 3px 3px;
  }
  .shadow{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    display: none;
    background: rgba(0,0,0,0.45);
  }
  @media(max-width: 1000px){
    .gallery .image{
      width: calc(100% / 2);
    }
  }

/* .sub-background{
    background: var(--color1);
    background: linear-gradient(0deg, var(--color1) 0%, rgb(90, 143, 221) 35%, rgb(255, 255, 255) 100%);
} */
.circuitos{
    height: auto;
    background-color: transparent;
    /* display: flex; */
    align-items: center;
    gap: 10%;
}

.circuitos-textos{
    padding: 30px;
    width: 100%;
    display: flex;
}

.circuitos-textos div{
    width: calc(75%/2);
}

.circuitos-titulo{
    display: inline-block;
    padding-left: 30px;
}

.circuitos h2{
    font-size: 2em;
    display: inline;
    padding: 0;
    color: black;
    font-weight: bold;
    
}


.circuitos-titulo::before{
    background-color: hsl(44, 77%, 62%);
    border-radius: 100px;
    content: "";
    background-image:url(../assets/blob-haikei.svg);
    background-size: 0;

    
    display: inline-block;
  
    right: 50px;
    top: 500px;
    height: 25px;
    width:25px;
    /* position:relative; */
    
}

.verdes .circuitos-titulo::before{
    background-color: hsl(140, 62%, 42%);
    
}

.ciudad .circuitos-titulo::before{
    background-color: var(--color1);
}


.circuitos .nav_link{
    font-size: 20px;
    /* border: 1px solid;  */
    text-decoration: underline;
    color: black;
    border-radius: 7px; 
    transition: all .3s;
}

.circuitos .nav_link:hover{
    font-size: 22px;
} 

.circuitos dt{
    font-size: 1.1em;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 5px;
     background: url(../assets/bus.png) no-repeat left ;
    background-size: 50em;
    background-position: 0 5px;
    padding-left: 45px;
    background-size: contain; 
    z-index: 200;
    color: var(--color2);

}


.circuitos dd{
    /* border-left: 1px solid black; */
    padding-left: 45px;
    padding-right: 20px;
    font-size: 1em;
}

.circuitos li{
    list-style: disc;
    margin-left: 20px;
    list-style-position: outside;
    
}

/* .contenedor-slide{
    width: 400px;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
}

.wrapper{
    width: 400px;
    height: 500px;
    display: flex;
    animation: slide 10s infinite;
}
@keyframes slide{
    0% {transform: translateX(0);}
    25% {transform: translateX(0);}
    30% {transform: translateX(-100%);}
    50% {transform: translateX(-100%);}
    55% {transform: translateX(-200%);} 
    75% {transform: translateX(-200%);} 
    80% {transform: translateX(-300%);}
    90% {transform: translateX(-300%);}
    100% {transform: translateX(0);}
}
.wrapper img{
    width: 400px;
    height: 600px;
} */

/* 
  .slider {
    width: 450px;
    height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    border-radius: 10px;
    box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.4);
  }
  
  .slider img {
    gap: 0;
    height: 700px;
    width: 450px;
    scroll-snap-align: center;
    display: block; 
    margin: 0;
    float: none;
    white-space: nowrap;
    border-collapse: collapse; 
    border-spacing: 0;
    padding: 0;
    transform: translateX(-100%);
  }
  
  .slider img:first-child {
    transform: translateX(0);
  }
  
  @keyframes slider {
    0% {
      transform: translateX(0);
    }
    16.666% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-100%);
    }
    41.666% {
      transform: translateX(-200%);
    }
    50% {
      transform: translateX(-300%);
    }
    66.666% {
      transform: translateX(-400%);
    }
    75% {
      transform: translateX(-500%);
    }
    91.666% {
      transform: translateX(-600%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  .slider img {
    animation-name: slider;
    animation-duration: 50s;
    animation-iteration-count: infinite;
  } */


  .not_b h2::before{
    content: "";
  }

/* Celular */

    /* Navbar */
    @media screen and (max-width: 952px) {
        .nav_logo{
            width: 80%;
            font-size: 90%;
        }
        .nav_menu li a{
            font-size: 16px;
        }
    }
    
    @media screen and (max-width: 858px) {
        .navbar{
            height: 65px;
        }
        .btn_menu{
            display: inline-flex;
        }
    
        .nav_menu{
            position: fixed;
            width: 100vw;
            height: 70vh;
            background: hsla(0, 0%, 100%, 0.801);
            top: -100vh;
            text-align: center;
            justify-content: flex-start;
            align-items: center;
            transition: all .4s;
            flex-direction: column;
            padding-right: 0;
        }
    
        .nav_menu li{
        margin: 30px 0 0 0;
        line-height: 30px;
        }
        
        .nav_menu li a:hover {
           background-color: transparent;
        }

        .nav_logo img{
            width: 50px;
        }
        
        .nav_logo p{
            width: 50%;
            font-size: 1em;
        }

        .nav_logo a{
            font-size: 10px;
            text-align: left;
        }

    }

    /* Seccion 1 Inicio*/
    @media screen and (max-width:800px) {
    
    .hero{
    height: 1100px;
    width: 100vw;
    overflow:hidden
    }

    .hero, .texto-hero, .svg-hero-bottom{
    z-index: 3;
    }

    .hero h1{
         font-size: 22px;
         text-align: center;
         margin-left: 0;
         margin-bottom: 0;
        }

    .texto-hero{
    text-align: center;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    margin-left: 0;
    margin-bottom: 200px;
    }

    .hero-letras{
       width: 100%;
       text-align: left;
       padding-inline: 5%;
    }

    .texto-hero h2{
        font-size: 16px;
        margin-bottom: 0px;
        padding-bottom: 0;
    }

    .texto-hero p{
        font-size: 0.8em;
        font-weight: 300;
        /* margin: 0; */
        width: 100%;
    }

    .hero-foto{
        height: 380px;
    }

    .hero-foto img{
        height: 400px;
    }
    }
    /* Seccion 2 Tours */

    @media screen and (max-width: 858px){
    #tours1{
        justify-content: flex-start;
        text-align: center;
     }

    .tour-titulo h2{
        font-size: 30px;
        }

    .tour {
        flex-direction: column-reverse;
        height: auto;
        text-align: center;
        justify-content: flex-end;
        padding-right: 0;
        padding-left: 0;
        text-align-last: left;
        padding-bottom: 0;
     }

    .contenedor-textos-tour{
         height: auto;
         width: 90%;
         padding-block: 20px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
    }

    .tour h2{
        font-size: 24px;
        font-weight: bold;
        padding-bottom: 5px;
        text-align: center;
    }

    .tour h3, .tour p {
        font-size: 0.8em;
        text-align: justify;
        padding: 0;
        padding-left: 7px;
        /* padding-block: 5px; */
    }

    .tour p{
        padding-bottom: 5px;
    }

    .tour p::before{
        display: none;
    }

    .derecha{
        flex-direction: column;
    }

    .derecha p{
        border-right: 0; 
        padding-right: 0;
        border-left: 2px solid; 
        padding-left: 7px; 
    }

    .tour img{
        height: 200px;
        width: 85vw;
        padding: none;
    }

    .tours1 a{
        margin-top: 20px;
        font-size: 0.8em;
    }

    .imagen-boton{
        width: 50px;
        translate: -100px 28px;
    }

    @keyframes movimiento {
        0%  {transform: translateX(0) scaleX(-1);}
        30%  {transform: translateX(200px) scaleX(-1);}
        50% {transform: translateX(200px)}
        90%  {transform: translateX(0);}
        100% {transform: scaleX (1);}
    }

    .tour br, .texto-inicio br{
        display: block !important; 
        content: "" !important;
        margin-top: 15px !important; 
    }
    }
    /* Seccion 3 Informacion de Contacto*/

    @media screen and (max-width: 858px){
       #info{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        height: auto;
        padding-bottom: 20px;
       }

       .contenedor-textos-info{
        padding-top: 0;
        width: 90%;
        text-align: center;
        font-size: .6em;
        display: flex;
        flex-direction: column;
        align-items: center;
       }

       .contenedor-textos-info h1{
        width: 95%;
       }
       
       .contedor-cards{
        flex-direction: column;
        height: auto;
        width: 90%;
       }

       .cards{
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        font-size: 11px;
        text-align: center;
       }

       .cards img{
        height: 300px;
       }

       .cards:hover{
        transform: none;
        }

        .contenedor-textos-cards{
            gap: 0;
        }
    }

    /* Seccion 4 Opiniones */
    @media screen and (max-width: 858px){
        .opiniones-contenedor{
            flex-direction: column;
            align-items: center;
            row-gap: 20px;
            justify-content: space-between;
        }
        .opiniones-box{
            height: auto;
            width: 100%;
            margin: 0;
        }

        .grande{
            padding-block: 40px;
        }
    }

    /* Seccion 5 Contacto */

    @media screen and (max-width: 858px){
        .contacto{
            padding: 0;
        }

        .contacto-box{
            flex-direction: column-reverse;
            align-items: center;
            padding-bottom: 20px;
        }
        
        form{
            width: 90%;
        }

        .field input{
            width: 90vw;
        }

        #telefono, #email{
            width: 90vw;
        }

        .field textarea{
            max-width: 90vw;
            min-width: 90vw;
            padding-left: 5px;
        }

        .contacto-texto{
            width: 90%; 
            height: auto;
            align-items: flex-start;
            text-align: left;
            margin-left: 0; 
        }

        

        .contacto h2{
            font-size: 1.3em;
            align-self: center;
            text-align: justify;
            padding-inline: 20px;
        }

        .contacto h2::before{
        text-align: center;
        }

        .contacto-texto h3{
            font-size: .8em;
            text-align: left;
        }

        .contacto-texto li{
            /* color: var(--color1); */
            margin-left: 0;
            text-align: left;
            color: black;
          }

        .contacto-box a{
            /* color: var(--color1); */
            color: black;
            font-size: .8em; 
    }}

    /* Seccion 6 Footer */

    @media screen and (max-width: 858px){
        footer{
        height: auto;
        width: 100%;
        justify-content: start;
        gap: 10px;
        padding-block: 12px;
        padding-bottom: 20px;
        text-align: left;
        font-size: .6em;
        }

        .footer-texto{
        width: 100%;
        }

        .contenedor-footer{
        flex-wrap: wrap;
        width: 90%;
        justify-content: left;
        align-items: left ;
        }

        .contenedor-footer div{
        padding: 0;
        border-left: none;
        padding-top: 5px;
        justify-content: left;
        }

        .link2{
            margin-left: 5px;
            width: 90%;
            text-align: left;
        }
    }

/* Subpagina */

/* Seccion 1 Inicio */

    @media screen and (max-width: 858px){
    .subinicio-contenedor{
        padding-block: 100px;
        width: 90%;
    }
    
    .subinicio-textos{
        width: 100%;
    }
    }


/* Seccion 1.5 */ 

    @media screen and (max-width: 858px){
    
    .circuitos-short{
    flex-direction: column;
    padding-bottom: 10px;
    /* gap: 0; */
    }

    .circuitos-short div{
    width: 100%;
    margin-top: 10px;
    /* border-radius: 0 ; */
    }

    .circuitos-short div a{
    padding-inline: 100px;
    }
    }

/* Seccion 2 */

    @media screen and (max-width: 858px){

    .wrapper{
    padding-bottom: 0;
    }

    .circuitos{
        flex-direction: column;
        width: 100%;
        margin-bottom: 30px;
    }

    .circuitos-textos{
        width: 100%;
        flex-direction: column;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .circuitos-textos div{
    padding: 5px;
    width: 100%;
    }

    .circuitos-titulo{
        max-width: 100%;

    }

    .circuitos-titulo br{
        display: none;
    }

    
    .circuitos a{
        margin-bottom: 5px;
    }

    .circuitos dl{
        margin-top: 0;
    }

    .slider{
        width: 350px;
        height: 500px;
    }

    .slider img {
        width: 350px;
        height: 500px;
    }

    .wrapper .svg-hero-bottom{
        display: none;
    }
    }