.main__inicio{
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content:center;
    min-height: 90vh;
    max-width: 990px;
    background-color: var(--color-a);  
}
.main__h1{
    margin: 2rem;
    font-size: 26px;
    text-transform:capitalize;
    font-weight: 100;
}

.main__inicio-parrafo{
    margin-left: 2rem;
    margin-right: 2rem;
    font-weight: 100;
    font-size: 17px;
}
.link{
    color:rgb(63, 202, 212);                        
}
.cartas{
    background-color: var(--color-a);    
    width: 100vw;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cartas__titulo{
    font-size:25px ;
    margin-bottom: 1rem;
    text-align: center;
    padding-top: 2rem;
}
.cartas__contenedor{
    background-color: rgb(38, 65, 65);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: 5px;
    max-width: 900px;
    padding: 2rem 2rem;
    margin-bottom: 2rem;
}
.carta--staff{
    background-color:var(--color-a);
    border: 1px solid var(--color-c);
    border-radius:15px 15px 0 0;
    width: 100%;
    max-width:310px ;
    min-width: 270px;
    height: 390px;
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
}
.carta-titulo{
    color:var(--color-d);
    text-align: center;
    padding: 0;
    font-size: 18px;
    height: 7%;
    margin-top: 0.4rem;
}
.carta-imagen{
    height: 53%;
    min-width: 96%;
    align-self: center;
    background-color: var(--color-a);
    filter: brightness(110%);
    border-radius: 15px 15px 0 0;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}
.carta-imagen:hover{   
    filter: brightness(115%);
    border: 1px solid var(--color-c);
    box-shadow: 1px 1px 10px 2px #141E27;
    transition: all 0.4s;
}
.carta__textoArea{
    background-color: var(--color-c);
    color: var(--color-b);
    display: flex;
    flex-direction: column;
    font-family: var(--fuente-secundaria);
    border: 1px solid var(--color-a);
    margin: 0 0.2rem 0.2rem 0.2rem;
    height:40%;
    border-radius: 0 0 15px 15px;
}

.item{
    display: flex;
    width: 100%;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    padding: 0.2rem;
}

.textoArea-detalle{
    margin: 0 0.1rem;
    font-size: 14px;
    margin:0.4rem 0.2rem 0 0.2rem;
    text-align:left;
}

/*24/05/23 contenedor de oferta*/
.contenedorOferta{
    display: flex;
    flex-direction:column;
    align-items:center;
    margin-top: 1rem;
    background-color:var(--color-e);
}
.oferta{
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-left: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    background-color:transparent;
}
.ofertaTexto{
    background-color:transparent;
    text-align:left;
    margin-right: 1rem;
    font-size: larger;
}
.imgOferta{
    max-width: 17rem;
    height: auto;
    border-radius: 5px;
    box-shadow: 2px 2px 6px black;
    margin: 0.1rem;
}
.textoPromo{
    font-size: 20px;
    margin:1rem;
    color: var(--color-d);
    font-family: var(--fuente-secundaria);
}
.textoPromoPrecio{
    font-family: var(--fuente-secundaria);
    font-size: 20px;
    margin-left:1rem;
    margin-top: 1rem;
    color: var(--color-c);
}
/*24/05/23 fin de contenedor de oferta*/

@media screen and (min-width: 800px){
    .imgOferta{
        max-width: 19rem;
    }
}

@media screen and (min-width: 1000px){
    .textoArea-detalle{
        font-size: 15px;
    }
    .main__h1{
        margin-top: 0;
        font-size: 33px;
    }
    .main__inicio-parrafo{
        font-size: 25px;
    }
    .cartas__contenedor{
        padding: 2rem;
    }
    .carta--staff{
        margin: 1rem;   
    }
    .imgOferta{
        max-width: 24rem;
        border-radius: 5px;
    }
    .textoPromo{
        font-size: 20px;
    }
    .oferta{
        flex-direction:row-reverse;
    }
    .ofertaTexto{
        min-width: 300px;
        background-color:transparent;
    }
    .contenedorOferta{
        align-items:first baseline;
        min-width: 80vw;
        align-self: center;
        border-radius: 10px;
    }
}