/* Mi Segunda Casa · el globo con el regalo (guía gratuita a cambio del correo) · PRIME STUDIOS · 21 oct 2026
   El movimiento lo maneja regalo.js; aquí solo hay formas, posiciones y animaciones de transform y opacity. */

.regalo{position:fixed;left:0;bottom:0;z-index:45;width:0;height:0}
.regalo[hidden],.rg-globo[hidden],.rg-caja[hidden],.rg-quitar[hidden],.rg-chispas[hidden]{display:none}

/* ---------- el globo ---------- */
.rg-globo{position:absolute;left:30px;bottom:calc(84px + env(safe-area-inset-bottom));width:104px;display:flex;flex-direction:column;align-items:center;will-change:transform}
.rg-cuerpo{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 96%;will-change:transform;-webkit-tap-highlight-color:transparent}
.rg-cuerpo svg{display:block;width:100%;height:auto;overflow:visible}
.rg-cuerpo:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:50%}
.rg-hilo{display:block;width:38%;height:auto;margin-top:-3px;overflow:visible}
.rg-hilo path{fill:none;stroke:#8B7B70;stroke-width:1.6;stroke-linecap:round}
@media (min-width:900px){.rg-globo{left:48px;bottom:112px;width:128px}}

/* ---------- el regalo ---------- */
.rg-caja{position:absolute;left:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:68px;height:68px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rg-caja svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.rg-caja:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:16px}
.rg-caja::before{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,214,140,0) 68%);opacity:0;pointer-events:none}
.rg-caja.quieto::before{animation:rgAura 2.6s ease-in-out infinite}
@keyframes rgAura{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.75;transform:scale(1.06)}}
.rg-caja.quieto svg{animation:rgSalto 3.8s cubic-bezier(.3,.7,.4,1) .9s infinite}
@keyframes rgSalto{0%,70%,100%{transform:translateY(0) rotate(0)}76%{transform:translateY(-11px) rotate(-7deg)}82%{transform:translateY(0) rotate(5deg)}88%{transform:translateY(-4px) rotate(-2deg)}94%{transform:translateY(0) rotate(0)}}
.rg-caja.entra{animation:rgEntra .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes rgEntra{0%{opacity:0;transform:translateY(24px) scale(.4)}100%{opacity:1;transform:none}}
.rg-tapa{transform-box:fill-box;transform-origin:0% 100%;transition:transform .45s cubic-bezier(.2,.9,.3,1.25),opacity .3s .18s}
.rg-caja.abriendo .rg-tapa{transform:translate(-4px,-30px) rotate(-34deg);opacity:0}
.rg-caja.abriendo svg{animation:none}
.rg-luz{position:absolute;left:50%;top:40%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,206,.98),rgba(255,214,120,.55) 40%,rgba(255,214,120,0) 70%);opacity:0;transform:scale(.2);pointer-events:none}
.rg-caja.abriendo .rg-luz{animation:rgLuz .55s ease-out forwards}
@keyframes rgLuz{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(2.3)}}
.rg-etiqueta{position:absolute;left:calc(100% + 8px);top:18px;white-space:nowrap;background:var(--green-ink);color:#FBF4EA;font-family:var(--f-body);font-weight:700;font-size:.8rem;line-height:1;padding:8px 12px;border-radius:999px;box-shadow:0 8px 18px -10px rgba(0,0,0,.5);opacity:0;transform:translateX(-6px) scale(.9);transform-origin:left center;transition:opacity .35s .25s,transform .5s cubic-bezier(.34,1.56,.64,1) .25s;pointer-events:none}
.rg-etiqueta::before{content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;background:inherit;transform:rotate(45deg);border-radius:2px}
.rg-caja.quieto .rg-etiqueta{opacity:1;transform:none}
.rg-quitar{position:absolute;left:8px;bottom:calc(74px + env(safe-area-inset-bottom));width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#FFFDF7;color:var(--green-ink);font-size:1.05rem;line-height:28px;text-align:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.4);cursor:pointer}
.rg-chispas{position:fixed;left:0;bottom:0;pointer-events:none}
@media (min-width:900px){.rg-caja{left:30px;bottom:30px;width:78px;height:78px}.rg-quitar{left:20px;bottom:98px}}

/* ---------- la ventana de la guía (hoja que sube en celular, tarjeta al centro en computador) ---------- */
.guia{position:fixed;inset:0;z-index:70;display:grid;align-items:end;justify-items:center}
.guia[hidden]{display:none}
html.guia-abierta{overflow:hidden}
.guia-fondo{position:absolute;inset:0;background:rgba(20,32,27,.56);opacity:0;transition:opacity .4s}
.guia.abierta .guia-fondo{opacity:1}
.guia-hoja{position:relative;width:100%;max-height:92vh;max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:#FFFDF7;border-radius:28px 28px 0 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(104%);transition:transform .55s cubic-bezier(.22,1,.36,1);box-shadow:0 -20px 40px -24px rgba(0,0,0,.4)}
.guia.abierta .guia-hoja{transform:none}
.guia-hoja:focus{outline:0}
.guia-x{position:absolute;top:12px;right:12px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(43,58,51,.07);color:var(--green-ink);font-size:1.4rem;line-height:40px;cursor:pointer}
.guia-portada{display:grid;place-items:center;margin:0 0 18px}
.gp-libro{position:relative;width:118px;aspect-ratio:3/4;padding:14px 12px;border-radius:5px 12px 12px 5px;background:linear-gradient(160deg,#C4D1B4,#93A982);color:#FBF4EA;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-5deg);box-shadow:inset 7px 0 0 rgba(0,0,0,.08),0 18px 30px -16px rgba(30,50,40,.65);overflow:hidden}
.gp-libro::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 86%,#F0B46C 0 7px,transparent 8px),radial-gradient(circle at 84% 14%,#84CCE4 0 6px,transparent 7px),radial-gradient(circle at 86% 78%,#C0E478 0 5px,transparent 6px);opacity:.9}
.gp-libro img{position:relative;width:44px;height:auto;padding:4px;background:#FFFDF7;border-radius:50%}
.gp-t{position:relative;margin-top:8px;font-family:var(--f-display);font-weight:500;font-size:.86rem;line-height:1.15}
.gp-s{position:relative;margin-top:6px;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.guia-texto .kicker{margin-bottom:8px}
.guia-titulo{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,1.6vw + 1rem,2rem);line-height:1.12;color:var(--green-ink)}
.guia-bajada{margin:10px 0 0;color:var(--text-secondary)}
.guia-puntos{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:8px}
.guia-puntos li{position:relative;padding-left:28px;line-height:1.4}
.guia-puntos li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--accent)}
.guia-puntos li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.guia .aviso-form{display:grid;gap:8px}
.guia .aviso-fila{margin-top:0}
.guia .campo-error{margin:0}
.guia .check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.4;color:var(--text-secondary);cursor:pointer}
.guia .check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.guia-nota{margin:2px 0 0;font-size:.8rem;color:var(--text-secondary)}
.guia-ok{display:grid;gap:12px;justify-items:start;background:rgba(192,228,120,.3);border-radius:14px;padding:14px 16px}
.guia-ok[hidden]{display:none}
.guia-ok p{margin:0}
@media (max-width:480px){.guia .aviso-fila .btn{padding:10px 14px;font-size:.92rem}}
@media (min-width:760px){
  .guia{align-items:center}
  .guia-hoja{width:min(780px,100% - 48px);border-radius:28px;padding:38px 38px 32px;display:grid;grid-template-columns:200px 1fr;column-gap:34px;align-items:center;opacity:0;transform:translateY(26px) scale(.96);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .35s}
  .guia.abierta .guia-hoja{opacity:1;transform:none}
  .guia-portada{margin:0}
  .gp-libro{width:170px;padding:20px 16px}
  .gp-libro img{width:58px}
  .gp-t{font-size:1.08rem}
  .gp-s{font-size:.56rem}
}
@media (prefers-reduced-motion:reduce){
  .rg-caja.quieto svg,.rg-caja.quieto::before,.rg-caja.entra{animation:none}
  .guia-hoja,.guia-fondo,.rg-etiqueta{transition:none}
}
.guia-puntos[hidden],.guia-ok .btn[hidden]{display:none}

/* con «reducir movimiento»: aparece y se va con un fundido */
.rg-globo.suave{animation:rgAparece .6s ease both}
@keyframes rgAparece{from{opacity:0}to{opacity:1}}
.rg-globo.sale{opacity:0;transition:opacity .35s}