:root{
  --crema:#F7F3EC; --crema-2:#EFE8DB; --tinta:#2E2A24; --tinta-suave:#6B6155;
  --salvia:#4F6F4C; --salvia-claro:#6E8B6B; --dorado:#B87333; --dorado-claro:#C99A5B;
  --blanco:#FFFFFF; --borde:#E4DBC9; --sombra:0 6px 24px rgba(46,42,36,.08);
  --radio:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--crema); color:var(--tinta);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--salvia);text-decoration:none}
img{max-width:100%;display:block}

/* topo */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:var(--blanco);border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:10;
}
.marca{display:flex;align-items:center;gap:12px}
.marca img{width:40px;height:40px;border-radius:10px;object-fit:cover}
.marca b{font-family:"Fraunces",serif;font-size:1.05rem;line-height:1.1}
.marca span{display:block;font-size:.72rem;color:var(--tinta-suave);letter-spacing:.02em}
.sesion{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--tinta-suave)}
.btn-salir{background:none;border:1px solid var(--borde);color:var(--tinta-suave);
  padding:6px 12px;border-radius:999px;cursor:pointer;font-size:.8rem}
.btn-salir:hover{border-color:var(--salvia);color:var(--salvia)}

.wrap{max-width:960px;margin:0 auto;padding:28px 20px 60px}

/* --- login --- */
.login-caja{
  max-width:440px;margin:8vh auto 0;background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:34px 30px;text-align:center;
}
.login-caja .icono{font-size:2rem}
.login-caja h1{font-size:1.6rem;margin:.4rem 0 .2rem}
.login-caja p.sub{color:var(--tinta-suave);margin:0 0 22px;font-size:.95rem}
.campo{text-align:left;margin-bottom:14px}
.campo label{display:block;font-size:.82rem;color:var(--tinta-suave);margin-bottom:6px;font-weight:600}
.campo input{
  width:100%;padding:13px 15px;border:1px solid var(--borde);border-radius:12px;
  font-size:1rem;background:var(--crema);color:var(--tinta);
}
.campo input:focus{outline:none;border-color:var(--salvia);background:var(--blanco)}
.btn{
  width:100%;padding:14px;border:none;border-radius:12px;cursor:pointer;
  background:var(--salvia);color:#fff;font-size:1rem;font-weight:600;letter-spacing:.01em;
  transition:background .15s;
}
.btn:hover{background:#3f5a3c}
.btn:disabled{opacity:.6;cursor:default}
.ayuda{font-size:.8rem;color:var(--tinta-suave);margin-top:16px}
.error{
  background:#FBEAE5;color:#9A3B23;border:1px solid #F0C7BB;border-radius:10px;
  padding:10px 12px;font-size:.85rem;margin-bottom:14px;text-align:left;
}

/* --- contenido --- */
.hero{margin-bottom:26px}
.hero .kicker{color:var(--dorado);font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.hero h1{font-size:2rem;margin:.25rem 0 .3rem}
.hero p{color:var(--tinta-suave);margin:0;max-width:60ch}

.seccion-titulo{display:flex;align-items:baseline;gap:10px;margin:34px 0 14px}
.seccion-titulo h2{font-size:1.25rem;margin:0}
.seccion-titulo .pill{font-size:.7rem;background:var(--crema-2);color:var(--tinta-suave);
  padding:3px 10px;border-radius:999px;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tarjeta{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sombra);
}
.tarjeta.destacada{border-color:var(--salvia-claro);background:linear-gradient(180deg,#fff, #F6F8F4)}
.tarjeta .tag{font-size:.7rem;color:var(--salvia);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tarjeta h3{font-size:1.08rem;margin:0}
.tarjeta p{margin:0;color:var(--tinta-suave);font-size:.9rem;flex:1}
.tarjeta .acciones{margin-top:6px}
.btn-desc{
  display:inline-flex;align-items:center;gap:8px;background:var(--salvia);color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;
}
.btn-desc:hover{background:#3f5a3c}

/* bloqueado / upsell */
.tarjeta.bloqueada{background:var(--crema-2);border-style:dashed;opacity:.96}
.tarjeta.bloqueada h3{color:var(--tinta-suave)}
.candado{font-size:1.1rem}
.btn-upsell{
  display:inline-flex;align-items:center;gap:8px;background:var(--dorado);color:#fff;
  padding:10px 16px;border-radius:10px;font-weight:600;font-size:.9rem;border:none;cursor:pointer;
}
.btn-upsell:hover{background:#a5652b}

.pie{margin-top:44px;padding-top:20px;border-top:1px solid var(--borde);
  color:var(--tinta-suave);font-size:.8rem;text-align:center}

/* modal de compra do upsell */
.modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(23,36,28,.55);backdrop-filter:blur(3px);
}
.modal-caja{
  position:relative;background:var(--blanco);border-radius:20px;max-width:420px;width:100%;
  padding:34px 28px 26px;text-align:center;box-shadow:0 20px 60px rgba(23,36,28,.35);
  animation:subir .18s ease-out;
}
@keyframes subir{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.1rem;
  color:var(--tinta-suave);cursor:pointer;line-height:1;padding:6px}
.modal-ico{font-size:2.2rem}
.modal-caja h3{font-family:"Fraunces",serif;font-size:1.35rem;margin:.4rem 0 .5rem;color:var(--tinta)}
.modal-caja>p{color:var(--tinta-suave);font-size:.95rem;margin:0 0 20px}
.modal-acciones{display:flex;flex-direction:column;gap:10px}
.modal-acciones .btn-upsell{width:100%;justify-content:center;padding:14px;font-size:1rem}
.modal-acciones .btn-upsell:disabled{opacity:.55;cursor:default}
.btn-cancelar{width:100%;background:none;border:1px solid var(--borde);color:var(--tinta-suave);
  padding:12px;border-radius:10px;cursor:pointer;font-size:.95rem}
.btn-cancelar:hover{border-color:var(--dorado);color:var(--dorado)}
.modal-nota{font-size:.78rem;color:var(--tinta-suave);margin:16px 0 0}
.tarjeta.bloqueada[data-comprar]{cursor:pointer}
.tarjeta.bloqueada[data-comprar]:hover{border-color:var(--dorado)}

.oculto{display:none!important}
.cargando{text-align:center;padding:60px 20px;color:var(--tinta-suave)}
@media(max-width:520px){
  .hero h1{font-size:1.6rem}
  .login-caja{margin-top:5vh;padding:28px 22px}
}