/* ===================== VARIABLES ===================== */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --rosa: #ff6f91;
  --rosa-fuerte: #ff2e63;
  --rojo: #c9184a;
  --vino: #3d0c1f;
  --vino-oscuro: #1a0510;
  --dorado: #ffd166;
  --crema: #fff5f7;
  --font-titulo: 'Dancing Script', cursive;
  --font-texto: 'Poppins', 'Segoe UI', sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  font-family: var(--font-texto);
  background: linear-gradient(180deg, var(--vino-oscuro), var(--vino) 6%, var(--vino) 94%, var(--vino-oscuro));
  color: var(--crema);
  overflow-x:hidden;
  cursor: default;
}

::selection{background:var(--rosa-fuerte); color:#fff;}

a{color:inherit;}

img, video{max-width:100%; display:block;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--vino-oscuro);}
::-webkit-scrollbar-thumb{background:var(--rosa-fuerte); border-radius:10px;}

/* ===================== UTILIDADES ===================== */
.seccion{
  position:relative;
  padding: 100px 20px;
  max-width:1100px;
  margin:0 auto;
}

.titulo-seccion{
  font-family: var(--font-titulo);
  font-size: clamp(2.2rem, 6vw, 4rem);
  text-align:center;
  color: var(--dorado);
  margin-bottom: 40px;
  text-shadow: 0 0 20px rgba(255,209,102,.4);
}

.reveal{
  opacity:0;
  transform: translateY(60px);
  transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-left{transform: translateX(-80px);}
.reveal-left.in-view{transform:translateX(0);}
.reveal-right{transform: translateX(80px);}
.reveal-right.in-view{transform:translateX(0);}
.reveal-zoom{transform: scale(.7);}
.reveal-zoom.in-view{transform:scale(1);}

/* ===================== FONDO CORAZONES / CURSOR ===================== */
#hearts-bg{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;
}
.heart-float{
  position:absolute;
  bottom:-40px;
  color: var(--rosa);
  opacity:.75;
  font-size: 20px;
  animation: floatUp linear forwards;
  filter: drop-shadow(0 0 6px rgba(255,111,145,.6));
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity:0;}
  10%{opacity:.85;}
  100%{ transform: translateY(-110vh) translateX(var(--drift,20px)) rotate(360deg); opacity:0;}
}

.cursor-heart{
  position:fixed;
  pointer-events:none;
  z-index:9999;
  color: var(--rosa-fuerte);
  font-size:16px;
  animation: cursorFade .9s ease-out forwards;
}
@keyframes cursorFade{
  0%{ opacity:1; transform: translateY(0) scale(1);}
  100%{ opacity:0; transform: translateY(-40px) scale(.4);}
}

/* ===================== HERO ===================== */
#hero{
  position:relative;
  height:100vh;
  min-height:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 20px;
}
#hero-bg{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  opacity:.28;
  filter: blur(1px) saturate(1.1);
  z-index:0;
}
#hero-bg img{width:100%; height:100%; object-fit:cover;}
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 40%, rgba(61,12,31,.55), rgba(26,5,16,.95));
  z-index:1;
}
.hero-contenido{position:relative; z-index:2;}
.hero-eyebrow{
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:.8rem;
  color: var(--dorado);
  margin-bottom:14px;
  opacity:.9;
}
.hero-titulo{
  font-family: var(--font-titulo);
  font-size: clamp(3rem, 10vw, 6.5rem);
  line-height:1;
  background: linear-gradient(90deg, var(--dorado), var(--rosa), var(--rosa-fuerte));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: brillo 5s ease-in-out infinite;
}
@keyframes brillo{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.35);}
}
.hero-sub{
  margin-top:18px;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  max-width:600px;
  color:#ffe3ea;
}
.hero-fecha{
  margin-top:26px;
  font-size:1.1rem;
  color: var(--dorado);
  border:1px solid rgba(255,209,102,.5);
  padding:10px 22px;
  border-radius:50px;
  display:inline-block;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,.03);
}
.scroll-cue{
  position:absolute;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
  font-size:.85rem;
  color:#ffd8e0;
  opacity:.85;
}
.scroll-cue .flecha{
  font-size:1.6rem;
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(10px);}
}

/* ===================== CARTA ===================== */
#carta{
  text-align:center;
}
.carta-caja{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,209,102,.25);
  border-radius:24px;
  padding: 50px 40px;
  max-width:750px;
  margin:0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.carta-texto{
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height:1.9;
  color:#ffeef2;
}
.carta-firma{
  margin-top:30px;
  font-family: var(--font-titulo);
  font-size:2rem;
  color: var(--dorado);
}

/* ===================== TIMELINE ===================== */
.timeline{
  position:relative;
  margin-top:30px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, var(--dorado), var(--rosa-fuerte));
  transform:translateX(-50%);
  opacity:.5;
}
.timeline-item{
  position:relative;
  width:50%;
  padding: 20px 40px;
  margin-bottom:10px;
}
.timeline-item:nth-child(odd){left:0; text-align:right;}
.timeline-item:nth-child(even){left:50%; text-align:left;}
.timeline-dot{
  position:absolute;
  top:26px;
  width:18px; height:18px;
  background: var(--rosa-fuerte);
  border:3px solid var(--dorado);
  border-radius:50%;
  box-shadow:0 0 14px rgba(255,111,145,.8);
}
.timeline-item:nth-child(odd) .timeline-dot{right:-9px;}
.timeline-item:nth-child(even) .timeline-dot{left:-9px;}
.timeline-fecha{
  font-family: var(--font-titulo);
  font-size:1.5rem;
  color: var(--dorado);
}
.timeline-texto{color:#ffeef2; opacity:.9; margin-top:4px;}

@media(max-width:700px){
  .timeline::before{left:18px;}
  .timeline-item, .timeline-item:nth-child(even){
    width:100%; left:0; text-align:left; padding-left:46px; padding-right:10px;
  }
  .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot{left:9px; right:auto;}
}

/* ===================== VIDEO SECTIONS ===================== */
.video-seccion{text-align:center;}
.video-marco{
  max-width:520px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  border: 3px solid var(--rosa-fuerte);
  box-shadow: 0 0 50px rgba(255,46,99,.35);
}
.video-marco video{width:100%; display:block; background:#000;}
.video-caption{margin-top:18px; font-family:var(--font-titulo); font-size:1.4rem; color:var(--dorado);}

/* ===================== GALERIA ===================== */
.galeria{
  columns: 4 220px;
  column-gap:14px;
}
.galeria img{
  width:100%;
  margin-bottom:14px;
  border-radius:14px;
  break-inside:avoid;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition: transform .4s ease, box-shadow .4s ease;
  cursor:pointer;
}
.galeria img:hover{
  transform: scale(1.04) rotate(-.5deg);
  box-shadow: 0 14px 34px rgba(255,46,99,.35);
}
.galeria .reveal{transition-delay: var(--d, 0s);}

/* Lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(10,2,6,.92);
  display:none; align-items:center; justify-content:center;
  z-index:5000; padding:30px;
}
#lightbox.activo{display:flex;}
#lightbox img{max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 0 60px rgba(255,111,145,.4);}
#lightbox-cerrar{
  position:absolute; top:22px; right:30px;
  font-size:2rem; color:#fff; cursor:pointer; background:none; border:none;
}

/* ===================== RAZONES (FLIP CARDS) ===================== */
.razones-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:22px;
}
.flip-card{
  perspective:1200px;
  height:220px;
}
.flip-inner{
  position:relative; width:100%; height:100%;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.flip-card:hover .flip-inner, .flip-card.girada .flip-inner{transform: rotateY(180deg);}
.flip-front, .flip-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  padding:18px; text-align:center;
}
.flip-front{
  background: linear-gradient(160deg, rgba(255,111,145,.18), rgba(255,209,102,.08));
  border:1px solid rgba(255,209,102,.3);
  font-family:var(--font-titulo);
  font-size:1.6rem;
  color:var(--dorado);
}
.flip-back{
  background: linear-gradient(160deg, var(--rosa-fuerte), var(--rojo));
  color:#fff;
  transform: rotateY(180deg);
  font-size:1rem;
  line-height:1.5;
  box-shadow: 0 10px 30px rgba(255,46,99,.4);
}

/* ===================== JUEGOS ===================== */
#juegos{text-align:center;}
.progreso-wrap{
  position:sticky; top:10px; z-index:50;
  max-width:520px; margin:0 auto 50px;
  background: rgba(26,5,16,.75);
  border:1px solid rgba(255,209,102,.35);
  border-radius:50px;
  padding:12px 20px;
  backdrop-filter: blur(6px);
}
.progreso-texto{font-size:.95rem; margin-bottom:8px; color:var(--dorado);}
.progreso-barra{
  height:12px; border-radius:10px; background:rgba(255,255,255,.1); overflow:hidden;
}
.progreso-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--rosa-fuerte), var(--dorado));
  transition: width .6s ease;
}

.juegos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:20px;
}
.juego-card{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,209,102,.25);
  border-radius:18px;
  padding:26px 16px;
  cursor:pointer;
  transition: transform .3s ease, border-color .3s ease;
  position:relative;
}
.juego-card:hover{transform:translateY(-6px); border-color: var(--rosa-fuerte);}
.juego-card .emoji{font-size:2.4rem; margin-bottom:10px; display:block;}
.juego-card .nombre{font-weight:600; font-size:1rem;}
.juego-card .check{
  position:absolute; top:10px; right:14px;
  font-size:1.3rem; opacity:0; transform:scale(0);
  transition: all .4s ease;
}
.juego-card.completo{border-color: var(--dorado); background: linear-gradient(160deg, rgba(255,209,102,.18), rgba(255,111,145,.08));}
.juego-card.completo .check{opacity:1; transform:scale(1);}

/* ===================== MODAL DE JUEGO ===================== */
#game-modal{
  position:fixed; inset:0; z-index:6000;
  display:none; align-items:center; justify-content:center;
  background:rgba(10,2,6,.92);
  padding:20px;
}
#game-modal.activo{display:flex;}
.game-modal-box{
  background: linear-gradient(160deg, var(--vino), var(--vino-oscuro));
  border:1px solid rgba(255,209,102,.35);
  border-radius:20px;
  max-width:560px; width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:30px 24px;
  position:relative;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}
.game-cerrar{
  position:absolute; top:14px; right:18px;
  background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer;
  opacity:.7;
}
.game-cerrar:hover{opacity:1;}
.game-titulo{
  font-family: var(--font-titulo);
  font-size:2rem; color:var(--dorado); text-align:center; margin-bottom:6px;
}
.game-instrucciones{
  text-align:center; font-size:.9rem; opacity:.8; margin-bottom:18px;
}
.game-ganado{
  text-align:center; margin-top:18px; padding:14px; border-radius:12px;
  background: linear-gradient(90deg, var(--rosa-fuerte), var(--dorado));
  color:#fff; font-weight:600; display:none;
}
.game-ganado.mostrar{display:block; animation: popIn .5s ease;}
@keyframes popIn{0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;}}

.btn-amor{
  background: linear-gradient(90deg, var(--rosa-fuerte), var(--rojo));
  color:#fff; border:none; padding:10px 22px; border-radius:50px;
  font-family:var(--font-texto); font-weight:600; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-amor:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,46,99,.4);}

/* --- Memoria --- */
.memoria-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.memoria-carta{
  aspect-ratio:1; border-radius:10px; background:linear-gradient(160deg,var(--rosa-fuerte),var(--rojo));
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; cursor:pointer;
  transform-style:preserve-3d; transition: transform .4s ease; user-select:none;
}
.memoria-carta.volteada, .memoria-carta.encontrada{background:linear-gradient(160deg,var(--dorado),var(--rosa));}
.memoria-carta .cara{display:none;}
.memoria-carta.volteada .cara, .memoria-carta.encontrada .cara{display:block;}
.memoria-carta:not(.volteada):not(.encontrada) .cara{display:none;}

/* --- Puzzle --- */
.puzzle-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:300px; margin:0 auto;
}
.puzzle-pieza{
  aspect-ratio:1; background:linear-gradient(160deg,var(--rosa-fuerte),var(--dorado));
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;
  border-radius:8px;cursor:pointer;color:#fff;
}
.puzzle-vacio{background:transparent; cursor:default;}

/* --- Atrapa corazones --- */
.catch-area{
  position:relative; height:340px; background:rgba(255,255,255,.04); border-radius:14px; overflow:hidden;
}
.catch-item{
  position:absolute; font-size:1.8rem; cursor:pointer; user-select:none; top:-40px;
}
.catch-score{text-align:center; margin-top:10px; font-size:1.1rem; color:var(--dorado);}

/* --- Quiz --- */
.quiz-pregunta{font-size:1.1rem; margin-bottom:14px; text-align:center;}
.quiz-opciones{display:flex; flex-direction:column; gap:10px;}
.quiz-opcion{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  padding:10px 14px; border-radius:10px; cursor:pointer; text-align:left;
}
.quiz-opcion.correcta{background:rgba(255,209,102,.35); border-color:var(--dorado);}
.quiz-opcion.incorrecta{background:rgba(201,24,74,.4); border-color:var(--rojo);}
.quiz-progreso{text-align:center; margin-bottom:10px; opacity:.8; font-size:.85rem;}

/* --- Tic tac toe --- */
.ttt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:260px; margin:0 auto;}
.ttt-celda{
  aspect-ratio:1; background:rgba(255,255,255,.06); border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:2rem;cursor:pointer;
}
.ttt-estado{text-align:center; margin-top:12px; font-size:1rem; color:var(--dorado);}

/* --- Simon --- */
.simon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:320px; margin:0 auto;}
.simon-boton{
  height:85px; border-radius:14px; cursor:pointer; opacity:.55; transition:opacity .15s ease, transform .15s ease;
  border:none;
}
.simon-boton.activo{opacity:1; transform:scale(.96);}
.simon-b1{background:#ff6f91;} .simon-b2{background:#ffd166;} .simon-b3{background:#ff2e63;} .simon-b4{background:#f8c8dc;}
.simon-b5{background:#c77dff;} .simon-b6{background:#4cc9f0;}
.simon-info{text-align:center; margin-top:12px;}

/* --- Sopa de letras --- */
.sopa-grid{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:3px; max-width:340px; margin:0 auto 14px;
  font-family:monospace;
}
.sopa-celda{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:5px; cursor:pointer; font-weight:700; font-size:.9rem;
  user-select:none;
}
.sopa-celda.seleccionada{background:rgba(255,209,102,.5);}
.sopa-celda.encontrada{background:var(--rosa-fuerte); color:#fff;}
.sopa-palabras{text-align:center; font-size:.9rem; opacity:.85;}
.sopa-palabras span{margin:0 6px;}
.sopa-palabras span.hecha{color:var(--dorado); text-decoration:line-through;}

/* --- Rasca y gana --- */
.rasca-wrap{position:relative; max-width:300px; margin:0 auto;}
.rasca-mensaje{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-titulo); font-size:1.5rem; color:var(--dorado);
  background:linear-gradient(160deg,var(--rosa-fuerte),var(--rojo)); border-radius:14px; padding:10px;
}
.rasca-canvas{position:relative; border-radius:14px; touch-action:none; cursor:grab;}

/* --- Ordenar historia --- */
.orden-lista{list-style:none; max-width:400px; margin:0 auto;}
.orden-item{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15);
  padding:12px 14px; margin-bottom:8px; border-radius:10px; cursor:grab;
}
.orden-item.arrastrando{opacity:.4;}
.orden-item.correcto{border-color:var(--dorado); background:rgba(255,209,102,.2);}

/* --- Caza corazones --- */
.caza-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:280px; margin:0 auto;}
.caza-hoyo{
  aspect-ratio:1; background:rgba(255,255,255,.05); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; cursor:pointer; overflow:hidden;
}
.caza-hoyo .corazon{transform:scale(0); transition: transform .15s ease;}
.caza-hoyo.arriba .corazon{transform:scale(1);}
.caza-score{text-align:center; margin-top:10px; color:var(--dorado);}

/* ===================== PREMIO FINAL ===================== */
#prize-overlay{
  position:fixed; inset:0; z-index:9000; display:none;
  align-items:center; justify-content:center; text-align:center;
  background: radial-gradient(circle at 50% 30%, rgba(255,111,145,.35), rgba(10,2,6,.96));
  padding:20px;
}
#prize-overlay.activo{display:flex;}
#confetti-canvas{position:fixed; inset:0; z-index:9001; pointer-events:none;}
.prize-caja{
  position:relative; z-index:9002;
  max-width:640px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 2px solid var(--dorado);
  border-radius:26px;
  padding:50px 34px;
  box-shadow: 0 0 100px rgba(255,209,102,.5);
  animation: prizeIn .8s cubic-bezier(.2,.8,.3,1);
}
@keyframes prizeIn{
  0%{transform:scale(.5) rotate(-6deg); opacity:0;}
  100%{transform:scale(1) rotate(0); opacity:1;}
}
.prize-titulo{
  font-family:var(--font-titulo);
  font-size: clamp(2rem, 6vw, 3.2rem);
  color: var(--dorado);
  margin-bottom:14px;
}
.prize-monto{
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  font-weight:700;
  color:#fff;
  text-shadow: 0 0 30px rgba(255,111,145,.8);
  margin-bottom:14px;
}
.prize-sub{font-size:1.1rem; color:#ffeef2; margin-bottom:26px;}

/* ===================== FOOTER ===================== */
footer{
  text-align:center; padding:60px 20px 40px; opacity:.85; font-size:.9rem;
}
.footer-corazon{font-size:1.6rem; margin-bottom:10px;}
.reset-link{
  display:inline-block; margin-top:20px; font-size:.75rem; opacity:.4; cursor:pointer; text-decoration:underline;
}

@media(max-width:600px){
  .seccion{padding:70px 16px;}
  .galeria{columns: 2 140px;}
}