/* Base global: variáveis, reset, tipografia, header, footer e componentes usados em mais de uma página.
   CSS Nesting nativo (ver modelo-css.md). Estilos de uma página só ficam em <pagina>.css. */

:root {
    --navy: #1a3157;
    --navy-dark: #122032;
    --blue: #346cac;
    --blue-on-dark: #9cc3f2;
    --nutrition: #951639;
    --personal-care: #846428;
    --health-pharma: #16494c;
    --white: #fbfcff;
    --paper: #f3f1ea;
    --paper-warm: #faf8f4;
    --cool: #edf3f7;
    --sky: #e3ebf4;
    --map: #faf6f3;

    --ink: #12213a;
    --muted: #3b4a63;
    --gold: #e6bc78;
    --line: rgba(26, 49, 87, 0.12);
    --shadow: 0 18px 50px rgba(18, 32, 50, 0.12);
    --shadow-sm: 0 6px 24px rgba(18, 32, 50, 0.08);
    --dark-gradient: linear-gradient(105deg, var(--navy-dark) 0%, #172a49 55%, var(--navy) 100%);

    /* Troque por 'Sofia Pro' quando a licença estiver disponível */
    --font-display: 'Figtree', system-ui, sans-serif;
    --font-body: 'Kumbh Sans', system-ui, sans-serif;

    --container: 1200px;
    --container-wide: 1620px;
    --gutter: clamp(20px, 5vw, 48px);
    --section-y: clamp(48px, 5vw, 80px);
    --radius: 12px;
    --radius-lg: 18px;
    --ease: cubic-bezier(0.45, 0.05, 0.2, 1);
    --accent: var(--blue);
    --header-shrink: 26px;
}

/* Cores de mercado: qualquer elemento com a classe ganha --accent */
.nutrition { --accent: var(--nutrition); --accent-dark: #400d1b; --accent-tint: #fff6f8; }

.personal-care { --accent: var(--personal-care); --accent-dark: #4e3913; --accent-tint: #faf3e7; }

.health-pharma { --accent: var(--health-pharma); --accent-dark: #092628; --accent-tint: #edf3f7; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    /* âncoras param abaixo do header fixo (90px - shrink) */
    scroll-padding-top: 64px;

    &.lenis, &.lenis body { height: auto; }
    &.lenis-smooth { scroll-behavior: auto !important; }
    &.lenis-stopped { overflow: clip; }
}

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;

    &.nav-open { overflow: hidden; }
}

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

picture { display: contents; }

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

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }

ul, ol { padding: 0; list-style: none; }

em { font-style: italic; font-weight: 600; }

strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 1000;
    padding: 10px 16px; border-radius: 8px;
    background: var(--navy); color: #fff; font-weight: 600;

    &:focus { top: 16px; }
}

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);

    &.wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
    &.narrow { max-width: calc(1040px + 2 * var(--gutter)); }
}

.section {
    position: relative;
    padding-block: var(--section-y);

    &.compact { padding-block: clamp(40px, 4vw, 64px); }
}

.surface-dark {
    background: var(--dark-gradient);
    color: var(--white);
    overflow: hidden;

    :is(.h2, .h3) { color: #fff; }
    :where(p) { color: #dfe6ef; }
    .body-md { color: #dfe6ef; }
}

.bg-white { background: var(--white); }

.bg-paper { background: var(--paper); }

.bg-paper-warm { background: var(--paper-warm); }

.bg-cool { background: var(--cool); }

.split {
    display: grid;
    gap: clamp(40px, 6vw, 96px);

    &.center { align-items: center; }
    &.start { align-items: start; }

    .media img { width: 100%; }
    .media.contain img { max-width: 520px; margin-inline: auto; }

    @media (min-width: 1100px) {
        grid-template-columns: 1fr 1fr;

        &.media-first > :is(.media, .world-map) { order: -1; }
        &.wide-media { grid-template-columns: 1fr 1.25fr; }
        &.text-wide { grid-template-columns: 1.15fr 1fr; }
    }
}

.section-head {
    max-width: 900px;
    margin-bottom: clamp(40px, 5vw, 72px);

    > * + * { margin-top: 18px; }
    .link { margin-top: 28px; }

    &.center { margin-inline: auto; text-align: center; }
}

/* Seções ampliadas no design ("Content scale" 1.2 / 1.25); zoom recalcula o layout */
@media (min-width: 1100px) {
    .scale-120, .scale-125 { zoom: 1.1; }
}

@media (min-width: 1440px) {
    .scale-120 { zoom: 1.2; }
    .scale-125 { zoom: 1.25; }
}

/* ---------- Tipografia ---------- */
.display, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy);
    text-wrap: balance;

    & + * { margin-top: 24px; }
}

.display {
    font-size: clamp(2.5rem, 1.55rem + 3.4vw, 4.5rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: #fff;

    &.dark-text { color: var(--navy); font-size: clamp(2.375rem, 1.5rem + 3vw, 4.5rem); }
}

.h2 {
    font-size: clamp(2rem, 1.4rem + 2.1vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;

    &.sm { font-size: clamp(1.875rem, 1.35rem + 1.9vw, 3.25rem); }
}

.h3 {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.875rem);
    line-height: 1.13;
    letter-spacing: -0.012em;
}

.lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 300; line-height: 1.4; }

.body-lg { font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 300; line-height: 1.6; color: var(--ink); }

.body-md { font-size: clamp(1rem, 0.9rem + 0.45vw, 1.3125rem); font-weight: 300; line-height: 1.6; color: var(--muted); }

.small { font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem); font-weight: 300; color: var(--muted); }

* + :is(.lead, .body-lg, .body-md, .small) { margin-top: 20px; }

.eyebrow {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--blue);

    &.on-dark { color: var(--blue-on-dark); }
    &.accent { color: var(--accent); }
    &.small { font-size: 0.8125rem; letter-spacing: 0.16em; }
    &.plain {
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.5625rem);
        color: #7db3f1;
    }
}

.text-blue { color: var(--blue); }

/* ---------- Botões e links ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.95rem + 0.1vw, 1.0625rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: filter 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;

    .icon { transition: translate 0.25s ease; }

    &:hover {
        filter: brightness(0.95);
        box-shadow: 0 8px 24px rgba(18, 32, 50, 0.18);
        .icon { translate: 4px 0; }
    }

    &.primary { background: var(--navy); color: #fff; }
    &.light { background: var(--white); color: var(--navy); }
    &.cream { background: #fbf6ec; color: var(--navy); }
    &.outline { border-color: rgba(26, 49, 87, 0.45); color: var(--navy); &:hover { background: rgba(26, 49, 87, 0.05); } }
    &.outline-light { border-color: rgba(255, 255, 255, 0.7); color: #fff; &:hover { background: rgba(255, 255, 255, 0.08); } }
    &.caps { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: clamp(0.9375rem, 0.9rem + 0.1vw, 1.0625rem); }
    &.small { min-height: 46px; padding: 0 22px; }
}

/* Botões premium (páginas com body.fx): brilho que atravessa, seta em loop e clique
   que afunda. O efeito magnético (translate) vem do app.js. */
@media (prefers-reduced-motion: no-preference) {
    .fx .btn {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        transition: filter 0.25s ease, box-shadow 0.35s ease, background-color 0.25s ease, scale 0.2s ease;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
            translate: -110% 0;
            transition: translate 0.75s var(--ease);
            pointer-events: none;
        }
        &:is(.light, .cream, .outline)::after { background: linear-gradient(110deg, transparent 30%, rgba(26, 49, 87, 0.1) 50%, transparent 70%); }

        &:hover {
            box-shadow: 0 14px 34px rgba(18, 32, 50, 0.22);
            &::after { translate: 110% 0; }
            .icon { translate: 0; animation: arrow-loop 0.6s var(--ease); }
        }
        &:active { scale: 0.97; }
    }
}

@keyframes arrow-loop {
    0% { translate: 0; opacity: 1; }
    45% { translate: 14px 0; opacity: 0; }
    55% { translate: -14px 0; opacity: 0; }
    100% { translate: 0; opacity: 1; }
}

.link {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font-weight: 600;
    color: var(--navy);
    transition: color 0.2s ease;

    &:hover { color: var(--blue); }
    &.light { color: #fff; border-color: rgba(255, 255, 255, 0.6); &:hover { color: var(--blue-on-dark); } }
    &.caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9375rem; }
}

.accent-line {
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--blue);

    &.light { background: rgba(255, 255, 255, 0.85); width: 32px; height: 2px; }
}

.photo { width: 100%; aspect-ratio: 16 / 9.2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Contorno do "a" (decorativo), cor via currentColor */
.mark-outline {
    display: block;
    aspect-ratio: 180 / 175;
    background: currentColor;
    -webkit-mask: url('../img/mark-outline.svg') center / contain no-repeat;
    mask: url('../img/mark-outline.svg') center / contain no-repeat;
    pointer-events: none;
}

/* Voltar ao topo: aparece depois de uma tela de rolagem (classe via JS) */
.to-top {
    position: fixed;
    right: clamp(16px, 2.5vw, 32px);
    bottom: clamp(16px, 2.5vw, 32px);
    z-index: 40;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    visibility: hidden;
    translate: 0 12px;
    transition: opacity 0.3s ease, translate 0.3s var(--ease), visibility 0.3s, background-color 0.2s ease;

    .icon { width: 22px; height: 22px; }
    &:hover { background: var(--navy-dark); }
    &:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
    &.is-visible { opacity: 1; visibility: visible; translate: 0 0; }

    @media (prefers-reduced-motion: reduce) { transition: none; }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--white);
    color: var(--navy);

    &.dark { color: #fff; background: var(--navy); }
    &.overlay { position: fixed; inset: 0 0 auto; background: transparent; }

    /* Fora do topo: sobe --header-shrink e o conteúdo desce metade, sobrando uma barra menor.
       Só transform, sem mexer na altura (sem layout shift). */
    .inner, .logo img { transition: translate 0.35s var(--ease), scale 0.35s var(--ease); }
    &.is-scrolled {
        translate: 0 calc(-1 * var(--header-shrink));
        box-shadow: var(--shadow-sm);
        .inner { translate: 0 calc(var(--header-shrink) / 2); }
        .logo img { scale: 0.82; transform-origin: left center; }
        &.overlay { background: var(--navy); }
    }
    @media (prefers-reduced-motion: no-preference) {
        transition: translate 0.35s var(--ease), background-color 0.35s ease, box-shadow 0.35s ease;
    }
    @media (prefers-reduced-motion: reduce) {
        &, .inner, .logo img { transition: none; }
    }
    /* transform no header prenderia o drawer (position: fixed) dentro dele */
    .nav-open &.is-scrolled { translate: none; transition: none; .inner { translate: none; transition: none; } }
    &.bg-paper-warm { background: var(--paper-warm); }
    &:is(.nutrition, .personal-care, .health-pharma) { background: var(--accent); }

    .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        min-height: 90px;
    }

    .logo {
        flex-shrink: 0;
        img { width: clamp(150px, 14vw, 200px); height: auto; }
    }
    &.dark .logo img { filter: brightness(0) invert(1); }

    .menu-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 1.125rem;
        line-height: 1;
        white-space: nowrap;
        transition: opacity 0.2s ease;

        &:hover { opacity: 0.75; }
        &[aria-current="page"] { font-weight: 600; }
    }

    .caret { width: 14px; height: 14px; transition: rotate 0.25s ease; }
    [aria-expanded="true"] > .caret { rotate: 180deg; }

    .dropdown a {
        display: block;
        &[aria-current="page"] { font-weight: 600; }
    }

    .btn.header { padding: 0 26px; }
    &.light .btn.header { background: var(--navy); color: #fff; }
    &.dark .btn.header { background: var(--white); color: var(--navy); }

    .toggle {
        display: inline-flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;

        .icon { width: 28px; height: 28px; }
        .close { display: none; }
    }

    /* Menu mobile/tablet */
    @media (max-width: 1279px) {
        nav {
            position: fixed;
            inset: 0;
            z-index: -1;
            display: flex;
            flex-direction: column;
            gap: 32px;
            padding: 120px var(--gutter) 40px;
            background: var(--navy);
            color: #fff;
            overflow-y: auto;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s;

            > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
        }

        .logo, .toggle { position: relative; z-index: 1; }

        .menu-link {
            width: 100%;
            justify-content: space-between;
            padding: 18px 0;
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 600;
        }

        .dropdown {
            display: none;
            padding: 0 0 16px 16px;
            a { padding: 10px 0; font-size: 1.125rem; color: #dfe6ef; }
        }
        .is-open > .dropdown { display: block; }

        /* o botão só rotula o grupo aqui: o submenu já abre junto com o drawer */
        .has-dropdown > .menu-link { cursor: default; .caret { display: none; } }

        nav .btn.header { align-self: flex-start; background: var(--white); color: var(--navy); }

        .nav-open & {
            color: #fff;
            nav { opacity: 1; visibility: visible; }
            .logo img { filter: brightness(0) invert(1); }
            .toggle .open { display: none; }
            .toggle .close { display: block; }
        }
    }

    @media (min-width: 1280px) {
        .toggle { display: none; }
        nav { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 48px); }
        nav > ul { display: flex; align-items: center; gap: clamp(18px, 1.9vw, 36px); }
        .menu-link { font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem); }

        .has-dropdown { position: relative; }
        .dropdown {
            position: absolute;
            top: calc(100% + 18px);
            left: -20px;
            min-width: 220px;
            padding: 10px;
            border-radius: var(--radius);
            background: #fff;
            color: var(--navy);
            box-shadow: var(--shadow);
            opacity: 0;
            visibility: hidden;
            translate: 0 -6px;
            transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s;

            &::before { content: ''; position: absolute; inset: -18px 0 auto; height: 18px; }
            a { padding: 10px 12px; border-radius: 8px; font-size: 1rem; &:hover { background: var(--cool); } }
        }
        .has-dropdown:is(.is-open, :hover, :focus-within) .dropdown { opacity: 1; visibility: visible; translate: 0 0; }
    }

    @media (min-width: 1280px) and (max-width: 1365px) {
        nav { gap: 20px; }
        nav > ul { gap: 18px; }
        .btn.header { padding: 0 20px; }
    }
}

.site-footer {
    background: var(--navy);
    color: var(--white);

    .stripe {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 6px;

        span:nth-child(1) { background: var(--personal-care); }
        span:nth-child(2) { background: var(--health-pharma); }
        span:nth-child(3) { background: var(--nutrition); }
    }

    .top {
        display: grid;
        gap: 40px;
        padding-block: 52px 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);

        @media (min-width: 900px) { grid-template-columns: 1fr auto; align-items: start; }
    }

    .name { font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; }
    .summary { max-width: 320px; margin-top: 12px; line-height: 1.45; }
    .tagline { margin-top: 16px; font-size: 0.9375rem; color: var(--gold); }

    .cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 32px 40px;

        @media (min-width: 900px) { grid-template-columns: repeat(3, auto); gap: 56px; }

        h2 { margin-bottom: 10px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--gold); }
        li + li { margin-top: 8px; }
        a { transition: color 0.2s ease; &:hover { color: var(--blue-on-dark); } }
    }

    .social { display: inline-flex; align-items: center; gap: 8px; .icon { width: 14px; height: 14px; } }
    .legal { padding-block: 18px 24px; font-size: 0.9375rem; }
}

.hero-photo {
    position: relative;
    display: flex;
    align-items: center;
    /* abaixo da tela cheia: a próxima seção aparece na dobra */
    min-height: max(560px, 85svh);
    padding-block: 140px 80px;
    overflow: hidden;
    background: var(--navy-dark);
    color: #fff;

    .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(90deg, rgba(18, 32, 50, 0.92) 0%, rgba(18, 32, 50, 0.7) 32%, rgba(18, 32, 50, 0.15) 62%, rgba(18, 32, 50, 0) 80%),
            linear-gradient(180deg, rgba(18, 32, 50, 0.45) 0%, rgba(18, 32, 50, 0) 22%);
    }

    .content { position: relative; z-index: 2; }
    .copy { max-width: 820px; }

    .accent {
        margin-top: 28px;
        font-family: var(--font-display);
        font-size: clamp(1.375rem, 1.1rem + 1vw, 2.125rem);
        font-weight: 500;
        line-height: 1.25;
        color: var(--blue-on-dark);
    }

    .text {
        max-width: 640px;
        margin-top: 28px;
        font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.5rem);
        font-weight: 300;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
    }

    .btn { margin-top: 40px; }

    @media (max-width: 767px) {
        align-items: flex-end;
        &::before { background: linear-gradient(0deg, rgba(18, 32, 50, 0.95) 0%, rgba(18, 32, 50, 0.75) 55%, rgba(18, 32, 50, 0.35) 100%); }
    }
}

/* ---------- Faixa de chamada final ---------- */
.cta {
    position: relative;
    padding-block: clamp(56px, 6vw, 96px);
    overflow: hidden;
    background: var(--paper);

    &.surface-dark { background: var(--dark-gradient); }

    .mark {
        position: absolute;
        right: -4%;
        top: 50%;
        width: min(560px, 60vw);
        translate: 0 -50%;
        color: rgba(26, 49, 87, 0.08);
    }
    &.surface-dark .mark { color: rgba(156, 195, 242, 0.16); }

    .grid {
        position: relative;
        display: grid;
        gap: 32px 80px;
        align-items: center;

        @media (min-width: 1100px) { grid-template-columns: 1fr 1fr; }
    }

    .h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.625rem); }
    .body p { font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.3125rem); font-weight: 300; line-height: 1.6; color: var(--muted); & + p { margin-top: 20px; } }
    &.surface-dark .body p { color: #dfe6ef; }
    .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 36px; }
    &.surface-dark .actions .btn { color: var(--navy); }
    .body .note { margin-top: 24px; font-size: 1rem; .link { margin-left: 6px; } }
}

.market-hero {
    display: grid;
    gap: 48px;
    padding-block: clamp(48px, 7vw, 120px);
    overflow: hidden;
    background: var(--paper-warm);

    .copy { max-width: calc(780px + 2 * var(--gutter)); margin: 0; }
    .lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem); line-height: 1.6; color: var(--muted); }
    .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
    .media { padding-left: var(--gutter); }
    .media img { width: 100%; aspect-ratio: 920 / 760; object-fit: cover; border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow); }

    @media (min-width: 1100px) {
        grid-template-columns: 1fr 1fr;
        align-items: center;

        /* o recuo que alinha o texto ao container soma-se à largura: senão o texto encolhe em telas largas */
        .copy { width: 100%; max-width: calc(780px + max(var(--gutter), (100vw - var(--container-wide)) / 2)); padding-left: max(var(--gutter), calc((100vw - var(--container-wide)) / 2)); padding-right: 0; }
        .media { padding-left: 0; }
    }
}

.marquee {
    overflow: hidden;
    border-block: 1px solid var(--line);
    background: var(--white);

    .track { display: flex; align-items: center; gap: 32px; width: max-content; padding-block: 22px; animation: marquee 40s linear infinite; }
    .item { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--accent); white-space: nowrap; }

    .symbol {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background: var(--accent);
        -webkit-mask: url('../img/symbol-mono.svg') center / contain no-repeat;
        mask: url('../img/symbol-mono.svg') center / contain no-repeat;
    }
}

@keyframes marquee { to { translate: -50% 0; } }

.market-intro {
    .opening { max-width: 900px; margin-inline: auto; text-align: center; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.5rem); font-weight: 300; line-height: 1.5; color: var(--muted); }

    .approach-list {
        display: grid;
        gap: 32px;
        max-width: 1400px;
        margin: clamp(40px, 5vw, 64px) auto 0;

        li { padding-block: 4px; }
        /* mobile: divisória horizontal entre os blocos (no desktop é vertical) */
        @media (max-width: 899px) { li + li { padding-top: 32px; border-top: 1px solid var(--line); } }
        h2 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); font-weight: 700; color: var(--navy); }
        p { margin-top: 12px; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); font-weight: 300; line-height: 1.6; color: var(--muted); }

        @media (min-width: 900px) {
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            li { padding-inline: clamp(24px, 3vw, 48px); }
            li + li { border-left: 1px solid var(--line); }
        }
    }

    .note { max-width: 900px; margin: clamp(64px, 8vw, 120px) auto clamp(40px, 5vw, 64px); text-align: center; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 300; color: #6b778b; }
}

.categories {
    display: grid;
    gap: clamp(32px, 4vw, 64px);

    @media (min-width: 900px) { max-width: var(--container); margin-inline: auto; }

    .group { margin-top: 16px; text-align: center; font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1.0625rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

    article { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }

    header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 24px;
        padding: 20px 28px;
        background: var(--accent);
        color: #fff;

        h2 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
        p { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    }

    .body {
        display: grid;
        @media (min-width: 900px) { grid-template-columns: 1fr minmax(280px, 396px); }
    }

    .content {
        padding: 28px;
        @media (min-width: 900px) { padding: 32px 30px 36px; }
    }

    .intro { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }

    /* imagem ocupa a coluna inteira, na altura do texto (o grid item é o <picture>) */
    .body picture {
        display: block;
        position: relative;
        overflow: hidden;
        order: -1;
        aspect-ratio: 4 / 3;
        max-height: 480px;
        @media (min-width: 900px) { order: 0; aspect-ratio: auto; max-height: none; }
    }

    /* 4% de sobra em cima e embaixo para o parallax (app.js); --focus enquadra os rostos */
    .body img { position: absolute; inset: -4% 0; width: 100%; height: 108%; object-fit: cover; object-position: var(--focus, 50% 10%); }

    /* focos calculados para os rostos caberem do mobile ao desktop, com o parallax */
    img[src*="nutrition-supplements"] { --focus: 45% 8%; }
    img[src*="nutrition-food-beverage"] { --focus: 35% 40%; }
    img[src*="nutrition-pet"] { --focus: 47% 50%; }
    img[src*="nutrition-frozen-desserts"] { --focus: 50% 50%; }
    img[src*="personal-care-skin"] { --focus: 45% 20%; }
    img[src*="personal-care-hair"] { --focus: 50% 25%; }
    img[src*="personal-care-oral"] { --focus: 50% 6%; }
    img[src*="health-pharma-compounding"] { --focus: 60% 6%; }
    img[src*="health-pharma-veterinary"] { --focus: 0% 9%; }

    .ingredients {
        margin-top: 18px;

        li {
            position: relative;
            padding: 14px 0 14px 28px;
            font-size: 1rem;
            font-weight: 300;
            line-height: 1.55;
            color: var(--muted);

            & + li { border-top: 1px solid var(--line); }

            &::before {
                content: '';
                position: absolute;
                top: 21px;
                left: 2px;
                width: 12px;
                height: 7px;
                border: 1.5px solid var(--gold);
                border-bottom: 0;
                border-radius: 12px 12px 0 0;
            }
        }

        strong { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
    }
}

@media (prefers-reduced-motion: no-preference) {
    :is(.home-hero, .hero-photo) .bg { animation: ken-burns 22s cubic-bezier(0.25, 0.1, 0.25, 1) both; transform-origin: 50% 55%; }
}

@keyframes ken-burns { from { scale: 1; } to { scale: 1.06; } }

/* Transição entre páginas (View Transitions entre documentos, sem JS).
   A página atual recua e escurece; a nova sobe revelada de baixo para cima.
   O header fica fixo por cima. Navegador sem suporte troca de página normal. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    .site-header { view-transition-name: site-header; }

    ::view-transition-group(root) { background: var(--navy-dark); }
    ::view-transition-old(root) { animation: page-out 0.6s var(--ease) both; }
    ::view-transition-new(root) { animation: page-in 0.8s var(--ease) 0.1s both; }
}

@keyframes page-out { to { opacity: 0.35; scale: 0.96; translate: 0 -2%; } }

@keyframes page-in { from { clip-path: inset(100% 0 0 0); translate: 0 6%; } to { clip-path: inset(0 0 0 0); translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}