*{
 margin:0;
 padding:0; 
}
.btn_saludo
{
  position: fixed;
  width: auto;
  height: 25px;
  line-height: 2;
  padding-left: 5px;
  padding-right: 5px;
  top: 80px;
  right: 30px;
  background: #191970;
  color: white;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  text-decoration: none;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  z-index: 99999;
}
.btn_saludo:hover
{
  text-decoration: none;
  color:#0000CD;
  background: white;

}
.btn_wsp
{
  position: fixed;
  width: 55px;
  height: 55px;
  line-height: 55px;
  bottom: 30px;
  right: 30px;
  background: #0df053;
  color: white;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index: 100;
}
.btn_wsp:hover
{
  text-decoration: none;
  color:#228B22;
  background: white;

}
.main_index
{
 display: block;
 float: left;   
 width:100vw;
 height:100vh;
 overflow-x: hidden;
 background: #F5F5F5;
}

.slick
{
 display: block;
 float: left;
 margin-left: 5%;
 margin-top: 6%;
 width:90%; 
 height: auto;
}
.slick-prev:before,
.slick-next:before {
  color: black !important;
}

.slick-dots li.slick-active button:before 
{
  color: black !important; /* Color del punto activo */
}
.slick-dots li button:before
{
  color: #A9A9A9 !important;
  opacity: 1 !important;
}
p#titulocar
{
 display: block;
 float: left;
 margin-left: 20%;
 margin-top: 10px;
 padding-left: 5px;
 width: 60%;
 height: 20px;
 font-weight: 400;
 font-size: 12px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 text-align: center;
 color:white;
 border-radius: 3px;
 background: #BA55D3;
}

.banner
{
 display: block;
 float:left;
 width: 100%;
 height: 100%;
 background-size: cover;
 border-radius: 10px;
}
.conte_desta
{
 display: block;
 float: left;
 width: 90%;
 height: 72%;
 margin-left: 5%;
 margin-top: 1%;
 border-radius: 5px;
 border: 1px solid #D3D3D3;
 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
 background: white;
}
.ingresos
{
 display: block;
 float: left;
 margin-left: 5%;
 margin-top: 1%;
 width: 90%;
 height: 72%;
 border-radius: 5px;
 border: 1px solid #D3D3D3;
 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
 background: white;
}
.conte_desta p#titulodesta,p#titulorank
{
 display: block;
 float: left;
 margin-left: 0.5%;
 margin-top: 0.5%;
 padding-left: 5px;
 width: 70%;
 height: 20px;
 font-weight: 600;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 text-align: left;
 font-size: 12pt;
 border-radius: 7px;
 color:black;
}
.conte_desta a#tododesta,a#todonove
{
 float: right;
 margin-right: 0.5%;
 margin-top: 0.5%;
 width: auto;
 height: 20px;
 line-height: 25px;
 font-weight: 400;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 text-align: left;
 font-size: 12pt;
}
.conte_desta a#tododesta:hover,a#todonove:hover
{
 color:#FF8C00;
 background: transparent;
}
.contenido
{
 display: block;
 float: right;
 margin-right: 0.5% !important;
 margin-top: 5px !important;
 width: 99% !important;
 height: 305px !important;
}
.gretop
{
 display: block;
 float: right;
 margin-right: 0.5% !important;
 width: 99% !important;
 height: 305px !important;
 /* background: red; */
}
.burari
{
 display: block;
 float: left;
 padding-left: 2px;
 margin-left: 3px !important;
 margin-top: 5px;
 width: 200px !important;
 height: 400px !important;
 border: solid ,1px, white;
 border-radius: 8px;
 background: white;
 border: solid #CACACA 1px;
}
.burari img
{
 display: block;
 float: left;
 margin-top: 5px;
 margin-left: 2px;
 width: 97%;
 height: 45%;   
}
.burari:hover
{
 cursor: pointer;
} 
.nombre
{
 display: block;
 float: left; 
 width: 98%; 
 height: 15%;
 margin-left: 2px;
 border:0;  
 resize: none;
 font-size: 11px;
 text-align: left;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 color:black;
}
.prelst
{
 display: block;
 float: left;   
 margin-left: 2px;
 width: 98%;
 border: 0;   
 text-align: center; 
 font-size: 14px;  
 font-weight: 600;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 color:black;
}
.btn_clides 
{
 display: block;   
 float: left;
 width: 80%;
 height: 30px;
 margin-left: 10%;
 margin-top: 3px;
 text-align: center;
 line-height: 30px;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-weight: bold !important;
}
.btn_clinue 
{
 display: block;   
 float: left;
 width: 80%;
 height: 30px;
 margin-left: 10%;
 margin-top: 10%;
 text-align: center;
 line-height: 30px;
 padding: 0;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-weight: bold !important;
}
/* .btn_clinue:hover,.btn_clides:hover
{
 color:#FF8C00;
 background: transparent;
} */
.conte_rubritos
{
 display: block;
 float: left;
 width: 90%;
 height: auto;
 margin-left: 5%;
 margin-top: 1%;
 border: none;
 background: transparent;
}
.conterub
{
 display: grid;
 float: left;
 margin-left: 0.5%;
 margin-top: 0; 
 width: 99%;
 height: 90%;
 grid-template-columns: repeat(4, 0.5fr);
 grid-auto-rows: auto;
 grid-gap: 5px;
 grid-auto-rows: minmax(80px, auto);
 background: transparent;
 overflow-y: hidden;
}
.conterub > div 
{
 position: relative;
 overflow: hidden;
 background: #00008B;
 border-radius: 5px;
}
.oferta
{
 background-color: #e5e5f7;
 opacity: 0.8;
 background: radial-gradient(circle, transparent 20%, #e5e5f7 20%, #e5e5f7 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #e5e5f7 20%, #e5e5f7 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#444cf7 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #444cf7 2px, #e5e5f7 2px) -1px 0;
 background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
}
.burrub img
{
 display: block;
 width: 100%;
 height: auto;
 grid-area: 1 / 1 / 2 / 2;  
 border-radius: 5px;
}
.btn_rubrito 
{
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 top: 35%;
 left: 0;
 width: 100%;
 text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
 color:white;
 text-align:center;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-weight: 600;
 font-size: 14px;
 z-index: 99;
 text-decoration: none;
 transition: opacity 0.3s ease;
 cursor: pointer;
}
.burrub:hover
{
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}
.btn_oferta
{
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 top: 25%;
 left: 10%;
 width: 80%;
 border-radius: 3px;
 background-color: rgba(0, 0, 0, 0.5);
 color:white;
 text-align:center;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-weight: 600;
 font-size: 14px;
 z-index: 99;
 text-decoration: none;
 transition: opacity 0.3s ease;
 cursor: pointer;
}
.btn_ofertanov
{
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 top: 35%;
 left: 10%;
 width: 80%;
 border-radius: 3px;
 background-color: rgba(0, 0, 0, 0.5);
 color:white;
 text-align:center;
 font-family: "Open Sans", sans-serif;
 font-optical-sizing: auto;
 font-weight: 600;
 font-size: 14px;
 z-index: 99;
 text-decoration: none;
 transition: opacity 0.3s ease;
 cursor: pointer;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
 .btn_saludo
 {
  top:100px;
  right: 10px;
 }
 .btn_wsp
 {
  bottom: 20px;
  right: 10px;
 }
 .slick
 {
  margin-top: 105px;
 }
 p#titulocar
 {
  margin-left: 15%;
  margin-top: 10px;
  width: 70%;
  font-size: 11px;
 }
 .banner
 {
  width: 90vw;
 }
 .contenido
 {
  float: left;
  width: 99% !important;
  height: 260px !important;
 }
 .burbuja img
 {
  margin-left: 3%;
  width: 150px;
  height: 150px;   
 }
 .conte_desta
 {
  margin-top: 2%;
  height: calc(44%);
 }
 .ingresos
 {
  margin-top: 2%;
  height: calc(44%);
 }
 
 .gretop
 {
  float: left;
  width: 99% !important;
  height: 260px !important;
 }
 .nombre
 {
  height: 40px;
  max-height: 40px;
 }
 .burari
 {
  width: 150px !important;
  height: 300px !important;
 }
 .conte_rubritos
 {
  margin-top: 3%;
 }
 .conterub
 {
  grid-template-columns: repeat(1, 1fr);
 }
 .btn_rubrito 
 {
  font-size: 18px;
 }
 .btn_oferta
 {
  top:33%;
 }
 .btn_clinue 
 {
  width: 90%;
  margin-left: 5%;
 }
}