@font-face{font-family:'Glacial Indifference';src:url('/GlacialIndifference-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Glacial Indifference';src:url('/GlacialIndifference-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* =====================================================================
   Experiencia de apertura de la Gift Card: sobre 3D con alas → tarjeta → giro.
   La usan DOS lugares con el MISMO componente:
     · /solicitar-tarjeta/  (ver cómo se abre ANTES de pagar)
     · /tarjeta-regalo/ver/ (la tarjeta real del destinatario)
   Todo se anima con transform / opacity / filter (GPU), sin mover el layout.
   Medidas (sobre, tarjeta, posiciones) las calcula el JS en píxeles según la
   pantalla, así que nada se sale en celular ni en desktop.
   Imágenes del escenario: assets/open/ (cielo, pétalos de cerezo).
   ===================================================================== */
.go{
  position:absolute; inset:0; overflow:hidden; isolation:isolate;
  font-family:'Glacial Indifference','Poppins','Raleway',system-ui,sans-serif;
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  touch-action:manipulation;
  background:#b9a9ea;
  --go-rad:0px; --go-half:2px;
}
.go *{box-sizing:border-box}
.go img{display:block;-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* ---------- escenario: cielo pastel de nubes, pétalos de cerezo ---------- */
.go-bg{
  position:absolute; inset:-5%;
  background:#b9a9ea url('open/cielo.jpg') center/cover no-repeat;
  animation:go-sky 46s ease-in-out infinite alternate;
}
@keyframes go-sky{ from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.07) translate3d(-1.2%,-1%,0)} }

.go-deco{position:absolute; inset:0; pointer-events:none}
.go-bubble{
  position:absolute; height:auto;
  animation:go-float 9s ease-in-out infinite;
  opacity:.5; filter:drop-shadow(0 2px 4px rgba(190,100,150,.14));
}
@keyframes go-float{ 0%,100%{transform:translate3d(0,0,0) rotate(var(--r0,0deg))} 50%{transform:translate3d(7px,-18px,0) rotate(calc(var(--r0,0deg) + 16deg))} }
.go-shard{
  position:absolute; height:auto;
  animation:go-spin 16s linear infinite, go-twinkle 4.6s ease-in-out infinite;
}
@keyframes go-spin{ from{transform:rotate(var(--r0)) } to{transform:rotate(calc(var(--r0) + 360deg))} }
@keyframes go-twinkle{ 0%,100%{opacity:.18} 50%{opacity:.55} }
.go-star{
  position:absolute; width:var(--s); height:var(--s);
  background:#fff;
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.95));
  opacity:0;
  animation:go-star 3.4s ease-in-out infinite;
}
@keyframes go-star{ 0%,100%{opacity:0; transform:scale(.4) rotate(0)} 50%{opacity:.95; transform:scale(1) rotate(40deg)} }

/* suelo de luz suave y sombra bajo el sobre */
.go-floor, .go-shadow{
  position:absolute; border-radius:50%; pointer-events:none;
  transition:transform 1.2s cubic-bezier(.5,0,.15,1);
}
.go-floor{ background:radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.55) 0%, rgba(255,236,246,.28) 46%, rgba(255,236,246,0) 74%); }
.go-shadow{ background:radial-gradient(ellipse at 50% 50%, rgba(90,100,170,.38) 0%, rgba(90,100,170,.14) 52%, rgba(90,100,170,0) 74%); filter:blur(5px); }

/* ---------- sobre y alas ---------- */
.go-pos{
  position:absolute;
  transform:perspective(900px) rotateX(10deg);
  transform-origin:50% 55%;
  pointer-events:none;
}
.go-part{position:absolute; left:0; top:0; width:100%; height:100%;}
.go-part svg{display:block; width:100%; height:100%; overflow:visible}
.go-env-front{ filter:drop-shadow(0 12px 12px rgba(70,100,180,.34)) }
.go-env-back{ filter:drop-shadow(0 6px 8px rgba(70,100,180,.2)) }
.go-flapbox{ position:absolute; left:0; top:0; width:100%; height:58%; }
.go-flap{
  position:absolute; inset:0;
  transform-origin:50% 0;
  transform:perspective(800px) rotateX(0deg);
  transform-style:preserve-3d;
}
.go-flap .go-fo, .go-flap .go-fi{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.go-flap .go-fi{ transform:rotateX(180deg) }
.go-flap svg{display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 5px 6px rgba(70,100,180,.25))}

/* alas: plumas blancas que aletean (más rápido cuando el sobre se agita) */
.go-wingbox{
  position:absolute; width:54%; height:99%; top:-80%;
  filter:drop-shadow(0 8px 10px rgba(120,80,190,.28));
}
.go-wingbox.l{ left:-38.6% }
.go-wingbox.r{ left:84.6% }
/* Las dos alas son espejo exacto: misma fase, mismo ritmo y ángulos opuestos (--dir). Movimiento de seno, sin saltos. */
@property --amp  { syntax:'<angle>'; inherits:true; initial-value:6deg }
@property --amp2 { syntax:'<angle>'; inherits:true; initial-value:0deg }
.go{ --amp:6deg; --amp2:0deg; transition:--amp .7s ease, --amp2 .7s ease }
.go.is-excited{ --amp:8deg; --amp2:9deg }
.go-wing{ position:absolute; inset:0; transform-origin:93.75% 95%; --dir:1; animation:go-flap 3.6s ease-in-out infinite; will-change:transform }
.go-wingbox.r .go-wing{ transform-origin:6.25% 95%; --dir:-1 }
.go-wing svg{ display:block; width:100%; height:100%; overflow:visible; transform-origin:inherit; animation:go-flap2 .62s ease-in-out infinite }
.go-wingbox.r .go-wing svg{ transform-origin:6.25% 95% }
.go-wingbox.l .go-wing svg{ transform-origin:93.75% 95% }
@keyframes go-flap{
  0%,100%{ transform:rotate(calc(var(--dir) * var(--amp))) }
  50%{     transform:rotate(calc(var(--dir) * var(--amp) * -1)) }
}
@keyframes go-flap2{
  0%,100%{ transform:rotate(calc(var(--dir) * var(--amp2))) }
  50%{     transform:rotate(calc(var(--dir) * var(--amp2) * -1)) }
}

/* brillo que recorre el sobre de vez en cuando (vida sutil) */
.go-shimmer{ position:absolute; inset:0; overflow:hidden; border-radius:7%; pointer-events:none; }
.go-shimmer::after{
  content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:34%;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  transform:translate3d(-160%,0,0) skewX(-12deg);
}
.go.is-idle .go-shimmer::after{ animation:go-shim 6s ease-in-out 1.2s infinite }
@keyframes go-shim{ 0%,62%{transform:translate3d(-160%,0,0) skewX(-12deg)} 100%{transform:translate3d(440%,0,0) skewX(-12deg)} }

/* "vida": el sobre flota y se inclina apenas, sin molestar */
.go.is-idle .bob{ animation:go-bob 4.6s ease-in-out infinite }
@keyframes go-bob{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  35%{transform:translate3d(0,-9px,0) rotate(.9deg)}
  70%{transform:translate3d(0,-3px,0) rotate(-.8deg)}
}

/* ---------- tarjeta ---------- */
.go-cardwrap{ position:absolute; left:50%; top:50%; }
.go-slide, .go-lift, .go-float{ position:absolute; inset:0 }
.go.is-floating .go-float{ animation:go-cfloat 6s ease-in-out infinite }
@keyframes go-cfloat{
  0%,100%{transform:translate3d(0,0,0) rotateZ(0deg)}
  50%{transform:translate3d(0,-7px,0) rotateZ(.35deg)}
}
.go-persp{ position:absolute; inset:0; pointer-events:none; outline:none }
.go.is-live .go-persp{ pointer-events:auto; cursor:pointer }
.go-persp:focus-visible{ outline:3px solid rgba(255,255,255,.95); outline-offset:6px; border-radius:var(--go-rad) }
.go-flip{ position:absolute; inset:0; perspective:1500px; -webkit-perspective:1500px }
.go-flip .go-back, .go-flip.is-back .go-front{ opacity:0; visibility:hidden }
.go-flip.is-back .go-back, .go-flip.is-flipping .go-face{ opacity:1; visibility:visible }
.go-face{
  position:absolute; inset:0; overflow:hidden;
  border-radius:var(--go-rad);
  background:none; will-change:transform;   /* sin marco, borde ni sombra con contorno */
}
.go-front img{ width:100%; height:100%; object-fit:cover }
.go-slice{
  position:absolute; inset:0; border-radius:var(--go-rad);
  background:linear-gradient(90deg,#ffdcec,#fff7fb 50%,#ffd2e6);
}
.go-inner{ position:absolute; left:0; top:0; width:2000px; height:1294px; transform-origin:0 0; }
.go-inner img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.go-shine{
  position:absolute; inset:-10% -50%; pointer-events:none; z-index:9;
  background:linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.72) 50%, rgba(255,255,255,0) 60%);
  transform:translate3d(-100%,0,0);
}

/* ---------- partículas al abrir ---------- */
.go-fx{ position:absolute; inset:0; pointer-events:none; z-index:12 }
.go-p{
  position:absolute; left:0; top:0; display:block; max-width:none; pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(190,100,150,.18));
  opacity:0; will-change:transform,opacity;
}

/* ---------- interfaz: título arriba, barra de progreso abajo, botones ---------- */
.go-hit{
  position:absolute; z-index:30; border:0; padding:0; margin:0; background:transparent; cursor:pointer;
  border-radius:12px; outline:none; -webkit-appearance:none; appearance:none;
}
.go-hit:focus-visible{ outline:3px solid rgba(255,255,255,.95); outline-offset:4px }
.go-ui{ position:absolute; left:0; right:0; z-index:20; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 16px; pointer-events:none; text-align:center }

/* "¡AGÍTAME!" arriba: título blanco con puntos, como una pantalla de regalo */
.go-hint{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
.go-hint .go-h1{
  display:flex; align-items:center; justify-content:center; gap:.7em;
  font-weight:800; font-size:clamp(22px, 7.2vw, 44px); line-height:1.1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  color:#fff;
  text-shadow:0 2px 0 rgba(214,47,134,.35), 0 0 14px rgba(255,255,255,.75), 0 6px 22px rgba(150,70,190,.55);
}
.go-hint .go-h1 i{ width:.32em; height:.32em; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.9); flex:none; animation:go-dot 1.8s ease-in-out infinite }
.go-hint .go-h1 i:last-child{ animation-delay:-.9s }
@keyframes go-dot{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }
.go-hint .go-h2{
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:14px; letter-spacing:.02em; color:#fff;
  padding:5px 14px; border-radius:999px;
  background:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  text-shadow:0 1px 8px rgba(150,70,190,.45);
}
.go-hint .go-h2 svg{ width:18px; height:18px; flex:none }
.go-hint .go-phone{ animation:go-shake 1.5s ease-in-out infinite; transform-origin:50% 80% }
@keyframes go-shake{
  0%,55%,100%{transform:rotate(0)}
  10%{transform:rotate(-16deg) translateX(-2px)} 22%{transform:rotate(16deg) translateX(2px)}
  34%{transform:rotate(-12deg) translateX(-1px)} 46%{transform:rotate(10deg)}
}
.go-hint .go-finger{ animation:go-tap 1.6s ease-in-out infinite }
@keyframes go-tap{ 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(3px) scale(.92)} }
.go-hint.hide{ opacity:0; transform:translateY(-10px) }
.go-hint[hidden]{ display:none }
.go-motion-btn{
  pointer-events:auto; margin-top:2px; padding:7px 16px; border-radius:999px; border:1.5px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.3); color:#fff; font:700 12.5px 'Poppins','Raleway',system-ui,sans-serif; cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:0 1px 6px rgba(150,70,190,.5);
}
.go-motion-btn[hidden]{ display:none }

/* barra de progreso rosa mientras se abre el sobre */
.go-prog{
  position:absolute; left:50%; z-index:21; width:min(360px,84vw); height:46px; margin-left:calc(min(360px,84vw) / -2);
  padding:5px; border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 24px rgba(150,70,190,.25), inset 0 0 0 1.5px rgba(255,255,255,.95);
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.go-prog.show{ opacity:1; transform:none }
.go-prog .go-pt{ position:absolute; inset:5px; border-radius:999px; background:rgba(214,47,134,.13); overflow:hidden }
.go-prog .go-pf{
  position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(180deg,#ff9fca,#f0699f);
  transform-origin:0 50%; transform:scaleX(.04);
  transition:transform .9s cubic-bezier(.3,.1,.2,1);
}
.go-prog .go-pl{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; letter-spacing:.02em; color:#fff; text-shadow:0 1px 6px rgba(190,40,110,.55);
}

.go-tip{
  position:absolute; left:0; right:0; z-index:20; text-align:center;
  font-size:13px; font-weight:600; color:#fff; letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(150,70,190,.65), 0 0 16px rgba(255,255,255,.5);
  opacity:0; transition:opacity .6s ease; pointer-events:none;
}
.go.is-final .go-tip{ opacity:1 }
.go-tip.off{ opacity:0 !important }

.go-btn{
  position:absolute; z-index:40; top:max(12px, env(safe-area-inset-top)); display:flex; align-items:center; gap:6px;
  height:38px; padding:0 14px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgba(140,90,190,.2), inset 0 0 0 1px rgba(255,255,255,.7);
  font:700 13px 'Poppins','Raleway',system-ui,sans-serif; color:#a8346f;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.go-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px }
.go-btn:disabled{ opacity:.7 !important; cursor:default }
.go-replay{ left:max(12px, env(safe-area-inset-left)) }
.go-dl{ right:max(12px, env(safe-area-inset-right)) }
.go-close{ right:max(12px, env(safe-area-inset-right)); width:38px; padding:0; justify-content:center; opacity:1; pointer-events:auto; font-size:20px; line-height:1 }
.go.is-final .go-replay, .go.is-final .go-dl{ opacity:1; pointer-events:auto }

.go[data-loading="1"] .go-hit{ pointer-events:none }

@media (max-width:359px){ .go-hint .go-h1{ font-size:19px; letter-spacing:.04em; gap:.5em } .go-hint .go-h2{ font-size:12.5px } }
@media (prefers-reduced-motion: reduce){
  .go-bg, .go-bubble, .go-shard, .go-star, .go.is-idle .bob, .go.is-idle .go-shimmer::after,
  .go.is-floating .go-float, .go-hint .go-phone, .go-hint .go-finger, .go-wing, .go-wing svg, .go-hint .go-h1 i, .go-rot-i{ animation:none !important }
  .go-star{ opacity:.6 }
}

/* ---- girar el celular: aviso en vertical + modo horizontal (la tarjeta llena la pantalla) ---- */
.go-rot{
  position:absolute; left:50%; z-index:20; transform:translateX(-50%); display:flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; border-radius:999px; white-space:nowrap; pointer-events:none;
  font-weight:600; font-size:13px; letter-spacing:.02em; color:#fff;
  background:rgba(150,80,200,.34); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  text-shadow:0 1px 8px rgba(110,40,160,.6);
  opacity:0; transition:opacity .7s ease;
}
.go-rot svg{ width:22px; height:22px; flex:none; overflow:visible }
.go-rot-i{ transform-origin:12px 12px; animation:go-turn 3s ease-in-out infinite }
@keyframes go-turn{ 0%,18%{transform:rotate(0)} 45%,75%{transform:rotate(-90deg)} 100%{transform:rotate(0)} }
.go.is-final.can-rot .go-rot{ opacity:1 }
.go.is-final.can-rot .go-tip{ bottom:calc(env(safe-area-inset-bottom, 0px) + 34px) }

.go.is-wide .go-ui{ top:max(8px, env(safe-area-inset-top)) !important }
.go.is-wide .go-hint .go-h1{ font-size:clamp(18px, 6.4vh, 30px) }
.go.is-wide .go-hint .go-h2{ display:none }
.go.is-wide .go-btn{ top:max(8px, env(safe-area-inset-top)); width:36px; height:36px; padding:0; justify-content:center; gap:0; font-size:0 }
.go.is-wide .go-btn span{ font-size:17px; line-height:1 }
.go.is-wide .go-prog{ bottom:5px !important; height:30px; width:min(300px,50vw); margin-left:calc(min(300px,50vw) / -2) }
.go.is-wide .go-prog .go-pt{ inset:3px }
.go.is-wide .go-prog .go-pl{ font-size:12px }
.go.is-wide .go-prog.wide-off{ opacity:0 }
.go.is-wide .go-tip{ bottom:5px !important; font-size:12px }

/* ---- modo incrustado (/solicitar-tarjeta/): el escenario (cielo, nubes) lo pone la página ---- */
.go.go-embed{ background:transparent }
.go-embed .go-floor{ opacity:.7 }
.go-embed .go-hint .go-h1{ font-weight:700; letter-spacing:.05em }
.go-embed .go-tip{ bottom:calc(env(safe-area-inset-bottom, 0px) + var(--go-cta, 0px) + 12px) !important }
.go-embed .go-rot{ bottom:calc(env(safe-area-inset-bottom, 0px) + var(--go-cta, 0px) + 46px) !important }
.go-embed.is-wide .go-tip, .go-embed.is-wide .go-rot{ display:none }
.go-embed .go-close{ display:none }
.go.go-intro{ animation:go-intro .85s cubic-bezier(.2,.7,.2,1) both }
@keyframes go-intro{ from{ opacity:0; transform:translate3d(0,28px,0) scale(.9) } to{ opacity:1; transform:none } }
/* sobre del inicio: sólo decorativo, sin textos ni botones */
.go-display .go-ui, .go-display .go-prog, .go-display .go-tip, .go-display .go-rot, .go-display .go-btn, .go-display .go-hit{ display:none !important }
.go-display .go-floor{ display:none }
@media (prefers-reduced-motion: reduce){ .go.go-intro{ animation:none } }