/* CONTENEDOR */
.contacto-container{
  padding:120px 20px;
  text-align:center;
}

/* TITULO */
.contacto-title{
  font-size:clamp(30px, 6vw, 60px);

  background: linear-gradient(90deg,#fff,#4fc3f7);
  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;
  color:transparent;

  text-shadow:0 0 20px rgba(79,195,247,0.7);
}

/* GRID */
.contacto-grid{
  margin-top:50px;

  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:30px;
}

/* BURBUJA */
.contacto-card{
  padding:30px 20px;
  border-radius:25px;

  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px);

  border:1px solid rgba(255,255,255,0.2);

  color:white;

  transition:0.4s;
}

/* HOVER */
.contacto-card:hover{
  transform:translateY(-10px) scale(1.05);
  box-shadow:0 0 30px rgba(79,195,247,0.5);
}

/* ICONO 3D */
.icono{
  width:70px;
  height:70px;

  margin:0 auto 15px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  font-size:30px;

  background: linear-gradient(145deg,#4fc3f7,#0d47a1);

  box-shadow:
    inset 2px 2px 10px rgba(255,255,255,0.3),
    inset -5px -5px 15px rgba(0,0,0,0.3),
    0 5px 15px rgba(0,0,0,0.4);
}

/* TEXTO */
.contacto-card p{
  font-weight:bold;
  margin-bottom:5px;
}

.contacto-card span{
  font-size:14px;
  opacity:0.8;
}

/* 📱 MOBILE */
@media(max-width:768px){

  .contacto-grid{
    grid-template-columns:1fr;
  }

  .contacto-card{
    width:100%;
  }

}

/* CONTENEDOR */
.card-img{
  position:relative;
  overflow:hidden;
  border-radius:20px;
}

/* IMAGEN */
.card-img img{
  width:100%;
  display:block;
  border-radius:20px;
}

/* 🔥 TAG DE USUARIO */
.user-tag{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);

  padding:8px 18px;

  border-radius:20px;

  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(10px);

  color:white;
  font-weight:bold;
  font-size:14px;

  text-shadow:
    0 0 10px rgba(79,195,247,0.8);

  box-shadow:
    0 0 15px rgba(79,195,247,0.3);

  transition:0.3s;
}

/* ✨ ANIMACIÓN */
.card-img:hover .user-tag{
  transform:translateX(-50%) scale(1.1);
  box-shadow:
    0 0 25px rgba(79,195,247,0.8);
}

/* 📱 MOBILE */
@media(max-width:768px){

  .user-tag{
    font-size:13px;
    padding:6px 14px;
  }

}

.user-tag{
  animation:fadeUp 0.6s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translate(-50%, 20px);
  }
  to{
    opacity:1;
    transform:translate(-50%, 0);
  }
}