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

body, html {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

body {
    background-image: url('vino compu.png');
    width: 100%;
    height: 100%;
    max-width: 1920px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 1922 / 1080;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100% 100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;

}

/* (Opcional) Estilos para el contenido de ejemplo */
.contenido {
    text-align: center;
    padding-top: 50px;
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
/* --- ESTILOS PARA EL BOTÓN-IMAGEN (LO NUEVO) --- */
.boton-imagen {
    position: absolute;
    
    /* --- POSICIÓN CON PORCENTAJES --- */
    /* Ejemplo: Posicionado en la parte inferior derecha de la pantalla */
    top: 88%;  /* 75% desde el borde superior */
    left: 39%; /* 85% desde el borde izquierdo */
    
    /* Pequeño truco para que el centro del botón quede en ese punto exacto */
    transform: translate(-50%, -50%);
    
    /* --- TAMAÑO PROPORCIONAL A LA VENTANA --- */
    width: 15vw; /* El ancho será el 15% del ancho de la ventana (vw = viewport width) */
    max-width: 150px; /* Un tope para que no se haga gigante en pantallas grandes */
    min-width: 80px;  /* Un tope para que no se haga diminuto en móviles */

    transition: transform 0.0s ease;
}

/* Estilo para la imagen dentro del botón */
.boton-imagen img {
    width: 100%; /* La imagen se adapta al tamaño del contenedor .boton-imagen */
    height: auto;
    display: block; /* Elimina espacios extra debajo de la imagen */
}

/* Efecto al pasar el mouse por encima (opcional) */


@media (min-width: 2060px) and (max-width: 2560px) {
    body {
    background-image: url('vino compu.png');
    width: 100%;
    height: 100%;
    max-width: 2560px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 1922 / 1080;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100% 100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;
    
}
.boton-imagen {width: 20vw; max-width: 270px; min-width: 80px;}
}
@media (min-width: 1560px) and (max-width: 2060px) {
    body {
    background-image: url('vino compu.png');
    width: 100%;
    height: 100%;
    max-width: 2060px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 1922 / 1080;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100% 100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;

}
    .boton-imagen {width: 20vw; max-width: 150px; min-width: 80px;}
}
@media (min-width: 1060px) and (max-width: 1560px) {
    body {
    background-image: url('vino compu.png');
    width: 100%;
    height: 100%;
    max-width: 1560px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 1922 / 1080;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100% 100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;
}
.boton-imagen {width: 20vw; max-width: 130px; min-width: 80px;}
}
@media (min-width: 560px) and (max-width: 1059px) {
    body {
    background-image: url('vino compu.png');
    width: 100%;
    height: 100%;
    max-width: 1060px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 1922 / 1080;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100% 100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;
    
}
    .boton-imagen {width: 20vw; max-width: 100px; min-width: 80px;}
}
@media (min-width: 321px) and (max-width: 560px) {
    body {
    background-image: url('VINO cel.png');
    width: 100%;
    height: 100%;
    max-width: 560px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 384 / 832;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100%  100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;
}
.boton-imagen {
    position: absolute;
    
    /* --- POSICIÓN CON PORCENTAJES --- */
    /* Ejemplo: Posicionado en la parte inferior derecha de la pantalla */
    top: 94%;  /* 75% desde el borde superior */
    left: 76%; /* 85% desde el borde izquierdo */
    
    /* Pequeño truco para que el centro del botón quede en ese punto exacto */
    transform: translate(-50%, -50%);
    
    /* --- TAMAÑO PROPORCIONAL A LA VENTANA --- */
    width: 18vw; /* El ancho será el 15% del ancho de la ventana (vw = viewport width) */
    max-width: 100px; /* Un tope para que no se haga gigante en pantallas grandes */
    min-width: 20px;  /* Un tope para que no se haga diminuto en móviles */

    transition: transform 0.0s ease;
}

}
@media (min-width: 50px) and (max-width: 320px) {
       body {
    background-image: url('VINO cel.png');
    width: 100%;
    height: 100%;
    max-width: 320px;
    /* IMPORTANTE: Ajusta aspect-ratio a la proporción REAL de tu imagen6.PNG (ancho_imagen / alto_imagen) */
    aspect-ratio: 384 / 832;  /* EJEMPLO: si imagen6.PNG es 1920x400. ¡Cámbialo! */
    background-size: 100%  100%;   /* 'cover' es bueno si aspect-ratio coincide con la proporción de la imagen */
    background-position: center; /* Asegura que el logo esté centrado */
    background-repeat: no-repeat;
}
    .boton-imagen {     position: absolute;
    
    /* --- POSICIÓN CON PORCENTAJES --- */
    /* Ejemplo: Posicionado en la parte inferior derecha de la pantalla */
    top: 93%;  /* 75% desde el borde superior */
    left: 76%; /* 85% desde el borde izquierdo */
    
    /* Pequeño truco para que el centro del botón quede en ese punto exacto */
    transform: translate(-50%, -50%);
        width: 20vw; /* El ancho será el 15% del ancho de la ventana (vw = viewport width) */
    max-width: 100px; /* Un tope para que no se haga gigante en pantallas grandes */
    min-width: 20px;  /* Un tope para que no se haga diminuto en móviles */

    top: 94%;}
}