:root {
    --paper: #f6f3eb;
    --white: #fffefa;
    --ink: #2e392c;
    --olive: #536443;
    --olive-dark: #35472e;
    --muted: #62695c;
    --sage: #e9eddf;
    --line: #d8ddcd;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans: 'DM Sans', Arial, sans-serif;
    --header: 96px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header) + 20px)
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased
}

body.menu-open {
    overflow: hidden
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

button,
a,
summary {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid #778948;
    outline-offset: 6px
}

::selection {
    background: #dce4cb;
    color: var(--ink)
}

.container {
    width: min(1192px, calc(100% - 112px));
    margin-inline: auto
}

.section {
    padding-block: 104px
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 500
}

h1,
h2 {
    letter-spacing: -.035em;
    line-height: 1.04
}

h2 {
    font-size: clamp(2.8rem, 4vw, 3.6rem);
    margin-bottom: 24px
}

h3 {
    font-size: 1.95rem;
    line-height: 1.2;
    margin-bottom: 15px
}

h1 em,
h2 em {
    font-weight: 400;
    color: var(--olive)
}

p {
    margin-bottom: 20px
}

em {
    font-style: italic
}

.eyebrow {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .17em;
    line-height: 1.6;
    color: var(--olive);
    margin-bottom: 24px
}

.icon-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 15px 25px;
    border: 1px solid var(--olive);
    border-radius: 7px;
    background: var(--olive);
    color: #fff;
    line-height: 1.5;
    font-size: .94rem;
    font-weight: 500;
    text-align: center;
    transition: background .2s, box-shadow .2s, transform .2s
}

.button:hover {
    background: var(--olive-dark);
    border-color: var(--olive-dark);
    box-shadow: 0 6px 20px #3e523522;
    transform: translateY(-2px)
}

.button-small {
    min-height: 44px;
    padding: 11px 19px;
    font-size: .86rem
}

.button-small .icon {
    width: 18px;
    height: 18px
}

.button-outline {
    color: var(--olive-dark);
    background: transparent
}

.button-outline:hover {
    color: white
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--olive-dark);
    font-size: .94rem;
    border-bottom: 1px solid #9ea68f;
    padding-bottom: 3px;
    transition: color .2s, border-color .2s
}

.text-link:hover {
    color: #6c803f;
    border-color: #6c803f
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -100px;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--olive-dark);
    color: white
}

.skip-link:focus {
    top: 12px
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #f6f3ebf5;
    border-bottom: 1px solid #6d79521a;
    backdrop-filter: blur(14px)
}

.header-inner {
    min-height: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0
}

.brand-symbol {
    display: block;
    width: 57px;
    height: 57px;
    background: url('assets/simbolo-chrislaine.png') center/165% no-repeat;
    mix-blend-mode: multiply
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.brand-name {
    font-family: var(--serif);
    font-size: 1.63rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em
}

.brand-subtitle {
    font-size: .625rem;
    letter-spacing: .27em;
    color: var(--muted);
    line-height: 1
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 29px
}

.main-nav>a:not(.button) {
    font-size: .88rem;
    color: #4f5848;
    padding-block: 10px;
    transition: color .2s
}

.main-nav>a:not(.button):hover {
    color: #8a966a
}

.menu-toggle {
    display: none
}

.hero {
    position: relative;
    background: var(--paper);
    isolation: isolate;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 630px;
    height: 630px;
    right: -220px;
    top: -30px;
    background: url('assets/ondas-verdes.webp') center/cover no-repeat;
    opacity: .15;
    mask-image: linear-gradient(90deg, transparent, #000)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 52px;
    min-height: 635px;
    padding-top: 44px;
    padding-bottom: 54px
}

.hero-copy {
    padding-block: 20px
}

.hero h1 {
    font-size: clamp(3.6rem, 5.5vw, 5.05rem);
    line-height: 1.03;
    margin-bottom: 25px
}

.hero .eyebrow {
    font-size: .74rem;
    margin-bottom: 25px
}

.hero-description {
    max-width: 442px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.hero-actions .text-link {
    font-size: .87rem
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: .8rem;
    margin: 25px 0 0
}

.hero-note .icon {
    width: 18px;
    height: 18px
}

.hero-art {
    position: relative;
    align-self: center;
    padding: 14px 20px 0 0
}

.botanical-frame {
    width: 100%;
    max-width: 460px;
    aspect-ratio: .9;
    border-radius: 48% 48% 44% 3%;
    background: url('assets/folhas-oliva.webp') center/cover no-repeat;
    position: relative;
    box-shadow: 0 15px 50px #5863450b
}

.botanical-frame:before {
    content: "";
    position: absolute;
    inset: -14px 14px 14px -14px;
    border: 1px solid #9ea68a77;
    border-radius: 48% 48% 44% 3%;
    pointer-events: none
}

.art-caption {
    display: block;
    margin-top: 23px;
    text-align: right;
    padding-right: 3px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--olive)
}

.hero-bottom {
    border-top: 1px solid #8f9b702e;
    background: #eceee248
}

.values-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 22px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    color: #647052
}

.values-row span+span:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #929d78;
    margin-right: 50px;
    vertical-align: middle
}

.section-intro {
    display: grid;
    grid-template-columns: 1fr .88fr;
    align-items: end;
    gap: 100px;
    margin-bottom: 54px
}

.section-intro h2 {
    margin-bottom: 0
}

.section-intro>p {
    max-width: 400px;
    color: var(--muted);
    margin-bottom: 3px
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px
}

.topic {
    border-top: 1px solid var(--line);
    padding-top: 32px
}

.topic-icon {
    display: inline-flex;
    color: var(--olive);
    margin-bottom: 25px
}

.topic-icon .icon {
    width: 30px;
    height: 30px;
    stroke-width: 1.3
}

.topic p {
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.8;
    max-width: 320px;
    margin-bottom: 23px
}

.topic-footer {
    font-size: .8rem;
    font-style: italic;
    color: #6c765e
}

.about {
    background: #edf0e5
}

.about-grid {
    display: grid;
    grid-template-columns: .9fr 1fr;
    align-items: center;
    gap: 96px
}

.about-visual {
    border: 1px solid #89987440;
    border-radius: 180px 180px 10px 10px;
    overflow: hidden;
    background: #eee9dd;
    position: relative;
    aspect-ratio: 1/1.12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.about-logo {
    width: 100%;
    mix-blend-mode: multiply
}

.about-caption {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 30px;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .06em;
    color: #eee9dd;
}

.about-copy h2 {
    margin-bottom: 18px
}

.about-role {
    font-size: .89rem;
    letter-spacing: .02em;
    color: var(--olive);
    margin-bottom: 28px
}

.about-copy>p:not(.eyebrow):not(.about-role) {
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.8
}

.about-copy .about-highlight {
    font-family: var(--serif);
    font-size: 1.6rem !important;
    color: var(--ink) !important;
    font-style: italic;
    line-height: 1.35 !important;
    padding-left: 20px;
    border-left: 2px solid #8a986d;
    margin: 26px 0
}

.social-link {
    margin-top: 10px;
    font-size: .88rem
}

.social-link .icon {
    width: 18px;
    height: 18px
}

.center-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 56px
}

.center-heading .eyebrow {
    margin-bottom: 20px
}

.center-heading h2 {
    margin-bottom: 18px
}

.center-heading>p:last-child {
    color: var(--muted);
    margin-bottom: 0
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    gap: 52px;
    margin: 0;
    padding: 0
}

.step-number {
    font-family: var(--serif);
    font-size: 2.5rem;
    color: #84926f;
    border-bottom: 1px solid var(--line);
    display: block;
    padding-bottom: 18px;
    margin-bottom: 25px;
    line-height: 1
}

.steps h3 {
    font-size: 1.7rem
}

.steps p {
    color: var(--muted);
    font-size: .95rem;
    margin: 0;
    max-width: 325px
}

.process-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    margin-top: 46px;
    padding-top: 30px;
    gap: 25px
}

.process-footer>span {
    display: flex;
    gap: 11px;
    align-items: center;
    color: var(--muted);
    font-size: .85rem
}

.process-footer .button {
    font-size: .88rem;
    min-height: 49px;
    padding: 12px 20px
}

.faq {
    background: #f7f7f1;
    border-top: 1px solid #edf0e5
}

.faq-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px
}

.faq-heading>p:not(.eyebrow) {
    color: var(--muted);
    max-width: 310px;
    font-size: .94rem
}

.faq-heading .text-link {
    font-size: .89rem
}

.faq-list details {
    border-bottom: 1px solid var(--line)
}

.faq-list details:first-child {
    border-top: 1px solid var(--line)
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.5
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-plus {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    position: relative
}

.faq-plus:before,
.faq-plus:after {
    content: "";
    display: block;
    position: absolute;
    background: var(--olive);
    top: 7px;
    left: 1px;
    width: 13px;
    height: 1px
}

.faq-plus:after {
    transform: rotate(90deg);
    transition: transform .2s
}

.faq-list details[open] .faq-plus:after {
    transform: rotate(0)
}

.faq-answer p {
    font-size: .92rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 25px;
    padding-right: 32px
}

.faq-list details[open] summary {
    padding-bottom: 16px
}

.contact-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    background: #e1e6d7;
    padding: 92px 0 87px
}

.contact-section:before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e6e9ddc9, #eef0e2c2, #e6e9ddc9), url('assets/ondas-verdes.webp') center 61%/cover;
    opacity: .9
}

.contact-inner>h2 {
    font-size: clamp(2.9rem, 4.5vw, 4.2rem);
    margin-bottom: 24px
}

.contact-inner>p:not(.eyebrow) {
    font-size: .97rem;
    color: #59624f;
    margin-bottom: 29px;
    line-height: 1.8
}

.contact-number {
    display: block;
    margin-top: 17px;
    color: #5e684e;
    font-size: .82rem;
    letter-spacing: .04em
}

.contact-inner .eyebrow {
    margin-bottom: 24px
}

.site-footer {
    background: var(--paper);
    padding: 46px 0 24px
}

.footer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 36px
}

.footer-main>p {
    font-family: var(--serif);
    font-size: 1.32rem;
    line-height: 1.3;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 0
}

.footer-links {
    display: flex;
    gap: 25px
}

.footer-links>a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    color: var(--olive-dark)
}

.footer-links .icon {
    width: 18px;
    height: 18px
}

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 23px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    font-size: .73rem;
    color: var(--muted)
}

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    background: var(--olive);
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 18px #2e392c2d;
    border: 1px solid #ffffff55;
    z-index: 45;
    transition: background .2s, transform .2s
}

.whatsapp-float:hover {
    background: var(--olive-dark);
    transform: translateY(-3px)
}

.whatsapp-float>.icon {
    width: 26px;
    height: 26px
}

.float-label {
    position: absolute;
    right: 68px;
    white-space: nowrap;
    color: var(--olive-dark);
    font-size: .8rem;
    background: var(--white);
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow: 0 2px 12px #2e392c12;
    opacity: 0;
    pointer-events: none;
    transform: translateX(5px);
    transition: opacity .2s, transform .2s
}

.whatsapp-float:hover .float-label,
.whatsapp-float:focus-visible .float-label {
    opacity: 1;
    transform: none
}

.reveal {
    opacity: 1
}

.reveal.can-reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .65s ease, transform .65s ease
}

.reveal.can-reveal.is-visible {
    opacity: 1;
    transform: none
}

@media(min-width:1450px) {
    .hero-grid {
        min-height: 710px;
        gap: 85px
    }

    .hero h1 {
        font-size: 5.45rem
    }

    .botanical-frame {
        max-width: 480px
    }
}

@media(max-width:1120px) {
    .container {
        width: calc(100% - 72px)
    }

    .main-nav {
        gap: 22px
    }

    .main-nav>a:not(.button) {
        font-size: .82rem
    }

    .brand-name {
        font-size: 1.48rem
    }

    .brand-symbol {
        width: 49px;
        height: 49px
    }

    .hero-grid {
        gap: 35px;
        min-height: 610px
    }

    .hero h1 {
        font-size: 4.25rem
    }

    .hero-actions {
        gap: 18px
    }

    .hero-actions .text-link {
        font-size: .82rem
    }

    .hero-actions .button {
        padding: 14px 20px
    }

    .values-row span+span:before {
        margin-right: 24px
    }

    .values-row {
        font-size: .61rem;
        letter-spacing: .08em
    }

    .section-intro {
        gap: 60px
    }

    .about-grid {
        gap: 55px
    }

    .faq-grid {
        gap: 55px
    }

    .footer-main {
        gap: 20px
    }

    .footer-links {
        gap: 18px
    }
}

@media(max-width:900px) {
    :root {
        --header: 84px
    }

    .container {
        width: calc(100% - 52px)
    }

    .header-inner {
        gap: 15px
    }

    .main-nav {
        gap: 16px
    }

    .main-nav .button-small {
        font-size: .77rem;
        padding: 10px 13px
    }

    .brand-name {
        font-size: 1.35rem
    }

    .brand-symbol {
        width: 45px;
        height: 45px
    }

    .brand {
        gap: 7px
    }

    .brand-subtitle {
        font-size: .57rem
    }

    .hero-grid {
        gap: 24px;
        min-height: 570px
    }

    .hero h1 {
        font-size: 3.8rem
    }

    .hero-description {
        font-size: .94rem
    }

    .hero-actions {
        gap: 16px
    }

    .hero-actions .text-link {
        font-size: .8rem
    }

    .hero-art {
        padding-right: 0
    }

    .art-caption {
        font-size: 1.04rem
    }

    .section {
        padding-block: 80px
    }

    .topics-grid {
        gap: 28px
    }

    .topic h3 {
        font-size: 1.7rem
    }

    .topic p {
        font-size: .91rem
    }

    .topic-footer {
        font-size: .73rem
    }

    .section-intro {
        gap: 35px
    }

    .about-grid {
        gap: 38px
    }

    .about-visual {
        aspect-ratio: 1/1.4
    }

    .about-copy h2 {
        font-size: 2.7rem
    }

    .about-copy>p:not(.eyebrow):not(.about-role) {
        font-size: .93rem
    }

    .steps {
        gap: 30px
    }

    .steps h3 {
        font-size: 1.5rem
    }

    .faq-grid {
        gap: 40px
    }

    .faq-list summary {
        font-size: .9rem
    }

    .footer-main>p {
        display: none
    }
}

@media(max-width:720px) {
    :root {
        --header: 80px
    }

    .container {
        width: calc(100% - 44px)
    }

    .header-inner {
        flex-wrap: wrap
    }

    .brand-name {
        font-size: 1.5rem
    }

    .brand-symbol {
        width: 49px;
        height: 49px
    }

    .brand {
        gap: 8px
    }

    .brand-subtitle {
        font-size: .59rem
    }

    .main-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 18px
    }

    .main-nav>a:not(.button) {
        font-size: .9rem
    }

    .main-nav .button-small {
        font-size: .86rem
    }

    .js .menu-toggle {
        display: flex;
        width: 46px;
        height: 46px;
        background: transparent;
        border: 1px solid #89977455;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        padding: 10px;
        color: var(--ink)
    }

    .menu-toggle>span {
        width: 18px;
        height: 1px;
        background: currentColor;
        transition: transform .2s
    }

    .menu-toggle[aria-expanded="true"]>span:first-child {
        transform: translateY(3.5px) rotate(45deg)
    }

    .menu-toggle[aria-expanded="true"]>span:last-child {
        transform: translateY(-3.5px) rotate(-45deg)
    }

    .js .main-nav {
        display: none;
        position: fixed;
        inset: var(--header) 0 auto;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 10px 25px #2e392c0a;
        max-height: calc(100dvh - var(--header));
        overflow: auto;
        padding: 26px 24px 32px;
        flex-direction: column;
        gap: 9px
    }

    .js .main-nav.is-open {
        display: flex
    }

    .main-nav .button-small {
        margin-top: 12px
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 34px;
        padding-bottom: 29px;
        min-height: 0
    }

    .hero-copy {
        padding: 0
    }

    .hero .eyebrow {
        font-size: .64rem;
        letter-spacing: .14em;
        margin-bottom: 20px
    }

    .hero h1 {
        font-size: clamp(3.2rem, 10.9vw, 4.4rem);
        line-height: 1.03;
        margin-bottom: 21px
    }

    .hero-description {
        font-size: .96rem;
        max-width: 490px;
        margin-bottom: 24px;
        line-height: 1.75
    }

    .hero-actions {
        gap: 18px
    }

    .hero-actions .button {
        font-size: .9rem;
        padding: 13px 20px;
        min-height: 51px
    }

    .hero-actions .text-link {
        font-size: .82rem
    }

    .hero-note {
        margin-top: 21px;
        font-size: .76rem
    }

    .hero-art {
        width: min(340px, 88%);
        justify-self: center;
        padding: 8px 0 0
    }

    .botanical-frame {
        aspect-ratio: 1.18;
        border-radius: 48% 48% 38% 3%;
        background-position: center 38%
    }

    .botanical-frame:before {
        inset: -9px 9px 9px -9px;
        border-radius: 48% 48% 38% 3%
    }

    .art-caption {
        font-size: 1.1rem;
        line-height: 1.15;
        text-align: center;
        margin-top: 15px;
        padding: 0
    }

    .art-caption br {
        display: none
    }

    .values-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px 20px;
        padding: 16px 0;
        font-size: .58rem;
        letter-spacing: .08em
    }

    .values-row span+span:before {
        display: none
    }

    .hero:before {
        width: 400px;
        height: 580px;
        right: -170px;
        top: 230px;
        opacity: .18
    }

    .section {
        padding-block: 65px
    }

    h2 {
        font-size: 2.85rem;
        margin-bottom: 22px
    }

    .eyebrow {
        font-size: .68rem;
        letter-spacing: .15em;
        margin-bottom: 19px
    }

    .section-intro {
        grid-template-columns: 1fr;
        gap: 23px;
        margin-bottom: 34px
    }

    .section-intro>p {
        max-width: none;
        font-size: .95rem
    }

    .topics-grid {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .topic {
        padding-top: 26px;
        display: grid;
        grid-template-columns: 36px 1fr;
        column-gap: 19px
    }

    .topic-icon {
        grid-column: 1;
        grid-row: 1/4;
        margin: 4px 0 0
    }

    .topic-icon .icon {
        width: 28px;
        height: 28px
    }

    .topic h3 {
        font-size: 1.9rem;
        margin-bottom: 11px
    }

    .topic p {
        max-width: none;
        font-size: .94rem;
        margin-bottom: 12px;
        line-height: 1.75
    }

    .topic-footer {
        grid-column: 2;
        font-size: .78rem
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 37px
    }

    .about-visual {
        width: 100%;
        max-width: 390px;
        justify-self: center;
        aspect-ratio: 1.2;
        border-radius: 160px 160px 6px 6px
    }

    .about-logo {
        width: 100%;
        flex-shrink: 0
    }

    .about-caption {
        font-size: .64rem;
        bottom: 22px
    }

    .about-copy h2 {
        font-size: 2.85rem
    }

    .about-copy>p:not(.eyebrow):not(.about-role) {
        font-size: .95rem
    }

    .about-copy .about-highlight {
        font-size: 1.5rem !important
    }

    .about-copy .eyebrow {
        margin-bottom: 18px
    }

    .center-heading {
        text-align: left;
        margin-bottom: 40px
    }

    .center-heading h2 {
        font-size: 2.7rem
    }

    .center-heading p {
        font-size: .96rem
    }

    .steps {
        grid-template-columns: 1fr;
        gap: 31px
    }

    .steps li {
        display: grid;
        grid-template-columns: 43px 1fr;
        column-gap: 20px;
        position: relative
    }

    .step-number {
        grid-column: 1;
        grid-row: 1/3;
        font-size: 2.05rem;
        line-height: 1.25;
        border: 0;
        margin: 0;
        padding: 0
    }

    .steps h3 {
        font-size: 1.75rem;
        margin-bottom: 10px
    }

    .steps p {
        max-width: none;
        font-size: .94rem
    }

    .process-footer {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 35px;
        padding-top: 24px;
        gap: 22px
    }

    .process-footer>span {
        font-size: .81rem;
        align-items: flex-start
    }

    .process-footer>span .icon {
        width: 19px;
        height: 19px;
        margin-top: 1px
    }

    .process-footer .button {
        align-self: flex-start
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .faq-heading>p:not(.eyebrow) {
        max-width: none
    }

    .faq-heading .text-link {
        font-size: .85rem
    }

    .faq-list summary {
        font-size: .93rem;
        padding-block: 21px
    }

    .faq-answer p {
        font-size: .91rem;
        padding-right: 18px
    }

    .contact-section {
        padding: 65px 0
    }

    .contact-inner>h2 {
        font-size: 2.8rem
    }

    .contact-inner>.eyebrow {
        font-size: .61rem;
        letter-spacing: .12em
    }

    .contact-inner>p:not(.eyebrow) {
        font-size: .94rem
    }

    .contact-section:before {
        background-position: center;
        background-size: auto, auto 140%;
        opacity: .72
    }

    .footer-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
        padding-bottom: 30px
    }

    .footer-links {
        gap: 26px
    }

    .footer-bottom {
        display: block;
        font-size: .7rem;
        padding-bottom: 38px
    }

    .footer-bottom>span {
        display: block;
        margin-bottom: 9px
    }

    .site-footer {
        padding-top: 34px;
        padding-bottom: 10px
    }

    .whatsapp-float {
        bottom: 18px;
        right: 18px;
        width: 52px;
        height: 52px
    }

    .whatsapp-float>.icon {
        width: 25px;
        height: 25px
    }
}

@media(max-width:370px) {
    .container {
        width: calc(100% - 36px)
    }

    .brand-name {
        font-size: 1.34rem
    }

    .brand-symbol {
        width: 44px;
        height: 44px
    }

    .brand-subtitle {
        font-size: .55rem
    }

    .hero-actions {
        gap: 15px
    }

    .hero-actions .button {
        padding-inline: 17px;
        font-size: .87rem
    }

    .hero-actions .text-link {
        font-size: .75rem
    }

    .hero h1 {
        font-size: clamp(2.75rem, 13.4vw, 3.1rem)
    }

    h2,
    .about-copy h2 {
        font-size: 2.6rem
    }

    .hero-description {
        font-size: .94rem
    }

    .hero-art {
        width: 86%
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        transition: none !important;
        animation: none !important
    }

    .reveal.can-reveal {
        opacity: 1;
        transform: none
    }

    .button:hover,
    .whatsapp-float:hover {
        transform: none
    }
}

/* Keep all recurring labels readable on smaller screens. */
.eyebrow,
.hero .eyebrow,
.values-row,
.brand-subtitle,
.about-caption,
.footer-bottom,
.contact-inner>.eyebrow {
    font-size: .75rem
}

.values-row {
    flex-wrap: wrap;
    justify-content: space-between
}

.brand-subtitle {
    letter-spacing: .18em
}

@media(max-width:720px) {
    .values-row {
        justify-content: center;
        font-size: .75rem
    }

    .hero .eyebrow {
        letter-spacing: .09em
    }

    .contact-inner>.eyebrow {
        letter-spacing: .07em
    }
}

/* Quiet motion, original watercolor assets and more tactile controls. */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease
}

.is-opening .page-loader {
    opacity: 1;
    visibility: visible;
    animation: intro-failsafe .3s ease 1.4s forwards
}

.loader-ring {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    mix-blend-mode: multiply
}

.is-opening .loader-ring {
    animation: circle-turn 2.1s linear infinite
}

.loader-name {
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: -.02em;
    color: var(--olive-dark)
}

.skip-link {
    z-index: 2100
}

@keyframes circle-turn {
    to {
        transform: rotate(360deg)
    }
}

@keyframes intro-failsafe {
    to {
        opacity: 0;
        visibility: hidden
    }
}

.motion-scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip
}

.motion-scene>.container,
.hero-bottom {
    position: relative;
    z-index: 1
}

.decoration {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: multiply;
    transform-origin: center;
    --drift-x: 12px;
    --drift-y: -8px
}

.hero:before,
.contact-section:before {
    display: none
}

.decor-hero-wave {
    background-image: url('assets/ondas-verdes.webp');
    width: clamp(240px, 26vw, 410px);
    height: 100%;
    right: -70px;
    top: 0;
    opacity: .28;
    mask-image: linear-gradient(90deg, transparent 4%, #000 70%);
    --drift-x: -12px
}

.decor-about-wave {
    background-image: url('assets/ondas-oliva-textura.webp');
    width: clamp(160px, 19vw, 280px);
    height: 115%;
    left: -100px;
    top: -7%;
    opacity: .17;
    mask-image: linear-gradient(90deg, #000, transparent 97%);
    --drift-y: 12px
}

.decor-process-wave {
    background-image: url('assets/ondas-salvia-textura.webp');
    width: clamp(160px, 19vw, 280px);
    height: 108%;
    right: -95px;
    top: -4%;
    opacity: .15;
    mask-image: linear-gradient(90deg, transparent 3%, #000);
    --drift-x: -10px
}

.decor-cloud {
    background-size: contain;
    opacity: .37;
    mask-image: radial-gradient(ellipse, #000 35%, transparent 72%)
}

.decor-cloud-topics {
    background-image: url('assets/nuvem-aquarela.webp');
    width: clamp(240px, 32vw, 460px);
    height: 460px;
    left: -160px;
    top: -160px;
    --drift-x: 14px;
    --drift-y: 8px
}

.decor-cloud-process {
    background-image: url('assets/nuvem-aquarela-clara.webp');
    width: 350px;
    height: 350px;
    left: -150px;
    bottom: -155px;
    opacity: .27
}

.decor-branch {
    background-image: url('assets/galho-oliva.webp');
    width: clamp(210px, 28vw, 400px);
    height: 440px;
    left: -100px;
    bottom: -90px;
    opacity: .36;
    mask-image: linear-gradient(90deg, #000 50%, transparent 100%);
    transform-origin: bottom left;
    --drift-x: 6px;
    --drift-y: -5px
}

.decor-cloud-contact {
    background-image: url('assets/nuvem-aquarela-clara.webp');
    width: clamp(250px, 32vw, 460px);
    height: 460px;
    right: -140px;
    top: -70px;
    opacity: .48;
    --drift-x: -12px;
    --drift-y: 8px
}

.is-in-view>.decoration {
    animation: watercolor-drift 4.8s ease-in-out both
}

.is-in-view .botanical-frame {
    animation: botanical-settle 4.5s ease-in-out both
}

@keyframes watercolor-drift {
    0% {
        transform: translate3d(calc(var(--drift-x)*-1), calc(var(--drift-y)*-1), 0) scale(1.015)
    }

    50% {
        transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.025)
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1)
    }
}

@keyframes botanical-settle {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-7px)
    }
}

.topics-grid {
    gap: 25px
}

.topic {
    padding: 28px 25px 25px;
    border: 1px solid #dce2d2;
    border-radius: 13px;
    background: #fffef9e8;
    box-shadow: 0 5px 16px #35472e06;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease
}

.topic-icon {
    transition: transform .35s ease
}

.topic-footer {
    display: block
}

.reveal.can-reveal {
    transform: translate3d(0, 27px, 0);
    transition: opacity .72s ease, transform .72s cubic-bezier(.22, .7, .25, 1);
    transition-delay: var(--reveal-delay, 0ms)
}

.topic.reveal.can-reveal {
    transform: translate3d(0, 37px, 0) scale(.975)
}

.reveal.can-reveal.is-visible,
.topic.reveal.can-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1)
}

.reveal.reveal-finished {
    transition-delay: 0ms
}

.typewriter {
    display: inline-block;
    max-width: 100%;
    padding-right: .06em;
    vertical-align: baseline
}

.typewriter.is-typing {
    animation: write-text 1.1s steps(var(--typing-steps, 12), end) both
}

@keyframes write-text {
    from {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

.button {
    border-radius: 9px;
    border: 1px solid #435637;
    border-bottom-color: #35472e;
    background: linear-gradient(145deg, #677b50, #4d623d);
    font-weight: 600;
    box-shadow: 0 4px 0 #34482d, 0 9px 19px #34482d1c;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease
}

.button:hover {
    background: linear-gradient(145deg, #5b7145, #3c522f);
    border-color: #34482d;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #2e4027, 0 12px 24px #34482d24
}

.button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #34482d, 0 3px 9px #34482d16
}

.button-small {
    box-shadow: 0 3px 0 #34482d, 0 5px 14px #34482d16
}

.button-outline,
.button-secondary {
    background: #fffef9;
    border: 1px solid #71815e;
    border-bottom-color: #536443;
    color: var(--olive-dark);
    box-shadow: 0 3px 0 #c1c9b2, 0 6px 15px #34482d0c
}

.button-outline:hover,
.button-secondary:hover {
    background: #edf1e4;
    color: var(--olive-dark);
    border-color: #536443;
    box-shadow: 0 5px 0 #b5c0a3, 0 10px 19px #34482d12
}

.button-outline:active,
.button-secondary:active {
    box-shadow: 0 1px 0 #b5c0a3, 0 3px 7px #34482d0c
}

.hero-actions {
    gap: 20px
}

.hero-actions .button-secondary {
    font-size: .87rem;
    padding-inline: 20px
}

.whatsapp-float {
    box-shadow: 0 3px 0 #35472e, 0 8px 22px #2e392c2a
}

@media(hover:hover) and (pointer:fine) {

    .topic:hover,
    .topic.reveal.can-reveal.is-visible:hover {
        transform: translate3d(0, -5px, 0);
        border-color: #aebc99;
        box-shadow: 0 13px 26px #35472e10;
        transition-delay: 0ms
    }

    .topic:hover .topic-icon {
        transform: translateY(-3px) rotate(-5deg)
    }
}

@media(max-width:900px) {
    .topic {
        padding: 25px 21px
    }

    .topics-grid {
        gap: 18px
    }
}

@media(max-width:720px) {
    .topic {
        padding: 24px 20px;
        column-gap: 15px
    }

    .topics-grid {
        gap: 19px
    }

    .hero-actions {
        gap: 14px
    }

    .hero-actions .button-secondary {
        font-size: .82rem;
        padding: 13px 17px;
        min-height: 51px
    }

    .decor-hero-wave {
        width: 190px;
        right: -92px;
        opacity: .2
    }

    .decor-about-wave {
        width: 155px;
        left: -105px;
        opacity: .12
    }

    .decor-process-wave {
        width: 160px;
        right: -110px;
        opacity: .13
    }

    .decor-cloud-topics {
        width: 290px;
        height: 290px;
        left: -170px;
        top: -90px;
        opacity: .27
    }

    .decor-cloud-process {
        width: 230px;
        height: 230px;
        left: -140px;
        bottom: -95px;
        opacity: .22
    }

    .decor-branch {
        width: 215px;
        height: 310px;
        left: -122px;
        bottom: -85px;
        opacity: .23
    }

    .decor-cloud-contact {
        width: 230px;
        height: 300px;
        right: -142px;
        top: -40px;
        opacity: .32
    }

    .loader-ring {
        width: 102px;
        height: 102px
    }

    .loader-name {
        font-size: 1.5rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .page-loader {
        display: none !important
    }

    .decoration,
    .botanical-frame,
    .typewriter,
    .reveal.can-reveal,
    .topic.reveal.can-reveal,
    .topic.reveal.can-reveal.is-visible {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1;
        clip-path: none !important
    }

    .decoration {
        opacity: .13
    }

    .decor-branch {
        opacity: .25
    }

    .decor-cloud {
        opacity: .24
    }

    .typewriter {
        clip-path: none !important
    }

    .button:hover,
    .button:active,
    .topic:hover,
    .whatsapp-float:hover {
        transform: none !important
    }
}

.site-header .brand-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: calc(100% - 64px);
}

.site-header .header-logo {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 640px) {
    .site-header .header-logo {
        width: 185px;
        max-height: 95px;
    }
}


.site-footer .footer-brand {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.site-footer .footer-logo {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 640px) {
    .site-footer .footer-logo {
        width: 220px;
        max-height: 85px;
    }
}


.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-credit {
    color: inherit;
    text-decoration: none;
    text-align: center;
}

.footer-credit:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
}

/* Header em verde babosa */
.site-header {
    background: #a8be9b;
    border-bottom: 1px solid #8da580;
    backdrop-filter: none;
}

.site-header .main-nav>a:not(.button) {
    color: #263c29;
}

.site-header .main-nav>a:not(.button):hover {
    color: #172b1a;
}

.site-header .menu-toggle {
    color: #263c29;
    border-color: #6c8562;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline-color: #263c29;
}

/* Menu aberto no celular */
@media (max-width: 720px) {
    .js .site-header .main-nav {
        background: #a8be9b;
        border-bottom-color: #8da580;
        box-shadow: 0 10px 25px #263c291a;
    }
}


/* Header */
.site-header {
    background: #63784d;
    border-bottom: 1px solid #ffffff30;
    backdrop-filter: none;
}

.site-header .main-nav>a:not(.button) {
    color: #ffffff;
}

.site-header .main-nav>a:not(.button):hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* Deixa a logo transparente branca apenas no header */
.site-header .header-logo {
    filter: brightness(0) invert(1);
}

/* Botão destacado sobre o fundo verde */
.site-header .main-nav .button {
    background: #f6f3eb;
    color: #35472e;
    border-color: #f6f3eb;
    box-shadow: 0 3px 0 #405232, 0 6px 15px #263c2920;
}

.site-header .main-nav .button:hover {
    background: #ffffff;
    color: #35472e;
    border-color: #ffffff;
}

.site-header .menu-toggle {
    color: #ffffff;
    border-color: #ffffff70;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 720px) {
    .js .site-header .main-nav {
        background: #63784d;
        border-bottom-color: #ffffff30;
        box-shadow: 0 10px 25px #263c2920;
    }
}

/* Mantém a parte superior do footer clara */
.site-footer {
    background: var(--paper);
    padding-bottom: 0;
}

/* Verde somente abaixo do traçado */
.footer-bottom-band {
    background: #63784d;
    border-top: 1px solid #8b9d78;
}

.site-footer .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    border-top: 0;
    padding-block: 24px;
    color: #ffffff;
}

.site-footer .footer-bottom>span {
    margin: 0;
}

.site-footer .footer-bottom>span:last-child {
    text-align: right;
}

.site-footer .footer-credit {
    color: #ffffff;
    text-align: center;
    text-decoration: none;
}

.site-footer .footer-credit:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer .footer-credit:focus-visible {
    outline-color: #ffffff;
}

@media (max-width: 900px) {
    .site-footer .footer-bottom {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: center;
        padding-block: 24px 36px;
    }

    .site-footer .footer-bottom>span:last-child {
        text-align: center;
    }
}


/* Faixa compacta de frases */
.thinkers-section {
    padding: 30px 0;
    background: var(--paper, #f6f3eb);
    border-top: 1px solid var(--line, #d8ddcd);
    border-bottom: 1px solid var(--line, #d8ddcd);
}

.thinkers-slider {
    display: grid;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

/* Mantém a altura estável durante as trocas */
.thinkers-slide {
    grid-area: 1 / 1;
    align-self: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);

    transition:
        opacity 450ms ease,
        transform 450ms ease,
        visibility 450ms ease;
}

.thinkers-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.thinkers-slide blockquote {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

.thinkers-slide blockquote p {
    margin: 0;
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.3rem, 2.3vw, 1.8rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink, #2e392c);
    overflow-wrap: break-word;
}

.thinkers-slide figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.5;
}

.thinkers-slide figcaption strong {
    color: #536443;
    font-size: 0.85rem;
    font-weight: 600;
}

.thinkers-slide figcaption span {
    color: var(--muted, #62695c);
    font-size: 0.72rem;
}

@media (max-width: 720px) {
    .thinkers-section {
        padding: 24px 0;
    }

    .thinkers-slide blockquote p {
        font-size: 1.35rem;
    }

    .thinkers-slide blockquote {
        margin-bottom: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .thinkers-slide {
        transition: none;
        transform: none;
    }
}