/* =========================================================
   PARA MI GATITA - ESTILOS RESPONSIVOS
   Paleta: vino, rosa suave, marfil y detalles dorados
   ========================================================= */
:root{
  --vino:#5b1838;
  --vino-oscuro:#351024;
  --rosa:#d979a2;
  --rosa-claro:#f9e8ef;
  --marfil:#fffaf6;
  --dorado:#c9a45c;
  --texto:#392b32;
  --gris:#81747b;
  --sombra:0 18px 48px rgba(53,16,36,.12);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;min-height:100svh;color:var(--texto);
  background:linear-gradient(145deg,#fffaf8 0%,#f8edf1 55%,#f4e5eb 100%);
  font-family:'Segoe UI',Arial,sans-serif;overflow-x:hidden;
}
button,input{font:inherit}
button{ -webkit-tap-highlight-color:transparent }
button:focus-visible,input:focus-visible{outline:3px solid rgba(201,164,92,.65);outline-offset:3px}

/* Cabecera y navegación */
.topbar{
  min-height:66px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px clamp(14px,3vw,34px);background:rgba(255,250,246,.96);
  border-bottom:1px solid rgba(91,24,56,.1);font-size:13px;
}
.logo{display:flex;align-items:center;gap:10px;color:var(--vino)}
.logo>span{font-size:25px}
.logo b{display:block;font-family:Georgia,serif;font-size:16px}
.logo div>span{display:block;margin-top:3px;font-size:9px;letter-spacing:1.3px;color:var(--gris)}
.para{color:var(--vino);font-weight:600}
.paso{color:var(--gris);white-space:nowrap;font-size:12px}
.tabs{
  display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.8vw,22px);
  padding:10px 12px;background:#fffdfa;overflow-x:auto;scrollbar-width:thin;
}
.tabs button{
  flex:0 0 auto;border:0;border-bottom:2px solid transparent;background:none;
  padding:7px 3px 8px;color:#897982;font-size:10px;font-weight:700;letter-spacing:1px;
  cursor:pointer;transition:color .2s,border-color .2s;
}
.tabs button:hover,.tabs button.activo{color:var(--vino);border-bottom-color:var(--dorado)}
.progreso{height:3px;background:#eadde3}
.progreso div{height:100%;background:linear-gradient(90deg,var(--rosa),var(--dorado));transition:width .45s ease}

/* Reproductor musical */
.music-player{
  position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:min(100% - 28px,1040px);margin:14px auto 0;padding:10px 14px;
  border:1px solid rgba(201,164,92,.3);border-radius:16px;
  background:rgba(255,253,250,.94);box-shadow:0 8px 24px rgba(53,16,36,.07);
}
.music-identidad{display:flex;align-items:center;gap:10px;min-width:145px}
.music-icon{
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:#fff;background:linear-gradient(145deg,var(--vino),#9d426d);font-size:21px;
}
.music-identidad b{display:block;color:var(--vino);font-family:Georgia,serif;font-size:13px}
.music-identidad small{display:block;margin-top:3px;color:var(--gris);font-size:10px}
.music-controles{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.music-btn{
  flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:var(--vino);color:#fff;
  cursor:pointer;transition:transform .2s,background .2s;
}
.music-btn:hover{transform:scale(1.06);background:var(--vino-oscuro)}
.music-visual{height:30px;display:flex;align-items:center;justify-content:center;gap:3px;min-width:64px}
.music-visual i{display:block;width:3px;height:6px;border-radius:4px;background:var(--rosa);transform-origin:center;opacity:.55}
.music-player.reproduciendo .music-visual i{animation:onda .72s ease-in-out infinite alternate;opacity:1}
.music-visual i:nth-child(3n){animation-delay:.18s}.music-visual i:nth-child(3n + 1){animation-delay:.38s}.music-visual i:nth-child(4n){animation-delay:.52s}
@keyframes onda{from{transform:scaleY(.45)}to{transform:scaleY(3.1)}}
.music-tiempo{font-size:10px;color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.music-seek{width:100%;min-width:55px;height:5px;accent-color:var(--vino);cursor:pointer}
.music-aviso{
  display:none;border:0;background:var(--rosa-claro);color:var(--vino);padding:8px 12px;
  border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;
}
.music-aviso.visible{display:block}

/* Pantallas principales */
main{width:100%;min-height:calc(100vh - 160px);min-height:calc(100svh - 160px);display:flex;flex-direction:column}
.paso-pantalla{
  display:none;flex:1;min-height:calc(100vh - 170px);min-height:calc(100svh - 170px);
  align-items:center;justify-content:center;padding:clamp(18px,4vh,42px) 18px;
  animation:entrada .45s ease both;
}
.paso-pantalla.activa{display:flex}
@keyframes entrada{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.hero,.card-candado,.card-clara{width:100%;margin:auto;box-shadow:var(--sombra)}
.hero{
  max-width:760px;text-align:center;color:#fff;border:1px solid rgba(201,164,92,.32);
  border-radius:30px;padding:clamp(34px,7vh,68px) clamp(20px,5vw,54px);
  background:radial-gradient(ellipse at 50% 0%,rgba(217,121,162,.25),transparent 55%),
             linear-gradient(145deg,#351024,#5b1838 65%,#71304f);
}
.badge,.badge-rosa{display:inline-block;border-radius:999px;padding:7px 13px;font-size:10px;letter-spacing:1.5px;font-weight:700}
.badge{color:#f7e9d0;background:rgba(201,164,92,.14);border:1px solid rgba(201,164,92,.55)}
.hero h1{margin:22px 0 16px;font-family:Georgia,serif;font-size:clamp(48px,8vw,78px);line-height:.98;font-weight:500}
.hero h1 em{color:#edb6cb;font-family:Georgia,serif;font-weight:500}
.hero>p{line-height:1.75;color:#f5eaf0}
.btn-blanco,.btn-oscuro{
  border:0;border-radius:999px;padding:13px 23px;font-weight:700;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-blanco{margin-top:12px;background:linear-gradient(135deg,#f7e8d0,#d6b16d);color:#4c1c35;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.btn-oscuro{background:linear-gradient(135deg,var(--vino),var(--vino-oscuro));color:#fff;box-shadow:0 7px 16px rgba(91,24,56,.16)}
.btn-blanco:hover,.btn-oscuro:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(53,16,36,.2)}
.hint{font-size:11px;color:#f0dce5!important}
.stats{display:flex;gap:12px;margin:28px auto 0;max-width:470px}
.stats div{flex:1;display:flex;flex-direction:column;gap:5px;padding:13px 7px;border:1px solid rgba(238,205,218,.25);border-radius:14px;background:rgba(255,255,255,.09)}
.stats b{font-family:Georgia,serif;font-size:23px;color:#f5dcae}
.stats span{font-size:9px;letter-spacing:1px;color:#f3e5eb}

/* Candado */
.card-candado{max-width:620px;overflow:hidden;border-radius:24px}
.candado-top{padding:34px 20px;text-align:center;background:linear-gradient(145deg,#351024,#5b1838);color:#fff}
.candado-top h2{font-family:Georgia,serif;font-size:clamp(23px,4vw,30px);font-weight:500;margin:16px 0 8px}
.candado-top p{color:#ead9e1;margin-bottom:0}
.icono-lock{display:inline-block;padding:12px 15px;border-radius:50%;background:rgba(255,255,255,.12);font-size:23px}
.candado-body{padding:28px 22px;text-align:center;background:var(--marfil)}
.gris{color:var(--gris);line-height:1.65}
.chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0}
.chip{border:1px solid #e8c8d6;border-radius:999px;padding:10px 16px;background:#fff;color:var(--vino);cursor:pointer}
.chip:hover{background:var(--rosa-claro)}
.fila{display:flex;justify-content:center;gap:10px}
.fila input{width:100%;max-width:360px;min-width:0;padding:12px 14px;border:1px solid #e4d5dc;border-radius:12px;background:#fff}
.msg{min-height:20px;color:#b42355}.mini{font-size:11px;color:#a2949b;line-height:1.5}

/* Tarjetas y contador */
.card-clara{max-width:760px;padding:clamp(24px,4vw,42px);text-align:center;border:1px solid rgba(201,164,92,.2);border-radius:24px;background:rgba(255,253,249,.97)}
.badge-rosa{background:var(--rosa-claro);color:var(--vino)}
.card-clara h2{margin:18px 0 12px;color:var(--vino);font-family:Georgia,serif;font-size:clamp(25px,4vw,34px);font-weight:500}
.titulo{font-family:Georgia,serif;font-size:clamp(30px,5vw,46px);line-height:1.12;color:var(--vino);font-weight:500}
.titulo em{color:#9c456b;font-family:Georgia,serif}
.label{margin-top:22px;color:#9b7d8b;font-size:10px;letter-spacing:2px;font-weight:700}
.contador{display:flex;justify-content:center;gap:10px;margin:16px auto;max-width:560px}
.contador div{flex:1;min-width:0;padding:15px 5px;border:1px solid #f0e1e7;border-radius:15px;background:#fff}
.contador b{display:block;color:var(--vino);font-family:Georgia,serif;font-size:clamp(21px,4vw,30px);font-variant-numeric:tabular-nums}
.contador span{font-size:9px;letter-spacing:1px;color:var(--gris)}
.fila-centro{display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap;margin-top:20px}
.link{border:0;background:none;color:var(--vino);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:9px}
.link:hover{color:#b04d78}

/* Álbum */
.album-card{max-width:820px}
.album-marco{position:relative;width:min(100%,620px);margin:22px auto 0;padding:12px;border:1px solid #ead7df;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(53,16,36,.09)}
.album-foto{position:relative;display:grid;place-items:center;overflow:hidden;width:100%;height:clamp(220px,42vw,390px);border-radius:13px;background:#f7e9ee}
.album-foto img{width:100%;height:100%;object-fit:cover}
.recuerdo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;padding:20px;color:#71304f;text-align:center}
.recuerdo-placeholder>span{font-size:clamp(48px,8vw,78px);filter:drop-shadow(0 5px 8px rgba(91,24,56,.12))}
.recuerdo-placeholder b{font-family:Georgia,serif;font-size:clamp(20px,3vw,27px);font-weight:500}
.recuerdo-placeholder small{font-size:12px;color:#987d8b}
.recuerdo-flores{background:radial-gradient(circle at 25% 25%,#fff8f1,transparent 35%),linear-gradient(135deg,#f8dce7,#f4e8d9)}
.album-flecha{position:absolute;z-index:2;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:rgba(53,16,36,.76);color:#fff;font-family:Georgia,serif;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.album-flecha:hover{background:var(--vino)}
.album-flecha.anterior{left:20px}.album-flecha.siguiente{right:20px}
.album-pie{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px auto 0;color:var(--vino)}
.album-pie span{font-size:10px;letter-spacing:1px;color:#a17c8d;white-space:nowrap}
.album-pie p{margin:4px 0;font-family:Georgia,serif;font-size:15px}
.album-puntos{display:flex;justify-content:center;gap:8px;margin:12px 0}
.punto-recuerdo{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#e4cbd6;cursor:pointer;transition:all .2s}
.punto-recuerdo.activo{width:23px;border-radius:99px;background:var(--vino)}
.album-foto {
    position: relative;
    overflow: hidden;
}

.album-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-foto img[hidden] {
    display: none !important;
}

.recuerdo-placeholder[hidden] {
    display: none !important;
}

/* Carta */
.carta{min-height:190px;padding:20px;border-left:4px solid var(--dorado);border-radius:12px;background:#fff;text-align:left;white-space:pre-wrap;line-height:1.8;color:#51404a;box-shadow:inset 0 0 0 1px #f2e8ed}
.carta p{margin:0}
.cursor{color:var(--rosa);animation:parpadeo 1s infinite}
@keyframes parpadeo{50%{opacity:0}}

/* Pastel */
.pastel{max-width:340px;margin:24px auto 18px}
.velas{display:flex;justify-content:center;gap:28px}
.vela-wrap{min-width:42px;text-align:center;cursor:pointer;user-select:none}
.vela-cuerpo{width:12px;height:58px;margin:5px auto;border-radius:4px;background:linear-gradient(90deg,#d879a0,#f4c7d8)}
.llama{width:14px;height:22px;margin:auto;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#f5b84e;box-shadow:0 0 12px #f5b84e;animation:llama .4s infinite alternate}
@keyframes llama{from{transform:scale(1) rotate(-2deg)}to{transform:scale(1.15) rotate(2deg)}}
.vela-wrap.apagada .llama{opacity:0}.vela-wrap.apagada .vela-cuerpo{background:#b8aeb3}
.vela-wrap span{font-size:10px;color:var(--gris)}
.piso{padding:12px;border-radius:8px;margin:4px 0}.p1{background:#f6e8ee;color:#75425b}.p2{background:#fff;border:1px solid #f1e6eb;color:var(--vino)}
.base{padding:14px;border-radius:0 0 12px 12px;background:var(--vino-oscuro);color:#fff;font-size:11px;letter-spacing:2px}
.deseo{color:#a83e6a;font-weight:700;line-height:1.6}

/* Promesa y confeti */
.promesa-final,.promesa{margin-top:18px;padding:22px;border:1px solid #efd8e2;border-radius:16px;background:linear-gradient(135deg,#fff3f6,#f8e8ee);color:var(--vino)}
.promesa-final p,.promesa p{font-family:Georgia,serif;font-size:17px;line-height:1.7}
.promesa-final span,.promesa span{font-size:11px;color:#987d8b}
.corazon-medio{font-size:30px;animation:latido 1.1s infinite}
@keyframes latido{50%{transform:scale(1.16)}}
.oculto{display:none!important}
#confeti{position:fixed;inset:0;overflow:hidden;z-index:20;pointer-events:none}
.confeti-pieza{position:absolute;top:-24px;animation:caer 4s linear infinite;pointer-events:none}
@keyframes caer{to{transform:translateY(110vh) rotate(360deg)}}

/* Adaptación a móviles */
@media(max-width:700px){
  .topbar{min-height:58px;padding:9px 12px;gap:8px}
  .logo b{font-size:14px}.logo div>span{font-size:8px;letter-spacing:.8px}
  .logo>span{font-size:21px}.para{font-size:11px}.paso{font-size:10px}
  .tabs{justify-content:flex-start;gap:17px;padding:8px 12px}
  .tabs button{font-size:9px}
  .music-player{width:calc(100% - 20px);margin-top:10px;padding:9px 10px;gap:8px;flex-wrap:wrap}
  .music-identidad{min-width:0;flex:1}.music-icon{width:31px;height:31px;font-size:18px}
  .music-identidad b{font-size:12px}.music-identidad small{font-size:9px}
  .music-controles{flex-basis:100%;gap:8px}
  .music-visual{min-width:48px;gap:2px}.music-visual i{width:2px}
  .music-tiempo{font-size:9px}
  .music-aviso{font-size:10px;padding:7px 10px}
  main{min-height:calc(100svh - 190px)}
  .paso-pantalla{min-height:calc(100svh - 190px);padding:22px 12px}
  .hero{border-radius:23px;padding:38px 18px}
  .hero h1{font-size:clamp(47px,13vw,66px)}
  .hero>p{font-size:14px}.stats{gap:7px;margin-top:22px}
  .stats div{padding:11px 4px}.stats span{font-size:8px}
  .card-clara{padding:25px 16px;border-radius:20px}
  .contador{gap:6px}.contador div{padding:12px 3px;border-radius:11px}
  .contador span{font-size:8px;letter-spacing:.5px}
  .fila{flex-direction:column}.fila input{max-width:none}
  .album-marco{padding:7px;border-radius:15px}
  .album-foto{height:clamp(210px,62vw,340px)}
  .album-flecha{width:36px;height:36px;font-size:26px}
  .album-flecha.anterior{left:13px}.album-flecha.siguiente{right:13px}
  .album-pie{gap:8px;flex-wrap:wrap}.album-pie p{font-size:14px}
  .carta{padding:16px;font-size:14px;min-height:210px}
  .velas{gap:22px}
}
@media(max-width:380px){
  .para{display:none}
  .contador{gap:4px}.contador b{font-size:20px}.contador span{font-size:7px}
  .stats{gap:5px}.stats span{font-size:7px}
  .album-foto{height:205px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}