/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root{
  --cream:#eef3f7;
  --cream-2:#cddce7;
  --white:#fffaf6;
  --red-soft:#f0d0c2;
  --red-mid:#cf8a78;
  --wine:#6e1f33;
  --wine-deep:#4a1424;
  --wine-mid:#8c2f45;
  --red:#c81e3a;
  --red-deep:#8f0f26;
  --brick:#b8492f;
  --blue-soft:#dfe7f0;
  --blue-mid:#7ea3bf;
  --blue-deep:#2f4858;
  --gold:#c9a25c;
  --text-main:#3c2a2f;
  --text-soft:#7a6265;
  --shadow-soft: 0 10px 40px rgba(47,72,88,.14);
  --shadow-card: 0 6px 24px rgba(47,72,88,.10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ff-title: 'Playfair Display', 'Cormorant Garamond', serif;
  --ff-script: 'Cormorant Garamond', serif;
  --ff-body: 'DM Sans', sans-serif;
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;
  --ease: cubic-bezier(.22,.9,.32,1);
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{
  /* Evita que iOS haga zoom automático al enfocar inputs con font-size chico */
  -webkit-text-size-adjust:100%;
}
html,body{
  width:100%; max-width:100%; overflow-x:hidden; background:var(--cream);
}
body{
  font-family:var(--ff-body);
  color:var(--text-main);
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(circle at 12% 0%, rgba(126,163,191,.42), transparent 55%),
    radial-gradient(circle at 90% 15%, rgba(201,162,92,.14), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(47,72,88,.38), transparent 58%),
    linear-gradient(165deg, #eef3f7 0%, #d5e2ea 55%, #b8cddb 100%);
  position:relative;
  /* Zonas seguras para notch / home indicator en celulares */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
h1,h2,h3{ font-family:var(--ff-title); font-weight:600; color:var(--wine-deep); }
button{ font-family:var(--ff-body); cursor:pointer; border:none; background:none; touch-action:manipulation; }
img{ max-width:100%; display:block; }
a, button, .day-card, input{ touch-action:manipulation; }

::selection{ background:var(--red-mid); color:var(--wine-deep); }

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.app{
  max-width:560px;
  margin:0 auto;
  padding:32px 20px calc(80px + env(safe-area-inset-bottom));
  position:relative;
  z-index:1;
}

.hero{
  text-align:center;
  padding:36px 12px 20px;
}
.hero .eyebrow{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--white);
  font-weight:700;
  margin-bottom:14px;
  background:var(--wine-deep);
  padding:6px 16px;
  border-radius:999px;
}
.hero h1{
  font-size:clamp(1.7rem, 6vw, 2.4rem);
  line-height:1.25;
  font-style:italic;
  margin-bottom:10px;
}
.hero p.sub{
  color:var(--text-soft);
  font-size:.95rem;
  max-width:380px;
  margin:0 auto;
  line-height:1.6;
}

/* Countdown */
.countdown{
  margin:28px auto 8px;
  max-width:340px;
  background:rgba(255,250,246,.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(207,138,120,.5);
  border-radius:var(--radius-lg);
  padding:24px 20px;
  box-shadow:var(--shadow-soft);
  text-align:center;
}
.countdown .cd-label{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-soft);
  margin-bottom:10px;
}
.countdown .cd-days{
  font-family:var(--ff-title);
  font-size:clamp(2.6rem,12vw,3.4rem);
  color:var(--red);
  line-height:1;
  font-weight:600;
}
.countdown .cd-caption{
  font-size:.8rem;
  color:var(--text-soft);
  margin-top:6px;
  font-style:italic;
}
.countdown .cd-detail{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:.78rem;
  color:var(--wine-mid);
  font-weight:500;
}
.countdown .cd-detail span{
  background:var(--red-soft);
  padding:5px 10px;
  border-radius:999px;
}

/* Today spotlight */
.spotlight{
  margin:30px auto;
  max-width:400px;
  background:linear-gradient(160deg, var(--white), var(--red-soft));
  border-radius:var(--radius-lg);
  padding:26px 22px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(207,138,120,.6);
  position:relative;
  overflow:hidden;
  animation: spotlightPulse 4s ease-in-out infinite;
}
@keyframes spotlightPulse{
  0%,100%{ box-shadow:var(--shadow-soft); }
  50%{ box-shadow:0 14px 46px rgba(200,30,58,.18); }
}
.spotlight .sparkle{ font-size:1.5rem; margin-bottom:6px; }
.spotlight h3{ font-size:1.15rem; margin-bottom:4px; }
.spotlight .day-tag{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold); font-weight:700; margin-bottom:8px;
}
.spotlight p{ color:var(--text-soft); font-size:.88rem; margin-bottom:16px; }
.btn-primary{
  display:inline-block;
  background:linear-gradient(135deg, var(--wine), var(--red));
  color:var(--white);
  padding:13px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.02em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast);
  box-shadow:0 8px 22px rgba(200,30,58,.28);
}
.btn-primary:hover{ transform:translateY(-2px); background:linear-gradient(135deg, var(--wine-mid), var(--red)); }
.btn-primary:active{ transform:scale(.96); }

/* ==========================================================================
   3. CARDS / TIMELINE
   ========================================================================== */
.timeline-title{
  text-align:center;
  margin:44px 0 22px;
  font-size:1.1rem;
  font-style:italic;
  color:var(--wine-deep);
}
.timeline{
  position:relative;
  padding-left:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.timeline::before{
  content:'';
  position:absolute;
  top:6px; bottom:6px; left:50%;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, var(--red-mid), var(--gold) 50%, var(--red-mid));
  opacity:.5;
  z-index:0;
}

.day-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--white);
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin:6px 0;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(207,138,120,.4);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  opacity:0;
  transform:translateY(16px);
  animation: cardIn .7s var(--ease) forwards;
}
.day-card:active{ transform:scale(.98); }

@keyframes cardIn{
  to{ opacity:1; transform:translateY(0); }
}

.day-card .badge{
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem;
  background:var(--cream-2);
  border:1px solid rgba(207,138,120,.6);
}
.day-card .info{ flex:1; min-width:0; }
.day-card .info .label{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:2px;
}
.day-card .info h4{
  font-family:var(--ff-title); font-size:1.02rem; color:var(--wine-deep); margin-bottom:3px;
}
.day-card .info p{
  font-size:.8rem; color:var(--text-soft); line-height:1.4;
}
.day-card .chev{ color:var(--red-mid); font-size:1.2rem; flex-shrink:0; }

.day-card.locked{
  background:rgba(255,255,255,.5);
  cursor:default;
}
.day-card.locked .badge{ background:rgba(0,0,0,.03); filter:grayscale(.3); opacity:.6;}
.day-card.locked .info h4{ color:var(--text-soft); font-weight:500; }
.day-card.locked .info p{ font-style:italic; opacity:.75;}

.day-card.unlocked{ cursor:pointer; }
.day-card.unlocked:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(200,30,58,.18); }
.day-card.unlocked .badge{
  background:var(--red-soft);
  animation: softGlow 2.6s ease-in-out infinite;
}
@keyframes softGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,30,58,.35); }
  50%{ box-shadow:0 0 0 8px rgba(200,30,58,0); }
}

.day-card.discovered{ cursor:pointer; }
.day-card.discovered .badge{ background:var(--red); color:var(--white); }
.day-card.discovered .info h4{ color:var(--wine-deep); }

.day-card.final{
  background:linear-gradient(160deg, var(--wine), var(--red-deep));
  border:none;
}
.day-card.final .info .label{ color:var(--red-soft); }
.day-card.final .info h4{ color:var(--white); }
.day-card.final .info p{ color:rgba(255,255,255,.75); }
.day-card.final .badge{ background:rgba(255,255,255,.15); }
.day-card.final .chev{ color:rgba(255,255,255,.6); }

/* floating hearts (ambient) */
.floating-hearts{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.floating-hearts span{
  position:absolute;
  bottom:-40px;
  font-size:1rem;
  opacity:0;
  animation: floatUp linear forwards;
  color:var(--red-mid);
}
.floating-hearts span.is-red{ color:var(--red); }
@keyframes floatUp{
  0%{ opacity:0; transform:translateY(0) translateX(0) rotate(0deg); }
  10%{ opacity:.55; }
  90%{ opacity:.35; }
  100%{ opacity:0; transform:translateY(-100vh) translateX(20px) rotate(30deg); }
}

/* ==========================================================================
   4. MODAL
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(58,20,30,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-med) var(--ease);
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }

.modal-card{
  width:100%; max-width:420px;
  background:linear-gradient(165deg, var(--white), var(--cream));
  border-radius:32px;
  padding:40px 30px 32px;
  text-align:center;
  position:relative;
  box-shadow:0 30px 80px rgba(74,20,36,.35);
  transform:scale(.85) translateY(30px);
  opacity:0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  max-height:88vh;
  overflow-y:auto;
}
.modal-overlay.active .modal-card{ transform:scale(1) translateY(0); opacity:1; }

.modal-card .m-day{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:18px;
  opacity:0; animation: fadeSlideUp .6s var(--ease) forwards; animation-delay:.15s;
}
.modal-card .m-icon{
  font-size:3.4rem; margin-bottom:14px; display:inline-block;
  opacity:0; transform:scale(.5);
  animation: iconPop .7s var(--ease) forwards; animation-delay:.35s;
}
.modal-card .m-photo{
  display:none; /* se activa por JS solo si la imagen carga bien */
  width:100%;
  max-width:260px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:22px;
  margin:0 auto 18px;
  box-shadow:0 14px 34px rgba(74,20,36,.22);
  border:3px solid var(--white);
  opacity:0; transform:scale(.85);
  animation: iconPop .8s var(--ease) forwards; animation-delay:.2s;
}
.modal-card .m-photo.show{ display:block; }
.modal-card .m-title{
  font-style:italic; font-size:1.05rem; color:var(--text-soft); margin-bottom:8px;
  opacity:0; animation: fadeSlideUp .6s var(--ease) forwards; animation-delay:.55s;
}
.modal-card .m-gift{
  font-size:1.7rem; margin-bottom:16px; color:var(--red-deep);
  opacity:0; animation: fadeSlideUp .6s var(--ease) forwards; animation-delay:.7s;
}
.modal-card .m-message{
  font-size:.95rem; line-height:1.65; color:var(--text-main); margin-bottom:14px;
  opacity:0; animation: fadeSlideUp .6s var(--ease) forwards; animation-delay:.9s;
}
.modal-card .m-final-phrase{
  font-style:italic; font-size:.85rem; color:var(--text-soft); margin-bottom:26px;
  opacity:0; animation: fadeSlideUp .6s var(--ease) forwards; animation-delay:1.1s;
}
.modal-card .m-close{
  opacity:0; animation: fadeSlideUp .6s var(--ease) forwards; animation-delay:1.3s;
}

@keyframes fadeSlideUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes iconPop{
  0%{ opacity:0; transform:scale(.4) rotate(-12deg); }
  60%{ opacity:1; transform:scale(1.15) rotate(4deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

.modal-particles{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:32px;
}
.modal-particles span{
  position:absolute;
  font-size:1rem;
  opacity:0;
  animation: particleFloat 1.8s ease-out forwards;
}
@keyframes particleFloat{
  0%{ opacity:0; transform:translateY(0) scale(.5); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-120px) scale(1.1); }
}

/* Gate: entrada de la letra del día */
.m-gate{
  opacity:0;
  animation: fadeSlideUp .5s var(--ease) forwards;
}
.m-gate .gate-day{
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:16px;
}
.m-gate .gate-icon{ font-size:2.4rem; margin-bottom:14px; }
.m-gate .gate-text{
  font-size:.92rem; color:var(--text-soft); line-height:1.65; margin-bottom:24px;
}
.gate-input{
  width:66px; height:66px;
  font-family:var(--ff-title);
  font-size:1.9rem;
  text-align:center;
  text-transform:uppercase;
  color:var(--wine-deep);
  background:var(--white);
  border:2px solid var(--red-mid);
  border-radius:16px;
  margin:0 auto 20px;
  display:block;
  outline:none;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.gate-input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 5px rgba(200,30,58,.22);
}
.gate-error{
  min-height:1.3em;
  font-size:.82rem;
  color:var(--wine-mid);
  font-style:italic;
  margin-top:4px;
}
@keyframes shakeX{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-6px); }
  40%,60%{ transform:translateX(6px); }
}
.modal-card.shake{ animation: shakeX .5s; }

.m-content{ display:none; }

/* ==========================================================================
   5. FINAL CELEBRATION SCREEN
   ========================================================================== */
.finale{
  display:none;
  min-height:100vh;
  min-height:100dvh;
  align-items:center; justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:calc(40px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(200,30,58,.25), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(126,163,191,.18), transparent 55%),
    linear-gradient(160deg, var(--wine-deep) 0%, #2c0a15 60%, #1d0a10 100%);
}
.finale.active{ display:flex; }
.finale .f-cake{
  font-size:4rem; margin-bottom:18px;
  animation: cakeBounce 1.4s var(--ease) forwards;
}
@keyframes cakeBounce{
  0%{ transform:scale(0) rotate(-20deg); opacity:0; }
  60%{ transform:scale(1.2) rotate(8deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); }
}
.finale h1{
  color:var(--white);
  font-size:clamp(1.8rem,7vw,2.6rem);
  font-style:italic;
  margin-bottom:14px;
  opacity:0; animation: fadeSlideUp .8s var(--ease) forwards; animation-delay:.4s;
}
.finale .f-sub{
  font-size:1.15rem; color:var(--red-soft); font-weight:600; margin-bottom:30px;
  opacity:0; animation: fadeSlideUp .8s var(--ease) forwards; animation-delay:.7s;
}
.finale .f-msg{
  max-width:420px; color:rgba(255,250,246,.82); font-size:.95rem; line-height:1.8; margin-bottom:12px;
  opacity:0; animation: fadeSlideUp .8s var(--ease) forwards; animation-delay:1.1s;
}
.finale .f-thanks{
  max-width:420px; color:var(--white); font-weight:600; font-size:1rem; margin-top:18px;
  opacity:0; animation: fadeSlideUp .8s var(--ease) forwards; animation-delay:1.6s;
}

.envelopes{
  display:flex;
  gap:16px;
  margin-top:34px;
  opacity:0; animation: fadeSlideUp .8s var(--ease) forwards; animation-delay:2.1s;
}
.envelope-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:rgba(255,250,246,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(207,138,120,.5);
  border-radius:var(--radius-md);
  padding:16px 20px;
  box-shadow:var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.envelope-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(200,30,58,.18); }
.envelope-btn:active{ transform:scale(.96); }
.envelope-icon{ font-size:1.8rem; }
.envelope-label{
  font-size:.75rem;
  font-weight:600;
  color:var(--wine-deep);
  line-height:1.4;
}

.envelope-password-input{
  width:auto;
  min-width:160px;
  max-width:220px;
  font-size:1.1rem;
  letter-spacing:.1em;
  text-transform:none;
}

.confetti-piece{
  position:fixed; top:-20px; z-index:200; pointer-events:none;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  to{ transform:translateY(110vh) rotate(540deg); opacity:.2; }
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (min-width:640px){
  .app{ padding-top:56px; }
  .hero h1{ font-size:2.7rem; }
}

/* Pantallas muy angostas (iPhone SE, celulares gama baja) */
@media (max-width:360px){
  .modal-card{ padding:32px 20px 26px; }
  .day-card{ padding:14px 14px; gap:12px; }
  .countdown{ padding:20px 16px; }
  .spotlight{ padding:22px 16px; }
}

/* Pantallas bajas (landscape en celular) */
@media (max-height:480px){
  .modal-card{ max-height:94vh; }
}

footer.credit{
  width:fit-content;
  margin:50px auto 0;
  text-align:center;
  font-size:.72rem;
  color:var(--white);
  letter-spacing:.05em;
  background:var(--wine-deep);
  padding:6px 16px;
  border-radius:999px;
  opacity:.85;
}

/* ==========================================================================
   8. BARRA DE PRUEBAS (solo TEST_MODE)
   ========================================================================== */
#devToolbar{
  position:fixed;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:500;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(30,10,16,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:var(--ff-body);
  font-size:.8rem;
}
#devToolbar .dev-toolbar-tag{
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red);
  font-weight:700;
  margin-right:2px;
}
#devToolbar button{
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.1rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
#devToolbar button:hover{ background:var(--red); }
#devToolbar button:active{ transform:scale(.9); }
#devToolbar #devToolbarDate{
  min-width:88px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#devToolbar .dev-reset{
  width:auto;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
  margin-left:2px;
}

/* ==========================================================================
   9. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .floating-hearts{ display:none; }
}