/* /consultoria/ — content page.
 * style.css is written for the spiral home (fixed, non-scrolling stage) and is
 * loaded before this file on purpose: reuse its tokens/fonts, then undo the
 * fixed/hidden-overflow stage rules so this page can scroll like a normal doc.
 */

body.consultoria {
  overflow: auto;
  height: auto;
  min-height: 100vh;
}

.page {
  position: relative;
  z-index: 1; /* sit above style.css's fixed ::after vignette */
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--s3);
}

/* ------------------------------------------------------------- header --- */

.page__header {
  padding: var(--s4) 0 var(--s2);
}

.back {
  display: inline-block;
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.back:hover { border-color: var(--teal); }
.back:focus { outline: none; }
.back:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* --------------------------------------------------------------- hero --- */

.hero {
  padding: var(--s6) 0 var(--s4);
  border-bottom: 1px solid rgba(1, 161, 137, .28);
}

.kicker {
  margin: 0 0 var(--s2);
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--teal);
}

.hero__title {
  margin: 0 0 var(--s3);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--ink);
  max-width: 16ch;
}

.hero__lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.75;
  color: var(--ink-soft);
}
.hero__lede strong { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------- section title --- */

.section-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-tech);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--teal);
}

/* --------------------------------------------------------------- steps --- */

.steps {
  padding: var(--s6) 0;
  border-bottom: 1px solid rgba(1, 161, 137, .28);
}

.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.step {
  position: relative;
  padding: var(--s4);
  border: 1px solid rgba(1, 161, 137, .38);
  background: rgba(1, 161, 137, .03);
  /* chamfered corners: circuit-astrolabe motif, no rounded corners anywhere */
  clip-path: polygon(
    18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px
  );
}

.step__num {
  display: block;
  font-family: var(--font-tech);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--teal);
  margin-bottom: var(--s2);
}

.step__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(18px, 2.6vw, 22px);
  color: var(--ink);
}

.step__meta {
  margin: 0 0 var(--s2);
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.step__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 58ch;
}

.step__status {
  margin: var(--s2) 0 0;
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- after --- */

.after {
  padding: var(--s6) 0;
  border-bottom: 1px solid rgba(1, 161, 137, .28);
}

.after__body {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.inline-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
}
.inline-link:hover { color: #fff; }
.inline-link:focus { outline: none; }
.inline-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ----------------------------------------------------------------- cta --- */

.cta {
  padding: var(--s6) 0;
  text-align: left;
}

.cta__body {
  margin: 0 0 var(--s3);
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.cta__mail {
  display: inline-block;
  font-size: clamp(18px, 3.4vw, 24px);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  word-break: break-all;
}
.cta__mail:hover { color: #fff; }
.cta__mail:focus { outline: none; }
.cta__mail:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* -------------------------------------------------------------- footer --- */

.page__footer {
  padding: var(--s4) 0 var(--s8);
}

.back--footer { color: var(--ink-faint); }
.back--footer:hover { color: var(--teal); border-color: var(--teal); }

/* ------------------------------------------------------------- mobile --- */

@media (max-width: 480px) {
  .page { padding: 0 var(--s2); }
  .hero { padding-top: var(--s4); }
  .step { padding: var(--s3); }
}