@charset "UTF-8";

:root {
  --bg-pink: #FF3399;
  --bg-green: #39FF14;
  --fuchsia: #FF007F;
  --yellow: #FFEA00;
  --blue: #0088FF;
  --cyan: #00E5FF;
  --lime: #39FF14;
  --green: #00D22B;
  --white: #FFFFFF;
  --black: #1A1A1A;
  --text-dark: #2D2D2D;
  
  --font-title: 'Fredoka', sans-serif;
  --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, var(--bg-pink) 0%, var(--bg-green) 100%);
  z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; /* Safari fix */
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s ease;
}

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

.envelope-icon { font-size: 5rem; color: var(--white); filter: drop-shadow(0px 8px 0px rgba(0,0,0,0.2)); margin-bottom: 20px; }
.splash-title { font-family: var(--font-title); font-size: 2.2rem; color: var(--white); text-align: center; text-shadow: 2px 2px 0px var(--black); margin-bottom: 30px;}

/* ----------------------------------- */
/* 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: 4rem;
  line-height: 1;
  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); }

.subtitle { 
  font-family: var(--font-title); font-size: 1.8rem; 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: 1.3rem;
  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: 2.2rem;
  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;
  line-height: 1.1;
}

.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.8rem; 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: 4rem; color: var(--bg-pink); line-height: 1; text-shadow: 2px 2px 0px var(--white); }

.countdown { display: flex; justify-content: center; align-items: center; gap: 15px; }
.time-box { display: flex; flex-direction: column; align-items: center; min-width: 50px; background: rgba(255,255,255,0.8); padding: 10px; 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.8rem; color: var(--blue); line-height: 1; }
.time-label { font-family: var(--font-title); font-size: 0.8rem; 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 28px;
  border-radius: 99px; font-family: var(--font-title); font-size: 1.3rem; 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(--yellow); color: var(--black); border: 4px solid var(--black); box-shadow: 0px 6px 0px var(--black); }
.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; }
}

/* ---------------------------------------- */
/* DESKTOP: Contenido centrado con sombra    */
/* El fondo sigue ocupando todo el viewport  */
/* ---------------------------------------- */
@media (min-width: 768px) {
  .container {
    /* Card centrado con ligera sombra */
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(2px);
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    margin-top: 60px;
    padding-bottom: 280px;
  }
}

/* ---------------------------------------- */
/* ACCESIBILIDAD: Reduce animaciones si el   */
/* usuario las tiene desactivadas en el SO   */
/* ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bounce-anim, .pulse-btn, .swing-anim, .character-overlay {
    animation: none;
  }
}