/* =====================
   RESET & VARIABLES
   ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --violet:   #a855f7;
  --pink:     #ec4899;
  --rose:     #fda4af;
  --white:    #fdf4ff;
  --gold:     #fbbf24;
  --dur-fast: 0.3s;
  --dur-mid:  0.6s;
  --dur-slow: 0.8s;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: 'DM Sans', sans-serif;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* =====================
   LAYOUT
   ===================== */
#app { width: 100vw; height: 100vh; position: relative; overflow: hidden; }

.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 3.5rem 1.5rem 7rem;
  opacity: 0; pointer-events: none;
  text-align: center;
}
.slide.active       { opacity: 1; pointer-events: all; }
.slide-bg           { position: absolute; inset: 0; z-index: 0; }
.slide-content      { position: relative; z-index: 2; max-width: 400px; width: 100%; }

/* =====================
   PROGRESS BAR
   ===================== */
.prog-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; gap: 4px; padding: 10px 12px;
  transition: opacity var(--dur-fast);
}
.prog-seg {
  flex: 1; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px; overflow: hidden; cursor: pointer;
}
.prog-seg-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--violet), var(--pink));
  border-radius: 2px; transition: none;
  will-change: width;
}
.prog-seg.done  .prog-seg-fill  { width: 100%; }
.prog-seg.active .prog-seg-fill { transition: width linear; }

/* =====================
   CONTROLS
   ===================== */
.controls {
  position: fixed; bottom: 1.5rem; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.ctrl-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: white; width: 44px; height: 44px;
  border-radius: 50%; font-size: 1.1rem;
  cursor: pointer; backdrop-filter: blur(10px);
  transition: background var(--dur-fast), transform var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.ctrl-btn:hover    { background: rgba(255,255,255,0.22); transform: scale(1.08); }
.ctrl-btn:active   { transform: scale(0.96); }
.ctrl-btn:disabled { opacity: 0.3; pointer-events: none; }
.ctrl-next {
  background: linear-gradient(135deg, rgba(168,85,247,0.3), rgba(236,72,153,0.3));
  border-color: rgba(168,85,247,0.5);
  width: 56px; height: 56px; font-size: 1.2rem;
}

/* =====================
   PARTICLES
   ===================== */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.particle  { position: absolute; border-radius: 50%; animation: floatP linear infinite; opacity: 0; will-change: transform, opacity; }
@keyframes floatP {
  0%   { opacity: 0; transform: translateY(100vh) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-5vh) scale(1); }
}

/* =====================
   TEXT ANIMATIONS
   ===================== */
.word        { display: inline-block; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-mid) ease, transform var(--dur-mid) ease; }
.word.visible { opacity: 1; transform: translateY(0); }

.line-reveal        { opacity: 0; transform: translateX(-20px); transition: opacity var(--dur-mid) ease, transform var(--dur-mid) ease; }
.line-reveal.visible { opacity: 1; transform: translateX(0); }

.fade-up        { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.scale-in        { opacity: 0; transform: scale(0.7); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1); }
.scale-in.visible { opacity: 1; transform: scale(1); }

.glow-in        { opacity: 0; filter: blur(20px); transition: opacity var(--dur-slow) ease, filter var(--dur-slow) ease; }
.glow-in.visible { opacity: 1; filter: blur(0); }

/* =====================
   SONG PLAYER
   ===================== */
.song-player {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.2rem; padding: 0.5rem 0.9rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px; cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}
.song-player:hover          { background: rgba(255,255,255,0.12); transform: scale(1.02); }
.song-player.playing        { border-color: rgba(168,85,247,0.5); background: rgba(168,85,247,0.1); }
.sp-btn {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; transition: transform var(--dur-fast);
}
.song-player:hover .sp-btn  { transform: scale(1.1); }
.sp-info  { text-align: left; min-width: 0; flex: 1; }
.sp-name  { font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-why   { font-size: 0.65rem; color: rgba(255,255,255,0.4); margin-top: 0.1rem; font-style: italic; }
.sp-eq    { display: flex; gap: 2px; align-items: flex-end; height: 14px; flex-shrink: 0; opacity: 0; transition: opacity var(--dur-fast); }
.song-player.playing .sp-eq { opacity: 1; }
.sp-eq span { width: 3px; background: var(--violet); border-radius: 2px; animation: eqBar 0.7s ease-in-out infinite alternate; }
.sp-eq span:nth-child(2) { animation-delay: 0.2s; }
.sp-eq span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eqBar { from { height: 3px; } to { height: 12px; } }

/* =====================
   SLIDE BACKGROUNDS
   ===================== */
#s1  .slide-bg { background: radial-gradient(ellipse at 30% 40%, #3b0764 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, #500724 0%, transparent 55%), #000; }
#s2  .slide-bg { background: radial-gradient(ellipse at 20% 80%, #1e1b4b 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, #4a1942 0%, transparent 55%), #05030f; }
#s3  .slide-bg { background: radial-gradient(ellipse at 50% 0%, #0c4a6e 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, #4a1942 0%, transparent 55%), #05080f; }
#s4  .slide-bg { background: radial-gradient(ellipse at 50% 50%, #1c0533 0%, #000 70%); }
#s5  .slide-bg { background: radial-gradient(ellipse at 0% 100%, #7c2d12 0%, transparent 50%), radial-gradient(ellipse at 100% 0%, #4a1942 0%, transparent 50%), #080808; }
#s6  .slide-bg { background: radial-gradient(ellipse at 50% 30%, #0f172a 0%, #000 80%); }
#s7  .slide-bg { background: radial-gradient(ellipse at 30% 70%, #500724 0%, transparent 55%), radial-gradient(ellipse at 70% 30%, #3b0764 0%, transparent 55%), #050010; }
#s8  .slide-bg { background: radial-gradient(ellipse at 30% 30%, #1e3a5f 0%, transparent 55%), radial-gradient(ellipse at 70% 70%, #3b0764 0%, transparent 55%), #030810; }
#s9  .slide-bg { background: radial-gradient(ellipse at 50% 0%, #064e3b 0%, transparent 45%), radial-gradient(ellipse at 20% 100%, #3b0764 0%, transparent 45%), #020a06; }
#s10 .slide-bg { background: radial-gradient(ellipse at 50% 50%, #3b0764 0%, #000 70%); }
#s11 .slide-bg { background: radial-gradient(ellipse at 50% 50%, #1a0a2e 0%, #000 70%); }

/* =====================
   SLIDE 1
   ===================== */
#s1 .s1-deco  { margin-bottom: 1.5rem; font-size: 1.4rem; letter-spacing: 0.4em; }
#s1 .s1-label { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 1.2rem; }
#s1 .s1-name  { font-family: 'Playfair Display', serif; font-size: clamp(2.6rem,10vw,4.5rem); font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--violet), var(--pink), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
#s1 .s1-sub   { font-size: 0.9rem; color: rgba(255,255,255,0.45); margin-top: 1rem; letter-spacing: 0.15em; }

/* =====================
   SLIDE 2
   ===================== */
#s2 .s2-deco     { font-size: 2.5rem; display: inline-block; animation: spinSlow 10s linear infinite; margin-bottom: 1rem; }
@keyframes spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
#s2 .s2-big      { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem,5.5vw,2rem); font-style: italic; line-height: 1.6; }
#s2 .accent-word { color: var(--violet); font-weight: 700; font-style: normal; }
#s2 .s2-small    { font-size: 0.9rem; color: rgba(253,164,175,0.75); font-style: italic; margin-top: 1rem; line-height: 1.6; }

/* =====================
   SLIDE 3
   ===================== */
#s3 .s3-header { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 1.5rem; }
.tl-item   { display: flex; gap: 0.9rem; align-items: flex-start; text-align: left; margin-bottom: 1rem; }
.tl-dot    { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.dot-gray   { background: rgba(255,255,255,0.25); }
.dot-purple { background: var(--violet); }
.dot-pink   { background: var(--pink); }
.tl-label  { font-size: 0.7rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem; }
.tl-text   { font-size: 0.88rem; line-height: 1.65; color: rgba(255,255,255,0.82); }
.tl-line   { width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin-left: 4px; }

/* =====================
   SLIDE 4
   ===================== */
#s4 .s4-num    { font-family: 'Playfair Display', serif; font-size: clamp(6rem,25vw,10rem); font-weight: 700; color: rgba(255,255,255,0.04); line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; pointer-events: none; }
#s4 .s4-card   { position: relative; z-index: 3; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 1.5rem; backdrop-filter: blur(10px); }
#s4 .s4-card p { font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,0.85); }
#s4 .s4-accent { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-style: italic; color: var(--violet); display: block; margin-top: 1rem; }
#s4 .s4-label  { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 1rem; }
#s4 .s4-heart  { font-size: 1rem; color: rgba(168,85,247,0.8); font-style: italic; margin-top: 1.2rem; }

/* =====================
   SLIDE 5
   ===================== */
#s5 .s5-title      { font-family: 'Playfair Display', serif; font-size: clamp(1.1rem,4vw,1.4rem); font-style: italic; line-height: 1.55; margin-bottom: 0.5rem; }
#s5 .s5-nadie      { font-size: 0.78rem; color: rgba(255,255,255,0.32); letter-spacing: 0.08em; margin-bottom: 1rem; }
#s5 .s5-section    { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
#s5 .s5-sec-before { color: rgba(255,255,255,0.3); }
#s5 .s5-sec-after  { color: rgba(236,72,153,0.7); margin-top: 0.9rem; }
.grid2-before, .grid2-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.g-item            { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 0.55rem; text-align: center; }
.g-item.sp         { border-color: rgba(236,72,153,0.45); background: rgba(236,72,153,0.1); }
.g-icon            { font-size: 1.2rem; margin-bottom: 0.2rem; }
.g-label           { font-size: 0.68rem; color: rgba(255,255,255,0.42); line-height: 1.35; }
.g-item.sp .g-label { color: rgba(253,164,175,0.9); }
#s5 .s5-end        { font-size: 0.88rem; color: rgba(168,85,247,0.85); font-style: italic; margin-top: 0.8rem; }

/* =====================
   SLIDE 6
   ===================== */
#s6 .s6-moon  { font-size: 3.5rem; display: block; margin: 0 auto 0.8rem; animation: moonFloat 5s ease-in-out infinite; }
@keyframes moonFloat { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
#s6 .s6-quote { font-family: 'Playfair Display', serif; font-size: clamp(1.25rem,4.5vw,1.65rem); font-style: italic; line-height: 1.65; }
#s6 .s6-sub   { margin-top: 1.2rem; font-size: 0.88rem; color: rgba(253,164,175,0.7); line-height: 1.7; }
#s6 .s6-stars { margin-top: 1.2rem; font-size: 1.1rem; letter-spacing: 0.5em; animation: twinkle 2.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.4; } to { opacity: 1; } }

/* =====================
   SLIDE 7
   ===================== */
.wish-item { display: flex; align-items: center; gap: 0.75rem; text-align: left; margin-bottom: 0.65rem; }
.wish-icon { font-size: 1.2rem; flex-shrink: 0; }
.wish-text { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.85); }
#s7 .s7-ask { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem,5vw,1.7rem); font-style: italic; color: var(--pink); margin-top: 1.2rem; line-height: 1.4; }

/* =====================
   SLIDE 8
   ===================== */
#s8 .s8-title { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem,5vw,1.8rem); font-style: italic; line-height: 1.5; margin-bottom: 1.2rem; }
.future-list  { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; margin-bottom: 1rem; }
.future-item  { display: flex; align-items: flex-start; gap: 0.75rem; }
.future-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.future-text  { font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.82); }
#s8 .s8-end   { font-family: 'Playfair Display', serif; font-size: clamp(1rem,3.5vw,1.2rem); font-style: italic; color: var(--pink); line-height: 1.5; }

/* =====================
   SLIDE 9 — Playlist
   ===================== */
#s9 .pl-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.35); margin-bottom: 1.2rem; }
.song-row     { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; text-align: left; margin-bottom: 0.4rem; }
.s-num        { font-size: 0.7rem; color: rgba(255,255,255,0.25); width: 16px; flex-shrink: 0; }
.s-ico        { font-size: 1rem; flex-shrink: 0; }
.s-info       { flex: 1; min-width: 0; }
.s-name       { font-size: 0.85rem; font-weight: 500; }
.s-why        { font-size: 0.72rem; color: rgba(255,255,255,0.38); margin-top: 0.1rem; }

/* =====================
   SLIDE 10 — Pregunta
   ===================== */
#s10 .s10-text { font-family: 'Playfair Display', serif; font-size: clamp(1.05rem,4vw,1.4rem); font-style: italic; line-height: 1.75; margin-bottom: 1.8rem; }
#s10 .s10-em   { color: var(--pink); }
.choice-btn    { width: 100%; padding: 0.9rem 1.5rem; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500; cursor: pointer; border: none; transition: transform var(--dur-fast), opacity var(--dur-fast); letter-spacing: 0.02em; margin-bottom: 0.5rem; -webkit-tap-highlight-color: transparent; }
.c-yes         { background: linear-gradient(135deg, var(--violet), var(--pink)); color: white; }
.c-yes:hover   { transform: scale(1.02); opacity: 0.95; }
.c-talk        { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2) !important; color: rgba(255,255,255,0.85); }
.c-talk:hover  { background: rgba(255,255,255,0.14); }
#s10 .s10-from    { margin-top: 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.28); letter-spacing: 0.1em; }
#s10 #alreadyMsg  { display: none; margin-top: 0.75rem; font-size: 0.8rem; color: rgba(253,164,175,0.6); font-style: italic; }
.msg-wrap         { margin-bottom: 0.75rem; }
.msg-label        { font-size: 0.7rem; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; margin-bottom: 0.4rem; text-align: left; }
.msg-textarea     { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 0.85rem; padding: 0.75rem 1rem; resize: none; outline: none; line-height: 1.55; transition: border-color var(--dur-fast); }
.msg-textarea::placeholder { color: rgba(255,255,255,0.25); }
.msg-textarea:focus        { border-color: rgba(168,85,247,0.5); }

/* =====================
   SLIDE 11 — Cierre
   ===================== */
#s11 .s11-heart  { font-size: 3.5rem; display: block; margin: 0 auto 1.2rem; animation: heartbeat 1.6s ease-in-out infinite; }
#s11 .s11-thanks { font-family: 'Playfair Display', serif; font-size: clamp(1.2rem,4.5vw,1.7rem); font-style: italic; line-height: 1.75; }
#s11 .s11-from   { margin-top: 1.5rem; font-size: 0.82rem; color: rgba(255,255,255,0.35); letter-spacing: 0.15em; }
#s11 .s11-name   { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--violet); margin-top: 0.3rem; }
@keyframes heartbeat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } 70% { transform: scale(1); } }

/* =====================
   RESPONSE SCREEN
   ===================== */
#resp          { position: fixed; inset: 0; z-index: 300; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; background: #000; }
#resp.on       { display: flex; }
#resp .r-icon  { font-size: 4rem; margin-bottom: 1.5rem; animation: heartbeat 1.6s ease-in-out infinite; }
#resp .r-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-style: italic; margin-bottom: 1rem; }
#resp .r-text  { font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.7; }

/* =====================
   TRANSITION OVERLAY
   ===================== */
#overlay      { position: fixed; inset: 0; z-index: 150; background: #000; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); will-change: opacity; }
#overlay.show { opacity: 1; pointer-events: all; }