@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');

.rentel-app {
    background: var(--container-dark-background-color);
}

.rentel-header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 13%;
    color: black;
    border-bottom: 2px solid var(--second-border-color);
    display: flex;
    background: var(--main-background-color);
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
} 

.rentel-header > p {
    position: relative;
    top: 23px;
    margin: 0; /* Asegura que no haya margen interior */
    font-size: 30px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
}

.rentel-items {
    position: absolute;
    width: 100%;
    height: 86%;
    top: 13%;
    padding-top: 20px;
    margin: 0 auto;
    left: 0;
    right: 0;
    overflow: auto;
} 

.rentelapp {
    display: flex;
    align-items: center; /* Para centrar verticalmente */
    justify-content: space-between; /* Para colocar la imagen a la derecha */
    position: relative;
    width: 88%;
    background: var(--main-background-color);
    border-radius: 8px;
    height: 22.3%;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0px 0px 7px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.rentelapp h1 {
    position: absolute;
    font-size: 90px;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, rgba(169, 169, 169, 0.3), transparent);
    -webkit-background-clip: text; /* Para aplicar el gradiente solo al texto */
    color: transparent; /* Hacemos el texto transparente para mostrar solo el gradiente */
}

.rentelapp img {
    height: auto; /* Ajusta según tu diseño */
    max-height: 110%; /* Ajusta según tu diseño */
    margin-bottom: 20px;
    z-index: 1;
}

.rentelapp-title {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 18px;
     z-index: 1;
} 

.rentelapp-price {
    position: relative;
    bottom: 20px;
    left: 20px;
    font-weight: bold;
    color: red;
    font-size: 18px;
     z-index: 1;
}
 
.rentelapp-price .per-day-link {
    position: relative;
    top: 7px;
    color: red;
    font-size: 0.8em; /* Tamaño más pequeño para "per day" */
    vertical-align: super; /* Alineación superior para posicionar "per day" arriba */
    text-decoration: none; /* Sin subrayado */
     z-index: 1;
}

.rentelapp-purchase {
    position: absolute;
    left: 20px;
    font-size: 16px;
    color: white;
    bottom: 20px;
    background: linear-gradient(#ff8080, #ff4040); /* Degradado de rojo claro a oscuro */
    border: none;
    border-radius: 15px; /* Border radius para esquinas redondeadas */
    padding: 4px 20px; /* Espaciado interno para el botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background 0.3s ease-in-out;
    z-index: 1;
}

.rentelapp-purchase:hover {
    background: linear-gradient(#ff4040, #ff0000); /* Cambio de color al pasar el cursor */
}