body {
  font-family: 'Montserrat', sans-serif;
  background: url('barber-bg.webp') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  text-align: center;
}

/*.logo {
width: 120px;
height: 240px;
background: url("barberpole-1.png") no-repeat center;
background-size: cover;
margin-bottom: 20px;
border-radius: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}*/

h1 {
margin-bottom: 30px;
font-size: 2em;
}

.button {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
background: #444;
padding: 15px 25px;
margin: 10px;
border-radius: 12px;
width: 260px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, background 0.3s;
}

.button:hover {
background: #666;
transform: scale(1.05);
}

.button img {
width: 28px;
height: 28px;
margin-right: 12px;
}

.social-box {
background: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(5px);

/* Animación */
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;

/* Bajarlo un poco */
margin-top: 120px;
}

@keyframes fadeInUp {
to {
  opacity: 1;
  transform: translateY(0);
}
}

/* ====== MEDIA QUERIES ====== */

/* Tablets */
@media (max-width: 768px) {
body {
  background-attachment: scroll;  /* Mejora en móvil */
}

.button {
  width: 220px;
  padding: 12px 20px;
}

.button img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}
}

/* Celulares */
@media (max-width: 480px) {
.button {
  width: 180px;
  padding: 10px 15px;
  font-size: 0.9em;
}

.button img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.social-box {
  margin-top: 80px;
  padding: 15px;
}
}