@import url(https://fonts.googleapis.com/css?family=Bad+Script);

*{
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

body{
	font-family: 'Bad Script', cursive;
	-webkit-font-smoothing: antialiased;
}

#wrapper{
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,hsla(0,63%,57%,1)), color-stop(100%,hsla(0,84%,33%,1)));
	background: -webkit-radial-gradient(center, ellipse cover, hsla(0,63%,57%,1) 0%,hsla(0,84%,33%,1) 100%);
	width: 100%;
	height: 2000px;  
}

#perspectiva{
	position:fixed;
	top:200px;
	left:50%;
	margin-left: -200px;
	perspective:1000;
}

#contenedor{
	box-shadow: 0px 2px 10px hsla(0,0%,10%,1);
	width: 400px;
	height: 280px;
	transform-style: preserve-3d;
}

.cara{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	backface-visibility:hidden;
}

.frontal{
	background: -webkit-linear-gradient(top, hsla(54,4%,85%,1) 0%,hsla(54,0%,96%,1) 50%,hsla(54,4%,80%,1) 100%);
	z-index: 20;
}

.frontal h1{
	color: hsla(0,0%,20%,1);
	text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
	font-size: 1em;
	text-align: center;
	margin-top: 110px;
}

.frontal h1 span{
	color: hsla(0,0%,50%,1);
	text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
	font-size: .8em;
	text-align: center;
}

.trasera{
	background: -webkit-linear-gradient(top, hsla(54,0%,96%,1) 0%, hsla(54,0%,56%,1) 100%);
	transform:rotateY(-180deg);
}

#abrir{
	position: absolute;
	top:0;
	left:0;
	height: 0;
	width: 80px;
	border-top: 175px solid hsla(0,0%,85%,1);
	border-left: 160px solid transparent;
	border-right: 160px solid transparent;
  transform-origin:center top;
	z-index: 10;
}

#partes{
	position: absolute;
	top:0px;
	left:0px;
	width: 0;
	height: 0;
	border-left: 200px solid hsla(0,0%,90%,1);
	border-top: 140px solid transparent;
	border-bottom: 140px solid transparent;
	z-index: 5;
}

#partes:after{
	content: "";
	position: absolute;
	bottom:-140px;
	left:-200px;
	height: 0;
	width: 80px;
	border-bottom: 175px solid hsla(0,0%,95%,1);
	border-left: 160px solid transparent;
	border-right: 160px solid transparent;
}

#partes:before{
	content: "";
	position: absolute;
	top:-140px;
	right:-200px;
	width: 0;
	height: 0;
	border-right: 200px solid hsla(0,0%,90%,1);
	border-top: 140px solid transparent;
	border-bottom: 140px solid transparent;
}

#carta{
	background: -webkit-linear-gradient(top, hsla(54,0%,96%,1) 0%,hsla(0,0%,98%,1) 70%,hsla(0,0%,95%,1) 100%);
	box-shadow: 0px 2px 5px hsla(0,0%,10%,1);
	border-radius: 5px;
	position: absolute;
	top:3px;
	left:0;
	margin: 0 0 0 5px;
	width: 390px;
	height: 200px;
	overflow: hidden;
	z-index: 1;
}

#carta hgroup{
	margin-top:20px;
}

#carta hgroup h1{
	font-size: 1.6em;
	color: hsla(0,0%,70%,1);
	text-align: center;
	text-shadow: 0px 2px 1px hsla(0,0%,100%,1);
}

#carta hgroup h2{
	font-size: 1em;
	color: hsla(0,63%,57%,1);
  margin-top:-20px;
	text-align: center;
	text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
}

#carta p{
	color: hsla(0,0%,20%,1);
	text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
	font-size: 0.85em;
	line-height:1.45em;
	margin: 30px 50px 0 50px;
}

#carta p:first-letter{
	color: hsla(0,63%,57%,1);
	text-shadow: 0px 2px 1px hsla(0,0%,100%,1);
	font-size: 2.5em;
	float: left;
	line-height:1.2em;
	padding:10px 10px 0 0;
}

/* ===== Reproductor de Música ===== */

/* Iframe de YouTube completamente oculto */
#yt-player-container {
  position: fixed;
  width: 1px;
  height: 1px;
  bottom: 0;
  right: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

#yt-iframe {
  width: 1px;
  height: 1px;
}

/* Botón flotante */
#music-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: hsla(0, 63%, 35%, 0.92);
  color: #fff;
  border-radius: 50px;
  padding: 10px 18px 10px 14px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 4px 18px hsla(0, 70%, 20%, 0.5);
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  font-family: 'Bad Script', cursive;
  user-select: none;
  animation: float-in 0.8s ease 0.5s both;
}

#music-btn:hover {
  background: hsla(0, 63%, 45%, 0.97);
  transform: scale(1.06);
  box-shadow: 0 6px 24px hsla(0, 70%, 25%, 0.65);
}

#music-btn.playing {
  background: hsla(0, 63%, 42%, 0.97);
  animation: pulse-ring 1.8s ease-in-out infinite;
}

#music-icon {
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.3s;
}

#music-btn.playing #music-icon {
  animation: spin-note 2s linear infinite;
}

#music-label {
  font-size: 0.82em;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

@keyframes float-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 4px 18px hsla(0,70%,25%,0.5); }
  50%       { box-shadow: 0 4px 32px hsla(0,70%,40%,0.85); }
}

@keyframes spin-note {
  0%   { transform: rotate(0deg)  scale(1); }
  50%  { transform: rotate(15deg) scale(1.15); }
  100% { transform: rotate(0deg)  scale(1); }
}

/* ===== Responsividad Móvil ===== */

@media screen and (max-width: 540px) {
  /* Hacer el botón de música más grande y céntrico */
  #music-btn {
    bottom: 30px;
    right: 50%;
    transform: translateX(50%);
    padding: 14px 24px 14px 20px;
    border-radius: 50px;
  }
  #music-btn:hover {
    transform: translateX(50%) scale(1.05);
  }
  #music-label {
    font-size: 0.95em;
  }
  #music-icon {
    font-size: 1.8em;
  }
}