* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; }

    /* Para que el pseudo-elemento cubra toda la página */
    body {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
      text-align: center;
      color: #333;
      overflow: hidden;
     }

    /* Mosaico desvanecido con tu icono */
    body::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 0;
      background: url('../assets/nada-mas-corres-crew-icon.webp') repeat;
      background-size: 100px 100px;  /* ajusta el tamaño del tile */
      opacity: 0.05;                /* controla la intensidad */
    }

    /* tu contenedor, por encima del mosaico */
    .contenedor {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 1rem;
      padding: 2rem;
     border-radius: 8px;
      max-width: 90%;
      width: 100%;
    }
    .columna {
      flex: 1;
    }
    .columna.izquierda {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    .columna.derecha {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* background-color: gainsboro; */
      padding: 1rem;
      border-radius: 4px;
       backdrop-filter: blur(8px);
      
    }

    img {
      max-width: 100%;
      height: auto;
    }
    h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }
    h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    p {
      font-size: 1rem;
      opacity: 0.7;
      margin-bottom: 1.5rem;
    }
    .btn-instagram {
      display: inline-block;
      padding: 0.6rem 1.2rem;
      background: #E1306C;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      font-weight: bold;
      transition: opacity 0.2s;
    }
    .btn-instagram:hover { opacity: 0.8; }
    .columna.izquierda img {
  width: 450px;
  height: auto;
  border-radius: 50%;       /* lo convierte en círculo */
  object-fit: cover;        /* asegura que llene el contenedor */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* sombra sutil */
  transition: transform 0.3s; /* animación */
}

.columna.izquierda img:hover {
  transform: scale(1.05);    /* ligero zoom al pasar el ratón */
}
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: #333;
}

.social span {
  font-weight: bold;
}

.social a img {
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
}

.social a:hover img {
  transform: scale(1.1);
}

    /* Responsive */
    @media (max-width: 600px) {
      .contenedor {
        flex-direction: column;
        padding: 1rem;
      }
      h1 { font-size: 2rem; }
      h2 { font-size: 1.25rem; }
      .columna.izquierda img {
        width: 300px; /* Ajusta el tamaño de la imagen en pantallas pequeñas */
      }
    }