@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

html {
    scroll-behavior: smooth;
}

/* Inicia primer bloque --------------------------------------------------------*/
.imagen-superpuesta-contenedor {
  position: relative;
  width: 100%;
  /* max-width: 600px;  */
  margin: 0 auto;
}

.imagen-base {
  width: 100%;
  height: auto;
  display: block;
}

.imagen-superpuesta-normal {
  position: absolute;
  top: 50%; /* Ajusta según necesidad */
  left: 1%; /* Ajusta según necesidad */
  width: 300px; /* Tamaño de la imagen superpuesta */
  height: auto;
  z-index: 2;
}

.imagen-superpuesta-hover {
  position: absolute;
  top: 50%; /* Ajusta según necesidad */
  left: 1%; /* Ajusta según necesidad */
  width: 300px; /* Tamaño de la imagen superpuesta */
  height: auto;
  z-index: 2;
}

.imagen-superpuesta-hover {
    opacity: 0;
}

.imagen-superpuesta:hover .imagen-superpuesta-hover {
    opacity: 1;
}

.imagen-superpuesta:hover .imagen-superpuesta-normal {
    opacity: 0;
}



/* Inicia segundo bloque --------------------------------------------------------*/
.imagen-superpuesta-contenedor2 {
  position: relative;
  width: 100%;
  /* max-width: 600px;  */
  margin: 0 auto;
}

.imagen-base2 {
  width: 100%;
  height: auto;
  display: block;
}

.imagen-superpuesta-normal2 {
  position: absolute;
  top: 80%; /* Ajusta según necesidad */
  left: 50%; /* Ajusta según necesidad */
  width: 400px; /* Tamaño de la imagen superpuesta */
  height: auto;
  z-index: 2;
}

.imagen-superpuesta-hover2 {
  position: absolute;
  top: 80%; /* Ajusta según necesidad */
  left: 50%; /* Ajusta según necesidad */
  width: 400px; /* Tamaño de la imagen superpuesta */
  height: auto;
  z-index: 2;
}

.imagen-superpuesta-hover2 {
    opacity: 0;
}

.imagen-superpuesta2:hover .imagen-superpuesta-hover2 {
    opacity: 1;
}

.imagen-superpuesta2:hover .imagen-superpuesta-normal2 {
    opacity: 0;
}


@media (max-width: 600px) {

    .imagen-superpuesta-normal {
    position: absolute;
    top: 50%; /* Ajusta según necesidad */
    left: 1%; /* Ajusta según necesidad */
    width: 150px; /* Tamaño de la imagen superpuesta */
    height: auto;
    z-index: 2;
    }

    .imagen-superpuesta-hover {
    position: absolute;
    top: 50%; /* Ajusta según necesidad */
    left: 1%; /* Ajusta según necesidad */
    width: 150px; /* Tamaño de la imagen superpuesta */
    height: auto;
    z-index: 2;
    }

    .imagen-superpuesta-normal2 {
    position: absolute;
    top: 80%; /* Ajusta según necesidad */
    left: 40%; /* Ajusta según necesidad */
    width: 200px; /* Tamaño de la imagen superpuesta */
    height: auto;
    z-index: 2;
    }

    .imagen-superpuesta-hover2 {
    position: absolute;
    top: 80%; /* Ajusta según necesidad */
    left: 40%; /* Ajusta según necesidad */
    width: 200px; /* Tamaño de la imagen superpuesta */
    height: auto;
    z-index: 2;
    }
    
}