:root {
    /* Variables para el botón de inicio */
    --screen-button-bg-color: ;
    --screen-button-hover-bg-color: ;
    --screen-button-color: ;
    --screen-button-font-size: ;

    /* Variables para los estilos específicos */
    --screen-style-0-color: ;
    --screen-style-0-bg-color: ;

    --screen-style-1-color: ;
    --screen-style-1-bg-color: ;

    --screen-style-2-color: ;
    --screen-style-2-bg-color: ;

    --screen-style-3-color: ;
    --screen-style-3-bg-color: ;

    --screen-style-4-color: ;
    --screen-style-4-bg-color: ;

    /* Variables para el estilo del producto */
    --screen-product-name-font-size: 50px;
    --screen-product-description-font-size: 25px;
    --screen-product-price-font-size: 36px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: border-box;
}


body {
    font-family: 'Roboto', sans-serif;
}




.screen-product-name {
    margin: 20px;
    /* Resto de tus estilos */
}

.screen-product-description {
    margin: 20px;
    color: var(--screen-product-description-color);
    /* Resto de tus estilos */
}


.screen-product-price {
    margin: 20px;
    /* Resto de tus estilos */
}



.screen-home-button {
    position: fixed;
    right: 20px;
    bottom: 100px;
    background-color: var(--screen-button-bg-color);
    color: var(--screen-button-color);
    padding: 15px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    text-decoration: none;
    font-size: var(--screen-button-font-size);
    z-index: 1000;
}

.screen-home-button:hover {
    background-color: var(--screen-button-hover-bg-color);
    color: black;
}

/* Estilos para los diferentes estilos */
.screen-style-0 { color: var(--screen-style-0-color); }
.screen-style-0 .screen-product-description { background-color: var(--screen-style-0-bg-color); }

.screen-style-1 { color: var(--screen-style-1-color); }
.screen-style-1 .screen-product-description { background-color: var(--screen-style-1-bg-color); }

.screen-style-2 { color: var(--screen-style-2-color); }
.screen-style-2 .screen-product-description { background-color: var(--screen-style-2-bg-color); }

.screen-style-3 { color: var(--screen-style-3-color); }
.screen-style-3 .screen-product-description { background-color: var(--screen-style-3-bg-color); }

.screen-style-4 { color: var(--screen-style-4-color); }
.screen-style-4 .screen-product-description { background-color: var(--screen-style-4-bg-color); }

/* Estilo para el nombre del producto */
.screen-product-name {
    font-size: var(--screen-product-name-font-size);
}

/* Estilo para la descripción del producto */
.screen-product-description {
    font-size: var(--screen-product-description-font-size);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
    max-width: 90%;
    margin-bottom: 20px;
}

/* Estilo para el precio del producto */
.screen-product-price {
    font-size: var(--screen-product-price-font-size);
    font-weight: bold;
    margin-top: 10px;
}

/* Estilos para la imagen del producto */
.wp-image img {
    height: 65vh; /* % del alto de la pantalla. La unidad vh (viewport height) representa un porcentaje de la altura del viewport (la parte visible de la pantalla).*/
    width: auto; /* El ancho se ajusta automáticamente manteniendo la relación de aspecto */
    object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* Estilos Responsivos para mobile  */
@media only screen and (max-width: 600px) {
    /* Estilo para el nombre del producto en pantallas pequeñas */
    .screen-product-name {
        font-size: 24px; /* Menor tamaño de fuente */
    }

    /* Estilo para la descripción del producto en pantallas pequeñas */
    .screen-product-description {
        color: var(--screen-product-description-color);
        font-size: 18px; /* Menor tamaño de fuente */
    }

    /* Estilo para el precio del producto en pantallas pequeñas */
    .screen-product-price {
        font-size: 20px; /* Menor tamaño de fuente */
    }
}

/* Estilos Para el WIDWET DEL TIEMPO  */
.weather-widget-container {
    background-color: #f0f0f0; /* Color de fondo */
    margin: 20px; /* Margen alrededor del widget */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000; /* Asegúrate de que el widget se muestre sobre los demás elementos */
}