@font-face{
  font-family: 'Roboto';
  src: url('./assets/Roboto-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Roboto Condensed';
  src: url('./assets/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}

a{
  text-transform: uppercase;
}

.contenedor{
  background: #009fe3;
  background-image: radial-gradient(circle, #009fe3 10%, #005b94 35%, #001b37 100%);
position: fixed;
width: 100dvw;
height: 100dvh;
overflow-y: auto;
}


.contenedor1{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
    max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  height: 95dvh;
}
.header{
  width: 100%;
  height: 55px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  padding: 0 20px;
  span,
  a,
  button{
    color: #fff;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    background: transparent;
    border: 0;
  }
  img{
    display: none;
  }
}

.menu-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.menu-toggle{
  display: none;
}

.contenedoresImagenes{
  width: 100%;
  height: 100%;
  display:grid;
  grid-template-columns: 1.2fr 1.5fr .8fr;
  padding: 1rem 10%;
}

.contenedorImagen1{
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-rows: .3fr 1fr;
  gap: 1rem;
  grid-auto-flow: row;
  justify-items: center;
  align-content: space-around;
}

.contenedorImagen1-a {
  background-image: url(./assets/logoDiana.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.contenedorImagen1-b{
  background-image: url(./assets/cocina.png);
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.contenedorImagen2{
  background-image: url(./assets/raus.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.contenedorImagen3{
  background-image: url(./assets/arroz.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.contenedor2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: auto;
  align-items: center;
}

.texto{
  font-size: 2rem;
  color: #fff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 0 0;

  span{
    font-weight: 900;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
}

.lineaS{
  width: 80%;
  margin: 0 auto;
  height: 2px;
  background: #F08225;
  background: radial-gradient(circle, rgba(240, 130, 37, 1) 11%, rgba(172, 91, 35, 1) 26%, rgba(242, 179, 0, 1) 40%, rgba(255, 255, 255, 1) 49%, rgba(242, 179, 0, 1) 60%, rgba(240, 130, 37, 1) 71%, rgba(172, 91, 35, 1) 86%);
}
.linea{
  width: 100%;
  height: 5px;
  background: #F08225;
  background: radial-gradient(circle, rgba(240, 130, 37, 1) 11%, rgba(172, 91, 35, 1) 26%, rgba(242, 179, 0, 1) 40%, rgba(255, 255, 255, 1) 49%, rgba(242, 179, 0, 1) 60%, rgba(240, 130, 37, 1) 71%, rgba(172, 91, 35, 1) 86%);
}

.carts{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}


.cart-box{

  background: linear-gradient(180deg,#009fe3 0%,  #005b94 20%, #001b37  100%);
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  .numero{
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 60px;
    height: 60px;
  }
}

.cart-box-content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  flex-direction: column;
  padding: 1rem;
  box-sizing: border-box;
  img{
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  span{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    text-wrap: balance;
  }
}

.whatsapp{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  background-image: radial-gradient(
    circle, 
    #ffffff 0%, 
    #efc00b 30%, 
    #ebad15 50%
  );
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  span{
    font-size: 1.2rem;
    font-weight: 900;
    color: #01254B;
  }
}

.contenedor3{
display: flex;
max-width: 1400px;
width: 100%;
margin: 0 auto;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem 0;
height: auto;
box-sizing: border-box;
position: relative;
img{
  position: absolute;
  bottom: -7px;
  right: 45px;
  width: 230px;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
}
}

.comoganan{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
  padding: 2rem 1rem;
  width: 80%;
  margin: 0 auto;
  background: #009fe3;
  background: linear-gradient(180deg,#009fe3 0%,  #005b94 20%, #001b37  100%);
}

.contenedor3-a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  span{
    font-size: 2rem;
    font-weight: 900;
    color: #ebad15;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-wrap: balance;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
  }
  span:nth-child(2){
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 300;
    color: #fff;
    text-wrap: balance;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
}

.contenedor3-b{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}

.tabla-puntos{
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.tabla-puntos table{
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.tabla-puntos th{
  padding: .45rem .6rem;
  background: linear-gradient(180deg, #006AA6 0%, #01254B 100%);
  border-bottom: 3px solid #F08225;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.tabla-puntos td{
  padding: .25rem .6rem;
  background-color: rgb(255 255 255 / 44%);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #01254B;
  font-size: 1.15rem;
  font-weight: 900;
}


.contenedor4{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  height: auto;
  padding: 2rem 0;
  box-sizing: border-box;
  position: relative;
  img{
    position: absolute;
    bottom: -75px;
    right: 110px;
    width: 350px;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
  }
}

.contenedorpremio{
  display: grid;
  grid-template-columns: .8fr 2fr 1fr;
  gap: .5rem;
  padding: 1rem 0rem 0rem 0rem;
  width: 80%;
  border: 2px solid #E6B52E;
  margin: 0 auto;
  background: #009fe3;
  background: linear-gradient(180deg,#009fe3 0%,  #005b94 20%, #001b37  100%);
}


.premios{
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  span{
    font-size: 1.2rem;
    font-weight: 900;
    color: #EBCE77;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-wrap: balance;
    text-align: center;
    text-transform: uppercase;
  }
  span:nth-child(1){
    font-size: 1.5rem;
    font-weight: 900;
    color: #FFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: uppercase;
  }
  span:nth-child(2){
    font-size: 5rem;
    font-weight: 900;
    color: #ebad15;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
  }
  span:nth-child(3){
    font-size: 1rem;
    font-weight: 400;
    color: #FFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
  }
}

.premio-rausch{
  background-image: url(./assets/raus2.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.premio-master{
  background-image: url(./assets/master.png);
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.footer{
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
  span{
    width: 80%;
    font-size: .8rem;
    font-weight: 400;
    color: #FFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    text-wrap: balance;
  }
}

.popup-tyc{
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.65);
  z-index: 20;
}

.popup-tyc.activo{
  display: flex;
}

.popup-contenido{
  width: min(90%, 920px);
  padding: 2rem;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(0, 144, 215, 1) 0%, rgba(44, 44, 91, 1) 96%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.popup-contenido-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  border-bottom: 2px solid #E6B52E;
  padding: 1rem 0rem;
  box-sizing: border-box;
}

.popup-contenido span{
  display: flex;
  gap: .5rem;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  color: white;
  font-weight: 800;
}

.popup-contenido-body{
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 100;
  line-height: 1.5;
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
}

.tabla-tyc{
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  color: #fff;
  font-size: .9rem;
}

.tabla-tyc th,
.tabla-tyc td{
  padding: .45rem .6rem;
  border: 1px solid #fff;
  font-weight: 400;
  text-align: left;
}

.tabla-tyc th{
  font-weight: 900;
}

.popup-contenido button{
      height: 35px;
    width: 35px;
    border: 0;
    border-radius: 50%;
    background: #E6B52E;
    color: #01254B;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
}

.whatsapp-button{
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 30;
}

.whatsapp-button a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: auto;
  padding: 0rem 1.5rem;
  height: 64px;
  border-radius: 35px;
  background: #25D366;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  span{
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;

  }
}

.whatsapp-button img{
  width: 36px;
  height: 36px;
  object-fit: contain;
}


.premio-master-mobile{
  display: none;
}

#rauschMobile{
  display: none;
}


.rauschMobile{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  .rauschMobile-a{
   img{
    width: 100%;
   }
  }
  .rauschMobile-b{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-auto-flow: row;
    align-items: center;
    img{
      width: 100%;
    }
 }
}

.contenedor5{
  display: flex;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0rem 1rem 0rem;
  height: auto;
  box-sizing: border-box;
  background: linear-gradient(180deg, #009fe3 0%, #005b94 20%, #001b37 100%);
  border-bottom : 2px solid #E6B52E;
position: relative;
}

.rausPhoto{
  position: absolute;
  top: 90px;
  left: -40px;
  img{
    width: 250px;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

.titulo-contenedor5{
  font-size: 1.8rem;
  font-weight: 900;
  color: #FFF;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.titulo-contenedor5-2{
  font-size: 1.4rem;
  font-weight: 600;
  color: #FFF;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  text-align: center;
}


.clinfografia{
  display: grid;
  grid-template-columns: 1fr   1fr;
  gap: 1rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1rem;
  max-width: 80%;
  img{
    height: 350px;
  }
  .clinfografia-a{
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: auto;
    }
  
  }


  .clinfografia-b{
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: auto;
    }

}}



.linea-clinfografia{
  padding: 1.5rem;
  box-sizing: border-box;
  border: 2px solid #e40f2b;
  max-width: 350px;
  border-radius: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.texto-clinfografia{
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFF;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  text-align: center;
}

.step{
  font-size: 2rem;
  font-weight: 900;
  color: #01254B;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  text-align: center;
  text-transform: uppercase;
  background-image: radial-gradient(circle, #ffffff 0%, #efc00b 30%, #ebad15 50%);
  padding: .5rem 1rem;
  border-radius: 50%;
}

@media (max-width: 700px) {

  .clinfografia {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rausPhoto {
    top: 150px;
    left: 5px;
    img{
      width: 150px;
    }

  }


  .linea-clinfografia {
    padding: .5rem;
    border-radius: 2rem;
}

.texto-clinfografia {
  font-size: 1.1rem;
}


  .contenedor1{
    height: auto;
  }

  #rauschMobile{
    display: block;
  }
.header{
  position: relative;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 10;
  display: flex;
  flex-direction: row;
  padding: 2rem;
  img{
    width: 50px;
    height: 50px;
    object-fit: contain;
    object-position: center;
    display: block;
  }
}

.header .menu-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  background: rgba(1, 37, 75, 0.7);
}

.header .menu-toggle span{
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: #fff;
}

.menu-nav{
  position: absolute;
  top: 55px;
  right: 1rem;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  min-width: 180px;
  padding: 1rem;
  border-radius: 4px;
  background: #0090d7f5;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.menu-nav.activo{
  display: flex;
}

.footer {
  margin: 1rem 0 3rem 0;
  height: auto;
  padding: 0rem;
}

.premio-rausch {
border-bottom: 2px solid #E6B52E;
width: 60%;
}

  .premio-master-mobile{
    display: block;
  }
  
  .contenedoresImagenes {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        padding: 1rem 10%;
    }
  
    .carts {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 20px;
  }

  .comoganan {

    grid-template-columns: 1fr;
    width: 90%;

}


.contenedorpremio {
  grid-template-columns: 1fr;
  .premios:nth-child(3){
    height: 270px;
  }

}

.contenedor4 {
  #sartenmovil {
    position: absolute;
    bottom: 30px;
    right: 50px;
    width: 300px;
    height: auto;
    object-fit: contain;
    object-position: center;
    z-index: 1;
  }
}

  .premios {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .premio-master-mobile{
    background-image: url(./assets/mastermovil.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
  }

.premio-master{
  display: none;
}
  #sartenDesktop {
    display: none;
  }

  
.contenedor3-b{
  justify-content: center;

}


.gana{
    padding-bottom: 1rem;
  }

}