:root {
    /* Colores Primarios*/
    --ColorVerde500: hsl(158, 36%, 37%);
    --ColorVerde700: hsl(158, 42%, 18%);
     /* Colores Neutrales*/
    --ColorBlack: hsl(212, 21%, 14%);
    --ColorGrey: hsl(228, 12%, 48%);
    --ColorCream: hsl(30, 38%, 92%);
    --ColorWhite: hsl(0, 0%, 100%);
}

html {
font-size: 62.5%;
}

body {
font-size: 16px;
background: var(--ColorCream);
}


/*font-family: "Fraunces", serif */
/* font-family: "Montserrat", sans-serif; */

.contenedor-principal {
    max-width: 60rem;
    width: 90%;
    height: auto;
    margin: 20rem auto;
    border-radius: 2rem;
    
    display: grid;
    grid-template-columns: 50% 50%;
}

.contenedor-principal__imagen{
width: 100%;
height: auto;
}

.contenedor-principal__imagen img{
width: 100%;
height: 100%;
border-radius: 1rem 0 0 1rem;
}


.contenedor-principal__contenido {
padding: 4rem;
background-color: var(--ColorWhite);
border-radius: 0 1rem 1rem 0;
height: auto;
}

.contenedor-perfume {
font-family: "Montserrat", sans-serif;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 0.3rem;
margin-bottom: 1rem;
}

.contenedor-marca {
font-family: "Fraunces", serif;
font-size: 3rem;
font-weight: 700;
word-spacing: 0.5rem;
margin-bottom: 1.5rem;
text-shadow: 0 0 0.5px currentColor;
}

.contenedor-descripcion {
color: var(--ColorGrey);
}

.contenedor-precio {
display: flex;
align-items: center;
gap: 1.5rem;
}

.precio-original {
color: var(--ColorVerde700);
font-family: "Fraunces", serif;
font-size: 3rem;
}

.precio-anterior {
font-family: "Fraunces", serif;
font-weight: 300;
font-size: 1.5rem;
text-decoration: line-through;
}

button {
background-color: var(--ColorVerde500);
padding: 1.4rem;
width: 100%;
border-radius: 0.8rem;
color: var(--ColorWhite);
}

button:hover {
background-color: var(--ColorVerde700);    
}


.boton {
display: flex;
justify-content: center;
gap: 1rem;
}