@charset "utf-8";
/* CSS Document */




.container {
        max-width: 1170px;
        margin: 0 auto;
	    padding: 20px;
        border-radius: 5px;
		flex-wrap: wrap;
        justify-content: space-between;
	    }






.contenedor-principal {
    max-width: 100%;
    margin: 0 auto;
    padding: 10px;
}



/* --------------------------------- IMAGEN ---------------------------------*/

 .contenedor-imagen {
	position: relative;
     width: 300px;  /* Ajusta el tamaño según tu necesidad */
     height: 158px; /* Ajusta el tamaño según tu necesidad */
	 flex: 1 1 300px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
	margin-bottom: 30px;
        }

        .contenedor-imagen img {
            position: absolute;
            width: 98%;
            height: 100%;
            transition: opacity 0.6s ease; /* Transición suave */
			cursor: pointer;
        }


.responsive-img {
    max-width: 100%;
    height: auto;
  }


        .imagen-1 {
            opacity: 1;
        }

        .imagen-2 {
            opacity: 0;
        }

        .contenedor-imagen:hover .imagen-1 {
            opacity: 0;
        }

        .contenedor-imagen:hover .imagen-2 {
            opacity: 1;
        }


 .row {
      display: flex;
      flex-wrap: wrap;
	 flex: 1 1 300px; /* Ítems crecen y encogen con un ancho base mínimo de 200px */
    }
    @media only screen and (max-width: 768px) {
      .caja {
        width: 240px; 
      }
    }
    @media only screen and (max-width: 480px) {
      .caja {
		  
		  width: 240px; 
       
      }
    }
    
    
    
    
    
     *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif, verdana;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f0f0;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      width: 90%;
      max-width: 1200px;
    }

    .box {
      flex: 1 1 30%;
      margin: 10px;
      background-color: #4CAF50;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 20px;
    }

    .box.big {
      flex-basis: 100%;
      height: 300px;
      background-color: #2196F3;
    }

    @media (max-width: 768px) {
      .box {
        flex: 1 1 45%;
        height: 120px;
      }

      .box.big {
        height: 250px;
      }
    }

    @media (max-width: 480px) {
      .box {
        flex: 1 1 100%;
        height: 100px;
      }

      .box.big {
        height: 200px;
      }
    }