/* Página ESSENTIZ: layout enxuto. Cores, tipografia e espaços vêm de tokens.css. */

/* Hero */
.hero { position: relative; display: grid; width: 100%; min-height: min(86svh, 56rem); align-items: center; overflow: clip; isolation: isolate; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); text-align: center; border-block-end: var(--p-line) solid var(--color-line-quiet); }
.hero::before { position: absolute; z-index: -2; inset: 0; background: var(--hero-background); content: ""; }
.hero__texture { position: absolute; z-index: -1; inset: 0; background: var(--texture-flow) center / cover no-repeat; opacity: var(--texture-flow-opacity); pointer-events: none; }
.hero__inner { display: grid; justify-items: center; gap: var(--space-6); }
.hero h1 { max-width: 13ch; margin: 0; font: var(--p-weight-bold) var(--type-display)/0.92 var(--font-display); letter-spacing: var(--tracking-display); text-transform: uppercase; text-wrap: balance; animation: hero-arrive 700ms var(--motion-easing) both; }
.hero__description { max-width: 40ch; margin: 0; color: var(--color-text-secondary); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; text-wrap: pretty; animation: hero-arrive 700ms 80ms var(--motion-easing) both; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); animation: hero-arrive 700ms 160ms var(--motion-easing) both; }
.hero__partner { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--type-caption); letter-spacing: 0.04em; animation: hero-arrive 700ms 240ms var(--motion-easing) both; }
html[data-theme="light"] .brand__mark img { filter: invert(1); }
.brand__mark img { transition: filter 360ms var(--motion-easing); }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: translateY(0); } }

/* Cabeçalhos de seção: mesmo padrão em todas */
.section-heading h2 { max-width: 16ch; }
.eyebrow { font-variant-numeric: tabular-nums; }

/* 01 Problema */
.problem { background: var(--color-surface); }
.problem .section-heading h2 { max-width: 18ch; }
.problem__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: clamp(var(--space-8), 6vw, var(--space-12)) 0 0; padding: 0; list-style: none; }
.problem__item { padding-block-start: var(--space-4); border-block-start: var(--p-line) solid var(--color-line); }
.problem__item h3 { margin: 0; font: var(--p-weight-medium) clamp(1.15rem, 1.8vw, 1.4rem)/1.25 var(--font-display); letter-spacing: -0.02em; }
.problem__item p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--type-small); line-height: 1.6; }

/* 02 Serviços */
.services { background: var(--color-canvas); }
.service-list { margin: clamp(var(--space-8), 6vw, var(--space-12)) 0 0; padding: 0; list-style: none; border-block-start: var(--p-line) solid var(--color-line); }
.service { position: relative; display: grid; align-items: baseline; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.4fr) 6.5rem; gap: var(--space-2) var(--space-6); padding-block: var(--space-6); border-block-end: var(--p-line) solid var(--color-line); }
.service::before { position: absolute; inset: -1px auto auto 0; width: 0; height: 2px; background: var(--color-text); content: ""; transition: width 280ms var(--motion-easing); }
.service__num { color: var(--color-text-muted); font-size: var(--type-small); font-variant-numeric: tabular-nums; }
.service h3 { margin: 0; font: var(--p-weight-medium) clamp(1.1rem, 1.8vw, 1.45rem)/1.25 var(--font-display); letter-spacing: -0.025em; transition: transform 240ms var(--motion-easing); }
.service p { margin: 0; color: var(--color-text-secondary); font-size: var(--type-body); line-height: 1.55; }
.service__tag { justify-self: end; color: var(--color-text-muted); font-size: var(--type-caption); letter-spacing: 0.1em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .service:hover::before { width: 100%; }
  .service:hover h3 { transform: translateX(3px); }
}

/* 03 Funil */
.funnel { background: var(--color-surface); border-block: var(--p-line) solid var(--color-line-quiet); }
.funnel .section-heading h2 { max-width: 18ch; }
.funnel__panel { display: grid; gap: var(--space-8); margin-block-start: clamp(var(--space-8), 6vw, var(--space-12)); padding: clamp(var(--space-6), 5vw, var(--space-12)); border: var(--p-line) solid var(--color-line); background: var(--color-canvas); }
.funnel__controls { display: flex; width: max-content; max-width: 100%; gap: var(--space-2); padding: var(--space-1); border: var(--p-line) solid var(--color-line); }
.funnel__choice { min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: var(--p-line) solid transparent; border-radius: var(--p-radius-small); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: var(--type-small); transition: color 220ms var(--motion-easing), background-color 220ms var(--motion-easing); }
.funnel__choice:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.funnel__choice[aria-pressed="true"] { background: var(--color-text); color: var(--color-canvas); }
.funnel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.stat { display: grid; align-content: start; gap: var(--space-2); margin: 0; }
.stat span { color: var(--color-text-muted); font-size: var(--type-small); }
.stat strong { font: var(--p-weight-bold) clamp(1.9rem, 4vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.funnel__bar { height: 0.7rem; background: var(--color-frame); }
.funnel__bar i { display: block; width: var(--fill, 36%); height: 100%; background: var(--color-text); transition: width 420ms var(--motion-easing); }
.funnel__note { max-width: 70ch; margin: 0; color: var(--color-text-muted); font-size: var(--type-caption); line-height: 1.6; }

/* 04 Método */
.method { background: var(--color-canvas); }
.method-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: clamp(var(--space-8), 6vw, var(--space-12)) 0 0; padding: 0; list-style: none; }
.method-step { padding-block-start: var(--space-4); border-block-start: var(--p-line) solid var(--color-line); }
.method-step__num { color: var(--color-text-muted); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.method-step h3 { margin: var(--space-6) 0 var(--space-2); font: var(--p-weight-bold) clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--font-display); letter-spacing: -0.04em; }
.method-step p { max-width: 32ch; margin: 0; color: var(--color-text-secondary); font-size: var(--type-small); line-height: 1.6; }

/* 05 Contato */
.contact { background: var(--color-surface); border-block-start: var(--p-line) solid var(--color-line-quiet); }
.contact__panel { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(var(--space-8), 8vw, var(--space-16)); }
.contact__copy { display: grid; justify-items: start; gap: var(--space-6); }
.contact__copy h2 { max-width: 12ch; margin: 0; font: var(--p-weight-bold) clamp(2.3rem, 4.8vw, 4.4rem)/0.98 var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.ctc-support { margin: 0; color: var(--color-text-secondary); font-size: var(--type-small); line-height: 1.55; }

/* Entrada suave */
.has-motion [data-reveal].motion-pending { opacity: 0; transform: translateY(1rem); }
.has-motion [data-reveal].motion-visible { opacity: 1; transform: none; transition: opacity 420ms var(--motion-easing), transform 420ms var(--motion-easing); }

@media (max-width: 54rem) {
  .problem__grid, .method-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .funnel__stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .contact__panel { grid-template-columns: minmax(0, 1fr); }
  .service { grid-template-columns: 2.5rem minmax(0, 1fr) 6rem; }
  .service p { grid-column: 2 / -1; grid-row: 2; }
  .service__tag { grid-column: 3; grid-row: 1; }
  .hero__actions .button { min-height: 3rem; }
}

@media (max-width: 40rem) {
  .hero { min-height: auto; padding-block: clamp(var(--space-12), 14vw, var(--space-16)); }
  .hero h1 { font-size: clamp(2.6rem, 12.5vw, 4.2rem); line-height: 0.98; }
  .hero__actions { align-items: stretch; flex-direction: column; width: min(100%, 22rem); }
  .hero__actions .button { width: 100%; }
  .section { padding-block: clamp(3.5rem, 12vw, 4.5rem); }
  .section-heading h2 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .service { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-6); }
  .service__num { font-size: var(--type-caption); }
  .service h3, .service p, .service__tag { grid-column: 1; grid-row: auto; }
  .service__tag { justify-self: start; }
  .service p { font-size: var(--type-small); }
  .funnel__controls { width: 100%; }
  .funnel__choice { flex: 1; padding-inline: var(--space-2); }
  .contact__copy h2 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .site-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media (min-width: 40.001rem) and (max-width: 54rem) {
  .site-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .site-footer__top { justify-self: end; }
}

@media (max-width: 22rem) {
  .hero h1 { font-size: clamp(2.4rem, 12vw, 2.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero__description, .hero__actions, .hero__partner { animation: none; }
  .service::before, .service h3, .funnel__choice, .funnel__bar i { transition: none; }
  .has-motion [data-reveal].motion-pending, .has-motion [data-reveal].motion-visible { opacity: 1; transform: none; transition: none; }
}