:root{
  --lav1:#FDF7F4; --lav2:#F7E4E4; --lav3:#EFC6D6; --lav4:#D9A6D2;
  --offwhite:#FAF5F0; --warm:#EDE1E1;
  --wine:#451224; --wine-bg:#461626; --black:#0F0509;
  --grape:#8E2F70; --blush:#D6ABB4; --cream:#EDE1E1;
  --display:"Abril",Georgia,"Times New Roman",serif;
  --body:"Averta","Helvetica Neue",Arial,sans-serif;
  --black-face:"AvertaBlack","Averta","Helvetica Neue",Arial,sans-serif;
  --voga:"Voga","Abril",Georgia,serif;
  --r-card:20px; --r-pill:999px; --rule-c:rgba(69,18,36,.22);
  --gut:clamp(20px,5vw,72px);
  --grain:url("grao.jpg");
  --ondas:url("ondas.jpg");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--offwhite);color:var(--wine);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
p{margin:0 0 1.15em}
a{color:inherit}
img{display:block;max-width:100%}


.band{padding:clamp(72px,11vw,140px) var(--gut);position:relative;overflow:hidden}
.band--wine{padding-block:clamp(64px,8.5vw,108px)}
.band--lav{background:linear-gradient(153deg,var(--lav1) 0%,var(--lav2) 42%,var(--lav3) 76%,var(--lav4) 100%)}
.band--warm{background:var(--warm)}
.band--off{background:var(--offwhite)}
.band--wine{background:var(--wine-bg);color:var(--cream);--rule-c:rgba(237,225,225,.28)}
.band--black{background:var(--black);color:var(--cream);--rule-c:rgba(237,225,225,.22)}
.inner{max-width:1160px;margin:0 auto;position:relative;z-index:1}

.eyebrow{font-family:var(--black-face);font-weight:900;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 22px;color:var(--grape)}
.band--wine .eyebrow,.band--black .eyebrow{color:var(--blush)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,8vw,5.6rem);line-height:.97;
  letter-spacing:-.024em;margin:0 0 26px;text-wrap:balance}
h1 em{font-style:italic;color:var(--grape)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5vw,3.3rem);line-height:1.06;
  letter-spacing:-.018em;margin:0 0 20px;text-wrap:balance}
h3{font-family:var(--display);font-weight:700;font-size:1.28rem;line-height:1.22;margin:0 0 11px}
.lede{font-size:clamp(1.04rem,1.9vw,1.24rem);line-height:1.58;max-width:48ch;margin:0 0 30px;
  color:color-mix(in srgb,var(--wine) 82%,transparent)}
.band--wine .lede,.band--black .lede{color:color-mix(in srgb,var(--cream) 84%,transparent)}
.lede em{font-style:italic;font-weight:800}

/* topo */
.navwrap{background:linear-gradient(153deg,var(--lav1) 0%,var(--lav2) 60%)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px var(--gut) 0;max-width:1160px;margin:0 auto}
.mark{font-family:var(--display);font-weight:700;font-size:1.36rem;letter-spacing:-.01em;text-decoration:none}
.navlinks{display:flex;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap;align-items:center}
.navlinks a{font-family:var(--black-face);font-weight:900;font-size:.6rem;letter-spacing:.17em;
  text-transform:uppercase;text-decoration:none;opacity:.72}
.navlinks a:hover{opacity:1;color:var(--grape)}
.navlinks a.on{opacity:1;color:var(--grape)}

/* abertura de matéria */
.sechead{margin:0 0 clamp(38px,5vw,58px)}
.sechead .eyebrow{margin-bottom:15px}
.sechead-row{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(20px,4vw,62px);align-items:start;border-top:2px solid var(--rule-c);
  padding-top:clamp(20px,2.6vw,30px)}
.sechead-row h2{margin:0}
.sechead-aside{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:7px}
.sechead-aside .lede{margin:0;max-width:44ch;font-size:1.02rem}
@media (max-width:900px){.sechead-row{grid-template-columns:1fr;gap:18px}.sechead-aside{padding-top:0}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr);gap:clamp(26px,5vw,64px);align-items:end}
.heroside{border-left:2px solid var(--rule-c);padding-left:clamp(20px,2.5vw,30px)}
.heroside p{font-size:.97rem;line-height:1.56;margin:0 0 1em;opacity:.84}
.heroside p:last-child{margin:0}

/* a trajetória — oito verbos */
.verbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.6vw,22px);
  border-top:2px solid var(--rule-c);padding-top:clamp(26px,3vw,38px)}
.vb{font-family:var(--display);font-weight:400;font-size:clamp(1.85rem,4.4vw,3.05rem);
  line-height:1.08;letter-spacing:-.022em;color:var(--lav1)}
.vs{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.8rem);
  color:var(--blush);opacity:.65;line-height:1}
.loop{display:flex;align-items:center;gap:14px;margin:clamp(28px,3.4vw,40px) 0 0;
  font-family:var(--black-face);font-weight:900;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blush)}
.loop::before{content:"";flex:none;width:46px;height:2px;background:currentColor}

/* pêndulo e polvo */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(22px,3vw,34px)}
.du{border-radius:var(--r-card);padding:clamp(28px,3.4vw,40px);border:1px solid rgba(69,18,36,.13);background:var(--lav1)}
.du--bad{background:transparent;border-style:dashed;border-color:rgba(69,18,36,.3)}
.du .mark2{font-family:var(--black-face);font-weight:900;font-size:.57rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grape);margin:0 0 12px}
.du--bad .mark2{color:var(--wine);opacity:.5}
.du h3{font-size:1.9rem;font-weight:400;margin-bottom:14px;letter-spacing:-.015em}
.du p{font-size:.95rem;line-height:1.56;margin:0;opacity:.84}

/* ferramentas */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:30px 40px}
.tl{border-top:2px solid var(--rule-c);padding-top:16px}
.tl h4{font-family:var(--black-face);font-weight:900;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grape);margin:0 0 12px}
.tl p{font-size:.93rem;line-height:1.54;margin:0;opacity:.84}

/* cultura pop */
.pop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);gap:clamp(30px,5vw,66px);align-items:start}
.popl{display:flex;flex-direction:column;gap:26px}
.pl{border-left:2px solid var(--blush);padding-left:22px}
.pl b{display:block;font-family:var(--display);font-weight:400;font-size:1.28rem;
  line-height:1.26;margin-bottom:8px;color:var(--lav1)}
.pl span{font-size:.92rem;line-height:1.54;opacity:.82}

/* princípios — seção curta com um exemplo */
.demo{border:2px dashed var(--rule-c);border-radius:var(--r-card);
  padding:clamp(26px,3.6vw,44px) clamp(22px,3.4vw,42px);position:relative}
.demo .tag{position:absolute;top:-10px;left:clamp(20px,3vw,36px);background:var(--lav2);
  font-family:var(--black-face);font-weight:900;font-size:.53rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grape);padding:3px 12px;border-radius:var(--r-pill)}
.demo .body{font-size:.96rem;line-height:1.6;opacity:.7;margin:0;max-width:56ch}
.demo .axiom{margin-top:clamp(26px,3vw,38px)}

/* oráculo */
.orac{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}

.soon{display:inline-flex;align-items:center;gap:9px;font-family:var(--black-face);font-weight:900;
  font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;color:var(--blush);
  border:2px solid currentColor;border-radius:var(--r-pill);padding:12px 22px}

/* fechamento */
.close{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(28px,5vw,60px);align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--black-face);font-weight:900;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:17px 30px;border-radius:var(--r-pill);background:var(--wine);color:var(--lav1);
  transition:transform .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px);background:var(--grape)}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:4px}
.band--wine :focus-visible,.band--black :focus-visible{outline-color:var(--blush)}

/* axioma — frase da marca aparecendo no meio do texto */
.axiom{margin:clamp(34px,4.2vw,56px) auto 0;max-width:28ch;text-align:center}
.axiom::before{content:"";display:block;width:48px;height:2px;background:var(--grape);margin:0 auto 18px}
.axiom p{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.45rem,3.2vw,2.25rem);line-height:1.18;letter-spacing:-.016em;margin:0;text-wrap:balance}
.band--wine .axiom::before,.band--black .axiom::before{background:var(--blush)}
.axiom--wide{max-width:32ch}

.foot{background:var(--black);color:var(--cream);padding:clamp(48px,6vw,70px) var(--gut);position:relative}
.foot .inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
.foot .name{font-family:var(--voga);font-weight:500;font-size:clamp(1.9rem,4vw,2.5rem);line-height:1;margin:0 0 12px}
.foot .method{font-family:var(--black-face);font-weight:900;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blush);margin:0;line-height:1.8}
.foot .back{font-family:var(--black-face);font-weight:900;font-size:.6rem;letter-spacing:.17em;
  text-transform:uppercase;text-decoration:none;opacity:.8}
.foot .back:hover{opacity:1;color:var(--blush)}

@media (max-width:900px){.hero,.pop,.orac,.close{grid-template-columns:1fr}
  .heroside{border-left:0;border-top:2px solid var(--rule-c);padding:22px 0 0}
  .orac .shot{max-width:280px}}

/* por que ele existe */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:30px 44px}
.wy{border-top:2px solid var(--rule-c);padding-top:16px}
.wy h4{font-family:var(--black-face);font-weight:900;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blush);margin:0 0 12px}
.wy p{font-size:.94rem;line-height:1.56;margin:0;opacity:.84}

/* o que fica registrado */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:clamp(24px,3vw,40px)}
.tr{border-top:2px solid var(--rule-c);padding-top:18px}
.tr b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.6vw,3rem);
  line-height:.9;letter-spacing:-.03em;color:var(--grape);margin-bottom:12px}
.tr h3{margin-bottom:9px}
.tr p{font-size:.93rem;line-height:1.54;margin:0;opacity:.82}
.vb.dim{opacity:.3}

/* ---------- ajustes do diretor de arte (ata de 27/09) ---------- */
/* campo: nada chapado; grao do Will sobre tudo, multiply no claro, clarear no escuro */
.band--warm{background:radial-gradient(120% 90% at 88% 0%,var(--lav2) 0%,transparent 58%),linear-gradient(172deg,var(--warm) 0%,#E7D4D6 100%)}
.band--off{background:radial-gradient(110% 80% at 8% 0%,#FFFFFF 0%,transparent 62%),linear-gradient(176deg,var(--offwhite) 0%,var(--warm) 100%)}
.band--wine{background:radial-gradient(90% 70% at 18% 0%,rgba(214,171,180,.16),transparent 62%),var(--ondas) center/cover,var(--wine-bg)}
.band--black,footer.foot{background:linear-gradient(180deg,rgba(15,5,9,.30),rgba(15,5,9,.58)),var(--ondas) center/cover,var(--wine-bg);color:var(--cream)}
footer.foot{position:relative;overflow:hidden}
.band::after,footer.foot::after,.navwrap::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:600px 600px;
  mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.band--wine::after,.band--black::after,footer.foot::after{filter:invert(1);mix-blend-mode:screen;opacity:.13}
.navwrap{position:relative}
.nav,footer.foot .inner{position:relative;z-index:1}
/* o nome Jufi Lima e sempre Voga, e maior que o entorno */
.mark{font-family:var(--voga);font-weight:500;font-size:1.95rem;letter-spacing:0;line-height:1}
/* foto que sangra como campo, nunca dentro de retangulo */
.bleed{position:absolute;top:0;bottom:0;width:44%;z-index:0;overflow:hidden}
.bleed--left{left:0;-webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 100%);mask-image:linear-gradient(90deg,#000 58%,transparent 100%)}
.bleed img{width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:saturate(1.06)}
.bleed .grade{position:absolute;inset:0;background:var(--wine-bg);mix-blend-mode:multiply;opacity:.14}
.spacer{min-height:1px}
@media (min-width:901px){.close{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
/* recorte em PNG sobre a textura */
.cutout{display:flex;justify-content:center;align-items:center}
.cutout img{width:auto;max-width:100%;max-height:min(62vh,520px)}
@media (max-width:900px){
  .bleed{position:relative;width:auto;height:min(96vw,560px);margin:calc(-1*clamp(72px,11vw,140px)) calc(-1*var(--gut)) 34px;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
  .spacer{display:none}
  .cutout img{max-height:380px}
}
.trio--seis{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.more{display:inline-flex;gap:8px;margin-top:18px;font-family:var(--black-face);font-weight:900;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--blush)}

/* rodapé igual ao da home */
.footgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,.7fr);gap:clamp(30px,4vw,56px)}
.sig .name{font-family:var(--voga);font-weight:500;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-.02em;margin:0 0 14px}
.sig .method{font-family:var(--black-face);font-weight:900;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blush);margin:0 0 20px;line-height:1.8}
.sig p{font-size:.92rem;opacity:.72;max-width:36ch;margin:0}
.fcol h4{font-family:var(--black-face);font-weight:900;font-size:.57rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blush);margin:0 0 16px}
.fcol a{display:block;font-size:.94rem;text-decoration:none;opacity:.8;margin-bottom:11px}
.fcol a:hover{opacity:1;color:var(--blush)}
.rule{margin-top:clamp(44px,5vw,64px);padding-top:22px;border-top:1px solid rgba(237,225,225,.18);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.76rem;opacity:.56}
@media (max-width:900px){.footgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footgrid{grid-template-columns:1fr}}