/* COFEE — Panel Cafeterías — Colores clásicos AXIS PRO + café */
*{box-sizing:border-box}
:root{
  --bg:#f4efe7;
  --bg-card:#ffffff;
  --bg-dark:#020617;
  --bg-card-dark:#081426;
  --gold:#c9a84c;
  --gold-light:#fbbf24;
  --gold-accent:#fde047;
  --text-dark:#2d241d;
  --text:#cbd5e1;
  --muted:#94a3b8;
  --muted-coffee:#6b5a4a;
  --emerald:#10b981;
  --emerald-light:#34d399;
  --blue:#38bdf8;
  --rose:#fb7185;
  --border:#dfd4c7;
  --border-dark:rgba(201,168,76,0.3);
  --radius:20px;
}
body{margin:0;background:var(--bg);color:var(--text-dark);font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.wrap{width:min(1080px,calc(100% - 24px));margin:auto;padding:18px 0 80px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font:800 20px Georgia,serif;color:#6b3e22}
.hero,.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(18px,4vw,32px);margin:14px 0;box-shadow:0 10px 30px #4b2b1612}
.hero{background:radial-gradient(800px 400px at 10% 10%, rgba(201,168,76,0.15), transparent), linear-gradient(135deg,#402719,#1a0f0a 60%, #020617);color:white;border-color:var(--border-dark)}
.hero h1{font:700 clamp(1.8rem,6vw,3.2rem)/1.05 Georgia,serif;margin:.2em 0;color:#fff}
.hero p{color:#f3dfc9}
.btn,button{display:inline-block;border:0;border-radius:999px;padding:11px 18px;background:#8b4f28;color:#fff;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .15s, background .2s}
.btn:hover,button:hover{transform:translateY(-1px);background:#9c5a2f}
.btn.alt{background:#ead9c6;color:#4b2d1c;border:1px solid #d9c4ad}
.btn.alt:hover{background:#f3e2cd}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
@media(max-width:700px){.grid{grid-template-columns:1fr}.top{flex-direction:column;align-items:flex-start}}
.product{background:#fffaf5;border:1px solid #e6d6c6;border-radius:16px;padding:16px;transition:border-color .2s, transform .2s}
.product:hover{border-color:var(--gold);transform:translateY(-2px)}
.product h3{margin:.2em 0;color:#663b22;font-size:16px}
.tag{display:inline-block;padding:4px 8px;border-radius:99px;background:#efe1d2;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.balance{font-size:2rem;font-weight:900;color:#7c441f}
.balance.money{color:#17633a}
label{display:block;font-size:12.5px;font-weight:800;margin:12px 0 5px;letter-spacing:.02em;text-transform:uppercase;color:#5a4636}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfbead;border-radius:11px;background:#fff;font-size:15px;outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
.notice{padding:12px 14px;border-radius:12px;background:#fff4cf;border:1px solid #e5c86d;font-size:13px;margin:10px 0}
.notice.ok{background:#e3f5e9;border-color:#86c69b}
.table{overflow:auto;border:1px solid #eadfd4;border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:680px;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #eadfd4}
th{background:#f7efe6;color:#6b3e22;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.money{color:#17633a;font-weight:900}
code{background:#f4efe7;padding:2px 6px;border-radius:6px;font-size:12px}
small{color:var(--muted-coffee)}

/* ===================================================================
   EL ESQUELETO ULTRA-LITE · lo que se lleva gratis quien se registra
   =================================================================== */
.esq-cabeza{background:linear-gradient(135deg,#402719,#1a0f0a 60%,#020617);
  color:#f4efe7;border-radius:20px;padding:26px 22px;margin:16px 0}
.esq-cabeza .quien{margin:0 0 6px;font-size:12.5px;letter-spacing:1.5px;
  text-transform:uppercase;color:#c9a84c}
.esq-cabeza h1{margin:0;font-family:Georgia,serif;font-size:27px;line-height:1.2;color:#fff}
.esq-cabeza .sub{margin:8px 0 0;font-size:14.5px;color:#e8ddcf}
.esq-cabeza .cuenta{margin:14px 0 0;font-size:13px;color:#cbb79a}
.esq-cabeza .cuenta b{color:#f0d9a8}

.esq-regalo{border:2px solid #c9a84c}
.esq-regalo .etiqueta{margin:0 0 14px;display:inline-block;background:#c9a84c;
  color:#2d241d;font-size:11.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:5px 12px;border-radius:20px}

.bloque-abierto h3{margin:0 0 10px;font-family:Georgia,serif;font-size:19px;color:#6b3e22}
.bloque-abierto h3 .ico{color:#c9a84c}
.bloque-abierto p{margin:0 0 11px;font-size:15.5px;line-height:1.62;color:#2d241d}
.bloque-abierto p:last-child{margin-bottom:0}

.h-falta{margin:0 0 4px}
.bloques-cerrados{display:grid;gap:10px;margin-top:14px}
.bloque-cerrado{border:1px solid #dfd4c7;border-radius:14px;padding:13px 15px;background:#faf7f2}
.bloque-cerrado .cab{display:flex;align-items:center;gap:8px;font-size:15px;color:#2d241d}
.bloque-cerrado .cab .ico{color:#c9a84c}
.bloque-cerrado .candado{margin-left:auto;font-size:14px;opacity:.5}
.bloque-cerrado .velo{margin-top:9px;display:grid;gap:6px}
.bloque-cerrado .renglon{display:block;height:9px;border-radius:5px;
  background:linear-gradient(90deg,#e6ddd0,#f2ece2);opacity:.9}
.bloque-cerrado .renglon:nth-child(2){width:92%}
.bloque-cerrado .renglon:nth-child(3){width:78%}
.bloque-cerrado .renglon:nth-child(4){width:86%}

.cierre-esqueleto{background:#fff;border:2px dashed #c9a84c;border-radius:20px;
  padding:22px;margin:16px 0;text-align:center}
.cierre-esqueleto .frase{margin:0;font-family:Georgia,serif;font-size:20px;
  line-height:1.35;color:#6b3e22;font-weight:700}
.cierre-esqueleto .chico{margin:9px 0 0;font-size:14px;color:#6b5a4a}

.esq-otras{display:grid;gap:10px;margin-top:12px}
.esq-otra{display:block;border:1px solid #dfd4c7;border-radius:14px;padding:12px 14px;
  text-decoration:none;background:#fff}
.esq-otra:hover{border-color:#c9a84c}
.esq-otra .cat{display:block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#c9a84c}
.esq-otra b{display:block;margin:3px 0;color:#2d241d;font-size:15px}
.esq-otra .mut{font-size:13px;color:#6b5a4a}

/* ---- Mi gente: relacionar personas y cambiar la mirada ---- */
.form-gente label{display:block;margin:0 0 12px;font-size:14px;color:#2d241d}
.form-gente input,.form-gente select{display:block;width:100%;margin-top:5px;
  padding:11px 13px;border:1px solid #dfd4c7;border-radius:12px;font-size:15px;
  background:#fff;color:#2d241d;box-sizing:border-box}
.form-gente input:focus,.form-gente select:focus{outline:none;border-color:#c9a84c}
.lista-gente{display:grid;gap:12px;margin-top:12px}
.persona{border:1px solid #dfd4c7;border-radius:16px;padding:15px 16px;background:#fff}
.persona .cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.persona .cab b{font-size:17px;color:#2d241d}
.persona .chico{font-size:12.5px;color:#8a7866;margin:4px 0 0}
.cambiar{margin:12px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pild{display:inline-block;border:1px solid #dfd4c7;background:#faf7f2;color:#6b5a4a;
  border-radius:20px;padding:6px 13px;font-size:13px;cursor:pointer;font-family:inherit}
.pild:hover{border-color:#c9a84c;color:#2d241d}
.pild.activa{background:#c9a84c;border-color:#c9a84c;color:#2d241d;font-weight:700;cursor:default}
.persona .acciones{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.persona .acciones .btn{font-size:13px;padding:8px 14px}