@keyframes rotate-ring    { to { transform:rotate(360deg); } }
@keyframes parpadeo       { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes selloBreath    { 0%{color:rgba(201,168,76,.3)} 100%{color:rgba(240,223,160,.65);text-shadow:0 0 20px rgba(201,168,76,.12)} }
@keyframes brandDot       { 0%,45%,100%{opacity:0;transform:translateY(-50%) scale(.5)} 55%,85%{opacity:1;transform:translateY(-50%) scale(1)} }
@keyframes icoBreath      { 0%{opacity:.2} 100%{opacity:.5} }
@keyframes brandShimmer   { 0%,70%{left:-120%} 100%{left:160%} }

.kc-float {
  position:fixed; bottom:clamp(18px,3vh,30px); right:clamp(18px,3vw,28px);
  z-index:9000; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; background:none; padding:0;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  user-select:none;
  opacity:0; transform:translateY(20px);
  transition: opacity .6s ease, transform .6s var(--ease-back, cubic-bezier(.34,1.56,.64,1));
}
.kc-float.visible { opacity:1; transform:translateY(0); }
.kc-float:focus { outline:none; }
.kc-float:focus-visible { outline:none; }

.kc-float-bg {
  position:absolute; inset:0; border-radius:16px;
  background: rgba(10,6,8,.88);
  border: 1px solid var(--border-gold);
  transition: border-color .4s, box-shadow .4s, background .4s, transform .15s;
}

.kc-float:not(.playing) .kc-float-bg {
  background: rgba(10,6,8,.7);
  border-color: rgba(201,168,76,.12);
  box-shadow: none;
}

.kc-float.playing .kc-float-bg {
  background: rgba(18,8,14,.92);
  border-color: rgba(201,168,76,.55);
  box-shadow:
    0 0 12px rgba(201,168,76,.25),
    0 0 30px rgba(201,168,76,.1),
    inset 0 0 10px rgba(92,26,46,.15);
}
.kc-float:hover .kc-float-bg {
  border-color: rgba(201,168,76,.6);
  box-shadow: 0 4px 28px rgba(0,0,0,.6), 0 0 36px rgba(201,168,76,.18);
}
.kc-float:active .kc-float-bg { transform:scale(.93); }

.kc-float-glow {
  position:absolute; inset:-12px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
  opacity:0;
  animation:kcGlow 3.2s ease-in-out infinite alternate;
  transition: opacity .5s;
}
@keyframes kcGlow {
  0%   { opacity: 0; }
  100% { opacity: .6; }
}

.kc-float:not(.playing) .kc-float-glow {
  animation: none;
  opacity: 0;
}
.kc-float.playing .kc-float-glow {
  animation:kcGlow 3.2s ease-in-out infinite alternate;
}

#kc-cam-svg {
  position:relative; z-index:2;
  width:30px; height:30px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.kc-float:hover #kc-cam-svg { transform:scale(1.1) rotate(-4deg); }
.kc-float:active #kc-cam-svg { transform:scale(.87); }

#kc-cam-svg {
  color: rgba(201,168,76,.35);
  position: relative; z-index: 2;
  width: 30px; height: 30px;
  transition: color .4s, filter .4s, transform .35s cubic-bezier(.34,1.56,.64,1);
}

.kc-float.playing #kc-cam-svg {
  color: var(--gold-bright);
  filter: drop-shadow(0 0 6px rgba(201,168,76,.5));
}
.kc-float:hover #kc-cam-svg { transform: scale(1.1) rotate(-4deg); }
.kc-float:active #kc-cam-svg { transform: scale(.87); }

.kc-bars {
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  display:flex; gap:1.5px; z-index:3;
  transition: opacity .4s;
}
.kc-bar {
  width:2.5px; border-radius:2px;
  background:linear-gradient(to top, var(--wine-light), var(--gold));
  transition: opacity .4s, height .4s;
}
.kc-bar:nth-child(1) { height:5px; }
.kc-bar:nth-child(2) { height:8px; }
.kc-bar:nth-child(3) { height:4px; }

@keyframes kcBar {
  0%   { transform: scaleY(.3); }
  100% { transform: scaleY(1); }
}

.kc-float:not(.playing) .kc-bar {
  opacity:.12;
  transform:scaleY(.3);
}
.kc-float.playing .kc-bar:nth-child(1) { animation:kcBar .35s ease-in-out infinite alternate; }
.kc-float.playing .kc-bar:nth-child(2) { animation:kcBar .25s ease-in-out .1s infinite alternate; }
.kc-float.playing .kc-bar:nth-child(3) { animation:kcBar .4s  ease-in-out .2s infinite alternate; }

.kc-letter {
  display:none; }

footer {
  background:transparent;
  border-top:1px solid rgba(201,168,76,.08);
  text-align:center; padding:60px 20px 48px; position:relative; z-index:1;
}

.footer-reveal {
  opacity:0; transform:translateY(16px);
  transition: opacity .8s ease var(--fd,0s), transform .8s var(--ease-silk, cubic-bezier(.25,.46,.45,.94)) var(--fd,0s);
}
.footer-reveal.appeared { opacity:1; transform:translateY(0); }

.footer-divider {
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin-bottom:28px;
}
.footer-divider::before,
.footer-divider::after {
  content:''; height:1px; width:clamp(70px,20vw,140px);
  background:linear-gradient(to right, transparent, rgba(201,168,76,.3)); opacity:.5;
}
.footer-divider::after { background:linear-gradient(to left, transparent, rgba(201,168,76,.3)); }
.footer-divider span { color:var(--gold); font-size:.9em; animation:parpadeo 3.5s infinite; }

.footer-sello {
  font-size:.64em; letter-spacing:3px; text-transform:uppercase;
  line-height:2.5; margin-bottom:28px;
  animation:selloBreath 6s ease-in-out infinite alternate;
}
.footer-sello .nombre-dedicado { color:var(--gold-pale); font-weight:500; letter-spacing:4px; }
.footer-sello .lugar-fecha { font-size:.9em; color:var(--cream-50); }

.footer-brand {
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; padding:10px 4px;
  transition:all .4s ease; position:relative;
}
.footer-brand::after {
  content:''; position:absolute; right:-10px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%;
  background:rgba(232,164,184,.6);
  animation:brandDot 4s ease-in-out infinite; pointer-events:none;
}
.footer-brand .ig-ico {
  width:14px; height:14px; opacity:.3;
  transition:opacity .4s, color .4s;
  color:var(--gold); flex-shrink:0;
  animation:icoBreath 3.5s ease-in-out infinite alternate;
}
.footer-brand:hover .ig-ico { opacity:.85; color:var(--blush); animation:none; }

.footer-brand-text {
  font-family:var(--ff-grace); font-style:italic;
  color:rgba(201,168,76,.75); font-size:1em; letter-spacing:3px;
  transition: color .4s, text-shadow .4s, letter-spacing .4s;
  position:relative; overflow:hidden;
}
.footer-brand-text::after {
  content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,230,180,.1) 50%,rgba(255,255,255,.07) 55%,transparent);
  animation:brandShimmer 5.5s ease-in-out infinite; pointer-events:none;
}
.footer-brand:hover .footer-brand-text {
  color:rgba(201,168,76,.95); letter-spacing:4px;
  text-shadow:0 0 18px rgba(201,168,76,.3);
}

#damas-stack-wrap {
  display:flex; flex-direction:column; align-items:center;
  margin-block: 0 2.5rem;
  overflow: hidden;
  padding: 8px 20px 20px;
  contain: layout;
}

#damas-stack {
  position: relative;
  width: min(230px, 68vw);
  height: 300px;
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
}

#damas-stack .damas-card {
  position: absolute; inset: 0;
  margin: 0;
  width: 100%;
  transform: rotate(var(--rot, 0deg));
  transform-origin: center center;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  }
#damas-stack .damas-card.stack-top {
  will-change: transform, opacity;
}

.stack-tap-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--ff-grace);
  font-style: italic;
  font-size: .72rem;
  color: var(--cream-30);
  letter-spacing: .08em;
  animation: hint-pulse 2.5s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
}
@keyframes hint-pulse {
  0%   { opacity: .3; }
  100% { opacity: .7; }
}
.stack-tap-hint .hint-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  opacity: .5;
  animation: hint-pulse 1.5s ease-in-out infinite alternate;
}

@media (hover:hover) {
  #damas-stack:hover .damas-card.stack-top {
    box-shadow: 0 16px 48px rgba(0,0,0,.8), 0 0 24px rgba(201,168,76,.1);
  }
}