/* TEDIC Sobre TEDIC Block — Wave 142 jul-28
 *
 * Spec Figma (PNG oficial user jul-28 4ta vez) — bg #EEEDFF, link #564FFF violeta brand,
 * padding lateral ASIMÉTRICO 110px izq / 167px der. Logo TEDIC = wordmark magenta
 * (#E94278) ~144×31px (la misma imagen que el footer).
 *
 * Estructura: bg full-width + grid 55/45, content con padding asimétrico.
 */

/* Full-width bg lila MUY claro (spec oficial #EEEDFF) */
.sobre-tedic-block {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 80px 0 !important;
    background-color: #EEEDFF !important;
    box-sizing: border-box !important;
}

/* Wave 142 jul-28: padding lateral ASIMÉTRICO (spec: 110px izq / 167px der).
   NO usar grid max-width 1200 centrado — eso da padding simétrico 72/72. */
.sobre-tedic-block .sobre-tedic-grid {
    display: grid !important;
    grid-template-columns: 55fr 45fr !important;
    gap: 48px !important;
    width: 100% !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;
    /* Asimetría spec: 110px izq, 167px der (medido numpy del PNG) */
    padding-left: 110px !important;
    padding-right: 167px !important;
}

/* Cada columna */
.sobre-tedic-block .sobre-tedic-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Eyebrow label — spec Figma exacto: Lato, 700 Bold, 14px, line-height 100%, letter-spacing 6%, UPPERCASE */
.sobre-tedic-block .sobre-tedic-eyebrow {
    font-family: Lato, sans-serif !important;
    font-size: 0.875rem !important;          /* 14px */
    font-weight: 700 !important;             /* Bold (spec) */
    color: #5A6B85 !important;               /* gris azulado medio */
    text-transform: uppercase !important;     /* UPPERCASE */
    letter-spacing: 0.06em !important;       /* 6% (spec) */
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;               /* 100% (spec) */
}

/* Logo TEDIC — wrapper */
.sobre-tedic-block .sobre-tedic-logo {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Wordmark tipográfico MAGENTA (fallback cuando no hay imagen) */
.sobre-tedic-block .sobre-tedic-logo-text {
    font-family: Lato, sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: #E94278 !important;                /* magenta spec */
    letter-spacing: -0.02em !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Wave 142 jul-28: imagen real del logo TEDIC (wordmark magenta del footer).
   Spec tamaño: ~144×31px (medido numpy). */
.sobre-tedic-block .sobre-tedic-logo-image {
    max-width: 180px !important;
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Descripción — spec: gris oscuro casi negro #1F2937 */
.sobre-tedic-block .sobre-tedic-description {
    font-family: Lato, sans-serif !important;
    font-size: 1rem !important;              /* 16px */
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #1F2937 !important;               /* gris oscuro casi negro */
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    max-width: 480px !important;
}

/* Link "Visitar Sitio →" — Wave 142: color violeta brand #564FFF (spec oficial,
   NO azul #2563EB). TEXTO PLANO con flecha Unicode. */
.sobre-tedic-block .sobre-tedic-link {
    font-family: Lato, sans-serif !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #564FFF !important;                /* spec: violeta brand */
    text-decoration: none !important;
    display: inline !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.sobre-tedic-block .sobre-tedic-link:hover {
    text-decoration: underline !important;
    color: #3F3ACC !important;                /* violeta más oscuro on hover */
}
.sobre-tedic-block .sobre-tedic-link-svg {
    display: none !important;
}
.sobre-tedic-block .sobre-tedic-link::before {
    content: none !important;
}
/* Flecha Unicode " →" via ::after local (spec oficial — flecha DESPUÉS del texto "Visitar Sitio →") */
.sobre-tedic-block .sobre-tedic-link::after {
    content: " →" !important;
    color: #564FFF !important;
    font-weight: 400 !important;
}

/* Col derecha — eyebrow gris azulado, alineado a la IZQUIERDA (spec user) */
.sobre-tedic-block .sobre-tedic-logos-eyebrow {
    font-family: Lato, sans-serif !important;
    font-size: 0.875rem !important;          /* 14px */
    font-weight: 700 !important;             /* Bold (spec Figma exacto) */
    color: #5A6B85 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;       /* 6% (spec) */
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;               /* 100% (spec) */
    text-align: left !important;             /* spec user: alineado izquierda */
    width: 100% !important;
}

/* Logos aliados en row — spec: SIN separador, sin labels, mismo alto, NED más grande */
.sobre-tedic-block .sobre-tedic-logos {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;         /* baseline-aligned */
    justify-content: flex-start !important;   /* izquierda */
    gap: 32px !important;
    position: relative !important;
}

.sobre-tedic-block .sobre-tedic-logo-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;                        /* sin gap (no labels) */
    flex: 0 0 auto !important;
    position: relative !important;
}
/* Wave 143 jul-28: NO divisoria vertical entre items (spec user explícito) */
.sobre-tedic-block .sobre-tedic-logo-item + .sobre-tedic-logo-item::before {
    display: none !important;                 /* matar divider legacy */
}

/* Wordmark name aliado (fallback cuando no hay imagen) */
.sobre-tedic-block .sobre-tedic-logo-name {
    display: none !important;                 /* spec: sin labels */
    font-family: Lato, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #1A1A2E !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Imagen real del aliado — spec: NED ligeramente más grande en ANCHO, ambos con
   el MISMO alto. Usamos height fijo para forzar baseline-aligned.
   NED: 180px max width / 70px height.
   Tactical Tech: 140px max width / 70px height (mismo alto). */
.sobre-tedic-block .sobre-tedic-logo-item:first-child .sobre-tedic-logo-item-image {
    max-width: 180px !important;              /* NED más ancho */
    max-height: 70px !important;
    width: auto !important;
    height: 70px !important;                  /* forzar mismo alto */
    display: block !important;
    object-fit: contain !important;
}
.sobre-tedic-block .sobre-tedic-logo-item:not(:first-child) .sobre-tedic-logo-item-image {
    max-width: 140px !important;              /* Tactical Tech un poco más chico en ancho */
    max-height: 70px !important;
    width: auto !important;
    height: 70px !important;                  /* mismo alto que NED */
    display: block !important;
    object-fit: contain !important;
}

/* Wave 143 jul-28: matar los descriptions/labels debajo de los aliados (spec user) */
.sobre-tedic-block .sobre-tedic-logo-description {
    display: none !important;                 /* spec: sin labels */
    font-family: Lato, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #9CA3AF !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Responsive — mobile <768: 1 col stacked + padding simétrico */
@media (max-width: 767px) {
    .sobre-tedic-block {
        padding: 64px 0 !important;
    }
    .sobre-tedic-block .sobre-tedic-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
    .sobre-tedic-block .sobre-tedic-logo-text {
        font-size: 2rem !important;
    }
    .sobre-tedic-block .sobre-tedic-logos-eyebrow {
        text-align: left !important;
    }
}