:root{
  --ink:#241f1b; --muted:#6a645d; --soft:#9a948c;
  --line:#ece6dc; --bg:#fbf7f1; --card:#fff;
  --coral:#e85d2c; --coral2:#ff8a4b; --coral-bg:#fbe9df; --coral-ink:#7a2f12;
  --teal:#15a07a; --teal-bg:#e1f5ee; --teal-ink:#0c5742;
  --amber:#e0951f; --amber-bg:#fbefd6;
  --violet:#6e63d6;
  --shadow:0 6px 20px -12px rgba(60,40,25,.4);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1020px; margin:0 auto; padding:0 20px;}
h1,h2,h3{font-weight:700; letter-spacing:-.4px; margin:0;}
p{margin:0;}

/* header */
header.top{background:linear-gradient(120deg,#e85d2c,#f0813a 60%,#f4a93f); color:#fff;}
header.top .wrap{display:flex; align-items:center; gap:14px; padding:14px 20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700; letter-spacing:-.5px;}
.brand img{width:40px; height:40px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));}
.nav{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;}
.nav a{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600;}
.nav a.active{background:#fff; color:var(--coral);}

.hero-mini{background:linear-gradient(120deg,#e85d2c,#f0813a 60%,#f4a93f); color:#fff; padding:26px 0 34px;}
.hero-mini h1{font-size:32px;}
.hero-mini p{color:rgba(255,255,255,.92); margin-top:6px; max-width:560px;}

main{padding:28px 0 70px;}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow);}
.btn{display:inline-block; border:0; cursor:pointer; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:12px; background:linear-gradient(120deg,var(--coral),var(--coral2)); color:#fff;}
.btn.small{padding:8px 14px; font-size:13px; border-radius:10px;}
.btn.ghost{background:#fff; color:var(--coral); border:2px solid var(--coral);}
.btn.teal{background:var(--teal);}
.btn.gray{background:#8a857d;}
.btn.danger{background:#c0392b;}
.pill{display:inline-block; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;}
.pill.coral{background:var(--coral-bg); color:var(--coral-ink);}
.pill.teal{background:var(--teal-bg); color:var(--teal-ink);}
.pill.amber{background:var(--amber-bg); color:#7a5306;}
.pill.gray{background:#eee9e1; color:#5f5a52;}
.muted{color:var(--muted);} .soft{color:var(--soft);}

/* grid vitrina */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.pcard{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .15s ease; display:flex; flex-direction:column;}
.pcard:hover{transform:translateY(-3px);}
.pcard .ph{aspect-ratio:1; background:#f4efe8; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pcard .ph img{width:100%; height:100%; object-fit:cover;}
.pcard .body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1;}
.pcard .t{font-weight:700; font-size:15px; line-height:1.35;}
.pcard .price{font-size:19px; font-weight:800; color:var(--coral); margin-top:auto;}
.pcard .shop{font-size:12.5px; color:var(--soft);}

.search{display:flex; gap:10px; margin:-24px 0 26px; position:relative; z-index:2; flex-wrap:wrap;}
.search input,.search select{flex:1; min-width:160px; padding:13px 16px; border-radius:12px;
  border:1px solid var(--line); font-size:15px; background:#fff; box-shadow:var(--shadow);}

/* formularios */
form.stack{display:flex; flex-direction:column; gap:12px;}
form.stack label{font-size:13px; font-weight:700; color:var(--muted);}
form.stack input, form.stack textarea, form.stack select{width:100%; padding:12px 14px; font-size:15px;
  border:1px solid var(--line); border-radius:10px; background:#fff; font-family:inherit;}

/* tablas panel */
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--soft); padding:8px 10px; border-bottom:2px solid var(--line);}
td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:0;}

.demo-banner{background:var(--amber-bg); border:1px solid #f0d9a8; color:#7a5306;
  border-radius:12px; padding:10px 16px; font-size:13.5px; font-weight:600; margin-bottom:18px;}

/* pasos de estado */
.steps{display:flex; gap:6px; flex-wrap:wrap; margin:14px 0;}
.step{font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; background:#eee9e1; color:#8a857d;}
.step.done{background:var(--teal-bg); color:var(--teal-ink);}
.step.now{background:var(--coral); color:#fff;}

/* chat simulador */
.chat{display:flex; flex-direction:column; gap:10px; max-width:640px;}
.bubble{padding:12px 16px; border-radius:16px; max-width:85%; font-size:14.5px;}
.bubble.me{background:var(--coral-bg); color:var(--coral-ink); align-self:flex-end; border-bottom-right-radius:4px;}
.bubble.bot{background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px; box-shadow:var(--shadow);}
.bubble.bot .ph{max-width:220px; border-radius:10px; margin-bottom:8px; display:block;}

section.block{margin-bottom:36px;}
section.block > h2{font-size:21px; margin-bottom:14px;}
footer.bottom{background:var(--ink); color:rgba(255,255,255,.65); padding:26px 0; font-size:13.5px;}
footer.bottom .wrap{display:flex; align-items:center; gap:10px;}
@media(max-width:600px){ .hero-mini h1{font-size:25px;} }