/* ── Base ─────────────────────────────── */
        *, body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
        h1, h2, h3, h4, .serif { font-family: 'EB Garamond', Georgia, serif; }
        html  { scroll-behavior: smooth; }
        body  { background: #F9F7F4; color: #3D3D3D; overflow-x: hidden; }

        /* ── Scroll progress ───────────────────── */
        #progress {
            position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
            background: #22C55E; width: 0%;
            transition: width .08s linear;
            pointer-events: none;
        }

        /* ── Floating pill nav ─────────────────── */
        #nav-wrap {
            position: fixed; top: 1.25rem;
            left: 50%; transform: translateX(-50%);
            z-index: 100;
            width: calc(100% - 2rem); max-width: 900px;
        }
        .pill {
            background: rgba(255,255,255,0.90);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 9999px;
            padding: .5rem .625rem .5rem 1rem;
            box-shadow: 0 4px 32px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
            display: flex; align-items: center; gap: 2rem;
            transition: box-shadow .4s cubic-bezier(0.32,0.72,0,1);
        }
        .pill.scrolled { box-shadow: 0 8px 48px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06); }

        /* Logo is now a transparent PNG — no blend mode needed */

        .nl { /* nav link */
            font-size: .8125rem; font-weight: 500;
            color: #3D3D3D; position: relative;
            transition: color .2s;
            white-space: nowrap;
        }
        .nl::after {
            content: ''; position: absolute; bottom: -3px; left: 0;
            width: 0; height: 1.5px; background: #22C55E;
            transition: width .25s cubic-bezier(0.32,0.72,0,1);
        }
        .nl:hover { color: #1C1C1E; }
        .nl:hover::after { width: 100%; }

        /* ── Hamburger morph ───────────────────── */
        .hbar {
            display: block; width: 18px; height: 1.5px;
            background: #1C1C1E; border-radius: 1px;
            transition: transform .35s cubic-bezier(0.32,0.72,0,1),
                        opacity .3s ease;
        }
        #ham.open .hbar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        #ham.open .hbar:nth-child(2) { opacity: 0; transform: scaleX(0); }
        #ham.open .hbar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

        /* ── Fullscreen overlay menu ───────────── */
        #overlay {
            position: fixed; inset: 0; z-index: 90;
            background: rgba(249,247,244,0.97);
            backdrop-filter: blur(28px);
            -webkit-backdrop-filter: blur(28px);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 2rem;
            opacity: 0; pointer-events: none;
            transition: opacity .4s cubic-bezier(0.32,0.72,0,1);
        }
        #overlay.open { opacity: 1; pointer-events: all; }
        .ol { /* overlay link */
            font-family: 'EB Garamond', serif;
            font-size: clamp(2.5rem, 8vw, 4.5rem);
            font-weight: 500; color: #1C1C1E;
            opacity: 0; transform: translateY(20px);
            transition: opacity .4s cubic-bezier(0.32,0.72,0,1),
                        transform .4s cubic-bezier(0.32,0.72,0,1),
                        color .2s;
        }
        .ol:hover { color: #22C55E; }
        #overlay.open .ol { opacity: 1; transform: translateY(0); }
        #overlay.open .ol:nth-child(1) { transition-delay: .06s; }
        #overlay.open .ol:nth-child(2) { transition-delay: .11s; }
        #overlay.open .ol:nth-child(3) { transition-delay: .16s; }
        #overlay.open .ol:nth-child(4) { transition-delay: .21s; }
        #overlay.open .ol:nth-child(5) { transition-delay: .26s; }
        .ol-cta {
            margin-top: 1rem;
            font-size: 1rem; font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 600; color: #fff;
            background: #22C55E; border-radius: 9999px;
            padding: .875rem 2rem;
            opacity: 0; transform: translateY(16px);
            transition: opacity .4s .3s cubic-bezier(0.32,0.72,0,1),
                        transform .4s .3s cubic-bezier(0.32,0.72,0,1),
                        background .2s;
        }
        .ol-cta:hover { background: #16A34A; }
        #overlay.open .ol-cta { opacity: 1; transform: translateY(0); }

        /* ── Button-in-button ──────────────────── */
        .btn {
            display: inline-flex; align-items: center; gap: .625rem;
            background: #22C55E; color: #fff;
            font-size: .875rem; font-weight: 600;
            padding: .75rem .875rem .75rem 1.375rem;
            border-radius: 9999px; cursor: pointer;
            transition: background .25s ease,
                        transform .35s cubic-bezier(0.32,0.72,0,1);
        }
        .btn:hover { background: #16A34A; transform: scale(1.02); }
        .btn:active { transform: scale(0.97); }
        .btn-ico {
            width: 2rem; height: 2rem; border-radius: 50%;
            background: rgba(0,0,0,0.14);
            display: flex; align-items: center; justify-content: center;
            transition: transform .35s cubic-bezier(0.32,0.72,0,1);
            flex-shrink: 0;
        }
        .btn:hover .btn-ico { transform: translate(2px,-1px) scale(1.08); }

        .btn-outline {
            display: inline-flex; align-items: center; gap: .5rem;
            color: #3D3D3D; font-size: .875rem; font-weight: 500;
            padding: .75rem 1.375rem;
            border: 1px solid rgba(0,0,0,0.14); border-radius: 9999px;
            cursor: pointer;
            transition: border-color .25s ease, background .25s ease,
                        transform .35s cubic-bezier(0.32,0.72,0,1);
        }
        .btn-outline:hover {
            border-color: #22C55E; background: rgba(34,197,94,.04);
            transform: scale(1.02);
        }
        .btn-outline:active { transform: scale(0.97); }

        /* ── Eyebrow pill ──────────────────────── */
        .eyebrow {
            display: inline-flex; align-items: center; gap: .4rem;
            background: rgba(34,197,94,.1);
            border: 1px solid rgba(34,197,94,.22);
            color: #15803D; border-radius: 9999px;
            padding: .25rem .875rem;
            font-size: .6875rem; font-weight: 700;
            letter-spacing: .1em; text-transform: uppercase;
        }
        .eyebrow::before {
            content: ''; width: 5px; height: 5px;
            border-radius: 50%; background: #22C55E; flex-shrink: 0;
        }
        .eyebrow-dark {
            background: rgba(34,197,94,.1);
            border-color: rgba(34,197,94,.22);
            color: #4ade80;
        }
        .eyebrow-dark::before { background: #4ade80; }

        /* ── Double-bezel (Doppelrand) ─────────── */
        .bz { /* outer shell */
            background: rgba(0,0,0,0.028);
            border: 1px solid rgba(0,0,0,0.07);
            border-radius: 1.75rem; padding: .375rem;
            transition: transform .42s cubic-bezier(0.32,0.72,0,1),
                        box-shadow .42s cubic-bezier(0.32,0.72,0,1),
                        border-color .3s ease;
        }
        .bz.hover:hover {
            transform: translateY(-6px);
            border-color: rgba(34,197,94,.28);
            box-shadow: 0 20px 60px rgba(34,197,94,.09), 0 6px 20px rgba(0,0,0,.04);
        }
        .bz-in { /* inner core */
            background: #fff;
            border-radius: calc(1.75rem - .375rem);
            box-shadow: inset 0 1px 1px rgba(255,255,255,.8);
        }

        /* Dark bezel variant */
        .bz-dark {
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 1.5rem; padding: .375rem;
            transition: transform .42s cubic-bezier(0.32,0.72,0,1),
                        border-color .3s ease;
        }
        .bz-dark:hover { border-color: rgba(34,197,94,.3); }
        .bz-dark-in {
            background: rgba(255,255,255,.03);
            border-radius: calc(1.5rem - .375rem);
        }

        /* ── Gradient Service Cards ─────────────── */
        .gc {
            border-radius: 1.5rem;
            overflow: hidden;
            position: relative;
            transition: transform .5s cubic-bezier(0.32,0.72,0,1),
                        box-shadow .5s cubic-bezier(0.32,0.72,0,1);
            cursor: default;
        }
        .gc:hover {
            transform: translateY(-6px) scale(1.015);
            box-shadow: 0 24px 64px rgba(0,0,0,.10);
        }
        .gc-in {
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }
        .gc-badge {
            display: inline-flex; align-items: center; gap: .375rem;
            font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase;
            padding: .3rem .75rem .3rem .5rem;
            border-radius: 9999px; margin-bottom: 1.5rem; width: fit-content;
        }
        .gc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .gc-deco {
            position: absolute; bottom: -1.5rem; right: -1.5rem;
            transform: rotate(5deg) scale(1);
            transition: transform .6s cubic-bezier(0.32,0.72,0,1), opacity .6s;
            pointer-events: none; z-index: 0;
        }
        .gc:hover .gc-deco { transform: rotate(10deg) scale(1.1); }
        /* Dark — laboral flagship */
        .gc-dark { background: linear-gradient(135deg, #1a3828 0%, #2d5a3d 100%); }
        .gc-dark .gc-badge  { background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
        .gc-dark .gc-dot    { background: #86efac; }
        .gc-dark .gc-title  { color: #fff; }
        .gc-dark .gc-desc   { color: rgba(255,255,255,.6); }
        /* Green — agrícola */
        .gc-green { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
        .gc-green .gc-badge { background: rgba(22,163,74,.1); color: #15803d; }
        .gc-green .gc-dot   { background: #22c55e; }
        .gc-green .gc-title { color: #1a3828; }
        .gc-green .gc-desc  { color: #3d6b4f; }
        /* Cream — 4 servicios secundarios */
        .gc-cream { background: linear-gradient(135deg, #f9f7f4 0%, #ede9e3 100%); }
        .gc-cream .gc-badge { background: #f0fdf4; color: #15803d; }
        .gc-cream .gc-dot   { background: #22c55e; }
        .gc-cream .gc-title { color: #1c1c1e; }
        .gc-cream .gc-desc  { color: #6b6b6b; }

        /* ── Team card ─────────────────────────── */
        .tc {
            background: rgba(0,0,0,.025);
            border: 1px solid rgba(0,0,0,.07);
            border-radius: 1.5rem; padding: .375rem;
            transition: transform .42s cubic-bezier(0.32,0.72,0,1),
                        box-shadow .42s cubic-bezier(0.32,0.72,0,1);
            display: flex; flex-direction: column; height: 100%;
        }
        .tc:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,.11); }
        .tc-in {
            background: #fff; border-radius: calc(1.5rem - .375rem);
            overflow: hidden;
            display: flex; flex-direction: column; flex: 1;
        }
        .tc-in img {
            transition: transform .6s cubic-bezier(0.32,0.72,0,1);
            width: 100%; height: 260px;
            object-fit: cover; object-position: center 15%;
            display: block; flex-shrink: 0;
        }
        .tc:hover .tc-in img { transform: scale(1.06); }
        .tc-info {
            flex: 1; padding: 1.25rem;
            border-top: 2px solid #22C55E;
        }

        /* ── Animated hero background orbs ──────── */
        .orb {
            position: absolute; border-radius: 50%;
            filter: blur(70px); opacity: .3; pointer-events: none;
        }
        @keyframes drift1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(24px,-18px) scale(1.08)} }
        @keyframes drift2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-20px,14px) scale(1.06)} }
        @keyframes drift3 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(16px,20px) scale(1.04)} }

        /* ── Hero entrance ─────────────────────── */
        @keyframes heroUp {
            from { opacity:0; transform:translateY(40px); filter:blur(10px); }
            to   { opacity:1; transform:translateY(0);    filter:blur(0); }
        }
        .h-logo { animation: heroUp .9s cubic-bezier(0.32,0.72,0,1) .1s both; }
        .h-tag  { animation: heroUp .9s cubic-bezier(0.32,0.72,0,1) .22s both; }
        .h-sub  { animation: heroUp .9s cubic-bezier(0.32,0.72,0,1) .72s both; }
        .h-cta  { animation: heroUp .9s cubic-bezier(0.32,0.72,0,1) .84s both; }
        .h-img  { animation: heroUp .9s cubic-bezier(0.32,0.72,0,1) .3s both; }
        .h-st   { animation: heroUp .9s cubic-bezier(0.32,0.72,0,1) .5s both; }

        /* ── Shutter text (h1 line-by-line reveal) ── */
        .st-line {
            overflow: hidden;
            display: block;
            /* small negative margin collapses the gap between overflow clips */
            margin-bottom: -0.06em;
            padding-bottom: 0.06em;
        }
        .st-word {
            display: block;
            transform: translateY(108%);
            animation: shutterUp .95s cubic-bezier(0.16,1,0.3,1) forwards;
        }
        @keyframes shutterUp {
            to { transform: translateY(0); }
        }

        /* ── Scroll reveals ────────────────────── */
        .rv {
            opacity: 0; transform: translateY(30px);
            transition: opacity .8s cubic-bezier(0.32,0.72,0,1),
                        transform .8s cubic-bezier(0.32,0.72,0,1);
        }
        .rv.in { opacity:1; transform:translateY(0); }

        /* Stagger children */
        .sg > * {
            opacity:0; transform:translateY(22px);
            transition: opacity .7s cubic-bezier(0.32,0.72,0,1),
                        transform .7s cubic-bezier(0.32,0.72,0,1);
        }

        /* Card "conocer más" link */
        .gc-link {
            display:inline-flex; align-items:center; gap:.4rem;
            margin-top:1rem; color:#16A34A; font-size:.8125rem; font-weight:600;
            text-decoration:none; transition:gap .25s cubic-bezier(0.32,0.72,0,1);
        }
        .gc-link:hover { gap:.7rem; }

        /* ── Form fields ───────────────────────── */
        .fd {
            width:100%; padding:.8125rem 1rem;
            background:#fff; border:1px solid rgba(0,0,0,.10);
            border-radius:.75rem;
            font-size:.875rem; font-family:'Plus Jakarta Sans',sans-serif;
            color:#1C1C1E; outline:none;
            transition: border-color .25s ease, box-shadow .25s ease;
        }
        .fd::placeholder { color:#9CA3AF; }
        .fd:focus {
            border-color:#22C55E;
            box-shadow:0 0 0 3px rgba(34,197,94,.13);
        }

        /* ── Dark section ──────────────────────── */
        .dark { background:#1C1C1E; color:#fff; }

        /* ── Section green accent line ─────────── */
        .accent { width:40px; height:2px; background:#22C55E; border-radius:2px; }

        /* ── Grain overlay ─────────────────────── */
        #grain {
            position:fixed; inset:0; z-index:999; pointer-events:none;
            opacity:.022;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size:200px 200px;
        }

        /* ── Photo marquee band ────────────────────── */
        .mq-wrap {
            overflow: hidden; padding: 2rem 0;
            position: relative;
        }
        .mq-wrap::before, .mq-wrap::after {
            content: ''; position: absolute;
            top: 0; bottom: 0; width: 100px; z-index: 2;
            pointer-events: none;
        }
        .mq-wrap::before {
            left: 0;
            background: linear-gradient(to right, #F9F7F4 0%, transparent 100%);
        }
        .mq-wrap::after {
            right: 0;
            background: linear-gradient(to left, #F9F7F4 0%, transparent 100%);
        }
        .mq-track {
            display: flex; gap: 1rem;
            width: max-content;
            animation: marquee 52s linear infinite;
        }
        .mq-track:hover { animation-play-state: paused; }
        .mq-img {
            height: 220px; width: auto; aspect-ratio: 4/3;
            border-radius: 1.25rem;
            object-fit: cover; flex-shrink: 0; display: block;
            box-shadow: 0 4px 24px rgba(0,0,0,.09);
            transition: transform .5s cubic-bezier(0.32,0.72,0,1),
                        box-shadow .5s cubic-bezier(0.32,0.72,0,1);
        }
        .mq-img:hover {
            transform: scale(1.04) translateY(-4px);
            box-shadow: 0 14px 40px rgba(0,0,0,.15);
        }
        @keyframes marquee {
            from { transform: translateX(0); }
            to   { transform: translateX(-50%); }
        }

        @media(prefers-reduced-motion:reduce){
            *,.orb{animation:none!important;transition:none!important;}
            .h-logo,.h-tag,.h-h1,.h-sub,.h-cta,.h-img,.h-st{opacity:1;transform:none;filter:none;}
            .mq-track{animation:none!important;}
        }

        @media(max-width:767px){
            #nav-wrap{left:.75rem;right:.75rem;transform:none;width:auto;max-width:none;}
            .h-h1{font-size:3.25rem!important;line-height:1.06!important;}
        }