@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

/*---Botón WSP---*/
.float{
  position: fixed;
  bottom: 40px;
  right: 60px;
}



/*---Nav---*/
/*---Menú Hamburguesa---*/
.navbar-toggler{
    width: 30px;
    height: 20px;
    position: relative;
    transition: .5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
    outline: none;
    box-shadow: none;
    border: 0;
}

.navbar-toggler span{
  margin: 0;
  padding: 0;
}

.toggler-icon{
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background:crimson;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.middle-bar{
   margin-top: 0px;
}

/*Cuando se clica el navegador*/
.navbar-toggler .top-bar{
    margin-top: 0px;
    transform: rotate(135deg);
}

.navbar-toggler .middle-bar{
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar{
    margin-top: 0px;
    transform: rotate(-135deg);
}

/*Estado cuando el nav está colapsado*/
.navbar-toggler.collapsed .top-bar{
    margin-top: -20px;
    transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar{
   opacity: 1;
   filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar{
    margin-top: 20px;
    transform: rotate(0deg);
}

/*Color de las 3 líneas*/
.navbar-toggler.collapsed .toggler-icon{
    background: linear-gradient(273deg, rgba(0, 212, 255,1)0%, rgba(220, 20, 60, 1) 100%);
}

.nav-item a:hover{
    color: crimson;
    transition: all 1s;
}


/*---Header---*/
.site-header{
    width: 100vw;
    height: 90vh;
    background-image: linear-gradient(rgba(96, 24, 24, 0.8), rgba(29, 14, 14, 0.8)), url('./img/site-header.jpg');
    opacity: .7;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.texto-header{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
}

.texto-header h1{
    font-size: 5rem !important;
    margin-bottom: 2rem;
}

.texto-header .bi{
   margin: auto 5rem;
   font-size: 3rem;
}


.texto-header hr{
    margin: 3rem auto;
  background-color: #fff;
  height: 1rem;
}

@media only screen and (max-width: 1440px){
    .texto-header{
        width: 100vw;
    }
}

@media only screen and (max-width: 992px){
    .site-header{
        height: 60vh;
    }
    .capa-header{
        height: 60vh;
    }

    .texto-header{
        width: 100vw;
    }

    .texto-header h1{
        font-size: 3rem !important;
       
    }
    
    .texto-header .bi{
       margin: auto 5rem;
       font-size: 1.8rem;
    }
}
@media only screen and (max-width: 768px){
  

    .site-header{
        height: 60vh;
    }
    .capa-header{
        height: 60vh;
    }
  

    .texto-header{
        width: 100vw;
    }

    .texto-header h1{
        font-size: 2.5rem !important ;
    }
       
    .texto-header .bi{
       margin: auto 5rem;
       font-size: 1.4rem;
    }    
}

@media only screen and (max-width: 480px){
    .site-header{
        height: 50vh;
    }
    .capa-header{
        height: 50vh;
    }

    .texto-header h4{
        font-size: 1.4rem !important
    }
}

/*---PISTA DEL MES---*/
.pista-mes{
  background-color: #e4e3e3;
  margin-top: 5rem;
}
.muestra-pista{
  margin: 2rem auto;

  padding: 0;
  border:1 px solid #000;
}

@media (max-width: 480px){
  .h2-contacto{
    font-size: .8rem;
  }

  .pista-mes{
    margin-top: 1.5rem;
  }

  .pista-mes iframe{
    width: 100%;
    height: 30rem;
    margin: auto;
  }
}
/*---FIN PISTAS DEL MES---*/

/*---DEMOS---*/
.cont-demos{
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  background: url('./img/bg-demos1.jpg');
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  

  }
  
  @media(max-width: 500px){
      .alto-botones{
      margin-top: -3rem;
      padding-top: -3rem;
    }
  }
  
  .boton-demo button:hover{
    background: #fff;
    color: rgb(243, 46, 46);
   
  }
  
  .btn-enlace-1:hover{
    color: rgb(243, 46, 46) !important;
  }
  .btn-enlace-2{
    background: #fff !important;
    color:rgb(243, 46, 46)!important;
    margin-top: 4rem;
  }
  .btn-enlace-2:hover{
    background: rgb(243, 46, 46)!important;
    color: #fff !important;
  }
  
  @media (max-width:480px){


    .alto-demos{
        height: 40% !important;
    }
    .demos{
      height: 100%;
    }
    .demos .h1-demos{
      display: none;
       }
  
       .btn-demos{
        margin-top: -3rem;
       }

       .btn-enlace-2{
        margin-top: 3rem;
       }
  
       .h2-contacto{
        font-size: .8rem;
      }
  }

  @media (max-width:992px){
    .alto-demos{
        height: 80vh !important;
    }
  }
/*---FIN DEMOS---*/

/*--PISTAS DESTACADAS---*/
.fondo-destacadas{
    background-image: linear-gradient(to right top,#e1cecb, #f4d4d0, #c6c7c3, #b8bbb8, #929593);
  }
  
  .fondo-destacadas2{
    background-image: linear-gradient(to right, #e1cecb, #f4d4d0, #c6c7c3, #b8bbb8, #929593);
  }
  
  .fondo-destacadas3{
    background-image: linear-gradient(to right, #e7d7d7, #f7afac, #fc857d, #f95849, #ee130a);
  }
  
  .fondo-destacadas4{
    background-image: linear-gradient(to right, #e7d7d7, #f7afac, #fc857d, #f95849, #ee130a);
  }
  .card:hover {
    transform: scale(1.15);
   
  }
  .card {
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  
  @media (max-width: 480px){
    .h2-contacto{
      font-size: .8rem;
    }
  }

  /*---PISTAS DE CALIDAD---*/
 .bg-pistas-calidad{
  width: 100vw;
  background-image: url('../img/bg-pistasCalidad.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

@media (max-width: 480px){
  .txt-calidad{
    margin-top: 2rem;
  }

  .img-calidad-dos{
    margin-top: 2rem;
  }

  .h2-contacto{
    font-size: .8rem;
  }
}

/*---TESTIMONIAL---*/
.sec-testi{
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
  }
  
  .section-header{
    position: relative;
    text-align: center;
    color: #fff;
    padding-top: 3rem;
  }
  
  .section-header::after{
    content: '';
    height: .3rem;
    width: 20rem;
    position: absolute;
    bottom: 0;
    left: calc(50% - 10rem);
    background: #fff;
  }
  
  .section-header span{
    display: block;
    font-size: 1.5rem;
    font-weight: 300;
    padding-bottom: 2.5rem;
  }
  
  .testimonials{
    max-width: 100rem;
    padding: 0 1.5rem 5rem;
    margin: 0 auto 8rem auto;
  }
  
  @media(max-width:480px){
    .testimonials{
      margin-left: -1.5rem;
    }
  
    .h2-contacto{
      font-size: .8rem;
    }
  }
  
  .single-item{
    background: #fff;
    color: #111;
    padding: 1.5rem;
    margin: 5rem 1.5rem;
  }
  
  @media(max-width:480px){
    .single-item{
      width: 100%;
    }
  }
  
  .profile{
    margin-bottom: 3rem;
    text-align: center;
  }
  
  .img-area{
    margin: 0 1.5rem 1.5rem 1.5rem;
  }
  
  .img-area img{
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    border: .7rem solid rgb(246, 17, 90);
  }
  
  @media(max-width: 480px){
    .img-area {
      margin: 0 auto;
      margin-left: -1.6rem;
    }

    .img-area img{
      width: 10rem;
      height: 10rem;
      margin-bottom: 2rem;
    }
  }
  
  .content-1{
    font-size: 1.6rem;
  }
  
  .contet-1 p{
    text-align: justify;
  }
  
  @media(max-width: 480px){
    .bio{
      margin-left: -1.2rem;
    }
    .content-1 p{
      text-align: center;
      font-size: 1.2rem !important;
      margin-right: 1.3rem;
    }
  }
  
  .content-1 p span{
    font-size: 4.8rem;
    margin-right: 2rem;
    color:  rgb(246, 17, 90);
  }
  
  @media(max-width:480px){
    .content-1 p span{
      font-size: 2rem;
    }
  }
  
  .carousel-control-next-icon,
  .carousel-control-prev-icon{
    background-color: rgb(246, 17, 90);
  }
  
  @media(max-width: 480px){
    .carousel-control-prev-icon{
      margin-left: 1.5rem;
      padding-left: 2rem;
    }
  
    .h2-contacto{
      font-size: .8rem; 
    }
  
    .h2-testi{
      margin-bottom: 2rem;
    }   
  }

  /*---GRABACIONES Y ARREGLOS---*/
  .trabajos{
    width: 100vw;
  }

@media (max-width: 480px){
    .h2-contacto{
      font-size: .8rem;
    }
  }

  /*---PRECIOS---*/
.pagos{
 vertical-align: bottom;
}
.fondo-precios{
  width: 100vw;
  height: 100%;
  background: #e4e3e3;
}

@media (max-width: 480px){

  .h2-contacto{
    font-size: .8rem;
  }
}

/*---MEDIOS DE PAGO---*/
.bg-pagos{
  width: 100vw;
  height: 100%;
  background-image: url('./img/pagos.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.heading-pagos{
  color: #fff;
}

.h4-pagos{
  color: darkorange;
  font-size: 2rem;
}
.pagos p {
  color: #fff;
  font-weight: 600;
  font-size: 1.4rem;
}

.pagos p strong{
  color: #e9b2b2;
}

.mp{
  text-decoration: none;
  color: #fff;
}

@media (max-width: 480px){
  .h2-contacto{
    font-size: .8rem;
  }
}

/*---FORMULARIO---*/
@media (max-width: 480px){
  .form-height{
    height: 100%;
    margin-top: 1.5rem;
  }
  .h2-contacto{
    font-size: .8rem;
  }
} 

/*---FOOTER---*/
footer p{
  font-size: 1.6rem;
  padding: .8rem auto;
}

@media (max-width: 480px){
  footer p{
    font-size:1.2rem !important;
   margin-top:1rem;
  }
}

/*------------------FIN DE PÁGINA PRINCIPAL---------------------*/

/*---NOSOTROS---*/
.media-querie p{
  font-size: 1.2rem !important;
}

/*---PÁGINA DEMOS---*/
.bg-demos{
  width: 100vw;
  height: 100vh;
  background-image: url('./img/bg-demos.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 0;
}

.header-bg-txt{
  margin-top: 13rem;
  padding-top: 5rem;
}

@media (max-width: 768px){
  .bg-demos{
    margin-top: 5rem;
  }
}

@media (max-width:480px){
  .header-bg-txt{
    margin-top: 4rem;   
  }

  .nav-demos{
    margin-top: -2rem;
  }

  .bg-demos{
    width: 100%;
    height: 60rem;
    margin-top: 5rem;
    margin-bottom: 2rem;
  }
 .top{
  margin-top: 10rem;
 }

 .header-bg-txt{
margin-top: 10rem;
 }
}

/*---Página de show---*/

@media (max-width: 992px){

  .img-left{
    margin-left: 4.5rem;
  }
}

@media (max-width: 768px){
  .labanda h1{
    text-align: center;
    margin-bottom: 1rem;
  }

  .labanda a button{
    margin-left:8rem;
  }

  .img-labanda{
    text-align: center;
  }

  .img-labanda{
    width: 20rem;
    margin-left: 4rem;
  }
}

/*--- PÁGINA BUSCADOR---*/

thead{
  color: white;
}

.header-buscador .navbar {
  height: 50px;
  padding: 0 15px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

 .header-buscador .navbar a {
  color: white;
  line-height: 3em;
}


.table-area {
  position: relative;
  z-index: 0;
  margin-top: 50px;
}

table.responsive-table {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

table.responsive-table thead {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  line-height: 3em;
  table-layout: fixed;
  display: table;
}

table.responsive-table th {
  background: rgb(24, 160, 170);
}

table.responsive-table td {
  line-height: 2em;
  
}

table.responsive-table tr > td,
table.responsive-table th {
  text-align: left;
}


@media (min-width: 206px) and (max-width: 767px)
{

  table.responsive-table tr > td
  {
    font-size: 9px;
    color: black;
  }
  table.responsive-table th
  {
    font-size: 8px;
    color: white;
  }
}


@media (min-width: 768px) 
{ 

  table.responsive-table tr > td
  {
    font-size: 10px;
    color: black;
  }
  table.responsive-table th
  {
    font-size: 10px;
    color: white;
  }
}

@media (min-width: 992px) 
{ 

  table.responsive-table tr > td
  {
    font-size: 12px;
    color: black;
  }
  table.responsive-table th
  {
    font-size: 12px;
    color: white;
  }
}

@media (min-width: 1200px) 
{

  table.responsive-table tr > td
  {
    font-size: 15px;
    color: black;
  }
  table.responsive-table th
  {
    font-size: 15px;
    color: white;
  }
}
strong{
  color: #941313;
}

/*---Mensaje de envío---*/