:root{
  --vino:#5A1726;
  --vino-2:#6B2033;
  --vino-3:#3F0F1A;
  --palo:#E6BDB8;
  --palo-2:#D8A9A4;
  --rosa:#F3DEDB;
  --tinta:#5A1726;
  --crema:#F3DEDB;
  --script:"Pinyon Script","Snell Roundhand","Brush Script MT",cursive;
  --firma:"Parisienne","Snell Roundhand","Brush Script MT",var(--serif);
  --serif:"Cormorant Garamond","Garamond","Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --huella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5.2' ry='4.5'/%3E%3Cellipse cx='4.8' cy='10' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.3' cy='5.6' rx='2.3' ry='3'/%3E%3Cellipse cx='14.7' cy='5.6' rx='2.3' ry='3'/%3E%3Cellipse cx='19.2' cy='10' rx='2.3' ry='2.9'/%3E%3C/svg%3E");
  --destello:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v2h1v1h2v1h-2v1h-1v2h-1v-2h-1v-1h-2v-1h2v-1h1z'/%3E%3C/svg%3E");
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{background:var(--vino-3);scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  background:radial-gradient(120% 60% at 50% 0%,var(--vino-2) 0%,var(--vino) 45%,var(--vino-3) 100%);
  color:var(--crema);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
.app{max-width:440px;margin:0 auto;padding:0 28px;text-align:center}
section{padding:28px 0}

.pequeno{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.9}
.script{font-family:var(--script);font-weight:400;line-height:1}

.hero{padding-top:46px;padding-bottom:0}
.anuncio{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;color:var(--palo);font-style:italic;font-weight:500;font-size:clamp(1.5rem,6.5vw,1.8rem);letter-spacing:.02em}
.anuncio::before,.anuncio::after{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.hero .titulo{font-size:clamp(3.6rem,17vw,4.8rem);color:var(--palo);margin:12px 0 18px;line-height:.95}
.hero .nombres{font-family:var(--firma);font-size:clamp(1.9rem,8vw,2.3rem);color:var(--palo);margin-bottom:30px}

.maquina{
  width:64%;max-width:260px;margin:0 auto;padding:6px;position:relative;
  background:linear-gradient(135deg,#7a2a3a,#4a1220 60%,#34101a);
  box-shadow:inset 0 0 0 1px rgba(255,215,205,.35),0 0 0 1px rgba(0,0,0,.45),0 22px 40px rgba(0,0,0,.45);
}
.ventana{position:relative;aspect-ratio:1/2.15;background:#1a0508;overflow:hidden}
.pared{position:absolute;inset:0}
.pared.arriba{clip-path:polygon(0 0,100% 0,86% 6%,14% 6%);background:linear-gradient(180deg,#0e0204,#2a1512)}
.pared.izq{clip-path:polygon(0 0,14% 6%,14% 94.5%,0 100%);background:linear-gradient(90deg,#3b2320,#6e4a40 60%,#8a6456)}
.pared.der{clip-path:polygon(100% 0,100% 100%,86% 94.5%,86% 6%);background:linear-gradient(270deg,#5a3a32,#b08a78 55%,#d6b3a0)}
.pared.abajo{clip-path:polygon(14% 94.5%,86% 94.5%,100% 100%,0 100%);background:linear-gradient(180deg,#e8c6b3,#a57d6c)}
.fondo{
  position:absolute;top:6%;left:14%;right:14%;bottom:5.5%;overflow:hidden;
  background:radial-gradient(90% 55% at 50% 100%,#6b4a41 0%,#3a2420 45%,#1d0d0b 100%);
  box-shadow:inset 0 14px 18px rgba(0,0,0,.75),inset 0 -4px 10px rgba(255,210,190,.12);
}
.fondo::before{content:"";position:absolute;left:18%;right:18%;top:0;height:5px;background:#050101;box-shadow:0 2px 3px rgba(255,200,180,.18);z-index:3}
.fondo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 16%)}
.cinta{
  position:absolute;left:50%;top:2px;width:58%;
  display:flex;flex-direction:column;gap:5px;padding:6px 6px 16px;
  background:linear-gradient(90deg,#e9e2dd,#f7f2ef 50%,#e4dcd6);
  box-shadow:0 10px 16px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4);
  transform:translate(-50%,-102%);
  animation:imprimir 4.2s cubic-bezier(.45,.05,.3,1) .8s forwards;
}
.cinta img{width:100%;aspect-ratio:4/3.3;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.95);cursor:zoom-in}
@keyframes imprimir{
  0%{transform:translate(-50%,-102%)}
  22%{transform:translate(-50%,-76%)}
  30%{transform:translate(-50%,-76%)}
  52%{transform:translate(-50%,-50%)}
  60%{transform:translate(-50%,-50%)}
  82%{transform:translate(-50%,-24%)}
  88%{transform:translate(-50%,-24%)}
  97%{transform:translate(-50%,1.5%)}
  100%{transform:translate(-50%,0)}
}

.fecha-grande{color:var(--palo);display:flex;justify-content:center;align-items:center;gap:14px;margin-top:34px;font-family:var(--serif);font-weight:500}
.fecha-grande b{font-weight:500;font-size:clamp(3rem,14vw,3.8rem);line-height:1;letter-spacing:.02em}
.fecha-grande i{width:6px;height:6px;border-radius:50%;background:var(--palo);opacity:.7}
.fecha-texto{margin-top:12px;font-style:italic;font-size:1.2rem;opacity:.9}
.ciudad{margin-top:6px}
.mensaje{max-width:330px;margin:26px auto 0;font-style:italic;font-size:1.2rem;line-height:1.45;opacity:.92}
.mensaje span{display:block;margin-top:10px;font-style:normal;font-weight:600;font-size:1.05rem;letter-spacing:.04em;color:var(--palo)}

.bajar{display:inline-block;margin-top:22px;padding:4px 10px;color:var(--palo);opacity:.75}
.huellas{display:flex;flex-direction:column;align-items:center;gap:7px}
.huellas i{
  width:13px;height:13px;background:currentColor;opacity:0;
  -webkit-mask:var(--huella) center/contain no-repeat;mask:var(--huella) center/contain no-repeat;
  animation:pisada 2.4s ease-in-out infinite;
}
.huellas i:nth-child(odd){transform:translateX(-6px) rotate(170deg)}
.huellas i:nth-child(even){transform:translateX(6px) rotate(190deg)}
.huellas i:nth-child(2){animation-delay:.4s}
.huellas i:nth-child(3){animation-delay:.8s}
@keyframes pisada{0%{opacity:0}15%,55%{opacity:1}100%{opacity:0}}

#mas{isolation:isolate}
.gatito{position:absolute;right:2px;top:0;width:clamp(32px,9vw,42px);z-index:-1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .9s cubic-bezier(.3,1.5,.5,1) 1.2s}
.visible .gatito{transform:translateY(-78%)}
.gatito::before{content:"";position:absolute;inset:-12px -12px 0}
.visible .gatito.escondido{transform:translateY(0);transition:transform .25s ease-in}
.gatito svg,.paseo svg{display:block;width:100%;height:auto}
.gatito .ojos{transform-box:fill-box;transform-origin:center;animation:parpadeo 5s infinite}
@keyframes parpadeo{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.15)}}

.sobre{position:relative;background:var(--palo);color:var(--tinta);display:flow-root;padding:0 0 32px;margin:60px -6px 0;box-shadow:0 24px 40px rgba(0,0,0,.35)}
.sobre::before{content:"";position:absolute;left:0;right:0;top:0;height:170px;background:var(--palo-2);clip-path:polygon(0 0,100% 0,50% 100%)}
.polaroid{position:relative;width:78%;margin:-60px auto 0;transform:rotate(-3deg);background:#fff;padding:10px 10px 12px;box-shadow:0 14px 30px rgba(0,0,0,.35);z-index:2}
.polaroid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.polaroid .script{position:absolute;right:14px;top:14px;font-size:1.55rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);transform:rotate(-6deg)}
.sobre .nota{font-size:clamp(1.9rem,8vw,2.3rem);position:relative;z-index:3;margin-top:48px;padding:0 22px;transform:rotate(-3deg)}

.calendario{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:var(--palo);text-decoration:none;font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--palo);padding:14px 22px;transition:background .2s,color .2s}
.calendario:hover{background:var(--palo);color:var(--vino)}

.cuenta{display:flex;justify-content:center;align-items:flex-start;gap:6px}
.cuenta div{min-width:58px}
.cuenta b{display:block;font-weight:500;font-size:clamp(2.2rem,10vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.cuenta span{display:block;margin-top:8px;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.cuenta i{font-style:normal;font-size:2rem;line-height:1.1;opacity:.7}

:focus-visible{outline:2px solid var(--palo);outline-offset:4px}

footer{padding:28px 0 48px}
.cierre{font-family:var(--firma);font-size:clamp(3.4rem,15vw,4.4rem);color:var(--palo);line-height:.9}
.cierre small{display:block;font-size:.5em;margin:-4px 0 4px}
.lugar{margin-top:18px;font-style:italic;font-size:1.1rem;opacity:.85}

.nombres,.cierre{
  display:inline-block;vertical-align:top;position:relative;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  animation:latido 2s ease-in-out infinite;
}
.nombres::after,.cierre::after{
  content:"";position:absolute;right:-16px;top:2px;width:11px;height:11px;background:var(--palo);
  -webkit-mask:var(--destello) center/contain no-repeat;mask:var(--destello) center/contain no-repeat;
  opacity:.35;transform:scale(.6);animation:destello 2s ease-in-out infinite;
}
@keyframes latido{0%,55%,100%{transform:scale(1);text-shadow:0 0 0 rgba(230,189,184,0)}68%{transform:scale(1.09);text-shadow:0 0 16px rgba(230,189,184,.7)}78%{transform:scale(.97)}88%{transform:scale(1.02)}}
@keyframes destello{0%,55%,100%{opacity:.35;transform:scale(.6)}68%{opacity:1;transform:scale(1.2)}}
.nombres.toque,.cierre.toque{animation:toque .35s ease}
@keyframes toque{50%{transform:scale(1.06)}}
.chispa{position:fixed;z-index:21;pointer-events:none;filter:drop-shadow(0 0 3px rgba(255,220,215,.55));animation:chispa 1s cubic-bezier(.2,.7,.3,1) forwards}
.chispa svg{display:block;width:100%;height:auto}
@keyframes chispa{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  65%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--giro))}
}

.visor{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px;
  background:rgba(40,8,16,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;cursor:zoom-out;
}
.visor.abierto{opacity:1;visibility:visible}
.visor figure{
  width:min(84vw,380px);background:#fff;padding:14px 14px 0;box-shadow:0 30px 60px rgba(0,0,0,.5);
  transform:scale(.8) rotate(-7deg);transition:transform .55s cubic-bezier(.2,.9,.3,1.15);
}
.visor.abierto figure{transform:scale(1) rotate(-2deg)}
.visor figure{position:relative}
.stickers{position:absolute;inset:0;pointer-events:none}
.sticker{
  position:absolute;display:block;transform:rotate(var(--r));
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 5px rgba(0,0,0,.3));
}
.sticker svg,.sticker img{display:block;width:100%;height:auto}
.sticker.pixel img{image-rendering:pixelated}
.visor.abierto .sticker{animation:pegar .45s cubic-bezier(.3,1.4,.5,1) calc(.6s + var(--i) * .2s) both}
@keyframes pegar{from{opacity:0;transform:rotate(calc(var(--r) + 14deg)) scale(1.6)}to{opacity:1;transform:rotate(var(--r)) scale(1)}}
.visor figure > img{width:100%;aspect-ratio:4/3.3;object-fit:cover;filter:grayscale(1) sepia(0) contrast(1.12) brightness(.95)}
.visor.abierto figure > img{animation:revelar 2.6s ease-out .45s both}
@keyframes revelar{
  0%{filter:grayscale(1) sepia(0) contrast(1.12) brightness(.95)}
  45%{filter:grayscale(.55) sepia(.45) contrast(.95) brightness(1.12)}
  100%{filter:grayscale(0) sepia(0) contrast(1) brightness(1)}
}
.visor figcaption{font-family:var(--firma);padding:16px 0 20px;font-size:2rem;color:var(--vino);text-align:center}
.visor-cerrar{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;width:44px;height:44px;
  border:1px solid rgba(230,189,184,.55);border-radius:50%;background:none;color:var(--palo);font-size:1.6rem;line-height:1;cursor:pointer;
}
.sin-scroll{overflow:hidden}

.logro{
  position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));z-index:20;
  display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 26px 10px 10px;
  background:var(--vino-3);color:var(--palo);border:1px solid rgba(230,189,184,.55);border-radius:999px;
  box-shadow:0 16px 36px rgba(0,0,0,.45);text-align:left;white-space:nowrap;
  transform:translate(-50%,-180%);transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.logro.activo{transform:translate(-50%,0)}
.logro .icono{flex:none;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--palo);border-radius:50%}
.logro .icono svg{width:22px;height:auto}
.logro .pequeno{font-size:.58rem}
.logro .script{display:block;font-size:1.75rem;margin-top:4px}

.paseo{position:fixed;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:19;height:60px;overflow:hidden;pointer-events:none}
.paseo div{
  position:absolute;left:0;bottom:4px;width:80px;transform:translateX(-110px);animation:cruzar 6.5s linear forwards;
  filter:drop-shadow(2px 0 0 var(--vino-3)) drop-shadow(-2px 0 0 var(--vino-3)) drop-shadow(0 2px 0 var(--vino-3)) drop-shadow(0 -2px 0 var(--vino-3));
}
.paseo svg{animation:trote .36s steps(1) infinite}
.paseo .pata-a{animation:paso .36s steps(1) infinite}
.paseo .pata-b{animation:paso .36s steps(1) -.18s infinite}
@keyframes cruzar{to{transform:translateX(calc(100vw + 20px))}}
@keyframes trote{50%{transform:translateY(-3px)}}
@keyframes paso{50%{opacity:0}}

.aparecer{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.aparecer.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  .aparecer{opacity:1;transform:none}
  .huellas i{opacity:.8}
  .nombres::after,.cierre::after{opacity:.8;transform:none}
  .paseo{display:none}
}