@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');



html {

    scroll-behavior: smooth;

    /* overflow-x: hidden; */

    /* Prevent horizontal scroll globally */

    width: 100%;

}



:root {

    --color-bg: #111111;

    --color-text-main: #EDEDED;

    --color-text-secondary: #A1A1AA;

    --color-accent: #004afd;

    /* Bright blue */

    --color-border: #333333;

    --color-border-subtle: rgba(255, 255, 255, 0.08);

    --color-border-subtle-light: rgba(0, 0, 0, 0.08);

    --color-dark: #1F1F1F;



    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;

    --font-heading: 'Clash Display', system-ui, -apple-system, sans-serif;

    /* Using Clash Display as requested (mapped to Grotesk style) */



    /* Pages that need light background (like blog posts) */

    --color-bg-white: #ffffff;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    -webkit-font-smoothing: antialiased;

}



body {

    background-color: var(--color-bg);

    color: var(--color-text-main);

    font-family: var(--font-primary);

    font-size: 16px;

    min-height: 100vh;

    /* overflow-x: hidden; */

    /* Extra safety */

    position: relative;

    width: 100%;

    display: flex;

    flex-direction: column;

    overflow-wrap: break-word;

    /* Prevent long words from breaking layout */

}



a {

    text-decoration: none;

    color: inherit;

}



/* Navbar */

.navbar {

    display: flex;

    height: 80px;

    /* Increased from 68px */

    /* Increased from 68px */

    border-bottom: 1px solid var(--color-border-subtle);

    background: var(--color-bg);

    align-items: center;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 1000;

    /* Ensure it stays on top of mega menus */

}



.nav-left,

.nav-center,

.nav-right {

    display: flex;

    align-items: center;

    height: 100%;

}



.nav-left {

    display: flex;

    /* Added display flex */

    flex: 1 0 0;

    /* Strict flex basis 0 to ensure equal width */

    justify-content: center;

    align-items: center;

    padding: 0;

}



.nav-center {

    flex: 4 0 0;

    /* Strict flex basis relative to sides */

    justify-content: center;

    justify-content: center;

    border-left: 1px solid var(--color-border-subtle);

    border-right: 1px solid var(--color-border-subtle);

}



.nav-right {

    display: flex;

    /* Added display flex */

    flex: 1 0 0;

    /* Strict flex basis 0 to ensure equal width with Left */

    width: auto;

    padding: 0;

    justify-content: center;

    /* Center button in its slot */

    align-items: center;

}



.nav-divider {

    width: 1px;

    height: 100%;

    width: 1px;

    height: 100%;

    background: var(--color-border-subtle);

    margin: 0;

    margin: 0;

}



/* Specific Nav Elements */

.logo {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 0;

    height: 100%;

    width: 100%;

    padding: 0 60px;
    /* Aligned with footer margins as requested */

}



.logo-image {

    height: 34px;

    /* Adjusted to 34px as requested */

    width: auto;

    object-fit: contain;

}



.logo-full {

    display: block;

}



.logo-icon {

    display: none;

    /* Hidden by default */

}



/* Logo Switch for Tight Desktop Widths */

@media (max-width: 1550px) {

    .logo-full {

        display: none;

    }



    .logo-icon {

        display: block;

    }

}



.nav-location {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

    color: var(--color-text-secondary);

    margin-left: 24px;

}



.status-dot {

    width: 8px;

    height: 8px;

    background-color: var(--color-accent);

    border-radius: 50%;

}



.nav-link {

    display: flex;

    flex: 1 0 0;

    /* Force equal width (1/4 of Center, which is 4/6 of total => 1/6 total) */

    justify-content: center;

    /* Center text within the equal space */

    align-items: center;

    gap: 6px;

    padding: 0 30px;

    /* Restored padding as requested */

    height: 100%;

    font-size: 0.9rem;

    color: var(--color-text-secondary);

    transition: color 0.2s;

}



.nav-link svg {

    transition: transform 0.3s ease;

}



.nav-link.is-active svg {

    transform: rotate(180deg);

}



.nav-link:hover {

    color: var(--color-text-main);

}



.nav-center .nav-divider {

    display: none;

}



/* Override nav-center to match the "boxed" look */

.nav-center {

    display: flex;

    padding: 0;

    justify-content: flex-start;

}



.nav-center .nav-link {

    flex: 1;

    justify-content: center;

    border-right: 1px solid var(--color-border-subtle);

}



.nav-center .nav-link:last-child {

    border-right: none;

}



.btn-primary {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

    background-color: var(--color-accent);

    color: white !important;

    /* Force white initially */

    font-weight: 500;

    font-size: 0.95rem;

    transition: background-color 0.2s;

}



.btn-primary:hover {

    background-color: #0038cc;

}





/* Hero Grid */

.hero-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    /* 50% - 50% split (Centered Division) */

    grid-template-rows: 1fr auto;

    min-height: calc(100vh - 80px);

    width: 100%;

}



.grid-item {
    padding: 60px;
    position: relative;
}



/* Image Card Styling */

.image-card {

    padding: 0;

    grid-row: span 2;

    /* Spans both rows to cover bottom left text area */

    background-color: var(--color-bg);

    border-right: 1px solid var(--color-border-subtle);

    position: relative;

    overflow: hidden;

}



.hero-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* The interesting diagonal cut */

.image-mask {

    height: 100%;

    width: 100%;

    /* clip-path removed for rectangular image */

    position: relative;

    top: 0;

    left: 0;

}



.image-card .card-header,

.image-card .card-footer,

.image-card .card-overlay {

    z-index: 2;

    /* Ensure text stays on top */

}



/* Content Card Styling */

.content-card {

    background-color: var(--color-bg);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 60px;

}



.notification-pill {

    display: inline-flex;

    align-items: stretch;

    background-color: var(--color-border);

    color: #fff;

    border-radius: 0;

    font-size: 0.95rem;

    white-space: nowrap;

    align-self: flex-start;

    margin-bottom: 20px;

    overflow: hidden;

    text-decoration: none;

    transition: background-color 0.2s;

}



.pill-text {

    padding: 10px 20px;

    display: flex;

    align-items: center;

}



.pill-icon {

    background-color: var(--color-accent);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    flex: 0 0 45px;

    aspect-ratio: 1;

    transition: background-color 0.2s;

}



.pill-icon svg {

    width: 14px;

    height: 14px;

}



.notification-pill:hover .pill-icon {

    background-color: #3378ff;

}



.main-heading {

    font-family: var(--font-heading);

    /* Clash Display */

    font-size: 4.5rem;

    line-height: 1;

    font-weight: 500;

    letter-spacing: -0.02em;

    /* Adjusted for Clash */

    color: var(--color-text-main);

    margin-bottom: 24px;

    /* Changed from auto to fixed spacing */

    margin-top: 60px;

    text-wrap: balance;

}



@media (max-width: 1400px) {

    .main-heading {

        font-size: 3.5rem;

    }

}



@media (max-width: 1024px) {

    .main-heading {

        font-size: 2.8rem;

        margin-top: 40px;

    }

}



@media (max-width: 768px) {

    .main-heading {

        font-size: 2.5rem;

        margin-top: 20px;

        word-break: normal;

        overflow-wrap: break-word;

    }

}



.hero-subtitle {

    font-size: 1.1rem;

    color: var(--color-text-secondary);

    line-height: 1.75;

    max-width: 90%;

    margin-bottom: auto;

    /* Pushes the footer row down */

}



.hero-footer-row {

    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 40px;

}



.avatars-group {

    display: flex;

}



.avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 2px solid var(--color-bg);

    background-size: cover;

    margin-left: -12px;

}



.avatar:first-child {

    margin-left: 0;

}



.review-score {

    font-size: 0.8rem;

    line-height: 1.4;

}



.stars {

    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 2px;

}



/* Bottom Left Text Card */

.text-card {

    border-top: 1px solid var(--color-border-subtle);

    border-right: 1px solid var(--color-border-subtle);

    padding: 40px 40px 40px 60px;

    display: flex;

    align-items: center;

}



.text-card p {

    font-size: 1.1rem;

    color: var(--color-text-secondary);

    line-height: 1.6;

    max-width: 90%;

}



@media (max-width: 1023px) {

    .text-card {

        padding: 24px;

        /* Revert to standard mobile padding */

    }

}



/* Bottom Right CTA Card */

/* Bottom Right CTA Card */

.cta-card {

    background-color: var(--color-bg);

    border-top: 1px solid var(--color-border-subtle);

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 60px;

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



.cta-text {

    position: relative;

    /* Lift above overlay */

    z-index: 2;

    font-size: 1.35rem;

    /* Reduced from 1.5rem as requested */

    font-weight: 600;

    white-space: nowrap;

    letter-spacing: -0.01em;

    color: #FFFFFF;

}



.cta-arrow {

    position: relative;

    /* Lift above overlay */

    z-index: 2;

    font-size: 1.5rem;

    display: flex;

    align-items: center;

    color: var(--color-accent);

}



.cta-arrow svg {

    width: 32px;

    height: 32px;

}



/* Mobile Menu Styles */

.mobile-menu-btn {

    display: none;

    /* Hidden on desktop */

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 0;

    margin-right: 24px;

    z-index: 200;

    /* Above overlay */

}



.hamburger-box {

    width: 24px;

    height: 24px;

    display: inline-block;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.hamburger-inner {

    display: block;

    top: 50%;

    margin-top: -1px;

    width: 24px;

    height: 2px;

    background-color: var(--color-text-main);

    border-radius: 2px;

    position: absolute;

    transition-property: transform;

    transition-duration: 0.15s;

    transition-timing-function: ease;

}



.hamburger-inner::before,

.hamburger-inner::after {

    width: 24px;

    height: 2px;

    background-color: var(--color-text-main);

    border-radius: 2px;

    position: absolute;

    content: "";

    display: block;

    transition-property: transform;

    transition-duration: 0.15s;

    transition-timing-function: ease;

}



.hamburger-inner::before {

    top: -8px;

}



.hamburger-inner::after {

    bottom: -8px;

}



/* Hamburger active state (X shape) */

.mobile-menu-btn.active .hamburger-inner {

    background-color: transparent;

}



.mobile-menu-btn.active .hamburger-inner::before {

    transform: translateY(8px) rotate(45deg);

}



.mobile-menu-btn.active .hamburger-inner::after {

    transform: translateY(-8px) rotate(-45deg);

}



/* Mobile Menu Overlay - Redesigned (Amra Style) */

.mobile-menu-overlay {

    position: fixed;

    top: 80px;

    left: 0;

    width: 100%;

    height: calc(100vh - 80px);

    background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%);

    /* Gradient to match reference depth */

    z-index: 90;

    /* Below navbar (1000) */

    display: flex;

    flex-direction: column;

    padding: 0;

    visibility: hidden;

    transform: translateY(-100%);

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),

        visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);

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

    /* Subtle border */

}



.mobile-menu-overlay.active {

    visibility: visible;

    transform: translateY(0);

}



/* 1. Main Navigation Section */

.mobile-nav-main {

    padding: 48px 32px;

    /* Generous padding */

    display: flex;

    flex-direction: column;

    gap: 24px;

    /* Larger gap */

}



.mobile-nav-link {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: none;

    border: none;

    padding: 0;

    margin: 0;

    font-family: var(--font-primary);

    font-size: 3.2rem;

    /* Even larger for impact */

    font-weight: 500;

    color: #FFFFFF;

    text-align: left;

    cursor: pointer;

    line-height: 1.1;

    letter-spacing: -0.02em;

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.4s ease, transform 0.4s ease;

    width: 100%;

}



.mobile-nav-link svg {

    width: 24px;

    height: 24px;

    opacity: 0.5;

    transition: transform 0.3s ease;

}



.mobile-nav-link.is-open svg {

    transform: rotate(180deg);

}



@media (max-width: 1024px) {

    .mobile-nav-link {

        font-size: 2.5rem;

    }

}



@media (max-width: 480px) {

    .mobile-nav-link {

        font-size: 2.2rem;

    }

}



/* Accordion Trigger fix */

button.mobile-nav-link {

    width: 100%;

}



/* Open Animation */

.mobile-menu-overlay.active .mobile-nav-link {

    opacity: 1;

    transform: translateY(0);

}



/* Staggered Delays */

.mobile-menu-overlay.active .mobile-accordion-group:nth-child(1) .mobile-nav-link,

.mobile-menu-overlay.active>.mobile-nav-link:nth-child(1) {

    transition-delay: 0.1s;

}



.mobile-menu-overlay.active .mobile-accordion-group:nth-child(2) .mobile-nav-link,

.mobile-menu-overlay.active>.mobile-nav-link:nth-child(2) {

    transition-delay: 0.15s;

}



.mobile-menu-overlay.active .mobile-accordion-group:nth-child(3) .mobile-nav-link,

.mobile-menu-overlay.active>.mobile-nav-link:nth-child(3) {

    transition-delay: 0.2s;

}



.mobile-menu-overlay.active .mobile-accordion-group:nth-child(4) .mobile-nav-link,

.mobile-menu-overlay.active>.mobile-nav-link:nth-child(4) {

    transition-delay: 0.25s;

}



.mobile-submenu {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 0;

    margin-top: 0;

    opacity: 0;

    visibility: hidden;

    transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;

    width: 100% !important;

}



.mobile-submenu.is-open {

    opacity: 1;

    visibility: visible;

    margin-top: 15px;

    margin-bottom: 20px;

}



@media (min-width: 768px) and (max-width: 1024px) {

    .mobile-submenu {

        display: grid;

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

        column-gap: 32px;

    }

}



@media (max-width: 767px) {

    .mobile-submenu {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 0 !important;

        row-gap: 16px !important;

        width: 100% !important;

    }



    .mobile-sub-link {

        width: 100% !important;

        border-bottom: none !important;

        height: auto !important;

        background-color: rgba(255, 255, 255, 0.03);

        padding-left: 16px !important;

        padding-right: 16px !important;

        border-radius: 8px;

    }



    .mobile-sub-link:last-child {

        border-bottom: none !important;

    }



    .mobile-sub-link:hover {

        opacity: 1 !important;

        background-color: rgba(255, 255, 255, 0.03) !important;

    }

}



.mobile-sub-link {

    display: flex;

    align-items: center;

    font-size: 1.2rem;

    color: #FFFFFF;

    padding: 16px 0;

    text-decoration: none;

    font-weight: 400;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    transition: opacity 0.2s, background-color 0.2s;

    width: 100%;

    box-sizing: border-box;

}



.mobile-sub-link:last-child {

    border-bottom: none;

}



.mobile-sub-link:hover {

    opacity: 0.7;

}



@media (min-width: 768px) and (max-width: 1024px) {

    .mobile-submenu .mobile-sub-link:nth-last-child(-n+2) {

        border-bottom: none;

    }

}



/* 2. Contact Info Section */

.mobile-info-section {

    margin-top: auto;

    /* Push to bottom */

    padding: 32px;

    display: flex;

    flex-direction: column;

    gap: 24px;

}



@media (min-width: 768px) and (max-width: 1024px) {

    .mobile-info-section {

        display: grid;

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

        gap: 32px;

    }

}



.info-group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.info-label {

    font-size: 1rem;

    color: #999999;

    /* Matches 'General enquiries' label color */

    font-weight: 400;

}



.info-value {

    font-size: 1.1rem;

    color: #FFFFFF;

    /* Matches email color */

    text-decoration: none;

    opacity: 0.9;

}



/* 3. Footer Action Section */

.mobile-action-footer {

    padding: 32px;

    /* Match padding of info section */

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

    /* Divider */

    padding-bottom: 48px;

}



.mobile-action-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: var(--color-accent);

    /* Brand Blue */

    color: #FFFFFF;

    padding: 14px 36px;

    border-radius: 0;

    /* Square */

    font-size: 0.95rem;

    font-weight: 500;

    letter-spacing: 0.02em;

    text-transform: uppercase;

    transition: background-color 0.2s;

    text-decoration: none;

}



.mobile-action-btn:hover {

    background-color: #3378ff;

    /* Lighter blue on hover */

}



/* Mobile specific: Full width button & Single Line Text */

@media (max-width: 768px) {

    .mobile-action-btn {

        width: 100%;

        white-space: nowrap;

        /* Force single line */

        padding: 14px 12px;

        /* Reduce side padding */

        font-size: 0.8rem;

        /* Reduce font size to fit */

    }

}



/* Override existing responsive styles for nav links */

@media (max-width: 1023px) {

    .mobile-menu-overlay {

        overflow-y: auto;

        /* Enable scroll if height is small */

    }

}



/* Lock scroll when menu is open */

body.menu-open,

html.menu-open {

    overflow: hidden !important;

    touch-action: none;

    padding-right: 0px !important;

    /* Prevent layout shift if scrollbar disappears */

}



/* Responsive adjustments */

@media (max-width: 1023px) {

    .main-heading {

        font-size: 3.5rem;

    }



    .nav-center,

    .nav-right {

        display: none;

    }



    .mobile-menu-btn {

        display: block;

        margin-left: auto;

        /* Push to right */

        margin-right: 24px;

    }



    .hero-grid {

        display: flex;

        flex-direction: column;

        height: auto;

        min-height: auto;

    }



    .content-card,

    .text-card,

    .cta-card {

        padding: 24px !important;

    }



    .navbar {
        height: 80px;
        flex-wrap: nowrap;
        padding: 0 24px;
        /* Aligned with footer margins */
    }



    .nav-left {

        flex: 0 0 auto;

        padding-left: 24px;

        justify-content: flex-start;

    }



    .logo {

        width: auto;

        padding: 0;

        justify-content: flex-start;

    }



    .image-card {

        height: 400px;

        border-right: none;

        border-bottom: 1px solid var(--color-border);

    }



    .image-mask {

        top: 0;

        height: 100%;

        clip-path: none;

        /* Simplify for mobile */

    }



    .mobile-menu-overlay {

        top: 80px;

        height: calc(100vh - 80px);

    }

}





/* Responsive Video Sizing */

.image-mask {

    container-type: size;

    position: relative;

    overflow: hidden;

}



.hero-video {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    border: none;

    object-fit: cover;

}



.hero-video.salud-hero-pos {

    object-position: right center;

}





@container (min-aspect-ratio: 16/9) {

    .hero-video {

        width: 100%;

        height: auto;

        aspect-ratio: 16/9;

    }

}



@container (max-aspect-ratio: 16/9) {

    .hero-video {

        width: auto;

        height: 100%;

        aspect-ratio: 16/9;

    }

}



/* Process Services Section (Reference Style) */

.process-section {
    width: 100%;
    margin-top: 0;
    background-color: #FFFFFF;
    /* Standardized white */
    padding-top: 100px;
}



.process-section-header {

    padding: 0 60px;

    margin-bottom: 60px;

    max-width: 100%;

}



.process-container {

    display: grid;

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

    max-width: calc(100% - 120px);

    margin: 0 auto;

    gap: 0;

    /* border-bottom removed */

    background-color: #111111;

    /* Seals subpixel gaps between columns */

}







.process-column {

    position: relative;

    padding: 60px 40px;

    /* Internal spacing */

    min-height: 500px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    transition: transform 0.3s ease;

    /* Removed internal borders */

    isolation: isolate;

    /* Create stacking context for ::before */

}



.process-column:first-child {

    margin-left: 0;

}



/* Hover Background Images */

.process-column::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0.15;

    /* Even more subtle grayscale by default */

    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 1;

    filter: grayscale(100%) brightness(0.6);

    /* Grayscale by default */

    will-change: opacity, filter;

}



.process-column:hover::before,

.process-column.is-default-active::before {

    opacity: 1;

    filter: grayscale(0%) brightness(0.6);

    /* Full color on hover or default active */

}



/* Hover Gradient Overlay */

.process-column::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);

    opacity: 0;

    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 2;

    /* Above image (1), below content (3) */

    pointer-events: none;

}



.process-column:hover::after,

.process-column.is-default-active::after {

    opacity: 1;

}



/* Specific Images */

#col-servers::before {

    background-image: url('../assets/bg-servers-v3.jpg');

}



#col-vm::before {

    background-image: url('../assets/services_vm_v4.webp');

}



#col-backups::before {

    background-image: url('../assets/services_backups_v3.jpg');

}



#col-ai::before {

    background-image: url('../assets/services_ai_v2.png');

}



/* Text on Hover / Default Active */

.process-column:hover .process-title,

.process-column.is-default-active .process-title,

.process-column:hover .process-description,

.process-column.is-default-active .process-description,

.process-column:hover .process-number,

.process-column.is-default-active .process-number {

    color: #FFFFFF;

    transition: color 0.3s ease;

}



.process-column:hover .process-bg-number,

.process-column.is-default-active .process-bg-number {

    opacity: 0;

    /* Hide background number on hover or default active */

    transition: opacity 0.3s ease;

}



.process-column:hover,

.process-column.is-default-active {

    background-color: transparent;

    /* Remove background color on hover or default active */

    transition: background-color 0.3s ease;

}



/* Background Colors (Unified to match footer) */

.bg-cream,

.bg-green,

.bg-blue,

.bg-black {

    background-color: #111111;

    color: #EDEDED;

}



/* Large Background Number */

.process-bg-number {

    position: absolute;

    top: -20px;

    right: -20px;

    font-family: var(--font-heading);

    font-size: 14rem;

    font-weight: 700;

    line-height: 1;

    opacity: 0.03;

    /* Very subtle */

    pointer-events: none;

    z-index: 0;

}



/* Ensure content is above bg number */

.process-content-top,

.process-content-bottom {

    position: relative;

    z-index: 3;

}



.process-content-top {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.process-number {

    font-family: var(--font-heading);

    font-size: 1.5rem;

    font-weight: 600;

    letter-spacing: -0.02em;

}



.process-title {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    /* Reduced further as per user request */

    font-weight: 500;

    line-height: 1.1;

    margin: 0;

    word-break: normal;

    overflow-wrap: normal;

    hyphens: none;

}



.process-content-bottom {

    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.process-description {

    font-size: 1rem;

    line-height: 1.5;

    max-width: 90%;

    font-weight: 400;

    opacity: 0.9;

}



.process-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 140px;

    /* Compact */

    height: 40px;

    /* Compact */

    padding: 0;

    background-color: var(--color-accent);

    color: #FFFFFF !important;

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 500;

    transition: background-color 0.2s;

    border-radius: 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

}



.process-column:hover .process-btn,

.process-column.is-default-active .process-btn {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.process-btn:hover {

    background-color: #0038cc;

    /* Dark Blue Hover */

    color: #FFFFFF !important;

}



/* Ensure inner stagger text is white */

.process-btn .stagger-word,

.process-btn:hover .stagger-word {

    color: #FFFFFF !important;

}



.process-column:hover .process-bg-number,

.process-column.is-default-active .process-bg-number {

    opacity: 0.06;

    transform: scale(1.05);

    transition: all 0.5s ease;

}



/* Responsive */

/* Reverted to 1600px since 2.5rem font fits 4 columns better now */

@media (max-width: 1600px) {

    .process-container {

        grid-template-columns: 1fr 1fr;

        /* 2x2 on Desktop/Tablet */

        max-width: calc(100% - 120px);

        /* Keep desktop margins at this point */

        margin: 0 auto;

    }



    .process-title {

        font-size: 2.5rem;

        /* Scale up since we have 2x the space now */

    }



    /* Add internal borders for 2x2 grid */

    .process-column:nth-child(1),

    .process-column:nth-child(2) {

        border-bottom: 1px solid var(--color-border-subtle);

    }



    .process-column:nth-child(1),

    .process-column:nth-child(3) {

        border-right: 1px solid var(--color-border-subtle);

    }



    .process-column {

        min-height: 400px;

        padding: 40px 32px;

    }

}



@media (max-width: 1023px) {

    .process-container {

        grid-template-columns: 1fr;

        /* Stack on Mobile/Tablet (Nav Breakpoint) */

        width: 100%;

        max-width: calc(100% - 48px);

        /* Restore margins */

        margin: 0 auto;

    }



    /* Reset borders for stacked layout */

    .process-column:nth-child(1),

    .process-column:nth-child(2),

    .process-column:nth-child(3) {

        border-right: none;

        border-bottom: 1px solid var(--color-border-subtle);

    }



    .process-section-header {

        padding: 0 24px;

        /* Match container margins (48px total -> 24px each side) */

    }

}



@media (max-width: 768px) {



    /* Additional adjustments for smaller screens if needed, 

       but main grid change is now handled above */

    .process-section {

        padding-top: 60px;

    }



    .process-section-header {

        padding: 0 24px;

        margin-bottom: 40px;

    }



    .process-column {

        min-height: auto;

        gap: 60px;

        /* Space between top and bottom content if height is auto */

        padding: 48px 24px;

        border-right: none !important;

        /* Reset 2x2 grid border */

        border-bottom: 1px solid var(--color-border-subtle) !important;

        /* Force bottom border for stack */

    }



    /* Remove bottom border from the very last item in the stack logic */

    .process-column:last-child {

        border-bottom: none !important;

    }



    .process-bg-number {

        font-size: 10rem;

    }



    .process-title {

        font-size: 2.5rem;

    }





}



@media (max-width: 768px) {



    .content-card,

    .text-card,

    .cta-card {

        padding: 24px;

    }



    /* Hero CTA Adjustments for Mobile */

    .cta-text {

        font-size: 1rem;

        /* Smaller for mobile */

        /* white-space: normal removed to prevent duplication artifact */

        max-width: 85%;

        /* Leave room for arrow */

    }



    .cta-arrow {

        flex-shrink: 0;

        /* Prevent arrow from squishing */

        margin-left: 12px;

    }





    .notification-pill {

        display: inline-flex;

        align-items: stretch;

        width: auto;

        margin-left: 0;

        white-space: normal;

        font-size: 0.95rem;

    }



    .pill-text {

        padding: 12px 16px;

        white-space: normal;

        text-align: left;

        line-height: 1.4;

        flex: 1;

    }



    .pill-icon {

        width: 67px;

        flex: 0 0 67px;

        border-radius: 0;

    }



    .pill-icon svg {

        width: 22px;

        height: 22px;

    }







    .hero-footer-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

    }

}



.trusted-section {
    background-color: #FFFFFF;
    /* Match background of benefits section */
    color: #111;
    padding: 100px 60px;
}

.trusted-container {
    width: 100%;
    margin: 0 auto;
}



/* Override global text color for this section to ensure contrast */

.trusted-section h2,

.trusted-section p {

    color: #111;

}



.trusted-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 60px;

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

    gap: 40px;

}



.trusted-title {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    flex: 1;

}



.trusted-description {

    font-size: 1.1rem;

    line-height: 1.5;

    color: #444;

    flex: 1;

    max-width: 500px;

    text-align: left;

}



/* Marquee Styles */

.marquee-container {

    position: relative;

    width: 100%;

    max-width: 100%;

    margin-left: auto;

    margin-right: auto;

    overflow: hidden;

    padding: 0;

    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);

}



.marquee-track {

    display: flex;

    gap: 80px;

    width: max-content;

    animation: scroll 60s linear infinite;

}



.logo-item {

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0.8;

    transition: opacity 0.3s;

}



.logo-item:hover {

    opacity: 1;

}



.logo-item svg {

    height: 55px;

    width: auto;

    min-width: 150px;

    color: #111;

}



.logo-item img {

    width: auto;

    min-width: auto;

    max-width: 180px;

    object-fit: contain;

    filter: grayscale(1) brightness(0.7) opacity(0.8);

    transition: filter 0.3s, opacity 0.3s;

}



.logo-item:hover img {

    filter: grayscale(0) brightness(1) opacity(1);

}



.logo-item img.partner-honda {

    height: 35px;

}



.logo-item img.partner-kia {

    height: 28px;

}



.logo-item img.partner-grupologix {

    height: 80px !important;

}



.logo-item img.partner-gga {

    height: 80px !important;

}



.logo-item img.partner-ruffo {

    height: 55px;

}



.logo-item img.partner-otl {

    height: 55px;

}



.logo-item img.partner-integracion {

    height: 55px;

}



.logo-item img.partner-corella {

    height: 55px;

}



.logo-item img.partner-globaltrade {

    height: 55px;

}



.logo-item img.partner-esquerluken {

    height: 55px;

}



@keyframes scroll {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(calc(-100% / 4));

    }

}



/* Responsive Trusted Section */

@media (max-width: 1023px) {

    .trusted-section {

        padding: 60px 24px 40px 24px;

        /* Reduced bottom padding for mobile */

    }



    .trusted-header {

        flex-direction: column;

        gap: 24px;

        margin-bottom: 40px;

    }



    .trusted-title {

        font-size: 2.5rem;

    }



    .logo-item svg {

        height: 32px;

    }

}



/* Footer Styles */

.main-footer {

    background-color: var(--color-bg);

    color: var(--color-text-main);

    /* border-top removed */

    font-family: var(--font-primary);

    width: 100%;

}



/* Footer Top Bar */

.footer-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 1px solid var(--color-border);

    padding: 20px 60px;

}



.footer-socials {

    display: flex;

    gap: 32px;

}



.footer-social-link {

    font-size: 0.95rem;

    color: var(--color-text-main);

    text-decoration: none;

    transition: color 0.2s;

}



.footer-social-link:hover {

    color: var(--color-text-secondary);

}



.footer-contact-mini {

    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 0.95rem;

}



.separator {

    width: 6px;

    height: 6px;

    background-color: #00C853;

    /* Green accent from reference */

    border-radius: 50%;

    display: inline-block;

}



/* Footer Main Split */

.footer-main {

    display: flex;

    min-height: 500px;

    border-bottom: 1px solid var(--color-border);

}



.footer-brand-col {

    flex: 1.2;

    padding: 80px 60px;

    border-right: 1px solid var(--color-border);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.footer-links-col {

    flex: 1;

    padding: 80px 60px;

    display: flex;

    gap: 100px;

}



/* Brand Column Styles */

.footer-brand-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.footer-heading {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    line-height: 1.1;

    max-width: 80%;

    margin-right: 20px;

}



.scroll-top-btn {

    width: 40px;

    height: 40px;

    background-color: var(--color-dark);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.scroll-top-btn:hover {

    background-color: #333;

    transform: translateY(-3px);

}



/* Newsletter Styles */

.mobile-footer-contact {

    display: none;

    flex-direction: column;

    gap: 8px;

    margin-top: 32px;

    margin-bottom: 16px;

}



.mobile-footer-contact a {

    font-size: 1.1rem;

    color: var(--color-text-main);

}



.newsletter-section {

    margin-top: 60px;

}



.newsletter-label {

    font-size: 1.1rem;

    margin-bottom: 24px;

    max-width: 500px;

}



.newsletter-form {

    max-width: 500px;

    margin-bottom: 24px;

}



.newsletter-row {

    display: flex;

    margin-bottom: 12px;

}



.newsletter-form input[type="email"] {

    flex: 1;

    background-color: var(--color-dark);

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

    /* Subtle border for dark inputs */

    color: white;

    padding: 16px 20px;

    font-size: 1rem;

    outline: none;

}



.newsletter-form button {

    padding: 16px 24px;

    background-color: var(--color-dark);

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

    border-left: none;

    /* Merge look */

    color: white;

    cursor: pointer;

    font-weight: 500;

    display: flex;

    align-items: center;

    gap: 8px;

    transition: background-color 0.2s;

}



.newsletter-form button:hover {

    background-color: #333;

}



.newsletter-agreement {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    font-size: 0.85rem;

    color: var(--color-text-secondary);

    max-width: 500px;

    line-height: 1.4;

}



.newsletter-agreement input {

    margin-top: 3px;

    background-color: transparent;

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

}



/* Links Column Styles */

.footer-links-group {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.links-label {

    font-size: 1rem;

    color: var(--color-text-secondary);

    margin-bottom: 8px;

    display: block;

}



.footer-links-group a {

    font-size: 1rem;

    /* Adjusted from 1.5rem to match label size */

    font-weight: 500;

    color: var(--color-text-main);

    text-decoration: none;

    transition: color 0.2s;

}



.footer-links-group a:hover {

    color: var(--color-text-secondary);

}





/* Footer Bottom Bar */

.footer-bottom {

    padding: 24px 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.85rem;

    color: var(--color-text-main);

}



.legal-links {

    display: flex;

    gap: 32px;

}



.legal-links a {

    color: #525252;

    text-decoration: none;

    transition: color 0.2s;

}



.legal-links a:hover {

    color: var(--color-text-main);

}







/* Responsive Footer */

@media (max-width: 1023px) {

    .footer-top {

        padding: 20px 24px;

    }



    .footer-main {

        flex-direction: column;

    }



    .footer-brand-col {

        border-right: none;

        border-bottom: 1px solid var(--color-border);

        padding: 60px 24px;

    }



    .footer-links-col {

        padding: 60px 24px;

        gap: 60px;

    }



    .footer-heading {

        font-size: 2.5rem;

    }







    .mobile-nav {

        padding: 0;

        width: 100%;

    }



    .mobile-nav-links {

        display: flex;

        flex-direction: column;

        width: 100%;

    }



    /* Accordion Groups */

    .mobile-accordion-group {

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        /* Consistent subtle border */

    }



    .accordion-trigger {

        width: 100%;

        background: none;

        border: none;

        border-bottom: none !important;

        /* Override standard link border */

        cursor: pointer;

        outline: none;

        padding-right: 0;

        /* Align text left rigidly */

    }



    /* Submenu animation */

    .mobile-submenu {

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);

        /* Smoother expansion */

        background-color: transparent;

        /* Grid Layout for Subitems */

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

        /* Tighter gap */

        padding: 0;

        opacity: 0;

        /* Fade in effect */

        transform: translateY(-10px);

        transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;

    }



    .mobile-accordion-group.is-open .mobile-submenu {

        padding-bottom: 32px;

        /* More space at bottom when open */

        opacity: 1;

        transform: translateY(0);

    }



    .mobile-sub-link {

        display: flex;

        align-items: center;

        padding: 16px 12px;

        /* Card-like padding */

        color: #999;

        text-decoration: none;

        font-family: var(--font-primary);

        font-size: 0.95rem;

        transition: all 0.2s ease;

        border-radius: 4px;

        /* Soft edges */

        background-color: rgba(255, 255, 255, 0.02);

        /* Very subtle card background */

        border: 1px solid transparent;

    }



    .mobile-sub-link:hover {

        color: #fff;

        background-color: rgba(255, 255, 255, 0.05);

        border-color: rgba(255, 255, 255, 0.1);

        transform: translateX(4px);

        /* Subtle nudge */

    }



    /* Standard Links (Non-accordion) & Triggers */

    .mobile-nav-link {

        font-family: var(--font-heading);

        /* Clash Display */

        font-size: 1.5rem;

        /* Increased slightly for presence */

        color: #fff;

        text-decoration: none;

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 24px 0;

        /* More vertical breathing room */

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);

        /* Subtler border */

        text-align: left;

        letter-spacing: -0.01em;

        font-weight: 500;

    }









    .mobile-menu-footer {

        padding-bottom: 40px;

        padding-top: 40px;

        padding-left: 24px;

        padding-right: 24px;

        margin-top: auto;

    }



    .mobile-contact-btn {

        display: flex;

        justify-content: center;

        align-items: center;

        width: 100%;

        background-color: var(--color-accent);

        color: white;

        font-weight: 500;

        font-size: 1.1rem;

        padding: 18px;

        text-decoration: none;

        transition: background-color 0.2s;

    }



    .mobile-contact-btn:hover {

        background-color: #3378ff;

    }



    .footer-socials {

        width: 100%;

        justify-content: flex-start;

        gap: 24px;

        /* Ensure good spacing when left-aligned */

    }



    .footer-brand-col,

    .footer-links-col {

        padding: 40px 24px;

    }



    .footer-links-col {

        display: flex;

        flex-wrap: wrap;

        gap: 40px;

    }



    .footer-links-group a {

        font-size: 1rem;

    }



    .newsletter-row {

        flex-direction: column;

    }



    .newsletter-form button {

        border-left: 1px solid var(--color-border);

        justify-content: center;

        margin-top: -1px;

        /* Overlap border */

    }



    .notification-pill {

        display: inline-flex;

        width: auto;

        justify-content: flex-start;

    }



    .mobile-footer-contact {

        display: flex;

    }



    .footer-top .footer-contact-mini {

        display: none;

    }



    .newsletter-section {

        margin-top: 24px;

    }



    .footer-bottom {

        padding: 40px 24px;

        /* Align with rest of site */

        flex-direction: column-reverse;

        /* Copyright at bottom */

        align-items: flex-start;

        gap: 24px;

    }



    .legal-links {

        width: 100%;

        justify-content: flex-start;

        gap: 24px;

        flex-wrap: wrap;

        /* Prevent overflow */

    }



    .copyright {

        font-size: 0.85rem;

        color: #666;

    }

}



.about-section {
    background-color: #FFFFFF;
    /* Standardized white */
    color: #111;
    padding: 100px 0;
}



.about-container {

    max-width: calc(100% - 120px);

    padding: 0;

    /* padding moved to container constraints */

    margin: 0 auto;

    display: flex;

    gap: 80px;

    align-items: flex-start;

    padding-top: 40px;

    /* Add some space since we moved the border inside the section padding */

}



.about-left {

    flex: 0 0 250px;

    padding-top: 12px;

}



.about-label {

    font-size: 0.9rem;

    font-weight: 500;

    margin-bottom: 24px;

    line-height: 1.5;

    color: #111;

}



.locations-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.locations-list li {

    font-size: 0.85rem;

    color: #555;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.locations-list li::before {

    content: '';

    width: 4px;

    height: 4px;

    background-color: #999;

    display: block;

    border-radius: 1px;

}



.about-right {

    flex: 1;

}



.about-heading {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    line-height: 1.1;

    margin-bottom: 48px;

    color: #111;

    letter-spacing: -0.01em;

    max-width: 95%;

}



.btn-about {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    background-color: #111;

    color: white;

    padding: 20px 24px;

    text-decoration: none;

    font-weight: 500;

    width: 280px;

    transition: background-color 0.2s;

    font-size: 1rem;

}



.btn-about:hover {

    background-color: #333;

}



@media (max-width: 1023px) {

    .about-container {

        flex-direction: column;

        gap: 40px;

        max-width: calc(100% - 48px);

        padding: 40px 0 0 0;

    }



    .about-left {

        flex: auto;

        width: 100%;

    }



    .about-heading {

        font-size: 2.5rem;

    }



    .btn-about {

        width: 100%;

    }

}



.about-right .notification-pill {

    background-color: #111;

}



.about-right .notification-pill:hover {

    background-color: #000;

}



/* Make 'Nosotros' button longer on desktop and iPad (and above mobile) */

@media (min-width: 601px) {

    .about-right .notification-pill {

        min-width: 280px;

        justify-content: space-between;

    }



    .about-right .pill-text {

        flex: 1;

    }

}



/* Revert to full width for mobile phones */

@media (max-width: 600px) {

    .about-right .notification-pill {

        width: 100%;

        display: flex;

        justify-content: space-between;

    }

}



/* Metrics Section */





/* Visual Side */

.metrics-visual {

    width: 50%;

    position: relative;

    background-color: #000;

    aspect-ratio: 16 / 9;

}



@media (max-width: 1023px) {

    .metrics-container {
        flex-direction: column-reverse;
        width: 100%;
        margin: 0 auto;
    }



    .metrics-grid {

        width: 100%;

        grid-template-rows: auto;

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

    }



    .metrics-visual {

        width: 100%;

        margin-left: 0;

        margin-right: 0;

        aspect-ratio: 16 / 9;

        border: 1px solid var(--color-border-subtle-light);

        /* Match the container/items border style */

    }



    .metric-item {

        min-height: auto;

        height: auto;

        padding: 40px;

        /* Uniform internal padding on all sides */

        border-right: 1px solid var(--color-border-subtle-light);

    }



    .metric-item:nth-child(2n) {

        border-right: 1px solid var(--color-border-subtle-light) !important;

    }

}



.metrics-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.8;

}



.video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;

}



.play-button-wrapper {

    width: 60px;

    height: 60px;

    background-color: rgba(255, 255, 255, 0.2);

    backdrop-filter: blur(10px);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: transform 0.3s;

}



.play-button-wrapper:hover {

    transform: scale(1.1);

    background-color: rgba(255, 255, 255, 0.3);

}



.play-icon {

    width: 30px;

    height: 30px;

    color: white;

    fill: currentColor;

}







/* Ensure iframe fills container */

.metrics-visual {

    overflow: hidden;

    /* Prevent iframe overflow if scaled */

}



.metrics-visual iframe,

.metrics-video {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100.5% !important;

    /* Slight over-width to prevent hairline edges */

    height: 100.5% !important;

    /* Slight over-height */

    transform: translate(-50%, -50%);

    /* Always center */

    object-fit: cover;

    border: none;

}



/* Global Animation Classes */

.fade-in-up {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    will-change: opacity, transform;

}



.fade-in-up.is-visible {

    opacity: 1;

    transform: translateY(0);

}



.news-section {
    background-color: #FFFFFF;
    padding: 100px 60px;
}



.news-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}



.news-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 60px;

    flex-wrap: wrap;

    gap: 30px;

}



.news-title {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    color: #111;

    letter-spacing: -0.02em;

    max-width: 500px;

    line-height: 1.1;

}



.news-header-right {

    max-width: 400px;

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.news-description {

    font-size: 1rem;

    color: #111;

    line-height: 1.5;

}



.news-link-all {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #111;

    text-decoration: none;

    border-bottom: 1px solid #111;

    padding-bottom: 2px;

    font-weight: 500;

    width: fit-content;

    transition: opacity 0.2s;

}



.news-link-all:hover {

    opacity: 0.7;

}



/* Benefits Section (Our Values Style - Cards) */

.benefits-section {

    background-color: #FFFFFF;

    /* White background for the section */

    color: #111111;

    padding: 120px 60px;

    position: relative;

    z-index: 10;

}



.benefits-container {
    width: 100%;
    margin: 0 auto;
}



.benefits-heading {

    font-family: var(--font-heading);

    font-size: 4.5rem;

    font-weight: 500;

    margin-bottom: 80px;

    line-height: 1;

    letter-spacing: -0.02em;

    color: #111111;

}



.benefits-grid {

    display: grid;

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

    gap: 24px;

    /* Smaller gap between cards */

}



/* Card Style */

.benefit-card {

    display: flex;

    flex-direction: column;

    gap: 24px;

    align-items: flex-start;

    /* Aligns items to the left */

    justify-content: center;

    /* Centers content vertically */

    text-align: left;

    /* Ensures text is left-aligned */

    background-color: #FFFFFF;
    /* Standardized white */

    padding: 40px;

    /* Padding inside the card */

    min-height: 320px;

    /* Ensure uniform height look */

    transition: transform 0.3s ease;

}



.benefit-card:hover {

    transform: translateY(-5px);

}



.benefit-icon-wrapper {

    margin-bottom: 8px;

}



.benefit-icon-wrapper svg {

    width: 28px;

    height: 28px;

    stroke-width: 1.5px;

    color: #111111;

}



.benefit-title {

    font-family: var(--font-primary);

    font-size: 1.25rem;

    /* Reduced to match generic content */

    font-weight: 600;

    letter-spacing: -0.01em;

    color: #111111;

    margin: 0;

}



.benefit-desc {

    font-family: var(--font-primary);

    font-size: 1rem;

    line-height: 1.6;

    color: #444444;

    font-weight: 400;

    margin: 0;

    max-width: 100%;

}



/* Responsive Benefits */

@media (max-width: 1200px) {

    .benefits-heading {

        font-size: 3.5rem;

    }



    .benefits-grid {

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

    }

}



@media (max-width: 768px) {

    .benefits-section {

        padding: 80px 24px;

    }



    .benefits-heading {

        font-size: 2.8rem;

        margin-bottom: 48px;

    }



    .benefits-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }



    .benefit-card {

        padding: 32px;

        min-height: auto;

    }



    .benefit-desc {

        font-size: 1rem;

    }

}



.news-section {
    min-height: 80vh;
    padding: 100px 60px;
    background-color: #FFFFFF;
    /* Standardized white */
}



.news-container {
    width: 100%;
    margin: 0 auto;
}



.news-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 80px;

    gap: 60px;

}



.news-header-right {

    max-width: 450px;

}



.news-description {

    font-size: 1.1rem;

    line-height: 1.6;

    color: #111;

}



.news-grid {

    display: grid;

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

    gap: 20px;

    row-gap: 60px;

    /* Increased space between rows */

}



.news-title {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    line-height: 1.1;

    color: var(--color-dark);

    letter-spacing: -0.02em;

}



@media (max-width: 1024px) {

    .news-container {

        max-width: calc(100% - 48px);

    }



    .news-header {

        flex-direction: column;

        gap: 30px;

        margin-bottom: 60px;

    }



    .news-title {

        font-size: 2.5rem;

    }

}



@media (max-width: 768px) {

    .news-title {

        font-size: 2.5rem;

    }



    .news-section {

        padding: 60px 0;

    }

}



.news-card {

    display: flex;

    flex-direction: column;

    gap: 24px;

    cursor: pointer;

}



.news-image-wrapper {

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background-color: #ddd;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    transform: translateZ(0);

}



.news-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}



.news-card:hover .news-image {

    transform: scale(1.05);

}



.news-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.85rem;

    color: #111;

    font-weight: 500;

}



.news-separator {

    font-size: 0.6rem;

    color: #111;

}







.news-card-title {

    font-family: var(--font-primary);

    font-size: 1.25rem;

    font-weight: 500;

    color: #111;

    line-height: 1.4;

    margin: 0;

}



@media (max-width: 1023px) {

    .news-header {

        flex-direction: column;

    }



    .news-grid {

        grid-template-columns: 1fr;

    }



    .news-title {

        font-size: 2.5rem;

    }



    .news-container {

        max-width: calc(100% - 48px);

        padding: 40px 0 0 0;

    }

}





/* News Hover Accent */

.news-separator {

    transition: color 0.3s ease;

}



.news-card:hover .news-separator {

    color: var(--color-accent);

}



/* Final Safeguard for Mobile Overflow */

@media (max-width: 1023px) {



    section,
    header,
    footer,
    .hero-grid,
    .about-section,
    .metrics-section {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .trusted-section,
    .news-section {
        padding: 60px 24px !important;
    }

    .news-container {
        max-width: 100% !important;
        padding: 0 !important;
    }



    body {

        width: 100%;

        position: relative;

        overflow-x: hidden;

    }

}



/* Spacer for Fixed Navbar */

.app-container {

    padding-top: 80px;

}



/* Desktop Menu Overlay */

.desktop-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 990;

    /* Below mega menu (998) and navbar (1000) */

    visibility: hidden;

    pointer-events: none;

}



.desktop-menu-overlay {

    position: fixed;

    top: 80px;

    /* Below navbar */

    left: 0;

    width: 100%;

    height: calc(100vh - 80px);

    background-color: rgba(0, 0, 0, 0.7);

    /* Darkens the page */

    z-index: 900;

    /* Below Mega Menu (990) but above content */

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.6s ease, visibility 0.6s;

    pointer-events: none;

}



.desktop-menu-overlay.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    /* Blocks clicks on page content */

}





/* Mega Menu Styles */

.mega-menu {

    position: fixed;

    top: 80px;

    /* Navbar height */

    left: 0;

    width: 100%;

    background-color: var(--color-bg);

    /* Dark background */

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    box-sizing: border-box;

    border-radius: 0;

    visibility: hidden;

    opacity: 0;

    z-index: 990;

    /* Below navbar (1000) */

    overflow: hidden;

    color: var(--color-text-main);

    /* Light text */

    box-shadow: none;

    pointer-events: none;

    transform: translateY(-100%);

    /* Exit Animation: Same curve as entry (Rewind feel) - Defer visibility/opacity to end */

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s, opacity 0s linear 0.6s;

}



.mega-menu.is-active {

    visibility: visible;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;

    /* Entry Animation: Ease-Out (Decelerate in) - Original curve */

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.mega-menu.no-transition {

    transition: none !important;

}



.mega-content {

    display: flex;

    padding: 0;

    /* Removed padding for full-bleed images */

    gap: 0;

    /* Removed gap, handled by grid padding */

    max-width: 1400px;

    margin: 0 auto;

}



/* Left Featured Card */

.mega-featured-card {

    flex: 0 0 35%;

    position: relative;

    border-radius: 0;

    overflow: hidden;

    min-height: 420px;

    /* Was aspect-ratio: 1, changed to fixed min-height to match Explora */

    background-color: #111;

}



.mega-featured-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 1;

}



.mega-featured-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 50%);

    color: #FFFFFF;

}



.mega-featured-overlay .mega-contact-pill {

    margin-top: auto;

    /* Push to bottom */

    align-self: flex-start;

    /* Left align */

}



.mega-featured-title {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 500;

    line-height: 1.1;

    margin-bottom: 20px;

}



.mega-featured-text {

    font-size: 1.1rem;

    line-height: 1.5;

    opacity: 0.9;

    max-width: 90%;

}



/* Right Content Area */

.mega-grid-container {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 40px 60px;

    /* Restored padding here */

}



.mega-grid-columns {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

}



.mega-column-section {

    display: flex;

    flex-direction: column;

    gap: 0;

}



.mega-section-label {

    font-size: 0.9rem;

    color: var(--color-text-secondary);

    font-weight: 500;

    margin-bottom: 24px;

}



/* Individual Item */

.mega-grid-item {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 40px;

    border-radius: 0;

    transition: background-color 0.2s;

    text-decoration: none;

}



.mega-grid-item:hover {

    background-color: var(--color-dark);

}



/* Specific Styles for Industries Mega Menu */

#industriesMegaMenu .mega-content {

    flex-direction: row-reverse;

}



#industriesMegaMenu .mega-grid-container,

#servicesMegaMenu .mega-grid-container {

    padding: 0;

    /* Remove padding to eliminate "margins" */

}



#industriesMegaMenu .mega-grid-columns,

#servicesMegaMenu .mega-grid-columns {

    height: 100%;

}



#industriesMegaMenu .mega-column-section,

#servicesMegaMenu .mega-column-section {

    height: 100%;

}



#industriesMegaMenu .mega-grid-item,

#servicesMegaMenu .mega-grid-item {

    flex: 1;

    /* Distribute symmetrically (fill vertical space) */

    align-items: center;

    /* Center content verticality if needed, or stick to top */

    padding: 0 60px;

    justify-content: flex-start;

    /* Aligns text start position symmetrically */

}



/* Remove generic hover background for Industries */

#industriesMegaMenu .mega-grid-item:hover,

#servicesMegaMenu .mega-grid-item:hover {

    background-color: transparent;

}



#industriesMegaMenu .mega-item-content,

#servicesMegaMenu .mega-item-content {

    align-items: flex-start;

    text-align: left;

    gap: 12px;

    /* Increased spacing */

    position: relative;

    z-index: 2;

    /* Ensure text is above image */

}



/* Custom Hover Image for Agencias Aduanales */

#agencias-item,

#contact-item,

#salud-item,

#manufactura-item {

    position: relative;

    overflow: hidden;

    /* Ensure image stays inside border */

    isolation: isolate;

    /* New stacking context */

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    backface-visibility: hidden;

    transform: translateZ(0);

    clip-path: inset(0);

}



#agencias-item::before,

#contact-item::before,

#salud-item::before,

#manufactura-item::before,

#servers-item::before,

#vm-item::before,

#backups-item::before,

#automation-item::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: opacity 0.3s ease;

    z-index: -1;

    /* Behind text but inside isolation context */

    filter: grayscale(100%);

    box-sizing: border-box;

    border-radius: inherit;

}



#agencias-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/agencias_hover_v4.png');

}



#contact-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/contact_hover_v2.jpg');

}



#salud-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/salud_hover_v2.jpg');

}



#manufactura-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/manufactura_hover_v2.jpg');

}



#industriesMegaMenu .mega-column-section:first-child,

#servicesMegaMenu .mega-column-section:first-child {

    border-right: 1px solid var(--color-border-subtle);

}



#industriesMegaMenu .mega-grid-item:not(:last-child),

#servicesMegaMenu .mega-grid-item:not(:last-child) {

    border-bottom: 1px solid var(--color-border-subtle);

}



#agencias-item:hover::before,

#contact-item:hover::before,

#salud-item:hover::before,

#manufactura-item:hover::before,

#servers-item:hover::before,

#vm-item:hover::before,

#backups-item:hover::before,

#automation-item:hover::before {

    opacity: 0.40;

    /* Subtle hover effect */

}



/* Custom Hover Image for Services */

#servers-item,

#vm-item,

#backups-item,

#automation-item {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    backface-visibility: hidden;

    transform: translateZ(0);

    clip-path: inset(0);

}







#servers-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/bg-servers-v3.jpg');

}



#vm-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/services_vm_v4.png');

}



#backups-item::before {

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/services_backups_v3.jpg');

}



#automation-item::before {

    background-size: 150%;

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent), url('../assets/services_ai_v2.png');

}



#industriesMegaMenu .mega-featured-card {

    aspect-ratio: auto;

    flex: 0 0 45%;

    border-left: 1px solid rgba(255, 255, 255, 0.06);

}



#servicesMegaMenu .mega-featured-card {

    border-right: 1px solid rgba(255, 255, 255, 0.06);

    flex: 0 0 45%;

}



/* Ensure text is always white and above the background image */

#industriesMegaMenu .mega-grid-item .mega-item-content,

#servicesMegaMenu .mega-grid-item .mega-item-content {

    position: relative;

    z-index: 2;

}



#industriesMegaMenu .mega-grid-item .mega-item-title,

#industriesMegaMenu .mega-grid-item .mega-item-desc,

#servicesMegaMenu .mega-grid-item .mega-item-title,

#servicesMegaMenu .mega-grid-item .mega-item-desc {

    color: #FFFFFF !important;

    opacity: 1 !important;

}



/* Shared Alignment Logic (Industries, Services, Explora) */

#industriesMegaMenu .mega-content,

#servicesMegaMenu .mega-content,

#exploreMegaMenu .mega-content {

    max-width: none;

    margin: 0;

    border-left: 1px solid rgba(255, 255, 255, 0.1);

    border-right: 1px solid rgba(255, 255, 255, 0.1);

    border-bottom: 1px solid rgba(255, 255, 255, 0.04);

}



/* Specific Styles for Explore Mega Menu (Redesign 2x2 Grid) */

/* Formerly had transparent background, now matching others */

#exploreMegaMenu .mega-content {

    background-color: var(--color-bg);

    padding: 0;

    gap: 0;

}



#exploreMegaMenu .explore-grid-layout {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 1fr;

    gap: 0;

    height: 100%;

}



#exploreMegaMenu .explore-card {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-decoration: none;

    overflow: hidden;

    min-height: 420px;

    /* Minimum height for better visibility */

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    transform: translateZ(0);

}



#exploreMegaMenu .explore-card:not(:last-child) {

    border-right: 1px solid rgba(255, 255, 255, 0.06);

}



/* Image Card Styles */

#exploreMegaMenu .image-card .card-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;

    filter: grayscale(100%) brightness(0.6);

    opacity: 0.7;

    /* Default: B&W and Darker */

}



#exploreMegaMenu .image-card:hover .card-bg {

    transform: scale(1.05);

    /* Subtle zoom on hover */

    filter: grayscale(0%) brightness(1);

    opacity: 1;

    /* Hover: Color and Normal Brightness */

}



#exploreMegaMenu .card-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.3);

    /* Base overlay for text readability */

    z-index: 2;

    transition: background-color 0.3s ease;

}



#exploreMegaMenu .image-card:hover .card-overlay {

    background: rgba(0, 0, 0, 0);

}



#exploreMegaMenu .image-card:hover .card-video-bg {

    opacity: 1;

}



#exploreMegaMenu .card-video-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    /* Same as card-bg */

    opacity: 0;

    transition: opacity 0.5s ease;

}



#exploreMegaMenu .card-video-bg iframe {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    max-width: none;

    /* Dimensions set by JS */

}



#exploreMegaMenu .card-header {

    position: relative;

    z-index: 3;

    display: flex;

    justify-content: space-between;

    padding: 24px;

    width: 100%;

}



.card-tag {

    background: #fff;

    color: #000;

    font-size: 0.75rem;

    font-weight: 500;

    text-transform: uppercase;

    padding: 4px 8px;

    letter-spacing: 0.05em;

}



.card-year {

    font-family: inherit;

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.8);

    font-weight: 400;

}



#exploreMegaMenu .card-footer {

    position: relative;

    z-index: 3;

    z-index: 3;

    padding: 24px;

    margin-top: auto;

    /* Force to bottom */

}



.card-title {

    font-family: var(--font-heading);

    /* Ensuring clean sans-serif */

    font-size: 1.8rem;

    font-weight: 500;

    color: #fff;

    margin: 0;

    letter-spacing: -0.02em;

}



/* CTA Card Styles (Bottom Right) */

#exploreMegaMenu .cta-card {

    background-color: #080808;

    color: #fff;

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

}



.cta-content {

    margin-bottom: auto;

}



.big-number {

    font-size: 3rem;

    font-weight: 600;

    color: #fff;

    line-height: 1;

    display: block;

    margin-bottom: 8px;

}





.big-number sup {

    font-size: 1.5rem;

    color: var(--color-accent);

    /* Brand Accent */

    top: -0.5em;

}



#exploreMegaMenu .cta-text {

    font-size: 1rem;

    color: #999;

    line-height: 1.4;

    max-width: 200px;

}



#exploreMegaMenu .cta-button-block {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    background-color: var(--color-accent);

    /* Brand Accent */

    color: #fff;

    padding: 14px;

    font-size: 0.9rem;

    font-weight: 500;

    text-decoration: none;

    margin-top: 24px;

    transition: background-color 0.2s ease;

    gap: 8px;

}



#exploreMegaMenu .cta-button-block:hover {

    filter: brightness(1.1);

}





/* Responsive adjustments */

@media (max-width: 1024px) {

    #exploreMegaMenu .explore-grid-layout {

        grid-template-columns: 1fr;

        grid-template-rows: auto;

    }

}





.mega-item-icon {

    height: 48px;

    flex: 0 0 48px;

    background-color: var(--color-dark);

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

    border-radius: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mega-icon-shape {

    width: 24px;

    height: 24px;

    border: 1.5px solid var(--color-accent);

}



.mega-icon-circle {

    border-radius: 0;

}



.mega-icon-square {

    border-radius: 0;

}



.mega-icon-diamond {

    transform: rotate(45deg);

    width: 18px;

    height: 18px;

    border-radius: 0;

}



.mega-item-content {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.mega-item-title {

    font-weight: 600;

    color: var(--color-text-main);

    font-size: 1.05rem;

}



.mega-item-desc {

    font-size: 0.9rem;

    color: var(--color-text-secondary);

    line-height: 1.4;

}



/* Footer Section Removed - Button moved to overlay */



.mega-footer-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



/* ... */



.mega-footer-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.mega-footer-prompt {

    font-weight: 600;

    color: var(--color-text-main);

}



.mega-footer-sub {

    font-size: 0.9rem;

    color: var(--color-text-secondary);

}



.mega-contact-pill {

    background-color: var(--color-accent);

    color: #FFF;

    padding: 12px 28px;

    border-radius: 0;

    font-weight: 500;

    font-size: 0.95rem;

    transition: transform 0.2s, background-color 0.2s;

}



.mega-contact-pill:hover {

    background-color: #0038cc;

}











/* Responsive Adjustments for Mega Menu Padding */

@media (min-width: 1024px) and (max-width: 1400px) {



    #industriesMegaMenu .mega-grid-item,

    #servicesMegaMenu .mega-grid-item {

        padding: 0 30px;

    }



    #industriesMegaMenu .mega-content,

    #servicesMegaMenu .mega-content,

    #exploreMegaMenu .mega-content,

    .mega-content {

        max-width: none !important;

        width: 100% !important;

        /* Changed from 100vw to 100% to match Navbar width (approx scrollbar diff) */

        margin: 0 !important;

        padding: 0 !important;

        border-left: none !important;

        border-right: none !important;

    }



    /* Adjust Industries Image to align with Nosotros button start

       Strict 50% Split.

       Now that Navbar is forced to be symmetric (Left=Right), 50% is the true center.

       Covering: Logo + Ind + Serv (3 cols) vs Nos + Exp + Cont (3 cols).

    */

    #industriesMegaMenu .mega-featured-card {

        flex: 0 0 50% !important;

        max-width: 50% !important;

    }



    /* Reverse Services Menu to put Grid on Left */

    #servicesMegaMenu .mega-content {

        flex-direction: row-reverse !important;

    }



    /* Services Image aligns with Nosotros start (50%) matching Industries */

    #servicesMegaMenu .mega-featured-card {

        flex: 0 0 50% !important;

        max-width: 50% !important;

        border-right: none !important;

        border-left: 1px solid rgba(255, 255, 255, 0.06) !important;

    }



    /* Keep Services/Explore unchanged or adjust if needed? User only asked for Industries */



    #industriesMegaMenu .mega-grid-container,

    #servicesMegaMenu .mega-grid-container,

    .mega-grid-container {

        padding: 0 !important;

        width: 100% !important;

    }

}



/* Magic Text Effect */

.magic-word {

    opacity: 0.15;

    transition: opacity 0.2s ease, color 0.2s ease;

    display: inline-block;

    /* Allows transforms if needed */

    will-change: opacity;

}



.magic-word.is-active {

    opacity: 1;

    color: #000;

    /* Ensure high contrast when active */

}



/* Stagger Y Animation Styles */

/* Stagger Y Animation Styles */

.cta-text {

    position: relative;

    overflow: hidden;

    display: block;

    /* Strict block containment */

    height: 1.3em;

    line-height: 1.3em;

    padding: 0;

    margin: 0;

    white-space: nowrap;

    /* Force single line */

}







.stagger-word {

    display: inline-block;

    position: relative;

    overflow: visible;

    color: #FFFFFF !important;

    /* Force white base color */

    line-height: 1.3em;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;

    will-change: transform, color;

    transition-delay: calc(var(--word-index) * 0.05s);

}



.stagger-word::after {

    content: attr(data-text);

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 100%;

    color: #FFFFFF !important;

    opacity: 1;

    will-change: transform;

    line-height: 1.3em;

}



/* Hover Effects */

.cta-card:hover .stagger-word {

    transform: translateY(-100%);

    color: transparent;

    /* Hide original text color to reveal ::after if needed, but we translate */

}



/* Animate the inner word content (pseudo element approach usually requires moving the container or content) 

   Actually, the best way for "word scrub" replacement is to translate the word up.

   The ::after is BELOW. So if we translate the word UP, the ::after comes into view.

*/



.cta-card:hover .stagger-word {

    transform: translateY(-100%);

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Apply delay to the transform */

    transition-delay: calc(var(--word-index) * 0.05s);

}







/* Mobile Featured Carousel */

.mobile-featured-carousel {

    padding: 24px;

    margin-top: auto;

    /* Push to bottom if space allows, or just sit in flow */

    margin-bottom: 0;

    width: 100%;

    box-sizing: border-box;

}



.featured-card-track {

    display: flex;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    gap: 16px;

    padding-bottom: 24px;

    /* Space for dots/shadow */

    -ms-overflow-style: none;

    /* IE and Edge */

    scrollbar-width: none;

    /* Firefox */

}



/* Hide scrollbar for Chrome, Safari and Opera */

.featured-card-track::-webkit-scrollbar {

    display: none;

}



.featured-card {

    flex: 0 0 100%;

    /* Full width of container */

    scroll-snap-align: center;

    height: 220px;

    background: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%);

    /* Pastel gradient matching ref */

    border-radius: 32px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 32px;

    box-shadow: 0 10px 30px -10px rgba(142, 197, 252, 0.3);

    transition: transform 0.3s ease;

}



.card-inner-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    z-index: 2;

    max-width: 60%;

}



.f-card-title {

    font-family: var(--font-heading);

    /* Clash Display */

    font-size: 1.8rem;

    font-weight: 600;

    line-height: 1.1;

    color: #111111;

    /* Dark text for contrast on light bg */

    margin-bottom: 8px;

    letter-spacing: -0.02em;

}



.f-card-subtitle {

    font-family: var(--font-primary);

    font-size: 0.95rem;

    color: #333333;

    font-weight: 500;

    margin-bottom: 24px;

}



.f-card-btn {

    background-color: #111111;

    color: #ffffff;

    padding: 12px 24px;

    border-radius: 100px;

    font-size: 0.9rem;

    font-weight: 600;

    cursor: pointer;

    transition: transform 0.2s ease, background-color 0.2s;

    display: inline-block;

}



.f-card-btn:active {

    transform: scale(0.96);

}



.f-card-image {

    position: absolute;

    right: -20px;

    bottom: -20px;

    width: 180px;

    height: 180px;

    object-fit: contain;

    transform: rotate(-15deg);

    z-index: 1;

    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));

}



/* Dots */

.carousel-dots {

    display: flex;

    justify-content: center;

    gap: 8px;

    margin-top: -10px;

    /* Pull up a bit */

    margin-bottom: 10px;

}



.dot {

    width: 24px;

    height: 4px;

    background-color: #333333;

    opacity: 0.2;

    border-radius: 4px;

    transition: all 0.3s;

}



.dot.active {

    opacity: 1;

    background-color: #ffffff;

    /* Use white to contrast against dark menu bg */

}



/* Responsive tweak for very small screens */

@media (max-width: 380px) {

    .featured-card {

        height: 200px;

        padding: 24px;

    }



    .f-card-title {

        font-size: 1.5rem;

    }



    .f-card-image {

        width: 140px;

        height: 140px;

    }

}



/* Magic Text Effect */

.magic-word {

    opacity: 0.15;

    transition: opacity 0.2s ease, color 0.2s ease;

    display: inline-block;

    /* Allows transforms if needed */

    will-change: opacity;

}



.magic-word.is-active {

    opacity: 1;

    color: #000;

    /* Ensure high contrast when active */

}



/* Override color on hover for services */

.process-column:hover .magic-word {

    color: #FFFFFF !important;

}



/* Metrics Video Aspect Ratio Fix (Never Deform) */

.metrics-visual {

    width: 100%;

    aspect-ratio: 16 / 9;

    position: relative;

    overflow: hidden;

    height: 100% !important;

    /* Stretch to parent */

    border-radius: 0;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

}



.metrics-visual img,

.metrics-visual iframe,

.metrics-visual video {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

    /* Ensure video is not cut off */

    display: block;

    border: none !important;

}



/* ==========================================================================

   FINAL METRICS GRID STYLES (Base Blocks)

   ========================================================================== */



.metrics-section {
    background-color: #FFFFFF !important;
    /* Standardized white */

    border: none !important;

    outline: none !important;

}



.metrics-container,

.metrics-grid {

    border: none !important;

    outline: none !important;

}



.metrics-grid {

    display: grid;

    gap: 0 !important;

    border: none !important;

    outline: none !important;

    position: relative;

    z-index: 5;

    grid-template-columns: 1fr 1fr;

    /* Base Desktop Layout */

}



.metric-item {

    margin: 0 !important;

    padding: 24px;

    background-color: transparent;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

    z-index: 5;

    border: none !important;

    border: 1px solid var(--color-border-subtle-light) !important;

    /* Full border for items to ensure grid completes itself */

    margin-right: -1px;

    /* Collapse borders */

    margin-bottom: -1px;

    outline: none !important;

    transition: background-color 0.3s ease;

}



.metric-item:hover {

    background-color: rgba(0, 0, 0, 0.02);

}



/* Responsive Overrides (Large to Small) */



/* 1. Desktop Alignment */

@media (min-width: 1024px) {

    .metrics-container {

        display: flex !important;

        flex-direction: row !important;

        align-items: stretch !important;

        gap: 0 !important;

        justify-content: center;

        width: 100%;

        max-width: calc(100% - 120px) !important;

        margin: 0 auto !important;

    }



    .metrics-grid {

        order: 1;

        width: 50%;

        height: auto;

    }



    .metrics-visual {

        order: 2;

        width: 50%;

        height: auto !important;

        transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    }

}



/* 2. Tablet/Laptop Stacking (Invasion Point) */

@media (max-width: 1440px) {

    .metrics-container {

        max-width: calc(100% - 120px) !important;

        margin: 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 0 !important;

    }



    .metrics-visual,

    .metrics-grid {

        width: 100% !important;

    }



    .metrics-visual {

        order: 2;

    }



    .metrics-grid {

        order: 1;

    }



    .metrics-grid {

        order: 1;

    }

}



/* 2.5 Tablet Override (Match other sections) */

@media (max-width: 1024px) {

    .metrics-container {

        max-width: calc(100% - 48px) !important;

    }

}



/* 3. Specific Mobile Styles (Phone/iPhone: < 768px) */

@media (max-width: 768px) {

    .metrics-section .metrics-container {

        max-width: calc(100% - 48px) !important;

        margin: 0 auto !important;

        display: flex !important;

        flex-direction: column !important;

    }



    .metrics-section .metrics-grid,

    .metrics-section .metrics-container.is-video-active .metrics-grid {

        grid-template-columns: 1fr !important;

        /* Strictly 1 column */

        width: 100% !important;

    }



    .metrics-section .metric-item {

        width: 100% !important;

        /* Border handled by base class with negative margins */

    }

}









/* 4. Text Handling & Styles (Restored) */

.metric-value {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    color: #111;

    letter-spacing: -0.02em;

    border: none !important;

}



.metric-label {

    font-size: 1rem;

    color: #555;

    margin-top: 24px;

    border: none !important;

}



/* Blog Page Layout */

.blog-page-container {

    max-width: calc(100% - 120px);

    margin: 0 auto;

    padding: 0;

    padding-top: 120px;

    padding-bottom: 120px;

    /* Added symmetrical bottom padding */

    /* Space for fixed navbar + breathing room */

    width: 100%;

}



.blog-actions {

    display: flex;

    justify-content: center;

    margin-top: 60px;

    width: 100%;

}



@media (max-width: 1024px) {

    .blog-page-container {

        max-width: calc(100% - 48px);

        padding-top: 100px;

        padding-bottom: 100px;

        /* Added symmetrical bottom padding for mobile */

    }

}



/* Blog Actions */

.blog-actions {

    display: none;

    /* Initially hidden, managed by blog-render.js */

    justify-content: center;

    padding-top: 80px;

    /* Space from the grid */

}



.btn-load-more {

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--color-accent);

    color: white;

    padding: 14px 48px;

    border: none;

    font-family: var(--font-primary);

    font-size: 0.95rem;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.3s ease;

    border-radius: 0;

}



/* Blog Post Detail - Swiss Grid Layout */

.blog-post-wrapper {

    width: 100%;

    max-width: calc(100% - 120px);

    /* Matches global desktop margins */

    margin: 0 auto;

    padding: 0;

    border-top: 1px solid rgba(0, 0, 0, 0.1);

}



.blog-post-grid {

    width: 100%;

    display: flex;

    flex-direction: column;

}



/* Post Hero Block (Image + Title) */

.post-hero-block {

    display: grid;

    grid-template-columns: 40% 60%;

    width: 100%;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}



.post-content-row {

    display: grid;

    /* For future use if we group content too */

    grid-template-columns: 40% 60%;

    width: 100%;

}



/* Top Row */

.post-image-section {

    width: 100%;

    height: auto;

    /* Allow height to adjust */

    aspect-ratio: 16 / 9;

    /* Enforce 16:9 ratio */

    border-right: 1px solid rgba(0, 0, 0, 0.1);

    /* border-bottom removed */

    overflow: hidden;

}



.post-image-section img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.post-header-section {

    padding: 60px;

    display: flex;

    align-items: center;

    /* Centered Vertically */

    /* border-bottom removed */

    background-color: var(--color-bg-white);

    /* Changed to pure white */

}



.post-title-large {

    font-family: var(--font-heading);

    /* Clash Display */

    font-size: 3.5rem;

    line-height: 1.1;

    color: var(--color-text-dark);

    /* Use standard text black/dark */

    font-weight: 500;

    letter-spacing: -0.02em;

}



/* Bottom Row */

.post-meta-sidebar {

    padding: 60px;

    border-right: 1px solid rgba(0, 0, 0, 0.1);

    background-color: var(--color-bg-white);

}



.meta-group {

    margin-bottom: 12px;

    /* Reduced space */

    display: flex;

    align-items: baseline;

    gap: 8px;

}



.meta-group:last-child {

    margin-bottom: 0;

}



.meta-label {

    /* removed display: block */

    font-family: var(--font-heading);

    /* Clash Display */

    font-size: 1.1rem;

    /* Increased size */

    font-weight: 500;

    color: var(--color-text-dark);

    margin-bottom: 0;

}



.meta-value {

    /* removed display: block */

    font-family: var(--font-heading);

    /* Clash Display */

    font-size: 1.1rem;

    /* Increased size */

    color: var(--color-text-muted);

}



.post-content-area {

    padding: 80px;

    /* Increased padding on all sides */

    background-color: var(--color-bg-white);

}



.post-intro {

    font-family: var(--font-primary);

    /* Inter */

    font-size: 1.15rem;

    line-height: 1.6;

    font-weight: 500;

    /* Slightly lighter than before */

    color: #111111;

    /* Enforced dark color */

    /* Standard text color */

    margin-bottom: 40px;

}



.post-body p {

    font-family: var(--font-primary);

    /* Inter */

    font-size: 1rem;

    /* Reduced from 1.25rem */

    line-height: 1.7;

    color: #111111;

    /* Matches main site background color context */

    margin-bottom: 24px;

}



.post-body p:last-child {

    margin-bottom: 0;

}



/* Responsive Blog Post Detail */

@media (max-width: 1024px) {

    .blog-post-template {

        padding-top: 60px !important;

        padding-bottom: 80px !important;

    }



    .blog-post-wrapper {

        max-width: calc(100% - 48px) !important;

        /* Global Mobile Margin (24px each side) */

    }



    .post-hero-block,

    .post-content-row {

        grid-template-columns: 1fr;

    }



    .post-header-section {

        padding: 40px 0 !important;

    }



    .post-title-large {

        font-size: 2.5rem !important;

    }



    .post-meta-sidebar {

        padding: 40px 0 !important;

        border-right: none;

        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    }



    .post-content-area {

        padding: 40px 0 !important;

    }

}



.btn-load-more:hover {

    background-color: #0038cc;

}



/* Blog Post Specific Styles - Contained Full Width Hero & Title */

.full-width-hero {

    width: 100%;

    /* Height will adjust automatically or can be fixed */

    height: auto;

    margin-bottom: 40px;

    overflow: hidden;

    position: relative;

    border-radius: 0;

    /* Removed radius as requested */

}



.hero-full-img {

    width: 100%;

    height: auto;

    max-height: 600px;

    /* Limit height to keep it viewable */

    object-fit: cover;

    display: block;

}



.post-hero-block {

    width: 100%;

    margin-bottom: 40px;

    display: block;

    /* Stacked layout */

}



/* .post-image-section removed */



.post-header-section {

    width: 100%;

    display: block;

    text-align: left;

    /* Keep left aligned or center? User didn't specify, default left */

}



.post-title-large {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    line-height: 1.1;

    font-weight: 500;

    color: var(--color-dark);

}



/* Mobile adjustments for Hero and Split */

@media (max-width: 768px) {

    .full-width-hero {

        margin-bottom: 30px;

    }



    .hero-full-img {

        max-height: 40vh;

    }



    .post-title-large {

        font-size: 2.5rem !important;

        line-height: 1.2;

    }



    .blog-content-split {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        max-width: 100% !important;

        margin-bottom: 60px !important;

    }



    .split-left-col {

        padding-bottom: 0;

    }



    .left-col-sticky-content {

        position: relative !important;

        top: 0 !important;

    }



    .post-meta-sidebar {

        padding: 20px 0 !important;

    }



    .meta-group {

        margin-bottom: 8px;

    }

}



/* 30/70 Split Layout Styles */

.blog-content-split {

    display: grid;

    grid-template-columns: 40% 52%;

    /* 92% total width = 8% gap */

    justify-content: space-between;

    /* Remaining 10% becomes the gap */

    gap: 0;

    /* Gap handled by space-between, or minimal gap */

    width: 100%;

    margin-bottom: 100px;

    align-items: stretch;

    /* Ensure columns are equal height */

    overflow: visible;

    /* Ensure sticky works */

}



/* html { ... overflow-x: hidden ... } - Potentially blocking sticky */

/* body { ... overflow-x: hidden ... } */



.blog-post-wrapper {

    overflow: visible !important;

    /* Ensure no clipping */

}



.split-left-col {

    /* Left column styles */

    position: relative;

    /* height: auto; REMOVED to ensure stretch works */

    overflow: visible;

    /* Crucial for sticky */

}



.left-col-sticky-content {

    position: -webkit-sticky;

    position: sticky;

    top: 140px;

    /* Increased offset for better breathing room */

    height: fit-content;

    z-index: 50;

    transition: transform 0.3s ease;

    /* Subtle bounce or movement potential */

}



/* Subtle fade in for the sticky column on load */

.split-left-col {

    animation: fadeIn 0.8s ease-out forwards;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.post-meta-sidebar {

    /* Adjust sidebar to fit in left col */

    padding: 0;

    /* Remove massive padding */

    border-right: none;

    /* Remove old border */

    background-color: transparent;

    /* Removed sticky from here, moved to parent wrapper */

}



.split-right-col {

    /* Right column styles */

    display: flex;

    flex-direction: column;

    gap: 40px;

}



/* Reset inner padding for nested elements */

.post-header-section {

    padding: 0;

    width: 100%;

    margin-bottom: 40px;

    /* More breathing room */

}



.split-left-col .post-title-large {

    font-size: 3.5rem;

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.02em;

}



.post-meta-sidebar {

    margin-top: 40px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.meta-label {

    text-transform: uppercase;

    font-size: 0.75rem;

    letter-spacing: 0.1em;

    color: var(--color-text-muted);

    font-weight: 700;

}



.meta-value {

    font-size: 1.1rem;

    color: var(--color-text-dark);

}



.post-content-area {

    padding: 0;

}



/* Inline Images in Blog Post */

.post-inline-image-container {

    width: 100%;

    margin: 60px 0;

    border-radius: 0;

    overflow: hidden;

    background-color: #f5f5f5;

}



.post-inline-image {

    width: 100%;

    height: auto;

    object-fit: cover;

    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.post-inline-image-container:hover .post-inline-image {

    transform: scale(1.03);

    /* Subtle zoom effect */

}



/* Contact Form Section (New) */

.contact-form-section {
    padding: 100px 60px;
    width: 100%;
    background-color: #FFFFFF;
}

.contact-form-container {
    width: 100%;
    margin: 0 auto;
}



.contact-header {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    margin-bottom: 60px;

    gap: 40px;

}



.contact-title {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    /* Matched with main article title size (increased to 3.5rem) */

    font-weight: 500;

    /* Matched with main article title weight */

    line-height: 1.1;

    margin: 0;

    color: #111111;

    letter-spacing: -0.02em;

}



.contact-desc {

    font-family: var(--font-primary);

    font-size: 1rem;

    color: #666;

    max-width: 350px;

    line-height: 1.5;

    margin: 0;

}



.main-contact-form {

    border: 1px solid #e5e5e5;

    background-color: #FFFFFF;
    /* Standardized white */

}



.form-grid {

    display: flex;

    flex-wrap: wrap;

}



.form-item {

    padding: 30px;

    border-bottom: 1px solid #e5e5e5;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.form-item.half {

    width: 50%;

}



.form-item.half:first-child {

    border-right: 1px solid #e5e5e5;

}



.form-item.full {

    width: 100%;

}



.form-item.no-border-bottom {

    border-bottom: none;

}



.form-item label {

    font-family: var(--font-primary);

    font-size: 0.9rem;

    color: #333;

    font-weight: 500;

}



.form-item input,

.form-item textarea {

    border: none;

    background: transparent;

    font-family: var(--font-primary);

    font-size: 1.1rem;

    padding: 0;

    width: 100%;

    color: #111111;

    outline: none;

}



.form-item textarea {

    resize: none;

}



.form-footer {

    display: flex;

    border-top: 1px solid #e5e5e5;

    align-items: center;

}



.privacy-agreement {

    flex: 1;

    padding: 20px 30px;

    display: flex;

    align-items: center;

    gap: 15px;

}



.privacy-agreement input {

    width: 20px;

    height: 20px;

}



.privacy-agreement label {

    font-family: var(--font-primary);

    font-size: 0.85rem;

    color: #666;

    line-height: 1.4;

}



.privacy-agreement label a {

    color: #111111;

    text-decoration: underline;

}



.submit-btn {

    background-color: var(--color-accent);

    /* Blue accent from site */

    border: none;

    border-left: 1px solid #e5e5e5;

    padding: 30px 60px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 15px;

    font-family: var(--font-primary);

    font-size: 1.1rem;

    font-weight: 600;

    color: #ffffff;

    transition: background-color 0.3s ease;

}



.submit-btn:hover {

    background-color: #0038cc;

    /* Darker blue for hover */

}



.submit-btn svg {

    transition: transform 0.3s ease;

}



.submit-btn:hover svg {

    transform: translate(3px, -3px);

}



/* Form Responsive */

@media (max-width: 1024px) {

    .contact-title {

        font-size: 2.5rem;

    }

}



@media (max-width: 1023px) {
    .contact-form-section {
        padding: 80px 24px;
    }

    .contact-form-container {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .contact-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }



    .contact-title {

        font-size: 2.5rem;

    }



    .form-item.half {

        width: 100%;

        border-right: none;

    }



    .form-footer {

        flex-direction: column;

    }



    .submit-btn {

        width: 100%;

        border-left: none;

        border-top: 1px solid #e5e5e5;

        justify-content: center;

    }

}



/* Responsive Embeds */

.post-video-container {

    position: relative;

    padding-bottom: 56.25%;

    /* 16:9 Aspect Ratio */

    height: 0;

    overflow: hidden;

    width: 100%;

    margin-bottom: 40px;

    background: #000;

}



.post-video-container iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}



/* Related Posts Section */

.related-posts-section {

    padding: 100px 0;

    max-width: calc(100% - 120px);

    margin: 0 auto;

    border-top: 1px solid rgba(0, 0, 0, 0.1);

}



.related-posts-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 60px;

}



.related-title {

    font-family: var(--font-heading);

    font-size: 3.5rem;

    font-weight: 500;

    color: var(--color-dark);

}



.view-all-link {

    display: flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-primary);

    font-size: 0.9rem;

    font-weight: 600;

    color: var(--color-dark);

    text-decoration: none;

    transition: transform 0.3s ease;

}



.view-all-link:hover {

    transform: translateX(5px);

}



#related-news-grid {

    display: grid;

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

    gap: 40px;

}



@media (max-width: 1024px) {

    .related-posts-section {

        max-width: calc(100% - 48px);

        padding: 60px 0;

    }



    #related-news-grid {

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

    }

}



@media (max-width: 768px) {

    #related-news-grid {

        grid-template-columns: 1fr;

    }



}



/* Shared Stagger Animation Styles */

.stagger-word {

    display: inline-block;

    position: relative;

    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    transform-style: preserve-3d;

    color: #FFFFFF !important;

    /* Force white */

}



.stagger-word::before {

    content: attr(data-text);

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 100%;

    transform: translate3d(0, 0, 0);

    color: #FFFFFF !important;

    /* Force white */

}



/* Hover trigger for parent containers */

.btn-primary:hover .stagger-word,

.cta-card:hover .stagger-word,

#nosotros-btn:hover .stagger-word,

.process-btn:hover .stagger-word,

.btn-load-more:hover .stagger-word,

.mega-contact-pill:hover .stagger-word,

.newsletter-form button:hover .stagger-word {

    transform: translateY(-100%);

    transition-delay: calc(0.03s * var(--word-index));

}



.stagger-wrapper {

    overflow: hidden;

    position: relative;

    display: inline-flex;

    line-height: 1.25;

    vertical-align: middle;

}



/* Nosotros Button - Navbar Match Style */

#nosotros-btn {

    background-color: var(--color-accent) !important;

    border-radius: 0 !important;

    padding: 0 !important;

    width: 220px !important;

    /* Fixed width */

    justify-content: center !important;

    display: inline-flex !important;

}



#nosotros-btn:hover {

    background-color: #0038cc !important;

}



#nosotros-btn .pill-text {

    padding: 16px 0 !important;

    width: 100%;

    justify-content: center;

}



/* Force text white always */

#nosotros-btn .stagger-word,

#nosotros-btn:hover .stagger-word,

#nosotros-btn .stagger-word::before {

    color: #FFFFFF !important;

}


/* Benefits Section (Our Values Style - Cards) */
.benefits-section {
    background-color: #FFFFFF;
    color: #111111;
    padding: 120px 60px;
    position: relative;
    z-index: 10;
}

.benefits-container {
    width: 100%;
    margin: 0 auto;
}

.benefits-heading {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    font-weight: 500;
    margin-bottom: 80px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #111111;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* Gap removed as requested */
}

.benefit-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    background-color: transparent;
    /* Background removed */
    padding: 40px;
    min-height: 320px;
    transition: transform 0.3s ease;
    border: 1px solid var(--color-border-subtle-light);
    /* Subtle outline */
    margin-left: -1px;
    /* Collapse borders */
    margin-top: -1px;
}

.benefit-card:hover {
    transform: translateY(0);
    /* Remove movement on hover for grid lines style */
    background-color: #FAFAFA;
    /* Very subtle highlight on hover */
    z-index: 1;
    /* Bring outlines to top */
}

.benefit-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111111;
    margin: 0;
}

.benefit-desc {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    font-weight: 400;
    margin: 0;
    max-width: 100%;
}

/* Responsive Benefits */
@media (max-width: 1023px) {
    .benefits-heading {
        font-size: 3.5rem;
        margin-bottom: 48px;
    }

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

    .benefits-section {
        padding: 80px 24px;
        /* Standard site-wide mobile margin */
    }
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .benefit-card {
        padding: 32px;
        min-height: auto;
    }
}

/* Testimonials Grid Section (Respecting Site-Wide Design) */
.testimonials-grid-section {
    padding: 100px 60px;
    /* Aligns with other sections like benefits */
    background-color: #FFFFFF;
}

.testimonials-container {
    width: 100%;
    /* Standard wide container */
    margin: 0 auto;
    border: none;
    /* Removed outer frame to eliminate dividing lines */
}

.testimonials-layout {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: 0;
}

/* Removed .test-row and .top-row grid definitions as they are now handled by .testimonials-layout */

/* Card Common Styles */
.test-card {
    border-radius: 0;
    overflow: hidden;
    position: relative;
    padding: 60px;
    display: flex;
    flex-direction: column;
    border: none;
    /* Removed individual card borders */
}

.test-card:last-child {
    border: none;
}

.card-category {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.card-category-dark {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    margin-bottom: 40px;
}

/* 1. Large Media Card */
.large-media-card {
    min-height: 520px;
    justify-content: flex-end;
    padding-bottom: 80px;
}

.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.3);
    transform-origin: center center;
}

.card-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.8) 100%);
    z-index: 1;
}

.large-media-card .card-content-top {
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 2;
}

.large-media-card .card-content-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.card-text-group {
    max-width: 85%;
}

.card-quote {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.card-author {
    font-size: 1.1rem;
    color: #FFFFFF;
    margin-bottom: 0;
}

.play-button-circle {
    position: relative;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.play-button-circle:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 2. Stats Card Blue */
.stats-card-blue {
    background-color: var(--color-accent);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.stats-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/stats-bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    filter: grayscale(100%);
    z-index: 0;
    pointer-events: none;
}

.stats-main {
    position: relative;
    z-index: 1;
    margin: auto 0;
}

.stats-number {
    font-size: 5.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    font-family: var(--font-heading);
    white-space: nowrap;
}

.stats-desc {
    font-size: 1.25rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    max-width: 80%;
    margin: 0;
}

/* 3. News Card Dark */
.news-card-dark {
    background-color: var(--color-bg);
    color: #FFFFFF;
    justify-content: space-between;
}

.news-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.read-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.05em;
}

.news-headline {
    font-size: 2.2rem;
    line-height: 1.1;
    margin: 60px 0;
    font-family: var(--font-heading);
    font-weight: 500;
    max-width: 90%;
}

.team-photo {
    width: 60%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 0;
}

/* 4. Review Card Light */
.review-card-light {
    background-color: #FFFFFF;
    color: #111111;
    justify-content: center;
}

.review-quote {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    line-height: 1;
    margin-bottom: 40px;
    font-weight: 500;
    color: #111111;
    letter-spacing: -0.02em;
}

.review-actions {
    display: flex;
    gap: 20px;
}

.btn-pill-primary {
    padding: 18px 36px;
    background-color: var(--color-accent);
    color: #FFFFFF !important;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-pill-primary:hover {
    background-color: #0038cc;
}

.btn-pill-secondary {
    padding: 18px 36px;
    border: 1px solid #111111;
    color: #111111 !important;
    border-radius: 0;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-pill-secondary:hover {
    background-color: #111111;
    color: #FFFFFF !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .card-quote {
        font-size: 2rem;
    }

    .stats-number {
        font-size: 4.2rem;
    }

    .review-quote {
        font-size: 2.2rem;
    }
}

@media (max-width: 1023px) {
    .testimonials-grid-section {
        padding: 40px 24px !important;
        /* Standard site-wide mobile margin */
    }

    .testimonials-container {
        border: none;
    }

    .testimonials-layout {
        grid-template-columns: 1fr;
    }

    .test-card {
        padding: 24px;
        /* Standard site-wide mobile margin */
        border: none;
    }

    .stats-card-blue {
        padding: 48px 24px;
        /* More compact height based on feedback */
        min-height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .large-media-card {
        min-height: 450px;
    }

    .card-quote {
        font-size: 1.8rem;
    }

    .large-media-card .card-content-top {
        top: 24px;
        left: 24px;
    }

    .large-media-card .card-content-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .card-text-group {
        max-width: 100%;
    }

    .play-button-circle {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 768px) {
    .benefits-heading {
        font-size: 2.5rem !important;
        margin-bottom: 40px;
    }

    .review-actions {
        flex-direction: column;
    }

    .btn-pill-primary,
    .btn-pill-secondary {
        width: 100%;
    }

    .card-quote {
        font-size: 1.6rem;
    }
}