:root{
  --blanco: #fff;
  --negro: #000;
  --primario: #eec100;
  --secundario:#6d0303;

  --fuentePrincipal: font-family: 'Lato', sans-serif;
}

/*  GLOBALES */

html{
  font-size: 62.5%;
  box-sizing: border-box; /* Hack para box model*/
}

*, *:before, *:after {
  box-sizing: inherit;
} /* Hack para box model*/

body{
  font-size: 16px;
  line-height: 1.5;
  background-image: url("../img/fondos/mobile_arriba.webp") url("../img/fondos/mobile_abajo.webp");
  height: 100%;
  background-repeat: no-repeat no-repeat; /* Do not repeat the image */
  background-size: contain contain; /* Resize the background image to cover the entire container */
  background-position: center center;
  background-color: azure;
  display: flex;
  flex-direction: column;
}

.tooltip-inner {
  font-size: 1.3rem;
  background-color: var(--blanco) !important;
  color: var(--negro) !important;
}
@media (max-width: 480px) {
  .tooltip{
    width: 15rem;
  }
  .tooltip-inner{

    font-size: 0.8rem;
  }
  
}

a{
  color: var(--primario);
  text-decoration: none;
}

a:hover{
  color:var(--primario);
}

.contenedor{
  max-width: 120rem;
  margin: 0 auto;
}

h1, h2, h3 {
  text-align: center;
  font-family: var(--fuentePrincipal);
  text-transform: uppercase;
}

h1{
  font-size: 4rem;
}

h2{
  font-size: 3.2rem;
}

h3{
  font-size: 2.4rem;
}

/* ESTILOS TITULOS */

.titulo-blanco{
  text-align: center;
  margin: 2rem 0;
  color: var(--blanco);
  font-family: 'Lato', sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
}

@media (min-width: 768px) {
  .titulo-blanco,
  .titulo-bordo{
    font-size: 2.5rem;
    margin-top: 4rem;
  }
}

.promociones,
.servicios,
.combustibles,
.beneficios,
.lubricantes,
.rrhh{
  max-width: 120rem;
  width: 90%;
  margin: 0 auto;
}

/* ESTILOS IMAGEN HEADER */

.header{
  background-image: url("../img/fondos/mobile_arriba.webp");
  height: 100%;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-position: center;
  background-color: azure;
}

@media (min-width: 768px) {
  .header{
    background-image: url("../img/fondos/web_arriba.webp");
    height: 600px;
  }

}

/* ESTILOS IMAGEN CUERPO */

.cuerpo{
  background-image: url("../img/fondos/mobile_abajo.webp");
  height: 100%;
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  background-position: center;
  background-color: azure;
}

@media (min-width: 768px) {
  .cuerpo{
    background-image: url("../img/fondos/web_abajo.webp");
  }

}

/* ESTILOS TITULO */
.titulo{
  color: var(--blanco);
  margin: 6rem auto 6rem auto;
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .titulo{
    display: flex;
    margin: 10rem auto 8rem auto;
    font-size: 4rem;
  }
}

/* ESTILOS CAROUSEL PROMOS */

.promociones{
  margin-top: 5rem;
}
.promociones .item .img-portada{
  width: 70%;
  margin: 0 auto;
}
 
.promociones .owl-theme .owl-dots .owl-dot:hover span {
  background: #D6D6D6;
}
.promociones .owl-theme .owl-dots .owl-dot.active span{
  background: var(--secundario);
}

@media (min-width: 768px) {
  .promociones{
    margin-top: 8rem;
  }
}

/* Estilos Servicios */

.servicios{
  text-align: center;
  margin: 5rem auto 0 auto;
}

.servicios img{
  margin: 0 auto;
  width: 80%;
}

@media (min-width: 768px) {
  .servicios{
    margin-top: 8rem;
  }
  .servicios img{
    width: 70%;
  }
}

/* ESTILOS COMBUSTIBLES */

.combustibles{
  margin: 5rem auto 0 auto;
  width: 80%;
}
.combustibles .img-combustibles{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align-last: center;
  gap: 0.5rem;
  transition: transform 500ms;
  will-change: transform;
  
}
.combustibles .img-combustibles img{
  width: 100%;
  transition:all .5s ease-in-out;
}

.combustibles .img-combustibles img:hover{
  transform: translateY(15px);
}



@media (min-width: 768px) {
  .combustibles{
    width: 74%;
    margin-top: 8rem;
  }
  .combustibles .img-combustibles{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align-last: center;
    gap: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-top: 4rem;
  }
  .combustibles .img-combustibles img{
    width: 100%;
  }
}


/* ESTILOS BENEFICIOS */

.beneficios{
  margin-top: 5rem;
}

.beneficios .carousel-beneficios .item img{
  width: 80%;
  margin: 0 auto;
}

.beneficios .owl-theme .owl-dots .owl-dot:hover span {
  background: #D6D6D6;
}
.beneficios .owl-theme .owl-dots .owl-dot.active span{
  background: var(--primario);
}

@media (min-width: 768px) {
  .beneficios{
    margin-top: 8rem;
  }
}

 

/* ESTILOS LUBRICANTES */

.lubricantes{
  margin: 5rem auto;
  width: 80%;
}

.img-lubricantes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align-last: center;
  gap: 0.5rem;
  transition: transform 500ms;
  will-change: transform;
}
.lubricantes .img-lubricantes img{
  width: 100%;
  transition:all .5s ease-in-out;
}

.lubricantes .img-lubricantes img:hover{
  transform: translateY(15px);
}

@media (min-width: 768px) {
  .lubricantes{
    margin-top: 8rem;
    width: 55%;
  }
  .lubricantes .img-lubricantes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align-last: center;
    gap: 2rem;
    margin: 4rem auto;
    max-width: 75%;
  }
  .lubricantes .img-lubricantes img{
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .lubricantes .img-lubricantes{
    max-width: 90rem;
  }
}

/* ESTILOS RRHH */
.rrhh{
  text-align: center;
  margin: 5rem auto 5rem auto;
}

.rrhh img{
  margin: 0 auto;
  width: 80%;
}

@media (min-width: 768px) {
  .rrhh{
    margin-top: 8rem;
  }
  .rrhh img{
    width: 62%;
  }
}


/* ESTILOS POPUP */