* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body, html {
      height: 100%;
      overflow: hidden;
	  background:rgba(255, 214, 236, 0.3);
	  cursor: url('images/puntero-heart.png'), auto;
    }

    .video-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

   /* video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 60%;
      min-height: 60%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      object-fit: cover;
	  
    }*/

	.video-wrapper {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);

	  width: 100%;
	  max-width: 1000px;

	  border-radius: 20px;

	  background: radial-gradient(circle at 30% 30%, #ffb6e6, #ff9ecf, #ffd6ec);

	  box-shadow:
		0 0 30px rgba(255, 105, 180, 0.8),
		0 0 60px rgba(255, 182, 230, 0.7),
		0 0 100px rgba(255, 214, 236, 0.6);

	  animation: cottonCandyGlow 2.5s ease-in-out infinite alternate;
	}

	.video-wrapper video {
	  width: 100%;
	  height: auto;
	  display: block;
	  border-radius: 20px;
	}

	@keyframes cottonCandyGlow {
	  from {
		box-shadow:
		  0 0 10px rgba(255, 105, 180, 0.6),
		  0 0 20px rgba(255, 182, 230, 0.5),
		  0 0 35px rgba(255, 214, 236, 0.4);
	  }
	  to {
		box-shadow:
		  0 0 60px rgba(255, 105, 180, 1),
		  0 0 100px rgba(255, 182, 230, 0.9),
		  0 0 160px rgba(255, 214, 236, 0.8);
	  }
	}

    /* Overlay oscuro */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.0);
    }

    /* Contenido centrado */
    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      text-align: center;
      padding: 20px;
    }

    .content h1 {
	  font-size: 3rem;
	  letter-spacing: 2px;
	  color: #fff;
	  text-shadow: 
		-1px -1px 0 #9d004f,
		 1px -1px 0 #ffd9ec,
		-1px  1px 0 #9d004f,
		 1px  1px 0 #ffd9ec;

	}

    .content p {
      margin-top: 10px;
      font-size: 1.4rem;
	  text-shadow: 
		-1px -1px 0 #9d004f,
		 1px -1px 0 #9d004f,
		-1px  1px 0 #9d004f,
		 1px  1px 0 #9d004f;
    }

    

	#soundBtn {
	  position: fixed;
	  top: 10px;
	  right: 20px;

	  width: 50px;
	  height: 50px;

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

	  border-radius: 50%;
	  border: none;

	  background: rgba(0,0,0,0.2);
	  color: #fff;

	  backdrop-filter: blur(6px);

	  cursor: pointer;
	  font-size: 18px;

	  z-index: 999;

	  transition: 0.3s;
	}

	#soundBtn:hover {
	  background: rgba(255,255,255,0.4);
	  transform: scale(1.1);
	}

	/* Redes sociales */
	.socials {
	  margin-top: 20px;
	  display: flex;
	  justify-content: center;
	  gap: 20px;
	}

	.socials a {
	  font-size: 28px;
	  width: 60px;
	  height: 60px;
	  
	  display: flex;
	  align-items: center;
	  justify-content: center;

	  border-radius: 50%;
	  border: 2px solid #c9e0fc;

	  background: rgba(255,255,255,0.2);
	  backdrop-filter: blur(5px);

	  transition: 0.3s;
	}

	/* Instagram color */
	.socials a.ig {
	  color: #E1306C;
	}

	/* TikTok color */
	.socials a.tt {
	  color: #3aaeb8;
	}

	.socials a:hover {
	  transform: scale(1.2);
	  background: rgba(255,255,255,0.3);
	  border-color: #ffd6ec;
	}
	
	/* WhatsApp color */
	.socials a.wa {
	  color: #25D366;
	}


	/* Responsive */
    @media (max-width: 768px) {
	  body, html {
		  background:rgba(255, 214, 236, 0.2);
	   }
      .video-wrapper {
		width: 95%;
		max-width: none;
		top: 18%;
	  }

	  .video-wrapper video {
		width: 100%;
		height: auto;
	  }

	   .overlay {
		  background: rgba(0,0,0,0);
		}
	  
	  .content {
		  top: 45%;
		  left:50%;
		  padding: 10px;
		  width:100%;
		}
	  
	  .content h1 {
        font-size: 2.5rem;
      }

      .content p {
        font-size: 1.5rem;
      }

	  #soundBtn {
		color:#ffffff;
		border: solid 1px #c9e0fc;
	  }

	 
    }