/* App de miembros: misma paleta kraft que las páginas de entrega de la colección. */
:root{
  --kraft:#C8A27A; --kraft-oscuro:#9C7650; --kraft-claro:#F3E7D6; --papel:#FFFDF8; --tinta:#3B2A1E; --tinta-suave:#6B5747;
  --verde:#3E9B4F; --verde-oscuro:#2F7A3D; --amarillo:#F4C430; --borde:#E5D5C0; --radio:18px; --sombra:0 2px 10px rgba(59,42,30,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--kraft-claro);color:var(--tinta);font:17px/1.55 "Trebuchet MS","Segoe UI",Arial,sans-serif;
  -webkit-text-size-adjust:100%;padding-bottom:env(safe-area-inset-bottom)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1{font-size:1.7rem;line-height:1.15;margin:22px 0 14px}
h2{font-size:1.25rem;margin:28px 0 12px}
.barra{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--kraft-oscuro);color:#fff;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.marca{font-weight:800;text-decoration:none;letter-spacing:.02em}
.salir{font-size:.9rem;opacity:.85}
.envoltura{max-width:760px;margin:0 auto;padding:0 16px 48px}

/* Entrar */
.entrar{background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);padding:22px;margin-top:28px}
.entrar h1{margin-top:0}
form{display:grid;gap:10px;margin:18px 0}
label{font-weight:700}
input{font:inherit;padding:14px;border:2px solid var(--borde);border-radius:12px;background:#fff;width:100%}
input:focus{outline:none;border-color:var(--kraft-oscuro)}
button,.boton{font:inherit;font-weight:700;border:0;border-radius:14px;padding:15px 18px;background:var(--verde);color:#fff;
  text-align:center;text-decoration:none;cursor:pointer;display:block}
button:hover,.boton:hover{background:var(--verde-oscuro)}
.boton.secundario{background:transparent;color:var(--tinta);border:2px solid var(--borde)}
.aviso{background:#FFF4D1;border-left:6px solid var(--amarillo);border-radius:12px;padding:12px 14px}
.ok{background:#E3F3E5;border-left:6px solid var(--verde);border-radius:12px;padding:12px 14px}
.ayuda{font-size:.9rem;color:var(--tinta-suave)}
.prueba,.ok,.aviso{overflow-wrap:anywhere}
.prueba{font-size:.8rem;word-break:break-all;background:#fff;border:1px dashed var(--kraft-oscuro);padding:8px;border-radius:8px}

/* Inicio */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.grilla.grande{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tarjeta{position:relative;background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);padding:12px;
  text-decoration:none;display:grid;gap:6px;align-content:start}
.tarjeta img{border-radius:12px;aspect-ratio:4/5;object-fit:cover;width:100%}
.tarjeta b{font-size:1.05rem;line-height:1.25}
.tarjeta small{color:var(--tinta-suave);line-height:1.35}
.tarjeta .abrir{margin-top:4px;background:var(--verde);color:#fff;font-weight:700;border-radius:10px;padding:9px;text-align:center}
.tarjeta.cerrada{box-shadow:none;border:1px solid var(--borde);background:rgba(255,253,248,.6)}
.tarjeta.cerrada img{filter:saturate(.75)}
.tarjeta .ver{font-size:.9rem;font-weight:700;color:var(--kraft-oscuro)}
.cinta{position:absolute;top:18px;left:18px;z-index:1;background:var(--amarillo);color:var(--tinta);font-weight:800;font-size:.8rem;
  border-radius:8px;padding:4px 8px}
h2.mas{font-size:1.05rem;color:var(--tinta-suave);margin-top:34px}
.vacio{background:var(--papel);border-radius:var(--radio);padding:16px}
.banner{display:grid;gap:2px;margin-top:18px;background:var(--tinta);color:#fff;border-radius:var(--radio);padding:14px 16px;text-decoration:none}
.banner span{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amarillo);font-weight:800}
.banner small{opacity:.8}

/* Ficha y venta */
.volver{display:inline-block;margin-top:16px;font-size:.95rem;color:var(--tinta-suave)}
.ficha,.venta{background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px;margin-top:12px}
.ficha h1,.venta h1{margin-top:4px}
.portada{border-radius:14px;margin:0 auto 12px;max-height:420px;width:auto}
.acciones{display:grid;gap:10px;margin:18px 0}
.vsl{width:100%;border-radius:14px;background:#000;margin:6px 0 18px}
.historia p{margin:0 0 12px}
.lista{padding-left:0;list-style:none;display:grid;gap:8px}
.lista li{padding-left:28px;position:relative}
.lista li::before{content:"✓";position:absolute;left:4px;color:var(--verde);font-weight:800}
.muestra{border-radius:14px}
.caja-compra{display:grid;gap:10px;margin-top:22px;padding-top:18px;border-top:2px dashed var(--borde)}
.precio{font-size:1.3rem;font-weight:800;margin:0}
.nota-oferta{margin:0;font-weight:700;color:var(--kraft-oscuro)}
.garantia{font-size:.9rem;color:var(--tinta-suave);margin:0}
.pronto{background:var(--kraft-claro);border-radius:12px;padding:12px;margin:0}

/* Lector */
.lector-titulo{font-size:1.2rem}
.lector{display:grid;gap:10px}
.lector canvas{width:100%;height:auto;background:#fff;border-radius:6px;box-shadow:var(--sombra)}
.lector .hueco{background:#fff;border-radius:6px;display:grid;place-items:center;color:var(--tinta-suave);font-size:.9rem}