body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif; /* Fuente general utilizada en la página */
  background-color: #121212; /* Fondo oscuro característico de Spotify */
  display: flex; /* Configura un contenedor flexible */
  flex-direction: column; /* Alinea los elementos en una columna */
  align-items: center; /* Centra horizontalmente los elementos hijos */
  justify-content: center; /* Centra verticalmente los elementos hijos */
  min-height: 100vh; /* Asegura que el fondo ocupe toda la altura de la ventana */
  color: #ffffff; /* Texto blanco para buena visibilidad sobre fondo oscuro */
}

.container {
  display: flex; /* Usa un diseño de rejilla flexible */
  flex-wrap: wrap; /* Permite que los elementos pasen a una nueva fila si no caben */
  justify-content: center; /* Centra las tarjetas en el contenedor */
  gap: 20px; /* Espaciado entre las tarjetas */
  padding: 0 10px; /* Espaciado lateral para pantallas pequeñas */
}

.card {
  background-color: #1c1c1c; /* Fondo más oscuro para destacar sobre el fondo general */
  border-radius: 8px; /* Esquinas redondeadas para un diseño moderno */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad a las tarjetas */
  overflow: hidden; /* Asegura que el contenido no se desborde de la tarjeta */
  width: 200px; /* Ancho fijo para consistencia */
  height: 300px; /* Altura fija para uniformidad */
  text-align: center; /* Centra el texto dentro de las tarjetas */
  color: #ffffff; /* Color de texto blanco para contraste */
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transiciones suaves al interactuar */
}

.card:hover {
  transform: scale(1.05); /* Amplía ligeramente la tarjeta al pasar el mouse */
  background-color: #282828; /* Cambia el color de fondo al pasar el mouse */
}

.image-wrapper {
  display: flex; /* Centra la imagen dentro del contenedor */
  justify-content: center; /* Alinea horizontalmente la imagen */
  align-items: center; /* Alinea verticalmente la imagen */
  margin-top: 15px; /* Espaciado superior para separar la imagen del borde */
}

.card-image {
  width: 90px; /* Ancho de la imagen circular */
  height: 90px; /* Altura de la imagen circular */
  object-fit: cover; /* Asegura que la imagen mantenga su proporción */
  border-radius: 50%; /* Hace que la imagen sea circular */
  border: 4px solid #1DB954; /* Borde verde característico de Spotify */
  background-color: #000; /* Fondo negro para consistencia visual */
}

.card-title {
  font-size: 16px; /* Tamaño de fuente para el título */
  font-weight: bold; /* Título en negrita para destacar */
  color: #1DB954; /* Verde para resaltar el título principal */
  margin: 10px 0 5px; /* Espaciado alrededor del título */
}

.card-subtitle {
  font-size: 14px; /* Tamaño de fuente más pequeño para el subtítulo */
  margin: 5px 0; /* Espaciado inferior y superior para separación */
}

.card-role {
  font-size: 12px; /* Fuente pequeña para roles secundarios */
  color: #a5a5a5; /* Texto en gris claro para menor jerarquía visual */
}

.card-button {
  display: inline-block; /* Permite que el botón tenga dimensiones específicas */
  margin-top: 15px; /* Espaciado superior para separar del contenido */
  padding: 10px 20px; /* Tamaño del botón para clics cómodos */
  font-size: 14px; /* Tamaño de fuente estándar */
  font-weight: bold; /* Negrita para enfatizar el texto del botón */
  color: #ffffff; /* Texto blanco para contraste */
  background-color: #1DB954; /* Fondo verde característico de Spotify */
  border: none; /* Sin bordes adicionales */
  border-radius: 20px; /* Esquinas redondeadas para diseño moderno */
  cursor: pointer; /* Cambia el cursor al pasar el mouse */
  text-decoration: none; /* Elimina subrayado en enlaces */
  transition: background-color 0.3s; /* Transición suave al interactuar */
}

.card-button:hover {
  background-color: #1ed760; /* Verde más claro para efecto hover */
}

.logo-container {
  margin: 20px 0; /* Espaciado superior e inferior para separación */
  text-align: center; /* Centra el logo horizontalmente */
}

.logo-container img {
  max-width: 150px; /* Tamaño máximo del logo para adaptabilidad */
  height: auto; /* Mantiene la proporción original del logo */
}

.promo-text {
  text-align: center; /* Centra el texto publicitario */
  color: #b3b3b3; /* Texto menos brillante para diferenciarlo del contenido principal */
  margin: 15px 0; /* Espaciado superior e inferior */
}

.promo-text h2 {
  font-size: 24px; /* Tamaño de fuente grande para títulos publicitarios */
  font-weight: bold; /* Negrita para enfatizar el mensaje */
  color: #ffffff; /* Texto blanco para visibilidad */
}

.promo-text p {
  font-size: 16px; /* Tamaño estándar para párrafos publicitarios */
}

/* Diseño responsivo */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(45% - 20px); /* Ajusta las tarjetas al 45% del ancho del contenedor */
    max-width: 180px; /* Reduce el ancho máximo en pantallas pequeñas */
    height: 270px; /* Altura ajustada para proporcionalidad */
  }

  .card-image {
    width: 80px; /* Imagen más pequeña para dispositivos móviles */
    height: 80px;
  }

  .card-title {
    font-size: 14px; /* Fuente reducida para títulos */
  }

  .card-subtitle,
  .card-role {
    font-size: 12px; /* Fuente más pequeña para subtítulos y roles */
  }

  .card-button {
    padding: 8px 16px; /* Botón ligeramente más pequeño para pantallas móviles */
    font-size: 12px; /* Tamaño reducido para texto del botón */
  }
}

.search-bar {
  margin: 20px 0;
  text-align: center;
}

#search-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 2px solid #1DB954;
  border-radius: 20px;
  outline: none;
  background-color: #121212;
  color: #ffffff;
  transition: border-color 0.3s ease-in-out;
}

#search-input:focus {
  border-color: #1ed760;
}

.plan-compositor {
  position: absolute; /* Posiciona el botón de manera absoluta */
  top: 20px; /* Distancia desde la parte superior */
  left: 20px; /* Distancia desde la parte izquierda */
}

#plan-compositor-btn {
  padding: 10px 20px; /* Tamaño del botón */
  font-size: 14px; /* Tamaño del texto */
  font-weight: bold; /* Negrita para destacar el texto */
  color: #ffffff; /* Texto blanco */
  background-color: #1DB954; /* Fondo verde característico */
  border: none; /* Sin bordes */
  border-radius: 20px; /* Bordes redondeados */
  cursor: pointer; /* Cambia el cursor al pasar por el botón */
  transition: background-color 0.3s ease-in-out; /* Transición suave */
}

#plan-compositor-btn:hover {
  background-color: #1ed760; /* Verde más claro al pasar el mouse */
}


/* Estilo del fondo del modal */
/* Estilo del fondo del modal */
.modal {
  display: none; /* Oculta el modal por defecto */
  position: fixed; /* Fija el modal sobre la página */
  top: 0;
  left: 0;
  width: 100%; /* Cubre toda la ventana */
  height: 100%; /* Cubre toda la ventana */
  background: radial-gradient(circle, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)); /* Fondo con degradado */
  justify-content: center; /* Centra el contenido horizontalmente */
  align-items: center; /* Centra el contenido verticalmente */
  z-index: 1000; /* Asegura que esté encima de otros elementos */
  overflow-y: auto; /* Permite desplazarse si el contenido es largo */
  padding: 20px; /* Espaciado interno para móviles */
}

/* Estilo del contenido del modal */
.modal-content {
  background: linear-gradient(145deg, #1c1c1c, #2e2e2e); /* Fondo con degradado */
  color: #ffffff; /* Texto blanco */
  padding: 30px; /* Espaciado interno */
  border-radius: 20px; /* Bordes redondeados */
  width: 90%; /* Ancho dinámico */
  max-width: 600px; /* Máximo ancho para pantallas grandes */
  text-align: justify; /* Justifica el texto */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7); /* Sombra más definida */
  position: relative; /* Relativo para elementos internos */
  animation: slideIn 0.5s ease-in-out; /* Animación para la entrada del modal */
}

/* Animación para la entrada del modal */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botón de cerrar en la parte inferior */
.modal-close-btn {
  display: block;
  margin: 30px auto 0; /* Centra el botón */
  padding: 15px 30px; /* Tamaño del botón */
  font-size: 18px; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  color: #ffffff; /* Texto blanco */
  background: linear-gradient(145deg, #1DB954, #1ed760); /* Fondo con degradado verde */
  border: none; /* Sin bordes */
  border-radius: 30px; /* Bordes redondeados */
  cursor: pointer; /* Cambia el cursor al pasar por el botón */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
  transition: all 0.3s ease-in-out; /* Transición suave */
}

.modal-close-btn:hover {
  transform: scale(1.1); /* Amplía el botón al pasar el mouse */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5); /* Sombra más intensa */
}







/* Fondo del modal */
/* Fondo del modal */
.modal {
  display: none; /* Oculta el modal por defecto */
  position: fixed; /* Fija el modal sobre la página */
  top: 0;
  left: 0;
  width: 100%; /* Cubre toda la ventana */
  height: 100%; /* Cubre toda la ventana */
  background: rgba(0, 0, 0, 0.9); /* Fondo oscuro sólido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  z-index: 1000; /* Asegura que esté encima de otros elementos */
  overflow-y: auto; /* Permite desplazarse si el contenido es largo */
  padding: 10px; /* Espaciado interno */
}

/* Contenido del modal */
.modal-content {
  background: #121212; /* Fondo oscuro característico */
  color: #ffffff; /* Texto blanco */
  padding: 20px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  width: 95%; /* Ancho dinámico para móviles */
  max-width: 480px; /* Máximo ancho para dispositivos pequeños */
  text-align: center; /* Centra todo el texto */
  font-family: 'Arial', sans-serif; /* Fuente limpia y moderna */
  line-height: 1.5; /* Línea ajustada */
  letter-spacing: 0.4px; /* Separación sutil entre letras */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.8); /* Sombra profunda */
  position: relative; /* Posicionamiento interno */
}

/* Botón de cerrar en la parte inferior */
.modal-close-btn {
  display: block;
  margin: 20px auto 0; /* Centra el botón debajo del contenido */
  padding: 10px 20px; /* Tamaño compacto */
  font-size: 14px; /* Tamaño del texto */
  font-weight: bold; /* Texto en negrita */
  color: #ffffff; /* Texto blanco */
  background: #1DB954; /* Verde característico */
  border: none; /* Sin bordes */
  border-radius: 20px; /* Bordes redondeados */
  cursor: pointer; /* Cambia el cursor al pasar */
  transition: all 0.3s ease-in-out; /* Transiciones suaves */
}

.modal-close-btn:hover {
  transform: scale(1.05); /* Amplía ligeramente al pasar */
  background: #1ed760; /* Verde más claro al pasar */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5); /* Agrega sombra al botón */
}

/* Información dentro del modal */
.modal-info {
  margin-top: 10px; /* Espaciado superior reducido */
  padding: 15px; /* Espaciado interno compacto */
  border: 1px solid #1DB954; /* Borde verde delgado */
  border-radius: 8px; /* Bordes redondeados */
  background: rgba(255, 255, 255, 0.05); /* Fondo ligeramente translúcido */
  color: #b3b3b3; /* Texto gris claro */
  font-size: 14px; /* Tamaño del texto ajustado */
  line-height: 1.4; /* Altura de línea ajustada */
  letter-spacing: 0.3px; /* Separación leve entre letras */
  text-align: center; /* Centra todo el texto */
}

/* Texto destacado */
.modal-info .highlight {
  background: #1DB954; /* Fondo verde característico */
  color: #000000; /* Texto negro */
  padding: 10px 20px; /* Espaciado interno compacto */
  font-size: 15px; /* Tamaño del texto ajustado */
  font-weight: bold; /* Texto en negrita */
  border-radius: 15px; /* Bordes redondeados */
  text-align: center; /* Centra el texto */
  display: inline-block; /* Ajusta al tamaño del contenido */
  margin-top: 10px; /* Espaciado superior reducido */
}

/* Enlace de WhatsApp */
.whatsapp-link {
  display: flex; /* Centra el icono y texto horizontalmente */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  gap: 8px; /* Espaciado entre icono y texto */
  margin-top: 15px; /* Espaciado superior reducido */
  font-size: 14px; /* Tamaño del texto ajustado */
  font-weight: bold; /* Texto en negrita */
  color: #1DB954; /* Verde de WhatsApp */
  text-decoration: none; /* Sin subrayado */
}

.whatsapp-link img {
  width: 20px; /* Tamaño del icono en móviles */
  height: 20px; /* Tamaño del icono en móviles */
}

.whatsapp-link:hover {
  color: #1ed760; /* Verde más claro al pasar */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
  .modal-content {
    padding: 15px; /* Reduce el espaciado */
    max-width: 400px; /* Ajusta el ancho máximo */
  }

  .modal-info {
    font-size: 13px; /* Texto más pequeño */
    padding: 10px; /* Reduce el espaciado interno */
  }

  .modal-close-btn {
    font-size: 13px; /* Reduce el tamaño del texto */
    padding: 8px 15px; /* Tamaño más compacto */
  }

  .whatsapp-link {
    font-size: 12px; /* Texto más pequeño */
    gap: 6px; /* Espaciado más reducido */
  }

  .whatsapp-link img {
    width: 16px; /* Icono más pequeño */
    height: 16px;
  }
}


.whatsapp-link:hover {
  color: #1ed760; /* Verde más claro al pasar */
}

/* Responsividad del modal */
@media (max-width: 768px) {
  .modal-content {
    width: 95%; /* Reduce el ancho en pantallas pequeñas */
    padding: 15px; /* Ajusta el espaciado */
  }

  .modal-info {
    font-size: 13px; /* Reduce el tamaño del texto */
    line-height: 1.4; /* Ajusta la altura de línea */
  }

  .modal-close-btn {
    font-size: 14px; /* Reduce el tamaño del texto */
    padding: 8px 20px; /* Ajusta el tamaño del botón */
  }
}


/* Estilo del enlace de WhatsApp */
/* Enlace de WhatsApp */
.whatsapp-link {
  display: flex; /* Centra el icono y texto horizontalmente */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
  gap: 10px; /* Espaciado entre icono y texto */
  margin-top: 15px; /* Espaciado superior */
  font-size: 35px; /* Tamaño del texto más grande */
  font-weight: bold; /* Texto en negrita */
  color: #1DB954; /* Verde de WhatsApp */
  text-decoration: none; /* Sin subrayado */
}

.whatsapp-link img {
  width: 50px; /* Tamaño del icono ajustado */
  height: 50px; /* Tamaño del icono ajustado */
}

.whatsapp-link:hover {
  color: #1ed760; /* Verde más claro al pasar */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .whatsapp-link {
    font-size: 16px; /* Ajusta el tamaño del texto para pantallas pequeñas */
    gap: 8px; /* Reduce el espaciado entre icono y texto */
  }

  .whatsapp-link img {
    width: 20px; /* Icono más pequeño en móviles */
    height: 20px; /* Icono más pequeño en móviles */
  }
}

@media (max-width: 480px) {
  .whatsapp-link {
    font-size: 14px; /* Texto más pequeño en pantallas muy pequeñas */
    gap: 6px; /* Reduce el espaciado */
  }

  .whatsapp-link img {
    width: 18px; /* Icono reducido para pantallas pequeñas */
    height: 18px;
  }
}


/* Responsividad para pantallas pequeñas */
/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .modal-content {
    margin: 0 20px; /* Márgenes laterales en móviles */
    padding: 15px; /* Reduce el espaciado */
    max-width: calc(100% - 40px); /* Ancho ajustado con márgenes */
  }

  .modal-info {
    font-size: 13px; /* Texto más pequeño */
    padding: 10px; /* Reduce el espaciado interno */
  }

  .modal-close-btn {
    font-size: 13px; /* Reduce el tamaño del texto */
    padding: 8px 15px; /* Tamaño más compacto */
  }

  .whatsapp-link {
    font-size: 25px; /* Texto más pequeño */
    gap: 6px; /* Espaciado más reducido */
  }

  .whatsapp-link img {
    width: 25px; /* Icono más pequeño */
    height: 25px;
  }
}

/* Cinta de oferta */
.ribbon {
    position: absolute;
    top: 7px;
    left: -64px;
    background: #ff0000;
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 56px;
    transform: rotate(-45deg);
    z-index: 15;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 18px;
}

/* Responsividad de la cinta */
@media (max-width: 768px) {
  .ribbon {
    font-size: 12px; /* Ajusta el tamaño del texto */
    padding: 4px 12px; /* Reduce el espaciado */
    top: 15px; /* Ajusta la posición superior */
    left: -25px; /* Ajusta la posición izquierda */
  }
}