/* =========================================================
   NECI ESSENCIAL — página do produto
   Vinho profundo (mesma direção da apresentação comercial),
   com a tipografia, os botões e o vidro do site.
   ========================================================= */

.pg-ess{ color:var(--on-dark); background:#2A0707; }
/* camada fixa: o vinho e os banhos de cor não esticam ao longo de 10 mil pixels */
.pg-ess::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -8%, rgba(192,86,58,.26), transparent 58%),
    radial-gradient(100% 70% at 4% 34%, rgba(23,80,110,.24), transparent 60%),
    radial-gradient(90% 60% at 92% 96%, rgba(217,154,20,.12), transparent 62%),
    linear-gradient(178deg,#2A0707 0,#3A0A0A 46%,#2A0707 78%,#1E0505 100%);
}

/* ---------- títulos: frases longas pedem outro tratamento que o cartaz ---------- */
.pg-ess .h-poster{
  text-transform:none; letter-spacing:-.005em; line-height:1.08;
  font-weight:200; font-size:clamp(1.85rem,3.5vw,3.15rem);
  max-width:22ch;
}
.pg-ess .sec--formatura .h-poster{ max-width:24ch; }
.pg-ess .sechead{ max-width:none; }

/* o grão da marca continua, só que claro sobre o vinho */
.pg-ess .grain{ opacity:.5; mix-blend-mode:soft-light; }

/* ---------- barra: vidro escuro, já materializada ---------- */
.pg-ess .nav__bar::before{
  background:rgba(42,7,7,.52);
  border-color:rgba(246,239,221,.16);
  box-shadow:0 1px 0 rgba(246,239,221,.1) inset, 0 18px 40px -26px rgba(0,0,0,.9);
}
.pg-ess .nav__links a{ color:var(--on-dark-soft); border-bottom-color:rgba(246,239,221,.1); }
.pg-ess .nav__links a:hover{ color:var(--on-dark); }
.pg-ess .langtext{ color:var(--on-dark-faint); }
.pg-ess .langtext:hover{ color:var(--on-dark); }
.pg-ess .langpill{
  color:var(--on-dark-soft); background:rgba(246,239,221,.1);
  border-color:rgba(246,239,221,.24);
}
.pg-ess .langpill:hover{ color:var(--on-dark); background:rgba(246,239,221,.18); }
.pg-ess .burger{ background:rgba(246,239,221,.1); border-color:rgba(246,239,221,.24); }
.pg-ess .burger i{ background:var(--on-dark); }
.pg-ess .nav__wa{ background:var(--cream); color:var(--wine); }
.pg-ess .nav__wa:hover{ background:#fff; }
.pg-ess .nav__vip{
  color:var(--on-dark); background:rgba(246,239,221,.1);
  border-color:rgba(246,239,221,.26);
}
.pg-ess .nav__vip:hover{ background:rgba(246,239,221,.2); }

/* ---------- textos claros ---------- */
.pg-ess .h-poster{ color:var(--on-dark); }
.pg-ess .h-poster em{ font-style:normal; color:var(--gold); }
.pg-ess .eyebrow{ color:var(--on-dark-faint); }
.pg-ess .kicker{ color:var(--on-dark-soft); }
.pg-ess .kicker i{ color:var(--terra); }
.pg-ess .sechead__lead{ color:var(--on-dark-soft); }
.pg-ess .script{ color:var(--gold); }
.pg-ess .btn--solid{ background:var(--cream); color:var(--wine); }
.pg-ess .btn--line{ color:var(--on-dark); border-bottom-color:rgba(246,239,221,.4); }
.pg-ess .btn--line:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.pg-ess .glass{
  --g-bg:rgba(246,239,221,.06); --g-brd:rgba(246,239,221,.16);
  box-shadow:0 1px 0 rgba(246,239,221,.14) inset, 0 26px 60px -44px rgba(0,0,0,.9);
}
.pg-ess .foot{ background:none; padding-top:clamp(60px,9vh,110px); }
.pg-ess .foot::before{ display:none; }
/* seções mais próximas: a página é uma leitura corrida, não um catálogo */
.pg-ess .sec{ padding:clamp(42px,5.2vh,66px) 0; position:relative; }
.pg-ess .sechead{ margin-bottom:clamp(24px,3vw,36px); }
.pg-ess .sec--formatura{ padding-block:clamp(50px,6.5vh,84px); }
.pg-ess .sec--essCta{ padding-top:clamp(34px,4.4vh,56px); padding-bottom:clamp(18px,2.4vh,32px); }
.pg-ess .foot{ padding-top:clamp(34px,5vh,64px); }

/* =========================================================
   HERO
   ========================================================= */
/* A capa é um slide que se adapta sozinha à ALTURA do viewport: cada tamanho
   tem um teto em vh. Os pisos são generosos — a ideia é caber com folga, não
   espremer. Em telas muito baixas o conteúdo respira e rola um pouco. */
.pg-ess .ess-hero{
  height:auto; min-height:100svh; display:flex; align-items:center;
  padding:clamp(112px,13.5vh,186px) 0 clamp(48px,6.4vh,88px);
}
.pg-ess .ess-hero__text{ justify-self:start; margin-right:0; max-width:64ch; }
.ess-hero .wrap{ position:relative; z-index:1; }

.ess-lace{
  position:absolute; inset:0 0 auto 0; height:clamp(120px,17vh,240px);
  overflow:hidden; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(#000 34%,transparent 96%);
          mask-image:linear-gradient(#000 34%,transparent 96%);
}
.ess-lace img{
  width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 18%;
  opacity:.24; mix-blend-mode:screen;
}

.ess-h1{
  margin:min(1.1rem,2vh) 0 0; display:flex; flex-direction:column; align-items:flex-start;
  font-family:var(--f-display); font-weight:200;
  font-size:min(clamp(2rem,5.4vw,4.4rem), 7vh);
  line-height:1.04; letter-spacing:-.012em; color:var(--on-dark);
}
.ess-h1 span{ display:block; }
.ess-h1__gold{
  font-weight:500;
  background:linear-gradient(96deg,#F0C579 6%,#D99A14 46%,#C0563A 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* background-clip:text corta a perna do "g": a caixa precisa sobrar embaixo */
  padding-bottom:.16em; margin-bottom:-.16em;
}
.ess-lead{
  margin:min(1.5rem,2.4vh) 0 0; max-width:54ch;
  font-size:min(clamp(1rem,1.45vw,1.18rem), 2.1vh);
  line-height:1.6; color:var(--on-dark-soft);
}

/* dois planos com o mesmo peso, lado a lado */
.ess-price{
  margin-top:min(clamp(24px,4vh,44px), 3.4vh);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px); max-width:780px;
}
.pg-ess .ess-hero .hero__cta{ margin-top:min(1.8rem,2.8vh); }

/* No celular os planos continuam lado a lado — empilhados custavam ~330px de
   altura e jogavam os botões para fora da primeira tela. */
@media (max-width:620px){
  .pg-ess .ess-hero{ padding-top:clamp(104px,13.5vh,148px); padding-bottom:clamp(40px,5.6vh,68px); }
  .ess-price{ gap:10px; }
  .ess-price__lab{
    flex-direction:column; align-items:center; gap:.5em;
    margin-bottom:.6em; font-size:.56rem; letter-spacing:.13em;
  }
  .ess-price__lab span{ padding:.32em .66em; font-size:.94em; }
  .ess-price__cur{ font-size:1rem; }
  .ess-price__per{ font-size:.8rem; }
  .ess-price__note{ font-size:.76rem; line-height:1.45; }
}

.ess-price__opt{
  padding:min(clamp(16px,2.1vw,26px), 2.6vh) clamp(14px,2vw,26px) min(clamp(14px,1.9vw,22px), 2.3vh);
  border:1px solid var(--hair-dark); border-radius:var(--g-r);
  background:rgba(246,239,221,.04);
  text-align:center;   /* conteúdo do cartão centrado */
}
.ess-price__opt--hi{
  border-color:rgba(217,154,20,.5);
  background:linear-gradient(160deg, rgba(217,154,20,.14), rgba(217,154,20,.04));
}
.ess-price__lab{
  margin:0 0 .7em; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--f-display); font-weight:600; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--on-dark-faint);
}
.ess-price__opt--hi .ess-price__lab{ color:var(--gold); }
.ess-price__lab span{
  padding:.36em .8em; border-radius:999px; letter-spacing:.14em; font-size:.92em;
  background:rgba(217,154,20,.2); border:1px solid rgba(217,154,20,.5); color:var(--gold);
}
.ess-price__main{ display:flex; align-items:baseline; justify-content:center; gap:.12em; color:var(--on-dark); }
.ess-price__cur{ font-family:var(--f-display); font-weight:300; font-size:1.25rem; opacity:.8; }
.ess-price__main b{
  font-family:var(--f-display); font-weight:200; line-height:1;
  font-size:min(clamp(2.3rem,5.2vw,4.2rem), 7.2vh); letter-spacing:-.02em;
}
.ess-price__per{ font-family:var(--f-display); font-weight:300; font-size:1rem; color:var(--on-dark-soft); }
.ess-price__note{ margin:.7em 0 0; font-size:.88rem; color:var(--on-dark-soft); }
.ess-price__opt--hi .ess-price__note{ color:var(--on-dark); }

/* =========================================================
   PARA QUEM É
   ========================================================= */
.ess-moment{ max-width:70ch; margin-bottom:clamp(30px,4.5vh,50px); }
.ess-moment p{ margin:0 0 1em; color:var(--on-dark-soft); font-size:clamp(1rem,1.3vw,1.1rem); }
.ess-moment b{ color:var(--on-dark); }

.ess-fit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); }
@media (max-width:820px){ .ess-fit{ grid-template-columns:1fr; } }
.ess-fit__col{ padding:clamp(22px,2.8vw,32px); border-radius:var(--g-r); }
.ess-fit__lab{
  margin:0 0 1em; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.64rem;
}
.ess-fit__col--yes .ess-fit__lab{ color:var(--gold); }
.ess-fit__col--no .ess-fit__lab{ color:var(--on-dark-faint); }
.ess-fit__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:.75em; }
.ess-fit__col li{
  position:relative; padding-left:1.5em;
  color:var(--on-dark-soft); font-size:.98rem; line-height:1.5;
}
.ess-fit__col li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px; border-radius:50%;
}
.ess-fit__col--yes li::before{ background:var(--gold); }
.ess-fit__col--no li::before{ background:none; border:1px solid var(--on-dark-faint); border-radius:1px; }
.ess-fit__foot{
  margin:1.4em 0 0; padding-top:1.1em; border-top:1px solid var(--hair-dark);
  font-size:.88rem; color:var(--on-dark-faint); line-height:1.55;
}

/* ---------- o teto do formato: os dois números que definem a saída ---------- */
.ess-teto{
  margin-top:clamp(16px,2.4vh,26px);
  padding:clamp(22px,2.8vw,32px) clamp(22px,3vw,36px);
  border:1px solid rgba(217,154,20,.42); border-radius:var(--g-r);
  background:linear-gradient(150deg, rgba(217,154,20,.13), rgba(217,154,20,.035));
}
.ess-teto__lab{
  margin:0 0 1em; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:var(--gold);
}
.ess-teto__grid{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em clamp(20px,3vw,44px);
}
.ess-teto__num{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em; }
.ess-teto__num b{
  font-family:var(--f-display); font-weight:200; line-height:1;
  font-size:min(clamp(2.1rem,4.4vw,3.4rem), 6vh);
  letter-spacing:-.02em; color:var(--on-dark);
}
.ess-teto__num span{
  font-size:.92rem; color:var(--on-dark-soft); line-height:1.35;
  white-space:nowrap;   /* "de faturamento no mês" não quebra em duas linhas */
}
.ess-teto__ou{
  font-family:var(--f-display); font-weight:300; font-size:1.05rem;
  text-transform:uppercase; letter-spacing:.2em; color:var(--gold);
}
.ess-teto__foot{
  margin:1.3em 0 0; padding-top:1.1em; border-top:1px solid rgba(246,239,221,.16);
  font-size:.95rem; line-height:1.6; color:var(--on-dark-soft); max-width:74ch;
}
.ess-teto__foot b{ color:var(--on-dark); }
@media (max-width:620px){
  .ess-teto__grid{ flex-direction:column; align-items:flex-start; gap:.9em; }
  .ess-teto__num{ flex-direction:column; align-items:flex-start; gap:.15em; }
  .ess-teto__num span{ white-space:normal; }
}
.ess-table td i{ font-style:normal; color:var(--on-dark-faint); font-weight:400; }

.ess-quote{
  margin:clamp(24px,3.4vh,38px) 0 0; padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);
  border-left:2px solid var(--gold); border-radius:0 var(--g-r) var(--g-r) 0;
  background:rgba(246,239,221,.05);
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.4; color:var(--on-dark);
  /* sem max-width: a frase ocupa a largura toda e cabe em uma linha no desktop */
}

/* =========================================================
   A MÁQUINA
   ========================================================= */
.ess-step__n{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font-family:var(--f-display); font-weight:500; font-size:.74rem;
  color:var(--wine); background:var(--gold); margin-bottom:.9em;
}

.ess-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); }
@media (max-width:820px){ .ess-duo{ grid-template-columns:1fr; } }
.ess-grid4{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,24px); }
@media (max-width:820px){ .ess-grid4{ grid-template-columns:1fr; } }

.ess-card{ padding:clamp(16px,2vw,24px); border-radius:var(--g-r); }
.ess-card__lab{
  margin:0 0 .7em; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.6rem; color:var(--gold);
}
.ess-card p{ margin:0; color:var(--on-dark-soft); font-size:.9rem; line-height:1.5; }
.ess-card p b{ color:var(--on-dark); }
.ess-card__foot{
  margin-top:.9em !important; padding-top:.8em; border-top:1px solid var(--hair-dark);
  font-size:.8rem !important; color:var(--on-dark-faint) !important;
}
/* a régua dos entregáveis fica em 4 colunas quando cabe */
@media (min-width:1080px){ .ess-grid4{ grid-template-columns:repeat(4,1fr); } }

.ess-note{
  margin-top:clamp(16px,2.4vh,26px); padding:clamp(20px,2.6vw,30px);
  border:1px dashed rgba(246,239,221,.24); border-radius:var(--g-r);
}
.ess-note__lab{
  margin:0 0 .8em; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; color:var(--terra);
}
.ess-note p{ margin:0; color:var(--on-dark-soft); font-size:.96rem; line-height:1.6; }

/* ---------- a semana ---------- */
.ess-week{
  margin-top:clamp(18px,2.6vh,30px); padding:clamp(22px,2.8vw,32px);
  border:1px solid var(--hair-dark); border-radius:var(--g-r);
  background:rgba(246,239,221,.035);
}
.ess-week__lab{
  margin:0 0 1.2em; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.64rem; color:var(--on-dark-faint);
}
.ess-week__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,32px); }
@media (max-width:820px){ .ess-week__grid{ grid-template-columns:1fr; } }
.ess-week__grid p{ margin:.7em 0 0; color:var(--on-dark-soft); font-size:.94rem; line-height:1.55; }
.ess-tag{
  display:inline-block; padding:.5em 1.1em; border-radius:999px;
  border:1px solid rgba(246,239,221,.26);
  font-family:var(--f-display); font-weight:500; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.16em; color:var(--on-dark);
}

/* =========================================================
   INVESTIMENTO
   ========================================================= */
.ess-plans{ max-width:640px; }
.ess-toggle{
  display:inline-flex; gap:4px; padding:5px; border-radius:999px;
  border:1px solid var(--hair-dark); background:rgba(246,239,221,.05);
  margin-bottom:clamp(20px,3vh,30px);
}
.ess-toggle__b{
  appearance:none; border:0; cursor:pointer; padding:.72em 1.5em; border-radius:999px;
  background:none; color:var(--on-dark-soft);
  font-family:var(--f-display); font-weight:500; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.16em;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.ess-toggle__b.is-on{ background:var(--cream); color:var(--wine); }
.ess-plan{ animation:essFade .5s var(--ease-out); }
@keyframes essFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.ess-plan__flag{
  display:inline-block; margin:0 0 .9em; padding:.42em 1em; border-radius:999px;
  background:rgba(217,154,20,.16); border:1px solid rgba(217,154,20,.45); color:var(--gold);
  font-family:var(--f-display); font-weight:600; font-size:.6rem;
  text-transform:uppercase; letter-spacing:.18em;
}
.ess-plan__price{ display:flex; align-items:baseline; gap:.16em; color:var(--on-dark); }
.ess-plan__price span{ font-family:var(--f-display); font-weight:300; font-size:1.4rem; opacity:.8; }
.ess-plan__price b{
  font-family:var(--f-display); font-weight:200; line-height:1;
  font-size:clamp(3.4rem,7vw,5.4rem); letter-spacing:-.02em;
}
.ess-plan__price i{
  font-style:normal; font-family:var(--f-display); font-weight:300;
  font-size:1.05rem; color:var(--on-dark-soft); margin-left:.3em;
}
.ess-plan__note{ margin:.9em 0 0; color:var(--on-dark-soft); font-size:.98rem; }
.ess-plan__note b{ color:var(--gold); }

.ess-budget{
  margin-top:clamp(34px,5vh,60px); padding-top:clamp(26px,4vh,44px);
  border-top:1px solid var(--hair-dark);
}
.ess-budget__lab{
  margin:0 0 .8em; font-family:var(--f-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.64rem; color:var(--gold);
}
.ess-budget__intro{ margin:0 0 1.6em; max-width:62ch; color:var(--on-dark-soft); font-size:1rem; }
.ess-table{ width:100%; border-collapse:collapse; }
.ess-table th{
  text-align:left; padding:0 0 .9em; border-bottom:1px solid var(--hair-dark);
  font-family:var(--f-display); font-weight:600; font-size:.6rem;
  text-transform:uppercase; letter-spacing:.18em; color:var(--on-dark-faint);
}
.ess-table td{
  padding:1.05em 0; border-bottom:1px solid rgba(246,239,221,.1);
  color:var(--on-dark-soft); font-size:.98rem; vertical-align:top;
}
.ess-table td:first-child{ color:var(--on-dark); font-weight:500; padding-right:2em; white-space:nowrap; }
.ess-table th:first-child{ width:38%; }
@media (max-width:620px){
  .ess-table td:first-child{ white-space:normal; }
  /* o parentese nao pode partir no meio ("teto / do formato") */
  .ess-table td:first-child i{ white-space:nowrap; }
  .ess-table th, .ess-table td{ font-size:.9rem; }
}
.ess-budget__foot{ margin:1.4em 0 0; max-width:62ch; font-size:.9rem; color:var(--on-dark-faint); line-height:1.6; }

/* =========================================================
   LIMITES
   ========================================================= */
.ess-out{ list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:none; }
.ess-out li{
  position:relative; padding:1.15em 0 1.15em 2em;
  border-bottom:1px solid rgba(246,239,221,.1);
  color:var(--on-dark-soft); font-size:1rem; line-height:1.55;
}
.ess-out li:first-child{ border-top:1px solid rgba(246,239,221,.1); }
.ess-out li::before{
  content:""; position:absolute; left:0; top:1.5em;
  width:11px; height:1px; background:var(--terra);
}
.ess-out b{ color:var(--on-dark); font-weight:600; }
.ess-sale{ margin-top:clamp(24px,3.4vh,40px); padding:clamp(24px,3vw,36px); border-radius:var(--g-r); }
.ess-sale p{ color:var(--on-dark-soft); font-size:1rem; line-height:1.6; }
.ess-sale b{ color:var(--on-dark); }

/* =========================================================
   FORMATURA
   ========================================================= */
.sec--formatura{ text-align:center; }
/* os botões fecham a página no mesmo eixo do texto (flex ignora text-align) */
.pg-ess .sec--formatura .hero__cta{ justify-content:center; margin-top:clamp(22px,3vh,36px); }
.sec--formatura .script{ margin:.2em 0 .1em; }
.sec--formatura .h-poster{ margin-inline:auto; max-width:20ch; }
.ess-formatura{ max-width:64ch; margin:clamp(20px,3vh,32px) auto 0; }
.ess-formatura p{ margin:0 0 1em; color:var(--on-dark-soft); font-size:clamp(1rem,1.35vw,1.12rem); line-height:1.65; }
.ess-formatura b{ color:var(--on-dark); }
.ess-formatura__em{
  margin-top:1.4em !important; font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.2rem,2.2vw,1.8rem) !important; color:var(--gold) !important; line-height:1.35;
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.ess-cta{ text-align:center; }
.ess-cta__l p{ margin:1.1rem auto 0; max-width:52ch; color:var(--on-dark-soft); font-size:clamp(1rem,1.35vw,1.1rem); }
.ess-cta .h-poster{ margin-inline:auto; }
.ess-cta .hero__cta{ justify-content:center; }

/* =========================================================
   NECI ESSENCIAL — camadas visuais
   renda → rede: o fio da renda vira sinapse. Tudo dourado
   sobre vinho, tudo atrás do texto, nada disputa leitura.
   ========================================================= */

/* campo neural: fixo, entre o fundo (::before, z -2) e o conteúdo (z 0) */
/* fundo vivo: campo neural + cérebro, fixos atrás de tudo; a máscara poupa a faixa da renda */
.ess-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent 120px, #000 330px);
          mask-image:linear-gradient(to bottom, transparent 0, transparent 120px, #000 330px); }
#essField{ position:absolute; inset:0; }
/* luz de fundo: o cérebro fica assentado no vinho, não colado por cima */
.ess-bg::before{ content:""; position:absolute; left:61%; top:52%; width:min(80vw,1180px); height:min(80vh,800px);
  translate:-50% -50%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(217,154,20,.085), rgba(192,86,58,.04) 55%, transparent 100%); }
#essBrain{ position:absolute; top:52%; left:61%; translate:-50% calc(-50% + var(--py,0px));
  width:min(72vw,1040px); height:min(74vh,700px); opacity:.30; will-change:translate; }
@media (max-width:880px){ #essBrain{ left:50%; width:96vw; height:48vh; opacity:.24; } .ess-bg::before{ left:50%; width:110vw; height:60vh; } }


/* =========================================================
   A MÁQUINA — linha do tempo contínua
   ========================================================= */
.ess-flow{ position:relative; margin:0 0 clamp(22px,3vh,36px); padding:6px 0; }
.ess-flow__row{
  position:relative; display:grid; grid-template-columns:56px 150px 1fr; align-items:center;
  gap:0 clamp(14px,2vw,26px); min-height:158px; padding:14px 0;
  border-bottom:1px solid rgba(246,239,221,.07);
}
.ess-flow__row:last-child{ border-bottom:0; }
/* o trilho e o nó de cada etapa */
.ess-flow__rail{ position:absolute; left:27px; top:22px; bottom:22px; width:1px;
  background:linear-gradient(rgba(217,154,20,.0), rgba(217,154,20,.42) 8%, rgba(217,154,20,.42) 92%, rgba(217,154,20,0)); }
.ess-flow__spark{ position:absolute; left:-3px; top:0; width:7px; height:7px; border-radius:50%;
  background:#F0C579; box-shadow:0 0 12px 3px rgba(240,197,121,.6); animation:essRail 8.8s linear infinite; }
@keyframes essRail{ 0%{ top:0; opacity:0 } 3%{ opacity:1 } 97%{ opacity:1 } 100%{ top:100%; opacity:0 } }
.ess-flow__row::before{ content:""; grid-column:1; justify-self:center; width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(217,154,20,.6); background:#2A0707; animation:essNode 8.8s var(--ease) infinite; }
.ess-flow__row:nth-child(3)::before{ animation-delay:0s }    /* a 1ª linha é o trilho, a 2ª o viajante */
.ess-flow__row:nth-child(4)::before{ animation-delay:2.2s }
.ess-flow__row:nth-child(5)::before{ animation-delay:4.4s }
.ess-flow__row:nth-child(6)::before{ animation-delay:6.6s }
@keyframes essNode{ 0%,4%{ background:#2A0707; box-shadow:none } 9%{ background:#F0C579; box-shadow:0 0 14px 4px rgba(240,197,121,.45) } 30%,100%{ background:#2A0707; box-shadow:none } }
.ess-flow__vig{ position:relative; height:118px; grid-column:2; }
.ess-flow__vig svg{ position:absolute; fill:none; stroke:#E0C68F; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.ess-flow__txt{ grid-column:3; max-width:58ch; }
.ess-flow__txt h3{ margin:.5em 0 .4em; font-family:var(--f-display); font-weight:500; font-size:clamp(1rem,1.3vw,1.12rem); color:var(--on-dark); }
.ess-flow__txt p{ margin:0; color:var(--on-dark-soft); font-size:.92rem; line-height:1.55; }
/* o criativo viaja da pasta (etapa 1) para o post (etapa 2): um só elemento, uma só animação */
.ess-flow__trav{ position:absolute; left:86px; top:var(--y1,80px); width:30px; height:38px; border-radius:4px; z-index:2;
  background:linear-gradient(160deg,#F6EFDD,#D9C9A6); box-shadow:0 6px 14px rgba(0,0,0,.4);
  animation:essTravel 8.8s var(--ease) infinite; }
.ess-flow__trav::before{ content:""; position:absolute; inset:3px 3px 10px; border-radius:2px; background:linear-gradient(150deg,#C0563A,#7E1B15); }
@keyframes essTravel{
  0%,29%{ top:var(--y1); translate:-46px 4px; opacity:0; rotate:-6deg; }
  33%{ opacity:1; }
  40%{ top:var(--y1); translate:0 -6px; rotate:0deg; }
  52%{ top:var(--y2); translate:0 0; opacity:1; scale:1; }
  56%,100%{ top:var(--y2); translate:0 0; opacity:0; scale:.7; }
}
/* 1 · pasta com duas fotos já dentro */
.ess-v1 .ess-folder{ left:0; top:26px; width:84px; height:64px; }
.ess-v1 .ess-ph{ position:absolute; top:44px; width:22px; height:28px; border-radius:3px; background:linear-gradient(160deg,#F6EFDD,#D9C9A6); box-shadow:0 3px 8px rgba(0,0,0,.35); }
.ess-v1 .ess-ph::before{ content:""; position:absolute; inset:3px 3px 8px; border-radius:2px; background:linear-gradient(150deg,#C0563A,#7E1B15); opacity:.85; }
.ess-v1 .ess-ph--a{ left:14px; rotate:-6deg; } .ess-v1 .ess-ph--b{ left:34px; rotate:4deg; }
/* 2 · o post do Instagram recebe o criativo */
.ess-v2 .ess-post{ left:2px; top:14px; width:52px; height:90px; }
.ess-v2 .ess-post-in{ position:absolute; left:9px; top:24px; width:38px; height:38px; border-radius:3px;
  background:linear-gradient(150deg,#C0563A,#7E1B15); animation:essDock 8.8s var(--ease) infinite; }
.ess-v2 .ess-lines{ position:absolute; left:9px; top:70px; width:24px; height:3px; border-radius:2px; background:rgba(246,239,221,.35); box-shadow:0 7px 0 rgba(246,239,221,.2); }
.ess-v2 .ess-ig{ left:72px; top:30px; width:34px; height:34px; animation:essGlow 8.8s var(--ease) infinite; }
@keyframes essDock{ 0%,51%{ opacity:.18; } 55%,100%{ opacity:1; } }
@keyframes essGlow{ 0%,52%{ opacity:.5; filter:none } 58%{ opacity:1; filter:drop-shadow(0 0 6px rgba(240,197,121,.8)) } 72%,100%{ opacity:.5; filter:none } }
/* 3 · o olho da gestora */
.ess-v3 .ess-eye{ left:4px; top:38px; width:56px; height:38px; transform-origin:50% 50%; animation:essBlink 8.8s var(--ease) infinite; }
.ess-v3 .ess-ok{ position:absolute; left:74px; top:44px; width:26px; height:26px; border-radius:50%; border:1.5px solid #E0C68F; display:grid; place-items:center; animation:essOk 8.8s var(--ease) infinite; }
.ess-v3 .ess-ok svg{ position:static; width:13px; height:13px; stroke-width:2; }
@keyframes essBlink{ 0%,79%,85%,100%{ transform:scaleY(1) } 82%{ transform:scaleY(.08) } }
@keyframes essOk{ 0%,85%{ opacity:.35; background:transparent } 90%,100%{ opacity:1; background:rgba(217,154,20,.22) } }
/* 4 · a inteligência lê o Google Analytics: barras sobem, a linha aponta o produto */
.ess-v4 .ess-bars{ position:absolute; left:2px; bottom:22px; display:flex; align-items:flex-end; gap:6px; height:64px; }
.ess-v4 .ess-bars i{ display:block; width:11px; border-radius:2px 2px 0 0; background:rgba(224,198,143,.32); height:var(--h); transform-origin:bottom; animation:essBar 8.8s var(--ease) infinite; }
.ess-v4 .ess-bars i:nth-child(1){ --h:38% } .ess-v4 .ess-bars i:nth-child(2){ --h:58% } .ess-v4 .ess-bars i:nth-child(3){ --h:46% }
.ess-v4 .ess-bars i:nth-child(4){ --h:92%; background:#D99A14 } .ess-v4 .ess-bars i:nth-child(5){ --h:66% }
@keyframes essBar{ 0%,3%{ transform:scaleY(.25) } 15%,92%{ transform:scaleY(1) } 100%{ transform:scaleY(.25) } }
.ess-v4 .ess-pin{ position:absolute; left:52px; top:8px; width:22px; height:22px; border-radius:50%; background:#D99A14; display:grid; place-items:center; animation:essPin 8.8s var(--ease) infinite; }
.ess-v4 .ess-pin svg{ position:static; width:12px; height:12px; stroke:#3E0B0B; stroke-width:2.2 }
@keyframes essPin{ 0%,14%{ opacity:0; translate:0 6px } 20%,92%{ opacity:1; translate:0 0 } 100%{ opacity:0 } }
.ess-v4 .ess-ga{ position:absolute; left:92px; bottom:24px; width:44px; height:44px; }
@media (max-width:620px){
  /* celular: vinheta em cima, texto embaixo — o texto fica com a largura inteira */
  .ess-flow__row{ grid-template-columns:28px 1fr; grid-template-rows:auto auto; min-height:0; padding:18px 0 20px; row-gap:2px; }
  .ess-flow__row::before{ grid-row:1; align-self:start; margin-top:38px; }
  .ess-flow__vig{ grid-column:2; grid-row:1; height:96px; scale:.82; transform-origin:left top; margin-bottom:-14px; }
  .ess-flow__txt{ grid-column:2; grid-row:2; max-width:none; }
  .ess-flow__txt h3{ margin-top:.2em; }
  .ess-flow__rail{ left:13px; }
  .ess-flow__trav{ left:50px; width:26px; height:32px; }
  .ess-card--cat .ess-story{ margin:0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .ess-flow__spark,.ess-flow__trav{ display:none; }
  .ess-flow__row::before,.ess-v2 .ess-post-in,.ess-v2 .ess-ig,.ess-v3 .ess-eye,.ess-v3 .ess-ok,.ess-v4 .ess-bars i,.ess-v4 .ess-pin{ animation:none; opacity:1; transform:none; }
}
/* ---------- catálogo em Stories: seis quadrados, um esgotado sai ---------- */
.ess-card--cat{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,26px); align-items:center; }
.ess-card--cat .ess-card__lab{ grid-column:2; }
.ess-card--cat .ess-story{ grid-row:1 / span 3; }
.ess-card--cat .ess-card__foot{ grid-column:2; }
.ess-story{ width:138px; aspect-ratio:9/16; border-radius:16px; padding:10px 8px 9px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(170deg,#3A0A0A,#1E0505); border:1px solid rgba(246,239,221,.2); box-shadow:0 16px 34px -20px rgba(0,0,0,.9); }
.ess-story__top{ display:flex; gap:3px; }
.ess-story__top i{ flex:1; height:2px; border-radius:2px; background:rgba(246,239,221,.28); }
.ess-story__top i:first-child{ background:rgba(246,239,221,.85); }
.ess-story__grid{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:4px; }
.ess-story__it{ position:relative; border-radius:5px; overflow:hidden; background:linear-gradient(150deg,var(--a),var(--b)); }
.ess-story__it b{ position:absolute; left:4px; bottom:3px; font-family:var(--f-display); font-weight:600; font-size:.5rem; letter-spacing:.02em; color:#F6EFDD; }
.ess-story__it--out::before{ content:""; position:absolute; inset:0; background:linear-gradient(150deg,#8C7A5A,#4A3E2C); animation:essOutTile 8.8s var(--ease) infinite; }
.ess-story__out{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:.44rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,239,221,.75); opacity:0; animation:essOutLab 8.8s var(--ease) infinite; }
@keyframes essOutTile{ 0%,38%{ opacity:1; filter:none } 46%{ opacity:1; filter:grayscale(1) } 56%,100%{ opacity:0 } }
@keyframes essOutLab{ 0%,40%{ opacity:0 } 46%,52%{ opacity:1 } 56%,100%{ opacity:0 } }
.ess-story__cta{ height:22px; border-radius:11px; background:#F6EFDD; color:#3E0B0B; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; }
@media (max-width:620px){ .ess-card--cat{ grid-template-columns:1fr; } .ess-card--cat .ess-story{ grid-row:auto; grid-column:1; } .ess-card--cat .ess-card__lab,.ess-card--cat .ess-card__foot{ grid-column:1; } }
.ess-duo{ align-items:start; }