:root{
  /* Línea gráfica Nandez: marrón tueste #4A2E1B · arena kraft #E6D7C3 · verde flor #2E4732 · terracota #C05A3E.
     Terracota solo como marca de hallazgo, nunca como fondo grande. Sin degradados, sin sombras. */
  --paper:#E6D7C3;--paper-2:#DDCBB2;--card:#EFE5D7;--ink:#4A2E1B;--ink-2:#634532;--ink-3:#6F5340;--line:#CDB89C;
  --cherry:#C05A3E;--cherry-2:#a94d34;--leaf:#2E4732;--gold:#C05A3E;--doc:#4A2E1B;
  --roast:#4A2E1B;--roast-2:#553624;--roast-3:#5e3d29;--ember:#C05A3E;--crema:#E6D7C3;
  --serif:"DM Serif Display","Iowan Old Style",Georgia,serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --r:10px;--shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;min-height:100svh;transition:background .6s ease,color .6s ease}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(ellipse at 12% 18%,transparent 0 26px,rgba(29,20,15,.045) 26px 27px),
             repeating-radial-gradient(ellipse at 88% 72%,transparent 0 34px,rgba(29,20,15,.04) 34px 35px)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body[data-view=subasta]{background:var(--roast);color:#E6D7C3}
body[data-view=subasta]::before{background:repeating-radial-gradient(ellipse at 15% 20%,transparent 0 26px,rgba(255,200,150,.03) 26px 27px),repeating-radial-gradient(ellipse at 85% 80%,transparent 0 34px,rgba(255,200,150,.025) 34px 35px)}
body[data-view=subasta]::after{opacity:.12}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cherry);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0}
h1 em,h2 em,h3 em{color:var(--cherry)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.hint{color:var(--ink-2);font-size:13.5px;margin:12px 0}
.err{color:var(--cherry);font:600 12px var(--mono)}
.eyebrow{font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cherry);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.kicker{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:0}
.lbl{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:28px 120px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*70ms)}
.calm .reveal{animation:none;opacity:1;transform:none}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;transition:none!important}}

/* header */
.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--paper) 84%,transparent);border-bottom:1px solid var(--line);transition:background .6s}
body[data-view=subasta] .top{background:color-mix(in srgb,var(--roast) 82%,transparent);border-color:#6a4630}
.top-inner{max-width:1240px;margin:auto;padding:10px 20px;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;cursor:pointer}
.brand .mark{width:26px;color:var(--cherry)}
body[data-view=subasta] .brand .mark{color:var(--ember)}
.brand b{font:italic 400 30px/1 var(--serif)}
.brand small{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.tabs{display:flex;gap:2px;margin-left:auto;background:var(--paper-2);padding:4px;border-radius:999px;flex-wrap:wrap}
body[data-view=subasta] .tabs{background:#3f2717}
.tab{border:0;background:transparent;padding:8px 14px;border-radius:999px;font:600 13.5px var(--sans);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:7px}
body[data-view=subasta] .tab{color:#d3c0a5}
.tab[aria-current=page]{background:var(--ink);color:var(--paper)}
body[data-view=subasta] .tab[aria-current=page]{background:var(--crema);color:var(--roast)}
.nav-time{font-size:11.5px;opacity:.8}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--cherry);color:#fff;font:600 11px/18px var(--mono);text-align:center}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ember);animation:ping 1.6s infinite;flex:0 0 auto}
.live-dot.off{background:var(--ink-3);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,106,61,.55)}80%,100%{box-shadow:0 0 0 9px rgba(255,106,61,0)}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:10px 16px;border-radius:999px;font:600 14px var(--sans);cursor:pointer;transition:transform .15s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--cherry);border-color:var(--cherry);color:#fff}
.btn.primary:hover{background:var(--cherry-2);border-color:var(--cherry-2)}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.lg{padding:14px 22px;font-size:15px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn:disabled:hover{background:transparent;color:var(--ink)}
.btn.primary:disabled:hover{background:var(--cherry);color:#fff}
body[data-view=subasta] .btn:not(.primary){border-color:#8a664b;color:#E6D7C3}
body[data-view=subasta] .btn:not(.primary):hover{background:var(--crema);color:var(--roast)}

/* hero */
.lede{font-size:1.14rem;color:var(--ink-2);max-width:50ch;margin:22px 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.live-link{margin-top:22px;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--roast);color:#E6D7C3;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;font-size:14px;transition:transform .2s}
.live-link:hover{transform:translateX(4px)}
.live-link b{color:var(--crema)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.stat{padding:20px 18px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font:400 2.8rem/1 var(--serif)}
.stat small,.kpi small{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

.section{padding-block:80px 8px}
.section-head{max-width:720px}
.section-head h2{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1}
.section-head p{color:var(--ink-2);font-size:1.05rem}

/* flows */
.tracks{display:grid;grid-template-columns:1fr 210px 1fr;gap:24px;margin-top:40px}
.track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.track-title{font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.track-title::before{content:"";width:22px;height:2px;background:var(--cherry)}
.step{display:grid;grid-template-columns:36px 1fr;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;text-align:left;transition:transform .25s,border-color .25s,box-shadow .25s;width:100%}
.seller .step:hover{transform:translateX(6px);border-color:var(--ink);box-shadow:var(--shadow)}
.buyer .step:hover{transform:translateX(-6px);border-color:var(--ink);box-shadow:var(--shadow)}
.step .n{font:italic 30px/1 var(--serif);color:var(--cherry)}
.step b{display:block;font-weight:600}
.step span{color:var(--ink-2);font-size:13.5px}
}
}
.deal{margin:30px auto 0;max-width:760px;background:var(--ink);color:var(--paper);border-radius:999px;padding:14px 24px;display:flex;justify-content:center;gap:8px 14px;flex-wrap:wrap;font:500 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.deal span:not(:last-child)::after{content:"→";margin-left:14px;color:var(--crema)}

.levels{display:grid;grid-template-columns:repeat(4,1fr);margin-top:34px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.level{padding:24px 22px;border-right:1px solid var(--line)}
.level:last-child{border-right:0}
.level .level .level h3{font-size:1.9rem;margin:16px 0 6px;color:var(--c)}
.level p{color:var(--ink-2);font-size:14px;margin:0 0 14px}
.level code{font:12px var(--mono);background:var(--paper-2);padding:3px 8px;border-radius:6px}

.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.mode{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform .3s,box-shadow .3s}
.mode:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.mode h3{font-size:2.1rem;line-height:1}
.mode p{color:var(--ink-2);margin:0;flex:1}
.mini-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em}
.mini-flow span{background:var(--paper-2);padding:4px 8px;border-radius:6px}
.mode.dark{background:radial-gradient(120% 90% at 100% 0%,#4A2E1B,#4A2E1B 65%);color:#E6D7C3;border-color:#6a4630}
.mode.dark p{color:#d3c0a5}.mode.dark h3 em{color:var(--crema)}
.mode.dark .mini-flow span{background:#5a3a26}
.mode.dark .btn{border-color:#8a664b;color:#E6D7C3}
.foot{margin-top:90px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:13px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
body[data-view=subasta] .foot{border-color:#6a4630;color:#c9b497}

/* view head / segmented */
.view-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;padding-block:8px 24px;border-bottom:1px solid var(--line);margin-bottom:26px}
.view-head h2{font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1}
.view-head p{margin:10px 0 0;color:var(--ink-2)}
.seg{display:inline-flex;background:var(--paper-2);border-radius:999px;padding:4px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:8px 14px;border-radius:999px;font:600 13px var(--sans);color:var(--ink-2);cursor:pointer;display:flex;gap:6px;align-items:center}
.seg button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg.dark{background:#3f2717}
.seg.dark button{color:#d3c0a5}
.seg.dark button[aria-pressed=true]{background:var(--crema);color:var(--roast)}

/* buyer */
.buyer-layout{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.filters{position:sticky;top:90px;display:flex;flex-direction:column;gap:20px}
.f-group h4{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px;display:flex;justify-content:space-between}
.input,.search{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:10px 12px;width:100%;min-width:0}
.search{border-radius:999px;padding:10px 16px}
.input:focus,.search:focus{outline:2px solid var(--cherry);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font:500 13px var(--sans);cursor:pointer;transition:background .2s,color .2s}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip-radio{position:relative}
.chip-radio input{position:absolute;opacity:0;pointer-events:none}
.chip-radio span{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.chip-radio input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip-radio input:focus-visible+span{outline:2px solid var(--cherry)}
input[type=range]{width:100%;accent-color:var(--cherry)}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.toggle input{width:18px;height:18px;accent-color:var(--cherry)}
.legend{display:grid;gap:6px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:18px;height:5px;border-radius:3px;background:var(--c)}
.count-line{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:var(--ink-2);font-size:14px;gap:10px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.lot{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s var(--ease-out),box-shadow .2s}
.lot:hover{transform:translateY(-5px);box-shadow:0 24px 44px -22px rgba(29,20,15,.5)}
.lot.cmp{outline:2px solid var(--cherry);outline-offset:-2px}
.lot-art{position:relative;height:150px;background:var(--paper-2);cursor:pointer;overflow:hidden}
.lot-art svg{position:absolute;inset:0;width:100%;height:100%}
.lot-art .front{transition:transform .35s var(--ease-out)}
.lot:hover .lot-art .front{transform:translateY(-6px)}
.alt-label{position:absolute;right:10px;transform:translateY(-135%);font:600 10px var(--mono);letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
.dark-art .alt-label{color:#d3c0a5}
.state{position:absolute;top:12px;right:12px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--card);border:1px solid currentColor;padding:4px 8px;border-radius:999px;color:var(--ink-2);z-index:1}
.st-publicado{color:var(--leaf)}.st-muestra-solicitada{color:var(--doc)}.st-en-negociacion{color:var(--gold)}
.st-reservado{color:var(--cherry)}.st-vendido{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.st-en-subasta{background:var(--ember)!important;color:#4A2E1B!important;border-color:var(--ember)!important}
.st-borrador{color:var(--ink-3);border-style:dashed}.st-en-revision{color:var(--doc);border-style:dashed}
.lot-score{position:absolute;left:14px;top:10px;z-index:1}
.lot-score b{display:block;font:400 46px/1 var(--serif);letter-spacing:-.02em}
.lot-score small{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.lot-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.lot h3{font-size:1.6rem;line-height:1.05}
.founder{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--ink-3);color:var(--ink-2);border-radius:999px;padding:2px 7px;vertical-align:middle;white-space:nowrap}
.varietal{margin:0;color:var(--ink-2)}
.varietal em{font:italic 1.2rem var(--serif);color:var(--ink)}
.notes{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:5px}
.notes li{font-size:12px;background:var(--paper);border-radius:999px;padding:2px 9px;color:var(--ink-2)}
.notes.dark li{background:#5a3a26;color:#E6D7C3}
.pips{display:flex;gap:4px;margin-top:4px}
.pip{flex:1;height:5px;border-radius:3px;background:var(--c)}
.pip.miss{background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 7px)}
.pip-meta{display:flex;justify-content:space-between;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lot-price{display:flex;align-items:baseline;gap:6px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.lot-price b{font:600 1.2rem var(--mono)}
.lot-price small{color:var(--ink-2)}
.diff{margin-left:auto;font:600 12px var(--mono);color:var(--leaf)}
.lot-actions{display:flex;gap:6px}
.lot-actions .btn{flex:1;padding-inline:8px}
.lot-actions .cmp-toggle{flex:0 0 38px;padding:0}
.empty{padding:60px 20px;text-align:center;color:var(--ink-2);border:1px dashed var(--line);border-radius:18px;grid-column:1/-1}
.empty h3{font-size:2rem;color:var(--ink)}

.tray{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--paper);border-radius:999px;padding:8px 8px 8px 12px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);max-width:calc(100vw - 32px);flex-wrap:wrap;justify-content:center;animation:pop .4s}
.tray-thumbs{display:flex}
.tray-thumbs span{width:30px;height:30px;border-radius:50%;background:var(--cherry);border:2px solid var(--ink);margin-left:-8px;display:grid;place-items:center;font:italic 16px var(--serif)}
.tray-thumbs span:first-child{margin-left:0}
.tray .btn:not(.primary){border-color:#5a473b;color:var(--paper)}

/* dialog */
dialog{border:0;padding:0;border-radius:22px;background:var(--card);color:var(--ink);width:min(1000px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 40px 80px -20px rgba(0,0,0,.5)}
dialog.narrow{width:min(560px,calc(100vw - 24px))}
dialog[open]{animation:pop .35s var(--ease-out)}
dialog::backdrop{background:rgba(18,12,9,.55);backdrop-filter:blur(3px)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.dlg-head h3{font-size:1.7rem;line-height:1.1}
.x{border:1px solid var(--line);background:transparent;border-radius:50%;width:36px;height:36px;cursor:pointer;flex:0 0 auto}
.dlg-body{padding:20px 22px 24px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.offer-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--paper);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.offer-sum b{display:block;font-size:15px}
.offer-live{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}
.offer-live b{font-size:1.5rem}
.pos{color:var(--leaf);font:600 13px var(--mono)}.neg{color:var(--cherry);font:600 13px var(--mono)}
.cata-score{text-align:center;margin-bottom:16px}
.cata-score b{display:block;font-size:3.4rem;line-height:1.1;color:var(--cherry)}
.range-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}

/* passport */
.passport{display:grid;grid-template-columns:300px 1fr;gap:28px}
.pp-cover{background:radial-gradient(120% 80% at 80% 0%,#4A2E1B,#4A2E1B 65%);color:#E6D7C3;border-radius:18px;padding:22px;position:relative;overflow:hidden;min-height:380px;align-self:start}
.pp-cover .kicker{color:#d3c0a5}
.pp-cover h3{font-size:2.3rem;line-height:1;margin-top:10px}
.pp-cover .varietal{color:#d3c0a5}.pp-cover .varietal em{color:var(--crema)}
.pp-score{font:400 4.6rem/1 var(--serif);margin:16px 0 4px}
.pp-ridge{position:absolute;left:0;right:0;bottom:0;height:120px}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:9px 0;align-items:start;opacity:0;animation:rise .5s forwards;animation-delay:calc(var(--i)*45ms)}
.tl .dot{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--c);background:var(--card);display:grid;place-items:center;position:relative;z-index:1}
.tl .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.tl.pending .dot{border-style:dashed;--c:var(--ink-3)}
.tl.pending .dot::after{display:none}
.tl b{display:block;font-weight:600}
.tl span{font-size:13.5px;color:var(--ink-2)}
.stampmini{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c);border:1.5px solid var(--c);padding:3px 7px;border-radius:6px;transform:rotate(-3deg);white-space:nowrap;text-align:center}
.stampmini small{display:block;font-weight:400;letter-spacing:0;text-transform:none}

/* compare */
.table-scroll{overflow-x:auto}
.cmp-table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
.cmp-table th,.cmp-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table tbody th{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.cmp-table thead th b{display:block;font:400 1.4rem/1.1 var(--serif)}
.cmp-table thead th small{color:var(--ink-2)}
.cmp-thumb{position:relative;height:60px;border-radius:10px;overflow:hidden;background:var(--paper-2);margin-bottom:8px}
.cmp-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.bar{display:block;height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:100%;transform:scaleX(var(--w));background:var(--ink-3);transform-origin:left;transition:transform .6s var(--ease-out)}
td.best .mono{font-weight:600}
td.best .mono::before{content:"◆ ";color:var(--leaf)}
}
.rk-bar i,.cbar i,.vs i,.trust-bar i{transform-origin:left}
.lvtag{font:600 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c);border:1px solid var(--c);border-radius:999px;padding:1px 6px;white-space:nowrap}
.src{display:block;color:var(--ink-3);font-size:12px}

/* activity / inbox */
.list{display:grid;gap:12px}
.item{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;animation:rise .45s both;animation-delay:calc(var(--i,0)*50ms)}
.calm .item{animation:none}
.thumb{position:relative;height:56px;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.thumb svg{position:absolute;inset:0;width:100%;height:100%}
.item h4{margin:0;font:400 1.35rem/1.1 var(--serif)}
.item p{margin:2px 0 0;color:var(--ink-2);font-size:13.5px}
.item-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.prog{display:flex;align-items:center;gap:4px;margin-top:8px;flex-wrap:wrap}
.prog span{font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--paper-2);color:var(--ink-3)}
.prog span.on{background:var(--ink);color:var(--paper)}
.prog span.now{background:var(--cherry);color:#fff}
.prog span.fail{background:transparent;color:var(--cherry);border:1px solid var(--cherry)}
.prog i{width:12px;height:1px;background:var(--line)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:italic 20px var(--serif)}
.counter-row{display:flex;gap:6px;align-items:center}
.counter-row .input{width:130px;padding:7px 10px}
.score-chip{font:600 13px var(--mono);background:var(--leaf);color:#fff;border-radius:999px;padding:4px 10px}

/* producer */
.profile-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ptag{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.ptag.ok{border-color:var(--leaf);color:var(--leaf)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:26px}
.kpi{padding:16px 18px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi b{display:block;font:400 2.5rem/1 var(--serif)}
.kpi.alert b{color:var(--cherry)}
.prow{display:grid;grid-template-columns:84px minmax(0,1.3fr) minmax(0,2fr) .7fr .9fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);animation:rise .45s both;animation-delay:calc(var(--i,0)*60ms)}
.calm .prow{animation:none}
.prow h4{margin:0;font:400 1.35rem/1.1 var(--serif)}
.prow p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.stepper{display:flex;align-items:center}
.stepper b{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);background:var(--card);flex:0 0 auto}
.stepper i{flex:1;height:2px;background:var(--line)}
.stepper .on{border-color:var(--cherry);background:var(--cherry)}
.stepper i.on{background:var(--cherry)}
.stepper .now{box-shadow:0 0 0 4px color-mix(in srgb,var(--cherry) 22%,transparent)}
.stepper-label{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-top:8px}
.num b{display:block;font:600 14px var(--mono)}
.num small{font-size:12px;color:var(--ink-2)}

.wizard{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:start}
.wsteps{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.wsteps button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.wsteps button.done{color:var(--leaf);border-color:var(--leaf)}
.wsteps button[aria-current=step]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wsteps button:disabled{cursor:not-allowed}
.wpanel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}
.wpanel h3{font-size:2rem;margin-bottom:4px}
.wpanel>p{color:var(--ink-2);margin:0 0 18px}
.wstack{display:grid;gap:18px}
.wnav{display:flex;justify-content:space-between;gap:8px;margin-top:22px;flex-wrap:wrap}
.wpreview{position:sticky;top:90px;display:grid;gap:12px}
.wpreview .lot:hover{transform:none}
.check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.check li::before{content:"!";width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font:700 13px var(--mono)}
.check li.ok::before{content:"✓";background:var(--leaf)}
.check span{color:var(--ink-2);font-size:13px;display:block}
.wiz-err{margin-top:12px}

/* toasts */
.toasts{position:fixed;right:18px;top:80px;z-index:120;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 36px))}
.toast{background:var(--ink);color:var(--paper);border-radius:14px;padding:12px 14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);display:flex;gap:10px;align-items:center;animation:slideIn .45s var(--ease-out);font-size:14px}
body[data-view=subasta] .toast{background:#5a3a26;border:1px solid #6a4630}
.toast.out{animation:slideOut .3s forwards}
.toast.err .t-ico{background:var(--cherry)}
.t-ico{width:8px;height:8px;border-radius:50%;background:var(--crema);flex:0 0 auto}
.tbtn{margin-left:auto;background:transparent;border:1px solid #8a664b;color:var(--crema);border-radius:999px;padding:4px 10px;font:600 12px var(--sans);cursor:pointer;white-space:nowrap}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}}
@keyframes slideOut{to{opacity:0;transform:translateX(30px)}}

/* ---- v2: tienda, cotizador y mercado ---- */
.unit{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-3)}
.pre{white-space:pre-wrap;background:var(--paper);padding:12px;border-radius:10px;font:13px var(--mono)}
.qty{display:flex;align-items:center;gap:8px}
.qty .btn{width:30px;padding:0;justify-content:center}
.hero-prod{outline:1px solid var(--gold);outline-offset:-1px}
.track.wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:34px}
.track.wide li{list-style:none}
.track.wide .step{cursor:default;height:100%}
.track.wide .step:hover{transform:none}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:32px}
.tool{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .3s,box-shadow .3s,border-color .3s;font:inherit;color:inherit}
.tool:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--ink)}
.tool b{font:400 1.9rem/1 var(--serif)}
.tool span{color:var(--ink-2);flex:1}
.tool small{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--leaf)}
.tool.int{background:var(--paper-2);border-style:dashed}
.tool.int small{color:var(--cherry)}

.ref-chip{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.ref-chip b{font-size:1.3rem}
.ref-chip small{color:var(--ink-2);font-size:12px}
.cot{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start}
.cot-form{display:grid;gap:16px}
.cot-form .wpanel{padding:20px}
.cot-form h3{font-size:1.5rem;margin-bottom:14px}
.cot-res{position:sticky;top:90px;display:grid;gap:14px}
.res-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.res-card .big{display:block;font:600 2.6rem/1.05 var(--mono);color:var(--cherry);margin:6px 0}
.res-card .big small{font:500 13px var(--sans);color:var(--ink-2);margin-left:6px}
.cbars{display:grid;gap:8px;margin:16px 0}
.cbar{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.cbar i{display:block;height:12px;border-radius:6px;width:100%;transform:scaleX(var(--w));background:var(--ink-3);transition:transform .4s var(--ease-out)}
.cbar.ref i{background:var(--ink-3)}
.cbar.hot i{background:var(--cherry)}
.cbar.max i{background:repeating-linear-gradient(45deg,var(--leaf) 0 6px,color-mix(in srgb,var(--leaf) 60%,transparent) 6px 12px)}
.cbar b{font-size:13px;color:var(--ink)}
.res-card .prow-au{border-bottom-color:var(--line);color:var(--ink-2)}
.res-card .prow-au b{color:var(--ink)}
.res-card .prow-au.total b{color:var(--cherry);font-size:16px}
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 16px}
.chain div{position:relative;padding-right:8px}
.chain div:not(.end)::after{content:"→";position:absolute;right:-4px;top:4px;color:var(--ink-3)}
.chain b{display:block;font-size:1.1rem}
.chain small{font-size:10.5px;color:var(--ink-2);line-height:1.2;display:block}
.alerts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alerts li{border-radius:12px;padding:11px 14px;font-size:13.5px;border-left:4px solid var(--c);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c)}
.al-bad{--c:var(--cherry)}.al-warn{--c:var(--gold)}.al-good{--c:var(--leaf)}
.res-actions{display:flex;gap:8px;justify-content:flex-end}

.mkt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.mkt{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.mkt small{color:var(--ink-2);font-size:12px}
.mkt-in{border:0;border-bottom:2px solid var(--line);background:transparent;font:600 1.7rem var(--mono);padding:4px 0;width:100%;color:var(--ink)}
.mkt-in:focus{outline:none;border-color:var(--cherry)}
.mkt.act{justify-content:center;align-items:flex-start;gap:10px;background:var(--paper-2);border-style:dashed}
.mkt-table th.best{color:var(--cherry)}
.eqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:26px}
.eq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.eq b{display:block;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cherry)}
.eq span{color:var(--ink-2);font-size:13.5px}
.signals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:26px}
.sig{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;padding:14px 16px}
.sig.hot{--c:var(--cherry)}.sig.ref{--c:var(--gold)}.sig.max{--c:var(--ink-3)}
.sig b{display:block;font:400 1.4rem var(--serif)}
.sig span{color:var(--ink-2);font-size:13.5px}
.status{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
@media (max-width:1000px){.cot{grid-template-columns:1fr}.cot-res{position:static}}
@media (max-width:640px){.chain{grid-template-columns:1fr 1fr}.chain div::after{display:none}}

/* ---- inventario ---- */
.item.lote{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:22px}
.lote-num .prow-au{border-bottom:1px dashed var(--line);color:var(--ink-2);font-size:13.5px}
.lote-num .prow-au b{color:var(--ink)}
.lote-num .prow-au.total b{color:var(--cherry);font-size:15px}
.lote .chain{margin:10px 0 14px}
.chain.small b{font-size:.95rem}
.lote .stepper{margin-top:4px}
.mini{font-size:12.5px;margin:8px 0 0;padding-left:10px;border-left:3px solid var(--c)}
p.al-warn{--c:var(--gold);color:var(--gold)}
p.al-bad{--c:var(--cherry);color:var(--cherry)}
.lote .item-actions{justify-content:flex-start;margin-top:12px}
@media (max-width:820px){.item.lote{grid-template-columns:1fr}}

/* ---- clientes ---- */
.item.cliente{grid-template-columns:auto minmax(0,1fr) auto}
.est{font:600 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid currentColor}
.est.fiel{color:var(--leaf)}.est.nuevo{color:var(--doc)}.est.riesgo{color:var(--gold)}.est.perdido{color:var(--cherry)}
.llamar{background:var(--paper-2);border:1px dashed var(--line);border-radius:16px;padding:16px 18px;margin-bottom:18px}
.llamar h3{font-size:1.5rem;margin-bottom:10px}
.rank{display:grid;gap:8px;margin-top:26px}
.rk{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,2fr) auto;gap:14px;align-items:center;font-size:13.5px}
.rk-n{font-weight:600}
.rk-bar{display:block;height:14px;background:var(--paper-2);border-radius:7px;overflow:hidden}
@keyframes grow{from{transform:scaleX(0)}}
.rk-bar i{display:block;height:100%;width:100%;transform:scaleX(var(--w));background:var(--cherry);animation:grow .9s var(--ease-out)}
@media (max-width:640px){.rk{grid-template-columns:1fr auto}.rk-bar{grid-column:1/-1}}

/* ---- v5: dos productos y admin ---- */
.tab.adm{border:1px dashed var(--ink-3);color:var(--ink-3)}
.tab.adm[aria-current=page]{border-style:solid}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:34px}
.card-cafe{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s var(--ease-out),box-shadow .2s}
.card-cafe:hover{transform:translateY(-5px);box-shadow:0 26px 46px -22px rgba(29,20,15,.5)}
.card-cafe.dark{background:linear-gradient(180deg,#4A2E1B,#4A2E1B);border-color:#6a4630;color:#E6D7C3}
.cc-art{position:relative;height:200px;background:var(--paper-2);cursor:pointer;overflow:hidden}
.card-cafe.dark .cc-art{background:#3f2717}
.cc-art svg{position:absolute;inset:0;width:100%;height:100%}
.cc-art .front{transition:transform .35s var(--ease-out)}
.card-cafe:hover .cc-art .front{transform:translateY(-6px)}
.cc-score{position:absolute;left:16px;top:12px}
.cc-score b{display:block;font:400 52px/1 var(--serif)}
.cc-score small{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.card-cafe.dark .cc-score small{color:#d3c0a5}
.cc-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cc-body h3{font-size:1.9rem;line-height:1.05}
.card-cafe.dark h3 em{color:var(--crema)}
.notas-linea{margin:0;color:var(--ink-2);font-size:14px}
.card-cafe.dark .notas-linea,.card-cafe.dark .kicker{color:#d3c0a5}
.cc-foot{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line)}
.card-cafe.dark .cc-foot{border-color:#6a4630}
.cc-foot b{font:600 1.35rem var(--mono)}
.cc-foot small{color:var(--ink-2)}
.cc-foot .btn{margin-left:auto}
.valor{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:32px}
.val{grid-column:span 3}
.val:first-child{grid-column:span 6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 28px;align-items:baseline;padding:26px 28px}
.val:first-child b{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.val:nth-child(3),.val:nth-child(4){grid-column:span 3}
@media (max-width:900px){.valor{grid-template-columns:1fr}.val,.val:first-child,.val:nth-child(3),.val:nth-child(4){grid-column:auto}.val:first-child{grid-template-columns:1fr}}
.val{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--cherry);border-radius:14px;padding:18px}
.val b{display:block;font:400 1.5rem/1.1 var(--serif);margin-bottom:6px}
.val span{color:var(--ink-2);font-size:14px}
.cinta{border-top:1px solid var(--line);margin-top:30px}
.cinta-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:20px}
.cp{border-top:2px solid var(--ink);padding-top:10px}
.cp .n{display:none}
.cp{border-top:2px solid var(--ink);padding-top:12px}
.cp b{font:400 1.35rem var(--serif);display:block}
.cp b{display:block;margin-top:4px}
.cp small{color:var(--ink-2);font-size:13px}
.prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px 48px;align-items:start}
.prod-art{position:sticky;top:90px}
.prod-card{position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(120% 80% at 80% 0%,#4A2E1B,#4A2E1B 62%);color:#E6D7C3;padding:26px;min-height:420px}
.prod-title{font:400 clamp(2.4rem,4.4vw,3.6rem)/1 var(--serif);margin:26px 0 0}
.prod-title em{color:var(--crema)}
.prod-score{font:400 clamp(3.4rem,6vw,4.8rem)/1 var(--serif);margin:22px 0 0;color:#fff}
.prod-score small{font:600 12px var(--mono);letter-spacing:.1em;margin-left:8px;color:#d3c0a5}
.notas-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 0}
.notas-chips li{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;background:var(--card)}
.prod-buy h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;margin-bottom:12px}
.vars{display:grid;gap:8px;margin:22px 0 18px}
.var{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s,background .2s}
.var:hover{border-color:var(--ink-2)}
.var.on{border-color:var(--cherry);background:color-mix(in srgb,var(--cherry) 6%,transparent);box-shadow:inset 0 0 0 1px var(--cherry)}
.var b{font:400 1.5rem/1 var(--serif)}
.var span{font-weight:600;font-size:13px}
.var small{grid-column:2;color:var(--ink-2);font-size:12.5px}
.var .precio{grid-row:1/3;grid-column:3;font-weight:600;font-size:1.1rem}
.var:disabled{opacity:.45;cursor:not-allowed}
.buy-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.precio-grande{font-size:2.2rem;display:block;line-height:1}
.buy-row small{color:var(--ink-2)}
.pago{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;background:var(--paper-2);border-radius:16px;padding:16px 18px;margin-top:22px;align-items:center}
.pago b{display:block;font-size:1.25rem}
.pago small{color:var(--ink-2);font-size:12px}
.pago .mas{text-align:center;border-left:1px dashed var(--ink-3);padding-left:14px}
.pago .mas b{font:400 2rem/1 var(--serif);color:var(--leaf)}
.prod-ficha,.prod-receta,.espera{grid-column:1/-1}
.attrs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:26px}
.attr{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--c);border-radius:14px;padding:14px 16px;display:grid;gap:3px}
.attr b{font:400 1.6rem/1.1 var(--serif)}
.attr .lvtag{justify-self:start;margin-top:4px}
.attr small{color:var(--ink-3);font-size:12px}
.leyenda{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:18px;font-size:13px;color:var(--ink-2)}
.leyenda span{display:flex;align-items:center;gap:8px}
.leyenda i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:0 0 auto}
.receta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:24px}
.receta div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.receta b{display:block;font:400 1.5rem/1 var(--serif);margin-top:4px}
.espera{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink);color:var(--paper);border-radius:20px;padding:28px 30px;margin-top:20px}
.espera h3{font-size:2rem;color:var(--paper)}
.espera p{margin:6px 0 0;color:#d3c0a5;max-width:46ch}
.espera-form{display:flex;gap:8px;flex-wrap:wrap}
.espera-form .input{min-width:220px;background:#5a3a26;border-color:#8a664b;color:var(--paper)}
.admin-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--paper-2);border:1px dashed var(--line);border-radius:16px;padding:14px 18px;margin-bottom:24px}
.admin-bar b{display:block;font:400 1.3rem var(--serif)}
@media (max-width:900px){.prod{grid-template-columns:1fr;gap:28px}.prod-art{position:static}.pago{grid-template-columns:1fr 1fr}.pago .mas{grid-column:1/-1;border-left:0;border-top:1px dashed var(--ink-3);padding:10px 0 0}}

/* ---- panel interno: login ---- */
body[data-view=login] .wrap{display:grid;place-items:center;min-height:calc(100dvh - 120px);padding-block:40px}
.login{width:100%;max-width:440px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 32px;box-shadow:var(--shadow)}
.login-card .mark{width:34px;height:auto;color:var(--cherry);display:block;margin-bottom:18px}
.login-card h1{font-size:2.6rem;line-height:1;margin-bottom:6px}
.login-card .hint{margin:0 0 22px}
.login-form{display:grid;gap:14px}
.login-form .btn{justify-content:center}
.login-form .err{margin:0}
.admin-side{display:flex;align-items:center;gap:12px;margin-left:auto}
.admin-side .mono{font-size:12.5px;color:var(--ink-2)}

/* ---- v6: idioma, fincas, planes, diario ---- */
.lang{display:flex;gap:2px;background:var(--paper-2);border-radius:999px;padding:3px}
.lang button{border:0;background:transparent;border-radius:999px;padding:5px 10px;font:600 11.5px var(--mono);letter-spacing:.06em;color:var(--ink-3);cursor:pointer}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
body[data-view=subasta] .lang{background:#3f2717}
body[data-view=subasta] .lang button[aria-pressed=true]{background:var(--crema);color:var(--roast)}
.fincas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:32px}
.finca{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.finca:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.finca.propia{border-style:dashed;background:var(--paper-2)}
.finca-art{position:relative;height:120px;background:var(--paper-2)}
.finca-art svg{position:absolute;inset:0;width:100%;height:100%}
.finca-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.finca-body h3{font-size:1.5rem;line-height:1.1}
.finca-prod{margin:0;font-weight:600;font-size:14px}
.excl{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 7px;vertical-align:middle}
.finca-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);flex-wrap:wrap}
.var-chip{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);border-radius:999px;padding:4px 10px}
.pronto{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cherry);margin-left:auto}
.finca-foot .btn{margin-left:auto}
.foto-pend{display:grid;place-items:center;text-align:center;aspect-ratio:4/3;border:1px dashed var(--line);border-radius:16px;background:var(--paper-2);color:var(--ink-3);font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-top:16px;padding:20px}
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:10px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.plan.hot{border-color:var(--cherry);box-shadow:0 20px 40px -24px rgba(168,50,31,.5)}
.plan-tag{position:absolute;top:-11px;left:24px;background:var(--cherry);color:#fff;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.plan h3{font-size:2rem;line-height:1}
.plan-precio{margin:0;display:flex;align-items:baseline;gap:6px}
.plan-precio b{font-size:1.9rem}
.plan-precio small{color:var(--ink-2)}
.plan-lista{list-style:none;padding:0;margin:6px 0 16px;display:grid;gap:7px;font-size:14px;flex:1}
.plan-lista li{display:flex;gap:8px;color:var(--ink-2)}
.plan-lista li::before{content:"✓";color:var(--leaf);font-weight:700}
.entradas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.entrada{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,box-shadow .3s}
.entrada:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.entrada h3{font-size:1.7rem;line-height:1.1}
.entrada p{color:var(--ink-2);margin:0;flex:1}
.entrada .btn{align-self:flex-start}
.ent-meta{display:flex;align-items:center;gap:10px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tag{border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--cherry)}
.post{max-width:70ch;margin:0 auto;display:grid;gap:14px}
.post h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02}
.post .btn{justify-self:start}
.post-body{font-size:1.05rem;color:var(--ink-2)}
.post .espera{margin-top:26px}

/* ---- v7: ficha en dos zonas, preguntas frecuentes ---- */
.prod{display:block}
.prod-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px 48px;align-items:start;margin-bottom:20px}
.prod-art{position:static}
.cierre{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:34px;padding-top:22px}
.cierre p{margin:0;color:var(--ink-2);max-width:56ch}
.faq-lista{display:grid;gap:8px;margin-top:28px;max-width:80ch}
.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.faq[open]{border-color:var(--ink-3)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 20px var(--mono);color:var(--cherry);line-height:1}
.faq[open] summary::after{content:"−"}
.faq h3{font-size:1.35rem;line-height:1.2;margin:0}
.faq p{margin:12px 0 0;color:var(--ink-2)}
.prow-au .sobre{color:var(--leaf)}
@media (max-width:900px){.prod-top{grid-template-columns:1fr;gap:28px}}


/* ============================================================
   POLISH · estándares de animación y de sensación nativa en móvil
   (review-animations + mobile-native)
   ============================================================ */

/* --- base táctil: sin destello gris al tocar, sin zoom raro --- */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overscroll-behavior:none}
button,a,[role=button],summary,.tab,.chip,.var,.qbtn{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* el texto sí se debe poder copiar: precios, notas, direcciones */
p,h1,h2,h3,td,th,li,.mono,.lede,.hint{user-select:text;-webkit-user-select:text}

/* iOS hace zoom si el campo mide menos de 16px */
@media (pointer:coarse){input,select,textarea{font-size:16px}}

/* espacio del notch y de la barra inferior */
.top-inner{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-left:calc(20px + env(safe-area-inset-left,0px));padding-right:calc(20px + env(safe-area-inset-right,0px))}
.tray{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.toasts{right:calc(18px + env(safe-area-inset-right,0px))}
.wrap{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}

/* el hover se queda pegado al tocar: solo con mouse de verdad */
@media (hover:none),(pointer:coarse){
  .card-cafe:hover,.finca:hover,.entrada:hover,.tool:hover,.lot:hover,.mode:hover,.plan:hover,.up:hover{transform:none;box-shadow:var(--shadow)}
  .step:hover,.live-link:hover{transform:none}
  .btn:hover{background:transparent;color:var(--ink)}
  .btn.primary:hover{background:var(--cherry);color:#fff}
  .card-cafe:hover .cc-art .front,.lot:hover .lot-art .front{transform:none}
}

/* el hover debe responder rápido: menos de 300 ms */
.card-cafe,.finca,.entrada,.tool,.plan,.lot,.mode{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),border-color .2s}
.card-cafe:hover .cc-art .front,.lot:hover .lot-art .front{transition:transform .35s var(--ease-out)}
.btn{transition:transform .12s var(--ease-out),background .15s,color .15s,border-color .15s}
.btn:active,.qbtn:active,.var:active,.tab:active{transform:scale(.97)}
.bidbtn{transition:transform .12s var(--ease-out),filter .15s}
.bidbtn:active{transform:scale(.97)}

/* entradas: curva fuerte y escalonado corto (30–80 ms) */
.reveal{animation-duration:.5s;animation-timing-function:var(--ease-out);animation-delay:calc(var(--i,0)*50ms)}
.item,.prow{animation-duration:.4s;animation-timing-function:var(--ease-out)}

/* el aro del reloj de la subasta se mueve suave en vez de a saltos */
@property --p{syntax:"<number>";inherits:false;initial-value:100}
.clock{transition:--p .25s linear}

/* el panel del diálogo no debe arrastrar el scroll de la página */
.dlg-body,.au-feed ol{overscroll-behavior:contain}

/* menos movimiento cuando el sistema lo pide: se mantiene el desvanecido, se quita el desplazamiento */
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .float-chip{animation:none}
  .live-dot{animation:none}
  .bar i,.cbar i,.rk-bar i,.vs i,.trust-bar i{transition:none}
  .card-cafe:hover,.finca:hover,.entrada:hover,.tool:hover,.plan:hover,.lot:hover{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important}
}


/* el carrito entra desde abajo en vez de aparecer de golpe */
.tray{transition:transform .28s var(--ease-out),opacity .2s var(--ease-out)}
@starting-style{.tray{transform:translate(-50%,120%);opacity:0}}
@media (prefers-reduced-motion:reduce){.tray{transition:opacity .15s}}

/* el cambio de idioma reemplaza toda la página: un desvanecido corto evita el salto */
#view.swap{opacity:.35;transition:opacity .12s var(--ease-out)}


/* ---- carrito: botón del encabezado y panel lateral ---- */
.cart-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer;transition:transform .12s var(--ease-out),border-color .2s}
.cart-btn:active{transform:scale(.94)}
.cart-btn.lleno{border-color:var(--cherry);color:var(--cherry)}
@media (hover:hover) and (pointer:fine){.cart-btn:hover{border-color:var(--ink)}}
.cart-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--cherry);color:#fff;font:600 11px/18px var(--mono);text-align:center}
body[data-view=subasta] .cart-btn{background:#3f2717;border-color:#6a4630;color:#E6D7C3}

dialog.drawer{position:fixed;inset:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);padding:0;box-shadow:-30px 0 60px -30px rgba(29,20,15,.5)}
dialog.drawer[open]{display:flex;flex-direction:column}
dialog.drawer::backdrop{background:rgba(18,12,9,.45);backdrop-filter:blur(2px)}
dialog.drawer[open]{animation:drawerIn .32s cubic-bezier(.32,.72,0,1)}
dialog.drawer[open]::backdrop{animation:fadeIn .32s var(--ease-out)}
@keyframes drawerIn{from{transform:translateX(100%)}}
@keyframes fadeIn{from{opacity:0}}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(18px + env(safe-area-inset-top,0px)) 20px 14px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:1.8rem}
.cart-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 20px}
.cart-foot{display:grid;gap:8px;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--card)}
.cart-foot .btn{width:100%;justify-content:center}
.cart-foot .hint{margin:2px 0 0;text-align:center}
.cart-items{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:14px}
.cart-item{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:0;padding-bottom:0}
.cart-art{position:relative;height:56px;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.cart-art svg{position:absolute;inset:0;width:100%;height:100%}
.cart-txt b{display:block;font:400 1.25rem/1.1 var(--serif)}
.cart-txt small{color:var(--ink-2);font-size:12.5px}
.cart-qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.cart-qty .btn{width:30px;padding:0;justify-content:center}
.cart-del{border:0;background:transparent;color:var(--ink-3);font:500 12px var(--sans);cursor:pointer;text-decoration:underline;margin-left:4px}
.cart-del:hover{color:var(--cherry)}
.cart-precio{align-self:start;font-size:1.05rem}
.cart-sumas{display:grid;gap:7px;padding:16px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.cart-sumas div{display:flex;justify-content:space-between;gap:12px}
.cart-sumas b{color:var(--ink)}
.cart-total{padding-top:7px;border-top:1px solid var(--line);font-size:16px}
.cart-total b{font-size:1.3rem}
.cart-form{margin-top:18px}
.cart-vacio{display:grid;gap:14px;place-items:center;text-align:center;padding:60px 10px;color:var(--ink-2)}
@media (max-width:520px){dialog.drawer{width:100vw;border-left:0}.cart-item{grid-template-columns:56px minmax(0,1fr) auto}}
@media (prefers-reduced-motion:reduce){dialog.drawer[open]{animation:fadeIn .15s}}

.sale{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px;color:var(--ink-2);font-size:13.5px}
.sale-tag{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leaf);border:1px solid var(--leaf);border-radius:999px;padding:4px 10px;white-space:nowrap}


/* ============================================================
   LÍNEA GRÁFICA NANDEZ (septiembre 2026) con estructura minimalista
   Cuatro tintas, una sola tinta por pieza, sin degradados, sin sombras,
   esquinas pequeñas y bordes de 1 px. Terracota solo como marca de hallazgo.
   ============================================================ */
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
body::before{background:repeating-radial-gradient(ellipse at 12% 18%,transparent 0 26px,rgba(74,46,27,.05) 26px 27px),
             repeating-radial-gradient(ellipse at 88% 72%,transparent 0 34px,rgba(74,46,27,.04) 34px 35px)}
body::after{opacity:.1}
body{line-height:1.6}

/* enlaces: sin el azul subrayado del navegador */
a{color:inherit;text-decoration:none}
.enlace,.hint a,.legal-b a,.foot a,.b2b a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.enlace:hover,.hint a:hover,.legal-b a:hover,.foot a:hover{color:var(--cherry)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body[data-view=subasta] :focus-visible{outline-color:var(--crema)}

/* marca: flor del cafeto y logotipo en serif de trazo grueso */
.brand .mark{width:24px;height:24px;color:var(--ink)}
.brand b{font:400 30px/1 var(--serif);letter-spacing:-.01em;font-style:normal}
body[data-view=subasta] .brand .mark{color:var(--crema)}
body[data-view=subasta] .brand small{color:#c9b497}
.login-card .mark{width:34px;height:34px;color:var(--ink)}

/* textos */
.eyebrow{color:var(--leaf)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08}
body[data-view=subasta] .eyebrow{color:var(--crema)}

/* botones: rectos, sin píldora; el principal en marrón tueste */
.btn{border-radius:6px}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:#3a2415;border-color:#3a2415;color:var(--paper)}
.btn.primary:disabled:hover{background:var(--ink);color:var(--paper)}
body[data-view=subasta] .btn.primary{background:var(--crema);border-color:var(--crema);color:var(--ink)}
@media (hover:none),(pointer:coarse){.btn.primary:hover{background:var(--ink);color:var(--paper)}}
.tabs,.seg,.lang{border-radius:8px}
.tab,.seg button,.lang button{border-radius:6px}
.cart-btn{border-radius:8px}
.input,.search{border-radius:6px}

/* superficies planas: una tinta, 12 px de esquina como máximo */
.card-cafe,.finca,.plan,.entrada,.val,.attr,.receta div,.faq,.var,.lot,.mode,.tool,.res-card,.wpanel,.item,.login-card,
.prod-card,.hero-card,.foto-pend,.espera,.levels,.empty,.llamar,.admin-bar,.mkt,.eq,.sig,.ref-chip,.pago,.check li,.offer-sum,.pp-cover{border-radius:12px}
dialog{border-radius:12px}
dialog.drawer{border-radius:0}
.toast,.tray{border-radius:10px}
.prod-card,.mode.dark,.pp-cover,.card-cafe.dark{background:var(--ink)}
.card-cafe.dark{border-color:var(--ink)}
.st-en-subasta{background:var(--crema)!important;color:var(--ink)!important;border-color:var(--crema)!important}
.plan.hot{border-color:var(--ink)}
.plan-tag{background:var(--ink);color:var(--paper);border-radius:4px}
.var.on{border-color:var(--ink);background:var(--card);outline:1px solid var(--ink);outline-offset:-2px}
.val{border-left:1px solid var(--line);border-top:2px solid var(--cherry)}
.card-cafe:hover,.finca:hover,.entrada:hover,.tool:hover,.mode:hover,.lot:hover{transform:translateY(-2px)}
.cc-foot,.finca-foot,.lot-price{border-top-style:solid}
@keyframes ping{50%{opacity:.35}}

/* preguntas frecuentes: sin cajas, solo una línea entre preguntas */
.faq-lista{gap:0}
.faq{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:18px 0}
.faq[open]{border-color:var(--line)}
.faq summary::after{color:var(--ink)}

/* ficha: la compra primero */
.sale span a{margin-left:4px}
@media (max-width:900px){
  .prod-card{min-height:0;padding-bottom:180px}
  .prod-top{gap:22px}
}

/* portada */

/* para cafeterías */
.b2b-tabla{border-collapse:collapse;width:100%;min-width:520px;margin-top:26px;font-size:14px}
.b2b-tabla th,.b2b-tabla td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.b2b-tabla thead th{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.b2b-tabla tbody th{font:400 1.3rem/1.1 var(--serif)}
.b2b-tabla small{display:block;font:500 11px var(--sans);color:var(--ink-2);margin-top:2px}
.b2b-tabla td .mono{font-weight:600}

/* después de pedir */
.pasos-pedido{margin:0 0 16px;padding-left:22px;display:grid;gap:10px}
.pasos-pedido b{display:block}
.pasos-pedido span{color:var(--ink-2);font-size:14px}
.check-line{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);cursor:pointer}
.check-line input{width:20px;height:20px;accent-color:var(--ink);flex:0 0 auto;margin-top:1px}

/* contacto, envíos, términos y datos */
.legal{max-width:760px}
.legal-b{padding:22px 0;border-bottom:1px solid var(--line)}
.legal-b h3{font-size:1.6rem;margin-bottom:8px}
.legal-b p{margin:0 0 8px;color:var(--ink-2);max-width:65ch}

/* pie de página: quién vende y las condiciones */
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 30px;align-items:start}
.foot-marca{display:grid;gap:4px}
.foot-marca b{font:400 1.5rem/1 var(--serif);color:var(--ink)}
.foot-links{display:grid;gap:8px;justify-items:start}
.foot-nota{grid-column:1/-1;color:var(--ink-3)}
body[data-view=subasta] .foot-marca b{color:var(--crema)}
body[data-view=subasta] .foot-nota{color:#c9b497}

/* menú del celular: una fila con logo, carrito y menú */
.menu-btn{display:none;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
body[data-view=subasta] .menu-btn{background:#3f2717;border-color:#6a4630;color:var(--crema)}
.badge{display:none}
@media (max-width:760px){
  .top-inner{flex-wrap:wrap;gap:10px;padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:8px}
  .brand{flex:1;min-width:0}
  .brand small{display:none}
  .brand b{font-size:27px}
  .menu-btn{display:grid;order:3}
  .cart-btn{order:2;width:44px;height:44px}
  .tabs,.lang{display:none}
  body.menu-abierto .tabs{display:flex;order:4;width:100%;flex-direction:column;background:transparent;padding:4px 0 0;margin:0;gap:0;border-top:1px solid var(--line)}
  body.menu-abierto .tab{padding:12px 4px;min-height:48px;font-size:17px;justify-content:flex-start;border-bottom:1px solid var(--line);border-radius:0}
  body.menu-abierto .tab[aria-current=page]{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:5px}
  body[data-view=subasta].menu-abierto .tab[aria-current=page]{color:var(--crema)}
  body.menu-abierto .lang{display:flex;order:5;margin-bottom:6px}
  body.menu-abierto .lang button{min-height:44px;min-width:56px}
  .foot{grid-template-columns:1fr}
}

/* tocar con el dedo: 44 px */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .cart-qty .btn{width:40px;height:40px}
  .cart-del{min-height:40px}
  .qbtn{min-height:48px}
}

/* ficha del café: registro de campo, filas finas y columnas alineadas */
.ficha-tabla{width:100%;border-collapse:collapse;margin-top:28px;border-top:1px solid var(--ink)}
.ficha-tabla thead th{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:12px 16px 10px 0;border-bottom:1px solid var(--line)}
.ficha-tabla tbody th,.ficha-tabla td{text-align:left;vertical-align:baseline;padding:18px 16px 18px 0;border-bottom:1px solid var(--line)}
.ficha-tabla tbody th{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);width:22%}
.ficha-tabla .fv{font:400 1.7rem/1.1 var(--serif);color:var(--ink);width:30%}
.ficha-tabla .fn{width:16%}
.ficha-tabla .ff{font-size:14px;color:var(--ink)}
.ficha-tabla small{display:block;font:400 13px/1.4 var(--sans);color:var(--ink-2);margin-top:4px;letter-spacing:0;text-transform:none}
.ficha-tabla .lvtag{display:inline-block;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c);border:1px solid var(--c);border-radius:4px;padding:3px 8px}
.leyenda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;margin:18px 0 0;font-size:13px}
.leyenda div{display:block}
.leyenda dt{display:flex;align-items:center;gap:8px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.leyenda dt i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.leyenda dd{margin:4px 0 0 16px;color:var(--ink-2)}
@media (max-width:760px){
  .ficha-tabla thead{display:none}
  .ficha-tabla tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
  .ficha-tabla tbody th,.ficha-tabla td{padding:0;border:0;width:auto}
  .ficha-tabla tbody th{grid-column:1}
  .ficha-tabla .fn{grid-column:2;grid-row:1;justify-self:end}
  .ficha-tabla .fv,.ficha-tabla .ff{grid-column:1/-1}
  .leyenda{grid-template-columns:1fr 1fr}
}

/* panel: precio del día y su movimiento */
.mkt-aviso{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;border:1px solid var(--line);border-left:3px solid var(--ink-3);border-radius:12px;background:var(--card);padding:12px 16px;margin:-8px 0 24px}
.mkt-aviso.sube{border-left-color:var(--leaf)}
.mkt-aviso.baja{border-left-color:var(--cherry)}
.mkt-aviso b.mono{font-size:1.2rem;margin-left:6px}
.mkt-aviso .hint{margin:0}
.mkt-aviso .btn{margin-left:auto}
.mkt-delta{font:600 13px var(--mono)}
.mkt-aviso.sube .mkt-delta{color:var(--leaf)}
.mkt-aviso.baja .mkt-delta{color:var(--cherry)}
.mkt.act{gap:8px}
.mkt-linea{display:block;width:100%;height:60px;margin:22px 0 6px;color:var(--leaf)}
.pos{color:var(--leaf)}

/* ficha: lo que le pagamos a la finca */
.pago-finca{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:26px}
.pago-finca>div{background:var(--card);padding:16px 18px;display:grid;gap:4px;align-content:start}
.pago-finca b{font-size:1.4rem}
.pago-finca small{color:var(--ink-2);font-size:12.5px}
.pago-finca .pf-mas{text-align:center;min-width:130px}
.pago-finca .pf-mas b{font:400 2.1rem/1 var(--serif);color:var(--leaf)}
@media (max-width:640px){.pago-finca{grid-template-columns:1fr 1fr}.pago-finca .pf-mas{grid-column:1/-1}}
.no-encontrada .cta{margin-top:28px}
.prod-receta,.prod-ficha{margin-top:64px}


/* ---- la cereza por dentro ---- */
/* el radio se registra para que abra y cierre con suavidad; la posición no
   se interpola, tiene que pegarse al puntero sin arrastre */
@property --r { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

/* el disco sobresale un 9 % de la fruta: el aire alrededor lo descuenta */
.cereza{margin:0;display:grid;gap:56px;justify-items:center;padding-block:9% 0}
.cereza-lente{--x:50%;--y:50%;--r:0%;position:relative;width:min(380px,82%);aspect-ratio:1;
  transition:--r .45s var(--ease-out);touch-action:none;cursor:crosshair}

/* la luz cálida detrás: dos manchas de la propia marca, muy bajas */
.cereza-halo{position:absolute;inset:-22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(42% 42% at 32% 28%,rgba(168,50,31,.26),transparent 70%),
             radial-gradient(46% 46% at 72% 70%,rgba(92,122,74,.2),transparent 72%);
  filter:blur(28px)}


.cereza-lente img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
/* la ventana por donde se ve el corte */
.cereza-corte{
  -webkit-mask-image:radial-gradient(circle at var(--x) var(--y),#000 calc(var(--r) * .72),transparent var(--r));
  mask-image:radial-gradient(circle at var(--x) var(--y),#000 calc(var(--r) * .72),transparent var(--r))}


.cereza figcaption{display:grid;gap:10px;justify-items:center;text-align:center;max-width:42ch}
.cereza-pista{color:var(--ink-2);font-size:15px;margin:0}
.cereza-btn{font:inherit;font-size:15px;color:var(--ink);background:none;border:0;padding:2px 0;
  border-bottom:1px solid var(--line);cursor:pointer;transition:border-color .2s var(--ease-out)}
.cereza-btn:hover{border-bottom-color:var(--ink)}
.cereza-btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

/* las seis capas, de afuera hacia adentro: aquí la numeración sí es un orden */
.cereza-capas{list-style:none;counter-reset:capa;margin:6px 0 0;padding:0;
  display:grid;gap:12px;text-align:left;width:100%}
.cereza-capas li{counter-increment:capa;display:grid;grid-template-columns:auto 1fr;
  column-gap:12px;align-items:baseline;padding-top:10px;border-top:1px solid var(--line)}
.cereza-capas li::before{content:counter(capa);font:600 11px var(--mono);color:var(--ink-3)}
.cereza-capas b{font:400 1.05rem/1.2 var(--serif);grid-column:2}
.cereza-capas i{grid-column:2;font:italic 13px/1.3 var(--serif);color:var(--ink-3)}
.cereza-capas span{grid-column:2;color:var(--ink-2);font-size:13.5px;margin-top:2px}

.con-dedo{display:none}
@media (hover:none),(pointer:coarse){.con-mouse{display:none}.con-dedo{display:inline}}
@media (prefers-reduced-motion:reduce){.cereza-lente{transition-duration:.01ms}}

/* ============================================================
   VIDRIO.
   Una capa encima de todo lo anterior: el papel y sus colores siguen
   siendo los de la marca, lo que cambia es el material de lo que flota
   sobre él. Tres piezas hacen el efecto y ninguna sirve sola:
     1. algo de color detrás, porque el vidrio sin nada que refractar es gris;
     2. el desenfoque con saturación, que es lo que se ve a través;
     3. el canto de luz arriba y abajo, que es lo que lo vuelve un objeto.
   ============================================================ */
:root{
  --v-fondo:rgba(255,255,255,.30);
  --v-fondo-2:rgba(255,255,255,.50);
  --v-luz:rgba(255,255,255,.95);
  --v-luz-2:rgba(255,255,255,.32);
  --v-canto:rgba(255,255,255,.6);
  --v-sombra:0 1px 1px rgba(74,46,27,.04),0 24px 46px -28px rgba(74,46,27,.45);
  --v-brillo:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -1px 1px rgba(74,46,27,.05);
  --v-lente:blur(18px) saturate(1.5);
  --v-lente-2:blur(34px) saturate(1.7);
}
body[data-view=subasta]{
  --v-fondo:rgba(255,255,255,.05);
  --v-fondo-2:rgba(40,24,14,.55);
  --v-luz:rgba(255,255,255,.45);
  --v-luz-2:rgba(255,255,255,.14);
  --v-canto:rgba(255,255,255,.13);
  --v-sombra:0 24px 46px -28px rgba(0,0,0,.75);
  --v-brillo:inset 0 1px 1px rgba(255,255,255,.12);
}

/* 1. el color de atrás: tres manchas de la propia marca, que derivan despacio */
body::before{inset:-14%;
  background:
    radial-gradient(34vmax 34vmax at 16% 14%,rgba(192,90,62,.24),transparent 70%),
    radial-gradient(40vmax 40vmax at 86% 36%,rgba(46,71,50,.19),transparent 70%),
    radial-gradient(38vmax 38vmax at 36% 84%,rgba(214,160,84,.26),transparent 70%),
    repeating-radial-gradient(ellipse at 12% 18%,transparent 0 26px,rgba(29,20,15,.045) 26px 27px),
    repeating-radial-gradient(ellipse at 88% 72%,transparent 0 34px,rgba(29,20,15,.04) 34px 35px)}
body[data-view=subasta]::before{
  background:
    radial-gradient(34vmax 34vmax at 16% 14%,rgba(192,90,62,.30),transparent 70%),
    radial-gradient(40vmax 40vmax at 86% 40%,rgba(214,160,84,.14),transparent 70%),
    repeating-radial-gradient(ellipse at 15% 20%,transparent 0 26px,rgba(255,200,150,.03) 26px 27px),
    repeating-radial-gradient(ellipse at 85% 80%,transparent 0 34px,rgba(255,200,150,.025) 34px 35px)}
/* solo con mouse: en un celular, mover el fondo obliga a recalcular cada vidrio en cada cuadro */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body::before{animation:deriva 46s ease-in-out infinite alternate}
}
@keyframes deriva{to{transform:translate3d(3%,-2.5%,0) rotate(2deg)}}

/* los resplandores se salen de su caja a propósito; lo que no pueden es ensanchar la página.
   clip y no hidden: hidden volvería el cuerpo un contenedor de scroll y soltaría el menú fijo */
html,body{overflow-x:clip}

/* 3. el canto de luz, compartido */
.top-inner::before,.btn::before,.cereza-vidrio::before,.tray::before{content:"";position:absolute;inset:0;
  border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(180deg,var(--v-luz) 0%,var(--v-luz-2) 22%,transparent 42%,transparent 60%,var(--v-luz-2) 82%,var(--v-luz) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* ---- el menú: una píldora que flota ---- */
.top,body[data-view=subasta] .top{position:sticky;top:0;z-index:50;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 0;
  background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.top-inner{pointer-events:auto;position:relative;max-width:1180px;flex-wrap:nowrap;gap:10px 14px;
  padding:7px 9px 7px 20px;border-radius:999px;
  background:var(--v-fondo-2);backdrop-filter:var(--v-lente-2);-webkit-backdrop-filter:var(--v-lente-2);
  box-shadow:var(--v-brillo),var(--v-sombra)}
.tabs,body[data-view=subasta] .tabs{background:transparent;margin-inline:auto;flex-wrap:nowrap;padding:0}
.tab{transition:background .2s var(--ease-out),color .2s var(--ease-out);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.tab:not([aria-current=page]):hover{background:rgba(74,46,27,.08)}}
.brand b{font-size:27px}
.lang,body[data-view=subasta] .lang{background:rgba(74,46,27,.08)}
body[data-view=subasta] .lang{background:rgba(255,255,255,.08)}
.cart-btn{background:var(--v-fondo);border-color:var(--v-canto);box-shadow:var(--v-brillo)}
@media (max-width:1080px){.brand small{display:none}}
@media (max-width:900px){.tab{padding:8px 10px;font-size:13px}.nav-time{display:none}}
@media (max-width:760px){
  .top{padding-inline:10px}
  .top-inner{flex-wrap:wrap;border-radius:26px;padding:7px 8px 7px 16px}
  .menu-btn{border-radius:999px;background:var(--v-fondo);border-color:var(--v-canto)}
  body.menu-abierto .top-inner{padding-bottom:12px}
  body.menu-abierto .tabs{border-top-color:rgba(74,46,27,.12)}
  body.menu-abierto .tab{border-bottom-color:rgba(74,46,27,.1)}
}

/* ---- botones ---- */
.btn{position:relative;border:0;background:var(--v-fondo);color:var(--ink);
  backdrop-filter:var(--v-lente);-webkit-backdrop-filter:var(--v-lente);
  box-shadow:var(--v-brillo),0 10px 22px -16px rgba(74,46,27,.5);
  transition:transform .16s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.btn:hover{background:var(--v-fondo-2);color:var(--ink)}
.btn.primary{background:rgba(74,46,27,.88);color:var(--paper);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -1px 1px rgba(0,0,0,.2),0 14px 26px -16px rgba(74,46,27,.75)}
.btn.primary::before{opacity:.5}
.btn.primary:hover{background:rgba(58,36,21,.94);color:var(--paper)}
body[data-view=subasta] .btn.primary{background:rgba(230,215,195,.92);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:not(:disabled):hover{transform:scale(1.02)}}
.btn:not(:disabled):active{transform:scale(.97)}
.btn:disabled:hover{background:var(--v-fondo)}
.btn.primary:disabled:hover{background:rgba(74,46,27,.88)}

/* ---- superficies ---- */
.card-cafe,.finca,.plan,.entrada,.faq,.val,.var,.item,.lot,.mode,.step,.wpanel,.levels,.receta div{
  background:var(--v-fondo);border:1px solid var(--v-canto);
  backdrop-filter:var(--v-lente);-webkit-backdrop-filter:var(--v-lente);
  box-shadow:var(--v-brillo),var(--v-sombra)}
/* la ficha conserva su filo de color: ese color dice quién comprobó el dato */
.attr{background:var(--v-fondo);border-left-color:var(--v-canto);border-right-color:var(--v-canto);border-bottom-color:var(--v-canto);
  backdrop-filter:var(--v-lente);-webkit-backdrop-filter:var(--v-lente);box-shadow:var(--v-sombra)}
.card-cafe,.finca,.plan,.entrada,.lot,.mode,.wpanel{border-radius:26px}
.faq,.val,.item,.var{border-radius:20px}
.chip,.chip-radio span,.notas-chips li,.input,.search{background:var(--v-fondo-2);border-color:var(--v-canto)}
.card-cafe,.finca,.entrada,.plan{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .card-cafe:hover,.finca:hover,.entrada:hover{transform:translateY(-5px);
    box-shadow:var(--v-brillo),0 1px 1px rgba(74,46,27,.04),0 38px 60px -30px rgba(74,46,27,.55)}
}

/* ---- lo que se abre encima: más opaco, porque ahí se lee y se decide ---- */
dialog{background:rgba(239,229,215,.84);backdrop-filter:var(--v-lente-2);-webkit-backdrop-filter:var(--v-lente-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),0 50px 100px -40px rgba(29,20,15,.6)}
.dlg-head,.cart-foot{background:rgba(239,229,215,.7);backdrop-filter:var(--v-lente);-webkit-backdrop-filter:var(--v-lente)}
.tray{background:rgba(74,46,27,.84);backdrop-filter:var(--v-lente-2);-webkit-backdrop-filter:var(--v-lente-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),0 24px 50px -22px rgba(29,20,15,.7);--v-luz:rgba(255,255,255,.4);--v-luz-2:rgba(255,255,255,.12)}
.tray .btn:not(.primary){background:rgba(255,255,255,.12);color:var(--paper)}

/* ---- entradas: el contenido está visible de base y la animación solo lo trae.
        Si algo falla, se lee igual; y al terminar no deja nada pegado encima. ---- */
.reveal{opacity:1;transform:none;animation:entra .8s var(--ease-out) backwards;animation-delay:calc(var(--i,0)*90ms + 120ms)}
.calm .reveal,.calm .pal{animation:none}
@keyframes entra{from{opacity:0;filter:blur(10px);transform:translateY(20px)}}
/* el titular llega palabra por palabra */
.pal{display:inline-block;animation:palabra .7s var(--ease-out) backwards;animation-delay:calc(var(--w,0)*100ms + 150ms)}
@keyframes palabra{
  0%{opacity:0;filter:blur(10px);transform:translateY(50px)}
  50%{opacity:.5;filter:blur(5px);transform:translateY(-5px)}
  100%{opacity:1;filter:none;transform:none}}

/* ---- el disco de la cereza ---- */
.cereza-vidrio{position:absolute;inset:-9%;border-radius:50%;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,.1) 55%,rgba(255,255,255,.22));
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.85),inset 0 22px 40px -24px rgba(255,255,255,.7),
             inset 0 -18px 34px -22px rgba(74,46,27,.2),0 54px 90px -46px rgba(74,46,27,.6)}
/* el reflejo de arriba: sin él es un círculo; con él es una lente */
.cereza-vidrio::after{content:"";position:absolute;inset:3% 16% auto 16%;height:30%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);filter:blur(7px)}

/* ============================================================
   LA PORTADA: el producto donde nace.
   La foto hace todo el trabajo; el texto se apoya en una sombra que va de
   la izquierda hacia el centro, justo hasta donde empieza la bolsa.
   ============================================================ */
.portada{--luz:#F4EAD7;position:relative;isolation:isolate;overflow:hidden;
  display:grid;align-items:center;min-height:540px;max-height:calc(100svh - 104px);aspect-ratio:16/9;
  margin-top:6px;border-radius:30px;color:var(--luz);background:#18231b;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 60px 100px -60px rgba(29,20,15,.8)}
.portada-foto,.portada-foto img{position:absolute;inset:0;width:100%;height:100%}
.portada-foto{z-index:-2}
.portada-foto img{object-fit:cover;object-position:60% 55%;animation:acercar 2.6s var(--ease-out) both}
@keyframes acercar{from{transform:scale(1.08)}}
.portada::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,18,.9) 0%,rgba(16,24,18,.7) 28%,rgba(16,24,18,.2) 50%,transparent 62%),
             linear-gradient(0deg,rgba(16,24,18,.55),transparent 34%)}
.portada-texto{display:grid;gap:18px;justify-items:start;max-width:min(600px,52%);padding:clamp(28px,5vw,60px) 20px clamp(28px,5vw,60px) clamp(24px,4.6vw,60px)}
.portada-sobre{margin:0;font:500 12.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,234,215,.78)}
.portada h1{font-size:clamp(2.6rem,4.7vw,4.4rem);line-height:.96;color:var(--luz)}
.portada h1 em{white-space:nowrap}
.portada h1 em{color:#EDA887}
.portada-lede{margin:0;font-size:1.08rem;line-height:1.55;color:rgba(244,234,215,.86);max-width:42ch}
.portada-cta{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:4px}
.btn.claro{background:rgba(244,234,215,.94);color:var(--ink);box-shadow:inset 0 1px 1px #fff,0 16px 30px -18px rgba(0,0,0,.6)}
.btn.claro:hover{background:#fff;color:var(--ink)}
.btn .ico{width:18px;height:18px;flex:0 0 auto;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover .ico{transform:translateX(3px)}}
.portada-link{color:var(--luz);font-size:15px;text-decoration:underline;text-underline-offset:5px;
  text-decoration-color:rgba(244,234,215,.45);transition:text-decoration-color .2s}
.portada-link:hover{text-decoration-color:var(--luz)}
.portada-sellos{list-style:none;display:flex;flex-wrap:wrap;gap:14px 30px;margin:14px 0 0;padding:20px 0 0;
  border-top:1px solid rgba(244,234,215,.2)}
.portada-sellos li{display:flex;align-items:center;gap:10px;font:600 11px/1.35 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(244,234,215,.86)}
.portada-sellos svg{width:28px;height:28px;flex:0 0 auto;color:var(--luz)}

@media (max-width:760px){
  .portada{display:flex;flex-direction:column;aspect-ratio:auto;max-height:none;min-height:0;border-radius:26px}
  .portada::before{display:none}
  .portada-texto{order:1;max-width:none;padding:28px 22px 24px}
  .portada h1 em{white-space:normal}
  .portada-foto{order:2;position:relative;inset:auto;height:auto;aspect-ratio:4/5}
  /* la foto sube a encontrarse con el verde del texto, sin corte */
  .portada-foto::after{content:"";position:absolute;inset:0 0 auto;height:26%;
    background:linear-gradient(180deg,#18231b,transparent)}
  .portada-sellos{gap:14px 20px}
  .portada-sellos li{font-size:10.5px}
}

/* ---- la cereza en su sección: la fruta a un lado, sus capas al otro ---- */
.por-dentro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:center}
.por-dentro .section-head{margin-bottom:26px}
@media (min-width:1000px){.por-dentro .cereza-capas{grid-template-columns:1fr 1fr;column-gap:30px}}
@media (max-width:860px){.por-dentro{grid-template-columns:1fr}.por-dentro .cereza{order:2}}

/* ============================================================
   LA BOLSA DE CADA CAFÉ.
   Se para sobre una luz cálida y una sombra suelta, como en la portada.
   ============================================================ */
.cc-art.con-foto{height:300px;display:grid;place-items:end center;padding-top:26px;
  background:radial-gradient(70% 60% at 50% 72%,rgba(255,255,255,.5),transparent 70%),
             linear-gradient(180deg,rgba(221,203,178,.55),rgba(230,215,195,.2))}
.cc-art.con-foto::after{content:"";position:absolute;left:30%;right:30%;bottom:16px;height:18px;border-radius:50%;
  background:rgba(74,46,27,.28);filter:blur(10px);z-index:0}
.prod-foto{position:relative;z-index:1;display:block;height:88%;width:auto;max-width:100%;object-fit:contain;
  transition:transform .45s var(--ease-out)}
.cc-art.con-foto .prod-foto{height:260px;margin-bottom:6px}
@media (hover:hover) and (pointer:fine){.card-cafe:hover .cc-art.con-foto .prod-foto{transform:translateY(-6px) scale(1.02)}}
.cc-art.con-foto .cc-score,.cc-art.con-foto .state{z-index:2}

.prod-escena{position:relative;display:grid;place-items:end center;min-height:clamp(380px,46vw,560px);
  padding:40px 24px 30px;border-radius:26px;overflow:hidden;border:1px solid var(--v-canto);
  background:radial-gradient(60% 55% at 50% 70%,rgba(255,255,255,.6),transparent 72%),
             linear-gradient(180deg,rgba(221,203,178,.6),rgba(239,229,215,.4));
  box-shadow:var(--v-brillo),var(--v-sombra)}
.prod-escena::after{content:"";position:absolute;left:28%;right:28%;bottom:28px;height:24px;border-radius:50%;
  background:rgba(74,46,27,.3);filter:blur(12px)}
.prod-escena .prod-foto{height:min(470px,40vw);min-height:320px}
.prod-sello{position:absolute;left:22px;top:18px;margin:0;z-index:2;display:flex;align-items:baseline;gap:6px}
.prod-sello b{font:400 clamp(2.6rem,4vw,3.4rem)/1 var(--serif);color:var(--ink)}
.prod-sello small{font:600 11px var(--mono);letter-spacing:.1em;color:var(--ink-2)}
.prod-escena + .notas-chips{margin-top:14px}

.cart-art img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain}

/* ============================================================
   NAVEGACIÓN FLOTANTE.
   Computador: la píldora se aparta al bajar, vuelve al subir y se compacta
   al hacer scroll; una sola luz oscura marca la sección y se desliza.
   Celular: la navegación baja al pulgar, en una barra que flota abajo.
   ============================================================ */
.top{transition:transform .5s var(--ease-out)}
body.nav-oculta .top{transform:translateY(calc(-100% - 24px))}
.top-inner{transition:max-width .5s var(--ease-out),padding .35s var(--ease-out),box-shadow .35s var(--ease-out)}
body.nav-compacta .top-inner{max-width:1040px;padding-block:5px;
  box-shadow:var(--v-brillo),0 22px 44px -24px rgba(74,46,27,.6)}
body.nav-compacta .brand small{display:none}

/* la luz: sin JavaScript, cada pestaña activa lleva su propio fondo y se lee igual */
.tabs{position:relative}
.tab{position:relative;z-index:1}
.tabs.con-luz .tab[aria-current=page]{background:transparent;transition:color .3s var(--ease-out)}
.tab-luz{position:absolute;left:0;top:0;z-index:0;height:100%;width:var(--w,0);border-radius:999px;
  transform:translateX(var(--x,0));background:var(--ink);opacity:0;pointer-events:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 6px 14px -8px rgba(29,20,15,.6);
  transition:transform .5s var(--ease-out),width .5s var(--ease-out),opacity .2s}
.tab-luz.quieta{transition:none}
body[data-view=subasta] .tab-luz{background:var(--crema)}

.dock,.dock-hoja{display:none}

@media (max-width:760px){
  /* arriba queda solo la marca, y se va con la página */
  .top,body[data-view=subasta] .top{position:relative}
  body.nav-oculta .top{transform:none}
  .top-inner .tabs,.top-inner .lang,.top-inner .menu-btn,.top-inner .cart-btn{display:none!important}
  .top-inner{padding:9px 16px}

  .dock{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;position:fixed;z-index:70;
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;border-radius:26px;
    background:var(--v-fondo-2);backdrop-filter:var(--v-lente-2);-webkit-backdrop-filter:var(--v-lente-2);
    box-shadow:var(--v-brillo),0 20px 44px -18px rgba(74,46,27,.6)}
  .dock::before,.dock-hoja::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
    background:linear-gradient(180deg,var(--v-luz) 0%,var(--v-luz-2) 22%,transparent 42%,transparent 60%,var(--v-luz-2) 82%,var(--v-luz) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .dock-it{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:54px;padding:6px 2px 5px;
    border:0;border-radius:20px;background:none;color:var(--ink-2);font:600 11px/1 var(--sans);text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .25s var(--ease-out),color .25s var(--ease-out),transform .12s var(--ease-out)}
  .dock-it svg{width:23px;height:23px}
  .dock-it:active{transform:scale(.93)}
  .dock-it[aria-current=page],.dock-it[aria-expanded=true]{background:var(--ink);color:var(--paper)}
  .dock-it:focus-visible{outline:2px solid var(--cherry);outline-offset:-2px}
  .dock-it .live-dot{position:absolute;top:8px;left:calc(50% + 7px);width:7px;height:7px}
  .dock-n{position:absolute;top:4px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--cherry);color:#fff;font:600 11px/18px var(--mono);text-align:center}
  body[data-view=subasta] .dock-it{color:#d3c0a5}
  body[data-view=subasta] .dock-it[aria-current=page],body[data-view=subasta] .dock-it[aria-expanded=true]{background:var(--crema);color:var(--roast)}

  /* "Más": una hoja que sale de la barra, justo encima */
  .dock-hoja:not([hidden]){display:grid;gap:2px;position:fixed;z-index:69;left:10px;right:10px;
    bottom:calc(88px + env(safe-area-inset-bottom,0px));padding:8px;border-radius:24px;
    background:var(--v-fondo-2);backdrop-filter:var(--v-lente-2);-webkit-backdrop-filter:var(--v-lente-2);
    box-shadow:var(--v-brillo),0 24px 50px -20px rgba(74,46,27,.6);animation:hoja .32s var(--ease-out)}
  @keyframes hoja{from{opacity:0;transform:translateY(14px) scale(.98)}}
  .dock-hoja .tab{display:flex;min-height:50px;padding:0 16px;border-radius:16px;font-size:16px;align-items:center}
  .dock-hoja .tab[aria-current=page]{background:var(--ink);color:var(--paper)}
  .dock-hoja .lang{display:flex;margin:6px 4px 4px;padding:3px}
  .dock-hoja .lang button{flex:1;min-height:44px;font-size:13px}

  /* lo que flota abajo se corre para no quedar tapado por la barra */
  .tray{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .wrap{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.top,.top-inner,.tab-luz,.dock-it{transition:none}.dock-hoja:not([hidden]){animation:none}}
/* sobre la foto oscura de la portada el vidrio fino se vuelve gris: la barra y la hoja
   llevan más cuerpo, porque ahí se lee y se decide */
@media (max-width:760px){
  .dock{background:rgba(239,229,215,.8)}
  .dock-hoja:not([hidden]){background:rgba(239,229,215,.92)}
  body[data-view=subasta] .dock,body[data-view=subasta] .dock-hoja:not([hidden]){background:rgba(58,36,22,.88)}
}

/* ============================================================
   EL RESTO DEL INICIO, CON LA VOZ DE LA PORTADA.
   Más aire entre secciones, íconos de trazo fino en vez de cajas, montañas
   con la bruma verde de la foto, y un cierre que responde a la portada.
   ============================================================ */
@media (min-width:761px){.section{padding-block:104px 8px}}

/* principios: tres columnas separadas por una línea, sin cajas */
.principios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--line)}
.principio{display:grid;align-content:start;gap:12px;padding:32px 32px 8px 0}
.principio + .principio{padding-left:32px;border-left:1px solid var(--line)}
.principio svg{width:34px;height:34px;color:var(--cherry)}
.principio b{font:400 clamp(1.35rem,2vw,1.7rem)/1.15 var(--serif)}
.principio span{color:var(--ink-2);font-size:15px;line-height:1.6;max-width:36ch}
@media (max-width:760px){
  .principios{grid-template-columns:1fr}
  .principio{padding:26px 0 18px}
  .principio + .principio{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}

/* fincas: la montaña deja el marrón plano y toma la bruma verde de la portada.
   La línea punteada y la cifra siguen diciendo a qué altura está cada una. */
.finca-art{height:132px;background:linear-gradient(180deg,#e8dcc6 0%,#d6c8aa 58%,#c3b590 100%)}
.finca-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 22% 12%,rgba(255,238,205,.65),transparent 70%),
             linear-gradient(180deg,transparent 55%,rgba(232,220,198,.28))}
.finca-art svg path{fill:#34503b}
.finca-art svg path:first-child{fill:#7a9170;opacity:.6}
.finca-art svg path.front{opacity:.94}
.finca.propia .finca-art{background:linear-gradient(180deg,#eadfcb,#d9ccb1)}
.finca.propia .finca-art svg path.front{opacity:.55}

/* preguntas: el título se queda a la izquierda y las respuestas corren a la derecha */
@media (min-width:900px){
  .faqs{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0 72px;align-items:start}
  .faqs .section-head{position:sticky;top:120px}
  .faqs .faq-lista{margin-top:0;max-width:none}
}

/* el remate del inicio: la misma tarde de la portada, sin la bolsa */
.remate{--luz:#F4EAD7;position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;
  min-height:440px;margin-top:120px;border-radius:30px;color:var(--luz);background:#18231b;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 60px 100px -60px rgba(29,20,15,.8)}
.remate-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.remate::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,24,18,.9) 0%,rgba(16,24,18,.66) 38%,rgba(16,24,18,.12) 68%,transparent 82%)}
.remate-texto{display:grid;gap:16px;justify-items:start;max-width:620px;padding:clamp(30px,5vw,64px)}
.remate h2{font-size:clamp(2.3rem,4.4vw,3.8rem);line-height:.98;color:var(--luz)}
.remate h2 em{color:#EDA887}
.remate .portada-sobre{color:rgba(244,234,215,.78)}
.remate-texto > p:not(.portada-sobre){margin:0;font-size:1.06rem;color:rgba(244,234,215,.86)}
@media (max-width:760px){
  .remate{min-height:0;margin-top:80px;border-radius:26px}
  .remate-foto{object-position:88% 30%}
  .remate::before{background:linear-gradient(180deg,rgba(16,24,18,.55),rgba(16,24,18,.9))}
}

/* ============================================================
   PREGUNTAS: una lista editorial, no una pila de cajas.
   Una línea fina separa cada pregunta; el botón redondo pasa de + a −;
   la respuesta tiene un ancho que se lee sin perder la línea.
   ============================================================ */
.faq-lista{gap:0;border-bottom:1px solid var(--line)}
.faq-lista .faq{padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.faq-lista .faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;cursor:pointer}
.faq-lista .faq h3{font-size:clamp(1.12rem,1.7vw,1.36rem);line-height:1.3;transition:color .2s var(--ease-out)}
.faq-lista .faq summary::after{content:"";flex:0 0 38px;height:38px;border-radius:50%;color:var(--ink);
  border:1px solid var(--v-canto);box-shadow:var(--v-brillo),0 6px 14px -10px rgba(74,46,27,.5);
  background:linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 13px no-repeat,var(--v-fondo-2);
  transition:transform .4s var(--ease-out),background-size .3s var(--ease-out),background-color .25s var(--ease-out),color .25s}
.faq-lista .faq[open] summary::after{transform:rotate(180deg);color:var(--paper);background-color:var(--ink);
  background-size:13px 1.5px,1.5px 0,auto}
.faq-lista .faq[open] h3{color:var(--ink)}
.faq-lista .faq p{margin:0;padding:0 70px 28px 4px;max-width:64ch;color:var(--ink-2);font-size:15.5px;line-height:1.7}
.faq-lista .faq[open] p{animation:respuesta .45s var(--ease-out)}
@keyframes respuesta{from{opacity:0;transform:translateY(-6px)}}
@media (hover:hover) and (pointer:fine){
  .faq-lista .faq summary:hover h3{color:var(--cherry)}
  .faq-lista .faq:not([open]) summary:hover::after{background-color:rgba(255,255,255,.75)}
}
.faq-lista .faq summary:focus-visible{outline:2px solid var(--cherry);outline-offset:4px;border-radius:10px}
.faq-ayuda{margin:22px 0 0;color:var(--ink-2);font-size:15px}
.faq-ayuda a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.faq-ayuda a:hover{text-decoration-color:var(--ink)}
@media (max-width:760px){
  .faq-lista{margin-top:26px}
  .faq-lista .faq summary{padding:20px 0;gap:16px}
  .faq-lista .faq p{padding:0 0 22px}
  .faq-lista .faq summary::after{flex-basis:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){.faq-lista .faq summary::after{transition:none}.faq-lista .faq[open] p{animation:none}}

/* ============================================================
   SUSCRIPCIÓN: dos preguntas arriba (¿kit? ¿cómo pagas?) que cambian
   el precio de las tres tarjetas, y el ahorro dicho en pesos.
   ============================================================ */
.sub-opciones{display:flex;flex-wrap:wrap;gap:12px 16px;margin:6px 0 30px}
.sub-opciones .seg{background:var(--v-fondo);border:1px solid var(--v-canto);box-shadow:var(--v-brillo);
  backdrop-filter:var(--v-lente);-webkit-backdrop-filter:var(--v-lente)}
.sub-opciones .seg button{padding:10px 16px;font-size:14px;transition:background .25s var(--ease-out),color .25s var(--ease-out)}
.sub-opciones .seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:inset 0 1px 1px rgba(255,255,255,.18)}
.plan{gap:12px}
.plan-para{margin:-4px 0 4px;color:var(--ink-2);font-size:14.5px}
.plan-precio{flex-wrap:wrap;row-gap:2px}
.plan-precio b{font-size:2rem}
.plan-precio small{font-size:13px}
.plan-luego{margin:-6px 0 0;color:var(--ink-2);font-size:14px}
.plan-ahorro{margin:-6px 0 0;align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:13.5px;
  background:rgba(46,71,50,.12);color:var(--leaf)}
.plan-kit{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.4);border:1px solid var(--v-canto)}
.plan-kit b{font:400 1.15rem/1.2 var(--serif)}
.plan-kit ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;font-size:13.5px;color:var(--ink-2)}
.plan-kit li::before{content:"+ ";color:var(--cherry);font-weight:700}
.plan-cada{margin:4px 0 -6px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plan-cafeteria{max-width:520px;margin-top:30px}
.sub-resumen{margin:0 0 6px;padding:12px 14px;border-radius:14px;background:var(--paper-2);line-height:1.6}

/* la ruta: seis pasos en orden, con su número */
.ruta{list-style:none;counter-reset:ruta;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.ruta li{counter-increment:ruta;display:grid;gap:6px;align-content:start;padding:24px 24px 22px 0;border-bottom:1px solid var(--line)}
.ruta li:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--line)}
.ruta li::before{content:"Mes " counter(ruta);font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cherry)}
html[lang=en] .ruta li::before{content:"Month " counter(ruta)}
.ruta b{font:400 1.3rem/1.2 var(--serif)}
.ruta span{color:var(--ink-2);font-size:14.5px}
.ruta-comunidad{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ruta-comunidad li{padding:10px 16px;border-radius:999px;font-size:14px;color:var(--ink);
  background:var(--v-fondo-2);border:1px solid var(--v-canto);box-shadow:var(--v-brillo)}
@media (max-width:760px){
  .ruta{grid-template-columns:1fr}
  .ruta li,.ruta li:not(:nth-child(3n+1)){padding:20px 0;border-left:0}
  .sub-opciones .seg{width:100%}
  .sub-opciones .seg button{flex:1;justify-content:center;padding:10px 8px;font-size:13px}
}