/* =========================================================
       VARIABLES Y RESET
    ========================================================== */

    :root {

        --bg: #f5f4f0;
        --white: #ffffff;
        --surface: #eeece6;

        --dark: #0a0d10;
        --dark-2: #12161a;

        --accent: #1769aa;
        --accent-dark: #0f4f82;

        --text: #151719;
        --muted: #6d706f;

        --line: rgba(10,13,16,.10);

        --radius-xl: 34px;
        --radius-lg: 26px;
        --radius-md: 18px;

        --container: 100%;

        --ease: cubic-bezier(.22,1,.36,1);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {

        background: var(--bg);

        color: var(--text);

        font-family: "DM Sans", sans-serif;

        overflow-x: hidden;
    }

    img {

        display: block;

        width: 100%;
    }

    a {

        color: inherit;

        text-decoration: none;
    }

    button,
    input,
    textarea {

        font: inherit;
    }

    /* =========================================================
       CONTAINER
    ========================================================== */

    .container {

        width: 100%;

        max-width: var(--container);

        margin-inline: auto;

        padding-left: clamp(20px, 4vw, 20px);

        padding-right: clamp(20px, 4vw, 20px);
    }

    /* =========================================================
       PRELOADER
    ========================================================== */

    .preloader {

        position: fixed;

        inset: 0;

        z-index: 9999;

        background: var(--dark);

        display: flex;

        align-items: center;

        justify-content: center;

        transition:
            opacity .8s var(--ease),
            visibility .8s var(--ease);
    }

    .preloader.hidden {

        opacity: 0;

        visibility: hidden;
    }

    .loader-content {

        text-align: center;

        color: white;
    }

    .loader-logo {

        margin-bottom: 24px;
    }

    .loader-logo img {

        width: 180px;

        max-height: 70px;

        object-fit: contain;
    }

    .loader-line {

        width: 180px;

        height: 2px;

        background:
            rgba(255,255,255,.14);

        overflow: hidden;

        border-radius: 50px;
    }

    .loader-line span {

        display: block;

        width: 40%;

        height: 100%;

        background: var(--accent);

        animation:
            loading 1.3s ease-in-out infinite;
    }

    @keyframes loading {

        0% {
            transform: translateX(-120%);
        }

        100% {
            transform: translateX(350%);
        }
    }

    /* =========================================================
       HEADER
    ========================================================== */

    .header {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        z-index: 1000;

        padding: 22px 0;

        transition:
            background .5s var(--ease),
            padding .5s var(--ease),
            box-shadow .5s var(--ease);
    }

    .header.scrolled {

        background:
            rgb(10 13 16 / 72%);

        backdrop-filter: blur(18px);

        -webkit-backdrop-filter: blur(18px);

        padding: 14px 0;

        box-shadow:
            0 8px 35px
            rgba(0,0,0,.06);
    }

    .header-inner {

        display: flex;

        align-items: center;

        justify-content: space-between;
    }

    .logo {

        display: flex;

        align-items: center;

        position: relative;
    }

    .logo img {

        width: 190px;

        max-height: 58px;

        object-fit: contain;

        object-position: left center;
    }

    .menu-button {

        border: 0;

        background: var(--dark);

        color: white;

        height: 48px;

        padding:
            0 18px
            0 20px;

        border-radius: 100px;

        display: flex;

        align-items: center;

        gap: 12px;

        cursor: pointer;

        transition:
            transform .4s var(--ease),
            background .4s var(--ease);

        position: relative;

        z-index: 1100;
    }

    .menu-button:hover {

        transform: translateY(-2px);

        background: var(--accent);
    }

    .menu-icon {

        width: 19px;

        height: 14px;

        position: relative;
    }

    .menu-icon span {

        position: absolute;

        width: 100%;

        height: 1.5px;

        background: currentColor;

        left: 0;

        transition:
            .45s var(--ease);
    }

    .menu-icon span:first-child {
        top: 2px;
    }

    .menu-icon span:last-child {
        bottom: 2px;
    }

    .menu-button.open
    .menu-icon span:first-child {

        top: 6px;

        transform: rotate(45deg);
    }

    .menu-button.open
    .menu-icon span:last-child {

        bottom: 6px;

        transform: rotate(-45deg);
    }

    /* =========================================================
       FULLSCREEN MENU
    ========================================================== */

    .fullscreen-menu {

        position: fixed;

        inset: 0;

        z-index: 900;

        background: #101316;

        color: white;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-20px);

        transition:
            opacity .55s var(--ease),
            transform .65s var(--ease),
            visibility .55s;
    }

    .fullscreen-menu.open {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }

    .menu-grid {

        height: 100%;

        display: grid;

        grid-template-columns:
            1.1fr
            .9fr;

        align-items: center;

        gap: 80px;

        padding-top: 90px;
    }

    .menu-links {

        list-style: none;
    }

    .menu-links li {

        overflow: hidden;

        margin: 5px 0;
    }

    .menu-links a {

        display: inline-flex;

        align-items: center;

        gap: 20px;

        font-family: "Manrope", sans-serif;

        font-size:
            clamp(38px, 4vw, 74px);

        font-weight: 700;

        letter-spacing: -3px;

        transform: translateY(100%);

        transition:
            transform .65s var(--ease),
            color .35s ease;
    }

    .fullscreen-menu.open
    .menu-links a {

        transform: translateY(0);
    }

    .menu-links li:nth-child(1) a { transition-delay: .05s; }
    .menu-links li:nth-child(2) a { transition-delay: .10s; }
    .menu-links li:nth-child(3) a { transition-delay: .15s; }
    .menu-links li:nth-child(4) a { transition-delay: .20s; }
    .menu-links li:nth-child(5) a { transition-delay: .25s; }
    .menu-links li:nth-child(6) a { transition-delay: .30s; }

    .menu-links a:hover {

        color: var(--accent);
    }

 .menu-links a.active {
        color: var(--accent);
    }

    .menu-number {

        font-size: 12px;

        font-weight: 600;

        color:
            rgba(255,255,255,.35);

        letter-spacing: 1px;
    }

    .menu-info {

        align-self: end;

        padding-bottom: 70px;

        max-width: 430px;
    }

    .menu-info-label {

        color: var(--accent);

        font-size: 12px;

        text-transform: uppercase;

        letter-spacing: 2px;

        font-weight: 700;

        margin-bottom: 18px;
    }

    .menu-info h3 {

        font-family: "Manrope", sans-serif;

        font-size: 20px;

        line-height: 1.15;

        letter-spacing: -1px;

        margin-bottom: 20px;
    }

    .menu-info p {

        color:
            rgba(255,255,255,.55);

        line-height: 1.7;
    }

    /* =========================================================
       HERO
    ========================================================== */

    .hero {

        min-height: 850px;

        padding-bottom: 24px;

        inset: 0;

        background-image:
            linear-gradient(
                90deg,
                rgba(5,8,10,.88) 0%,
                rgba(5,8,10,.63) 43%,
                rgba(5,8,10,.22) 100%
            ),
            url("https://images.unsplash.com/photo-1579154204601-01588f351e67?auto=format&fit=crop&w=2200&q=85");

        background-size: cover;

        background-position: center;

    }

    .hero-frame {

        min-height: 780px;

        position: relative;

        overflow: hidden;

        border-radius: var(--radius-xl);

        display: flex;

        align-items: flex-end;
    }

    .hero-image {

    

        transform: scale(1.04);

        animation:
            heroImage 12s ease-out forwards;
    }

    @keyframes heroImage {

        from {
            transform: scale(1.04);
        }

        to {
            transform: scale(1);
        }
    }

    .hero-grid {

        position: relative;

        z-index: 2;

        width: 100%;

        display: grid;

        grid-template-columns:
            minmax(0, 850px)
            1fr;

        align-items: end;

        gap: 50px;

        padding:
            150px
            clamp(35px, 6vw, 90px)
            75px;
    }

    .eyebrow {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        color: white;

        background:
            rgba(255,255,255,.10);

        border:
            1px solid
            rgba(255,255,255,.18);

        backdrop-filter: blur(10px);

        border-radius: 100px;

        padding:
            9px 13px;

        font-size: 10px;

        font-weight: 6rgb(10 13 16 / 72%)00;

        letter-spacing: 1.4px;

        text-transform: uppercase;

        margin-bottom: 24px;
    }

    .eyebrow-dot {

        width: 6px;

        height: 6px;

        border-radius: 50%;

        background: var(--accent);

        box-shadow:
            0 0 0 5px
            rgba(23,105,170,.16);
    }

    .hero h1 {

        font-family: "Manrope", sans-serif;

        font-size:
            clamp(50px, 6.8vw, 98px);

        line-height: .95;

        letter-spacing: -5px;

        color: white;

        max-width: 850px;
    }

    .hero h1 span {

        color: var(--accent);
    }

    .hero-bottom {

        margin-top: 38px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 40px;
    }

    .hero-description {

        max-width: 560px;

        color:
            rgba(255,255,255,.74);

        line-height: 1.7;

        font-size: 16px;
    }

    .hero-actions {

        display: flex;

        gap: 10px;

        flex-shrink: 0;
    }

    /* =========================================================
       BUTTONS
    ========================================================== */

    .btn {

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        min-height: 52px;

        padding:
            0 21px;

        border-radius: 100px;

        border: 0;

        font-size: 14px;

        font-weight: 700;

        cursor: pointer;

        transition:
            transform .45s var(--ease),
            background .4s ease,
            color .4s ease,
            box-shadow .4s ease;
    }

    .btn:hover {

        transform: translateY(-3px);
    }

    .btn svg {

        width: 17px;
    }

    .btn-primary {

        background: var(--accent);

        color: white;

        box-shadow:
            0 12px 30px
            rgba(23,105,170,.25);
    }

    .btn-primary:hover {

        background: var(--accent-dark);

        box-shadow:
            0 16px 35px
            rgba(23,105,170,.32);
    }

    .btn-light {

        background: white;

        color: var(--dark);
    }

    .btn-light:hover {

        background: var(--surface);
    }

    .hero-scroll {

        position: absolute;

        right: 30px;

        bottom: 30px;

        color:
            rgba(255,255,255,.55);

        writing-mode: vertical-rl;

        font-size: 10px;

        letter-spacing: 2px;

        text-transform: uppercase;
    }

    /* =========================================================
       TRUST STRIP
    ========================================================== */

    .trust-strip {

        background: var(--dark);

        color: white;

        padding: 22px 0;

        overflow: hidden;
    }

    .trust-inner {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 30px;
    }

    .trust-item {

        display: flex;

        align-items: center;

        gap: 11px;

        color:
            rgba(255,255,255,.70);

        font-size: 14px;
    }

    .trust-item svg {

        color: var(--accent);

        width: 18px;
    }

    /* =========================================================
       INTRO / SERVICIOS
    ========================================================== */

    .intro {

        padding: 150px 0;
    }

    .intro-grid {

        display: grid;

        grid-template-columns:
            .8fr
            1.2fr;

        gap: 100px;

        align-items: start;
    }

    .section-kicker {

        color: var(--accent);

        font-size: 11px;

        font-weight: 800;

        letter-spacing: 2px;

        text-transform: uppercase;
    }

    .intro h2 {

        margin-top: 18px;

        font-family: "Manrope", sans-serif;

        font-size:
            clamp(38px, 5vw, 70px);

        line-height: 1;

        letter-spacing: -3px;
    }

    .intro h2 span {

        color: var(--muted);
    }

    .intro-copy {

        padding-top: 45px;
    }

    .intro-copy p {

        font-size: 20px;

        line-height: 1.55;

        color: #383b3b;

        max-width: 730px;
    }

    .intro-copy p + p {

        margin-top: 24px;

        font-size: 20px;

        line-height: 1.7;

        color: #383b3b;
    }

    .intro-stat {

        display: flex;

        gap: 40px;

        margin-top: 55px;

        padding-top: 30px;

        border-top:
            1px solid var(--line);
    }

    .stat strong {

        display: block;

        font-family: "Manrope", sans-serif;

        font-size: 34px;

        letter-spacing: -1.5px;

        color: var(--dark);
    }

    .stat span {

        display: block;

        margin-top: 5px;

        color: var(--muted);

        font-size: 14px;
    }

    /* =========================================================
       DESTACADOS / INGENIERÍA
    ========================================================== */

    .story {

        padding: 0 0 150px;
    }

    .story-grid {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .story-card {

        background: var(--dark);

        color: white;

        border-radius: var(--radius-xl);

        padding: clamp(40px, 5vw, 70px);

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        min-height: 520px;

        position: relative;

        overflow: hidden;
    }

    .story-card::before {

        content: "";

        position: absolute;

        width: 500px;

        height: 500px;

        right: -200px;

        bottom: -220px;

        border-radius: 50%;

        border: 1px solid rgba(23,105,170,.25);

        box-shadow:
            0 0 0 60px rgba(23,105,170,.03),
            0 0 0 120px rgba(23,105,170,.02);

        pointer-events: none;
    }

    .story-icon {

        width: 50px;

        height: 50px;

        border-radius: 14px;

        background: rgba(23,105,170,.20);

        color: var(--accent);

        display: grid;

        place-items: center;
    }

    .story-icon svg {

        width: 24px;

        height: 24px;
    }

    .story-card h3 {

        font-family: "Manrope", sans-serif;

        font-size: clamp(32px, 4vw, 48px);

        line-height: 1.05;

        letter-spacing: -2px;

        margin: 24px 0 16px;

        position: relative;

        z-index: 2;
    }

    .story-card p {

        color: rgba(255,255,255,.68);

        font-size: 16px;

        line-height: 1.7;

        position: relative;

        z-index: 2;
    }

    .story-image-box {

        border-radius: var(--radius-xl);

        overflow: hidden;

        position: relative;

        min-height: 520px;

        background: var(--surface);
    }

    .story-image-box img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        transition: transform .9s var(--ease);
    }

    .story-image-box:hover img {

        transform: scale(1.04);
    }

    /* =========================================================
       GRILLA PRINCIPAL DE SERVICIOS
    ========================================================== */

    .values {

        padding: 0 0 150px;
    }

    .section-header {

        display: flex;

        align-items: flex-end;

        justify-content: space-between;

        gap: 50px;

        margin-bottom: 55px;
    }

    .section-header h2 {

        font-family: "Manrope", sans-serif;

        font-size:
            clamp(38px, 5vw, 64px);

        line-height: 1;

        letter-spacing: -3px;

        max-width: 700px;

        margin-top: 16px;
    }

    .section-header p {

        max-width: 430px;

        color: var(--muted);

        line-height: 1.7;
    }

    .values-grid {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        gap: 16px;
    }

    .value-card {

        background: white;

        border: 1px solid var(--line);

        border-radius: var(--radius-lg);

        padding: 36px 30px;

        min-height: 380px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        transition:
            transform .45s var(--ease),
            box-shadow .45s var(--ease),
            border-color .45s ease;
    }

    .value-card:hover {

        transform: translateY(-6px);

        border-color: rgba(23,105,170,.25);

        box-shadow: 0 18px 50px rgba(10,13,16,.08);
    }

    .value-card-top {

        display: flex;

        align-items: flex-start;

        justify-content: space-between;

        gap: 20px;
    }

    .value-icon {

        width: 52px;

        height: 52px;

        border-radius: 16px;

        background: var(--surface);

        color: var(--accent);

        display: grid;

        place-items: center;

        flex-shrink: 0;
    }

    .value-icon svg {

        width: 24px;

        height: 24px;
    }

    .value-number {

        font-size: 12px;

        font-weight: 800;

        color: var(--accent);

        letter-spacing: 1.5px;
    }

    .value-card-bottom {

        margin-top: auto;

        padding-top: 40px;
    }

    .value-card h3 {

        font-family: "Manrope", sans-serif;

        font-size: 20px;

        letter-spacing: -.8px;

        line-height: 1.25;

        color: var(--dark);

        margin-bottom: 12px;
    }

    .value-card p {

        color: var(--muted);

        font-size: 14px;

        line-height: 1.65;
    }

    /* =========================================================
       POR QUÉ TRABAJAR CON NOSOTROS
    ========================================================== */

    .difference {

        padding: 0 0 150px;
    }

    .difference-box {

        background: var(--surface);

        border-radius: var(--radius-xl);

        padding: clamp(50px, 6vw, 90px);

        display: grid;

        grid-template-columns: .85fr 1.15fr;

        gap: 80px;

        align-items: center;

        position: relative;

        overflow: hidden;
    }

    .difference h2 {

        font-family: "Manrope", sans-serif;

        font-size: clamp(36px, 4.5vw, 60px);

        line-height: 1;

        letter-spacing: -2.5px;

        color: var(--dark);
    }

    .difference h2 span {

        color: var(--accent);
    }

    .difference-content > p {

        color: #4a4d4c;

        font-size: 16px;

        line-height: 1.7;

        margin-bottom: 30px;
    }

    .difference-list {

        display: grid;

        gap: 12px;
    }

    .difference-item {

        background: white;

        border-radius: var(--radius-md);

        padding: 18px 22px;

        display: flex;

        align-items: center;

        gap: 16px;

        font-size: 15px;

        font-weight: 600;

        color: var(--dark);

        border: 1px solid var(--line);

        transition: transform .4s var(--ease), border-color .4s ease;
    }

    .difference-item:hover {

        transform: translateX(6px);

        border-color: rgba(23,105,170,.3);
    }

    .difference-item svg {

        color: var(--accent);

        width: 20px;

        height: 20px;

        flex-shrink: 0;
    }

    /* =========================================================
       CTA / CONTACTO
    ========================================================== */

    .cta {

        padding: 0 0 100px;
    }

    .cta-box {

        background: var(--accent);

        color: white;

        border-radius: var(--radius-xl);

        padding: 80px;

        display: flex;

        align-items: flex-end;

        justify-content: space-between;

        gap: 60px;

        position: relative;

        overflow: hidden;
    }

    .cta-box::after {

        content: "";

        position: absolute;

        width: 500px;

        height: 500px;

        right: -180px;

        top: -220px;

        border-radius: 50%;

        border:
            80px solid
            rgba(255,255,255,.08);
    }

    .cta h2 {

        position: relative;

        z-index: 2;

        font-family: "Manrope", sans-serif;

        font-size:
            clamp(42px, 5vw, 70px);

        line-height: .95;

        letter-spacing: -3px;

        max-width: 760px;
    }

    .cta p {

        position: relative;

        z-index: 2;

        margin-top: 20px;

        color:
            rgba(255,255,255,.78);

        line-height: 1.6;

        max-width: 600px;
    }

    .cta .btn {

        position: relative;

        z-index: 3;

        background: var(--dark);

        color: white;

        flex-shrink: 0;
    }

    .cta .btn:hover {

        background: white;

        color: var(--dark);
    }

    /* =========================================================
       FOOTER
    ========================================================== */

    footer {

        background: var(--dark);

        color: white;

        padding: 80px 0 35px;
    }

    .footer-top {

        display: grid;

        grid-template-columns:
            1.7fr
	    .7fr
            .7fr
            .7fr;

        gap: 80px;

        padding-bottom: 70px;
    }

    .footer-brand p {

        color:
            rgba(255,255,255,.48);

        max-width: 390px;

        line-height: 1.7;

        margin-top: 20px;

        font-size: 14px;
    }

    .footer-column h4 {

        font-size: 11px;

        text-transform: uppercase;

        letter-spacing: 1.8px;

        color:
            rgba(255,255,255,.9);

        margin-bottom: 22px;
    }

    .footer-column a {

        display: block;

        color:
            rgba(255,255,255,.50);

        font-size: 14px;

        margin-bottom: 13px;

        transition:
            color .3s ease;
    }

    .footer-column a:hover {

        color: var(--accent);
    }

    .footer-bottom {

        border-top:
            1px solid
            rgba(255,255,255,.09);

        padding-top: 25px;

        display: flex;

        justify-content: space-between;

        gap: 30px;

        color:
            rgba(255,255,255,.30);

        font-size: 13px;
    }

    /* =========================================================
       FLOATING CONTACT & BACK TO TOP
    ========================================================== */

    .floating-contact {

        position: fixed;

        left: 22px;

        bottom: 22px;

        z-index: 800;
    }

    .floating-contact-button {

        width: 50px;

        height: 50px;

        border: 0;

        border-radius: 50%;

        background: var(--dark);

        color: white;

        display: grid;

        place-items: center;

        cursor: pointer;

        box-shadow:
            0 12px 35px
            rgba(10,13,16,.22);

        transition:
            transform .4s var(--ease),
            background .4s ease;
    }

    .floating-contact-button:hover {

        transform: translateY(-4px);

        background: var(--accent);
    }

    .floating-contact-menu {

        position: absolute;

        left: 0;

        bottom: 62px;

        display: grid;

        gap: 8px;

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(15px);

        transition:
            opacity .35s ease,
            transform .45s var(--ease),
            visibility .35s;
    }

    .floating-contact.open
    .floating-contact-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }

    .floating-link {

        width: 50px;

        height: 50px;

        border-radius: 50%;

        background: white;

        color: var(--dark);

        display: grid;

        place-items: center;

        box-shadow:
            0 10px 30px
            rgba(10,13,16,.12);

        transition:
            transform .35s var(--ease),
            color .3s ease;
    }

    .floating-link:hover {

        transform: translateY(-3px);

        color: var(--accent);
    }

    .back-to-top {

        position: fixed;

        right: 22px;

        bottom: 22px;

        z-index: 800;

        width: 50px;

        height: 50px;

        border: 0;

        border-radius: 50%;

        background: white;

        color: var(--dark);

        display: grid;

        place-items: center;

        cursor: pointer;

        box-shadow:
            0 12px 35px
            rgba(10,13,16,.15);

        opacity: 0;

        visibility: hidden;

        transform: translateY(12px);

        transition:
            opacity .4s ease,
            transform .4s var(--ease),
            visibility .4s,
            background .3s ease,
            color .3s ease;
    }

    .back-to-top.visible {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);
    }

    .back-to-top:hover {

        background: var(--accent);

        color: white;
    }

    /* =========================================================
       REVEAL
    ========================================================== */

    .reveal {

        opacity: 0;

        transform: translateY(35px);

        transition:
            opacity .9s var(--ease),
            transform .9s var(--ease);
    }

    .reveal.visible {

        opacity: 1;

        transform: translateY(0);
    }

    .reveal-delay-1 { transition-delay: .08s; }
    .reveal-delay-2 { transition-delay: .16s; }
    .reveal-delay-3 { transition-delay: .24s; }

    /* =========================================================
       RESPONSIVE / MEDIA QUERIES
    ========================================================== */

    @media (max-width: 1100px) {

        .hero-grid {
            grid-template-columns: 1fr;
            padding: 130px 55px 65px;
        }

        .hero-bottom {
            align-items: flex-start;
            flex-direction: column;
        }

        .intro-grid,
        .story-grid,
        .difference-box {
            grid-template-columns: 1fr;
            gap: 50px;
        }

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

        .footer-top {
            grid-template-columns: 1fr 1fr;
        }

        .footer-brand {
            grid-column: span 2;
        }

        .cta-box {
            padding: 60px;
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (max-width: 700px) {

        .container {
            padding-left: 14px;
            padding-right: 14px;
        }

        .header {
            padding: 15px 0;
        }

        .logo img {
            width: 155px;
            max-height: 48px;
        }

        .menu-button {
            height: 44px;
        }

        .menu-grid {
            display: block;
            padding-top: 130px;
        }

        .menu-links a {
            font-size: 42px;
            letter-spacing: -2px;
        }

        .menu-info {
            padding-bottom: 0;
            margin-top: 50px;
        }

        .hero {
            padding-top: 85px;
            min-height: auto;
        }

        .hero-frame {
            min-height: 760px;
            border-radius: 24px;
        }

        .hero-grid {
            padding: 130px 25px 45px;
        }

        .hero h1 {
            font-size: clamp(46px, 14vw, 68px);
            letter-spacing: -3px;
        }

        .hero-bottom {
            margin-top: 28px;
        }

        .hero-actions {
            width: 100%;
            flex-direction: column;
        }

        .hero-actions .btn {
            width: 100%;
        }

        .hero-scroll {
            display: none;
        }

        .trust-inner {
            overflow-x: auto;
            justify-content: flex-start;
            padding-bottom: 2px;
        }

        .trust-item {
            white-space: nowrap;
        }

        .intro,
        .values {
            padding: 90px 0;
        }

        .story,
        .difference {
            padding-bottom: 90px;
        }

        .intro-grid {
            gap: 10px;
        }

        .intro-copy {
            padding-top: 30px;
        }

        .intro-copy p {
            font-size: 18px;
        }

        .intro-stat {
            gap: 20px;
            flex-wrap: wrap;
        }

        .stat strong {
            font-size: 28px;
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
        }

        .values-grid {
            grid-template-columns: 1fr;
        }

        .story-card,
        .story-image-box {
            min-height: 430px;
        }

        .difference-box {
            padding: 45px 28px;
        }

        .difference h2 {
            font-size: 42px;
        }

        .cta-box {
            padding: 45px 28px;
        }

        .cta h2 {
            font-size: 45px;
        }

        .footer-top {
            grid-template-columns: 1fr;
            gap: 45px;
        }

        .footer-brand {
            grid-column: auto;
        }

        .footer-bottom {
            flex-direction: column;
        }

        .floating-contact,
        .back-to-top {
            left: 14px;
            bottom: 14px;
        }

        .back-to-top {
            right: 14px;
            left: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {

        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }

    
/* =========================================================
   BLOQUES DE SERVICIOS DESTACADOS
   Inspirados en la estructura visual de soluciones.html
   sin modificar la identidad Meditronic
========================================================== */

.service-solutions {
    padding: 0 0 150px;
}

.service-solutions-list {
    display: grid;
    gap: 16px;
}

.service-solution {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    min-height: 500px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--dark);
    color: white;
    position: relative;
}

.service-solution:nth-child(even) {
    grid-template-columns: 1.05fr .95fr;
}

.service-solution:nth-child(even) .service-solution-image {
    order: 2;
}

.service-solution-image {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background: var(--dark-2);
}

.service-solution-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.16), transparent);
    pointer-events: none;
}

.service-solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease);
}

.service-solution:hover .service-solution-image img {
    transform: scale(1.045);
}

.service-solution-content {
    padding: clamp(38px, 5vw, 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.service-solution-number {
    color: var(--accent);
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.service-solution-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: rgba(23,105,170,.14);
    color: var(--accent);
    margin: 28px 0 22px;
}

.service-solution-icon svg {
    width: 23px;
    height: 23px;
}

.service-solution h3 {
    font-family: "Manrope", sans-serif;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1;
    letter-spacing: -2.2px;
    max-width: 560px;
}

.service-solution-description {
    max-width: 560px;
    margin-top: 20px;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
    font-size: 15px;
}

.service-solution-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 28px;
    margin-top: 30px;
    max-width: 560px;
}

.service-solution-feature {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.70);
    font-size: 12px;
}

.service-solution-feature svg {
    width: 15px;
    color: var(--accent);
    flex-shrink: 0;
}

.services-closing {
    padding: 0 0 100px;
}

.services-closing-box {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: clamp(44px, 6vw, 82px);
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(45px, 7vw, 85px);
    align-items: center;
    position: relative;
    overflow: hidden;
}

.services-closing-box::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -320px;
    bottom: -320px;
    border-radius: 50%;
    border: 90px solid rgba(23,105,170,.045);
    pointer-events: none;
}

.services-closing h2 {
    position: relative;
    z-index: 2;
    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1;
    letter-spacing: -2.5px;
}

.services-closing h2 span {
    color: var(--accent);
}

.services-closing-content {
    position: relative;
    z-index: 2;
}

.services-closing-content > p {
    color: #4a4d4c;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.services-closing-list {
    display: grid;
    gap: 10px;
}

.services-closing-item {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 17px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--dark);
    font-size: 14px;
    font-weight: 600;
    transition: transform .4s var(--ease), border-color .4s ease;
}

.services-closing-item:hover {
    transform: translateX(5px);
    border-color: rgba(23,105,170,.28);
}

.services-closing-item svg {
    width: 19px;
    height: 19px;
    color: var(--accent);
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .service-solution,
    .service-solution:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .service-solution:nth-child(even) .service-solution-image {
        order: 0;
    }

    .service-solution-image {
        min-height: 360px;
    }

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

@media (max-width: 600px) {
    .service-solution-features {
        grid-template-columns: 1fr;
    }

    .service-solution-image {
        min-height: 290px;
    }
}