:root{
  --bg:#F4F2EE; --surface:#FFFFFF; --ink:#1D1A17; --muted:#6A625A; --line:#DDD8D0; --glass:#ECE8E2;
  --accent:#9C6412; --accent-ink:#FFFFFF;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.01em; margin:0}
p{margin:0}
button,a{font:inherit; color:inherit}
button{cursor:pointer}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
h2:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app{max-width:620px; margin:0 auto; padding:20px 18px 56px}
.loading{color:var(--muted); text-align:center; padding:56px 0}

/* encabezado */
#top{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top)}
#top:empty{display:none}
.top-in{max-width:620px; margin:0 auto; padding:10px 18px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:600}
.brand .mono,.brand .logo{width:34px; height:34px; border-radius:9px; flex:none}
.brand .mono{display:grid; place-items:center; background:var(--accent); color:var(--accent-ink); font-family:var(--serif); font-size:1rem}
.brand .logo{object-fit:cover; background:var(--surface)}
.tabs{display:flex; gap:4px; margin-top:8px; overflow-x:auto; scrollbar-width:none}
.tabs button{border:none; background:none; padding:10px 12px 11px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; font-weight:500}
.tabs button.on{color:var(--ink); border-bottom-color:var(--accent)}

/* inicio y configuración */
.start-bottle{width:70px; height:auto; display:block; margin:8px 0 18px}
.start h1,.setup h1{font-size:clamp(2rem,7.5vw,2.8rem); line-height:1.05; max-width:15ch}
.lead{color:var(--muted); margin:14px 0 6px; max-width:46ch}
.mode{display:grid; gap:12px; margin-top:26px}
.big{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:18px 20px; border-radius:14px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); text-align:left}
.big span{font-weight:600; font-size:1.05rem}
.big small{opacity:.8; font-size:.85rem}
.big.ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.setup form{margin-top:18px}
fieldset{border:none; padding:0; margin:0}
.swatches{display:flex; gap:10px; flex-wrap:wrap}
.sw{width:40px; height:40px; border-radius:50%; background:var(--sc); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--line)}
.sw.on{box-shadow:0 0 0 2px var(--ink)}
.err{color:#A3261C; min-height:1.4em; margin-top:10px; font-size:.92rem}
.wide{width:100%; margin-top:10px; padding:15px!important}
.ready{font-size:1.8rem; margin:36px 0 6px}

/* preguntas */
.bar{height:3px; background:var(--line); border-radius:2px; overflow:hidden}
.bar span{display:block; height:100%; background:var(--accent); transition:width .3s ease}
.count{color:var(--muted); font-size:.85rem; margin:12px 0 6px}
.q h2{font-size:clamp(1.5rem,5.5vw,2rem); line-height:1.12}
.hint{color:var(--muted); margin-top:8px}
.opts{display:grid; gap:10px; margin-top:20px}
.opt{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:15px 18px; border-radius:12px; border:1px solid var(--line); background:var(--surface)}
.opt span{font-weight:500}
.opt small{color:var(--muted); font-size:.85rem}
.opt.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.opt.fam{display:grid; grid-template-columns:14px 1fr; column-gap:12px; row-gap:2px; align-items:center}
.opt.fam i{grid-row:1 / span 2; width:14px; height:14px; border-radius:50%; background:var(--fc)}
.opt.fam span,.opt.fam small{grid-column:2}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.chips.tight{margin-top:12px}
.chip{padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:.95rem}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip.dot{display:inline-flex; align-items:center; gap:7px}
.chip.dot i{width:9px; height:9px; border-radius:50%; background:var(--fc)}
.field{display:block; margin-top:18px}
.flabel{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px}
input,textarea{width:100%; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
input:focus,textarea:focus{outline:none; border-color:var(--ink)}
.detected{color:var(--accent); font-size:.9rem; min-height:1.4em; margin-top:8px}
.nav{display:flex; justify-content:space-between; align-items:center; margin-top:26px}
.primary{background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent)}
.nav .primary{padding:13px 22px; border-radius:12px; font-weight:600}
.primary:disabled{opacity:.35; cursor:not-allowed}
.link{background:none; border:none; padding:8px 0; color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* resultados */
.res h2,.cat h2,.share h2{font-size:clamp(1.9rem,7vw,2.5rem)}
.profile{list-style:none; padding:0; margin:14px 0 22px; display:flex; flex-wrap:wrap; gap:6px}
.profile li{font-size:.82rem; padding:4px 10px; border-radius:999px; background:var(--glass); color:var(--muted)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px; margin-bottom:14px}
.card-top{display:grid; grid-template-columns:112px 1fr; gap:14px; align-items:center}
.photo{position:relative; display:block; width:112px; height:112px; padding:0; border:none; border-radius:12px; overflow:hidden; background:var(--glass)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.mini{position:absolute; right:6px; bottom:6px; width:24px; height:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.tag{font-size:.82rem; color:var(--fc); font-weight:600}
.card h3{font-size:1.3rem; line-height:1.15; margin-top:2px}
.house{color:var(--muted); font-size:.86rem; margin-top:3px}
.famline{display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--muted); margin-top:6px}
.famline i{width:9px; height:9px; border-radius:50%; background:var(--fc); flex:none}
.why{margin-top:12px}
.pitch{margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
.pitch summary{cursor:pointer; font-weight:500}
.pitch p{margin-top:8px; font-size:.95rem}
.sku{color:var(--muted); font-size:.85rem; margin-top:6px}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:11px; border:1px solid var(--line); background:var(--surface); font-weight:500; font-size:.95rem}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); flex:1 1 auto}
.final{display:grid; gap:10px; margin-top:22px}
.final .btn{padding:14px}
.final .link{justify-self:center}
.empty{padding:20px; border:1px dashed var(--line); border-radius:14px; color:var(--muted)}

/* catálogo */
.search{display:block; margin-top:14px}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (min-width:560px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tile{display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:0 0 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden}
.tile-img{display:block; width:100%; aspect-ratio:1; background:var(--glass)}
.tile-img img{width:100%; height:100%; object-fit:cover; display:block}
.tile-name{font-family:var(--serif); font-size:1.05rem; line-height:1.2; padding:10px 12px 0}
.tile-house{color:var(--muted); font-size:.8rem; padding:2px 12px 0}
.tile-fam{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.78rem; padding:6px 12px 0}
.tile-fam i{width:8px; height:8px; border-radius:50%; background:var(--fc)}

/* ficha */
dialog#sheet{border:none; padding:0; width:min(560px,100vw); max-height:92vh; border-radius:20px 20px 0 0; margin:auto auto 0; background:var(--surface); color:var(--ink)}
@media (min-width:600px){ dialog#sheet{border-radius:20px; margin:auto} }
dialog#sheet::backdrop{background:rgba(20,16,12,.45)}
.sheet-in{padding:18px 20px 24px; position:relative}
.close{position:absolute; top:10px; right:12px; width:40px; height:40px; border-radius:50%; border:none; background:var(--glass); font-size:1.4rem; line-height:1}
.sheet-img{width:100%; max-height:46vh; object-fit:contain; border-radius:14px; background:var(--glass); display:block; margin:6px 0 14px}
.sheet-in h3{font-size:1.6rem}
.notes{margin-top:8px; font-size:.95rem}
.pitchtext{margin-top:12px; padding:12px 14px; background:var(--glass); border-radius:12px; font-size:.95rem}

/* mi app */
.linkbox{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; margin-top:14px}
.lbl{font-weight:600}
.small{color:var(--muted); font-size:.9rem; margin-top:4px}
.linkrow{display:flex; gap:8px; margin-top:10px}
.linkrow input{padding:11px 12px; font-size:.85rem}
.qr{margin-top:14px; width:200px}
.qr img,.qr canvas{display:block; width:200px; height:200px}
@media (prefers-reduced-motion: no-preference){ .liquid{animation:fill .9s ease-out both} @keyframes fill{from{transform:translateY(40%)}} }

/* compartir e instalar */
.top-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.top-acts{display:flex; gap:6px}
.tact{display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:.85rem; font-weight:500}
.tact svg{width:17px; height:17px}
#hshare{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
@media (max-width:380px){ .tact span{display:none} .tact{padding:8px} }
.quick{display:grid; gap:10px; margin-top:22px}
.qbtn{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:14px 16px; border-radius:14px; border:1px dashed var(--line); background:transparent}
.qbtn svg{width:26px; height:26px; flex:none; color:var(--accent)}
.qbtn span{display:flex; flex-direction:column}
.qbtn small{color:var(--muted); font-size:.85rem}
.steps{padding-left:20px; margin:14px 0 6px}
.steps li{margin-bottom:10px}

/* precios */
.price{font-family:var(--serif); font-size:1.25rem; font-weight:600; margin-top:4px}
.price.big{font-size:1.6rem; margin-top:8px}
.brk{margin-top:8px; font-size:.86rem; color:var(--muted); background:var(--glass); padding:8px 10px; border-radius:10px}
.brk strong{color:var(--ink)}
.tile-price{font-weight:600; padding:6px 12px 0; font-size:.95rem}
.pricebox{margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.pricebox legend{padding:0 6px}
.seg{display:flex; gap:6px; margin-top:6px}
.segb{flex:1; padding:10px; border-radius:10px; border:1px solid var(--line); background:var(--bg); font-size:.9rem}
.segb.on{border-color:var(--ink); background:var(--ink); color:#fff}

/* presentaciones */
.vrows{display:grid; gap:10px; margin-top:12px}
.vrow{border:1px solid var(--line); border-radius:12px; padding:12px; background:var(--bg)}
.vrow.dec{background:transparent; border-style:dashed}
.vinfo{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.vname{font-weight:600}
.vprice{font-family:var(--serif); font-size:1.2rem; font-weight:600}
.vbtn{width:100%; margin-top:10px}
.vrow .brk{margin-top:8px}
.price small{font-family:var(--sans); font-size:.75rem; color:var(--muted); font-weight:500}
.tile-dec{color:var(--muted); font-size:.78rem; padding:2px 12px 0}