/* ESTILO PARA PREVENTAS DE OBRAS */

.preventa-00{
display: grid;
grid-template-areas:
'logo01 					preventa-txt-00 	logo02'
'imagen01 					imagen01 			imagen01'
'preventa-txt-01 			preventa-txt-01 	preventa-txt-01'
'preventa-txt-alerta-01 	preventa-boton-00 	preventa-boton-00';

grid-template-columns: 1fr 1fr 0.5fr;
    grid-template-rows: 1fr;
    gap: 10px;
    background-color: #786693;
    border-radius: 1rem;
    width: 90%;
    margin: 0 auto;
    padding: 1rem;
    place-items: center;
    margin-bottom: 2rem;
    gap: 10px;

    background: linear-gradient( 
        0deg, rgb(126 95 175) 
        0%, rgb(63 63 189 / 65%) 
        116%, rgba(9,9,121,0) 
        80%);
}

/* ESCONDIDOS */
.logo01, .preventa-txt-00, .logo02, .imagen01{display: none;}

/* Nombre de area sin comillas */
.logo01{grid-area: logo01;}

.preventa-txt-00, .preventa-txt-01, .preventa-txt-alerta-01 { 
grid-area: preventa-txt-00; 
font-family: arial;
font-size: 1rem;
text-align: center;
color: white;
line-height: 1.5rem;
}

.logo02{ grid-area: logo02;}

.imagen01{
    display: flex;
    border-radius: 0.8rem;
    background: rgb(149,131,177);
        background: linear-gradient( 0deg, rgb(164 118 234) 20%, rgba(9,9,121,0) 96%, rgba(9,9,121,0) 100%);
}

.imagen01{ 
grid-area: imagen01; 
width: 100%;
}

.imagen02{ grid-area: imagen02;}
.preventa-txt-01{ grid-area: preventa-txt-01;}
.preventa-txt-alerta-01{ grid-area: preventa-txt-alerta-01; }
.precioPreve{font-size: 2rem;}

.preventa-boton-00{ 
grid-area: preventa-boton-00; 
padding: 1rem;
background-color: #01A944;
border-radius: 0.7rem;
font-family: arial;
color: white;
font-size: 1rem;
text-align: center;
text-decoration: none;
border-bottom: 5px solid #22693f;
border-top: 1px solid #0be362;
}

.preventa-boton-00:hover{background-color: #058739;}

@media (min-width: 750px){ 
.preventa-00 {
grid-template-areas: 
'preventa-boton-00 imagen01 imagen01 preventa-txt-01 preventa-txt-alerta-01';
    grid-template-columns: 1fr 2.1fr 2fr 2fr 1fr;
    width: 70%;
} 
}