/* Recordatorio de Vívelo para quien vuelve del checkout sin comprar.
   El HTML está en index.html (#keep) y la lógica en main.js.
   Va en archivo aparte para no tocar el <style> de index.html ni su hash CSP. */

.keep-back[hidden]{display:none}
.keep-back{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(28,29,26,.58);
  animation:keep-fade .18s ease-out both;
}
.keep-card{
  position:relative; width:100%; max-width:420px;
  max-height:calc(100vh - 32px); overflow-y:auto;
  padding:26px 22px 22px;
  background:var(--bone,#F7F5F0); color:var(--ink,#1C1D1A);
  border-radius:18px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55);
  font-family:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  animation:keep-rise .22s ease-out both;
}
.keep-card h2{
  font-family:"Fraunces",Georgia,serif; font-weight:900;
  font-size:clamp(22px,6vw,27px); line-height:1.05;
  letter-spacing:-.01em; margin:0 0 12px; padding-right:28px;
}
.keep-card p{margin:0 0 12px; font-size:15.5px; line-height:1.5; color:var(--ink-2,#4A4E46)}
.keep-card p b{color:var(--ink,#1C1D1A)}
.keep-soon{
  display:inline-block; margin-bottom:12px; padding:4px 11px;
  border-radius:999px; background:var(--green-lt,#E4EFDF); color:var(--green-dk,#22522A);
  font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}
.keep-go{
  display:block; width:100%; margin-top:18px; padding:14px 16px;
  font:inherit; font-weight:900; font-size:16.5px; text-align:center; text-decoration:none;
  border-radius:999px; cursor:pointer;
  background:var(--orange,#EF6229); color:#fff; border:1.5px solid var(--orange,#EF6229);
  box-shadow:0 8px 20px -8px var(--orange-sh,rgba(220,79,22,.34));
}
.keep-go:hover{background:var(--orange-dk,#DC4F16); border-color:var(--orange-dk,#DC4F16)}
.keep-stay{
  display:block; width:100%; margin-top:10px; padding:9px;
  font:inherit; font-weight:700; font-size:14.5px; color:var(--ink-3,#6E736A);
  background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;
}
.keep-stay:hover{color:var(--ink,#1C1D1A)}
.keep-x{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; line-height:1;
  font:inherit; font-size:21px; color:var(--ink-3,#6E736A);
  background:none; border:0; border-radius:999px; cursor:pointer;
}
.keep-x:hover{background:var(--stone,#EFEFE9); color:var(--ink,#1C1D1A)}
.keep-card :focus-visible,
.keep-x:focus-visible{outline:3px solid var(--y,#F7C948); outline-offset:2px}

@keyframes keep-fade{from{opacity:0} to{opacity:1}}
@keyframes keep-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .keep-back,.keep-card{animation:none}
}

/* el fondo no se desplaza mientras la ventana está abierta */
body.keep-lock{overflow:hidden}