/* Shared editorial system. Loaded after section modules on purpose.
   The NEXO demonstration keeps its own internal visual language. */
:root {
  --muted: #6e6e6b;
  --text-soft: #858580;
  --text-on-dark: #c4c4c0;

  /* ==========================================================================
     GLOBAL TYPOGRAPHIC SYSTEM (7 HIERARCHICAL LEVELS)
     ========================================================================== */
  --type-display: clamp(54px, 5.8vw, 88px);
  --type-section: clamp(42px, 4.5vw, 68px);
  --type-content-title: clamp(22px, 2.0vw, 28px);
  --type-lead: clamp(20px, 1.8vw, 26px);
  --type-body: clamp(15px, 1.1vw, 17px);
  --type-small: 14px;
  --type-micro: 13px;

  /* Backward compatibility alias */
  --type-subtitle: var(--type-lead);

  /* Weights, Tracking & Leading */
  --heading-weight: 500;
  --heading-tracking: -.055em;
  --heading-leading: 1.02;

  --content-weight: 500;
  --content-tracking: -.035em;
  --content-leading: 1.15;

  --lead-weight: 400;
  --lead-tracking: -.025em;
  --lead-leading: 1.25;

  --body-weight: 400;
  --body-tracking: -.01em;
  --body-leading: 1.5;

  --micro-weight: 500;
  --micro-tracking: .04em;

  --radius: 24px;
  --radius-small: 16px;
  --radius-control: 12px;
  --section-space: clamp(72px, 6.5vw, 104px);
  --content-space: clamp(48px, 5vw, 80px);
  --rule-width: 32px;
}

/* ==========================================================================
   SHARED TYPOGRAPHY RULES BY SEMANTIC FUNCTION
   ========================================================================== */

/* 01 — DISPLAY: Grandes statements protagonistas */
.perception-section__composition {
  font-size: var(--type-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: 1.12;
}

/* 02 — SECTION TITLE: Título principal de cada seção */
.presence-section__title,
.services-v2__title,
.about-tio h2,
.conversation-cta .conversation-cta__title {
  font-size: var(--type-section);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
}

/* 03 — CONTENT / CARD TITLE: Títulos de cards e blocos secundários */
.presence-card__title,
.conversation-cta__action-label {
  font-size: var(--type-content-title);
  font-weight: var(--content-weight);
  letter-spacing: var(--content-tracking);
  line-height: var(--content-leading);
}

/* 04 — LEAD: Subtítulos e frases editoriais de apoio */
.presence-section__statement,
.services-v2__intro,
.about-tio__subtitle {
  font-size: var(--type-lead);
  font-weight: var(--lead-weight);
  letter-spacing: var(--lead-tracking);
  line-height: var(--lead-leading);
}
.about-tio__subtitle { color: var(--muted); }

/* 05 — BODY: Texto corrido editorial */
.presence-card__description,
.about-tio__copy,
.conversation-cta__copy {
  font-size: var(--type-body);
  font-weight: var(--body-weight);
  letter-spacing: var(--body-tracking);
  line-height: var(--body-leading);
  color: var(--muted);
}

.services-v2__attr-text {
  font-size: var(--type-body);
  font-weight: 500;
  letter-spacing: var(--body-tracking);
  line-height: var(--body-leading);
}

/* Editorial separator dimensions. */
.process-experience__current-rule,
.process-experience__footer > p > span,
.about-tio__portrait figcaption > span { width: var(--rule-width); }

/* ==========================================================================
   SHARED COMPONENT: SECTION EYEBROW (XX / LABEL ─────)
   Absolute Reference: Section 01 (01 / PRESENÇA ─────)
   ========================================================================== */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  color: currentColor;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: var(--type-micro);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-tracking);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: clamp(36px, 4vw, 64px);
  user-select: none;
  -webkit-user-select: none;
}

.section-eyebrow__text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.section-eyebrow__rule {
  display: block;
  width: 56px;
  height: 1px;
  background: currentColor;
  opacity: .28;
  transform-origin: left center;
  flex-shrink: 0;
}

/* Section-specific margin adaptations */
.process-experience__eyebrow {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.about-tio__section-eyebrow {
  margin-bottom: clamp(28px, 3.2vw, 40px);
}

.conversation-cta__section-eyebrow {
  margin-bottom: clamp(28px, 3.5vw, 42px);
}

@media (max-width: 720px) {
  .section-eyebrow {
    font-size: 12px;
    gap: 16px;
    margin-bottom: 28px;
  }
  .section-eyebrow__rule {
    width: 44px;
  }
}

/* Shared surfaces and controls. */
.about-tio__portrait { border-radius: var(--radius); }
.process-experience__browser { border-radius: var(--radius-small); }
.about-tio__contact {
  border-radius: var(--radius-control);
  min-height: 54px;
  padding: 15px 24px;
  gap: 24px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
.about-tio__contact:focus-visible { outline: 2px solid var(--foreground); outline-offset: 5px; }

/* Stacking layer: all sections from Section 01 onwards rise above the Hero layer and Header */
.presence-section,
.perception-section,
.process-experience,
.about-tio {
  position: relative;
  z-index: 10;
}

.presence-section { background: var(--background); }

@media (min-width: 901px), (max-width: 720px) {
  .presence-section {
    z-index: 11;
    background: transparent;
  }
}

.process-experience,
.about-tio {
  background: var(--editorial-surface);
}

/* Cadence: the adjacent sections each contribute one unit of breathing room. */
.about-tio { padding-block: var(--section-space); }
.process-experience { margin-top: 0; }
.process-experience[data-enhanced] { margin-bottom: 0; }
.about-tio__subtitle { margin-top: 32px; }
.about-tio__copy { max-width: 45ch; }
.conversation-cta__copy { max-width: 42ch; }

@media (max-width: 720px) {
  :root {
    --type-display: clamp(36px, 10vw, 56px);
    --type-section: clamp(32px, 8.5vw, 44px);
    --type-content-title: clamp(19px, 5.5vw, 23px);
    --type-lead: clamp(16px, 4.5vw, 20px);
    --type-body: 15px;
    --type-small: 13.5px;
    --type-micro: 12px;
    --radius: 22px;
    --section-space: 64px;
    --content-space: 56px;
  }
  .conversation-cta h2 { max-width: 15ch; }
}