/* ============================================================
       RESET & BASE
       ============================================================ */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background: var(--bg);
        color: var(--fg);
        font-family: var(--font-body);
        overflow-x: hidden;
    }

    img,
    svg {
        max-width: 100%;
        display: block;
    }

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

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

    ul {
        list-style: none;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-bottom: 2rem;
    }

    .container {
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 var(--gutter);
        position: relative;
    }

    .container.wide {
        max-width: var(--container-wide);
    }

    .container.narrow {
        max-width: var(--container-narrow);
    }

    /* =========h===================================================
       EYEBROW (shared)
       ============================================================ */
    .eyebrow {
        font-family: var(--font-display-ext);
        font-size: var(--fs-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: var(--tracking-eyebrow);
        color: var(--gold-800);
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
    }

    .eyebrow::before {
        content: '';
        width: 28px;
        height: 1px;
        background: currentColor;
        opacity: .8;
    }

    .on-navy .eyebrow,
    .navy-section .eyebrow {
        color: var(--gold-500);
    }

    /* Gold triangle bullet (DNA from logo) */
    .tri {
        display: inline-block;
        flex-shrink: 0;
        width: 12px;
        height: 14px;
        background: var(--gold-600);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .tri.lg {
        width: 22px;
        height: 26px;
    }

    .tri.xl {
        width: 40px;
        height: 46px;
    }

    /* ============================================================
       BUTTONS
       ============================================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 14px;
        padding: 16px 24px;
        border-radius: var(--radius-md);
        transition: transform var(--duration) var(--ease-out), background var(--duration), box-shadow var(--duration), color var(--duration);
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .btn svg {
        width: 18px;
        height: 18px;
    }

    .btn.gold {
        background: var(--gold-600);
        color: var(--navy-900);
        box-shadow: var(--shadow-gold);
    }

    .btn.gold:hover {
        background: var(--gold-700);
        transform: translateY(-2px);
    }

    .btn.navy {
        background: var(--navy-900);
        color: var(--cream);
    }

    .btn.navy:hover {
        background: var(--navy-950);
        transform: translateY(-2px);
    }

    .btn.ghost {
        background: transparent;
        color: var(--navy-900);
        box-shadow: inset 0 0 0 1.5px var(--navy-900);
    }

    .btn.ghost:hover {
        background: var(--navy-900);
        color: var(--cream);
    }

    .btn.ghost-light {
        background: transparent;
        color: var(--cream);
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
    }

    .btn.ghost-light:hover {
        background: var(--cream);
        color: var(--navy-900);
        box-shadow: inset 0 0 0 1.5px var(--cream);
    }

    .btn.sm {
        padding: 11px 18px;
        font-size: 13px;
        border-radius: 10px;
    }

    .btn.sm svg {
        width: 16px;
        height: 16px;
    }

    /* ============================================================
       HEADER — absolute over hero, slides in fixed on scroll
       ============================================================ */
    .header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 80;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid transparent;
    }

    .header .row {
        display: flex;
        align-items: center;
        gap: clamp(24px, 4vw, 56px);
        padding: 22px 0;
        transition: padding var(--duration) var(--ease-out);
    }

    /* FIXED (after scroll) — slides down from top with frosted glass */
    .header.fixed {
        position: fixed;
        top: 0;
        background: rgba(255, 255, 249, 0.72);
        backdrop-filter: blur(20px) saturate(1.4);
        -webkit-backdrop-filter: blur(20px) saturate(1.4);
        border-bottom-color: rgba(7, 19, 56, 0.06);
        box-shadow: 0 10px 30px -20px rgba(7, 19, 56, 0.18);
        animation: header-slide-down var(--duration-slow) var(--ease-out) both;
    }

    .header.fixed .row {
        padding: 14px 0;
    }

    .header.fixed img.logo {
        height: 36px;
    }

    @keyframes header-slide-down {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .header .logo-wrap {
        display: inline-flex;
        align-items: center;
    }

    .header img.logo {
        height: 42px;
        width: auto;
        display: block;
        transition: height var(--duration) var(--ease-out);
    }

    .header nav {
        display: flex;
        gap: clamp(20px, 2.6vw, 36px);
        flex: 1;
        justify-content: center;
    }

    .header nav a {
        font-size: 15px;
        font-weight: 700;
        color: var(--navy-900);
        padding: 8px 0;
        position: relative;
        transition: color var(--duration);
        letter-spacing: -0.005em;
    }

    .header nav a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 100%;
        bottom: 0;
        height: 2px;
        background: var(--gold-600);
        transition: right var(--duration) var(--ease-out);
    }

    .header nav a:hover {
        color: var(--gold-800);
    }

    .header nav a:hover::after,
    .header nav a.active::after {
        right: 0;
    }

    .header nav a.active {
        color: var(--gold-800);
    }

    .header .cta-group {
        display: inline-flex;
        gap: 20px;
        align-items: center;
    }

    /* inline phone */
    .phone-link {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--navy-900);
        transition: color var(--duration);
    }

    .phone-link .lbl {
        color: var(--neutral-500);
        font-weight: 700;
        font-size: 13px;
    }

    .phone-link strong {
        font-weight: 700;
        color: var(--navy-900);
        letter-spacing: -0.005em;
        font-size: 14px;
    }

    .phone-link:hover strong {
        color: var(--gold-800);
    }

    /* pill variant of .btn (radius 999) */
    .btn.pill {
        border-radius: var(--radius-pill);
        padding: 14px 22px 14px 24px;
    }

    .btn.pill.sm {
        padding: 12px 18px 12px 22px;
    }

    .burger {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--navy-900);
        color: var(--cream);
        align-items: center;
        justify-content: center;
    }

    .burger svg {
        width: 22px;
        height: 22px;
    }

    @media (max-width: 1100px) {
        .header .phone-link {
            display: none;
        }
    }

    @media (max-width: 1020px) {
        .header nav {
            display: none;
        }

        .burger {
            display: inline-flex;
        }

        .header .cta-group {
            gap: 10px;
        }
    }

    @media (max-width: 560px) {
        .header .cta-group .gold span {
            display: none;
        }

        .header .cta-group .gold {
            padding: 12px;
        }

        .header .cta-group .gold svg {
            margin: 0;
        }
    }

    /* ============================================================
       MOBILE MENU
       ============================================================ */
    .mob-menu {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--navy-950);
        color: var(--cream);
        padding: 24px var(--gutter);
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform var(--duration-slow) var(--ease-out);
    }

    .mob-menu.open {
        transform: translateX(0);
    }

    .mob-menu .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 28px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .mob-menu .head img {
        height: 34px;
    }

    .mob-menu .close {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--gold-600);
        color: var(--navy-900);
        display: grid;
        place-items: center;
    }

    .mob-menu .close svg {
        width: 22px;
        height: 22px;
    }

    .mob-menu nav {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        flex: 1;
    }

    .mob-menu nav a {
        padding: 18px 0;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 26px;
        color: var(--cream);
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mob-menu nav a .num {
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 700;
        color: var(--gold-600);
    }

    .mob-menu .actions {
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* ============================================================
       HERO  — asymmetric, big type + photo overlay
       ============================================================ */
    /* HERO — padding-top accommodates absolute header sitting over it */
    .hero {
        position: relative;
        padding: clamp(120px, 14vw, 180px) 0 clamp(60px, 8vw, 120px);
        overflow: hidden;
        background:
            radial-gradient(circle at 90% 10%, rgba(215, 180, 106, .07), transparent 50%),
            var(--cream);
    }

    .hero .grid {
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        gap: clamp(32px, 5vw, 80px);
        align-items: center;
    }

    .hero .copy {
        max-width: 620px;
        position: relative;
        z-index: 2;
    }

    .hero h1 {
        font-family: 'Cormorant Garamond', 'Times New Roman', serif;
        font-weight: 400;
        font-size: clamp(2.75rem, 6vw, 5.5rem);
        line-height: 1.02;
        letter-spacing: -0.015em;
        margin-bottom: 28px;
        color: var(--navy-900);
        text-wrap: balance;
    }

    .hero h1 .hl-gold {
        color: var(--gold-700);
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.005em;
    }

    .hero h1 .nowrap {
        white-space: nowrap;
    }

    .hero p.lead {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: clamp(17px, 1.4vw, 20px);
        line-height: 1.5;
        color: var(--neutral-700);
        max-width: 520px;
        margin-bottom: 36px;
    }

    .hero .actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }

    .hero .seal-strip {
        display: none !important;
    }

    /* ============================================================
       HERO VISUAL SLIDER — floating cut-out, no card chrome
       ============================================================ */
    .hero .visual {
        position: relative;
        aspect-ratio: 4/5;
        background: transparent;
        isolation: isolate;
    }

    /* Slides stack — each slide is just the product cut-out floating */
    .hero .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.9s var(--ease-out), transform 1.2s var(--ease-out);
        transform: scale(1.04);
        z-index: 2;
        display: grid;
        place-items: center;
        padding: 0 0 4%;
    }

    .hero .slide.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        z-index: 3;
    }

    .hero .slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        filter: drop-shadow(0 40px 50px rgba(7, 19, 56, 0.35));
    }

    /* Squircle card — floats at bottom over the product */
    .hero .visual .squircle {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        max-width: 360px;
        background: var(--navy-900);
        color: var(--cream);
        border-radius: var(--radius-xl);
        padding: 22px 26px 24px;
        box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .45);
        z-index: 5;
        border: 1px solid rgba(255, 255, 255, .06);
    }

    .hero .visual .squircle .swap-text {
        transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    }

    .hero .visual .squircle.swapping .swap-text {
        opacity: 0;
        transform: translateY(8px);
    }

    .hero .visual .squircle .ey {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--gold-500);
        margin-bottom: 10px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .hero .visual .squircle .ey .tri {
        width: 9px;
        height: 11px;
    }

    .hero .visual .squircle .title {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 22px;
        line-height: 1.1;
        letter-spacing: -0.01em;
    }

    .hero .visual .squircle .title .hl-gold {
        color: var(--gold-600);
        font-style: italic;
    }

    .hero .visual .squircle .meta {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        display: flex;
        justify-content: space-between;
        gap: 16px;
    }

    .hero .visual .squircle .meta .m {
        font-size: 11px;
        color: var(--navy-300);
        font-weight: 700;
    }

    .hero .visual .squircle .meta .m strong {
        color: var(--cream);
        font-size: 16px;
        display: block;
        font-family: var(--font-display);
        font-weight: 700;
    }

    /* slider indicators — sit below the visual */
    .hero .slider-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -36px;
        display: flex;
        gap: 10px;
        align-items: center;
        z-index: 5;
        padding: 0 4px;
    }

    .hero .slider-dots .dot {
        width: 36px;
        height: 3px;
        background: var(--neutral-200);
        border-radius: 2px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: background var(--duration);
        border: 0;
        padding: 0;
    }

    .hero .slider-dots .dot::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gold-600);
        width: 0;
    }

    .hero .slider-dots .dot.active::after {
        width: 100%;
        transition: width var(--slide-duration, 5s) linear;
    }

    .hero .slider-dots .dot:hover {
        background: var(--gold-300);
    }

    .hero .slider-dots .label {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--neutral-500);
        margin-left: auto;
    }

    .hero .slider-dots .label .cur {
        color: var(--navy-900);
        font-weight: 600;
    }

    /* watermark big silhouette behind hero — anchored bottom-right (animals standing), per-category scaling */
    .hero .watermark-d {
        position: absolute;
        right: -8%;
        bottom: 0;
        top: auto;
        width: 56%;
        height: 95%;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        user-select: none;
        transition: opacity 1s var(--ease-out);
        overflow: visible;
    }

    .hero .watermark-d.active {
        opacity: 0.08;
    }

    .hero .watermark-d img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: bottom right;
        /* SVGs use navy fill #071338 natively */
    }

    /* per-category tuning — all animals grounded at bottom, sized consistently */
    .hero .watermark-d[data-wm="bovinos"] img {
        transform: scale(0.95);
        transform-origin: bottom right;
    }

    .hero .watermark-d[data-wm="frangos"] img {
        transform: scale(0.92) translate(-2%, 4%);
        transform-origin: bottom right;
    }

    .hero .watermark-d[data-wm="peixes"] img {
        transform: scale(1.2) translate(15%, -28%);
        transform-origin: bottom right;
    }

    .hero .watermark-d[data-wm="suinos"] img {
        transform: scale(2.9) translate(2%, 32%);
        transform-origin: bottom right;
    }

    @media (max-width: 980px) {
        .hero .watermark-d {
            width: 80%;
            right: -5%;
        }

        .hero .watermark-d[data-wm="peixes"] img {
            width: 80%;
            right: -5%;
            top: 20%;
            bottom: 0%;
        }

        .hero .watermark-d[data-wm="suinos"] img {
            width: 55%;
            right: -5%;
            top: auto;
            bottom: 55%;
        }

        .cta-band .row {
            gap: 60px;
        }

        footer .col {
            display: none;
        }

        footer.site .bottom span {
            max-width: 80%;
        }   
    }

    @media (max-width: 980px) {
        .hero .grid {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .hero .visual {
            aspect-ratio: 4/4;
            max-width: 560px;
            margin: 0 auto;
        }

        .hero .seal-strip {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 480px) {
        .hero .seal-strip {
            grid-template-columns: 1fr;
            gap: 14px;
        }
    }

    /* ============================================================
       LOGOS / TRUST STRIP
       ============================================================ */
    .trust {
        background: var(--neutral-100);
        padding: 28px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .trust .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .trust .label {
        font-family: var(--font-display-ext);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--neutral-500);
    }

    .trust .badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .trust .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        background: var(--cream);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        font-size: 12px;
        font-weight: 700;
        color: var(--navy-900);
    }

    .trust .badge svg {
        width: 14px;
        height: 14px;
        color: var(--gold-700);
    }

    /* ============================================================
       SECTIONS — generic chrome
       ============================================================ */
    section.sec {
        padding: var(--section-py) 0;
        position: relative;
    }

    section.sec.alt {
        background: var(--neutral-100);
    }

    section.sec.navy {
        background: var(--navy-900);
        color: var(--cream);
        overflow: hidden;
    }

    section.sec.navy h2,
    section.sec.navy h3,
    section.sec.navy h4 {
        color: var(--cream);
        margin-bottom: 2rem;
    }

    .sec-head {
        max-width: 720px;
        margin-bottom: 56px;
    }

    .sec-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .sec-head.center .eyebrow {
        justify-content: center;
    }

    .sec-head h2 {
        font-family: 'Cormorant Garamond', 'Times New Roman', serif;
        font-weight: 400;
        font-size: clamp(2.25rem, 4vw, 3.5rem);
        line-height: 1.0;
        letter-spacing: -0.015em;
        margin-bottom: 18px;
        text-wrap: balance;
    }

    .sec-head h2 .hl-gold {
        color: var(--gold-700);
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.005em;
    }

    section.sec.navy .sec-head h2 {
        color: var(--cream);
    }

    section.sec.navy .sec-head h2 .hl-gold {
        color: var(--gold-500);
    }

    .sec-head p {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: clamp(17px, 1.2vw, 19px);
        line-height: 1.55;
        color: var(--neutral-700);
        max-width: 620px;
    }

    section.sec.navy .sec-head p {
        color: var(--navy-300);
    }

    .sec-head.center p {
        margin-left: auto;
        margin-right: auto;
    }

    /* Split variant: title on the left, paragraph on the right */
    .sec-head--split {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: clamp(32px, 5vw, 80px);
        align-items: end;
        max-width: none;
    }

    .sec-head--split .sh-title {
        max-width: 640px;
    }

    .sec-head--split p {
        max-width: 480px;
        margin: 0;
        padding-bottom: 8px;
    }

    @media (max-width: 880px) {
        .sec-head--split {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .sec-head--split p {
            padding-bottom: 0;
        }
    }

    /* Stylish gold top border for highlighted sections */
    section.sec.gold-top {
        border-top: 1px solid transparent;
    }

    section.sec.gold-top::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(215, 180, 106, 0) 8%,
                rgba(215, 180, 106, 0.5) 30%,
                var(--gold-600) 50%,
                rgba(215, 180, 106, 0.5) 70%,
                rgba(215, 180, 106, 0) 92%,
                transparent 100%);
        z-index: 3;
    }

    /* AD mark SVG watermark for navy sections */
    section.sec.navy .ad-bg {
        position: absolute;
        left: -8%;
        top: 50%;
        transform: translateY(-50%);
        width: 52%;
        max-width: 900px;
        opacity: 0.05;
        pointer-events: none;
        user-select: none;
        z-index: 0;
    }

    section.sec.navy .ad-bg img {
        width: 100%;
        height: auto;
        display: block;
        filter: brightness(0) saturate(100%) invert(78%) sepia(31%) saturate(431%) hue-rotate(2deg) brightness(95%) contrast(88%);
    }

    /* AD watermark legacy text (kept for other sections) */
    .ad-watermark {
        position: absolute;
        pointer-events: none;
        user-select: none;
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--gold-600);
        opacity: 0.05;
        line-height: 0.8;
        letter-spacing: -0.05em;
        z-index: 0;
    }

    /* ============================================================
       SOBRE — AD mask image + content + stats
       ============================================================ */
    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: clamp(40px, 5vw, 80px);
        align-items: center;
        margin-bottom: 50px;
    }

    /* About 3-column feature row (sits below the grid) */
    .about-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding-top: clamp(32px, 4vw, 56px);
        border-top: 1px solid var(--border);
    }

    .af-card {
        display: flex;
        gap: 18px;
        align-items: flex-start;
        padding: 28px 26px;
        background: var(--cream);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), border-color var(--duration);
        position: relative;
        overflow: hidden;
    }

    .af-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: var(--gold-300);
    }

    .af-card .af-ic {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
        color: var(--gold-800);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        position: relative;
    }

    .af-card .af-ic::after {
        content: '';
        position: absolute;
        right: -3px;
        top: -3px;
        width: 9px;
        height: 11px;
        background: var(--gold-600);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .af-card .af-ic svg {
        width: 24px;
        height: 24px;
    }

    .af-card .af-body h3 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 17px;
        letter-spacing: -0.01em;
        line-height: 1.2;
        color: var(--navy-900);
        margin-bottom: 8px;
    }

    .af-card .af-body p {
        font-size: 14px;
        font-weight: 200;
        color: var(--neutral-600);
        line-height: 1.55;
    }

    @media (max-width: 980px) {
        .about-features {
            grid-template-columns: 1fr;
            gap: 14px;
        }
    }

    /* SVG AD mask container */
    .about-img {
        position: relative;
        aspect-ratio: 680/485;
        max-width: 600px;
    }

    .about-img .ad-mask {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
    }

    .about-img .ad-mask .a-fill {
        fill: var(--gold-600);
    }

    /* Standalone decorative gold triangle (echoes the brand mark) */
    .about-img .tri-deco {
        position: absolute;
        left: -8%;
        bottom: -2%;
        width: 14%;
        aspect-ratio: 1/1.15;
        background: var(--gold-600);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .about-content h2 .hl-gold {
        color: var(--gold-700);
        font-style: italic;
        font-weight: 500;
    }

    .about-content h2 {
        font-family: 'Cormorant Garamond', 'Times New Roman', serif;
        font-weight: 400;
        font-size: clamp(2.25rem, 4vw, 3.5rem);
        line-height: 1.02;
        letter-spacing: -0.015em;
        margin-bottom: 22px;
        text-wrap: balance;
        color: var(--navy-900);
    }

    .about-content .lead-p {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: 18px;
        line-height: 1.55;
        color: var(--neutral-700);
        margin-bottom: 24px;
    }

    .about-points {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 32px 0 40px;
    }

    .about-points li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .about-points li .tri {
        margin-top: 6px;
    }

    .about-points li strong {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
        color: var(--navy-900);
        display: block;
        margin-bottom: 2px;
        letter-spacing: -0.01em;
    }

    .about-points li span {
        font-size: 15px;
        color: var(--neutral-600);
        line-height: 1.5;
    }

    .about-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 24px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .about-stats .st {
        padding: 0 20px;
        position: relative;
    }

    .about-stats .st+.st {
        border-left: 1px solid var(--border);
    }

    .about-stats .st .n {
        font-family: 'Cormorant Garamond', 'Times New Roman', serif;
        font-weight: 500;
        font-style: italic;
        font-size: clamp(2.25rem, 3.2vw, 3rem);
        line-height: 1;
        color: var(--gold-700);
        letter-spacing: -0.015em;
        margin-bottom: 6px;
    }

    .about-stats .st .l {
        font-size: 12px;
        font-weight: 700;
        color: var(--neutral-600);
        line-height: 1.35;
        letter-spacing: 0.02em;
    }

    @media (max-width: 980px) {
        .about-grid {
            grid-template-columns: 1fr;
            gap: 48px;
        }

        .about-img {
            max-width: 520px;
            margin: 0 auto;
        }
    }

    @media (max-width: 520px) {
        .about-stats {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .about-stats .st+.st {
            border-left: 0;
            border-top: 1px solid var(--border);
            padding-top: 16px;
        }
    }

    /* ============================================================
       CATEGORIES — dark navy section with 4 dramatic cards
       ============================================================ */
    .cats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        position: relative;
        z-index: 2;
    }

    .cat {
        position: relative;
        aspect-ratio: 3/4;
        overflow: hidden;
        border-radius: var(--radius-xl);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px;
        color: var(--cream);
        cursor: pointer;
        transition: transform var(--duration) var(--ease-out);
        isolation: isolate;
        background: var(--navy-800);
        border: 1px solid rgba(255, 255, 255, .06);
    }

    .cat:hover {
        transform: translateY(-4px);
    }

    .cat:hover .cat-img {
        transform: scale(1.06);
    }

    .cat:hover .arrow svg {
        transform: translateX(4px);
    }

    .cat .cat-img {
        position: absolute;
        inset: 0;
        z-index: 0;
        transition: transform 0.6s var(--ease-out);
    }

    .cat .cat-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cat .cat-img.grad-peixes {
        background: linear-gradient(155deg, #3a6a8a 0%, #1a4060 50%, #061a2e 100%);
    }

    .cat .cat-img.grad-bovinos {
        background: linear-gradient(155deg, #8a3838 0%, #4a1414 60%, #1a0808 100%);
    }

    .cat .cat-img.grad-aves {
        background: linear-gradient(155deg, #d9a86a 0%, #8a5a28 60%, #3a2410 100%);
    }

    .cat .cat-img.grad-suinos {
        background: linear-gradient(155deg, #c87a6a 0%, #6a3a2a 60%, #2a1410 100%);
    }

    .cat::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(7, 19, 56, .1) 0%, rgba(7, 19, 56, .3) 40%, rgba(7, 19, 56, .9) 100%);
    }

    .cat .ic-mark {
        position: absolute;
        top: 22px;
        left: 22px;
        z-index: 2;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .18);
    }

    .cat .ic-mark svg {
        width: 22px;
        height: 22px;
        color: var(--gold-500);
        stroke-width: 2;
    }

    .cat .corner-tri {
        position: absolute;
        top: 22px;
        right: 22px;
        z-index: 2;
        width: 14px;
        height: 16px;
        background: var(--gold-600);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .cat .meta {
        position: relative;
        z-index: 2;
    }

    .cat .meta .ey {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--gold-500);
        margin-bottom: 8px;
    }

    .cat .meta h3 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(24px, 2.2vw, 32px);
        line-height: 0.95;
        letter-spacing: -0.015em;
        margin-bottom: 8px;
        color: var(--cream);
    }

    .cat .meta .sku {
        font-size: 12px;
        font-weight: 700;
        color: rgba(255, 255, 255, .7);
        letter-spacing: 0.04em;
    }

    .cat .arrow {
        position: relative;
        z-index: 2;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .16);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--gold-500);
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }

    .cat .arrow svg {
        width: 16px;
        height: 16px;
        transition: transform var(--duration);
    }

    @media (max-width: 1020px) {
        .cats {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 520px) {
        .cats {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .cat {
            aspect-ratio: 4/3;
        }
    }

    /* ============================================================
       PRODUCTS — featured grid on cream
       ============================================================ */
    .products {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .product {
        background: var(--cream);
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--border);
        transition: transform var(--duration) var(--ease-out), box-shadow var(--duration), border-color var(--duration);
        cursor: pointer;
        display: flex;
        flex-direction: column;
    }

    .product:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: var(--gold-300);
    }

    .product:hover .product-img img {
        transform: scale(1.04);
    }

    .product-img {
        position: relative;
        aspect-ratio: 1/1;
        background: #FFFFF9;
        overflow: hidden;
    }

    .product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s var(--ease-out);
    }

    .product-img.bg-removed img {
        object-fit: contain;
        padding: 16px;
    }

    .product-img .badge {
        position: absolute;
        left: 14px;
        top: 14px;
        padding: 6px 11px;
        border-radius: var(--radius-pill);
        background: rgba(7, 19, 56, .86);
        backdrop-filter: blur(6px);
        color: var(--cream);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .product-img .badge .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold-600);
    }

    .product-img .tri-deco {
        position: absolute;
        right: 0;
        top: 0;
        width: 56px;
        height: 64px;
        background: var(--gold-600);
        opacity: .9;
        clip-path: polygon(100% 0, 100% 100%, 0 0);
    }

    .product-meta {
        padding: 18px 20px 22px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .product-meta .cat-name {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--gold-800);
        margin-bottom: 6px;
    }

    .product-meta h4 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 18px;
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--navy-900);
        margin-bottom: 8px;
    }

    .product-meta .desc {
        font-size: 13px;
        font-weight: 200;
        line-height: 1.45;
        color: var(--neutral-600);
        margin-bottom: 14px;
        flex: 1;
    }

    .product-meta .specs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }

    .product-meta .specs .spec {
        font-size: 11px;
        font-weight: 700;
        color: var(--neutral-600);
        padding: 4px 9px;
        border-radius: 6px;
        background: var(--neutral-100);
        letter-spacing: 0.02em;
    }

    .products-cta {
        display: flex;
        justify-content: center;
        margin-top: 48px;
    }

    @media (max-width: 1020px) {
        .products {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .products {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================================
       DIFERENCIAIS — horizontal carousel, anchored left, truck on right
       ============================================================ */
    .sec-diffs {
        padding: var(--section-py) 0;
        overflow: hidden;
    }

    .diffs-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(32px, 5vw, 80px);
        max-width: var(--container);
        margin: 0 auto;
        padding: 0 var(--gutter);
        align-items: center;
    }

    .diffs-head {
        max-width: 640px;
        margin-bottom: 40px;
        padding-right: var(--gutter);
    }

    .diffs-head .eyebrow {
        margin-bottom: 18px;
    }

    .diffs-head h2 {
        font-family: 'Cormorant Garamond', 'Times New Roman', serif;
        font-weight: 400;
        font-size: clamp(2.25rem, 4vw, 3.5rem);
        line-height: 1.02;
        letter-spacing: -0.015em;
        margin-bottom: 22px;
        color: var(--navy-900);
        text-wrap: balance;
    }

    .diffs-head h2 .hl-gold {
        color: var(--gold-700);
        font-style: italic;
        font-weight: 500;
    }

    .diffs-head>p {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: 17px;
        line-height: 1.55;
        color: var(--neutral-700);
        max-width: 520px;
        margin-bottom: 32px;
    }

    .diffs-nav {
        display: inline-flex;
        align-items: center;
        gap: 14px;
    }

    .dn-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--cream);
        border: 1.5px solid var(--navy-900);
        color: var(--navy-900);
        display: grid;
        place-items: center;
        transition: background var(--duration), color var(--duration), opacity var(--duration);
        cursor: pointer;
    }

    .dn-btn svg {
        width: 18px;
        height: 18px;
    }

    .dn-btn:hover {
        background: var(--navy-900);
        color: var(--cream);
    }

    .dn-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .dn-btn:disabled:hover {
        background: var(--cream);
        color: var(--navy-900);
    }

    .dn-pos {
        font-family: var(--font-display-ext);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--neutral-500);
        margin-left: 8px;
    }

    .dn-pos strong {
        color: var(--navy-900);
        font-weight: 600;
    }

    .diffs-strip-wrap {
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .diffs-strip {
        --diff-gap: 18px;
        display: flex;
        gap: var(--diff-gap);
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 6px 0 12px 0;
        scrollbar-width: none;
    }

    .diffs-strip::-webkit-scrollbar {
        display: none;
    }

    .diffs-strip .diff {
        /* Exibe exatamente 2 cards por vez: 50% da largura menos metade do gap. */
        flex: 0 0 calc((100% - var(--diff-gap)) / 2);
        width: calc((100% - var(--diff-gap)) / 2);
        max-width: calc((100% - var(--diff-gap)) / 2);
        min-width: 0;
        scroll-snap-align: start;
        background: var(--cream);
        border-radius: var(--radius-xl);
        padding: 28px 26px;
        border: 1px solid var(--border);
        transition: transform var(--duration), box-shadow var(--duration), border-color var(--duration);
        position: relative;
        overflow: hidden;
    }

    .diffs-strip .diff:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--gold-300);
    }

    .diffs-strip .diff .ic {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--gold-50), var(--gold-100));
        color: var(--gold-900);
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        position: relative;
    }

    .diffs-strip .diff .ic svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.8;
        fill: none;
    }

    .diffs-strip .diff .ic::after {
        content: '';
        position: absolute;
        right: -3px;
        top: -3px;
        width: 9px;
        height: 11px;
        background: var(--gold-600);
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .diffs-strip .diff .num {
        position: absolute;
        right: 22px;
        top: 22px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 13px;
        color: var(--neutral-300);
        letter-spacing: 0.04em;
    }

    .diffs-strip .diff h3 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 18px;
        line-height: 1.18;
        letter-spacing: -0.01em;
        color: var(--navy-900);
        margin-bottom: 10px;
    }

    .diffs-strip .diff p {
        font-size: 13.5px;
        font-weight: 200;
        line-height: 1.55;
        color: var(--neutral-600);
    }

    .diffs-right {
        position: relative;
        padding-right: var(--gutter);
        align-self: center;
    }

    .diffs-truck {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 30px 40px rgba(7, 19, 56, 0.18));
    }

    @media (max-width: 1180px) {
        .diffs-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        }
    }

    @media (max-width: 980px) {
        .diffs-grid {
            grid-template-columns: 1fr;
            padding-left: var(--gutter);
            padding-right: var(--gutter);
            gap: 40px;
        }

        .diffs-head {
            padding-right: 0;
        }

        .diffs-strip .diff {
            flex-basis: calc((100% - var(--diff-gap)) / 2);
            width: calc((100% - var(--diff-gap)) / 2);
            max-width: calc((100% - var(--diff-gap)) / 2);
            min-width: 0;
        }

        .diffs-right {
            max-width: 460px;
            margin: 0 auto;
            padding-right: 0;
        }
    }

    @media (max-width: 560px) {
        .diffs-strip .diff {
            flex-basis: 100%;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
    }


    /* ============================================================
       DISTRIBUIÇÃO — navy section with map and stats
       ============================================================ */
    .dist-wrap {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: clamp(40px, 5vw, 80px);
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .dist-map {
        position: relative;
        background: linear-gradient(140deg, var(--navy-800) 0%, var(--navy-900) 100%);
        border-radius: var(--radius-2xl);
        padding: 32px;
        min-height: 480px;
        border: 1px solid rgb(215 180 106 / 24%);
        overflow: hidden;
        box-shadow: var(--shadow-xl);
    }

    .dist-map .map-bg-tri {
        position: absolute;
        right: -30px;
        bottom: -30px;
        width: 200px;
        height: 230px;
        background: var(--gold-600);
        opacity: 0.08;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .dist-map .map-svg-wrap {
        position: relative;
        height: 100%;
        min-height: 420px;
        display: grid;
        place-items: center;
    }

    .dist-map .map-svg-wrap svg {
        width: 100%;
        height: auto;
        max-width: 100%;
        position: relative;
        top: 3rem;
    }

    .map-legend {
        position: absolute;
        left: 32px;
        top: 32px;
        right: 32px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        pointer-events: none;
    }

    .map-legend .ey {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-500);
    }

    .map-legend .pin-key {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 11px;
        color: var(--navy-300);
        font-weight: 700;
    }

    .map-legend .pin-key .k {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .map-legend .pin-key .pin {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gold-600);
        box-shadow: 0 0 0 3px rgba(215, 180, 106, .25);
    }

    .map-legend .pin-key .pin.alt {
        background: var(--cream);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
    }

    .dist-info h2 .hl-gold {
        color: var(--gold-500);
    }

    .dist-info .lead-p {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: 18px;
        line-height: 1.55;
        color: var(--navy-300);
        margin: 0 0 32px;
    }

    .dist-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 32px;
    }

    .dist-stat {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: var(--radius-lg);
        padding: 22px 22px 20px;
        position: relative;
    }

    .dist-stat .num {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(34px, 3.4vw, 46px);
        line-height: 1;
        color: var(--gold-500);
        letter-spacing: -0.02em;
        margin-bottom: 8px;
    }

    .dist-stat .lbl {
        font-size: 13px;
        font-weight: 700;
        color: var(--cream);
        line-height: 1.35;
    }

    .dist-stat .sub {
        font-size: 11px;
        font-weight: 700;
        color: var(--navy-300);
        margin-top: 4px;
        letter-spacing: 0.02em;
    }

    .dist-locations {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .dist-loc {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px 16px;
        background: rgba(255, 255, 255, .04);
        border-radius: var(--radius-md);
        border: 1px solid rgba(255, 255, 255, .06);
    }

    .dist-loc .ico {
        width: 24px;
        height: 24px;
        color: var(--gold-500);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .dist-loc .ico svg {
        width: 100%;
        height: 100%;
    }

    .dist-loc .ey {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-500);
        margin-bottom: 3px;
    }

    .dist-loc .t {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 15px;
        color: var(--cream);
        letter-spacing: -0.01em;
    }

    .dist-loc .s {
        font-size: 12px;
        color: var(--navy-300);
        margin-top: 2px;
    }

    @media (max-width: 980px) {
        .dist-wrap {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 520px) {

        .dist-stats,
        .dist-locations {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================================
       BIG CTA — full bleed navy with curved cut
       ============================================================ */
    .cta-band {
        position: relative;
        /* background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-950) 100%); */
        background: #d7b46a;
        color: var(--cream);
        padding: clamp(64px, 8vw, 120px) 0;
        overflow: hidden;
    }

    .cta-band::before {
        /* curved gold thin diagonal */
        content: '';
        position: absolute;
        left: -2%;
        bottom: 0;
        width: 70%;
        height: 1px;
        background: var(--gold-600);
        transform: rotate(-3deg);
        transform-origin: left;
        opacity: .5;
    }

    .cta-band .ad-watermark {
        font-size: clamp(280px, 36vw, 560px);
        right: -8%;
        top: -20%;
    }

    .cta-band .row {
        display: grid;
        grid-template-columns: 1.8fr 1fr;
        gap: 120px;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    .cta-band h2 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(2rem, 4vw, 3.25rem);
        line-height: 0.98;
        letter-spacing: -0.025em;
        color: #071338;
        margin-bottom: 18px;
    }

    .cta-band h2 .hl-gold {
        color: #fff
    }

    .cta-band .btn.gold {
        background: var(--navy-900);
        color: #fff;
    }

    .cta-band .btn.btn.ghost-light {
        background: #fff;
        color: #071338;
    }


    .cta-band p {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: 18px;
        line-height: 1.5;
        color: #071338;
        /* max-width: 540px; */
    }

    .cta-band .actions {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cta-band .actions .meta {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        margin-top: 6px;
    }

    .cta-band .actions .meta .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--success-600);
        box-shadow: 0 0 0 3px rgba(47, 133, 90, .3);
    }

    @media (max-width: 880px) {
        .cta-band .row {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================================
       CONTATO / FORM
       ============================================================ */
    .contact-wrap {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: clamp(40px, 5vw, 80px);
        align-items: start;
    }

    .contact-side h2 .hl-gold {
        color: var(--gold-700);
    }

    .contact-side .lead-p {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: 18px;
        line-height: 1.55;
        color: var(--neutral-700);
        margin-bottom: 36px;
    }

    .contact-side ul.contact-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 32px;
    }

    .contact-side ul.contact-list li {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 18px 0;
        border-bottom: 1px solid var(--border);
    }

    .contact-side ul.contact-list li:last-child {
        border-bottom: 0;
    }

    .contact-side ul.contact-list .ic {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--navy-900);
        color: var(--gold-500);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .contact-side ul.contact-list .ic svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.8;
    }

    .contact-side ul.contact-list .ey {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-800);
        margin-bottom: 4px;
    }

    .contact-side ul.contact-list .t {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 16px;
        color: var(--navy-900);
        line-height: 1.3;
        letter-spacing: -0.01em;
    }

    .contact-side ul.contact-list .s {
        font-size: 13px;
        color: var(--neutral-600);
        margin-top: 2px;
        line-height: 1.45;
    }

    .whatsapp-banner {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        background: linear-gradient(135deg, #25D366 0%, #1ea34f 100%);
        border-radius: var(--radius-lg);
        color: #fff;
        box-shadow: 0 12px 24px -10px rgba(37, 211, 102, .5);
    }

    .whatsapp-banner .ic {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .18);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .whatsapp-banner .ic svg {
        width: 24px;
        height: 24px;
        color: #fff;
    }

    .whatsapp-banner .t {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 15px;
        line-height: 1.2;
        letter-spacing: -0.01em;
    }

    .whatsapp-banner .s {
        font-size: 12px;
        opacity: .85;
        margin-top: 2px;
        font-weight: 700;
    }

    .whatsapp-banner .go {
        margin-left: auto;
    }

    .whatsapp-banner .go svg {
        width: 22px;
        height: 22px;
        color: #fff;
    }

    .form-card {
        background: var(--bg-card);
        border-radius: var(--radius-2xl);
        padding: clamp(28px, 3vw, 44px);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
        position: relative;
        overflow: hidden;
    }

    .form-card::before {
        content: '';
        position: absolute;
        right: -32px;
        top: -32px;
        width: 140px;
        height: 160px;
        background: var(--gold-600);
        opacity: 0.08;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .form-card .form-head {
        margin-bottom: 28px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--border);
        position: relative;
        z-index: 1;
    }

    .form-card .form-head .ey {
        font-family: var(--font-display-ext);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gold-800);
        margin-bottom: 10px;
    }

    .form-card .form-head h3 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: clamp(20px, 2vw, 26px);
        line-height: 1.15;
        color: var(--navy-900);
        letter-spacing: -0.015em;
        margin-bottom: 8px;
    }

    .form-card .form-head p {
        font-size: 14px;
        font-weight: 200;
        color: var(--neutral-600);
        line-height: 1.5;
    }

    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        position: relative;
        z-index: 1;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .field.full {
        grid-column: 1 / -1;
    }

    .field label {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 700;
        color: var(--navy-900);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .field label .req {
        color: var(--gold-800);
        margin-left: 2px;
    }

    .input,
    .select,
    .textarea {
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 200;
        padding: 14px 16px;
        border-radius: var(--radius-md);
        border: 1.5px solid var(--neutral-200);
        background: var(--cream);
        color: var(--navy-900);
        transition: border var(--duration), box-shadow var(--duration);
        width: 100%;
        appearance: none;
    }

    .select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071338' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 16px;
        padding-right: 40px;
    }

    .input:focus,
    .select:focus,
    .textarea:focus {
        outline: none;
        border-color: var(--gold-600);
        box-shadow: 0 0 0 4px rgba(215, 180, 106, .18);
    }

    .textarea {
        min-height: 110px;
        resize: vertical;
        line-height: 1.5;
    }

    .form-submit {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
    }

    .form-submit .note {
        font-size: 11px;
        font-weight: 700;
        color: var(--neutral-500);
        max-width: 260px;
        line-height: 1.5;
    }

    .form-success {
        display: none;
        padding: 16px 18px;
        border-radius: var(--radius-md);
        background: var(--success-100);
        border: 1px solid var(--success-600);
        color: var(--success-600);
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 18px;
        align-items: center;
        gap: 10px;
    }

    .form-success.show {
        display: flex;
    }

    .form-success svg {
        width: 20px;
        height: 20px;
    }

    @media (max-width: 980px) {
        .contact-wrap {
            grid-template-columns: 1fr;
            gap: 48px;
        }
    }

    @media (max-width: 520px) {
        .form-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    footer.site {
        background: var(--navy-950);
        color: var(--cream);
        padding: clamp(72px, 8vw, 96px) 0 28px;
        position: relative;
        overflow: hidden;
    }

    footer.site .ad-watermark {
        font-size: clamp(400px, 50vw, 720px);
        right: -8%;
        bottom: -45%;
        opacity: 0.035;
    }

    footer.site .top {
        position: relative;
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
        gap: 40px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    footer.site .brand-col {
        max-width: 320px;
    }

    footer.site img.flogo {
        height: 42px;
        margin-bottom: 20px;
        width: auto;
    }

    footer.site .tag {
        font-family: var(--font-body);
        font-weight: 200;
        font-size: 14px;
        color: var(--navy-300);
        line-height: 1.6;
        margin-bottom: 28px;
    }

    footer.site .socials {
        display: flex;
        gap: 10px;
    }

    footer.site .socials a {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .06);
        display: grid;
        place-items: center;
        transition: all var(--duration);
        border: 1px solid rgba(255, 255, 255, .06);
    }

    footer.site .socials a:hover {
        background: var(--gold-600);
        color: var(--navy-900);
        border-color: var(--gold-600);
    }

    footer.site .socials svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.8;
    }

    footer.site h5 {
        font-family: var(--font-display-ext);
        font-size: 11px;
        font-weight: 600;
        color: var(--gold-500);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    footer.site .col ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    footer.site .col a,
    footer.site .col p {
        font-size: 14px;
        font-weight: 200;
        color: var(--navy-300);
        line-height: 1.5;
        transition: color var(--duration);
    }

    footer.site .col a:hover {
        color: var(--gold-500);
    }

    footer.site .col .row-i {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    footer.site .col .row-i svg {
        width: 16px;
        height: 16px;
        color: var(--gold-500);
        flex-shrink: 0;
        margin-top: 4px;
    }

    footer.site .col .row-i strong {
        color: var(--cream);
        display: block;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 2px;
        letter-spacing: -0.005em;
    }

    footer.site .bottom {
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        font-size: 13px;
        font-weight: 400;
        color: var(--navy-300);
        position: relative;
    }

    footer.site .bottom .legal {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    footer.site .bottom .legal a:hover {
        color: var(--gold-500);
    }

    footer.site .bottom .made {
        color: var(--navy-500);
    }

    footer.site .bottom .made strong {
        color: var(--gold-500);
        font-family: var(--font-display);
        font-weight: 700;
    }

    @media (max-width: 980px) {
        footer.site .top {
            grid-template-columns: 1fr 1fr;
            gap: 36px;
        }

        footer.site .brand-col {
            grid-column: 1 / -1;
            max-width: none;
        }
    }

    @media (max-width: 520px) {
        footer.site .top {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================================
       WHATSAPP FLOATING BUTTON
       ============================================================ */
    .wa-float {
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 60;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #25D366;
        color: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 14px 28px -8px rgba(37, 211, 102, .55), 0 0 0 8px rgba(37, 211, 102, .12);
        transition: transform var(--duration);
    }

    .wa-float:hover {
        transform: scale(1.08);
    }

    .wa-float svg {
        width: 30px;
        height: 30px;
        stroke: currentColor;
        fill: currentColor;
    }

    .wa-float .pulse {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(37, 211, 102, .4);
        animation: pulse 2.4s ease-out infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: .6;
        }

        100% {
            transform: scale(1.6);
            opacity: 0;
        }
    }

    @media (max-width: 560px) {
        .wa-float {
            right: 16px;
            bottom: 16px;
            width: 54px;
            height: 54px;
        }
    }

    /* ============================================================
       FADE UP ANIMATION
       ============================================================ */
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    }

    .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }

    /* ============================================================
   DISTRIBUIÇÃO — MAPA SVG INLINE
   ============================================================ */

    .dist-map {
        position: relative;
        min-height: 520px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 34px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .map-svg-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(42px, 5vw, 72px);
        /* padding-bottom: 0; */
        z-index: 2;
    }

    .mapa-interativo .mapa-svg {
        width: 100%;
        max-width: 560px;
        height: auto;
        display: block;
        overflow: visible;
    }

    /* Mantém a legenda acima do mapa */
    .map-legend {
        position: absolute;
        top: 34px;
        left: 34px;
        right: 34px;
        z-index: 5;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        pointer-events: none;
    }

    .map-legend .ey {
        font-family: var(--font-display-ext);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--gold-500);
    }

    .pin-key {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pin-key .k {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.55);
    }

    .pin-key .pin {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--gold-600);
        box-shadow: 0 0 0 4px rgba(215, 180, 106, 0.18);
    }

    .pin-key .pin.alt {
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
    }

    /* Triângulo decorativo de fundo */
    .map-bg-tri {
        position: absolute;
        right: -30px;
        bottom: -40px;
        width: 180px;
        height: 210px;
        background: var(--gold-600);
        opacity: 0.08;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        z-index: 1;
        pointer-events: none;
    }

    /* Estados/regiões interativas — use se o SVG tiver paths separados */
    .mapa-svg path,
    .mapa-svg polygon,
    .mapa-svg circle {
        transition:
            fill 0.25s ease,
            stroke 0.25s ease,
            opacity 0.25s ease,
            transform 0.25s ease;
    }

    /* Hover geral em áreas clicáveis */
    .mapa-svg [data-map-area],
    .mapa-svg .map-area,
    .mapa-svg .estado,
    .mapa-svg .cidade,
    .mapa-svg .pin,
    .mapa-svg .rota {
        cursor: pointer;
    }

    /* Hover para regiões/estados */
    .mapa-svg [data-map-area]:hover,
    .mapa-svg .map-area:hover,
    .mapa-svg .estado:hover {
        opacity: 1;
        filter: brightness(1.15);
    }

    /* Hover para pinos */
    .mapa-svg .pin:hover,
    .mapa-svg .cidade:hover,
    .mapa-svg [data-pin]:hover {
        transform: scale(1.08);
        transform-origin: center;
        filter: drop-shadow(0 0 12px rgba(215, 180, 106, 0.45));
    }

    /* Animação suave para pontos/pins, caso existam classes no SVG */
    .mapa-svg .pin-pulse,
    .mapa-svg [data-pulse] {
        animation: mapaPulse 2.4s ease-in-out infinite;
        transform-origin: center;
    }

    @keyframes mapaPulse {

        0%,
        100% {
            opacity: 0.45;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.12);
        }
    }

    /* Responsivo */
    @media (max-width: 980px) {
        .dist-map {
            min-height: auto;
        }

        .map-svg-wrap {
            min-height: 380px;
            padding: 90px 28px 42px;
        }

        .map-legend {
            top: 26px;
            left: 26px;
            right: 26px;
        }

        .mapa-interativo .mapa-svg {
            max-width: 460px;
        }
    }

    @media (max-width: 560px) {
        .map-svg-wrap {
            min-height: 320px;
            padding: 105px 18px 34px;
        }

        .map-legend {
            flex-direction: column;
            gap: 14px;
        }

        .pin-key {
            gap: 7px;
        }

        .mapa-interativo .mapa-svg {
            max-width: 100%;
        }
    }

    /* ============================================================
   MAPA INTERATIVO — ESTADOS E SIGLAS
   ============================================================ */

    .mapa-svg {
        width: 100%;
        max-width: 520px;
        height: auto;
        display: block;
        overflow: visible;
    }

    .mapa-svg .estado {
        cursor: pointer;
        transition:
            opacity 0.25s ease,
            filter 0.25s ease,
            transform 0.25s ease;
    }

    .mapa-svg .estado path {
        transition:
            fill 0.25s ease,
            fill-opacity 0.25s ease,
            stroke 0.25s ease,
            opacity 0.25s ease;
    }

    /* Estados principais destacados */
    .mapa-svg .estado-sc path:first-child,
    .mapa-svg .estado-rj path:first-child {
        fill: #D7B46A;
        fill-opacity: 1;
    }

    /* Estados de cobertura secundários */
    .mapa-svg .estado-rs path:first-child,
    .mapa-svg .estado-pr path:first-child,
    .mapa-svg .estado-sp path:first-child,
    .mapa-svg .estado-mg path:first-child {
        fill: #ffffff;
        fill-opacity: 0.13;
    }

    /* Contorno dos estados */
    .mapa-svg .estado path:nth-child(2) {
        fill: #ffffff;
        fill-opacity: 1;
    }

    /* Hover */
    .mapa-svg .estado:hover {
        filter: drop-shadow(0 0 14px rgba(215, 180, 106, 0.35));
    }

    /* .mapa-svg .estado:hover path:first-child {
  fill: #D7B46A;
  fill-opacity: 0.85;
} */

    /* Grupo das siglas */
    .mapa-svg .mapa-siglas {
        pointer-events: none;
    }

    .mapa-svg .sigla {
        font-family: var(--font-display-ext), Arial, sans-serif;
        font-weight: 700;
        letter-spacing: 0.08em;
        fill: rgba(255, 255, 255, 0.55);
        text-anchor: middle;
        dominant-baseline: middle;
    }

    /* Siglas dos estados destacados */
    .mapa-svg .sigla-sc,
    .mapa-svg .sigla-rj {
        fill: #071338;
        opacity: 0.85;
    }

    /* Ajustes individuais */
    .mapa-svg .sigla-rj {
        font-size: 20px;
    }

    .mapa-svg .sigla-sc {
        font-size: 22px;
    }

    .mapa-svg .sigla-pr,
    .mapa-svg .sigla-sp {
        font-size: 24px;
    }

    .mapa-svg .sigla-rs,
    .mapa-svg .sigla-mg {
        font-size: 26px;
    }


    /* ============================================================
   DIFERENCIAIS — BACKGROUND SLIDER DIAGONAL
   ============================================================ */

.sec-diffs {
  position: relative;
  overflow: hidden;
  background: var(--cream-50, #FFFFF9);
}

/* mantém o conteúdo acima do background */
.sec-diffs .diffs-grid {
  position: relative;
  z-index: 3;
}

/* bloco do fundo à direita */
.diffs-bg-slider {
  position: absolute;
  top: 0;
  right: 0;
  width: 65vw;
  height: 100%;
  min-height: 100%;
  z-index: 1;
  overflow: hidden;

  /* formato diagonal igual ao print */
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 52% 100%);
  background: #d9d9d9;
}

/* cada imagem do slider */
.diffs-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 900ms ease,
    transform 1800ms ease;
}

/* camada para deixar sofisticado e manter leitura */
.diffs-bg-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 249, 0.08) 0%,
      rgba(255, 255, 249, 0.02) 35%,
      rgba(5, 10, 41, 0.12) 100%
    );
  pointer-events: none;
}

.diffs-bg-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* fallback caso queira visualizar sem imagem */
.diffs-bg-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  z-index: -1;
}

/* ajuste para não interferir nos cards */
.diffs-left {
  position: relative;
  z-index: 4;
}

/* tablets */
@media (max-width: 1180px) {
  .diffs-bg-slider {
    width: 52vw;
    clip-path: polygon(32% 0, 100% 0, 100% 100%, 58% 100%);
  }
}

/* mobile: remove o fundo diagonal para não prejudicar leitura */
@media (max-width: 860px) {
  .diffs-bg-slider {
    display: none;
  }
}

@media (max-width: 768px) {
  .header {
    width: 100%;
  }

  .header .container {
    width: 100%;
    max-width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .header .row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header .logo-wrap {
    flex: 1;
  }

  .header .cta-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  section#home span.eyebrow {
    max-width: 310px;
    }




}