/* Pance · the shelf-edge label system
   Brick red, cream and mustard come from the logo. Red drenches the hero and the close;
   cream paper carries the inner sections. */

:root{
  --red:#B3372A;
  --red-deep:#8F2A20;
  --cream:#F4EDE1;
  --mustard:#E2B04A;
  --mustard-on-red:#F2CB73;         /* mustard lifted for text on the red field (AA large) */
  --shelf:#2B211E;

  --paper:#F4EDE1;
  --paper-2:#ECE1CF;
  --label:#FBF6EC;
  --ink:#231A17;
  --ink-soft:#5E4C45;
  --rule:rgba(35,26,23,.18);
  --accent-text:#A3301F;           /* red for text on paper, AA on both papers */
  --hatch:rgba(35,26,23,.16);
  --data-bg:#1F1715;
  --data-ink:#EDE3D5;
  --data-soft:#B3A194;

  --f-sans:'Schibsted Grotesk',system-ui,sans-serif;
  --f-cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);                  /* hovers and colour */
  --ease-out:cubic-bezier(0.23,1,0.32,1);            /* entrances */
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);        /* on-screen movement */
  --wrap:1280px;
  --gut:clamp(16px,4vw,48px);
  --sec:clamp(72px,10vw,136px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1B1412;
    --paper-2:#221916;
    --label:#F1E8DB;
    --ink:#F1E8DB;
    --ink-soft:#C4B3A6;
    --rule:rgba(241,232,219,.18);
    --accent-text:#F08A78;
    --hatch:rgba(241,232,219,.14);
    --shelf:#161010;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--red) var(--paper)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:clamp(16px,1.05vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--red)}
::selection{background:var(--mustard);color:#231A17}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--mustard);color:#231A17;padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.red :focus-visible{outline-color:var(--mustard)}
.red .ticket :focus-visible{outline-color:var(--red)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font:700 15px/1 var(--f-sans);text-decoration:none;padding:14px 20px;border-radius:3px;border:0;cursor:pointer;transition:transform 160ms ease-out,background-color .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-cream{background:var(--cream);color:var(--red-deep)}
.btn-cream:hover{background:#fff8ec}
.btn-ink{background:#231A17;color:var(--cream)}
.btn-ink:hover{background:#3a2c27}
.btn-red{background:var(--red);color:var(--cream)}
.btn-red:hover{background:var(--red-deep)}
.link{font-weight:700;color:var(--accent-text);text-decoration:underline;text-decoration-thickness:2px}

/* ---------- red field ---------- */
.red{background:var(--red);color:var(--cream);--ink-on:var(--cream)}
.red ::selection{background:var(--cream);color:var(--red-deep)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.wordmark{width:118px;height:auto}
.wordmark.sm{width:96px}
.brand-tag{font:600 12px/1.3 var(--f-mono);max-width:17ch}
.nav-links{display:flex;gap:clamp(16px,2vw,30px);list-style:none;margin:0;padding:0;font-weight:600;font-size:15px}
.nav-links a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s var(--ease)}
.nav-links a:hover{border-color:var(--mustard)}
.nav-r{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;border:1px solid rgba(244,237,225,.5);border-radius:3px;overflow:hidden}
.lang button{background:none;border:0;color:inherit;font:700 12px/1 var(--f-sans);padding:9px 10px;cursor:pointer;min-width:40px;min-height:36px}
.lang button:hover{background:rgba(244,237,225,.12)}
.lang button[aria-pressed="true"]{background:var(--cream);color:var(--red-deep)}

/* ---------- hero ---------- */
.hero{min-height:min(calc(100dvh - 76px),980px);display:grid;grid-template-rows:1fr auto;padding-top:clamp(20px,5vh,64px);padding-bottom:0}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end}
.hero h1{font-weight:800;font-size:clamp(2.15rem,4.1vw,4.25rem);line-height:1.02;letter-spacing:-.025em;max-width:20ch}
.hero h1 em{font-style:italic;font-weight:700;color:var(--mustard-on-red);padding-bottom:.05em}
.hero-sub{display:grid;gap:14px;justify-items:start;margin-top:26px}
.hero-sub p{max-width:48ch;font-size:clamp(1.02rem,1.3vw,1.18rem)}
.hero-sub .motto{font-weight:700;font-style:italic;font-size:clamp(1.02rem,1.2vw,1.12rem)}

.pallet{width:300px;background:var(--label);color:#231A17;padding:14px 16px 16px;border:2px solid #231A17;transform:rotate(1.5deg);font-size:14px;box-shadow:0 14px 24px -14px rgba(40,10,6,.55);margin-bottom:6px}
.pallet-head{display:flex;justify-content:space-between;gap:10px;font:600 11px/1.2 var(--f-mono);text-transform:uppercase;border-bottom:2px solid #231A17;padding-bottom:8px;margin-bottom:10px}
.pallet dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0}
.pallet dt{font:600 11px/1.6 var(--f-mono);color:#6B5A53}
.pallet dd{margin:0;font-weight:700;line-height:1.3}
.barcode{height:40px;margin-top:12px;background:repeating-linear-gradient(90deg,#231A17 0 3px,transparent 3px 5px,#231A17 5px 6px,transparent 6px 9px,#231A17 9px 13px,transparent 13px 14px,#231A17 14px 15px,transparent 15px 19px)}
.barcode.sm{width:70px;height:24px;margin:0;flex:none;opacity:.8}

/* the shelf */
.shelf{margin-top:clamp(28px,5vh,56px)}
.rail{height:22px;background:var(--shelf);box-shadow:0 10px 0 rgba(0,0,0,.16)}
.labels{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:clamp(10px,1.6vw,24px);list-style:none;margin:-22px 0 0;padding:0 0 clamp(28px,5vh,56px);align-items:start}
.sel{display:flex;flex-direction:column;text-decoration:none;background:var(--label);color:#231A17;border-top:22px solid var(--shelf);padding:12px 16px 14px;transform-origin:50% 0;transition:transform 280ms var(--ease-out),box-shadow 280ms var(--ease-out);box-shadow:0 10px 18px -14px rgba(40,10,6,.6)}
@media (hover:hover) and (pointer:fine){
  .sel:hover{transform:rotate(-1.4deg) translateY(3px);box-shadow:0 18px 26px -16px rgba(40,10,6,.7)}
}
.sel:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.sel-top{display:flex;justify-content:space-between;gap:8px;font:600 11px/1.3 var(--f-mono);text-transform:uppercase;color:#6B5A53}
.sel-name{font-weight:800;font-size:1rem;line-height:1.3;margin-top:8px;min-height:2.5em}
.sel-big{font:800 clamp(2.4rem,3.9vw,3.9rem)/.92 var(--f-cond);color:var(--red);margin-top:10px;letter-spacing:.005em}
.sel-unit{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:10px;font-size:13px;line-height:1.3;color:#5E4C45}
.sel-promo{background:var(--mustard)}
.sel-promo .sel-top,.sel-promo .sel-unit{color:#3B2C1F}
.sel-promo .sel-big{color:#231A17}

/* ---------- paper sections ---------- */
.paper{background:var(--paper);padding-block:var(--sec)}
.paper-2{background:var(--paper-2)}
h2{font-weight:800;font-size:clamp(2rem,4vw,3.6rem);line-height:1.03;letter-spacing:-.025em}
h3{font-weight:800;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.15;letter-spacing:-.01em}
.lead{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.5}
.narrow{max-width:52ch}
.block-head{display:grid;gap:8px;margin-bottom:22px}
.block-head p{color:var(--ink-soft);max-width:62ch}
.prov{font:600 12px/1.5 var(--f-mono);color:var(--accent-text);margin-top:12px}

.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.intro h2{max-width:14ch}
.intro-body{display:grid;gap:18px;max-width:60ch}
.intro-body p:not(.lead){color:var(--ink-soft)}

/* supplier tag: a hanging shelf wobbler */
.supplier{display:grid;grid-template-columns:auto 1fr;align-items:stretch;margin-top:clamp(48px,7vw,88px);background:var(--label);color:#231A17;border:2px solid #231A17}
.supplier-tag{background:var(--red);color:var(--cream);padding:18px 22px;display:flex;align-items:center;max-width:320px}
.supplier-big{font:800 clamp(1.9rem,3vw,2.8rem)/.95 var(--f-cond)}
.supplier-copy{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap}
.supplier-copy p{max-width:58ch;font-weight:500}

/* planogram */
.plano{margin-top:clamp(64px,9vw,112px);scroll-margin-top:24px}
.plano-grid{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:0;padding:0;border:2px solid var(--ink)}
.facing{min-height:150px;padding:12px 14px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;border-right:1px solid var(--rule);border-bottom:8px solid var(--ink)}
.facing:last-child{border-right:0}
.f-state{font:600 11px/1 var(--f-mono);text-transform:uppercase}
.f-name{font-weight:800;font-size:1.02rem;line-height:1.2}
.facing.full{background:var(--red);color:var(--cream)}
.facing.now{background:var(--mustard);color:#231A17}
.facing.empty{background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--hatch) 9px 10px);color:var(--ink-soft)}

/* the reader: person vs agent */
.reader{margin-top:clamp(64px,9vw,112px);scroll-margin-top:24px}
.stage{--cut:50%;position:relative;display:grid;border:2px solid var(--ink);background:var(--label);color:#231A17;overflow:hidden;isolation:isolate}
.stage:has(.wipe:focus-visible){outline:3px solid var(--red);outline-offset:4px}
.pane{grid-area:1/1;padding:clamp(20px,3vw,36px);padding-top:clamp(40px,4vw,48px)}
.pane-human{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:clamp(16px,3vw,32px);align-items:start}
.shot{aspect-ratio:3/4;border:1.5px dashed #8A7870;display:grid;place-items:center;text-align:center;font:600 12px/1.4 var(--f-mono);color:#6B5A53;padding:10px}
.p-title{font-weight:800;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.2;max-width:26ch}
.p-price{display:inline-block;margin-top:10px;font:800 2.6rem/1 var(--f-cond);background:var(--mustard);padding:4px 10px}
.p-bullets{margin:14px 0 0;padding-left:18px;font-size:15px;line-height:1.5}
.pane-agent{background:var(--data-bg);color:var(--data-ink);clip-path:inset(0 0 0 var(--cut));font:400 14px/1.6 var(--f-mono);display:flex;justify-content:flex-end}
.data{display:grid;grid-template-columns:auto auto;gap:6px 18px;margin:0;align-content:start;width:min(100%,460px)}
.data dt{color:var(--data-soft)}
.data dd{margin:0}
.data .miss{color:var(--mustard);font-weight:600}
.handle{position:absolute;top:0;bottom:0;left:0;width:100%;transform:translateX(calc(var(--cut) - 100%));pointer-events:none;z-index:2}
.handle::before{content:"";position:absolute;top:0;bottom:0;right:-1.5px;width:3px;background:var(--mustard)}
.handle span{position:absolute;top:50%;left:100%;width:30px;height:30px;border-radius:50%;background:var(--mustard);transform:translate(-50%,-50%);box-shadow:0 4px 10px rgba(0,0,0,.3)}
.handle span::before,.handle span::after{content:"";position:absolute;top:50%;width:0;height:0;border:5px solid transparent;transform:translateY(-50%)}
.handle span::before{left:4px;border-right-color:#231A17}
.handle span::after{right:4px;border-left-color:#231A17}
.wipe{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none}
.example{position:absolute;top:10px;left:10px;z-index:4;background:var(--mustard);color:#231A17;font:600 11px/1 var(--f-mono);padding:6px 8px;pointer-events:none}
.stage-legend{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.view-btn{font:600 13px/1.2 var(--f-mono);background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-soft);padding:8px 0;cursor:pointer}
.view-btn:hover{color:var(--ink);border-color:var(--ink)}
.view-btn[aria-pressed="true"]{color:var(--ink);border-color:var(--mustard)}
.stage.animating .pane-agent{transition:clip-path 420ms var(--ease-in-out)}
.stage.animating .handle{transition:transform 420ms var(--ease-in-out)}

.ask{margin-top:36px;display:grid;gap:14px}
.ask-q{font-weight:800;font-size:1.15rem}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:600 15px/1.2 var(--f-sans);padding:11px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),transform 160ms ease-out}
.chip:hover{background:var(--hatch)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.shortlist{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink)}
.pick{display:grid;gap:8px;padding:16px;border-right:1px solid var(--rule);align-content:start}
.pick:last-child{border-right:0}
.pick-name{font-weight:800;line-height:1.25}
.pick-meta{font:400 12px/1.5 var(--f-mono);color:var(--ink-soft)}
.pick-verdict{font:600 13px/1.4 var(--f-mono);padding:6px 8px;justify-self:start}
.pick.yes .pick-verdict{background:#2F6B3F;color:#F4EDE1}
.pick.no .pick-verdict{background:transparent;color:var(--accent-text);border:1.5px solid currentColor}
.pick-why{font-size:15px;line-height:1.45}
.ask-moral{font-weight:700;font-size:1.1rem;max-width:60ch}

/* metrics: blank shelf labels waiting for data */
.metrics{margin-top:clamp(64px,9vw,112px)}
.metric-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,24px)}
.metric{background:var(--label);color:#231A17;border-top:14px solid var(--shelf);padding:12px 16px 14px;display:grid;gap:4px}
.m-v{font:800 3rem/1 var(--f-cond);color:#6F5F58}
.m-k{font-size:14px;color:#5E4C45}

/* ---------- advisory: a trade price list ---------- */
.h2-wide{max-width:22ch}
#asesoria .lead{margin-top:20px;color:var(--ink-soft)}
.tarifa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);margin:clamp(40px,6vw,64px) 0 clamp(32px,4vw,48px);border-top:3px solid var(--ink);padding-top:28px}
.t-sub{font:600 12px/1 var(--f-mono);text-transform:uppercase;color:var(--accent-text);margin-top:8px}
.tarifa ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.tarifa li{display:flex;align-items:baseline;gap:10px;font-size:clamp(1rem,1.2vw,1.1rem);font-weight:500}
.tarifa li>span:first-child{flex:0 1 auto}
.dots{flex:1 1 24px;min-width:24px;border-bottom:2px dotted var(--ink-soft);transform:translateY(-4px)}
.t-v{font:700 14px/1 var(--f-mono);white-space:nowrap}
#distribucion .tarifa{margin-top:clamp(48px,7vw,88px)}

/* ---------- field notes ---------- */
.notes{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:0;border-top:3px solid var(--ink)}
.note{position:relative;padding:26px 24px 26px 0;border-bottom:1px solid var(--rule);display:grid;gap:12px;align-content:start}
.note-lead{grid-row:1/3;padding-right:clamp(24px,4vw,56px);border-right:1px solid var(--rule);border-bottom:0}
.note:not(.note-lead){padding-left:clamp(20px,3vw,40px)}
.note-lead h3{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.02em;max-width:18ch}
.note-lead p{color:var(--ink-soft);max-width:50ch;font-size:1.1rem}
.note-flag{justify-self:start;font:600 11px/1 var(--f-mono);text-transform:uppercase;background:var(--mustard);color:#231A17;padding:5px 7px}
.note-meta{font:600 12px var(--f-mono);color:var(--ink-soft)}
.follow{margin-top:28px}
.follow a{font-weight:700;color:var(--accent-text);text-decoration-thickness:2px}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,1.65fr);gap:clamp(28px,5vw,80px);align-items:center}
.about-photo{margin:0;width:100%;max-width:190px;justify-self:end;background:var(--red);padding:clamp(12px,1.6vw,20px);transform:rotate(-1.2deg)}
.about-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:64% 30%}
.about-copy{display:grid;gap:18px;max-width:58ch}
.about-copy h2{max-width:16ch}
.about-copy p{color:var(--ink-soft)}
.about-copy p:first-of-type{color:var(--ink);font-size:1.1rem}
.career{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.career li{font:600 13px/1 var(--f-mono);border:1.5px solid var(--ink);padding:8px 10px}
.about-copy .link{justify-self:start}

/* ---------- contact (red close) ---------- */
.contact-wrap{padding-top:var(--sec)}
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact h2{font-size:clamp(3rem,7vw,6rem);line-height:.95;letter-spacing:-.035em}
.contact-copy p{margin-top:20px;max-width:40ch;font-size:clamp(1.05rem,1.3vw,1.2rem)}
.contact-links{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px;font-weight:700;font-size:1.1rem}
.contact-links a{text-decoration-color:var(--mustard);text-decoration-thickness:2px}
.contact-links a:hover{color:var(--mustard)}

.ticket{background:var(--label);color:#231A17;border-top:22px solid var(--shelf);padding:clamp(20px,3vw,32px);display:grid;gap:18px;box-shadow:0 20px 34px -22px rgba(40,10,6,.7)}
.field{display:grid;gap:6px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-weight:700;font-size:15px;padding:0}
.opt{font-weight:400;color:#6B5A53}
.field input:not([type=radio]),.field textarea{font:500 16px/1.4 var(--f-sans);color:#231A17;background:#fff;border:1.5px solid #6B5A53;border-radius:3px;padding:12px 12px;width:100%}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--red);outline-offset:1px;border-color:#231A17}
.field textarea{resize:vertical;min-height:110px}
.field [aria-invalid="true"]{border-color:var(--red);border-width:2px}
.err{font-size:14px;color:#A3301F;font-weight:600}
.radios{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.radios label{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;border:1.5px solid #6B5A53;border-radius:999px;padding:9px 14px;cursor:pointer}
.radios label:has(input:checked){background:#231A17;color:var(--cream);border-color:#231A17}
.radios label:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.radios input{accent-color:var(--red);margin:0}
.btn-submit{justify-self:start;padding:16px 24px;font-size:16px}
.btn-submit[aria-busy="true"]{opacity:.7;cursor:progress}
.hp{position:absolute;left:-9999px}

.legal{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--sec);padding-block:28px;border-top:1px solid rgba(244,237,225,.3);font-size:14px}
.legal p{max-width:70ch}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{flex-wrap:wrap;row-gap:0}
  .nav nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);border-top:1px solid rgba(244,237,225,.25)}
  .nav-links{gap:22px;white-space:nowrap}
  .nav-links a{display:inline-block;padding:12px 0}
  .labels{grid-template-columns:1fr 1fr}
  .labels li:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-top,.intro,.about-grid,.contact,.tarifa{grid-template-columns:1fr}
  .pallet{width:100%;max-width:360px;transform:none}
  .plano-grid{grid-template-columns:repeat(2,1fr)}
  .facing{min-height:112px}
  .facing:nth-child(2n){border-right:0}
  .shortlist{grid-template-columns:1fr}
  .pick{border-right:0;border-bottom:1px solid var(--rule)}
  .pick:last-child{border-bottom:0}
  .notes{grid-template-columns:1fr}
  .note-lead{grid-row:auto;border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .note:not(.note-lead){padding-left:0}
  .about-photo{max-width:150px;justify-self:start}
}
@media (max-width:640px){
  .brand-tag{display:none}
  .nav{height:68px}
  .hero{min-height:auto}
  .labels{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:0}
  .labels li:first-child{grid-column:1/-1}
  .labels li:not(:first-child) .sel-name,.labels li:not(:first-child) .sel-unit,.labels li:not(:first-child) .sel-top span:last-child{display:none}
  .labels li:not(:first-child) .sel{padding:10px 10px 12px;border-top-width:14px}
  .labels li:not(:first-child) .sel-big{font-size:1.45rem;line-height:1;margin-top:6px}
  .labels li:not(:first-child) .sel-top{font-size:10px}
  .pallet dl{gap:3px 10px}
  .rail{display:none}
  .sel-name{min-height:0}
  .supplier{grid-template-columns:1fr}
  .supplier-tag{max-width:none}
  .pane-human{grid-template-columns:1fr}
  .shot{max-width:120px}
  .pane-agent{font-size:13px;justify-content:flex-start}
  .data{width:100%}
  .wipe,.handle{display:none}
  .stage-legend{justify-content:flex-start}
  .view-btn{border:1.5px solid var(--ink);border-radius:999px;padding:10px 14px;color:var(--ink)}
  .view-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .pallet dl{font-size:13px}
  .pallet .barcode{height:26px}
  .metric-row{grid-template-columns:1fr}
  .tarifa li{flex-wrap:wrap}
  .dots{display:none}
  .t-v{color:var(--accent-text)}
  .nav-r .btn{padding:11px 14px}
}
@media (max-width:380px){
  .wordmark{width:84px}
  .brand{gap:8px}
  .nav{column-gap:10px}
  .nav-r{gap:6px}
  .lang button{min-width:36px;padding:9px 7px}
  .nav-r .btn{padding:11px 10px;font-size:14px}
}


/* ---------- motion ---------- */
/* Press feedback on small controls. */
.view-btn,.lang button,.radios label{transition:transform 160ms ease-out,background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:active,.view-btn:active,.lang button:active,.radios label:active{transform:scale(.97)}

/* Once per visit: the labels settle onto the rail, one after another.
   The backwards fill keeps them visible if the animation never runs. */
@keyframes hang{
  from{opacity:0;transform:translateY(-10px) rotate(-1.5deg)}
  to{opacity:1;transform:none}
}
.labels .sel{animation:hang 520ms var(--ease-out) backwards}
.labels li:nth-child(1) .sel{animation-delay:120ms}
.labels li:nth-child(2) .sel{animation-delay:190ms}
.labels li:nth-child(3) .sel{animation-delay:260ms}
.labels li:nth-child(4) .sel{animation-delay:330ms}

/* The agent answers: verdicts arrive in order, only after a new question. */
@keyframes pick-in{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:none}
}
.shortlist.fresh .pick{animation:pick-in 240ms var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .labels .sel{animation:none}
  .sel,.btn,.chip,.view-btn,.lang button,.radios label{transition-property:background-color,color,border-color,box-shadow}
  .btn:active,.chip:active,.view-btn:active,.lang button:active,.radios label:active{transform:none}
  @media (hover:hover) and (pointer:fine){ .sel:hover{transform:none} }
  .stage.animating .pane-agent{transition:clip-path 150ms ease}
  .stage.animating .handle{transition:none}
  @keyframes pick-fade{from{opacity:0}to{opacity:1}}
  .shortlist.fresh .pick{animation:pick-fade 150ms ease backwards;animation-delay:0ms}
}
/* ---------- lab section + critique fixes ---------- */
.lab-head{display:grid;gap:18px;max-width:62ch}
.lab-head h2{max-width:18ch}
.lab-head .lead{color:var(--ink-soft)}
.lab-head + .plano{margin-top:clamp(40px,6vw,72px)}
.ask-note{font:600 12px/1.4 var(--f-mono);color:var(--ink-soft)}
.block-head .note-flag{margin-top:6px}
@media (pointer:coarse){
  .lang button,.btn,.chip,.view-btn{min-height:44px}
  .contact-links a,.follow a,.about-copy .link{display:inline-block;padding-block:10px}
}
@media (prefers-color-scheme: dark){ .facing{border-bottom-color:#0E0A09} .plano-grid{border-color:rgba(241,232,219,.35)} }

/* Product photo: David's own tin, cut out on a cream sweep (assets/ventresca.jpg). */
.shot{padding:0;border:1px solid var(--rule);overflow:hidden;background:#F8F3EA;aspect-ratio:1/1}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.12)}

/* ---------- distribution restructure ---------- */
.steps-head{margin-top:clamp(56px,8vw,96px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);border-top:3px solid var(--ink);counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;display:grid;gap:8px;align-content:start}
.steps li::before{content:"0" counter(s);font:800 2.4rem/1 var(--f-cond);color:var(--accent-text)}
.steps h4{margin:0;font-weight:800;font-size:1.1rem;line-height:1.2}
.steps p{color:var(--ink-soft);font-size:.98rem}
.checks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.checks li{padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--ink-soft);font-weight:500}
.checks li::before{content:"\2192  ";color:var(--accent-text);font-weight:800}
.intro-body .btn{justify-self:start}
.fine{font-size:13px;line-height:1.5}
.form-note{font-size:13px;line-height:1.5;color:#5E4C45}
.form-note a{color:inherit;text-decoration:underline}
.legal-text{display:grid;gap:4px;max-width:78ch}
.legal-text .addr{font-size:11px}
.legal a{color:inherit}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- privacy / legal page and thank-you page ---------- */
.policy-bar{padding-block:20px}
.policy-bar a{display:inline-block}
.policy{padding-block:56px 72px}
.pl{max-width:70ch}
.pl + .pl{margin-top:72px;padding-top:48px;border-top:3px solid var(--ink)}
.pl h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;margin:0 0 8px}
.pl h2{font-size:1.2rem;line-height:1.25;margin:32px 0 8px;letter-spacing:-.005em}
.pl p,.pl li{line-height:1.6;font-size:1.02rem}
.pl p{margin:0 0 12px}
.pl ul{margin:0 0 12px;padding-left:1.2em}
.pl a{color:inherit;text-decoration:underline}
.pl .upd{color:var(--ink-soft);font-size:.95rem;margin-bottom:24px}
.pl table{border-collapse:collapse;width:100%;font-size:.95rem;margin:12px 0}
.pl th,.pl td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
.pl th{font-weight:700}
.pl .jump{font-weight:700}
.thanks{min-height:100dvh;display:grid;align-content:center;gap:28px;padding-block:48px}
.thanks .sel{max-width:420px;pointer-events:none}
.thanks p{max-width:44ch;font-size:1.15rem}
.pl h3{font-size:1.05rem;line-height:1.3;margin:24px 0 6px;letter-spacing:0}
.block-head .note-flag{color:#231A17}
@media (max-width:640px){
  .pl table,.pl tbody,.pl tr,.pl th,.pl td{display:block;width:100%}
  .pl tr{margin-bottom:12px;border:1px solid var(--rule)}
  .pl th,.pl td{border:0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
}