.inicio-eko {
    margin-top: 80px;
}

.inicio-eko__titulo::before,
.inicio-eko__titulo-franja {
    background-color: var(--color-azul-verde-oscuro);
}
.inicio-eko__titulo-triangulos {
    --color-triangulo-izquierdo: var(--color-rojo);
    --color-triangulo-medio: var(--color-azul-verde-oscuro);
    --color-triangulo-derecho: var(--color-amarillo);
}
.inicio-eko__titulo-texto { color: var(--color-blanco); }

.inicio-eko__componentes {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 42px auto 0;
    padding: 0 20px;
}

.inicio-eko__componente {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    --inicio-eko-componente-max-width: 450px;
    --inicio-eko-componente-aspect-ratio: 1 / 1;
    width: min(100%, var(--inicio-eko-componente-max-width));
    aspect-ratio: var(--inicio-eko-componente-aspect-ratio);
    --inicio-eko-componente-offset-x: 0px;
    --inicio-eko-triangulo-color: var(--color-azul);
    --inicio-eko-texto-color: var(--color-azul-verde-oscuro);
    transform: translateX(var(--inicio-eko-componente-offset-x));
}

.inicio-eko__componente--izquierdo {
    --inicio-eko-componente-max-width: 380px;
    --inicio-eko-componente-aspect-ratio: 696 / 584;
    --inicio-eko-componente-offset-x: 100px;
    --inicio-eko-contenido-offset-x: -75px;
    --inicio-eko-contenido-offset-y: -50px;
}

.inicio-eko__componente--medio {
    --inicio-eko-componente-max-width: 450px;
    --inicio-eko-componente-aspect-ratio: 924 / 538;
    --inicio-eko-componente-offset-x: 0px;
    --inicio-eko-contenido-offset-x: 0px;
    --inicio-eko-contenido-offset-y: -10px;
}

.inicio-eko__componente--derecho {
    --inicio-eko-componente-max-width: 380px;
    --inicio-eko-componente-aspect-ratio: 876 / 843;
    --inicio-eko-componente-offset-x: -100px;
    --inicio-eko-contenido-offset-x: 0px;
    --inicio-eko-contenido-offset-y: -55px;
}

.inicio-eko__componente[data-tipo="investigacion"] {
    --inicio-eko-triangulo-color: var(--color-naranja);
    --inicio-eko-texto-color: var(--color-azul-verde-oscuro);
}

.inicio-eko__componente[data-tipo="ensenanza"] {
    --inicio-eko-triangulo-color: var(--color-azul);
    --inicio-eko-texto-color: var(--color-azul-verde-oscuro);
}

.inicio-eko__componente[data-tipo="divulgacion"] {
    --inicio-eko-triangulo-color: var(--color-violeta);
    --inicio-eko-texto-color: var(--color-blanco);
}

.inicio-eko__componente-triangulo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--inicio-eko-triangulo-color);
    transition: fill 420ms ease;
}

.inicio-eko__componente-contenido {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 210px;
    text-align: center;
    color: var(--inicio-eko-texto-color);
    opacity: 1;
    transform: translate(
        var(--inicio-eko-contenido-offset-x, 0px),
        var(--inicio-eko-contenido-offset-y, 0px)
    );
    transition: color 420ms ease, opacity 280ms ease, transform 280ms ease;
}

.inicio-eko__componente-icono {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    --color-figura: currentColor;
}

.inicio-eko__componente-titulo,
.inicio-eko__componente-texto {
    margin: 0;
    font-family: "Elza Text", sans-serif;
}

.inicio-eko__componente-titulo {
    font-size: var(--fs-500);
    font-weight: 600;
    line-height: 1;
}

.inicio-eko__componente-texto {
    font-size: var(--fs-400);
    font-weight: 400;
    line-height: 1.08;
    opacity: 1;
    transition: opacity 280ms ease;
}

.inicio-eko__componente.is-transitioning .inicio-eko__componente-contenido {
    opacity: 0;
}

@media (max-width: 900px) {
    .inicio-eko__componentes {
        flex-wrap: wrap;
    }

    .inicio-eko__componente {
        width: min(100%, 300px);
    }
}

@media (max-width: 700px) {
    .inicio-eko__componentes {
        margin-top: 32px;
    }

    .inicio-eko__componente {
        width: min(100%, 280px);
    }

    .inicio-eko__componente-contenido {
        max-width: 188px;
    }

    .inicio-eko__componente-icono {
        width: 30px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inicio-eko__componente-triangulo,
    .inicio-eko__componente-contenido,
    .inicio-eko__componente-texto {
        transition: none !important;
    }
}