/* ============================================================
   UPLIFT — composition polish layered over the wattimize (/ds/)
   and Gesto Comercialização (/dsg/) design systems.
   Loaded last; changes no tokens, only rhythm, presence and
   hierarchy. The Grupo Gesto heritage pages use .sec/.hw and
   are deliberately untouched by everything here.
   ============================================================ */

:root{
  --up-accent:var(--ambar,var(--accent,#F5A623));
  --up-hair:var(--hairline,var(--border-hairline,rgba(0,0,0,.08)));
  --up-line:var(--hairline-strong,var(--border-strong,rgba(0,0,0,.16)));
  --up-card:var(--surface-card,#fff);
  --up-sunk:var(--surface-sunken,#F5F5F7);
}

/* ---------- section rhythm -------------------------------------------- */
/* the DS already pads `section` itself — only add the dividing hairline,
   so sections read as separate plates instead of one long column. */
section:not(.dark):not(#top) + section:not(.dark) > .container,
section:not(.dark):not(#top) + section:not(.dark) > .wrap{
  border-top:1px solid var(--up-hair);padding-top:var(--space-11,80px);
}
section:not(.dark) + section:not(.dark){padding-top:0}

/* ---------- eyebrow gets a mark --------------------------------------- */
.eyebrow{position:relative;padding-left:22px}
.eyebrow::before{
  content:"";position:absolute;left:0;top:.52em;width:13px;height:2px;
  background:var(--up-accent);border-radius:2px;
}
.dark .eyebrow::before{background:var(--up-accent)}

/* ---------- hero ------------------------------------------------------ */
#top{padding-block:var(--space-11,80px) var(--space-12,96px) !important}
#top .display{letter-spacing:-.028em;max-width:15ch}
#top .lede{
  font-size:var(--size-body-lg,1.1875rem);
  max-width:56ch;margin-top:var(--space-6,24px);
  color:var(--text-secondary);
}
#top .actions{margin-top:var(--space-8,40px)}

/* two-column hero where a figure is present */
@media (min-width:1000px){
  .herogrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--space-12,96px);align-items:center}
}
.herofig{margin-top:var(--space-10,64px)}
@media (min-width:1000px){.herofig{margin-top:0}}

/* the figure itself: a quarter-hour strip drawn from the ramp */
.qh{border:1px solid var(--up-hair);border-radius:16px;background:var(--up-card);
  padding:26px 26px 22px;box-shadow:0 30px 60px -44px rgba(0,0,0,.4)}
.qh .top{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:var(--size-micro,.6875rem);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.qh .bars{display:flex;align-items:flex-end;gap:4px;height:148px;margin-top:20px}
.qh .bars span{flex:1;border-radius:2px 2px 0 0;background:var(--up-hair)}
.qh .bars span.a{background:var(--up-accent)}
.qh .bars span.b{background:color-mix(in srgb,var(--up-accent) 45%,transparent)}
.qh .foot{display:flex;justify-content:space-between;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--up-hair)}
.qh .foot div{font-family:var(--font-mono);font-size:var(--size-micro,.6875rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary,var(--text-secondary))}
.qh .foot div b{display:block;font-family:var(--font-sans);font-weight:var(--weight-light,300);
  font-size:1.5rem;letter-spacing:-.01em;color:var(--text-primary);margin-top:7px;text-transform:none}

/* ---------- cards ----------------------------------------------------- */
.grid.g2,.grid.g3,.grid.g4{gap:var(--space-6,24px)}
.card{
  background:var(--up-card);
  border:1px solid var(--up-hair) !important;
  border-radius:14px;
  padding:var(--space-7,32px) var(--space-7,32px) var(--space-8,40px) !important;
  position:relative;overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--up-accent);opacity:0;transition:opacity .22s ease;
}
.card:hover{border-color:var(--up-line) !important;
  box-shadow:0 22px 44px -34px rgba(0,0,0,.38);transform:translateY(-2px)}
.card:hover::before{opacity:1}
.card .mono{color:var(--up-accent);letter-spacing:.16em}
.card h3{font-size:var(--size-h3,1.1875rem);letter-spacing:-.012em;
  margin-top:var(--space-3,12px);margin-bottom:var(--space-4,16px);color:var(--text-primary)}
.card p{font-size:var(--size-body-sm,.9375rem);line-height:var(--leading-relaxed,1.72);
  color:var(--text-secondary)}
.card .more{margin-top:var(--space-6,24px)}
@media (prefers-reduced-motion:reduce){.card,.card::before{transition:none}.card:hover{transform:none}}

/* dark sections keep their own surface */
.dark .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1) !important}
.dark .card:hover{border-color:rgba(255,255,255,.24) !important;box-shadow:none}
.dark .card p{color:rgba(255,255,255,.66)}

/* ---------- measure --------------------------------------------------- */
.body,.prose p{max-width:62ch;font-size:var(--size-body-lg,1.1875rem);
  line-height:var(--leading-relaxed,1.72)}
.sec-h,.h2{letter-spacing:-.02em;max-width:19ch}
section > .container > .body,
section > .wrap > .body{margin-top:var(--space-5,20px)}

/* ---------- stat strip ------------------------------------------------ */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border-top:2px solid var(--text-primary);margin-top:var(--space-10,64px)}
.strip div{padding:var(--space-6,24px) var(--space-5,20px) var(--space-6,24px) 0;
  border-right:1px solid var(--up-hair)}
.strip div:last-child{border-right:0}
.strip b{display:block;font-weight:var(--weight-light,300);font-size:1.875rem;
  letter-spacing:-.015em;color:var(--text-primary);line-height:1.05}
.strip span{display:block;margin-top:9px;font-family:var(--font-mono);
  font-size:var(--size-micro,.6875rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary)}
@media (max-width:760px){.strip div{border-right:0;border-bottom:1px solid var(--up-hair)}}

/* ---------- mobile type ----------------------------------------------- */
@media (max-width:700px){
  section{padding-block:var(--space-10,64px) !important}
  section:not(.dark) + section:not(.dark) > .container,
  section:not(.dark) + section:not(.dark) > .wrap{padding-top:var(--space-10,64px)}
  #top{padding-block:var(--space-8,40px) var(--space-10,64px) !important}
  #top .display{max-width:none}
  .sec-h,.h2{max-width:none}
  .card{padding:var(--space-6,24px) !important}
}