/* OuroNosso V4 — direção inspirada em marcas de café especial (Orfeu, Blue Bottle, Onyx).
   Carrega depois de style.css e só vale para páginas com body.v4. */
.v4{--espresso:#1f1812;--roast:#2e241b;--cream:#f5efe4;--paper:#fbf8f2;--ink:#2b2119;--gold:#a57b43;--gold-soft:#d9bd8a;--olive:#4b5138;--line:#e3d9c9;--ease:cubic-bezier(.2,.7,.2,1);background:var(--paper);color:var(--ink)}
.v4 h1,.v4 h2,.v4 h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.02em;line-height:1.02;margin:0}
.v4 h2{font-size:clamp(40px,5vw,72px)}
.v4 em{font-style:italic;color:var(--gold);font-weight:400;border:0;padding:0}
.v4 .eyebrow{font-size:11px;letter-spacing:.28em;font-weight:600;color:var(--gold);margin:0 0 22px}
.v4 .arrow{display:inline-block;transition:transform .35s var(--ease)}
.v4 .button{gap:14px;padding:17px 30px;font-size:13px;letter-spacing:.06em;border-radius:0;background:var(--espresso);border-color:var(--espresso);color:#fff;transition:background .3s,color .3s,transform .3s var(--ease)}
.v4 .button:hover{background:var(--gold);border-color:var(--gold)}
.v4 .button:hover .arrow{transform:translateX(5px)}
.v4 .button-light{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.v4 .button-light:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--espresso)}
.v4 .text-link{font-size:13px;letter-spacing:.04em;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .3s,border-color .3s}
.v4 .text-link:hover{color:var(--gold)}
.v4 .text-link.light{color:var(--cream)}
.v4 .text-link.light:hover{color:var(--gold-soft)}

/* Barra de benefícios */
.benefit-bar{background:var(--espresso);color:var(--cream);font-size:11px;letter-spacing:.14em;text-transform:uppercase;overflow:hidden}
.benefit-track{display:flex;justify-content:center;gap:18px;padding:9px 20px;white-space:nowrap}
.benefit-track span:nth-child(even){color:var(--gold-soft)}

/* Cabeçalho */
.v4 .site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:16px 5vw;background:rgba(251,248,242,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:padding .35s var(--ease),border-color .35s,box-shadow .35s}
.v4 .site-header.is-scrolled{padding:9px 5vw;border-color:var(--line);box-shadow:0 8px 30px -22px rgba(31,24,18,.5)}
.v4 .brand img{width:52px;height:52px;transition:width .35s var(--ease),height .35s var(--ease)}
.v4 .site-header.is-scrolled .brand img{width:40px;height:40px}
.v4 nav{display:flex;gap:34px;font-size:13px;letter-spacing:.05em}
.v4 nav a{position:relative;padding:6px 0}
.v4 nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.v4 nav a:hover::after{transform:scaleX(1);transform-origin:left}
.v4 .bag{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.05em;color:var(--ink)}
.v4 #bag-count{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--espresso);color:#fff;font-size:11px}

/* Abertura em tela cheia */
.hero-v4{position:relative;min-height:calc(100svh - 110px);display:flex;align-items:flex-end;overflow:hidden;color:var(--cream);background:var(--espresso)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
.js-motion .hero-media img{animation:heroZoom 2.4s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.2);filter:brightness(.6)}to{transform:scale(1.08);filter:none}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,14,9,.86) 0%,rgba(20,14,9,.55) 45%,rgba(20,14,9,.1) 80%),linear-gradient(0deg,rgba(20,14,9,.6),transparent 45%)}
.hero-content{position:relative;z-index:2;padding:0 5vw 11vh;max-width:820px}
.hero-content .eyebrow{color:var(--gold-soft)}
.hero-title{font-size:clamp(54px,8vw,120px);line-height:.98;margin-bottom:28px}
.hero-title em{color:var(--gold-soft)}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:block}
.js-motion .hero-title .line>span{transform:translateY(105%);transition:transform 1.1s var(--ease)}
.js-motion.is-loaded .hero-title .line>span{transform:none}
.js-motion .hero-title .line:nth-child(2)>span{transition-delay:.12s}
.js-motion .hero-title .line:nth-child(3)>span{transition-delay:.24s}
.hero-v4 .lead{font-size:clamp(16px,1.4vw,19px);max-width:470px;color:rgba(245,239,228,.86);margin:0 0 34px}
.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.scroll-cue{position:absolute;right:5vw;bottom:6vh;z-index:2;width:26px;height:44px;border:1px solid rgba(245,239,228,.6);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:9px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--cream);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Faixa em movimento */
.marquee{overflow:hidden;background:var(--cream);border-bottom:1px solid var(--line);padding:20px 0}
.marquee-track{display:flex;gap:34px;width:max-content;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(22px,2.4vw,34px);color:var(--roast);animation:marquee 38s linear infinite}
.marquee-track span:nth-child(even){color:var(--gold);font-style:normal;font-size:.6em;align-self:center}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Revelação ao rolar */
.js-motion .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js-motion .reveal.in{opacity:1;transform:none}

/* Seções */
.section-v4{padding:clamp(80px,11vw,150px) 6vw}
.section-title{margin-bottom:clamp(40px,6vw,80px)}
.section-title.split{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}

/* Vitrine */
.product-v4{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,100px);align-items:center;border:0;padding:0;background:none}
.product-stage{margin:0}
.product-v4 .product-visual-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#f3e9d8,#e4d5bd);padding:0;border:0}
.product-v4 .product-visual-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .4s}
.product-v4 .product-visual-frame:hover img{transform:scale(1.05)}
.product-v4 .product-thumbnails{display:flex;gap:10px;margin-top:14px;justify-content:flex-start}
.product-v4 .product-thumbnails button{border:1px solid var(--line);background:none;padding:3px;opacity:.6;transition:opacity .3s,border-color .3s}
.product-v4 .product-thumbnails button.is-selected,.product-v4 .product-thumbnails button:hover{opacity:1;border-color:var(--espresso)}
.product-v4 .product-thumbnails img{width:60px;height:68px;object-fit:cover}
.product-v4 h3{font-size:clamp(38px,4vw,58px);margin-bottom:12px}
.product-v4 .weight{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7a6c59;margin:0 0 22px}
.product-v4 .product-copy{font-size:17px;color:#5b4f41;max-width:460px;margin:0 0 30px}
.variant-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--espresso);padding:0;margin:0 0 12px}
.variant-tabs legend{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:12px;padding:0}
.variant-tabs label{position:relative;cursor:pointer;margin:0;border:0!important;background:none}
.variant-tabs input{position:absolute;opacity:0;pointer-events:none}
.variant-tabs label>span{display:block;padding:16px 18px;transition:background .35s var(--ease),color .35s;border:0}
.variant-tabs label+label>span{border-left:1px solid var(--espresso)}
.variant-tabs strong{display:block;font-size:15px}
.variant-tabs small{display:block;font-size:12px;opacity:.7}
.variant-tabs input:checked+span{background:var(--espresso);color:var(--cream)}
.variant-tabs input:focus-visible+span{outline:3px solid var(--gold);outline-offset:-3px}
.product-v4 .selection-note{font-size:12px;color:#7a6c59;margin:0 0 22px}
.product-v4 .buy-row{display:flex;gap:12px;align-items:stretch}
.product-v4 .quantity{display:flex;align-items:center;border:1px solid var(--line)}
.product-v4 .quantity button{width:44px;height:100%;border:0;background:none;font-size:18px}
.product-v4 .quantity output{min-width:28px;text-align:center}
.product-v4 #add{flex:1;margin:0}
.product-perks{list-style:none;padding:0;margin:26px 0 22px;display:grid;gap:10px;font-size:14px;color:#5b4f41}
.product-perks li{position:relative;padding-left:22px}
.product-perks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold)}

/* Jornada */
.journey{padding:clamp(80px,10vw,140px) 6vw;background:var(--espresso);color:var(--cream)}
.journey .eyebrow{color:var(--gold-soft)}
.journey h2 em{color:var(--gold-soft)}
.journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(245,239,228,.18)}
.journey-steps li{padding:34px 28px 10px 0;margin-right:28px;border-right:1px solid rgba(245,239,228,.12)}
.journey-steps li:last-child{border-right:0}
.step-n{display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:44px;color:var(--gold-soft);margin-bottom:18px}
.journey-steps h3{font-size:26px;margin-bottom:12px}
.journey-steps p{color:rgba(245,239,228,.72);font-size:15px;margin:0}

/* História */
.origin-v4{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;background:var(--roast);color:var(--cream);padding:0}
.origin-v4 .origin-photo{position:relative;overflow:hidden;margin:0;padding:0;min-height:520px}
.origin-v4 .origin-photo img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.origin-v4 .origin-copy{padding:clamp(60px,8vw,120px) 6vw;align-self:center}
.origin-v4 .eyebrow{color:var(--gold-soft)}
.origin-v4 h2{margin-bottom:28px}
.origin-v4 h2 em{color:var(--gold-soft)}
.origin-v4 p{color:rgba(245,239,228,.8);font-size:16px;max-width:520px}
.stats{display:flex;gap:44px;margin:38px 0 40px;padding-top:30px;border-top:1px solid rgba(245,239,228,.18)}
.stats strong{display:block;font-family:'Playfair Display',Georgia,serif;font-size:clamp(40px,4vw,56px);font-weight:500;color:var(--gold-soft);line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:13px;color:rgba(245,239,228,.7)}

/* Presentes e empresas */
.gifts{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;background:var(--cream)}
.gifts-media{overflow:hidden;aspect-ratio:4/3}
.gifts-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.gifts-media:hover img{transform:scale(1.06)}
.gifts-copy h2{margin-bottom:24px}
.gifts-copy p{font-size:17px;color:#5b4f41;max-width:460px;margin:0 0 34px}

/* Caderno */
.v4 .journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.v4 .journal-card{display:block;border:0;padding:0;background:none}
.journal-photo-wrap{overflow:hidden;aspect-ratio:4/3;margin-bottom:20px}
.v4 .journal-photo{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);margin:0}
.v4 .journal-card:hover .journal-photo{transform:scale(1.07)}
.v4 .journal-card h3{font-size:24px;line-height:1.15;margin:12px 0 18px}
.v4 .card-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.22em;color:var(--gold)}
.v4 .read-more{font-size:13px}
.v4 .journal-card:hover .arrow{transform:translateX(5px)}

/* Contato */
.contact-v4{position:relative;padding:clamp(100px,12vw,170px) 6vw;text-align:center;background:linear-gradient(rgba(20,14,9,.78),rgba(20,14,9,.86)),url('assets/preparo.jpg') center/cover fixed;color:var(--cream)}
.contact-v4 .eyebrow{color:var(--gold-soft)}
.contact-v4 h2 em{color:var(--gold-soft)}
.contact-v4 p{max-width:520px;margin:26px auto 40px;color:rgba(245,239,228,.8);font-size:17px}
.contact-v4 .contact-actions{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap}

/* WhatsApp flutuante */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:50;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#1f8f4e;color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform .35s var(--ease)}
.wa-float:hover{transform:translateY(-4px) scale(1.05)}

/* Rodapé mais escuro */
.v4 footer{background:var(--espresso)}

@media (max-width:900px){
  .v4 nav{display:none}
  .benefit-track{justify-content:flex-start;animation:marquee 22s linear infinite;width:max-content}
  .product-v4,.origin-v4,.gifts{grid-template-columns:1fr}
  .journey-steps{grid-template-columns:1fr 1fr}
  .journey-steps li:nth-child(2){border-right:0}
  .v4 .journal-grid{grid-template-columns:1fr}
  .section-title.split{flex-direction:column;align-items:flex-start}
  .contact-v4{background-attachment:scroll}
}
@media (max-width:560px){
  .v4 .bag-label{display:none}
  .hero-v4{min-height:calc(100svh - 96px)}
  .hero-content{padding-bottom:14vh}
  .scroll-cue{display:none}
  .journey-steps{grid-template-columns:1fr}
  .journey-steps li{border-right:0;border-bottom:1px solid rgba(245,239,228,.12);margin-right:0;padding-right:0}
  .stats{gap:28px}
  .variant-tabs label>span{padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track,.benefit-track,.scroll-cue span{animation:none}
  .js-motion .hero-media img{animation:none}
  .js-motion .hero-title .line>span{transform:none;transition:none}
}

/* Ajustes da revisão visual 22/09 */
.hero-v4{align-items:center}
.hero-content{padding:12vh 5vw 14vh}
.hero-title{font-size:clamp(50px,6.6vw,104px)}
.scroll-cue{right:auto;left:50%;margin-left:-13px}
.v4 .bag span.bag-label{border:0;border-radius:0;width:auto;height:auto;background:none;color:inherit;min-width:0;display:inline}
.product-v4 .product-visual-frame img{object-position:50% 28%}
.product-v4 figcaption{display:none}
.origin-v4 .origin-photo{padding:0!important;margin:0!important;width:100%;height:auto;min-height:520px;display:block}
.origin-v4 .origin-photo img{max-width:none}
.contact-v4 .eyebrow{text-align:center}
.contact-v4 p{color:rgba(245,239,228,.85)!important}
@media (max-width:560px){.hero-content{padding:10vh 6vw 12vh}.origin-v4 .origin-photo{min-height:420px}}
.origin-v4 .origin-photo{width:auto!important;max-width:none!important;align-self:stretch;justify-self:stretch;aspect-ratio:auto!important}


/* Revisão 23/09 — pacote ao lado da escolha, guia em janela, empresas, história, transições */
.pick-row{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:stretch;margin:0 0 12px}
.product-v4 .pick-pouch{padding:0;display:block;margin:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#f3e9d8,#e4d5bd);border:1px solid var(--line)}
.product-v4 .pick-pouch img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pick-row .variant-tabs{margin:0}
.product-help{margin-top:6px}
button.product-help{border:0;border-bottom:1px solid currentColor;background:none;padding:0 0 3px;font:inherit;font-size:13px;letter-spacing:.04em;color:inherit;cursor:pointer}
button.product-help:hover{color:var(--gold)}
.product-v4 .product-visual-frame img.is-swapping{opacity:0;transform:scale(1.03)}
.v4 dialog{padding:36px 40px;width:600px}
.v4 dialog h2{font-size:clamp(30px,3vw,40px);margin:14px 0 18px}
.v4 dialog p{font-size:14px;color:#5b4f41}
.v4 dialog .button{width:auto;margin:0}
.guide-list,.offer-list{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:0;border-top:1px solid var(--line)}
.guide-list li,.offer-list li{display:grid;grid-template-columns:minmax(150px,.9fr) 1.4fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.guide-list strong,.offer-list strong{font-weight:600;color:var(--ink)}
.guide-list span,.offer-list span{color:#5b4f41}
.guide-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 20px}
.guide-actions .button{flex:1;justify-content:center}
.v4 .button-ghost{background:none;color:var(--espresso);border:1px solid var(--espresso)}
.v4 .button-ghost:hover{background:var(--espresso);color:#fff}
.gifts-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.gifts-copy .offer-list{max-width:520px}
.origin-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}

/* Imagens entram como cortina, com leve zoom */
.js-motion .img-reveal{clip-path:inset(0 0 calc(100% - 2px) 0);transition:clip-path 1.2s var(--ease)}
.js-motion .img-reveal.in{clip-path:inset(0 0 0 0)}
.js-motion .img-reveal:not(.in) img{transform:scale(1.18)}

/* Títulos entram palavra por palavra */
.js-motion .split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.js-motion .split .w>span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease) calc(var(--i,0)*70ms)}
.js-motion .split.in .w>span{transform:none}

/* Linha da jornada se desenha */
.journey-steps{position:relative;border-top-color:transparent}
.journey-steps::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(245,239,228,.35);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.journey-steps.in::before{transform:scaleX(1)}

/* Cursor de marca (só com mouse) */
.cursor{position:fixed;left:0;top:0;z-index:90;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--gold);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cursor.on{opacity:1}
.cursor.hot{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(217,189,138,.25)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

@media (max-width:560px){
  .pick-row{grid-template-columns:76px 1fr;gap:12px}
  .guide-list li,.offer-list li{grid-template-columns:1fr;gap:4px}
  .v4 dialog{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .js-motion .img-reveal{clip-path:none;transition:none}
  .js-motion .img-reveal:not(.in) img{transform:none}
  .js-motion .split .w>span{transform:none;transition:none}
  .journey-steps::before{transform:none}
  .cursor{display:none}
}