*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ece5db;
  --panel:#ffffff;
  --panel2:#f3eee4;
  --line:#e3dac9;
  --ink:#332a20;
  --soft:#6b6255;
  --head:#211a12;
  --gold:#96773f;
  --goldD:#725a3d;
  --dark:#120d08;
  --onGold:#1a130b; /* color de texto/iconos sobre fondos dorados — antes repetido a mano por toda la app */
  --onDark:#e9ddca; /* texto principal sobre fondos oscuros — antes repetido a mano más de 20 veces */
  --onDarkSoft:#a99a86; /* texto secundario sobre fondos oscuros — antes repetido a mano más de 20 veces */
  --green:#5a6a3a;
  --signature:#b5624a;
  --rad:14px;
  /* Escala de referencia para texto y radios — úsalo en TODO lo nuevo que se
     añada a partir de ahora, en vez de elegir un número suelto a ojo:
     Texto:  --text-xs:.7rem  --text-sm:.78rem  --text-base:.85rem  --text-lg:.95rem
     Radios: --rad-sm:8px  --rad-md:14px (=--rad)  --rad-lg:18px  --rad-pill:999px */
  --text-xs:.7rem;
  --text-sm:.78rem;
  --text-base:.85rem;
  --text-lg:.95rem;
  --rad-sm:8px;
  --rad-lg:18px;
  --rad-pill:999px;
  --display:'Cormorant Garamond',serif;
  --body:'Jost',sans-serif;
}
body{background:var(--bg) radial-gradient(ellipse 120% 60% at 50% -10%, rgba(169,138,92,.10) 0%, rgba(169,138,92,0) 55%);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:40;background:rgba(236,229,219,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:0 2px 12px rgba(58,48,38,.04)}
.brand{font-family:var(--display);font-weight:600;letter-spacing:.42em;font-size:1.05rem;color:var(--head);padding-left:.42em}
.hi{font-size:.78rem;color:var(--soft);font-family:var(--body);font-style:italic}
.look-builder-row{height:560px}
.look-builder-canvas{width:100%}
@media (max-width:700px){
  .look-builder-row{flex-direction:column;height:auto}
  .look-builder-canvas{width:100%!important;height:360px}
  .look-builder-row>div:last-child{height:420px}
}
@media (max-width:480px){
  .hi{display:none}
  .topbar{padding:10px 12px;gap:.4rem}
  .topbar .toggle button{padding:.28rem .55rem;font-size:.72rem}
  #lang-btn{padding:.28rem .55rem}
}
.toggle{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:.18rem}
.toggle button{background:none;border:0;font-size:.78rem;color:var(--soft);padding:.28rem .7rem;border-radius:999px;cursor:pointer;transition:background .15s;font-family:var(--body)}
.toggle button.on{background:var(--gold);color:var(--onGold)}

/* ── BOTTOM NAV (reemplaza tabs) ── */
.bottom-nav{position:fixed;left:10px;right:10px;bottom:10px;z-index:30;background:rgba(255,253,249,.92);backdrop-filter:blur(16px);border:1px solid rgba(169,138,92,.18);border-radius:26px;display:flex;justify-content:space-around;padding:6px 4px;box-shadow:0 14px 40px rgba(58,48,38,.16),0 2px 8px rgba(58,48,38,.06)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;cursor:pointer;padding:5px 6px;color:var(--soft);min-width:52px;flex:1;transition:color .15s}
.nav-item.on{color:var(--head)}
.nav-item.on .nav-icon{background:var(--gold);color:var(--onGold)}
.nav-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:background .25s ease,transform .2s ease,box-shadow .25s ease;background:transparent}
.nav-item.on .nav-icon{transform:translateY(-3px);box-shadow:0 6px 14px rgba(169,138,92,.45)}
.nav-label{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;font-family:var(--body);line-height:1;white-space:nowrap}

/* ── PAGES ── */
.page{display:none;max-width:900px;margin:0 auto;padding:18px 16px 100px}
.page.show{display:block;animation:pageIn .32s cubic-bezier(.22,.61,.36,1)}
#app{display:flex;flex-direction:column;align-items:center}
#app>.topbar{width:100%}
#page-armario{max-width:none;padding:0}
#page-estilista.sheet-mode{position:fixed;left:0;right:0;bottom:0;top:32%;max-width:600px;margin:0 auto;background:var(--panel);border-radius:22px 22px 0 0;box-shadow:0 -14px 34px rgba(22,17,11,.22);z-index:150;padding:0}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes estTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── SECTION PILL (badge numerado tipo "① MI ARMARIO") ── */
.section-pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--dark);color:#e9ddca;font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px;margin-bottom:1.1rem;box-shadow:0 3px 10px rgba(22,17,11,.22)}
.section-pill .num{display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}

/* ── TIPO ── */
.h1{font-family:var(--display);font-weight:500;color:var(--head);font-size:clamp(2.3rem,8vw,3.1rem);line-height:.98;margin-bottom:.3rem;letter-spacing:-.015em}
.h1 em{font-style:italic;color:var(--gold)}
.h2{font-family:var(--display);font-weight:500;color:var(--head);font-size:clamp(1.6rem,5.5vw,2.05rem);line-height:1.05;margin-bottom:.3rem;letter-spacing:-.01em}
.kick{font-family:var(--body);text-transform:uppercase;letter-spacing:.34em;font-size:.72rem;color:var(--gold);display:block;margin-bottom:.5rem;font-weight:700}
.sub{color:var(--soft);font-size:1.05rem;margin-bottom:1.3rem;font-family:var(--body);font-style:italic;line-height:1.55}

/* ── HERO MASTHEAD (momentos editoriales de alto contraste) ── */
.hero-mast{position:relative;background:linear-gradient(155deg,#f6f0e4 0%,#efe3cd 100%);color:var(--head);border:1px solid var(--line);border-radius:20px;padding:2.1rem 1.6rem 1.9rem;margin:0 0 1.4rem;overflow:hidden;isolation:isolate}
.hero-mast::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at 85% -10%,rgba(169,138,92,.22) 0%,rgba(169,138,92,0) 60%);pointer-events:none;z-index:0}
.hero-mast .hm-mark{position:absolute;right:-.5rem;top:-1.2rem;font-size:7.5rem;color:var(--gold);opacity:.1;z-index:0;pointer-events:none;line-height:1}
.hero-mast .hm-kick{position:relative;z-index:1;font-family:var(--body);text-transform:uppercase;letter-spacing:.3em;font-size:.7rem;color:var(--goldD);font-weight:700;display:block;margin-bottom:.5rem}
.hero-mast .hm-title{position:relative;z-index:1;font-family:var(--display);font-weight:500;font-size:clamp(2.1rem,9vw,2.9rem);line-height:1;color:var(--head);letter-spacing:-.015em}
.hero-mast .hm-title em{font-style:italic;color:var(--goldD)}
.hero-mast .hm-sub{position:relative;z-index:1;font-size:.95rem;color:var(--soft);font-style:italic;margin-top:.5rem;line-height:1.5;max-width:34ch}
.sign{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--head)}

/* ── STATS ── */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.55rem;margin-bottom:1.2rem}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:.8rem 1rem}
.stat-n{font-family:var(--display);font-size:2rem;color:var(--head);line-height:1}
.stat-l{font-size:.65rem;color:var(--soft);text-transform:uppercase;letter-spacing:.1em;margin-top:.15rem;font-family:var(--body)}

/* ── GRID PRENDAS ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.6rem}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
.piece{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;cursor:pointer;transition:box-shadow .15s,transform .15s}
.piece:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-1px)}
.piece.sel{outline:2px solid var(--gold);outline-offset:-2px}
.piece-img{aspect-ratio:1;background:#ffffff;padding:10%;display:flex;align-items:center;justify-content:center}
.piece-img img{max-width:100%;max-height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.piece-info{padding:.45rem .55rem .6rem}
.piece-brand{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-family:var(--body)}
.piece-name{font-size:.82rem;line-height:1.2;color:var(--head);font-family:var(--display);font-weight:500}
.piece-meta{font-size:.62rem;color:var(--soft);margin-top:.1rem;font-family:var(--body)}

/* ── BOTONES ── */
.btn{border:0;background:linear-gradient(155deg,#b99a6c,var(--gold) 55%,#9a7d52);color:var(--onGold);font-size:.92rem;padding:.6rem 1.4rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease;font-family:var(--body);letter-spacing:.02em;box-shadow:0 4px 14px rgba(169,138,92,.35),0 1px 2px rgba(22,17,11,.1)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(169,138,92,.42),0 2px 4px rgba(22,17,11,.12)}
.btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(169,138,92,.3)}
.btn:disabled{opacity:.4;cursor:default;transform:none!important;box-shadow:none!important}
.btn.sm{padding:.36rem .95rem;font-size:.82rem}
.btn.outline{background:var(--panel);border:1px solid var(--line);color:var(--ink);box-shadow:0 1px 3px rgba(22,17,11,.05)}
.btn.outline:hover{border-color:var(--gold);color:var(--goldD);box-shadow:0 4px 12px rgba(169,138,92,.15)}
.btn.dark{background:linear-gradient(155deg,#241c12,var(--dark) 60%);color:#e9ddca;box-shadow:0 4px 14px rgba(22,17,11,.28)}

/* ── INPUTS ── */
.inp{width:100%;border:1px solid var(--line);border-radius:var(--rad);padding:.55rem .75rem;font-size:1rem;color:var(--ink);background:var(--bg);outline:none;font-family:var(--body);transition:border-color .15s}
.inp-line{width:100%;border:none;border-bottom:1px solid var(--line);padding:0 0 .55rem;font-size:.95rem;color:var(--ink);background:none;outline:none;font-family:var(--body);transition:border-color .15s}
.inp-line:focus{border-bottom-color:var(--head)}
.inp:focus{border-color:var(--gold);background:var(--panel)}
.inrow{display:flex;gap:.4rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.35rem .35rem .35rem 1rem;margin-bottom:.6rem}
.inrow input{flex:1;border:0;outline:0;background:transparent;font-size:1rem;color:var(--ink);font-family:var(--body)}

/* ── CHIPS ── */
.chips{display:flex;flex-wrap:wrap;gap:.38rem;margin:.4rem 0 .8rem}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--soft);font-size:.85rem;padding:.32rem .8rem;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s;font-family:var(--body)}
.chip:hover,.chip.on{border-color:var(--gold);color:var(--head);background:rgba(169,138,92,.06)}

/* ── TARJETAS ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem 1.2rem;margin-top:.8rem;box-shadow:0 2px 10px rgba(58,48,38,.05),0 1px 2px rgba(58,48,38,.04);transition:box-shadow .2s ease,transform .2s ease}
@media (hover:hover){.card:hover{box-shadow:0 10px 26px rgba(58,48,38,.1),0 2px 6px rgba(58,48,38,.06);transform:translateY(-1px)}}
.card-gold{background:linear-gradient(135deg,rgba(169,138,92,.14),rgba(169,138,92,.05));border:1px solid rgba(169,138,92,.35);border-radius:var(--rad);padding:1.1rem 1.2rem;margin-top:.8rem;box-shadow:0 2px 12px rgba(169,138,92,.1)}
.slbl{text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:var(--gold);margin:.9rem 0 .35rem;font-weight:600;display:block;font-family:var(--body)}

/* ── ESTADOS ── */
.alert{background:#fdf3e3;border:1px solid #e8c87a;border-radius:var(--rad);padding:.7rem 1rem;margin:.7rem 0;font-size:.88rem;color:#7a5c20;font-family:var(--body)}
.miss{background:var(--panel2);border:1px solid var(--line);border-radius:var(--rad);padding:.8rem 1rem;font-size:.88rem;margin:.7rem 0;color:var(--soft);font-family:var(--body)}
.ok{background:#eef2e6;border:1px solid #cdd9b5;border-radius:var(--rad);padding:.8rem 1rem;color:var(--green);font-size:.92rem;margin-top:.8rem;display:none;font-family:var(--body)}
.ok.show{display:block}
.empty{font-family:var(--display);font-style:italic;color:var(--soft);font-size:1.2rem;padding:2rem 0;text-align:center}
.lnk{background:none;border:0;color:var(--goldD);font-size:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;font-family:inherit}

/* ── FLATLAY ── */
.flatlay{background:var(--panel2);border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem;margin-top:.8rem}
.flatlay-tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-weight:600;font-family:var(--body)}
.fl-item-img{width:100%;aspect-ratio:1;object-fit:contain;padding:8%;background:#ffffff;border-radius:6px;display:block}
.flatlay-stage{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.45rem;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.75rem;min-height:100px}
.fl-item-name{font-size:.75rem;color:var(--head);line-height:1.2;font-family:var(--display)}


/* ── CALENDARIO ── */
.cal{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-top:1rem}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.cal-dh{text-align:center;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);padding:.5rem 0;font-family:var(--body)}
.cal-body{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:78px;padding:.4rem;cursor:pointer;transition:background .12s}
.cal-day:nth-child(7n){border-right:0}
.cal-day:hover{background:var(--panel2)}
.cal-day.today{background:#fdf6ec}
.cal-dn{font-size:.68rem;color:var(--soft);margin-bottom:.2rem;font-family:var(--body)}
.cal-dn.tod{color:var(--gold);font-weight:600}
.cal-thumb{width:100%;aspect-ratio:1;object-fit:contain;background:var(--line);border-radius:4px;margin-bottom:.1rem;display:block}

/* ── PLANES ── */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0}
.plan-card{border:1px solid var(--line);background:var(--panel);border-radius:var(--rad);padding:1.2rem;text-align:center;position:relative}
.plan-card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.plan-card.pop::before{content:"Más popular";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--onGold);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .65rem;border-radius:999px;font-weight:600;white-space:nowrap;font-family:var(--body)}
.plan-name{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--head)}
.plan-price{font-family:var(--display);font-size:2.2rem;color:var(--head);line-height:1.1;margin:.3rem 0 .15rem}
.plan-price span{font-size:.8rem;color:var(--soft)}
.plan-feat{font-size:.82rem;color:var(--soft);margin:.4rem 0 .9rem;font-family:var(--body);font-style:italic}

/* ── METER ── */
.meter{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:.7rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.meter-bar{width:100%;height:3px;background:var(--line);border-radius:99px;margin-top:.3rem}
.meter-fill{height:3px;background:var(--gold);border-radius:99px;transition:width .4s}

/* ── MODES ── */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
.mode-btn{border:1px solid var(--line);background:var(--panel);border-radius:var(--rad);padding:.65rem .8rem;cursor:pointer;text-align:left;transition:border-color .15s}
.mode-btn.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:rgba(169,138,92,.04)}
.mode-t{font-family:var(--display);color:var(--head);font-size:1rem}
.mode-d{font-size:.7rem;color:var(--soft);margin-top:.1rem;font-family:var(--body)}

/* ── ONBOARDING ── */
.ob{min-height:100vh;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.ob-inner{max-width:460px;width:100%}
.ob-prog{display:flex;gap:4px;margin-bottom:2rem}
.ob-bar{flex:1;height:2px;border-radius:99px;background:var(--line);transition:background .3s}
.ob-bar.done{background:var(--gold)}
.ob-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:1.8rem 1.6rem}
.ob-title{font-family:var(--display);font-weight:500;color:var(--head);font-size:1.7rem;margin:0 0 .3rem}
.ob-sub{color:var(--soft);font-size:.92rem;margin:0 0 .5rem;font-style:italic;font-family:var(--body)}
.ob-step{display:none}.ob-step.show{display:block}
.ob-nav{display:flex;justify-content:space-between;margin-top:1.8rem;align-items:center}

/* ── CHAT ── */
/* ── FILTERS ROW ── */
.filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 .9rem;align-items:center}
.filter-l{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);font-family:var(--body)}
.sep{display:flex;align-items:center;gap:.8rem;margin:1.3rem 0 1rem}
.sep-line{flex:1;height:1px;background:var(--line)}
.sep-txt{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);white-space:nowrap;font-family:var(--body)}

/* ── AUTH ── */
#auth-tab-login,#auth-tab-register{transition:color .15s,border-color .15s}
.ob-chip{border:1px solid var(--line);background:var(--panel);color:var(--soft);font-family:var(--body);font-size:.9rem;padding:.35rem .85rem;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s}
.ob-chip.on{border-color:var(--gold);color:var(--head);background:rgba(169,138,92,.07)}
.presup-opt{text-align:left;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--rad);background:var(--panel);font-family:var(--body);font-size:1rem;color:var(--head);cursor:pointer;transition:border-color .15s}
.presup-opt:hover{border-color:var(--gold)}

/* ── DIAGNÓSTICO ── */
.diag-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.diag-fill{height:6px;border-radius:99px;transition:width .5s}
.diag-ok{background:var(--green)}
.diag-low{background:#c0392b}
.diag-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:1rem 1.1rem;margin-top:.8rem}
.upsell{background:var(--dark);border-radius:var(--rad);padding:1.2rem 1.3rem;margin-top:.8rem;color:#e9ddca}
.upsell h3{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:0 0 .4rem;color:#fff}
.upsell p{font-size:.88rem;color:#bbb;margin:0 0 .8rem;line-height:1.5;font-family:var(--body)}
.upsell-btn{background:var(--gold);color:var(--onGold);border:none;padding:.55rem 1.2rem;border-radius:999px;font-family:var(--body);font-size:.92rem;cursor:pointer}

/* ── RESPONSIVE ── */
@media(max-width:580px){
  .modes,.plan-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .bottom-nav{bottom:max(10px, env(safe-area-inset-bottom, 10px))}
}
@keyframes aglowPulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.aglow-pulse{animation:aglowPulse 2.4s ease-out infinite}