/* SaaS Grid Component */

.dh-saas-grid {
    padding: 60px 0;
    background-color: var(--primary-white, #FFFFFF);
}

#soluciones {
    scroll-margin-top: -80px;
}

.dh-saas-grid__header {
    text-align: left;
    max-width: 1070px;
    margin: 0 auto 40px;
    padding: 0 16px;
}

.dh-saas-grid__overline {
    display: block;
    color: #DF002F;
    /* Figma: Primary/Red/100% */
    font-family: var(--font-lato, 'Lato');
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    /* Figma uses 12% or similar tracking */
    text-transform: uppercase;
    margin-bottom: 12px;
    text-align: left;
}

.dh-saas-grid__title {
    color: var(--primary-black-100, #111B29);
    /* Figma: Primary/Black/100% */
    font-family: var(--font-lato, 'Lato');
    font-size: 28px;
    /* Mobile size */
    font-weight: 700;
    line-height: 1.16;
    /* 116% */
    margin: 0;
    text-align: left;
}

.dh-saas-grid__cards {
    display: flex;
    flex-direction: column;
    /* Mobile stack */
    gap: 16px;
    padding: 0px;
}


/* Card Base Styles (Mobile First - Grid Layout) */
.dh-saas-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon title"
        "desc desc";
    gap: 6px 9px;
    align-items: center;
    align-content: start;

    background-color: #FFF8F8;
    border: 2px solid #FCE7E8;
    border-radius: 10px;
    padding: 16px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
}

.dh-saas-card:hover {
    background-color: #FFF3F3;
    border-color: #FFF3F3;
    transform: none;
}

/* Icon Wrapper Mobile */
.dh-saas-card__icon-wrapper {
    grid-area: icon;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5.909px;
    background: #FCE7E8;
    backdrop-filter: blur(46px);
}

.dh-saas-card__icon,
.dh-saas-card__icon-wrapper svg {
    width: 23px;
    /* Mobile size */
    height: 23px;
    /* Mobile size */
    object-fit: contain;
}

.dh-saas-card__icon-wrapper svg path {
    stroke: #DF002F;
}

/* Content Wrapper - Unbox for Grid */
.dh-saas-card__content {
    display: contents;
}

/* Title Mobile */
.dh-saas-card__title {
    grid-area: title;
    color: #E20E18;
    font-family: var(--font-lato, 'Lato');
    font-size: 17px;
    /* Mobile size */
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dh-saas-card__arrow {
    transition: transform 0.2s ease;
    display: inline-block;
    flex-shrink: 0;
}

/* Description Mobile */
.dh-saas-card__description {
    grid-area: desc;
    color: #667489;
    font-family: var(--font-lato, 'Lato');
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    margin-top: 4px;
    /* Slight gap from top elements if needed, though grid gap handles most */
}


/* Tablet */
/* Tablet */
@media (min-width: 768px) {
    .dh-saas-grid__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .dh-saas-card {
        /* Tablet: 2 columns */
        flex: 0 1 calc(50% - 12px);
        /* (100% / 2) - (gap / 2) */
        /* Note: Gap is 24px total, so each card subtracts 12px to fit 2 perfectly with 24px gap in middle */
        max-width: 380px;
        min-height: 104px;
        /* Ensure top alignment for tablet as well */
        align-items: flex-start;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .dh-saas-grid {
        padding: 20px 0px 60px 0px;
    }

    .dh-saas-grid__title {
        font-size: 36px;
    }

    .dh-saas-grid__cards {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
        align-items: flex-start;
    }

    /* Restore Flex Layout for Desktop */
    .dh-saas-card {
        display: flex;
        flex-direction: row;
        /* Flex Row */
        align-items: flex-start;
        /* Center Vertically */
        gap: 12px;

        /* Width Calculation */
        flex: 0 1 calc(33.333% - 16px);
        max-width: 380px;
        box-sizing: border-box;
        min-height: 104px;
    }

    .dh-saas-card__content {
        display: block;
        /* Restore block wrapper */
        flex: 1;
    }

    .dh-saas-card__icon-wrapper {
        width: 65px;
        height: 65px;
        padding: 11.818px;
    }

    .dh-saas-card__icon,
    .dh-saas-card__icon-wrapper svg {
        width: 35px;
        height: 35px;
    }

    .dh-saas-card__title {
        font-size: 18px;
        margin: 0 0 6px;
        /* Restore bottom margin */
    }

    .dh-saas-card__description {
        margin-top: 0;
    }
}

/* Specific fix for 1200px - 1306px: Maintain 380px width & 104px height, stack if needed */
@media (min-width: 1200px) and (max-width: 1306px) {
    .dh-saas-grid__cards {
        gap: 24px;
        justify-content: center;
    }

    .dh-saas-card {
        display: flex;
        /* Ensure flex context */
        flex-direction: row;
        flex: 0 0 380px !important;
        /* Force fixed width, do not grow/shrink */
        width: 380px !important;
        max-width: 380px !important;
        min-height: 104px !important;
        height: 104px !important;
        /* User requested fixed height */
        align-items: flex-start !important;
        /* Reset to start to match normal desktop */
    }
}