/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
   
html, body {
  margin: 0;              
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: white;
  background: #9370DB; 
}

/* Estrellas */
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  box-shadow: 0 0 4px 1px white;
  animation-timing-function: ease-in-out;
}

@keyframes move1 {
  0% { transform: translate(0, 0); opacity: 0.8; }
  50% { transform: translate(10px, 15px); opacity: 0.4; }
  100% { transform: translate(0, 0); opacity: 0.8; }
}
@keyframes move2 {
  0% { transform: translate(0, 0); opacity: 0.7; }
  50% { transform: translate(-12px, 10px); opacity: 0.3; }
  100% { transform: translate(0, 0); opacity: 0.7; }
}
@keyframes move3 {
  0% { transform: translate(0, 0); opacity: 0.9; }
  50% { transform: translate(8px, -10px); opacity: 0.5; }
  100% { transform: translate(0, 0); opacity: 0.9; }
}
@keyframes move4 {
  0% { transform: translate(0, 0); opacity: 0.6; }
  50% { transform: translate(-7px, -12px); opacity: 0.2; }
  100% { transform: translate(0, 0); opacity: 0.6; }
}
@keyframes move5 {
  0% { transform: translate(0, 0); opacity: 0.75; }
  50% { transform: translate(15px, -7px); opacity: 0.35; }
  100% { transform: translate(0, 0); opacity: 0.75; }
}

/* Banner */
.header {
  position: relative;
  background-image: url('textura.jpg');
  width: 100%;
  height: 150px; /* altura banner */
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Onda en la parte inferior */
.onda {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* Título dentro del banner */
.header h1 {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 900;
  display: flex;
  gap: 0.15em;
  margin: 0;
  font-size: clamp(3rem, 6vw, 6rem);
}

.header h1 span {
  background: none;
  padding: 0;
  -webkit-text-stroke: 1.5px black;
  text-shadow:
    0 0 4px white,
    0 0 6px white,
    0 0 8px white;
}

/* Colores pastel por letra */
.header h1 span:nth-child(1) { color: #FFC1CC; }
.header h1 span:nth-child(2) { color: #FFD8A8; }
.header h1 span:nth-child(3) { color: #FFFACD; }
.header h1 span:nth-child(4) { color: #C1E1C1; }
.header h1 span:nth-child(5) { color: #AEEEEE; }
.header h1 span:nth-child(6) { color: #ADD8E6; }
.header h1 span:nth-child(7) { color: #B0C4DE; }
.header h1 span:nth-child(8) { color: #9A9AEB; }
.header h1 span:nth-child(9) { color: #B897F2; }
.header h1 span:nth-child(10) { color: #C19AC1; }

/* Área del contenido debajo del banner */
.main-content {
  min-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 20px;
}

/* Contenedor del producto con borde animado */
.container {
  position: relative;
  display: inline-block;
  background: #fff;
  z-index: 0;
  overflow: hidden;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.container::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 18px;
  background: linear-gradient(270deg, #ff99cc, #cc99ff, #99ccff, #ffcc99, #ff99cc);
  background-size: 1000% 1000%;
  animation: borderGlow 15s linear infinite;
  z-index: -1;
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.container img {
  width: 100%;
  max-width: 300px;
  border-radius: 15px;
  box-shadow: 0 0 12px 3px white;
}

.buy-button {
  display: inline-block;
  background: #FF69B4;
  color: white;
  font-weight: 700;
  padding: 12px 30px;
  font-size: 18px;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 12px #FF69B4;
}

.buy-button:hover {
  background: #FF85C1;
  box-shadow: 0 6px 18px #FF85C1;
}