/* Estilos só da página why_alimenta (app/Views/why_alimenta.php). Carregado depois do base.css. */

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

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;

    li {
        padding: 9px 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        font-family: var(--font-display);
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--navy);
    }
}

.why-hero {
    padding-block: clamp(48px, 5vw, 88px);

    .eyebrow { font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); }
    .display { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); }
}

.platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    @media (min-width: 1440px) { margin-inline: -4px 4px; }

    li { position: relative; text-align: center; }
    li + li::before {
        content: '';
        position: absolute;
        top: 6%;
        bottom: 6%;
        left: -20px;
        width: 40px;
        /* curva do modelo (arco suave com fade nas pontas); stroke fixo mesmo esticada */
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 420' preserveAspectRatio='none'%3E%3ClinearGradient id='g' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a3157' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%231a3157' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%231a3157' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath d='M26 0C12 115 12 305 26 420' fill='none' stroke='url(%23g)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
        pointer-events: none;
    }

    a { display: flex; flex-direction: column; align-items: center; padding: 0 8px 12px; }
    .media {
        display: grid;
        place-items: end center;
        height: clamp(160px, 22vw, 320px);
        width: 100%;

        source { display: none; }
        img {
            width: 100%;
            height: 100%;
            min-height: 0;
            object-fit: contain;
            object-position: center bottom;
            transition: translate 0.4s var(--ease);
        }
    }
    .nutrition .media img { height: 88.5%; position: relative; top: clamp(16px, 2.7vw, 40px); }
    .personal-care .media img { height: 112.5%; position: relative; top: clamp(16px, 2.7vw, 40px); }
    .health-pharma .media img {
        width: 140%;
        max-width: 235px;
        max-height: 62.5%;
        height: auto;
        align-self: end;
        position: relative;
        top: clamp(8px, 1.2vw, 18px);
    }
    a:hover .media img { translate: 0 -8px; }

    .name {
        margin-top: 18px;
        font-family: var(--font-display);
        font-size: clamp(0.9375rem, 0.6rem + 0.9vw, 1.375rem);
        font-weight: 700;
        color: var(--navy);
        white-space: nowrap;

        @media (max-width: 639px) { white-space: normal; min-height: 3.1em; }
        @media (1100px <= width < 1440px) { font-size: clamp(0.9375rem, 1.45vw, 1.125rem); }
    }
    .verb {
        margin-top: 6px;
        font-size: 0.8125rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);

        &::after { content: ''; display: block; width: 46px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--accent); }
    }
}

.three-markets {
    position: relative;
    max-width: 640px;
    margin-inline: auto;
    padding-inline: 25%;

    .label {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 23%;
        font-size: clamp(0.625rem, 0.55rem + 0.25vw, 0.8125rem);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        line-height: 1.4;
        color: var(--navy);

        &::after { content: ''; width: clamp(30px, 4vw, 70px); height: 1px; background: var(--accent); }
        &.health-pharma { top: 8%; left: 0; }
        &.personal-care { top: 44%; right: 0; align-items: flex-end; }
        &.nutrition { bottom: 8%; left: 0; }
    }

    @media (max-width: 599px) {
        padding-inline: 0;
        .label { display: none; }
    }
}

.routes {
    .section-head .body-lg { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.5rem); }

    .track {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(250px, 78%);
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding-bottom: 6px;

        &::-webkit-scrollbar { display: none; }
        @media (min-width: 640px) { grid-auto-columns: calc((100% - 14px) / 2); }
        @media (min-width: 900px) { grid-auto-columns: calc((100% - 28px) / 3); }
        @media (min-width: 1100px) { grid-auto-columns: calc((100% - 42px) / 4); }
    }

    .route {
        scroll-snap-align: start;
        overflow: hidden;
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow-sm);

        img { width: 100%; aspect-ratio: 340 / 191; object-fit: cover; border-radius: 0 0 50% 50% / 0 0 22% 22%; }
        .body { padding: 14px 22px 26px; }
        h3 { min-height: 2.4em; font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.25vw, 1.3125rem); font-weight: 700; line-height: 1.2; color: var(--navy); }
        dl { margin-top: 12px; }
        dl > div { padding-block: 10px; border-top: 1px solid var(--line); &:first-child { border-top: 0; } }

        dt {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent);

            &::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
        }

        dd { margin-top: 4px; font-size: 0.9375rem; line-height: 1.35; color: var(--ink); }
    }

    .nav { display: flex; justify-content: center; gap: 56px; margin-top: 36px; }

    .nav button {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #fff;
        color: var(--navy);
        box-shadow: var(--shadow-sm);
        transition: opacity 0.2s ease;

        &.primary { background: var(--navy); color: #fff; }
        &:disabled { opacity: 0.4; cursor: default; }
    }

    .quote {
        margin-top: 48px;
        text-align: center;
        font-family: var(--font-display);
        font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3125rem);
        font-style: italic;
        font-weight: 500;
        color: var(--navy);
    }
}

.approach {
    display: grid;
    background: var(--white);
    overflow: hidden;

    .content { padding: var(--section-y) var(--gutter); }
    .inner { max-width: 800px; margin-inline: auto; }
    .h3 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
    .media img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

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

        .content { padding-left: clamp(var(--gutter), 6.8vw, 130px); padding-right: clamp(40px, 5vw, 96px); }
        .inner { margin-inline: 0; }
        .media { align-self: stretch; padding-block: 80px; }
        .media img { aspect-ratio: auto; border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--shadow); }
    }
}

.timeline {
    position: relative;
    margin-top: 40px;

    &::before { content: ''; position: absolute; top: 24px; bottom: 40px; left: 28px; width: 1px; background: rgba(26, 49, 87, 0.18); }

    li { position: relative; padding: 0 0 34px 84px; }

    .dot {
        position: absolute;
        top: -6px;
        left: 0;
        display: grid;
        place-items: center;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        font-family: var(--font-display);
        font-size: 1.0625rem;
        font-weight: 700;
        color: #fff;
        background: var(--accent);
    }

    h3 { font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.125rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
    p { margin-top: 10px; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4375rem); font-weight: 300; line-height: 1.55; color: var(--muted); }
}

.cta-photo {
    position: relative;
    display: grid;
    place-items: center;
    min-height: max(520px, 80svh);
    padding-block: 120px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    background: var(--navy-dark);

    .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    &::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(18, 32, 50, 0.55), rgba(18, 32, 50, 0.15) 75%); }

    .content { position: relative; z-index: 2; max-width: calc(900px + 2 * var(--gutter)); }
    .h2 { color: #fff; font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
    .lead { color: rgba(255, 255, 255, 0.9); font-size: clamp(1.0625rem, 1rem + 0.55vw, 1.625rem); line-height: 1.6; }
    .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
}

/* Blocos empilhados na rolagem (cada <section> filha da .stack).
   --stack-peek: onde o bloco gruda (abaixo do header + a pontinha dos anteriores) */
.stack {
    @media (min-width: 1100px) {
        > section {
            position: sticky;
            top: var(--stack-top, 0px);
            display: grid;
            align-content: center;
            min-height: calc(100svh - var(--stack-peek, 0px));
            overflow: hidden;

            /* véu com o próprio fundo: some com o conteúdo de quem ficou na pilha */
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 20;
                background: inherit;
                opacity: var(--stack-cover, 0);
                pointer-events: none;
            }

            & + section {
                margin-top: -32px;
                border-radius: 28px 28px 0 0;
                box-shadow: 0 -18px 44px rgba(18, 32, 50, 0.16);
            }
        }

        > section:nth-child(1) { z-index: 1; }
        > section:nth-child(2) { z-index: 2; }

        .approach { padding-top: 32px; }
        .approach .media { padding-block: 90px 60px; }
    }
}