/* Estilos globales */
:root{
	--navy-dark: #071229; /* azul marino medio oscuro */
	--navy-light: #123b5a; /* un tin más claro */

	/* Variables de colores para Papá Noel y elementos */
	--skin: #f8d9be; /* tono de piel */
	--black: #111111; /* negro afilado para ojos/guantes */
	--white: #ffffff; /* blanco para barba/pompon */
	--red: #c62828; /* rojo de la ropa */
	--gold: #d1a642; /* dorado para hebilla */
}

html, body{
	height: 0;
	margin: 0;
	display: flex;
	justify-content: center;
}
@font-face {
	font-family: "fuentenavidad";
	src: url(cristina.ttf);
}

h1{
	font-family: "fuentenavidad";
	font-weight: lighter;
	font-size: 150px;
	animation: navidad 2s infinite ease-in-out;
}

@keyframes navidad {
  0%   { color: #1f7a1f; }   /* verde pino */
  25%  { color: #f2f2f2; }   /* blanco cálido */
  50%  { color: #d4af37; }   /* dorado suave */
  75%  { color: #b22222; }   /* rojo vino */
  100% { color: #1f7a1f; }   /* verde pino */
}

body{
	min-height: 50vh;
	/* Gradiente diagonal 135deg: de oscuro a más claro */
	background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
	/* Fallback para navegadores antiguos */
	background: -webkit-linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-light) 100%);
	background-color: var(--navy-dark);
	color: #f3f6f8; /* texto claro para buen contraste */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Nieve sencilla: una sola animación y variables por copo */
.copoNieve{
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	/* Forzar en primer plano */
	z-index: 9999999;
} 

.copoNieve > div{
	position: absolute;
	top: 2vh; /* visible por defecto */
	left: var(--left, 50%);
	width: var(--size, 12px);
	height: var(--size, 12px);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(255,255,255,0.18);
	opacity: var(--opacity, 0.9);
	transform-origin: center;
	animation: fall var(--duration, 10s) linear infinite;
	animation-delay: var(--delay, 0s);
	/* Mantener propiedades visibles durante la animación */
	animation-fill-mode: both;
	animation-play-state: running;
}

/* Variables por cada copo: posición, tamaño, duración, delay y amplitud de balanceo */
.copoNieve > div:nth-child(1){ --left:5%;  --size:10px; --duration:6s;  --delay:-2s;  --sway:18px; }
.copoNieve > div:nth-child(2){ --left:15%; --size:16px; --duration:10s; --delay:-6s;  --sway:-28px; }
.copoNieve > div:nth-child(3){ --left:25%; --size:10px; --duration:8s; --delay:-1s;  --sway:14px; }
.copoNieve > div:nth-child(4){ --left:35%; --size:14px; --duration:7s;  --delay:-3.5s; --sway:-12px; }
.copoNieve > div:nth-child(5){ --left:50%; --size:18px; --duration:9s; --delay:-5.6s; --sway:22px; }
.copoNieve > div:nth-child(6){ --left:65%; --size:13px; --duration:10s; --delay:-2.2s; --sway:-16px; }
.copoNieve > div:nth-child(7){ --left:75%; --size:10px; --duration:8s; --delay:-4.8s; --sway:10px; }
.copoNieve > div:nth-child(8){ --left:85%; --size:15px; --duration:11s; --delay:-7.5s; --sway:-26px; }
.copoNieve > div:nth-child(9){ --left:92%; --size:11px; --duration:6s; --delay:-1.2s; --sway:8px; }
.copoNieve > div:nth-child(10){ --left:3%;  --size:9px;  --duration:7s;  --delay:-3s;  --sway:-14px; }
.copoNieve > div:nth-child(11){ --left:12%; --size:12px; --duration:9s;  --delay:-5s;  --sway:20px; }
.copoNieve > div:nth-child(12){ --left:22%; --size:11px; --duration:8s;  --delay:-2s;  --sway:-10px; }
.copoNieve > div:nth-child(13){ --left:40%; --size:13px; --duration:9.5s;--delay:-6.2s;--sway:18px; }
.copoNieve > div:nth-child(14){ --left:58%; --size:9px;  --duration:7.5s;--delay:-1.6s;--sway:-8px; }
.copoNieve > div:nth-child(15){ --left:68%; --size:16px; --duration:10s; --delay:-4.1s; --sway:26px; }
.copoNieve > div:nth-child(16){ --left:78%; --size:12px; --duration:8.5s; --delay:-2.7s; --sway:-18px; }
.copoNieve > div:nth-child(17){ --left:88%; --size:10px; --duration:7.2s; --delay:-3.3s; --sway:12px; }
.copoNieve > div:nth-child(18){ --left:96%; --size:11px; --duration:6.5s; --delay:-1.1s; --sway:-6px; }

@keyframes fall{
	0%   { transform: translateY(-10vh) translateX(0); opacity: var(--opacity, 0.9); }
	50%  { transform: translateY(55vh) translateX(var(--sway, 20px)) rotate(180deg); opacity: var(--opacity, 0.9); }
	90%  { opacity: var(--opacity, 0.9); }
	100% { transform: translateY(120vh) translateX(calc(var(--sway, 20px) * -1)); opacity: 0; }
}

/* Nota: se ha eliminado la regla de prefers-reduced-motion para permitir animaciones en este ejemplo. Si quieres restaurarla por accesibilidad, dímelo y la volvemos a añadir. */

.papanoel{
	position: absolute;
	size: 50%;
	top: 25vh;
}
.papanoel img{
	width: 50vh;
	height: 60vh;
	animation: papi 2s infinite;
}
@keyframes papi{
	50%{transform: scale(1.1);}
}

/* Contenedor */
.card{
	position: relative;
	width: 360px;
	height: 460px;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,.12);
	display: grid;
	place-items: center;
	padding: 10px;
}
.caption{
	position: absolute;
	bottom: 12px;
	left: 0;
	right: 0;
	text-align: center;
	font-weight: 600;
	color: #6b6b6b;
	font-size: 14px;
	letter-spacing: .2px;
}


 /* Regalos: mismo tamaño y diseño, colores distintos */
.regalos{
    position: fixed;
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(0.9 * var(--regalo-size, 11vmin));
    align-items: flex-end;
    z-index: 10000001;
    pointer-events: auto;
	
}
@keyframes rotar {
	10%{transform: rotate(0deg);}
  20%{transform: rotate(-10deg);}
	30%{transform: rotate(10deg);}
  40%{transform: rotate(-10deg);}
  50%{transform: rotate(10deg);}
  60%{transform: rotate(-10deg);}
  70%{transform: rotate(10deg);}
  80%{transform: rotate(-10deg);}
  90%{transform: rotate(0deg);}
}

@keyframes parar {
  100%{transform: rotate(0deg);}
}
.regalo {
	animation: rotar 1s infinite;
    --regalo-size: 11vmin;
    width: var(--regalo-size);
    height: var(--regalo-size);
    position: relative;
    border-radius: 8%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.18) inset;
    transition: transform 220ms ease, box-shadow 220ms ease;
    overflow: visible;
}

/* Cintas: vertical y horizontal */
.regalo::before, .regalo::after{
    content: "";
    position: absolute;
    background: var(--ribbon, #fff);
    z-index: 2;
    border-radius: 2px;
}
.regalo::before{ /* vertical */
    width: calc(var(--regalo-size) * 0.22);
    height: 110%;
    left: 50%;
    transform: translateX(-50%);
    top: -5%;
}
.regalo::after{ /* horizontal */
    height: calc(var(--regalo-size) * 0.22);
    width: 110%;
    top: 50%;
    transform: translateY(-50%);
    left: -5%;
}

/* Lazo central (dos hojas) */
.regalo .lazo, .regalo .lazo::before, .regalo .lazo::after{
    position: absolute;
    width: calc(var(--regalo-size) * 0.32);
    height: calc(var(--regalo-size) * 0.18);
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.regalo .lazo::before, .regalo .lazo::after{
    content: "";
    position: absolute;
    background: var(--ribbon, #fff);
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 40% 40%;
}
.regalo .lazo::before{ transform: translateX(-40%) rotate(-30deg); }
.regalo .lazo::after{ transform: translateX(40%) rotate(30deg); }

/* Variantes de color (misma forma, distinto color de caja y lazo) */
.regalo.r1{ background: #c62828; --ribbon: #ffffff; } /* rojo + blanco */
.regalo.r2{ background: #0b8457; --ribbon: #ffd54d; } /* verde + dorado */
.regalo.r3{ background: #1565c0; --ribbon: #ff7043; } /* azul + naranja */
.regalo.r4{ background: #6a1b9a; --ribbon: #ff80ab; } /* morado + rosa */

/* Todos los regalos usan el mismo tamaño; .regalo.grande eliminada */

/* Nuevas variantes de color */
.regalo.r5{ background: #ffb300; --ribbon: #00695c; } /* dorado + verde oscuro */
.regalo.r6{ background: #0097a7; --ribbon: #ffeb3b; } /* turquesa + amarillo */

/* Interacción ligera */
.regalo:hover{
  animation: parar infinite;
  animation-play-state: paused;
  transform: translateY(-8%) scale(1.04);
  box-shadow: 0 16px 28px rgba(0,0,0,0.45);
}

/* Ajuste: todos los regalos son grandes y están igualmente espaciados */
.regalos{ gap: calc(0.9 * var(--regalo-size, 11vmin)); }

/* Ajustes para pantallas pequeñas */
@media (max-width: 520px){
    .regalo{ --regalo-size: 13vmin; }
    .regalos{ gap: calc(0.55 * var(--regalo-size)); bottom: 4%; }
}

/* Overlay oscuro */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: grid;
  place-items: center;
  z-index: 10000050;
}

/* Oculto */
.hidden{
  display: none;
}

/* Popup regalo */
.popup{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #fff;
  color: #222;
  padding: 28px 36px;
  border-radius: 20px;
  min-width: 280px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  transform: scale(0);
  animation: aparecer 0.6s ease forwards;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}


/* Animación */
@keyframes aparecer{
  0%{
    transform: scale(0) translateY(60px);
    opacity: 0;
  }
  100%{
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
 .popup img{
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-bottom: 16px;
  animation: flotar 1.2s ease-in-out infinite alternate;
}

@keyframes flotar{
  from{ transform: translateY(0); }
  to{ transform: translateY(-12px); }
}

@media (max-width: 770px){
  h1{
    margin-top: 20px;
    font-size: 90px;
    animation-duration: 3s;
    text-align: center;
  }
  .papanoel{
	margin: 0px 60px 60px 60px;
  }
  .papanoel img{
    width: 100%;
    height: 100%;
  }

  .regalos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    bottom: 7%;
    justify-items: center;
  }

  .regalo{
    --regalo-size: 16vmin;
  }
}

@media (max-width: 900px) and (min-width: 771px){
  h1{
    font-size: 110px;
    animation-duration: 3s;
    text-align: center;
    margin: 30px 60px 60px 60px;
  }
  .papanoel{
	  margin: 60px;
  }
  .papanoel img{
    width: 100%;
    height: 100%;
  }

  .regalos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    bottom: 7%;
    justify-items: center;
  }

  .regalo{
    --regalo-size: 16vmin;
  }
}