@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {background-color: #1e1e1e;
    margin: 0rem;
    display: grid;
    place-items: center;
    font-family:'roboto';}

/*header*/
.contenedor1 {width: 428px;height: 812px;
    background-color: rgb(255, 255, 255);}

.contheader {width: 428; height: 85;flex-shrink: 0;
    background: var(--Very-Very-Light-Blue, #D9EFFC);
    display: grid;grid-template-columns: 85% 15%;align-items: center;}

/*Buscador*/
.contbuscar {display: flex;
    padding: 1rem 1rem;
    align-items: center;
    gap: 8px; margin: 1.50rem 1.25rem 0rem 1.25rem;
    flex: 1 0 0;
    align-self: stretch; border-radius: 0.5rem;
    background-color:  #D9EFFC;}

h3 {color: var(--Blue-Dark, #06293E);
        font-family: Roboto;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem; /* 150% */
        letter-spacing: 0.03125rem;}

/* buscador fecha  */

.contfecha1 {display: grid;grid-template-columns: 80% 20%;
    width: 170px;align-items: center;margin: 1.2rem;
    height: 50px;padding: 0.1rem 0rem 0.25rem 1rem;
    background-color: #F4F9FD;
    border-radius: 0.25rem 0.25rem 0rem 0rem;}

.fecha1{display: grid;grid-template-rows:50% 50%;
        height: 2.5rem;justify-content:left;width: 7.91rem;align-items: center}
    
h5 {color: var(--Blue, #0E77B5);font-family: Roboto;
    font-size: 0.75rem;font-style: normal;font-weight: 400;
    line-height: 1rem;}

.contfechasjuntas {display: grid;grid-template-columns: 50% 50%;
    width: 25.2rem;height: 3rem;}

/* destacados del mes*/

h1 {color: var(--Blue-Dark, #06293E);font-family: Roboto;padding: 1.7rem 12rem 0rem 1.4rem;
    font-size: 1.3rem;font-style: normal;font-weight: 700;line-height: 1.75rem;}

h2 {color: var(--Blue-Dark, #06293E);font-family: Roboto;font-size: 1.375rem;
    font-style: normal;font-weight: 700;line-height: 1.75rem;}

/* contenedor descripcion - destacados del mes*/

.contnomres {display: grid;grid-template-rows: 60% 40%;}

.contdescrip {display: grid;grid-template-columns: 60% 40%;width: 21.875rem;
    height: 3.5rem;flex-shrink: 0;
    ;margin: 1rem 2rem 0rem 1rem;justify-content: center;}

.boton {display: inline-flex;margin-top: 1.5rem;
    height: 40px;width: 6.31rem;margin-left: 1.2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    border-radius: 100px;
    background: var(--Blue, #0E77B5);
    color: var(--m-3-sys-light-on-primary, var(--F4F9FD, #FFF));
    text-align: center;font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;text-decoration: none;}

/* contenedores imagenes - destacados del mes*/  

.contimg {position: relative;
            width: 24rem;height: 8rem;}

.imglike {position: absolute;top: 24%;left: 9%;transform: translate(-50%, -50%);z-index: 1;
        background-color:  #D9EFFC;padding: 0.4rem;border-radius: 100%;}
.imgfondo {width: 100%;height: 100%;object-fit: cover;}

.contdestmes {display: grid;grid-template-rows: 50% 50%;width:24rem;height:13.9rem ;
    border-radius: 1rem;align-content: center;margin-left: 1.4rem;
    background: var(--Blue-_-Base, #F4F9FD);
    box-shadow: 0px 1px 3px 1px rgba(10, 122, 204, 0.15);}

/*Recomendados */
p {color: var(--Blue, #0E77B5);font-family: Roboto;font-size: 0.6875rem;
    font-style: normal;font-weight: 500;line-height: 1rem;letter-spacing: 0.03125rem;}
.contrecomdes{display: grid;grid-template-rows: 10% 45% 45%;margin-left: 1.5rem;margin-top: 1rem;}

.contrecimg {position: relative;width: 12.375remrem;height: 8.0625rem;}
.imglike2 {position: absolute;top: 70%;left: 18%;transform: translate(-50%, -50%);z-index: 1;
    background-color:  #D9EFFC;padding: 0.4rem;border-radius: 100%;}
.imgv {width: 100%;height: 100%;object-fit: cover;}

.contrecom {display: grid;grid-template-columns: 50% 50%;margin-left: 1.2rem;
    border-radius: 1rem;background: var(--Blue-_-Base, #F4F9FD);margin-bottom: 1rem;
    box-shadow: 0px 1px 3px 1px rgba(10, 122, 204, 0.15);width: 24rem;height: 8rem}

/* tab bar*/

.tabbar {display: grid;grid-template-columns: 25% 25% 25% 25%;
        justify-items: center;margin-top: 1rem;
        background-color:#F4F9FD;padding: 1rem;
        height: 3.3rem;width: 24.75rem;}

.botombar {height: 3rem;width: 6rem;
            display: grid;grid-template-rows: 40% 60%;justify-items: center}