@charset "UTF-8";

:root {
  --bg-pink: #E40000; /* Mario Red */
  --bg-green: #1E8C1A; /* Luigi Green */
  --fuchsia: #E40000; /* Mario Red */
  --yellow: #FFD700; /* Coin Yellow */
  --blue: #5C94FC; /* Sky Blue */
  --cyan: #5C94FC; /* Sky Blue */
  --lime: #1E8C1A; /* Luigi Green */
  --green: #1E8C1A; /* Luigi Green */
  --white: #FFFFFF;
  --black: #000000;
  --text-dark: #1A1A1A;
  
  --font-title: 'Press Start 2P', cursive;
  --font-body: 'Quicksand', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  overflow-x: hidden;
  /* Soft fallback color if background fails to load */
  background-color: #f7fceb; 
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------- */
/* SPLASH SCREEN (Tap to Enter / Play) */
/* ----------------------------------- */
#splash-screen {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: linear-gradient(135deg, #5C94FC 0%, #1E8C1A 100%);
  z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s ease;
  overflow: hidden;
}

#splash-screen.hide-splash {
  transform: translateY(-110vh);
  opacity: 0;
  pointer-events: none;
}

.floating-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}

.float-star {
  position: absolute; bottom: -50px; left: var(--x);
  font-size: 2.5rem; color: rgba(255, 255, 255, 0.4);
  animation: floatUp 5s linear infinite; animation-delay: var(--d);
}

@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg) scale(0.5); opacity: 0; }
  10% { opacity: 1; transform: translateY(-10vh) rotate(36deg) scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(-110vh) rotate(360deg) scale(1.5); opacity: 0; }
}

.gift-container {
  font-size: 8rem; color: var(--yellow);
  filter: drop-shadow(0px 15px 0px rgba(0,0,0,0.3));
  margin-bottom: 20px; z-index: 1; position: relative;
  transition: transform 0.3s ease;
}

.gift-container.burst {
  animation: burstOut 0.6s ease-in forwards;
}

@keyframes burstOut {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  30% { transform: scale(1.2) rotate(15deg); filter: brightness(1.3); }
  100% { transform: scale(3) rotate(-10deg); opacity: 0; filter: brightness(2); }
}

.splash-title { font-family: var(--font-title); font-size: 1.5rem; line-height: 1.5; color: var(--white); text-align: center; text-shadow: 4px 4px 0px var(--black); margin-bottom: 30px; z-index: 1; padding: 0 10px;}

.wiggle-anim { animation: wiggle 2s infinite ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-8deg) scale(1.05); } 50% { transform: rotate(8deg) scale(1.05); } 75% { transform: rotate(-4deg) scale(1); } }

/* ----------------------------------- */
/* Fondo del Usuario Inteligente */
/* ----------------------------------- */
.parallax-bg {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -3;
}

/* En Computadora (Panorámica): Mostramos la imagen entera y centrada */
@media (min-width: 768px) {
  .parallax-bg {
    background-image: url('assets/fondo-principal.jpg');
    background-size: cover;
    background-position: center top;
  }
}

/* En Celular (Vertical): Truco de Máscaras para "exprimir" el centro y rescatar las orillas */
@media (max-width: 767px) {
  .parallax-bg {
    /* Color crema suave para el rellenar el canal central */
    background-color: #fdfaf2; 
  }
  
  /* Lado Izquierdo (Fútbol) atraído hacia la vista */
  .parallax-bg::before {
    content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%;
    background-image: url('assets/fondo-principal.jpg');
    background-size: auto 100vh;
    background-position: left center;
    background-repeat: no-repeat;
    /* Un desvanecido para que el fútbol se funda con el centro sin cortes duros */
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
  }
  
  /* Lado Derecho (Flores) atraído hacia la vista */
  .parallax-bg::after {
    content: ""; position: absolute; top: 0; right: 0; width: 55%; height: 100%;
    background-image: url('assets/fondo-principal.jpg');
    background-size: auto 100vh;
    background-position: right center;
    background-repeat: no-repeat;
    /* Un desvanecido para que las flores se fundan con el centro sin cortes duros */
    -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%);
    mask-image: linear-gradient(to left, black 50%, transparent 100%);
  }
}

/* ----------------------------------- */
/* Main Container & Layout */
/* ----------------------------------- */
.container { 
  position: relative; width: 100%; max-width: 450px; 
  margin: 0 auto; padding: 25px 15px; z-index: 1; 
  text-align: center;
  /* Espacio extra masivo al final para permitir al usuario hacer scroll y subir el bóton de whatsapp 
     hacia el área de luz, despejando a los personajes y el fondo inferior */
  padding-bottom: 320px;
}

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-40 { margin-top: 40px; }
.pt-40 { padding-top: 40px; }
.pb-40 { padding-bottom: 40px; }
.mb-20 { margin-bottom: 20px; }
.mx-auto { margin-inline: auto; }

/* ----------------------------------- */
/* Typography con Máxima Legibilidad sobre Fondo */
/* ----------------------------------- */
/* Gruesos contornos blancos + sombras para separar del fondo brillante */
.title {
  font-family: var(--font-title);
  font-size: 2rem;
  line-height: 1.5;
  text-shadow: 3px 3px 0px var(--white), -3px -3px 0px var(--white), 3px -3px 0px var(--white), -3px 3px 0px var(--white), 0px 8px 15px rgba(0,0,0,0.3);
  margin-bottom: 10px;
}
.text-pink { color: var(--bg-pink); }
.text-lime { color: var(--green); }
.text-dark { color: var(--black); }
.text-blue { color: var(--blue); }
.text-fuchsia { color: var(--fuchsia); }

.subtitle { 
  font-family: var(--font-title); font-size: 1.2rem; line-height: 1.4; color: var(--blue);
  text-shadow: 2px 2px 0px var(--white), -2px -2px 0px var(--white), 2px -2px 0px var(--white), -2px 2px 0px var(--white), 0px 4px 6px rgba(0,0,0,0.2); 
  margin-bottom: 25px; 
}

.header-tag {
  background: var(--yellow); font-family: var(--font-title); color: var(--black); padding: 8px 25px;
  border-radius: 20px; border: 3px solid var(--black); display: inline-block; font-size: 1rem;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.3); transform: rotate(-3deg); margin-bottom: 20px;
}

.fun-phrase {
  font-family: var(--font-title);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--fuchsia);
  text-shadow: 2px 2px 0px var(--white), -2px -2px 0px var(--white), 2px -2px 0px var(--white), -2px 2px 0px var(--white);
  margin-bottom: 10px;
}

.fun-description {
  font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; color: var(--black);
  text-shadow: 1px 1px 0px var(--white), -1px -1px 0px var(--white), 1px -1px 0px var(--white), -1px 1px 0px var(--white);
}

.large-text {
  font-family: var(--font-title); font-size: 1.2rem; line-height: 1.5; color: var(--black); margin-bottom: 5px;
  text-shadow: 2px 2px 0px var(--white), -2px -2px 0px var(--white), 2px -2px 0px var(--white), -2px 2px 0px var(--white);
}
.med-text { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); text-shadow: 1px 1px 0px var(--white), -1px -1px 0px var(--white); }

/* ----------------------------------- */
/* Elements */
/* ----------------------------------- */
.age-badge {
  background: var(--yellow); width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto; border: 4px solid var(--white); box-shadow: 0 8px 15px rgba(0,0,0,0.2); position: relative; z-index: 2; transform: rotate(5deg);
}
.age-number { 
  font-family: var(--font-title); 
  font-size: 2.8rem; 
  color: var(--fuchsia); 
  line-height: 1; 
  text-shadow: 2px 2px 0px var(--white), -2px -2px 0px var(--white), 2px -2px 0px var(--white), -2px 2px 0px var(--white), 0px 5px 10px rgba(0,0,0,0.3); 
}

.countdown { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;}
.time-box { display: flex; flex-direction: column; align-items: center; min-width: 45px; background: rgba(255,255,255,0.8); padding: 8px; border-radius: 15px; box-shadow: 0px 4px 10px rgba(0,0,0,0.1); border: 2px solid var(--white);}
.time-val { font-family: var(--font-title); font-size: 1.2rem; color: var(--blue); line-height: 1; }
.time-label { font-family: var(--font-title); font-size: 0.6rem; text-transform: uppercase; color: var(--text-dark); margin-top: 5px;}

.info-cluster { display: flex; flex-direction: column; align-items: center;}
.bubbly-icon { width: 65px; height: 65px; border-radius: 50%; border: 4px solid var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0px 6px 15px rgba(0,0,0,0.2); color: var(--white); margin-bottom: 5px;}
.bg-cyan { background: var(--cyan); }
.bg-lime { background: var(-- lime); color: var(--black); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 20px;
  border-radius: 99px; font-family: var(--font-title); font-size: 1rem; line-height: 1.5; text-decoration: none; cursor: pointer;
  border: none; box-shadow: 0px 8px 20px rgba(0,0,0,0.2); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn:active { transform: scale(0.95); box-shadow: 0px 2px 5px rgba(0,0,0,0.2); }
.btn-yellow { background: var(--bg-pink); color: var(--white); border: 4px solid var(--yellow); box-shadow: 0px 6px 0px var(--yellow); }
.btn-green { background: #25D366; color: var(--white); font-size: 1.4rem;}

/* Botón suave para no saturar diseño */
.btn-white-glass { 
  background: rgba(255, 255, 255, 0.85); color: var(--blue); 
  border: 2px solid var(--white); backdrop-filter: blur(5px);
}

/* Animations */
@keyframes heartbeatPulse { 0%, 100% { transform: scale(1) rotate(5deg); } 50% { transform: scale(1.1) rotate(5deg); } }
@keyframes btnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes swing { 0% { transform: rotate(0deg); } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
@keyframes popIn { 0% { transform: scale(0); opacity: 0;} 80% { transform: scale(1.1); opacity: 1;} 100% { transform: scale(1); opacity: 1;} }
@keyframes gentleHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.bounce-anim { animation: heartbeatPulse 1.5s infinite; }
.pulse-btn { animation: btnPulse 2s infinite; }
.swing-anim { animation: swing 2s infinite ease-in-out; }
.pop-anim { animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

/* ----------------------------------- */
/* Personajes de Sofi y Mat */
/* ----------------------------------- */
.character-overlay {
  position: fixed;
  bottom: -15px; /* Ligeramente cortados en la base para hacerlos sentir plantados */
  z-index: 1000;
  pointer-events: none; /* Que no estorben los taps en la pantalla */
  filter: drop-shadow(2px 5px 8px rgba(0,0,0,0.4));
  animation: gentleHover 4s ease-in-out infinite;
}

/* Posicionamiento Inteligente: En computadora cerca del centro, en celular en los bordes */
@media (min-width: 768px) {
  .char-mat { left: calc(50% - 360px); width: 220px; }
  .char-sofi { right: calc(50% - 360px); width: 220px; }
}

@media (max-width: 767px) {
  .char-mat { left: -5px; width: 140px; }
  .char-sofi { right: -5px; width: 140px; }
}

/* Hacerlos más pequeños en pantallas de celulares angostas */
@media (max-width: 380px) {
  .char-mat { width: 110px; }
  .char-sofi { width: 110px; }
}