/* MKT-METHOD-01 — página pública sintética do método. */

.method-layout {
    display: grid;
    width: min(1320px, calc(100% - clamp(2rem, 7vw, 7rem)));
    min-height: calc(100vh - 7.8rem);
    margin: 0 auto;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 7vw, 8rem);
    align-items: center;
}

.method-intro { padding: 2rem 0 4rem; }

.method-eyebrow,
.method-sheet__kicker {
    color: #4cdbc6;
    font-size: var(--osf-type-eyebrow);
    font-weight: 800;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.method-eyebrow { display: flex; gap: 0.8rem; align-items: center; }
.method-eyebrow span { width: 2.2rem; height: 1px; background: currentColor; }

.method-intro h1 {
    max-width: 9ch;
    margin: 1.35rem 0 1.5rem;
    color: #f8fbf9;
    font-size: var(--osf-type-hero);
    font-weight: 300;
    letter-spacing: -0.078em;
    line-height: 0.96;
}

.method-intro__lead {
    max-width: 31rem;
    color: #d1dfdc;
    font-size: var(--osf-type-hero-lead);
    line-height: 1.6;
}

.method-intro__note {
    max-width: 28rem;
    margin: 2.3rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid #14b8a6;
    color: #b6c8c7;
    font-size: 0.93rem;
    line-height: 1.6;
}

.method-sheet {
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 3.2rem);
    border-radius: clamp(2rem, 5vw, 4.2rem) 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
}

.method-sheet__kicker { margin: 0; color: var(--osf-surface-accent); }
.method-sheet__header h2 {
    max-width: 13ch;
    margin: 0.85rem 0 0.8rem;
    color: var(--osf-ink);
    font-size: var(--osf-type-panel-title);
    font-weight: 500;
    letter-spacing: -0.065em;
    line-height: 1.02;
}

.method-sheet__header > p:not(.method-sheet__kicker) {
    max-width: 33rem;
    margin: 0;
    color: var(--osf-muted);
    font-size: var(--osf-type-panel-copy);
    line-height: 1.6;
}

.method-steps {
    display: grid;
    margin: 2rem 0 0;
    padding: 0;
    border-top: 1px solid var(--osf-line);
    list-style: none;
}

.method-steps li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.85rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--osf-line);
}

.method-step__number {
    color: var(--osf-surface-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.method-steps h3 { margin: 0; color: var(--osf-ink); font-size: 1rem; }
.method-steps p { margin: 0.4rem 0 0; color: var(--osf-muted); font-size: 0.82rem; line-height: 1.55; }

.method-sheet__clarity {
    display: grid;
    margin-top: 1.35rem;
    padding: 1rem;
    border-left: 2px solid var(--osf-surface-accent);
    gap: 0.35rem;
}

.method-sheet__clarity span {
    color: var(--osf-surface-accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.method-sheet__clarity strong { color: var(--osf-ink); font-size: 0.92rem; line-height: 1.45; }
.method-sheet__clarity p { margin: 0; color: var(--osf-muted); font-size: 0.75rem; line-height: 1.5; }

.method-sheet__back {
    display: inline-flex;
    margin-top: 1.45rem;
    color: var(--osf-surface-accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.method-sheet__back:hover { color: var(--osf-ink); }
.method-sheet__back:focus-visible { outline: 3px solid var(--osf-focus); outline-offset: 4px; }

.method-principles {
    width: min(1320px, calc(100% - clamp(2rem, 7vw, 7rem)));
    margin: 0 auto;
    padding: 4rem 0 5rem;
    border-top: 1px solid rgba(237, 247, 243, 0.14);
}

.method-principles h2 { max-width: 18ch; margin: 0.8rem 0 0; color: #f8fbf9; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 300; letter-spacing: -0.065em; line-height: 1.02; }
.method-principles__grid { display: grid; margin-top: 2.5rem; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.method-principles article { padding: 1.25rem 0; border-top: 1px solid rgba(237, 247, 243, 0.14); }
.method-principles article > span { color: #4cdbc6; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; }
.method-principles h3 { margin: 1rem 0 0.45rem; color: #edf7f3; font-size: 1rem; }
.method-principles p { max-width: 20rem; margin: 0; color: rgba(237, 247, 243, 0.62); font-size: 0.8rem; line-height: 1.55; }

.method-footer { display: flex; width: min(1320px, calc(100% - clamp(2rem, 7vw, 7rem))); margin: 0 auto; padding: 1rem 0 2rem; color: rgba(237, 247, 243, 0.48); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; justify-content: space-between; }
.method-footer a { color: inherit; text-decoration: none; }

@media (max-width: 980px) {
    .method-layout { min-height: 0; padding-bottom: 3rem; grid-template-columns: 1fr; gap: 1.5rem; }
    .method-intro { padding-bottom: 1rem; }
    .method-intro h1 { max-width: 12ch; }
    .method-sheet { max-width: 48rem; }
}

@media (max-width: 620px) {
    .method-layout, .method-principles, .method-footer { width: calc(100% - 2rem); }
    .method-intro { padding-top: 1rem; }
    .method-intro h1 { max-width: 10ch; font-size: clamp(3.25rem, 15vw, 5.2rem); }
    .method-sheet { padding: 1.35rem; border-radius: 2rem 2rem 1.35rem 1.35rem; }
    .method-principles { padding-top: 3rem; }
    .method-principles__grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .method-footer { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
}