/* Íconos sociales */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 2.1rem;
  padding: 0.8rem;
  background: #000000;
}

.social-icon {
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.2);
}

.social-icon path {
  transition: fill 0.3s ease;
}

.facebook:hover path { fill: #1877F2; }
.twitter:hover path { fill: #919191; }
.instagram:hover path { fill: #F52129; }
.whatsapp:hover path { fill: #25D366; }


/* Íconos de apps */
.apps-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;
  background: #000000;
}

.apps-icon {
  width: 110px;
  height: 80px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apps-icon:hover {
  transform: scale(1.2);
}

.apps-icon path {
  transition: fill 0.3s ease;
}

.apple:hover path { fill: #555555; }
.android:hover path { fill: #A4C639; }
.windows:hover path { fill: #357EC7; }


/* Botón de pedidos musicales */
.request-button {
  display: flex;
  justify-content: center;
  margin: 5px 0 8px 0;
}

.request-btn {
  display: inline-block;
  padding: 0px 18px;
  background-color: #000;
  color: #d3d3d3;
  text-decoration: none;
  border-radius: 12px;
  font-size: 53px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #d3d3d3;
}

.request-btn:hover {
  background-color: #d3d3d3;
  color: #000;
  transform: translateY(-2px);
}

.request-btn:active {
  transform: translateY(0);
  border-color: #d3d3d3;
}


/* Botón de instalación de app */
.app-button {
  display: flex;
  justify-content: center;
  margin: 5px 0 8px 0;
}

.app-btn {
  display: inline-block;
  padding: 0px 18px;
  background-color: #000;
  color: #d3d3d3;
  text-decoration: none;
  border-radius: 12px;
  font-size: 47px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #d3d3d3;
}

.app-btn:hover {
  background-color: #d3d3d3;
  color: #000;
  transform: translateY(-2px);
}

.app-btn:active {
  transform: translateY(0);
  border-color: #d3d3d3;
}


/* Estilo global para imágenes */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Iframes centrados */
iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* Responsive ajustes mínimos */
@media (max-width: 480px) {
  body {
    overflow-x: hidden;
  }

  .social-icons,
  .apps-icons {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  /* Si algún contenedor externo lo necesita */
  .container {
    padding: 0 1rem;
  }
}