:root {
        --jc-teal: #00b894;
        --jc-teal-700: #008d73;
        --jc-teal-100: #e6f7f4;

        --jc-black: #111111;
        --jc-ink: #171a1f;
        --jc-slate: #5b5d63;
        --jc-muted: #80858f;
        --jc-line: #e9ecef;
        --jc-soft: #f5f7f9;
        --jc-white: #ffffff;

        --jc-shadow:
            0 18px 60px rgba(17, 17, 17, 0.08);

        --jc-shadow-sm:
            0 8px 24px rgba(17, 17, 17, 0.07);

        --jc-radius: 16px;
        --jc-radius-lg: 24px;
        --jc-radius-xl: 34px;

        --jc-max: 1280px;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--jc-white);
        color: var(--jc-ink);
        font-family:
            Inter,
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }

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

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    svg {
        display: block;
    }

    .jc-services-page,
    .jc-services-page * {
        box-sizing: border-box;
    }

    .jc-services-page {
        position: relative;
        overflow: hidden;
        background: var(--jc-white);
    }

    .jc-container {
        position: relative;
        z-index: 2;
        width: min(
            var(--jc-max),
            calc(100% - 40px)
        );
        margin: auto;
    }

    .jc-section {
        position: relative;
        padding: 104px 0;
        border-top: 1px solid var(--jc-line);
        background: var(--jc-white);
        overflow: hidden;
    }

    .jc-section:first-child {
        border-top: 0;
    }

    .jc-grid {
        display: grid;
        gap: 22px;
    }

    .jc-grid-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

    .jc-grid-4 {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .jc-section-header {
        max-width: 820px;
        margin-bottom: 54px;
    }

    .jc-section-header.center {
        margin-inline: auto;
        text-align: center;
    }

    .jc-kicker {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 20px;
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 750;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .jc-kicker::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--jc-teal);
        content: "";
    }

    .jc-title-xl {
        max-width: 1050px;
        margin: 0;
        font-size: clamp(50px, 7vw, 90px);
        font-weight: 720;
        letter-spacing: -0.065em;
        line-height: 0.96;
    }

    .jc-title-lg {
        margin: 0;
        font-size: clamp(36px, 4.8vw, 62px);
        font-weight: 680;
        letter-spacing: -0.05em;
        line-height: 1.02;
    }

    .jc-title-md {
        margin: 0;
        font-size: clamp(27px, 3.4vw, 43px);
        font-weight: 680;
        letter-spacing: -0.04em;
        line-height: 1.08;
    }

    .jc-lead {
        max-width: 770px;
        margin: 24px 0 0;
        color: var(--jc-slate);
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.62;
    }

    .jc-copy {
        color: var(--jc-slate);
        font-size: 17px;
        line-height: 1.7;
    }

    .jc-copy p {
        margin: 0 0 20px;
    }

    .jc-copy p:last-child {
        margin-bottom: 0;
    }

    .jc-accent {
        color: var(--jc-teal-700);
    }

    /*
    BOTONES
    */

    .jc-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-top: 34px;
    }

    .jc-btn {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 20px;
        border: 1px solid transparent;
        border-radius: 11px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 750;
        transition:
            transform 180ms ease,
            background 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .jc-btn:hover {
        transform: translateY(-2px);
    }

    .jc-btn-primary {
        background: var(--jc-teal);
        color: var(--jc-white);
        box-shadow:
            0 9px 24px rgba(0, 184, 148, 0.25);
    }

    .jc-btn-primary:hover {
        background: var(--jc-teal-700);
    }

    .jc-btn-secondary {
        border-color: var(--jc-line);
        background: var(--jc-white);
        color: var(--jc-black);
    }

    .jc-btn-secondary:hover {
        border-color: rgba(0, 184, 148, 0.55);
    }

    .jc-arrow {
        transition: transform 180ms ease;
    }

    .jc-btn:hover .jc-arrow,
    .jc-card-link:hover .jc-arrow {
        transform: translateX(4px);
    }

    /*
    RECURSOS VISUALES
    */

    .jc-wave {
        position: absolute;
        z-index: 0;
        width: 760px;
        height: 390px;
        pointer-events: none;
    }

    .jc-wave.right {
        right: -110px;
        bottom: -80px;
    }

    .jc-wave.left {
        left: -150px;
        bottom: -70px;
        transform: scaleX(-1);
    }

    .jc-wave.top {
        top: -130px;
        right: -100px;
        transform: rotate(180deg);
    }

    .jc-dot-field {
        position: absolute;
        z-index: 0;
        width: 145px;
        height: 145px;
        background-image:
            radial-gradient(
                var(--jc-teal) 1.3px,
                transparent 1.3px
            );
        background-size: 14px 14px;
        opacity: 0.24;
        pointer-events: none;
    }

    .jc-dot-field.top-left {
        top: 42px;
        left: 28px;
    }

    .jc-dot-field.bottom-right {
        right: 32px;
        bottom: 28px;
    }

    .jc-blob {
        position: absolute;
        z-index: 0;
        border: 1px solid rgba(0, 184, 148, 0.18);
        border-radius:
            46% 54% 38% 62%
            / 48% 42% 58% 52%;
        pointer-events: none;
    }

    .jc-blob.large {
        width: 480px;
        height: 480px;
    }

    .jc-blob.medium {
        width: 310px;
        height: 310px;
    }

    .jc-blob.right {
        top: 50%;
        right: -240px;
        transform:
            translateY(-50%)
            rotate(-16deg);
    }

    .jc-blob.left {
        top: 50%;
        left: -180px;
        transform:
            translateY(-50%)
            rotate(17deg);
    }

    /*
    HERO
    */

    .jc-hero {
        position: relative;
        min-height: 810px;
        display: flex;
        align-items: center;
        padding: 100px 0 80px;
        overflow: hidden;
        background:
            radial-gradient(
                circle at 79% 35%,
                rgba(0, 184, 148, 0.12),
                transparent 22%
            ),
            linear-gradient(
                180deg,
                #ffffff 0%,
                #fbfcfc 100%
            );
    }

    .jc-hero-grid {
        display: grid;
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, 0.92fr);
        align-items: center;
        gap: 76px;
    }

    .jc-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        color: var(--jc-muted);
        font-size: 12px;
        font-weight: 650;
    }

    .jc-breadcrumb a:hover {
        color: var(--jc-teal-700);
    }

    .jc-breadcrumb span {
        color: #b2b7bd;
    }

    .jc-hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 28px;
        margin-top: 39px;
        color: var(--jc-slate);
        font-size: 13px;
    }

    .jc-proof-item {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .jc-proof-icon {
        display: grid;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        place-items: center;
        border-radius: 50%;
        background: var(--jc-teal-100);
        color: var(--jc-teal-700);
        font-size: 11px;
        font-weight: 800;
    }

    .jc-hero-visual {
        position: relative;
        min-height: 580px;
    }

    .jc-services-orb {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 410px;
        height: 410px;
        border-radius:
            42% 58% 55% 45%
            / 48% 42% 58% 52%;
        background:
            linear-gradient(
                145deg,
                #ffffff 5%,
                #eff8f6 42%,
                #c7eee7 100%
            );
        box-shadow:
            0 35px 80px rgba(0, 141, 115, 0.18),
            inset -18px -18px 45px rgba(0, 184, 148, 0.12);
        transform:
            translate(-50%, -50%)
            rotate(-14deg);
    }

    .jc-services-orb::after {
        position: absolute;
        inset: -45px;
        border: 1px solid rgba(0, 184, 148, 0.18);
        border-radius:
            50% 50% 43% 57%
            / 57% 42% 58% 43%;
        content: "";
        transform: rotate(22deg);
    }

    .jc-services-center {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        display: grid;
        width: 136px;
        height: 136px;
        place-items: center;
        border-radius: 50%;
        background: var(--jc-black);
        color: var(--jc-white);
        font-size: 17px;
        font-weight: 750;
        text-align: center;
        transform: translate(-50%, -50%);
        box-shadow:
            0 22px 55px rgba(17, 17, 17, 0.18);
    }

    .jc-services-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 275px;
        height: 275px;
        border: 1px solid rgba(0, 184, 148, 0.3);
        border-radius:
            47% 53% 56% 44%
            / 41% 49% 51% 59%;
        transform:
            translate(-50%, -50%)
            rotate(10deg);
    }

    .jc-services-node {
        position: absolute;
        z-index: 4;
        min-width: 128px;
        padding: 13px 15px;
        border: 1px solid var(--jc-line);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--jc-shadow-sm);
        color: var(--jc-ink);
        font-size: 12px;
        font-weight: 750;
        text-align: center;
        backdrop-filter: blur(14px);
    }

    .jc-services-node.one {
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
    }

    .jc-services-node.two {
        top: 36%;
        right: 0;
    }

    .jc-services-node.three {
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
    }

    .jc-services-node.four {
        top: 36%;
        left: 0;
    }

    /*
    ENFOQUE
    */

    .jc-intro-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.84fr)
            minmax(0, 1.16fr);
        gap: 84px;
        align-items: start;
    }

    .jc-intro-panel {
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
    }

    .jc-intro-item {
        display: grid;
        grid-template-columns:
            48px
            minmax(0, 1fr);
        gap: 18px;
        padding: 28px 30px;
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-intro-item:last-child {
        border-bottom: 0;
    }

    .jc-intro-number {
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 800;
    }

    .jc-intro-title {
        margin: 0 0 7px;
        font-size: 20px;
        font-weight: 680;
        letter-spacing: -0.025em;
    }

    .jc-intro-text {
        margin: 0;
        color: var(--jc-slate);
        font-size: 15px;
    }

    /*
    SERVICIOS PRINCIPALES
    */

    .jc-services-grid {
        display: grid;
        grid-template-columns:
            repeat(12, minmax(0, 1fr));
        gap: 22px;
    }

    .jc-service-card {
        position: relative;
        min-height: 390px;
        display: flex;
        flex-direction: column;
        padding: 31px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
        transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    .jc-service-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 184, 148, 0.36);
        box-shadow: var(--jc-shadow);
    }

    .jc-service-card.wide {
        grid-column: span 7;
    }

    .jc-service-card.narrow {
        grid-column: span 5;
    }

    .jc-service-card.third {
        grid-column: span 4;
    }

    .jc-service-icon {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        margin-bottom: 55px;
        border-radius: 14px;
        background: var(--jc-teal-100);
        color: var(--jc-teal-700);
        font-size: 17px;
        font-weight: 800;
    }

    .jc-service-label {
        position: relative;
        z-index: 2;
        display: inline-flex;
        margin-bottom: 13px;
        color: var(--jc-teal-700);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .jc-service-title {
        position: relative;
        z-index: 2;
        margin: 0 0 12px;
        font-size: 26px;
        font-weight: 680;
        letter-spacing: -0.035em;
        line-height: 1.12;
    }

    .jc-service-text {
        position: relative;
        z-index: 2;
        margin: 0;
        color: var(--jc-slate);
        font-size: 15px;
    }

    .jc-service-list {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 9px;
        margin: 24px 0 31px;
        padding: 0;
        list-style: none;
    }

    .jc-service-list li {
        display: grid;
        grid-template-columns:
            18px
            minmax(0, 1fr);
        gap: 8px;
        color: var(--jc-ink);
        font-size: 13px;
        font-weight: 650;
    }

    .jc-service-list li::before {
        color: var(--jc-teal-700);
        content: "✓";
    }

    .jc-card-link {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
        color: var(--jc-teal-700);
        font-size: 14px;
        font-weight: 750;
    }

    .jc-service-wave {
        position: absolute;
        right: -120px;
        bottom: -100px;
        width: 330px;
        height: 250px;
        opacity: 0.5;
    }

    /*
    FORMAS DE CONTRATAR
    */

    .jc-contract-card {
        position: relative;
        min-height: 320px;
        padding: 30px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
    }

    .jc-contract-number {
        display: inline-flex;
        margin-bottom: 42px;
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 800;
    }

    .jc-contract-title {
        margin: 0 0 12px;
        font-size: 23px;
        font-weight: 680;
        letter-spacing: -0.03em;
    }

    .jc-contract-text {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    .jc-contract-note {
        margin-top: 22px;
        padding-top: 20px;
        border-top: 1px solid var(--jc-line);
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 750;
    }

    /*
    PROCESO
    */

    .jc-method-grid {
        position: relative;
        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 18px;
        margin-top: 52px;
    }

    .jc-method-grid::before {
        position: absolute;
        top: 27px;
        right: 11%;
        left: 11%;
        height: 1px;
        background: rgba(0, 184, 148, 0.35);
        content: "";
    }

    .jc-method-step {
        position: relative;
        z-index: 2;
        padding: 0 18px;
        text-align: center;
    }

    .jc-method-number {
        display: grid;
        width: 54px;
        height: 54px;
        margin: 0 auto 24px;
        place-items: center;
        border: 1px solid rgba(0, 184, 148, 0.4);
        border-radius: 50%;
        background: var(--jc-white);
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 800;
    }

    .jc-method-title {
        margin: 0 0 9px;
        font-size: 18px;
        font-weight: 680;
    }

    .jc-method-text {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    /*
    CRITERIOS
    */

    .jc-criteria-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.82fr)
            minmax(0, 1.18fr);
        gap: 82px;
        align-items: start;
    }

    .jc-criteria-panel {
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
        overflow: hidden;
    }

    .jc-criteria-item {
        display: grid;
        grid-template-columns:
            24px
            minmax(0, 1fr);
        gap: 14px;
        padding: 22px 25px;
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-criteria-item:last-child {
        border-bottom: 0;
    }

    .jc-criteria-item strong {
        display: block;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .jc-criteria-item p {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    /*
    BENEFICIOS
    */

    .jc-benefit-card {
        min-height: 250px;
        padding: 28px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow-sm);
    }

    .jc-benefit-number {
        display: inline-flex;
        margin-bottom: 36px;
        color: var(--jc-teal-700);
        font-size: 12px;
        font-weight: 800;
    }

    .jc-benefit-title {
        margin: 0 0 11px;
        font-size: 21px;
        font-weight: 680;
        letter-spacing: -0.025em;
    }

    .jc-benefit-text {
        margin: 0;
        color: var(--jc-slate);
        font-size: 14px;
    }

    /*
    FAQ
    */

    .jc-faq-list {
        border-top: 1px solid var(--jc-line);
    }

    .jc-faq-item {
        border-bottom: 1px solid var(--jc-line);
    }

    .jc-faq-item summary {
        position: relative;
        padding: 24px 45px 24px 0;
        cursor: pointer;
        list-style: none;
        font-size: 18px;
        font-weight: 680;
    }

    .jc-faq-item summary::-webkit-details-marker {
        display: none;
    }

    .jc-faq-item summary::after {
        position: absolute;
        top: 50%;
        right: 4px;
        color: var(--jc-teal-700);
        content: "+";
        font-size: 24px;
        font-weight: 400;
        transform: translateY(-50%);
    }

    .jc-faq-item[open] summary::after {
        content: "−";
    }

    .jc-faq-answer {
        max-width: 850px;
        padding: 0 0 25px;
        color: var(--jc-slate);
        font-size: 15px;
    }

    /*
    CONTACTO
    */

    .jc-contact-section {
        position: relative;
        padding: 108px 0;
        border-top: 1px solid var(--jc-line);
        background: var(--jc-white);
        overflow: hidden;
    }

    .jc-contact-layout {
        display: grid;
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(420px, 0.78fr);
        align-items: start;
        gap: 80px;
    }

    .jc-contact-card {
        padding: 30px;
        border: 1px solid var(--jc-line);
        border-radius: var(--jc-radius-lg);
        background: var(--jc-white);
        box-shadow: var(--jc-shadow);
    }

    .jc-form-title {
        margin: 0 0 23px;
        font-size: 21px;
        font-weight: 680;
        letter-spacing: -0.025em;
    }

    .jc-form-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .jc-field {
        display: grid;
        gap: 7px;
    }

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

    .jc-field label {
        font-size: 12px;
        font-weight: 700;
    }

    .jc-control {
        width: 100%;
        height: 46px;
        padding: 0 13px;
        border: 1px solid #dfe3e7;
        border-radius: 10px;
        outline: none;
        background: var(--jc-white);
        color: var(--jc-ink);
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    textarea.jc-control {
        min-height: 108px;
        padding-top: 12px;
        resize: vertical;
    }

    .jc-control:focus {
        border-color: var(--jc-teal);
        box-shadow:
            0 0 0 4px rgba(0, 184, 148, 0.12);
    }

    .jc-control::placeholder {
        color: #9aa0a7;
    }

    .jc-submit {
        width: 100%;
        margin-top: 15px;
    }

    .jc-form-note {
        margin: 12px 0 0;
        color: var(--jc-muted);
        font-size: 11px;
    }

    /*
    RESPONSIVE
    */

    @media (max-width: 1050px) {
        .jc-hero-grid,
        .jc-intro-layout,
        .jc-criteria-layout,
        .jc-contact-layout {
            grid-template-columns: 1fr;
        }

        .jc-hero-visual {
            min-height: 510px;
        }

        .jc-method-grid {
            grid-template-columns: 1fr 1fr;
            gap: 44px 18px;
        }

        .jc-method-grid::before {
            display: none;
        }

        .jc-grid-4 {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 820px) {
        .jc-section,
        .jc-contact-section {
            padding: 76px 0;
        }

        .jc-services-grid {
            grid-template-columns: 1fr;
        }

        .jc-service-card.wide,
        .jc-service-card.narrow,
        .jc-service-card.third {
            grid-column: auto;
        }

        .jc-grid-3 {
            grid-template-columns: 1fr 1fr;
        }

        .jc-services-orb {
            width: 350px;
            height: 350px;
        }
    }

    @media (max-width: 640px) {
        .jc-container {
            width: min(
                100% - 24px,
                var(--jc-max)
            );
        }

        .jc-title-xl {
            font-size: clamp(45px, 14vw, 64px);
        }

        .jc-hero {
            min-height: auto;
            padding: 72px 0 55px;
        }

        .jc-hero-visual {
            min-height: 420px;
        }

        .jc-services-orb {
            width: 300px;
            height: 300px;
        }

        .jc-services-ring {
            width: 210px;
            height: 210px;
        }

        .jc-services-center {
            width: 112px;
            height: 112px;
            font-size: 14px;
        }

        .jc-services-node {
            min-width: 98px;
            padding: 10px;
            font-size: 10px;
        }

        .jc-services-node.two {
            right: -28px;
        }

        .jc-services-node.four {
            left: -28px;
        }

        .jc-grid-2,
        .jc-grid-3,
        .jc-grid-4,
        .jc-method-grid,
        .jc-form-grid {
            grid-template-columns: 1fr;
        }

        .jc-actions {
            display: grid;
        }

        .jc-btn {
            width: 100%;
        }

        .jc-contact-card {
            padding: 23px;
        }

        .jc-intro-item {
            grid-template-columns: 1fr;
        }
    }