/* TEDIC Qué Hacemos Block — Wave 98 jul-27
 *
 * Spec Figma: grid horizontal de 3 cards sobre fondo blanco.
 * Card: placeholder 80x80 + título 18px bold + descripción 14-15px gris.
 *
 * Architecture (Wave 90 v9 + Wave 96):
 * - section.full-width: left=0 width=viewport, margin auto
 * - content interior: margin-left scale 80/110/150/230
 * - section.padding-top/bottom: 80-96px
 */

.que-hacemos-block {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 64px 0 64px !important;       /* Wave 144: spec simétrico 64/64 */
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* Content interior con margin izquierdo escalado */
.que-hacemos-block .que-hacemos-title {
    font-family: Lato, sans-serif !important;
    font-size: 1.875rem !important;        /* 30px */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1A1A2E !important;
    margin: 0 0 48px 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
}

/* Eyebrow sobre el title */
.que-hacemos-block .que-hacemos-eyebrow {
    display: block !important;
    font-family: Lato, sans-serif !important;
    font-size: 0.875rem !important;        /* 14px */
    font-weight: 500 !important;
    color: #4F46E5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 16px !important;
}

.que-hacemos-block .que-hacemos-h2-text {
    display: block !important;
}

/* Grid de cards: 3 columnas desktop, 2 tablet, 1 mobile (Wave 119: spec match) */
.que-hacemos-block .que-hacemos-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;        /* spec real: ~16-20px */
    width: 100% !important;
}

/* Card (Wave 119: revertido a spec real — layout horizontal interno, padding compacto, sin border) */
.que-hacemos-block .que-hacemos-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;        /* spec real: icon left + text right */
    align-items: flex-start !important;
    gap: 16px !important;
}

/* Wave 137 jul-28: textos mas grandes + icon mas grande (spec match) */
.que-hacemos-block .que-hacemos-icon {
    width: 96px !important;                 /* Wave 137: 80 -> 96 */
    height: 112px !important;               /* Wave 137: 96 -> 112 */
    background-color: #EEF0FF !important;
    border-radius: 12px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}
/* Wave 115: si el item tiene image_url, la imagen reemplaza al SVG icon */
.que-hacemos-block .que-hacemos-icon .que-hacemos-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
}
.que-hacemos-block .que-hacemos-icon svg {
    width: 40px !important;
    height: 40px !important;
    color: #564FFF !important;
}
.que-hacemos-block .que-hacemos-icon svg path,
.que-hacemos-block .que-hacemos-icon svg circle,
.que-hacemos-block .que-hacemos-icon svg line,
.que-hacemos-block .que-hacemos-icon svg polyline {
    stroke: currentColor !important;
}

/* Card title (Wave 137: 19px · Wave 139: 18px H3 Bold spec) */
.que-hacemos-block .que-hacemos-card-title {
    font-family: Lato, sans-serif !important;
    font-size: 1.125rem !important;       /* Wave 139: 19px -> 18px (H3) */
    font-weight: 700 !important;           /* Bold spec */
    line-height: 1.2 !important;           /* Wave 139: 1.3 -> 1.2 (120%) */
    color: #1A1A1A !important;             /* Wave 139: #1F2937 -> #1A1A1A (negro spec) */
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

/* Card description (Wave 137: 15px · Wave 139: 16px Parrafo Regular spec) */
.que-hacemos-block .que-hacemos-card-desc {
    font-family: Lato, sans-serif !important;
    font-size: 1rem !important;            /* Wave 139: 15px -> 16px (Parrafo) */
    font-weight: 400 !important;           /* Regular spec */
    line-height: 1.2 !important;           /* Wave 139: 1.4 -> 1.2 (120%) */
    color: #1A1A1A !important;             /* Wave 139: #6B7280 -> #1A1A1A (negro spec) */
    margin: 0 !important;
    padding: 0 !important;
}

/* Wave 132 jul-28: REMOVIDA regla conflictiva de .que-hacemos-image 88x88
   (legacy Wave 115, pisaba la regla principal 100%/100%)
   La imagen sigue la regla 100% del container padre (80x96 spec) */
/* Wave 132 jul-28: container transparente cuando tiene imagen,
   mantiene dimensiones 80x96 del container principal */
.que-hacemos-block .que-hacemos-icon:has(.que-hacemos-image) {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 12px !important;
}

/* Wave 119: card-body wrapper para layout horizontal */
.que-hacemos-block .que-hacemos-card-body {
    flex: 1 !important;
    min-width: 0 !important;
}

@media (max-width: 1023px) and (min-width: 768px) {
    .que-hacemos-block .que-hacemos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px !important;
    }
}

/* Responsive — mobile <768: 1 col */
@media (max-width: 767px) {
    .que-hacemos-block {
        padding: 56px 0 64px !important;
    }
    .que-hacemos-block .que-hacemos-title {
        font-size: 1.5rem !important;        /* 24px mobile */
        margin-bottom: 32px !important;
    }
    .que-hacemos-block .que-hacemos-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}