/* ==========================================================================
   Café Catedral — página cinematográfica
   espresso · crema · o verde da embalagem
   ========================================================================== */
.cf{--ink:#0a0705;--ink-2:#110c09;--ink-3:#18110c;--crema:#d9b58b;--crema-2:#b98a58;--teal:#458479;--teal-l:#7fc0b3;
  --txt:#f2e9dc;--dim:#bcae9e;--mute:#86796c;--hair:rgba(217,181,139,.22);--hair-2:rgba(255,255,255,.08);
  --cine:cubic-bezier(.19,1,.22,1);background:var(--ink);color:var(--txt);position:relative}
.cf ::selection{background:var(--crema);color:#1b130b}
.cf em{font-style:italic;color:var(--crema)}
.cf .wrap{position:relative;z-index:2}
.cf-eyebrow{font-family:var(--ff-body);font-weight:500;font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--crema)}
.cf-kicker{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.cf-kicker::before{content:"";width:46px;height:1px;background:var(--teal-l);flex:none}
.cf h2{font-family:var(--ff-display);font-weight:400;font-size:clamp(40px,5.6vw,84px);line-height:.98;letter-spacing:-.01em;color:#f6efe3}
.cf .lede{font-size:clamp(16px,1.3vw,19px);line-height:1.75;color:var(--dim);max-width:58ch;margin-top:26px}
.cf p{color:var(--dim)}
.cf-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(217,181,139,.55);color:var(--crema);transition:.5s var(--cine);white-space:nowrap;background:rgba(10,7,5,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cf-btn:hover{background:var(--crema);color:#1b130b;border-color:var(--crema)}
.cf-btn.solid{background:var(--crema);color:#1b130b;border-color:var(--crema)}
.cf-btn.solid:hover{background:#f0d4ae;border-color:#f0d4ae}
.cf-btn svg{width:15px;height:15px}
.cf-link{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--crema);border-bottom:1px solid var(--hair);padding-bottom:6px;transition:.4s}
.cf-link:hover{color:#fff;border-color:var(--teal-l);gap:16px}
.cf-link svg{width:15px;height:15px}

/* ---------- grão de película ---------- */
.cf-grain{position:fixed;inset:-100%;z-index:48;pointer-events:none;opacity:.075;background-image:var(--cf-grain);mix-blend-mode:overlay;animation:cfGrain .5s steps(6) infinite}
@keyframes cfGrain{0%{transform:translate(0,0)}17%{transform:translate(-5%,-10%)}33%{transform:translate(-15%,5%)}50%{transform:translate(7%,-25%)}67%{transform:translate(-5%,25%)}83%{transform:translate(15%,0)}100%{transform:translate(0,15%)}}

/* ---------- abertura (title sequence) ---------- */
.cf-intro{display:none}
.cf-js .cf-intro{position:fixed;inset:0;z-index:400;background:#000;display:grid;place-items:center;cursor:pointer;animation:cfIntroFailsafe 1s ease 4.6s forwards}
.cf-intro.out{opacity:0;visibility:hidden;transition:opacity 1.3s ease,visibility 1.3s}
.cf-intro .t{text-align:center;padding:0 24px}
.cf-intro .t span{display:block;font-family:var(--ff-display);text-transform:uppercase;color:#e2d6c2;opacity:0}
.cf-intro .t .a{font-size:clamp(11px,1vw,13px);letter-spacing:.7em;animation:cfIntroA 3.1s ease .25s forwards}
.cf-intro .t .b{font-size:clamp(10px,.85vw,11px);letter-spacing:.55em;color:var(--mute);margin-top:22px;animation:cfIntroA 2.6s ease .75s forwards}
.cf-intro .rule{width:1px;height:64px;margin:0 auto 30px;background:linear-gradient(transparent,var(--crema),transparent);transform:scaleY(0);animation:cfRule 2.8s var(--cine) .1s forwards}
.cf-intro .cf-skip{position:absolute;right:26px;bottom:24px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);background:none;border:0;cursor:pointer;padding:8px}
.cf-intro .cf-skip:hover{color:var(--txt)}
@keyframes cfIntroA{0%{opacity:0;filter:blur(8px);letter-spacing:1em}38%{opacity:1;filter:blur(0)}78%{opacity:1}100%{opacity:0;letter-spacing:.62em}}
@keyframes cfRule{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@keyframes cfIntroFailsafe{to{opacity:0;visibility:hidden}}
html.cf-lock,html.cf-lock body{overflow:hidden}

/* ---------- CENA 1 · herói ---------- */
.cf-hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#000}
.cf-hero .vid{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:66% 50%;opacity:0;
  transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--my,0)*-10px + var(--hp,0)*12vh),0) scale(calc(1.02 + var(--hp,0)*.1));transition:opacity 2.6s ease}
.cf-hero.go .vid{opacity:1}
.cf-hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(6,4,3,.92) 0%,rgba(6,4,3,.7) 30%,rgba(6,4,3,.15) 58%,rgba(6,4,3,0) 75%),
  linear-gradient(0deg,rgba(6,4,3,.95) 0%,rgba(6,4,3,0) 38%),
  radial-gradient(ellipse 120% 90% at 65% 45%,transparent 50%,rgba(0,0,0,.55) 100%)}
.cf-lb{position:absolute;left:0;right:0;z-index:5;height:calc(var(--lb,1)*10.5vh);background:#000;pointer-events:none}
.cf-lb.t{top:0}.cf-lb.b{bottom:0}
.cf-hero .hc{position:absolute;z-index:3;left:0;right:0;bottom:clamp(110px,17vh,190px);opacity:calc(1 - var(--hp,0)*1.6);transform:translate3d(0,calc(var(--hp,0)*-60px),0)}
.cf-hero .hc .cf-eyebrow{opacity:0;transform:translateY(14px);transition:1.4s var(--cine) .2s}
.cf-title{font-family:var(--ff-display);font-weight:400;margin:22px 0 0;line-height:.84;position:relative}
.cf-title .l1{display:block;font-family:var(--ff-body);font-weight:600;font-size:clamp(13px,1.25vw,17px);letter-spacing:1.05em;color:var(--crema);margin:0 0 18px .1em;opacity:0;transform:translateY(16px);transition:1.4s var(--cine) .35s}
.cf-title .l2{display:block;font-size:clamp(62px,9.6vw,168px);letter-spacing:.015em;color:#f6eee2;text-shadow:0 10px 60px rgba(0,0,0,.45)}
.ch{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .006em}
.ch>i{display:inline-block;font-style:normal;transform:translate3d(0,108%,0) rotate(4deg);opacity:0;transition:transform 1.6s var(--cine),opacity 1.6s ease;transition-delay:calc(var(--i)*65ms + .45s)}
.go .ch>i,.in .ch>i{transform:none;opacity:1}
.cf-flare{position:absolute;left:-10%;right:-10%;top:58%;height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,236,210,.0) 20%,rgba(255,240,220,.95) 50%,rgba(255,236,210,0) 80%,transparent);
  box-shadow:0 0 40px 6px rgba(255,214,160,.35);filter:blur(.4px);transform:translateX(-60%) scaleX(.4)}
.go .cf-flare{animation:cfFlare 2.4s var(--cine) 1.25s forwards}
@keyframes cfFlare{0%{opacity:0;transform:translateX(-60%) scaleX(.4)}25%{opacity:1}100%{opacity:0;transform:translateX(60%) scaleX(1)}}
.cf-hero .tag{font-family:var(--ff-display);font-style:italic;font-size:clamp(21px,2.3vw,32px);color:var(--crema);margin-top:26px;opacity:0;transform:translateY(16px);transition:1.6s var(--cine) 1.35s}
.cf-hero .cf-sub{max-width:50ch;font-size:clamp(15px,1.15vw,17px);line-height:1.75;color:var(--dim);margin-top:16px;opacity:0;transform:translateY(16px);transition:1.6s var(--cine) 1.5s}
.cf-hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;opacity:0;transform:translateY(16px);transition:1.6s var(--cine) 1.65s}
.cf-hero.go .hc .cf-eyebrow,.cf-hero.go .cf-title .l1,.cf-hero.go .tag,.cf-hero.go .cf-sub,.cf-hero.go .acts{opacity:1;transform:none}
.cf-hero .credit{position:absolute;z-index:6;left:0;right:0;bottom:calc(var(--lb,1)*10.5vh - 44px);bottom:max(18px,calc(var(--lb,1)*10.5vh*.5 - 8px));font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:#a49582;opacity:0;transition:opacity 2s ease 2.2s}
.cf-hero.go .credit{opacity:1}
.cf-hero .credit .wrap{display:flex;justify-content:space-between;gap:20px}
.cf-hero .cue{display:flex;align-items:center;gap:12px}
.cf-hero .cue i{display:block;width:44px;height:1px;background:rgba(217,181,139,.3);position:relative;overflow:hidden}
.cf-hero .cue i::after{content:"";position:absolute;inset:0;background:var(--crema);animation:cfCue 2.4s var(--cine) infinite}
@keyframes cfCue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- CENA 2 · o pacote (rolagem presa) ---------- */
.cf-pkg{position:relative;height:340vh;background:var(--ink)}
.cf-pkg .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse 60% 70% at 34% 38%,#21170f 0%,#120c08 48%,#0a0705 100%)}
.cf-pkg .cone{position:absolute;left:34%;top:-20%;width:90vh;height:150vh;transform:translateX(-50%);pointer-events:none;opacity:calc(.35 + var(--e,0)*.65);
  background:radial-gradient(ellipse 30% 55% at 50% 0%,rgba(255,226,180,.16),transparent 70%),
  conic-gradient(from 180deg at 50% 0%,transparent 0deg 164deg,rgba(255,232,196,.07) 172deg,rgba(255,232,196,.11) 180deg,rgba(255,232,196,.07) 188deg,transparent 196deg 360deg);filter:blur(8px)}
.cf-pkg .floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55));pointer-events:none}
.cf-pkg .word{position:absolute;top:47%;left:0;white-space:nowrap;font-family:var(--ff-display);font-size:clamp(160px,27vw,460px);line-height:1;letter-spacing:.04em;color:transparent;
  -webkit-text-stroke:1px rgba(217,181,139,.09);transform:translate3d(calc(14vw - var(--p,0)*70vw),-50%,0);pointer-events:none;user-select:none}
.cf-pkg canvas.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.cf-pkg .grid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
.cf-bags{position:relative;height:100%;display:flex;align-items:center;justify-content:center;perspective:2200px;padding-top:7vh}
.cf-bag{position:absolute;height:min(72vh,780px);aspect-ratio:665/1500;transform-style:preserve-3d;will-change:transform,opacity;opacity:0}
.cf-bag .img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 50px 50px rgba(0,0,0,.55)) drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.cf-bag .shine{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  background:linear-gradient(104deg,transparent 0%,transparent 40%,rgba(255,248,236,.3) 50%,transparent 60%,transparent 100%);background-size:320% 100%;background-repeat:no-repeat;
  mix-blend-mode:screen;animation:cfShine 7.5s ease-in-out infinite}
.cf-bag.back .shine{animation-delay:-3.7s}
@keyframes cfShine{0%,58%{background-position:130% 0}100%{background-position:-30% 0}}
.cf-bag .refl{position:absolute;left:0;top:100%;width:100%;height:100%;transform:scaleY(-1);opacity:.17;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 24%);mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 24%)}
.cf-bag::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-5%;height:9%;background:radial-gradient(ellipse at center,rgba(0,0,0,.75),transparent 70%);z-index:-1}
.cf-bag.back{z-index:0}.cf-bag.front{z-index:1}
.cf-call{position:absolute;left:84%;display:flex;align-items:flex-start;gap:14px;width:250px;opacity:0;transform:translate3d(-10px,0,0);transition:opacity .8s ease,transform 1s var(--cine);pointer-events:none}
.cf-call .dot{flex:none;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--crema);box-shadow:0 0 0 6px rgba(217,181,139,.14),0 0 22px rgba(217,181,139,.7);animation:cfPulse 2.6s ease-in-out infinite}
.cf-call .ln{flex:none;width:54px;height:1px;margin-top:10px;background:linear-gradient(90deg,var(--crema),rgba(217,181,139,.1))}
.cf-call b{display:block;font-family:var(--ff-display);font-weight:400;font-size:19px;color:var(--txt);line-height:1.15}
.cf-call small{display:block;font-size:12.5px;line-height:1.5;color:var(--dim);margin-top:5px}
@keyframes cfPulse{50%{box-shadow:0 0 0 11px rgba(217,181,139,0),0 0 22px rgba(217,181,139,.7)}}
.cf-call.c1{top:20%}.cf-call.c2{top:66%}.cf-call.c3{top:86%}
.stage[data-stage="1"] .c1,.stage[data-stage="2"] .c2,.stage[data-stage="2"] .c3{opacity:1;transform:none}
.cf-states{position:relative;height:100%;max-width:470px}
.cf-st{position:absolute;left:0;right:0;top:50%;transform:translate3d(0,calc(-50% + 30px),0);opacity:0;transition:opacity .9s ease,transform 1.2s var(--cine);pointer-events:none}
.cf-st{transition-delay:0s}
.stage[data-stage="1"] .s1,.stage[data-stage="2"] .s2,.stage[data-stage="3"] .s3{opacity:1;transform:translate3d(0,-50%,0);pointer-events:auto;transition-delay:.45s}
.cf-st h2{font-size:clamp(40px,4.6vw,70px)}
.cf-st .n{font-family:var(--ff-display);font-size:13px;letter-spacing:.3em;color:var(--mute);margin-bottom:22px}
.cf-st .n b{color:var(--crema);font-weight:400}
.cf-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.cf-chips span{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--hair);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
.cf-chips svg{width:18px;height:18px;color:var(--crema)}
.cf-progress{position:absolute;z-index:3;right:clamp(20px,3vw,48px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.cf-progress i{display:block;width:2px;height:26px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.cf-progress i::after{content:"";position:absolute;inset:0;background:var(--crema);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--cine)}
.stage[data-stage="1"] .cf-progress i:nth-child(1)::after,.stage[data-stage="2"] .cf-progress i:nth-child(-n+2)::after,.stage[data-stage="3"] .cf-progress i::after{transform:scaleY(1)}

/* ---------- capítulos ---------- */
.cf-ch{position:relative;padding:clamp(120px,15vw,220px) 0;overflow:hidden}
.cf-card{display:flex;align-items:center;gap:18px;white-space:nowrap;font-family:var(--ff-display);font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--mute);margin-bottom:34px}
.cf-card b{font-weight:400;color:var(--crema)}
.cf-card::after{content:"";flex:0 1 120px;height:1px;background:var(--hair)}

/* I · a pedra */
.cf-pedra{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.cf-pedra .grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,8vw,140px);align-items:center}
.cf-arch{position:relative;width:100%;max-width:480px;aspect-ratio:3/4.6;justify-self:center}
.cf-arch .frame{position:absolute;inset:0;clip-path:url(#cfArch);-webkit-clip-path:url(#cfArch);overflow:hidden;background:#1a130d}
.cf-arch img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.24 - var(--p,0)*.18)) translate3d(0,calc((var(--p,0) - .5)*-5%),0);will-change:transform}
.cf-arch .frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,.1),rgba(10,7,5,.45)),radial-gradient(ellipse at 30% 20%,rgba(255,220,170,.18),transparent 60%);mix-blend-mode:multiply}
.cf-arch svg.out{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;pointer-events:none}
.cf-arch svg.out path{fill:none;stroke:rgba(217,181,139,.55);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.2s var(--cine) .3s}
.cf-arch.in svg.out path{stroke-dashoffset:0}
.cf-arch .cap{position:absolute;left:0;right:0;bottom:-46px;text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.cf-prose p{font-size:clamp(16px,1.2vw,18px);line-height:1.85;margin-top:20px;max-width:56ch}
.cf-prose p:first-of-type{margin-top:30px}

/* II · a terra */
.cf-terra{min-height:118vh;display:flex;align-items:center;background:#060403}
.cf-terra .bg{position:absolute;inset:-6%;background:url(ramo.jpg) 62% 50%/cover no-repeat;transform:scale(calc(1.14 - var(--p,0)*.12)) translate3d(0,calc((var(--p,0) - .5)*6%),0);will-change:transform}
.cf-terra::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,4,3,.96) 0%,rgba(6,4,3,.78) 36%,rgba(6,4,3,.1) 70%),linear-gradient(0deg,rgba(6,4,3,.9),transparent 30%,transparent 75%,rgba(6,4,3,.9))}
.cf-terra .leak{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 50% 40% at 78% 22%,rgba(255,170,80,.22),transparent 70%);mix-blend-mode:screen;animation:cfLeak 9s ease-in-out infinite alternate}
@keyframes cfLeak{0%{opacity:.4;transform:translate3d(0,0,0)}100%{opacity:1;transform:translate3d(-4%,3%,0)}}
.cf-loc{font-family:var(--ff-display);text-transform:uppercase;margin-bottom:44px;min-height:3.6em}
.cf-loc .a{display:block;font-size:clamp(13px,1.1vw,15px);letter-spacing:.42em;color:var(--txt)}
.cf-loc .b{display:block;font-size:12px;letter-spacing:.32em;color:var(--crema);margin-top:10px}
.cf-loc .caret{display:inline-block;width:1px;height:1em;background:var(--crema);margin-left:4px;vertical-align:-2px;animation:cfCaret 1s steps(1) infinite}
@keyframes cfCaret{50%{opacity:0}}
.cf-terra .txt{max-width:640px}
.cf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(64px,8vw,110px);border-top:1px solid var(--hair)}
.cf-stats>div{padding:30px 22px 0 0}
.cf-stats>div+div{padding-left:22px;border-left:1px solid var(--hair-2)}
.cf-stats .v{font-family:var(--ff-display);font-size:clamp(40px,4.4vw,66px);line-height:1;color:#f6eee2;white-space:nowrap}
.cf-stats .v small{font-size:.42em;color:var(--crema);margin-left:6px;letter-spacing:.05em}
.cf-stats .l{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:14px;line-height:1.5}

/* III · a família */
.cf-fam{background:radial-gradient(ellipse 70% 60% at 85% 10%,rgba(69,132,121,.12),transparent 60%),var(--ink-2)}
.cf-fam .head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:end;margin-bottom:clamp(70px,8vw,110px)}
.cf-producer{display:flex;align-items:center;gap:30px;justify-self:end}
.cf-producer img{width:150px;height:auto;opacity:.92}
.cf-producer p{font-size:13.5px;line-height:1.7;max-width:26ch}
.cf-tl{position:relative;display:grid;gap:0}
.cf-tl::before{content:"";position:absolute;left:clamp(150px,17vw,250px);top:0;bottom:0;width:1px;background:var(--hair-2)}
.cf-tl::after{content:"";position:absolute;left:clamp(150px,17vw,250px);top:0;bottom:0;width:1px;background:linear-gradient(var(--crema),var(--teal-l));transform-origin:top;transform:scaleY(var(--p2,0))}
.cf-tl .it{display:grid;grid-template-columns:clamp(150px,17vw,250px) 1fr;padding:34px 0;position:relative}
.cf-tl .y{font-family:var(--ff-display);font-size:clamp(34px,3.6vw,58px);line-height:1;color:#f6eee2;padding-right:40px;text-align:right}
.cf-tl .y small{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.cf-tl .d{padding-left:48px;position:relative}
.cf-tl .d::before{content:"";position:absolute;left:-5px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--ink-2);border:1px solid var(--crema);transition:background .8s,box-shadow .8s}
.cf-tl .it.in .d::before{background:var(--crema);box-shadow:0 0 18px rgba(217,181,139,.6)}
.cf-tl .d h3{font-family:var(--ff-display);font-weight:400;font-size:clamp(22px,1.8vw,28px);color:var(--txt);line-height:1.2}
.cf-tl .d p{font-size:15.5px;line-height:1.8;margin-top:10px;max-width:62ch}

/* interlúdios em vídeo (formato cinema) */
.cf-inter{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000;display:grid;place-items:center;text-align:center}
.cf-inter video,.cf-inter .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.1 - var(--p,0)*.08));will-change:transform}
.cf-inter::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,.25),rgba(0,0,0,.7))}
.cf-inter .cf-lb{height:11vh}
.cf-inter .tx{position:relative;z-index:3;padding:0 24px}
.cf-inter .big{font-family:var(--ff-display);font-weight:400;font-size:clamp(46px,8.4vw,140px);line-height:.95;color:#f6eee2;letter-spacing:.5em;opacity:0;filter:blur(12px);transition:letter-spacing 2.8s var(--cine),opacity 2.2s ease,filter 2.2s ease;margin-right:-.5em}
.cf-inter .tx.in .big{letter-spacing:.04em;opacity:1;filter:blur(0);margin-right:0}
.cf-inter .sm{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--crema);margin-top:28px;opacity:0;transition:opacity 1.6s ease 1.2s}
.cf-inter .tx.in .sm{opacity:1}
.cf-inter .words{font-family:var(--ff-display);font-style:italic;font-size:clamp(42px,6.6vw,108px);line-height:1.05;color:#f6eee2}
.cf-inter .words span{display:inline-block;opacity:0;transform:translate3d(0,30px,0);filter:blur(10px);transition:opacity 1.6s ease,transform 1.8s var(--cine),filter 1.6s ease;transition-delay:calc(var(--i)*.28s + .2s)}
.cf-inter .tx.in .words span{opacity:1;transform:none;filter:blur(0)}
.cf-servir video{object-position:62% 50%}

/* IV · o sabor */
.cf-sabor{background:radial-gradient(ellipse 60% 70% at 28% 50%,rgba(185,138,88,.13),transparent 65%),var(--ink)}
.cf-sabor .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:center}
.cf-wheel{position:relative;width:min(100%,560px);aspect-ratio:1;justify-self:center}
.cf-wheel svg{width:100%;height:100%;overflow:visible}
.cf-wheel .ring{fill:none;stroke:rgba(217,181,139,.18);stroke-width:1;stroke-dasharray:2 7;transform-origin:280px 280px;animation:cfSpin 90s linear infinite}
@keyframes cfSpin{to{transform:rotate(360deg)}}
.cf-wheel .arc{fill:none;stroke-width:30;stroke-linecap:butt;stroke-dasharray:var(--len) 2000;stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--cine),stroke-width .5s,opacity .5s;transition-delay:calc(var(--i)*.22s + .2s);cursor:pointer}
.cf-wheel.in .arc{stroke-dashoffset:0}
.cf-wheel .arc:hover,.cf-wheel .arc.on{stroke-width:40}
.cf-wheel .lbl{font-family:var(--ff-body);font-size:13px;letter-spacing:.24em;text-transform:uppercase;fill:var(--txt);opacity:0;transition:opacity 1s ease;transition-delay:calc(var(--i)*.22s + 1s)}
.cf-wheel.in .lbl{opacity:1}
.cf-wheel .core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.cf-wheel .core span{display:block;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute)}
.cf-wheel .core b{display:block;font-family:var(--ff-display);font-weight:400;font-size:clamp(26px,2.4vw,36px);color:var(--txt);margin-top:10px;line-height:1.1;min-height:1.1em;transition:opacity .4s}
.cf-notes{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:34px;font-family:var(--ff-display);font-size:clamp(22px,2vw,30px);color:var(--txt)}
.cf-notes span{display:inline-flex;align-items:center;gap:22px}
.cf-notes span+span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--crema);opacity:.6}
.cf-scales{display:grid;gap:34px;margin-top:56px;max-width:520px}
.cf-scale .t{display:flex;justify-content:space-between;align-items:baseline}
.cf-scale .t span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.cf-scale .t b{font-family:var(--ff-display);font-weight:400;font-size:26px;color:var(--txt)}
.cf-scale .bar{position:relative;height:1px;background:rgba(255,255,255,.14);margin-top:16px}
.cf-scale .bar::before{content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--v)*100%);background:linear-gradient(90deg,var(--teal-l),var(--crema));transform:scaleX(0);transform-origin:left;transition:transform 2s var(--cine) .4s}
.cf-scale .bar i{position:absolute;top:-6px;left:calc(var(--v)*100%);width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--crema);box-shadow:0 0 0 5px rgba(217,181,139,.15),0 0 20px rgba(217,181,139,.6);opacity:0;transform:scale(0);transition:1s var(--cine) 1.8s}
.cf-scale .ticks{display:flex;justify-content:space-between;margin-top:-4px}
.cf-scale .ticks i{width:1px;height:7px;background:rgba(255,255,255,.18)}
.cf-scale .ends{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:12px}
.cf-scales.in .bar::before{transform:scaleX(1)}
.cf-scales.in .bar i{opacity:1;transform:scale(1)}
.cf-src{font-size:12px;color:var(--mute);margin-top:30px;letter-spacing:.04em}

/* V · o ritual */
.cf-ritual{position:relative;min-height:100vh;padding:clamp(120px,13vw,190px) 0;overflow:hidden;background:#050403}
.cf-ritual video,.cf-ritual .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.95}
.cf-ritual::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,4,3,.95) 0%,rgba(5,4,3,.82) 40%,rgba(5,4,3,.25) 75%,rgba(5,4,3,.2)),linear-gradient(0deg,rgba(5,4,3,.9),transparent 25%,transparent 80%,rgba(5,4,3,.85))}
.cf-ritual .panel{max-width:620px}
.cf-tabs{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-bottom:1px solid var(--hair)}
.cf-tabs button{background:none;border:0;color:var(--mute);font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:14px 18px 16px;cursor:pointer;position:relative;transition:color .3s}
.cf-tabs button::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:var(--crema);transform:scaleX(0);transition:transform .6s var(--cine)}
.cf-tabs button:hover{color:var(--txt)}
.cf-tabs button[aria-selected="true"]{color:var(--txt)}
.cf-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.cf-pane{display:none;padding-top:34px;animation:cfPane .8s var(--cine)}
.cf-pane.on{display:block}
@keyframes cfPane{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cf-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--hair-2);background:rgba(10,7,5,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cf-spec>div{padding:18px 16px}
.cf-spec>div+div{border-left:1px solid var(--hair-2)}
.cf-spec span{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.cf-spec b{display:block;font-family:var(--ff-display);font-weight:400;font-size:19px;color:var(--txt);margin-top:8px;line-height:1.25}
.cf-steps{counter-reset:s;list-style:none;margin-top:30px;display:grid;gap:14px}
.cf-steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;font-size:15.5px;line-height:1.7;color:var(--dim)}
.cf-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--ff-display);font-size:14px;color:var(--crema);padding-top:2px}
.cf-calc{margin-top:34px;padding:24px 24px 22px;border:1px solid var(--hair);background:rgba(10,7,5,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cf-calc .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cf-calc label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.cf-calc output{font-family:var(--ff-display);font-size:22px;color:var(--txt)}
.cf-calc input[type=range]{width:100%;margin:18px 0 20px;accent-color:#d9b58b}
.cf-calc .res{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-calc .res div{border-top:1px solid var(--hair-2);padding-top:14px}
.cf-calc .res span{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.cf-calc .res b{display:block;font-family:var(--ff-display);font-weight:400;font-size:clamp(30px,3vw,42px);color:#f6eee2;margin-top:6px;line-height:1}
.cf-calc .res b small{font-size:.45em;color:var(--crema);margin-left:4px}
.cf-tip{display:flex;gap:16px;margin-top:34px;font-size:14.5px;line-height:1.75;color:var(--dim);max-width:60ch}
.cf-tip svg{flex:none;width:22px;height:22px;color:var(--crema);margin-top:2px}
.cf-note{font-size:12px;color:var(--mute);margin-top:22px}

/* apresentação final */
.cf-final{background:radial-gradient(ellipse 50% 60% at 50% 30%,#22170e,var(--ink) 70%);text-align:center}
.cf-duo{position:relative;height:min(70vh,700px);margin:clamp(40px,6vw,80px) auto 0;display:flex;justify-content:center;align-items:flex-start;gap:clamp(20px,5vw,90px);perspective:1800px}
.cf-duo .cf-bag{position:relative;height:100%;opacity:1;animation:cfFloat 7s ease-in-out infinite}
.cf-duo .cf-bag.back{animation-delay:-3.5s}
@keyframes cfFloat{0%,100%{transform:translate3d(0,0,0) rotateY(-3deg)}50%{transform:translate3d(0,-14px,0) rotateY(1deg)}}
.cf-duo .cf-bag .refl{opacity:.12}
.cf-forms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-width:820px;margin:clamp(140px,16vw,220px) auto 0;background:var(--hair-2);border:1px solid var(--hair-2)}
.cf-forms>div{background:var(--ink);padding:38px 34px;text-align:left;display:grid;grid-template-columns:52px 1fr;gap:22px;align-items:start}
.cf-forms svg{width:46px;height:46px;color:var(--crema)}
.cf-forms h3{font-family:var(--ff-display);font-weight:400;font-size:26px;color:var(--txt);line-height:1.15}
.cf-forms p{font-size:14.5px;line-height:1.7;margin-top:8px}
.cf-final .acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:54px}

/* créditos finais */
.cf-credits{background:#000;text-align:center;padding:clamp(130px,14vw,200px) 0}
.cf-credits .ttl{font-family:var(--ff-display);font-size:clamp(34px,4vw,56px);letter-spacing:.24em;text-transform:uppercase;color:#f6eee2;margin:0 0 14px}
.cf-credits .kick{font-size:12px;letter-spacing:.38em;text-transform:uppercase;color:var(--mute)}
.cf-roll{display:grid;gap:22px;max-width:760px;margin:80px auto 0}
.cf-roll div{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:baseline;opacity:0;transform:translateY(18px);transition:opacity 1.2s ease,transform 1.4s var(--cine);transition-delay:calc(var(--i)*.09s)}
.cf-roll.in div{opacity:1;transform:none}
.cf-roll dt{text-align:right;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.cf-roll dd{text-align:left;font-family:var(--ff-display);font-size:clamp(17px,1.4vw,21px);color:var(--txt)}
.cf-sign{display:flex;justify-content:center;align-items:center;gap:clamp(30px,6vw,80px);margin-top:100px}
.cf-sign img{height:74px;width:auto;opacity:.9}
.cf-sign i{width:1px;height:70px;background:var(--hair)}
.cf-credits .fin{font-family:var(--ff-display);font-style:italic;font-size:22px;color:var(--crema);margin-top:80px}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .cf-pkg{height:300vh}
  .cf-pkg .grid{grid-template-columns:1fr;grid-template-rows:62% 38%}
  .cf-bag{height:min(50vh,520px)}
  .cf-call{display:none}
  .cf-states{max-width:none;padding:0 28px}
  .cf-st{left:28px;right:28px}
  .cf-st{top:0;transform:translate3d(0,30px,0)}
  .stage[data-stage="1"] .s1,.stage[data-stage="2"] .s2,.stage[data-stage="3"] .s3{transform:none}
  .cf-st h2{font-size:clamp(34px,7vw,52px)}
  .cf-st .lede{font-size:15px;margin-top:14px}
  .cf-progress{display:none}
  .cf-pkg .cone{left:50%}
  .cf-pedra .grid,.cf-sabor .grid,.cf-fam .head{grid-template-columns:1fr}
  .cf-arch{max-width:380px}
  .cf-producer{justify-self:start}
  .cf-stats{grid-template-columns:1fr 1fr}
  .cf-stats>div:nth-child(3){border-left:0;padding-left:0}
  .cf-stats>div:nth-child(n+3){margin-top:26px}
  .cf-tl::before,.cf-tl::after{left:0}
  .cf-tl .it{grid-template-columns:1fr;padding:26px 0 26px 30px}
  .cf-tl .y{text-align:left;padding:0}
  .cf-tl .d{padding-left:0;margin-top:14px}
  .cf-tl .d::before{left:-35px;top:-38px}
  .cf-spec{grid-template-columns:1fr 1fr}
  .cf-spec>div:nth-child(3){border-left:0}
  .cf-spec>div:nth-child(n+3){border-top:1px solid var(--hair-2)}
  .cf-ritual::before{background:linear-gradient(0deg,rgba(5,4,3,.97) 0%,rgba(5,4,3,.85) 55%,rgba(5,4,3,.35) 100%)}
}
@media (max-width:600px){
  .cf-hero .vid{top:0;left:-3%;right:auto;bottom:auto;width:106%;height:64%;object-position:68% 50%}
  .cf-st{left:20px;right:20px}
  .cf-card{font-size:11px;letter-spacing:.3em;gap:12px;margin-bottom:26px}
  .cf-hero::before{background:linear-gradient(0deg,#060403 0%,#060403 36%,rgba(6,4,3,.55) 52%,rgba(6,4,3,0) 70%),linear-gradient(180deg,rgba(6,4,3,.5),transparent 22%)}
  .cf-hero .hc{bottom:max(84px,12vh)}
  .cf-title .l1{letter-spacing:.8em}
  .cf-hero .cf-sub{font-size:14.5px}
  .cf-hero .acts .cf-btn{flex:1 1 100%;justify-content:center}
  .cf-hero .credit .wrap>span:last-child{display:none}
  .cf-pkg .grid{grid-template-rows:60% 40%}
  .cf-bag{height:min(46vh,440px)}
  .cf-states{padding:0 20px}
  .cf-pkg .word{font-size:46vw}
  .cf-duo{height:min(44vh,330px);gap:12px}
  .cf-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cf-tabs::-webkit-scrollbar{display:none}
  .cf-tabs button{flex:none}
  .cf-forms{grid-template-columns:1fr;margin-top:120px}
  .cf-forms>div{padding:28px 22px}
  .cf-final .acts .cf-btn{flex:1 1 100%;justify-content:center}
  .cf-roll div{grid-template-columns:1fr;gap:6px}
  .cf-roll dt,.cf-roll dd{text-align:center}
  .cf-sign img{height:54px}
  .cf-tabs button{padding:12px 12px 14px;font-size:11px;letter-spacing:.14em}
  .cf-tabs button::after{left:12px;right:12px}
  .cf-calc .res b{font-size:30px}
  .cf-inter .big{letter-spacing:.3em}
}
@media (prefers-reduced-motion:reduce){
  .cf-grain,.cf-intro{display:none!important}
  .cf-hero .vid{opacity:1}
  .ch>i,.cf-inter .big,.cf-inter .words span{transition:none!important;opacity:1!important;transform:none!important;filter:none!important;letter-spacing:.04em}
  .cf-bag{opacity:1}
}

/* celular (09/11/2026): o link cafenegreiros.com.br, ao lado do logo, passava da borda e era cortado */
@media (max-width:600px){
  .cf-producer{flex-direction:column;align-items:flex-start;gap:18px}
  .cf-producer p{max-width:none}
  .cf-producer .cf-link{letter-spacing:.14em}
}