/* ============================================================
   Calendario de Mariana — estilos
   Paleta: Rosa #F4C2D7 · Crema #FFF7F2 · Lavanda #DCD6F2
           Dorado #E4C08A · Vino #8C5670 · Tinta #4A3A42
   ============================================================ */

:root{
  --rosa:#F4C2D7;  --crema:#FFF7F2;  --lavanda:#DCD6F2;
  --dorado:#E4C08A; --vino:#8C5670;  --tinta:#4A3A42;
  --muted:#B0989F; --body:#5C4A53;
  --f-script:'Parisienne',cursive;
  --f-serif:'Cormorant Garamond',serif;
  --f-sans:'Jost',sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:#EFE6E0;
  font-family:var(--f-sans);
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  min-height:100dvh;
}

/* ---------- Contenedor a pantalla completa ---------- */
.device{
  width:100%; height:100dvh;
  background:transparent;
}
.screen{
  position:relative; width:100%; height:100%;
  overflow:hidden;
  background:linear-gradient(180deg,#FFF7F2 0%,#FCE9EF 55%,#F1E3F3 100%);
}

/* ---------- Vistas ---------- */
.view{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s ease;
}
.view.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

/* capa de partículas decorativas */
.fx-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }

/* ============================================================
   BIENVENIDA
   ============================================================ */
.view--home{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 34px;
  background:linear-gradient(180deg,#FFF7F2 0%,#FCE9EF 55%,#F1E3F3 100%);
}
.home-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.orb{
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#F4C2D7 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 45px -18px rgba(140,86,112,.55);
  animation:breathe 5s ease-in-out infinite;
}
.orb span{ font-size:44px; color:#fff; }
.home-name{ font-family:var(--f-script); font-size:52px; color:var(--vino); line-height:1.1; margin-top:26px; }
.home-sub{ font-family:var(--f-serif); font-style:italic; font-size:19px; color:#7A6570; margin-top:6px; letter-spacing:.02em; }
.home-text{ font-weight:300; font-size:14.5px; line-height:1.7; color:#7A6570; margin:18px 0 0; max-width:250px; }

.countdown{
  margin-top:30px; width:100%; max-width:280px;
  background:rgba(255,255,255,.72); border:1px solid rgba(244,194,215,.9);
  border-radius:22px; padding:16px 18px; backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:10px;
}
.countdown-label{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.countdown-row{ display:flex; justify-content:center; gap:10px; align-items:flex-end; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; }
.cd-num{ font-family:var(--f-serif); font-size:34px; color:var(--vino); line-height:1; transition:opacity .2s ease; }
.cd-cap{ font-size:9.5px; letter-spacing:.16em; color:var(--muted); }
.cd-colon{ font-family:var(--f-serif); font-size:28px; color:#E0B9CC; line-height:1.2; }

.btn-primary{
  margin-top:22px; width:100%; max-width:280px; border:none; cursor:pointer;
  padding:18px 0; border-radius:999px;
  background:linear-gradient(120deg,#F4C2D7,#E9A8C4); color:#fff;
  font-family:var(--f-sans); font-size:16px; letter-spacing:.06em;
  box-shadow:0 16px 32px -14px rgba(199,120,157,.85);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -14px rgba(199,120,157,.9); }
.btn-primary:active{ transform:scale(.97); }

.home-whisper{
  position:absolute; bottom:26px; left:0; right:0; z-index:2;
  font-family:var(--f-script); font-size:17px; color:#C79BAE; user-select:none;
  transition:color .4s ease;
}
.home-whisper.answered{ color:var(--vino); }

/* ============================================================
   CALENDARIO
   ============================================================ */
.view--calendar{ background:linear-gradient(180deg,#FFF7F2 0%,#FDF0F3 100%); }
.cal-header{
  position:absolute; top:0; left:0; right:0; z-index:3;
  padding:44px 24px 16px;
  background:linear-gradient(180deg,rgba(255,247,242,.98),rgba(255,247,242,0));
  display:flex; align-items:flex-end; justify-content:space-between;
}
.cal-title{ font-family:var(--f-script); font-size:30px; color:var(--vino); line-height:1; }
.cal-count{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.music-pill{
  cursor:pointer; display:flex; align-items:center; gap:7px;
  background:#fff; border:1px solid #F2DDE5; border-radius:999px;
  padding:8px 13px; box-shadow:0 10px 22px -14px rgba(140,86,112,.7);
}
.music-label{ font-size:11px; color:var(--vino); letter-spacing:.04em; }
.eq{ display:flex; align-items:flex-end; gap:2.5px; height:14px; }
.eq i{ width:3px; border-radius:2px; background:#E9A8C4; height:5px; }
.music-pill.playing .eq i{ height:14px; }
.music-pill.playing .eq i:nth-child(1){ animation:eq .7s ease-in-out 0s infinite; }
.music-pill.playing .eq i:nth-child(2){ animation:eq .95s ease-in-out .15s infinite; }
.music-pill.playing .eq i:nth-child(3){ animation:eq 1.2s ease-in-out .3s infinite; }

.cal-scroll{ position:absolute; inset:0; overflow-y:auto; padding:112px 22px 40px; }
.cal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cal-foot{ text-align:center; font-family:var(--f-script); font-size:16px; color:#D3AFC0; padding:26px 0 4px; }

/* --- Card de día --- */
.day{ position:relative; height:132px; border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.day-num{ font-family:var(--f-script); line-height:1; }
.day-date{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; margin-top:2px; }

.day--open{
  cursor:pointer; overflow:hidden; gap:4px;
  background:linear-gradient(150deg,#FFFFFF 0%,#FCE3EC 100%);
  border:1px solid #F6D3E0; box-shadow:0 14px 30px -20px rgba(199,120,157,.9);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s ease;
}
.day--open:hover{ transform:translateY(-4px) rotate(-1deg); box-shadow:0 22px 38px -18px rgba(199,120,157,.95); }
.day--open:active{ transform:scale(.96); }
.day--open .day-num{ font-size:46px; color:#C97BA0; }
.day--open .day-date{ color:var(--muted); }
.day--open .spark{ position:absolute; top:10px; right:14px; font-size:12px; color:var(--dorado); animation:twinkle 3.4s ease-in-out infinite; }
.day--open .day-heart{ font-size:14px; color:#EFAFC9; margin-top:2px; }

.day--locked{ background:#F4EFF3; border:1px dashed #DED2DC; gap:6px; cursor:pointer; }
.day--locked .day-num{ font-size:42px; color:#D6C9D2; }
.day--locked .day-date{ color:#C3B6C0; }
.day--locked.shake{ animation:shake .4s ease; }

.day--final{
  cursor:pointer; overflow:hidden; gap:5px;
  background:linear-gradient(150deg,#FBF0DD,#F6E2E9); border:1px solid #E9D3AE;
}
.day--final .shimmer{
  position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:220% 100%; animation:shimmer 4.5s ease-in-out infinite;
}
.day--final .day-num{ font-size:42px; color:#C6A15E; }
.day--final .day-date{ color:#B79A6C; }
.day--final .day-tag{ font-size:11px; font-family:var(--f-serif); font-style:italic; color:#A98C63; }

/* ============================================================
   HOJA DE CARD (bottom sheet)
   ============================================================ */
.sheet-veil{
  position:absolute; inset:0; z-index:6;
  background:rgba(74,58,66,.42); backdrop-filter:blur(3px);
  display:flex; align-items:flex-end;
  opacity:0; visibility:hidden; transition:opacity .28s ease;
}
.sheet-veil.is-open{ opacity:1; visibility:visible; }
.sheet{
  width:100%; max-height:94%; overflow-y:auto;
  background:linear-gradient(180deg,#FFFDFB,#FDF2F6);
  border-radius:34px 34px 0 0; padding:22px 22px 30px;
  box-shadow:0 -20px 50px -30px rgba(74,58,66,.8);
  transform:translateY(100%); transition:transform .42s cubic-bezier(.2,.9,.3,1.05);
}
.sheet-veil.is-open .sheet{ transform:translateY(0); }
.sheet-grip{ width:44px; height:4px; border-radius:99px; background:#EEDCE4; margin:0 auto 18px; }
.sheet-head{ display:flex; align-items:baseline; justify-content:space-between; }
.sheet-day{ font-family:var(--f-script); font-size:38px; color:#C97BA0; line-height:1; }
.sheet-date{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.sheet-close{
  cursor:pointer; width:34px; height:34px; border-radius:50%;
  background:#fff; border:1px solid #F2DDE5; color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}

.sheet-photo{
  margin-top:16px; position:relative; height:250px; border-radius:22px; overflow:hidden;
  background:linear-gradient(140deg,#F6DDE6,#E7DDF3);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 36px -26px rgba(140,86,112,.9);
}
.sheet-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:photoIn .6s ease both; }
.sheet-photo .ph-inner{ display:none; flex-direction:column; align-items:center; gap:8px; color:#B98EA6; }
.sheet-photo.is-empty .ph-inner{ display:flex; }
.ph-flower{ font-size:26px; }
.ph-label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.sheet-photo-frame{ position:absolute; inset:0; border:6px solid #fff; border-radius:22px; pointer-events:none; }

.sheet-title{ font-family:var(--f-serif); font-style:italic; font-size:22px; color:var(--vino); margin-top:20px; line-height:1.3; }
.sheet-msg{
  font-weight:300;
  font-size:15px;
  line-height:1.8;
  color:var(--body);
  margin:10px 0 0;
  white-space:pre-wrap;
}
.sheet-foot{ margin-top:22px; padding-top:18px; border-top:1px solid #F2E4EA; display:flex; align-items:center; justify-content:space-between; }
.sheet-sign{ font-family:var(--f-script); font-size:19px; color:#C79BAE; }
.sheet-heart{ font-size:16px; color:#EFAFC9; }

/* ============================================================
   DÍA 10 (FINAL)
   ============================================================ */
.view--final{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:56px 26px 30px;
  background:linear-gradient(180deg,#FFFBF3 0%,#FCEAF0 60%,#F4E6F1 100%);
}
.final-back{
  position:absolute; top:44px; left:22px; z-index:3;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid #F2DDE5; color:var(--vino); font-size:16px;
}
.final-date{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#C6A15E; z-index:2; }
.final-title{ font-family:var(--f-script); font-size:46px; color:var(--vino); line-height:1.05; margin-top:10px; z-index:2; }
.final-photo{
  position:relative; margin-top:22px; width:230px; height:250px; border-radius:20px;
  background:linear-gradient(140deg,#F6DDE6,#EFE0F0); border:7px solid #fff;
  box-shadow:0 22px 44px -26px rgba(140,86,112,.95); transform:rotate(-2.2deg);
  display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:2;
}
.final-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.final-photo .ph-label{ display:none; color:#B98EA6; }
.final-photo.is-empty .ph-label{ display:block; }
.final-text{ font-weight:300; font-size:14.5px; line-height:1.8; color:#6B5760; margin:26px 0 0; max-width:270px; z-index:2; }
.final-q{ margin-top:18px; font-family:var(--f-script); font-size:26px; color:#C97BA0; line-height:1.35; z-index:2; }
.final-a{ font-family:var(--f-script); font-size:26px; color:var(--vino); line-height:1.35; z-index:2; }
.final-flag{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#C0A9B4; z-index:2; }
.final-flag span{ color:#EFAFC9; font-size:14px; }

/* ============================================================
   TOAST (susurro)
   ============================================================ */
.toast{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%) translateY(12px);
  z-index:7; background:rgba(74,58,66,.9); color:#FFF7F2;
  font-family:var(--f-serif); font-style:italic; font-size:15px;
  padding:10px 20px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   PUERTA / CONTRASEÑA
   ============================================================ */
.gate{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center; padding:0 34px;
  text-align:center; overflow:hidden;
  background:linear-gradient(180deg,#FFF7F2 0%,#FCE9EF 55%,#F1E3F3 100%);
  transition:opacity .55s ease, visibility .55s ease;
}
.gate.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.gate-card{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; max-width:300px; }
.gate-lock{
  width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#F4C2D7 70%);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  box-shadow:0 20px 45px -18px rgba(140,86,112,.55);
  animation:breathe 5s ease-in-out infinite;
}
.gate-lock span{ font-size:38px; color:#fff; }
.gate-title{ font-family:var(--f-script); font-size:44px; color:var(--vino); line-height:1.1; }
.gate-sub{ font-family:var(--f-serif); font-style:italic; font-size:20px; color:#7A6570; margin:8px 0 22px; }
.gate-input{
  width:100%; text-align:center; border:1px solid rgba(244,194,215,.9);
  background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
  border-radius:18px; padding:16px 18px; outline:none;
  font-family:var(--f-serif); font-size:30px; letter-spacing:.12em; color:var(--vino);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.gate-input::placeholder{ color:#E0B9CC; letter-spacing:.24em; }
.gate-input:focus{ border-color:#E9A8C4; box-shadow:0 0 0 4px rgba(244,194,215,.28); }
.gate.wrong .gate-input{ border-color:#D98BA8; animation:shake .4s ease; }
.gate-btn{
  margin-top:16px; width:100%; border:none; cursor:pointer;
  padding:16px 0; border-radius:999px;
  background:linear-gradient(120deg,#F4C2D7,#E9A8C4); color:#fff;
  font-family:var(--f-sans); font-size:16px; letter-spacing:.06em;
  box-shadow:0 16px 32px -14px rgba(199,120,157,.85);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gate-btn:hover{ transform:translateY(-2px); }
.gate-btn:active{ transform:scale(.97); }
.gate-hint{ margin-top:18px; font-size:12px; font-weight:300; line-height:1.6; color:var(--muted); min-height:2.4em; }
.gate-hint.error{ color:#C97BA0; font-family:var(--f-serif); font-style:italic; font-size:14px; }

/* ============================================================
   ANIMACIONES
   ============================================================ */
@keyframes floatUp{ 0%{transform:translateY(0) rotate(0deg);opacity:0} 15%{opacity:.55} 100%{transform:translateY(-160px) rotate(18deg);opacity:0} }
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes twinkle{ 0%,100%{opacity:.25;transform:scale(.85)} 50%{opacity:.9;transform:scale(1.15)} }
@keyframes eq{ 0%,100%{height:5px} 50%{height:14px} }
@keyframes shimmer{ 0%{background-position:-120% 0} 100%{background-position:220% 0} }
@keyframes photoIn{ from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
}