/* Layout: editorial app — topo fixo no desktop, navegação inferior no mobile, conteúdo em coluna de até 1240px com seções horizontais roláveis */
:root{
  --forest:#173D2D; --green:#426B3A; --leaf:#8AAA52; --coffee:#552B18; --tan:#8A5A3B;
  --cream:#F5F0E7; --beige:#E8DDCA; --white:#FFFFFF; --gold:#C6A15B; --ink:#292929;
  --bg:#F5F0E7; --surface:#FFFFFF; --surface-2:#EFE7D9; --surface-3:#E8DDCA;
  --fg:#292929; --fg-soft:#4a4239; --muted:#7a6f62; --line:rgba(85,43,24,.12); --line-strong:rgba(85,43,24,.2);
  --accent:#173D2D; --accent-2:#426B3A; --accent-ink:#F5F0E7; --brand:#552B18; --leaf-ink:#2E4A1F;
  --gold-ink:#8a6a2c; --danger:#A3412B; --eyebrow:#426B3A; --avatar:#173D2D; --avatar-ink:#F5F0E7; --fab:#173D2D; --fab-ink:#F5F0E7;
  --map-sea:#D7E2DA; --map-land:#EFE7D9; --map-contour:rgba(66,107,58,.18); --map-coast:#9DB5A4; --map-border:rgba(85,43,24,.35);
  --shadow:0 1px 2px rgba(41,26,15,.06), 0 8px 24px -12px rgba(41,26,15,.18);
  --shadow-lg:0 2px 6px rgba(41,26,15,.06), 0 24px 48px -20px rgba(41,26,15,.32);
  --f-display:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --f-ui:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r:18px; --r-sm:12px; --r-lg:26px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1B16; --surface:#16261F; --surface-2:#1C3028; --surface-3:#24392F;
  --fg:#F1EBE0; --fg-soft:#D9D0C2; --muted:#A39A8B; --line:rgba(245,240,231,.09); --line-strong:rgba(245,240,231,.18);
  --accent:#9DBB63; --accent-2:#8AAA52; --accent-ink:#0F1B16; --brand:#D7A57F; --leaf-ink:#B9D08A; --gold-ink:#D9B776; --danger:#E08A70; --eyebrow:#A9C46F; --avatar:#426B3A; --avatar-ink:#F5F0E7; --fab:#9DBB63; --fab-ink:#0F1B16;
  --map-sea:#1A2E33; --map-land:#1C3028; --map-contour:rgba(138,170,82,.14); --map-coast:#3E5E52; --map-border:rgba(245,240,231,.25);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 48px -20px rgba(0,0,0,.7);
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#0F1B16; --surface:#16261F; --surface-2:#1C3028; --surface-3:#24392F;
  --fg:#F1EBE0; --fg-soft:#D9D0C2; --muted:#A39A8B; --line:rgba(245,240,231,.09); --line-strong:rgba(245,240,231,.18);
  --accent:#9DBB63; --accent-2:#8AAA52; --accent-ink:#0F1B16; --brand:#D7A57F; --leaf-ink:#B9D08A; --gold-ink:#D9B776; --danger:#E08A70; --eyebrow:#A9C46F; --avatar:#426B3A; --avatar-ink:#F5F0E7; --fab:#9DBB63; --fab-ink:#0F1B16;
  --map-sea:#1A2E33; --map-land:#1C3028; --map-contour:rgba(138,170,82,.14); --map-coast:#3E5E52; --map-border:rgba(245,240,231,.25);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 48px -20px rgba(0,0,0,.7);
  color-scheme:dark; }

*{box-sizing:border-box}
svg.i{width:1.15em;height:1.15em;flex-shrink:0;vertical-align:-.18em}
html,body{background:var(--bg)}
body{color:var(--fg); font-family:var(--f-ui); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
img{max-width:100%;display:block}
.art{display:block;width:100%;height:100%}
h1,h2,h3,.serif{font-family:var(--f-display);font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08}
h3{font-size:1.45rem;line-height:1.15}
p{margin:0}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--eyebrow)}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);letter-spacing:.02em}
.tab-num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- app shell ---------- */
#app{min-height:100vh}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.page{padding-block:24px 120px;animation:pageIn .45s var(--ease)}
@keyframes pageIn{from{opacity:.0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:22px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand img{width:38px;height:38px}
.brand b{font-family:var(--f-ui);font-weight:800;font-size:1.18rem;letter-spacing:-.02em;color:var(--brand)}
.brand b span{color:var(--eyebrow)}
.nav{display:flex;gap:4px;margin-left:12px}
.nav button{white-space:nowrap;padding:8px 12px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--fg-soft);transition:background .2s,color .2s}
.nav button:hover{background:var(--surface-2)}
.nav button.on{background:var(--accent);color:var(--accent-ink)}
.tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.ibtn{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:background .2s}
.ibtn:hover{background:var(--surface-2)}
.ibtn svg{width:21px;height:21px}
.badge-n{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--gold);color:#292929;font-size:.66rem;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--avatar);color:var(--avatar-ink);display:grid;place-items:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.lang{display:flex;border:1px solid var(--line-strong);border-radius:999px;padding:2px;margin-right:6px}
.lang button{font-size:.7rem;font-weight:700;padding:4px 7px;border-radius:999px;color:var(--muted);letter-spacing:.04em}
.lang button.on{background:var(--surface-3);color:var(--fg)}
.biz-link{font-size:.78rem;font-weight:700;color:var(--muted);padding:6px 10px;border-radius:999px;border:1px solid var(--line-strong);margin-right:6px;white-space:nowrap}
.biz-link:hover{color:var(--fg)}

.bottomnav{display:none}
@media (max-width:1280px){ .lang.desk{display:none} }
@media (max-width:1100px){ .nav button{padding:8px 9px;font-size:.84rem} .biz-link{display:none} }
@media (max-width:1080px){
  .nav,.biz-link,.lang.desk,.tools .desk{display:none}
  .topbar .wrap{height:58px}
  .bottomnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
  .bottomnav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.66rem;font-weight:700;color:var(--muted);padding:6px 0}
  .bottomnav button svg{width:22px;height:22px}
  .bottomnav button.on{color:var(--accent)}
  .bottomnav .scan{margin-top:-26px}
  .bottomnav .scan i{width:58px;height:58px;border-radius:50%;background:var(--fab);color:var(--fab-ink);display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(23,61,45,.7);border:4px solid var(--bg)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;transition:transform .15s var(--ease),background .2s,box-shadow .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn-p{background:var(--accent);color:var(--accent-ink)}
.btn-p:hover{box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-g{background:var(--gold);color:#292929}
.btn-o{border:1.5px solid var(--line-strong);color:var(--fg)}
.btn-o:hover{background:var(--surface-2)}
.btn-l{background:var(--cream);color:var(--forest)}
.btn-ghost-l{border:1.5px solid rgba(245,240,231,.5);color:#F5F0E7}
.btn-sm{padding:9px 14px;font-size:.72rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{font-weight:700;color:var(--eyebrow);font-size:.86rem;display:inline-flex;align-items:center;gap:4px}
.link svg{width:16px;height:16px}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line-strong);font-size:.82rem;font-weight:600;color:var(--fg-soft);background:var(--surface);transition:all .18s}
button.chip:hover{border-color:var(--accent-2)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip.note{background:var(--surface-2);border-color:transparent}
.chip svg{width:14px;height:14px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--surface-2);color:var(--fg-soft)}
.tag.gold{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold-ink)}
.tag.green{background:color-mix(in srgb,var(--leaf) 22%,transparent);color:var(--leaf-ink)}
.demo-flag{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line-strong);padding:4px 9px;border-radius:999px}

/* ---------- section headers & rails ---------- */
.sec{margin-top:52px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-h h2{font-size:clamp(1.55rem,2.6vw,2.1rem)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,280px);gap:18px;overflow-x:auto;padding:4px var(--gutter) 18px;margin-inline:calc(var(--gutter) * -1);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
.rail > *{scroll-snap-align:start}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ---------- coffee card ---------- */
.ccard{position:relative;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column;text-align:left;cursor:pointer;min-width:0}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ccard .img{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--surface-2)}
.ccard .img .art{transition:transform .8s var(--ease)}
.ccard:hover .img .art{transform:scale(1.05)}
.ccard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.ccard h3{font-size:1.38rem}
.ccard .meta{font-size:.8rem;color:var(--muted);line-height:1.4}
.ccard .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;font-size:.82rem}
.match-pill{position:absolute;top:12px;left:12px;background:rgba(23,61,45,.92);color:#F5F0E7;border-radius:999px;padding:5px 11px;font-size:.72rem;font-weight:800;letter-spacing:.06em;display:flex;align-items:center;gap:6px;backdrop-filter:blur(6px)}
.match-pill i{width:7px;height:7px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 3px rgba(138,170,82,.3)}
.fav-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.88);display:grid;place-items:center;color:#552B18;transition:transform .2s}
.fav-btn svg{width:18px;height:18px}
.fav-btn.on{color:#B4452F}
.fav-btn.on svg{fill:currentColor}
.fav-btn.pop{animation:pop .4s var(--ease)}
@keyframes pop{40%{transform:scale(1.3)}}
.score{display:inline-flex;align-items:center;gap:4px;font-weight:800}
.score svg{width:14px;height:14px;color:var(--gold);fill:var(--gold)}
.price{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- hero blocks ---------- */
.hero-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;color:#F5F0E7;isolation:isolate}
.hero-card .bg{position:absolute;inset:0;z-index:-2}
.hero-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,27,22,.72),rgba(15,27,22,.15) 75%),linear-gradient(180deg,transparent 40%,rgba(15,27,22,.55))}
.hero-card .in{padding:clamp(22px,4vw,44px);display:flex;flex-direction:column;gap:14px;max-width:640px}
.hero-card .eyebrow{color:#C9DA9E}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.78rem;font-weight:700;color:var(--fg-soft)}
.input{width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);background:var(--surface);transition:border .2s}
.input:focus{outline:none;border-color:var(--accent-2)}
textarea.input{min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--fg-soft)}
.check input{width:18px;height:18px;accent-color:var(--forest);margin-top:2px}
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:var(--shadow)}
.search svg{width:20px;height:20px;color:var(--muted);flex-shrink:0}
.search input{flex:1;border:0;background:none;padding:10px 0;min-width:0}
.search input:focus{outline:none}

.panel{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(18px,3vw,28px)}
.panel-flat{background:var(--surface-2);border-radius:var(--r);padding:clamp(18px,3vw,26px)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);align-items:start}
.split > *{min-width:0}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:14px}
.row-x{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hr{height:1px;background:var(--line);margin:18px 0}

/* ---------- splash ---------- */
.splash{min-height:100vh;position:relative;display:flex;flex-direction:column;color:#F5F0E7;isolation:isolate;overflow:hidden}
.splash .bg{position:absolute;inset:0;z-index:-2}
.splash::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,27,22,.86) 0%,rgba(15,27,22,.55) 45%,rgba(15,27,22,.05) 75%),linear-gradient(0deg,rgba(15,27,22,.6),transparent 40%)}
@media (max-width:760px){.splash::after{background:linear-gradient(180deg,rgba(15,27,22,.25) 0%,rgba(15,27,22,.5) 40%,rgba(15,27,22,.92) 75%)}}
.splash .top{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter)}
.splash .top .brand b{color:#F5F0E7}.splash .top .brand b span{color:#B9D08A}
.splash .lang{border-color:rgba(245,240,231,.3)}.splash .lang button{color:rgba(245,240,231,.7)}.splash .lang button.on{background:rgba(245,240,231,.18);color:#fff}
.splash .content{margin-top:auto;padding:0 var(--gutter) clamp(40px,8vh,90px);max-width:720px;display:flex;flex-direction:column;gap:22px}
.splash h1{font-size:clamp(2.8rem,7vw,5.6rem)}
.splash h1 em{font-style:italic;color:#E2C98F}
.splash .sub{font-size:1.08rem;max-width:520px;color:rgba(245,240,231,.86)}
.splash .tri{display:flex;gap:18px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.16em;font-weight:700;color:rgba(245,240,231,.7)}
.steam{animation:steam 4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
@keyframes steam{0%{opacity:0;transform:translateY(10px) scaleY(.8)}40%{opacity:.6}100%{opacity:0;transform:translateY(-20px) scaleY(1.1)}}
.pour{stroke-dasharray:6 4;animation:pour .6s linear infinite}
@keyframes pour{to{stroke-dashoffset:-20}}

/* ---------- auth & quiz ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth .side{position:relative;overflow:hidden}
.auth .side .art{position:absolute;inset:0}
.auth .side .quote{position:absolute;left:32px;right:32px;bottom:32px;color:#F5F0E7;font-family:var(--f-display);font-size:2rem;line-height:1.15;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.auth .main{padding:clamp(24px,5vw,64px) var(--gutter);display:flex;flex-direction:column;justify-content:center;max-width:560px;width:100%;margin:0 auto;gap:22px}
@media (max-width:860px){.auth{grid-template-columns:1fr}.auth .side{display:none}}
.oauth{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.oauth button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);font-weight:700;font-size:.88rem;background:var(--surface)}
.oauth svg{width:18px;height:18px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line-strong)}

.quiz{min-height:100vh;display:flex;flex-direction:column}
.quiz .bar{height:4px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.quiz .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--leaf));transition:width .5s var(--ease)}
.quiz .q{max-width:820px;margin:0 auto;padding:clamp(24px,5vw,56px) var(--gutter) 120px;width:100%;display:flex;flex-direction:column;gap:26px;animation:pageIn .45s var(--ease)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.opt{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;text-align:left;display:flex;flex-direction:column;gap:10px;transition:all .2s var(--ease);box-shadow:var(--shadow)}
.opt:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.opt .ico{width:42px;height:42px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--brand)}
.opt .ico svg{width:24px;height:24px}
.opt b{font-weight:700}
.opt small{color:var(--muted);font-size:.8rem;line-height:1.35}
.opt .sw{width:28px;height:28px;border-radius:50%}
.quiz .foot{position:fixed;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px))}
.quiz .foot .wrap{display:flex;justify-content:space-between;align-items:center;max-width:820px;padding:0}

.done{min-height:100vh;display:grid;place-items:center;text-align:center;padding:24px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--leaf) 18%,var(--bg)),var(--bg) 70%)}
.done .ring{width:180px;height:180px;margin:0 auto 26px;position:relative}
.done .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.done .ring circle.p{stroke-dasharray:502;stroke-dashoffset:502;animation:ring 1.8s var(--ease) forwards}
@keyframes ring{to{stroke-dashoffset:0}}
.done .ring img{position:absolute;inset:34px;width:112px;height:112px;animation:beanIn 1s .6s var(--ease) both}
@keyframes beanIn{from{opacity:0;transform:scale(.6) rotate(-30deg)}}
.done h1{animation:pageIn .8s 1.2s both}

/* ---------- taste profile ---------- */
.taste-hero{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:center}
@media (max-width:860px){.taste-hero{grid-template-columns:1fr}}
.archetype{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--brand)}
.radar{width:100%;max-width:360px;margin:0 auto;display:block;overflow:visible}
.radar-l{font-size:12px;font-weight:700;fill:var(--fg-soft);font-family:var(--f-ui)}
.radar-shape{transform-origin:160px 160px;animation:radarIn 1s var(--ease)}
@keyframes radarIn{from{transform:scale(.2);opacity:0}}
.axis-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:600px){.axis-list{grid-template-columns:repeat(3,1fr)}}
.axis-list div{background:var(--surface-2);border-radius:var(--r-sm);padding:12px}
.axis-list b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums}
.axis-list span{font-size:.74rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.delta{font-size:.72rem;font-weight:800;color:var(--accent-2)}

/* ---------- match ring ---------- */
.mring{position:relative;width:86px;height:86px;flex-shrink:0}
.mring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mring .v{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.mring .v small{display:block;font-size:.58rem;letter-spacing:.12em;color:var(--muted);text-align:center;margin-top:-4px}
.mring circle.p{transition:stroke-dashoffset 1.4s var(--ease)}

/* ---------- coffee detail ---------- */
.detail-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/9;min-height:280px;background:var(--surface-2)}
@media (max-width:700px){.detail-hero{aspect-ratio:4/3;border-radius:var(--r)}}
.detail-hero .art{position:absolute;inset:0}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;color:var(--fg-soft);margin-bottom:14px}
.back svg{width:18px;height:18px}
.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.scores > div{background:var(--surface);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;min-width:0}
.scores .k{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.scores .v{font-size:1.9rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:center;gap:6px}
.scores .v svg{width:22px;height:22px;fill:var(--gold);color:var(--gold)}
.scores .s{font-size:.78rem;color:var(--muted)}
@media (max-width:520px){.scores{grid-template-columns:1fr 1fr}.scores > div:last-child{grid-column:span 2}}
.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:12px;font-size:.86rem;font-weight:600}
.bar-row .t{height:8px;border-radius:8px;background:var(--surface-3);overflow:hidden}
.bar-row .t i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent-2),var(--leaf));transform-origin:left;animation:grow 1s var(--ease)}
@keyframes grow{from{transform:scaleX(0)}}
.bar-row .n{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden}
.facts > div{background:var(--surface);padding:14px 16px;min-width:0}
.facts .k{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.facts .v{font-weight:700;margin-top:2px}
@media (max-width:600px){.facts{grid-template-columns:1fr 1fr}}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.pair{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pair div{background:var(--surface-2);border-radius:var(--r-sm);padding:14px}
.pair b{display:block;font-size:.9rem}
.pair small{font-size:.78rem;color:var(--muted);line-height:1.35;display:block;margin-top:4px}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{padding:7px 13px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}

/* ---------- reviews ---------- */
.review{background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.review .who{display:flex;align-items:center;gap:10px}
.review .who b{font-size:.92rem}
.review .who small{display:block;color:var(--muted);font-size:.76rem}
.review q{font-family:var(--f-display);font-size:1.32rem;line-height:1.25;quotes:'“' '”'}
.stars{display:inline-flex;gap:2px;color:var(--gold)}
.stars svg{width:15px;height:15px}
.stars svg.f{fill:var(--gold)}
.rv-actions{display:flex;gap:4px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.rv-actions button{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--muted)}
.rv-actions button:hover{background:var(--surface-2)}
.rv-actions button.on{color:var(--danger)}
.rv-actions button.on svg{fill:currentColor}
.rv-actions button.sv.on{color:var(--accent-2)}
.rv-actions svg{width:17px;height:17px}
.comments{display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.comments p{background:var(--surface-2);padding:8px 12px;border-radius:12px}

/* ---------- rating ---------- */
.rate-stars{display:flex;gap:10px}
.rate-stars button{width:54px;height:54px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--line-strong);transition:transform .15s var(--ease),color .2s}
.rate-stars button svg{width:28px;height:28px}
.rate-stars button.on{color:var(--gold)}
.rate-stars button.on svg{fill:var(--gold)}
.rate-stars button:hover{transform:translateY(-3px)}
.scale5{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:12px}
.scale5 .dots{display:flex;gap:6px}
.scale5 .dots button{flex:1;height:34px;border-radius:10px;background:var(--surface-2);font-weight:700;font-size:.8rem;color:var(--muted);transition:background .2s}
.scale5 .dots button.on{background:var(--accent-2);color:#fff}
.scale5 .dots button.fill{background:color-mix(in srgb,var(--accent-2) 35%,var(--surface-2));color:var(--fg)}

/* ---------- stamp overlay ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(15,27,22,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--bg);border-radius:var(--r-lg);max-width:520px;width:100%;padding:clamp(22px,4vw,34px);box-shadow:var(--shadow-lg);max-height:90vh;overflow:auto;animation:modalIn .45s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
.stamp{width:190px;height:190px;margin:4px auto 18px;border-radius:50%;border:3px solid var(--danger);color:var(--danger);display:grid;place-items:center;text-align:center;position:relative;animation:stampIn .7s .15s cubic-bezier(.3,1.6,.5,1) both;transform:rotate(-12deg)}
.stamp::before{content:'';position:absolute;inset:8px;border-radius:50%;border:1.5px dashed currentColor}
.stamp b{font-family:var(--f-display);font-size:1.6rem;line-height:1;display:block;font-weight:400}
.stamp small{font-size:.62rem;letter-spacing:.18em;font-weight:800;display:block;text-transform:uppercase}
.stamp .mono{font-size:.7rem;margin-top:6px}
@keyframes stampIn{0%{opacity:0;transform:rotate(-30deg) scale(2.2)}60%{opacity:1;transform:rotate(-10deg) scale(.92)}100%{transform:rotate(-12deg) scale(1)}}

/* ---------- passport ---------- */
.passport-cover{background:linear-gradient(135deg,#173D2D,#0f2a1f);color:#F5F0E7;border-radius:var(--r-lg);padding:clamp(22px,4vw,40px);position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.passport-cover::before{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 85% 30%,rgba(198,161,91,.08) 0 1px,transparent 1px 14px)}
.passport-cover > *{position:relative}
.passport-cover .eyebrow{color:#C6A15B}
.passport-cover img{width:110px;height:110px;opacity:.95;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
@media (max-width:600px){.passport-cover{grid-template-columns:1fr}.passport-cover img{display:none}}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(245,240,231,.15);border-radius:var(--r-sm);overflow:hidden;margin-top:18px}
.pstats div{background:#173D2D;padding:12px 14px}
.pstats b{font-size:1.8rem;font-family:var(--f-display);display:block;line-height:1}
.pstats span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,240,231,.7);font-weight:700}
@media (max-width:520px){.pstats{grid-template-columns:1fr 1fr}}
.map{width:100%;height:auto;display:block;border-radius:var(--r)}
.map-l{font-size:10px;letter-spacing:.2em;font-weight:700;fill:var(--muted);font-family:var(--f-ui)}
.map-l.sea{fill:var(--accent-2);opacity:.6}
.pin .pin-halo{fill:var(--muted);opacity:.15}
.pin .pin-dot{fill:var(--surface);stroke:var(--muted);stroke-width:2}
.pin.on .pin-halo{fill:var(--accent-2);opacity:.25;animation:halo 2.4s infinite}
.pin.on .pin-dot{fill:var(--accent-2);stroke:var(--surface)}
.pin-t{font-size:12px;font-weight:700;fill:var(--fg);font-family:var(--f-ui);paint-order:stroke;stroke:var(--map-land);stroke-width:4px}
@keyframes halo{50%{opacity:.05}}
.pgroup{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px}
.pgroup h3{font-size:1.3rem;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pgroup h3 small{font-family:var(--f-ui);font-size:.74rem;font-weight:700;color:var(--muted)}
.pterr{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.pterr:first-of-type{border-top:0}
.pterr .ck{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px dashed var(--line-strong);color:var(--muted);flex-shrink:0}
.pterr .ck svg{width:15px;height:15px}
.pterr.on .ck{background:var(--accent-2);border:0;color:#fff}
.pterr .nm{flex:1;font-weight:700;min-width:0}
.pterr .nm small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.mini-stamp{aspect-ratio:1;border-radius:50%;border:2px solid;display:grid;place-items:center;text-align:center;padding:14px;position:relative;cursor:pointer;transition:transform .3s var(--ease)}
.mini-stamp:hover{transform:rotate(0) scale(1.04)!important}
.mini-stamp::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px dashed currentColor;opacity:.6}
.mini-stamp b{font-family:var(--f-display);font-size:1.05rem;line-height:1.05;font-weight:400;display:block}
.mini-stamp small{font-size:.56rem;letter-spacing:.14em;font-weight:800;text-transform:uppercase;display:block;margin-top:4px}
.mini-stamp.new{animation:stampIn .8s cubic-bezier(.3,1.6,.5,1) both}

/* ---------- achievements ---------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.badge{background:var(--surface);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.badge .medal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#E7CC8E,#C6A15B 60%,#9C7A3A);color:#3a2a0e;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 6px 16px -6px rgba(198,161,91,.8)}
.badge .medal svg{width:30px;height:30px}
.badge.locked .medal{background:var(--surface-3);color:var(--muted);box-shadow:none}
.badge.locked{opacity:.86}
.badge h4{margin:0;font-size:.82rem;letter-spacing:.12em;font-weight:800}
.badge p{font-size:.86rem;color:var(--muted)}
.prog{height:6px;background:var(--surface-3);border-radius:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--gold);border-radius:6px;transition:width .8s var(--ease)}

/* ---------- scanner ---------- */
.scanner{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0b1410;aspect-ratio:3/4;max-width:440px;margin:0 auto;box-shadow:var(--shadow-lg)}
.scanner .cam{position:absolute;inset:0;opacity:.55;filter:blur(1.5px) saturate(.8)}
.scanner .frame{position:absolute;inset:18% 14%;border-radius:18px}
.scanner .frame::before,.scanner .frame::after{content:'';position:absolute;width:44px;height:44px;border:4px solid #C6A15B}
.scanner .frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
.scanner .frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 16px 0}
.scanner .frame .c2::before,.scanner .frame .c2::after{content:'';position:absolute;width:44px;height:44px;border:4px solid #C6A15B}
.scanner .frame .c2::before{top:-2px;right:-2px;border-left:0;border-bottom:0;border-radius:0 16px 0 0}
.scanner .frame .c2::after{bottom:-2px;left:-2px;border-right:0;border-top:0;border-radius:0 0 0 16px}
.scanner .qrbox{position:absolute;inset:16%;background:#fff;border-radius:8px;padding:6%;transform:rotate(-4deg);box-shadow:0 10px 30px rgba(0,0,0,.4);transition:all .5s}
.scanner .line{position:absolute;left:4%;right:4%;height:2px;background:linear-gradient(90deg,transparent,#8AAA52,transparent);box-shadow:0 0 18px 4px rgba(138,170,82,.6);animation:scanline 2.2s ease-in-out infinite}
@keyframes scanline{0%,100%{top:6%}50%{top:92%}}
.scanner .hint{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:#F5F0E7;font-size:.86rem;font-weight:600}
.scanner.ok .frame::before,.scanner.ok .frame::after,.scanner.ok .frame .c2::before,.scanner.ok .frame .c2::after{border-color:#8AAA52}
.scanner.ok .line{display:none}
.scanner .okmark{position:absolute;inset:0;display:grid;place-items:center;background:rgba(23,61,45,.55);animation:fade .3s}
.scanner .okmark div{width:96px;height:96px;border-radius:50%;background:#8AAA52;color:#fff;display:grid;place-items:center;animation:pop .5s}
.scanner .okmark svg{width:48px;height:48px}
.qr{width:100%;height:100%;display:block}

/* ---------- digital passport (DPP) ---------- */
.dpp{max-width:980px;margin:0 auto}
.dpp-head{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.dpp-head .top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#173D2D;color:#F5F0E7;gap:12px;flex-wrap:wrap}
.dpp-head .top .mono{font-size:.92rem;color:#C6A15B;letter-spacing:.12em}
.dpp-head .grid2{display:grid;grid-template-columns:1fr 1fr}
.dpp-head .grid2 > *{min-width:0}
@media (max-width:760px){.dpp-head .grid2{grid-template-columns:1fr}}
.dpp-head .pic{position:relative;min-height:280px}
.dpp-head .pic .art{position:absolute;inset:0}
.dpp-head .info{padding:24px;display:flex;flex-direction:column;gap:14px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 16px;font-size:.9rem}
.kv dt{color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding-top:3px}
.kv dd{margin:0;font-weight:600}
.dpp-sec{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.dpp-sec > *{min-width:0}
.dpp-sec .lab{display:flex;flex-direction:column;gap:6px}
.dpp-sec .lab .n{font-family:var(--f-mono);font-size:.74rem;color:var(--gold-ink)}
@media (max-width:700px){.dpp-sec{grid-template-columns:1fr;gap:12px}}
.timeline{display:flex;flex-direction:column;gap:0;position:relative}
.tl{display:grid;grid-template-columns:40px 1fr;gap:14px;position:relative;padding-bottom:20px}
.tl:not(:last-child)::before{content:'';position:absolute;left:19px;top:38px;bottom:0;width:2px;background:linear-gradient(var(--accent-2),var(--leaf))}
.tl .ic{width:40px;height:40px;border-radius:50%;background:var(--surface);border:2px solid var(--accent-2);display:grid;place-items:center;color:var(--accent-2)}
.tl .ic svg{width:18px;height:18px}
.tl.you .ic{background:var(--gold);border-color:var(--gold);color:#292929}
.tl b{display:block}
.tl small{color:var(--muted);font-size:.82rem;display:block}
.tl .when{font-family:var(--f-mono);font-size:.72rem;color:var(--gold-ink)}
.evid{display:flex;flex-direction:column;gap:8px}
.evid div{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border-radius:var(--r-sm);border:1px solid var(--line)}
.evid svg{width:20px;height:20px;color:var(--brand);flex-shrink:0}
.evid span{flex:1;font-weight:600;font-size:.9rem;min-width:0}
.evid small{color:var(--muted);font-size:.74rem}
.disclaimer{font-size:.82rem;color:var(--muted);border-left:3px solid var(--gold);padding:10px 14px;background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0}

/* ---------- club & box ---------- */
.club-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:var(--surface-2);border-radius:var(--r-lg);padding:clamp(24px,5vw,56px);overflow:hidden}
.club-hero > *{min-width:0}
@media (max-width:860px){.club-hero{grid-template-columns:1fr}}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:960px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;border:1.5px solid transparent;position:relative}
.plan.hl{border-color:var(--gold)}
.plan .pr{font-family:var(--f-display);font-size:2.6rem;line-height:1}
.plan .pr small{font-family:var(--f-ui);font-size:.86rem;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:.9rem}
.plan li{display:flex;gap:8px;align-items:flex-start}
.plan li svg{width:16px;height:16px;color:var(--accent-2);flex-shrink:0;margin-top:3px}
.plan .btn{margin-top:auto}
.journey{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.journey span{padding:9px 14px;border-radius:999px;background:var(--surface);font-weight:800;font-size:.72rem;letter-spacing:.12em;box-shadow:var(--shadow)}
.journey svg{width:16px;height:16px;color:var(--gold)}
.box-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.box-photos img{border-radius:var(--r);width:100%;aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow)}
.terr3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.terr3{grid-template-columns:1fr}}

/* ---------- market & checkout ---------- */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.filters select{appearance:none;-webkit-appearance:none;padding:9px 32px 9px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A5A3B' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;font-size:.82rem;font-weight:700;color:var(--fg-soft)}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt-row button{padding:11px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);font-weight:700;font-size:.88rem;background:var(--surface);transition:all .18s}
.opt-row button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden}
.qty button{width:40px;height:40px;font-size:1.2rem;font-weight:700}
.qty span{min-width:30px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.cart-line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.cart-line .thumb{width:72px;height:72px;border-radius:12px;overflow:hidden}
.cart-line > div{min-width:0}
.sum-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.92rem;font-variant-numeric:tabular-nums}
.sum-row.total{font-weight:800;font-size:1.1rem;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.steps{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.steps span{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.steps span i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);font-style:normal;font-size:.72rem}
.steps span.on{color:var(--fg)}.steps span.on i{background:var(--accent);color:var(--accent-ink)}
.steps span.done i{background:var(--accent-2);color:#fff}
.steps .sep{width:22px;height:1px;background:var(--line-strong);align-self:center}
.radio-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;text-align:left;width:100%}
.radio-card.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.radio-card .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);flex-shrink:0}
.radio-card.on .rd{border:5px solid var(--accent)}
.radio-card div{flex:1;min-width:0}
.radio-card small{display:block;color:var(--muted);font-size:.8rem}
.success{text-align:center;max-width:540px;margin:40px auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.success .ok{width:84px;height:84px;border-radius:50%;background:var(--accent-2);color:#fff;display:grid;place-items:center;animation:pop .6s}
.success .ok svg{width:42px;height:42px}

/* ---------- experiences & route ---------- */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:860px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;color:#F5F0E7;display:flex;align-items:flex-end;padding:16px;text-align:left;isolation:isolate}
@media (max-width:860px){.cat{aspect-ratio:4/3}}
.cat .art{position:absolute;inset:0;z-index:-2;transition:transform .8s var(--ease)}
.cat:hover .art{transform:scale(1.06)}
.cat::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 30%,rgba(15,27,22,.8))}
.cat b{font-size:.78rem;letter-spacing:.14em;font-weight:800}
.dest{position:relative;border-radius:var(--r);overflow:hidden;min-height:220px;display:flex;align-items:flex-end;padding:18px;color:#F5F0E7;isolation:isolate;text-align:left}
.dest .art{position:absolute;inset:0;z-index:-2}
.dest::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(15,27,22,.1),rgba(15,27,22,.86) 75%)}
.dest h3{font-size:1.6rem}
.dest p{font-size:.84rem;color:rgba(245,240,231,.85)}
.xcard{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.xcard .img{aspect-ratio:16/10;position:relative}
.xcard .img .art{position:absolute;inset:0}
.xcard .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.xcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.route-wrap{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.route-wrap > *{min-width:0}
@media (max-width:960px){.route-wrap{grid-template-columns:1fr}}
.map-box{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--map-land)}
.rpin{cursor:pointer;transition:opacity .3s}
.rpin.dim{opacity:.25}
.rpin .pin-halo{fill:var(--accent-2);opacity:.18}
.rpin .pin-dot{fill:var(--forest);stroke:var(--surface);stroke-width:3}
.rpin.on .pin-dot{fill:var(--gold)}
.rpin.on .pin-halo{opacity:.35;animation:halo 2s infinite}
.rpin-i{fill:#F5F0E7;font-size:13px;font-weight:800;font-family:var(--f-ui);pointer-events:none}
.rpin.on .rpin-i{fill:#292929}
.rpin-t{fill:var(--fg);font-size:15px;font-weight:700;font-family:var(--f-ui);paint-order:stroke;stroke:var(--map-land);stroke-width:5px}
.pano{position:relative;border-radius:var(--r-lg);overflow:hidden;height:360px;cursor:grab;box-shadow:var(--shadow);user-select:none;touch-action:pan-y}
.pano .strip{position:absolute;top:0;bottom:0;left:0;width:300%;display:flex}
.pano .strip > div{flex:1}
.pano .hud{position:absolute;left:16px;bottom:16px;background:rgba(15,27,22,.7);color:#F5F0E7;padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:700;display:flex;gap:8px;align-items:center}
.pano .hud svg{width:16px;height:16px}
.hotspot{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(245,240,231,.9);display:grid;place-items:center;color:#173D2D;font-weight:800;box-shadow:0 0 0 6px rgba(245,240,231,.3);animation:halo 2s infinite}

/* ---------- producer ---------- */
.prod-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#F5F0E7;isolation:isolate}
.prod-hero .art{position:absolute;inset:0;z-index:-2}
.prod-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 30%,rgba(15,27,22,.85))}
.prod-hero .in{padding:clamp(22px,4vw,40px);display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap}
.portrait{width:96px;height:96px;border-radius:50%;border:3px solid #F5F0E7;overflow:hidden;flex-shrink:0;background:#552B18;display:grid;place-items:center;font-family:var(--f-display);font-size:2.2rem;color:#F5F0E7}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpis > div{background:var(--surface);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.kpis b{font-family:var(--f-display);font-size:2.2rem;line-height:1;display:block;font-variant-numeric:tabular-nums}
.kpis span{font-size:.76rem;color:var(--muted);font-weight:700}
@media (max-width:700px){.kpis{grid-template-columns:1fr 1fr}}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:150px 150px;gap:10px}
.gallery > div{border-radius:var(--r-sm);overflow:hidden;position:relative}
.gallery > div:first-child{grid-row:span 2}
.gallery .art{position:absolute;inset:0}
.gallery span{position:absolute;left:10px;bottom:8px;color:#fff;font-size:.72rem;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ---------- home ---------- */
.greet{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.greet h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.because{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--surface);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);cursor:pointer;text-align:left;width:100%}
.because .thumb{width:110px;height:110px;border-radius:var(--r);overflow:hidden}
.because > div{min-width:0}
@media (max-width:600px){.because{grid-template-columns:80px 1fr}.because .thumb{width:80px;height:80px}.because .mring{display:none}}
.start-card{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:linear-gradient(120deg,var(--forest),#245038);color:#F5F0E7;border-radius:var(--r-lg);padding:clamp(22px,4vw,36px)}
.start-card .eyebrow{color:#C9DA9E}
@media (max-width:700px){.start-card{grid-template-columns:1fr}}
.cycle{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.cycle i{font-style:normal;color:var(--gold)}
.foot-site{border-top:1px solid var(--line);margin-top:70px;padding-block:32px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.foot-site b{color:var(--fg)}
.foot-site .links{display:flex;gap:16px;flex-wrap:wrap}
.foot-site button{font-weight:700;color:var(--fg-soft)}

/* ---------- search results ---------- */
.understood{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.suggest{display:flex;gap:8px;flex-wrap:wrap}
.suggest button{font-size:.82rem;padding:8px 14px;border-radius:999px;background:var(--surface-2);color:var(--fg-soft);font-weight:600;text-align:left}
.suggest button:hover{background:var(--surface-3)}
.disc-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start}
.disc-layout > *{min-width:0}
.facets{position:sticky;top:90px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
.facet h4{margin:0 0 8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facet .chips{gap:6px}
.facet .chip{padding:5px 11px;font-size:.78rem}
.range{width:100%;accent-color:var(--forest)}
@media (max-width:960px){.disc-layout{grid-template-columns:1fr}.facets{position:static;max-height:none;display:none}.facets.open{display:flex}}
.ftoggle{display:none}
@media (max-width:960px){.ftoggle{display:inline-flex}}

/* ---------- community ---------- */
.feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.feed .review .cof{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:12px;padding:8px;cursor:pointer;text-align:left}
.feed .review .cof .t{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0}

/* ---------- sommelier ---------- */
.som-fab{position:fixed;right:22px;bottom:24px;z-index:50;display:flex;align-items:center;gap:10px;background:#552B18;color:#F5F0E7;padding:12px 18px 12px 14px;border-radius:999px;box-shadow:var(--shadow-lg);font-weight:700;font-size:.86rem;transition:transform .2s}
.som-fab:hover{transform:translateY(-2px)}
.som-fab svg{width:22px;height:22px}
@media (max-width:960px){.som-fab{bottom:calc(92px + env(safe-area-inset-bottom,0px));right:14px;padding:12px}.som-fab span{display:none}}
.som{position:fixed;right:22px;bottom:22px;z-index:85;width:min(420px,calc(100vw - 28px));height:min(640px,calc(100vh - 44px));background:var(--bg);border-radius:var(--r-lg);box-shadow:0 30px 80px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:modalIn .4s var(--ease);border:1px solid var(--line)}
@media (max-width:600px){.som{right:14px;bottom:14px}}
.som-h{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#552B18;color:#F5F0E7}
.som-h .av{width:40px;height:40px;border-radius:50%;background:#F5F0E7;display:grid;place-items:center}
.som-h .av img{width:32px;height:32px}
.som-h b{display:block;font-size:.95rem;letter-spacing:.06em}
.som-h small{font-size:.74rem;opacity:.8}
.som-h .ibtn{margin-left:auto;color:#F5F0E7}
.som-b{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:.9rem;line-height:1.45}
.msg.bot{background:var(--surface);box-shadow:var(--shadow);border-bottom-left-radius:4px}
.msg.me{background:var(--accent);color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg-cards{display:flex;flex-direction:column;gap:8px;max-width:92%}
.mini{display:grid;grid-template-columns:54px 1fr auto;gap:10px;align-items:center;background:var(--surface);border-radius:14px;padding:8px;box-shadow:var(--shadow);text-align:left;cursor:pointer}
.mini .t{width:54px;height:54px;border-radius:10px;overflow:hidden}
.mini b{font-size:.9rem;display:block}
.mini small{color:var(--muted);font-size:.74rem}
.mini > div{min-width:0}
.typing{display:flex;gap:4px;padding:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typ 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{50%{transform:translateY(-5px);opacity:.4}}
.som-f{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.som-f .suggest{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.som-f .suggest button{white-space:nowrap;font-size:.76rem;padding:6px 11px}
.som-f form{display:flex;gap:8px}
.som-f input{flex:1;padding:12px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--surface);min-width:0}
.som-f button[type=submit]{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0}
.som-f svg{width:20px;height:20px}

/* ---------- profile ---------- */
.prof-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.prof-head .avatar{width:76px;height:76px;font-size:1.8rem;font-family:var(--f-display)}
.menu-list{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.menu-list button{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;text-align:left;border-top:1px solid var(--line);font-weight:600}
.menu-list button:first-child{border-top:0}
.menu-list button:hover{background:var(--surface-2)}
.menu-list button svg{width:20px;height:20px;color:var(--brand)}
.menu-list button .chev{margin-left:auto;color:var(--muted);width:16px;height:16px}
.menu-list button small{color:var(--muted);font-weight:600;font-size:.78rem}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:95;background:#292929;color:#F5F0E7;padding:12px 18px;border-radius:999px;font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);animation:toastIn .4s var(--ease);max-width:calc(100vw - 32px)}
.toast svg{width:18px;height:18px;color:#8AAA52;flex-shrink:0}
@media (max-width:960px){.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}}

/* ---------- about / cycle ---------- */
.eco{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:960px){.eco{grid-template-columns:1fr 1fr}}
.eco > div{background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.eco b{font-size:.72rem;letter-spacing:.14em;color:var(--accent-2)}
.eco h4{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.4rem}
.loop{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
@media (max-width:860px){.loop{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.loop{grid-template-columns:repeat(2,minmax(0,1fr))}}
.loop div{overflow-wrap:anywhere;background:var(--surface-2);border-radius:var(--r-sm);padding:14px 10px;text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.1em;position:relative}
.loop div span{display:block;font-family:var(--f-mono);color:var(--gold-ink);font-size:.7rem;margin-bottom:4px}

/* ============ BUSINESS ============ */
.biz{display:grid;grid-template-columns:248px 1fr;min-height:100vh;background:var(--biz-bg,#F3F4F1)}
:root{--biz-bg:#F2F3EF;--biz-card:#FFFFFF;--biz-side:#10291E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--biz-bg:#0C1511;--biz-card:#14211B;--biz-side:#08130E} }
:root[data-theme="dark"]{--biz-bg:#0C1511;--biz-card:#14211B;--biz-side:#08130E}
.biz .side{background:var(--biz-side);color:#E6E9E2;padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.biz .side .brand{padding:4px 8px 18px}
.biz .side .brand b{color:#F5F0E7}.biz .side .brand b span{color:#8AAA52}
.biz .side .brand em{font-style:normal;font-size:.62rem;letter-spacing:.2em;color:#C6A15B;display:block;font-weight:800}
.biz .side button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:.88rem;font-weight:600;color:rgba(230,233,226,.75);text-align:left}
.biz .side button svg{width:18px;height:18px}
.biz .side button:hover{background:rgba(255,255,255,.06);color:#fff}
.biz .side button.on{background:rgba(138,170,82,.18);color:#fff}
.biz .side .org{margin-top:auto;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:.8rem}
.biz .main{padding:24px clamp(16px,3vw,36px) 60px;min-width:0}
.biz .bhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.biz .bhead h1{font-family:var(--f-ui);font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.bcard{background:var(--biz-card);border-radius:14px;border:1px solid var(--line);padding:18px;min-width:0}
.bcard h3{font-family:var(--f-ui);font-size:.95rem;font-weight:800;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.bkpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:1200px){.bkpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.bkpis{grid-template-columns:1fr 1fr}}
.bkpis .bcard .k{font-size:.74rem;font-weight:700;color:var(--muted)}
.bkpis .bcard .v{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px}
.bkpis .bcard .d{font-size:.74rem;font-weight:800;color:var(--accent-2)}
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
@media (max-width:1000px){.bgrid{grid-template-columns:1fr}}
.hbar{display:grid;grid-template-columns:130px 1fr 60px;gap:10px;align-items:center;font-size:.84rem;padding:5px 0}
.hbar .t{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--accent-2);border-radius:5px;transform-origin:left;animation:grow 1s var(--ease)}
.hbar .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--fg-soft)}
.hbar.alt .t i{background:var(--tan)}
.chart{width:100%;height:auto;display:block}
.chart text{font-size:11px;fill:var(--muted);font-family:var(--f-ui)}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.tbl th{text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px;border-bottom:1px solid var(--line-strong)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:var(--surface-2)}
.st{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.78rem}
.st::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.st.ok{color:#3f7a2e}.st.res{color:#b07a1e}.st.sold{color:var(--muted)}
.lot{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.lot .mono{font-size:.78rem;color:var(--gold-ink)}
.bigsearch{display:flex;gap:10px;background:var(--biz-card);border:1.5px solid var(--line-strong);border-radius:14px;padding:8px 8px 8px 16px;align-items:center}
.bigsearch textarea{flex:1;border:0;background:none;resize:none;min-height:48px;padding:6px 0}
.bigsearch textarea:focus{outline:none}
.donut-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.donut-wrap svg{width:140px;height:140px;flex-shrink:0}
.legend{display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:3px}
.bmenu-mobile{display:none}
@media (max-width:860px){
  .biz{grid-template-columns:1fr}
  .biz .side{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px;gap:4px}
  .biz .side .brand,.biz .side .org{display:none}
  .biz .side button{white-space:nowrap;padding:8px 12px}
}

.split.side-r{grid-template-columns:1fr 300px}
@media (max-width:960px){.split.side-r{grid-template-columns:1fr}}
.loop.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){.loop.four{grid-template-columns:1fr 1fr}}

.ccard .chip{padding:4px 10px;font-size:.74rem}
.ccard .chips{gap:6px}

@media (max-width:860px){.scanner{order:-1;width:100%}}

/* vídeo de fundo da tela inicial */
.splash .bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 60%;background:#2a2016}
@media (max-width:760px){.splash .bg-video{object-position:84% 50%}}

/* foto da tela de cadastro */
.auth .side .side-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.auth .side::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,27,22,0) 50%,rgba(15,27,22,.7));pointer-events:none}
.auth .side .quote{z-index:1}
.auth .side{position:sticky;top:0;height:100vh;align-self:start}

/* tela de boas-vindas com arte da marca */
.welcome{min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;color:#F5F0E7;background:#0F2219}
.welcome-media{position:relative;width:100%;height:min(62vh,56vw);min-height:220px;overflow:hidden}
.welcome-media img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block;animation:fade 1s}
.welcome-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,34,25,0) 70%,#0F2219)}
.welcome-in{max-width:640px;padding:clamp(8px,2vh,24px) var(--gutter) clamp(32px,6vh,64px);gap:12px;align-items:center;animation:pageIn .8s .2s var(--ease) both;margin-block:auto}
.welcome-in .eyebrow{color:#C9DA9E}
.welcome-in h1{font-size:clamp(2.1rem,4.2vw,3.2rem)}
.welcome-in p{color:rgba(245,240,231,.82);max-width:520px}
@media (max-width:700px){.welcome-media{height:46vh}.welcome-media img{object-position:50% 42%}}

/* teste de paladar: fundo fotográfico e ícones ilustrados */
.quiz-photo{position:relative;isolation:isolate;color:#F1EBE0;background:#0F2219;
  --surface:rgba(16,34,26,.74);--surface-2:rgba(255,255,255,.08);--surface-3:rgba(255,255,255,.14);--fg:#F1EBE0;--fg-soft:#D9D0C2;--muted:#B4AB9C;
  --line:rgba(245,240,231,.12);--line-strong:rgba(245,240,231,.22);--accent:#9DBB63;--accent-2:#8AAA52;--accent-ink:#0F1B16;--eyebrow:#C9DA9E;--brand:#E2C98F;--bg:#0F2219}
.quiz-bg{position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,22,16,.9) 0%,rgba(10,22,16,.72) 55%,rgba(10,22,16,.45)),url("../img/teste-fundo.jpg") center/cover no-repeat}
.quiz-photo .opt{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(245,240,231,.12)}
.quiz-photo .opt:hover{border-color:#C6A15B}
.quiz-photo .opt.on{border-color:#C6A15B;background:rgba(40,60,38,.82);box-shadow:0 0 0 3px rgba(198,161,91,.35)}
.quiz-photo .opt .ico{width:72px;height:72px;border-radius:18px;background:linear-gradient(160deg,#2a5a33,#163d26);color:#E2C98F;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -6px rgba(0,0,0,.6)}
.quiz-photo .opt .ico svg{width:34px;height:34px}
.quiz-photo .opt .ico-img{padding:0;overflow:hidden;background:none}
.quiz-photo .opt .ico-img img{width:100%;height:100%;object-fit:cover;display:block}
.quiz-photo .foot{background:rgba(10,22,16,.7)}
.quiz-photo .brand b{color:#F5F0E7}
.quiz-photo .btn-o{color:#F1EBE0}

/* sabores: ilustração maior e selecionado com selo */
.quiz-photo .opt .ico-sabor{width:84px;height:84px}
.quiz-photo .opt{position:relative}
.quiz-photo .opt.on::after{content:'✓';position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:#C6A15B;color:#173D2D;font-weight:800;font-size:.8rem;display:grid;place-items:center}

/* tela "perfil pronto" com foto */
.done-photo{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:#0F2219;overflow:hidden;isolation:isolate;padding:0}
.done-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;z-index:-2;animation:doneZoom 6s var(--ease) both}
@keyframes doneZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.done-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,26,19,0) 55%,rgba(12,26,19,.85) 80%,rgba(12,26,19,.95))}
.done-in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:640px;padding:0 var(--gutter) clamp(28px,6vh,60px);color:#F5F0E7;text-align:center}
.done-in .eyebrow{color:#C9DA9E;animation:pageIn .7s .6s both}
.done-in h1{font-size:clamp(2rem,4vw,3rem);animation:pageIn .8s .9s both}
.done-in .btn{animation:pageIn .6s 1.3s both}
@media (max-width:700px){.done-bg{object-position:50% 30%}.done-photo::after{background:linear-gradient(180deg,rgba(12,26,19,0) 40%,rgba(12,26,19,.9) 68%,rgba(12,26,19,.97))}}
@media (max-width:700px){
  .done-photo{justify-content:flex-start}
  .done-bg{position:relative;inset:auto;height:52vh;object-position:51% 40%;z-index:0}
  .done-photo::after{background:linear-gradient(180deg,rgba(12,26,19,0) 30%,#0F2219 52%)}
  .done-in{margin-block:auto;padding-top:8px}
}
@media (max-width:700px){.done-photo::after{z-index:1}.done-in{position:relative;z-index:2;margin-top:-40px}}
@media (max-width:700px){.done-bg{height:58vh}.done-photo::after{background:linear-gradient(180deg,rgba(12,26,19,0) 34%,#0F2219 58%)}.done-in{margin:-24px 0 auto;padding-bottom:40px}}

/* Meu Paladar: faixa fotográfica no topo */
.taste-photo{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);margin-top:-24px;padding-block:24px 56px;color:#F1EBE0;
  --surface:rgba(16,34,26,.72);--surface-2:rgba(255,255,255,.1);--surface-3:rgba(255,255,255,.16);--fg:#F1EBE0;--fg-soft:#E2DACB;--muted:#C2B9A9;
  --line:rgba(245,240,231,.12);--line-strong:rgba(245,240,231,.24);--accent:#9DBB63;--accent-2:#8AAA52;--accent-ink:#0F1B16;--eyebrow:#C9DA9E;--brand:#E2C98F}
.taste-photo::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,22,16,.88) 0%,rgba(10,22,16,.66) 50%,rgba(10,22,16,.35) 100%),linear-gradient(180deg,transparent 70%,var(--page-bg,#0F1B16)),url("../img/paladar-fundo.jpg") center 40%/cover no-repeat}
.taste-photo-in{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.taste-photo .panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line)}
.taste-photo .disclaimer{background:rgba(16,34,26,.6)}
.taste-photo .btn-o{color:#F1EBE0;background:rgba(16,34,26,.4)}
.taste-photo .back{color:#E2DACB}
:root{--page-bg:var(--bg)}

/* fotos reais nos cards de café */
img.art.photo{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.detail-hero img.art.photo{position:absolute;inset:0;object-position:50% 40%}
/* Meu Paladar: faixa "Cafés que combinam com você" com foto */
.match-photo{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);margin-top:52px;padding-block:64px 72px}
.match-photo .sec-h{color:#F1EBE0;--eyebrow:#E2C98F}
.match-photo::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--page-bg,#0F1B16) 0%,rgba(12,26,19,.35) 18%,rgba(12,26,19,.25) 60%,var(--page-bg,#0F1B16) 100%),url("../img/match-fundo.jpg") center 55%/cover no-repeat}
.match-photo-in{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.match-photo .sec-h h2{text-shadow:0 2px 16px rgba(0,0,0,.5)}
.match-photo .ccard{box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}

/* ============ HARMONIZAÇÕES ============ */
.hz-hero{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);margin-top:-24px;padding-block:clamp(56px,10vw,110px);color:#F5F0E7}
.hz-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,22,16,.88),rgba(10,22,16,.55) 60%,rgba(10,22,16,.25)),linear-gradient(180deg,transparent 75%,var(--page-bg,#0F1B16)),url("../img/paladar-fundo.jpg") center 60%/cover no-repeat}
.hz-hero-in{max-width:1240px;margin:0 auto;padding-inline:var(--gutter);display:flex;flex-direction:column;gap:16px}
.hz-hero-in > *{max-width:640px}
.hz-hero .eyebrow{color:#E2C98F}
.hz-hero p{font-size:1.08rem;color:rgba(245,240,231,.88)}
.hz-profiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:900px){.hz-profiles{grid-template-columns:1fr 1fr}}
.hz-pf{position:relative;text-align:left;border-radius:var(--r);padding:18px;color:#F5F0E7;background:linear-gradient(150deg,var(--c1),var(--c2));display:flex;flex-direction:column;gap:6px;min-height:150px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s;border:2px solid transparent}
.hz-pf:hover{transform:translateY(-3px)}
.hz-pf.on{border-color:#C6A15B;box-shadow:0 0 0 3px rgba(198,161,91,.35),var(--shadow-lg)}
.hz-pf-ico{width:42px;height:42px;border-radius:12px;background:rgba(245,240,231,.16);display:grid;place-items:center;margin-bottom:auto}
.hz-pf-ico svg{width:22px;height:22px}
.hz-pf b{font-size:1rem}
.hz-pf small{opacity:.8;font-size:.8rem}
.hz-pf .tag{position:absolute;top:12px;right:12px}
.hz-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.hz-rules{grid-template-columns:1fr 1fr}}
.hz-rules > div{background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.hz-rules .mono{color:var(--gold-ink);font-size:.78rem}
.hz-rules p{font-size:.88rem}
.hz-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.rcp{background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s;min-width:0}
.rcp:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rcp-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.rcp-type{position:absolute;left:12px;top:12px;background:rgba(245,240,231,.92);color:#292929}
.rcp .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.rcp h3{font-size:1.35rem}
.rcp .row{font-size:.8rem;margin-top:auto}
.rcp-coffee{font-size:.82rem;color:var(--fg-soft);display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.rcp-art{position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(255,255,255,.14),transparent 45%),repeating-radial-gradient(circle at 20% 110%,rgba(255,255,255,.05) 0 2px,transparent 2px 18px),linear-gradient(140deg,var(--c1),var(--c2));display:grid;place-items:center;color:#F5F0E7}
.rcp-ico{width:76px;height:76px;border-radius:50%;background:rgba(245,240,231,.14);border:1px solid rgba(245,240,231,.3);display:grid;place-items:center}
.rcp-ico svg{width:36px;height:36px;color:#E2C98F}
.rcp-mark{position:absolute;right:14px;bottom:4px;font-family:var(--f-display);font-size:3.4rem;line-height:1;opacity:.14}
.rcp-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.rcp-hero .rcp-ico{width:120px;height:120px}.rcp-hero .rcp-ico svg{width:56px;height:56px}.rcp-hero .rcp-mark{font-size:6rem}
.rcp-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:12px}
.rcp-steps li{padding-left:6px;line-height:1.5}
.rcp-steps li::marker{font-family:var(--f-mono);color:var(--gold-ink);font-weight:600}
.rcp-ing{padding:8px 0;border-top:1px solid var(--line)}
.rcp-ing:has(input:checked){color:var(--muted);text-decoration:line-through}
@media (max-width:1180px){.nav button{padding:8px 8px;font-size:.82rem}}
.topbar .lang.desk{display:none} .topbar .wrap{min-width:0} .nav{flex-shrink:1;min-width:0}
@media (max-width:1500px){.topbar .biz-link{display:none}} .tools{flex-shrink:0}
@media (max-width:1080px){.bottomnav{display:grid}.som-fab{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
.topbar .biz-link{display:none}

/* ===== fundo parallax (todas as páginas com body.pbg) ===== */
.page-bg{display:none;position:fixed;left:0;right:0;top:0;height:118vh;z-index:0;pointer-events:none;will-change:transform;
  background:linear-gradient(180deg,rgba(10,22,16,.80) 0%,rgba(10,22,16,.68) 35%,rgba(10,22,16,.88) 75%),url("../img/descobrir-fundo.jpg") center 30%/cover no-repeat}
html:has(body.pbg){background:#0F1B16}
body.pbg{background:transparent}
body.pbg .page-bg{display:block}
body.pbg #app{position:relative;z-index:1;color-scheme:dark;
  --bg:transparent;--page-bg:#0F1B16;--fg:#F1EBE0;--fg-soft:#E2DACB;--muted:#C2B9A9;--eyebrow:#C9DA9E;--brand:#E2C98F;
  --surface:rgba(18,36,28,.84);--surface-2:rgba(255,255,255,.09);--surface-3:rgba(255,255,255,.16);
  --line:rgba(245,240,231,.12);--line-strong:rgba(245,240,231,.24);--accent:#9DBB63;--accent-2:#8AAA52;--accent-ink:#0F1B16;
  --leaf-ink:#B9D08A;--gold-ink:#D9B776;--danger:#E08A70;--avatar:#426B3A;--avatar-ink:#F5F0E7;--fab:#9DBB63;--fab-ink:#0F1B16;
  --map-sea:rgba(26,46,51,.9);--map-land:rgba(28,48,40,.92);--map-contour:rgba(138,170,82,.14);--map-coast:#3E5E52;--map-border:rgba(245,240,231,.25);
  --biz-card:rgba(18,36,28,.84);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -12px rgba(0,0,0,.7);--shadow-lg:0 24px 48px -20px rgba(0,0,0,.8);color:#F1EBE0}
body.pbg #main .search,body.pbg #main .ccard,body.pbg #main .panel,body.pbg #main .plan,body.pbg #main .xcard,body.pbg #main .review,body.pbg #main .pgroup,body.pbg #main .rcp{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body.pbg #main h1{text-shadow:0 2px 24px rgba(0,0,0,.45)}
body.pbg .topbar{background:rgba(12,24,18,.72);border-color:rgba(245,240,231,.1)}
body.pbg .bottomnav{background:rgba(12,24,18,.9)}
body.pbg .filters select{background-color:rgba(18,36,28,.84)}
body.pbg .club-hero,body.pbg .panel-flat{background:rgba(18,36,28,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.pbg .passport-cover{background:linear-gradient(135deg,rgba(23,61,45,.92),rgba(15,42,31,.92))}