/* o-que-muda.css — seção 01: pares Ruído→Contexto e a composição provisória de palavras
   Extraído do build original (assets/index-C_bOfxLt.css) preservando a ordem da cascata. */

.change-section {
    background: var(--paper-light);
    padding: clamp(96px, 9vw, 144px) 0
}

.change-heading-grid,
.solutions-intro {
    grid-template-columns: 2.15fr 9.85fr;
    align-items: start;
    gap: clamp(28px, 4vw, 64px);
    display: grid
}

.change-heading-grid h2,
.about-copy h2,
.solutions-intro h2,
.audience-intro h2,
.diagnostic-section h2 {
    font-family: var(--serif);
    letter-spacing: -.048em;
    margin: 0;
    font-size: clamp(48px, 5.7vw, 84px);
    font-weight: 400;
    line-height: 1
}

.change-heading-grid h2 em {
    color: var(--blue-700);
    font-weight: 400;
    display: block
}

.change-subtitle {
    color: var(--ink-soft);
    margin: 26px 0 0;
    font-size: 17px;
    line-height: 1.55
}

.change-subtitle strong {
    color: var(--ink);
    font-weight: 600
}

.change-content-grid {
    grid-template-columns: 7.2fr 4.8fr;
    align-items: center;
    gap: clamp(36px, 5vw, 76px);
    margin-top: 78px;
    display: grid
}

.change-list {
    border-top: 1px solid var(--line)
}

.change-list article {
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(320px, 1fr) minmax(260px, 1.25fr);
    align-items: center;
    gap: 32px;
    min-height: 112px;
    display: grid
}

.change-pair {
    grid-template-columns: 124px 32px 1fr;
    align-items: center;
    gap: 10px;
    display: grid
}

.change-pair del,
.change-pair h3 {
    font-family: var(--serif);
    margin: 0;
    font-weight: 400;
    line-height: 1
}

.change-pair del {
    color: var(--ink-faint);
    font-size: clamp(25px, 2.25vw, 32px)
}

.change-pair span {
    color: var(--blue-700);
    font-size: 20px
}

.change-pair h3 {
    color: var(--blue-700);
    font-size: clamp(30px, 2.75vw, 40px)
}

.change-list article>p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 16px;
    line-height: 1.52
}

.change-creative {
    aspect-ratio: 4/3;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, #6e9fc41f, transparent 62%), repeating-linear-gradient(0deg, transparent 0 47px, #071e3b09 47px 48px), var(--paper);
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: clamp(28px, 3.4vw, 52px) 0;
    display: flex;
    position: relative;
    overflow: hidden
}

.change-creative:before,
.change-creative:after {
    content: "";
    border: 1px solid #15588733;
    position: absolute
}

.change-creative:before {
    aspect-ratio: 1;
    border-radius: 50%;
    width: 60%;
    top: -22%;
    right: -8%
}

.change-creative:after {
    aspect-ratio: 1;
    width: 42%;
    bottom: -34%;
    right: 9%;
    transform: rotate(24deg)
}

.change-creative .temporary-tag {
    z-index: 3;
    color: var(--blue-700);
    position: absolute;
    top: 16px;
    left: 18px
}

.change-word {
    z-index: 2;
    border: 1px solid var(--ink);
    width: max-content;
    max-width: 94%;
    color: var(--blue-700);
    font-family: var(--serif);
    white-space: nowrap;
    background: #fcfbf8e6;
    padding: 7px 14px 8px;
    font-size: clamp(25px, 2.45vw, 39px);
    line-height: 1;
    position: relative
}

.word-one {
    margin-left: 5%
}

.word-two {
    margin-left: 19%
}

.word-three {
    margin-left: 10%
}

.word-four {
    color: var(--ink);
    margin-left: 14%;
    font-style: italic
}